:root {
  /* Colors — bright white base, one pink-accent family. Fixed (not tied to OS dark mode). */
  --surface: #ffffff;
  --surface-soft: #f9e4ea;
  --surface-line: #ecc9d5;
  --accent-deep: #7a1f45;
  --accent: #ff3d8f;
  --accent-soft: #c23572;
  --text: #201720;
  --muted: #8a7079;
}

:root {
  /* Gradients — black-to-pink duotone, built from the palette above */
  --gradient-top: linear-gradient(
    0deg,
    var(--surface),
    var(--surface-soft),
    var(--accent-deep),
    var(--accent),
    var(--accent-soft)
  );
  --gradient-right: linear-gradient(
    90deg,
    var(--surface),
    var(--surface-soft),
    var(--accent-deep),
    var(--accent),
    var(--accent-soft)
  );
  --gradient-bottom: linear-gradient(
    180deg,
    var(--surface),
    var(--surface-soft),
    var(--accent-deep),
    var(--accent),
    var(--accent-soft)
  );
  --gradient-left: linear-gradient(
    270deg,
    var(--surface),
    var(--surface-soft),
    var(--accent-deep),
    var(--accent),
    var(--accent-soft)
  );
  --gradient-top-right: linear-gradient(
    45deg,
    var(--surface),
    var(--surface-soft),
    var(--accent-deep),
    var(--accent),
    var(--accent-soft)
  );
  --gradient-bottom-right: linear-gradient(
    135deg,
    var(--surface),
    var(--surface-soft),
    var(--accent-deep),
    var(--accent),
    var(--accent-soft)
  );
  --gradient-top-left: linear-gradient(
    225deg,
    var(--surface),
    var(--surface-soft),
    var(--accent-deep),
    var(--accent),
    var(--accent-soft)
  );
  --gradient-bottom-left: linear-gradient(
    315deg,
    var(--surface),
    var(--surface-soft),
    var(--accent-deep),
    var(--accent),
    var(--accent-soft)
  );
  --gradient-radial: radial-gradient(
    var(--surface),
    var(--surface-soft),
    var(--accent-deep),
    var(--accent),
    var(--accent-soft)
  );

  /* FONT FAMILIES */
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "Britney", cursive;
  --font-script: "Alex Brush", cursive;

  /* FONT WEIGHTS */
  --fw-thin: 100;
  --fw-extra-light: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra-bold: 800;
  --fw-black: 900;

  /* FONT SIZES */
  --fs-base: 1rem;
  --fs-h6: 1.25rem;
  --fs-h5: 1.5625rem;
  --fs-h4: 1.953rem;
  --fs-h3: 2.441rem;
  --fs-h2: 3.052rem;
  --fs-h1: 3.815rem;

  /* DISPLAY SIZES - For hero sections and large displays */
  --fs-display-lg: 4.769rem;
  --fs-display-xl: 5.961rem;
  --fs-display-2xl: 7.451rem;

  /* LINE HEIGHTS */
  --lh-base: 1.5;
  --lh-h6: 1.5;
  --lh-h5: 1.5;
  --lh-h4: 1.3;
  --lh-h3: 1.2;
  --lh-h2: 1.1;
  --lh-h1: 1;

  /* DISPLAY LINE HEIGHTS */
  --lh-display-lg: 0.95;
  --lh-display-xl: 0.9;
  --lh-display-2xl: 0.85;

  /* LETTER SPACING */
  --ls-h6: -0.005rem;
  --ls-h5: -0.008rem;
  --ls-h4: -0.01rem;
  --ls-h3: -0.015rem;
  --ls-h2: -0.018rem;
  --ls-h1: -0.02rem;

  /* DISPLAY LETTER SPACING */
  --ls-display-lg: -0.025rem;
  --ls-display-xl: -0.03rem;
  --ls-display-2xl: -0.035rem;
}

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

a {
  color: inherit;
  text-decoration: none;
}

html {
  font-size: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  margin: 0;
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background-color: var(--surface);
  color: var(--text);
}

body::-webkit-scrollbar {
  display: none;
}

/* Scroll reveal — only active when JS confirms it loaded */
html.js-ready [data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity 0.85s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.85s cubic-bezier(0.25, 1, 0.5, 1);
}

html.js-ready [data-reveal="up"] {
  transform: translateY(22px) scale(0.96);
}
html.js-ready [data-reveal="left"] {
  transform: translateX(-22px) scale(0.96);
}
html.js-ready [data-reveal="right"] {
  transform: translateX(22px) scale(0.96);
}

html.js-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  will-change: auto;
}

/* Mobile — smaller movement, faster, all directions become a gentle fade-up */
@media (max-width: 768px) {
  html.js-ready [data-reveal] {
    transition:
      opacity 0.65s cubic-bezier(0.25, 1, 0.5, 1),
      transform 0.65s cubic-bezier(0.25, 1, 0.5, 1);
  }

  html.js-ready [data-reveal="up"],
  html.js-ready [data-reveal="left"],
  html.js-ready [data-reveal="right"] {
    transform: translateY(14px) scale(0.98);
  }
}

@media (max-width: 480px) {
  html.js-ready [data-reveal] {
    transition:
      opacity 0.55s cubic-bezier(0.25, 1, 0.5, 1),
      transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
  }

  html.js-ready [data-reveal="up"],
  html.js-ready [data-reveal="left"],
  html.js-ready [data-reveal="right"] {
    transform: translateY(10px) scale(0.99);
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-body);
  font-weight: var(--fw-extra-bold);
  color: var(--text);
  margin-bottom: 1rem;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}
h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}
h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
}
h5 {
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  letter-spacing: var(--ls-h5);
}
h6 {
  font-size: var(--fs-h6);
  line-height: var(--lh-h6);
  letter-spacing: var(--ls-h6);
}

.display-2xl {
  font-size: var(--fs-display-2xl);
  line-height: var(--lh-display-2xl);
  letter-spacing: var(--ls-display-2xl);
  font-family: var(--font-body);
  color: var(--text);
  font-weight: var(--fw-black);
}

.display-xl {
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display-xl);
  letter-spacing: var(--ls-display-xl);
  font-family: var(--font-body);
  color: var(--text);
  font-weight: var(--fw-extra-bold);
}

.display-lg {
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display-lg);
  letter-spacing: var(--ls-display-lg);
  font-family: var(--font-body);
  color: var(--text);
  font-weight: var(--fw-bold);
}

.mt-navbar {
  margin-top: 7rem;
}

.section-spacing {
  margin-top: 4rem !important;
  margin-bottom: 4rem !important;
}

.section-spacing-lg {
  margin-top: 6rem !important;
  margin-bottom: 6rem !important;
}

.section-spacing-sm {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.pt-section {
  margin-top: 4rem !important;
}

.pb-section {
  margin-bottom: 4rem !important;
}

@media (max-width: 1024px) {
  html {
    font-size: 106.25%;
  }

  .mt-navbar {
    margin-top: 6.5rem;
  }

  .section-spacing {
    margin-top: 3.5rem !important;
    margin-bottom: 3.5rem !important;
  }

  .section-spacing-lg {
    margin-top: 5rem !important;
    margin-bottom: 5rem !important;
  }

  .pt-section {
    margin-top: 3.5rem !important;
  }

  .pb-section {
    margin-bottom: 3.5rem !important;
  }
}

@media (max-width: 900px) {
  html {
    font-size: 100%;
  }

  .mt-navbar {
    margin-top: 6rem;
  }

  .section-spacing {
    margin-top: 3.25rem !important;
    margin-bottom: 3.25rem !important;
  }

  .section-spacing-lg {
    margin-top: 4.5rem !important;
    margin-bottom: 4.5rem !important;
  }

  .pt-section {
    margin-top: 3.25rem !important;
  }

  .pb-section {
    margin-bottom: 3.25rem !important;
  }
}

@media (max-width: 768px) {
  .mt-navbar {
    margin-top: 5.5rem;
  }

  .section-spacing {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }

  .section-spacing-lg {
    margin-top: 4rem !important;
    margin-bottom: 4rem !important;
  }

  .section-spacing-sm {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .pt-section {
    margin-top: 3rem !important;
  }

  .pb-section {
    margin-bottom: 3rem !important;
  }
}

@media (max-width: 480px) {
  .mt-navbar {
    margin-top: 5rem;
  }

  .section-spacing {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
  }

  .section-spacing-lg {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }

  .section-spacing-sm {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .pt-section {
    margin-top: 2rem !important;
  }

  .pb-section {
    margin-bottom: 2rem !important;
  }
}