/* Ash Barber — charcoal and sign-inspired golden yellow palette. */
:root{--bg:#101010;--surface:#252525;--text:#f8f8f5;--muted:#bcbdb6;--line:#ffffff24;--accent:#ffd329;color-scheme:dark}
body{background:var(--bg);color:var(--text)}
::selection{background:var(--accent);color:#101010}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
section{background:var(--bg)}
header,header.is-compact{background:#202020ed;border-color:#ffffff29;box-shadow:0 12px 40px #0005}
header>nav a:hover,.footer a:hover{color:var(--accent)}
.hero{background:#101010}
.hero:after{background:linear-gradient(0deg,#101010 0,transparent 32%),linear-gradient(90deg,#10101055,transparent 24%,transparent 76%,#10101055)}
.hero-scene:after{background:radial-gradient(ellipse 30% 16% at 55% 19%,#ffd32924,transparent)}
.hero-floor{background:radial-gradient(ellipse at center,#ffd32918,transparent 70%)}
.eyebrow,.catalogue-menu>p{color:var(--accent)}
.button,.round{background:#292929;border-color:#ffffff30;box-shadow:none;color:#f8f8f5}
.button:hover,.round:hover{background:#383329;border-color:#ffd32980}
.button[href='/reservation'],.mobile-book{background:var(--accent);border-color:var(--accent);color:#201900;box-shadow:0 4px 24px #ffd32917;font-weight:650}
.button[href='/reservation']:hover,.mobile-book:hover{background:#ffdf66;border-color:#ffdf66;box-shadow:0 6px 30px #ffd3292b}
.pearl-button[href='/reservation'] .pearl-surface,.mobile-book .pearl-surface{display:none}
.pearl-button[href='/reservation'] .pearl-text,.mobile-book .pearl-text{color:#201900;text-shadow:none}
.experience,.services,.faq{background:#181918}
.catalogue-info{background:transparent}
.service-tab[aria-selected=true],.service-tab.is-current{color:var(--accent)}
.thumbnail[aria-pressed=true]{border-color:var(--accent)}
.services-scrollbar::-webkit-slider-thumb{background:var(--accent)}
.services-scrollbar::-moz-range-thumb{background:var(--accent)}
.review-card{background:#252625;border-color:#ffffff20;box-shadow:0 8px 24px #0002}
.review-copy{color:#c8c9c3}
.reviews-vignette{background:linear-gradient(90deg,#101010,transparent 20%,transparent 80%,#101010),linear-gradient(0deg,#101010,transparent 25%,transparent 80%,#10101080)}
.score{background:#101010;box-shadow:0 0 35px 24px #101010}
.score-stars{color:var(--accent)}
.faq details{border-color:#ffffff24}
.faq details[open]{background:#232522;border-radius:16px;padding-left:20px;padding-right:20px}
.faq summary::marker{color:var(--accent)}
.visit .wrap{border-top-color:#ffd32950}
.hours{padding:28px;background:#252625;border:1px solid #ffffff20;border-radius:24px}
.hour{border-bottom-color:#ffffff24}
.footer{background:#101010}
.panel{background:#252625;border-color:#ffffff24}
input,select,textarea{background:#191a18;border-color:#ffffff38}
button.primary,button[aria-pressed=true]{background:var(--accent);color:#201900;border-color:var(--accent)}
button.primary:hover,button[aria-pressed=true]:hover{background:#ffdf66;color:#201900}
@media(max-width:760px){.hours{padding:24px}.score{box-shadow:0 0 24px 12px #101010}.mobile-book{backdrop-filter:none}}
/* Reveal the existing dotted grid throughout the site. */
section,.hero,.experience,.services,.faq,.footer{background:transparent}
.hero:after{background:linear-gradient(0deg,#10101033,transparent 32%)}
.reviews-vignette{background:linear-gradient(90deg,#10101099,transparent 20%,transparent 80%,#10101099)}
/* Upright hero portrait with recessed, angled neighbouring styles. */
.catalogue-visual{isolation:isolate}
.catalogue-visual::before{content:"";position:absolute;inset:-18% -50%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,#101010ed 16%,#101010b8 46%,transparent 72%)}
.catalogue-deck{perspective:1100px;overflow:visible;border-radius:24px}
.service-card{transform:translateX(var(--card-x,0%)) translateZ(var(--card-z,0px)) rotateY(var(--card-angle,0deg)) scale(var(--card-scale,1));filter:brightness(var(--card-brightness,1));border:1px solid #ffffff24;box-shadow:0 16px 42px #0008;transition:transform .6s cubic-bezier(.22,.68,.25,1),opacity .45s,filter .6s}
.service-card.is-active{border-color:#ffffff45;box-shadow:0 28px 65px #000b,0 0 0 1px #ffffff08}
@media(max-width:1023px){
 .catalogue-visual{width:min(56vw,32svh,340px)}
 .catalogue-deck{perspective:900px}
 .service-card{border-radius:18px}
}
@media(prefers-reduced-motion:reduce){.service-card{transition:none}}

/* On mobile, show a single booking action for the current reading position. */
@media(max-width:760px){
 .home-page .mobile-book{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s}
 .home-page .mobile-book.is-visible{opacity:1;visibility:visible;pointer-events:auto}
}
/* Smoked liquid glass separates the service copy from the animated grid. */
.catalogue-info #service-description{color:#eeeef0;font-size:15px;line-height:1.65}
@media(min-width:1024px){
 .catalogue{display:grid;width:min(1320px,calc(100% - 64px));padding:0;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr);gap:32px;align-items:center}
 .catalogue-menu{min-width:0;padding:0}
 .catalogue-menu>p{margin-bottom:24px}
 .catalogue-menu .service-tab span{font-size:clamp(20px,1.6vw,24px)}
 .catalogue-menu .services-scrollbar{bottom:0}
 .catalogue-deck{--card-spread:34%}
 .catalogue-visual{width:min(76%,40svh,360px);max-width:none;justify-self:center;transform:none}
 .catalogue-arrows{margin-top:16px;gap:12px}
 .catalogue-info{align-self:center}
 .catalogue-info .thumbnails{gap:12px}
 .catalogue-info .thumbnail{border-width:2px}
 .catalogue-info .thumbnail[aria-pressed=true]{transform:none}
 .catalogue-info{min-width:0;width:100%;isolation:isolate;background:linear-gradient(145deg,#ffffff12,transparent 48%,#ffffff05),#17191c99;border:1px solid #ffffff30;border-radius:24px;padding:24px;margin:0;backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%);box-shadow:inset 0 1px 0 #ffffff30,inset 0 -1px 0 #ffffff0a,0 18px 50px #0005}
 .catalogue-info::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at 0 0,#ffffff12,transparent 55%)}
 .catalogue-info::after{content:"";position:absolute;top:0;left:24px;right:24px;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,#ffffff85,transparent)}
 .catalogue-info h3,.catalogue-info #service-description{text-shadow:0 1px 8px #0008}
 .catalogue-info h3{font-size:clamp(30px,2.7vw,40px);margin-bottom:16px;overflow-wrap:normal}
 .catalogue-info .button{gap:12px;padding:12px 16px;margin:24px 0}
}
@media(max-width:1023px){
 .catalogue-info #service-description{width:calc(100% - 40px);max-width:400px;background:linear-gradient(135deg,#ffffff0e,transparent),#17191ca6;border:1px solid #ffffff30;border-radius:20px;padding:12px 16px;backdrop-filter:blur(14px) saturate(125%);-webkit-backdrop-filter:blur(14px) saturate(125%);box-shadow:inset 0 1px 0 #ffffff20,0 8px 24px #0003;font-size:14px;line-height:1.55}
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 @media(min-width:1024px){.catalogue-info{background:#202226f5}}
 @media(max-width:1023px){.catalogue-info #service-description{background:#202226f5}}
}
/* Account glass is bounded to the authentication and password panels. */
#auth-panel,#password-form,#profile-form{
 position:relative;isolation:isolate;background:linear-gradient(145deg,#ffffff12,transparent 48%,#ffffff05),#17191c99;
 border:1px solid #ffffff30;border-radius:24px;padding:clamp(20px,4vw,32px);
 backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%);
 box-shadow:inset 0 1px 0 #ffffff30,inset 0 -1px 0 #ffffff0a,0 18px 50px #0005;
}
#auth-panel::before,#password-form::before,#profile-form::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at 0 0,#ffffff12,transparent 55%)}
#auth-panel h2,#password-form h2{margin:0 0 16px}
#auth-help{font-size:14px;line-height:1.6;color:#d9d9dd;margin:0 0 24px;max-width:60ch}
#auth-panel input,#password-form input{background:#10121599;border-color:#ffffff30}
#auth-panel input:focus,#password-form input:focus{border-color:var(--accent)}
#auth-submit,#password-form button[type=submit]{margin-top:20px}
#auth-panel .actions{padding-top:24px;border-top:1px solid #ffffff18;gap:10px}
#auth-panel .actions button{font-size:13px;background:#ffffff07;border-color:#ffffff26}
#auth-panel .actions button:hover{background:#ffffff12}
#auth-panel .actions button[aria-pressed=true]{border-color:#ffd32980;color:var(--accent);background:#ffd3290c}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#auth-panel,#password-form,#profile-form{background:#202226f5}}

#profile-form input{background:#10121599;border-color:#ffffff30}
#profile-form h2{margin:0 0 16px}
#saved-contact{padding:16px;border:1px solid #ffffff26;border-radius:16px;background:#ffffff06}
#saved-contact a{color:var(--accent)}

/* Plain dark canvas, without a decorative background layer. */
body{background:#101010}
.hero::after,.hero-scene::after,.catalogue-visual::before{background:none}

/* Warm broken grey replaces the decorative background. */
:root{--bg:#454440}
body{background:var(--bg)}
.home-page section,.home-page .hero,.home-page .experience,.home-page .services,.home-page .faq,.home-page .footer{background:var(--bg)}
.home-page .hero-floor,.home-page .hero-atmosphere{display:none}
.home-page .score{background:var(--bg);box-shadow:0 0 24px 12px var(--bg)}