@font-face {
    font-family: "Racing Sans One";
    src: url("/fonts/RacingSansOne-Regular.ttf") format("truetype");
    font-display: swap;
}

:root {
    --nn-yellow: #fcd203;
    --nn-yellow-light: #fffAE6;
    --nn-black: #000000;
    --nn-dark: #222227;
    --nn-gray: #7e7a7f;
    --nn-dark-grey: #4C4A50;
    --nn-light-gray: #d1d3d8;
    --nn-white: #ffffff;
    --site-width: 1320px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--nn-black);
    background: #181818;
}

.site-shell {
    width: 100%;
    max-width: var(--site-width);
    margin: 0 auto;
    background: var(--nn-white);
    overflow: hidden;
}



/* header */

.site-header {
    position: relative;
    background: var(--nn-black);
}

.hero-visual {
    position: relative;
}

.hero-image {
    display: block;
    width: 100%;
    height: auto;
}

.hero-qr {
    position: absolute;
    top: 49.2%;
    right: 19.1%;
    width: 11.2%;
    height: auto;
}



/* navigation */

.main-nav {
    position: absolute;
    left: 16.5%;
    bottom: 0;
    width: 40%;
    height: clamp(26px, 2.54vw, 34px);
}

.main-nav-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin: 0;
}

.main-nav a {
    color: var(--nn-black);
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: clamp(14px, 1.52vw, 20px);
    line-height: 1;
    font-style: italic;
    font-weight: 600;
}

    .main-nav a:hover {
        opacity: 0.7;
    }

    .main-nav a.active {
        color: var(--nn-gray);
    }



/* content */

.page-section {
    padding: 60px 70px;
}

.content-width {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.section-yellow {
    padding: 30px 70px;
    background: var(--nn-yellow);
}

.section-white {
    padding: 30px 70px;
    background: var(--nn-white);
}

    .section-yellow h1,
    .section-white h1 {
        margin-bottom: 15px;
    }

    .section-yellow h2,
    .section-white h2 {
        text-align: center;
    }

h1,
h2,
h3 {
    margin-top: 0;
    font-family: "Racing Sans One", Arial, sans-serif;
}

h1 {
    font-size: clamp(32px, 4.1vw, 54px);
    font-weight: 500;
    line-height: 1;
    text-align: center;
}

h2 {
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 500;
}

p,
li {
    font-size: 18px;
}



/* intro */

.intro-heading {
    max-width: 1050px;
    margin: 0 auto 50px;
    text-align: center;
}

    .intro-heading p {
        max-width: 1050px;
        margin: 0 auto;
    }

.intro-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
}

.intro-lead {
    max-width: 1050px;
    margin: 0 auto;
    font-size: clamp(22px, 2.13vw, 28px);
    letter-spacing: 0.5px;
    line-height: 1.2;
    text-align: center;
}

.intro-image img {
    display: block;
    width: 100%;
    height: auto;
}

.intro-text {
    font-size: clamp(18px, 1.82vw, 24px);
    line-height: 1.2;
    color: var(--nn-gray);
}

.intro-contact {
    padding-top: 1rem;
    text-align: center;
}



/* why */

.why-list li {
    font-size: clamp(18px, 1.82vw, 24px);
    line-height: 1.2;
}



/* for who */

.for-text {
    font-size: clamp(18px, 1.82vw, 24px);
    line-height: 1.2;
    text-align: center;
}



/* contact button */

.contact-button-floating {
    position: fixed;
    right: max(-7px, calc((100vw - var(--site-width)) / 2 - 7px));
    bottom: 28px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 28px;
    background: var(--nn-black);
    color: var(--nn-white);
    border: 4px solid var(--nn-yellow);
    border-right: 0;
    border-radius: 999px 0 0 999px;
    font-family: "Racing Sans One", Arial, sans-serif;
    font-size: clamp(28px, 3.2vw, 42px);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, bottom 0.2s ease;
}

    .contact-button-floating:hover {
        transform: translateY(-2px);
        box-shadow: 0 7px 22px rgba(0, 0, 0, 0.3);
    }

    .contact-button-floating.is-above-footer {
        bottom: 120px;
    }

.contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 260px;
    min-height: 52px;
    padding: 8px 32px;
    background: var(--nn-black);
    color: var(--nn-white);
    border: 5px solid var(--nn-yellow);
    border-radius: 999px;
    font-family: "Racing Sans One", Arial, sans-serif;
    font-size: 26px;
    line-height: 1;
    text-decoration: none;
}



/* footer */

.site-footer {
    position: relative;
    margin-top: 10px;
    padding: 50px 65px;
    background: var(--nn-black);
    color: var(--nn-white);
}

    .site-footer > .contact-button {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.footer-logo img {
    display: block;
    width: clamp(130px, 14vw, 185px);
    height: auto;
}

.footer-text {
    font-size: clamp(18px, 1.82vw, 24px);
}





/* contact modal */

.contact-modal {
    width: min(560px, calc(100% - 32px));
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: var(--nn-white);
    color: var(--nn-black);
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

    .contact-modal::backdrop {
        background: rgba(0, 0, 0, 0.65);
        backdrop-filter: blur(3px);
    }

.contact-modal-header {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 32px 24px;
    background: var(--nn-yellow);
}

    .contact-modal-header h2 {
        margin: 0;
        text-align: left;
        font-size: clamp(30px, 3vw, 40px);
        line-height: 1;
    }

.contact-modal-close {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--nn-black);
    color: var(--nn-white);
    font-family: Arial, sans-serif;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.contact-modal-body {
    padding: 30px 32px 34px;
    font-size: clamp(18px, 1.82vw, 24px);
}

.contact-modal-intro {
    margin: 0 0 26px;
    color: var(--nn-dark-grey);
    font-size: 17px;
    line-height: 1.4;
}



/* contact fields */

.contact-field {
    margin-bottom: 20px;
}

    .contact-field label {
        display: block;
        margin-bottom: 7px;
        font-weight: 700;
        font-size: 15px;
    }

    .contact-field input,
    .contact-field textarea {
        width: 100%;
        padding: 12px 14px;
        border: 2px solid var(--nn-light-gray);
        border-radius: 8px;
        background: var(--nn-white);
        color: var(--nn-black);
        font: inherit;
        font-size: 17px;
        outline: none;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .contact-field textarea {
        min-height: 130px;
        resize: vertical;
    }

        .contact-field input:focus,
        .contact-field textarea:focus {
            border-color: var(--nn-yellow);
            box-shadow: 0 0 0 3px rgba(252, 210, 3, 0.22);
        }



/* contact send */

.contact-modal-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 28px;
}

.contact-submit {
    min-width: 180px;
    padding: 11px 28px;
    border: 4px solid var(--nn-yellow);
    border-radius: 999px;
    background: var(--nn-black);
    color: var(--nn-white);
    font-family: "Racing Sans One", Arial, sans-serif;
    font-size: 21px;
    cursor: pointer;
}

    .contact-submit:hover {
        opacity: 0.85;
    }





/* contact page */

.contact-people-section .content-width {
    max-width: 1120px;
    margin: 0 auto;
}

.contact-people {
    max-width: 760px;
    margin-left: 118px;
    display: flex;
    flex-direction: column;
    gap: 72px;
}

.contact-person {
    display: flex;
    align-items: center;
    gap: 28px;
}

.contact-person-icon {
    width: 123px;
    height: 123px;
    flex: 0 0 123px;
}

    .contact-person-icon img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.contact-person-info {
    display: flex;
    flex-direction: column;
    padding-left: 0.5rem;
    padding-bottom: 5px;
    font-size: clamp(18px, 1.82vw, 24px);
    line-height: 1.1;
    letter-spacing: 1px;
}

    .contact-person-info h2 {
        margin: 0 0 4px;
        font-family: "Racing Sans One", Arial, sans-serif;
        font-size: clamp(32px, 4.1vw, 54px);
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0;
    }

.contact-person-title {
    margin-bottom: 2px;
}

.contact-person-info a {
    width: fit-content;
    color: var(--nn-black);
    text-decoration: none;
}

    .contact-person-info a:hover {
        text-decoration: underline;
    }



/* company contact */

.contact-company-section {
    margin-bottom: 3rem;
    text-align: center;
}

.contact-company-details {
    font-size: clamp(18px, 1.82vw, 24px);
    line-height: 1.3;
}

.contact-company-business-id {
    margin-top: 14px;
}





/* recommendation */

.recommendations-section {
    background: var(--nn-white);
    margin-bottom: 3rem;
}

.recommendation-item + .recommendation-item {
    border-top: 8px solid var(--nn-yellow);
}

.recommendation-content {
    padding-top: 65px;
    padding-bottom: 50px;
}

.recommendation {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.recommendation-label {
    color: var(--nn-yellow);
    font-family: "Racing Sans One", Arial, sans-serif;
    font-size: clamp(30px, 3.7vw, 48px);
    line-height: 1.25;
}

.recommendation-title {
    margin-bottom: 135px;
}

.recommendation-text {
    max-width: 800px;
    margin: 0 auto;
}

    .recommendation-text p {
        margin: 0;
        font-size: clamp(18px, 1.82vw, 24px);
        line-height: 1.4;
    }

.recommendation-author {
    margin-top: 135px;
}

    .recommendation-author h2 {
        margin: 0 0 3px;
        font-size: clamp(32px, 4.1vw, 54px);
        line-height: 1.25;
    }

    .recommendation-author div {
        font-size: clamp(18px, 1.82vw, 24px);
    }

.recommendation-image {
    width: 100%;
}

    .recommendation-image img {
        display: block;
        width: 100%;
        height: auto;
    }





/* mobile */

@media (max-width: 700px) {

    .hero-visual {
        aspect-ratio: 2047 / 804;
        overflow: hidden;
    }

    .hero-image {
        width: 100%;
    }

    .hero-qr {
        display: none;
    }


    /* navigation */

    .main-nav {
        position: static;
        width: 100%;
        height: 48px;
        padding: 0;
        background: var(--nn-yellow);
    }

    .main-nav-inner {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: center;
    }

    .main-nav a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        padding: 0 4px;
        font-size: 13px;
        text-align: center;
    }


    /* content */

    .page-section {
        padding: 40px 22px;
    }

    p,
    li {
        font-size: 16px;
    }


    /* intro */

    .intro-columns {
        grid-template-columns: 1fr;
        gap: 25px;
    }

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

    .intro-heading {
        margin-bottom: 30px;
    }


    /* contact page */

    .contact-people {
        margin-left: 0;
        gap: 38px;
    }

    .contact-person {
        align-items: flex-start;
        gap: 10px;
    }

    .contact-person-icon {
        width: 88px;
        height: 88px;
        flex-basis: 88px;
    }

    .contact-person-info h2 {
        font-size: 26px;
    }


    /* recommendation page */

    .recommendation-content {
        padding-top: 45px;
        padding-bottom: 35px;
    }

    .recommendation-title {
        margin-bottom: 30px;
    }

    .recommendation-author {
        margin-top: 35px;
    }

        .recommendation-author h2 {
            font-size: 32px;
        }


    /* buttons */

    .contact-button {
        min-width: 210px;
        min-height: 46px;
        font-size: 22px;
    }


    /* footer */

    .site-footer {
        padding: 50px 22px 25px;
    }

    .footer-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}