/* ==========================================================================
   NOIR BARBER — services page (extends main.css, same design tokens)
   Sections: hero · category jump · category headers · selection state ·
             summary bar · "not sure" block
   ========================================================================== */

/* ---------- Hero ---------- */
.svc-hero {
  position: relative;
  padding: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 56px) var(--gutter) 64px;
  border-bottom: 1px solid var(--line);
}
.svc-hero__inner { display: grid; gap: 22px; max-width: 640px; }
.svc-hero__eyebrow { color: var(--ash); }
.svc-hero__eyebrow .mono { direction: ltr; unicode-bidi: isolate; letter-spacing: .18em; }
.svc-hero__title {
  font: 800 clamp(3rem, 9vw, 6rem)/1 var(--f-display);
}
.svc-hero__sub { color: var(--ash); font-size: 1.0625rem; line-height: 1.6; max-width: 46ch; }

.cat-jump { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 12px; }
.cat-jump a {
  display: inline-flex; align-items: baseline; gap: 8px;
  font: 500 .875rem/1 var(--f-body); color: var(--ash); padding-block: 6px;
  border-bottom: 1px solid transparent; transition: color .25s, border-color .25s;
}
.cat-jump a b { font: 700 .75rem/1 var(--f-mono); direction: ltr; unicode-bidi: isolate; color: var(--bronze-hi); }
.cat-jump a:hover, .cat-jump a:focus-visible { color: var(--ivory); border-color: var(--bronze); }

.svc-hero__cue { position: static; margin-top: 8px; display: inline-grid; justify-items: start; gap: 10px; }
.svc-hero__cue .pole { width: 8px; height: 40px; }

/* ---------- Category header ---------- */
.cat-head { display: flex; align-items: baseline; gap: 18px; padding-top: 56px; scroll-margin-top: calc(var(--nav-h) + 20px); }
.services__grid > div > .cat-head:first-child { padding-top: 0; }
.cat-head__n { font: 800 1.5rem/1 var(--f-mono); direction: ltr; unicode-bidi: isolate; color: var(--bronze); }
.cat-head__name { font: 800 clamp(1.6rem, 3vw, 2.2rem)/1 var(--f-display); }
.cat-head__count { margin-inline-start: auto; font: 400 .8125rem/1 var(--f-body); color: var(--ash); }

/* list right under each header — tighten the top border main.css already gives .svc-list */
.cat-head + .svc-list { border-top: none; margin-top: 8px; }

/* ---------- Selectable service row ---------- */
.svc__row { cursor: pointer; }
.svc-list .svc__price-check { grid-area: price; display: flex; align-items: center; gap: 12px; }
.svc-list .svc__price { grid-area: auto; }
.svc__check {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--line-strong);
  color: transparent; font-size: .75rem; transition: border-color .3s, color .3s, background .3s;
}
.svc.is-selected .svc__check { background: var(--bronze); border-color: var(--bronze); color: var(--soot); }

.svc.is-selected { background: linear-gradient(to left, rgba(185, 130, 79, .08), transparent 60%); }
.svc.is-selected .svc__name { color: var(--bronze-hi); }

.svc__selected-tag {
  display: none; align-items: center; gap: 8px; margin-bottom: 10px;
  font: 600 .8125rem/1 var(--f-body); color: var(--bronze-hi);
}
.svc.is-selected .svc__selected-tag { display: inline-flex; }

/* keyboard focus on the whole row, not just default outline placement */
.svc__row:focus-visible { outline: 2px solid var(--bronze-hi); outline-offset: -2px; }

/* ---------- "Not sure?" block ---------- */
.unsure { background: var(--tobacco); border-block: 1px solid var(--line); text-align: center; }
.unsure__inner { display: grid; justify-items: center; gap: 16px; max-width: 560px; margin-inline: auto; text-align: center; }
.unsure__title { font: 800 clamp(2rem, 5vw, 3rem)/1.1 var(--f-display); }
.unsure__text { color: var(--ash); max-width: 46ch; }

/* ---------- Selection summary (hidden until a service is picked) ---------- */
.summary {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom, 0px));
  background: rgba(15, 13, 11, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-strong);
  transform: translateY(110%); transition: transform .5s var(--ease-out);
}
.summary[data-show="true"] { transform: none; }
.summary__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: var(--maxw); margin-inline: auto; }
.summary__info { display: grid; gap: 2px; min-width: 0; }
.summary__eyebrow { font: 500 .6875rem/1 var(--f-body); letter-spacing: normal; color: var(--ash); display: flex; align-items: center; gap: 10px; }
.summary__clear {
  font: 500 .6875rem/1 var(--f-body); color: var(--ash); background: none; border: none; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px; transition: color .2s;
}
.summary__clear:hover, .summary__clear:focus-visible { color: var(--ivory); }
.summary__name { font: 700 1.125rem/1.2 var(--f-display); color: var(--ivory); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary__meta { font: 400 .8125rem/1 var(--f-body); color: var(--bronze-hi); }
.summary .btn { flex: 0 0 auto; }

/* ==========================================================================
   Tablet ≥ 700px
   ========================================================================== */
@media (min-width: 700px) {
  .cat-head__count { display: inline; }
}

/* ==========================================================================
   Desktop ≥ 1000px
   ========================================================================== */
@media (min-width: 1000px) {
  .svc-hero { padding-top: calc(var(--nav-h) + 90px); padding-bottom: 90px; }
  .svc-hero__inner { max-width: 760px; }

  .services { padding-top: clamp(56px, 8vw, 100px); }

  .summary { padding-inline: var(--gutter); }
  .summary__inner { padding: 4px 0; }
}