@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap");

:root {
  --accent: 232, 119, 42;
  --accent-strong: #e8772a;
  --accent-soft: #fff2e6;
  --ink: #201e1d;
  --muted: #777272;
  --canvas: #f3f2f2;
  --surface: #ffffff;
  --line: #9b9797;
  --line-soft: #c8c5c5;
  --danger: #d64545;
  --warning: #d9a441;
  --success: #4ea96b;
  --font: "Archivo", Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-ui: 600;
  --font-weight-heading: 700;
  --font-tracking: 0;
  --font-heading-tracking: 0;
}

:root {
  color-scheme: light;
  --color-accent: var(--accent-strong);
  --color-accent-700: var(--accent-strong);
  --color-accent-400: var(--accent-soft);
  --color-accent-900: var(--ink);
  --color-bg: var(--canvas);
  --color-surface: var(--surface);
  --color-text: var(--ink);
  --color-divider: var(--line-soft);
  --color-neutral-300: var(--line-soft);
  --color-neutral-500: var(--muted);
  --color-neutral-600: var(--muted);
  --color-neutral-900: var(--ink);
  --font-body: var(--font);
  --font-heading: var(--font);
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
}
body {
  margin: 0;
}
a {
  color: var(--color-accent-700);
  text-decoration: none;
}
a:hover {
  color: var(--color-accent);
}
#cw-hero-h1 {
  font-size: clamp(38px, 5vw, 68px);
}
#cw-close-h2 {
  font-size: clamp(30px, 4.6vw, 58px);
}
.cw-sec {
  padding: clamp(48px, 7vw, 104px) clamp(20px, 5vw, 56px);
}
.cw-wrap {
  max-width: 1180px;
  margin: 0 auto;
}
.cw-g2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 3vw, 48px);
}
.cw-g3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.cw-g4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0;
  margin-inline: calc(-1 * var(--space-4));
}