/* The Community Barbershop — awning blue, pole red, window-decal white */
:root{
  --blue:#0a2fc4; --blue-deep:#071f86; --red:#af2731; --ink:#111214; --paper:#f7f6f2; --glass:#15181f;
  --c-primary:#0a2fc4; --c-ink:#111214; --c-bg:#f7f6f2; --c-border:#d9d6cc;
  --f-head:"Alegreya Sans",system-ui,sans-serif; --f-body:"Alegreya Sans",system-ui,sans-serif;
  --nav-h:96px;
}
body{background:var(--paper);font-size:1.125rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.demo-banner{margin:0;background:#111214;color:#f1f1f1}
a{color:var(--blue)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #ffbf3c;outline-offset:2px}

/* awning header */
.awning{position:sticky;top:0;z-index:60}
.awning-bar{background:var(--blue);display:flex;align-items:center;gap:20px;padding:10px clamp(14px,4vw,40px);min-height:84px}
.awning-brand{flex:0 0 auto;background:#fff;border-radius:999px;padding:4px 14px;display:block}
.awning-brand img{display:block;height:58px;width:auto}
.awning-nav{display:none;gap:22px;margin-left:auto}
.awning-nav a{color:#fff;text-decoration:none;font-weight:700;font-size:1.05rem;letter-spacing:.01em}
.awning-nav a:hover{text-decoration:underline;text-underline-offset:5px}
.awning-phone{color:#fff;font-weight:800;font-size:clamp(1.05rem,2.4vw,1.6rem);text-decoration:none;margin-left:auto;white-space:nowrap;letter-spacing:.02em}
.nav-toggle{background:#fff;border-color:#fff;flex:0 0 auto}
.scallop{height:16px;background:radial-gradient(circle at 12px 0,var(--blue) 11px,transparent 12px) 0 0/24px 16px repeat-x}
.mobile-menu{position:absolute;top:100%;left:0;right:0;bottom:auto;background:#fff;max-height:calc(100vh - 120px)}
@media (max-width:420px){.awning-phone{font-size:1rem}.awning-brand img{height:46px}}
@media (min-width:960px){.awning-nav{display:flex}.awning-phone{margin-left:28px}}

/* buttons */
.btn-pole,.btn-outline{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 22px;font-weight:800;font-size:1.05rem;text-decoration:none;border-radius:6px;cursor:pointer;font-family:inherit}
.btn-pole{color:#fff;border:0;background:var(--red);box-shadow:inset 0 -4px 0 rgba(0,0,0,.25)}
.btn-pole:hover{background:#951e28}
.btn-outline{color:var(--blue-deep);border:2px solid var(--blue-deep);background:transparent}
.btn-outline:hover{background:var(--blue-deep);color:#fff}

/* storefront */
.storefront{display:grid;gap:28px;padding:clamp(28px,5vw,64px) clamp(16px,5vw,64px);max-width:1240px;margin:0 auto;align-items:center}
.script-kicker{font-family:"Kaushan Script",cursive;color:var(--red);font-size:clamp(1.6rem,3.4vw,2.2rem);margin:0 0 6px}
.storefront h1{font-weight:800;font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.08;margin:0 0 16px;color:var(--ink)}
.lead{font-size:1.2rem;max-width:36ch;margin:0 0 22px}
.storefront-actions{display:flex;flex-wrap:wrap;gap:12px}
.storefront-photo{margin:0;background:#1d1f24;border:10px solid #3a3d44;border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.18)}
.storefront-photo button{all:unset;cursor:zoom-in;display:block}
.storefront-photo img{display:block;width:100%;height:auto}
.storefront-photo figcaption{background:#111214;color:#f1f1f1;font-size:.9rem;padding:6px 10px}
@media (min-width:900px){.storefront{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}

/* walk-in */
.walkin{display:grid;gap:24px;padding:clamp(32px,5vw,64px) clamp(16px,5vw,64px);background:#fff;border-top:4px solid var(--ink);border-bottom:4px solid var(--ink)}
.walkin-card{background:var(--blue);color:#fff;padding:28px;border-radius:200px 200px 16px 16px / 90px 90px 16px 16px;text-align:center}
.walkin-quote{font-family:"Kaushan Script",cursive;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.35;margin:18px 0 10px}
.walkin-src{margin:0;font-size:.95rem;opacity:.95}
.walkin-side h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 10px;line-height:1.15}
.booksy-note{border-left:6px solid var(--red);padding-left:12px}
.booksy-note span{color:#4b4f57;font-size:.95rem}
@media (min-width:900px){.walkin{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;padding-left:max(64px,calc((100vw - 1240px)/2));padding-right:max(64px,calc((100vw - 1240px)/2))}}

/* window glass */
.glass{background:linear-gradient(160deg,#1b1f28,#0f1116 60%,#1b1f28);color:#fff;padding:clamp(40px,6vw,80px) clamp(16px,6vw,80px);position:relative}
.glass::before{content:"";position:absolute;inset:18px;border:2px dashed rgba(122,148,255,.55);pointer-events:none}
.glass-title{font-family:"Kaushan Script",cursive;font-weight:400;font-size:clamp(2rem,4.5vw,3rem);margin:0 0 8px}
.glass-intro{max-width:52ch;color:#dfe3ea}
.decal-list{list-style:none;padding:0;margin:26px 0;display:flex;flex-direction:column;gap:6px}
.decal-list li{font-family:"Kaushan Script",cursive;font-size:clamp(1.6rem,3.6vw,2.4rem);color:#fff;text-shadow:0 0 1px #fff}
.decal-list li:nth-child(odd){padding-left:clamp(0px,4vw,60px)}
.glass-foot{max-width:60ch;color:#dfe3ea;font-size:1rem}

/* hours door */
.hours-door{display:grid;gap:28px;padding:clamp(36px,6vw,72px) clamp(16px,5vw,64px);max-width:1240px;margin:0 auto}
.door{background:#2b2e33;color:#fff;border:12px solid #6b5a43;border-radius:6px;padding:28px 24px;position:relative}
.door-num{font-size:3.2rem;font-weight:800;color:#e9e9e9;margin:0;line-height:1;text-align:center}
.door h2{margin:12px auto 14px;border:2px solid #fff;display:table;padding:2px 12px;font-size:1.2rem;text-transform:uppercase;letter-spacing:.04em}
.door-hours{width:100%;border-collapse:collapse;font-size:1.1rem}
.door-hours th,.door-hours td{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.25);text-align:left;font-weight:500}
.door-hours td{text-align:right;font-weight:700}
.door-src{font-size:.92rem;color:#e2e2e2;margin:14px 0 0}
.pole-col{display:none}
.pole{display:block;width:34px;height:100%;min-height:260px;margin:0 auto;border-radius:17px;border:3px solid #111;background:repeating-linear-gradient(-45deg,#fff 0 12px,var(--red) 12px 24px,#fff 24px 36px,var(--blue) 36px 48px)}
.door-side h2{font-size:clamp(1.5rem,3vw,2rem);margin:0 0 10px;line-height:1.15}
.placeholder{color:#5a5e66;font-style:italic}
@media (min-width:900px){.hours-door{grid-template-columns:minmax(0,5fr) 60px minmax(0,5fr);align-items:stretch}.pole-col{display:block}}

/* find */
.find{display:grid;gap:24px;padding:clamp(32px,5vw,64px) clamp(16px,5vw,64px);background:#e8ecfb}
.find h2{font-size:clamp(1.7rem,3vw,2.3rem);margin:0 0 8px}
address{font-style:normal;font-size:1.25rem;font-weight:700;margin-bottom:8px}
.find-map{background:#cfd6ef;min-height:320px;border:4px solid var(--ink)}
.find-map iframe{width:100%;height:100%;min-height:320px;border:0;display:block}
@media (min-width:900px){.find{grid-template-columns:minmax(0,4fr) minmax(0,7fr);padding-left:max(64px,calc((100vw - 1240px)/2));padding-right:max(64px,calc((100vw - 1240px)/2))}}

/* contact */
.contact{display:grid;gap:24px;padding:clamp(32px,5vw,64px) clamp(16px,5vw,64px);max-width:1240px;margin:0 auto}
.contact h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 8px}
.contact-form{display:grid;gap:14px;background:#fff;border:3px solid var(--ink);padding:22px;border-radius:4px}
.contact-form label{font-weight:700;display:block;margin-bottom:4px}
.contact-form input,.contact-form textarea{width:100%;font:inherit;padding:10px 12px;border:2px solid #77736a;border-radius:4px;background:#fff}
.field.has-error input,.field.has-error textarea{border-color:#b3261e}
.field.has-error .field-error{display:block}
.form-success{border:3px solid var(--blue);background:#fff;font-weight:800;font-size:1.2rem}
@media (min-width:900px){.contact{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.form-success{grid-column:2}}

/* footer */
.foot{background:var(--ink);color:#f0f0f0}
.foot-stripe{height:14px;background:repeating-linear-gradient(90deg,var(--red) 0 30px,#fff 30px 60px,var(--blue) 60px 90px)}
.foot-inner{padding:30px clamp(16px,5vw,64px) 90px;text-align:center}
.foot-script{font-family:"Kaushan Script",cursive;font-size:2rem;margin:0 0 6px}
.foot a{color:#fff}
.foot-small{font-size:.9rem;color:#cfcfcf}
.call-float{position:fixed;right:14px;bottom:14px;z-index:70;background:var(--red);color:#fff;font-weight:800;text-decoration:none;padding:12px 18px;border-radius:999px;box-shadow:0 8px 20px rgba(0,0,0,.25)}
@media (min-width:960px){.call-float{display:none}.foot-inner{padding-bottom:30px}}