/* BUF About Proof: focal image → red banner → customer-post carousel. Scoped to .buf-proof; theme tokens with literal fallbacks.
   Sits between "Our Mission" and "Our Values" on the About page at the same 1160 px width as the Values section. */
.buf-proof { max-width: 1160px; margin: 0 auto 88px; padding: 0 20px; box-sizing: border-box; }
.buf-proof[hidden] { display: none; }
.buf-proof figure { margin: 0; }
.buf-proof img { display: block; max-width: 100%; height: auto; }

/* 1. Focal image: centered, capped, its own artwork carries the design, so just a hairline frame. */
.buf-proof__hero { margin: 0 0 24px; border-radius: var(--radius-md, 14px); overflow: hidden; border: 1px solid var(--buf-line, #E6E6E1); background: #fff; }
.buf-proof__hero-img { width: 100%; }

/* 2. Banner: full section width, original proportions, nothing cropped. */
/* Full-bleed: --bufap-vw is the document's real client width (set by JS), so no horizontal scrollbar from 100vw.
   Natural 3:1 ratio at every width, so nothing on the artwork is ever cropped. */
.buf-proof .buf-proof__banner { width: var(--bufap-vw, 100vw); max-width: none; margin: 0 0 40px calc(50% - var(--bufap-vw, 100vw) / 2); border-radius: 0; overflow: hidden; }
.buf-proof .buf-proof__banner-img { width: 100%; height: auto; }

/* 3. Carousel. --n = posts per view, --gap = spacing; both change with the breakpoint. */
.buf-proof__carousel { --n: 3; --gap: 20px; --arrow: 44px; position: relative; padding: 0 calc(var(--arrow) + 16px); }
.buf-proof__viewport { overflow: hidden; }
.buf-proof__track { display: flex; gap: var(--gap); margin: 0; padding: 0; list-style: none; will-change: transform; transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.buf-proof__track.is-dragging { transition: none; }
.buf-proof__slide { flex: 0 0 calc((100% - var(--gap) * (var(--n) - 1)) / var(--n)); margin: 0; border-radius: var(--radius-md, 14px); overflow: hidden; border: 1px solid var(--buf-line, #E6E6E1); background: #fff; }
.buf-proof__slide img { width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }

.buf-proof__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: var(--arrow); height: var(--arrow); border-radius: 50%; border: 1px solid var(--buf-line, #E6E6E1); background: #fff; color: var(--buf-ink, #14140F); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; box-shadow: 0 2px 10px rgba(20,20,15,.06); transition: background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease; }
.buf-proof__arrow--prev { left: 0; }
.buf-proof__arrow--next { right: 0; }
.buf-proof__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.buf-proof__arrow:hover:not([disabled]) { background: var(--buf-red, #E30613); border-color: var(--buf-red, #E30613); color: #fff; }
.buf-proof__arrow:focus-visible { outline: 2px solid var(--buf-red, #E30613); outline-offset: 2px; }
.buf-proof__arrow[disabled] { opacity: .3; cursor: default; }

.buf-proof__dots { display: flex; justify-content: center; gap: 8px; margin: 22px 0 0; }
.buf-proof__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: var(--buf-line, #E6E6E1); cursor: pointer; transition: background .18s ease, transform .18s ease; }
.buf-proof__dot.is-active { background: var(--buf-red, #E30613); transform: scale(1.2); }
.buf-proof__dot:focus-visible { outline: 2px solid var(--buf-red, #E30613); outline-offset: 3px; }

/* Quote cards: equal height across the row, quote in the body face, changed name in muted ink. */
.buf-proof__slide--quote { display: flex; background: var(--buf-cream, #F6F5EE); border: 0; }
.buf-proof__quote { position: relative; display: flex; flex-direction: column; margin: 0; padding: 30px 28px 26px; width: 100%; box-sizing: border-box; }
.buf-proof__mark { position: absolute; top: 10px; left: 22px; font-family: var(--ff-display, Georgia, serif); font-size: 64px; line-height: 1; color: var(--buf-red, #E30613); opacity: .9; }
.buf-proof__quote p { position: relative; margin: 22px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--buf-ink, #14140F); flex: 1; }
.buf-proof__who { margin-top: 18px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--buf-mute, #6B6B62); }
.buf-proof__note { margin: 14px 0 0; text-align: center; font-size: 12px; color: var(--buf-mute, #6B6B62); }

@media (max-width: 1023px) {
  .buf-proof { margin-bottom: 72px; }
  .buf-proof__carousel { --n: 2; --gap: 16px; }
}
@media (max-width: 767px) {
  .buf-proof { padding: 0 16px; margin-bottom: 56px; }
  .buf-proof__hero { margin-bottom: 18px; border-radius: 10px; }
  .buf-proof .buf-proof__banner { margin-bottom: 24px; }
  /* One post per view; arrows move down beside the dots so they never sit on the image and stay 44 px touch targets. */
  .buf-proof__carousel { --n: 1; --gap: 12px; padding: 0; }
  .buf-proof__arrow { position: static; transform: none; }
  .buf-proof__dots { margin-top: 16px; align-items: center; gap: 10px; }
  .buf-proof__quote { padding: 26px 22px 22px; }
  .buf-proof__quote p { font-size: 16px; }
  .buf-proof__dots .buf-proof__arrow { margin: 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .buf-proof__track, .buf-proof__arrow, .buf-proof__dot { transition: none; }
}

/* ===== About hero: eyebrow treatment, lede, 2x2 cinematic cards (page-about template only) ===== */
.page-template-page-about .buf-about-hero .buf-eyebrow { display: inline-flex; align-items: center; gap: 18px; font-size: 12px; font-weight: 500; letter-spacing: .32em; color: var(--buf-ink-2, #3C3C36); margin: 0 0 22px; }
.page-template-page-about .buf-about-hero .buf-eyebrow::before,
.page-template-page-about .buf-about-hero .buf-eyebrow::after { content: ""; width: 64px; height: 1px; background: var(--buf-red, #E30613); flex: none; }
.page-template-page-about .buf-about-hero.has-buf-extras .buf-display { margin-bottom: 18px; }
.page-template-page-about .buf-about-hero.has-buf-extras .buf-about-context { display: none !important; }
.buf-about-extras[hidden] { display: none; }
.buf-about-lede { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.buf-about-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; max-width: 1160px; margin: 0 auto; }
.buf-about-card { margin: 0; border-radius: var(--radius-md, 14px); overflow: hidden; background: #14140F; aspect-ratio: 2 / 1; }
.buf-about-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) {
  .page-template-page-about .buf-about-hero .buf-eyebrow { letter-spacing: .24em; gap: 12px; }
  .page-template-page-about .buf-about-hero .buf-eyebrow::before, .page-template-page-about .buf-about-hero .buf-eyebrow::after { width: 32px; }
  .buf-about-lede { margin-bottom: 28px; }
  .buf-about-cards { grid-template-columns: 1fr; gap: 14px; }
  .buf-about-card { border-radius: 10px; }
}

/* ===== Short red band (replaces the tall banner image): full-bleed, ~40% of the old height, type scaled to the "Our Mission" h2 ===== */
.buf-proof .buf-proof__band { width: var(--bufap-vw, 100vw); margin: 0 0 40px calc(50% - var(--bufap-vw, 100vw) / 2); background: #C8102E radial-gradient(ellipse 60% 120% at 50% 50%, rgba(255,255,255,.10), rgba(255,255,255,0) 70%); color: #fff; text-align: center; }
.buf-proof__band-in { max-width: 1160px; margin: 0 auto; padding: 30px 20px 32px; }
.buf-proof__stars { display: flex; justify-content: center; gap: 5px; margin: 0 0 10px; }
.buf-proof__stars svg { width: 15px; height: 15px; fill: #fff; }
.buf-proof__band-title { font-family: var(--ff-display, Inter, sans-serif); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase; font-weight: 400; color: #fff; margin: 0 0 10px; }
.buf-proof__band-title strong { font-weight: 800; }
.buf-proof__band-sub { font-family: var(--ff-body, Inter, sans-serif); font-size: 12px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.92); margin: 0; }
@media (max-width: 767px) {
  .buf-proof .buf-proof__band { margin-bottom: 24px; }
  .buf-proof__band-in { padding: 24px 16px 26px; }
  .buf-proof__band-title { font-size: 1.7rem; }
  .buf-proof__band-sub { font-size: 10px; letter-spacing: .2em; }
}

/* ===== Mission graphic replaces the Our Mission text block (text kept in DOM, hidden) ===== */
.page-template-page-about .buf-about-mission.has-buf-mission-img { display: none !important; }
.buf-about-mission-img[hidden] { display: none; }
.buf-about-mission-img { max-width: 1160px; margin: 0 auto 72px; padding: 0 20px; box-sizing: border-box; }
.buf-about-mission-img .buf-about-mission-img__img { display: block; width: 100%; height: auto; border-radius: var(--radius-md, 14px); border: 1px solid var(--buf-line, #E6E6E1); }
@media (max-width: 767px) { .buf-about-mission-img { padding: 0 16px; margin-bottom: 48px; } .buf-about-mission-img .buf-about-mission-img__img { border-radius: 10px; } }