:root {
  --ink: #0b031e;
  --paper: #ebf7ec;
  --paper-soft: rgba(235, 247, 236, 0.72);
  --paper-faint: rgba(235, 247, 236, 0.13);
  --line: rgba(235, 247, 236, 0.22);
  --dark-soft: rgba(11, 3, 30, 0.64);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  --sans: "Funnel Display", Arial, sans-serif;
  --display: "Funnel Display", Arial, sans-serif;
  --cursor-x: 50vw;
  --cursor-y: 35vh;
  --reveal-opacity: 0;
  --reveal-radius: clamp(190px, 20vw, 340px);
  --glow-opacity: 0;
  --site-art-image: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.55;
  overflow-x: hidden;
}
body.dialog-open { overflow: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--paper); color: var(--ink); }

/* Top-of-page artwork. It scrolls with the document and is revealed by a feathered cursor mask. */
.site-art-background {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
}
.site-art-layer {
  position: absolute;
  inset: 0;
  background-image: var(--site-art-image);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100vw auto;
  will-change: opacity, -webkit-mask-image, mask-image;
  filter: grayscale(1) contrast(1.08) brightness(0.92);
  transition: background-image 320ms ease, opacity 180ms ease;
}
.site-art-base { opacity: var(--base-opacity, 0.05); }
.site-art-reveal {
  opacity: var(--reveal-opacity);
  -webkit-mask-image: radial-gradient(
    circle var(--reveal-radius) at var(--cursor-x) var(--cursor-y),
    #000 0%,
    rgba(0, 0, 0, 0.98) 20%,
    rgba(0, 0, 0, 0.78) 45%,
    rgba(0, 0, 0, 0.35) 72%,
    transparent 100%
  );
  mask-image: radial-gradient(
    circle var(--reveal-radius) at var(--cursor-x) var(--cursor-y),
    #000 0%,
    rgba(0, 0, 0, 0.98) 20%,
    rgba(0, 0, 0, 0.78) 45%,
    rgba(0, 0, 0, 0.35) 72%,
    transparent 100%
  );
}

.site-art-reveal {
  filter: grayscale(1) contrast(1.16) brightness(1.02)
    drop-shadow(0 0 9px rgba(235, 247, 236, 0.22))
    drop-shadow(0 0 24px rgba(190, 255, 210, 0.10));
}
.site-art-background::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--glow-opacity);
  background: radial-gradient(
    circle calc(var(--reveal-radius) * 0.72) at var(--cursor-x) var(--cursor-y),
    rgba(235, 247, 236, 0.16) 0%,
    rgba(205, 255, 220, 0.075) 38%,
    transparent 76%
  );
  mix-blend-mode: screen;
  will-change: opacity, background;
}

/* Keep text and interface above the artwork while letting it sit over section backgrounds. */
.section-shell { position: relative; z-index: 4; }
.site-header { z-index: 50; }
.project-dialog { z-index: 100; }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 999;
  padding: 10px 14px;
  background: var(--paper);
  color: var(--ink);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.section-shell {
  width: min(1440px, calc(100% - 64px));
  margin-inline: auto;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  min-height: 132px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px max(32px, calc((100vw - 1440px) / 2));
  border-bottom: 1px solid transparent;
  transition: min-height 260ms ease, background 220ms ease, border-color 220ms ease, padding 260ms ease;
}
.site-header.scrolled {
  min-height: 82px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: rgba(11, 3, 30, 0.92);
  border-color: var(--line);
  backdrop-filter: blur(18px);
}
.brand {
  width: 224px;
  flex: 0 0 auto;
  transition: width 260ms cubic-bezier(.2, .8, .2, 1);
}
.site-header.scrolled .brand { width: 112px; }
.brand img { width: 100%; }
.main-nav { display: flex; align-items: center; gap: 34px; }
.main-nav a {
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .78;
  transition: opacity 180ms ease;
}
.main-nav a:hover, .main-nav a:focus-visible { opacity: 1; }
.menu-button { display: none; }

.hero {
  min-height: 100svh;
  padding-top: 190px;
  padding-bottom: 70px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .75fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: center;
  position: relative;
}
.hero-copy { position: relative; z-index: 2; }
.eyebrow {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--paper-soft);
}
h1, h2, h3 { font-family: var(--display); margin: 0; }
h1 {
  max-width: 800px;
  font-size: clamp(52px, 7.3vw, 122px);
  line-height: .94;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.hero-intro {
  max-width: 590px;
  margin: 28px 0 0;
  font-size: clamp(18px, 1.5vw, 23px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--paper-soft);
}
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 38px; }
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 12px;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .05em;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.button:hover, .button:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.25); }
.button-light { background: var(--paper); color: var(--ink); }
.text-link { text-decoration: none; font-weight: 400; }
.text-link span { display: inline-block; margin-left: 4px; transition: transform 180ms ease; }
.text-link:hover span { transform: translate(3px, -3px); }
.service-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
}
.service-list li {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--paper-soft);
}
.hero-visual {
  margin: 0;
  position: relative;
  z-index: 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-image-wrap {
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.hero-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}
.hero-image-wrap:hover img { transform: scale(1.025); }
.hero-visual figcaption { margin-top: 14px; max-width: 300px; font-size: 12px; color: var(--paper-soft); }
.hero-orbit {
  position: absolute;
  right: -80px;
  bottom: -30px;
  width: 280px;
  height: 280px;
  opacity: .14;
  pointer-events: none;
}
.hero-orbit svg { width: 100%; height: 100%; animation: spin 24s linear infinite; }
.hero-orbit text { fill: var(--paper); font-family: var(--sans); font-size: 13px; letter-spacing: .17em; }
@keyframes spin { to { transform: rotate(360deg); } }

.work, .about { padding-top: 150px; }
.section-heading { display: grid; grid-template-columns: .55fr 1.45fr; gap: 40px; align-items: start; margin-bottom: 54px; }
.section-heading.compact { margin-bottom: 48px; }
.section-heading h2, .about h2 {
  font-size: clamp(34px, 4.4vw, 72px);
  line-height: 1.03;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.project-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.project-card {
  position: relative;
  min-height: 360px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #080019;
  color: var(--paper);
  text-align: left;
  cursor: pointer;
  grid-column: span 4;
  isolation: isolate;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.project-card.large { grid-column: span 7; min-height: 540px; }
.project-card.medium { grid-column: span 5; min-height: 540px; }
.project-card.wide { grid-column: span 8; min-height: 430px; }
.project-card.slim { grid-column: span 4; min-height: 430px; }
.project-card:hover, .project-card:focus-visible {
  transform: translateY(-7px);
  box-shadow: var(--shadow);
  border-color: rgba(235,247,236,.5);
  outline: none;
}
.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(11,3,30,.94) 0, rgba(11,3,30,.25) 44%, transparent 70%);
}
.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cover-position, center);
  transform: scale(var(--cover-scale, 1));
  transition: transform 600ms cubic-bezier(.2,.8,.2,1);
}
.project-card:hover img { transform: scale(var(--cover-hover-scale, 1.035)); }
.project-card-copy { position: absolute; inset: auto 0 0; z-index: 2; padding: 26px; }
.project-card-category { display: block; margin-bottom: 8px; font-size: 10px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-soft); }
.project-card-title { display: block; font-family: var(--display); font-size: clamp(18px, 2vw, 29px); font-weight: 700; line-height: 1.12; letter-spacing: -.03em; }
.project-card-arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 19px;
  transform: translateY(-8px);
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
}
.project-card:hover .project-card-arrow, .project-card:focus-visible .project-card-arrow { opacity: 1; transform: translateY(0); }

.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(50px, 9vw, 150px);
  align-items: start;
  padding-bottom: 150px;
}
.about-copy { padding-top: 30px; }
.about-copy > p { margin: 0 0 18px; max-width: 650px; font-size: clamp(17px, 1.5vw, 22px); color: var(--paper-soft); }
.about-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 42px; }
.about-facts div { padding: 20px 0; border-top: 1px solid var(--line); }
.about-facts strong { display: block; font-family: var(--display); font-size: 32px; line-height: 1; }
.about-facts span { display: block; margin-top: 10px; font-size: 12px; color: var(--paper-soft); }

.clients {
  width: 100%;
  padding: 140px 0 150px;
  background: #fff;
  color: var(--ink);
}
.clients .eyebrow { color: var(--dark-soft); }
.client-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 58px) clamp(24px, 4vw, 56px);
  align-items: center;
}
.client-logo {
  min-width: 0;
  min-height: 104px;
  display: grid;
  place-items: center;
  padding: 4px;
  text-decoration: none;
  transition: transform 180ms ease, opacity 180ms ease;
}
.client-logo:hover, .client-logo:focus-visible { transform: translateY(-4px); opacity: .72; outline: none; }
.client-logo img { width: 100%; height: 100%; max-height: 92px; object-fit: contain; }

.contact { width: 100%; padding: 130px 0; background: var(--paper); color: var(--ink); }
.contact-card {
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(32px, 7vw, 100px);
  border-radius: 24px;
  background: var(--ink);
  color: var(--paper);
}
.contact-card .eyebrow { color: var(--paper-soft); }
.contact-card h2 { max-width: 1050px; font-size: clamp(42px, 6vw, 92px); line-height: .99; letter-spacing: -.055em; }
.contact-card .button { margin-top: 36px; }
.contact-meta { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 24px; font-size: 13px; color: var(--paper-soft); }

.site-footer {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--paper-soft);
}
.site-footer img { width: 86px; }
.site-footer a { text-decoration: none; }

.project-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  overflow: auto;
}
.project-dialog::backdrop { background: rgba(0,0,0,.7); }
.project-dialog[open] { animation: dialog-in 360ms cubic-bezier(.2,.8,.2,1); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(30px); } }
.dialog-close {
  position: fixed;
  z-index: 5;
  top: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(11,3,30,.85);
  color: var(--paper);
  font-size: 30px;
  cursor: pointer;
  backdrop-filter: blur(12px);
}
.dialog-content { width: min(1320px, calc(100% - 64px)); margin: 0 auto; padding: 110px 0 80px; }
.dialog-header { display: grid; grid-template-columns: .65fr 1.35fr; gap: 30px 70px; margin-bottom: 56px; }
.dialog-header .eyebrow { grid-column: 1; }
.dialog-header h2 { grid-column: 1 / -1; max-width: 1050px; font-size: clamp(42px, 6vw, 92px); line-height: .98; letter-spacing: -.05em; }
.dialog-intro { grid-column: 2; margin: 0; max-width: 720px; font-size: clamp(18px, 1.7vw, 24px); color: var(--paper-soft); }
.dialog-meta { grid-column: 2; display: flex; gap: 8px; flex-wrap: wrap; }
.dialog-meta span { padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--paper-soft); }
.dialog-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.dialog-gallery figure { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #080019; }
.dialog-gallery figure:nth-child(3n + 1) { grid-column: 1 / -1; }
.dialog-gallery img { width: 100%; height: auto; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms ease, transform 700ms ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

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


@media (max-width: 1180px) {
  .client-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 1020px) {
  .hero { grid-template-columns: 1fr .7fr; gap: 42px; }
  .project-card.large, .project-card.medium, .project-card.wide, .project-card.slim { grid-column: span 6; min-height: 430px; }
  .client-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root { --reveal-radius: 190px; }
  .site-art-layer { background-size: 145vw auto; background-position: center top; }
  .section-shell { width: min(100% - 32px, 1440px); }
  .site-header { min-height: 104px; padding: 10px 16px; }
  .site-header.scrolled { min-height: 72px; }
  .brand { width: 170px; }
  .site-header.scrolled .brand { width: 86px; }
  .menu-button {
    position: relative;
    z-index: 2;
    width: 46px;
    height: 46px;
    display: grid;
    place-content: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: var(--paper);
  }
  .menu-button span { width: 19px; height: 1px; background: currentColor; transition: transform 180ms ease; }
  .menu-button[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .main-nav {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    padding: 32px;
    background: var(--ink);
    transform: translateY(-102%);
    transition: transform 260ms ease;
  }
  .main-nav.open { transform: translateY(0); }
  .main-nav a { font-family: var(--display); font-size: 28px; letter-spacing: -.02em; text-transform: none; opacity: 1; }
  .hero { min-height: auto; padding-top: 145px; grid-template-columns: 1fr; }
  h1 { font-size: clamp(50px, 15vw, 82px); }
  .hero-visual { width: 88%; justify-self: end; }
  .hero-orbit { display: none; }
  .section-heading, .about { grid-template-columns: 1fr; gap: 24px; }
  .section-heading h2, .about h2 { font-size: clamp(34px, 10vw, 56px); }
  .work, .about { padding-top: 100px; }
  .about { padding-bottom: 100px; }
  .clients { padding: 96px 0 104px; }
  .contact { padding: 80px 0; }
  .project-grid { gap: 12px; }
  .project-card.large, .project-card.medium, .project-card.wide, .project-card.slim, .project-card { grid-column: 1 / -1; min-height: 430px; }
  .project-card:nth-child(n+5) { min-height: 340px; }
  .about-copy { padding-top: 0; }
  .about-facts { grid-template-columns: 1fr; }
  .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 24px; }
  .client-logo { min-height: 92px; }
  .client-logo img { max-height: 78px; }
  .contact-card { min-height: 440px; border-radius: 18px; }
  .contact-card .button { max-width: 100%; padding-inline: 16px; font-size: 10px; }
  .site-footer { flex-wrap: wrap; padding-top: 24px; padding-bottom: 24px; }
  .dialog-close { top: 14px; right: 14px; }
  .dialog-content { width: calc(100% - 28px); padding-top: 88px; }
  .dialog-header { grid-template-columns: 1fr; gap: 18px; }
  .dialog-header .eyebrow, .dialog-header h2, .dialog-intro, .dialog-meta { grid-column: 1; }
  .dialog-gallery { grid-template-columns: 1fr; gap: 12px; }
  .dialog-gallery figure:nth-child(n) { grid-column: 1; }
}

/* Revision: scrolling top artwork, Funnel Display, word web and placeholders. */
.site-art-background {
  position: absolute;
  inset: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100vw * 1.1757);
  min-height: 100svh;
  contain: layout paint style;
}
.site-art-layer {
  background-size: 100% auto;
  background-position: center top;
}

h1, h2, h3,
.section-heading h2,
.about h2,
.contact-card h2,
.dialog-header h2 {
  font-family: var(--display);
  font-weight: 666;
}
.project-card-title,
.about-facts strong,
.button {
  font-family: var(--display);
  font-weight: 666;
}

.hero {
  grid-template-columns: minmax(0, 1fr) minmax(440px, .9fr);
}
.hero-actions { margin-top: 38px; }
.chat-button {
  min-width: 146px;
  transform-origin: center;
}
.chat-button:hover,
.chat-button:focus-visible {
  animation: chat-shake 360ms ease-in-out both;
  transform: scale(1.045);
}
@keyframes chat-shake {
  0%, 100% { transform: translate(0, 0) scale(1.045) rotate(0); }
  22% { transform: translate(-2px, 1px) scale(1.045) rotate(-.7deg); }
  45% { transform: translate(2px, -1px) scale(1.05) rotate(.7deg); }
  68% { transform: translate(-1px, -1px) scale(1.045) rotate(-.35deg); }
  84% { transform: translate(1px, 1px) scale(1.045) rotate(.35deg); }
}

.word-web {
  position: relative;
  z-index: 3;
  width: min(100%, 620px);
  aspect-ratio: 1 / 1;
  justify-self: center;
  align-self: center;
  filter: drop-shadow(0 28px 60px rgba(0, 0, 0, .2));
}
.word-web::before,
.word-web::after,
.word-web-orbit {
  content: "";
  position: absolute;
  inset: 11%;
  border: 1px solid rgba(235, 247, 236, .2);
  border-radius: 50%;
  pointer-events: none;
}
.word-web::after {
  inset: 24%;
  border-style: dashed;
  opacity: .65;
  animation: word-orbit 32s linear infinite reverse;
}
.word-web-orbit {
  inset: 2%;
  border-color: rgba(235, 247, 236, .09);
  animation: word-orbit 46s linear infinite;
}
@keyframes word-orbit { to { transform: rotate(360deg); } }
.word-web-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  padding: 8%;
  border: 1px solid rgba(235, 247, 236, .42);
  border-radius: 50%;
  background: rgba(11, 3, 30, .72);
  backdrop-filter: blur(12px);
  text-align: center;
  font-family: var(--display);
  font-size: clamp(13px, 1.35vw, 21px);
  font-weight: 666;
  line-height: 1.08;
  letter-spacing: -.025em;
  box-shadow: inset 0 0 60px rgba(235,247,236,.035), 0 18px 55px rgba(0,0,0,.2);
}
.word-node {
  position: absolute;
  z-index: 2;
  min-width: 132px;
  max-width: 220px;
  min-height: 48px;
  padding: 11px 16px;
  border: 1px solid rgba(235, 247, 236, .25);
  border-radius: 999px;
  background: rgba(11, 3, 30, .72);
  color: var(--paper);
  font-family: var(--sans);
  font-size: clamp(10px, 1vw, 14px);
  font-weight: 400;
  letter-spacing: .055em;
  line-height: 1.2;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  cursor: default;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.word-node:hover,
.word-node:focus-visible {
  border-color: rgba(235, 247, 236, .8);
  background: var(--paper);
  color: var(--ink);
  transform: scale(1.055);
  box-shadow: 0 12px 34px rgba(0,0,0,.25);
  outline: none;
}
.word-node-1 { left: 50%; top: 3%; transform: translateX(-50%); }
.word-node-2 { right: 1%; top: 31%; }
.word-node-3 { right: 6%; bottom: 14%; }
.word-node-4 { left: 4%; bottom: 14%; }
.word-node-5 { left: 1%; top: 31%; }
.word-node-1:hover, .word-node-1:focus-visible { transform: translateX(-50%) scale(1.055); }

.project-card.placeholder-card::after {
  background: linear-gradient(to top, rgba(11,3,30,.93) 0, rgba(11,3,30,.2) 56%, transparent 82%);
}
.project-card-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 30%, rgba(235,247,236,.14), transparent 25%),
    radial-gradient(circle at 78% 72%, rgba(235,247,236,.1), transparent 28%),
    repeating-linear-gradient(var(--placeholder-angle, 35deg), rgba(235,247,236,.055) 0 1px, transparent 1px 34px),
    #0c0024;
}
.project-card-placeholder::before {
  content: "";
  width: min(58%, 280px);
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(235,247,236,.24);
  border-radius: 50%;
  box-shadow: 0 0 0 32px rgba(235,247,236,.035), 0 0 0 66px rgba(235,247,236,.025);
  animation: placeholder-pulse 4.8s ease-in-out infinite;
}
.project-card-placeholder::after {
  content: attr(data-mark);
  position: absolute;
  font-family: var(--display);
  font-size: clamp(36px, 6vw, 92px);
  font-weight: 666;
  letter-spacing: -.07em;
  color: rgba(235,247,236,.78);
}
@keyframes placeholder-pulse {
  50% { transform: scale(1.055); opacity: .7; }
}
.placeholder-status {
  position: absolute;
  z-index: 3;
  top: 20px;
  left: 20px;
  padding: 8px 12px;
  border: 1px solid rgba(235,247,236,.3);
  border-radius: 999px;
  background: rgba(11,3,30,.62);
  color: var(--paper);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  backdrop-filter: blur(9px);
}
.dialog-placeholder {
  min-height: min(64vw, 680px);
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(235,247,236,.12), transparent 28%),
    repeating-linear-gradient(35deg, rgba(235,247,236,.045) 0 1px, transparent 1px 38px),
    #0b0020 !important;
}
.dialog-placeholder-inner {
  width: min(70%, 520px);
  padding: 70px 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  text-align: center;
}
.dialog-placeholder strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(28px, 5vw, 68px);
  font-weight: 666;
  line-height: 1;
  letter-spacing: -.045em;
}
.dialog-placeholder span {
  display: block;
  margin-top: 14px;
  color: var(--paper-soft);
  font-size: 12px;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.client-logo-fallback {
  display: block;
  max-width: 100%;
  font-family: var(--display);
  font-size: clamp(13px, 1.2vw, 19px);
  font-weight: 666;
  line-height: 1.05;
  text-align: center;
  color: var(--ink);
}
.client-logo-fallback[hidden] { display: none; }

@media (max-width: 1020px) {
  .hero { grid-template-columns: 1fr .92fr; }
  .word-web { width: min(100%, 520px); }
}

@media (max-width: 760px) {
  .site-art-background { height: calc(100vw * 1.1757); min-height: 720px; }
  .hero { grid-template-columns: 1fr; gap: 52px; }
  .word-web { width: min(100%, 520px); justify-self: center; }
  .word-node { min-width: 112px; padding: 10px 12px; font-size: 10px; }
  .word-web-center { width: 36%; font-size: clamp(12px, 3.5vw, 18px); }
  .word-node-2 { right: -1%; }
  .word-node-5 { left: -1%; }
}

@media (max-width: 430px) {
  .word-web { width: calc(100vw - 20px); margin-left: -6px; }
  .word-node { min-width: 100px; max-width: 145px; padding-inline: 10px; font-size: 9px; }
  .word-node-2 { top: 27%; }
  .word-node-5 { top: 27%; }
  .word-node-3, .word-node-4 { bottom: 10%; }
}

body { position: relative; isolation: isolate; }
main, .site-footer { position: relative; z-index: 2; }


/* Requested correction pass: preserve the existing site and change only the specified details. */
body { font-weight: 300; }
.button { font-size: 16px; font-weight: 666; }

.contact {
  background: var(--ink);
  color: var(--paper);
}
.contact-card {
  min-height: 0;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--paper);
}
.contact-photo img {
  width: 180px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
}
.contact-content { min-width: 0; }
.contact-content .eyebrow { color: var(--paper-soft); }
.contact-content h2 {
  max-width: 1050px;
  font-size: clamp(42px, 6vw, 92px);
  line-height: .99;
  letter-spacing: -.055em;
}
.contact-content .button { margin-top: 36px; }
.contact-content .contact-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 24px;
  font-size: 13px;
  color: var(--paper-soft);
}

@media (max-width: 760px) {
  .contact-card {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .contact-photo img { width: 140px; }
  .contact-card .button { font-size: 16px; }
}


/* Requested fixes: keep all other styling unchanged. */

/* Give display headings one pixel of breathing room. */
h1,
h2,
h3,
.section-heading h2,
.about h2,
.contact-content h2,
.dialog-header h2,
.project-card-title {
  letter-spacing: 0.35px !important;
}

/* Make the background reliably visible at 5%, with the existing cursor glow. */
.site-art-background {
  z-index: 0;
  opacity: 1;
}
.site-art-layer {
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  filter: grayscale(1) contrast(1.28) brightness(1.32);
}
.site-art-base {
  opacity: 0.05 !important;
}
.site-art-reveal {
  filter:
    grayscale(1)
    contrast(1.34)
    brightness(1.48)
    drop-shadow(0 0 12px rgba(235, 247, 236, 0.34))
    drop-shadow(0 0 34px rgba(190, 255, 210, 0.18));
}
.site-art-background::after {
  filter: blur(2px);
}

/* Tighter circular head-and-shoulders contact portrait. */
.contact-photo {
  width: 180px;
  height: 180px;
  overflow: hidden;
  border-radius: 50%;
}
.contact-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}

/* Center an incomplete final row of client logos. */
.client-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 56px;
  row-gap: 44px;
}
.client-logo {
  flex: 0 1 calc((100% - 280px) / 6);
  width: calc((100% - 280px) / 6);
}

/* Balance the final project row. Classes are assigned by script.js. */
.project-grid.last-row-single .project-card.last-row-card {
  grid-column: 1 / -1 !important;
}
.project-grid.last-row-pair .project-card.last-row-card {
  grid-column: span 6 !important;
}

.footer-location {
  margin: 0;
}

@media (max-width: 1180px) {
  .client-grid {
    column-gap: 40px;
    row-gap: 38px;
  }
  .client-logo {
    flex-basis: calc((100% - 160px) / 5);
    width: calc((100% - 160px) / 5);
  }
}

@media (max-width: 1020px) {
  .client-grid {
    column-gap: 34px;
  }
  .client-logo {
    flex-basis: calc((100% - 102px) / 4);
    width: calc((100% - 102px) / 4);
  }
}

@media (max-width: 760px) {
  .contact-photo {
    width: 140px;
    height: 140px;
  }
  .client-grid {
    column-gap: 24px;
    row-gap: 28px;
  }
  .client-logo {
    flex-basis: calc((100% - 24px) / 2);
    width: calc((100% - 24px) / 2);
  }
  .project-grid.last-row-pair .project-card.last-row-card,
  .project-grid.last-row-single .project-card.last-row-card {
    grid-column: 1 / -1 !important;
  }
  .site-footer {
    align-items: center;
  }
}


/* Final background reliability fix: image elements instead of remote CSS backgrounds. */
.site-art-background {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: clamp(760px, 100vh, 1120px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  z-index: 0 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  contain: layout paint style !important;
}
.site-art-layer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  background: none !important;
  mix-blend-mode: normal !important;
  filter: grayscale(1) contrast(1.22) brightness(1.16) !important;
  transition: opacity 180ms ease !important;
}
.site-art-base {
  opacity: 0.05 !important;
}
.site-art-reveal {
  opacity: var(--reveal-opacity) !important;
  filter:
    grayscale(1)
    contrast(1.28)
    brightness(1.34)
    drop-shadow(0 0 11px rgba(235, 247, 236, 0.34))
    drop-shadow(0 0 32px rgba(190, 255, 210, 0.18)) !important;
}

/* Final background behaviour: fixed viewport artwork with reliable local files. */
.site-art-background {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 0 !important;
  z-index: 1;
  overflow: hidden;
  contain: strict;
}
.site-art-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
  background: none !important;
  filter: grayscale(1) contrast(1.12) brightness(1.02);
}
.site-art-base {
  opacity: 0.05 !important;
}
.site-art-reveal {
  filter:
    grayscale(1)
    contrast(1.18)
    brightness(1.08)
    drop-shadow(0 0 9px rgba(235, 247, 236, 0.22))
    drop-shadow(0 0 24px rgba(190, 255, 210, 0.10));
}

/* SEO/case-page and responsive-image additions. */
html { --base-opacity: .05; --touch-glow-opacity: 0; }
section[id] { scroll-margin-top: 110px; }
.site-art-background { position: fixed !important; inset: 0 !important; height: 100svh !important; min-height: 0 !important; z-index: 1; }
.site-art-layer { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; background-image: var(--site-art-image) !important; background-size: cover !important; background-position: center top !important; background-repeat: no-repeat !important; object-fit: initial !important; }
.site-art-base { opacity: var(--base-opacity, .05) !important; transition: opacity 100ms linear; }
.site-art-reveal { opacity: var(--reveal-opacity, 0) !important; }
.site-art-background::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:var(--touch-glow-opacity,0); box-shadow:inset 0 0 150px rgba(235,247,236,.16); transition:opacity 120ms linear; }
.project-card { text-decoration:none; }
.project-grid.last-row-single .project-card.last-row-card { grid-column: 1 / -1 !important; }
.project-grid.last-row-pair .project-card.last-row-card { grid-column: span 6 !important; }

.case-main { position:relative; z-index:4; padding-top:155px; padding-bottom:100px; }
.case-hero { padding-top:40px; padding-bottom:55px; }
.case-back { display:inline-flex; margin-bottom:38px; color:var(--paper-soft); font-size:13px; text-decoration:none; }
.case-back:hover { color:var(--paper); }
.case-hero h1 { max-width:1100px; font-size:clamp(48px,7vw,104px); line-height:.96; }
.case-intro { max-width:760px; margin:28px auto 0 0; font-size:clamp(18px,1.7vw,24px); color:var(--paper-soft); }
.case-tags { display:flex; gap:8px; flex-wrap:wrap; max-width:760px; margin:24px auto 0 0; }
.case-tags span { padding:7px 11px; border:1px solid var(--line); border-radius:999px; font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--paper-soft); }
.case-gallery { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.case-gallery figure { margin:0; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#080019; }
.case-gallery figure:nth-child(3n + 1) { grid-column:1 / -1; }
.case-gallery img { width:100%; height:auto; }
.case-placeholder { min-height:560px; grid-column:1/-1; display:grid; place-items:center; border:1px solid var(--line); border-radius:18px; background:radial-gradient(circle at 30% 25%,rgba(235,247,236,.10),transparent 36%),linear-gradient(135deg,rgba(235,247,236,.04),rgba(235,247,236,.01)); text-align:center; }
.case-placeholder strong { display:block; font-family:var(--display); font-size:clamp(70px,14vw,190px); line-height:1; opacity:.18; }
.case-placeholder span { display:block; margin-top:16px; color:var(--paper-soft); text-transform:uppercase; letter-spacing:.13em; font-size:12px; }
.case-nav { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:70px; }
.case-nav a { display:flex; flex-direction:column; gap:6px; padding:24px; border:1px solid var(--line); border-radius:16px; text-decoration:none; }
.case-nav a:last-child { text-align:right; }
.case-nav small { color:var(--paper-soft); text-transform:uppercase; letter-spacing:.12em; }
.case-nav strong { font-family:var(--display); font-size:20px; }
.case-contact { margin-top:80px; padding:55px 0 0; border-top:1px solid var(--line); }
.case-contact h2 { max-width:780px; font-size:clamp(34px,4vw,62px); line-height:1; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

@media (hover:none), (pointer:coarse) {
  .site-art-reveal { display:none !important; }
}
@media (max-width:760px) {
  section[id] { scroll-margin-top:82px; }
  .case-main { padding-top:105px; }
  .case-intro, .case-tags { margin-left:0; }
  .case-gallery { grid-template-columns:1fr; gap:12px; }
  .case-gallery figure:nth-child(n) { grid-column:1; }
  .case-nav { grid-template-columns:1fr; }
  .case-nav a:last-child { text-align:left; }
  .project-grid.last-row-pair .project-card.last-row-card, .project-grid.last-row-single .project-card.last-row-card { grid-column:1/-1 !important; }
}


/* Dynamic A-to-B hero, interactive center, client transitions and enlarged contact portrait. */
.dynamic-hero-title {
  max-width: 980px;
  font-size: clamp(48px, 6.4vw, 108px);
  line-height: .93;
}
.dynamic-title-row {
  display: block;
  white-space: nowrap;
}
.hero-cycle {
  display: inline-block;
  min-width: 7.6ch;
  margin: 0;
  padding: 0 .02em;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 160ms ease, text-shadow 160ms ease, transform 160ms ease;
  vertical-align: baseline;
}
.hero-cycle-a { min-width: 10.8ch; }
.hero-cycle-b { min-width: 8.2ch; }
.hero-cycle:hover,
.hero-cycle:focus-visible {
  color: #fff4bf;
  text-shadow: 0 0 22px rgba(255, 218, 105, .22);
  transform: translateY(-.018em);
  outline: none;
}

.word-web-center {
  width: 40%;
  padding: 9%;
  font-size: clamp(15px, 1.55vw, 24px);
  overflow: hidden;
  isolation: isolate;
}
.word-web-center::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(
    circle 100px at var(--center-glow-x, 50%) var(--center-glow-y, 50%),
    rgba(255, 222, 116, .24) 0%,
    rgba(255, 218, 105, .11) 42%,
    transparent 76%
  );
  transition: opacity 180ms ease;
  pointer-events: none;
}
.word-web-center:hover::after,
.word-web-center:focus-within::after,
.word-web-center.is-glowing::after {
  opacity: 1;
}

.random-about-fact {
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
.random-about-fact:hover,
.random-about-fact:focus-visible {
  background: rgba(235,247,236,.025);
  transform: translateY(-2px);
  outline: none;
}
.random-about-fact strong,
.random-about-fact span {
  transition: opacity 120ms ease;
}

.number-transition {
  position: relative;
  z-index: 3;
  width: 100%;
  height: clamp(92px, 9vw, 144px);
  overflow: hidden;
  pointer-events: none;
}
.number-transition-top {
  background: linear-gradient(to bottom, var(--ink) 0%, rgba(11,3,30,.92) 18%, #fff 100%);
}
.number-transition-bottom {
  background: linear-gradient(to bottom, #fff 0%, rgba(11,3,30,.88) 82%, var(--ink) 100%);
}
.number-transition::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, currentColor 1.1px, transparent 1.7px);
  background-size: 12px 12px;
  opacity: .17;
  animation: halftone-drift 14s linear infinite;
}
.number-transition-top::before {
  color: var(--paper);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
}
.number-transition-bottom::before {
  color: var(--paper);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 92%);
  mask-image: linear-gradient(to top, #000 0%, transparent 92%);
}
.number-stream {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  width: 135%;
  margin-left: -12%;
  font-family: var(--display);
  font-size: clamp(10px, .86vw, 14px);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .72em;
  word-spacing: .95em;
  white-space: pre-wrap;
  text-align: justify;
  color: rgba(235,247,236,.24);
  mix-blend-mode: difference;
  opacity: .72;
  transform: rotate(-2deg);
  animation: number-drift 18s linear infinite alternate;
}
@keyframes halftone-drift {
  to { background-position: 48px 24px; }
}
@keyframes number-drift {
  from { transform: translateX(-1.5%) rotate(-2deg); }
  to { transform: translateX(1.5%) rotate(-2deg); }
}

.contact-card {
  grid-template-columns: 270px minmax(0, 1fr);
}
.contact-photo {
  width: 270px;
  height: 270px;
}
.contact-photo img {
  width: 100%;
  height: 100%;
}

@media (max-width: 1180px) {
  .dynamic-hero-title {
    font-size: clamp(46px, 6.15vw, 86px);
  }
}
@media (max-width: 760px) {
  .dynamic-hero-title {
    font-size: clamp(42px, 12vw, 68px);
  }
  .dynamic-title-row {
    white-space: normal;
  }
  .hero-cycle {
    min-width: 0;
  }
  .word-web-center {
    width: 42%;
    padding: 8%;
    font-size: clamp(14px, 4vw, 18px);
  }
  .contact-photo {
    width: 210px;
    height: 210px;
  }
  .number-transition {
    height: 88px;
  }
  .number-stream {
    font-size: 9px;
    letter-spacing: .5em;
    word-spacing: .65em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .number-transition::before,
  .number-stream {
    animation: none !important;
  }
}


/* Hero/layout refinement, logo interaction, revised noise transitions and copy updates. */

/* Move the logo into visual alignment with the page copy. */
.brand {
  margin-left: -18px;
  perspective: 900px;
}
.brand img {
  transform-style: preserve-3d;
  backface-visibility: visible;
}
.brand:hover img,
.brand:focus-visible img {
  animation: brand-coin-flip 620ms cubic-bezier(.35,.02,.2,1) 1;
}
@keyframes brand-coin-flip {
  0%   { transform: rotateY(0deg); }
  48%  { transform: rotateY(178deg); }
  52%  { transform: rotateY(182deg); }
  100% { transform: rotateY(360deg); }
}

/* Five percent smaller, constrained to the same width as the body copy. */
.dynamic-hero-title {
  width: 100%;
  max-width: 590px;
  font-size: clamp(46px, 6.08vw, 103px);
  line-height: .94;
}
.hero-copy {
  min-width: 0;
  max-width: 590px;
}
.dynamic-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .14em;
  white-space: normal;
  max-width: 100%;
}
.dynamic-title-row:last-child {
  flex-wrap: nowrap;
}
.hero-cycle {
  min-width: 0 !important;
  max-width: 100%;
  flex: 0 1 auto;
}
.hero-intro {
  width: 100%;
  max-width: 590px;
}

/* The word web keeps a stable size regardless of the rotating headline words. */
.word-web {
  width: min(100%, 600px);
  min-width: 0;
}
.word-node {
  width: 190px;
  min-width: 190px;
  max-width: 190px;
}

/* Stack the word web sooner, before the two columns become crowded. */
@media (max-width: 1180px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 72px;
  }
  .hero-copy {
    max-width: 590px;
  }
  .word-web {
    width: min(100%, 600px);
    justify-self: center;
  }
  .dynamic-hero-title {
    font-size: clamp(44px, 7.2vw, 82px);
  }
}

@media (max-width: 760px) {
  .brand { margin-left: -8px; }
  .dynamic-hero-title {
    font-size: clamp(40px, 11.4vw, 65px);
  }
  .dynamic-title-row:last-child {
    flex-wrap: wrap;
  }
  .word-node {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
  }
}

/* Replace the animated number bands with a simple static noise gradient. */
.number-transition {
  height: clamp(78px, 7vw, 112px);
  background-color: transparent;
}
.number-transition-top {
  background:
    radial-gradient(circle at 15% 40%, rgba(235,247,236,.18) 0 1px, transparent 1.4px) 0 0 / 7px 7px,
    radial-gradient(circle at 70% 60%, rgba(235,247,236,.11) 0 1px, transparent 1.5px) 0 0 / 11px 11px,
    linear-gradient(to bottom, var(--ink) 0%, rgba(11,3,30,.84) 28%, rgba(255,255,255,.92) 82%, #fff 100%);
}
.number-transition-bottom {
  background:
    radial-gradient(circle at 25% 40%, rgba(11,3,30,.16) 0 1px, transparent 1.4px) 0 0 / 7px 7px,
    radial-gradient(circle at 78% 65%, rgba(11,3,30,.1) 0 1px, transparent 1.5px) 0 0 / 11px 11px,
    linear-gradient(to bottom, #fff 0%, rgba(255,255,255,.92) 18%, rgba(11,3,30,.84) 72%, var(--ink) 100%);
}
.number-transition::before {
  content: none !important;
}
.number-stream {
  display: none !important;
}

.contact-content h2 {
  max-width: 900px;
}


/* Keep the changing hero headline stable and always on exactly two lines. */
.dynamic-hero-title {
  width: 100%;
  max-width: 590px;
  font-size: clamp(42px, 4.8vw, 74px);
  line-height: .96;
}

.dynamic-title-row,
.dynamic-title-row:last-child {
  display: grid;
  grid-template-columns: auto 10ch;
  justify-content: start;
  align-items: baseline;
  column-gap: .14em;
  width: 100%;
  max-width: 590px;
  white-space: nowrap;
  flex-wrap: nowrap;
}

.hero-cycle,
.hero-cycle-a,
.hero-cycle-b {
  display: block;
  width: 10ch;
  min-width: 10ch !important;
  max-width: 10ch;
  overflow: hidden;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .dynamic-hero-title {
    font-size: clamp(40px, 6.2vw, 68px);
  }
}

@media (max-width: 760px) {
  .dynamic-hero-title {
    font-size: clamp(34px, 10vw, 52px);
  }

  .dynamic-title-row,
  .dynamic-title-row:last-child {
    grid-template-columns: auto 10ch;
    white-space: nowrap;
    flex-wrap: nowrap;
  }
}


/* Mobile stability fix: prevent Safari shrink-to-fit and remove native button appearance. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.site-header,
main,
.site-footer,
.section-shell,
.hero,
.hero-copy,
.word-web,
.project-grid,
.clients,
.contact {
  max-width: 100%;
}

.dynamic-hero-title {
  width: 100%;
  max-width: 590px;
  overflow: visible;
}

.dynamic-title-row,
.dynamic-title-row:last-child {
  display: grid;
  grid-template-columns: max-content minmax(0, 10ch);
  align-items: baseline;
  justify-content: start;
  column-gap: .14em;
  width: 100%;
  max-width: 590px;
  white-space: nowrap;
}

.hero-prefix {
  display: block;
}

.hero-cycle,
.hero-cycle-a,
.hero-cycle-b {
  display: block;
  width: 10ch;
  min-width: 0 !important;
  max-width: 10ch;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.hero-cycle:hover,
.hero-cycle:focus-visible,
.hero-cycle:active {
  background: transparent;
  color: #fff4bf;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}

/* Never let the service web force the viewport wider than its container. */
.word-web {
  width: min(100%, 600px) !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 760px) {
  .section-shell {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
  }

  .hero {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }

  .hero-copy {
    width: 100%;
    max-width: 100%;
  }

  .dynamic-hero-title {
    width: 100%;
    max-width: 100%;
    font-size: clamp(34px, 10vw, 52px);
  }

  .dynamic-title-row,
  .dynamic-title-row:last-child {
    grid-template-columns: max-content minmax(0, 10ch);
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
  }

  .word-web {
    width: 100% !important;
    max-width: 520px !important;
    margin-inline: auto !important;
  }

  .word-node {
    box-sizing: border-box;
  }
}

@media (max-width: 430px) {
  .word-web {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  .word-node {
    width: 128px;
    min-width: 128px;
    max-width: 128px;
    padding-inline: 8px;
  }

  .word-node-2 { right: 0; }
  .word-node-5 { left: 0; }
}


/* Fully hide the closed mobile navigation.
   translateY alone could leave part of the fixed panel visible in iOS Safari
   when the dynamic browser viewport changed during scrolling. */
@media (max-width: 760px) {
  .main-nav {
    z-index: 1;
    height: 100vh;
    height: 100dvh;
    min-height: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -100%, 0);
    clip-path: inset(0 0 100% 0);
    -webkit-clip-path: inset(0 0 100% 0);
    transition:
      transform 260ms ease,
      opacity 160ms ease,
      visibility 0s linear 260ms,
      clip-path 260ms ease;
    overflow: hidden;
  }

  .main-nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
    transition:
      transform 260ms ease,
      opacity 160ms ease,
      visibility 0s linear 0s,
      clip-path 260ms ease;
  }

  .brand,
  .menu-button {
    position: relative;
    z-index: 3;
  }
}

/* Case-study content pass, headline refinement and unified off-white text. */
:root {
  --paper-soft: #ebf7ec;
}

/* Keep the two-line dynamic headline larger without clipping descenders. */
.dynamic-hero-title {
  font-size: clamp(46px, 5.28vw, 81px);
  line-height: 1.08;
  padding-bottom: .08em;
  overflow: visible;
}
.dynamic-title-row,
.dynamic-title-row:last-child {
  line-height: 1.08;
  min-height: 1.14em;
  overflow: visible;
}
.hero-cycle,
.hero-cycle-a,
.hero-cycle-b {
  line-height: 1.08;
  padding-bottom: .08em;
  overflow: visible;
}

/* Match previously muted text to the main off-white. */
.eyebrow,
.hero-intro,
.project-card-category,
.about-copy > p,
.about-facts span,
.contact-content .eyebrow,
.contact-content .contact-meta,
.site-footer,
.case-back,
.case-intro,
.case-tags span,
.case-nav small,
.case-story-copy p,
.case-image-placeholder figcaption,
.dialog-intro,
.dialog-meta span,
.dialog-placeholder span {
  color: var(--paper) !important;
}
.project-card-placeholder::after {
  color: var(--paper);
}

/* New in-depth case-study layout with three text sections and media placeholders. */
.case-story {
  display: grid;
  gap: clamp(70px, 9vw, 130px);
  padding-top: 28px;
  padding-bottom: 30px;
}
.case-story-row {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
  gap: clamp(40px, 7vw, 110px);
  align-items: center;
}
.case-story-row:nth-child(even) .case-story-copy {
  order: 2;
}
.case-story-row:nth-child(even) .case-image-placeholder {
  order: 1;
}
.case-story-copy {
  max-width: 560px;
}
.case-story-number {
  display: block;
  margin-bottom: 20px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 666;
  letter-spacing: .18em;
  color: var(--paper);
}
.case-story-copy p {
  margin: 0;
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight: 300;
  line-height: 1.48;
}
.case-image-placeholder {
  min-height: clamp(360px, 48vw, 680px);
  margin: 0;
  display: grid;
  place-items: center;
  align-content: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 26% 24%, rgba(235,247,236,.10), transparent 30%),
    repeating-linear-gradient(35deg, rgba(235,247,236,.035) 0 1px, transparent 1px 38px),
    #080019;
  text-align: center;
}
.case-image-placeholder strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(74px, 13vw, 190px);
  font-weight: 666;
  line-height: .9;
  color: var(--paper);
  opacity: .12;
}
.case-image-placeholder figcaption {
  margin-top: 22px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}

@media (max-width: 1180px) {
  .dynamic-hero-title {
    font-size: clamp(44px, 6.8vw, 75px);
  }
}

@media (max-width: 760px) {
  .dynamic-hero-title {
    font-size: clamp(37px, 11vw, 57px);
    line-height: 1.09;
  }
  .dynamic-title-row,
  .dynamic-title-row:last-child,
  .hero-cycle,
  .hero-cycle-a,
  .hero-cycle-b {
    line-height: 1.09;
  }
  .case-story {
    gap: 76px;
  }
  .case-story-row {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .case-story-row:nth-child(even) .case-story-copy,
  .case-story-row:nth-child(even) .case-image-placeholder {
    order: initial;
  }
  .case-story-copy {
    max-width: none;
  }
  .case-story-copy p {
    font-size: clamp(19px, 5.4vw, 24px);
  }
  .case-image-placeholder {
    min-height: 340px;
  }
}


/* Compact global header and refined case-study navigation. */
.site-header,
.site-header.scrolled {
  min-height: 82px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.brand,
.site-header.scrolled .brand {
  width: 112px;
}

.case-page .site-header,
.case-page .site-header.scrolled {
  min-height: 76px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.case-page .brand,
.case-page .site-header.scrolled .brand {
  width: 104px;
}

.case-page .case-main {
  padding-top: 104px;
}

.case-page .case-hero {
  padding-top: 18px;
}

.case-page .case-back {
  position: relative;
  z-index: 2;
  margin: 0 0 42px;
  padding: 8px 0;
}

@media (max-width: 760px) {
  .site-header,
  .site-header.scrolled,
  .case-page .site-header,
  .case-page .site-header.scrolled {
    min-height: 70px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .brand,
  .site-header.scrolled .brand,
  .case-page .brand,
  .case-page .site-header.scrolled .brand {
    width: 86px;
  }

  .case-page .case-main {
    padding-top: 92px;
  }

  .case-page .case-hero {
    padding-top: 12px;
  }

  .case-page .case-back {
    margin-bottom: 34px;
  }
}

/* Oval service web, retaining the rotating orbital construction. */
.word-web {
  width: min(100%, 660px) !important;
  aspect-ratio: 1.34 / 1;
}

.word-web::before,
.word-web::after,
.word-web-orbit {
  border-radius: 50%;
}

.word-web-center {
  width: 42%;
  aspect-ratio: 1.55 / 1;
  padding: 7%;
  border-radius: 50%;
  font-size: clamp(20px, 2.05vw, 31px);
  line-height: 1.02;
}

/* Remove the pills around the animated service words. */
.word-node {
  min-width: 0;
  max-width: none;
  min-height: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  overflow: visible;
  color: var(--paper);
  font-size: clamp(14px, 1.35vw, 20px);
  font-weight: 500;
  letter-spacing: .035em;
  cursor: pointer;
  transition:
    color 220ms ease,
    text-shadow 220ms ease,
    filter 220ms ease;
}

.word-node:hover,
.word-node:focus-visible,
.word-node.is-set {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff6cf;
  box-shadow: none;
  outline: none;
  text-shadow:
    0 0 8px rgba(255, 225, 132, .28),
    0 0 20px rgba(255, 225, 132, .13);
}

/* Preserve each node's own positioning transform while it settles. */
.word-node.is-set span {
  display: inline-block;
  transform-origin: center;
  animation: word-settle-drift 7.5s ease-in-out infinite alternate;
}

@keyframes word-settle-drift {
  0%   { transform: translate(-1px, 0) scale(1.10) rotate(-.18deg); }
  35%  { transform: translate(1.5px, -1px) scale(1.12) rotate(.16deg); }
  68%  { transform: translate(-.5px, 1.5px) scale(1.11) rotate(-.08deg); }
  100% { transform: translate(1px, -.5px) scale(1.12) rotate(.12deg); }
}

.word-node-1:hover,
.word-node-1:focus-visible,
.word-node-1.is-set {
  transform: translateX(-50%);
}

@media (max-width: 1180px) {
  .word-web {
    width: min(100%, 620px) !important;
  }
}

@media (max-width: 760px) {
  .word-web {
    width: min(100%, 560px) !important;
    aspect-ratio: 1.22 / 1;
  }

  .word-web-center {
    width: 44%;
    font-size: clamp(18px, 5vw, 25px);
  }

  .word-node {
    width: auto;
    min-width: 0;
    max-width: 150px;
    padding: 5px;
    font-size: clamp(12px, 3.25vw, 16px);
  }
}

@media (max-width: 430px) {
  .word-web {
    width: 100% !important;
    aspect-ratio: 1.12 / 1;
  }

  .word-web-center {
    width: 46%;
    font-size: clamp(17px, 5.2vw, 22px);
  }

  .word-node {
    width: auto;
    min-width: 0;
    max-width: 128px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .word-node.is-set span {
    animation: none;
    transform: scale(1.1);
  }
}


/* Wider word web and stronger revealed-word state. */
.word-web {
  width: min(100%, 760px) !important;
  aspect-ratio: 1.62 / 1;
}

.word-web-center {
  width: 43%;
  aspect-ratio: 2 / 1;
}

.word-node {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(15px, 1.45vw, 21px);
  letter-spacing: .02em;
}

.word-node.is-set {
  font-weight: 700;
}

.word-node.is-set span {
  animation: word-settle-drift-wide 5.8s ease-in-out infinite alternate;
}

@keyframes word-settle-drift-wide {
  0%   { transform: translate(-4px, 1px) scale(1.18) rotate(-.35deg); }
  24%  { transform: translate(3px, -3px) scale(1.21) rotate(.28deg); }
  52%  { transform: translate(5px, 2px) scale(1.19) rotate(.12deg); }
  76%  { transform: translate(-2px, 4px) scale(1.22) rotate(-.25deg); }
  100% { transform: translate(4px, -1px) scale(1.20) rotate(.32deg); }
}

@media (max-width: 1180px) {
  .word-web {
    width: min(100%, 700px) !important;
    aspect-ratio: 1.55 / 1;
  }
}

@media (max-width: 760px) {
  .word-web {
    width: min(100%, 620px) !important;
    aspect-ratio: 1.42 / 1;
  }

  .word-web-center {
    width: 45%;
    aspect-ratio: 1.85 / 1;
  }

  .word-node {
    font-size: clamp(13px, 3.5vw, 17px);
  }
}

@media (max-width: 430px) {
  .word-web {
    width: 100% !important;
    aspect-ratio: 1.3 / 1;
  }

  .word-web-center {
    width: 48%;
    aspect-ratio: 1.72 / 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .word-node.is-set span {
    animation: none;
    transform: scale(1.18);
  }
}


/* Centre the two-line message precisely inside the oval. */
.word-web-center {
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}

.word-web-center > span {
  display: block;
  width: 100%;
  margin: 0;
  line-height: 1.02;
  text-align: center;
}

.word-web-center:focus-visible {
  outline: 1px solid rgba(255, 225, 132, .55);
  outline-offset: 5px;
}

/* Allow anchor scrolling without the fixed header covering the card. */
.project-card {
  scroll-margin-top: 110px;
}

/* Short one-time response after a service link lands on a case.
   Uses transform and filter instead of animating several large box-shadows,
   which is substantially smoother when multiple cards respond together. */
.project-card.case-attention-burst {
  z-index: 4;
  transform-origin: center;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  will-change: transform, filter, border-color;
  animation: case-attention-burst-smooth 920ms cubic-bezier(.22,.82,.24,1) both;
  animation-delay: var(--attention-delay, 0ms);
}

@keyframes case-attention-burst-smooth {
  0% {
    transform: translate3d(0,0,0) scale(1);
    border-color: var(--line);
    filter:
      drop-shadow(0 0 0 rgba(255,226,139,0))
      drop-shadow(0 0 0 rgba(255,214,112,0));
  }
  30% {
    transform: translate3d(0,-9px,0) scale(1.014);
    border-color: rgba(255,226,139,.72);
    filter:
      drop-shadow(0 0 11px rgba(255,226,139,.22))
      drop-shadow(0 0 28px rgba(255,214,112,.14));
  }
  57% {
    transform: translate3d(0,-6px,0) scale(1.009);
    border-color: rgba(255,226,139,.42);
    filter:
      drop-shadow(0 0 8px rgba(255,226,139,.13))
      drop-shadow(0 0 19px rgba(255,214,112,.08));
  }
  78% {
    transform: translate3d(0,-2px,0) scale(1.003);
    border-color: rgba(255,226,139,.18);
    filter:
      drop-shadow(0 0 4px rgba(255,226,139,.06))
      drop-shadow(0 0 9px rgba(255,214,112,.035));
  }
  100% {
    transform: translate3d(0,0,0) scale(1);
    border-color: var(--line);
    filter:
      drop-shadow(0 0 0 rgba(255,226,139,0))
      drop-shadow(0 0 0 rgba(255,214,112,0));
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-card.case-attention-burst {
    animation: case-attention-burst-reduced 480ms ease both;
    animation-delay: var(--attention-delay, 0ms);
  }

  @keyframes case-attention-burst-reduced {
    0%, 100% {
      border-color: var(--line);
      filter: none;
    }
    50% {
      border-color: rgba(255,226,139,.62);
      filter: drop-shadow(0 0 16px rgba(255,214,112,.12));
    }
  }
}


/* Pause continuous hero and service-web CSS motion after the portfolio title
   has passed the fixed header. JavaScript toggles this class and also pauses
   its own timers/animation frames. */
body.hero-motion-paused .word-web::after,
body.hero-motion-paused .word-web-orbit,
body.hero-motion-paused .word-node.is-set span,
body.hero-motion-paused .hero-orbit svg {
  animation-play-state: paused !important;
}

#work {
  scroll-margin-top: 92px;
}

@media (max-width: 760px) {
  #work {
    scroll-margin-top: 78px;
  }
}

/* Pizzamaatjes case media. */
.case-media {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #080019;
}

.case-media img {
  display: block;
  width: 100%;
  height: 100%;
}

.case-media-portrait {
  width: min(100%, 540px);
  aspect-ratio: 1112 / 1516;
  justify-self: center;
}

.case-media-portrait img {
  object-fit: cover;
}

.case-media-landscape {
  width: 100%;
}

.case-media-photo {
  aspect-ratio: 2048 / 1147;
}

.case-media-photo img {
  object-fit: cover;
}

.case-media-graphic {
  aspect-ratio: 2048 / 1362;
}

.case-media-graphic img {
  object-fit: cover;
}

.case-story-row:nth-child(even) .case-media {
  order: 1;
}

.case-video-section {
  padding-top: clamp(48px, 7vw, 100px);
  padding-bottom: clamp(40px, 6vw, 88px);
}

.case-video-frame {
  width: min(100%, 760px);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #000;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}

.case-video-frame video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 1528;
  background: #000;
}

@media (max-width: 760px) {
  .case-story-row:nth-child(even) .case-media {
    order: initial;
  }

  .case-media-portrait {
    width: min(100%, 470px);
  }

  .case-video-frame {
    width: min(100%, 540px);
  }
}


/* Compact case-study header: fixed height rather than a large flexible bar. */
.case-page .site-header,
.case-page .site-header.scrolled {
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: rgba(11, 3, 30, .94);
  border-color: var(--line);
  backdrop-filter: blur(18px);
}

.case-page .brand,
.case-page .site-header.scrolled .brand {
  width: 96px !important;
}

.case-page .main-nav {
  align-self: center;
}

.case-page .case-main {
  padding-top: 92px !important;
}

/* Three-column system for all case-study content. */
.case-page .case-story {
  gap: clamp(64px, 7vw, 108px);
}

.case-page .case-story-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 30px);
  align-items: center;
}

.case-page .case-story-row > .case-story-copy {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: none;
  order: initial;
}

.case-page .case-story-row > .case-image-placeholder,
.case-page .case-story-row > .case-media {
  grid-column: 2 / span 2;
  grid-row: 1;
  width: 100%;
  max-width: none;
  order: initial;
}

.case-page .case-story-row:nth-child(even) > .case-story-copy {
  grid-column: 3;
}

.case-page .case-story-row:nth-child(even) > .case-image-placeholder,
.case-page .case-story-row:nth-child(even) > .case-media {
  grid-column: 1 / span 2;
}

/* Pizzamaatjes: text + portrait video + portrait image. */
.case-story--pizzamaatjes .case-story-row--three-up {
  align-items: stretch;
}

.case-story--pizzamaatjes .case-story-row--three-up > .case-story-copy,
.case-story--pizzamaatjes .case-story-row--three-up > .case-media {
  grid-column: auto;
  grid-row: 1;
}

.case-story--pizzamaatjes .case-story-row--three-up > .case-story-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: clamp(6px, 1vw, 18px);
}

.case-story--pizzamaatjes .case-story-row--three-up .case-media {
  aspect-ratio: 0.72 / 1;
  min-height: 0;
}

.case-story--pizzamaatjes .case-media-video video,
.case-story--pizzamaatjes .case-media-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-story--pizzamaatjes .case-media-video {
  background: #000;
}

.case-story--pizzamaatjes .case-media-video video {
  background: #000;
}

/* Wide second row: image across two columns, text in the third. */
.case-story--pizzamaatjes .case-story-row--media-left > .case-media {
  grid-column: 1 / span 2;
  grid-row: 1;
}

.case-story--pizzamaatjes .case-story-row--media-left > .case-story-copy {
  grid-column: 3;
  grid-row: 1;
}

/* Wide third row, flipped: text first, image across the final two columns. */
.case-story--pizzamaatjes .case-story-row--media-right > .case-story-copy {
  grid-column: 1;
  grid-row: 1;
}

.case-story--pizzamaatjes .case-story-row--media-right > .case-media {
  grid-column: 2 / span 2;
  grid-row: 1;
}

.case-story--pizzamaatjes .case-media-photo {
  aspect-ratio: 2048 / 1147;
}

.case-story--pizzamaatjes .case-media-graphic {
  aspect-ratio: 2048 / 1362;
}

.case-story--pizzamaatjes .case-media-photo img,
.case-story--pizzamaatjes .case-media-graphic img {
  object-fit: cover;
}

@media (max-width: 980px) {
  .case-page .case-story-row,
  .case-story--pizzamaatjes .case-story-row--three-up {
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
  }

  .case-page .case-story-row > .case-story-copy,
  .case-page .case-story-row > .case-image-placeholder,
  .case-page .case-story-row > .case-media,
  .case-page .case-story-row:nth-child(even) > .case-story-copy,
  .case-page .case-story-row:nth-child(even) > .case-image-placeholder,
  .case-page .case-story-row:nth-child(even) > .case-media,
  .case-story--pizzamaatjes .case-story-row--three-up > .case-story-copy,
  .case-story--pizzamaatjes .case-story-row--three-up > .case-media,
  .case-story--pizzamaatjes .case-story-row--media-left > .case-media,
  .case-story--pizzamaatjes .case-story-row--media-left > .case-story-copy,
  .case-story--pizzamaatjes .case-story-row--media-right > .case-story-copy,
  .case-story--pizzamaatjes .case-story-row--media-right > .case-media {
    grid-column: 1;
    grid-row: auto;
    order: initial;
  }

  .case-story--pizzamaatjes .case-story-row--three-up .case-media {
    width: min(100%, 620px);
    justify-self: center;
  }

  .case-story--pizzamaatjes .case-story-row--media-left > .case-story-copy {
    order: -1;
  }
}

@media (max-width: 760px) {
  .case-page .site-header,
  .case-page .site-header.scrolled {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding-inline: 16px !important;
  }

  .case-page .brand,
  .case-page .site-header.scrolled .brand {
    width: 82px !important;
  }

  .case-page .case-main {
    padding-top: 82px !important;
  }

  .case-story--pizzamaatjes .case-story-row--three-up .case-media {
    width: min(100%, 500px);
  }
}


/* Mobile contact layout: image first, copy below, fully contained. */
@media (max-width: 760px) {
  .contact {
    padding: 72px 0 80px;
    overflow: hidden;
  }

  .contact .section-shell {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    margin-inline: auto;
  }

  .contact-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 30px !important;
    width: 100%;
    min-width: 0;
  }

  .contact-photo {
    order: 1;
    width: min(72vw, 300px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    flex: 0 0 auto;
  }

  .contact-photo img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 50%;
  }

  .contact-content {
    order: 2;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    text-align: left;
  }

  .contact-content .eyebrow {
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: .18em;
  }

  .contact-content h2 {
    width: 100%;
    max-width: 100%;
    margin: 0;
    font-size: clamp(40px, 13vw, 64px) !important;
    line-height: .98;
    letter-spacing: -.035em !important;
    overflow-wrap: normal;
    word-break: normal;
  }

  .contact-content .button {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    margin-top: 28px;
    padding: 16px 24px;
    font-size: 16px;
    white-space: nowrap;
  }
}

@media (max-width: 390px) {
  .contact-content h2 {
    font-size: clamp(36px, 12.2vw, 52px) !important;
  }

  .contact-photo {
    width: min(76vw, 280px) !important;
  }
}


/* Context phrases around hovered services. */
.word-web {
  isolation: isolate;
}

.service-phrase-cloud {
  --cloud-x: 50%;
  --cloud-y: 50%;
  position: absolute;
  z-index: 1;
  left: var(--cloud-x);
  top: var(--cloud-y);
  width: clamp(270px, 35vw, 390px);
  aspect-ratio: 1.35 / 1;
  transform: translate(-50%, -50%) scale(.94);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition:
    opacity 260ms ease,
    transform 420ms cubic-bezier(.2,.8,.2,1),
    visibility 0s linear 260ms;
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    #000 0%,
    rgba(0,0,0,.98) 48%,
    rgba(0,0,0,.62) 68%,
    rgba(0,0,0,.16) 86%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse at center,
    #000 0%,
    rgba(0,0,0,.98) 48%,
    rgba(0,0,0,.62) 68%,
    rgba(0,0,0,.16) 86%,
    transparent 100%
  );
}

.service-phrase-cloud.is-visible {
  opacity: calc(.72 + (var(--reveal-opacity, 0) * .28));
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition:
    opacity 260ms ease,
    transform 420ms cubic-bezier(.2,.8,.2,1),
    visibility 0s linear 0s;
}

.service-phrase {
  position: absolute;
  left: var(--phrase-x);
  top: var(--phrase-y);
  color: var(--paper);
  font-family: var(--sans);
  font-size: var(--phrase-size);
  font-weight: 300;
  line-height: 1;
  letter-spacing: .025em;
  white-space: nowrap;
  opacity: var(--phrase-opacity);
  transform:
    translate(-50%, -50%)
    rotate(var(--phrase-rotation));
  text-shadow: 0 0 12px rgba(255, 239, 190, .08);
  animation: service-phrase-drift var(--phrase-speed) ease-in-out infinite alternate;
  animation-delay: var(--phrase-delay);
}

@keyframes service-phrase-drift {
  0% {
    translate: -2px 1px;
  }
  50% {
    translate: 2px -2px;
  }
  100% {
    translate: 1px 2px;
  }
}

.word-node {
  z-index: 3;
}

.word-web-center,
.word-web-orbit {
  z-index: 2;
}

body.hero-motion-paused .service-phrase-cloud {
  opacity: 0 !important;
  visibility: hidden;
}

body.hero-motion-paused .service-phrase {
  animation-play-state: paused;
}

@media (max-width: 760px), (hover: none), (pointer: coarse) {
  .service-phrase-cloud {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-phrase {
    animation: none;
  }

  .service-phrase-cloud,
  .service-phrase-cloud.is-visible {
    transition-duration: 120ms;
  }
}


/* Copy-deck update: childhood image in About. */
.about-photo {
  width: 270px;
  height: 270px;
  margin: 0 0 34px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
}

.about-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Keep case CTA spacing consistent with other button treatments. */
.case-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.case-contact h2 {
  margin-bottom: 0;
}

.case-contact .button {
  margin-top: 30px;
}

/* Numbers were removed from the markup; keep legacy selectors hidden too. */
.case-story-number,
.case-image-placeholder > strong {
  display: none !important;
}

@media (max-width: 760px) {
  .about-photo {
    width: 210px;
    height: 210px;
    margin: 0 auto 28px;
  }

  .case-contact .button {
    margin-top: 26px;
  }
}


/* Elliptical noise transitions around the client logo board.
   Noise texture adapted from https://stackoverflow.com/a/13996191
   by tim.baker / Stack Overflow community, CC BY-SA 3.0. */
.number-transition {
  position: relative;
  z-index: 3;
  height: clamp(112px, 10vw, 164px);
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  background-color: var(--ink);
}

/* Keep the tonal transition linear; the ellipse itself creates the curve. */
.number-transition-top {
  background-image: linear-gradient(
    to bottom,
    var(--ink) 0%,
    #160d2b 34%,
    #665f70 68%,
    #fff 100%
  );
}

.number-transition-bottom {
  background-image: linear-gradient(
    to bottom,
    #fff 0%,
    #77717e 34%,
    #201631 68%,
    var(--ink) 100%
  );
}

/* Fine monochrome grain over the linear colour transition. */
.number-transition::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block !important;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==");
  background-repeat: repeat;
  background-size: 50px 50px;
  opacity: .24;
  mix-blend-mode: soft-light;
  animation: none !important;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 16%,
    #000 84%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 16%,
    #000 84%,
    transparent 100%
  );
}

/* The white logo section behaves like one very large zoomed-in ellipse:
   it rises slightly in the centre at the top and drops in the centre below. */
.number-transition::after {
  content: "";
  position: absolute;
  left: 50%;
  z-index: 1;
  width: 132%;
  height: 245%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #fff;
}

.number-transition-top::after {
  top: 57%;
}

.number-transition-bottom::after {
  bottom: 57%;
}

.number-transition-top::before {
  opacity: .27;
}

.number-transition-bottom::before {
  opacity: .22;
}

.number-stream {
  display: none !important;
}

@media (max-width: 760px) {
  .number-transition {
    height: 96px;
  }

  .number-transition::after {
    width: 160%;
    height: 230%;
  }

  .number-transition-top::after {
    top: 61%;
  }

  .number-transition-bottom::after {
    bottom: 61%;
  }
}


/* Revised client-board transition: smooth vertical gradient with true grain.
   This replaces the previous tiled PNG texture that produced visible lines. */
.number-transition {
  position: relative;
  z-index: 3;
  height: clamp(110px, 9vw, 150px);
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background: none !important;
}

.number-transition-top {
  background-image: linear-gradient(
    to bottom,
    var(--ink) 0%,
    #17102a 30%,
    #5f5967 65%,
    #d6d5d3 88%,
    #fff 100%
  ) !important;
}

.number-transition-bottom {
  background-image: linear-gradient(
    to bottom,
    #fff 0%,
    #d6d5d3 12%,
    #69636f 37%,
    #1b132d 70%,
    var(--ink) 100%
  ) !important;
}

/* Fine, non-directional noise that fades through the transition vertically. */
.number-transition::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  background-repeat: repeat;
  opacity: .28;
  mix-blend-mode: soft-light;
  animation: none !important;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.55) 12%,
    #000 35%,
    #000 65%,
    rgba(0,0,0,.55) 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.55) 12%,
    #000 35%,
    #000 65%,
    rgba(0,0,0,.55) 88%,
    transparent 100%
  );
}

/* Very slight ellipse-like edge. Kept subtle so the gradient stays smooth. */
.number-transition::after {
  content: "";
  position: absolute;
  left: 50%;
  z-index: 1;
  width: 150%;
  height: 185%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #fff;
}

.number-transition-top::after {
  top: 72%;
}

.number-transition-bottom::after {
  bottom: 72%;
}

.number-stream {
  display: none !important;
}

@media (max-width: 760px) {
  .number-transition {
    height: 92px;
  }

  .number-transition::after {
    width: 190%;
    height: 170%;
  }

  .number-transition-top::after {
    top: 76%;
  }

  .number-transition-bottom::after {
    bottom: 76%;
  }
}


/* Final client-board transition: taller, gradual, linear and uncurved. */
.number-transition {
  position: relative;
  z-index: 3;
  height: clamp(150px, 13vw, 220px);
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background-color: var(--ink) !important;
}

/* Literal stop structure requested:
   transparent dark at 25%, solid dark at 50%, solid white at 100%. */
.number-transition-top {
  background-color: var(--ink) !important;
  background-image: linear-gradient(
    to bottom,
    rgba(11, 3, 30, 0) 25%,
    rgba(11, 3, 30, 1) 50%,
    rgba(255, 255, 255, 1) 100%
  ) !important;
}

/* Reversed for the lower edge. */
.number-transition-bottom {
  background-color: var(--ink) !important;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(11, 3, 30, 1) 50%,
    rgba(11, 3, 30, 0) 75%
  ) !important;
}

/* Fine grain follows the same vertical fade without visible tiling lines. */
.number-transition::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  background-repeat: repeat;
  opacity: .25;
  mix-blend-mode: soft-light;
  animation: none !important;
}

.number-transition-top::before {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 18%,
    rgba(0,0,0,.28) 30%,
    rgba(0,0,0,.72) 54%,
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 18%,
    rgba(0,0,0,.28) 30%,
    rgba(0,0,0,.72) 54%,
    #000 100%
  );
}

.number-transition-bottom::before {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0,0,0,.72) 46%,
    rgba(0,0,0,.28) 70%,
    transparent 82%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0,0,0,.72) 46%,
    rgba(0,0,0,.28) 70%,
    transparent 82%
  );
}

/* Remove the earlier ellipse overlay entirely. */
.number-transition::after {
  content: none !important;
  display: none !important;
}

.number-stream {
  display: none !important;
}

@media (max-width: 760px) {
  .number-transition {
    height: 124px;
  }
}


/* Client-board transition based on the supplied Rectangle_1 gradient.
   Modernized from the old vendor-prefixed syntax. */
.number-transition {
  position: relative;
  z-index: 3;
  height: clamp(180px, 15vw, 260px);
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background-color: var(--ink) !important;
}

/* White at the logo-board edge, translucent dark through the middle,
   transparent dark at the page edge so the actual page colour shows through. */
.number-transition-top {
  background-color: var(--ink) !important;
  background-image: linear-gradient(
    to top,
    rgb(255,255,255) 0%,
    rgba(11,3,30,.47) 53%,
    rgba(11,3,30,0) 100%
  ) !important;
}

.number-transition-bottom {
  background-color: var(--ink) !important;
  background-image: linear-gradient(
    to bottom,
    rgb(255,255,255) 0%,
    rgba(11,3,30,.47) 53%,
    rgba(11,3,30,0) 100%
  ) !important;
}

/* Fine grain layered over the supplied gradient. */
.number-transition::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  background-repeat: repeat;
  opacity: .24;
  mix-blend-mode: soft-light;
  animation: none !important;
}

.number-transition-top::before {
  -webkit-mask-image: linear-gradient(
    to top,
    #000 0%,
    rgba(0,0,0,.82) 42%,
    rgba(0,0,0,.35) 72%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to top,
    #000 0%,
    rgba(0,0,0,.82) 42%,
    rgba(0,0,0,.35) 72%,
    transparent 100%
  );
}

.number-transition-bottom::before {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0,0,0,.82) 42%,
    rgba(0,0,0,.35) 72%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0,0,0,.82) 42%,
    rgba(0,0,0,.35) 72%,
    transparent 100%
  );
}

/* No curve overlay: this is now a clean vertical transition only. */
.number-transition::after {
  content: none !important;
  display: none !important;
}

.number-stream {
  display: none !important;
}

@media (max-width: 760px) {
  .number-transition {
    height: 140px;
  }
}


/* Image-based transitions around the client logo board. */
.number-transition {
  position: relative;
  z-index: 3;
  height: clamp(160px, 14vw, 240px);
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background: transparent !important;
}

.number-transition::before,
.number-transition::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block !important;
  background-image: url("assets/img/logo-board-transition.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

/* Top: use the supplied image as-is. */
.number-transition-top::before {
  z-index: 1;
  opacity: 1;
  transform: none;
}

/* Bottom: flip the same image upside down. */
.number-transition-bottom::before {
  z-index: 1;
  opacity: 1;
  transform: scaleY(-1);
  transform-origin: center;
}

/* Remove previous synthetic gradient/noise layers entirely. */
.number-transition::after {
  content: none !important;
  display: none !important;
}

.number-stream {
  display: none !important;
}

@media (max-width: 760px) {
  .number-transition {
    height: 124px;
  }

  .number-transition::before {
    background-size: cover;
  }
}


/* Reliable image-element transitions around the client logo board. */
.number-transition {
  position: relative;
  z-index: 3;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
  pointer-events: none;
  background: transparent !important;
  line-height: 0;
}

.number-transition::before,
.number-transition::after {
  content: none !important;
  display: none !important;
}

.logo-board-transition-image {
  display: block;
  width: 100%;
  height: auto;
  min-height: 112px;
  object-fit: fill;
  opacity: 1;
}

.number-transition-bottom .logo-board-transition-image {
  transform: scaleY(-1);
  transform-origin: center;
}

.number-stream {
  display: none !important;
}

@media (max-width: 760px) {
  .logo-board-transition-image {
    width: 140%;
    max-width: none;
    margin-left: -20%;
    min-height: 92px;
  }
}


/* Flush the supplied transition image directly against the logo section. */
.number-transition {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
  overflow: hidden;
}

.logo-board-transition-image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  object-fit: fill;
  vertical-align: top;
}

.number-transition-top {
  margin-bottom: -1px !important;
}

.number-transition-bottom {
  margin-top: -1px !important;
}

.number-transition-bottom .logo-board-transition-image {
  transform: scaleY(-1);
  transform-origin: center;
}

/* The artwork itself now spans edge to edge, so no mobile oversizing is needed. */
@media (max-width: 760px) {
  .logo-board-transition-image {
    width: 100%;
    margin-left: 0;
    min-height: 0;
  }
}

/* Slightly tighter main animated heading without reintroducing clipping. */
.dynamic-hero-title {
  line-height: 1.05;
}

.dynamic-title-row,
.dynamic-title-row:last-child,
.hero-cycle,
.hero-cycle-a,
.hero-cycle-b {
  line-height: 1.05;
}

@media (max-width: 760px) {
  .dynamic-hero-title,
  .dynamic-title-row,
  .dynamic-title-row:last-child,
  .hero-cycle,
  .hero-cycle-a,
  .hero-cycle-b {
    line-height: 1.06;
  }
}


/* Soften the last hard white pixel edge of the supplied transition artwork. */
.number-transition {
  overflow: hidden;
}

.number-transition::after {
  content: "";
  position: absolute;
  left: 0;
  z-index: 4;
  display: block !important;
  width: 100%;
  height: 12px;
  pointer-events: none;
}

/* White at the logo-board edge, fading outward into transparent dark blue. */
.number-transition-top::after {
  bottom: -1px;
  background: linear-gradient(
    to top,
    rgba(255,255,255,1) 0%,
    rgba(11,3,30,0) 100%
  );
}

.number-transition-bottom::after {
  top: -1px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,1) 0%,
    rgba(11,3,30,0) 100%
  );
}

/* Let the page artwork remain visible behind the contact section. */
.contact {
  background: transparent !important;
}

/* Keep the contact card itself unchanged and readable. */
.contact-card {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  .number-transition::after {
    height: 10px;
  }
}


/* Inline contact form powered by Web3Forms. */
.contact-content {
  width: 100%;
}

.contact-form {
  width: min(100%, 860px);
  margin-top: 36px;
}

.contact-form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.contact-field > span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper-soft);
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(235,247,236,.25);
  border-radius: 14px;
  background: rgba(235,247,236,.055);
  color: var(--paper);
  font: inherit;
  font-size: 16px;
  line-height: 1.35;
  padding: 15px 17px;
  outline: none;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: rgba(235,247,236,.5);
}

.contact-field textarea {
  min-height: 150px;
  resize: vertical;
}

.contact-field-message {
  grid-column: 1 / -1;
}

.contact-field input:focus,
.contact-field textarea:focus {
  border-color: rgba(255,226,139,.75);
  background: rgba(235,247,236,.08);
  box-shadow: 0 0 0 3px rgba(255,226,139,.08);
}

.contact-form-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 24px;
}

.contact-submit {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
}

.contact-submit[disabled] {
  cursor: wait;
  opacity: .68;
}

.contact-form-status {
  margin: 0;
  min-height: 1.4em;
  color: var(--paper-soft);
  font-size: 15px;
}

.contact-form-status.is-success {
  color: #fff6cf;
}

.contact-form-status.is-error {
  color: #ffb8b2;
}

.contact-form-botcheck {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 760px) {
  .contact-form {
    width: 100%;
    margin-top: 28px;
  }

  .contact-form-fields {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .contact-field-message {
    grid-column: 1;
  }

  .contact-form-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .contact-submit {
    width: 100%;
    justify-content: center;
  }
}


/* Scroll-scrubbed motion for case cards that do not yet have imagery. */
.placeholder-card {
  background:
    linear-gradient(145deg, rgba(235,247,236,.035), transparent 48%),
    #080019;
}

.placeholder-video-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* Elliptical orbital lines behind the video. */
.placeholder-video-stage::before,
.placeholder-video-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 47%;
  border: 1px solid rgba(235,247,236,.16);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-9deg);
  pointer-events: none;
}

.placeholder-video-stage::before {
  width: 112%;
  height: 67%;
  box-shadow:
    0 0 0 28px rgba(235,247,236,.025),
    0 0 0 29px rgba(235,247,236,.11),
    0 0 0 62px rgba(235,247,236,.018),
    0 0 0 63px rgba(235,247,236,.075);
}

.placeholder-video-stage::after {
  width: 77%;
  height: 43%;
  transform: translate(-50%, -50%) rotate(13deg);
  border-color: rgba(255,226,139,.18);
  box-shadow:
    0 0 0 22px rgba(255,226,139,.018),
    0 0 0 23px rgba(255,226,139,.085);
}

.placeholder-scroll-video {
  position: relative;
  z-index: 2;
  display: block;
  width: min(82%, 760px);
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: screen;
  opacity: .88;
  filter: contrast(1.08);
  transform: translateZ(0);
  will-change: contents;
}

.placeholder-card.wide .placeholder-scroll-video {
  width: min(72%, 820px);
}

.placeholder-card.slim .placeholder-scroll-video {
  width: 102%;
  max-width: none;
}

.placeholder-card::after {
  z-index: 3;
}

.placeholder-card .project-card-copy,
.placeholder-card .project-card-arrow {
  z-index: 4;
}

@media (max-width: 760px) {
  .placeholder-scroll-video,
  .placeholder-card.wide .placeholder-scroll-video {
    width: 96%;
  }

  .placeholder-card.slim .placeholder-scroll-video {
    width: 112%;
  }

  .placeholder-video-stage::before {
    width: 138%;
    height: 62%;
  }

  .placeholder-video-stage::after {
    width: 94%;
    height: 39%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .placeholder-scroll-video {
    opacity: .78;
  }
}


/* Final image-less case treatment: full-card video, no orbital shapes or blend effects. */
.placeholder-video-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  background: #080019;
}

.placeholder-video-stage::before,
.placeholder-video-stage::after {
  content: none !important;
  display: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

.placeholder-scroll-video,
.placeholder-card.wide .placeholder-scroll-video,
.placeholder-card.slim .placeholder-scroll-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  margin: 0;
  opacity: 1;
  mix-blend-mode: normal;
  filter: none;
  transform: none;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 760px) {
  .placeholder-scroll-video,
  .placeholder-card.wide .placeholder-scroll-video,
  .placeholder-card.slim .placeholder-scroll-video {
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
  }
}


/* Contact form readability and status alignment refinements. */
.contact-field input,
.contact-field textarea {
  background: rgba(11, 3, 30, .50) !important;
}

.contact-field input:focus,
.contact-field textarea:focus {
  background: rgba(11, 3, 30, .62) !important;
}

.contact-form-actions {
  align-items: center !important;
  column-gap: 34px !important;
}

.contact-form-status {
  display: flex;
  align-items: center;
  min-height: 52px;
}

@media (max-width: 760px) {
  .contact-form-actions {
    align-items: stretch !important;
    row-gap: 18px !important;
  }

  .contact-form-status {
    min-height: 0;
  }
}


/* Stereolube: one real project image, without placeholder panels. */
.stereolube-feature-image {
  aspect-ratio: 1648 / 927;
}

.stereolube-feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stereolube-copy-only {
  grid-template-columns: minmax(0, 760px);
  justify-content: start;
}

.stereolube-copy-only:nth-child(3) {
  justify-content: end;
}

.stereolube-copy-only .case-story-copy {
  max-width: 760px;
}

@media (max-width: 760px) {
  .stereolube-feature-row,
  .stereolube-copy-only {
    grid-template-columns: 1fr;
  }

  .stereolube-copy-only:nth-child(3) {
    justify-content: start;
  }
}

/* Expanded case media. */
.case-copy-only-row{grid-template-columns:minmax(0,780px)!important;justify-content:start}
.case-copy-only-row:nth-child(even){justify-content:end}
.case-copy-only-row .case-story-copy{max-width:780px;order:initial!important}
.case-media-gallery{display:grid;gap:clamp(22px,3vw,42px);padding-top:clamp(40px,6vw,90px);padding-bottom:clamp(60px,8vw,120px)}
.case-media-grid,.case-media-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2vw,30px)}
.case-media-count-1{grid-template-columns:1fr}
.case-media-item{margin:0;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#080019}
.case-media-item img,.case-media-item video{display:block;width:100%;height:auto}
.case-media-item video{background:#000}
.brute-video-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.8vw,24px)}
.brute-video-row .case-media-item{aspect-ratio:9/16}
.brute-video-row video{width:100%;height:100%;object-fit:cover}
.mitsuba-overlap{position:relative;min-height:clamp(520px,64vw,880px);isolation:isolate}
.mitsuba-overlap .case-media-item{position:absolute;width:min(70%,900px);box-shadow:0 30px 80px rgba(0,0,0,.36)}
.mitsuba-overlap-back{right:2%;top:4%;z-index:1;transform:rotate(3.5deg)}
.mitsuba-overlap-front{left:2%;bottom:2%;z-index:2;transform:rotate(-2.5deg)}
.project-card-hover-video{width:100%;height:100%;object-fit:cover;pointer-events:none}
@media(max-width:760px){
.case-copy-only-row,.case-copy-only-row:nth-child(even){grid-template-columns:1fr!important;justify-content:start}
.case-media-grid,.case-media-pair,.brute-video-row{grid-template-columns:1fr}
.brute-video-row .case-media-item{aspect-ratio:auto}
.brute-video-row video{height:auto;object-fit:contain}
.mitsuba-overlap{min-height:560px}
.mitsuba-overlap .case-media-item{width:88%}
.mitsuba-overlap-back{right:0}
.mitsuba-overlap-front{left:0}
}


/* REFRAG and Made to Measure media additions. */
.refrag-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.refrag-grid .case-media-span-two {
  grid-column: 1 / -1;
}
.refrag-grid .case-media-item img,
.made-to-measure-grid .case-media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.made-to-measure-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.made-to-measure-grid .case-media-item:first-child {
  aspect-ratio: 3 / 2;
}
.made-to-measure-grid .case-media-item:last-child {
  aspect-ratio: 3 / 2;
}

@media (max-width: 760px) {
  .refrag-grid,
  .made-to-measure-grid {
    grid-template-columns: 1fr;
  }
  .refrag-grid .case-media-span-two {
    grid-column: auto;
  }
}


/* Overlapping about portraits: childhood image behind, current portrait in front. */
.about-photo-stack {
  position: relative;
  width: min(100%, 560px);
  height: clamp(360px, 42vw, 610px);
  margin: 0 0 clamp(36px, 5vw, 64px);
  isolation: isolate;
}

.about-photo-card {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(235,247,236,.18);
  border-radius: 24px;
  background: #080019;
  box-shadow: 0 28px 70px rgba(0,0,0,.34);
  transform-origin: center;
}

.about-photo-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-photo-child {
  z-index: 1;
  left: 2%;
  top: 3%;
  width: 68%;
  height: 77%;
  transform: rotate(-4deg);
}

.about-photo-current {
  z-index: 2;
  right: 1%;
  bottom: 2%;
  width: 66%;
  height: 76%;
  transform: rotate(3deg);
}

.about-photo-current img {
  object-position: center;
}

/* Contact now uses the available width without the portrait column. */
.contact-card {
  grid-template-columns: minmax(0, 1fr) !important;
}

.contact-content {
  width: min(100%, 860px);
  margin-inline: auto;
}

@media (max-width: 760px) {
  .about-photo-stack {
    width: 100%;
    height: 420px;
    margin-bottom: 38px;
  }

  .about-photo-child {
    left: 0;
    top: 3%;
    width: 72%;
    height: 74%;
  }

  .about-photo-current {
    right: 0;
    bottom: 1%;
    width: 70%;
    height: 73%;
  }
}


/* Refine About photo overlap: slightly smaller cards and more of the childhood photo visible. */
.about-photo-stack {
  width: min(100%, 520px);
  height: clamp(340px, 39vw, 570px);
}

.about-photo-child {
  left: 0;
  top: 2%;
  width: 64%;
  height: 72%;
  transform: rotate(-3.25deg);
}

.about-photo-current {
  right: 0;
  bottom: 0;
  width: 58%;
  height: 68%;
  transform: rotate(2.5deg);
}

@media (max-width: 760px) {
  .about-photo-stack {
    height: 390px;
  }

  .about-photo-child {
    width: 68%;
    height: 70%;
  }

  .about-photo-current {
    width: 61%;
    height: 66%;
  }
}


/* Pizzamaatjes replacement media and NL Voor Elkaar additions. */
.pizzamaatjes-media-gallery {
  gap: clamp(22px, 3vw, 44px);
}

.pizzamaatjes-media-gallery .case-media-wide {
  width: 100%;
}

.pizzamaatjes-media-gallery .case-media-item img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.pizzamaatjes-poster-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.nl-voor-elkaar-added-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(22px, 3vw, 42px);
}

.nl-voor-elkaar-added-grid .case-media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 760px) {
  .pizzamaatjes-poster-grid,
  .nl-voor-elkaar-added-grid {
    grid-template-columns: 1fr;
  }
}


/* Mouth tape case media update */
.mouth-tape-media-gallery {
  gap: clamp(22px, 3vw, 44px);
}

.mouth-tape-media-gallery .case-media-item img,
.mouth-tape-media-gallery .case-media-item video {
  width: 100%;
  height: auto;
  display: block;
}

.mouth-tape-media-gallery .case-media-wide {
  width: 100%;
}

.mouth-tape-hero-grid,
.mouth-tape-flow-grid,
.mouth-tape-royal-grid {
  display: grid;
  gap: clamp(18px, 2vw, 28px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.mouth-tape-hero-grid .case-media-wide {
  grid-column: 1 / -1;
}

.mouth-tape-video video {
  border-radius: 20px;
  overflow: hidden;
  background: #000;
}

@media (max-width: 760px) {
  .mouth-tape-hero-grid,
  .mouth-tape-flow-grid,
  .mouth-tape-royal-grid {
    grid-template-columns: 1fr;
  }

  .mouth-tape-hero-grid .case-media-wide {
    grid-column: auto;
  }
}

/* Mixed case-study flow: copy and media alternate instead of appearing in blocks. */
.case-flow {
  display: grid;
  gap: clamp(34px, 5vw, 78px);
  padding-top: clamp(48px, 7vw, 100px);
  padding-bottom: clamp(62px, 9vw, 130px);
}

.case-flow .case-story-row {
  width: min(100%, 780px);
  grid-template-columns: 1fr !important;
  margin: 0;
}

.case-flow .case-story-row:nth-of-type(even) {
  justify-self: end;
}

.case-flow .case-story-copy {
  max-width: 780px;
  order: initial !important;
}

.case-flow-media {
  width: 100%;
  min-width: 0;
}

.case-flow-media > .case-media-item,
.case-flow-media > .case-media-grid,
.case-flow-media > .case-media-pair,
.case-flow-media > .brute-video-row,
.case-flow-media > .mitsuba-overlap,
.case-flow-media > div {
  width: 100%;
}

.case-flow-media .case-media-item {
  margin: 0;
}

.case-flow-media .case-media-item img,
.case-flow-media .case-media-item video {
  width: 100%;
  height: auto;
  display: block;
}

.case-flow-media > .case-media-item {
  overflow: hidden;
  border-radius: 18px;
}

/* Reordered portfolio rows: consistent heights and responsive collapse. */
.project-grid {
  align-items: stretch;
}

@media (max-width: 900px) {
  .project-card.large,
  .project-card.medium,
  .project-card.wide,
  .project-card.slim {
    grid-column: span 6;
    min-height: 440px;
  }
}

@media (max-width: 760px) {
  .case-flow {
    gap: 30px;
    padding-top: 42px;
    padding-bottom: 72px;
  }

  .case-flow .case-story-row,
  .case-flow .case-story-row:nth-of-type(even) {
    width: 100%;
    justify-self: stretch;
  }

  .project-card.large,
  .project-card.medium,
  .project-card.wide,
  .project-card.slim {
    grid-column: 1 / -1;
    min-height: 390px;
  }
}


/* Instant case-media playback and full-screen media overlay. */
[data-lightbox-media] {
  cursor: zoom-in;
}

.media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  place-items: center;
  padding: clamp(16px, 3vw, 44px);
  background: rgba(5, 1, 15, .94);
  backdrop-filter: blur(12px);
}

.media-lightbox.is-open {
  display: grid;
}

.media-lightbox-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.media-lightbox-content img,
.media-lightbox-content video {
  display: block;
  max-width: 96vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 30px 100px rgba(0,0,0,.55);
  cursor: default;
}

.media-lightbox-close {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(235,247,236,.96);
  color: #0b031e;
  font: 700 26px/1 sans-serif;
  cursor: pointer;
}

body.media-lightbox-open {
  overflow: hidden;
}

.brute-feed-overlap {
  position: relative;
  min-height: clamp(520px, 70vw, 930px);
  isolation: isolate;
}

.brute-feed-overlap .case-media-item {
  position: absolute;
  width: min(66%, 850px);
  box-shadow: 0 32px 90px rgba(0,0,0,.38);
}

.brute-feed-before {
  left: 2%;
  top: 4%;
  z-index: 1;
  transform: rotate(-3deg);
}

.brute-feed-after {
  right: 2%;
  bottom: 3%;
  z-index: 2;
  transform: rotate(3deg);
}

.booch-logo-stage,
.booch-logo-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.booch-logo-video {
  object-fit: cover;
}

@media (max-width: 760px) {
  .brute-feed-overlap {
    min-height: 560px;
  }

  .brute-feed-overlap .case-media-item {
    width: 82%;
  }
}


/* Refined case-page width and desktop text/media composition. */
.case-page .case-hero,
.case-page .case-flow,
.case-page .case-nav {
  width: min(66vw, 1298px) !important;
  max-width: min(66vw, 1298px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.case-layout-refined {
  display: grid;
  gap: clamp(34px, 5vw, 76px);
  padding-top: clamp(42px, 6vw, 86px);
  padding-bottom: clamp(60px, 8vw, 120px);
}

.case-content-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 48px);
  align-items: center;
  min-width: 0;
}

.case-content-row.is-flipped .case-row-text {
  order: 2;
}

.case-content-row.is-flipped .case-row-media {
  order: 1;
}

.case-row-text,
.case-row-media {
  min-width: 0;
}

.case-row-text {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.case-row-text .case-story-copy {
  max-width: none !important;
}

.case-row-media {
  overflow: hidden;
}

.case-row-media > figure,
.case-row-media > div {
  margin: 0;
  width: 100%;
  max-width: 100%;
}

.case-row-media img,
.case-row-media video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.media-pair-row {
  align-items: start;
}

.media-pair-row .case-row-media {
  width: 100%;
}

.brute-feed-row {
  grid-template-columns: 1fr;
}

.text-only-pair {
  align-items: start;
}

/* Keep overlapping compositions inside their own media cell. */
.case-row-media .mitsuba-overlap,
.case-row-media .brute-feed-overlap {
  position: relative;
  width: 100%;
  min-height: clamp(360px, 34vw, 620px);
  overflow: hidden;
  isolation: isolate;
}

.case-row-media .brute-feed-overlap {
  min-height: 0;
  aspect-ratio: 1 / 1.15;
}

.case-row-media .mitsuba-overlap .case-media-item,
.case-row-media .brute-feed-overlap .case-media-item {
  position: absolute;
  width: 72%;
  max-width: 72%;
  margin: 0;
  box-shadow: 0 24px 66px rgba(0,0,0,.34);
}

.case-row-media .mitsuba-overlap .case-media-item:first-child,
.case-row-media .brute-feed-overlap .case-media-item:first-child {
  left: 2%;
  top: 4%;
  right: auto;
  bottom: auto;
  transform: rotate(-3deg);
  z-index: 1;
}

.case-row-media .mitsuba-overlap .case-media-item:last-child,
.case-row-media .brute-feed-overlap .case-media-item:last-child {
  right: 2%;
  bottom: 4%;
  left: auto;
  top: auto;
  transform: rotate(3deg);
  z-index: 2;
}

.case-row-media .brute-feed-overlap .case-media-item {
  width: 60%;
  max-width: 60%;
}

.case-row-media .brute-feed-overlap .case-media-item:first-child {
  top: 2%;
}

.case-row-media .brute-feed-overlap .case-media-item:last-child {
  top: 10%;
  bottom: auto;
}

/* BOOCH now scrubs on scroll exactly like other placeholder cards. */
.booch-logo-stage .placeholder-scroll-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1100px) {
  .case-page .case-hero,
  .case-page .case-flow,
  .case-page .case-nav {
    width: min(78vw, 980px) !important;
    max-width: min(78vw, 980px) !important;
  }
}

@media (max-width: 760px) {
  .case-page .case-hero,
  .case-page .case-flow,
  .case-page .case-nav {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
  }

  .case-content-row,
  .text-only-pair,
  .media-pair-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .case-content-row.is-flipped .case-row-text,
  .case-content-row.is-flipped .case-row-media {
    order: initial;
  }

  .case-row-media .mitsuba-overlap,
  .case-row-media .brute-feed-overlap {
    min-height: 500px;
  }

  .case-row-media .brute-feed-overlap {
    aspect-ratio: 1 / 1.55;
  }

  .case-row-media .mitsuba-overlap .case-media-item,
  .case-row-media .brute-feed-overlap .case-media-item {
    width: 82%;
    max-width: 82%;
  }

  .case-row-media .brute-feed-overlap .case-media-item {
    width: 76%;
    max-width: 76%;
  }
}