/* Round 5 — scroll-driven scenes (replace portrait photos) + one consistent card system with line icons.
   Scenes: inline SVG, scroll progress --p (0..1) written by js/scenes.js; only transform/opacity/stroke-dashoffset animate. */
@property --mx{syntax:'<number>';inherits:true;initial-value:0}
@property --my{syntax:'<number>';inherits:true;initial-value:0}

/* ---------- scene base ---------- */
.sc{--p:1;position:relative;width:100%;aspect-ratio:var(--ar,1/1);border-radius:24px;overflow:hidden;contain:layout paint;
  background:radial-gradient(68% 68% at 50% 46%,rgba(217,181,131,.11),transparent 72%),linear-gradient(165deg,var(--surface),var(--bg-deep) 92%);
  border:1px solid var(--border);touch-action:pan-y;-webkit-tap-highlight-color:transparent;transition:--mx .6s var(--ease-out),--my .6s var(--ease-out)}
.sc svg{display:block;width:100%;height:100%;overflow:hidden}
.sc *{box-sizing:border-box}
.sk{--k:clamp(0,calc((var(--p) - var(--s,0)) / var(--w,.5)),1);opacity:var(--k)}
.par{transform:translate(calc(var(--mx) * var(--d,6) * 1px),calc(var(--my) * var(--d,6) * .8px))}
.dr{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--k));opacity:min(1,calc(var(--k) * 40))}
.tr{fill:none;stroke:var(--border-strong);stroke-width:1.2;stroke-dasharray:3 7}
.pg{fill:none;stroke:var(--accent);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.sc.ping .pg{animation:scPing 1s var(--ease-out)}
@keyframes scPing{from{opacity:.85;transform:scale(1)}to{opacity:0;transform:scale(3.2)}}
.sc.vis .goal .pg,.sc.vis .core+.pg,.sc.vis .calm+.pg,.sc.vis .bloom~.pg{animation:scIdle 3s var(--ease-out) infinite}
@keyframes scIdle{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
.core{transform-box:fill-box;transform-origin:center;transform:scale(calc(.4 + .6 * var(--k)))}
.core circle{fill:var(--accent)}.core path{fill:var(--accent-ink)}

/* whole person */
.sc-orbit{fill:none;stroke:var(--border-strong);stroke-dasharray:2 7;transform-origin:200px 200px;transform:rotate(calc(var(--p) * 90deg))}
.sc-orbit.o2{stroke-dasharray:1 10;transform:rotate(calc(var(--p) * -120deg))}
.pt{fill:var(--c);fill-opacity:.4;stroke:color-mix(in srgb,var(--c) 70%,#fff);stroke-opacity:.85;stroke-width:1.5;mix-blend-mode:screen;cursor:pointer;
  transform-box:fill-box;transform-origin:center;transform:translate(calc((1 - var(--k)) * var(--dx) * 130px),calc((1 - var(--k)) * var(--dy) * 130px)) scale(calc(.55 + .45 * var(--k)));transition:fill-opacity .35s var(--ease-out),opacity .35s}
.pt.hot{fill-opacity:.78}
.sc.has-hot .pt:not(.hot){opacity:calc(var(--k) * .28)}
.lb{font:600 11.5px var(--font-body);letter-spacing:.22em}

/* NLP */
.tangle{fill:none;stroke:var(--muted);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:max(0,calc(.95 - var(--p) * 1.35))}
.dirline,.dirhead{stroke:var(--dim-1-tint);stroke-width:4.5}
.dot{fill:var(--c);transform-box:fill-box;transform-origin:center;transform:scale(calc(.3 + .7 * var(--k)))}
.goal circle:first-child{fill:rgba(217,181,131,.16);stroke:var(--accent);stroke-width:2}
/* MER */
.stone{transform-box:fill-box;transform-origin:center;opacity:calc(1 - var(--k) * .28);transform:translate(calc(var(--k) * var(--sx) * 1px),calc(var(--k) * var(--dist) * -1px)) scale(calc(1 - .32 * var(--k)))}
.stone .gr{fill:#4d5f57;stroke:rgba(255,255,255,.14);stroke-width:1.5;opacity:max(0,calc(1 - var(--k) * 1.3))}
.stone .co{fill:var(--c);opacity:var(--k)}
.space{fill:none;stroke:var(--accent);stroke-opacity:.4;stroke-width:1.5;transform-box:fill-box;transform-origin:center;transform:scale(calc(.4 + .6 * var(--k)))}
.space.s2{stroke-dasharray:3 8}
/* hypnotherapy */
.ring{fill:none;stroke:var(--dim-4-tint);stroke-opacity:.28;stroke-width:1.2;transform-box:fill-box;transform-origin:center;transform:scale(calc(.6 + .4 * var(--k)))}
.spiral{stroke:var(--dim-4-tint);stroke-width:3;transform-origin:200px 210px;transform:rotate(calc(var(--p) * -50deg))}
.calm{fill:var(--accent)}
.moon{fill:var(--accent);transform:translateY(calc((1 - var(--k)) * -24px))}
.star{fill:var(--fg)}
/* integrative */
.orb{fill:var(--c);fill-opacity:.07;stroke:color-mix(in srgb,var(--c) 68%,#fff);stroke-width:2.6;transform-origin:200px 200px;transform:rotate(calc(var(--a) * 1deg + (1 - var(--k)) * -110deg)) scale(calc(.5 + .5 * var(--k)))}
.tip{fill:var(--c);stroke:var(--bg-deep);stroke-width:3}
/* path */
.hill.h1{fill:#0e281e}.hill.h2{fill:#143327}
.tr.road{stroke:rgba(255,255,255,.1);stroke-width:7;stroke-dasharray:none}
.road-f{stroke:var(--accent);stroke-width:3.2}
.sun{transform:translateY(calc((1 - var(--k)) * 80px));opacity:calc(.25 + .75 * var(--k))}
.sun circle:last-child{fill:var(--accent)}
.ms{fill:var(--c);stroke:var(--bg-deep);stroke-width:3;transform-box:fill-box;transform-origin:center;transform:scale(calc(.2 + .8 * var(--k)))}
.wk{fill:var(--fg)}.wk-g{fill:var(--accent);opacity:.32}
.walker{opacity:0}
/* grow */
.stem{stroke:var(--dim-2-tint);stroke-width:4.5}
.seed{fill:var(--accent)}
.leaf{fill:var(--c);fill-opacity:.5;stroke:color-mix(in srgb,var(--c) 66%,#fff);stroke-width:1.5;transform-origin:0 0;transform:scale(var(--k))}
.vein{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1.2;stroke-linecap:round}
.pet{fill:var(--c);fill-opacity:.72;mix-blend-mode:screen}
.ctr{fill:var(--accent)}
.bloom{transform-box:fill-box;transform-origin:center;transform:scale(calc(.2 + .8 * var(--k))) rotate(calc((1 - var(--k)) * -90deg))}
/* rings (staged) */
.f{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.82);transition:opacity .7s var(--ease-soft),transform .9s var(--ease-soft)}
.sc.s0 .f0,.sc.s1 .f1,.sc.s2 .f2,.sc.s3 .f3{opacity:1;transform:none}
.halo{fill:rgba(217,181,131,.12)}.seedc{fill:var(--accent)}
.sc.vis .f0 .seedc{animation:scBeat 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes scBeat{50%{transform:scale(1.14)}}
.f1 path{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.spin{transform-origin:200px 200px;transform:rotate(calc(var(--p) * -150deg))}.spin.slow{transform:rotate(calc(var(--p) * 45deg))}
.orbit{fill:none;stroke:var(--border-strong);stroke-dasharray:3 7}
.od{fill:var(--c);stroke:var(--bg-deep);stroke-width:3}
.arc{fill:none;stroke:var(--c);stroke-width:11;stroke-linecap:round}
/* ripple */
.rip{fill:none;stroke:var(--accent);stroke-opacity:.38;stroke-width:1.5;transform-box:fill-box;transform-origin:center;transform:scale(calc(.4 + .6 * var(--k)))}
.ln2{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1}
.ppl{fill:var(--c);stroke:var(--bg-deep);stroke-width:2.5;transform-box:fill-box;transform-origin:center;transform:scale(calc(.2 + .8 * var(--k)))}

/* ---------- scene placement ---------- */
.sc-col{display:grid;gap:18px;width:min(100%,480px);justify-self:center}
.sc-col .sc{aspect-ratio:1/1}
.sc-keys{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.sc-keys button{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--border-strong);background:rgba(9,26,19,.4);color:var(--fg);font:500 13px var(--font-body);letter-spacing:.06em;cursor:pointer;transition:border-color .25s,background .25s,transform .2s var(--ease-out)}
.sc-keys button i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.sc-keys button:hover,.sc-keys button[aria-pressed=true]{border-color:var(--c);background:color-mix(in srgb,var(--c) 20%,transparent)}
.sc-keys button:active{transform:scale(.96)}
.sc-wide{aspect-ratio:16/10}
.sc-tall{aspect-ratio:3/4;max-height:640px;width:min(100%,460px);justify-self:center}
.sc-sq{aspect-ratio:1/1}
.split.stick{align-items:start}
.sc-col.sticky{position:sticky;top:calc(var(--header-h) + 32px)}
/* home services panel: scenes in a stage above the caption (no photos) */
.svc-panel{aspect-ratio:auto;display:grid;align-content:start;background:linear-gradient(165deg,var(--surface-2),var(--surface));border:1px solid var(--border)}
.svc-panel::after{display:none}
.sc-stage{position:relative;aspect-ratio:1/1;max-height:430px;width:100%;justify-self:center;border-bottom:1px solid var(--border)}
.sc-stage .sc{position:absolute;inset:0;border:0;border-radius:0;aspect-ratio:auto;opacity:0;pointer-events:none;transition:opacity .6s var(--ease-soft),--mx .6s,--my .6s;background:radial-gradient(60% 60% at 50% 46%,rgba(217,181,131,.1),transparent 72%)}
.sc-stage .sc.on{opacity:1;pointer-events:auto}
.svc-cap{position:relative;inset:auto;display:grid;padding:clamp(18px,2.4vw,28px)}
.svc-cap>div{grid-area:1/1;display:block}
.svc-cap>div[hidden]{display:block;visibility:hidden}
.svc-cap .k-ic{margin-bottom:12px}
.svc-cap h3{font-size:clamp(22px,2.2vw,30px)}
/* services page card scene */
.card-svc .sc-card{aspect-ratio:16/10;border-radius:16px;margin-bottom:6px}

/* ---------- card system: one look, one icon medallion ---------- */
.card,.tl-item,.col4,.fx-card,.dim-facets>.help,.big-num>div,.creds li,.notice,.step,.cardish li,.info a,.panel{
  --cc:var(--c,var(--accent));position:relative;isolation:isolate;border:1px solid var(--border);border-radius:22px;overflow:hidden;
  background:linear-gradient(155deg,color-mix(in srgb,var(--cc) 11%,var(--surface)) 0%,var(--surface) 58%);
  transition:transform .45s var(--ease-out),border-color .3s,box-shadow .4s}
.card::after,.tl-item::after,.col4::after,.fx-card::after,.dim-facets>.help::after,.big-num>div::after,.step::after,.notice::after{
  content:"";position:absolute;left:22px;right:22px;bottom:0;top:auto;width:auto;height:2px;border-radius:2px;background:var(--cc);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out)}
.card:hover,.tl-item:hover,.col4:hover,.fx-card:hover,.big-num>div:hover,.step:hover,.cardish li:hover,.creds li:hover,.info a:hover{border-color:color-mix(in srgb,var(--cc) 55%,transparent);box-shadow:0 18px 40px -22px color-mix(in srgb,var(--cc) 60%,#000)}
.card:hover,.tl-item:hover,.col4:hover,.fx-card:hover,.big-num>div:hover,.step:hover{transform:translateY(-4px)}
.card:hover::after,.tl-item:hover::after,.col4:hover::after,.fx-card:hover::after,.dim-facets>.help:hover::after,.big-num>div:hover::after,.step:hover::after,.step.act::after,.notice:hover::after{transform:scaleX(1)}
.k-ic{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:15px;color:color-mix(in srgb,var(--cc,var(--c,var(--accent))) 52%,#fff);
  background:color-mix(in srgb,var(--cc,var(--c,var(--accent))) 17%,transparent);border:1px solid color-mix(in srgb,var(--cc,var(--c,var(--accent))) 40%,transparent);
  transition:transform .45s var(--ease-out),background .3s}
.k-ic svg{width:23px;height:23px}
.card:hover .k-ic,.tl-item:hover .k-ic,.col4:hover .k-ic,.fx-card:hover .k-ic,.step:hover .k-ic,.step.act .k-ic,.big-num>div:hover .k-ic{transform:translateY(-2px) rotate(-6deg) scale(1.07);background:color-mix(in srgb,var(--cc) 30%,transparent)}
.card .glow{inset:-40% -25% auto auto;width:60%;opacity:.1}
.card .n{position:absolute;top:24px;right:26px;color:var(--muted);font-size:18px}
.card-svc .n{position:static;order:0}
.card-svc{align-content:start}
.card-svc .k-ic{margin-top:4px}

/* timeline / steps */
.tl-track{gap:16px;padding-bottom:10px}
.tl-item{flex:0 0 clamp(260px,29%,340px);padding:26px 26px 30px;display:grid;gap:10px;align-content:start}
.tl-item::before{content:none}
.tl-item::after{left:22px;top:auto;width:auto;border-radius:2px;transform:scaleX(0)}
.tl-item:hover::after,.tl-item.act::after{background:var(--cc);transform:scaleX(1)}
.tl-item b{position:absolute;top:14px;right:20px;margin:0;font:600 54px/1 var(--font-display);color:rgba(255,255,255,.07)!important;letter-spacing:0}
.tl-item h2,.tl-item h3{margin:6px 0 0}
.tl-item p{max-width:none}
.cols4{gap:16px;border-top:0;padding-top:0}
.cols4>.col4:nth-child(n){padding:26px;border-inline-start:1px solid var(--border);gap:10px}
.col4 .k{color:color-mix(in srgb,var(--cc) 55%,#fff)}
.col4 .k-ic{margin-bottom:4px}
.steps{display:grid;gap:14px;list-style:none;padding:0}
.step{padding:24px 26px 28px 94px;min-height:128px}
.step .k-ic{position:absolute;left:24px;top:24px}
.step .sn{position:absolute;top:14px;right:22px;font:600 44px/1 var(--font-display);color:rgba(255,255,255,.07)}
.step h2,.step h3{font-size:clamp(21px,2vw,26px);margin-bottom:6px}
.step p{font-size:15.5px;color:var(--fg-2);line-height:1.65}
.step.act{border-color:color-mix(in srgb,var(--cc) 60%,transparent);transform:translateX(6px);cursor:default}
.step{cursor:pointer}

/* facets, stats, credentials, notice, checklists, contact */
.dim-facets>.fx-card,.dim-facets>.help{padding:20px 22px 24px;display:grid;gap:4px;align-content:start;
  background:linear-gradient(155deg,color-mix(in srgb,var(--cc) 14%,rgba(9,26,19,.78)) 0%,rgba(9,26,19,.78) 62%)}
.dim-facets>.help{--cc:var(--c,var(--accent))}
.fx-card .k-ic,.help>.k-ic{width:42px;height:42px;border-radius:13px;margin-bottom:10px}
.fx-card .k-ic svg,.help>.k-ic svg{width:20px;height:20px}
.dim-facets{gap:16px;border-top:0;padding-top:0}
.big-num{gap:16px;border-top:0}
.big-num>div:nth-child(n){padding:26px 26px 28px;border-inline-start:1px solid var(--border);display:grid;gap:6px;align-content:start}
.big-num .k-ic{margin-bottom:8px}
.big-num b span{font:inherit;color:inherit}
.big-num b{font-size:clamp(46px,5.4vw,76px)}
.creds{column-gap:16px}
.creds li{padding:14px 16px;margin-bottom:12px;border-radius:16px;align-items:center;gap:14px;border-top:1px solid var(--border)}
.creds li::before{content:none}
.creds .k-ic{width:38px;height:38px;border-radius:12px}.creds .k-ic svg{width:19px;height:19px}
.notice{display:flex;gap:20px;align-items:flex-start;border-inline-start:1px solid var(--border);border-radius:22px;padding:26px 28px;max-width:72ch}
.notice::after{left:28px;right:28px}
.checks.cardish{gap:12px;margin-top:26px;counter-reset:none}
.cardish li{counter-increment:none;align-items:center;gap:16px;padding:16px 18px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)!important;border-radius:18px;color:var(--fg-2)}
.cardish li::before{content:none}
.cardish .k-ic{width:42px;height:42px;border-radius:13px}.cardish .k-ic svg{width:20px;height:20px}
.panel{border-radius:28px}
.panel::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,var(--dim-1),var(--dim-2),var(--dim-3),var(--dim-4));opacity:.85}
.info{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.info a{padding:14px 16px;border-radius:18px;gap:14px;min-width:0;overflow-wrap:anywhere}
.info .ic{width:44px;height:44px;border-radius:14px;background:color-mix(in srgb,var(--accent) 16%,transparent);border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);transition:transform .4s var(--ease-out)}
.info a:hover .ic{transform:rotate(-6deg) scale(1.07)}

/* ---------- responsive ---------- */
@media(max-width:1100px){.cols4{grid-template-columns:1fr 1fr}.tl-item{flex-basis:clamp(260px,42%,340px)}}
@media(max-width:860px){
  .sc-col.sticky{position:static}
  .sc-col{width:min(100%,420px)}
  .sc-stage{max-height:360px}
  .step{padding:22px 22px 26px 86px}
  .step.act{transform:none}
  .cols4>.col4:nth-child(n){padding:22px}
  .tl-item{flex-basis:78%}
  .big-num{grid-template-columns:1fr}
  .creds{columns:1}
}
@media(max-width:560px){
  .cols4{grid-template-columns:1fr}
  .big-num>div:nth-child(n){border-inline-start:1px solid var(--border);padding:22px}
  .notice{flex-direction:column;gap:14px;padding:22px}
  .step{padding:78px 20px 24px}
  .step .k-ic{left:20px;top:20px}
  .sc-tall{width:min(100%,360px)}
}
@media(hover:none){.card:hover,.tl-item:hover,.col4:hover,.fx-card:hover,.big-num>div:hover,.step:hover{transform:none}}

/* ---------- reduced motion: final state, no continuous animation ---------- */
@media(prefers-reduced-motion:reduce){
  .sc,.sc *{transition:none!important;animation:none!important}
  .card,.tl-item,.col4,.fx-card,.big-num>div,.step{transition:none}
  .card:hover,.tl-item:hover,.col4:hover,.fx-card:hover,.big-num>div:hover,.step:hover,.step.act{transform:none}
  .card:hover .k-ic,.tl-item:hover .k-ic,.col4:hover .k-ic,.fx-card:hover .k-ic,.step:hover .k-ic{transform:none}
}