/* =========================================================================
   Hairways - Signature Treatments  (.hws)

   A black anchor in a page that is otherwise ivory and white. The salon's
   own positioning line is "Premium Nanoplastia & Hair Care", but nothing on
   the homepage actually said so - the permanent treatments were buried in
   the full menus among 141 other rows.

   Strictly monochrome by request: ivory on near-black, hierarchy carried by
   weight, size and opacity rather than by a second colour. No brass here -
   that accent belongs to the warm sections above and below.
   ========================================================================= */

.hws {
  /* Deep wine, not flat black. The black version read as a dead rectangle
     dropped into a warm page - the one note on the site with no relation to
     anything around it. This is the same aubergine the About, Store and
     Contact pages use for their feature bands, so the homepage now shares a
     palette with the rest of the site instead of fighting it. Brass carries
     the prices, which is where the eye should land. */
  --s-ink: #3b252e;
  --s-ink-2: #4a2f3a;
  --s-paper: #faf7f1;
  --s-brass: #c9a44c;
  --s-mute: rgba(250, 247, 241, .68);
  --s-faint: rgba(250, 247, 241, .45);
  --s-line: rgba(250, 247, 241, .18);

  --s-serif: 'Instrument Serif', 'Hoefler Text', Georgia, serif;
  --s-sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  background: var(--s-ink);
  color: var(--s-paper);
  font-family: var(--s-sans);
  font-weight: 300;
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.hws *, .hws *::before, .hws *::after { box-sizing: border-box; }

.hws__in { max-width: 1120px; margin: 0 auto; padding: 0 1.35rem; }


/* ---------- heading ----------------------------------------------------- */

.hws__eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1rem;
  font-size: .67rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--s-brass);
}
.hws__eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; flex: none; }

.hws__h2 {
  margin: 0 0 .9rem;
  font-family: var(--s-serif);
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.005em;
  color: var(--s-paper);
  text-wrap: balance;
}

.hws__lede {
  margin: 0 0 clamp(2.2rem, 4vw, 3.2rem);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--s-mute);
  max-width: 56ch;
  text-wrap: pretty;
}


/* ---------- treatment rows ---------------------------------------------- */
/* Hairlines, not filled cards. On a black ground a bordered card grid turns
   into a set of grey boxes; rules keep it editorial. */

.hws__list { display: grid; grid-template-columns: 1fr; gap: 0; }

.hws__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--s-line);
  text-decoration: none;
  color: inherit;
  transition: background .25s ease, padding .25s ease;
}
.hws__item:last-child { border-bottom: 1px solid var(--s-line); }

.hws__item:hover { background: rgba(250, 247, 241, .05); }
.hws__item:focus-visible { outline: 2px solid var(--s-brass); outline-offset: -2px; }

.hws__name {
  font-family: var(--s-serif);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--s-paper);
}

.hws__desc {
  font-size: .92rem;
  line-height: 1.65;
  color: var(--s-mute);
  max-width: 52ch;
}

.hws__prices {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.6rem;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}

.hws__price { display: flex; align-items: baseline; gap: .45rem; font-size: 1.04rem; color: var(--s-brass); font-variant-numeric: tabular-nums; }
.hws__price span {
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--s-faint);
}

.hws__go {
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--s-mute);
  white-space: nowrap;
  transition: color .2s;
}
.hws__item:hover .hws__go { color: var(--s-paper); }
.hws__arrow { display: inline-block; transition: transform .2s; }
.hws__item:hover .hws__arrow { transform: translateX(3px); }

.hws__note {
  margin: clamp(1.8rem, 3vw, 2.6rem) 0 0;
  font-size: .84rem;
  line-height: 1.7;
  color: var(--s-faint);
}
.hws__note a { color: var(--s-brass); text-decoration: underline; text-underline-offset: 3px; }
.hws__note a:hover { color: var(--s-paper); }


/* =========================================================================
   Wider screens - the row becomes a true four-column ledger
   ========================================================================= */

@media (min-width: 760px) {
  .hws__item {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.5fr) auto auto;
    align-items: center;
    gap: 1.5rem 2rem;
    padding: 1.7rem .6rem;
  }
  .hws__item:hover { padding-left: 1rem; padding-right: .2rem; }
  .hws__name { font-size: 1.62rem; }
  .hws__prices { justify-content: flex-end; gap: .3rem 2rem; }
  .hws__price { flex-direction: column; gap: .15rem; align-items: flex-end; }
}

@media (min-width: 1040px) {
  .hws__name { font-size: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hws__item, .hws__go, .hws__arrow { transition: none; }
  .hws__item:hover { padding-left: .6rem; padding-right: .6rem; }
}