/* ==== Case study detail — univerzální template ====
   Velmi vizuální, image-first. Sestava bloků:
   hero · brief · stats · 2-up · quote · 3-up · stack · reel · results · gallery · CTA
*/

.cs{
  background:var(--ink);
  color:var(--paper);
  position:relative;
  overflow:hidden;
}

/* utility — všechny bloky držíme uvnitř shell */
.cs__shell{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad);
  position:relative;
}
.cs__shell--wide{ max-width:1600px }

/* === Placeholder media (solid color do doplnění fotek) === */
.ph{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  background:var(--coral);
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:18px 22px;
}
.ph::before{
  /* subtle striped texture, aby placeholder nebyl plochý */
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(
    45deg,
    rgba(0,0,0,.05) 0 14px,
    transparent 14px 28px
  );
  pointer-events:none;
}
.ph__tag{
  position:relative;z-index:1;
  font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(0,0,0,.55);
  background:rgba(255,255,255,.55);
  padding:6px 10px;border-radius:4px;
  backdrop-filter:blur(4px);
}
.ph__idx{
  position:relative;z-index:1;
  font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:.14em;
  color:rgba(0,0,0,.45);
}
/* tonal varianty placeholderů */
.ph--coral{ background:#FF747D }
.ph--ink  { background:#1A1A1A }
.ph--ink .ph__tag{ background:rgba(255,255,255,.10);color:rgba(255,255,255,.7) }
.ph--ink .ph__idx{ color:rgba(255,255,255,.5) }
.ph--paper{ background:var(--paper) }
.ph--paper .ph__tag{ background:rgba(0,0,0,.06);color:var(--muted-2) }
.ph--paper .ph__idx{ color:var(--muted-2) }
.ph--rubin{ background:#3C2F33 }
.ph--rubin .ph__tag{ background:rgba(255,255,255,.10);color:rgba(255,255,255,.75) }
.ph--rubin .ph__idx{ color:rgba(255,255,255,.5) }
.ph--clay { background:#C9B7A2 }
.ph--clay .ph__tag{ background:rgba(0,0,0,.10);color:rgba(0,0,0,.6) }
.ph--clay .ph__idx{ color:rgba(0,0,0,.5) }
.ph--moss { background:#5C6B57 }
.ph--moss .ph__tag{ background:rgba(255,255,255,.10);color:rgba(255,255,255,.85) }
.ph--moss .ph__idx{ color:rgba(255,255,255,.55) }
.ph--graphite{ background:#262626 }
.ph--graphite .ph__tag{ background:rgba(255,255,255,.10);color:rgba(255,255,255,.75) }
.ph--graphite .ph__idx{ color:rgba(255,255,255,.5) }
.ph--obsidian{ background:#0E0E0E;outline:1px solid rgba(243,243,243,.08);outline-offset:-1px }
.ph--obsidian .ph__tag{ background:rgba(255,255,255,.08);color:rgba(255,255,255,.7) }
.ph--obsidian .ph__idx{ color:rgba(255,255,255,.45) }

/* aspect-ratio helpers */
.ph--3x4 { aspect-ratio:3 / 4 }
.ph--4x3 { aspect-ratio:4 / 3 }
.ph--1x1 { aspect-ratio:1 / 1 }
.ph--16x9{ aspect-ratio:16 / 9 }
.ph--9x16{ aspect-ratio:9 / 16 }
.ph--21x9{ aspect-ratio:21 / 9 }
.ph--3x2 { aspect-ratio:3 / 2 }

/* === 01 HERO === */
.cs-hero{
  position:relative;
  padding:140px 0 0;
  background:
    radial-gradient(70% 50% at 80% 10%, rgba(255,116,125,.10), transparent 60%),
    var(--ink);
  overflow:hidden;
}
/* jemný placeholder v pozadí — naznačí fotku za titulem */
.cs-hero__bg{
  position:absolute;inset:0;
  background:
    radial-gradient(60% 80% at 90% 50%, rgba(255,116,125,.22), transparent 60%),
    repeating-linear-gradient(45deg, rgba(243,243,243,.03) 0 14px, transparent 14px 28px);
  opacity:.7;
  pointer-events:none;
  z-index:0;
}
.cs-hero > .cs__shell{ position:relative; z-index:1 }
.cs-hero__top{
  display:flex;justify-content:space-between;align-items:flex-end;gap:40px;
  padding-bottom:32px;
  border-bottom:1px solid var(--line);
  margin-bottom:48px;
}

/* hlavní grid v hero: title + lede vlevo, vizuál vpravo */
.cs-hero__main{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:64px;
  align-items:end;
  padding-bottom:64px;
}
.cs-hero__main-l{
  display:flex;flex-direction:column;gap:48px;
}
.cs-hero__main-r{ position:relative }
.cs-hero__visual{
  width:100%;
  aspect-ratio:4 / 5;
  border-radius:12px;
}
@media (max-width:1100px){
  .cs-hero__main{ grid-template-columns:1fr; gap:40px }
  .cs-hero__visual{ aspect-ratio:4 / 3; max-width:560px }
}
.cs-hero__kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--coral);
}
.cs-hero__kicker::before{
  content:"";width:6px;height:6px;border-radius:999px;background:var(--coral);
}
.cs-hero__back{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
  display:inline-flex;align-items:center;gap:10px;
  transition:color .2s;
  background:none;border:0;cursor:pointer;padding:0;
}
.cs-hero__back:hover{ color:var(--paper) }
.cs-hero__back-arrow{
  width:22px;height:22px;border-radius:999px;
  background:rgba(243,243,243,.08);
  display:grid;place-items:center;font-size:12px;color:var(--paper);
  transition:background .2s;
}
.cs-hero__back:hover .cs-hero__back-arrow{ background:var(--paper);color:var(--ink) }

.cs-hero__title{
  font-family:"Hubot Sans",sans-serif;
  font-size:clamp(72px,11vw,176px);
  font-weight:500;
  font-stretch:75%;
  text-transform:uppercase;
  letter-spacing:-.04em;
  line-height:.88;
  margin:0;
}
.cs-hero__title em{
  font-style:italic;font-weight:300;color:var(--coral);
}

.cs-hero__lede{
  display:flex;flex-direction:column;gap:20px;
  max-width:48ch;
}
.cs-hero__lede-l{
  font-family:"Hubot Sans",sans-serif;
  font-size:clamp(22px,2vw,30px);
  font-weight:400;line-height:1.25;letter-spacing:-.015em;
  color:var(--paper);
  margin:0;
}
.cs-hero__lede-r{
  font-size:16px;line-height:1.6;color:#bdbdbd;margin:0;
}

/* meta strip pod hero — klient/rok/obor/služby (4 cely) */
.cs-meta{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.cs-meta__cell{
  padding:24px 28px 24px 0;
  display:flex;flex-direction:column;gap:8px;
  border-right:1px solid var(--line);
}
.cs-meta__cell:last-child{ border-right:0;padding-right:0;padding-left:0 }
.cs-meta__cell:nth-child(n+2){ padding-left:28px }
.cs-meta__lbl{
  font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.cs-meta__val{
  font-size:16px;font-weight:500;color:var(--paper);letter-spacing:-.005em;
}
.cs-meta__tags{ display:flex;flex-wrap:wrap;gap:6px }
.cs-meta__tag{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;color:var(--paper);
  padding:4px 8px;border-radius:4px;
  background:rgba(243,243,243,.06);
  border:1px solid var(--line);
}

/* === 02 KEY VISUAL — full bleed === */
.cs-keyvis{
  margin-top:48px;
  padding:0 var(--pad) 120px;
}
.cs-keyvis .ph{
  width:100%;
  aspect-ratio:21 / 9;
  border-radius:12px;
}

/* === 03 BRIEF — dvousloupcový text === */
.cs-brief{
  padding:80px 0 120px;
  border-top:1px solid var(--line);
}
.cs-brief__grid{
  display:grid;grid-template-columns:280px 1fr;gap:80px;align-items:start;
}
.cs-brief__lbl{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--coral);
  position:sticky;top:120px;
}
.cs-brief__lbl::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:999px;
  background:var(--coral);margin-right:10px;vertical-align:middle;
}
.cs-brief__body{
  font-family:"Hubot Sans",sans-serif;
  font-size:clamp(20px,1.6vw,26px);
  font-weight:400;line-height:1.45;
  color:var(--paper);letter-spacing:-.005em;
  max-width:60ch;
}
.cs-brief__body p{ margin:0 0 24px }
.cs-brief__body p:last-child{ margin:0 }
.cs-brief__body em{ font-style:italic;color:var(--coral);font-weight:300 }

/* === 04 STATS === */
.cs-stats{
  padding:80px 0 120px;
  background:var(--paper);color:var(--ink-2);
}
.cs-stats__head{
  display:flex;justify-content:space-between;align-items:end;gap:40px;
  margin-bottom:64px;
}
.cs-stats__title{
  font-family:"Hubot Sans",sans-serif;
  font-size:clamp(48px,5.5vw,80px);
  font-weight:500;font-stretch:75%;
  text-transform:uppercase;letter-spacing:-.03em;line-height:.95;
  margin:0;color:var(--ink-2);
  max-width:14ch;
}
.cs-stats__title em{ font-style:italic;font-weight:300;color:var(--coral) }
.cs-stats__sub{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);
  max-width:30ch;
  line-height:1.6;
}

.cs-stats__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:2px solid var(--ink-2);
}
.cs-stats__cell{
  padding:36px 28px 36px 0;
  border-right:1px solid var(--line-ink);
  display:flex;flex-direction:column;gap:12px;
  min-height:240px;
  justify-content:space-between;
}
.cs-stats__cell:first-child{ padding-left:0 }
.cs-stats__cell:nth-child(n+2){ padding-left:28px }
.cs-stats__cell:last-child{ border-right:0;padding-right:0 }
.cs-stats__num{
  font-family:"Hubot Sans",sans-serif;
  font-size:clamp(56px,7vw,104px);
  font-weight:500;font-stretch:75%;
  letter-spacing:-.04em;line-height:.9;
  color:var(--ink-2);
}
.cs-stats__num .unit{
  font-size:.4em;letter-spacing:-.02em;
  color:var(--coral);font-style:italic;font-weight:300;margin-left:2px;
}
.cs-stats__lbl{
  font-size:14px;line-height:1.4;color:var(--muted-2);
  max-width:22ch;
}
.cs-stats__cell-num{
  font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.18em;color:var(--coral);
}

/* === 05 GALLERY 2-UP — fotky vedle sebe === */
.cs-2up{
  padding:120px 0;
}
.cs-2up__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
}
.cs-2up__grid .ph{ aspect-ratio:4 / 5 }

/* === 06 QUOTE / TESTIMONIAL === */
.cs-quote{
  padding:120px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
}
.cs-quote__grid{
  display:grid;grid-template-columns:1fr 320px;gap:80px;align-items:end;
}
.cs-quote__text{
  font-family:"Hubot Sans",sans-serif;
  font-size:clamp(32px,3.6vw,56px);
  font-weight:300;font-style:italic;
  line-height:1.15;letter-spacing:-.02em;
  color:var(--paper);
  margin:0;
  max-width:22ch;
}
.cs-quote__text::before{
  content:"„";
  color:var(--coral);
  font-style:normal;
  margin-right:.1em;
  font-weight:400;
}
.cs-quote__text::after{
  content:"“";
  color:var(--coral);
  font-style:normal;
  margin-left:.05em;
  font-weight:400;
}
.cs-quote__person{
  display:flex;flex-direction:column;gap:12px;
}
.cs-quote__avatar{
  width:80px;height:80px;border-radius:999px;
  background:var(--coral);
  position:relative;overflow:hidden;
}
.cs-quote__avatar::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.06) 0 6px,transparent 6px 12px);
}
.cs-quote__name{
  font-size:18px;font-weight:500;color:var(--paper);letter-spacing:-.005em;
}
.cs-quote__role{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}

/* === 07 GALLERY 3-UP — tři fotky vedle sebe === */
.cs-3up{
  padding:120px 0;
}
.cs-3up__head{
  display:flex;justify-content:space-between;align-items:end;
  margin-bottom:36px;gap:40px;
}
.cs-3up__lbl{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--coral);
}
.cs-3up__lbl::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:999px;
  background:var(--coral);margin-right:10px;vertical-align:middle;
}
.cs-3up__title{
  font-family:"Hubot Sans",sans-serif;
  font-size:clamp(32px,3.6vw,52px);
  font-weight:500;font-stretch:75%;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1;
  margin:0;
  max-width:18ch;
}
.cs-3up__title em{ font-style:italic;font-weight:300;color:var(--coral) }
.cs-3up__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.cs-3up__grid .ph{ aspect-ratio:3 / 4 }

/* === 08 STACK — sloupec fotek + text vedle === */
.cs-stack{
  padding:120px 0;
  border-top:1px solid var(--line);
}
.cs-stack__grid{
  display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:start;
}
.cs-stack__col-imgs{
  display:flex;flex-direction:column;gap:16px;
}
.cs-stack__col-imgs .ph{ width:100% }
.cs-stack__col-text{
  position:sticky;top:120px;
  display:flex;flex-direction:column;gap:24px;
}
.cs-stack__lbl{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--coral);
}
.cs-stack__title{
  font-family:"Hubot Sans",sans-serif;
  font-size:clamp(32px,3.6vw,52px);
  font-weight:500;font-stretch:75%;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1;
  margin:0;
}
.cs-stack__title em{ font-style:italic;font-weight:300;color:var(--coral) }
.cs-stack__text{
  font-size:16px;line-height:1.65;color:#bdbdbd;max-width:42ch;
}
.cs-stack__text p{ margin:0 0 16px }
.cs-stack__text p:last-child{ margin:0 }
.cs-stack__list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:0;
  border-top:1px solid var(--line);
}
.cs-stack__list li{
  padding:16px 0;
  display:grid;grid-template-columns:36px 1fr;gap:16px;align-items:start;
  border-bottom:1px solid var(--line);
  font-size:15px;line-height:1.5;color:var(--paper);
}
.cs-stack__list li::before{
  content:counter(s, decimal-leading-zero);
  counter-increment:s;
  font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.16em;color:var(--coral);
  padding-top:4px;
}
.cs-stack__list{ counter-reset:s }

/* === REEL — standalone video + testimonial ===========================
   Vertikální (9:16) video samostatně, vpravo testimonial. */
.cs-reel{
  padding:120px 0;
  background:var(--paper);color:var(--ink-2);
  position:relative;overflow:hidden;
}
.cs-reel__head{
  display:flex;justify-content:space-between;align-items:end;gap:40px;
  margin-bottom:48px;
}
.cs-reel__lbl{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--coral);font-weight:600;
}
.cs-reel__lbl::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:999px;
  background:var(--coral);margin-right:10px;vertical-align:middle;
}
.cs-reel__title{
  font-family:"Hubot Sans",sans-serif;
  font-size:clamp(36px,4.5vw,72px);
  font-weight:500;font-stretch:75%;
  text-transform:uppercase;letter-spacing:-.02em;line-height:.95;
  margin:8px 0 0;color:var(--ink-2);
  max-width:14ch;
}
.cs-reel__title em{ font-style:italic;font-weight:300;color:var(--coral) }
.cs-reel__caption{
  font-size:16px;line-height:1.5;color:var(--muted-2);
  max-width:36ch;text-align:right;
}

.cs-reel__grid{
  display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:stretch;
}

/* samotný video placeholder — žádný telefonní rámeček */
.cs-reel__video{
  position:relative;
  width:100%;
  aspect-ratio:9 / 16;
  border-radius:12px;overflow:hidden;
  background:var(--coral);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.35);
}
.cs-reel__video::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.06) 0 14px,transparent 14px 28px);
}
.cs-reel__play{
  position:absolute;inset:0;display:grid;place-items:center;z-index:2;
}
.cs-reel__play-btn{
  width:88px;height:88px;border-radius:999px;
  background:rgba(243,243,243,.92);backdrop-filter:blur(8px);
  display:grid;place-items:center;
  color:var(--ink);font-size:26px;
  border:0;cursor:pointer;
  transition:transform .2s;
  box-shadow:0 12px 30px rgba(0,0,0,.2);
}
.cs-reel__play-btn:hover{ transform:scale(1.06) }
.cs-reel__time{
  position:absolute;top:20px;left:20px;z-index:2;
  font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.95);
  padding:6px 12px;border-radius:999px;
  background:rgba(0,0,0,.45);backdrop-filter:blur(8px);
  display:inline-flex;align-items:center;gap:8px;
}
.cs-reel__time::before{
  content:"";width:6px;height:6px;border-radius:999px;background:#FF4757;
}
.cs-reel__chip{
  position:absolute;top:20px;right:20px;z-index:2;
  font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.95);
  padding:6px 12px;border-radius:6px;
  background:rgba(0,0,0,.45);backdrop-filter:blur(8px);
}

/* testimonial card vpravo — tmavý kontrast vůči paper podkladu */
.cs-testi{
  display:flex;flex-direction:column;justify-content:space-between;
  padding:40px;border-radius:12px;
  background:var(--ink-2);color:var(--paper);
  position:relative;overflow:hidden;
  min-height:520px;
}
.cs-testi__chip{
  font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--coral);
  display:inline-flex;align-items:center;gap:8px;
  align-self:flex-start;
  padding:6px 10px;border-radius:999px;
  background:rgba(255,116,125,.10);
  border:1px solid rgba(255,116,125,.25);
}
.cs-testi__chip::before{
  content:"";width:5px;height:5px;border-radius:999px;background:var(--coral);
}
.cs-testi__quote{
  font-family:"Hubot Sans",sans-serif;
  font-size:clamp(22px,2.2vw,30px);
  font-weight:400;font-style:italic;line-height:1.3;letter-spacing:-.01em;
  color:var(--paper);
  margin:32px 0;
  max-width:28ch;
}
.cs-testi__quote::before{ content:"„";color:var(--coral);font-style:normal }
.cs-testi__quote::after{ content:"“";color:var(--coral);font-style:normal }
.cs-testi__person{
  display:flex;align-items:center;gap:16px;
  padding-top:24px;
  border-top:1px solid rgba(243,243,243,.10);
}
.cs-testi__avatar{
  width:56px;height:56px;border-radius:999px;
  background:var(--coral);
  position:relative;overflow:hidden;flex-shrink:0;
}
.cs-testi__avatar::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.08) 0 6px,transparent 6px 12px);
}
.cs-testi__name{ font-size:17px;font-weight:500;color:var(--paper);letter-spacing:-.005em;line-height:1.2 }
.cs-testi__role{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:4px;
}

/* === 10 RESULTS — 2 column text === */
.cs-results{
  padding:120px 0;
}
.cs-results__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;
}
.cs-results__col{
  display:flex;flex-direction:column;gap:18px;
}
.cs-results__lbl{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--coral);
  display:flex;align-items:center;gap:10px;
}
.cs-results__lbl::before{
  content:"";width:24px;height:1px;background:var(--coral);
}
.cs-results__h{
  font-family:"Hubot Sans",sans-serif;
  font-size:clamp(28px,3vw,42px);
  font-weight:500;font-stretch:75%;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1;
  margin:0;
}
.cs-results__h em{ font-style:italic;font-weight:300;color:var(--coral) }
.cs-results__body{
  font-size:16px;line-height:1.65;color:#bdbdbd;
}
.cs-results__body p{ margin:0 0 16px }
.cs-results__body p:last-child{ margin:0 }

/* === 11 GALLERY ASYM — asymetrický grid === */
.cs-asym{
  padding:120px 0;
}
.cs-asym__grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:auto auto;
  gap:16px;
}
.cs-asym__grid .ph:nth-child(1){ grid-column:span 2; aspect-ratio:16 / 9 }
.cs-asym__grid .ph:nth-child(2){ grid-column:span 1; aspect-ratio:3 / 4 }
.cs-asym__grid .ph:nth-child(3){ grid-column:span 1; aspect-ratio:4 / 3 }
.cs-asym__grid .ph:nth-child(4){ grid-column:span 2; aspect-ratio:16 / 9 }

/* === 12 FULL BLEED 2nd image === */
.cs-full{
  padding:0 var(--pad) 120px;
}
.cs-full .ph{
  width:100%;aspect-ratio:16 / 7;border-radius:12px;
}

/* === NEXT CASES — mini grid 3 karet =================================== */
.cs-next{
  padding:120px 0 140px;
  border-top:1px solid var(--line);
}
.cs-next__head{
  display:flex;justify-content:space-between;align-items:end;gap:40px;
  margin-bottom:48px;
}
.cs-next__lbl{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--coral);
}
.cs-next__lbl::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:999px;
  background:var(--coral);margin-right:10px;vertical-align:middle;
}
.cs-next__title{
  font-family:"Hubot Sans",sans-serif;
  font-size:clamp(40px,4.5vw,72px);
  font-weight:500;font-stretch:75%;
  text-transform:uppercase;letter-spacing:-.025em;line-height:.95;
  margin:8px 0 0;max-width:16ch;
}
.cs-next__title em{ font-style:italic;font-weight:300;color:var(--coral) }
.cs-next__sub{
  font-size:13px;line-height:1.5;color:var(--muted);
  font-family:"JetBrains Mono",monospace;letter-spacing:.04em;
  text-align:right;max-width:26ch;
}
.cs-next__grid{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;
}
.cs-nextcard{
  position:relative;display:flex;flex-direction:column;
  border-radius:12px;overflow:hidden;
  background:var(--ink-2);
  cursor:pointer;
  transition:transform .25s ease, border-color .25s ease;
  border:1px solid var(--line);
}
.cs-nextcard:hover{ transform:translateY(-4px);border-color:rgba(255,116,125,.35) }
.cs-nextcard__media{ position:relative;width:100%;aspect-ratio:4 / 5 }
.cs-nextcard__media .ph{ width:100%;height:100%;border-radius:0 }
.cs-nextcard__num{
  position:absolute;top:16px;left:16px;z-index:2;
  font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.85);
  padding:4px 8px;border-radius:4px;
  background:rgba(0,0,0,.4);backdrop-filter:blur(6px);
}
.cs-nextcard__arrow{
  position:absolute;top:16px;right:16px;z-index:2;
  width:36px;height:36px;border-radius:999px;
  background:var(--coral);color:var(--ink);
  display:grid;place-items:center;font-size:14px;
  transition:transform .25s;
}
.cs-nextcard:hover .cs-nextcard__arrow{ transform:translate(2px,-2px) }
.cs-nextcard__body{
  padding:24px 24px 28px;
  display:flex;flex-direction:column;gap:10px;
}
.cs-nextcard__tags{ display:flex;flex-wrap:wrap;gap:6px }
.cs-nextcard__tag{
  font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.06em;
  color:var(--muted);
  padding:3px 8px;border-radius:4px;
  background:rgba(243,243,243,.05);
  border:1px solid var(--line);
}
.cs-nextcard__title{
  font-family:"Hubot Sans",sans-serif;
  font-size:clamp(28px,2.6vw,38px);
  font-weight:500;font-stretch:75%;
  text-transform:uppercase;letter-spacing:-.015em;line-height:.95;
  color:var(--paper);margin:6px 0 0;
}
.cs-nextcard__sub{
  font-size:13px;color:var(--muted);line-height:1.4;margin:0;
}
.cs-next__foot{
  margin-top:48px;display:flex;justify-content:center;
}

/* === Responsive === */
@media (max-width:1100px){
  .cs-hero{ padding-top:100px }
  .cs-hero__main{ grid-template-columns:1fr; gap:40px }
  .cs-hero__visual{ aspect-ratio:4 / 3; max-width:560px }
  .cs-meta{ grid-template-columns:repeat(2,1fr) }
  .cs-meta__cell{ border-right:0;border-bottom:1px solid var(--line);padding:18px 0 }
  .cs-meta__cell:nth-child(odd){ padding-right:20px;border-right:1px solid var(--line) }
  .cs-meta__cell:nth-child(n+2){ padding-left:0 }
  .cs-meta__cell:nth-child(even){ padding-left:20px }
  .cs-brief__grid{ grid-template-columns:1fr;gap:32px }
  .cs-brief__lbl{ position:static }
  .cs-stats__grid{ grid-template-columns:repeat(2,1fr) }
  .cs-stats__cell{ min-height:200px;border-bottom:1px solid var(--line-ink) }
  .cs-stats__cell:nth-child(2){ border-right:0 }
  .cs-2up__grid{ grid-template-columns:1fr;gap:16px }
  .cs-quote__grid{ grid-template-columns:1fr;gap:40px;align-items:start }
  .cs-3up__grid{ grid-template-columns:1fr;gap:16px }
  .cs-stack__grid{ grid-template-columns:1fr;gap:40px }
  .cs-stack__col-text{ position:static }
  .cs-reel__head{ flex-direction:column;align-items:flex-start;gap:16px }
  .cs-reel__caption{ text-align:left }
  .cs-reel__grid{ grid-template-columns:1fr;gap:24px }
  .cs-reel__video{ max-width:420px;margin:0 auto }
  .cs-testi{ min-height:auto;padding:32px }
  .cs-results__grid{ grid-template-columns:1fr;gap:40px }
  .cs-asym__grid{ grid-template-columns:1fr;gap:16px }
  .cs-asym__grid .ph{ grid-column:span 1 !important;aspect-ratio:4/3 !important }
  .cs-next__head{ flex-direction:column;align-items:flex-start;gap:16px }
  .cs-next__sub{ text-align:left }
  .cs-next__grid{ grid-template-columns:1fr;gap:16px }
}