/* Case study pages (work/*.html, tools/case_page.py): a full-bleed hero with the site itself behind
   the title, a glass bar with the project details, the brief in two tabs (before and after
   screenshots), the result as stat cards (css/stats.css), the client's words as a cinematic
   full-bleed line, the call to action in a blue box and the next case study. Empty slots are dashed
   [placeholders] on localhost and hidden on the live site. */

/* ---------- placeholders: a slot still waiting for content (tools/CASE-STUDY-TEMPLATE.md) ---------- */
html:not([data-local]) .cs-ph, html:not([data-local]) .cs-ph-sec { display: none !important; }
.cs-ph { display: inline-block; padding: 1px 8px; border-radius: 7px; background: rgba(255, 182, 72, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 182, 72, 0.45); color: #ffbe5c; font-style: normal; font-weight: 500; letter-spacing: 0; }
[data-theme="light"] .cs-ph { background: rgba(255, 160, 40, 0.1); color: #9a5600; }


/* ---------- the hero, full bleed: the site as the background, dark from the left ---------- */
.cs-hero { position: relative; overflow: hidden; isolation: isolate; display: flex; min-height: clamp(600px, 50vw, 760px); background: #04122a; }
.cs-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 70% top); animation: csBg 1.6s var(--m-ease, var(--ease-out)) both; }
@keyframes csBg { from { opacity: 0; scale: 1.06; } }
/* a narrower photo (hero.side): on the right, its left edge melting into the navy */
.cs-hero--side .cs-hero__bg { left: auto; width: 62%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%); }
.cs-hero--side .cs-hero__shade { background: linear-gradient(90deg, #04122a 0%, rgba(4, 18, 42, 0.92) 38%, rgba(4, 18, 42, 0.5) 66%, rgba(4, 18, 42, 0.3) 100%), linear-gradient(0deg, rgba(4, 18, 42, 0.85), transparent 45%); }
.cs-hero__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, #04122a 0%, rgba(4, 18, 42, 0.97) 34%, rgba(4, 18, 42, 0.8) 62%, rgba(4, 18, 42, 0.5) 100%), linear-gradient(0deg, rgba(4, 18, 42, 0.85), transparent 45%); }
.cs-hero__in { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding-top: 140px; padding-bottom: clamp(56px, 6vw, 90px); }
.cs__back { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 10px; border-radius: 12px; background: rgba(4, 14, 32, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.85); font-size: 14.5px; font-weight: 500; transition: color 0.2s, background-color 0.2s; }
.cs__back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s var(--ease-out); }
.cs__back:hover { color: #fff; background: rgba(4, 14, 32, 0.75); }
.cs__back:hover svg { transform: translateX(-3px); }
.cs-hero__copy { max-width: 640px; }
.cs-hero__logo { display: block; width: auto; height: clamp(40px, 3.6vw, 52px); margin-bottom: clamp(22px, 2.4vw, 32px); }
.cs-hero__logo--ph { width: fit-content; height: auto; font-size: 14px; }
.cs__kind { color: #7fd3ff; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.cs__title { margin-top: 12px; color: #fff; font-size: clamp(42px, 5vw, 76px); font-weight: 600; line-height: 0.98; letter-spacing: -0.05em; text-wrap: balance; }
.cs__lede { max-width: 46ch; margin-top: 18px; color: rgba(255, 255, 255, 0.82); font-size: 18px; line-height: 1.6; text-wrap: pretty; }
.js .cs-hero__in > * { animation: pRise 0.9s var(--m-ease, var(--ease-out)) both; }
.js .cs-hero__in > :nth-child(2) { animation-delay: 0.08s; }
/* the header's logo stays white over the dark hero in the light theme too (data-over-hero, set
   by the page's script) */
[data-theme="light"][data-over-hero] .site-header { --logo-ink: #fff; }

/* ---------- the details: a glass bar that sits over the bottom edge of the hero, plain text,
   thin lines between ---------- */
.cs-strip { position: relative; z-index: 2; margin-top: -52px; }
.cs-hero:has(+ .cs-strip) .cs-hero__in { padding-bottom: clamp(96px, 9vw, 130px); }
.cs__facts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 24px 30px; border-radius: 22px; background: rgba(6, 20, 44, 0.72); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.cs__facts > div { padding: 0 28px; box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.1); }
.cs__facts > div:first-child { padding-left: 0; box-shadow: none; }
/* the label small and quiet, the value carries the weight */
.cs__facts dt { color: var(--text-4); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.cs__facts dd { margin-top: 8px; color: var(--text-1); font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
[data-theme="light"] .cs__facts { background: rgba(255, 255, 255, 0.82); box-shadow: inset 0 0 0 1px var(--line-card), 0 30px 60px -36px rgba(10, 40, 90, 0.4); }
[data-theme="light"] .cs__facts > div { box-shadow: inset 1px 0 0 var(--line-card); }
[data-theme="light"] .cs__facts > div:first-child { box-shadow: none; }
.cs__live { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); }
.cs__live svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- the brief: the client in one line, then two columns like the homepage's
   About section: the browser card on the left (no panel behind it), the toggle and the text on the
   right. The problem shows the old site dimmed, the solution the new one at full colour. The two
   screenshots and the two texts each share one grid cell and crossfade, so nothing jumps. ---------- */
.nowrap { white-space: nowrap; }
.cs__k { color: var(--text-4); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.cs__brief { margin-top: 110px; }
/* the head set left like the result's: the small label, then the client line as the headline */
.cs__about { max-width: 38ch; margin-top: 14px; color: var(--text-1); font-size: clamp(28px, 3vw, 42px); font-weight: 600; line-height: 1.18; letter-spacing: -0.035em; text-wrap: balance; }

.cs__split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: center; margin-top: clamp(44px, 5vw, 64px); }
.cs__shots, .cs__panels { display: grid; }
.cs__shot, .cs__panel { grid-area: 1 / 1; }
.cs__panel { align-self: start; }
.cs__panel-h { color: var(--text-1); font-size: clamp(26px, 2.4vw, 34px); font-weight: 600; line-height: 1.15; letter-spacing: -0.035em; text-wrap: balance; }
.cs__panel p { margin-top: 16px; color: var(--text-3); font-size: clamp(17px, 1.35vw, 18.5px); line-height: 1.7; text-wrap: pretty; }
.cs__tabs { margin-bottom: 26px; }

/* the crossfade, once the script runs (without it both show, one under the other) */
.cs__split.is-ready .cs__shot, .cs__split.is-ready .cs__panel { transition: opacity 0.5s var(--ease), translate 0.7s var(--m-ease, var(--ease-out)), visibility 0s; }
.cs__split.is-ready[data-on="problem"] .cs__shot--after, .cs__split.is-ready[data-on="solution"] .cs__shot--before,
.cs__split.is-ready .cs__panel[aria-hidden="true"] { opacity: 0; visibility: hidden; translate: 0 14px; transition: opacity 0.35s var(--ease), translate 0.35s var(--ease), visibility 0s 0.35s; }
html:not(.js) .cs__panel + .cs__panel, html:not(.js) .cs__shot + .cs__shot { grid-area: auto; margin-top: 24px; }
/* the old site a little grey and dim, so the new one reads brighter */
.cs__shot--before .cs-win > img { filter: grayscale(0.6) brightness(0.8); }
/* no before yet: on the live site the new one stays for both tabs */
html:not([data-local]) .cs__split--nobefore .cs__shot--after { opacity: 1 !important; visibility: visible !important; translate: none !important; }

/* ---------- a browser window around a screenshot (the before and after in the brief) ---------- */
.cs-win { overflow: hidden; border-radius: 18px; background: #0b1424; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -50px rgba(0, 0, 0, 0.9); }
.cs-win__bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; background: linear-gradient(180deg, #16243a, #0f1b2e); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06); }
.cs-win__bar i { width: 10px; height: 10px; border-radius: 50%; }
.cs-win__bar i:nth-child(1) { background: #ff5f57; }
.cs-win__bar i:nth-child(2) { background: #febc2e; }
.cs-win__bar i:nth-child(3) { background: #28c840; }
.cs-win__url { display: inline-flex; align-items: center; gap: 7px; margin: 0 auto; padding: 5px 14px; border-radius: 9px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.72); font-size: 12.5px; font-weight: 500; }
.cs-win__url svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; }
.cs-win > img { display: block; width: 100%; height: auto; }
/* the empty before: a dashed screen the size of the after */
.cs-win--empty { box-shadow: inset 0 0 0 1.5px rgba(255, 182, 72, 0.35); }
.cs-win__empty { display: grid; place-items: center; aspect-ratio: 7 / 4; }
[data-theme="light"] .cs-win { background: #fff; box-shadow: inset 0 0 0 1px var(--line-card), 0 40px 80px -56px rgba(10, 60, 160, 0.5); }
[data-theme="light"] .cs-win__bar { background: linear-gradient(180deg, #f6f9fd, #eaf0f8); box-shadow: inset 0 -1px 0 rgba(6, 30, 66, 0.08); }
[data-theme="light"] .cs-win__url { background: rgba(6, 30, 66, 0.06); color: var(--text-2); }

/* ---------- the result: the homepage's stat cards (css/stats.css), as many as there are counts ---------- */
.cs__result { margin-top: 110px; padding: 0 var(--gutter); }   /* css/stats.css .stats drops the container padding */
.cs__result .stats__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); max-width: none; height: clamp(360px, 30vw, 440px); margin: 32px 0 0; }
.cs__result .stat--1 { height: 80%; }
.cs__result .stat--2 { height: 66%; }
.cs__result .stat--4 { height: 84%; }
/* the cards solid dark here, not frosted: the page already has the glass bar and the toggle */
.cs__result .stat { background: linear-gradient(180deg, #0c1d3a 0%, #081630 60%, #061127 100%); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 -20px 50px -30px rgba(0, 0, 0, 0.7); }
.cs__result .stat--hi { background: linear-gradient(180deg, #1668ff 0%, #0a4dff 45%, rgba(10, 77, 255, 0.35) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 30px 70px -30px rgba(10, 77, 255, 0.9); }
[data-theme="light"] .cs__result .stat { background: linear-gradient(180deg, #eef3fa, #e6edf7); box-shadow: inset 0 0 0 1px var(--line-card); }
[data-theme="light"] .cs__result .stat--hi { background: linear-gradient(180deg, #1668ff 0%, #0a4dff 45%, rgba(10, 77, 255, 0.35) 100%); box-shadow: 0 30px 70px -34px rgba(10, 77, 255, 0.6); }
.cs__result-h { margin-bottom: 8px; }
/* the numbers stand out: bigger, bright white fading to a light blue */
.cs__result .stat b { font-size: clamp(52px, 5.6vw, 80px); font-weight: 700; letter-spacing: -0.05em; background: linear-gradient(180deg, #ffffff 30%, #9cc4ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs__result .stat--hi b { background: none; color: #fff; text-shadow: 0 6px 30px rgba(0, 20, 90, 0.35); }
[data-theme="light"] .cs__result .stat b { background-image: linear-gradient(180deg, #071a33 30%, #2a5ea8 100%); }
[data-theme="light"] .cs__result .stat--hi b { background: none; color: #fff; }
/* a slot for a result the client shares: dark like the rest, the number dimmed (localhost only) */
.cs__result .stat--empty b { opacity: 0.35; }
.cs__result .stat--hi { height: 100%; }

/* ---------- the client's words: one cinematic line, full bleed on a dark gradient that picks up
   where the result cards fade out. The words light up as you scroll (js/pitch.js) and the key words
   turn blue. ---------- */
.cs__result { position: relative; z-index: 1; }
.cs-say { position: relative; margin-top: -140px; padding: 200px 0 100px; background: radial-gradient(ellipse 50% 45% at 50% 30%, rgba(10, 77, 255, 0.16), transparent 70%), linear-gradient(180deg, rgba(2, 8, 20, 0) 0%, #020814 30%, #020814 72%, rgba(2, 8, 20, 0) 100%); }
.cs-say__in { position: relative; text-align: center; }
.cs-say__q { max-width: 24ch; margin: 0 auto; font-size: clamp(30px, 4.2vw, 60px); line-height: 1.12; letter-spacing: -0.04em; text-wrap: balance; }
.cs-say__q.is-reading .mw__in { opacity: 0.2; transition: translate 0.95s var(--m-ease) calc(0.1s + var(--i) * 40ms), opacity 0.35s var(--ease); }
.cs-say__q.is-reading .mw__in.is-lit { opacity: 1; }
.cs-say__q .cs-say__hl .mw__in, .cs-say__q:not(.is-reading) .cs-say__hl { background-image: linear-gradient(180deg, #7fe0ff 0%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-say__who { display: inline-flex; align-items: center; gap: 12px; margin-top: 40px; text-align: left; }
.cs-say__who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
.cs-say__who b { display: block; color: var(--text-1); font-size: 16px; }
.cs-say__who i { display: block; color: var(--text-3); font-size: 14px; font-style: normal; }
[data-theme="light"] .cs-say { background: radial-gradient(ellipse 50% 45% at 50% 30%, rgba(10, 77, 255, 0.08), transparent 70%), linear-gradient(180deg, rgba(225, 236, 250, 0) 0%, #e3edfa 30%, #e3edfa 72%, rgba(225, 236, 250, 0) 100%); }
[data-theme="light"] [data-theme="light"] [data-theme="light"] .cs-say__q .cs-say__hl .mw__in, [data-theme="light"] .cs-say__q:not(.is-reading) .cs-say__hl { background-image: linear-gradient(180deg, #1668ff 0%, #0a5fd0 100%); }

/* ---------- the call to action, in the homepage's contained blue box ---------- */
.cs-cta-sec--gap { margin-top: 110px; }
html[data-local] .cs-cta-sec--gap { margin-top: 0; }
.cs-say__q--ph { font-size: 18px; }
.cs-cta { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 40px; margin-top: 40px; padding: clamp(32px, 4.4vw, 64px); border-radius: 28px; background: linear-gradient(140deg, #0a4dff 0%, #0b63f0 45%, #0d8dfa 78%, #18cdfd 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 40px 80px -40px rgba(10, 77, 255, 0.9); color: #fff; }
.cs-cta::before { content: ""; position: absolute; right: -6%; bottom: -30%; z-index: -1; width: min(40%, 380px); aspect-ratio: 827 / 1014; background: url(../assets/img/logo-mark.svg) center / contain no-repeat; filter: brightness(0) invert(1); opacity: 0.12; }
.cs-cta__line { max-width: 17ch; font-size: clamp(30px, 3.4vw, 50px); font-weight: 600; line-height: 1.06; letter-spacing: -0.04em; text-wrap: balance; }
.cs-cta__line span { color: rgba(255, 255, 255, 0.72); }
.cs-cta__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.cs-cta__link { color: rgba(255, 255, 255, 0.88); font-size: 15px; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.45); text-underline-offset: 4px; transition: color 0.2s; }
.cs-cta__link:hover { color: #fff; }

.cs-next { margin-top: 90px; margin-bottom: clamp(60px, 7vw, 100px); }
.cs-next a { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; align-items: center; gap: 28px; padding: 16px 28px 16px 16px; border-radius: 22px; transition: background-color 0.3s; }
.cs-next a:hover { background: rgba(255, 255, 255, 0.045); }
.cs-next__shot { aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--surface-sunken); }
.cs-next__shot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.9s var(--ease-out); }
.cs-next a:hover .cs-next__shot img { transform: scale(1.05); }
.cs-next i { display: block; color: var(--text-3); font-size: 14px; font-style: normal; }
.cs-next b { display: block; margin-top: 4px; color: var(--text-1); font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.cs-next a > svg { width: 30px; height: 30px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.45s var(--ease-out); }
.cs-next a:hover > svg { transform: translateX(6px); }

/* ---------- light theme ---------- */
[data-theme="light"] .cs-next a:hover { background: rgba(6, 30, 66, 0.04); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .cs__split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cs__result .stats__row { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; height: auto; }
}
@media (max-width: 767px) {
  .cs-hero { min-height: 600px; }
  .cs-hero__in { gap: 30px; padding-top: 104px; padding-bottom: 44px; }
  /* phones: the dark rises from the bottom, so the copy reads over any part of the site */
  .cs-hero__shade { background: linear-gradient(0deg, #04122a 0%, rgba(4, 18, 42, 0.95) 50%, rgba(4, 18, 42, 0.6) 80%, rgba(4, 18, 42, 0.45) 100%); }
  .cs-hero__bg { object-position: var(--pos-m, 30% top); }
  .cs-hero--side .cs-hero__bg { width: 100%; -webkit-mask-image: none; mask-image: none; }
  .cs-hero--side .cs-hero__shade { background: linear-gradient(0deg, #04122a 0%, rgba(4, 18, 42, 0.95) 50%, rgba(4, 18, 42, 0.6) 80%, rgba(4, 18, 42, 0.45) 100%); }
  .cs__title { font-size: clamp(36px, 10.4vw, 50px); }
  .cs-hero__logo { height: 34px; margin-bottom: 20px; }
  .cs__lede { font-size: 16.5px; }
  .cs-strip { margin-top: -36px; }
  .cs-hero:has(+ .cs-strip) .cs-hero__in { padding-bottom: 72px; }
  .cs__facts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; padding: 20px; border-radius: 18px; }
  .cs__facts > div, .cs__facts > div:first-child { padding: 0; box-shadow: none; }
  .cs__panel p { font-size: 16.5px; }
  .cs__split { margin-top: 36px; }
  .cs__about { font-size: 26px; }
  .cs__result .stat b { font-size: 46px; }
  .cs__brief, .cs__result { margin-top: 80px; }
  .cs-win { border-radius: 12px; }
  .cs-win__bar { height: 28px; gap: 5px; padding: 0 10px; }
  .cs-win__bar i { width: 7px; height: 7px; }
  .cs-win__url { padding: 3px 9px; font-size: 10.5px; }
  .cs-win__url svg { width: 9px; height: 9px; }
  .cs-say { margin-top: -90px; padding: 150px 0 70px; }
      .cs-cta { border-radius: 22px; }
  .cs-next a { grid-template-columns: 110px minmax(0, 1fr) auto; gap: 16px; padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-hero__bg, .js .cs-hero__in > * { animation: none !important; }
  .cs__split.is-ready .cs__shot, .cs__split.is-ready .cs__panel { transition: none !important; }
}