:root {
  color-scheme: light;

  --ds-white: #FFFFFF;
  --ds-black: #000000;
  --ds-footer: #0F0F0F;
  --ds-footer-text: #F5F2EC;

  --ds-coral-light-2: #F5C8C1;
  --ds-coral-light-1: #F2B5AD;
  --ds-coral-core: #EFA398;
  --ds-coral-dark-1: #BF827A;
  --ds-coral-dark-2: #8F625B;
  --ds-coral-deep: #60413D;

  --ds-terracotta-light-2: #D49886;
  --ds-terracotta-light-1: #C6765E;
  --ds-terracotta-core: #B85436;
  --ds-terracotta-dark-1: #93432B;
  --ds-terracotta-dark-2: #6E3220;
  --ds-terracotta-deep: #4A2216;

  --ds-blue-light-2: #C6D5E9;
  --ds-blue-light-1: #B3C7E2;
  --ds-blue-core: #A0B9DB;
  --ds-blue-dark-1: #8094AF;
  --ds-blue-dark-2: #606F83;
  --ds-blue-deep: #404A58;

  --ds-lavender-core: #A1A2BE;

  --ds-olive-light-2: #B9B687;
  --ds-olive-light-1: #A29D5F;
  --ds-olive-core: #8B8537;
  --ds-olive-dark-1: #6F6A2C;
  --ds-olive-dark-2: #535021;
  --ds-olive-deep: #383516;

  --ds-cream-light-2: #F5EEE5;
  --ds-cream-light-1: #F1E8DC;
  --ds-cream-core: #EEE2D3;
  --ds-cream-dark-1: #BEB5A9;
  --ds-cream-dark-2: #8F887F;
  --ds-cream-deep: #5F5A54;

  --ds-berry-muted: #C99AA7;

  --ds-ochre-light-2: #ECC99A;
  --ds-ochre-light-1: #E5B778;
  --ds-ochre-core: #DFA556;
  --ds-ochre-dark-1: #B28445;
  --ds-ochre-dark-2: #866334;
  --ds-ochre-deep: #594222;

  --ds-error: #B71C1C;
  --ds-error-soft: #F5C8C1;
  --ds-success: #2E7D32;
  --ds-disabled-bg: #BFBFBF;
  --ds-disabled-fg: #8C8C8C;
  --ds-disabled-text-on-bg: #F4F4F4;
  --ds-input-disabled-bg: #8C8A7C;
  --ds-input-disabled-fg: #E8E6DC;

  --ds-olive-deep-alpha-88: rgba(56, 53, 22, 0.88);
  --ds-olive-deep-alpha-80: rgba(56, 53, 22, 0.8);
  --ds-olive-deep-alpha-60: rgba(56, 53, 22, 0.6);
  --ds-olive-deep-alpha-55: rgba(56, 53, 22, 0.55);
  --ds-olive-deep-alpha-35: rgba(56, 53, 22, 0.35);
  --ds-olive-deep-alpha-32: rgba(56, 53, 22, 0.32);
  --ds-olive-deep-alpha-30: rgba(56, 53, 22, 0.3);
  --ds-olive-deep-alpha-20: rgba(56, 53, 22, 0.2);
  --ds-olive-deep-alpha-05: rgba(56, 53, 22, 0.05);
  --ds-terracotta-dark-1-alpha-45: rgba(147, 67, 43, 0.45);
  --ds-terracotta-dark-1-alpha-0: rgba(147, 67, 43, 0);
  --ds-white-alpha-90: rgba(255, 255, 255, 0.9);
  --ds-white-alpha-70: rgba(255, 255, 255, 0.7);
  --ds-white-alpha-55: rgba(255, 255, 255, 0.55);
  --ds-white-alpha-50: rgba(255, 255, 255, 0.5);
  --ds-white-alpha-45: rgba(255, 255, 255, 0.45);
  --ds-white-alpha-14: rgba(255, 255, 255, 0.14);
  --ds-white-alpha-0: rgba(255, 255, 255, 0);

  --ds-font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --ds-font-workhorse: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ds-font-script: "Oooh Baby", "Segoe Script", "Bradley Hand", cursive;
  --ds-font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-bold: 700;

  --ds-text-2xs: 10px;
  --ds-text-xs: 12px;
  --ds-text-sticker-note: 12.5px;
  --ds-text-caption: 13px;
  --ds-text-sm: 14px;
  --ds-text-base: 16px;
  --ds-text-md: 18px;
  --ds-text-lg: 20px;
  --ds-text-xl: 24px;
  --ds-text-2xl: 28px;
  --ds-text-3xl: 32px;
  --ds-text-4xl: 36px;
  --ds-text-eyebrow: 15px;
  --ds-text-icon: 26px;
  --ds-text-script-sm: 22px;
  --ds-text-script-lg: 30px;

  --ds-text-hero-h1: clamp(42px, 11vw, 48px);
  --ds-text-h2: clamp(34px, 9vw, 38px);
  --ds-text-section-h2: clamp(34px, 3.4vw, 48px);
  --ds-text-subsection-h2: clamp(24px, 2.4vw, 34px);
  --ds-text-h3: clamp(26px, 7vw, 30px);
  --ds-text-quote: clamp(18px, 2vw, 28px);
  --ds-text-subtitle: clamp(18px, 1.6vw, 22px);
  --ds-text-lead: clamp(16px, 1.3vw, 18px);
  --ds-text-body-large: clamp(18px, 1.3vw, 21px);
  --ds-text-body: 16px;
  --ds-text-nav-ui: clamp(14px, 1.2vw, 16px);
  --ds-text-script-accent: clamp(22px, 3.5vw, 40px);
  --ds-text-script-note: clamp(26px, 2.4vw, 34px);
  --ds-text-card-title: clamp(22px, 2.2vw, 30px);
  --ds-text-step-title: clamp(24px, 2.2vw, 26px);
  --ds-text-feature-title: clamp(26px, 2.5vw, 32px);
  --ds-text-hero-sub: clamp(18px, 1.6vw, 22px);

  --ds-leading-none: 1;
  --ds-leading-hero-h1: 1.02;
  --ds-leading-heading: 1.08;
  --ds-leading-tight: 1.12;
  --ds-leading-quote: 1.25;
  --ds-leading-nav-ui: 1.2;
  --ds-leading-title: 1.1;
  --ds-leading-snug: 1.35;
  --ds-leading-body-large: 1.5;
  --ds-leading-body: 1.55;
  --ds-leading-relaxed: 1.6;
  --ds-leading-script-accent: normal;

  --ds-tracking-display: -0.025em;
  --ds-tracking-heading: -0.02em;
  --ds-tracking-tight: -0.01em;
  --ds-tracking-normal: 0;
  --ds-tracking-label: 0.02em;
  --ds-tracking-handle: 2.5px;
  --ds-tracking-wide: 0.12em;
  --ds-tracking-eyebrow: 0.16em;
  --ds-tracking-widest: 0.18em;

  --ds-space-half: 2px;
  --ds-space-1: 4px;
  --ds-space-1-5: 6px;
  --ds-space-2: 8px;
  --ds-space-2-5: 10px;
  --ds-space-3: 12px;
  --ds-space-3-5: 14px;
  --ds-space-4: 16px;
  --ds-space-4-5: 18px;
  --ds-space-5: 20px;
  --ds-space-5-5: 22px;
  --ds-space-6: 24px;
  --ds-space-6-5: 26px;
  --ds-space-7: 28px;
  --ds-space-8: 32px;
  --ds-space-12: 48px;
  --ds-space-14: 56px;
  --ds-space-18: 72px;
  --ds-space-16: 64px;
  --ds-space-24: 96px;
  --ds-space-32: 128px;
  --ds-gutter: clamp(24px, 6.7vw, 96px);
  --ds-section-y: clamp(64px, 7.8vw, 112px);
  --ds-content-width: 1248px;
  --ds-btn-height: 48px;

  --ds-radius-3xs: 4px;
  --ds-radius-badge: 6px;
  --ds-radius-2xs: 8px;
  --ds-radius-media: 10px;
  --ds-radius-xs: 12px;
  --ds-radius-icon: 14px;
  --ds-radius-sm: 16px;
  --ds-radius-md: 24px;
  --ds-radius-panel: 20px;
  --ds-radius-lg: 30px;
  --ds-radius-pill: 100px;
  --ds-radius-round: 50%;

  --ds-shadow-md: 0 12px 28px -10px rgba(56, 53, 22, 0.2);
  --ds-shadow-lg: 0 24px 48px -12px rgba(56, 53, 22, 0.18);
  --ds-shadow-pop: 0 22px 44px -14px var(--ds-olive-deep-alpha-32), 0 0 0 1px var(--ds-olive-deep-alpha-05);
  --ds-shadow-nav: 0 6px 20px -12px var(--ds-olive-deep-alpha-35);
  --ds-shadow-highlight: 0 0 0 4px var(--ds-white-alpha-55), 0 8px 18px -8px var(--ds-olive-deep-alpha-35);
  --ds-ring: 0 0 0 2px var(--ds-white), 0 0 0 4px var(--ds-olive-deep);
  --ds-ring-dark: 0 0 0 2px var(--ds-olive-deep), 0 0 0 4px var(--ds-white);

  --ds-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ds-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ds-ease-pop: cubic-bezier(0.34, 1.45, 0.64, 1);
  --ds-ease-exit: cubic-bezier(0.5, 0, 0.75, 0);
  --ds-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (min-width: 761px) {
  :root {
    --ds-btn-height: 55px;
  }
}

.ds-hero-h1,
.ds-h2,
.ds-h3,
.ds-quote {
  font-family: var(--ds-font-display);
  color: var(--ds-olive-deep);
  margin: 0;
  text-wrap: balance;
}

.ds-hero-h1 {
  font-size: var(--ds-text-hero-h1);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-hero-h1);
  letter-spacing: var(--ds-tracking-display);
}

.ds-h2 {
  font-size: var(--ds-text-h2);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-heading);
  letter-spacing: var(--ds-tracking-heading);
}

.ds-h3 {
  font-size: var(--ds-text-h3);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-tight);
}

.ds-quote {
  font-size: var(--ds-text-quote);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-quote);
  letter-spacing: var(--ds-tracking-tight);
}

.ds-subtitle,
.ds-body-large,
.ds-body,
.ds-body-sm,
.ds-caption,
.ds-eyebrow,
.ds-label {
  font-family: var(--ds-font-workhorse);
  margin: 0;
}

.ds-subtitle {
  font-size: var(--ds-text-subtitle);
  line-height: var(--ds-leading-body);
  color: var(--ds-cream-deep);
}

.ds-body-large {
  font-size: var(--ds-text-body-large);
  line-height: var(--ds-leading-body-large);
  color: var(--ds-blue-deep);
  max-width: 62ch;
}

.ds-body {
  font-size: var(--ds-text-body);
  line-height: var(--ds-leading-body);
  color: var(--ds-blue-deep);
}

.ds-body-sm {
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-body);
  color: var(--ds-cream-deep);
}

.ds-caption {
  font-size: var(--ds-text-xs);
  line-height: var(--ds-leading-body);
  color: var(--ds-cream-deep);
}

.ds-eyebrow {
  font-size: 15px;
  font-weight: var(--ds-weight-medium);
  letter-spacing: var(--ds-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ds-terracotta-dark-1);
}

.ds-label {
  font-size: 15px;
  font-weight: var(--ds-weight-medium);
  letter-spacing: var(--ds-tracking-label);
  text-transform: uppercase;
  color: var(--ds-olive-deep);
}

.ds-nav-ui,
.ds-button {
  font-family: var(--ds-font-workhorse);
  font-size: var(--ds-text-nav-ui);
  margin: 0;
}

.ds-nav-ui {
  font-weight: var(--ds-weight-medium);
  line-height: var(--ds-leading-nav-ui);
  color: var(--ds-olive-deep);
}

.ds-button {
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-none);
  color: var(--ds-terracotta-core);
}

.ds-script-accent {
  font-family: var(--ds-font-script);
  font-size: var(--ds-text-script-accent);
  font-weight: var(--ds-weight-regular);
  line-height: var(--ds-leading-script-accent);
  color: var(--ds-olive-core);
}

@media (min-width: 768px) {
  :root {
    --ds-text-hero-h1: clamp(64px, 5vw, 72px);
    --ds-text-h2: clamp(44px, 4vw, 52px);
    --ds-text-h3: clamp(30px, 2.6vw, 36px);
    --ds-text-body: clamp(16px, 1.1vw, 18px);
  }

  .ds-hero-h1 {
    line-height: var(--ds-leading-hero-h1);
  }
}

.ds-wrap {
  max-width: calc(var(--ds-content-width) + 2 * var(--ds-gutter));
  margin-inline: auto;
  padding-inline: var(--ds-gutter);
}

.ds-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

svg.i {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.ds-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  height: var(--ds-btn-height);
  padding-inline: 20px;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-lg);
  font-family: var(--ds-font-workhorse);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  line-height: 22px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.2s var(--ds-ease-out),
    color 0.2s,
    border-color 0.2s,
    transform 0.2s var(--ds-ease-out),
    box-shadow 0.2s var(--ds-ease-out);
}

.ds-btn--primary {
  background: var(--ds-terracotta-dark-1);
  color: var(--ds-white);
}

.ds-btn--primary:hover {
  background: var(--ds-terracotta-dark-2);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -8px rgba(110, 50, 32, 0.55);
}

.ds-btn--primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}

.ds-btn--outline {
  background: transparent;
  color: var(--ds-terracotta-dark-1);
  border-color: var(--ds-terracotta-dark-1);
}

.ds-btn--outline:hover {
  background: var(--ds-terracotta-dark-1);
  color: var(--ds-white);
  transform: translateY(-2px);
}

.ds-btn--outline:active {
  transform: scale(0.98);
}

.ds-btn:focus-visible {
  outline: none;
  box-shadow: var(--ds-ring);
}

.ds-btn--outline:focus-visible {
  background: var(--ds-white);
}

.ds-on-dark .ds-btn:focus-visible {
  box-shadow: var(--ds-ring-dark);
}

.ds-btn[disabled] {
  background: var(--ds-disabled-bg);
  color: var(--ds-disabled-text-on-bg);
  border-color: transparent;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ds-btn--block {
  width: 100%;
}

@media (min-width: 761px) {
  .ds-btn {
    padding-inline: 28px;
    font-size: var(--ds-text-base);
    line-height: 1;
  }

  .ds-btn--block {
    width: auto;
  }
}