/* ===================================
   HelloClio Global Styles
   Shared across all HelloClio pages
   =================================== */

/* VARIABLES */
:root {
  --sage: #5B7B6A;
  --sage-light: #7A9B8A;
  --sage-pale: #E8F0EB;
  --cream: #F4F2ED;
  --cream-dark: #F3EDE4;
  --coral: #E07A5F;
  --coral-hover: #D4694D;
  --amber: #E8A849;
  --charcoal: #2C2C2C;
  --charcoal-light: #555;
  --warm-white: #FEFDFB;
  --teal-deep: #3D6B5E;
}

/* BODY & TYPOGRAPHY */
body {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--charcoal);
  line-height: 1.65;
}

h1, h2, h3 { font-family: 'Fraunces', Georgia, serif !important; font-weight: 500; line-height: 1.25; }

/* BUTTONS */
.btn-primary {
  background: var(--coral); color: white;
  padding: 16px 36px; border-radius: 10px;
  font-size: 1rem; font-weight: 600;
  text-decoration: none; transition: all 0.25s;
  box-shadow: 0 4px 16px rgba(224,122,95,0.3);
}
.btn-primary:hover { background: var(--coral-hover); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(224,122,95,0.35); }
.btn-secondary {
  background: transparent; color: white;
  padding: 16px 36px; border-radius: 10px;
  font-size: 1rem; font-weight: 600;
  text-decoration: none; border: 2px solid rgba(255,255,255,0.5);
  transition: all 0.25s;
}
.btn-secondary:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.8); }

/* SECTION BASE */
section { padding: 100px 32px; }
.section-inner { max-width: 1060px; margin: 0 auto; }
.section-label {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--coral); margin-bottom: 12px;
}

/* FINAL CTA */
.final-cta {
  background: linear-gradient(165deg, var(--sage-pale) 0%, var(--cream) 100%);
  text-align: center; padding: 120px 32px;
}
.final-cta h2 { font-size: 2.6rem; margin-bottom: 16px; }
.final-cta p {
  font-size: 1.1rem; color: var(--charcoal-light);
  max-width: 520px; margin: 0 auto 40px;
}