:root {
  /* https://utopia.fyi/type/calculator/?c=320,18,1.2,1920,30,1.2,10,3,1720&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=3xs,m,xl,12 */

  /*  typescale */
  /* Step -2: 14.05px → 12.80px */
  --step--2: clamp(0.8rem, 0.8938rem + -0.0781vw, 0.8781rem);

  /* Step -1: 15.00px → 16.00px */
  --step--1: clamp(0.9375rem, 0.925rem + 0.0625vw, 1rem);

  /* Step 0: 16.00px → 20.00px */
  --step-0:  clamp(1.1rem, 0.95rem + 0.25vw, 1.25rem);

  /* Step 1: 17.07px → 25.00px */
  --step-1: clamp(1.1rem, 0.9678rem + 0.4956vw, 1.5625rem);

  /* Step 2: 18.22px → 31.25px */
  --step-2: clamp(1.77rem, 0.9759rem + 0.8144vw, 1.9531rem);

  /* Step 3: 19.44px → 39.06px */
  --step-3: clamp(1.99rem, 0.9698rem + 1.2263vw, 2.4413rem);

  /* Step 4: 20.74px → 48.83px */
  --step-4: clamp(2.24rem, 0.9451rem + 1.7556vw, 3.0519rem);

  /* Step 5: 22.13px → 61.04px */
  --step-5: clamp(2.5rem, 0.8968rem + 2.4319vw, 3.815rem);

  /* Step 6: 23.61px → 76.29px */
  --step-6: clamp(2.84rem, 0.8171rem + 3.2925vw, 4.7681rem);

  /* Step 7: 25.19px → 95.37px */
  --step-7: clamp(3.19rem, 0.6971rem + 4.3863vw, 5.9606rem);

  /* Step 8: 26.88px → 119.21px */
  --step-8: clamp(3.59rem, 0.5259rem + 5.7706vw, 7.4506rem);

  /* Step 9: 28.68px → 149.01px */
  --step-9: clamp(4.04rem, 0.2884rem + 7.5206vw, 9.3131rem);

  /* Step 10: 30.60px → 186.26px */
  --step-10: clamp(4.55rem, -0.0332rem + 9.7288vw, 11.6413rem);


  /* Firekit Type System */
/*  !* generate the clamp values with utopia *!
  --headline-1:;
  --headline-2:;
  --headline-3:;
  --headline-4:;
  --headline-5:;
  --headline-6:;
  --super-small-text:;
  --small-text:;
  --regular-text:;
  --large-text:;
  --super-large-text:;*/

  /* sizing */
  --space-3xs: clamp(0.31rem, calc(0.28rem + 0.19vw), 0.50rem);
  --space-2xs: clamp(0.56rem, calc(0.49rem + 0.38vw), 0.94rem);
  --space-xs: clamp(0.88rem, calc(0.76rem + 0.56vw), 1.44rem);
  --space-s: clamp(1.13rem, calc(0.98rem + 0.75vw), 1.88rem);
  --space-m: clamp(1.69rem, calc(1.46rem + 1.13vw), 2.81rem);
  --space-l: clamp(2.25rem, calc(1.95rem + 1.50vw), 3.75rem);
  --space-xl: clamp(3.38rem, calc(2.93rem + 2.25vw), 5.63rem);
  --space-2xl: clamp(4.50rem, calc(3.90rem + 3.00vw), 7.50rem);
  --space-3xl: clamp(6.75rem, calc(5.85rem + 4.50vw), 11.25rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.31rem, calc(0.19rem + 0.63vw), 0.94rem);
  --space-2xs-xs: clamp(0.56rem, calc(0.39rem + 0.88vw), 1.44rem);
  --space-xs-s: clamp(0.88rem, calc(0.68rem + 1.00vw), 1.88rem);
  --space-s-m: clamp(1.13rem, calc(0.79rem + 1.69vw), 2.81rem);
  --space-m-l: clamp(1.69rem, calc(1.28rem + 2.06vw), 3.75rem);
  --space-l-xl: clamp(2.25rem, calc(1.58rem + 3.38vw), 5.63rem);
  --space-xl-2xl: clamp(3.38rem, calc(2.55rem + 4.13vw), 7.50rem);
  --space-2xl-3xl: clamp(4.50rem, calc(3.15rem + 6.75vw), 11.25rem);

  /* Custom pairs */
  --space-s-l: clamp(1.13rem, calc(0.60rem + 2.63vw), 3.75rem);

  /* custom spacing */
  --header-height: 70px;
  --section-spacing: min(15vw, 6rem);
  --block-spacing: var(--step-1);
  --colored-row-spacing: 3rem;
  --first-section-top-padding: 200px;
  --logo-width: 250px;
  --logo-height: 175px;
  --mobile-logo-width: 250px;
  --mobile-logo-height: 175px;
  /* visualize grid (uses javascript bookmarklet) --> grid.css */
  --offset: 20px;
  --max_width: 2160px;
  --columns: 24;
  --gutter: 2rem;
  --grid-color: hsla(14, 80%, 72%, 0.25);
  --repeating-width: calc(100% / var(--columns));

  --column-width: calc((100% / var(--columns)) - var(--gutter));

  --background-width: calc(100% + var(--gutter));

  --background-columns: repeating-linear-gradient(
    to right,
    var(--grid-color),
    var(--grid-color) var(--column-width),
    transparent var(--column-width),
    transparent var(--repeating-width)
  );


  --cc-font-family: "Circular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --cc-font-size: 1.2rem;
  --cc-bg: #c46c66;
  --cc-z-index: 2147483647;
  --cc-text: #000000;
  --cc-border-radius: 30px;
  --cc-btn-primary-bg: #000000;
  --cc-btn-primary-text: var(--cc-bg);
  --cc-btn-primary-hover-bg: #000000;
  --cc-btn-primary-hover-text: var(--cc-btn-primary-text);
  --cc-btn-secondary-bg: #c46c66;
  --cc-btn-secondary-text: var(--cc-text);
  --cc-btn-secondary-hover-bg: #c46c66;
  --cc-btn-secondary-hover-text: var(--cc-btn-secondary-text);
  --cc-btn-border-radius: 30px;
  --cc-separator-border-color: transparent;
  --cc-btn-secondary-hover-border-color: transparent;

  --cc-toggle-bg-off: transparent;
  --cc-toggle-bg-on: var(--cc-btn-primary-bg);
  --cc-toggle-bg-readonly: transparent;
  --cc-toggle-knob-bg: #fff;
  --cc-toggle-knob-icon-color: #ecf2fa;
  --cc-block-text: var(--cc-text);
  --cc-cookie-category-block-bg: #FFFFFF;
  --cc-cookie-category-block-bg-hover: transparent;
  --cc-section-border: #c46c66;
  --cc-cookie-table-border: transparent;
  --cc-overlay-bg: rgb(0, 0, 0, 0.6);
  --cc-overlay-opacity: .85;
  --cc-consent-modal-box-shadow: 0 0.625rem 1.875rem rgba(2, 2, 3, 0.28);
  --cc-webkit-scrollbar-bg: #cfd5db;
  --cc-webkit-scrollbar-bg-hover: #9199a0;

  --cc-cookie-category-expanded-block-hover-bg: white;
  --cc-cookie-category-expanded-block-bg: white;
  --cc-secondary-color: black;
}