/* =========================================================
   GLOBAL PAGE RESET
========================================================= */

html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
}

html {
    overflow-x: hidden;
}

body {
    min-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}
/* =========================================================
   SALON TEENA
   PREMIUM HERO SECTION
   BLACK • GOLD • DEEP RED
========================================================= */

.hero-section {
    position: relative;

    width: 100%;
    min-height: 100svh;

    display: flex;
    align-items: center;

    overflow: hidden;

    isolation: isolate;

    background: #080808;

    color: #ffffff;
}


/* =========================================================
   MAIN BACKGROUND
========================================================= */

.hero-bg {
    position: absolute;

    inset: -3%;

    z-index: -6;

    background-image:
        url('/assets/images/hero/salon-hero.jpg');

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    transform: scale(1.08);

    filter:
        saturate(0.82)
        contrast(1.08);

    animation:
        heroBackgroundZoom 18s
        cubic-bezier(.22,.61,.36,1)
        infinite alternate;

    will-change: transform;
}


/* =========================================================
   DARK OVERLAY
========================================================= */

.hero-overlay {
    position: absolute;

    inset: 0;

    z-index: -5;

    background:
        linear-gradient(
            90deg,
            rgba(5, 5, 5, 0.98) 0%,
            rgba(8, 8, 8, 0.93) 25%,
            rgba(8, 8, 8, 0.78) 48%,
            rgba(8, 8, 8, 0.48) 72%,
            rgba(8, 8, 8, 0.30) 100%
        );

    pointer-events: none;
}


/* =========================================================
   GOLD LIGHT
========================================================= */

.hero-section::before {
    content: '';

    position: absolute;

    z-index: -4;

    width: 750px;
    height: 750px;

    right: -250px;
    top: -230px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(212, 175, 55, 0.18) 0%,
            rgba(212, 175, 55, 0.08) 28%,
            rgba(139, 0, 0, 0.08) 48%,
            transparent 72%
        );

    filter: blur(12px);

    animation:
        heroLightMove 10s
        ease-in-out
        infinite alternate;

    pointer-events: none;
}


/* =========================================================
   RED LIGHT
========================================================= */

.hero-section::after {
    content: '';

    position: absolute;

    z-index: -4;

    width: 600px;
    height: 600px;

    left: -300px;
    bottom: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(139, 0, 0, 0.18) 0%,
            rgba(139, 0, 0, 0.08) 35%,
            transparent 72%
        );

    filter: blur(20px);

    animation:
        heroRedGlow 12s
        ease-in-out
        infinite alternate;

    pointer-events: none;
}


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

.hero-container {
    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    padding:
        145px
        70px
        100px;
}


/* =========================================================
   CONTENT
========================================================= */

.hero-content {
    position: relative;

    width: 58%;

    max-width: 820px;
}


/* =========================================================
   EYEBROW
========================================================= */

.hero-eyebrow {
    display: flex;

    align-items: center;

    gap: 15px;

    width: fit-content;

    margin-bottom: 26px;

    font-family: 'Montserrat', sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 4px;

    text-transform: uppercase;

    color: #d4af37;

    opacity: 0;

    animation:
        heroFadeUp 1s
        0.15s
        cubic-bezier(.22,.61,.36,1)
        forwards;
}


.eyebrow-line {
    position: relative;

    display: block;

    width: 48px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            #8b0000,
            #d4af37
        );

    transform-origin: left;

    animation:
        eyebrowLineReveal 1.2s
        0.4s
        cubic-bezier(.22,.61,.36,1)
        both;
}


/* =========================================================
   TITLE
========================================================= */

.hero-title {
    position: relative;

    margin: 0;

    font-family: 'Cinzel', serif;

    font-size:
        clamp(
            55px,
            6.5vw,
            98px
        );

    font-weight: 500;

    line-height: 0.98;

    letter-spacing: -2px;

    color: #ffffff;

    opacity: 0;

    animation:
        heroTitleReveal 1.25s
        0.25s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


.hero-title::after {
    content: '';

    position: absolute;

    left: 4px;

    bottom: -18px;

    width: 80px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            #8b0000,
            #d4af37,
            transparent
        );

    transform: scaleX(0);

    transform-origin: left;

    animation:
        titleLineReveal 1s
        1s
        cubic-bezier(.22,.61,.36,1)
        forwards;
}


.hero-title span {
    display: block;

    margin-top: 17px;

    font-size: 0.38em;

    font-weight: 500;

    line-height: 1.2;

    letter-spacing: 6px;

    text-transform: uppercase;

    color: #d4af37;

    text-shadow:
        0 0 25px rgba(212, 175, 55, 0.12);
}


/* =========================================================
   TAGLINE
========================================================= */

.hero-tagline {
    margin: 43px 0 13px;

    font-family: 'Cinzel', serif;

    font-size:
        clamp(
            23px,
            2.4vw,
            35px
        );

    font-weight: 400;

    line-height: 1.25;

    color: #ffffff;

    opacity: 0;

    animation:
        heroFadeUp 1s
        0.75s
        cubic-bezier(.22,.61,.36,1)
        forwards;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.hero-description {
    margin: 0 0 10px;

    font-family: 'Montserrat', sans-serif;

    font-size: 16px;

    font-weight: 600;

    line-height: 1.7;

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

    opacity: 0;

    animation:
        heroFadeUp 1s
        0.9s
        cubic-bezier(.22,.61,.36,1)
        forwards;
}


.hero-experience {
    max-width: 700px;

    margin: 0;

    font-family: 'Montserrat', sans-serif;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.9;

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

    opacity: 0;

    animation:
        heroFadeUp 1s
        1.05s
        cubic-bezier(.22,.61,.36,1)
        forwards;
}


.hero-experience strong {
    color: #d4af37;

    font-weight: 700;
}


/* =========================================================
   BUTTONS
========================================================= */

.hero-buttons {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 36px;

    opacity: 0;

    animation:
        heroFadeUp 1s
        1.2s
        cubic-bezier(.22,.61,.36,1)
        forwards;
}


.hero-btn {
    position: relative;

    min-height: 54px;

    padding: 0 22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    overflow: hidden;

    border: 1px solid transparent;

    font-family: 'Montserrat', sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform 0.4s cubic-bezier(.22,.61,.36,1),
        background 0.4s ease,
        border-color 0.4s ease,
        color 0.4s ease,
        box-shadow 0.4s ease;
}


.hero-btn::before {
    content: '';

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255, 255, 255, 0.35) 45%,
            transparent 70%
        );

    transform: translateX(-120%);

    transition:
        transform 0.7s ease;
}


.hero-btn:hover::before {
    transform: translateX(120%);
}


.hero-btn > * {
    position: relative;

    z-index: 2;
}


.hero-btn-icon {
    font-size: 15px;

    line-height: 1;
}


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

.hero-btn-primary {
    background:
        linear-gradient(
            135deg,
            #e0bd52,
            #b88b20
        );

    border-color: #d4af37;

    color: #0a0a0a;

    box-shadow:
        0 10px 30px rgba(212, 175, 55, 0.12);
}


.hero-btn-primary:hover {
    transform: translateY(-5px);

    box-shadow:
        0 18px 45px rgba(212, 175, 55, 0.28);

    background:
        linear-gradient(
            135deg,
            #f0d778,
            #d4af37
        );
}


/* =========================================================
   WHATSAPP
========================================================= */

.hero-btn-whatsapp {
    background:
        rgba(10, 10, 10, 0.38);

    border-color:
        rgba(212, 175, 55, 0.42);

    color: #ffffff;

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);
}


.hero-btn-whatsapp:hover {
    transform: translateY(-5px);

    background:
        rgba(139, 0, 0, 0.55);

    border-color:
        rgba(212, 175, 55, 0.75);

    box-shadow:
        0 15px 40px rgba(139, 0, 0, 0.22);
}


/* =========================================================
   OUTLINE
========================================================= */

.hero-btn-outline {
    background:
        rgba(255, 255, 255, 0.025);

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

    color: #ffffff;

    backdrop-filter: blur(10px);
}


.hero-btn-outline:hover {
    transform: translateY(-5px);

    background: #8b0000;

    border-color: #a5121a;

    box-shadow:
        0 15px 40px rgba(139, 0, 0, 0.3);
}


/* =========================================================
   BOTTOM INFORMATION
========================================================= */

.hero-bottom {
    display: flex;

    align-items: center;

    gap: 27px;

    margin-top: 50px;

    opacity: 0;

    animation:
        heroFadeUp 1s
        1.35s
        cubic-bezier(.22,.61,.36,1)
        forwards;
}


.experience-badge {
    display: flex;

    align-items: center;

    gap: 13px;
}


.experience-number {
    font-family: 'Cinzel', serif;

    font-size: 39px;

    font-weight: 500;

    line-height: 1;

    color: #d4af37;

    text-shadow:
        0 0 25px rgba(212, 175, 55, 0.15);
}


.experience-info {
    display: flex;

    flex-direction: column;

    gap: 4px;

    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    line-height: 1.3;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


.experience-info span {
    color: rgba(255, 255, 255, 0.48);
}


.experience-info strong {
    font-size: 9px;

    color: #ffffff;
}


.hero-bottom-line {
    width: 1px;

    height: 35px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(212, 175, 55, 0.55),
            transparent
        );
}


.hero-bottom-text {
    display: flex;

    align-items: center;

    gap: 11px;

    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 1.8px;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.45);
}


.hero-bottom-text span:nth-child(even) {
    color: #d4af37;
}


/* =========================================================
   RIGHT HERO VISUAL
========================================================= */

.hero-visual {
    position: absolute;

    z-index: 3;

    top: 58%;

    right: 7%;

    width: 430px;

    height: 610px;

    transform: translateY(-50%);

    pointer-events: none;
}


/* =========================================================
   MAIN IMAGE FRAME
========================================================= */

.hero-image-frame {
    position: absolute;

    top: 0;

    right: 25px;

    width: 390px;

    height: 560px;

    padding: 9px;

    border: 1px solid rgba(212, 175, 55, 0.55);

    background:
        rgba(212, 175, 55, 0.035);

    transform:
        rotate(2deg);

    box-shadow:
        0 35px 90px rgba(0, 0, 0, 0.45);

    animation:
        heroImageFloat 8s
        ease-in-out
        infinite;
}


/* =========================================================
   IMAGE
========================================================= */

.hero-image {
    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

    background: #171513;
}


.hero-image::after {
    content: '';

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(8, 8, 8, 0.05),
            rgba(8, 8, 8, 0.25)
        );

    pointer-events: none;
}


.hero-image img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    filter:
        saturate(0.9)
        contrast(1.05);

    transform: scale(1.02);

    transition:
        transform 1s cubic-bezier(.22,.61,.36,1),
        filter 0.7s ease;
}


.hero-visual:hover .hero-image img {
    transform: scale(1.08);

    filter:
        saturate(1)
        contrast(1.08);
}


/* =========================================================
   VISUAL RINGS
========================================================= */

.hero-visual-ring {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.hero-visual-ring-one {
    width: 520px;

    height: 520px;

    top: 35px;

    right: -50px;

    border: 1px solid rgba(212, 175, 55, 0.14);

    animation:
        visualRingRotate 25s
        linear
        infinite;
}


.hero-visual-ring-two {
    width: 450px;

    height: 450px;

    top: 70px;

    right: -15px;

    border:
        1px dashed rgba(139, 0, 0, 0.25);

    animation:
        visualRingRotateReverse 20s
        linear
        infinite;
}


/* =========================================================
   VERTICAL GOLD LINE
========================================================= */

.hero-visual-line {
    position: absolute;

    right: -25px;

    top: 85px;

    width: 1px;

    height: 250px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            #d4af37,
            transparent
        );

    opacity: 0.7;
}


/* =========================================================
   FLOATING EXPERIENCE CARD
========================================================= */

.hero-visual-card {
    position: absolute;

    left: -40px;

    bottom: 40px;

    width: 175px;

    padding: 20px 21px;

    display: flex;

    flex-direction: column;

    background:
        rgba(17, 16, 15, 0.92);

    border:
        1px solid rgba(212, 175, 55, 0.4);

    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.35);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    animation:
        visualCardFloat 6s
        ease-in-out
        infinite;
}


.hero-visual-card-small {
    margin-bottom: 8px;

    font-family: 'Montserrat', sans-serif;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.8px;

    color: #d4af37;
}


.hero-visual-card strong {
    font-family: 'Cinzel', serif;

    font-size: 45px;

    font-weight: 500;

    line-height: 1;

    color: #ffffff;
}


.hero-visual-card-label {
    margin-top: 6px;

    font-family: 'Montserrat', sans-serif;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 1.5px;

    color: rgba(255, 255, 255, 0.45);
}


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

.hero-visual-quote {
    position: absolute;

    right: -30px;

    bottom: 120px;

    width: 155px;

    padding: 18px;

    background:
        rgba(212, 175, 55, 0.92);

    color: #171513;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.25);

    animation:
        visualQuoteFloat 7s
        1s
        ease-in-out
        infinite;
}


.hero-visual-quote > span {
    display: block;

    margin-bottom: 2px;

    font-family: 'Cinzel', serif;

    font-size: 34px;

    line-height: 0.6;
}


.hero-visual-quote p {
    margin: 8px 0 0;

    font-family: 'Cinzel', serif;

    font-size: 13px;

    line-height: 1.45;
}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.hero-scroll {
    position: absolute;

    z-index: 8;

    right: 42px;

    bottom: 35px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

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

    font-family: 'Montserrat', sans-serif;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 2.5px;

    text-transform: uppercase;

    text-decoration: none;

    writing-mode: vertical-rl;

    opacity: 0;

    animation:
        scrollReveal 1s
        1.8s
        ease
        forwards;
}


.scroll-arrow {
    position: relative;

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(212, 175, 55, 0.45);

    border-radius: 50%;

    font-size: 14px;

    color: #d4af37;

    writing-mode: horizontal-tb;

    animation:
        scrollPulse 2.2s
        ease-in-out
        infinite;
}


.scroll-arrow::before {
    content: '';

    position: absolute;

    inset: -5px;

    border: 1px solid rgba(212, 175, 55, 0.12);

    border-radius: 50%;

    animation:
        scrollRing 2.2s
        ease-out
        infinite;
}


/* =========================================================
   DECORATIVE CIRCLES
========================================================= */

.hero-decoration {
    position: absolute;

    z-index: 1;

    pointer-events: none;

    border: 1px solid rgba(212, 175, 55, 0.14);

    border-radius: 50%;

    opacity: 0;

    animation:
        decorationReveal 2s
        1s
        ease
        forwards;
}


.hero-decoration-one {
    width: 390px;

    height: 390px;

    right: -160px;

    top: 10%;

    box-shadow:
        inset 0 0 80px rgba(139, 0, 0, 0.08);

    animation:
        decorationReveal 2s 1s ease forwards,
        decorationFloat 12s 2s ease-in-out infinite;
}


.hero-decoration-two {
    width: 220px;

    height: 220px;

    right: 80px;

    bottom: 8%;

    border-color:
        rgba(139, 0, 0, 0.24);

    animation:
        decorationReveal 2s 1.3s ease forwards,
        decorationFloatReverse 10s 2s ease-in-out infinite;
}


/* =========================================================
   GOLD DOT
========================================================= */

.hero-content::before {
    content: '';

    position: absolute;

    width: 5px;

    height: 5px;

    right: -100px;

    top: 5px;

    border-radius: 50%;

    background: #d4af37;

    box-shadow:
        0 0 0 6px rgba(212, 175, 55, 0.08),
        0 0 25px rgba(212, 175, 55, 0.45);

    animation:
        goldDotPulse 3s
        ease-in-out
        infinite;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes heroBackgroundZoom {

    0% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1.15);
    }

}


@keyframes heroLightMove {

    0% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    100% {
        transform:
            translate3d(-100px, 80px, 0)
            scale(1.15);
    }

}


@keyframes heroRedGlow {

    0% {
        transform:
            translate3d(0, 0, 0);

        opacity: 0.65;
    }

    100% {
        transform:
            translate3d(100px, -70px, 0);

        opacity: 1;
    }

}


@keyframes heroFadeUp {

    from {
        opacity: 0;

        transform:
            translateY(35px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes heroTitleReveal {

    from {
        opacity: 0;

        transform:
            translateY(50px)
            scale(0.97);

        filter: blur(8px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter: blur(0);
    }

}


@keyframes eyebrowLineReveal {

    from {
        transform:
            scaleX(0);
    }

    to {
        transform:
            scaleX(1);
    }

}


@keyframes titleLineReveal {

    from {
        transform:
            scaleX(0);
    }

    to {
        transform:
            scaleX(1);
    }

}


@keyframes scrollReveal {

    from {
        opacity: 0;

        transform:
            translateY(20px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes scrollPulse {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(7px);
    }

}


@keyframes scrollRing {

    0% {
        transform:
            scale(0.8);

        opacity: 0.7;
    }

    100% {
        transform:
            scale(1.35);

        opacity: 0;
    }

}


@keyframes decorationReveal {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


@keyframes decorationFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-18px)
            rotate(5deg);
    }

}


@keyframes decorationFloatReverse {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(15px)
            rotate(-6deg);
    }

}


@keyframes goldDotPulse {

    0%,
    100% {
        transform:
            scale(1);

        opacity: 0.7;
    }

    50% {
        transform:
            scale(1.5);

        opacity: 1;
    }

}


@keyframes heroImageFloat {

    0%,
    100% {
        transform:
            rotate(2deg)
            translateY(0);
    }

    50% {
        transform:
            rotate(1deg)
            translateY(-10px);
    }

}


@keyframes visualCardFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-12px);
    }

}


@keyframes visualQuoteFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-10px)
            rotate(-2deg);
    }

}


@keyframes visualRingRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes visualRingRotateReverse {

    from {
        transform:
            rotate(360deg);
    }

    to {
        transform:
            rotate(0deg);
    }

}


@keyframes titleLineRevealMobile {

    from {
        transform:
            translateX(-50%)
            scaleX(0);
    }

    to {
        transform:
            translateX(-50%)
            scaleX(1);
    }

}


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

@media (max-width: 1200px) {

    .hero-container {
        padding:
            140px
            45px
            90px;
    }


    .hero-content {
        width: 60%;

        max-width: 700px;
    }


    .hero-title {
        font-size:
            clamp(
                52px,
                7vw,
                78px
            );
    }


    .hero-visual {
        right: 2%;

        width: 360px;

        height: 540px;
    }


    .hero-image-frame {
        width: 330px;

        height: 500px;

        right: 15px;
    }


    .hero-visual-ring-one {
        width: 430px;

        height: 430px;

        right: -30px;
    }


    .hero-visual-ring-two {
        width: 370px;

        height: 370px;

        right: 5px;
    }


    .hero-visual-card {
        left: -25px;
    }


    .hero-visual-quote {
        right: -10px;
    }


    .hero-content::before {
        right: -30px;
    }


    .hero-scroll {
        right: 20px;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 1000px) {

    .hero-content {
        width: 65%;
    }


    .hero-visual {
        opacity: 0.72;

        right: -60px;
    }


    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(5, 5, 5, 0.98) 0%,
                rgba(8, 8, 8, 0.92) 38%,
                rgba(8, 8, 8, 0.72) 70%,
                rgba(8, 8, 8, 0.55) 100%
            );
    }

}


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

@media (max-width: 767px) {

    .hero-section {
        min-height: 100svh;

        align-items: center;
    }


    .hero-bg {
        inset: -5%;

        background-position: 65% center;

        animation-duration: 22s;
    }


    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(5, 5, 5, 0.80) 0%,
                rgba(5, 5, 5, 0.74) 40%,
                rgba(5, 5, 5, 0.91) 100%
            );
    }


    /* Hide desktop visual */

    .hero-visual {
        display: none;
    }


    .hero-section::before {
        width: 450px;

        height: 450px;

        right: -230px;

        top: 0;
    }


    .hero-section::after {
        width: 400px;

        height: 400px;

        left: -220px;

        bottom: -180px;
    }


    .hero-container {
        padding:
            120px
            22px
            65px;
    }


    .hero-content {
        width: 100%;

        max-width: 100%;

        text-align: center;
    }


    .hero-content::before {
        display: none;
    }


    .hero-eyebrow {
        justify-content: center;

        width: 100%;

        gap: 10px;

        margin-bottom: 22px;

        font-size: 7px;

        letter-spacing: 2.5px;
    }


    .eyebrow-line {
        width: 25px;
    }


    .hero-title {
        font-size:
            clamp(
                39px,
                12vw,
                58px
            );

        line-height: 1;

        letter-spacing: -1px;
    }


    .hero-title::after {
        left: 50%;

        width: 65px;

        transform:
            translateX(-50%)
            scaleX(0);

        transform-origin: center;

        animation:
            titleLineRevealMobile 1s
            1s
            cubic-bezier(.22,.61,.36,1)
            forwards;
    }


    .hero-title span {
        margin-top: 14px;

        font-size: 0.47em;

        letter-spacing: 3px;

        line-height: 1.3;
    }


    .hero-tagline {
        margin-top: 37px;

        font-size: 20px;

        line-height: 1.4;
    }


    .hero-description {
        margin-top: 12px;

        font-size: 13px;

        line-height: 1.7;
    }


    .hero-experience {
        font-size: 11px;

        line-height: 1.8;
    }


    .hero-buttons {
        flex-direction: column;

        width: 100%;

        gap: 9px;

        margin-top: 28px;
    }


    .hero-btn {
        width: 100%;

        min-height: 51px;

        font-size: 8px;

        letter-spacing: 1.3px;
    }


    .hero-bottom {
        justify-content: center;

        margin-top: 32px;
    }


    .hero-bottom-line,
    .hero-bottom-text {
        display: none;
    }


    .experience-number {
        font-size: 31px;
    }


    .experience-info {
        text-align: left;

        font-size: 7px;
    }


    .experience-info strong {
        font-size: 8px;
    }


    .hero-scroll {
        display: none;
    }


    .hero-decoration-one {
        width: 210px;

        height: 210px;

        right: -130px;

        top: 12%;

        opacity: 0.7;
    }


    .hero-decoration-two {
        width: 130px;

        height: 130px;

        right: -50px;

        bottom: 6%;

        opacity: 0.7;
    }

}


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

@media (max-width: 400px) {

    .hero-container {
        padding:
            105px
            17px
            50px;
    }


    .hero-title {
        font-size: 37px;
    }


    .hero-title span {
        font-size: 16px;

        letter-spacing: 2.5px;
    }


    .hero-tagline {
        margin-top: 34px;

        font-size: 18px;
    }


    .hero-description {
        font-size: 12px;
    }


    .hero-experience {
        font-size: 10px;
    }


    .experience-number {
        font-size: 28px;
    }


    .hero-decoration-one {
        width: 160px;

        height: 160px;

        right: -100px;
    }


    .hero-decoration-two {
        width: 100px;

        height: 100px;

        right: -45px;
    }

}


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

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

    .hero-bg,
    .hero-section::before,
    .hero-section::after,
    .hero-eyebrow,
    .hero-title,
    .hero-tagline,
    .hero-description,
    .hero-experience,
    .hero-buttons,
    .hero-bottom,
    .hero-scroll,
    .hero-decoration,
    .scroll-arrow,
    .scroll-arrow::before,
    .hero-content::before,
    .hero-image-frame,
    .hero-visual-card,
    .hero-visual-quote,
    .hero-visual-ring-one,
    .hero-visual-ring-two {

        animation: none !important;

        transition: none !important;
    }


    .hero-eyebrow,
    .hero-title,
    .hero-tagline,
    .hero-description,
    .hero-experience,
    .hero-buttons,
    .hero-bottom,
    .hero-scroll,
    .hero-decoration {

        opacity: 1;
    }

}

/* =========================================================
   SALON TEENA
   PREMIUM LUXURY NAVIGATION
   BLACK • GOLD • DEEP RED
========================================================= */

.site-header {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 9999;

    width: 100%;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.38) 0%,
            rgba(0, 0, 0, 0) 100%
        );

    border-bottom: 1px solid transparent;

    transition:
        background 0.5s ease,
        border-color 0.5s ease,
        box-shadow 0.5s ease,
        backdrop-filter 0.5s ease,
        transform 0.45s ease;

    animation:
        navReveal 0.9s
        cubic-bezier(.22,.61,.36,1)
        both;
}


/* =========================================================
   SCROLLED NAVIGATION
========================================================= */

.site-header.scrolled {
    background:
        rgba(8, 8, 8, 0.90);

    border-bottom-color:
        rgba(212, 175, 55, 0.12);

    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.42);

    backdrop-filter:
        blur(20px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(140%);
}


/* =========================================================
   TOP GOLD LINE
========================================================= */

.site-header::before {
    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(139, 0, 0, 0.5) 20%,
            #d4af37 50%,
            rgba(139, 0, 0, 0.5) 80%,
            transparent 100%
        );

    opacity: 0;

    transition:
        opacity 0.5s ease;
}


.site-header.scrolled::before {
    opacity: 1;
}


/* =========================================================
   NAV
========================================================= */

.site-nav {
    position: relative;

    width: 100%;
}


/* =========================================================
   NAV CONTAINER
========================================================= */

.nav-container {
    position: relative;

    width: 100%;
    max-width: 1540px;

    min-height: 92px;

    margin: 0 auto;

    padding:
        0
        55px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;
}


/* =========================================================
   LOGO
========================================================= */

.site-logo {
    position: relative;

    display: flex;

    flex-direction: column;

    flex-shrink: 0;

    padding: 8px 0;

    text-decoration: none;

    line-height: 1;

    transition:
        transform 0.4s cubic-bezier(.22,.61,.36,1);
}


.site-logo::before {
    content: '';

    position: absolute;

    left: -12px;
    top: 50%;

    width: 3px;
    height: 0;

    background:
        linear-gradient(
            to bottom,
            #8b0000,
            #d4af37
        );

    transform:
        translateY(-50%);

    transition:
        height 0.4s ease;
}


.site-logo:hover {
    transform:
        translateY(-2px);
}


.site-logo:hover::before {
    height: 28px;
}


.site-logo-main {
    font-family: 'Cinzel', serif;

    font-size: 26px;

    font-weight: 500;

    letter-spacing: 1px;

    color: #ffffff;

    transition:
        color 0.3s ease,
        text-shadow 0.3s ease;
}


.site-logo:hover .site-logo-main {
    color: #f3d77a;

    text-shadow:
        0 0 25px rgba(212, 175, 55, 0.18);
}


.site-logo-sub {
    margin-top: 6px;

    font-family: 'Montserrat', sans-serif;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: #d4af37;
}


/* =========================================================
   DESKTOP NAV
========================================================= */

.desktop-nav {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 32px;

    margin-left: auto;
}


/* =========================================================
   NAV LINK
========================================================= */

.nav-link {
    position: relative;

    display: inline-flex;

    align-items: center;

    padding: 12px 0;

    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    text-decoration: none;

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

    transition:
        color 0.35s ease,
        transform 0.35s ease;
}


.nav-link::before {
    content: '';

    position: absolute;

    left: 50%;
    bottom: 3px;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #8b0000;

    transform:
        translateX(-50%)
        scale(0);

    transition:
        transform 0.35s
        cubic-bezier(.22,.61,.36,1);
}


.nav-link::after {
    content: '';

    position: absolute;

    left: 50%;
    bottom: 4px;

    width: 0;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #8b0000,
            #d4af37
        );

    transform:
        translateX(-50%);

    transition:
        width 0.4s
        cubic-bezier(.22,.61,.36,1);
}


.nav-link:hover,
.nav-link.active {
    color: #ffffff;

    transform:
        translateY(-1px);
}


.nav-link:hover::after,
.nav-link.active::after {
    width: 24px;
}


.nav-link:hover::before,
.nav-link.active::before {
    transform:
        translateX(-50%)
        scale(1);
}


/* =========================================================
   ACTIONS
========================================================= */

.nav-actions {
    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}


/* =========================================================
   WHATSAPP BUTTON
========================================================= */

.nav-whatsapp {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 39px;

    padding: 0 13px;

    overflow: hidden;

    border:
        1px solid
        rgba(212, 175, 55, 0.32);

    background:
        rgba(0, 0, 0, 0.18);

    font-family: 'Montserrat', sans-serif;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.8px;

    text-decoration: none;

    color: #ffffff;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    transition:
        transform 0.4s ease,
        background 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        color 0.4s ease;
}


.nav-whatsapp::before {
    content: '';

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(212, 175, 55, 0.20) 50%,
            transparent 80%
        );

    transform:
        translateX(-120%);

    transition:
        transform 0.7s ease;
}


.nav-whatsapp:hover::before {
    transform:
        translateX(120%);
}


.nav-whatsapp:hover {
    transform:
        translateY(-2px);

    background:
        rgba(139, 0, 0, 0.48);

    border-color:
        rgba(212, 175, 55, 0.65);

    box-shadow:
        0 10px 30px
        rgba(139, 0, 0, 0.22);
}


.nav-whatsapp-icon {
    position: relative;

    z-index: 2;

    font-size: 12px;
}


.nav-whatsapp-text {
    position: relative;

    z-index: 2;
}


/* =========================================================
   BOOK BUTTON
========================================================= */

.nav-book {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 40px;

    padding:
        0
        18px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #e0bd52,
            #b88b20
        );

    border:
        1px solid #d4af37;

    font-family: 'Montserrat', sans-serif;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    text-decoration: none;

    color: #080808;

    box-shadow:
        0 7px 25px
        rgba(212, 175, 55, 0.10);

    transition:
        transform 0.4s
        cubic-bezier(.22,.61,.36,1),
        box-shadow 0.4s ease,
        background 0.4s ease;
}


.nav-book::before {
    content: '';

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.45),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left 0.7s ease;
}


.nav-book:hover::before {
    left: 140%;
}


.nav-book:hover {
    transform:
        translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #f2d878,
            #d4af37
        );

    box-shadow:
        0 14px 35px
        rgba(212, 175, 55, 0.25);
}


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

.mobile-menu-toggle {
    position: relative;

    display: none;

    width: 44px;
    height: 44px;

    padding: 0;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 5px;

    overflow: hidden;

    border:
        1px solid
        rgba(212, 175, 55, 0.35);

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

    cursor: pointer;

    backdrop-filter:
        blur(10px);

    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}


.mobile-menu-toggle::before {
    content: '';

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(139, 0, 0, 0.25),
            transparent 65%
        );

    opacity: 0;

    transition:
        opacity 0.3s ease;
}


.mobile-menu-toggle:hover {
    border-color: #d4af37;

    background:
        rgba(139, 0, 0, 0.25);

    transform:
        translateY(-2px);
}


.mobile-menu-toggle:hover::before {
    opacity: 1;
}


.mobile-menu-toggle span {
    position: relative;

    z-index: 2;

    display: block;

    width: 19px;
    height: 1px;

    background: #ffffff;

    transform-origin: center;

    transition:
        transform 0.4s
        cubic-bezier(.22,.61,.36,1),
        opacity 0.3s ease,
        background 0.3s ease;
}


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

.mobile-menu {
    position: fixed;

    inset: 0;

    z-index: 10000;

    visibility: hidden;

    opacity: 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(212, 175, 55, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(139, 0, 0, 0.14),
            transparent 30%
        ),
        #080808;

    transform:
        translateY(-20px);

    transition:
        opacity 0.45s ease,
        transform 0.45s
        cubic-bezier(.22,.61,.36,1),
        visibility 0.45s ease;
}


.mobile-menu::before {
    content: '';

    position: absolute;

    width: 500px;
    height: 500px;

    right: -250px;
    top: -250px;

    border:
        1px solid
        rgba(212, 175, 55, 0.12);

    border-radius: 50%;

    box-shadow:
        0 0 0 60px rgba(212, 175, 55, 0.025),
        0 0 0 120px rgba(212, 175, 55, 0.018);

    pointer-events: none;
}


.mobile-menu::after {
    content: '';

    position: absolute;

    width: 350px;
    height: 350px;

    left: -180px;
    bottom: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(139, 0, 0, 0.18),
            transparent 70%
        );

    pointer-events: none;
}


.mobile-menu.open {
    visibility: visible;

    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   MOBILE MENU INNER
========================================================= */

.mobile-menu-inner {
    position: relative;

    z-index: 3;

    width: 100%;
    min-height: 100%;

    padding:
        25px
        25px
        35px;

    display: flex;

    flex-direction: column;
}


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

.mobile-menu-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 22px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.08);
}


.mobile-logo {
    display: flex;

    flex-direction: column;

    text-decoration: none;

    opacity: 0;

    transform:
        translateY(-10px);
}


.mobile-menu.open .mobile-logo {
    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity 0.5s 0.15s ease,
        transform 0.5s 0.15s ease;
}


.mobile-logo span {
    font-family: 'Cinzel', serif;

    font-size: 25px;

    font-weight: 500;

    color: #ffffff;
}


.mobile-logo small {
    margin-top: 5px;

    font-family: 'Montserrat', sans-serif;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 2.8px;

    text-transform: uppercase;

    color: #d4af37;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.mobile-menu-close {
    position: relative;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(212, 175, 55, 0.35);

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

    font-size: 25px;

    font-weight: 200;

    line-height: 1;

    color: #ffffff;

    cursor: pointer;

    transition:
        transform 0.4s ease,
        border-color 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}


.mobile-menu-close:hover {
    transform:
        rotate(90deg);

    border-color:
        #d4af37;

    background:
        rgba(139, 0, 0, 0.3);

    color:
        #d4af37;
}


/* =========================================================
   MOBILE NAV LINKS
========================================================= */

.mobile-nav-links {
    display: flex;

    flex-direction: column;

    margin-top: 28px;
}


.mobile-nav-links a {
    position: relative;

    display: flex;

    align-items: center;

    gap: 17px;

    padding:
        17px
        0;

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

    font-family: 'Cinzel', serif;

    font-size: 24px;

    font-weight: 400;

    text-decoration: none;

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

    opacity: 0;

    transform:
        translateX(-25px);

    transition:
        color 0.35s ease,
        padding-left 0.35s
        cubic-bezier(.22,.61,.36,1);
}


.mobile-menu.open .mobile-nav-links a {
    opacity: 1;

    transform:
        translateX(0);
}


.mobile-menu.open .mobile-nav-links a:nth-child(1) {
    transition:
        opacity 0.5s 0.18s ease,
        transform 0.5s 0.18s ease,
        color 0.35s ease,
        padding-left 0.35s ease;
}


.mobile-menu.open .mobile-nav-links a:nth-child(2) {
    transition:
        opacity 0.5s 0.24s ease,
        transform 0.5s 0.24s ease,
        color 0.35s ease,
        padding-left 0.35s ease;
}


.mobile-menu.open .mobile-nav-links a:nth-child(3) {
    transition:
        opacity 0.5s 0.30s ease,
        transform 0.5s 0.30s ease,
        color 0.35s ease,
        padding-left 0.35s ease;
}


.mobile-menu.open .mobile-nav-links a:nth-child(4) {
    transition:
        opacity 0.5s 0.36s ease,
        transform 0.5s 0.36s ease,
        color 0.35s ease,
        padding-left 0.35s ease;
}


.mobile-menu.open .mobile-nav-links a:nth-child(5) {
    transition:
        opacity 0.5s 0.42s ease,
        transform 0.5s 0.42s ease,
        color 0.35s ease,
        padding-left 0.35s ease;
}


.mobile-menu.open .mobile-nav-links a:nth-child(6) {
    transition:
        opacity 0.5s 0.48s ease,
        transform 0.5s 0.48s ease,
        color 0.35s ease,
        padding-left 0.35s ease;
}


.mobile-nav-links a::before {
    content: '';

    position: absolute;

    left: 0;

    width: 3px;
    height: 0;

    background:
        linear-gradient(
            to bottom,
            #8b0000,
            #d4af37
        );

    transition:
        height 0.35s ease;
}


.mobile-nav-links a:hover {
    padding-left: 12px;

    color: #d4af37;
}


.mobile-nav-links a:hover::before {
    height: 24px;
}


.mobile-nav-links a span {
    width: 24px;

    font-family: 'Montserrat', sans-serif;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;

    color: #8b0000;

    transition:
        color 0.3s ease;
}


.mobile-nav-links a:hover span {
    color: #d4af37;
}


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

.mobile-menu-footer {
    display: flex;

    gap: 10px;

    margin-top: auto;

    padding-top: 25px;

    opacity: 0;

    transform:
        translateY(15px);
}


.mobile-menu.open .mobile-menu-footer {
    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity 0.6s 0.55s ease,
        transform 0.6s 0.55s ease;
}


.mobile-call-btn,
.mobile-whatsapp-btn {
    position: relative;

    flex: 1;

    min-height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    overflow: hidden;

    border:
        1px solid
        rgba(212, 175, 55, 0.35);

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

    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.8px;

    text-decoration: none;

    color: #ffffff;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease;
}


.mobile-call-btn:hover {
    transform:
        translateY(-3px);

    border-color:
        #d4af37;

    background:
        rgba(139, 0, 0, 0.28);
}


.mobile-whatsapp-btn {
    background:
        linear-gradient(
            135deg,
            #e0bd52,
            #b88b20
        );

    border-color:
        #d4af37;

    color: #080808;
}


.mobile-whatsapp-btn:hover {
    transform:
        translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #f1d675,
            #d4af37
        );
}


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

.mobile-menu-tagline {
    position: relative;

    margin-top: 22px;

    padding-top: 18px;

    text-align: center;

    font-family: 'Cinzel', serif;

    font-size: 10px;

    font-style: italic;

    letter-spacing: 0.5px;

    color:
        rgba(212, 175, 55, 0.55);
}


.mobile-menu-tagline::before {
    content: '';

    position: absolute;

    left: 50%;
    top: 0;

    width: 35px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #8b0000,
            #d4af37
        );

    transform:
        translateX(-50%);
}


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

@media (max-width: 1150px) {

    .nav-container {
        padding:
            0
            35px;
    }


    .desktop-nav {
        gap: 22px;
    }


    .nav-whatsapp-text {
        display: none;
    }

}


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

@media (max-width: 900px) {

    .site-header {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.55),
                transparent
            );
    }


    .site-header.scrolled {
        background:
            rgba(8, 8, 8, 0.94);
    }


    .nav-container {
        min-height: 76px;

        padding:
            0
            20px;
    }


    .desktop-nav,
    .nav-actions {
        display: none;
    }


    .mobile-menu-toggle {
        display: flex;
    }


    .site-logo-main {
        font-size: 22px;
    }


    .site-logo-sub {
        font-size: 5.5px;

        letter-spacing: 2.5px;
    }


    .site-logo::before {
        display: none;
    }

}


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

@media (max-width: 400px) {

    .nav-container {
        padding:
            0
            16px;
    }


    .mobile-menu-inner {
        padding:
            20px
            20px
            28px;
    }


    .mobile-nav-links {
        margin-top: 23px;
    }


    .mobile-nav-links a {
        padding:
            14px
            0;

        font-size: 21px;
    }


    .mobile-menu-footer {
        flex-direction: column;
    }


    .mobile-call-btn,
    .mobile-whatsapp-btn {
        min-height: 46px;
    }

}


/* =========================================================
   NAVIGATION ENTRANCE
========================================================= */

@keyframes navReveal {

    from {
        opacity: 0;

        transform:
            translateY(-15px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


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

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

    .site-header,
    .site-logo,
    .nav-link,
    .nav-whatsapp,
    .nav-book,
    .mobile-menu,
    .mobile-nav-links a,
    .mobile-menu-footer,
    .mobile-menu-close {

        animation: none !important;

        transition: none !important;
    }

}

/* =========================================================
   SALON TEENA
   ABOUT SECTION
   LUXURY EDITORIAL • BLACK • GOLD • RED
========================================================= */

.about-section {
    position: relative;

    width: 100%;

    padding: 145px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #faf7f1 0%,
            #f5efe6 52%,
            #eee5d9 100%
        );

    color: #111111;
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.about-section::before {
    content: '';

    position: absolute;

    width: 480px;
    height: 480px;

    top: -230px;
    right: -180px;

    border-radius: 50%;

    border:
        1px solid
        rgba(183, 134, 45, 0.13);

    box-shadow:
        0 0 0 45px rgba(183, 134, 45, 0.025),
        0 0 0 90px rgba(183, 134, 45, 0.018);

    pointer-events: none;

    animation:
        aboutFloat 12s ease-in-out infinite;
}


.about-section::after {
    content: '';

    position: absolute;

    width: 320px;
    height: 320px;

    left: -180px;
    bottom: -170px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(139, 0, 0, 0.08),
            transparent 70%
        );

    pointer-events: none;
}


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

.about-container {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1480px;

    margin: 0 auto;

    padding:
        0
        55px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    align-items: center;

    gap: 105px;
}


/* =========================================================
   IMAGE AREA
========================================================= */

.about-image-wrapper {
    position: relative;

    min-height: 650px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   IMAGE FRAME
========================================================= */

.about-image-frame {
    position: relative;

    width: 82%;

    height: 580px;

    overflow: hidden;

    z-index: 3;

    background: #111111;

    box-shadow:
        0 30px 70px
        rgba(20, 15, 10, 0.18);

    transform:
        translateY(0);

    transition:
        transform 0.7s
        cubic-bezier(.22,.61,.36,1),
        box-shadow 0.7s ease;
}


.about-image-frame::before {
    content: '';

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            135deg,
            rgba(212, 175, 55, 0.08),
            transparent 40%,
            rgba(139, 0, 0, 0.10)
        );

    pointer-events: none;
}


.about-image-frame::after {
    content: '';

    position: absolute;

    top: 0;
    left: -120%;

    z-index: 4;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.20),
            transparent
        );

    transform:
        skewX(-18deg);

    pointer-events: none;

    transition:
        left 0.9s ease;
}


.about-image-frame:hover::after {
    left: 140%;
}


.about-image-frame:hover {
    transform:
        translateY(-8px);

    box-shadow:
        0 40px 90px
        rgba(20, 15, 10, 0.24);
}


/* =========================================================
   IMAGE
========================================================= */

.about-image {
    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

    filter:
        saturate(0.92)
        contrast(1.03);

    transform:
        scale(1.02);

    transition:
        transform 1.2s
        cubic-bezier(.22,.61,.36,1),
        filter 0.8s ease;
}


.about-image-frame:hover .about-image {
    transform:
        scale(1.09);

    filter:
        saturate(1)
        contrast(1.06);
}


/* =========================================================
   GOLD DECORATIVE FRAME
========================================================= */

.about-image-decoration {
    position: absolute;

    width: 82%;

    height: 580px;

    top: 35px;

    left:
        calc(50% - 41%);

    z-index: 1;

    border:
        1px solid
        rgba(183, 134, 45, 0.70);

    pointer-events: none;

    transition:
        transform 0.7s ease,
        border-color 0.5s ease;
}


.about-image-decoration::before,
.about-image-decoration::after {
    content: '';

    position: absolute;

    width: 35px;
    height: 35px;

    border-color: #8b0000;

    border-style: solid;
}


.about-image-decoration::before {
    top: -1px;
    left: -1px;

    border-width: 2px 0 0 2px;
}


.about-image-decoration::after {
    right: -1px;
    bottom: -1px;

    border-width: 0 2px 2px 0;
}


.about-image-wrapper:hover
.about-image-decoration {
    transform:
        translate(7px, 7px);

    border-color:
        rgba(183, 134, 45, 0.95);
}


/* =========================================================
   FLOATING RED ACCENT
========================================================= */

.about-image-wrapper::before {
    content: '';

    position: absolute;

    left: 3%;

    top: 14%;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #8b0000;

    box-shadow:
        0 0 0 8px
        rgba(139, 0, 0, 0.07),
        0 0 25px
        rgba(139, 0, 0, 0.25);

    animation:
        aboutPulse 3s ease-in-out infinite;
}


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

.about-experience-card {
    position: absolute;

    z-index: 5;

    left: 0;

    bottom: 42px;

    min-width: 205px;

    padding:
        25px
        28px;

    display: flex;

    align-items: center;

    gap: 17px;

    background:
        linear-gradient(
            135deg,
            #101010,
            #1a1714
        );

    color: #ffffff;

    border-left:
        3px solid
        #d4af37;

    box-shadow:
        0 25px 55px
        rgba(0, 0, 0, 0.24);

    transition:
        transform 0.5s
        cubic-bezier(.22,.61,.36,1),
        box-shadow 0.5s ease;
}


.about-experience-card::after {
    content: '';

    position: absolute;

    right: 0;
    bottom: 0;

    width: 35px;
    height: 35px;

    border-right:
        1px solid
        rgba(212, 175, 55, 0.55);

    border-bottom:
        1px solid
        rgba(212, 175, 55, 0.55);
}


.about-experience-card:hover {
    transform:
        translateY(-8px)
        translateX(5px);

    box-shadow:
        0 30px 65px
        rgba(0, 0, 0, 0.30);
}


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

.about-experience-number {
    font-family: 'Cinzel', serif;

    font-size: 47px;

    line-height: 1;

    color: #d4af37;

    text-shadow:
        0 0 25px
        rgba(212, 175, 55, 0.15);
}


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

.about-experience-label {
    font-family: 'Montserrat', sans-serif;

    font-size: 9px;

    font-weight: 600;

    line-height: 1.7;

    letter-spacing: 2px;

    text-transform: uppercase;

    color:
        rgba(255, 255, 255, 0.68);
}


/* =========================================================
   VERTICAL TEXT
========================================================= */

.about-vertical-text {
    position: absolute;

    right: 5px;

    top: 50%;

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

    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 4px;

    white-space: nowrap;

    color: #8f7040;

    opacity: 0.65;
}


/* =========================================================
   CONTENT
========================================================= */

.about-content {
    position: relative;

    max-width: 720px;
}


/* =========================================================
   EYEBROW
========================================================= */

.section-eyebrow {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 23px;

    font-family: 'Montserrat', sans-serif;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 3.5px;

    text-transform: uppercase;

    color: #8b0000;
}


.section-eyebrow-line {
    width: 42px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            #8b0000,
            #d4af37
        );
}


/* =========================================================
   TITLE
========================================================= */

.about-title {
    position: relative;

    max-width: 680px;

    margin: 0;

    font-family: 'Cinzel', serif;

    font-size: clamp(42px, 4.2vw, 66px);

    font-weight: 500;

    line-height: 1.13;

    letter-spacing: -0.8px;

    color: #111111;
}


.about-title::after {
    content: '';

    display: block;

    width: 55px;
    height: 2px;

    margin-top: 22px;

    background:
        linear-gradient(
            90deg,
            #8b0000,
            #d4af37
        );
}


.about-title span {
    display: block;

    color: #a17b32;
}


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

.about-intro {
    max-width: 650px;

    margin:
        28px
        0
        16px;

    font-family: 'Montserrat', sans-serif;

    font-size: 17px;

    font-weight: 500;

    line-height: 1.85;

    color: #403b35;
}


.about-intro strong {
    color: #111111;

    font-weight: 700;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.about-description {
    max-width: 670px;

    margin:
        0
        0
        15px;

    font-family: 'Montserrat', sans-serif;

    font-size: 13px;

    font-weight: 400;

    line-height: 2;

    color: #746d64;
}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.about-highlights {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    max-width: 680px;

    margin-top: 34px;
}


.about-highlight {
    position: relative;

    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 76px;

    padding:
        13px
        15px;

    overflow: hidden;

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

    border:
        1px solid
        rgba(183, 134, 45, 0.14);

    box-shadow:
        0 8px 25px
        rgba(50, 35, 20, 0.025);

    transition:
        transform 0.4s
        cubic-bezier(.22,.61,.36,1),
        box-shadow 0.4s ease,
        border-color 0.4s ease,
        background 0.4s ease;
}


.about-highlight::before {
    content: '';

    position: absolute;

    left: 0;
    top: 0;

    width: 2px;
    height: 0;

    background:
        linear-gradient(
            to bottom,
            #8b0000,
            #d4af37
        );

    transition:
        height 0.4s ease;
}


.about-highlight:hover {
    transform:
        translateY(-5px);

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

    border-color:
        rgba(183, 134, 45, 0.42);

    box-shadow:
        0 18px 38px
        rgba(40, 30, 20, 0.09);
}


.about-highlight:hover::before {
    height: 100%;
}


/* =========================================================
   HIGHLIGHT ICON
========================================================= */

.highlight-icon {
    position: relative;

    width: 44px;
    height: 44px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        #111111;

    border:
        1px solid
        rgba(212, 175, 55, 0.30);

    font-size: 17px;

    transition:
        transform 0.4s ease,
        background 0.4s ease,
        border-color 0.4s ease;
}


.about-highlight:hover .highlight-icon {
    transform:
        rotate(-5deg)
        scale(1.05);

    background:
        #8b0000;

    border-color:
        #d4af37;
}


/* =========================================================
   HIGHLIGHT CONTENT
========================================================= */

.highlight-content {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.highlight-content strong {
    font-family: 'Montserrat', sans-serif;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.3px;

    color: #292521;
}


.highlight-content span {
    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    line-height: 1.5;

    color: #8a837b;
}


/* =========================================================
   BOTTOM
========================================================= */

.about-bottom {
    position: relative;

    display: flex;

    align-items: center;

    gap: 18px;

    max-width: 680px;

    margin-top: 34px;

    padding-top: 25px;

    border-top:
        1px solid
        rgba(176, 141, 87, 0.20);
}


.about-stars {
    font-size: 15px;

    letter-spacing: 3px;

    color: #b08d35;

    animation:
        starGlow 3s ease-in-out infinite;
}


.about-bottom-text {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.about-bottom-text strong {
    font-family: 'Montserrat', sans-serif;

    font-size: 10px;

    font-weight: 800;

    color: #292521;
}


.about-bottom-text span {
    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    color: #8a837b;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes aboutFloat {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg);
    }

    50% {
        transform:
            translate3d(-15px, 15px, 0)
            rotate(3deg);
    }

}


@keyframes aboutPulse {

    0%,
    100% {
        transform: scale(1);

        opacity: 0.75;
    }

    50% {
        transform: scale(1.35);

        opacity: 1;
    }

}


@keyframes starGlow {

    0%,
    100% {
        opacity: 0.7;

        transform: translateY(0);
    }

    50% {
        opacity: 1;

        transform: translateY(-2px);
    }

}


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

@media (max-width: 1100px) {

    .about-container {
        gap: 60px;

        padding:
            0
            40px;
    }


    .about-image-wrapper {
        min-height: 570px;
    }


    .about-image-frame,
    .about-image-decoration {
        height: 500px;
    }


    .about-title {
        font-size: 50px;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

    .about-section {
        padding: 110px 0;
    }


    .about-container {
        grid-template-columns: 1fr;

        gap: 75px;
    }


    .about-image-wrapper {
        width:
            min(680px, 100%);

        margin:
            0 auto;

        min-height: 620px;
    }


    .about-content {
        max-width: 720px;

        margin:
            0 auto;
    }

}


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

@media (max-width: 767px) {

    .about-section {
        padding:
            85px
            0;
    }


    .about-container {
        padding:
            0
            20px;

        gap: 55px;
    }


    .about-image-wrapper {
        min-height: 485px;
    }


    .about-image-frame {
        width: 88%;

        height: 430px;
    }


    .about-image-decoration {
        width: 88%;

        height: 430px;

        top: 25px;

        left: 6%;
    }


    .about-experience-card {
        left: 0;

        bottom: 20px;

        min-width: 170px;

        padding:
            18px
            20px;
    }


    .about-experience-number {
        font-size: 35px;
    }


    .about-experience-label {
        font-size: 8px;

        letter-spacing: 1.5px;
    }


    .about-vertical-text {
        display: none;
    }


    .section-eyebrow {
        font-size: 8px;

        letter-spacing: 2.2px;
    }


    .section-eyebrow-line {
        width: 30px;
    }


    .about-title {
        font-size: 38px;

        line-height: 1.18;
    }


    .about-title::after {
        margin-top: 18px;
    }


    .about-intro {
        font-size: 14px;

        line-height: 1.85;
    }


    .about-description {
        font-size: 11px;

        line-height: 1.95;
    }


    .about-highlights {
        grid-template-columns: 1fr;

        gap: 10px;

        margin-top: 26px;
    }


    .about-highlight {
        min-height: 66px;
    }


    .about-bottom {
        align-items: flex-start;

        gap: 12px;
    }


    .about-stars {
        font-size: 12px;

        letter-spacing: 2px;
    }

}


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

@media (max-width: 400px) {

    .about-container {
        padding:
            0
            16px;
    }


    .about-image-wrapper {
        min-height: 425px;
    }


    .about-image-frame,
    .about-image-decoration {
        height: 375px;
    }


    .about-experience-card {
        padding:
            15px
            16px;
    }


    .about-title {
        font-size: 34px;
    }


    .about-intro {
        font-size: 13px;
    }

}


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

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

    .about-section::before,
    .about-image-wrapper::before,
    .about-stars {

        animation: none !important;
    }


    .about-image,
    .about-image-frame,
    .about-image-decoration,
    .about-experience-card,
    .about-highlight,
    .highlight-icon {

        transition: none !important;
    }

}

/* =========================================================
   SALON TEENA
   WHY CHOOSE US
   PREMIUM LUXURY • BLACK • GOLD • RED
========================================================= */

.why-us-section {
    position: relative;

    width: 100%;

    padding: 150px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(139, 0, 0, 0.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(212, 175, 55, 0.07),
            transparent 32%
        ),
        #0b0b0b;

    color: #ffffff;
}


/* =========================================================
   BACKGROUND GLOW
========================================================= */

.why-us-section::before {
    content: '';

    position: absolute;

    width: 550px;
    height: 550px;

    top: -250px;
    left: -250px;

    border-radius: 50%;

    border:
        1px solid
        rgba(212, 175, 55, 0.08);

    box-shadow:
        0 0 0 50px
        rgba(212, 175, 55, 0.018),
        0 0 0 100px
        rgba(212, 175, 55, 0.012);

    pointer-events: none;

    animation:
        whyOrbit 15s linear infinite;
}


.why-us-section::after {
    content: '';

    position: absolute;

    width: 300px;
    height: 300px;

    right: -130px;
    bottom: -130px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(139, 0, 0, 0.18),
            transparent 70%
        );

    pointer-events: none;

    animation:
        whyGlow 7s ease-in-out infinite;
}


/* =========================================================
   BACKGROUND NUMBER
========================================================= */

.why-us-bg-number {
    position: absolute;

    right: -45px;

    top: 5px;

    font-family: 'Cinzel', serif;

    font-size:
        clamp(
            300px,
            36vw,
            570px
        );

    font-weight: 400;

    line-height: 1;

    color:
        rgba(212, 175, 55, 0.035);

    pointer-events: none;

    user-select: none;

    animation:
        numberFloat 9s ease-in-out infinite;
}


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

.why-us-container {
    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 1480px;

    margin: 0 auto;

    padding:
        0
        55px;
}


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

.why-us-header {
    max-width: 760px;

    margin:
        0
        auto
        75px;

    text-align: center;
}


/* =========================================================
   EYEBROW
========================================================= */

.section-eyebrow-light {
    justify-content: center;

    color: #d4af37;
}


.section-eyebrow-light .section-eyebrow-line {
    background:
        linear-gradient(
            90deg,
            #8b0000,
            #d4af37
        );
}


/* =========================================================
   TITLE
========================================================= */

.why-us-title {
    margin: 0;

    font-family: 'Cinzel', serif;

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

    font-weight: 500;

    line-height: 1.12;

    letter-spacing: -0.8px;

    color: #ffffff;
}


.why-us-title span {
    color: #d4af37;

    background:
        linear-gradient(
            90deg,
            #a17b32,
            #f0d889,
            #a17b32
        );

    background-size: 200% auto;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    animation:
        goldText 5s linear infinite;
}


/* =========================================================
   TITLE DECORATION
========================================================= */

.why-us-title::after {
    content: '';

    display: block;

    width: 55px;
    height: 2px;

    margin:
        23px
        auto
        0;

    background:
        linear-gradient(
            90deg,
            #8b0000,
            #d4af37
        );
}


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

.why-us-intro {
    max-width: 590px;

    margin:
        25px
        auto
        0;

    font-family: 'Montserrat', sans-serif;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.95;

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


/* =========================================================
   FEATURE GRID
========================================================= */

.why-us-grid {
    display: grid;

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

    gap: 18px;
}


/* =========================================================
   CARD
========================================================= */

.why-us-card {
    position: relative;

    min-height: 310px;

    padding:
        35px
        30px;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );

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

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    transition:
        transform 0.55s
        cubic-bezier(.22,.61,.36,1),
        border-color 0.45s ease,
        background 0.45s ease,
        box-shadow 0.45s ease;
}


/* =========================================================
   CARD TOP GOLD LINE
========================================================= */

.why-us-card::before {
    content: '';

    position: absolute;

    left: 0;
    top: 0;

    width: 0;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #8b0000,
            #d4af37,
            #f0d889
        );

    transition:
        width 0.6s
        cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   CARD LIGHT SWEEP
========================================================= */

.why-us-card::after {
    content: '';

    position: absolute;

    top: -30%;

    left: -120%;

    width: 70%;
    height: 160%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.055),
            transparent
        );

    transform:
        rotate(15deg);

    pointer-events: none;

    transition:
        left 0.9s ease;
}


/* =========================================================
   CARD HOVER
========================================================= */

.why-us-card:hover {
    transform:
        translateY(-10px);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(139, 0, 0, 0.035)
        );

    border-color:
        rgba(212, 175, 55, 0.35);

    box-shadow:
        0 30px 70px
        rgba(0, 0, 0, 0.40),
        0 0 40px
        rgba(212, 175, 55, 0.035);
}


.why-us-card:hover::before {
    width: 100%;
}


.why-us-card:hover::after {
    left: 140%;
}


/* =========================================================
   CARD NUMBER
========================================================= */

.why-us-card-number {
    position: absolute;

    top: 24px;
    right: 27px;

    font-family: 'Cinzel', serif;

    font-size: 11px;

    letter-spacing: 1px;

    color:
        rgba(212, 175, 55, 0.45);

    transition:
        color 0.35s ease;
}


.why-us-card:hover
.why-us-card-number {
    color:
        rgba(212, 175, 55, 0.9);
}


/* =========================================================
   ICON
========================================================= */

.why-us-icon {
    position: relative;

    width: 62px;
    height: 62px;

    margin-bottom: 29px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(212, 175, 55, 0.42);

    background:
        rgba(212, 175, 55, 0.025);

    font-family: 'Cinzel', serif;

    font-size: 22px;

    color: #d4af37;

    transition:
        transform 0.5s
        cubic-bezier(.22,.61,.36,1),
        background 0.4s ease,
        color 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}


/* ICON CORNERS */

.why-us-icon::before,
.why-us-icon::after {
    content: '';

    position: absolute;

    width: 8px;
    height: 8px;

    border-color: #8b0000;

    border-style: solid;

    transition:
        width 0.35s ease,
        height 0.35s ease;
}


.why-us-icon::before {
    top: -1px;
    left: -1px;

    border-width:
        1px
        0
        0
        1px;
}


.why-us-icon::after {
    right: -1px;
    bottom: -1px;

    border-width:
        0
        1px
        1px
        0;
}


.why-us-card:hover .why-us-icon {
    transform:
        rotate(-6deg)
        scale(1.08);

    background:
        #d4af37;

    color:
        #0b0b0b;

    border-color:
        #d4af37;

    box-shadow:
        0 12px 35px
        rgba(212, 175, 55, 0.20);
}


.why-us-card:hover .why-us-icon::before,
.why-us-card:hover .why-us-icon::after {
    width: 13px;
    height: 13px;
}


/* =========================================================
   CONTENT
========================================================= */

.why-us-card-content {
    max-width: 310px;
}


.why-us-card-content h3 {
    margin:
        0
        0
        13px;

    font-family: 'Cinzel', serif;

    font-size: 18px;

    font-weight: 500;

    line-height: 1.4;

    color: #ffffff;

    transition:
        color 0.3s ease;
}


.why-us-card:hover
.why-us-card-content h3 {
    color: #f0d889;
}


.why-us-card-content p {
    margin: 0;

    font-family: 'Montserrat', sans-serif;

    font-size: 10px;

    font-weight: 400;

    line-height: 1.9;

    color:
        rgba(255, 255, 255, 0.50);
}


/* =========================================================
   CARD ARROW
========================================================= */

.why-us-card-arrow {
    position: absolute;

    right: 28px;
    bottom: 25px;

    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(212, 175, 55, 0.18);

    border-radius: 50%;

    font-size: 15px;

    color:
        rgba(212, 175, 55, 0.45);

    transition:
        transform 0.4s ease,
        color 0.4s ease,
        background 0.4s ease,
        border-color 0.4s ease;
}


.why-us-card:hover
.why-us-card-arrow {
    transform:
        translateX(6px);

    color:
        #0b0b0b;

    background:
        #d4af37;

    border-color:
        #d4af37;
}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.why-us-bottom {
    margin-top: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2.5px;

    text-transform: uppercase;

    color:
        rgba(255, 255, 255, 0.38);
}


.why-us-bottom-line {
    position: relative;

    width: 75px;

    height: 1px;

    overflow: hidden;

    background:
        rgba(212, 175, 55, 0.20);
}


.why-us-bottom-line::after {
    content: '';

    position: absolute;

    left: -100%;

    top: 0;

    width: 100%;
    height: 100%;

    background:
        #d4af37;

    animation:
        lineMove 3s ease-in-out infinite;
}


.why-us-bottom-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #d4af37;

    box-shadow:
        0 0 15px
        rgba(212, 175, 55, 0.5);

    animation:
        dotPulse 2.5s ease-in-out infinite;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes whyOrbit {

    0% {
        transform:
            rotate(0deg)
            translate(0, 0);
    }

    50% {
        transform:
            rotate(180deg)
            translate(15px, 15px);
    }

    100% {
        transform:
            rotate(360deg)
            translate(0, 0);
    }

}


@keyframes whyGlow {

    0%,
    100% {
        opacity: 0.45;

        transform:
            scale(1);
    }

    50% {
        opacity: 0.8;

        transform:
            scale(1.15);
    }

}


@keyframes numberFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(18px);
    }

}


@keyframes goldText {

    0% {
        background-position:
            0% center;
    }

    100% {
        background-position:
            200% center;
    }

}


@keyframes lineMove {

    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 100%;
    }

}


@keyframes dotPulse {

    0%,
    100% {
        transform:
            scale(1);

        opacity: 0.65;
    }

    50% {
        transform:
            scale(1.5);

        opacity: 1;
    }

}


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

@media (max-width: 1100px) {

    .why-us-container {
        padding:
            0
            40px;
    }


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

}


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

@media (max-width: 767px) {

    .why-us-section {
        padding:
            95px
            0;
    }


    .why-us-container {
        padding:
            0
            20px;
    }


    .why-us-header {
        margin-bottom:
            48px;
    }


    .why-us-title {
        font-size: 40px;
    }


    .why-us-intro {
        font-size: 11px;

        line-height: 1.9;
    }


    .why-us-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .why-us-card {
        min-height: 245px;

        padding:
            28px
            24px;
    }


    .why-us-icon {
        width: 52px;
        height: 52px;

        margin-bottom: 23px;

        font-size: 19px;
    }


    .why-us-card-content h3 {
        font-size: 16px;
    }


    .why-us-card-content p {
        font-size: 10px;

        line-height: 1.85;
    }


    .why-us-card-arrow {
        right: 22px;
        bottom: 20px;
    }


    .why-us-bottom {
        flex-wrap: wrap;

        gap: 10px;

        margin-top: 48px;

        font-size: 7px;

        letter-spacing: 1.5px;
    }


    .why-us-bottom-line {
        display: none;
    }


    .why-us-bg-number {
        right: -90px;

        top: 80px;

        font-size: 300px;
    }

}


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

@media (max-width: 400px) {

    .why-us-container {
        padding:
            0
            16px;
    }


    .why-us-title {
        font-size: 35px;
    }


    .why-us-card {
        min-height: 225px;

        padding:
            25px
            20px;
    }


    .why-us-card-content h3 {
        font-size: 15px;
    }

}


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

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

    .why-us-section::before,
    .why-us-section::after,
    .why-us-bg-number,
    .why-us-title span,
    .why-us-bottom-line::after,
    .why-us-bottom-dot {

        animation: none !important;
    }


    .why-us-card,
    .why-us-icon,
    .why-us-card-arrow {

        transition: none !important;
    }

}

/* =========================================================
   SALON TEENA
   PREMIUM SERVICES SECTION
   BLACK • GOLD • RED • IVORY
========================================================= */

.services-section {
    position: relative;

    width: 100%;

    padding: 150px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(139, 0, 0, 0.055),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(212, 175, 55, 0.045),
            transparent 30%
        ),
        #f8f4ee;

    color: #171513;
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.services-section::before {
    content: '';

    position: absolute;

    width: 520px;
    height: 520px;

    right: -250px;
    top: 100px;

    border:
        1px solid
        rgba(176, 141, 87, 0.10);

    border-radius: 50%;

    box-shadow:
        0 0 0 45px
        rgba(176, 141, 87, 0.018),
        0 0 0 90px
        rgba(176, 141, 87, 0.012);

    pointer-events: none;

    animation:
        servicesOrbit 18s linear infinite;
}


.services-section::after {
    content: '';

    position: absolute;

    width: 260px;
    height: 260px;

    left: -130px;
    bottom: 80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(139, 0, 0, 0.09),
            transparent 70%
        );

    pointer-events: none;

    animation:
        servicesGlow 8s ease-in-out infinite;
}


/* =========================================================
   BACKGROUND TEXT
========================================================= */

.services-bg-text {
    position: absolute;

    left: -90px;

    top: 230px;

    font-family: 'Cinzel', serif;

    font-size:
        clamp(
            150px,
            18vw,
            285px
        );

    font-weight: 500;

    line-height: 1;

    letter-spacing: 10px;

    color:
        rgba(176, 141, 87, 0.035);

    pointer-events: none;

    user-select: none;

    transform:
        rotate(-90deg);

    animation:
        servicesTextFloat 10s ease-in-out infinite;
}


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

.services-container {
    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 1480px;

    margin: 0 auto;

    padding:
        0
        55px;
}


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

.services-header {
    max-width: 760px;

    margin:
        0
        auto
        75px;

    text-align: center;
}


/* =========================================================
   EYEBROW
========================================================= */

.services-header .section-eyebrow {
    justify-content: center;

    color: #9a783b;
}


.services-header .section-eyebrow-line {
    background:
        linear-gradient(
            90deg,
            #8b0000,
            #d4af37
        );
}


/* =========================================================
   TITLE
========================================================= */

.services-title {
    margin: 0;

    font-family: 'Cinzel', serif;

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

    font-weight: 500;

    line-height: 1.12;

    letter-spacing: -0.8px;

    color: #171513;
}


.services-title span {
    position: relative;

    color: #9a783b;

    background:
        linear-gradient(
            90deg,
            #8f6b2d,
            #d4af37,
            #f0d889,
            #8f6b2d
        );

    background-size: 250% auto;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    animation:
        servicesGoldText 5s linear infinite;
}


/* =========================================================
   TITLE DECORATION
========================================================= */

.services-title::after {
    content: '';

    display: block;

    width: 60px;
    height: 2px;

    margin:
        24px
        auto
        0;

    background:
        linear-gradient(
            90deg,
            #8b0000,
            #d4af37
        );
}


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

.services-intro {
    max-width: 600px;

    margin:
        25px
        auto
        0;

    font-family: 'Montserrat', sans-serif;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.95;

    color: #77716a;
}


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

.services-grid {
    display: grid;

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

    gap: 20px;
}


/* =========================================================
   SERVICE CARD
========================================================= */

.service-card {
    position: relative;

    overflow: hidden;

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

    border:
        1px solid
        rgba(176, 141, 87, 0.16);

    box-shadow:
        0 8px 30px
        rgba(45, 35, 25, 0.035);

    transition:
        transform 0.55s
        cubic-bezier(.22,.61,.36,1),
        box-shadow 0.55s ease,
        border-color 0.45s ease;
}


/* =========================================================
   TOP ACCENT
========================================================= */

.service-card::before {
    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 3px;

    z-index: 10;

    background:
        linear-gradient(
            90deg,
            #8b0000,
            #d4af37,
            #f0d889
        );

    transition:
        width 0.65s
        cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   LIGHT SWEEP
========================================================= */

.service-card::after {
    content: '';

    position: absolute;

    top: -20%;
    left: -120%;

    width: 70%;
    height: 150%;

    z-index: 8;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.20),
            transparent
        );

    transform:
        rotate(15deg);

    transition:
        left 0.9s ease;
}


/* =========================================================
   CARD HOVER
========================================================= */

.service-card:hover {
    transform:
        translateY(-11px);

    border-color:
        rgba(176, 141, 87, 0.40);

    box-shadow:
        0 30px 70px
        rgba(50, 40, 30, 0.13);
}


.service-card:hover::before {
    width: 100%;
}


.service-card:hover::after {
    left: 140%;
}


/* =========================================================
   FEATURED CARD
========================================================= */

.service-card-featured {
    border-color:
        rgba(176, 141, 87, 0.42);

    box-shadow:
        0 15px 45px
        rgba(50, 40, 30, 0.08);
}


.service-card-featured::before {
    width: 100%;
}


/* =========================================================
   IMAGE
========================================================= */

.service-image {
    position: relative;

    width: 100%;

    height: 270px;

    overflow: hidden;

    background: #171513;
}


.service-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transform:
        scale(1.01);

    transition:
        transform 1s
        cubic-bezier(.22,.61,.36,1),
        filter 0.7s ease;
}


.service-card:hover
.service-image img {
    transform:
        scale(1.09);

    filter:
        saturate(1.05)
        contrast(1.03);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.service-image-overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            to top,
            rgba(10, 9, 8, 0.82) 0%,
            rgba(10, 9, 8, 0.30) 50%,
            rgba(10, 9, 8, 0.05) 100%
        );

    transition:
        background 0.5s ease;
}


.service-card:hover
.service-image-overlay {
    background:
        linear-gradient(
            to top,
            rgba(10, 9, 8, 0.86) 0%,
            rgba(139, 0, 0, 0.10) 55%,
            rgba(10, 9, 8, 0.08) 100%
        );
}


/* =========================================================
   IMAGE GOLD LINE
========================================================= */

.service-image::after {
    content: '';

    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 18px;

    height: 1px;

    z-index: 4;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212, 175, 55, 0.65),
            transparent
        );

    transform:
        scaleX(0.35);

    opacity: 0.7;

    transition:
        transform 0.6s ease,
        opacity 0.6s ease;
}


.service-card:hover
.service-image::after {
    transform:
        scaleX(1);

    opacity: 1;
}


/* =========================================================
   SERVICE NUMBER
========================================================= */

.service-number {
    position: absolute;

    top: 20px;
    left: 20px;

    z-index: 5;

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

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

    background:
        rgba(10, 9, 8, 0.30);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    font-family: 'Cinzel', serif;

    font-size: 11px;

    color: #ffffff;

    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        transform 0.4s ease;
}


.service-card:hover
.service-number {
    background:
        #d4af37;

    border-color:
        #d4af37;

    color:
        #171513;

    transform:
        rotate(-6deg);
}


/* =========================================================
   SERVICE CATEGORY LABEL
========================================================= */

.service-category {
    position: absolute;

    left: 20px;
    bottom: 22px;

    z-index: 5;

    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    color:
        rgba(255, 255, 255, 0.70);
}


/* =========================================================
   BADGE
========================================================= */

.service-badge {
    position: absolute;

    right: 18px;
    top: 18px;

    z-index: 6;

    padding:
        8px
        12px;

    background:
        linear-gradient(
            135deg,
            #d4af37,
            #b89132
        );

    font-family: 'Montserrat', sans-serif;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: #171513;

    box-shadow:
        0 8px 20px
        rgba(0, 0, 0, 0.16);
}


/* =========================================================
   CONTENT
========================================================= */

.service-content {
    position: relative;

    padding:
        31px
        28px
        28px;
}


/* =========================================================
   SMALL GOLD MARK
========================================================= */

.service-content::before {
    content: '';

    display: block;

    width: 28px;
    height: 2px;

    margin-bottom: 16px;

    background:
        linear-gradient(
            90deg,
            #8b0000,
            #d4af37
        );

    transition:
        width 0.4s ease;
}


.service-card:hover
.service-content::before {
    width: 48px;
}


/* =========================================================
   TITLE
========================================================= */

.service-content h3 {
    margin:
        0
        0
        12px;

    font-family: 'Cinzel', serif;

    font-size: 21px;

    font-weight: 500;

    line-height: 1.35;

    color: #171513;

    transition:
        color 0.3s ease;
}


.service-card:hover
.service-content h3 {
    color:
        #8f6b2d;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.service-content > p {
    min-height: 48px;

    margin: 0;

    font-family: 'Montserrat', sans-serif;

    font-size: 10px;

    line-height: 1.85;

    color: #77716a;
}


/* =========================================================
   SERVICE LIST
========================================================= */

.service-list {
    display: flex;

    flex-direction: column;

    gap: 9px;

    margin:
        23px
        0
        25px;

    padding: 0;

    list-style: none;
}


.service-list li {
    display: flex;

    align-items: center;

    gap: 10px;

    font-family: 'Montserrat', sans-serif;

    font-size: 9px;

    font-weight: 500;

    color: #4d4843;

    transition:
        transform 0.3s ease,
        color 0.3s ease;
}


.service-card:hover
.service-list li {
    transform:
        translateX(3px);
}


.service-list li span {
    width: 18px;
    height: 18px;

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(176, 141, 87, 0.42);

    border-radius: 50%;

    font-size: 8px;

    color: #a17b32;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}


.service-card:hover
.service-list li span {
    background:
        #d4af37;

    border-color:
        #d4af37;

    color:
        #171513;
}


/* =========================================================
   SERVICE LINK
========================================================= */

.service-link {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 18px;

    border-top:
        1px solid
        rgba(176, 141, 87, 0.15);

    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    text-decoration: none;

    color: #171513;

    transition:
        color 0.3s ease;
}


.service-link:hover {
    color:
        #8b0000;
}


/* =========================================================
   LINK ARROW
========================================================= */

.service-link-arrow {
    width: 29px;
    height: 29px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(176, 141, 87, 0.25);

    border-radius: 50%;

    font-size: 14px;

    color:
        #a17b32;

    transition:
        transform 0.4s ease,
        background 0.4s ease,
        color 0.4s ease,
        border-color 0.4s ease;
}


.service-link:hover
.service-link-arrow {
    transform:
        translateX(6px);

    background:
        #171513;

    border-color:
        #171513;

    color:
        #d4af37;
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.services-bottom {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 24px;

    margin-top: 65px;

    padding-top: 32px;

    border-top:
        1px solid
        rgba(176, 141, 87, 0.15);
}


.services-bottom::before {
    content: '';

    position: absolute;

    top: -1px;
    left: 50%;

    width: 70px;
    height: 1px;

    background:
        #d4af37;

    transform:
        translateX(-50%);
}


.services-bottom p {
    margin: 0;

    font-family: 'Montserrat', sans-serif;

    font-size: 10px;

    color: #77716a;
}


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

.services-cta {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    min-height: 45px;

    padding:
        0
        21px;

    overflow: hidden;

    background:
        #171513;

    border:
        1px solid
        #171513;

    color: #ffffff;

    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.3px;

    text-transform: uppercase;

    text-decoration: none;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease;
}


.services-cta::before {
    content: '';

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            #8b0000,
            #d4af37
        );

    transform:
        translateX(-105%);

    transition:
        transform 0.45s ease;
}


.services-cta span {
    position: relative;

    z-index: 2;
}


.services-cta:hover {
    transform:
        translateY(-3px);

    border-color:
        #d4af37;

    color:
        #171513;
}


.services-cta:hover::before {
    transform:
        translateX(0);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes servicesOrbit {

    0% {
        transform:
            rotate(0deg);
    }

    100% {
        transform:
            rotate(360deg);
    }

}


@keyframes servicesGlow {

    0%,
    100% {
        transform:
            scale(1);

        opacity: 0.45;
    }

    50% {
        transform:
            scale(1.18);

        opacity: 0.8;
    }

}


@keyframes servicesTextFloat {

    0%,
    100% {
        transform:
            rotate(-90deg)
            translateX(0);
    }

    50% {
        transform:
            rotate(-90deg)
            translateX(20px);
    }

}


@keyframes servicesGoldText {

    0% {
        background-position:
            0% center;
    }

    100% {
        background-position:
            250% center;
    }

}


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

@media (max-width: 1100px) {

    .services-container {
        padding:
            0
            40px;
    }


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

}


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

@media (max-width: 767px) {

    .services-section {
        padding:
            95px
            0;
    }


    .services-container {
        padding:
            0
            20px;
    }


    .services-header {
        margin-bottom:
            48px;
    }


    .services-title {
        font-size: 42px;
    }


    .services-intro {
        font-size: 11px;

        line-height: 1.9;
    }


    .services-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .service-image {
        height: 245px;
    }


    .service-content {
        padding:
            27px
            22px
            24px;
    }


    .service-content h3 {
        font-size: 20px;
    }


    .service-content > p {
        min-height: auto;

        font-size: 10px;
    }


    .service-list {
        margin-top: 20px;
    }


    .services-bottom {
        flex-direction: column;

        gap: 16px;

        margin-top: 45px;
    }


    .services-bg-text {
        display: none;
    }


    .services-section::before {
        width: 300px;
        height: 300px;

        right: -180px;
    }

}


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

@media (max-width: 400px) {

    .services-container {
        padding:
            0
            16px;
    }


    .services-title {
        font-size: 36px;
    }


    .service-image {
        height: 220px;
    }


    .service-content {
        padding:
            24px
            18px;
    }


    .service-content h3 {
        font-size: 18px;
    }


    .service-list li {
        font-size: 8.5px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    .services-section::before,
    .services-section::after,
    .services-bg-text,
    .services-title span {

        animation: none !important;
    }


    .service-card,
    .service-image img,
    .service-link-arrow,
    .services-cta {

        transition: none !important;
    }


}

/* =========================================================
   SALON TEENA
   PREMIUM ACHIEVEMENT SECTION
   BLACK • GOLD • RED LUXURY THEME
========================================================= */

.achievement-section {
    position: relative;
    width: 100%;
    min-height: 760px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(126, 20, 28, 0.14),
            transparent 35%
        ),
        #0d0c0b;

    color: #ffffff;
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.achievement-background {
    position: absolute;
    inset: -3%;

    background-image:
        url('/assets/images/achievement/achievement-bg.jpg');

    background-size: cover;
    background-position: center;

    opacity: 0.18;

    filter:
        grayscale(30%)
        contrast(1.1);

    transform: scale(1.05);

    animation:
        achievementBackgroundMove 16s ease-in-out infinite alternate;
}


/* =========================================================
   PREMIUM OVERLAY
========================================================= */

.achievement-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            #0d0c0b 0%,
            rgba(13, 12, 11, 0.98) 30%,
            rgba(13, 12, 11, 0.82) 58%,
            rgba(13, 12, 11, 0.94) 100%
        );

    z-index: 1;
}


/* =========================================================
   GOLD LIGHT EFFECT
========================================================= */

.achievement-section::before {
    content: '';

    position: absolute;

    width: 600px;
    height: 600px;

    right: -250px;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(208, 173, 112, 0.10) 0%,
            rgba(208, 173, 112, 0.035) 35%,
            transparent 70%
        );

    pointer-events: none;

    z-index: 1;

    animation:
        achievementGlow 7s ease-in-out infinite alternate;
}


/* =========================================================
   DECORATIVE RED GLOW
========================================================= */

.achievement-section::after {
    content: '';

    position: absolute;

    width: 260px;
    height: 260px;

    left: -130px;
    bottom: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(150, 24, 34, 0.18),
            transparent 70%
        );

    pointer-events: none;

    z-index: 1;
}


/* =========================================================
   DECORATIVE CIRCLES
========================================================= */

.achievement-circle {
    position: absolute;

    border: 1px solid rgba(208, 173, 112, 0.13);

    border-radius: 50%;

    pointer-events: none;

    z-index: 2;

    animation:
        achievementCircleFloat 10s ease-in-out infinite;
}


.achievement-circle-one {
    width: 520px;
    height: 520px;

    right: -260px;
    top: -110px;
}


.achievement-circle-two {
    width: 320px;
    height: 320px;

    left: -180px;
    bottom: -170px;

    animation-delay: -4s;
}


/* =========================================================
   INNER CIRCLE
========================================================= */

.achievement-circle-one::after {
    content: '';

    position: absolute;

    inset: 25px;

    border: 1px solid rgba(208, 173, 112, 0.06);

    border-radius: 50%;
}


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

.achievement-container {
    position: relative;

    z-index: 4;

    width: 100%;
    max-width: 1450px;

    margin: 0 auto;

    padding: 120px 60px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, 0.78fr);

    align-items: center;

    gap: 110px;
}


/* =========================================================
   CONTENT
========================================================= */

.achievement-content {
    max-width: 680px;
}


/* =========================================================
   EYEBROW
========================================================= */

.achievement-eyebrow {
    color: #d6b873;

    animation:
        achievementFadeUp 0.8s ease both;
}


.achievement-eyebrow .section-eyebrow-line {
    background: #d6b873;
}


/* =========================================================
   TITLE
========================================================= */

.achievement-title {
    margin: 0;

    font-family: 'Cinzel', serif;

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

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -1px;

    color: #ffffff;

    animation:
        achievementFadeUp 0.9s ease 0.12s both;
}


.achievement-title span {
    display: block;

    margin-top: 6px;

    color: #d6b873;

    position: relative;

    width: fit-content;
}


/* =========================================================
   TITLE RED ACCENT
========================================================= */

.achievement-title span::after {
    content: '';

    position: absolute;

    left: 0;
    bottom: -10px;

    width: 42px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #8f1824,
            #d6b873
        );

    animation:
        achievementLineReveal 1s ease 0.8s both;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.achievement-description {
    max-width: 590px;

    margin: 32px 0 0;

    font-family: 'Montserrat', sans-serif;

    font-size: 14px;

    line-height: 1.95;

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

    animation:
        achievementFadeUp 0.9s ease 0.25s both;
}


/* =========================================================
   AWARD CARD
========================================================= */

.achievement-award {
    position: relative;

    display: flex;
    align-items: center;

    gap: 22px;

    max-width: 590px;

    margin-top: 42px;

    padding: 26px 28px;

    background:
        linear-gradient(
            135deg,
            rgba(208, 173, 112, 0.12),
            rgba(255, 255, 255, 0.025)
        );

    border: 1px solid rgba(208, 173, 112, 0.28);

    backdrop-filter: blur(12px);

    overflow: hidden;

    animation:
        achievementFadeUp 0.9s ease 0.4s both;

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}


.achievement-award:hover {
    transform: translateY(-7px);

    border-color: rgba(208, 173, 112, 0.55);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.35),
        0 0 35px rgba(208, 173, 112, 0.06);
}


/* =========================================================
   MOVING LIGHT
========================================================= */

.achievement-award::after {
    content: '';

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.08),
            transparent
        );

    transform: skewX(-20deg);

    transition: left 0.8s ease;
}


.achievement-award:hover::after {
    left: 140%;
}


/* =========================================================
   GOLD SIDE BAR
========================================================= */

.achievement-award::before {
    content: '';

    position: absolute;

    left: 0;
    top: 0;

    width: 3px;
    height: 100%;

    background:
        linear-gradient(
            to bottom,
            #d6b873,
            #8f1824,
            #d6b873
        );

    background-size: 100% 200%;

    animation:
        achievementGoldFlow 3s linear infinite;
}


/* =========================================================
   TROPHY
========================================================= */

.achievement-trophy {
    position: relative;

    width: 72px;
    height: 72px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(208, 173, 112, 0.45);

    background:
        radial-gradient(
            circle,
            rgba(208, 173, 112, 0.15),
            rgba(208, 173, 112, 0.025)
        );

    font-size: 30px;

    color: #d6b873;

    transition:
        transform 0.5s ease,
        background 0.5s ease,
        box-shadow 0.5s ease;
}


.achievement-award:hover .achievement-trophy {
    transform:
        rotateY(180deg)
        scale(1.05);

    background: rgba(208, 173, 112, 0.12);

    box-shadow:
        0 0 30px rgba(208, 173, 112, 0.12);
}


/* =========================================================
   AWARD CONTENT
========================================================= */

.achievement-award-content {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.achievement-award-label {
    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 2.5px;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.45);
}


.achievement-award-content h3 {
    margin: 3px 0 0;

    font-family: 'Cinzel', serif;

    font-size: 24px;

    font-weight: 500;

    line-height: 1.3;

    color: #ffffff;
}


.achievement-winner {
    font-family: 'Montserrat', sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #d6b873;
}


/* =========================================================
   RED DOT ACCENT
========================================================= */

.achievement-winner::before {
    content: '';

    display: inline-block;

    width: 5px;
    height: 5px;

    margin-right: 8px;

    border-radius: 50%;

    background: #a51d2a;

    box-shadow:
        0 0 10px rgba(165, 29, 42, 0.7);
}


/* =========================================================
   STATEMENT
========================================================= */

.achievement-statement {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 38px;

    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 2.5px;

    text-transform: uppercase;

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

    animation:
        achievementFadeUp 0.9s ease 0.55s both;
}


.achievement-statement-line {
    width: 48px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            #d6b873,
            #8f1824
        );
}


/* =========================================================
   VISUAL
========================================================= */

.achievement-visual {
    position: relative;

    width: 100%;
    max-width: 500px;

    margin-left: auto;

    animation:
        achievementVisualReveal 1.1s cubic-bezier(.16,1,.3,1) 0.2s both;
}


/* =========================================================
   IMAGE FRAME
========================================================= */

.achievement-image-frame {
    position: relative;

    z-index: 2;

    width: 100%;
    height: 590px;

    overflow: hidden;

    background: #111;

    box-shadow:
        0 35px 90px rgba(0, 0, 0, 0.45);
}


/* =========================================================
   IMAGE
========================================================= */

.achievement-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    filter:
        saturate(0.82)
        contrast(1.06);

    transform: scale(1.04);

    transition:
        transform 1.2s cubic-bezier(.16,1,.3,1),
        filter 0.6s ease;
}


.achievement-visual:hover .achievement-image {
    transform: scale(1.10);

    filter:
        saturate(1)
        contrast(1.08);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.achievement-image-frame::after {
    content: '';

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(13, 12, 11, 0.35)
        );

    pointer-events: none;
}


/* =========================================================
   IMAGE BORDER
========================================================= */

.achievement-image-border {
    position: absolute;

    z-index: 1;

    inset: 24px -24px -24px 24px;

    border: 1px solid rgba(208, 173, 112, 0.42);

    pointer-events: none;

    transition:
        transform 0.6s ease,
        border-color 0.6s ease;
}


.achievement-visual:hover .achievement-image-border {
    transform: translate(8px, 8px);

    border-color: rgba(208, 173, 112, 0.65);
}


/* =========================================================
   IMAGE CORNER DETAILS
========================================================= */

.achievement-image-frame::before {
    content: '';

    position: absolute;

    z-index: 5;

    top: 18px;
    right: 18px;

    width: 45px;
    height: 45px;

    border-top: 1px solid #d6b873;
    border-right: 1px solid #d6b873;

    opacity: 0.7;

    pointer-events: none;
}


/* =========================================================
   BADGE
========================================================= */

.achievement-badge {
    position: absolute;

    z-index: 6;

    left: -55px;
    bottom: 55px;

    width: 135px;
    height: 135px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #e0c27e,
            #b18a45
        );

    border-radius: 50%;

    color: #0d0c0b;

    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(208, 173, 112, 0.12);

    animation:
        achievementBadgeFloat 4s ease-in-out infinite;
}


.achievement-badge::before {
    content: '';

    position: absolute;

    inset: 7px;

    border: 1px solid rgba(13, 12, 11, 0.35);

    border-radius: 50%;
}


.achievement-badge-icon {
    font-size: 22px;

    margin-bottom: 4px;
}


.achievement-badge-small {
    font-family: 'Montserrat', sans-serif;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.achievement-badge strong {
    margin-top: 3px;

    font-family: 'Cinzel', serif;

    font-size: 18px;

    font-weight: 600;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes achievementBackgroundMove {

    0% {
        transform: scale(1.05) translate3d(0, 0, 0);
    }

    100% {
        transform: scale(1.11) translate3d(-12px, -8px, 0);
    }

}


@keyframes achievementGlow {

    0% {
        opacity: 0.45;
        transform: translateY(-50%) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1.08);
    }

}


@keyframes achievementCircleFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(3deg);
    }

}


@keyframes achievementFadeUp {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes achievementVisualReveal {

    from {
        opacity: 0;
        transform:
            translateX(70px)
            scale(0.96);
    }

    to {
        opacity: 1;
        transform:
            translateX(0)
            scale(1);
    }

}


@keyframes achievementLineReveal {

    from {
        width: 0;
    }

    to {
        width: 42px;
    }

}


@keyframes achievementBadgeFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-8px) rotate(2deg);
    }

}


@keyframes achievementGoldFlow {

    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 200%;
    }

}


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

@media (max-width: 1100px) {

    .achievement-container {
        padding: 100px 40px;

        gap: 65px;
    }


    .achievement-image-frame {
        height: 510px;
    }


    .achievement-badge {
        left: -35px;
    }

}


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

@media (max-width: 850px) {

    .achievement-section {
        min-height: auto;
    }


    .achievement-container {
        grid-template-columns: 1fr;

        gap: 75px;

        padding: 95px 30px;
    }


    .achievement-content {
        max-width: 720px;

        margin: 0 auto;
    }


    .achievement-visual {
        width: min(520px, 90%);

        margin: 0 auto;
    }

}


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

@media (max-width: 767px) {

    .achievement-section {
        padding: 0;
    }


    .achievement-container {
        padding: 85px 20px;

        gap: 60px;
    }


    .achievement-content {
        text-align: center;
    }


    .achievement-eyebrow {
        justify-content: center;
    }


    .achievement-title {
        font-size: 40px;

        letter-spacing: -0.5px;
    }


    .achievement-title span {
        margin-left: auto;
        margin-right: auto;
    }


    .achievement-description {
        margin-top: 28px;

        font-size: 11px;

        line-height: 1.9;
    }


    .achievement-award {
        text-align: left;

        gap: 15px;

        margin-top: 32px;

        padding: 18px;
    }


    .achievement-trophy {
        width: 56px;
        height: 56px;

        font-size: 23px;
    }


    .achievement-award-content h3 {
        font-size: 19px;
    }


    .achievement-award-label {
        font-size: 7px;

        letter-spacing: 1.2px;
    }


    .achievement-winner {
        font-size: 8px;

        letter-spacing: 1.3px;
    }


    .achievement-statement {
        justify-content: center;

        font-size: 7px;

        letter-spacing: 1.7px;
    }


    .achievement-visual {
        width: calc(100% - 28px);

        margin-right: 28px;
    }


    .achievement-image-frame {
        height: 440px;
    }


    .achievement-image-border {
        inset: 15px -15px -15px 15px;
    }


    .achievement-badge {
        left: -38px;
        bottom: 25px;

        width: 108px;
        height: 108px;
    }


    .achievement-badge strong {
        font-size: 15px;
    }


    .achievement-badge-small {
        font-size: 6px;
    }


    .achievement-circle-one {
        width: 300px;
        height: 300px;

        right: -190px;
    }


    .achievement-circle-two {
        width: 220px;
        height: 220px;

        left: -130px;
    }

}


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

@media (max-width: 400px) {

    .achievement-container {
        padding: 70px 16px;
    }


    .achievement-title {
        font-size: 35px;
    }


    .achievement-description {
        font-size: 10px;
    }


    .achievement-award {
        padding: 15px;
    }


    .achievement-trophy {
        width: 50px;
        height: 50px;

        font-size: 20px;
    }


    .achievement-award-content h3 {
        font-size: 17px;
    }


    .achievement-image-frame {
        height: 390px;
    }


    .achievement-badge {
        width: 92px;
        height: 92px;

        left: -25px;
    }


    .achievement-badge strong {
        font-size: 13px;
    }

}


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

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

    .achievement-background,
    .achievement-circle,
    .achievement-section::before,
    .achievement-badge,
    .achievement-award::before,
    .achievement-eyebrow,
    .achievement-title,
    .achievement-description,
    .achievement-award,
    .achievement-statement,
    .achievement-visual {
        animation: none;
    }

}

/* =========================================================
   SALON TEENA
   PREMIUM TESTIMONIALS SECTION
   BLACK • GOLD • RED LUXURY THEME
========================================================= */

.testimonials-section {
    --black: #0b0a09;
    --black-soft: #12100f;
    --gold: #d0ad70;
    --gold-light: #e7cb91;
    --red: #9f2028;
    --red-light: #c63a42;
    --cream: #f8f4ee;
    --text-dark: #211e1b;
    --text-muted: #77716a;

    position: relative;

    width: 100%;

    padding: 145px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(159, 32, 40, 0.045),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(208, 173, 112, 0.07),
            transparent 30%
        ),
        #ffffff;

    color: var(--text-dark);
}


/* =========================================================
   AMBIENT LIGHT
========================================================= */

.testimonials-section::before {
    content: '';

    position: absolute;

    width: 500px;
    height: 500px;

    left: -250px;
    top: 5%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(159, 32, 40, 0.08),
            transparent 68%
        );

    filter: blur(20px);

    animation: testimonialAmbientOne 10s ease-in-out infinite alternate;

    pointer-events: none;
}


.testimonials-section::after {
    content: '';

    position: absolute;

    width: 450px;
    height: 450px;

    right: -230px;
    bottom: -180px;

    border: 1px solid rgba(208, 173, 112, 0.14);

    border-radius: 50%;

    box-shadow:
        0 0 80px rgba(208, 173, 112, 0.04);

    animation: testimonialCircleFloat 12s ease-in-out infinite alternate;

    pointer-events: none;
}


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

.testimonials-container {
    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 1450px;

    margin: 0 auto;

    padding: 0 60px;
}


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

.testimonials-header {
    position: relative;

    max-width: 760px;

    margin: 0 auto 75px;

    text-align: center;
}


/* =========================================================
   EYEBROW
========================================================= */

.testimonials-eyebrow {
    justify-content: center;

    color: var(--gold);
}


.testimonials-eyebrow .section-eyebrow-line {
    background: var(--gold);
}


/* =========================================================
   TITLE
========================================================= */

.testimonials-title {
    margin: 0;

    font-family: 'Cinzel', serif;

    font-size: clamp(45px, 5vw, 72px);

    font-weight: 500;

    line-height: 1.12;

    letter-spacing: -0.5px;

    color: var(--black);
}


.testimonials-title span {
    display: inline-block;

    color: var(--gold);

    position: relative;
}


.testimonials-title span::after {
    content: '';

    position: absolute;

    left: 0;
    right: 0;

    bottom: -5px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--red),
            transparent
        );

    transform: scaleX(0.65);

    animation: testimonialTitleLine 3s ease-in-out infinite alternate;
}


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

.testimonials-intro {
    max-width: 600px;

    margin: 25px auto 0;

    font-family: 'Montserrat', sans-serif;

    font-size: 13px;

    line-height: 1.9;

    color: var(--text-muted);
}


/* =========================================================
   TESTIMONIAL GRID
========================================================= */

.testimonials-grid {
    display: grid;

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

    gap: 24px;

    align-items: stretch;
}


/* =========================================================
   CARD
========================================================= */

.testimonial-card {
    position: relative;

    min-height: 360px;

    padding: 34px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    isolation: isolate;

    background:
        linear-gradient(
            145deg,
            #faf7f2,
            #f5efe7
        );

    border: 1px solid rgba(176, 141, 87, 0.18);

    box-shadow:
        0 12px 35px rgba(30, 24, 20, 0.035);

    transition:
        transform 0.5s cubic-bezier(.22,1,.36,1),
        box-shadow 0.5s ease,
        border-color 0.5s ease;
}


/* =========================================================
   CARD GOLD TOP LINE
========================================================= */

.testimonial-card::before {
    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--red),
            var(--gold),
            var(--gold-light)
        );

    transition:
        width 0.6s cubic-bezier(.22,1,.36,1);

    z-index: 5;
}


.testimonial-card:hover::before {
    width: 100%;
}


/* =========================================================
   CARD GLOW
========================================================= */

.testimonial-card::after {
    content: '';

    position: absolute;

    width: 160px;
    height: 160px;

    right: -90px;
    top: -90px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(208, 173, 112, 0.14),
            transparent 70%
        );

    opacity: 0;

    transition:
        opacity 0.5s ease,
        transform 0.7s ease;

    z-index: -1;
}


.testimonial-card:hover::after {
    opacity: 1;

    transform: scale(1.4);
}


.testimonial-card:hover {
    transform: translateY(-12px);

    border-color:
        rgba(208, 173, 112, 0.42);

    box-shadow:
        0 30px 70px rgba(30, 24, 20, 0.13),
        0 0 0 1px rgba(208, 173, 112, 0.05);
}


/* =========================================================
   FEATURED CARD
========================================================= */

.testimonial-card-featured {
    position: relative;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(208, 173, 112, 0.12),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #151311,
            #0b0a09
        );

    border:
        1px solid rgba(208, 173, 112, 0.32);

    color: #ffffff;

    transform: translateY(-14px);

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.22);
}


.testimonial-card-featured::before {
    width: 100%;

    background:
        linear-gradient(
            90deg,
            var(--red),
            var(--gold),
            var(--gold-light),
            var(--gold),
            var(--red)
        );

    background-size: 200% 100%;

    animation: testimonialGoldFlow 4s linear infinite;
}


.testimonial-card-featured:hover {
    transform: translateY(-21px);

    border-color:
        rgba(208, 173, 112, 0.55);

    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.3),
        0 0 50px rgba(208, 173, 112, 0.06);
}


/* =========================================================
   FEATURED RED ACCENT
========================================================= */

.testimonial-card-featured .testimonial-quote {
    text-shadow:
        0 0 25px rgba(208, 173, 112, 0.18);
}


/* =========================================================
   TOP
========================================================= */

.testimonial-top {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;
}


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

.testimonial-quote {
    display: block;

    font-family: 'Cinzel', serif;

    font-size: 78px;

    font-weight: 500;

    line-height: 0.65;

    color: var(--gold);

    transition:
        transform 0.5s ease;
}


.testimonial-card:hover .testimonial-quote {
    transform:
        translateY(-4px)
        rotate(-3deg);
}


/* =========================================================
   STARS
========================================================= */

.testimonial-stars {
    padding-top: 6px;

    font-size: 11px;

    letter-spacing: 4px;

    color: var(--gold);

    white-space: nowrap;
}


.testimonial-stars span {
    display: inline-block;

    animation:
        testimonialStarPulse 2.8s ease-in-out infinite;
}


.testimonial-stars span:nth-child(2) {
    animation-delay: 0.15s;
}


.testimonial-stars span:nth-child(3) {
    animation-delay: 0.3s;
}


.testimonial-stars span:nth-child(4) {
    animation-delay: 0.45s;
}


.testimonial-stars span:nth-child(5) {
    animation-delay: 0.6s;
}


/* =========================================================
   REVIEW
========================================================= */

.testimonial-card blockquote {
    position: relative;

    margin: 38px 0;

    font-family: 'Cinzel', serif;

    font-size: 19px;

    font-weight: 400;

    line-height: 1.75;

    color: #34302c;
}


.testimonial-card-featured blockquote {
    color: #ffffff;
}


/* =========================================================
   AUTHOR
========================================================= */

.testimonial-author {
    display: flex;

    align-items: center;

    gap: 14px;

    padding-top: 21px;

    border-top:
        1px solid rgba(176, 141, 87, 0.18);
}


.testimonial-card-featured .testimonial-author {
    border-color:
        rgba(255, 255, 255, 0.12);
}


/* =========================================================
   AVATAR
========================================================= */

.testimonial-avatar {
    position: relative;

    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border:
        1px solid rgba(208, 173, 112, 0.5);

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(208, 173, 112, 0.1),
            rgba(159, 32, 40, 0.08)
        );

    font-family: 'Cinzel', serif;

    font-size: 11px;

    color: var(--gold);

    transition:
        transform 0.4s ease,
        border-color 0.4s ease;
}


.testimonial-avatar::after {
    content: '';

    position: absolute;

    inset: -4px;

    border:
        1px solid rgba(159, 32, 40, 0.22);

    border-radius: 50%;

    opacity: 0;

    transform: scale(0.8);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}


.testimonial-card:hover .testimonial-avatar {
    transform: scale(1.06);

    border-color: var(--gold);
}


.testimonial-card:hover .testimonial-avatar::after {
    opacity: 1;

    transform: scale(1);
}


/* =========================================================
   AUTHOR INFO
========================================================= */

.testimonial-author-info {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.testimonial-author-info strong {
    font-family: 'Montserrat', sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.3px;

    color: #34302c;
}


.testimonial-author-info span {
    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    color: #8b847c;
}


.testimonial-card-featured .testimonial-author-info strong {
    color: #ffffff;
}


.testimonial-card-featured .testimonial-author-info span {
    color:
        rgba(255, 255, 255, 0.45);
}


/* =========================================================
   VERIFIED / REVIEW MARK
========================================================= */

.testimonial-verified {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    margin-left: auto;

    font-family: 'Montserrat', sans-serif;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    color: var(--red);
}


.testimonial-verified::before {
    content: '✓';

    width: 15px;
    height: 15px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(159, 32, 40, 0.35);

    border-radius: 50%;

    font-size: 8px;
}


/* =========================================================
   NOTE
========================================================= */

.testimonials-note {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    max-width: 720px;

    margin: 50px auto 0;

    padding: 15px 22px;

    background:
        linear-gradient(
            90deg,
            rgba(159, 32, 40, 0.035),
            rgba(208, 173, 112, 0.07),
            rgba(159, 32, 40, 0.035)
        );

    border:
        1px solid rgba(176, 141, 87, 0.13);

    font-family: 'Montserrat', sans-serif;

    font-size: 9px;

    line-height: 1.6;

    text-align: center;

    color: #8b847c;
}


.testimonials-note::before,
.testimonials-note::after {
    content: '';

    position: absolute;

    top: 50%;

    width: 30px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold)
        );
}


.testimonials-note::before {
    right: 100%;
}


.testimonials-note::after {
    left: 100%;

    transform: rotate(180deg);
}


.testimonials-note-icon {
    flex-shrink: 0;

    color: var(--gold);

    animation:
        testimonialIconPulse 2s ease-in-out infinite;
}


/* =========================================================
   DECORATIVE MICRO DOTS
========================================================= */

.testimonials-container::before {
    content: '';

    position: absolute;

    width: 6px;
    height: 6px;

    top: 5px;
    left: 4%;

    border-radius: 50%;

    background: var(--red);

    box-shadow:
        0 0 0 7px rgba(159, 32, 40, 0.06),
        0 0 20px rgba(159, 32, 40, 0.3);

    animation:
        testimonialDotFloat 4s ease-in-out infinite;
}


.testimonials-container::after {
    content: '';

    position: absolute;

    width: 5px;
    height: 5px;

    right: 5%;
    bottom: 15%;

    border-radius: 50%;

    background: var(--gold);

    box-shadow:
        0 0 0 7px rgba(208, 173, 112, 0.06),
        0 0 20px rgba(208, 173, 112, 0.25);

    animation:
        testimonialDotFloat 5s ease-in-out infinite reverse;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes testimonialAmbientOne {

    from {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    to {
        transform:
            translate3d(50px, 30px, 0)
            scale(1.12);
    }

}


@keyframes testimonialCircleFloat {

    from {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg);
    }

    to {
        transform:
            translate3d(-25px, -20px, 0)
            rotate(8deg);
    }

}


@keyframes testimonialTitleLine {

    from {
        transform: scaleX(0.45);
        opacity: 0.5;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }

}


@keyframes testimonialGoldFlow {

    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 200% 50%;
    }

}


@keyframes testimonialStarPulse {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.7;
    }

    50% {
        transform: translateY(-2px);
        opacity: 1;
    }

}


@keyframes testimonialIconPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }

}


@keyframes testimonialDotFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }

}


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

@media (max-width: 1100px) {

    .testimonials-container {
        padding: 0 40px;
    }


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


    .testimonial-card-featured {
        transform: none;
    }


    .testimonial-card-featured:hover {
        transform: translateY(-10px);
    }

}


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

@media (max-width: 767px) {

    .testimonials-section {
        padding: 95px 0;
    }


    .testimonials-container {
        padding: 0 20px;
    }


    .testimonials-header {
        margin-bottom: 48px;
    }


    .testimonials-title {
        font-size: 40px;
    }


    .testimonials-intro {
        font-size: 11px;

        line-height: 1.85;
    }


    .testimonials-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    .testimonial-card {
        min-height: 300px;

        padding: 27px;
    }


    .testimonial-card:hover {
        transform: translateY(-7px);
    }


    .testimonial-card-featured {
        transform: none;
    }


    .testimonial-card-featured:hover {
        transform: translateY(-7px);
    }


    .testimonial-quote {
        font-size: 64px;
    }


    .testimonial-stars {
        font-size: 10px;

        letter-spacing: 3px;
    }


    .testimonial-card blockquote {
        margin: 27px 0;

        font-size: 17px;

        line-height: 1.65;
    }


    .testimonial-author {
        padding-top: 17px;
    }


    .testimonial-verified {
        display: none;
    }


    .testimonials-note {
        align-items: flex-start;

        margin-top: 32px;

        font-size: 8px;
    }


    .testimonials-note::before,
    .testimonials-note::after {
        display: none;
    }


    .testimonials-container::before,
    .testimonials-container::after {
        display: none;
    }

}


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

@media (max-width: 400px) {

    .testimonials-container {
        padding: 0 16px;
    }


    .testimonials-title {
        font-size: 35px;
    }


    .testimonial-card {
        min-height: 285px;

        padding: 23px;
    }


    .testimonial-card blockquote {
        font-size: 16px;

        line-height: 1.6;
    }


    .testimonial-avatar {
        width: 40px;
        height: 40px;
    }


    .testimonial-author-info strong {
        font-size: 9px;
    }

}


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

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

    .testimonials-section *,
    .testimonials-section::before,
    .testimonials-section::after {
        animation: none !important;

        transition: none !important;
    }

}

/* =========================================================
   SALON TEENA
   PREMIUM GALLERY SECTION
========================================================= */

.gallery-section {
    position: relative;

    width: 100%;

    padding: 145px 0;

    overflow: hidden;

    background: #171513;

    color: #ffffff;

    isolation: isolate;
}


/* =========================================================
   AMBIENT BACKGROUND
========================================================= */

.gallery-section::before {
    content: '';

    position: absolute;

    width: 600px;
    height: 600px;

    top: -280px;
    right: -250px;

    border: 1px solid rgba(208, 173, 112, 0.08);

    border-radius: 50%;

    pointer-events: none;
}


.gallery-section::after {
    content: '';

    position: absolute;

    width: 420px;
    height: 420px;

    bottom: -260px;
    left: -220px;

    border: 1px solid rgba(208, 173, 112, 0.06);

    border-radius: 50%;

    pointer-events: none;
}


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

.gallery-container {
    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 1480px;

    margin: 0 auto;

    padding: 0 60px;
}


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

.gallery-header {
    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;
}


.gallery-header .section-eyebrow {
    justify-content: center;

    color: #d0ad70;
}


.gallery-header .section-eyebrow-line {
    background: #d0ad70;
}


.gallery-title {
    margin: 0;

    font-family: 'Cinzel', serif;

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

    font-weight: 500;

    line-height: 1.1;

    letter-spacing: -0.8px;

    color: #ffffff;
}


.gallery-title span {
    color: #d0ad70;
}


.gallery-intro {
    max-width: 610px;

    margin: 25px auto 0;

    font-family: 'Montserrat', sans-serif;

    font-size: 13px;

    line-height: 1.9;

    color: rgba(255, 255, 255, 0.58);
}


/* =========================================================
   FILTERS
========================================================= */

.gallery-filters {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 48px;
}


.gallery-filter {
    position: relative;

    padding: 11px 19px;

    border: 1px solid rgba(208, 173, 112, 0.24);

    background: transparent;

    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

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

    cursor: pointer;

    overflow: hidden;

    transition:
        color 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease;
}


.gallery-filter:hover {
    color: #d0ad70;

    border-color: rgba(208, 173, 112, 0.55);

    transform: translateY(-2px);
}


.gallery-filter.active {
    background: #d0ad70;

    border-color: #d0ad70;

    color: #171513;

    box-shadow:
        0 8px 25px rgba(208, 173, 112, 0.12);
}


/* =========================================================
   GALLERY GRID
========================================================= */

.gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    grid-auto-rows: 235px;

    gap: 12px;
}


/* =========================================================
   GALLERY ITEM
========================================================= */

.gallery-item {
    position: relative;

    display: block;

    overflow: hidden;

    background: #24211e;

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

    text-decoration: none;

    transform: translateZ(0);

    transition:
        transform 0.45s cubic-bezier(.2,.65,.3,1),
        border-color 0.4s ease,
        box-shadow 0.45s ease;
}


.gallery-item:hover {
    transform: translateY(-5px);

    border-color: rgba(208, 173, 112, 0.35);

    box-shadow:
        0 22px 45px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   GRID VARIATIONS
========================================================= */

.gallery-item-large {
    grid-column: span 2;

    grid-row: span 2;
}


.gallery-item-tall {
    grid-row: span 2;
}


.gallery-item-wide {
    grid-column: span 2;
}


/* =========================================================
   IMAGE
========================================================= */

.gallery-item img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transform: scale(1.001);

    transition:
        transform 1s cubic-bezier(.16,.65,.25,1),
        filter 0.6s ease;
}


.gallery-item:hover img {
    transform: scale(1.09);

    filter:
        brightness(0.82)
        saturate(1.08);
}


/* =========================================================
   IMAGE DARKEN
========================================================= */

.gallery-item::before {
    content: '';

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(15, 13, 12, 0.02) 25%,
            rgba(15, 13, 12, 0.78) 100%
        );

    opacity: 0;

    transition:
        opacity 0.45s ease;
}


.gallery-item:hover::before {
    opacity: 1;
}


/* =========================================================
   OVERLAY
========================================================= */

.gallery-overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    display: flex;

    align-items: flex-end;

    padding: 25px;

    background:
        linear-gradient(
            to top,
            rgba(15, 13, 12, 0.92) 0%,
            rgba(15, 13, 12, 0.35) 45%,
            transparent 75%
        );

    opacity: 0;

    transition:
        opacity 0.45s ease;
}


.gallery-item:hover .gallery-overlay {
    opacity: 1;
}


/* =========================================================
   OVERLAY CONTENT
========================================================= */

.gallery-overlay-content {
    position: relative;

    width: 100%;

    padding-right: 45px;

    transform: translateY(18px);

    transition:
        transform 0.5s cubic-bezier(.2,.65,.3,1);
}


.gallery-item:hover .gallery-overlay-content {
    transform: translateY(0);
}


.gallery-overlay-content > span {
    display: block;

    margin-bottom: 7px;

    font-family: 'Montserrat', sans-serif;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 2.2px;

    text-transform: uppercase;

    color: #d0ad70;
}


.gallery-overlay-content h3 {
    margin: 0;

    font-family: 'Cinzel', serif;

    font-size: 18px;

    font-weight: 500;

    line-height: 1.35;

    color: #ffffff;
}


/* =========================================================
   VIEW BUTTON
========================================================= */

.gallery-view {
    position: absolute;

    right: 0;

    bottom: 0;

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(208, 173, 112, 0.65);

    border-radius: 50%;

    font-size: 17px;

    font-weight: 300;

    color: #d0ad70;

    background: rgba(23, 21, 19, 0.25);

    backdrop-filter: blur(5px);

    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}


.gallery-item:hover .gallery-view {
    background: #d0ad70;

    color: #171513;

    transform: rotate(45deg);
}


/* =========================================================
   IMAGE CORNER DETAIL
========================================================= */

.gallery-item-large::after {
    content: '';

    position: absolute;

    top: 16px;
    right: 16px;

    width: 35px;
    height: 35px;

    z-index: 3;

    border-top: 1px solid rgba(208, 173, 112, 0.7);

    border-right: 1px solid rgba(208, 173, 112, 0.7);

    opacity: 0;

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}


.gallery-item-large:hover::after {
    opacity: 1;

    transform: translate(-5px, 5px);
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.gallery-bottom {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 22px;

    margin-top: 60px;

    padding-top: 30px;

    border-top: 1px solid rgba(208, 173, 112, 0.12);
}


.gallery-bottom-line {
    width: 75px;

    height: 1px;

    background: rgba(208, 173, 112, 0.25);
}


.gallery-bottom p {
    margin: 0;

    font-family: 'Montserrat', sans-serif;

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 1px;

    color: rgba(255, 255, 255, 0.42);
}


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

.gallery-cta {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 22px;

    background: #d0ad70;

    overflow: hidden;

    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;

    text-transform: uppercase;

    text-decoration: none;

    color: #171513;

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


.gallery-cta::before {
    content: '';

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

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

    transform: skewX(-20deg);

    transition:
        left 0.5s ease;
}


.gallery-cta:hover::before {
    left: 120%;
}


.gallery-cta:hover {
    transform: translateY(-4px);

    background: #ffffff;

    box-shadow:
        0 12px 30px rgba(208, 173, 112, 0.16);
}


.gallery-cta span {
    position: relative;

    z-index: 2;

    font-size: 15px;
}


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

@media (max-width: 1100px) {

    .gallery-container {
        padding: 0 40px;
    }


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

        grid-auto-rows: 215px;
    }


    .gallery-item-large {
        grid-column: span 2;
    }


    .gallery-item-wide {
        grid-column: span 2;
    }

}


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

@media (max-width: 900px) {

    .gallery-section {
        padding: 110px 0;
    }


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

        grid-auto-rows: 220px;
    }


    .gallery-item-large {
        grid-column: span 2;

        grid-row: span 2;
    }


    .gallery-item-wide {
        grid-column: span 2;
    }

}


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

@media (max-width: 767px) {

    .gallery-section {
        padding: 90px 0;
    }


    .gallery-container {
        padding: 0 20px;
    }


    .gallery-header {
        margin-bottom: 38px;
    }


    .gallery-title {
        font-size: 40px;

        letter-spacing: -0.3px;
    }


    .gallery-intro {
        font-size: 11px;

        line-height: 1.85;
    }


    /* FILTERS */

    .gallery-filters {
        justify-content: flex-start;

        flex-wrap: nowrap;

        overflow-x: auto;

        gap: 7px;

        margin-bottom: 28px;

        padding-bottom: 8px;

        scrollbar-width: none;
    }


    .gallery-filters::-webkit-scrollbar {
        display: none;
    }


    .gallery-filter {
        flex-shrink: 0;

        padding: 9px 14px;

        font-size: 7px;
    }


    /* GRID */

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

        grid-auto-rows: 175px;

        gap: 8px;
    }


    .gallery-item-large {
        grid-column: span 2;

        grid-row: span 2;
    }


    .gallery-item-tall {
        grid-row: span 2;
    }


    .gallery-item-wide {
        grid-column: span 2;
    }


    /* ALWAYS SHOW CONTENT ON MOBILE */

    .gallery-overlay {
        opacity: 1;

        padding: 13px;

        background:
            linear-gradient(
                to top,
                rgba(15, 13, 12, 0.9),
                rgba(15, 13, 12, 0.15) 75%
            );
    }


    .gallery-overlay-content {
        transform: translateY(0);

        padding-right: 35px;
    }


    .gallery-overlay-content > span {
        margin-bottom: 4px;

        font-size: 5.5px;

        letter-spacing: 1.5px;
    }


    .gallery-overlay-content h3 {
        font-size: 11px;

        line-height: 1.3;
    }


    .gallery-view {
        width: 28px;

        height: 28px;

        font-size: 13px;
    }


    /* REMOVE DESKTOP HOVER LIFT */

    .gallery-item:hover {
        transform: none;

        box-shadow: none;
    }


    .gallery-item:hover img {
        transform: scale(1.03);
    }


    .gallery-item-large::after {
        display: none;
    }


    /* CTA */

    .gallery-bottom {
        flex-direction: column;

        gap: 14px;

        margin-top: 42px;

        padding-top: 25px;
    }


    .gallery-bottom-line {
        display: none;
    }


    .gallery-bottom p {
        font-size: 8px;

        text-align: center;
    }


    .gallery-cta {
        padding: 13px 19px;
    }


    /* BACKGROUND */

    .gallery-section::before {
        width: 350px;

        height: 350px;

        top: -180px;

        right: -180px;
    }


    .gallery-section::after {
        width: 250px;

        height: 250px;

        bottom: -170px;

        left: -150px;
    }

}


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

@media (max-width: 400px) {

    .gallery-container {
        padding: 0 16px;
    }


    .gallery-title {
        font-size: 35px;
    }


    .gallery-grid {
        grid-auto-rows: 150px;

        gap: 7px;
    }


    .gallery-overlay {
        padding: 10px;
    }


    .gallery-overlay-content h3 {
        font-size: 9.5px;
    }


    .gallery-overlay-content > span {
        font-size: 5px;

        letter-spacing: 1.2px;
    }


    .gallery-view {
        width: 25px;

        height: 25px;

        font-size: 12px;
    }


    .gallery-cta {
        padding: 12px 17px;

        font-size: 7px;
    }

}


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

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

    .gallery-item,
    .gallery-item img,
    .gallery-overlay,
    .gallery-overlay-content,
    .gallery-view,
    .gallery-filter,
    .gallery-cta {
        transition: none;
    }

}

/* =========================================================
   SALON TEENA
   PREMIUM CONTACT SECTION
========================================================= */

.contact-section {
    position: relative;

    width: 100%;

    padding: 145px 0 0;

    overflow: hidden;

    background: #171513;

    color: #ffffff;

    isolation: isolate;
}


/* =========================================================
   AMBIENT BACKGROUND
========================================================= */

.contact-section::before {
    content: '';

    position: absolute;

    width: 650px;
    height: 650px;

    top: -360px;
    right: -260px;

    border: 1px solid rgba(208, 173, 112, 0.07);

    border-radius: 50%;

    pointer-events: none;
}


.contact-section::after {
    content: '';

    position: absolute;

    width: 420px;
    height: 420px;

    bottom: -280px;
    left: -230px;

    border: 1px solid rgba(208, 173, 112, 0.06);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   BACKGROUND TEXT
========================================================= */

.contact-bg-text {
    position: absolute;

    right: -90px;

    top: 10px;

    font-family: 'Cinzel', serif;

    font-size: clamp(180px, 22vw, 350px);

    line-height: 1;

    letter-spacing: 8px;

    color: rgba(208, 173, 112, 0.035);

    pointer-events: none;

    user-select: none;
}


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

.contact-container {
    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 1450px;

    margin: 0 auto;

    padding: 0 60px 120px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(420px, 0.92fr);

    align-items: center;

    gap: 100px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.contact-content {
    max-width: 700px;
}


.contact-eyebrow {
    color: #d0ad70;
}


.contact-eyebrow .section-eyebrow-line {
    background: #d0ad70;
}


/* =========================================================
   TITLE
========================================================= */

.contact-title {
    margin: 0;

    font-family: 'Cinzel', serif;

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

    font-weight: 500;

    line-height: 1.1;

    letter-spacing: -0.8px;

    color: #ffffff;
}


.contact-title span {
    display: block;

    color: #d0ad70;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.contact-description {
    max-width: 600px;

    margin: 28px 0 0;

    font-family: 'Montserrat', sans-serif;

    font-size: 13px;

    line-height: 1.95;

    color: rgba(255, 255, 255, 0.58);
}


/* =========================================================
   ACTION BUTTONS
========================================================= */

.contact-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 38px;
}


.contact-btn {
    position: relative;

    min-width: 195px;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 16px 18px;

    overflow: hidden;

    border: 1px solid rgba(208, 173, 112, 0.4);

    font-family: 'Montserrat', sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    text-decoration: none;

    color: #ffffff;

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


.contact-btn::before {
    content: '';

    position: absolute;

    top: 0;

    left: -110%;

    width: 90%;

    height: 100%;

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

    transform: skewX(-20deg);

    transition:
        left 0.55s ease;
}


.contact-btn:hover::before {
    left: 120%;
}


.contact-btn:hover {
    transform: translateY(-4px);

    border-color: #d0ad70;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.18);
}


.contact-btn-icon,
.contact-btn-arrow {
    position: relative;

    z-index: 2;
}


.contact-btn-icon {
    font-size: 14px;

    color: #d0ad70;
}


.contact-btn-arrow {
    margin-left: auto;

    font-size: 15px;

    color: #d0ad70;

    transition:
        transform 0.35s ease;
}


.contact-btn:hover .contact-btn-arrow {
    transform: translateX(6px);
}


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

.contact-btn-primary {
    background: #d0ad70;

    border-color: #d0ad70;

    color: #171513;
}


.contact-btn-primary .contact-btn-icon,
.contact-btn-primary .contact-btn-arrow {
    color: #171513;
}


.contact-btn-primary:hover {
    background: #ffffff;

    border-color: #ffffff;

    color: #171513;
}


/* =========================================================
   WHATSAPP
========================================================= */

.contact-btn-whatsapp {
    background: rgba(255, 255, 255, 0.015);
}


.contact-btn-whatsapp:hover {
    background: rgba(208, 173, 112, 0.08);
}


/* =========================================================
   TRUST
========================================================= */

.contact-trust {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-top: 38px;

    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 1.8px;

    line-height: 1.6;

    text-transform: uppercase;

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


.contact-trust-icon {
    color: #d0ad70;

    font-size: 14px;
}


/* =========================================================
   CONTACT INFO CARD
========================================================= */

.contact-info-wrapper {
    position: relative;

    padding: 36px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );

    border: 1px solid rgba(208, 173, 112, 0.2);

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.18);

    backdrop-filter: blur(10px);
}


.contact-info-wrapper::before {
    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        #d0ad70,
        transparent
    );

    opacity: 0.8;
}


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

.contact-info-header {
    padding-bottom: 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2.2px;

    text-transform: uppercase;

    color: #d0ad70;
}


/* =========================================================
   INFO LIST
========================================================= */

.contact-info-list {
    display: flex;

    flex-direction: column;
}


/* =========================================================
   INFO ITEM
========================================================= */

.contact-info-item {
    position: relative;

    display: flex;

    align-items: center;

    gap: 17px;

    padding: 22px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);

    text-decoration: none;

    color: #ffffff;

    transition:
        padding-left 0.35s ease,
        border-color 0.35s ease;
}


.contact-info-item:last-child {
    border-bottom: none;
}


.contact-info-item:hover {
    padding-left: 8px;

    border-color: rgba(208, 173, 112, 0.2);
}


/* =========================================================
   INFO ICON
========================================================= */

.contact-info-icon {
    position: relative;

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background: rgba(208, 173, 112, 0.04);

    border: 1px solid rgba(208, 173, 112, 0.35);

    color: #d0ad70;

    font-size: 15px;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}


.contact-info-item:hover .contact-info-icon {
    background: #d0ad70;

    color: #171513;

    transform: rotate(5deg);
}


/* =========================================================
   INFO CONTENT
========================================================= */

.contact-info-content {
    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;
}


.contact-info-label {
    font-family: 'Montserrat', sans-serif;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 1.8px;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.36);
}


.contact-info-content strong {
    font-family: 'Montserrat', sans-serif;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.45;

    color: #ffffff;

    word-break: break-word;
}


.contact-info-content p {
    margin: 2px 0 0;

    font-family: 'Montserrat', sans-serif;

    font-size: 10px;

    line-height: 1.7;

    color: rgba(255, 255, 255, 0.52);
}


/* =========================================================
   INFO ARROW
========================================================= */

.contact-info-arrow {
    margin-left: auto;

    flex-shrink: 0;

    font-size: 17px;

    color: rgba(208, 173, 112, 0.6);

    transition:
        transform 0.35s ease,
        color 0.35s ease;
}


.contact-info-item:hover .contact-info-arrow {
    transform: translateX(6px);

    color: #d0ad70;
}


/* =========================================================
   MAP LINK
========================================================= */

.contact-map-link {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-top: 24px;

    padding: 15px;

    overflow: hidden;

    background: rgba(208, 173, 112, 0.07);

    border: 1px solid rgba(208, 173, 112, 0.2);

    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    text-decoration: none;

    color: #d0ad70;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}


.contact-map-link:hover {
    background: #d0ad70;

    color: #171513;

    transform: translateY(-3px);
}


.contact-map-icon {
    font-size: 14px;
}


/* =========================================================
   MAP
========================================================= */

.contact-map-wrapper {
    position: relative;

    width: 100%;

    height: 430px;

    overflow: hidden;

    background:
        linear-gradient(
            rgba(23, 21, 19, 0.12),
            rgba(23, 21, 19, 0.35)
        ),
        url('/assets/images/contact/salon-location.jpg');

    background-size: cover;

    background-position: center;

    border-top: 1px solid rgba(208, 173, 112, 0.22);

    filter: grayscale(18%);

    transition:
        filter 0.6s ease;
}


.contact-map-wrapper:hover {
    filter: grayscale(0);
}


/* =========================================================
   MAP OVERLAY
========================================================= */

.contact-map-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    padding: 38px;

    background:
        linear-gradient(
            to top,
            rgba(15, 13, 12, 0.9) 0%,
            rgba(15, 13, 12, 0.3) 50%,
            rgba(15, 13, 12, 0.05) 100%
        );
}


/* =========================================================
   MAP CARD
========================================================= */

.contact-map-card {
    position: relative;

    width: min(420px, 100%);

    padding: 27px;

    background:
        rgba(23, 21, 19, 0.94);

    border: 1px solid rgba(208, 173, 112, 0.35);

    text-align: center;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.3);

    backdrop-filter: blur(12px);
}


.contact-map-card::before {
    content: '';

    position: absolute;

    top: 0;

    left: 50%;

    width: 55px;

    height: 2px;

    background: #d0ad70;

    transform: translateX(-50%);
}


.contact-map-card-label {
    display: block;

    font-family: 'Montserrat', sans-serif;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 2.2px;

    text-transform: uppercase;

    color: #d0ad70;
}


.contact-map-card h3 {
    margin: 9px 0 5px;

    font-family: 'Cinzel', serif;

    font-size: 24px;

    font-weight: 500;

    line-height: 1.3;

    color: #ffffff;
}


.contact-map-card p {
    margin: 0 0 16px;

    font-family: 'Montserrat', sans-serif;

    font-size: 9px;

    line-height: 1.7;

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


.contact-map-card a {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    text-decoration: none;

    color: #d0ad70;

    transition:
        color 0.3s ease;
}


.contact-map-card a:hover {
    color: #ffffff;
}


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

@media (max-width: 1100px) {

    .contact-container {
        grid-template-columns: 1fr;

        gap: 65px;

        padding: 0 40px 100px;
    }


    .contact-content {
        max-width: 760px;

        margin: 0 auto;
    }


    .contact-info-wrapper {
        width: min(720px, 100%);

        margin: 0 auto;
    }

}


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

@media (max-width: 900px) {

    .contact-section {
        padding-top: 110px;
    }


    .contact-container {
        gap: 55px;
    }


    .contact-title {
        font-size: 55px;
    }


    .contact-map-wrapper {
        height: 390px;
    }

}


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

@media (max-width: 767px) {

    .contact-section {
        padding-top: 90px;
    }


    .contact-container {
        padding: 0 20px 80px;

        gap: 45px;
    }


    .contact-content {
        text-align: center;
    }


    .contact-eyebrow {
        justify-content: center;
    }


    .contact-title {
        font-size: 40px;

        line-height: 1.15;
    }


    .contact-description {
        margin-top: 22px;

        font-size: 11px;

        line-height: 1.85;
    }


    /* BUTTONS */

    .contact-actions {
        flex-direction: column;

        gap: 10px;

        margin-top: 30px;
    }


    .contact-btn {
        width: 100%;

        min-width: 0;

        justify-content: flex-start;

        padding: 15px 16px;
    }


    /* TRUST */

    .contact-trust {
        justify-content: center;

        margin-top: 28px;

        font-size: 7px;

        letter-spacing: 1.4px;

        line-height: 1.7;
    }


    /* INFO CARD */

    .contact-info-wrapper {
        width: 100%;

        padding: 24px 20px;
    }


    .contact-info-header {
        padding-bottom: 17px;

        font-size: 7px;
    }


    .contact-info-item {
        gap: 12px;

        padding: 18px 0;
    }


    .contact-info-icon {
        width: 38px;

        height: 38px;

        font-size: 13px;
    }


    .contact-info-label {
        font-size: 6px;

        letter-spacing: 1.4px;
    }


    .contact-info-content strong {
        font-size: 11px;
    }


    .contact-info-content p {
        font-size: 8px;

        line-height: 1.6;
    }


    .contact-info-arrow {
        font-size: 14px;
    }


    .contact-map-link {
        margin-top: 20px;

        padding: 13px;

        font-size: 7px;
    }


    /* MAP */

    .contact-map-wrapper {
        height: 350px;
    }


    .contact-map-overlay {
        padding: 20px;
    }


    .contact-map-card {
        padding: 21px;
    }


    .contact-map-card h3 {
        font-size: 20px;
    }


    .contact-map-card p {
        font-size: 8px;
    }


    .contact-bg-text {
        display: none;
    }


    .contact-section::before {
        width: 350px;

        height: 350px;

        top: -190px;

        right: -180px;
    }


    .contact-section::after {
        width: 250px;

        height: 250px;

        bottom: -160px;

        left: -150px;
    }

}


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

@media (max-width: 400px) {

    .contact-container {
        padding-left: 16px;

        padding-right: 16px;

        padding-bottom: 70px;
    }


    .contact-title {
        font-size: 35px;
    }


    .contact-description {
        font-size: 10px;
    }


    .contact-info-wrapper {
        padding: 20px 16px;
    }


    .contact-info-item {
        gap: 10px;
    }


    .contact-info-icon {
        width: 35px;

        height: 35px;

        font-size: 12px;
    }


    .contact-info-content strong {
        font-size: 10px;
    }


    .contact-info-content p {
        font-size: 7.5px;
    }


    .contact-map-wrapper {
        height: 320px;
    }


    .contact-map-overlay {
        padding: 15px;
    }


    .contact-map-card {
        padding: 18px;
    }


    .contact-map-card h3 {
        font-size: 18px;
    }

}


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

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

    .contact-btn,
    .contact-btn::before,
    .contact-btn-arrow,
    .contact-info-item,
    .contact-info-icon,
    .contact-info-arrow,
    .contact-map-link,
    .contact-map-wrapper {
        transition: none;
    }

}

/* =========================================================
   SALON TEENA
   PREMIUM FOOTER
========================================================= */

.site-footer {
    position: relative;

    width: 100%;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(208, 173, 112, 0.055),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(208, 173, 112, 0.035),
            transparent 30%
        ),
        #11100f;

    color: #ffffff;

    overflow: hidden;
}


/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.site-footer::before {
    content: 'TEENA';

    position: absolute;

    right: -50px;

    bottom: 35px;

    font-family: 'Cinzel', serif;

    font-size: clamp(140px, 20vw, 300px);

    font-weight: 400;

    line-height: 1;

    letter-spacing: 8px;

    color: rgba(208, 173, 112, 0.025);

    pointer-events: none;

    user-select: none;
}


.site-footer::after {
    content: '';

    position: absolute;

    width: 500px;

    height: 500px;

    left: -300px;

    top: -280px;

    border: 1px solid rgba(208, 173, 112, 0.07);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   TOP GOLD LINE
========================================================= */

.footer-top-line {
    position: relative;

    width: 100%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(208, 173, 112, 0.15) 15%,
            rgba(208, 173, 112, 0.75) 50%,
            rgba(208, 173, 112, 0.15) 85%,
            transparent 100%
        );
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.footer-container {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1450px;

    margin: 0 auto;

    padding: 90px 60px 75px;

    display: grid;

    grid-template-columns:
        1.6fr
        0.8fr
        1fr;

    gap: 90px;
}


/* =========================================================
   BRAND AREA
========================================================= */

.footer-brand {
    max-width: 430px;
}


.footer-logo {
    position: relative;

    display: inline-block;

    font-family: 'Cinzel', serif;

    font-size: 34px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 1.5px;

    text-decoration: none;

    color: #ffffff;

    transition:
        color 0.35s ease,
        transform 0.35s ease;
}


.footer-logo::after {
    content: '';

    position: absolute;

    left: 0;

    bottom: -9px;

    width: 35px;

    height: 1px;

    background: #d0ad70;

    transition:
        width 0.35s ease;
}


.footer-logo:hover {
    color: #d0ad70;

    transform: translateY(-2px);
}


.footer-logo:hover::after {
    width: 65px;
}


.footer-business-name {
    margin: 21px 0 0;

    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #d0ad70;
}


.footer-tagline {
    max-width: 330px;

    margin: 24px 0 0;

    font-family: 'Cinzel', serif;

    font-size: 15px;

    font-style: italic;

    line-height: 1.8;

    color: rgba(255, 255, 255, 0.42);
}


.footer-brand-description {
    max-width: 360px;

    margin: 20px 0 0;

    font-family: 'Montserrat', sans-serif;

    font-size: 10px;

    line-height: 1.9;

    color: rgba(255, 255, 255, 0.32);
}


/* =========================================================
   SOCIAL LINKS
========================================================= */

.footer-social {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 28px;
}


.footer-social a {
    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(208, 173, 112, 0.2);

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

    font-family: 'Montserrat', sans-serif;

    font-size: 9px;

    text-decoration: none;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.footer-social a:hover {
    background: #d0ad70;

    border-color: #d0ad70;

    color: #171513;

    transform: translateY(-4px);
}


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

.footer-heading {
    position: relative;

    display: inline-block;

    margin: 0 0 24px;

    padding-bottom: 10px;

    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #d0ad70;
}


.footer-heading::after {
    content: '';

    position: absolute;

    left: 0;

    bottom: 0;

    width: 22px;

    height: 1px;

    background: rgba(208, 173, 112, 0.55);
}


/* =========================================================
   NAVIGATION
========================================================= */

.footer-nav {
    display: flex;

    flex-direction: column;

    gap: 13px;
}


.footer-nav a {
    position: relative;

    width: fit-content;

    padding-left: 0;

    font-family: 'Montserrat', sans-serif;

    font-size: 10px;

    font-weight: 500;

    text-decoration: none;

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

    transition:
        color 0.3s ease,
        padding-left 0.3s ease;
}


.footer-nav a::before {
    content: '';

    position: absolute;

    left: -13px;

    top: 50%;

    width: 6px;

    height: 1px;

    background: #d0ad70;

    opacity: 0;

    transform: translateY(-50%);

    transition:
        opacity 0.3s ease,
        left 0.3s ease;
}


.footer-nav a:hover {
    padding-left: 8px;

    color: #ffffff;
}


.footer-nav a:hover::before {
    left: -5px;

    opacity: 1;
}


/* =========================================================
   CONTACT
========================================================= */

.footer-contact {
    display: flex;

    flex-direction: column;
}


.footer-contact-item {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin-bottom: 17px;

    text-decoration: none;

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

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.footer-contact-item:hover {
    color: #ffffff;

    transform: translateX(4px);
}


.footer-contact-icon {
    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border: 1px solid rgba(208, 173, 112, 0.25);

    font-size: 11px;

    color: #d0ad70;
}


.footer-contact-content {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.footer-contact-label {
    font-family: 'Montserrat', sans-serif;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.28);
}


.footer-contact-item strong {
    font-family: 'Montserrat', sans-serif;

    font-size: 10px;

    font-weight: 500;

    line-height: 1.6;

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


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

.footer-cta {
    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    max-width: 240px;

    margin-top: 10px;

    padding: 13px 15px;

    border: 1px solid rgba(208, 173, 112, 0.35);

    background: rgba(208, 173, 112, 0.06);

    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;

    text-transform: uppercase;

    text-decoration: none;

    color: #d0ad70;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.footer-cta span {
    font-size: 15px;

    transition:
        transform 0.3s ease;
}


.footer-cta:hover {
    background: #d0ad70;

    color: #171513;

    transform: translateY(-3px);
}


.footer-cta:hover span {
    transform: translateX(5px);
}


/* =========================================================
   DECORATIVE DIVIDER
========================================================= */

.footer-divider {
    position: relative;

    z-index: 2;

    width: calc(100% - 120px);

    max-width: 1330px;

    height: 1px;

    margin: 0 auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.08),
            transparent
        );
}


/* =========================================================
   BOTTOM
========================================================= */

.footer-bottom {
    position: relative;

    z-index: 2;
}


.footer-bottom-inner {
    width: 100%;

    max-width: 1450px;

    margin: 0 auto;

    padding: 23px 60px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


.footer-bottom-inner p {
    margin: 0;

    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    line-height: 1.6;

    letter-spacing: 0.5px;

    color: rgba(255, 255, 255, 0.25);
}


.footer-bottom-center {
    display: flex;

    align-items: center;

    gap: 12px;
}


.footer-bottom-divider {
    width: 28px;

    height: 1px;

    background: rgba(208, 173, 112, 0.3);
}


.footer-bottom-center span {
    font-family: 'Montserrat', sans-serif;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.25);
}


.footer-credit {
    font-family: 'Cinzel', serif !important;

    font-size: 9px !important;

    letter-spacing: 0.5px !important;

    color: rgba(208, 173, 112, 0.55) !important;
}


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

@media (max-width: 1100px) {

    .footer-container {
        padding: 75px 40px 65px;

        gap: 55px;
    }


    .footer-divider {
        width: calc(100% - 80px);
    }


    .footer-bottom-inner {
        padding: 22px 40px;
    }

}


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

@media (max-width: 900px) {

    .footer-container {
        grid-template-columns:
            1.3fr
            1fr;

        gap: 55px;
    }


    .footer-contact {
        grid-column: span 2;
    }


    .footer-brand {
        max-width: 500px;
    }

}


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

@media (max-width: 767px) {

    .site-footer::before {
        right: -80px;

        bottom: 80px;

        font-size: 120px;

        letter-spacing: 4px;
    }


    .footer-container {
        grid-template-columns: 1fr;

        gap: 42px;

        padding: 65px 20px 50px;
    }


    .footer-brand,
    .footer-contact {
        grid-column: auto;

        max-width: none;
    }


    .footer-logo {
        font-size: 28px;
    }


    .footer-business-name {
        font-size: 7px;

        letter-spacing: 1.6px;
    }


    .footer-tagline {
        font-size: 13px;

        margin-top: 20px;
    }


    .footer-brand-description {
        font-size: 9px;

        line-height: 1.8;
    }


    .footer-social {
        margin-top: 24px;
    }


    .footer-heading {
        margin-bottom: 20px;
    }


    .footer-nav {
        gap: 12px;
    }


    .footer-nav a {
        font-size: 10px;
    }


    .footer-contact-item {
        margin-bottom: 15px;
    }


    .footer-cta {
        max-width: none;

        margin-top: 5px;
    }


    .footer-divider {
        width: calc(100% - 40px);
    }


    .footer-bottom-inner {
        padding: 20px;

        flex-direction: column;

        justify-content: center;

        text-align: center;

        gap: 10px;
    }


    .footer-bottom-center {
        order: 2;
    }


    .footer-credit {
        order: 3;
    }

}


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

@media (max-width: 400px) {

    .footer-container {
        padding-left: 16px;

        padding-right: 16px;
    }


    .footer-logo {
        font-size: 26px;
    }


    .footer-divider {
        width: calc(100% - 32px);
    }


    .footer-bottom-inner {
        padding-left: 16px;

        padding-right: 16px;
    }


    .footer-bottom-inner p {
        font-size: 7px;
    }

}


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

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

    .site-footer *,
    .site-footer *::before,
    .site-footer *::after {
        transition: none !important;
    }

}

.appointment-popup {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}

.appointment-popup.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.appointment-popup-open {
    overflow: hidden;
}

/* =========================================================
   SALON TEENA
   APPOINTMENT POPUP
   BLACK • GOLD • LUXURY
========================================================= */


/* =========================================================
   POPUP WRAPPER
========================================================= */

.appointment-popup {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;
}


/* =========================================================
   ACTIVE STATE
========================================================= */

.appointment-popup.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   OVERLAY
========================================================= */

.appointment-overlay {
    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(208, 173, 112, 0.08),
            transparent 45%
        ),
        rgba(5, 5, 5, 0.88);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    opacity: 0;

    transition:
        opacity 0.45s ease;
}


.appointment-popup.active .appointment-overlay {
    opacity: 1;
}


/* =========================================================
   MODAL
========================================================= */

.appointment-modal {
    position: relative;

    z-index: 2;

    width: min(520px, 100%);

    max-height: calc(100vh - 50px);

    overflow-y: auto;

    padding: 42px;

    background:
        linear-gradient(
            145deg,
            #211e1b 0%,
            #171513 55%,
            #11100f 100%
        );

    border: 1px solid rgba(208, 173, 112, 0.3);

    box-shadow:
        0 35px 100px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(208, 173, 112, 0.04);

    transform:
        translateY(35px)
        scale(0.96);

    opacity: 0;

    transition:
        transform 0.5s cubic-bezier(.22,.61,.36,1),
        opacity 0.4s ease;
}


.appointment-popup.active .appointment-modal {
    transform:
        translateY(0)
        scale(1);

    opacity: 1;
}


/* =========================================================
   GOLD TOP LINE
========================================================= */

.appointment-modal::before {
    content: '';

    position: absolute;

    top: 0;

    left: 12%;

    width: 76%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d0ad70,
            transparent
        );
}


/* =========================================================
   DECORATIVE CORNERS
========================================================= */

.appointment-modal::after {
    content: '';

    position: absolute;

    right: 18px;

    bottom: 18px;

    width: 45px;

    height: 45px;

    border-right: 1px solid rgba(208, 173, 112, 0.25);

    border-bottom: 1px solid rgba(208, 173, 112, 0.25);

    pointer-events: none;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.appointment-close {
    position: absolute;

    top: 17px;

    right: 17px;

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: 1px solid rgba(208, 173, 112, 0.28);

    border-radius: 50%;

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

    font-family: Arial, sans-serif;

    font-size: 23px;

    font-weight: 300;

    line-height: 1;

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

    cursor: pointer;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.appointment-close:hover {
    background: #d0ad70;

    border-color: #d0ad70;

    color: #171513;

    transform: rotate(90deg);
}


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

.appointment-header {
    padding-right: 40px;

    margin-bottom: 30px;
}


.appointment-eyebrow {
    display: block;

    margin-bottom: 12px;

    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2.8px;

    text-transform: uppercase;

    color: #d0ad70;
}


.appointment-header h2 {
    margin: 0;

    font-family: 'Cinzel', serif;

    font-size: clamp(32px, 5vw, 45px);

    font-weight: 500;

    line-height: 1.15;

    color: #ffffff;
}


.appointment-header h2 span {
    display: block;

    color: #d0ad70;
}


.appointment-header p {
    max-width: 390px;

    margin: 15px 0 0;

    font-family: 'Montserrat', sans-serif;

    font-size: 10px;

    line-height: 1.8;

    color: rgba(255, 255, 255, 0.48);
}


/* =========================================================
   FORM
========================================================= */

.appointment-form {
    display: flex;

    flex-direction: column;

    gap: 17px;
}


/* =========================================================
   FIELD
========================================================= */

.appointment-field {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


.appointment-field label {
    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.7px;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.52);
}


/* =========================================================
   INPUT / SELECT
========================================================= */

.appointment-field input,
.appointment-field select {
    width: 100%;

    height: 49px;

    padding: 0 15px;

    border: 1px solid rgba(208, 173, 112, 0.2);

    outline: none;

    border-radius: 0;

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

    font-family: 'Montserrat', sans-serif;

    font-size: 11px;

    color: #ffffff;

    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


.appointment-field input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}


.appointment-field input:focus,
.appointment-field select:focus {
    border-color: #d0ad70;

    background:
        rgba(208, 173, 112, 0.045);

    box-shadow:
        0 0 0 3px rgba(208, 173, 112, 0.06);
}


/* =========================================================
   SELECT
========================================================= */

.appointment-field select {
    appearance: none;

    -webkit-appearance: none;

    cursor: pointer;

    padding-right: 42px;

    background-image:
        linear-gradient(45deg, transparent 50%, #d0ad70 50%),
        linear-gradient(135deg, #d0ad70 50%, transparent 50%);

    background-position:
        calc(100% - 18px) 21px,
        calc(100% - 13px) 21px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat: no-repeat;
}


.appointment-field select option {
    background: #171513;

    color: #ffffff;
}


/* =========================================================
   DATE INPUT
========================================================= */

.appointment-field input[type="date"] {
    color-scheme: dark;

    cursor: pointer;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.appointment-submit {
    position: relative;

    width: 100%;

    min-height: 54px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-top: 7px;

    padding: 0 19px;

    overflow: hidden;

    border: 1px solid #d0ad70;

    background:
        linear-gradient(
            135deg,
            #d9b875,
            #b88d46
        );

    font-family: 'Montserrat', sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: #171513;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


.appointment-submit::before {
    content: '';

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255, 255, 255, 0.4) 48%,
            transparent 72%
        );

    transform: translateX(-120%);

    transition:
        transform 0.7s ease;
}


.appointment-submit:hover::before {
    transform: translateX(120%);
}


.appointment-submit:hover {
    transform: translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #f0d28c,
            #d0ad70
        );

    box-shadow:
        0 15px 35px rgba(208, 173, 112, 0.18);
}


.appointment-submit span {
    position: relative;

    z-index: 2;
}


.appointment-submit-arrow {
    font-size: 18px;

    transition:
        transform 0.3s ease;
}


.appointment-submit:hover
.appointment-submit-arrow {
    transform: translateX(5px);
}


/* =========================================================
   NOTE
========================================================= */

.appointment-note {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin: 3px 0 0;

    font-family: 'Montserrat', sans-serif;

    font-size: 8px;

    line-height: 1.6;

    text-align: center;

    color: rgba(255, 255, 255, 0.32);
}


.appointment-note span {
    color: #d0ad70;

    font-size: 10px;
}


/* =========================================================
   SCROLLBAR
========================================================= */

.appointment-modal::-webkit-scrollbar {
    width: 4px;
}


.appointment-modal::-webkit-scrollbar-track {
    background: transparent;
}


.appointment-modal::-webkit-scrollbar-thumb {
    background: rgba(208, 173, 112, 0.4);
}


.appointment-modal {
    scrollbar-width: thin;

    scrollbar-color:
        rgba(208, 173, 112, 0.4)
        transparent;
}


/* =========================================================
   BODY LOCK
========================================================= */

body.appointment-popup-open {
    overflow: hidden;
}


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

@media (max-width: 767px) {

    .appointment-popup {
        padding: 15px;
    }


    .appointment-modal {
        width: 100%;

        max-width: 500px;

        max-height: calc(100vh - 30px);

        padding: 32px 25px;
    }


    .appointment-header {
        margin-bottom: 25px;

        padding-right: 35px;
    }


    .appointment-header h2 {
        font-size: 34px;
    }


    .appointment-header p {
        font-size: 9px;

        line-height: 1.7;
    }


    .appointment-close {
        top: 14px;

        right: 14px;

        width: 34px;

        height: 34px;

        font-size: 20px;
    }


    .appointment-form {
        gap: 14px;
    }


    .appointment-field {
        gap: 7px;
    }


    .appointment-field label {
        font-size: 7px;
    }


    .appointment-field input,
    .appointment-field select {
        height: 47px;

        font-size: 10px;
    }


    .appointment-submit {
        min-height: 51px;

        font-size: 8px;
    }

}


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

@media (max-width: 400px) {

    .appointment-popup {
        padding: 10px;
    }


    .appointment-modal {
        max-height: calc(100vh - 20px);

        padding: 28px 19px;
    }


    .appointment-header {
        margin-bottom: 21px;
    }


    .appointment-header h2 {
        font-size: 29px;
    }


    .appointment-header p {
        margin-top: 10px;

        font-size: 8px;
    }


    .appointment-eyebrow {
        font-size: 7px;

        letter-spacing: 2px;
    }


    .appointment-field input,
    .appointment-field select {
        height: 45px;

        padding-left: 12px;

        font-size: 9px;
    }


    .appointment-submit {
        min-height: 49px;
    }


    .appointment-note {
        font-size: 7px;
    }

}


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

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

    .appointment-popup,
    .appointment-overlay,
    .appointment-modal,
    .appointment-close,
    .appointment-submit,
    .appointment-submit::before,
    .appointment-submit-arrow {

        transition: none !important;
    }

}