@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=Inter:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@300;400;500&display=swap');

:root {
  --clr-primary: #3F6A5A;
  --clr-secondary: #93AA94;
  --clr-accent: #BC9A5B;
  --clr-accent-2: #6E5B4E;
  --clr-bg: #F3F6F2;
  --clr-bg-alt: #E7ECE7;
  --clr-bg-dark: #5A6B62;
  --clr-text: #262F2C;
  --clr-text-muted: rgba(38, 47, 44, 0.55);
  --clr-text-light: rgba(38, 47, 44, 0.32);
  --clr-white: #ffffff;
  --clr-border: rgba(63, 106, 90, 0.12);
  --clr-border-warm: rgba(188, 154, 91, 0.22);
  --clr-overlay: rgba(63, 106, 90, 0.30);
  --clr-dark-overlay: rgba(38, 47, 44, 0.52);

  --grad-btn: linear-gradient(135deg, #BC9A5B 0%, #D4B57C 100%);
  --grad-bg: linear-gradient(180deg, #F3F6F2 0%, #E7ECE7 100%);
  --grad-nature: linear-gradient(135deg, #3F6A5A 0%, #55776A 100%);
  --grad-hero: linear-gradient(160deg, rgba(38,47,44,0.72) 0%, rgba(63,106,90,0.48) 60%, rgba(217,227,220,0.12) 100%);

  --ff-hero: 'Cormorant Garant', Georgia, 'Times New Roman', serif;
  --ff-head: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --ff-body: 'Inter', system-ui, -apple-system, sans-serif;
  --ff-ui: 'Manrope', system-ui, sans-serif;
  --ff-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --lh: 1.55;
  --ls: -0.022em;
  --ls-tight: -0.032em;
  --ls-wide: 0.08em;
  --ls-wider: 0.14em;

  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 80px;
  --sp-8: 96px;
  --sp-9: 128px;
  --sp-10: 160px;

  --cnt: 1280px;
  --cnt-n: 960px;
  --cnt-t: 720px;
  --gutter: clamp(20px, 4vw, 48px);

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 48px;

  --sh-xs: 0 1px 4px rgba(38, 47, 44, 0.05);
  --sh-sm: 0 2px 14px rgba(38, 47, 44, 0.07);
  --sh-md: 0 8px 36px rgba(38, 47, 44, 0.10);
  --sh-lg: 0 20px 64px rgba(38, 47, 44, 0.13);
  --sh-xl: 0 40px 88px rgba(38, 47, 44, 0.16);

  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.18s;
  --dur: 0.38s;
  --dur-slow: 0.68s;
  --dur-xl: 1.0s;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: var(--lh);
  color: var(--clr-text);
  background-color: var(--clr-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
  max-width: 100vw;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

ul, ol {
  list-style: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: var(--ls);
  line-height: 1.18;
}