/* Primitives */
:root {
  /* Mode 1 */
  /* color */
  --color-base-black: #1a1c1a;
  --color-base-white: #f5f0ea;
  --color-beige-100: #fffef4;
  --color-beige-200: #fffded;
  --color-beige-300: #fffde4;
  --color-beige-400: #fffcdc;
  --color-beige-50: #fffffd;
  --color-beige-500: #fffbd4;
  --color-beige-600: #ccc9aa;
  --color-beige-700: #99977f;
  --color-beige-800: #666455;
  --color-beige-900: #33322a;
  --color-blue-100: #d5dde3;
  --color-blue-200: #b7c4cf;
  --color-blue-300: #97a9ba;
  --color-blue-400: #778fa5;
  --color-blue-50: #f7f8f9;
  --color-blue-500: #577590;
  --color-blue-600: #465e73;
  --color-blue-700: #344656;
  --color-blue-800: #232f3a;
  --color-blue-900: #11171d;
  --color-green-100: #bfcfcb;
  --color-green-200: #91ada6;
  --color-green-300: #61897f;
  --color-green-400: #306457;
  --color-green-50: #f2f5f5;
  --color-green-500: #004030;
  --color-green-600: #003326;
  --color-green-700: #00261d;
  --color-green-800: #001a13;
  --color-green-900: #000d0a;
  --color-orange-100: #f2cfc2;
  --color-orange-200: #e9ac97;
  --color-orange-300: #df8868;
  --color-orange-400: #d6633a;
  --color-orange-50: #fcf5f3;
  --color-orange-500: #cc3f0c;
  --color-orange-600: #a3320a;
  --color-orange-700: #7a2607;
  --color-orange-800: #521905;
  --color-orange-900: #290d02;
  /* number */
  --spacing-0-(0px): 0rem;
  --spacing-0,5-(4px): 0.25rem;
  --spacing-1-(8px): 0.5rem;
  --spacing-1,5-(12px): 0.75rem;
  --spacing-2-(16px): 1rem;
  --spacing-3-(24px): 1.5rem;
  --spacing-4-(32px): 2rem;
  --spacing-5-(40px): 2.5rem;
  --spacing-6-(48px): 3rem;
  --spacing-8-(64px): 4rem;
  --spacing-10-(80px): 5rem;
  --spacing-12-(96px): 6rem;
  --spacing-16-(128px): 8rem;
  --spacing-20-(160px): 10rem;
  --spacing-24-(192px): 12rem;
  --spacing-32-(256px): 16rem;
  --spacing-40-(320px): 20rem;
  --spacing-48-(384px): 24rem;
  --spacing-56-(448px): 28rem;
  --spacing-64-(512px): 32rem;
  --spacing-80-(640px): 40rem;
  --spacing-96-(768px): 48rem;
  --spacing-120-(960px): 60rem;
  --spacing-140-(1120px): 70rem;
  --spacing-160-(1280px): 80rem;
  --spacing-180-(1440px): 90rem;
  --spacing-192-(1536px): 96rem;
  --spacing-256-(2048px): 128rem;
  --spacing-320-(2560px): 160rem;
  --spacing-360-(2880px): 180rem;
  --spacing-400-(3200px): 200rem;
  --spacing-480-(3840px): 240rem;
  --type-letterspacing-7: -0.0938rem;
  --type-letterspacing-6: -0.0625rem;
  --type-letterspacing-5: -0.0375rem;
  --type-letterspacing-2: -0.0156rem;
  --type-letterspacing-4: -0.0156rem;
  --type-letterspacing-1: 0.0125rem;
  --type-letterspacing-3: 0.0156rem;
  --type-letterspacing-0: 0.025rem;
  --type-lineheight-3: 1.0562rem;
  --type-lineheight-0: 4.1937rem;
  --type-lineheight-1-subtitle: 1.875rem;
  --type-lineheight-1-chead: 2.325rem;
  --type-lineheight-1-bhead: 2.925rem;
  --type-lineheight-1-ahead: 3.675rem;
  --type-lineheight-2-default: 1.3rem;
  --type-lineheight-2-large: 1.625rem;
  --type-lineheight-collapse-body: var(--type-scale-1);
  --type-lineheight-collapse-display: 1em;
  --type-scale-0: 0.8125rem;
  --type-scale-1: 1rem;
  --type-scale-2: 1.25rem;
  --type-scale-3: 1.5625rem;
  --type-scale-4: 1.9375rem;
  --type-scale-5: 2.4375rem;
  --type-scale-6: 3.0625rem;
  --type-scale-7: 3.8125rem;
  --type-spacing-025-chead: 0.5813rem;
  --type-spacing-025-bhead: 0.7281rem;
  --type-spacing-025-ahead: 0.9187rem;
  --type-spacing-050-display: 2.0969rem;
  --type-spacing-100-caption: 1.0562rem;
  --type-spacing-100-default: 1.3rem;
  --type-spacing-100-large: 1.625rem;
  --type-spacing-100-subtitle: 1.875rem;
  --type-weight-default: 400;
  --type-weight-bold: 700;
  /* string */
  --type-font-sanserif: peridot-pe-variable, sans-serif;
  --type-font-serif: warbler-deck, sans-serif;
  --type-font-weathered: nexa-rust-sans-black-2, sans-serif;
  --type-style-italic: italic;
  --type-style-normal: normal;
}
/* Semantic */
:root {
  /* Mode 1 */
  /* color */
  --type-body-default-color: var(--color-text-default);
  --type-body-large-color: var(--type-body-default-color);
  --type-body-xl-color: var(--type-body-default-color);
  --type-caption-color: var(--color-text-subtle);
  --type-display-color: var(--color-accent-default-default-default);
  --type-heading-ahead-color: var(--type-heading-inherit-color);
  --type-heading-bhead-color: var(--type-heading-inherit-color);
  --type-heading-chead-color: var(--type-heading-inherit-color);
  --type-heading-inherit-color: var(--color-text-heading);
  --type-heading-subtitle-color: var(--type-heading-inherit-color);
  /* number */
  --breakpoint-xs: var(--spacing-40-(320px));
  --breakpoint-small: var(--spacing-64-(512px));
  --breakpoint-medium: var(--spacing-96-(768px));
  --breakpoint-large: 1280px;
  --breakpoint-xl: var(--spacing-180-(1440px));
  --corner-xs: var(--spacing-0,5-(4px));
  --corner-small: var(--spacing-1-(8px));
  --corner-medium: var(--spacing-1,5-(12px));
  --corner-large: var(--spacing-2-(16px));
  --corner-xl: var(--spacing-3-(24px));
  --corner-pill: 624.9375rem;
  --spacing-horizontal-collapse: 0px;
  --spacing-horizontal-xxs: var(--spacing-0,5-(4px));
  --spacing-horizontal-xs: var(--spacing-1-(8px));
  --spacing-horizontal-small: var(--spacing-1,5-(12px));
  --spacing-horizontal-medium: var(--spacing-2-(16px));
  --spacing-horizontal-large: 24px;
  --spacing-horizontal-xl: var(--spacing-4-(32px));
  --spacing-horizontal-xxl: var(--spacing-5-(40px));
  --spacing-horizontal-3xl: var(--spacing-10-(80px));
  --spacing-vertical-collapse: 0px;
  --spacing-vertical-xxs: 0.125rem;
  --spacing-vertical-xs: 0.25rem;
  --spacing-vertical-small: 0.375rem;
  --spacing-vertical-medium: 0.5rem;
  --spacing-vertical-large: 0.75rem;
  --spacing-vertical-xl: 1rem;
  --spacing-vertical-xxl: 1.25rem;
  --spacing-vertical-3xl: 2.5rem;
  --type-body-default-letterspacing: var(--type-letterspacing-1);
  --type-body-default-fontsize: var(--type-scale-1);
  --type-body-default-lineheight: var(--type-lineheight-2-default);
  --type-body-default-spacing: var(--type-spacing-100-default);
  --type-body-large-letterspacing: var(--type-letterspacing-2);
  --type-body-large-fontsize: var(--type-scale-2);
  --type-body-large-lineheight: var(--type-lineheight-2-large);
  --type-body-large-spacing: var(--type-spacing-100-large);
  --type-body-xl-letterspacing: var(--type-letterspacing-4);
  --type-body-xl-spacing: var(--type-spacing-025-chead);
  --type-body-xl-fontsize: var(--type-scale-4);
  --type-body-xl-lineheight: var(--type-lineheight-1-chead);
  --type-caption-letterspacing: var(--type-letterspacing-0);
  --type-caption-fontsize: var(--type-scale-0);
  --type-caption-lineheight: var(--type-lineheight-3);
  --type-caption-spacing: var(--type-spacing-100-caption);
  --type-display-letterspacing: var(--type-letterspacing-7);
  --type-display-spacing: var(--type-spacing-050-display);
  --type-display-fontsize: var(--type-scale-6);
  --type-display-lineheight: var(--type-lineheight-collapse-display);
  --type-heading-ahead-letterspacing: var(--type-letterspacing-6);
  --type-heading-ahead-spacing: var(--type-spacing-025-ahead);
  --type-heading-ahead-fontsize: var(--type-scale-6);
  --type-heading-ahead-lineheight: var(--type-lineheight-1-ahead);
  --type-heading-bhead-letterspacing: 0em;
  --type-heading-bhead-spacing: var(--type-spacing-025-bhead);
  --type-heading-bhead-fontsize: var(--type-scale-5);
  --type-heading-bhead-lineheight: var(--type-lineheight-1-bhead);
  --type-heading-chead-letterspacing: var(--type-letterspacing-4);
  --type-heading-chead-spacing: var(--type-spacing-025-chead);
  --type-heading-chead-fontsize: var(--type-scale-4);
  --type-heading-chead-lineheight: var(--type-lineheight-1-chead);
  --type-heading-inherit-spacing: var(--type-spacing-025-ahead);
  --type-heading-inherit-lineheight: 1.2em;
  --type-heading-subtitle-letterspacing: var(--type-letterspacing-3);
  --type-heading-subtitle-fontsize: var(--type-scale-3);
  --type-heading-subtitle-lineheight: var(--type-lineheight-1-subtitle);
  --type-heading-subtitle-spacing: var(--type-spacing-100-subtitle);
  /* string */
  --type-body-default-font: var(--type-font-sanserif);
  --type-body-large-font: var(--type-body-default-font);
  --type-body-xl-font: var(--type-body-default-font);
  --type-caption-font: var(--type-body-default-font);
  --type-display-font: var(--type-font-weathered);
  --type-heading-ahead-font: var(--type-heading-inherit-font);
  --type-heading-bhead-font: var(--type-heading-inherit-font);
  --type-heading-chead-font: var(--type-heading-inherit-font);
  --type-heading-inherit-font: var(--type-font-serif);
  --type-heading-subtitle-font: var(--type-heading-inherit-font);
}
/* Semantic Colors */
:root {
  /* Light */
  /* color */
  --border-default: var(--color-green-500);
  --border-subtle: var(--color-beige-600);
  --color-surface: var(--color-beige-500);
  --color-accent-contrast-default: var(--color-orange-500);
  --color-accent-contrast-hover: var(--color-orange-600);
  --color-accent-default-default-default: var(--color-orange-500);
  --color-accent-default-default-hover: var(--color-orange-600);
  --color-brand-default: var(--color-green-500);
  --color-text-contrast: var(--color-base-white);
  --color-text-default: var(--color-base-black);
  --color-text-heading: var(--color-green-600);
  --color-text-subtle: var(--color-beige-800);
  --link-default: var(--color-blue-500);
  --link-visited: var(--color-blue-600);
  /* Dark */
  /* color */
  --border-default-dark: var(--color-beige-500);
  --border-subtle-dark: var(--color-green-700);
  --color-surface-dark: var(--color-green-500);
  --color-accent-contrast-default-dark: var(--color-base-white);
  --color-accent-contrast-hover-dark: var(--color-orange-300);
  --color-accent-default-default-default-dark: var(--color-orange-400);
  --color-accent-default-default-hover-dark: var(--color-orange-500);
  --color-brand-default-dark: var(--color-base-white);
  --color-text-contrast-dark: var(--color-base-white);
  --color-text-default-dark: var(--color-base-white);
  --color-text-heading-dark: var(--color-base-white);
  --color-text-subtle-dark: var(--color-beige-600);
  --link-default-dark: var(--color-blue-300);
  --link-visited-dark: var(--color-blue-500);
}
/* Component */
:root {
  /* Mode 1 */
  /* color */
  --button-primary-surface-default: var(--color-accent-default-default-default);
  --button-primary-surface-hover: var(--color-accent-default-default-hover);
  --button-primary-text-color: var(--color-base-white);
  --button-secondary-border-default: var(--color-accent-contrast-default);
  --button-secondary-border-hover: var(--color-accent-contrast-hover);
  --button-secondary-text-color-default: var(--color-accent-contrast-default);
  --button-secondary-text-color-hover: var(--color-accent-contrast-hover);
  /* number */
  --button-primary-border-radius: var(--corner-small);
  --button-primary-text-letterspacing: var(--type-letterspacing-1);
  --button-primary-text-fontsize: var(--type-scale-1);
  --button-primary-text-lineheight: var(--type-lineheight-collapse-body);
  --button-secondary-border-radius: var(--button-primary-border-radius);
  --button-secondary-text-letterspacing: var(--type-letterspacing-1);
  --button-secondary-text-border: 0.0625rem;
  --button-secondary-text-fontsize: var(--type-scale-1);
  --button-secondary-text-lineheight: var(--type-lineheight-collapse-body);
  --form-field-height: var(--type-lineheight-2-large);
  /* string */
  --button-primary-text-fontfamily: var(--type-font-sanserif);
  --button-secondary-text-fontfamily: var(--type-font-sanserif);
}

@media (max-width:512px) {
    :root{
        --type-display-fontsize: var(--type-scale-5);   
    }
}

@media (max-width: 320px) {
    :root{
        --type-display-fontsize: var(--type-scale-4);   
    }
}

/**Typography**/
p{
    font-family: var(--type-body-default-font);
    font-size: var(--type-body-default-fontsize);
    line-height: var(--type-body-default-lineheight);
    letter-spacing: var(--type-body-default-letterspacing);
    color: var(--type-body-default-color);
    margin-bottom: var(--type-body-default-spacing);
}

p:last-of-type{
    margin-bottom: 0;
}

a{
    font-family: var(--type-body-default-font);
    font-size: var(--type-body-default-fontsize);
    line-height: var(--type-body-default-lineheight);
    letter-spacing: var(--type-body-default-letterspacing);
    color: inherit;
}

h1,h2,h3,h4,h5,h6,
.ahead, .bhead, .chead, .subtitle{
    font-family: var(--type-heading-inherit-font);
    color: var(--type-heading-inherit-color);
    margin-bottom: var(--type-heading-inherit-spacing);
    line-height: var(--type-heading-inherit-lineheight);
    font-weight: 500;
}
h1,.ahead{
    font-size: var(--type-heading-ahead-fontsize);
    letter-spacing: var(--type-heading-ahead-letterspacing);
}

h2,.bhead{
    font-size: var(--type-heading-bhead-fontsize);
    letter-spacing: var(--type-heading-bhead-letterspacing);
}

h3,.chead{
    font-size: var(--type-heading-chead-fontsize);
    letter-spacing: var(--type-heading-chead-letterspacing);
}

h4,.subtitle{
    font-size: var(--type-heading-subtitle-fontsize);
    letter-spacing: var(--type-heading-subtitle-letterspacing);
}

.display{
    font-family: var(--type-display-font);
    font-size: var(--type-display-fontsize);
    line-height: var(--type-display-lineheight);
    letter-spacing: var(--type-display-letterspacing);
    color: var(--type-display-color);
    margin-bottom: var(--type-display-spacing);
}

.dark p,
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark ahead,
.dark bhead,
.dark chead,
.dark subtitle{
  color: var(--color-text-heading-dark);
}


/** Utility **/
.container{
    padding-left: max(var(--spacing-horizontal-large, 24px), 50vw - var(--breakpoint-large, 1280px) / 2);
    padding-right: max(var(--spacing-horizontal-large, 24px), 50vw - var(--breakpoint-large, 1280px) / 2);
}

.button{
    display: flex;
    padding: var(--spacing-vertical-medium, 8px) var(--spacing-horizontal-medium, 16px);
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: var(--button-primary-border-radius, 4px);
    background: var(--color-accent-default-default-default, #CC3F0C);
    text-decoration: none;
    color: var(--color-text-heading-dark);
}

/**Header**/
header{
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -ms-flexbox; /* TWEEN - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+ */
    display: flex;
    padding-top: var(--spacing-vertical-3xl, 40px);
    padding-bottom: var(--spacing-vertical-3xl, 40px);
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--spacing-vertical-3xl, 40px);
    background: var(--color-surface-dark, #004030);
}


/**Hero**/
.hero{
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -ms-flexbox; /* TWEEN - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+ */
    display: flex;
    min-height: 500px;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    align-items: stretch;
    background-image: url('images/hero.jpg');
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    padding-left: max(var(--spacing-horizontal-large, 24px), 50vw - var(--breakpoint-large, 1280px) / 2);
}
.hero__text{
    width: fit-content;
    padding-top: var(--spacing-vertical-3xl, 40px);
    padding-bottom: var(--spacing-vertical-3xl, 40px);
    padding-left: 80px;
    padding-right: max(var(--spacing-horizontal-large, 24px), 50vw - var(--breakpoint-large, 1280px) / 2);
    background-image: linear-gradient(to right, rgba(245, 240, 234, 0.00), rgba(255, 251, 212, 0.60) 15%);

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero__text__content{
    max-width: var(--breakpoint-medium, 768px);
}

/**About**/
.about{
    padding-top: var(--spacing-vertical-3xl, 40px);
    padding-bottom: var(--spacing-vertical-3xl, 40px);
    background: var(--color-surface-dark, #004030);
}
.about__text{
    -webkit-columns: 2; /* Safari, Chrome */
    -moz-columns: 2; /* Firefox */
    columns: 2;
    -webkit-column-gap: var(--spacing-vertical-3xl, 40px);
    -moz-column-gap: var(--spacing-vertical-3xl, 40px);
    column-gap: var(--spacing-vertical-3xl, 40px);
}

.about__text p{
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    -moz-column-break-inside: avoid; /* Firefox */
    column-break-inside: avoid;
    break-inside: avoid;
}

.about__title{}
.header-content{}

/**Survey**/
.survey{
    padding-top: var(--spacing-vertical-3xl, 40px);
    padding-bottom: var(--spacing-vertical-3xl, 40px);
    background: var(--color-surface, #FFFBD4);
}
.survey__content{
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -ms-flexbox; /* TWEEN - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+ */
    display: flex;
    justify-content: center;
    gap: var(--spacing-vertical-xxl, 20px);
}
.survey__content__actions{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-vertical-small, 6px);
}
.survey__content__text{
    flex: 1;
    max-width: var(--breakpoint-small, 512px);
}
.survey__title{
    text-align: center;
}

/**Footer**/
footer{
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -ms-flexbox; /* TWEEN - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+ */
    display: flex;
    flex-direction: column;
    padding-top: var(--spacing-vertical-3xl, 40px);
    padding-bottom: var(--spacing-vertical-3xl, 40px);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-vertical-collapse, 0);
    background: var(--color-surface-dark, #004030);
}

footer .logo{
    width: 345px;
    height: 51px;
}

footer .footer__contact{
    text-align: center;
    margin-top: var(--spacing-vertical-large, 0.75rem);
}

/** Mobile: stack columns and simplify layout for small viewports **/
@media (max-width: 768px) {
    /* Stack multi-column content into a single column */
    .about__text{
        -webkit-columns: 1; /* Safari, Chrome */
        -moz-columns: 1; /* Firefox */
        columns: 1;
        -webkit-column-gap: 0;
        -moz-column-gap: 0;
        column-gap: 0;
    }

    .about__text p{
        -webkit-column-break-inside: avoid; /* Chrome, Safari */
        -moz-column-break-inside: avoid; /* Firefox */
        column-break-inside: avoid;
        break-inside: avoid;
    }

    .hero{
        min-height: 0;
        padding-left: 0;
    }

    .hero__text{
        padding-left: max(var(--spacing-horizontal-large, 24px), 50vw - var(--breakpoint-large, 1280px) / 2);
        background-color: rgba(255, 251, 212, 0.60);
        width: 100%;
    }
    .hero__text__content{
        max-width: 100%;
    }

    /* Make layout vertical and reduce paddings/gaps */
    header,
    .survey__content,
    footer{
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    footer .logo{
        width: 100%;
        max-width: 350px;
        height: auto;
    }
}