*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#08070a;--bg2:#100e14;--bg3:#1a1720;
  --gold:#c9a55c;--gold2:#dfc088;--gold3:#a8873f;--brass:#b8944a;
  --cream:#e8dcc4;--warm:#d4c4a0;--text:#8a8090;--muted:#5a5464;
  --white:#f2ede6;
  --heading:'Bebas Neue',sans-serif;
  --elegant:'Cormorant Garamond',Georgia,serif;
  --body:'Barlow',sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden}

/* Film grain */
body::after{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");opacity:.4}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.reveal.vis{opacity:1;transform:translateY(0)}

/* Demo banner */
.demo{background:var(--gold3);color:var(--bg);text-align:center;padding:.4rem;font-size:.75rem;font-weight:600;letter-spacing:.05em;position:relative;z-index:10000}
.demo a{color:var(--bg);text-decoration:underline}

/* Marquee */
.marquee{position:fixed;top:28px;left:0;right:0;z-index:999;background:var(--bg2);border-bottom:1px solid rgba(201,165,92,.08);overflow:hidden;height:32px;display:flex;align-items:center}
.marquee-track{display:flex;gap:2.5rem;white-space:nowrap;animation:scroll 40s linear infinite;font-family:var(--heading);font-size:.78rem;letter-spacing:.18em;color:var(--gold)}
.marquee-track span{display:inline-block}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* NAV */
nav{position:fixed;top:60px;left:0;right:0;z-index:1000;padding:0 3rem;height:60px;display:flex;align-items:center;justify-content:space-between;background:rgba(8,7,10,.85);backdrop-filter:blur(16px);border-bottom:1px solid rgba(201,165,92,.08);transition:transform .3s}
.nav-logo{font-family:var(--heading);font-size:1.5rem;color:var(--gold);letter-spacing:.2em;text-decoration:none;position:relative}
.nav-logo::after{content:'EST. 2019';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);font-family:var(--body);font-size:.5rem;letter-spacing:.35em;color:var(--muted);white-space:nowrap}
.nav-mid{display:flex;gap:2.5rem;list-style:none}
.nav-mid a{color:var(--muted);text-decoration:none;font-size:.72rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;transition:color .3s}
.nav-mid a:hover{color:var(--gold)}
.nav-book{background:transparent;border:1px solid var(--gold3);color:var(--gold);padding:.45rem 1.5rem;font-family:var(--heading);font-size:.85rem;letter-spacing:.15em;text-decoration:none;transition:all .3s;position:relative;overflow:hidden}
.nav-book::before{content:'';position:absolute;inset:0;background:var(--gold);transform:translateY(100%);transition:transform .3s;z-index:-1}
.nav-book:hover{color:var(--bg)}
.nav-book:hover::before{transform:translateY(0)}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:9rem 2rem 4rem}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(201,165,92,.06),transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(201,165,92,.04),transparent 40%),linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)}
.hero-lines{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-lines::before{content:'';position:absolute;top:10%;left:8%;width:1px;height:60%;background:linear-gradient(180deg,transparent,rgba(201,165,92,.1),transparent);animation:linePulse 4s ease infinite}
.hero-lines::after{content:'';position:absolute;top:15%;right:12%;width:1px;height:50%;background:linear-gradient(180deg,transparent,rgba(201,165,92,.08),transparent);animation:linePulse 5s ease infinite}
@keyframes linePulse{0%,100%{opacity:.4}50%{opacity:1}}
.hero-ornament{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;opacity:.04;pointer-events:none;animation:slowSpin 120s linear infinite;color:var(--gold)}
@keyframes slowSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.hero-content{position:relative;z-index:2;text-align:center;max-width:800px}
.hero-rule{width:60px;height:1px;background:var(--gold3);margin:0 auto 2rem;opacity:.6}
.hero-tagline{font-family:var(--elegant);font-size:clamp(1rem,2vw,1.3rem);font-weight:400;font-style:italic;color:var(--gold2);margin-bottom:1.5rem;letter-spacing:.05em}
.hero h1{font-family:var(--heading);font-size:clamp(4rem,10vw,8rem);color:var(--white);line-height:.88;letter-spacing:.06em;margin-bottom:1.5rem}
.hero h1 .thin{font-family:var(--elegant);font-size:clamp(1.5rem,3.5vw,2.5rem);font-weight:400;display:block;color:var(--gold);letter-spacing:.15em;margin-bottom:.5rem;font-style:italic}
.hero-desc{font-size:1rem;color:var(--text);max-width:500px;margin:0 auto 2.5rem;line-height:1.9;font-weight:300}
.hero-actions{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;align-items:center}
.hero-cta{display:inline-block;background:var(--gold);color:var(--bg);padding:1rem 3rem;font-family:var(--heading);font-size:1rem;letter-spacing:.2em;text-decoration:none;position:relative;overflow:hidden;transition:all .3s}
.hero-cta::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:translateX(-120%);transition:transform .6s}
.hero-cta:hover::before{transform:translateX(120%)}
.hero-cta:hover{background:var(--gold2);transform:translateY(-2px);box-shadow:0 8px 30px rgba(201,165,92,.2)}
.hero-call{font-family:var(--heading);font-size:1.1rem;color:var(--gold);letter-spacing:.15em;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s}
.hero-call:hover{border-color:var(--gold)}
.hero-scroll{position:absolute;bottom:3rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--muted);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase}
.scroll-line{width:1px;height:40px;background:linear-gradient(180deg,var(--gold3),transparent);animation:scrollPulse 2s ease infinite}
@keyframes scrollPulse{0%,100%{opacity:.3;height:40px}50%{opacity:.8;height:50px}}

/* STATS */
.stats{padding:3.5rem 5vw;background:var(--bg2);border-top:1px solid rgba(201,165,92,.06);border-bottom:1px solid rgba(201,165,92,.06)}
.stats-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.stat{position:relative}
.stat:not(:last-child)::after{content:'';position:absolute;right:-1rem;top:25%;height:50%;width:1px;background:rgba(201,165,92,.1)}
.stat-num{font-family:var(--heading);font-size:clamp(2rem,4.5vw,3.5rem);color:var(--gold);letter-spacing:.04em;line-height:1}
.stat-label{font-family:var(--body);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:.5rem}

/* DIVIDER */
.divider{padding:3rem 0;text-align:center;position:relative}
.divider .div-line{width:200px;height:1px;background:linear-gradient(90deg,transparent,var(--gold3),transparent);margin:0 auto;opacity:.3}

/* ABOUT */
.about{padding:6rem 5vw;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;max-width:1200px;margin:0 auto}
.about-visual{position:relative;aspect-ratio:4/5;background:var(--bg2);border:1px solid rgba(201,165,92,.08);overflow:hidden;transition:transform .5s}
.about-visual:hover{transform:scale(1.02)}
.about-visual::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 40%,rgba(201,165,92,.08),transparent 50%),linear-gradient(135deg,var(--bg2),var(--bg3))}
.about-visual svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:65%;height:auto;color:var(--gold3);opacity:.15}
.about-visual .overlay-text{position:absolute;bottom:2rem;left:2rem;right:2rem}
.about-visual .overlay-text h3{font-family:var(--heading);font-size:2rem;color:var(--white);letter-spacing:.1em}
.about-visual .overlay-text p{font-family:var(--elegant);font-size:1.1rem;color:var(--gold2);font-style:italic;margin-top:.25rem}
.about-text .about-tag{font-family:var(--heading);font-size:.75rem;letter-spacing:.3em;color:var(--gold3);margin-bottom:1.5rem}
.about-text h2{font-family:var(--elegant);font-size:clamp(2rem,3.5vw,2.8rem);color:var(--cream);line-height:1.2;margin-bottom:1.5rem;font-weight:400}
.about-text h2 em{color:var(--gold);font-style:italic}
.about-text p{font-size:.95rem;margin-bottom:1.25rem;font-weight:300;line-height:1.9}
.about-link{display:inline-block;margin-top:.5rem;font-family:var(--heading);font-size:.85rem;color:var(--gold);letter-spacing:.18em;text-decoration:none;border-bottom:1px solid var(--gold3);padding-bottom:.2rem;transition:color .3s,border-color .3s}
.about-link:hover{color:var(--gold2);border-color:var(--gold)}

/* SERVICES */
.services{padding:6rem 5vw;background:var(--bg2);position:relative}
.services::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent,transparent 59px,rgba(201,165,92,.02) 59px,rgba(201,165,92,.02) 60px),repeating-linear-gradient(0deg,transparent,transparent 59px,rgba(201,165,92,.02) 59px,rgba(201,165,92,.02) 60px);pointer-events:none}
.services-inner{max-width:1200px;margin:0 auto;position:relative;z-index:1}
.services-header{text-align:center;margin-bottom:4rem}
.services-header .tag{font-family:var(--heading);font-size:.75rem;letter-spacing:.3em;color:var(--gold3);margin-bottom:1rem}
.services-header h2{font-family:var(--heading);font-size:clamp(2.5rem,5vw,4rem);color:var(--white);letter-spacing:.08em}
.services-header .sub{font-family:var(--elegant);font-size:1.1rem;color:var(--gold2);font-style:italic;margin-top:.5rem}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(201,165,92,.06)}
.svc-card{background:var(--bg2);padding:2.5rem 2rem;text-align:center;position:relative;overflow:hidden;transition:all .4s}
.svc-card::before{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .4s}
.svc-card:hover::before{transform:scaleX(1)}
.svc-card:hover{background:var(--bg3);transform:translateY(-4px)}
.svc-icon{width:50px;height:50px;margin:0 auto 1.25rem;position:relative;transition:transform .4s}
.svc-card:hover .svc-icon{transform:rotate(-6deg) scale(1.1)}
.svc-icon svg{width:100%;height:100%;color:var(--gold3)}
.svc-card:hover .svc-icon svg{color:var(--gold)}
.svc-name{font-family:var(--heading);font-size:1.2rem;color:var(--white);letter-spacing:.1em;margin-bottom:.25rem}
.svc-price{font-family:var(--elegant);font-size:1.4rem;color:var(--gold);font-style:italic;margin-bottom:.75rem}
.svc-desc{font-size:.85rem;color:var(--muted);line-height:1.7;font-weight:300}
.svc-cta-row{text-align:center;margin-top:3rem}
.ghost-btn{display:inline-block;background:transparent;border:1px solid var(--gold3);color:var(--gold);padding:.85rem 2rem;font-family:var(--heading);font-size:.85rem;letter-spacing:.2em;text-decoration:none;transition:all .3s}
.ghost-btn:hover{background:var(--gold);color:var(--bg)}

/* BARBERS */
.barbers{padding:6rem 5vw}
.barbers-inner{max-width:1200px;margin:0 auto}
.barber-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:2rem}
.barber-card{background:var(--bg2);border:1px solid rgba(201,165,92,.06);overflow:hidden;transition:all .4s}
.barber-card:hover{transform:translateY(-6px);border-color:rgba(201,165,92,.2);box-shadow:0 20px 40px rgba(0,0,0,.4)}
.barber-portrait{aspect-ratio:4/5;position:relative;background:linear-gradient(180deg,var(--bg3),var(--bg2));display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(201,165,92,.08);overflow:hidden}
.barber-portrait::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(201,165,92,.1),transparent 60%)}
.barber-portrait svg{width:65%;color:var(--gold3);opacity:.25;transition:opacity .4s}
.barber-card:hover .barber-portrait svg{opacity:.45}
.barber-years{position:absolute;top:1rem;right:1rem;background:rgba(201,165,92,.1);border:1px solid rgba(201,165,92,.2);color:var(--gold);font-family:var(--heading);font-size:.7rem;letter-spacing:.15em;padding:.25rem .6rem;z-index:2}
.b-rico{background:linear-gradient(160deg,#1a1720,#0f0d12)}
.b-jay{background:linear-gradient(160deg,#100e14,#1a1720)}
.b-deon{background:linear-gradient(180deg,#1a1720,#100e14)}
.b-saul{background:linear-gradient(200deg,#100e14,#1a1720)}
.barber-info{padding:1.5rem}
.barber-info h3{font-family:var(--heading);font-size:1.1rem;color:var(--white);letter-spacing:.12em;margin-bottom:.25rem}
.barber-spec{font-family:var(--elegant);font-size:.9rem;color:var(--gold);font-style:italic;margin-bottom:.75rem}
.barber-info p{font-size:.82rem;color:var(--muted);font-weight:300;line-height:1.7}

/* GALLERY */
.gallery{padding:5rem 5vw;max-width:1200px;margin:0 auto}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:280px 280px;gap:6px;margin-top:2rem}
.gallery-item{position:relative;overflow:hidden;background:var(--bg2);cursor:pointer}
.gallery-item.tall{grid-row:span 2}
.gallery-item::before{content:'';position:absolute;inset:0;z-index:1;transition:transform .6s}
.gallery-item:hover::before{transform:scale(1.05)}
.g1::before{background:linear-gradient(135deg,rgba(201,165,92,.1),rgba(26,23,32,.9)),radial-gradient(circle at 40% 60%,rgba(201,165,92,.15),transparent 60%)}
.g2::before{background:linear-gradient(180deg,rgba(201,165,92,.06),rgba(16,14,20,.95)),radial-gradient(ellipse at 50% 30%,rgba(201,165,92,.12),transparent 50%)}
.g3::before{background:linear-gradient(135deg,rgba(16,14,20,.8),rgba(201,165,92,.08)),radial-gradient(circle at 70% 40%,rgba(201,165,92,.1),transparent 40%)}
.g4::before{background:linear-gradient(45deg,rgba(201,165,92,.08),rgba(16,14,20,.9)),radial-gradient(circle at 30% 70%,rgba(201,165,92,.12),transparent 50%)}
.g5::before{background:linear-gradient(220deg,rgba(201,165,92,.1),rgba(26,23,32,.9)),radial-gradient(circle at 60% 50%,rgba(201,165,92,.15),transparent 60%)}
.g6::before{background:linear-gradient(0deg,rgba(201,165,92,.08),rgba(16,14,20,.95)),radial-gradient(ellipse at 50% 60%,rgba(201,165,92,.12),transparent 50%)}
.gallery-item .g-label{position:absolute;bottom:1rem;left:1rem;z-index:2;font-family:var(--heading);font-size:.7rem;letter-spacing:.2em;color:var(--gold3);transition:opacity .3s}
.gallery-item:hover .g-label{opacity:0}
.gallery-item svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40%;opacity:.08;color:var(--gold);transition:opacity .4s,transform .4s;z-index:1}
.gallery-item:hover svg{opacity:.2;transform:translate(-50%,-50%) scale(1.1)}
.g-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,7,10,0) 50%,rgba(8,7,10,.92));z-index:3;opacity:0;transition:opacity .35s;display:flex;flex-direction:column;justify-content:flex-end;padding:1.25rem;gap:.5rem}
.gallery-item:hover .g-overlay{opacity:1}
.g-tag{font-family:var(--heading);font-size:.7rem;letter-spacing:.2em;color:var(--gold);align-self:flex-start;border:1px solid var(--gold3);padding:.2rem .5rem}
.g-likes{font-family:var(--body);font-size:.78rem;color:var(--cream);font-weight:400}

/* TESTIMONIALS */
.testimonials{padding:6rem 5vw;max-width:1200px;margin:0 auto}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
.testi-card{background:var(--bg2);border:1px solid rgba(201,165,92,.06);padding:2rem;transition:all .4s;position:relative;overflow:hidden}
.testi-card::before{content:'"';position:absolute;top:-1rem;right:1rem;font-family:var(--heading);font-size:6rem;color:var(--gold);opacity:.08;line-height:1}
.testi-card:hover{border-color:rgba(201,165,92,.2);transform:translateY(-3px)}
.stars{color:var(--gold);font-size:1rem;letter-spacing:.15em;margin-bottom:1rem}
.testi-card p{font-family:var(--elegant);font-size:1.05rem;color:var(--cream);font-style:italic;line-height:1.7;margin-bottom:1.25rem;font-weight:400}
.testi-author{font-family:var(--body);font-size:.78rem;color:var(--muted);letter-spacing:.1em}

/* PRESS */
.press{padding:3rem 5vw;background:var(--bg2);border-top:1px solid rgba(201,165,92,.06);border-bottom:1px solid rgba(201,165,92,.06);overflow:hidden}
.press-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:3rem;flex-wrap:wrap;justify-content:center}
.press-label{font-family:var(--body);font-size:.65rem;letter-spacing:.3em;color:var(--muted);text-transform:uppercase}
.press-name{font-family:var(--heading);font-size:1.1rem;letter-spacing:.2em;color:var(--gold3);transition:color .3s;cursor:default}
.press-name:hover{color:var(--gold)}

/* HOURS */
.hours-section{padding:6rem 5vw;max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.hours-left .tag{font-family:var(--heading);font-size:.75rem;letter-spacing:.3em;color:var(--gold3);margin-bottom:1rem}
.hours-left h2{font-family:var(--elegant);font-size:2.2rem;color:var(--cream);font-weight:400;line-height:1.2;margin-bottom:1.5rem}
.hours-left h2 em{color:var(--gold);font-style:italic}
.hours-left p{font-size:.92rem;font-weight:300;line-height:1.9;margin-bottom:2rem}
.addr-block .addr-line{font-family:var(--elegant);font-size:1.05rem;color:var(--cream);font-style:italic}
.addr-phone{display:inline-block;margin-top:.75rem;font-family:var(--heading);font-size:1.4rem;color:var(--gold);letter-spacing:.1em;text-decoration:none;transition:color .3s}
.addr-phone:hover{color:var(--gold2)}
.hours-card{background:var(--bg2);border:1px solid rgba(201,165,92,.08);padding:2rem;position:relative}
.hours-card::before{content:'';position:absolute;top:-1px;left:2rem;right:2rem;height:2px;background:linear-gradient(90deg,transparent,var(--gold3),transparent)}
.hours-row{display:flex;justify-content:space-between;padding:.65rem 0;border-bottom:1px solid rgba(201,165,92,.04)}
.hours-row:last-child{border-bottom:none}
.hours-row .day{color:var(--cream);font-weight:400;font-size:.9rem}
.hours-row .time{color:var(--gold2);font-family:var(--elegant);font-size:.95rem;font-style:italic}
.hours-row .closed{color:var(--muted)}

/* SIGNUP */
.signup{padding:5rem 5vw;background:var(--bg2);border-top:1px solid rgba(201,165,92,.06)}
.signup-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.signup-text .tag{font-family:var(--heading);font-size:.75rem;letter-spacing:.3em;color:var(--gold3);margin-bottom:1rem}
.signup-text h3{font-family:var(--elegant);font-size:1.8rem;color:var(--cream);font-weight:400;line-height:1.2;margin-bottom:.5rem}
.signup-text p{font-size:.88rem;color:var(--muted);font-weight:300}
.signup-form{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;position:relative}
.signup-form input{flex:1;min-width:180px;background:var(--bg);border:1px solid rgba(201,165,92,.15);color:var(--cream);padding:.95rem 1.2rem;font-family:var(--body);font-size:.92rem;letter-spacing:.05em;transition:border-color .3s}
.signup-form input:focus{outline:none;border-color:var(--gold)}
.signup-form button{background:var(--gold);color:var(--bg);border:none;padding:.95rem 2rem;font-family:var(--heading);font-size:.95rem;letter-spacing:.2em;cursor:pointer;transition:background .3s}
.signup-form button:hover{background:var(--gold2)}
.signup-msg{position:absolute;bottom:-1.6rem;left:0;font-size:.75rem;color:var(--gold);opacity:0;transition:opacity .3s;letter-spacing:.05em}
.signup-msg.vis{opacity:1}

/* CTA */
.cta{padding:8rem 5vw;text-align:center;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(201,165,92,.06),transparent 50%)}
.cta-inner{position:relative;z-index:1}
.cta h2{font-family:var(--heading);font-size:clamp(3rem,7vw,5.5rem);color:var(--white);letter-spacing:.06em;line-height:.9;margin-bottom:1.5rem}
.cta .sub{font-family:var(--elegant);font-size:1.2rem;color:var(--gold2);font-style:italic;margin-bottom:2.5rem}
.cta-btn{display:inline-block;background:var(--gold);color:var(--bg);padding:1.1rem 3.5rem;font-family:var(--heading);font-size:1.1rem;letter-spacing:.2em;text-decoration:none;transition:all .3s;position:relative;overflow:hidden}
.cta-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:translateX(-120%);transition:transform .6s}
.cta-btn:hover::before{transform:translateX(120%)}
.cta-btn:hover{background:var(--gold2);transform:translateY(-3px);box-shadow:0 12px 40px rgba(201,165,92,.25)}
.cta-addr{margin-top:2.5rem;font-size:.82rem;color:var(--muted);font-weight:300}
.cta-phone{font-family:var(--heading);font-size:1.8rem;color:var(--gold);letter-spacing:.1em;margin-top:.75rem;text-decoration:none;display:inline-block;transition:color .3s}
.cta-phone:hover{color:var(--gold2)}

/* FOOTER */
footer{border-top:1px solid rgba(201,165,92,.06);padding:2.5rem 5vw;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.foot-left{font-size:.75rem;color:var(--muted);font-weight:300}
.foot-right{font-size:.72rem;color:var(--muted)}
.foot-right a{color:var(--gold3);text-decoration:none;transition:color .2s}
.foot-right a:hover{color:var(--gold)}

/* SUB-PAGE STYLES */
.subhero{padding:11rem 5vw 5rem;text-align:center;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);position:relative;overflow:hidden;border-bottom:1px solid rgba(201,165,92,.06)}
.subhero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(201,165,92,.05),transparent 60%);pointer-events:none}
.subhero-tag{font-family:var(--heading);font-size:.75rem;letter-spacing:.3em;color:var(--gold3);margin-bottom:1rem;position:relative}
.subhero h1{font-family:var(--heading);font-size:clamp(3rem,7vw,5rem);color:var(--white);letter-spacing:.05em;margin-bottom:1rem;position:relative}
.subhero h1 em{color:var(--gold);font-family:var(--elegant);font-style:italic;letter-spacing:0;text-transform:none}
.subhero p{font-family:var(--elegant);font-size:1.15rem;color:var(--gold2);font-style:italic;max-width:550px;margin:0 auto;position:relative}

.crumbs{padding:1.5rem 5vw;font-family:var(--body);font-size:.75rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.crumbs a{color:var(--gold3);text-decoration:none;transition:color .3s}
.crumbs a:hover{color:var(--gold)}

/* SERVICES PAGE */
.svc-detail{padding:5rem 5vw;max-width:1100px;margin:0 auto}
.svc-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.svc-detail-card{background:var(--bg2);border:1px solid rgba(201,165,92,.06);padding:2.5rem;transition:all .4s}
.svc-detail-card:hover{border-color:rgba(201,165,92,.2);transform:translateY(-3px)}
.svc-detail-card .price-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid rgba(201,165,92,.08)}
.svc-detail-card .price-row h3{font-family:var(--heading);font-size:1.4rem;color:var(--white);letter-spacing:.1em}
.svc-detail-card .price-row .price{font-family:var(--elegant);font-size:1.6rem;color:var(--gold);font-style:italic}
.svc-detail-card .duration{font-family:var(--body);font-size:.7rem;letter-spacing:.2em;color:var(--gold3);text-transform:uppercase;margin-bottom:1rem}
.svc-detail-card .body{font-size:.92rem;color:var(--text);line-height:1.85;font-weight:300;margin-bottom:1.25rem}
.svc-detail-card ul{list-style:none;padding:0}
.svc-detail-card ul li{font-size:.85rem;color:var(--muted);padding:.35rem 0 .35rem 1.3rem;position:relative;font-weight:300}
.svc-detail-card ul li::before{content:'+';position:absolute;left:0;color:var(--gold);font-family:var(--heading)}

/* FAQ */
.faq{padding:5rem 5vw;max-width:850px;margin:0 auto}
.faq-item{border-bottom:1px solid rgba(201,165,92,.08);padding:1.5rem 0}
.faq-q{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:var(--heading);font-size:1.05rem;color:var(--cream);letter-spacing:.08em;transition:color .3s}
.faq-q:hover{color:var(--gold)}
.faq-q .icon{font-family:var(--heading);font-size:1.5rem;color:var(--gold);line-height:1;transition:transform .3s}
.faq-item.open .faq-q .icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s}
.faq-item.open .faq-a{max-height:300px;padding-top:1rem}
.faq-a p{font-size:.92rem;color:var(--muted);line-height:1.85;font-weight:300}

/* PROCESS */
.process{padding:5rem 5vw;background:var(--bg2);border-top:1px solid rgba(201,165,92,.06)}
.process-inner{max-width:1100px;margin:0 auto}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3rem;position:relative}
.process-steps::before{content:'';position:absolute;top:35px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--gold3),transparent);z-index:0}
.step{text-align:center;position:relative;z-index:1}
.step-num{width:70px;height:70px;border:1px solid var(--gold3);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--heading);font-size:1.5rem;color:var(--gold);margin:0 auto 1rem;background:var(--bg2);letter-spacing:.05em;transition:all .3s}
.step:hover .step-num{background:var(--gold);color:var(--bg);transform:scale(1.05)}
.step h4{font-family:var(--heading);font-size:1rem;color:var(--white);letter-spacing:.12em;margin-bottom:.5rem}
.step p{font-size:.82rem;color:var(--muted);font-weight:300;line-height:1.7}

/* BOOK PAGE */
.booking{padding:5rem 5vw;max-width:1000px;margin:0 auto}
.book-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--bg2);border:1px solid rgba(201,165,92,.06);margin-bottom:2rem}
.book-step{padding:1.25rem;text-align:center;position:relative;font-family:var(--heading);font-size:.78rem;letter-spacing:.18em;color:var(--muted);border-right:1px solid rgba(201,165,92,.06)}
.book-step:last-child{border-right:none}
.book-step.active{color:var(--gold);background:rgba(201,165,92,.04)}
.book-step .num{display:inline-block;width:24px;height:24px;border-radius:50%;border:1px solid currentColor;font-size:.7rem;line-height:22px;margin-right:.5rem}
.book-step.active .num{background:var(--gold);color:var(--bg);border-color:var(--gold)}

.book-section{background:var(--bg2);border:1px solid rgba(201,165,92,.06);padding:2.5rem;margin-bottom:1rem}
.book-section h3{font-family:var(--heading);font-size:1.3rem;color:var(--white);letter-spacing:.1em;margin-bottom:1.5rem}

.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.choice-grid.svc{grid-template-columns:repeat(2,1fr)}
.choice-grid.barbers{grid-template-columns:repeat(4,1fr)}
.choice-grid.times{grid-template-columns:repeat(6,1fr)}
.choice{background:var(--bg);border:1px solid rgba(201,165,92,.1);padding:1rem;cursor:pointer;text-align:center;transition:all .3s;font-family:var(--body);font-size:.88rem;color:var(--cream);position:relative;overflow:hidden}
.choice:hover{border-color:var(--gold);background:rgba(201,165,92,.04)}
.choice.selected{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.choice .label{font-family:var(--heading);font-size:.8rem;letter-spacing:.15em;display:block;margin-bottom:.25rem}
.choice .price-mini{font-family:var(--elegant);font-size:.95rem;font-style:italic;color:var(--gold);transition:color .3s}
.choice.selected .price-mini{color:var(--bg)}

.day-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem;margin-bottom:1.5rem}
.day-card{background:var(--bg);border:1px solid rgba(201,165,92,.1);padding:.75rem;text-align:center;cursor:pointer;transition:all .3s}
.day-card:hover{border-color:var(--gold)}
.day-card.selected{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.day-card .dow{font-family:var(--heading);font-size:.7rem;letter-spacing:.18em;color:var(--muted);margin-bottom:.25rem}
.day-card .num{font-family:var(--elegant);font-size:1.4rem;color:var(--cream);font-style:italic}
.day-card.selected .dow,.day-card.selected .num{color:var(--bg)}

.summary{background:var(--bg);border:1px solid rgba(201,165,92,.15);padding:2rem;margin-top:2rem}
.summary h4{font-family:var(--heading);font-size:.95rem;color:var(--gold3);letter-spacing:.2em;margin-bottom:1.25rem}
.sum-row{display:flex;justify-content:space-between;align-items:center;padding:.65rem 0;font-size:.92rem;border-bottom:1px solid rgba(201,165,92,.04)}
.sum-row .lbl{color:var(--muted);font-family:var(--body);letter-spacing:.05em}
.sum-row .val{color:var(--cream);font-family:var(--elegant);font-style:italic}
.sum-row.total{border-bottom:none;border-top:1px solid rgba(201,165,92,.15);margin-top:.5rem;padding-top:1rem}
.sum-row.total .val{font-family:var(--heading);color:var(--gold);font-size:1.4rem;font-style:normal;letter-spacing:.05em}
.sum-confirm{display:block;width:100%;background:var(--gold);color:var(--bg);border:none;padding:1.1rem;font-family:var(--heading);font-size:1rem;letter-spacing:.2em;cursor:pointer;margin-top:1.5rem;transition:background .3s}
.sum-confirm:hover{background:var(--gold2)}

@media(max-width:900px){
  .marquee{display:none}
  nav{top:28px;padding:0 1.5rem}
  .nav-mid{display:none}
  .stats-inner{grid-template-columns:repeat(2,1fr);gap:2rem}
  .stat:nth-child(2)::after{display:none}
  .about{grid-template-columns:1fr;gap:3rem}
  .about-visual{max-height:350px}
  .svc-grid{grid-template-columns:1fr}
  .barber-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:200px 200px 200px}
  .gallery-item.tall{grid-row:span 1}
  .testi-grid{grid-template-columns:1fr}
  .hours-section{grid-template-columns:1fr;gap:3rem}
  .signup-inner{grid-template-columns:1fr;gap:2rem}
  .svc-detail-grid{grid-template-columns:1fr}
  .process-steps{grid-template-columns:repeat(2,1fr)}
  .process-steps::before{display:none}
  .choice-grid.svc,.choice-grid.barbers,.choice-grid.times{grid-template-columns:repeat(2,1fr)}
  .book-progress{grid-template-columns:1fr 1fr}
  .day-strip{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:600px){
  .hero h1{font-size:3.5rem}
  .gallery-grid{grid-template-columns:1fr;grid-template-rows:repeat(6,180px)}
}
