/* Men’s Cave: real shop photographs, readable type, and restrained facade colours. */
:root{--cave-red:#bd2040;--cave-blue:#1267a6;--cave-paper:#f0eee7}
h1,h2,h3{font-family:Arial,Helvetica,sans-serif;font-weight:700;letter-spacing:-.035em;line-height:1.12;text-transform:none}
body{background:#111413}
header{background:#111413f5;border-bottom:1px solid #d6bc8d35;box-shadow:0 8px 24px #0003}
header::after{content:"";position:absolute;bottom:-2px;left:var(--gutter);width:54px;height:2px;background:linear-gradient(90deg,var(--cave-red) 0 48%,var(--cave-paper) 48% 52%,var(--cave-blue) 52%)}
.brand{position:relative;padding-left:15px;font:700 25px/1 Georgia,'Times New Roman',serif;letter-spacing:-.035em;text-transform:none}
.brand::before{content:"";position:absolute;left:0;top:1px;bottom:0;width:5px;background:linear-gradient(165deg,var(--cave-red) 0 43%,var(--cave-paper) 43% 53%,var(--cave-blue) 53%)}
.brand span{font:700 9px/1.4 Arial,Helvetica,sans-serif;letter-spacing:.18em;text-align:left;margin-top:8px}
header nav a{font-size:13px}
.button{border-radius:2px;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;box-shadow:none;transition:background .2s,border-color .2s,transform .2s}
.button:hover{transform:translateY(-2px);box-shadow:none}
.button:active{transform:none}
.button.secondary{box-shadow:none}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:700;letter-spacing:.13em}
.eyebrow::before{content:"";display:block;flex:none;width:19px;height:2px;background:var(--gold)}
.section-heading{padding-bottom:20px;border-bottom:1px solid #ffffff27}
.section-heading h2{font-size:clamp(32px,3.2vw,46px);max-width:24ch}
.shade{background:#1a1f1c}

/* The two real photographs identify the work and the place at first glance. */
.home-hero{position:relative;isolation:isolate;grid-template-columns:minmax(0,47fr) minmax(0,53fr);min-height:590px;background:#111413;border-bottom:1px solid #ffffff25}
.home-hero::after{content:"";position:absolute;z-index:3;left:var(--gutter);bottom:0;width:142px;height:5px;background:repeating-linear-gradient(115deg,var(--cave-red) 0 24px,var(--cave-paper) 24px 48px,var(--cave-blue) 48px 72px,var(--cave-paper) 72px 96px)}
.hero-copy{position:relative;z-index:2;padding:50px clamp(30px,4vw,64px) 50px var(--gutter);align-self:center}
.hero-copy .eyebrow::before{width:40px;height:5px;transform:skewX(-15deg);background:repeating-linear-gradient(115deg,var(--cave-red) 0 10px,var(--cave-paper) 10px 20px,var(--cave-blue) 20px 30px,var(--cave-paper) 30px 40px)}
.hero-copy h1{max-width:15ch;margin-top:0;font-size:clamp(46px,4.85vw,70px);line-height:1.04;letter-spacing:-.055em;text-wrap:balance}
.hero-copy h1 span{color:var(--gold)}
.hero-copy .hero-lead{margin-top:24px;font-size:20px;font-weight:600;line-height:1.4}
.hero-copy>p:not(.hero-lead){max-width:48ch}
.hero-copy .actions{margin-top:29px}
.hero-copy small{display:inline-block;margin-top:1px;padding-top:12px;border-top:1px solid #ffffff30}
.hero-image{width:calc(100% + 90px);min-height:590px;margin-left:-90px;background:#232824}
.hero-image .hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 34%;opacity:0;transition:opacity 1.3s ease-in-out}
.hero-image .hero-slide:nth-of-type(2){object-position:55% 38%}
.hero-image .hero-slide:nth-of-type(3){object-position:54% 36%}
.hero-image .hero-slide.is-active{opacity:1}
.hero-image:after{z-index:1;background:linear-gradient(90deg,#111413 0%,#111413ee 12%,#1114139e 32%,#11141300 64%),linear-gradient(0deg,#11141358,transparent 29%)}

/* Clear information first; colour appears as a small signature. */
.home-services{background:#111413}
.service-teasers{gap:18px}
.service-teaser{position:relative;min-height:230px;border:1px solid #ffffff30;background:#1c211e;padding:26px;transition:border-color .2s,transform .2s}
.service-teaser::before{content:"";position:absolute;top:-1px;left:26px;width:36px;height:3px;background:var(--gold)}
.service-teaser:hover{border-color:#d6bc8da6;transform:translateY(-3px)}
.service-teaser .teaser-number{color:var(--gold);font:700 12px Arial,Helvetica,sans-serif;letter-spacing:.13em}
.service-teaser h3{font-size:clamp(24px,2.1vw,29px);line-height:1.18}
.service-teaser p{font-size:15px}
.service-teaser strong{font:700 27px Arial,Helvetica,sans-serif;letter-spacing:-.03em}
.home-services .small-note{margin-top:23px}
.home-photos{grid-template-columns:1.1fr .9fr;grid-template-rows:repeat(2,220px);gap:20px 25px}
.home-photos .photo-card:first-child{grid-row:1/3}
.home-photos .gallery-open{height:calc(100% - 30px);aspect-ratio:auto;border-radius:2px}
.photo-grid:not(.home-photos) .gallery-open{border-radius:2px}
.photo-card figcaption{font-weight:600}
.gallery-open:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.people{align-items:start}
.person{border-color:#ffffff30;background:#1c211e}
.person-photo img{filter:none}
.person-info h2,.person-info h3{font-size:clamp(27px,2.8vw,35px)}
.person-role{font-weight:700;letter-spacing:.045em}
.about-teaser{background:#161b18}
.about-photo{position:relative;overflow:hidden;border:1px solid #ffffff30;background:#202420}
.about-photo img{object-position:100% center}
.about-photo-label{position:absolute;left:14px;bottom:14px;max-width:calc(100% - 28px);padding:10px 13px;background:#111713e8;border-left:3px solid var(--cave-red);border-right:3px solid var(--cave-blue);color:var(--cave-paper);font-size:11px;font-weight:700;letter-spacing:.04em}
.visit-photo img{border-radius:2px}
.about-teaser h2,.about-story h2{font-size:clamp(32px,3.2vw,46px)}
.review-card{border-color:#ffffff29;border-left:2px solid #d6bc8d8a;background:#141916}
.review-card blockquote{line-height:1.65}
.visit-info{border-top:1px solid #d6bc8d80;padding-top:19px}
.visit-info .small-heading{font:700 22px Arial,Helvetica,sans-serif;letter-spacing:-.025em}
.booking{position:relative;isolation:isolate;overflow:hidden;min-height:270px;padding-right:clamp(230px,24vw,340px);background:#202820;border-top:1px solid #d6bc8d55}
.booking::before{content:"";position:absolute;z-index:0;top:0;right:0;bottom:0;width:clamp(250px,30vw,410px);background-image:url('./assets/mens-cave-fasada-1065.webp');background-repeat:no-repeat;background-size:auto 185%;background-position:84% 68%;filter:grayscale(1) contrast(1.25) brightness(.8);opacity:.7;mask-image:linear-gradient(90deg,transparent,black 27%);pointer-events:none}
.booking>div,.booking>.button{position:relative;z-index:1}
footer{border-top:1px solid #d6bc8d3a}

/* Interior pages share the typography and discreet colour cues. */
.page-intro{position:relative;padding-top:58px;padding-bottom:42px;background:linear-gradient(120deg,#1a211c,#141917 70%);border-bottom:1px solid #ffffff2b}
.page-intro::after{content:"";position:absolute;bottom:0;left:var(--gutter);width:70px;height:3px;background:linear-gradient(90deg,var(--cave-red) 0 46%,var(--cave-paper) 46% 54%,var(--cave-blue) 54%)}
.page-intro h1{font-size:clamp(38px,4.1vw,58px);max-width:23ch}
.service-category>h2{display:flex;align-items:center;gap:13px;font-size:clamp(25px,2.2vw,31px);color:var(--gold)}
.service-category>h2::before{content:"";width:4px;height:22px;background:var(--gold);flex:none}
.service-card{border-color:#ffffff2c;background:#1b211d}
.service-card:hover{border-color:#d6bc8d80}
.service-description h3{font-size:clamp(23px,2.15vw,28px);line-height:1.2}
.service-book{font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;white-space:nowrap}
.service-book:hover{border-color:var(--gold);background:var(--gold);color:var(--bg)}
.gallery-filters button{border-radius:2px;font-weight:600}
.gallery-filters button:hover{border-color:var(--gold)}
.practical-grid article{border-top-color:#d6bc8d6b}
.practical-grid article:nth-child(2),.practical-grid article:nth-child(3){border-top-color:#d6bc8d6b}
.visit .section-heading h1{font-size:clamp(38px,4.1vw,58px)}
.error-page{min-height:70vh;background:#151a17}

@media(max-width:1050px){.hero-copy h1{font-size:clamp(44px,5vw,60px)}.hero-image{width:calc(100% + 60px);margin-left:-60px}.booking{padding-right:230px}.booking::before{width:260px}}
@media(max-width:900px){.home-hero{min-height:555px}.hero-image{min-height:555px}.hero-copy{padding-right:25px}.hero-copy h1{font-size:clamp(41px,5vw,52px)}.home-photos{grid-template-rows:repeat(2,180px)}}
@media(max-width:650px){
 header::after{left:18px}.brand{font-size:23px}.brand span{font-size:8px}.header-actions>.button{display:none}
 .section{padding-top:47px;padding-bottom:47px}.section-heading{padding-bottom:16px}.section-heading h2{font-size:clamp(31px,8vw,40px)}
 .service-toolbar{padding-top:24px;padding-bottom:18px}.service-menu{padding-top:0}.portfolio{padding-top:24px}
 .home-hero{display:flex;flex-direction:column;min-height:0}.home-hero::after{left:22px;width:114px;height:4px}.hero-image{order:-1;width:100%;height:306px;min-height:0;margin-left:0}.hero-image .hero-slide{object-position:50% 29%}.hero-image .hero-slide:nth-of-type(2){object-position:55% 32%}.hero-image .hero-slide:nth-of-type(3){object-position:55% 30%}.hero-image:after{background:linear-gradient(0deg,#111413 0%,#11141300 42%)}
 .hero-copy{padding:22px 22px 32px}.hero-copy h1{font-size:clamp(38px,9.5vw,48px);max-width:18ch;margin-top:17px;letter-spacing:-.045em}.hero-copy .hero-lead{font-size:17px;margin-top:18px}.hero-copy>p:not(.hero-lead){font-size:14px;margin-top:14px}.hero-copy .actions{margin-top:20px}
 .service-teasers{gap:12px}.service-teaser{min-height:0;padding:22px}.service-teaser h3{font-size:25px}.service-teaser p{font-size:14px;margin-top:10px}.service-teaser>div{padding-top:17px}.service-teaser strong{font-size:24px}.home-services .small-note{margin-top:16px}
 .home-photos{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:18px 12px}.home-photos .photo-card:first-child{grid-column:1/-1;grid-row:auto}.home-photos .photo-card:first-child .gallery-open{height:auto;aspect-ratio:1.35}.home-photos .photo-card:not(:first-child) .gallery-open{height:auto;aspect-ratio:3/4}.home-photos .photo-card figcaption{font-size:11px;line-height:1.4}
 .compact .person-info h3{font-size:27px}.about-photo{height:270px}.about-photo-label{font-size:10px;padding:8px 10px}.review-card{padding:23px}.visit-info{padding-top:18px}.booking{min-height:0;padding-right:22px}.booking::before{display:none}.booking h2{font-size:clamp(31px,8vw,40px)}
 .page-intro{padding-top:42px;padding-bottom:32px}.page-intro h1,.visit .section-heading h1{font-size:clamp(36px,8.8vw,47px)}
 .mobile-booking{border-top:1px solid #d6bc8d8a}
}
@media(max-width:360px){.hero-image{height:265px}.hero-copy{padding-inline:18px}.home-hero::after{left:18px}.hero-copy h1{font-size:36px}.mobile-booking{padding-inline:12px}.mobile-booking>span{display:none}.mobile-booking .button{width:100%;white-space:nowrap;padding-inline:15px}}
@media(prefers-reduced-motion:reduce){.button,.service-teaser,.hero-image .hero-slide{transition:none}.button:hover,.service-teaser:hover{transform:none}}

/* Identity from the actual facade: bold diagonal colour, dark interior, real work. */
:root{--cave-red:#ba2339;--cave-blue:#125b92;--cave-paper:#f2eee5}
.topline{position:relative;background:#111413;color:#e2e6e7;border-bottom:0}
header{background:#111413f7}
header::after{display:none}
header nav a:hover,header nav a[aria-current]{color:var(--cave-paper);border-color:var(--cave-blue)}
.button:not(.secondary){background:var(--cave-blue);border-color:#4c91be;color:#fff;box-shadow:4px 4px 0 var(--cave-red)}
.button:not(.secondary):hover{background:#1973ae;border-color:#72afce;box-shadow:2px 2px 0 var(--cave-red);transform:translate(2px,2px)}
.button.secondary{color:var(--cave-paper);border-color:#f2eee58a}
.button.secondary:hover{background:#f2eee515;border-color:var(--cave-paper)}
.eyebrow::before{background:linear-gradient(115deg,var(--cave-red) 0 43%,var(--cave-paper) 43% 56%,var(--cave-blue) 56%)}
.shade{background:#1b2022}

/* A photograph of the salon's striped windows is the first slide. */
.home-hero{background:#111413}
.home-hero::after{left:0;width:100%;height:5px;background:repeating-linear-gradient(115deg,var(--cave-red) 0 38px,var(--cave-paper) 38px 75px,var(--cave-blue) 75px 113px,var(--cave-paper) 113px 150px)}
.hero-copy{background:linear-gradient(110deg,#111413 0%,#191b19 70%,#191b1900 100%)}
.hero-copy .eyebrow::before{width:35px;height:6px;background:linear-gradient(115deg,var(--cave-red) 0 35%,var(--cave-paper) 35% 58%,var(--cave-blue) 58%)}
.hero-copy h1 span{color:var(--cave-paper);background:linear-gradient(90deg,var(--cave-red) 0 47%,var(--cave-paper) 47% 53%,var(--cave-blue) 53%) left bottom / 100% 6px no-repeat;padding-bottom:8px}
.hero-image::before{content:"";position:absolute;z-index:2;top:0;right:0;bottom:0;width:14px;background:repeating-linear-gradient(115deg,var(--cave-red) 0 28px,var(--cave-paper) 28px 56px,var(--cave-blue) 56px 84px,var(--cave-paper) 84px 112px);pointer-events:none}
.hero-image:after{background:linear-gradient(90deg,#111413 0%,#111413ed 12%,#1114138f 31%,#11141300 63%),linear-gradient(0deg,#11141340,transparent 30%)}
.hero-image .hero-slide:nth-of-type(2){object-position:72% center}

/* A compact service list replaces three large generic cards. */
.home-services{background:#13191b}
.home-services .section-heading{margin-bottom:25px}
.service-teasers{display:grid;grid-template-columns:1fr;gap:0;border-bottom:1px solid #ffffff29}
.service-teaser{display:grid;grid-template-columns:minmax(0,1fr) 175px;grid-template-rows:auto;column-gap:22px;align-items:center;min-height:132px;padding:20px 28px;border:0;border-top:1px solid #ffffff29;background:transparent;transition:background .2s}
.service-teaser::before{top:0;bottom:0;left:0;width:4px;height:auto;background:var(--cave-blue)}
.service-teaser:nth-child(2)::before{background:var(--cave-red)}
.service-teaser:nth-child(3)::before{background:var(--cave-blue)}
.service-teaser:hover{transform:none;border-color:#ffffff29;background:#1a2427}

.service-teaser h3{grid-column:1;grid-row:1;max-width:none;font-size:clamp(22px,2.4vw,31px)}
.service-teaser>div{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:0;margin:0}
.service-teaser strong{color:var(--cave-paper)}
.service-teaser>div>span{color:#b7c4c9}

.compact .person{position:relative;border-top:3px solid var(--cave-blue)}
.compact .person:nth-child(2){border-top-color:var(--cave-red)}
.compact .person:nth-child(3){border-top-color:var(--cave-paper)}
.about-teaser{background:#17232a}
.about-photo{border:0;box-shadow:12px 12px 0 #0e4a74}
.about-photo-label{border-left-color:var(--cave-red);border-right-color:var(--cave-blue)}
.review-card{background:#161c1e}
.booking{background:#14242e;border-top:5px solid var(--cave-blue)}
.booking::after{content:"";position:absolute;top:-5px;left:0;width:100px;height:5px;background:var(--cave-red)}
footer{background:#111719}
.page-intro{overflow:hidden;background:linear-gradient(115deg,#1b1d1b 0%,#151816 72%)}
.page-intro::after{height:4px;width:145px;background:repeating-linear-gradient(115deg,var(--cave-red) 0 30px,var(--cave-paper) 30px 60px,var(--cave-blue) 60px 90px,var(--cave-paper) 90px 120px)}
.service-card{border-left:3px solid var(--cave-blue)}
.service-card:nth-of-type(even){border-left-color:var(--cave-red)}

@media(max-width:900px){
 .service-teaser{grid-template-columns:minmax(0,1fr) 135px;padding-inline:20px;column-gap:16px}

 .service-teaser>div{display:flex;flex-direction:column;align-items:flex-start}
}
@media(max-width:650px){
 .topline{padding-bottom:8px}
  .home-hero{background:#111413}
 .hero-image{height:285px}
 .hero-image::before{width:9px}
  .hero-image:after{background:linear-gradient(0deg,#111413 0%,#11141300 48%)}
 .hero-image .hero-slide:nth-of-type(2){object-position:78% center}
  .hero-copy{background:#111413;padding-top:24px}
 .hero-copy h1 span{background-size:100% 4px;padding-bottom:5px}
 .service-teasers{gap:0}
 .service-teaser{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;column-gap:15px;row-gap:10px;align-content:center;min-height:120px;padding:16px 12px 16px 18px}

 .service-teaser h3{grid-column:1;grid-row:1;font-size:22px;padding:0}
 .service-teaser>div{grid-column:1;grid-row:2;display:flex;flex-direction:row;align-items:baseline;gap:12px;padding:0;margin-top:0}
 .service-teaser strong{font-size:23px}
 .about-photo{box-shadow:6px 6px 0 #0e4a74}
 .booking{border-top-width:4px}
 .booking::after{top:-4px;height:4px}
 .mobile-booking .button:not(.secondary){box-shadow:2px 2px 0 var(--cave-red)}
}
@media(max-width:360px){.hero-image{height:252px}.service-teaser{column-gap:12px}.service-teaser h3{font-size:21px}}
@media(prefers-reduced-motion:reduce){.button:not(.secondary):hover{transform:none}}
@media(max-width:650px){body{padding-bottom:0}.back-top{display:none}}

/* Equal breathing room above and below selected inner-page introductions. */
.page-intro.intro-balanced{padding-block:64px}
@media(max-width:650px){.page-intro.intro-balanced{padding-block:48px}}

/* Compact first screen on phones while keeping each photo focused on the salon. */
@media(max-width:650px){
 .home-hero .hero-image{height:200px;height:clamp(170px,25svh,215px)}
 .home-hero .hero-image .hero-slide{object-position:50% 54%}
 .home-hero .hero-image .hero-slide:nth-of-type(2){object-position:50% 50%}
 .home-hero .hero-image .hero-slide:nth-of-type(3){object-position:50% 52%}
 .home-hero .hero-image:after{background:linear-gradient(0deg,#111413 0%,#11141300 58%)}
 .home-hero .hero-copy{align-self:stretch;width:100%;padding-top:18px}
 .home-hero .hero-copy h1{margin-top:0}
 .home-hero .hero-copy .hero-lead{margin-top:14px}
 .home-hero .hero-copy .actions{margin-top:18px}
}
@media(max-width:360px){.home-hero .hero-image{height:160px;height:clamp(145px,22svh,170px)}}
/* Staff grade sits quietly below each name; time stays in its own column. */
.variant-name{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25}
.variant-role{display:block;margin-top:3px;font-size:11px;font-weight:400;color:#aab4ae}
@media(max-width:650px){
 .service-variant .variant-name{font-size:17px;font-weight:700;line-height:1.2}
 .service-variant .variant-role{margin-top:5px;font-size:13px;font-weight:400;line-height:1.35;color:#c3cbc5}
}

/* Finishing pass: clearer hierarchy, calmer motion, and comfortable controls. */
header nav a{transition:color .2s ease}
@media(min-width:901px){
 header nav a{position:relative;border-bottom:0}
 header nav a::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:2px;background:var(--cave-blue);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
 header nav a:hover::after,header nav a:focus-visible::after,header nav a[aria-current]::after{transform:scaleX(1)}
}
.button:active{transform:scale(.98)}
.button:not(.secondary):active{transform:translate(2px,2px) scale(.98);box-shadow:0 0 0 var(--cave-red)}
.text-link{transition:color .2s ease,text-decoration-color .2s ease}

/* Keep the real salon photo and the booking choice as the first visual priorities. */
.hero-copy{max-width:790px}
.hero-copy h1{line-height:1.06}
.hero-copy .hero-lead{max-width:35ch;color:#f4f0e8}
.hero-copy .actions{align-items:stretch}
.hero-copy .actions .button{min-width:138px}
@media(prefers-reduced-motion:no-preference){
 @keyframes cave-rise{from{opacity:.65;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
 @keyframes cave-photo-zoom{from{transform:scale(1)}to{transform:scale(1.03)}}
 .home-hero .hero-copy h1{animation:cave-rise .52s ease-out both}
 .home-hero .hero-copy .hero-lead{animation:cave-rise .52s .08s ease-out both}
 .home-hero .hero-copy .actions{animation:cave-rise .52s .16s ease-out both}
 .home-hero .hero-copy small{animation:cave-rise .52s .23s ease-out both}
 .hero-image .hero-slide.is-active{animation:cave-photo-zoom 6s ease-out both}
}

/* Team photographs retain one frame size while keeping faces near the center. */
.person{transition:border-color .22s ease,background-color .22s ease}
.person-photo{overflow:hidden;aspect-ratio:1.12}
.person-photo img{transition:transform .38s ease;object-position:center 30%}
.person:first-child .person-photo img{object-position:63% 35%}
.person:nth-child(2) .person-photo img{object-position:38% 32%}
.person:nth-child(3) .person-photo img{object-position:48% 33%}
.full-people .person-info .button{align-self:stretch}
@media(hover:hover){
 .person:hover,.person:focus-within{border-color:#638ba2;background:#202a2b}
 .person:hover .person-photo img,.person:focus-within .person-photo img{transform:scale(1.035)}
}

/* A service card contains one clear choice for each available professional. */
.service-card{overflow:hidden;transition:border-color .2s ease,background-color .2s ease}
.service-variant{min-width:0;margin-inline:-12px;padding-inline:12px;border-radius:3px;transition:background-color .2s ease,box-shadow .2s ease}
.service-variant:hover,.service-variant:focus-within{background:#202c31;box-shadow:inset 3px 0 0 var(--cave-blue)}
.service-book{background:#1c303b;border-color:#5e879e;color:#f3efe7;transition:background-color .2s,border-color .2s,transform .2s}
.service-book:hover,.service-book:focus-visible{background:#216c9d;border-color:#75add1;color:#fff}
.service-book:active{transform:scale(.97)}

/* Gallery controls stay obvious with mouse, touch, and keyboard. */
.photo-grid{align-items:start}
.portfolio .gallery-open{aspect-ratio:1/1}
.portfolio .photo-card:nth-child(4) img,.portfolio .photo-card:nth-child(5) img{object-position:center 27%}
.gallery-open img{transition:transform .36s ease}
.photo-zoom{border-color:#d6bc8d8a;transition:background-color .2s,border-color .2s,transform .2s,opacity .2s}
@media(hover:hover){
 .gallery-open:hover img,.gallery-open:focus-visible img{transform:scale(1.04)}
 .gallery-open:hover .photo-zoom,.gallery-open:focus-visible .photo-zoom{background:var(--cave-blue);border-color:#78b7dc;color:#fff;transform:scale(1.08)}
}
.gallery-dialog{box-shadow:0 24px 80px #000a}
.lightbox-top button:hover,.lightbox-nav button:hover{border-color:#75add1;background:#213640}

/* Reviews and directions remain easy to scan without adding more decoration. */
.review-card{min-height:100%;border-top:2px solid #587c90;padding:28px}
.review-card blockquote{color:#e1e5e1}
.review-card figcaption{color:#f0eee7;font-weight:700}
.stars{color:#e5c68e}
.visit-info address{color:#e5e7e2;font-size:16px;line-height:1.75}
.visit-info .actions .button{min-height:48px}
.copy-feedback{min-height:20px;color:#d9e4e5}
.hours{max-width:460px}
.hours>div{padding:10px 0}
.hours dt{color:#e5e7e2}
.hours dd{color:#f0eee7;font-weight:700}

/* Native FAQ disclosure, with a short answer entrance. */
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:15px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"⌄";flex:none;color:#d6bc8d;font-size:22px;line-height:1;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(180deg)}
@media(prefers-reduced-motion:no-preference){
 @keyframes cave-faq-open{from{opacity:.7;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
 .faq details[open] p{animation:cave-faq-open .22s ease-out}
}

@media(max-width:900px){body.menu-open{overflow:hidden}}
@media(max-width:650px){
 .hero-copy .actions{flex-wrap:nowrap;gap:9px}
 .hero-copy .actions .button{min-width:0;white-space:nowrap;padding-inline:clamp(10px,3.2vw,18px);font-size:13px}
 .home-hero .hero-copy .actions{width:100%;justify-content:center}
 .home-hero .hero-copy .actions .button{display:inline-flex;width:100%;max-width:480px;min-height:50px;align-items:center;justify-content:center;text-align:center;font-size:15px}
 .full-people .person-photo{aspect-ratio:auto}
 .compact .person-photo{aspect-ratio:auto}
 .service-card{margin-bottom:14px}
 .service-description{padding-bottom:12px}
 .service-variant{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name price" "time book";gap:4px 12px;padding:15px 12px}
 .service-variant .variant-name{grid-area:name;min-width:0}
 .service-variant .variant-duration{grid-area:time;align-self:center;font-size:12px}
 .service-variant strong{grid-area:price;text-align:right;font-size:18px}
 .service-variant .service-book{grid-area:book;margin-top:3px;min-height:44px;padding:8px 13px}
 .portfolio .gallery-open{aspect-ratio:1/1}
 .review-card{padding:22px}
 .visit-info .actions{align-items:stretch}
 .visit-info .actions .button{flex:1 1 150px;text-align:center}
 .hours{font-size:14px}
}
@media(max-width:360px){
 .hero-copy .actions .button{font-size:12px;padding-inline:9px}
 .service-variant .service-book{padding-inline:10px}
}
@media(prefers-reduced-motion:reduce){
 .person,.person-photo img,.service-card,.service-variant,.service-book,.photo-zoom,.gallery-open img,.faq summary::after,header nav a::after{transition:none!important;animation:none!important}
 .person:hover .person-photo img,.person:focus-within .person-photo img,.gallery-open:hover img,.gallery-open:focus-visible img{transform:none}
}
/* Compact inner-page mastheads; the home hero keeps its own proportions. */
.page-intro{padding-block:38px}
.page-intro.intro-balanced{padding-block:40px}
.page-intro h1{font-size:clamp(33px,3.4vw,48px);line-height:1.08}
.page-intro p{margin-top:11px}
.contact-page{padding-top:42px}
.contact-page .section-heading{margin-bottom:24px;padding-bottom:16px}

/* The opening scene ends at the colour strip on the first viewport. */
.home-hero{min-height:calc(100vh - 88px);min-height:calc(100svh - 88px)}
.home-hero .hero-image{min-height:0}
.home-hero .hero-copy{align-self:stretch;display:flex;flex-direction:column;padding-bottom:24px}
.home-hero .hero-copy h1{margin-top:auto}
.home-hero .hero-copy .actions{margin-top:auto;margin-bottom:0}
@media(min-width:901px){
 .home-hero .hero-copy{padding-bottom:0}
 .home-hero .hero-copy .actions{justify-content:flex-start;margin-bottom:auto}
 .home-hero .hero-copy .actions .button{width:clamp(190px,16vw,220px);min-height:56px;padding:14px 28px;font-size:16px}
}
@media(max-width:900px){
 .home-hero{min-height:calc(100vh - 76px);min-height:calc(100svh - 76px)}
}
@media(max-width:650px){
 .home-hero .hero-image{flex-shrink:0;height:clamp(245px,39svh,350px)}
 .home-hero .hero-copy{flex:1;padding-top:clamp(22px,3.5svh,28px);padding-bottom:0}
 .home-hero .hero-copy h1{margin-top:0}
 .home-hero .hero-copy h1 span{background:none;padding-bottom:0}
 .home-hero .hero-copy h1::after{content:"";display:block;width:clamp(130px,42vw,170px);height:4px;margin:10px 0 0;background:linear-gradient(90deg,var(--cave-red) 0 47%,var(--cave-paper) 47% 53%,var(--cave-blue) 53%)}
 .home-hero .hero-copy .hero-lead{display:none}
 .home-hero .hero-copy .actions{margin-bottom:auto}
}
@media(max-width:360px){
 .home-hero .hero-image{height:clamp(205px,36svh,245px)}
 .home-hero .hero-copy h1{font-size:33px}
}
.contact-page .section-heading h1{font-size:clamp(33px,3.4vw,48px)}
@media(max-width:650px){
 .page-intro,.page-intro.intro-balanced{padding-block:29px}
 .page-intro h1,.contact-page .section-heading h1{font-size:clamp(30px,8vw,39px)}
 .page-intro p{margin-top:10px}
 .contact-page{padding-top:32px}
 .contact-page .section-heading{margin-bottom:22px}
}

/* Service header keeps the real salon photo; other page titles use a quiet light-right gradient. */
.page-intro{isolation:isolate;background:linear-gradient(105deg,#121817 0%,#1a262a 65%,#111718 100%)}
.services-intro::before{content:"";position:absolute;z-index:0;inset:0 0 0 auto;width:44%;background-image:var(--intro-photo);background-size:cover;background-position:var(--intro-position,center);clip-path:polygon(17% 0,100% 0,100% 100%,0 100%);opacity:.78;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 25%);mask-image:linear-gradient(90deg,transparent 0%,#000 25%);pointer-events:none}
.page-intro::after{z-index:2}
.page-intro>h1,.page-intro>p{position:relative;z-index:1;max-width:min(65ch,67%)}
.page-intro>h1{max-width:min(23ch,67%)}
.gallery-intro,.team-intro{background:radial-gradient(ellipse at 92% 12%,#5b777045 0%,transparent 48%),linear-gradient(105deg,#121817 0%,#1b2929 58%,#2b3a39 100%)}
.services-intro{--intro-photo:url('./assets/berber-po-vreme-na-rabota-800.webp');--intro-position:center 39%}

.contact-page .section-heading{position:relative;isolation:isolate;overflow:hidden;min-height:112px;padding:20px 28px;border-bottom:0;background:radial-gradient(ellipse at 92% 12%,#5b777045 0%,transparent 48%),linear-gradient(105deg,#17201f 0%,#202e2e 58%,#31413f 100%)}
.contact-page .section-heading::after{content:"";position:absolute;z-index:2;left:28px;bottom:0;width:145px;height:4px;background:repeating-linear-gradient(115deg,var(--cave-red) 0 30px,var(--cave-paper) 30px 60px,var(--cave-blue) 60px 90px,var(--cave-paper) 90px 120px)}
.contact-page .section-heading>div{position:relative;z-index:1}

@media(max-width:650px){
 .services-intro::before{width:58%;clip-path:polygon(13% 0,100% 0,100% 100%,0 100%);opacity:.38;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%);mask-image:linear-gradient(90deg,transparent 0%,#000 34%)}
 .page-intro>h1,.page-intro>p{max-width:100%}
 .contact-page .section-heading{min-height:94px;padding:15px 19px}
 .contact-page .section-heading::after{left:19px;width:115px}
}

/* Breathing room between the inner-page title and the first content block. */
.page-intro{margin-bottom:36px}
.contact-page .section-heading{margin-bottom:40px}
@media(max-width:650px){.page-intro{margin-bottom:24px}.contact-page .section-heading{margin-bottom:32px}}

/* Keep the homepage photo grid inside its own section on wider screens. */
#gallery{border-bottom:1px solid #ffffff24}
@media(min-width:651px){
 .home-photos{align-items:stretch}
 .home-photos .photo-card{display:flex;flex-direction:column;min-height:0}
 .home-photos .gallery-open{flex:1 1 auto;min-height:0;height:auto}
 .home-photos .gallery-open img{display:block;width:100%;height:100%;object-fit:cover}
 .home-photos .photo-card figcaption{flex:none}
}

/* Full-screen photo viewer: the picture owns the space, controls float over it. */
.gallery-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;overflow:hidden;border:0;border-radius:0;background:#070a09f7;color:#fff;box-shadow:none}
.gallery-dialog::backdrop{background:#070a09}
.gallery-dialog figure{position:relative;width:max-content;max-width:100%;height:100%;margin:auto}
.gallery-dialog .lightbox-image{display:block;width:auto;height:100%;max-width:100vw;max-height:100dvh;object-fit:contain;background:transparent}
.gallery-dialog .lightbox-top{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left));pointer-events:none}
.gallery-dialog .lightbox-count{padding:7px 10px;border-radius:3px;background:#070a09a8;color:#fff;font-size:12px;line-height:1;letter-spacing:.04em}
.gallery-dialog .lightbox-close,.gallery-dialog .lightbox-nav button{display:grid;place-items:center;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:#070a09ad;color:#fff;font:400 29px/1 Arial,Helvetica,sans-serif;cursor:pointer;pointer-events:auto}
.gallery-dialog .lightbox-close:hover,.gallery-dialog .lightbox-nav button:hover{border:0;background:#172c35e8}
.gallery-dialog .lightbox-close:focus-visible,.gallery-dialog .lightbox-nav button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.gallery-dialog .lightbox-nav{position:absolute;z-index:2;top:50%;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left));transform:translateY(-50%);pointer-events:none}
.gallery-dialog .lightbox-nav button[hidden]{display:none}
.gallery-dialog figcaption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:650px){
 .gallery-dialog{width:100vw;height:100dvh;max-height:none}
 .gallery-dialog .lightbox-top{padding-top:calc(8px + env(safe-area-inset-top))}
 .gallery-dialog .lightbox-nav{padding-right:calc(8px + env(safe-area-inset-right));padding-left:calc(8px + env(safe-area-inset-left))}
}

/* Keep scroll-reveal targets hidden from the first paint until their one-time entrance. */
html.js-motion :is(
 .section-heading > *,.page-intro h1,
 .home-services .service-teaser,.home-services .small-note,
 .photo-card,.person,#about .about-photo,#about > div:last-child > *,
 .review-card,#reviews .section-tail,#map .visit-photo,
 #map .visit-info > :not(.copy-feedback),#faq > div:first-child > *,
 #faq details,.booking > *
):not(.is-revealed){opacity:0}

footer .footer-instagram,.visit-info .contact-instagram{display:inline-flex;align-items:center;gap:9px;color:#cbd0cf;text-decoration:none;border:0;transition:color .2s}
footer .footer-instagram:hover,.visit-info .contact-instagram:hover{color:var(--cave-paper);text-decoration:none}
footer .footer-instagram:focus-visible,.visit-info .contact-instagram:focus-visible{outline:2px solid var(--cave-paper);outline-offset:4px}
footer .footer-instagram svg,.visit-info .contact-instagram svg{display:block;width:18px;height:18px;flex:none}
.visit-info .contact-instagram{margin-top:6px;font-size:15px}

/* Booking choices on narrow screens: one clear, tap-friendly block per barber. */
@media(max-width:650px){
 .service-card .service-variants{display:grid;gap:8px;padding:0 14px 14px;border-left:0}
 .service-card .service-variant{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name price" "name time" "book book";align-items:start;column-gap:12px;row-gap:3px;margin:0;padding:13px 14px 12px;border:1px solid #ffffff24;border-radius:3px;background:#1a2223;box-shadow:none}
 .service-card .service-variant:hover,.service-card .service-variant:focus-within{border-color:#668da3;background:#202b2e;box-shadow:none}
 .service-card .service-variant .variant-name{grid-area:name;align-self:center;font-size:17px;line-height:1.2}
 .service-card .service-variant .variant-role{margin-top:4px;font-size:13px}
 .service-card .service-variant strong{grid-area:price;font-size:20px;line-height:1.1}
 .service-card .service-variant .variant-duration{grid-area:time;align-self:start;text-align:right;font-size:12px;line-height:1.2;color:#c3cbc5}
 .service-card .service-variant .service-book{grid-area:book;width:100%;min-height:44px;margin-top:10px;padding:9px 14px;font-size:13px}
}