/* ===========================================================================
   THE BODY — Book page (Figma 298:2 "Book fin", 1440 x 5959). Natural-height
   hero like the Gift page (photo-less hero). Geometry generated into book.css.
   =========================================================================== */

/* this page's nav sits on the 80px margin (other pages: 56) */
.h-logo--80 { left: calc(80 * var(--u)); }
.h-book--80 { right: calc(80 * var(--u)); }

/* two doors */
.door { border-radius: calc(24 * var(--u)); }
.door--dark  { background: var(--ink); }
.door--light { background: #f6f5ec; border: 1px solid var(--hair); }

/* "Pick a time" booking panel (#glossgenius-embed, scripts/build_book.py).
   Without a widget (site_flags.BOOKING_EMBED_HTML empty): a short sage panel with a
   solid hairline; its copy and buttons are siblings placed over it.
   With the widget (.embed--live): Figma's 1280 x 520 frame, an iframe fills it. */
.embed { background: #eaf3e7; border: 1px solid #c7d3c4; border-radius: calc(24 * var(--u)); overflow: hidden; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-copy { text-wrap: balance; }

/* quick pickers + contact rows */
.picker  { background: #f6f5ec; border: 1px solid var(--hair); border-radius: calc(24 * var(--u)); }
.channel { background: #f6f5ec; border: 1px solid var(--hair); border-radius: calc(20 * var(--u)); }

/* ---------- 06 Before you commit: FAQ accordion (js/faq.js) ----------
   Figma: rows at x 600, width 760, question Jost 26/32, answer Hanken light 15.5/28,
   1px --hair rule under each row, +/– in clay at the right. Closed row = 85px
   (27 above the question, 26 below). Built in normal flow so the section grows. */
[data-f="299:63"] {
  height: auto; min-height: calc(737 * var(--u));
  padding: calc(119 * var(--u)) 0 calc(121 * var(--u));
}
.faq { position: relative; margin-left: calc(600 * var(--u)); width: calc(760 * var(--u)); }
.faq-item { border-bottom: 1px solid var(--hair); }
.faq-h { margin: 0; font: inherit; }
.faq-q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: calc(24 * var(--u));
  width: 100%; padding: calc(27 * var(--u)) 0 calc(26 * var(--u)); margin: 0;
  background: none; border: 0; cursor: pointer; text-align: left; color: var(--body);
  font-size: calc(26 * var(--u)); line-height: calc(32 * var(--u)); letter-spacing: calc(-0.5 * var(--u));
  transition: color .25s ease, padding-bottom .45s cubic-bezier(.2,.7,.2,1);
}
/* Figma: 16px from an open question to its answer (26 under a closed one) */
.faq-item.is-open .faq-q { padding-bottom: calc(16 * var(--u)); }
.faq-q span { max-width: calc(708 * var(--u)); }
.faq-q:hover { color: var(--ink); }
.faq-q:focus-visible { outline: 2px solid var(--clay); outline-offset: calc(4 * var(--u)); border-radius: 4px; }
/* + that turns into – */
.faq-ic { position: relative; flex: none; width: calc(14 * var(--u)); height: calc(32 * var(--u)); margin-right: calc(7 * var(--u)); }
.faq-ic::before, .faq-ic::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; margin-top: -0.75px;
  background: var(--clay); transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
.faq-ic::after { transform: rotate(90deg); }
.faq-item.is-open .faq-ic::after { transform: rotate(0deg); opacity: 0; }
/* answer: 0fr -> 1fr grid row animates to the content's real height */
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a-in { overflow: hidden; min-height: 0; }
.faq-a-in p {
  margin: 0; max-width: calc(680 * var(--u));
  font-size: calc(15.5 * var(--u)); line-height: calc(28 * var(--u));
  opacity: 0; translate: 0 calc(-6 * var(--u)); transition: opacity .35s ease, translate .45s cubic-bezier(.2,.7,.2,1);
}
.faq-a-in p + p { margin-top: calc(14 * var(--u)); }
.faq-a-in p:last-child { margin-bottom: calc(26 * var(--u)); }
.faq-item.is-open .faq-a-in p { opacity: 1; translate: 0 0; transition-delay: .08s; }
@media (prefers-reduced-motion: reduce) {
  .faq-a, .faq-a-in p, .faq-ic::before, .faq-ic::after { transition: none !important; }
}

/* .pick-link (service rows that book online) lives in base.css since 2026-10-29: Treatments uses it too */