/* ==================================================
   REINA BEAUTY SALON
   MODERN HOMEPAGE
================================================== */


/* =========================
   VARIABLES
========================= */

.home-page {

    --reina-black: #171313;
    --reina-soft-black: #282222;

    --reina-pink: #d7a09b;
    --reina-pink-soft: #f4e7e5;
    --reina-pink-light: #fbf5f4;

    --reina-gold: #bf9955;
    --reina-gold-light: #e0c17c;

    --reina-white: #ffffff;
    --reina-cream: #fcfaf8;

    --reina-grey: #7c7373;
    --reina-line: rgba(23, 19, 19, 0.12);

    background:
        var(--reina-cream);

    color:
        var(--reina-black);

    font-family:
        "DM Sans",
        sans-serif;

}


/* =========================
   TYPOGRAPHY
========================= */

.home-page h1,
.home-page h2,
.home-page h3,
.home-page p {
    margin-top: 0;
}


.home-page h1,
.home-page h2 {

    font-family:
        "Playfair Display",
        serif;

    font-weight: 500;

}


.home-page em {

    font-family:
        "Playfair Display",
        serif;

    font-weight: 500;

}


/* =========================
   HEADER
========================= */

.home-page .main-header {

    min-height: 84px;

    padding:
        0 6%;

    background:
        rgba(255, 255, 255, 0.94);

    backdrop-filter:
        blur(16px);

    border-bottom:
        1px solid rgba(20, 15, 15, 0.06);

}


.home-page .logo-img {

    height: 62px;

    max-width: 240px;

}


.home-page .main-nav {

    gap: 30px;

}


.home-page .main-nav a {

    position: relative;

    padding:
        8px 0;

    color:
        var(--reina-black);

    font-size: 13px;

    font-weight: 500;

    letter-spacing:
        0.02em;

    text-decoration: none;

}


.home-page .main-nav a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 2px;

    width: 0;
    height: 1px;

    background:
        var(--reina-gold);

    transition:
        width 0.3s ease;

}


.home-page .main-nav a:hover::after {

    width: 100%;

}


/* =========================
   GLOBAL CONTAINER
========================= */

.home-section-container {

    width:
        min(1180px, calc(100% - 48px));

    margin:
        0 auto;

}


/* =========================
   SMALL LABEL
========================= */

.section-label,
.home-eyebrow {

    font-size: 11px;

    font-weight: 600;

    letter-spacing:
        0.22em;

    text-transform: uppercase;

}


.section-number {

    color:
        var(--reina-gold);

    font-size: 11px;

    letter-spacing:
        0.12em;

}


/* =========================
   HERO
========================= */

.home-hero {

    position: relative;

    min-height:
        calc(100vh - 84px);

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            120deg,
            #211b1b,
            #3a2b2c
        );

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

}


.home-hero::after {

    content: "";

    position: absolute;

    top: -150px;
    right: -120px;

    width: 430px;
    height: 430px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius:
        50%;

}


.home-hero-inner {

    position: relative;

    z-index: 2;

    width:
        min(1180px, calc(100% - 48px));

    margin:
        0 auto;

    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

}


.home-hero-content {

    width:
        min(720px, 75%);

    padding:
        100px 0;

}


.home-eyebrow {

    display: inline-block;

    margin-bottom:
        26px;

    color:
        var(--reina-gold-light);

}


.home-hero h1 {

    margin-bottom:
        28px;

    color:
        white;

    font-size:
        clamp(54px, 7vw, 94px);

    line-height:
        0.98;

    letter-spacing:
        -0.045em;

}


.home-hero h1 span {

    display: block;

    margin-top:
        10px;

    color:
        #f2d7d2;

    font-style: italic;

}


.home-hero-description {

    max-width:
        610px;

    margin-bottom:
        38px;

    color:
        rgba(255, 255, 255, 0.76);

    font-size:
        17px;

    font-weight:
        300;

    line-height:
        1.8;

}


.home-hero-actions {

    display: flex;

    align-items: center;

    gap: 34px;

}


/* =========================
   PRIMARY BUTTON
========================= */

.home-primary-button {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content:
        space-between;

    gap:
        35px;

    min-width:
        255px;

    padding:
        17px 21px 17px 24px;

    overflow: hidden;

    background:
        var(--reina-white);

    border:
        1px solid var(--reina-white);

    border-radius:
        100px;

    color:
        var(--reina-black);

    font-size:
        13px;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        color 0.35s ease,
        box-shadow 0.35s ease;

}


.home-primary-button::before {

    content: "";

    position: absolute;

    inset: 0;

    transform:
        translateX(-101%);

    background:
        var(--reina-pink);

    transition:
        transform 0.4s ease;

}


.home-primary-button span {

    position: relative;

    z-index: 2;

}


.home-primary-button:hover {

    transform:
        translateY(-3px);

    color:
        white;

    border-color:
        var(--reina-pink);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.18);

}


.home-primary-button:hover::before {

    transform:
        translateX(0);

}


.button-arrow {

    width: 35px;
    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(20, 15, 15, 0.18);

    border-radius:
        50%;

    transition:
        transform 0.35s ease;

}


.home-primary-button:hover
.button-arrow {

    transform:
        rotate(-35deg);

    border-color:
        rgba(255, 255, 255, 0.45);

}


/* =========================
   SIMPLE TEXT LINK
========================= */

.home-text-link {

    position: relative;

    color:
        white;

    font-size:
        13px;

    font-weight:
        500;

    text-decoration:
        none;

}


.home-text-link::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 100%;
    height: 1px;

    background:
        rgba(255, 255, 255, 0.6);

    transform-origin:
        right;

    transition:
        transform 0.3s ease;

}


.home-text-link:hover::after {

    transform:
        scaleX(0);

}


/* =========================
   HERO SIDE
========================= */

.hero-side-note {

    margin-bottom:
        110px;

    display: flex;

    align-items: center;

    gap: 18px;

    color:
        rgba(255, 255, 255, 0.6);

    transform:
        rotate(-90deg)
        translateX(50%);

    transform-origin:
        right bottom;

}


.hero-side-note span {

    color:
        var(--reina-gold-light);

    font-size:
        11px;

}


.hero-side-note p {

    margin:
        0;

    font-size:
        11px;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;

}


/* =========================
   HERO SCROLL
========================= */

.hero-scroll {

    position: absolute;

    z-index: 2;

    bottom:
        28px;

    left:
        6%;

    display: flex;

    align-items: center;

    gap: 14px;

    color:
        rgba(255, 255, 255, 0.5);

    font-size:
        9px;

    letter-spacing:
        0.25em;

}


.scroll-line {

    width:
        60px;

    height:
        1px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.25);

}


.scroll-line::after {

    content: "";

    display: block;

    width:
        24px;

    height:
        1px;

    background:
        white;

    animation:
        reina-scroll 2s
        infinite ease-in-out;

}


@keyframes reina-scroll {

    0% {
        transform:
            translateX(-24px);
    }

    100% {
        transform:
            translateX(62px);
    }

}


/* =========================
   INTRO
========================= */

.home-intro {

    padding:
        140px 0;

    background:
        var(--reina-cream);

}


.intro-small {

    display: flex;

    gap:
        20px;

    margin-bottom:
        60px;

}


.intro-main {

    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(300px, 0.7fr);

    gap:
        90px;

    align-items:
        end;

}


.intro-main h2 {

    margin:
        0;

    max-width:
        760px;

    font-size:
        clamp(46px, 5vw, 74px);

    line-height:
        1.05;

    letter-spacing:
        -0.04em;

}


.intro-main h2 em {

    display: block;

    color:
        var(--reina-pink);

}


.intro-copy p {

    color:
        var(--reina-grey);

    font-size:
        15px;

    line-height:
        1.85;

}


.intro-copy
.intro-signature {

    margin-top:
        28px;

    color:
        var(--reina-black);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        20px;

    font-style:
        italic;

}


/* =========================
   SERVICES
========================= */

.home-services {

    padding:
        130px 0;

    background:
        var(--reina-white);

}


.home-section-heading {

    display: grid;

    grid-template-columns:
        0.8fr 1.4fr;

    gap:
        60px;

    align-items:
        end;

    margin-bottom:
        80px;

}


.home-section-heading > div,
.experience-heading > div {

    display: flex;

    gap:
        18px;

}


.home-section-heading h2 {

    margin:
        0;

    font-size:
        clamp(42px, 5vw, 64px);

    line-height:
        1.08;

}


.modern-services-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

}


.modern-service {

    position: relative;

    min-height:
        390px;

    padding:
        36px;

    display: flex;

    flex-direction: column;

    justify-content:
        space-between;

    border-top:
        1px solid var(--reina-line);

    border-right:
        1px solid var(--reina-line);

    transition:
        background 0.4s ease,
        transform 0.4s ease;

}


.modern-service:first-child {

    border-left:
        1px solid var(--reina-line);

}


.modern-service:hover {

    z-index: 2;

    transform:
        translateY(-10px);

    background:
        var(--reina-pink-light);

}


.service-top {

    display: flex;

    justify-content:
        space-between;

    color:
        var(--reina-grey);

    font-size:
        11px;

}


.service-symbol {

    color:
        var(--reina-gold);

    font-size:
        18px;

    transition:
        transform 0.45s ease;

}


.modern-service:hover
.service-symbol {

    transform:
        rotate(90deg);

}


.service-content h3 {

    margin-bottom:
        18px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        42px;

    font-weight:
        500;

}


.service-content p {

    max-width:
        270px;

    margin:
        0;

    color:
        var(--reina-grey);

    font-size:
        14px;

    line-height:
        1.8;

}


.service-line {

    width:
        42px;

    height:
        1px;

    background:
        var(--reina-gold);

    transition:
        width 0.4s ease;

}


.modern-service:hover
.service-line {

    width:
        100%;

}


/* =========================
   QUOTE
========================= */

.home-quote {

    position: relative;

    overflow: hidden;

    padding:
        150px 24px;

    background:
        var(--reina-soft-black);

    color:
        white;

    text-align:
        center;

}


.quote-decoration {

    position: absolute;

    top:
        -110px;

    left:
        50%;

    transform:
        translateX(-50%);

    color:
        rgba(255, 255, 255, 0.035);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        500px;

    line-height:
        1;

}


.home-quote blockquote {

    position: relative;

    z-index: 2;

    max-width:
        950px;

    margin:
        0 auto 35px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(39px, 5vw, 68px);

    font-weight:
        500;

    line-height:
        1.18;

}


.home-quote blockquote em {

    display: block;

    color:
        #efc9c4;

}


.quote-caption {

    position: relative;

    z-index: 2;

    color:
        var(--reina-gold-light);

    font-size:
        10px;

    letter-spacing:
        0.24em;

}


/* =========================
   EXPERIENCE
========================= */

.home-experience {

    padding:
        130px 0;

    background:
        var(--reina-pink-light);

}


.experience-heading {

    display: grid;

    grid-template-columns:
        0.8fr 1.4fr;

    gap:
        60px;

    margin-bottom:
        75px;

}


.experience-heading h2 {

    margin:
        0;

    font-size:
        clamp(44px, 5vw, 66px);

}


.experience-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        24px;

}


.experience-item {

    padding:
        34px 0;

    border-top:
        1px solid rgba(20, 15, 15, 0.16);

}


.experience-item > span {

    color:
        var(--reina-gold);

    font-size:
        11px;

}


.experience-item h3 {

    margin:
        45px 0 18px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        30px;

    font-weight:
        500;

}


.experience-item p {

    max-width:
        300px;

    margin:
        0;

    color:
        var(--reina-grey);

    font-size:
        14px;

    line-height:
        1.7;

}


/* =========================
   FINAL CTA
========================= */

.home-final-cta {

    position: relative;

    min-height:
        680px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    padding:
        100px 24px;

    background:
        var(--reina-black);

    color:
        white;

    text-align:
        center;

}


.final-cta-decoration {

    position: absolute;

    left:
        50%;

    top:
        50%;

    transform:
        translate(-50%, -50%);

    color:
        rgba(255, 255, 255, 0.025);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(150px, 22vw, 360px);

    white-space:
        nowrap;

}


.final-cta-content {

    position: relative;

    z-index: 2;

    max-width:
        850px;

}


.final-cta-content
.section-label {

    color:
        var(--reina-gold-light);

}


.final-cta-content h2 {

    margin:
        28px 0 42px;

    font-size:
        clamp(48px, 6vw, 82px);

    line-height:
        1.05;

    letter-spacing:
        -0.04em;

}


.final-cta-content h2 em {

    display: block;

    color:
        #efc9c4;

}


.final-button {

    margin:
        0 auto;

}


/* =========================
   ACCOUNT SHORTCUT
========================= */

.home-account-shortcut {

    padding:
        45px 0;

    background:
        var(--reina-pink-soft);

}


.account-shortcut-inner {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap:
        40px;

}


.account-shortcut-inner h3 {

    margin:
        8px 0 0;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        30px;

    font-weight:
        500;

}


.dark-link {

    color:
        var(--reina-black);

}


.dark-link::after {

    background:
        var(--reina-black);

}


/* =========================
   FOOTER
========================= */

.modern-footer {

    padding:
        90px 6% 30px;

    background:
        #111010;

    color:
        white;

}


.modern-footer-inner {

    max-width:
        1180px;

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        1fr 1.4fr;

    gap:
        80px;

    padding-bottom:
        75px;

}


.footer-brand h3 {

    margin:
        0 0 14px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        42px;

    font-weight:
        500;

}


.footer-brand p {

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.55);

    font-size:
        13px;

    letter-spacing:
        0.08em;

}


.footer-info {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        30px;

}


.footer-info span {

    display: block;

    margin-bottom:
        12px;

    color:
        var(--reina-gold-light);

    font-size:
        9px;

    letter-spacing:
        0.2em;

}


.footer-info p {

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.72);

    font-size:
        13px;

    line-height:
        1.6;

}


.footer-bottom {

    max-width:
        1180px;

    margin:
        0 auto;

    padding-top:
        25px;

    display: flex;

    justify-content:
        space-between;

    gap:
        20px;

    border-top:
        1px solid rgba(255, 255, 255, 0.1);

    color:
        rgba(255, 255, 255, 0.35);

    font-size:
        10px;

    letter-spacing:
        0.08em;

}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 900px) {

    .home-page .main-header {

        min-height:
            72px;

        padding:
            0 20px;

    }


    .home-page .logo-img {

        height:
            50px;

    }


    .home-hero {

        min-height:
            calc(100vh - 72px);

    }


    .home-hero-content {

        width:
            90%;

    }


    .hero-side-note {

        display:
            none;

    }


    .intro-main {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .home-section-heading,
    .experience-heading {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .modern-services-grid {

        grid-template-columns:
            1fr;

    }


    .modern-service {

        min-height:
            280px;

        border-left:
            1px solid var(--reina-line);

    }


    .experience-grid {

        grid-template-columns:
            1fr;

    }


    .modern-footer-inner {

        grid-template-columns:
            1fr;

    }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .home-section-container {

        width:
            calc(100% - 36px);

    }


    .home-page .logo-img {

        height:
            44px;

        max-width:
            180px;

    }


    .home-hero {

        min-height:
            680px;

        background-position:
            58% center;

    }


    .home-hero-inner {

        width:
            calc(100% - 36px);

    }


    .home-hero-content {

        width:
            100%;

        padding:
            80px 0 105px;

    }


    .home-hero h1 {

        font-size:
            52px;

        line-height:
            1;

    }


    .home-hero-description {

        font-size:
            15px;

        line-height:
            1.7;

    }


    .home-hero-actions {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            26px;

    }


    .home-primary-button {

        min-width:
            250px;

    }


    .hero-scroll {

        left:
            18px;

    }


    .home-intro,
    .home-services,
    .home-experience {

        padding:
            90px 0;

    }


    .intro-small {

        margin-bottom:
            40px;

    }


    .intro-main h2 {

        font-size:
            48px;

    }


    .home-section-heading {

        margin-bottom:
            50px;

    }


    .home-section-heading h2,
    .experience-heading h2 {

        font-size:
            46px;

    }


    .modern-service {

        min-height:
            260px;

        padding:
            28px;

    }


    .service-content h3 {

        font-size:
            38px;

    }


    .home-quote {

        padding:
            110px 20px;

    }


    .home-quote blockquote {

        font-size:
            42px;

    }


    .experience-heading {

        margin-bottom:
            45px;

    }


    .home-final-cta {

        min-height:
            620px;

        padding:
            90px 18px;

    }


    .final-cta-content h2 {

        font-size:
            49px;

    }


    .account-shortcut-inner {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .modern-footer {

        padding:
            70px 20px 25px;

    }


    .modern-footer-inner {

        gap:
            55px;

    }


    .footer-info {

        grid-template-columns:
            1fr;

        gap:
            28px;

    }


    .footer-bottom {

        flex-direction:
            column;

    }

}


/* =========================
   REDUCED MOTION
========================= */

@media (
    prefers-reduced-motion: reduce
) {

    .home-page *,
    .home-page *::before,
    .home-page *::after {

        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}