/* Case study visual language — shared by every case-study page.
   Each page keeps its own colour theme by setting the --cs-* tokens in its :root;
   this file sets type, spacing and the shared components (hero facts panel and the
   statement band). Linked after each page's own <style>, so it wins on ties.

   Tokens a page sets:
     --cs-ink        headings / values         --cs-label   facts labels
     --cs-accent     facts accent (impact)     --cs-panel / --cs-panel-border  facts panel
     --cs-band-bg    statement band ground     --cs-band-eyebrow / --cs-band-copy  band text */

/* ---- Hero ---- */
.wo-hero h1, .co-hero h1, .ec-hero h1, .pk-hero h1{
  font-size:clamp(32px,3.6vw,44px); line-height:1.12; font-weight:700; }
.wo-lede, .co-hero-lede, .pk-lede, .ec-hero .ec-copy{
  font-family:"Instrument Sans",sans-serif; font-size:16px; line-height:1.6; }

/* Facts block (matches Expedia change): transparent on the hero colour, stacked Role / Team, hairline, results row.
   Colours come from each page's tokens (--cs-ink, --cs-label, --cs-accent), so it inverts with the page background. */
.cs-meta{ width:100%; display:flex; flex-direction:column; gap:16px; margin:0; padding:0; background:none; border:0; border-radius:0;
  box-sizing:border-box; font-family:"DM Sans",system-ui,sans-serif; }
.cs-meta > div{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cs-meta .cs-meta-label{ font:400 11px/1.2 "DM Sans",system-ui,sans-serif; text-transform:uppercase; letter-spacing:.02em; color:var(--cs-label); margin:0; }
.cs-meta .cs-meta-value{ font:400 13px/1.3 "Work Sans",system-ui,sans-serif; color:var(--cs-ink); margin:0; }
.cs-meta .accent, .cs-meta .down{ font-weight:600; }
.cs-meta .accent{ color:var(--cs-accent); }
.cs-meta .down{ color:var(--cs-accent-2, var(--cs-accent)); }
.cs-meta .cs-meta-results{ display:flex; flex-direction:row; gap:16px 24px; padding-top:16px; border-top:1px solid color-mix(in srgb, var(--cs-ink) 14%, transparent); }
.cs-meta .cs-meta-results > div{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:4px; }
.cs-meta .cs-meta-results .cs-meta-label{ text-transform:none; letter-spacing:0; }
@media (max-width:600px){ .cs-meta .cs-meta-results{ flex-wrap:wrap; } .cs-meta .cs-meta-results > div{ flex:1 1 40%; } }

/* ---- Section type ---- */
.ec-eyebrow, .co-eyebrow, .pk-eyebrow, .wo-eyebrow, .co-col-eyebrow{
  display:block; font-weight:500; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; margin:0; }
.ec-h2, .co-h2, .pk-h2, .co-col h2{
  font-weight:700; font-size:clamp(24px,2.4vw,28px); line-height:1.25; }
.ec-copy, .co-copy, .pk-body p{
  font-family:"Instrument Sans",sans-serif; font-size:15px; line-height:25px; }
.co-lede, .co-col-lede{ font-family:"Instrument Sans",sans-serif; font-size:16px; line-height:1.6; }
.ec-card h3, .co-sol-card h3, .co-pr h3{ font-size:18px; font-weight:700; line-height:1.3; }

/* ---- Statement band (Figma 58:45054): one statement with generous space around it.
   Used for "The problem, framed", Pocket's work-in-progress note and Wise's password gate. */
.cs-band{ background:var(--cs-band-bg);
  padding-top:clamp(56px,6.3vw,81px); padding-bottom:clamp(120px,19vw,240px);
  padding-inline:max(20px, calc((100% - 1120px)/2));
  display:flex; flex-direction:column; align-items:flex-start; }
.cs-band .cs-band-eyebrow{ display:block; font-weight:500; font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--cs-band-eyebrow); margin:0 0 clamp(40px,5vw,64px); }
.cs-band h2{ font-weight:500; font-size:clamp(24px,2.4vw,28px); line-height:1.5; color:#fff; max-width:457px; margin:0; text-wrap:wrap; }
.cs-band .cs-band-copy{ margin-top:clamp(24px,2.8vw,36px); max-width:383px; }
.cs-band .cs-band-copy p{ font-family:"Instrument Sans",sans-serif; font-size:16px; line-height:1.6; color:var(--cs-band-copy); margin:0; }
.cs-band .cs-band-copy p + p{ margin-top:1.6em; }
.cs-band .cs-band-copy a{ color:#fff; font-weight:500; text-decoration:underline; text-underline-offset:2px; }
.cs-band .cs-band-cta{ margin-top:34px; }

/* ---- Bands & sections: never shorter than 412px ---- */
.ec-section, .co-section, .wo-section, .pk-section, .ec-band, .co-goal, .pk-statement, .pk-story, .cs-band{ min-height:412px; }
/* the statement band: even padding, content centred in the 412px minimum */
.cs-band{ padding-block:clamp(56px,6.3vw,81px); justify-content:center; }
.ec-band, .co-goal{ justify-content:center; }

/* ---- Top bar: translucent like the landing page (62% of the page ground, light blur),
   so content shows through as it scrolls underneath ---- */
.site-header.wo-nav{ background:rgba(1,4,0,.62); }   /* Figma 1:1934 top bar #010400 */
.site-header.pk-nav{ background:rgba(22,8,0,.62); }
.site-header.ec-nav, .site-header.co-nav{ background:rgba(249,250,251,.62); }
.site-header.wo-nav, .site-header.pk-nav, .site-header.ec-nav, .site-header.co-nav{
  backdrop-filter:blur(2px) saturate(1.1); -webkit-backdrop-filter:blur(2px) saturate(1.1); }

/* ---- Lightbox (assets/case-study/lightbox.js) ---- */
.cs-zoom{ cursor:zoom-in; }
.cs-lb{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(6,8,12,.9); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s linear .25s; cursor:zoom-out; }
.cs-lb.open{ opacity:1; visibility:visible; transition:opacity .25s ease; }
.cs-lb figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:14px; max-width:94vw; }
.cs-lb img{ display:block; max-width:94vw; max-height:84vh; width:auto; height:auto; object-fit:contain; border-radius:8px;
  background:#fff; box-shadow:0 30px 80px rgba(0,0,0,.5); transform:scale(.97); transition:transform .3s cubic-bezier(.16,1,.3,1); cursor:default; }
.cs-lb.open img{ transform:none; }
.cs-lb figcaption{ max-width:720px; text-align:center; font-family:"DM Mono",monospace; font-size:11px; line-height:1.5; color:rgba(255,255,255,.7); }
.cs-lb button{ position:absolute; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:0; border-radius:100px;
  background:rgba(255,255,255,.1); color:#fff; cursor:pointer; transition:background .2s ease; }
.cs-lb button:hover{ background:rgba(255,255,255,.2); }
.cs-lb button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.cs-lb button svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cs-lb .cs-lb-close{ top:20px; right:20px; }
.cs-lb .cs-lb-prev{ left:20px; top:50%; margin-top:-22px; }
.cs-lb .cs-lb-next{ right:20px; top:50%; margin-top:-22px; }
.cs-lb.single .cs-lb-prev, .cs-lb.single .cs-lb-next{ display:none; }
.cs-lb-count{ position:absolute; top:32px; left:24px; font-family:"DM Mono",monospace; font-size:11px; color:rgba(255,255,255,.6); }
body.cs-lb-lock{ overflow:hidden; }
@media (max-width:600px){ .cs-lb .cs-lb-prev, .cs-lb .cs-lb-next{ top:auto; bottom:20px; margin-top:0; } }
@media (prefers-reduced-motion:reduce){ .cs-lb, .cs-lb img{ transition:none; } }

/* ---- Bands fill the screen: at least one full viewport (below the top bar), never under 412px ---- */
.cs-band, .ec-band, .co-goal, .pk-statement{
  min-height:max(412px, calc(100vh - var(--header-h,64px)));
  min-height:max(412px, calc(100svh - var(--header-h,64px)));
  display:flex; flex-direction:column; justify-content:center; }
.pk-statement{ align-items:center; }

/* ---- Every band on a case study fills at least one screen (below the top bar),
   never under 412px; content is centred vertically within it ---- */
:root{ --cs-screen:max(412px, calc(100vh - var(--header-h,64px))); }
@supports (height:100svh){ :root{ --cs-screen:max(412px, calc(100svh - var(--header-h,64px))); } }
main > section[class]{ min-height:var(--cs-screen); }
main > section.pk-hero{ min-height:max(412px, 100vh); }            /* Pocket's hero runs under the top bar */
@supports (height:100svh){ main > section.pk-hero{ min-height:max(412px, 100svh); } }
/* block sections → centre their content */
main > section:is(.ec-soft, .ec-white, .ec-navy, .co-outcomes, .pk-philosophy){
  display:flex; flex-direction:column; justify-content:center; }
/* stacked (column) sections */
.co-value, .co-principles, .co-process, .co-solutions, .ec-solutions, .ec-learn{ justify-content:center; }
/* galleries */
.wo-gallery, .co-gallery, .ec-gallery, .pk-gallery{ align-content:center; }
/* ---- One grid for text + image rows (the layout of The case for changing) ----
   Desktop: text column 460px, media column 580px, spread across the 1120px column.
   Text and image are TOP-aligned with each other (the image's top = the eyebrow's top);
   the pair as a whole sits centred in the band. Small screens keep each page's stacked layout. */
@media (min-width:901px){
  .ec-row, .co-split, .co-insights{
    display:grid; grid-template-columns:minmax(0,460px) minmax(0,580px); justify-content:space-between;
    column-gap:48px; align-items:start; align-content:center; }
  .ec-row.g110, .ec-row.g48{ gap:0 48px; }
  .ec-row.media-first{ grid-template-columns:minmax(0,580px) minmax(0,460px); }
  main > section.co-split, main > section.co-insights{ display:grid; }
  .ec-row > .text, .co-split-text, .co-insights-left{ max-width:none !important; width:auto; flex:none; }
  .ec-row > .media, .co-split > .co-frame, .co-insights-right{ width:100% !important; flex:none; margin:0; }
  /* portrait media (phone screens) keep their natural width, aligned to the outer edge */
  .ec-row > .media:has(.sc-flow){ max-width:433px; justify-self:end; }
  .co-insights-right{ max-width:450px; justify-self:end; }
  .co-twocol{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px; align-items:start; align-content:center; }

  /* heroes: same rule — the top of the image lines up with the pill */
  .ec-hero, .co-hero, .wo-hero, .pk-hero{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,540px); column-gap:48px; align-items:start; align-content:center; }
  .ec-hero-right, .co-hero-right, .wo-hero-right, .pk-hero-right{ width:100% !important; margin:0; }
}
/* images show in full — no fixed-height crop frames */
.co-frame{ height:auto !important; aspect-ratio:auto !important; }
.co-frame img{ height:auto; object-fit:contain; }

/* ---- Solutions (shared): equal items, same image frame, no boxes around the text ---- */
.cs-sol-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(32px,4vw,56px); row-gap:clamp(48px,6vw,72px); align-items:start; }
.cs-sol{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.cs-sol-media{ aspect-ratio:541/591; border-radius:12px; overflow:hidden; background:var(--cs-media-bg,#eef2fc); border:1px solid var(--cs-panel-border); margin-bottom:12px; }
.cs-sol-media img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.cs-sol-meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cs-sol-kind{ font-family:"DM Mono",monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--cs-label); }
.cs-sol h3{ font-weight:700; font-size:18px; line-height:1.3; color:var(--cs-ink); margin:0; }
.cs-sol .label{ display:block; font-weight:600; }
.cs-sol .results, .cs-sol .handover{ padding-left:21px; margin:4px 0 0; }
.cs-sol .results{ color:var(--cs-accent); }
@media (max-width:760px){ .cs-sol-list{ grid-template-columns:1fr; } }
.cs-status{ align-self:flex-start; display:inline-flex; padding:4px 12px; border-radius:100px; font-family:"DM Mono",monospace; font-weight:500; font-size:10px; letter-spacing:.06em; text-transform:uppercase; margin:0; white-space:nowrap; }
.cs-status.backlog{ background:#f1f2f4; color:#6b7280; } .cs-status.dev{ background:#fdf3d7; color:#8a6a05; }
.cs-status.live{ background:#dff3ee; color:#1f7a66; } .cs-status.handed{ background:#e6ecfb; color:#1740d1; }

/* ---- Stats strip in the data-box style (one panel, label above value) ---- */
.cs-meta.cs-stats > div{ flex:1 1 0; min-width:120px; }
.cs-meta.cs-stats .cs-meta-value{ font-size:22px; font-weight:700; line-height:1.15; letter-spacing:-.3px; }

/* ---- Insight list: label + quote, separated by hairlines (no boxes) ---- */
.cs-insights{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.cs-insights li{ display:flex; flex-direction:column; gap:6px; padding:18px 0; border-top:1px solid var(--cs-panel-border); }
.cs-insights li:last-child{ border-bottom:1px solid var(--cs-panel-border); }
.cs-insights .cs-meta-label{ letter-spacing:.06em; }
.cs-insights q, .cs-insights p{ margin:0; font-family:"Instrument Sans",sans-serif; font-size:16px; line-height:1.55; color:var(--cs-ink); }
.cs-insights p + p{ margin-top:6px; }
.cs-insights b{ font-weight:600; color:var(--cs-accent); }
.co-solutions, .ec-solutions{ gap:32px; }

/* media cells that aren't images: the vision prototype figure and the rollout path */
@media (min-width:901px){
  .co-split > .vl-figure{ width:100%; max-width:520px; justify-self:end; }
  .co-split > .co-path{ width:100%; max-width:580px; justify-self:end; }
}

/* ---- Stats as a 2×2 grid of square tiles (data-box styling) ---- */
.cs-stat-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-width:400px; }
.cs-stat-grid > div{ aspect-ratio:1/1; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; padding:18px;
  background:var(--cs-panel); border:1px solid var(--cs-panel-border); border-radius:12px; }
.cs-stat-grid .cs-meta-value{ font-weight:700; font-size:clamp(28px,3vw,36px); line-height:1; letter-spacing:-.5px; color:var(--cs-ink); }
.cs-stat-grid .cs-meta-value.accent{ color:var(--cs-accent); }
.cs-stat-grid .cs-meta-label{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--cs-label); }
.co-process .co-split-text{ display:flex; flex-direction:column; gap:32px; }

/* ---- Typography alignment with The case for changing (Finding the perfect stay) ---- */
.co-eyebrow, .co-eyebrow.mint, .co-col-eyebrow{ color:#051e30; }
.co-lede{ font-size:15px; line-height:25px; color:#2d3c50; }
.co-hero-lede{ color:#000; }
.co-bullets li{ font-family:"Instrument Sans",sans-serif; font-size:15px; line-height:25px; color:#2d3c50; align-items:baseline; }
.co-bullets li::before{ transform:translateY(-2px); }
.co-goal-quote{ font-size:clamp(19px,2vw,24px); line-height:1.45; }
.co-bubbles-note{ font-family:"Instrument Sans",sans-serif; font-size:13px; line-height:1.55; color:#4b5563; max-width:460px; padding:16px 0; }
.co-pr li span{ font-family:"Instrument Sans",sans-serif; font-size:14px; line-height:22px; color:#2d3c50; }
.co-pr-num, .co-tag{ font-family:"DM Mono",monospace; font-weight:500; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#6b7280; }
.co-tag::before{ display:none; }
.co-path-title{ font-family:"Figtree",sans-serif; font-size:15px; font-weight:600; color:#111827; }
.co-path-sub{ font-family:"Instrument Sans",sans-serif; font-size:13px; line-height:1.5; color:#4b5563; }
.co-split-text .co-head{ gap:12px; }
.co-split-text .co-copy + .co-copy{ margin-top:12px; }

/* Solution media that's a screen recording: phone video over the frame's background art
   (positions from Figma web_2026 61:56139 — 375×812 phone at 224,112 in an 808×882 frame) */
.cs-sol-video{ position:relative; background-size:cover; background-position:center; }
.cs-sol-video video{ position:absolute; left:27.8%; top:8.1%; width:46.2%; height:auto; aspect-ratio:600/1340; object-fit:cover;
  border-radius:clamp(10px,2.2vw,18px) clamp(10px,2.2vw,18px) 0 0; box-shadow:0 20px 40px -12px rgba(0,0,0,.45); background:#fff; }

/* ---- Rollout path (drawn in SVG) ---- */
.cs-path{ margin:0; width:100%; max-width:460px; justify-self:end; display:flex; flex-direction:column; gap:8px; }
.cs-path svg{ width:100%; height:auto; display:block; overflow:visible; }
.cs-path-line{ fill:none; stroke:#33a58e; stroke-width:2.5; stroke-linecap:round; opacity:.85; stroke-dasharray:900; stroke-dashoffset:900; transition:stroke-dashoffset 1.8s cubic-bezier(.45,.05,.25,1); }
.cs-path.drawn .cs-path-line{ stroke-dashoffset:0; }
.cs-path-dots circle{ fill:#f9fafb; stroke:#33a58e; stroke-width:2; r:4.5px; opacity:0; transition:opacity .3s ease 1.2s; }
.cs-path.drawn .cs-path-dots circle{ opacity:1; }
.cs-path-phone .body{ fill:#fff; stroke:#c9d6d1; stroke-width:1.5; } .cs-path-phone .screen{ fill:#fff; }
.cs-path-phone .ui-strong{ fill:#9ca3af; } .cs-path-phone .ui-line{ fill:none; stroke:#e5e7eb; stroke-width:1.2; }
.cs-path-phone .ui-photo{ fill:#e9f0ee; } .cs-path-phone .ui-soft{ fill:#e5e7eb; } .cs-path-phone .ui-cta{ fill:#33a58e; opacity:.85; }
.cs-path-phone{ filter:drop-shadow(0 8px 16px rgba(20,29,56,.07)); }
.cs-path-star path{ fill:#f3d36b; stroke:none; transform-box:fill-box; transform-origin:center; transform:scale(0); transition:transform .45s cubic-bezier(.2,1.6,.4,1) 1.7s; }
.cs-path.drawn .cs-path-star path{ transform:scale(.85); }
.cs-path-label{ font-family:"Instrument Sans",sans-serif; font-weight:400; font-size:15px; fill:#6b7280; }
@media (prefers-reduced-motion:reduce){ .cs-path-line, .cs-path-dots circle, .cs-path-star path{ transition:none; } }

/* ---- Two stacked images in one media column ---- */
.co-stack{ display:flex; flex-direction:column; gap:16px; width:100%; }
@media (min-width:901px){ .co-split > .co-stack{ max-width:580px; justify-self:end; } }

/* ---- Learnings (shared with The case for changing) ---- */
.cs-learn{ background:#eef2fc; display:flex; flex-direction:column; justify-content:center; gap:32px; }
.cs-learn-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.cs-learn-grid li{ background:#fff; border:1px solid var(--cs-panel-border); border-radius:12px; padding:24px; display:flex; flex-direction:column; gap:10px; }
.cs-learn-grid .num{ font-family:"DM Mono",monospace; font-size:11px; color:var(--cs-label); }
.cs-learn-grid h3{ margin:0; font-weight:700; font-size:18px; line-height:1.3; color:var(--cs-ink); }
.cs-learn-grid p{ margin:0; font-family:"Instrument Sans",sans-serif; font-size:15px; line-height:25px; color:#2d3c50; }
@media (max-width:900px){ .cs-learn-grid{ grid-template-columns:1fr; } }
.co-outcomes{ display:flex; flex-direction:column; justify-content:center; gap:32px; }
.co-outcomes .co-head{ max-width:600px; }
.co-stack .co-frame + .co-frame img{ max-height:360px; width:100%; object-fit:cover; object-position:top center; }
main{ overflow-x:clip; }   /* no sideways scroll on phones from off-screen prototype screens */
.cs-meta-note{ margin:-20px 0 0; font-size:11px; line-height:1.5; color:var(--cs-label); }

/* ---- "Next case studies" header above the project cards ---- */
.cs-next-head{ grid-column:1 / -1; display:flex; flex-direction:column; gap:8px; margin-bottom:-8px; }
.cs-next-eyebrow{ font-weight:500; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--cs-accent); }
.cs-next-head h2{ margin:0; font-weight:700; font-size:clamp(24px,2.4vw,28px); line-height:1.25; color:var(--cs-ink); }
.ec-gallery .cs-next-eyebrow{ color:#c0cef2; } .ec-gallery .cs-next-head h2{ color:#fff; }
/* "Next case studies" cards: one per row on phones, on every case study */
@media (max-width:760px){
  .wo-gallery, .co-gallery, .ec-gallery, .pk-gallery{ grid-template-columns:1fr !important; gap:24px; }
}