/* ═══════════════════════════════════════════════════════════════
   WORK.CSS — /work (case studies index) page-scoped redesign layer,
   loaded after styles.min.css. Brings the page into the same visual
   language as the rest of the redesign: Big Shoulders Display type,
   orange accent, black atmosphere + grain, numbered eyebrows.
   The tab/panel filtering UI and its component styles (already in
   this page's own inline <style>) are left untouched — this layer
   only resets the typographic/atmosphere foundation underneath it.
   ═══════════════════════════════════════════════════════════════ */

body {
  --cream: #F3ECDF;
  --accent: var(--orange);
  --ink: #0c0a08;
  --display: 'Big Shoulders Display', Impact, 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); }

/* Shared --max (1140px) caps this page's body sections just like the other
   redesigned pages did before their fix — uncap here too. */
.wrap { max-width: 100%; }

/* ── HERO: reset the shared 1140px cap so it bleeds full-width like the
   rest of the redesign; type upgraded to the new display face ── */
.sub-hero { max-width: none; margin: 0; border-color: rgba(243,236,223,.1) !important; }
.sub-hero h1 {
  font-family: var(--display); text-transform: uppercase; font-weight: 900; letter-spacing: 0;
  font-size: clamp(2.8rem, 7vw, 5.6rem); line-height: .94; margin: 0 0 1.4rem; color: var(--cream);
  max-width: none;
}
.sub-hero p { font-size: 1.25rem; line-height: 1.7; max-width: 640px; color: rgba(243,236,223,.62); font-weight: 400; }
.sub-hero .eyebrow { color: var(--accent); }

main h2 {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  letter-spacing: 0; color: var(--cream);
}

/* ── NAV / FOOTER: match the new palette (mirrors web-design-calgary.css) ── */
.nav { background: transparent; border-bottom: 1px solid transparent; height: 96px; }
.nav.scrolled { background: rgba(0,0,0,.9); backdrop-filter: blur(16px); border-color: rgba(243,236,223,.1); }
.nav-inner { height: 96px; align-items: center; padding-left: clamp(12px, 2vw, 20px); }
.nav-brand img { height: 44px; width: 44px; }
.nav-brand-word { background: none; -webkit-text-fill-color: currentColor; color: var(--cream); font-family: var(--display); font-weight: 900; letter-spacing: .04em; }
.nav-links { gap: clamp(1rem, 3vw, 2.4rem); }
.nav-links a {
  display: flex; flex-direction: column; line-height: 1.05;
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(.85rem, 1.3vw, 1.05rem);
  color: rgba(243,236,223,.55);
}
.nav-links a span:first-child { color: rgba(243,236,223,.35); font-size: .8em; }
.nav-links a:hover, .nav-links a.active { color: var(--cream); }
.nav-links a:hover span:first-child, .nav-links a.active span:first-child { color: var(--accent); }
.nav-links a::after { display: none; }
.nav-cta { background: var(--accent); border: 1px solid var(--accent); padding: .6rem 1.2rem; font-family: var(--mono); text-transform: uppercase; font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: var(--ink); transition: background .2s ease, color .2s ease; }
.nav-cta:hover { background: transparent; color: var(--cream); }
.footer { border-color: rgba(243,236,223,.1) !important; }
.footer-col-heading { font-family: var(--mono) !important; color: rgba(243,236,223,.5); }