body {
  --cream: #F3ECDF;
  --accent: var(--orange);
  --ink: #0c0a08;
  --display: 'Russo One', system-ui, sans-serif;
  --mono: 'Space Mono', 'Space Grotesk', monospace;
  --max: 100%;
  background: #000 !important;
  background-image: none !important;
  color: var(--cream);
}
body::after {
  display: block !important; content: ''; position: fixed; inset: 0; z-index: -1;
  pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 40% at 10% 8%, rgba(247,147,30,.16), transparent),
    radial-gradient(ellipse 50% 38% at 92% 14%, rgba(233,30,99,.14), transparent),
    radial-gradient(ellipse 55% 42% at 50% 88%, rgba(47,167,167,.12), transparent);
}
main, .footer { color: var(--cream); }
main p { color: rgba(243,236,223,.62); }

/* ═══════════════════════════════════════════════════════════════
   CASE-STUDY.CSS — the redesign layer for /work/* case study pages.
   Loaded after each page's inline <style>, so it overrides the old
   template look: gradient text, Space Grotesk headings, teal accents,
   fake browser chrome, rounded pill tags.
   ═══════════════════════════════════════════════════════════════ */
main, .cs-hero, .cs-body, .why-band { color: var(--cream); }
.cs-body p, .cs-hero .lead, .cs-detail-card p, .cs-result-card p, .cs-list li { color: rgba(243,236,223,.66); }
.cs-body strong, .cs-list li strong { color: var(--cream); }

/* type: Russo One headings, solid accent instead of gradient text */
.cs-hero h1, .cs-body h2, .why-band h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0; color: var(--cream); }
.cs-hero h1 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: .94; margin-bottom: 1.6rem; }
.cs-body h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1; margin-bottom: 1.2rem; }
.why-band h2 { font-size: clamp(2.2rem, 5vw, 4rem) !important; line-height: .95; }
.grad-text, .cs-stat-val, .ph-logo { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor !important; color: var(--accent) !important; }
.cs-detail-card h4, .cs-result-card h4, .cs-next-title { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; color: var(--cream); }
.cs-next-title { font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1; }

/* labels: Space Mono, square, orange */
.eyebrow, .cs-breadcrumb, .cs-tag, .cs-stat-label, .cs-next-label, .cs-next-tag, .cs-quote cite { font-family: var(--mono); letter-spacing: .08em; }
.eyebrow { color: var(--accent); font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.eyebrow::before { background: var(--accent) !important; }
.cs-breadcrumb { font-size: .7rem; text-transform: uppercase; }
.cs-breadcrumb a:hover { color: var(--accent); }
.cs-tag { border-radius: 0; font-size: .66rem; font-weight: 700; border-color: rgba(243,236,223,.2); color: rgba(243,236,223,.7); padding: .4rem .75rem; }
.cs-tag.teal { border-color: var(--accent); background: var(--accent); color: var(--ink); }

/* hero + stats */
.cs-hero { padding-top: clamp(8rem, 14vw, 10rem); border-bottom: 1px solid rgba(243,236,223,.1); }
.cs-hero .wrap, .cs-body { max-width: 960px; }
.cs-stats-bar { border-radius: clamp(12px, 2vw, 20px); background: rgba(243,236,223,.1); border-color: rgba(243,236,223,.1); }
.cs-stat { background: #070605; padding: 1.8rem 1.6rem; }
.cs-stat-val { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 4vw, 3rem); }
.cs-stat-label { font-size: .68rem; text-transform: uppercase; color: rgba(243,236,223,.55); }

/* screenshots: no fake browser chrome, framed like the rest of the site */
.cs-screenshot { border-radius: clamp(12px, 2vw, 20px); border: 1px solid rgba(243,236,223,.12); background: #0c0a08; }
.cs-screenshot-chrome { display: none !important; }
.cs-screenshot-placeholder { background: #0c0a08; }

/* cards, lists, quote */
.cs-body .section + .section { border-top-color: rgba(243,236,223,.1); }
.cs-detail-card, .cs-result-card { background: rgba(243,236,223,.03); border: 1px solid rgba(243,236,223,.1); border-radius: clamp(12px, 1.6vw, 16px); }
.cs-result-card .result-icon { color: var(--accent); border-color: rgba(247,147,30,.35) !important; background: rgba(247,147,30,.08) !important; border-radius: 10px; }
.cs-list li::before { background: var(--accent) !important; color: var(--accent) !important; border-radius: 0 !important; }
.cs-quote { background: var(--accent); border: 0; border-left: 0; border-radius: clamp(12px, 2vw, 20px); padding: clamp(1.8rem, 4vw, 3rem); color: var(--ink);
  background-image: repeating-linear-gradient(60deg, rgba(0,0,0,.09) 0, rgba(0,0,0,.09) 1px, transparent 1px, transparent 5px); }
main .cs-quote p, .cs-quote p { color: var(--ink); font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.5; }
.cs-quote cite { color: rgba(12,10,8,.75); font-size: .72rem; text-transform: uppercase; font-style: normal; }
.stack-pill, .palette-swatch { border-radius: 0; }

/* next project + closing band */
.cs-next { border-radius: clamp(12px, 2vw, 20px); border: 1px solid rgba(243,236,223,.12); background: rgba(243,236,223,.03); transition: background .3s ease, border-color .3s ease, transform .4s cubic-bezier(.16,1,.3,1); }
.cs-next:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-3px); }
.cs-next:hover .cs-next-title, .cs-next:hover .cs-next-label, .cs-next:hover .cs-next-tag, .cs-next:hover .cs-next-arrow { color: var(--ink); }
.cs-next-arrow { color: var(--accent); }
.why-band { background: transparent !important; border-top: 1px solid rgba(243,236,223,.1); }

/* buttons: flat, square, mono */
.btn { border-radius: 0 !important; font-family: var(--mono); text-transform: uppercase; font-size: .72rem; letter-spacing: .08em; font-weight: 700; padding: 1rem 1.8rem; box-shadow: none !important; }
.btn-primary { background: var(--accent) !important; color: var(--ink) !important; border: 1px solid var(--accent); }
.btn-primary:hover { background: transparent !important; color: var(--cream) !important; }
.btn-live, .btn-secondary, .btn-ghost { border-radius: 0 !important; }

/* footer matches the other redesigned pages */
.footer { background: transparent; }
.footer-col-heading, .footer-badges span { font-family: var(--mono); }

/* list items read as one sentence (the old flex layout split the bold lead
   and the rest of the line into separate columns) */
.cs-list li { display: block; position: relative; padding-left: 1.4rem; font-size: 1rem; }
.cs-list li::before { position: absolute; left: 0; top: .55em; width: 8px; height: 8px; margin: 0; }

/* leftovers from per-page templates: gold/teal highlight tags and the
   gradient corner bars on cards — all become the single orange accent */
.cs-tag.gold, .cs-tag.orange, .cs-tag[class*=" "] { border-color: var(--accent); color: var(--accent); background: transparent; }
.cs-tag.teal { background: var(--accent); color: var(--ink); }
.cs-detail-card::before, .cs-detail-card::after, .cs-result-card::before, .cs-result-card::after { background: var(--accent) !important; }