/* base.css v3 (22:34): one type scale, straight geometry, three grounds from the shop's own world (ink, chalk = their white walls,
   gold = their capes, ONE band) plus the sticky Book bar. Owner: P22 R3 owner. Sections use these classes and never restyle them. */
/* the five faces the page uses, subset to Latin + Latin-1 (no @import hop: the fonts are found with this file) */
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url('../fonts/cabinet-grotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url('../fonts/cabinet-grotesk-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
:root{
  --ink:#0A0A0A; --ink-2:#111111; --ink-3:#1A1A1A;
  --paper:#F5F3EE; --soft:rgba(245,243,238,.85); --mute:rgba(245,243,238,.6); --faint:rgba(245,243,238,.42); --line:rgba(245,243,238,.12);
  --gold:#E0AE2E; --gold-hi:#EBBE45; --on-gold:#0A0A0A; --chalk:#F2EFE9;
  --display:'Cabinet Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --body:'Satoshi', 'Helvetica Neue', Arial, sans-serif;
  /* type scale at 390; the desktop media query steps it up */
  --t-giant:150px; --t-display:54px; --t-h2:34px; --t-h3:20px; --t-quote:30px; --t-body:16px; --t-small:14px; --t-label:11px;
  /* 8-pt spacing */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px; --s8:64px; --s10:80px; --s12:96px;
  --gut:20px; --radius:10px; --nav-h:64px; --bar-h:56px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);-webkit-text-size-adjust:100%}
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
body{background:var(--ink);color:var(--paper);font:400 var(--t-body)/1.5 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","tnum" 0}
img,video,canvas{display:block;max-width:100%}
svg{display:block}
a{color:inherit;text-decoration:none}
main{position:relative}

/* ---------- type ---------- */
.h-display{font:800 var(--t-display)/.94 var(--display);letter-spacing:-.035em;color:var(--paper)}
.h2{font:800 var(--t-h2)/1 var(--display);letter-spacing:-.025em;color:var(--paper)}
.h3{font:700 var(--t-h3)/1.15 var(--display);letter-spacing:-.01em;color:var(--paper)}
.quote{font:700 var(--t-quote)/1.12 var(--display);letter-spacing:-.02em;color:var(--mute)}
.quote em{font-style:normal;color:var(--paper)}               /* tonal emphasis instead of highlighter */
.body{font:500 var(--t-body)/1.5 var(--body);color:var(--soft);max-width:32ch}
.small{font:500 var(--t-small)/1.45 var(--body);color:var(--mute)}
.label{font:700 var(--t-label)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.num{font-variant-numeric:tabular-nums}
.g-ink{background:var(--ink);color:var(--paper)}
.g-chalk{background:var(--chalk);color:var(--ink)}
.g-gold{background:var(--gold);color:var(--ink)}
.g-chalk .h-giant,.g-chalk .h-display,.g-chalk .h2,.g-chalk .h3,.g-gold .h-giant,.g-gold .h-display,.g-gold .h2,.g-gold .h3{color:var(--ink)}
.g-chalk .body,.g-gold .body{color:rgba(10,10,10,.8)}
.g-chalk .small,.g-chalk .label,.g-gold .small,.g-gold .label{color:rgba(10,10,10,.62)}
.g-chalk .quote{color:rgba(10,10,10,.5)} .g-chalk .quote em{color:var(--ink)}
.h-giant{font:800 var(--t-giant)/.8 var(--display);letter-spacing:-.055em}
.link{display:inline-flex;align-items:center;gap:6px;font:700 15px/1 var(--body);padding-bottom:4px;border-bottom:1.5px solid currentColor;
  -webkit-tap-highlight-color:transparent}
.bleed{position:relative;width:100vw;margin-left:calc(50% - 50vw)}

/* ---------- chips (small labels on media) ---------- */
.chip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:6px;background:rgba(10,10,10,.62);
  font:700 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--paper);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* RESUME-14: on phones the chips ride on moving video cards; a live blur re-renders every frame there, so a flat, slightly darker ground */
@media (max-width:899px), (pointer:coarse){ .chip{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,10,10,.72)} }

/* ---------- the one sticky Book bar (follows the barber in view) ---------- */
.bookbar{position:fixed;left:var(--gut);right:var(--gut);bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;height:var(--bar-h);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:0 18px;border-radius:var(--radius);
  background:var(--gold);color:var(--on-gold);box-shadow:0 12px 32px rgba(0,0,0,.45);-webkit-tap-highlight-color:transparent}
.bookbar{transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .3s}
.bookbar.is-away{transform:translateY(160%);opacity:0;pointer-events:none;visibility:hidden;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .3s,visibility 0s .45s}
.bookbar.is-ink{background:var(--ink);color:var(--paper);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.bookbar.is-ink .bookbar__when{color:rgba(245,243,238,.7)}
.bookbar__go{font:700 16px/1 var(--body);letter-spacing:-.01em}
.bookbar__when{font:500 13px/1 var(--body);color:rgba(10,10,10,.65);white-space:nowrap}

/* ---------- line reveal wrapper ---------- */
.ln{display:block;overflow:hidden;padding-bottom:.05em;margin-bottom:-.05em}
.ln__in{display:block}

/* ---------- hero: the reel wall. Phone: one full-bleed reel (Yohan's), its poster the stage background. Desktop (>= 900): the
   barbers' own vertical reels side by side under the nav (Yohan, Juan, Issa; Joshua's 4th from 1600 px), the copy at the top of
   Yohan's column, over the plain wall above his client's head (measured: the head starts at 40% of the frame), so no type crosses
   a face. The breakpoint picks the media once per load (main.js reloads on a breakpoint change). ---------- */
.hero{position:relative;height:100svh;min-height:640px}
.hero__stage{position:relative;height:100svh;min-height:640px;overflow:hidden;
  background:var(--ink) url(../media/v11/wall/yohan-m.webp) 50% 50%/cover no-repeat}
/* RESUME-12: dense phone screens get the 720 poster, as vid.js gives them the 720 reel (CSS cannot multiply width by density, so this is
   the near rule: 2.5x and up, or 2x from 500 px) */
@media (max-width:899px) and (min-resolution:2.5dppx), (min-width:500px) and (max-width:899px) and (min-resolution:2dppx){ .hero__stage{background-image:url(../media/v11/wall/yohan-d.webp)} }
.hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero__shade{position:absolute;inset:0;background:   /* phone: the headline sits over the shop's light wall, so the top stays deep */
  linear-gradient(180deg, rgba(10,10,10,.8) 0%, rgba(10,10,10,.5) 32%, rgba(10,10,10,0) 50%, rgba(10,10,10,0) 58%, rgba(10,10,10,.92) 100%)}
.wall{display:none}
.hero__copy{position:absolute;left:var(--gut);right:var(--gut);top:calc(var(--nav-h) + var(--s4) + env(safe-area-inset-top))}
.hero__low{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(var(--s3) + env(safe-area-inset-bottom));display:grid;gap:var(--s2)}
.hero__sub{max-width:300px}
.hero__act{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s2);row-gap:14px}
.hero__go{flex:1 0 100%;height:var(--bar-h);display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:0 18px;border-radius:var(--radius);
  background:var(--gold);color:var(--on-gold);-webkit-tap-highlight-color:transparent;transition:background .2s,transform .2s}
.hero__go:hover{background:var(--gold-hi)}
.hero__go-t{font:700 16px/1 var(--body);letter-spacing:-.01em}
.hero__go-s{font:500 13px/1 var(--body);color:rgba(10,10,10,.65);white-space:nowrap}
.hero__go-s:empty::before{content:"\a0"}   /* the line keeps its height while the live time is on its way */
.hero__call{font:700 14px/1 var(--body);white-space:nowrap;color:var(--paper);border-bottom:1.5px solid rgba(245,243,238,.5);padding-bottom:4px;justify-self:start;transition:border-color .2s}
.hero__call:hover{border-color:var(--gold)}
.hero__trust{display:flex;align-items:center;gap:6px;font:700 13px/1 var(--body);color:var(--soft);white-space:nowrap}
.hero__score{color:var(--paper)}
.hero__on{font-weight:500;color:var(--mute)}
.stars{display:block;width:72px;height:auto}

/* ---------- section scaffold ---------- */
.sec{position:relative;padding:var(--s12) var(--gut) var(--s10)}
.media{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--ink-3)}

@media (min-width:900px){
  :root{--t-giant:260px; --t-display:80px; --t-h2:60px; --t-h3:26px; --t-quote:48px; --t-body:18px; --t-small:15px; --t-label:12px; --gut:56px; --nav-h:80px}
  .hero__stage{background:var(--ink);padding:calc(var(--nav-h) + clamp(14px, 2.2vh, 32px)) 0 0 var(--gut)}
  .hero__vid{display:none}
  .wall{position:absolute;left:0;right:0;top:var(--nav-h);bottom:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--ink)}
  .wall__col{position:relative;margin:0;overflow:hidden;background:var(--ink-3) 50% 0%/cover no-repeat}
  .wall__col--yohan{background-image:url(../media/v11/wall/yohan-d.webp)}
  .wall__col--juan{background-image:url(../media/v11/wall/juan-d.webp)}
  .wall__col--issa{background-image:url(../media/v11/wall/issa-d.webp)}
  .wall__col--joshua{display:none}
  .wall__col video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%}
  .wall__name{position:absolute;left:var(--s3);bottom:var(--s3);z-index:3;display:inline-flex;align-items:baseline;gap:10px;color:var(--paper);
    -webkit-tap-highlight-color:transparent}
  .wall__col:first-child .wall__name{left:var(--gut)}
  .wall__name b{font:700 15px/1 var(--body);letter-spacing:.01em}
  .wall__name span{font:600 13px/1 var(--body);color:var(--soft);border-bottom:1.5px solid rgba(245,243,238,.5);padding-bottom:3px;transition:border-color .2s,color .2s}
  .wall__name:hover span{color:var(--paper);border-color:var(--gold)}
  .wall__name:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
  /* a deep top under the copy in column 1 (over the light wall), and a foot band under the names */
  .hero__shade{background:
    linear-gradient(180deg, rgba(10,10,10,.86) 0%, rgba(10,10,10,.74) 30%, rgba(10,10,10,.32) 42%, rgba(10,10,10,0) 50%) 0 0/calc(100% / 3) 100% no-repeat,
    linear-gradient(0deg, rgba(10,10,10,.75) 0%, rgba(10,10,10,.35) 12%, rgba(10,10,10,0) 24%)}
  /* the whole copy block lives inside column 1, top: headline, subline, Book + Call, Google */
  .hero__copy,.hero__low{position:relative;inset:auto;display:block;width:calc(100vw / 3 - var(--gut) - 24px)}
  .hero__copy .h-display{font-size:min(calc(100vw / 3 * .105), 7.4vh)}
  .hero__low{margin-top:12px}
  .hero__sub{font-size:16px;max-width:none}
  .hero__act{display:flex;flex-wrap:wrap;align-items:center;column-gap:20px;row-gap:10px;margin-top:12px}
  .hero__go{flex:0 0 auto;height:auto;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:10px 18px;min-width:0}
  .hero__go-t{font-size:17px}
  .hero__go-s{font-size:12px}
  .hero__call{font-size:15px}
  .hero__trust{flex:0 0 auto;font-size:14px}
  .stars{width:80px}
  .bookbar{left:auto;right:var(--gut);bottom:32px;width:420px}
  .sec{padding:var(--s12) var(--gut) var(--s12)}
}
@media (prefers-reduced-motion:reduce){ .bookbar{box-shadow:none;transition:none} }

/* owner 00:03: page order is hero, reviews, cuts, barbers, visit. While the reviews are pinned, the cuts section rises into the
   empty lower part of their stage, so the last quote is followed straight by the next band (no empty chalk second). Motion only. */
.s-reviews.is-pin + .s-glow{margin-top:-34svh;position:relative;z-index:2}   /* 34 not 40: the last review's Book button must clear the rising band */

@media (min-width:900px) and (max-width:1365px){   /* laptops: a shorter block, so it ends above column 1's client's hair (measured) */
  .hero__copy .h-display{font-size:min(calc(100vw / 3 * .095), 7.4vh)}
}
@media (min-width:900px) and (max-width:1199px){   /* the 4.8 opens the reviews right below; the hero keeps headline, prices, Book, Call */
  .hero__trust{display:none}
}
@media (min-width:1600px){
  .wall{grid-template-columns:repeat(4,1fr)}
  .wall__col--joshua{display:block;background-image:url(../media/v11/wall/joshua-d.webp)}
  .hero__shade{background-size:calc(100% / 4) 100%,auto}
  .hero__copy,.hero__low{width:calc(100vw / 4 - var(--gut) - 24px)}
  .hero__copy .h-display{font-size:min(calc(100vw / 4 * .11), 7.4vh)}
}

/* Spanish width buffer (RESUME-9; Aeterno rule 6: Spanish runs about 30% longer). No box that holds a label has a fixed width:
   buttons grow with their text, and where a Book label and its live time share one row (the Book bar, the phone hero button) the
   time wraps to a second line instead of pushing the row wider (the phone drawer's Book row too, css/nav.css). EN "Next open · Tomorrow 10:00 AM" is borderline at 390 too, so
   this holds for both pages. Measured in both languages at 390, 1024, 1280 and 1440 (_scratch/fix9-overflow.mjs, fix9-hero.mjs). */
.bookbar__go{flex:none;white-space:nowrap}
.bookbar__when{white-space:normal;text-align:right;line-height:1.25;min-width:0}
@media (max-width:899px){
  .hero__go-t{flex:none;white-space:nowrap}
  .hero__go-s{white-space:normal;text-align:right;line-height:1.25;min-width:0}
}