:root {
    --text: hsl(0, 0%, 12%);
    --text-inverse: hsl(0, 0%, 92%);
    --background: hsl(0, 0%, 99%);
    --brand: hsl(264, 16%, 25%);
    --accent: hsl(203, 36%, 32%);
    --secondary: hsl(48, 49%, 62%);
    --shade-1: hsl(0, 0%, 80%);
    --shade: hsl(0, 0%, 94%);
    --headerbg: hsl(0, 0%, 94%);
    --punch: hsl(359, 68%, 51%);
    --punch-2: #D1462A;
}

.dark-mode {
    --text: hsl(0, 0%, 88%);
    --text-inverse: hsl(0, 0%, 98%);
    --background: hsl(0, 0%, 12%);
    --brand: hsl(264, 16%, 18%);
    --accent: hsl(203, 59%, 65%);
    --secondary: hsl(48, 49%, 62%);
    --shade-1: hsl(0, 0%, 20%);
    --shade: hsl(0, 0%, 16%);
    --headerbg: hsl(0, 0%, 12%);
    --punch: hsl(359, 68%, 51%);
    --punch-2: #D1462A;
}

::backdrop {
    --color-backdrop: rgba(240, 239, 240, .85);
}

.dark-mode img {
    filter: brightness(1) contrast(1.1);
}


.logo:hover {
    filter: brightness(.8) contrast(1.6);
}


.dark-mode .logo {
    filter: invert(.5) brightness(1.8);
    transition: .5s;
}


.dark-mode .logo:hover {
    filter: invert(.5) brightness(1.4);
    transition: .5s;
}


a[href="#"] {
    color: red;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}


a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
}


input,
button,
textarea,
select {
    font: inherit;
}


.skip {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 1em;
    background-color: var(--text);
    color: var(--background);
    opacity: 0;
}


.skip:focus {
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
}


html {
    color-scheme: light dark;
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;
}


img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}


.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}


:where(html) {
    --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
    --font-serif: ui-serif, serif;
    --font-mono: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, monospace;
    --font-weight-1: 100;
    --font-weight-2: 200;
    --font-weight-3: 300;
    --font-weight-4: 400;
    --font-weight-5: 500;
    --font-weight-6: 600;
    --font-weight-7: 700;
    --font-weight-8: 800;
    --font-weight-9: 900;
    --font-lineheight-00: .95;
    --font-lineheight-0: 1.1;
    --font-lineheight-1: 1.25;
    --font-lineheight-2: 1.375;
    --font-lineheight-3: 1.5;
    --font-lineheight-4: 1.75;
    --font-lineheight-5: 2;
    --font-lineheight-0: -.05em;
    --font-letterspacing-1: .025em;
    --font-letterspacing-2: .05em;
    --font-letterspacing-3: .075em;
    --font-letterspacing-4: .15em;
    --font-letterspacing-5: .5em;
    --font-letterspacing-6: .75em;
    --font-letterspacing-7: 1em;
    --font-size-00: .5rem;
    --font-size-0: .75rem;
    --font-size-1: 1rem;
    --font-size-2: 1.1rem;
    --font-size-3: 1.25rem;
    --font-size-4: 1.5rem;
    --font-size-5: 2rem;
    --font-size-6: 2.5rem;
    --font-size-7: 3rem;
    --font-size-8: 3.5rem;
    --font-size-fluid-0: clamp(.75rem, 2vw, 1rem);
    --font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
    --font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
    --font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);
    --dw-font-size-fluid-00: clamp(1.2rem, 3vw + .5rem, 1.4rem);
    --dw-font-size-fluid-0: clamp(1.3rem, 2.4vw + .5rem, 1.7rem);
    --dw-font-size-fluid-1: clamp(1.5rem, 3vw + .5rem, 1.9rem);
    --dw-font-size-fluid-2: clamp(1.6rem, 3vw + .5rem, 2.1rem);
    --dw-font-size-fluid-3: clamp(1.8rem, 3vw + .5rem, 2.5rem);
    --dw-font-size-fluid-4: clamp(2.2rem, 3vw + .5rem, 3rem);
    --dw-font-size-fluid-5: clamp(2.8rem, 2.7vw + 1rem, 4rem);
    --size-000: -.5rem;
    --size-00: -.25rem;
    --size-1: .25rem;
    --size-2: .5rem;
    --size-3: 1rem;
    --size-4: 1.25rem;
    --size-5: 1.5rem;
    --size-6: 1.75rem;
    --size-7: 2rem;
    --size-8: 3rem;
    --size-9: 4rem;
    --size-10: 5rem;
    --size-11: 7.5rem;
    --size-12: 10rem;
    --size-13: 15rem;
    --size-14: 20rem;
    --size-15: 30rem;
    --size-fluid-1: clamp(0.5rem, 1vw, 1rem);
    --size-fluid-2: clamp(1rem, 2vw, 1.5rem);
    --size-fluid-3: clamp(1.5rem, 3vw, 2rem);
    --size-fluid-4: clamp(2rem, 4vw, 3rem);
    --size-fluid-5: clamp(4rem, 5vw, 5rem);
    --size-fluid-6: clamp(5rem, 7vw, 7.5rem);
    --size-fluid-7: clamp(7.5rem, 10vw, 10rem);
    --size-fluid-8: clamp(10rem, 20vw, 15rem);
    --size-fluid-9: clamp(15rem, 30vw, 20rem);
    --size-fluid-10: clamp(20rem, 40vw, 30rem);
    --size-content-1: 20ch;
    --size-content-2: 45ch;
    --size-content-3: 60ch;
    --size-header-1: 20ch;
    --size-header-2: 25ch;
    --size-header-3: 35ch;
    --size-xxs: 240px;
    --size-xs: 360px;
    --size-sm: 480px;
    --size-md: 768px;
    --size-lg: 1024px;
    --size-xl: 1440px;
    --size-xxl: 1920px;
    --radius-round: 1e5px;
    --radius-conditional-1: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-1));
    --radius-conditional-2: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-2));
    --radius-conditional-3: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-3));
    --radius-conditional-4: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-4));
    --radius-conditional-5: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-5));
    --radius-conditional-6: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-6));
    --shadow-color: 220 3% 15%;
    --shadow-strength: 1%;
    --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));
    --shadow-2: 0 3px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)), 0 7px 14px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%));
    --shadow-3: 0 -1px 3px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)), 0 1px 2px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)), 0 2px 5px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)), 0 4px 12px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)), 0 12px 15px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));
    --shadow-4: 0 -2px 5px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)), 0 1px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)), 0 2px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)), 0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)), 0 9px 9px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)), 0 16px 16px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%));
    --shadow-5: 0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)), 0 2px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)), 0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)), 0 10px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)), 0 20px 20px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)), 0 40px 40px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));
    --shadow-6: 0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)), 0 3px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)), 0 7px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)), 0 12px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)), 0 22px 18px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)), 0 41px 33px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%)), 0 100px 80px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));
    --inner-shadow-0: inset 0 0 0 1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));
    --inner-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));
    --inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));
    --inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));
    --inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));
}
    
@media (prefers-reduced-motion:no-preference) {
    html {
        scroll-behavior: smooth;
    }


    dialog[open] {
        -webkit-animation: show .3s ease normal;
    }


    @-webkit-keyframes show {
        from {
            transform: translateY(-8%);
        }


        to {
            transform: translateY(0%);
        }
    }


    @keyframes details-show {
        from {
            opacity: 0;
            transform: translateY(-1rem);
        }
    }


    details[open]>*:not(summary) {
        animation: details-show .5s ease-out;
    }
}


html {
    font-size: 70%;
    scroll-padding-block-start: 12rem;
    background-color: var(--shade);
    scrollbar-gutter: stable;
}


body {
    max-width: 1920px;
    margin-inline: auto;
    padding-inline: 3%;
    color: var(--text);
    background-color: var(--background);
    padding-block: 1rem;
    margin-block: 0;
}


main {
    margin-inline: auto;
}


article {
    width: min(85ch, 100% - 3rem);
    margin-inline: auto;
    padding-inline: 0;
    min-height: 100vh;
}

main.one-col {
    width: min(75ch, 100% - 3rem);
    margin-inline: auto;
    padding-inline: 0;
    min-height: 100vh;
}


.one-col-page main {
    width: min(85ch, 100% - 3rem);
    margin-inline: auto;
    padding-inline: 0;
    min-height: 100vh;
}


footer {
    padding: 2rem;
    margin-top: 2rem;
}


foot-note {
    display: grid;
    grid-column: 1 / 5;
    justify-items: center;
}


@media screen and (max-width:991px) {
    main {
        margin-inline: auto;
        padding-inline: 0;
    }
}


@media screen and (min-width:992px) {
    header {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
    }


    footer {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 3rem;
        padding: 3rem;
        border-radius: 1.2rem;
        margin-top: 5rem;
    }
}


@media screen and (max-width:991px) {
    .home main {
        display: grid;
    }


    .home main section:nth-child(2) {
        grid-row: 3;
    }


    .home main section:nth-child(3) {
        grid-row: 2;
    }


    .home main section:nth-child(5) {
        grid-row: 6;
    }


    .home main section:nth-child(6) {
        grid-row: 5;
    }


    .home main section,
    .getting main section,
    .getting-hero,
    enrol {
        padding-inline: 5%;
        padding-block: 3%;
        margin-block: 1rem;
    }


    .home main .btn {
        display: block;
        margin-top: 3rem;
        margin-left: auto;
        margin-right: auto;
        max-width: fit-content;
    }


    .home main h1,
    .home main h2,
    .home main h3,
    .getting main h1,
    .getting main h2,
    .getting main h3,
    .getting main blockquote,
    .getting figcaption {
        text-align: center;
    }


    .getting main img,
    .getting hr,
    .home main img,
    .home hr {
        display: block;
        margin: 0 auto;
    }


    .home main section:nth-child(4) img,
    .home main section:nth-child(1) img {
        margin-bottom: 0rem;
    }


    .home main section:nth-child(1) ul {
        margin-bottom: 3rem;
    }


    .getting main section,
    .home main,
    enrol div {
        margin-bottom: 3rem;
        display: grid;
        justify-content: center;
    }


    .home main section:nth-child(2) img {
        background-image: linear-gradient(to right, var(--punch), var(--punch) 33.3%, var(--secondary)33.3%, var(--secondary) 66.6%, var(--brand) 66.6%, var(--brand) 100%);
    }


    .courses main div,
    .team {
        display: grid;
        grid-template-columns: none;
        justify-content: center;
        padding-inline: 2rem;
    }


    main .affinity-help {
        display: grid;
        grid-template-columns: none;
        justify-content: center;
        margin: 0;
        padding-inline: 0;
    }


    .affinity-help h3 {
        text-align: center;
    }


    main .sitemap {
        display: grid;
        grid-template-columns: none;
        justify-content: center;
        margin: 0;
        padding-inline: 0;
    }
}


@media screen and (min-width:992px) {

    .home main,
    .getting main {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }


    .contact-page {
        grid-template-columns: 1fr 1fr;
    }


    .home main section:nth-child(1),
    .home main section:nth-child(7),
    .getting main section:nth-child(1),
    .getting main section:nth-child(4) {
        grid-column: 1 / 3;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(42ch, 1fr));
    }


    .getting main section:nth-child(4) reviews {
        grid-column: 1 / 3;
        display: grid;
    }


    .getting main payment {
        grid-column: 1 / 3;
        display: grid;
    }


    .enrol {
        grid-column: 1 / 3;
        display: grid;
        justify-content: center;
    }


    .home main section:nth-child(4) {
        grid-column: 1 / 3;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(45ch, 1fr));
    }


    .home main section:nth-child(4) picture {
        justify-self: right;
        align-self: baseline;
    }


    .home main section:nth-child(6) {
        justify-self: center;
        align-self: center;
    }


    .home main section:nth-child(1) picture {
        justify-self: center;
        align-self: center;
        width: clamp(60px, 26vw, 450px);
    }


    .home main section:nth-child(1) picture {
        border: clamp(5px, 2vw, 19px);
        transform: rotate(-5deg);
        border-style: solid;
        border-color: var(--secondary);
    }


    .getting main section:nth-child(1) .reviews {
        justify-self: center;
        align-self: center;
        width: clamp(80px, 42vw, 590px);
    }


    .home main section,
    .getting main section {
        padding-inline: 3.5rem;
        padding-block: 5rem;
        margin-block: 3rem;
    }


    .home main section:nth-child(1),
    .home main section:nth-child(4) {
        background-image: url(/images/affinity-white-bg.svg);
        background-size: clamp(20rem, 40vw, 46rem) auto;
        background-repeat: no-repeat;
        background-position: 75% 50%;
        background-origin: padding-box;
    }


    .getting main section:nth-child(1) {
        background-image: url(images/affinity-gray-bg.svg);
        background-size: clamp(20rem, 40vw, 46rem) auto;
        background-repeat: no-repeat;
        background-position: 75% 50%;
        background-origin: padding-box;
    }


    quotes {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }


    payment {
        background-color: var(--shade);
        border-radius: 1.2rem;
        padding: 1rem;
        margin-inline: 20rem;
    }
}


.home p,
.getting p {
    max-width: 55ch;
}


.hero li::marker,
.getting li::marker {
    color: var(--secondary);
}


.finding li::marker {
    color: var(--brand);
}


.finding section:nth-child(5) li::marker {
    color: var(--secondary);
}


.hero a {
    color: white;
    text-decoration-color: #aaa;
    text-decoration-thickness: .1rem;
    text-decoration-style: solid;
    text-underline-offset: .4rem;
}


.hero a:hover {
    color: #f5f5f5;
}


.home .hero {
    margin-right: 2rem;
}


.getting main section:nth-child(1),
.getting main section:nth-child(4),
.finding main section:nth-child(3),
.finding main section:nth-child(6) {
    background-color: var(--shade);
    border-radius: 1.2rem;
}


.getting main section:nth-child(5),
.finding main section:nth-child(5) {
    background-color: var(--brand);
    border-radius: 1.2rem;
    margin-inline-end: 1rem;
    color: var(--text-inverse);
    align-self: start;
}


.getting main section:nth-child(5) a,
.finding main section:nth-child(5) a {
    color: var(--text-inverse);
}


.getting main section:nth-child(6) {
    background-color: var(--shade);
    border-radius: 1.2rem;
    margin-inline-start: 1rem;
}


.home main section:nth-child(1),
.home main section:nth-child(7) {
    background-color: var(--brand);
    color: var(--text-inverse);
    border-radius: 1.2rem;
}


.home main section:nth-child(4) {
    background-color: var(--secondary);
    color: hsla(0, 0%, 0%, .89);
    border-radius: 1.2rem;
    margin-block: 3rem;
    padding-bottom: 0;
}


.finding main section:nth-child(4) {
    background-color: var(--secondary);
    color: hsla(0, 0%, 0%, .89);
    border-radius: 1.2rem;
}


@media screen and (max-width:1200px) {
    .home main section:nth-child(4) {
        grid-template-columns: repeat(auto-fit, minmax(72ch, 1fr));
    }


    .home main section:nth-child(4) img {
        width: 70%;
    }
}


.home main section:nth-child(1) picture {
    border: clamp(5px, 2vw, 19px);
    border-style: solid;
    border-color: var(--secondary);
    margin: 0 3rem 3rem 3rem;
    border-radius: clamp(12px, 2vw, 20px);
}


.about-one-col {
    width: min(75ch, 100% - 3rem);
    margin-inline: auto;
    padding-inline: 0;
}


.affinity-help {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(40ch, 1fr));
    margin: 5% 0;
    padding-inline: 5%;
}


.about div section {
    background-color: var(--shade);
    border-radius: 1.2rem;
    padding: 5%;
}


.courses main div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(36ch, 1fr));
    margin-bottom: 5%;
    padding-inline: 10%;
}


.courses main section {
    padding: 5%;
    border-radius: 1.2rem;
    margin-inline: 5%;
}


.courses IMG:hover {
    filter: brightness(70%);
    transition: all .4s ease-in-out;
}


.courses h1 {
    text-align: center;
}


.courses main h2 {
    text-align: center;
    margin-bottom: 5rem;
}


.courses main h3 {
    text-align: center;
}


.courses div section {
    border: 0;
    border-style: solid;
    border-color: var(--secondary);
    border-radius: 1.2rem;
    background-color: var(--shade);
    margin-bottom: 2rem;
}


@media screen and (min-width:992px) {
    .articles main section {
        display: grid;
        gap: 5rem;
        grid-template-columns: repeat(2, 1fr);
    }


    .articles main {
        width: min(130ch, 100% - 3rem);
        margin-inline: auto;
    }
}


.team-bio article img {
    background-color: var(--punch);
    border: 1.6rem solid var(--shade);
    padding: 0;
    border-radius: 50%;
    width: 340px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.team-bio article h1,
.team-bio article h2 {
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.finding h1 accent {
    font-size: var(--dw-font-size-fluid-4);
    color: var(--accent);
    text-align: center;
}


.finding h1 {
    text-align: center;
    line-height: 4rem;
}


.finding h2 {
    text-align: center;
    line-height: 4rem;
}


.finding main section {
    padding: 3rem;
    margin-top: 3rem;
}


.finding main {
    width: min(90ch, 100% - 3rem);
    margin-inline: auto;
    padding-inline: 0;
}


.finding-reviews div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(28ch, 1fr));
}


.finding-reviews blockquote {
    background-color: var(--shade);
    border-radius: .5rem;
    padding: 1.4rem;
    margin: .8rem;
    border: 0rem solid var(--shade-1);
}


.one-col-page iframe,
article iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}


.finding main .btn,
.about main .btn,
.courses main .btn {
    display: block;
    margin-top: 3rem;
    margin-left: auto;
    margin-right: auto;
    max-width: fit-content;
}


.getting .enrol .btn {
    display: block;
    margin-top: 3rem;
    margin-left: auto;
    margin-right: auto;
    max-width: fit-content;
}


.contact-page {
    margin-bottom: 5rem;
    display: grid;
    background-color: var(--brand);
    padding: 3%;
    border-radius: .9rem;
}


.contact-page a {
    color: var(--text-inverse);
}


.contact-page a:hover {
    color: var(--text-inverse);
}


.one-col-page main form {
    width: 100%;
}


.thank-you main img {
    margin-inline: auto;
}


.cf-turnstile iframe {
    max-width: clamp(260px, 10vw, 300px);
}


nav svg {
    min-width: 2.2rem;
}


figure {
    margin: 0;
}


.getting figcaption {
    font-size: 1rem;
    margin: .5rem 0;
}


    .img-bg-1,
.couples-therapy main img:nth-child(1) {
    background-image: linear-gradient(to right, var(--brand), var(--brand) 33.3%, var(--secondary)33.3%, var(--secondary) 66.6%, var(--brand) 66.6%, var(--brand) 100%);
}

.img-bg-2 {
    background-image: linear-gradient(to right, var(--brand), var(--brand) 33.3%, var(--secondary)33.3%, var(--secondary) 66.6%, var(--brand) 66.6%, var(--brand) 100%);
}

.lbtq  {
    --g-orange: #e36511;
    --g-yellow: #ffba00;
    --g-green: #00b180;
    --g-blue: #147aab;
    --g-indigo: #675997;
    background-image: linear-gradient(var(--punch) 0, var(--punch) 16.6666%, var(--g-orange) 16.6666%, var(--g-orange) 33.333%, var(--g-yellow) 33.333%, var(--g-yellow) 50%, var(--g-green) 50%, var(--g-green) 66.6666%, var(--g-blue) 66.6666%, var(--g-blue) 83.3333%, var(--g-indigo) 83.3333%, var(--g-indigo) 100%);
}

.img-bg-3 {
    background-image: linear-gradient(to right, var(--brand), var(--brand) 33.3%, var(--secondary)33.3%, var(--secondary) 66.6%, var(--brand) 66.6%, var(--brand) 100%);
}

.pro-logos {
    display: flex;
    gap: 2.6rem;
    align-items: center;
}

.single aside {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22ch, 1fr));
    background-color: var(--shade);
    padding: 2rem;
    border-radius: 1.2rem;
    margin-block: 5rem;
}

.single aside div:nth-child(1) {
    display: grid;
    align-items: center;
    justify-items: center;
}

.single aside div:nth-child(2) {
    display: grid;
}

.single aside h3 {
    margin-block-end: 0;
}

.single aside div img {
    border-radius: var(--radius-round);
    border: 10px solid white;
}

nav {
    display: flex;
    justify-content: flex-end;
}

nav ul {
    display: flex;
    list-style-type: none;
}

.open-menu,
.close-menu {
    border: 0;
    cursor: pointer;
    padding: 0;
}

button.close-menu {
    position: absolute;
    top: .5rem;
    right: .5rem;
    color: white;
    background-color: red;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    text-align: center;
}

button.close-menu:hover {
    background-color: green;
}

.menu-modal {
    padding: .5rem;
    background-color: var(--shade-1);
    border: 0;
    border-radius: 4px;
    width: 88%;
    max-width: 1920px;
    z-index: 10;
}

.menu-modal.open {
    display: block;
}

.box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22ch, 1fr));
    list-style: none;
    padding: 3%;
    background-color: var(--shade);
}

.box .column {
    padding-inline: 5%;
}

.box ul {
    padding-left: 3%;
}

.box li {
    line-height: var(--font-lineheight-6);
    margin-block-end: 1rem;
}

.box li a {
    text-decoration: none;
    color: var(--text);
}

.box li a:hover {
    color: var(--accent);
}

.box li::marker {
    content: "➤  ";
    color: var(--secondary);
}

.box titles {
    text-align: center;
    display: block;
    background-color: var(--shade-1);
    color: var(--text);
    font-weight: 900;
    margin-bottom: .5rem;
}

svg {
    background-color: var(--shade-1);
    padding: .2rem .2rem .2rem .4rem;
}

:focus-visible {
    outline: 2px solid var(--brand);
}

header #dark-mode-toggle {
    position: absolute;
    top: 16px;
    right: 0;
    padding: .5em;
    margin-right: .2rem;
    z-index: 100;
    background-color: var(--text);
    border-radius: 4px;
    height: 12rem;
    width: 2.2rem;
    cursor: pointer;
}

header #dark-mode-toggle span {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    font-weight: 530;
    font-style: normal;
    font-size: 1rem;
    color: var(--shade);
}

header #dark-mode-toggle:hover {
    transition: .5s;
}

header {
    background-color: var(--headerbg);
    border-radius: 1.2rem;
    padding: 1rem 3rem;
}

.logo {
    width: 240px;
    padding-block: var(--size-3);
}

.logo+span {
    font-family: 'Times New Roman', Times, serif;
    font-weight: 400;
    font-size: 14px;
    position: absolute;
    margin: -40px 0 -40px 110px;
    text-decoration: none;
    color: var(--text);
}

@media screen and (max-width:991px) {
    .logo {
        margin-inline: auto;
        width: 200px;
    }


    .logo+span {
        display: none;
    }


    nav ul {
        margin-inline: auto;
    }
}

.single-team main h1 {
    text-align: center;
}

.single-team main img {
    margin-inline: auto;
}

footer {
    background-color: var(--shade);
}

article img {
    margin: 0;
}

details {
    margin-bottom: 1rem;
    padding: .5rem 1rem;
}

summary::marker {
    color: var(--accent);
    font-weight: var(--font-weight-6);
}

details li::marker {
    color: var(--accent);
}

details ul {
    margin-left: 2rem;
}

summary {
    cursor: pointer;
    font-weight: bold;
    font-size: var(--size-5);
}

summary>* {
    display: inline;
}


.archive-img {
    width: 240px;
    height: auto;
}

.btn:active {
    transform: scale(0.98);
}

.btn,
[role=button] {
    min-width: 2rem;
    display: inline-block;
    margin-block: var(--size-4);
}

.btn,
[role=button] {
    background: var(--accent);
    color: var(--background);
    font-weight: var(--font-weight-7);
    font-size: var(--dw-font-size-fluid-00);
    letter-spacing: var(--font-letterspacing-3);
    padding-inline: .7em;
    padding-block: .8em;
    text-decoration: none;
    box-shadow: var(--shadow-3);
    border-radius: .4em;
    text-transform: uppercase;
}


.btn a:visited,
[role=button] a:visited {
    color: var(--background);
}


.btn:hover,
[role=button]:hover {
    color: var(--background);
}


.btn span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: .2s;
}


.btn span:after {
    content: "⯆";
    font-weight: var(--font-weight-0);
    position: absolute;
    opacity: 0;
    top: -.3rem;
    right: -1rem;
    transition: .2s;
}


.btn:hover span {
    padding-right: 2rem;
}


.btn:hover span:after {
    opacity: 1;
    right: 0;
}


.btn .go-out {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: .2s;
}


.btn .go-out:after {
    content: "⯈";
    font-weight: var(--font-weight-0);
    position: absolute;
    opacity: 0;
    top: -.2rem;
    right: -1rem;
    transition: .2s;
}


.btn:hover .go-out {
    padding-right: 2rem;
}


.btn:hover .go-out:after {
    opacity: 1;
    right: 0;
}


.btn .go-to-top {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: .2s;
}


.btn .go-to-top:after {
    content: "⯅";
    font-weight: var(--font-weight-0);
    position: absolute;
    opacity: 0;
    top: 0;
    right: -1rem;
    transition: .2s;
}


.btn:hover .go-to-top {
    padding-right: 2rem;
}


.btn:hover .go-to-top:after {
    opacity: 1;
    right: 0;
}


.round {
    border: .6rem solid var(--shade-1);
    border-radius: var(--radius-round);
}


.right {
    float: right;
}


.cta {
    background-color: var(--accent);
    color: var(--shade);
    padding: .5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
}


.cta:hover {
    background-color: var(--secondary);
    color: var(--shade);
}


form {
    width: 80%;
}


label {
    font-weight: bold;
    line-height: 0;
}


input[type=text],
input[type=email],
input[type=tel],
textarea,
select {
    width: 100%;
    padding: 1.2rem;
    margin: .8rem 0;
    display: inline-block;
    border: .15rem solid var(--accent);
    border-radius: .4rem;
    font-size: var(--dw-font-size-fluid-0);
    font-family: Karla, var(--font-sans);
}


textarea {
    height: 12rem;
}


button {
    border: 0;
    outline-color: transparent;
}


input[type=submit]:hover {
    background-color: var(--accent);
}


textarea::placeholder,
input::placeholder {
    font-size: var(--dw-font-size-fluid-0);
}


.contact-icon {
    position: relative;
    top: .5rem;
    display: inline-block;
    width: var(--size-7);
    height: var(--size-7);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-right: var(--size-2);
    background: var(--secondary);
}


.contact li {
    margin-inline: 0;
}


.contact li::marker {
    content: none;
}


.contact main li {
    list-style-type: none;
    position: relative;
    left: -1.2rem;
}


.home .contact li a {
    color: var(--text-inverse);
}


.telephone-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2H18C18.5523 2 19 2.44772 19 3V21C19 21.5523 18.5523 22 18 22H6C5.44772 22 5 21.5523 5 21V0H7V2ZM7 9H17V4H7V9ZM7 11V20H17V11H7Z'%3E%3C/path%3E%3C/svg%3E");
}


.email-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM20 7.23792L12.0718 14.338L4 7.21594V19H20V7.23792ZM4.51146 5L12.0619 11.662L19.501 5H4.51146Z'%3E%3C/path%3E%3C/svg%3E");
}


.website-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z'%3E%3C/path%3E%3C/svg%3E");
}


.home-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 19.9997C21 20.552 20.5523 20.9997 20 20.9997H4C3.44772 20.9997 3 20.552 3 19.9997V9.48882C3 9.18023 3.14247 8.88893 3.38606 8.69947L11.3861 2.47725C11.7472 2.19639 12.2528 2.19639 12.6139 2.47725L20.6139 8.69947C20.8575 8.88893 21 9.18023 21 9.48882V19.9997ZM19 18.9997V9.97791L12 4.53346L5 9.97791V18.9997H19Z'%3E%3C/path%3E%3C/svg%3E");
}


.map-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 23.7279L5.63604 17.364C2.12132 13.8492 2.12132 8.15076 5.63604 4.63604C9.15076 1.12132 14.8492 1.12132 18.364 4.63604C21.8787 8.15076 21.8787 13.8492 18.364 17.364L12 23.7279ZM16.9497 15.9497C19.6834 13.2161 19.6834 8.78392 16.9497 6.05025C14.2161 3.31658 9.78392 3.31658 7.05025 6.05025C4.31658 8.78392 4.31658 13.2161 7.05025 15.9497L12 20.8995L16.9497 15.9497ZM12 13C10.8954 13 10 12.1046 10 11C10 9.89543 10.8954 9 12 9C13.1046 9 14 9.89543 14 11C14 12.1046 13.1046 13 12 13Z'%3E%3C/path%3E%3C/svg%3E");
}


.eat-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.2683 12.1466L13.4147 13.0002L20.4858 20.0712L19.0716 21.4854L12.0005 14.4144L4.92946 21.4854L3.51525 20.0712L12.854 10.7324C12.2664 9.27549 12.8738 7.17715 14.4754 5.57554C16.428 3.62292 19.119 3.14805 20.4858 4.51488C21.8526 5.88172 21.3778 8.57267 19.4251 10.5253C17.8235 12.1269 15.7252 12.7343 14.2683 12.1466ZM4.22235 3.80777L10.9399 10.5253L8.11144 13.3537L4.22235 9.46463C2.66026 7.90253 2.66026 5.36987 4.22235 3.80777ZM18.0109 9.11107C19.2682 7.85386 19.5274 6.38488 19.0716 5.92909C18.6158 5.47331 17.1468 5.73254 15.8896 6.98975C14.6324 8.24697 14.3732 9.71595 14.829 10.1717C15.2847 10.6275 16.7537 10.3683 18.0109 9.11107Z'%3E%3C/path%3E%3C/svg%3E");
}


.stay-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 11V20H20V17H4V20H2V4H4V14H12V7H18C20.2091 7 22 8.79086 22 11ZM20 14V11C20 9.89543 19.1046 9 18 9H14V14H20ZM8 11C8.55228 11 9 10.5523 9 10C9 9.44772 8.55228 9 8 9C7.44772 9 7 9.44772 7 10C7 10.5523 7.44772 11 8 11ZM8 13C6.34315 13 5 11.6569 5 10C5 8.34315 6.34315 7 8 7C9.65685 7 11 8.34315 11 10C11 11.6569 9.65685 13 8 13Z'%3E%3C/path%3E%3C/svg%3E");
}


@font-face {
    font-family: "DM Serif Display";
    font-style: normal;
    font-display: block;
    src: url(/font/DM-serif-display.woff2);
    font-weight: 100 900;
    font-weight: 200 800;
    unicode-range: U+000D, U+0020-007E, U+00A0-00FF, U+0102, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+2215;
}


@font-face {
    font-style: normal;
    font-display: block;
    src: url(/font/Karla.woff2);
    font-weight: 200 800;
    unicode-range: U+000D, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+2215;
}


body {
    font-family: Karla, var(--font-sans);
    font-size: var(--font-size-4);
}


H1,
H2,
H3,
H4,
H5,
H6 {
    font-weight: var(--font-weight-8);
    font-family: "DM Serif Display", var(--font-serif);
    text-wrap: balance;
}


H1 span {
    font-family: Karla, var(--font-sans);
    font-size: var(--font-size-2);
    text-transform: uppercase;
    display: block;
    line-height: var(--font-lineheight-5);
    font-weight: 700;
}


@media screen and (max-width:991px) {
    H1 span {
        display: none;
    }
}


H1 {
    font-size: var(--dw-font-size-fluid-5);
    line-height: var(--font-lineheight-1);
}


.tac {
    text-align: center;
}


H2 {
    font-size: var(--dw-font-size-fluid-4);
    margin-bottom: 1.2rem;
}


H3 {
    font-size: var(--dw-font-size-fluid-3);
}


H4 {
    font-size: var(--dw-font-size-fluid-2);
}


H5 {
    font-size: var(--dw-font-size-fluid-1);
    line-height: var(--font-lineheight-1);
}


H6 {
    font-size: var(--dw-font-size-fluid-0);
    line-height: var(--font-lineheight-1);
}


p {
    font-size: var(--dw-font-size-fluid-0);
    line-height: var(--font-lineheight-3);
    max-width: 75ch;
}


blockquote h4 {
    margin-block: .8rem;
}


figure h5 {
    margin-block: .8rem;
}


.menu-modal p {
    color: var(--text);
}


article h1 {
    margin-block-end: 4rem;
}


strong {
    font-weight: var(--font-weight-7);
}


a {
    color: var(--text);
    text-decoration-color: var(--accent);
    text-decoration-thickness: .1rem;
    text-decoration-style: solid;
    text-underline-offset: .4rem;
}


a:hover {
    text-decoration-thickness: .15rem;
}


a:active {
    position: relative;
    top: .05rem;
}


small {
    font-size: 1.4rem;
}


.vertical {
    writing-mode: vertical-rl;
    inline-size: 20rem;
    float: left;
}


ul {
    padding: 0;
}


li {
    margin-left: var(--size-8);
    line-height: var(--font-lineheight-2);
    margin-bottom: var(--size-2);
    font-size: var(--dw-font-size-fluid-0);
}


.hero li {
    margin-bottom: 1.2rem;
}


main li {
    padding-left: 1rem;
}


main li::marker {
    color: var(--text);
    font-size: 1.2rem;
    content: '⬤';
}


hr {
    border: 0;
    border-top: .6rem solid;
    color: var(--secondary);
    width: clamp(15rem, 30vw + 1rem, 60rem);
    margin: 0;
}


.alt-hr {
    border: 0;
    border-top: .6rem solid;
    color: hsla(0, 0%, 100%, .40);
    width: clamp(20rem, 30vw, 30rem);
    margin: 0;
}


blockquote {
    padding: 1rem;
    line-height: 1.4;
    color: var(--text);
    padding-inline-start: 2em;
    background-color: var(--shade);
    border-left: .2em solid;
    border-color: var(--accent);
    margin-left: 0;
    max-width: 70ch;
}


.getting blockquote {
    padding: .6rem;
    color: var(--text);
    margin-block: .3rem;
    border-left: .2em solid;
    border-color: transparent;
    max-width: 50ch;
}


::selection {
    background-color: var(--shade);
    color: var(--accent);
}


footer h3 {
    text-decoration-line: underline;
    text-decoration-color: var(--secondary);
    text-decoration-thickness: .5rem;
    text-decoration-style: solid;
    text-underline-offset: 1.5rem;
}


footer ul,
footer li {
    list-style-type: none;
    list-style-position: inside;
    margin: 0;
    padding: 0 0 .5rem 0;
}


.team section li {
    margin: 0rem;
}

 .sitemap {
  display: grid;
   gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(40ch, 1fr));
    }

   .sitemap-page  main section {
     padding: 5%;
     background-color: var(--shade);
     border-radius: 1.2rem;
     margin-bottom: 2rem;
    }

    .sitemap-page h1 {text-align:center;  margin-bottom:3%;}

   .team {
      display: grid;
      gap:3rem;
      grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
      margin-bottom:5%;   
      text-align:center; 
      padding-inline:10%;    
    }

    .team-page h1 {text-align:center;  margin-bottom:3%;}
    .team h2{font-size: 2.4rem; }
   
   .team IMG:hover{
	filter: brightness(70%);
	transition: all 0.4s ease-in-out;
}
  .team-page  li{
      list-style-type: none;
      font-size:18px;
    }  

 .team-page li::marker {
        content: none;
}

  @media screen and (min-width: 992px) {
div.ad{  
display: grid;
grid-template-columns: 1fr 1fr; 
align-items: end; 
}  
  }

  @media screen and (max-width: 991px) {
.ad {  
display: grid;
justify-content: center; 
}  
.ad section img{
display: none;
}

  }

.ad {
background-color:var(--brand);
color:white;
padding: 0rem 2rem ;
margin: 0;
}

.ad section img{
width: clamp(5rem, 40vw, 100%);
margin:0 auto;
}

ad-title{ 
color:white;
font-family:DM serif, serif;
font-weight:800;
font-size: 2.2rem;
display:block;
margin:1rem 0;
}
.ad small{
color:white;
}
.thanks .img-bg-1{
    display: grid;
    justify-self: center;
}