/* Hand Coded With Love by We Unfuck */
/* ============================================================
   Proof index + case-study pages (shared)
   Reuses patterns from home.css (loaded before this file):
   .eyebrow-label, .h2-title, .quote, .stats, .link-btn, buttons
   ============================================================ */

/* ---------- Case-study hero ---------- */
.cs-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: -160px;
  min-height: 100vh;
  padding: 0 16px;
  background-color: #000;
  background-size: cover;
  background-position: 50% 50%;
  z-index: 1;
}
.cs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.75;
  pointer-events: none;
}
.cs-hero__inner {
  position: relative;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding-bottom: 96px;
}
.cs-hero__inner .eyebrow-label { margin: 0; }
.cs-hero__title {
  font-family: var(--f-display);
  font-size: 60px;
  font-weight: 400;
  line-height: 1.1em;
  letter-spacing: -1.3px;
  color: #fff;
  max-width: 684px;
  margin: 16px 0 32px;
}
.cs-hero__title b { font-weight: 700; }
.cs-hero__intro {
  max-width: 652px;
  font-size: 17px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: normal;
  color: #fff;
  margin: 0;
}
.cs-hero__tags {
  position: relative;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  padding: 10px 0;
}
.cs-hero__tags p {
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  line-height: 2.2em;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
@media (max-width: 1024px) {
  .cs-hero { margin-top: -90px; padding-bottom: 32px; }
  .cs-hero__tags { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .cs-hero { margin-top: -88px; padding-bottom: 48px; }
  .cs-hero__inner { padding-bottom: 0; }
  .cs-hero__title { font-size: 36px; line-height: 1.1em; }
  .cs-hero__tags { grid-template-columns: repeat(2, 1fr); padding: 32px 0 0; }
}

/* ---------- Stats band ---------- */
.cs-stats { background: var(--c-gray-150); padding: 32px; }
.cs-stats__grid {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.cs-stat { background: #fff; padding: 48px 32px 40px; }
.cs-stat__label {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1em;
  letter-spacing: normal;
  color: var(--c-secondary);
  margin: 0 0 32px;
}
.cs-stat__num {
  font-family: var(--f-display);
  font-size: 50px;
  font-weight: 900;
  line-height: 1em;
  letter-spacing: -0.2px;
  color: var(--c-text);
  text-align: right;
}
.cs-stat__num--counter {
  font-size: 60px;
  font-weight: 500;
  letter-spacing: -2.5px;
}
.cs-stat hr { border: 0; border-top: 1px solid; border-image: linear-gradient(to right, #a9bbce, #ffffff) 1; margin: 22px 0 0; }
@media (max-width: 1024px) and (min-width: 768px) {
  .cs-stat { padding: 48px 32px 32px; }
  .cs-stat__num { font-size: 40px; }
}
@media (max-width: 767px) {
  .cs-stats { padding: 32px 16px; }
  .cs-stats__grid { grid-template-columns: 1fr; gap: 16px; }
  .cs-stat { padding: 32px; }
  .cs-stat__num { font-size: 40px; }
}

/* ---------- Section scaffolding ---------- */
.cs-sec { background: var(--c-gray-150); padding: 0 32px; }
.cs-stack {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cs-stack--pt { padding-top: 32px; }
/* work-delivered block is one continuous dark run (heading, body, logo panel,
   gallery, view-live bar) — no 2px gaps/white lines between them, matches live */
.cs-stack--flush { gap: 0; }
.cs-dark-stack {
  background: #252729;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* head cards */
.cs-head { background: #fff; padding: 96px 64px 79px; }
.cs-head--plain { padding: 96px 64px 80px; }
.cs-head--dark { background: var(--c-ink-800); padding: 96px 64px 96px; }
.cs-head--result { background: var(--c-ink-800); padding: 96px 64px 80px; }
.cs-head--plain .h2-title,
.cs-head--dark .h2-title,
.cs-head--result .h2-title { margin-top: 16px; }
.cs-head--dark .h2-title,
.cs-head--result .h2-title { color: #fff; }
.cs-head__sub {
  font-family: var(--f-text);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: -0.5px;
  color: #fff;
  margin: 16px 0 0;
}
@media (max-width: 1024px) {
  .cs-sec { padding: 0 32px; }
  .cs-head, .cs-head--plain, .cs-head--dark, .cs-head--result { padding: 64px 32px 48px; }
  .cs-head--dark, .cs-head--result { padding-bottom: 64px; }
  .cs-head__sub { font-size: 30px; line-height: 1.2em; }
}
@media (max-width: 767px) {
  .cs-sec { padding: 0 16px; }
  .cs-head, .cs-head--plain, .cs-head--dark, .cs-head--result { padding: 64px 16px; }
  .cs-head__sub { font-size: 20px; line-height: 1.4em; }
}

/* body text cards */
.cs-body-card { background: #fff; padding: 48px 64px; }
.cs-body-card--dark { background: var(--c-ink-800); }
.cs-cols { columns: 2; column-gap: 96px; }
.cs-body-card p,
.cs-body-card li {
  font-size: 18px;
  font-weight: 400;
  line-height: 23.4px;
  letter-spacing: -0.2px;
  color: var(--c-text);
  margin: 0 0 27px;
}
.cs-body-card li { margin: 0; }
.cs-body-card ol { padding-left: 40px; margin: 0 0 27px; }
.cs-body-card--dark p, .cs-body-card--dark li { color: #fff; }
@media (max-width: 1024px) {
  .cs-cols { columns: 1; }
  .cs-body-card { padding: 48px 32px; }
}
@media (max-width: 767px) {
  .cs-body-card { padding: 32px 16px; }
}

/* ---------- Transformation before/after ---------- */
.cs-transform { display: grid; grid-template-columns: 443fr 249fr 443fr; gap: 2px; }
.cs-transform__cell { background: #fff; padding: 64px; }
.cs-transform__label {
  font-family: Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  color: var(--c-text);
  margin: 0;
  padding: 16px 0;
}
.cs-transform__cell img { display: block; }
.cs-transform__icon {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.cs-transform__icon svg { width: 40px; height: 40px; fill: #060606; flex: 0 0 auto; }
@media (max-width: 1024px) {
  .cs-transform__cell { padding: 32px; }
}
@media (max-width: 767px) {
  .cs-transform { grid-template-columns: 1fr; }
  .cs-transform__cell { padding: 32px 16px; }
  .cs-transform__icon { padding: 16px; }
  .cs-transform__icon svg { width: 30px; height: 30px; }
}

/* ---------- Dark duo cells (what X thought vs found) ---------- */
.cs-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.cs-cell-dark { background: var(--c-ink-800); padding: 64px; }
.cs-cell-dark h3 {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: -0.4px;
  color: #fff;
  margin: 0 0 16px;
}
.cs-cell-dark h3 b { font-weight: 700; }
.cs-cell-dark p, .cs-cell-dark li {
  font-size: 18px;
  font-weight: 400;
  line-height: 23.4px;
  letter-spacing: -0.2px;
  color: #fff;
  margin: 0 0 27px;
}
.cs-cell-dark p:last-child { margin-bottom: 0; }
.cs-cell-dark li { margin: 0; }
.cs-cell-dark ol { padding-left: 40px; }
@media (max-width: 1024px) {
  .cs-cell-dark { padding: 48px 32px; }
  .cs-cell-dark h3 { padding-bottom: 16px; }
}
@media (max-width: 767px) {
  .cs-duo { grid-template-columns: 1fr; }
  .cs-cell-dark { padding: 48px 16px; }
  .cs-cell-dark h3 { padding-bottom: 16px; }
  .cs-cell-dark h3 { font-size: 25px; }
}

/* ---------- Brand logo panels ---------- */
.cs-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  background-color: var(--c-ink-800);
  background-size: cover;
  background-position: 50% 50%;
}
.cs-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #060606;
  opacity: 0.25;
}
.cs-panel--ov50::before { opacity: 0.5; }
.cs-panel--plain { background-color: #313440; }
.cs-panel--plain::before { display: none; }
.cs-panel--tall { min-height: 600px; }
.cs-panel img { position: relative; width: 495px; height: auto; }
@media (max-width: 767px) {
  .cs-panel, .cs-panel--tall { min-height: 215px; }
  .cs-panel img { width: 280px; }
}

/* gallery images */
.cs-gallery img { display: block; width: 100%; height: auto; }

/* view live website card */
/* view-live bar: match the live site — 32px padding and flush with the gallery
   above it (the cs-stack leaves a 2px gap; -2px pulls the bar tight) */
.cs-visit { background: var(--c-ink-800); padding: 32px 16px; text-align: center; }

/* ---------- CTA bands + field notes ---------- */
.cs-cta { background: var(--c-gray-150); padding: 48px 64px 80px; }
.cs-cta__inner {
  max-width: 999px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.cs-cta__text { flex: 0 0 66.7%; }
.cs-cta__text p {
  max-width: 586px;
  font-size: 18px;
  font-weight: 400;
  line-height: 23.4px;
  letter-spacing: -0.2px;
  color: var(--c-text);
  margin: 0;
}
.cs-cta__btn { flex: 1; text-align: center; }
.cs-note { max-width: 666px; margin: 0 auto; }
.cs-note p {
  font-size: 18px;
  font-weight: 400;
  line-height: 23.4px;
  letter-spacing: -0.2px;
  color: var(--c-text);
  margin: 0;
}
.cs-note--italic p { font-style: italic; }
@media (max-width: 767px) {
  .cs-cta { padding: 64px 16px 96px; }
  .cs-cta__inner { flex-direction: column; gap: 24px; }
  .cs-cta__text { flex: none; }
}

/* ---------- Proof index hero tweaks ---------- */
.hero--proof .hero__content { padding: 0 0 48px; }
.hero--proof .hero__title { margin: 16px 0 32px; }
.hero--proof .hero__promise { margin: 0; }
.hero--proof .btn-wrap { margin-top: 32px; }

/* ---------- Proof index case rows ---------- */
.proof-row { background: var(--c-gray-150); padding: 32px; }
.proof-row__card {
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
  padding: 96px 48px;
  background-color: var(--c-ink-800);
  background-size: cover;
  background-position: 50% 50%;
  background-attachment: fixed;
}
.proof-row__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.65;
}
.proof-row__card > * { position: relative; }
/* picture area (content, excluding the card's padding) = 327px min, text
   vertically centred for breathing room; keeps all five bands the same height */
.proof-row__content {
  max-width: 783px;
  min-height: 327px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.proof-row__title {
  font-family: var(--f-display);
  font-size: 50px;
  font-weight: 400;
  line-height: 1.1em;
  letter-spacing: -1.3px;
  text-transform: capitalize;
  color: #fff;
  margin: 16px 0 32px;
}
.proof-row__title b { font-weight: 700; }
.proof-row__text {
  font-size: 18px;
  font-weight: 400;
  line-height: 23.4px;
  letter-spacing: -0.2px;
  color: #fff;
  margin: 0;
}
.proof-row .link-btn { margin-top: 16px; padding-left: 8px; }
@media (max-width: 1024px) {
  .proof-row__card { padding: 48px 32px; }
  .cs-cta { padding: 64px 32px 120px; }
  .proof-row__title { font-size: 45px; }
}
@media (max-width: 767px) {
  .proof-row { padding: 32px 16px; }
  /* iOS breaks fixed backgrounds: fall back to scroll on phones */
  .proof-row__card { padding: 64px 16px; background-attachment: scroll; }
  .proof-row__title { font-size: 30px; }
}
/* proof hero uses the shared .hero lion (lion1, 570px) + overlay — Template A.
   See HERO-OVERLAYS.md in the build source root for the hero-overlay reference. */

/* tight heading+body pairs (work delivered) */
/* work-delivered heading pairs with the dark flush body below it, so it is
   also dark with light text (matches the live site) */
.cs-head--flush { padding-bottom: 0; background: var(--c-ink-800); }
.cs-head--flush .h2-title { color: #fff; }
.cs-body-card--flush { padding-top: 12px; }

/* result paragraph inside dark result head */
.cs-result-p {
  font-size: 24px; font-weight: 400; line-height: 28.8px; letter-spacing: -0.5px;
  color: #fff;
  max-width: 829px;
  margin: 16px 0 0;
}
/* tight numbered list in duo cells */
.cs-duo-intro { margin-bottom: 27px; }
.cs-cell-dark .cs-duo-list { padding-left: 25px; margin: 0; }
.cs-cell-dark .cs-duo-list li { margin: 0; }
.cs-practice .cell { padding: 64px; background: var(--c-ink-800); }
.cs-practice .cell, .cs-practice .cell__title, .cs-practice .cell b, .cs-practice .cell p { color: #fff; }
.cs-practice .cell p { font-size: 18px; line-height: 23.4px; letter-spacing: -0.2px; }
@media (max-width: 1024px) { .cs-practice .cell { padding: 48px 32px; } }
@media (max-width: 767px) { .cs-practice .cell { padding: 40px 16px; } }
/* flush body card is the dark lead summary on case studies */
.cs-body-card--flush { background: var(--c-ink-800); }
.cs-body-card--flush p { color: #fff; font-size: 24px; line-height: 28.8px; letter-spacing: -0.5px; }
.h2--narrow { max-width: 829px; }
.hero--proof ~ .stats, .hero--proof + .stats { padding-top: 32px; }

/* italic field notes sit directly on the gray band */
.cs-note-band { padding: 48px 64px; }
@media (max-width: 1024px) { .cs-note-band { padding: 64px 32px; } }
@media (max-width: 767px) { .cs-note-band { padding: 48px 16px; } }