/* ==========================================================================
   CLIENT STORIES — page-specific editorial design system
   --------------------------------------------------------------------------
   Powers ONLY client-stories.html. Built on the existing Greenlink design
   tokens, typography and animation language from assets/site.css.
   No shared styles are changed.

   Component inventory (reusable as content grows):
     .cs-tblock        industry testimonial — alternating client panel / quote
     .cs-client        client panel — logo, company, industry (restrained bg)
     .cs-tcopy         testimonial copy — large quotation typography
     .cs-logo-strip    neutral client/technology-network marks
     .cs-industries    industries we serve — restrained grid
     .cs-media-*       media — one feature + supporting editorial layout
   ========================================================================== */

.cs-anchor{scroll-margin-top:110px}

/* ---- Client testimonials -------------------------------------------------- */
.cs-tblock{display:grid;grid-template-columns:1fr 1fr;gap:clamp(44px,6vw,104px);align-items:center;padding:clamp(60px,8vw,120px) 0;border-bottom:1px solid var(--line)}
.cs-tblock--flip .cs-client{order:2}

/* Client panel — logo forward, restrained supporting environment */
.cs-client{position:relative;overflow:hidden;min-height:560px;display:grid;place-items:center;background:var(--forest)}
.cs-client-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;filter:saturate(.65);transition:transform 1s var(--ease)}
.cs-tblock:hover .cs-client-bg{transform:scale(1.02)}
.cs-client-plate{position:relative;z-index:1;background:white;padding:clamp(36px,4vw,56px);width:min(80%,380px);text-align:center;box-shadow:0 30px 60px -24px rgba(7,17,14,.45)}
.cs-client-plate:before{content:'';display:block;width:40px;height:2px;background:var(--lime);margin:0 auto 26px}
.cs-client-logo{height:110px;display:grid;place-items:center;margin-bottom:22px}
.cs-client-logo img{max-height:104px;max-width:100%;width:auto;object-fit:contain}
.cs-client-name{font-family:'Manrope',sans-serif;font-size:23px;letter-spacing:-.03em;font-weight:500;margin:0 0 8px}
.cs-client-industry{font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;color:#71806b;margin:0}

/* Testimonial copy */
.cs-tcopy{display:flex;flex-direction:column;justify-content:center}
.cs-tcopy .kicker{margin-bottom:24px}
.cs-quote-mark{font-family:'Manrope',sans-serif;font-size:clamp(64px,6vw,110px);line-height:.5;height:.55em;color:var(--lime);display:block;user-select:none}
.cs-quote{font-family:'Manrope',sans-serif;font-size:clamp(24px,2.6vw,40px);line-height:1.16;letter-spacing:-.03em;font-weight:500;margin:0 0 28px}
.cs-tags{display:flex;flex-wrap:wrap;gap:8px}
.cs-tag{border:1px solid var(--line);padding:8px 11px;font-size:9.5px;text-transform:uppercase;letter-spacing:.13em;color:#53604e}

/* ---- Client / technology-network logo strip (neutral, no attribution) ----- */
.cs-logo-strip{border-top:1px solid var(--line);padding-top:18px;margin-top:clamp(48px,6vw,80px)}
.cs-logo-strip small{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;color:#71806b;margin-bottom:18px}
.cs-logos{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line)}
.cs-logo{background:var(--paper);display:grid;place-items:center;padding:22px;min-height:92px;transition:background .3s}
.cs-logo img{width:100%;height:100%;object-fit:contain;filter:grayscale(1);opacity:.7;transition:.4s var(--ease)}
.cs-logo:hover{background:white}
.cs-logo:hover img{filter:grayscale(0);opacity:1}

/* ---- Industries we serve ---------------------------------------------------- */
.cs-industries{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:64px}
.cs-industry{background:var(--paper);padding:36px 32px;min-height:188px;display:flex;flex-direction:column;justify-content:space-between;transition:background .3s}
.cs-industry:hover{background:white}
.cs-industry .num{font-size:10px;color:#7c8976;letter-spacing:.14em}
.cs-industry h3{font-family:'Manrope',sans-serif;font-size:22px;letter-spacing:-.03em;font-weight:500;margin:18px 0 8px}
.cs-industry p{font-size:13px;line-height:1.55;color:#667060;margin:0}

/* ---- Media ------------------------------------------------------------------- */
.cs-media-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.cs-media-feature{grid-column:span 7;grid-row:span 2;position:relative;overflow:hidden;min-height:560px;margin:0}
.cs-media-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.cs-media-feature:hover img{transform:scale(1.02)}
.cs-media-feature figcaption{position:absolute;inset:auto 0 0;margin:0;padding:48px 20px 18px;background:linear-gradient(0deg,rgba(6,15,3,.78),transparent);font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:white}
.cs-media-side{grid-column:span 5;display:grid;grid-template-rows:1fr 1fr;gap:16px}
.cs-media-item{position:relative;overflow:hidden;margin:0;display:flex;flex-direction:column;min-height:0}
.cs-media-item a{flex:1 1 auto;min-height:0;position:relative;overflow:hidden;display:block}
.cs-media-item a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.cs-media-item a:hover img{transform:scale(1.03)}
.cs-media-cap{margin-top:10px;font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:#6b7766}
.cs-media-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* ---- Responsive ------------------------------------------------------------------ */
@media(max-width:1000px){
  .cs-tblock{grid-template-columns:1fr;gap:48px}
  .cs-tblock--flip .cs-client{order:0}
  .cs-client{min-height:460px;max-width:720px;width:100%;margin-inline:auto}
  .cs-industries{grid-template-columns:repeat(2,1fr)}
  .cs-logos{grid-template-columns:repeat(3,1fr)}
  .cs-media-grid{display:block}
  .cs-media-feature{min-height:420px;margin-bottom:16px}
  .cs-media-side{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
  .cs-media-item{height:230px}
  .cs-media-row{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
  .cs-tblock{padding:56px 0;gap:36px}
  .cs-client{min-height:400px}
  .cs-client-plate{width:min(86%,340px)}
  .cs-industries{grid-template-columns:1fr}
  .cs-industry{min-height:150px;padding:28px 24px}
  .cs-logos{grid-template-columns:repeat(2,1fr)}
  .cs-logo{min-height:76px;padding:16px}
  .cs-media-feature{min-height:300px}
  .cs-media-item{height:200px}
  .cs-media-row{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){
  .cs-media-side{grid-template-columns:1fr}
  .cs-media-item{height:240px}
  .cs-media-row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .cs-client-bg,.cs-media-feature img,.cs-media-item a img{transition:none}
}