/* ===== Tokens (palette drawn from the photography) ===== */
:root{
  --sand:#F1E9DB; --paper:#F8F3E9; --walnut:#2B2118; --umber:#5A4634;
  --olive:#3E3E26; --terracotta:#A4572F; --terracotta-deep:#8A4524;
  --amber:#E0A94F; --stone:#D8CBB4;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --step-0:clamp(1rem,.96rem + .2vw,1.125rem);
  --step-1:clamp(1.25rem,1.1rem + .7vw,1.6rem);
  --step-2:clamp(1.9rem,1.4rem + 2.4vw,3.2rem);
  --step-3:clamp(2.4rem,1.3rem + 4.4vw,5.2rem);
  --gutter:clamp(1.25rem,5vw,4rem);
  --space:clamp(4rem,10vw,9rem);
  --max:78rem; --measure:34rem;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{margin:0;background:var(--sand);color:var(--walnut);font:400 var(--step-0)/1.7 var(--font-body);overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.06;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='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg{max-width:100%;display:block}
h1,h2,h3{font-family:var(--font-display);font-weight:300;line-height:1.06;letter-spacing:-.018em;margin:0 0 .6em;text-wrap:balance}
h1{font-size:var(--step-3)} h2{font-size:var(--step-2)} h3{font-size:var(--step-1);font-weight:400;line-height:1.2}
em{font-style:italic;color:var(--terracotta)}
p{margin:0 0 1.1em;max-width:var(--measure);text-wrap:pretty}
a{color:inherit;text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:2px}
::selection{background:var(--amber);color:var(--walnut)}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--walnut);color:var(--sand);padding:.7rem 1rem;z-index:200;transition:top .2s}
.skip:focus{top:1rem}

/* Scroll progress (CSS-only, progressive) */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--amber);transform-origin:0 50%;transform:scaleX(0);z-index:120}
@supports (animation-timeline:scroll()){
  .progress{animation:grow linear both;animation-timeline:scroll(root)}
  @keyframes grow{to{transform:scaleX(1)}}
}
/* Cross-page transitions (Chromium, progressive) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:fadeout .25s ease both}
::view-transition-new(root){animation:fadein .45s ease both}
@keyframes fadeout{to{opacity:0}} @keyframes fadein{from{opacity:0}}

/* ===== Header ===== */
.site-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.5rem;padding:1rem var(--gutter);position:sticky;top:0;z-index:100;background:var(--sand);transition:transform .4s var(--ease),box-shadow .3s}
.site-header.is-scrolled{box-shadow:0 1px 0 rgba(43,33,24,.15)}
.site-header.is-hidden{transform:translateY(-100%)}
.brand{text-decoration:none;display:inline-flex;flex-direction:column;gap:.25rem}
.brand__mark{font:400 1.35rem/1 var(--font-display);letter-spacing:-.01em}
.brand__mark em{color:var(--terracotta);padding:0 .02em}
.brand small{font:500 .6rem/1 var(--font-body);letter-spacing:.28em;text-transform:uppercase;opacity:.65}
.nav-toggle{display:none;background:none;border:1px solid currentColor;color:inherit;font:500 .85rem var(--font-body);padding:.6rem 1.1rem;border-radius:99px;cursor:pointer}
.site-nav{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center}
.site-nav a{text-decoration:none;font:500 .92rem var(--font-body);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease)}
.site-nav a:hover,.site-nav a[aria-current="page"]{background-size:100% 1px}
.js .nav-toggle{display:inline-block}
.js .site-nav{display:none;position:absolute;inset:100% 0 auto 0;background:var(--walnut);color:var(--sand);padding:1.5rem var(--gutter) 2.2rem;flex-direction:column;align-items:flex-start;gap:1.1rem;height:calc(100svh - 4.5rem);overflow:auto}
.js .site-nav.is-open{display:flex}
.js .site-nav a{font:300 clamp(1.8rem,8vw,2.6rem) var(--font-display);background:none}
.js .site-nav a[aria-current="page"]{color:var(--amber)}
@media (min-width:56rem){
  .js .nav-toggle{display:none}
  .js .site-nav,.js .site-nav.is-open{display:flex;position:static;flex-direction:row;align-items:center;background:none;color:inherit;padding:0;gap:2rem;height:auto;overflow:visible}
  .js .site-nav a{font:500 .92rem var(--font-body);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat}
  .js .site-nav a:hover,.js .site-nav a[aria-current="page"]{background-size:100% 1px;color:inherit}
}

/* ===== Buttons & links ===== */
.btn{display:inline-block;background:var(--walnut);color:var(--sand);padding:1.05rem 1.8rem;border-radius:99px;text-decoration:none;font-weight:500;border:1px solid var(--walnut);transition:transform .25s var(--ease),background .25s,border-color .25s,box-shadow .25s}
.btn:hover{background:var(--terracotta);border-color:var(--terracotta);transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(138,69,36,.7)}
.btn:active{transform:translateY(0) scale(.99)}
.btn--small{padding:.6rem 1.15rem;font-size:.9rem}
.site-nav .btn{background:var(--amber);border-color:var(--amber);color:var(--walnut);background-image:none}
.site-nav .btn:hover{background:var(--terracotta);border-color:var(--terracotta);color:var(--sand)}
.js .site-nav .btn{font:500 .95rem var(--font-body)}
.btn--light{background:var(--sand);color:var(--walnut);border-color:var(--sand)}
.btn--light:hover{background:var(--amber);border-color:var(--amber);color:var(--walnut)}
.link-arrow{font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.15rem}
.link-arrow::after{content:" →";display:inline-block;transition:transform .25s var(--ease)}
.link-arrow:hover::after{transform:translateX(.35rem)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2rem;margin-top:1.8rem}
.eyebrow,.margin-label{font:500 .72rem/1.4 var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:var(--umber);margin-bottom:1.4rem}
.lead{font-size:var(--step-1);line-height:1.5;color:var(--umber)}
.note{font-size:.85rem;color:var(--umber);border-left:2px solid var(--amber);padding-left:.8rem}

/* ===== Layout ===== */
.grid-12{max-width:var(--max);margin-inline:auto;padding:var(--space) var(--gutter);display:grid;gap:2.5rem}
@media (min-width:56rem){
  .grid-12{grid-template-columns:repeat(12,1fr);gap:2rem 2.5rem}
  .grid-12>.margin-label{grid-column:1/3}
}

/* ===== Image slots ===== */
.media{position:relative;overflow:hidden;margin:0;background:var(--stone)}
.media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.js .media>img{opacity:0;transition:opacity 1s ease}
.js .media>img.is-loaded{opacity:1}

/* ===== Hero ===== */
.hero{display:grid;position:relative}
.hero__panel{padding:1.5rem var(--gutter) 2.5rem}
.hero__panel h1{margin-bottom:.45em}
.hero__media{aspect-ratio:4/5;width:100%}
.hero__media>img{object-position:62% 50%}
.js .hero__media>img.is-loaded{animation:drift 28s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.06)}}
@media (min-width:56rem){
  .hero{grid-template-columns:repeat(12,1fr);padding:1rem 0 var(--space) var(--gutter);align-items:end}
  .hero__panel{grid-column:1/8;grid-row:1;z-index:2;background:var(--sand);padding:3rem 3rem 3rem 0;margin-bottom:-1px}
  .hero__media{grid-column:5/13;grid-row:1;aspect-ratio:auto;height:clamp(30rem,80svh,46rem)}
  .hero__media>img{object-position:60% 50%}
}
.js .hero__panel>*{animation:rise .8s var(--ease) both}
.js .hero__panel>:nth-child(2){animation-delay:.08s}.js .hero__panel>:nth-child(3){animation-delay:.16s}.js .hero__panel>:nth-child(4){animation-delay:.24s}
.js .hero__media{animation:unveil 1.2s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
@keyframes unveil{from{clip-path:inset(12% 0 0 0)}}

/* ===== Statement ===== */
.statement{max-width:var(--max);margin-inline:auto;padding:0 var(--gutter) var(--space)}
.statement__text{font:300 clamp(1.7rem,1rem + 3.6vw,4rem)/1.18 var(--font-display);letter-spacing:-.02em;max-width:22ch;margin:0;text-wrap:balance}
@media (min-width:56rem){.statement__text{max-width:30ch;margin-left:16.66%}}
.js .statement__text .w{opacity:.2;transition:opacity .5s}
.js .statement__text .w.is-lit{opacity:1}

/* ===== Practice ===== */
.practice{align-items:center}
.practice__frame{position:relative;max-width:26rem;width:calc(100% - .9rem)}
.practice__frame::before{content:"";position:absolute;inset:0;border:1px solid var(--terracotta);transform:translate(.9rem,.9rem)}
.practice__img{aspect-ratio:1122/1402;position:relative}
@media (min-width:56rem){
  .practice__frame{grid-column:1/6}
  .practice__text{grid-column:7/13}
}

/* ===== Bands ===== */
.band{position:relative;overflow:hidden}
.band--ink{background:var(--walnut);color:var(--sand)}
.band--ink::before{content:"";position:absolute;inset:-20% -40%;pointer-events:none;background:linear-gradient(115deg,transparent 42%,rgba(224,169,79,.14) 50%,transparent 58%);animation:shaft 22s ease-in-out infinite alternate}
@keyframes shaft{from{transform:translateX(-12%)}to{transform:translateX(12%)}}
.band--ink>*,.band--olive>*{position:relative}
.band--olive{background:var(--olive);color:var(--sand)}
.band--ink .margin-label,.band--olive .margin-label{color:var(--stone)}
.band--ink em,.band--olive em{color:var(--amber)}
.approach{grid-column:3/13}
.approach__list{list-style:none;padding:0;margin:2.5rem 0 0;display:grid;gap:2rem;counter-reset:n}
.approach__list li{counter-increment:n;border-top:1px solid rgba(241,233,219,.3);padding-top:1rem}
.approach__list li::before{content:"0" counter(n);font:300 .95rem var(--font-display);color:var(--amber)}
@media (min-width:56rem){.approach__list{grid-template-columns:repeat(3,1fr);gap:2.5rem}.approach__list li:nth-child(2){margin-top:3rem}.approach__list li:nth-child(3){margin-top:6rem}}

/* ===== Stillness (lake) ===== */
.stillness{position:relative;background:var(--walnut);color:#fff}
.stillness__media{height:clamp(18rem,56vw,40rem)}
.stillness__media::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(30,22,14,.6))}
.stillness__media>img{height:128%;top:-14%;object-position:center}
.stillness__caption{position:absolute;left:var(--gutter);bottom:clamp(1.2rem,4vw,3rem);margin:0;z-index:2;font:italic 300 clamp(1.3rem,.8rem + 2.2vw,2.6rem)/1.2 var(--font-display);max-width:20ch}

/* ===== Services ===== */
.rule-list{list-style:none;padding:0;margin:2rem 0}
.rule-list li{border-top:1px solid var(--walnut)}
.rule-list li:last-child{border-bottom:1px solid var(--walnut)}
.rule-list a{display:flex;flex-direction:column;gap:.2rem;padding:1.4rem 0;text-decoration:none;transition:padding .3s var(--ease),color .3s}
.rule-list span{font:300 var(--step-2)/1.1 var(--font-display)}
.rule-list small{color:var(--umber);font-size:.95rem}
.rule-list a:hover{padding-left:1rem;color:var(--terracotta)}
@media (min-width:56rem){.services-preview__body{grid-column:3/13}.rule-list a{flex-direction:row;align-items:baseline;justify-content:space-between}}

/* ===== Therapist (arch echoes the architecture in the photos) ===== */
.therapist{align-items:center}
.therapist__img{aspect-ratio:1122/1402;max-width:24rem;width:100%;border-radius:999px 999px 0 0}
.therapist__img>img{object-position:50% 18%}
@media (min-width:56rem){.therapist__img{grid-column:1/6}.therapist__text{grid-column:7/13}}

/* ===== Steps ===== */
.steps{list-style:none;margin:2rem 0;padding:0}
.steps li{display:grid;grid-template-columns:3.2rem 1fr;gap:1rem;padding:1.4rem 0;border-top:1px solid rgba(43,33,24,.3)}
.steps li:last-child{border-bottom:1px solid rgba(43,33,24,.3)}
.steps span{font:300 2.6rem/1 var(--font-display);color:var(--terracotta)}
.steps h3{margin-bottom:.2em}.steps p{margin:0}
@media (min-width:56rem){.first__body{grid-column:4/13}}

/* ===== Hesitations ===== */
.hesitations dl{margin:2rem 0}
.hesitations dl>div{border-top:1px solid rgba(241,233,219,.35);padding:1.2rem 0;display:grid;gap:.4rem}
.hesitations dt{font:italic 300 var(--step-1)/1.3 var(--font-display)}
.hesitations dd{margin:0;max-width:var(--measure)}
@media (min-width:56rem){.hesitations{grid-column:3/13}.hesitations dl>div{grid-template-columns:1fr 1fr;gap:2rem}}
@media (min-width:56rem){.approach{grid-column:3/13}}
@media (max-width:55.99rem){.approach{grid-column:auto}}

/* ===== CTA ===== */
.cta{background:radial-gradient(ellipse at 85% 0,rgba(224,169,79,.45),transparent 55%),var(--walnut);color:var(--sand);padding:var(--space) var(--gutter)}
.cta>*{max-width:var(--max);margin-inline:auto}
.cta h2{max-width:16ch;margin-bottom:.4em}
.cta p{max-width:var(--measure)}
.cta em{color:var(--amber)}

/* ===== Footer ===== */
.site-footer{background:#1E1710;color:var(--stone);padding:3.5rem var(--gutter) 1.5rem;overflow:hidden}
.site-footer__grid{max-width:var(--max);margin-inline:auto;display:grid;gap:2rem}
.site-footer nav{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem}
.site-footer a{text-decoration:none}
.site-footer nav a:hover{color:var(--amber)}
.site-footer .brand__mark em{color:var(--amber)}
.emergency{font-size:.9rem;border:1px solid rgba(216,203,180,.35);padding:1rem;max-width:26rem}
.site-footer__word{max-width:none;margin:3rem 0 0;font:300 clamp(2rem,9.6vw,9.5rem)/1 var(--font-display);letter-spacing:-.03em;color:rgba(241,233,219,.1);white-space:nowrap;text-align:center}
.site-footer__word em{color:rgba(224,169,79,.22)}
.site-footer__legal{max-width:var(--max);margin:1.5rem auto 0;font-size:.8rem;opacity:.7}
@media (min-width:56rem){.site-footer__grid{grid-template-columns:1.2fr 1fr 1.2fr;align-items:start}}

/* ===== Reveal (hidden only when JS is present) ===== */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .statement__text .w{opacity:1;transform:none}
  @view-transition{navigation:none}
}