@font-face{font-family:"Oil Can";src:url("./assets/oil-can.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Ultra";src:url("./assets/ultra-regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}

:root{
  --red:#c7465a;
  --red-dark:#8c2739;
  --blue:#2b6875;
  --blue-dark:#173f4a;
  --white:#fff;
  --cool-white:#f2f6fa;
  --ink:#09233f;
  --wood:var(--red);
  --wood-dark:var(--red-dark);
  --navy:var(--blue);
  --navy-deep:var(--blue-dark);
  --paper:var(--cool-white);
  --cream:var(--white);
  --fold:var(--red);
  --border-dark:var(--blue-dark);
  --border-light:var(--white);
  --brass:var(--red);
  --water:var(--blue);
  --line:rgba(8,43,80,.24);
  --barber-control-stripes:repeating-linear-gradient(135deg,var(--red) 0 9px,var(--white) 9px 13px,var(--blue) 13px 22px,var(--white) 22px 26px)
}

body{background:var(--cool-white);color:var(--ink)}
body::before{box-shadow:inset 0 0 80px rgba(8,43,80,.08)}
.ribbon-stack,.ribbon-line,.ribbon-text{font-family:"Oil Can","Arial Narrow",sans-serif!important}
.ribbon-stack{--ribbon-bg:var(--white);--ribbon-fg:var(--blue-dark);--ribbon-outline:var(--blue-dark);--ribbon-fold:var(--red)}
.about .ribbon-stack,.contact .ribbon-stack{--ribbon-outline:var(--red)}

.masthead{background:var(--white);border-color:var(--blue-dark)}
.masthead::after,.ledger::before,.team::before,.contact::before{
  --barber-loop-distance:136px;
  content:"";
  position:absolute;
  z-index:5;
  left:0;
  right:0;
  height:11px;
  background:repeating-linear-gradient(135deg,var(--red) 0 24px,var(--white) 24px 48px,var(--blue) 48px 72px,var(--white) 72px 96px);
  background-size:136px 136px;
  animation:barber-pole 14s linear infinite
}
.masthead::after{bottom:-4px}
.anonymous-brand.shop-name-tab{--tab-bg:var(--white);--tab-outline:var(--blue-dark);--tab-border:6px;--tab-notch:14px;position:relative;z-index:7;display:inline-block;width:max-content;max-width:250px;min-height:0;height:auto;padding:10px 25px;background:transparent;color:var(--blue-dark)!important;border:0;outline:0;box-shadow:none;font:400 clamp(17px,2vw,23px)/1 "Oil Can","Arial Narrow",sans-serif;letter-spacing:.08em;text-align:center;text-decoration:none;text-transform:uppercase;transform:translateY(9px)}
.anonymous-brand.shop-name-tab::before{content:none}
.anonymous-brand.shop-name-tab>span{display:block}
.anonymous-brand.shop-name-tab .notched-panel polygon{fill:var(--tab-bg);stroke:url(#barber-logo-border-stripes);stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none}
.anonymous-brand.shop-name-tab .barber-logo-stripe--red{fill:var(--red)}
.anonymous-brand.shop-name-tab .barber-logo-stripe--blue{fill:var(--blue)}
.anonymous-brand.shop-name-tab .barber-logo-stripe--white{fill:var(--white)}
.masthead .phone span{color:var(--red)}

.barber-hero{min-height:720px;background:var(--cool-white);overflow:hidden}
.barber-hero::before{background:linear-gradient(90deg,var(--cool-white) 0 50%,rgba(242,246,250,.93) 57%,rgba(8,43,80,.08) 78%)}
.barber-hero::after{border-color:rgba(8,43,80,.32)}
.barber-hero .hero-copy{width:min(64%,920px);padding-block:36px}
.barber-hero-photo{position:absolute;z-index:-1;inset:0 0 0 auto;width:52%;margin:0;overflow:hidden;border-left:8px solid var(--blue-dark)}
.barber-hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,79,130,.68),rgba(203,35,56,.08));mix-blend-mode:color}
.barber-hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(1) contrast(1.17)}
.barber-hero-photo figcaption,.anonymous-photo figcaption{position:absolute;z-index:2;right:12px;bottom:12px;padding:7px 9px;background:var(--blue-dark);color:var(--white);border:2px solid var(--white);font:800 9px/1.2 "Work Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase}
.button{
  --button-surface:var(--white);
  border:var(--border-control,3px) solid transparent!important;
  background:
    linear-gradient(var(--button-surface),var(--button-surface)) padding-box,
    var(--barber-control-stripes) border-box!important
}
.button.filled{--button-surface:var(--blue-dark);color:var(--white)}

.ledger{position:relative;padding-top:82px;background:var(--white)}
.ledger::before{top:0;height:16px}
.ledger-grid,.trade{border-color:var(--blue-dark)}
.trade:hover{background:var(--cool-white)}
.trade b{color:var(--red)}
.trade-mark{width:60px;height:60px;border:4px solid var(--blue-dark);box-shadow:5px 5px 0 var(--red)}
.trade>.trade-monogram{display:grid;grid-template-columns:1fr;place-items:center;align-items:center;background:repeating-linear-gradient(135deg,var(--red) 0 12px,var(--white) 12px 24px,var(--blue) 24px 36px,var(--white) 36px 48px);color:var(--blue-dark);font:400 21px/1 "Oil Can","Arial Narrow",sans-serif;letter-spacing:.02em;text-shadow:2px 0 var(--white),-2px 0 var(--white),0 2px var(--white),0 -2px var(--white)}

.about{background:var(--blue-dark);color:var(--white)}
.about .photo-card{background:var(--white);border-color:var(--white);box-shadow:16px 16px 0 var(--red)}
.anonymous-photo{position:relative;min-height:390px;display:grid;place-items:center;overflow:hidden;background:var(--blue)!important;color:var(--white);border-color:var(--blue-dark)!important}
.anonymous-photo img{display:block;width:100%;height:100%;min-height:390px;object-fit:cover;object-position:center;filter:grayscale(1) contrast(1.2)}
.about .anonymous-photo img{object-position:center}
.source-points li{border-color:var(--white);background:rgba(255,255,255,.06)}
.about .barber-striped-ribbon{--ribbon-border:6px}
.barber-striped-ribbon .ribbon-text{text-transform:uppercase!important}

.specials{background:var(--cool-white)}
.coupon{border:6px solid transparent!important;background:linear-gradient(var(--white),var(--white)) padding-box,var(--barber-control-stripes) border-box!important;box-shadow:10px 10px 0 var(--blue);color:var(--blue-dark);text-transform:uppercase}
.coupon::before,.coupon::after{content:none!important}
.coupon-border{display:none}
.specials .coupon,.specials .coupon *{text-transform:uppercase}
.coupon h3,.coupon p{letter-spacing:.045em}
.coupon>p:not(.sample-label){font-weight:700}
.sample-label,.review-card .stars{color:var(--red)}

.team{position:relative;padding-top:84px;background:var(--red);color:var(--blue-dark)}
.team::before{top:0;height:16px}
.team .photo-card{background:var(--white);border-color:var(--blue-dark);box-shadow:16px 16px 0 var(--blue-dark)}
.team .anonymous-photo{width:100%;max-width:660px;height:clamp(300px,34vw,460px);min-height:0;justify-self:center}
.team .anonymous-photo img{height:100%;min-height:0;object-position:center 34%}
.team-ribbon{--ribbon-bg:var(--white);--ribbon-outline:var(--blue-dark);--ribbon-fold:var(--blue);--ribbon-fg:var(--blue-dark)}

.reviews{background:var(--white)}
.review-card{background:var(--cool-white);border-color:var(--blue-dark);box-shadow:8px 8px 0 var(--red)}
.review-card blockquote{color:var(--blue-dark)}
.review-card .reviewer{color:var(--blue)}

.faq{background:var(--blue);color:var(--white)}
.faq-ribbon{--ribbon-bg:var(--white);--ribbon-outline:var(--red);--ribbon-fold:var(--red-dark);--ribbon-fg:var(--blue-dark)}
.faq-list{border-color:var(--white)}
.faq-list details{border-color:var(--white)}
.faq-list summary::after{border-color:var(--white)}
.faq-list summary:hover,.faq-list summary:focus-visible{background:rgba(255,255,255,.12)}

.contact{position:relative;padding-top:86px;background:var(--blue-dark);color:var(--white)}
.contact::before{top:0;height:16px}
.contact .kicker{color:var(--white)}
.service-form,.location-card{background:var(--white);color:var(--blue-dark);border-color:var(--red)}
.service-form input,.service-form select,.service-form textarea,.chat-panel input,.chat-panel textarea{border-color:var(--blue-dark);color:var(--blue-dark)}
.service-form .consent span{color:var(--blue-dark)}
.service-form .button{--button-surface:var(--blue-dark);color:var(--white)}
.map-placeholder{--barber-loop-distance:158px;display:grid;min-height:390px;place-items:center;padding:30px;background:repeating-linear-gradient(135deg,var(--red) 0 28px,var(--white) 28px 56px,var(--blue) 56px 84px,var(--white) 84px 112px);background-size:158px 158px;color:var(--blue-dark);text-align:center;text-transform:uppercase;animation:barber-pole 18s linear infinite}
.map-placeholder span{display:block;padding:0;background:none;border:0;box-shadow:none;color:var(--blue-dark);font:400 clamp(27px,3.4vw,46px)/1.05 "Ultra",Rockwell,serif;letter-spacing:.02em;text-shadow:2px 2px 0 var(--white)}
.map-placeholder span em{display:block;margin-top:10px;font:800 12px/1.35 "Work Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase}
.map-placeholder small{align-self:end;margin:0;padding:7px 9px;background:var(--blue-dark);color:var(--white);font:800 9px/1.4 "Work Sans",sans-serif;letter-spacing:.08em}
.location-disclaimer{max-width:420px!important;margin:8px 0 16px!important;color:var(--red-dark);font:800 10px/1.5 "Work Sans",sans-serif!important;letter-spacing:.06em;text-transform:uppercase}
.shop-hours{font:700 12px/1.7 "Work Sans",sans-serif!important;letter-spacing:.06em;text-transform:uppercase}
.phone-link{color:var(--blue-dark)}
.contact-cta{border-color:var(--white)}
.contact .actions .button{--button-surface:var(--blue-dark);color:var(--white)}
.contact .actions .button.filled{--button-surface:var(--red);color:var(--white)}

.chapter-nav a{--tab-bg:var(--white);--tab-outline:var(--blue-dark);color:var(--blue-dark)}
.chapter-nav a.active{--tab-bg:var(--red)}
.edge-kicker{--tab-bg:var(--white);--tab-outline:var(--blue-dark);color:var(--blue-dark)!important}
.about .edge-kicker,.contact .edge-kicker{--tab-bg:var(--white);--tab-outline:var(--red);color:var(--blue-dark)!important}
.top-button{right:18px;bottom:18px;background:var(--blue-dark);border-color:var(--white)}
footer{background:var(--blue-dark);color:var(--white)}

@media(min-width:821px) and (max-width:1050px){
  .faq{grid-template-columns:minmax(330px,.88fr) minmax(0,1.12fr);gap:32px}
  .faq-ribbon{font-size:clamp(27px,3vw,32px)}
}

@media(max-width:820px){
  .masthead nav,.masthead .phone span{display:none}
  .chapter-nav a{display:grid;min-width:82px;place-items:center;padding:7px calc(10px + var(--tab-notch));text-align:center}
  .anonymous-brand.shop-name-tab{max-width:148px;padding:8px 18px;font-size:15px;line-height:1.05;white-space:normal}
  .barber-hero{min-height:760px}
  .barber-hero .hero-copy{width:100%;padding-top:12px}
  .barber-hero-photo{inset:auto 0 0;width:100%;height:53%;border-left:0;border-top:8px solid var(--blue-dark);opacity:.42}
  .barber-hero::before{background:linear-gradient(180deg,var(--cool-white) 0 55%,rgba(242,246,250,.8) 70%,rgba(8,43,80,.14))}
  .barber-hero .intro{max-width:92%}
  .team{padding-top:70px}
  .team .anonymous-photo{height:320px;max-width:560px}
  .contact{padding-top:70px}
  .top-button{right:10px;bottom:10px}
}

@keyframes barber-pole{to{background-position:var(--barber-loop-distance,136px) 0}}
@media(prefers-reduced-motion:reduce){.masthead::after,.ledger::before,.team::before,.contact::before,.map-placeholder{animation:none}}