@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@400;500&display=swap');

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=ranade@300,400,500,600&display=swap');

@font-face {
    font-family: 'Baskervville';
    src: url('fonts/Baskervville-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Lusitana';
    src: url('fonts/Lusitana-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'DT Nightingale';
    src: url('fonts/DTNightingale-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

/* =====================================================
   1. COLORS + GLOBAL
===================================================== */

:root {
    --espresso: #352c29;
    --charcoal: #403a38;
    --ivory: #f7f4ef;
    --cream: #eee8df;
    --stone: #d8d0c4;
    --champagne: #b9a58a;
    --text-dark: #292524;
    --text-soft: #746b65;
    --white: #fffdf9;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Ranade', sans-serif;
    background: var(--ivory);
    color: var(--text-dark);
    line-height: 1.6;
}

img {
    width: 100%;
    display: block;
}

a {
    color: inherit;
}


/* =====================================================
   2. SHARED TYPOGRAPHY
===================================================== */

.eyebrow {
    margin-bottom: 18px;

    font-size: 0.68rem;
    letter-spacing: 4px;
    text-transform: uppercase;

    color: var(--text-soft);
}

h1,
h2,
h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
}

em {
    font-weight: 400;
}

.text-link {
    display: inline-block;

    margin-top: 28px;
    padding-bottom: 5px;

    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none;

    border-bottom: 1px solid var(--text-dark);
}


/* =====================================================
   3. HEADER + NAVIGATION
===================================================== */

.navbar {
    position: relative;

    min-height: 475px;
    padding: 20px 28px;

    overflow: hidden;

    background: var(--espresso);
}


/* -------------------------
   Header image carousel
------------------------- */

.header-carousel {
    position: absolute;
    inset: 0;

    overflow: hidden;

    z-index: 0;
}

.header-slide {
    position: absolute;
    inset: 0;

    background-size: 100% auto;
    background-position: center 27%;
    background-repeat: no-repeat;

    opacity: 0;

    transform: scale(1);

    transition:
        opacity 1.6s ease,
        transform 7s ease;
}

.header-slide.active {
    opacity: 1;
    transform: scale(1.01);
}

.header-carousel::after {
    content: "";

    position: absolute;
    inset: 0;

    background: rgba(53, 44, 41, 0.42);

    pointer-events: none;

    z-index: 2;
}
/* ========================================
   CAROUSEL PAUSE / PLAY
======================================== */

.carousel-pause {
    display: block;
    margin: 8px 0 0 22.5%;
    padding: 8px 29px;

    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.55);

    color: #f5f1eb;
    font-family: inherit;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;

    cursor: pointer;
    transition: 0.3s ease;
}
/* Large desktop - Pause button position */
@media (min-width: 1400px) {
    .carousel-pause {
        margin-left: 44%;
    }
}

.carousel-pause:hover,
.carousel-pause:focus-visible {
    background: #f5f1eb;
    color: #332a25;
}

/* -------------------------
   Header gray wash
------------------------- */

.navbar::before {
    content: "";

    position: absolute;
    inset: 0;

    backdrop-filter: grayscale(100%) brightness(0.99);
    -webkit-backdrop-filter: grayscale(100%) brightness(0.99);

    background: rgba(95, 95, 95, 0.28);

    pointer-events: none;

    z-index: 1;
}


/* -------------------------
   High Society logo
------------------------- */

.logo-link {
    position: absolute;

    top: 50%;
    left: 50%;

    width: min(700px, 65vw);

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

    z-index: 3;
}

.nav-logo-img {
    width: 100%;
    height: auto;
}


/* -------------------------
   Desktop navigation
------------------------- */

nav {
    position: absolute;

    top: 60px;
    left: 45px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 28px;

    z-index: 5;
}

nav a {
    color: var(--ivory);

    font-family: 'DT Nightingale', serif;
    font-size: 0.8rem;
    font-weight: 400;

    letter-spacing: 5px;
    text-transform: uppercase;
    text-decoration: none;

    transition: 0.3s ease;
}

nav a:hover {
    color: var(--champagne);
}


/* -------------------------
   Suite availability button
------------------------- */

.nav-button {
    position: absolute;

    top: 20px;
    right: 28px;

    height: 52px;
    padding: 0 22px;

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

    color: var(--ivory);
    background: transparent;

    border: 1px solid rgba(247, 244, 239, 0.55);

    font-family: 'DT Nightingale', serif;
    font-size: 0.72rem;
    font-weight: 500;

    letter-spacing: 5px;
    text-transform: uppercase;
    text-decoration: none;

    transition: 0.3s ease;

    z-index: 6;
}

.nav-button:hover {
    background: var(--ivory);
    color: var(--espresso);

    border-color: var(--ivory);
}


/* -------------------------
   Mobile menu button
------------------------- */

.mobile-menu-button {
    display: none;

    position: absolute;

    top: 22px;
    left: 22px;

    height: 52px;
    padding: 0 40px;

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

    background: transparent;
    color: var(--ivory);

    border: 1px solid rgba(247, 244, 239, 0.55);

    font-family: 'DT Nightingale', serif;

    font-size: 0.7rem;
    font-weight: 500;

    letter-spacing: 4px;
    text-transform: uppercase;

    cursor: pointer;

    transition: 0.3s ease;

    z-index: 8;
}

.mobile-menu-button:hover,
.mobile-menu-button:focus-visible {
    background: var(--ivory);
    color: var(--espresso);

    border-color: var(--ivory);
}


/* =====================================================
   4. ABOUT / INTRO
===================================================== */

.intro-section {
    padding: 90px 12% 100px;
    text-align: center;
    background: var(--ivory);
}

.intro-section h2 {
    max-width: 850px;
    margin: 0 auto;
    font-family: 'Baskervville', serif;
    font-size: clamp(2.2rem, 4vw, 3.8rem);
    line-height: 1.05;
}

.intro-section h2 em {
    color: var(--champagne);
    font-family: 'Baskervville', serif;
    font-style: italic;
}

.intro-copy {
    max-width: 760px;
    margin: 35px auto 0;

    color: var(--text-soft);

    font-family: 'Bitter', serif;
}

/* =====================================================
   5. PROFESSIONALS INTRO
===================================================== */

.professionals-intro {
    display: grid;
    grid-template-columns: 38% 62%;

    min-height: 430px;

    background: var(--espresso);
}

.professionals-feature-image {
    height: 430px;

    overflow: hidden;
}

.professionals-feature-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter: grayscale(100%);
}

.professionals-intro-copy {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 50px 10%;

    color: var(--ivory);
}

.large-decorative-letter {
    position: absolute;

    top: 10px;
    left: 4%;

    font-family: 'Playfair Display', serif;
    font-size: 8rem;

    line-height: 1;

    color: rgba(248, 244, 238, 0.07);
}

.professionals-intro-copy .eyebrow {
    color: var(--champagne);
}

.professionals-intro-copy h2 {
    margin-bottom: 18px;

    font-size: clamp(2.5rem, 4vw, 4rem);
    line-height: 1;

    color: var(--ivory);
}

.professionals-intro-copy h2 em {
    color: var(--champagne);
}

.professionals-intro-copy >
p:not(.eyebrow):not(.large-decorative-letter):not(.owner-name):not(.owner-title) {
    max-width: 520px;

    color: var(--cream);
}

.owner-name {
    margin-top: 30px;

    font-family: 'Playfair Display', serif;
    font-size: 1.45rem;
}

.owner-title {
    color: var(--text-soft);

    font-size: 0.7rem;

    letter-spacing: 2px;
    text-transform: uppercase;
}


/* =====================================================
   6. PROFESSIONALS GALLERY + CAROUSEL
===================================================== */

.professionals-gallery {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    padding: 100px 7%;

    background: #352c29;
}

/* MOVING BACKGROUND */

.professionals-gallery::before {
    content: "";

    position: absolute;
    inset: -8%;

    background:
        linear-gradient(
            rgba(53, 44, 41, 0.88),
            rgba(53, 44, 41, 0.88)
        ),
        url("photos/pexels-tara-winstead-6692131.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    z-index: -1;

    animation: behindChairMove 18s ease-in-out infinite alternate;
}

@keyframes behindChairMove {
    from {
        transform: scale(1.04) translate(-1%, -1%);
    }

    to {
        transform: scale(1.10) translate(1%, 1%);
    }
}

/* Keep the heading + stylist carousel above the background */

.professionals-gallery .gallery-heading,
.professionals-gallery .carousel-wrapper {
    position: relative;
    z-index: 1;
}
/* Stylist names + titles on dark background */

.professionals-gallery .professional-card h3 {
    color: #f7f4ef;
}

.professionals-gallery .professional-card > p {
    color: #b9a58a;
}
.professionals-gallery .gallery-heading .eyebrow {
    color: #f7f4ef;
    font-size: 1rem;
    letter-spacing: 6px;
}

.professionals-gallery .gallery-heading h2 {
    color: #f7f4ef;
}

.professionals-gallery .gallery-heading h2 em {
    color: #b9a58a;
}

.gallery-heading {
    margin-bottom: 45px;

    text-align: center;
}

.gallery-heading h2 {
    font-family: 'Baskervville', serif;
}

.gallery-heading h2 em {
    color: var(--champagne);
    font-family: 'Baskervville', serif;
    font-style: italic;
}

.carousel-wrapper {
    position: relative;
}

.professionals-scroll {
    display: flex;

    gap: 22px;

    overflow-x: hidden;

    padding-bottom: 25px;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

.professionals-scroll::-webkit-scrollbar {
    height: 6px;
}

.professionals-scroll::-webkit-scrollbar-thumb {
    background: var(--champagne);
}

.professional-card {
    flex: 0 0 300px;

    scroll-snap-align: start;

    text-align: center;
}

.professional-image-wrap {
    position: relative;

    width: 300px;
    height: 420px;

    margin-bottom: 20px;

    overflow: hidden;

    background: #eee8df;
}

.professional-image-wrap img {
    display: block;

    width: 300px;
    height: 420px;

    max-width: none;

    object-fit: cover;
    object-position: center;
}

.owner-badge {
    position: absolute;

    top: 15px;
    left: 15px;

    padding: 7px 10px;

    background: var(--ivory);
    color: var(--espresso);

    font-size: 0.58rem;

    letter-spacing: 2px;
    text-transform: uppercase;

    z-index: 2;
}

.professional-card h3 {
    font-size: 1.5rem;
}

.professional-card > p {
    margin: 4px 0 14px;

    color: var(--text-soft);
    font-family: 'Lusitana', serif;
    font-size: 0.75rem;

    letter-spacing: 1px;
    text-transform: uppercase;
}

.card-link {
    display: inline-block;

    padding-bottom: 4px;

    color: #ffffff;
    border-bottom: 1px solid #ffffff;

    font-size: 0.65rem;

    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;

    transition: 0.3s ease;
}

.card-link:hover {
    color: #b9a58a;
    border-bottom-color: #b9a58a;
}
/* -------------------------
   Carousel arrows
------------------------- */

.carousel-arrow {
    position: absolute;

    top: 42%;

    width: 46px;
    height: 46px;

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

    border: 1px solid rgba(53, 44, 41, 0.25);
    border-radius: 50%;

    background: rgba(247, 244, 239, 0.92);
    color: var(--espresso);

    box-shadow: 0 6px 20px rgba(53, 44, 41, 0.12);

    font-size: 1.4rem;

    cursor: pointer;

    transition: 0.2s ease;

    z-index: 10;
}

.carousel-arrow:hover {
    background: var(--espresso);
    color: var(--ivory);
}

.left-arrow {
    left: -22px;
}

.right-arrow {
    right: -22px;
}


/* =====================================================
   7. INTERACTIVE SUITES SECTION
===================================================== */

.interactive-suites-section {
    position: relative;

    padding: 65px 30px 75px;

    background:
    linear-gradient(
        rgba(0, 0, 0, 0.25),
        rgba(0, 0, 0, 0.25)
    ),
    url("photos/pawel-czerwinski-D--UhuzCSZc-unsplash.jpg");

background-size: cover;
background-position: center;
background-attachment: fixed;

    color: var(--ivory);
}


/* -------------------------
   Suites heading
------------------------- */

.interactive-suites-heading {
    max-width: 800px;

    margin: 0 auto 30px;

    text-align: center;
}

.interactive-suites-heading .eyebrow {
    margin-bottom: 12px;
         color: var(--ivory);
    
}

.interactive-suites-heading h2 {
    margin: 0 0 14px;

    font-family: 'Baskervville', serif;
    font-size: clamp(2.7rem, 5vw, 4.5rem);
    font-weight: 400;

    line-height: 0.95;

    color: var(--ivory);
}

.interactive-suites-heading h2 em {
        color:  #e2cfb2;
}


/* =====================================================
   8. HAIR ARTIST FINDER
===================================================== */

.suite-finder {
    width: min(400px, 100%);

    margin: 25px auto 30px;

    text-align: center;
}

.suite-finder label {
    display: block;

    margin-bottom: 14px;

    color: var(--ivory);

    font-family: 'Baskervville', serif;
    font-size: 0.7rem;
    font-weight: 500;

    letter-spacing: 3px;
    text-transform: uppercase;
}

.suite-finder select {
    width: 100%;
    height: 54px;

    padding: 0 18px;

    background: #c4a878;
    color: var(--espresso);

    border: 1px solid rgba(247, 244, 239, 0.55);

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

    font-family: 'DT Nightingale', serif;
    font-size: 0.85rem;

    cursor: pointer;
    outline: none;
}

.suite-finder select:focus {
    border-color: var(--champagne);
}

.selected-artist-result {
    min-height: 48px;

    margin-top: 20px;
}

.selected-artist-name {
    margin: 0;

    color: var(--ivory);

    font-family: 'Baskervville', serif;
    font-size: 1.25rem;
}

.selected-suite-number {
    margin: 6px 0 0;

    color: rgba(247, 244, 239, 0.75);

    font-family:'Baskervville', serif;
    font-size: 0.65rem;

    letter-spacing: 2px;
    text-transform: uppercase;
}


/* =====================================================
   9. FLOOR PLAN
===================================================== */

.salon-floorplan {
    position: relative;

    width: min(1050px, 100%);
    height: 650px;
    margin: 35px auto 0;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: none; 
    overflow: hidden;
}

/* -------------------------
   Suite base appearance
------------------------- */
.floorplan-suite {
    position: absolute;

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

    border: 1px solid rgba(53, 44, 41, 0.42);

    background: #fff;
    color: var(--espresso);

    font-family: 'Lusitana', serif;

    cursor: pointer;

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

.floorplan-suite span {
    position: absolute;
    top: 14px;
    left: 14px;

    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: var(--espresso);
}

.floorplan-suite:hover {
    background: rgba(181, 158, 130, 0.75);
    border-color: #a58a68;

    transform: scale(1.025);
    z-index: 20;
}
.floorplan-suite:hover span {
    opacity: 1;
}

.floorplan-suite.is-selected {
    background: rgba(224, 190, 120, 0.95) !important;
    border-color: #f0d59a !important;
    transform: scale(1.035);
    z-index: 20;
}

.floorplan-suite.is-selected span {
    opacity: 1 !important;
}

.available-suite span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.available-suite small {
    font-family: 'Ranade', sans-serif;
    font-size: 0.5rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--espresso);
}

.available-suite {
    background: rgba(196, 168, 120, 0.70) !important;
    border-color: #c4a878 !important;
}

.available-suite:hover {
    background: rgba(218, 190, 139, 0.90) !important;
    border-color: #d6b978 !important;
}

.available-suite small {
    color: #5c4728;
}

/* =====================================================
   10. SUITE SIZES + POSITIONS
===================================================== */

/* -------------------------
   SUITE 01 - JESSICA
------------------------- */

.suite-01 {
    left: 9%;
    bottom: 18%;

    width: 26%;
    height: 15%;
}


/* -------------------------
   SUITE 02 - CASSIE
------------------------- */

.suite-02 {
    left: 64%;
    bottom: 30%;

    width: 29%;
    height: 17%;
}


/* -------------------------
   SUITE 03 - AVAILABLE
------------------------- */

.suite-03 {
    left: 64%;
    bottom: 47%;

    width: 29%;
    height: 17%;
}


/* -------------------------
   SUITE 04 - ANESHA
------------------------- */

.suite-04 {
    left: 64%;
    top: 19%;

    width: 29%;
    height: 17%;
}


/* -------------------------
   SUITE 05 - KASHÉ
------------------------- */

.suite-05 {
    left: 45%;
    bottom: 74%;

    width: 19%;
    height: 25%;
}


/* -------------------------
   SUITE 06 - CICILLIE
------------------------- */

.suite-06 {
    left: 27%;
    bottom: 74%;

    width: 18%;
    height: 25%;
}


/* -------------------------
   SUITE 07 - JAZ
------------------------- */
.suite-07 {
    left: 11%;
    bottom: 45%;

    width: 14%;
    height: 26%;
}

/* -------------------------
   SUITE 08 - BRITTANY
------------------------- */

.suite-08 {
    left: 25%;
    bottom: 46%;

    width: 25%;
    height: 12%;
}


/* -------------------------
   SUITE 09 - MYONARA
------------------------- */

.suite-09 {
    left: 25%;
    bottom: 33%;

    width: 25%;
    height: 13%;
}


/* -------------------------
   SUITE 10 - AVAILABLE
------------------------- */

.suite-10 {
    left: 5%;
    top: 1%;

    width: 22%;
    height: 10%;
}

/* =====================================================
   11. SHARED FLOOR PLAN SPACES
===================================================== */

.map-space {
    position: absolute;

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

    border: 1px solid rgba(53, 44, 41, 0.22);

    background: #fff;
    color: var(--text-soft);

    font-size: 0.55rem;

    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
}


/* -------------------------
   Breakroom
------------------------- */

.breakroom-space {
    left: 5%;
    top: 17%;

    width: 15%;
    height: 12%;
}


/* -------------------------
   Restroom
------------------------- */

.restroom-space {
    left: 5%;
    top: 11%;

    width: 13%;
    height: 6%;
}


/* -------------------------
   Entrance
------------------------- */

.entrance-space {
    right: 7%;
    bottom: 11%;

    width: 29%;
    height: 19%;

    border: 1px solid rgba(53, 44, 41, 0.25);

    background: #fff;

    color: var(--text-soft);

    font-family: 'Ranade', sans-serif;
    font-size: 0.62rem;

    letter-spacing: 3px;
    text-transform: uppercase;
}


/* =====================================================
   12. SUITE DOOR NOTCHES
===================================================== */

/* Right wall opening */

.door-right-css::after {
    content: "";

    position: absolute;

    right: -2px;

    width: 4px;
    height: 42px;

    background: #ece7df;

    z-index: 10;
}


/* Left wall opening */

.door-left-css::after {
    content: "";

    position: absolute;

    left: -2px;

    width: 4px;
    height: 42px;

    background: #ece7df;

    z-index: 10;
}


/* Bottom wall opening */

.door-bottom-css::after {
    content: "";

    position: absolute;

    bottom: -2px;

    width: 42px;
    height: 4px;

    background: #ece7df;

    z-index: 10;
}

/* -------------------------
   Individual notch positions
------------------------- */

/* Suite 01 - right wall */
.suite-01::after {
    top: 55%;
}


/* Suite 02 - left wall */
.suite-02::after {
    top: 55%;
}


/* Suite 03 - left wall */
.suite-03::after {
    top: 55%;
}


/* Suite 04 - left wall */
.suite-04::after {
    top: 55%;
}


/* Suite 05 - bottom wall */
.suite-05::after {
    left: 50%;
}


/* Suite 06 - bottom wall */
.suite-06::after {
    left: 50%;
}


/* Suite 07 - right wall near top */
.suite-07::after {
    top: 15%;
}


/* Suite 08 - right wall */
.suite-08::after {
    top: 55%;
}


/* Suite 09 - right wall */
.suite-09::after {
    top: 55%;
}


/* Suite 10 - bottom wall */
.suite-10::after {
    left: 72%;
}


/* =====================================================
   14. FOOTER
===================================================== */

footer {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    align-items: start;

    gap: 70px;

    padding: 75px 9%;

    background: #000000;
    color: var(--ivory);
}

.footer-brand {
    display: flex;
    align-items: flex-start;
}

.footer-logo {
    width: 260px;
    height: 120px;

    object-fit: contain;
    object-position: left center;
}

footer h4 {
    margin: 0 0 22px;

    color: var(--champagne);

    font-size: 0.65rem;

    letter-spacing: 3px;
    text-transform: uppercase;
}

footer p,
footer a {
    display: block;

    margin: 0 0 12px;

    color: var(--ivory);

    font-family: 'Lusitana', sans-serif;
    font-size: 0.82rem;

    text-decoration: none;
}

footer a {
    transition: 0.3s ease;
}

footer a:hover {
    color: var(--champagne);
}


/* =====================================================
   15. TABLET
===================================================== */

@media (max-width: 1000px) {

    /* Header */

    .navbar {
        min-height: 550px;
    }

    .logo-link {
        width: min(620px, 78vw);
    }

    .mobile-menu-button {
        display: flex;

        top: 20px;
        left: 18px;

        height: 48px;
        padding: 0 18px;

        font-size: 0.62rem;
        letter-spacing: 3px;
    }

    nav {
        display: none;

        top: 88px;
        left: 22px;

        width: 250px;

        padding: 24px;

        background: rgba(53, 44, 41, 0.96);

        flex-direction: column;
        align-items: flex-start;

        gap: 20px;

        z-index: 7;
    }

    nav.mobile-open {
        display: flex;
    }

    nav a {
        font-size: 0.72rem;
        letter-spacing: 3px;
    }

    .nav-button {
        top: 20px;
        right: 18px;

        height: 48px;
        padding: 0 18px;

        font-size: 0.62rem;
        letter-spacing: 3px;
    }


    /* Professionals */

    .professionals-intro {
        display: block;

        min-height: auto;
    }

    .professionals-feature-image {
        width: 100%;
        height: 370px;

        min-height: 0;

        overflow: hidden;
    }

    .professionals-feature-image img {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center 35%;
    }

    .professionals-intro-copy {
        min-height: auto;

        padding: 45px 10% 55px;
    }


    /* Footer */

    /* Footer - tablet / smaller desktop */

footer {
    grid-template-columns: 1fr 1fr;
    gap: 45px 70px;
    padding: 60px 8%;
}

.footer-brand {
    grid-column: 1 / -1;
}

.footer-logo {
    width: 230px;
    height: auto;
}

.footer-visit,
.footer-explore {
    min-width: 0;
}

.footer-hours-note {
    max-width: 320px;
}
}


/* =====================================================
   16. MOBILE
===================================================== */

@media (max-width: 700px) {

    /* Professionals carousel */

    .carousel-arrow {
        display: flex;
        width: 42px;
        height: 42px;
        top: 40%;
        z-index: 20;
    }

    .left-arrow {
        left: 4px;
    }

    .right-arrow {
        right: 4px;
    }

    /* Allow stylist carousel to swipe on mobile */
    .professionals-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .professionals-scroll::-webkit-scrollbar {
        display: none;

    }

    .professionals-intro-copy h2 {
        margin-bottom: 20px;

        font-size: 2.7rem;

        line-height: 0.95;
    }

    .professionals-intro-copy p {
        max-width: 500px;

        font-size: 1rem;

        line-height: 1.6;
    }


    /* Floor plan */

    .salon-floorplan {
        width: 100%;
        height: 410px;
    }

    .floorplan-suite span {
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    line-height: 1.15;
}

.map-space {
    font-size: 0.58rem;
    letter-spacing: 0.4px;
    line-height: 1.15;
}
/* Keep restroom + breakroom labels inside their rooms */
.restroom-space,
.breakroom-space {
    font-size: 0.52rem;
    letter-spacing: 0.3px;
    line-height: 1.1;
    padding: 2px;
    text-align: center;
    white-space: normal;
    overflow: hidden;
}

/* SUITE 10 - keep AVAILABLE visible on mobile */
.suite-10 small {
    font-size: 0.42rem;
    transform: translateY(-3px);
}

/* Footer - mobile */

footer {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 45px 8% 50px;
} 
.footer-brand {
    grid-column: auto;
}

.footer-logo {
    width: 210px;
    height: auto;
}

footer h4 {
    margin-bottom: 14px;
}

footer p,
footer a {
    font-size: 0.95rem;
    line-height: 1.6;
}

.footer-hours-note {
    max-width: 100%;
}

/* CLOSE MOBILE MEDIA QUERY */
}

/* ========================================
   SUITE AVAILABILITY PANEL
======================================== */

.availability-overlay {
    position: fixed;
    inset: 0;

    background: rgba(20, 17, 16, 0.48);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;

    z-index: 5000;
}

.availability-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.availability-panel {
    position: absolute;
    top: 0;
    right: 0;

    width: min(500px, 90vw);
    height: 100%;

    padding: 100px 60px 60px;

     background:
        linear-gradient(
            rgba(53, 44, 41, 0.72),
            rgba(53, 44, 41, 0.72)
        ),
        url("photos/Blk_silk.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

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

    border-left: 1px solid rgba(247, 244, 239, 0.18);

    color: var(--ivory);

    overflow-y: auto;

    transform: translateX(100%);

    transition: transform 0.5s ease;
}

.availability-overlay.is-open .availability-panel {
    transform: translateX(0);
}

.availability-close {
    position: absolute;
    top: 30px;
    right: 35px;

    border: 0;
    background: transparent;

    color: var(--ivory);

    font-size: 2rem;
    font-weight: 300;

    cursor: pointer;
}

.availability-eyebrow {
    margin: 0 0 24px;

    color: #e2cfb2;

    font-family: 'Lusitana', serif;
    font-size: 0.7rem;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.availability-panel h2 {
    margin: 0 0 30px;

    color: var(--ivory);

    font-family: 'Baskervville', serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 400;
    line-height: 0.98;
}

.availability-panel h2 em {
    display: block;

    color: #e2cfb2;

    font-weight: 400;
}

.availability-description {
    max-width: 390px;
    margin: 0 0 45px;

    color: rgba(247, 244, 239, 0.78);

    font-family: 'Lusitana', serif;
    font-size: 0.95rem;
    line-height: 2;
}

.availability-current {
    padding: 28px 0;

    border-top: 1px solid rgba(247, 244, 239, 0.20);
    border-bottom: 1px solid rgba(247, 244, 239, 0.20);
}

.availability-current > p {
    margin: 0 0 18px;

    color: #e2cfb2;

    font-family: 'Lusitana', serif;
    font-size: 0.65rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.availability-suite-list {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.availability-suite-list span {
    padding: 11px 16px;

    border: 1px solid rgba(247, 244, 239, 0.38);

    color: var(--ivory);

    font-family: 'Lusitana', serif;
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.availability-note {
    margin: 30px 0;

    color: rgba(247, 244, 239, 0.68);

    font-family: 'Lusitana', serif;
    font-size: 0.92rem;
    line-height: 1.7;
}

.availability-explore {
    width: 100%;

    padding: 17px 20px;

    border: 1px solid #e2cfb2;

    background: transparent;

    color: #e2cfb2;

    font-family: 'Ranade', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;

    cursor: pointer;

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

.availability-explore:hover {
    background: #e2cfb2;
    color: var(--espresso);
}

@media (max-width: 600px) {

    .availability-panel {
        width: 92vw;
        padding: 90px 35px 45px;
    }

}


/* -------------------------
   Suite tour / contact intro
------------------------- */

.suite-contact-intro {
    margin-top: 28px;
    margin-bottom: 20px;
}

.suite-contact-heading {
    margin: 0 0 8px;

    color: var(--champagne);

    font-family: 'Ranade', sans-serif;
    font-size: 0.68rem;
    font-weight: 500;

    letter-spacing: 3px;
    text-transform: uppercase;
}

.suite-contact-text {
    max-width: 500px;
    margin: 0;

    color: #f7f4ef;

    font-family: 'DTNightingale', serif;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.8;
}

.suite-contact-heading {
    margin-bottom: 8px;

    color: #e2cfb2;

    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.suite-contact-text {
    max-width: 500px;

    color: #f7f4ef;

    font-size: 0.9rem;
    line-height: 1.7;
}


/* -------------------------
   Availability contact buttons
------------------------- */

.availability-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;

    margin-top: 14px;
}

.availability-contact-button {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;
    padding: 14px 12px;

    border: 1px solid rgba(247, 244, 239, 0.38);

    color: var(--ivory);
    background: transparent;

    font-family: 'Ranade', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;

    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;

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

.availability-contact-button:hover {
    background: #e2cfb2;
    color: var(--espresso);
    border-color: #e2cfb2;
}

/* ========================================
   JOIN HIGH SOCIETY
======================================== */

.join-section {
    display: grid;
    grid-template-columns: 1fr 1fr;

    min-height: 760px;

    background: var(--ivory);
}


/* LEFT IMAGE */

.join-image {
    position: relative;

    min-height: 760px;

    overflow: hidden;
}

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

    object-fit: cover;

    filter: grayscale(100%);
}

.join-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background: rgba(53, 44, 41, 0.16);

    pointer-events: none;
}

.join-image-label {
    position: absolute;

    left: 35px;
    bottom: 32px;

    z-index: 2;

    color: var(--ivory);

    font-family: 'Ranade', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 4px;
    text-transform: uppercase;
}


/* RIGHT CONTENT */

.join-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 90px 9%;
}

.join-content .eyebrow {
    margin-bottom: 22px;

    color: var(--champagne);
}

.join-content h2 {
    margin: 0 0 28px;

    color: var(--espresso);

    font-family: 'Playfair Display', serif;
    font-size: clamp(2.8rem, 4.5vw, 5rem);
    font-weight: 400;
    line-height: 0.98;
}

.join-content h2 em {
    color: #916969;

    font-weight: 400;
}

.join-description {
    max-width: 560px;

    margin: 0 0 42px;

    color: var(--text-soft);

    font-family: 'Ranade', sans-serif;
    font-size: 0.95rem;
    line-height: 1.85;
}


/* BENEFITS */

.join-benefits {
    border-top: 1px solid var(--stone);
}

.join-benefit {
    display: grid;

    grid-template-columns: 45px 1fr;

    gap: 15px;

    padding: 20px 0;

    border-bottom: 1px solid var(--stone);
}

.join-benefit > span {
    padding-top: 3px;

    color: #916969;

    font-family: 'Playfair Display', serif;
    font-size: 0.85rem;
}

.join-benefit h3 {
    margin: 0 0 5px;

    color: var(--espresso);

    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 400;
}

.join-benefit p {
    margin: 0;

    color: var(--text-soft);

    font-family: 'Ranade', sans-serif;
    font-size: 0.78rem;
    line-height: 1.6;
}


/* CURRENT AVAILABILITY */

.join-availability {
    display: flex;

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

    gap: 25px;

    margin-top: 35px;
    padding: 22px 0;
}

.join-availability p {
    margin: 0;

    color: #916969;

    font-family: 'Ranade', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.join-availability h3 {
    margin: 0;

    color: var(--espresso);

    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
    font-weight: 400;
}

.join-availability h3 span {
    color: #916969;

    font-style: italic;
}


/* INQUIRE BUTTON */

.join-inquire-button {
    width: 100%;

    padding: 17px 24px;

    border: 1px solid var(--espresso);

    background: var(--espresso);

    color: var(--ivory);

    font-family: 'Ranade', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;

    cursor: pointer;

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

.join-inquire-button:hover {
    background: transparent;

    color: var(--espresso);
}


/* ========================================
   JOIN HIGH SOCIETY - MOBILE
======================================== */

@media (max-width: 800px) {

    .join-section {
        grid-template-columns: 1fr;

        min-height: auto;
    }

    .join-image {
        min-height: 480px;
    }

    .join-content {
        padding: 70px 35px;
    }

    .join-content h2 {
        font-size: clamp(2.7rem, 12vw, 4rem);
    }

}


@media (max-width: 500px) {

    .join-image {
        min-height: 400px;
    }

    .join-content {
        padding: 60px 27px;
    }

    .join-availability {
        align-items: flex-start;
        flex-direction: column;

        gap: 8px;
    }

}

.selected-suite-instruction {
    margin-top: 8px;

    color: rgba(247, 244, 239, 0.75);

    font-family: 'Lusitana', serif;
    font-size: 0.65rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Gentle attention bounce when a Hair Artist is selected */
.floorplan-suite.finder-bounce {
    animation: suiteAttention 0.55s ease-in-out 2;
}

@keyframes suiteAttention {
    0%, 100% {
        transform: scale(1.025) translateY(0);
    }

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

/* Hair Artist specialty tags */
.suite-profile-specialties {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin: 28px 0 24px;
}

.suite-profile-specialties span {
    padding: 8px 12px;

    border: 1px solid rgba(53, 44, 41, 0.22);

    color: var(--espresso);

    font-family: 'DT Nightingale', serif;
    font-size: 0.58rem;
    font-weight: 500;

    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* BEHIND THE CHAIR - MOBILE SPACING */
@media (max-width: 700px) {

    .professionals-gallery {
        padding-top: 65px !important;
    }

    .gallery-heading {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

}
.salon-floorplan {
    background:
        linear-gradient(
            rgba(53, 44, 41, 0.55),
            rgba(53, 44, 41, 0.55)
        ),
        url("photos/Blk_silk.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* =====================================================
   VISIT HIGH SOCIETY CAROUSEL
===================================================== */

.visit-high-society {
    width: 100%;
    background: var(--ivory);
    overflow: hidden;
}


/* =====================================================
   SLIDER
===================================================== */

.visit-slider {
    position: relative;
    width: 100%;
    min-height: 540px;
}

.visit-slides {
    position: relative;
    width: 100%;
}

.visit-slide {
    display: none;
    width: 100%;
    min-height: 540px;
}

.visit-slide.active {
    display: block;
}

/* Moving forward: 01 → 02 → 03 */
.visit-slide.slide-in-right {
    animation: visitInRight 0.65s ease both;
}

/* Moving backward: 03 → 02 → 01 */
.visit-slide.slide-in-left {
    animation: visitInLeft 0.65s ease both;
}

@keyframes visitInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

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

@keyframes visitInLeft {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* =====================================================
   SLIDE 01 — MAP + VISIT INFORMATION
===================================================== */

.visit-slide-layout {
    display: grid;
    grid-template-columns: 42% 58%;
    min-height: 540px;
}

.visit-map {
    height: 480px;
    padding: 35px 0 70px 35px;
    overflow: hidden;
}

.visit-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;

    filter: grayscale(100%) contrast(90%);
}

.visit-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    min-width: 0;

    padding: 55px 10% 95px;

    text-align: left;
}


/* =====================================================
   SLIDES 02 + 03
===================================================== */

.visit-full-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 540px;

    padding: 65px 10% 105px;

    text-align: center;
}


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

.visit-eyebrow {
    margin: 0 0 22px;

    color: var(--champagne);

    font-size: 0.7rem;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.visit-info h2,
.visit-full-slide h2 {
    margin: 0;

    color: var(--espresso);

     font-family: 'Lusitana', serif;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: normal;
    line-height: 0.95;
}

.visit-info h2 em,
.visit-full-slide h2 em {
    color: var(--champagne);

    font-family: 'DT Nightingale', serif;
    font-weight: normal;
}


/* GOLD LINE */

.visit-line {
    width: 55px;
    height: 1px;

    margin: 28px 0;

    background: var(--champagne);
}

.visit-full-slide .visit-line {
    margin: 28px auto;
}


/* DESCRIPTION */

.visit-address {
    max-width: 520px;

    margin: 0 0 28px;

    color: var(--text-soft);

    font-family: 'Lusitana', serif;
    font-size: 1rem;
    line-height: 1.8;
}


/* BUTTON */

.visit-directions-btn {
    display: inline-block;

    padding: 17px 32px;

    border: 1px solid #c4a878;

    font-size: 0.68rem;
    letter-spacing: 3px;
    text-decoration: none;

    color: var(--espresso);
    background: #c4a878;

    transition: 0.3s ease;
}

.visit-directions-btn:hover {
    background: var(--espresso);
    color: var(--ivory);
    border-color: var(--espresso);
}


/* =====================================================
   CAROUSEL CONTROLS
===================================================== */

.visit-slider-controls {
    position: absolute;

    left: 50%;
    bottom: 32px;

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

    gap: 18px;

    transform: translateX(-50%);

    z-index: 10;
}

.visit-arrow,
.visit-dot {
    border: none;

    background: transparent;
    color: var(--espresso);

    cursor: pointer;
}

.visit-arrow {
    padding: 5px;

    font-size: 1.1rem;
}

.visit-dots {
    display: flex;
    gap: 15px;
}

.visit-dot {
    padding: 4px 0;

    border-bottom: 1px solid transparent;

    font-family: 'Ranade', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 2px;

    opacity: 0.4;

    transition: 0.3s ease;
}

.visit-dot.active {
    opacity: 1;
    border-bottom-color: var(--espresso);
}

.visit-dot:hover {
    opacity: 1;
}


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

@media (max-width: 700px) {

    .visit-slider,
    .visit-slide {
        min-height: 0;
    }


    /* SLIDE 01 */

    .visit-slide-layout {
        display: flex;
        flex-direction: column;

        min-height: 0;
    }

    .visit-map {
        width: 100%;
        height: 260px;

        padding: 20px 20px 0;
    }

    .visit-map iframe {
        width: 100%;
        height: 100%;
    }

    .visit-info {
        align-items: center;

        min-height: 430px;

        padding: 45px 8% 105px;

        text-align: center;
    }


    /* SLIDES 02 + 03 */

    .visit-full-slide {
        min-height: 690px;

        padding: 65px 8% 105px;
    }


    /* TYPOGRAPHY */

    .visit-info h2,
    .visit-full-slide h2 {
        font-size: clamp(2.7rem, 13vw, 3.4rem);
    }

    .visit-info .visit-line,
    .visit-full-slide .visit-line {
        margin: 25px auto;
    }

    .visit-address {
        font-size: 0.95rem;
    }


    /* CONTROLS */

    .visit-slider-controls {
        bottom: 28px;
    }
}/* =====================================================
   NEW MOBILE-FIRST STYLIST PROFILES
===================================================== */

.suite-profile-overlay {
    position: fixed;
    inset: 0;

    background: rgba(25, 20, 18, 0.88);

    overflow-y: auto;

    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}

.suite-profile-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* MAIN PROFILE */

.stylist-profile {
    position: relative;

    width: min(100%, 680px);
    min-height: 100vh;

    margin: 0 auto;

    background: var(--ivory);
    color: var(--espresso);

    padding-bottom: 70px;
}


/* CLOSE BUTTON */

.stylist-profile .suite-profile-close {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 44px;
    height: 44px;

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

    border: 1px solid rgba(247, 244, 239, 0.7);
    border-radius: 50%;

    background: rgba(53, 44, 41, 0.55);
    color: var(--ivory);

    font-size: 1.5rem;

    cursor: pointer;

    z-index: 20;
}


/* PROFILE PHOTO */

.stylist-profile-photo {
    width: 100%;
    height: min(62vh, 620px);

    overflow: hidden;

    background: var(--cream);
}

.stylist-profile-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 30%;
}


/* PROFILE NAME AREA */

.stylist-profile-header {
    padding: 38px 28px 20px;

    text-align: center;
}

.stylist-suite {
    margin-bottom: 12px;

    color: var(--champagne);

    font-family: 'Ranade', sans-serif;
    font-size: 0.62rem;

    letter-spacing: 4px;
    text-transform: uppercase;
}

.stylist-profile-header h2 {
    margin: 0;

    font-family: 'Baskervville', serif;
    font-size: clamp(2.5rem, 10vw, 4.2rem);
    font-weight: 400;

    line-height: 1;
}

.stylist-handle {
    display: inline-block;

    margin-top: 10px;

    color: var(--champagne);

    font-family: 'Baskervville', serif;
    font-size: 1.2rem;
    font-style: italic;

    text-decoration: none;
}

.stylist-title {
    margin-top: 13px;

    color: var(--text-soft);

    font-size: 0.62rem;

    letter-spacing: 3px;
    text-transform: uppercase;
}


/* SOCIAL MEDIA */

.stylist-socials {
    display: flex;
    justify-content: center;

    gap: 30px;

    margin: 10px 28px 28px;
}

.stylist-socials a {
    padding-bottom: 4px;

    color: var(--espresso);

    border-bottom: 1px solid var(--champagne);

    font-size: 0.68rem;

    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
}


/* MAIN CTA */

.stylist-book-button {
    width: calc(100% - 56px);

    margin: 0 28px 42px;
    padding: 18px 20px;

    display: block;

    background: #c4a878;
    color: var(--espresso);

    border: 1px solid #c4a878;

    text-align: center;

    font-size: 0.68rem;

    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none;

    transition: 0.3s ease;
}

.stylist-book-button:hover {
    background: var(--espresso);
    color: var(--ivory);

    border-color: var(--espresso);
}


/* PROFILE CONTENT */

.stylist-profile-section {
    margin: 0 28px;
    padding: 32px 0;

    border-top: 1px solid rgba(53, 44, 41, 0.15);
}

.stylist-section-label {
    margin-bottom: 18px;

    color: #66564a;

    font-size: 0.7rem;
    font-weight: 500;

    letter-spacing: 4px;
    text-transform: uppercase;
}

.stylist-about {
    color: var(--text-soft);

    font-family: 'Lusitana', serif;
    font-size: 1rem;

    line-height: 1.8;
}


/* SPECIALTIES */

.stylist-specialties {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.stylist-specialties span {
    padding: 9px 13px;

    border: 1px solid rgba(53, 44, 41, 0.18);

    color: var(--text-soft);

    font-size: 0.58rem;

    letter-spacing: 1.5px;
    text-transform: uppercase;
    
}
/* =====================================================
   STYLIST PROFILE — OPEN / SCROLL / CLOSE
   Applies to ALL stylist profiles
===================================================== */

.suite-profile-overlay {
    width: 100%;
    height: 100dvh;

    overflow-x: hidden;
    overflow-y: auto;

    -webkit-overflow-scrolling: touch;
}


/* OPEN PROFILE */

.suite-profile-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    overflow-y: auto;
}


/* PROFILE PAGE */

.suite-profile-overlay .stylist-profile {
    position: relative;

    width: min(100%, 680px);
    min-height: 100dvh;
    height: auto;

    margin: 0 auto;

    overflow: visible;

    background: var(--ivory);
}


/* CLOSE BUTTON */

.suite-profile-overlay .suite-profile-close {
    position: fixed;

    top: 18px;
    right: 18px;

    width: 46px;
    height: 46px;

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

    border-radius: 50%;
    border: 1px solid rgba(247, 244, 239, 0.7);

    background: rgba(53, 44, 41, 0.78);
    color: var(--ivory);

    font-size: 1.6rem;

    cursor: pointer;

    z-index: 100001;

    pointer-events: auto;
}
/* =========================================================
   MINI PROFILE PHOTO POSITIONING
   Change ONLY these values when adjusting each girl's photo.

   object-position:
   50% 50% = centered
   smaller second number = image moves DOWN / shows more top
   larger second number = image moves UP / shows more bottom
========================================================= */


/* =========================
   JESSICA - OWNER
========================= */

#jessicaProfile .stylist-profile-photo img {
    object-fit: cover;
    object-position: 30% 28%;
}


/* =========================
   CASSY - SUITE 02
========================= */

#cassyProfile .stylist-profile-photo img {
    object-fit: cover;
    object-position: 50% 15%;
}


/* =========================
   ANESHA - SUITE 04
========================= */

#aneshaProfile .stylist-profile-photo img {
    object-fit: cover;
    object-position: 20% 10%;
}


/* =========================
   Kashe - SUITE 05
========================= */

#kasheProfile .stylist-profile-photo img {
    object-position: center 10%;
}
/* =========================
    Cicilie - SUITE 06
========================= */

#cicilieProfile .stylist-profile-photo img {
    object-position: center 20%;
}
/* ========================================
   JAZMINE - SUITE 07
======================================== */

#jazmineProfile .stylist-profile-photo img {
    object-fit: cover;
    object-position: center 8%;
}

/* ========================================
   BRITTANY - SUITE 08
======================================== */

#brittanyProfile .stylist-profile-photo img {
    object-fit: cover;
    object-position: center 5%;
}
/* ========================================
   MYONARA - SUITE 09
======================================== */

#myonaraProfile .stylist-profile-photo img {
    object-fit: cover;
    object-position: center 18%;
}

/* Smaller desktop - lower Behind the Chair heading */
@media (max-width: 1200px) and (min-width: 769px) {

    .professionals-gallery {
        padding-top: 125px;
    }

}
/* MAKE BEHIND THE CHAIR BIGGER */
.professionals-gallery .gallery-heading .eyebrow {
    font-family: "Baskervville", serif;
    font-size: 1.7rem;
}

.review-stars {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
}

.review-stars img {
    width: 200px;
    height: auto;
    display: block;
}

/* ========================================
   CAROUSEL - VIEW PROFILE LINKS
======================================== */

.carousel-profile-link {
    display: inline-block;
    margin-top: 8px;

    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;

    color: #f7f4ef;
    border-bottom: 1px solid #f7f4ef;

    padding-bottom: 3px;
    transition: 0.3s ease;
}

.carousel-profile-link:hover {
    color: #2d2622;
    border-color: #2d2622;
}

/* ========================================
   ACCESSIBILITY - SKIP LINK
======================================== */

.skip-link {
    position: fixed;
    top: 15px;
    left: 15px;

    padding: 12px 18px;

    background: #ffffff;
    color: #352c29;

    text-decoration: none;
    font-weight: 600;

    transform: translateY(-200%);

    z-index: 999999;
}

.skip-link:focus {
    transform: translateY(0);
}

/* ========================================
   ACCESSIBILITY - KEYBOARD FOCUS
======================================== */

a:focus-visible,
button:focus-visible,
select:focus-visible {
    outline: 3px solid #e2cfb2;
    outline-offset: 4px;
}

.card-link:focus-visible {
    color: #b9a58a;
    border-bottom-color: #b9a58a;
}

.visit-arrow:focus-visible,
.visit-dot:focus-visible {
    outline: 3px solid #352c29;
    outline-offset: 4px;
}

.floorplan-suite:focus-visible {
    outline: 3px solid #352c29;
    outline-offset: 4px;
    z-index: 30;
}

/* ========================================
   ACCESSIBILITY - REDUCED MOTION
======================================== */

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

    html {
        scroll-behavior: auto;
    }

    /* Stop decorative moving background */
    .professionals-gallery::before {
        animation: none !important;
        transform: none !important;
    }

    /* Stop stylist finder bounce */
    .floorplan-suite.finder-bounce {
        animation: none !important;
    }

    /* Remove large sliding motion from Visit carousel */
    .visit-slide.slide-in-right,
    .visit-slide.slide-in-left {
        animation: none !important;
    }

    /* Remove header zoom/fade movement */
    .header-slide {
        transition: none !important;
        transform: none !important;
    }

    .header-slide.active {
        transform: none !important;
    }

    /* Carousels still work, but don't smooth-scroll */
    .professionals-scroll {
        scroll-behavior: auto;
    }

    /* Panels still open and close, just without sliding */
    .availability-overlay,
    .availability-panel,
    .suite-profile-overlay,
    .stylist-profile {
        transition: none !important;
    }
}
/* ========================================
   ACCESSIBILITY - VISUALLY HIDDEN
======================================== */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   SELECTED SUITE JUMP ANIMATION
======================================== */

.floorplan-suite.suite-jump {
    animation: suiteJump 0.7s ease;
}

@keyframes suiteJump {
    0% {
        transform: scale(1.035);
    }

    35% {
        transform: scale(1.12) translateY(-10px);
    }

    65% {
        transform: scale(1.06) translateY(3px);
    }

    100% {
        transform: scale(1.035) translateY(0);
    }
}

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

.footer-hours {
    margin-top: 24px;
}

.footer-hours h4 {
    margin-bottom: 10px;
}

.footer-hours p {
    margin-bottom: 10px;
}

.footer-hours-note {
    max-width: 300px;
    margin-top: 14px;

    font-size: 0.8rem;
    line-height: 1.6;

    opacity: 0.7;
}

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

.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;

    width: 58px;
    height: 58px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: rgba(53, 44, 41, 0.92);
    color: #f7f4ef;

    border: 1px solid rgba(185, 165, 138, 0.75);

    font-family: 'DT Nightingale', serif;
    font-size: 0.55rem;
    letter-spacing: 2px;

    text-decoration: none;

    z-index: 999;

    transition: 0.3s ease;
}

.back-to-top::first-line {
    font-size: 1rem;
}

.back-to-top:hover,
.back-to-top:focus-visible {
    background: #f7f4ef;
    color: #352c29;
    border-color: #f7f4ef;
}

.back-to-top span {
    margin-top: 1px;
}


/* MOBILE */

@media (max-width: 768px) {

    .back-to-top {
        right: 14px;
        bottom: 14px;

        width: 52px;
        height: 52px;

        font-size: 0.5rem;
    }

}

/* HEADER PHOTO PAUSE BUTTON */
.header-pause {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;

    min-height: 44px;
    padding: 10px 16px;

    background: #352c29;
    color: #f7f4ef;
    border: 1px solid #b9a58a;

    font: inherit;
    font-size: 0.7rem;
    letter-spacing: 1px;
    cursor: pointer;
}

.header-pause:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}

/* COMPACT PAUSE / PLAY CONTROLS */
.header-pause,
.carousel-pause {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 76px;
    min-height: 44px;
    padding: 10px 18px;

    background: #f7f4ef;
    color: #352c29;
    border: 1px solid #b9a58a;
    border-radius: 999px;

    font-family: 'Ranade', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* Header: bottom-left corner */
.header-pause {
    left: 20px;
    bottom: 20px;
    transform: none;
}

/* Stylists: centered below the carousel */
.carousel-pause {
    display: flex;
    width: fit-content;
    margin: 24px auto 0;
}

.header-pause:hover,
.carousel-pause:hover {
    background: rgba(247, 244, 239, 0.9);
    color: #352c29;
}

.header-pause:focus-visible,
.carousel-pause:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
    box-shadow: 0 0 0 7px #352c29;
}

/* Subtle backgrounds for both pause buttons */
.header-pause,
.carousel-pause {
    background: rgba(25, 20, 18, 0.65);
    color: #f7f4ef;
    border: 1px solid rgba(247, 244, 239, 0.65);
}

.header-pause:hover,
.carousel-pause:hover {
    background: rgba(25, 20, 18, 0.85);
    color: #f7f4ef;
}

/* ONE CENTERED, SLIDING STYLIST */
.professionals-gallery .carousel-wrapper {
    width: min(100%, 380px);
    margin-inline: auto;
}

#professionalsCarousel {
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding-bottom: 0;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

#professionalsCarousel::-webkit-scrollbar {
    display: none;
}

#professionalsCarousel .professional-card {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    margin: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

#professionalsCarousel .professional-image-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 7;
}

#professionalsCarousel .professional-image-wrap img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
}

.professionals-gallery .left-arrow {
    left: 8px;
}

.professionals-gallery .right-arrow {
    right: 8px;
}

@media (prefers-reduced-motion: reduce) {
    #professionalsCarousel {
        scroll-behavior: auto;
    }
}

/* CENTER FOOTER LOGO ON MOBILE */
@media (max-width: 700px) {
    .footer-brand {
        justify-content: center;
    }

    .footer-logo {
        margin-inline: auto;
        object-position: center;
    }
}

/* SMALLER SHARED-ROOM LABELS ON MOBILE */
@media (max-width: 700px) {
    .restroom-space,
    .breakroom-space,
    .restroom-space span,
    .breakroom-space span {
        font-size: 0.45rem;
        letter-spacing: 0;
        line-height: 1.2;
    }
}