.clients-hero { position: relative; overflow: hidden; min-height: 680px; display: flex; align-items: center; background: var(--ink); color: var(--cream); }
.clients-hero::after { content: ""; position: absolute; width: 62vw; height: 62vw; max-width: 900px; max-height: 900px; right: -22vw; top: -22vw; border: 1px solid rgba(246,244,237,.15); border-radius: 50%; box-shadow: 0 0 0 90px rgba(246,244,237,.025), 0 0 0 180px rgba(246,244,237,.018); }
.clients-hero-inner { position: relative; z-index: 1; width: 100%; padding-top: 112px; padding-bottom: 116px; }
.clients-hero .eyebrow { color: var(--accent); }
.clients-hero h1 { max-width: 980px; margin: 30px 0 0; font-size: clamp(62px, 10vw, 154px); line-height: .86; letter-spacing: -.06em; }
.clients-hero-lede { max-width: 590px; margin: 38px 0 0; color: rgba(246,244,237,.74); font-size: clamp(17px, 1.65vw, 21px); line-height: 1.55; }
.clients-hero-jump { display: inline-flex; gap: 12px; align-items: center; margin-top: 42px; padding-bottom: 8px; border-bottom: 1px solid rgba(246,244,237,.42); font: 700 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.clients-hero-jump:hover { color: var(--accent); border-color: var(--accent); }
.clients-hero-mark { position: absolute; z-index: 1; right: 10%; bottom: -12%; color: var(--accent); font: 900 clamp(340px, 48vw, 720px)/.65 Georgia, serif; opacity: .88; pointer-events: none; }
.clients-video-section { padding: 112px 0 124px; background: var(--cream-2); }
.clients-video-heading, .clients-stories-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 52px; }
.clients-video-heading h2, .clients-stories-head h2 { margin: 14px 0 0; font-size: clamp(46px, 6vw, 84px); }
.clients-video-heading > p, .clients-stories-head > p { max-width: 360px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.clients-video-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(230px, .45fr); gap: 24px; align-items: stretch; }
.clients-video-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; min-height: 420px; background: var(--ink); border: 1px solid var(--line); box-shadow: 0 28px 55px -40px rgba(11,11,10,.65); }
.clients-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.clients-video-aside { display: flex; flex-direction: column; justify-content: space-between; padding: 28px; background: var(--ink); color: var(--cream); }
.clients-video-index { color: var(--accent); font: 700 11px/1 var(--mono); letter-spacing: .16em; }
.clients-video-aside p { margin: 28px 0; font: 500 clamp(20px, 2.1vw, 29px)/1.25 var(--display); letter-spacing: -.025em; }
.clients-video-aside .eyebrow { color: var(--muted-2); }
.clients-stories { padding-top: 126px; padding-bottom: 138px; }
.clients-stories-head { margin-bottom: 70px; }
.clients-quotes { column-count: 3; column-gap: 24px; }
.client-quote { break-inside: avoid; margin: 0 0 24px; padding: 30px 28px 28px; border-top: 1px solid var(--ink); background: transparent; }
.client-quote-1, .client-quote-3 { background: var(--cream-2); border-top-color: transparent; }
.client-quote-2 { background: var(--accent); color: var(--accent-ink); border-top-color: transparent; }
.client-quote blockquote { margin: 0; font: 500 clamp(18px, 1.65vw, 23px)/1.42 var(--display); letter-spacing: -.018em; }
.client-quote-2 blockquote { color: #fff; }
.client-quote figcaption { display: flex; align-items: center; gap: 10px; margin-top: 26px; color: var(--accent); font: 700 10px/1.4 var(--mono); letter-spacing: .12em; }
.client-quote-2 figcaption { color: #fff; }
.client-quote figcaption span { width: 22px; height: 1px; background: currentColor; flex: 0 0 auto; }
.clients-cta { padding: 118px 0 132px; background: var(--ink); color: var(--cream); overflow: hidden; }
.clients-cta-inner { position: relative; }
.clients-cta .sec-num { color: var(--accent); }
.clients-cta h2 { position: relative; z-index: 1; margin: 16px 0 42px; font-size: clamp(54px, 8vw, 118px); line-height: .9; }
.clients-cta .btn { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .clients-video-layout { grid-template-columns: 1fr; }
  .clients-video-frame { min-height: 0; }
  .clients-video-aside { min-height: 230px; }
  .clients-quotes { column-count: 2; }
}
@media (max-width: 640px) {
  .wrap { padding-left: 24px; padding-right: 24px; }
  .clients-hero { min-height: 600px; }
  .clients-hero-inner { padding-top: 84px; padding-bottom: 90px; }
  .clients-hero h1 { font-size: clamp(54px, 15vw, 86px); }
  .clients-hero-mark { right: -8%; bottom: -4%; font-size: 420px; }
  .clients-video-section, .clients-stories { padding: 76px 0 84px; }
  .clients-video-heading, .clients-stories-head { display: block; margin-bottom: 38px; }
  .clients-video-heading > p, .clients-stories-head > p { margin-top: 22px; }
  .clients-video-frame { aspect-ratio: 9 / 16; }
  .clients-quotes { column-count: 1; }
  .client-quote { padding: 28px 22px 25px; }
  .clients-cta { padding: 82px 0 94px; }
}