:root{--teal:#1d8a92;--teal2:#e6f4f4;--navy:#12405a;--red:#c8322c;--ink:#16252e;--mut:#5a6b74;--bg:#fbfaf7}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:400 17px/1.6 Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto;display:block}figure{margin:0}
a{color:inherit}
h1,h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:.2em 0 .4em}
h1{font-size:clamp(2.4rem,5vw,4rem)}h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.eyebrow{font:600 .8rem/1 Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:0}
.sign{display:inline-block;font:800 1rem/1 "Bricolage Grotesque";letter-spacing:.12em;color:var(--red);background:#fff;border:2px solid var(--teal);padding:.35em .55em;border-radius:3px}
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid #e4ecec}
.bar{display:flex;align-items:center;gap:22px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.bt{font:700 .86rem/1.1 "Bricolage Grotesque";color:var(--navy)}
nav{margin-left:auto;display:flex;gap:22px}nav a{text-decoration:none;font-weight:500;color:var(--navy)}nav a:hover{color:var(--red)}
.btn{display:inline-block;padding:.85em 1.3em;border-radius:999px;font-weight:600;text-decoration:none;border:2px solid transparent;transition:.2s}
.btn.red{background:var(--red);color:#fff}.btn.red:hover{background:#a8261f}
.btn.ghost{border-color:var(--navy);color:var(--navy)}.btn.ghost:hover{background:var(--navy);color:#fff}
.btn.sm{padding:.6em 1.05em;font-size:.92rem}
.hero{position:relative;min-height:min(86vh,780px);display:flex;align-items:flex-end}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero-card{position:relative;margin:0 0 48px max(22px,calc((100vw - 1180px)/2 + 22px));max-width:560px;background:#fff;border-radius:18px;padding:34px 34px 28px;box-shadow:0 20px 50px rgba(18,64,90,.22);border-top:6px solid var(--teal)}
.lede{font-size:1.12rem;color:var(--mut);margin:0 0 22px}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.facts{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.facts li{background:var(--teal2);color:var(--navy);font-size:.86rem;font-weight:600;padding:.35em .8em;border-radius:999px}
.stripe{height:14px;background:repeating-linear-gradient(-45deg,var(--red) 0 14px,#fff 14px 28px,var(--navy) 28px 42px,#fff 42px 56px)}
.cuts{display:grid;grid-template-columns:1fr 1.3fr;gap:30px 60px;padding-top:90px;padding-bottom:70px;align-items:start}
.intro p:last-child{color:var(--mut)}
.svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.svc li{background:#fff;border:1px solid #e3eaea;border-radius:14px;padding:22px;border-left:5px solid var(--teal)}
.svc b{display:block;font:800 1.25rem "Bricolage Grotesque";color:var(--navy)}.svc span{color:var(--mut);font-size:.95rem}
.note{grid-column:2;margin:0;color:var(--mut);font-size:.92rem}
.photos{background:var(--navy);padding:60px 0}
.grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:170px;gap:12px}
.grid figure{overflow:hidden;border-radius:12px}.grid img{width:100%;height:100%;object-fit:cover}
.g1{grid-column:span 3;grid-row:span 2}.g2{grid-column:span 3}.g3{grid-column:span 3}
.g4{grid-column:span 3;grid-row:span 1}.g5{grid-column:span 3;grid-row:span 1}
.g4 img{object-position:50% 40%}.g5 img{object-position:50% 50%}
.barbers{padding:80px 22px 40px;text-align:center}
.names{list-style:none;padding:0;margin:26px 0 0;display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
.names li{font:800 1.5rem "Bricolage Grotesque";color:var(--navy);background:#fff;border:2px solid var(--teal);border-radius:12px;padding:.5em 1.2em}
.reviews{padding:50px 0 80px}
.rv{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
blockquote{margin:0;background:#fff;border-radius:14px;padding:24px;border:1px solid #e3eaea}
blockquote p{margin:0 0 12px}cite{font-style:normal;color:var(--teal);font-weight:600;font-size:.86rem}
.visit{display:grid;grid-template-columns:1fr 1.25fr;gap:24px;padding-bottom:90px}
.vcard{background:var(--teal2);border-radius:18px;padding:34px}
.vcard>p{margin:0}
.hours{width:100%;border-collapse:collapse;margin:22px 0 10px}.hours td{padding:.6em 0;border-bottom:1px solid #c8e0e0}.hours td:last-child{text-align:right;font-weight:600}
.small{color:var(--mut);font-size:.92rem;margin:0 0 20px!important}
.vside{display:grid;gap:14px;grid-template-rows:auto 1fr}
.vside img{border-radius:18px;width:100%;aspect-ratio:16/7;object-fit:cover}
.vside iframe{width:100%;height:320px;border:0;border-radius:18px}
.foot{background:var(--ink);color:#cfdadf;padding:40px 0 90px;text-align:center}.foot p{margin:.8em 0 0}
.credit{font-size:.85rem;opacity:.75}
.fab{display:none}
@media (max-width:860px){
 nav,.top .btn{display:none}
 .hero{min-height:auto;flex-direction:column;align-items:stretch}
 .hero>img{position:relative;height:52vh;min-height:300px}
 .hero-card{margin:-50px 14px 30px;padding:26px 22px}
 .cuts,.visit{grid-template-columns:1fr}.note{grid-column:1}
 .cuts{padding-top:60px}
 .svc{grid-template-columns:1fr}
 .grid{grid-template-columns:1fr 1fr;grid-auto-rows:150px}
 .g1{grid-column:span 2;grid-row:span 2}.g4,.g5{grid-column:span 1}.g2,.g3{grid-column:span 1}
 .rv{grid-template-columns:1fr}
 .fab{display:block;position:fixed;left:14px;right:14px;bottom:14px;z-index:30;text-align:center;background:var(--red);color:#fff;font-weight:600;padding:1em;border-radius:999px;text-decoration:none;box-shadow:0 10px 26px rgba(0,0,0,.25)}
}
@media (max-width:860px){.fab{opacity:0;transform:translateY(120%);pointer-events:none;transition:.25s}.fab.show{opacity:1;transform:none;pointer-events:auto}}