/* The case studies (inc/customers.php, template-parts/customer-*.php and customers-hub.php): the person's stage, every
   rule scoped to .cs, on the kit's tokens (kit.css loads before this file), so the dark theme follows. Coral is the
   person's touch: the quote mark, the rule over each result and each card's number, the pull quote's rule, the card's
   edge on hover. The customer's numbers are set in ink, never in the AI's blue; blue stays inside the stills. Nothing
   moves: no transition, no transform, no keyframes, no lift on hover (an edge changes). The linked review card any page
   prints is the kit's (.k-review-link), not this file's. */

/* the page's sections carry their own room under the nav, as the alternative pages do (main.gs-alt) */
main.cs{padding-top:0}

/* ==== the bar of a real story not cleared yet (served on the local copy only) ==================================== */
.cs-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;margin:0;padding:12px var(--k-gutter);background:color-mix(in srgb,var(--coral) 12%,var(--panel));font:400 14.5px/1.4 var(--sans);color:var(--ink);text-align:center}
.cs-bar b{font:600 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--coral)}

/* ==== the portrait: a photo fills its frame; a drawn one stands on the company's tint (customer-portrait.php) ===== */
.cs :is(.cs-portrait,.cs-card-pic){position:relative;display:block;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--k-warm)}
.cs .cs-pic-drawn{background:color-mix(in srgb,var(--cs-tint,#6C6B74) 16%,var(--panel))}
.cs .cs-portrait-img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--cs-focus,50% 30%)}
.cs .cs-portrait-ini{display:grid;place-items:center;width:100%;height:100%;font:600 clamp(56px,8vw,112px)/1 var(--display);letter-spacing:-.04em;color:color-mix(in srgb,var(--cs-tint,#6C6B74) 70%,var(--ink))}
.cs :is(.cs-portrait,.cs-card-pic)>.k-sample{position:absolute;top:16px;right:16px}
.cs .cs-drawn{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);white-space:nowrap}

/* ==== the hero: the person leads ================================================================================== */
.cs .cs-hero{padding-top:48px}
.cs-hero-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center}
.cs-portrait{width:100%;max-width:480px;border-radius:28px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 6%,transparent)}
.cs-hero-txt{min-width:0}
.cs-trail a{color:inherit;text-decoration:none}
.cs-trail a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.cs-h1{max-width:12em}
.cs-quote{margin:36px 0 0;padding:0}
.cs-qm{display:block;width:36px;height:36px;margin:0 0 14px;color:var(--coral)}
.cs-quote p{margin:0;font:500 clamp(22px,2.1vw,30px)/1.4 var(--display);letter-spacing:-.012em;color:var(--ink2);text-wrap:pretty}
.cs-who{display:flex;align-items:center;gap:14px;margin:32px 0 0}
.cs-who>span:last-child{display:flex;flex-direction:column;gap:5px;min-width:0}
.cs-name{font:600 17px/1.2 var(--display);color:var(--ink2)}
.cs-role{font:400 15px/1.35 var(--sans);color:var(--mute)}

/* ==== the results: their numbers, each with its window ============================================================= */
.cs-res-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin:0;padding:0;list-style:none}
.cs-res{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding-top:28px}
.cs-res::before{content:"";position:absolute;top:0;left:0;width:40px;height:2px;background:var(--coral)}
.cs-res-n{font:600 clamp(44px,5vw,72px)/1 var(--display);letter-spacing:-.04em;color:var(--ink2)}
.cs-res-what{font:500 16.5px/1.4 var(--sans);color:var(--ink);text-wrap:pretty}
.cs-res-win{font:500 12.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.cs-res-note{display:flex;align-items:flex-start;gap:10px;max-width:860px;margin-top:44px}
.cs-res-note .k-sample{margin-top:1px}

/* ==== the story: the facts rail beside a 680 px column ============================================================= */
/* The rail runs the column's height: the facts at its top, then "In this story", which stays in view under the nav while
   the story is read (the whole rail is taller than a laptop's window, so the facts scroll away and the sections stay) */
.cs-body-in{display:grid;grid-template-columns:280px minmax(0,680px);gap:64px;justify-content:center;align-items:stretch}
.cs-rail{display:flex;flex-direction:column;gap:40px;min-width:0}
.cs-toc{position:sticky;top:calc(var(--nav-h,64px) + 24px)}
.cs-facts{display:grid;gap:0;margin:0}
.cs-fact{min-width:0;padding:16px 0;border-top:1px solid var(--line)}
.cs-fact:first-child{padding-top:0;border-top:0}
.cs-fact dt{margin:0 0 8px;font:500 12.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.cs-fact dd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font:400 15.5px/1.5 var(--sans);color:var(--ink);text-wrap:pretty}
.cs-fact dd>span{font-weight:600;color:var(--ink2)}
.cs-fact dd>small{flex-basis:100%;font:400 13px/1.3 var(--mono);color:var(--mute)}
.cs-prods,.cs-jobs{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.cs-prods{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.cs-prod{display:inline-flex;align-items:center;gap:10px;font:500 15.5px/1.3 var(--sans);color:var(--ink);text-decoration:none}
.cs .cs-tile{width:24px;height:24px;border-radius:7px}
.cs .cs-tile svg{width:14px;height:14px}
.cs-job{font:400 15.5px/1.4 var(--sans);color:var(--ink)}
a.cs-job{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ink) 30%,transparent);text-decoration-thickness:1px;text-underline-offset:4px}
:is(a.cs-prod,a.cs-job):hover{color:var(--ink2);text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:4px}
.cs-toc-h{margin:0 0 12px;font:500 12.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.cs-toc ol{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.cs-toc a{display:flex;align-items:baseline;gap:12px;padding:6px 0;font:500 15px/1.35 var(--sans);color:var(--ink);text-decoration:none}
.cs-toc a span{flex:none;min-width:20px;font:500 12px/1 var(--mono);color:var(--mute)}
.cs-toc a:hover{color:var(--ink2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

.cs-col{display:grid;gap:56px;min-width:0}
.cs-sec{min-width:0;scroll-margin-top:calc(var(--nav-h,64px) + 24px)}
.cs-sec-n{display:flex;align-items:center;gap:14px;margin:0;font:500 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.cs-sec-n span{color:var(--ink2)}
.cs-sec-n i{display:block;width:40px;height:1px;background:currentColor;opacity:.45}
.cs-h2{margin:18px 0 0;font:600 clamp(28px,2.6vw,36px)/1.12 var(--display);letter-spacing:-.025em;color:var(--ink2);text-wrap:balance}
.cs-p{margin:20px 0 0;font:400 18px/1.65 var(--sans);color:var(--ink);text-wrap:pretty}
.cs-p+.cs-p{margin-top:16px}
/* a still of the shared demo in its own window frame, no stage: its Sample rides in its bar, its label is the caption */
.cs-still{margin:36px 0 0;min-width:0}
.cs-still>.gsd{width:100%;margin:0}
.cs-still-cap{margin-top:14px}
.cs-pull{margin:0;padding:6px 0 6px 28px;border-left:3px solid var(--coral)}
.cs-pull blockquote{margin:0}
.cs-pull p{margin:0;font:600 26px/1.32 var(--display);letter-spacing:-.02em;color:var(--ink2);text-wrap:pretty}
.cs-pull figcaption{margin-top:16px;font:500 12.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}

/* ==== the cards: the hub's grid and a story's More stories (customer-card.php) ===================================== */
.cs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:48px 0 0;padding:0;list-style:none}
.cs-hub-list .cs-grid{margin-top:0}
.cs-grid>li{display:flex;min-width:0}
.cs-grid>li>.cs-card{flex:1}
.cs-grid>.cs-grid-lg{grid-column:1/-1}
.cs-card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:24px;background:var(--k-card);box-shadow:var(--k-sh)}
/* the edge sits over the picture, so it is drawn by a layer of its own; hover and focus turn it coral */
.cs-card::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.cs-card:is(:hover,:focus-within)::before{box-shadow:inset 0 0 0 2px var(--coral)}
.cs-card-body{display:flex;flex-direction:column;flex:1;min-width:0;padding:26px 28px 28px}
.cs-card-co{display:flex;align-items:center;gap:10px;min-width:0;margin:0;font:600 15.5px/1.2 var(--display);color:var(--ink2)}
.cs-card-co .k-tag{margin-left:auto}
.cs-card-n{position:relative;display:grid;gap:6px;margin:26px 0 0;padding-top:22px}
.cs-card-n::before{content:"";position:absolute;top:0;left:0;width:40px;height:2px;background:var(--coral)}
.cs-card-n b{font:600 clamp(40px,4vw,56px)/1 var(--display);letter-spacing:-.04em;color:var(--ink2)}
.cs-card-what{font:500 15.5px/1.4 var(--sans);color:var(--ink)}
.cs-card-win{font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.cs-card-h{margin:24px 0 0;font:600 21px/1.25 var(--display);letter-spacing:-.015em;color:var(--ink2);text-wrap:balance}
.cs-card-q{margin:16px 0 0;font:500 18px/1.5 var(--display);color:var(--ink);text-wrap:pretty}
.cs-card-who{display:flex;flex-direction:column;gap:3px;margin:auto 0 0;padding-top:26px;font:400 14.5px/1.35 var(--sans);color:var(--mute)}
.cs-card-who b{font-weight:600;color:var(--ink2)}
.cs-card-more{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:18px;font:600 15px/1.3 var(--sans);color:var(--ink2);text-decoration:none}
.cs-card-more svg{display:block;flex:none;width:17px;height:17px;color:var(--ai)}
.cs-card-more::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.cs-card-more:focus-visible{outline:none}
.cs-card:hover .cs-card-more{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
/* the hub's first card spans the row: the picture on 5 of 12 columns, the body beside it with the quote */
.cs-card-lg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.cs-card-lg .cs-card-body{justify-content:center;padding:52px 60px}
.cs-card-lg .cs-card-h{font-size:clamp(26px,2.4vw,34px);line-height:1.15;letter-spacing:-.025em}
.cs-card-lg .cs-card-q{font-size:clamp(18px,1.5vw,21px)}
.cs-card-lg .cs-card-who{margin-top:0}

/* ==== the hub ======================================================================================================== */
.cs .cs-hub-hero{padding:72px 0 80px}
.cs-hub-hero .k-head{max-width:820px}
.cs-hub-hero .k-hero-dek{margin-left:0}
.cs-hub-note{display:flex;align-items:flex-start;gap:10px}
.cs-hub-note .k-sample{margin-top:1px}
.cs-filters{display:grid;gap:12px;margin:0 0 36px}
.cs-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cs-filter-k{min-width:56px;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.cs-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--line);font:500 14.5px/1 var(--sans);color:var(--ink);text-decoration:none;white-space:nowrap}
.cs-chip:hover{box-shadow:inset 0 0 0 1px var(--mute)}
.cs-chip[aria-current]{background:var(--ink2);box-shadow:none;color:var(--ground)}
.cs-chip-n{font:500 11.5px/1 var(--mono);color:var(--mute)}
.cs-chip[aria-current] .cs-chip-n{color:inherit;opacity:.7}

/* ==== the close: the night, one button, the motto =================================================================== */
.cs-finale .k-motto{margin-top:88px}

/* ==== focus ========================================================================================================== */
.cs :is(.cs-trail a,.cs-prod,.cs-job,.cs-toc a,.cs-chip):focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

/* ==== widths ========================================================================================================= */
@media (max-width:1200px){
  .cs-body-in{grid-template-columns:minmax(0,1fr);gap:48px;max-width:calc(680px + 2 * var(--k-gutter))}
  .cs-toc{position:static}
  .cs-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 32px;padding:26px 28px;border-radius:20px;background:var(--k-warm)}
  .cs-fact,.cs-fact:first-child{padding:0;border-top:0}
  .cs-fact-list{grid-column:1/-1}
  /* the products land in even rows (six as 3 and 3, two under 760 px), never one left alone on a row */
  .cs-prods{grid-template-columns:repeat(3,max-content);gap:10px 28px}
  .cs-jobs{display:flex;flex-wrap:wrap;gap:10px 22px}
  .cs-toc{display:none}
  .cs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-card-lg .cs-card-body{padding:40px 40px}
}
@media (max-width:900px){
  /* the hero: the trail, the H1, the portrait cropped to 4:3 at its focus (the hair and the shoulders both in), the
     quote, who */
  .cs-hero-in{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .cs-hero-txt{display:contents}
  .cs-trail{order:1}
  .cs-h1{order:2;max-width:none}
  .cs .cs-portrait{order:3;max-width:none;margin-top:28px;aspect-ratio:4/3;border-radius:22px}
  .cs-quote{order:4;margin-top:32px}
  .cs-who{order:5}
  /* the results: one row each, the number left, what it counts and its window right */
  .cs-res-list{grid-template-columns:minmax(0,1fr);gap:28px}
  .cs-res{display:grid;grid-template-columns:clamp(84px,24vw,128px) minmax(0,1fr);grid-template-rows:auto auto;column-gap:20px;row-gap:6px;align-items:end;padding-top:22px}
  .cs-res-n{grid-row:1/3;align-self:center}
  .cs-res-what{align-self:end}
  .cs-res-win{align-self:start}
  .cs-card-lg{display:flex;flex-direction:column}
  .cs-card-lg .cs-card-pic{aspect-ratio:4/3}
  .cs-card-lg .cs-card-pic .cs-portrait-img{object-position:var(--cs-focus,50% 30%)}
}
@media (max-width:760px){
  .cs .cs-hero{padding-top:28px}
  .cs-quote p{font-size:21px}
  .cs-res-n{font-size:44px}
  .cs-res-note{margin-top:32px}
  .cs-facts{grid-template-columns:minmax(0,1fr);padding:22px 20px}
  .cs-prods{grid-template-columns:repeat(2,max-content)}
  .cs-col{gap:48px}
  .cs-h2{font-size:28px}
  .cs-p{font-size:17px}
  .cs-still{margin-top:28px}
  .cs-pull{padding-left:20px}
  .cs-pull p{font-size:22px}
  .cs-grid{grid-template-columns:minmax(0,1fr)}
  .cs-card-body,.cs-card-lg .cs-card-body{padding:22px 22px 24px}
  .cs .cs-hub-hero{padding:32px 0 56px}
  .cs-filter-k{flex-basis:100%}
  .cs-finale .k-motto{margin-top:64px}
}