/* ─────────────────────────────────────────────────────────────
   02-components.css
   Shared reusable components: CTA button · section labels ·
   section headings · logo variants
───────────────────────────────────────────────────────────── */

/* ── CTA Button ── */
.cta-btn {
  display: inline-block;
  background-color: #C8F04A;
  color: #0A0A0A;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 36px;
  border-radius: 0;
  transition: transform 0.2s ease, filter 0.2s ease;
  cursor: pointer;
}

.cta-btn:hover {
  transform: scale(1.03);
  filter: brightness(1.1);
}

/* ── Section label (small muted uppercase) ── */
.section-label {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 16px;
}

.section-label--accent {
  color: #C8F04A;
}

/* ── Section heading ── */
.section-heading {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 48px;
}

/* ── Logo — icon mark (hero) ──
   The PNG has a white background; mix-blend-mode: screen
   removes the white on dark backgrounds.
   hue-rotate + saturate pushes the inverted coral toward the
   brand lime-green (#C8F04A, hue ~78°). ── */
.logo-mark {
  display: block;
  width: 52px;
  height: auto;
  filter: invert(1) hue-rotate(-110deg) saturate(6) brightness(1.25);
  mix-blend-mode: screen;
}

/* ── Logo — horizontal lockup (footer) ──
   After invert(1): coral icon → teal (~186° hue), black text → white.
   hue-rotate(-110deg) shifts teal (186°) → lime-green (~76°).
   saturate(3) boosts the colour. White text is achromatic so it
   is unaffected by hue-rotate and stays white. ── */
.logo-lockup {
  display: block;
  width: 180px;
  height: auto;
  filter: invert(1) hue-rotate(-110deg) saturate(3) brightness(1.15);
  mix-blend-mode: screen;
}