/* N3F1 Barbershop · "Night ride under the hex lights"
   Type: Anton (display, brand wordmark) + Archivo variable (wdth 62–125, wght 100–900) for everything else.
   Motion policy (README "Motion"): scroll-driven motion always runs; self-running motion honors prefers-reduced-motion. */

@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/anton-latin.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/assets/fonts/archivo-latin-var.woff2) format("woff2-variations"),url(/assets/fonts/archivo-latin-var.woff2) format("woff2")}

:root{
  --asphalt:#07070a;
  --smoke:#16161c;
  --smoke-2:#1f1f27;
  --red:#e4232c;
  --red-txt:#ef3a43;
  --led:#f4f3f1;
  --mut:#bdbdc6;
  --chrome:#9a9ba2;
  --amber:#ffd166;
  --line:rgba(244,243,241,.1);
  --gutter:clamp(20px,6vw,96px);
  --max:1240px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-film:cubic-bezier(.77,0,.18,1);
  --display:"Anton",Impact,"Arial Narrow",sans-serif;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --nav-h:72px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--nav-h);interpolate-size:allow-keywords}
body{background:var(--asphalt);color:var(--led);font:400 17px/1.65 var(--sans);font-stretch:100%;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--red-txt);outline-offset:4px;border-radius:2px}
::selection{background:var(--red);color:#fff}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--red);color:#fff;padding:10px 16px;border-radius:4px;font-weight:600}
.skip:focus{top:12px}

/* ---------- film texture: grain + vignette ---------- */
body::after{content:"";position:fixed;inset:-10%;z-index:90;pointer-events:none;opacity:.16;background:url("/assets/grain.webp") 0 0/128px 128px;will-change:transform;animation:grain 1.2s steps(6) infinite}
body::before{content:"";position:fixed;inset:0;z-index:89;pointer-events:none;background:radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.55) 100%)}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}

/* ---------- type ---------- */
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.9;letter-spacing:.005em}
.chrome{background:linear-gradient(180deg,#fff 12%,#c9c9cf 52%,#6f7078 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* background-clip:text paints only inside the box; with the tight display line-height, capital accents (Í, Á) sit above it. Grow the painted box, keep the layout. */
.chrome{padding-block:.16em .06em;margin-block:-.16em -.06em}
.sec-title{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(44px,7vw,104px);line-height:.9;letter-spacing:.004em}
.sec-intro{max-width:46ch;color:var(--mut);margin-top:18px;font-size:clamp(16px,1.3vw,18px)}
.ui{font-family:var(--sans);font-stretch:125%;font-weight:600;font-size:13px;letter-spacing:.02em}

/* ---------- buttons ---------- */
.btn{--mx:0px;--my:0px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 30px;border-radius:999px;font:600 14px/1 var(--sans);font-stretch:125%;letter-spacing:.02em;transform:translate(var(--mx),var(--my));transition:background-color .3s,border-color .3s,box-shadow .4s var(--ease-out),transform .5s var(--ease-out)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 0 0 0 rgba(228,35,44,0),0 10px 40px -10px rgba(228,35,44,.8)}
.btn-red:hover{box-shadow:0 0 0 6px rgba(228,35,44,.18),0 14px 60px -8px rgba(228,35,44,1)}
.btn-ghost{border:1px solid rgba(244,243,241,.28);color:var(--led);backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:var(--led);background:rgba(244,243,241,.06)}
.btn-sm{min-height:42px;padding:0 20px;font-size:13px}

/* ---------- chrome: progress + nav ---------- */
.progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:120;background:var(--red);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 12px var(--red)}
.nav{position:fixed;inset:0 0 auto;z-index:100;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--gutter);transition:transform .5s var(--ease-out),background-color .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.is-solid{background:rgba(7,7,10,.72);backdrop-filter:blur(14px) saturate(1.3);border-bottom-color:var(--line)}
.nav.is-hidden{transform:translateY(-100%)}
.logo{display:block;flex:none;view-transition-name:logo;transition:transform .5s var(--ease-out),filter .5s}
.logo img{display:block;height:56px;width:auto;filter:drop-shadow(0 4px 14px rgba(0,0,0,.6))}
.logo:hover{transform:rotate(-4deg) scale(1.04);filter:drop-shadow(0 0 16px rgba(228,35,44,.45))}
@media (max-width:640px){.logo img{height:46px}}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.nav-link{position:relative;font-stretch:112%;font-weight:500;font-size:14px;color:var(--mut);transition:color .3s}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.nav-link:hover,.nav-link.is-active{color:var(--led)}
.nav-link:hover::after,.nav-link.is-active::after{transform:scaleX(1);transform-origin:left}
.lang{display:flex;border:1px solid rgba(244,243,241,.2);border-radius:999px;padding:3px;font-size:12px;font-weight:600;font-stretch:125%}
.lang a{padding:5px 11px;border-radius:999px;color:var(--chrome);transition:color .3s,background-color .3s}
.lang a[aria-current]{background:var(--led);color:var(--asphalt)}
.lang a:not([aria-current]):hover{color:var(--led)}
@media (max-width:820px){.nav-link{display:none}}
@media (max-width:420px){.nav .btn-sm{padding:0 16px}.lang a{padding:5px 9px}}

/* ---------- letterbox (the signature moment) ---------- */
.letterbox{position:fixed;inset:0;z-index:95;pointer-events:none}
.letterbox i{position:absolute;left:0;right:0;height:50vh;background:#000;transform:scaleY(var(--lb,0));transition:none}
.letterbox i:first-child{top:0;transform-origin:top}
.letterbox i:last-child{bottom:0;transform-origin:bottom}
.intro .letterbox{z-index:130}
.intro .letterbox i{animation:lb-open 1.25s var(--ease-film) .15s both}
@keyframes lb-open{from{transform:scaleY(1)}to{transform:scaleY(var(--lb,0))}}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;display:flex;align-items:flex-end;padding:0 var(--gutter) clamp(56px,11vh,120px)}
.hero-media{position:absolute;inset:-4% 0 0;will-change:transform}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-tint{position:absolute;inset:0;background:linear-gradient(0deg,var(--asphalt) 2%,rgba(7,7,10,.2) 55%,rgba(7,7,10,.55) 100%),linear-gradient(90deg,rgba(7,7,10,.85) 0%,rgba(7,7,10,.1) 70%),radial-gradient(ellipse at 78% 40%,rgba(228,35,44,.22),transparent 55%)}
.hero-copy{position:relative;z-index:2;max-width:1100px;will-change:transform,opacity}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;font:500 14px/1.2 var(--sans);font-stretch:112%;color:var(--mut);margin-bottom:22px}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(228,35,44,.7);animation:live 2s infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(228,35,44,.7)}70%{box-shadow:0 0 0 12px rgba(228,35,44,0)}100%{box-shadow:0 0 0 0 rgba(228,35,44,0)}}
.hero-title{font-family:var(--display);text-transform:uppercase;font-size:clamp(76px,14.5vw,220px);line-height:.84;letter-spacing:-.005em;view-transition-name:hero-title}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.02em}
.hero-title .line>span{display:inline-block}
.hero-title em{font-style:normal;color:var(--red);text-shadow:0 0 60px rgba(228,35,44,.45)}
.intro .hero-title .line>span{animation:rise 1.1s var(--ease-out) both}
.intro .hero-title .line:nth-child(1)>span{animation-delay:.55s}
.intro .hero-title .line:nth-child(2)>span{animation-delay:.68s}
.intro .hero-reveal{animation:fade-up .9s var(--ease-out) .95s both}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes fade-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-sub{max-width:44ch;margin-top:26px;color:var(--mut);font-size:clamp(17px,1.4vw,20px);line-height:1.55}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-proof{margin-top:24px;font-size:14px;color:var(--chrome)}
.hero-proof b{color:var(--amber);font-weight:600}
.hero-cue{position:absolute;right:var(--gutter);bottom:clamp(56px,11vh,120px);z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:12px;font-stretch:125%;color:var(--chrome);writing-mode:vertical-rl}
.hero-cue::after{content:"";width:1px;height:64px;background:linear-gradient(var(--led),transparent);animation:cue 2.2s var(--ease-film) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:640px){.hero-cue{display:none}.hero-title{font-size:clamp(68px,22vw,120px)}}
#flip{display:inline-block;perspective:600px}
#flip span{display:inline-block;transform-style:preserve-3d;will-change:transform,opacity,filter}
@keyframes flip-in{0%{opacity:0;transform:rotateX(90deg) translateY(.3em);filter:blur(8px)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes flip-out{0%{opacity:1;transform:none;filter:blur(0)}100%{opacity:0;transform:rotateX(-90deg) translateY(-.3em);filter:blur(8px)}}

/* ---------- sections ---------- */
.section{position:relative;padding:clamp(96px,16vh,180px) var(--gutter)}
.wrap{max-width:var(--max);margin:0 auto}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);align-items:end;gap:24px 60px;margin-bottom:clamp(40px,7vh,80px)}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}}

/* about: words light up with scroll */
.about .sec-title{max-width:12ch}
.about-lead{margin-top:clamp(36px,6vh,64px);max-width:26ch;font-size:clamp(28px,3.8vw,56px);line-height:1.12;font-weight:500;font-stretch:96%;letter-spacing:-.015em}
.about-lead .w{opacity:var(--o,.4);transition:opacity .25s linear}
.about-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;margin-top:clamp(40px,7vh,72px);color:var(--mut)}
.about-body p{max-width:52ch}
.about-body strong{color:var(--led);font-weight:600}
@media (max-width:760px){.about-body{grid-template-columns:1fr;gap:18px}}

/* experience: pinned card stack (a real 3-step sequence, so it is numbered) */
.story{padding-bottom:0}
.story .pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center;padding:calc(var(--nav-h) + 12px) 0 24px}
.card{width:100%;max-width:1120px;height:min(72vh,640px);border-radius:22px;overflow:hidden;border:1px solid rgba(244,243,241,.12);background:linear-gradient(180deg,#121218,#0b0b0f);display:grid;grid-template-columns:1fr 1.2fr;transform-origin:50% 0;will-change:transform;box-shadow:0 40px 100px -30px rgba(0,0,0,.9)}
.card-txt{padding:clamp(28px,5vh,56px) clamp(24px,3.4vw,52px);display:flex;flex-direction:column;justify-content:space-between}
.card-num{font-family:var(--display);font-size:clamp(80px,10vw,150px);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(244,243,241,.35)}
.card h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(32px,3.6vw,56px);line-height:.95;margin:18px 0 14px}
.card p{color:var(--mut);max-width:40ch}
.card figure{position:relative;overflow:hidden}
.card figure img{width:100%;height:100%;object-fit:cover;transform:scale(var(--zoom,1.15));will-change:transform}
.card figure::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b0b0f 0%,transparent 30%)}
@media (max-width:760px){.card{grid-template-columns:1fr;grid-template-rows:1fr auto;height:min(80svh,680px)}.card figure{order:-1}.card figure::after{background:linear-gradient(0deg,#0b0b0f 0%,transparent 40%)}.card-num{font-size:64px}}

/* statement: scroll-driven marquee */
.marquee{padding:clamp(80px,12vh,140px) 0 clamp(40px,6vh,80px);overflow:hidden}
.marquee-row{display:flex;white-space:nowrap;font-family:var(--display);text-transform:uppercase;font-size:clamp(84px,15vw,240px);line-height:.95;will-change:transform}
.marquee-row span{padding-right:.35em;display:inline-flex;align-items:center;gap:.35em}
.marquee-row span::after{content:"";width:.34em;height:.34em;background:var(--red);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);box-shadow:0 0 30px var(--red)}
.marquee-row.outline{color:transparent;-webkit-text-stroke:1.5px rgba(244,243,241,.4)}
.marquee-row.outline span::after{background:rgba(228,35,44,.35);box-shadow:none}
.marquee-sub{text-align:center;margin-top:36px;color:var(--chrome);font-stretch:112%;font-size:15px}

/* services: the menu board */
.menu-list{list-style:none;border-top:1px solid var(--line);perspective:1100px}
.menu-row{--mx:50%;--my:50%;position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;align-items:center;gap:clamp(14px,2.4vw,40px);padding:clamp(22px,3.2vh,34px) clamp(8px,1.4vw,20px);border-bottom:1px solid var(--line);transform-style:preserve-3d;will-change:transform,opacity}
.menu-row::before{content:"";position:absolute;inset:0;opacity:0;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(228,35,44,.14),transparent 60%);transition:opacity .4s}
.menu-row:hover::before{opacity:1}
.hex{width:18px;height:20px;background:rgba(244,243,241,.18);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transition:background-color .35s,box-shadow .35s}
.menu-row:hover .hex{background:var(--red);box-shadow:0 0 18px var(--red)}
.menu-row h3{font-weight:700;font-stretch:115%;font-size:clamp(19px,1.8vw,26px);line-height:1.15;letter-spacing:-.005em}
.menu-row p{color:var(--chrome);font-size:15px;margin-top:6px;max-width:58ch}
.dur{color:var(--chrome);font-size:14px;font-stretch:112%;white-space:nowrap}
.price{font-family:var(--display);font-weight:400;font-size:clamp(34px,3.4vw,52px);line-height:1;color:var(--led);min-width:2.6ch;text-align:right;transition:color .35s}
.menu-row:hover .price{color:var(--red-txt)}
@media (max-width:640px){.menu-row{grid-template-columns:18px minmax(0,1fr) auto;row-gap:4px}.menu-row .dur{grid-column:2;grid-row:2}.menu-row .price{grid-column:3;grid-row:1 / span 2}}

/* gallery: film strip */
.reel .sec-head{padding:0 var(--gutter);max-width:calc(var(--max) + 2 * var(--gutter));margin-left:auto;margin-right:auto}
.film{position:relative;background:#050506;padding:26px 0;border-block:1px solid #1d1d23;overflow:hidden;transform:rotate(-1.2deg) scale(1.03)}
.film::before,.film::after{content:"";position:absolute;left:0;right:0;height:14px;background:radial-gradient(circle at 50% 50%,#20202a 0 3px,transparent 3.5px) 0 0/22px 14px,repeating-linear-gradient(90deg,transparent 0 6px,rgba(244,243,241,.85) 6px 16px,transparent 16px 22px);-webkit-mask:repeating-linear-gradient(90deg,transparent 0 6px,#000 6px 16px,transparent 16px 22px);mask:repeating-linear-gradient(90deg,transparent 0 6px,#000 6px 16px,transparent 16px 22px);opacity:.16}
.film::before{top:6px}.film::after{bottom:6px}
.film-track{display:flex;gap:10px;width:max-content;will-change:transform}
.film-track img{height:clamp(200px,34vh,340px);width:auto;border-radius:3px;filter:saturate(.9) contrast(1.05);transition:filter .5s,transform .6s var(--ease-out)}
.film-track img:hover{filter:saturate(1.1) contrast(1.1);transform:scale(1.03)}

/* chain divider */
.chain-sec{position:relative;padding:18px 0;margin:clamp(40px,8vh,90px) 0 0}
.chain-glow{position:absolute;left:0;right:0;top:50%;height:30px;transform:translateY(-42%);background:radial-gradient(52% 100% at 50% 50%,rgba(228,35,44,.22),transparent 72%);filter:blur(9px)}
.chain-divider{--chain-h:64px;--tile-w:calc(var(--chain-h) * 1.4271);position:relative;height:var(--chain-h);overflow:hidden;transform:rotate(.4deg);filter:drop-shadow(0 10px 14px rgba(0,0,0,.6)) drop-shadow(0 3px 16px rgba(228,35,44,.16))}
.chain-strip{position:absolute;inset:0;width:calc(100% + var(--tile-w));background:url("/assets/moto/chain.webp") repeat-x;background-size:auto 100%;will-change:transform}

/* team: tires roll with the scroll */
.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,4vh,56px) clamp(16px,2vw,32px)}
@media (max-width:1000px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.team-grid{grid-template-columns:1fr}}
.barber{text-align:center}
.tire-wrap{--wheel:min(230px,100%);--portrait:calc(var(--wheel) * .6);position:relative;width:var(--wheel);aspect-ratio:1;margin:0 auto}
@media (max-width:560px){.tire-wrap{--wheel:min(280px,74vw)}}
.tire-portrait{position:absolute;left:50%;top:50%;width:var(--portrait);height:var(--portrait);transform:translate(-50%,-50%);border-radius:50%;object-fit:cover;object-position:center 25%;box-shadow:0 0 0 calc(var(--wheel) * .02) #0d0d11,inset 0 0 22px 6px rgba(0,0,0,.75);transition:transform .6s var(--ease-out),filter .6s;filter:grayscale(.25)}
.barber:hover .tire-portrait,.barber:focus-within .tire-portrait{transform:translate(-50%,-50%) scale(1.06);filter:none}
.tire-portrait[alt^="alexgcutz"]{object-position:62% 30%}
.tire-portrait[alt^="Adrian Cutz"]{object-position:28% 22%}
.tire-portrait[alt^="Elio Barber"]{object-position:20% 18%}
.tire-ring{position:absolute;inset:0;background:url("/assets/moto/tire.webp") center/contain no-repeat;transform:rotate(var(--spin,0deg));will-change:transform;filter:drop-shadow(0 16px 22px rgba(0,0,0,.65)) drop-shadow(0 0 18px rgba(228,35,44,.18));transition:filter .5s}
.barber:hover .tire-ring{filter:drop-shadow(0 16px 22px rgba(0,0,0,.65)) drop-shadow(0 0 28px rgba(228,35,44,.5))}
.barber-name{font-weight:700;font-stretch:115%;font-size:21px;margin-top:20px}
.barber-name a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s var(--ease-out),color .3s}
.barber-name a:hover,.barber-name a:focus-visible{background-size:100% 1px;color:var(--red-txt)}
.barber-role{color:var(--chrome);font-size:14px;margin-top:2px}
.barber-book{display:inline-block;margin-top:12px;font-weight:600;font-stretch:125%;font-size:13px;color:var(--red-txt);padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s var(--ease-out)}
.barber-book:hover,.barber-book:focus-visible{background-size:100% 1px}

/* faq */
.faq{max-width:900px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;font-weight:600;font-stretch:108%;font-size:clamp(18px,1.6vw,22px);transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:#fff}
.faq summary i{position:relative;flex:none;width:28px;height:28px;border:1px solid rgba(244,243,241,.25);border-radius:50%;transition:transform .5s var(--ease-out),border-color .3s,background-color .3s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary i{transform:rotate(45deg);border-color:var(--red);background:var(--red)}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .5s var(--ease-out),content-visibility .5s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq details p{color:var(--mut);max-width:68ch;padding-bottom:26px}

/* visit */
.visit{display:grid;grid-template-columns:1.1fr .9fr;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:linear-gradient(180deg,#101015,#0a0a0e)}
.visit-info{padding:clamp(32px,6vh,64px) clamp(24px,4vw,56px)}
.visit-info .sec-title{font-size:clamp(44px,5.6vw,84px)}
.visit-info .sec-title em{font-style:normal;color:var(--red)}
.status{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);font-size:14px;font-weight:500;font-stretch:108%}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--chrome)}
.status.is-open::before{background:#3ddc84;box-shadow:0 0 10px #3ddc84}
.status.is-closed::before{background:var(--red)}
.addr{margin-top:22px;font-size:clamp(18px,1.6vw,22px);line-height:1.45}
.hours{display:grid;grid-template-columns:auto 1fr;gap:10px 30px;margin-top:26px;font-size:15px;color:var(--mut)}
.hours dt{color:var(--chrome)}
.hours .is-today{color:var(--led);font-weight:600}
.maps{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.visit-cta{position:relative;padding:clamp(32px,6vh,64px) clamp(24px,4vw,56px);display:flex;flex-direction:column;justify-content:flex-end;gap:18px;background:radial-gradient(ellipse at 30% 20%,rgba(228,35,44,.24),transparent 60%),url("/assets/gallery/c2-g6.webp") center 20%/cover;isolation:isolate}
.visit-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#0a0a0e 20%,rgba(10,10,14,.55))}
.visit-cta .display{font-size:clamp(40px,4.6vw,72px)}
.visit-cta p{color:var(--mut);max-width:40ch}
.visit-cta .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
@media (max-width:900px){.visit{grid-template-columns:1fr}.visit-cta{min-height:420px}}

/* footer */
.foot{padding:clamp(40px,8vh,90px) var(--gutter) 40px;overflow:hidden}
.foot-mark{font-family:var(--display);font-size:min(33vw,520px);line-height:.8;letter-spacing:-.01em;text-align:center;color:transparent;-webkit-text-stroke:1.5px rgba(244,243,241,.22);white-space:nowrap;user-select:none;background:linear-gradient(0deg,rgba(228,35,44,.28),transparent 70%) 0 100%/100% var(--fill,0%) no-repeat;-webkit-background-clip:text;background-clip:text}
.foot-mark span{-webkit-text-stroke-color:rgba(228,35,44,.7)}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;margin-top:40px;padding-top:26px;border-top:1px solid var(--line);color:var(--chrome);font-size:14px}
.foot-row a:hover{color:var(--led)}
.foot-row nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.foot-secured{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--chrome);transition:color .3s}
.foot-secured:hover,.foot-secured:focus-visible{opacity:1;color:var(--led)}
.foot-secured img{width:20px;height:20px;display:block;position:relative;z-index:91}
@media (max-width:640px){.foot-row{flex-direction:column;align-items:flex-start}}

/* ---------- sub pages: barber + gallery ---------- */
.sub-hero{padding-top:calc(var(--nav-h) + clamp(32px,6vh,72px));padding-bottom:clamp(32px,6vh,64px)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px 10px;font-size:14px;color:var(--chrome);margin-bottom:clamp(24px,4vh,40px)}
.crumbs li+li::before{content:"/";margin-right:10px;color:rgba(244,243,241,.3)}
.crumbs a:hover{color:var(--led)}
.crumbs [aria-current]{color:var(--led)}
.barber-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.tire-wrap.tire-lg{--wheel:clamp(240px,30vw,380px)}
.barber-copy .sec-title{margin:6px 0 14px}
.barber-rating{font-size:15px;color:var(--chrome)}
.barber-rating b{color:var(--amber);font-weight:600}
.barber-bio{max-width:56ch;margin-top:18px;color:var(--mut);font-size:clamp(17px,1.3vw,19px)}
.barber-pay{margin-top:12px;font-size:14px;color:var(--chrome)}
@media (max-width:760px){.barber-hero{grid-template-columns:1fr;justify-items:center;text-align:center}.barber-copy .hero-ctas{justify-content:center}.barber-bio{margin-inline:auto}}
.menu-row.no-dur{grid-template-columns:28px minmax(0,1fr) auto}
@media (max-width:640px){.menu-row.no-dur{grid-template-columns:18px minmax(0,1fr) auto}.menu-row.no-dur .price{grid-row:1}}
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
@media (max-width:760px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.work-grid figure{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--line)}
.work-grid img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;transition:transform .8s var(--ease-out)}
.work-grid figure:hover img{transform:scale(1.04)}
.work-grid figcaption{position:absolute;inset:auto 0 0;padding:28px 14px 12px;font-size:13px;color:var(--led);background:linear-gradient(0deg,rgba(7,7,10,.85),transparent)}
.more-link{margin-top:32px}
a.barber{display:block}
a.barber:hover .barber-name{color:var(--red-txt)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.chip{min-height:40px;padding:0 18px;border-radius:999px;border:1px solid rgba(244,243,241,.25);font-size:14px;font-weight:600;font-stretch:112%;color:var(--mut);transition:background-color .3s,color .3s,border-color .3s}
.chip:hover{color:var(--led);border-color:var(--led)}
.chip[aria-pressed="true"]{background:var(--led);border-color:var(--led);color:var(--asphalt)}
.masonry{columns:3 280px;column-gap:clamp(10px,1.4vw,18px)}
.masonry figure{break-inside:avoid;margin-bottom:clamp(10px,1.4vw,18px)}
.masonry figure[hidden]{display:none}
.shot{display:block;width:100%;padding:0;border-radius:12px;overflow:hidden;cursor:zoom-in}
.shot img{width:100%;height:auto;transition:transform .8s var(--ease-out),filter .5s}
.shot:hover img{transform:scale(1.03);filter:brightness(1.08)}
.masonry figcaption{padding:8px 2px 0;font-size:13px;color:var(--chrome)}
.masonry figcaption a{color:var(--red-txt);text-decoration:underline;text-underline-offset:3px}
.lightbox{margin:auto;max-width:min(92vw,1100px);max-height:92vh;padding:0;border:0;background:transparent;color:var(--led);overflow:visible}
.lightbox::backdrop{background:rgba(3,3,5,.92);backdrop-filter:blur(6px)}
.lightbox img{display:block;max-width:100%;max-height:80vh;margin:0 auto;border-radius:12px}
.lightbox-cap{text-align:center;margin-top:12px;font-size:14px;color:var(--mut)}
.lb-btn{position:fixed;width:48px;height:48px;border-radius:50%;background:rgba(22,22,28,.8);border:1px solid var(--line);font-size:28px;line-height:1;color:var(--led)}
.lb-btn:hover{background:var(--red);border-color:var(--red)}
.lb-close{top:16px;right:16px}
.lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lb-next{right:16px;top:50%;transform:translateY(-50%)}
.lightbox[open]{animation:lb-in .45s var(--ease-out)}
@keyframes lb-in{from{opacity:0;transform:scale(.97)}}
@media (prefers-reduced-motion:reduce){.lightbox[open]{animation:none}}

/* ---------- reveal (one quiet entrance, used sparingly) ---------- */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease-out),transform 1.2s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}
.no-js [data-reveal]{opacity:1;transform:none}

/* ---------- ES ↔ EN cross-document transition ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .45s var(--ease-film) both}
::view-transition-new(root){animation:vt-in .6s var(--ease-film) both}
@keyframes vt-out{to{opacity:0;filter:blur(6px);transform:scale(.985)}}
@keyframes vt-in{from{opacity:0;filter:blur(6px);transform:scale(1.015)}}

/* ---------- reduced motion: self-running motion off, scroll-driven motion stays ---------- */
@media (prefers-reduced-motion:reduce){
  body::after{animation:none}
  .live-dot,.hero-cue::after{animation:none}
  .intro .letterbox i,.intro .hero-title .line>span,.intro .hero-reveal{animation:none}
  [data-reveal]{transform:none;transition:opacity .6s linear}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .btn,.tire-portrait,.film-track img{transition-duration:.01s}
}
/* privacy notice (generated by scripts/site-pages.mjs) */
.prose{max-width:68ch;color:var(--mut);font-size:clamp(16px,1.2vw,18px);line-height:1.6}
.prose h2{color:var(--led);font-size:clamp(20px,2vw,26px);margin:32px 0 10px}
.prose a{color:var(--led);text-decoration:underline}