/* =====================================================
   MAISON BELLE - MAIN STYLE
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Georgia, "Times New Roman", serif;
    background: #fffaf7;
    color: #241c1b;
    overflow-x: hidden;
    transition: background 0.35s ease, color 0.35s ease;
}

img {
    width: 100%;
    display: block;
    object-fit: cover;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
}

ul {
    list-style: none;
}


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

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition:
        background 0.35s ease,
        box-shadow 0.35s ease,
        backdrop-filter 0.35s ease;
}

.site-header.scrolled {
    background: rgba(38, 28, 27, 0.97);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(14px);
}

.header-inner {
    width: min(1400px, 94%);
    min-height: 86px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}


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

.brand-logo {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
    color: #ffffff;
    transition: transform 0.3s ease;
}

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

.brand-symbol {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 21px;
}

.brand-name {
    font-family: Arial, sans-serif;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: 2.5px;
    line-height: 1.05;
}

.brand-name small {
    display: block;
    margin-top: 5px;
    font-size: 8px;
    letter-spacing: 3px;
    font-weight: 700;
    opacity: 0.82;
}


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

.desktop-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.desktop-nav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 27px;
}

.desktop-nav li {
    position: relative;
}

.desktop-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 12px 0;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.desktop-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 0;
    height: 2px;
    background: #e5b7a5;
    transition: width 0.3s ease;
}

.desktop-nav a:hover::after {
    width: 100%;
}

.arrow {
    font-size: 13px;
}

/* CURRENT PAGE HIGHLIGHT */

.desktop-nav > ul > li > a.active {
    color: #e5b7a5;
}

.desktop-nav > ul > li > a.active::after {
    width: 100%;
}
/* =====================================================
   DESKTOP DROPDOWN
===================================================== */

.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    min-width: 170px;
    padding: 9px;
    transform: translate(-50%, 12px);
    background: #ffffff;
    border: 1px solid rgba(160, 110, 95, 0.18);
    border-radius: 15px;
    box-shadow: 0 18px 45px rgba(48, 28, 24, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 0.28s ease;
}

.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.dropdown-menu a {
    width: 100%;
    padding: 12px 14px;
    color: #302321;
    border-radius: 9px;
    font-size: 13px;
}

.dropdown-menu a::after {
    display: none;
}

.dropdown-menu a:hover {
    background: #f4e5df;
}


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

.header-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}

.round-control {
    width: 43px;
    height: 43px;
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: #ffffff;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 900;
    transition: 0.3s ease;
}

.round-control:hover {
    transform: translateY(-2px) rotate(4deg);
    background: #ffffff;
    color: #251b19;
}

.theme-control {
    font-size: 18px;
}

.login-button {
    min-height: 43px;
    padding: 0 20px;
    border-radius: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #241b19;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 900;
    transition: 0.3s ease;
}

.login-button:hover {
    transform: translateY(-2px);
    background: #e9c3b5;
}


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

.mobile-menu-button {
    display: none;
    width: 38px;
    height: 38px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 9px;
    background: rgba(255,255,255,0.08);
    cursor: pointer;
    flex-shrink: 0;
}

.mobile-menu-button span {
    display: block;
    height: 2px;
    width: 100%;
    margin: 4px 0;
    background: #ffffff;
    border-radius: 4px;
}


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

.mobile-menu {
    display: none;
}

.mobile-nav-list {
    display: flex;
    flex-direction: column;
}

.mobile-nav-list > a,
.mobile-dropdown-btn {
    min-height: 46px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-align: left;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.mobile-submenu {
    display: none;
    padding: 3px 0 5px 18px;
    background: rgba(0,0,0,0.08);
}

.mobile-dropdown.open .mobile-submenu {
    display: block;
}

.mobile-submenu a {
    display: block;
    padding: 9px 18px;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
}

.mobile-plus {
    font-size: 18px;
}

.mobile-actions {
    padding: 15px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-actions .login-button {
    margin-left: auto;
}

.mobile-actions .round-control {
    width: 39px;
    height: 39px;
}


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

.hero-section {
    min-height: 760px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #ffffff;
}

.hero-image {
    position: absolute;
    inset: 0;
    background-image: url("../images/hero1.png");
    background-size: cover;
    background-position: center;
    animation: heroZoom 12s ease-in-out infinite alternate;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(27,18,17,0.88),
            rgba(27,18,17,0.46),
            rgba(27,18,17,0.2)
        );
}

.hero-content {
    position: relative;
    z-index: 2;
    width: min(1250px, 90%);
    margin: auto;
    padding-top: 80px;
}

.hero-small {
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 4px;
}

.hero-content h1 {
    max-width: 760px;
    margin: 18px 0;
    font-size: clamp(52px, 7vw, 94px);
    line-height: 0.96;
    font-weight: 500;
}

.hero-content h1 em {
    color: #edc0ae;
    font-style: italic;
}

.hero-content p {
    max-width: 570px;
    font-family: Arial, sans-serif;
    font-size: 17px;
    line-height: 1.8;
    color: #f8e9e3;
}

.hero-buttons {
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
}

.primary-button,
.outline-button {
    min-height: 49px;
    padding: 0 25px;
    border-radius: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 900;
    transition: 0.35s ease;
}

.primary-button {
    background: #e6b6a3;
    color: #251b19;
}

.primary-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(230,182,163,0.3);
}

.outline-button {
    border: 1px solid rgba(255,255,255,0.65);
    color: #ffffff;
}

.outline-button:hover {
    background: #ffffff;
    color: #241b19;
    transform: translateY(-4px);
}

.hero-decoration {
    position: absolute;
    z-index: 2;
    width: 10px;
    height: 10px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    animation: floatDot 4s ease-in-out infinite;
}

.hero-dot-one {
    right: 16%;
    top: 34%;
}

.hero-dot-two {
    right: 22%;
    bottom: 24%;
    animation-delay: 1s;
}


/* =====================================================
   GENERAL
===================================================== */

.section-padding {
    padding: 90px 5%;
}

.section-intro,
.section-heading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.section-label {
    display: inline-block;
    margin-bottom: 13px;
    color: #a46d5d;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
}

.section-heading h2,
.section-intro h2 {
    font-size: clamp(38px, 5vw, 60px);
    line-height: 1.05;
    font-weight: 500;
}

.section-heading p,
.section-intro p {
    max-width: 650px;
    margin: 17px auto 0;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: #6c5c58;
}


/* =====================================================
   WELCOME
===================================================== */

.welcome-section {
    background: #fffaf7;
}

.welcome-layout {
    width: min(1200px, 94%);
    margin: auto;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    align-items: center;
    gap: 55px;
}

.welcome-photo {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    min-height: 500px;
    box-shadow: 0 25px 60px rgba(75,44,36,0.16);
}

.welcome-photo img {
    height: 100%;
    min-height: 500px;
    transition: transform 0.8s ease;
}

.welcome-photo:hover img {
    transform: scale(1.06);
}

.photo-badge {
    position: absolute;
    right: 22px;
    bottom: 22px;
    padding: 12px 17px;
    border-radius: 25px;
    background: rgba(255,255,255,0.92);
    color: #5c4037;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}

.welcome-story {
    position: relative;
}

.story-number {
    color: #bd8d7b;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
}

.welcome-story h3 {
    margin: 13px 0 18px;
    font-size: clamp(34px, 4vw, 55px);
    line-height: 1.04;
    font-weight: 500;
}

.welcome-story > p {
    font-family: Arial, sans-serif;
    color: #6d5d59;
    font-size: 15px;
    line-height: 1.8;
}

.story-list {
    margin-top: 30px;
}

.story-list div {
    padding: 13px 0;
    border-bottom: 1px solid #e6d8d2;
    display: flex;
    align-items: center;
    gap: 18px;
}

.story-list strong {
    font-family: Arial, sans-serif;
    color: #a56e5d;
    font-size: 11px;
}

.story-list span {
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
}


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

.services-section {
    background: #f4e9e4;
}

.services-grid {
    width: min(1200px, 94%);
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.service-card {
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(130,86,72,0.1);
    box-shadow: 0 15px 35px rgba(70,42,34,0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.service-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 55px rgba(70,42,34,0.16);
}

.service-image {
    height: 270px;
    position: relative;
    overflow: hidden;
}

.service-image img {
    height: 100%;
    transition: transform 0.8s ease;
}

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

.image-number {
    position: absolute;
    top: 17px;
    left: 17px;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.92);
    color: #5c4037;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 900;
}

.service-card-content {
    padding: 25px;
}

.service-card-content > span {
    color: #a46d5d;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 3px;
}

.service-card-content h3 {
    margin: 8px 0;
    font-size: 30px;
    font-weight: 500;
}

.service-card-content p {
    min-height: 52px;
    font-family: Arial, sans-serif;
    color: #6d5d59;
    font-size: 14px;
    line-height: 1.65;
}

.service-card-content a {
    display: inline-block;
    margin-top: 17px;
    color: #8e5c4c;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 900;
}


/* =====================================================
   SEASONAL OFFERS
===================================================== */

.seasonal-section {
    background: #fffaf7;
}

.seasonal-top {
    width: min(1200px, 94%);
    margin: 0 auto 45px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
}

.seasonal-top h2 {
    max-width: 600px;
    font-size: clamp(40px, 5vw, 63px);
    line-height: 1;
    font-weight: 500;
}

.seasonal-top p {
    max-width: 380px;
    font-family: Arial, sans-serif;
    color: #6c5c58;
    font-size: 15px;
    line-height: 1.7;
}

.offers-grid {
    width: min(1200px, 94%);
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.offer-card {
    border-radius: 25px;
    overflow: hidden;
    background: #f3e6e0;
    transition: transform 0.4s ease;
}

.offer-card:hover {
    transform: translateY(-9px);
}

.featured-offer {
    background: #e9d0c6;
}

.offer-photo {
    height: 260px;
    position: relative;
    overflow: hidden;
}

.offer-photo img {
    height: 100%;
    transition: transform 0.8s ease;
}

.offer-card:hover .offer-photo img {
    transform: scale(1.08);
}

.offer-photo span {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 8px 13px;
    border-radius: 20px;
    background: #ffffff;
    color: #754c40;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 900;
}

.offer-info {
    padding: 25px;
}

.offer-info small {
    color: #a46d5d;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}

.offer-info h3 {
    margin: 7px 0;
    font-size: 29px;
    font-weight: 500;
}

.offer-info p {
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: #675651;
}

.offer-info strong {
    display: block;
    margin-top: 15px;
    font-family: Arial, sans-serif;
    font-size: 14px;
}


/* =====================================================
   FEATURE STRIP
===================================================== */

.feature-strip {
    min-height: 500px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #302321;
    color: #ffffff;
}

.feature-image {
    overflow: hidden;
}

.feature-image img {
    height: 100%;
    transition: transform 1s ease;
}

.feature-strip:hover .feature-image img {
    transform: scale(1.05);
}

.feature-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 70px 9%;
}

.feature-content .section-label {
    color: #e4ad9b;
}

.feature-content h2 {
    font-size: clamp(40px, 5vw, 65px);
    line-height: 1;
    font-weight: 500;
}

.feature-content p {
    max-width: 520px;
    margin: 22px 0;
    font-family: Arial, sans-serif;
    color: #e6d6d1;
    font-size: 15px;
    line-height: 1.8;
}

.text-link {
    color: #f0c4b2;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 900;
}


/* =====================================================
   PRICING
===================================================== */

.pricing-section {
    background: #f5e9e4;
}

.pricing-grid {
    width: min(1120px, 94%);
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 23px;
    align-items: stretch;
}

.price-card {
    position: relative;
    padding: 32px 28px;
    background: #ffffff;
    border: 1px solid rgba(120,80,65,0.1);
    border-radius: 25px;
    box-shadow: 0 15px 40px rgba(70,40,33,0.08);
    transition: 0.4s ease;
}

.price-card:hover {
    transform: translateY(-10px);
}

.price-featured {
    background: #302321;
    color: #ffffff;
    transform: translateY(-12px);
}

.price-featured:hover {
    transform: translateY(-20px);
}

.popular-tag {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 7px 10px;
    border-radius: 20px;
    background: #e4b09e;
    color: #2c201d;
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 900;
}

.price-label {
    color: #a46d5d;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}

.price-card h3 {
    margin: 12px 0;
    font-size: 30px;
    font-weight: 500;
}

.price {
    font-size: 42px;
    font-weight: 600;
}

.price small {
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
}

.price-line {
    height: 1px;
    margin: 22px 0;
    background: #e4d7d2;
}

.price-card ul li {
    position: relative;
    padding: 8px 0 8px 19px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #6a5a56;
}

.price-featured ul li {
    color: #e9dcda;
}

.price-card ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #ad735f;
    font-weight: 900;
}

.price-card > a {
    display: flex;
    margin-top: 23px;
    min-height: 45px;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    border: 1px solid #b98572;
    color: #754c40;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 900;
}

.price-featured > a {
    background: #ffffff;
    border-color: #ffffff;
    color: #302321;
}


/* =====================================================
   STATS
===================================================== */

.stats-section {
    padding: 55px 5%;
    background: #302321;
    color: #ffffff;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.stat-item {
    text-align: center;
    padding: 20px;
    border-right: 1px solid rgba(255,255,255,0.13);
}

.stat-item:last-child {
    border-right: 0;
}

.stat-item strong {
    display: block;
    font-size: 43px;
    font-weight: 500;
}

.stat-item span {
    display: block;
    margin-top: 7px;
    color: #d9c7c2;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}


/* =====================================================
   GALLERY
===================================================== */

.gallery-section {
    background: #fffaf7;
}

.gallery-grid {
    width: min(1200px, 94%);
    margin: auto;
    display: grid;
    grid-template-columns: 1.35fr 0.8fr 0.8fr;
    grid-template-rows: 245px 245px;
    gap: 16px;
}

.gallery-item {
    border-radius: 20px;
    overflow: hidden;
}

.gallery-item img {
    height: 100%;
    transition: transform 0.8s ease;
}

.gallery-item:hover img {
    transform: scale(1.07);
}

.gallery-large {
    grid-row: span 2;
}


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

.final-cta {
    padding: 105px 5%;
    background:
        linear-gradient(
            rgba(49,31,28,0.82),
            rgba(49,31,28,0.82)
        ),
        url("../images/nail.png")
        center / cover;
    color: #ffffff;
    text-align: center;
}

.cta-inner {
    max-width: 800px;
    margin: auto;
}

.cta-inner > span {
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
}

.cta-inner h2 {
    margin: 18px 0;
    font-size: clamp(48px, 7vw, 82px);
    line-height: 0.95;
    font-weight: 500;
}

.cta-inner h2 em {
    color: #edbaa7;
    font-style: italic;
}

.cta-inner p {
    max-width: 550px;
    margin: 0 auto 25px;
    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #eadbd6;
}


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

.site-footer {
    background: #211817;
    color: #ffffff;
}

.footer-main {
    width: min(1250px, 94%);
    margin: auto;
    padding: 70px 0 55px;
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 0.8fr 1fr;
    gap: 45px;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-family: Arial, sans-serif;
}

.footer-logo span {
    width: 42px;
    height: 42px;
    border: 1px solid #d7a897;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #e2ae9c;
}

.footer-logo strong {
    font-size: 19px;
    letter-spacing: 2px;
}

.footer-brand > p {
    max-width: 360px;
    margin-top: 20px;
    color: #d5c4bf;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.8;
}

.social-links {
    display: flex;
    gap: 9px;
    margin-top: 23px;
}

.social-links a {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 900;
    transition: 0.3s ease;
}

.social-links a:hover {
    background: #e4b09e;
    color: #211817;
    transform: translateY(-4px);
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-column h3 {
    margin-bottom: 10px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 900;
    color: #ffffff;
}

.footer-column a,
.footer-column p {
    color: #d6c4bf;
    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1.7;
}

.footer-column a:hover {
    color: #e8b9a8;
}

.footer-bottom {
    width: min(1250px, 94%);
    margin: auto;
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #bba9a4;
    font-family: Arial, sans-serif;
    font-size: 11px;
}

.footer-bottom div {
    display: flex;
    gap: 20px;
}

.footer-bottom a:hover {
    color: #ffffff;
}


/* =====================================================
   BACK TO TOP
===================================================== */

.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: #302321;
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: 0.3s ease;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    transform: translateY(-5px);
    background: #a56e5d;
}


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

.reveal {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes heroZoom {

    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.07);
    }

}

@keyframes floatDot {

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

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

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1100px) {

    .desktop-nav ul {
        gap: 16px;
    }

    .desktop-nav a {
        font-size: 12px;
    }

    .header-inner {
        width: 96%;
    }

    .brand-name {
        font-size: 16px;
    }

    .services-grid,
    .offers-grid,
    .pricing-grid {
        gap: 15px;
    }

}


@media (max-width: 850px) {

    .header-inner {
        min-height: 72px;
    }

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

    .mobile-menu-button {
        display: block;
    }

    .mobile-menu {
        display: block;
        position: absolute;
        top: 72px;
        left: 0;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        background: rgba(35,24,22,0.98);
        transition: max-height 0.35s ease;
    }

    .mobile-menu.open {
        max-height: 650px;
        overflow-y: auto;
    }

    .hero-section {
        min-height: 680px;
    }

    .hero-content {
        padding-top: 50px;
    }

    .welcome-layout,
    .feature-strip {
        grid-template-columns: 1fr;
    }

    .welcome-photo {
        min-height: 400px;
    }

    .welcome-photo img {
        min-height: 400px;
    }

    .feature-image {
        min-height: 360px;
    }

    .feature-content {
        padding: 65px 8%;
    }

    .services-grid,
    .offers-grid,
    .pricing-grid {
        grid-template-columns: 1fr;
        width: min(560px, 94%);
    }

    .service-image,
    .offer-photo {
        height: 280px;
    }

    .price-featured {
        transform: none;
    }

    .price-featured:hover {
        transform: translateY(-10px);
    }

    .stats-section {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-item {
        border-bottom: 1px solid rgba(255,255,255,0.13);
    }

    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 250px 250px;
    }

    .gallery-large {
        grid-row: span 1;
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;
    }

}


@media (max-width: 560px) {

    .header-inner {
        width: calc(100% - 24px);
    }

    .brand-symbol {
        width: 36px;
        height: 36px;
        font-size: 17px;
    }

    .brand-name {
        font-size: 14px;
        letter-spacing: 1.7px;
    }

    .brand-name small {
        font-size: 6px;
        letter-spacing: 2px;
    }

    .mobile-menu-button {
        width: 34px;
        height: 34px;
        padding: 7px;
    }

    .hero-section {
        min-height: 650px;
    }

    .hero-content {
        width: 90%;
    }

    .hero-content h1 {
        font-size: 49px;
    }

    .hero-content p {
        font-size: 14px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
        max-width: 280px;
    }

    .section-padding {
        padding: 70px 5%;
    }

    .section-heading,
    .section-intro {
        margin-bottom: 38px;
    }

    .section-heading h2,
    .section-intro h2 {
        font-size: 39px;
    }

    .seasonal-top {
        display: block;
    }

    .seasonal-top p {
        margin-top: 18px;
    }

    .gallery-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 210px);
    }

    .gallery-large {
        grid-row: span 1;
    }

    .stats-section {
        grid-template-columns: 1fr 1fr;
        padding: 40px 4%;
    }

    .stat-item strong {
        font-size: 34px;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 55px 0 40px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .back-to-top {
        right: 14px;
        bottom: 14px;
        width: 43px;
        height: 43px;
    }

}
/* =========================================================
   HOME 2 ONLY
   ========================================================= */

.home2-page {
    --h2-bg: #f7f4ef;
    --h2-white: #ffffff;
    --h2-dark: #171615;
    --h2-muted: #716d67;
    --h2-gold: #b88a52;
    --h2-line: rgba(23, 22, 21, 0.14);
    --h2-soft: #eee8df;
    background: var(--h2-bg);
    color: var(--h2-dark);
    overflow-x: hidden;
}

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

.home2-page img {
    max-width: 100%;
}

.home2-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: rgba(15, 15, 15, 0.97);
    backdrop-filter: blur(16px);
}

.home2-header-inner {
    min-height: 78px;
    width: min(1320px, 94%);
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.home2-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
    flex-shrink: 0;
}

.home2-logo-mark {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 18px;
}

.home2-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.home2-logo-text strong {
    font-size: 19px;
    letter-spacing: 2px;
    font-weight: 800;
}

.home2-logo-text small {
    margin-top: 5px;
    font-size: 8px;
    letter-spacing: 3px;
    font-weight: 700;
}

.home2-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
}

.home2-nav > a,
.home2-drop-btn {
    color: #fff;
    text-decoration: none;
    background: none;
    border: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: .25s ease;
}

.home2-nav > a:hover,
.home2-drop-btn:hover {
    color: #d9b27c;
}

.home2-nav-item {
    position: relative;
}

.home2-drop-btn {
    display: flex;
    align-items: center;
    gap: 5px;
}

.home2-dropdown-menu {
    position: absolute;
    top: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 175px;
    padding: 9px;
    background: #171615;
    border: 1px solid rgba(255,255,255,.13);
    box-shadow: 0 18px 45px rgba(0,0,0,.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: .25s ease;
    z-index: 99999;
}

.home2-dropdown.open .home2-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.home2-dropdown-menu a {
    display: block;
    padding: 11px 13px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    border-radius: 5px;
    transition: .2s ease;
}

.home2-dropdown-menu a:hover {
    background: rgba(255,255,255,.1);
    color: #d9b27c;
}

.home2-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.home2-action-btn {
    width: 39px;
    height: 39px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.45);
    background: transparent;
    color: #fff;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
}

.home2-action-btn:hover {
    background: #fff;
    color: #171615;
}

.home2-login-btn {
    padding: 11px 20px;
    background: #fff;
    color: #171615;
    border-radius: 30px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}

.home2-menu-btn {
    display: none;
    width: 38px;
    height: 38px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.5);
    background: transparent;
    cursor: pointer;
}

.home2-menu-btn span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 4px 0;
    background: #fff;
}


/* HERO */

.home2-hero {
    min-height: 650px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #171615;
}

.home2-hero-image {
    position: absolute;
    inset: 0;
    background-image: url("../images/hairstyle.png");
    background-size: cover;
    background-position: center;
    animation: home2HeroZoom 12s ease-in-out infinite alternate;
}

.home2-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(15,15,15,.84), rgba(15,15,15,.35), rgba(15,15,15,.08)),
        linear-gradient(0deg, rgba(15,15,15,.4), transparent 45%);
}

.home2-hero-content {
    position: relative;
    z-index: 2;
    width: min(1250px, 90%);
    margin: auto;
    color: #fff;
    padding: 90px 0;
}

.home2-eyebrow,
.home2-small-title {
    font-size: 11px;
    letter-spacing: 3px;
    font-weight: 800;
}

.home2-hero-content h1 {
    max-width: 650px;
    margin: 18px 0;
    font-size: clamp(48px, 7vw, 88px);
    line-height: .95;
    letter-spacing: -3px;
    font-weight: 800;
}

.home2-hero-content h1 em,
.home2-section-heading h2 em,
.home2-intro-text h2 span,
.home2-offer-intro h2 em,
.home2-moments-content h2 em,
.home2-pricing-heading h2 em,
.home2-lookbook-heading h2 em,
.home2-final-content h2 em {
    color: #d4aa72;
    font-family: Georgia, serif;
    font-weight: 400;
}

.home2-hero-content p {
    max-width: 500px;
    color: rgba(255,255,255,.82);
    line-height: 1.8;
    font-size: 15px;
}

.home2-hero-buttons {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.home2-primary-btn,
.home2-outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    padding: 0 22px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    transition: .3s ease;
}

.home2-primary-btn {
    background: #c99b62;
    color: #fff;
}

.home2-primary-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(201,155,98,.3);
}

.home2-outline-btn {
    border: 1px solid rgba(255,255,255,.65);
    color: #fff;
}

.home2-outline-btn:hover {
    background: #fff;
    color: #171615;
}

.home2-hero-badge {
    position: absolute;
    right: 5%;
    bottom: 45px;
    z-index: 3;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
}

.home2-hero-badge span {
    font-size: 42px;
    font-family: Georgia, serif;
}

.home2-hero-badge small {
    letter-spacing: 2px;
    line-height: 1.6;
}


/* INTRO */

.home2-intro {
    width: min(1250px, 90%);
    margin: auto;
    padding: 85px 0;
}

.home2-intro-label {
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--h2-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 35px;
}

.home2-intro-label span:first-child {
    color: var(--h2-gold);
    font-size: 20px;
}

.home2-intro-content {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 70px;
    align-items: center;
}

.home2-intro-image {
    position: relative;
    border-radius: 130px 130px 10px 10px;
    overflow: hidden;
    height: 480px;
}

.home2-intro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease;
}

.home2-intro-image:hover img {
    transform: scale(1.05);
}

.home2-image-stamp {
    position: absolute;
    bottom: 20px;
    right: 20px;
    padding: 14px 18px;
    background: rgba(255,255,255,.92);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
}

.home2-intro-text h2 {
    margin: 14px 0 20px;
    font-size: clamp(40px, 5vw, 68px);
    line-height: 1;
    letter-spacing: -2px;
}

.home2-intro-text > p {
    max-width: 560px;
    color: var(--h2-muted);
    line-height: 1.9;
    font-size: 15px;
}

.home2-mini-stats {
    display: flex;
    gap: 35px;
    margin-top: 35px;
    flex-wrap: wrap;
}

.home2-mini-stats div {
    display: flex;
    flex-direction: column;
}

.home2-mini-stats strong {
    font-family: Georgia, serif;
    font-size: 28px;
}

.home2-mini-stats span {
    margin-top: 5px;
    font-size: 11px;
    color: var(--h2-muted);
}


/* SERVICES */

.home2-services {
    padding: 85px 5%;
    background: #ece6dc;
}

.home2-section-heading {
    max-width: 1250px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 40px;
}

.home2-section-heading h2 {
    margin: 12px 0 0;
    font-size: clamp(40px, 5vw, 65px);
    line-height: 1;
    letter-spacing: -2px;
}

.home2-section-heading p {
    max-width: 350px;
    color: var(--h2-muted);
    line-height: 1.7;
}

.home2-service-grid {
    width: min(1250px, 100%);
    margin: auto;
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: 18px;
}

.home2-service-card {
    background: #fff;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    transition: transform .45s ease, box-shadow .45s ease;
}

.home2-service-card:hover {
    transform: translateY(-9px);
    box-shadow: 0 20px 40px rgba(0,0,0,.12);
}

.home2-service-image {
    height: 255px;
    overflow: hidden;
}

.home2-card-tall .home2-service-image {
    height: 330px;
}

.home2-service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}

.home2-service-card:hover img {
    transform: scale(1.07);
}

.home2-service-content {
    padding: 23px;
}

.home2-service-content > span {
    color: var(--h2-gold);
    font-size: 11px;
    font-weight: 800;
}

.home2-service-content h3 {
    margin: 8px 0;
    font-size: 25px;
}

.home2-service-content p {
    color: var(--h2-muted);
    line-height: 1.6;
    font-size: 13px;
}

.home2-service-content a {
    display: inline-block;
    margin-top: 10px;
    color: var(--h2-dark);
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}


/* OFFERS */

.home2-offers {
    width: min(1250px, 90%);
    margin: auto;
    padding: 85px 0;
    display: grid;
    grid-template-columns: .72fr 1.6fr;
    gap: 55px;
    align-items: center;
}

.home2-offer-intro h2 {
    font-size: clamp(40px, 5vw, 63px);
    line-height: 1;
    margin: 15px 0;
    letter-spacing: -2px;
}

.home2-offer-intro p {
    color: var(--h2-muted);
    line-height: 1.8;
    margin-bottom: 25px;
}

.home2-offer-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.home2-offer-card {
    background: #fff;
    border: 1px solid var(--h2-line);
    overflow: hidden;
    transition: .4s ease;
}

.home2-offer-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 35px rgba(0,0,0,.1);
}

.home2-offer-featured {
    transform: translateY(-15px);
}

.home2-offer-featured:hover {
    transform: translateY(-23px);
}

.home2-offer-image {
    position: relative;
    height: 215px;
    overflow: hidden;
}

.home2-offer-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .7s ease;
}

.home2-offer-card:hover img {
    transform: scale(1.08);
}

.home2-offer-image > span {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #171615;
    color: #fff;
    padding: 7px 9px;
    font-size: 10px;
    font-weight: 800;
}

.home2-offer-body {
    padding: 18px;
}

.home2-offer-body small {
    color: var(--h2-gold);
    font-size: 9px;
    letter-spacing: 2px;
    font-weight: 800;
}

.home2-offer-body h3 {
    margin: 7px 0;
    font-size: 20px;
}

.home2-offer-body p {
    min-height: 42px;
    color: var(--h2-muted);
    font-size: 12px;
    line-height: 1.5;
}

.home2-offer-body strong {
    font-size: 13px;
}


/* MOMENTS */

.home2-moments {
    width: min(1250px, 90%);
    margin: auto;
    padding: 30px 0 90px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.home2-moments-image {
    height: 500px;
    overflow: hidden;
    border-radius: 10px 100px 10px 10px;
}

.home2-moments-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .8s ease;
}

.home2-moments-image:hover img {
    transform: scale(1.06);
}

.home2-moments-content h2 {
    margin: 15px 0;
    font-size: clamp(40px, 5vw, 65px);
    line-height: 1;
    letter-spacing: -2px;
}

.home2-moments-content > p {
    color: var(--h2-muted);
    line-height: 1.8;
}

.home2-detail-list {
    margin-top: 30px;
}

.home2-detail-list > div {
    display: flex;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--h2-line);
}

.home2-detail-list > div > span {
    color: var(--h2-gold);
}

.home2-detail-list strong {
    font-size: 14px;
}

.home2-detail-list p {
    margin: 5px 0 0;
    color: var(--h2-muted);
    font-size: 12px;
}


/* PRICING */

.home2-pricing {
    padding: 85px 5%;
    background: #181716;
    color: #fff;
}

.home2-pricing-heading {
    text-align: center;
    max-width: 650px;
    margin: auto auto 45px;
}

.home2-pricing-heading h2 {
    font-size: clamp(40px, 5vw, 62px);
    margin: 12px 0;
    line-height: 1;
}

.home2-pricing-heading p {
    color: rgba(255,255,255,.65);
}

.home2-price-grid {
    width: min(1050px, 100%);
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    align-items: stretch;
}

.home2-price-card {
    position: relative;
    padding: 28px;
    background: #242321;
    border: 1px solid rgba(255,255,255,.12);
    transition: .45s ease;
    overflow: hidden;
}

.home2-price-card::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1px solid rgba(201,155,98,.25);
    right: -45px;
    bottom: -45px;
}

.home2-price-card:hover {
    transform: translateY(-9px);
    border-color: rgba(201,155,98,.6);
}

.home2-price-main {
    background: #d0a36c;
    color: #171615;
    transform: translateY(-12px);
}

.home2-price-main:hover {
    transform: translateY(-20px);
}

.home2-price-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.home2-price-top > span {
    font-size: 11px;
    font-weight: 800;
}

.home2-price-icon {
    width: 38px;
    height: 38px;
    border: 1px solid currentColor;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.home2-popular {
    display: inline-block;
    margin-top: 22px;
    padding: 6px 9px;
    border-radius: 20px;
    background: #171615;
    color: #fff;
    font-size: 9px;
    letter-spacing: 1px;
    font-weight: 800;
}

.home2-price-card h3 {
    font-size: 28px;
    margin: 20px 0 8px;
}

.home2-price-card > p {
    min-height: 55px;
    color: rgba(255,255,255,.62);
    font-size: 13px;
    line-height: 1.6;
}

.home2-price-main > p {
    color: rgba(23,22,21,.68);
}

.home2-price {
    margin: 25px 0;
    font-family: Georgia, serif;
    font-size: 34px;
}

.home2-price small {
    font-family: Arial, sans-serif;
    font-size: 11px;
}

.home2-price-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.home2-price-card li {
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
    font-size: 12px;
}

.home2-price-main li {
    border-color: rgba(23,22,21,.15);
}

.home2-price-card > a {
    display: inline-block;
    margin-top: 24px;
    padding: 11px 18px;
    border: 1px solid currentColor;
    border-radius: 25px;
    color: inherit;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
}


/* LOOKBOOK */

.home2-lookbook {
    width: min(1250px, 90%);
    margin: auto;
    padding: 90px 0;
}

.home2-lookbook-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 35px;
}

.home2-lookbook-heading h2 {
    margin: 12px 0 0;
    font-size: clamp(40px, 5vw, 62px);
    line-height: 1;
}

.home2-lookbook-heading > a {
    color: var(--h2-dark);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.home2-gallery {
    display: grid;
    grid-template-columns: 1.3fr .85fr .85fr;
    grid-template-rows: 250px 250px;
    gap: 12px;
}

.home2-gallery-item {
    overflow: hidden;
}

.home2-gallery-item.large {
    grid-row: span 2;
}

.home2-gallery-item.wide {
    grid-column: span 2;
}

.home2-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .8s ease;
}

.home2-gallery-item:hover img {
    transform: scale(1.07);
}


/* FINAL */

.home2-final {
    min-height: 460px;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    text-align: center;
    background:
        linear-gradient(rgba(23,22,21,.78), rgba(23,22,21,.78)),
        url("../images/nailart.jpg")
        center/cover;
    color: #fff;
}

.home2-final-content {
    position: relative;
    z-index: 2;
    padding: 70px 20px;
}

.home2-final-content h2 {
    margin: 15px 0;
    font-size: clamp(43px, 6vw, 72px);
    line-height: .95;
}

.home2-final-content p {
    color: rgba(255,255,255,.75);
    margin-bottom: 25px;
}

.home2-final-number {
    position: absolute;
    right: 5%;
    bottom: 10px;
    font-size: 170px;
    font-family: Georgia, serif;
    color: rgba(255,255,255,.06);
}

.home2-final-glow {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 1px solid rgba(210,170,115,.3);
    animation: home2Pulse 4s ease-in-out infinite;
}


/* FOOTER */

.home2-footer {
    background: #121110;
    color: #fff;
    padding: 65px 5% 20px;
}

.home2-footer-grid {
    width: min(1250px, 100%);
    margin: auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 50px;
}

.home2-footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.home2-footer-logo > span {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.home2-footer-logo div {
    display: flex;
    flex-direction: column;
}

.home2-footer-logo strong {
    font-size: 19px;
    letter-spacing: 2px;
}

.home2-footer-logo small {
    margin-top: 4px;
    font-size: 8px;
    letter-spacing: 3px;
}

.home2-footer-brand > p {
    max-width: 350px;
    color: rgba(255,255,255,.6);
    line-height: 1.8;
    font-size: 13px;
}

.home2-footer-column h3 {
    margin: 0 0 18px;
    font-size: 15px;
}

.home2-footer-column a,
.home2-footer-column p {
    display: block;
    color: rgba(255,255,255,.65);
    text-decoration: none;
    font-size: 12px;
    line-height: 1.9;
    margin: 5px 0;
}

.home2-footer-column a:hover {
    color: #d5aa73;
}

.home2-footer-bottom {
    width: min(1250px, 100%);
    margin: 45px auto 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.1);
    display: flex;
    justify-content: space-between;
    color: rgba(255,255,255,.45);
    font-size: 10px;
}


/* ANIMATIONS */

.home2-reveal {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity .8s ease, transform .8s ease;
}

.home2-reveal.home2-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes home2HeroZoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }
}

@keyframes home2Pulse {
    0%, 100% {
        transform: scale(.85);
        opacity: .35;
    }

    50% {
        transform: scale(1.15);
        opacity: .8;
    }
}


/* MOBILE */

@media (max-width: 1050px) {

    .home2-nav {
        gap: 15px;
    }

    .home2-nav > a,
    .home2-drop-btn {
        font-size: 11px;
    }

    .home2-offers {
        grid-template-columns: 1fr;
    }

    .home2-offer-intro {
        max-width: 650px;
    }

}


@media (max-width: 850px) {

    .home2-header-inner {
        min-height: 68px;
    }

    .home2-nav {
        position: absolute;
        top: 68px;
        left: 3%;
        right: 3%;
        width: auto;
        padding: 8px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #171615;
        border: 1px solid rgba(255,255,255,.12);
        box-shadow: 0 20px 40px rgba(0,0,0,.35);
    }

    .home2-nav.home2-mobile-open {
        display: flex;
    }

    .home2-nav > a,
    .home2-drop-btn {
        width: 100%;
        min-height: 43px;
        padding: 11px 13px;
        text-align: left;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .home2-dropdown-menu {
        position: static;
        transform: none;
        min-width: 0;
        display: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        box-shadow: none;
        border: 0;
        padding: 0 0 5px 12px;
    }

    .home2-dropdown.open .home2-dropdown-menu {
        display: block;
        transform: none;
    }

    .home2-header-actions {
        margin-left: auto;
    }

    .home2-login-btn {
        display: none;
    }

    .home2-menu-btn {
        display: block;
    }

    .home2-intro-content,
    .home2-moments {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .home2-service-grid {
        grid-template-columns: 1fr 1fr;
    }

    .home2-card-tall {
        grid-column: span 2;
    }

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

    .home2-offer-featured {
        transform: none;
    }

    .home2-offer-featured:hover {
        transform: translateY(-8px);
    }

    .home2-price-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
    }

    .home2-price-main {
        transform: none;
    }

    .home2-price-main:hover {
        transform: translateY(-8px);
    }

    .home2-footer-grid {
        grid-template-columns: 1fr 1fr;
    }

}


@media (max-width: 560px) {

    .home2-header-inner {
        width: 94%;
    }

    .home2-logo-mark {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }

    .home2-logo-text strong {
        font-size: 15px;
    }

    .home2-logo-text small {
        font-size: 6px;
    }

    .home2-action-btn {
        width: 34px;
        height: 34px;
    }

    .home2-menu-btn {
        width: 35px;
        height: 35px;
        padding: 7px;
    }

    .home2-hero {
        min-height: 570px;
    }

    .home2-hero-content {
        padding: 65px 0;
    }

    .home2-hero-content h1 {
        font-size: 48px;
    }

    .home2-hero-badge {
        display: none;
    }

    .home2-intro,
    .home2-offers,
    .home2-moments,
    .home2-lookbook {
        padding: 60px 0;
    }

    .home2-intro-image {
        height: 350px;
        border-radius: 90px 90px 8px 8px;
    }

    .home2-section-heading,
    .home2-lookbook-heading {
        display: block;
    }

    .home2-section-heading p {
        margin-top: 20px;
    }

    .home2-service-grid {
        grid-template-columns: 1fr;
    }

    .home2-card-tall {
        grid-column: auto;
    }

    .home2-card-tall .home2-service-image,
    .home2-service-image {
        height: 235px;
    }

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

    .home2-offer-image {
        height: 250px;
    }

    .home2-moments-image {
        height: 360px;
        border-radius: 8px 75px 8px 8px;
    }

    .home2-gallery {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 180px 180px 180px;
    }

    .home2-gallery-item.large {
        grid-row: span 2;
    }

    .home2-gallery-item.wide {
        grid-column: span 2;
    }

    .home2-footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .home2-footer-bottom {
        display: block;
        line-height: 2;
    }

}
/* =========================================
   ABOUT PAGE
========================================= */
.about-hero {
    min-height: 720px;
    padding: 130px 7% 90px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;

    background-image: url("../images/hero1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.about-hero::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(220, 170, 150, 0.12);
    top: -170px;
    left: -170px;
    animation: softFloat 7s ease-in-out infinite;
}

.about-hero-content {
    position: relative;
    z-index: 2;
    color: #ffffff;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.5px;
    margin-bottom: 18px;
}

.eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
}

.about-hero h1 {
    max-width: 650px;
    font-size: clamp(42px, 5vw, 72px);
    line-height: 1.02;
    margin: 0 0 25px;
    font-weight: 800;
}

.about-hero h1 span,
.section-heading h2 span,
.mission-intro h2 span,
.philosophy-content h2 span,
.cta-content h2 span {
    display: block;
    font-style: italic;
    font-weight: 500;
}

.about-hero p {
    max-width: 540px;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 35px;
}

.hero-mini-stats {
    display: flex;
    gap: 34px;
    flex-wrap: wrap;
}

.hero-mini-stats div {
    position: relative;
}

.hero-mini-stats strong {
    display: block;
    font-size: 27px;
    font-weight: 800;
}

.hero-mini-stats span {
    font-size: 12px;
    opacity: .7;
}

.about-hero-visual {
    display: none;
}
/* EXPERIENCE HEADING - NORMAL ALIGNMENT */

.experience-section .section-heading {
    max-width: 1200px;
    margin: 0 auto 45px;
    text-align: left;
}

.experience-section .section-heading h2 {
    max-width: 850px;
}

.experience-section .section-heading h2 span {
    display: inline;
    font-style: normal;
    font-weight: 800;
}

.experience-section .section-heading p {
    max-width: 700px;
    margin: 18px 0 0;
}

.hero-image-main {
    height: 560px;
    border-radius: 170px 170px 25px 25px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 70px rgba(0,0,0,.15);
}

.hero-image-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease;
}

.hero-image-main:hover img {
    transform: scale(1.06);
}

.hero-floating-card {
    position: absolute;
    left: -35px;
    bottom: 45px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px 22px;
    border-radius: 16px;
    background: rgba(15, 10, 10, 0.92);
    box-shadow: 0 15px 45px rgba(0,0,0,.15);
    animation: floatingCard 4s ease-in-out infinite;
}

.hero-floating-card > span {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #171717;
    color: #fff;
}

.hero-floating-card strong,
.hero-floating-card small {
    display: block;
}

.hero-floating-card strong {
    font-size: 14px;
}

.hero-floating-card small {
    font-size: 11px;
    opacity: .65;
    margin-top: 3px;
}


/* ================= COMMON ================= */

.section-pad {
    padding: 85px 7%;
}

.section-heading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.section-heading h2 {
    font-size: clamp(34px, 4vw, 55px);
    line-height: 1.08;
    margin: 0 0 18px;
    font-weight: 800;
}

.section-heading p {
    max-width: 650px;
    margin: auto;
    line-height: 1.8;
    opacity: .72;
}


/* ================= STORY ================= */

.story-layout {
    max-width: 1150px;
    margin: auto;
    display: grid;
    grid-template-columns: .9fr 1fr;
    gap: 70px;
    align-items: center;
}

.story-image {
    position: relative;
}

.story-image img {
    width: 100%;
    height: 475px;
    object-fit: cover;
    border-radius: 28px;
    display: block;
}

.story-year {
    position: absolute;
    right: -25px;
    bottom: 25px;
    padding: 18px 25px;
    background: #171717;
    color: white;
    border-radius: 14px;
    box-shadow: 0 15px 35px rgba(0,0,0,.2);
}

.story-year strong {
    display: block;
    font-size: 27px;
}

.story-year span {
    font-size: 11px;
    opacity: .7;
}

.story-content {
    display: grid;
    gap: 15px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(120,120,120,.18);
    transition: transform .35s ease;
}

.timeline-item:hover {
    transform: translateX(8px);
}

.timeline-item > span {
    font-size: 12px;
    font-weight: 800;
    opacity: .45;
}

.timeline-item h3 {
    margin: 0 0 7px;
    font-size: 20px;
}

.timeline-item p {
    margin: 0;
    line-height: 1.7;
    opacity: .68;
    font-size: 14px;
}


/* ================= MISSION ================= */

.mission-section {
    padding: 90px 7%;
    position: relative;
    overflow: hidden;
}

.mission-inner {
    max-width: 1200px;
    margin: auto;
}

.mission-intro {
    max-width: 600px;
    margin-bottom: 45px;
}

.mission-intro h2 {
    font-size: clamp(36px, 4vw, 55px);
    line-height: 1.05;
    margin: 0 0 17px;
}

.mission-intro p {
    line-height: 1.8;
    opacity: .7;
}

.mission-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.mission-card {
    padding: 30px;
    min-height: 245px;
    border: 1px solid rgba(120,120,120,.16);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    transition: transform .4s ease, box-shadow .4s ease;
}

.mission-card::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    right: -60px;
    bottom: -60px;
    background: rgba(220,170,150,.12);
    transition: transform .5s ease;
}

.mission-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 55px rgba(0,0,0,.11);
}

.mission-card:hover::after {
    transform: scale(1.5);
}

.mission-number {
    position: absolute;
    right: 22px;
    top: 20px;
    font-size: 12px;
    opacity: .4;
    font-weight: 800;
}

.mission-icon {
    font-size: 29px;
    margin-bottom: 25px;
}

.mission-card h3 {
    font-size: 21px;
    margin-bottom: 10px;
}

.mission-card p {
    font-size: 14px;
    line-height: 1.7;
    opacity: .68;
}


/* ================= PHILOSOPHY ================= */

.beauty-philosophy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 75px;
    align-items: center;
    max-width: 1250px;
    margin: auto;
}

.philosophy-image {
    position: relative;
}

.philosophy-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 30px 100px 30px 100px;
}

.image-badge {
    position: absolute;
    bottom: 25px;
    right: 25px;
    padding: 14px 20px;
    background: rgba(255,255,255,.95);
    border-radius: 14px;
    display: flex;
    gap: 10px;
    align-items: center;
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
}

.image-badge span {
    font-size: 20px;
}

.image-badge strong {
    font-size: 13px;
}

.philosophy-content h2 {
    font-size: clamp(35px, 4vw, 55px);
    line-height: 1.05;
    margin: 0 0 20px;
}

.philosophy-content > p {
    line-height: 1.8;
    opacity: .7;
    margin-bottom: 28px;
}

.philosophy-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.philosophy-points div {
    padding: 15px;
    border-radius: 14px;
    background: rgba(120,120,120,.06);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform .3s ease;
}

.philosophy-points div:hover {
    transform: translateY(-5px);
}

.philosophy-points span {
    font-size: 11px;
    opacity: .5;
}

.philosophy-points strong {
    font-size: 13px;
}


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

.experience-section {
    padding: 90px 7%;
}

.experience-grid {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    grid-template-rows: 270px 270px;
    gap: 18px;
}

.experience-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
}

.experience-large {
    grid-row: span 2;
}

.experience-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}

.experience-card:hover img {
    transform: scale(1.08);
}

.experience-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 25px;
    color: white;
    background: linear-gradient(transparent, rgba(0,0,0,.85));
}

.experience-overlay span {
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 800;
}

.experience-overlay h3 {
    margin: 6px 0;
    font-size: 21px;
}

.experience-overlay p {
    margin: 0;
    font-size: 13px;
    opacity: .8;
}


/* ================= TEAM ================= */

.team-grid {
    max-width: 1150px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.team-card {
    transition: transform .4s ease;
}

.team-card:hover {
    transform: translateY(-10px);
}

.team-image {
    height: 390px;
    position: relative;
    overflow: hidden;
    border-radius: 22px;
}

.team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}

.team-card:hover .team-image img {
    transform: scale(1.07);
}

.team-social {
    position: absolute;
    right: 15px;
    bottom: 15px;
    display: flex;
    gap: 7px;
}

.team-social a {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    color: #171717;
    font-size: 13px;
    transform: translateY(45px);
    transition: transform .35s ease;
}

.team-card:hover .team-social a {
    transform: translateY(0);
}

.team-info {
    padding: 17px 5px;
}

.team-info span {
    font-size: 9px;
    letter-spacing: 1.5px;
    opacity: .55;
    font-weight: 800;
}

.team-info h3 {
    margin: 7px 0 3px;
    font-size: 21px;
}

.team-info p {
    margin: 0;
    font-size: 13px;
    opacity: .65;
}


/* ================= TESTIMONIAL ================= */

.testimonial-section {
    padding: 90px 7%;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.testimonial-inner {
    max-width: 850px;
    margin: auto;
    position: relative;
    z-index: 2;
}

.quote-mark {
    display: block;
    font-family: Georgia, serif;
    font-size: 95px;
    line-height: .7;
    opacity: .18;
}

.testimonial-inner blockquote {
    font-size: clamp(24px, 3vw, 39px);
    line-height: 1.35;
    margin: 15px 0 30px;
    font-weight: 500;
}

.testimonial-person {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.person-avatar img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
}

.testimonial-person strong,
.testimonial-person span {
    display: block;
    text-align: left;
}

.testimonial-person strong {
    font-size: 14px;
}

.testimonial-person span {
    font-size: 11px;
    opacity: .55;
    margin-top: 3px;
}

.testimonial-dots {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 7px;
}

.testimonial-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: .2;
}

.testimonial-dots .active {
    opacity: 1;
    transform: scale(1.4);
}

.testimonial-decoration {
    position: absolute;
    border: 1px solid rgba(150,100,100,.15);
    border-radius: 50%;
    animation: rotateSlow 15s linear infinite;
}

.decoration-one {
    width: 350px;
    height: 350px;
    left: -160px;
    top: -120px;
}

.decoration-two {
    width: 270px;
    height: 270px;
    right: -100px;
    bottom: -100px;
}


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

.about-cta {
    max-width: 1250px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr .8fr;
    gap: 70px;
    align-items: center;
}

.cta-content h2 {
    font-size: clamp(37px, 4vw, 58px);
    line-height: 1.05;
    margin: 0 0 20px;
}

.cta-content p {
    opacity: .7;
    line-height: 1.7;
    margin-bottom: 28px;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 15px 24px;
    border-radius: 50px;
    background: #171717;
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    transition: transform .3s ease, box-shadow .3s ease;
}

.cta-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,.2);
}

.cta-button span {
    font-size: 20px;
}

.cta-visual {
    position: relative;
}

.cta-visual img {
    width: 100%;
    height: 430px;
    object-fit: cover;
    border-radius: 25px;
}

.cta-floating {
    position: absolute;
    left: -25px;
    bottom: 25px;
    padding: 14px 19px;
    border-radius: 13px;
    background: rgba(255,255,255,.95);
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
    animation: floatingCard 4s ease-in-out infinite;
}

.cta-floating strong {
    font-size: 13px;
}


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

.reveal-up,
.reveal-left,
.reveal-right {
    opacity: 0;
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,.61,.36,1);
}

.reveal-up {
    transform: translateY(35px);
}

.reveal-left {
    transform: translateX(-45px);
}

.reveal-right {
    transform: translateX(45px);
}

.reveal-up.show,
.reveal-left.show,
.reveal-right.show {
    opacity: 1;
    transform: translate(0);
}

.delay-1 {
    transition-delay: .12s;
}

.delay-2 {
    transition-delay: .22s;
}

@keyframes softFloat {
    0%,100% {
        transform: translate(0,0);
    }
    50% {
        transform: translate(25px,20px);
    }
}

@keyframes floatingCard {
    0%,100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes rotateSlow {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}


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

@media (max-width: 900px) {

    .about-hero {
        grid-template-columns: 1fr;
        padding-top: 55px;
        gap: 45px;
    }

    .about-hero-visual {
        justify-self: stretch;
        max-width: 100%;
    }

    .hero-image-main {
        height: 470px;
        border-radius: 110px 110px 20px 20px;
    }

    .story-layout,
    .beauty-philosophy,
    .about-cta {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .mission-grid,
    .team-grid {
        grid-template-columns: 1fr 1fr;
    }

    .experience-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 250px 250px;
    }

    .experience-large {
        grid-row: span 2;
    }

}

@media (max-width: 600px) {

    .section-pad,
    .mission-section,
    .experience-section,
    .testimonial-section {
        padding: 65px 5%;
    }

    .about-hero {
        padding: 50px 5% 60px;
    }

    .about-hero h1 {
        font-size: 43px;
    }

    .hero-mini-stats {
        gap: 20px;
    }

    .hero-image-main {
        height: 390px;
        border-radius: 80px 80px 18px 18px;
    }

    .hero-floating-card {
        left: 12px;
        bottom: 20px;
        padding: 12px 15px;
    }

    .story-image img,
    .philosophy-image img {
        height: 360px;
    }

    .story-year {
        right: 15px;
    }

    .mission-grid,
    .team-grid,
    .philosophy-points {
        grid-template-columns: 1fr;
    }

    .experience-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 260px 210px 210px;
    }

    .experience-large {
        grid-row: auto;
    }

    .team-image {
        height: 360px;
    }

    .testimonial-inner blockquote {
        font-size: 25px;
    }

    .cta-visual img {
        height: 350px;
    }

}
/* =====================================================
   STYLIST PAGE
   Add at the bottom of style.css
   ===================================================== */

.stylist-page {
    overflow-x: hidden;
}

.stylist-page img {
    max-width: 100%;
}

.stylist-hero {
    min-height: 560px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #f5eee9;
    overflow: hidden;
}

.stylist-hero-image {
    position: relative;
    overflow: hidden;
}

.stylist-hero-image img {
    width: 100%;
    height: 100%;
    min-height: 560px;
    object-fit: cover;
    transition: transform 1.2s ease;
}

.stylist-hero:hover .stylist-hero-image img {
    transform: scale(1.045);
}

.stylist-hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 45%,
        rgba(245,238,233,.9)
    );
}

.hero-floating-text {
    position: absolute;
    z-index: 2;
    left: 25px;
    bottom: 25px;
    color: #fff;
    background: rgba(20,15,13,.72);
    padding: 11px 15px;
    border-radius: 30px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    backdrop-filter: blur(8px);
}

.stylist-hero-content {
    padding: 55px 9%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: stylistHeroIn 1s ease both;
}

.eyebrow {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.stylist-hero-content h1 {
    max-width: 600px;
    margin: 0 0 20px;
    font-family: "Playfair Display", serif;
    font-size: clamp(43px, 5vw, 72px);
    line-height: .98;
    letter-spacing: -2px;
}

.stylist-hero-content h1 em,
.stylist-page h2 em {
    font-style: italic;
    font-weight: 500;
}

.stylist-hero-content p {
    max-width: 520px;
    margin: 0 0 25px;
    line-height: 1.8;
    font-size: 15px;
}

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.stylist-btn,
.primary-btn,
.outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 24px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    transition: .35s ease;
}

.stylist-btn,
.primary-btn {
    background: #241b19;
    color: #fff !important;
}

.stylist-btn:hover,
.primary-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0,0,0,.16);
}

.stylist-link {
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}

.hero-mini-stats {
    display: flex;
    gap: 30px;
    margin-top: 35px;
}

.hero-mini-stats div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero-mini-stats strong {
    font-family: "Playfair Display", serif;
    font-size: 25px;
}

.hero-mini-stats span {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: .65;
}


/* INTRO */

.stylist-intro {
    display: grid;
    grid-template-columns: 90px 1fr 1fr;
    align-items: center;
    gap: 35px;
    padding: 65px 7%;
    background: #fff;
}

.intro-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.intro-side span {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 50%;
    font-weight: 800;
}

.intro-side small {
    font-size: 8px;
    letter-spacing: 2px;
}

.intro-title h2 {
    margin: 0;
    font-family: "Playfair Display", serif;
    font-size: clamp(35px,4vw,54px);
    line-height: 1.05;
}

.intro-text {
    max-width: 500px;
}

.intro-text p {
    font-size: 14px;
    line-height: 1.8;
    margin: 0 0 12px;
}


/* TEAM */

.team-section {
    padding: 70px 7%;
    background: #f6eee9;
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 32px;
}

.section-heading h2 {
    margin: 0;
    font-family: "Playfair Display", serif;
    font-size: clamp(35px,4vw,52px);
    line-height: 1;
}

.section-heading > p {
    max-width: 400px;
    line-height: 1.7;
    font-size: 14px;
}

.stylist-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
}

.stylist-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(40,25,20,.07);
    transition: transform .45s ease, box-shadow .45s ease;
}

.stylist-card:hover {
    transform: translateY(-9px);
    box-shadow: 0 20px 40px rgba(40,25,20,.15);
}

.stylist-image {
    height: 285px;
    position: relative;
    overflow: hidden;
}

.stylist-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease;
}

.stylist-card:hover .stylist-image img {
    transform: scale(1.08);
}

.stylist-tag {
    position: absolute;
    top: 13px;
    left: 13px;
    background: rgba(255,255,255,.92);
    padding: 7px 10px;
    border-radius: 20px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.stylist-info {
    padding: 19px;
}

.stylist-info > span {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    opacity: .6;
}

.stylist-info h3 {
    margin: 6px 0 7px;
    font-family: "Playfair Display",serif;
    font-size: 23px;
}

.stylist-info p {
    margin: 0 0 13px;
    font-size: 12px;
    line-height: 1.65;
}

.stylist-info a {
    text-decoration: none;
    font-size: 10px;
    font-weight: 900;
}


/* FEATURED */

.featured-stylist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #241b19;
    color: #fff;
}

.featured-image {
    position: relative;
    min-height: 560px;
    overflow: hidden;
}

.featured-image img {
    width: 100%;
    height: 100%;
    min-height: 560px;
    object-fit: cover;
    transition: transform 1s ease;
}

.featured-stylist:hover .featured-image img {
    transform: scale(1.04);
}

.image-label {
    position: absolute;
    left: 22px;
    bottom: 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 13px 17px;
    background: rgba(20,15,13,.78);
    border-radius: 10px;
    backdrop-filter: blur(7px);
}

.image-label span {
    font-size: 8px;
    letter-spacing: 2px;
}

.image-label strong {
    font-size: 12px;
}

.featured-content {
    padding: 60px 9%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.featured-content h2 {
    margin: 0 0 20px;
    font-family: "Playfair Display",serif;
    font-size: clamp(39px,4vw,60px);
    line-height: 1;
}

.featured-content p {
    max-width: 510px;
    font-size: 14px;
    line-height: 1.8;
    opacity: .82;
}

.experience-row {
    display: flex;
    gap: 28px;
    margin: 22px 0 28px;
}

.experience-row div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.experience-row strong {
    font-family: "Playfair Display",serif;
    font-size: 27px;
}

.experience-row span {
    font-size: 8px;
    letter-spacing: 1px;
    opacity: .55;
}

.outline-btn {
    width: fit-content;
    color: #fff;
    border: 1px solid rgba(255,255,255,.65);
}

.outline-btn:hover {
    background: #fff;
    color: #241b19;
    transform: translateY(-3px);
}


/* SPECIALITIES */

.specialities-section {
    background: #fff;
}

.section-heading.centered {
    display: block;
    text-align: center;
}

.section-heading.centered > p {
    margin: 12px auto 0;
}

.speciality-list {
    max-width: 1050px;
    margin: auto;
}

.speciality-item {
    display: grid;
    grid-template-columns: 90px 1fr 35px;
    align-items: center;
    gap: 20px;
    padding: 12px;
    border-top: 1px solid rgba(0,0,0,.12);
    transition: .4s ease;
}

.speciality-item:last-child {
    border-bottom: 1px solid rgba(0,0,0,.12);
}

.speciality-item:hover {
    padding-left: 22px;
    padding-right: 22px;
    border-radius: 15px;
    background: #f6eee9;
}

.speciality-image {
    height: 70px;
    border-radius: 12px;
    overflow: hidden;
}

.speciality-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .6s ease;
}

.speciality-item:hover img {
    transform: scale(1.1);
}

.speciality-content {
    display: grid;
    grid-template-columns: 35px 180px 1fr;
    align-items: center;
    gap: 18px;
}

.speciality-content > span {
    font-size: 10px;
    opacity: .5;
}

.speciality-content h3 {
    margin: 0;
    font-family: "Playfair Display",serif;
    font-size: 22px;
}

.speciality-content p {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
}

.speciality-arrow {
    font-size: 22px;
    transition: .35s ease;
}

.speciality-item:hover .speciality-arrow {
    transform: rotate(45deg);
}


/* LOOKBOOK */

.lookbook-section {
    background: #f6eee9;
}

.lookbook-top {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 30px;
}

.lookbook-top h2 {
    max-width: 650px;
    margin: 0;
    font-family: "Playfair Display",serif;
    font-size: clamp(35px,4vw,52px);
    line-height: 1;
}

.lookbook-top > p {
    max-width: 380px;
    margin: 0;
    line-height: 1.7;
    font-size: 13px;
}

.lookbook-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr .9fr;
    grid-auto-rows: 225px;
    gap: 13px;
}

.look-image {
    position: relative;
    overflow: hidden;
    border-radius: 17px;
}

.look-image.tall {
    grid-row: span 2;
}

.look-image.wide {
    grid-column: span 2;
}

.look-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease;
}

.look-image:hover img {
    transform: scale(1.07);
}

.look-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        transparent 50%,
        rgba(0,0,0,.55)
    );
}

.look-image span {
    position: absolute;
    z-index: 2;
    left: 18px;
    bottom: 15px;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}


/* TESTIMONIAL */

.stylist-testimonials {
    background: #fff;
}

.testimonial-heading {
    text-align: center;
    margin-bottom: 35px;
}

.testimonial-heading h2 {
    margin: 0;
    font-family: "Playfair Display",serif;
    font-size: clamp(35px,4vw,52px);
    line-height: 1;
}

.testimonial-track {
    max-width: 1080px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
}

.testimonial-card {
    padding: 30px 25px;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 20px;
    transition: .4s ease;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 35px rgba(0,0,0,.08);
}

.featured-testimonial {
    background: #f6eee9;
    transform: translateY(-10px);
}

.featured-testimonial:hover {
    transform: translateY(-17px);
}

.quote-mark {
    font-family: Georgia,serif;
    font-size: 55px;
    opacity: .35;
}

.testimonial-card p {
    font-family: "Playfair Display",serif;
    font-size: 17px;
    line-height: 1.65;
    margin: 18px 0 25px;
}

.client-info {
    display: flex;
    align-items: center;
    gap: 11px;
}

.client-avatar {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #241b19;
    color: #fff;
    font-weight: 800;
}

.client-info div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.client-info strong {
    font-size: 12px;
}

.client-info span {
    font-size: 9px;
    opacity: .55;
}


/* CTA */

.stylist-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #eadbd1;
}

.cta-image {
    overflow: hidden;
}

.cta-image img {
    width: 100%;
    height: 100%;
    min-height: 440px;
    object-fit: cover;
    transition: transform .9s ease;
}

.stylist-cta:hover .cta-image img {
    transform: scale(1.04);
}

.cta-content {
    padding: 55px 9%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cta-content h2 {
    margin: 0 0 18px;
    font-family: "Playfair Display",serif;
    font-size: clamp(38px,4vw,58px);
    line-height: 1;
}

.cta-content p {
    max-width: 480px;
    line-height: 1.8;
    font-size: 14px;
    margin-bottom: 25px;
}


/* ANIMATIONS */

@keyframes stylistHeroIn {
    from {
        opacity: 0;
        transform: translateX(35px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.stylist-page .stylist-card,
.stylist-page .speciality-item,
.stylist-page .look-image,
.stylist-page .testimonial-card {
    opacity: 0;
    transform: translateY(25px);
}

.stylist-page .stylist-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.8,.2,1);
}


/* MOBILE */

@media (max-width: 900px) {

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

    .stylist-hero {
        grid-template-columns: 1fr 1fr;
    }

    .stylist-intro {
        grid-template-columns: 70px 1fr 1fr;
    }

    .testimonial-track {
        grid-template-columns: 1fr;
    }

    .featured-testimonial {
        transform: none;
    }

}

@media (max-width: 700px) {

    .stylist-hero {
        display: flex;
        flex-direction: column;
    }

    .stylist-hero-image {
        height: 330px;
    }

    .stylist-hero-image img {
        min-height: 330px;
    }

    .stylist-hero-content {
        padding: 42px 7%;
    }

    .stylist-hero-content h1 {
        font-size: 42px;
    }

    .hero-mini-stats {
        gap: 18px;
        flex-wrap: wrap;
    }

    .stylist-intro {
        display: block;
        padding: 55px 7%;
    }

    .intro-side {
        margin-bottom: 22px;
    }

    .intro-title h2 {
        font-size: 38px;
        margin-bottom: 20px;
    }

    .section-heading,
    .lookbook-top {
        display: block;
    }

    .section-heading h2,
    .lookbook-top h2 {
        margin-bottom: 15px;
    }

    .stylist-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .stylist-image {
        height: 220px;
    }

    .stylist-info {
        padding: 15px;
    }

    .stylist-info h3 {
        font-size: 20px;
    }

    .featured-stylist {
        grid-template-columns: 1fr;
    }

    .featured-image {
        min-height: 360px;
    }

    .featured-image img {
        min-height: 360px;
    }

    .featured-content {
        padding: 48px 7%;
    }

    .speciality-item {
        grid-template-columns: 75px 1fr 25px;
        gap: 12px;
    }

    .speciality-content {
        display: block;
    }

    .speciality-content h3 {
        font-size: 18px;
        margin: 3px 0;
    }

    .speciality-content p {
        font-size: 10px;
    }

    .lookbook-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 170px;
    }

    .look-image.tall {
        grid-row: span 2;
    }

    .look-image.wide {
        grid-column: span 2;
    }

    .stylist-cta {
        grid-template-columns: 1fr;
    }

    .cta-image img {
        min-height: 300px;
    }

    .cta-content {
        padding: 45px 7%;
    }

}

@media (max-width: 480px) {

    .stylist-grid {
        grid-template-columns: 1fr;
    }

    .stylist-image {
        height: 285px;
    }

    .stylist-hero-content h1 {
        font-size: 37px;
    }

    .hero-mini-stats {
        gap: 15px;
    }

    .lookbook-grid {
        grid-auto-rows: 145px;
    }

}
/* =========================================================
   PRICING PAGE
   Add this section at the bottom of style.css
========================================================= */

.pricing-page {
    --p-bg: #fffaf7;
    --p-soft: #f7efeb;
    --p-card: #ffffff;
    --p-text: #302525;
    --p-muted: #756968;
    --p-accent: #a86f72;
    --p-accent-dark: #70484b;
    --p-line: rgba(48, 37, 37, .13);
    --p-shadow: 0 20px 55px rgba(72, 45, 42, .10);
    background: var(--p-bg);
    color: var(--p-text);
    overflow-x: hidden;
}

.pricing-page img {
    width: 100%;
    display: block;
}

.pricing-page a {
    text-decoration: none;
}

.pricing-page .eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--p-accent);
    margin-bottom: 15px;
}

.pricing-page .section-heading {
    max-width: 650px;
    margin-bottom: 45px;
}

.pricing-page .section-heading.centered {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.pricing-page .section-heading h2,
.pricing-page .pricing-hero h1,
.pricing-page .service-content h2,
.pricing-page .membership-copy h2,
.pricing-page .offer-content h2,
.pricing-page .pricing-cta h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
    line-height: 1.04;
    margin: 0 0 18px;
}

.pricing-page .section-heading h2 {
    font-size: clamp(34px, 4vw, 55px);
}

.pricing-page em {
    color: var(--p-accent);
    font-style: italic;
}

.pricing-page .section-heading p,
.pricing-page .pricing-hero-content > p,
.pricing-page .offer-content > p,
.pricing-page .membership-copy > p {
    color: var(--p-muted);
    line-height: 1.8;
    font-size: 15px;
}


/* HERO */

.pricing-hero {
    min-height: 650px;
    padding: 85px 7% 75px;
    display: grid;
    grid-template-columns: 1fr .9fr;
    align-items: center;
    gap: 70px;
    position: relative;
    background:
        radial-gradient(circle at 80% 20%, rgba(206,157,155,.17), transparent 30%),
        var(--p-bg);
}

.pricing-hero-content {
    max-width: 650px;
}

.pricing-hero h1 {
    font-size: clamp(50px, 6vw, 82px);
}

.pricing-hero-content > p {
    max-width: 560px;
    margin-bottom: 28px;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
}

.primary-btn,
.outline-btn,
.package-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    transition: .35s ease;
}

.primary-btn {
    background: var(--p-text);
    color: #fff;
}

.primary-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(48,37,37,.2);
}

.text-btn {
    color: var(--p-text);
    font-weight: 700;
    font-size: 13px;
}

.pricing-hero-visual {
    position: relative;
    max-width: 530px;
    justify-self: end;
}

.hero-image-frame {
    height: 510px;
    overflow: hidden;
    border-radius: 180px 180px 12px 12px;
    box-shadow: var(--p-shadow);
    transform: rotate(1deg);
}

.hero-image-frame img {
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}

.pricing-hero-visual:hover img {
    transform: scale(1.06);
}

.floating-price-card {
    position: absolute;
    left: -55px;
    bottom: 35px;
    padding: 22px 25px;
    background: var(--p-card);
    box-shadow: var(--p-shadow);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    animation: floatCard 4s ease-in-out infinite;
}

.floating-price-card span,
.floating-price-card small {
    font-size: 10px;
    color: var(--p-muted);
}

.floating-price-card strong {
    font-size: 29px;
    font-family: Georgia, serif;
}


/* CATEGORIES */

.pricing-categories {
    padding: 85px 7%;
    background: var(--p-soft);
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.category-item {
    background: var(--p-card);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 12px 35px rgba(60,40,38,.07);
    transition: .4s ease;
}

.category-item:hover {
    transform: translateY(-9px);
    box-shadow: var(--p-shadow);
}

.category-image {
    height: 235px;
    overflow: hidden;
}

.category-image img {
    height: 100%;
    object-fit: cover;
    transition: .7s ease;
}

.category-item:hover .category-image img {
    transform: scale(1.08);
}

.category-info {
    padding: 19px 20px 22px;
    position: relative;
}

.category-info span {
    font-size: 10px;
    color: var(--p-accent);
    font-weight: 800;
    letter-spacing: 2px;
}

.category-info h3 {
    margin: 7px 0 4px;
    font-family: Georgia, serif;
    font-size: 25px;
}

.category-info p {
    margin: 0;
    color: var(--p-muted);
    font-size: 12px;
}


/* PACKAGES */

.packages-section {
    padding: 90px 7%;
}

.package-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1150px;
    margin: auto;
}

.package-card {
    position: relative;
    padding: 24px;
    background: var(--p-card);
    border: 1px solid var(--p-line);
    border-radius: 18px;
    transition: .45s ease;
}

.package-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--p-shadow);
}

.package-card.featured {
    border: 1px solid var(--p-accent);
    transform: translateY(-12px);
}

.package-card.featured:hover {
    transform: translateY(-20px);
}

.featured-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    background: var(--p-accent);
    color: #fff;
    padding: 7px 11px;
    border-radius: 30px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
    z-index: 2;
}

.package-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.package-label {
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 800;
    color: var(--p-accent);
}

.package-number {
    font-family: Georgia, serif;
    font-size: 24px;
    opacity: .3;
}

.package-image {
    height: 210px;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 20px;
}

.package-image img {
    height: 100%;
    object-fit: cover;
    transition: .7s ease;
}

.package-card:hover .package-image img {
    transform: scale(1.07);
}

.package-card h3 {
    font-family: Georgia, serif;
    font-size: 28px;
    margin: 0 0 8px;
}

.package-description {
    color: var(--p-muted);
    font-size: 13px;
    line-height: 1.6;
    min-height: 42px;
}

.package-price {
    border-top: 1px solid var(--p-line);
    border-bottom: 1px solid var(--p-line);
    padding: 15px 0;
    margin: 18px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.package-price small {
    font-size: 9px;
    color: var(--p-muted);
    letter-spacing: 1px;
}

.package-price strong {
    font-size: 27px;
}

.package-card ul {
    padding: 0;
    margin: 0 0 22px;
    list-style: none;
}

.package-card li {
    font-size: 12px;
    padding: 7px 0;
    color: var(--p-muted);
}

.package-card li::before {
    content: "✦";
    color: var(--p-accent);
    margin-right: 9px;
}

.package-btn {
    width: 100%;
    background: var(--p-soft);
    color: var(--p-text);
}

.package-btn:hover {
    background: var(--p-text);
    color: #fff;
}


/* SERVICE PRICING */

.split-pricing,
.skin-pricing {
    padding: 80px 7%;
    display: grid;
    grid-template-columns: .85fr 1fr;
    gap: 75px;
    align-items: center;
}

.skin-pricing {
    grid-template-columns: 1fr .85fr;
    background: var(--p-soft);
}

.service-visual {
    position: relative;
}

.service-visual img {
    height: 480px;
    object-fit: cover;
    border-radius: 12px 150px 12px 12px;
}

.skin-pricing .service-visual img {
    border-radius: 150px 12px 12px 12px;
}

.image-note {
    position: absolute;
    left: 22px;
    bottom: 20px;
    background: var(--p-card);
    padding: 9px 13px;
    font-size: 9px;
    letter-spacing: 2px;
    font-weight: 800;
    border-radius: 30px;
    box-shadow: 0 8px 25px rgba(0,0,0,.12);
}

.service-content h2 {
    font-size: clamp(40px, 4vw, 58px);
}

.price-list {
    margin: 28px 0;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid var(--p-line);
}

.price-row h4 {
    margin: 0 0 5px;
    font-size: 14px;
}

.price-row span {
    font-size: 11px;
    color: var(--p-muted);
}

.price-row strong {
    font-size: 17px;
    white-space: nowrap;
}

.outline-btn {
    border: 1px solid var(--p-text);
    color: var(--p-text);
}

.outline-btn:hover {
    background: var(--p-text);
    color: #fff;
}


/* OCCASION */

.occasion-section {
    padding: 90px 7%;
}

.occasion-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.occasion-card {
    background: var(--p-card);
    border: 1px solid var(--p-line);
    border-radius: 16px;
    overflow: hidden;
    transition: .4s ease;
}

.occasion-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--p-shadow);
}

.occasion-card > img {
    height: 260px;
    object-fit: cover;
}

.occasion-card > div {
    padding: 22px;
}

.occasion-card span {
    color: var(--p-accent);
    font-size: 9px;
    letter-spacing: 2px;
    font-weight: 800;
}

.occasion-card h3 {
    font-family: Georgia, serif;
    font-size: 26px;
    margin: 8px 0;
}

.occasion-card strong {
    font-size: 14px;
}

.occasion-card p {
    color: var(--p-muted);
    font-size: 12px;
    line-height: 1.6;
}

.occasion-card a {
    color: var(--p-text);
    font-size: 12px;
    font-weight: 800;
}


/* MEMBERSHIP */

.membership-section {
    padding: 75px 7%;
    background: #3d2f30;
    color: #fff;
}

.membership-inner {
    max-width: 1150px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.membership-copy .eyebrow {
    color: #e5b4ae;
}

.membership-copy h2 {
    font-size: clamp(40px, 4vw, 60px);
}

.membership-copy > p {
    color: rgba(255,255,255,.7);
    max-width: 510px;
    margin-bottom: 28px;
}

.membership-copy .primary-btn {
    background: #fff;
    color: #3d2f30;
}

.membership-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.benefit {
    padding: 22px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    transition: .4s ease;
}

.benefit:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,.06);
}

.benefit > span {
    color: #e5b4ae;
    font-size: 18px;
}

.benefit h3 {
    margin: 0 0 5px;
    font-size: 15px;
}

.benefit p {
    margin: 0;
    color: rgba(255,255,255,.55);
    font-size: 11px;
}


/* OFFER */

.offer-section {
    padding: 85px 7%;
    display: grid;
    grid-template-columns: .9fr 1fr;
    gap: 75px;
    align-items: center;
    background: var(--p-soft);
}

.offer-content {
    max-width: 530px;
}

.offer-content h2 {
    font-size: clamp(43px, 5vw, 68px);
}

.offer-details {
    border-left: 2px solid var(--p-accent);
    padding: 12px 20px;
    margin: 25px 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.offer-details strong {
    font-size: 22px;
}

.offer-details span {
    font-size: 11px;
    color: var(--p-muted);
}

.offer-visual {
    position: relative;
}

.offer-visual img {
    height: 450px;
    object-fit: cover;
    border-radius: 12px 140px 12px 12px;
}

.offer-sticker {
    position: absolute;
    right: -25px;
    bottom: 30px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--p-text);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(-12deg);
    box-shadow: 0 12px 30px rgba(0,0,0,.2);
}

.offer-sticker span {
    font-size: 8px;
    letter-spacing: 2px;
}

.offer-sticker strong {
    font-family: Georgia, serif;
    font-size: 22px;
}

.offer-sticker small {
    font-size: 8px;
}


/* CTA */

.pricing-cta {
    padding: 100px 7%;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.pricing-cta h2 {
    font-size: clamp(45px, 5vw, 70px);
}

.pricing-cta p {
    max-width: 520px;
    margin: 0 auto 28px;
    color: var(--p-muted);
    line-height: 1.7;
}


/* ANIMATIONS */

.reveal {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity .8s ease, transform .8s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

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

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


/* RESPONSIVE */

@media (max-width: 1000px) {

    .pricing-hero {
        grid-template-columns: 1fr;
        padding-top: 65px;
    }

    .pricing-hero-visual {
        justify-self: start;
        width: min(100%, 550px);
    }

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

    .package-grid,
    .occasion-grid {
        grid-template-columns: 1fr;
    }

    .package-card.featured {
        transform: none;
    }

    .package-card.featured:hover {
        transform: translateY(-8px);
    }

    .split-pricing,
    .skin-pricing,
    .offer-section {
        grid-template-columns: 1fr;
    }

    .skin-pricing .service-content {
        order: 1;
    }

    .skin-pricing .service-visual {
        order: 2;
    }

    .membership-inner {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 650px) {

    .pricing-hero,
    .pricing-categories,
    .packages-section,
    .split-pricing,
    .skin-pricing,
    .occasion-section,
    .membership-section,
    .offer-section,
    .pricing-cta {
        padding-left: 5%;
        padding-right: 5%;
    }

    .pricing-hero {
        padding-top: 45px;
        min-height: auto;
    }

    .pricing-hero h1 {
        font-size: 48px;
    }

    .hero-image-frame {
        height: 390px;
        border-radius: 120px 120px 12px 12px;
    }

    .floating-price-card {
        left: 15px;
        bottom: 20px;
    }

    .category-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .category-image {
        height: 170px;
    }

    .category-info {
        padding: 14px;
    }

    .category-info h3 {
        font-size: 21px;
    }

    .package-card {
        padding: 18px;
    }

    .package-image {
        height: 190px;
    }

    .service-visual img,
    .offer-visual img {
        height: 350px;
    }

    .membership-benefits {
        grid-template-columns: 1fr;
    }

    .occasion-card > img {
        height: 220px;
    }

    .offer-sticker {
        right: 10px;
    }

    .price-row {
        padding: 15px 0;
    }

}
/* =========================================================
   GALLERY PAGE
   Scoped styles - will NOT affect Home 1 / Home 2
========================================================= */

.gallery-page {
    width: 100%;
    overflow: hidden;
    background: #fff;
    color: #171717;
}

.gallery-page img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-page section {
    position: relative;
}


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

.gallery-hero {
    min-height: 78vh;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
}

.gallery-hero-image {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.gallery-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: galleryHeroZoom 10s ease-in-out infinite alternate;
}

.gallery-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        90deg,
        rgba(0,0,0,.72),
        rgba(0,0,0,.28),
        rgba(0,0,0,.05)
    );
}

.gallery-hero-content {
    width: min(650px, 90%);
    margin-left: 8%;
    color: #fff;
    animation: galleryHeroText 1.2s ease forwards;
}

.gallery-eyebrow,
.gallery-hero-content .gallery-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 4px;
    margin-bottom: 18px;
}

.gallery-hero-content h1 {
    font-size: clamp(52px, 7vw, 100px);
    line-height: .95;
    margin: 0;
    font-weight: 800;
    letter-spacing: -4px;
}

.gallery-hero-content h1 span {
    font-style: italic;
    font-weight: 400;
}

.gallery-hero-content p {
    max-width: 470px;
    margin: 25px 0;
    line-height: 1.8;
    font-size: 15px;
}

.gallery-scroll {
    display: inline-flex;
    gap: 16px;
    align-items: center;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,.6);
    padding-bottom: 8px;
}

.gallery-scroll span {
    animation: galleryArrow 1.5s ease-in-out infinite;
}

.gallery-hero-small {
    position: absolute;
    right: 8%;
    bottom: 8%;
    width: 190px;
    height: 240px;
    border: 7px solid rgba(255,255,255,.9);
    overflow: hidden;
    transform: rotate(5deg);
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
    animation: galleryFloat 4s ease-in-out infinite;
}


/* ================= COMMON ================= */

.gallery-section {
    padding: 80px 7%;
}

.gallery-heading {
    max-width: 650px;
    margin-bottom: 45px;
}

.gallery-heading.centered {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.gallery-heading > span,
.detail-copy > span,
.studio-content > span,
.editorial-heading > span,
.trending-title > span,
.final-content > span {
    display: block;
    font-size: 11px;
    letter-spacing: 3px;
    font-weight: 800;
    margin-bottom: 15px;
    opacity: .7;
}

.gallery-heading h2,
.detail-copy h2,
.studio-content h2,
.editorial-heading h2,
.trending-title h2,
.final-content h2 {
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.05;
    margin: 0 0 18px;
    font-weight: 800;
    letter-spacing: -2px;
}

.gallery-heading h2 em,
.detail-copy h2 em,
.studio-content h2 em,
.final-content h2 em {
    font-style: italic;
    font-weight: 400;
}

.gallery-heading p,
.detail-copy p,
.studio-content p,
.final-content p {
    line-height: 1.8;
    font-size: 15px;
    max-width: 600px;
}


/* ================= MASONRY ================= */

.gallery-masonry {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 230px;
    gap: 14px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 3px;
}

.gallery-item.gallery-tall {
    grid-row: span 2;
}

.gallery-item.gallery-wide {
    grid-column: span 2;
}

.gallery-item img {
    transition:
        transform .8s cubic-bezier(.2,.7,.2,1),
        filter .5s ease;
}

.gallery-item:hover img {
    transform: scale(1.08);
    filter: brightness(.75);
}

.gallery-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 35px 20px 20px;
    color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,.7));
    transform: translateY(100%);
    transition: .45s ease;
}

.gallery-item:hover .gallery-overlay {
    transform: translateY(0);
}

.gallery-overlay span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}


/* ================= DETAIL ================= */

.gallery-detail-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 600px;
    background: #f4f0ec;
}

.detail-image {
    min-height: 550px;
    overflow: hidden;
}

.detail-image img {
    transition: transform 1s ease;
}

.detail-image:hover img {
    transform: scale(1.05);
}

.detail-copy {
    padding: 70px 10%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.detail-numbers {
    display: flex;
    gap: 35px;
    margin-top: 35px;
    flex-wrap: wrap;
}

.detail-numbers div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.detail-numbers strong {
    font-size: 30px;
}

.detail-numbers span {
    font-size: 12px;
    letter-spacing: 1px;
}


/* ================= MOSAIC ================= */

.gallery-mosaic {
    display: grid;
    grid-template-columns: 1.3fr .8fr .8fr;
    grid-auto-rows: 250px;
    gap: 12px;
}

.mosaic-item {
    overflow: hidden;
    border-radius: 3px;
}

.mosaic-item img {
    transition: transform .8s ease;
}

.mosaic-item:hover img {
    transform: scale(1.08);
}

.mosaic-large {
    grid-row: span 2;
}

.mosaic-wide {
    grid-column: span 2;
}


/* ================= STUDIO ================= */

.gallery-studio-section {
    padding: 90px 7%;
    background: #1a1817;
    color: #fff;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 60px;
    align-items: center;
}

.studio-content h2 {
    max-width: 600px;
}

.studio-content p {
    color: rgba(255,255,255,.72);
}

.studio-line {
    width: 80px;
    height: 1px;
    background: currentColor;
    margin: 30px 0;
}

.studio-content small {
    opacity: .65;
}

.studio-images {
    min-height: 520px;
    position: relative;
}

.studio-img {
    position: absolute;
    overflow: hidden;
}

.studio-img img {
    transition: transform .8s ease;
}

.studio-img:hover img {
    transform: scale(1.08);
}

.studio-img-one {
    width: 55%;
    height: 360px;
    top: 0;
    left: 0;
}

.studio-img-two {
    width: 45%;
    height: 300px;
    right: 0;
    top: 80px;
}

.studio-img-three {
    width: 48%;
    height: 240px;
    bottom: 0;
    left: 20%;
}


/* ================= EDITORIAL ================= */

.gallery-editorial {
    padding: 90px 7%;
}

.editorial-gallery {
    display: grid;
    grid-template-columns: 1.3fr .7fr .7fr;
    gap: 15px;
    align-items: end;
}

.editorial-card {
    position: relative;
    height: 430px;
    overflow: hidden;
}

.editorial-card-large {
    height: 590px;
}

.editorial-card img {
    transition: transform 1s ease;
}

.editorial-card:hover img {
    transform: scale(1.07);
}

.editorial-label {
    position: absolute;
    left: 20px;
    bottom: 20px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-shadow: 0 2px 10px rgba(0,0,0,.5);
}


/* ================= CLIENT ================= */

.client-gallery {
    background: #f5f2ef;
}

.client-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 240px;
    gap: 12px;
}

.client-photo {
    overflow: hidden;
}

.client-photo img {
    transition: transform .7s ease;
}

.client-photo:hover img {
    transform: scale(1.07);
}

.photo-large {
    grid-row: span 2;
    grid-column: span 2;
}

.photo-wide {
    grid-column: span 2;
}


/* ================= TRENDING ================= */

.gallery-trending {
    padding: 85px 0;
    overflow: hidden;
}

.trending-title {
    padding: 0 7%;
    margin-bottom: 35px;
}

.trending-track {
    display: flex;
    gap: 15px;
    padding: 0 7%;
    overflow-x: auto;
    scrollbar-width: none;
}

.trending-track::-webkit-scrollbar {
    display: none;
}

.trending-item {
    flex: 0 0 230px;
    height: 310px;
    position: relative;
    overflow: hidden;
}

.trending-item img {
    transition: transform .8s ease;
}

.trending-item:hover img {
    transform: scale(1.08);
}

.trending-item span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 35px 18px 18px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(transparent, rgba(0,0,0,.7));
}


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

.gallery-final {
    min-height: 600px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.final-image {
    position: absolute;
    inset: 0;
}

.final-image img {
    object-fit: cover;
}

.final-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.48);
}

.final-content {
    position: relative;
    z-index: 2;
    color: #fff;
    margin-left: 8%;
    max-width: 600px;
}

.final-content p {
    color: rgba(255,255,255,.85);
}

.gallery-button {
    display: inline-flex;
    gap: 20px;
    align-items: center;
    margin-top: 15px;
    padding: 14px 22px;
    background: #fff;
    color: #111;
    text-decoration: none;
    font-weight: 800;
    transition: .3s ease;
}

.gallery-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0,0,0,.2);
}


/* ================= LIGHTBOX ================= */

.gallery-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.94);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: .3s ease;
}

.gallery-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-image-wrap {
    width: min(90vw, 1100px);
    height: min(85vh, 800px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox-image-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    z-index: 3;
}

.lightbox-close {
    top: 25px;
    right: 35px;
    font-size: 45px;
}

.lightbox-prev,
.lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    font-size: 65px;
}

.lightbox-prev {
    left: 25px;
}

.lightbox-next {
    right: 25px;
}


/* ================= REVEAL ANIMATION ================= */

.reveal-gallery {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.reveal-gallery.show {
    opacity: 1;
    transform: translateY(0);
}


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

@keyframes galleryHeroZoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }
}

@keyframes galleryHeroText {
    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes galleryFloat {
    0%,
    100% {
        transform: rotate(5deg) translateY(0);
    }

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

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

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


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

@media (max-width: 1000px) {

    .gallery-hero {
        min-height: 700px;
    }

    .gallery-hero-small {
        width: 150px;
        height: 190px;
        right: 5%;
    }

    .gallery-masonry {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-detail-section,
    .gallery-studio-section {
        grid-template-columns: 1fr;
    }

    .detail-image {
        min-height: 450px;
    }

    .studio-images {
        min-height: 480px;
    }

    .editorial-gallery {
        grid-template-columns: 1fr 1fr;
    }

    .editorial-card-large {
        grid-column: span 2;
    }

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


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

@media (max-width: 650px) {

    .gallery-hero {
        min-height: 650px;
    }

    .gallery-hero-content {
        margin-left: 6%;
        margin-right: 6%;
    }

    .gallery-hero-content h1 {
        font-size: 55px;
        letter-spacing: -2px;
    }

    .gallery-hero-small {
        width: 115px;
        height: 145px;
        right: 5%;
        bottom: 7%;
        border-width: 5px;
    }

    .gallery-section,
    .gallery-editorial {
        padding: 60px 5%;
    }

    .gallery-masonry {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 180px;
        gap: 9px;
    }

    .gallery-item.gallery-wide {
        grid-column: span 2;
    }

    .gallery-heading h2,
    .detail-copy h2,
    .studio-content h2,
    .editorial-heading h2,
    .trending-title h2,
    .final-content h2 {
        font-size: 36px;
    }

    .gallery-detail-section {
        min-height: auto;
    }

    .detail-image {
        min-height: 380px;
    }

    .detail-copy {
        padding: 55px 7%;
    }

    .gallery-mosaic {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 190px;
    }

    .mosaic-large {
        grid-row: span 2;
    }

    .mosaic-wide {
        grid-column: span 2;
    }

    .gallery-studio-section {
        padding: 65px 6%;
        gap: 35px;
    }

    .studio-images {
        min-height: 390px;
    }

    .studio-img-one {
        width: 58%;
        height: 270px;
    }

    .studio-img-two {
        width: 48%;
        height: 220px;
        top: 55px;
    }

    .studio-img-three {
        width: 50%;
        height: 180px;
    }

    .editorial-gallery {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .editorial-card {
        height: 280px;
    }

    .editorial-card-large {
        height: 390px;
        grid-column: span 2;
    }

    .client-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 180px;
        gap: 9px;
    }

    .gallery-final {
        min-height: 550px;
    }

    .final-content {
        margin: 0 6%;
    }

    .lightbox-prev {
        left: 8px;
    }

    .lightbox-next {
        right: 8px;
    }

    .lightbox-close {
        top: 12px;
        right: 15px;
    }
}
/* =========================================================
   CONTACT PAGE
   Add this section at the END of style.css
   ========================================================= */

.contact-page {
    --contact-dark: #191613;
    --contact-soft: #f7f3ed;
    --contact-cream: #eee6da;
    --contact-gold: #b89252;
    --contact-brown: #6d5946;
    --contact-border: rgba(25, 22, 19, 0.12);

    overflow: hidden;
    background: #fffdf9;
    color: var(--contact-dark);
}

/* ---------- COMMON ---------- */

.contact-page img {
    display: block;
    width: 100%;
    object-fit: cover;
}

.contact-page a {
    text-decoration: none;
}

.contact-eyebrow,
.contact-section-heading > span,
.map-heading > span,
.contact-final-content > span {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--contact-gold);
}

.contact-section-heading {
    max-width: 700px;
    margin-bottom: 42px;
}

.contact-section-heading h2,
.map-heading h2 {
    margin: 10px 0 12px;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.05;
    font-weight: 850;
    letter-spacing: -0.04em;
}

.contact-section-heading p,
.contact-form-area > p,
.contact-visit-content > p {
    color: #756d65;
    line-height: 1.8;
    font-size: 0.98rem;
}

/* ---------- HERO ---------- */

.contact-hero {
    min-height: 650px;
    padding: 85px 7% 75px;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 70px;
    background:
        radial-gradient(circle at 10% 20%, rgba(184,146,82,0.12), transparent 30%),
        linear-gradient(135deg, #fbf7f1, #f2e9dd);
}

.contact-hero-content {
    max-width: 600px;
    animation: contactFadeUp 0.9s ease both;
}

.contact-hero-content h1 {
    margin: 14px 0 22px;
    font-size: clamp(3.4rem, 6vw, 6.5rem);
    line-height: 0.94;
    letter-spacing: -0.06em;
    font-weight: 900;
}

.contact-hero-content h1 span {
    display: block;
    font-family: Georgia, serif;
    font-style: italic;
    font-weight: 500;
    color: var(--contact-gold);
}

.contact-hero-content > p {
    max-width: 520px;
    margin-bottom: 32px;
    color: #675f58;
    font-size: 1.02rem;
    line-height: 1.85;
}

.contact-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.contact-btn {
    min-height: 50px;
    padding: 0 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    transition: 0.35s ease;
}

.contact-btn.primary {
    background: var(--contact-dark);
    color: #fff;
}

.contact-btn.secondary {
    border: 1px solid var(--contact-dark);
    color: var(--contact-dark);
    background: transparent;
}

.contact-btn:hover {
    transform: translateY(-4px);
}

.contact-btn.primary:hover {
    box-shadow: 0 14px 30px rgba(25,22,19,0.18);
}

.contact-btn.secondary:hover {
    background: var(--contact-dark);
    color: #fff;
}

.contact-hero-visual {
    position: relative;
    max-width: 720px;
    justify-self: end;
    animation: contactImageReveal 1s ease both;
}

.hero-image-frame {
    height: 570px;
    overflow: hidden;
    border-radius: 180px 180px 20px 20px;
    box-shadow: 0 30px 70px rgba(49,37,26,0.17);
}

.hero-image-frame img {
    height: 100%;
    transition: transform 0.8s ease;
}

.contact-hero-visual:hover .hero-image-frame img {
    transform: scale(1.045);
}

.floating-contact-note {
    position: absolute;
    left: -45px;
    bottom: 40px;
    width: 210px;
    padding: 20px;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(15px);
    box-shadow: 0 18px 45px rgba(30,20,10,0.15);
    animation: contactFloat 4s ease-in-out infinite;
}

.floating-contact-note span {
    display: block;
    margin-bottom: 8px;
    color: var(--contact-gold);
    font-size: 1.3rem;
}

.floating-contact-note strong,
.floating-contact-note small {
    display: block;
}

.floating-contact-note strong {
    font-size: 0.92rem;
}

.floating-contact-note small {
    margin-top: 4px;
    color: #777;
}

/* ---------- QUICK CONTACT ---------- */

.contact-quick-section {
    padding: 80px 7%;
    background: #fffdf9;
}

.contact-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.contact-info-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px 25px;
    background: #f5eee5;
    border: 1px solid rgba(184,146,82,0.12);
    overflow: hidden;
    transition: 0.4s ease;
}

.contact-info-card::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    right: -45px;
    bottom: -45px;
    border-radius: 50%;
    background: rgba(184,146,82,0.12);
    transition: 0.5s ease;
}

.contact-info-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 35px rgba(45,30,15,0.1);
}

.contact-info-card:hover::after {
    transform: scale(1.8);
}

.contact-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--contact-dark);
    color: #fff;
    font-size: 1.15rem;
}

.contact-info-card span {
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: var(--contact-gold);
}

.contact-info-card h3 {
    margin: 5px 0;
    font-size: 1rem;
    font-weight: 800;
}

.contact-info-card p {
    margin: 0;
    color: #756d65;
    font-size: 0.82rem;
}

/* ---------- ENQUIRY ---------- */

.contact-enquiry-section {
    padding: 80px 7%;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 70px;
    align-items: center;
    background: var(--contact-soft);
}

.contact-enquiry-image {
    position: relative;
}

.contact-enquiry-image img {
    height: 620px;
    border-radius: 18px;
}

.image-caption {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    padding: 20px 22px;
    background: rgba(25,22,19,0.88);
    color: #fff;
    backdrop-filter: blur(10px);
}

.image-caption span {
    display: block;
    margin-bottom: 5px;
    color: #d9b875;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.image-caption strong {
    font-size: 1.1rem;
}

.contact-form-area {
    max-width: 700px;
}

.contact-form-area h2 {
    margin: 12px 0;
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 850;
}

.contact-form-area > p {
    margin-bottom: 30px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

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

.contact-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;
    border: 1px solid #d8d0c7;
    background: #fff;
    color: var(--contact-dark);
    padding: 14px 15px;
    font: inherit;
    font-size: 0.88rem;
    outline: none;
    transition: 0.3s ease;
}

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

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-color: var(--contact-gold);
    box-shadow: 0 0 0 3px rgba(184,146,82,0.08);
}

.contact-submit-btn {
    border: 0;
    padding: 15px 27px;
    background: var(--contact-dark);
    color: #fff;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    transition: 0.35s ease;
}

.contact-submit-btn span {
    margin-left: 12px;
    transition: 0.3s ease;
}

.contact-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(25,22,19,0.18);
}

.contact-submit-btn:hover span {
    margin-left: 18px;
}

.contact-form-message {
    margin-top: 12px;
    min-height: 20px;
    font-size: 0.82rem;
    font-weight: 700;
}

/* ---------- VISIT ---------- */

.contact-visit-section {
    padding: 85px 7%;
    display: grid;
    grid-template-columns: 1fr 0.95fr;
    gap: 70px;
    align-items: center;
    background: #fffdf9;
}

.contact-visit-content {
    max-width: 620px;
}

.contact-visit-content h2 {
    margin: 12px 0 20px;
    font-size: clamp(2.3rem, 4.4vw, 4.2rem);
    line-height: 0.98;
    letter-spacing: -0.05em;
    font-weight: 850;
}

.contact-visit-content h2 span {
    display: block;
    font-family: Georgia, serif;
    font-style: italic;
    color: var(--contact-gold);
    font-weight: 500;
}

.visit-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 35px;
}

.visit-details > div {
    padding-top: 17px;
    border-top: 1px solid var(--contact-border);
}

.visit-details span {
    display: block;
    margin-bottom: 9px;
    color: var(--contact-gold);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.visit-details strong {
    font-size: 0.83rem;
    line-height: 1.7;
}

.contact-visit-image {
    position: relative;
}

.contact-visit-image img {
    height: 500px;
    border-radius: 20px 20px 150px 20px;
}

.visit-badge {
    position: absolute;
    right: 22px;
    bottom: 22px;
    padding: 18px 20px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(20,15,10,0.13);
}

.visit-badge span,
.visit-badge strong {
    display: block;
}

.visit-badge span {
    color: #8c6b38;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.visit-badge strong {
    margin-top: 5px;
    font-size: 0.75rem;
}

/* ---------- MAP ---------- */

.contact-map-section {
    padding: 80px 7%;
    background: #f4eee7;
}

.map-heading {
    margin-bottom: 35px;
}

.map-wrapper {
    position: relative;
}

.map-placeholder {
    position: relative;
    height: 390px;
    overflow: hidden;
    background:
        linear-gradient(25deg, transparent 48%, rgba(255,255,255,0.8) 49%, transparent 51%),
        linear-gradient(145deg, transparent 45%, rgba(255,255,255,0.8) 46%, transparent 48%),
        #ddd4c8;
}

.map-grid {
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-image:
        linear-gradient(rgba(100,80,60,0.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100,80,60,0.13) 1px, transparent 1px);
    background-size: 55px 55px;
}

.map-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    border-radius: 50% 50% 50% 0;
    rotate: -45deg;
    background: var(--contact-dark);
    box-shadow: 0 12px 25px rgba(20,15,10,0.25);
    animation: contactPin 2s ease-in-out infinite;
}

.map-pin span {
    rotate: 45deg;
    color: #fff;
    font-size: 1.5rem;
}

.map-location-card {
    position: absolute;
    left: 30px;
    bottom: 30px;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 10px 30px rgba(20,15,10,0.14);
}

.map-location-card strong {
    font-size: 0.95rem;
}

.map-location-card span {
    margin-top: 4px;
    color: #777;
    font-size: 0.76rem;
}

/* ---------- FAQ ---------- */

.contact-faq-section {
    padding: 85px 7%;
    background: #fffdf9;
}

.contact-faq-list {
    max-width: 950px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.contact-faq-list details {
    border-bottom: 1px solid #ddd5cc;
    padding: 0 0 18px;
}

.contact-faq-list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 0;
    cursor: pointer;
    list-style: none;
    font-size: 0.95rem;
    font-weight: 800;
}

.contact-faq-list summary::-webkit-details-marker {
    display: none;
}

.contact-faq-list summary span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid #cfc5ba;
    border-radius: 50%;
    transition: 0.3s ease;
}

.contact-faq-list details[open] summary span {
    transform: rotate(45deg);
    background: var(--contact-dark);
    color: #fff;
}

.contact-faq-list details p {
    margin: 0;
    padding: 0 35px 8px 0;
    color: #756d65;
    font-size: 0.84rem;
    line-height: 1.8;
}

/* ---------- FINAL CTA ---------- */

.contact-final-section {
    position: relative;
    min-height: 350px;
    padding: 70px 7%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 50%, rgba(184,146,82,0.22), transparent 28%),
        radial-gradient(circle at 80% 40%, rgba(184,146,82,0.15), transparent 28%),
        var(--contact-dark);
    color: #fff;
}

.contact-final-content {
    position: relative;
    z-index: 2;
}

.contact-final-content h2 {
    margin: 12px 0;
    font-size: clamp(2.7rem, 6vw, 5.5rem);
    line-height: 0.95;
    letter-spacing: -0.06em;
    font-weight: 850;
}

.contact-final-content h2 em {
    color: #d2ad69;
    font-family: Georgia, serif;
    font-weight: 500;
}

.contact-final-content p {
    margin: 0 auto 25px;
    max-width: 530px;
    color: #cfc7bf;
    line-height: 1.7;
}

.contact-final-btn {
    display: inline-flex;
    align-items: center;
    min-height: 50px;
    padding: 0 25px;
    background: #fff;
    color: var(--contact-dark);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    transition: 0.35s ease;
}

.contact-final-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

.contact-final-decoration {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.contact-final-decoration span {
    position: absolute;
    color: rgba(210,173,105,0.3);
    font-size: 4rem;
    animation: contactTwinkle 3s ease-in-out infinite;
}

.contact-final-decoration span:nth-child(1) {
    left: 12%;
    top: 25%;
}

.contact-final-decoration span:nth-child(2) {
    right: 15%;
    top: 20%;
    animation-delay: 0.8s;
}

.contact-final-decoration span:nth-child(3) {
    right: 25%;
    bottom: 15%;
    animation-delay: 1.5s;
}

/* ---------- ANIMATIONS ---------- */

@keyframes contactFadeUp {
    from {
        opacity: 0;
        transform: translateY(35px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes contactImageReveal {
    from {
        opacity: 0;
        transform: translateX(45px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

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

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

@keyframes contactPin {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -55%) scale(1.08);
    }
}

@keyframes contactTwinkle {
    0%,
    100% {
        opacity: 0.25;
        transform: scale(0.8) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.2) rotate(20deg);
    }
}

/* ---------- TABLET ---------- */

@media (max-width: 1000px) {

    .contact-hero {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .contact-hero-content {
        max-width: 800px;
    }

    .contact-hero-visual {
        justify-self: center;
        width: min(100%, 650px);
    }

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

    .contact-enquiry-section,
    .contact-visit-section {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .contact-enquiry-image {
        max-width: 650px;
    }

    .contact-form-area {
        max-width: 850px;
    }

    .contact-visit-image {
        max-width: 650px;
    }

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

/* ---------- MOBILE ---------- */

@media (max-width: 700px) {

    .contact-hero {
        min-height: auto;
        padding: 55px 5% 60px;
        gap: 35px;
    }

    .contact-hero-content h1 {
        font-size: clamp(3rem, 15vw, 4.5rem);
    }

    .contact-hero-content > p {
        font-size: 0.92rem;
    }

    .contact-hero-buttons {
        width: 100%;
    }

    .contact-btn {
        flex: 1 1 100%;
    }

    .hero-image-frame {
        height: 430px;
        border-radius: 120px 120px 16px 16px;
    }

    .floating-contact-note {
        left: 15px;
        bottom: 15px;
        width: 190px;
        padding: 16px;
    }

    .contact-quick-section,
    .contact-enquiry-section,
    .contact-visit-section,
    .contact-map-section,
    .contact-faq-section {
        padding: 60px 5%;
    }

    .contact-section-heading {
        margin-bottom: 30px;
    }

    .contact-section-heading h2,
    .map-heading h2 {
        font-size: 2.25rem;
    }

    .contact-info-card {
        padding: 21px;
    }

    .contact-enquiry-image img {
        height: 420px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-visit-content h2 {
        font-size: 2.6rem;
    }

    .visit-details {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contact-visit-image img {
        height: 410px;
        border-radius: 16px 16px 100px 16px;
    }

    .map-placeholder {
        height: 310px;
    }

    .map-location-card {
        left: 15px;
        bottom: 15px;
    }

    .contact-final-section {
        min-height: 330px;
        padding: 60px 5%;
    }

    .contact-final-content h2 {
        font-size: 3.2rem;
    }

}

/* ---------- VERY SMALL MOBILE ---------- */

@media (max-width: 420px) {

    .contact-hero {
        padding-left: 4%;
        padding-right: 4%;
    }

    .contact-quick-section,
    .contact-enquiry-section,
    .contact-visit-section,
    .contact-map-section,
    .contact-faq-section {
        padding-left: 4%;
        padding-right: 4%;
    }

    .hero-image-frame {
        height: 370px;
    }

    .floating-contact-note {
        width: 175px;
    }

    .contact-final-content h2 {
        font-size: 2.8rem;
    }
}
/* =========================================================
   LOGIN PAGE
   ========================================================= */

.login-page {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(184,146,82,0.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(184,146,82,0.09),
            transparent 30%
        ),
        #faf7f2;

    color: #191613;
    overflow: hidden;
}


/* CONTROLS */

.login-controls {
    position: fixed;
    top: 25px;
    right: 30px;

    display: flex;
    gap: 8px;

    z-index: 100;
}

.login-controls button {
    width: 43px;
    height: 38px;

    border: 1px solid rgba(25,22,19,0.18);
    background: rgba(255,255,255,0.8);

    color: #191613;

    cursor: pointer;

    font-size: 0.7rem;
    font-weight: 800;

    transition: 0.3s ease;
}

.login-controls button:hover {
    background: #191613;
    color: #fff;
    transform: translateY(-3px);
}


/* SECTION */

.login-section {
    min-height: 100vh;

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

    padding: 50px 20px;

    position: relative;
}


/* BOX */

.login-box {
    width: min(100%, 470px);

    padding: 42px 45px;

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

    border: 1px solid rgba(184,146,82,0.22);

    box-shadow:
        0 30px 80px rgba(40,30,20,0.12);

    position: relative;

    overflow: hidden;

    animation: loginBoxIn 0.8s ease both;
}


/* BRAND */

.login-brand {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 35px;
}

.login-logo {
    width: 45px;
    height: 45px;

    display: grid;
    place-items: center;

    border: 1px solid #b89252;

    color: #b89252;

    font-size: 1.4rem;

    transform: rotate(45deg);
}

.login-logo::first-letter {
    transform: rotate(-45deg);
}

.login-brand strong,
.login-brand span {
    display: block;
}

.login-brand strong {
    font-size: 1rem;
    letter-spacing: 0.15em;
    font-weight: 900;
}

.login-brand span {
    margin-top: 3px;
    font-size: 0.58rem;
    letter-spacing: 0.32em;
    color: #9b7948;
}


/* HEADING */

.login-heading {
    margin-bottom: 28px;
}

.login-heading > span {
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    font-weight: 800;
    color: #b89252;
}

.login-heading h1 {
    margin: 8px 0 8px;

    font-size: 2.5rem;
    line-height: 1;

    font-weight: 900;
    letter-spacing: -0.04em;
}

.login-heading p {
    margin: 0;

    color: #777067;

    font-size: 0.85rem;
    line-height: 1.7;
}


/* FORM */

.login-field {
    margin-bottom: 18px;
}

.login-field label {
    display: block;

    margin-bottom: 7px;

    font-size: 0.72rem;
    font-weight: 800;

    color: #3b352f;
}

.login-field input {
    width: 100%;
    height: 49px;

    padding: 0 14px;

    border: 1px solid #d8d0c7;

    background: #fff;

    color: #191613;

    outline: none;

    font: inherit;
    font-size: 0.84rem;

    transition: 0.3s ease;
}

.login-field input:focus {
    border-color: #b89252;

    box-shadow:
        0 0 0 3px rgba(184,146,82,0.09);
}

.login-field input::placeholder {
    color: #aaa19a;
}


/* OPTIONS */

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin: 4px 0 22px;

    font-size: 0.7rem;
}

.remember-option {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #777067;
}

.remember-option input {
    accent-color: #b89252;
}

.login-options a {
    color: #9b7948;
    font-weight: 700;
}


/* BUTTON */

.login-submit {
    width: 100%;
    height: 52px;

    border: 0;

    background: #191613;
    color: #fff;

    cursor: pointer;

    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;

    transition: 0.35s ease;
}

.login-submit span {
    margin-left: 12px;

    transition: 0.3s ease;
}

.login-submit:hover {
    background: #b89252;

    transform: translateY(-3px);

    box-shadow:
        0 12px 28px rgba(25,22,19,0.18);
}

.login-submit:hover span {
    margin-left: 19px;
}


/* MESSAGE */

.login-message {
    min-height: 18px;

    margin: 10px 0 0;

    font-size: 0.72rem;

    font-weight: 700;

    text-align: center;
}


/* SWITCH */

.login-switch {
    margin-top: 27px;
    padding-top: 22px;

    border-top: 1px solid #e4ddd5;

    text-align: center;

    font-size: 0.74rem;

    color: #777067;
}

.login-switch button {
    border: 0;
    background: none;

    color: #9b7948;

    cursor: pointer;

    font: inherit;
    font-weight: 900;

    margin-left: 4px;
}

.login-switch button:hover {
    text-decoration: underline;
}


/* SIGNUP */

.signup-wrapper {
    display: none;
}


/* DECORATION */

.login-decoration {
    position: absolute;

    color: rgba(184,146,82,0.28);

    font-size: 4rem;

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

.login-decoration-one {
    left: 8%;
    top: 22%;
}

.login-decoration-two {
    right: 9%;
    bottom: 20%;

    animation-delay: 1.2s;
}


/* ANIMATION */

@keyframes loginBoxIn {

    from {
        opacity: 0;
        transform:
            translateY(35px)
            scale(0.97);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes loginTwinkle {

    0%,
    100% {
        opacity: 0.25;
        transform: scale(0.8) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.15) rotate(15deg);
    }
}


/* MOBILE */

@media (max-width: 600px) {

    .login-controls {
        top: 15px;
        right: 15px;
    }

    .login-controls button {
        width: 39px;
        height: 35px;
    }

    .login-section {
        padding: 75px 15px 30px;
    }

    .login-box {
        padding: 32px 24px;
    }

    .login-heading h1 {
        font-size: 2.15rem;
    }

    .login-decoration {
        display: none;
    }

    .login-options {
        align-items: flex-start;
        gap: 12px;
    }

    .login-switch {
        line-height: 1.8;
    }
}

@media (max-width: 380px) {

    .login-box {
        padding: 28px 18px;
    }

    .login-brand {
        margin-bottom: 28px;
    }

    .login-heading h1 {
        font-size: 2rem;
    }
}
.back-home {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 24px;

    color: #9b7948;
    text-decoration: none;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;

    transition: 0.3s ease;
}

.back-home:hover {
    color: #191613;
    transform: translateX(-4px);
}
/* =========================================================
   SKIN PAGE
   ========================================================= */

.skin-page {
    --skin-dark: #201916;
    --skin-cream: #f7f1eb;
    --skin-soft: #eee3da;
    --skin-gold: #b89562;
    --skin-text: #29231f;
    --skin-muted: #756b64;

    background: var(--skin-cream);
    color: var(--skin-text);

    overflow: hidden;
}


/* HERO */

.skin-hero {
    min-height: 570px;

    display: grid;
    grid-template-columns: 0.95fr 1.05fr;

    background: #f3e9e1;
}

.skin-hero-content {
    padding: 70px 8vw;

    display: flex;
    flex-direction: column;
    justify-content: center;

    position: relative;
    z-index: 2;
}

.skin-eyebrow,
.skin-section-head span,
.skin-intro-text span,
.skin-concern-content > span,
.skin-ritual-head span,
.skin-experience-content > span,
.skin-testimonial-title span,
.skin-consultation-content > span {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.2em;
    color: var(--skin-gold);
}

.skin-hero h1 {
    max-width: 590px;

    margin: 15px 0;

    font-size: clamp(3rem, 5vw, 5.5rem);
    line-height: 0.94;
    letter-spacing: -0.055em;
    font-weight: 900;
}

.skin-hero h1 em {
    display: block;

    color: var(--skin-gold);
    font-family: Georgia, serif;
    font-weight: 500;
}

.skin-hero-content p {
    max-width: 470px;

    margin: 0 0 27px;

    color: var(--skin-muted);

    font-size: 15px;
    line-height: 1.8;
}

.skin-hero-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.skin-btn {
    min-height: 45px;

    padding: 13px 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;

    transition: 0.35s ease;
}

.skin-btn-dark {
    background: var(--skin-dark);
    color: white;
}

.skin-btn-dark:hover {
    background: var(--skin-gold);
    transform: translateY(-4px);
}

.skin-btn-line {
    border: 1px solid rgba(32,25,22,0.3);
    color: var(--skin-dark);
}

.skin-btn-line:hover {
    background: var(--skin-dark);
    color: white;
}

.skin-btn-light {
    background: #fff8f1;
    color: var(--skin-dark);
}

.skin-btn-light:hover {
    background: var(--skin-gold);
    color: white;
    transform: translateY(-4px);
}


/* HERO IMAGE */

.skin-hero-image {
    min-height: 570px;

    position: relative;

    overflow: hidden;
}

.skin-hero-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 1.2s ease;
}

.skin-hero:hover .skin-hero-image img {
    transform: scale(1.045);
}

.skin-hero-tag {
    position: absolute;

    left: 22px;
    bottom: 22px;

    padding: 14px 18px;

    display: flex;
    align-items: center;
    gap: 12px;

    background: rgba(255,248,241,0.94);
}

.skin-hero-tag strong {
    color: var(--skin-gold);
    font-size: 18px;
}

.skin-hero-tag span {
    font-size: 10px;
    font-weight: 800;
}


/* INTRO */

.skin-intro {
    min-height: 185px;

    padding: 38px 8vw;

    display: grid;
    grid-template-columns: 70px 1fr 1fr;
    align-items: center;
    gap: 30px;

    background: #fffaf6;

    border-bottom: 1px solid #e4d8ce;
}

.skin-intro-number {
    font-size: 30px;
    font-weight: 900;
    color: var(--skin-gold);
}

.skin-intro-text h2 {
    max-width: 500px;

    margin: 7px 0 0;

    font-size: clamp(1.8rem, 3vw, 3rem);
    line-height: 1;
}

.skin-intro > p {
    color: var(--skin-muted);

    font-size: 14px;
    line-height: 1.8;
}


/* TREATMENTS */

.skin-treatments {
    padding: 65px 7vw;
}

.skin-section-head {
    margin-bottom: 32px;

    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
}

.skin-section-head h2 {
    max-width: 600px;

    margin: 9px 0 0;

    font-size: clamp(2rem, 3.5vw, 3.8rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.skin-section-head > p {
    max-width: 330px;

    color: var(--skin-muted);

    font-size: 13px;
    line-height: 1.7;
}


/* TREATMENT GRID */

.skin-treatment-grid {
    display: grid;

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

    gap: 13px;
}

.skin-treatment-card {
    background: #fffaf6;

    border: 1px solid #e6dbd2;

    transition: 0.45s ease;

    animation: skinFloatIn 0.8s ease both;
}

.skin-treatment-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 20px 45px rgba(52,39,31,0.12);
}

.skin-treatment-image {
    height: 205px;

    overflow: hidden;
}

.skin-treatment-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: 0.7s ease;
}

.skin-treatment-card:hover img {
    transform: scale(1.08);
}

.skin-treatment-content {
    padding: 19px;
}

.skin-treatment-content > span {
    color: var(--skin-gold);

    font-size: 10px;
    font-weight: 900;
}

.skin-treatment-content h3 {
    margin: 7px 0;

    font-size: 18px;
    font-weight: 900;
}

.skin-treatment-content p {
    min-height: 65px;

    margin: 0;

    color: var(--skin-muted);

    font-size: 12px;
    line-height: 1.65;
}

.skin-treatment-bottom {
    margin-top: 17px;

    padding-top: 13px;

    border-top: 1px solid #e4d8ce;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.skin-treatment-bottom strong {
    font-size: 14px;
}

.skin-treatment-bottom small {
    color: var(--skin-muted);

    font-size: 10px;
}


/* CONCERNS */

.skin-concerns {
    padding: 45px 7vw;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

    gap: 55px;
    align-items: center;

    background: #e9ddd4;
}

.skin-concern-visual {
    height: 410px;

    position: relative;
}

.skin-concern-visual img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.skin-floating-label {
    position: absolute;

    right: -18px;
    bottom: 22px;

    padding: 14px 19px;

    background: var(--skin-dark);
    color: white;

    display: flex;
    align-items: center;
    gap: 12px;
}

.skin-floating-label span {
    color: var(--skin-gold);
    font-weight: 900;
}

.skin-floating-label strong {
    font-size: 12px;
}

.skin-concern-content h2 {
    max-width: 600px;

    margin: 10px 0 14px;

    font-size: clamp(2.2rem, 4vw, 4.2rem);
    line-height: 0.95;
    letter-spacing: -0.05em;
}

.skin-concern-content > p {
    max-width: 540px;

    color: var(--skin-muted);

    font-size: 14px;
    line-height: 1.8;
}

.skin-concern-list {
    margin-top: 25px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 9px;
}

.skin-concern-list div {
    padding: 15px;

    background: rgba(255,250,246,0.68);

    display: flex;
    align-items: center;
    gap: 12px;

    transition: 0.3s ease;
}

.skin-concern-list div:hover {
    transform: translateX(6px);
    background: #fffaf6;
}

.skin-concern-list span {
    color: var(--skin-gold);
    font-weight: 900;
    font-size: 10px;
}

.skin-concern-list strong {
    font-size: 12px;
}


/* RITUAL */

.skin-ritual {
    padding: 65px 7vw;

    background: #fffaf6;
}

.skin-ritual-track {
    display: grid;

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

    border-top: 1px solid #ded2c8;
    border-bottom: 1px solid #ded2c8;
}

.skin-ritual-step {
    min-height: 155px;

    padding: 25px 20px;

    display: flex;
    gap: 18px;

    border-right: 1px solid #ded2c8;

    transition: 0.35s ease;
}

.skin-ritual-step:last-child {
    border-right: 0;
}

.skin-ritual-step:hover {
    background: #f2e8df;
}

.skin-ritual-step > span {
    color: var(--skin-gold);
    font-size: 14px;
    font-weight: 900;
}

.skin-ritual-step h3 {
    margin: 0 0 7px;

    font-size: 18px;
}

.skin-ritual-step p {
    margin: 0;

    color: var(--skin-muted);

    font-size: 12px;
    line-height: 1.6;
}


/* EXPERIENCE */

.skin-experience {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;

    background: var(--skin-dark);
    color: white;
}

.skin-experience-image {
    height: 400px;
}

.skin-experience-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.skin-experience-content {
    padding: 50px 7vw;
}

.skin-experience-content h2 {
    max-width: 550px;

    margin: 10px 0;

    font-size: clamp(2.4rem, 4vw, 4.3rem);
    line-height: 0.95;
    letter-spacing: -0.05em;
}

.skin-experience-content p {
    max-width: 530px;

    color: #c9beb5;

    font-size: 14px;
    line-height: 1.8;
}

.skin-experience-details {
    margin: 27px 0;

    display: flex;
    gap: 30px;
}

.skin-experience-details div {
    padding-right: 28px;

    border-right: 1px solid rgba(255,255,255,0.18);
}

.skin-experience-details div:last-child {
    border: 0;
}

.skin-experience-details strong,
.skin-experience-details span {
    display: block;
}

.skin-experience-details strong {
    font-size: 19px;
    color: #fff;
}

.skin-experience-details span {
    margin-top: 4px;

    color: #a99e95;

    font-size: 10px;
}


/* TESTIMONIALS */

.skin-testimonials {
    padding: 60px 7vw;

    background: #f0e6de;
}

.skin-testimonial-title {
    margin-bottom: 28px;
}

.skin-testimonial-title h2 {
    max-width: 500px;

    margin: 8px 0 0;

    font-size: clamp(2.2rem, 3.5vw, 3.6rem);
    line-height: 0.95;
}

.skin-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
}

.skin-testimonial-card {
    padding: 27px;

    background: #fffaf6;

    border: 1px solid #e1d5cb;

    transition: 0.35s ease;
}

.skin-testimonial-card:hover {
    transform: translateY(-6px);
}

.skin-testimonial-dark {
    background: var(--skin-dark);
    color: white;
}

.skin-stars {
    color: var(--skin-gold);

    letter-spacing: 4px;

    font-size: 12px;
}

.skin-testimonial-card p {
    min-height: 95px;

    margin: 18px 0;

    font-family: Georgia, serif;
    font-size: 16px;
    line-height: 1.65;
}

.skin-testimonial-card strong {
    font-size: 11px;
}


/* CONSULTATION */

.skin-consultation {
    padding: 48px 7vw;

    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: 40px;
    align-items: center;

    background:
        linear-gradient(
            115deg,
            #b89562,
            #8e7048
        );

    color: white;
}

.skin-consultation-content h2 {
    max-width: 700px;

    margin: 9px 0;

    font-size: clamp(2.5rem, 4vw, 4.5rem);
    line-height: 0.95;
    letter-spacing: -0.05em;
}

.skin-consultation-content p {
    max-width: 570px;

    margin-bottom: 23px;

    color: #f3e9de;

    font-size: 14px;
    line-height: 1.7;
}

.skin-consultation-mini {
    padding-left: 30px;

    border-left: 1px solid rgba(255,255,255,0.35);
}

.skin-consultation-mini div {
    padding: 16px 0;

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

.skin-consultation-mini strong,
.skin-consultation-mini span {
    display: block;
}

.skin-consultation-mini strong {
    font-size: 14px;
}

.skin-consultation-mini span {
    margin-top: 4px;

    color: #f1e4d5;

    font-size: 11px;
}


/* ANIMATION */

@keyframes skinFloatIn {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .skin-hero {
        grid-template-columns: 1fr 1fr;
    }

    .skin-treatment-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .skin-concerns,
    .skin-experience {
        grid-template-columns: 1fr 1fr;
    }

    .skin-ritual-track {
        grid-template-columns: repeat(2, 1fr);
    }

    .skin-ritual-step:nth-child(2) {
        border-right: 0;
    }

    .skin-ritual-step:nth-child(1),
    .skin-ritual-step:nth-child(2) {
        border-bottom: 1px solid #ded2c8;
    }

    .skin-testimonial-grid {
        grid-template-columns: 1fr;
    }

    .skin-consultation {
        grid-template-columns: 1fr;
    }

    .skin-consultation-mini {
        padding-left: 0;
        border-left: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}


@media (max-width: 700px) {

    .skin-hero {
        display: flex;
        flex-direction: column;
    }

    .skin-hero-content {
        padding: 55px 22px 35px;
    }

    .skin-hero-image {
        min-height: 330px;
    }

    .skin-hero h1 {
        font-size: 3.1rem;
    }

    .skin-intro {
        grid-template-columns: 45px 1fr;
        gap: 12px;

        padding: 35px 22px;
    }

    .skin-intro > p {
        grid-column: 2;
    }

    .skin-treatments,
    .skin-ritual,
    .skin-testimonials {
        padding: 48px 20px;
    }

    .skin-section-head {
        display: block;
    }

    .skin-section-head > p {
        margin-top: 14px;
    }

    .skin-treatment-grid {
        grid-template-columns: 1fr;
    }

    .skin-treatment-image {
        height: 220px;
    }

    .skin-concerns {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 40px 20px;
    }

    .skin-concern-visual {
        height: 330px;
    }

    .skin-concern-list {
        grid-template-columns: 1fr;
    }

    .skin-ritual-track {
        grid-template-columns: 1fr;
    }

    .skin-ritual-step,
    .skin-ritual-step:nth-child(1),
    .skin-ritual-step:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid #ded2c8;
    }

    .skin-ritual-step:last-child {
        border-bottom: 0;
    }

    .skin-experience {
        grid-template-columns: 1fr;
    }

    .skin-experience-image {
        height: 300px;
    }

    .skin-experience-content {
        padding: 40px 22px;
    }

    .skin-experience-details {
        gap: 15px;
    }

    .skin-experience-details div {
        padding-right: 15px;
    }

    .skin-testimonial-grid {
        grid-template-columns: 1fr;
    }

    .skin-testimonial-card p {
        min-height: auto;
    }

    .skin-consultation {
        padding: 45px 22px;
    }

    .skin-consultation-mini {
        grid-template-columns: 1fr;
    }

    .skin-floating-label {
        right: 12px;
    }
}
/* =========================================================
   SKIN PAGE - EXTRA PREMIUM ANIMATIONS
   Add at the END of style.css
   ========================================================= */

.skin-page {
    overflow-x: hidden;
}

/* ---------- Reveal Animations ---------- */

.skin-page .animate-up {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(.22, 1, .36, 1);
}

.skin-page .animate-up.show {
    opacity: 1;
    transform: translateY(0);
}

.skin-page .animate-left {
    opacity: 0;
    transform: translateX(-50px);
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(.22, 1, .36, 1);
}

.skin-page .animate-left.show {
    opacity: 1;
    transform: translateX(0);
}

.skin-page .animate-right {
    opacity: 0;
    transform: translateX(50px);
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(.22, 1, .36, 1);
}

.skin-page .animate-right.show {
    opacity: 1;
    transform: translateX(0);
}

.skin-page .zoom-reveal {
    opacity: 0;
    transform: scale(.88);
    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(.22, 1, .36, 1);
}

.skin-page .zoom-reveal.show {
    opacity: 1;
    transform: scale(1);
}


/* ---------- Premium Card Hover ---------- */

.skin-page .skin-card,
.skin-page .service-card,
.skin-page .treatment-card,
.skin-page .offer-card {
    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1),
        box-shadow .45s ease;
}

.skin-page .skin-card:hover,
.skin-page .service-card:hover,
.skin-page .treatment-card:hover,
.skin-page .offer-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 22px 45px rgba(0, 0, 0, .14);
}


/* ---------- Image Zoom ---------- */

.skin-page .skin-card img,
.skin-page .service-card img,
.skin-page .treatment-card img,
.skin-page .offer-card img {
    transition:
        transform .8s cubic-bezier(.22, 1, .36, 1),
        filter .5s ease;
}

.skin-page .skin-card:hover img,
.skin-page .service-card:hover img,
.skin-page .treatment-card:hover img,
.skin-page .offer-card:hover img {
    transform: scale(1.08);
}


/* ---------- Floating Image ---------- */

.skin-page .floating-image {
    animation: skinFloat 5s ease-in-out infinite;
}

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

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


/* ---------- Soft Floating Shapes ---------- */

.skin-page .floating-shape {
    animation: floatingShape 6s ease-in-out infinite;
}

.skin-page .floating-shape:nth-child(2) {
    animation-delay: 1s;
}

.skin-page .floating-shape:nth-child(3) {
    animation-delay: 2s;
}

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

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


/* ---------- Shimmer Effect ---------- */

.skin-page .shimmer {
    position: relative;
    overflow: hidden;
}

.skin-page .shimmer::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    transform: skewX(-20deg);
    animation: shimmerMove 4s infinite;
}

@keyframes shimmerMove {
    0% {
        left: -120%;
    }

    45% {
        left: 140%;
    }

    100% {
        left: 140%;
    }
}


/* ---------- Section Heading Animation ---------- */

.skin-page .section-title {
    overflow: hidden;
}

.skin-page .section-title span {
    display: inline-block;
    opacity: 0;
    transform: translateY(25px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22, 1, .36, 1);
}

.skin-page .section-title.show span {
    opacity: 1;
    transform: translateY(0);
}


/* ---------- Button Animation ---------- */

.skin-page .btn,
.skin-page .skin-btn,
.skin-page .book-btn {
    position: relative;
    overflow: hidden;
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.skin-page .btn::before,
.skin-page .skin-btn::before,
.skin-page .book-btn::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition:
        width .6s ease,
        height .6s ease;
}

.skin-page .btn:hover,
.skin-page .skin-btn:hover,
.skin-page .book-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.16);
}

.skin-page .btn:hover::before,
.skin-page .skin-btn:hover::before,
.skin-page .book-btn:hover::before {
    width: 350px;
    height: 350px;
}


/* ---------- Image Border Glow ---------- */

.skin-page .glow-image {
    transition:
        transform .5s ease,
        box-shadow .5s ease;
}

.skin-page .glow-image:hover {
    transform: scale(1.025);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.3),
        0 20px 45px rgba(0,0,0,.16);
}


/* ---------- Stagger Animation ---------- */

.skin-page .stagger-item {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.22, 1, .36, 1);
}

.skin-page .stagger-item.show {
    opacity: 1;
    transform: translateY(0);
}

.skin-page .stagger-item:nth-child(1) {
    transition-delay: .05s;
}

.skin-page .stagger-item:nth-child(2) {
    transition-delay: .12s;
}

.skin-page .stagger-item:nth-child(3) {
    transition-delay: .19s;
}

.skin-page .stagger-item:nth-child(4) {
    transition-delay: .26s;
}

.skin-page .stagger-item:nth-child(5) {
    transition-delay: .33s;
}

.skin-page .stagger-item:nth-child(6) {
    transition-delay: .40s;
}


/* ---------- Cursor Hover ---------- */

.skin-page .cursor-lift {
    transition:
        transform .35s ease,
        letter-spacing .35s ease;
}

.skin-page .cursor-lift:hover {
    transform: translateY(-5px);
    letter-spacing: .4px;
}


/* ---------- Reduce Motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .skin-page *,
    .skin-page *::before,
    .skin-page *::after {
        animation: none !important;
        transition: none !important;
    }
}


/* ---------- Mobile ---------- */

@media (max-width: 768px) {

    .skin-page .animate-left,
    .skin-page .animate-right {
        transform: translateY(30px);
    }

    .skin-page .animate-left.show,
    .skin-page .animate-right.show {
        transform: translateY(0);
    }

    .skin-page .floating-image,
    .skin-page .floating-shape {
        animation-duration: 6s;
    }

    .skin-page .skin-card:hover,
    .skin-page .service-card:hover,
    .skin-page .treatment-card:hover,
    .skin-page .offer-card:hover {
        transform: translateY(-5px);
    }
}
/* =========================================================
   HAIR PAGE
   PREMIUM COMPACT DESIGN + ANIMATIONS
   Add at the END of style.css
   ========================================================= */

.hair-page {
    overflow-x: hidden;
}

/* ---------- HERO ---------- */

.hair-page .hair-hero {
    min-height: 620px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
}

.hair-page .hair-hero-image {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hair-page .hair-hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0,0,0,.72),
        rgba(0,0,0,.32),
        rgba(0,0,0,.08)
    );
}

.hair-page .hair-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: hairHeroZoom 12s ease-in-out infinite alternate;
}

@keyframes hairHeroZoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }
}

.hair-page .hair-hero-content {
    width: min(650px, 90%);
    margin-left: 8%;
    color: #fff;
    z-index: 2;
}

.hair-page .eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
    margin-bottom: 16px;
}

.hair-page .hair-hero-content h1 {
    font-size: clamp(48px, 7vw, 88px);
    line-height: .94;
    margin: 0 0 24px;
    font-weight: 800;
    letter-spacing: -2px;
}

.hair-page .hair-hero-content p {
    max-width: 510px;
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 28px;
}

.hair-page .hair-hero-buttons {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.hair-page .hair-btn,
.hair-page .hair-book-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 25px;
    text-decoration: none;
    font-weight: 700;
    border-radius: 4px;
    transition: .4s ease;
}

.hair-page .hair-btn {
    background: #fff;
    color: #222;
}

.hair-page .hair-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,.25);
}

.hair-page .hair-link {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    position: relative;
}

.hair-page .hair-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 0;
    height: 2px;
    background: #fff;
    transition: .4s ease;
}

.hair-page .hair-link:hover::after {
    width: 100%;
}

.hair-page .hair-floating-note {
    position: absolute;
    right: 8%;
    bottom: 45px;
    display: flex;
    align-items: center;
    gap: 13px;
    color: #fff;
    animation: hairFloat 4s ease-in-out infinite;
}

.hair-page .hair-floating-note strong {
    font-size: 38px;
    font-weight: 800;
}

.hair-page .hair-floating-note span {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 1px;
    text-transform: uppercase;
}

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

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


/* ---------- SECTION COMMON ---------- */

.hair-page .hair-section-heading {
    max-width: 700px;
    margin: 0 auto 40px;
    text-align: center;
}

.hair-page .hair-section-heading > span,
.hair-page .colour-heading > span,
.hair-page .treatment-content > span,
.hair-page .care-content > span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    display: inline-block;
    margin-bottom: 12px;
}

.hair-page .hair-section-heading h2,
.hair-page .colour-heading h2 {
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.05;
    margin: 0 0 14px;
    font-weight: 800;
}

.hair-page .hair-section-heading p,
.hair-page .colour-heading p {
    max-width: 580px;
    margin: auto;
    line-height: 1.7;
}


/* ---------- SERVICES ---------- */

.hair-page .hair-services-section {
    padding: 75px 7%;
}

.hair-page .hair-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.hair-page .hair-service-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    transition: transform .45s ease, box-shadow .45s ease;
}

.hair-page .hair-service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 22px 45px rgba(0,0,0,.14);
}

.hair-page .service-number {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 3;
    background: #fff;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 800;
}

.hair-page .service-image {
    height: 270px;
    overflow: hidden;
}

.hair-page .service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.22,1,.36,1);
}

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

.hair-page .service-content {
    padding: 23px;
}

.hair-page .service-content h3 {
    font-size: 23px;
    margin: 0 0 9px;
    font-weight: 800;
}

.hair-page .service-content p {
    line-height: 1.65;
    margin: 0 0 15px;
}

.hair-page .service-content span {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
}


/* ---------- TREATMENT ---------- */

.hair-page .hair-treatment-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 540px;
    overflow: hidden;
}

.hair-page .treatment-image {
    overflow: hidden;
}

.hair-page .treatment-image img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    object-fit: cover;
    transition: transform 1s ease;
}

.hair-page .treatment-image:hover img {
    transform: scale(1.06);
}

.hair-page .treatment-content {
    padding: 65px 9%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hair-page .treatment-content h2 {
    font-size: clamp(34px, 4vw, 55px);
    line-height: 1.04;
    margin: 0 0 20px;
    font-weight: 800;
}

.hair-page .treatment-content > p {
    line-height: 1.75;
    margin-bottom: 25px;
}

.hair-page .treatment-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 28px;
}

.hair-page .treatment-list div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border-bottom: 1px solid rgba(0,0,0,.15);
    transition: .35s ease;
}

.hair-page .treatment-list div:hover {
    padding-left: 20px;
}

.hair-page .treatment-list b {
    font-size: 12px;
}

.hair-page .treatment-list span {
    font-weight: 700;
}

.hair-page .hair-outline-btn {
    width: fit-content;
    border: 1px solid currentColor;
    padding: 13px 22px;
    text-decoration: none;
    font-weight: 700;
    transition: .35s ease;
}

.hair-page .hair-outline-btn:hover {
    transform: translateX(7px);
}


/* ---------- TRANSFORMATION ---------- */

.hair-page .hair-transformation {
    padding: 75px 7%;
}

.hair-page .transformation-grid {
    display: grid;
    grid-template-columns: 1.3fr .85fr .85fr;
    gap: 18px;
}

.hair-page .transformation-card {
    position: relative;
    height: 390px;
    overflow: hidden;
}

.hair-page .transformation-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease;
}

.hair-page .transformation-card:hover img {
    transform: scale(1.08);
}

.hair-page .transformation-label {
    position: absolute;
    left: 20px;
    bottom: 18px;
    right: 20px;
    color: #fff;
    z-index: 2;
}

.hair-page .transformation-card::after {
    content: "";
    position: absolute;
    inset: 35% 0 0;
    background: linear-gradient(transparent, rgba(0,0,0,.72));
}

.hair-page .transformation-label span {
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 800;
}

.hair-page .transformation-label h3 {
    margin: 5px 0 0;
    font-size: 25px;
}


/* ---------- COLOUR ---------- */

.hair-page .hair-colour-section {
    padding: 75px 0;
    overflow: hidden;
}

.hair-page .colour-heading {
    text-align: center;
    padding: 0 7%;
    margin-bottom: 38px;
}

.hair-page .colour-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 0 5%;
}

.hair-page .colour-card {
    position: relative;
    height: 360px;
    overflow: hidden;
}

.hair-page .colour-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease;
}

.hair-page .colour-card:hover img {
    transform: scale(1.1);
}

.hair-page .colour-card::after {
    content: "";
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(transparent, rgba(0,0,0,.75));
}

.hair-page .colour-card div {
    position: absolute;
    left: 20px;
    bottom: 18px;
    color: #fff;
    z-index: 2;
}

.hair-page .colour-card span {
    font-size: 11px;
    font-weight: 800;
}

.hair-page .colour-card h3 {
    margin: 5px 0 0;
    font-size: 23px;
}


/* ---------- STYLIST PICKS ---------- */

.hair-page .hair-picks-section {
    padding: 75px 7%;
}

.hair-page .hair-picks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.hair-page .pick-card {
    overflow: hidden;
    border-bottom: 1px solid rgba(0,0,0,.18);
}

.hair-page .pick-image {
    height: 370px;
    overflow: hidden;
}

.hair-page .pick-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s ease;
}

.hair-page .pick-card:hover .pick-image img {
    transform: scale(1.07);
}

.hair-page .pick-info {
    padding: 18px 4px 22px;
}

.hair-page .pick-info span {
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 800;
}

.hair-page .pick-info h3 {
    font-size: 25px;
    margin: 8px 0;
}

.hair-page .pick-info p {
    margin: 0;
    line-height: 1.6;
}


/* ---------- CARE ---------- */

.hair-page .hair-care-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    margin: 35px 7% 75px;
    overflow: hidden;
}

.hair-page .care-content {
    padding: 55px 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hair-page .care-content h2 {
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.05;
    margin: 0 0 18px;
}

.hair-page .care-content > p {
    line-height: 1.7;
    margin-bottom: 25px;
}

.hair-page .care-points {
    display: grid;
    gap: 10px;
}

.hair-page .care-points div {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(0,0,0,.14);
}

.hair-page .care-points strong {
    font-size: 12px;
}

.hair-page .care-points span {
    font-weight: 700;
}

.hair-page .care-image {
    min-height: 470px;
    overflow: hidden;
}

.hair-page .care-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}

.hair-page .care-image:hover img {
    transform: scale(1.06);
}


/* ---------- BOOKING ---------- */

.hair-page .hair-booking {
    position: relative;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background:
        linear-gradient(
            120deg,
            rgba(0,0,0,.94),
            rgba(45,45,45,.88)
        );
    color: #fff;
}

.hair-page .booking-content {
    width: min(700px, 90%);
    position: relative;
    z-index: 2;
}

.hair-page .booking-content > span {
    font-size: 12px;
    letter-spacing: 3px;
    font-weight: 800;
}

.hair-page .booking-content h2 {
    font-size: clamp(38px, 5vw, 65px);
    line-height: 1;
    margin: 15px 0;
}

.hair-page .booking-content p {
    max-width: 560px;
    margin: 0 auto 25px;
    line-height: 1.7;
}

.hair-page .hair-book-btn {
    background: #fff;
    color: #222;
}

.hair-page .hair-book-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,.35);
}

.hair-page .booking-glow {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
    animation: bookingPulse 4s ease-in-out infinite;
}

@keyframes bookingPulse {
    0%, 100% {
        transform: scale(.8);
        opacity: .4;
    }

    50% {
        transform: scale(1.25);
        opacity: 1;
    }
}


/* =========================================================
   EXTRA SCROLL ANIMATION
   ========================================================= */

.hair-page .animate-up,
.hair-page .reveal-up {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity .85s ease,
        transform .85s cubic-bezier(.22,1,.36,1);
}

.hair-page .reveal-left {
    opacity: 0;
    transform: translateX(-55px);
    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.22,1,.36,1);
}

.hair-page .reveal-right {
    opacity: 0;
    transform: translateX(55px);
    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.22,1,.36,1);
}

.hair-page .animate-up.show,
.hair-page .reveal-up.show,
.hair-page .reveal-left.show,
.hair-page .reveal-right.show {
    opacity: 1;
    transform: translate(0);
}


/* ---------- Stagger ---------- */

.hair-page .hair-service-card:nth-child(2),
.hair-page .pick-card:nth-child(2),
.hair-page .colour-card:nth-child(2) {
    transition-delay: .12s;
}

.hair-page .hair-service-card:nth-child(3),
.hair-page .pick-card:nth-child(3),
.hair-page .colour-card:nth-child(3) {
    transition-delay: .24s;
}

.hair-page .colour-card:nth-child(4) {
    transition-delay: .36s;
}


/* ---------- Shimmer ---------- */

.hair-page .shimmer::before {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 65%;
    height: 100%;
    z-index: 4;
    background: linear-gradient(
        100deg,
        transparent,
        rgba(255,255,255,.28),
        transparent
    );
    transform: skewX(-20deg);
    animation: hairShimmer 4.5s infinite;
}

@keyframes hairShimmer {
    0% {
        left: -130%;
    }

    45% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .hair-page .hair-service-grid,
    .hair-page .hair-picks-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hair-page .colour-strip {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .hair-page .transformation-card.large {
        grid-column: span 2;
    }
}


@media (max-width: 768px) {

    .hair-page .hair-hero {
        min-height: 600px;
    }

    .hair-page .hair-hero-content {
        margin-left: 6%;
    }

    .hair-page .hair-hero-content h1 {
        font-size: 50px;
    }

    .hair-page .hair-floating-note {
        right: 6%;
        bottom: 25px;
    }

    .hair-page .hair-services-section,
    .hair-page .hair-transformation,
    .hair-page .hair-picks-section {
        padding: 55px 5%;
    }

    .hair-page .hair-service-grid,
    .hair-page .hair-picks-grid,
    .hair-page .colour-strip,
    .hair-page .transformation-grid {
        grid-template-columns: 1fr;
    }

    .hair-page .transformation-card.large {
        grid-column: auto;
    }

    .hair-page .hair-treatment-section,
    .hair-page .hair-care-section {
        grid-template-columns: 1fr;
    }

    .hair-page .treatment-content,
    .hair-page .care-content {
        padding: 45px 7%;
    }

    .hair-page .treatment-image img,
    .hair-page .care-image {
        min-height: 380px;
    }

    .hair-page .colour-card {
        height: 330px;
    }

    .hair-page .pick-image {
        height: 330px;
    }

    .hair-page .hair-hero-buttons {
        gap: 16px;
    }
}


@media (max-width: 480px) {

    .hair-page .hair-hero-content h1 {
        font-size: 42px;
    }

    .hair-page .hair-hero-content p {
        font-size: 15px;
    }

    .hair-page .hair-floating-note {
        display: none;
    }

    .hair-page .treatment-list {
        grid-template-columns: 1fr;
    }

    .hair-page .service-image {
        height: 240px;
    }

    .hair-page .hair-booking {
        min-height: 320px;
    }
}
/* =========================================================
   NAILS PAGE
   PREMIUM DESIGN
   ========================================================= */

.nails-page {
    overflow-x: hidden;
}


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

.nails-page .nails-hero {
    min-height: 620px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
}

.nails-page .nails-hero-image {
    position: absolute;
    inset: 0;
    z-index: -3;
}

.nails-page .nails-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: nailsHeroZoom 12s ease-in-out infinite alternate;
}

@keyframes nailsHeroZoom {

    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }

}

.nails-page .nails-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.72),
            rgba(0,0,0,.36),
            rgba(0,0,0,.10)
        );
}

.nails-page .nails-hero-content {
    width: min(650px, 90%);
    margin-left: 8%;
    color: #fff;
    position: relative;
    z-index: 2;
}

.nails-page .nails-kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 4px;
    margin-bottom: 18px;
}

.nails-page .nails-hero-content h1 {
    font-size: clamp(48px, 7vw, 86px);
    line-height: .96;
    margin: 0 0 24px;
    font-weight: 800;
    letter-spacing: -2px;
}

.nails-page .nails-hero-content p {
    max-width: 520px;
    line-height: 1.7;
    font-size: 17px;
    margin-bottom: 28px;
}

.nails-page .nails-hero-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.nails-page .nails-primary-btn {
    padding: 14px 25px;
    background: #fff;
    color: #222;
    text-decoration: none;
    font-weight: 800;
    transition: .4s ease;
}

.nails-page .nails-primary-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,.3);
}

.nails-page .nails-text-btn {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    position: relative;
}

.nails-page .nails-text-btn::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 0;
    height: 2px;
    background: #fff;
    transition: .4s ease;
}

.nails-page .nails-text-btn:hover::after {
    width: 100%;
}

.nails-page .nails-hero-badge {
    position: absolute;
    right: 8%;
    bottom: 45px;
    color: #fff;
    display: grid;
    grid-template-columns: auto auto;
    gap: 4px 12px;
    align-items: center;
    animation: nailBadgeFloat 4s ease-in-out infinite;
}

.nails-page .nails-hero-badge span {
    grid-column: span 2;
    font-size: 10px;
    letter-spacing: 3px;
}

.nails-page .nails-hero-badge strong {
    font-size: 42px;
}

.nails-page .nails-hero-badge small {
    font-size: 11px;
    line-height: 1.4;
}

@keyframes nailBadgeFloat {

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

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

}


/* ================= COMMON HEADING ================= */

.nails-page .nail-heading {
    max-width: 700px;
    margin: 0 auto 42px;
    text-align: center;
}

.nails-page .nail-heading span,
.nails-page .nail-art-intro span,
.nails-page .nail-care-content > span,
.nails-page .nail-style-title span,
.nails-page .experience-content > span,
.nails-page .nail-booking-content > span {
    font-size: 11px;
    letter-spacing: 3px;
    font-weight: 800;
    display: inline-block;
    margin-bottom: 12px;
}

.nails-page .nail-heading h2,
.nails-page .nail-art-intro h2,
.nails-page .nail-style-title h2 {
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.05;
    margin: 0 0 14px;
    font-weight: 800;
}

.nails-page .nail-heading p {
    line-height: 1.7;
}


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

.nails-page .nail-services {
    padding: 75px 7%;
}

.nails-page .nail-service-layout {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 24px;
}

.nails-page .nail-service-feature {
    overflow: hidden;
    background: #f4f1ef;
}

.nails-page .nail-service-image {
    height: 390px;
    overflow: hidden;
}

.nails-page .nail-service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s ease;
}

.nails-page .nail-service-feature:hover img {
    transform: scale(1.07);
}

.nails-page .nail-feature-content {
    padding: 25px;
}

.nails-page .nail-feature-content span {
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 800;
}

.nails-page .nail-feature-content h3 {
    font-size: 30px;
    margin: 9px 0;
}

.nails-page .nail-feature-content p {
    line-height: 1.65;
    max-width: 560px;
}

.nails-page .nail-feature-content strong {
    display: inline-block;
    margin-top: 7px;
}

.nails-page .nail-mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.nails-page .nail-mini-card {
    position: relative;
    padding: 26px;
    min-height: 190px;
    border: 1px solid rgba(0,0,0,.1);
    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.nails-page .nail-mini-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 35px rgba(0,0,0,.1);
}

.nails-page .nail-mini-card > span {
    font-size: 11px;
    font-weight: 800;
}

.nails-page .nail-mini-card h3 {
    margin: 17px 0 9px;
    font-size: 23px;
}

.nails-page .nail-mini-card p {
    font-size: 14px;
    line-height: 1.55;
}

.nails-page .nail-mini-card b {
    font-size: 12px;
}


/* ================= ART ================= */

.nails-page .nail-art-section {
    padding: 75px 7%;
}

.nails-page .nail-art-intro {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 38px;
}

.nails-page .nail-art-intro h2 {
    margin-bottom: 0;
}

.nails-page .nail-art-intro p {
    max-width: 390px;
    line-height: 1.7;
}

.nails-page .nail-art-grid {
    display: grid;
    grid-template-columns: 1.35fr .8fr .8fr;
    gap: 16px;
}

.nails-page .nail-art-item {
    height: 400px;
    position: relative;
    overflow: hidden;
}

.nails-page .nail-art-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s ease;
}

.nails-page .nail-art-item:hover img {
    transform: scale(1.08);
}

.nails-page .nail-art-item::after {
    content: "";
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(
        transparent,
        rgba(0,0,0,.75)
    );
}

.nails-page .nail-art-caption {
    position: absolute;
    z-index: 2;
    bottom: 18px;
    left: 20px;
    color: #fff;
}

.nails-page .nail-art-caption span {
    font-size: 11px;
    font-weight: 800;
}

.nails-page .nail-art-caption h3 {
    margin: 5px 0;
    font-size: 23px;
}


/* ================= COLOUR ================= */

.nails-page .nail-colour-section {
    padding: 75px 0;
    overflow: hidden;
}

.nails-page .nail-colour-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    padding: 0 6%;
}

.nails-page .nail-colour-card {
    padding: 25px 20px;
    border: 1px solid rgba(0,0,0,.1);
    min-height: 250px;
    transition:
        transform .45s ease,
        box-shadow .45s ease;
}

.nails-page .nail-colour-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,.1);
}

.nails-page .shade-circle {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    margin-bottom: 22px;
    box-shadow:
        0 0 0 8px rgba(0,0,0,.03),
        0 10px 25px rgba(0,0,0,.12);
    animation: shadePulse 4s ease-in-out infinite;
}

@keyframes shadePulse {

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

    50% {
        transform: scale(1.08);
    }

}

.nails-page .shade-one {
    background: #d8c4ba;
}

.nails-page .shade-two {
    background: #c88791;
}

.nails-page .shade-three {
    background: #9c2638;
}

.nails-page .shade-four {
    background: #302c35;
}

.nails-page .shade-five {
    background: #eee7df;
}

.nails-page .nail-colour-card > span {
    font-size: 10px;
    font-weight: 800;
}

.nails-page .nail-colour-card h3 {
    margin: 8px 0 4px;
    font-size: 20px;
}

.nails-page .nail-colour-card p {
    margin: 0;
    font-size: 13px;
}


/* ================= CARE ================= */

.nails-page .nail-care-section {
    margin: 20px 7% 75px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}

.nails-page .nail-care-image {
    position: relative;
    min-height: 500px;
    overflow: hidden;
}

.nails-page .nail-care-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}

.nails-page .nail-care-image:hover img {
    transform: scale(1.06);
}

.nails-page .care-floating-number {
    position: absolute;
    right: 25px;
    top: 25px;
    font-size: 42px;
    color: #fff;
    font-weight: 800;
}

.nails-page .nail-care-content {
    padding: 55px 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.nails-page .nail-care-content h2 {
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.05;
    margin: 0 0 18px;
}

.nails-page .nail-care-content > p {
    line-height: 1.7;
    margin-bottom: 24px;
}

.nails-page .nail-care-list {
    display: grid;
    gap: 5px;
}

.nails-page .nail-care-list div {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0,0,0,.14);
}

.nails-page .nail-care-list strong {
    font-size: 11px;
}

.nails-page .nail-care-list span {
    font-weight: 700;
}


/* ================= STYLE ================= */

.nails-page .nail-style-section {
    padding: 75px 7%;
}

.nails-page .nail-style-title {
    text-align: center;
    margin-bottom: 38px;
}

.nails-page .nail-style-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.nails-page .nail-style-card {
    padding: 34px;
    min-height: 280px;
    border: 1px solid rgba(0,0,0,.1);
    transition:
        transform .45s ease,
        box-shadow .45s ease;
}

.nails-page .nail-style-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 22px 40px rgba(0,0,0,.12);
}

.nails-page .nail-style-card.featured {
    transform: translateY(-18px);
}

.nails-page .nail-style-card.featured:hover {
    transform: translateY(-28px);
}

.nails-page .style-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nails-page .style-card-top span {
    font-size: 11px;
    font-weight: 800;
}

.nails-page .style-card-top i {
    font-style: normal;
    font-size: 24px;
    animation: sparkleRotate 3s linear infinite;
}

@keyframes sparkleRotate {

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

    50% {
        transform: rotate(180deg) scale(1.2);
    }

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

}

.nails-page .nail-style-card h3 {
    font-size: 32px;
    margin: 35px 0 12px;
}

.nails-page .nail-style-card p {
    line-height: 1.65;
}

.nails-page .nail-style-card a {
    display: inline-block;
    margin-top: 18px;
    text-decoration: none;
    font-weight: 800;
}


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

.nails-page .nail-experience-section {
    margin: 20px 7% 75px;
    padding: 55px 6%;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 50px;
    align-items: center;
    border: 1px solid rgba(0,0,0,.1);
}

.nails-page .experience-content h2 {
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.05;
    margin: 0 0 18px;
}

.nails-page .experience-content p {
    max-width: 580px;
    line-height: 1.7;
}

.nails-page .experience-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.nails-page .experience-stat {
    text-align: center;
    padding: 20px 8px;
}

.nails-page .experience-stat strong {
    display: block;
    font-size: 42px;
    font-weight: 800;
}

.nails-page .experience-stat span {
    font-size: 11px;
    font-weight: 700;
}


/* ================= BOOKING ================= */

.nails-page .nail-booking {
    min-height: 370px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background:
        linear-gradient(
            135deg,
            #222,
            #111
        );
    color: #fff;
}

.nails-page .nail-booking-content {
    width: min(700px, 90%);
    position: relative;
    z-index: 3;
}

.nails-page .nail-booking-content h2 {
    font-size: clamp(40px, 5vw, 65px);
    line-height: 1;
    margin: 12px 0 18px;
}

.nails-page .nail-booking-content p {
    max-width: 550px;
    margin: 0 auto 25px;
    line-height: 1.7;
}

.nails-page .nail-book-btn {
    display: inline-flex;
    padding: 14px 25px;
    background: #fff;
    color: #111;
    text-decoration: none;
    font-weight: 800;
    transition: .4s ease;
}

.nails-page .nail-book-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,.4);
}

.nails-page .nail-booking-ring {
    position: absolute;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    animation: bookingRing 6s ease-in-out infinite;
}

.nails-page .ring-one {
    width: 360px;
    height: 360px;
}

.nails-page .ring-two {
    width: 550px;
    height: 550px;
    animation-delay: 1s;
}

@keyframes bookingRing {

    0%, 100% {
        transform: scale(.8);
        opacity: .25;
    }

    50% {
        transform: scale(1.05);
        opacity: .8;
    }

}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.nails-page .nails-reveal,
.nails-page .nails-reveal-left,
.nails-page .nails-reveal-right {
    opacity: 0;
    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.22,1,.36,1);
}

.nails-page .nails-reveal {
    transform: translateY(45px);
}

.nails-page .nails-reveal-left {
    transform: translateX(-55px);
}

.nails-page .nails-reveal-right {
    transform: translateX(55px);
}

.nails-page .nails-reveal.show,
.nails-page .nails-reveal-left.show,
.nails-page .nails-reveal-right.show {
    opacity: 1;
    transform: translate(0);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .nails-page .nail-colour-track {
        grid-template-columns: repeat(3, 1fr);
    }

    .nails-page .nail-art-grid {
        grid-template-columns: 1fr 1fr;
    }

    .nails-page .nail-art-item.art-large {
        grid-column: span 2;
    }

}


@media (max-width: 850px) {

    .nails-page .nail-service-layout,
    .nails-page .nail-care-section,
    .nails-page .nail-experience-section {
        grid-template-columns: 1fr;
    }

    .nails-page .nail-style-grid {
        grid-template-columns: 1fr 1fr;
    }

    .nails-page .nail-style-card.featured {
        transform: none;
    }

    .nails-page .nail-style-card.featured:hover {
        transform: translateY(-10px);
    }

}


@media (max-width: 650px) {

    .nails-page .nails-hero {
        min-height: 590px;
    }

    .nails-page .nails-hero-content {
        margin-left: 6%;
    }

    .nails-page .nails-hero-content h1 {
        font-size: 46px;
    }

    .nails-page .nails-hero-badge {
        display: none;
    }

    .nails-page .nail-services,
    .nails-page .nail-art-section,
    .nails-page .nail-style-section {
        padding: 55px 5%;
    }

    .nails-page .nail-mini-grid,
    .nails-page .nail-style-grid,
    .nails-page .experience-stats {
        grid-template-columns: 1fr;
    }

    .nails-page .nail-art-grid,
    .nails-page .nail-colour-track {
        grid-template-columns: 1fr 1fr;
    }

    .nails-page .nail-art-item.art-large {
        grid-column: span 2;
    }

    .nails-page .nail-colour-track {
        padding: 0 5%;
    }

    .nails-page .nail-care-section,
    .nails-page .nail-experience-section {
        margin-left: 5%;
        margin-right: 5%;
    }

}


@media (max-width: 480px) {

    .nails-page .nail-art-grid,
    .nails-page .nail-colour-track {
        grid-template-columns: 1fr;
    }

    .nails-page .nail-art-item.art-large {
        grid-column: auto;
    }

    .nails-page .nail-service-image {
        height: 300px;
    }

    .nails-page .nail-care-image {
        min-height: 360px;
    }

    .nails-page .nail-experience-section {
        padding: 40px 25px;
    }

}
/* =========================================================
   COMING SOON PAGE
   ========================================================= */

.coming-page {
    overflow-x: hidden;
}

.coming-page .cs-hero {
    min-height: 620px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
}

.coming-page .cs-hero-bg,
.coming-page .cs-overlay {
    position: absolute;
    inset: 0;
}

.coming-page .cs-hero-bg {
    z-index: -2;
}

.coming-page .cs-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: csZoom 10s ease-in-out infinite alternate;
}

@keyframes csZoom {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

.coming-page .cs-overlay {
    z-index: -1;
    background: linear-gradient(
        90deg,
        rgba(0,0,0,.75),
        rgba(0,0,0,.35),
        rgba(0,0,0,.1)
    );
}

.coming-page .cs-hero-content {
    width: min(680px, 88%);
    margin-left: 8%;
}

.coming-page .cs-hero-content > span,
.coming-page .cs-intro-content > span,
.coming-page .cs-preview-text > span,
.coming-page .cs-studio-content > span,
.coming-page .cs-notify-content > span {
    font-size: 11px;
    letter-spacing: 4px;
    font-weight: 800;
}

.coming-page .cs-hero h1 {
    font-size: clamp(48px, 7vw, 88px);
    line-height: .95;
    margin: 20px 0;
    letter-spacing: -3px;
}

.coming-page .cs-hero h1 em,
.coming-page .cs-final h2 em {
    font-style: normal;
}

.coming-page .cs-hero p {
    max-width: 520px;
    line-height: 1.7;
    margin-bottom: 28px;
}

.coming-page .cs-button {
    display: inline-block;
    padding: 14px 26px;
    background: #fff;
    color: #111;
    text-decoration: none;
    font-weight: 800;
    transition: .4s;
}

.coming-page .cs-button:hover {
    transform: translateY(-6px);
}

.coming-page .cs-side-number {
    position: absolute;
    right: 7%;
    bottom: 35px;
    font-size: 12px;
    letter-spacing: 2px;
}


/* INTRO */

.coming-page .cs-intro {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 35px;
    padding: 75px 10%;
    align-items: start;
}

.coming-page .cs-intro-number {
    font-size: 80px;
    font-weight: 800;
    line-height: 1;
    opacity: .18;
}

.coming-page .cs-intro-content {
    max-width: 720px;
}

.coming-page .cs-intro h2,
.coming-page .cs-preview-text h2,
.coming-page .cs-studio-content h2,
.coming-page .cs-notify h2 {
    font-size: clamp(34px, 4.5vw, 58px);
    line-height: 1;
    margin: 15px 0 18px;
}

.coming-page .cs-intro p,
.coming-page .cs-preview-text p,
.coming-page .cs-studio-content p,
.coming-page .cs-notify p {
    line-height: 1.7;
    max-width: 600px;
}

.coming-page .cs-line {
    width: 90px;
    height: 2px;
    margin: 24px 0;
    background: currentColor;
}

.coming-page .cs-intro strong {
    font-size: 11px;
    letter-spacing: 2px;
}


/* COUNTDOWN */

.coming-page .cs-countdown-section {
    padding: 65px 7%;
    text-align: center;
    border-top: 1px solid rgba(0,0,0,.1);
    border-bottom: 1px solid rgba(0,0,0,.1);
}

.coming-page .cs-heading span {
    font-size: 11px;
    letter-spacing: 3px;
    font-weight: 800;
}

.coming-page .cs-heading h2 {
    font-size: clamp(32px, 4vw, 50px);
    margin: 12px 0 35px;
}

.coming-page .cs-countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 850px;
    margin: auto;
}

.coming-page .cs-time {
    padding: 20px;
    border-right: 1px solid rgba(0,0,0,.12);
}

.coming-page .cs-time:last-child {
    border-right: 0;
}

.coming-page .cs-time strong {
    display: block;
    font-size: clamp(38px, 5vw, 65px);
}

.coming-page .cs-time span {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* PREVIEW */

.coming-page .cs-preview {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 45px;
    padding: 75px 7%;
    align-items: center;
}

.coming-page .cs-preview-text a,
.coming-page .cs-final a {
    display: inline-block;
    margin-top: 20px;
    color: inherit;
    text-decoration: none;
    font-weight: 800;
}

.coming-page .cs-preview-images {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 15px;
    align-items: end;
}

.coming-page .cs-preview-img {
    overflow: hidden;
}

.coming-page .cs-preview-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s;
}

.coming-page .cs-preview-img:hover img {
    transform: scale(1.07);
}

.coming-page .img-one {
    height: 390px;
}

.coming-page .img-two {
    height: 280px;
}


/* SERVICES */

.coming-page .cs-services {
    padding: 70px 7%;
}

.coming-page .cs-heading {
    text-align: center;
}

.coming-page .cs-service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.coming-page .cs-service {
    padding: 30px 25px;
    min-height: 210px;
    border: 1px solid rgba(0,0,0,.12);
    transition: .4s;
}

.coming-page .cs-service:hover {
    transform: translateY(-9px);
    box-shadow: 0 20px 35px rgba(0,0,0,.1);
}

.coming-page .cs-service > span {
    font-size: 11px;
    font-weight: 800;
}

.coming-page .cs-service h3 {
    font-size: 28px;
    margin: 30px 0 10px;
}

.coming-page .cs-service p {
    font-size: 14px;
    line-height: 1.6;
}


/* STUDIO */

.coming-page .cs-studio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 20px 7% 70px;
    overflow: hidden;
}

.coming-page .cs-studio-image {
    height: 470px;
    position: relative;
    overflow: hidden;
}

.coming-page .cs-studio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s;
}

.coming-page .cs-studio-image:hover img {
    transform: scale(1.06);
}

.coming-page .cs-image-label {
    position: absolute;
    top: 20px;
    left: 20px;
    color: #fff;
    font-size: 35px;
    font-weight: 800;
}

.coming-page .cs-studio-content {
    padding: 55px 9%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.coming-page .cs-feature-list {
    margin-top: 20px;
}

.coming-page .cs-feature-list div {
    display: flex;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0,0,0,.12);
}

.coming-page .cs-feature-list b {
    font-size: 11px;
}


/* NOTIFY */

.coming-page .cs-notify {
    padding: 75px 7%;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.coming-page .cs-notify-content {
    max-width: 750px;
    margin: auto;
}

.coming-page .cs-notify p {
    margin: auto;
}

.coming-page .cs-form {
    display: flex;
    max-width: 600px;
    margin: 30px auto 0;
}

.coming-page .cs-form input {
    flex: 1;
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid rgba(0,0,0,.2);
    background: transparent;
    color: inherit;
    outline: none;
}

.coming-page .cs-form button {
    border: 0;
    padding: 0 25px;
    background: #111;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.coming-page #cs-message {
    display: block;
    margin-top: 14px;
}


/* FINAL */

.coming-page .cs-final {
    min-height: 390px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background: #151515;
    color: #fff;
}

.coming-page .cs-final-content {
    position: relative;
    z-index: 2;
}

.coming-page .cs-final-content > span {
    font-size: 11px;
    letter-spacing: 3px;
}

.coming-page .cs-final h2 {
    font-size: clamp(50px, 7vw, 85px);
    line-height: .9;
    margin: 20px 0;
}

.coming-page .cs-orbit {
    position: absolute;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
    animation: csOrbit 7s ease-in-out infinite;
}

.coming-page .orbit-one {
    width: 320px;
    height: 320px;
}

.coming-page .orbit-two {
    width: 550px;
    height: 550px;
    animation-delay: 1.5s;
}

@keyframes csOrbit {
    0%,100% {
        transform: scale(.85) rotate(0deg);
    }
    50% {
        transform: scale(1.08) rotate(180deg);
    }
}


/* REVEAL */

.coming-page .cs-reveal,
.coming-page .cs-reveal-left,
.coming-page .cs-reveal-right {
    opacity: 0;
    transition: opacity .9s ease, transform .9s ease;
}

.coming-page .cs-reveal {
    transform: translateY(35px);
}

.coming-page .cs-reveal-left {
    transform: translateX(-45px);
}

.coming-page .cs-reveal-right {
    transform: translateX(45px);
}

.coming-page .cs-reveal.show,
.coming-page .cs-reveal-left.show,
.coming-page .cs-reveal-right.show {
    opacity: 1;
    transform: translate(0);
}


/* MOBILE */

@media(max-width:800px) {

    .coming-page .cs-hero {
        min-height: 560px;
    }

    .coming-page .cs-hero-content {
        margin-left: 6%;
    }

    .coming-page .cs-intro,
    .coming-page .cs-preview,
    .coming-page .cs-studio {
        grid-template-columns: 1fr;
    }

    .coming-page .cs-countdown {
        grid-template-columns: repeat(2, 1fr);
    }

    .coming-page .cs-time {
        border-bottom: 1px solid rgba(0,0,0,.12);
    }

    .coming-page .cs-service-grid {
        grid-template-columns: 1fr 1fr;
    }

    .coming-page .cs-studio-image {
        height: 350px;
    }

}

@media(max-width:520px) {

    .coming-page .cs-hero h1 {
        font-size: 46px;
    }

    .coming-page .cs-intro,
    .coming-page .cs-preview,
    .coming-page .cs-services {
        padding: 55px 5%;
    }

    .coming-page .cs-preview-images {
        grid-template-columns: 1fr;
    }

    .coming-page .img-one,
    .coming-page .img-two {
        height: 280px;
    }

    .coming-page .cs-service-grid {
        grid-template-columns: 1fr;
    }

    .coming-page .cs-form {
        flex-direction: column;
        gap: 10px;
    }

    .coming-page .cs-form button {
        padding: 15px;
    }

}
/* =========================================================
   404 ERROR PAGE
   ========================================================= */

.error-page {
    min-height: 100vh;
    overflow: hidden;
}

.error-main {
    min-height: 100vh;
}

.error-section {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 50px 6%;
}

.error-content {
    width: min(900px, 100%);
    text-align: center;
    position: relative;
    z-index: 5;
}

.error-number {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 18px;
}

.error-number > span {
    font-size: clamp(100px, 17vw, 220px);
    line-height: .7;
    font-weight: 900;
    letter-spacing: -12px;
}

.error-image {
    width: clamp(100px, 13vw, 175px);
    height: clamp(125px, 17vw, 220px);
    overflow: hidden;
    transform: rotate(-7deg);
    border-radius: 100px 100px 15px 15px;
    box-shadow: 0 25px 60px rgba(0,0,0,.16);
    animation: errorFloat 4s ease-in-out infinite;
}

.error-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes errorFloat {

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

    50% {
        transform: rotate(-3deg) translateY(-14px);
    }
}

.error-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 4px;
    margin-top: 15px;
}

.error-content h1 {
    font-size: clamp(38px, 5vw, 68px);
    line-height: .98;
    margin: 15px auto;
    max-width: 720px;
}

.error-content h1 em {
    font-style: normal;
}

.error-content p {
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.7;
    font-size: 15px;
}

.error-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.error-buttons a {
    text-decoration: none;
    padding: 14px 25px;
    font-size: 13px;
    font-weight: 800;
    transition: .35s ease;
}

.error-primary {
    background: #111;
    color: #fff;
}

.error-secondary {
    border: 1px solid currentColor;
    color: inherit;
}

.error-buttons a:hover {
    transform: translateY(-6px);
}

.error-side-text {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: rotate(90deg) translateX(50%);
    transform-origin: right center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
    opacity: .45;
}

.error-decoration {
    position: absolute;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: .12;
    pointer-events: none;
}

.error-circle-one {
    width: 400px;
    height: 400px;
    left: -170px;
    top: -100px;
    animation: errorRotate 15s linear infinite;
}

.error-circle-two {
    width: 600px;
    height: 600px;
    right: -300px;
    bottom: -250px;
    animation: errorRotate 20s linear infinite reverse;
}

@keyframes errorRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


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

@media (max-width: 600px) {

    .error-section {
        padding: 35px 5%;
    }

    .error-number {
        gap: 8px;
    }

    .error-number > span {
        font-size: 105px;
        letter-spacing: -7px;
    }

    .error-image {
        width: 82px;
        height: 115px;
    }

    .error-content h1 {
        font-size: 39px;
    }

    .error-content p {
        font-size: 14px;
    }

    .error-buttons {
        flex-direction: column;
    }

    .error-buttons a {
        width: 210px;
        text-align: center;
    }

    .error-side-text {
        display: none;
    }

    .error-circle-one {
        width: 250px;
        height: 250px;
    }

    .error-circle-two {
        width: 350px;
        height: 350px;
    }
}

@media (max-width: 768px) {

    header,
    .site-header,
    .main-header {
        position: relative;
        width: 100%;
        z-index: 9999;
    }

    .header-inner,
    .header-container,
    .nav-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 68px;
        padding: 10px 14px !important;
        gap: 8px;
    }

    /* Logo */
    .logo,
    .brand {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        flex-shrink: 0;
    }

    /* Header action area */
    .header-actions,
    .nav-actions,
    .header-buttons {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 7px !important;
        margin-left: auto !important;
    }

    /* RTL + Dark mode */
    .rtl-toggle,
    .dark-toggle,
    .theme-toggle,
    #rtlToggle,
    #darkToggle {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        flex-shrink: 0;
    }

    /* Hamburger */
    .hamburger,
    .menu-toggle,
    #menuToggle {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        flex-shrink: 0;
    }

    /* Keep hamburger small */
    .hamburger span,
    .menu-toggle span,
    #menuToggle span {
        width: 20px !important;
        height: 2px !important;
        margin: 3px 0 !important;
    }

    /* Login */
    .login-btn {
        height: 38px !important;
        padding: 0 14px !important;
        font-size: 12px !important;
        margin: 0 !important;
    }

    /* Mobile navigation */
    .nav-menu,
    .mobile-menu,
    #mobileMenu {
        position: absolute !important;
        top: 100% !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
        z-index: 9998;
    }

    .nav-menu.active,
    .mobile-menu.active,
    #mobileMenu.active {
        max-height: 80vh;
        overflow-y: auto;
    }
}
/* =====================================================
   EVORA — MOBILE LOGIN HIDE
   Login stays ONLY inside hamburger menu
   Desktop remains unchanged
   ===================================================== */

@media (max-width: 980px) {

    /* Hide any login button/link that is directly
       in the header */
    .site-header .header-login,
    .site-header .login,
    .site-header .login-btn,
    .site-header .login-button,
    .site-header a[href="login.html"],
    .site-header a[href$="/login.html"] {
        display: none !important;
    }

    /* Keep Login inside mobile menu visible */
    .evora-global-mobile-menu
    .evora-global-mobile-login {
        display: flex !important;
    }

    /* Extra protection for the universal mobile header */
    .evora-global-mobile-header
    .evora-global-mobile-login {
        display: none !important;
    }
}
/* =====================================================
   FULL BACKGROUND — STYLISTS / PRICING / CONTACT ONLY
   NO FADE • NO GRADIENT • NO ZOOM
   ===================================================== */

/* STYLISTS */
.stylists-page,
.stylists-page .page-background {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* PRICING */
.pricing-page,
.pricing-page .page-background {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* CONTACT */
.contact-page,
.contact-page .page-background {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;


/* Remove fade / overlays */
.stylists-page .overlay,
.pricing-page .overlay,
.contact-page .overlay,
.stylists-page::before,
.pricing-page::before,
.contact-page::before {
    display: none !important;
}

/* Disable background animation */
.stylists-page .page-background,
.pricing-page .page-background,
.contact-page .page-background {
    animation: none !important;
    transform: none !important;
}
}
/* =====================================================
   PRICING PAGE — FULL BACKGROUND IMAGE
   NO FADE • NO GRADIENT • NO ZOOM
   ===================================================== */

.pricing-page {
    background-image: url("../images/pricing.png") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* Remove any overlay/fade on Pricing */
.pricing-page::before,
.pricing-page::after {
    background: none !important;
    opacity: 1 !important;
}

/* Stop image animations */
.pricing-page,
.pricing-page * {
    animation: none;
}
/* =====================================================
   DARK HEADER — STYLISTS / PRICING / CONTACT ONLY
   ===================================================== */

/* STYLISTS */
body.stylists-page .site-header,
.stylists-page .site-header {
    background: rgba(18, 18, 17, 0.98) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28) !important;
}

/* PRICING */
body.pricing-page .site-header,
.pricing-page .site-header {
    background: rgba(18, 18, 17, 0.98) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28) !important;
}

/* CONTACT */
body.contact-page .site-header,
.contact-page .site-header {
    background: rgba(18, 18, 17, 0.98) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28) !important;
}

/* Keep it dark while scrolling */
body.stylists-page .site-header.scrolled,
body.pricing-page .site-header.scrolled,
body.contact-page .site-header.scrolled {
    background: #121311 !important;
}
/* =====================================================
   DARK HEADER
   STYLISTS + PRICING + CONTACT ONLY
   ===================================================== */

/* Pricing */
.pricing-page .site-header,
body.pricing-page .site-header {
    background: #171816 !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.30) !important;
}

/* Contact */
.contact-page .site-header,
body.contact-page .site-header {
    background: #171816 !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.30) !important;
}

/* Stylists */
.stylists-page .site-header,
body.stylists-page .site-header {
    background: #171816 !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.30) !important;
}

/* Keep these three dark even after scrolling */
.pricing-page .site-header.scrolled,
.contact-page .site-header.scrolled,
.stylists-page .site-header.scrolled {
    background: #121311 !important;
}
/* =====================================================
   SPECIAL DARK HEADER
   ONLY:
   stylists.html
   pricing.html
   contact.html
   ===================================================== */

.site-header.special-dark-header {
    background: #151713 !important;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.32) !important;

    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.site-header.special-dark-header.scrolled {
    background: #10120f !important;

    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.38) !important;
}
/* ================= ABOUT STORY HEADING FIX ================= */

.about-story .section-heading {
    max-width: 1150px;
    margin: 0 auto 45px;
    text-align: left;
}

.about-story .section-heading h2 {
    max-width: 900px;
    margin: 0 0 18px;
    line-height: 1.08;
}

.about-story .section-heading h2 span {
    display: inline;
    font-style: italic;
    font-weight: 500;
}

.about-story .section-heading p {
    max-width: 700px;
    margin: 0;
}
/* ================= ABOUT TEAM HEADING FIX ================= */

.about-story .section-heading,
.team-section .section-heading,
.experience-section .section-heading {
    max-width: 1150px;
    margin: 0 auto 45px;
    text-align: left;
}

.team-section .section-heading h2,
.experience-section .section-heading h2 {
    max-width: 900px;
    margin: 0 0 18px;
    line-height: 1.08;
}

.team-section .section-heading h2 span,
.experience-section .section-heading h2 span {
    display: inline;
    font-style: italic;
    font-weight: 500;
}

.team-section .section-heading p,
.experience-section .section-heading p {
    max-width: 700px;
    margin: 0;
}
/* ================= MOMENT / SERVICE HEADING FIX ================= */

.choose-moment .section-heading {
    max-width: 1150px;
    margin: 0 auto 45px;
    text-align: left;
}

.choose-moment .section-heading h2 {
    max-width: 900px;
    margin: 0 0 18px;
    line-height: 1.08;
}

.choose-moment .section-heading h2 span {
    display: inline;
    font-style: italic;
    font-weight: 500;
}

.choose-moment .section-heading p {
    max-width: 700px;
    margin: 0;
}