/* Home's customer stories, like the owner's image of 2026-11-02: head with the button on the right, three cards with a curved photo on the
   right of each, the one being read dark, dots in the middle and arrows on the right. The markup is src/blocks/index.after.html, the row js/home-proof.js. */
.cs-proof { padding-block: var(--sec); border-top: 1px solid var(--line); }
.cs-proof__head { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 64px); margin-bottom: clamp(28px, 3vw, 48px); }
.cs-proof__k { margin: 0 0 14px; font: 700 var(--t-kicker)/1.3 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); }
.cs-proof__h { margin: 0 0 14px; font-family: var(--font-head); font-weight: 700; font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.04em; color: var(--ink); }
.cs-proof__h span { color: var(--gold-mark); }
.cs-proof__lead { max-width: 60ch; margin: 0; font-size: var(--t-lead); line-height: 1.6; color: var(--ink-2); }
.cs-proof__all { flex: none; }

/* the row: every card in view on a desktop; narrower, it scrolls one card at a time */
.proof-row {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(12px, 1.1vw, 20px);
  margin: 0; padding: 0; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
}
.js .proof-row { scrollbar-width: none; }
.js .proof-row::-webkit-scrollbar { display: none; }

.proof-card {
  position: relative; display: flex; overflow: hidden; border-radius: var(--r-lg); background: var(--warm); color: var(--ink); scroll-snap-align: start;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
/* the words keep to the card's left two thirds, so they never run under the photo */
.proof-card figure { position: relative; z-index: 1; display: flex; flex: 0 0 67%; flex-direction: column; min-width: 0; margin: 0; padding: clamp(22px, 2vw, 32px) 10px clamp(22px, 2vw, 32px) clamp(20px, 2vw, 32px); }
.proof-card__mark { flex: none; width: clamp(34px, 3vw, 48px); height: auto; margin-bottom: clamp(14px, 1.4vw, 22px); fill: var(--gold-deep); }
.proof-card blockquote { margin: 0 0 clamp(18px, 1.8vw, 28px); font-size: var(--t-lead); line-height: 1.42; letter-spacing: -0.005em; color: inherit; }
.proof-card strong { font-weight: 600; color: var(--gold-ink); }
/* the photo's curve draws back near the card's foot, so the caption may reach a little further than the quote */
.proof-card figcaption { display: flex; align-items: center; gap: 12px; margin: auto -14px 0 0; padding-top: clamp(16px, 1.5vw, 22px); border-top: 1px solid var(--line-2); }
/* the logo files carry wide white margins: the tile shows each logo large by drawing the file past its edges, the logo itself untouched */
.proof-card__logo { position: relative; display: block; flex: none; overflow: hidden; width: clamp(92px, 7vw, 132px); aspect-ratio: 2.25; background: var(--bg); border-radius: var(--r-sm); }
.proof-card__logo img { position: absolute; left: 50%; top: 50%; width: 108%; max-width: none; height: auto; transform: translate(-50%, -50%); }
.proof-card__who { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: var(--t-small); font-weight: 600; line-height: 1.3; }
.proof-card__name { color: inherit; text-decoration: none; }
.proof-card__role { color: var(--gold-ink); text-decoration: none; }
a.proof-card__name:hover, .proof-card__role:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the curved photo: an ellipse cut, so it stays a curve at every card size */
.proof-card__art { position: absolute; inset: 0 0 0 auto; width: 33%; clip-path: ellipse(100% 90% at 100% 55%); }
.proof-card__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.proof-card__art--villa img { object-position: 62% 26%; }
.proof-card__art--dubai img { object-position: 50% 40%; }
.proof-card__art--chart img { object-position: 82% 50%; }

/* the card being read */
.proof-card.is-current { background: var(--dark); color: var(--on-dark); }
.proof-card.is-current strong, .proof-card.is-current .proof-card__role { color: var(--gold); }
.proof-card.is-current .proof-card__mark { fill: var(--gold); }
.proof-card.is-current figcaption { border-top-color: var(--dark-line); }
.proof-card.is-current :focus-visible { outline-color: var(--gold); }

/* dots in the middle, arrows on the right */
.proof-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: clamp(20px, 2vw, 30px); }
html:not(.js) .proof-nav { display: none; }
.proof-nav__dots { grid-column: 2; display: flex; }
.proof-nav__dot { display: grid; place-items: center; width: 28px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.proof-nav__dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--line-2); transition: background-color 0.25s var(--ease); }
.proof-nav__dot:hover::before { background: var(--line-3); }
.proof-nav__dot[aria-current="true"]::before { background: var(--gold-deep); }
.proof-nav__arrows { grid-column: 3; justify-self: end; display: flex; gap: 12px; }
.proof-nav__arrow { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1.5px solid var(--gold-deep); border-radius: 50%; background: var(--bg); color: var(--ink); cursor: pointer; transition: background-color 0.25s var(--ease); }
.proof-nav__arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.proof-nav__arrow:hover:not(:disabled) { background: var(--gold); }
.proof-nav__arrow:disabled { border-color: var(--line-3); color: var(--ink-3); cursor: default; }

@media (min-width: 1600px) {
  .proof-card blockquote { font-size: var(--t-h6); }
}
@media (max-width: 1279px) {
  .proof-row { grid-auto-columns: 62%; }
}
@media (max-width: 767px) {
  .cs-proof__head { flex-direction: column; align-items: flex-start; }
  .proof-row { grid-auto-columns: 88%; }
  .proof-card figure { flex-basis: 72%; padding-right: 6px; }
  .proof-card blockquote { font-size: var(--t-body); }
  .proof-card figcaption { flex-direction: column; align-items: flex-start; gap: 10px; }
  .proof-card__art { width: 28%; }
  .proof-nav { grid-template-columns: auto 1fr; }
  .proof-nav__dots { grid-column: 1; }
  .proof-nav__arrows { grid-column: 2; }
  .proof-nav__arrow { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .proof-card, .proof-nav__dot::before, .proof-nav__arrow { transition: none; }
}