/* ==========================================================================
   An Nhiên — phòng khám nhi khoa
   --------------------------------------------------------------------------
   CONCEPT
   A quiet paediatric clinic rendered as an architectural walk: one soft
   apricot light-source, a sage-mint ground, and a numbered rail that reads
   like a floor plan. Trust is built by restraint — no mascots, no gloss.

   PALETTE  (contrast ratios computed against the stated background)
   --ink          #17211B  near-black text on ground        15.12 : 1
   --ink          #17211B  on paper (--paper)               16.20 : 1
   --ink-muted    #5F6E64  secondary body on ground          4.92 : 1
   --ink-muted    #5F6E64  secondary body on paper           5.27 : 1
   --ink-muted    #5F6E64  placeholder text on paper         5.27 : 1
   --ink-muted    #5F6E64  12px time label on sage-100       4.54 : 1
   --ink-warm     #4A3A2E  urgent notice on --apricot-soft    8.97 : 1
   --sage-700     #3B5847  eyebrow / links on ground         7.18 : 1
   --sage-700     #3B5847  on sage-100                       6.62 : 1
   --sage-700     #3B5847  on apricot-soft                   6.50 : 1
   --apricot-deep #9A4A18  error text on paper               6.11 : 1
   --apricot-deep #9A4A18  numeral on apricot-soft (hover)   5.16 : 1
   --paper        #FCFDFA  text on --sage-700                7.70 : 1
   --paper        #FCFDFA  text on --sage-900 (footer)      10.40 : 1
   --sage-300     #C6D5BE  footer secondary on sage-900      6.91 : 1
   --ink          #17211B  on --apricot (buttons)            7.95 : 1
   --sage-900     #2A4436  focus ring on ground              9.71 : 1
   --apricot      #F0A26E  focus ring on footer              5.10 : 1
   --line-strong  #6F8674  input border, non-text  3.60 : 1 on ground,
                           3.85 : 1 on paper (≥ 3 : 1 required)
   --line         #D3DFCD  decorative hairlines only (not a text boundary)

   TYPE
   Display  Plus Jakarta Sans 500/600/700
   Text     Be Vietnam Pro 400/500/600
   h1       clamp(2.05rem, 5.6vw, 3.5rem)  / 1.06 / -0.032em / 700
   h2       clamp(1.7rem, 3.4vw, 2.6rem)   / 1.12 / -0.025em / 700
   h3       1.0625rem / 1.35 / -0.012em / 600
   body     1rem / 1.65 / 0 / 400          (16px minimum, never smaller)
   small    .875rem / 1.55 / 0 / 400
   meta     .75rem / 1.3 / .09em uppercase / 600
   Rhythm   4 / 8 / 12 / 16 / 24 / 32 / 48 / 64; section heads share one
            gap token (--gap-head) so every block starts on the same line.

   LAYOUT
   Full-bleed hero, then a two-track grid: a sticky numbered rail (168px)
   beside a single column of sections. The rail is the structural idea — the
   page reads like an index of a building, and the section numbers are the
   same numerals used on the care-path cards. Below 1080px the rail folds
   into a scroll-snapping pill strip above the sections, so the index — and
   the numbering — survives on phones.

   SIGNATURE MOTION
   The care path: four step cards enter once as a staggered batch (55ms
   apart, translate + opacity), and a hairline thread draws from each
   numbered node to the next over --dur-reveal, so the four steps read as
   one drawn route rather than four unrelated tiles. Fires once, when the
   path scrolls into view. Nothing else on the page animates on its own.

   PORT
   "Không gian chăm sóc" — eight CSS/SVG room illustrations, filtered by
   Khu khám / Khu chờ / Phòng tiêm / Tư vấn.
   ========================================================================== */

/* ---------- tokens ------------------------------------------------------- */
:root {
  --ink: #17211B;
  --ink-muted: #5F6E64;
  --ink-warm: #4A3A2E;
  --ground: #F2F6EF;
  --paper: #FCFDFA;
  --sage-100: #E6EEE2;
  --sage-300: #C6D5BE;
  --sage-600: #4E6E5A;
  --sage-700: #3B5847;
  --sage-900: #2A4436;
  --apricot: #F0A26E;
  --apricot-hover: #F5B78C;
  --apricot-soft: #FBE6D3;
  --apricot-deep: #9A4A18;
  --line: #D3DFCD;
  --line-strong: #6F8674;

  --font-display: "Plus Jakarta Sans", "Be Vietnam Pro", system-ui, sans-serif;
  --font-text: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease-enter: cubic-bezier(.16, 1, .3, 1);
  --ease-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-move: cubic-bezier(.65, 0, .35, 1);
  --ease-exit: cubic-bezier(.7, 0, .84, 0);
  --ease-pop: cubic-bezier(.34, 1.4, .64, 1);
  --dur-micro: 140ms;
  --dur-press: 90ms;
  --dur-small: 220ms;
  --dur-med: 320ms;
  --dur-large: 480ms;
  --dur-reveal: 680ms;
  --dur-hero: 1200ms;

  --r-sm: 12px;
  --r-lg: 24px;
  --r-xl: 28px;
  --r-pill: 999px;

  --gap-head: clamp(28px, 4vw, 40px);
  --header-h: 68px;
  --shell: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
}

@media (min-width: 900px) {
  :root { --header-h: 76px; }
}

/* ---------- reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--sage-900);
  outline-offset: 2px;
  border-radius: 6px;
}

/* the skip link moves focus here; a ring around the whole page would be noise */
#main:focus { outline: none; }

::selection { background: var(--apricot-soft); color: var(--ink); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  background: var(--sage-900);
  color: var(--paper);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-small) var(--ease-enter);
}
.skip-link:focus-visible { transform: translateY(0); outline-color: var(--apricot); }

/* ---------- shared type -------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-text);
  font-size: .75rem;
  line-height: 1.3;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sage-700);
}
.eyebrow__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--apricot-deep);
  flex: none;
}

.section__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -.025em;
  font-weight: 700;
  margin-top: 14px;
  text-wrap: balance;
}

.section__lead {
  margin-top: 16px;
  max-width: 56ch;
  font-size: clamp(1rem, 1.4vw, 1.0625rem);
  line-height: 1.62;
  color: var(--ink-muted);
}

/* ---------- buttons ------------------------------------------------------ */
.btn {
  --btn-bg: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  font-family: var(--font-text);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-move),
              background-color var(--dur-small) var(--ease-move),
              border-color var(--dur-small) var(--ease-move),
              color var(--dur-small) var(--ease-move);
}

.btn--primary {
  background: var(--apricot);
  color: var(--ink);
  border-color: var(--apricot);
}
.btn--ghost {
  background: transparent;
  color: var(--sage-700);
  border-color: var(--line-strong);
}
.btn--sm { min-height: 44px; padding: 9px 16px; font-size: .875rem; }
.btn--block { width: 100%; }

.btn__arrow { transition: transform var(--dur-med) var(--ease-enter); }

.btn:active { transform: scale(.97); transition-duration: var(--dur-press); }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--apricot-hover); border-color: var(--apricot-hover); }
  .btn--ghost:hover { background: var(--paper); border-color: var(--sage-700); }
  .btn--primary:hover .btn__arrow { transform: translateX(3px); }
}
.btn:focus-visible { outline-color: var(--sage-900); }

/* keyboard focus mirrors the hover affordance, not just the ring */
@media (hover: hover) and (pointer: fine) {
  .btn:focus-visible .btn__arrow { transform: translateX(3px); }
}

/* ---------- header ------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(242, 246, 239, .82);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
}

.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px -22px rgba(42, 68, 54, .5);
  opacity: 0;
}

/* with scroll-driven timelines the header starts as bare glass and settles
   into a solid paper bar with a hairline once the hero is behind you */
@supports (animation-timeline: scroll()) {
  .site-header::after {
    animation: header-solid linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 96px;
  }
}

@keyframes header-solid {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* no scroll-driven animation available: always show the solid bar */
@supports not (animation-timeline: scroll()) {
  .site-header::after { opacity: 1; }
}

.header__inner {
  max-width: var(--shell);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  text-decoration: none;
  flex: none;
}
.brand__mark { display: block; flex: none; border-radius: 9px; }
.brand__mark svg { width: 32px; height: 32px; }
.brand__text { display: flex; flex-direction: column; gap: 1px; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}
.brand__sub {
  font-size: .75rem;
  line-height: 1.2;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
}
.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--dur-small) var(--ease-move),
              background-color var(--dur-small) var(--ease-move);
}
.site-nav__list li:last-child { margin-left: 10px; }

@media (hover: hover) and (pointer: fine) {
  .site-nav__link:hover { color: var(--ink); background: var(--sage-100); }
}
.site-nav__link:focus-visible { outline-color: var(--sage-900); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  cursor: pointer;
  place-items: center;
  transition: background-color var(--dur-small) var(--ease-move);
}
.nav-toggle:active { transform: scale(.97); }

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 16px; height: 1.5px;
  border-radius: 2px;
  background: var(--sage-700);
  transition: transform var(--dur-med) var(--ease-enter),
              opacity var(--dur-micro) var(--ease-move);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: relative; }
.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after { top: 3.5px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5px) rotate(45deg); background: var(--sage-700); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-3.5px) rotate(-45deg); background: var(--sage-700); }

/* ---------- hero --------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
}

.hero__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(28px, 5vw, 56px) var(--gutter) clamp(40px, 6vw, 72px);
  display: grid;
  gap: clamp(28px, 5vw, 48px);
}

.hero__copy { max-width: 34rem; }

.hero__title {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 5.6vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -.032em;
  font-weight: 700;
  text-wrap: balance;
}
.hero__title-soft {
  display: block;
  color: var(--sage-700);
}

.hero__lead {
  margin-top: 20px;
  max-width: 44ch;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.62;
  color: var(--ink-muted);
}

.hero__actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero__facts {
  margin-top: 30px;
  display: grid;
  gap: 9px;
  font-size: .9375rem;
  color: var(--ink-muted);
}
.hero__facts li {
  position: relative;
  padding-left: 20px;
}
.hero__facts li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--apricot-deep);
}

.hero__art {
  position: relative;
  isolation: isolate;
  min-width: 0;
}

.hero__blob {
  position: absolute;
  top: 4%;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: min(96%, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 44% 40%,
              rgba(251, 230, 211, .95) 0%,
              rgba(240, 162, 110, .58) 40%,
              rgba(240, 162, 110, 0) 70%);
  filter: blur(22px);
  z-index: -1;
}

.hero__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--sage-100);
  box-shadow: 0 30px 60px -40px rgba(42, 68, 54, .55),
              0 0 0 1px rgba(42, 68, 54, .07) inset;
  aspect-ratio: 520 / 480;
}

/* the frame is the LCP candidate, so it is painted from the first frame —
   no entrance of its own; the page's one signature lives in the care path */
.hero__scene {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-note {
  margin-block: 14px 20px;
  color: var(--ink-muted);
  font-size: .75rem;
  line-height: 1.65;
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    align-items: center;
    padding-top: clamp(40px, 5vw, 72px);
    padding-bottom: clamp(56px, 6vw, 88px);
  }
  .hero__copy { max-width: none; }
}

/* ---------- page shell + numbered rail ----------------------------------- */
.page-shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
}

/* Below 1080 the index does not disappear: it folds into a scroll-snapping
   pill strip above the sections, so the page keeps its numbering and its one
   structural idea instead of becoming a plain stacked marketing page. */
.rail {
  display: block;
  position: static;
  min-width: 0;
  /* bleed the strip to the viewport edge so the last pill is reachable
     without the strip looking clipped by the page gutter */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

.rail__title {
  font-size: .75rem;
  line-height: 1.3;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-muted);
  padding-bottom: 10px;
}

.rail__list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.rail__list::-webkit-scrollbar { display: none; }

.rail__link {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  scroll-snap-align: start;
  font-size: .9375rem;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--dur-small) var(--ease-move),
              border-color var(--dur-small) var(--ease-move),
              transform var(--dur-small) var(--ease-enter);
}
.rail__num {
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--sage-600);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-small) var(--ease-move);
}
@media (hover: hover) and (pointer: fine) {
  .rail__link:hover { color: var(--ink); border-color: var(--line-strong); transform: translateX(2px); }
  .rail__link:hover .rail__num { color: var(--apricot-deep); }
}
.rail__link:active { transform: translateX(2px); }
.rail__link:focus-visible { outline-color: var(--sage-900); }

.rail__note { display: none; }

@media (min-width: 1080px) {
  .page-shell {
    grid-template-columns: 168px minmax(0, 1fr);
    align-items: start;
  }

  .rail {
    position: sticky;
    top: calc(var(--header-h) + 40px);
    padding-top: 8px;
    margin-inline: 0;
    padding-inline: 0;
  }

  .rail__title {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
  }

  .rail__list {
    display: grid;
    gap: 2px;
    margin-top: 14px;
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
  }

  .rail__link {
    flex: initial;
    gap: 10px;
    padding: 4px 8px 4px 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
  }

  .rail__note {
    display: block;
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: .75rem;
    line-height: 1.55;
    color: var(--ink-muted);
  }
}

/* ---------- section heads ------------------------------------------------ */
.sections {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(56px, 8vw, 100px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

.section { scroll-margin-top: calc(var(--header-h) + 24px); min-width: 0; }

.section__head { max-width: 40rem; }
.section__head .eyebrow { margin-bottom: 2px; }

/* ---------- care path ---------------------------------------------------- */
.path {
  margin-top: var(--gap-head);
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .path { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

.path__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px 24px;
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform var(--dur-med) var(--ease-enter),
              border-color var(--dur-med) var(--ease-move),
              background-color var(--dur-med) var(--ease-move);
}

/* the thread: a hairline that draws itself from each numbered node to the
   next, once, when the path is revealed. Decorative — the numbers carry the
   order on their own when it is absent. */
.path__link {
  display: none;
  position: absolute;
  top: 39px;
  left: 100%;
  width: 14px;
  height: 1px;
  overflow: visible;
  color: var(--sage-300);
  pointer-events: none;
}
.path__link line {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 14;
  stroke-dashoffset: 0;
}

/* hidden only when JS will draw it, so the thread is present without JS */
html.js-motion .path__link line { stroke-dashoffset: 14; }

.path__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--sage-100);
  color: var(--sage-700);
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-med) var(--ease-move),
              color var(--dur-med) var(--ease-move);
}

.path__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -.012em;
  font-weight: 600;
  text-wrap: balance;
}

.path__text {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

@media (hover: hover) and (pointer: fine) {
  .path__card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
  .path__card:hover .path__num { background: var(--apricot-soft); color: var(--apricot-deep); }
}

/* ---------- portfolio: không gian chăm sóc ------------------------------- */
.space-toolbar {
  margin-top: var(--gap-head);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  margin: -2px 0 -6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--sage-700);
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-move),
              background-color var(--dur-small) var(--ease-move),
              border-color var(--dur-small) var(--ease-move),
              color var(--dur-small) var(--ease-move);
}
.chip[aria-pressed="true"] {
  background: var(--sage-700);
  border-color: var(--sage-700);
  color: var(--paper);
  font-weight: 600;
}
.chip:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .chip:hover:not([aria-pressed="true"]) { background: var(--paper); border-color: var(--sage-700); }
}
.chip:focus-visible { outline-color: var(--sage-900); }

.space-count {
  margin-left: auto;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.space-grid {
  margin-top: 20px;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .space-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1360px) {
  .space-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.space-card {
  min-width: 0;
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-enter),
              border-color var(--dur-med) var(--ease-move);
}
.space-card[hidden] { display: none; }

.space-card__figure { margin: 0; }

.space-card__art {
  width: 100%;
  aspect-ratio: 320 / 200;
  height: auto;
  object-fit: cover;
  background: var(--sage-100);
  transition: transform var(--dur-large) var(--ease-enter);
}

.space-card__body {
  padding: 18px 20px 22px;
  display: grid;
  gap: 6px;
}

.space-card__meta {
  font-size: .75rem;
  line-height: 1.3;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sage-700);
}

.space-card__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -.012em;
  font-weight: 600;
}

.space-card__text {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

@media (hover: hover) and (pointer: fine) {
  .space-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
  .space-card:hover .space-card__art { transform: scale(1.025); }
}

@keyframes card-in {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: 0 0; }
}
.space-card.is-entering {
  animation: card-in var(--dur-large) var(--ease-enter) both;
  animation-delay: var(--stagger, 0ms);
}

.space-empty {
  margin-top: 20px;
  padding: 28px 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  display: grid;
  gap: 14px;
  justify-items: start;
  font-size: .9375rem;
  color: var(--ink-muted);
}
.space-empty[hidden] { display: none; }

/* ---------- faq ---------------------------------------------------------- */
.faq {
  margin-top: var(--gap-head);
  border-top: 1px solid var(--line);
}

.faq__item { border-bottom: 1px solid var(--line); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.4;
  letter-spacing: -.012em;
  font-weight: 600;
  transition: color var(--dur-small) var(--ease-move);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline-color: var(--sage-900); outline-offset: 4px; }

.faq__sign {
  position: relative;
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition: background-color var(--dur-med) var(--ease-move),
              border-color var(--dur-med) var(--ease-move),
              transform var(--dur-med) var(--ease-enter);
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 1.5px;
  margin: -0.75px 0 0 -5px;
  border-radius: 2px;
  background: var(--sage-700);
  transition: transform var(--dur-med) var(--ease-enter);
}
.faq__sign::after { transform: rotate(90deg); }

.faq__item[open] .faq__sign {
  background: var(--apricot-soft);
  border-color: var(--apricot-soft);
}
.faq__item[open] .faq__sign::after { transform: rotate(0deg); }

@media (hover: hover) and (pointer: fine) {
  .faq__q:hover { color: var(--sage-700); }
  .faq__q:hover .faq__sign { border-color: var(--sage-700); }
}
.faq__q:active { color: var(--sage-700); }

.faq__a {
  padding: 0 0 22px;
  max-width: 62ch;
  font-size: .9375rem;
  line-height: 1.68;
  color: var(--ink-muted);
}
.faq__a p { animation: faq-in var(--dur-med) var(--ease-enter) both; }

@keyframes faq-in {
  from { opacity: 0; translate: 0 -4px; }
  to   { opacity: 1; translate: 0 0; }
}

/* ---------- urgent note -------------------------------------------------- */
.urgent {
  border-radius: var(--r-xl);
  background: var(--apricot-soft);
  padding: clamp(22px, 3vw, 30px);
}

.urgent__inner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.urgent__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--apricot-deep);
}

.urgent__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -.012em;
  font-weight: 700;
}

.urgent__text {
  margin-top: 6px;
  max-width: 62ch;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-warm);
}

/* ---------- booking ------------------------------------------------------ */

.booking {
  margin-top: var(--gap-head);
  position: relative;
  border-radius: var(--r-xl);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(20px, 3.4vw, 36px);
  box-shadow: 0 30px 60px -50px rgba(42, 68, 54, .6);
}

.booking__form {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .booking__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 22px;
  }
  .field--wide,
  .booking__submit { grid-column: 1 / -1; }
}

.field { min-width: 0; display: grid; gap: 8px; align-content: start; }

.field__label {
  display: block;
  font-size: .875rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.005em;
}

.field__wrap { position: relative; }

.field__input {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--dur-small) var(--ease-move),
              background-color var(--dur-small) var(--ease-move);
  -webkit-appearance: none;
  appearance: none;
}

.field__input::placeholder { color: var(--ink-muted); opacity: 1; }

.field__input--age { padding-right: 68px; }
.field__input--area { min-height: 118px; padding-top: 14px; resize: vertical; }

.field__unit {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .9375rem;
  color: var(--ink-muted);
  pointer-events: none;
}

.field__input:focus-visible {
  outline: 2px solid var(--sage-900);
  outline-offset: 2px;
  border-color: var(--sage-900);
}

@media (hover: hover) and (pointer: fine) {
  .field__input:hover { border-color: var(--sage-700); }
}

.field__hint {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

.field__error {
  display: flex;
  gap: 6px;
  font-size: .8125rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--apricot-deep);
}
.field__error::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  margin-top: .52em;
  border-radius: 50%;
  background: var(--apricot-deep);
}
.field__error[hidden] { display: none; }

.field__input[aria-invalid="true"] {
  border-color: var(--apricot-deep);
  background: #FFFBF7;
}

/* radio choice cards */
.field--choices {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.field--choices .field__label { padding: 0; margin-bottom: 2px; }

.choices {
  margin-top: 4px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) {
  .choices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.choice { position: relative; display: block; min-width: 0; }

.choice input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}

.choice__box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--paper);
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-move),
              border-color var(--dur-small) var(--ease-move),
              background-color var(--dur-small) var(--ease-move);
}

.choice__name {
  font-size: .9375rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);
  /* keeps the label clear of the selected tick without reflowing on select */
  padding-right: 22px;
}
.choice__time {
  font-size: .75rem;
  line-height: 1.35;
  letter-spacing: .01em;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* selected is not colour alone: a second ring and a tick both survive
   greyscale and low-vision colour loss */
.choice input:checked + .choice__box {
  border-color: var(--sage-700);
  background: var(--sage-100);
  box-shadow: inset 0 0 0 1px var(--sage-700);
}
.choice input:checked + .choice__box .choice__name { color: var(--sage-700); }
.choice input:checked + .choice__box::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 11px;
  font-size: .75rem;
  line-height: 1;
  font-weight: 700;
  color: var(--sage-700);
}

.choice input:focus-visible + .choice__box {
  outline: 2px solid var(--sage-900);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .choice__box:hover { border-color: var(--sage-700); background: var(--ground); }
  /* a selected card still reacts to hover, but the surface goes to paper
     rather than sage-200: sage-200 dropped the 12px time label to 4.22:1,
     and the 4.5:1 it needs is the reason the card cannot simply darken */
  .choice input:checked + .choice__box:hover { background: var(--paper); }
}

.choice:active .choice__box { transform: scale(.985); }

.booking__submit { display: grid; gap: 12px; }

.booking__note {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* success panel */
.booking__done {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: clamp(6px, 1vw, 12px) 0;
  animation: done-in var(--dur-large) var(--ease-enter) both;
}
.booking__done[hidden] { display: none; }

@keyframes done-in {
  from { opacity: 0; translate: 0 8px; }
  to   { opacity: 1; translate: 0 0; }
}

.booking__done-mark {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--sage-100);
  color: var(--sage-700);
}

.booking__done-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -.018em;
  font-weight: 700;
}

.booking__done-text {
  max-width: 58ch;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--ink-muted);
}
.booking__done:focus-visible { outline-color: var(--sage-900); }

/* ---------- footer ------------------------------------------------------- */
.site-footer {
  background: var(--sage-900);
  color: var(--paper);
  padding-top: clamp(40px, 5vw, 60px);
}

.footer__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(32px, 4vw, 44px);
  display: grid;
  gap: 28px;
}

@media (min-width: 760px) {
  .footer__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 48px;
  }
}

.footer__brand .brand__name {
  font-size: 1.375rem;
  color: var(--paper);
}

.footer__tagline {
  margin-top: 8px;
  max-width: 34ch;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--sage-300);
}

.footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-size: .9375rem;
  color: var(--sage-300);
  text-decoration: none;
  transition: color var(--dur-small) var(--ease-move);
}
@media (hover: hover) and (pointer: fine) {
  .footer__nav a:hover { color: var(--paper); }
}
.footer__nav a:focus-visible,
.footer__base a:focus-visible { outline-color: var(--apricot); }
.footer__nav a[aria-current="page"] { color: var(--paper); font-weight: 600; }

.footer__base {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 20px var(--gutter) 28px;
  border-top: 1px solid rgba(198, 213, 190, .22);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--sage-300);
}
.footer__base a {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  padding: 2px 0;
}
.footer__year { font-variant-numeric: tabular-nums; }

/* ---------- reveal ------------------------------------------------------- */
html.js-motion [data-reveal] {
  opacity: 0;
  translate: 0 16px;
}

html.js-motion [data-reveal].is-revealed {
  opacity: 1;
  translate: 0 0;
  transition: opacity var(--dur-reveal) var(--ease-enter),
              translate var(--dur-reveal) var(--ease-enter);
  transition-delay: var(--reveal-delay, 0ms);
}

/* signature: the care path draws itself, once.
   A one-shot animation owns the entrance, so `transition-delay` is never set
   and hover on cards 2–4 stays as immediate as on card 1. */
@keyframes path-in {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}

html.js-motion .path__card {
  opacity: 0;
}

html.js-motion .path.is-revealed .path__card {
  animation: path-in var(--dur-large) var(--ease-enter) both;
}

html.js-motion .path.is-revealed .path__card:nth-child(1) { animation-delay: 0ms; }
html.js-motion .path.is-revealed .path__card:nth-child(2) { animation-delay: 55ms; }
html.js-motion .path.is-revealed .path__card:nth-child(3) { animation-delay: 110ms; }
html.js-motion .path.is-revealed .path__card:nth-child(4) { animation-delay: 165ms; }

/* the connector is the part that is worth remembering: it draws after its
   card has landed, so the eye follows 01 → 02 → 03 → 04 rather than seeing
   four tiles fade in at the same time. It runs on --dur-hero because this
   thread is the page's hero motion, not another reveal. */
html.js-motion .path.is-revealed .path__link line {
  transition: stroke-dashoffset var(--dur-hero) var(--ease-enter);
  stroke-dashoffset: 0;
}
html.js-motion .path.is-revealed .path__card:nth-child(1) .path__link line { transition-delay: 210ms; }
html.js-motion .path.is-revealed .path__card:nth-child(2) .path__link line { transition-delay: 375ms; }
html.js-motion .path.is-revealed .path__card:nth-child(3) .path__link line { transition-delay: 540ms; }

/* side-by-side cards are joined along the row; the last of each pair has no
   neighbour to its right, and in the stacked layout there is no row at all */
@media (min-width: 560px) {
  .path__link { display: block; }
  .path__card:nth-child(2n) .path__link { display: none; }
}

/* ---------- responsive fine-tuning --------------------------------------- */
@media (max-width: 899px) {
  .nav-toggle { display: grid; }

  .site-nav {
    position: absolute;
    top: calc(100% + 8px);
    right: var(--gutter);
    left: var(--gutter);
    padding: 10px;
    border-radius: var(--r-lg);
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 24px 48px -32px rgba(42, 68, 54, .55);
    opacity: 0;
    visibility: hidden;
    translate: 0 -8px;
    transition: opacity var(--dur-small) var(--ease-move),
                translate var(--dur-small) var(--ease-enter),
                visibility 0s linear var(--dur-small);
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    transition: opacity var(--dur-small) var(--ease-move),
                translate var(--dur-med) var(--ease-enter),
                visibility 0s;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .site-nav__link {
    min-height: 48px;
    padding: 0 14px;
    font-size: 1rem;
    color: var(--ink);
  }
  .site-nav__list li:last-child { margin-left: 0; margin-top: 8px; }
  .site-nav__list li:last-child .btn { width: 100%; }
}

@media (min-width: 900px) {
  .site-nav {
    position: static;
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 420px) {
  .hero__actions .btn { width: 100%; }
  .space-count { margin-left: 0; }
  .choices { grid-template-columns: 1fr; }
  .choice__box { min-height: 56px; }
}

/* solid fallbacks for glass */
@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .site-header {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header::after { opacity: 1; animation: none; }
  .btn--ghost { border-color: var(--sage-900); }
  .chip { border-color: var(--sage-900); }
  .space-card,
  .path__card { border-color: var(--sage-700); }
  .field__input,
  .choice__box { border-color: var(--sage-900); }
}

/* ---------- reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.js-motion [data-reveal],
  html.js-motion .path__card {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
  }

  /* the path arrives whole: no stagger, and the thread is simply drawn */
  html.js-motion .path.is-revealed .path__card {
    animation: none !important;
  }
  html.js-motion .path__link line { stroke-dashoffset: 0 !important; }

  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .hero__blob { animation: none !important; transform: none !important; }
  .space-card.is-entering { animation: none !important; opacity: 1 !important; translate: none !important; }
}