/* 01 — ROOK + RAZOR / barbershop
   Dark room, hot red, condensed poster type. */

body.barber{
  --bg:#151512; --ink:#eee9dd;
  --accent:#d44b31; --accent-ink:#161613;
  --line:rgba(238,233,221,.2);
  --soft:rgba(238,233,221,.62);
  --panel:#1c1c18;
  --inv-bg:#eee9dd; --inv-ink:#191916;
  --ft-bg:#0f0f0d; --ft-ink:#eee9dd;
  --display:'Archivo Black',sans-serif;
  --nav-bg:#151512;
  --gutter:3vw;
  background:#151512;color:#eee9dd;font-family:'DM Sans',sans-serif;
}

/* light-on-dark inversions need their own hairlines */
.barber .sec-inv,.barber .cta{--line:rgba(25,25,22,.22);--soft:rgba(25,25,22,.6)}
.barber .site-ft{--line:rgba(238,233,221,.18);--soft:rgba(238,233,221,.55)}
.barber .dh,.barber .cta h2,.barber .phero h1{text-transform:uppercase}
.barber .btn-solid{border-color:var(--accent)}

/* header */
.barber .top{background:#d44b31;padding:10px 3vw;text-align:center;color:#161613}
.barber .nav{height:92px;padding:0 3vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.barber .logo{font:32px 'Archivo Black';letter-spacing:-.08em}

/* hero */
.barber .hero{min-height:750px;display:grid;grid-template-columns:54% 46%}
.barber .hero-copy{padding:11vh 3vw;align-self:center}
.barber .hero h1{font:clamp(72px,10vw,150px)/.82 'Archivo Black';text-transform:uppercase;letter-spacing:-.08em;margin:40px 0}
.barber .hero-copy p{max-width:430px;line-height:1.65;color:var(--soft);margin-bottom:38px}
.barber .hero-art{position:relative}
.barber .hero-art:after{content:'NYC / SINCE 2014';position:absolute;right:20px;bottom:20px;background:#d44b31;color:#111;padding:12px;font-size:11px;letter-spacing:.12em}

/* red ticker */
.barber .strip{background:#d44b31;color:#161613;padding:14px 0;font:19px 'Archivo Black';text-transform:uppercase;letter-spacing:-.02em}

/* service rows: name / desc / price. Never reserve an empty index column. */
.barber .service{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto;gap:16px 20px;align-items:baseline;padding:26px 0;border-top:2px solid;font-size:22px;min-width:0}
.barber .service strong{min-width:0;overflow-wrap:anywhere}
.barber .service em{font-style:normal;font-size:14px;color:inherit;opacity:.62;min-width:0}
.barber .service span:last-child{font-family:'DM Mono';white-space:nowrap;justify-self:end}

/* shop split */
.barber .shop-img{height:600px}
.barber .shop-img img{border-radius:2px}

/* team */
.barber .person img{filter:grayscale(1) contrast(1.06);transition:.4s}
.barber .person:hover img{filter:none}
.barber .person h3{font-family:'Archivo Black';text-transform:uppercase;letter-spacing:-.04em;font-size:23px}

/* pricing / detail cards */
.barber .tile:hover{border-color:var(--accent)}

@media(max-width:820px){
  .barber .hero{grid-template-columns:1fr;min-height:auto}
  .barber .hero-copy{padding:8vh 3vw}
  .barber .hero-art{height:min(460px,58vw)}
  .barber .hero h1{font-size:clamp(48px,14vw,96px);margin:28px 0;overflow-wrap:anywhere}
  .barber .logo{font-size:clamp(22px,7vw,32px);min-width:0}
  .barber .service{grid-template-columns:minmax(0,1fr) auto;font-size:19px;gap:10px 14px}
  .barber .service em{display:none}
  .barber .shop-img{height:min(400px,70vw)}
}
@media(max-width:400px){
  .barber .hero h1{font-size:13.5vw}
}