/* ============================================================
   BLACKMARKET BARBERSHOP — Noir Studio demo build
   Palette: ink / coal / bone / BMB red / smoke / amber
   Type:    Anton (display) · Archivo (body) · Space Mono (labels)
   ============================================================ */

:root {
  --ink: #0A0A0A;
  --coal: #141414;
  --coal-2: #1C1C1C;
  --line: #2A2A28;
  --bone: #EDEAE4;
  --smoke: #8A8782;
  --red: #D6221E;
  --red-deep: #A01512;
  --amber: #E8A33D;
  --radius: 14px;
  --font-display: 'Anton', Impact, sans-serif;
  --font-body: 'Archivo', 'Helvetica Neue', sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
address { font-style: normal; }

::selection { background: var(--red); color: #FFF; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #2B2A27; border: 2px solid var(--ink); }

/* Film grain over everything — the back-room feel */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

.skip-link {
  position: fixed;
  top: -70px;
  left: 16px;
  z-index: 2000;
  background: var(--red);
  color: #FFF;
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  transition: top .3s ease;
}
.skip-link:focus { top: 16px; }

/* ---------- Layout utilities ---------- */
.container { width: min(1180px, 100% - clamp(40px, 8vw, 96px)); margin-inline: auto; }
.section { padding-block: clamp(88px, 11vw, 132px); }
.section-head { margin-bottom: clamp(38px, 5vw, 54px); }
.center { text-align: center; }
.section-cta { margin-top: clamp(30px, 4vw, 44px); text-align: center; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .24em;
  color: var(--smoke);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--red);
  flex-shrink: 0;
}
.eyebrow.center { justify-content: center; }

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.7rem, 6.5vw, 4.6rem);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: .015em;
}

.head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.mono {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  padding: 14px 24px;
  border: 1px solid transparent;
  cursor: pointer;
  background: none;
  color: var(--bone);
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.btn-red { background: var(--red); border-color: var(--red); color: #FDFCFA; }
.btn-red:hover { background: var(--red-deep); border-color: var(--red-deep); transform: translateY(-2px); }
.btn-ghost { border-color: var(--line); }
.btn-ghost:hover { border-color: var(--bone); }
.btn-lg { padding: 17px 30px; font-size: .76rem; }
.btn-line {
  border-color: var(--line);
  font-size: .66rem;
  padding: 11px 14px;
  width: 100%;
}
.btn-line:hover { border-color: var(--red); background: rgba(214, 34, 30, .1); }

/* ---------- Navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding-block: 18px;
  transition: background .35s ease, padding .35s ease, border-color .35s ease;
  background: var(--coal);
  border-bottom: 2px solid var(--line);
}

.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.logo {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: .06em;
  color: var(--bone);
  line-height: 1;
}
.logo span { color: var(--red); }

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a:not(.btn) {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--smoke);
  transition: color .25s ease;
}
.nav-links a:not(.btn):hover { color: var(--bone); }




/* ---------- Hero ---------- */
.hero {
  min-height: calc(100svh - 80px);
  display: flex;
  flex-direction: column;
  position: relative;
  padding-top: 24px;
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(58% 46% at 50% 112%, rgba(214, 34, 30, .17), transparent 70%);
}
.hero-inner {
  margin: auto;
  text-align: center;
  max-width: 920px;
  position: relative;
  padding-block: 40px;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.2rem, 11.5vw, 8.75rem);
  line-height: .9;
  text-transform: uppercase;
  letter-spacing: .015em;
  margin-top: 10px;
}
.hero-title span { display: block; }
.hero-title .outline {
  color: transparent;
  -webkit-text-stroke: 2.5px var(--bone);
}
@supports not (-webkit-text-stroke: 1px black) {
  .hero-title .outline { color: var(--bone); }
}
.hero-title .red { color: var(--red); }

.hero-sub {
  margin: 28px auto 0;
  max-width: 580px;
  color: var(--smoke);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.75;
}

.trust {
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--smoke);
}
.trust strong { color: var(--bone); font-size: .82rem; }
.trust .stars { color: var(--amber); letter-spacing: .2em; font-size: .78rem; }
.trust i { width: 1px; height: 14px; background: var(--line); }

.hero-cta {
  margin-top: 42px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.faq-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 40px;
}

.faq-card {
  background: var(--coal);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform .3s ease, border-color .3s ease;
}

.faq-card:hover {
  transform: translateY(-4px);
  border-color: var(--red);
}

.faq-card h3 {
  font-family: var(--font-display);
  font-size: 1.18rem;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin-bottom: 14px;
}

.faq-card p {
  color: var(--smoke);
  line-height: 1.75;
}

/* ---------- The Ledger ---------- */
.ledger-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.ledger-card {
  background: var(--coal);
  border: 1px solid var(--line);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .35s ease, border-color .35s ease;
}

.ledger-card:hover {
  transform: translateY(-5px);
  border-color: #3B3A37;
}

.ledger-card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.ledger-card .price {
  margin-top: auto;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: .08em;
}


/* ---------- The Chairs (barbers) ---------- */
.barber-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 18px;
}
.b-card {
  background: var(--coal);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform .35s ease, border-color .35s ease;
}
.b-card:hover { transform: translateY(-5px); border-color: #3B3A37; }

.b-photo {
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, #191918, #0E0E0D);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.b-photo span {
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 6rem);
  color: #211F1D;
  line-height: 1;
}
.b-photo em {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .56rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #4A4844;
}

.b-info { padding: 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.b-info h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.b-spec {
  font-family: var(--font-mono);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--smoke);
}
.b-rate {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  color: var(--amber);
  margin-top: 2px;
}
.b-rate.alt { color: var(--smoke); text-transform: uppercase; font-size: .62rem; letter-spacing: .14em; }
.b-info .btn { margin-top: auto; }
.b-info .btn:not(:last-child) { margin-top: 12px; }

.b-join {
  border-style: dashed;
  background: transparent;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 26px;
}
.b-join-inner { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.b-join h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  text-transform: uppercase;
}
.b-join p:not(.mono) { color: var(--smoke); font-size: .88rem; }
.b-join .btn { width: auto; }

/* ---------- Shop Life (culture) ---------- */
.culture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}

.c-tile {
  background: var(--coal);
  border: 1px solid var(--line);
  aspect-ratio: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color .35s ease, transform .35s ease;
}
.c-tile:hover { border-color: var(--red); transform: translateY(-4px); }
.c-tag {
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--smoke);
}
.c-cap {
  font-family: var(--font-mono);
  font-size: .88rem;
  line-height: 1.65;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bone);
}
.c-arrow {
  align-self: flex-end;
  color: var(--red);
  font-size: 1.2rem;
  transition: transform .3s ease;
}
.c-tile:hover .c-arrow { transform: translate(3px, -3px); }

/* ---------- Head x Shop ---------- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.p-card {
  background: var(--coal);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform .35s ease, border-color .35s ease;
}
.p-card:hover { transform: translateY(-5px); border-color: #3B3A37; }
.p-img { aspect-ratio: 1; background: #0D0D0C; overflow: hidden; }
.p-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.p-card:hover .p-img img { transform: scale(1.05); }
.p-info { padding: 16px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.p-info h3 { font-size: .92rem; font-weight: 600; }
.p-price {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .9rem;
  margin-top: auto;
  padding-top: 10px;
}
.shop-note {
  margin-top: 28px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--smoke);
}

.placeholder-card {
  min-height: 260px;
  justify-content: center;
}
.placeholder-img {
  display: grid;
  place-items: center;
  height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  color: var(--smoke);
  font-family: var(--font-mono);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  padding: 20px;
  text-align: center;
}

/* ---------- Reviews ---------- */
.score {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber);
  padding-bottom: 10px;
  flex-shrink: 0;
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.r-card {
  background: var(--coal);
  border: 1px solid var(--line);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.r-stars { color: var(--amber); letter-spacing: .2em; font-size: .8rem; }
.r-card blockquote {
  font-size: .96rem;
  line-height: 1.7;
  color: #D9D6CF;
}
.r-card figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 3px; }
.r-card figcaption strong { font-size: .86rem; }
.r-card figcaption span {
  font-family: var(--font-mono);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--smoke);
}


/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding-top: clamp(60px, 8vw, 90px); }
.f-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr .9fr;
  gap: clamp(30px, 5vw, 60px);
}
@media (max-width: 900px) { .f-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .f-grid { grid-template-columns: 1fr; } }

.f-brand p {
  color: var(--smoke);
  font-size: .92rem;
  line-height: 1.7;
  margin-top: 16px;
  max-width: 300px;
}
.f-ig {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .25s ease;
}
.f-ig:hover { color: var(--red); }

.f-col h4 {
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--smoke);
  margin-bottom: 18px;
}
.f-col a {
  display: block;
  font-size: .9rem;
  padding-block: 5px;
  transition: color .25s ease;
}
.f-col a:hover { color: var(--red); }
.f-col address { font-size: .9rem; line-height: 1.7; margin-bottom: 10px; }

.f-hours li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  padding-block: 5px;
}
.f-hours li span:first-child { color: var(--smoke); }

.f-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  margin-top: clamp(50px, 7vw, 80px);
  padding-block: 24px;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--smoke);
}
.f-bar a { color: var(--bone); transition: color .25s ease; }
.f-bar a:hover { color: var(--red); }

@media (max-width: 860px) {
  .nav-inner { flex-wrap: wrap; gap: 14px; }
  .nav { padding-block: 14px; }
  .nav-links { flex-wrap: wrap; justify-content: center; gap: 14px; }
  .nav-links a:not(.btn) { font-size: .85rem; padding: 8px 0; }
  .nav-links .btn { width: 100%; max-width: 220px; }
  .hero-inner { padding-block: 30px; }
  .hero-sub { font-size: 1rem; max-width: 100%; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero-cta .btn { width: 100%; }
  .culture-grid,
  .shop-grid,
  .barber-grid,
  .review-grid,
  .ledger-grid,
  .faq-grid { grid-template-columns: 1fr; }
  .f-grid { grid-template-columns: 1fr 1fr; }
  .section { padding-block: clamp(60px, 8vw, 80px); }
}

@media (max-width: 640px) {
  html { font-size: 15px; }
  .nav-inner { justify-content: space-between; }
  .nav-links { gap: 10px; }
  .nav-links a:not(.btn) { font-size: .78rem; padding: 8px 4px; }
  .nav { padding-block: 12px; }
  .hero-title { font-size: clamp(2.8rem, 11vw, 4rem); }
  .hero-sub { line-height: 1.75; }
  .section { padding-block: clamp(50px, 10vw, 72px); }
  .section-head { margin-bottom: clamp(26px, 6vw, 42px); }
  .culture-grid,
  .shop-grid,
  .barber-grid,
  .review-grid,
  .ledger-grid,
  .faq-grid { gap: 16px; }
  .faq-card,
  .ledger-card,
  .r-card { padding: 20px; }
  .f-grid { grid-template-columns: 1fr; }
  .f-bar { flex-direction: column; align-items: flex-start; }
  .f-bar p { width: 100%; }
  .f-col a,
  .f-hours li { font-size: .84rem; }
  .f-col address { font-size: .9rem; }
}

/* ---------- Rounded system ---------- */
.b-card, .p-card, .c-tile, .r-card, .ledger-card { border-radius: var(--radius); }
.b-card, .p-card { overflow: hidden; }
.btn { border-radius: 10px; }

/* ---------- Barber profile pages ---------- */
.b-profile {
  display: grid;
  grid-template-columns: minmax(260px, 400px) 1fr;
}
.b-profile .b-photo { aspect-ratio: 4 / 5; height: 100%; }
.b-profile .b-info { padding: clamp(24px, 4vw, 44px); gap: 14px; align-items: flex-start; }
.b-profile .b-info h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--red);
}
.b-profile .b-info > p {
  color: var(--smoke);
  font-size: .98rem;
  line-height: 1.75;
  max-width: 62ch;
}
.b-profile ul { display: grid; gap: 10px; margin-block: 6px 8px; }
.b-profile ul li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.b-profile ul li::before { content: '\25C6'; color: var(--red); font-size: .5rem; }
.b-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 12px; }
.b-info .b-actions .btn { margin-top: 0; width: auto; }
@media (max-width: 760px) {
  .b-profile { grid-template-columns: 1fr; }
  .b-profile .b-photo { height: auto; }
}

/* ---------- Copy blocks ---------- */
.shop-copy { max-width: 68ch; display: grid; gap: 16px; color: var(--smoke); line-height: 1.8; }
.ledger-card > p:not(.price) { color: var(--smoke); font-size: .9rem; line-height: 1.7; }
.p-info > p:not(.p-price) { color: var(--smoke); font-size: .85rem; line-height: 1.6; }

/* ---------- Product meta ---------- */
.p-brand {
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--smoke);
}
.soldout {
  font-family: var(--font-mono);
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--smoke);
  border: 1px solid var(--line);
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
}

/* ---------- Barber portraits & banners ---------- */
.b-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.b-banner {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.b-banner img { width: 100%; display: block; }

/* ---------- Ledger cards as booking links ---------- */
a.ledger-card { transition: transform .3s ease, border-color .3s ease; }
a.ledger-card:hover { transform: translateY(-4px); border-color: var(--red); }

/* ---------- Barber IG handle ---------- */
.b-ig {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--smoke);
  transition: color .25s ease;
}
.b-ig:hover { color: var(--red); }

/* ============================================================
   THE FRONT DESK — concierge chat widget
   ============================================================ */
.chat-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1100;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--red);
  border: 1px solid var(--red);
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(214, 34, 30, .35);
  transition: transform .25s ease, background .25s ease;
}
.chat-fab:hover { transform: translateY(-3px); background: var(--red-deep); }
.chat-fab svg { width: 26px; height: 26px; }

.chat-panel {
  position: fixed;
  right: 20px;
  bottom: 90px;
  z-index: 1100;
  width: min(372px, calc(100vw - 32px));
  max-height: min(600px, calc(100vh - 120px));
  background: var(--coal);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.chat-panel[hidden] { display: none; }

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--ink);
}
.chat-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.chat-head p {
  font-family: var(--font-mono);
  font-size: .56rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--smoke);
  margin-top: 4px;
}
.chat-close {
  background: none;
  border: 0;
  color: var(--smoke);
  font-size: 1.4rem;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  transition: color .25s ease;
}
.chat-close:hover { color: var(--bone); }

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-msg {
  max-width: 86%;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: .9rem;
  line-height: 1.55;
  white-space: pre-line;
}
.chat-msg.bot {
  background: var(--coal-2);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}
.chat-msg.user {
  background: rgba(214, 34, 30, .14);
  border: 1px solid rgba(214, 34, 30, .4);
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}

.chat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: flex-start;
  max-width: 90%;
}
.chat-action {
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--bone);
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}
.chat-action:hover { border-color: var(--red); background: rgba(214, 34, 30, .1); }

.chat-typing {
  display: flex;
  gap: 5px;
  align-self: flex-start;
  padding: 14px;
  background: var(--coal-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  border-bottom-left-radius: 4px;
}
.chat-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--smoke);
  animation: chatdot 1s ease infinite;
}
.chat-typing i:nth-child(2) { animation-delay: .15s; }
.chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chatdot {
  0%, 60%, 100% { opacity: .3; transform: none; }
  30% { opacity: 1; transform: translateY(-3px); }
}

.chat-form {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  background: var(--ink);
}
.chat-form input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 10px 4px;
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .03em;
  color: var(--bone);
}
.chat-form input::placeholder { color: #55534E; }
.chat-form input:focus { outline: none; border-bottom-color: var(--red); }
.chat-send {
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #FFF;
  background: var(--red);
  border: 1px solid var(--red);
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background .25s ease;
}
.chat-send:hover { background: var(--red-deep); }

@media (max-width: 640px) {
  .chat-fab { right: 14px; bottom: 14px; }
  .chat-panel {
    right: 12px;
    left: 12px;
    bottom: 84px;
    width: auto;
    max-height: calc(100dvh - 108px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .chat-typing i { animation: none; }
  .chat-fab, .chat-action, .chat-send { transition: none; }
}

/* ============================================================
   POSE SYSTEM — art-directed barber pages
   One system, seven art directions. Each page gets a modifier
   class (.pose-lev, .pose-garvin, ...) that only sets custom
   properties: figure size, anchor, drop distance, rotation.
   Swap STAND-IN images for real posed cutouts after the shoot
   (full body, plain wall, 2000px+).
   ============================================================ */
html { overflow-x: clip; }

.pose-hero {
  --pose-w: clamp(300px, 40vw, 540px);
  --pose-right: 3%;
  --pose-drop: -140px;
  --pose-rot: 0deg;
  --pose-name-size: clamp(5.5rem, 26vw, 21rem);
  position: relative;
  z-index: 2;
  min-height: clamp(440px, 48vw, 620px);
  padding-block: clamp(60px, 9vw, 110px) clamp(70px, 9vw, 110px);
}
.pose-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(45% 60% at 78% 85%, rgba(214, 34, 30, .13), transparent 70%);
}
.pose-name {
  position: absolute;
  right: -1%;
  bottom: clamp(10px, 6vw, 50px);
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--pose-name-size);
  line-height: .8;
  text-transform: uppercase;
  letter-spacing: .01em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px #232320;
  user-select: none;
  pointer-events: none;
}
@supports not (-webkit-text-stroke: 1px black) {
  .pose-name { color: #141413; }
}

.pose {
  position: absolute;
  right: var(--pose-right);
  bottom: var(--pose-drop);
  z-index: 3;
  width: var(--pose-w);
  transform: rotate(var(--pose-rot));
  filter: drop-shadow(0 34px 60px rgba(0, 0, 0, .55));
  pointer-events: none;
}
.pose-intro {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: min(600px, 56%);
}
.pose-spec {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--red);
}

.pose-after { position: relative; z-index: 1; }
.pose-copy {
  max-width: 58ch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.pose-copy h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.pose-copy > p { color: var(--smoke); line-height: 1.8; }
.pose-copy ul { display: grid; gap: 10px; }
.pose-copy ul li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.pose-copy ul li::before { content: '\25C6'; color: var(--red); font-size: .5rem; }

.pose-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(26px, 5vw, 60px);
  width: 100%;
  border-top: 1px solid var(--line);
  padding-top: 26px;
  margin-top: 12px;
}
.pose-stats strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: .02em;
  color: var(--bone);
}
.pose-stats span {
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--smoke);
}

/* --- Art direction per barber --- */
.pose-lev {
  --pose-w: clamp(260px, 30vw, 430px);
  --pose-right: 4%;
  --pose-drop: -170px;
  --pose-rot: 0deg;
}

@media (max-width: 820px) {
  .pose-hero { --pose-drop: -70px; padding-bottom: 0; min-height: 0; }
  .pose-intro { max-width: 100%; }
  .pose {
    position: relative;
    right: auto;
    bottom: auto;
    display: block;
    width: min(340px, 78%);
    margin: 30px auto var(--pose-drop);
  }
  .pose-name {
    right: 0;
    top: 16px;
    bottom: auto;
    font-size: clamp(4.5rem, 28vw, 9rem);
  }
  .pose-after { padding-top: clamp(110px, 22vw, 150px); }
}
@media (prefers-reduced-motion: reduce) {
  .pose { filter: none; }
}

/* --- Pose placeholders & photo treatments --- */
.pose-ph {
  aspect-ratio: 5 / 8;
  background: rgba(20, 20, 19, .55);
  border: 2px dashed #2E2D2A;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  filter: none;
}
.pose-ph span {
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 8vw, 6.5rem);
  color: #211F1D;
  line-height: 1;
}
.pose-ph em {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 16px;
  text-align: center;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .56rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #4A4844;
}
.pose-fade {
  border-radius: var(--radius);
  filter: none;
  -webkit-mask-image: radial-gradient(130% 118% at 50% 30%, #000 50%, transparent 76%);
  mask-image: radial-gradient(130% 118% at 50% 30%, #000 50%, transparent 76%);
}
.pose-left .pose { left: var(--pose-left, 4%); right: auto; }
.pose-left .pose-intro { margin-left: auto; }

/* --- Art direction: the other six chairs --- */
.pose-garvin { --pose-w: clamp(300px, 40vw, 560px); --pose-right: 2%; --pose-drop: -60px; --pose-rot: -1.5deg; }
.pose-pavel  { --pose-w: clamp(230px, 25vw, 350px); --pose-right: 6%; --pose-drop: -120px; }
.pose-bob    { --pose-w: clamp(230px, 25vw, 350px); --pose-right: 5%; --pose-drop: -110px; --pose-rot: 1.5deg; }
.pose-kenyen { --pose-w: clamp(230px, 25vw, 350px); --pose-right: 7%; --pose-drop: -130px; --pose-rot: -1deg; }
.pose-ashley { --pose-left: 4%; --pose-w: clamp(230px, 26vw, 370px); --pose-drop: -120px; }
.pose-dtb    { --pose-w: clamp(280px, 32vw, 450px); --pose-right: 4%; --pose-drop: -90px; }

@media (max-width: 820px) {
  .pose-left .pose { left: auto; right: auto; }
  .pose-left .pose-intro { margin-left: 0; }
}

/* --- The Story page --- */
.story-grid {
  display: grid;
  grid-template-columns: 1.5fr .9fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}
.story-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 62ch;
}
.story-copy p { color: var(--smoke); font-size: 1.02rem; line-height: 1.9; }
.story-copy strong { color: var(--bone); }
.story-cta { margin-top: 16px; display: flex; gap: 14px; flex-wrap: wrap; }
.story-quote {
  background: var(--coal);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 26px;
}
.story-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.story-quote p span { color: var(--red); }
.story-quote cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--smoke);
}
@media (max-width: 860px) { .story-grid { grid-template-columns: 1fr; } }