/* Shared stylesheet for standalone /work/<slug>/ case-study pages.
   Every rule below is copied verbatim from the homepage's case-study
   modal / project-review / brand tokens in index.html, so these pages
   render with the exact same design, just as their own document instead
   of a click-triggered overlay. Keep in sync if the source rules change. */

@font-face{
  font-family:'ABC Pelikan';
  src:url('/assets/fonts/ABCPelikan-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'ABC Pelikan';
  src:url('/assets/fonts/ABCPelikan-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'ABC Pelikan';
  src:url('/assets/fonts/ABCPelikan-Extrabold.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Baskervville';
  src:url('/assets/fonts/Baskervville-Variable.ttf') format('truetype-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'TheBasics Mono';
  src:url('/assets/fonts/TheBasics-Mono.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'TheBasics';
  src:url('/assets/fonts/TheBasics-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --terra: #A02F06;
  --terra-deep: #6E1F02;
  --sky: #A5CFF9;
  --cream: #F2F1EB;
  --cream-warm: #E8E2D0;
  --ink: #14100D;
  --ink-soft: #3D332D;
  --ink-faint: #7A6F66;
  --line: rgba(20,16,13,0.1);
  --font-display: 'ABC Pelikan', system-ui, 'Helvetica Neue', sans-serif;
  --font-sans: 'ABC Pelikan', system-ui, 'Helvetica Neue', sans-serif;
  --font-serif: 'Baskervville', Baskerville, Georgia, serif;
  --font-text: 'TheBasics', system-ui, 'Helvetica Neue', sans-serif;
  --font-mono: 'TheBasics Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--font-sans);
}

/* ---- minimal page chrome (not part of the modal; just enough to host it) ---- */
.case-page-nav{
  display:flex;align-items:center;gap:12px;
  padding:22px clamp(20px,5vw,48px);
  border-bottom:1px solid var(--line);
}
.case-page-nav img{height:28px;width:auto;display:block}
.case-page-nav a{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
}
.case-page-back{
  margin-left:auto;font-family:var(--font-mono);font-size:12px;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);
  text-decoration:none;
}
.case-page-back:hover{color:var(--terra)}

/* Terminal-style top bar (cs-wide pages): matches the case-study modal's
   open-terminal look, dots on the left, back link standing in for tags. */
.cs-terminal-nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:12px;
  height:52px;padding:0 clamp(20px,5vw,48px);
  background:var(--cream-warm);border-bottom:1px solid var(--line);
}
.cs-terminal-dots{display:flex;gap:10px;text-decoration:none}
.cs-terminal-dots i{
  width:20px;height:20px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.cs-terminal-dots i:nth-child(1){background:var(--terra)}
.cs-terminal-dots i:nth-child(2){background:#D9A441}
.cs-terminal-dots i:nth-child(3){background:var(--sky)}
.cs-terminal-dots i svg{
  width:11px;height:11px;stroke:rgba(20,16,13,0.75);
  stroke-width:1.6;fill:none;stroke-linecap:round;
}
.cs-terminal-back{
  margin-left:auto;font-family:var(--font-mono);font-size:12px;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);
  text-decoration:none;
}
.cs-terminal-back:hover{color:var(--terra)}

.case-page-main{
  max-width:760px;margin:0 auto;padding:clamp(28px,5vw,48px) clamp(20px,5vw,48px) 80px;
}
.case-page-footer{
  border-top:1px solid var(--line);padding:22px clamp(20px,5vw,48px);
  font-family:var(--font-mono);font-size:12px;color:var(--ink-faint);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}

/* ---- everything below is copied verbatim from index.html ---- */
.case-eyebrow{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:0.15em;text-transform:uppercase;
  color:var(--terra);margin-bottom:10px;
  text-align:center;
}
.case-title{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(26px,4vw,32px);letter-spacing:-0.02em;
  margin-bottom:16px;
  text-align:center;
}
.case-links{display:flex;gap:10px;margin:0 0 28px;flex-wrap:wrap;justify-content:center}
/* The site nav is position:fixed. When a case page opens on text (no full-bleed
   video hero as the first child to sit behind the nav), the top padding alone
   doesn't clear the fixed nav on phones, so the title gets clipped. Add
   clearance only to a first-child eyebrow/title (video-hero pages are unaffected). */
@media (max-width:700px){
  .case-page-main > .case-eyebrow:first-child,
  .case-page-main > .case-title:first-child{ margin-top:48px; }
}
.case-link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:0.04em;
  color:var(--ink-soft);text-decoration:none;
  border:1px solid var(--line);border-radius:100px;
  padding:6px 14px;transition:color 0.2s,border-color 0.2s;
  transform-origin:center center;
}
.case-link:hover{animation:btn-book-wobble 1.6s ease-in-out infinite}
.case-links a:nth-child(1):hover{color:var(--terra);border-color:var(--terra)}
.case-links a:nth-child(2):hover{color:var(--sky);border-color:var(--sky)}
.case-link svg{width:13px;height:13px;flex:none;display:block}
@media (prefers-reduced-motion:reduce){.case-link:hover{animation:none}}
@keyframes btn-book-wobble{
  0%   { transform: rotate(0deg)    scale(1);    }
  25%  { transform: rotate(-1.4deg) scale(1.02); }
  50%  { transform: rotate(1.4deg)  scale(1.02); }
  75%  { transform: rotate(-0.7deg) scale(1.01); }
  100% { transform: rotate(0deg)    scale(1);    }
}
.case-video{
  position:relative;width:100%;aspect-ratio:16/9;
  background:var(--ink);border-radius:3px;margin-bottom:32px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.case-video iframe,.case-video video,.case-video svg{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}
.case-photo{
  width:100%;display:block;border-radius:3px;margin-bottom:32px;
}
/* Hero cover photo: a taller crop sitting under the title as the opening visual. */
.cs-hero-photo{
  height:clamp(260px, 46vh, 520px);
  object-fit:cover;object-position:center 42%;
  border-radius:12px;margin:6px 0 36px;
}
/* Full-bleed autoplaying video hero (De Club / NOX / Tamati): loops, no chrome,
   flush to the top of the page; scroll down into the case study. */
.cs-video-hero{
  position:relative;width:100vw;margin-left:calc(50% - 50vw);
  margin-top:calc(-1 * clamp(28px,5vw,48px));
  height:min(82vh,780px);min-height:360px;
  background:#14100D;overflow:hidden;margin-bottom:clamp(40px,7vh,88px);
}
.cs-video-hero video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.cs-video-hero-cue{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  color:var(--cream);font-family:var(--font-mono);
  font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  opacity:0.9;pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,0.5);
}
.cs-video-hero-cue svg{width:20px;height:20px;animation:cshcue 1.8s ease-in-out infinite}
@keyframes cshcue{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.case-block{margin-bottom:22px;text-align:center}
.case-block:last-child{margin-bottom:0}
.case-block h4{
  font-family:var(--font-mono);font-size:12px;
  letter-spacing:0.12em;text-transform:uppercase;
  color:var(--terra);margin-bottom:8px;
}
.case-block p{font-size:16px;line-height:1.6;color:var(--ink-soft)}
.case-block ul{
  margin:0;padding:0;list-style:none;display:inline-block;text-align:left;
}
.case-block li{
  position:relative;padding-left:18px;margin-bottom:10px;
  font-size:16px;line-height:1.6;color:var(--ink-soft);
}
.case-block li:last-child{margin-bottom:0}
.case-block li::before{
  content:"";position:absolute;left:0;top:0.6em;
  width:6px;height:6px;border-radius:50%;background:var(--terra);
}
.case-block li strong{color:var(--ink);font-weight:600}

.project-review{
  display:flex;gap:14px;align-items:center;
  margin:36px 0 0;padding:20px 2px 0;border-top:1px solid var(--line);
}
.project-review-photo{
  width:58px;height:58px;border-radius:50%;flex-shrink:0;object-fit:cover;
  background:var(--cream-warm);
}
.project-review-text{min-width:0}
.project-review-quote{
  font-family:var(--font-serif);font-style:italic;
  font-size:14px;line-height:1.4;color:var(--ink-soft);margin:0 0 5px;
}
.project-review-name{
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--ink-faint);
}
.project-review-stars{
  margin-top:5px;color:#D9A441;font-size:12px;letter-spacing:2px;line-height:1;
}

/* ==================================================================
   Deep-dive case-study layout (cs-*). Additive and reusable: the page
   opts in with .cs-wide on .case-page-main; older short pages and the
   about/privacy pages are untouched. Full-width rows, bullets over
   prose, geometric SVG illustrations in the homepage style.
   ================================================================== */
.case-page-main.cs-wide{max-width:1240px}

/* Hero */
.cs-hero-summary{
  font-family:var(--font-serif);font-size:clamp(17px,2.2vw,21px);line-height:1.5;
  color:var(--ink-soft);max-width:680px;margin:0 auto 24px;text-align:center;
}

/* Chapter label with a full-width rule after it */
.cs-section{margin-top:64px}
.cs-section-num{
  display:flex;align-items:center;gap:14px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--terra);margin-bottom:26px;
}
.cs-section-num::after{content:"";flex:1;height:1px;background:var(--line)}

/* Chapter opener: small centered illustration + heading, used above a
   horizontal facts/stat row so the icon reads as a topper, not a photo.
   Sections with no illustration (e.g. the client facts) just get a tight
   title + sub-line, no leftover gap where the icon used to sit. */
.cs-chapter-head{text-align:center;margin:0 auto 20px;max-width:560px}
.cs-chapter-illus{width:76px;height:76px;margin:0 auto 14px;display:block}
.cs-chapter-illus svg{width:100%;height:100%;display:block}
.cs-chapter-title{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(21px,2.6vw,26px);letter-spacing:-0.01em;margin:0 0 6px;color:var(--ink);
}
.cs-chapter-sub{font-size:15.5px;line-height:1.55;color:var(--ink-soft);margin:0}
.cs-chapter-sub strong{color:var(--ink)}

.cs-lead{font-size:17px;line-height:1.65;color:var(--ink-soft);margin:0}
.cs-lead strong{color:var(--ink)}
.cs-bullets{list-style:none;margin:16px 0 0;padding:0}
.cs-bullets li{
  position:relative;padding-left:18px;margin-bottom:10px;
  font-size:15.5px;line-height:1.55;color:var(--ink-soft);
}
.cs-bullets li:last-child{margin-bottom:0}
.cs-bullets li::before{
  content:"";position:absolute;left:0;top:0.55em;
  width:6px;height:6px;border-radius:50%;background:var(--terra);
}
.cs-bullets li strong{color:var(--ink);font-weight:600}

/* Client facts strip: no table, no card, no divider lines. Just a
   centered row of label-over-value pairs, each centered on itself. */
.cs-facts{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:32px 56px;margin-bottom:40px;
}
.cs-fact{text-align:center}
.cs-fact-label{
  font-family:var(--font-serif);font-style:italic;font-size:13px;
  letter-spacing:0.01em;color:var(--terra);margin-bottom:6px;
}
.cs-fact-value{font-family:var(--font-serif);font-size:17px;color:var(--ink)}
/* Phone: at least 3 facts per row (each takes a third of the row and
   wraps internally); a short last row stays centered via justify-content. */
@media (max-width:560px){
  .cs-facts{gap:22px 12px}
  .cs-fact{flex:0 1 calc(33.333% - 12px)}
}

/* Big centered stats, no boxes: same treatment for the Problem's two
   numbers and the Impact section's results, so both read as one language.
   Stays two-per-row all the way down to phone width. */
.cs-stat-hero-row{
  display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:0 0 32px;
}
.cs-stat-hero-row.cs-stat-hero-row--quad{grid-template-columns:repeat(4,1fr)}
@media (max-width:700px){
  .cs-stat-hero-row.cs-stat-hero-row--quad{grid-template-columns:1fr 1fr;gap:20px 16px}
}
@media (max-width:560px){
  .cs-stat-hero-row{gap:16px}
}
.cs-stat-hero{text-align:center}
.cs-stat-hero-num{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(40px,5.5vw,64px);line-height:1;color:var(--terra);
  white-space:nowrap;
}
.cs-stat-hero-row--quad .cs-stat-hero-num{font-size:clamp(20px,4vw,46px)}
.cs-stat-hero-label{
  font-size:15.5px;line-height:1.5;color:var(--ink-soft);margin:10px auto 0;max-width:360px;
}
.cs-stat-hero-row--quad .cs-stat-hero-label{max-width:220px;font-size:13.5px}
@media (max-width:560px){
  .cs-stat-hero-num{font-size:clamp(26px,7vw,40px)}
  .cs-stat-hero-label{font-size:13px}
  .cs-stat-hero-row--quad .cs-stat-hero-label{font-size:11.5px}
}
/* Bottleneck cards: one row of four, icon on top */
.cs-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px}
.cs-card{
  background:var(--cream-warm);border:1px solid var(--line);border-radius:6px;
  padding:22px;
}
.cs-card svg{width:38px;height:38px;display:block;margin-bottom:14px}
.cs-card h4{
  font-family:var(--font-serif);font-weight:500;font-size:18px;margin:0 0 8px;color:var(--ink);
}
.cs-card p{font-size:14px;line-height:1.55;color:var(--ink-soft);margin:0}
@media (max-width:900px){.cs-cards{grid-template-columns:1fr 1fr}}
@media (max-width:480px){
  .cs-cards{gap:10px}
  .cs-card{padding:16px}
  .cs-card svg{width:30px;height:30px;margin-bottom:10px}
  .cs-card h4{font-size:16px}
  .cs-card p{font-size:13px}
}

/* Two system terminals side by side */
.cs-systems{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch;margin-top:26px}
@media (max-width:800px){.cs-systems{grid-template-columns:1fr}}

/* System blocks framed as terminal windows (matches the homepage cards) */
.cs-system{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--cream);display:flex;flex-direction:column;
}
.cs-system-bar{
  display:flex;align-items:center;gap:12px;
  padding:10px 15px;background:var(--cream-warm);border-bottom:1px solid var(--line);
}
.cs-system-dots{display:flex;gap:7px}
.cs-system-dots i{width:11px;height:11px;border-radius:50%;display:block}
.cs-system-dots i:nth-child(1){background:var(--terra)}
.cs-system-dots i:nth-child(2){background:#D9A441}
.cs-system-dots i:nth-child(3){background:var(--sky)}
.cs-system-tags{
  margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;
}
.cs-system-tag{
  font-family:var(--font-mono);font-size:9px;letter-spacing:0.02em;
  color:var(--ink-soft);border:1px solid var(--line);border-radius:100px;
  padding:3px 9px;white-space:nowrap;
}
.cs-system-body{padding:22px 24px;flex:1}
.cs-system-name{
  font-family:var(--font-mono);font-size:12px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--terra);margin-bottom:6px;
}
.cs-system-title{
  font-family:var(--font-serif);font-weight:500;font-size:21px;margin:0 0 14px;color:var(--ink);
}
.cs-system-body ul{margin:0;padding:0;list-style:none}
.cs-system-body li{
  position:relative;padding-left:18px;margin-bottom:9px;
  font-size:15px;line-height:1.55;color:var(--ink-soft);
}
.cs-system-body li:last-child{margin-bottom:0}
.cs-system-body li::before{
  content:"";position:absolute;left:0;top:0.55em;
  width:6px;height:6px;border-radius:50%;background:var(--terra);
}

/* Process timeline: phase groups with a bold header bar, tasks cascading
   underneath in a staggered waterfall on desktop. On mobile the stagger
   drops and tasks pair up two-per-row instead of one long list. */
/* Process & Build rendered as a single clean vertical timeline: one rail with
   dot markers and dated entries stacked in order. Same on desktop and mobile. */
.cs-phasegroups{
  display:block;position:relative;padding-left:32px;margin-bottom:8px;
}
.cs-phasegroups::before{
  content:"";position:absolute;left:12px;top:12px;bottom:12px;width:2px;
  background:var(--sky);
}
.cs-phasegroup{position:relative}
.cs-phasegroup + .cs-phasegroup{margin-top:22px}
.cs-phasegroup-bar{
  display:inline-block;position:relative;
  background:var(--terra);color:var(--cream);
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:0.04em;font-size:13px;padding:8px 16px;border-radius:100px;
  margin-bottom:16px;
}
.cs-phasegroup-bar::before{
  content:"";position:absolute;left:-27px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;border-radius:50%;background:var(--sky);
  box-shadow:0 0 0 4px var(--cream);
}
.cs-phasegroup-cards{display:flex;flex-direction:column;gap:14px}
.cs-phasegroup-card{
  width:100%;background:var(--cream-warm);border:1px solid var(--line);
  border-radius:8px;padding:16px 20px;position:relative;
}
.cs-phasegroup-card::before{
  content:"";position:absolute;left:-27px;top:18px;
  width:10px;height:10px;border-radius:50%;background:var(--cream);
  border:2px solid var(--sky);box-shadow:0 0 0 4px var(--cream);
}
/* Scroll traveler: a dot that slides down the rail as you scroll the section. */
.cs-tl-traveler{
  position:absolute;left:13px;top:12px;transform:translate(-50%,-50%);
  width:14px;height:14px;border-radius:50%;background:var(--terra);
  box-shadow:0 0 0 4px var(--cream), 0 0 12px rgba(160,47,6,0.55);
  z-index:2;pointer-events:none;opacity:0;transition:opacity 0.3s ease;
  will-change:top;
}
.cs-anim-on .cs-tl-traveler{opacity:1}
.cs-phasegroup-when{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--terra);margin-bottom:6px;
}
.cs-phasegroup-card h4{
  font-family:var(--font-serif);font-weight:500;font-size:16.5px;margin:0 0 6px;color:var(--ink);
}
.cs-phasegroup-card p{font-size:13.5px;line-height:1.5;color:var(--ink-soft);margin:0}
/* Light scroll reveal, driven by an IntersectionObserver (assets/case-page.js):
   it adds .cs-anim-on to the container, then .is-in to each item as it enters
   view. Works in every browser and inside the popup iframe. No JS or reduced
   motion = everything stays visible. */
@media (prefers-reduced-motion: no-preference){
  .cs-anim-on .cs-phasegroup-bar,
  .cs-anim-on .cs-phasegroup-card{
    opacity:0;transform:translateY(16px);
    transition:opacity 0.55s ease, transform 0.6s cubic-bezier(0.2,0.9,0.3,1);
  }
  .cs-anim-on .cs-phasegroup-bar.is-in,
  .cs-anim-on .cs-phasegroup-card.is-in{opacity:1;transform:none}
}
/* The timeline stays single-column everywhere; on narrow screens just tighten
   the rail offset and type. */
@media (max-width:700px){
  .cs-phasegroups{padding-left:26px}
  .cs-phasegroups::before{left:9px}
  .cs-phasegroup-bar{padding:7px 14px;font-size:12px}
  .cs-phasegroup-bar::before{left:-23px;width:14px;height:14px}
  .cs-phasegroup-card{padding:13px 15px}
  .cs-phasegroup-card::before{left:-24px}
  .cs-tl-traveler{left:10px}
  .cs-phasegroup-when{font-size:9.5px}
  .cs-phasegroup-card h4{font-size:14.5px}
  .cs-phasegroup-card p{font-size:12.5px;line-height:1.45}
}
/* ---- Shared structure promoted from De Club ---- */
/* Uppercase case title */
.case-title{text-transform:uppercase}
/* Icon-only social links (text label hidden; supply an aria-label per link) */
.case-links .case-link{
  gap:0;padding:0;width:42px;height:42px;border-radius:50%;
  justify-content:center;font-size:0;
}
.case-links .case-link svg{width:18px;height:18px}
.case-links a.case-link:hover{color:var(--terra);border-color:var(--terra)}
/* Testimonial lifted into the hero, under the social icons */
.cs-hero-review{
  max-width:600px;margin:18px auto 0;padding:0;border-top:none;
  justify-content:center;
}

/* Impact: outcome bullets get their own row, the results video gets its
   own full-width row right below (kept wide, aspect-ratio unchanged). */
.cs-impact-bullets{max-width:640px;margin:0 auto 36px}
.cs-video-row .case-video{max-width:920px;margin:0 auto}