/* ════════════════════════════════════════════════════════════════
   Faded Rey's Barbershop — Rise Local build 2026-08-25
   Palette harvested from their own logo (_Media/gbp/gbp-3.jpg):
     crimson #8C1C1C · black #0B0B0C · silver #E9E9E7 · warm grey #6E6862
   Register: modern editorial, monochrome + crimson. NOT vintage americana.
   Idea: "Rey" = king. The crown is already in their logo.
   ════════════════════════════════════════════════════════════════ */

:root{
  --ink:#0B0B0C;
  --ink-soft:#1A1A1C;
  --bone:#F4F2EE;
  --bone-deep:#EAE7E1;
  --paper:#FFFFFF;
  --silver:#E9E9E7;
  --crimson:#8C1C1C;
  --crimson-lift:#A82525;
  --grey:#6E6862;
  --grey-light:#9A948D;
  --muted-dark:#B8B4AF;
  --line:rgba(11,11,12,.12);
  --line-light:rgba(233,233,231,.16);

  --display:'Bodoni Moda', 'Times New Roman', serif;
  /* Their logo wordmark is a bold right-leaning brush script. Yellowtail is the
     closest match on slant, stroke contrast and flow — checked against the mark. */
  --script:'Yellowtail', 'Brush Script MT', cursive;
  --ui:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --shell-max:1180px;
  --pad:20px;

  /* ADDITIVE growth delta — 0 at and below 1440px, +16px at 2560px.
     Every wide-screen spacing rule is `base + var(--grow)`, never a bare token.
     (Build-Standard §4b law 4.) */
  --grow:clamp(0px, calc((100vw - 1440px) / 1120 * 16), 16px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--ui);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{margin:0; font-weight:400}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.shell{
  width:100%;
  max-width:var(--shell-max);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* ── Rise Local preview banner (required) ───────────────────── */
.rl-banner{
  background:var(--ink);
  color:var(--silver);
  font-size:12.5px;
  line-height:1.5;
  letter-spacing:.01em;
  text-align:center;
  padding:9px 16px;
  border-bottom:1px solid rgba(233,233,231,.14);
}
.rl-banner strong{color:#fff; font-weight:600}

/* ── Header ─────────────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(11,11,12,.94);
  border-bottom:1px solid var(--line-light);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  min-height:66px;
  position:relative;
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--silver);
}
.brand-crown{display:inline-flex; color:var(--crimson-lift)}
/* Their real badge. The source JPEG has a baked black ground, so it is only ever
   placed on the dark header/footer — never on bone or white. */
.brand-logo{
  width:46px; height:46px;
  flex:0 0 auto;
}
.brand-logo-lg{width:132px; height:132px}

/* ── THE CREST — the badge given the room it deserves, over the hero photo ── */
.hero-crest{
  width:150px; height:150px;
  margin:0 0 20px -10px;     /* pulls the round mark back to the text edge optically */
  /* Two shadows: a tight one to cut it off the photo, a wide one to seat it. */
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.85)) drop-shadow(0 10px 40px rgba(0,0,0,.6));
}
.brand-name{
  font-family:var(--script);
  font-size:27px; line-height:1;
  letter-spacing:.01em;
  padding-bottom:3px;   /* the script sits high in its box */
}

.nav-toggle{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 10px;
  background:none; border:0; cursor:pointer;
}
.nav-toggle span{display:block; height:1.5px; background:var(--silver); border-radius:2px}

/* Closed drawer: ABSOLUTE anchor + visibility:hidden.
   Never displacement alone — Build-Standard §4a. */
.nav{
  position:absolute;
  top:100%; left:0; right:0;
  background:var(--ink);
  border-bottom:1px solid var(--line-light);
  padding:8px var(--pad) 18px;
  display:flex; flex-direction:column; gap:2px;
  transform:translateY(-8px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:transform .26s ease, opacity .2s ease, visibility 0s linear .26s;
}
.nav.open{
  transform:none; opacity:1; visibility:visible; pointer-events:auto;
  transition:transform .26s ease, opacity .2s ease, visibility 0s;
  /* never taller than what is left of the screen under the header, and scroll
     inside itself when the Services list is expanded. dvh first so the iOS
     address bar collapsing does not change the answer; vh as the fallback. */
  max-height:calc(100vh - 108px);
  max-height:calc(100dvh - 108px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.nav a{
  text-decoration:none;
  color:var(--silver);
  font-size:14px; letter-spacing:.09em; text-transform:uppercase; font-weight:500;
  padding:12px 2px;
  border-bottom:1px solid rgba(233,233,231,.08);
}
.nav a:last-of-type{border-bottom:0}
.nav .nav-hiring{color:var(--crimson-lift)}
.nav .nav-cta{
  margin-top:12px; text-align:center; border-bottom:0;
  text-transform:none; letter-spacing:.01em; font-size:15px;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--ui);
  font-size:14px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  padding:14px 24px;
  border:1px solid transparent;
  border-radius:2px;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-lg{padding:17px 30px; font-size:14.5px}
.btn-block{width:100%}
.btn-primary{background:var(--crimson); color:#fff; border-color:var(--crimson)}
.btn-primary:hover{background:var(--crimson-lift); border-color:var(--crimson-lift)}
.btn-ghost{background:transparent; color:var(--silver); border-color:rgba(233,233,231,.45)}
.btn-ghost:hover{background:rgba(233,233,231,.1); border-color:var(--silver)}
.btn-ghost-light{background:transparent; color:var(--silver); border-color:rgba(233,233,231,.45)}
.btn-ghost-light:hover{background:rgba(233,233,231,.1)}

/* ── Shared type ────────────────────────────────────────────── */
.eyebrow{
  font-size:11.5px; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--crimson);
  margin:0 0 14px;
}
.section-dark .eyebrow{color:var(--crimson-lift)}
/* Hero eyebrow crosses the photo — lift it off bright patches. */
.hero .eyebrow{color:#D8574F; text-shadow:0 1px 10px rgba(0,0,0,.85)}
.center{text-align:center}
.section-title{
  font-family:var(--display);
  font-size:34px; line-height:1.12;
  letter-spacing:-.005em;
  margin:0 0 16px;
}
.section-lede{
  font-size:17.5px; color:var(--grey);
  max-width:60ch;
  margin:0 0 30px;
}
.center.section-lede{margin-inline:auto}
.micro{font-size:13.5px; color:var(--grey-light); line-height:1.6}
.section-dark .micro{color:var(--muted-dark)}

.section{padding:calc(64px + var(--grow) * 1.6) 0}
.section-dark{background:var(--ink); color:var(--silver)}
.section-dark .section-lede{color:var(--muted-dark)}
.section-bone{background:var(--bone)}

/* ── Hero ───────────────────────────────────────────────────── */
.hero{position:relative; isolation:isolate; overflow:hidden}
.hero-img,.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 55%;
  z-index:-2;
}
/* The video is decoration; the poster carries the first paint. */
.hero-video{object-position:center 50%}

/* Reduced motion: kill the loop, keep the poster frame as a still. */
@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .hero{background:#0B0B0C url("video/barber-hero-poster.jpg") center/cover no-repeat}
}

.room-band .room-grid{margin-bottom:16px}
.room-band .room-item img{aspect-ratio:16/10}
.hero-scrim{
  position:absolute; inset:0; z-index:-1;
  /* Mobile: text runs full width, so coverage has to be broad — but still graded. */
  background:
    linear-gradient(to bottom, rgba(11,11,12,.62) 0%, rgba(11,11,12,.78) 55%, rgba(11,11,12,.9) 100%);
}
.hero-inner{
  padding-top:calc(74px + var(--grow) * 1.2);
  padding-bottom:calc(66px + var(--grow) * 1.2);
  color:var(--silver);
}
.hero-title{
  font-family:var(--display);
  font-size:46px; line-height:1.03;
  letter-spacing:-.01em;
  margin:0 0 20px;
  text-shadow:0 2px 22px rgba(0,0,0,.5);
}
.hero-title em{
  font-family:var(--script); font-style:normal;
  color:#fff; font-size:1.06em; line-height:1.25;
  display:inline-block; padding:.06em 0;
}
.hero-sub{
  font-size:18px; line-height:1.6;
  color:var(--muted-dark);
  max-width:52ch;
  margin:0 0 28px;
  text-shadow:0 1px 14px rgba(0,0,0,.55);
}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:26px}
.hero-proof{
  font-size:14.5px; color:var(--muted-dark);
  margin:0; padding-top:20px;
  border-top:1px solid rgba(233,233,231,.2);
}
.hero-proof strong{color:#fff; font-weight:600}
.stars{color:var(--crimson-lift); letter-spacing:.09em; margin-right:8px}

/* ── Proof band ─────────────────────────────────────────────── */
.proof{background:var(--ink-soft); color:var(--silver); padding:calc(34px + var(--grow)) 0}
.proof-grid{display:grid; grid-template-columns:1fr; gap:calc(22px + var(--grow))}
.proof-item{text-align:center}
.proof-n{
  display:block;
  font-family:var(--display);
  font-size:44px; line-height:1;
  color:#fff;
  margin-bottom:8px;
}
.proof-l{display:block; font-size:14px; color:var(--muted-dark); letter-spacing:.01em}

/* ── Services ───────────────────────────────────────────────── */
.svc-grid{
  display:grid; grid-template-columns:1fr;
  gap:calc(16px + var(--grow));
  margin-bottom:calc(38px + var(--grow));
}
.svc-card{
  border:1px solid var(--line);
  border-radius:3px;
  padding:calc(24px + var(--grow)) calc(22px + var(--grow));
  background:var(--paper);
}
.svc-card h3{font-family:var(--display); font-size:23px; line-height:1.2; margin-bottom:8px}
.svc-price{font-size:15px; font-weight:600; color:var(--crimson); margin:0 0 2px; letter-spacing:.01em}
.svc-time{font-size:13px; color:var(--grey-light); margin:0 0 12px; letter-spacing:.02em}
.svc-desc{font-size:15.5px; color:var(--grey); margin:0; line-height:1.6}
.svc-cta .micro{margin-top:12px}

/* ── Barbers ────────────────────────────────────────────────── */
.barber-grid{
  list-style:none; margin:0 0 calc(34px + var(--grow)); padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:calc(18px + var(--grow));
}
.barber{
  border:1px solid var(--line-light);
  border-radius:3px;
  padding:calc(22px + var(--grow)) calc(18px + var(--grow));
  text-align:center;
}
.barber-photo{
  width:80px; height:80px;
  border-radius:50%;
  object-fit:cover; object-position:center 30%;
  margin-bottom:14px;
  border:1px solid rgba(233,233,231,.22);
}
.barber-initial{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; margin-bottom:14px;
  border:1px solid var(--crimson-lift);
  border-radius:50%;
  font-family:var(--display); font-size:20px; color:var(--crimson-lift);
}
.barber h3{font-family:var(--display); font-size:19px; margin-bottom:5px; color:#fff}
.barber p{font-size:14px; color:var(--muted-dark); margin:0; line-height:1.55}

.barber-actions{
  display:flex; flex-direction:column; align-items:stretch; gap:9px;
  width:100%; min-width:0;
  margin-top:14px;
}
/* Booking is the primary action on the card; the handle is the portfolio. */
.barber-book{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; min-width:0;
  overflow-wrap:anywhere;
  font-size:12.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:#fff; background:var(--crimson);
  border:1px solid var(--crimson); border-radius:2px;
  padding:10px 14px; text-decoration:none;
  transition:background-color .18s ease, border-color .18s ease;
}
.barber-book:hover{background:var(--crimson-lift); border-color:var(--crimson-lift)}
/* The barber name is already the card heading; on a narrow card it made the
   button wrap to three lines, so it is dropped below the two-up breakpoint. */
.bk-name{display:none}
@media (min-width:620px){ .bk-name{display:inline} }

/* Each barber's handle IS his portfolio — the link is the point of the card. */
.barber-ig{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:500; letter-spacing:.02em;
  color:var(--muted-dark); text-decoration:none;
  padding:6px 11px;
  border:1px solid rgba(233,233,231,.22);
  border-radius:999px;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
.barber-ig:hover{
  color:#fff;
  border-color:var(--crimson-lift);
  background:rgba(168,37,37,.18);
}
.barber-ig{max-width:100%; align-self:center}
.barber-ig span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.barber-ig .ig-glyph{flex:0 0 auto; opacity:.85}
.barber-ig:hover .ig-glyph{opacity:1}
.barber{display:flex; flex-direction:column; align-items:center}
.barber p{flex:1 0 auto}

/* ── Sensory-friendly ───────────────────────────────────────── */
.sensory{background:var(--bone)}
.sensory-inner{display:grid; grid-template-columns:1fr; gap:calc(30px + var(--grow))}
.sensory-copy p{color:var(--grey); font-size:16.5px}
.sensory-copy p strong{color:var(--ink)}
.sensory-quote{
  font-family:var(--display);
  font-size:20px; line-height:1.45; font-style:italic;
  color:var(--ink) !important;
  border-left:2px solid var(--crimson);
  padding-left:18px;
  margin:22px 0 8px !important;
}
.sensory-attrib{font-size:13.5px; color:var(--grey-light) !important; margin-bottom:22px !important}
.sensory-photo img{border-radius:3px; width:100%; object-fit:cover; aspect-ratio:4/3}
.sensory-copy .micro{margin-top:10px}

/* ── Work / room grids ──────────────────────────────────────── */
.room-grid{
  display:grid; grid-template-columns:1fr;
  gap:calc(16px + var(--grow));
  margin-bottom:22px;
}
.room-item{margin:0}
.room-item img{
  border-radius:3px; width:100%;
  aspect-ratio:4/3; object-fit:cover;
}
.room-item figcaption{
  font-size:13.5px; color:var(--grey-light);
  padding-top:9px; letter-spacing:.01em;
}

.room-single{margin:0}
.room-single img{
  width:100%; border-radius:3px;
  aspect-ratio:16/9; object-fit:cover;
}
.room-single figcaption{
  font-size:13.5px; color:var(--grey-light);
  padding-top:10px; text-align:center; letter-spacing:.01em;
}

/* The design feature — one real photo, given room to be the point. */
.design-inner{display:grid; grid-template-columns:1fr; gap:calc(28px + var(--grow)); align-items:center}
.design-photo img{
  width:100%; border-radius:3px;
  /* Square + pulled up: frames the head and the line work, not the t-shirt. */
  aspect-ratio:1/1; object-fit:cover; object-position:52% 26%;
}
.design-copy p{color:var(--muted-dark); font-size:16.5px}
.design-copy .btn{margin-top:6px}
.design-copy .micro{margin-top:14px}
.design-copy .micro a{color:var(--silver)}

/* ── Reviews ────────────────────────────────────────────────── */
.review-grid{display:grid; grid-template-columns:1fr; gap:calc(18px + var(--grow))}
.review{
  margin:0;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:3px;
  padding:calc(26px + var(--grow)) calc(24px + var(--grow));
}
.review p{font-size:16px; color:var(--grey); line-height:1.65; margin-bottom:14px}
.review cite{font-style:normal; font-size:13px; color:var(--crimson); letter-spacing:.05em; text-transform:uppercase; font-weight:600}

/* ── Hiring strip ───────────────────────────────────────────── */
.hiring-strip{background:var(--crimson); color:#fff; padding:calc(46px + var(--grow)) 0}
.hiring-inner{display:grid; grid-template-columns:1fr; gap:calc(24px + var(--grow)); align-items:center}
.hiring-strip .eyebrow{color:rgba(255,255,255,.72)}
.hiring-title{font-family:var(--display); font-size:30px; line-height:1.15; margin-bottom:12px}
.hiring-sub{font-size:16.5px; color:rgba(255,255,255,.9); max-width:54ch; margin:0}
.hiring-strip .btn-primary{background:#fff; color:var(--crimson); border-color:#fff; justify-self:start}
.hiring-strip .btn-primary:hover{background:var(--bone); border-color:var(--bone); color:var(--crimson)}

/* ── Visit ──────────────────────────────────────────────────── */
.visit-inner{display:grid; grid-template-columns:1fr; gap:calc(30px + var(--grow))}
.visit-line{font-size:17px; color:var(--grey)}
.hours{margin:22px 0; padding:0; border-top:1px solid var(--line)}
.hours > div{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--line);
}
.hours dt{font-size:15px; font-weight:500; color:var(--ink); margin:0}
.hours dd{font-size:15px; color:var(--grey); margin:0; text-align:right}
.confirm-flag{
  display:inline-block; margin-left:7px;
  font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:#fff; background:var(--crimson);
  padding:2px 7px; border-radius:2px; vertical-align:1px;
}
.visit-actions{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px}
.visit-actions .btn-ghost{color:var(--ink); border-color:var(--line)}
.visit-actions .btn-ghost:hover{background:var(--bone-deep); border-color:var(--grey-light)}
.visit-map iframe{width:100%; height:340px; border-radius:3px; display:block}

/* Their real room, seated inside Find Us — the shop you are walking into. */
.visit-side{display:flex; flex-direction:column; gap:14px; min-width:0}

/* One photo, sized to match the map block beneath it. */
.visit-room{margin:0}
.visit-room figure{margin:0}
.visit-room img{width:100%; height:340px; object-fit:cover; border-radius:3px; display:block}
@media (min-width:900px){ .visit-room img{height:calc(400px)} }
@media (min-width:1200px){ .visit-room img{height:calc(420px + var(--grow) * 2)} }

/* ── Careers: why / tracks / QA ─────────────────────────────── */
.why-grid{display:grid; grid-template-columns:1fr; gap:calc(18px + var(--grow))}
.why-card{
  border:1px solid var(--line); border-radius:3px;
  padding:calc(26px + var(--grow)) calc(24px + var(--grow));
  background:var(--paper);
}
.why-num{
  display:block; font-family:var(--display); font-size:15px;
  color:var(--crimson); letter-spacing:.1em; margin-bottom:12px;
}
.why-card h3{font-family:var(--display); font-size:24px; line-height:1.2; margin-bottom:10px}
.why-card p{font-size:16px; color:var(--grey); margin:0}
.why-card p strong{color:var(--ink)}

.track-grid{display:grid; grid-template-columns:1fr; gap:calc(18px + var(--grow))}
.track{
  border:1px solid var(--line-light); border-radius:3px;
  padding:calc(26px + var(--grow)) calc(24px + var(--grow));
}
.track h3{font-family:var(--display); font-size:23px; line-height:1.2; margin-bottom:10px; color:#fff}
.track p{font-size:15.5px; color:var(--muted-dark); margin:0}

.details-inner{display:grid; grid-template-columns:1fr; gap:calc(26px + var(--grow))}
.qa{margin:0; padding:0; border-top:1px solid var(--line)}
.qa-row{padding:18px 0; border-bottom:1px solid var(--line)}
.qa dt{
  font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--crimson); margin:0 0 7px;
}
.qa dd{margin:0; font-size:16px; color:var(--grey); line-height:1.62}
.qa dd strong{color:var(--ink)}

/* ── Apply form ─────────────────────────────────────────────── */
.apply{background:var(--ink); color:var(--silver)}
.apply .section-title{color:#fff}
.apply .section-lede{color:var(--muted-dark)}
.apply-inner{max-width:660px; margin-inline:auto}
.apply-head{text-align:center; margin-bottom:calc(30px + var(--grow))}
.apply-form{display:grid; grid-template-columns:1fr; gap:18px}
.field{display:flex; flex-direction:column}
.field label{
  font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--silver); margin-bottom:8px;
}
.req{
  margin-left:6px; font-size:10px; letter-spacing:.12em;
  color:var(--crimson-lift); font-weight:700;
}
.field input,.field select,.field textarea{
  font-family:var(--ui); font-size:16px;
  color:#fff; background:rgba(233,233,231,.06);
  border:1px solid rgba(233,233,231,.24);
  border-radius:2px;
  padding:13px 14px;
  width:100%;
}
.field textarea{resize:vertical; min-height:104px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--crimson-lift); outline-offset:1px;
  border-color:transparent; background:rgba(233,233,231,.09);
}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted-dark) 50%),linear-gradient(135deg,var(--muted-dark) 50%,transparent 50%); background-position:calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size:6px 6px,6px 6px; background-repeat:no-repeat}
.field .hint{font-size:13px; color:var(--grey-light); margin:7px 0 0}
.field .err{font-size:13px; color:#F2846F; margin:7px 0 0; display:none}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid select{border-color:#F2846F}
.reassure{font-size:13.5px; color:var(--muted-dark); text-align:center; margin:4px 0 0}
.form-status{font-size:14px; color:#F2846F; text-align:center; margin:6px 0 0; min-height:1px}

.apply-done{text-align:center; padding:26px 0}
.done-crown{display:inline-flex; color:var(--crimson-lift); margin-bottom:16px}
.apply-done h3{font-family:var(--display); font-size:32px; color:#fff; margin-bottom:12px}
.apply-done p{color:var(--muted-dark); font-size:16.5px; max-width:44ch; margin-inline:auto}
.apply-done a{color:#fff}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer{background:var(--ink); color:var(--muted-dark); padding:calc(48px + var(--grow)) 0 0}
.footer-inner{display:grid; grid-template-columns:1fr; gap:calc(26px + var(--grow))}
.footer-brand .brand-crown{color:var(--crimson-lift)}
.footer-brand .brand-logo{margin-bottom:12px; margin-left:-10px}
.footer-brand .brand-name{
  display:block; font-family:var(--script); font-size:25px;
  color:var(--silver); margin:8px 0 6px;
}
.footer-col h3{
  font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--silver); margin-bottom:12px;
}
.footer-col p{font-size:15px; margin-bottom:8px}
.footer-col a{color:var(--muted-dark); text-decoration:none; border-bottom:1px solid rgba(233,233,231,.22)}
.footer-col a:hover{color:#fff}
.footer-legal{padding:26px 0; margin-top:calc(34px + var(--grow)); border-top:1px solid var(--line-light)}
.footer-legal a{color:var(--muted-dark)}

/* ── Sticky mobile CTA ──────────────────────────────────────── */
.sticky-cta{
  position:fixed; left:14px; right:14px; bottom:14px; z-index:70;
  display:flex; align-items:center; justify-content:center;
  background:var(--crimson); color:#fff;
  font-size:14.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none;
  padding:15px; border-radius:2px;
  box-shadow:0 8px 26px rgba(0,0,0,.34);
}
body{padding-bottom:74px}

/* ════════════════════════════════════════════════════════════
   ≥ 620px — two-up grids
   ════════════════════════════════════════════════════════════ */
@media (min-width:620px){
  .proof-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .room-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-title{font-size:58px}
  .section-title{font-size:40px}
  .hiring-title{font-size:36px}
}

/* ════════════════════════════════════════════════════════════
   ≥ 900px — desktop nav, final column counts (they never change again)
   ════════════════════════════════════════════════════════════ */
@media (min-width:900px){
  .nav-toggle{display:none}
  .nav{
    position:static;
    flex-direction:row; align-items:center; gap:26px;
    background:none; border:0; padding:0;
    transform:none; opacity:1; visibility:visible; pointer-events:auto;
    transition:none;
    /* the drawer's mobile scroller must not survive into the desktop row,
       or the dropdown overlay gets clipped by its own parent */
    max-height:none; overflow:visible;
  }
  .nav a{padding:0; border-bottom:0; font-size:12.5px; letter-spacing:.11em}
  .nav a:not(.btn){opacity:.85}
  .nav a:not(.btn):hover{opacity:1}
  .nav .nav-cta{margin-top:0; padding:11px 20px; font-size:13px}

  .header-inner{min-height:74px}

  /* Desktop: the copy occupies the left half, so the scrim goes DIRECTIONAL —
     dark where the words are, and the shop's real room stays visible on the right.
     (Build-Standard §6: don't over-darken a bright, inviting space.) */
  .hero-scrim{
    background:
      linear-gradient(100deg, rgba(11,11,12,.93) 0%, rgba(11,11,12,.86) 34%, rgba(11,11,12,.55) 62%, rgba(11,11,12,.34) 100%),
      linear-gradient(to bottom, rgba(11,11,12,.32) 0%, rgba(11,11,12,0) 40%, rgba(11,11,12,.45) 100%);
  }
  .hero-inner{padding-top:calc(112px + var(--grow) * 1.2); padding-bottom:calc(96px + var(--grow) * 1.2)}
  .hero-crest{width:232px; height:232px; margin-bottom:26px; margin-left:-16px}
  /* the crest carries the top of the hero now — ease the padding so it does not tower */
  .hero-inner{padding-top:calc(84px + var(--grow) * 1.2)}
  .hero-title{font-size:70px}
  .hero-sub{font-size:19px}

  .section{padding:calc(92px + var(--grow) * 1.6) 0}
  .section-title{font-size:46px}

  .svc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .barber-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .track-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .design-inner{grid-template-columns:.85fr 1.15fr; gap:calc(48px + var(--grow))}

  .sensory-inner{grid-template-columns:1.05fr .95fr; align-items:center}
  .visit-inner{grid-template-columns:1fr 1fr; align-items:start}
  .details-inner{grid-template-columns:.82fr 1.18fr; align-items:start}
  .hiring-inner{grid-template-columns:1fr auto; gap:calc(40px + var(--grow))}
  .footer-inner{grid-template-columns:1.4fr 1fr 1fr}

  .visit-map iframe{height:400px}
  .room-item img{aspect-ratio:16/10}

  /* Sticky CTA is a phone affordance — the header CTA takes over here. */
  .sticky-cta{display:none}
  body{padding-bottom:0}
}

/* ════════════════════════════════════════════════════════════
   ≥ 1200px — THE LARGE-SCREEN TIER (Build-Standard §4b law 1)
   Layout grows. Type does NOT. Column counts do NOT change.
   ════════════════════════════════════════════════════════════ */
@media (min-width:1200px){
  :root{ --shell-max:1240px; --pad:28px; }
  .visit-map iframe{height:calc(420px + var(--grow) * 2)}
}

@media (min-width:1600px){
  :root{ --shell-max:min(1520px, 90vw); }
}

@media (min-width:2000px){
  /* Keep ONE content edge modest on very wide screens (law 5): the shell
     tracks the viewport rather than freezing into a narrow ribbon. */
  :root{ --shell-max:min(1780px, 90vw); }
}

/* ── Motion + focus hygiene ─────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--crimson-lift); outline-offset:2px;
}

/* ══════════════════════════════════════════════════════════════
   Interior content pages (sensory-friendly, and the SEO pages
   that follow it). Reuses the shell, type scale and palette —
   no second design system.
   ══════════════════════════════════════════════════════════════ */
/* The narrow shell was auto-centring, which pushed the body copy off the ONE
   content edge the hero, header and footer all share. Keep the container on
   that edge and cap the MEASURE on the children instead. */
.shell.narrow{max-width:var(--shell-max)}
.shell.narrow > *{max-width:78ch}
.shell.narrow > .qa,
.shell.narrow > .faq{max-width:84ch}
.page-hero{
  background:var(--ink); color:var(--silver);
  padding:calc(58px + var(--grow) * 1.4) 0 calc(52px + var(--grow) * 1.4);
  border-bottom:1px solid var(--line-light);
}
.page-title{
  font-family:var(--display);
  font-size:40px; line-height:1.08; letter-spacing:-.01em;
  margin:0 0 18px;
}
.page-lede{font-size:18px; line-height:1.6; color:var(--muted-dark); max-width:60ch; margin:0 0 26px}
.page-lede strong{color:#fff}

.steps{list-style:none; counter-reset:s; margin:0; padding:0}
.steps li{
  counter-increment:s; position:relative;
  padding:0 0 26px 52px; margin:0;
  border-left:1px solid var(--line);
}
.steps li:last-child{border-left-color:transparent; padding-bottom:0}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute; left:-13px; top:0;
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:12px;
  color:#fff; background:var(--crimson);
}
.steps h3{font-family:var(--display); font-size:22px; margin:0 0 7px; line-height:1.2}
.steps p{font-size:16.5px; color:var(--grey); margin:0}

.pull-quote{
  font-family:var(--display); font-size:21px; line-height:1.45; font-style:italic;
  border-left:2px solid var(--crimson); padding-left:20px;
  margin:24px 0 8px;
}
.pull-quote cite{
  display:block; margin-top:12px;
  font-family:var(--ui); font-style:normal; font-size:13.5px;
  color:var(--grey-light); letter-spacing:.02em;
}
.pull-quote cite span{opacity:.8}
.sub-head{font-family:var(--display); font-size:24px; margin:34px 0 16px}

.faq{
  border-bottom:1px solid var(--line);
  padding:2px 0;
}
.faq summary{
  cursor:pointer; list-style:none;
  padding:17px 34px 17px 0; position:relative;
  font-size:17px; font-weight:500; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:''; position:absolute; right:6px; top:50%;
  width:9px; height:9px; margin-top:-6px;
  border-right:1.5px solid var(--crimson); border-bottom:1.5px solid var(--crimson);
  transform:rotate(45deg); transition:transform .2s ease;
}
.faq[open] summary::after{transform:rotate(-135deg); margin-top:-2px}
.faq p{font-size:16.5px; color:var(--grey); margin:0 0 18px; padding-right:34px}
.cta-line{margin-top:34px; display:flex; flex-wrap:wrap; align-items:center; gap:16px}

@media (min-width:900px){
  .page-hero{padding:calc(84px + var(--grow) * 1.4) 0 calc(74px + var(--grow) * 1.4)}
  .page-title{font-size:56px}
}

/* ══════════════════════════════════════════════════════════════
   REVIEWS — a staggered horizontal track of mixed-size cards.
   Same structural idea as the Advanced Eyecare section, rebuilt
   in this shop's palette and type rather than copied across.
   ══════════════════════════════════════════════════════════════ */
.revs{background:var(--ink-soft); color:var(--silver); padding:calc(64px + var(--grow) * 1.6) 0}
.rhead{position:relative; text-align:center; margin-bottom:calc(34px + var(--grow))}
.rhead h2{
  font-family:var(--display);
  font-size:34px; line-height:1.12; letter-spacing:-.01em;
  color:#fff; margin:0 0 12px;
}
.rsub{color:var(--muted-dark); font-size:16.5px; margin:0 auto; max-width:52ch}
.rnav{display:flex; gap:10px; justify-content:center; margin-top:22px}
.rnav .rb{
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  font-size:16px; background:#33333a; color:#fff;
  display:grid; place-items:center; transition:background .2s, color .2s;
}
.rnav .rb.on,.rnav .rb:hover{background:var(--crimson); color:#fff}

.rtrack{
  display:flex; gap:18px; overflow-x:auto; scroll-behavior:smooth;
  padding:0 max(20px, calc((100vw - var(--shell-max)) / 2 + 20px)) 8px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.rtrack::-webkit-scrollbar{display:none}
.rc{
  flex:0 0 auto; display:flex; flex-direction:column; justify-content:flex-end;
  padding:30px 28px; border-radius:3px;
}
.rc q{quotes:none; display:block; font-family:var(--display); line-height:1.2; letter-spacing:-.012em}
.rc p{font-size:15.5px; line-height:1.68; margin:14px 0 0}
.rc .by{margin-top:20px; font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; opacity:.72}

.rc.bone{width:clamp(280px,25vw,380px); background:var(--bone); color:var(--grey); margin-top:40px}
.rc.bone q{font-size:clamp(1.5rem,2vw,1.95rem); color:var(--ink)}
.rc.bone.tall{margin-top:6px; width:clamp(280px,23vw,340px)}
.rc.white{width:clamp(290px,26vw,400px); background:#fff; color:var(--grey); margin-top:14px}
.rc.white q{font-size:clamp(1.35rem,1.8vw,1.7rem); color:var(--crimson)}
.rc.crimson{
  width:clamp(260px,22vw,340px); background:var(--crimson); color:#fff;
  margin-top:72px; justify-content:center;
}
.rc.crimson q{font-size:clamp(1.6rem,2.4vw,2.2rem); color:#fff}
.rc.fact{
  width:clamp(260px,22vw,340px); background:#232329; color:var(--muted-dark);
  border:1px solid #34343b; margin-top:52px;
}
.rc.fact q{font-size:clamp(1.5rem,2vw,1.9rem); color:#fff}
.rc.photo{width:290px; padding:0; position:relative; overflow:hidden; background:#000; margin-top:24px}
.rc.photo img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
.rc.photo .ov{
  position:relative; margin-top:auto; padding:26px 24px; width:100%;
  background:linear-gradient(180deg, rgba(11,11,12,0), rgba(11,11,12,.9));
}
.rc.photo q{font-size:clamp(1.4rem,1.9vw,1.8rem); color:#fff}
.rc.photo .by{color:#fff}

@media (max-width:620px){
  .rc.bone,.rc.white,.rc.crimson,.rc.fact,.rc.photo{width:80vw; margin-top:0}
  .rc.photo{height:320px}
}
@media (min-width:900px){
  .rhead{text-align:left}
  .rhead h2{font-size:46px}
  .rsub{margin:0}
  .rnav{position:absolute; right:0; top:0; margin-top:0}
}

/* ══════════════════════════════════════════════════════════════
   BARBER ART — inline SVG only. Zero extra requests, CSP-safe by
   construction, and it scales without a single image file.
   Restraint: this is texture, never a second design system.
   ══════════════════════════════════════════════════════════════ */

/* A barber-pole stripe, running the width of a dark section as a hairline.
   The pole is already in their logo — this is the same idea at 1px. */
.pole-rule{
  height:5px; border:0; margin:0;
  background-image:repeating-linear-gradient(
    -60deg,
    var(--crimson) 0 10px,
    #E9E9E7 10px 20px,
    #0B0B0C 20px 30px
  );
  opacity:.85;
}

/* Interior pages: a big, faint razor + shears motif sitting in the dead
   space to the right of the hero copy. Fades out entirely under 900px,
   where there is no dead space to fill. */
.page-hero{position:relative; overflow:hidden}
.page-hero > .shell{position:relative; z-index:1}
.page-hero::after{
  content:''; position:absolute; z-index:0;
  right:-40px; top:50%; transform:translateY(-50%);
  width:420px; height:420px;
  opacity:.07; pointer-events:none;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23E9E9E7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='52' cy='150' r='15'/%3E%3Ccircle cx='96' cy='150' r='15'/%3E%3Cpath d='M62 139 148 44M86 139 40 86'/%3E%3Cpath d='M148 44l14-16 8 7-14 16z'/%3E%3Cpath d='M150 120c14 6 26 18 30 32M172 108l16 18'/%3E%3Cpath d='M30 30h44v52a22 22 0 0 1-44 0z'/%3E%3Cpath d='M30 44h44M30 58h44M30 72h44'/%3E%3C/svg%3E");
  display:none;
}
@media (min-width:900px){ .page-hero::after{display:block} }
@media (min-width:1400px){ .page-hero::after{width:520px; height:520px; right:0; opacity:.08} }

/* The dark sections pick up a very faint diagonal stripe so a long
   text page never reads as a flat black slab. */
.section-dark::before,.site-header::after,.proof::before,.site-footer::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  opacity:.4;
  background-image:repeating-linear-gradient(
    -60deg,
    rgba(233,233,231,.018) 0 2px,
    transparent 2px 26px
  );
}
.section-dark,.proof{position:relative}
.section-dark > .shell,.proof > .shell{position:relative; z-index:1}

/* A small crimson mark to sit between blocks instead of empty space. */
.mark-rule{
  display:flex; align-items:center; gap:16px;
  margin:calc(38px + var(--grow)) 0;
  color:var(--crimson);
}
.mark-rule::before,.mark-rule::after{
  content:''; flex:1; height:1px; background:currentColor; opacity:.32;
}
.mark-rule svg{flex:0 0 auto; opacity:.9}

/* Footer gets the pole as a top edge — the shop's own object, used once. */
.site-footer{position:relative}
.site-footer::before{
  content:''; position:absolute; left:0; right:0; top:0; height:4px;
  background-image:repeating-linear-gradient(
    -60deg, var(--crimson) 0 9px, #E9E9E7 9px 18px, #0B0B0C 18px 27px
  );
  opacity:.9;
}

/* ══════════════════════════════════════════════════════════════
   SERVICES DROPDOWN — every service the barbers actually perform,
   under one nav item. Opens on hover on desktop, on tap on mobile,
   and expands inline inside the drawer.
   ══════════════════════════════════════════════════════════════ */
.nav-drop{position:relative; display:flex; align-items:center}
.nav-drop-btn{
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:0; cursor:pointer;
  font-family:var(--ui); font-size:14px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--silver); padding:12px 2px;
}
.caret{
  width:6px; height:6px; flex:0 0 auto;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .2s ease;
}
.nav-drop.open .caret{transform:rotate(-135deg) translateY(-2px)}

/* Mobile: the menu expands inline inside the drawer, no overlay. */
/* The 0fr/1fr grid trick only zeroes the FIRST row, and there are eleven
   sibling links here — it left the menu permanently open on mobile.
   max-height collapses regardless of child count. */
.nav-drop-menu{
  max-height:0; overflow:hidden;
  transition:max-height .3s ease;
}
.nav-drop.open .nav-drop-menu{max-height:640px}
.nav-drop-menu a{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:11px 0 11px 14px;
  border-bottom:1px solid rgba(233,233,231,.08);
  font-size:13.5px; letter-spacing:.05em; text-transform:none;
}
.nav-drop-menu a em{
  font-style:normal; font-size:11.5px; letter-spacing:.06em;
  color:var(--grey-light); flex:0 0 auto;
}
.nav-drop-menu a[aria-current="page"]{color:var(--crimson-lift)}

@media (min-width:900px){
  /* Desktop: a real dropped panel, on hover or on click. */
  .nav-drop-menu{
    max-height:none; overflow:visible;
    position:absolute; top:100%; left:-18px; padding-top:14px; margin-top:0;
    width:308px; display:block;
    background:var(--ink); border:1px solid var(--line-light); border-top:0;
    border-radius:0 0 3px 3px; padding-bottom:8px;
    box-shadow:0 20px 48px rgba(0,0,0,.55);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .nav-drop.open .nav-drop-menu{max-height:none}
  .nav-drop:hover .nav-drop-menu,
  .nav-drop.open .nav-drop-menu{
    opacity:1; visibility:visible; transform:none; pointer-events:auto;
    transition:opacity .18s ease, transform .18s ease, visibility 0s;
  }
  /* the bridge: keeps :hover alive across the visual gap */
  .nav-drop::after{content:''; position:absolute; left:0; right:0; top:100%; height:18px}
  .nav-drop-menu a{padding:9px 18px; border-bottom:0}
  .nav-drop-menu a:hover{background:rgba(233,233,231,.07); color:#fff}
  .nav-drop-btn{font-size:12.5px; letter-spacing:.11em; padding:0; opacity:.85; line-height:1.65; font-weight:500}
  .nav-drop:hover .nav-drop-btn{opacity:1}
  /* the header must not clip the panel */
  .site-header{overflow:visible}
}

/* The dropdown's own top row — goes to the services section on the homepage. */
.svc-all{
  font-weight:600;
  border-bottom:1px solid rgba(233,233,231,.18) !important;
}
.svc-all em{color:var(--crimson-lift) !important}
@media (min-width:900px){
  .svc-all{border-bottom:1px solid rgba(233,233,231,.14) !important; margin-bottom:4px}
}

/* ── The diagonal stripe now lives on the three CHROME bands only ──
   header, the proof band and the footer — never behind reading copy. */
.site-header::after,.site-footer::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  opacity:.5;
  background-image:repeating-linear-gradient(
    -60deg, rgba(233,233,231,.022) 0 2px, transparent 2px 24px
  );
}
.site-header{position:relative}
.site-header > .shell{position:relative; z-index:1}
.site-footer > .shell{position:relative; z-index:1}
/* the header's dropdown must sit above its own texture */
.site-header .nav-drop-menu{z-index:2}
/* stronger on the proof band — it is a stat strip, it can carry more */
.proof::before{opacity:.8}

/* Barber cards list what that barber actually does, off their own Booksy menu.
   Smaller and looser than prose because it is scanned, not read. */
.barber-svcs{
  font-size:.87rem; line-height:1.5; color:var(--muted, #9A948E);
  margin:.35rem 0 0; text-wrap:balance;
}