:root {
  --container-padding: 15px;
  --grid-gap: 16px;


  --font-ui: 'Manrope', Arial, sans-serif;
  --font-main: 'Manrope', Arial, sans-serif;

  --font-display: 'Oswald', Arial, sans-serif;

  --font-accent: 'Cormorant Garamond', Georgia, serif;
  --font-accent-style: italic;


  --color-bg-main: #FCF7F1;
  --color-bg-card: #F3F1E3;
  --color-bg-soft: #F3F1E3;

  --color-accent: #929D6B;
  --color-accent-dark: #41502F;
  --color-accent-light: #BCC290;
  --color-accent-soft: rgba(146, 157, 107, 0.12);

  --color-text: #30352B;

  --color-text-soft: rgba(48, 53, 43, 0.72);
  --color-text-muted: rgba(48, 53, 43, 0.52);

  --color-white: #F3F1E3;
  --color-black: #30352B;

  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-soft);
  --text-muted: var(--color-text-muted);

  --text-heading: #41502F;

  --text-inverse: #F3F1E3;
  --text-inverse-soft: rgba(243, 241, 227, 0.84);

  --color-border: rgba(146, 157, 107, 0.30);
  --color-border-strong: rgba(146, 157, 107, 0.55);
  --color-overlay: rgba(20, 26, 14, 0.42);

  --badge-bg: rgba(243, 241, 227, 0.18);
  --badge-border: rgba(243, 241, 227, 0.28);
  --badge-text: rgba(243, 241, 227, 0.88);
  --badge-accent: var(--color-accent);

  --card-bg: #F3F1E3;
  --card-bg-soft: #FCF7F1;
  --card-border: rgba(146, 157, 107, 0.30);

  --card-shadow:
    0 18px 46px rgba(65, 80, 47, 0.06);

  --header-text: rgba(243, 241, 227, 0.92);
  --header-text-hover: #F3F1E3;

  --header-light-bg: rgba(252, 247, 241, 0.94);
  --header-light-text: var(--color-text);
  --header-light-hover: var(--color-accent);

  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 30px;
  --radius-xl: 38px;
  --radius-pill: 999px;

  --img-radius: var(--radius-lg);

  --transition-fast: 0.2s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.35s ease;
}

@media (min-width: 480px) {
  :root {
    --container-padding: 30px;
    --grid-gap: 20px;
  }
}

@media (min-width: 640px) {
  :root {
    --container-padding: 30px;
    --grid-gap: 24px;
  }
}

@media (min-width: 960px) {
  :root {
    --container-padding: 30px;
    --grid-gap: 24px;
  }
}

@media
  (min-width: 1200px)
  and (max-width: 1439px) {

  :root {
    --container-padding: 60px;
    --grid-gap: 30px;
  }
}

@media
  (min-width: 1440px)
  and (max-width: 1919px) {

  :root {
    --container-padding: 60px;
    --grid-gap: 30px;
  }
}

@media
  (min-width: 1920px)
  and (max-width: 2559px) {

  :root {
    --container-padding: 90px;
    --grid-gap: 36px;
  }
}

@media (min-width: 2560px) {
  :root {
    --container-padding: 120px;
    --grid-gap: 40px;
  }
}


.il-section-grid {
  width: 100%;

  padding-left: var(--container-padding);
  padding-right: var(--container-padding);

  display: grid;
  grid-template-columns:
    repeat(12, minmax(0, 1fr));

  column-gap: var(--grid-gap);

  box-sizing: border-box;
}

.il-section-grid *,
.il-section-grid *::before,
.il-section-grid *::after {
  box-sizing: border-box;
}


body {
  font-family: var(--font-main);
  color: var(--text-primary);
  background: var(--color-bg-main);
}

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

img {
  max-width: 100%;
}

.il-img,
.il-photo,
.il-media img,
[class*="il-"][class*="__img"],
[class*="il-"][class*="__photo"],
[class*="il-"][class*="__media"] img {
  border-radius: var(--img-radius);
}


.ty-eyebrow {
  font-family: var(--font-main);

  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: var(--text-secondary);
}

.ty-hero-title {
  font-family: var(--font-accent);

  line-height: 0.9;
  font-weight: 500;
  letter-spacing: -0.045em;

  color: var(--text-heading);
}

.ty-section-title {
  font-family: var(--font-accent);

  line-height: 0.98;
  font-weight: 500;
  letter-spacing: -0.035em;

  color: var(--text-heading);
}

.ty-lead {
  font-family: var(--font-main);

  line-height: 1.42;
  font-weight: 400;

  color: var(--text-secondary);
}

.ty-body {
  font-family: var(--font-main);

  line-height: 1.62;
  font-weight: 400;

  color: var(--text-primary);
}

.ty-card-text {
  font-family: var(--font-main);

  line-height: 1.45;
  font-weight: 400;

  color: var(--text-secondary);
}

.ty-stat {
  font-family: var(--font-accent);

  line-height: 0.9;
  font-weight: 500;
  letter-spacing: -0.05em;

  color: var(--text-heading);
}

</style>