/* Customer story pages (/customers/*). Page-only styles layered on horse-business-pages.css,
   which supplies the shared hero, section heading, icon chip, offer block and card styles. */
:root {
  --cs-ink: #242424;
  --cs-body: #4d4d4d;
  --cs-muted: #6b6b6b;
  --cs-brown: #cd7b36;
  --cs-brown-ink: #9a5a22;
  --cs-line: rgba(0, 0, 0, 0.1);
  --cs-tile: #f1f1f1;
  --cs-display: Signika, "Trebuchet MS", sans-serif;
  --cs-text: "Plus Jakarta Sans", system-ui, sans-serif;
}

.cs-eyebrow { font: 700 12.16px/1.2 var(--cs-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cs-brown); margin: 0; }
.cs-who { font: 500 14.5px/1.45 var(--cs-text); color: var(--cs-muted); margin: 0; }
.cs-who strong { color: var(--cs-ink); font-weight: 700; }

.cs-page-sec { padding: 92px 0; }
.cs-page-sec.is-white { background: #fff; border-block: 1px solid var(--cs-line); }
.cs-page-sec .biz-section-heading { margin-bottom: 40px; }
.cs-lead { font: 400 18px/1.65 var(--cs-text); color: var(--cs-body); margin: 0; max-width: 62ch; }
.cs-lead + .cs-lead { margin-top: 14px; }

.cs-hero-photo { margin: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12); align-self: center; }
.cs-hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3.4; object-fit: cover; object-position: 50% 40%; }
.biz-hero.cs-hero h1 { font-size: clamp(42px, 5vw, 62px); }

.cs-glance { margin: 44px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: #fff; border: 1px solid var(--cs-line); border-radius: 14px; }
.cs-glance div { padding: 18px 20px; display: grid; gap: 4px; align-content: start; border-left: 1px solid var(--cs-line); }
.cs-glance div:first-child { border-left: 0; }
.cs-glance dt { font: 700 11.5px/1.2 var(--cs-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-muted); }
.cs-glance dd { margin: 0; font: 600 15px/1.35 var(--cs-text); color: var(--cs-ink); }

.cs-results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cs-result { background: #fff; border: 1px solid var(--cs-line); border-radius: 14px; padding: 26px 24px; display: grid; gap: 8px; align-content: start; }
.cs-result b { font: 600 52px/0.95 var(--cs-display); letter-spacing: -0.04em; color: var(--cs-ink); }
.cs-result b small { font-size: 26px; color: var(--cs-brown); letter-spacing: -0.02em; margin-left: 2px; }
.cs-result span { font: 500 15px/1.45 var(--cs-text); color: var(--cs-body); }

.cs-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.cs-split.is-flip > :first-child { order: 2; }
.cs-split-photo { margin: 0; }
.cs-split-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 4.4; object-fit: cover; object-position: 50% 30%; border-radius: 18px; }
.cs-split-photo figcaption { font: 500 13px/1.4 var(--cs-text); color: var(--cs-muted); padding: 10px 2px 0; }
.cs-split h2 { margin-bottom: 22px; }

.cs-quote-card { margin: 28px 0 0; padding: 22px 24px; background: #fff; border: 1px solid var(--cs-line); border-left: 4px solid var(--cs-brown); border-radius: 12px; display: grid; gap: 10px; }
.cs-quote-card p { font: 600 21px/1.3 var(--cs-display); letter-spacing: -0.015em; color: var(--cs-ink); margin: 0; }
.cs-quote-card cite { font: 500 13px/1.3 var(--cs-text); color: var(--cs-muted); font-style: normal; }

.cs-reasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.cs-reason { background: #fff; border: 1px solid var(--cs-line); border-radius: 12px; padding: 22px; display: grid; gap: 10px; align-content: start; }
.cs-reason .biz-card-icon { margin: 0; }
.cs-reason h3 { font: 600 20px/1.2 var(--cs-display); letter-spacing: -0.01em; margin: 0; color: var(--cs-ink); }
.cs-reason p { font: 400 15px/1.55 var(--cs-text); color: var(--cs-body); margin: 0; }
.cs-found { margin-top: 18px; display: flex; gap: 14px; align-items: center; background: var(--cs-tile); border-radius: 12px; padding: 16px 20px; font: 500 15.5px/1.5 var(--cs-text); color: var(--cs-ink); }
.cs-found img { width: 22px; height: 22px; flex: none; }

.cs-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; }
.cs-timeline::before { content: ""; position: absolute; left: 8px; right: 8px; top: 9px; height: 2px; background: #e4e4e4; }
.cs-timeline li { position: relative; padding: 34px 18px 0 0; display: grid; gap: 6px; align-content: start; }
.cs-timeline li::before { content: ""; position: absolute; top: 2px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--cs-brown); box-sizing: border-box; }
.cs-timeline li.is-key::before { background: var(--cs-brown); }
.cs-timeline .d { font: 700 12px/1.2 var(--cs-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-brown); }
.cs-timeline h3 { font: 600 19px/1.15 var(--cs-display); margin: 0; color: var(--cs-ink); letter-spacing: -0.01em; }
.cs-timeline p { font: 400 14px/1.5 var(--cs-text); color: var(--cs-body); margin: 0; overflow-wrap: anywhere; }

.cs-ba { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 20px; align-items: stretch; }
.cs-ba-before, .cs-ba-after { border-radius: 16px; padding: 26px; display: grid; gap: 14px; align-content: start; }
.cs-ba-before { background: var(--cs-tile); }
.cs-ba-after { background: #fff; border: 1px solid var(--cs-line); }
.cs-ba h3 { font: 600 22px/1.15 var(--cs-display); margin: 0; color: var(--cs-ink); overflow-wrap: anywhere; }
.cs-ba ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; font: 400 15px/1.5 var(--cs-text); color: var(--cs-body); }
.cs-ba-shots { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; align-items: end; }
.cs-ba-shots img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--cs-line); }
.cs-ba-shots .is-phone { border-radius: 18px; border: 5px solid #1d1d1d; }
.cs-ba-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.cs-ba-stats div { background: #fff; border: 1px solid var(--cs-line); border-radius: 12px; padding: 16px 18px; display: grid; gap: 4px; }
.cs-ba-stats b { font: 600 34px/1 var(--cs-display); letter-spacing: -0.03em; color: var(--cs-brown); }
.cs-ba-stats span { font: 500 13.5px/1.4 var(--cs-text); color: var(--cs-muted); }

.cs-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; counter-reset: step; }
.cs-steps li { background: #fff; border: 1px solid var(--cs-line); border-radius: 12px; padding: 20px; display: grid; gap: 12px; align-content: start; counter-increment: step; }
.cs-steps li .biz-card-icon { margin: 0; }
.cs-steps li p { font: 500 15px/1.5 var(--cs-text); color: var(--cs-ink); margin: 0; }
.cs-steps li p::before { content: counter(step) ". "; color: var(--cs-brown); font-weight: 700; }

/* Before and now, in her own answers. */
.cs-time { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.cs-time-table { background: #fff; border: 1px solid var(--cs-line); border-radius: 14px; overflow: hidden; }
.cs-time-table table { width: 100%; border-collapse: collapse; font: 500 15px/1.45 var(--cs-text); color: var(--cs-ink); }
.cs-time-table th { text-align: left; font: 700 11.5px/1.2 var(--cs-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-muted); padding: 16px 20px; border-bottom: 1px solid var(--cs-line); }
.cs-time-table td { padding: 16px 20px; border-bottom: 1px solid var(--cs-line); vertical-align: top; }
.cs-time-table tr:last-child td { border-bottom: 0; }
.cs-time-table td:first-child { font-weight: 700; width: 26%; }
.cs-time-table td.is-before { color: var(--cs-muted); }
.cs-time-table td.is-now { color: var(--cs-brown-ink); font-weight: 700; }
.cs-time-value { background: #242424; color: #fff; border-radius: 14px; padding: 30px; display: grid; gap: 12px; }
.cs-time-value b { font: 600 60px/0.95 var(--cs-display); letter-spacing: -0.04em; color: #fff; }
.cs-time-value b span { color: var(--cs-brown); font-size: 0.55em; letter-spacing: -0.02em; }
.cs-time-value p { font: 400 15.5px/1.55 var(--cs-text); color: rgba(255, 255, 255, 0.82); margin: 0; }
.cs-time-value .cs-plan { border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 14px; font-weight: 600; color: #fff; }

.cs-voices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cs-voices .cs-quote-card { margin: 0; align-content: start; }
.cs-voices .cs-eyebrow { margin-bottom: 2px; }

.cs-pull { text-align: center; display: grid; gap: 22px; justify-items: center; }
.cs-pull blockquote { margin: 0; font: 600 clamp(30px, 3.6vw, 46px)/1.12 var(--cs-display); letter-spacing: -0.03em; color: var(--cs-ink); max-width: 24ch; text-wrap: balance; }
.cs-pull blockquote span { color: var(--cs-brown); }
.cs-pull-who { display: flex; align-items: center; justify-content: center; gap: 14px; text-align: left; }
.cs-pull-who img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; flex: none; }

@media (max-width: 1100px) {
  .cs-reasons { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .cs-glance { grid-template-columns: 1fr 1fr; }
  .cs-glance div { border-left: 0; border-top: 1px solid var(--cs-line); }
  .cs-glance div:nth-child(-n + 2) { border-top: 0; }
  .cs-results { grid-template-columns: 1fr 1fr; }
  .cs-split, .cs-time, .cs-ba, .cs-voices { grid-template-columns: 1fr; gap: 28px; }
  .cs-split.is-flip > :first-child { order: 0; }
  .cs-timeline { grid-template-columns: 1fr; gap: 18px; }
  .cs-timeline::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .cs-timeline li { padding: 0 0 0 32px; }
  .cs-steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cs-page-sec { padding: 60px 0; }
  .cs-glance { grid-template-columns: 1fr; }
  .cs-glance div, .cs-glance div:nth-child(-n + 2) { border-top: 1px solid var(--cs-line); }
  .cs-glance div:first-child { border-top: 0; }
  .cs-results { grid-template-columns: 1fr; }
  .cs-result b { font-size: 40px; }
  .cs-reasons { grid-template-columns: 1fr; }
  .cs-ba-before, .cs-ba-after { padding: 20px; }
  .cs-ba-shots { grid-template-columns: minmax(0, 1fr) 96px; }
  .cs-ba-stats { grid-template-columns: 1fr; }
  .cs-time-table table, .cs-time-table tbody, .cs-time-table tr, .cs-time-table td { display: block; width: auto; }
  .cs-time-table thead { display: none; }
  .cs-time-table tr { padding: 14px 16px; border-bottom: 1px solid var(--cs-line); }
  .cs-time-table tr:last-child { border-bottom: 0; }
  .cs-time-table td, .cs-time-table td:first-child { padding: 2px 0; border: 0; width: auto; }
  .cs-time-table td.is-before::before { content: "Before: "; font-weight: 700; }
  .cs-time-table td.is-now::before { content: "Now: "; }
  .cs-time-value b { font-size: 46px; }
}

/* /customers hub: one wide card per story (photo left, story right). */
.cs-hub-hero { padding-bottom: 72px; }
.cs-hub-hero .biz-hero-description { max-width: 62ch; }
.cs-hub-list-title { font: 700 12.16px/1.2 var(--cs-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cs-brown); margin: 0 0 20px; }
.cs-hub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.cs-hub-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: #fff; border: 1px solid var(--cs-line); border-radius: 18px; overflow: hidden; color: inherit; text-decoration: none; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06); transition: box-shadow 160ms ease, transform 160ms ease; }
.cs-hub-card:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1); transform: translateY(-2px); }
.cs-hub-card:focus-visible { outline: 3px solid var(--cs-brown); outline-offset: 3px; }
.cs-hub-card img { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: cover; object-position: 50% 40%; }
.cs-hub-card-body { padding: 36px 40px; display: grid; gap: 14px; align-content: center; }
.cs-hub-card-kicker { font: 700 12px/1.3 var(--cs-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-brown); }
.cs-hub-card strong { font: 600 34px/1.05 var(--cs-display); letter-spacing: -0.02em; color: var(--cs-ink); }
.cs-hub-card-text { font: 400 17px/1.6 var(--cs-text); color: var(--cs-body); }
.cs-hub-card-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-hub-card-stats > span { font: 500 14px/1.3 var(--cs-text); color: var(--cs-body); background: var(--cs-tile); border-radius: 999px; padding: 8px 14px; }
.cs-hub-card-stats b { color: var(--cs-ink); font-weight: 700; }
.cs-hub-card-link { font: 700 15px/1.3 var(--cs-text); color: var(--cs-brown-ink); }
@media (max-width: 900px) {
  .cs-hub-card { grid-template-columns: 1fr; }
  .cs-hub-card img { min-height: 0; height: auto; aspect-ratio: 3 / 2; }
  .cs-hub-card-body { padding: 26px 22px; }
  .cs-hub-card strong { font-size: 28px; }
}