:root {
    --color-background: #F8FAFB;
    --color-primary: #C75750;
    --color-primary-text: #994944;
    --color-secondary: #5C7F84;
    --color-secondary-text: #2C3B3D;
    --text-color-dark: var(--color-secondary-text);
    --text-color-light: #ffffff;
    --color-detail: #ECF5F5;
    --color-accent: #D8EAE9;

    --header-background-color: var(--color-background);

    --font-size-medium: 18px;
    --font-size-small: .9rem;

    --font-weight-light: 200;
    --font-weight-medium: 300;
    --font-weight-bold: 600;

    --border-radius: 5px;

    --font-body: "Roboto", sans-serif;
    --font-display: "Vollkorn", serif;

    --padding-medium: 21px;
    --padding-large: 28px;

    font-size: var(--font-size-medium);
    font-weight: 300;
}

em {
    font-style: normal;
    font-weight: 400;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    color: var(--color-primary-text);
    font-size: 1.7rem;
    font-weight: 600;
}

h3 {
    font-size: 1.3rem;
}

.p1 {
    font-weight: 200;
    font-size: 1.2rem;
}

.p3 {
    font-weight: 500;
    font-size: .85rem;
    opacity: .6;
    color: var(--color-secondary-text);
}

main:not(:has(> .hero-banner:first-child)) {
    margin-top: calc(var(--header-size) + var(--padding-large))
}

#header-swipe nav {
    gap: var(--padding-large);
}

nav a {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-small);
}

#header-swipe .nav-toggle {
    height: 14px;
}

#header-swipe .nav-toggle:before, #header-swipe .nav-toggle:after {
    --text-color: var(--text-color-dark);
    --hamburger-size-y: 2px;
    border-radius: 0px
}

.header-top-wrapper {
    border-bottom: 2px solid var(--color-secondary);
}

#header-swipe .logo-image-container {
    max-width: 250px;
    flex-basis: 250px;
    flex-grow: 1;
}

#header-swipe .logo-image-container > img {
    width: 100%;
}

.hero-banner {
    justify-content: flex-end;
    padding: var(--padding-large) 0;
}

#header-swipe .floating-wrapper {
    display: none;
}

.hero-banner-content {
    text-align: left;
    align-items: flex-start;
    justify-content: flex-end;
}

.hero-banner-content > * {
    max-width: 750px;
}

.full-width.style-dark {
    padding: var(--padding-mega) 0;
}

.style-dark {
    background: var(--color-accent);
}

.style-light {
    background: var(--color-detail);
}

.panel-1 {
    padding: var(--padding-medium) var(--padding-large);
    box-shadow: 0 2px 0 0 #25837440;
    gap: var(--padding-small);
}

.panel-2 {
    padding: var(--padding-medium) var(--padding-large);
    box-shadow: 0 2px 0 0 #25837440;
    gap: var(--padding-small);
}

.panel-1:before, .panel-1:after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: var(--color-accent);
    display: block;
}

.panel-1:after {
    margin-top: var(--padding-small);
}

.panel-1:before {
    margin-bottom: var(--padding-small);
}

.center-self {
    align-self: center;
    text-align: center;
}

.special-message {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.special-message > *:not(.special-message-image-wrapper) {
    z-index: 1;
}

.specialty-display {
    border: 1px solid var(--color-accent);
    border-radius: var(--border-radius);
    padding: var(--padding-large) var(--padding-mega);
    position: relative;
    text-align: left;
    overflow: hidden;
}

.columns:not(.fixed-width, .fixed-width-medium, .fixed-width-large) {
    align-self: stretch;
}

.specialty-display > *:not(.sd-icon) {
    position: relative;
    z-index: 1;
}

.sd-icon {
    position: absolute;
    top: var(--padding-medium);
    left: var(--padding-medium);
    opacity: .5;
    height: 50%;
}

.sd-icon svg > * {
    fill: var(--color-accent);
}

.sd-heading {
    display: flex;
    flex-direction: column;
    gap: var(--padding-small);
    margin-bottom: var(--padding-small);
}

.sd-heading:after {
    content: "";
    background: var(--color-primary-text);
    height: 2px;
    width: 30px;
}

.sd-items {
    display: flex;
    flex-direction: column;
    gap: var(--padding-medium);
    font-weight: 300;
}

.tag {
    text-transform: uppercase;
    font-size: .85rem;
    color: var(--color-primary-text);
    font-weight: 800;
}

.tag-2 {
    text-transform: uppercase;
    font-size: .85rem;
    color: var(--color-secondary-text);
    font-weight: 800;
}

.hero-banner .tag {
    color: var(--text-color-light);
}

.itb-blank {
    background: var(--color-accent);
}

.itb-content {
    background: var(--color-detail);
    box-shadow: 0 2px 0 0 #25837440;
    padding: var(--padding-medium) var(--padding-large);
}

.itb-content:before {
    content: "";
    width: 100%;
    height: 1px;
    background-color: var(--color-accent);
    margin-bottom: 6px;
}

.itb-content:after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: var(--color-accent);
    margin-top: 6px;
}

.image-text-banner-wrapper h2, .style-light h2 {
    color: var(--color-secondary-text);
}

.testimonial {
    position: relative;
    overflow: hidden;
}

.testimonial-content {
    position: relative;
    z-index: 1;
}

.testimonial-author {
    text-align: right;
    font-weight: 600;
    font-size: 1.2em;
    font-family: var(--font-display), serif;
}

.testimonial-silhouette {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(300px, 60%);
    opacity: .3;
}

.grid {
    display: grid;
    gap: var(--padding-medium);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

footer .mini-heading {
    color: var(--text-color-dark);
}

input:not([type=radio]):not([type=checkbox]), select, textarea {
    border: 1px solid var(--color-accent);
}

@media (min-width: 800px) {
    .testimonial-content {
        margin-right: min(230px, 23%);
    }

    .testimonial-author {
        margin-right: min(80px, 8%);
    }

    .testimonial-silhouette {
        width: min(250px, 30%);
        opacity: 1;
    }

    .testimonial.panel-1:after {
        width: unset;
        margin-right: min(250px, 25%);
    }
}

@media (max-width: 999px) {
    #header-swipe nav {
        background-color: var(--color-secondary);
    }

    #header-swipe nav a {
        color: var(--text-color-light);
    }
}

@media (min-width: 1000px) {
    .header-top-wrapper {
        border-bottom: none;
    }

    #header-swipe {
        border-bottom: 2px solid var(--color-secondary);
    }
}