/* ============ WeDrink base: variables, reset, typography ============ */

:root {
  /* Brand palette — sampled from the franchise brochure (print teal #009A94) */
  --teal: #009A94;
  --teal-dark: #00776F;
  --teal-darker: #00524E;
  --teal-ink: #06302E;
  --mint: #E4F5F4;
  --sky: #EAF7FB;
  --red: #E63946;
  --pink: #F06EAA;
  --yellow: #FFD23F;
  --cream: #FFF9F0;
  --white: #FFFFFF;
  --ink: #123433;
  --ink-soft: #3F615F;

  --font-head: 'Montserrat', 'Arial Black', sans-serif;
  --font-body: 'Nunito', 'Segoe UI', sans-serif;

  --nav-h: 72px;
  --radius: 20px;
  --shadow: 0 10px 30px rgba(0, 82, 78, 0.12);
  --shadow-lift: 0 18px 44px rgba(0, 82, 78, 0.2);
}

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

/* overflow-x on html ONLY (never body, never clip) */
html { overflow-x: hidden; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
ul { list-style: none; }

h1, h2, h3 { font-family: var(--font-head); line-height: 1.15; }

.container { width: min(1180px, 92vw); margin-inline: auto; }

.section { padding: clamp(72px, 10vw, 130px) 0; }
.section--tint { background: linear-gradient(180deg, var(--sky) 0%, var(--mint) 100%); }

.kicker {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  background: var(--mint);
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 14px;
}

.section__title {
  font-size: clamp(28px, 4.4vw, 46px);
  font-weight: 900;
  color: var(--teal-ink);
  margin-bottom: clamp(24px, 3.5vw, 44px);
  max-width: 20ch;
}

::selection { background: var(--teal); color: #fff; }