/* Customer stories listing.
 *
 * v2 design language, 1240px shell. Extracted from a 765-line inline <style>
 * block in customer-stories-listing-dynamic.ejs so the page can be cached.
 *
 * Class names stay `.gcs-` and the scope stays #gyde-customer-stories, because
 * the category filter JS selects on them and is covered by 21 unit tests.
 */

#gyde-customer-stories {
    --gcs-ink: #242623;
    --gcs-olive: #203625;
    --gcs-deep: #132a1c;
    --gcs-lime: #e5fe96;
    --gcs-green: #657d00;
    --gcs-paper: #f4f4f0;
    --gcs-line: rgba(36, 38, 35, .16);
    --gcs-line-light: rgba(255, 255, 255, .17);
    --gcs-muted: #666a64;

    color: var(--gcs-ink);
    background: #fff;
    overflow: clip;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}
#gyde-customer-stories * { box-sizing: border-box; }
#gyde-customer-stories img { max-width: 100%; height: auto; }

.gcs-container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.gcs-section { padding: 96px 0; }

.gcs-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: var(--gcs-green); font-size: 11px; line-height: 1.2; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.gcs-kicker:before { width: 28px; height: 1px; background: currentColor; content: ""; }

.gcs-tag { display: inline-flex; align-items: center; padding: 6px 10px; border: 1px solid var(--gcs-line); color: #555952; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* Hero ---------------------------------------------------------------------- */

.gcs-hero { padding: 150px 0 84px; background: var(--gcs-olive); color: #fff; text-align: center; }
.gcs-hero h1 { max-width: 900px; margin: 0 auto; font-size: clamp(40px, 4.4vw, 62px); line-height: 1.02; font-weight: 500; letter-spacing: -.055em; }
.gcs-hero-accent { color: var(--gcs-lime); }
.gcs-hero-sub { max-width: 640px; margin: 26px auto 0; color: rgba(255,255,255,.7); font-size: 17px; line-height: 1.65; }
.gcs-hero-cta { display: flex; justify-content: center; margin-top: 36px; }
.gcs-email-btn { display: inline-flex; justify-content: center; align-items: center; gap: 26px; min-height: 54px; padding: 0 24px; border: 0; border-radius: 6px; background: var(--gcs-lime); color: var(--gcs-ink); font-family: inherit; font-size: 14px; font-weight: 700; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.gcs-email-btn:hover { transform: translateY(-2px); background: #f0ffbf; color: var(--gcs-ink); }

/* Social proof band ---------------------------------------------------------- */

.gcs-proofband { padding: 62px 0; border-bottom: 1px solid var(--gcs-line); background: #fff; text-align: center; }
.gcs-proofband h2 { margin: 0; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; font-weight: 500; letter-spacing: -.04em; }
.gcs-proofband > .gcs-container > p { max-width: 640px; margin: 16px auto 34px; color: var(--gcs-muted); font-size: 15px; line-height: 1.65; }
/* Mirrors .hv2-logo-grid on the homepage so both pages present the customer
   set identically. */
.gcs-logo-grid { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--gcs-line); border-left: 1px solid var(--gcs-line); }
.gcs-logo-grid > div { display: grid; place-items: center; height: 90px; padding: 16px; border-right: 1px solid var(--gcs-line); border-bottom: 1px solid var(--gcs-line); }
.gcs-logo-grid img { max-width: 105px; max-height: 48px; filter: grayscale(1); opacity: .68; transition: filter .2s, opacity .2s; }
.gcs-logo-grid > div:hover img { filter: none; opacity: 1; }

/* Story library --------------------------------------------------------------- */

.gcs-library { background: var(--gcs-paper); }
.gcs-library-head { max-width: 760px; margin-bottom: 34px; }
.gcs-library-head h2 { margin: 0; font-size: clamp(34px, 3.8vw, 52px); line-height: 1.04; font-weight: 500; letter-spacing: -.05em; }
.gcs-library-head p { margin: 20px 0 0; color: var(--gcs-muted); font-size: 16px; line-height: 1.65; }

.gcs-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.gcs-filter-btn { padding: 10px 15px; border: 1px solid var(--gcs-line); background: #fff; color: #555952; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.gcs-filter-btn:hover { border-color: var(--gcs-green); color: var(--gcs-green); }
.gcs-filter-btn.gcs-active { border-color: var(--gcs-ink); background: var(--gcs-ink); color: #fff; }
.gcs-count { margin: 0 0 26px; color: #6d716a; font-size: 12px; }
.gcs-count strong { color: var(--gcs-ink); }

.gcs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); border-top: 1px solid var(--gcs-line); border-left: 1px solid var(--gcs-line); }
.gcs-card { display: flex; flex-direction: column; min-height: 300px; padding: 26px; border-right: 1px solid var(--gcs-line); border-bottom: 1px solid var(--gcs-line); background: rgba(255,255,255,.5); transition: background .2s ease, transform .2s ease; }
.gcs-card:hover { z-index: 1; background: #fff; transform: translateY(-4px); }
.gcs-card-top { margin-bottom: 20px; }
.gcs-card-client { margin: 0 0 8px; color: var(--gcs-green); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.gcs-card h3 { margin: 0 0 14px; font-size: 21px; line-height: 1.22; font-weight: 600; letter-spacing: -.03em; }
.gcs-card h3 a { color: inherit; text-decoration: none; }
.gcs-card-desc { margin: 0 0 20px; color: var(--gcs-muted); font-size: 14px; line-height: 1.6; }
.gcs-card-link { margin-top: auto; color: var(--gcs-green); font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.gcs-arrow { display: inline-block; margin-left: 6px; transition: transform .2s ease; }
.gcs-card:hover .gcs-arrow { transform: translateX(3px); }

.gcs-card-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 0 0 22px; padding-top: 18px; border-top: 1px solid var(--gcs-line); }
.gcs-metric-num { font-size: 26px; line-height: 1; font-weight: 500; letter-spacing: -.045em; }
.gcs-metric-label { margin-top: 7px; color: #6d716a; font-size: 11px; line-height: 1.45; }

/* The featured card takes two columns and reads as the anchor of the grid. */
.gcs-card-featured { grid-column: span 2; background: var(--gcs-ink); color: #fff; }
.gcs-card-featured:hover { background: var(--gcs-ink); }
.gcs-card-featured .gcs-tag { border-color: rgba(229,254,150,.34); color: var(--gcs-lime); }
.gcs-card-featured .gcs-card-client { color: var(--gcs-lime); }
.gcs-card-featured h3 { font-size: 30px; letter-spacing: -.04em; }
.gcs-card-featured .gcs-card-desc { color: rgba(255,255,255,.62); }
.gcs-card-featured .gcs-card-link { color: var(--gcs-lime); }
.gcs-featured-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--gcs-line-light); }
.gcs-featured-stat .gcs-metric-num { color: var(--gcs-lime); font-size: 34px; }
.gcs-featured-stat .gcs-metric-label { color: rgba(255,255,255,.55); }

.gcs-empty { display: none; padding: 62px 24px; border: 1px solid var(--gcs-line); background: #fff; text-align: center; }
.gcs-is-empty .gcs-empty { display: block; }
.gcs-is-empty .gcs-grid { display: none; }
.gcs-empty h3 { margin: 0 0 10px; font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.gcs-empty p { margin: 0 0 22px; color: var(--gcs-muted); font-size: 14px; }

/* Testimonials ------------------------------------------------------------------ */

.gcs-voices-head { max-width: 760px; margin-bottom: 52px; }
.gcs-voices-head h2 { margin: 0; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.05; font-weight: 500; letter-spacing: -.05em; }
.gcs-voices-head p { margin: 18px 0 0; color: var(--gcs-muted); font-size: 16px; line-height: 1.65; }
.gcs-voices-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--gcs-line); border-left: 1px solid var(--gcs-line); }
.gcs-quote-card { display: flex; flex-direction: column; min-height: 260px; margin: 0; padding: 28px; border-right: 1px solid var(--gcs-line); border-bottom: 1px solid var(--gcs-line); }
.gcs-quote-mark { color: var(--gcs-green); font-size: 40px; line-height: 1; }
.gcs-quote-text { margin: 14px 0 24px; font-size: 16px; line-height: 1.65; }
.gcs-quote-person { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--gcs-line); }
.gcs-quote-avatar { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--gcs-paper); color: var(--gcs-green); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.gcs-quote-name { font-size: 14px; font-weight: 600; }
.gcs-quote-role { margin-top: 2px; color: #6d716a; font-size: 12px; line-height: 1.4; }

/* Proof band ---------------------------------------------------------------------- */

.gcs-proof { padding: 88px 0; background: var(--gcs-olive); color: #fff; }
.gcs-proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--gcs-line-light); border-left: 1px solid var(--gcs-line-light); }
.gcs-proof-grid > div { min-height: 168px; padding: 24px; border-right: 1px solid var(--gcs-line-light); border-bottom: 1px solid var(--gcs-line-light); }
.gcs-proof-num { font-size: 38px; line-height: 1; font-weight: 500; letter-spacing: -.055em; }
.gcs-proof-label { margin-top: 14px; color: rgba(255,255,255,.58); font-size: 13px; line-height: 1.55; }

/* CTA -------------------------------------------------------------------------------- */

.gcs-cta { padding: 108px 0; background: var(--gcs-deep); color: #fff; text-align: center; }
.gcs-cta h2 { max-width: 780px; margin: 0 auto; font-size: clamp(36px, 4.2vw, 56px); line-height: 1.02; font-weight: 500; letter-spacing: -.055em; }
.gcs-cta > .gcs-container > p { max-width: 580px; margin: 24px auto 0; color: rgba(255,255,255,.65); font-size: 16px; line-height: 1.65; }
.gcs-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; margin-top: 36px; }
.gcs-btn-primary,
.gcs-btn-white-outline { display: inline-flex; justify-content: center; align-items: center; min-height: 54px; padding: 0 24px; border-radius: 6px; font-size: 14px; font-weight: 700; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.gcs-btn-primary { border: 1px solid transparent; background: var(--gcs-lime); color: var(--gcs-ink); }
.gcs-btn-primary:hover { transform: translateY(-2px); background: #f0ffbf; color: var(--gcs-ink); }
.gcs-btn-white-outline { border: 1px solid rgba(255,255,255,.32); color: #fff; }
.gcs-btn-white-outline:hover { transform: translateY(-2px); background: rgba(255,255,255,.08); color: #fff; }

/* Responsive --------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .gcs-card-featured { grid-column: span 2; }
    .gcs-proof-grid { grid-template-columns: repeat(2, 1fr); }
    .gcs-logo-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 800px) {
    .gcs-grid { grid-template-columns: 1fr; }
    .gcs-container { padding-left: 22px; padding-right: 22px; }
    .gcs-hero { padding: 122px 0 66px; }
    .gcs-hero h1 { font-size: 38px; }
    .gcs-section { padding: 72px 0; }
    .gcs-proof { padding: 66px 0; }
    .gcs-cta { padding: 82px 0; }
    .gcs-library-head h2 { font-size: 32px; }
    .gcs-voices-grid { grid-template-columns: 1fr; }
    .gcs-card-featured h3 { font-size: 25px; }
    .gcs-logo-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
    .gcs-hero h1 { font-size: 32px; }
    .gcs-grid,
    .gcs-proof-grid { grid-template-columns: 1fr; }
    .gcs-card-featured { grid-column: auto; }
    .gcs-card-metrics,
    .gcs-featured-stats { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .gcs-cta-actions { flex-direction: column; align-items: stretch; }
    .gcs-proof-num { font-size: 32px; }
    .gcs-filters { gap: 6px; }
    .gcs-filter-btn { padding: 9px 12px; font-size: 11px; }
    .gcs-logo-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    #gyde-customer-stories * { scroll-behavior: auto !important; transition: none !important; }
}