/* ═══════════════════════════════════════════════════════
   actura.css  —  Actura case study
   ═══════════════════════════════════════════════════════ */

/* ── BRAND PALETTE ── */
:root {
  --brand:     #2F4F3E;
  --brand-dk:  #21382C;
  --brand-lt:  #C14600;
  --brand-acc: #D8CBB5;
  --bg:        #FFFFFF;
  --bg-mid:    #2F4F3E;
  --bg-light:  #D8CBB5;
  --ink:       #21382C;
  --ink-light: #FFFFFF;
  --ink-soft:  rgba(33,56,44,0.6);
  --white:     #FFFFFF;
  --orange:    #C14600;

  /* Cursor */
  --cursor-color:       var(--orange);
  --cursor-trail-color: var(--orange);

  /* Page transition */
  --page-transition-bg: #21382C;

  /* Arrive animation */
  --arrive-y:      50px;
  --arrive-scale:  0.95;
  --arrive-rotate: 1deg;

  /* Nav */
  --nav-bg: linear-gradient(to bottom, rgba(33,56,44,0.97) 0%, rgba(33,56,44,0.6) 50%, transparent 100%);
  --nav-bg-scrolled: rgba(33,56,44,0.97);
  --nav-cta-scrolled-color: #D8CBB5;
  --nav-cta-scrolled-hover-bg: var(--brand);
  --nav-cta-scrolled-hover-color: var(--white);
  --nav-mobile-bg: rgba(33,56,44,0.97);

  /* Footer */
  --footer-bg:     var(--brand-dk);
  --footer-accent: var(--brand-acc);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
}

/* ── FONT OVERRIDES (Inter replaces Fraunces / Cousine sitewide on this page) ── */
.case-eyebrow,
.case-tagline,
.meta-label, .meta-value,
.section-label,
.section-body,
.swatch-name, .swatch-hex,
.case-nav a, .case-nav-center,
.mockup-placeholder,
.showcase-placeholder,
.step-title, .step-body,
.btn-visit {
  font-family: 'Inter', sans-serif;
}

.case-title,
.section-heading,
.step-num {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-style: normal;
  letter-spacing: -0.03em;
}

.case-title em { font-style: normal; }

/* ── HERO ── */
.case-hero { background: var(--brand-dk); }
.case-hero-video { opacity: 0.45; }
.case-hero-overlay {
  background: linear-gradient(to top, rgba(33,56,44,1) 0%, rgba(33,56,44,0.6) 45%, rgba(33,56,44,0.15) 100%);
}
.case-title { font-size: clamp(5rem, 14vw, 12rem); }

/* ── INTRO STRIP ── */
.intro-strip { background: var(--brand-dk); }

/* ── DEFAULT (LIGHT) SECTION TEXT ── */
.section-heading { color: var(--ink); }
.section-body    { color: var(--ink-soft); }
.section-label   { color: var(--brand-lt); }
.section-label::before { background: var(--brand-lt); }

/* ── DARK SECTION (section-mid) OVERRIDES ── */
.section-mid {
  background: var(--bg-mid);
  padding: 7rem 5vw;
}
.section-mid .section-inner      { max-width: 1300px; margin: 0 auto; }
.section-mid .section-heading    { color: var(--ink-light); }
.section-mid .section-body       { color: rgba(255,255,255,0.65); }
.section-mid .section-label      { color: var(--brand-acc); }
.section-mid .section-label::before { background: var(--brand-acc); }

.section-light {
  background: var(--bg-light);
  color: var(--ink);
  padding: 7rem 5vw;
}
.section-light .section-inner { max-width: 1300px; margin: 0 auto; }

/* ── MOCKUP ── */
.mockup-card {
  background: var(--bg-light);
  border: 1px solid rgba(47,79,62,0.12);
}
.showcase-full {
  background: var(--bg-light);
  border: 1px solid rgba(47,79,62,0.1);
}

/* ── FOOTER WORDMARK ── */
.footer-wordmark { font-family: 'Inter', sans-serif; font-weight: 800; font-size: clamp(3.5rem, 16vw, 13rem); }
@media (max-width: 768px) {
  .footer-wordmark { font-size: clamp(2rem, 15vw, 5rem); }
}

/* ── CASE NAV ── */
.case-nav {
  background: var(--brand-dk);
  border-top: 1px solid rgba(216,203,181,0.15);
}
.case-nav a           { color: var(--brand-acc); }
.case-nav a:hover     { color: var(--white); }
.case-nav-center      { color: rgba(216,203,181,0.35); }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .nav-links    { gap: 1rem; }
  .section-light { padding: 4rem 5vw; }
  .section-mid   { padding: 4rem 5vw; }
  .design-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}
@media (max-width: 480px) {
  .nav-links li:nth-child(1), .nav-links li:nth-child(2) { display: none; }
  .intro-strip   { flex-direction: column; gap: 1.5rem; }
  .section-light { padding: 3rem 5vw; }
  .section-mid   { padding: 3rem 5vw; }
}