/* ==========================================================================
   Fonts, self-hosted.

   Served from our own origin rather than fonts.googleapis.com. That
   third-party stylesheet was a render-blocking request costing roughly two
   seconds of first paint on a mobile connection — the wrong trade for visitors
   reading this on a phone in Nepal.

   These are variable fonts (Cormorant Garamond wght 300-700, Inter wght
   100-900), so one file covers every weight the site uses and is declared with
   a weight RANGE. Only the latin and devanagari subsets ship, and each face
   carries its unicode-range, so Devanagari runs pull Noto while Latin stays on
   Cormorant and Inter. An English page downloads two files.

   SIL Open Font License 1.1 — Cormorant Garamond (Catharsis Fonts), Inter
   (Rasmus Andersson), Noto Serif Devanagari (Google). Web serving and
   redistribution are permitted: https://openfontlicense.org
   ========================================================================== */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Noto Serif Devanagari';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/noto-serif-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

@font-face {
  font-family: 'Noto Serif Devanagari';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/noto-serif-devanagari-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
   Himalayan Wellness Foundation — himalayanwellness.org.np
   Hand-written CSS. No build step, no framework.

   DIRECTION
   An editorial that happens to be a website: a contemplative travel journal
   set in Cormorant and Inter, laid on warm cream, with saffron used as a spice
   rather than a paint. The recurring mark is the "resonance" — three arcs
   widening from a point, the way rings widen from a struck bowl or a stone
   dropped into a still lake. It is the only ornament, and it is drawn from the
   subject rather than applied to it.

   MOTION
   Everything arrives rather than appears. Headings rise line by line from
   behind a mask; photographs unveil upward and settle out of a slow scale;
   sections stagger their children. Nothing bounces, nothing loops, nothing
   demands attention. All of it collapses to plain static layout under
   prefers-reduced-motion, and the page is fully legible if JavaScript never
   runs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colour */
  --ink:          #17150F;
  --ink-2:        #1A1A1A;
  --ink-soft:     #4A4A4A;
  --ink-faint:    #6E6862;
  --cream:        #FBF9F6;   /* page ground — warm, never pure white */
  --cream-deep:   #F4F0E9;   /* alternating band */
  --cream-warm:   #EFE9DF;   /* third tone, for the clients strip */
  --white:        #FFFFFF;
  --saffron:      #C4661F;   /* the brand mark — decorative use only */
  /* #C4661F reaches only 3.79:1 on cream, which fails WCAG AA for text.
     Anything a reader has to READ uses saffron-ink (5.15:1 on cream). */
  --saffron-ink:  #A55417;
  --saffron-dark: #8F4711;
  --saffron-mist: #F3E7DC;
  --deep-blue:    #1F3A5F;
  --stone:        #E8E3DC;
  --stone-deep:   #D9D2C8;

  /* Type */
  --font-display: "Cormorant Garamond", "Noto Serif Devanagari", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", "Noto Serif Devanagari", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-deva:    "Noto Serif Devanagari", var(--font-display);

  /* Fluid scale. Body never falls below 17px on a phone. */
  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.92rem);
  --step-0:  clamp(1.0625rem, 1.03rem + 0.18vw, 1.15rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.40vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.25rem + 1.00vw, 2.05rem);
  --step-3:  clamp(1.85rem, 1.50rem + 1.75vw, 3.00rem);
  --step-4:  clamp(2.5rem, 1.60rem + 4.40vw, 5rem);
  --step-5:  clamp(3rem, 1.60rem + 6.60vw, 7rem);   /* chapter numerals */

  /* Space */
  --sp-1: 0.5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;  --sp-4: 2rem;
  --sp-5: 3rem;    --sp-6: 4.5rem; --sp-7: 7rem;
  --section-y: clamp(4rem, 2.6rem + 6vw, 8.5rem);
  --gutter:    clamp(1.25rem, 4.5vw, 3rem);

  --measure: 66ch;
  --container: 1180px;
  --container-wide: 1400px;
  --container-narrow: 760px;

  --header-h: 66px;
  --topbar-h: 34px;
  --radius: 2px;   /* almost none — this is paper, not plastic */
  --shadow-soft: 0 1px 2px rgba(26,22,18,.04), 0 8px 30px rgba(26,22,18,.05);
  --shadow-lift: 0 2px 6px rgba(26,22,18,.05), 0 18px 50px rgba(26,22,18,.08);

  /* Motion */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-editorial: cubic-bezier(.16,.84,.32,1);
  --dur: .9s;
  --dur-slow: 1.4s;
}

/* Smooth same-page navigation where the browser supports it. */
@view-transition { navigation: auto; }

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--saffron-ink); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--saffron-dark); }

:focus-visible { outline: 2px solid var(--saffron-ink); outline-offset: 3px; border-radius: var(--radius); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.005em;
  margin: 0;
  text-wrap: balance;
}

p, ul, ol { margin: 0 0 var(--sp-3); }
ul, ol { padding-left: 1.15em; }
li { margin-bottom: .5em; }
li::marker { color: var(--stone-deep); }
strong { font-weight: 600; }
blockquote { margin: 0; }
hr { border: 0; border-top: 1px solid var(--stone); margin: var(--sp-5) 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: 0; left: 0; transform: translateY(-120%);
  background: var(--ink); color: var(--cream);
  padding: .75rem 1.25rem; z-index: 300; font-size: var(--step--1); text-decoration: none;
}
.skip-link:focus { transform: translateY(0); color: var(--cream); }

/* Cormorant carries no Devanagari; Nepali runs get Noto. */
.deva { font-family: var(--font-deva); font-weight: 400; line-height: 1.6; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide   { max-width: var(--container-wide); }
.wrap--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 1.8rem + 3.5vw, 5rem); }
.section--cream-deep { background: var(--cream-deep); }
.section--warm { background: var(--cream-warm); }
.section--ink { background: var(--ink); color: var(--cream); }
.section--ink h2, .section--ink h3 { color: var(--cream); }
.section--ink .eyebrow { color: #B9AFA3; }
.section--ink .lede { color: #D6CEC4; }

.measure { max-width: var(--measure); }
.center { margin-inline: auto; text-align: center; }
.center .measure { margin-inline: auto; }

.duo { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--wide-image { grid-template-columns: 7fr 5fr; }
  .duo--wide-text  { grid-template-columns: 5fr 7fr; }
  .duo--top { align-items: start; }
  .duo__media--first { order: -1; }
}

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
/* Sets of exactly four are laid 2x2, never 4-up: four columns inside the
   measure leaves ~230px of text per card, which wraps every third word. */
@media (min-width: 640px) { .grid--quad { grid-template-columns: repeat(2, 1fr); } }

.stack > * + * { margin-top: var(--sp-3); }
.stack-lg > * + * { margin-top: var(--sp-5); }

/* --------------------------------------------------------------------------
   4. Type components
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--2); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 var(--sp-2); display: block;
}
.eyebrow--rule { display: flex; align-items: center; gap: .9em; }
.eyebrow--rule::after { content: ""; flex: 1; height: 1px; background: var(--stone-deep); }
.center .eyebrow--rule { justify-content: center; }
.center .eyebrow--rule::after { display: none; }

.display-xl { font-size: var(--step-4); font-weight: 300; line-height: 1.02; }
.display-lg { font-size: var(--step-3); }
.display-md { font-size: var(--step-2); }
.display-sm { font-size: var(--step-1); line-height: 1.3; }

/* One word of a heading lifted into italic — the editorial accent. */
.em { font-style: italic; font-weight: 300; }

.lede { font-size: var(--step-1); line-height: 1.65; color: var(--ink-soft); }
.lede--lift { font-size: var(--step-2); line-height: 1.45; color: var(--ink-2); font-weight: 300; }

.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--step-2); margin-top: var(--sp-6); margin-bottom: var(--sp-2); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--step-1); margin-top: var(--sp-5); margin-bottom: var(--sp-1); }
.prose p, .prose li { color: var(--ink-soft); }
.prose strong { color: var(--ink-2); }
/* Opening paragraph of a long read gets a raised first line. */
.prose > p.opening { font-size: var(--step-1); line-height: 1.6; color: var(--ink-2); }

.caption { font-size: var(--step--1); color: var(--ink-faint); line-height: 1.6; margin-top: var(--sp-2); }

.quote {
  font-family: var(--font-display); font-size: var(--step-2); font-style: italic;
  font-weight: 300; line-height: 1.4; color: var(--ink-2); max-width: 24ch;
}
.quote--wide { max-width: 34ch; }

/* A pulled line that interrupts a long read. */
.pull {
  margin: var(--sp-6) 0;
  padding-left: clamp(1rem, 3vw, 2rem);
  border-left: 1px solid var(--saffron);
  font-family: var(--font-display);
  font-size: var(--step-2); font-style: italic; font-weight: 300;
  line-height: 1.35; color: var(--ink-2); max-width: 30ch;
}

/* --------------------------------------------------------------------------
   5. The resonance mark
   -------------------------------------------------------------------------- */
.resonance {
  width: 58px; height: 19px; fill: none;
  stroke: var(--stone-deep); stroke-width: 1;
  overflow: visible; margin-inline: auto;
}
.resonance circle { fill: var(--saffron); stroke: none; }
.resonance--start { margin-inline: 0; }
.section--ink .resonance { stroke: #4A423A; }

/* --------------------------------------------------------------------------
   6. Buttons & quiet links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: .85em 1.75em;
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 500;
  letter-spacing: .06em; text-decoration: none;
  border: 1px solid var(--saffron-ink); border-radius: var(--radius);
  background: var(--saffron-ink); color: var(--cream);
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease-out), border-color .45s var(--ease-out);
}
/* Fill wipes upward on hover instead of simply switching colour. */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--saffron-dark);
  transform: translateY(101%);
  transition: transform .45s var(--ease-editorial);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover { color: var(--cream); border-color: var(--saffron-dark); }

.btn--quiet { background: transparent; color: var(--saffron-ink); border-color: var(--stone-deep); }
.btn--quiet::before { background: var(--saffron-mist); }
.btn--quiet:hover { color: var(--saffron-dark); border-color: var(--saffron-ink); }

.btn--on-ink { background: transparent; color: var(--cream); border-color: rgba(251,249,246,.35); }
.btn--on-ink::before { background: rgba(251,249,246,.12); }
.btn--on-ink:hover { color: var(--cream); border-color: var(--cream); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

.quiet-link {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 44px;
  font-size: var(--step--1); font-weight: 500; letter-spacing: .04em;
  /* Underline via text-decoration, not a border: a border would sit at the
     bottom of the 44px tap target and float away from the words. */
  text-decoration: underline; text-decoration-color: var(--stone-deep);
  text-decoration-thickness: 1px; text-underline-offset: .5em;
  transition: text-decoration-color .4s var(--ease-out), color .4s var(--ease-out);
}
.quiet-link:hover { text-decoration-color: var(--saffron); }
.quiet-link::after { content: "\2192"; transition: transform .4s var(--ease-editorial); }
.quiet-link:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   7. Header — utility strip over a main row, both responsive to scroll
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--stone);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  view-transition-name: site-header;
}
/* The translucent blur lives on a pseudo-element, not on .site-header itself.
   An element with backdrop-filter becomes the containing block for its
   fixed-position descendants — which would collapse the mobile nav panel to
   the height of the header bar. A sibling pseudo-element has no such effect. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(251,249,246,.93);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.site-header.is-stuck { box-shadow: var(--shadow-soft); }
.site-header.is-hidden { transform: translateY(-102%); }

/* Utility strip */
.topbar {
  border-bottom: 1px solid var(--stone);
  font-size: var(--step--2); letter-spacing: .1em;
  color: var(--ink-faint);
  height: var(--topbar-h);
  overflow: hidden;
  transition: height .45s var(--ease-out), opacity .35s var(--ease-out);
}
.site-header.is-stuck .topbar { height: 0; opacity: 0; border-bottom-color: transparent; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); height: var(--topbar-h); }
.topbar__place { text-transform: uppercase; white-space: nowrap; }
.topbar__links { display: flex; align-items: center; gap: var(--sp-3); }
.topbar a { color: var(--ink-faint); text-decoration: none; white-space: nowrap; transition: color .35s var(--ease-out); }
.topbar a:hover { color: var(--saffron-ink); }
.topbar__socials { display: none; gap: .85rem; }
.topbar__socials a { display: inline-flex; }
.topbar__socials svg { width: 14px; height: 14px; fill: currentColor; }
@media (min-width: 860px) { .topbar__socials { display: flex; } }
@media (max-width: 599px) { .topbar__place { display: none; } .topbar__inner { justify-content: center; } }

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: var(--header-h); padding-block: .5rem;
  transition: min-height .45s var(--ease-out);
}

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink-2); min-height: 44px; }
.brand__mark { width: 42px; height: 42px; flex: none; transition: width .45s var(--ease-out), height .45s var(--ease-out); }
.site-header.is-stuck .brand__mark { width: 34px; height: 34px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-family: var(--font-display); font-size: 1.08rem; letter-spacing: .02em; }
.brand__sub { font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); margin-top: .25em; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-right: -.4rem;
  background: none; border: 0; color: var(--ink-2); cursor: pointer;
}
.nav-toggle__bars { display: block; width: 22px; height: 12px; position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  transition: transform .35s var(--ease-out), opacity .25s var(--ease-out);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-5.5px) rotate(-45deg); }

.nav { display: none; }
.nav__list { list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: block; text-decoration: none; color: var(--ink-2);
  transition: color .35s var(--ease-out);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--saffron-ink); }

/* Mobile: full-height panel with accordions */
@media (max-width: 959px) {
  .nav {
    position: fixed; inset: calc(var(--header-h) + var(--topbar-h)) 0 0;
    background: var(--cream);
    padding: var(--sp-4) var(--gutter) var(--sp-6);
    overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), visibility .45s;
  }
  .site-header.is-stuck .nav { inset-block-start: var(--header-h); }
  .nav.is-open { display: block; opacity: 1; visibility: visible; transform: none; }
  .nav__list { display: flex; flex-direction: column; }
  .nav__item { border-bottom: 1px solid var(--stone); }
  .nav__link { font-family: var(--font-display); font-size: var(--step-2); padding: .8rem 0; min-height: 44px; }
  .nav__cta { margin-top: var(--sp-4); border-bottom: 0; }
  .nav__cta .btn { width: 100%; }

  .nav__trigger[data-current] { color: var(--saffron-ink); }
  .nav__group > .nav__trigger {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: none; border: 0; padding: .8rem 0; min-height: 44px;
    font-family: var(--font-display); font-size: var(--step-2); color: var(--ink-2);
    text-align: left; cursor: pointer;
  }
  .nav__trigger .chev { width: 11px; height: 11px; border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .35s var(--ease-out); }
  .nav__trigger[aria-expanded="true"] .chev { transform: rotate(-135deg); }
  .nav__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
  .nav__trigger[aria-expanded="true"] + .nav__panel { grid-template-rows: 1fr; }
  .nav__panel > ul { overflow: hidden; list-style: none; margin: 0; padding: 0 0 .6rem; }
  .nav__panel a {
    display: block; padding: .55rem 0 .55rem 1rem; min-height: 44px;
    font-family: var(--font-body); font-size: var(--step-0); color: var(--ink-soft);
    text-decoration: none; border-left: 1px solid var(--stone);
  }
  .nav__panel a:hover { color: var(--saffron-ink); border-left-color: var(--saffron); }
}

/* Desktop: a row with dropdowns */
@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .nav { display: block; }
  .nav__list { display: flex; align-items: center; gap: clamp(1rem, 1.9vw, 1.9rem); }
  .nav__link, .nav__trigger {
    font-family: var(--font-body); font-size: var(--step--1); letter-spacing: .05em;
    padding-block: .55rem; white-space: nowrap;
  }
  .nav__cta .btn { padding: .6em 1.35em; min-height: 42px; }

  .nav__group { position: relative; }
  .nav__trigger {
    display: inline-flex; align-items: center; gap: .45em;
    background: none; border: 0; color: var(--ink-2); cursor: pointer;
    transition: color .35s var(--ease-out);
  }
  .nav__trigger:hover, .nav__group.is-open .nav__trigger,
  .nav__trigger[data-current] { color: var(--saffron-ink); }
  .nav__trigger .chev { width: 6px; height: 6px; border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor; transform: rotate(45deg) translate(-1px,-1px);
    transition: transform .35s var(--ease-out); }
  .nav__group.is-open .nav__trigger .chev { transform: rotate(-135deg) translate(-1px,-1px); }

  .nav__panel {
    position: absolute; top: calc(100% + .7rem); left: 50%;
    transform: translate(-50%, -6px);
    min-width: 21rem;
    background: var(--cream); border: 1px solid var(--stone);
    box-shadow: var(--shadow-lift); border-radius: var(--radius);
    padding: .6rem;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility .3s;
  }
  .nav__group.is-open .nav__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
  .nav__panel::before {
    content: ""; position: absolute; left: 0; right: 0; top: -.7rem; height: .7rem;
  }
  .nav__panel > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .nav__panel a {
    display: block; padding: .7rem .85rem; border-radius: var(--radius);
    text-decoration: none; color: var(--ink-2);
    transition: background-color .3s var(--ease-out), color .3s var(--ease-out);
  }
  .nav__panel a:hover { background: var(--saffron-mist); color: var(--saffron-dark); }
  .nav__panel b { display: block; font-weight: 500; font-size: var(--step--1); letter-spacing: .02em; }
  .nav__panel span { display: block; font-size: var(--step--2); color: var(--ink-faint); line-height: 1.5; margin-top: .15em; }
}

body.nav-open { overflow: hidden; }

/* Reading progress — a hairline of saffron across the top of the header */
.progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--saffron); transform-origin: 0 50%; transform: scaleX(0);
  z-index: 2;
}
@supports (animation-timeline: scroll()) {
  .progress { animation: progress-grow linear both; animation-timeline: scroll(root block); }
  @keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; display: grid; align-items: end;
  min-height: min(90svh, 820px);
  background: var(--ink); overflow: hidden; isolation: isolate;
}
.hero--short { min-height: min(64svh, 580px); }

.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 34%; }

.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(14,11,8,.84) 0%, rgba(14,11,8,.58) 34%, rgba(14,11,8,.20) 64%, rgba(14,11,8,.30) 100%);
}

.hero__inner { width: 100%; padding-block: clamp(2.5rem, 6vw, 5.5rem); color: var(--cream); }
.hero__title { font-size: var(--step-4); font-weight: 300; line-height: 1.03; color: var(--cream); max-width: 17ch; }
.hero__lede { margin-top: var(--sp-3); max-width: 46ch; color: rgba(251,249,246,.88); font-size: var(--step-1); line-height: 1.6; }
.hero .eyebrow { color: rgba(251,249,246,.72); }
.hero .resonance { stroke: rgba(251,249,246,.5); margin-inline: 0; margin-bottom: var(--sp-3); }
.hero .resonance circle { fill: var(--saffron); }

/* A quiet scroll cue at the foot of the hero */
.hero__cue {
  position: absolute; left: 50%; bottom: 1.4rem; translate: -50% 0;
  display: none; align-items: center; gap: .6rem;
  font-size: var(--step--2); letter-spacing: .22em; text-transform: uppercase;
  color: rgba(251,249,246,.62);
}
.hero__cue i { display: block; width: 1px; height: 34px; background: linear-gradient(rgba(251,249,246,.62), transparent); }
@media (min-width: 900px) and (min-height: 700px) { .hero__cue { display: flex; flex-direction: column; } }

/* --------------------------------------------------------------------------
   9. Page head (inner pages)
   -------------------------------------------------------------------------- */
.page-head {
  padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(2rem, 1.5rem + 3vw, 4rem);
  border-bottom: 1px solid var(--stone);
  position: relative; overflow: hidden;
}
.page-head__title { font-size: var(--step-3); max-width: 20ch; }
.page-head .lede { margin-top: var(--sp-3); max-width: 52ch; }

.breadcrumb { font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--sp-3); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5em; margin: 0; padding: 0; }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "\2022"; margin-right: .5em; color: var(--stone-deep); }
.breadcrumb a { color: var(--ink-faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--saffron-ink); }

/* --------------------------------------------------------------------------
   10. Figures & bands
   -------------------------------------------------------------------------- */
.figure { margin: 0; }
.figure img { width: 100%; border-radius: var(--radius); }
.figure--tall img { aspect-ratio: 4/5; object-fit: cover; }
.figure--wide img { aspect-ratio: 3/2; object-fit: cover; }
.figure--pano img { aspect-ratio: 16/9; object-fit: cover; }

/* Full-bleed plate that breaks the container */
.plate { position: relative; overflow: hidden; }
/* max-height re-crops with object-fit, and a centred focal point takes the
   head off the top of the frame. Bias the crop upward. */
.plate img {
  width: 100%; height: auto;
  aspect-ratio: 3/2; object-fit: cover; object-position: center 18%;
  max-height: 80svh;
}

.band {
  position: relative; min-height: clamp(320px, 48vw, 560px);
  display: grid; place-items: center;
  background: var(--ink); overflow: hidden; isolation: isolate;
  text-align: center; padding-block: var(--section-y);
}
.band img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(14,11,8,.58); }
.band__inner { color: var(--cream); max-width: 46ch; }
.band__inner .quote { color: var(--cream); max-width: none; }
.band .eyebrow { color: rgba(251,249,246,.72); }
.band .resonance { stroke: rgba(251,249,246,.45); margin-bottom: var(--sp-3); }

/* --------------------------------------------------------------------------
   11. Cards, ledgers, records
   -------------------------------------------------------------------------- */
.card {
  background: var(--white); border: 1px solid var(--stone); border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: transform .5s var(--ease-editorial), box-shadow .5s var(--ease-out), border-color .5s var(--ease-out);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: var(--stone-deep); }
.card__title { font-size: var(--step-1); }
.card p { color: var(--ink-soft); margin-bottom: 0; }
.card__foot { margin-top: auto; padding-top: var(--sp-2); }

/* A card that leads with a chapter numeral */
.card--numbered { position: relative; }
.card--numbered .card__no {
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 300;
  color: var(--stone-deep); line-height: 1; margin-bottom: .2em;
}

/* Offerings: a hairline ledger, not a pricing table */
.offerings { border-top: 1px solid var(--stone); }
.offering {
  display: grid; gap: .35rem var(--sp-4);
  padding-block: clamp(1.4rem, 3vw, 2rem); border-bottom: 1px solid var(--stone);
  transition: background-color .45s var(--ease-out);
}
.offering:hover { background: rgba(244,240,233,.6); }
.offering__name { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25; }
.offering__format { font-size: var(--step--1); color: var(--ink-faint); }
.offering__note { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }
.offering__price { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink-2); white-space: nowrap; }
.offering__price small {
  display: block; font-family: var(--font-body); font-size: var(--step--2);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .2em;
}
@media (min-width: 720px) {
  .offering { grid-template-columns: minmax(0,1fr) 12rem; align-items: start; padding-inline: .75rem; margin-inline: -.75rem; }
  .offering__price { grid-column: 2; grid-row: 1 / span 3; text-align: right; }
}

/* Facts — read like an inscription */
.facts { display: grid; gap: 0; border-top: 1px solid var(--stone); }
.facts > div { padding-block: var(--sp-3); border-bottom: 1px solid var(--stone); }
.facts dt { font-size: var(--step--2); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .4em; }
.facts dd { margin: 0; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.3; }
.facts dd small { display: block; font-family: var(--font-body); font-size: var(--step--1); color: var(--ink-soft); margin-top: .35em; line-height: 1.55; }
@media (min-width: 640px)  { .facts { grid-template-columns: repeat(2,1fr); column-gap: var(--sp-5); } }
@media (min-width: 1000px) { .facts--four { grid-template-columns: repeat(4,1fr); } }

/* Days of a journey — genuinely a sequence, so it is numbered */
.days { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--stone); }
.day { display: grid; gap: .4rem var(--sp-4); padding-block: clamp(1.5rem,3vw,2.25rem); border-bottom: 1px solid var(--stone); margin: 0; }
.day__no { font-family: var(--font-body); font-size: var(--step--2); letter-spacing: .2em; text-transform: uppercase; color: var(--saffron-ink); }
.day__title { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.3; }
.day__body { color: var(--ink-soft); margin: 0; }
.day__meta { font-size: var(--step--1); color: var(--ink-faint); margin: .4rem 0 0; }
@media (min-width: 760px) { .day { grid-template-columns: 8rem minmax(0,1fr); align-items: start; } .day__no { grid-row: 1 / span 3; padding-top: .5em; } }

/* A plain record of service */
.record { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--stone); }
.record li { margin: 0; padding-block: var(--sp-3); border-bottom: 1px solid var(--stone); color: var(--ink-soft); }
.record b { display: block; color: var(--ink-2); font-weight: 500; margin-bottom: .2em; }
.record span { font-size: var(--step--1); color: var(--ink-faint); }

/* --------------------------------------------------------------------------
   12. Institutions we have served
   Typographic wordmarks by default, not state emblems. Logo slots are available
   for institutions that have given written permission — see the HTML comment.
   -------------------------------------------------------------------------- */
.clients { --gap: clamp(2rem, 5vw, 4.5rem); }
.clients__rail { position: relative; overflow: hidden; }
.clients__rail::before, .clients__rail::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(2rem, 8vw, 7rem); z-index: 2; pointer-events: none;
}
.clients__rail::before { left: 0;  background: linear-gradient(to right, var(--cream-warm), transparent); }
.clients__rail::after  { right: 0; background: linear-gradient(to left,  var(--cream-warm), transparent); }

.clients__track { display: flex; gap: var(--gap); width: max-content; animation: rail 46s linear infinite; }
.clients__rail:hover .clients__track,
.clients__rail:focus-within .clients__track { animation-play-state: paused; }
@keyframes rail { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.client {
  flex: none; display: flex; flex-direction: column; justify-content: center;
  gap: .3rem; min-width: 15rem; padding-block: .4rem;
  border-left: 1px solid var(--stone-deep); padding-left: 1.4rem;
}
.client__name { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; color: var(--ink-2); }
.client__meta { font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
/* Optional logo slot — supply a file and it replaces the wordmark. */
.client__logo { height: 42px; width: auto; object-fit: contain; margin-bottom: .35rem; }

/* Static grid fallback for reduced motion and for the fuller About listing */
.clients__grid { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.clients__grid .client { min-width: 0; }

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--stone); }
.faq__item { border-bottom: 1px solid var(--stone); }
.faq__q {
  font-family: var(--font-display); font-size: var(--step-1); line-height: 1.35;
  padding: var(--sp-3) 2.5rem var(--sp-3) 0; cursor: pointer; list-style: none;
  position: relative; min-height: 44px; transition: color .35s var(--ease-out);
}
.faq__q:hover { color: var(--saffron-ink); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: ""; position: absolute; right: .35rem; top: 50%;
  width: 11px; height: 11px;
  border-right: 1px solid var(--ink-faint); border-bottom: 1px solid var(--ink-faint);
  transform: translateY(-70%) rotate(45deg); transition: transform .35s var(--ease-out);
}
.faq__item[open] .faq__q::after { transform: translateY(-30%) rotate(-135deg); }
.faq__a { padding-bottom: var(--sp-3); max-width: var(--measure); }
.faq__a p { color: var(--ink-soft); margin-bottom: var(--sp-2); }
.faq__a p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   14. Notices
   -------------------------------------------------------------------------- */
.notice { background: var(--saffron-mist); border-left: 2px solid var(--saffron); padding: clamp(1.25rem,3vw,2rem); border-radius: var(--radius); }
.notice h3 { font-size: var(--step-1); margin-bottom: var(--sp-1); }
.notice p:last-child, .notice ul:last-child { margin-bottom: 0; }
.notice--stone { background: var(--cream-deep); border-left-color: var(--stone-deep); }

/* --------------------------------------------------------------------------
   15. Contact
   -------------------------------------------------------------------------- */
.contact-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--stone); }
.contact-list li { margin: 0; padding-block: var(--sp-3); border-bottom: 1px solid var(--stone); }
.contact-list dt, .contact-list .contact-label {
  font-size: var(--step--2); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .35em;
}
.contact-list a {
  font-family: var(--font-display); font-size: var(--step-1); display: inline-block;
  padding-block: .55rem;
  text-decoration: underline; text-decoration-color: var(--stone-deep);
  text-decoration-thickness: 1px; text-underline-offset: .28em;
  transition: text-decoration-color .4s var(--ease-out), color .4s var(--ease-out);
}
.contact-list a:hover { text-decoration-color: var(--saffron); }

.form { display: grid; gap: var(--sp-3); }
.field { display: grid; gap: .45rem; }
.field label { font-size: var(--step--2); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.field input, .field textarea, .field select {
  font-family: var(--font-body); font-size: var(--step-0); color: var(--ink-2);
  background: var(--white); border: 1px solid var(--stone-deep); border-radius: var(--radius);
  padding: .8rem .9rem; min-height: 48px; width: 100%;
  transition: border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--saffron-ink); box-shadow: 0 0 0 3px var(--saffron-mist);
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #C9C2B9; padding-block: var(--sp-6) var(--sp-4); font-size: var(--step--1); line-height: 1.7; view-transition-name: site-footer; }
.site-footer a { color: #E6DFD6; text-decoration: none; border-bottom: 1px solid rgba(230,223,214,.25); transition: color .35s var(--ease-out), border-color .35s var(--ease-out); }
.site-footer a:hover { color: var(--cream); border-bottom-color: var(--saffron); }

.footer-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.footer__brand { display: flex; align-items: center; gap: .75rem; margin-bottom: var(--sp-3); }
.footer__brand img { width: 46px; height: 46px; }
.footer__name { font-family: var(--font-display); font-size: var(--step-1); color: var(--cream); line-height: 1.15; }
.footer__deva { font-size: var(--step--1); color: #9A9289; }

.footer h2 { font-family: var(--font-body); font-size: var(--step--2); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #9A9289; margin-bottom: var(--sp-2); }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: .55em; }

.socials { display: flex; gap: .9rem; margin-top: var(--sp-3); }
.socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid rgba(230,223,214,.22); border-radius: 50%;
  color: #C9C2B9; border-bottom-width: 1px;
  transition: border-color .4s var(--ease-out), color .4s var(--ease-out), transform .4s var(--ease-editorial);
}
.socials a:hover { border-color: var(--saffron); color: var(--cream); transform: translateY(-2px); }
.socials svg { width: 17px; height: 17px; fill: currentColor; }

.legal { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid rgba(230,223,214,.14); font-size: var(--step--2); color: #8D8880; line-height: 1.8; }
.legal p { margin-bottom: .5em; }
.legal a { border-bottom-color: rgba(230,223,214,.2); }

.om { text-align: center; margin-top: var(--sp-5); font-family: var(--font-display); font-size: var(--step-1); font-style: italic; color: #9A9289; letter-spacing: .06em; }
.crafted { text-align: center; margin-top: var(--sp-3); font-size: var(--step--2); color: #948E86; }
.crafted a { border-bottom: 0; color: #B3ADA4; }
.crafted a:hover { color: var(--cream); }

/* --------------------------------------------------------------------------
   17. WhatsApp — a quiet circle, always within reach
   -------------------------------------------------------------------------- */
.wa {
  position: fixed; right: clamp(.9rem,3vw,1.75rem); bottom: clamp(.9rem,3vw,1.75rem);
  z-index: 90; display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--cream); color: var(--saffron-ink);
  border: 1px solid var(--stone-deep); box-shadow: var(--shadow-soft);
  transition: background-color .4s var(--ease-out), color .4s var(--ease-out),
              border-color .4s var(--ease-out), transform .4s var(--ease-editorial);
}
.wa:hover { background: var(--saffron-ink); color: var(--cream); border-color: var(--saffron-ink); transform: translateY(-2px); }
.wa svg { width: 25px; height: 25px; fill: currentColor; }

/* --------------------------------------------------------------------------
   18. Motion — everything arrives rather than appears
   -------------------------------------------------------------------------- */

/* Fade + rise. Stagger with style="--i:1" on siblings. */
[data-anim] { --i: 0; --d: calc(var(--i) * 90ms); }

[data-anim="rise"] {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur) var(--ease-out) var(--d), transform var(--dur) var(--ease-out) var(--d);
  will-change: opacity, transform;
}
[data-anim="rise"].is-in { opacity: 1; transform: none; }

/* Heading lines rise out from behind a mask. JS wraps each line. */
.line-mask { display: block; overflow: hidden; }
.line-mask > span {
  display: block; transform: translateY(105%);
  transition: transform 1.05s var(--ease-editorial) var(--d);
  will-change: transform;
}
[data-anim="lines"].is-in .line-mask > span { transform: none; }
[data-anim="lines"] { opacity: 1; }

/* Photographs unveil upward and settle out of a slow scale. */
[data-anim="mask"] { clip-path: inset(0 0 100% 0); transition: clip-path var(--dur-slow) var(--ease-editorial) var(--d); will-change: clip-path; }
[data-anim="mask"].is-in { clip-path: inset(0 0 0 0); }
[data-anim="mask"] img { transform: scale(1.09); transition: transform 2.2s var(--ease-editorial) var(--d); }
[data-anim="mask"].is-in img { transform: none; }

/* Slow settle on the hero photograph at page load. */
.hero__media img { animation: hero-settle 2.6s var(--ease-editorial) both; }
@keyframes hero-settle { from { transform: scale(1.07); } to { transform: none; } }

/* Hero copy arrives in sequence at load, without waiting for scroll. */
.hero [data-load] { opacity: 0; transform: translateY(16px); animation: load-rise .95s var(--ease-out) both; animation-delay: var(--d); }
@keyframes load-rise { to { opacity: 1; transform: none; } }

/* Scroll-linked parallax on full-bleed plates, where supported. */
@supports (animation-timeline: view()) {
  .band img, .plate img {
    animation: drift linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes drift { from { transform: translateY(-4%) scale(1.1); } to { transform: translateY(4%) scale(1.1); } }
}

/* If JS never runs, nothing may stay hidden. */
.no-js [data-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.no-js .line-mask > span { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  [data-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .line-mask > span { transform: none !important; }
  .clients__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .clients__rail::before, .clients__rail::after { display: none; }
  .hero__media img { animation: none; }
  .hero [data-load] { opacity: 1; transform: none; animation: none; }
  @view-transition { navigation: none; }
}

/* --------------------------------------------------------------------------
   19. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .wa, .nav, .band img, .hero__media, .clients__rail { display: none !important; }
  body { background: #fff; color: #000; }
  .site-footer { background: #fff; color: #000; }
  [data-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .line-mask > span { transform: none !important; }
}