/* fonts impport local */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-VariableFont_wght.woff2")
    format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Italic-VariableFont_wght.woff2")
    format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

html,
body {
  overflow-x: clip;
  overflow-anchor: auto;
}

body {
  background-color: var(--color-bg-light);
  color: var(--color-text-dark);
}



:root {
  /* colors */
  --color-brand-green: #72A250; 
  --color-brand-green-dark: #57803A; 
  --color-brand-dark-grey: #404040; 
  --color-brand-light-grey: #E4EBE5; 
  --color-brand-gold: #F8B822; 
  --color-brand-blue: #4AAEDE; 

  --color-text-dark: #4F4F4F; 
  --color-text-light: #FFFFFF; 
  
  --color-link-default: #72A250; 
  --color-link-hover: #386120; 

  /* Backgrounds */
  --color-bg-light: #FFFFFF; 
  --color-bg-medium: #E4E3E5; 
  --color-bg-dark: #494840; 
  
  /* CTA / Buttons */
  --color-cta-default: #FFFFFF; 
  --color-cta-hover: #578034; 

  /* Dividers */
  --color-divider-dark: rgba(0, 0, 0, 0.1); 

  /* Fonts */
  --font-sans:
    "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial,
    "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Breakpoints */
  --vw-min: 360;
  --vw-max: 1440;

  /* Headings - Fluid formulas adjusted to hit your max values (10% smaller) */
  
  /* HERO: Max ~68px (down from 75px), Min ~43px */
  --fs-hero: clamp(43px, calc(43px + (60 - 45) * ((100vw - 360px) / (1440 - 360))), 68px);
  --lh-hero: 0.9; 
  --fw-hero: var(--fw-extrabold);

  /* H1: Max ~51px (down from 57px), Min ~34px */
  --fs-h1: clamp(34px, calc(34px + (51 - 34) * ((100vw - 360px) / (1440 - 360))), 51px);
  --lh-h1: 1.0; 
  --fw-h1: var(--fw-bold);

  /* H2: Max ~42px (down from 47px), Min ~29px */
  --fs-h2: clamp(29px, calc(29px + (42 - 29) * ((100vw - 360px) / (1440 - 360))), 42px);
  --lh-h2: 1.25; 
  --fw-h2: var(--fw-bold);

  /* H3: Max ~35px (down from 39px), Min ~25px */
  --fs-h3: clamp(25px, calc(25px + (35 - 25) * ((100vw - 360px) / (1440 - 360))), 35px);
  --lh-h3: 1.07; 
  --fw-h3: var(--fw-bold);

  /* H4: Max ~29px (down from 32px), Min ~22px */
  --fs-h4: clamp(22px, calc(22px + (29 - 22) * ((100vw - 360px) / (1440 - 360))), 29px);
  --lh-h4: 1.09; 
  --fw-h4: var(--fw-semibold);

  /* H5: Max ~24px (down from 27px), Min ~20px */
  --fs-h5: clamp(20px, calc(20px + (24 - 20) * ((100vw - 360px) / (1440 - 360))), 24px);
  --lh-h5: 1.3; 
  --fw-h5: var(--fw-bold);

  /* H6: Max ~20px (down from 22px), Min ~16px */
  --fs-h6: clamp(16px, calc(16px + (20 - 16) * ((100vw - 360px) / (1440 - 360))), 20px);
  --lh-h6: 1.59; 
  --fw-h6: var(--fw-bold);

  /* Body: Max ~17px (down from 19px), Min ~14px */
  --fs-body: clamp(14px, calc(16px + (16 - 14) * ((100vw - 360px) / (1440 - 360))), 17px);
  --lh-body: 1.63; 
  --fw-body: var(--fw-regular);

  /* Body Bold */
  --fs-body-bold: var(--fs-body);
  --lh-body-bold: var(--lh-body);
  --fw-body-bold: var(--fw-bold);

  /* Body Link */
  --fs-body-link: var(--fs-body);
  --lh-body-link: var(--lh-body);
  --fw-body-link: var(--fw-semibold);

  /* UI Tokens (Scaled by 10%) */
  --fs-cta: 14px;
  --lh-cta: 1.06; 
  --fw-cta: var(--fw-semibold);
  --ls-cta: 0.02em;

  --fs-nav: 13.5px;
  --lh-nav: 1.2; 
  --fw-nav: var(--fw-semibold);

  --fs-menu: 14.5px;
  --lh-menu: 1.12; 
  --fw-medium: var(--fw-medium);

  --fs-footer: 13px;
  --lh-footer: 1.14; 
  --fw-footer: var(--fw-bold);

  --fs-caption-sm: 11px;
  --lh-caption-sm: 1.33; 
  --fw-caption-sm: var(--fw-regular);

  /* Shadows (Kept as is) */
  --shadow-01: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-02: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-03: 0 4px 6px rgba(16, 24, 40, 0.07), 0 2px 4px rgba(16, 24, 40, 0.05);
  --shadow-04: 0 8px 12px rgba(16, 24, 40, 0.08), 0 4px 6px rgba(16, 24, 40, 0.06);
  --shadow-05: 0 12px 16px rgba(16, 24, 40, 0.1), 0 6px 8px rgba(16, 24, 40, 0.07);
  --shadow-06: 0 16px 24px rgba(16, 24, 40, 0.12), 0 8px 12px rgba(16, 24, 40, 0.08);
  --shadow-07: 0 20px 32px rgba(16, 24, 40, 0.14), 0 10px 16px rgba(16, 24, 40, 0.1);
  --shadow-08: 0 24px 40px rgba(16, 24, 40, 0.16), 0 12px 20px rgba(16, 24, 40, 0.12);
  --shadow-09: 0 32px 48px rgba(16, 24, 40, 0.18), 0 16px 24px rgba(16, 24, 40, 0.14);
  --shadow-10: 0 40px 64px rgba(16, 24, 40, 0.2), 0 20px 32px rgba(16, 24, 40, 0.16);

  --shadow-card-sm: var(--shadow-02);
  --shadow-card-md: var(--shadow-05);
  --shadow-card-lg: var(--shadow-08);
  --shadow-card-xl: var(--shadow-09);

  /* Spacings (Kept as is) */
  --space-1: 10px;
  --space-2: 20px;
  --space-3: 30px;
  --space-4: 40px;
  --space-5: 50px;
  --space-6: 60px;
  --space-7: 70px;
  --space-8: 80px;
  --space-9: 90px;
  --space-10: 100px;

  /* Radius (Kept as is) */
  --radius-card: 16px;
  --radius-button: 16px;
  --radius-sm: 8px;
  --radius-lg: 24px;

  /* Padding & Layout (Kept as is) */
  --card-padding-x: 30px;
  --card-padding-y: 40px;
  --button-padding-x: 28px;
  --button-padding-y: 16px;
  --section-padding-y: 80px;
  --section-padding-x: 40px;
  --container-padding: 30px;
  --grid-gap: 30px;
  --margin-base: 30px;
  --margin-lg: 50px;
}

@media (max-width: 768px) {
  :root {
    --card-padding-x: 20px;
    --card-padding-y: 30px;
    --button-padding-x: 30px;
    --button-padding-y: 16px;
    --section-padding-y: 60px;
  }
}

/* UTILITY CLASSES */
.type-hero {
  font-family: var(--font-sans);
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  font-weight: var(--fw-hero);
}

.h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-h1);
}
.h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
}
.h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
}
.h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-h4);
}
.h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  font-weight: var(--fw-h5);
}
.h6 {
  font-family: var(--font-sans);
  font-size: var(--fs-h6);
  line-height: var(--lh-h6);
  font-weight: var(--fw-h6);
}

/* GLOBAL HEADER TAGS */
h1 { @extend .h1; margin-bottom: var(--space-2); }
h2 { @extend .h2; margin-bottom: var(--space-2); }
h3 { @extend .h3; margin-bottom: var(--space-2); }
h4 { @extend .h4; margin-bottom: var(--space-1); }
h5 { @extend .h5; margin-bottom: var(--space-1); }
h6 { @extend .h6; margin-bottom: var(--space-1); }


.body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
}

.body-bold {
  font-family: var(--font-sans);
  font-size: var(--fs-body-bold);
  line-height: var(--lh-body-bold);
  font-weight: var(--fw-body-bold);
}

.body-link {
  font-family: var(--font-sans);
  font-size: var(--fs-body-link);
  line-height: var(--lh-body-link);
  font-weight: var(--fw-body-link);
  color: var(--color-link-default);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.body-link:hover {
  color: var(--color-link-hover);
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background-color: #FFFFFF;
  color: var(--color-brand-green, #72A250);
  padding: 0.5rem 0.5rem 0.5rem 2rem;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.cta__icon {
  width: 44px;
  height: 44px;
  background-color: var(--color-brand-green-dark, #57803A);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
  transition: transform 0.3s ease;
}

.cta__icon svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  stroke-width: 3px;
}

.cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  background-color: var(--color-brand-green, #72A250);
  color: #FFFFFF;
}

.cta:hover .cta__icon {
  transform: rotate(45deg);
  background-color: var(--color-brand-green-dark, #57803A);
}

.nav-link {
  font-family: var(--font-sans);
  font-size: var(--fs-nav);
  line-height: var(--lh-nav);
  font-weight: var(--fw-nav);
}

.footer-link {
  font-family: var(--font-sans);
  font-size: var(--fs-footer);
  line-height: var(--lh-footer);
  font-weight: var(--fw-footer);
}

.form-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption-sm);
  line-height: var(--lh-caption-sm);
  font-weight: var(--fw-caption-sm);
}

.card {
  padding: var(--card-padding-y) var(--card-padding-x);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-md);
}

h4 {
  font-size: 18px;
  font-weight: 600;
}

h5 {
  font-size: 16px;
  font-weight: 400;
}

a {
  color: #5cd7fd ;
}

a:hover {
  color: #00c3ff;
}