/* ═══════════════════════════════════════════════════════════
   casestudy.css: every layout and type rule for the case study
   pages (/casestudies/[slug]/index.php). Linked right after
   /style.css and /assets/css/brief.css by the shared renderer
   (/includes/case-study/render.php).

   Pages hold content only. The colour hooks below are custom
   properties that each page sets from its $cs['tokens'] array:
     --cs-accent          breadcrumb hover (and the fallback for the four below)
     --cs-tagline         hero tagline
     --cs-role            typography role, build card label
     --cs-link            meta row links
     --cs-badge           Context badge (e.g. "EN / FR")
     --cs-dark            hero, wide image and motion backdrop
     --cs-testimonial     testimonial box (falls back to --cs-dark)
     --cs-quote-eyebrow   testimonial eyebrow colour
     --cs-quote-role      testimonial role colour
     --cs-logo-bg / --cs-logo-bg-night   logo panel (Day / Night)
     --cs-clients-font    font for the Selected Clients names
   Per element: --sw-bg / --sw-fg (swatches) and --num / --num-night
   (deliverable and impact numbers) are written inline by the renderer.
   A page's $cs['css'] is for Day / Night contrast overrides only.
═══════════════════════════════════════════════════════════ */

/* ── IvyOra headings (case study scope) ── */
:root {
  --font-heading: 'ivyora-display', serif;
  --font-display: 'ivyora-display', serif;
}

/* ── Footer: exposure fade and next case study cover ── */
.site-footer {
  overflow: clip; isolation: isolate;
  border-radius: 0 0 var(--shell-radius) var(--shell-radius);
}
.site-footer .fr {
  opacity: var(--p, 0);
  transform: translateY(calc((1 - var(--p, 0)) * 18px));
  filter: blur(calc((1 - var(--p, 0)) * 16px));
  will-change: opacity, transform, filter;
}
.footer-next-img {
  position: absolute; inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, rgba(2,8,20,0.62) 0%, rgba(2,8,20,0.80) 100%),
    var(--next-img);
  background-size: cover;
  background-position: center;
  opacity: var(--pm, 0);
  transform: scale(calc(1.05 - 0.05 * var(--pm, 0)));
  transition: opacity 0.5s linear;
  will-change: opacity, transform;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .footer-cta-heading em {
    background-image:
      radial-gradient(circle 200px at var(--wrd-x, 50%) var(--wrd-y, 50%),
        rgba(255, 92,  0, var(--wrd-reveal, 0)) 0%,
        rgba(255,150, 40, calc(var(--wrd-reveal, 0) * 0.85)) 26%,
        rgba(255,200,120, calc(var(--wrd-reveal, 0) * 0.55)) 46%,
        rgba(255,235,205, calc(var(--wrd-reveal, 0) * 0.25)) 62%,
        rgba(255,255,255, 0) 76%),
      linear-gradient(#fff, #fff);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
/* "Start your Project" footer (pages with no Next Case Study): smoke and ghosted mark */
#footer-smoke {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: -2;
  opacity: var(--pm, 0); transition: opacity 0.4s linear;
}
.footer-mark-field {
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1; overflow: clip;
}
.footer-mark {
  position: absolute; top: 50%; left: 74%;
  transform: translate(-50%, -50%); width: 700px; height: auto;
}
.footer-mark path {
  fill: none; stroke: #fff;
  stroke-width: 1.25px; vector-effect: non-scaling-stroke;
}
.footer-mark--base { opacity: calc(0.10 * var(--pm, 0)); }
.footer-mark--lift {
  opacity: calc(0.55 * var(--fmk-reveal, 0) * var(--pm, 0));
  -webkit-mask-image: radial-gradient(circle 320px at var(--fmk-x, 50%) var(--fmk-y, 50%), #000 0%, rgba(0,0,0,0.5) 46%, transparent 74%);
  mask-image: radial-gradient(circle 320px at var(--fmk-x, 50%) var(--fmk-y, 50%), #000 0%, rgba(0,0,0,0.5) 46%, transparent 74%);
  transition: opacity 0.6s var(--ease);
}
.footer-mark--lift path { stroke: var(--brand-orange); }
@media (max-width: 900px) { .footer-mark-field, #footer-smoke { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .site-footer .fr { opacity: 1; transform: none; filter: none; }
  .footer-next-img { transform: none; }
  .footer-mark--lift, #footer-smoke { display: none; }
}

/* ── Core layout ── */
.cs-wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }

/* ── Hero ── */
.cs-hero { padding: 160px 0 0; text-align: center; }
.cs-breadcrumb { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-family: var(--font-nav); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; color: var(--section-text, #888); margin-bottom: 1rem; }
.cs-breadcrumb a { color: inherit; text-decoration: none; }
.cs-breadcrumb a:hover { color: var(--cs-accent); }
.cs-breadcrumb .cs-bc-active { font-weight: 700; color: var(--section-text-strong); }
.cs-tagline { font-family: var(--font-nav); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cs-tagline, var(--cs-accent)); margin: 0 0 0.75rem; }
.cs-title { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; color: var(--section-text-strong); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 3rem; }
.cs-hero-img-wrap { width: 570px; max-width: 90%; margin: 0 auto; border-radius: 20px; overflow: hidden; will-change: width, border-radius; }
.cs-hero-img-inner { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cs-dark); }
.cs-hero-img-inner img, .cs-hero-img-inner video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Spacing and type on the global tokens (style.css) ──
   --section-gap (160 / 120 at 900 / 96 at 600) between sections; dividers and
   the swatch band pay --section-half on each side. Body copy uses --p and
   --leading; eyebrows match the site eyebrow (12px / 500 / 8px tracking). */

/* ── Section eyebrows ── */
.cs-context-eyebrow,
.cs-images-eyebrow,
.cs-deliverables-eyebrow,
.cs-type-eyebrow,
.cs-impact-eyebrow,
.cs-clients-eyebrow,
.cs-build-eyebrow {
  font-family: var(--font-nav); font-size: 12px; font-weight: 500; letter-spacing: 8px; text-transform: uppercase; color: var(--section-eyebrow); margin: 0 0 2rem;
}
.cs-images-eyebrow { margin: 0 0 1.5rem; }
/* Testimonial eyebrow: same type, coloured for the dark box */
.cs-testimonial-eyebrow { font-family: var(--font-nav); font-size: 12px; font-weight: 500; letter-spacing: 8px; text-transform: uppercase; margin: 0 0 2.5rem; color: var(--cs-quote-eyebrow, rgba(255,255,255,0.5)); }

/* ── Context ── */
.cs-context { padding: var(--section-gap) 0 0; } /* hero image to Context */
.cs-bilingual-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-nav); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em; color: var(--cs-badge, var(--cs-accent)); border: 1px solid currentColor; border-radius: 999px; padding: 0.3rem 0.85rem; margin-bottom: 2rem; opacity: 0.75; }
.cs-meta { display: flex; gap: 3rem; margin-bottom: 2.5rem; }
.cs-meta-label { font-family: var(--font-nav); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--section-text); opacity: 0.5; margin: 0 0 0.3rem; }
.cs-meta-value { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--section-text-strong); margin: 0; }
.cs-meta-value a { color: var(--cs-link, var(--cs-accent)); text-decoration: none; }
.cs-body { font-family: var(--font-body); font-size: var(--p); font-weight: 300; color: var(--section-text); line-height: var(--leading); margin: 0 0 1.5rem; }
.cs-body-label { font-family: var(--font-nav); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--section-text); opacity: 0.5; margin: 2.25rem 0 0.6rem; }
.cs-read-more { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-nav); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--section-text-strong); text-decoration: none; border: 1px solid var(--hairline); border-radius: 999px; padding: 0.5rem 1rem; transition: border-color 0.2s; }
.cs-read-more:hover { border-color: var(--section-text-strong); }
button.cs-read-more { background: none; cursor: pointer; margin: 0; line-height: inherit; -webkit-appearance: none; appearance: none; }
.cs-body-extended { display: none; }
.cs-body-extended.is-open { display: block; }

/* ── Selected Clients (optional, right after Context) ──
   Own section: full gap after Context, half before the swatch band or divider. */
.cs-clients { max-width: 1080px; margin: 0 auto; padding: var(--section-gap) var(--gutter) var(--section-half); text-align: center; }
.cs-clients-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2rem; }
.cs-client-name { font-family: var(--cs-clients-font, var(--font-heading)); font-size: clamp(1.5rem, 3vw, 2.5rem); letter-spacing: 0.06em; color: var(--section-text-strong); opacity: 0.25; transition: opacity 0.2s; }
.cs-client-name:hover { opacity: 1; }

/* ── Logo panel (optional): one image, or a Day and a Night version ── */
.cs-logo-panel { margin: var(--section-gap) 0 0; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 6vw, 5rem); border-radius: 20px; background: var(--cs-logo-bg, #fff); display: flex; justify-content: center; }
body[data-theme="dusk"] .cs-logo-panel { background: var(--cs-logo-bg-night, #1f1f1e); }
.cs-logo { display: block; width: auto; max-width: min(100%, 520px); max-height: 400px; height: auto; object-fit: contain; }
.cs-logo--night { display: none; }
body[data-theme="dusk"] .cs-logo--day { display: none; }
body[data-theme="dusk"] .cs-logo--night { display: block; }

/* ── Brand swatch band (colours come from --sw-bg / --sw-fg) ── */
.cs-brand-band { margin: var(--section-half) 0; }
/* Swatches straight after Context are their own section: full gap.
   After the Logo or Clients they belong to the same brand section: half gap (approved on RTN). */
.cs-context + .cs-brand-band { margin-top: var(--section-gap); }
.cs-logo-wrap + .cs-brand-band,
.cs-clients + .cs-brand-band { margin-top: var(--section-half); }
.cs-brand-band-inner { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); display: flex; gap: 1rem; }
.cs-brand-swatch { flex: 1; min-width: 0; border-radius: 14px; padding: 2rem; display: flex; flex-direction: column; justify-content: flex-end; min-height: 120px; background: var(--sw-bg); color: var(--sw-fg, #fff); }
.cs-brand-swatch-label { font-family: var(--font-nav); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 0.2rem; }
.cs-brand-swatch-hex { font-family: var(--font-nav); font-size: 11px; font-weight: 400; letter-spacing: 0.04em; opacity: 0.7; margin: 0; }
/* Swatches let their words break so narrow screens never scroll sideways */
.cs-brand-swatch-label, .cs-brand-swatch-hex { overflow-wrap: break-word; }
/* A swatch that matches the canvas gets a hairline edge (renderer adds --edge) */
.cs-brand-swatch--edge { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
body[data-theme="dusk"] .cs-brand-swatch--edge-night { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16); }

/* ── Divider ── */
.cs-divider { max-width: 1080px; margin: var(--section-half) auto; padding: 0 var(--gutter); height: 1px; background: var(--hairline); }
body[data-theme="dusk"] .cs-divider { background: rgba(255,255,255,0.07); }

/* ── Cards: deliverables, impact, typography, build (Night raised box #1f1f1e) ── */
.cs-deliverable, .cs-stat, .cs-type-card, .cs-build-card { border: 1px solid rgba(0,0,0,0.08); border-radius: 16px; transition: background 1.2s var(--ease); }
body:not([data-theme]) .cs-deliverable, body:not([data-theme]) .cs-stat,
body:not([data-theme]) .cs-type-card, body:not([data-theme]) .cs-build-card { background: #fff; border-color: transparent; }
body[data-theme="dusk"] .cs-deliverable, body[data-theme="dusk"] .cs-stat,
body[data-theme="dusk"] .cs-type-card, body[data-theme="dusk"] .cs-build-card { background: #1f1f1e; border-color: transparent; }

/* ── Gallery: rows of a two-column grid, wide images and phone trios ── */
.cs-gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-radius: 20px; overflow: hidden; margin-bottom: 1.5rem; background: rgba(0,0,0,0.04); }
body[data-theme="dusk"] .cs-gallery-grid { background: #1f1f1e; }
.cs-gallery-grid > img { width: 100%; height: 280px; object-fit: cover; display: block; background: rgba(0,0,0,0.06); }
body[data-theme="dusk"] .cs-gallery-grid > img { background: #252523; }
/* An odd last image takes the full row instead of leaving a hole */
.cs-gallery-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Logo tile inside the grid: contained mark on a brand colour */
.cs-gallery-tile { display: flex; align-items: center; justify-content: center; height: 280px; background: var(--tile-bg, var(--cs-dark)); }
.cs-gallery-tile img { height: 100px; width: auto; max-width: 80%; object-fit: contain; display: block; }
.cs-gallery-wide { border-radius: 20px; overflow: hidden; margin-bottom: 1.5rem; aspect-ratio: 16 / 9; background: var(--cs-dark); }
.cs-gallery-wide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-gallery-phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.cs-gallery-phones img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; display: block; background: rgba(0,0,0,0.06); }
body[data-theme="dusk"] .cs-gallery-phones img { background: #252523; }

/* ── Motion ── */
.cs-motion { border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--cs-dark); position: relative; }
.cs-motion + .cs-motion { margin-top: 1.5rem; }
.cs-motion video, .cs-motion iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }

/* ── The Build (optional, right after Motion) ── */
.cs-build-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cs-build-card { padding: 2.5rem 2rem; }
.cs-build-card-label { font-family: var(--font-nav); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cs-role, var(--cs-accent)); margin: 0 0 0.75rem; }
.cs-build-card-title { font-family: var(--font-heading); font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-weight: 400; color: var(--section-text-strong); letter-spacing: -0.01em; margin: 0 0 0.75rem; transition: color 1.2s var(--ease); }
.cs-build-card-body { font-family: var(--font-body); font-size: var(--p); font-weight: 300; color: var(--section-text); line-height: var(--leading); margin: 0; transition: color 1.2s var(--ease); }
.cs-build-card-body code { font-size: 0.8em; background: rgba(0,0,0,0.06); padding: 0.1em 0.4em; border-radius: 4px; }
body[data-theme="dusk"] .cs-build-card-body code { background: rgba(255,255,255,0.08); }

/* ── Impact (numbers count up when they are numeric) ── */
.cs-impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.cs-stat { padding: 2.5rem 2rem; }
.cs-stat-number { display: block; font-family: var(--font-heading); font-size: clamp(3rem, 6vw, 5rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1; margin-bottom: 1.25rem; color: var(--num, var(--section-text-strong)); transition: color 1.2s var(--ease); }
.cs-stat-label { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--section-text-strong); margin: 0 0 0.35rem; transition: color 1.2s var(--ease); }
.cs-stat-desc { font-family: var(--font-body); font-size: var(--p); font-weight: 300; color: var(--section-text); line-height: var(--leading); margin: 0; transition: color 1.2s var(--ease); }

/* ── Deliverables ── */
.cs-deliverables-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.cs-deliverable { padding: 2.5rem 2rem; }
.cs-deliverable-num { display: block; font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1; margin-bottom: 0.75rem; color: var(--num, var(--section-text-strong)); }
.cs-deliverable-label { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--section-text-strong); margin: 0 0 0.35rem; }
.cs-deliverable-desc { font-family: var(--font-body); font-size: var(--p); font-weight: 300; color: var(--section-text); line-height: var(--leading); margin: 0; transition: color 1.2s var(--ease); }
/* Night contrast: numbers in a dark brand colour get --num-night (renderer) */
body[data-theme="dusk"] .cs-deliverable-num,
body[data-theme="dusk"] .cs-stat-number { color: var(--num-night, var(--num, var(--section-text-strong))); }

/* ── Typography (client typefaces are set inline per card) ── */
.cs-type-section { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }
.cs-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cs-type-card { padding: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.cs-type-specimen { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; color: var(--section-text-strong); }
.cs-type-meta { display: flex; flex-direction: column; gap: 0.35rem; }
.cs-type-name { font-family: var(--font-nav); font-size: 12px; font-weight: 700; color: var(--section-text-strong); margin: 0; }
.cs-type-role { font-family: var(--font-nav); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-role, var(--cs-accent)); margin: 0; }
.cs-type-desc { font-family: var(--font-body); font-size: var(--p); font-weight: 300; color: var(--section-text); line-height: var(--leading); margin: 0; transition: color 1.2s var(--ease); }
.cs-type-sample { font-size: 12px; color: var(--section-text); opacity: 0.5; letter-spacing: 0.04em; margin: 0; }

/* ── Testimonial ── */
.cs-testimonial-section { background: var(--cs-testimonial, var(--cs-dark)); border-radius: 24px; padding: 4rem; max-width: 1080px; margin: 0 auto; }
/* Night: a near-black box matches the page background, give it an edge */
body[data-theme="dusk"] .cs-testimonial-section { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
.cs-testimonial-quote { font-family: var(--font-heading); font-size: clamp(1.3rem, 2.2vw, 2rem); font-weight: 300; color: #fff; line-height: 1.45; letter-spacing: -0.01em; margin: 0 0 2.5rem; max-width: 820px; }
.cs-testimonial-author { display: flex; align-items: center; gap: 1.25rem; }
.cs-testimonial-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,0.1); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 1.4rem; font-weight: 400; color: rgba(255,255,255,0.3); }
.cs-testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-testimonial-name { font-family: var(--font-nav); font-size: 14px; font-weight: 600; color: #fff; margin: 0 0 0.2rem; }
.cs-testimonial-role { font-family: var(--font-nav); font-size: 0.78rem; font-weight: 400; color: var(--cs-quote-role, rgba(255,255,255,0.6)); margin: 0; }

/* ── All Work ── */
.cs-all-work { text-align: center; padding-bottom: 1.5rem; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .cs-hero { padding-top: 120px; }
  .cs-meta { flex-direction: column; gap: 1rem; }
  .cs-deliverables-grid, .cs-impact-grid, .cs-build-grid, .cs-type-grid { grid-template-columns: 1fr; }
  .cs-gallery-phones { grid-template-columns: 1fr; }
  .cs-testimonial-section { padding: 2.5rem 1.5rem; }
  .cs-brand-band-inner { flex-wrap: wrap; }
  /* Two swatches per row on phones (an odd last swatch spans the full row) */
  .cs-brand-swatch { flex: 1 1 calc(50% - 0.5rem); min-height: 96px; padding: 1.5rem; }
}

/* Mobile legibility: no text under 11px */
@media (max-width: 767px) {
  .cs-breadcrumb, .cs-meta-label { font-size: 11px; }
  /* Long typeface names (e.g. "DeValencia") must not push the page wider */
  .cs-type-card { min-width: 0; }
  .cs-type-specimen, .cs-type-sample { overflow-wrap: anywhere; }
}