:root{--bg:#0b0b0b;--card:#151515;--line:#262626;--text:#f7f3ee;--muted:#a39e97;--red:#e0262b;--red2:#9c1216;--white:#fff}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.demo{background:var(--white);color:#111;text-align:center;font-size:12px;font-weight:600;padding:6px 16px}

/* NAV */
nav{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:rgba(11,11,11,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:padding .3s}
nav.shrink{padding:8px 20px}
.logo{font-family:Anton,sans-serif;font-size:22px;letter-spacing:1px;display:flex;align-items:center;gap:10px}
.logo span{color:var(--red)}
.pole{width:10px;height:26px;border-radius:5px;border:1.5px solid var(--white);background:repeating-linear-gradient(-45deg,var(--red) 0 5px,var(--white) 5px 10px,#1d3fbf 10px 15px,var(--white) 15px 20px);background-size:100% 28px;animation:pole 1.2s linear infinite}
@keyframes pole{to{background-position:0 28px}}
.navlinks{display:flex;gap:24px;font-size:14px;color:var(--muted)}
.navlinks a{position:relative}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--red);transition:width .25s}
.navlinks a:hover{color:var(--text)}
.navlinks a:hover::after{width:100%}

.btn{display:inline-block;background:var(--red);color:var(--white);font-weight:800;padding:14px 26px;border-radius:6px;font-size:15px;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.btn::before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .5s}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(224,38,43,.45)}
.btn:hover::before{left:130%}
.btn.ghost{background:transparent;border:1.5px solid var(--text)}
.btn.ghost:hover{box-shadow:0 10px 30px rgba(255,255,255,.12)}
.pulse{animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(224,38,43,.6)}70%{box-shadow:0 0 0 16px rgba(224,38,43,0)}100%{box-shadow:0 0 0 0 rgba(224,38,43,0)}}

/* HERO (base from demo) */
.hero{min-height:88vh;display:flex;align-items:center;padding:60px 20px;position:relative;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;background:var(--bg) center/cover no-repeat}
.hero-bg.has-img{filter:grayscale(.3) brightness(.35)}
.hero::before{content:"";position:absolute;inset:-20%;z-index:-1;background:
 radial-gradient(circle at 75% 30%,rgba(224,38,43,.35),transparent 45%),
 radial-gradient(circle at 10% 90%,rgba(156,18,22,.4),transparent 40%);animation:drift 12s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(-4%,3%) scale(1.08)}}
.stripes{position:absolute;right:-120px;top:-80px;width:420px;height:140%;z-index:-1;opacity:.12;transform:rotate(18deg);
 background:repeating-linear-gradient(-45deg,var(--red) 0 30px,transparent 30px 60px);background-size:100% 170px;animation:pole2 3s linear infinite}
@keyframes pole2{to{background-position:0 170px}}
.hero-inner{max-width:1100px;margin:0 auto;width:100%}
.tag{color:var(--red);font-weight:800;letter-spacing:4px;font-size:13px;text-transform:uppercase}
h1{font-family:Anton,sans-serif;font-size:clamp(58px,12.5vw,150px);line-height:.9;margin:16px 0 22px;text-transform:uppercase}
h1 .line{display:block;overflow:hidden}
h1 .line span{display:inline-block;transform:translateY(110%);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards}
h1 .line:nth-child(2) span{animation-delay:.15s}
h1 .line:nth-child(3) span{animation-delay:.3s}
h1 em{font-style:normal;color:var(--red);-webkit-text-stroke:0}
h1 .outline{color:transparent;-webkit-text-stroke:2px var(--text)}
@keyframes rise{to{transform:translateY(0)}}
.fade-up{opacity:0;transform:translateY(24px);animation:fadeUp .8s ease forwards}
.d1{animation-delay:.55s}.d2{animation-delay:.7s}.d3{animation-delay:.85s}
@keyframes fadeUp{to{opacity:1;transform:none}}
.hero p{color:var(--muted);max-width:520px;font-size:18px;margin-bottom:30px}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.rating{margin-top:36px;display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px}
.rating b{font-family:Anton,sans-serif;font-size:30px;color:var(--text)}
.stars{color:var(--red);letter-spacing:3px;font-size:18px}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);width:24px;height:38px;border:2px solid var(--muted);border-radius:12px}
.scroll-cue::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--red);animation:wheel 1.6s infinite}
@keyframes wheel{to{transform:translateY(12px);opacity:0}}

/* MARQUEE */
.marquee{background:var(--red);overflow:hidden;white-space:nowrap;padding:16px 0;transform:rotate(-1.5deg) scale(1.03);border-top:2px solid var(--white);border-bottom:2px solid var(--white)}
.track{display:inline-block;animation:scroll 22s linear infinite;font-family:Anton,sans-serif;font-size:clamp(22px,4vw,34px);letter-spacing:2px;text-transform:uppercase}
.track span{margin:0 22px}
.track i{font-style:normal;margin:0 6px;opacity:.7}
@keyframes scroll{to{transform:translateX(-50%)}}

section{padding:90px 20px}
.wrap{max-width:1100px;margin:0 auto}
h2{font-family:Anton,sans-serif;font-size:clamp(40px,7vw,64px);text-transform:uppercase;margin-bottom:10px;line-height:1}
h2 span{color:var(--red)}
.sub{color:var(--muted);margin-bottom:44px}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(2){transition-delay:.08s}.stagger.in>*:nth-child(3){transition-delay:.16s}
.stagger.in>*:nth-child(4){transition-delay:.24s}.stagger.in>*:nth-child(5){transition-delay:.32s}
.stagger.in>*:nth-child(6){transition-delay:.4s}

/* TUESDAY */
.special{background:var(--card);border:2px solid var(--red);border-radius:14px;padding:40px 30px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;position:relative;overflow:hidden}
.special::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,rgba(224,38,43,.18) 50%,transparent 60%);background-size:250% 100%;animation:shine 3.5s infinite}
@keyframes shine{from{background-position:150% 0}to{background-position:-50% 0}}
.special small{color:var(--red);font-weight:800;letter-spacing:3px;font-size:12px}
.special h3{font-family:Anton,sans-serif;font-size:clamp(34px,6vw,54px);text-transform:uppercase;line-height:1;margin:6px 0}
.special p{color:var(--muted)}
.big-price{font-family:Anton,sans-serif;font-size:clamp(80px,14vw,130px);line-height:1;color:var(--red);position:relative;z-index:1}
.big-price sup{font-size:.4em;vertical-align:top}

/* MENU */
.menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;justify-content:space-between;gap:16px;align-items:flex-start;position:relative;overflow:hidden;transition:transform .25s,border-color .25s}
.item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);transform:scaleY(0);transform-origin:bottom;transition:transform .3s}
.item:hover{transform:translateY(-4px);border-color:#3a3a3a}
.item:hover::before{transform:scaleY(1)}
.item h3{font-size:18px;margin-bottom:4px}
.item p{color:var(--muted);font-size:14px}
.price{font-family:Anton,sans-serif;font-size:30px;color:var(--red);white-space:nowrap}

/* GALLERY */
.alt{background:#0f0f0f}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:220px;gap:12px}
.gallery .tile:nth-child(1){grid-row:span 2}
.gallery .tile:nth-child(4){grid-column:span 2}
.tile{position:relative;border-radius:12px;overflow:hidden;background:var(--card);cursor:pointer}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s;filter:grayscale(.2)}
.tile:hover img{transform:scale(1.08);filter:none}
.tile .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:13px;letter-spacing:2px;text-transform:uppercase;
 background:repeating-linear-gradient(-45deg,#151515 0 18px,#191919 18px 36px)}
.tile .ph svg{width:42px;height:42px;stroke:var(--red);animation:snip 1.8s ease-in-out infinite}
@keyframes snip{50%{transform:rotate(-14deg)}}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(transparent,rgba(0,0,0,.85));font-weight:800;font-size:14px;transform:translateY(100%);transition:transform .35s}
.tile:hover .cap{transform:none}
.tile::after{content:"";position:absolute;inset:0;border:2px solid var(--red);border-radius:12px;opacity:0;transition:opacity .3s}
.tile:hover::after{opacity:1}
.ig{margin-top:28px;text-align:center}

/* TEAM */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.barber{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .3s;transform-style:preserve-3d}
.photo{height:300px;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--red),var(--red2))}
.photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.barber:hover .photo img{transform:scale(1.06)}
.photo .init{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:Anton,sans-serif;font-size:120px;color:rgba(255,255,255,.9)}
.barber.b2 .photo{background:linear-gradient(135deg,#ececec,#7a7a7a)}
.barber.b2 .photo .init{color:var(--red2)}
.barber-body{padding:22px}
.barber-body small{color:var(--red);font-weight:800;letter-spacing:2px;text-transform:uppercase;font-size:12px}
.barber-body h3{font-size:26px;margin:4px 0 8px}
.barber-body p{color:var(--muted);font-size:15px}
.perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:44px}
.perk{border-left:3px solid var(--red);padding:6px 0 6px 16px}
.perk b{display:block}
.perk span{color:var(--muted);font-size:14px}

/* VISIT */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.info{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:30px}
.info h3{color:var(--red);font-size:13px;letter-spacing:2px;text-transform:uppercase;margin:22px 0 6px}
.info h3:first-child{margin-top:0}
.info p{font-size:17px}
.hours div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:15px}
.hours .off{color:var(--muted)}
.hours .today{color:var(--red);font-weight:800}
.open-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;margin-bottom:6px}
.open-badge i{width:9px;height:9px;border-radius:50%;background:#2ecc71;animation:blink 1.4s infinite}
.open-badge.closed i{background:var(--muted);animation:none}
@keyframes blink{50%{opacity:.3}}
iframe{width:100%;height:100%;min-height:360px;border:0;border-radius:14px;filter:grayscale(1) invert(.92) contrast(.9)}

footer{border-top:1px solid var(--line);padding:34px 20px;text-align:center;color:var(--muted);font-size:13px}
footer .logo{justify-content:center;margin-bottom:10px;color:var(--text)}
.callbar{display:none}

@media(max-width:760px){
 .navlinks{display:none}
 .visit{grid-template-columns:1fr}
 section{padding:64px 16px}
 .hero{padding:50px 16px}
 .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:170px}
 .gallery .tile:nth-child(4){grid-column:span 1}
 .tile .cap{transform:none}
 .special{padding:30px 22px}
 .callbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:40}
 .callbar a{flex:1;text-align:center;padding:16px;font-weight:800}
 .callbar a:first-child{background:var(--card);border-top:1px solid var(--line)}
 .callbar a:last-child{background:var(--red);color:var(--white)}
 footer{padding-bottom:84px}
}

/* ===== v2 additions: depth layers, Silk + 3D pole, stats, FAQ ===== */
:root{--ease-out:cubic-bezier(.16,1,.3,1)}
.btn-sm{padding:9px 16px;font-size:13px}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.hero{min-height:92vh}
.layer{position:absolute;inset:0;pointer-events:none}
.silk{z-index:-3;background:radial-gradient(circle at 70% 35%,#5a0b0f,#0b0b0b 65%)}
.silk canvas{width:100%;height:100%;display:block}
.hero-vignette{z-index:-2;background:linear-gradient(90deg,rgba(11,11,11,.92) 0%,rgba(11,11,11,.7) 45%,rgba(11,11,11,.15) 100%),linear-gradient(0deg,#0b0b0b 0%,transparent 30%)}
.hero::before{display:none}
.pole3d{z-index:-1;left:auto;right:4vw;width:min(34vw,420px);top:6%;bottom:6%;display:flex;align-items:center;justify-content:center}
.pole3d canvas{width:100%!important;height:100%!important}
.pole-fallback{width:48px;height:60%;border-radius:24px;transform:rotate(-7deg);box-shadow:0 0 60px rgba(224,38,43,.45)}
.pole3d.live .pole-fallback{display:none}
.hero-inner{position:relative}
h1{text-shadow:0 10px 40px rgba(0,0,0,.5)}
.stats-band{padding:56px 20px 0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.stat{padding:26px 20px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:Anton,sans-serif;font-size:clamp(34px,4.5vw,48px);line-height:1;color:var(--text)}
.stat:nth-child(2) b{color:var(--red)}
.stat span{color:var(--muted);font-size:13px;letter-spacing:1px;text-transform:uppercase}
.special-copy{position:relative;z-index:1}
.special .h3{font-family:Anton,sans-serif;font-size:clamp(34px,6vw,54px);text-transform:uppercase;line-height:1;margin:6px 0}
.pt-0{padding-top:20px}
.item.feat{border-color:var(--red)}
.narrow{max-width:780px}
.faq{display:grid;gap:12px;margin-top:30px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:0 22px;transition:border-color .25s}
.faq details[open]{border-color:var(--red)}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:800;font-size:17px;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:Anton,sans-serif;color:var(--red);font-size:24px;line-height:1;transition:transform .3s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);padding-bottom:20px}
.mt{margin-top:24px}
footer p{margin-top:6px}
footer a{color:var(--text)}
footer .logo span{color:var(--red)}
.credit{opacity:.6;font-size:12px}
@media(max-width:900px){
 .pole3d{right:-6vw;width:52vw;top:auto;bottom:4%;height:62%;opacity:.28}
 .hero-vignette{background:linear-gradient(90deg,rgba(11,11,11,.9),rgba(11,11,11,.55)),linear-gradient(0deg,#0b0b0b 0%,transparent 35%)}
}
@media(max-width:760px){
 .stats{grid-template-columns:1fr 1fr}
 .stat:nth-child(2){border-right:0}
 .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
 .stats-band{padding:40px 16px 0}
}

@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 h1 .line span,.fade-up,.reveal,.stagger>*{opacity:1!important;transform:none!important}
}