/* ============================================================================
   COMPONENTS — the curtain, the seal, the masthead, buttons, form furniture

   Re-grounded for the light herbal system (spec 2026-08-17 §2/§4/§5).
   Everything here now sits on warm cream; deep forest survives in exactly one
   place, the footer, and is reached through `.plate` / `.footer` scoping.

   Colour policy in this sheet:
   · semantic token NAMES first (tokens.css revalues them, the names are stable)
   · spec §2 literals where no semantic token covers the role
       forest   #06321C    sage rule    #A8B79A    deep sage  var(--ink-400)
       amber    #D4791E    on-plate mut #CBD8C4    accent ink var(--text-accent)
   · saffron is NEVER text or fill on cream — only on forest (11.52:1)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   THE SEAL
   His logo is treated as a physical object, not a picture. It is still the
   only element on the page permitted real dimension — but on paper rather
   than on ink, so the shadow is softened to ~55% of its old alpha (spec §2)
   and recast in the forest-black family instead of warm black.
   --------------------------------------------------------------------------- */

.seal {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1;
  filter: drop-shadow(0 8px 20px rgb(18 36 26 / 0.24));
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------------------------------------------------------------------------
   CURTAIN — first paint. Cream paper ground, the seal presses down, then you
   pick a language. That click is also the gesture that unlocks Web Audio.
   --------------------------------------------------------------------------- */

.curtain {
  position: fixed;
  inset: 0;
  z-index: var(--z-curtain);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  /* Paper, not ink. The tint layers ride in the background shorthand rather
     than a pseudo-element so they paint beneath BOTH ambient canvases without
     entering the z-index conversation. */
  background-color: var(--surface-page);
  background-image:
    radial-gradient(circle at 16% 14%, rgb(243 238 220 / 0.72) 0, transparent 46%),
    radial-gradient(circle at 84% 80%, rgb(242 248 238 / 0.78) 0, transparent 50%);
  /* Short viewports (landscape phones, small laptops) must still be able to
     reach the second language card. */
  overflow: hidden auto;
  overscroll-behavior: contain;
  transition: opacity var(--dur-slow) var(--ease-in-quart),
              visibility var(--dur-slow) step-end;
}

/* Two ambient layers: madder branches growing behind, leaves drifting in
   front. Positioning unchanged — branches.js / botanical.js measure these. */
.curtain__branches,
.curtain__motes { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.curtain__branches { z-index: 0; }
.curtain__motes { z-index: 1; }

/* The curtain is light now, so the saffron ring base.css hands to
   `.curtain :focus-visible` would be invisible on it. Same specificity,
   later sheet — this simply restores the on-paper ring. */
.curtain :focus-visible { outline-color: var(--focus-ring); }

/* A returning visitor has already chosen a language, so the gate is dropped
   and the intro dismisses itself once the seal has landed. */
html[data-lang-known] .curtain__gate { display: none; }

.curtain__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  /* place-items:center on the parent shrink-wraps this to max-content, which
     collapses the two language cards into one column. Claim the width back. */
  inline-size: 100%;
  max-inline-size: 34rem;
  margin-block: auto;
}

.curtain__sealbed {
  position: relative;
  display: grid;
  place-items: center;
  /* Height-aware as well as width-aware, so the seal never pushes the gate
     off a short screen. */
  inline-size: clamp(6.5rem, min(30vw, 26vh), 15rem);
  margin-block-end: var(--space-xs);
}

/* The ring that expands outward as the seal lands. Amber — "cooled saffron",
   the one warm mark allowed on cream (3.01:1, decorative). */
.curtain__sealring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid #D4791E;
  opacity: 0;
  pointer-events: none;
}

/* ---- The doctor's portrait, beside his seal -----------------------------
   A contact-style round photograph, sized to sit as the seal's equal rather
   than compete with it: same visual weight, one hairline ring, no shadow.
   The seal is the practice; this is the person. It settles in AFTER the
   stamp has landed (see motion.css) so the two never arrive together. */
.curtain__avatar {
  /* Near the seal's own size — the person introduced as the practice's equal.
     Height-aware like the sealbed so a short screen never pushes the language
     gate below the fold. */
  inline-size: clamp(5rem, min(19vw, 17vh), 9.5rem);
  aspect-ratio: 1;
  margin-block: calc(var(--space-2xs) * -1) var(--space-2xs);
  max-inline-size: none;
}
.curtain__avatar img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  border-radius: 50%;
  /* Two rings: a cream mat so the photograph reads as mounted on the paper,
     then the sage hairline the whole site uses for framed objects. */
  box-shadow:
    0 0 0 3px var(--surface-raised),
    0 0 0 4px var(--ink-300);
}

/* Moss label — 9.73:1 on cream. */
.curtain__estd {
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: #2C4720;
}
html[lang="hi"] .curtain__estd {
  text-transform: none;
  letter-spacing: 0.05em;
  font-weight: 700;
}

/* His name in the display face, forest. 13.33:1 on cream. */
.curtain__name {
  font-size: var(--step-3);
  color: #06321C;
  margin: 0;
}

.curtain__cred {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  letter-spacing: 0.05em;
  color: var(--text-muted);          /* 7.82:1 on cream */
}
html[lang="hi"] .curtain__cred { letter-spacing: 0; }

.curtain__gate {
  margin-block-start: var(--space-lg);
  inline-size: 100%;
  display: grid;
  gap: var(--space-sm);
}

.curtain__prompt {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--text-muted);
  max-inline-size: none;
}
html[lang="hi"] .curtain__prompt { letter-spacing: 0; }

.curtain__choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-xs);
}

/* Near-white cream card on the cream ground. The two grounds are only 1.08:1
   apart, so the border is the entire affordance — it is set in the deeper
   sage (var(--ink-400), 3.37:1 against the card) to clear the 3:1 floor for a
   control boundary rather than the decorative #A8B79A hairline. */
.langcard {
  display: grid;
  gap: 2px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--ink-400);
  border-radius: var(--radius-sm);
  background-color: var(--surface-raised);
  color: var(--text-strong);         /* 15.68:1 */
  min-block-size: 2.75rem;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out-quart),
              border-color var(--dur-fast) var(--ease-out-quart),
              color var(--dur-fast) var(--ease-out-quart),
              transform var(--dur-fast) var(--ease-out-quart);
}
.langcard:hover,
.langcard:focus-visible {
  background-color: #06321C;
  border-color: #06321C;
  color: var(--surface-page);        /* cream on forest — 13.33:1 */
  transform: translateY(-2px);
}
.langcard:active { transform: translateY(0); }

.langcard__native {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.15;
}
/* Was opacity:.66 over ink; explicit colours instead, so both states are
   measurable: 7.82:1 on the card, 9.56:1 on the forest hover. */
.langcard__latin {
  font-family: var(--font-ui);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.langcard:hover .langcard__latin,
.langcard:focus-visible .langcard__latin { color: #CBD8C4; }
html[lang="hi"] .langcard__latin { text-transform: none; letter-spacing: 0.04em; }

/* Dismissed */
.curtain.is-lifting { opacity: 0; }
.curtain.is-gone { visibility: hidden; opacity: 0; pointer-events: none; }

/* While the intro is up the page beneath must not scroll. The page is NOT
   hidden: the curtain is fixed, full-bleed and opaque, so it already covers
   everything, and hiding the content as well would mean a single failed
   script left a permanently blank page with no way back. */
html[data-curtain="up"] { overflow: hidden; }

/* Failsafe. If app.js never runs — blocked script, parse error, bad deploy —
   nothing would ever take the curtain down. This clears it on its own after
   six seconds.

   Gated on an attribute rather than cancelled with an inline style: an inline
   `animation: none` also outranks .curtain.is-lifting's own animation, which
   killed the lift and left the overlay sitting there before cutting out. */
html:not([data-js-live]) .curtain { animation: curtain-failsafe 500ms linear 6s forwards; }
@keyframes curtain-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ---------------------------------------------------------------------------
   SCROLL RAIL — a thin printed gauge down the edge of the sheet
   --------------------------------------------------------------------------- */

#scroll-rail {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  z-index: calc(var(--z-header) + 1);
  background-color: transparent;
  pointer-events: none;
}
#scroll-rail::after {
  content: "";
  display: block;
  block-size: 100%;
  inline-size: 100%;
  background-color: var(--text-accent);         /* spec §5 — the darkened vermilion */
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
}

/* ---------------------------------------------------------------------------
   MASTHEAD — cream, blurred, ink. Forest on hover, vermilion underline.
   --------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background-color: rgb(251 248 236 / 0.96);   /* --surface-page at ~96% */
  border-block-end: var(--rule-hair);
  transition: box-shadow var(--dur-base) var(--ease-out-quart),
              background-color var(--dur-base) var(--ease-out-quart);
}
.masthead.is-stuck {
  background-color: rgb(251 248 236 / 0.99);
  box-shadow: var(--shadow-lift);
}

.masthead__bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-2xs);
  min-block-size: 4.25rem;
}

.masthead__lockup {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  text-decoration: none;
  color: inherit;
  flex: none;
}

/* The FLIP destination. seal.js parks the stamped logo in here. */
.masthead__sealslot {
  display: grid;
  place-items: center;
  inline-size: 2.9rem;
  block-size: 2.9rem;
  flex: none;
  transition: inline-size var(--dur-base) var(--ease-out-quart),
              block-size var(--dur-base) var(--ease-out-quart);
}
.masthead__sealslot .seal {
  filter: drop-shadow(0 2px 5px rgb(18 36 26 / 0.16));
}
/* While the curtain's seal is in flight, the resident one steps aside. */
html[data-sealflight] .masthead__sealslot > .seal { visibility: hidden; }
.masthead.is-stuck .masthead__sealslot { inline-size: 2.5rem; block-size: 2.5rem; }

.masthead__names { display: grid; line-height: 1.25; }
.masthead__name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-0);
  color: var(--text-strong);         /* 15.27:1 */
  letter-spacing: var(--display-tracking);
}
.masthead__role {
  font-family: var(--font-ui);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  color: var(--text-muted);          /* 7.82:1 */
}
html[lang="hi"] .masthead__role { letter-spacing: 0; }

.masthead__nav {
  display: flex;
  gap: var(--space-md);
  margin-inline-start: auto;
  font-family: var(--font-ui);
  font-size: var(--step--1);
}
.masthead__nav a {
  position: relative;
  color: var(--text-body);           /* ink — 13.97:1 */
  text-decoration: none;
  padding-block: var(--space-3xs);
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.masthead__nav a::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 2px;
  background-color: var(--text-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-base) var(--ease-out-quart);
}
.masthead__nav a:hover { color: #06321C; }
.masthead__nav a:hover::after,
.masthead__nav a.is-current::after { transform: scaleX(1); }
.masthead__nav a.is-current { color: #06321C; }

/* ---- Header telephone -----------------------------------------------------
   Research says the number is always visible on a practice site. It exists in
   the mobile action bar already, so this is the desktop half of that promise
   and is dropped at the same breakpoint as the nav. --font-ui resolves to
   Mona Sans in `en` and Mukta in `hi`, which keeps the number in the same
   voice as the rest of the header furniture in both languages. */
.masthead__tel {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  flex: none;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text-strong);         /* ink — 15.27:1 */
  padding-block: var(--space-3xs);
  transition: color var(--dur-fast) var(--ease-out-quart);
}
html[lang="hi"] .masthead__tel { letter-spacing: 0; font-weight: 700; }
.masthead__tel svg {
  inline-size: 1.05em;
  block-size: 1.05em;
  flex: none;
  color: var(--text-accent);         /* var(--text-accent) — 5.37:1, safe as a glyph */
}
.masthead__tel:hover { color: #06321C; text-decoration: underline; text-underline-offset: 0.22em; }
.masthead__tel:hover svg { color: #06321C; }

.masthead__tools {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  flex: none;
}

.iconbtn {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--radius-sm);
  color: var(--text-body);           /* ink on cream — 13.97:1 */
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out-quart),
              color var(--dur-fast) var(--ease-out-quart);
}
.iconbtn:hover { background-color: var(--surface-sunken); color: #06321C; }
.iconbtn svg { inline-size: 1.2rem; block-size: 1.2rem; }
.iconbtn .iconbtn__off { display: none; }
.iconbtn[aria-pressed="false"] .iconbtn__on { display: none; }
.iconbtn[aria-pressed="false"] .iconbtn__off { display: block; }
/* Touch floor (spec §1: 44px). Only where the pointer is actually a finger,
   so the desktop header keeps its proportions. */
@media (pointer: coarse) {
  .iconbtn { inline-size: 2.75rem; block-size: 2.75rem; }
}

.langswitch {
  display: flex;
  border: 1px solid var(--ink-400);         /* control boundary — 3.28:1 on cream */
  border-radius: var(--radius-pill);
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
}
html[lang="hi"] .langswitch { letter-spacing: 0; font-weight: 700; }
.langswitch__opt {
  padding: 0.3rem 0.6rem;
  color: var(--text-body);           /* 13.97:1 */
  transition: background-color var(--dur-fast) var(--ease-out-quart),
              color var(--dur-fast) var(--ease-out-quart);
}
html[lang="hi"] .langswitch__opt[data-for="hi"],
html[lang="en"] .langswitch__opt[data-for="en"] {
  background-color: #06321C;
  color: var(--surface-page);        /* cream on forest — 13.33:1 */
}
@media (pointer: coarse) {
  .langswitch__opt { padding-block: 0.55rem; }
}

/* ---------------------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.7em 1.25em;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out-quart),
              border-color var(--dur-fast) var(--ease-out-quart),
              color var(--dur-fast) var(--ease-out-quart),
              transform var(--dur-fast) var(--ease-out-quart);
}
.btn svg { inline-size: 1.15em; block-size: 1.15em; flex: none; }
.btn:active { transform: translateY(1px); }
.btn[aria-busy="true"] { opacity: 0.72; cursor: progress; }

html[lang="hi"] .btn { font-weight: 700; letter-spacing: 0; }

/* WhatsApp keeps its own green — it is a recognised trust mark in India.
   Its luminance (0.274) means a WHITE label would only reach 3.2:1, so the
   label is ink: 5.01:1. The hover darkens the green far enough that the
   cream label clears the floor from the other side (5.10:1). */
.btn--book {
  background-color: var(--whatsapp);
  color: var(--text-strong);
  border-color: var(--whatsapp-deep);
}
.btn--book:hover,
.btn--book:focus-visible {
  background-color: #0E7C3F;
  border-color: #0E7C3F;
  color: var(--surface-raised);
}

/* Quiet secondary: ink label, sage boundary, hover settles into leaf tint. */
.btn--ghost {
  background-color: transparent;
  color: var(--text-body);           /* 13.97:1 on cream */
  border-color: var(--ink-400);             /* 3.28:1 — the only affordance it has */
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: #06321C;
  background-color: var(--surface-sunken);
  color: #06321C;                    /* 13.76:1 on leaf tint */
}

/* The one hot primary that is NOT WhatsApp. Vermilion darkened to the fill
   register that carries a white label at 4.99:1. */
.btn--accent {
  background-color: #D62B0A;
  color: #FFFFFF;
  border-color: #D62B0A;
  font-weight: 600;
}
.btn--accent:hover,
.btn--accent:focus-visible {
  background-color: var(--text-accent);         /* 5.72:1 with white */
  border-color: var(--text-accent);
  color: #FFFFFF;
}

/* On-forest variant. Scoped: the only forest ground left is the footer, so a
   stray `btn--onplate` anywhere else now falls back to its base variant
   instead of painting cream-on-cream. */
.plate .btn--onplate,
.footer .btn--onplate {
  color: var(--text-on-plate);       /* cream on forest — 13.33:1 */
  border-color: rgb(251 248 236 / 0.32);
  background-color: transparent;
}
.plate .btn--onplate:hover,
.footer .btn--onplate:hover,
.plate .btn--onplate:focus-visible,
.footer .btn--onplate:focus-visible {
  background-color: var(--saffron-500);
  border-color: var(--saffron-500);
  color: #06321C;                    /* forest on saffron — 11.52:1 */
}

/* The forest ground keeps the saffron focus ring; everything else on this
   site is now paper and uses the vermilion one from base.css. */
.plate :focus-visible,
.footer :focus-visible { outline-color: var(--focus-ring-on-plate); }

.btn--lg { padding: 0.95em 1.6em; font-size: var(--step-0); }
.btn--sm { padding: 0.55em 0.95em; font-size: var(--step--2); }
.btn--full { inline-size: 100%; }

.masthead__cta { white-space: nowrap; }

/* The masthead sheds furniture rather than letting it overflow. The nav and
   the telephone go first — the nav only duplicates scrolling and the number
   reappears in the fixed action bar. The CTA goes next, but only once that
   action bar has actually appeared to carry it. */
@media (max-width: 68rem) {
  .masthead__nav { display: none; }
  .masthead__tel { display: none; }
  .masthead__tools { margin-inline-start: auto; }
}
@media (max-width: 44rem) {
  .masthead__cta { display: none; }
  .masthead__role { display: none; }
  .masthead__bar { min-block-size: 3.75rem; }
}
@media (max-width: 26rem) {
  .masthead__name { font-size: var(--step--1); }
}

/* ---------------------------------------------------------------------------
   FORM FURNITURE
   Built for readability first: large targets, high-contrast rules, errors
   that name the fix rather than the failure.
   --------------------------------------------------------------------------- */

.field { display: grid; gap: var(--space-3xs); }

.field label {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-strong);         /* ink 600 — 15.27:1 */
}
html[lang="hi"] .field label { font-weight: 700; letter-spacing: 0; }

.req { color: var(--text-accent); }  /* var(--text-accent) — 5.37:1 */

.field input,
.field select,
.field textarea {
  inline-size: 100%;
  padding: 0.72rem 0.85rem;
  min-block-size: 2.75rem;
  font-size: var(--step-0);
  font-family: var(--font-body);
  background-color: var(--surface-raised);   /* #FDFBF3 */
  color: var(--text-strong);                 /* 15.68:1 on the field */
  /* The field ground and the page ground are 1.08:1 apart, so the border is
     the whole control. Deep sage clears the 3:1 non-text floor (3.37:1);
     the decorative #A8B79A hairline would only manage 2:1. */
  border: 1px solid var(--ink-400);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out-quart),
              box-shadow var(--dur-fast) var(--ease-out-quart);
}
.field textarea { resize: vertical; min-block-size: 6rem; line-height: 1.55; }

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-faint);          /* 5.76:1 on the field — never UA grey */
  opacity: 1;
}

.field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: right 1.15rem center, right 0.85rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: 2.5rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--text-accent);
  box-shadow: 0 0 0 3px rgb(185 58 14 / 0.18);
}

.field [aria-invalid="true"] { border-color: var(--text-accent); }
.field [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgb(185 58 14 / 0.24); }

.field__error {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--text-accent);         /* var(--text-accent) — 5.37:1 on cream */
  min-block-size: 0;
}
.field__error[hidden] { display: none; }
.field__error:empty { display: none; }

/* ---------------------------------------------------------------------------
   LIGHTBOX
   The scrim may stay dark (spec §5) — it is what lets a photograph read.
   The close button is a cream card so it is legible against that scrim.
   --------------------------------------------------------------------------- */

.lightbox {
  padding: 0;
  border: 0;
  background: transparent;
  max-inline-size: min(94vw, 70rem);
  max-block-size: 92svh;
  overflow: visible;
}
.lightbox::backdrop { background-color: rgb(18 36 26 / 0.72); }
.lightbox img {
  inline-size: auto;
  max-inline-size: 100%;
  max-block-size: 88svh;
  margin-inline: auto;
  border-radius: var(--radius-sm);
  background-color: var(--surface-raised);
}
.lightbox__close {
  position: absolute;
  inset-block-start: -3.25rem;
  inset-inline-end: 0;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  background-color: var(--surface-raised);
  color: var(--text-strong);         /* ink on cream card — 15.68:1 */
  border: 1px solid var(--ink-400);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out-quart),
              border-color var(--dur-fast) var(--ease-out-quart);
}
.lightbox__close:hover {
  background-color: var(--surface-sunken);
  border-color: #06321C;
}
.lightbox__close svg { inline-size: 1.2rem; block-size: 1.2rem; }

/* ---------------------------------------------------------------------------
   MOBILE ACTION BAR — call and book, always within thumb reach
   --------------------------------------------------------------------------- */

.actionbar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--z-fab);
  display: none;
  gap: 1px;
  /* The gap colour is the divider between the two cells. */
  background-color: #A8B79A;
  border-block-start: var(--rule-hair);
  /* Cream on cream needs more than a hairline to read as a separate plane. */
  box-shadow: 0 -2px 14px rgb(31 42 34 / 0.10);
  padding-block-end: env(safe-area-inset-bottom, 0);
}
.actionbar__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  padding-block: 0.95rem;
  min-block-size: 2.75rem;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 700;
  text-decoration: none;
}
.actionbar__btn svg { inline-size: 1.1em; block-size: 1.1em; }
.actionbar__btn--call {
  background-color: var(--surface-page);
  color: var(--text-strong);         /* ink on cream — 15.27:1 */
}
.actionbar__btn--call svg { color: var(--text-accent); }
.actionbar__btn--book {
  background-color: var(--whatsapp);
  color: var(--text-strong);         /* ink on WhatsApp green — 5.01:1 */
  flex: 1.6;
}

@media (max-width: 44rem) {
  .actionbar { display: flex; }
  body { padding-block-end: 4.5rem; }
}