/* Bandidos Barbershop v2 — AD700 Management */
:root{--ink:#15110f;--ink2:#211b18;--bone:#efe8dc;--bone2:#e4dacb;--red:#b8252b;--navy:#1e2f6b;--brass:#a77d43;--smoke:#6e6660;--dp:'Big Shoulders Display','Oswald',Impact,sans-serif;--tx:'Archivo','Helvetica Neue',Arial,sans-serif;--e:cubic-bezier(.2,.8,.2,1);--pad:clamp(18px,4vw,56px)}
body.bnd{margin:0;background:var(--bone);color:var(--ink);font-family:var(--tx);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
.bnd *,.bnd *::before,.bnd *::after{box-sizing:border-box}
.bnd img{max-width:100%;display:block}
.bnd a{color:inherit;text-decoration:none}
.bnd h1,.bnd h2,.bnd h3,.bnd p,.bnd ul,.bnd ol,.bnd figure,.bnd dl,.bnd dd{margin:0;padding:0}
.bnd ul,.bnd ol{list-style:none}
.bnd :focus-visible{outline:3px solid var(--red);outline-offset:3px}
.bnd ::selection{background:var(--red);color:#fff}
.b-in{max-width:1360px;margin:0 auto;padding:0 var(--pad)}
.b-skip{position:absolute;left:-999px}.b-skip:focus{left:10px;top:10px;z-index:999;background:var(--ink);color:#fff;padding:8px 12px}
.b-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.b-ic{flex:none}
.bnd .ht-ctc,.bnd .ht_ctc_chat_greetings_box{display:none!important}
/* pole */
.b-pole{display:block;background:repeating-linear-gradient(-45deg,var(--red) 0 14px,#f7f2ea 14px 28px,var(--navy) 28px 42px,#f7f2ea 42px 56px);background-size:79.2px 79.2px;animation:bPole 2.6s linear infinite}
@keyframes bPole{to{background-position:0 79.2px}}
/* buttons */
.b-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;background:var(--ink);color:var(--bone)!important;font-weight:600;font-size:16px;position:relative;overflow:hidden;isolation:isolate;transition:transform .4s var(--e),color .3s}
.b-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(-45deg,var(--red) 0 10px,var(--ink) 10px 20px);background-size:28.3px 28.3px;opacity:0;transition:opacity .35s;animation:bPole 1.4s linear infinite}
.b-btn:hover::before{opacity:.35}
.b-btn:hover{transform:translateY(-2px)}
.b-btn:active{transform:scale(.97)}
.b-btn-sm{min-height:42px;padding:0 16px;font-size:14px}
.b-btn-line{background:transparent;color:var(--ink)!important;box-shadow:inset 0 0 0 1.5px var(--ink)}
.b-btn-line:hover{background:var(--ink);color:var(--bone)!important}
.b-btn-line::before{display:none}
.b-btn-light{background:var(--bone);color:var(--ink)!important}
.b-btn-line-l{color:var(--bone)!important;box-shadow:inset 0 0 0 1.5px var(--bone)}
.b-btn-line-l:hover{background:var(--bone);color:var(--ink)!important}
.b-cta{display:flex;flex-wrap:wrap;gap:10px}
/* header */
.b-hd{position:sticky;top:0;z-index:50;background:rgba(239,232,220,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
.b-hd.is-s{border-bottom-color:rgba(21,17,15,.12)}
.b-hd .b-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px}
.b-logo{display:flex;align-items:center;gap:10px}
.b-logo img{width:48px;height:auto}
.b-logo span{font-family:var(--dp);font-weight:800;font-size:26px;line-height:.9;text-transform:uppercase;letter-spacing:.02em}
.b-logo small{display:block;font-family:var(--tx);font-weight:500;font-size:11px;letter-spacing:.04em;text-transform:none;color:var(--smoke);margin-top:3px}
.b-nav{display:flex;gap:26px;font-weight:500;font-size:15px}
.b-nav a{position:relative;padding:6px 0}
.b-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--e)}
.b-nav a:hover::after{transform:scaleX(1)}
.b-hd-r{display:flex;align-items:center;gap:14px}
.b-lang{display:flex;gap:2px;font-size:12px;font-weight:600}
.b-lang a{padding:6px 7px;border-radius:6px;color:var(--smoke)}
.b-lang a[aria-current]{color:var(--ink);background:var(--bone2)}
@media(max-width:1060px){.b-nav{display:none}}
@media(max-width:640px){.b-hd .b-btn-sm{display:none}.b-logo small{display:none}.b-hd .b-in{height:62px}}
/* hero */
.b-hero{padding:clamp(28px,5vw,64px) 0 clamp(56px,7vw,96px)}
.b-hero-g{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center}
.b-kick{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:14px;font-weight:600;color:var(--smoke)}
.b-open{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:var(--ink);color:var(--bone);font-size:12.5px}
.b-open:empty{display:none}
.b-open::before{content:"";width:8px;height:8px;border-radius:50%;background:#4cc76a}
.b-open.is-closed::before{background:var(--red)}
.b-h1{font-family:var(--dp);font-weight:900;text-transform:uppercase;font-size:clamp(96px,14.5vw,224px);line-height:.8;letter-spacing:-.01em;margin:22px 0 40px}
.b-line{display:block;overflow:hidden;padding-bottom:.04em}
.b-line>span{display:inline-block}
.b-line i{font-style:normal;color:var(--red)}
html.b-js .b-line>span{transform:translateY(105%);animation:bUp 1s var(--e) forwards;animation-delay:calc(.15s + var(--i)*.12s)}
@keyframes bUp{to{transform:none}}
.b-lead{max-width:56ch;font-size:17.5px;color:#3d3531}
.b-hero .b-cta{margin-top:28px}
.b-facts{display:flex;flex-wrap:wrap;gap:0;margin-top:36px;border-top:1px solid rgba(21,17,15,.15)}
.b-facts div{padding:16px 28px 0 0;margin-right:28px;border-right:1px solid rgba(21,17,15,.15)}
.b-facts div:last-child{border:0}
.b-facts dt{font-family:var(--dp);font-weight:800;font-size:34px;line-height:1;text-transform:uppercase}
.b-facts dd{font-size:13.5px;color:var(--smoke);margin-top:4px}
.b-hero-v{position:relative;aspect-ratio:4/5;max-height:82vh;justify-self:end;width:100%}
.b-hero-v>img:first-of-type{width:100%;height:100%;object-fit:cover;object-position:35% 50%;border-radius:4px;clip-path:inset(0 0 0 0 round 4px)}
html.b-js .b-hero-v>img:first-of-type{clip-path:inset(0 0 100% 0 round 4px);animation:bReveal 1.4s var(--e) .35s forwards}
@keyframes bReveal{to{clip-path:inset(0 0 0 0 round 4px)}}
.b-hero-v .b-pole{position:absolute;left:-26px;top:8%;bottom:8%;width:14px;border-radius:14px;box-shadow:0 0 0 4px var(--bone),0 0 0 5px rgba(21,17,15,.2)}
.b-badge{position:absolute;right:-18px;bottom:-24px;width:clamp(120px,13vw,180px);height:auto;background:var(--bone);border-radius:50%;padding:10px;box-shadow:0 20px 40px -20px rgba(0,0,0,.5);transform:rotate(-8deg)}
@media(max-width:900px){.b-hero-g{grid-template-columns:1fr}.b-hero-v{aspect-ratio:4/3.4;justify-self:stretch;max-height:none}.b-hero-v .b-pole{left:auto;right:16px;top:-14px;bottom:auto;height:60%;width:10px}.b-badge{right:10px;bottom:-20px;width:110px}}
/* keyword band */
.b-band{background:var(--ink);color:var(--bone);overflow:hidden;padding:18px 0}
.b-band-t{display:flex;align-items:center;gap:26px;width:max-content;animation:bMq 60s linear infinite}
.b-band span{font-family:var(--dp);font-weight:800;font-size:28px;text-transform:uppercase;white-space:nowrap;letter-spacing:.02em}
.b-band i{width:10px;height:28px;border-radius:6px;background:repeating-linear-gradient(-45deg,var(--red) 0 4px,#fff 4px 8px,var(--navy) 8px 12px,#fff 12px 16px);flex:none}
@keyframes bMq{to{transform:translateX(-33.33%)}}
/* shared */
.b-h2{font-family:var(--dp);font-weight:800;text-transform:uppercase;font-size:clamp(44px,5.6vw,84px);line-height:.9;letter-spacing:.005em}
.b-h3{font-family:var(--dp);font-weight:800;text-transform:uppercase;font-size:28px;line-height:1}
.b-head{display:grid;grid-template-columns:1.2fr 1fr;gap:20px 48px;align-items:end;margin-bottom:44px}
.b-head p{color:var(--smoke);max-width:44ch}
@media(max-width:800px){.b-head{grid-template-columns:1fr}}
html.b-js [data-b-in]{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform 1s var(--e);transition-delay:calc(var(--i,0)*80ms)}
html.b-js [data-b-in].is-in{opacity:1;transform:none}
/* experience */
.b-exp{padding:clamp(72px,9vw,128px) 0}
.b-exp-g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,96px);align-items:start}
.b-quote{margin-top:24px;font-family:var(--dp);font-weight:700;font-size:26px;text-transform:uppercase;color:var(--smoke);letter-spacing:.02em}
.b-exp-p{display:grid;gap:18px;font-size:17.5px;color:#3d3531;padding-top:8px;border-top:3px solid var(--ink)}
@media(max-width:860px){.b-exp-g{grid-template-columns:1fr}}
/* services menu board */
.b-svc{position:relative;background:var(--ink);color:var(--bone);padding:clamp(72px,9vw,128px) 0}
.b-svc .b-head p{color:#b3a99f}
.b-menu{border-top:1px solid rgba(239,232,220,.18)}
.b-menu li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) auto;gap:16px 40px;align-items:center;padding:26px 0;border-bottom:1px solid rgba(239,232,220,.18);transition:padding .4s var(--e)}
.b-menu h3{font-family:var(--dp);font-weight:800;text-transform:uppercase;font-size:clamp(30px,3.2vw,46px);line-height:.95;transition:color .3s}
.b-menu p{color:#b3a99f;font-size:16px}
.b-menu a{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-weight:600;font-size:15px;padding:10px 18px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(239,232,220,.4);transition:background .3s,color .3s,box-shadow .3s}
.b-menu a:hover{background:var(--bone);color:var(--ink);box-shadow:none}
.b-menu a .b-ic{transition:transform .35s var(--e)}
.b-menu a:hover .b-ic{transform:translateX(4px)}
@media(hover:hover){.b-menu li:hover{padding-left:18px}.b-menu li:hover h3{color:#fff}}
.b-menu li:hover h3{color:var(--bone)}
.b-note{margin-top:22px;color:#b3a99f;font-size:15px}
.b-peek{position:fixed;left:0;top:0;width:240px;aspect-ratio:3/4;pointer-events:none;z-index:40;opacity:0;transform:translate(-50%,-50%) scale(.8) rotate(-4deg);transition:opacity .25s,transform .4s var(--e);overflow:hidden;border-radius:4px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.b-peek img{width:100%;height:100%;object-fit:cover}
.b-peek.is-on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-4deg)}
@media(max-width:860px){.b-menu li{grid-template-columns:1fr;gap:8px;padding:22px 0}.b-menu a{justify-self:start;margin-top:6px}.b-peek{display:none}}
/* method */
.b-met{background:var(--bone2);padding:clamp(72px,9vw,120px) 0}
.b-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;position:relative;counter-reset:s}
.b-steps::before{content:"";position:absolute;left:24px;right:24px;top:24px;height:2px;background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 12px);opacity:.35}
.b-steps li{position:relative}
.b-steps span{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--red);color:#fff;font-family:var(--dp);font-weight:800;font-size:24px;margin-bottom:18px;box-shadow:0 0 0 6px var(--bone2)}
.b-steps h3{font-family:var(--dp);font-weight:800;text-transform:uppercase;font-size:28px;line-height:1;margin-bottom:8px}
.b-steps p{font-size:15.5px;color:#4b423d}
@media(max-width:900px){.b-steps{grid-template-columns:1fr;gap:24px}.b-steps::before{left:24px;right:auto;top:24px;bottom:24px;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--ink) 0 6px,transparent 6px 12px)}.b-steps li{padding-left:72px}.b-steps span{position:absolute;left:0;top:0}}
/* gallery */
.b-gal{padding:clamp(72px,9vw,120px) 0}
.b-gal .b-h2{margin-bottom:36px}
.b-gal-g{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:280px 280px;gap:12px}
.b-gal-g figure{position:relative;overflow:hidden;border-radius:4px;background:var(--bone2)}
.b-gal-g figure:first-child{grid-row:span 2}
.b-gal-g figure:nth-child(4){grid-column:span 2}
.b-gal-g img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e),filter .6s}
.b-gal-g figure:hover img{transform:scale(1.05)}
.b-gal-g figcaption{position:absolute;left:12px;bottom:12px;background:var(--bone);color:var(--ink);font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px}
@media(max-width:800px){.b-gal-g{grid-template-columns:1fr 1fr;grid-template-rows:auto}.b-gal-g figure{aspect-ratio:1}.b-gal-g figure:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}.b-gal-g figure:nth-child(4){grid-column:span 2;aspect-ratio:4/3}}
/* local seo */
.b-seo{background:var(--bone2);padding:56px 0}
.b-seo-g{display:grid;grid-template-columns:1fr 2fr;gap:24px 56px}
.b-seo p{color:#4b423d;font-size:15.5px;margin-bottom:12px}
.b-kw{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.b-kw li{font-size:13px;font-weight:500;padding:5px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(21,17,15,.25)}
@media(max-width:800px){.b-seo-g{grid-template-columns:1fr}}
/* location */
.b-loc{background:var(--ink);color:var(--bone);padding:clamp(72px,9vw,120px) 0}
.b-loc-g{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:stretch}
.b-contact{display:grid;gap:14px;margin:32px 0 36px}
.b-contact li{display:flex;gap:14px;align-items:flex-start;font-size:16.5px}
.b-contact .b-ic{color:var(--red);margin-top:3px}
.b-contact a:hover{text-decoration:underline;text-underline-offset:3px}
.b-hours{width:100%;border-collapse:collapse;margin:14px 0 30px;font-size:16px}
.b-hours th,.b-hours td{text-align:left;padding:12px 0;border-bottom:1px solid rgba(239,232,220,.18);font-weight:500}
.b-hours td{text-align:right;font-variant-numeric:tabular-nums}
.b-hours tr.is-today th,.b-hours tr.is-today td{color:#fff;font-weight:700}
.b-hours tr.is-today th::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:10px;vertical-align:middle}
.b-loc .b-btn{background:var(--bone);color:var(--ink)!important}
.b-loc .b-btn-line{background:transparent;color:var(--bone)!important;box-shadow:inset 0 0 0 1.5px var(--bone)}
.b-loc .b-btn-line:hover{background:var(--bone);color:var(--ink)!important}
.b-map{min-height:440px;border-radius:4px;overflow:hidden;background:var(--ink2)}
.b-map iframe{width:100%;height:100%;min-height:440px;border:0;filter:grayscale(1) contrast(1.05) brightness(.9)}
@media(max-width:900px){.b-loc-g{grid-template-columns:1fr}}
/* faq */
.b-faq{padding:clamp(72px,9vw,120px) 0}
.b-faq-g{display:grid;grid-template-columns:1fr 1.5fr;gap:32px 72px}
.b-faq details{border-bottom:1px solid rgba(21,17,15,.18)}
.b-faq summary{list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:22px 0;cursor:pointer;font-weight:600;font-size:18.5px}
.b-faq summary::-webkit-details-marker{display:none}
.b-faq summary .b-ic{transition:transform .4s var(--e)}
.b-faq details[open] summary .b-ic{transform:rotate(45deg);color:var(--red)}
.b-faq details p{padding:0 40px 22px 0;color:#4b423d}
@media(max-width:800px){.b-faq-g{grid-template-columns:1fr}}
/* final */
.b-fin{position:relative;background:var(--navy);color:var(--bone);text-align:center;padding:clamp(80px,10vw,140px) 0;overflow:hidden}
.b-pole-h{position:absolute;left:0;right:0;top:0;height:14px}
.b-fin-logo{width:150px;height:auto;margin:0 auto 24px;background:var(--bone);border-radius:50%;padding:10px}
.b-fin .b-h2{max-width:16ch;margin:0 auto}
.b-fin p{max-width:52ch;margin:18px auto 30px;color:#cfd3e6}
.b-fin .b-cta{justify-content:center}
/* footer */
.b-ft{background:var(--ink);color:#b3a99f;font-size:14px;padding:28px 0 32px}
.b-ft-g{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;align-items:center}
.b-ft nav{display:flex;gap:16px}
.b-ft a:hover{color:var(--bone)}
.b-by a{color:var(--bone)}
/* mobile dock */
.b-dock{display:none}
@media(max-width:760px){
  .b-dock{position:fixed;left:10px;right:10px;bottom:10px;z-index:60;display:flex;gap:8px;transform:translateY(140%);transition:transform .5s var(--e)}
  .b-dock.is-on{transform:none}
  .b-dock a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:999px;background:var(--ink);color:var(--bone)!important;font-weight:600;box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
  .b-dock a:first-child{flex:1}
  .b-dock a:last-child{width:54px;background:var(--red)}
  .b-ft{padding-bottom:90px}
  .b-h1{font-size:clamp(84px,27vw,140px)}
  .b-facts div{padding-right:16px;margin-right:16px}
  .b-facts dt{font-size:28px}
}
@media(prefers-reduced-motion:reduce){.b-pole,.b-band-t,.b-btn::before{animation:none}html.b-js .b-line>span,html.b-js .b-hero-v>img:first-of-type{animation:none;transform:none;clip-path:none}html.b-js [data-b-in]{opacity:1;transform:none}}