/* Central Barbershop shared styles */
:root{
  --navy:#1f3561;
  --red:#c62d35;
  --brass:#b08a3e;
  --page:#ffffff;
  --soft:#f3f6fa;
  --tint:#e8eef7;
  --ink:#27303f;
  --muted:#5f6878;
  --line:#e1e6ee;
  --display:"Limelight", Georgia, "Times New Roman", serif;
  --text:"Libre Franklin", "Franklin Gothic Book", Arial, sans-serif;
  --wrap:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--text);font-size:1.125rem;line-height:1.65;-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{color:var(--red)}
a:focus-visible,button:focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}
h1,h2,h3{line-height:1.2;margin:0 0 .6em;color:var(--navy)}
h2{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,4vw,2.6rem)}
h3{font-size:1.25rem;font-weight:600}
p{margin:0 0 1em;max-width:62ch}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:.75rem 1rem;z-index:100}
.skip:focus{left:1rem}

/* barber-pole stripe */
.pole{height:6px;background:repeating-linear-gradient(-45deg,var(--red) 0 10px,#fff 10px 20px,var(--navy) 20px 30px,#fff 30px 40px);background-size:56.57px 6px;animation:spin 4s linear infinite}
@keyframes spin{to{background-position:56.57px 0}}
@media (prefers-reduced-motion:reduce){.pole{animation:none}html{scroll-behavior:auto}}

/* top bar */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:1rem;min-height:66px}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--navy);text-decoration:none;font-family:var(--display);font-size:1.3rem;white-space:nowrap}
.brand img{width:42px;height:42px}
.nav{display:flex;gap:.15rem;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:1rem;padding:.5rem .7rem;border-radius:6px;white-space:nowrap}
.nav a:hover{background:var(--soft);color:var(--red)}
.nav a[aria-current="page"]{background:var(--tint);color:var(--red)}
.callbtn{display:inline-flex;align-items:center;gap:.5rem;background:var(--red);color:#fff;text-decoration:none;font-weight:600;padding:.6rem 1.1rem;border-radius:999px;white-space:nowrap}
.callbtn:hover{background:#a8232a}
.callbtn svg{width:18px;height:18px;fill:currentColor}
@media (max-width:1040px){
  html{scroll-padding-top:150px}
  .topbar .wrap{flex-wrap:wrap;gap:.25rem .75rem;padding-top:.5rem}
  .nav{order:3;width:100%;margin:0;padding:0 0 .5rem;flex-wrap:wrap;justify-content:center;overflow:visible;gap:.1rem .15rem}
  .nav a{padding:.45rem .6rem}
  .topbar .callbtn{margin-left:auto}
}
@media (max-width:420px){.brand span{display:none}}

/* home hero */
.hero{background:linear-gradient(180deg,#fff 0%,var(--soft) 100%);padding:3rem 0;border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:3rem;align-items:center}
.hero-logo{width:110px;margin-bottom:.75rem}
.since{font-family:var(--display);color:var(--brass);font-size:1.35rem;margin:0 0 .25rem}
.hero h1{font-family:var(--text);font-weight:600;font-size:clamp(1.9rem,3.8vw,2.7rem);line-height:1.15;margin-bottom:.75rem;max-width:18ch}
.lede{font-size:1.2rem;color:var(--muted);max-width:44ch}
.status{display:inline-flex;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.4rem 1rem;font-weight:600;margin:.25rem 0 1.4rem}
.dot{width:10px;height:10px;border-radius:50%;background:#a3aab6;flex:none}
.status.open .dot{background:#2fb35c;box-shadow:0 0 0 4px rgba(47,179,92,.18)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.hero-actions .callbtn{font-size:1.2rem;padding:.8rem 1.4rem}
.ghost{display:inline-flex;align-items:center;color:var(--navy);text-decoration:none;font-weight:600;padding:.8rem 1.25rem;border:2px solid var(--line);border-radius:999px;background:#fff}
.ghost:hover{border-color:var(--navy)}
.slides{position:relative;border-radius:12px;overflow:hidden;background:var(--tint);aspect-ratio:4/3;box-shadow:0 10px 30px rgba(31,53,97,.12)}
.slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.slides img.on{opacity:1}
.slide-ctl{position:absolute;bottom:.75rem;right:.75rem;display:flex;gap:.4rem}
.slide-ctl button{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--navy);font-size:1.4rem;line-height:1;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.slide-ctl button:hover{background:#fff;color:var(--red)}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;gap:2rem}.hero{padding-top:1.75rem}.hero-logo{width:80px}}

/* inner page heading */
.pagehead{background:linear-gradient(180deg,#fff 0%,var(--soft) 100%);padding:2.5rem 0 2rem;border-bottom:1px solid var(--line)}
.pagehead h1{font-family:var(--display);font-weight:400;font-size:clamp(2.1rem,5vw,3rem);margin:0 0 .3rem}
.pagehead .lede{margin:0}

/* sections */
section{padding:4rem 0}
.alt{background:var(--soft)}
.two{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:start}
@media (max-width:860px){.two{grid-template-columns:1fr;gap:2rem}section{padding:3rem 0}}
.welcome-note{border-left:4px solid var(--red);padding:.15rem 0 .15rem 1rem;font-size:1.2rem;color:var(--navy)}
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.zoom{padding:0;border:0;background:none;cursor:zoom-in;display:block;width:100%;border-radius:10px;overflow:hidden}
.zoom img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.zoom:hover img{transform:scale(1.04)}
.photo-pair .zoom{aspect-ratio:1/1}
.hint{font-size:.95rem;color:var(--muted);margin-top:.5rem}
.press{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3rem}
@media (max-width:760px){.press{grid-template-columns:1fr}}
.clipping{background:#fff;border:1px solid var(--line);border-top:4px solid var(--brass);border-radius:10px;padding:1.5rem;display:flex;flex-direction:column;justify-content:center}
.clipping .src{font-size:.95rem;color:var(--muted);margin:0 0 .4rem}
.clipping h3{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;font-size:1.5rem}
.clipping a{font-weight:600}
.video{aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--tint)}
.video iframe{width:100%;height:100%;border:0}

/* services */
.menu-intro{color:var(--muted)}
.menu-list{list-style:none;margin:1.5rem 0 0;padding:0;columns:2;column-gap:3rem}
@media (max-width:760px){.menu-list{columns:1}}
.menu-list li{break-inside:avoid;border-bottom:1px solid var(--line)}
.menu-list button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:1rem;width:100%;padding:.7rem 0;cursor:zoom-in;font-weight:600;font-size:1.15rem;color:var(--ink)}
.menu-list button:hover span{color:var(--red)}
.menu-list button:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.menu-list img{width:54px;height:54px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 0 0 2px var(--brass);flex:none}
.menu-list small{display:block;font-weight:400;color:var(--muted);font-size:.95rem}
.menu-list .more{padding:.9rem 0;color:var(--brass);font-family:var(--display);font-size:1.35rem;border:0}
.ny{display:grid;grid-template-columns:1.4fr 1fr;align-items:center;margin-top:3rem;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.ny .zoom{border-radius:0;height:100%}
.ny p{font-family:var(--display);font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1.3;margin:0;padding:1.5rem 2rem;color:var(--navy)}
.ny p button{all:unset;cursor:zoom-in;color:var(--red);border-bottom:2px solid var(--red)}
.ny p button:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
@media (max-width:700px){.ny{grid-template-columns:1fr}}

/* VIP */
.vip-tag{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:1.3rem;color:var(--red);margin:0 0 1rem}
.vip-desc{font-size:1.2rem}
.gift{display:grid;grid-template-columns:160px 1fr;gap:1.5rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.5rem;margin-top:1.5rem}
@media (max-width:560px){.gift{grid-template-columns:1fr}.gift img{max-width:200px}}
.gift h3{margin-bottom:.4rem}
.gift p{margin-bottom:.6rem}
.gift a.btn{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;font-weight:600;padding:.65rem 1.2rem;border-radius:999px}
.gift a.btn:hover{background:var(--red)}
blockquote{margin:2rem 0 0;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:1.45rem;line-height:1.4;color:var(--navy)}
blockquote footer{font-family:var(--text);font-style:normal;font-size:1rem;color:var(--muted);margin-top:.5rem}

/* staff */
.today-strip{background:var(--tint);color:var(--navy);border-radius:10px;padding:.9rem 1.25rem;margin:0 0 2rem;font-size:1.15rem;max-width:none}
.today-strip strong{color:var(--red)}
.staff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}
.barber{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.barber .zoom{border-radius:0;aspect-ratio:1/1}
.barber .body{padding:1rem}
.barber h3{margin:0 0 .5rem}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:.6rem}
.days span{text-align:center;font-size:.8rem;font-weight:600;padding:.3rem 0;border-radius:4px;background:#f0f2f5;color:#a0a7b3}
.days span.w{background:var(--navy);color:#fff}
.days span.today{outline:2px solid var(--red);outline-offset:1px}
.barber p{font-size:.98rem;color:var(--muted);margin:0}
.byday{margin-top:3rem}
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;min-width:600px;background:#fff}
th,td{padding:.7rem .6rem;text-align:center;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--tint);color:var(--navy);font-weight:600}
td{line-height:1.8;border-bottom:0}
td.today{background:#fcefef;font-weight:600}
th.today{background:var(--red);color:#fff}
.caption{font-size:1rem;color:var(--muted);margin-top:.6rem}

/* hours & location */
.hours{list-style:none;padding:0;margin:0 0 1.5rem;border-top:1px solid var(--line)}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding:.75rem .25rem;border-bottom:1px solid var(--line);font-size:1.2rem}
.hours li.today{font-weight:600;color:var(--red)}
.addr{font-style:normal;font-size:1.2rem;line-height:1.55;margin-bottom:1rem}
.addr strong{display:block;font-size:1.35rem;color:var(--navy)}
.map{border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--tint);border:1px solid var(--line)}
.map iframe{width:100%;height:100%;border:0}
.links{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:1rem;font-weight:600}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.5rem}

/* earoma */
.earoma-pics{display:flex;gap:1.25rem;justify-content:center;align-items:flex-end}
.earoma-pics .zoom{width:auto}
.earoma-pics img{height:255px;width:auto}

/* footer */
footer.site{background:var(--soft);color:var(--muted);padding:2.5rem 0 2rem;font-size:1rem;border-top:1px solid var(--line)}
footer.site .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center}
footer.site img{width:90px}
footer.site strong{color:var(--navy)}
footer.site a{color:var(--navy)}
footer.site .callbtn{color:#fff}
.footnav{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;font-weight:600;border-top:1px solid var(--line);padding-top:1.25rem}
.footnav a{text-decoration:none}
.footnav a:hover{color:var(--red)}
.footnav a[aria-current="page"]{color:var(--red)}
footer.site .credit{grid-column:1/-1;border-top:1px solid var(--line);padding-top:1.25rem;font-size:.9rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
@media (max-width:700px){footer.site .wrap{grid-template-columns:1fr;text-align:center;justify-items:center}.footnav{justify-content:center}}

/* lightbox */
dialog.lb{border:0;padding:0;background:transparent;max-width:92vw;max-height:92vh;overflow:visible}
dialog.lb::backdrop{background:rgba(20,28,45,.85)}
dialog.lb img{max-width:92vw;max-height:84vh;border-radius:6px;margin:0 auto;background:#fff}
dialog.lb p{color:#fff;text-align:center;margin:.6rem auto 0;font-weight:600}
dialog.lb button{position:fixed;top:1rem;right:1rem;width:48px;height:48px;border-radius:50%;border:0;background:#fff;color:var(--ink);font-size:1.8rem;line-height:1;cursor:pointer}

@media print{.topbar,.pole,.slides,.video,.map,.callbtn{display:none}}