:root {
    /* New Lock and Keystone palette */
    --white: 255,255,255;
    --black: 31,26,29;
    --off-white: 248,244,234;
    --gold: 252,186,65;
    --off-black: 31,26,29;
    --yellow: 232,200,139;
    --red: 91,36,93;
    --yellow-dark: 190,142,24;
    --blueish-dark: 70,30,72;
    --blueish-light: 150,113,152;
    --blueish-light-alt: 124,157,166;
    --blueish: 91,36,93;
    --metal-gray-light: 239,231,214;
    --metal-gray-medium: 124,157,166;
    --metal-gray-dark: 63,95,99;
    --screen-blue-content: 31,95,99;
    --screen-red-content: 91,36,93;
    --screen-green-content: 63,125,61;
    --screen-yellow-content: 232,200,139;
    --teal: 31,95,99;
    --teal-light: 199,221,223;
    --brown: 232,200,139;
    --brown-light: 248,236,209;
    --brown-dark: 120,86,36;
}

* {
    margin: 0;
    padding: 0;
    font-family: "Patrick Hand", cursive;
}

body, html {
    background-color: rgba(var(--off-white), 1);
    overflow-x: hidden;
    margin: 0;        /* Ensure no outer margin */
    padding: 0;       /* Ensure no outer padding */
    height: 100%;     /* Helps with layout calculations */
}

button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Grandstander", cursive;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

p, button, input, a, li, span, label {
    font-family: "Patrick Hand", cursive;
    font-weight: 400;
    font-style: normal;
}

input {
    outline: none;
}

a {
    color: rgba(var(--blueish), 1);
}

section {
    margin: 9rem 0;
}

.button__default {
    display: inline-block;
    box-sizing: border-box;
    color: rgba(var(--white), 1);
    background-color: rgba(var(--blueish-light-alt), 1);
    font-size: 2rem;
    padding: 0.7rem 1.9rem 0.9rem 1.9rem;
    border-radius: 1rem;
    border: 0.2rem solid rgba(var(--off-black), 1);
    box-shadow: 0 0.5rem 0 0 rgba(var(--off-black), 1);
    text-decoration: none;
}

@media (hover:hover){
    .button__default:hover {
        background-color: rgba(var(--blueish), 1);
    }
}

.button__default:active {
    background-color: rgba(var(--blueish), 1);
    box-shadow: none;
    transform: translateY(0.5rem);
}

.logo-link {
    width: 15rem;
    position: absolute;
    left: 1rem;
    top: 1rem;
    cursor: pointer;
}

/* ---- */
/* hero */
/* ---- */

.hero {
    margin: 4rem 0 8rem 0;
}

.hero__container {
    width: 55rem;
    margin: 0 auto;
}

.hero__img {
    width: 60%;
    display: block;
    margin: 0rem auto 3.5rem auto;
}

.hero__container-info {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.2rem;
}

.hero__info-icon {
    width: 2.5rem;
    margin-right: 1rem;
    transform: rotate(-15deg);
    animation-name: pulse-small;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes pulse-small {
    0%   {transform: scale(0.9) rotate(-15deg);}
    50%  {transform: scale(1) rotate(-15deg);}
    100% {transform: scale(0.9) rotate(-15deg);}
}

.hero__info-h1 {
    font-size: 2rem;
    color: rgba(var(--off-black), 1);
    line-height: 100%;
    text-decoration: underline;
}

.hero__h2 {
    width: 29rem;
    text-align: center;
    margin: 0 auto;
    font-size: 1.5rem;
    color: rgba(var(--off-black), 1);
    line-height: 120%;
}

.hero__h2 > span {
    background-color: rgba(var(--gold), 1);
    padding: 0 0.3rem;
    border-radius: 0.1rem;
}

.hero__button {
    margin-top: 2.5rem;
    font-size: 2rem;
    padding: 0.7rem 1.5rem 0.9rem 1.5rem;
    border: 0.18rem solid rgba(var(--off-black), 1);
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ----- */
/* video */
/* ----- */

.video {
    position: relative;
}

.video__container {
    position: relative;
    width: 55rem;
    margin: 0 auto;
    left: -2rem;
}

.video__dialogue-container {
    position: absolute;
    right: -5%;
    width: 40%;
    z-index: 1;
    transform: rotate(5deg);
    transition: opacity 0.2s, transform 0.2s;
}

.video__dialogue-container--hidden {
    transform: translate(-10rem,10rem) rotate(5deg) scale(0.5);
    opacity: 0;
}

.video__dialogue-container--visible {
    transform: translate(0rem,0) rotate(5deg) scale(1);
    opacity: 1;
}

.video__dialogue {
    position: absolute;
    width: 100%;
    height: 100%;
}

.video__p {
    position: absolute;
    color: rgba(var(--white), 1);
    width: 80%;
    top: 26%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    line-height: 105%;
    user-select: none;
    font-size: 2rem;
}

.video__button-play {
    width: 19%;
    height: 35%;
    background-size: 99%;
    background-position: center center;
    background-repeat: no-repeat;
    border: none;
    position: absolute;
    bottom: -4%;
    right: 1%;
    z-index: 2;
    cursor: pointer;
}

.video__button-play--static {
    background-image: url("../assets/website/play-button-default.png");
}

.video__button-play--animated {
    background-image: url("../assets/website/play-button-hover.gif");
}

.video__button-play:active {
    background-image: url("../assets/website/play-button-active.png");
}

.video__img {
    display: block;
    margin: 0 auto;
    width: 100%;
    position: relative;
    pointer-events: none;
    background-image: url("../assets/website/Qcharacters.png");
    background-size: cover;
}

/* ----- */
/* links */
/* ----- */

.links__container {
    display: flex;
    width: 55rem;
    margin: 0 auto;
    justify-content: center;
}

.links__item {
    margin: 0 2rem;
    width: 25%;
}

.links__item:nth-of-type(1){
    margin-top: 0rem;
    transform: rotate(-2deg);
}

.links__item:nth-of-type(2){
    margin-top: 4rem;
}

.links__item:nth-of-type(3){
    margin-top: 8rem;
    transform: rotate(2deg);
}

.links__button {
    display: block;
    width: 100%;
    height: 100%;
}

#links__button-etsy{
    background-image: url("../assets/website/link-etsy.png");
    background-size: 99%;
    background-position: center;
    background-repeat: no-repeat;
}

@media (hover:hover){
    #links__button-etsy:hover{
        background-image: url("../assets/website/link-etsy-hover.png");
    }
}

#links__button-etsy:active{
    background-image: url("../assets/website/link-etsy-active.png");
}

#links__button-tpt{
    background-image: url("../assets/website/link-tpt.png");
    background-size: 99%;
    background-position: center;
    background-repeat: no-repeat;
}

@media (hover:hover){
    #links__button-tpt:hover{
        background-image: url("../assets/website/link-tpt-hover.png");
    }
}

#links__button-tpt:active{
    background-image: url("../assets/website/link-tpt-active.png");
}

#links__button-play{
    background-image: url("../assets/website/link-purchased.png");
    background-size: 99%;
    background-position: center;
    background-repeat: no-repeat;
}

@media (hover:hover){
    #links__button-play:hover{
        background-image: url("../assets/website/link-purchased-hover.png");
    }
}

#links__button-play:active{
    background-image: url("../assets/website/link-purchased-active.png");
}

.links__h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: rgba(var(--off-black), 1);
}

.links + .intro {
    margin-top: 12rem;
}

/* ---- */
/* info */
/* ---- */

.info__container {
    width: 60rem;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    justify-content: center;
    position: relative;
}

.info__item {
    width: 40%;
    margin: 5% 5%;
}

.info__h3 {
    color: rgba(var(--off-black), 1);
    font-size: 2rem;
    transform: rotate(-3deg);
    margin-bottom: 7%;
    text-decoration: underline;
}

.info__container-p {
    display: flex;
    width: 100%;
}

.hero__p-icon {
    width: 5rem;
    height: 5.6rem;
    margin-right: 4%;
}

.info__p {
    color: rgba(var(--off-black), 1);
    font-size: 1.5rem;
    width: 70%;
    line-height: 135%;
}

.info__p > span {
    background-color: rgba(var(--gold), 1);
    padding: 0 0.3rem;
    border-radius: 0.1rem;
}

.info__img-divider {
    width: 17%;
    left: 40%;
    top: 37%;
    position: absolute;
}

/* ------------ */
/* mailing-list */
/* ------------ */

.mailing-list {
    background-color: rgba(var(--teal-light), 1);
    padding: 0 1rem 6rem 1rem;
    margin-bottom: 0; /* Ensures no gap between it and the footer */
    border-top: 0.2rem solid rgba(var(--off-black), 1);
    width: 100vw;      /* Force 100% viewport width */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.mailing-list__container {
    width: 55rem;
    margin: -3rem auto 0 auto;
}

.mailing-list__img {
    width: 18%;
    margin: 0 auto;
    display: block;
    animation-name: pulse-elf;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    position: relative;
    left: -0.5rem;
    margin-bottom: 2rem;
}

@keyframes pulse-elf {
    0%   {transform: scale(0.9) rotate(-15deg);}
    50%  {transform: scale(1) rotate(-15deg);}
    100% {transform: scale(0.9) rotate(-15deg);}
}

.mailing-list__p {
    font-size: 1.4rem;
    color: rgba(var(--off-black), 1);
    text-align: center;
    margin: 0 auto 1.5rem auto;
    line-height: 125%;
    max-width: 38rem;
}

.mailing-list__card {
    background-color: rgba(var(--off-white), 1);
    border: 0.25rem solid rgba(var(--off-black), 1);
    border-radius: 1rem;
    box-shadow: 0.5rem 0.5rem 0 rgba(var(--off-black), 1);
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 44rem;
    padding: 2rem;
}

.mailing-list__eyebrow {
    color: rgba(var(--blueish), 1);
    font-family: "Grandstander", cursive;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    text-align: center;
    text-transform: uppercase;
}

.mailing-list__title {
    color: rgba(var(--off-black), 1);
    font-size: 2.2rem;
    line-height: 105%;
    margin: 0 auto 1rem auto;
    max-width: 38rem;
    text-align: center;
}

.mailing-list__form {
    display: grid;
    gap: 0.7rem;
    margin: 0 auto;
    max-width: 28rem;
}

.mailing-list__form label {
    color: rgba(var(--off-black), 1);
    font-size: 1.2rem;
}

.mailing-list__form input {
    background-color: rgba(var(--white), 1);
    border: 0.2rem solid rgba(var(--off-black), 1);
    border-radius: 0.7rem;
    box-sizing: border-box;
    color: rgba(var(--off-black), 1);
    font-size: 1.4rem;
    padding: 0.65rem 0.9rem;
    width: 100%;
}

.mailing-list__form button {
    background-color: rgba(var(--gold), 1);
    border: 0.2rem solid rgba(var(--off-black), 1);
    border-radius: 0.8rem;
    box-shadow: 0 0.35rem 0 0 rgba(var(--off-black), 1);
    color: rgba(var(--off-black), 1);
    font-size: 1.6rem;
    margin-top: 0.4rem;
    padding: 0.5rem 1rem 0.65rem 1rem;
}

@media (hover:hover){
    .mailing-list__form button:hover {
        background-color: rgba(var(--yellow), 1);
    }
}

.mailing-list__form button:active {
    box-shadow: none;
    transform: translateY(0.35rem);
}

.mailing-list__form button:disabled {
    cursor: wait;
    opacity: 0.7;
}

.mailing-list__fineprint {
    color: rgba(var(--off-black), 1);
    font-size: 1rem;
    line-height: 120%;
    margin: 0.4rem 0 0 0;
    text-align: center;
}

.mailing-list__message {
    color: rgba(var(--blueish), 1);
    font-size: 1.2rem;
    line-height: 120%;
    min-height: 1.5rem;
    text-align: center;
}

/* ------ */
/* footer */
/* ------ */

.footer-main {
    background-color: rgba(var(--teal-light), 1);
    position: relative;
    width: 100vw;      /* Force 100% viewport width */
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-bottom: 0;   /* Remove any potential bottom margin */
    padding: 0rem 3rem 1.5rem 3rem;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.footer__p {
    color: rgba(var(--white), 1);
    background-color: rgba(var(--off-black), 1);
    padding: 0rem 0.8rem;
    border-radius: 1rem;
    text-decoration: none;
    margin: 0.2rem 0.2rem;
    font-size: 1.2rem;
}

.footer__p:hover {
    color: rgba(var(--screen-yellow-content), 1);
}

.a__footer {
    text-decoration: none;
}

.company__container {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 15rem;
}

.company__explosion {
    width: 12rem;
    position: absolute;
    bottom: 0;
    right: 0;
}

.span--show-mobile {
    display: none;
}
/* --------------------------- */
/* intro + foundation sections */
/* --------------------------- */

.intro,
.foundation {
    position: relative;
}

.intro {
    margin-top: 7rem;
}

.intro .section__container,
.foundation .section__container {
    width: min(70rem, 92vw);
    margin: 0 auto;
}

.section__heading {
    text-align: center;
    max-width: 46rem;
    margin: 0 auto 3rem auto;
}

.section__eyebrow {
    display: inline-block;
    margin-bottom: 0.8rem;
    padding: 0.35rem 1rem 0.45rem 1rem;
    border-radius: 999px;
    background-color: rgba(var(--teal-light), 1);
    color: rgba(var(--blueish), 1);
    font-size: 1.1rem;
    line-height: 100%;
    border: 0.16rem solid rgba(var(--off-black), 1);
    box-shadow: 0 0.2rem 0 0 rgba(var(--off-black), 1);
}

.section__heading h2 {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    line-height: 105%;
    color: rgba(var(--off-black), 1);
    margin-bottom: 0.8rem;
}

.section__heading p {
    font-size: 1.35rem;
    line-height: 130%;
    color: rgba(var(--brown-dark), 1);
}

/* shared card grid */
.cards--two,
.foundation__grid {
    display: grid;
    gap: 1.5rem;
}

.cards--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.foundation__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* shared card styling */
.card {
    position: relative;
    background-color: rgba(var(--white), 0.9);
    border: 0.2rem solid rgba(var(--off-black), 1);
    border-radius: 1.4rem;
    padding: 1.7rem 1.5rem 1.5rem 1.5rem;
    box-shadow: 0 0.5rem 0 0 rgba(var(--off-black), 1);
    overflow: hidden;
}

.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.55rem;
    background: rgba(var(--teal-light));
}

.card h3 {
    font-size: 2rem;
    line-height: 105%;
    color: rgba(var(--blueish), 1);
    margin-bottom: 0.8rem;
}

.card p {
    font-size: 1.35rem;
    line-height: 130%;
    color: rgba(var(--off-black), 1);
}

.card strong {
    color: rgba(var(--blueish), 1);
}

/* give the intro cards a little identity */
.intro .card:nth-child(1) {
    transform: rotate(-1deg);
}

.intro .card:nth-child(2) {
    transform: rotate(1deg);
}

/* subtle hover polish */
@media (hover:hover) {
    .card {
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .card:hover {
        transform: translateY(-0.25rem);
        box-shadow: 0 0.7rem 0 0 rgba(var(--off-black), 1);
    }

    .intro .card:nth-child(1):hover {
        transform: rotate(-1deg) translateY(-0.25rem);
    }

    .intro .card:nth-child(2):hover {
        transform: rotate(1deg) translateY(-0.25rem);
    }
}

/* intro summary block */
.intro__summary {
    max-width: 54rem;
    margin: 2rem auto 0 auto;
    padding: 1.3rem 1.5rem 1.5rem 1.5rem;
    background-color: rgba(var(--gold), 0.16);
    border: 0.2rem dashed rgba(var(--off-black), 1);
    border-radius: 1.4rem;
    text-align: center;
}

.intro__summary p {
    font-size: 1.45rem;
    line-height: 135%;
    color: rgba(var(--off-black), 1);
}

.intro__summary strong {
    color: rgba(var(--blueish), 1);
}

/* foundation section gets a little more structure */
.foundation {
    background: linear-gradient(
        180deg,
        rgba(var(--teal-light), 0.18) 0%,
        rgba(var(--off-white), 0) 100%
    );
    padding: 1rem 0 0 0;
    border-radius: 2rem;
}

.foundation .card {
    min-height: 100%;
}

.foundation .card h3 {
    color: rgba(var(--teal), 1);
}

/* feedback showcase */
.feedback-showcase .section__container {
    width: min(70rem, 92vw);
    margin: 0 auto;
}

.feedback-carousel {
    display: grid;
    grid-template-columns: repeat(3, minmax(18rem, 1fr));
    gap: 1.5rem;
    overflow-x: auto;
    padding: 0.25rem 0 0.7rem 0;
    scroll-snap-type: x proximity;
}

.feedback-card {
    min-height: 17rem;
    padding: 1.5rem;
    border-radius: 1.5rem;
    border: 0.2rem solid rgba(var(--off-black), 1);
    box-shadow: 0 0.55rem 0 0 rgba(var(--off-black), 1);
    background-color: rgba(var(--white), 0.92);
    scroll-snap-align: start;
}

.feedback-card--placeholder {
    background: linear-gradient(180deg, rgba(var(--teal-light), 0.5) 0%, rgba(var(--white), 0.94) 100%);
}

.feedback-card--cta {
    background: linear-gradient(180deg, rgba(var(--gold), 0.34) 0%, rgba(var(--white), 0.94) 100%);
}

.feedback-card__tag {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.35rem 0.8rem 0.45rem 0.8rem;
    border-radius: 999px;
    background-color: rgba(var(--off-black), 1);
    color: rgba(var(--white), 1);
    font-size: 1rem;
    line-height: 100%;
}

.feedback-card__quote {
    font-size: 1.5rem;
    line-height: 130%;
    color: rgba(var(--off-black), 1);
    margin-bottom: 1.1rem;
}

.feedback-card__meta {
    font-size: 1.15rem;
    line-height: 130%;
    color: rgba(var(--brown-dark), 1);
}

.feedback-card__link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: underline;
    color: rgba(var(--blueish), 1);
}

/* feedback form */
.feedback-form-section .section__container,
.feedback-thanks .section__container {
    width: min(70rem, 92vw);
    margin: 0 auto;
}

.feedback-form {
    background-color: rgba(var(--white), 0.9);
    border: 0.2rem solid rgba(var(--off-black), 1);
    border-radius: 1.7rem;
    padding: 2rem;
    box-shadow: 0 0.6rem 0 0 rgba(var(--off-black), 1);
}

.feedback-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem 1.4rem;
    margin-bottom: 1.2rem;
}

.feedback-form__grid--bottom {
    align-items: start;
}

.feedback-form__field {
    display: flex;
    flex-direction: column;
}

.feedback-form__field--full {
    margin-bottom: 1.2rem;
}

.feedback-form label {
    font-size: 1.25rem;
    line-height: 120%;
    color: rgba(var(--off-black), 1);
    margin-bottom: 0.45rem;
}

.feedback-form input,
.feedback-form select,
.feedback-form textarea {
    width: 100%;
    box-sizing: border-box;
    border-radius: 0.9rem;
    border: 0.18rem solid rgba(var(--off-black), 1);
    background-color: rgba(var(--off-white), 0.94);
    color: rgba(var(--off-black), 1);
    font-size: 1.35rem;
    line-height: 130%;
    padding: 0.75rem 0.95rem;
}

.feedback-form textarea {
    resize: vertical;
    min-height: 10rem;
}

.feedback-form input[type="file"] {
    padding: 0.65rem 0.75rem;
    background-color: rgba(var(--teal-light), 0.35);
}

.feedback-form__help,
.feedback-form__note {
    font-size: 1.08rem;
    line-height: 135%;
    color: rgba(var(--brown-dark), 1);
}

.feedback-form__help {
    margin-top: 0.5rem;
}

.feedback-form__actions {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-top: 1.2rem;
}

.feedback-form__note {
    max-width: 38rem;
}

.feedback-form__submit {
    flex: 0 0 auto;
    white-space: nowrap;
}

.feedback-form__honey {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.feedback-thanks {
    min-height: calc(100vh - 10rem);
    display: flex;
    align-items: center;
}

.feedback-thanks__actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.feedback-thanks__button-secondary {
    background-color: rgba(var(--gold), 1);
}

/* responsive */
@media only screen and (max-width: 70rem) {
    .foundation__grid {
        grid-template-columns: 1fr;
    }

    .cards--two {
        grid-template-columns: 1fr;
    }

    .feedback-carousel {
        grid-template-columns: repeat(3, minmax(18rem, 75vw));
    }

    .feedback-form__grid {
        grid-template-columns: 1fr;
    }

    .feedback-form__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .intro .card:nth-child(1),
    .intro .card:nth-child(2) {
        transform: rotate(0deg);
    }
}

@media only screen and (max-width: 40rem) {
    .section__heading {
        margin-bottom: 2rem;
    }

    .section__eyebrow {
        font-size: 1rem;
        padding: 0.3rem 0.8rem 0.4rem 0.8rem;
    }

    .section__heading h2 {
        font-size: 2.2rem;
    }

    .card {
        padding: 1.3rem 1.1rem 1.2rem 1.1rem;
        border-radius: 1.1rem;
    }

    .card h3 {
        font-size: 1.7rem;
    }

    .card p,
    .intro__summary p {
        font-size: 1.2rem;
    }

    .feedback-card {
        min-height: 15rem;
        padding: 1.2rem;
    }

    .feedback-card__quote {
        font-size: 1.3rem;
    }

    .feedback-form {
        padding: 1.2rem;
        border-radius: 1.2rem;
    }

    .feedback-form input,
    .feedback-form select,
    .feedback-form textarea {
        font-size: 1.2rem;
    }
}
/* ---------- MOBILE ---------- */
/* ---------- MOBILE ---------- */
/* ---------- MOBILE ---------- */

@media only screen and (max-width: 60rem) {

    .button__default {
        border: 0.18rem solid rgba(var(--off-black), 1);
    }

    .hero__container {
        width: 86vw;
        margin: 0 auto;
        align-items: center;
    }

    .hero__img {
        width: 80%;
        max-width: 21.5rem;
        margin-top: -0.5rem;
    }

    .hero__container-info {
        margin: 0 auto 2rem auto;
        width: 80%;
        max-width: 21.5rem;
        position: relative;
    }

    .hero__info-icon {
        width: 3rem;
        height: 2.5rem;
        margin-right: 1.3rem;
    }

    .hero__info-h1 {
        line-height: 100%;
    }

    .hero__h2 {
        width: 80%;
        max-width: 21.5rem;
        margin: 0 auto;
        font-size: 1.5rem;
        line-height: 120%;
    }

    .hero__h2 > span {
        padding: 0 0.3rem;
        border-radius: 0.1rem;
    }

    .hero__button {
        font-size: 2rem;
        padding: 0.7rem 1.5rem 0.9rem 1.5rem;
        border: 0.18rem solid rgba(var(--off-black), 1);
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .video__container {
        width: 40rem;
        margin: 0 auto 6rem auto;
        float: right;
    }

    .video__dialogue-container {
        right: -5%;
    }

    .video__p {
        font-size: 1.5rem;
        margin-top: 1%;
    }

    .video__img {
        margin: 0;
        width: 100%;
        background-size: 100%;
        background-position: right center;
    }

    .video__button-play {
        right: 0.6rem;
    }

    .links__container {
        width: 90%;
        max-width: 28rem;
        flex-wrap: wrap;
        margin-top: -2rem;
    }

    .links__h3 {
        font-size: 1.5rem;
        margin-bottom: -1rem;
        text-align: center;
    }

    .links__item {
        margin: 4.5rem 1rem;
        width: 40%;
    }

    .links__item:nth-of-type(1){
        margin-top: 0;
        transform: rotate(0deg);
    }

    .links__item:nth-of-type(2){
        margin-top: 3rem;
        transform: rotate(0deg);
    }

    .links__item:nth-of-type(3){
        margin-top: 3rem;
        transform: rotate(0deg);
    }

    .links__button {
        margin: 0 auto;
        width: 100%;
        height: 200%;
    }

    .links + .intro {
        margin-top: 9rem;
    }

    .info {
        margin-top: -2rem;
        margin-bottom: -3.5rem;
    }

    .info__container {
        width: 80%;
        max-width: 26rem;
        margin: 0 auto;
    }

    .info__item {
        width: 100%;
        margin: 2.5rem 0;
    }

    .info__h3 {
        font-size: 2rem;
        margin-bottom: 3vw;
    }

    .hero__p-icon {
        width: 4rem;
        height: 4.5rem;
        margin-right: 1rem;
        margin-top: 0.3rem;
    }

    .info__p {
        width: 100%;
        font-size: 1.5rem;
    }

    .info__p > span {
        padding: 0 0.3rem;
    }

    .info__img-divider {
        display: none;
    }

    .mailing-list {
        border-top: 0.18rem solid rgba(var(--off-black), 1);
    }

    .mailing-list__container {
        width: 80vw;
    }

    .mailing-list__img {
        top: 0.5rem;
        width: 9rem;
    }

    .mailing-list__card {
        padding: 1.4rem;
    }

    .mailing-list__title {
        font-size: 1.8rem;
    }

    .mailing-list__p {
        font-size: 1.2rem;
    }

    .company__container {
        right: 0;
        bottom: 0;
        width: 15rem;
    }

    .company__p {
        font-size: 1.1rem;
        line-height: 100%;
        top: -4rem;
        right: 5.5rem;
    }

    .company__explosion {
        width: 10rem;
        bottom: 0;
        right: 0;
    }

    .span--hide-mobile {
        display: none;
    }

    .span--show-mobile {
        margin-top: -1.3rem;
        display: block;
    }
}

@media only screen and (max-width: 70rem) {
    .video__container {
        margin: 0 auto;
        float: none;
    }

    .logo-link {
        position: relative;
        display: block;
        margin: 1rem auto 0 auto;
        left: -0.25rem;
    }
}

@media only screen and (max-width: 40rem) {
    .video__container {
        float: right;
        margin-bottom: 6rem;
    }

    .hero__h2 > span {
        line-height: 160%;
    }
}

.ml-form-successContent {
    margin-top: 2rem;
    background-color: rgba(var(--off-white), 1);
    border: 0.2rem solid rgba(var(--off-black), 1);
    border-radius: 1rem;
    padding: 1.5rem 2rem 1.7rem 2rem;
}

.ml-form-successContent > h4 {
    color: rgba(var(--off-black), 1);
    font-size: 2rem;
    text-align: center;
}

.ml-form-successContent > p {
    color: rgba(var(--off-black), 1);
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 0.1rem;
}

.img-primary-tab {
    width: 30rem;
    max-width: 100%;
    margin-top: 1.5rem;
}

.video__youtube-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 55rem;
    height: 30.9rem;
    max-width: 80vw;
    max-height: 45vw
}

.iframe__wrapper {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    border: 0.2rem solid rgba(var(--off-black), 1);
    overflow: hidden;
    background-color: rgba(var(--off-black), 1);
}

iframe {
    width: 100%;
    height: 100%;
}

.video__blackout {
    position: fixed;
    z-index: 9;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: rgba(var(--off-black), 0.9);
    transition: opacity 0.2s;
}

.video__close {
    width: 4rem;
    height: 4.4rem;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    right: -2rem;
    top: -2rem;
    position: absolute;
    background-image: url("../assets/website/close-default.png");
    transition: opacity 0.2s;
}

.video__close:hover {
    background-image: url("../assets/website/close-hover.png");
}

.video__close:active {
    background-image: url("../assets/website/close-active.png");
}

.video__youtube-wrapper--hidden {
    opacity: 0;
    pointer-events: none;
}

.video__youtube-wrapper--visible {
    opacity: 1;
    pointer-events: auto;
}

.video__blackout--hidden {
    opacity: 0;
    pointer-events: none;
}

.video__blackout--visible {
    opacity: 1;
    pointer-events: auto;
}

.display--none {
    display: none;
}

.display--block {
    display: block;
}