/* ═══════════════════════════════════════════════════════
   nordic-home.css  —  Nordic Home Solutions case study
   ═══════════════════════════════════════════════════════ */

/* ── BRAND PALETTE ── */
:root {
  --brand:     #6B8FA3;
  --brand-dk:  #3E6478;
  --brand-lt:  #A8C4D4;
  --bg:        #F8F8F6;
  --bg-alt:    #EEEEE9;
  --bg-dark:   #1E2A35;
  --ink:       #1A1F24;
  --ink-soft:  #4A5560;
  --white:     #ffffff;
  --orange:    #E8541A;

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

  /* Page transition */
  --page-transition-bg: var(--bg-dark);

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

  /* Nav */
  --nav-bg: linear-gradient(to bottom, rgba(30,42,53,0.97) 0%, rgba(30,42,53,0.7) 60%, transparent 100%);
  --nav-bg-scrolled: rgba(30,42,53,0.97);
  --nav-cta-scrolled-color: var(--brand-lt);
  --nav-cta-scrolled-hover-bg: var(--brand);
  --nav-cta-scrolled-hover-color: var(--white);
  --nav-mobile-bg: rgba(30,42,53,0.97);

  /* Footer */
  --footer-bg:     var(--bg-dark);
  --footer-accent: var(--brand-lt);
}

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

/* ── SIZE OVERRIDES (Cabinet Grotesk reads smaller than Cousine at same rem) ── */
.section-body  { font-size: 1rem;   line-height: 1.75; }
.section-label { font-size: 0.72rem; letter-spacing: 0.2em; }
.meta-label    { font-size: 0.72rem; }
.meta-value    { font-size: 0.95rem; }
.case-tagline  { font-size: 1rem; }
.case-eyebrow  { font-size: 0.7rem; }
.step-title    { font-size: 0.88rem; letter-spacing: 0.1em; }
.step-body     { font-size: 0.92rem; line-height: 1.65; }
.case-nav a    { font-size: 0.85rem; }
.swatch-name   { font-size: 0.78rem; }
.swatch-hex    { font-size: 0.72rem; }

/* ── FONT OVERRIDES (Cabinet Grotesk throughout) ── */
.case-title,
.section-heading,
.step-num {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 800;
  font-style: normal;
  letter-spacing: -0.03em;
}

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

.case-eyebrow,
.case-tagline,
.meta-label, .meta-value,
.section-label,
.section-body,
.swatch-name, .swatch-hex,
.case-nav a, .case-nav-center,
.step-title, .step-body,
.btn-visit {
  font-family: 'Cabinet Grotesk', sans-serif;
}

/* Nordic cursor uses mix-blend-mode instead of flat color */
.cursor { mix-blend-mode: difference; }
.cursor-trail { background: var(--brand); }
@keyframes trailFade {
  0%   { opacity: 0.5; width: 10px; height: 10px; }
  100% { opacity: 0;   width: 3px;  height: 3px;  }
}

/* ── HERO OVERRIDES ── */
.case-hero {
  height: 100vh;
}
.case-hero-overlay {
  background: linear-gradient(to top, rgba(30,42,53,1) 0%, rgba(30,42,53,0.75) 50%, rgba(30,42,53,0.5) 100%);
}

/* ── SECTION OVERRIDES ── */
.section-dark { background: var(--bg-dark); }

.showcase-full { background: var(--bg-alt); border: 1px solid rgba(107,143,163,0.15); }

/* ── FOOTER WORDMARK ── */
.footer-wordmark { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 800; }

/* ── CASE NAV OVERRIDES ── */
.case-nav { border-top: none; }
.case-nav a { color: var(--brand-dk); }
.case-nav a:hover { color: var(--brand); }
.case-nav-center { color: rgba(26,31,36,0.35); }

/* ── MOCKUP OVERRIDES ── */
.mockup-card { border: none; }

/* ── PALETTE / VIDEO RESPONSIVE ── */
@media (max-width: 768px) {
  .palette-video-grid { grid-template-columns: 1fr !important; }
  .palette-video-aside { width: 100% !important; }
  .footer-wordmark { font-size: clamp(2rem, 15vw, 5rem); }
}