/* ==========================================================================
   Case study layout ("the brief"): skim in a minute, results first
   .ca-*  page sections   .co-*  shared kicker, section head, facts, value panel, next project
   ========================================================================== */

.co-wrap { max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.co-sec { padding-top: var(--s-10); }
.co-accent { color: var(--blue); }

.co-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; color: var(--blue-text); background: var(--blue-soft);
  padding: 8px 16px 8px 12px; border-radius: var(--r-pill);
  margin-bottom: var(--s-5);
}
.co-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent, var(--blue)); }

.co-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-5) var(--s-7); flex-wrap: wrap; margin-bottom: var(--s-7); }
.co-head__num { font-size: 15px; color: var(--blue-text); margin-bottom: var(--s-3); }
.co-title {
  font-size: clamp(36px, 4.6vw, 60px); font-weight: 500; line-height: 1.08;
  letter-spacing: var(--track-display); max-width: 14em;
}
.co-lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--n-600); max-width: 26em; }
.co-p { font-size: 17px; line-height: 1.6; color: var(--n-700); }

.co-tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.co-tags li { padding: 8px 14px; border-radius: var(--r-pill); background: var(--white); color: var(--n-700); font-size: 14px; line-height: 1; border: 1px solid var(--n-200); }

/* Facts card */
.co-facts { background: var(--white); border: 1px solid var(--n-200); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6); box-shadow: 0 30px 60px -40px rgba(16,18,35,.25); }
.co-facts div { display: grid; grid-template-columns: 110px 1fr; gap: var(--s-4); padding: 14px 0; border-bottom: 1px solid var(--n-200); }
.co-facts div:last-child { border-bottom: 0; }
.co-facts dt { font-size: 14px; color: var(--n-500); }
.co-facts dd { font-size: 15px; line-height: 1.5; color: var(--ink); }

/* Value panel: "have a similar problem?" */
.co-value {
  display: grid; grid-template-columns: 220px 1fr auto; align-items: center; gap: var(--s-6);
  padding: var(--s-7); border-radius: var(--r-xl); background: var(--blue-wash);
}
.co-value__mascot { width: 220px; margin: -40px 0 -48px; }
.co-value h2 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 500; line-height: 1.1; letter-spacing: var(--track-heading); margin-bottom: var(--s-4); }
.co-value ul { list-style: none; display: grid; gap: 10px; }
.co-value li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.5; color: var(--n-700); }
.co-value li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.co-value__actions { display: flex; flex-direction: column; gap: var(--s-3); }
.co-value__actions .btn { justify-content: center; }

/* Next project */
.co-next {
  display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: var(--s-6);
  margin-top: var(--s-9); padding: var(--s-4); border-radius: var(--r-xl); background: var(--n-100);
  transition: background-color .4s var(--ease-out);
}
.co-next:hover { background: var(--blue-wash); }
.co-next__text { padding: var(--s-5); }
.co-next__label { font-size: 15px; color: var(--n-500); margin-bottom: var(--s-3); }
.co-next__title { font-size: clamp(28px, 3.2vw, 42px); font-weight: 500; line-height: 1.1; letter-spacing: var(--track-heading); }
.co-next__title span { color: var(--blue); }
.co-next__media { aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; }
.co-next__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease-out); }
.co-next:hover .co-next__media img { scale: 1.04; }

/* ==========================================================================
   The brief
   ========================================================================== */
.ca-hero { padding-top: calc(var(--header-h) + var(--s-8)); display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s-8); align-items: end; }
.ca-hero__title { font-size: clamp(44px, 5.6vw, 76px); font-weight: 500; line-height: 1.04; letter-spacing: var(--track-display); margin-bottom: var(--s-5); }
.ca-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

.ca-cover { margin-top: var(--s-8); border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16 / 7.5; background: color-mix(in srgb, var(--accent) 16%, var(--white)); }
.ca-cover img { width: 100%; height: 100%; object-fit: cover; }

/* TL;DR */
.ca-tldr { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.ca-tldr article { padding: var(--s-6); border-radius: var(--r-lg); background: var(--blue-wash); }
.ca-tldr article:last-child { background: var(--blue); color: var(--white); }
.ca-tldr article:last-child .ca-tldr__k { color: rgba(255,255,255,.75); }
.ca-tldr article:last-child p { color: rgba(255,255,255,.92); }
.ca-tldr__k { font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-text); margin-bottom: var(--s-4); }
.ca-tldr h3 { font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: var(--track-title); margin-bottom: var(--s-3); }
.ca-tldr p { font-size: 16px; line-height: 1.55; color: var(--n-700); }

/* Numbers */
.ca-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--n-200); }
.ca-stats div { padding: var(--s-6) var(--s-5); border-left: 1px solid var(--n-200); }
.ca-stats div:first-child { border-left: 0; }
.ca-stats b { display: block; font-size: clamp(48px, 5vw, 68px); font-weight: 500; line-height: 1; letter-spacing: var(--track-display); color: var(--blue); margin-bottom: var(--s-3); }
.ca-stats span { font-size: 15px; line-height: 1.45; color: var(--n-600); }

/* Users + needs */
.ca-users { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--s-5); align-items: stretch; }
.ca-persona { position: relative; padding: var(--s-7) var(--s-6); border-radius: var(--r-xl); background: var(--ink); color: var(--white); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-6); }
.ca-persona__k { font-size: 15px; color: rgba(255,255,255,.6); margin-bottom: var(--s-3); }
.ca-persona__who { font-size: clamp(28px, 3vw, 40px); font-weight: 500; line-height: 1.12; letter-spacing: var(--track-heading); }
.ca-persona__brief { font-size: 20px; line-height: 1.45; color: rgba(255,255,255,.9); border-left: 3px solid var(--accent); padding-left: var(--s-4); }
.ca-persona__brief small { display: block; margin-top: var(--s-2); font-size: 13px; color: rgba(255,255,255,.55); }
.ca-needs { list-style: none; counter-reset: need; display: grid; gap: var(--s-2); }
.ca-needs li { counter-increment: need; display: grid; grid-template-columns: 48px 1fr; gap: var(--s-4); align-items: start; padding: var(--s-5); border-radius: var(--r-lg); background: var(--n-100); transition: background-color .35s var(--ease-out), translate .35s var(--ease-out); }
.ca-needs li:hover { background: var(--blue-wash); translate: 6px 0; }
.ca-needs li::before { content: "0" counter(need); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--white); color: var(--blue-text); font-size: 15px; font-weight: 500; }
.ca-needs b { display: block; font-size: 19px; font-weight: 500; margin-bottom: 4px; }
.ca-needs span { font-size: 15px; line-height: 1.5; color: var(--n-600); }

/* Process */
.ca-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); position: relative; }
.ca-steps::before { content: ""; position: absolute; left: 24px; right: 24px; top: 24px; height: 2px; background: var(--n-200); }
.ca-steps__line { position: absolute; left: 24px; right: 24px; top: 24px; height: 2px; background: var(--blue); transform-origin: 0 50%; }
.ca-steps li { position: relative; }
.ca-steps__dot { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: var(--white); font-size: 15px; font-weight: 500; margin-bottom: var(--s-5); box-shadow: 0 0 0 8px var(--white); }
.ca-steps__wk { font-size: 14px; color: var(--blue-text); margin-bottom: var(--s-2); }
.ca-steps h3 { font-size: 24px; font-weight: 500; letter-spacing: var(--track-title); margin-bottom: var(--s-3); }
.ca-steps p { font-size: 16px; line-height: 1.55; color: var(--n-600); margin-bottom: var(--s-4); }
.ca-figure { margin-top: var(--s-7); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--n-200); }
.ca-figure img { width: 100%; height: auto; }
.ca-figure figcaption { padding: var(--s-4) var(--s-5); font-size: 14px; color: var(--n-500); background: var(--n-100); }

/* Key decisions */
.ca-decisions { display: grid; gap: var(--s-5); }
.ca-decision { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s-4); padding: var(--s-4); border-radius: var(--r-xl); background: var(--blue-wash); }
.ca-decision:nth-child(even) { grid-template-columns: 1.2fr 1fr; }
.ca-decision:nth-child(even) .ca-decision__text { order: 2; }
.ca-decision__text { padding: var(--s-5); display: flex; flex-direction: column; justify-content: center; }
.ca-decision__n { font-size: 15px; color: var(--blue-text); margin-bottom: var(--s-3); }
.ca-decision h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; line-height: 1.15; letter-spacing: var(--track-heading); margin-bottom: var(--s-4); }
.ca-decision dl { display: grid; gap: var(--s-3); }
.ca-decision dt { font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--n-500); }
.ca-decision dd { font-size: 16px; line-height: 1.55; color: var(--n-700); }
.ca-decision__media { border-radius: var(--r-lg); overflow: hidden; min-height: 360px; background: color-mix(in srgb, var(--accent) 16%, var(--white)); }
.ca-decision__media img { width: 100%; height: 100%; object-fit: cover; }

/* Screens wall */
.ca-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-4); }
.ca-wall figure { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 10; background: var(--n-100); }
.ca-wall figure:nth-child(1), .ca-wall figure:nth-child(2) { grid-column: span 3; }
.ca-wall figure:nth-child(n+3) { grid-column: span 2; }
.ca-wall figure:nth-child(n+6) { grid-column: span 3; }
.ca-wall img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease-out); }
.ca-wall figure:hover img { scale: 1.04; }
.ca-flows { margin-top: var(--s-5); }

/* Testimonial */
.ca-quote { padding: var(--s-8) var(--s-7); border-radius: var(--r-xl); background: var(--ink); color: var(--white); }
.ca-quote__stars { color: #ffd23f; letter-spacing: 4px; margin-bottom: var(--s-5); }
.ca-quote blockquote { font-size: clamp(26px, 3vw, 40px); font-weight: 500; line-height: 1.25; letter-spacing: var(--track-heading); max-width: 26em; margin-bottom: var(--s-6); }
.ca-quote figcaption { display: flex; align-items: center; gap: var(--s-3); font-size: 15px; color: rgba(255,255,255,.7); }
.ca-quote figcaption b { color: var(--white); font-weight: 500; }
.ca-quote__av { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .co-value { grid-template-columns: 160px 1fr; }
  .co-value__mascot { width: 160px; margin: 0; }
  .co-value__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 860px) {
  .co-sec { padding-top: var(--s-9); }
  .co-head { margin-bottom: var(--s-6); }
  .co-facts { padding: var(--s-4) var(--s-5); }
  .co-facts div { grid-template-columns: 90px 1fr; }
  .co-value { grid-template-columns: 1fr; padding: var(--s-6) var(--s-5); }
  .co-value__mascot { width: 140px; }
  .co-value__actions .btn { flex: 1 1 auto; }
  .co-next { grid-template-columns: 1fr; padding: var(--s-3); }
  .co-next__media { order: -1; }
  .co-next__text { padding: var(--s-3); }

  .ca-hero { grid-template-columns: 1fr; gap: var(--s-6); padding-top: calc(var(--header-h) + var(--s-6)); }
  .ca-cover { aspect-ratio: 4 / 3; margin-top: var(--s-6); border-radius: var(--r-lg); }
  .ca-tldr, .ca-users, .ca-steps { grid-template-columns: 1fr; }
  .ca-steps::before, .ca-steps__line { display: none; }
  .ca-stats { grid-template-columns: 1fr 1fr; }
  .ca-stats div:nth-child(3) { border-left: 0; }
  .ca-stats div:nth-child(n+3) { border-top: 1px solid var(--n-200); }
  .ca-persona { padding: var(--s-6) var(--s-5); border-radius: var(--r-lg); }
  .ca-needs li { grid-template-columns: 40px 1fr; padding: var(--s-4); }
  .ca-needs li::before { width: 40px; height: 40px; }
  .ca-decision, .ca-decision:nth-child(even) { grid-template-columns: 1fr; padding: var(--s-3); border-radius: var(--r-lg); }
  .ca-decision:nth-child(even) .ca-decision__text { order: 0; }
  .ca-decision__media { order: -1; min-height: 240px; }
  .ca-decision__text { padding: var(--s-3); }
  .ca-wall { grid-template-columns: 1fr 1fr; }
  .ca-wall figure:nth-child(n) { grid-column: span 1; }
  .ca-wall figure:nth-child(1) { grid-column: span 2; }
  .ca-quote { padding: var(--s-6) var(--s-5); border-radius: var(--r-lg); }
}

/* The timeline line runs from the first dot to the last dot only */
.ca-steps::before, .ca-steps__line { right: calc((100% - 2 * var(--s-5)) / 3 - 24px); }

/* Screen wall: keep the last row full whatever the number of screens */
.ca-wall[data-n="6"] figure:nth-child(6) { grid-column: span 6; aspect-ratio: 21 / 9; }
@media (max-width: 860px) {
  .ca-wall[data-n="6"] figure:nth-child(6) { grid-column: span 2; aspect-ratio: 16 / 10; }
}

/* Tall figures (like a style guide) sit centred instead of filling the width */
.ca-figure--tall img { max-width: 620px; margin: 0 auto; padding: var(--s-6) var(--s-4) 0; }