:root {
  --paper: #fff;
  --panel: #fff;
  --video-thumbnail-ratio: 16 / 9;
  --focus-ring: #279ff2;
}

/* Use a true-white public-site canvas across every template. */
html,
body {
  background-color: #fff !important;
}

/* Compact text-led information headers to roughly one quarter of their former footprint. */
.info-hero {
  grid-template-columns: minmax(7rem, .55fr) minmax(0, 3fr) !important;
  gap: 3vw !important;
  align-items: start !important;
  padding: 2rem 4.5vw !important;
}

.info-hero h1 {
  font-size: clamp(2rem, 4vw, 3.75rem) !important;
  line-height: .9 !important;
}

.info-hero > div > p {
  max-width: 52rem !important;
  margin: .75rem 0 0 !important;
  font-size: clamp(.8rem, 1vw, .95rem) !important;
  line-height: 1.4 !important;
}

.project-field-label {
  font-weight: 700;
}

@media (max-width: 560px) {
  .info-hero {
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
    padding: 1.5rem 5vw !important;
  }
}

/* Match the Clients introduction to the compact, top-driven project headers. */
.clients-page .info-hero {
  display: block !important;
  padding: clamp(1.75rem, 3vw, 2.75rem) 4.5vw !important;
  border: 0 !important;
  background: #fff;
}

.clients-page .info-hero > .eyebrow,
.clients-page .info-hero > div {
  width: min(100%, 82rem);
  margin-inline: auto;
}

.clients-page .info-hero > .eyebrow {
  margin-top: 0;
  margin-bottom: .7rem;
}

.clients-page .info-hero h1 {
  font-size: clamp(1.6rem, 3vw, 2.75rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em !important;
}

.clients-page .info-hero > div > p {
  max-width: 76rem !important;
  margin: .8rem 0 0 !important;
  font-size: clamp(.8rem, 1vw, .95rem) !important;
  line-height: 1.45 !important;
}

.clients-page .client-grid {
  background: #fff;
}

/* Keep overview statements restrained across every portfolio detail page. */
.overview h2 {
  font-size: clamp(1.4rem, 3vw, 3rem) !important;
}

/* Keep every public-facing video poster and its playing state in one ratio. */
.work-image,
.motion-grid article > button,
.motion-grid article > .video-frame,
.project-film > button,
.project-film > .video-frame {
  aspect-ratio: var(--video-thumbnail-ratio);
  overflow: hidden;
  background: #000;
}

.work-image > img,
.work-image > iframe,
.motion-grid article > button > img,
.motion-grid article > button > iframe,
.motion-grid article > .video-frame > iframe,
.project-film > button > img,
.project-film > button > iframe,
.project-film > .video-frame > iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.video-frame {
  width: 100%;
}

a,
button,
input,
textarea {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
}

.accent {
  color: var(--red, #ef3b31);
}

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