/* Page sections. Colours and fonts only through tokens.css. */

/* ---------- hero: Bianca in front of the berry of her own logo ---------- */
.hero { position: relative; overflow: clip; }
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-xl); align-items: center;
  min-height: min(86svh, 50rem); padding-block: var(--space-xl) 0;
}
.hero__copy { display: grid; gap: var(--space-md); align-content: center; padding-bottom: var(--space-xl); }
.hero__kicker { display: inline-flex; align-items: center; gap: 0.6em; font-weight: 600; font-size: var(--text-sm); color: var(--color-berry); }
.hero__kicker::before { content: ""; width: 2.25rem; height: 1px; background: var(--color-berry); }
.hero__title { font-size: var(--text-display); max-width: 12ch; }
.hero__lead { font-size: var(--text-lg); color: var(--color-ink-soft); max-width: 40ch; }
.hero__visual { position: relative; align-self: end; height: 100%; min-height: 34rem; display: grid; align-items: end; justify-items: center; }
/* the field is the barrel of the syringe in her logo: a capsule with its graduation along one side */
.hero__field {
  position: absolute; inset: 12% 6% 0 6%; border-radius: var(--radius-pill);
  background: var(--gradient-berry); overflow: hidden;
}
.hero__field::after {
  content: ""; position: absolute; right: 9%; top: 18%; bottom: 18%; width: 1.4rem; opacity: 0.55;
  background: repeating-linear-gradient(180deg, var(--color-on-plum) 0 1px, transparent 1px 14px) right / 55% 100% no-repeat,
              repeating-linear-gradient(180deg, var(--color-on-plum) 0 1px, transparent 1px 70px) right / 100% 100% no-repeat;
}
.hero__field .mark { position: absolute; width: 150%; left: -8%; top: 6%; color: var(--color-rose); opacity: 0.22; }
.hero__cutout { position: relative; width: min(86%, 30rem); height: auto; filter: drop-shadow(0 30px 40px var(--color-shadow-strong)); }
@media (max-width: 56rem) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: var(--space-md); padding-top: var(--space-lg); }
  .hero__copy { padding-bottom: 0; }
  .hero__visual { min-height: 0; height: auto; }
  .hero__field { inset: 14% 10% 0 10%; }
  .hero__cutout { width: min(76%, 22rem); }
}

/* ---------- the planner: a face to tap, a plan to send ---------- */
.planner { position: relative; overflow: clip; background: var(--gradient-plum); }
.planner__head { max-width: 40rem; display: grid; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.planner__head h2 { color: var(--color-on-plum); }
.planner__head p { color: var(--color-on-plum-soft); font-size: var(--text-lg); }
.planner__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: var(--space-xl); align-items: start; }
.planner__stage { display: grid; gap: var(--space-md); justify-items: center; }
.planner__face { position: relative; width: min(100%, 30rem); aspect-ratio: 490 / 690; }
.face { width: 100%; height: 100%; overflow: visible; }
.face__line { fill: none; stroke: var(--color-on-plum); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.face__line--hair { stroke: var(--color-on-plum-soft); stroke-width: 1.3; }
.face__zone { fill: none; stroke: var(--color-rose); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity var(--dur-med) var(--ease-out); }
.face__zone--fill { fill: var(--color-rose); fill-opacity: 0.22; stroke-opacity: 0.9; }
.face__zone.is-hot, .face__zone.is-picked, .face__zone.is-lit { opacity: 1; }
.face__zone.is-picked { stroke: var(--color-rose); }
.marker {
  position: absolute; left: var(--x); top: var(--y); width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem;
  display: grid; place-items: center; border: 0; padding: 0; background: none; cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.marker__dot {
  width: 0.95rem; height: 0.95rem; border-radius: var(--radius-pill); background: var(--color-berry-hi);
  box-shadow: 0 0 0 2px var(--color-on-plum); transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.marker::after {
  content: ""; position: absolute; width: 0.95rem; height: 0.95rem; border-radius: var(--radius-pill);
  border: 1px solid var(--color-rose); opacity: 0; pointer-events: none;
}
.js .planner.is-idle .marker::after { animation: ping 2.4s var(--ease-out) infinite; }
.planner.is-idle .marker:nth-of-type(2n)::after { animation-delay: 0.6s; }
.planner.is-idle .marker:nth-of-type(3n)::after { animation-delay: 1.2s; }
@keyframes ping { 0% { transform: scale(1); opacity: 0.8; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
.marker:hover .marker__dot, .marker:focus-visible .marker__dot { transform: scale(1.25); }
.marker[aria-pressed="true"] .marker__dot { background: var(--color-rose); box-shadow: 0 0 0 2px var(--color-plum), 0 0 0 4px var(--color-rose); }
.marker.is-active .marker__dot { transform: scale(1.3); }
.marker__label {
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 4px); padding: 0.3em 0.75em;
  border-radius: var(--radius-pill); background: var(--color-on-plum); color: var(--color-plum);
  font-size: var(--text-xs); font-weight: 700; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.marker:hover .marker__label, .marker:focus-visible .marker__label, .marker.is-active .marker__label { opacity: 1; transform: translate(-50%, -2px); }
.marker:focus-visible { outline: none; }
.marker:focus-visible .marker__dot { outline: 2px solid var(--color-rose); outline-offset: 4px; }
.planner__more { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs); }
.chip--dark { background: transparent; border-color: var(--color-plum-line); color: var(--color-on-plum); }
.chip--dark:hover { border-color: var(--color-rose); color: var(--color-rose); }
.chip--dark[aria-pressed="true"] { background: var(--color-rose); border-color: var(--color-rose); color: var(--color-plum); }
.chip--dark .count { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding-inline: 0.3em; border-radius: var(--radius-pill); background: var(--color-rose); color: var(--color-plum); font-size: var(--text-xs); }
.chip--dark[aria-pressed="true"] .count { background: var(--color-plum); color: var(--color-rose); }

.planner__panel { display: grid; gap: var(--space-md); position: sticky; top: 5.5rem; }
.area, .plan, .request-wrap { border: var(--rule) solid var(--color-plum-line); border-radius: var(--radius-md); background: var(--color-plum-2); padding: var(--space-md); }
.area { display: grid; gap: var(--space-sm); }
.area__hint { color: var(--color-on-plum-soft); }
.area h3:focus { outline: none; }
.planner a:not(.btn):not(.chip):not(.marker) { color: var(--color-rose); }
.area__head { display: flex; justify-content: space-between; align-items: start; gap: var(--space-sm); }
.area__head h3 { color: var(--color-on-plum); font-size: var(--text-2xl); }
.area__concern { color: var(--color-on-plum-soft); font-size: var(--text-sm); margin-top: calc(-1 * var(--space-2xs)); }
.area__close { display: none; }
.icon-btn {
  display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border: var(--rule) solid var(--color-plum-line);
  border-radius: var(--radius-pill); background: transparent; color: var(--color-on-plum); cursor: pointer;
}
.icon-btn:hover { border-color: var(--color-rose); color: var(--color-rose); }
.area__opts { list-style: none; display: grid; gap: var(--space-2xs); }
.opt {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-xs); align-items: start;
  padding: var(--space-xs) var(--space-sm); border: var(--rule) solid var(--color-plum-line); border-radius: var(--radius-sm);
  cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.opt:hover { border-color: var(--color-rose); }
.opt:has(input:checked) { border-color: var(--color-rose); background: color-mix(in oklch, var(--color-rose) 12%, transparent); }
.opt input { appearance: none; width: 1.3rem; height: 1.3rem; margin: 0.15rem 0 0; border: 1.5px solid var(--color-on-plum-soft); border-radius: 6px; display: grid; place-items: center; cursor: pointer; }
.opt input:checked { background: var(--color-rose); border-color: var(--color-rose); }
.opt input:checked::after { content: ""; width: 0.35rem; height: 0.65rem; border: solid var(--color-plum); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.opt input:focus-visible { outline: 2px solid var(--color-rose); outline-offset: 2px; }
.opt__name { display: block; color: var(--color-on-plum); font-weight: 600; line-height: var(--leading-snug); }
.opt__desc { display: block; margin-top: 2px; color: var(--color-on-plum-soft); font-size: var(--text-sm); line-height: 1.45; }
.opt__price { color: var(--color-rose); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ml { grid-column: 2 / -1; display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-2xs); }
.ml button { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-pill); border: var(--rule) solid var(--color-plum-line); background: transparent; color: var(--color-on-plum); cursor: pointer; display: grid; place-items: center; }
.ml button:hover:not(:disabled) { border-color: var(--color-rose); color: var(--color-rose); }
.ml button:disabled { opacity: 0.35; cursor: not-allowed; }
.ml output { min-width: 3.2rem; text-align: center; font-weight: 700; color: var(--color-on-plum); font-variant-numeric: tabular-nums; }
/* the syringe scale: one graduation per ml, filled up to the amount chosen */
.ml__scale { flex: 1; height: 0.9rem; border: 1px solid var(--color-plum-line); border-radius: var(--radius-pill); position: relative; overflow: hidden;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 3 - 1px), var(--color-plum-line) calc(100% / 3 - 1px) calc(100% / 3)); }
.ml__scale span { position: absolute; inset: 0 auto 0 0; width: calc(var(--ml, 1) / 3 * 100%); background: var(--color-rose); opacity: 0.85; transition: width var(--dur-med) var(--ease-out); }
.area__more { justify-self: start; }

.plan { display: grid; gap: var(--space-sm); }
.plan__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.plan__head h3 { color: var(--color-on-plum); font-size: var(--text-xl); }
.plan__clear { border: 0; background: none; color: var(--color-on-plum-soft); font-size: var(--text-sm); text-decoration: underline; cursor: pointer; }
.plan__clear:hover { color: var(--color-rose); }
.plan__list { list-style: none; display: grid; }
.plan__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-xs); align-items: center; padding-block: var(--space-2xs); border-bottom: 1px solid var(--color-plum-line); }
.plan__list .plan__name { color: var(--color-on-plum); font-size: var(--text-sm); line-height: 1.35; }
.plan__list .plan__price { color: var(--color-on-plum); font-weight: 700; font-variant-numeric: tabular-nums; }
.plan__list .icon-btn { width: 2rem; height: 2rem; }
.plan__list .icon-btn .icon { width: 0.9rem; height: 0.9rem; }
.plan__empty { color: var(--color-on-plum-soft); font-size: var(--text-sm); }
.plan__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); padding-top: var(--space-2xs); }
.plan__total span { color: var(--color-on-plum-soft); font-weight: 600; }
.plan__total output { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-rose); font-variant-numeric: tabular-nums; }
.plan__note { color: var(--color-on-plum-soft); font-size: var(--text-xs); line-height: 1.5; }
.plan__actions { display: grid; gap: var(--space-2xs); }
.plan__actions .btn { width: 100%; }
.request-wrap h3 { color: var(--color-on-plum); font-size: var(--text-xl); }

/* the phone: the area card slides up as a sheet; a small bar keeps the running estimate in sight */
.plan-bar { display: none; }
@media (max-width: 60rem) {
  .planner__grid { grid-template-columns: minmax(0, 1fr); }
  .planner__panel { position: static; }
  .planner__face { width: min(100%, 26rem); }
  .area[data-open] {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet); max-height: 78svh; overflow-y: auto;
    border-radius: var(--radius-md) var(--radius-md) 0 0; border-bottom: 0; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-md));
    box-shadow: 0 -20px 50px var(--color-shadow-strong); animation: sheet-in var(--dur-med) var(--ease-out);
  }
  .area[data-open] .area__close { display: inline-grid; }
  .area:not([data-open]) .area__head, .area:not([data-open]) .area__concern, .area:not([data-open]) .area__opts, .area:not([data-open]) .area__more { display: none; }
  .sheet-scrim { position: fixed; inset: 0; z-index: calc(var(--z-sheet) - 1); background: var(--color-scrim); }
  .plan-bar {
    position: fixed; left: var(--space-sm); right: var(--space-sm); bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-sm)); z-index: var(--z-bar);
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
    border-radius: var(--radius-pill); background: var(--color-on-plum); color: var(--color-plum); box-shadow: 0 12px 30px var(--color-shadow-strong);
    font-weight: 700; transform: translateY(calc(100% + 3rem)); visibility: hidden;
    transition: transform var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
  }
  .plan-bar.is-on { transform: none; visibility: visible; transition: transform var(--dur-med) var(--ease-out); }
  .plan-bar output { font-variant-numeric: tabular-nums; }
  .plan-bar .btn { min-height: 2.5rem; }
}
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }

/* ---------- treatments: injectables with Bianca's photos, skin and wellness as quieter cards ---------- */
.tgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(12rem, auto); gap: var(--space-md); }
.tcard {
  position: relative; display: grid; border-radius: var(--radius-md); overflow: hidden; text-decoration: none; color: var(--color-ink);
  background: var(--color-paper-2); isolation: isolate;
}
.tcard--photo { grid-template-rows: minmax(0, 1fr) auto; }
.tcard--photo .photo { border-radius: 0; min-height: 14rem; }
.tcard--photo img { transition: transform var(--dur-slow) var(--ease-out); }
.tcard--photo:hover img { transform: scale(1.03); }
.tcard__body { display: grid; gap: var(--space-3xs); padding: var(--space-md); }
.tcard h3 { font-size: var(--text-2xl); }
.tcard p { color: var(--color-ink-soft); font-size: var(--text-sm); }
.tcard__from { display: inline-flex; align-items: center; gap: 0.4em; margin-top: var(--space-2xs); font-weight: 700; color: var(--color-berry); font-size: var(--text-sm); }
.tcard__from .icon { transition: transform var(--dur-fast) var(--ease-out); }
.tcard:hover .tcard__from .icon { transform: translateX(3px); }
.tgrid .tcard--botox { grid-column: 1 / 7; grid-row: span 2; }
.tgrid .tcard--lip-filler { grid-column: 7 / 10; }
.tgrid .tcard--dermal-fillers { grid-column: 10 / 13; }
.tgrid .tcard--sculptra { grid-column: 7 / 13; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; }
.tgrid .tcard--sculptra .photo { min-height: 100%; }
.tgroup { grid-column: span 6; display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-lg); border-radius: var(--radius-md); background: var(--color-paper-2); }
.tgroup--dark { background: var(--color-plum); color: var(--color-on-plum); }
.tgroup h3 { font-size: var(--text-2xl); display: flex; align-items: center; gap: var(--space-xs); }
.tgroup h3 .icon { width: 1.6rem; height: 1.6rem; color: var(--color-berry); }
.tgroup--dark h3 .icon { color: var(--color-rose); }
.tgroup ul { list-style: none; display: grid; }
.tgroup a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); align-items: baseline; padding-block: var(--space-xs); border-bottom: 1px solid var(--color-line); color: inherit; text-decoration: none; }
.tgroup--dark a { border-color: var(--color-plum-line); }
.tgroup a strong { font-weight: 600; }
.tgroup a span { display: block; font-size: var(--text-sm); color: var(--color-ink-soft); }
.tgroup--dark a span { color: var(--color-on-plum-soft); }
.tgroup a em { font-style: normal; font-weight: 700; color: var(--color-berry); white-space: nowrap; }
.tgroup--dark a em { color: var(--color-rose); }
.tgroup a:hover strong { color: var(--color-berry); }
.tgroup--dark a:hover strong { color: var(--color-rose); }
@media (max-width: 60rem) {
  .tgrid.rail { grid-auto-rows: auto; }
  .tgrid.rail .tcard--sculptra { grid-template-columns: none; grid-template-rows: minmax(0, 1fr) auto; }
  .tgrid.rail .tcard .photo { aspect-ratio: 4 / 5; min-height: 0; }
}

/* ---------- Bianca ---------- */
.bianca__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-2xl); align-items: center; }
.bianca__photo { aspect-ratio: 4 / 5; }
.bianca__copy { display: grid; gap: var(--space-md); }
.ticks { list-style: none; display: grid; gap: var(--space-xs); }
.ticks li { position: relative; padding-left: 1.75rem; color: var(--color-ink-soft); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.7em; width: 1.05rem; height: 0.5rem;
  background: repeating-linear-gradient(90deg, var(--color-berry) 0 1px, transparent 1px 4px);
}
.section--dark .ticks li { color: var(--color-on-plum-soft); }
.section--dark .ticks li::before { background: repeating-linear-gradient(90deg, var(--color-rose) 0 1px, transparent 1px 4px); }
.pt-note { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.45em 0.95em; border-radius: var(--radius-pill); background: var(--color-berry-wash); color: var(--color-berry-deep); font-weight: 600; font-size: var(--text-sm); text-decoration: none; justify-self: start; }
@media (max-width: 56rem) { .bianca__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } .bianca__photo { aspect-ratio: 5 / 4; } }

/* ---------- statement ---------- */
.statement { position: relative; overflow: clip; }
.statement__inner { position: relative; display: grid; gap: var(--space-md); justify-items: center; text-align: center; }
.statement .mark { position: absolute; width: min(34rem, 90%); top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--color-berry); opacity: 0.07; }
.statement__text { position: relative; font-size: var(--text-4xl); max-width: 18ch; color: var(--color-berry); }
.statement__sub { position: relative; max-width: 48ch; color: var(--color-ink-soft); font-size: var(--text-lg); }

/* ---------- steps: a real sequence, on a graduated line ---------- */
.steps__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-2xl); align-items: start; }
.steps__intro { display: grid; gap: var(--space-md); position: sticky; top: 6rem; }
.steps__intro .photo { aspect-ratio: 4 / 3; margin-top: var(--space-sm); }
.steps__list { list-style: none; position: relative; display: grid; gap: var(--space-xl); padding-left: 4.25rem; counter-reset: step; }
.steps__list::before {
  content: ""; position: absolute; left: 1.35rem; top: 0.6rem; bottom: 0.6rem; width: 0.7rem;
  background: linear-gradient(var(--color-berry), var(--color-berry)) center / 1px 100% no-repeat,
              repeating-linear-gradient(180deg, var(--color-line) 0 1px, transparent 1px 12px) left / 0.35rem 100% no-repeat;
  transform-origin: top; transform: scaleY(var(--progress, 1));
}
.steps__list li { position: relative; display: grid; gap: var(--space-2xs); counter-increment: step; }
.steps__list li::before {
  content: counter(step); position: absolute; left: -4.25rem; top: -0.1rem; width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border-radius: var(--radius-pill); background: var(--color-paper); border: 1px solid var(--color-berry); color: var(--color-berry);
  font-family: var(--font-display); font-size: var(--text-xl);
}
.steps__list h3 { font-size: var(--text-2xl); }
.steps__list p { color: var(--color-ink-soft); max-width: 52ch; }
@media (max-width: 56rem) { .steps__grid { grid-template-columns: minmax(0, 1fr); } .steps__intro { position: static; } }

/* ---------- prices ---------- */
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
.pcol h3 { font-size: var(--text-2xl); margin-bottom: var(--space-2xs); }
.pcol { padding: var(--space-lg); border-radius: var(--radius-md); background: var(--color-paper); }
.section--tint .pcol { background: var(--color-paper); }
.consult-note { display: flex; gap: var(--space-sm); align-items: center; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: var(--color-berry-wash); color: var(--color-berry-deep); font-weight: 600; margin-bottom: var(--space-lg); }
.consult-note .icon { width: 1.5rem; height: 1.5rem; flex: none; }
@media (max-width: 48rem) { .pgrid { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } .pcol { padding: var(--space-md); } }

.menu-nav { position: sticky; top: 4.25rem; z-index: 5; display: flex; gap: var(--space-2xs); overflow-x: auto; padding-block: var(--space-sm); background: var(--color-paper); scrollbar-width: none; }
.menu-nav::-webkit-scrollbar { display: none; }
.menu-nav .chip { flex: none; }
.menu-cat { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-xl); padding-block: var(--space-xl); border-top: 1px solid var(--color-line); scroll-margin-top: 8rem; }
.menu-cat__head { display: grid; gap: var(--space-xs); align-content: start; }
.menu-cat__head h2 { font-size: var(--text-3xl); }
.menu-cat__head p { color: var(--color-ink-soft); font-size: var(--text-sm); }
@media (max-width: 56rem) { .menu-cat { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } }

/* ---------- visit ---------- */
.visit__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: var(--space-xl); align-items: center; }
.map { width: 100%; height: auto; overflow: visible; }
.map__fill path { fill: var(--color-paper); }
.section--tint .map__fill path { fill: var(--color-paper); }
.map__coast path { fill: none; stroke: var(--color-berry); stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map__water text { fill: var(--color-ink-faint); font-family: var(--font-display); font-size: 24px; letter-spacing: 0.04em; }
.map__town circle { fill: var(--color-ink-faint); r: 3.5px; }
.map__town text { fill: var(--color-ink-soft); font-family: var(--font-body); font-size: 21px; font-weight: 500; }
.map__shop circle { fill: var(--color-berry); }
.map__shop .map__pulse { fill: var(--color-berry); opacity: 0.18; transform-box: fill-box; transform-origin: center; animation: pulse 2.6s var(--ease-out) infinite; }
.map__shop text { fill: var(--color-berry); font-family: var(--font-display); font-size: 32px; }
@media (max-width: 36rem) { .map__town text, .map__water text { display: none; } .map__shop text { font-size: 46px; } }
@keyframes pulse { 0% { transform: scale(0.6); opacity: 0.35; } 100% { transform: scale(2.2); opacity: 0; } }
.visit__card { display: grid; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-md); background: var(--color-paper); box-shadow: 0 24px 60px var(--color-shadow); }
.visit__card address { font-style: normal; font-size: var(--text-lg); line-height: 1.5; }
.visit__card address span { display: block; color: var(--color-ink-soft); font-size: var(--text-sm); }
.visit__card .hours { font-size: var(--text-sm); color: var(--color-ink-soft); }
.visit__card .hours .is-today { color: var(--color-berry); font-weight: 700; }
.facts-list { list-style: none; display: grid; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-soft); }
.facts-list li { display: flex; gap: var(--space-xs); align-items: center; }
.facts-list .icon { color: var(--color-berry); }
@media (max-width: 56rem) { .visit__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- treatment pages ---------- */
.tr-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-2xl); align-items: center; padding-block: var(--space-lg) var(--space-2xl); }
.tr-hero__copy { display: grid; gap: var(--space-md); }
.tr-hero__copy h1 { font-size: var(--text-4xl); }
.tr-hero__photo { aspect-ratio: 4 / 5; }
.facts-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); margin: 0; }
.facts-row div { padding: var(--space-sm); border-radius: var(--radius-sm); background: var(--color-paper-2); }
.facts-row dt { font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-soft); }
.facts-row dd { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-berry); line-height: 1.2; }
.tr-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--space-2xl); align-items: start; }
.tr-face { position: relative; padding: var(--space-md); border-radius: var(--radius-md); background: var(--gradient-plum); }
.tr-face .face { width: min(100%, 20rem); margin-inline: auto; height: auto; aspect-ratio: 490 / 690; }
.tr-face p { margin-top: var(--space-sm); text-align: center; color: var(--color-on-plum-soft); font-size: var(--text-sm); }
.tr-face a { color: var(--color-rose); }
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.related .tcard .photo { aspect-ratio: 4 / 3; min-height: 0; }
@media (max-width: 56rem) {
  .tr-hero__grid, .tr-body { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .tr-hero__photo { aspect-ratio: 4 / 3; order: -1; }
}
@media (max-width: 30rem) { .facts-row { grid-template-columns: minmax(0, 1fr); } .facts-row div { display: flex; justify-content: space-between; align-items: baseline; } }

/* ---------- about ---------- */
.about-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-2xl); align-items: center; padding-block: var(--space-lg) var(--space-2xl); }
.about-hero__grid .photo { aspect-ratio: 4 / 5; }
.about-hero__copy { display: grid; gap: var(--space-md); }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
.duo > div { display: grid; gap: var(--space-sm); align-content: start; padding: var(--space-lg); border-radius: var(--radius-md); background: var(--color-paper); }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); }
.gallery .photo { aspect-ratio: 4 / 5; }
.gallery .photo:nth-child(1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.gallery .photo:nth-child(1) img { position: absolute; inset: 0; }
@media (max-width: 56rem) {
  .about-hero__grid, .duo { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .about-hero__grid .photo { aspect-ratio: 4 / 3; order: -1; }
  .gallery.rail .photo { aspect-ratio: 3 / 4; }
}

/* ---------- book & visit page ---------- */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin-bottom: var(--space-2xl); }
.way { display: grid; gap: var(--space-sm); align-content: start; padding: var(--space-lg); border-radius: var(--radius-md); background: var(--color-paper-2); }
.way--main { background: var(--gradient-berry); color: var(--color-white); }
.way.way--main p { color: var(--color-berry-wash); }
.way h2 { font-size: var(--text-2xl); }
.way p { color: var(--color-ink-soft); }
.way .btn-row { margin-top: auto; }
.way--main .btn--light { background: var(--color-white); color: var(--color-berry); }
.way--main .btn--light:hover { background: var(--color-berry-wash); }
.form-card { max-width: 46rem; padding: var(--space-lg); border-radius: var(--radius-md); background: var(--color-paper); border: 1px solid var(--color-line); }
.request { display: grid; gap: var(--space-md); }
.request__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-md); }
.request__grid .field--wide { grid-column: 1 / -1; }
.request__status { font-weight: 600; min-height: 1.5em; }
.request__status.is-ok { color: var(--color-berry); }
.request__status.is-error { color: var(--color-berry-hi); }
.request__plan { padding: var(--space-sm); border-radius: var(--radius-sm); background: var(--color-paper-2); font-size: var(--text-sm); }
.on-dark .request .field label, .on-dark .request legend { color: var(--color-on-plum); }
.on-dark .request .hint, .on-dark .request p.muted { color: var(--color-on-plum-soft); }
.on-dark .request__status.is-ok { color: var(--color-rose); }
.on-dark .request__status.is-error { color: var(--color-rose); }
.on-dark .request__plan { background: var(--color-plum); color: var(--color-on-plum-soft); }
.on-dark .field__error { color: var(--color-rose); }
@media (max-width: 56rem) { .ways { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 36rem) { .request__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- touch-up planner ---------- */
.touch { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-xl); align-items: start; }
.touch__form { display: grid; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-md); background: var(--color-paper-2); }
.touch__out { display: grid; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-md); background: var(--gradient-plum); color: var(--color-on-plum); }
.touch__out h2 { font-size: var(--text-2xl); }
.timeline { position: relative; padding-top: var(--space-xl); }
.timeline__ruler { position: relative; height: 1.1rem; border-bottom: 1px solid var(--color-plum-line);
  background: repeating-linear-gradient(90deg, var(--color-plum-line) 0 1px, transparent 1px calc(100% / var(--ticks, 12))) bottom / 100% 55% no-repeat; }
.timeline__fill { position: absolute; left: 0; bottom: -1px; height: 3px; width: calc(var(--p, 0) * 100%); background: var(--color-rose); border-radius: var(--radius-pill); transition: width var(--dur-slow) var(--ease-out); }
.timeline__stops { list-style: none; display: grid; gap: var(--space-sm); margin-top: var(--space-lg); }
.timeline__stops li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: baseline; }
.timeline__stops time { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-rose); white-space: nowrap; }
.timeline__stops span { color: var(--color-on-plum-soft); font-size: var(--text-sm); }
.timeline__pin { position: absolute; top: 0; transform: translateX(-50%); font-size: var(--text-xs); color: var(--color-on-plum-soft); white-space: nowrap; }
.timeline__pin::after { content: ""; position: absolute; left: 50%; top: 1.4rem; width: 1px; height: 1.6rem; background: var(--color-rose); }
.timeline__pin--start { transform: none; }
.timeline__pin--start::after { left: 0; }
.timeline__pin--end { transform: translateX(-100%); }
.timeline__pin--end::after { left: auto; right: 0; }
@media (max-width: 56rem) { .touch { grid-template-columns: minmax(0, 1fr); } }

/* ---------- page heads for the inner pages ---------- */
.page-head { display: grid; gap: var(--space-sm); padding-block: var(--space-lg) var(--space-xl); }
.page-head > * { max-width: 48rem; }
.page-head .lead { max-width: 52ch; }
.notfound { min-height: 60svh; display: grid; place-content: center; gap: var(--space-md); text-align: center; justify-items: center; }

/* the form inside the plum planner */
.on-dark .request .btn--berry { background: var(--color-rose); color: var(--color-plum); }
.on-dark .request .btn--berry:hover { background: var(--color-on-plum); color: var(--color-plum); }
.on-dark .segmented span { background: transparent; border-color: var(--color-plum-line); color: var(--color-on-plum); }
.on-dark .segmented input:checked + span { background: var(--color-rose); border-color: var(--color-rose); color: var(--color-plum); }
.on-dark .input, .on-dark .textarea { background: var(--color-plum); border-color: var(--color-plum-line); color: var(--color-on-plum); }
.on-dark .input:focus-visible, .on-dark .textarea:focus-visible { border-color: var(--color-rose); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-rose) 25%, transparent); }
.on-dark .request .hint a { color: var(--color-rose); }