@font-face{font-family:Barlow;src:url('fonts/barlow-condensed-bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:Manrope;src:url('fonts/manrope-latin.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap}

:root{
    color-scheme:dark;
    --background:#101110;
    --text:#f3f1eb;
    --muted:#b5b6ae;
    --accent:#d6cab4;
    --line:rgba(229,225,214,.18);
    --display:Barlow,Impact,'Arial Narrow',sans-serif;
    --body:Manrope,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--background);color:var(--text);font-family:var(--body);font-size:1rem;line-height:1.6;isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(9,10,9,.22),rgba(9,10,9,.4) 75%,#101110),url('images/marbre-noir.jpg') center top/cover no-repeat;pointer-events:none}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 35%,transparent 15%,rgba(0,0,0,.36) 100%);pointer-events:none}
a{color:inherit;text-decoration:none}
button,a,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
::selection{background:var(--accent);color:#151612}
h1,h2,h3,p{margin:0}
.icon{width:20px;height:20px;flex:none;vertical-align:middle}
.skip-link{position:fixed;top:12px;left:12px;z-index:10;padding:12px 20px;background:var(--accent);color:#141511;transform:translateY(-180%)}
.skip-link:focus{transform:translateY(0)}
.site-header{border-bottom:1px solid var(--line);background:rgba(12,13,12,.35)}
.header-inner{max-width:1280px;min-height:106px;margin:auto;padding:14px 48px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:15px}
.brand img{width:135px;height:auto;display:block;mix-blend-mode:screen}
.header-location{font-size:0.6875rem;letter-spacing:.22em;color:var(--muted)}
.header-location span{display:inline-block;padding:0 14px;color:#686b62}
.header-link{display:flex;align-items:center;gap:10px;font-size:0.875rem;padding:10px 0;border-bottom:1px solid var(--accent);min-width:0}
.header-link .icon{width:16px;height:16px;color:var(--accent)}
.header-link:hover{color:var(--accent)}
.booking-section{max-width:1080px;margin:0 auto;padding:52px 32px 0}
.section-heading{text-align:center}
.eyebrow{font-size:0.6875rem;font-weight:700;letter-spacing:.26em;color:var(--accent)}
.section-heading .eyebrow{display:flex;align-items:center;justify-content:center;gap:16px}
.section-heading .eyebrow span{width:28px;height:1px;background:var(--accent);opacity:.6}
h1{font-family:var(--display);font-weight:700;font-size:clamp(4rem,7.4vw,6.6rem);line-height:1;letter-spacing:-.018em;margin:20px 0 22px;overflow-wrap:anywhere}
h1 span{color:var(--accent)}
.intro{font-size:1rem;color:#c6c6c0;line-height:1.8}
.mobile-break{display:none}
.salon-heading{margin:40px 0 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.salon-heading h2{display:flex;align-items:center;gap:12px;font-size:0.75rem;letter-spacing:.14em;font-weight:700}
.step-number{font-size:0.6875rem;font-weight:400;color:var(--accent);display:inline-flex;align-items:center;justify-content:center;width:29px;height:29px;border:1px solid #6b6659;border-radius:50%;letter-spacing:0}
.salon-count{font-size:0.625rem;letter-spacing:.13em;color:#a5a79e}
.salon-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.salon-card{position:relative;overflow:hidden;padding:24px 30px 0;border:1px solid #55564b;background:linear-gradient(130deg,rgba(43,44,38,.93),rgba(17,19,17,.97) 75%);box-shadow:0 12px 36px #0003;transition:border-color .25s,box-shadow .25s}
.salon-card::before{content:"";position:absolute;top:0;left:30px;width:46px;height:2px;background:var(--accent)}
.salon-card:hover,.salon-card:focus-within{border-color:#918976;box-shadow:0 16px 40px #0005}
.card-topline{display:flex;align-items:center;justify-content:space-between;gap:16px}
.card-category{font-size:0.625rem;letter-spacing:.26em;color:var(--accent);font-weight:700}
.city-block{display:flex;gap:12px;align-items:baseline;justify-content:space-between;margin-top:10px;flex-wrap:wrap}
.city-block h3{font-family:var(--display);font-size:clamp(2.3rem,4vw,3.5rem);text-transform:uppercase;line-height:1.2;letter-spacing:-.01em;overflow-wrap:anywhere;max-width:100%}
.postal-code{font-size:0.6875rem;color:#b1b2a7;letter-spacing:.1em}
.salon-address{display:flex;gap:10px;align-items:flex-start;margin:15px 0 25px;color:#bebfb6;font-size:0.875rem;line-height:1.8}
.salon-address .icon{width:17px;height:17px;margin-top:3px;color:var(--accent)}
address{font-style:normal}
.booking-button{display:flex;align-items:center;justify-content:center;gap:11px;min-height:52px;padding:13px 18px;background:var(--accent);color:#1b1e19;font-size:0.875rem;transition:background .2s,transform .2s}
.booking-button .icon{width:18px;height:18px}
.booking-button strong{font-size:1.0625rem;letter-spacing:-.05em;margin-left:2px}
.booking-button:hover{background:#eee6d7;transform:translateY(-2px)}
.booking-button:active{transform:translateY(0)}
.card-links{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:14px 0 15px;font-size:0.875rem;color:#c4c5bc}
.card-links a{display:flex;align-items:center;gap:7px;min-height:34px}
.card-links .icon{width:14px;height:14px;color:#a9aa9d}
.card-links a:hover{text-decoration:underline;text-underline-offset:4px;color:var(--text)}
.opening-hours{border-top:1px solid var(--line)}
.opening-hours summary{display:flex;align-items:center;gap:9px;cursor:pointer;padding:16px 0;list-style:none;color:#b8b9af;font-size:0.875rem;min-height:50px}
.opening-hours summary::-webkit-details-marker{display:none}
.opening-hours summary>.icon{width:15px;height:15px}
.opening-hours .toggle-icon{margin-left:auto;transition:transform .2s}
.opening-hours[open] .toggle-icon{transform:rotate(45deg)}
.opening-hours summary:hover{color:var(--text)}
.opening-hours dl{margin:0 0 15px;font-size:0.8125rem}
.opening-hours dl>div{display:flex;justify-content:space-between;gap:12px;padding:5px 0}
.opening-hours dt{color:var(--muted)}
.opening-hours dd{margin:0;text-align:right}
.opening-hours p{font-size:0.75rem;color:#a7a99e;padding-bottom:20px;max-width:32em}
.booking-reassurance{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:24px;padding:25px 0 40px;font-size:0.75rem;color:#adafa4}
.booking-reassurance span{display:flex;align-items:center;gap:8px}
.booking-reassurance .icon{width:16px;height:16px;color:#beb7a3}
.booking-help{max-width:1016px;margin:0 auto;padding:30px 0 38px;border-top:1px solid var(--line);display:grid;grid-template-columns:1.2fr 1fr;gap:50px;align-items:center}
.booking-help .eyebrow{font-size:0.5625rem;letter-spacing:.2em;margin-bottom:8px}
.booking-help h2{font-family:var(--display);font-size:1.5rem;font-weight:700;line-height:1.3}
.booking-help>p{font-size:0.875rem;color:#aeb0a5;line-height:1.9}
.site-footer{border-top:1px solid var(--line);max-width:1184px;margin:0 auto;padding:24px 0;display:flex;align-items:center;justify-content:space-between;gap:24px}
.footer-brand{font-family:var(--display);font-size:1.5rem;line-height:1;display:flex;align-items:center;gap:8px}
.footer-brand span{font-family:var(--body);font-size:0.5625rem;letter-spacing:.2em;color:var(--muted)}
.site-footer p,.copyright{color:#9b9e92;font-size:0.625rem}
.site-footer p{letter-spacing:.14em}
.site-footer p span{margin:0 10px}
.copyright{font-size:0.6875rem}

.header-location{text-transform:uppercase}
.header-location a:hover,.header-location a[aria-current="page"]{color:var(--text)}
.footer-salons{display:flex;flex-wrap:wrap;gap:12px 24px;font-size:.75rem;color:var(--muted)}
.footer-salons a:hover,.footer-salons a[aria-current="page"]{color:var(--text);text-decoration:underline;text-underline-offset:5px}
.city-block h3 a:hover{color:var(--accent)}
.salon-page-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0 19px;font-size:.8125rem;color:var(--accent)}
.salon-page-link:hover{text-decoration:underline;text-underline-offset:5px}
.salon-page{max-width:1184px;margin:auto;padding:0 32px}
.breadcrumbs{padding:27px 0;font-size:.75rem;color:var(--muted)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.breadcrumbs li+li::before{content:"/";padding-right:10px;color:var(--accent)}
.breadcrumbs a:hover{text-decoration:underline;text-underline-offset:4px}
.salon-hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:64px;align-items:center;padding:23px 0 60px}
.salon-hero-copy>.eyebrow{display:flex;gap:18px;align-items:center}
.salon-page h1{margin:26px 0 24px}
.salon-page .salon-title-label{display:block;font-size:clamp(1.5rem,3vw,2rem);line-height:1.25;letter-spacing:.025em;color:var(--text);margin-bottom:10px}
.salon-title-city{display:block;font-size:clamp(3.4rem,7.3vw,6rem);text-transform:uppercase}
.salon-hero .intro{max-width:35em}
.salon-jump-links{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:25px;font-size:.75rem;color:var(--accent)}
.salon-jump-links a{padding:5px 0;border-bottom:1px solid var(--line)}
.salon-jump-links a:hover{border-color:var(--accent)}
.appointment-panel{padding:30px;border:1px solid #646052;background:linear-gradient(135deg,rgba(48,47,40,.94),rgba(16,18,16,.97));position:relative}
.appointment-panel::before{content:"";position:absolute;top:-1px;left:30px;width:48px;height:2px;background:var(--accent)}
.salon-page h2{font-family:var(--display);font-size:2rem;line-height:1.15;text-transform:uppercase;overflow-wrap:anywhere}
.appointment-panel h2{font-size:2.6rem;margin:15px 0}
.appointment-panel>p:not(.eyebrow){font-size:.875rem;color:var(--muted);margin-bottom:23px}
.salon-phone{display:flex;align-items:center;gap:10px;font-size:.9375rem;min-height:44px;color:var(--accent);width:fit-content}
.salon-phone:hover{text-decoration:underline;text-underline-offset:5px}
.salon-phone .icon{width:16px;height:16px}
.appointment-panel .salon-phone{margin:12px auto 4px}
.appointment-note{display:block;text-align:center;font-size:.6875rem;color:var(--muted)}
.salon-content-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:64px;border-top:1px solid var(--line);padding:44px 0 48px;align-items:start}
.salon-story>.eyebrow,.salon-services>.eyebrow,.salon-practical .eyebrow{margin-bottom:14px}
.salon-story>p:not(.eyebrow),.service-item p,.salon-tip p{font-size:.875rem;color:var(--muted);line-height:1.85}
.salon-story>h2{margin-bottom:18px}
.salon-story .team-label{margin-top:20px;color:var(--accent);font-size:.75rem}
.salon-team{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.salon-team li{border:1px solid var(--line);padding:5px 13px;font-size:.8125rem}
.salon-services{margin-top:42px}
.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin:25px 0}
.service-item{border-top:1px solid var(--line);padding-top:17px}
.service-item h3{font-family:var(--display);font-size:1.3125rem;margin-bottom:8px}
.text-link{display:inline-flex;align-items:center;gap:12px;color:var(--accent);font-size:.8125rem;line-height:1.7;text-decoration:underline;text-underline-offset:5px;padding-block:5px}
.text-link:hover{color:var(--text)}
.salon-tip{border-left:2px solid var(--accent);padding:4px 0 4px 20px;margin-top:32px}
.salon-tip h2{font-size:1.25rem;margin-bottom:9px}
.salon-practical{border:1px solid var(--line);background:rgba(17,19,17,.85);padding:28px}
.salon-practical .eyebrow{display:flex;align-items:center;gap:9px}
.salon-practical .eyebrow .icon{width:16px;height:16px}
.salon-practical h2{font-size:1.6rem}
.hours-table{margin:20px 0 14px;font-size:.8125rem}
.hours-table>div{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:10px 0}
.hours-table dt{color:var(--muted)}
.hours-table dd{margin:0}
.practical-note{font-size:.75rem;color:var(--muted);line-height:1.8}
.salon-access{margin-top:30px;padding-top:28px;border-top:1px solid var(--line)}
.salon-access address{margin:17px 0 13px;font-size:.875rem;color:var(--muted);line-height:1.9}
.salon-access .salon-phone{margin-top:13px}
.other-salon{display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid var(--line);padding:30px 0 40px}
.other-salon .eyebrow{margin-bottom:10px;font-size:.625rem}
.other-salon h2{font-size:1.625rem}
.other-salon .text-link{flex:none}

@media(max-width:1000px){
    .salon-hero,.salon-content-grid{gap:32px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
    .appointment-panel,.salon-practical{padding:24px}
    .salon-title-city{font-size:clamp(3rem,7.3vw,5rem)}
}
@media(max-width:760px){
    .salon-page{padding-inline:24px}
    .salon-hero,.salon-content-grid{grid-template-columns:1fr;gap:32px}
    .salon-hero{padding:12px 0 35px}
    .salon-content-grid{padding-top:32px}
    .salon-title-city{font-size:clamp(3.15rem,11vw,5rem)}
    .salon-practical{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
    .salon-access{border-top:0;margin-top:0;padding-top:0}
    .other-salon{align-items:start;flex-direction:column;gap:16px}
}
@media(max-width:540px){
    .salon-page{padding-inline:20px}
    .breadcrumbs{padding:20px 0}
    .salon-practical,.service-grid{grid-template-columns:1fr}
    .service-grid{gap:22px}
    .salon-practical{gap:0}
    .salon-access{border-top:1px solid var(--line);margin-top:28px;padding-top:28px}
    .footer-salons{order:3;width:100%;justify-content:center}
}

@media(min-width:1600px){.booking-section{padding-top:70px}.salon-heading{margin-top:50px}.salon-card{padding-top:30px}.booking-help{padding-top:38px;padding-bottom:46px}}
@media(max-width:1200px){.site-footer{margin-inline:48px}.booking-help{margin-inline:32px;max-width:none}}
@media(max-width:760px){
    .header-inner{padding:13px 24px;min-height:86px;gap:16px}
    .header-location{display:none}
    .brand img{width:110px}
    .header-link{font-size:0.875rem;gap:8px}
    .booking-section{padding:40px 24px 0}
    h1{font-size:4.75rem}
    .salon-heading{margin-top:35px}
    .salon-heading h2{font-size:0.6875rem;letter-spacing:.08em}
    .salon-count{display:none}
    .salon-grid{gap:16px}
    .salon-card{padding-inline:20px}
    .salon-card::before{left:20px}
    .city-block{display:block}
    .city-block h3{font-size:2.375rem}
    .postal-code{display:none}
    .salon-address{font-size:0.875rem;min-height:65px;margin-bottom:18px}
    .card-links{flex-wrap:wrap;gap:0 12px}
    .booking-button{font-size:0.875rem;padding-inline:8px;gap:7px}
    .booking-button strong{font-size:0.9375rem}
    .booking-reassurance{gap:20px;font-size:0.75rem}
    .booking-reassurance span{gap:6px}
    .booking-help{margin-inline:24px;gap:24px}
    .booking-help h2{font-size:1.3125rem}
    .site-footer{margin-inline:24px;flex-wrap:wrap;gap:16px}
    .site-footer p{font-size:0.5625rem}
}
@media(max-width:540px){
    .header-inner{padding-inline:20px}
    .brand{gap:9px}
    .header-link{font-size:0.75rem}
    .booking-section{padding:34px 20px 0}
    .eyebrow{font-size:0.625rem;letter-spacing:.2em}
    h1{font-size:clamp(3.6rem,15vw,4.75rem);margin:18px 0}
    .intro{font-size:1rem}
    .mobile-break{display:block}
    .salon-heading{margin:29px 0 16px}
    .salon-heading h2{font-size:0.6875rem}
    .salon-grid{grid-template-columns:1fr;gap:18px}
    .salon-card{padding:22px 24px 0}
    .salon-card::before{left:24px}
    .city-block{display:flex}
    .city-block h3{font-size:2.8125rem}
    .postal-code{display:block}
    .salon-address{font-size:0.875rem;min-height:0;margin:14px 0 23px}
    .booking-button{font-size:0.875rem;min-height:52px}
    .booking-button strong{font-size:1.0625rem}
    .card-links{font-size:0.875rem;margin:12px 0}
    .opening-hours summary{font-size:0.875rem}
    .booking-reassurance{flex-wrap:wrap;gap:14px 20px;padding:25px 0 30px;font-size:0.75rem}
    .booking-reassurance span:last-child{flex-basis:100%;justify-content:center}
    .booking-help{margin-inline:20px;grid-template-columns:1fr;gap:14px;padding:25px 0 30px}
    .booking-help h2{font-size:1.4375rem}
    .booking-help>p{font-size:0.875rem;max-width:40em}
    .site-footer{margin-inline:20px;padding:22px 0;gap:18px}
    .site-footer p{order:3;flex-basis:100%;text-align:center;padding-top:3px}
    .copyright{font-size:0.625rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
