:root{
    --ivory:#F3EFE6; --stone:#D8CCB7; --charcoal:#1F1F1D; --black:#111111;
    --warmgray:#8A8378; --gold:#B8964A; --deep:#181511;
    --serif:'Cormorant Garamond', Georgia, serif;
    --sans:'Inter', 'Helvetica Neue', sans-serif;
    --measure:34em;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .fade{opacity:1 !important;transform:none !important;transition:none !important;} }
  body{
    background:var(--ivory); color:var(--charcoal);
    font:300 17px/1.75 var(--sans);
    -webkit-font-smoothing:antialiased; letter-spacing:.005em;
  }
  /* plaster grain */
  body::before{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.35;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  main{position:relative; z-index:1;}
  ::selection{background:var(--gold); color:var(--ivory);}
  h1,h2,h3{font-family:var(--serif); font-weight:400; color:var(--black); text-wrap:balance;}
  a{color:inherit;}
  a:focus-visible, button:focus-visible, input:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;}

  .wrap{max-width:1060px; margin:0 auto; padding:0 clamp(22px,6vw,64px);}
  section{padding:clamp(90px,14vh,170px) 0;}
  .eyebrow{
    font:500 11px/1 var(--sans); letter-spacing:.32em; text-transform:uppercase;
    color:var(--warmgray); display:flex; align-items:center; gap:16px; margin-bottom:34px;
  }
  .eyebrow::before{content:""; width:34px; height:1px; background:var(--gold);}
  .eyebrow .num{color:var(--gold); letter-spacing:.12em;}

  /* nav */
  nav{
    position:fixed; top:0; left:0; right:0; z-index:10;
    background:color-mix(in srgb, var(--ivory) 88%, transparent);
    backdrop-filter:blur(8px); border-bottom:1px solid color-mix(in srgb, var(--stone) 55%, transparent);
  }
  .nav-in{max-width:1060px; margin:0 auto; padding:16px clamp(22px,6vw,64px); display:flex; align-items:center; justify-content:space-between; gap:28px;}
  .wordmark{font-family:var(--serif); font-size:19px; letter-spacing:.02em; text-decoration:none; color:var(--black); white-space:nowrap; flex-shrink:0;}
  .wordmark em{font-style:normal; color:var(--gold);}
  .nav-links{display:flex; gap:26px; font:400 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; align-items:center; flex-wrap:nowrap;}
  .nav-links a{text-decoration:none; color:var(--warmgray); transition:color .25s; white-space:nowrap;}
  .nav-links a:hover{color:var(--black);}
  @media(max-width:720px){.nav-links{display:none;}}

  /* emblem — the Returning Whole mark: concentric rings, an opening below, the lit self at center */
  .emblem{width:72px; height:72px; display:block; margin:0 auto;}
  .emblem circle, .emblem path{vector-effect:non-scaling-stroke;}
  /* THE REAL MARK: the founder's original image is the resting state; the
     drawn SVG exists only mid-scroll (cross-faded in once the rings are
     already closing) and lands as two complete circles at the courses. */
  .mark-stack{position:relative; width:118px; height:118px;}
  /* The mark image is now the REAL logo with its ivory paper background
     removed (mark-transparent.png). No multiply needed — the gold stands on
     its own over any background, so it reads true (not darkened). */
  /* ONE CONSTANT VISUAL SIZE across the whole turn: the photo's outer ring
     inks only 58.5% of its file width, the drawn SVG's ring spans 84% of the
     box — so the photo is scaled 1.45 (0.84/0.579 centerline) to make the
     outer-ring diameter identical in both phases on every instance. */
  .mark-stack .mark-img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
    transition:opacity .2s linear; transform:scale(1.45);}
  .mark-stack .mark-svg{position:absolute; inset:0; opacity:0; transition:opacity .2s linear;}
  /* Nav mark: the founder's REAL transparent mark at rest (no box, no halo).
     The drawn SVG only appears mid-scroll via the crossfade. */
  .mark-stack--nav{width:46px; height:46px; display:block; flex-shrink:0;}
  .mark-stack--nav .mark-img{display:block;}
  .mark-stack--nav .mark-svg{opacity:0;}
  .wordmark span{white-space:nowrap;}
  /* mid-page turning mark — a large instance showing the mark's TRUE
     position in the scroll, placed just before The Method. Same stack
     classes, so the global renderMark loop drives it automatically. */
  /* EQUAL breathing room above and below the mark: this block provides the
     full visual gap on BOTH sides, so #method's own top padding is zeroed
     below — otherwise section padding stacked under the mark (90px above vs
     ~205px below). */
  .mark-turn{padding:62px 0; position:relative; z-index:1;}   /* 62px block + ~18px transparent inset (at 1.45 img scale) = ~80px VISUAL gap each side */
  .mark-turn .mark-stack{width:240px; height:240px; margin:0 auto;}
  #method{padding-top:0;}
  /* arrival mark above Ways to Practice — large enough that the seal-shut
     moment reads; driven by the same renderMark loop. */
  .mark-stack--arrive{width:140px; height:140px;}

  /* hero */
  #hero{min-height:92vh; display:flex; align-items:center; text-align:center; padding-top:140px;}
  #hero .emblem{width:96px; height:96px; margin-bottom:52px;}
  #hero .mark-stack{width:180px; height:180px;}   /* founder: "the first rotating circle needs to be bigger" */
  #hero h1{font-size:clamp(42px,6.4vw,84px); line-height:1.08; font-weight:300; max-width:15em; margin:0 auto 34px;}
  #hero .sub{max-width:var(--measure); margin:0 auto 52px; color:#3d3a35; font-size:18px;}
  .byline{font:400 11px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--warmgray); margin-top:56px;}

  .btn{
    display:inline-block; font:500 12.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
    padding:19px 34px; text-decoration:none; border-radius:2px; transition:all .3s ease; cursor:pointer; border:1px solid transparent;
  }
  .btn-primary{background:var(--charcoal); color:var(--ivory);}
  .btn-primary:hover{background:var(--black); transform:translateY(-1px);}
  .btn-ghost{border-color:color-mix(in srgb, var(--charcoal) 35%, transparent); color:var(--charcoal);}
  .btn-ghost:hover{border-color:var(--gold); color:var(--black);}
  .btn-gold{background:var(--gold); color:var(--deep);}
  .btn-gold:hover{filter:brightness(1.06); transform:translateY(-1px);}
  .btn-row{display:flex; gap:18px; justify-content:center; flex-wrap:wrap;}

  /* two-col editorial */
  .cols{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(40px,7vw,110px); align-items:start;}
  @media(max-width:820px){.cols{grid-template-columns:1fr;}}
  .cols h2{font-size:clamp(30px,3.6vw,46px); line-height:1.18; position:sticky; top:120px;}
  @media(max-width:820px){.cols h2{position:static;}}
  .body p{max-width:var(--measure); margin-bottom:1.4em; color:#33302b;}
  .body p:last-child{margin-bottom:0;}
  .body strong{font-weight:500; color:var(--black);}

  /* dark sections */
  .dark{background:var(--deep); color:#E9E2D2;}
  .dark h2{color:var(--ivory);}
  .dark .body p{color:#C9C0AC;}
  .dark .eyebrow{color:#7d7565;}
  .dark::before{display:none;}

  /* method */
  #method .intro{max-width:var(--measure); margin:0 auto 84px; text-align:center; color:#3d3a35;}
  #method h2{text-align:center; font-size:clamp(32px,4vw,52px); margin-bottom:26px;}
  .steps{max-width:640px; margin:0 auto; list-style:none; counter-reset:step;}
  .steps li{
    counter-increment:step; display:flex; align-items:baseline; gap:30px;
    padding:26px 6px; border-bottom:1px solid color-mix(in srgb, var(--stone) 70%, transparent);
    font-family:var(--serif); font-size:clamp(19px,2.2vw,25px); color:#2a2724;
  }
  .steps li::before{
    content:counter(step,decimal-leading-zero); font:400 12px/1 var(--sans);
    letter-spacing:.14em; color:var(--gold); min-width:34px;
  }
  .steps-note{max-width:34em; margin:56px auto 0; text-align:center; font-size:13.5px; color:var(--warmgray); font-style:italic;}

  /* free audio */
  #free-audio .panel{
    background:color-mix(in srgb, var(--stone) 26%, var(--ivory));
    border:1px solid color-mix(in srgb, var(--stone) 70%, transparent);
    border-radius:4px; padding:clamp(44px,6vw,80px);
    display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center;
  }
  @media(max-width:820px){#free-audio .panel{grid-template-columns:1fr;}}
  #free-audio h2{font-size:clamp(28px,3.4vw,42px); margin-bottom:18px;}
  #free-audio p{color:#3d3a35; max-width:26em;}
  form#free-audio-form{display:flex; flex-direction:column; gap:14px;}
  form#free-audio-form label{font:500 11px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--warmgray);}
  form#free-audio-form input{
    font:300 16px/1 var(--sans); padding:16px 18px; border:1px solid color-mix(in srgb, var(--charcoal) 22%, transparent);
    background:var(--ivory); border-radius:2px; color:var(--black); width:100%;
  }
  form#free-audio-form input::placeholder{color:#b0a794;}
  .form-note{font-size:12.5px; color:var(--warmgray); margin-top:4px;}

  /* offerings */
  #offerings h2{text-align:center; font-size:clamp(30px,3.8vw,50px); margin-bottom:90px;}
  .offer-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px;}
  @media(max-width:820px){.offer-grid{grid-template-columns:1fr;}}
  .offer{
    border:1px solid color-mix(in srgb, var(--stone) 80%, transparent);
    border-radius:4px; padding:clamp(34px,4vw,52px); display:flex; flex-direction:column; gap:18px;
    background:color-mix(in srgb, var(--ivory) 60%, transparent); transition:border-color .3s;
  }
  .offer:hover{border-color:var(--gold);}
  .offer h3{font-size:26px; line-height:1.25;}
  .offer .price{font:400 13px/1 var(--sans); letter-spacing:.18em; color:var(--gold);}
  .offer p{font-size:15px; color:#3d3a35; flex-grow:1;}
  .offer .btn{align-self:flex-start;}
  .offer.private{background:var(--deep); border-color:var(--deep); color:#E9E2D2;}
  .offer.private h3{color:var(--ivory);}
  .offer.private p{color:#C9C0AC;}
  .offer .note{font-size:12px; color:var(--warmgray); letter-spacing:.04em;}

  /* about */
  #about .cols h2{font-size:clamp(28px,3.4vw,44px);}
  .about-emblem{display:flex; align-items:center; gap:22px; margin-top:44px; color:var(--warmgray); font:400 11px/1 var(--sans); letter-spacing:.26em; text-transform:uppercase;}
  .about-emblem .emblem{width:40px;height:40px;margin:0;}

  /* voices — quiet editorial pull-quotes */
  #voices h2{text-align:center; font-size:clamp(30px,3.8vw,50px); margin-bottom:26px;}
  #voices .intro{max-width:var(--measure); margin:0 auto 90px; text-align:center; color:#3d3a35;}
  .voices-list{max-width:760px; margin:0 auto; display:flex; flex-direction:column;}
  .voice{padding:clamp(46px,7vw,72px) 0; border-top:1px solid color-mix(in srgb, var(--stone) 70%, transparent); text-align:center;}
  .voice:first-child{border-top:none; padding-top:0;}
  .voice:last-child{padding-bottom:0;}
  .voice blockquote{
    font-family:var(--serif); font-weight:300; font-size:clamp(23px,3.1vw,34px); line-height:1.34;
    color:#2a2724; max-width:22em; margin:0 auto; text-wrap:balance;
  }
  .voice blockquote::before{content:"\201C"; color:var(--gold); margin-right:.04em;}
  .voice blockquote::after{content:"\201D"; color:var(--gold); margin-left:.04em;}
  .voice cite{
    display:block; margin-top:26px; font:500 11px/1.5 var(--sans);
    letter-spacing:.22em; text-transform:uppercase; color:var(--warmgray); font-style:normal;
  }

  /* closing */
  #closing{text-align:center;}
  #closing h2{font-size:clamp(34px,4.6vw,58px); line-height:1.15; max-width:16em; margin:0 auto 24px;}
  #closing .sub{color:#C9C0AC; margin-bottom:48px; font-size:17px;}

  /* footer */
  footer{background:var(--black); color:#8f887a; padding:74px 0 44px;}
  .foot-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:56px;}
  .foot-brand{font-family:var(--serif); font-size:22px; color:var(--ivory);}
  .foot-brand span{display:block; font:300 12px/1.6 var(--sans); color:#8f887a; margin-top:8px; letter-spacing:.08em;}
  .foot-links{display:flex; gap:26px; flex-wrap:wrap; font:400 12px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase;}
  .foot-links a{text-decoration:none; color:#8f887a; transition:color .25s;}
  .foot-links a:hover{color:var(--ivory);}
  .disclaimer{font-size:12px; line-height:1.8; max-width:52em; border-top:1px solid #26221c; padding-top:28px;}

  /* fade-in */
  .fade{opacity:0; transform:translateY(18px); transition:opacity .9s ease, transform .9s ease;}
  .fade.in{opacity:1; transform:none;}
  .hr-gold{width:44px; height:1px; background:var(--gold); margin:0 auto;}
</style>