/* ===========================================================================
   THE BODY — PHONE + TABLET LAYER (<= 1079px), shared by every page.
   Linked with media="(max-width: 1079px)" (scripts/site_mobile.py), so nothing
   in this file, or in the per-page css/m-<page>.css, can reach the desktop build.

   The Figma file has NO mobile frames: this layer is an ADAPTATION in the
   brand's own type, colour and spacing, not a pixel spec (flagged for sign-off).

   Breakpoint from legibility maths: the desktop canvas scales body copy by
   width/1440, so 16px copy falls under 12px below ~1080px wide. Everything
   narrower (phones, tablets, small laptops in split view) gets this reflow.

   MODEL
   --u becomes ~1px (100cqw/390, clamped 0.86-1px), so every Figma number in
   the generated page CSS renders at its DESIGNED physical size: 15px copy stays
   15px, a 60px button stays 60px, a 480px text measure stays 480px - or the
   column, whichever is narrower. The absolute canvas is released into a column
   (.sec = flex column); only what a phone cannot hold is overridden: display
   type, wide frames, multi-column rows. Tablets keep 1:1 type and the column
   stops at 640px.
   =========================================================================== */

:root { --hdr-h: 64px; }
.page {
  --m: clamp(0.86px, calc(100cqw / 390), 1px);
  --u: var(--m);
  --gut: max(20px, calc(50cqw - 320px));
}
.page .hero { --u: var(--m); }

/* ---------- type: body copy at its designed size, display type eased down ----------
   fs 15 -> 15px, 26 -> 26px, 30 -> 28.6px, 42 -> 34.8px, 52 -> 40px, 68 -> 48.4px */
.page .t {
  font-size: max(11px, min(calc(var(--fs) * var(--u)), calc((var(--fs) * 0.52 + 13) * var(--u))));   /* 11px floor: 360px phones */
  line-height: max(calc(var(--lh) / var(--fs)), 1.05);
  letter-spacing: calc(var(--ls, 0) / var(--fs) * 1em);
}
.page .c { text-indent: calc(var(--ls, 0) / var(--fs) * 1em); }

/* ---------- sections: the canvas becomes a column ---------- */
.page .sec {
  height: auto; min-height: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 16px;
  padding: 48px var(--gut);                    /* ~96px between sections */
}
.page .sec .a, .page .sec .btn, .page .sec .rule {
  position: relative; left: auto; right: auto; top: auto; bottom: auto;
  max-width: 100%; flex: none; margin: 0;
}
.page .sec .nw { white-space: normal; }
.page .sec .t.hk.up.nw { width: auto; }          /* small tracked labels size to their text (Figma widths made them wrap) */
.page .sec .r { text-align: left; }
.page .sec .c { align-self: center; text-align: center; }
.page .sec h2, .page .sec h3, .page .sec .c { text-wrap: balance; }
.page .sec h2.t { margin-bottom: 4px; }

/* photo frames keep their Figma proportions at the width they get */
.page .sec .ph { width: 100%; height: auto; aspect-ratio: var(--w) / var(--h); }
/* hairlines run the full column; vertical dividers have no meaning in a column */
.page .sec .rule { width: 100%; }
.page .sec .pillar-rule { display: none; }

/* buttons keep their Figma size (never wider than the column), label centred */
.page .sec .btn { width: calc(var(--w) * var(--u)); min-height: 48px; }

/* the first section under the fixed header (natural-height heroes: Gift, Book, Visit) */
.page > .sec:first-child { padding-top: calc(var(--hdr-h) + 40px); }

/* ---------- photo heroes (Home, About, Treatments, Packages) ----------
   Full-height photo card, copy stacked at the bottom of it, centred. */
.page .hero {
  height: auto; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 16px;
  padding: calc(var(--hdr-h) + 56px) calc(var(--gut) + 10px) 60px;
  text-align: center;
}
.page .hero .hm {
  position: relative; left: auto; top: auto; z-index: 2;
  width: auto; max-width: min(100%, calc(var(--w) * var(--u)));
  margin: 0;
}
.page .hero .hm.btn { width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); min-height: 52px; flex: none; }
.page .hero h1.hm { margin: 2px 0 4px; text-wrap: balance; }
.page .hero p.hm:not(.nw) { text-wrap: pretty; }                              /* no lone last word (the shorthand would also undo .nw) */
.page .hero .h-meta { flex-wrap: wrap; justify-content: center; row-gap: 6px; height: auto; }
.page .hero .hero-card,
.page .hero [class*="hero-banner"] { inset: 10px; left: 10px; right: 10px; top: 10px; bottom: 10px; border-radius: 24px; }
/* the copy sits on the bottom of the photo on a phone: a soft scrim keeps it legible */
.page .hero [class*="hero-banner"]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(28,23,19,.30) 0%, rgba(28,23,19,.06) 30%, rgba(28,23,19,.42) 62%, rgba(28,23,19,.80) 100%);
}
/* Home's cream ornaments (tablets; hidden on phones below): tucked into the screen
   edges above the copy, large enough to read as the pattern */
.page .hero .h-orn { width: 320px; height: 320px; top: 9%; }
.page .hero .h-orn--l { left: -170px; }
.page .hero .h-orn--r { right: -170px; }

/* ---------- footer (identical markup on every page) ---------- */
.page .footer.sec { padding: 56px var(--gut) 40px; gap: 4px; }
.page .footer .t.hk.k-ash { margin-top: 26px; margin-bottom: 4px; }          /* column labels */
.page .footer a.t { padding: 8px 0; min-width: 44px; }                        /* 36px+ tap rows, never a sliver */
.page .footer .foot-rule { margin: 30px 0 10px; }
.page .footer .t.hl.k-ash { margin-top: 2px; }
.page .footer .jm { white-space: nowrap; }                                    /* THE BODY on one line */

/* ---------- shared components (client edits 2026-10-28, scripts/site_kit.py) ---------- */
/* Coming Soon pill: keeps its button's height, sizes to its label */
.page .sec .btn-soon { width: auto; min-width: min(100%, calc(var(--w, 0) * var(--u))); padding: 0 22px; }
.page .soon-tag { height: 22px; padding: 0 10px 0 11.4px; font-size: 11px; letter-spacing: 1.4px; }   /* 11px: the phone text floor */
/* Cedar Rituals notice: one column, height from its content */
.page .sec .soon-note {
  width: 100%; height: auto;
  grid-template-columns: minmax(0, 1fr); row-gap: 14px;
  padding: 26px 22px 28px; border-radius: 18px;
}
.page .soon-note__head::before { width: 32px; margin-bottom: 14px; }
.page .soon-note__eyebrow { font-size: 22px; line-height: 26px; letter-spacing: 0.3px; }
.page .soon-note__lead { margin-top: 10px; font-size: 22px; line-height: 28px; letter-spacing: -0.3px; }
.page .soon-note__copy { padding-top: 0; }
.page .soon-note__copy p { font-size: 15.5px; line-height: 26px; }
.page .soon-note__copy p + p { margin-top: 12px; font-size: 15px; line-height: 24px; }
/* FAQ accordion (css/faq.css) takes the column; page files may refine it */
.page .sec--faq { min-height: 0; padding-bottom: 48px; }
.page .sec .faq { width: 100%; margin: 18px 0 0; }
.page .sec .faq-h { text-wrap: pretty; }
.page .sec .faq-item:first-child { border-top: 1px solid var(--hair); }
.page .sec .faq-q { gap: 20px; padding: 22px 0 21px; font-size: 22px; line-height: 28px; letter-spacing: -0.3px; }
.page .sec .faq-item.is-open .faq-q { padding-bottom: 12px; }
.page .sec .faq-q span { max-width: none; min-width: 0; }
.page .sec .faq-ic { width: 14px; height: 28px; margin-right: 4px; }
.page .sec .faq-a-in p { max-width: 560px; font-size: 15.5px; line-height: 27px; }
.page .sec .faq-a-in p + p { margin-top: 12px; }
.page .sec .faq-a-in p:last-child { margin-bottom: 24px; }

/* ---------- reveal: shorter travel on a small screen ---------- */
.page .reveal { transform: translate3d(0, 20px, 0); }
.page .reveal.is-above { transform: translate3d(0, -20px, 0); }
.page .reveal.is-visible, .page .reveal-img.is-visible { transform: none; }
/* performance (measured, phone at 4x CPU slowdown): hundreds of small text blocks sliding in
   and out cost Treatments 11.5% dropped frames; only headings and photos rise here, the rest
   of the copy fades (3.2%). Desktop keeps the full rise. */
.page .reveal:not(h1):not(h2), .page .reveal.is-above:not(h1):not(h2) { transform: none; }

/* ===========================================================================
   STICKY HEADER + MENU (js/header.js builds both; header.css hides the menu
   pieces on desktop). header.js sets --u inline on the bar from the hero, so
   the phone sizes here are written in px.
   =========================================================================== */
.site-hdr .h-pill { display: none; }
/* Arina 2026-10-27: the header sits lower on phones, clear of the hero card's top edge, and
   stays sticky (it was un-stuck for a while; the sticky Book now button below stays too) */
.site-hdr .h-logo, .site-hdr .h-logo--80 { left: 26px; top: 28px; width: 132px; height: 38px; }
.site-hdr .h-book, .site-hdr .h-book--80 {
  top: 28px; right: 70px; width: 72px; height: 38px;
  font-size: 13.5px; line-height: 1; letter-spacing: 0;
}
.site-hdr .h-book--blank { color: var(--ink); }   /* Figma's paper-on-paper label is unreadable as a phone's only Book button */
.site-hdr.is-scrolled .h-logo,
.site-hdr.is-scrolled .h-pill,
.site-hdr.is-scrolled .h-book { translate: none; }
.site-hdr-bg { left: 12px; right: 12px; top: 18px; height: 58px; border-radius: 20px; translate: 0 -8px; }   /* centred on the lowered row (28px + 38px tall) */

.hdr-burger {
  display: flex; position: absolute; top: 25px; right: 18px; width: 44px; height: 44px;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto;
  color: var(--paper); -webkit-tap-highlight-color: transparent;
}
.hdr-burger span { display: block; width: 22px; height: 1.5px; background: currentColor; border-radius: 1px; }
.hdr-burger span:last-child { width: 14px; margin-left: 8px; }
.site-hdr--paper .hdr-burger { color: var(--ink); }
.m-book-fab {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  position: fixed; z-index: 950; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  min-width: 200px; height: 56px; padding: 0 30px; border-radius: 999px;
  background: linear-gradient(135deg, #c98049 0%, #a8602f 55%, #8f4f25 100%);
  color: #fbf6ec; font: 500 16px/1 var(--hk); letter-spacing: .02em; text-decoration: none;
  box-shadow: 0 12px 28px -10px rgba(110, 52, 16, .55), 0 2px 6px rgba(40, 20, 8, .18), inset 0 1px 0 rgba(255, 236, 210, .35);
  opacity: 0; translate: -50% 24px; pointer-events: none;
  transition: opacity .35s ease, translate .45s cubic-bezier(.2,.7,.2,1);
  -webkit-tap-highlight-color: transparent;
}
.m-book-fab::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; rotate: 45deg; margin-left: 2px; }
.m-book-fab.is-on { opacity: 1; translate: -50% 0; pointer-events: auto; }
.m-book-fab:active { translate: -50% 1px; filter: brightness(.95); }
.m-book-fab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
html.menu-open .m-book-fab { opacity: 0; pointer-events: none; }
.hdr-burger:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; border-radius: 10px; }

.m-menu {
  display: flex; flex-direction: column;
  position: fixed; inset: 0; z-index: 1200;
  padding: 92px 28px calc(28px + env(safe-area-inset-bottom, 0px));
  background: var(--ink); color: var(--paper);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.m-menu.is-open { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.m-menu__logo { position: absolute; left: 18px; top: 13px; width: 132px; height: 38px; }
.m-menu__logo img { width: 100%; height: 100%; }
.m-menu__close {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px;
  border: 0; background: none; color: var(--paper); cursor: pointer; padding: 0;
}
.m-menu__close::before, .m-menu__close::after {
  content: ""; position: absolute; left: 11px; top: 21px; width: 22px; height: 1.5px; background: currentColor;
}
.m-menu__close::before { rotate: 45deg; }
.m-menu__close::after { rotate: -45deg; }
.m-menu__close:focus-visible, .m-menu a:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 6px; }
.m-menu__nav { display: flex; flex-direction: column; }
.m-menu__nav a {
  display: block; padding: 7px 0;
  font-family: var(--bk); font-size: 42px; line-height: 1.08; text-transform: uppercase;
  color: var(--paper);
  opacity: 0; translate: 0 14px;
  transition: opacity .45s ease, translate .55s cubic-bezier(.2,.7,.2,1), color .25s ease;
}
.m-menu__nav a[aria-current="page"] { color: #c98e5f; }
.m-menu.is-open .m-menu__nav a { opacity: 1; translate: 0 0; }
.m-menu.is-open .m-menu__nav a:nth-child(2) { transition-delay: .04s; }
.m-menu.is-open .m-menu__nav a:nth-child(3) { transition-delay: .08s; }
.m-menu.is-open .m-menu__nav a:nth-child(4) { transition-delay: .12s; }
.m-menu.is-open .m-menu__nav a:nth-child(5) { transition-delay: .16s; }
.m-menu.is-open .m-menu__nav a:nth-child(6) { transition-delay: .20s; }
.m-menu__book {
  display: flex; align-items: center; justify-content: center;
  margin-top: 34px; height: 56px; border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font-family: var(--hk); font-size: 15px;
}
.m-menu__meta { margin-top: auto; padding-top: 34px; display: flex; flex-direction: column; gap: 4px; }
.m-menu__meta p, .m-menu__meta a { font-family: var(--hk); font-weight: 300; font-size: 14px; line-height: 1.6; color: var(--stone); }
.m-menu__meta a { padding: 6px 0; }
.m-menu__orn { position: absolute; right: -90px; bottom: 90px; width: 220px; opacity: .14; pointer-events: none; }
html.menu-open, html.menu-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .m-menu, .m-menu__nav a { transition: none !important; }
}

/* phones: the hero's cream ornaments only read as stray pixels at the screen edge, and the
   location line drops its dot and stacks */
@media (max-width: 599px) {
  .page .sec .faq-q { font-size: 20px; }
  .page .hero .h-orn { display: none; }
  .page .hero .h-meta { flex-direction: column; gap: 6px; }
  .page .hero .h-meta i { display: none; }
}