/* ===========================================================================
   THE BODY — homepage
   Figma file LLya5fiYKelNuxkWBf5Dyy, frame 163:18 "Homepage fin" (1440 x 10921).

   SIZING MODEL (Arina's standing convention for Figma builds):
     --u  = page width / 1440       every length below the hero is
                                    calc(<figma px> * var(--u)): an exact,
                                    undistorted scale of Figma at any width.
     hero --u = min(width/1440, 100svh/876)
                                    the WHOLE 1440x876 hero frame fits inside
                                    exactly 100vh, never cropped. The card +
                                    photo stretch to the real hero edges; the
                                    nav is anchored top and full width, the copy
                                    and ornaments are anchored to the middle.
   100cqw (not 100vw) so the scrollbar doesn't skew the unit.

   Positioning helper: .a takes --x / --y / --w (Figma px, relative to its
   section) and is placed with left/top/width. Centring is left = centre -
   width/2 + text-align:center, never a transform: `transform` belongs to the
   reveal system (js/reveal.js).

   Letter-spacing only where Figma states it. Centred tracked text gets
   text-indent = letter-spacing, because CSS adds tracking after the last
   glyph and Figma does not.
   =========================================================================== */

@font-face {
  font-family: "Balkara";
  /* "Balkara Free Condensed - npoekmu.me" Regular, the exact face Figma uses.
     Copyright 2017 Svetlin Balezdrov & Ventsislav Yordanov, all rights
     reserved. FLAG: confirm the licence covers commercial web use before launch. */
  src: url("../fonts/balkara-free-condensed.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --paper:  #efeedf;   /* page + every light section */
  --ink:    #28211b;   /* headings, dark buttons, footer bg */
  --body:   #4a4038;   /* body copy */
  --mute:   #6d6155;   /* durations, small print */
  --clay:   #8f552c;   /* numbers, pill, ornaments */
  --stone:  #d0cfc0;   /* light copy on dark */
  --ash:    #a5a296;   /* footer labels */
  --walnut: #624931;   /* testimonials */
  --night:  #1c1713;   /* toolbox card */
  --hair:   #d3cdc4;   /* meta rules, hours rule */
  --hair2:  #d3d1c3;   /* pillar dividers, portrait border */

  --bk: "Balkara", "Cormorant SC", Georgia, serif;
  --hk: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --jo: "Jost", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--hk);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
p, h1, h2, h3 { margin: 0; font-weight: 400; }
a { color: inherit; text-decoration: none; }
img { display: block; border: 0; }

.page-container {
  container-type: inline-size;
  width: 100%;
  overflow-x: clip;
}
.page { --u: calc(100cqw / 1440); position: relative; width: 100%; }

/* ---------- section shell ---------- */
.sec { position: relative; width: 100%; height: calc(var(--h) * var(--u)); background: var(--paper); overflow: hidden; }

/* ---------- positioning + type helpers ---------- */
.a {
  position: absolute;
  left:  calc(var(--x) * var(--u));
  top:   calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
}
.hh { height: calc(var(--h) * var(--u)); }
.t {
  font-size:      calc(var(--fs) * var(--u));
  line-height:    calc(var(--lh) * var(--u));
  letter-spacing: calc(var(--ls, 0) * var(--u));
}
.c  { text-align: center; text-indent: calc(var(--ls, 0) * var(--u)); }
.r  { text-align: right; }
.up { text-transform: uppercase; }
.nw { white-space: nowrap; }

/* fonts — weight set on the element itself, never on a wrapper */
.bk { font-family: var(--bk); font-weight: 400; }
.hk { font-family: var(--hk); font-weight: 400; }
.hl { font-family: var(--hk); font-weight: 300; }
.jo { font-family: var(--jo); font-weight: 400; }
.jm { font-family: var(--jo); font-weight: 500; }

/* colours */
.k-ink    { color: var(--ink); }
.k-body   { color: var(--body); }
.k-mute   { color: var(--mute); }
.k-clay   { color: var(--clay); }
.k-paper  { color: var(--paper); }
.k-stone  { color: var(--stone); }
.k-ash    { color: var(--ash); }
.k-walnut { color: var(--walnut); }

/* photo frame: --h in Figma px, --r corner radius; the photo covers it
   unless a rule places it with Figma's own crop maths. */
.ph {
  height: calc(var(--h) * var(--u));
  border-radius: calc(var(--r, 0) * var(--u));
  overflow: hidden;
  background: #d8d4c4;
}
.ph > img { width: 100%; height: 100%; object-fit: cover; }
.ph > img.crop { position: absolute; left: var(--il, 0); top: var(--it); width: 100%; height: var(--ih); object-fit: fill; }

/* horizontal hairline that stays a true 1px */
.rule { position: absolute; height: 1px; }

/* pill buttons: box from Figma, label centred inside */
.btn {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  height: calc(var(--h) * var(--u));
  border-radius: 999px;
  white-space: nowrap;
}

/* ===========================================================================
   01 HERO — each page's hero frame (1440 x --hero-h: home 876, about 933),
   scaled by the hero --u so the whole frame fits 100svh.
   Horizontal: nav from the edges, copy from the centre (720).
   Vertical:   nav from the top, everything else from the middle (--hero-h/2).
   =========================================================================== */
.hero {
  --hero-h: 876;
  --u: min(calc(100cqw / 1440), calc(100vh / var(--hero-h)));
  position: relative; width: 100%; height: 100vh; overflow: hidden;
  background: var(--paper);
}
@supports (height: 100svh) {
  .hero { --u: min(calc(100cqw / 1440), calc(100svh / var(--hero-h))); height: 100svh; }
}
.hero-card {
  position: absolute;
  inset: calc(24 * var(--u));
  border-radius: calc(30 * var(--u));
  overflow: hidden;
  background: #d8d4c4;
}
.hero-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,23,19,.52) 0%, rgba(28,23,19,.3) 42%, rgba(28,23,19,.62) 78%, rgba(28,23,19,.88) 100%);
}

/* top-anchored: logo on the left margin, Book on the right margin, the nav
   pill centred in the gap between them (Figma: justify-between). */
.h-logo  { position: absolute; left: calc(56 * var(--u)); top: calc(53 * var(--u)); width: calc(194 * var(--u)); height: calc(56 * var(--u)); }
.h-logo img { width: 100%; height: 100%; }
.h-pill {
  position: absolute; top: calc(57 * var(--u));
  left: calc(50% - 187.5 * var(--u));         /* <- (250 + 1303)/2 - 488/2 at 1440 = 532.5 */
  width: calc(488 * var(--u)); height: calc(48 * var(--u));
  border: 1px solid var(--paper); border-radius: 999px;
  display: flex; align-items: center; gap: calc(40 * var(--u));
  padding: 0 calc(34 * var(--u));
}
.h-pill a { font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); white-space: nowrap; }
.h-pill a[aria-current="page"] { text-decoration: underline; text-underline-position: from-font; text-decoration-thickness: from-font; }
.h-book {
  position: absolute; top: calc(59 * var(--u)); right: calc(56 * var(--u));
  width: calc(81 * var(--u)); height: calc(44 * var(--u));
  background: var(--paper); border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u));
}

/* middle-anchored, centred: left = 50% + (x - 720)u, top = 50% + (y - hero-h/2)u */
.hm {
  position: absolute;
  left:  calc(50% + (var(--x) - 720) * var(--u));
  top:   calc(50% + (var(--y) - var(--hero-h) / 2) * var(--u));
  width: calc(var(--w) * var(--u));
}
.h-meta { display: flex; align-items: center; gap: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.h-meta span { margin-right: calc(-1.8 * var(--u)); }   /* Figma drops the trailing tracking */
.h-meta i { display: block; width: calc(3 * var(--u)); height: calc(3 * var(--u)); }
.h-meta i img { width: 100%; height: 100%; }
.h-cta { background: var(--paper); }

/* page-level ornaments (163:321 / 163:324), 523px, cream; hero clips them */
.h-orn { position: absolute; width: calc(523 * var(--u)); height: calc(523 * var(--u)); top: calc(50% + (var(--y) - var(--hero-h) / 2) * var(--u)); }
.h-orn img { width: 100%; height: 100%; }
.h-orn--l { left: calc(-206 * var(--u)); }
.h-orn--r { right: calc(-205 * var(--u)); }           /* <- 1440 - (1122 + 523) */

/* ===========================================================================
   SECTIONS 02–11
   =========================================================================== */
.ring img, .icon img, img.fill { width: 100%; height: 100%; }
.bq { margin: 0; }

/* 03 ritual cards: fixed Figma heights, clipped like the Figma frames */
.card { position: absolute; overflow: hidden; height: calc(var(--h) * var(--u)); width: calc(620 * var(--u)); }
.meta-rule { background: var(--hair); width: calc(620 * var(--u)); }

/* 05 cedar plank fills the section (pre-cropped to Figma's visible window) */
.plank { position: absolute; inset: 0; width: 100%; height: 100%; }
.clip { overflow: hidden; }
.row-rule { background: #4c4136; width: calc(1280 * var(--u)); }

/* 06b ornaments are cut by the 517px "Hero split" frame */
.split { position: absolute; overflow: hidden; height: calc(517 * var(--u)); }
.portrait { border: 1px solid var(--hair2); }
.pillar-rule { position: absolute; width: 1px; background: var(--hair2); }
.pill { background: var(--clay); gap: calc(10 * var(--u)); }

/* 06 toolbox: an inset rounded card, 1404 wide at x 18 */
.toolbox {
  position: absolute; left: calc(18 * var(--u)); top: 0;
  width: calc(1404 * var(--u)); height: calc(820 * var(--u));
  border-radius: calc(20 * var(--u)); overflow: hidden; background: var(--night);
}
.toolbox > .bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,23,19,.21) 0%, rgba(28,23,19,.02) 42%, rgba(28,23,19,.24) 100%),
              linear-gradient(90deg, rgba(28,23,19,.12) 0%, rgba(28,23,19,.12) 100%);
}

/* 10 visit */
.cta-dark { background: var(--ink); }
.cta-line { border: 1px solid var(--ink); }
.hours-rule { background: var(--hair); }

/* 11 footer */
.footer { background: var(--ink); }
.foot-rule { background: #3a3128; }

/* ===========================================================================
   SHARED COMPONENTS (client edits 2026-10-28), markup from scripts/site_kit.py
   =========================================================================== */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* "Coming Soon" pill: replaces a cedar booking button while bookings are paused
   (site_flags.CEDAR_BOOKING_OPEN). A <span>, not a link: no hover, no pointer, no focus.
   Same box and position as the button it replaces; the longer label may widen it. */
.btn-soon {
  width: auto; min-width: calc(var(--w, 0) * var(--u));
  padding: 0 calc(22 * var(--u));
  cursor: default; user-select: none; -webkit-user-select: none;
}
.btn-soon--light { background: transparent; border: 1px solid var(--hair); color: var(--mute); }
.btn-soon--dark  { background: rgba(246,241,231,.06); border: 1px solid rgba(246,241,231,.34); color: rgba(246,241,231,.82); }

/* small "Coming soon" tag set beside a price */
.soon-tag {
  display: inline-flex; align-items: center; height: calc(22 * var(--u));
  padding: 0 calc(10 * var(--u)) 0 calc(11.6 * var(--u));      /* + the trailing tracking */
  border: 1px solid var(--clay); border-radius: 999px; color: var(--clay);
  font-family: var(--hk); font-weight: 400; font-size: calc(10 * var(--u)); line-height: 1;
  letter-spacing: calc(1.6 * var(--u)); text-transform: uppercase; white-space: nowrap;
}
.soon-tag.a { width: auto; }

/* Cedar Rituals "Coming Soon" notice: a paper card with a fine clay rule.
   Desktop: two columns inside the box the builder places (--x/--y/--w/--h). */
.soon-note {
  display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  column-gap: calc(72 * var(--u)); align-items: start;
  padding: calc(40 * var(--u)) calc(48 * var(--u));
  background: #f6f5ec; border: 1px solid var(--hair); border-radius: calc(20 * var(--u));
  overflow: hidden;
}
.soon-note__head::before { content: ""; display: block; width: calc(40 * var(--u)); height: 1.5px; margin-bottom: calc(18 * var(--u)); background: var(--clay); }
.soon-note__eyebrow { text-wrap: balance; font-size: calc(26 * var(--u)); line-height: calc(30 * var(--u)); letter-spacing: calc(0.4 * var(--u)); }
.soon-note__lead { margin-top: calc(12 * var(--u)); font-size: calc(26 * var(--u)); line-height: calc(32 * var(--u)); letter-spacing: calc(-0.5 * var(--u)); }
.soon-note__copy { padding-top: calc(19.5 * var(--u)); }
.soon-note__copy p { font-size: calc(16 * var(--u)); line-height: calc(28 * var(--u)); }
.soon-note__copy p + p { margin-top: calc(14 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(24 * var(--u)); }

/* hover: links and buttons only, nothing that moves layout */
a { transition: opacity .25s ease; }
a:hover { opacity: .72; }

/* ===========================================================================
   SCROLL REVEAL — elements fade/rise in as they enter and fade back out as
   they leave, in either direction (js/reveal.js toggles the classes).
   .rv = text/graphics (rise), .ph = photos (rise + settle), .rvf = fade only.
   =========================================================================== */
.reveal {
  opacity: 0;
  transform: translate3d(0, calc(28 * var(--u)), 0);
  transition: opacity .9s cubic-bezier(.22,.7,.25,1), transform .9s cubic-bezier(.22,.7,.25,1);
}
.reveal.is-above { transform: translate3d(0, calc(-28 * var(--u)), 0); }
.reveal-img {
  opacity: 0;
  transform: translate3d(0, calc(44 * var(--u)), 0) scale(.965);
  transition: opacity 1.05s cubic-bezier(.22,.7,.25,1), transform 1.05s cubic-bezier(.22,.7,.25,1);
}
.reveal-img.is-above { transform: translate3d(0, calc(-44 * var(--u)), 0) scale(.965); }
.reveal-img > img { transition: scale 1.6s cubic-bezier(.22,.7,.25,1); }
.reveal-img:not(.is-visible) > img { scale: 1.08; }
.reveal-fade { opacity: 0; transition: opacity 1.1s ease; }
.reveal.is-visible, .reveal-img.is-visible { opacity: 1; transform: none; }
.reveal-fade.is-visible { opacity: 1; }

/* a service row (Book quick picker, Treatments price list) that books online (site_flags.SERVICE_LINKS) is a link
   in place - same look as the other rows, a hairline underline only on hover / keyboard focus */
.pick-link {
  color: inherit;
  text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: text-decoration-color .2s ease;
}
.pick-link:hover, .pick-link:focus-visible { opacity: 1; text-decoration-color: currentColor; }
.pick-link:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-img, .reveal-fade, .reveal-img > img { opacity: 1 !important; transform: none !important; scale: none !important; transition: none !important; }
}