/* Full-width, continuous specialty ribbon. */
.marquee { -webkit-mask-image: none; mask-image: none; }
.marquee-track { animation: specialties-loop var(--loop-duration, 34s) linear infinite; }
.marquee-group { flex: 0 0 auto; gap: 44px; padding-right: 44px; }
.marquee span { gap: 0; padding-right: 0; }
@keyframes specialties-loop { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }

/* Stable testimonial dimensions, independent of the screen width. */
.client-carousel {
  --client-fade-width: clamp(24px, 7vw, 120px);
  padding: 20px 0 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--client-fade-width), #000 calc(100% - var(--client-fade-width)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--client-fade-width), #000 calc(100% - var(--client-fade-width)), transparent 100%);
}
.client-carousel::before, .client-carousel::after { display: none; }
.client-carousel-track { animation: testimonials-loop var(--loop-duration, 48s) linear infinite; }
.client-carousel-group { flex: 0 0 auto; gap: 24px; padding-right: 24px; align-items: stretch; }
.client-profile { flex: 0 0 380px; width: 380px; height: 360px; min-height: 0; aspect-ratio: auto; padding: 20px; }
.client-profile-top { padding: 1px 40px 12px 0; }
.client-person { grid-template-columns: 64px minmax(0,1fr); gap: 16px; padding: 16px 0; }
.client-person img { width: 64px; height: 64px; }
.client-person h4 { font-size: 22px; line-height: 1.05; }
.client-person p { font-size: 10px; }
.client-profile blockquote { max-width: 100%; font-size: 15px; line-height: 1.45; }
.client-result { padding-top: 14px; }
.client-result strong { font-size: 23px; }
@keyframes testimonials-loop { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* Larger portrait and tighter spacing before the testimonials. */
.about { column-gap: 8%; row-gap: 64px; padding-bottom: 88px; }
.portrait-wrap { width: min(calc(100% - 44px), 420px); margin: 0 auto; }
.portrait-stamp { right: -25px; }
.services { margin-top: 0; padding-top: 48px; }
.services-heading { margin-bottom: 28px; }

/* The portrait player fills its column, keeping the other cards beside it. */
.project-grid { max-width: 1240px; margin-inline: auto; gap: 18px; grid-template-rows: repeat(2,minmax(260px,1fr)); }
.project-grid.has-open-video {
  --video-width: min(36%, 390px);
  max-width: 1080px; grid-template-rows: repeat(2,minmax(0,1fr));
}
.project-grid.has-open-video[data-video-side="left"] { grid-template-columns: var(--video-width) minmax(0,1fr); }
.project-grid.has-open-video[data-video-side="right"] { grid-template-columns: minmax(0,1fr) var(--video-width); }
.project-grid .project-card.is-video-open { width: 100%; justify-self: stretch; align-self: start; }
.project-grid.has-open-video .project-card:not(.is-video-open) .project-media { min-height: 0; }
.project-grid .project-card.is-video-open .project-media { aspect-ratio: 9 / 16; }
.project-card.is-video-open .project-info { padding: 16px 12px; }

/* Reserved area for the user's forthcoming results reference. */
.results-placeholder { border-top: 1px solid var(--line); padding: 80px 0 96px; scroll-margin-top: 110px; }
.results-placeholder .section-heading { margin-bottom: 38px; }
.results-preview { padding: 28px; border: 1px solid var(--ink); background: var(--paper); box-shadow: 6px 7px 0 var(--ink); }
.results-preview-top { display: flex; justify-content: space-between; gap: 18px; font: 10px/1.5 var(--mono); color: var(--muted); padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.results-metrics { display: grid; grid-template-columns: repeat(3,1fr); padding: 24px 0; }
.results-metrics > div { padding: 0 22px; border-right: 1px solid var(--line); }
.results-metrics > div:first-child { padding-left: 0; }
.results-metrics > div:last-child { border-right: 0; }
.results-metrics span { display: block; font: 11px/1.5 var(--mono); color: var(--muted); }
.results-metrics strong { display: block; margin-top: 10px; font-size: 30px; font-weight: 500; }
.results-chart { height: 160px; opacity: .5; }
.results-chart svg { width: 100%; height: 100%; overflow: visible; }
.chart-guide { fill: none; stroke: var(--muted); stroke-width: .5; opacity: .4; }
.chart-placeholder { fill: none; stroke: var(--orange); stroke-width: 2; stroke-dasharray: 7 7; }
.results-caption { margin: 22px 0 0; color: var(--muted); font: 10px/1.5 var(--mono); }
@media (max-width: 980px) {
  .about { column-gap: 0; }
  .about-intro { display: block; }
  .about-intro .eyebrow { margin-bottom: 36px; }
}
@media (min-width: 621px) and (max-width: 900px) {
  .project-grid.has-open-video { --video-width: 44%; }
  .project-info { padding: 14px 10px; }
  .project-info h3, .project-card.is-video-open .project-info h3 { font-size: 20px; }
}
@media (max-width: 620px) {
  .project-grid, .project-grid.has-open-video { gap: 16px; grid-template-rows: none; }
  .project-grid.has-open-video[data-video-side] { grid-template-columns: 1fr; }
  .project-grid .project-card.is-video-open { width: 100%; }
  .portrait-wrap { width: min(calc(100% - 40px),420px); margin: 0 auto; }
  .about { row-gap: 32px; padding-bottom: 60px; }
  .services { padding-top: 36px; }
  .results-placeholder { padding: 60px 0 72px; scroll-margin-top: 90px; }
  .results-preview { padding: 18px; }
  .results-metrics > div { padding: 0 10px; }
  .results-metrics span { font-size: 9px; }
  .results-chart { height: 125px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .client-carousel-track { animation: none !important; transform: none; }
  .marquee, .client-carousel { overflow-x: auto; }
  .marquee-track > [aria-hidden="true"], .client-carousel-track > [aria-hidden="true"] { display: none; }
}