/* Variation B · Noir — dark barber-shop theme, bold condensed type, hover-scrub hero */
:root {
  --bg: #0e0d0b;
  --surface: #151411;
  --tile: #1c1a16;
  --tile-hover: #25221d;
  --ink: #f1ebe1;
  --muted: rgba(241, 235, 225, 0.6);
  --line: rgba(241, 235, 225, 0.12);
  --accent: #d2ae7c;
  --accent-soft: rgba(210, 174, 124, 0.16);
  --solid-bg: #d2ae7c;
  --solid-text: #0e0d0b;
  --solid-hover: #ecd2a8;
  --inv-bg: #1d1b17;
  --inv-text: #f1ebe1;
  --inv-muted: rgba(241, 235, 225, 0.6);
  --inv-line: rgba(241, 235, 225, 0.14);
  --inv-accent: #d2ae7c;
  --ok: #6cc187;
  --display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --display-case: uppercase;
  --display-track: 0.005em;
  --radius: 6px;
}
em { font-style: normal; }
h2 { font-size: clamp(44px, 6vw, 92px); line-height: 0.95; }
.pain__q, .quotes p, summary, .book__contact {
  font-family: var(--sans); text-transform: none; letter-spacing: -0.01em; font-weight: 500;
}
.pain__q { font-size: 19px; line-height: 1.3; }
.quotes p { font-size: 21px; line-height: 1.4; font-weight: 400; }
summary { font-size: 20px; }
.brand { font-size: 22px; letter-spacing: 0.04em; }
.brand svg { background: var(--ink); stroke: #0e0d0b; }
.btn--line:hover { background: var(--ink); color: var(--bg); }
.pain, .areas button, .quick__slots button { border-radius: 8px; }
.pain[aria-pressed="true"] { background: var(--accent); color: #0e0d0b; }
.pain[aria-pressed="true"] .pain__a > span { color: #0e0d0b; }
.pain[aria-pressed="true"]::after { background: #0e0d0b; color: var(--accent); }
.tally { border: 1px solid var(--line); }
.steps li { border-top-color: var(--accent); }
.book { border-top: 1px solid var(--line); }
.price__card { box-shadow: inset 0 0 0 1px var(--line); }
.variants { background: rgba(241, 235, 225, 0.92); color: #0e0d0b; }
.variants [aria-current="page"] { background: #0e0d0b; color: #f1ebe1; }

/* hero */
.hero-b {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-rows: 1fr auto;
  column-gap: clamp(32px, 5vw, 80px); align-items: center; padding-bottom: 0;
  max-width: calc(var(--max) + var(--pad) * 2); margin: 0 auto; overflow: hidden;
}
.hero-b::before { /* faint spotlight behind the portrait */
  content: ""; position: absolute; z-index: -1; right: 0; top: 0; width: 60%; height: 100%;
  background: radial-gradient(closest-side, rgba(210, 174, 124, 0.13), transparent 75%); pointer-events: none;
}
/* flowing gold "strands" across the full first screen; height is set by app.js to the hero's bottom */
.hb__bg {
  position: absolute; left: 0; top: 0; width: 100%; height: 100svh; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity 1.6s ease;
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent);
}
.hb__bg.is-on { opacity: 1; }
.hero-b h1 { font-size: clamp(64px, 10.5vw, 172px); line-height: 0.86; }
.hero-b h1 span { display: block; animation: rise 0.9s var(--ease) both; }
.hero-b h1 span:nth-child(2) { animation-delay: 0.1s; }
.hero-b h1 span:nth-child(3) { animation-delay: 0.2s; }
.hb__accent { color: var(--accent); }
.hb__type > p, .hb__type .hero__ctas { animation: rise 0.9s 0.3s var(--ease) both; }
.hb__hours { margin: 22px 0 0; }

.hb__stage { position: relative; justify-self: end; width: min(100%, 460px); animation: rise 1.1s 0.15s var(--ease) both; }
.ba--scrub { cursor: col-resize; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8); }
.hb__hint { margin: 12px 0 0; font-size: 13px; color: var(--muted); }

.seal { position: absolute; left: -64px; bottom: 56px; width: 136px; height: 136px; border-radius: 50%; background: var(--accent); color: #0e0d0b; display: grid; place-items: center; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.7); }
.seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 24s linear infinite; }
.seal text { font: 600 8.6px/1 var(--sans); letter-spacing: 0.16em; fill: #0e0d0b; }
.seal p { margin: 0; display: grid; justify-items: center; line-height: 1; }
.seal b { font-family: var(--display); font-weight: 400; font-size: 36px; }
.seal small { font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
@keyframes spin { to { transform: rotate(360deg); } }

.hb__bar { grid-column: 1 / -1; margin-top: clamp(32px, 5vh, 56px); display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.hb__bar button { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 22px 16px 26px 0; text-align: left; font-size: 15px; font-weight: 500; color: var(--muted); transition: color 0.3s; }
.hb__bar button span { font-family: var(--display); font-size: 15px; color: var(--accent); }
.hb__bar button:hover, .hb__bar [aria-selected="true"] { color: var(--ink); }
.hb__bar button::before { content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 0; background: var(--accent); }
.hb__bar [aria-selected="true"]::before { width: 100%; }
[data-autoplay].is-playing .hb__bar [aria-selected="true"]::before { animation: fill var(--autoplay, 6s) linear; }
@keyframes fill { from { width: 0; } }

@media (max-width: 900px) {
  .hero-b { grid-template-columns: 1fr; padding-bottom: 0; }
  .hb__stage { justify-self: start; margin-top: 40px; width: min(100%, 420px); }
  .seal { left: auto; right: -10px; bottom: auto; top: -40px; width: 110px; height: 110px; }
  .seal b { font-size: 30px; }
  .hb__bar { grid-template-columns: 1fr 1fr; }
  .hb__bar button { padding: 16px 12px 18px 0; font-size: 14px; }
}
@media (max-width: 640px) {
  .seal { right: 10px; top: auto; bottom: 60px; width: 96px; height: 96px; }
  .seal text { font-size: 7.6px; }
  .seal small { font-size: 7px; }
  .seal b { font-size: 26px; }
}