/*
  The Head Spa by Hikari, D10 core pages
  about.html (The Hikari Way), services.html (Treatments), contact.html, faq.html

  Loaded after site.css and before motion.css, on these four pages only.
  Same rules as site.css: final states only. No transitions, no keyframes, no from-states.
  Every token comes from site.css; the few new ones are prefixed --pc-.

  Contents
    1. Page tokens
    2. Shared: page head, small labels, hairline lists
    3. The Hikari Way: intro
    4. The Hikari Way: stacked stills (three steps)
    5. The Hikari Way: closing line, visit band
    6. Treatments: plans (aligned comparison)
    7. Treatments: plan your visit
    8. Contact: details and storefront film
    9. Contact: enquiry form
   10. FAQ: topic index, questions and answers, help band
*/

/* 1. Page tokens */
:root {
  --pc-head-y: clamp(3rem, 1.9rem + 3.6vw, 5.5rem);
  --pc-still-h: min(72svh, 42rem);                           /* height of a stacked still */
  --pc-dwell: 30svh;                                         /* scroll time a still holds */
}

/* 2. Shared */
.page-head { padding-block: var(--pc-head-y) clamp(2.5rem, 1.8rem + 2.4vw, 4rem); }
.page-head__grid { display: grid; gap: var(--space-5) var(--gutter); }
/* H1 type: site.css 4 (.page-title, IvyMode 9/27). Only the layout stays here. */
.page-lead {
  max-width: 34rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-soft);
}
@media (min-width: 64em) {
  .page-head__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
  }
  .page-head__main { grid-column: 1 / span 7; }
  .page-head__grid > .page-lead { grid-column: 9 / -1; }
}

/* small sans labels used as h2/h3 inside information blocks */
.pc-label {
  margin-bottom: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--ink);
}
.pc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
}

/* 3. The Hikari Way: intro */
.way-intro { padding-block: var(--pc-head-y) var(--section-y-compact); }
.way-intro__grid { display: grid; gap: var(--space-5) var(--gutter); }
.way-intro__figure { aspect-ratio: 4 / 5; margin-top: var(--space-4); }
.way-intro__jump { display: none; }
@media (min-width: 48em) {
  .way-intro__figure { aspect-ratio: 4 / 3; }
}
@media (min-width: 64em) {
  .way-intro__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    row-gap: clamp(2.5rem, 1rem + 3vw, 4rem);
    align-items: end;
  }
  .way-intro__head { grid-column: 1 / span 7; grid-row: 1; }
  .way-intro__lead { grid-column: 9 / -1; grid-row: 1; }
  .way-intro__figure { grid-column: 1 / span 8; grid-row: 2; margin-top: 0; }
  .way-intro__figure img { object-position: 62% 45%; }
  .way-intro__jump {
    display: block;
    grid-column: 10 / -1;
    grid-row: 2;
    padding-top: var(--space-3);
    border-top: 1px solid var(--rule-strong);
  }
}

/* 4. The Hikari Way: stacked stills.
   Phones and tablets: each step is a photo, then its words.
   Desktop: the photos share one sticky frame on the left. Each new photo rises from below
   and settles over the last while its words pass on the right. Pure layout (position: sticky),
   so it is the same with reduced motion and without JavaScript. */
.way-steps { padding-block: var(--section-y-compact) var(--section-y); }
.way-steps__head { max-width: 40rem; margin-bottom: clamp(2.5rem, 1.6rem + 3vw, 4.5rem); }
.way-steps__title { font-size: var(--fs-h2); }
.steps { display: grid; gap: clamp(3.5rem, 2.6rem + 3vw, 5.5rem); }
.step__figure { aspect-ratio: 5 / 4; }
.step__body { padding-top: var(--space-5); }
.step__body .icon-slot { margin-bottom: var(--space-4); }
.step__title {
  font-size: clamp(1.75rem, 1.45rem + 1.1vw, 2.5rem);
  font-weight: var(--display-wght);
  line-height: 1.1;
}
.step__text {
  max-width: 27rem;
  margin-top: var(--space-4);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-soft);
}
@media (min-width: 64em) {
  .steps {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    column-gap: var(--gutter);
    row-gap: 0;
  }
  .step { display: contents; }
  .step__figure {
    grid-column: 1 / span 6;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + (100svh - var(--header-h) - var(--pc-still-h)) / 2);
    height: var(--pc-still-h);
    aspect-ratio: auto;
  }
  .step__body {
    grid-column: 8 / -1;
    align-self: start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--pc-still-h);
    padding-top: 0;
  }
  .step:nth-child(1) .step__figure { grid-row: 1 / 4; }
  .step:nth-child(2) .step__figure { grid-row: 2 / 4; }
  .step:nth-child(3) .step__figure { grid-row: 3 / 4; }
  .step:nth-child(1) .step__body { grid-row: 1; margin-bottom: var(--pc-dwell); }
  .step:nth-child(2) .step__body { grid-row: 2; margin-bottom: var(--pc-dwell); }
  .step:nth-child(3) .step__body { grid-row: 3; }
}

/* 5. The Hikari Way: closing line and visit band */
.way-coda {
  display: grid;
  gap: var(--space-6) var(--gutter);
  margin-top: clamp(4rem, 2.8rem + 4vw, 7rem);
  padding-top: clamp(2.5rem, 1.9rem + 2vw, 3.5rem);
  border-top: 1px solid var(--rule);
}
.way-coda__line {
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.75rem);
  font-weight: var(--display-wght);
  line-height: 1.18;
  letter-spacing: var(--display-track);
  text-wrap: balance;
  color: var(--ink);
}
.way-coda__figure { aspect-ratio: 5 / 4; }
.way-coda__figure img { object-position: 50% 70%; }
@media (min-width: 64em) {
  .way-coda { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .way-coda__words { grid-column: 1 / span 5; }
  .way-coda__figure { grid-column: 7 / -1; }
}
.way-coda__words .text-link { margin-top: var(--space-5); }

.way-visit {
  background: var(--cream);
  padding-block: var(--band-y);
}
/* a thin band, one line and its links (fix1: the thumbnail is gone, AESTHETIC P1-4) */
.way-visit__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5) var(--gutter);
  align-items: center;
}
.way-visit__title { font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.5rem); font-weight: var(--display-wght); }
.way-visit__copy p { max-width: 30rem; margin-top: var(--space-3); color: var(--ink-soft); }
.way-visit__actions { align-self: start; }
@media (min-width: 64em) {
  .way-visit__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .way-visit__copy { grid-column: 1 / span 8; }
  .way-visit__actions { grid-column: 9 / -1; justify-self: end; align-self: center; }
}

/* 6. Treatments: plans. Two columns share row tracks (subgrid), so the name, description,
   inclusions and price line up across both, and the five shared inclusions sit on the
   same lines. The 90 minute extras continue below, marked with the accent dot. */
.plans-section { padding-block: 0 var(--section-y); }
.plans { display: grid; gap: clamp(3.5rem, 2.6rem + 3vw, 5rem) 0; }
.plan { display: grid; align-content: start; }
.plan__figure { aspect-ratio: 4 / 3; }
.plan__measure { position: relative; height: 2rem; margin-top: var(--space-4); }
.plan__track,
.plan__fill {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
}
.plan__track { right: 0; background: var(--rule); }
.plan__fill {
  width: calc(var(--minutes) / 90 * 100%);
  background: var(--ink-soft);
  transform-origin: left center;
}
.plan__dot {
  position: absolute;
  right: 0;
  top: 0;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--ink);
  transform: translate(50%, -50%);
}
.plan__time {
  position: absolute;
  left: calc(var(--minutes) / 90 * 100%);
  bottom: 0.625rem;
  transform: translateX(-100%);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  color: var(--muted);
}
.plan__name {
  margin-top: var(--space-5);
  font-size: clamp(2rem, 1.55rem + 1.7vw, 3rem);
  font-weight: var(--display-wght);
  line-height: 1.06;
}
.plan__name .line:first-child { font-style: italic; }
.plan__desc { max-width: 30rem; margin-top: var(--space-4); color: var(--ink-soft); }
.plan__included { margin-top: var(--space-6); }
.plan__list li {
  position: relative;
  padding: 0.75rem 0 0.75rem 1.375rem;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink-soft);
}
.plan__list li:last-child { border-bottom: 1px solid var(--rule); }
/* the shared inclusions keep their indent unmarked; only what the 90 minutes adds carries the
   copper dot (fix1: the hollow ring read as a letter "o" on a phone) */
.plan__list li::before {
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 1.25rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
}
.plan__list .plan__extra { color: var(--ink); }
.plan__list .plan__extra::before { background: var(--accent); }
.plan__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.plan__foot .btn { white-space: nowrap; }
@media (min-width: 48em) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(6, auto);
    column-gap: clamp(1.5rem, 0.4rem + 3.4vw, 4.5rem);
    row-gap: 0;
  }
  .plan { grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
}
.plans-key {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: var(--space-4);
  font-size: var(--fs-meta);
  color: var(--muted);
}
.plans-key::before {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--accent);
}

/* 7. Treatments: plan your visit */
.svc-visit {
  background: var(--cream);
  padding-block: var(--section-y);
}
.svc-visit__grid { display: grid; gap: var(--space-6) var(--gutter); }
.svc-visit__title { font-size: var(--fs-h2); }
.svc-visit__head .text-link { margin-top: var(--space-3); }
.svc-visit__block { font-size: var(--fs-body); color: var(--ink-soft); }
.svc-visit__block p + p { margin-top: var(--space-2); }
.svc-visit__block p:first-of-type { color: var(--ink); max-width: 30rem; }
.svc-visit__figure { aspect-ratio: 3 / 2; }
@media (min-width: 48em) {
  .svc-visit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-visit__head, .svc-visit__figure { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .svc-visit__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    row-gap: var(--space-7);
  }
  .svc-visit__head { grid-column: 1 / span 4; grid-row: 1; }
  .svc-visit__arrive { grid-column: 1 / span 4; grid-row: 2; }
  .svc-visit__after { grid-column: 1 / span 4; grid-row: 3; }
  .svc-visit__figure { grid-column: 6 / -1; grid-row: 1 / span 3; align-self: start; }
}

/* 8. Contact: details and the storefront film (dusk to night, plays once) */
.contact { padding-block: var(--pc-head-y) var(--section-y); }
.contact__grid { display: grid; gap: var(--space-6) var(--gutter); }
.contact__head .page-lead { margin-top: var(--space-5); }
.contact__film {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--night);
}
.contact__film img,
.contact__film video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 72%;
}
.contact__film video { opacity: 0; }
.contact__film[data-ambient-state] video { opacity: 1; }
.contact__film .film-toggle {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 1;
}
.contact__film .film-toggle:focus-visible { outline-color: var(--on-media); }
.contact__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-7) var(--gutter);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule-strong);
}
.contact__block { font-size: var(--fs-small); color: var(--ink-soft); }
.contact__block > * + * { margin-top: var(--space-2); }
.contact__address {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
  font-weight: var(--display-wght);
  line-height: 1.25;
  color: var(--ink);
}
.contact__station, .contact__block .hours li { color: var(--ink); }
.contact__line a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--ink);
  font-size: var(--fs-body);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact__line a:hover { color: var(--accent); text-decoration: underline; }
.contact__note { padding-top: var(--space-2); }
.contact__note a { color: var(--ink); }
.contact__appointments .pc-actions { margin-top: var(--space-3); }
@media (min-width: 48em) {
  .contact__film { aspect-ratio: 3 / 4; }
}
@media (min-width: 64em) {
  .contact__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    row-gap: var(--space-8);
  }
  .contact__head { grid-column: 1 / span 7; grid-row: 1; }
  .contact__details { grid-column: 1 / span 7; grid-row: 2; align-self: start; }
  .contact__film { grid-column: 9 / -1; grid-row: 1 / span 2; aspect-ratio: 9 / 16; align-self: start; }
}

/* 9. Contact: enquiry form */
.enquiry {
  background: var(--cream);
  padding-block: var(--section-y);
}
.enquiry__grid { display: grid; gap: var(--space-7) var(--gutter); }
.enquiry__title { font-size: var(--fs-h2); }
.enquiry__head p { max-width: 28rem; margin-top: var(--space-4); color: var(--ink-soft); }
.enquiry__head .text-link { margin-top: var(--space-3); }
.enquiry__form { display: grid; gap: var(--space-5); max-width: 40rem; }
.field { display: grid; gap: var(--space-2); }
.field label {
  font-size: var(--fs-meta);
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.field input,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.875rem;
  border: 0;
  border-radius: 0;
  background: var(--ivory);
  box-shadow: inset 0 -1px 0 var(--rule-strong);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 9.5rem; resize: vertical; }
.field input:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.field input:user-invalid,
.field textarea:user-invalid { box-shadow: inset 0 -2px 0 var(--accent); }
.enquiry__fine { font-size: var(--fs-small); color: var(--ink-soft); }
.enquiry__fine a { color: var(--ink); }
.enquiry__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.enquiry-status { font-size: var(--fs-small); color: var(--ink); }
.enquiry-status:empty { display: none; }
.enquiry__names { display: grid; gap: var(--space-5) var(--gutter); }
@media (min-width: 48em) {
  .enquiry__names { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .enquiry__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .enquiry__head { grid-column: 1 / span 4; }
  .enquiry__form { grid-column: 6 / -1; }
}

/* 10. FAQ */
.faq { padding-block: 0 var(--section-y); }
.faq__layout { display: grid; gap: var(--space-7) var(--gutter); }
.faq__index { font-size: var(--fs-small); }
.faq__index-label { margin-bottom: var(--space-2); }
.faq__index li { border-top: 1px solid var(--rule); }
.faq__index li:last-child { border-bottom: 1px solid var(--rule); }
.faq__index a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 2.75rem;
  color: var(--ink);
  text-decoration: none;
}
.faq__index a:hover,
.faq__index a[aria-current] { color: var(--accent); }
.faq__index .icon { width: 1rem; height: 1rem; color: var(--muted); }
.faq-group + .faq-group { margin-top: clamp(3.5rem, 2.6rem + 3vw, 5.5rem); }
.faq-group__title {
  margin-bottom: var(--space-5);
  font-size: var(--fs-h3);
  font-style: italic;
  font-weight: var(--display-wght);
}
.qa {
  display: grid;
  gap: var(--space-3) var(--gutter);
  padding-block: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  border-top: 1px solid var(--rule);
}
.faq-group .qa:last-child { border-bottom: 1px solid var(--rule); }
.qa__q {
  font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  font-weight: 400;
  line-height: 1.3;
}
.qa__a { max-width: 36rem; color: var(--ink); }
.qa__a > * + * { margin-top: var(--space-3); }
.qa__a a:not(.text-link):not(.btn) { color: var(--ink); }
.qa__a a:not(.text-link):not(.btn):hover { color: var(--accent); }
.qa__a .arrival { max-width: 26rem; padding-top: var(--space-2); }
.qa__a .text-link { margin-top: var(--space-1); }
@media (min-width: 48em) {
  .qa { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
@media (min-width: 64em) {
  .faq__layout { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .faq__index {
    grid-column: 1 / span 3;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
  }
  .faq__groups { grid-column: 5 / -1; }
}

.faq-help {
  background: var(--cream);
  padding-block: var(--band-y);
}
.faq-help__grid { display: grid; gap: var(--space-5) var(--gutter); align-items: center; }
.faq-help__title { font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.5rem); font-weight: var(--display-wght); }
.faq-help__copy p { margin-top: var(--space-3); color: var(--ink-soft); }
.faq-help__copy .contact__line a { font-size: var(--fs-body); }
.faq-help__lines { display: flex; flex-wrap: wrap; column-gap: var(--space-6); }
@media (min-width: 64em) {
  .faq-help__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .faq-help__copy { grid-column: 1 / span 7; }
  .faq-help__actions { grid-column: 9 / -1; justify-self: end; }
}