@font-face {
  font-display: swap;
  font-family: "Marcellus";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/marcellus-regular.ttf") format("truetype");
}

:root {
  --color-bg: #f5f3eb;
  --color-bg-warm: #f9f7ee;
  --color-bg-muted: #f3f0e5;
  --color-surface: #fffdf6;
  --color-text: #000;
  --color-text-muted: rgba(0, 0, 0, 0.60);
  --color-text-soft: #222;
  --color-accent: #ddc7a1;
  --color-border: rgba(0, 0, 0, 0.18);
  --color-border-strong: rgba(0, 0, 0, 0.82);
  --color-white: #fff;
  --color-overlay: rgba(0, 0, 0, 0.52);
  --radius-small: 8px;
  --radius-card: 10px;
  --radius-pill: 50px;
  --container: 1420px;
  --container-narrow: 920px;
  --container-wide: 2204px;
  --page-gutter: clamp(24px, 2.5vw, 64px);
  /* Mobile layouts are authored against the 375px Figma canvas (1125px @3x).
     Let gutters and section rhythm grow only modestly through 440px. */
  --page-gutter-mobile: clamp(20px, 5.333vw, 24px);
  --page-pad-x: var(--page-gutter);
  --section-pad-y: 88px;
  --section-pad-y-mobile: clamp(56px, 14.933vw, 64px);
  --layout-gap: clamp(28px, 3vw, 48px);
  --grid-gap: clamp(16px, 2vw, 32px);
  --card-pad: clamp(22px, 2.5vw, 48px);
  --mobile-content-max: 520px;
  --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-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --type-hero-title: 42px;
  --type-hero-copy: 22px;
  --type-section-title: 32px;
  --type-section-copy: 18px;
  --type-card-title: 22px;
  --type-card-copy: var(--type-card-title);
  --type-body: 18px;
  --type-body-small: 16px;
  --type-caption: 14px;
  --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.08);
  --font-sans: Satoshi, Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: Manrope, Satoshi, Inter, ui-sans-serif, system-ui, sans-serif;
  --font-display: "Marcellus", Georgia, serif;
}

@media (min-width: 1024px) {
  :root {
    --container: 1065px;
    --container-narrow: 690px;
    --container-wide: 1653px;
    --page-gutter: clamp(18px, 1.9vw, 48px);
    --section-pad-y: 66px;
    --layout-gap: clamp(21px, 2.25vw, 36px);
    --grid-gap: clamp(12px, 1.5vw, 24px);
    --card-pad: clamp(16px, 1.9vw, 36px);
    --space-8: 24px;
    --space-10: 30px;
    --space-12: 36px;
    --space-14: 42px;
    --space-16: 48px;
    --space-20: 60px;
    --space-24: 72px;
    --type-hero-title: 58px;
    --type-hero-copy: 30px;
    --type-section-title: 32px;
    --type-section-copy: 14px;
    --type-card-title: 20px;
    --type-body: 14px;
    --type-body-small: 12px;
    --type-caption: 12px;
  }
}

@media (max-width: 1023px) {
  :root {
    --page-pad-x: 20px;
    --layout-gap: 40px;
    --grid-gap: 28px;
    --card-pad: 32px;
  }
}

@media (max-width: 767px) {
  :root {
    --page-pad-x: var(--page-gutter-mobile);
    --section-pad-y: var(--section-pad-y-mobile);
    --layout-gap: 28px;
    --grid-gap: 24px;
    --card-pad: 22px;
    --type-hero-title: 30px;
    --type-hero-copy: 18px;
    --type-section-title: 24px;
    --type-section-copy: 14px;
    --type-card-title: 20px;
    --type-card-copy: 14px;
  }
}

@media (min-width: 1920px) {
  :root {
    --type-hero-title: 78px;
    --type-hero-copy: 42px;
  }
}