:root {
    /* COLORS */
    --col-primary-light: #327AA4;
    --col-primary: #004D7A;
    --col-primary-dark: #003554;
    --col-primary-very-light: #e2edf2;
    --col-secondary-light: #c8d9d1;
    --col-secondary: #4cb693;
    --col-secondary-dark: #0a8c61;
    --col-action: #F2B72C;
    /* COLOR ASSIGNMENT */
    --header-bg-color: var(--content-bg-color);
    --header-text-color: var(--col-primary-light);
    --body-bg-color: var(--content-bg-color);
    --content-alternate-bg-color: var(--col-primary-very-light);
    --content-alternate-text-color: inherit;
    --card-bg-color: var(--col-primary-very-light);
    --card-text-color: var(--content-text-color);
    --card-header-bg-color: var(--col-primary-dark);
    --card-header-text-color: var(--col-primary-very-light);

    --heading-color: var(--col-primary);
    --menu-hover-color: var(--col-primary-dark);

    /* EFFECTS */

    /* SPACING */
    --container-width: 1536px;
    --heading-line-height: 1.25;
    --body-padding-x: calc(var(--spacing-unit) * 3);
    --heading-margin-bottom: calc(var(--spacing-unit) * 3);
    --element-margin-bottom: calc(var(--spacing-unit) * 6);
    --cards-gap: calc(var(--spacing-unit) * 8);
    --header-height: 74px;
    /* TYPOGRAPHY */
    --heading-font-family: 'Fibon Neue', sans-serif;
}

@media (min-width: 768px) {
    :root {
        --element-margin-bottom: calc(var(--spacing-unit) * 16);
    }
}
.col-with-sticky-aside > *:last-child > *:first-child {
    position: relative;
    top: inherit;
}

body.hero h4, body.hero .h4,
body.prices main .col-with-sticky-aside> div:first-child > h2,
h1 + h2 {
    --heading-color: var(--col-secondary-dark);
}
p + h2, p ~ .h2 {
    margin-top: calc(var(--element-margin-bottom) / 2);
}
body.page .col-with-sticky-aside > div:first-child > h2:first-child {
    --heading-color: var(--col-secondary-dark);
}
@media (min-width: 768px) {
    .main-navigation ul {
        gap: calc(var(--menu-gap) * 2)
    }
}
.hero-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    justify-items: center;
}
.hero-content {
    max-width: 50ch;
}
.hero-image img {
    margin-bottom: 0;
}
main {
    padding-block: calc(var(--spacing-unit) * 4);
    padding-inline: var(--body-padding-x);
}
body {
    font-size: 1.125rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
}
.alternate-container {
    display: flex;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 4) 0;
    background-color: var(--content-alternate-bg-color);
    color: var(--content-alternate-text-color);
    margin-bottom: var(--element-margin-bottom);
}
.alternate-container div.container {
    max-width: 60ch;
    padding: 0;
    margin-bottom: 0;
}
.alternating-columns {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 4);
    margin-bottom: var(--element-margin-bottom);
}
.alternating-columns__row {
    display: grid;
    grid-template-areas:
        'title'
        'media'
        'text'
    ;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    ;
    justify-content: center;
    row-gap: calc(var(--spacing-unit) * 2);
}
@media (min-width: 900px) {
    .alternating-columns {
        gap: calc(var(--spacing-unit) * 16);
    }
    .alternating-columns__row {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(2, auto);
        grid-template-areas:
            'media title'
            'media text';
        column-gap: calc(var(--spacing-unit) * 8);
        row-gap: 0;
    }
    .alternating-columns__row:nth-child(odd) {
        grid-template-areas:
            'title media'
            'text media';
    }
}
.alternating-columns__media {
    display: flex;
    justify-content: center;
    align-items: center;
}
.alternating-columns__media img {
    border-radius: 50%;
    width: 500px;
}
.alternating-columns__text,
.alternating-columns__title {
    max-width: 60ch;
}
.alternating-columns__title {
    grid-area: title;
    align-self: end;
}
.alternating-columns__media {
    grid-area: media;
}
.alternating-columns__text {
    grid-area: text;
}
.alternating-columns__text-wrapper ul,
body.prices main ul {
    padding-left: 0;
    list-style: none;
}
body.prices main ul {
    margin-top: 0;
}
.alternating-columns__text-wrapper ul li,
body.prices main ul li {
    position: relative;
    padding-left: 1.5rem;
}
.alternating-columns__text-wrapper li:before,
body.prices main ul li:before {
    position: absolute;
    left: 0;
    color: var(--col-secondary-dark);
    content: '✔';

}
.alternating-columns__text-wrapper> *:last-child {
    margin-bottom: 0;
}
.hero-content {
    font-family: var(--heading-font-family), sans-serif;
}
.hero-content span.h1 {
    --heading-color: var(--col-primary-light);
    font-size: clamp(3rem, 4.8vw, 4.6rem);
}
.hero-content h1.h2 {
    font-size: clamp(2rem, 3.2vw, 3.125rem);
}
.hero-content h2.h3 {
    --heading-color: var(--col-primary-light);
    font-size: clamp(1.5rem, 2.4vw, 2.3rem);
    font-weight: normal;
}
body.hero .alternating-columns__media .svg-img {
    max-width: 276px;
}
/*.alternating-columns__media img:not(.svg-img) {*/
/*    -webkit-mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent),*/
/*    linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);*/
/*    mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent),*/
/*    linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);*/
/*    -webkit-mask-composite: intersect;*/
/*    mask-composite: intersect;*/
/*}*/
.alternate-container {
    background-color: var(--content-bg-color);
    color: inherit;
}
.alternate-container > div {
    border-radius: var(--card-border-radius);
    padding: calc(var(--spacing-unit) * 4);
    background-color: var(--content-alternate-bg-color);
}
.hero-wrapper {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-items: center;
}
header > span {
    margin-left: var(--spacing-unit);
    font-family: var(--heading-font-family), sans-serif;
    font-size: 2rem;
    font-weight: bold;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}
@media (min-width: 860px) {
    .hero-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        justify-items: center;
    }
}
@media (min-width: 768px) {
    body.page main:has(> p) {
        justify-self: center;
        width: 75ch;
    }
}
body.prices main > .col-with-sticky-aside > div:first-child > p {
    max-width: 65ch;
}
.faq-block-wrapper {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
}
body.page .faq-block-wrapper {
    justify-content: start;
}
.faq-block {
    max-width: 60ch;
}
.faq-block-wrapper > img {
    display: none;
}
.step.specialist-selector-grid {
    display: none !important;
}
body.hero main > h2 {
    margin-block: calc(var(--element-margin-bottom) / 2);
    background-color: var(--content-alternate-bg-color);
    color: var(--col-primary-dark);
    text-wrap: balance;
    padding-block: calc(var(--element-margin-bottom) / 2);
    padding-left: var(--body-padding-x);
    padding-right: calc(min(100vw, var(--body-width)) - 45ch);
    font-size: clamp(1.5rem, 2.4vw, 2.3rem);
    border-radius: var(--card-border-radius);
}
@media (min-width: 80ch) {
    .faq-block-wrapper > img {
        display: block;
    }
}

footer {
    border-top: 3px solid var(--col-primary-light);
    padding: calc(var(--body-padding-x) * 2);
}
footer .footer-logo {
    display: flex;
    justify-content: end;
}
footer div.footer-navigation {
    display: flex;
    justify-content: space-between;
    flex-direction: column-reverse;
    gap: calc(var(--spacing-unit) * 2);
}
footer ul {
    padding-left: 0;
    list-style: none;
}
.mh-planner.card {
    --body-padding-x: calc(var(--spacing-unit) * 3);
    --heading-margin-bottom: 0;
}
h3 + ul {
    margin-top: 0;
}
h3:has(+ ul) {
     margin-bottom: var(--spacing-unit);
 }
@media (min-width: 768px) {
    footer div.footer-navigation {
        flex-direction: row;
    }
}
@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-Regular-1__AtGq.woff") format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-Oblique-I-7eQFP.woff") format('woff');
    font-weight: 400;
    font-style: oblique;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-Bold-rDur99Y.woff") format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-BoldOblique-2pcjSMH.woff") format('woff');
    font-weight: 700;
    font-style: oblique;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-ExtraBold-lks-Zqi.woff") format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-ExtraBoldOblique-2LZy1Eg.woff") format('woff');
    font-weight: 800;
    font-style: oblique;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-ExtraLight-wukeYi6.woff") format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-ExtraLightOblique-oowjq1a.woff") format('woff');
    font-weight: 200;
    font-style: oblique;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-Heavy-jOsLlZy.woff") format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-HeavyOblique-A_ESWMQ.woff") format('woff');
    font-weight: 900;
    font-style: oblique;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-Light-w5zFJ94.woff") format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-LightOblique-KeAaaSr.woff") format('woff');
    font-weight: 300;
    font-style: oblique;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-Medium-2daP4ww.woff") format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-MediumOblique-qe31rm1.woff") format('woff');
    font-weight: 500;
    font-style: oblique;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-SemiBold-oxz2D-D.woff") format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-SemiBoldOblique-SDmY9MJ.woff") format('woff');
    font-weight: 600;
    font-style: oblique;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-SemiLight-dhuR3PW.woff") format('woff');
    font-weight: 350;
    font-style: normal;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-SemiLightOblique-apUdojr.woff") format('woff');
    font-weight: 350;
    font-style: oblique;
}