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

:root {
  --c-emerald: #45695A;
  --c-sage: #9AAE9A;
  --c-gold: #B99657;
  --c-stone: #7C7065;
  --c-mist: #F5F4EE;
  --c-ink: #29302D;
  --c-ink-80: rgba(41,48,45,0.8);
  --c-ink-60: rgba(41,48,45,0.6);
  --c-ink-40: rgba(41,48,45,0.4);
  --c-ink-20: rgba(41,48,45,0.12);
  --c-overlay: rgba(69,105,90,0.28);
  --c-bg: #F5F4EE;
  --c-bg-alt: #ECE9E0;
  --c-surface: #EFEDE6;
  --c-surface-2: #E8E4D9;
  --c-border: rgba(41,48,45,0.08);
  --c-border-md: rgba(41,48,45,0.14);
  --ff-display: 'Cormorant Garamond', Georgia, serif;
  --ff-sub: 'Cabinet Grotesk', system-ui, sans-serif;
  --ff-body: 'DM Sans', system-ui, sans-serif;
  --ff-ui: 'Satoshi', system-ui, sans-serif;
  --ff-mono: 'IBM Plex Mono', monospace;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --container: 1280px;
  --container-sm: 960px;
  --gutter: clamp(20px, 5vw, 60px);
  --radius: 8px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 9999px;
  --shadow-xs: 0 2px 8px rgba(41,48,45,0.05);
  --shadow-sm: 0 4px 16px rgba(41,48,45,0.07);
  --shadow: 0 8px 32px rgba(41,48,45,0.1);
  --shadow-lg: 0 24px 64px rgba(41,48,45,0.14);
  --shadow-xl: 0 48px 96px rgba(41,48,45,0.18);
  --ease: cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-out: cubic-bezier(0,0.55,0.45,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --dur-fast: 0.18s;
  --dur: 0.38s;
  --dur-slow: 0.65s;
  --dur-slower: 1.0s;
}

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

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

body {
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: clamp(15px,1.4vw,17px);
  line-height: 1.72;
  color: var(--c-ink);
  background: var(--c-bg);
  position: relative;
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

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

ul,ol { list-style: none; }

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

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--sm { max-width: var(--container-sm); }

h1 {
  font-family: var(--ff-display);
  font-weight: var(--fw-light);
  font-size: clamp(52px,8vw,108px);
  line-height: 0.93;
  letter-spacing: -0.025em;
}

h2 {
  font-family: var(--ff-display);
  font-weight: var(--fw-light);
  font-size: clamp(38px,5.5vw,76px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

h3 {
  font-family: var(--ff-display);
  font-weight: var(--fw-regular);
  font-size: clamp(26px,3.2vw,44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

h4 {
  font-family: var(--ff-sub);
  font-weight: var(--fw-medium);
  font-size: clamp(17px,1.9vw,22px);
  line-height: 1.3;
}

.eyebrow {
  font-family: var(--ff-mono);
  font-size: clamp(9px,0.85vw,11px);
  font-weight: var(--fw-regular);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

.eyebrow--light { color: rgba(185,150,87,0.8); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ff-ui);
  font-size: 11.5px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 15px 36px;
  border-radius: var(--radius-full);
  transition: all var(--dur) var(--ease);
  cursor: pointer;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.btn--primary {
  background: linear-gradient(135deg, var(--c-gold) 0%, #D3B77D 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(185,150,87,0.28);
}

.btn--primary:hover {
  box-shadow: 0 10px 36px rgba(185,150,87,0.45);
  transform: translateY(-2px);
}

.btn--emerald {
  background: var(--c-emerald);
  color: var(--c-mist);
}

.btn--emerald:hover {
  background: #3b5c4e;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.btn--outline {
  border: 1.5px solid var(--c-emerald);
  color: var(--c-emerald);
  background: transparent;
}

.btn--outline:hover {
  background: var(--c-emerald);
  color: var(--c-mist);
}

.btn--outline-light {
  border: 1.5px solid rgba(245,244,238,0.45);
  color: var(--c-mist);
  background: transparent;
}

.btn--outline-light:hover {
  background: rgba(245,244,238,0.12);
}

.btn svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur) var(--ease);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn:hover svg { transform: translateX(3px); }

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }
.reveal-d5 { transition-delay: 0.40s; }
.reveal-d6 { transition-delay: 0.50s; }

.fade {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}

.fade.is-visible { opacity: 1; }

.text-gold { color: var(--c-gold); }
.text-emerald { color: var(--c-emerald); }
.text-sage { color: var(--c-sage); }
.text-muted { color: var(--c-ink-60); }
.text-mist { color: var(--c-mist); }
.italic { font-style: italic; }

.section-py { padding-block: clamp(80px,10vw,160px); }
.section-py-sm { padding-block: clamp(60px,7vw,120px); }
.section-py-xs { padding-block: clamp(40px,5vw,80px); }

.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;
}