/* Classic barbershop: navy + barber-pole red/white stripes, Bebas Neue + Source Sans 3, centered pole-striped hero, big phone-number CTA */
:root{--bg:#f7f8fb;--surface:#ffffff;--ink:#12203a;--muted:#475369;--head:#12284c;--eyebrow:#a3141b;--primary:#a3141b;--onp:#ffffff;--accent:#e7ecf5;--ona:#12203a;--deep:#12284c;--ond:#ffffff;--hi:#ff9aa0;--line:#d5dbe6;--fd:"Bebas Neue",Impact,sans-serif;--fb:"Source Sans 3",system-ui,sans-serif;--hw:400;--hcase:uppercase;--hls:.02em;--radius:6px;--btnr:6px;--bw:1px;--shadow:0 10px 30px rgba(0,0,0,.08);--bshadow:0 6px 16px rgba(0,0,0,.14);--cw:.68;--map-land:#ece6d9;--map-sea:#a9d6e2;--hero-bg:#12284c;--h1span:#ff9aa0;--num:#a3141b}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--fb);color:var(--ink);background:var(--bg);line-height:1.6;font-size:17px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
svg{max-width:100%}
a{color:inherit}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;z-index:99;background:#fff;color:#000;padding:.5rem}
h1,h2,h3,h4{font-family:var(--fd);font-weight:var(--hw);line-height:1.04;margin:0;text-transform:var(--hcase);letter-spacing:var(--hls);color:var(--head)}
h1{font-size:clamp(2.8rem,9vw,6.2rem);overflow-wrap:anywhere}
h1 span{color:var(--h1span,var(--head))}
h2{font-size:clamp(2rem,5.2vw,3.3rem)}
h3{font-size:1.32rem;line-height:1.15}
h4{font-size:1.1rem}
p{margin:.5rem 0}
.wrap{max-width:1160px;margin:0 auto;padding:0 1.25rem}
section{padding:4.5rem 0}
.eyebrow{font-family:var(--fb);font-weight:800;text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;color:var(--eyebrow);margin:0 0 .7rem}
.lede{font-size:clamp(1.08rem,2.4vw,1.3rem);max-width:40ch;margin:1.1rem 0 0}
.hrs{font-weight:700;font-size:.92rem;margin-top:1rem}
.fine,.note{font-size:.88rem;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;font-family:var(--fb);font-weight:800;text-decoration:none;padding:.85rem 1.4rem;border-radius:var(--btnr);border:var(--bw) solid transparent;line-height:1.1;min-height:48px;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--primary);color:var(--onp);box-shadow:var(--bshadow);border-color:var(--bline,transparent)}
.btn-ghost{border-color:currentColor;color:inherit;background:transparent}
.btn.big{font-size:1.05rem;padding:1rem 1.6rem}
.btn.block{display:flex;width:100%}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.cta-row.center{justify-content:center}
.tag{display:inline-block;font-family:var(--fb);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;background:var(--accent);color:var(--ona);padding:.25rem .6rem;border-radius:var(--btnr);margin-bottom:.6rem}
.price{font-weight:800;color:var(--muted);font-size:.95rem}
.shead{margin-bottom:2.2rem;max-width:760px}
.card{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.6rem}
.card.pad0{padding:0;overflow:hidden}
.hero h1{color:var(--hero-head,var(--head))}.hero .eyebrow{color:var(--hero-eb,var(--eyebrow))}
.hs-grid>*,.hb-grid>*,.hm-grid>*,.mast-cols>*,.ind-grid>*,.bub-grid>*,.vt-head>*,.vs-grid>*,.vc-grid>*,.vt-grid>*,.side-layout>*{min-width:0}
.hs-text,.h-center .wrap,.h-poster .wrap,.hb-intro,.hm-text,.bt-main,.ind-grid>div:first-child,.bub-grid>div:first-child,.sw{container-type:inline-size}
.hero h1.fit{font-size:min(calc(100cqi / (var(--n) * var(--cw,.6))),6.4rem)!important}
.hero .btn-primary{background:var(--hero-btn,var(--primary));color:var(--hero-btn-ink,var(--onp))}
/* topbar */
.topbar{position:sticky;top:0;z-index:40;background:var(--tb-bg,var(--deep));color:var(--tb-ink,var(--ond));border-bottom:var(--bw) solid var(--tb-line,transparent)}
.tb-in{max-width:1160px;margin:0 auto;display:flex;align-items:center;gap:1rem;padding:.65rem 1.25rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--fd);font-weight:var(--hw);text-transform:var(--hcase);font-size:1.12rem;line-height:1.05;min-width:0}
.brand .mark{width:38px;height:38px;flex:none;border-radius:50%;background:var(--mark-bg,var(--primary));display:grid;place-items:center}
.brand .mark svg{width:28px;height:28px}
.nav{display:none;gap:1.5rem;margin-left:auto;font-weight:700}
.nav a{text-decoration:none}.nav a:hover{text-decoration:underline}
.pill{margin-left:auto;background:var(--pill-bg,var(--primary));color:var(--pill-ink,var(--onp));text-decoration:none;font-weight:800;font-size:.88rem;padding:.55rem 1rem;border-radius:var(--btnr);white-space:nowrap;border:var(--bw) solid var(--bline,transparent)}
.tb-light{--tb-bg:var(--bg);--tb-ink:var(--ink);--tb-line:var(--line)}
.tb-surface{--tb-bg:var(--surface);--tb-ink:var(--ink);--tb-line:var(--line)}
@media(max-width:520px){.pn{display:none}.brand{font-size:.98rem}}
/* rating badge */
.rbadge{display:inline-grid;justify-items:center;align-content:center;text-align:center;background:var(--rb-bg,var(--accent));color:var(--rb-ink,var(--ona));border-radius:50%;width:150px;height:150px;padding:1rem;line-height:1.1;box-shadow:var(--shadow);border:var(--bw) solid var(--line)}
.rbadge strong{font-family:var(--fd);font-size:2.6rem;line-height:1}
.rbadge .st{letter-spacing:.1em;font-size:.95rem}
.rbadge .rc{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
/* facts */
.facts{padding:2.2rem 0}
.fgrid{display:grid;gap:1rem}
.fact strong{display:block;font-family:var(--fd);font-weight:var(--hw);font-size:1.3rem;color:var(--head);line-height:1.15}
.fact span{color:var(--muted);font-size:.95rem}
.f-strip{background:var(--surface);border-block:var(--bw) solid var(--line)}
.f-cards .fact{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--radius);padding:1.2rem 1.3rem;box-shadow:var(--shadow)}
.f-dark{background:var(--deep)}.f-dark .fact strong{color:var(--ond)}.f-dark .fact span{color:var(--ond)}
.f-badges .fact{text-align:center;padding:1rem}
.f-badges .fact strong{font-size:1.5rem}
/* menu: cards */
.feature{display:grid;gap:1.5rem;align-items:center;background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.6rem;margin-bottom:1.25rem}
.f-art svg{width:min(260px,70vw);display:block;margin:0 auto}
.feature h3{font-size:clamp(1.7rem,4vw,2.4rem)}
.mgrid{display:grid;gap:1.1rem}
.mcard{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.4rem}
/* board */
.board{background:var(--board-bg,var(--deep));color:var(--board-ink,var(--ond));border-radius:var(--radius);padding:1.6rem 1.4rem;border:var(--board-border,0) solid var(--board-frame,transparent);box-shadow:var(--shadow)}
.b-list{list-style:none;margin:0;padding:0;display:grid;gap:1.15rem 2.4rem}
.b-row{display:flex;align-items:baseline;gap:.5rem}
.b-name{font-family:var(--fd);font-weight:var(--hw);font-size:1.35rem;text-transform:var(--hcase);line-height:1.1}
.b-dots{flex:1;border-bottom:3px dotted currentColor;opacity:.55;min-width:1rem;transform:translateY(-4px)}
.b-price{font-weight:800;white-space:nowrap;font-size:.92rem}
.b-tag{display:inline-block;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--board-hi,var(--hi));margin-top:.2rem}
.b-list p{margin:.25rem 0 0;font-size:.95rem}
/* numbered */
.num-list{list-style:none;margin:0;padding:0;border-top:var(--bwl,2px) solid var(--ink)}
.num-list li{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem;padding:1.4rem 0;border-bottom:var(--bwl,2px) solid var(--ink);align-items:start}
.num-list .n{font-family:var(--fd);font-size:clamp(2.4rem,7vw,4.2rem);line-height:.9;color:var(--num,var(--primary))}
.num-list h3{font-size:clamp(1.5rem,3.6vw,2.2rem)}
.num-list .price{grid-column:2}
/* receipt */
.receipt{max-width:560px;margin:0 auto;background:#fff;color:#1a1a1a;font-family:"Space Mono",ui-monospace,Menlo,monospace;padding:2rem 1.4rem;position:relative;box-shadow:0 18px 40px rgba(0,0,0,.18);
 -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/18px 51% repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/18px 51% repeat-x;
 mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/18px 51% repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/18px 51% repeat-x}
.r-head{text-align:center;font-size:.9rem;line-height:1.5}
.r-sep{text-align:center;overflow:hidden;white-space:nowrap;margin:.8rem 0;color:#555}
.r-row{display:grid;grid-template-columns:2ch 1fr auto;gap:.7rem;padding:.55rem 0;border-bottom:1px dashed #bbb;font-size:.92rem}
.r-d span{color:#4a4a4a;font-size:.85rem}
.r-p{font-weight:700}
.r-foot{text-align:center;font-size:.8rem;color:#444;margin-top:.6rem}
/* tiles */
.tiles{display:grid;gap:1.1rem}
.tile{display:grid;grid-template-columns:84px 1fr;gap:1.1rem;align-items:start;background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow)}
.t-ico{width:84px;height:84px;border-radius:var(--ico-r,24px);display:grid;place-items:center;background:var(--primary)}
.t1 .t-ico{background:var(--accent)}.t2 .t-ico{background:var(--deep)}
.t-ico svg{width:58px;height:58px}
/* services */
.svc-list{list-style:none;margin:0;padding:0;display:grid;gap:0 3rem}
.svc-list li{padding:1.4rem 0;border-bottom:1px solid var(--line)}
.s-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.svc-list h3{font-size:clamp(1.4rem,3vw,1.9rem)}
.svc-list .tag{background:transparent;color:var(--eyebrow);padding:0;margin:.3rem 0 0}
/* spec (auto) */
.specs{display:grid;gap:1rem}
.spec{display:grid;grid-template-columns:56px 1fr;gap:1rem;background:var(--surface);border:var(--bw) solid var(--line);border-left:6px solid var(--accent);border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow)}
.sp-ico{width:56px;height:56px;background:var(--accent);border-radius:8px;display:grid;place-items:center}.sp-ico svg{width:38px;height:38px}
.sp-q{grid-column:1/-1;justify-self:start;font-weight:800;font-size:.85rem;text-decoration:none;background:var(--deep);color:var(--ond);padding:.45rem .8rem;border-radius:6px}
/* stickers */
.stickers{display:grid;gap:1.3rem}
.stk{background:var(--surface);border:3px solid var(--ink);border-radius:var(--radius);padding:1.4rem;box-shadow:6px 6px 0 var(--ink)}
.stk.s0{transform:rotate(-1.2deg)}.stk.s1{transform:rotate(1deg);background:var(--stk1,var(--surface))}.stk.s2{transform:rotate(-.6deg)}.stk.s3{transform:rotate(1.4deg);background:var(--stk3,var(--surface))}
.minis{display:grid;gap:1rem;margin-top:1.4rem}
.minis>div{border:var(--bw) dashed var(--line);border-radius:var(--radius);padding:1.1rem 1.3rem;background:var(--surface)}
/* reviews */
.reviews{background:var(--rv-bg,var(--surface))}
.q{margin:0}
.q blockquote{margin:0;font-size:1.05rem}
.q figcaption{margin-top:.7rem;font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.pull-big .q blockquote{font-family:var(--fd);font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1.2;color:var(--head);text-transform:none;letter-spacing:0}
.pull-big{margin-bottom:2.2rem;padding-left:1.2rem;border-left:6px solid var(--accent)}
.qcols{display:grid;gap:1.6rem}
.qcols .q{border-top:var(--bwl,2px) solid var(--line);padding-top:1rem}
.qs{display:grid;gap:1.4rem}
.qs-bubbles .q blockquote{background:var(--bg);border:var(--bw) solid var(--line);border-radius:22px;padding:1.2rem 1.3rem;position:relative}
.qs-bubbles .q blockquote::after{content:"";position:absolute;left:28px;bottom:-14px;border:14px solid transparent;border-top-color:var(--bg);border-bottom:0}
.qs-bubbles .q figcaption{padding-left:1.2rem;margin-top:1.1rem}
.qs-notes .q{background:var(--note0,#fff4a8);color:#222;padding:1.3rem;box-shadow:0 10px 20px rgba(0,0,0,.12)}
.qs-notes .q figcaption{color:#444}
.qs-notes .n0{transform:rotate(-1.5deg)}.qs-notes .n1{transform:rotate(1.2deg);background:var(--note1,#ffd6e0)}.qs-notes .n2{transform:rotate(-.6deg);background:var(--note2,#d4f1ff)}.qs-notes .n3{transform:rotate(1.6deg);background:var(--note3,#dcf7d2)}
.qs-serif .q{border-bottom:1px solid var(--line);padding:1.4rem 0}
.qs-serif .q blockquote{font-family:var(--fd);font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.35;font-style:italic;color:var(--head);text-transform:none;letter-spacing:0}
.qs-wall{display:block;columns:1;column-gap:1.4rem}
.qs-wall .q{break-inside:avoid;margin-bottom:1.4rem;background:var(--bg);border:var(--bw) solid var(--line);border-radius:var(--radius);padding:1.3rem;box-shadow:var(--shadow)}
.qs-wall .q.n0 blockquote{font-size:1.25rem}
.newscols{columns:1;column-gap:2rem;column-rule:1px solid var(--line)}
.newscols .q{break-inside:avoid;margin-bottom:1.4rem}
.newscols .q blockquote{font-size:1rem}
.press{margin-top:1.6rem;font-weight:800;color:var(--eyebrow)}
/* visit */
.hours{width:100%;border-collapse:collapse;margin:1rem 0}
.hours th,.hours td{text-align:left;padding:.55rem .3rem;border-bottom:1px solid var(--line)}
.hours th{font-weight:700}
.hours td{text-align:right}
.hours tr.closed td{color:var(--muted)}
.hours tr.is-today{background:var(--today,var(--bg))}
.hours tr.is-today th::after{content:" · today";font-weight:800;font-size:.8rem}
.map{display:block;position:relative;border-radius:calc(var(--radius) * .7);overflow:hidden;text-decoration:none}
.map svg{display:block;width:100%;height:auto}
.map-label{position:absolute;left:12px;bottom:12px;background:var(--deep);color:var(--ond);font-weight:800;font-size:.85rem;padding:.45rem .8rem;border-radius:var(--btnr)}
address{font-style:normal;margin:1rem 0}
.perks{list-style:none;padding:0;margin:.6rem 0;display:flex;flex-wrap:wrap;gap:.5rem}
.perks li{background:var(--bg);color:var(--ink);border:1px solid var(--line);font-weight:700;font-size:.82rem;padding:.35rem .75rem;border-radius:var(--btnr)}
.chips{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem}
.chips li{background:var(--bg);border:var(--bw) solid var(--line);border-radius:calc(var(--radius) * .6);padding:.6rem .75rem;display:flex;flex-direction:column;font-size:.86rem}
.chips li b{font-family:var(--fd);font-weight:var(--hw);font-size:1rem;text-transform:var(--hcase)}
.chips li.closed span{color:var(--muted)}
.chips li.is-today{background:var(--primary);color:var(--onp);border-color:var(--primary)}
.chips li.is-today span{color:var(--onp)}
.vs-grid,.vc-grid,.vt-grid{display:grid;gap:1.25rem}
.vc-grid{margin-top:1.25rem}
.vt-head{display:grid;gap:1.5rem;align-items:center;margin-bottom:2rem}
.vt-art svg{width:100%;max-width:520px;display:block;margin:0 auto}
.today-line{font-size:1.1rem}
.v-truck .chips{grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.v-truck .chips{grid-template-columns:repeat(4,1fr)}}
.spec{grid-template-rows:auto 1fr}.sp-q{align-self:end}
.stk .tag{background:var(--ink);color:var(--surface)}
.tag{box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.side .btn-primary{background:var(--pill-bg,var(--primary));color:var(--pill-ink,var(--onp))}
.trust .btn-primary{background:var(--accent);color:var(--ona)}
/* special */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1rem;counter-reset:s}
.steps li{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow)}
.bn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--primary);color:var(--onp);font-weight:900;font-family:var(--fd);margin-bottom:.7rem}
.steps a{font-weight:800}
.trust{background:var(--deep);color:var(--ond)}
.trust h2{color:var(--ond)}.trust .eyebrow{color:var(--hi)}
.tbadges{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem}
.tbadges li{border:2px solid var(--hi);border-radius:var(--radius);padding:1rem;text-align:center}
.tbadges strong{display:block;font-family:var(--fd);font-size:1.3rem}
.tbadges span{font-size:.85rem}
/* connect */
.connect{text-align:center;background:var(--cn-bg,var(--deep));color:var(--cn-ink,var(--ond))}
.connect h2{color:var(--cn-ink,var(--ond));margin-bottom:1rem}
.giant{display:block;font-family:var(--fd);font-weight:var(--hw);font-size:clamp(2.2rem,9vw,6rem);text-decoration:none;line-height:1.1;color:var(--cn-ink,var(--ond))}
.connect .btn-primary{--primary:var(--cn-btn,var(--accent));--onp:var(--cn-btn-ink,var(--ona))}
/* footer */
.footer{background:var(--ft-bg,var(--deep));color:var(--ft-ink,var(--ond));padding:2rem 0 6rem;text-align:center;font-size:.92rem}
.footer .fine{color:inherit;opacity:1}
.footer p{max-width:72ch;margin:.4rem auto}
.fab{position:fixed;right:16px;bottom:16px;z-index:50;background:var(--primary);color:var(--onp);font-weight:900;text-decoration:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.28);border:var(--bw) solid var(--bline,transparent)}
/* responsive base */
@media(min-width:760px){
 .nav{display:flex}.pill{margin-left:1rem}
 .fgrid{grid-template-columns:repeat(3,1fr)}
 .feature{grid-template-columns:.9fr 1.3fr;padding:2.2rem}
 .mgrid,.tiles,.specs,.stickers,.minis{grid-template-columns:repeat(2,1fr)}
 .b-list,.svc-list{grid-template-columns:1fr 1fr}
 .num-list li{grid-template-columns:7rem 1fr auto}.num-list .price{grid-column:auto;align-self:center}
 .qcols{grid-template-columns:repeat(2,1fr)}
 .qs{grid-template-columns:repeat(2,1fr)}
 .qs-serif{grid-template-columns:1fr 1fr;column-gap:3rem}
 .qs-wall,.newscols{columns:2}
 .vs-grid,.vc-grid,.vt-grid{grid-template-columns:1fr 1fr}
 .vt-head{grid-template-columns:1.1fr 1fr}
 .chips{grid-template-columns:repeat(4,1fr)}
 .steps{grid-template-columns:repeat(3,1fr)}
 .fab{display:none}.footer{padding-bottom:2rem}
}
@media(min-width:1050px){
 .mgrid,.tiles,.stickers{grid-template-columns:repeat(3,1fr)}
 .qcols{grid-template-columns:repeat(3,1fr)}
 .qs-bubbles,.qs-notes{grid-template-columns:repeat(3,1fr)}
 .qs-wall,.newscols{columns:3}
 .chips{grid-template-columns:repeat(7,1fr)}
}

.h-center{text-align:center;background:var(--hero-bg,var(--deep));color:var(--hero-ink,var(--ond));padding:3.2rem 0 4.5rem}
.h-center h1{color:var(--hero-head,var(--ond));margin:0 auto;max-width:14ch}
.h-center .lede{margin:1.1rem auto 0}
.h-center .eyebrow{color:var(--hero-eb,var(--hi))}
.hc-art{max-width:300px;margin:0 auto 1.4rem}
.hc-art .art{width:100%;display:block}
@media(min-width:860px){.h-center{padding:4.5rem 0 6rem}}

/* theme */
.h-center{border-block:22px solid transparent;border-image:repeating-linear-gradient(-45deg,#a3141b 0 18px,#fff 18px 36px,#12284c 36px 54px,#fff 54px 72px) 22}
.h-center h1{font-size:clamp(4rem,14vw,9rem);line-height:.9}.connect{background:#a3141b}