@import url('https://fonts.googleapis.com/css2?family=Gabriela&display=swap');/* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */html {
    box-sizing: border-box;
}/* Box Sizing fix */*, *:before, *:after {
    box-sizing: inherit;
}/* Whitespace reset */* {
    padding: 0;
    margin: 0;
}/* Image behaviour */img {
    display: block;
    width: 100%;
    height: auto;
}/*
Remove list styles (bullets/numbers)
in case you use it with normalize.css
*/ol, ul {
    list-style: none;
}/* Revert the 'white-space' property for textarea elements on Safari */textarea {
    white-space: revert;
}/* https://12daysofweb.dev/2024/calc-size-and-interpolate-size/#enabling-it-site-wide-with-a-single-declaration */:root {
    interpolate-size: allow-keywords;
}/*
Opt in for automatic view transitions
https://developer.mozilla.org/en-US/docs/Web/CSS/@view-transition 
*/@view-transition {
    navigation: auto;
}/*
Change default text wrapping behaviour where possible
https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap
*/html {
    text-wrap: pretty;
}:root {
    --gray-medium: #7C7C7C;
    --gray-dark: #343434;
    --gray-lighter: #F6F6F6;
    --gray-light: #E1E1E1;
    --primary-default-pink: #C6007E;
    --primary-dark: #8A0058;
    --primary-dimmed: #F9EFF6;
    --gray-semilight: #D6D6D6;
    --secondary-default-blue: #06038D;
    --secondary-lighter: #C3C2F0;
    --secondary-dimmed: #EFEFF9;
    --gray-white: #FFFFFF;
    --secondary-05-dimmed: #EFEFF9;

    --size-border-radius-sm: 8px;
    --size-border-radius-md: 16px;
    --size-border-radius-lg: 32px;
}:root {
  --fs-body: clamp(0.75rem, 0.6667rem + 0.4167vw, 1rem);
  --fs-heading-6: clamp(0.8438rem, 0.725rem + 0.5938vw, 1.2rem);
  --fs-heading-5: clamp(0.9492rem, 0.7856rem + 0.818vw, 1.44rem);
  --fs-heading-4: clamp(1.0679rem, 0.8478rem + 1.1002vw, 1.728rem);
  --fs-heading-3: clamp(1.2014rem, 0.9106rem + 1.4537vw, 2.0736rem);
  --fs-heading-2: clamp(1.3515rem, 0.9726rem + 1.8947vw, 2.4883rem);
  --fs-heading-1: clamp(1.5205rem, 1.032rem + 2.4425vw, 2.986rem);
}html {
	font-family: Gabriela, Helvetica, sans-serif;
	line-height: 1.5;
	font-size: var(--fs-body);
	font-weight: 400;

    font-variant: normal;
    font-kerning: normal;
    font-variant-ligatures: common-ligatures,contextual;
    font-feature-settings: "kern","liga","clig","calt";

    text-rendering: optimizeLegibility;
    text-wrap: pretty;
}body, table, form, input, select, button, textarea {
	font: inherit;
}h1, h2, h3, h4, h5, h6 {
	line-height: 1.1;
	font-weight: bold;
    margin-bottom: 0.4em;

    &:not(:first-child) {
        margin-top: 1em;
    }
}h1 { font-size: var(--fs-heading-1); }h2 { font-size: var(--fs-heading-2); }h3 { font-size: var(--fs-heading-3); }h4 { font-size: var(--fs-heading-4); }h5 { font-size: var(--fs-heading-5); }h6 { font-size: var(--fs-heading-6); }p:not(:only-child, :last-child) {
	padding-bottom: 1.5em;
}ul,
ol {
	padding-left: 1.5em;

	li {
		padding-bottom: 0.3em;
		list-style-position: outside;
	}
}ul > li {
    list-style-type: disc;
}ol > li {
	list-style-type: decimal;
}figure {
	margin: 0;
}blockquote {

	cite {
		display: block;
		padding-right: 1em;
		text-align: right;
	}
}hgroup {
    margin-bottom: 2em;

    :is(h1, h2, h3, h4, h5, h6) {
        margin: 0 !important;
        padding: 0;
        line-height: 1.2;
    }
}.page {

    :is(h2, h3, h4, h5) strong {
        color: #060;
    }

    ul li:last-child strong {
        color: #060;
        font-size: 1.2em;
    }
}body {
    display: flex;
    min-height: 100vh;

    @media (width > 500px) {
        overflow: hidden;
    }
    
    @media (width < 500px) {
        flex-direction: column;
    }
}body > [class^="site-"] {
    @media (width > 500px) {
        overflow: auto;
        height: 100vh;    
    }
}.site-header {
    flex: 1 0 auto;
    padding: 2em;
    display: flex;
    flex-direction: column;
    align-items: end;

    @media (width < 750px) {
        flex-basis: 190px;
        padding: 1em 1em 1em 0;
    }
    
    @media (500px > width < 750px) {
        p.site-title {
            width: 100%;
            
            a {
                width: 100% !important;
                height: auto;
            }
        } 
    }

    @media (width < 500px) {
        flex-basis: auto;
        flex-direction: row;
        justify-content: space-between;
        align-items: end;
        
        p.site-title {
            margin: 0 0 0 -1em !important;
        }

        nav {
            display: none;
        }
    }
}.site-content {
    flex: 1 1 100%;
    padding: 4em 2em;
    
    @media (width < 750px) {
        padding: 2em;
    }
}.page {
    max-width: 80ch;
    margin: 0 auto;
    
    &.wide {
        max-width: 120ch;
    }
}.page > header {
    margin-bottom: 2em;
}a {
    color: #080;
}.site-header {

    p.site-title {
        font-weight: bold;
        font-size: 1.2em;
        padding: 0;
        margin: 0 0 1em 0;

        a {
            display: block;
            width: 200px;
            aspect-ratio: 16/11.2;
            background-image: url('/logo.png');
            background-size: cover;
            background-repeat: no-repeat;
            text-indent: -200vw;
            overflow: hidden;
        }
    }

    a.cta {
        display: block;
        width: min-content;
        white-space: nowrap;
        text-align: right;
        font-size: 0.9em;
        padding: 0.5em 1em;
        border-radius: 0.3em;
        text-decoration: none;
        background: rgb(0, 130, 0, 0.7);
        color: rgb(255, 255, 255, 0.9);
        transition: all 0.3s ease-in;
        
        &:hover {
            background: rgb(0, 130, 0, 1);
            color: rgb(255, 255, 255, 1);
        }
    }
    
}.site-footer {
    display: block;
}.section {
    /* border: 1px solid #ddd; */
    /* border-radius: 0.4em; */
    padding: 1em;

    & + .section {
        margin-top: 2em;
    }

    & > .inner > header {
        padding-bottom: 2em;
    }
}nav.main {
    text-align: right;
    
    h6 {
        margin-top: 2em;
        text-transform: uppercase;
        margin-bottom: 0;
    }

    ul {
        display: flex;
        flex-direction: column;
        
        padding-block: 0.5em;
    }
    
    li {
        display: block;
        list-style: none outside;
        padding: 0;
    }
    
    a {
        display: block;
        color: #666;
        padding: 0.1em 0;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
            color: #060;
        }
    }
}form {
    border: 1px solid #DDD;
    padding: 2em;
    border-radius: 0.6em;
    margin-top: 2em;
    background: #F8F8F8;
    box-shadow: 0 0 1em 0 rgb(0, 0, 0, 0.1);

    button {
        display: block;
        border: none;
        border-radius: 0.3em;
        padding: 0.5em 1em;
        background: rgb(0, 150, 0);
        color: #EEE;
        margin-top: 1.5em;
        outline: none;
        cursor: pointer;

        &:hover {
            background: rgb(0, 170, 0);
            color: #FFF;

        }

        &:focus {
            outline: 3px solid orange;
            outline-offset: 4px;
        }
    }
}.field {
    
    &:not(:last-child) {
        padding-bottom: 0.5em;
    }

    label {
        display: block;
        font-weight: bold;
    }

    &:has(:is(input, textarea)[placeholder]) label {
        display: none;
    }

    input[type="text"],
    input[type="email"],
    textarea {
        display: block;
        width: 100%;
        padding: 0.7em 1em;
        border: 1px solid #CCC;
        border-radius: 0.3em;
        outline: none;

        &:focus {
            border-color: #090;
        }
    }

    textarea {
        field-sizing: content;
        min-height: 6em;
    }
}.grid {
    --grid-max-col-count: 3;
    --grid-min-col-size: 200px;
    --grid-gap: 1.5rem;

    /*
    * calculations, do not touch
    */

    --grid-col-size-calc: calc( (100% - var(--grid-gap) * var(--grid-max-col-count) ) / var(--grid-max-col-count) );
    --grid-col-min-size-calc: min(100%, max(var(--grid-min-col-size), var(--grid-col-size-calc)));
        
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    gap: var(--grid-gap);
    padding: 0;

    grid-template-columns: repeat(auto-fit, minmax(var(--grid-col-min-size-calc), 1fr));
    

    &.c3 {
        --grid-max-col-count: 3;
        --grid-min-col-size: 200px;
    }

    &.c2 {
        --grid-max-col-count: 2;
        --grid-min-col-size: 200px;
    }

    &.dense {
        grid-auto-flow: dense;
    }

}.socials[data-astro-cid-rdveou74]{flex-direction:row;gap:1em;justify-content:end;margin-top:0.5em;li {display: block; padding: 0; flex: 0 0 auto; a {display: block; width: 2em; height: 2em; padding: 0; text-align: left; text-indent: -2000vw; text-overflow: hidden; overflow: hidden; background: #444; color: #FFF; position: relative; &:hover {background: #080;} &::before {display: block; content: ""; position: absolute; inset: 0.4em; background-repeat: no-repeat; background-position: center; background-size: contain;}} &.facebook a::before {background-image: url(/icons/facebook-f-brands.svg);} &.instagram a::before {background-image: url(/icons/instagram-brands.svg);} &.linkedin a::before {background-image: url(/icons/linkedin-in-brands.svg);}}}