/* The landing header keeps the logo and contact action at every screen size. */
@media (max-width: 767px) {
  .site-navigation {
    --site-navigation-control-height: 44px;
    --site-navigation-axis-y: calc(var(--site-mobile-gutter, 12px) + 22px);
  }

  .site-navigation .brand {
    top: calc(var(--site-mobile-gutter, 12px) + 4px) !important;
    left: var(--site-mobile-gutter, 12px) !important;
    width: 36px;
    height: 36px;
  }

  .site-navigation > .nav-action {
    right: var(--site-mobile-gutter, 12px) !important;
    display: flex;
    min-width: 132px;
    min-height: 44px;
    padding-inline: 16px;
    font-size: 13px !important;
  }
}

/* Give the desktop hero supporting copy 10% more space below its heading. */
@media (min-width: 1200px) {
  .hero-copy-stack .hero-support {
    margin-top: clamp(11px, 1.21vw, 17.6px);
  }
}

.client-logo-reel__trust-line {
  text-align: center;
}

/* The closing email uses the site H2 scale with a compact mobile fit. */
.closing-cta-heading,
.closing-cta-heading * {
  font-size: var(--type-h2) !important;
}

@media (max-width: 767px) {
  .closing-cta-heading,
  .closing-cta-heading * {
    font-size: clamp(24px, 6.8vw, 52px) !important;
  }
}

/* Keep the intro's closing phrase together on mobile. */
.scroll-scrub-ending {
  display: contents;
}

@media (max-width: 767px) {
  .scroll-scrub-ending {
    display: inline-block;
    white-space: nowrap;
  }
}

/* Studio facts now lead directly into testimonials. */
.studio-metrics {
  padding-bottom: clamp(48px, 6vw, 88px);
  color: var(--studio-metrics-ink, #110f14);
  background-color: var(--testimonials-ambient-bg, #f7f6f4);
}

.studio-metrics .studio-metric {
  --studio-metric-background: var(--studio-metrics-card-bg, #efefeb);
}

.studio-metric__value {
  color: var(--studio-metrics-value-ink, #09090b);
}

.studio-metric__copy {
  max-width: 34ch;
  text-wrap: balance;
  color: var(--studio-metrics-ink, #110f14);
}

.studio-metric__nda {
  color: var(--studio-metrics-muted, #858188);
}

.studio-metric__rule {
  background-color: var(--studio-metrics-rule, rgba(17, 15, 20, .09));
}

.studio-metric__code {
  color: var(--studio-metrics-code-ink, rgba(74, 66, 84, .34));
}

.studio-metric__footer::before {
  background: linear-gradient(
    180deg,
    rgba(var(--studio-metrics-card-rgb, 239, 239, 235), 0) 0%,
    rgba(var(--studio-metrics-card-rgb, 239, 239, 235), .46) 28%,
    rgba(var(--studio-metrics-card-rgb, 239, 239, 235), .78) 58%,
    rgba(var(--studio-metrics-card-rgb, 239, 239, 235), .92) 100%
  );
}

@media (max-width: 767px) {
  .studio-metrics .studio-metric {
    --studio-metric-background: var(--studio-metrics-card-bg, #e1e1df);
  }

  .studio-metrics__controls .client-voices__button,
  .studio-metrics__controls .client-voices__button:disabled {
    color: var(--studio-metrics-ink, #110f14);
    background: linear-gradient(
      100deg,
      var(--testimonials-control-bg, #f7f6f4),
      var(--studio-metrics-control-bg-end, #e9e7e3)
    ) padding-box;
    border-color: var(--studio-metrics-control-border, rgba(17, 15, 20, .2));
  }

  .studio-metrics__controls .client-voices__button img,
  .studio-metrics__controls .client-voices__button:disabled img {
    filter: invert(var(--studio-metrics-icon-invert, 0));
  }

  .studio-metrics__controls .client-voices__button:not(:disabled):is(:hover, :focus-visible) img {
    filter: invert(1);
  }
}

.client-voices {
  padding-top: clamp(48px, 6vw, 80px);
}

/* Keep the arrows and a compact position track together beside the heading. */
.client-voices__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 24px clamp(34px, 3.5vw, 54px);
}

.client-voices__header > .client-voices__heading {
  min-width: 0;
  margin: 0;
}

.client-voices__header > .client-voices__controls {
  flex-shrink: 0;
  margin: 0;
}

.client-voices__header .client-voices__progress {
  flex: 0 0 120px;
  width: 120px;
}

@media (max-width: 767px) {
  .client-voices__header {
    gap: 16px;
    margin-inline: var(--site-mobile-gutter, 12px);
  }

  .client-voices__header > .client-voices__controls {
    gap: 8px;
  }

  .client-voices__header .client-voices__progress {
    flex-basis: 48px;
    width: 48px;
  }
}

@media (max-width: 520px) {
  .client-voices__header {
    margin-bottom: 28px;
  }
}

.client-voices__heading {
  color: var(--testimonials-page-ink, var(--testimonials-ink, #110f14));
}

.client-voices__card {
  --testimonial-paragraph-color: var(--testimonials-card-muted, #787878);
}

/* Testimonials reuse the Services cursor surface, including its inversion and press scale. */
@media (hover: hover) and (pointer: fine) {
  .is-testimonials-drag-hovering .client-voices__rail,
  .is-testimonials-drag-hovering .client-voices__rail * {
    cursor: none;
  }

  .is-testimonials-drag-hovering .home-services__drag-cursor {
    opacity: 1;
  }

  .is-testimonials-dragging .home-services__drag-cursor-surface {
    transform: scale(.9);
  }

  .is-testimonials-drag-hovering .pixel-cursor-canvas {
    opacity: 0 !important;
  }
}

/* Scroll supplies a continuous tint; the dark-state class must not flip arrows. */
.client-voices__header > .client-voices__controls .client-voices__button img,
.client-voices__header > .client-voices__controls .client-voices__button:disabled img {
  filter: invert(var(--testimonials-icon-invert, 0));
}

.client-voices__header > .client-voices__controls .client-voices__button:not(:disabled):is(:hover, :focus-visible) img {
  filter: invert(1);
}

/* Partially visible mobile cards share the active card's top edge before
   their entrance observer fires. Only opacity may animate in this layout. */
@media (max-width: 767px) {
  .client-voices .client-voices__card {
    transform: none;
    transition-property: opacity;
    will-change: opacity;
  }
}

.closing-cta__banner {
  height: auto;
}

.closing-cta__content {
  grid-template-areas:
    "lead"
    "outro"
    "title";
}

@media (min-width: 768px) {
  .closing-cta__banner {
    clip-path: inset(var(--closing-cta-clip-y) var(--closing-cta-clip-x));
    will-change: clip-path;
  }

  .closing-cta__surface {
    clip-path: none;
    will-change: auto;
  }

  .closing-cta__content {
    /* Keep the unbroken email inside the right column at the shared H2 size. */
    grid-template-columns: minmax(0, max(560px, calc(var(--type-h2) * 8.6)));
    justify-content: end;
    padding-inline: 24px;
  }

  .closing-cta .closing-cta-heading {
    margin: clamp(18px, 2vw, 28px) 0 0;
  }

  .closing-cta .closing-cta__content {
    visibility: hidden;
    pointer-events: none;
  }

  .closing-cta.is-content-visible .closing-cta__content {
    visibility: visible;
    pointer-events: auto;
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .closing-cta__banner {
    clip-path: none;
    will-change: auto;
  }

  .closing-cta .closing-cta__content {
    visibility: visible;
    pointer-events: auto;
  }
}

.closing-cta__lead {
  grid-area: lead;
  width: 100%;
  margin: 0;
  color: #f5f2ee;
  white-space: normal;
  text-wrap: pretty;
}

.closing-cta__outro {
  margin-top: 14px;
}

.studio-footer {
  display: flex;
  flex-direction: column;
}

.studio-footer__upper {
  grid-template-columns: minmax(0, 1fr) minmax(0, 390px);
  gap: clamp(40px, 7vw, 96px);
}

.studio-footer__direct {
  grid-column: 2;
}

.studio-footer__direct-copy {
  max-width: 38ch;
  margin: 0;
  text-wrap: pretty;
}

@media (max-width: 767px) {
  .studio-footer__direct-copy {
    display: none;
  }
}

.studio-footer > .studio-footer__lower {
  position: relative;
  inset: auto;
  margin: auto 0 0;
  padding-top: clamp(96px, 12vw, 160px);
}

@media (max-width: 900px) {
  .studio-footer__upper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 32px;
  }
}

@media (max-width: 767px) {
  .studio-footer {
    padding-top: 134.4px;
  }

  .studio-footer__upper {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 12px;
  }

  .studio-footer__direct {
    display: none;
  }

  .studio-footer__email {
    white-space: nowrap;
  }
}

@media (max-width: 560px) {
  .studio-footer {
    padding-top: 105.6px;
  }
}

@media (max-width: 767px) {
  .closing-cta .closing-cta__lead {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 700ms ease-out, transform 850ms cubic-bezier(.16, 1, .3, 1);
  }

  .closing-cta.is-mobile-content-visible .closing-cta__lead {
    opacity: 1;
    transform: none;
    transition-delay: 180ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .closing-cta .closing-cta__lead,
  .closing-cta.is-mobile-content-visible .closing-cta__lead {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Keep the desktop artwork in its original containing block. On phones the
   paired canvas and SVG get a separate area, so taller copy cannot crop them. */
.closing-cta__artwork {
  display: contents;
}

/* One continuous ambient paint covers section edges at every viewport size. */
html.page-home {
  background-color: var(--page-ambient-bg, #09090c);
}

.studio-metrics,
.client-voices,
.featured-works {
  background-color: transparent;
}

.closing-cta,
.studio-footer {
  background-color: var(--page-ambient-bg, #09090c);
}

.client-logo-reel__item img {
  filter: brightness(0) saturate(100%) invert(var(--client-logo-invert, 0));
}

.dept-intro__statement {
  color: var(--intro-statement-ink, #303030);
}

.studio-footer {
  color: var(--page-ambient-footer-ink, #f1f1f1);
}

.studio-footer__label {
  color: var(--page-ambient-footer-muted, #8b8b8b);
}

.studio-footer a:focus-visible {
  outline-color: currentColor;
}

.studio-footer__wordmark img {
  filter: invert(var(--page-ambient-logo-invert, 1));
}

@media (max-width: 767px) {
  .closing-cta__banner {
    --closing-cta-artwork-height: min(calc((100vw - 24px) * .81048177), 360px);
    min-height: 0;
  }

  .closing-cta__artwork {
    position: absolute;
    inset: 0 auto auto 50%;
    display: block;
    width: min(100%, calc(var(--closing-cta-artwork-height) * 1.233834));
    height: var(--closing-cta-artwork-height);
    overflow: hidden;
    background: var(--brand-purple);
    transform: translateX(-50%);
    pointer-events: none;
  }

  .closing-cta__hands-matrix,
  .closing-cta__hands-mask {
    transform: translateY(var(--hands-mobile-lift, 0px)) scale(1.12);
    transform-origin: 50% 0%;
  }

  .closing-cta .closing-cta__content {
    grid-template-areas:
      "lead"
      "outro"
      "title";
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    justify-items: stretch;
    align-content: start;
    padding: calc(var(--closing-cta-artwork-height) + var(--closing-cta-mobile-copy-gap, 9.216px)) 24px max(24px, env(safe-area-inset-bottom));
  }

  .closing-cta .closing-cta__lead,
  .closing-cta .closing-cta__outro {
    width: 100%;
    font-size: var(--type-body-compact, 16px) !important;
  }

  .closing-cta .closing-cta__lead {
    margin: 0;
  }

  .closing-cta .closing-cta__outro {
    margin: 12px 0 0;
  }

  .closing-cta .closing-cta-heading {
    min-width: 0;
    margin: 24px 0 0;
  }

  .closing-cta-heading,
  .closing-cta-heading * {
    font-size: var(--closing-cta-mobile-email-size, calc((100vw - 72px) / 8.216)) !important;
    line-height: 1.15 !important;
  }

  .closing-cta .closing-cta__label {
    margin-left: var(--closing-cta-mobile-email-offset, -.078em);
  }

  .closing-cta .closing-cta__title-link {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding-block: 4px 10px;
  }

  .closing-cta .closing-cta__title-link::after {
    display: none;
  }
}