/* ==========================================================================
   Portfolio Website - Main Stylesheet
   ========================================================================== */

/* ==========================================================================
   1. Design Tokens (CSS Custom Properties)
   ========================================================================== */

:root {
  /* Spacing - 8px grid system - Synced from Figma: 2026-01-14 */
  --spacing-base: 8px;
  --spacing-1x: 8px;
  --spacing-2x: 16px;
  --spacing-3x: 24px;
  --spacing-4x: 32px;
  --spacing-6x: 48px;
  --spacing-10x: 80px;
  --spacing-15x: 120px; /* Desktop header/footer horizontal padding */

  /* Colors - Synced from Figma: 2026-01-14 */
  /* Biege palette (neutral grays with warm undertone) */
  --color-biege-100: #fffefc;
  --color-biege-200: #fffbf5;
  --color-biege-300: #f5f1eb;
  --color-biege-400: #e5dfd5;
  --color-biege-500: #dbd0bd;
  --color-biege-600: #bfb5a3;
  --color-biege-700: #a89c87;
  --color-biege-800: #665d4d;
  --color-biege-900: #403829;
  --color-biege-1000: #292114;

  /* Orange palette (accent color) */
  --color-orange-100: #fff9f0;
  --color-orange-200: #ffe8bf;
  --color-orange-300: #ffd68f;
  --color-orange-400: #ffc35c;
  --color-orange-500: #f0b34a;
  --color-orange-600: #d69c38;
  --color-orange-700: #bd831e;
  --color-orange-800: #8f5e09;
  --color-orange-900: #593a03;
  --color-orange-1000: #422c05;

  /* Turq palette (blue-green accent) */
  --color-turq-100: #f7fdff;
  --color-turq-200: #e8faff;
  --color-turq-300: #d0ebf2;
  --color-turq-400: #bedde5;
  --color-turq-500: #95c0cc;
  --color-turq-600: #6d9fad;
  --color-turq-700: #498191;
  --color-turq-800: #2e6473;
  --color-turq-900: #164552;
  --color-turq-1000: #062730;

  /* Highlighter palette (bright yellow for emphasis) */
  --color-highlighter-100: #fffbbf;
  --color-highlighter-200: #fff894;
  --color-highlighter-300: #fffc4d;

  /* Semantic colors */
  --color-black: #000000;

  /* Legacy colors - to be mapped to palette */
  --color-primary: #2C3E50; /* Consider mapping to biege-900 or biege-1000 */
  --color-accent: #E74C3C; /* Consider mapping to orange-500 */
  --color-text: #333333; /* Consider mapping to biege-900 */
  --color-background: #FFFFFF; /* Consider mapping to biege-100 */

  /* Typography - Synced from Figma: 2026-01-21 */
  --font-display: 'Work Sans', system-ui, -apple-system, sans-serif;
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Work Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  /* Font sizes - Synced from Figma: 2026-01-26 */
  --font-size-display-lg: 82px;
  --font-size-h1: 42px;
  --font-size-h2: 32px;
  --font-size-h2-mobile: 28px;
  --font-size-h3: 24px;
  --font-size-h4: 16px;
  --font-size-body-xxl: 33px;
  --font-size-body-xl: 22px;
  --font-size-body-lg: 18px;
  --font-size-body: 16px;
  --font-size-small: 14px;
  --font-size-label: 14px;
  --font-size-tag: 12px;
  --font-size-tag-mobile: 10px;
  --font-size-nav: 20px;

  /* Font weights - Synced from Figma: 2026-01-14 */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Line heights - Synced from Figma: 2026-01-14 */
  --line-height-display: 1.1;
  --line-height-tight: 1.2;
  --line-height-tight-mobile: 1.1;
  --line-height-description: 1.4;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  /* Breakpoints (for reference - use in @media queries) */
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1440px;

  /* Grid settings */
  --container-max-width: 1200px;
  --grid-gap: var(--spacing-3x); /* 24px */

  /* Effects - Synced from Figma: 2026-01-23 */
  --shadow-artefact: 0px 4px 28px -16px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   2. Reset & Base Styles
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
  background-color: var(--color-background);
}

/* Responsive font sizes for tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --font-size-display-lg: 70px;
    --font-size-body-xxl: 31px;
  }
}

/* Responsive font sizes for mobile */
@media (max-width: 767px) {
  :root {
    --font-size-display-lg: 33px;
    --font-size-h1: 32px;
    --font-size-h2: 28px;
    --font-size-h3: 22px;
    --font-size-body-xxl: 22px;
    /* Note: H4 mobile uses same size as desktop (16px) */
  }
}

/* ==========================================================================
   3. Layout Grid System
   ========================================================================== */

/* Container - Centers content with responsive padding */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-left: var(--spacing-2x);  /* 16px on mobile */
  padding-right: var(--spacing-2x);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    padding-left: var(--spacing-3x);  /* 24px on tablet */
    padding-right: var(--spacing-3x);
  }
}

/* Desktop: No padding - full 1200px content area */
@media (min-width: 1024px) {
  .container {
    padding-left: 0;
    padding-right: 0;
  }
}

/* 12-Column Grid System */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* 4 columns on mobile */
  gap: var(--spacing-2x);  /* 16px gap on mobile */
}

@media (min-width: 768px) {
  .grid-12 {
    grid-template-columns: repeat(8, 1fr);  /* 8 columns on tablet */
    gap: var(--spacing-3x);  /* 24px gap */
  }
}

@media (min-width: 1024px) {
  .grid-12 {
    grid-template-columns: repeat(12, 1fr);  /* 12 columns on desktop */
    gap: var(--spacing-3x);  /* 24px gap */
  }
}

/* Column Span Utilities */
.col-span-1  { grid-column: span 1; }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-6  { grid-column: span 6; }
.col-span-8  { grid-column: span 8; }
.col-span-12 { grid-column: span 12; }

/* Responsive column spans */
@media (min-width: 768px) {
  .col-span-md-4  { grid-column: span 4; }
  .col-span-md-6  { grid-column: span 6; }
  .col-span-md-8  { grid-column: span 8; }
}

@media (min-width: 1024px) {
  .col-span-lg-3  { grid-column: span 3; }
  .col-span-lg-4  { grid-column: span 4; }
  .col-span-lg-6  { grid-column: span 6; }
  .col-span-lg-8  { grid-column: span 8; }
  .col-span-lg-9  { grid-column: span 9; }
  .col-span-lg-12 { grid-column: span 12; }
}

/* ==========================================================================
   4. Common Layout Patterns
   ========================================================================== */

/* Simple responsive grid (auto-fits content) */
.grid {
  display: grid;
  gap: var(--spacing-3x);
  grid-template-columns: 1fr;  /* Single column on mobile */
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);  /* 2 columns on tablet */
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);  /* 3 columns on desktop */
  }
}

/* Case study card grid */
.case-study-grid {
  display: grid;
  gap: var(--spacing-3x);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .case-study-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .case-study-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Article layout (sidebar + content) */
.article-layout {
  display: grid;
  gap: var(--spacing-6x);
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .article-layout {
    grid-template-columns: 250px 1fr;
  }
}

/* ==========================================================================
   5. Typography
   ========================================================================== */

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-2x);
  color: var(--color-black);
}

h1 {
  font-size: var(--font-size-h1);
  line-height: 1.15;
}

h2 {
  font-size: var(--font-size-h2);
  line-height: 1.2;
}

h3 {
  font-size: var(--font-size-h3);
  line-height: 1.3;
}

h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  text-transform: uppercase;
}

/* Mobile heading adjustments */
@media (max-width: 767px) {
  h1 {
    line-height: 1.2;
  }

  h2 {
    line-height: 1.1;
  }

  h3 {
    line-height: 1.4;
  }
}

/* Display headings (for hero sections) */
.display-lg {
  font-family: var(--font-display);
  font-size: var(--font-size-display-lg);
  font-weight: var(--font-weight-semibold);
  line-height: 1.09;
  margin-bottom: var(--spacing-3x);
}

@media (max-width: 767px) {
  .display-lg {
    line-height: 1.15;
  }
}

/* Body text variations */
.body-large {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-relaxed);
}

.body-small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-normal);
}

/* Paragraphs */
p {
  margin-bottom: var(--spacing-2x);
}

p:last-child {
  margin-bottom: 0;
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: underline;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-accent);
}

a:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Navigation links */
.nav-link {
  font-family: var(--font-body);
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

/* Lists */
ul, ol {
  margin-bottom: var(--spacing-2x);
  padding-left: var(--spacing-3x);
}

li {
  margin-bottom: var(--spacing-1x);
}

li:last-child {
  margin-bottom: 0;
}

/* Labels & Tags */
.label,
.tag {
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   6. Components
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1x);
  padding: var(--spacing-2x) var(--spacing-4x);
  border: none;
  font-family: var(--font-heading);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  transform: translate3d(0, 0, 0);
  box-shadow: 0 0 0 0 var(--color-black), 0 0 0 2px var(--color-black);
  backface-visibility: hidden;
}

/* Primary Button */
.btn--primary {
  background: #ffffff;
  color: var(--color-black);
}

.btn--primary:hover {
  background: #ffffff;
  color: var(--color-black);
  box-shadow: 6px 6px 0 0 var(--color-black), 0 0 0 2px var(--color-black);
  transform: translate3d(-6px, -6px, 0);
}

.btn--primary:focus {
  outline: none;
  box-shadow: 0 0 0 5px var(--color-turq-500), 0 0 0 2px var(--color-black);
}

/* Secondary Button */
.btn--secondary {
  background: var(--color-biege-400);
  color: var(--color-black);
}

.btn--secondary:hover {
  background: var(--color-biege-400);
  color: var(--color-black);
  box-shadow: 6px 6px 0 0 var(--color-black), 0 0 0 2px var(--color-black);
  transform: translate3d(-6px, -6px, 0);
}

.btn--secondary:focus {
  outline: none;
  box-shadow: 0 0 0 5px var(--color-turq-500), 0 0 0 2px var(--color-black);
}

/* Tertiary Button (Text Link) */
.btn--tertiary {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-black);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  gap: var(--spacing-1x);
  box-shadow: none;
}

.btn--tertiary .btn__text {
  border-bottom: 2px dotted var(--color-orange-400);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.btn--tertiary:hover {
  transform: translate3d(0, 0, 0);
  box-shadow: none;
}

.btn--tertiary:hover .btn__text {
  color: var(--color-orange-400);
}

.btn__icon {
  width: 18px;
  height: 12px;
  transition: color 0.2s ease;
}

.btn--tertiary:hover .btn__icon {
  color: var(--color-orange-400);
}

.btn--tertiary:focus {
  outline: 4px solid var(--color-turq-500);
  outline-offset: 3px;
  box-shadow: none;
}

/* Button Size Variants */
.btn--large {
  font-family: var(--font-heading);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
}

.btn--tertiary-sm {
  font-size: 16px;
}

.btn--tertiary-lg {
  font-size: 18px;
  line-height: 1.55;
}

/* -----------------------------------------------------------------------------
   Header/Navigation
   ----------------------------------------------------------------------------- */

.header {
  background-color: var(--color-biege-200);
  padding: var(--spacing-3x) var(--spacing-2x);
  border-bottom: 2px solid var(--color-black);
}

@media (min-width: 768px) {
  .header {
    padding: var(--spacing-3x);
  }
}

@media (min-width: 1024px) {
  .header {
    padding: var(--spacing-3x) var(--spacing-4x);
  }
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}

/* Desktop nav spacing */
@media (min-width: 1024px) {
  .nav {
    gap: var(--spacing-6x);
  }
}

/* Tablet and Mobile nav spacing */
@media (max-width: 1023px) {
  .nav {
    gap: var(--spacing-4x);
  }
}

.nav__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav__link {
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-semibold);
  line-height: normal;
  letter-spacing: 0.3px;
  color: var(--color-black);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}

/* Hover state - solid underline */
.nav__link:hover {
  color: var(--color-black);
  border-bottom-color: var(--color-black);
  border-bottom-style: solid;
}

/* Active/current page - dotted underline */
.nav__link--active {
  border-bottom: 2px dotted var(--color-black);
}

/* Active link still responds to hover */
.nav__link--active:hover {
  border-bottom-style: solid;
}

/* Focus state - matches button tertiary focus style */
.nav__link:focus {
  color: var(--color-black);
  outline: 4px solid var(--color-turq-500);
  outline-offset: 3px;
  border-radius: 2px;
}

/* -----------------------------------------------------------------------------
   Footer
   ----------------------------------------------------------------------------- */

.footer {
  background-color: var(--color-biege-500);
  border-top: 2px solid var(--color-black);
  padding: var(--spacing-3x) var(--spacing-2x);
}

@media (min-width: 768px) {
  .footer {
    padding: var(--spacing-3x);
  }
}

@media (min-width: 1024px) {
  .footer {
    padding: var(--spacing-3x) var(--spacing-4x);
  }
}

.footer__inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-6x);
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
}

/* Mobile footer - horizontal layout with space-between */
@media (max-width: 767px) {
  .footer__inner {
    justify-content: space-between;
    gap: var(--spacing-2x);
  }

  /* Use small button variant on mobile */
  .footer .btn--tertiary-lg {
    font-size: 16px;
    line-height: 1.6;
  }
}


.footer__copyright {
  font-size: 18px;
  line-height: 1.55;
  color: var(--color-black);
}

@media (max-width: 767px) {
  .footer__copyright {
    font-size: 16px;
    line-height: 1.6;
  }
}

/* -----------------------------------------------------------------------------
   Text List
   ----------------------------------------------------------------------------- */

.text-list {
  font-family: var(--font-body);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-normal);
  color: var(--color-black);
}

.text-list__heading {
  font-family: var(--font-heading);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  text-transform: uppercase;
  margin: 0;
}

.text-list__content {
  font-weight: var(--font-weight-regular);
  margin: 0;
  white-space: pre-line;
}

/* ==========================================================================
   7. Page-Specific Styles
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Homepage
   ----------------------------------------------------------------------------- */

/* Page Layout */
.page-home {
  display: flex;
  flex-direction: column;
  height: 100dvh; /* Fixed height, accounts for mobile browser chrome */
  overflow: hidden; /* Prevent scrolling - everything fits in viewport */
}

.main--home {
  flex: 1;
  display: flex;
  align-items: center; /* Center content vertically in available space */
  overflow: auto; /* Safety valve if content exceeds available space */
  background-color: var(--color-biege-500);
  padding: var(--spacing-6x) var(--spacing-2x);
}

@media (min-width: 768px) {
  .main--home {
    padding: var(--spacing-10x) var(--spacing-3x);
  }
}

@media (min-width: 1024px) {
  .main--home {
    padding: var(--spacing-15x) var(--spacing-4x);
  }
}

.main--home__inner {
  width: 100%;
  max-width: var(--container-max-width); /* 1200px on < 1200px screens */
  margin: 0 auto;
}

/* Wide Desktop: 1200px+ - Allow content to grow beyond 1200px */
@media (min-width: 1200px) {
  .main--home__inner {
    max-width: 100%; /* Remove 1200px constraint, allow full width */
    padding-left: var(--spacing-4x); /* Add horizontal padding */
    padding-right: var(--spacing-4x);
  }
}

/* Hero Section */
.hero {
  width: 100%;
  max-width: 720px;
}

@media (min-width: 768px) {
  .hero {
    max-width: 720px;
  }
}

@media (min-width: 1024px) {
  .hero {
    max-width: 1200px; /* 12 columns - full container width */
  }
}

/* Wide Desktop: 1200px+ - Container scales with viewport */
@media (min-width: 1200px) {
  .hero {
    max-width: clamp(1200px, 100vw, 1600px);
    /* Grows with viewport to maintain character-per-line ratio */
  }
}

.hero__text {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  font-size: 33px;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--color-black);
  margin-bottom: var(--spacing-6x);
}

@media (min-width: 768px) {
  .hero__text {
    font-size: 70px;
    line-height: 1.09;
  }
}

@media (min-width: 1024px) {
  .hero__text {
    font-size: 90px;
    line-height: 1.07;
    margin-bottom: 0;
  }
}

/* Wide Desktop: 1200px+ - Font scales with viewport */
@media (min-width: 1200px) {
  .hero__text {
    font-size: clamp(90px, 7.5vw, 120px);
    /* At 1200px: 90px (7.5vw = 90px)
       At 1600px: 120px (7.5vw = 120px, hits max)
       Beyond 1600px: clamped at 120px */
  }
}

/* Line break - desktop only */
.hero__break {
  display: none;
}

@media (min-width: 1024px) {
  .hero__break {
    display: block;
  }
}

/* Hero link - "useful, usable solutions." */
.hero__link {
  color: var(--color-black);
  font-family: inherit; /* Inherit Work Sans Semibold from .hero__text */
  font-size: inherit; /* Inherit font size from .hero__text */
  font-weight: inherit; /* Inherit semibold weight */
  line-height: inherit; /* Inherit line height */
  text-decoration: none;
  border-bottom: 6px dotted var(--color-black);
  padding-bottom: 2px;
  transition: border-style 0.2s ease;
}

.hero__link:hover {
  color: var(--color-black);
  border-bottom-style: solid;
}

.hero__link:focus {
  color: var(--color-black);
  outline: 4px solid var(--color-turq-500);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Mobile: thinner underline (proportional to 33px font) */
@media (max-width: 767px) {
  .hero__link {
    border-bottom-width: 3px;
  }
}

/* Tablet: medium underline (proportional to 70px font) */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__link {
    border-bottom-width: 5px;
  }
}

/* Highlighter Effect - DEPRECATED (replaced with SVG stroke animations) */
/*
.highlight {
  background-color: var(--color-orange-400);
  padding: 0.05em 0.2em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  border-radius: 6px 2px 5px 3px / 2px 6px 3px 5px;
}

.highlight--not-desktop {
  background-color: transparent;
}

@media (max-width: 1023px) {
  .highlight--not-desktop {
    background-color: var(--color-orange-400);
  }
}
*/

/* Simple highlighter background */
.highlight {
  background-color: rgba(255, 252, 77, 0.57); /* highlighter-300 at 57% opacity */
  padding: 0 0.15em; /* Small horizontal padding */
  box-decoration-break: clone; /* For multi-line support if needed */
  -webkit-box-decoration-break: clone;
}

/* Padding adjustments for short screens */
@media (max-height: 700px) {
  .main--home {
    padding-top: var(--spacing-4x); /* 32px instead of 48px/80px/120px */
    padding-bottom: var(--spacing-4x);
  }
}

@media (max-height: 600px) {
  .main--home {
    padding-top: var(--spacing-3x); /* 24px for very short screens */
    padding-bottom: var(--spacing-3x);
  }
}


/* ==========================================================================
   8. Utilities
   ========================================================================== */

/* Spacing utilities */
.mt-1 { margin-top: var(--spacing-1x); }
.mt-2 { margin-top: var(--spacing-2x); }
.mt-3 { margin-top: var(--spacing-3x); }
.mt-4 { margin-top: var(--spacing-4x); }
.mt-6 { margin-top: var(--spacing-6x); }
.mt-10 { margin-top: var(--spacing-10x); }

.mb-1 { margin-bottom: var(--spacing-1x); }
.mb-2 { margin-bottom: var(--spacing-2x); }
.mb-3 { margin-bottom: var(--spacing-3x); }
.mb-4 { margin-bottom: var(--spacing-4x); }
.mb-6 { margin-bottom: var(--spacing-6x); }
.mb-10 { margin-bottom: var(--spacing-10x); }

/* Visibility utilities */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   8. Tag Component
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Tag
   Small label component for displaying skills, methods, or project types
   ----------------------------------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-1x);
  background-color: var(--color-orange-100);
  border: 1px dotted var(--color-orange-500);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: var(--font-size-tag);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
  text-transform: uppercase;
  color: var(--color-black);
}

.tag--small {
  padding: 4px;
  font-size: var(--font-size-tag-mobile);
}

/* ==========================================================================
   9. Case Study Card Component
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Case Study Card
   Card component linking to individual case studies from the index page
   ----------------------------------------------------------------------------- */

.case-study-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-biege-400);
  border: 2px solid var(--color-black);
  text-decoration: none;
  color: var(--color-black);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  max-width: 343px;
  width: 100%;
}

.case-study-card:hover {
  box-shadow: 5px 7px 0 0 var(--color-black);
  transform: translate(-2px, -2px);
}

.case-study-card:focus {
  outline: none;
  box-shadow: 0 0 0 5px var(--color-turq-500);
}

.case-study-card__content {
  display: flex;
  flex-direction: column;
  background-color: var(--color-biege-200);
  width: 100%;
}

.case-study-card__heading {
  padding: var(--spacing-2x) var(--spacing-3x);
  border-bottom: 2px solid var(--color-black);
  display: flex;
  align-items: center;
}

.case-study-card__title {
  font-family: var(--font-body);
  font-size: var(--font-size-h2-mobile);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight-mobile);
  margin: 0;
  color: var(--color-black);
  flex: 1;
}

.case-study-card__description-wrapper {
  padding: var(--spacing-2x) var(--spacing-3x);
  border-bottom: 2px solid var(--color-black);
}

.case-study-card__description {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  margin: 0;
  color: var(--color-black);
}

.case-study-card__tags {
  padding: var(--spacing-2x) var(--spacing-3x);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2x);
}

.case-study-card__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background-color: var(--color-orange-100);
  border: 1px dotted var(--color-orange-500);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: var(--font-size-tag-mobile);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
  text-transform: uppercase;
  color: var(--color-black);
}

.case-study-card__image-wrapper {
  display: none; /* Hidden on mobile */
  border-bottom: 2px solid var(--color-black);
}

.case-study-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Large Mobile & Tablet: 576px - 1023px */
@media (min-width: 576px) and (max-width: 1023px) {
  .case-study-card {
    max-width: 720px;
  }

  .case-study-card__heading {
    padding: var(--spacing-4x) var(--spacing-6x);
  }

  .case-study-card__title {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-tight);
  }

  .case-study-card__description-wrapper {
    padding: var(--spacing-4x);
  }

  .case-study-card__description {
    font-size: var(--font-size-body-xl);
    line-height: var(--line-height-description);
  }

  .case-study-card__tags {
    padding: var(--spacing-3x);
  }

  .case-study-card__tag {
    padding: var(--spacing-1x);
    font-size: var(--font-size-tag);
  }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  .case-study-card {
    flex-direction: row;
    max-width: 100%;
    min-height: 450px;
    height: auto;
  }

  .case-study-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border-right: 2px solid var(--color-black);
    max-width: 691px;
  }

  .case-study-card__heading {
    padding: var(--spacing-4x) var(--spacing-6x);
    min-height: 140px;
    height: auto;
  }

  .case-study-card__title {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-tight);
  }

  .case-study-card__description-wrapper {
    padding: var(--spacing-4x);
    min-height: 188px;
    height: auto;
  }

  .case-study-card__description {
    font-size: var(--font-size-body-xl);
    line-height: var(--line-height-description);
  }

  .case-study-card__tags {
    padding: var(--spacing-3x);
    min-height: 122px;
    height: auto;
    align-items: flex-start;
  }

  .case-study-card__tag {
    padding: var(--spacing-1x);
    font-size: var(--font-size-tag);
  }

  .case-study-card__image-wrapper {
    display: block;
    width: 509px;
    min-height: 448px;
    height: auto;
    overflow: hidden;
    flex-shrink: 0;
    align-self: stretch;
    border-bottom: none;
  }
}

/* ==========================================================================
   10. Page-Specific Styles
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Case Studies Index Page
   ----------------------------------------------------------------------------- */

.main-content {
  background-color: var(--color-biege-500);
  padding: var(--spacing-6x) 0;
}

.page-heading {
  font-family: var(--font-body);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin: 0 auto var(--spacing-6x);
  padding: 0;
  color: var(--color-black);
  max-width: var(--container-max-width);
  width: 100%;
}

.case-studies-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3x);
  align-items: center;
  margin-bottom: var(--spacing-6x);
  padding: 0;
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1024px) {
  .main-content {
    padding-top: 80px;
  }

  .page-heading {
    margin-bottom: 48px;
  }

  .case-studies-list {
    align-items: stretch;
  }
}

/* Large Mobile & Tablet: 576px - 1023px */
@media (min-width: 576px) and (max-width: 1023px) {
  .main-content {
    padding-top: 48px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .page-heading {
    max-width: 720px;
    margin-bottom: 32px;
  }
}

/* Constrained Desktop: 1024px - 1240px */
@media (min-width: 1024px) and (max-width: 1240px) {
  .case-studies-list {
    padding-left: 24px;
    padding-right: 24px;
  }

  .page-heading {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Small Mobile: < 576px */
@media (max-width: 575px) {
  .main-content {
    padding: 48px 0 var(--spacing-4x) 0;
  }

  .page-heading {
    font-size: var(--font-size-h1);
    margin-bottom: 32px;
    max-width: 343px;
  }

  .case-studies-list {
    margin-bottom: var(--spacing-4x);
  }
}

/* -----------------------------------------------------------------------------
   Work Page
   ----------------------------------------------------------------------------- */

.page-work {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main--work {
  flex: 1;
  background-color: var(--color-biege-500);
  padding: var(--spacing-6x) 0;
}

/* Work Page Layout - Mobile First (< 768px) */
.work-layout {
  display: flex;
  flex-direction: column;
}

/* Main Content */
.work-layout__main {
  display: flex;
  flex-direction: column;
}

.work-content {
  font-size: var(--font-size-body-xxl);
  line-height: 1.4;
  color: var(--color-black);
}

.work-content p {
  margin-bottom: var(--spacing-3x);
}

.work-content p:last-child {
  margin-bottom: 0;
}

/* Sidebar - stacked lists on mobile with 16px gap */
.work-layout__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2x); /* 16px gap between list components */
  margin-top: var(--spacing-6x); /* 48px gap from body text */
}

/* Actions section - comes after sidebar on mobile/tablet */
.work-layout__actions {
  display: flex;
  flex-direction: column;
  margin-top: var(--spacing-6x); /* 48px gap from sidebar */
  margin-bottom: var(--spacing-15x); /* 120px gap to footer */
}

.work-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2x);
  margin-bottom: var(--spacing-3x);
}

.work-actions .btn {
  width: 100%;
}

.work-password-note {
  font-size: var(--font-size-small);
  line-height: var(--line-height-normal);
  color: var(--color-black);
  margin: 0;
}

/* Tablet: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .main--work {
    padding: var(--spacing-6x) 0;
  }

  .work-content {
    line-height: 1.35;
  }

  /* Sidebar with two lists side by side */
  .work-layout__sidebar {
    flex-direction: row;
    gap: var(--spacing-6x);
  }

  .work-layout__sidebar > .text-list {
    flex: 1;
  }

  /* Buttons side by side */
  .work-actions {
    flex-direction: row;
    gap: var(--spacing-3x);
  }

  .work-actions .btn {
    flex: 0 0 auto;
    width: auto;
  }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  .main--work {
    padding: var(--spacing-10x) 0;
  }

  .work-content {
    line-height: 1.3;
  }

  /* Two-column grid layout using 12-column grid */
  .work-layout {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--spacing-3x); /* 24px between main and sidebar columns */
    row-gap: var(--spacing-10x); /* 80px between main and actions rows */
    grid-template-areas:
      "main main main main main main main main main sidebar sidebar sidebar"
      "actions actions actions actions actions actions actions actions actions sidebar sidebar sidebar";
  }

  .work-layout__main {
    grid-area: main;
    padding-right: var(--spacing-4x);
  }

  .work-layout__sidebar {
    grid-area: sidebar;
    flex-direction: column;
    gap: var(--spacing-4x);
    margin-top: 0; /* Reset mobile margin, grid handles spacing */
  }

  .work-layout__actions {
    grid-area: actions;
    padding-right: var(--spacing-4x);
    margin-top: 0; /* Reset mobile margin, grid handles spacing */
    margin-bottom: var(--spacing-15x); /* 120px gap to footer */
  }

  /* Buttons side by side on desktop */
  .work-actions {
    flex-direction: row;
    gap: var(--spacing-3x);
  }

  .work-actions .btn {
    flex: 0 0 auto;
    width: auto;
  }
}

/* Constrained Desktop: 1024px - 1240px */
@media (min-width: 1024px) and (max-width: 1240px) {
  .page-work .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ==========================================================================
   11. Case Study Page Layout & Components
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Page Layout & Section Backgrounds
   ----------------------------------------------------------------------------- */

.page-case-study {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main--case-study {
  flex: 1;
}

/* Section backgrounds - alternating pattern for visual rhythm */
.case-study-section {
  padding: var(--spacing-10x) 0;
}

.case-study-section--default {
  background-color: var(--color-biege-100);
}

.case-study-section--emphasis {
  background-color: var(--color-biege-300);
}

.case-study-section--highlight {
  background-color: var(--color-orange-100);
}

@media (max-width: 767px) {
  .case-study-section {
    padding: var(--spacing-6x) 0;
  }
}

/* Section typography */
.case-study-section h2 {
  margin-bottom: var(--spacing-1x); /* 8px */
}

.case-study-section h3 {
  margin-top: var(--spacing-6x); /* 48px - separates from preceding paragraph */
  margin-bottom: var(--spacing-1x); /* 8px */
}

.case-study-section p {
  margin-bottom: var(--spacing-3x);
}

.case-study-section ul {
  margin-bottom: var(--spacing-3x);
}

/* -----------------------------------------------------------------------------
   Case Study Hero
   ----------------------------------------------------------------------------- */

.case-study-hero {
  background-color: var(--color-biege-200);
  padding: var(--spacing-10x) 0;
}

@media (max-width: 767px) {
  .case-study-hero {
    padding: var(--spacing-6x) 0;
  }
}

.case-study-hero h1 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--color-black);
  margin-bottom: var(--spacing-4x);
}

.case-study-hero__intro {
  font-family: var(--font-body);
  font-size: var(--font-size-body-xl);
  line-height: var(--line-height-description);
  color: var(--color-black);
  margin-bottom: var(--spacing-6x);
  max-width: 900px;
}

@media (max-width: 767px) {
  .case-study-hero__intro {
    font-size: var(--font-size-body-lg);
  }
}

/* -----------------------------------------------------------------------------
   Metadata Grid
   ----------------------------------------------------------------------------- */

.metadata-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 2px solid var(--color-black);
  background-color: var(--color-biege-100);
}

@media (min-width: 768px) {
  .metadata-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.metadata-grid__item {
  padding: var(--spacing-3x);
  border-right: 2px solid var(--color-biege-400);
}

.metadata-grid__item:last-child {
  border-right: none;
}

@media (max-width: 767px) {
  .metadata-grid__item {
    border-right: none;
    border-bottom: 2px solid var(--color-biege-400);
  }

  .metadata-grid__item:last-child {
    border-bottom: none;
  }
}

.metadata-grid__label {
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
  color: var(--color-black);
  margin-bottom: var(--spacing-1x);
}

.metadata-grid__content {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-relaxed);
  color: var(--color-black);
}

.metadata-grid__content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.metadata-grid__content li {
  margin-bottom: var(--spacing-1x);
}

.metadata-grid__content li:last-child {
  margin-bottom: 0;
}

.metadata-grid__content li:before {
  content: "• ";
  color: var(--color-orange-500);
  font-weight: bold;
  margin-right: var(--spacing-1x);
}

/* -----------------------------------------------------------------------------
   Insight Boxout
   ----------------------------------------------------------------------------- */

.insight-boxout {
  background-color: var(--color-orange-100);
  border-left: 8px solid var(--color-orange-500);
  padding: var(--spacing-4x);
  margin: var(--spacing-6x) 0;
}

@media (max-width: 767px) {
  .insight-boxout {
    padding: var(--spacing-3x);
    border-left-width: 6px;
  }
}

.insight-boxout h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
  margin: 0 0 var(--spacing-2x) 0;
}

.insight-boxout p {
  font-size: var(--font-size-body);
  line-height: var(--line-height-relaxed);
  color: var(--color-black);
  margin-bottom: var(--spacing-2x);
}

.insight-boxout p:last-child {
  margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   Problem Cards Grid
   ----------------------------------------------------------------------------- */

.problem-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-3x);
  margin: var(--spacing-6x) 0;
}

@media (min-width: 768px) {
  .problem-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.problem-card {
  background-color: var(--color-biege-300);
  border: 2px solid var(--color-black);
  padding: var(--spacing-4x);
  position: relative;
}

@media (max-width: 767px) {
  .problem-card {
    padding: var(--spacing-3x);
  }
}

.problem-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-orange-400);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
  margin-bottom: var(--spacing-2x);
}

.problem-card__title {
  font-family: var(--font-body);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  color: var(--color-black);
  margin: 0 0 var(--spacing-2x) 0;
}

.problem-card__description {
  font-size: var(--font-size-body);
  line-height: var(--line-height-relaxed);
  color: var(--color-black);
  margin: 0;
}

/* -----------------------------------------------------------------------------
   Image with Caption
   ----------------------------------------------------------------------------- */

.case-study-image {
  margin: var(--spacing-6x) 0;
}

.case-study-image img {
  width: 100%;
  height: auto;
  border: 2px solid var(--color-black);
  display: block;
}

.case-study-image__caption {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  color: var(--color-black);
  margin-top: var(--spacing-2x);
  font-style: italic;
}

.case-study-image__fig {
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  color: var(--color-orange-500);
  text-transform: uppercase;
  margin-right: var(--spacing-1x);
  font-style: normal;
}

/* -----------------------------------------------------------------------------
   Multi-Image Grid
   ----------------------------------------------------------------------------- */

.multi-image-grid {
  display: grid;
  gap: var(--spacing-3x);
  margin: var(--spacing-6x) 0;
}

.multi-image-grid--2col {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .multi-image-grid--2col {
    grid-template-columns: repeat(2, 1fr);
  }
}

.multi-image-grid--4col {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .multi-image-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Images within multi-image grid inherit case-study-image styles */
.multi-image-grid .case-study-image {
  margin: 0;
}

/* -----------------------------------------------------------------------------
   Stats Callout
   ----------------------------------------------------------------------------- */

.stats-callout {
  text-align: center;
  padding: var(--spacing-4x) 0;
  border-top: 4px solid var(--color-orange-500);
  margin: var(--spacing-6x) 0;
}

.stats-callout__number {
  font-family: var(--font-heading);
  font-size: 64px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-orange-500);
  margin-bottom: var(--spacing-2x);
}

@media (max-width: 767px) {
  .stats-callout__number {
    font-size: 48px;
  }
}

.stats-callout__label {
  font-family: var(--font-body);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-normal);
  color: var(--color-black);
}

@media (max-width: 767px) {
  .stats-callout__label {
    font-size: var(--font-size-body);
  }
}

/* Stats Grid (multiple stats side by side) */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-3x);
  margin: var(--spacing-6x) 0;
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Stats within stats-grid inherit stats-callout styles */
.stats-grid .stats-callout {
  margin: 0;
}

/* -----------------------------------------------------------------------------
   Pull Quote
   ----------------------------------------------------------------------------- */

.pull-quote {
  max-width: 800px;
  margin: var(--spacing-6x) auto;
  padding: var(--spacing-6x) 0;
  text-align: center;
}

@media (max-width: 767px) {
  .pull-quote {
    padding: var(--spacing-4x) 0;
  }
}

.pull-quote p {
  font-family: var(--font-heading);
  font-size: var(--font-size-body-xl);
  font-weight: var(--font-weight-regular);
  font-style: italic;
  line-height: var(--line-height-description);
  color: var(--color-black);
  margin: 0;
}

@media (max-width: 767px) {
  .pull-quote p {
    font-size: var(--font-size-body-lg);
  }
}

/* -----------------------------------------------------------------------------
   Section Divider
   ----------------------------------------------------------------------------- */

.section-divider {
  margin: var(--spacing-6x) 0;
  border: 0;
  border-top: 2px solid var(--color-biege-400);
  position: relative;
}

.section-divider--icon {
  text-align: center;
}

.section-divider--icon:before {
  content: "◆";
  display: inline-block;
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-biege-100);
  padding: 0 var(--spacing-2x);
  color: var(--color-orange-400);
  font-size: 24px;
}

/* -----------------------------------------------------------------------------
   Process Steps (Numbered List)
   ----------------------------------------------------------------------------- */

.process-steps {
  margin: var(--spacing-6x) 0;
}

.process-step {
  display: flex;
  gap: var(--spacing-3x);
  margin-bottom: var(--spacing-4x);
  align-items: flex-start;
}

.process-step:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .process-step {
    gap: var(--spacing-2x);
  }
}

.process-step__badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-orange-400);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
}

.process-step__content {
  flex: 1;
}

.process-step__title {
  font-family: var(--font-body);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  color: var(--color-black);
  margin: 0 0 var(--spacing-1x) 0;
}

.process-step__description {
  font-size: var(--font-size-body);
  line-height: var(--line-height-relaxed);
  color: var(--color-black);
  margin: 0;
}

/* -----------------------------------------------------------------------------
   Case Study Components
   ----------------------------------------------------------------------------- */

/* Breadcrumbs */
.cs-breadcrumbs {
  width: 100%;
  background-color: var(--color-biege-300);
  padding: var(--spacing-4x) 0;
}

.cs-breadcrumbs__list {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-1x);
  list-style: none;
  padding: 0 var(--spacing-2x);
  margin: 0;
  max-width: var(--container-max-width);
}

.cs-breadcrumbs__item {
  display: flex;
  align-items: center;
}

.cs-breadcrumbs__link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  color: var(--color-black);
  text-decoration: none;
  border-bottom: 2px dotted var(--color-black);
  padding-bottom: 1px;
  transition: border-style 0.2s ease, box-shadow 0.2s ease, padding 0.2s ease;
}

.cs-breadcrumbs__link:hover {
  border-bottom-style: solid;
}

.cs-breadcrumbs__link:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--color-turq-500);
  padding: 3px 4px 1px;
}

.cs-breadcrumbs__divider {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  color: var(--color-black);
}

.cs-breadcrumbs__current {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  color: var(--color-black);
}

/* Tablet styles */
@media (min-width: 768px) {
  .cs-breadcrumbs__list {
    padding: 0 var(--spacing-3x);
  }
}

/* Desktop styles */
@media (min-width: 1024px) {
  .cs-breadcrumbs__list {
    padding: 0;
    margin: 0 auto;
  }
}

/* Constrained Desktop: 1024px - 1240px
   IMPORTANT: When using max-width containers (1200px), always add padding
   on intermediate desktop sizes to prevent content butting against screen edge.
   This applies to ALL components that use max-width: var(--container-max-width) */
@media (min-width: 1024px) and (max-width: 1240px) {
  .cs-breadcrumbs__list {
    padding-left: var(--spacing-3x);
    padding-right: var(--spacing-3x);
  }
}
/* Case Study Header */
.cs-header {
  width: 100%;
  background-color: var(--color-biege-300);
  padding: 0 var(--spacing-2x) var(--spacing-6x);
  border-bottom: 2px solid var(--color-black);
}

.cs-header__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2x);
  max-width: var(--container-max-width); /* 1200px */
  margin: 0 auto;
}

/* Title Section */
.cs-header__title {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1x);
}

.cs-header__heading {
  font-family: var(--font-heading);
  font-size: var(--font-size-h2); /* 32px on mobile */
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
  line-height: var(--line-height-tight);
  margin: 0;
}

.cs-header__description {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-black);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* Meta Section (CLIENT & MY ROLE) */
.cs-header__meta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1x);
}

.cs-header__meta-section {
  display: flex;
  flex-direction: column;
}

.cs-header__meta-label {
  font-family: var(--font-heading);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
  color: var(--color-black);
  line-height: 1.4;
  text-transform: uppercase;
  margin: 0;
}

.cs-header__meta-text {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-black);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* Tools & Skills Section */
.cs-header__tools {
  display: flex;
  flex-direction: column;
}

.cs-header__tools-label {
  font-family: var(--font-heading);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
  color: var(--color-black);
  line-height: 1.4;
  text-transform: uppercase;
  margin: 0;
}

.cs-header__tools-list {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-black);
  line-height: var(--line-height-relaxed);
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.cs-header__tools-list li {
  margin-bottom: 0;
  display: flex;
  align-items: flex-start;
}

.cs-header__tools-list li::before {
  content: "-";
  margin-right: 8px;
  flex-shrink: 0;
}

/* Tablet: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .cs-header {
    padding: 0 var(--spacing-3x) var(--spacing-6x);
  }

  .cs-header__heading {
    font-size: var(--font-size-h1); /* 40px on tablet */
  }

  .cs-header__description {
    font-size: var(--font-size-body-lg); /* 18px on tablet */
    line-height: 1.55;
  }

  /* Title on top, then meta and tools side by side below */
  .cs-header__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--spacing-2x) var(--spacing-3x);
  }

  .cs-header__title {
    grid-column: 1 / -1;
    grid-row: 1;
    gap: var(--spacing-1x);
  }

  .cs-header__meta {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2x);
  }

  .cs-header__tools {
    grid-column: 2;
    grid-row: 2;
  }
}

/* Desktop: 1024px - 1240px (Intermediate size) */
@media (min-width: 1024px) and (max-width: 1240px) {
  .cs-header {
    padding: 0 0 var(--spacing-6x);
  }

  .cs-header__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: var(--spacing-2x) var(--spacing-3x);
    padding-left: var(--spacing-3x);
    padding-right: var(--spacing-3x);
  }

  .cs-header__title {
    grid-column: 1 / -1;
    grid-row: 1;
    gap: var(--spacing-2x);
  }

  .cs-header__heading {
    font-size: var(--font-size-h1); /* 40px */
  }

  .cs-header__description {
    font-size: var(--font-size-body-lg); /* 18px */
    line-height: 1.55;
  }

  /* Meta section spans both columns */
  .cs-header__meta {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3x);
  }

  .cs-header__meta-section {
    display: flex;
    flex-direction: column;
  }

  /* Tools section on its own row, full width */
  .cs-header__tools {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

/* Desktop Wide: 1241px+ */
@media (min-width: 1241px) {
  .cs-header {
    padding: 0 0 var(--spacing-6x); /* 24px top, 0 sides, 48px bottom */
  }

  .cs-header__inner {
    display: grid;
    grid-template-columns: 588px 282px 282px;
    grid-template-rows: 1fr;
    column-gap: 24px;
    row-gap: 16px;
  }

  .cs-header__title {
    grid-column: 1;
    grid-row: 1;
    gap: var(--spacing-2x);
  }

  .cs-header__heading {
    font-size: var(--font-size-h1); /* 40px on desktop */
  }

  .cs-header__description {
    font-size: var(--font-size-body-lg); /* 18px on desktop */
    line-height: 1.55;
  }

  /* Meta section (CLIENT & MY ROLE) takes column 2 */
  .cs-header__meta {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4x); /* 32px between CLIENT and MY ROLE */
  }

  /* Tools section takes column 3 */
  .cs-header__tools {
    grid-column: 3;
    grid-row: 1;
  }

  .cs-header__meta-section {
    display: flex;
    flex-direction: column;
  }
}

/* ==========================================================================
   Image with Text Component (Flexible Column Widths)
   ========================================================================== */

/* Component container - vertical stack on mobile, horizontal on desktop */
.cs-image-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2x); /* 16px on mobile/tablet */
  width: 100%;
  padding-top: var(--spacing-4x); /* 32px */
  padding-bottom: var(--spacing-4x); /* 32px */
}

/* Image container - wraps image and optional caption */
.cs-image-text__image-container {
  display: flex;
  flex-direction: column;
  gap: 0; /* No gap, caption margin handles spacing */
}

/* Image wrapper with background, shadow, and interaction */
.cs-image-text__image-wrapper {
  background-color: var(--color-biege-200); /* Default */
  box-shadow: var(--shadow-artefact);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
  padding: 0;
  position: relative;
}

.cs-image-text__image-wrapper:hover {
  transform: scale(1.02);
}

.cs-image-text__image-wrapper:focus {
  outline: 2px solid var(--color-orange-700);
  outline-offset: 2px;
}

/* Image fills container */
.cs-image-text__image {
  display: block;
  width: 100%;
  height: auto;
}

/* Content wrapper - flexible for multiple elements */
.cs-image-text__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2x); /* 16px between heading and paragraphs */
  color: var(--color-black);
}

/* Heading within content - respects h2/h3 tag */
.cs-image-text__heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-description); /* 1.4 */
  color: var(--color-black);
  margin-bottom: 0;
}

/* h2 variant */
h2.cs-image-text__heading {
  font-size: var(--font-size-h2); /* 32px */
}

/* h3 variant */
h3.cs-image-text__heading {
  font-size: var(--font-size-h3); /* 24px */
}

/* Paragraphs within content */
.cs-image-text__content p {
  font-family: var(--font-body);
  font-size: var(--font-size-body-lg); /* 18px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed); /* 1.6 */
  margin-bottom: var(--spacing-2x); /* 16px */
}

.cs-image-text__content p:last-child {
  margin-bottom: 0;
}

/* Optional image caption (similar to other image-caption components) */
.cs-image-text__image-caption {
  display: flex;
  gap: var(--spacing-1x); /* 8px */
  font-family: var(--font-mono);
  font-size: var(--font-size-tag); /* 12px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight); /* 1.2 */
  color: var(--color-black);
  margin-top: var(--spacing-2x); /* 16px */
}

/* Figure number (e.g., "FIG. 1") */
.cs-image-text__image-caption-fig {
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Caption text */
.cs-image-text__image-caption-text {
  flex: 1;
}

/* Background color variants */
.cs-image-text--bg-orange-200 .cs-image-text__image-wrapper {
  background-color: var(--color-orange-200);
}

.cs-image-text--bg-turq-200 .cs-image-text__image-wrapper {
  background-color: var(--color-turq-200);
}

/* Desktop: horizontal layout with configurable column widths */
@media (min-width: 1024px) {
  .cs-image-text {
    flex-direction: row;
    gap: var(--spacing-3x); /* 24px */
    align-items: stretch; /* Equal height for image and content */
  }

  .cs-image-text__content {
    justify-content: flex-start; /* Top-aligned (user preference) */
  }

  /* Column width modifiers - 3-9 split (294px + 882px) */
  .cs-image-text--3-9col .cs-image-text__image-container {
    width: 294px; /* 3 columns */
    flex-shrink: 0;
  }

  .cs-image-text--3-9col .cs-image-text__content {
    width: 882px; /* 9 columns */
    flex-shrink: 0;
  }

  /* Column width modifiers - 4-8 split (392px + 784px) */
  .cs-image-text--4-8col .cs-image-text__image-container {
    width: 392px; /* 4 columns */
    flex-shrink: 0;
  }

  .cs-image-text--4-8col .cs-image-text__content {
    width: 784px; /* 8 columns */
    flex-shrink: 0;
  }

  /* Column width modifiers - 5-7 split (490px + 686px) - DEFAULT */
  .cs-image-text--5-7col .cs-image-text__image-container {
    width: 490px; /* 5 columns */
    flex-shrink: 0;
  }

  .cs-image-text--5-7col .cs-image-text__content {
    width: 686px; /* 7 columns */
    flex-shrink: 0;
  }

  /* Column width modifiers - 6-6 split (588px + 588px) */
  .cs-image-text--6-6col .cs-image-text__image-container {
    width: 588px; /* 6 columns */
    flex-shrink: 0;
  }

  .cs-image-text--6-6col .cs-image-text__content {
    width: 588px; /* 6 columns */
    flex-shrink: 0;
  }

  /* Column width modifiers - 7-5 split (686px + 490px) */
  .cs-image-text--7-5col .cs-image-text__image-container {
    width: 686px; /* 7 columns */
    flex-shrink: 0;
  }

  .cs-image-text--7-5col .cs-image-text__content {
    width: 490px; /* 5 columns */
    flex-shrink: 0;
  }

  /* Column width modifiers - 8-4 split (784px + 392px) */
  .cs-image-text--8-4col .cs-image-text__image-container {
    width: 784px; /* 8 columns */
    flex-shrink: 0;
  }

  .cs-image-text--8-4col .cs-image-text__content {
    width: 392px; /* 4 columns */
    flex-shrink: 0;
  }

  /* Column width modifiers - 9-3 split (882px + 294px) */
  .cs-image-text--9-3col .cs-image-text__image-container {
    width: 882px; /* 9 columns */
    flex-shrink: 0;
  }

  .cs-image-text--9-3col .cs-image-text__content {
    width: 294px; /* 3 columns */
    flex-shrink: 0;
  }

  /* Reverse layout modifier - image on right, text on left */
  .cs-image-text--reverse {
    flex-direction: row-reverse;
  }

  /* Vertical alignment variants */
  .cs-image-text--content-center .cs-image-text__content {
    justify-content: center; /* Vertically center content on desktop */
  }

  .cs-image-text--content-bottom .cs-image-text__content {
    justify-content: flex-end; /* Align content to bottom on desktop */
  }
}