/* ==========================================================================
   Healing Hands Open Hearts — design system, v11
   Rebuilt from the Wix site: 2026
   v11 direction:
     · one family (Alegreya) for display, body and the italic voice
     · one neutral hue, chroma carrying the tint (oklch hue 316)
     · terracotta as the single accent, safe as body text on every light
       surface; the brand violet demoted to structure (logo, Reiki vocabulary)
     · the deep surface is her own warm plum, never navy and never black
     · warm comes from the accent, the photography and the type, never from a
       beige body
   ========================================================================== */

/* ---------- 1. Fonts ---------- */
/* v10: one family, three faces. Alegreya is warm, bookish and calligraphic
   without being the high-contrast "editorial" serif, and its true italic means
   the site never has to pair two similar serifs or reach for a mono. */
@font-face{
  font-family: 'Alegreya';
  src: url('../fonts/alegreya-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}@font-face{
  font-family: 'Alegreya';
  src: url('../fonts/alegreya-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}@font-face{
  font-family: 'Alegreya';
  src: url('../fonts/alegreya-400i.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}/* ---------- 2. Tokens ---------- */
:root{
  /* ---- the strategy -------------------------------------------------
     Committed: her brand plum carries roughly 40% of the surface (the hero,
     the full-bleed band, the closing CTA and the footer). */

  /* ---- the neutrals -------------------------------------------------
     One hue for the whole neutral system: oklch hue 316, chroma carrying
     the tint. v10 let the pale grounds drift to 334 while the deep surfaces
     sat at 313, so the light end read mauve and the dark end read violet.
     These neutrals are warm because of the accent, the photography and the
     type, never because of the body colour. */
  --ground:      #F8F6F9;   /* the page        oklch .976 .004 315 */
  --ground-2:    #EFEBF0;   /* alt panels     oklch .945 .008 319 */
  --ground-3:    #E3DEE6;   /* tinted blocks  oklch .907 .012 313 */
  --ground-4:    #FDFCFD;   /* raised cards   oklch .992 .002 326 */
  --ground-plum: #ECE5EE;   /* plum-tinted block               */

  /* ink, plum-tinted near-black */
  --ink:    #2B222F;
  --ink-2:  #514655;
  --muted:  #615566;
  --line:   rgba(43, 36, 48, .15);
  --line-2: rgba(43, 36, 48, .28);

  /* the deep surface: warm plum, her own colour. Never navy, never black. */
  --deep:         #2A1C31;
  --deep-2:       #1C1121;
  --deep-3:       #44304D;
  --on-deep:      #F8F0EA;
  --on-deep-2:    #C3B7C9;
  --on-deep-accent:#EF9963;

  /* ---- the accent ----------------------------------------------------
     Terracotta: the lamp, the clay, the underline, the marks. It is
     5.16:1 on the page ground, so it is safe as body text by default.
     On a plum surface it is only 2.89:1, so use --on-deep-accent there. */
  --accent:       #A74F21;
  --accent-deep:  #863B12;
  --accent-soft:  #FFCCB6;

  /* the logo's own violet, kept to the mark */
  --brand:      #6B3F86;
  --brand-deep: #4F2A65;
  --brand-soft: #B6A3D2;

  /* ---- form state colours ---------------------------------------------
     Functional, not decorative: a form has to say "this field is wrong" and
     "that worked" in a way nobody has to learn. They are kept deliberately
     outside the decorative palette so they can never be mistaken for the
     terracotta accent. */
  --err-border:  #A3271F;
  --err-text:    #8F1D16;
  --err-bg:      #FDECEA;
  --err-line:    #F4C7C2;
  --ok-text:     #1D5230;
  --ok-bg:       #E6F2E9;
  --ok-line:     #B3DDC2;

  /* semantic */
  --bg:          var(--ground);
  --bg-alt:      var(--ground-2);
  --bg-sage:     var(--ground-3);
  --fg:          var(--ink);
  --fg-soft:     var(--muted);
  --on-dark:     var(--on-deep);
  --on-dark-soft:var(--on-deep-2);

  /* type */
  --font-display: 'Alegreya', Georgia, 'Times New Roman', serif;
  --font-body:    'Alegreya', Georgia, 'Times New Roman', serif;
  --font-quote:   'Alegreya', Georgia, serif;

  /* motion: ease-out, no bounce */
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* semantic z-index scale */
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 900;
  --z-toast: 1000;

  --step--1: clamp(0.9rem, 0.87rem + 0.15vw, 0.97rem);
  --step-0:  clamp(1.04rem, 1.01rem + 0.15vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.15rem + 0.26vw, 1.33rem);
  --step-2:  clamp(1.45rem, 1.33rem + 0.62vw, 1.82rem);
  --step-3:  clamp(1.7rem, 1.52rem + 1.05vw, 2.3rem);
  --step-4:  clamp(2.05rem, 1.8rem + 1.6vw, 2.85rem);
  --step-5:  clamp(2.45rem, 2.05rem + 2.2vw, 3.6rem);

  /* space */
  --gutter:  clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);
  --section: clamp(3.25rem, 2.4rem + 4.2vw, 5.75rem);
  --maxw: 1180px;
  --maxw-narrow: 760px;

  --radius-s: 8px;
  --radius:   16px;
  --radius-l: 24px;
  --radius-xl: 34px;
  /* the arch. The source photograph is cropped to its own solid band so the
     black frame the original was masked on can never show. */
  --radius-arch: 50% 50% 26px 26px / 26% 26% 26px 26px;

  --shadow-s: 0 1px 2px rgba(38, 32, 47, .04), 0 2px 8px rgba(38, 32, 47, .045);
  --shadow:   0 2px 6px rgba(38, 32, 47, .04), 0 14px 34px rgba(38, 32, 47, .07);
  --shadow-l: 0 10px 24px rgba(38, 32, 47, .07), 0 32px 64px rgba(38, 32, 47, .10);

  --btn-shadow: var(--accent-soft);
  --btn-fill: var(--ground);
  --btn-hover-fg: var(--ink);
  --header-h: 74px;
}/* ---------- 2b. Paper grain ----------
   A fixed, pointer-events-none noise layer. Real paper has tooth; a flat
   digital fill does not. Kept off scrolling containers so it never triggers
   a continuous GPU repaint. */
.grain{
  position: fixed; inset: 0; z-index: var(--z-toast);
  pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}/* every pressable thing gives a little physical feedback */
a:active, button:active, .btn:active, .card:active, [role='button']:active{
  transform: translateY(1px) scale(.985);
}/* .btn:hover (0,2,0) was beating the global :active rule, so buttons lost
   their press feedback. This restores it. */
.btn:active{ transform: translateY(1px) scale(.985) !important; }/* ---------- 3. Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }*{ margin: 0; }html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1.5rem); }body{
  font-family: var(--font-body);
  font-variant-numeric: lining-nums proportional-nums;
  font-size: var(--step-0);
  line-height: 1.68;
  letter-spacing: 0;
  color: var(--fg);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}/* the chart sheet: a faint printed grid, not a texture overlay */
body::before{
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 55% at 12% 0%, rgba(255, 246, 225, .95) 0%, transparent 60%),
    radial-gradient(55% 45% at 92% 100%, rgba(243, 224, 208, .5) 0%, transparent 62%);
}img, svg, video{ display: block; max-width: 100%; height: auto; }button, input, select, textarea{ font: inherit; color: inherit; }a{ color: var(--brand); text-underline-offset: .18em; }a:hover{ color: var(--brand); }ul, ol{ padding: 0; }li{ list-style: none; }h1, h2, h3, h4, h5, h6{
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.014em;
  text-wrap: balance;
}h1{ font-weight: 500; letter-spacing: -.026em; }p{ text-wrap: pretty; }::selection{ background: var(--accent-soft); color: var(--ink); }:focus-visible{ outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }/* ---------- 4. Utilities ---------- */
.container{ width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }.container--narrow{ max-width: var(--maxw-narrow); }.section{ padding-block: var(--section); }/* four spacing moods, assigned deliberately rather than by default */
.section--tight{ padding-block: clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem); }.section--airy{ padding-block: clamp(5rem, 3.5rem + 6vw, 8.5rem); }.section--cta{ padding-top: clamp(1rem, 2rem + 2vw, 3.5rem); }.section--warm{ background: var(--bg-alt); }.section--sage{ background: var(--bg-sage); }.center{ text-align: center; }.visually-hidden, .vh{
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}.skip-link{
  position: absolute; left: 1rem; top: -100px; z-index: var(--z-overlay);
  background: var(--deep); color: var(--on-deep); padding: .8rem 1.25rem;
  border-radius: var(--radius-s); font-weight: 600; text-decoration: none;
  transition: top .2s var(--ease);
}.skip-link:focus{ top: 1rem; color: var(--on-deep); }/* v10: not a tracked kicker above every heading. A short italic lead-in that
   reads as a sentence introducing the section, used sparingly. */
.eyebrow{
  display: block;
  font-family: var(--font-body); font-style: italic;
  font-size: var(--step-0); font-weight: 400; letter-spacing: 0;
  line-height: 1.5; color: var(--muted);
  margin-bottom: .55rem;
}a.eyebrow{ color: var(--muted); text-decoration: none; }a.eyebrow:hover{ color: var(--accent-deep); text-decoration: underline; }.eyebrow--center{ text-align: center; }.lede{ font-size: var(--step-1); line-height: 1.6; color: var(--fg-soft); }.script{
  font-family: var(--font-body); font-style: italic;
  font-size: 1.02rem; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  line-height: 1.45; color: var(--muted);
}/* ---------- 5. Buttons ---------- */
.btn{
  --btn-bg: var(--brand);
  --btn-fg: var(--on-deep);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .85rem 1.6rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent; border-radius: 4px;
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
  letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}.btn{
  background-image: linear-gradient(var(--btn-fill, var(--btn-fg)), var(--btn-fill, var(--btn-fg)));
  background-repeat: no-repeat; background-position: left center; background-size: 0% 100%;
  transition: background-size .34s var(--ease), color .34s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}.btn:hover{
  color: var(--btn-hover-fg, var(--btn-bg));
  background-size: 100% 100%;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--btn-shadow, var(--accent-soft));
}.btn:active{ transform: translate(0, 0); box-shadow: none; }.btn svg{ width: 18px; height: 18px; flex: none; }.btn--primary{ --btn-bg: var(--ink); --btn-fg: var(--ground); --btn-shadow: var(--accent-soft); --btn-fill: var(--ground); --btn-hover-fg: var(--ink); }.btn--ghost{ --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line-2); --btn-shadow: transparent; --btn-fill: var(--ink); --btn-hover-fg: var(--ground); }.btn--ghost:hover{ border-color: var(--ink); }.hero .btn--ghost, .page-hero .btn--ghost, /* a filled button plus a ghost is the SaaS default. This band uses a filled
   button and a plain text link instead. */
.cta-band .btn--ghost{
  --btn-fg: var(--on-deep); border-color: transparent; --btn-shadow: transparent;
  --btn-fill: var(--on-deep); --btn-hover-fg: var(--on-deep-accent);
  padding-inline: .35rem;
  text-decoration: underline; text-underline-offset: .28em;
  text-decoration-color: rgba(247,239,230,.4);
}.hero .btn--ghost:hover, .page-hero .btn--ghost:hover, .cta-band .btn--ghost:hover{ --btn-bg: transparent; text-decoration-color: var(--on-deep-accent); }.hero .btn--primary, .page-hero .btn--primary, .cta-band .btn--primary{ --btn-bg: var(--on-deep); --btn-fg: var(--deep); --btn-shadow: var(--on-deep-accent); --btn-fill: var(--deep); --btn-hover-fg: var(--on-deep); }.btn--block{ width: 100%; }.btn-row{ display: flex; flex-wrap: wrap; gap: .75rem; }.btn-row--center{ justify-content: center; }.site-header{
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgba(251, 248, 243, .96);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}.site-header--scrolled{ border-bottom-color: var(--line); box-shadow: 0 1px 20px rgba(38, 32, 47, .05); }.site-header__inner{
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: var(--header-h);
}.brand{ display: inline-flex; align-items: center; gap: .8rem; min-height: 48px; text-decoration: none; color: inherit; }.brand__mark{ width: 46px; height: 46px; flex: none; border-radius: 50%; }.brand__text{ display: flex; flex-direction: column; line-height: 1.2; }.brand__name{ font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; color: var(--deep); letter-spacing: -.015em; }.brand__role{ font-size: .7rem; letter-spacing: 0; text-transform: none; color: var(--muted); font-weight: 500; }.nav{ display: flex; align-items: center; gap: .3rem; }.nav__link{
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .5rem .9rem;
  font-size: .95rem; font-weight: 500; color: var(--ink-2);
  text-decoration: none; border-radius: 2px;
  transition: color .28s var(--ease);
}.nav__roll{ display: block; position: relative; overflow: hidden; }.nav__roll > span{ display: block; transition: transform .3s var(--ease); }.nav__roll::after{
  content: attr(data-label);
  position: absolute; left: 0; top: 0; right: 0;
  transform: translateY(110%);
  transition: transform .3s var(--ease);
  color: var(--accent-deep);
}.nav__link:hover .nav__roll > span,
.nav__link:focus-visible .nav__roll > span{ transform: translateY(-110%); }.nav__link:hover .nav__roll::after,
.nav__link:focus-visible .nav__roll::after{ transform: translateY(0); }.nav__link[aria-current='page']{ color: var(--accent-deep); font-weight: 600; }.site-header__actions{ display: flex; align-items: center; gap: .75rem; }.nav-toggle{
  display: none;
  width: 48px; height: 48px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-2); border-radius: 12px; cursor: pointer;
}.nav-toggle span{ display: block; width: 20px; height: 2px; background: var(--deep); border-radius: 2px; position: relative; transition: background-color .2s var(--ease); }.nav-toggle span::before, .nav-toggle span::after{
  content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: var(--deep); border-radius: 2px;
  transition: transform .25s var(--ease), top .2s var(--ease);
}.nav-toggle span::before{ top: -6px; }.nav-toggle span::after{ top: 6px; }.nav-toggle[aria-expanded='true'] span{ background: transparent; }.nav-toggle[aria-expanded='true'] span::before{ top: 0; transform: rotate(45deg); }.nav-toggle[aria-expanded='true'] span::after{ top: 0; transform: rotate(-45deg); }.nav-drawer{
  position: fixed; inset: 0; z-index: var(--z-header);
  background: var(--deep-2); color: var(--on-dark);
  padding: 1.25rem var(--gutter) 2.5rem;
  display: flex; flex-direction: column;
  transform: translateY(-100%);
  transition: transform .38s var(--ease);
  overflow-y: auto;
}.nav-drawer[data-open='true']{ transform: translateY(0); }.nav-drawer__top{ display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); }.nav-drawer__close{
  width: 48px; height: 48px; display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px; color: var(--on-deep); cursor: pointer;
}.nav-drawer__close svg{ width: 20px; height: 20px; }.nav-drawer__nav{ display: flex; flex-direction: column; gap: .25rem; padding-top: 1.5rem; }.nav-drawer__nav a{
  display: flex; align-items: center; min-height: 56px; padding: .5rem .25rem;
  font-family: var(--font-display); font-size: 1.55rem; font-weight: 500;
  color: var(--on-dark); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.1);
}.nav-drawer__nav a[aria-current='page']{ color: var(--accent-soft); }.nav-drawer__foot{ margin-top: auto; padding-top: 2rem; display: grid; gap: .75rem; }.nav-drawer__contact{ font-size: .95rem; color: var(--on-dark-soft); }.nav-drawer__contact a{ color: var(--accent-soft); text-decoration: none; }body.nav-open{ overflow: hidden; }@keyframes marquee{ from { transform: translateX(0); } to { transform: translateX(-50%); } }/* ---------- 8. Hero — saturated brand field, oversized display type ---------- */
.hero{
  position: relative;
  background: var(--ground);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
}/* v11: the hero is a photograph you walk into, not a two-column product
   panel. The words sit on the picture. */
.hero--full{
  min-height: clamp(520px, 84svh, 800px);
  display: grid; align-items: end;
  padding-block: clamp(3rem, 2rem + 6vw, 6rem);
  background: var(--deep);
  color: var(--on-deep);
  isolation: auto;
}.hero--full .hero__bg{
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 58% 46%;
}.hero--full .hero__scrim{
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(18,11,24,.95) 0%, rgba(24,15,30,.86) 36%, rgba(30,18,37,.55) 70%, rgba(35,20,44,.34) 100%),
    linear-gradient(to right, rgba(20,12,27,.78) 0%, rgba(20,12,27,.26) 62%, transparent 100%);
}.hero--full .hero__overlay{ position: relative; z-index: 2; }.hero.hero--full h1{ color: var(--on-deep); }.hero.hero--full h1 .alt{ color: var(--on-deep); }.hero.hero--full h1 em{ color: var(--on-deep-accent); }.hero.hero--full .hero__lede{ color: var(--on-deep-2); }.hero.hero--full .hero__who{
  font-family: var(--font-body); font-style: italic;
  font-size: 1.02rem; color: var(--on-deep-accent); margin-bottom: 1.1rem;
}.hero.hero--full .btn--primary{
  --btn-bg: var(--on-deep); --btn-fg: var(--deep);
  --btn-shadow: var(--accent); --btn-fill: var(--deep); --btn-hover-fg: var(--deep);
}.hero.hero--full .mark path{ stroke: var(--on-deep-accent); }.hero .eyebrow{ color: var(--accent-deep); }.hero h1{
  font-size: clamp(2.3rem, 1.1rem + 4.4vw, 5.4rem);
  font-weight: 600;
  line-height: .96;
  letter-spacing: -.028em;
  margin-block: .5rem 1.5rem;
  color: var(--ink);
}/* each line is set, never re-wrapped, so the font swap cannot shift the page */
.hero h1 .line{ display: block; white-space: nowrap; }/* the one expressive moment: a hand-drawn terracotta underline draws itself
   under "guided here." Handmade, not parametric. */
.hero h1 .line--marked{ position: relative; display: inline-block; }.hero h1 .mark{
  position: absolute; left: -.015em; right: -.015em; bottom: -.16em;
  width: calc(100% + .03em); height: .2em;
  overflow: visible; pointer-events: none;
}.hero h1 .mark path{
  fill: none; stroke: var(--accent); stroke-width: 3.4;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
}@media (prefers-reduced-motion: no-preference){
  .hero h1 .mark path {
    stroke-dasharray: 420; stroke-dashoffset: 420;
    animation: markdraw 1.05s var(--ease) .45s forwards;
  }
  @keyframes markdraw { to { stroke-dashoffset: 0; } }
}@media (prefers-reduced-motion: reduce){
  .hero h1 .mark path { stroke-dashoffset: 0; }
}.hero h1 em{ font-style: italic; color: var(--ink-2); }.hero h1 .alt{ color: inherit; }.hero__lede{ font-size: var(--step-1); color: var(--ink-2); max-width: 46ch; }.hero__cta{ margin-top: 1.75rem; }.hero .btn--primary{ --btn-bg: var(--ink); --btn-fg: var(--ground); --btn-shadow: var(--accent); }.hero .btn--ghost{ --btn-fg: var(--ink); border-color: var(--line-2); }.hero .btn--ghost:hover{ --btn-bg: var(--ground-2); --btn-fg: var(--ink); border-color: var(--ink); }/* the frame itself is the arch; the image sits inside it */
/* a wax seal, overlapping the corner — the memorable object */
@media (max-width: 900px){
  /* keep the seal inside the frame on narrow screens */
    }/* ---------- 8b. The letter: prose with a portrait breaking the column ---------- */
.letter{ padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }.letter__grid{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start;
}.letter__grid--flip{ grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }.letter__body{ max-width: 56ch; }.letter__body h2{ margin-bottom: 1.1rem; }.letter__body p{ margin-bottom: 1.05rem; color: var(--ink-2); }.letter__pull{
  font-family: var(--font-body); font-style: italic;
  font-size: var(--step-2); line-height: 1.32; color: var(--ink);
  margin: 1.8rem 0 !important; padding-left: 1.4rem;
  border-left: 1px solid var(--accent);
}.letter__more, .routes__more{ margin-top: 1.5rem !important; }.section__lede{ color: var(--muted); font-size: var(--step-0); max-width: 56ch; }.letter__more a, .routes__more a{
  color: var(--accent-deep); text-decoration: none;
  font-weight: 600; border-bottom: 1px solid var(--accent-soft);
  padding-bottom: 1px;
}.letter__more a:hover, .routes__more a:hover{ border-bottom-color: var(--accent); }.letter__figure{ position: relative; margin: 0; }.letter__figure img{
  width: 100%; border-radius: var(--radius-l); display: block;
  box-shadow: var(--shadow);
}.letter__figure figcaption{
  font-family: var(--font-body); font-style: italic;
  font-size: .95rem; color: var(--muted); margin-top: .8rem;
}@media (max-width: 900px){
  .letter__grid, .letter__grid--flip { grid-template-columns: 1fr; }
  .letter__grid--flip .letter__figure { order: 2; }
}/* ---------- 9. Inner page hero (light) ---------- */
.page-hero{
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(85% 120% at 94% 4%, rgba(240, 233, 241, .9) 0%, transparent 58%),
    radial-gradient(70% 90% at 2% 100%, rgba(244, 227, 214, .75) 0%, transparent 62%),
    var(--ground);
  color: var(--ink);
  padding-block: clamp(2.75rem, 2rem + 4vw, 5rem);
}.page-hero__inner{ max-width: 900px; }.page-hero h1{
  font-size: clamp(2.6rem, 1.2rem + 4.8vw, 5.8rem);
  font-weight: 700; font-stretch: 112%;
  margin-block: .75rem 1.15rem;
  letter-spacing: -.032em;
  color: var(--ink);
}.page-hero p{ color: var(--ink-2); font-size: var(--step-1); max-width: 60ch; }.page-hero .eyebrow{ color: var(--accent-deep); }.page-hero .eyebrow::before{ background: currentColor; }.page-hero .btn--primary{ --btn-bg: var(--ink); --btn-fg: var(--ground); --btn-shadow: var(--accent); }.page-hero .btn--ghost{ --btn-fg: var(--ink); border-color: var(--line-2); }.page-hero .btn--ghost:hover{ --btn-bg: var(--ground-2); --btn-fg: var(--ink); border-color: var(--ink); }.breadcrumb{ margin-bottom: 1.5rem; }.breadcrumb ol{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .82rem; }.breadcrumb li{ display: flex; align-items: center; gap: .5rem; color: var(--muted); }.breadcrumb a{ color: var(--muted); text-decoration: none; }.breadcrumb a:hover{ color: var(--accent-deep); text-decoration: underline; }.breadcrumb li + li::before{ content: '/'; color: var(--line-2); }.breadcrumb [aria-current='page']{ color: var(--ink); font-weight: 500; }/* controlled irregularity: a deliberate vertical stagger, margin not transform
   so it cannot fight the scroll-reveal animation */
@media (min-width: 900px){
  .bento > *:nth-child(even) { margin-top: 3rem; }
}@media (max-width: 900px){
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento > *, .bento > .bento--wide, .bento > .bento--tall, .bento > .bento--half { grid-column: span 1; grid-row: auto; }
  .bento > .bento--tall { grid-column: span 2; }
}@media (max-width: 560px){
  .bento { grid-template-columns: 1fr; }
  .bento > *, .bento > .bento--tall { grid-column: span 1; }
}/* ---------- 10a. Grids ---------- */
.grid{ display: grid; gap: clamp(1.25rem, .8rem + 1.6vw, 2rem); }@media (max-width: 980px){ .grid12 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }@media (max-width: 620px){ .grid12 { grid-template-columns: 1fr; } }.grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }@media (max-width: 980px){
  .grid--sidebar { grid-template-columns: 1fr; }
}@media (max-width: 720px){
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}.band__quote .script{
  display: block; font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4rem);
  color: var(--on-deep); margin-bottom: .75rem; line-height: 1.05;
}@media (max-width: 640px){ .trusts { grid-template-columns: 1fr; } }@media (max-width: 900px){ .helps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }@media (max-width: 560px){ .helps { grid-template-columns: 1fr; } }@media (max-width: 420px){ .helps { grid-template-columns: 1fr; } }.fees-table{ border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; background: var(--ground-4); }.fees-table table{ width: 100%; border-collapse: collapse; }.fees-table th, .fees-table td{ padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid var(--line); }.fees-table thead th{
  font-size: .74rem; letter-spacing: 0; text-transform: none;
  color: var(--muted); font-weight: 600; background: var(--ground-2);
}.fees-table tbody tr:last-child th, .fees-table tbody tr:last-child td{ border-bottom: 0; }.fees-table tbody th{ font-weight: 500; font-size: 1rem; }.fees-table tbody th a{ color: var(--ink); text-decoration: none; }.fees-table tbody th a:hover{ color: var(--brand); text-decoration: underline; }.fees-table td{ color: var(--ink-2); font-size: .95rem; }.fees-table td:last-child{ font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; color: var(--deep-3); }@media (max-width: 560px){
  .fees-table th, .fees-table td { padding: .8rem .85rem; }
  .fees-table thead th:nth-child(2), .fees-table tbody td:nth-child(2) { display: none; }
}.areas{
  display: flex; flex-wrap: wrap; gap: .5rem;
  max-width: 900px; margin-inline: auto;
}.areas li{
  padding: .45rem 1rem; border-radius: 999px;
  background: var(--ground-4); border: 1px solid var(--line);
  font-size: .9rem; color: var(--ink-2);
}.who{
  padding: 1.25rem 1.4rem; border-radius: var(--radius);
  background: var(--ground-plum);
}.who__label{
  font-family: var(--font-body); font-size: .74rem; letter-spacing: 0; text-transform: none; color: var(--brand); font-weight: 600; margin-bottom: .5rem;
}.who__text{ font-size: .96rem; color: var(--ink-2); }.who__text strong{ color: var(--ink); }@media (max-width: 640px){ .facts { grid-template-columns: 1fr; } }/* ---------- 10d. The session chart — the signature moment ---------- */
.chart{ position: relative; padding-left: 0; }.chart__rail{
  position: absolute; left: 0; top: .5rem; bottom: .5rem; width: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 100' preserveAspectRatio='none'%3E%3Cpath d='M1.5 0C.6 25 2.4 55 1.2 100' fill='none' stroke='%23C9A98F' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  transform: scaleY(0); transform-origin: top;
  transition: transform .55s var(--ease);
}.chart[data-drawn='true'] .chart__rail{ transform: scaleY(1); }.chart__mark{
  position: relative;
  display: grid; grid-template-columns: 4.5rem 8.5rem minmax(0, 1fr);
  gap: .25rem .9rem; align-items: baseline;
  padding-block: .42rem;
  border-bottom: 1px solid var(--line);
}.chart__mark::before{
  content: ''; position: absolute; left: -1px; top: 50%;
  width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: var(--brand);
  transform: scale(.4); opacity: .25;
  transition: transform .4s var(--ease), opacity .4s var(--ease), background-color .4s var(--ease);
}.chart[data-drawn='true'] .chart__mark::before{ transform: scale(1); opacity: 1; }.chart__time{
  font-family: var(--font-quote); font-style: italic;
  font-size: .98rem; color: var(--muted);
}.chart__code{
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 500;
  letter-spacing: .005em; color: var(--brand);
}.chart__label{ font-size: .92rem; color: var(--muted); }.chart[data-drawn='true'] .chart__mark{ animation: mark-in .5s var(--ease) both; }.chart[data-drawn='true'] .chart__mark:nth-child(2){ animation-delay: .06s; }.chart[data-drawn='true'] .chart__mark:nth-child(3){ animation-delay: .12s; }.chart[data-drawn='true'] .chart__mark:nth-child(4){ animation-delay: .18s; }.chart[data-drawn='true'] .chart__mark:nth-child(5){ animation-delay: .24s; }.chart[data-drawn='true'] .chart__mark:nth-child(6){ animation-delay: .30s; }.chart[data-drawn='true'] .chart__mark:nth-child(7){ animation-delay: .36s; }.chart[data-drawn='true'] .chart__mark:nth-child(8){ animation-delay: .42s; }.chart[data-drawn='true'] .chart__mark:nth-child(9){ animation-delay: .48s; }@keyframes mark-in{
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}/* the pulse travelling down the rail while the chart draws */
.chart[data-drawn='true'] .chart__rail::after{
  content: ''; position: absolute; left: -2px; top: 0; width: 6px; height: 26px;
  background: linear-gradient(to bottom, rgba(207, 63, 28, 0), var(--accent));
  animation: pulse-down 1.1s var(--ease) both;
}@keyframes pulse-down{
  from { transform: translateY(-30px); opacity: 0; }
  30% { opacity: 1; }
  to { transform: translateY(calc(100% + 30px)); opacity: 0; }
}@media (prefers-reduced-motion: reduce){
  .chart[data-drawn='true'] .chart__rail::after { display: none; }
  .chart[data-drawn='true'] .chart__mark { animation: none; }
}/* idle: the marks breathe while the page is at rest */
@media (prefers-reduced-motion: no-preference){
  .chart__mark::before { animation: breathe 4.2s var(--ease) infinite; }
  .chart[data-paused] .chart__mark::before { animation-play-state: paused; }
  .chart__mark:nth-child(3n)::before { animation-delay: .5s; }
  .chart__mark:nth-child(3n+1)::before { animation-delay: 1s; }
  @keyframes breathe {
    0%, 100% { transform: scale(.72); opacity: .5; }
    50% { transform: scale(1); opacity: 1; }
  }
}/* the services index: a row that draws its chart */
.svcrow{
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); align-items: start;
  padding-block: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  border-top: 1px solid var(--line);
}.svcrow:last-child{ border-bottom: 1px solid var(--line); }.svcrow__num{
  font-family: var(--font-quote); font-style: italic;
  font-size: 1.05rem; color: var(--accent-deep); margin-bottom: .35rem;
}.svcrow__title{ font-size: var(--step-2); margin-bottom: .5rem; }.svcrow__title a{ color: inherit; text-decoration: none; }.svcrow__title a:hover{ color: var(--accent-deep); }.svcrow__meta{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.1rem;
  margin-top: .9rem; font-family: var(--font-body); font-size: .8rem; color: var(--muted);
}.svcrow__price{
  color: var(--ink); font-weight: 600;
  font-size: var(--step-1); line-height: 1;
  font-variant-numeric: lining-nums;
}.svcrow__desc{ font-size: .96rem; color: var(--muted); max-width: 46ch; margin-top: .6rem; }.svcrow .chart__rail{ background: var(--line); transition: background-color .4s var(--ease); }.svcrow:hover .chart__rail,
.svcrow:focus-within .chart__rail{ background: var(--accent); }.svcrow:hover .svcrow__title a,
.svcrow:focus-within .svcrow__title a{ color: var(--accent-deep); }@media (max-width: 900px){
  .svcrow { grid-template-columns: 1fr; }
  .svcrow--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.svcrow__note { font-size: .95rem; color: var(--muted); max-width: 46ch; padding-top: .3rem; }
.svcrow__note a { color: var(--accent-deep); font-weight: 600; text-decoration: none; }
.svcrow__note a:hover { text-decoration: underline; }
.svcrow__chart { opacity: 1; }
}@media (max-width: 820px){ .regions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }@media (max-width: 560px){ .regions { grid-template-columns: 1fr; } }@media (max-width: 760px){
  .axis__row { grid-template-columns: 1fr; gap: 1rem; }
}/* ---------- 10g. Full-bleed media family ---------- */
.fullbleed{
  position: relative; overflow: hidden;
  background-color: var(--deep);
  /* the same photograph as a background layer: identical framing to the
     <img> below, so the band still renders if the image layer is skipped */
  background-image: url('../img/room-dusk.webp');
  background-size: cover; background-position: center;
  min-height: clamp(400px, 66svh, 680px);
  display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr;
}/* the photograph, the scrim and the caption share one grid cell, so the photo
   is a real laid-out box rather than a composited layer. */
.fullbleed > img{
  grid-area: 1 / 1; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}.fullbleed::after{
  content: ''; grid-area: 1 / 1; z-index: 1;
  background: linear-gradient(to top, rgba(20,12,26,.95) 0%, rgba(28,18,35,.86) 34%, rgba(38,25,47,.52) 70%, rgba(43,29,51,.26) 100%);
}.fullbleed__type{
  grid-area: 1 / 1; z-index: 2; align-self: end;
  padding: clamp(3rem, 2rem + 5vw, 6rem) var(--gutter);
  color: var(--on-deep);
}.fullbleed__type .script{
  display: block; font-family: var(--font-quote); font-style: italic;
  font-size: clamp(2rem, 1.1rem + 2.9vw, 3.6rem); line-height: 1.02;
  margin-bottom: .85rem; color: var(--on-deep); max-width: 11ch;
}.fullbleed__type p{ color: var(--on-deep-2); font-size: var(--step-1); line-height: 1.5; max-width: 40ch; }/* ---------- 10h. Ways in: three lines, not three cards ---------- */
.routes{ margin-top: 1.75rem; border-top: 1px solid var(--line); }.routes li{
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: .35rem 2rem; padding-block: 1.15rem;
  border-bottom: 1px solid var(--line);
}.routes__title{ font-size: var(--step-1); letter-spacing: -.015em; }.routes__text{ color: var(--muted); }@media (max-width: 700px){
  .routes li { grid-template-columns: 1fr; gap: .2rem; }
}/* ---------- 10i. One session, drawn ---------- */
.draw{
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 1rem + 3.5vw, 4.5rem); align-items: start;
}.draw__intro p{ color: var(--ink-2); margin-bottom: 1rem; max-width: 46ch; }.draw__more{ margin-top: 1.4rem; }.draw__more a{ color: var(--accent-deep); font-weight: 600; text-decoration: none;
                border-bottom: 1px solid var(--accent-soft); padding-bottom: 1px; }.draw__more a:hover{ border-bottom-color: var(--accent); }.draw__chart{
  /* the last floating card on the page: put the drawing on the paper,
     ruled rather than boxed, like every other element in v11 */
  margin: 0; padding: clamp(1rem, .8rem + 1vw, 1.5rem) 0 0;
  border-top: 1px solid var(--line-2);
}.draw__list{ list-style: none; display: grid; }.draw__list li{
  position: relative; display: grid;
  grid-template-columns: 3.4rem 1.1rem minmax(0, 8rem) minmax(0, 1fr);
  align-items: baseline; gap: .5rem;
  padding-block: .62rem;
}.draw__time{ font-size: .86rem; color: var(--muted); font-variant-numeric: lining-nums; }.draw__mark{
  width: 8px; height: 8px; border-radius: 50%; background: var(--brand);
  align-self: center;
}.draw__label{ font-size: .92rem; font-weight: 600; color: var(--brand-deep); }.draw__what{ color: var(--ink-2); font-size: .95rem; }/* the hand-drawn rail down the left of the drawing */
.draw__list{ position: relative; }.draw__list::before{
  content: ''; position: absolute; left: 3.9rem; top: 1.1rem;
  width: 2px; height: calc(100% - 2.2rem);
  background: linear-gradient(to bottom, transparent, var(--line-2) 10%, var(--line-2) 90%, transparent);
}.draw__chart figcaption{
  margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--line);
  font-size: .95rem; color: var(--muted);
}@media (max-width: 900px){
  .draw { grid-template-columns: 1fr; }
  .draw__list li { grid-template-columns: 3.1rem 1.1rem minmax(0, 1fr); }
  .draw__list li .draw__what { grid-column: 1 / -1; }
}/* ---------- 10j. The close ---------- */
.close{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 1rem + 3.5vw, 4.5rem); align-items: start;
}.close__quote{ margin: 0; }.close__quote p{
  font-family: var(--font-body); font-style: italic;
  font-size: var(--step-2); line-height: 1.35; color: var(--ink);
}.close__quote footer{
  margin-top: 1rem; font-size: .95rem; color: var(--muted);
}.close__body h2{ margin-bottom: .6rem; }.close__body p{ color: var(--ink-2); }.close__price{ color: var(--ink-2); margin-top: 1rem; }.close .btn-row{ margin-top: 1.75rem; }@media (max-width: 900px){ .close { grid-template-columns: 1fr; } }/* ---------- 10k. What people arrive with, and what is honest ---------- */
.arrives{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 clamp(1.5rem, 1rem + 2vw, 3rem);
}.arrives li{ padding-block: 1.1rem; border-top: 1px solid var(--line); }.arrives strong{ display: block; font-size: var(--step-1); margin-bottom: .3rem; letter-spacing: -.015em; }.arrives span{ color: var(--muted); font-size: .96rem; }.honest{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 1rem + 3vw, 4rem); }.honest__col{ padding-top: 1.1rem; border-top: 2px solid var(--brand); }.honest__col--no{ border-top-color: var(--accent); }.honest__col h3{ font-size: var(--step-2); margin-bottom: 1rem; }.honest__col:first-child h3{ color: var(--brand-deep); }.honest__col--no h3{ color: var(--accent-deep); }.honest__list{ list-style: none; display: grid; gap: .6rem; }.honest__list li{ position: relative; padding-left: 1.1rem; color: var(--ink-2); }.honest__list li::before{
  content: ''; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand);
}.honest__col--no .honest__list li::before{ background: var(--accent); }.honest__note{
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  background: var(--ground-2); border-radius: var(--radius-l);
}.honest__note h3{ font-size: var(--step-1); margin-bottom: 1rem; max-width: 46ch; }.honest__safety{ list-style: none; display: grid; gap: .55rem; margin-bottom: 1rem; }.honest__safety li{ position: relative; padding-left: 1.1rem; color: var(--ink-2); }.honest__safety li::before{
  content: ''; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}.honest__note p{ color: var(--muted); }@media (max-width: 760px){ .honest { grid-template-columns: 1fr; } }/* ---------- 11. Cards ---------- */
.card{
  background: var(--ground-4);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  box-shadow: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}.card--lift:hover{ transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--accent-soft); border-color: var(--accent-soft); }.card--soft{ background: var(--ground-plum); border-color: transparent; box-shadow: none; }.card--sage{ background: var(--ground-3); border-color: transparent; box-shadow: none; }.card--lilac{ background: var(--ground-plum); border-color: transparent; box-shadow: none; }.card__title{ font-size: var(--step-2); margin-bottom: .6rem; }.card__title a{ color: inherit; text-decoration: none; }.card__title a:hover{ color: var(--accent-deep); }.card__body{ color: var(--fg-soft); }.card__icon{
  width: 50px; height: 50px; display: grid; place-items: center;
  border-radius: 14px; margin-bottom: 1.1rem;
  background: var(--ground-plum); color: var(--brand);
}.card__icon svg{ width: 23px; height: 23px; }.card--sage .card__icon{ background: rgba(255,255,255,.7); color: var(--brand-deep); }.card--warm .card__icon{ background: rgba(255,255,255,.7); color: var(--accent-deep); }/* ---------- 12. Split / organic frames ---------- */
.split{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}.split--wide-left{ grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }.split--sticky{ align-items: start; }.split__media{ position: relative; }.split__media img{ width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-l); }.split__media--arch img{ border-radius: var(--radius-arch); }@media (max-width: 900px){ .split__badge { right: 1rem; bottom: -1rem; } }/* ---------- 13. Feature lists ---------- */
.features{ display: grid; gap: 1rem; }.features li{ display: flex; gap: .85rem; align-items: flex-start; }.features svg{ width: 22px; height: 22px; flex: none; margin-top: .22rem; color: var(--brand); }.features strong{ display: block; font-weight: 600; color: var(--ink); }.features p{ font-size: .93rem; color: var(--muted); }.checklist{ display: grid; gap: .75rem; }.checklist li{
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1rem 1.15rem;
  background: var(--ground-4); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: .98rem;
}.checklist svg{ width: 20px; height: 20px; flex: none; margin-top: .2rem; color: var(--brand); }@media (max-width: 720px){ .duality { grid-template-columns: 1fr; } }@media (max-width: 860px){
  .axis__step { grid-template-columns: 1fr; gap: .3rem; }
  .axis__step::before { display: none; }
  .axis__stepcode { background: none; padding-right: 0; }
}.steps{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, .6rem + 1.4vw, 2rem); counter-reset: step; }.steps__item{ position: relative; padding-top: 2.75rem; }.steps__item::before{
  counter-increment: step; content: '0' counter(step);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  color: var(--accent-deep);
  letter-spacing: .04em;
}.steps__item{ padding-top: 2.5rem; }.steps__item::after{ display: none; }.steps__title{ font-size: var(--step-1); margin-bottom: .45rem; }.steps__text{ font-size: .93rem; color: var(--muted); }@media (max-width: 860px){
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .steps__item::after { display: none; }
}@media (max-width: 520px){ .steps { grid-template-columns: 1fr; } }/* ---------- 17. Story chapters + anchor nav ---------- */
.chapters > .chapter + .chapter{ margin-top: clamp(3rem, 2rem + 3vw, 5rem); padding-top: clamp(3rem, 2rem + 3vw, 5rem); border-top: 1px solid var(--line); }.chapter{ display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); scroll-margin-top: calc(var(--header-h) + 2rem); }.chapter__num{ font-family: var(--font-body); font-style: italic; font-size: 1.5rem; line-height: 1; color: var(--accent); font-weight: 400; letter-spacing: 0; }.chapter__label{ margin-top: .5rem; font-family: var(--font-body); font-size: .92rem; letter-spacing: 0; text-transform: none; color: var(--accent-deep); font-weight: 600; }.chapter__body > * + *{ margin-top: 1.1rem; }.chapter__body p{ color: var(--ink-2); }.chapter__body h3{ font-size: var(--step-2); margin-top: 2rem; }.chapter__body ul.dots{ display: grid; gap: .5rem; }.chapter__body ul.dots li{ position: relative; padding-left: 1.5rem; color: var(--ink-2); }.chapter__body ul.dots li::before{ content: ''; position: absolute; left: 0; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }.pullquote{
  margin-block: 1.75rem; padding: 1.25rem 1.5rem;
  background: var(--ground-plum); border-radius: var(--radius);
  font-family: var(--font-quote); font-style: italic;
  font-size: var(--step-1); font-weight: 400;
  letter-spacing: -.01em; color: var(--ink);
}@media (max-width: 760px){
  .chapter { grid-template-columns: 1fr; gap: 1rem; }
  .chapter__marker { display: flex; align-items: baseline; gap: .75rem; }
  .chapter__num { font-size: 1.35rem; }
  .chapter__label { margin-top: 0; }
}.anchor-nav{
  position: sticky; top: calc(var(--header-h) + 1.5rem);
  align-self: start;
  padding: 1.25rem 1.35rem;
  background: var(--ground-4); border: 1px solid var(--line); border-radius: var(--radius-l);
}.anchor-nav h2{ font-size: .78rem; letter-spacing: 0; text-transform: none; color: var(--muted); margin-bottom: .9rem; font-family: var(--font-body); font-weight: 600; }.anchor-nav ol{ display: grid; gap: .1rem; counter-reset: an; }.anchor-nav a{
  display: flex; gap: .6rem; align-items: baseline;
  padding: .4rem 0; min-height: 34px;
  font-size: .9rem; color: var(--ink-2); text-decoration: none;
}.anchor-nav a:hover{ color: var(--deep-3); }.anchor-nav a::before{ counter-increment: an; content: '0' counter(an); font-size: .72rem; color: var(--accent-deep); font-weight: 600; min-width: 1.4em; }@media (max-width: 980px){ .anchor-nav { position: static; } }.credentials{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }.credential{
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--ground-4); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.25rem;
}.credential__icon{ width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--ground-3); color: var(--brand-deep); }.credential__icon svg{ width: 20px; height: 20px; }.credential strong{ display: block; font-size: .98rem; }.credential span{ font-size: .85rem; color: var(--muted); }@media (max-width: 640px){ .credentials { grid-template-columns: 1fr; } }/* ---------- 18. Accordion ---------- */
.accordion{ border-top: 1px solid var(--line); }.accordion__item{ border-bottom: 1px solid var(--line); }.accordion__btn{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 68px; padding: 1.15rem 0;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; color: var(--ink);
  transition: color .2s var(--ease);
}.accordion__btn:hover{ color: var(--brand); }.accordion__icon{ position: relative; width: 24px; height: 24px; flex: none; }.accordion__icon::before, .accordion__icon::after{
  content: ''; position: absolute; background: var(--accent-deep); border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}.accordion__icon::before{ left: 0; right: 0; top: 11px; height: 2px; }.accordion__icon::after{ top: 0; bottom: 0; left: 11px; width: 2px; }.accordion__btn[aria-expanded='true'] .accordion__icon::after{ transform: rotate(90deg); opacity: 0; }.accordion__panel{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }.accordion__panel[data-open='true']{ grid-template-rows: 1fr; }.accordion__panel > div{ overflow: hidden; }.accordion__panel p{ color: var(--ink-2); padding-bottom: 1.5rem; max-width: 68ch; }.faq-preview > details > summary .accordion__icon{ flex: none; }.faq-preview > details[open] > summary .accordion__icon::after{ transform: rotate(90deg); opacity: 0; }/* ---------- 19. Forms ---------- */
.form{ display: grid; gap: 1.1rem; }.form__row{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }.field{ display: grid; gap: .4rem; }.field label{ font-size: .88rem; font-weight: 600; color: var(--ink); }.field .req{ color: var(--accent-deep); }.field input, .field select, .field textarea{
  width: 100%; min-height: 48px; padding: .7rem .9rem;
  background: var(--ground-4); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--radius-s);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}.field textarea{ min-height: 140px; resize: vertical; }.field input:focus, .field select:focus, .field textarea:focus{
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(97, 64, 140, .16);
}.field input[aria-invalid='true'], .field textarea[aria-invalid='true'], .field select[aria-invalid='true']{
  border-color: var(--err-border); box-shadow: 0 0 0 3px rgba(163, 39, 31, .12);
}.field__error{ font-size: .82rem; color: var(--err-text); font-weight: 500; }.field__hint{ font-size: .82rem; color: var(--muted); }.form__status{ font-size: .9rem; font-weight: 500; padding: .85rem 1rem; border-radius: var(--radius-s); display: none; }.form__status[data-state='ok']{ display: block; background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok-line); }.form__status[data-state='err']{ display: block; background: var(--err-bg); color: var(--err-text); border: 1px solid var(--err-line); }@media (max-width: 640px){ .form__row { grid-template-columns: 1fr; } }.contact-list{ display: grid; gap: 1rem; }.contact-item{
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.1rem 1.25rem; background: var(--ground-4);
  border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: inherit;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}a.contact-item:hover{ border-color: var(--brand-soft); transform: translateY(-2px); box-shadow: var(--shadow-s); color: inherit; }.contact-item__icon{ width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--ground-plum); color: var(--brand); }.contact-item__icon svg{ width: 20px; height: 20px; }.contact-item strong{ display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }.contact-item span{ font-size: 1rem; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }.contact-item span.contact-item__value{ font-size: .92rem; line-height: 1.45; }/* ---------- 20. Socials ---------- */
.socials{ display: flex; flex-wrap: wrap; gap: .6rem; }.social{
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 12px; border: 1px solid var(--line-2); background: var(--ground-4);
  color: var(--brand); text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}.social svg{ width: 20px; height: 20px; }.social:hover{ background: var(--brand); border-color: var(--brand); color: var(--on-deep); transform: translateY(-2px); }/* ---------- 21. CTA band ---------- */
.cta-band{
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(85% 120% at 88% 4%, var(--deep-3) 0%, transparent 58%),
    linear-gradient(150deg, var(--deep) 0%, var(--deep-2) 86%);
  color: var(--on-deep);
  border-radius: var(--radius-xl);
  padding: clamp(3rem, 2rem + 4.5vw, 6rem) clamp(2rem, 1.5rem + 3vw, 5rem);
  text-align: center;
}.cta-band h2{ font-size: var(--step-5); font-weight: 400; margin-bottom: 1rem; color: var(--on-deep); }.cta-band p{ color: var(--on-deep-2); max-width: 54ch; margin-inline: auto; font-size: var(--step-1); }.cta-band .eyebrow{ color: var(--on-deep-accent); }.cta-band .eyebrow::before{ background: currentColor; }.cta-band .btn--primary{ --btn-bg: var(--on-deep); --btn-fg: var(--deep-2); }.cta-band .btn--primary:hover{ --btn-bg: #fff; }.cta-band .btn--ghost{ --btn-fg: var(--on-deep); border-color: rgba(247,243,251,.42); }.cta-band .btn--ghost:hover{ --btn-bg: rgba(247,243,251,.14); --btn-fg: var(--on-deep); }/* ---------- 22. Footer (the one dark moment) ---------- */
.site-footer{
  background: var(--deep-2); color: var(--on-dark-soft);
  padding-top: clamp(3rem, 2.2rem + 3vw, 4.5rem);
  overflow: hidden;
}.site-footer a{ color: var(--on-dark-soft); text-decoration: none; }.site-footer a:hover{ color: var(--accent-soft); text-decoration: underline; }.footer__blurb{ font-size: .92rem; max-width: 34ch; }.footer__col h3{
  font-family: var(--font-quote); font-style: italic; font-size: 1.05rem;
  letter-spacing: 0; text-transform: none; color: var(--on-deep);
  margin-bottom: .8rem; font-weight: 400;
}.footer__col ul{ display: grid; gap: .1rem; font-size: .92rem; }.footer__col ul a{ display: inline-flex; align-items: center; min-height: 26px; padding-block: .4rem; }.footer__top{
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem);
}.footer__name{
  font-family: var(--font-display); font-size: var(--step-4);
  line-height: 1.02; letter-spacing: -.028em; color: var(--on-deep);
  margin-bottom: 1.1rem;
}.footer__blurb{ color: var(--on-deep-2); max-width: 44ch; margin-bottom: 1.1rem; }.footer__contact{ color: var(--on-deep-2); line-height: 1.7; }.footer__contact a{ color: var(--on-deep); text-decoration-color: rgba(247,239,230,.35); }.footer__contact a:hover{ color: var(--on-deep-accent); }.footer__nav{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }.footer__h{
  font-family: var(--font-body); font-style: italic; font-weight: 400;
  font-size: 1.05rem; color: var(--on-deep-accent); margin-bottom: .9rem;
}.footer__col li{ margin-bottom: .5rem; }.footer__col a{ color: var(--on-deep-2); text-decoration: none; }.footer__col a:hover{ color: var(--on-deep); text-decoration: underline; }@media (max-width: 760px){
  .footer__top { grid-template-columns: 1fr; }
  .footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}.footer__bottom{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1.5rem; border-top: 1px solid rgba(255,255,255,.12);
  font-size: .85rem;
}.footer__bottom p{ margin: 0; }.footer__note{ font-size: .8rem; opacity: .78; max-width: 60ch; }@media (max-width: 900px){ .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }@media (max-width: 560px){ .footer__grid { grid-template-columns: 1fr; } }@media (max-width: 720px){ .footer__col ul a { min-height: 44px; } }/* ---------- 23. Prose ---------- */
.prose{ font-size: var(--step-0); color: var(--ink-2); }.prose > * + *{ margin-top: 1.15rem; }.prose h2{ font-size: var(--step-3); color: var(--ink); margin-top: 2.75rem; }.prose h3{ font-size: var(--step-1); color: var(--ink); margin-top: 2rem; }.prose a{ color: var(--brand); font-weight: 500; }.prose strong{ color: var(--ink); }.prose blockquote{
  margin-block: 1.75rem; padding: 1.1rem 1.5rem;
  background: var(--ground-plum); border-radius: var(--radius);
  font-family: var(--font-quote); font-style: italic;
  font-size: var(--step-1); font-weight: 400; letter-spacing: -.01em; color: var(--ink);
}.prose ul.bullets{ display: grid; gap: .55rem; }.prose ul.bullets li{ position: relative; padding-left: 1.6rem; }.prose ul.bullets li::before{ content: ''; position: absolute; left: 0; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }.callout{
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.25rem 1.5rem; border-radius: var(--radius);
  background: var(--ground-3); border: 1px solid transparent;
}.callout svg{ width: 22px; height: 22px; flex: none; margin-top: .15rem; color: var(--brand-deep); }.callout strong{ display: block; color: var(--ink); }.callout p{ font-size: .92rem; color: var(--ink-2); }.notice{
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
  border: 1px dashed var(--line-2); border-radius: var(--radius-l);
  background: var(--ground-plum); text-align: center;
}.notice h2{ font-size: var(--step-2); margin-bottom: .75rem; }.notice p{ color: var(--muted); max-width: 58ch; margin-inline: auto; }.section-head{ position: relative; max-width: 760px; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem); }.section-head--center{ margin-inline: auto; text-align: center; }@media (min-width: 1080px){
  .section-head--marginal { max-width: 860px; }
  .section-head--marginal .section-num { left: 0; }
}@media (max-width: 1079px){
  .section-head--marginal { padding-left: 0; }
  .section-num { position: static; font-size: 2.4rem; margin-bottom: .35rem; }
}.section-head h2{ font-size: var(--step-4); font-weight: 600; margin-block: .5rem .85rem; letter-spacing: -.035em; }.section-head p{ font-size: var(--step-1); color: var(--fg-soft); }/* ---------- 25. Responsive ---------- */
@media (max-width: 1024px){
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}@media (max-width: 980px){
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header__actions .btn { display: none; }
    /* on a phone the words come first, so a visitor knows what this is
     before the photograph takes up the screen */
      .split, .grid--sidebar { grid-template-columns: 1fr; }
  .brand__role { display: none; }
}@media (max-width: 720px){
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .svc__media { aspect-ratio: 2 / 1; }
  .topbar .topbar__hide-sm { display: none; }
  .topbar__tagline { display: none; }
  .brand__mark { width: 40px; height: 40px; }
  .split__badge { position: relative; right: auto; bottom: auto; margin-top: -2.5rem; margin-left: 1rem; }
}@media (max-width: 420px){
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
}.hero__frame img, .split__media img, .svc__media img, .fullbleed > img, .band img{
  filter: saturate(.78) contrast(1.04) sepia(.08);
}/* ---------- 26. Motion & print ---------- */
@media (prefers-reduced-motion: no-preference){
  .hero__script, .hero h1 .line, .hero__lede, .hero__cta,   .hero__script { animation-delay: .06s; }
  .hero h1 .line:nth-child(1) { animation-delay: .16s; }
  .hero h1 .line:nth-child(2) { animation-delay: .25s; }
  .hero h1 .line:nth-child(3) { animation-delay: .34s; }
  .hero__lede { animation-delay: .44s; }
  .hero__cta { animation-delay: .55s; }
        @keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  @keyframes settle { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
}.hero h1 .line{ display: block; }.reveal{ opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }.reveal.is-visible{ opacity: 1; transform: none; }@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()) {
        @keyframes hero-drift {
      from { transform: translateY(-3%); }
      to { transform: translateY(3%); }
    }
  }
}@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .btn:hover, .card--lift:hover, .svc:hover { transform: none; }
  .marquee__track { animation: none; }
}/* continuity between pages, without a framework */
@view-transition{ navigation: auto; }::view-transition-old(root){ animation: vt-out .28s var(--ease) both; }::view-transition-new(root){ animation: vt-in .38s var(--ease) both; }@keyframes vt-out{ to { opacity: 0; transform: translateY(-8px); } }@keyframes vt-in{ from { opacity: 0; transform: translateY(10px); } }@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}@media print{
  .topbar, .site-header, .nav-drawer, .marquee, .cta-band, .site-footer, .hero__chip { display: none !important; }
  body { background: var(--on-deep); color: #000; }
  .hero, .page-hero { background: #fff !important; color: #000 !important; }
  .hero::before, .hero::after, .hero__bg, .hero__wash, .page-hero::before, .page-hero::after { display: none !important; }
}