/* =============================================================
   case-study.css  —  Flibbr-exact case-study styling, ported.
   Scoped under .cs-flibbr so Flibbr's design tokens (Source Serif 4 /
   Inter, warm-black ink, ink-violet accent, white paper) live as an
   island and never override the rest of the rahuljauhari.com theme
   (which keeps Sentient/Switzer + the cool/architectural palette).
   Styles transcribed verbatim from the Flibbr theme:
     tokens.css · typography.css · page-chassis.css · case-study-single.css · home.css
   Used by: single case_study template + the home "Recent case studies" block.
   ============================================================= */

/* ---------- token island ---------- */
.cs-flibbr{
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --ink:#141413; --ink-soft:#3a3936; --ink-quiet:#6e6c66;
  --paper:#ffffff; --paper-warm:#f5f5f5;
  --rule:#d1d1d1; --rule-soft:#ededed;
  --accent:#2a2566; --rust:#b8431f;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --measure:65ch; --max-w:1280px; --gutter:clamp(1rem,4vw,3rem);
  --motion-duration-ui:160ms; --motion-duration-content:280ms;
  --motion-ease-ui:cubic-bezier(0.25,0.46,0.45,0.94);
  --motion-ease-content:cubic-bezier(0.23,1,0.32,1);
  --motion-ok:1;
  background:var(--paper); color:var(--ink-soft);
  font-family:var(--sans); font-size:18px; line-height:1.6;
}
@media (prefers-reduced-motion:reduce){ .cs-flibbr{ --motion-duration-ui:0ms; --motion-duration-content:0ms; --motion-ok:0; } }
.cs-flibbr *{ box-sizing:border-box; }
.cs-flibbr section{ padding:0; position:static; }   /* neutralise RJ global section padding */
.cs-flibbr img{ max-width:100%; height:auto; display:block; }
.cs-flibbr .container{ max-width:var(--max-w); margin:0 auto; padding:0 var(--gutter); }

/* ---------- case header ---------- */
.cs-flibbr .case-header{ padding-block:var(--s-9) var(--s-6); border-bottom:1px solid var(--rule-soft); }
.cs-flibbr .case-header-kicker{ font-family:var(--sans); font-weight:600; font-size:11px; line-height:1; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); margin-bottom:var(--s-5); }
.cs-flibbr .case-header-kicker:has(+ .case-header-campaign){ margin-bottom:var(--s-2); }
.cs-flibbr .case-header-campaign{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:16px; line-height:1; color:var(--ink-soft); margin-bottom:var(--s-5); }
.cs-flibbr .case-header-headline{ margin:0 0 var(--s-5); max-width:22ch; font-family:var(--serif); font-weight:400; font-size:clamp(36px,5.5vw,68px); line-height:1.06; letter-spacing:-0.018em; color:var(--ink); }
.cs-flibbr .case-header-headline em{ font-style:italic; }
.cs-flibbr .case-header-meta{ font-family:var(--sans); font-size:13px; line-height:1.5; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:var(--s-3); padding-top:var(--s-4); border-top:1px solid var(--rule); max-width:80ch; }
.cs-flibbr .case-header-meta strong{ font-weight:600; color:var(--ink); }
.cs-flibbr .case-header-meta > * + *::before{ content:"·"; color:var(--ink-quiet); margin-right:var(--s-3); }
.cs-flibbr .case-header-awards{ margin-top:var(--s-5); font-family:var(--sans); font-weight:500; font-size:11px; line-height:1.4; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-quiet); max-width:80ch; }
.cs-flibbr .case-header-awards .awards-label{ color:var(--ink); font-weight:600; }
.cs-flibbr .case-header-awards .awards-list-inline > * + *::before{ content:" · "; color:var(--rule); margin-inline:var(--s-1); }

/* ---------- hero medium ---------- */
.cs-flibbr .case-hero{ padding-block:var(--s-7) 0; }
.cs-flibbr .case-hero-frame{ position:relative; overflow:hidden; background:var(--paper-warm); border-radius:4px; }
.cs-flibbr .case-hero-frame.is-video{ aspect-ratio:16/9; }
.cs-flibbr .case-hero-frame.is-image{ aspect-ratio:16/10; }
.cs-flibbr .case-hero-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cs-flibbr .case-hero-iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.cs-flibbr .case-hero-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:84px; height:84px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform var(--motion-duration-ui) var(--motion-ease-ui); }
.cs-flibbr .case-hero-play::before{ content:""; margin-left:5px; border-style:solid; border-width:13px 0 13px 22px; border-color:transparent transparent transparent var(--ink); }
.cs-flibbr .case-hero-frame:hover .case-hero-play{ transform:translate(-50%,-50%) scale(1.06); }

/* ---------- results strip ---------- */
.cs-flibbr .case-results{ padding-block:0 var(--s-7); }
.cs-flibbr .case-results-inner{ border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding-block:var(--s-6); }
.cs-flibbr .case-results-kicker{ font-family:var(--sans); font-weight:600; font-size:11px; line-height:1; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); margin-bottom:var(--s-5); }
.cs-flibbr .case-results-grid{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.cs-flibbr .case-results-item{ padding:var(--s-3) var(--s-5); border-left:1px solid var(--rule-soft); }
.cs-flibbr .case-results-item:first-child{ border-left:0; padding-left:0; }
.cs-flibbr .case-results-metric{ display:flex; align-items:baseline; gap:var(--s-1); font-family:var(--serif); font-weight:400; color:var(--ink); line-height:1; margin-bottom:var(--s-3); }
.cs-flibbr .case-results-metric .metric-num{ font-size:clamp(36px,4.5vw,56px); letter-spacing:-0.02em; }
.cs-flibbr .case-results-metric .metric-unit{ font-size:clamp(18px,2vw,24px); color:var(--ink-soft); letter-spacing:-0.01em; }
.cs-flibbr .case-results-label{ font-family:var(--sans); font-weight:400; font-size:13px; line-height:1.4; color:var(--ink-quiet); max-width:22ch; }
@media (max-width:880px){
  .cs-flibbr .case-results-grid{ grid-template-columns:repeat(2,1fr); }
  .cs-flibbr .case-results-item:nth-child(3){ border-left:0; padding-left:0; padding-top:var(--s-5); border-top:1px solid var(--rule-soft); }
  .cs-flibbr .case-results-item:nth-child(4){ padding-top:var(--s-5); border-top:1px solid var(--rule-soft); }
  .cs-flibbr .case-results-item:nth-child(1), .cs-flibbr .case-results-item:nth-child(2){ padding-bottom:var(--s-5); }
}
@media (max-width:540px){
  .cs-flibbr .case-results-grid{ grid-template-columns:1fr; }
  .cs-flibbr .case-results-item{ border-left:0; border-top:1px solid var(--rule-soft); padding:var(--s-5) 0 0; }
  .cs-flibbr .case-results-item:first-child{ border-top:0; padding-top:0; }
}

/* ---------- body grid + prose (from page-chassis) ---------- */
.cs-flibbr .case-body{ padding-block:var(--s-9); }
.cs-flibbr .page-body-grid{ display:grid; grid-template-columns:200px 1fr; gap:var(--s-7); align-items:start; }
@media (max-width:880px){ .cs-flibbr .page-body-grid{ grid-template-columns:minmax(0,1fr); gap:var(--s-5); } }
.cs-flibbr .page-label{ font-family:var(--sans); font-weight:600; font-size:11px; line-height:1.2; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-quiet); padding-top:var(--s-3); border-top:1px solid var(--ink); }
@media (max-width:880px){ .cs-flibbr .page-label{ display:none; } }
.cs-flibbr .page-prose{ max-width:60ch; }
.cs-flibbr .page-prose > * + *{ margin-top:var(--s-5); }
.cs-flibbr .page-prose p + p{ margin-top:var(--s-7); }
.cs-flibbr .page-prose p{ font-family:var(--serif); font-weight:400; font-size:18px; line-height:1.7; color:var(--ink-soft); margin:0; }
.cs-flibbr .page-prose p em{ font-style:italic; }
.cs-flibbr .page-prose p strong{ font-weight:600; color:var(--ink); }
.cs-flibbr .page-prose a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule); transition:border-color var(--motion-duration-ui) var(--motion-ease-ui); }
.cs-flibbr .page-prose a:hover{ border-bottom-color:var(--accent); }
.cs-flibbr .page-prose p.lede{ font-size:21px; line-height:1.6; color:var(--ink); }
.cs-flibbr .page-prose h2{ font-family:var(--serif); font-weight:400; font-size:clamp(24px,2.4vw,30px); line-height:1.2; letter-spacing:-0.012em; color:var(--ink); margin:var(--s-8) 0 0 0; padding-top:var(--s-5); border-top:1px solid var(--rule); }
.cs-flibbr .page-prose h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.cs-flibbr .page-prose h2 em{ font-style:italic; }
.cs-flibbr .page-prose h3{ font-family:var(--serif); font-weight:600; font-size:20px; line-height:1.3; color:var(--ink); margin-top:var(--s-7); }
.cs-flibbr .page-prose h2 + p, .cs-flibbr .page-prose h3 + p{ margin-top:var(--s-5); }
.cs-flibbr .page-prose h2 + h3{ margin-top:var(--s-3); }
.cs-flibbr .page-prose ul, .cs-flibbr .page-prose ol{ font-family:var(--serif); font-weight:400; font-size:18px; line-height:1.7; color:var(--ink-soft); margin:0; padding-left:var(--s-6); }
.cs-flibbr .page-prose ul li + li, .cs-flibbr .page-prose ol li + li{ margin-top:var(--s-3); }
.cs-flibbr .page-prose ul{ list-style:square; }
.cs-flibbr .page-prose ul li::marker{ color:var(--ink-quiet); }
.cs-flibbr .page-callout{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(18px,1.7vw,22px); line-height:1.5; color:var(--ink); border-left:2px solid var(--accent); padding-left:var(--s-5); padding-block:var(--s-3); max-width:56ch; }
.cs-flibbr .page-callout em{ font-style:normal; }
.cs-flibbr .page-prose .page-callout{ margin-top:var(--s-7); margin-bottom:var(--s-7); }
.cs-flibbr .page-prose hr{ border:0; border-top:1px solid var(--rule); margin-block:var(--s-7); width:6ch; margin-inline:0; }

/* ---------- inline stat callouts (impact) ---------- */
.cs-flibbr .page-prose .case-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); margin-block:var(--s-6); padding:var(--s-5) 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--rule-soft); }
@media (max-width:720px){ .cs-flibbr .page-prose .case-stats{ grid-template-columns:1fr; gap:var(--s-4); } }
.cs-flibbr .page-prose .case-stat-figure{ font-family:var(--serif); font-weight:400; font-size:clamp(32px,4vw,48px); line-height:1; color:var(--ink); margin:0; letter-spacing:-0.018em; }
.cs-flibbr .page-prose .case-stat-figure em{ font-style:italic; }
.cs-flibbr .page-prose .case-stat-label{ margin-top:var(--s-2); font-family:var(--sans); font-size:12px; line-height:1.45; color:var(--ink-soft); max-width:28ch; }

/* ---------- recognition ---------- */
.cs-flibbr .page-prose .case-recognition{ margin-block:var(--s-7); max-width:none; }
.cs-flibbr .page-prose .case-recognition-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-6) var(--s-5); margin-top:var(--s-5); }
@media (max-width:720px){ .cs-flibbr .page-prose .case-recognition-grid{ grid-template-columns:1fr; } }
.cs-flibbr .page-prose .case-recognition-item{ padding-top:var(--s-4); border-top:1px solid var(--rule); }
.cs-flibbr .page-prose .case-recognition-item .t-kicker{ font-family:var(--sans); font-weight:600; font-size:11px; line-height:1; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); }
.cs-flibbr .page-prose .case-recognition-item .award{ margin:var(--s-2) 0 var(--s-3); font-family:var(--serif); font-size:19px; font-weight:400; line-height:1.3; color:var(--ink); }
.cs-flibbr .page-prose .case-recognition-item .award em{ font-style:italic; }
.cs-flibbr .page-prose .case-recognition-item .host{ font-family:var(--sans); font-size:12px; color:var(--ink-quiet); line-height:1.5; }

/* ---------- team credits ---------- */
.cs-flibbr .page-prose .case-credits{ margin-block:var(--s-7); max-width:none; }
.cs-flibbr .page-prose .case-credits-grid{ display:grid; grid-template-columns:200px 1fr; gap:var(--s-5) var(--s-7); align-items:start; }
@media (max-width:720px){ .cs-flibbr .page-prose .case-credits-grid{ grid-template-columns:1fr; gap:var(--s-3); } }
.cs-flibbr .page-prose .case-credits-phase{ font-family:var(--sans); font-weight:600; font-size:11px; line-height:1.2; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); padding-top:var(--s-3); border-top:1px solid var(--rule); }
.cs-flibbr .page-prose .case-credits-list{ list-style:none; padding:0; margin:0; padding-top:var(--s-3); border-top:1px solid var(--rule); font-family:var(--serif); font-size:17px; line-height:1.55; color:var(--ink-soft); }
.cs-flibbr .page-prose .case-credits-list li + li{ margin-top:var(--s-1); }
.cs-flibbr .page-prose .case-credits-list .who{ color:var(--ink); }
.cs-flibbr .page-prose .case-credits-list .where{ color:var(--ink-quiet); font-size:14px; }
.cs-flibbr .page-prose .case-credits-list .where::before{ content:", "; }

/* ---------- related (tail rail) ---------- */
.cs-flibbr .case-related{ padding-block:var(--s-8) var(--s-9); border-top:1px solid var(--rule); }
.cs-flibbr .case-related-label{ font-family:var(--sans); font-weight:600; font-size:11px; line-height:1; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-quiet); margin-bottom:var(--s-3); }
.cs-flibbr .case-related-headline{ font-family:var(--serif); font-weight:400; font-size:clamp(24px,2.6vw,30px); line-height:1.18; letter-spacing:-0.012em; color:var(--ink); margin:0 0 var(--s-7); }
.cs-flibbr .case-related-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-7); }
@media (max-width:880px){ .cs-flibbr .case-related-grid{ grid-template-columns:1fr; gap:var(--s-6); } }
.cs-flibbr .case-related-card{ display:flex; flex-direction:column; gap:var(--s-4); text-decoration:none; color:inherit; padding:0 var(--s-4) var(--s-4); border-radius:4px; transition:box-shadow var(--motion-duration-content) var(--motion-ease-content); }
.cs-flibbr .case-related-card:hover{ box-shadow:0 8px 32px rgba(20,20,19,.06); }
.cs-flibbr .case-related-image{ background:var(--paper-warm); aspect-ratio:4/3; position:relative; overflow:hidden; margin-inline:calc(var(--s-4) * -1); }
.cs-flibbr .case-related-image.has-image img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--motion-duration-content) var(--motion-ease-content), filter var(--motion-duration-content) var(--motion-ease-content); }
.cs-flibbr .case-related-card:hover .case-related-image.has-image img{ transform:scale(1.012); filter:brightness(0.96); }
.cs-flibbr .case-related-content{ display:flex; flex-direction:column; gap:var(--s-3); }
.cs-flibbr .case-related-card .case-related-card-headline{ margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(20px,2vw,24px); line-height:1.22; color:var(--ink); letter-spacing:-0.005em; }
.cs-flibbr .case-related-card .case-related-card-headline em{ font-style:italic; }
.cs-flibbr .case-related-card .case-related-card-meta{ display:flex; flex-wrap:wrap; gap:var(--s-3); padding-top:var(--s-3); border-top:1px solid var(--rule-soft); margin-top:var(--s-2); font-family:var(--sans); font-size:12px; color:var(--ink-soft); }
.cs-flibbr .case-related-card .case-related-card-meta strong{ font-weight:600; color:var(--ink); }
.cs-flibbr .case-related-card .case-related-card-meta > * + *::before{ content:"·"; color:var(--ink-quiet); margin-right:var(--s-3); }

/* =============================================================
   HOME — "Recent case studies" section (.cases-grid-v2 / .case-card-v2)
   ============================================================= */
/* Home cards sit inside RJ's own <section> + rj_section_head() kicker, on paper —
   so this wrapper is transparent; only the Flibbr card grammar is scoped here. */
.cs-flibbr.cs-home-cards{ background:transparent; margin-top:var(--s-7); }
.cs-flibbr .cases-grid-v2{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-5); margin-top:0; }
@media (max-width:880px){ .cs-flibbr .cases-grid-v2{ grid-template-columns:1fr; gap:var(--s-6); } }
.cs-flibbr .case-card-v2{ display:flex; flex-direction:column; text-decoration:none; color:inherit; border:1px solid var(--rule-soft); border-radius:4px; overflow:hidden; transition:box-shadow var(--motion-duration-content) var(--motion-ease-content), border-color var(--motion-duration-content) var(--motion-ease-content); }
.cs-flibbr .case-card-v2:hover{ box-shadow:0 8px 32px rgba(20,20,19,.07); border-color:var(--rule); }
.cs-flibbr .case-thumb-wrap{ aspect-ratio:16/9; overflow:hidden; background:var(--paper-warm); }
.cs-flibbr .case-thumb{ width:100%; height:100%; background-size:cover; background-position:center; transition:transform var(--motion-duration-content) var(--motion-ease-content); }
.cs-flibbr .case-card-v2:hover .case-thumb{ transform:scale(1.02); }
.cs-flibbr .case-content{ padding:var(--s-6) var(--s-5); display:flex; flex-direction:column; gap:var(--s-3); }
.cs-flibbr .case-tag{ font-family:var(--sans); font-weight:600; font-size:10px; line-height:1; letter-spacing:0.22em; text-transform:uppercase; color:var(--rust); }
.cs-flibbr .case-title-v2{ font-family:var(--serif); font-weight:400; font-size:26px; line-height:1.12; letter-spacing:-0.018em; color:var(--ink); margin:0; }
.cs-flibbr .case-title-v2 em{ font-style:italic; }
.cs-flibbr .case-meta-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); padding-top:var(--s-5); margin-top:var(--s-2); border-top:1px solid var(--rule-soft); }
@media (max-width:480px){ .cs-flibbr .case-meta-row{ grid-template-columns:1fr; gap:var(--s-3); } }
.cs-flibbr .case-meta-col h5{ font-family:var(--sans); font-weight:600; font-size:10px; line-height:1; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-quiet); margin:0 0 var(--s-2); }
.cs-flibbr .case-meta-col p{ font-family:var(--serif); font-weight:400; font-size:14px; line-height:1.4; color:var(--ink); margin:0; }
/* =============================================================
   NAV legibility on the white-topped case-study pages (NOT scoped to
   .cs-flibbr — targets RJ's own site nav, which is transparent/light by
   default for the dark hero on other pages). Force its solid/dark state.
   ============================================================= */
body.single-case_study .nav{ background:rgba(255,255,255,.9); backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2); border-bottom:1px solid var(--line); }
body.single-case_study .nav .brand{ color:var(--ink); }
body.single-case_study .nav-links a{ color:var(--ink-70); }
body.single-case_study .nav-links a:hover{ color:var(--ink); }
body.single-case_study .nav .enq{ color:var(--ink); border-color:var(--line-2); }
body.single-case_study .burger span{ background:var(--ink); }

/* =============================================================
   THE WORK — films. Flibbr-mirrored, scoped to .cs-flibbr.
   Home "Recent films" = a typographic index; /work/ = full archive
   (hero + Client/Brand/Year filters + poster grid + recognition + CTA).
   ============================================================= */

/* ---------- HOME: Recent films — image-tile gallery (Flibbr .work-gallery) ---------- */
.cs-flibbr.cs-home-films{ background:transparent; margin-top:var(--s-7); }
.cs-flibbr .work-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-5); }
@media (max-width:600px){ .cs-flibbr .work-gallery{ grid-template-columns:1fr; gap:var(--s-4); } }
/* Mosaic with a feature tile only when there are enough films (≥5). */
@media (min-width:1000px){
  .cs-flibbr .work-gallery.has-feature{ grid-template-columns:repeat(6,1fr); grid-auto-rows:1fr; }
  .cs-flibbr .work-gallery.has-feature .work-tile{ grid-column:span 2; }
  .cs-flibbr .work-gallery.has-feature .work-tile.feature{ grid-column:span 4; grid-row:span 2; aspect-ratio:auto; }
}
.cs-flibbr .work-tile{ position:relative; display:block; aspect-ratio:16/10; overflow:hidden; border-radius:4px; background:var(--paper-warm); text-decoration:none; color:#fff; }
.cs-flibbr .work-tile-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform var(--motion-duration-content) var(--motion-ease-content); }
.cs-flibbr a.work-tile:hover .work-tile-bg{ transform:scale(1.04); }
.cs-flibbr .work-tile-meta{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:var(--s-5); background:linear-gradient(to top, rgba(20,20,19,.92), rgba(20,20,19,0) 72%); }
.cs-flibbr .work-tile-client{ font-family:var(--sans); font-weight:600; font-size:10px; line-height:1.3; letter-spacing:0.2em; text-transform:uppercase; color:#fff; opacity:.92; margin-bottom:var(--s-2); }
.cs-flibbr .work-tile-title{ font-family:var(--serif); font-weight:400; font-size:16px; line-height:1.25; letter-spacing:-0.005em; color:#fff; }
@media (min-width:1000px){ .cs-flibbr .work-gallery.has-feature .work-tile.feature .work-tile-title{ font-size:19px; } }

/* ---------- WORK PAGE: hero ---------- */
.cs-flibbr .work-hero{ padding-block:var(--s-9) var(--s-6); border-bottom:1px solid var(--rule-soft); }
.cs-flibbr .work-hero-kicker{ font-family:var(--sans); font-weight:600; font-size:11px; line-height:1; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); margin-bottom:var(--s-5); }
.cs-flibbr .work-hero-title{ margin:0 0 var(--s-5); max-width:18ch; font-family:var(--serif); font-weight:400; font-size:clamp(40px,6vw,76px); line-height:1.04; letter-spacing:-0.02em; color:var(--ink); }
.cs-flibbr .work-hero-title em{ font-style:italic; }
.cs-flibbr .work-hero-intro{ max-width:60ch; font-family:var(--serif); font-weight:400; font-size:clamp(18px,1.8vw,21px); line-height:1.6; color:var(--ink-soft); margin:0; }

/* ---------- WORK PAGE: filter bar ---------- */
.cs-flibbr .work-films{ padding-block:var(--s-7); }
.cs-flibbr .work-films-bar{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--s-5); padding-bottom:var(--s-6); border-bottom:1px solid var(--rule); margin-bottom:var(--s-7); }
.cs-flibbr .filters{ display:flex; flex-wrap:wrap; gap:var(--s-6); }
.cs-flibbr .filters .fg{ display:flex; flex-direction:column; gap:var(--s-2); }
.cs-flibbr .filters label{ font-family:var(--sans); font-weight:600; font-size:10px; line-height:1; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-quiet); }
.cs-flibbr .filters select{ font-family:var(--sans); font-size:14px; line-height:1.4; color:var(--ink); background:var(--paper); border:0; border-bottom:1px solid var(--ink); border-radius:0; padding:var(--s-1) calc(var(--s-5) + 4px) var(--s-2) 0; cursor:pointer; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23141413' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right center; }
.cs-flibbr .filters select:focus{ outline:none; border-bottom-color:var(--accent); }
.cs-flibbr .filters .count{ margin-left:auto; align-self:flex-end; font-family:var(--sans); font-size:12px; line-height:1.4; color:var(--ink-quiet); }
@media (max-width:600px){ .cs-flibbr .filters .count{ margin-left:0; align-self:flex-start; flex-basis:100%; } }

/* ---------- WORK PAGE: poster grid ---------- */
.cs-flibbr .workgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-7) var(--s-5); }
@media (max-width:980px){ .cs-flibbr .workgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .cs-flibbr .workgrid{ grid-template-columns:1fr; gap:var(--s-6); } }
.cs-flibbr .filmcard.hide{ display:none; }
.cs-flibbr .work-poster{ display:block; position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--paper-warm); border-radius:4px; }
.cs-flibbr .work-poster img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform var(--motion-duration-content) var(--motion-ease-content); }
.cs-flibbr a.work-poster:hover img{ transform:scale(1.02); }
.cs-flibbr .work-poster-empty{ position:absolute; inset:0; background:var(--paper-warm); }
.cs-flibbr .work-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.92); }
.cs-flibbr .work-play::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-40%,-50%); border-style:solid; border-width:10px 0 10px 17px; border-color:transparent transparent transparent var(--ink); }
.cs-flibbr .work-card-body{ padding-top:var(--s-4); }
.cs-flibbr .work-card-meta{ font-family:var(--sans); font-weight:600; font-size:11px; line-height:1.3; letter-spacing:0.14em; text-transform:uppercase; color:var(--rust); margin-bottom:var(--s-3); }
.cs-flibbr .work-card-title{ margin:0; font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.16; letter-spacing:-0.015em; color:var(--ink); }
.cs-flibbr .work-card-cs{ display:inline-block; margin-top:var(--s-3); font-family:var(--sans); font-weight:500; font-size:13px; line-height:1.4; color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; transition:border-color var(--motion-duration-ui) var(--motion-ease-ui); }
.cs-flibbr .work-card-cs:hover{ border-bottom-color:var(--accent); }
.cs-flibbr .work-note{ margin-top:var(--s-6); font-family:var(--sans); font-size:13px; line-height:1.5; color:var(--ink-quiet); }

/* ---------- WORK PAGE: recognition ---------- */
.cs-flibbr .work-recognition{ padding-block:var(--s-8); border-top:1px solid var(--rule); }
.cs-flibbr .work-rec-kicker{ font-family:var(--sans); font-weight:600; font-size:11px; line-height:1; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); }
.cs-flibbr .work-rec-heading{ margin:var(--s-3) 0 var(--s-6); max-width:24ch; font-family:var(--serif); font-weight:400; font-size:clamp(24px,2.6vw,32px); line-height:1.18; letter-spacing:-0.014em; color:var(--ink); }
.cs-flibbr .work-rec-heading em{ font-style:italic; }
.cs-flibbr .work-rec-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-6) var(--s-7); }
@media (max-width:720px){ .cs-flibbr .work-rec-grid{ grid-template-columns:1fr; } }
.cs-flibbr .work-rec-item{ padding-top:var(--s-4); border-top:1px solid var(--rule); }
.cs-flibbr .work-rec-item .t-kicker{ font-family:var(--sans); font-weight:600; font-size:11px; line-height:1; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); }
.cs-flibbr .work-rec-item .award{ margin:var(--s-2) 0; font-family:var(--serif); font-weight:400; font-size:19px; line-height:1.3; color:var(--ink); }
.cs-flibbr .work-rec-item .award em{ font-style:italic; }
.cs-flibbr .work-rec-item .host{ font-family:var(--sans); font-size:12px; line-height:1.5; color:var(--ink-quiet); }

/* ---------- WORK PAGE: CTA ---------- */
.cs-flibbr .work-cta{ padding-block:var(--s-8) var(--s-9); border-top:1px solid var(--rule); }
.cs-flibbr .work-cta-head{ margin:0 0 var(--s-5); max-width:30ch; font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(22px,2.4vw,30px); line-height:1.3; color:var(--ink); }
.cs-flibbr .work-cta-btn{ display:inline-flex; align-items:center; gap:var(--s-2); font-family:var(--sans); font-weight:600; font-size:14px; color:var(--paper); background:var(--ink); padding:var(--s-3) var(--s-5); border-radius:2px; text-decoration:none; transition:background var(--motion-duration-ui) var(--motion-ease-ui); }
.cs-flibbr .work-cta-btn:hover{ background:var(--accent); }

/* ---------- NAV legibility on the white-topped /work/ archive ---------- */
body.work-archive .nav{ background:rgba(255,255,255,.9); backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2); border-bottom:1px solid var(--line); }
body.work-archive .nav .brand{ color:var(--ink); }
body.work-archive .nav-links a{ color:var(--ink-70); }
body.work-archive .nav-links a:hover{ color:var(--ink); }
body.work-archive .nav .enq{ color:var(--ink); border-color:var(--line-2); }
body.work-archive .burger span{ background:var(--ink); }

/* ---------- Inline video play (home tiles + archive posters) ---------- */
.cs-flibbr .work-tile.has-video,
.cs-flibbr .work-poster.has-video{ cursor:pointer; }
/* Let the play button sit above the gradient/meta and receive the hit. */
.cs-flibbr .work-tile-meta{ z-index:2; }
.cs-flibbr .work-tile.has-video .work-tile-meta{ pointer-events:none; }
.cs-flibbr .work-tile .work-play,
.cs-flibbr .work-poster .work-play{ z-index:3; transition:transform var(--motion-duration-ui) var(--motion-ease-ui), background var(--motion-duration-ui) var(--motion-ease-ui); }
/* Div posters/tiles still get the subtle zoom on hover (was scoped to a:hover). */
.cs-flibbr .work-tile.has-video:hover .work-tile-bg{ transform:scale(1.04); }
.cs-flibbr .work-poster.has-video:hover img{ transform:scale(1.02); }
.cs-flibbr .work-tile.has-video:hover .work-play,
.cs-flibbr .work-poster.has-video:hover .work-play{ transform:translate(-50%,-50%) scale(1.06); background:#fff; }
.cs-flibbr .work-tile.has-video:focus-visible,
.cs-flibbr .work-poster.has-video:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
/* Swapped-in iframe fills the frame. */
.cs-flibbr .work-tile.is-playing,
.cs-flibbr .work-poster.is-playing{ cursor:default; }
.cs-flibbr .rj-video-iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:5; background:#000; border-radius:4px; }