/* ==========================================================================
   REJUVENATION MASSAGE & DAY SPA — design system
   Botanical apothecary x luxury day spa x herbal-encyclopedia editorial.
   ========================================================================== */

:root {
  /* -- Material palette ----------------------------------------------------
     One color world. Every surface, every text color, every botanical grade
     is derived from these nine values — nothing outside this set. -------- */
  --ink: #111713;              /* primary ink — near-black, green undertone */
  --ink-soft: #34372f;         /* soft ink — raised dark surface */
  --forest-deep: #17251d;      /* deep forest */
  --forest: #21362a;           /* rich forest */
  --ivory: #eee6d5;            /* warm ivory */
  --paper: #e7dcc7;            /* paper */
  --herbal: #66715e;           /* muted herbal green */
  --brass: #b08a4a;            /* aged brass */
  --brass-dim: #806331;        /* dark brass */
  --brass-bright: #c6a066;     /* lightened aged brass — hover/accent only, still brass, never peach */
  --brass-gradient: linear-gradient(120deg, #9b7650, #d4b07a, #b48a59); /* tonal brass, not flat beige */
  --ink-deepest: #07100d;      /* darkest edge of any vignette/shadow — never pure black */
  --error: #9c4a3c;            /* muted terracotta — form error states, stays in the earthy family */

  --ink-line: rgba(238, 230, 213, 0.14);
  --ink-line-strong: rgba(238, 230, 213, 0.24);
  --on-ink: var(--ivory);           /* primary text on dark */
  --on-ink-soft: rgba(238, 230, 213, 0.72);
  --on-ink-faint: rgba(238, 230, 213, 0.58);

  --cream: var(--paper);
  --ink-on-paper: var(--ink);       /* primary text on light — same ink, no second dark hue */
  --ink-on-paper-soft: rgba(17, 23, 19, 0.72);
  --ink-on-paper-faint: rgba(17, 23, 19, 0.58);
  --paper-line: rgba(17, 23, 19, 0.14);
  --paper-line-soft: rgba(17, 23, 19, 0.08);

  --brass-ink: var(--brass-dim);    /* brass text on ivory (higher contrast) */

  /* -- Structure ----------------------------------------------------------- */
  --content-width: 1220px;
  --content-width-narrow: 800px;
  --section-space: clamp(72px, 9vw, 140px);
  --radius-sm: 3px;
  --radius-md: 14px;
  --radius-lg: 28px;

  --shadow-soft: 0 20px 50px rgba(10, 16, 12, 0.14);
  --shadow-deep: 0 46px 100px rgba(6, 12, 9, 0.38);
  --shadow-paper: 0 26px 60px rgba(30, 22, 10, 0.16);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 200ms var(--ease);
  --med: 380ms var(--ease);

  --font-serif: "Cormorant Garamond", serif;
  --font-sans: "DM Sans", sans-serif;

  /* -- Explicit scene stacking scale ---------------------------------------
     Every layered scene (hero, services, careers) is built from these same
     six planes. No ad hoc z-index values outside this scale. ------------- */
  --z-bg: 0;             /* scene texture / solid material */
  --z-bg-botanical: 1;   /* background botanical mass, low contrast */
  --z-photo: 2;          /* environmental photography */
  --z-mid-botanical: 3;  /* midground botanical framing, corners/edges */
  --z-content: 10;       /* cards, copy, typography, CTAs */
  --z-fg-botanical: 15;  /* foreground foliage overlapping content edges only */
  --z-chrome: 50;        /* scroll cues, in-scene controls */
}

/* ==========================================================================
   BOTANICAL GRADING — three treatments, no exceptions.
   Every decorative botanical image on the page wears exactly one of these.
   They exist specifically to strip stray pink/purple/blue/copper out of
   independently-generated art and pull everything into one color world.
   ========================================================================== */
.grade-gold {
  /* Treatment A — dark-section botanicals: engraved gold on black/forest. */
  filter: sepia(0.55) saturate(1.4) hue-rotate(-14deg) brightness(0.82) contrast(1.08);
}
.grade-herbarium {
  /* Treatment B — light-paper botanicals: faded antique herbarium plate. */
  filter: sepia(0.4) saturate(0.32) brightness(1) contrast(1.02);
  opacity: 0.85;
}
.grade-photo {
  /* Treatment C — photographic foliage: graded toward deep olive, never fluorescent. */
  filter: saturate(0.78) brightness(0.88) sepia(0.1) hue-rotate(-4deg) contrast(1.06);
}

/* ==========================================================================
   MACRO BOTANICAL MOTIF
   The large corner-cluster composition, reused (never identically) at major
   section transitions. --pull-x/--pull-y (set inline per placement) define
   how far the piece travels as its section scrolls through the viewport;
   --pull (0-1, written by JS) is the live scroll progress. Fully static
   without JS or with reduced motion — the composition itself never depends
   on the animation to look finished.
   ========================================================================== */
.macro-foliage {
  position: absolute;
  max-width: none;
  pointer-events: none;
  will-change: transform;
  transform:
    translate3d(calc(var(--pull, 0) * var(--pull-x, 0px)), calc(var(--pull, 0) * var(--pull-y, 0px)), 0)
    rotate(var(--pull-rotate, 0deg))
    scaleX(var(--pull-flip, 1));
}

/* ==========================================================================
   SCENE REVEAL SYSTEM
   Inert until JS confirms IntersectionObserver support and the visitor has
   not requested reduced motion — at which point `.scenes-armed` lands on
   <html> and these rules take effect. Without it, everything below is
   simply visible at rest: the page is fully usable with zero JS or motion.
   ========================================================================== */
.scenes-armed .reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(4px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease), filter 900ms var(--ease);
}
.scenes-armed .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.scenes-armed .reveal-botanical {
  opacity: 0;
  transform: translate(var(--reveal-x, 0), var(--reveal-y, 0)) scale(var(--reveal-scale, 1.03));
  transition: opacity 1100ms var(--ease), transform 1100ms var(--ease);
}
.scenes-armed .reveal-botanical.is-visible {
  opacity: var(--reveal-opacity, 1);
  transform: translate(0, 0) scale(1);
}

/* -- Reset ---------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  color: var(--ink-on-paper);
  background: var(--paper);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a.btn { cursor: pointer; }
.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;
}
:focus-visible {
  outline: 2px solid var(--brass-bright);
  outline-offset: 3px;
}
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.08;
  margin: 0;
}
p { margin: 0; }

.wrap {
  width: min(100% - 48px, var(--content-width));
  margin: 0 auto;
}

/* Every scene lands below the fixed floating nav when reached by anchor link. */
#services, #story, #reviews, #careers, #visit, #giftcards {
  scroll-margin-top: 100px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass-ink);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.on-ink .eyebrow { color: var(--brass-bright); }

.section-head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
.section-head h2 {
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  margin: 16px 0 14px;
}
.section-lede {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink-on-paper-soft);
}
.on-ink .section-lede { color: var(--on-ink-soft); }

/* -- Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 26px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform var(--fast), box-shadow var(--fast), background var(--fast), border-color var(--fast), color var(--fast);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primary on dark: aged brass fill, deep ink text. */
.btn-brass {
  background: var(--brass-gradient);
  color: var(--ink);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.18);
  border-color: rgba(238, 230, 213, 0.3);
}
.btn-brass:hover { box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.24), 0 0 18px rgba(185, 145, 90, 0.18); filter: brightness(1.06); }

/* Primary on light: deep forest fill, warm ivory text. */
.btn-forest {
  background: var(--forest);
  color: var(--ivory);
  box-shadow: 0 14px 30px rgba(17, 23, 19, 0.22);
  border-color: transparent;
}
.btn-forest:hover { background: var(--forest-deep); }

.btn-line {
  background: transparent;
  color: var(--ink-on-paper);
  border-color: var(--paper-line);
}
.btn-line:hover { border-color: var(--brass-ink); color: var(--brass-ink); }

.btn-line-on-ink {
  background: transparent;
  color: var(--on-ink);
  border-color: var(--ink-line-strong);
}
.btn-line-on-ink:hover { border-color: var(--brass-bright); color: var(--brass-bright); }

/* Secondary on dark glass: restrained brass border, no fill. */
.btn-outline-brass {
  background: transparent;
  color: var(--on-ink);
  border-color: rgba(190, 154, 104, 0.45);
}
.btn-outline-brass:hover { background: rgba(190, 154, 104, 0.1); border-color: rgba(190, 154, 104, 0.85); }

.btn-block { width: 100%; }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.nav {
  position: fixed;
  inset: 20px 20px auto;
  z-index: 90;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(100%, var(--content-width));
  margin: 0 auto;
  padding: 8px 12px 8px 18px;
  background: rgba(17, 23, 19, 0.94);
  border: 1px solid rgba(176, 138, 74, 0.28);
  border-radius: 999px;
  box-shadow: var(--shadow-soft), 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 22px 50px rgba(2, 5, 4, 0.4);
  backdrop-filter: blur(16px);
}
.nav-brand { display: inline-flex; align-items: center; }
.nav-brand-mark { width: 62px; height: 62px; }
.nav-links {
  display: flex;
  gap: 30px;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--on-ink-soft);
}
.nav-links a {
  position: relative;
  padding: 8px 0;
  transition: color var(--fast);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 2px;
  height: 1px;
  background: var(--brass-bright);
  transition: right var(--fast);
}
.nav-links a:hover,
.nav-links a:focus-visible { color: var(--on-ink); }
.nav-links a:hover::after,
.nav-links a:focus-visible::after { right: 0; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-actions .btn-brass { min-height: 42px; padding: 0 20px; font-size: 0.74rem; }
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--ink-line-strong);
  background: rgba(238, 230, 213, 0.06);
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
}
.nav-toggle span {
  width: 16px; height: 1px;
  background: var(--on-ink);
  transition: transform var(--fast), opacity var(--fast);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 85;
  padding: 128px 28px 40px;
  background: linear-gradient(180deg, rgba(14, 25, 20, 0.98), rgba(10, 18, 14, 0.99));
  transform: translateY(-100%);
  transition: transform var(--med);
  overflow-y: auto;
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu nav { display: grid; gap: 4px; margin-bottom: 32px; }
.mobile-menu a {
  padding: 18px 4px;
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--on-ink);
  border-bottom: 1px solid var(--ink-line);
}
.mobile-menu-actions { display: grid; gap: 16px; }
.mobile-menu .phone-link {
  text-align: center;
  color: var(--brass-bright);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  height: 220vh;
  background: var(--ink);
}
.hero-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.hero-stage {
  position: relative;
  width: 100%;
  height: 100%;
}
.hero-photo {
  position: absolute;
  inset: -4% -4%;
  background-size: cover;
  background-position: 50% 38%;
  z-index: var(--z-photo);
  will-change: transform;
}
.hero-haze {
  position: absolute;
  inset: 0;
  z-index: var(--z-photo);
  background:
    radial-gradient(ellipse 60% 55% at 50% 48%, rgba(7, 12, 9, 0.58), rgba(7, 12, 9, 0.16) 72%),
    radial-gradient(ellipse at 50% 15%, rgba(20, 33, 26, 0.06), rgba(15, 25, 19, 0.4) 70%),
    linear-gradient(180deg, rgba(10, 17, 13, 0.5) 0%, rgba(10, 17, 13, 0.06) 24%, rgba(10, 17, 13, 0.1) 60%, rgba(9, 15, 12, 0.85) 100%);
}
/* Layered grade, not a flat darken: stronger vignette at the outer edges,
   controlled warmth pooling toward the center, and a whisper of brass
   illumination behind where the card sits. */
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: var(--z-photo);
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 40% at 50% 46%, rgba(205, 170, 115, 0.06), transparent 70%),
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(58, 46, 28, 0.1), transparent 68%),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 44%, rgba(4, 8, 6, 0.5) 86%, rgba(3, 6, 5, 0.72) 100%);
}

/* -- LEFT WALL: the environment overtaking the edge --------------------- */
.hero-left-wall {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: min(46vw, 680px);
  pointer-events: none;
}
.wall-layer {
  position: absolute;
  max-width: none;
  will-change: transform;
}
/* The large corner cluster — lush, dominant, grounded at the bottom edge.
   One asset, confidently scaled, not several fragments layered together. */
.wall-base { left: -10%; bottom: -8%; width: 92%; opacity: 1; z-index: var(--z-mid-botanical); }

/* -- RIGHT: secondary, architectural, balancing -------------------------- */
.hero-leaf {
  position: absolute;
  z-index: var(--z-mid-botanical);
  pointer-events: none;
  will-change: transform;
}
.hero-leaf.grade-photo {
  filter: saturate(0.78) brightness(0.88) sepia(0.1) hue-rotate(-4deg) contrast(1.06) drop-shadow(0 30px 40px rgba(0,0,0,0.35));
}
.hero-leaf-tr { right: -7%; top: -9%; width: min(19vw, 300px); opacity: 0.6; }
.hero-leaf-br { right: -6%; bottom: -10%; width: min(20vw, 320px); opacity: 0.65; }

/* -- THE CARD: smoked glass, nothing botanical touches it ---------------- */
.hero-placard-wrap {
  position: absolute;
  inset: 0;
  z-index: var(--z-content);
  display: grid;
  place-items: center;
  padding: 24px;
}
.hero-placard {
  position: relative;
  width: clamp(320px, 58vw, 760px);
  max-height: 84vh;
  overflow: auto;
  padding: clamp(32px, 4.5vh, 64px) clamp(32px, 6vw, 60px);
  background: rgba(8, 18, 15, 0.72);
  backdrop-filter: blur(14px) saturate(0.85);
  -webkit-backdrop-filter: blur(14px) saturate(0.85);
  border: 1px solid rgba(190, 154, 104, 0.3);
  border-radius: 8px;
  box-shadow:
    0 30px 90px rgba(2, 5, 4, 0.5),
    0 0 34px rgba(185, 145, 90, 0.06),
    inset 0 1px rgba(255, 255, 255, 0.05);
  text-align: center;
}
.hero-placard::-webkit-scrollbar { display: none; }
.hero-placard-inner { position: relative; will-change: transform, opacity; }

/* Localized light behind the mark instead of a second rectangle — sized and
   centered to match .hero-mark exactly, however large it renders. */
.hero-mark-glow {
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -18%);
  width: calc(clamp(220px, 24vw, 300px) * 1.5);
  height: calc(clamp(220px, 24vw, 300px) * 1.5);
  background: radial-gradient(ellipse, rgba(205, 170, 115, 0.08), transparent 65%);
  pointer-events: none;
}
.hero-mark {
  position: relative;
  width: clamp(220px, 24vw, 300px);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0 auto 30px;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,0.45));
}
.hero-eyebrow {
  color: var(--brass-bright);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.hero-copy {
  max-width: 420px;
  margin: 0 auto 34px;
  color: rgba(238, 230, 213, 0.86);
  font-size: 1.1rem;
  line-height: 1.65;
  font-family: var(--font-serif);
  font-style: italic;
}
.hero-actions { display: flex; justify-content: center; align-items: stretch; gap: 14px; flex-wrap: wrap; }

/* ==========================================================================
   SERVICES — dark apothecary ledger
   ========================================================================== */
.services {
  position: relative;
  padding: var(--section-space) 0 calc(var(--section-space) + 20px);
  background: var(--ink);
  /* No overflow:hidden here — .category-panel below is position:sticky, and
     an ancestor with any overflow other than visible becomes a sticky
     element's containing block, which silently breaks real stickiness
     (it degrades to a constant offset instead of sticking on scroll).
     The decorative corner images are what overflow:hidden used to contain;
     that containment now lives on .services-botanical-frame instead, a
     sibling of .wrap that never sits in .category-panel's ancestor chain. */
}
.services-botanical-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.services::after {
  content: "";
  position: absolute; inset: 0;
  background: url("../assets/textures/charcoal-slate.jpg") center/cover;
  opacity: 0.16;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.services::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(102, 113, 94, 0.16), transparent 55%),
              linear-gradient(180deg, rgba(17,23,19,0.4), transparent 14%, transparent 84%, rgba(17,23,19,0.6));
  pointer-events: none;
}
.services .section-head h2 { color: var(--on-ink); }
.services .section-head .eyebrow { color: var(--brass-bright); }
.services .section-lede { color: var(--on-ink-soft); }

.canopy-corner {
  position: absolute;
  width: min(24vw, 300px);
  opacity: 0.7;
  z-index: var(--z-bg-botanical);
  pointer-events: none;
}
.canopy-corner-tl { top: -30px; left: -50px; }

/* MACRO placement: the top-left cluster rotated 180° so it grows from the
   opposite corner instead — marks the transition toward the next scene. */
.services-macro {
  bottom: -10%;
  right: -8%;
  width: min(28vw, 400px);
  opacity: 0.4;
  z-index: var(--z-bg-botanical);
  --pull-rotate: 180deg;
}

/* -- Services intro: asymmetric left copy + right apothecary category panel -- */
.services-intro {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
  margin-bottom: clamp(40px, 6vw, 64px);
}
.services-intro-copy {
  /* Grid items default to min-width:auto, which lets their content's
     intrinsic min-content size force the track wider than the
     minmax(0, ...) track definition intends. This is the actual overflow
     source — override the default so the track sizing is authoritative. */
  min-width: 0;
  max-width: 100%;
  padding-top: 8px;
}
.services-intro-copy h2 { font-size: clamp(2.4rem, 4vw, 3.6rem); margin: 16px 0 18px; color: var(--on-ink); }
.services-intro-copy .section-lede { max-width: 440px; margin-bottom: 30px; }
.services-intro-copy .btn { color: var(--on-ink); border-color: var(--ink-line-strong); }
.services-intro-copy .btn:hover { border-color: var(--brass-bright); color: var(--brass-bright); }

/* Right column of .services-intro: just the category chooser now — the
   results used to be nested in a wrapper here (.services-panel-col, now
   removed) so a sticky category panel could sit directly above them. That
   sticky behavior was removed (a panel spanning several rows will, by
   definition, sit visually in front of whatever scrolls beneath it once
   stuck), and with it went any reason to keep results confined to this
   ~51%-wide column: they're a full-width sibling of .services-intro below,
   see .services-results. */
.category-panel {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 100%;
  border: 1px solid rgba(176, 138, 74, 0.24);
  background:
    linear-gradient(180deg, rgba(238, 230, 213, 0.03), rgba(238, 230, 213, 0.03)),
    var(--ink);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 24px 60px rgba(2, 5, 4, 0.3);
}
.category-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-line);
  text-align: left;
  cursor: pointer;
  transition: background var(--fast);
}
.category-row:last-child { border-bottom: 0; }
.category-row:hover,
.category-row.active { background: rgba(176, 138, 74, 0.08); }
.category-icon {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  color: var(--brass);
  transition: color var(--fast);
}
.category-row:hover .category-icon,
.category-row.active .category-icon { color: var(--brass-bright); }
.category-copy { flex: 1 1 auto; min-width: 0; }
.category-copy strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--on-ink);
}
.category-copy small { display: block; margin-top: 2px; color: var(--on-ink-faint); font-size: 0.82rem; }
.category-arrow {
  flex: 0 0 auto;
  color: var(--on-ink-faint);
  transition: transform var(--fast), color var(--fast);
}
.category-row:hover .category-arrow,
.category-row.active .category-arrow { color: var(--brass-bright); transform: translateX(4px); }
.category-row:focus-visible { outline-offset: -3px; }

/* .services-results is the same element as .ledger — a full-width sibling
   of .services-intro, not nested inside its narrower column, so the
   editorial service list gets the site's normal full content width
   instead of being squeezed into ~51% of it with dead space alongside.
   Only one category ever renders here at a time now (no "all"
   pseudo-category), but a single category can still run from 3 rows to
   15, so this must never reserve height, clip, or force page-level
   overflow at any of those lengths. */
.ledger,
.services-results {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 0;
  overflow: visible;
}
.ledger-list {
  max-width: var(--content-width);
  min-width: 0;
  width: 100%;
  margin: 0 auto;
  display: grid;
  height: auto;
  overflow: visible;
  border-top: 1px solid var(--ink-line);
  scroll-margin-top: 110px;
}
.ledger-item {
  position: relative;
  min-width: 0;
  max-width: 100%;
  border-bottom: 1px solid var(--ink-line);
  padding: 30px 4px;
}
.ledger-summary {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  color: var(--on-ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px 24px;
}
.ledger-name {
  min-width: 0;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.3;
  overflow-wrap: break-word;
  transition: color var(--fast);
}
.ledger-price {
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--brass-bright);
  white-space: nowrap;
}
.ledger-meta {
  grid-column: 1 / -1;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-soft);
  margin-top: 2px;
}
.ledger-summary-copy {
  grid-column: 1 / -1;
  margin-top: 10px;
  max-width: 560px;
  color: var(--on-ink-soft);
  line-height: 1.7;
}
.ledger-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 18px;
}
.ledger-link {
  display: inline-block;
  background: none; border: 0; padding: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-ink-soft);
  border-bottom: 1px solid transparent;
  transition: color var(--fast), border-color var(--fast);
}
.ledger-link:hover { color: var(--on-ink); border-color: var(--ink-line-strong); }
.ledger-book {
  color: var(--brass-bright);
}
.ledger-book:hover { color: var(--brass-bright); border-color: var(--brass-bright); }
/* Fallback for services with no verified direct MangoMint booking URL yet —
   deliberately muted/neutral rather than brass, so it visually reads as a
   different, temporary action instead of a direct booking link. */
.ledger-book-call {
  color: var(--on-ink-soft);
}
.ledger-book-call:hover { color: var(--on-ink); border-color: var(--ink-line-strong); }
.ledger-specimen {
  position: absolute;
  right: -84px;
  top: 50%;
  transform: translateY(-50%) rotate(6deg);
  width: 110px;
  opacity: 0.32;
  pointer-events: none;
  z-index: var(--z-bg-botanical);
}

/* Render-driven fade for category switches — intentionally NOT the
   scroll-percentage .reveal system (see #services-results in the HTML for
   why). Opacity/transform only, never height, and the container never
   depends on this to have its final size — is-entered simply un-hides
   content that is already correctly laid out underneath. */
@media (prefers-reduced-motion: no-preference) {
  .ledger-list .ledger-item {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 420ms var(--ease), transform 420ms var(--ease);
  }
  .ledger-list.is-entered .ledger-item {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   EDITORIAL — "A place to exhale"
   ========================================================================== */
.editorial {
  position: relative;
  padding: var(--section-space) 0;
  background: var(--paper);
  overflow: hidden;
}
.editorial::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../assets/textures/ivory-paper.jpg") center/900px;
  opacity: 0.22;
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* MACRO placement: large corner cluster bleeding from the upper-right of the
   whole section — sits behind the content, never over the heading or photo. */
.editorial-macro {
  top: -8%;
  right: -8%;
  width: min(30vw, 440px);
  opacity: 0.5;
  z-index: var(--z-bg-botanical);
}
/* Printed-into-the-paper botanical drawing. Feathered on all four edges via
   mask so no rectangle, crop line, or background color is ever visible —
   it simply fades into the ivory before it reaches its own edge. */
.editorial-imprint {
  position: absolute;
  z-index: var(--z-bg-botanical);
  top: -6%;
  right: -8%;
  width: min(30vw, 440px);
  opacity: 0.16;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 45%, black 35%, transparent 72%);
          mask-image: radial-gradient(ellipse 62% 62% at 50% 45%, black 35%, transparent 72%);
}
.editorial-grid {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
}
.editorial-frame {
  position: relative;
  min-width: 0;
}
.editorial-copy { min-width: 0; }
.editorial-photo {
  width: 100%;
  border-radius: 2px;
  box-shadow: var(--shadow-paper);
}
.editorial-frame::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid var(--paper-line);
  border-radius: 2px;
  z-index: -1;
}
.editorial-specimen {
  position: absolute;
  width: 108px;
  z-index: var(--z-fg-botanical);
  filter: drop-shadow(0 14px 16px rgba(20,15,5,0.16));
}
.editorial-specimen-1 { left: -34px; bottom: -30px; }
.editorial-copy .eyebrow { margin-bottom: 18px; }
.editorial-copy h2 {
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  margin-bottom: 20px;
}
.editorial-copy > p {
  max-width: 480px;
  line-height: 1.8;
  color: var(--ink-on-paper-soft);
  font-size: 1.05rem;
}
.benefits {
  margin-top: 40px;
  display: grid;
  gap: 0;
}
.benefits article {
  padding: 20px 0;
  border-top: 1px solid var(--paper-line);
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
}
.benefits article:last-child { border-bottom: 1px solid var(--paper-line); }
.benefits article span {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--brass-ink);
}
.benefits strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.benefits p { color: var(--ink-on-paper-soft); line-height: 1.7; }

/* ==========================================================================
   REVIEWS — apothecary cabinet
   ========================================================================== */
.reviews {
  position: relative;
  padding: var(--section-space) 0;
  background: var(--forest-deep);
  overflow: hidden;
}
.reviews::after {
  content: "";
  position: absolute; inset: 0;
  background: url("../assets/textures/forest-plaster.jpg") center/cover;
  opacity: 0.14;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.reviews::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(102,113,94,0.16), transparent 60%);
  pointer-events: none;
}
.reviews-head { position: relative; z-index: var(--z-content); margin-bottom: 56px; }
.reviews-head .eyebrow, .reviews-head h2 { color: var(--on-ink); }
.reviews-head .eyebrow { color: var(--brass-bright); }
.reviews-head .section-lede { color: var(--on-ink-soft); }
.review-stat {
  margin-top: 18px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-sans);
}
.review-stat-score { font-size: 1.05rem; font-weight: 700; color: var(--on-ink); }
.review-stat-star { color: var(--brass-bright); font-size: 0.95rem; }
.review-stat-count { font-size: 0.88rem; color: var(--on-ink-soft); letter-spacing: 0.02em; }

.cabinet {
  position: relative;
  z-index: var(--z-content);
  max-width: var(--content-width);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 40px);
  border-radius: var(--radius-md);
  background: linear-gradient(rgba(17,23,19,0.72), rgba(17,23,19,0.72)), url("../assets/textures/ebonized-wood-gold-line.jpg") center/cover;
  border: 1px solid rgba(176, 138, 74, 0.28);
  box-shadow: var(--shadow-deep), inset 0 1px rgba(255, 255, 255, 0.04), 0 0 18px rgba(185, 145, 90, 0.05);
}
.cabinet-shell {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}
.cabinet-cubby {
  position: relative;
  min-width: 0;
  min-height: 300px;
  padding: 3px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(215,172,107,0.5), rgba(120,90,50,0.25));
  box-shadow: 0 2px 0 rgba(255,255,255,0.06);
}
.cabinet-cubby-inner {
  position: relative;
  height: 100%;
  min-height: 294px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(6,10,8,0.9), rgba(10,16,13,0.96));
  box-shadow: inset 0 18px 30px rgba(0,0,0,0.55), inset 0 -4px 10px rgba(0,0,0,0.4);
  display: grid;
  place-items: center;
  padding: 20px;
  overflow: hidden;
}
.cubby-note {
  width: 100%;
  height: 100%;
  padding: 30px 26px;
  background:
    linear-gradient(rgba(231, 220, 199, 0.9), rgba(231, 220, 199, 0.9)),
    url("../assets/paper/torn-paper-card.png") center/cover no-repeat;
  background-blend-mode: multiply;
  border: 1px solid rgba(176, 138, 74, 0.3);
  display: grid;
  align-content: center;
  gap: 14px;
  text-align: center;
  overflow-y: auto;
  box-shadow: 0 14px 26px rgba(0,0,0,0.32), inset 0 0 0 1px rgba(255,255,255,0.05);
  transition: opacity 460ms var(--ease), transform 460ms var(--ease);
}
.cubby-note::-webkit-scrollbar { width: 4px; }
.cubby-note::-webkit-scrollbar-thumb { background: rgba(176, 138, 74, 0.3); border-radius: 2px; }
.cubby-note.leaving { opacity: 0; transform: translateY(8px) scale(0.98); }
.cubby-note .stars { color: var(--brass-dim); letter-spacing: 0.16em; font-size: 0.95rem; }
.cubby-note blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.14rem;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.92;
}
.cubby-note blockquote p { margin: 0 0 10px; }
.cubby-note blockquote p:last-child { margin-bottom: 0; }
.cubby-expand {
  justify-self: center;
  background: none;
  border: 0;
  padding: 2px 0;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-dim);
  border-bottom: 1px solid rgba(128, 99, 49, 0.35);
  cursor: pointer;
  transition: color var(--fast), border-color var(--fast);
}
.cubby-expand:hover { color: var(--brass-ink); border-color: var(--brass); }
.cubby-note figcaption {
  display: grid;
  gap: 4px;
}
.cubby-note figcaption strong {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-on-paper-soft);
}
.cubby-note figcaption span {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-on-paper-faint);
}
.cabinet-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 26px;
}
.cabinet-arrow {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--ink-line-strong);
  background: transparent;
  color: var(--brass-bright);
  font-size: 1.1rem;
  display: grid;
  place-items: center;
  transition: border-color var(--fast), background var(--fast);
}
.cabinet-arrow:hover { border-color: var(--brass-bright); background: rgba(215,172,107,0.08); }
.cabinet-dots { display: flex; gap: 8px; }
.cabinet-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 0;
  background: var(--ink-line-strong);
  transition: background var(--fast), transform var(--fast);
}
.cabinet-dot.active { background: var(--brass-bright); transform: scale(1.3); }

.review-actions {
  position: relative; z-index: var(--z-content);
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.review-actions .btn-line { color: var(--on-ink); border-color: var(--ink-line-strong); }
.review-actions .btn-line:hover { color: var(--brass-bright); border-color: var(--brass-bright); }

/* ==========================================================================
   CAREERS
   ========================================================================== */
.careers {
  position: relative;
  padding: var(--section-space) 0;
  background: linear-gradient(120deg, var(--forest-deep) 0%, var(--ink) 65%);
  overflow: hidden;
}
/* One composition, one side, bleeding off the edge rather than floating fully in view. */
.careers-foliage-frame {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(38vw, 460px);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,0.9) 30%, black 55%);
          mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,0.9) 30%, black 55%);
}
.careers-foliage {
  position: absolute;
  max-width: none;
}
/* Back layer: a thin gold vertical line drawing, further back and dimmer. */
.careers-foliage-back {
  top: -60px;
  right: 60px;
  width: 220px;
  opacity: 0.4;
  z-index: var(--z-bg-botanical);
}
/* Front layer: the real foliage mass, closer and stronger. */
.careers-foliage-front {
  top: -8%;
  right: -22%;
  width: 620px;
  opacity: 0.88;
  z-index: var(--z-mid-botanical);
}
.careers-grid {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: minmax(0, 640px) 1fr;
  gap: 40px;
  align-items: center;
}
.careers-copy { min-width: 0; }
.careers-copy .eyebrow { color: var(--brass-bright); margin-bottom: 18px; }
.careers-copy h2 {
  color: var(--on-ink);
  font-size: clamp(2.3rem, 4vw, 3.4rem);
  margin-bottom: 20px;
  max-width: 560px;
}
.careers-copy p {
  color: var(--on-ink-soft);
  line-height: 1.8;
  max-width: 500px;
  font-size: 1.05rem;
}
.careers-action { margin-top: 34px; }

/* ==========================================================================
   CAREERS APPLICATION PAGE (careers/) — a standalone page, not a
   homepage section, but built from the same tokens/classes as the rest of
   the site so it reads as part of it: same nav, same footer, same dark
   botanical hero treatment as .careers above, same foliage assets. The
   form itself sits on a light paper card (reusing the existing .field
   system unchanged) rather than redesigning every input for a dark
   background — the same "card floating on a dark section" pattern the
   homepage already uses elsewhere (e.g. the reviews cabinet).
   ========================================================================== */
.careers-page-hero {
  position: relative;
  padding: clamp(140px, 18vw, 190px) 0 clamp(70px, 8vw, 100px);
  background: linear-gradient(120deg, var(--forest-deep) 0%, var(--ink) 65%);
  overflow: hidden;
}
.careers-page-hero-inner {
  position: relative;
  z-index: var(--z-content);
  max-width: 620px;
}
.careers-page-hero-inner .eyebrow { color: var(--brass-bright); margin-bottom: 18px; }
.careers-page-hero-inner h1 {
  color: var(--on-ink);
  font-size: clamp(2.6rem, 5vw, 4rem);
  margin-bottom: 16px;
}
.careers-page-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--brass-bright);
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 22px;
}
.careers-page-hero-inner .section-lede {
  color: var(--on-ink-soft);
  line-height: 1.8;
  max-width: 560px;
}

.careers-page-form-section {
  position: relative;
  padding: clamp(56px, 8vw, 96px) 0 var(--section-space);
  background: var(--ink);
}
.careers-form-panel {
  position: relative;
  z-index: var(--z-content);
  max-width: 720px;
  margin: 0 auto;
  background: var(--paper);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-deep);
  padding: clamp(28px, 5vw, 56px);
}
.careers-form-panel .policy-body { max-width: none; margin: 0; }

/* ==========================================================================
   VISIT / CONTACT / BOOKING
   ========================================================================== */
.visit {
  position: relative;
  padding: clamp(64px, 7vw, 100px) 0;
  background: var(--paper);
  overflow: hidden;
}
.visit::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../assets/textures/linen.jpg") center/700px;
  opacity: 0.16;
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* One herbarium specimen, one corner, cropped rather than floating whole. */
.visit-specimen-frame {
  position: absolute;
  top: -6%; left: -4%;
  width: 200px;
  height: 46%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.5;
}
.visit-specimen {
  position: absolute;
  width: 220px;
  max-width: none;
  left: -50px;
  top: -30px;
  filter: drop-shadow(0 14px 16px rgba(20,15,5,0.14));
}

.visit-grid {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 44px;
}
.visit-copy { min-width: 0; }
.visit-mark { width: 64px; height: auto; margin-bottom: 20px; }
.visit-copy h2 {
  font-size: clamp(2.1rem, 3.6vw, 3.2rem);
  margin-bottom: 16px;
  max-width: 520px;
}
.visit-copy > p.section-lede {
  max-width: 540px;
  margin-bottom: 36px;
}
.visit-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--paper-line);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 30px;
}
.visit-detail {
  background: var(--paper);
  padding: 24px 26px;
}
.visit-detail.span-2 { grid-column: 1 / -1; }
.visit-detail strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: var(--brass-ink);
}
.visit-detail p, .visit-detail a, .visit-detail address {
  margin: 0;
  color: var(--ink-on-paper-soft);
  line-height: 1.7;
  font-style: normal;
}
.visit-detail p + p { margin-top: 12px; }
.visit-detail a.phone { font-weight: 700; color: var(--ink-on-paper); font-size: 1.1rem; }
.visit-detail-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass-ink);
  border-bottom: 1px solid rgba(128, 99, 49, 0.35);
}
.visit-detail-link:hover { color: var(--brass); border-color: var(--brass); }

.gift-panel {
  padding: 26px 28px;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  background: rgba(238, 230, 213, 0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.gift-panel strong { display: block; font-family: var(--font-serif); font-size: 1.15rem; margin-bottom: 4px; }
.gift-panel p { color: var(--ink-on-paper-soft); margin: 0; }

.visit-action {
  align-self: start;
  padding: 40px 34px;
  background: var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-deep), inset 0 1px rgba(255, 255, 255, 0.04);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.visit-action::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../assets/foliage/gold-corner-ornament.png") -50px -50px/200px no-repeat;
  opacity: 0.22;
  filter: sepia(0.55) saturate(1.4) hue-rotate(-14deg) brightness(0.75) contrast(1.08);
  pointer-events: none;
}
.visit-action .eyebrow { color: var(--brass-bright); margin-bottom: 14px; justify-content: center; }
.visit-action h3 {
  position: relative;
  color: var(--on-ink);
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  margin-bottom: 26px;
  line-height: 1.2;
}
.visit-action .btn { position: relative; width: 100%; margin-bottom: 14px; }
.visit-action .phone-line {
  position: relative;
  color: var(--on-ink-soft);
  font-size: 0.9rem;
}
.visit-action .phone-line a { color: var(--brass-bright); font-weight: 700; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  padding: 74px 0 30px;
  background: var(--ink);
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../assets/textures/charcoal-slate.jpg") center/cover;
  opacity: 0.14;
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* MACRO placement: the closing composition, mirrored and growing upward from
   the lower-left — the final chapter, balanced against the gold engraving
   in the opposite corner below. */
.footer-macro {
  left: -6%;
  bottom: -14%;
  width: min(30vw, 420px);
  opacity: 0.55;
  z-index: var(--z-bg-botanical);
  --pull-flip: -1;
}
/* One restrained gold engraving in one corner — not a banner across the whole footer. */
.footer-spill-frame {
  position: absolute;
  right: -6%; bottom: -30%;
  width: 340px;
  height: 220px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.4;
}
.footer-spill {
  position: absolute;
  bottom: 0; right: -20px;
  width: 460px;
  max-width: none;
}
.footer-inner {
  position: relative; z-index: var(--z-content);
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
  padding-bottom: 46px;
  border-bottom: 1px solid var(--ink-line);
}
.footer-inner > * { min-width: 0; }
.footer-brand-mark { width: 76px; height: auto; margin-bottom: 14px; }
.footer-brand p { color: var(--on-ink-faint); font-size: 0.88rem; max-width: 220px; line-height: 1.6; }
.footer-col-title {
  margin: 0 0 16px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-bright);
}
.footer-nav {
  display: grid;
  gap: 12px;
}
.footer-nav a {
  color: var(--on-ink-soft);
  font-size: 0.92rem;
  transition: color var(--fast);
}
.footer-nav a:hover { color: var(--brass-bright); }
.footer-address {
  font-style: normal;
  color: var(--on-ink-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}
.footer-phone {
  display: inline-block;
  margin-top: 10px;
  color: var(--on-ink);
  font-weight: 700;
  font-size: 0.95rem;
}
.footer-phone:hover { color: var(--brass-bright); }
.footer-hours {
  color: var(--on-ink-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}
.footer-hours + .footer-hours { margin-top: 12px; }
.footer-legal {
  position: relative; z-index: var(--z-content);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px 28px;
  flex-wrap: wrap;
  padding-top: 26px;
  color: var(--on-ink-faint);
  font-size: 0.8rem;
}
.footer-legal nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.footer-legal nav a {
  color: var(--on-ink-faint);
  transition: color var(--fast);
}
.footer-legal nav a:hover { color: var(--brass-bright); }

/* ==========================================================================
   BOOK NOW FLOAT + DRAWER
   ========================================================================== */
.book-float {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(calc(100% - 32px), 420px);
  z-index: 88;
}

.booking-drawer {
  position: fixed;
  inset: 0;
  z-index: 95;
  visibility: hidden;
  pointer-events: none;
}
.booking-drawer.open { visibility: visible; pointer-events: auto; }
.drawer-backdrop {
  position: absolute; inset: 0; width: 100%; border: 0;
  background: rgba(9, 15, 12, 0.72);
  opacity: 0;
  transition: opacity var(--med);
}
.booking-drawer.open .drawer-backdrop { opacity: 1; }
.drawer-panel {
  position: absolute;
  right: 0; top: 0;
  width: min(480px, 100%);
  height: 100%;
  padding: 44px 40px;
  background: var(--paper) url("../assets/textures/ivory-paper.jpg") center/900px;
  transform: translateX(100%);
  transition: transform var(--med);
  box-shadow: -30px 0 80px rgba(0,0,0,0.24);
  overflow-y: auto;
}
.booking-drawer.open .drawer-panel { transform: translateX(0); }
.drawer-close {
  position: absolute; right: 22px; top: 20px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--paper-line);
  background: transparent;
  font-size: 20px;
  color: var(--ink-on-paper);
}
.drawer-panel h2 {
  margin: 20px 0 16px;
  font-size: clamp(1.9rem, 3vw, 2.4rem);
}
.drawer-panel > p {
  margin: 0 0 26px;
  line-height: 1.8;
  color: var(--ink-on-paper-soft);
}
.drawer-details {
  padding: 22px 22px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--paper-line);
  margin-bottom: 26px;
}
.drawer-details span {
  display: block; margin-bottom: 10px;
  color: var(--ink-on-paper-faint);
  letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.75rem;
}
.drawer-details strong { display: block; font-family: var(--font-serif); font-size: 1.25rem; }
.drawer-note { margin: 22px 0 0; color: var(--ink-on-paper-soft); line-height: 1.7; }
.drawer-note a { color: var(--ink-on-paper); font-weight: 700; }

/* -- Application form fields ------------------------------------------------ */
#careers-form { margin-top: 30px; }
.field { margin-bottom: 22px; text-align: left; }
.field label {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-ink);
  margin-bottom: 8px;
}
.field-optional { text-transform: none; letter-spacing: 0; color: var(--ink-on-paper-faint); font-size: 0.78rem; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--paper-line);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.field textarea { resize: vertical; min-height: 90px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(176, 138, 74, 0.15);
}
.field.is-invalid input,
.field.is-invalid select { border-color: var(--error); }
.field.is-valid input,
.field.is-valid select { border-color: rgba(102, 113, 94, 0.6); }
.field-error {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--error);
  min-height: 1.1em;
}
.field-hint { display: block; margin-top: 6px; font-size: 0.75rem; color: var(--ink-on-paper-faint); }

.file-field { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.file-field input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.file-field-button {
  flex: 0 0 auto;
  padding: 10px 18px;
  border: 1px solid var(--paper-line);
  border-radius: 2px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.5);
  transition: border-color var(--fast);
}
.file-field-button:hover { border-color: var(--brass); }
.file-field input[type="file"]:focus-visible + .file-field-button { outline: 2px solid var(--brass-bright); outline-offset: 2px; }
.file-field-name {
  font-size: 0.85rem;
  color: var(--ink-on-paper-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.form-status { margin-top: 18px; font-size: 0.9rem; line-height: 1.6; color: var(--ink-on-paper-soft); min-height: 1.4em; }
.form-status.is-error { color: var(--error); }
.form-status.is-success { color: var(--forest); }
#careers-submit[disabled] { opacity: 0.6; cursor: not-allowed; }
#careers-submit[disabled]:hover { transform: none; }

/* ==========================================================================
   POLICY PAGES (privacy / terms / accessibility / booking-policy)
   ========================================================================== */
.policy-page { background: var(--paper); min-height: 100vh; }
.policy-header {
  padding: 26px 0;
  border-bottom: 1px solid var(--paper-line);
}
.policy-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.policy-brand { display: inline-flex; align-items: center; gap: 12px; }
.policy-brand img { width: 42px; height: 42px; }
.policy-brand span {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--ink-on-paper);
}
.policy-back {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-ink);
  border-bottom: 1px solid rgba(128, 99, 49, 0.3);
}
.policy-back:hover { color: var(--brass); border-color: var(--brass); }

.policy-main { padding: clamp(56px, 8vw, 96px) 0 clamp(72px, 10vw, 120px); }
.policy-hero { max-width: 760px; margin: 0 auto clamp(40px, 6vw, 64px); }
.policy-hero h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); margin: 16px 0 14px; }
.policy-updated { color: var(--ink-on-paper-faint); font-size: 0.85rem; }

.policy-body { max-width: 720px; margin: 0 auto; }
.policy-body h2 {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 600;
  margin: 44px 0 14px;
  color: var(--ink-on-paper);
}
.policy-body h2:first-child { margin-top: 0; }
.policy-body h3 {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 26px 0 10px;
  color: var(--brass-ink);
}
.policy-body p {
  line-height: 1.85;
  color: var(--ink-on-paper-soft);
  margin: 0 0 16px;
  max-width: 62ch;
}
.policy-body ul, .policy-body ol {
  margin: 0 0 18px;
  padding-left: 22px;
  color: var(--ink-on-paper-soft);
  line-height: 1.8;
  max-width: 62ch;
}
.policy-body li { margin-bottom: 8px; }
.policy-body a {
  color: var(--ink-on-paper);
  font-weight: 700;
  border-bottom: 1px solid var(--paper-line);
}
.policy-body a:hover { color: var(--brass-ink); border-color: var(--brass); }
.policy-note {
  padding: 20px 24px;
  border: 1px solid var(--paper-line);
  background: rgba(255, 255, 255, 0.42);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  color: var(--ink-on-paper-soft);
  line-height: 1.75;
  margin: 8px 0 26px;
}
.policy-note strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brass-ink);
}

.policy-footer {
  padding: 40px 0;
  border-top: 1px solid var(--paper-line);
  text-align: center;
}
.policy-footer nav {
  display: flex;
  justify-content: center;
  gap: 10px 24px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  font-size: 0.85rem;
}
.policy-footer nav a { color: var(--ink-on-paper-soft); }
.policy-footer nav a:hover { color: var(--brass-ink); }
.policy-footer p { color: var(--ink-on-paper-faint); font-size: 0.8rem; margin: 0; }

/* ==========================================================================
   APPLICATION FORM (careers/apply) — extends the .field system already
   used site-wide with radio groups, checkboxes, and a dynamic helper line.
   ========================================================================== */
.field-helper {
  display: block;
  margin-top: 8px;
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-on-paper-soft);
}
.radio-group { display: flex; gap: 12px; flex-wrap: wrap; }
.radio-option {
  flex: 1 1 140px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border: 1px solid var(--paper-line);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: border-color var(--fast), background var(--fast);
}
.radio-option:has(input:focus-visible) { outline: 2px solid var(--brass-bright); outline-offset: 2px; }
.radio-option.is-checked,
.radio-option:has(input:checked) {
  border-color: var(--brass);
  background: rgba(176, 138, 74, 0.1);
}
.radio-option input[type="radio"] {
  width: 19px; height: 19px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--brass);
}
.radio-option span { font-size: 0.92rem; color: var(--ink); }
.field.is-invalid .radio-option { border-color: var(--error); }

/* Multi-select variant of .radio-group (schedule type, etc.) — same visual
   language, square checkboxes, any number can be checked at once. */
.checkbox-group { display: flex; gap: 12px; flex-wrap: wrap; }
.checkbox-option {
  flex: 1 1 140px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border: 1px solid var(--paper-line);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: border-color var(--fast), background var(--fast);
}
.checkbox-option:has(input:focus-visible) { outline: 2px solid var(--brass-bright); outline-offset: 2px; }
.checkbox-option.is-checked,
.checkbox-option:has(input:checked) {
  border-color: var(--brass);
  background: rgba(176, 138, 74, 0.1);
}
.checkbox-option input[type="checkbox"] {
  width: 19px; height: 19px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--brass);
}
.checkbox-option span { font-size: 0.92rem; color: var(--ink); }
.field.is-invalid .checkbox-option { border-color: var(--error); }

/* Groups the long application into scannable sections without changing the
   underlying .field system. */
.form-section {
  margin: 40px 0 22px;
  padding-top: 22px;
  border-top: 1px solid var(--paper-line);
}
.form-section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.form-section-title {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-ink);
  margin: 0 0 4px;
}
.form-section-hint { margin: 0 0 20px; font-size: 0.85rem; color: var(--ink-on-paper-faint); }

/* Conditional follow-up fields (licensing detail, "other" free text, a
   specific start date). Hidden via [hidden] when not applicable — never
   just visually collapsed, so they're skipped by validation and never
   submitted when irrelevant. A left rule ties them visually to the
   question that revealed them. */
.field-conditional {
  margin-top: -6px;
  margin-bottom: 22px;
  padding-left: 16px;
  border-left: 2px solid rgba(176, 138, 74, 0.3);
}
.field-conditional .field { margin-bottom: 16px; }
.field-conditional .field:last-child { margin-bottom: 0; }

.form-static-note {
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--ink-on-paper-faint);
  margin: 0 0 18px;
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
}
.checkbox-field input[type="checkbox"] {
  width: 20px; height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--brass);
}
.checkbox-field label {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-on-paper-soft);
}
.checkbox-field a { color: var(--ink-on-paper); font-weight: 700; border-bottom: 1px solid var(--paper-line); }
.checkbox-field a:hover { color: var(--brass-ink); border-color: var(--brass); }
.checkbox-field.is-invalid label { color: var(--error); }

.apply-form-shell { position: relative; }
.apply-success {
  display: none;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 0 8px;
}
.apply-success.is-visible { display: block; }
.apply-form.is-hidden { display: none; }
.apply-success-mark {
  width: 56px; height: 56px;
  margin: 0 auto 22px;
  border-radius: 50%;
  border: 1px solid rgba(128, 99, 49, 0.35);
  display: grid;
  place-items: center;
  color: var(--brass-ink);
  font-size: 1.5rem;
}
.apply-success h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 14px; }
.apply-success p { color: var(--ink-on-paper-soft); line-height: 1.8; margin-bottom: 28px; }
.apply-success-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

.hp-field {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .editorial-grid,
  .visit-grid,
  .careers-grid,
  .services-intro {
    grid-template-columns: 1fr;
  }
  .editorial-frame { order: -1; }
  .careers-foliage-frame { width: min(50vw, 320px); opacity: 0.7; --reveal-opacity: 0.7; }
  .footer-inner { grid-template-columns: 1fr 1fr; text-align: left; }
  .footer-brand { grid-column: 1 / -1; text-align: center; }
  .footer-brand p { margin: 0 auto; }
  .footer-legal { justify-content: center; text-align: center; }
}

@media (max-width: 900px) {
  .nav { inset: 14px 12px auto; }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .hero { height: 200vh; }
  .hero-left-wall { width: min(58vw, 420px); }
  .hero-leaf-tr, .hero-leaf-br { width: min(38vw, 260px); }
  .canopy-corner { width: 40vw; }
  /* MACRO placements shrink and dim — the botanical system stays present on
     tablet, just quieter, so it never crowds the content beneath it. */
  .services-macro { width: min(24vw, 260px); opacity: 0.3; }
  .editorial-macro { width: min(26vw, 280px); opacity: 0.35; }
  .footer-macro { width: min(26vw, 280px); opacity: 0.4; }
  .ledger-specimen { display: none; }
  .visit-specimen-frame { display: none; }
  .footer-spill-frame { width: 220px; height: 150px; }
  .cabinet-shell { grid-template-columns: 1fr; }
  .cabinet-cubby:nth-child(2),
  .cabinet-cubby:nth-child(3) { display: none; }
  .visit-details { grid-template-columns: 1fr; }
  .visit-detail.span-2 { grid-column: 1; }
  .book-float { display: flex; }
}

@media (max-width: 620px) {
  .wrap { width: min(100% - 36px, var(--content-width)); }
  .hero-placard { padding: 32px 26px; }
  .hero-mark { width: clamp(160px, 42vw, 220px); }
  .hero-left-wall { width: 46vw; opacity: 0.85; }
  .hero-leaf-tr, .hero-leaf-br { width: 30vw; opacity: 0.5; }
  .hero-copy { font-size: 1rem; }
  .hero-actions { display: grid; }
  .services, .reviews, .careers, .editorial, .visit { padding-top: 80px; padding-bottom: 80px; }
  /* On phones the macro pieces step back to a quiet corner tint rather than
     disappearing outright — the garden is still there, just resting. */
  .services-macro, .editorial-macro, .footer-macro { width: 34vw; opacity: 0.22; }
  .ledger-summary { grid-template-columns: 1fr; }
  .ledger-price { justify-self: start; }
  .ledger-actions { flex-direction: column; align-items: flex-start; gap: 14px; }
  .visit-action { padding: 32px 24px; }
  .radio-option { flex: 1 1 100%; }
  .checkbox-option { flex: 1 1 100%; }
  .apply-success-actions { display: grid; }
}

@media (max-width: 560px) {
  .footer-inner { grid-template-columns: 1fr; text-align: center; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 60ms !important; animation-duration: 60ms !important; }
  .hero-photo, .hero-leaf, .wall-layer, .hero-placard-inner, .macro-foliage { transform: none !important; will-change: auto; }
  /* No scroll-driven runway when motion is reduced — the hero becomes a single, still viewport. */
  .hero { height: auto; }
  .hero-pin { position: relative; height: 100vh; min-height: 640px; }
}

/* Same treatment for the JS-detected low performance tier (weak/old
   hardware, memory-constrained devices, or a poor connection) — script.js
   already skips writing transform/--pull updates to these elements on
   .perf-low, so there's nothing for the browser to keep a compositor
   layer ready for. Kept separate from the reduced-motion query above
   since this is a capability signal, not a stated motion preference. */
html.perf-low .hero-photo,
html.perf-low .hero-leaf,
html.perf-low .wall-layer,
html.perf-low .hero-placard-inner,
html.perf-low .macro-foliage {
  will-change: auto;
}