/* ===========================================================
   The Stillness Flow — shared site styles (every page links this)
   =========================================================== */
:root{
  --ink:       oklch(0.22 0.012 70);
  --ink-soft:  oklch(0.28 0.012 70);
  --paper:     oklch(0.972 0.008 75);
  --paper-2:   oklch(0.945 0.014 72);
  --paper-3:   oklch(0.905 0.018 70);
  --rule:      oklch(0.82 0.012 72);
  --muted:     oklch(0.42 0.010 70);
  --bronze:    oklch(0.66 0.07  55);
  --bronze-2:  oklch(0.56 0.07  55);
  --sage:      oklch(0.72 0.025 145);
  --navy:      oklch(0.34 0.055 264);   /* the logo's other tone */
  --accent:    var(--bronze-2);         /* per-section italic accent */
  --serif:     "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --script:    "Tangerine", "Snell Roundhand", cursive;
  --sans:      "Manrope", "Helvetica Neue", Helvetica, sans-serif;
  /* Small labels (nav, buttons, captions) use the sans face: the thin
     italic serif was too hard to read at small sizes. */
  --mono:      var(--sans);
  --max:       1240px;
  --pad:       clamp(20px, 4vw, 56px);
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
html{ scroll-behavior:auto; }
body{
  font-family: var(--sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.65;
  letter-spacing: 0;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
::selection{ background: var(--ink); color: var(--paper); }

/* ===========================================================
   Start / How it works — directly under hero
   =========================================================== */
.start{ background: var(--paper); padding-top: clamp(80px, 10vw, 130px); padding-bottom: clamp(80px, 10vw, 130px); }
.start-grid{
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: start;
}
.start-intro h2{ margin-top: 22px; }
.start-steps{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--rule);
}
.start-steps li{
  display: grid; grid-template-columns: 60px 1fr; gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}
.start-steps .k{
  font-family: var(--serif); font-style: italic; font-size: 28px;
  color: var(--bronze-2); line-height: 1; padding-top: 6px;
}
.start-steps h3{
  font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.2vw, 28px);
  margin: 0 0 10px; letter-spacing: -0.005em;
}
.start-steps p{ margin: 0; color: var(--ink-soft); max-width: 50ch; font-size: 18px; line-height: 1.55; }
.start-cta{
  margin-top: clamp(48px, 6vw, 80px);
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  padding: 28px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  text-decoration: none; color: var(--ink);
  transition: padding .35s ease;
}
.start-cta:hover{ padding-left: 14px; }
.start-cta .l{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.01em; color: var(--muted); }
.start-cta .v{ font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); font-style: italic; }
.start-cta .arr{ display: inline-block; transition: transform .3s; margin-left: 8px; }
.start-cta:hover .arr{ transform: translateX(8px); }
@media (max-width: 820px){
  .start-grid{ grid-template-columns: 1fr; }
  .start-cta{ grid-template-columns: 1fr; gap: 8px; }
}

/* ===========================================================
   Is-this-for-you band
   =========================================================== */
.fit-band{
  background: var(--paper);
  padding: clamp(80px, 10vw, 130px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.fit-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
}
.fit-col h3{
  font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); font-weight: 400;
  margin: 0 0 24px; letter-spacing: -0.008em;
}
.fit-col h3 .pill{
  display: inline-block; margin-right: 12px; padding: 5px 14px; border-radius: 999px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.01em;
  vertical-align: middle;
}
.fit-col--yes h3 .pill{ background: var(--ink); color: var(--paper); }
.fit-col--not h3 .pill{ border: 1px solid var(--rule); color: var(--muted); }
.fit-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.fit-list li{
  position: relative; padding-left: 38px;
  font-size: 18px; color: var(--ink-soft); line-height: 1.55;
}
.fit-list li::before{
  content: "—"; position: absolute; left: 0; top: 0;
  font-family: var(--serif); color: var(--bronze-2);
}
.fit-col--not .fit-list li{ color: var(--muted); }
.fit-col--not .fit-list li::before{ color: var(--rule); }
@media (max-width: 760px){ .fit-grid{ grid-template-columns: 1fr; } }

/* ===========================================================
   Layout primitives
   =========================================================== */
.wrap{ width:100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.eyebrow{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--bronze-2);
}
.eyebrow::before{
  content: ""; display:inline-block; width: 28px; height:1px;
  background: currentColor; vertical-align: middle; margin-right: 14px; opacity: .8;
}
.h-display{
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.012em;
}
.h-1{ font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.015em; margin: 0; }
.h-2{ font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1;  letter-spacing: -0.01em; margin: 0; }
.h-3{ font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2;  letter-spacing: -0.005em; margin: 0; }
.lede{ font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.35; color: var(--ink-soft); }
.italic{ font-style: italic; }
.muted{ color: var(--muted); }

/* Italic accents alternate between the two logo tones (bronze / navy),
   themed per section so the alternation reads intentional. */
#meditations, #contact, .band{ --accent: var(--navy); }
.h-1 .italic, .h-2 .italic{ color: var(--accent); }
.about .bio em{ color: var(--accent); }
.band .quote em{ color: var(--accent); }
.booking-intro em{ color: var(--accent); }
.approach-grid em{ color: var(--accent); }

.rule{
  height: 1px; background: var(--rule); border:0;
  margin: clamp(56px, 8vw, 120px) 0;
}

/* ===========================================================
   Progress bar + Nav
   =========================================================== */
#progress{
  position: fixed; top:0; left:0; right:0;
  height: 2px; background: var(--bronze);
  transform-origin: 0 50%; transform: scaleX(0);
  z-index: 60; transition: transform .08s linear;
}

/* Chapter rail — sticky side nav with roman numerals */
.rail{
  position: fixed;
  top: 50%; left: clamp(14px, 2vw, 28px);
  transform: translateY(-50%);
  z-index: 45;
  display: flex; flex-direction: column; gap: 14px;
  pointer-events: none;
  opacity: 0; transition: opacity .5s ease;
}
.rail.show{ opacity: 1; }
.rail a{
  pointer-events: auto;
  display: grid; grid-template-columns: 36px auto; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.01em;
  color: var(--ink); opacity: .42;
  transition: opacity .25s;
}
.rail a:hover{ opacity: 1; }
.rail a .num{ font-family: var(--serif); font-style: italic; font-size: 14px; letter-spacing: 0; opacity:.85; }
.rail a .name{
  opacity: 0; transform: translateX(-6px);
  transition: opacity .3s, transform .3s;
  white-space: nowrap;
}
.rail a:hover .name, .rail a.active .name{ opacity: 1; transform: translateX(0); }
.rail a.active{ opacity: 1; }
.rail a.active .num{ color: var(--bronze-2); }
.rail .tick{
  width: 18px; height: 1px; background: currentColor; opacity: .35;
  display: inline-block;
}
.rail a.active .tick{ background: var(--bronze); opacity: 1; width: 28px; }
@media (max-width: 980px){ .rail{ display: none; } }

/* Floating book CTA — appears past hero */
.float-cta{
  position: fixed; right: clamp(16px, 2.5vw, 28px); bottom: clamp(16px, 2.5vw, 28px);
  z-index: 55;
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--paper);
  padding: 14px 20px 14px 16px;
  border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.01em;
  box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
  opacity: 0; transform: translateY(20px);
  transition: opacity .5s, transform .5s, background .25s;
}
.float-cta.show{ opacity: 1; transform: translateY(0); }
.float-cta:hover{ background: var(--bronze-2); }
.float-cta .dot{
  width: 8px; height: 8px; border-radius: 50%; background: var(--bronze);
  box-shadow: 0 0 0 0 color-mix(in oklch, var(--bronze) 60%, transparent);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%, 100%{ box-shadow: 0 0 0 0 color-mix(in oklch, var(--bronze) 60%, transparent); }
  50%    { box-shadow: 0 0 0 10px color-mix(in oklch, var(--bronze) 0%,  transparent); }
}
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 50;
  padding: 22px var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  color: var(--ink);
  transition: background-color .4s ease, color .4s ease, backdrop-filter .4s ease;
}
.nav--solid{
  background: rgba(247,244,237, 0.86);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  color: var(--ink);
  border-bottom: 1px solid color-mix(in oklch, var(--ink) 8%, transparent);
}
.brand{
  display: flex; align-items: center; gap: 14px;
  font-family: var(--serif); font-size: 26px; letter-spacing: .01em;
}
.brand .mark{
  width: 31px; height: 33px;
  display: inline-flex; align-items: center; justify-content: center;
}
.brand .mark svg{ width: 100%; height: 100%; display: block; overflow: visible; }
.brand .mark .leaf-mark{
  transform-origin: 12px 14px;
  animation: leafBreath 9s ease-in-out infinite;
}
.brand .mark .leaf-left{ fill: #1e2740; }
.brand .mark .leaf-right{ fill: #b07d4a; }
.brand .mark .leaf-seam{
  stroke: color-mix(in oklch, var(--paper) 60%, transparent);
  stroke-width: 0.4; stroke-linecap: round; fill: none;
}
@keyframes leafBreath{
  0%, 100% { transform: rotate(-0.5deg) scaleY(1);    }
  50%      { transform: rotate( 0.5deg) scaleY(1.02); }
}
.brand .name{ font-weight: 500; white-space: nowrap; }
.brand .name em{ font-family: var(--script); font-style: normal; font-weight: 700; font-size: 1.3em; line-height: 1; opacity:.9; }
.nav-links{
  display: flex; gap: clamp(18px, 2.2vw, 34px);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.01em;
}
.nav-links a{ opacity: .82; transition: opacity .2s; }
.nav-links a:hover{ opacity: 1; }
.nav-cta{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.01em;
  padding: 10px 16px; border: 1px solid currentColor; border-radius: 999px;
  transition: background .25s, color .25s;
  white-space: nowrap;
}
.nav-cta:hover{ background: currentColor; color: var(--paper); }
.nav-cta:hover{ background: var(--ink); color: var(--paper); }
@media (max-width: 1180px){
  /* Below this width the larger nav links no longer fit beside the wordmark
     and CTA; the Menu button opens the full list instead. */
  .nav-links{ display: none; }
}

/* ===========================================================
   HERO — sticky 320vh frame, weather passes through
   =========================================================== */
/* HERO is a tall scroll-driven canvas. The .hero-sticky inside pins
   the 100vh "stage" so the wordmark stays still while the abstract
   horizon morphs through four scenes behind it. */
.hero{
  position: relative;
  height: 100vh; min-height: 680px;
  background: var(--paper);
  color: var(--ink);

  /* These CSS custom properties are written every frame by scene.js
     to drive the atmosphere. Defaults = the Mountain (dawn) palette. */
  --sky-top:    oklch(0.90 0.030 60);
  --sky-mid:    oklch(0.94 0.018 70);
  --sky-bot:    oklch(0.965 0.012 78);
  --silhouette: oklch(0.52 0.045 55);
  --silhouette-bg: oklch(0.74 0.030 60);
  --sun-x: 80%;
  --sun-y: 62%;
  --sun-color: oklch(0.86 0.080 65);
  --sun-opacity: 0.55;
  --cloud-opacity: 0.18;
}
.hero-sticky{
  position: relative;
  height: 100%; min-height: 680px;
  overflow: hidden;
}

/* --- Sky -------------------------------------------------------------- */
.sky{
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    var(--sky-top) 0%,
    var(--sky-mid) 55%,
    var(--sky-bot) 100%);
  transition: background 1200ms cubic-bezier(.4,.0,.2,1);
}

/* --- Sun / moon ------------------------------------------------------- */
.sun{
  position: absolute;
  left: var(--sun-x); top: var(--sun-y);
  width: clamp(140px, 22vmin, 280px);
  height: clamp(140px, 22vmin, 280px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      var(--sun-color) 0%,
      var(--sun-color) 28%,
      color-mix(in oklch, var(--sun-color) 38%, transparent) 50%,
      transparent 75%);
  opacity: var(--sun-opacity);
  filter: blur(2px);
  pointer-events: none;
  transition:
    left 1400ms cubic-bezier(.4,.0,.2,1),
    top 1400ms cubic-bezier(.4,.0,.2,1),
    opacity 1200ms ease,
    background 1200ms ease;
}

/* --- Clouds (always present, more visible at the Sky scene) ----------- */
.clouds{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: var(--cloud-opacity);
  transition: opacity 1200ms ease;
  pointer-events: none;
}
.clouds .cloud{ fill: oklch(0.99 0.005 80); }
/* Clouds hold position — only their opacity shifts with each season.
   (No left/right drift; the motion comes from the scene changes.) */
@keyframes cloud-drift-a {
  from { transform: translateX(-180px); } to { transform: translateX(1800px); }
}
@keyframes cloud-drift-b {
  from { transform: translateX(1800px); } to { transform: translateX(-380px); }
}
@keyframes cloud-drift-c {
  from { transform: translateX(-200px); } to { transform: translateX(1800px); }
}

/* --- Horizon: four silhouettes, all in one SVG, opacity-crossfaded ---- */
.horizon{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 55vh;
  max-height: 520px;
  display: block;
  pointer-events: none;
}
.horizon path{
  opacity: 0;
  transition: opacity 900ms ease, fill 1200ms ease;
}
.horizon .horizon__path{ fill: var(--silhouette); }
.horizon .horizon__bg{   fill: var(--silhouette-bg); }

/* --- Scrim behind the wordmark for crisp readability ------------------ */
.scrim{
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 50% 38%,
      color-mix(in oklch, var(--paper) 28%, transparent) 0%,
      color-mix(in oklch, var(--paper) 0%, transparent) 65%);
  pointer-events: none;
}
.hero-overlay{
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 104px var(--pad) 56px;
  pointer-events: none;
}
.hero-overlay > *{ pointer-events: auto; }
.hero-top{
  align-self: start;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 24px;
  /* Anchor the group toward the top so large screens don't get a big empty
     band of sky above the wordmark. Kept small so short laptops still fit the
     CTA above the mountains. */
  margin-top: clamp(14px, 4vh, 56px);
}
.hero-top .eyebrow{ color: var(--bronze-2); }
.hero-top .eyebrow::before{ background: var(--bronze-2); opacity:.8; }
.hero-wordmark{
  font-family: var(--serif);
  font-weight: 300;
  /* Size off the smaller of width/height so the wordmark shrinks on short
     viewports (e.g. landscape laptops) instead of pushing the CTA off-screen. */
  font-size: clamp(46px, min(9vw, 13.5vh), 128px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.hero-wordmark .stillness{ display:block; }
.hero-wordmark .flow{
  display:block; font-family: var(--script); font-style: normal; font-weight: 700;
  font-size: 1.6em; line-height: 0.9; color: var(--bronze-2);
  margin-top: 0.08em; padding-bottom: 0.14em;
  /* The cursive face leaves a tall empty line-box below the glyph; pull the
     following content (tagline + CTA) back up so the hero group stays together. */
  margin-bottom: -0.48em;
}
.hero-wordmark .amp{ font-family: var(--serif); font-style: italic; opacity:.7; font-weight: 300; padding: 0 .12em; }
.hero-tag{
  display: flex;
  margin: 0; flex-direction: column; align-items: center; gap: 11px;
  text-align: center;
}
.hero-tag__role{
  font-family: var(--sans); font-weight: 600;
  font-size: 21px; letter-spacing: 0.005em;
  color: var(--ink);
}
.hero-tag__line{
  max-width: 28ch;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 18px; line-height: 1.45;
  color: var(--bronze-2);
}
.hero-service{
  margin: 4px 0 0;
  max-width: 700px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.45;
  color: var(--ink);
}
.hero-service em{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--bronze-2);
  font-size: 1.08em;
}
.hero-sub{
  max-width: 580px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.45;
  color: var(--ink-soft);
  font-style: italic;
}
.hero-bottom{
  align-self: end;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
/* Per-scene words that drift in with each environment */
.scene-wisdom{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(19px, 2vw, 27px);
  line-height: 1.3; color: var(--ink-soft);
  text-align: center; max-width: 32ch;
  transition: opacity .7s ease;
}
.scene-wisdom em{ font-style: italic; color: var(--bronze-2); }
/* Scene indicator at hero bottom-center */
.scene-meter{
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--ink-soft);
}
.scene-meter .roman{
  font-family: var(--serif); font-style: italic; font-size: 17px;
  color: var(--bronze-2);
}
.scene-meter .name{
  font-family: var(--serif); font-style: italic; font-size: 16px;
  color: var(--ink); letter-spacing: 0.01em;
  transition: opacity .35s ease;
}
.scene-meter .ticks{
  display: flex; gap: 6px; margin-top: 6px;
}
.scene-meter .ticks span{
  width: 22px; height: 1px; background: var(--rule);
  transition: background .35s ease, transform .35s ease;
}
.scene-meter .ticks span.active{ background: var(--bronze); transform: scaleY(2.4); }
.scene-meter .ticks span.partial{ background: color-mix(in oklch, var(--bronze) 55%, var(--rule)); }

.scroll-cue{
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.01em;
  color: var(--muted);
}
.scroll-cue .line{
  width: 1px; height: 38px; background: currentColor; opacity:.5;
  animation: dripLine 2.4s ease-in-out infinite;
}
@keyframes dripLine{
  0%   { transform: scaleY(0); transform-origin: 0 0; opacity:.2; }
  40%  { transform: scaleY(1); transform-origin: 0 0; opacity:.6; }
  60%  { transform: scaleY(1); transform-origin: 0 100%; opacity:.6; }
  100% { transform: scaleY(0); transform-origin: 0 100%; opacity:.2; }
}
@media (max-width: 760px){
  .hero-bottom{ text-align:center; }
}

/* ===========================================================
   General reveal
   =========================================================== */
[data-reveal]{
  opacity: 0; transform: translate3d(0, 28px, 0);
  transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].in{ opacity: 1; transform: translate3d(0,0,0); }

[data-words] .word{
  display: inline-block;
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].in [data-words] .word,
[data-words].in .word,
[data-reveal] [data-words] .word{ /* will be overridden below */ }
[data-reveal].in [data-words] .word{ opacity:1; transform: translate3d(0,0,0); }

/* ===========================================================
   Section: Opening philosophy (warm cream, deeply spaced)
   =========================================================== */
.philosophy{
  background: var(--paper-2);
  color: var(--ink);
  padding: clamp(120px, 18vw, 220px) 0 clamp(140px, 20vw, 240px);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.philosophy .quote{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 5.2vw, 72px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  max-width: 18ch;
  margin: 0 auto;
  text-align: center;
}
.philosophy .quote em{ font-style: italic; color: var(--bronze-2); }
.philosophy .quote .small{ display:block; margin-top: 28px; font-size: 0.45em; letter-spacing: .04em; color: var(--muted); font-style: italic; }
.philosophy .floater{
  position: absolute; pointer-events: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.01em;
  color: var(--muted);
  opacity: .65;
}
.philosophy .floater--tl{ top: 8%; left: var(--pad); }
.philosophy .floater--br{ bottom: 8%; right: var(--pad); text-align: right; }

/* ===========================================================
   Section: Approach (paper)
   =========================================================== */
.section{ padding: clamp(100px, 14vw, 180px) 0; }
.section--paper{ background: var(--paper); }
.section--paper-2{ background: var(--paper-2); }
.section-head{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(24px, 6vw, 80px);
  align-items: end;
  margin-bottom: clamp(48px, 8vw, 96px);
}
.section-head .label{ display: flex; flex-direction: column; gap: 18px; }
.section-head .num{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.01em; color: var(--muted);
}
@media (max-width: 820px){
  .section-head{ grid-template-columns: 1fr; align-items: start; }
}

/* Approach split */
.approach-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 110px);
  align-items: start;
}
.approach-grid p{ font-size: 20px; color: var(--ink-soft); line-height: 1.55; }
.approach-grid p + p{ margin-top: 1.1em; }
.approach-quote{
  font-family: var(--serif);
  font-weight: 300; font-style: italic;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.25; letter-spacing: -0.005em;
  color: var(--ink);
  padding-left: 28px;
  border-left: 1px solid var(--rule);
}
.approach-quote .by{ display:block; margin-top: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.01em; color: var(--muted); font-style: normal; }
@media (max-width: 820px){
  .approach-grid{ grid-template-columns: 1fr; }
}

/* Approach — watercolor tree, two layers:
   trunk stays planted; canopy (upper branches + leaves) sways at the crotch
   and blooms from muted to full color as the section scrolls in. */
.approach-tree{ margin-top: clamp(44px, 6vw, 76px); }
.tree-stack{ position: relative; width: 100%; max-width: 300px; }
.tree-stack img{ display: block; width: 100%; height: auto; }
.tree-canopy{
  position: absolute; inset: 0;
  transform-origin: 50% 55.9%;            /* pivot at the trunk crotch */
  animation: canopySway 9s ease-in-out infinite;
  filter: saturate(0.1);                   /* muted; JS scrubs to full color on scroll */
  opacity: 0.5;
  transition: filter .25s linear, opacity .25s linear;
}
@keyframes canopySway{
  0%, 100%{ transform: rotate(-1.1deg); }
  50%{ transform: rotate(1.1deg); }
}
@media (max-width: 820px){
  .approach-tree{ display: flex; justify-content: center; }
  .tree-stack{ max-width: 240px; }
}
@media (prefers-reduced-motion: reduce){
  .tree-canopy{ animation: none; filter: saturate(1); }
}

/* ===========================================================
   Areas — what we work with
   =========================================================== */
.areas{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.area{
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(28px, 3.5vw, 44px) clamp(24px, 3vw, 36px);
  min-height: 220px;
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  background: transparent;
  transition: background .35s ease;
}
.area:hover{ background: color-mix(in oklch, var(--ink) 4%, transparent); }
.area .num{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.01em; color: var(--bronze-2);
}
.area h3{ font-family: var(--serif); font-size: clamp(22px, 2vw, 26px); font-weight: 400; margin:0; letter-spacing: -0.005em; }
.area p{ margin: 0; font-size: 18px; color: var(--ink-soft); line-height: 1.55; }
@media (max-width: 900px){ .areas{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .areas{ grid-template-columns: 1fr; } }

/* ===========================================================
   What we work with — the quiet flow of words
   =========================================================== */
.work-flow{ margin-top: clamp(28px, 3.5vw, 48px); margin-bottom: clamp(48px, 6vw, 76px); }
#work{ padding-bottom: clamp(80px, 10vw, 140px); }
.work-bloom{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  height: clamp(300px, 36vw, 400px); width: auto;
  z-index: 0; pointer-events: none;
  opacity: 0.7; mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 52%, #000 42%, transparent 86%);
          mask-image: radial-gradient(ellipse 60% 58% at 50% 52%, #000 42%, transparent 86%);
}
.work-bloom img{ display: block; height: 100%; width: auto; }
.flow-word{ z-index: 1; }
.work-flow .flow-cap{
  font-family: var(--mono);
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); text-align: center; margin: 0 0 clamp(10px, 1.5vw, 18px);
}
.work-flow .flow-cap b{ color: var(--ink-soft); font-weight: 600; letter-spacing: 0.04em; }
.flow-field{
  position: relative;
  height: clamp(300px, 36vw, 400px);
  max-width: 940px; margin: 0 auto;
}
.flow-word{
  position: absolute;
  transform: translate(-50%, -50%) translateY(9px);
  opacity: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 25px);
  letter-spacing: 0.01em;
  color: var(--muted);
  white-space: nowrap;
  transition: opacity 1.6s ease, transform 1.6s ease, color 1.6s ease;
  pointer-events: none;
}
.flow-word.show{ opacity: 1; transform: translate(-50%, -50%) translateY(0); }
.flow-word.lit{ color: var(--bronze-2); }
.flow-static{
  text-align: center; color: var(--muted);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(17px, 1.9vw, 21px); line-height: 2.1;
  max-width: 880px; margin: 0 auto;
}
/* Smaller drifting words on phones so long terms never overflow the edge */
@media (max-width: 560px){
  .flow-word{ font-size: 15px; }
}

/* ===========================================================
   Process — vertical steps
   =========================================================== */
.process{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(28px, 5vw, 60px);
  position: relative;
}
.process::before{
  content:""; position: absolute;
  left: 220px; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--rule) 12%, var(--rule) 88%, transparent);
}
.process .step{
  display: grid; grid-template-columns: subgrid; grid-column: 1 / -1;
  padding: clamp(28px, 4vw, 48px) 0;
  position: relative;
}
.process .step + .step{ border-top: 1px dashed color-mix(in oklch, var(--rule) 70%, transparent); }
.process .step .meta{
  display: flex; flex-direction: column; gap: 10px;
  padding-right: 30px;
}
.process .step .meta .n{
  font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--bronze-2);
}
.process .step .meta .t{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.01em; color: var(--muted);
}
.process .step .body{ padding-left: clamp(24px, 4vw, 60px); }
.process .step h3{ font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.7vw, 36px); margin: 0 0 14px; letter-spacing: -0.008em; }
.process .step p{ margin:0; color: var(--ink-soft); max-width: 56ch; font-size: 19px; line-height: 1.55; }
.process .step .dot{
  position: absolute; left: 217px; top: clamp(40px, 5vw, 56px);
  width: 7px; height: 7px; border-radius: 50%; background: var(--bronze);
}
@media (max-width: 820px){
  .process{ grid-template-columns: 1fr; }
  .process::before, .process .step .dot{ display: none; }
  .process .step .body{ padding-left: 0; padding-top: 12px; }
}

/* ===========================================================
   About — image slot + bio columns
   =========================================================== */
.about{
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.about .portrait{
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 420px;
  margin: 4px auto 0;
  border-radius: 18px;
  background: var(--paper-2);
  position: relative;
  overflow: hidden;
  box-shadow: 0 22px 50px -16px rgba(60,40,20,.26),
              0 4px 14px rgba(60,40,20,.08);
}
.about .portrait::before{
  content:""; position: absolute; inset:0;
  background-image: repeating-linear-gradient(
    135deg,
    color-mix(in oklch, var(--ink) 6%, transparent) 0 1px,
    transparent 1px 16px
  );
}
.about .portrait .label{
  position: absolute; bottom: 16px; left: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.01em;
  color: var(--muted); background: var(--paper); padding: 6px 10px;
}
.about .bio h2{ margin-bottom: 28px; }
.about .bio p{ font-size: 19px; color: var(--ink-soft); margin: 0 0 1.05em; line-height: 1.6; }
.about .bio .pull{
  font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.3; color: var(--ink); margin: 28px 0;
  padding: 22px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.signature{
  margin-top: 36px;
  font-family: var(--serif); font-style: italic; font-size: 28px; color: var(--ink);
  letter-spacing: -0.005em;
}
.signature .role{
  display: block; margin-top: 6px;
  font-family: var(--mono); font-style: normal; font-size: 11px; letter-spacing: 0.01em; color: var(--muted);
}
@media (max-width: 820px){
  .about{ grid-template-columns: 1fr; }
  .about .portrait{ max-width: 320px; }
}

/* Credentials strip */
.creds{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-top: clamp(60px, 9vw, 110px);
}
.creds .c{
  padding: 28px 24px;
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 8px;
}
.creds .c:last-child{ border-right: 0; }
.creds .c .big{ font-family: var(--serif); font-size: clamp(28px, 3vw, 40px); font-weight: 400; line-height: 1; letter-spacing: -0.01em; }
.creds .c .lbl{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.01em; color: var(--muted); }
@media (max-width: 820px){
  .creds{ grid-template-columns: repeat(2, 1fr); }
  .creds .c:nth-child(2){ border-right: 0; }
  .creds .c:nth-child(1), .creds .c:nth-child(2){ border-bottom: 1px solid var(--rule); }
}

/* ===========================================================
   Quiet quote band — warm sand
   =========================================================== */
.band{
  background: var(--paper-3);
  color: var(--ink);
  padding: clamp(120px, 18vw, 220px) 0;
  position: relative;
  overflow: hidden;
}
.band .bg-mark{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(220px, 38vw, 540px);
  line-height: 1.2;
  color: color-mix(in oklch, var(--ink) 6%, transparent);
  letter-spacing: 0;
  user-select: none;
  pointer-events: none;
}
.band .quote{
  position: relative; z-index: 2;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.22;
  letter-spacing: -0.008em;
  max-width: 22ch;
  margin: 0 auto;
  text-align: center;
}
.band .quote em{ font-style: italic; color: var(--bronze-2); }

/* ===========================================================
   FAQ
   =========================================================== */
.faq-list{
  border-top: 1px solid var(--rule);
}
.faq-item{
  border-bottom: 1px solid var(--rule);
  padding: clamp(20px, 2.5vw, 28px) 0;
}
.faq-q{
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: baseline;
  gap: 24px;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.faq-q .idx{ font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.01em; }
.faq-q .q{ font-family: var(--serif); font-size: clamp(22px, 2.3vw, 28px); font-weight: 400; letter-spacing: -0.005em; line-height: 1.3; }
.faq-q .plus{
  width: 22px; height: 22px; position: relative; justify-self: end; align-self: center; margin-top: 6px;
}
.faq-q .plus::before, .faq-q .plus::after{
  content:""; position: absolute; background: var(--ink);
}
.faq-q .plus::before{ left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); }
.faq-q .plus::after{ top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); transition: transform .35s ease; }
.faq-item.open .faq-q .plus::after{ transform: translateX(-50%) scaleY(0); }
.faq-a{
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s ease;
}
.faq-a > div{ overflow: hidden; }
.faq-item.open .faq-a{ grid-template-rows: 1fr; }
.faq-a p{
  margin: 18px 60px 8px;
  color: var(--ink-soft); max-width: 70ch;
  padding-left: 0;
  font-size: 18px; line-height: 1.6;
}
@media (max-width: 600px){
  .faq-q{ grid-template-columns: 24px 1fr 24px; gap: 14px; }
  .faq-a p{ margin: 16px 38px 4px; }
}

/* ===========================================================
   Contact / book
   =========================================================== */
.contact{
  background: var(--paper-2);
  padding: clamp(120px, 16vw, 200px) 0;
  position: relative;
  overflow: hidden;
}
.contact-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
.contact h2{ margin-bottom: 28px; }
.contact .lede{ max-width: 28ch; margin-bottom: 36px; }
.contact-form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
.contact-form .field{ display: flex; flex-direction: column; gap: 6px; }
.contact-form .field.full{ grid-column: 1 / -1; }
.contact-form label{
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.01em; color: var(--muted);
}
.contact-form input, .contact-form textarea, .contact-form select{
  font: inherit; color: var(--ink);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--rule);
  padding: 10px 0; outline: none;
  transition: border-color .25s;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{
  border-bottom-color: var(--ink);
}
.contact-form textarea{ resize: vertical; min-height: 90px; }
.contact-form .submit{
  margin-top: 22px;
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap;
}
.btn{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.01em;
  background: var(--ink); color: var(--paper);
  border: 0; padding: 18px 28px;
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 12px;
  transition: transform .25s ease, background .25s, box-shadow .25s;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(60,40,20,.08);
}
.btn:hover{ transform: translateY(-2px); background: var(--bronze-2); box-shadow: 0 14px 36px rgba(120,80,40,.18); }
.btn .dot{
  width: 8px; height: 8px; border-radius: 50%; background: var(--bronze);
}
.btn .arr{ display: inline-block; transition: transform .25s; }
.btn:hover .arr{ transform: translateX(4px); }

.hero-cta{
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-top: -10px;
}
.hero-cta__sub{
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.01em;
  color: var(--muted);
}
.note{ font-size: 13px; color: var(--muted); max-width: 32ch; }
.contact .aside{
  border-left: 1px solid var(--rule);
  padding-left: clamp(24px, 4vw, 56px);
  display: flex; flex-direction: column; gap: 28px;
}
.contact .aside .row{ display: flex; flex-direction: column; gap: 4px; }
.contact .aside .row .l{ font-family: var(--mono); font-size: 10px; letter-spacing: 0.01em; color: var(--muted); }
.contact .aside .row .v{ font-family: var(--serif); font-size: 22px; }
@media (max-width: 820px){
  .contact-grid{ grid-template-columns: 1fr; }
  .contact .aside{ border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 36px; }
}
/* Cal.com inline scheduler (ported from the live v2 site) */
.booking-intro{ font-size: 19px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 10px; max-width: none; }
.booking-intro em{ font-family: var(--serif); font-style: italic; font-size: 1.16em; color: var(--accent); }
.booking-meta{ font-family: var(--sans); font-style: normal; font-size: 16.5px; color: var(--muted); margin: 0 0 26px; }
/* Strip template-y decoration: index/roman numbers on areas, sessions, FAQ */
.area .num{ display: none; }
.process .step .meta .n{ display: none; }
.faq-q{ grid-template-columns: 1fr 36px; }
.faq-q .idx{ display: none; }
@media (max-width: 600px){ .faq-q{ grid-template-columns: 1fr 24px; } }
.booking-meta em{ font-family: var(--serif); font-style: italic; font-size: 1.14em; color: var(--ink); }
.cal-inline{ position: relative; min-height: 56px; }
.cal-inline.is-live{ width: 100%; min-width: 0; min-height: 600px; }
.cal-inline.is-live iframe{ width: 100% !important; }
.booking-note{ margin: 26px auto 0; font-size: 15.5px; color: var(--muted); text-align: center; max-width: 60ch; }
.booking-note a{ color: var(--bronze-2); text-decoration: underline; text-underline-offset: 3px; }

/* Heading directly above the calendar, so the widget is never an unlabelled
   box — and the rule + heading that separate booking from the fee table. */
.book-head{ margin: 0 0 26px; }
.book-head h3{ margin: 0 0 10px; }
.book-head h3 .italic{ color: var(--accent); }
.book-sub{ margin: 0; font-family: var(--sans); font-size: 16.5px; color: var(--muted); max-width: 56ch; }
.book-sub em{ font-family: var(--serif); font-style: italic; font-size: 1.14em; color: var(--ink); }

/* ===========================================================
   Footer — warm sand
   =========================================================== */
.footer{
  background: var(--paper-3);
  color: var(--ink-soft);
  padding: 90px var(--pad) 40px;
  border-top: 1px solid var(--rule);
}
.footer-wordmark{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(60px, 14vw, 180px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.footer-wordmark em{ font-family: var(--script); font-style: normal; font-weight: 700; font-size: 1.7em; line-height: 1; color: var(--bronze-2); }
.footer-flame{ display: inline-block; height: 0.3em; width: auto; margin-left: 0.18em; vertical-align: -0.02em; }
.footer-flame svg{ height: 100%; width: auto; display: block; overflow: visible; }
.footer-bottom{
  margin-top: 60px;
  padding-top: 28px;
  border-top: 1px solid color-mix(in oklch, var(--ink) 14%, transparent);
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.01em;
  color: var(--muted);
}
.footer-bottom .legal{ max-width: 70ch; line-height: 1.7; font-size: 12px; letter-spacing: 0.01em; text-transform: none; opacity: 1; }

/* ===========================================================
   Tiny utilities
   =========================================================== */
.center{ text-align: center; }
.serif{ font-family: var(--serif); }
.mono{ font-family: var(--mono); font-style: italic; }
.no-wrap{ white-space: nowrap; }

/* Small labels (menu, buttons, captions) keep the elegant serif, but at a
   heavier weight, larger size and darker colour than the old thin italic. */
.eyebrow, .nav-links, .nav-cta, .scroll-cue,
.section-head .num, .approach-quote .by, .area .num,
.process .step .meta .t, .about .portrait .label, .signature .role,
.creds .c .lbl, .contact-form label, .hero-cta__sub, .footer-bottom,
.start-cta .l, .fit-col h3 .pill, .float-cta, .btn, .work-flow .flow-cap,
.menu-btn, .more-link{
  font-family: var(--serif);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.eyebrow{ font-size: 21px; font-style: italic; }
.section-head .num{ font-size: 18px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.nav-links{ font-size: 22px; }
.nav-links a{ opacity: 1; color: var(--ink); padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ border-bottom-color: var(--bronze); }
.nav-cta{ font-size: 21px; padding: 10px 24px; }
.process .step .meta .t{ font-size: 21px; font-style: italic; color: var(--bronze-2); }
.signature .role{ font-size: 20px; }
.creds .c .lbl{ font-size: 20px; color: var(--ink-soft); line-height: 1.35; }
.footer-bottom{ font-size: 19px; color: var(--ink-soft); }
.footer-bottom .legal{ font-size: 19px; }
.fit-col h3 .pill{ font-size: 18px; }
.work-flow .flow-cap{ font-size: 20px; font-style: italic; letter-spacing: 0.02em; text-transform: none; color: var(--ink-soft); }
.btn{ font-size: 23px; padding: 18px 34px; }
.float-cta{ font-size: 21px; padding: 15px 26px 15px 22px; }
.menu-btn{ font-size: 20px; }
.more-link{ font-size: 21px; font-style: italic; }
.scroll-cue{ font-size: 17px; }

/* Heavier serif strokes: the 300 weight was too faint for many readers. */
.h-1, .h-2, .h-3, .area h3, .process .step h3, .faq-q .q, .start-steps h3,
.fit-col h3, .creds .c .big, .signature{ font-weight: 500; }
.lede, .philosophy .quote, .band .quote, .approach-quote, .hero-sub,
.hero-wordmark, .footer-wordmark{ font-weight: 400; }
.band .quote{ font-weight: 500; }
.approach-quote{ font-weight: 500; color: var(--ink); }
.hero-tag__line{ font-size: 24px; font-weight: 600; }

/* Italic emphasis inside running text stays in the body face, so a sentence
   doesn't switch to a thin serif halfway through. */
.booking-intro em, .book-sub em, .bio p em, .approach-grid p em,
.fit-list em, .page-intro em{
  font-family: inherit; font-size: 1em; font-style: italic; font-weight: 500;
}

/* Comfortable reading sizes for running text */
.approach-grid p, .about .bio p, .process .step p{ font-size: 20px; line-height: 1.65; }
.area p, .faq-a p, .fit-list li, .start-steps p{ font-size: 19px; line-height: 1.6; }
.about .bio .pull{ font-weight: 500; }
.faq-a p{ color: var(--ink-soft); }

/* ===========================================================
   Multi-page additions
   =========================================================== */
/* Pages without the hero: the nav is solid from the start and the first
   section clears it. */
.page-head{
  background: var(--paper-2);
  padding: clamp(150px, 18vw, 210px) 0 clamp(56px, 7vw, 90px);
  border-bottom: 1px solid var(--rule);
}
.page-head .eyebrow{ display: block; margin-bottom: 20px; }
.page-head .h-1{ max-width: 20ch; }
.page-intro{
  margin: 26px 0 0; max-width: 60ch;
  font-size: 21px; line-height: 1.6; color: var(--ink-soft);
}
.page-head + .section{ padding-top: clamp(64px, 8vw, 110px); }

/* Closing call-to-action strip used at the foot of each content page */
.cta-band{
  background: var(--paper-3);
  padding: clamp(80px, 10vw, 130px) 0;
  text-align: center;
}
.cta-band .h-2{ margin: 0 auto 16px; max-width: 22ch; }
.cta-band p{ margin: 0 auto 32px; max-width: 46ch; font-size: 20px; color: var(--ink-soft); }

/* "Read more" text link */
.more-link{
  display: inline-block; margin-top: 10px;
  font-family: var(--sans); font-weight: 600; font-size: 19px;
  color: var(--bronze-2);
  border-bottom: 2px solid currentColor; padding-bottom: 2px;
}
.more-link:hover{ color: var(--ink); }

/* Book page: the calendar is the page */
.book-page{ background: var(--paper-2); padding: clamp(140px, 16vw, 190px) 0 clamp(70px, 8vw, 110px); }
.book-page .h-1{ margin: 0 0 18px; }
.book-page .book-sub{ font-size: 21px; color: var(--ink-soft); margin: 0 0 clamp(28px, 4vw, 44px); max-width: 52ch; }
.book-page .booking-note{ font-size: 19px; color: var(--ink-soft); margin-top: 32px; }

/* Mobile menu */
.menu-btn{
  display: none;
  appearance: none; background: none; cursor: pointer;
  font-family: var(--sans); font-size: 17px; font-weight: 600; color: var(--ink);
  border: 1px solid var(--ink); border-radius: 999px; padding: 10px 18px;
  margin-left: auto; margin-right: 12px;
}
.mobile-menu{
  display: none;
  position: fixed; inset: 0; z-index: 49;
  background: var(--paper);
  padding: 110px var(--pad) 40px;
  flex-direction: column; gap: 6px;
}
.mobile-menu a{
  font-family: var(--serif); font-weight: 600; font-size: 32px; line-height: 1.2;
  padding: 12px 0; border-bottom: 1px solid var(--rule); color: var(--ink);
}
.mobile-menu a[aria-current="page"]{ color: var(--bronze-2); }
.mobile-menu .btn{ padding: 15px 28px; margin-top: 28px; align-self: flex-start; font-family: var(--serif); font-size: 23px; border: 0; color: var(--paper); }
body.menu-open{ overflow: hidden; }
body.menu-open .mobile-menu{ display: flex; }
body.menu-open .nav{ background: var(--paper); }
@media (max-width: 1180px){
  .menu-btn{ display: inline-block; }
}
body.menu-open .float-cta{ display: none; }
@media (max-width: 640px){
  .menu-btn{ font-size: 18px; padding: 6px 16px; margin-right: 8px; }
  .nav-cta{ display: none; }
}

/* ---- Mobile: keep buttons proportional as the viewport narrows ---- */
@media (max-width: 640px){
  .btn{ font-size: 21px; padding: 15px 26px; }
  .float-cta{ font-size: 19px; padding: 13px 20px 13px 16px; }
  .nav{ padding: 16px var(--pad); }
  .brand{ font-size: 19px; }
  .hero-overlay{ padding: 96px var(--pad) 48px; }
  /* Give the wordmark real presence on phones so it commands the screen
     instead of floating small in a sea of sky. */
  .hero-wordmark{ font-size: clamp(58px, 16.5vw, 104px); line-height: 0.92; }
  /* Pull the title, subtitle and CTA into one composed group near the
     upper-middle, with breathing room above the mountains below. */
  .hero-top{ align-self: start; gap: 22px; margin-top: clamp(6px, 3vh, 36px); }
  .hero-cta{ margin-top: clamp(48px, 14vh, 140px); }
}
@media (max-width: 380px){
  .btn{ font-size: 19px; padding: 14px 22px; }
}

/* Drifting words: darker and heavier so they read at a glance. */
.flow-word{ color: var(--ink-soft); font-weight: 500; }