/* Wrenfield Physiotherapy: a concept by ALLOIC.
   One motif: the file tab (a trapezoid). One mark: the wren, cut from the same slanted shape.
   Ground off-white, ink bottle green, one accent (field yellow). Albert Sans throughout. */

:root {
  --bg: #f7f7f7;
  --surface: #ebebeb;
  --paper: #ffffff;
  --ink: #0d2a1c;
  --ink-2: #1d4a35;
  --ink-3: #2f6b4d;
  --pale: #c9d6cf;
  --muted: #4f5d55;
  --accent: #f6e016;
  --todo-a: #e1e6e2;
  --todo-b: #d1d9d4;

  --font: "Albert Sans", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --step-small: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  --step-body: clamp(1.125rem, 1.06rem + 0.28vw, 1.25rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-ui: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(3.5rem, 7.4vw, 7.5rem);

  --margin: clamp(1rem, 2.2vw, 2rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(5.5rem, 11vw, 11rem);

  --tab: polygon(14px 0, calc(100% - 14px) 0, 100% 100%, 0 100%);
  --tab-soft: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
  --wren: polygon(10% 8%, 20% 0, 36% 34%, 48% 28%, 62% 16%, 76% 14%, 86% 22%, 100% 28%, 87% 34%, 84% 48%, 76% 64%, 60% 76%, 58% 76%, 58% 98%, 53% 98%, 53% 76%, 47% 76%, 47% 98%, 42% 98%, 42% 76%, 28% 66%, 22% 46%);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1rem; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.5; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-weight: 600; text-wrap: balance; }
ul[class], ol[class] { padding: 0; list-style: none; }
svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; }
button:disabled { cursor: default; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
::selection { background: var(--ink); color: var(--accent); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; }
.nowrap { white-space: nowrap; }
.sample { font-size: var(--step-small); color: var(--muted); }

/* the wren: one silhouette, used wherever something is chosen */
.wren, .choice[aria-pressed="true"]::after, .slot[aria-pressed="true"]::after, .fhead.is-done .tab__answer::before, .card__state.is-open::before, .choice__fit::before {
  content: ""; display: inline-block; flex: none; width: 1.3em; aspect-ratio: 10 / 8; background: currentColor; clip-path: var(--wren);
}

/* ---------- concept strip, header ---------- */
.concept { background: var(--ink); color: var(--bg); font-size: var(--step-small); line-height: 1.4; padding: 0.65rem var(--margin); text-align: center; }
.concept__in { display: inline-block; max-width: 43rem; text-wrap: balance; }
.concept a { font-weight: 600; white-space: nowrap; }
.concept :focus-visible { outline-color: var(--accent); }
.skip { position: absolute; left: var(--margin); top: 0.5rem; z-index: 60; background: var(--accent); color: var(--ink); padding: 0.7rem 1rem; font-weight: 600; transform: translateY(-300%); }
.skip:focus { transform: none; }

.top { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem; padding: 0.9rem var(--margin); }
.top__nav { display: none; }
.top a { text-decoration: none; }
.top__nav a, .top__side a { font-weight: 500; font-size: var(--step-small); padding: 0.6rem 0; }
.top__side { justify-self: end; display: flex; align-items: center; gap: 1.25rem; font-size: var(--step-small); }
.top__side a { font-weight: 600; font-variant-numeric: tabular-nums; }
.top__state { display: none; }
.mark { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; font-size: var(--step-body); letter-spacing: -0.01em; line-height: 1; }
.mark__tab { background: var(--ink); color: var(--bg); padding: 0.55rem 1.1rem 0.5rem; clip-path: var(--tab); }
.mark:focus-visible .mark__tab { clip-path: none; }
@media (max-width: 26em) { .mark__rest { display: none; } }
@media (min-width: 44em) { .top__state { display: inline; } }
@media (min-width: 64em) {
  .top { grid-template-columns: 1fr auto 1fr; }
  .top__nav { display: flex; gap: 1.75rem; }
}
@media (hover: hover) and (pointer: fine) {
  .top__nav a:hover, .top__side a:hover, .foot a:hover, .card__contact a:hover { text-decoration: underline; }
}

/* ---------- hero ---------- */
.hero { padding: clamp(1.25rem, 3.4vw, 3rem) var(--margin) 0; }
.hero__copy { text-align: center; }
.display { font-size: var(--step-display); font-weight: 600; letter-spacing: -0.04em; line-height: 0.98; }
.lines .line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.lines [data-line] { display: block; }
@media (min-width: 40em) { .lines .line { display: inline-block; vertical-align: top; } }
.lead { font-size: var(--step-lead); line-height: 1.35; }
.hero__lead { max-width: 54ch; margin: clamp(1rem, 2vw, 1.75rem) auto 0; text-wrap: balance; }
.head { font-size: var(--step-head); letter-spacing: -0.035em; line-height: 1; }

/* ---------- the folder stack (the booking) ---------- */
.stack { --stagger: 8%; position: relative; margin-top: clamp(1.75rem, 3.6vw, 3rem); scroll-margin-top: 0.75rem; }
.fhead { --tone: var(--todo-a); --tone-ink: var(--ink); --tone-soft: var(--muted); display: flow-root; background: var(--behind, transparent); font-size: inherit; line-height: 1.15; }
.fhead:nth-of-type(even) { --tone: var(--todo-b); }
.fhead.is-done { --tone: var(--ink); --tone-ink: #ffffff; --tone-soft: var(--pale); }
.fhead.is-done:nth-of-type(even) { --tone: var(--ink-2); }
.fhead.is-open { --tone: var(--accent); --tone-ink: var(--ink); --tone-soft: var(--ink); }
.fhead.is-todo + .panel + .fhead { --behind: var(--todo-a); }
.fhead.is-todo:nth-of-type(even) + .panel + .fhead { --behind: var(--todo-b); }
.fhead.is-done + .panel + .fhead { --behind: var(--ink); }
.fhead.is-done:nth-of-type(even) + .panel + .fhead { --behind: var(--ink-2); }
.fhead.is-open + .panel + .fhead { --behind: var(--accent); }
.fhead::after { content: ""; display: block; height: 8px; background: var(--tone); }
.band { display: none; }
.tab { display: flex; align-items: center; gap: 0.55em; min-height: 48px; max-width: calc(100% - var(--s, 0) * var(--stagger)); margin-left: calc(var(--s, 0) * var(--stagger)); padding: 0.3rem 1.4rem; background: var(--tone); color: var(--tone-ink); clip-path: var(--tab); text-align: left; font-weight: 600; font-size: var(--step-small); transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.tab:focus-visible { clip-path: none; outline-color: var(--tone-ink); outline-offset: -4px; }
.tab__name { white-space: nowrap; }
.tab__answer { display: none; align-items: center; gap: 0.4em; min-width: 0; }
.fhead.is-done .tab__name { font-weight: 400; color: var(--tone-soft); }
.fhead.is-done .tab__answer { display: inline-flex; }
.fhead.is-done .tab__answer::before { color: var(--accent); width: 1.15em; }
.tab__answer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 23em) { .fhead.is-done .tab__name { display: none; } }
@media (hover: hover) and (pointer: fine) {
  .fhead.is-done .tab:hover { background: var(--ink-3); }
}

.panel { background: var(--accent); color: var(--ink); padding: clamp(1.1rem, 3vw, 2.5rem) clamp(0.875rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.25rem); }
.panel__q { margin-bottom: clamp(1rem, 2vw, 1.75rem); }
.q { font-size: var(--step-ui); letter-spacing: -0.03em; line-height: 1.05; }
.q:focus, .q:focus-visible { outline: none; }
.hint { font-size: var(--step-small); margin-top: 0.5rem; max-width: 56ch; }
.panel__foot { margin-top: 1rem; display: flex; gap: 1.5rem; }
.textbtn { min-height: 44px; padding: 0 0.25rem; font-weight: 600; font-size: var(--step-small); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.1em; }
.stack__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; padding-top: 0.5rem; min-height: 3.25rem; }
.stack__tip { font-size: var(--step-small); color: var(--muted); }

@media (min-width: 40em) { .stack { --stagger: 14%; } }

/* wide screens: the folders stand one behind another, every tab in view */
@media (min-width: 73.75em) {
  .stack { --depth: 12px; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, auto)); padding-top: calc((var(--n, 5) - 1) * var(--depth)); }
  .fhead { grid-row: 1; grid-column: calc(var(--i) + 1); position: relative; z-index: calc(10 - var(--lift, 0)); background: none; transform: translateY(calc(var(--lift, 0) * var(--depth) * -1)); transition: transform 380ms var(--ease-out); }
  .fhead::after { display: none; }
  .band { display: block; grid-row: 1; grid-column: 1 / -1; align-self: end; height: calc(var(--lift, 0) * var(--depth)); z-index: calc(10 - var(--lift, 0)); pointer-events: none; }
  .tab { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.1rem; width: 100%; max-width: none; min-height: 62px; margin-left: 0; padding: 0.3rem 1.75rem; font-size: var(--step-body); }
  .fhead.is-done .tab__name { font-size: var(--step-small); }
  .fhead.is-done .tab__answer { max-width: 100%; }
  .panel { grid-row: 2; grid-column: 1 / -1; }
  .stack__foot { grid-row: 3; grid-column: 1 / -1; }
}

@media (min-width: 73.75em) {
  .panel--when { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); grid-template-rows: auto auto 1fr; column-gap: var(--gutter); }
  .panel--when .when { display: contents; }
  .panel--when .panel__q { grid-column: 1; grid-row: 1; }
  .panel--when .when__quick { grid-column: 1; grid-row: 2; }
  .panel--when .when__cal { grid-column: 2; grid-row: 1 / span 3; }
  .panel--when .when__slots { grid-column: 3; grid-row: 1 / span 3; }
  .panel--when .panel__foot { grid-column: 1; grid-row: 3; align-self: end; }
}

/* controls inside the booking */
.choice { display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 56px; padding: 0.6rem 1rem; background: var(--paper); color: var(--ink); text-align: left; font-weight: 500; line-height: 1.2; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.choice:active, .slot:active, .day:active { transform: scale(0.97); }
.choice[aria-pressed="true"], .slot[aria-pressed="true"] { background: var(--ink); color: #ffffff; }
.choice[aria-pressed="true"]::after, .slot[aria-pressed="true"]::after { margin-left: auto; color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .choice:hover, .slot:hover { background: var(--ink); color: #ffffff; }
  .day.is-free:hover { background: var(--ink); color: #ffffff; }
  .day.is-free:hover::after { background: var(--accent); }
}

.area { display: grid; gap: 1.25rem; }
.fig { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; justify-items: center; --fig: var(--ink); --fig-detail: var(--ink-3); --hl: #ffffff; --hl-stroke: var(--ink); }
.fig__view { width: 100%; max-width: 13.5rem; display: grid; justify-items: center; gap: 0.6rem; }
.fig__svg { width: 100%; height: auto; overflow: visible; touch-action: manipulation; }
.fig__cap { background: var(--ink); color: #ffffff; font-size: 1rem; font-weight: 600; line-height: 1; padding: 0.4rem 1rem 0.35rem; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%); }
.hits rect, .hits polygon { fill: transparent; pointer-events: all; cursor: pointer; }
.fig__wren { fill: var(--ink); stroke: #ffffff; stroke-width: 2.5px; stroke-linejoin: round; paint-order: stroke; pointer-events: none; opacity: 0; }
.fig__wren.is-on { opacity: 1; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; }
.choices__wide { grid-column: 1 / -1; }
@media (min-width: 56em) {
  .area { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gutter); align-items: start; }
  .area .choices { order: -1; }
  .fig { justify-content: center; grid-template-columns: repeat(2, minmax(0, 13.5rem)); gap: 2rem; }
}

/* the drawn figure: pieces take their colour from the place they are used */
.pc polygon { fill: var(--fig, #0d2a1c); stroke: transparent; stroke-width: 3px; stroke-linejoin: round; transition: fill var(--t-ui) ease; }
.pc-head polygon { fill: var(--a-head, var(--fig, #0d2a1c)); stroke: var(--s-head, transparent); }
.pc-neck polygon { fill: var(--a-neck, var(--fig, #0d2a1c)); stroke: var(--s-neck, transparent); }
.pc-shoulder polygon { fill: var(--a-shoulder, var(--fig, #0d2a1c)); stroke: var(--s-shoulder, transparent); }
.pc-elbow polygon { fill: var(--a-elbow, var(--fig, #0d2a1c)); stroke: var(--s-elbow, transparent); }
.pc-wrist polygon { fill: var(--a-wrist, var(--fig, #0d2a1c)); stroke: var(--s-wrist, transparent); }
.pc-upper-back polygon { fill: var(--a-upper-back, var(--fig, #0d2a1c)); stroke: var(--s-upper-back, transparent); }
.pc-lower-back polygon { fill: var(--a-lower-back, var(--fig, #0d2a1c)); stroke: var(--s-lower-back, transparent); }
.pc-hip polygon { fill: var(--a-hip, var(--fig, #0d2a1c)); stroke: var(--s-hip, transparent); }
.pc-knee polygon { fill: var(--a-knee, var(--fig, #0d2a1c)); stroke: var(--s-knee, transparent); }
.pc-lower-leg polygon { fill: var(--a-lower-leg, var(--fig, #0d2a1c)); stroke: var(--s-lower-leg, transparent); }
.pc polygon.dt { fill: var(--fig-detail, #2f6b4d); stroke: none; }
.hl-head { --a-head: var(--hl); --s-head: var(--hl-stroke); }
.hl-neck { --a-neck: var(--hl); --s-neck: var(--hl-stroke); }
.hl-shoulder { --a-shoulder: var(--hl); --s-shoulder: var(--hl-stroke); }
.hl-elbow { --a-elbow: var(--hl); --s-elbow: var(--hl-stroke); }
.hl-wrist { --a-wrist: var(--hl); --s-wrist: var(--hl-stroke); }
.hl-upper-back { --a-upper-back: var(--hl); --s-upper-back: var(--hl-stroke); }
.hl-lower-back { --a-lower-back: var(--hl); --s-lower-back: var(--hl-stroke); }
.hl-hip { --a-hip: var(--hl); --s-hip: var(--hl-stroke); }
.hl-knee { --a-knee: var(--hl); --s-knee: var(--hl-stroke); }
.hl-lower-leg { --a-lower-leg: var(--hl); --s-lower-leg: var(--hl-stroke); }

.visits { display: grid; gap: 6px; }
.choice--big { flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 1.1rem 1.1rem 1.25rem; position: relative; }
.choice__label { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.choice__meta { font-size: var(--step-small); font-weight: 500; }
.choice__price { font-size: var(--step-ui); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin-top: 0.5rem; }
.choice__price small { font-size: var(--step-small); font-weight: 400; letter-spacing: 0; }
.choice__text { font-size: var(--step-small); font-weight: 400; line-height: 1.45; max-width: 44ch; }
.choice--big[aria-pressed="true"]::after, .choice--who[aria-pressed="true"]::after { position: absolute; top: 1.1rem; right: 1.1rem; margin: 0; font-size: 1.4rem; }
@media (min-width: 44em) { .visits { grid-template-columns: 1fr 1fr; } .choice--big { padding: 1.5rem 1.5rem 1.75rem; } }

.whos { display: grid; gap: 6px; }
.choice--who { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.9rem; row-gap: 0.2rem; align-items: start; align-content: start; padding: 1rem 2.6rem 1.1rem 1rem; position: relative; }
.choice--who > span:not(.choice__badge) { grid-column: 2; }
.choice__badge { grid-row: 1 / span 4; display: grid; place-items: center; min-width: 3.5rem; height: 2.75rem; padding: 0 0.8rem; background: var(--ink); color: #ffffff; font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.02em; clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 100%, 0 100%); transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.choice--who[aria-pressed="true"] .choice__badge { background: var(--accent); color: var(--ink); }
.choice__fit { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--step-small); font-weight: 600; margin-top: 0.2rem; }
@media (hover: hover) and (pointer: fine) { .choice--who:hover .choice__badge { background: var(--accent); color: var(--ink); } }
@media (min-width: 40em) { .whos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 73.75em) { .whos { grid-template-columns: repeat(4, 1fr); } .choice--who { grid-template-columns: 1fr; } .choice--who > span:not(.choice__badge) { grid-column: 1; } .choice__badge { grid-row: auto; justify-self: start; margin-bottom: 0.6rem; } }

.when { display: grid; gap: 1rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0.4rem 1.75rem; font-weight: 600; line-height: 1.15; text-decoration: none; text-align: center; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 100%, 0 100%); transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.btn:focus-visible { clip-path: none; }
.btn:active { transform: scale(0.97); }
.btn--ink { background: var(--ink); color: #ffffff; }
.btn--accent { background: var(--accent); color: var(--ink); }
.btn--paper { background: var(--paper); color: var(--ink); }
.btn--wide { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn--ink:hover { background: var(--ink-3); }
  .btn--accent:hover { background: #ffffff; }
  .btn--paper:hover { background: var(--ink); color: #ffffff; }
}
.when__next { width: 100%; text-wrap: balance; }
.cal { background: var(--paper); padding: 0.5rem; }
.cal__bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.cal__month { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; }
.cal__nav { width: 48px; height: 48px; display: grid; place-items: center; background: var(--surface); font-size: 1.75rem; line-height: 1; padding-bottom: 0.15em; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.cal__nav:disabled { opacity: 0.35; }
@media (hover: hover) and (pointer: fine) { .cal__nav:not(:disabled):hover { background: var(--ink); color: #ffffff; } }
.cal__grid { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 0.25rem; }
.cal__grid th { font-size: 1rem; font-weight: 500; color: var(--muted); padding: 0.45rem 0 0.3rem; text-align: center; }
.cal__grid td { padding: 1px; text-align: center; }
.day { position: relative; display: grid; place-items: center; width: 100%; height: clamp(2.75rem, 5.2vw, 3.4rem); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; padding-bottom: 0.35rem; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.day.is-free::after { content: ""; position: absolute; left: 50%; bottom: 0.38rem; width: 1rem; height: 0.38rem; margin-left: -0.5rem; background: var(--ink); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.day.is-off { font-weight: 400; color: var(--muted); text-decoration: line-through; cursor: default; }
.day.is-today .day__n { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.22em; }
.day.is-today.is-off .day__n { text-decoration: underline line-through; }
.day[aria-pressed="true"] { background: var(--ink); color: #ffffff; clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 100%, 0 100%); }
.day[aria-pressed="true"]::after { background: var(--accent); }
.day:focus-visible { clip-path: none; outline-offset: -3px; }
.day[aria-pressed="true"]:focus-visible { outline-color: var(--accent); }
.cal__key { display: flex; align-items: baseline; gap: 0.5rem; font-size: 1rem; color: var(--muted); padding: 0.5rem 0.4rem 0.25rem; line-height: 1.35; }
.cal__keymark { flex: none; width: 1rem; height: 0.38rem; background: var(--ink); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.slots__day { font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1.15; }
.slots__day:focus { outline: none; }
.slots__note { margin-top: 0.5rem; font-size: var(--step-small); max-width: 46ch; }
.slots__group { margin-top: 1rem; }
.slots__label { font-size: var(--step-small); font-weight: 600; margin-bottom: 0.4rem; }
.slots__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 6px; }
.slot { display: flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; min-height: 52px; padding: 0.3rem 0.4rem; background: var(--paper); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.slot[aria-pressed="true"]::after { margin-left: 0; width: 1.1em; }
.slot small { font-size: 0.9375rem; font-weight: 500; }
@media (min-width: 56em) {
  .when { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; gap: 1rem var(--gutter); align-items: start; }
  .when__cal { grid-column: 1; grid-row: 1 / span 2; }
  .when__quick { grid-column: 2; grid-row: 1; }
  .when__slots { grid-column: 2; grid-row: 2; }
  .cal { padding: 0.75rem; }
}

.details, .done { display: grid; gap: 1.25rem; }
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.35rem; }
.field label { font-weight: 600; }
.field__opt { font-weight: 400; }
.field__hint { font-size: var(--step-small); }
.field input, .field textarea { width: 100%; min-height: 56px; padding: 0.8rem 1rem; background: var(--paper); border: 0; border-bottom: 4px solid var(--ink); border-radius: 0; font-size: max(1.125rem, var(--step-body)); }
.field textarea { resize: vertical; line-height: 1.4; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.field [aria-invalid="true"] { outline: 3px solid var(--ink); outline-offset: -3px; }
.field__error { display: flex; gap: 0.6rem; align-items: baseline; background: var(--ink); color: #ffffff; padding: 0.55rem 0.8rem; font-size: var(--step-small); font-weight: 500; }
.field__error::before { content: "!"; flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.35rem; background: var(--accent); color: var(--ink); font-weight: 600; clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.recap, .done__card { background: var(--paper); padding: clamp(1rem, 2.4vw, 1.75rem); align-self: start; }
.recap__title { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.75rem; }
.recap__list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.45rem 1.25rem; }
.recap__list dt { font-size: var(--step-small); color: var(--muted); padding-top: 0.12em; }
.recap__list dd { font-weight: 600; }
.recap__list dd small { display: block; font-size: var(--step-small); font-weight: 400; }
.done__when { font-size: var(--step-lead); font-weight: 600; margin-top: 0.5rem; }
.done__actions, .confirm__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.25rem; }
.done__actions .btn { flex: 1 1 auto; }
.confirm { margin-top: 1.25rem; padding: 1rem; background: var(--accent); }
.confirm__actions { margin-top: 0.75rem; }
.done__card .btn--paper { background: var(--surface); }
.done__fine { margin-top: 1.1rem; font-size: var(--step-small); color: var(--muted); }
.done__notes h4 { font-size: var(--step-lead); letter-spacing: -0.02em; }
.done__notes h4:not(:first-child) { margin-top: 1.5rem; }
.done__notes p, .done__notes ul { margin-top: 0.5rem; max-width: 50ch; }
.done__notes .sample { color: var(--ink); display: block; margin-top: 0.4rem; }
.tablist { display: grid; gap: 0.45rem; }
.tablist li { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: baseline; }
.tablist li::before { content: ""; width: 0.9rem; height: 0.6rem; background: var(--ink); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
@media (min-width: 56em) { .details, .done { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--gutter); align-items: start; } }

/* what has been chosen, kept in view while the tabs are off screen */
.sofar { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem var(--margin); padding-bottom: max(0.55rem, env(safe-area-inset-bottom)); background: var(--ink); color: #ffffff; font-size: var(--step-small); line-height: 1.3; }
.sofar__label { color: var(--pale); }
.sofar__btn { flex: none; min-height: 44px; padding: 0 1.1rem; background: var(--accent); color: var(--ink); font-weight: 600; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%); }
.sofar__btn:focus-visible { clip-path: none; outline-color: #ffffff; }

/* ---------- your first 45 minutes ---------- */
.visit { margin-top: clamp(4.5rem, 8vw, 8rem); padding: clamp(4rem, 8vw, 7rem) var(--margin); background: var(--ink); color: var(--bg); overflow: clip; }
.visit :focus-visible { outline-color: var(--accent); }
.visit .sample { color: var(--pale); }
.visit__head { display: grid; gap: 1.25rem; }
.visit__intro { max-width: 44ch; }
.visit__body { margin-top: clamp(2.5rem, 6vw, 5.5rem); }
.visit__diagram { width: 100%; height: auto; overflow: visible; }
.visit__diagram--wide { display: none; }
.part__pic { grid-row: 1 / span 2; width: 100%; height: auto; overflow: visible; }
.mk { transform-origin: 15px 10px; }
.mk-a { fill: var(--ink-3); transform: rotate(var(--r)); }
.mk-b { fill: #5a977b; transform: rotate(var(--r)); }
.mk-c { fill: var(--bg); }
.mk-d { fill: var(--accent); }
.visit__parts { display: grid; gap: 2.25rem; }
.visit__parts li { display: grid; grid-template-columns: clamp(5rem, 24vw, 8.5rem) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 1.25rem; }
.visit__parts h3 { font-size: var(--step-ui); letter-spacing: -0.03em; line-height: 1.05; }
.visit__parts p { margin-top: 0.5rem; max-width: 34ch; }
@media (min-width: 50em) {
  .visit__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; align-items: end; margin-inline: calc(var(--margin) * -1); }
  .visit__head > * { padding-inline: var(--margin); }
  .visit__diagram--wide { display: block; }
  .part__pic { display: none; }
  .visit__parts li { display: block; }
  .visit__parts { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
}

/* ---------- what we treat ---------- */
.treat { padding: var(--section) var(--margin) 0; --fig: var(--ink); --fig-detail: var(--ink-3); --hl: var(--accent); --hl-stroke: var(--ink); }
.treat__intro { margin-top: 1.25rem; max-width: 44ch; }
.treat__cat { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: clamp(3rem, 6vw, 6rem) 0 clamp(1.5rem, 2.6vw, 2.5rem); }
.treat__cat h3 { font-size: var(--step-ui); letter-spacing: -0.03em; line-height: 1.05; }
.treat__count { font-size: var(--step-small); color: var(--muted); }
.treat__list { display: grid; gap: 1.75rem clamp(2rem, 4.4vw, 4rem); }
.row { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: 1.1rem; row-gap: 0.2rem; text-decoration: none; transition: opacity var(--t-hover) ease; }
.row__pic { grid-row: 1 / span 2; width: 3.25rem; height: 3.25rem; background: var(--surface); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.row__pic svg { width: 100%; height: 100%; }
.row__name { font-weight: 600; line-height: 1.2; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; text-decoration-thickness: 0.09em; transition: text-decoration-color var(--t-hover) ease; }
.row__text { max-width: 38ch; line-height: 1.45; }
.row:focus-visible .row__name { text-decoration-color: currentColor; }
.treat__sample { margin-top: clamp(2rem, 4vw, 3.5rem); }
.treat__preview { display: none; }
@media (min-width: 44em) {
  .treat__list { grid-template-columns: 1fr 1fr; }
  .row { grid-template-columns: 4rem minmax(0, 1fr); column-gap: 1.25rem; }
  .row__pic { width: 4rem; height: 4rem; }
}
@media (hover: hover) and (pointer: fine) {
  .row:hover .row__name { text-decoration-color: currentColor; }
  .treat__main:has(.row:hover, .row:focus-visible) .row:not(:hover, :focus-visible) { opacity: 0.4; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 73.75em) {
  .treat { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--gutter); align-items: start; }
  .treat__preview { display: block; position: sticky; top: 1.5rem; padding-top: 0.5rem; }
  .preview { background: var(--surface); clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%); padding: 2.5rem 13% 1.75rem; }
  .preview__figs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .preview__figs svg { width: 100%; height: auto; overflow: visible; }
  .preview__cap { margin-top: 1.25rem; text-align: center; font-weight: 600; line-height: 1.25; min-height: 2.5em; }
}

/* ---------- fees: two visits, two fields ---------- */
.fees { margin-top: var(--section); }
.fees__split { display: grid; }
.fee { position: relative; display: flex; flex-direction: column; min-height: min(62svh, 30rem); padding: clamp(1.5rem, 2.8vw, 2.5rem) var(--margin); }
.fee--first { background: var(--accent); color: var(--ink); }
.fee--follow { background: var(--ink); color: var(--bg); }
.fee--follow :focus-visible { outline-color: var(--accent); }
.fee__name { font-size: var(--step-head); letter-spacing: -0.035em; line-height: 1; }
.fee__for { font-size: var(--step-lead); line-height: 1.3; max-width: 26ch; margin-top: 1.1rem; }
.fee__incl { max-width: 36ch; margin-top: 0.9rem; }
.fee__price { margin-top: auto; padding-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; }
.fee__num { font-size: calc(var(--step-display) * 1.3); font-weight: 600; letter-spacing: -0.05em; line-height: 0.9; font-variant-numeric: tabular-nums; }
.fee__per { font-size: var(--step-small); max-width: 18ch; line-height: 1.35; }
.fee__marks { width: auto; max-width: 100%; height: 5.5rem; margin-top: 1.75rem; align-self: flex-start; fill: var(--ink); }
.fee--follow .fee__marks { fill: var(--accent); }
.fee .btn { margin-top: 1.5rem; }
.fees__notes { display: grid; gap: 1.75rem; padding: clamp(3rem, 6vw, 5.5rem) var(--margin) 0; }
.fees__list { display: grid; gap: 1.75rem var(--gutter); }
@media (min-width: 40em) { .fees__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fees__notes-head { font-size: var(--step-ui); letter-spacing: -0.03em; line-height: 1.05; }
.fees__note h4 { font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1.15; }
.fees__note p { margin-top: 0.5rem; max-width: 36ch; }
@media (min-width: 56em) {
  .fees__split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .fee { min-height: min(90svh, 46rem); }
  .fee .btn { position: absolute; right: var(--margin); bottom: clamp(1.5rem, 2.8vw, 2.5rem); margin: 0; }
  .fee__marks { position: absolute; top: 44%; right: var(--margin); height: clamp(6rem, 9.6vw, 8.6rem); margin: 0; }
  .fee--follow .fee__for { max-width: 20ch; }
  .fee__price { padding-right: 15rem; }
  .fee--follow .fee__price { padding-right: 0; padding-bottom: 5.5rem; }
  .fees__notes { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--gutter); }
  .fees__sample { grid-column: 2; }
}

/* ---------- hours: the appointment card ---------- */
.hours { margin-top: var(--section); padding: clamp(4rem, 9vw, 7.5rem) var(--margin); background: var(--surface); }
.card { position: relative; display: grid; max-width: 70rem; margin-inline: auto; background: var(--paper); }
.card__stub, .card__main { padding: clamp(1.5rem, 4vw, 3rem); }
.card__main { position: relative; border-top: 5px dotted var(--surface); }
.card__main::before, .card__main::after { content: ""; position: absolute; top: -17px; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); }
.card__main::before { left: -14px; }
.card__main::after { right: -14px; }
.card__head { font-size: var(--step-ui); letter-spacing: -0.03em; line-height: 1.05; }
.card__state { display: flex; align-items: center; gap: 0.6rem; font-size: var(--step-lead); font-weight: 600; line-height: 1.2; margin: 1.25rem 0 1rem; }
.card__state.is-open::before { width: 1.5em; }
.card__stub p { max-width: 46ch; }
.card__contact { display: grid; gap: 0.15rem; margin-top: 1.25rem; font-weight: 600; }
.card__contact a { text-decoration: none; justify-self: start; padding: 0.3rem 0; overflow-wrap: anywhere; }
.hours__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours__table caption { caption-side: bottom; text-align: left; font-size: var(--step-small); color: var(--muted); padding-top: 1rem; }
.hours__table th { text-align: left; font-weight: 500; padding: 0.6rem 0.75rem; }
.hours__table td { text-align: right; padding: 0.6rem 0.75rem; white-space: nowrap; }
.hours__table tr.is-today th, .hours__table tr.is-today td { background: var(--accent); font-weight: 600; }
@media (min-width: 56em) {
  .card { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
  .card__main { border-top: 0; border-left: 5px dotted var(--surface); }
  .card__main::before { left: -17px; top: -14px; }
  .card__main::after { left: -17px; right: auto; top: auto; bottom: -14px; }
}

/* ---------- getting in ---------- */
.access { margin-top: clamp(4.5rem, 8vw, 8rem); padding: 0 clamp(0.625rem, 1.4vw, 1.25rem); }
.access__panel { display: grid; gap: 2rem; background: var(--todo-a); padding: clamp(1.5rem, 4vw, 3.5rem); overflow: clip; }
.access__notes { display: grid; gap: 1.5rem; align-content: start; }
.access__list { display: grid; gap: 1.5rem var(--gutter); }
@media (min-width: 40em) and (max-width: 55.99em) { .access__list { grid-template-columns: 1fr 1fr; } }
.access__note h3 { font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1.15; }
.access__note p { margin-top: 0.4rem; max-width: 40ch; }
.access__notes .btn { justify-self: start; }
.access__pic { width: min(86vw, 34rem); margin: 0 auto calc(clamp(1.5rem, 4vw, 3.5rem) * -1 - 6%); clip-path: polygon(11% 0, 89% 0, 100% 100%, 0 100%); order: 3; }
.access__pic svg { width: 100%; height: auto; }
.access__lead { display: contents; }
@media (min-width: 56em) {
  .access__panel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter); }
  .access__lead { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(2rem, 4vw, 3.5rem); }
  .access__pic { width: min(46vw, 42rem); margin: 0 0 calc(clamp(1.5rem, 4vw, 3.5rem) * -1 - 7%) 0; order: 0; }
  .access__notes { padding-top: 0.4rem; }
}
@media (min-width: 80em) { .access__list { grid-template-columns: 1fr 1fr; } }

/* ---------- footer: the name, built from tabs ---------- */
.foot { padding: clamp(4.5rem, 9vw, 9rem) var(--margin) clamp(1.5rem, 3vw, 2.5rem); }
.foot__mark { display: grid; gap: 4px; }
.foot__row { display: flex; align-items: flex-end; gap: 4px; height: clamp(7.5rem, 22svh, 12rem); }
.ltr { flex: 1 1 0; min-width: 0; position: relative; height: calc(var(--h) * 100%); background: var(--ink); color: var(--bg); clip-path: polygon(13% 0, 87% 0, 100% 100%, 0 100%); }
.ltr svg { position: absolute; left: 8%; bottom: 6%; width: 84%; height: auto; overflow: visible; }
.ltr text { font-size: 88px; font-weight: 600; fill: currentColor; }
.ltr--b { background: var(--ink-2); }
.ltr--y { background: var(--accent); color: var(--ink); }
.foot__cols { display: grid; gap: 1.75rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.foot__links { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem 1.5rem; }
.foot__links a, .foot__contact a { display: inline-block; padding: 0.4rem 0; text-decoration: none; font-weight: 500; }
.foot__contact { line-height: 1.3; font-weight: 500; }
.foot__sample { font-size: var(--step-small); color: var(--muted); max-width: 44ch; }
.foot__end { margin-top: clamp(2rem, 4vw, 3rem); font-weight: 500; }
.foot__end a { font-weight: 600; }
@media (min-width: 56em) {
  .foot__mark { display: flex; align-items: flex-end; height: clamp(12rem, 34svh, 20rem); }
  .foot__row { display: contents; }
  .foot__cols { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .foot__cols nav { grid-column: 1 / span 6; }
  .foot__contact { grid-column: 7 / span 3; }
  .foot__sample { grid-column: 10 / -1; }
}

/* ---------- motion ---------- */
@keyframes line-up { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes land { from { opacity: 0; transform: translateY(-0.5em) rotate(-14deg); } }
@keyframes open { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .js .lines [data-line] { transform: translateY(105%); animation: line-up 800ms var(--ease-expo) forwards; animation-delay: calc(100ms + var(--i) * 90ms); }
  .js .hero [data-load] { opacity: 0; transform: translateY(14px); animation: rise 520ms var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
  .js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease-out) calc(var(--i, 0) * 80ms), transform 900ms var(--ease-expo) calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-marks] .mk { transition: transform 1200ms var(--ease-expo) calc(var(--i) * 16ms); }
  .js [data-marks]:not(.is-in) .mk { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
  .js [data-marks]:not(.is-in) .mk-a, .js [data-marks]:not(.is-in) .mk-b { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r) * 2.2)); }
  .js [data-letters] .ltr { transition: transform 800ms var(--ease-expo) calc(var(--k, 0) * 55ms); }
  .js [data-letters]:not(.is-in) .ltr { transform: translateY(101%); }
  .panel.is-opening > * { animation: open 360ms var(--ease-out) both; }
  .panel.is-opening > :nth-child(2) { animation-delay: 60ms; }
  .panel.is-opening > :nth-child(3) { animation-delay: 120ms; }
  .choice[aria-pressed="true"]::after, .slot[aria-pressed="true"]::after, .fhead.is-done .tab__answer::before { animation: land 320ms var(--ease-out) both; }
  .fig__wren { transition: transform 460ms var(--ease-out), opacity 200ms ease; }
  .sofar { transition: transform 280ms var(--ease-out), visibility 0s linear 0s; }
  .sofar:not(.is-on) { transition: transform 200ms var(--ease-out), visibility 0s linear 200ms; }
  .pc polygon { transition: fill var(--t-ui) ease, stroke var(--t-ui) ease; }
  @supports (animation-timeline: view()) {
    .access__pic svg { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes drift { from { transform: translateY(3.5%); } to { transform: translateY(-3.5%); } }
  }
}
.sofar:not(.is-on) { transform: translateY(105%); visibility: hidden; }
.foot__mark { overflow: clip; }

/* showcase: the finished state, nothing in flight */
.is-showcase .lines [data-line], .is-showcase .hero [data-load], .is-showcase [data-reveal], .is-showcase [data-marks] .mk, .is-showcase [data-letters] .ltr, .is-showcase .panel.is-opening > *, .is-showcase .fhead, .is-showcase .fhead.is-done .tab__answer::before, .is-showcase .slot[aria-pressed="true"]::after, .is-showcase .choice[aria-pressed="true"]::after { animation: none !important; transition: none !important; opacity: 1 !important; }
.is-showcase .lines [data-line], .is-showcase .hero [data-load], .is-showcase [data-reveal], .is-showcase [data-letters] .ltr { transform: none !important; }
.is-showcase [data-marks] .mk-c, .is-showcase [data-marks] .mk-d { transform: none !important; }
.is-showcase [data-marks] .mk-a, .is-showcase [data-marks] .mk-b { transform: rotate(var(--r)) !important; }
.is-showcase { scroll-behavior: auto !important; }
.is-showcase .access__pic svg, .is-showcase .fig__wren, .is-showcase .day, .is-showcase .pc polygon { animation: none !important; transition: none !important; }

@media (forced-colors: active) {
  .tab, .btn, .day[aria-pressed="true"], .choice__badge, .fig__cap, .mark__tab, .sofar__btn { clip-path: none; }
  .choice, .slot, .btn, .tab, .cal__nav { border: 2px solid ButtonText; }
  .choice[aria-pressed="true"], .slot[aria-pressed="true"], .day[aria-pressed="true"] { border: 4px double Highlight; }
}