@import url('https://api.fontshare.com/v2/css?f[]=satoshi@900,700,500,400&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@800,700,500,400&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=neue-montreal@700,500,400,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --c-primary: #4D6B5B;
  --c-secondary: #8EA591;
  --c-accent: #B99758;
  --c-accent-2: #8A7866;
  --c-bg: #F4F6F2;
  --c-bg-alt: #E8ECE6;
  --c-bg-contrast: #5E6B63;
  --c-text: #29302D;
  --c-text-muted: rgba(41, 48, 45, 0.58);
  --c-text-faint: rgba(41, 48, 45, 0.35);
  --c-white: #FFFFFF;
  --c-border: rgba(41, 48, 45, 0.10);
  --c-border-light: rgba(41, 48, 45, 0.055);
  --c-border-accent: rgba(185, 151, 88, 0.30);

  --grad-hero: linear-gradient(135deg, #4D6B5B 0%, #8EA591 60%, #DCE3DD 100%);
  --grad-btn: linear-gradient(135deg, #B99758 0%, #D1B680 100%);
  --grad-bg: linear-gradient(180deg, #F4F6F2 0%, #E8ECE6 100%);
  --grad-natural: linear-gradient(135deg, #4D6B5B 0%, #72897A 100%);
  --grad-dark: linear-gradient(160deg, #29302D 0%, #3A4A41 100%);
  --overlay: rgba(77, 107, 91, 0.28);
  --overlay-dark: rgba(29, 38, 33, 0.62);
  --overlay-hero: linear-gradient(to bottom, rgba(29, 38, 33, 0.38) 0%, rgba(29, 38, 33, 0.58) 100%);

  --ff-display: 'Cormorant', Georgia, 'Times New Roman', serif;
  --ff-heading: 'Cabinet Grotesk', 'Satoshi', system-ui, sans-serif;
  --ff-body: 'Neue Montreal', 'Satoshi', system-ui, sans-serif;
  --ff-ui: 'Satoshi', system-ui, sans-serif;
  --ff-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --fs-hero: clamp(52px, 7.5vw, 112px);
  --fs-hero-sub: clamp(36px, 4.5vw, 72px);
  --fs-h1: clamp(38px, 5vw, 72px);
  --fs-h2: clamp(26px, 3.2vw, 50px);
  --fs-h3: clamp(20px, 2.2vw, 32px);
  --fs-h4: clamp(16px, 1.6vw, 22px);
  --fs-h5: clamp(14px, 1.3vw, 18px);
  --fs-body-lg: clamp(16px, 1.3vw, 19px);
  --fs-body: clamp(14px, 1.1vw, 16px);
  --fs-body-sm: clamp(13px, 0.95vw, 15px);
  --fs-label: 11px;
  --fs-mono: 13px;
  --fs-marquee: clamp(20px, 3vw, 38px);

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.6;
  --lh-relaxed: 1.78;
  --lh-loose: 2.0;

  --ls-tightest: -0.04em;
  --ls-tight: -0.02em;
  --ls-normal: -0.01em;
  --ls-relaxed: 0.02em;
  --ls-wide: 0.08em;
  --ls-wider: 0.14em;
  --ls-widest: 0.22em;

  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-xl: 40px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 3px rgba(41, 48, 45, 0.05), 0 1px 6px rgba(41, 48, 45, 0.04);
  --shadow-sm: 0 2px 10px rgba(41, 48, 45, 0.07), 0 4px 20px rgba(41, 48, 45, 0.05);
  --shadow-md: 0 6px 24px rgba(41, 48, 45, 0.10), 0 12px 40px rgba(41, 48, 45, 0.06);
  --shadow-lg: 0 16px 52px rgba(41, 48, 45, 0.13), 0 32px 80px rgba(41, 48, 45, 0.08);
  --shadow-xl: 0 32px 88px rgba(41, 48, 45, 0.16), 0 60px 120px rgba(41, 48, 45, 0.10);
  --shadow-accent: 0 8px 32px rgba(185, 151, 88, 0.28);
  --shadow-primary: 0 8px 32px rgba(77, 107, 91, 0.25);

  --container: 1280px;
  --container-wide: 1440px;
  --container-narrow: 860px;
  --container-text: 660px;
  --gutter: clamp(20px, 5vw, 80px);
  --gutter-sm: clamp(16px, 3vw, 40px);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;
  --space-40: 160px;

  --ease-default: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-expo: cubic-bezier(0.87, 0, 0.13, 1);

  --dur-fast: 0.22s;
  --dur: 0.55s;
  --dur-slow: 0.9s;
  --dur-slower: 1.4s;

  --header-h: 80px;
  --header-h-scroll: 64px;
}

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

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

body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--c-text);
  background-color: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width: 100vw;
  position: relative;
}

body.menu-open {
  overflow: hidden;
}

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

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

ul, ol {
  list-style: none;
}

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

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

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.display-font {
  font-family: var(--ff-display);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-tightest);
}

.heading-font {
  font-family: var(--ff-heading);
  font-weight: var(--fw-bold);
}

.body-font {
  font-family: var(--ff-body);
}

.ui-font {
  font-family: var(--ff-ui);
}

.mono-font {
  font-family: var(--ff-mono);
}

.label {
  font-family: var(--ff-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.label-accent {
  font-family: var(--ff-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-accent);
}

.text-primary { color: var(--c-primary); }
.text-accent { color: var(--c-accent); }
.text-muted { color: var(--c-text-muted); }
.text-white { color: var(--c-white); }

.bg-primary { background-color: var(--c-primary); }
.bg-accent { background-color: var(--c-accent); }
.bg-mist { background: var(--grad-bg); }
.bg-dark { background-color: var(--c-text); }
.bg-contrast { background-color: var(--c-bg-contrast); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}