/* ==========================================================================
   base.css — design tokens, fonts, reset, typography, buttons, utilities
   ========================================================================== */

/* ---- Fonts (self-hosted, latin subset, variable where available) ------- */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/montserrat-latin-wght.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../fonts/open-sans-latin-wght.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/roboto-latin-wght.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/roboto-latin-wght-italic.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-latin-700.woff2") format("woff2"); }

/* ---- Tokens -------------------------------------------------------------- */
:root {
  --green: #94c93d;
  --green-alt: #95c64a;
  --orange: #e5683c;
  --orange-nav: #e0592a;
  --coral: #f68552;
  --coral-dot: #ff8452;
  --peach: rgba(229, 104, 60, 0.12);
  --ink: #333333;
  --ink-strong: #0a0a0a;
  --text: #666666;
  --text-soft: #727272;
  --text-quote: #424242;
  --muted: #a9a9a9;
  --line: #dadada;
  --line-soft: rgba(0, 0, 0, 0.1);
  --bg-alt: #f8f8f8;
  --bg-soft: #fbfbfb;
  --white: #ffffff;

  --font-heading: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-body: "Roboto", "Segoe UI", Arial, sans-serif;
  --font-ui: "Poppins", "Segoe UI", Arial, sans-serif;
  --font-alt: "Open Sans", "Segoe UI", Arial, sans-serif;

  --container: 1080px;
  --container-wide: 1233px;
  --gutter: 20px;
  --header-height: 100px;
  --radius-pill: 30px;
  --shadow-card: 0 0 21px -10px rgba(0, 0, 0, 0.3);
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.05);
  --shadow-icon: 0 4px 15px rgba(0, 0, 0, 0.1);
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

@media (max-width: 980px) {
  :root { --header-height: 88px; }
}

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 16px);
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
picture { display: contents; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--orange); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

ul, ol { margin: 0; padding: 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
strong, b { font-weight: 700; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* ---- Layout helpers ------------------------------------------------------ */
/* Containers are sized so the *content* box matches Divi's row widths (1080px / 1233px). */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }
.container--narrow { max-width: calc(800px + 2 * var(--gutter)); }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-block;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 13px 24px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  background: var(--green);
  color: var(--white);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.btn:hover, .btn:focus-visible { text-decoration: none; transform: translateY(-1px); }

.btn--white { background: var(--white); color: var(--green); }
.btn--white:hover, .btn--white:focus-visible { background: var(--green); color: var(--white); box-shadow: 0 0 5px 2px #999595; }

.btn--green { background: var(--green-alt); color: #000; font-weight: 600; padding: 17px 21px; }
.btn--green:hover, .btn--green:focus-visible { background: var(--green); box-shadow: 0 6px 18px rgba(148, 201, 61, 0.45); }

.btn--submit {
  width: 100%;
  padding: 8px 20px;
  font-size: 20px;
  font-weight: 500;
  line-height: 34px;
  background: var(--green);
  color: var(--white);
}
.btn--submit:hover, .btn--submit:focus-visible { background: #85b834; }
.btn--submit[disabled] { opacity: 0.7; cursor: progress; transform: none; }

/* ---- Text accents -------------------------------------------------------- */
.accent-green { color: var(--green) !important; font-weight: 600; font-style: normal; }
.accent-orange { color: var(--coral); font-style: normal; }

/* Heading with the little green "spark" at the top-left, as on the WordPress site. */
.h-spark { position: relative; }
.h-spark::before {
  content: "";
  position: absolute;
  top: -33px;
  left: -30px;
  width: 40px;
  height: 40px;
  background: url("../media/2024/04/Group-1171274759.svg") no-repeat center / contain;
  pointer-events: none;
}
.h-spark--white::before { background-image: url("../media/2024/04/Group-1171274760.svg"); }
@media (max-width: 1200px) {
  .h-spark::before { left: 0; }
}

/* ---- Utilities ----------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--white);
  border-radius: 0 0 8px 8px;
}
.skip-link:focus { top: 0; }

/* Generic intro band used by the contact and error pages. */
.page-intro {
  padding: 80px 0 60px;
  background: var(--bg-alt);
  text-align: center;
}
.page-intro h1 { font-size: clamp(32px, 5vw, 48px); }
.page-intro__code { font-family: var(--font-heading); font-size: 72px; font-weight: 700; color: var(--green); line-height: 1; margin: 0; }