:root{--char:#1c1b19;--char2:#26241f;--cream:#f3ead8;--cream2:#e9dcc2;--brass:#b8914a;--ox:#7a2430;--ink:#1c1b19}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:"Source Serif 4",Georgia,serif;background:var(--cream);color:var(--ink);line-height:1.6;padding-bottom:64px}
img{max-width:100%;display:block}a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
.demo-bar{background:var(--ox);color:var(--cream);text-align:center;font:500 13px Oswald,sans-serif;letter-spacing:.05em;padding:6px 10px}
.site-header{position:sticky;top:0;z-index:20;background:var(--char);border-bottom:3px solid var(--brass)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--cream);font:400 22px Rye,serif}
.brand img{height:46px;width:auto}
nav a{color:var(--cream);text-decoration:none;font:500 15px Oswald,sans-serif;text-transform:uppercase;letter-spacing:.08em;margin-left:22px}
nav a:hover{color:var(--brass)}
.menu-btn{display:none;background:none;border:1px solid var(--brass);color:var(--cream);font:500 14px Oswald;padding:6px 12px;text-transform:uppercase}
.btn{display:inline-block;background:var(--brass);color:var(--char);text-decoration:none;font:700 15px Oswald,sans-serif;text-transform:uppercase;letter-spacing:.08em;padding:13px 22px;border:2px solid var(--brass);border-radius:2px;transition:.2s}
.btn:hover{background:var(--ox);border-color:var(--ox);color:var(--cream)}
.btn-sm{padding:8px 14px;color:var(--char)!important}
.btn-ghost{background:transparent;color:var(--ox);border-color:var(--ox)}
.btn-ghost.light,.hero .btn-ghost{color:var(--cream);border-color:var(--cream)}
:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.hero{background:radial-gradient(circle at 70% 40%,#34302a,var(--char) 65%);color:var(--cream);padding:70px 0 80px;border-bottom:6px double var(--brass)}
.hero-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
.eyebrow{font:500 14px Oswald;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin:0}
h1{font:400 clamp(38px,6vw,66px)/1.08 Rye,serif;margin:14px 0}
h1 em{font-style:normal;color:var(--brass)}
.sub{font-size:21px;margin:0 0 26px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.small{font-size:15px;opacity:.9;margin-top:18px}
.hero-logo img{margin:auto;max-height:380px;width:auto;filter:drop-shadow(0 10px 30px #000a)}
.section{padding:72px 0}
.dark{background:var(--char);color:var(--cream)}.cream2{background:var(--cream2)}
.title{font:400 clamp(28px,4vw,42px) Rye,serif;text-align:center;margin:0 0 12px}
.title span{border-bottom:3px solid var(--brass);padding-bottom:6px}
.title.left{text-align:left}
.lede{text-align:center;max-width:640px;margin:18px auto 36px;font-size:18px}
.services{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.services li{background:#fffaf0;border:1px solid var(--cream2);border-top:4px solid var(--ox);padding:20px}
.services h3{font:700 19px Oswald;text-transform:uppercase;letter-spacing:.05em;margin:0 0 4px}
.services p{margin:0}
.note{text-align:center;font-weight:600;color:var(--ox);margin-top:26px}
.barbers{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px}
.barber{background:var(--char2);border:1px solid #3a362e;text-align:center;padding-bottom:18px}
.barber img{aspect-ratio:2/3;object-fit:cover;width:100%;border-bottom:3px solid var(--brass)}
.barber h3{font:700 19px Oswald;letter-spacing:.04em;margin:14px 8px 10px}
.barber .btn{padding:10px 16px;font-size:14px}
.ig{display:block;margin-top:10px;color:var(--brass);font-size:15px}
.center{text-align:center;margin-top:34px}
.gal-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:36px;align-items:center}
.gal-grid img{border:8px solid #fffaf0;box-shadow:0 8px 24px #0003}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:36px}
figure{margin:0;background:#fffaf0;padding:26px;border-left:5px solid var(--brass)}
blockquote{margin:0;font-size:20px;font-style:italic}
figcaption{margin-top:10px;font:500 13px Oswald;text-transform:uppercase;letter-spacing:.08em;color:var(--ox)}
.visit{display:grid;grid-template-columns:1fr 1.3fr;gap:36px;align-items:center}
address{font-style:normal;font-size:20px;margin:20px 0 10px}
.visit a:not(.btn){color:var(--brass)}
.hours{font-weight:600}
iframe{width:100%;height:360px;border:3px solid var(--brass)}
.footer{background:#121110;color:var(--cream);text-align:center;padding:40px 0;font-size:15px}
.footer img{margin:0 auto 10px;height:70px;width:auto}
.footer a{color:var(--brass)}.demo{opacity:.8;font-size:13px}
.mobile-bar{display:none}
@media (max-width:820px){
 .hero-grid,.gal-grid,.visit{grid-template-columns:1fr}
 .hero{padding:40px 0 50px;text-align:center}.ctas{justify-content:center}
 .hero-logo{order:-1}.hero-logo img{max-height:200px}
 .menu-btn{display:block}
 nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--char);padding:10px 20px 20px;border-bottom:3px solid var(--brass)}
 nav.open{display:block}nav a{display:block;margin:12px 0}
 .barbers{grid-template-columns:1fr 1fr;gap:12px}
 .mobile-bar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:30;border-top:3px solid var(--brass)}
 .mobile-bar a{flex:1;text-align:center;padding:16px;font:700 16px Oswald;text-transform:uppercase;letter-spacing:.08em;text-decoration:none;background:var(--char);color:var(--cream)}
 .mobile-bar a.primary{background:var(--brass);color:var(--char)}
}