@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap');

:root { --ink: #191a1a; --deep: #111313; --cream: #f5f2ec; --muted: #c5c0b8; --gold: #e6c894; --line: rgba(255,255,255,.18); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: hidden; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: 'DM Sans', Arial, sans-serif; }
img { height: auto; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.site-header { align-items: center; background: rgba(17,19,19,.97); border-bottom: 1px solid #454541; color: #fff; display: flex; height: 64px; justify-content: space-between; padding: 0 max(7vw, 32px); position: absolute; top: 0; width: 100%; z-index: 5; }
.brand { font-family: Georgia, serif; font-size: 18px; letter-spacing: 9px; white-space: nowrap; }
.main-nav { display: flex; gap: clamp(18px, 2.3vw, 40px); margin-left: 7vw; }
.main-nav a { color: #f8f6f1; font-size: 11px; padding: 23px 0 17px; }
.main-nav a.active { border-bottom: 2px solid var(--gold); color: var(--gold); }
.button { align-items: center; border: 1px solid var(--gold); display: inline-flex; font-size: 12px; justify-content: center; min-height: 38px; padding: 0 25px; transition: background .2s, color .2s; }
.button-light { background: var(--gold); color: #171717; }
.button-light:hover { background: #f7dfaf; }
.button-outline { color: #fff; }
.button-outline:hover { background: var(--gold); color: #171717; }
.header-cta { min-height: 34px; padding: 0 27px; }
.language-switcher { align-items: center; display: flex; gap: 5px; margin-left: 22px; margin-right: 0; }
.language-switcher label { color: #777872; font-size: 8px; letter-spacing: 1px; }
.language-switcher select { background: transparent; border: 0; color: #cbc8c0; font-size: 10px; outline: none; padding: 3px 1px; }
.language-switcher select:focus { color: #fff; }
.language-switcher option { background: #191a1a; color: #fff; }
.menu-button { display: none; font-size: 22px; }
.inner-content { background: var(--cream); min-height: calc(100vh - 115px); padding: 115px max(8vw, 30px) 60px; }
.inner-hero { background: linear-gradient(90deg, rgba(17,19,19,.9), rgba(17,19,19,.55)), url('https://images.unsplash.com/photo-1560066984-138dadb4c035?auto=format&fit=crop&w=1800&q=80') center/cover; color: #fff; margin: -55px -2vw 35px; min-height: 220px; padding: 55px 8%; }
.inner-hero h1 { font-size: clamp(42px, 5vw, 62px); margin: 0 0 10px; }
.inner-hero p:last-child { color: #ddd8d0; font-size: 14px; max-width: 520px; }
.inner-grid { display: grid; gap: 20px; }
.four-columns { grid-template-columns: repeat(4, 1fr); }
.inner-card { background: #fff; box-shadow: 0 3px 14px #ded8ce; }
.inner-card img { display: block; height: 150px; object-fit: cover; width: 100%; }
.inner-card div { padding: 18px; }
.inner-card h2, .inner-story h2, .career-panel h2, .contact-panel h2 { font-size: 24px; margin: 0 0 8px; }
.inner-card p, .inner-story p, .career-panel p, .contact-panel p { color: #5f5d59; font-size: 13px; line-height: 1.55; margin: 0 0 14px; }
.price-list { background: #fff; margin: 0 auto; max-width: 700px; padding: 10px 28px; }
.price-row { border-bottom: 1px solid #e4dfd6; display: flex; font-family: 'Playfair Display', Georgia, serif; font-size: 18px; justify-content: space-between; padding: 17px 0; }
.price-row:last-child { border: 0; }
.price-row strong { color: #936e31; font-family: 'DM Sans', Arial, sans-serif; font-size: 14px; }
.inner-gallery { display: grid; gap: 15px; grid-template-columns: repeat(4, 1fr); }
.inner-gallery img { height: 290px; object-fit: cover; width: 100%; }
.inner-story { align-items: center; background: #fff; display: grid; gap: 45px; grid-template-columns: 1fr 1fr; margin: 0 auto; max-width: 1000px; padding: 25px; }
.story-image { background: url('https://images.unsplash.com/photo-1633681926022-84c23e8cb2d6?auto=format&fit=crop&w=900&q=80') center/cover; min-height: 360px; }
.career-panel, .contact-panel { background: #fff; margin: 0 auto; max-width: 800px; padding: 45px; }
.contact-panel { display: grid; gap: 45px; grid-template-columns: 1fr 1fr; }
.hero { align-items: center; background: linear-gradient(90deg, rgba(7,9,9,.94) 0%, rgba(7,9,9,.7) 35%, rgba(7,9,9,.12) 72%), url('https://images.unsplash.com/photo-1560066984-138dadb4c035?auto=format&fit=crop&w=2200&q=85') center/cover; color: #fff; display: flex; min-height: 580px; padding: 110px max(14vw, 40px) 60px; }
.hero-copy { max-width: 500px; }
.eyebrow { color: var(--gold); font-size: 11px; font-weight: 500; letter-spacing: 4px; margin: 0 0 13px; }
h1, h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; }
h1 { font-size: clamp(46px, 5vw, 68px); line-height: .98; margin: 0 0 18px; }
h1 em { font-style: normal; }
.hero-description { font-size: 16px; margin: 0 0 26px; }
.hero-actions { display: flex; gap: 12px; }
.hero-note { color: #a9a9a5; font-size: 9px; letter-spacing: 4px; margin-top: 23px; }
.hero-note span { color: var(--gold); margin: 0 7px; }
.section-dark { background: var(--ink); color: #fff; }
.services-section { display: grid; gap: 36px; grid-template-columns: 250px 1fr; padding: 44px max(10vw, 40px); }
.services-intro h2 { font-size: 34px; margin: 0 0 13px; }
.gold-rule { background: var(--gold); height: 2px; margin: 0 0 14px; width: 45px; }
.services-intro > p:last-child { color: #d0ceca; font-size: 13px; line-height: 1.5; margin: 0; }
.service-grid { display: grid; gap: 22px; grid-template-columns: repeat(4, 1fr); }
.service-card { background: #252827; border: 1px solid #555751; border-radius: 3px; overflow: hidden; }
.service-card { color: inherit; cursor: pointer; font: inherit; padding: 0; text-align: left; width: 100%; }
.service-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.service-card img { display: block; height: 68px; object-fit: cover; opacity: .8; width: 100%; }
.service-card-body { display: flex; gap: 13px; padding: 11px 12px 13px; }
.service-icon { color: var(--gold); font-size: 27px; line-height: 1; }
.service-card h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 16px; font-weight: 400; margin: 0 0 3px; }
.service-card p { color: #d3d1cd; font-size: 11px; line-height: 1.25; margin: 0; }
.booking-strip { align-items: center; background: linear-gradient(90deg, rgba(20,20,18,.93), rgba(20,20,18,.7)), url('https://images.unsplash.com/photo-1522337660859-02fbefca4702?auto=format&fit=crop&w=1800&q=80') center/cover; color: #fff; display: grid; gap: 32px; grid-template-columns: 1.4fr 1.1fr .9fr 1.3fr; min-height: 77px; padding: 12px max(6.5vw, 34px); }
.booking-strip h2 { font-size: 27px; margin: 0; }
.strip-copy { border-left: 1px solid #6c6d68; color: #d3d0c9; font-size: 12px; line-height: 1.35; padding-left: 34px; }
.strip-quote { font-family: 'Playfair Display', Georgia, serif; font-size: 18px; font-style: italic; line-height: 1.1; margin: 0; text-align: right; }
.showcase-section { display: grid; grid-template-columns: 1.25fr 1.25fr 1.25fr 1fr; padding: 20px max(3.8vw, 25px) 16px; }
.showcase-block { min-height: 178px; padding: 0 28px; }
.showcase-block + .showcase-block { border-left: 1px solid #ddd9d1; }
.section-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 12px; }
.section-heading h2, .hours-block h2 { font-size: 21px; margin: 0; }
.section-heading a { font-size: 10px; }
.work-grid { display: grid; gap: 5px; grid-template-columns: repeat(4, 1fr); }
.work-grid img { height: 119px; object-fit: cover; width: 100%; }
.team-grid { display: grid; gap: 7px; grid-template-columns: repeat(3, 1fr); text-align: center; }
.team-grid img { height: 99px; object-fit: cover; width: 100%; }
.team-grid strong, .team-grid small { display: block; font-size: 11px; }
.team-grid small { color: #77746e; font-size: 9px; }
.review-card { background: #fff; border: 1px solid #e7e3dd; box-shadow: 0 3px 12px #d7d1c7; min-height: 116px; padding: 12px 23px; }
.stars { color: #e5ae50; letter-spacing: 2px; }
.review-card p { font-size: 11px; line-height: 1.35; margin: 5px 0; }
.review-card strong { font-size: 10px; }
.slider-dots { text-align: center; }
.slider-dots span { background: #bbb; border-radius: 50%; display: inline-block; height: 6px; margin: 8px 3px; width: 6px; }
.slider-dots span.selected { background: #111; }
.hours-block h2 { margin-bottom: 12px; }
.clock { font-family: Arial, sans-serif; font-size: 27px; vertical-align: -3px; }
.hours-block dl { border-top: 1px solid #dedad3; font-size: 11px; margin: 0; }
.hours-block dt, .hours-block dd { border-bottom: 1px solid #dedad3; display: inline-block; margin: 0; padding: 3px 0; width: 50%; }
.hours-block dd { text-align: right; }
.contact-section { background: var(--ink); color: #fff; display: grid; grid-template-columns: 1.2fr 1.1fr 1fr .43fr; }
.contact-info, .careers { align-items: flex-start; display: flex; gap: 22px; padding: 23px max(3.8vw, 25px); }
.contact-info { border-right: 1px solid #414341; }
.contact-symbol { color: var(--gold); font-size: 27px; }
.contact-section h2 { font-size: 19px; margin: 0 0 7px; }
.contact-section p { color: #d0cfcb; font-size: 11px; line-height: 1.45; margin: 0 0 10px; }
.careers { border-right: 1px solid #414341; }
.careers .button { font-size: 11px; min-height: 32px; padding: 0 16px; }
.salon-photo { background: url('https://images.unsplash.com/photo-1633681926022-84c23e8cb2d6?auto=format&fit=crop&w=800&q=80') center/cover; min-height: 136px; }
.great-people { font-family: Georgia, serif; font-size: 13px; letter-spacing: 4px; line-height: 1.8; padding: 15px 20px; text-align: center; }
.great-people .gold-rule { margin: 10px auto; }
.site-footer { align-items: center; background: #111313; border-top: 1px solid #343635; color: #918f8a; display: flex; font-size: 10px; gap: 24px; padding: 17px max(6.5vw, 34px); }
.site-footer .brand { color: #fff; }
.site-footer nav { align-items: center; display: flex; gap: 20px; margin-left: auto; }
.site-footer b { color: #fff; font-size: 15px; font-weight: 400; letter-spacing: 3px; }
#blazor-error-ui { background: #b32121; bottom: 0; color: #fff; display: none; left: 0; padding: .6rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }

@media (max-width: 1050px) {
    .main-nav { gap: 14px; margin-left: 0; }
    .services-section { padding-left: 30px; padding-right: 30px; }
    .service-grid { gap: 10px; }
    .showcase-block { padding: 0 12px; }
    .booking-strip { gap: 18px; }
}
@media (max-width: 760px) {
    .site-header { height: 57px; padding: 0 22px;     }

    .main-nav, .header-cta, .language-switcher label { display: none; }
    .menu-button { display: block; }
    .hero { min-height: 620px; padding: 110px 30px 50px; }
    .services-section, .showcase-section, .contact-section { grid-template-columns: 1fr; }
    .services-section { padding: 38px 24px; }
    .service-grid { grid-template-columns: repeat(2, 1fr); }
    .booking-strip { grid-template-columns: 1fr; padding: 26px 25px; }
    .strip-copy { border-left: 0; border-top: 1px solid #6c6d68; padding: 12px 0 0; }
    .strip-quote { display: none; }
    .showcase-section { gap: 28px; padding: 30px 18px; }
    .showcase-block { padding: 0 4px; }
    .showcase-block + .showcase-block { border-left: 0; border-top: 1px solid #ddd9d1; padding-top: 26px; }
    .contact-info, .careers { border-right: 0; border-bottom: 1px solid #414341; padding: 25px; }
    .salon-photo { min-height: 190px; }
    .great-people { padding: 25px; }
    .four-columns, .inner-gallery, .inner-story, .contact-panel { grid-template-columns: 1fr 1fr; }
    .inner-hero { margin-left: -30px; margin-right: -30px; }
    .inner-gallery img { height: 190px; }
    .inner-story, .contact-panel { gap: 20px; padding: 20px; }
    .site-footer { align-items: flex-start; flex-wrap: wrap; padding: 22px; }
    .site-footer nav { margin-left: 0; width: 100%; }
}

/* Reference-style inner pages */
.inner-site .inner-content { padding: 64px 0 0; }
.studio-page-hero {
    background: linear-gradient(90deg, rgba(8,10,10,.9), rgba(8,10,10,.48)),
        url('https://images.unsplash.com/photo-1560066984-138dadb4c035?auto=format&fit=crop&w=2200&q=85') center/cover;
    margin: 0;
    min-height: 235px;
    padding: 64px max(6.5vw, 30px) 35px;
}
.studio-page-hero h1 { font-size: clamp(38px, 4vw, 58px); max-width: 650px; }
.studio-page-hero p:last-child { font-size: 16px; line-height: 1.45; max-width: 560px; }
.reference-list { background: #fbfaf7; margin: 0 auto; max-width: 920px; padding: 12px 45px 32px; }
.reference-row { align-items: center; border-bottom: 1px solid #e4e0d8; display: grid; gap: 34px; grid-template-columns: 205px 1fr; padding: 0 0 8px; }
.reference-row + .reference-row { padding-top: 8px; }
.reference-row > img { background: #211f1b; display: block; height: 181px; object-fit: contain; width: 205px; }
.reference-copy h2 { font-size: 28px; margin: 0 0 1px; }
.reference-copy h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 18px; font-weight: 400; margin: 0 0 6px; }
.reference-copy p { color: #5b5955; font-size: 13px; line-height: 1.35; margin: 0 0 10px; max-width: 620px; }
.reference-tags { align-items: center; display: flex; gap: 35px; justify-content: flex-start; }
.reference-tags span { align-items: center; color: #4e4c49; display: inline-flex; font-size: 11px; gap: 8px; white-space: nowrap; }
.reference-tags b { color: #171918; font-size: 27px; font-weight: 400; line-height: 1; }
.team-reference-row > img { height: 210px; object-fit: contain; width: 225px; }
.team-reference-list { max-width: 920px; padding-top: 14px; }
.team-reference-row { grid-template-columns: 225px 1fr; }
.team-reference-row .button { margin: 0 0 9px; }
.reference-gallery { background: #fbfaf7; display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); padding: 24px max(3.5vw, 30px) 48px; }
.gallery-pair { border-radius: 4px; display: grid; grid-template-columns: 1fr 1fr; height: 205px; overflow: hidden; position: relative; }
.gallery-pair img { background: #211f1b; display: block; height: 100%; object-fit: contain; width: 100%; }
.gallery-pair span { align-items: center; background: rgba(15,17,17,.72); border: 1px solid #fff; border-radius: 50%; color: #fff; display: flex; font-size: 19px; height: 34px; justify-content: center; left: 50%; line-height: 1; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 34px; z-index: 1; }
.contact-reference { background: #fbfaf7; padding: 28px max(6.5vw, 30px) 48px; text-align: center; }
.contact-reference h2 { font-size: 37px; margin: 0 0 30px; }
.contact-details { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 auto 22px; max-width: 980px; }
.contact-details > div { align-items: center; border-right: 1px solid #e6e0d5; display: flex; flex-direction: column; gap: 6px; padding: 0 16px; }
.contact-details > div:last-child { border: 0; }
.contact-details b { color: #c59245; font-size: 31px; font-weight: 400; height: 39px; }
.contact-details small { color: #b7853f; font-size: 9px; letter-spacing: 4px; }
.contact-details span { font-size: 14px; line-height: 1.5; }
.contact-map { align-items: stretch; background: #d8e0d8; border-radius: 7px; display: grid; grid-template-columns: 38% 62%; margin: 22px auto 0; max-width: 1100px; min-height: 220px; overflow: hidden; text-align: left; }
.contact-map > div { background: #141817; color: #fff; padding: 28px 40px; }
.contact-map h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 29px; font-weight: 400; margin: 0 0 25px; }
.contact-map p:last-child { color: #e9e5de; font-size: 13px; line-height: 1.55; }
.contact-map > span { align-items: center; color: #74766f; display: flex; font-size: 30px; justify-content: center; letter-spacing: 2px; }

@media (max-width: 760px) {
    .inner-site .inner-content { padding-top: 57px; }
    .studio-page-hero { min-height: 270px; padding: 65px 25px 30px; }
    .studio-page-hero h1 { font-size: 37px; }
    .reference-list { padding: 10px 18px 24px; }
    .reference-row, .team-reference-row { gap: 16px; grid-template-columns: 100px 1fr; }
    .reference-row > img, .team-reference-row > img { height: 125px; width: 100px; }
    .reference-copy h2 { font-size: 21px; }
    .reference-copy h3 { font-size: 15px; }
    .reference-copy p { font-size: 11px; }
    .reference-tags { flex-wrap: wrap; gap: 8px 15px; }
    .reference-tags b { font-size: 20px; }
    .reference-tags span { font-size: 9px; gap: 4px; }
    .reference-gallery { gap: 10px; grid-template-columns: repeat(2, 1fr); padding: 16px 15px 30px; }
    .gallery-pair { height: 145px; }
    .contact-details { gap: 18px 0; grid-template-columns: repeat(2, 1fr); }
    .contact-details > div:nth-child(2) { border: 0; }
    .contact-details > div:nth-child(3) { border-top: 1px solid #e6e0d5; padding-top: 16px; }
    .contact-details > div:nth-child(4) { border-top: 1px solid #e6e0d5; padding-top: 16px; }
    .contact-map { grid-template-columns: 1fr; }
    .contact-map > span { min-height: 130px; }
}

/* Home page composition */
.hero { min-height: 240px; padding: 75px max(15vw, 40px) 30px; }
.hero-copy { max-width: 510px; }
.hero h1 { font-size: clamp(40px, 4vw, 54px); margin-bottom: 10px; }
.hero-description { font-size: 13px; margin: 0; }
.hero-tagline { color: #e7e3da; font-family: Georgia, serif; font-size: 14px; letter-spacing: 3px; line-height: 1.35; margin-left: auto; text-align: center; }
.hero-tagline span { color: #fff; }
.hero-tagline .gold-rule { margin: 12px auto 0; }
.services-section { display: block; padding: 7px max(15vw, 40px) 8px; }
.services-intro { text-align: center; }
.services-intro .eyebrow { display: none; }
.services-intro h2 { font-size: 29px; margin: 0 0 1px; }
.services-intro > p:last-child { font-size: 11px; margin-bottom: 8px; }
.service-grid { display: flex; flex-direction: column; gap: 6px; }
.service-card { align-items: stretch; display: grid; grid-template-columns: 250px 1fr; min-height: 78px; }
.service-card img { height: 100%; min-height: 78px; }
.service-card-body { align-items: center; padding: 8px 20px; }
.service-card h3 { font-size: 19px; margin-bottom: 2px; }
.service-card p { font-size: 11px; margin-bottom: 1px; }
.service-card small { color: #d3d1cd; display: block; font-size: 10px; line-height: 1.2; }
.service-icon { display: none; }
.team-section { background: var(--cream); display: grid; gap: 35px; grid-template-columns: 220px 1fr; padding: 8px max(15vw, 40px); }
.team-title h2, .reviews-title h2 { font-size: 25px; margin: 0; }
.team-title .gold-rule, .reviews-title .gold-rule { margin-top: 8px; }
.team-list { display: flex; flex-direction: column; gap: 4px; }
.team-row { align-items: center; background: #fff; border: 1px solid #ddd9d1; display: grid; gap: 18px; grid-template-columns: 245px 200px 1fr; min-height: 62px; }
.team-row img { height: 62px; object-fit: cover; width: 245px; }
.team-row strong, .team-row small { display: block; }
.team-row strong { font-family: Georgia, serif; font-size: 18px; }
.team-row small { color: #5f5d59; font-size: 14px; }
.team-row p { color: #5f5d59; font-size: 11px; line-height: 1.3; margin: 0; padding-right: 20px; }
.reviews-section { display: grid; gap: 35px; grid-template-columns: 220px 1fr auto; padding: 8px max(15vw, 40px); }
.review-grid { display: grid; gap: 26px; grid-template-columns: repeat(3, 1fr); }
.reviews-section .review-card { background: #191d1d; border-color: #414442; box-shadow: none; color: #fff; min-height: 67px; padding: 7px 17px; }
.reviews-section .review-card p { color: #f3f1eb; font-size: 10px; margin: 3px 0; }
.reviews-section .review-card strong { color: #fff; font-size: 10px; }
.reviews-link { align-self: center; color: #fff; font-size: 10px; white-space: nowrap; }
.contact-section { align-items: center; display: grid; gap: 20px; grid-template-columns: 1.1fr 1.4fr 1.3fr 1.2fr 1fr; padding: 8px max(15vw, 40px); }
.contact-section .brand { color: #fff; }
.contact-section p { color: #eeeae2; font-size: 10px; margin: 0; white-space: nowrap; }
.footer-social { color: #fff; font-size: 14px; text-align: right; white-space: nowrap; }
.site-footer { display: none; }
.service-modal-backdrop { align-items: center; background: rgba(0,0,0,.72); display: flex; inset: 0; justify-content: center; padding: 24px; position: fixed; z-index: 20; }
.service-modal { background: var(--cream); box-shadow: 0 18px 60px rgba(0,0,0,.45); color: var(--ink); max-height: calc(100vh - 48px); max-width: 570px; overflow-y: auto; padding: 38px 42px 34px; position: relative; width: 100%; }
.service-modal .eyebrow { color: #9b773e; }
.service-modal h2 { font-size: 34px; margin: 0 0 12px; }
.service-modal-intro { color: #5f5d59; font-size: 14px; line-height: 1.55; margin: 0 0 18px; }
.service-modal h3 { font-family: 'DM Sans', Arial, sans-serif; font-size: 13px; margin: 0 0 8px; text-transform: uppercase; }
.service-modal ul { border-top: 1px solid #d8d1c5; list-style: none; margin: 0 0 20px; padding: 0; }
.service-modal li { border-bottom: 1px solid #d8d1c5; color: #4f4d49; font-size: 13px; padding: 9px 0 9px 20px; position: relative; }
.service-modal li::before { color: #ae8440; content: '✓'; font-weight: 600; left: 0; position: absolute; }
.service-modal-result { background: #1b1e1d; color: #fff; display: grid; gap: 5px; margin-bottom: 22px; padding: 14px 17px; }
.service-modal-result strong { color: var(--gold); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.service-modal-result span { font-family: 'Playfair Display', Georgia, serif; font-size: 16px; line-height: 1.35; }
.service-modal-close { background: transparent; border: 0; color: #77736b; cursor: pointer; font-size: 30px; line-height: 1; padding: 0; position: absolute; right: 18px; top: 14px; }
.service-modal-close:hover { color: var(--ink); }

/* Reference-style home page */
.salon-home { background: #f7f5f0; color: #171817; }
.home-header { align-items: center; background: rgba(9, 11, 11, .88); color: #fff; display: flex; height: 64px; justify-content: space-between; padding: 0 5.5%; position: absolute; width: 100%; z-index: 2; }
.home-brand { font-family: Georgia, serif; font-size: 17px; letter-spacing: 8px; line-height: 1; white-space: nowrap; }
.home-brand span { display: block; font-family: 'DM Sans', Arial, sans-serif; font-size: 7px; letter-spacing: 3px; margin-top: 7px; text-align: center; }
.home-header nav { display: flex; gap: clamp(20px, 3vw, 45px); margin-left: auto; margin-right: 7%; }
.home-header nav a { color: #eee; font-size: 11px; padding: 24px 0 18px; }
.home-header nav a.current { border-bottom: 2px solid var(--gold); color: var(--gold); }
.home-actions { align-items: center; display: flex; gap: 20px; }
.language-pill { background: transparent; border: 0; color: #fff; cursor: pointer; font-size: 15px; }
.language-pill span { font-size: 11px; margin-left: 4px; }
.home-booking { background: #eed19c; color: #25211a; display: inline-flex; font-size: 10px; letter-spacing: .3px; min-height: 32px; align-items: center; justify-content: center; padding: 0 22px; transition: background .2s; }
.home-booking:hover { background: #ffe1a9; }
.salon-hero { background: linear-gradient(90deg, rgba(7, 9, 9, .9), rgba(7, 9, 9, .58) 43%, rgba(7, 9, 9, .12)), url('https://images.unsplash.com/photo-1560066984-138dadb4c035?auto=format&fit=crop&w=2200&q=90') center/cover; color: #fff; min-height: 454px; padding: 151px 6% 20px; position: relative; }
.salon-hero-copy h1 { font-size: clamp(42px, 4.1vw, 62px); line-height: 1.03; margin: 0 0 14px; }
.salon-hero-copy > p:not(.salon-eyebrow) { color: #eee; font-size: 14px; line-height: 1.35; margin: 0 0 17px; }
.salon-eyebrow { color: #cda45d; font-size: 9px; font-weight: 600; letter-spacing: 4px; margin: 0 0 10px; }
.hero-booking { min-height: 32px; }
.hero-slogan { bottom: 55px; color: #f5ddb0; font-family: Georgia, serif; font-size: 28px; font-style: italic; line-height: .9; position: absolute; right: 5%; text-align: center; transform: rotate(-8deg); }
.hero-slogan span { color: #fff; }
.hero-highlights { bottom: 16px; display: flex; gap: clamp(26px, 4vw, 62px); left: 6%; position: absolute; }
.hero-highlights span { color: #e5e2dd; font-size: 10px; line-height: 1.35; }
.hero-highlights b { color: #fff; float: left; font-size: 29px; font-weight: 400; line-height: .9; margin-right: 10px; }
.salon-services { padding: 15px 3.2% 25px; text-align: center; }
.salon-services h2, .salon-contact h2 { font-size: 32px; margin: 0 0 3px; }
.section-lead { color: #514f4b; font-size: 12px; margin: 0 auto 12px; }
.service-cards { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); }
.salon-service-card { background: #fff; text-align: left; }
.salon-service-card img { display: block; height: 112px; object-fit: cover; width: 100%; }
.salon-service-card div { padding: 7px 11px 9px; }
.salon-service-card h3 { font-family: Georgia, serif; font-size: 14px; font-weight: 400; margin: 0 0 3px; }
.salon-service-card p { color: #696661; font-size: 10px; line-height: 1.25; margin: 0; }
.salon-team { background: #101313; color: #fff; display: grid; gap: 35px; grid-template-columns: 245px 1fr; padding: 20px 5.5%; }
.team-intro h2 { font-size: 30px; line-height: 1.05; margin: 0 0 10px; }
.team-intro > p:not(.salon-eyebrow) { color: #d7d5d0; font-size: 11px; line-height: 1.35; margin: 0 0 14px; }
.team-carousel { align-items: center; display: flex; gap: 9px; min-width: 0; }
.team-cards { display: grid; flex: 1; gap: 9px; grid-template-columns: repeat(4, 1fr); min-width: 0; }
.person-card { background: #252827; min-width: 0; position: relative; }
.person-card img { display: block; filter: saturate(.78); height: 178px; object-fit: cover; width: 100%; }
.person-card div { bottom: 8px; left: 11px; position: absolute; text-shadow: 0 1px 3px #000; }
.person-card strong, .person-card span { display: block; font-size: 11px; }
.person-card span { font-size: 9px; }
.team-arrow { background: transparent; border: 1px solid #d9bf84; border-radius: 50%; color: #fff; cursor: pointer; flex: 0 0 32px; font-size: 25px; height: 32px; line-height: 20px; padding: 0; width: 32px; }
.team-arrow:disabled { border-color: #555957; color: #5c605d; cursor: not-allowed; }
.salon-gallery { display: grid; grid-template-columns: repeat(5, 1fr); }
.salon-gallery img { display: block; filter: saturate(.78); height: 155px; object-fit: cover; width: 100%; }
.salon-contact { display: grid; gap: 45px; grid-template-columns: 1fr 1.35fr; padding: 23px 5.5%; }
.salon-contact > div:first-child { padding-top: 3px; }
.salon-contact h2 { font-size: 30px; }
.salon-contact p:not(.salon-eyebrow) { font-size: 12px; line-height: 1.4; margin: 0 0 12px; }
.salon-contact dl { display: grid; font-size: 11px; grid-template-columns: 25px 1fr; line-height: 1.4; margin: 0; }
.salon-contact dt { font-size: 17px; }
.salon-contact dd { margin: 0 0 7px; }
.map-placeholder { align-items: center; background: linear-gradient(135deg, #dfe8e3 25%, #c9d9d9 25%, #c9d9d9 27%, #e9e6d8 27%, #e9e6d8 58%, #cddbd9 58%); display: flex; flex-direction: column; justify-content: center; min-height: 200px; position: relative; }
.map-placeholder::after { border: 1px solid rgba(72, 118, 119, .2); content: ''; inset: 18px; position: absolute; transform: rotate(-12deg); }
.map-placeholder span { font-size: 35px; z-index: 1; }
.map-placeholder strong { background: #fff; box-shadow: 0 2px 7px #8885; font-size: 12px; padding: 8px 14px; z-index: 1; }
.salon-footer { align-items: center; background: #101313; color: #bbb; display: flex; font-size: 10px; gap: 15%; padding: 18px 5.5%; }
.salon-footer nav { display: flex; gap: 28px; }
.salon-footer > span { color: #fff; margin-left: auto; }
.salon-footer .footer-social { margin-left: auto; }
.salon-footer .footer-legal { color: #fff; }

@media (min-width: 1400px) {
    .salon-hero { min-height: clamp(454px, 42vw, 650px); padding-left: clamp(6%, 8vw, 12%); }
    .salon-hero-copy h1 { font-size: clamp(62px, 4.2vw, 82px); }
    .salon-hero-copy > p:not(.salon-eyebrow) { font-size: clamp(14px, 1.1vw, 18px); }
    .salon-services { padding-left: clamp(3.2%, 7vw, 10%); padding-right: clamp(3.2%, 7vw, 10%); }
    .salon-service-card img { height: clamp(112px, 10vw, 190px); }
    .salon-service-card h3 { font-size: clamp(14px, 1.1vw, 20px); }
    .salon-service-card p { font-size: clamp(10px, .78vw, 14px); }
    .salon-team, .salon-contact { padding-left: clamp(5.5%, 9vw, 13%); padding-right: clamp(5.5%, 9vw, 13%); }
    .person-card img { height: clamp(178px, 17vw, 270px); }
    .salon-gallery img { height: clamp(155px, 15vw, 250px); }
    .map-placeholder { min-height: clamp(200px, 20vw, 320px); }
}

@media (min-width: 761px) and (max-width: 1100px) {
    .home-header { padding-left: 3%; padding-right: 3%; }
    .home-header nav { gap: 16px; margin-right: 3%; }
    .home-header nav a { font-size: 10px; }
    .salon-team { gap: 20px; grid-template-columns: 205px 1fr; }
    .team-cards { gap: 6px; }
    .person-card img { height: 155px; }
    .salon-contact { gap: 25px; }
}

@media (max-width: 520px) {
    .home-header { padding: 0 16px; }
    .home-brand { font-size: 14px; letter-spacing: 6px; }
    .home-booking { padding-left: 13px; padding-right: 13px; }
    .salon-hero-copy h1 { font-size: 38px; }
    .hero-highlights span:nth-child(n+4) { display: none; }
    .service-cards { gap: 8px; }
    .salon-service-card img { height: 90px; }
    .salon-service-card div { padding: 6px 8px 8px; }
    .salon-service-card h3 { font-size: 12px; }
    .salon-service-card p { font-size: 9px; }
    .team-cards { gap: 6px; }
    .person-card img { height: 135px; }
    .team-arrow { flex-basis: 27px; height: 27px; width: 27px; }
}

/* Long-form reference layout */
.salon-home { min-width: 0; overflow: hidden; }
.salon-hero {
    align-items: center;
    display: flex;
    min-height: 100vh;
    min-height: 100svh;
    padding-bottom: 108px;
    padding-top: 120px;
}
.salon-hero-copy { position: relative; z-index: 1; }
.salon-hero-copy h1 { max-width: 700px; }
.hero-slogan { z-index: 1; }
.hero-highlights { align-items: center; }
.salon-services {
    background: #f7f5f0;
    padding-bottom: clamp(42px, 5vw, 72px);
    padding-top: clamp(34px, 4vw, 58px);
}
.salon-services h2, .salon-contact h2 { color: #171817; }
.service-cards { margin: 0 auto; max-width: 1500px; }
.salon-team {
    min-height: 390px;
    padding-bottom: clamp(34px, 4vw, 58px);
    padding-top: clamp(34px, 4vw, 58px);
}
.team-intro { align-self: center; }
.team-carousel { align-self: center; }
.salon-gallery { background: #101313; }
.salon-contact {
    background: #f7f5f0;
    padding-bottom: clamp(42px, 5vw, 75px);
    padding-top: clamp(42px, 5vw, 75px);
}
.salon-footer { min-height: 78px; }

@media (min-width: 761px) {
    .salon-hero-copy { margin-left: clamp(0px, 2vw, 35px); }
    .salon-services { min-height: 400px; }
    .salon-contact > div { align-self: center; }
}

@media (max-width: 760px) {
    .salon-hero {
        align-items: flex-start;
        min-height: 100vh;
        min-height: 100svh;
        padding-top: 125px;
    }
    .salon-services { padding-bottom: 35px; padding-top: 32px; }
    .salon-team { min-height: 0; }
}

@media (max-width: 760px) {
    .home-header { height: 57px; padding: 0 22px; }
    .home-header nav, .home-actions .language-pill { display: none; }
    .home-actions { margin-left: auto; }
    .salon-hero { min-height: 580px; padding: 125px 30px 25px; }
    .hero-slogan { bottom: 95px; font-size: 23px; right: 9%; }
    .hero-highlights { bottom: 20px; gap: 12px; left: 30px; right: 20px; }
    .hero-highlights span { font-size: 8px; }
    .hero-highlights b { font-size: 21px; margin-right: 4px; }
    .service-cards { grid-template-columns: repeat(2, 1fr); }
    .salon-service-card img { height: 105px; }
    .salon-team { display: block; padding: 26px 24px; }
    .team-intro { margin-bottom: 18px; }
    .team-cards { grid-template-columns: repeat(2, 1fr); }
    .person-card img { height: 155px; }
    .salon-gallery { grid-template-columns: repeat(3, 1fr); }
    .salon-gallery img { height: 100px; }
    .salon-gallery img:nth-child(n+4) { display: none; }
    .salon-contact { display: block; padding: 30px 24px; }
    .map-placeholder { margin-top: 25px; }
    .salon-footer { align-items: flex-start; flex-wrap: wrap; gap: 18px; }
    .salon-footer nav { order: 3; width: 100%; }
    .salon-footer .footer-social { margin-left: auto; }
    .salon-footer .footer-legal { order: 4; width: 100%; }
}

/* Service and team reference pages */
.reference-page { background: #111414; color: #fff; display: flex; flex-direction: column; min-height: 100vh; }
.reference-header { align-items: center; background: rgba(9, 11, 11, .96); display: flex; height: 64px; justify-content: space-between; padding: 0 5.3%; position: sticky; top: 0; z-index: 10; }
.reference-header nav { display: flex; gap: clamp(22px, 3vw, 48px); margin-left: auto; margin-right: 6%; }
.reference-header nav a { color: #f5f3ef; font-size: 12px; padding: 22px 0 17px; }
.reference-header nav a.current { border-bottom: 2px solid var(--gold); color: var(--gold); }
.reference-actions { align-items: center; display: flex; gap: 22px; font-size: 14px; }
.reference-page-hero { align-items: center; background-position: center; background-size: cover; display: flex; justify-content: space-between; min-height: 315px; padding: 50px 5.3%; position: relative; }
.reference-page-hero::before { background: linear-gradient(90deg, rgba(6, 8, 8, .9), rgba(6, 8, 8, .4) 55%, rgba(6, 8, 8, .15)); content: ''; inset: 0; position: absolute; }
.reference-page-hero > div { position: relative; z-index: 1; }
.services-hero { background-image: url('https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?auto=format&fit=crop&w=2200&q=90'); }
.team-hero { background-image: url('https://images.unsplash.com/photo-1560066984-138dadb4c035?auto=format&fit=crop&w=2200&q=90'); }
.gallery-hero { background-image: url('https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?auto=format&fit=crop&w=2200&q=90'); }
.contact-hero { background-image: url('https://images.unsplash.com/photo-1633681926022-84c23e8cb2d6?auto=format&fit=crop&w=2200&q=90'); }
.reference-page-hero h1 { font-size: clamp(44px, 5vw, 70px); line-height: .98; margin: 0 0 13px; }
.reference-page-hero p:not(.salon-eyebrow) { font-size: 16px; line-height: 1.35; margin: 0; }
.reference-script { color: #eed19c; font-family: Georgia, serif; font-size: clamp(30px, 4vw, 52px); font-style: italic; line-height: .9; margin-right: 5%; text-align: center; transform: rotate(-8deg); }
.reference-rows { background: #111414; }
.reference-row { border-top: 1px solid #7e6944; display: grid; grid-template-columns: 1fr 1fr; min-height: 280px; }
.reference-row.image-right img { grid-column: 2; grid-row: 1; }
.reference-row.image-right .reference-copy { grid-column: 1; grid-row: 1; }
.reference-row img { display: block; filter: saturate(.78); height: 100%; min-height: 280px; object-fit: cover; width: 100%; }
.reference-copy { align-self: center; padding: 34px 5.3%; }
.reference-number { color: #d7b475; display: block; font-size: 10px; letter-spacing: 4px; margin-bottom: 9px; }
.reference-copy h2 { font-size: clamp(26px, 2.7vw, 40px); margin: 0 0 4px; }
.reference-copy h3 { color: #eee; font-family: Georgia, serif; font-size: 18px; font-weight: 400; margin: 0 0 12px; }
.reference-copy p { color: #d1d0cb; font-size: 14px; line-height: 1.4; margin: 0 0 17px; max-width: 570px; }
.reference-copy > a { color: #e8c47c; font-size: 12px; }
.specialties > span { color: #d7b475; display: block; font-size: 9px; letter-spacing: 2px; margin-bottom: 8px; }
.specialties div { display: flex; flex-wrap: wrap; gap: 9px; }
.specialties b { background: #292c2c; border: 1px solid #414544; border-radius: 4px; color: #eee; font-size: 10px; font-weight: 400; padding: 7px 12px; }
.reference-footer { align-items: center; background: #0c1010; display: flex; gap: 13%; min-height: 110px; padding: 25px 5.3%; }
.reference-footer nav { display: flex; gap: 28px; }
.reference-footer nav a, .reference-footer > span { color: #e5e2dc; font-size: 11px; }
.reference-footer > span { margin-left: auto; }
.footer-social { align-items: center; display: flex; gap: 16px; line-height: 1; }
.footer-social a { align-items: center; color: inherit; display: inline-flex; font-size: 25px; height: 54px; justify-content: center; text-decoration: none; width: 54px; }
.footer-social svg { fill: none; height: 34px; overflow: visible; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 34px; }
.footer-social a:nth-child(1) svg { height: 34px; width: 34px; }
.footer-social a:nth-child(2) { font-size: 36px; }
.footer-social a:nth-child(3) svg { height: 36px; width: 36px; }
.footer-social a:nth-child(4) svg { height: 38px; width: 38px; }
.footer-social a:nth-child(5) svg { height: 35px; width: 35px; }
.footer-social svg .icon-fill { fill: currentColor; stroke: none; }
.footer-social a:nth-child(2), .footer-social a:nth-child(4) { font-family: Arial, sans-serif; font-weight: 700; }
.footer-social a:nth-child(3) svg, .footer-social a:nth-child(5) svg { fill: currentColor; stroke: none; }
.footer-social a:nth-child(1) { color: #d62976; }
.footer-social a:nth-child(1) .instagram-outline { stroke: url(#instagram-gradient-home); }
.reference-footer .footer-social a:nth-child(1) .instagram-outline { stroke: url(#instagram-gradient-studio); }
.footer-social a:nth-child(2) { color: #1877f2; }
.footer-social a:nth-child(3) { color: #fff; }
.footer-social a:nth-child(3) .tiktok-accent-cyan { fill: #25f4ee; }
.footer-social a:nth-child(3) .tiktok-accent-pink { fill: #fe2c55; }
.footer-social a:nth-child(3) .tiktok-main { fill: #fff; }
.footer-social a:nth-child(4) { color: #ff0000; }
.footer-social a:nth-child(4) svg { fill: #ff0000; stroke: none; }
.footer-social a:nth-child(4) .youtube-play { fill: #fff; }
.footer-social a:nth-child(5) { color: #25d366; }
.footer-social a:nth-child(5) .whatsapp-bubble { fill: none; stroke: #25d366; stroke-width: 1.7; }
.footer-social a:nth-child(5) .whatsapp-phone { fill: #25d366; }
.footer-social a:hover { color: var(--gold); }
.footer-legal { align-items: center; display: flex; gap: 10px; white-space: nowrap; }
.footer-legal a { color: inherit; font-size: 10px; text-decoration: none; }
.footer-legal a:hover { color: var(--gold); }

.booking-modal-backdrop { align-items: center; background: rgba(8, 10, 10, .78); display: flex; inset: 0; justify-content: center; padding: 24px; position: fixed; z-index: 100; }
.booking-modal { background: #fff; box-shadow: 0 20px 70px rgba(0, 0, 0, .35); color: #171817; max-height: min(90vh, 760px); max-width: 720px; overflow-y: auto; padding: 34px 38px 30px; position: relative; width: 100%; }
.booking-modal-close { background: transparent; border: 0; color: #6e6b65; cursor: pointer; font-size: 30px; line-height: 1; padding: 4px 8px; position: absolute; right: 14px; top: 12px; }
.booking-modal-header { border-bottom: 1px solid #e4e0d8; margin-bottom: 22px; padding-right: 30px; }
.booking-modal-header h2 { font-family: Georgia, serif; font-size: 38px; font-weight: 400; margin: 4px 0 8px; }
.booking-modal-header > p:last-child { color: #6d6962; font-size: 13px; margin: 0 0 20px; }
.booking-modal-fields { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.booking-modal-fields label { color: #4f4b45; display: grid; font-size: 10px; gap: 6px; letter-spacing: .6px; text-transform: uppercase; }
.booking-modal-fields input { border: 1px solid #d8d2c8; border-radius: 0; color: #171817; font: inherit; min-height: 38px; padding: 9px 10px; text-transform: none; }
.booking-modal-section { margin-top: 24px; }
.booking-modal-section h3 { color: #25231f; font-family: Georgia, serif; font-size: 20px; font-weight: 400; margin: 0 0 12px; }
.booking-team-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
.booking-team-option { align-items: center; border: 1px solid #ded8cd; cursor: pointer; display: flex; gap: 8px; min-width: 0; padding: 8px; }
.booking-team-option.selected { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.booking-team-option input { accent-color: #b7853f; margin: 0; }
.booking-team-option img { height: 42px; object-fit: cover; width: 42px; }
.booking-team-option span { display: grid; min-width: 0; }
.booking-team-option strong, .booking-team-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.booking-team-option strong { font-size: 11px; }
.booking-team-option small { color: #777168; font-size: 9px; margin-top: 3px; }
.booking-date-heading { align-items: center; display: flex; justify-content: space-between; }
.booking-date-heading h3 { font-family: 'DM Sans', Arial, sans-serif; font-size: 14px; font-weight: 600; margin: 0; text-transform: capitalize; }
.booking-date-heading button { background: #f7f5f0; border: 1px solid #ded8cd; color: #4f4b45; cursor: pointer; font-size: 22px; height: 32px; width: 34px; }
.booking-date-heading .booking-date-arrow { align-items: center; display: inline-flex; justify-content: center; line-height: 1; padding: 0; }
.booking-date-arrow span { display: block; transform: translateY(-1px); }
.booking-slots { display: grid; gap: 8px; grid-template-columns: repeat(5, 1fr); margin-top: 12px; }
.booking-slot { background: #fff; border: 1px solid #c9bda9; color: #4f4b45; cursor: pointer; min-height: 36px; }
.booking-slot.selected { background: #eed19c; border-color: #b7853f; color: #25211a; }
.booking-slot:disabled { background: #ece9e4; border-color: #ece9e4; color: #aaa39a; cursor: not-allowed; text-decoration: line-through; }
.booking-modal-actions { border-top: 1px solid #e4e0d8; display: flex; gap: 12px; justify-content: flex-end; margin-top: 26px; padding-top: 20px; }
.booking-modal-actions button { min-height: 38px; padding: 0 20px; }
.booking-cancel { background: #fff; border: 1px solid #cfc8bd; color: #514d46; cursor: pointer; }
.booking-modal-actions .home-booking { border: 0; cursor: pointer; }
.booking-modal-actions .home-booking:disabled { background: #d7d2ca; color: #948e85; cursor: not-allowed; opacity: .8; }
.reference-gallery { background: #f7f5f0; display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); padding: 24px 5.3% 48px; }
.reference-gallery img { background: #211f1b; display: block; height: 270px; object-fit: cover; width: 100%; }
.reference-contact { background: #f7f5f0; color: #171817; padding: 42px 5.3% 60px; text-align: center; }
.reference-contact h2 { font-size: 37px; margin: 0 0 30px; }
.reference-contact-details { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 auto 28px; max-width: 980px; }
.reference-contact-details > div { align-items: center; border-right: 1px solid #e6e0d5; display: flex; flex-direction: column; gap: 6px; padding: 0 16px; }
.reference-contact-details > div:last-child { border: 0; }
.reference-contact-details b { color: #c59245; font-size: 31px; font-weight: 400; height: 39px; }
.reference-contact-details small { color: #b7853f; font-size: 9px; letter-spacing: 4px; }
.reference-contact-details span { font-size: 14px; line-height: 1.5; }

@media (max-width: 760px) {
    .reference-header { height: 58px; padding: 0 20px; }
    .reference-header nav { gap: 12px; margin: 0 0 0 auto; }
    .reference-header nav a { font-size: 9px; padding: 21px 0 15px; }
    .reference-header .home-brand { display: none; }
    .reference-actions { display: none; }
    .reference-page-hero { min-height: 390px; padding: 55px 25px 35px; }
    .reference-page-hero h1 { font-size: 42px; }
    .reference-page-hero p:not(.salon-eyebrow) { font-size: 13px; }
    .reference-script { font-size: 29px; margin-right: 0; }
    .reference-row, .reference-row.image-right { display: flex; flex-direction: column; }
    .reference-row img, .reference-row.image-right img { height: 250px; min-height: 0; order: 0; }
    .reference-copy, .reference-row.image-right .reference-copy { order: 1; padding: 27px 25px 31px; }
    .reference-copy h2 { font-size: 30px; }
    .reference-copy p { font-size: 13px; }
    .reference-footer { align-items: flex-start; flex-wrap: wrap; gap: 18px; padding: 25px; }
    .reference-footer nav { gap: 14px; order: 3; width: 100%; }
    .reference-footer > span { margin-left: auto; }
    .footer-social { gap: 7px; }
    .footer-social a { font-size: 20px; height: 46px; width: 46px; }
    .footer-social a:nth-child(2) { font-size: 31px; }
    .footer-social a:nth-child(1) svg { height: 29px; width: 29px; }
    .footer-social a:nth-child(3) svg { height: 31px; width: 31px; }
    .footer-social a:nth-child(4) svg { height: 33px; width: 33px; }
    .footer-social a:nth-child(5) svg { height: 30px; width: 30px; }
    .footer-legal { width: 100%; }
    .booking-modal-backdrop { align-items: flex-start; padding: 12px; }
    .booking-modal { max-height: calc(100vh - 24px); padding: 28px 20px 22px; }
    .booking-modal-header h2 { font-size: 31px; }
    .booking-modal-fields, .booking-team-grid { grid-template-columns: 1fr 1fr; }
    .booking-team-option { align-items: flex-start; flex-direction: column; }
    .booking-team-option img { height: 54px; width: 54px; }
    .booking-slots { grid-template-columns: repeat(3, 1fr); }
    .booking-modal-actions { justify-content: stretch; }
    .booking-modal-actions button { flex: 1; padding: 0 10px; }
    .reference-gallery { gap: 10px; grid-template-columns: repeat(2, 1fr); padding: 16px 15px 30px; }
    .reference-gallery img { height: 190px; }
    .reference-contact { padding: 30px 20px 40px; }
    .reference-contact h2 { font-size: 30px; }
    .reference-contact-details { gap: 18px 0; grid-template-columns: repeat(2, 1fr); }
    .reference-contact-details > div:nth-child(2) { border: 0; }
    .reference-contact-details > div:nth-child(3), .reference-contact-details > div:nth-child(4) { border-top: 1px solid #e6e0d5; padding-top: 16px; }
}

@media (min-width: 761px) {
    .home-header {
        height: 64px;
        min-height: 64px;
        padding-left: 5.3%;
        padding-right: 5.3%;
    }
    .home-header nav {
        gap: clamp(22px, 3vw, 48px);
        margin-left: auto;
        margin-right: 6%;
    }
    .home-header nav a { font-size: 12px; padding: 22px 0 17px; }
    .home-header .home-brand { font-size: 17px; }
    .home-header .home-brand span { font-size: 7px; }
    .salon-hero { padding-top: 120px; }
}

@media (max-width: 760px) {
    .hero { min-height: 360px; padding: 100px 30px 35px; }
    .hero-tagline { display: none; }
    .service-card { grid-template-columns: 100px 1fr; }
    .service-card-body { padding: 8px 11px; }
    .service-card h3 { font-size: 16px; }
    .team-section, .reviews-section { display: block; padding: 20px 24px; }
    .team-title, .reviews-title { margin-bottom: 14px; }
    .team-row { grid-template-columns: 90px 1fr; }
    .team-row img { height: 75px; width: 90px; }
    .team-row p { display: none; }
    .review-grid { grid-template-columns: 1fr; }
    .reviews-link { display: block; margin-top: 12px; }
    .contact-section { grid-template-columns: 1fr 1fr; padding: 18px 24px; }
    .contact-section p { white-space: normal; }
    .service-modal { padding: 32px 24px 25px; }
    .service-modal h2 { font-size: 29px; }
}

/* Reference page content layout */
.reference-page { background: #f7f5f0; color: #171817; }
.reference-rows { background: #f7f5f0; margin: 0 auto; max-width: 1180px; padding: 18px 5.3% 42px; }
.reference-row,
.reference-row.image-right { align-items: center; background: #fff; border-top: 0; border-bottom: 1px solid #e4e0d8; display: grid; gap: 44px; grid-template-columns: 270px 1fr; min-height: 300px; padding: 22px 34px; }
.reference-row + .reference-row { padding-top: 22px; }
.reference-row.image-right img { grid-column: 1; grid-row: 1; }
.reference-row.image-right .reference-copy { grid-column: 2; grid-row: 1; }
.reference-row > img,
.reference-row.image-right > img { background: #211f1b; display: block; filter: none; height: 270px; min-height: 270px; object-fit: contain; width: 270px; }
.reference-copy { align-self: center; padding: 0; }
.reference-copy h2 { color: #171817; font-size: clamp(28px, 3vw, 42px); margin: 0 0 4px; }
.reference-copy h3 { color: #4e4c49; font-size: 20px; margin: 0 0 12px; }
.reference-copy p { color: #5b5955; font-size: 14px; line-height: 1.5; margin: 0 0 18px; max-width: 620px; }
.reference-copy .reference-button { align-items: center; background: #eed19c; color: #25211a; display: inline-flex; font-size: 10px; min-height: 36px; margin-bottom: 18px; padding: 0 18px; }
.reference-copy .reference-button:hover { background: #ffe1a9; }
.specialties > span { color: #b7853f; display: block; font-size: 9px; letter-spacing: 2px; margin-bottom: 8px; }
.specialties div { display: flex; flex-wrap: wrap; gap: 8px; }
.specialties b { background: #f7f5f0; border: 1px solid #ded7ca; border-radius: 0; color: #4e4c49; font-size: 10px; font-weight: 400; padding: 7px 10px; }
.reference-number { color: #b7853f; }
.reference-footer { background: #111414; color: #fff; }
.reference-footer { margin-top: auto; }

@media (max-width: 760px) {
    .reference-rows { padding: 10px 15px 28px; }
    .reference-row,
    .reference-row.image-right { display: grid; gap: 18px; grid-template-columns: 110px 1fr; min-height: 0; padding: 15px; }
    .reference-row.image-right img,
    .reference-row.image-right .reference-copy { grid-column: auto; grid-row: auto; }
    .reference-row > img,
    .reference-row.image-right > img { height: 110px; min-height: 110px; width: 110px; }
    .reference-copy h2 { font-size: 22px; }
    .reference-copy h3 { font-size: 15px; }
    .reference-copy p { font-size: 11px; margin-bottom: 12px; }
    .reference-copy .reference-button { font-size: 9px; min-height: 32px; margin-bottom: 12px; padding: 0 10px; }
    .specialties b { font-size: 9px; padding: 5px 7px; }
}

@media (max-width: 760px) {
    .home-header { align-items: center; min-height: 57px; }
    .home-actions { flex: 0 0 auto; }
    .home-actions .home-booking { min-height: 34px; white-space: nowrap; }
    .salon-contact { display: grid; gap: 24px; grid-template-columns: 1fr; min-width: 0; padding: 32px 24px 40px; }
    .salon-contact > div { min-width: 0; }
    .salon-contact p { overflow-wrap: anywhere; }
    .salon-contact dl { grid-template-columns: 25px minmax(0, 1fr); }
    .map-placeholder { min-height: 220px; width: 100%; }
    .reference-header { align-items: center; flex-wrap: wrap; gap: 0 12px; height: auto; min-height: 100px; padding: 10px 15px; }
    .reference-header .home-brand { display: block; flex: 1 1 auto; font-size: 14px; letter-spacing: 5px; }
    .reference-header nav { flex: 1 1 100%; gap: 17px; margin: 8px 0 0; max-width: 100%; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; white-space: nowrap; }
    .reference-header nav::-webkit-scrollbar { display: none; }
    .reference-header nav a { flex: 0 0 auto; font-size: 10px; padding: 8px 0 6px; }
    .reference-actions { display: flex; flex: 0 0 auto; gap: 0; }
    .reference-actions > span { display: none; }
    .reference-actions .home-booking { min-height: 34px; padding: 0 12px; white-space: nowrap; }
    .reference-page-hero { min-height: 360px; }
}