/* ============================================================
   UI LIBRARY — Karolina Kurstak Portfolio
   ============================================================
   Single source of truth for all design tokens, typography,
   layout rules, components, dark mode, and responsive scaling.

   TABLE OF CONTENTS
   ─────────────────
   0. FONTS                            font-face declarations (Avenir family)
   1. DESIGN TOKENS                    colour, type, weight, layout, header
   2. RESET                            box-sizing, defaults
   3. LAYOUT                           .layout container, page margins
   4. HEADER                           sticky header, brand, nav, theme toggle
   5. BUTTONS                          .btn base + variants
   6. MAIN CONTENT AREA                site-main wrapper
   7. HERO (landing)                   photo card + bio
   8. PORTFOLIO (landing)              current + past experience cards
   9. CONTACT (landing)                email + social
  10. FOOTER                           shared footer
  11. RESPONSIVE                       global breakpoints
  12. DARK MODE                        token overrides + component fixes
  13. CASE STUDY — base                page-cs body + company hero + switcher
  14. CASE STUDY — overview            trust line + framing paragraph
  15. CASE STUDY — panel content       outcomes card + meta + body typography
  16. CASE STUDY — responsive          breakpoint scaling
  17. CASE STUDY — dark mode           overrides
  18. FOCUS STYLES                     keyboard-only focus rings
  19. THEME TRANSITION                 brief animation during dark/light swap

   NAMING CONVENTIONS
   ──────────────────
   .site-*    global chrome (header, footer, nav, main)
   .hero-*    landing-page hero
   .cs-*      case study CARD on the landing page (portfolio section)
   .csp-*     case study PAGE components (under work/*.html)
   .btn       base button + .btn-primary / .btn-secondary variants
   .is-*      JS-applied state (.is-active, .is-open)
   BEM-style sub-elements: .csp-company-hero__name, .csp-pagination__prev
   ============================================================ */


/* ── 0. FONTS ─────────────────────────────────────────────── */

@font-face {
  font-family: 'Avenir';
  src: url('fonts/Avenir/Avenir Light/Avenir Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenir';
  src: url('fonts/Avenir/Avenir Book/Avenir Book.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenir';
  src: url('fonts/Avenir/Avenir Heavy/Avenir Heavy.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */

:root {
  color-scheme: light;   /* tells browser to use light-mode scrollbars/form controls */

  /* Colors */
  --color-main:      #414141;   /* Primary text, headings */
  --color-secondary: #6B6B6B;   /* Body text on white — AA accessible (5.7:1) */
  --color-white:     #FFFFFF;   /* Backgrounds, inverted text */
  --color-strong:    #A8A8A7;   /* Muted UI elements, labels, button borders */
  --color-medium:    #D4D4D2;   /* Borders, dividers */
  --color-soft:        #F9F9F9;   /* Page background */
  --color-image-panel: #EFEFEE;   /* Image surround — perceptibly darker than body so visuals pop */
  --color-accent:      #7FCCF7;   /* Highlight, interactive */
  --color-link:        #2563EB;   /* Reserved for inline hyperlinks in long-form content */
  --color-error:       #B00020;   /* Form / gate errors                                  */
  --color-image-canvas: #F9F9F9;  /* Soft canvas baked into static JPGs; same value in both modes
                                     so video/GIF surrounds match. Light in dark mode = visible card. */

  /* Focus ring — referenced via box-shadow on inputs */
  --ring-accent: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent);

  /* ── Typography ── */
  --font: 'Avenir', sans-serif;

  --weight-heavy: 800;   /* Avenir Heavy */
  --weight-book:  300;   /* Avenir Light — named 'book' for semantic intent (default reading weight) */

  /* Type scale */
  --text-header:    3.5rem;    /* 56px — Hero headlines    */
  --text-section:   1.5rem;    /* 24px — Section titles    */
  --text-subtitle:  1.125rem;  /* 18px — Subtitles         */
  --text-title:     1.25rem;   /* 20px — Card/item titles  */
  --text-button:    0.875rem;  /* 14px — Buttons           */
  --text-paragraph: 1rem;      /* 16px — Body copy         */
  --text-small:     0.75rem;   /* 12px — Captions, labels  */

  /* ── Layout grid ──
     Figma frame: 1512px
     Margin:      260px (each side)
     Content:     992px
     Columns:     3
     Gutter:      24px
     Column:      (992 - 48) / 3 = 314.67px
  */
  --frame-max:      1512px;
  --margin:         260px;
  --gutter:         24px;
  --content-width:  992px;  /* frame-max − (margin × 2) */

  /* ── Shadows ── */
  --shadow-card:       0 4px 32px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.08);

  /* ── Header ── */
  --header-height:       160px;
  --header-bg:           var(--color-white);
  --header-padding-btm:  32px;

  /* Brand block height — used by .header-controls min-height so the right-cluster
     auto-centres against the brand on the left. Self-adjusts per breakpoint. */
  --brand-block-h: calc((var(--text-title) * 1.2) + 4px + (var(--text-subtitle) * 1.2));
}


/* ── 2. RESET ─────────────────────────────────────────────── */

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

html {
  font-size: 16px;
  /* scroll-behavior handled by JS for custom duration */
}

body {
  font-family: var(--font);
  font-weight: var(--weight-book);
  font-size: var(--text-paragraph);
  color: var(--color-main);
  background-color: var(--color-soft);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-main);
  text-decoration: none;
}

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

img, video {
  display: block;
  max-width: 100%;
}

ul, ol {
  list-style: none;
}


/* ── 3. LAYOUT ────────────────────────────────────────────── */

/* Full-width wrapper that constrains content to the
   content area (between the 260px margins). */
.layout {
  width: 100%;
  max-width: var(--frame-max);
  margin-inline: auto;
  padding-inline: var(--margin);
}

/* ── 4. HEADER ────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  height: var(--header-height);
  background-color: var(--header-bg);
}

/* Inner wrapper — bottom-anchored at 32px, brand left / controls right */
.header-inner {
  max-width: var(--frame-max);
  margin-inline: auto;
  padding: 0 var(--margin) var(--header-padding-btm);
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

/* Right cluster: nav + theme toggle + hamburger.
   Sized to the brand block on the left so children auto-center against it.
   No more manual margin-bottom offsets on the nav or the toggle. */
.header-controls {
  display: flex;
  align-items: center;
  min-height: var(--brand-block-h);
  gap: 20px;
}

/* Brand — left side */
.brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brand-name {
  font-size: var(--text-title);      /* 20px Heavy */
  font-weight: var(--weight-heavy);
  color: var(--color-main);
  text-decoration: none;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.brand-name:hover {
  color: var(--color-main);
}

.brand-tagline {
  font-size: var(--text-subtitle);   /* 18px Book — Subtitle style */
  font-weight: var(--weight-book);
  color: var(--color-secondary);
  line-height: 1.2;
  text-transform: uppercase;
}

/* Navigation — right side. Centered vertically by the parent (.header-controls). */
.site-nav {
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  align-items: baseline;
  gap: 2rem;
}

.nav-link {
  font-size: var(--text-paragraph);  /* 16px Book — Paragraph style */
  font-weight: var(--weight-book);
  color: var(--color-main);
  text-decoration: none;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  transition: color 0.15s ease;
}

.nav-link:hover {
  color: var(--color-accent);
}

/* Active/current page — muted */
.nav-link.active {
  color: var(--color-secondary);
}

/* ── Theme toggle button ── */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-secondary);
  padding: 0;
  flex-shrink: 0;
  /* Centered automatically by .header-controls — no margin-bottom needed. */
  transition: color 0.2s ease;
}

.theme-toggle:hover {
  color: var(--color-accent);
}

/* Icon visibility — controlled by data-theme on <html> */
.icon-sun  { display: none;  }
.icon-moon { display: block; }

[data-theme="dark"] .icon-sun  { display: block; }
[data-theme="dark"] .icon-moon { display: none;  }

/* Optical correction — the moon crescent's visible mass sits slightly below
   its geometric centre, which makes it read as a touch low. Nudge 1 pixel
   up to compensate. Sun is symmetric and needs no correction. */
.icon-moon { transform: translateY(-1px); }


/* ── 5. BUTTONS ───────────────────────────────────────────── */

/* Base button — all buttons share this.
   Standard padding: 10px top/bottom, 16px left/right. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font);
  font-size: var(--text-button);  /* 14px */
  font-weight: var(--weight-heavy);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 10px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Primary — filled dark */
.btn-primary {
  color: var(--color-white);
  background-color: var(--color-main);
  border: none;
}

.btn-primary:hover {
  background-color: var(--color-accent);
  color: var(--color-main);
}

/* Secondary — outlined */
.btn-secondary {
  color: var(--color-secondary);
  background-color: transparent;
  border: 1px solid var(--color-strong);
}

.btn-secondary:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}


/* ── 6. MAIN CONTENT AREA ─────────────────────────────────── */

.site-main {
  min-height: calc(100vh - var(--header-height));
}


/* ── 7. HERO (landing page) ───────────────────────────────── */

.hero {
  padding-block: 56px 32px;
  padding-inline: 80px;
  max-width: var(--frame-max);
  margin-inline: auto;
}

.hero-inner {
  display: grid;
  grid-template-columns: 5fr 7fr;   /* photo ~40%, text ~60% */
  align-items: start;
}

/* ── Photo side ── */
.hero-photo-wrap {
  position: relative;
}

/* Accent rectangle — top-right of photo, offset outward */
.hero-photo-accent {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 48%;
  height: 36%;
  background-color: var(--color-accent);
  z-index: 0;
}

.hero-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1/1;        /* square — matches the source photo, no cropping */
  overflow: hidden;
  background-color: var(--color-medium);
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Placeholder state when image fails to load */
.hero-photo--placeholder::after {
  content: 'KK';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  font-weight: var(--weight-heavy);
  color: var(--color-secondary);
  letter-spacing: 0.12em;
}

/* ── Text side — white card ── */
.hero-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--color-white);
  padding: 64px 80px;
  position: relative;
  z-index: 2;
  margin-left: -32px;   /* overlaps photo edge */
  margin-top: 32px;     /* card starts 32px below photo top */
  box-shadow: var(--shadow-card);
}

.hero-headline {
  font-size: clamp(2rem, 3.5vw, var(--text-header));
  font-weight: var(--weight-heavy);
  color: var(--color-main);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 16px;  /* extra breathing room — total 28px from tagline */
}

.hero-tagline {
  font-size: var(--text-subtitle);   /* 18px */
  font-weight: var(--weight-book);
  color: var(--color-main);
  line-height: 1.4;
  margin-bottom: 8px;  /* extra separation between intro and bio */
}

.hero-bio {
  font-size: var(--text-paragraph);
  font-weight: var(--weight-book);
  color: var(--color-secondary);
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

/* ── Hero responsive ── */
@media (max-width: 960px) {
  .hero {
    padding-block: 40px 56px;
    padding-inline: 48px;
    overflow: hidden;  /* prevent accent rectangle from causing horizontal scroll */
  }

  .hero-inner {
    grid-template-columns: 1fr 1fr;
  }

  .hero-photo {
    aspect-ratio: 1/1;  /* square on mobile too — matches the source */
  }

  /* Hide the accent rectangle below 960px — it overflows the photo column at this layout */
  .hero-photo-accent {
    display: none;
  }

  .hero-content {
    padding: 36px 40px;
    margin-left: -24px;
    margin-top: 20px;
    gap: 8px;           /* tighter paragraph spacing at smaller size */
  }

  .hero-headline {
    margin-bottom: 8px;
  }

  .hero-tagline {
    font-size: 1rem;    /* hold tagline above body text when --text-subtitle drops */
    margin-bottom: 4px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: 16px;
  }

  .btn {
    font-size: var(--text-small);  /* 12px on smaller screens */
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-block: 32px 48px;
    padding-inline: 24px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-photo-accent {
    display: none;  /* accent rectangle doesn't work in stacked layout */
  }

  .hero-content {
    margin-left: 0;
    margin-top: 0;   /* reset — card sits below photo, not beside it */
    padding: 32px 40px;
  }

  .hero-tagline {
    font-size: var(--text-paragraph);  /* 14px at mobile — proportional to smaller context */
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;  /* buttons full width on mobile */
  }

  .btn {
    justify-content: center;
  }
}


/* ── 8. PORTFOLIO (landing page) ──────────────────────────── */

.portfolio {
  padding-block: 40px 120px;
  scroll-margin-top: var(--header-height);
}

.section-title {
  font-size: var(--text-section);   /* 24px base — scaled via media queries below */
  font-weight: var(--weight-heavy);
  color: var(--color-main);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 48px;
}

/* ── Base card — shared by all card types ──
   Both .cs-card--current and .cs-card--past carry this class. */
.cs-card {
  text-decoration: none;
  color: inherit;
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.cs-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
}

/* ── Current experience card (e.g. Elastic) ── */
.cs-card--current {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  padding: 64px;
  border-left: 3px solid var(--color-accent);
}


.cs-card--current .cs-company {
  font-size: var(--text-section);   /* 24px — larger than past cards */
}

.cs-card--current .cs-desc {
  font-size: var(--text-subtitle);  /* 18px — larger than past cards */
  color: var(--color-main);         /* full weight for current role */
}

/* ── Past experience cards ── */
.cs-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

/* Center lone last card — exact same width as other cards */
.cs-card--past:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  width: calc((100% - 32px) / 2);   /* 32px matches cs-list gap */
  margin-inline: auto;
}

.cs-card--past {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 40px;
  border-left: 3px solid transparent;
}

.cs-card--past:hover {
  border-left-color: var(--color-accent);
}

/* ── Logo ── */
.cs-logo-wrap {
  flex-shrink: 0;
}


.cs-logo {
  width: auto;
  height: 40px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.cs-card--current .cs-logo {
  height: 88px;
}

.cs-logo--airline {
  height: 32px;
}

/* ── Card body ── */
.cs-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;   /* stretch to fill card height so cs-link margin-top: auto works */
}

.cs-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-company {
  font-size: var(--text-title);
  font-weight: var(--weight-heavy);
  color: var(--color-main);
  line-height: 1.2;   /* tight — aligns visual cap height with logo top */
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cs-tags {
  font-size: var(--text-small);   /* 12px — standardised small-uppercase size */
  font-weight: var(--weight-book);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.cs-desc {
  font-size: var(--text-paragraph);
  font-weight: var(--weight-book);
  color: var(--color-secondary);   /* body copy — hierarchy: company name main, desc secondary */
  line-height: 1.7;
  max-width: 680px;
}

.cs-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--text-small);
  font-weight: var(--weight-heavy);
  color: var(--color-main);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: auto;
  padding-top: 8px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.cs-link svg {
  transform: translateY(-1px);   /* optical correction — baked into transform so hover doesn't jump */
  transition: transform 0.2s ease;
}

.cs-card:hover .cs-link svg {
  transform: translateX(0.5px) translateY(-1px);   /* barely-there nudge, optical correction preserved */
}

/* ── Divider — small text flanked by thin rules ── */
.portfolio-divider {
  font-size: var(--text-paragraph);
  font-weight: var(--weight-book);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 80px;
  margin-bottom: 48px;
}

.portfolio-divider::before,
.portfolio-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--color-medium);
}

.portfolio-divider__text {
  white-space: nowrap;
  flex-shrink: 0;
}


/* ── Section rule — aligns with layout/header working area ── */
.section-rule {
  border: none;
  height: 1px;
  background-color: var(--color-medium);
  width: calc(100% - 2 * var(--margin));   /* matches .layout / .header-inner margins */
  max-width: var(--content-width);
  margin-inline: auto;
  margin-block: 40px;
}


/* ── Portfolio responsive ── */
@media (max-width: 960px) {
  .portfolio {
    padding-block: 56px 80px;
  }

  .section-title {
    font-size: 1.25rem;   /* 24px → 20px at tablet */
    margin-bottom: 40px;
  }

  .cs-card--current {
    padding: 40px;
    gap: 32px;
  }

  .cs-card--current .cs-logo {
    height: 40px;
  }

  .cs-card--current .cs-company {
    font-size: var(--text-title);
  }

  .cs-card--current .cs-desc {
    font-size: var(--text-paragraph);
  }
}

@media (max-width: 768px) {
  .cs-list {
    grid-template-columns: 1fr;
  }

  /* Reset lone-card centering — single column, all cards full width */
  .cs-card--past:last-child:nth-child(odd) {
    grid-column: auto;
    width: auto;
    margin-inline: 0;
  }

  /* All cards go vertical (logo on top) when stacked single-column */
  .cs-card--current {
    flex-direction: column;
    gap: 24px;
  }
}

@media (max-width: 640px) {
  .portfolio {
    padding-block: 40px 64px;
  }

  .section-title {
    font-size: 1rem;   /* 24px → 16px at mobile — uppercase + tracking still reads clearly */
    margin-bottom: 32px;
  }

  /* Tighter padding on mobile — both card types unified */
  .cs-card--current,
  .cs-card--past {
    padding: 24px;
  }

}


/* ── 9. CONTACT (landing page) ────────────────────────────── */

.contact {
  padding-block: 40px 80px;   /* portfolio: 40px 120px — contact is lighter, no section-rule after */
  scroll-margin-top: var(--header-height);
}

.contact-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 560px;
  margin-inline: auto;
}

.contact-copy {
  font-size: var(--text-subtitle);
  font-weight: var(--weight-book);
  color: var(--color-secondary);
  line-height: 1.6;
  margin-bottom: 32px;
}

.contact-email {
  font-size: var(--text-paragraph);
  font-weight: var(--weight-book);
  color: var(--color-main);
  text-decoration: none;
  letter-spacing: 0.02em;
  margin-bottom: 24px;
  transition: color 0.2s ease;
}

.contact-email:hover {
  color: var(--color-accent);
}

.contact-social {
  display: flex;
  gap: 12px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-main);
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.social-link:hover {
  background-color: var(--color-accent);
  color: var(--color-main);
  text-decoration: none;
}

/* ── Contact responsive ── */
@media (max-width: 960px) {
  .contact {
    padding-block: 56px 64px;
  }

  .contact-copy {
    font-size: var(--text-paragraph);
  }
}

@media (max-width: 640px) {
  .contact {
    padding-block: 40px 48px;
  }

  .social-link {
    width: 36px;
    height: 36px;
  }

  .social-link svg {
    width: 14px;
    height: 14px;
  }
}


/* ── 9b. P.S. — HERO THE DOG ──────────────────────────────
   Minimal footnote with a circular Hero avatar.              */

.ps-hero {
  padding-block: 40px 16px;
}

.ps-hero__inner {
  display: flex;
  align-items: center;
  justify-content: center;     /* centre the photo + text block horizontally */
  gap: 12px;
  max-width: 680px;            /* compact block, sits in the centre of the page */
  margin-inline: auto;
}

.ps-hero__photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-image-panel);
  position: relative;
}

.ps-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;   /* bias toward Hero's face (which sits in the upper third) */
  display: block;
}

/* Placeholder state when hero.jpg is missing */
.ps-hero__photo--placeholder::after {
  content: '🐾';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  opacity: 0.7;
}

.ps-hero__text {
  font-size: var(--text-small);
  color: var(--color-secondary);   /* more contrast than --color-strong */
  line-height: 1.5;
  margin: 0;
}

.ps-hero__paw {
  flex-shrink: 0;            /* never squeezes — keeps text-wrap clean */
  font-size: var(--text-small);
  line-height: 1.5;
  /* align-self omitted → inherits parent's align-items: center,
     so the paw sits at the vertical middle of the row alongside the photo. */
}

.ps-hero__text a {
  color: var(--color-secondary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.ps-hero__text a:hover {
  color: var(--color-link);
}

@media (max-width: 640px) {
  .ps-hero {
    padding-block: 32px 12px;
  }
  .ps-hero__inner {
    gap: 10px;
  }
}


/* ── 10. FOOTER ───────────────────────────────────────────── */

.site-footer {
  background-color: var(--color-white);
  padding-block: 32px;
}

.footer-inner {
  max-width: var(--frame-max);
  margin-inline: auto;
  padding-inline: var(--margin);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.footer-brand {
  font-size: var(--text-small);
  font-weight: var(--weight-heavy);
  color: var(--color-main);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 0.2s ease;
}

.footer-brand:hover {
  color: var(--color-accent);
}

.footer-nav {
  display: flex;
  gap: 1.5rem;
}

.footer-nav-link {
  font-size: var(--text-small);
  font-weight: var(--weight-book);
  color: var(--color-secondary);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 0.2s ease;
}

.footer-nav-link:hover {
  color: var(--color-accent);
}

.footer-copy {
  font-size: var(--text-small);
  font-weight: var(--weight-book);
  color: var(--color-secondary);
}

/* ── Footer responsive ── */
@media (max-width: 640px) {
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }

  .footer-nav {
    gap: 1rem;
  }
}


/* ── 11. RESPONSIVE ───────────────────────────────────────── */

/* Large desktop (≤ 1512px): margins scale with viewport */
@media (max-width: 1512px) {
  :root {
    --margin: clamp(1.5rem, 17.2vw, 260px);
  }
}

/* Common laptop (≤ 1280px): hold content width at 992px while margins shrink.
   Stops the content area from shrinking aggressively between 1512 → 960. */
@media (max-width: 1280px) and (min-width: 961px) {
  :root {
    --margin: max(24px, calc((100vw - 992px) / 2));
    --header-height: 120px;  /* tighten chrome on laptop viewports */
  }
}

/* Tablet landscape (≤ 960px) */
@media (max-width: 960px) {
  :root {
    --margin:             64px;
    --header-height:      80px;
    --header-padding-btm: 20px;

    /* Header type scales down to fit the smaller header */
    --text-title:         1rem;       /* 20px → 16px */
    --text-subtitle:      0.875rem;   /* 18px → 14px */
    --text-paragraph:     0.875rem;   /* 16px → 14px */
  }

  .nav-list {
    gap: 1rem;
  }

}


/* Tablet portrait (≤ 768px) */
@media (max-width: 768px) {
  :root {
    --text-header: clamp(2rem, 8vw, 3.5rem);
  }

}

/* ── MOBILE VERSION (≤ 640px) ────────────────────────────── */

/* Hide hamburger and mobile menu above 640px */
.hamburger   { display: none; }
.mobile-menu { display: none; }

@media (max-width: 640px) {

  /* Tokens */
  :root {
    --margin:             24px;
    --header-height:      64px;
    --header-padding-btm: 16px;
    --text-title:         1rem;      /* 20px → 16px */
    --text-subtitle:      0.75rem;   /* 18px → 12px */
    --weight-book:        400;       /* Book on mobile — Light too delicate at small sizes */
  }

  /* Center header content vertically */
  .header-inner {
    align-items: center;
    padding-bottom: 0;
  }

  /* .header-controls is already align-items: center at the base; no override needed. */

  .brand-tagline { display: none; }

  /* Hide desktop nav, show hamburger */
  .site-nav { display: none; }

  /* ── Hamburger button ── */
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }

  .hamburger-line {
    display: block;
    width: 20px;
    height: 1.5px;
    background-color: var(--color-main);
    transform-origin: center;
    transition: transform 0.33s ease, opacity 0.33s ease;
  }

  /* ✕ animation when open */
  .hamburger.is-open .hamburger-line:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  .hamburger.is-open .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .hamburger.is-open .hamburger-line:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  /* ── Mobile menu panel ── */
  .mobile-menu {
    display: block;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--color-white);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.385s ease, opacity 0.33s ease;
    z-index: 99;
  }

  .mobile-menu.is-open {
    max-height: 280px;
    opacity: 1;
  }

  .mobile-nav-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0 28px;
  }

  .mobile-nav-link {
    display: block;
    font-size: var(--text-paragraph);
    font-weight: var(--weight-book);
    color: var(--color-main);
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.08em;
    padding: 14px 0;
    transition: color 0.2s ease;
  }

  .mobile-nav-link:hover,
  .mobile-nav-link.active {
    color: var(--color-accent);
    text-decoration: none;
  }
}


/* ── 12. DARK MODE ────────────────────────────────────────────
   All colour tokens and shadows are overridden here.
   Component overrides for cases where the token swap isn't enough.
   Layout, spacing, and type are unchanged in dark mode. */

[data-theme="dark"] {
  color-scheme: dark;

  /* ── Colour tokens ── */
  --color-main:      #EDEDED;   /* primary text, headings — 16.8:1 on card */
  --color-secondary: #ABABAB;   /* body-secondary text — 7.4:1 on card (WCAG AAA) */
  --color-white:     #17181A;   /* cards, header, footer — surface layer */
  --color-strong:    #3A3C40;   /* muted borders / decorative — not for text */
  --color-medium:    #252729;   /* dividers, subtle borders */
  --color-soft:        #0D0E10;   /* page background — deepest layer */
  --color-image-panel: #1F2024;   /* image surround — slightly LIGHTER than body in dark mode (elevated card convention) */
  /* --color-accent: #7FCCF7 — unchanged; vivid cool blue works great in dark */
  --color-link:        #7FCCF7;   /* inline links → accent in dark mode */
  --color-error:       #FF6679;   /* lighter red — readable on dark surfaces */

  /* ── Shadows — heavier in dark (more contrast needed) ── */
  --shadow-card:       0 4px 32px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: 0 8px 48px rgba(0, 0, 0, 0.65);
}

/* ── Dark mode component overrides ─────────────────────────────
   Token overrides alone aren't enough for all components.
   These rules fix issues that only emerge on dark backgrounds.
   ────────────────────────────────────────────────────────────── */

/* Cards: box-shadow is invisible on near-black bg (#17181A on #0D0E10).
   A subtle border provides the elevation/separation that shadow does in light mode. */
[data-theme="dark"] .cs-card {
  border: 1px solid var(--color-strong);
  box-shadow: none;
}

[data-theme="dark"] .cs-card:hover {
  box-shadow: none;
}

/* Current card: restore prominent accent border-left (overrides 1px shorthand above) */
[data-theme="dark"] .cs-card--current {
  border-left: 3px solid var(--color-accent);
}

/* Past card: restore 3px left border transparent at rest.
   The border shorthand on .cs-card above collapses it to 1px — this resets the full value. */
[data-theme="dark"] .cs-card--past {
  border-left: 3px solid transparent;
}

[data-theme="dark"] .cs-card--past:hover {
  border-left-color: var(--color-accent);
}

/* Section rules and portfolio dividers: --color-medium (#252729) on page (#0D0E10)
   is ~1.4:1 contrast — essentially invisible. Bump to --color-strong. */
[data-theme="dark"] .section-rule {
  background-color: var(--color-strong);
}

/* All logos go white in dark mode */
[data-theme="dark"] .cs-logo {
  filter: brightness(0) invert(1);
}

/* These logos use pre-rendered dark variants — no filter needed */
[data-theme="dark"] .cs-logo--elastic,
[data-theme="dark"] .cs-logo--bnp {
  filter: none;
}


[data-theme="dark"] .portfolio-divider::before,
[data-theme="dark"] .portfolio-divider::after {
  background-color: var(--color-strong);
}

/* Social link: --color-main in dark mode = #EDEDED — a near-white glowing disc
   that dominates the muted contact section. Soften to a dark surface treatment. */
[data-theme="dark"] .social-link {
  background-color: var(--color-strong);
  color: var(--color-main);   /* brighter icon — secondary was too muted on dark surface */
}

[data-theme="dark"] .social-link:hover {
  background-color: var(--color-accent);
  color: var(--color-soft);
}

/* Theme toggle: base uses --color-secondary, but in dark mode that's #888 vs nav's #EDEDED.
   Match inactive nav link colour so the icon reads at the same visual weight. */
[data-theme="dark"] .theme-toggle {
  color: var(--color-main);
}

/* Secondary button: rest state too muted in dark mode.
   --color-strong (#3A3C40) border nearly invisible; --color-secondary (#888) text is dim.
   Lift both one step up the scale. */
[data-theme="dark"] .btn-secondary {
  color: var(--color-main);
  border-color: var(--color-secondary);
}

/* Explicit hover needed — the rest override above (0,2,0) lands after .btn-secondary:hover
   (also 0,2,0) in the file, so it silently wins over hover without this. */
[data-theme="dark"] .btn-secondary:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Primary button hover: accent (#7FCCF7) is a light background.
   In light mode --color-main is dark (#414141) — fine.
   In dark mode --color-main inverts to #EDEDED — near-white on light blue ≈ 1.4:1, unreadable.
   Override to --color-soft so dark text always sits on the light accent background. */
[data-theme="dark"] .btn-primary:hover {
  color: var(--color-soft);
}

/* Hero P.S. paw emoji: native glyph is dark — invert in dark mode so it reads as a
   light silhouette against the dark background. brightness(0) flattens to black first,
   then invert(1) flips to white. Cleaner than relying on emoji vendor variants. */
[data-theme="dark"] .ps-hero__paw {
  filter: brightness(0) invert(1);
}


/* ── 13. CASE STUDY — base (company hero + switcher + pagination) ── */

body.page-cs {
  background-color: var(--color-white);
}

/* ── Company hero ── */
.csp-company-hero {
  background-color: var(--color-soft);
  padding-block: 48px;
}

/* Two-column grid: card left, image right */
.csp-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}

/* White card wrapping the hero text */
.csp-hero-card {
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  padding: 48px;
  border-left: 3px solid var(--color-accent);
}

/* Image placeholder */
.csp-hero-image__placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 2px dashed var(--color-medium);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-strong);
}

.csp-hero-image__placeholder svg {
  opacity: 0.35;
}

.csp-hero-image__placeholder-label {
  font-size: var(--text-small);
  font-weight: var(--weight-book);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-strong);
  opacity: 0.6;
}

/* Hero text elements */
.csp-company-hero__tag {
  display: block;
  font-size: var(--text-small);
  font-weight: var(--weight-book);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}

.csp-company-hero__name {
  font-size: clamp(2.5rem, 5vw, var(--text-header));
  font-weight: var(--weight-heavy);
  color: var(--color-main);
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.csp-company-hero__role {
  font-size: var(--text-subtitle);
  font-weight: var(--weight-book);
  color: var(--color-main);
  margin-bottom: 4px;
}

.csp-company-hero__period {
  font-size: var(--text-small);
  font-weight: var(--weight-book);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Responsive */
@media (max-width: 768px) {
  .csp-hero-grid {
    grid-template-columns: 1fr;
  }
  .csp-hero-card {
    padding: 32px;
  }
}

/* ── Project switcher ── */
.csp-switcher-wrap {
  position: sticky;
  top: var(--header-height);
  z-index: 90;
  background-color: var(--color-white);
  padding-top: 24px;   /* breathing room between the bg transition (soft→white) and the tabs */
}

.csp-switcher {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--color-medium); /* border inside layout — aligns with content */
}

.csp-switcher__item {
  font-family: var(--font);
  font-size: var(--text-button);  /* 14px — readable but not dominating */
  font-weight: var(--weight-book);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 14px 16px 14px 0;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.csp-switcher__item:hover {
  color: var(--color-main);
}

.csp-switcher__item.is-active {
  color: var(--color-main);
  font-weight: var(--weight-heavy);
  border-bottom-color: var(--color-accent);
}

/* ── Panels ── */
.csp-panel {
  display: none;
}

.csp-panel.is-active {
  display: block;
}

/* ── Pagination ── */
.csp-pagination {
  background-color: var(--color-soft);
  padding-block: 48px;   /* tighter than before, matches the trimmed rhythm */
}

.csp-pagination__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.csp-pagination__prev,
.csp-pagination__next {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-decoration: none;
  min-width: 200px;
}

.csp-pagination__next { align-items: flex-end; margin-left: auto; }

.csp-pagination__dir {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-small);
  font-weight: var(--weight-book);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: color 0.2s ease;
}

.csp-pagination__company {
  font-size: var(--text-title);
  font-weight: var(--weight-heavy);
  color: var(--color-main);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color 0.2s ease;
}

.csp-pagination__prev:hover .csp-pagination__dir,
.csp-pagination__next:hover .csp-pagination__dir {
  color: var(--color-main);
}

.csp-pagination__prev:hover .csp-pagination__company,
.csp-pagination__next:hover .csp-pagination__company {
  color: var(--color-accent);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  /* Scrollable tab strip — needs a visual affordance so users know there's more to the right.
     Wrap container becomes the scroll context; pseudo-elements live on .csp-switcher-wrap. */
  .csp-switcher-wrap {
    position: sticky;  /* already sticky; redeclared so nested rules read clearly */
    overflow: visible; /* allow the fade pseudo to spill */
  }
  .csp-switcher {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* Edge legacy */
    mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
    padding-right: 24px;              /* room for the fade to indicate "more to the right" */
  }
  .csp-switcher::-webkit-scrollbar { display: none; }

  .csp-pagination__inner {
    flex-direction: column;
    gap: 0;
  }

  .csp-pagination__prev,
  .csp-pagination__next {
    min-width: 0;
    padding-block: 20px;
    align-items: flex-start;
    margin-left: 0;
  }
}

/* ── Dark mode ── */
[data-theme="dark"] .csp-hero-image__placeholder {
  border-color: var(--color-strong);
}

[data-theme="dark"] .csp-switcher {
  border-bottom-color: var(--color-strong);
}




/* ── 14. CASE STUDY — OVERVIEW SECTION ───────────────────────
   Goes between .csp-company-hero and .csp-switcher-wrap.
   Frames the entire case study before the reader picks a tab.
   ──────────────────────────────────────────────────────────── */

.csp-overview {
  background-color: var(--color-soft);
  /* Visible padding around the overview text is symmetric at 64px:
     - Above trust line: hero section's 48px padding-bottom + overview's 16px = 64px
     - Below framing paragraph: overview's 64px padding-bottom = 64px */
  padding-block: 16px 64px;
}

.csp-overview__inner {
  max-width: 760px;
}

/* Inline trust line — replaces the boxed customer-logos chip row */
.csp-overview__trust {
  font-size: var(--text-paragraph);
  font-weight: var(--weight-book);
  color: var(--color-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

.csp-overview__paragraph {
  /* Explicit size — NOT --text-subtitle, because that token shrinks to 12px
     on mobile for the header tagline use case, which would crush this body
     paragraph. Mobile override below clamps it to 16px. */
  font-size: 1.125rem;   /* 18px */
  font-weight: var(--weight-book);
  color: var(--color-main);
  line-height: 1.6;
}

.csp-overview__paragraph strong {
  font-weight: var(--weight-heavy);
}


/* ── 15. CASE STUDY — PANEL HEADER + OUTCOMES + CONTENT ──────
   Each panel: header (meta + lead) → content → outcomes.
   ──────────────────────────────────────────────────────────── */

/* Outcomes — headline results at the TOP of each panel (stats-grid pattern).
   Wrapped in a soft-filled card so the stats read as a distinct results block
   rather than free-floating text. */
.csp-outcomes {
  padding-block: 32px 16px;   /* 32px above the card; 16px below — matches the 32px transition rhythm */
}

.csp-outcomes__card {
  background-color: var(--color-soft);
  border: 1px solid var(--color-medium);
  padding: 32px;   /* uniform internal padding */
}

.csp-outcomes__label {
  font-size: var(--text-small);   /* 12px */
  font-weight: var(--weight-heavy);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 8px;   /* divider close to label; stat content stays put via item padding-top */
}

.csp-outcomes__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px 32px;
  list-style: none;
  padding: 0;
}

.csp-outcomes__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--color-medium);
  padding-top: 12px;   /* small breathing space between divider and stat content */
}

.csp-outcomes__stat {
  font-size: clamp(1rem, 1.8vw, 1.375rem);   /* 16–22px — tighter than before, still substantial */
  font-weight: var(--weight-heavy);
  color: var(--color-main);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.15;
}

.csp-outcomes__detail {
  font-size: var(--text-button);   /* 14px */
  font-weight: var(--weight-book);
  color: var(--color-secondary);
  line-height: 1.5;
}

/* Panel header — inline meta line + italic lead-in (after outcomes) */
.csp-panel-intro {
  padding-block: 16px;   /* pairs with outcomes' 16px for a 32px card→meta gap */
}

.csp-panel-intro__inner {
  max-width: 760px;
}

/* Inline meta line — replaces the formal Role/Timeline/Team/Platform table */
.csp-panel-meta {
  font-size: var(--text-small);   /* 12px */
  font-weight: var(--weight-book);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;   /* tighter to the italic lead-in below */
}

.csp-panel-intro__subtitle {
  font-size: 1.125rem;   /* 18px — decoupled from --text-subtitle (see overview paragraph) */
  font-weight: var(--weight-book);
  font-style: italic;
  color: var(--color-secondary);
  line-height: 1.5;
}

/* Body content — typographic system for panel body copy */
.csp-content {
  padding-block: 16px 32px;   /* tight top (16+16 = 32 from lead-in); generous bottom for pagination breathing */
}

.csp-content__inner {
  max-width: 760px;
}

.csp-content h2 {
  font-size: var(--text-title);   /* 20px */
  font-weight: var(--weight-heavy);
  color: var(--color-main);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
  margin-top: 32px;
  margin-bottom: 12px;
}

.csp-content > .csp-content__inner > h2:first-child,
.csp-content h2:first-of-type {
  margin-top: 0;
}

.csp-content h3 {
  font-size: var(--text-paragraph);   /* 16px — sits a clear step below h2 (20px uppercase) */
  font-weight: var(--weight-heavy);
  color: var(--color-main);
  margin-top: 24px;
  margin-bottom: 8px;
}

.csp-content p {
  font-size: var(--text-paragraph);
  font-weight: var(--weight-book);
  color: var(--color-main);
  line-height: 1.75;
  margin-bottom: 16px;
}

.csp-content p strong {
  font-weight: var(--weight-heavy);
}

.csp-content p em {
  font-style: italic;
}

.csp-content ul {
  list-style: none;
  padding: 0;
  margin-bottom: 16px;
}

.csp-content li {
  position: relative;
  padding-left: 20px;
  font-size: var(--text-paragraph);
  font-weight: var(--weight-book);
  color: var(--color-main);
  line-height: 1.7;
  margin-bottom: 8px;
}

.csp-content li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 13px;
  width: 8px;
  height: 1px;
  background-color: var(--color-main);
}

.csp-content blockquote {
  font-size: 1.125rem;   /* 18px — decoupled from --text-subtitle (see overview paragraph) */
  font-weight: var(--weight-book);
  font-style: italic;
  color: var(--color-secondary);
  border-left: 3px solid var(--color-accent);
  padding-left: 24px;
  margin-block: 32px;
  line-height: 1.6;
}

/* Testimonial / stakeholder quote — used to surface a manager note in the
   case-study overview area. Sits as an elevated card against the page body. */
.csp-testimonial {
  background-color: var(--color-image-panel);
  border-radius: 12px;
  padding: 28px 32px;
  margin-top: 32px;
  box-shadow: var(--shadow-card);
  border-left: 3px solid var(--color-accent);
}

.csp-testimonial p {
  font-size: 1.0625rem;
  font-weight: var(--weight-book);
  font-style: normal;
  color: var(--color-main);
  line-height: 1.6;
  margin: 0;
}

.csp-testimonial cite {
  display: block;
  margin-top: 16px;
  font-size: var(--text-small);
  font-weight: var(--weight-book);
  color: var(--color-secondary);
  font-style: italic;
}


/* Image placeholder inside body content */
.csp-image-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-soft);
  border: 1px dashed var(--color-medium);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-strong);
  margin-block: 32px;
}

.csp-image-placeholder__label {
  font-size: var(--text-small);
  font-weight: var(--weight-book);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-strong);
  opacity: 0.6;
}

.csp-image-placeholder__caption {
  font-size: var(--text-small);   /* 12px */
  font-weight: var(--weight-book);
  color: var(--color-secondary);
  margin-top: 4px;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}


/* ── 16. CASE STUDY — RESPONSIVE ─────────────────────────────
   Balanced scaling of the breathing rhythm:
   - Desktop:   64px / 32px / 16px
   - Tablet:    48px / 24px / 12px
   - Mobile:    32px / 16px / 8px
   Hero section padding-block tightens at each step so the visible
   measurements stay symmetric. */

@media (max-width: 768px) {
  .csp-company-hero {
    padding-block: 32px;
  }
  .csp-overview {
    /* Visible 48px above trust (hero 32 + 16) and 48px below framing */
    padding-block: 16px 48px;
  }
  .csp-outcomes {
    padding-block: 24px 12px;
  }
  .csp-switcher-wrap {
    padding-top: 20px;
  }
  .csp-panel-intro {
    padding-block: 12px;
  }
  .csp-content {
    padding-block: 12px 24px;
  }
  .csp-outcomes__card {
    padding: 24px;
  }
  .csp-pagination {
    padding-block: 40px;
  }
}

@media (max-width: 640px) {
  .csp-company-hero {
    padding-block: 24px;
  }
  .csp-overview {
    /* Visible 32px above trust (hero 24 + 8) and 32px below framing */
    padding-block: 8px 32px;
  }
  .csp-outcomes {
    padding-block: 16px 8px;
  }
  .csp-switcher-wrap {
    padding-top: 16px;
  }
  .csp-panel-intro {
    padding-block: 8px;
  }
  .csp-content {
    padding-block: 8px 16px;
  }
  .csp-outcomes__card {
    padding: 20px;
  }
  .csp-pagination {
    padding-block: 32px;
  }
  .csp-outcomes__list {
    /* Force a tighter stack on mobile so stat cards don't squeeze */
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* Mobile-readable size for the long-form text elements that explicitly opt out
     of the --text-subtitle token (which collapses to 12px at this breakpoint). */
  .csp-overview__paragraph,
  .csp-panel-intro__subtitle,
  .csp-content blockquote {
    font-size: 1rem;   /* 16px — readable on phones, still visually subordinate to body when secondary-coloured */
  }
}


/* ── 17. CASE STUDY — DARK MODE OVERRIDES ────────────────── */
/* Outcomes card flips visual direction in dark mode: lifts off the page bg
   (medium > white in lightness) instead of dipping (soft < white in light). */
[data-theme="dark"] .csp-outcomes__card {
  background-color: var(--color-medium);
  border-color: var(--color-strong);
}

[data-theme="dark"] .csp-outcomes__item {
  border-top-color: var(--color-strong);   /* subtle separator on the dark-card surface */
}

[data-theme="dark"] .csp-image-placeholder {
  background-color: var(--color-medium);
  border-color: var(--color-strong);
  color: var(--color-secondary);   /* override --color-strong from light — was 1.5:1, invisible */
}

[data-theme="dark"] .csp-image-placeholder__label {
  color: var(--color-secondary);
  opacity: 1;   /* light mode uses 0.6 opacity on a brighter base; dark needs full opacity */
}

[data-theme="dark"] .csp-hero-image__placeholder {
  color: var(--color-secondary);
}

[data-theme="dark"] .csp-hero-image__placeholder-label {
  color: var(--color-secondary);
  opacity: 1;
}

/* Body images (light-canvas JPGs/PNGs) — add elevation in dark mode so the
   "window into a light room" effect feels intentional rather than orphaned. */
[data-theme="dark"] .csp-image img {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* Video / GIF surround: depth shadow lives on the pseudo-element canvas in dark mode. */
[data-theme="dark"] .csp-image:has(video)::before,
[data-theme="dark"] .csp-image:has(img[src$=".gif"])::before {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .csp-hero-image img {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}


/* ── 18. FOCUS STYLES ─────────────────────────────────────────
   Custom focus ring for keyboard users — :focus-visible only,
   so mouse clicks don't show the ring on buttons.
   ──────────────────────────────────────────────────────────── */

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Theme toggle / hamburger / tab buttons: tighter offset since they have padding */
.theme-toggle:focus-visible,
.hamburger:focus-visible,
.csp-switcher__item:focus-visible {
  outline-offset: 2px;
}


/* ── 19. THEME TRANSITION ─────────────────────────────────── */
/* Applied briefly by JS during dark/light switch, then removed.
   !important is intentional and scoped — lasts ~400ms only.    */
.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
  transition:
    background-color 0.3s ease,
    color            0.3s ease,
    border-color     0.3s ease,
    box-shadow       0.3s ease,
    filter           0.3s ease  !important;  /* logos use filter:invert() in dark — keep the flip smooth */
}


/* ── 20. PASSWORD GATE ────────────────────────────────────── */
/* Inserted by password-gate.js when a case study has been
   encrypted by lock.py. Sits inside <main>, so the page header,
   footer, and theme toggle remain visible while the case study
   body is locked. Uses the same token system as the rest of the
   case study chrome — no new colours.                          */

.csp-gate {
  padding-block: 96px;
  background-color: var(--color-soft);
  min-height: calc(100vh - var(--header-height) - 200px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.csp-gate__card {
  background-color: var(--color-white);
  border: 1px solid var(--color-medium);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 56px 48px;
  max-width: 480px;
  margin-inline: auto;
  text-align: center;
}

.csp-gate__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-soft);
  color: var(--color-main);
  margin-bottom: 24px;
}

.csp-gate__title {
  font-size: var(--text-section);
  font-weight: var(--weight-heavy);
  color: var(--color-main);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.csp-gate__copy {
  font-size: var(--text-paragraph);
  font-weight: var(--weight-book);
  color: var(--color-secondary);
  line-height: 1.6;
  margin-bottom: 32px;
}

.csp-gate__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  margin-bottom: 24px;
}

.csp-gate__label {
  font-size: var(--text-small);
  font-weight: var(--weight-heavy);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-main);
}

.csp-gate__input {
  font-family: var(--font);
  font-size: var(--text-paragraph);
  font-weight: var(--weight-book);
  color: var(--color-main);
  background-color: var(--color-white);
  border: 1px solid var(--color-medium);
  border-radius: 8px;
  padding: 14px 16px;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.csp-gate__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--ring-accent);
}

.csp-gate__error {
  font-size: var(--text-small);
  color: var(--color-error);
  min-height: 1.2em;
  margin: 0;
}

.csp-gate__submit {
  font-family: var(--font);
  font-size: var(--text-button);
  font-weight: var(--weight-heavy);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-white);
  background-color: var(--color-main);
  border: 1px solid var(--color-main);
  border-radius: 8px;
  padding: 14px 24px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  margin-top: 8px;
}

.csp-gate__submit:hover:not(:disabled) {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-main);
}

.csp-gate__submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.csp-gate__hint {
  font-size: var(--text-small);
  color: var(--color-secondary);
  margin: 0;
  line-height: 1.5;
}

.csp-gate__hint a {
  color: var(--color-main);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

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

/* Dark mode overrides for the gate */
[data-theme="dark"] .csp-gate__card {
  border-color: var(--color-strong);
}

[data-theme="dark"] .csp-gate__icon {
  background-color: var(--color-medium);   /* visible disc against the dark card surface */
}

[data-theme="dark"] .csp-gate__input {
  border-color: var(--color-strong);       /* the medium border vanishes against the dark card */
}

/* Hover contrast fix — accent bg + main text gives ~1.4:1 in dark, unreadable.
   Mirror the .btn-primary:hover fix at line ~1257. */
[data-theme="dark"] .csp-gate__submit:hover:not(:disabled) {
  color: var(--color-soft);
}

/* Responsive — narrower padding on small viewports */
@media (max-width: 768px) {
  .csp-gate {
    padding-block: 56px;
  }
  .csp-gate__card {
    padding: 40px 28px;
    border-radius: 12px;
  }
  .csp-gate__title {
    font-size: 1.25rem;
  }
}


/* ── 21. CASE STUDY — IMAGES ──────────────────────────────
   Real images replacing the dashed-border placeholders.
   Hero image fills the right column of the company hero grid.
   Body images sit full-width inside the content column with an
   italic caption underneath. No forced aspect ratio — images
   display at their natural proportions.                         */

/* Hero image — drops into .csp-hero-image without further wrapper */
.csp-hero-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Body image figure — replaces .csp-image-placeholder for real images */
.csp-image {
  margin-block: 32px;
}

.csp-image img,
.csp-image video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  /* Panel frame — fills the transparent canvas padding of composed PNGs
     with a theme-aware background that's perceptibly different from the
     page body. Light mode: darker than body (inset-card feel). Dark mode:
     LIGHTER than body (elevated-card convention). Combined with the
     baked-in shadow, this gives the visuals real presence without needing
     a hard border. */
  background-color: var(--color-image-panel);
}

/* Raw screen recordings (videos, GIFs) don't have the baked-in canvas
   padding that composed JPG/PNGs have. Recreate the same surround using a
   grid + pseudo-element so the canvas can have its OWN 8px corner radius
   independent of the video's radius — matching the static images' look. */
.csp-image:has(video),
.csp-image:has(img[src$=".gif"]) {
  display: grid;
  grid-template-rows: auto auto;
  position: relative;
  padding-top: 12px;        /* matches pseudo-canvas top extension so it stays inside the figure */
}

.csp-image:has(video) > video,
.csp-image:has(video) > .csp-image__caption,
.csp-image:has(img[src$=".gif"]) > img,
.csp-image:has(img[src$=".gif"]) > .csp-image__caption {
  grid-column: 1;
}

.csp-image:has(video) > video,
.csp-image:has(img[src$=".gif"]) > img {
  grid-row: 1;
  z-index: 1;
}

.csp-image:has(video) > .csp-image__caption,
.csp-image:has(img[src$=".gif"]) > .csp-image__caption {
  grid-row: 2;
  margin-top: 32px;         /* 20px baseline + 12px to clear pseudo bottom — keeps 20px gap between visible canvas and caption */
}

/* The canvas: pseudo-element placed in row 1 only. Extends vertically beyond the
   video via negative margin; horizontally it fills the figure (video itself is
   inset by its own margin). Its 8px border-radius gives clean subtle corners. */
.csp-image:has(video)::before,
.csp-image:has(img[src$=".gif"])::before {
  content: '';
  grid-row: 1;
  grid-column: 1;
  margin: -12px 0;          /* vertical-only — horizontal handled by video's own width */
  background: var(--color-image-canvas);
  border-radius: 8px;
  z-index: 0;
}

.csp-image video,
.csp-image img[src$=".gif"] {
  display: block;
  background-color: transparent;
  border-radius: 8px;
  width: calc(100% - 24px);
  margin: 0 auto;           /* horizontal centering only; vertical handled by figure padding/grid */
}

/* GIFs sit a touch smaller than videos for sharper rendering on small viewports. */
.csp-image img[src$=".gif"] {
  width: calc(100% - 80px);
}

/* Bare variant — used when the source visual already has its own card
   frame baked in (e.g. a design-system overview slide with its own
   light-grey background). Skipping the panel surround prevents the
   "frame within a frame" effect of nesting two grey surfaces. */
.csp-image--bare img {
  background-color: transparent;
}

.csp-image__caption {
  font-size: var(--text-small);
  font-weight: var(--weight-book);
  color: var(--color-secondary);
  margin-top: 20px;
  font-style: italic;
  text-align: center;
  line-height: 1.5;
}


/* ── 19. REDUCED MOTION ───────────────────────────────────
   Respect the user's OS-level preference to minimize motion.
   Doesn't kill content; just removes decorative animation and
   transitions. JS smooth-scrolls are handled separately in
   index.html / csp-tabs.js with the same media query. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}