/* final.css is BUILT by final_css.py: demo1.css, then the borrowed rules, then final-only rules. Edit those sources, not this file. */
/* Demo 1 — The Studio. Dark, photo-led, cinematic. Playfair leads, Be Vietnam body. */
.d1 .ph img{filter:saturate(.92) contrast(1.06)}
.d1 .hero-bg img{filter:saturate(.95) contrast(1.04)}

/* ---------- header: transparent over the photo, white once the page moves ---------- */
.hdr{
  position:fixed; inset:0 0 auto; z-index:60; height:var(--hdr); display:flex; align-items:center;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), height .4s var(--ease);
}
.hdr::before{
  content:""; position:absolute; inset:-40px 0 auto; height:190px; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(31,40,65,.62), rgba(31,40,65,0)); transition:opacity .4s var(--ease);
}
.hdr.solid{background:rgba(255,255,255,.96); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line); height:74px}
.hdr.solid::before{opacity:0}
.hdr .wrap-wide{display:flex; align-items:center; gap:clamp(16px,3vw,46px); width:100%}
.lockup{display:flex; align-items:center; flex:none}
.lockup img{width:auto; height:clamp(50px,4.8vw,66px); transition:height .4s var(--ease)}
.hdr.solid .lockup img{height:clamp(42px,3.8vw,54px)}
.lockup .mark-on-light{display:none}
.hdr.solid .lockup .mark-on-dark{display:none}
.hdr.solid .lockup .mark-on-light{display:block}
.hdr-nav{display:flex; gap:clamp(14px,2vw,32px); margin-left:auto}
.hdr-nav a{font-size:13.5px; font-weight:500; letter-spacing:.04em; color:#fff; position:relative; padding:6px 0}
.hdr-nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease)}
.hdr-nav a:hover::after{transform:scaleX(1)}
.hdr.solid .hdr-nav a{color:var(--navy)}
.hdr-cta{display:flex; align-items:center; gap:14px; flex:none}
.hdr.solid .btn-light{background:var(--navy); color:#fff}
.burger{display:none; width:44px; height:44px; border:0; background:none; padding:10px; cursor:pointer; flex-direction:column; justify-content:center; gap:5px}
.burger span{display:block; height:2px; background:#fff; border-radius:2px; transition:background .3s var(--ease)}
.hdr.solid .burger span{background:var(--navy)}

/* ---------- drawer ---------- */
.drawer{background:var(--night); color:#fff; padding:22px var(--gut) 40px; display:flex; flex-direction:column}
.js .drawer{position:fixed; inset:0; z-index:70; transform:translateX(100%); transition:transform .5s var(--ease); overflow:auto}
.js .drawer.open{transform:none}
.drawer-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:38px}
.drawer-top img{height:40px; width:auto}
html:not(.js) .menu-close{display:none}
.menu-close{width:46px; height:46px; border:1px solid rgba(255,255,255,.3); background:none; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer}
.drawer nav{display:flex; flex-direction:column; gap:2px}
.drawer nav a{font-family:var(--serif); font-size:clamp(30px,8vw,44px); padding:10px 0; border-bottom:1px solid rgba(255,255,255,.1); color:#fff}
.drawer-foot{margin-top:auto; padding-top:30px; display:flex; flex-direction:column; gap:14px}
.drawer-foot a{display:flex; align-items:center; gap:10px; color:var(--lblue); font-size:15px}
.drawer-foot .btn{color:var(--ink); justify-content:center}

/* ---------- hero ---------- */
.d1-hero{position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:calc(var(--hdr) + 40px) 0 110px; overflow:hidden; background:var(--night)}
.d1-hero-scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(31,40,65,.82) 0%, rgba(31,40,65,.55) 42%, rgba(31,40,65,.08) 78%),
             linear-gradient(to top, rgba(31,40,65,.75), rgba(31,40,65,0) 40%)}
.d1-hero-in{position:relative; z-index:2; max-width:var(--max); width:100%}
.d1-hero h1{max-width:none; color:#fff; font-size:clamp(44px,5.9vw,88px)}
.d1-hero h1 em{display:block; color:var(--lblue); font-weight:400}
.d1-hero .lead{max-width:56ch; margin-top:28px; color:rgba(255,255,255,.86)}
.d1-hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:36px}
.d1-trust{display:flex; gap:26px; flex-wrap:wrap; margin-top:42px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.7)}
.d1-trust li{display:flex; align-items:center; gap:10px}
.d1-trust li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--pink)}

/* ---------- section heads + two column ---------- */
.d1-head{max-width:760px; margin-bottom:56px}
.d1-head-row{max-width:none; display:grid; grid-template-columns:1.1fr 1fr; gap:var(--gap); align-items:end}
.d1-head-row .next-session{margin:18px 0 0}
.d1 h2 em{display:block; color:var(--breathe-deep)}
.on-dark h2 em{color:var(--lblue)}
.on-pastel h2 em{color:var(--ink); opacity:.8}
.d1-two{display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--gap) * 2); align-items:center}
.d1-two-photo{grid-template-columns:.9fr 1.1fr}
.d1-two-photo.rev{grid-template-columns:1.1fr .9fr}

/* ---------- sound familiar ---------- */
.d1-chips{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; align-self:center}
.d1-chip{min-height:56px; justify-content:flex-start; text-align:left; padding:0 18px 0 14px; gap:12px; line-height:1.2; width:100%; white-space:nowrap; border-color:rgba(255,255,255,.9); background:rgba(255,255,255,.92); box-shadow:0 6px 18px -14px rgba(31,40,65,.5)}
.d1-chip span{overflow:hidden; text-overflow:ellipsis}
.d1-chip i{flex:none; width:20px; height:20px; border-radius:50%; border:1.5px solid rgba(31,40,65,.3); position:relative; transition:background .3s var(--ease), border-color .3s var(--ease)}
.d1-chip i::after{content:""; position:absolute; left:6px; top:3px; width:5px; height:9px; border:solid var(--ink); border-width:0 2px 2px 0; transform:rotate(45deg) scale(0); transition:transform .25s var(--ease)}
.d1-chip:hover{transform:translateY(-2px); border-color:#fff}
.d1-chip:hover i{border-color:var(--ink)}
.d1-chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.d1-chip[aria-pressed="true"] i{background:#fff; border-color:#fff}
.d1-chip[aria-pressed="true"] i::after{transform:rotate(45deg) scale(1)}
.d1-for{margin-top:28px; padding-top:22px; border-top:1px solid rgba(31,40,65,.18)}
.d1-for-k{font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); margin:0 0 12px}
.d1-for-tags{display:flex; flex-wrap:wrap; gap:8px; min-height:40px; align-items:center; margin-bottom:12px}
.d1-for-empty{font-size:14px; color:var(--mute); font-style:italic}
.d1-for-tag{display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 16px 0 12px; border-radius:var(--r-pill); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); animation:tagIn .45s var(--ease) both}
.d1-for-tag::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--ink); opacity:.55}
.d1-for-tag.t-breathe{background:var(--lblue)} .d1-for-tag.t-move{background:var(--move)} .d1-for-tag.t-flow{background:var(--flow)}
@keyframes tagIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.d1-familiar-out{margin:0 0 18px; color:var(--ink); font-weight:500; line-height:1.55; text-wrap:balance}

/* ---------- modality cards ----------
   One grid, three cards, seven shared rows (photo, mark, title, line, blurb, prices, buttons):
   every region starts on the same line in all three cards, whatever wraps. */
.d1-mods{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); grid-auto-rows:auto; gap:var(--gap); align-items:stretch}
.d1-mod{display:grid; grid-template-rows:subgrid; grid-row:span 7; row-gap:0; border-radius:var(--r); overflow:hidden; position:relative; padding:0 28px 30px; transition:transform .5s var(--ease), box-shadow .5s var(--ease), opacity .5s var(--ease)}
.d1-mod-photo{margin:0 -28px 26px; border-radius:0; aspect-ratio:4/5}
.d1-lock{width:auto; height:36px; margin:0 0 18px}
.d1-mod-title{font-size:clamp(23px,2vw,27px); line-height:1.12; margin:0 0 6px; white-space:nowrap}
.d1-mod-line{font-family:var(--serif); font-size:clamp(17px,1.4vw,19px); line-height:1.3; margin:0 0 16px; opacity:.9}
.d1-mod-short{font-size:15.5px; line-height:1.6; margin:0 0 22px}
.facts{margin:0; border-top:1px solid rgba(31,40,65,.18); align-self:start}
.facts li{display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid rgba(31,40,65,.18); font-size:14px; line-height:1.4; color:var(--ink); white-space:nowrap}
.facts li span{flex:1; overflow:hidden; text-overflow:ellipsis}
.d1-mod-cta{align-self:end; padding-top:26px; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.d1-mod-cta .link{color:var(--ink)}
.d1-mod.lit{transform:translateY(-8px); box-shadow:var(--shadow)}
.d1-mod.lit::after{content:"Can help"; position:absolute; top:16px; left:16px; z-index:2; background:var(--ink); color:#fff; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; padding:8px 12px; border-radius:var(--r-pill)}
.d1-mod.dim{opacity:.55}
.d1-who{margin-top:56px}
.d1-pacer-sec .pacer-side h2 em{color:var(--lblue)}
.d1-pacer-sec .eyebrow{color:var(--lblue)}

/* ---------- freeze: the studio holds while the four stages pass ---------- */
.d1-freeze{color:#fff}
.d1-freeze-photo{position:absolute; inset:0}
.d1-freeze-photo img{width:100%; height:100%; object-fit:cover; object-position:center}
.d1-freeze-scrim{position:absolute; inset:0; background:linear-gradient(90deg, rgba(31,40,65,.86) 0%, rgba(31,40,65,.58) 46%, rgba(31,40,65,.12) 100%)}
.d1-freeze-head{position:absolute; top:calc(var(--hdr) + 24px); left:0; right:0; display:flex; justify-content:space-between; align-items:center; z-index:3}
.d1-freeze-head .eyebrow{margin:0}
.d1-stage-in{width:100%}
.d1-stage-copy{max-width:560px}
.d1-stage-copy h3{font-size:clamp(34px,4.4vw,64px); margin:14px 0 22px}
.d1-stage-copy p{font-size:var(--fs-lead)}
html:not(.js) .d1-freeze-photo,.reduced .d1-freeze-photo{position:relative; aspect-ratio:16/9; margin-bottom:30px}
html:not(.js) .d1-freeze-scrim,.reduced .d1-freeze-scrim{display:none}
html:not(.js) .d1-freeze-head,.reduced .d1-freeze-head{position:static; padding:var(--sec) var(--gut) 0}
html:not(.js) .d1-freeze .freeze-stage,.reduced .d1-freeze .freeze-stage{padding-bottom:var(--sec)}

/* ---------- everyone / recovery / about ---------- */
.d1-everyone .btn,.d1-recovery .btn{margin-top:30px}
.d1-recovery .eyebrow,.d1-familiar .eyebrow{color:var(--ink)}
.d1-about-copy p{font-size:16.5px}
.d1-about .cred{margin-top:40px; grid-template-columns:1fr 1fr}
.d1-about .cred li img{filter:none}

/* ---------- events ---------- */
.d1-ev-filter{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 26px}
.d1-ev-filter .small{margin-right:10px; min-width:90px}
.d1-events .ev .ev-d{color:var(--flow-deep)}
.d1-events .ev{border-color:rgba(31,40,65,.14)}
.d1-events .chip{border-color:rgba(31,40,65,.16)}

/* ---------- contact ---------- */
.d1-contact-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px}
.d1-contact-lines{margin-top:36px; display:flex; flex-direction:column; gap:12px; font-size:15px}
.d1-contact-lines li{display:flex; gap:12px; align-items:flex-start}
.d1-contact-lines svg{flex:none; margin-top:4px; color:var(--lblue)}
.d1-contact .form{background:rgba(255,255,255,.05); padding:30px; border-radius:var(--r); border:1px solid rgba(255,255,255,.14)}
.d1-contact .btn-primary{background:#fff; color:var(--ink)}
.d1-contact .btn-primary:hover{background:var(--lblue)}

/* ---------- faq ---------- */
.d1-faq .btn{margin-top:26px}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .hdr-nav{display:none}
  .burger{display:flex}
}
@media (max-width:1080px){
  .d1-mods{grid-template-columns:1fr; max-width:640px; margin:0 auto}
  .d1-mod{grid-row:auto; grid-template-rows:auto; display:flex; flex-direction:column; align-items:stretch}
  .d1-mod > *{align-self:stretch}
  .d1-mod .lock{align-self:flex-start} .d1-mod .facts{width:100%} .d1-mod-cta{justify-content:flex-start}
  .d1-mod-title{white-space:normal}
  .d1-head-row{grid-template-columns:1fr}
  .d1-two,.d1-two-photo,.d1-two-photo.rev{grid-template-columns:1fr; gap:40px}
  .d1-two-photo.rev figure{order:-1}
}
@media (max-width:700px){
  .d1-hero{padding-bottom:80px}
  .d1-hero h1{max-width:none}
  .d1-hero-scrim{background:linear-gradient(to top, rgba(31,40,65,.92) 0%, rgba(31,40,65,.66) 50%, rgba(31,40,65,.2) 100%)}
  .d1-trust{gap:12px; font-size:11px}
  .d1-chips{grid-template-columns:1fr} .d1-chip{white-space:normal; min-height:52px}
  .d1-about .cred{grid-template-columns:1fr}
  .d1-mod{padding:0 22px 26px} .d1-mod-photo{margin:0 -22px 22px}
  .facts li{white-space:normal}
  .d1-freeze-head{top:calc(var(--hdr) + 14px)}
  .d1-freeze-head{flex-direction:column; align-items:flex-start; gap:6px}
  .d1-freeze-head .eyebrow{font-size:10.5px}
  .d1-stage-copy h3{font-size:30px}
  .d1-stage-copy p{font-size:16px}
  .d1-contact .form{padding:22px}
  .lockup img{height:44px}
}


/* quotes on pink: ink type, centred, quiet dots */
.d1-quotes .quote{max-width:920px; margin:0 auto; text-align:center}
.d1-quotes .quote .q-dots{justify-content:center}
.d1-quotes .quote .q-body{color:var(--ink)}
.d1-quotes .eyebrow{color:var(--ink)}

/* ---------- feed: a filmstrip that drifts, pauses under the cursor ---------- */
.d1-feed .feed-head{margin-bottom:30px}
.feed-strip .feed-grid{display:flex; width:max-content; gap:0; animation:feedDrift 48s linear infinite}
.feed-strip .feed-copy{display:contents}
.feed-strip .feed-tile{flex:0 0 250px; margin-right:14px; border-radius:var(--r-sm)}
.feed-strip:hover .feed-grid,.feed-strip:focus-within .feed-grid{animation-play-state:paused}
.feed-strip{overflow:hidden; margin:0 calc(var(--gut) * -1); padding:0 var(--gut); -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)}
@keyframes feedDrift{to{transform:translateX(-50%)}}
.reduced .feed-strip .feed-grid,html:not(.js) .feed-strip .feed-grid{animation:none; width:auto; flex-wrap:wrap; gap:14px}
.reduced .feed-strip .feed-copy,html:not(.js) .feed-strip .feed-copy{display:none}
@media (max-width:700px){.feed-strip .feed-tile{flex-basis:180px}}

/* ---------- hero light dimmer: the room as it is on the night ---------- */
.d1-hero{--dim:.62}
.d1-hero .hero-bg img{filter:brightness(calc(1.25 - var(--dim) * .95)) saturate(calc(1 + var(--dim) * .5)) contrast(calc(1 + var(--dim) * .12)); transition:filter .35s var(--ease)}
.d1-hero-scrim{opacity:calc(.55 + var(--dim) * .55); transition:opacity .35s var(--ease)}
.d1-dimmer{position:relative; z-index:3; width:min(100%, 320px); margin-top:34px; display:flex; flex-direction:column; gap:8px}
.d1-dimmer label{display:flex; justify-content:space-between; align-items:baseline; gap:16px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.7); white-space:nowrap}
.d1-dimmer-v{font-family:var(--serif); font-style:italic; text-transform:none; letter-spacing:0; font-size:14px; color:#fff}
.d1-dimmer input{-webkit-appearance:none; appearance:none; width:100%; height:32px; background:transparent; cursor:pointer; margin:0}
.d1-dimmer input::-webkit-slider-runnable-track{height:3px; border-radius:2px; background:linear-gradient(90deg, #fff, var(--breathe))}
.d1-dimmer input::-moz-range-track{height:3px; border-radius:2px; background:linear-gradient(90deg, #fff, var(--breathe))}
.d1-dimmer input::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; border:2px solid var(--breathe); margin-top:-9.5px; box-shadow:0 0 0 6px rgba(255,255,255,.14), 0 6px 16px rgba(0,0,0,.4)}
.d1-dimmer input::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:#fff; border:2px solid var(--breathe); box-shadow:0 0 0 6px rgba(255,255,255,.14)}
.d1-dimmer-hint{font-size:11.5px; color:rgba(255,255,255,.55)}
html:not(.js) .d1-dimmer{display:none}

@media (max-width:700px){.d1-dimmer{width:100%}}

/* ---------- what shifts: four panels, the open one tells its story ---------- */
.d1-shifts-row{display:flex; gap:12px; height:520px}
.d1-shift{position:relative; flex:1; min-width:0; border:0; padding:0; border-radius:var(--r); overflow:hidden; cursor:pointer; text-align:left; color:#fff; background:var(--navy); transition:flex .8s cubic-bezier(.2,.8,.2,1); font:inherit}
.d1-shift[aria-expanded="true"]{flex:3.2}
.d1-shift-ph{position:absolute; inset:0; margin:0}
.d1-shift-ph img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.7) brightness(.62); transition:filter .8s var(--ease), transform 1.4s var(--ease)}
.d1-shift[aria-expanded="true"] .d1-shift-ph img{filter:saturate(.9) brightness(.8); transform:scale(1.04)}
.d1-shift::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(31,40,65,.92) 0%, rgba(31,40,65,.35) 50%, rgba(31,40,65,.1) 100%)}
.d1-shift-n{position:absolute; left:22px; top:22px; z-index:1; font-family:var(--serif); font-style:italic; font-size:22px; color:#fff; opacity:.85}
.d1-shift-body{position:absolute; left:0; right:0; bottom:0; z-index:1; padding:26px 26px 28px; display:flex; flex-direction:column; gap:12px}
.d1-shift-t{font-family:var(--serif); font-size:clamp(22px,2vw,30px); line-height:1.1; color:#fff; writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; transition:none}
.d1-shift[aria-expanded="true"] .d1-shift-t{writing-mode:horizontal-tb; transform:none; white-space:normal}
.d1-shift-p{font-size:15.5px; line-height:1.6; color:rgba(255,255,255,.86); max-width:48ch; display:none}
.d1-shift[aria-expanded="true"] .d1-shift-p{display:block; animation:shiftIn .7s var(--ease) both}
@keyframes shiftIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.d1-shift:focus-visible{outline:2px solid #fff; outline-offset:3px}
@media (max-width:1080px){.d1-shifts-row{flex-direction:column; height:auto} .d1-shift{min-height:96px} .d1-shift[aria-expanded="true"]{min-height:360px} .d1-shift-t{writing-mode:horizontal-tb; transform:none; white-space:normal} .d1-shift-body{padding:20px 22px 22px}}
html:not(.js) .d1-shifts-row{flex-direction:column; height:auto} html:not(.js) .d1-shift{min-height:300px} html:not(.js) .d1-shift-p{display:block} html:not(.js) .d1-shift-t{writing-mode:horizontal-tb; transform:none}

/* ---------- events: the from-picker and the phone ---------- */
.d1-ev-tools{display:flex; justify-content:space-between; align-items:flex-end; gap:26px; flex-wrap:wrap; margin-bottom:6px}
.ev-miles{display:inline-block; margin-left:8px; font-size:12px; font-weight:600; color:var(--flow-deep); background:var(--flow-pale); padding:2px 8px; border-radius:var(--r-pill); vertical-align:middle}
.d1-ev-grid{display:grid; grid-template-columns:1.35fr .65fr; gap:calc(var(--gap) * 2); align-items:start; margin-top:18px}
.d1-prep{position:sticky; top:calc(var(--hdr) + 24px)}
.d1-prep h3{font-size:clamp(22px,2vw,28px); margin:6px 0 18px}
.d1-prep > .small{margin-top:14px; color:var(--mute)}
.d1-phone{background:#fff; border-radius:26px; border:1px solid rgba(31,40,65,.14); box-shadow:0 30px 50px -34px rgba(31,40,65,.5); overflow:hidden; font-size:14px}
.d1-phone-top{display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--flow-pale); border-bottom:1px solid rgba(31,40,65,.08)}
.d1-phone-top b{display:block; font-size:14px; color:var(--ink)} .d1-phone-top small{font-size:11px; color:var(--mute)}
.d1-phone-av{width:34px; height:34px; border-radius:50%; background:var(--breathe); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:17px; flex:none}
.d1-phone-body{padding:18px 14px; min-height:220px; display:flex; flex-direction:column; gap:10px; background:linear-gradient(180deg, #F7F9FC, #F1F4F9)}
.d1-bubble{max-width:88%; padding:10px 14px; border-radius:16px 16px 16px 4px; background:#fff; color:var(--ink); line-height:1.5; box-shadow:0 2px 6px rgba(31,40,65,.08); white-space:pre-line; align-self:flex-start}
.d1-bubble-me{align-self:flex-end; border-radius:16px 16px 4px 16px; background:var(--flow-pale)}
.d1-bubble-typing{display:inline-flex; gap:5px; padding:12px 14px; width:auto}
.d1-bubble-typing i{width:7px; height:7px; border-radius:50%; background:var(--mute); animation:typing 1.2s ease-in-out infinite}
.d1-bubble-typing i:nth-child(2){animation-delay:.2s} .d1-bubble-typing i:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,80%,100%{transform:translateY(0); opacity:.5} 40%{transform:translateY(-4px); opacity:1}}
.d1-phone-bar{padding:10px 14px 14px; border-top:1px solid rgba(31,40,65,.08); background:#fff}
.d1-phone-bar span{display:block; min-height:34px; border-radius:17px; border:1px solid rgba(31,40,65,.14); padding:7px 14px; font-size:13px; color:var(--mute)}
html:not(.js) .d1-bubble-typing{display:none} html:not(.js) [data-prep-msg],html:not(.js) [data-prep-reply]{display:block}
@media (max-width:1080px){.d1-ev-grid{grid-template-columns:1fr} .d1-prep{position:static; max-width:420px}}

/* ---------- freeze sparkle: specks of light drift up through the room, the photo eases between stages ---------- */
.d1-sparkle{position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; mix-blend-mode:screen}
html:not(.js) .d1-sparkle,.reduced .d1-sparkle{display:none}
.d1-freeze-photo img{transition:transform 1.6s cubic-bezier(.2,.7,.2,1), object-position 1.6s cubic-bezier(.2,.7,.2,1)}
.d1-freeze[data-stage="0"] .d1-freeze-photo img{transform:scale(1)} .d1-freeze[data-stage="1"] .d1-freeze-photo img{transform:scale(1.05) translateX(-1.5%)}
.d1-freeze[data-stage="2"] .d1-freeze-photo img{transform:scale(1.09) translate(-2%, 1%)} .d1-freeze[data-stage="3"] .d1-freeze-photo img{transform:scale(1.13) translate(-1%, 2%)}
.d1-steps{display:flex; align-items:center; gap:14px}
.d1-step-dots{display:flex; gap:6px; margin:0; padding:0; list-style:none}
.d1-step-dots li{width:26px; height:6px; border-radius:3px; background:rgba(255,255,255,.22); transition:background .5s var(--ease), width .5s var(--ease)}
.d1-step-dots li:nth-child(1).on{background:var(--breathe); width:38px} .d1-step-dots li:nth-child(2).on{background:var(--move); width:38px}
.d1-step-dots li:nth-child(3).on{background:var(--flow); width:38px} .d1-step-dots li:nth-child(4).on{background:var(--pink); width:38px}
.d1-step-dots li.past{background:rgba(255,255,255,.5)}
.d1-freeze .freeze-bar i{background:linear-gradient(90deg, var(--breathe), var(--move), var(--flow), var(--pink))}
@media (max-width:700px){.d1-step-dots li{width:18px} .d1-step-dots li.on{width:26px !important}}


/* ---------- borrowed from demo2.css ---------- */
.d2-row-sec{padding:calc(var(--sec) * .7) 0}
.d2-row{display:grid; grid-template-columns:1.1fr .9fr; gap:calc(var(--gap) * 2.5); align-items:center}
.d2-row.rev .d2-row-copy{order:2}
.d2-row.rev .d2-row-photo{order:1}
.d2-row-copy{position:relative}
.d2-big-n{position:absolute; left:-24px; top:-70px; font-family:var(--serif); font-style:italic; font-size:clamp(120px,14vw,200px); line-height:1; color:rgba(31,40,65,.06); pointer-events:none; user-select:none}
.d2-lock{width:auto; height:40px; margin:0 0 18px}
.d2-row h2{font-size:clamp(32px,3.6vw,52px); margin-bottom:22px}
.d2-row h2 em{display:block; font-size:.66em; margin-top:8px}
.d2-facts{margin:26px 0 0; border-top:1px solid rgba(31,40,65,.16); max-width:520px}
.d2-facts li{display:flex; justify-content:space-between; gap:18px; padding:11px 0; border-bottom:1px solid rgba(31,40,65,.16); font-size:15px; color:var(--ink)}
.d2-facts li span{flex:1}
.d2-row-cta{display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:30px}
.d2-row-photo .ph{transition:transform .5s var(--ease); transform-style:preserve-3d}
.d2-pick .d2-facts{border-color:rgba(31,40,65,.18)}
.d2-pick .d2-facts li{border-color:rgba(31,40,65,.18)}
.d2-studio-in{display:grid; grid-template-columns:.95fr 1.05fr; gap:calc(var(--gap) * 2.5); align-items:center}
.d2-deck{outline-offset:8px}
.d2-deck-cards{position:relative}
.d2-card{margin:0}
.d2-deck.is-live .d2-deck-cards{aspect-ratio:4/5.35}
.d2-deck.is-live .d2-card{position:absolute; inset:0; transition:transform .6s var(--ease), opacity .6s var(--ease); cursor:pointer}
.d2-deck.is-live .d2-card[data-pos="0"]{z-index:4; transform:none}
.d2-deck.is-live .d2-card[data-pos="1"]{z-index:3; transform:translate(14px,-14px) rotate(2deg) scale(.97)}
.d2-deck.is-live .d2-card[data-pos="2"]{z-index:2; transform:translate(28px,-28px) rotate(4deg) scale(.94)}
.d2-deck.is-live .d2-card[data-pos="3"]{z-index:1; transform:translate(42px,-42px) rotate(6deg) scale(.91); opacity:.7}
.d2-deck.is-live .d2-card:not([data-pos="0"]) figcaption{opacity:0}
.d2-deck:not(.is-live) .d2-deck-cards{display:grid; gap:var(--gap)}
.d2-deck-nav{display:none; align-items:center; justify-content:space-between; margin-top:20px}
.d2-deck.is-live .d2-deck-nav{display:flex}
.d2-deck-nav button{width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--navy); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease)}
.d2-deck-nav button:hover{background:var(--navy); color:#fff}
.d2-deck-dots{display:flex; gap:6px}
.d2-deck-dots button{width:44px; height:44px; border:0; background:none; padding:0; display:flex; align-items:center; justify-content:center; margin:0 -8px; cursor:pointer}
.d2-deck-dots button i{display:block; width:20px; height:2px; background:var(--line); transition:background .3s var(--ease)}
.d2-deck-dots button[aria-current="true"] i{background:var(--navy)}
.d2-addr{margin-top:26px; display:flex; flex-direction:column; gap:10px; font-size:15px; color:var(--ink)}
.d2-addr li{display:flex; gap:12px; align-items:flex-start}
.d2-addr svg{flex:none; margin-top:4px; color:var(--pink-deep)}
.d2-form-card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:34px; color:var(--body)}
.d2-contact .d2-form-card .form label{color:var(--mute)}
.d2-contact .d2-form-card .step label{color:var(--ink)}
.d2-contact .d2-form-card .form input,.d2-contact .d2-form-card .form textarea,.d2-contact .d2-form-card .form select{background:#fff; border-color:var(--line); color:var(--ink)}
.d2-contact .d2-form-card .form input:focus,.d2-contact .d2-form-card .form textarea:focus{border-color:var(--navy)}
.d2-contact .d2-form-card .form input::placeholder{color:var(--mute)}
.d2-contact .d2-addr svg{color:var(--lblue)}
.d2-contact .d2-addr{color:rgba(255,255,255,.86)}
.d2-contact .steps-label{color:var(--mute)}
.d2-contact .steps-bar{background:var(--line)}
.d2-contact .steps-bar i{background:var(--navy)}
.d2-steps{display:block}
.steps-head{display:none; align-items:center; gap:18px; margin-bottom:26px}
.steps-label{font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); white-space:nowrap}
.steps-bar{flex:1; height:2px; background:var(--line); overflow:hidden}
.steps-bar i{display:block; height:100%; background:var(--navy); transform-origin:left; transform:scaleX(.25); transition:transform .5s var(--ease)}
.step{margin-bottom:22px}
.step label{font-family:var(--serif); font-size:clamp(20px,1.8vw,26px); color:var(--ink); text-transform:none; letter-spacing:0; margin-bottom:14px}
.step-nav{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
.d2-steps:not(.is-stepped) .step-nav [data-next],.d2-steps:not(.is-stepped) .step-nav [data-prev]{display:none}
.d2-steps.is-stepped .steps-head{display:flex}
.d2-steps.is-stepped .step{display:none}
.d2-steps.is-stepped .step.on{display:block; animation:pickIn .5s var(--ease) both}
@media (max-width:1080px){
  .d2-intro-in,.d2-row,.d2-row.rev,.d2-chooser,.d2-studio-in,.d2-two,.d2-two.rev,.d2-contact-in{grid-template-columns:1fr; gap:40px}
  .d2-row.rev .d2-row-copy{order:1}
  .d2-row.rev .d2-row-photo{order:2}
}
@media (max-width:700px){
  .d2-big-n{display:none}
  .d2-row-sec{padding:48px 0}
  .d2-form-card{padding:22px}
  .d2-deck.is-live .d2-card[data-pos="3"]{display:none}
}
.d2-breaths{display:inline-flex; align-items:center; gap:8px; white-space:nowrap; margin:26px 0 0; font-size:14.5px; line-height:1.4; color:var(--body); padding:10px 18px; border:1px dashed rgba(31,40,65,.3); border-radius:var(--r-pill); max-width:100%}
@media (max-width:700px){
  .d2-breaths em{display:none}
  .d2-breaths{font-size:13.5px}
}
.d2-breaths b{font-family:var(--sans); font-weight:700; font-variant-numeric:lining-nums tabular-nums; font-size:17px; color:var(--pink-deep); min-width:1.6ch; text-align:center; display:inline-block; margin:0 2px; transition:transform .3s var(--ease)}
.d2-breaths b.tick{animation:breathTick .5s var(--ease)}
.d2-breaths em{color:var(--ink)}
.d2-breaths-dot{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--pink); flex:none; animation:breathDot 4s ease-in-out infinite}
html:not(.js) .d2-breaths{display:none}
@keyframes pickIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@keyframes breathTick{0%{transform:translateY(-6px); opacity:.2} 100%{transform:none; opacity:1}}
@keyframes breathDot{0%,100%{transform:scale(.7); opacity:.6} 50%{transform:scale(1.25); opacity:1}}

/* ---------- borrowed from demo3.css ---------- */
.d3-journey{padding:var(--sec) 0}
.d3-journey-in{display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--gap) * 3); align-items:start}
.d3-journey-pin{position:sticky; top:calc(var(--hdr) + 30px)}
.d3-journey-big{font-family:var(--sans); font-weight:700; font-size:clamp(90px,12vw,180px); line-height:.9; letter-spacing:-.04em; color:#fff; margin:0 0 10px}
.d3-journey-pin h2{font-size:clamp(30px,3.6vw,52px); min-height:2.1em}
.d3-journey-list{margin-top:30px; display:flex; flex-direction:column; gap:8px; font-size:14px; font-weight:600; letter-spacing:.04em}
.d3-journey-list li{display:flex; align-items:center; gap:12px; opacity:.55; transition:opacity .3s var(--ease)}
.d3-journey-list li::before{content:""; width:22px; height:2px; background:currentColor; transition:width .3s var(--ease)}
.d3-journey-list li.on{opacity:1}
.d3-journey-list li.on::before{width:40px}
.d3-journey-flow{display:flex; flex-direction:column; gap:clamp(60px,10vh,140px); padding:10vh 0}
.d3-stage{opacity:.45; transition:opacity .5s var(--ease); border-left:2px solid rgba(31,40,65,.25); padding-left:26px}
.d3-stage.on{opacity:1; border-color:var(--ink)}
.d3-stage-n{font-size:12px; letter-spacing:.2em; font-weight:700}
.d3-stage h3{font-size:clamp(24px,2.4vw,34px); margin:8px 0 14px}
.d3-stage p{font-size:var(--fs-lead); max-width:46ch}
.d3-gate-wrap{margin-top:calc(var(--sec) * .7); padding-top:calc(var(--sec) * .5); border-top:1px solid rgba(31,40,65,.18)}
.d3-gate-head{max-width:640px; margin-bottom:44px}
.d3-gate-head h3{font-size:clamp(26px,3vw,42px); margin-bottom:16px}
.d3-gate-body{display:grid; grid-template-columns:280px 1fr; gap:calc(var(--gap) * 2); align-items:start}
.d3-spine{position:relative; aspect-ratio:240/600; max-width:280px; color:var(--flow-deep)}
.d3-spine-svg{width:100%; height:100%; display:block}
.d3-gate{position:absolute; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; border:0; background:transparent; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center}
.d3-gate::before{content:""; width:26px; height:26px; border-radius:50%; background:var(--c); border:3px solid #fff; box-shadow:0 0 0 1px rgba(31,40,65,.25); transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.d3-gate:hover::before,.d3-gate.on::before{transform:scale(1.35); box-shadow:0 0 0 6px rgba(31,40,65,.12)}
.d3-gate-out{padding:26px 28px; border-radius:var(--r); background:#fff; border:1px solid rgba(31,40,65,.15); min-height:150px}
.d3-gate-out i{display:block; font-style:normal; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--flow-deep); font-weight:600; margin-bottom:8px}
.d3-gate-out b{display:block; font-family:var(--sans); font-size:clamp(24px,2.4vw,32px); font-weight:700; color:var(--ink); margin-bottom:10px}
.d3-gate-out span{display:block; font-size:16px; color:var(--body)}
.d3-gate-list{display:grid; grid-template-columns:1fr; gap:6px; margin-top:16px}
.d3-gate-list li{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:12px 18px; border-radius:var(--r); border:1px solid rgba(31,40,65,.15); background:rgba(255,255,255,.55); cursor:pointer; transition:background .3s var(--ease), border-color .3s var(--ease); min-height:44px}
.d3-gate-list li i{width:12px; height:12px; border-radius:50%; background:var(--c); display:block}
.d3-gate-list li b{font-size:14px; color:var(--ink)}
.d3-gate-list li span{font-size:12px; color:var(--mute)}
.d3-gate-list li.on,.d3-gate-list li:hover{background:#fff; border-color:var(--ink)}
.d3-who{margin-top:calc(var(--sec) * .5); padding-top:calc(var(--sec) * .4); border-top:1px solid rgba(31,40,65,.18)}
.d3-two{display:grid; grid-template-columns:1.05fr .95fr; gap:calc(var(--gap) * 2.5); align-items:center}
.d3-two.rev{grid-template-columns:.95fr 1.05fr}
.d3-two .btn{margin-top:30px}
.d3-head{max-width:760px; margin-bottom:44px}
.d3-about-copy{margin-top:22px}
.d3-about-copy p{font-size:16.5px}
.d3-about .cred{margin-top:40px; grid-template-columns:1fr 1fr}
@media (max-width:1080px){
  .d3-hero-band,.d3-mod-in,.d3-journey-in,.d3-gate-body,.d3-two,.d3-two.rev{grid-template-columns:1fr; gap:36px}
  .d3-journey-pin{position:static}
  .d3-journey-big{font-size:96px}
  .d3-journey-pin h2{display:none}
  .d3-journey-flow{padding:0}
  .d3-stage{opacity:1}
  .d3-spine{max-width:240px}
  .d3-two.rev figure{order:-1}
  .d3-about .cred{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .d3-ticket{flex-basis:260px}
  .d3-about .cred{grid-template-columns:1fr}
  .d3-who ul{grid-template-columns:1fr}
  .d3-journey-list{display:none}
}
.d3-spine{color:var(--flow-deep)}
.d3-flow-pulse{stroke-dasharray:6 94; stroke-dashoffset:100; animation:flowPulse 5.5s linear infinite; opacity:.95; filter:drop-shadow(0 0 6px #fff)}
@media (prefers-reduced-motion:reduce){
  .d3-flow-pulse{animation:none; opacity:0}
}
.d3-spine-svg .v{transition:opacity .4s var(--ease), transform .4s var(--ease); transform-origin:center; transform-box:fill-box}
.d3-gate-beam{position:absolute; left:50%; top:var(--gate-y, 6%); width:calc(100% + 60px); height:2px; background:linear-gradient(90deg, transparent, rgba(31,40,65,.35)); transform:translateY(-1px); transition:top .5s var(--ease); pointer-events:none}
.d3-gate::before{width:28px; height:28px}
.d3-gate.on::before{animation:gateRing 1.6s ease-out infinite}
.d3-gate-out{position:relative; border-left:8px solid var(--c, var(--flow)); transition:border-color .4s var(--ease); padding-left:30px}
.d3-gate-out.flip{animation:flipIn .5s var(--ease)}
.d3-gate-n{position:absolute; right:22px; top:16px; font-family:var(--serif); font-style:italic; font-size:clamp(40px,4vw,64px); line-height:1; color:var(--c, var(--flow)); opacity:.7}
.d3-gate-region{display:block; margin-top:10px; font-size:14px; color:var(--mute)}
.d3-gate-list li{cursor:pointer}
.d3-gate-list li:focus-visible{outline:2px solid var(--navy); outline-offset:2px}
.d3-gate-body:focus-visible{outline:none}
.d3-ev-head{display:grid; grid-template-columns:1.2fr .8fr; gap:var(--gap); align-items:end; max-width:none}
.d3-venues{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}
.d3-venues li{padding:8px 14px; border-radius:var(--r); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink)}
.d3-railwrap{outline:none}
.d3-rail{display:flex; gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory; padding:12px max(var(--gut), calc((100vw - var(--max)) / 2)) 26px; scroll-padding-inline:max(var(--gut), calc((100vw - var(--max)) / 2)); -webkit-overflow-scrolling:touch; scrollbar-width:none; cursor:grab}
.d3-rail::-webkit-scrollbar{display:none}
.d3-rail.dragging{cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto}
.d3-rail.dragging *{pointer-events:none}
.d3-ticket{flex:0 0 420px; scroll-snap-align:start; display:grid; grid-template-columns:1fr 128px; border-radius:var(--r); min-height:250px; position:relative; transition:transform .4s var(--ease); box-shadow:0 18px 40px -26px rgba(31,40,65,.5)}
.d3-ticket:hover{transform:translateY(-6px) rotate(-.6deg)}
.d3-ticket-main{padding:24px 26px 26px; display:flex; flex-direction:column; gap:6px}
.d3-ticket-k{display:block; margin-bottom:4px}
.d3-ticket-lock{width:auto; height:26px}
.d3-ticket-d{font-family:var(--sans); font-weight:700; font-size:60px; line-height:1; letter-spacing:-.03em; display:flex; align-items:baseline; gap:8px; margin:4px 0 6px}
.d3-ticket-d small{font-size:14px; letter-spacing:.14em; text-transform:uppercase; font-weight:600}
.d3-ticket b{font-size:16px; line-height:1.3}
.d3-ticket-v{font-size:14px; line-height:1.5; opacity:.85; margin-top:auto}
.d3-ticket-stub{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border-left:2px dashed rgba(31,40,65,.35); background:rgba(255,255,255,.35); color:var(--ink); border-radius:0 var(--r) var(--r) 0; transition:background .3s var(--ease)}
.d3-ticket-stub::before,.d3-ticket-stub::after{content:""; position:absolute; left:-12px; width:22px; height:22px; border-radius:50%; background:var(--mist)}
.d3-ticket-stub::before{top:-12px}
.d3-ticket-stub::after{bottom:-12px}
.d3-ticket-stub:hover{background:var(--ink); color:#fff}
.d3-stub-price{font-family:var(--sans); font-weight:700; font-size:26px; letter-spacing:-.02em}
.d3-stub-word{font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; border:1.5px solid currentColor; padding:5px 10px; border-radius:var(--r-sm)}
.d3-stub-admit{font-size:10px; letter-spacing:.2em; text-transform:uppercase; opacity:.7; writing-mode:vertical-rl; position:absolute; right:8px; top:12px}
.d3-rail-nav{display:flex; align-items:center; gap:16px; margin-top:6px}
.d3-rail-nav button{width:48px; height:48px; border-radius:50%; border:1px solid rgba(31,40,65,.18); background:#fff; color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease)}
.d3-rail-nav button:hover{background:var(--ink); color:#fff; transform:scale(1.06)}
.d3-rail-nav button:disabled{opacity:.35; cursor:default; transform:none}
.d3-rail-bar{flex:1; height:4px; border-radius:2px; background:rgba(31,40,65,.12); overflow:hidden}
.d3-rail-bar i{display:block; height:100%; background:linear-gradient(90deg, var(--breathe), var(--pink), var(--move), var(--flow)); transform-origin:left; transform:scaleX(.06); transition:transform .3s var(--ease)}
.d3-rail-count{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); min-width:70px; text-align:center}
.d3-rail-hint{font-size:12.5px; color:var(--mute)}
.d3-journey{transition:background-color 1s var(--ease); background-color:var(--breathe)}
.d3-journey[data-stage="1"]{background-color:var(--move)}
.d3-journey[data-stage="2"]{background-color:var(--flow)}
.d3-journey[data-stage="3"]{background-color:var(--pink)}
.d3-journey-big{font-size:clamp(120px,15vw,240px); color:rgba(255,255,255,.85)}
.d3-journey-big.tick,.d3-journey-pin h2.tick{animation:tickIn .6s var(--ease)}
.d3-journey-list li i{display:block; width:22px; height:2px; background:currentColor; transition:width .3s var(--ease)}
.d3-journey-list li::before{display:none}
.d3-journey-list li.on i{width:40px}
.d3-journey-hint{margin-top:26px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; opacity:.6}
.d3-stage{opacity:.32; transform:translateX(0); transition:opacity .5s var(--ease), transform .5s var(--ease), border-color .5s var(--ease)}
.d3-stage.on{opacity:1; transform:translateX(8px); border-color:var(--ink)}
.d3-stage.past{opacity:.5}
.d3-who{margin-top:calc(var(--sec) * .5); padding-top:calc(var(--sec) * .4); border-top:1px solid rgba(31,40,65,.18)}
@media (max-width:1080px){
  .d3-ev-head{grid-template-columns:1fr}
  .d3-venues{justify-content:flex-start}
  .d3-ticket{flex-basis:340px; grid-template-columns:1fr 104px}
  .d3-ticket-d{font-size:48px}
  .d3-rail-hint{display:none}
  .d3-journey-big{font-size:110px}
}
@media (max-width:700px){
  .d3-ticket{flex-basis:300px; grid-template-columns:1fr 92px}
}
.d3-mix-in{display:grid; grid-template-columns:.9fr 1.1fr; gap:calc(var(--gap) * 2.5); align-items:center}
.d3-mix-out{margin:26px 0 22px; padding:20px 22px; border-radius:var(--r); background:#fff; border-left:6px solid var(--pink); transition:border-color .4s var(--ease)}
.d3-mix-out[data-state="breathe+move"]{border-color:var(--breathe)}
.d3-mix-out[data-state="breathe+flow"]{border-color:var(--flow)}
.d3-mix-out[data-state="move+flow"]{border-color:var(--move)}
.d3-mix-out[data-state="all"]{border-image:linear-gradient(180deg, var(--breathe), var(--move), var(--flow)) 1}
.d3-mix-tag{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--pink-deep); margin-bottom:8px}
.d3-mix-desc{margin:0; font-size:16px; line-height:1.6; color:var(--ink)}
.d3-mix-btns{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.d3-mix-stage{position:relative; aspect-ratio:1; max-width:560px; width:100%; margin:0 auto; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.6), rgba(255,255,255,0) 70%); touch-action:none; user-select:none; -webkit-user-select:none}
.d3-mix-circle{position:absolute; left:calc(var(--x) * 1%); top:calc(var(--y) * 1%); width:46%; aspect-ratio:1; border-radius:50%; transform:translate(-50%, -50%); display:flex; align-items:center; justify-content:center; cursor:grab; mix-blend-mode:multiply; opacity:.86; transition:box-shadow .3s var(--ease); touch-action:none}
.d3-mix-circle.snap{transition:left .9s cubic-bezier(.2,.8,.2,1), top .9s cubic-bezier(.2,.8,.2,1), box-shadow .3s var(--ease)}
.d3-mix-circle.drag{cursor:grabbing; z-index:2; box-shadow:0 30px 50px -30px rgba(31,40,65,.6)}
.d3-mix-circle span{font-family:var(--sans); font-weight:800; font-size:clamp(20px,2.4vw,30px); letter-spacing:-.02em; color:var(--ink); pointer-events:none}
.d3-mix-circle.c-breathe{background:var(--breathe)}
.d3-mix-circle.c-move{background:var(--move)}
.d3-mix-circle.c-flow{background:var(--flow)}
.d3-mix-circle:focus-visible{outline:3px solid var(--ink); outline-offset:4px}
.d3-mix-stage.is-live::after{content:"Drag"; position:absolute; right:6%; top:4%; font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); opacity:.8}
.d3-mix-stage.touched::after{display:none}
html:not(.js) .d3-mix-btns{display:none}
@media (max-width:1080px){
  .d3-mix-in{grid-template-columns:1fr; gap:36px}
  .d3-mix-stage{max-width:440px}
}
.d3-ev-side{display:flex; flex-direction:column; align-items:flex-end; gap:16px}
.d3-venues li{display:flex; align-items:center; gap:8px}
.d3-venues li small{font-size:11px; letter-spacing:.04em; text-transform:none; font-weight:600; background:rgba(255,255,255,.7); padding:2px 8px; border-radius:var(--r-pill); display:none}
.d3-venues li small:not(:empty){display:inline-block}
.d3-from{text-align:right}
.d3-from label{margin-bottom:6px}
.d3-from .from-out{text-align:right}
@media (max-width:1080px){
  .d3-ev-side{align-items:flex-start}
  .d3-from,.d3-from .from-out{text-align:left}
}
@keyframes flowPulse{to{stroke-dashoffset:0}}
@keyframes gateRing{0%{box-shadow:0 0 0 0 rgba(31,40,65,.25)} 100%{box-shadow:0 0 0 18px rgba(31,40,65,0)}}
@keyframes flipIn{from{opacity:.4; transform:translateY(8px)} to{opacity:1; transform:none}}
@keyframes tickIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

/* ---------- borrowed from demo4.css ---------- */
.d4-waves-stage{position:absolute; left:0; right:0; bottom:4%; height:46%; z-index:2; pointer-events:none; overflow:hidden}
.d4-hero-waves{position:absolute; left:-12%; width:124%; max-width:none; top:auto; bottom:0; transform:none}
.d4-hero-waves.w1{opacity:.55; animation:waveDrift 18s ease-in-out infinite alternate}
.d4-hero-waves.w2{opacity:.28; bottom:14%; animation:waveDrift2 26s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){
  .d4-hero-waves{animation:none}
}
.d4-orbit-tag{position:absolute; right:4%; bottom:12%; background:var(--pink); color:var(--ink); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:9px 14px; border-radius:var(--r-pill); transform:rotate(-6deg); box-shadow:0 10px 24px -12px rgba(31,40,65,.45)}
.d4-orbit-tag em{font-style:normal; font-weight:500; letter-spacing:.06em; text-transform:none}
.d4-meet-text{font-family:var(--serif); font-size:clamp(22px,2.2vw,32px); line-height:1.45; color:var(--ink); text-wrap:pretty; margin:0}
mark.hl{background-color:transparent}
.hl{background-image:linear-gradient(transparent 16%, color-mix(in srgb, var(--hl) 62%, transparent) 16%, color-mix(in srgb, var(--hl) 62%, transparent) 94%, transparent 94%); background-repeat:no-repeat; background-size:0% 100%; color:inherit; padding:0 .08em; transition:background-size 1.1s var(--ease); box-decoration-break:clone; -webkit-box-decoration-break:clone}
.in .hl,.no-reveal .hl,html:not(.js) .hl{background-size:100% 100%}
.in .hl-pink{transition-delay:.35s}
.in .hl-flow{transition-delay:.6s}
.in .hl-breathe{transition-delay:.9s}
.hl-move{--hl:var(--move)}
.hl-pink{--hl:var(--pink)}
.hl-flow{--hl:var(--flow)}
.hl-breathe{--hl:var(--breathe)}
.d4-intro-sig{font-family:var(--serif); font-style:italic; font-size:22px; color:var(--breathe-deep); margin:22px 0 0}
.d4-meet-chips{display:grid; grid-template-columns:1fr; gap:10px; margin-top:30px; max-width:560px}
.d4-meet-chips a{display:grid; grid-template-columns:118px 1fr auto; align-items:center; gap:16px; min-height:60px; padding:0 20px 0 14px; border-radius:var(--r-pill); color:var(--ink); font-size:15px; transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.d4-meet-chips a:hover{transform:translateX(6px); box-shadow:0 14px 28px -18px rgba(31,40,65,.5)}
.d4-meet-chips a svg{transition:transform .3s var(--ease)}
.d4-meet-chips a:hover svg{transform:translateX(4px)}
.d4-chip-lock{width:auto; height:32px; justify-self:start}
@media (max-width:700px){
  .d4-meet-chips a{grid-template-columns:96px 1fr auto; font-size:14px}
  .d4-chip-lock{height:26px}
}
.d4-cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap); align-items:stretch; perspective:1600px}
.d4-card{position:relative; min-height:520px}
.d4-card-inner{position:relative; width:100%; height:100%; min-height:520px; transform-style:preserve-3d; transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.d4-card.is-flipped .d4-card-inner{transform:rotateY(180deg)}
.d4-face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:var(--r); padding:34px 30px 30px; display:flex; flex-direction:column; overflow:hidden}
.d4-front{background:#fff; border:1px solid var(--line); padding:0; cursor:pointer}
.d4-card-breathe{--c:var(--breathe)}
.d4-card-move{--c:var(--move)}
.d4-card-flow{--c:var(--flow)}
.d4-back{transform:rotateY(180deg)}
.d4-card-ph{position:relative; margin:0; height:230px; flex:none; overflow:hidden; background:var(--c)}
.d4-card-ph img:not(.d4-lock){width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.4s var(--ease)}
.d4-card-ph::before{content:""; position:absolute; inset:0; background:var(--c); mix-blend-mode:multiply; opacity:.35; z-index:1}
.d4-card-ph::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(31,40,65,.62) 0%, rgba(31,40,65,.18) 45%, transparent 75%); z-index:1}
.d4-card:hover .d4-card-ph img:not(.d4-lock){transform:scale(1.06)}
.d4-card-n{position:absolute; left:22px; top:20px; z-index:2; font-family:var(--serif); font-style:italic; color:#fff; font-size:15px; letter-spacing:.14em; margin:0; background:rgba(31,40,65,.45); backdrop-filter:blur(6px); padding:6px 12px; border-radius:var(--r-pill)}
.d4-lock{width:auto; height:40px; margin:0 0 18px}
.d4-lock-ph{position:absolute; left:26px; bottom:22px; z-index:2; margin:0; height:42px; filter:drop-shadow(0 6px 16px rgba(31,40,65,.5))}
.d4-front-body{padding:28px 30px 30px; display:flex; flex-direction:column; flex:1}
.d4-turn{position:absolute; right:18px; top:190px; width:46px; height:46px; border-radius:50%; background:#fff; color:var(--ink); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px -10px rgba(31,40,65,.5); z-index:2; transition:transform .5s var(--ease), background .3s var(--ease), color .3s var(--ease)}
.d4-turn svg{width:16px; height:16px}
.d4-card:hover .d4-turn{transform:rotate(180deg); background:var(--ink); color:#fff}
.d4-card h3{font-size:clamp(22px,1.9vw,26px); line-height:1.12; white-space:nowrap}
.d4-card-line{font-family:var(--serif); font-size:18px; color:var(--breathe-deep); margin:6px 0 16px}
.d4-card-short{font-size:15.5px; margin:0 0 22px}
.d4-flip-btn{margin-top:auto; display:inline-flex; align-items:center; gap:10px; align-self:flex-start; min-height:46px; padding:0 18px; border-radius:var(--r-pill); border:1px solid var(--line); background:#fff; color:var(--ink); font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease)}
.d4-flip-btn:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.d4-flip-btn.back{background:rgba(255,255,255,.7); border-color:transparent; margin-top:auto}
.d4-facts{margin:0 0 22px; border-top:1px solid rgba(31,40,65,.2)}
.d4-facts li{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid rgba(31,40,65,.2); font-size:14px; line-height:1.4; color:var(--ink)}
.d4-facts li span{flex:1}
.d4-card-cta{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.d4-card-cta .link{color:var(--ink)}
.d4-card.is-flipped .d4-front{pointer-events:none}
.d4-card:not(.is-flipped) .d4-back{pointer-events:none}
.d4-face{transition:visibility 0s linear .42s}
.d4-card:not(.is-flipped) .d4-back{visibility:hidden}
.d4-card.is-flipped .d4-front{visibility:hidden}
html:not(.js) .d4-card-inner{transform:none}
html:not(.js) .d4-face{position:relative; transform:none; backface-visibility:visible; visibility:visible !important}
html:not(.js) .d4-flip-btn{display:none}
.reduced .d4-card-inner{transition:none}
.d4-session{position:relative; overflow:hidden; background:var(--night); padding:var(--sec) 0}
.d4-session-photos{position:absolute; inset:0}
.d4-session-photo{position:absolute; inset:0; opacity:0; transform:scale(1.06); transition:opacity 1.2s var(--ease), transform 6s var(--ease)}
.d4-session-photo.on{opacity:1; transform:scale(1)}
.d4-session-photo img{width:100%; height:100%; object-fit:cover}
.d4-session-scrim{position:absolute; inset:0; background:linear-gradient(90deg, rgba(31,40,65,.9) 0%, rgba(31,40,65,.72) 48%, rgba(31,40,65,.3) 100%)}
.d4-session-in{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:calc(var(--gap) * 2); align-items:start}
.d4-session-head{grid-column:1 / -1}
.d4-session-tabs{display:flex; gap:8px; margin-bottom:18px}
.d4-session-tabs button{flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px 16px; border-radius:var(--r); border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff; cursor:pointer; text-align:left; transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease)}
.d4-session-tabs button i{font-style:normal; font-size:11px; letter-spacing:.18em; text-transform:uppercase; opacity:.7}
.d4-session-tabs button b{font-family:var(--serif); font-weight:400; font-size:22px}
.d4-session-tabs button[aria-selected="true"]{background:#fff; color:var(--ink); border-color:#fff; transform:translateY(-3px)}
.d4-session-tabs button:nth-child(1)[aria-selected="true"]{background:var(--breathe)}
.d4-session-tabs button:nth-child(2)[aria-selected="true"]{background:var(--move)}
.d4-session-tabs button:nth-child(3)[aria-selected="true"]{background:var(--flow)}
.d4-session-scrub{display:block}
.d4-session-scrub input{width:100%; height:44px; margin:0; -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer}
.d4-session-scrub input::-webkit-slider-runnable-track{height:4px; border-radius:2px; background:linear-gradient(90deg, var(--breathe), var(--move), var(--flow))}
.d4-session-scrub input::-webkit-slider-thumb{-webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:#fff; border:3px solid var(--pink); margin-top:-11px; box-shadow:0 6px 16px -6px rgba(0,0,0,.6)}
.d4-session-scrub input::-moz-range-track{height:4px; border-radius:2px; background:linear-gradient(90deg, var(--breathe), var(--move), var(--flow))}
.d4-session-scrub input::-moz-range-thumb{width:26px; height:26px; border-radius:50%; background:#fff; border:3px solid var(--pink)}
.d4-session-hint{margin-top:8px; color:rgba(255,255,255,.6)}
.d4-session-panels{position:relative; min-height:360px}
.d4-session-panel{position:absolute; inset:0; opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); pointer-events:none}
.d4-session-panel.on{opacity:1; transform:none; pointer-events:auto; position:relative}
.d4-session-time{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--lblue); margin:0 0 12px}
.d4-session-panel h3{font-size:clamp(24px,2.4vw,34px); margin-bottom:16px; color:#fff}
.d4-session-panel p{font-size:16.5px}
.d4-session-quote{margin-top:22px; padding-top:22px; border-top:1px solid rgba(255,255,255,.18)}
.d4-session-quote .quote .q-body{font-size:clamp(18px,1.6vw,22px)}
.d4-session-quote .quote .q-meta{margin-top:14px}
html:not(.js) .d4-session-panel{position:relative; opacity:1; transform:none; pointer-events:auto; margin-bottom:30px}
html:not(.js) .d4-session-ctrl{display:none}
.d4-arch .ph{aspect-ratio:4/5; border-radius:200px 200px var(--r) var(--r)}
@media (max-width:1080px){
  .d4-pacer-in,.d4-two,.d4-two.rev,.d4-meet-in,.d4-recovery-in,.d4-session-in{grid-template-columns:1fr; gap:40px}
  .d4-session-scrim{background:rgba(31,40,65,.8)}
  .d4-cards{grid-template-columns:1fr; max-width:640px; margin:0 auto}
  .d4-card h3{white-space:normal}
}
.sec-waves .d4-hero-waves{bottom:auto; top:50%; transform:translateY(-50%)}
.d4-org{margin-top:22px}
.d4-org-chips{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin:8px 0 18px}
.d4-org-chips .chip{justify-content:center; white-space:nowrap; padding:0 10px; min-height:44px}
@media (max-width:1080px){
  .d4-org-chips{grid-template-columns:repeat(2, minmax(0,1fr))}
}
.d4-org .chip{background:rgba(255,255,255,.7); border-color:rgba(31,40,65,.14)}
.d4-org .chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.d4-org-out{font-size:16px; line-height:1.65; margin:0 0 24px; min-height:6em; animation:pickIn .5s var(--ease)}
.d4-water{position:absolute; inset:0; width:100%; height:100%; display:none}
.d4-hero.water-live .d4-water{display:block}
.d4-hero.water-live .d4-hero-waves{display:none}
.d4-hero.water-live .d4-waves-stage{pointer-events:none}
.d4-water-hint{margin:26px 0 0; font-family:var(--serif); font-style:italic; font-size:15px; color:rgba(255,255,255,.62); text-align:center; letter-spacing:.02em; display:none}
.d4-hero.water-live .d4-water-hint{display:block}
.d4-hero.water-touched .d4-water-hint{opacity:0; transition:opacity 1s var(--ease)}
@media (hover:none){
  .d4-water-hint{display:none !important}
}
.d4-halo{position:fixed; left:0; top:0; width:34px; height:34px; border-radius:50%; border:1.5px solid rgba(73,87,114,.55); pointer-events:none; z-index:59; transform:translate(-100px,-100px); transition:width .3s var(--ease), height .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); will-change:transform; mix-blend-mode:multiply}
.d4-halo.big{width:64px; height:64px; border-color:rgba(73,87,114,.25); background:rgba(133,156,206,.16)}
.on-dark ~ .d4-halo,.d4-halo.light{border-color:rgba(255,255,255,.7); mix-blend-mode:normal}
.d4-halo.light.big{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.35)}
@media (hover:none),(pointer:coarse){
  .d4-halo{display:none}
}
@keyframes waveDrift{from{transform:translate3d(-3%,0,0)} to{transform:translate3d(3%,-3%,0)}}
@keyframes waveDrift2{from{transform:translate3d(4%,2%,0) scaleX(1.06)} to{transform:translate3d(-4%,-2%,0) scaleX(1)}}
@keyframes pickIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* ---------- the final page's own rules ---------- */
/* ---------- The Final Cut: Liane's picks, on demo 1's bones ---------- */
.fn .btn{transition:transform .35s cubic-bezier(.2,.8,.2,1), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease)}

/* meet: a small round portrait beside the heading, the text full width, the three lockups in a row */
.fn-meet-head{display:grid; grid-template-columns:auto 1fr; gap:24px 44px; align-items:center; max-width:1000px}
.fn-portrait{position:relative; width:176px; height:176px; flex:none}
.fn-portrait-img{width:100%; height:100%; border-radius:50%; overflow:hidden; background:var(--lblue); box-shadow:0 20px 44px -24px rgba(31,40,65,.5)}
.fn-portrait-img img{width:100%; height:100%; object-fit:cover; object-position:50% 18%; display:block}
.fn-portrait .d4-orbit-tag{right:-18px; bottom:4px}
.fn-meet-head h2{margin:0}
.fn-meet-text{max-width:1000px; margin-top:34px}
.fn-meet-foot{display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-top:22px}
.fn-meet-foot .d4-intro-sig{margin:0}
.fn-meet-foot .d2-breaths{margin:0}
.fn-meet-chips{grid-template-columns:repeat(3, minmax(0,1fr)); max-width:none; margin-top:34px}
.fn-meet-chips a{grid-template-columns:auto 1fr auto; padding:0 18px 0 14px; min-height:64px}
.fn-meet-chips a span{font-size:14.5px}
@media (max-width:1080px){.fn-meet-chips{grid-template-columns:1fr; max-width:560px}}
@media (max-width:700px){.fn-meet-head{grid-template-columns:1fr} .fn-portrait{width:140px; height:140px} .fn-portrait .d4-orbit-tag{right:auto; left:110px; bottom:10px}}

/* cards: the taster, with a way down to the full section */
.fn-cards-head{max-width:760px; margin-bottom:40px}
.fn-card-acts{margin-top:auto; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.fn-card-acts .d4-flip-btn{margin-top:0}
.fn-more{color:var(--ink); font-size:13px}
.fn-cards .d4-cards{perspective:1600px}

/* stage by stage: demo 3's pinned list over demo 1's studio, no big numeral */
.fn-journey{position:relative; color:#fff}
.fn-journey-bg{position:sticky; top:0; height:100vh; height:100svh; margin-bottom:-100vh; margin-bottom:-100svh; z-index:0; overflow:hidden; pointer-events:none}
.fn-journey-bg img{width:100%; height:100%; object-fit:cover; object-position:center; display:block; filter:saturate(.9) brightness(.9)}
.fn-journey-scrim{position:absolute; inset:0; background:linear-gradient(90deg, rgba(31,40,65,.9) 0%, rgba(31,40,65,.66) 48%, rgba(31,40,65,.3) 100%)}
.fn-journey .d1-sparkle{display:block}
.fn-journey-in{position:relative; z-index:1; padding:calc(var(--sec) * 1.1) var(--gut)}
.fn-journey .d3-journey-pin{top:calc(var(--hdr) + 40px)}
.fn-journey .d3-journey-pin h2{color:#fff; font-size:clamp(34px,4.2vw,60px)}
.fn-journey .eyebrow{color:var(--lblue)}
.fn-journey .d3-journey-list{color:rgba(255,255,255,.72)}
.fn-journey .d3-journey-list li.on{color:#fff}
.fn-journey .d3-journey-hint{color:rgba(255,255,255,.6)}
.fn-journey .d3-stage{border-color:rgba(255,255,255,.3); color:#fff}
.fn-journey .d3-stage h3,.fn-journey .d3-stage p{color:#fff}
.fn-journey .d3-stage p{color:rgba(255,255,255,.84)}
.fn-journey .d3-stage.on{border-color:var(--lblue)}
.fn-journey .d3-stage-n{color:var(--lblue)}
html:not(.js) .fn-journey-bg,.reduced .fn-journey-bg{position:absolute; inset:0; height:auto; margin:0}

/* the full sections: demo 2's rows, then the spine and the pills under Flow */
.fn-full-head{text-align:center; max-width:760px; margin:0 auto}
.fn-full-head .eyebrow{justify-content:center} .fn-full-head .eyebrow::before{display:none}
.fn-full-head .lead{margin:16px auto 0}
.fn-gate-sec{padding-top:0}
.fn-gate-sec .d3-gate-wrap{margin-top:0}
.fn-gate-sec .d3-who{margin-top:calc(var(--sec) * .6)}
.fn .d2-row-sec{padding:var(--sec) 0}
.fn .d2-row-copy h2 em{display:block}

/* FAQ: one list, filtered by pills */
.faq-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px}
.faq-tabs .chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.faq-item[hidden]{display:none}
.faq-empty{padding:18px 0; color:var(--mute)}

/* events: the list runs full width */
.fn-ev-list{margin-top:18px}

/* projects: demo 1's rows with demo 4's chooser inside */
.fn .d4-org{margin-top:18px}
.fn .d4-org .chip{background:rgba(255,255,255,.7); border-color:rgba(31,40,65,.14)}
.fn-other .d4-org-chips{grid-template-columns:repeat(4, minmax(0,1fr))}
.fn-recovery .d4-org-chips{grid-template-columns:repeat(3, minmax(0,1fr))}
.fn-other .d4-org .chip,.fn-recovery .d4-org .chip{background:#fff}
.fn-day{margin-top:14px; font-size:14px; color:var(--ink); font-weight:600}
@media (max-width:1080px){.fn-other .d4-org-chips,.fn-recovery .d4-org-chips{grid-template-columns:repeat(2, minmax(0,1fr))}}

/* contact: demo 1's panel, demo 2's four questions, demo 4's water */
.fn-contact{position:relative; overflow:hidden}
.fn-contact .wrap{position:relative; z-index:2}
.fn-contact .d4-waves-stage{bottom:0; height:60%; z-index:1; opacity:.9}
.water-live .d4-water{display:block}
.water-live .d4-hero-waves{display:none}
.fn-contact .d2-form-card{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--r); padding:30px}
.fn-contact .steps-label{color:rgba(255,255,255,.8)}
.fn-contact .steps-bar{background:rgba(255,255,255,.16)}
.fn-contact .form label{color:rgba(255,255,255,.86)}
.fn-contact .form select{background-color:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); color:#fff}
.fn-contact .form select option{color:var(--ink)}
@media (max-width:700px){.fn-contact .d2-form-card{padding:20px}}


/* ---------- the site's own rules ---------- */
/* ---------- the site: chrome ---------- */
.inner-hero{min-height:80vh; min-height:80svh; padding-bottom:80px}
.inner-hero .lead{max-width:60ch}
.post-hero{min-height:74vh; min-height:74svh}
.hdr-nav .has-sub{position:relative}
.hdr-nav .sub-btn{font:inherit; font-size:13.5px; font-weight:500; letter-spacing:.04em; color:#fff; background:none; border:0; padding:6px 0; cursor:pointer; display:inline-flex; align-items:center; gap:5px; position:relative}
.hdr-nav .sub-btn::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease)}
.hdr-nav .has-sub:hover .sub-btn::after,.hdr-nav .has-sub:focus-within .sub-btn::after{transform:scaleX(1)}
.hdr-nav .sub-btn svg{transition:transform .3s var(--ease)}
.hdr-nav .has-sub:hover .sub-btn svg,.hdr-nav .has-sub.open .sub-btn svg{transform:rotate(180deg)}
.hdr.solid .hdr-nav .sub-btn{color:var(--navy)}
.hdr-nav .sub{position:absolute; left:-14px; top:calc(100% + 10px); min-width:236px; background:#fff; border-radius:var(--r); box-shadow:0 24px 50px -24px rgba(31,40,65,.45), 0 0 0 1px var(--line); padding:10px; display:grid; gap:2px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s; z-index:30}
.hdr-nav .sub::before{content:""; position:absolute; left:0; right:0; top:-12px; height:12px}
.hdr-nav .has-sub:hover .sub,.hdr-nav .has-sub:focus-within .sub,.hdr-nav .has-sub.open .sub{opacity:1; visibility:visible; transform:none; transition-delay:0s}
.hdr-nav .sub a{color:var(--ink) !important; padding:10px 14px; border-radius:var(--r-sm); font-size:14px; letter-spacing:0; transition:background .2s var(--ease), padding-left .2s var(--ease)}
.hdr-nav .sub a::after{display:none}
.hdr-nav .sub a:hover{background:var(--lblue); padding-left:18px}
.drawer nav .dr-group{display:flex; flex-direction:column; border-bottom:1px solid rgba(255,255,255,.1); padding:10px 0 12px}
.drawer nav .dr-group-k{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.55); margin:8px 0 6px}
.drawer nav .dr-group a{font-family:var(--sans); font-size:18px; padding:8px 0 8px 14px; border:0; color:var(--lblue)}
.drawer nav a{font-size:clamp(26px,7vw,36px)}
@media (max-width:1280px){.hdr-nav{gap:clamp(12px,1.6vw,22px)} .hdr-nav a,.hdr-nav .sub-btn{font-size:13px}}
@media (max-width:1180px){.hdr-nav{display:none}}
.ftr-grid-5{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr}
.ftr-h-pink::before{background:var(--pink)}
.ftr-h-pink ~ ul li a::before{background:var(--pink)}
.ftr-areas{margin:0 0 26px; padding:16px 0; border-top:1px solid rgba(255,255,255,.12); font-size:13.5px; color:rgba(255,255,255,.66); display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center}
.ftr-areas span{color:rgba(255,255,255,.45); margin-right:4px}
.ftr-areas a{color:rgba(255,255,255,.8)} .ftr-areas a:hover{color:#fff}
@media (max-width:1080px){.ftr-grid-5{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.ftr-grid-5{grid-template-columns:1fr}}
.btn-row{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:26px}
.btn-row.center{justify-content:center}
.d1-two figure{margin:0}

/* ---------- shared inner blocks ---------- */
.site-cta-in{display:grid; grid-template-columns:1.2fr .8fr; gap:calc(var(--gap) * 2); align-items:center}
.site-cta h2 em{display:block; color:var(--lblue)}
.site-cta .lead{margin-top:14px; max-width:52ch}
.site-cta-btns{display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end}
.site-related .eyebrow{margin-bottom:22px}
.rel-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px}
.rel-grid-3{margin-top:10px}
.rel-card{position:relative; display:flex; flex-direction:column; gap:8px; min-height:190px; padding:26px 26px 28px; border-radius:var(--r); color:var(--ink); text-decoration:none; transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
.rel-card:hover{transform:translateY(-5px); box-shadow:0 26px 40px -26px rgba(31,40,65,.55)}
.rel-k{font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; opacity:.8}
.rel-t{font-family:var(--serif); font-size:clamp(22px,2vw,28px); line-height:1.15; margin-top:auto; padding-right:56px}
.rel-go{position:absolute; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; transition:transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease)}
.rel-card:hover .rel-go{background:var(--ink); color:#fff; transform:translateX(4px)}
.price-in{display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--gap) * 2); align-items:center}
.price-card{border-radius:var(--r); padding:30px}
.price-card .d4-lock{margin-bottom:14px}
.price-k{font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; margin:0 0 6px}
.price-card .d4-card-cta{margin:18px 0 12px}
.course{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; list-style:none; margin:34px 0 0; padding:0; counter-reset:none}
.course-step{padding:28px 26px 30px; border-radius:var(--r); position:relative}
.course-step::before{display:none}
.course-n{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--ink); color:#fff; font-family:var(--serif); font-size:20px; margin-bottom:16px}
.course-step h3{font-size:22px; margin-bottom:8px}
.course-step p{font-size:15px}
.venues{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px}
.venues li::before{display:none}
.venue-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-radius:var(--r-sm); background:#fff; border:1px solid rgba(31,40,65,.14); font-size:14.5px; color:var(--ink)}
.venue-row b{font-weight:600} .venue-row span{color:var(--mute); font-size:13px} .venue-row small{font-size:12px; font-weight:600; background:var(--flow-pale); color:var(--flow-deep); padding:3px 9px; border-radius:var(--r-pill); display:none}
.venue-row small:not(:empty){display:inline-block}
.map-frame{aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; background:var(--lblue); box-shadow:0 26px 50px -30px rgba(31,40,65,.5)}
.map-frame iframe{width:100%; height:100%; border:0; display:block}
.area-help{font-size:14.5px; line-height:1.9}
.area-help a{color:var(--navy); text-decoration:underline; text-underline-offset:3px}
.nots-in .d1-head{margin-bottom:26px}
.nots{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 24px; max-width:900px}
.nots li{display:flex; align-items:center; gap:14px; padding:14px 18px; background:#fff; border-radius:var(--r-pill); font-size:15.5px; color:var(--ink); border:1px solid rgba(31,40,65,.1)}
.nots li::before{display:none}
.nots li i{width:24px; height:24px; border-radius:50%; background:var(--pink); position:relative; flex:none}
.nots li i::after{content:""; position:absolute; left:7px; top:4px; width:6px; height:11px; border:solid var(--ink); border-width:0 2px 2px 0; transform:rotate(45deg)}
.pol-in{max-width:760px}
.pol{padding:34px 0; border-top:1px solid var(--line)}
.pol h2{font-size:clamp(26px,3vw,38px); margin-bottom:12px}
.nf-sec{min-height:70vh; display:flex; align-items:center}
.ev-foot{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:26px}
.ev-foot .ev-more{margin:0}
.pacer-flower-sec .pacer-side h2{color:var(--ink)}
.pacer-flower-sec .pc-flower .pc-petal{background:var(--breathe)}
.pacer-flower-sec .pc-petal:nth-child(2n){background:var(--move)} .pacer-flower-sec .pc-petal:nth-child(3n){background:var(--flow)}
.sym-sec .pacer{grid-template-columns:1fr} .sym-sec .pacer-stage{min-height:380px}
.sym-sec .pc-petal{background:var(--pink)} .sym-sec .pc-petal:nth-child(2n){background:var(--lblue)} .sym-sec .pc-petal:nth-child(3n){background:#fff}
.sym-sec .d4-org-chips{grid-template-columns:repeat(2, minmax(0,1fr))}
.sym-sec .d4-org .chip{background:rgba(255,255,255,.75)}
@media (max-width:1080px){.site-cta-in,.price-in{grid-template-columns:1fr; gap:34px} .site-cta-btns{justify-content:flex-start} .rel-grid{grid-template-columns:1fr} .course{grid-template-columns:1fr} .nots{grid-template-columns:1fr}}

/* ---------- tremor therapy: press and hold ---------- */
.hold-in{display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--gap) * 2); align-items:center}
.hold-out{margin-top:22px; padding:16px 20px; border-radius:var(--r); background:rgba(255,255,255,.7); font-weight:500; color:var(--ink); min-height:3.4em; text-wrap:balance}
.hold-stage{--t:0; --amp:0; display:flex; flex-direction:column; align-items:center; gap:18px; user-select:none; -webkit-user-select:none}
.hold-body{width:170px; height:auto; display:block}
.hold-figure{fill:rgba(31,40,65,.85); transform-origin:50% 40%; transform:scale(calc(1 - var(--t) * .06)) translateY(calc(var(--t) * 6px)); transition:transform .15s linear, fill .3s var(--ease)}
.hold-stage.holding .hold-figure{fill:var(--pink-deep)}
.hold-stage.releasing .hold-figure{animation:tremor .09s linear infinite; fill:var(--flow-deep)}
.hold-stage.settled .hold-figure{fill:var(--ink); transform:none; transition:transform 1.2s var(--ease), fill 1.2s var(--ease)}
@keyframes tremor{0%{transform:translate(calc(var(--amp) * -1px), 0) rotate(calc(var(--amp) * -.4deg))} 50%{transform:translate(calc(var(--amp) * 1px), calc(var(--amp) * .6px)) rotate(calc(var(--amp) * .4deg))} 100%{transform:translate(calc(var(--amp) * -1px), 0) rotate(calc(var(--amp) * -.4deg))}}
.hold-meter{width:220px; height:8px; border-radius:4px; background:rgba(31,40,65,.14); overflow:hidden}
.hold-meter i{display:block; height:100%; width:calc(var(--t) * 100%); background:linear-gradient(90deg, var(--breathe), var(--pink)); transition:width .12s linear}
.hold-btn{min-width:220px; touch-action:none}
.hold-hint{color:var(--ink); opacity:.7}
@media (max-width:1080px){.hold-in{grid-template-columns:1fr; gap:34px}}
@media (hover:none){.hold-hint{display:none}}

/* ---------- anxiety: the words settle when you breathe ---------- */
.jitter-in{text-align:center; max-width:900px; margin:0 auto}
.jitter-in .eyebrow{justify-content:center} .jitter-in .eyebrow::before{display:none}
.jitter-text{font-family:var(--serif); font-size:clamp(26px,3.6vw,48px); line-height:1.25; color:var(--ink); margin:10px 0 28px; text-wrap:balance}
.jitter-text span{display:inline-block; animation:jit .38s steps(2) infinite; animation-delay:calc(var(--i) * -53ms); will-change:transform}
@keyframes jit{0%{transform:translate(0,0)} 25%{transform:translate(1.5px,-2px)} 50%{transform:translate(-2px,1px)} 75%{transform:translate(2px,2px)} 100%{transform:translate(-1px,-1px)}}
.jitter-in.calm .jitter-text span{animation:none; transform:none; transition:transform .9s var(--ease)}
.jitter-in.calm .jitter-text{letter-spacing:.02em; transition:letter-spacing 4s var(--ease), line-height 4s var(--ease); line-height:1.45}
.jitter-ctrl{display:flex; flex-direction:column; align-items:center; gap:14px}
.jitter-ctrl .small{max-width:52ch; color:var(--ink)}
.jitter-count{font-family:var(--sans); font-weight:300; font-size:64px; color:var(--ink); min-height:70px; margin:14px 0 0}
.reduced .jitter-text span{animation:none}

/* ---------- somatic: the body map ---------- */
.bm-in{display:grid; grid-template-columns:1.1fr .9fr; gap:calc(var(--gap) * 2); align-items:center}
.bm-out{margin-top:22px}
.bm-item{padding:20px 22px; border-radius:var(--r); background:#fff; border-left:6px solid var(--pink); animation:pickIn .5s var(--ease)}
.bm-item b{display:block; font-family:var(--serif); font-weight:400; font-size:24px; margin-bottom:6px}
.bm-item p{margin:0 0 10px; font-size:15.5px}
.bm-which{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; background:var(--lblue); padding:6px 10px; border-radius:var(--r-pill); color:var(--ink)}
.bm-stage{position:relative; width:min(100%, 300px); aspect-ratio:200/420; margin:0 auto}
.bm-body{width:100%; height:100%; display:block}
.bm-body .hold-figure{fill:rgba(255,255,255,.9); stroke:rgba(31,40,65,.25); stroke-width:1}
.bm-spot{position:absolute; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%; background:var(--pink); border:3px solid #fff; box-shadow:0 6px 16px -6px rgba(31,40,65,.5), 0 0 0 0 rgba(204,156,192,.6); cursor:pointer; animation:bmPulse 2.4s ease-out infinite; transition:transform .3s var(--ease), background .3s var(--ease)}
.bm-spot:nth-child(3n){animation-delay:.6s} .bm-spot:nth-child(3n+1){animation-delay:1.2s}
@keyframes bmPulse{0%{box-shadow:0 6px 16px -6px rgba(31,40,65,.5), 0 0 0 0 rgba(204,156,192,.6)} 100%{box-shadow:0 6px 16px -6px rgba(31,40,65,.5), 0 0 0 16px rgba(204,156,192,0)}}
.bm-spot:hover{transform:translate(-50%,-50%) scale(1.15)}
.bm-spot[aria-pressed="true"]{background:var(--ink); transform:translate(-50%,-50%) scale(1.2); animation:none}
.bm-spot:focus-visible{outline:3px solid var(--ink); outline-offset:3px}
@media (max-width:1080px){.bm-in{grid-template-columns:1fr; gap:34px} .bm-stage{width:min(100%, 260px)}}

/* ---------- about: the timeline ---------- */
.tl{list-style:none; margin:40px 0 0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:22px; position:relative}
.tl::before{content:""; position:absolute; left:0; right:0; top:10px; height:3px; border-radius:2px; background:linear-gradient(90deg, var(--breathe), var(--move), var(--flow), var(--pink), var(--breathe))}
.tl-item{position:relative; padding-top:36px}
.tl-item::before{display:none}
.tl-dot{position:absolute; left:0; top:0; width:24px; height:24px; border-radius:50%; border:5px solid #fff; box-shadow:0 6px 16px -8px rgba(31,40,65,.5); background:var(--breathe)}
.tl-dot-move{background:var(--move)} .tl-dot-flow{background:var(--flow)} .tl-dot-pink{background:var(--pink)}
.tl-item h3{font-size:22px; margin-bottom:8px}
.tl-item p{font-size:14.5px; line-height:1.6}
@media (max-width:1080px){.tl{grid-template-columns:1fr; gap:26px; padding-left:36px} .tl::before{left:10px; right:auto; top:0; bottom:0; width:3px; height:auto; background:linear-gradient(180deg, var(--breathe), var(--move), var(--flow), var(--pink), var(--breathe))} .tl-item{padding-top:0} .tl-dot{left:-36px; top:2px}}

/* ---------- the blog ---------- */
.post-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap)}
.post-card{display:flex; flex-direction:column; gap:12px; color:var(--ink); text-decoration:none; border-radius:var(--r); transition:transform .4s var(--ease)}
.post-card:hover{transform:translateY(-6px)}
.post-card figure{margin:0 0 6px} .post-card .ph{aspect-ratio:4/3}
.post-card .ph img{width:100%; height:100%; object-fit:cover}
.post-meta{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute)}
.post-card h2{font-size:clamp(22px,2vw,28px); line-height:1.15}
.post-card p{font-size:15px; color:var(--body)}
.post-card .link{margin-top:auto}
.post-by{display:flex; align-items:center; gap:12px; margin-top:24px; font-size:14px; color:rgba(255,255,255,.8)}
.post-av{width:40px; height:40px; border-radius:50%; overflow:hidden; flex:none} .post-av img{width:100%; height:100%; object-fit:cover; object-position:50% 20%}
.post-hero .eyebrow a{color:inherit; text-decoration:underline; text-underline-offset:3px}
.post{padding:var(--sec) 0}
.post-in{display:grid; grid-template-columns:240px minmax(0, 720px); gap:calc(var(--gap) * 2.5); justify-content:center; align-items:start}
.post-side{position:sticky; top:calc(var(--hdr) + 30px)}
.post-side-k{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); margin-bottom:12px}
.post-toc{list-style:none; margin:0 0 22px; padding:0; counter-reset:toc}
.post-toc li{counter-increment:toc; padding:0; border-bottom:1px solid var(--line)} .post-toc li::before{display:none}
.post-toc a{display:flex; gap:10px; padding:10px 0; font-size:14px; color:var(--ink); transition:color .3s var(--ease)}
.post-toc a::before{content:counter(toc, decimal-leading-zero); font-family:var(--serif); font-style:italic; color:var(--pink-deep)}
.post-toc a:hover,.post-toc a.on{color:var(--breathe-deep)}
.post-body{font-size:17.5px; line-height:1.75; color:var(--body)}
.post-body h2{font-size:clamp(26px,3vw,38px); margin:44px 0 16px; color:var(--ink); scroll-margin-top:calc(var(--hdr) + 20px)}
.post-body h2:first-child{margin-top:0}
.post-body p{margin:0 0 20px}
.pull{margin:38px 0; padding:8px 0 8px 28px; border-left:6px solid var(--pink)}
.pull p{font-family:var(--serif); font-style:italic; font-size:clamp(22px,2.4vw,30px); line-height:1.35; color:var(--ink); margin:0 0 10px}
.pull cite{font-style:normal; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--pink-deep)}
.post-list{margin:34px 0; padding:26px 28px; border-radius:var(--r); background:var(--lblue)}
.post-list h3{font-size:22px; margin-bottom:14px; color:var(--ink)}
.post-list ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.post-list li{display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--ink); padding:0}
.post-list li::before{display:none}
.post-list li i{width:22px; height:22px; border-radius:50%; background:#fff; flex:none; position:relative; margin-top:2px}
.post-list li i::after{content:""; position:absolute; left:8px; top:4px; width:5px; height:10px; border:solid var(--ink); border-width:0 2px 2px 0; transform:rotate(45deg)}
.post-close{font-size:16.5px; padding-top:18px; border-top:1px solid var(--line); color:var(--ink)}
.post-module .pacer{max-width:1000px; margin:0 auto}
.post-module .d3-gate-wrap{margin-top:0}
.author-in{display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center; max-width:900px}
.author-av{width:120px; height:120px; border-radius:50%; overflow:hidden; box-shadow:0 14px 30px -14px rgba(31,40,65,.5)} .author-av img{width:100%; height:100%; object-fit:cover; object-position:50% 20%}
.author h2{font-size:clamp(26px,2.6vw,34px); margin-bottom:8px}
.author p{font-size:15.5px}
.author .btn-row{margin-top:14px}
@media (max-width:1080px){.post-in{grid-template-columns:1fr; gap:30px} .post-side{position:static} .post-side .btn{display:none} .post-grid{grid-template-columns:1fr; max-width:560px; margin:0 auto} .author-in{grid-template-columns:1fr}}

.d1-pacer-sec .pc-box{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25)}
.d1-pacer-sec .pacer-box .pc-side{background:rgba(255,255,255,.18)}
/* ink on the light blue wash: the mute grey sits under 4.5:1 there */
.bg-lblue p,.bg-lblue .lead,.bg-lblue li,.bg-lblue .from-pick label,.bg-lblue .venue-row span,.bg-lblue .post-meta,.bg-lblue .small{color:var(--ink)}
.bg-lblue .venue-row span,.bg-lblue .post-meta,.bg-lblue .from-pick label{color:#3F4A63}

.fn .d4-org .chip[aria-pressed="true"],.fn-other .d4-org .chip[aria-pressed="true"],.fn-recovery .d4-org .chip[aria-pressed="true"],.sym-sec .d4-org .chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.price-card .small{color:var(--ink)}
.fn-contact .steps-label{color:rgba(255,255,255,.92)}
.pacer-pale-sec .pacer-side h2{color:var(--ink)} .pacer-pale-sec .eyebrow{color:var(--ink)}
/* every link is at least 24px tall, nav included */
.hdr-nav a,.hdr-nav .sub-btn{padding:8px 0}
.area-help{display:flex; flex-wrap:wrap; gap:8px; line-height:1.4}
.area-help a{display:inline-flex; align-items:center; min-height:34px; padding:0 14px; border-radius:var(--r-pill); background:#fff; border:1px solid rgba(31,40,65,.16); font-size:13.5px; text-decoration:none; color:var(--ink); transition:background .3s var(--ease), color .3s var(--ease)}
.area-help a:hover{background:var(--ink); color:#fff}

.fn .cred{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width:1080px){.fn .cred{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:700px){.fn .cred{grid-template-columns:1fr}}
.link{min-height:26px}
.ftr-bottom a{display:inline-block; padding:4px 0}
.ftr-areas a{display:inline-block; padding:3px 0}
.post-hero .eyebrow a{display:inline-block; padding:4px 0}

/* ---------- uniform shapes (Amy's rule, 23 Sep): no bubble chips. Content sits in squared
   tiles on a 1px lattice, hairline rows or a rail; controls that are genuinely controls
   (buttons, the contact rail, carousel dots) keep their shape. ---------- */

/* a segmented control replaces every chip row that acts as tabs or radios */
.seg{display:inline-flex; flex-wrap:wrap; border:1px solid rgba(31,40,65,.2); border-radius:var(--r-sm); overflow:hidden; background:#fff}
.seg .chip,.seg .pacer-chip{border:0; border-left:1px solid rgba(31,40,65,.14); border-radius:0; background:transparent; min-height:44px; padding:0 18px; transform:none}
.seg .chip:first-child,.seg .pacer-chip:first-child{border-left:0}
.seg .chip:hover,.seg .pacer-chip:hover{background:rgba(31,40,65,.05); transform:none}
.seg .chip[aria-pressed="true"],.seg .pacer-chip[aria-pressed="true"]{background:var(--ink); color:#fff}
.on-dark .seg{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.26)}
.on-dark .seg .pacer-chip,.on-dark .seg .chip{border-left-color:rgba(255,255,255,.2); color:#fff}
.on-dark .seg .chip:hover,.on-dark .seg .pacer-chip:hover{background:rgba(255,255,255,.1)}
.on-dark .seg .chip[aria-pressed="true"],.on-dark .seg .pacer-chip[aria-pressed="true"]{background:#fff; color:var(--ink)}
.pacer-chips{display:block; margin-bottom:12px}
.d1-ev-filter{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.faq-tabs{margin-bottom:22px}

/* a lattice replaces every grid of chips: equal tiles, one hairline between them */
/* (the "sound familiar" options are back to demo 1's own design, Liane 2 Oct, so they are not in this list) */
.lattice,.who-grid{gap:1px; background:rgba(31,40,65,.16); border:1px solid rgba(31,40,65,.16); border-radius:var(--r-sm); overflow:hidden}
.lattice .chip,.who-chip{border-radius:0; border:0; box-shadow:none}
.lattice .chip{background:#fff; min-height:52px; justify-content:center; transform:none}
.lattice .chip:hover{background:var(--lblue); transform:none}
.lattice .chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.who-chip:hover{transform:none; filter:saturate(1.2) brightness(1.03); box-shadow:none}
.site-who .who-head{margin-bottom:26px}

/* single labels and readouts: a squared tag, never a bubble */
.ev .ev-k,.d1-for-tag,.ev-miles,.bm-which,.d3-venues li small,.from-chip,.d4-card-n,.d4-orbit-tag{border-radius:var(--r-sm)}
.d1-for-tag::before{border-radius:1px; width:7px; height:7px}
.d4-orbit-tag{transform:none; right:-10px; bottom:6px; box-shadow:0 8px 20px -12px rgba(31,40,65,.45)}

/* informational bars: a hairline block with a colour edge, not a pill */
.next-session,.d2-breaths{border-radius:var(--r-sm); border-left:4px solid var(--breathe); background:#fff; white-space:normal}
.next-session em{border-radius:var(--r-sm)}
.d2-breaths{border-style:solid; border-color:rgba(31,40,65,.16); border-left:4px solid var(--pink)}
.on-dark .next-session{border-color:rgba(255,255,255,.18); border-left-color:var(--lblue)}
.from-out{gap:0; border:1px solid rgba(31,40,65,.16); border-radius:var(--r-sm); background:#fff; padding:2px 0; margin-top:12px; display:inline-flex; flex-wrap:wrap}
.from-out:empty{display:none}
.from-lead{padding:8px 14px; margin:0; width:100%; border-bottom:1px solid rgba(31,40,65,.1)}
.from-chip{border:0; border-left:1px solid rgba(31,40,65,.1); border-radius:0; min-height:38px; padding:0 14px; background:transparent}
.from-chip:first-of-type{border-left:0}

/* hairline lists and rails replace the remaining chip rows */
.nots{grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 34px}
.nots li{background:none; border:0; border-bottom:1px solid rgba(31,40,65,.16); border-radius:0; padding:14px 2px; min-height:56px}
.area-help{display:block; font-size:14.5px; line-height:2.5}
.area-help a{display:inline; min-height:0; padding:9px 0; background:none; border:0; border-radius:0; color:var(--navy); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.area-help a:hover{background:none; color:var(--ink)}
.area-help a + a::before{content:"·"; display:inline-block; margin:0 10px; color:var(--pink); text-decoration:none; font-weight:700}
.d4-meet-chips a,.feed-handles a,.pacer-sound,.d4-flip-btn,.d1-shift-n,.post-meta{border-radius:var(--r-sm)}
.d4-meet-chips a{border:1px solid rgba(31,40,65,.1)}
@media (max-width:700px){.nots{grid-template-columns:1fr} .seg{width:100%} .seg .chip,.seg .pacer-chip{flex:1 1 auto; justify-content:center}}

/* ---------- tidy pass: measured spacing, no ragged rows, no orphan words ---------- */
/* a heading is never jammed against the text under it */
.site h1 + p,.site h2 + p,.site h3 + p,.site h1 + .lead,.site h2 + .lead,.site h3 + .lead,
.site h2 + ol,.site h2 + ul,.site h2 + div,.site h3 + ul{margin-top:18px}
.site .d1-head h2 + .lead,.site .fn-full-head h2 + .lead,.site .faq-head h2 + .lead{margin-top:16px}
.site .d3-mix-copy h2{margin-bottom:0}
/* the event row keeps its action column on its own full width line when it stacks */
@media (max-width:700px){.site .ev .ev-act{grid-column:1 / -1; margin-top:4px}}
/* choosers divide exactly: three across, or four, never a lonely last tile */
.fn-recovery .d4-org-chips{grid-template-columns:repeat(3, minmax(0,1fr))}
.fn-other .d4-org-chips,.sym-sec .d4-org-chips{grid-template-columns:repeat(4, minmax(0,1fr))}
@media (max-width:1080px){.fn-recovery .d4-org-chips{grid-template-columns:repeat(3, minmax(0,1fr))} .fn-other .d4-org-chips,.sym-sec .d4-org-chips{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:700px){.fn-recovery .d4-org-chips,.fn-other .d4-org-chips,.sym-sec .d4-org-chips{grid-template-columns:1fr}}

/* ---------- the whole season in one calendar file ---------- */
.ev-all{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:30px}
.ev-all .btn{gap:10px}
.ev-all .small{color:var(--mute); max-width:44ch}
.ev-all .btn.is-done::after{content:"Saved"; margin-left:10px; font-size:11px; letter-spacing:.14em; color:var(--flow-deep)}

/* ---------- package calculator ---------- */
.calc{--fill:45%; margin-top:40px; display:grid; grid-template-columns:.85fr 1.15fr; gap:calc(var(--gap) * 2); align-items:start; padding:34px; border:1px solid rgba(31,40,65,.16); border-radius:var(--r); background:#fff}
.calc-head h3{font-size:clamp(24px,2.4vw,32px); margin-top:10px}
.calc-head p{margin-top:16px; font-size:15.5px; color:var(--body)} .calc-head h3 em{font-style:italic; color:var(--flow-deep)}
.calc-range{display:block}
.calc-range input{-webkit-appearance:none; appearance:none; width:100%; height:34px; background:transparent; cursor:pointer; margin:0}
.calc-range input::-webkit-slider-runnable-track{height:6px; border-radius:3px; background:linear-gradient(90deg, var(--flow) 0 var(--fill), rgba(31,40,65,.12) var(--fill) 100%)}
.calc-range input::-moz-range-track{height:6px; border-radius:3px; background:linear-gradient(90deg, var(--flow) 0 var(--fill), rgba(31,40,65,.12) var(--fill) 100%)}
.calc-range input::-webkit-slider-thumb{-webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:#fff; border:2px solid var(--flow-deep); margin-top:-10px; box-shadow:0 4px 14px -6px rgba(31,40,65,.5)}
.calc-range input::-moz-range-thumb{width:26px; height:26px; border-radius:50%; background:#fff; border:2px solid var(--flow-deep)}
.calc-scale{display:flex; justify-content:space-between; font-size:11px; letter-spacing:.14em; color:var(--mute); margin:2px 2px 18px}
.calc-out{border-top:1px solid rgba(31,40,65,.14)}
.calc-row{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid rgba(31,40,65,.14); font-size:15.5px; color:var(--ink)}
.calc-row b{font-weight:600; font-variant-numeric:tabular-nums}
.calc-row-lit{background:var(--flow-pale); margin:0 -12px; padding:12px; border-radius:var(--r-sm); border-bottom:0}
.calc.saving [data-calc-save]{color:var(--flow-deep)}
.calc .small{margin:16px 0 20px; color:var(--mute)}
@media (max-width:1080px){.calc{grid-template-columns:1fr; gap:26px; padding:26px}}

/* ---------- the space bar hint on the breathing tool ---------- */
.pacer-key{font-size:12.5px; color:var(--mute); letter-spacing:.02em}
.on-dark .pacer-key{color:rgba(255,255,255,.6)}
.quote:focus-visible{outline:2px solid var(--navy); outline-offset:8px; border-radius:var(--r-sm)}

/* ---------- area rail: hairline rows on a phone, so every link is a comfortable tap ---------- */
@media (max-width:640px){
  .area-help{display:block; font-size:15px; line-height:1.4; border-top:1px solid var(--line); max-width:420px}
  .area-help a{display:flex; align-items:center; min-height:46px; padding:6px 22px 6px 0; border-bottom:1px solid var(--line); text-decoration:none; position:relative}
  .area-help a::after{content:""; position:absolute; right:4px; top:50%; width:7px; height:7px; border:solid var(--pink); border-width:1.5px 1.5px 0 0; transform:translateY(-50%) rotate(45deg)}
  .area-help a + a::before{display:none}
}

/* the space bar hint sits on a pale ground on some pages: keep it readable */
.pacer-key{color:var(--ink)}
.on-dark .pacer-key{color:rgba(255,255,255,.82)}

/* ---------- read next: one quiet hairline row under the three therapies ---------- */
.read-next{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; margin:34px 0 0; padding-top:18px; border-top:1px solid var(--line); font-size:15px}
.read-next>span:first-child{font-family:var(--eyebrow-font, inherit); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); opacity:.75}
.read-next a{color:var(--ink); font-weight:500; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; text-decoration-color:var(--pink); padding:6px 0}
.read-next a:hover{text-decoration-thickness:2px}
.read-next .read-mins{margin-left:auto; color:var(--navy); opacity:.7; font-size:13.5px}
@media (max-width:640px){.read-next .read-mins{margin-left:0}}

/* ---------- FAQ search: a plain field on the same hairline as the headings ---------- */
.faq-tabs{display:grid; gap:16px}
.faq-find{display:flex; align-items:center; gap:14px; padding-top:14px; border-top:1px solid var(--line)}
.faq-find input{flex:1; min-width:0; height:34px; padding:0 8px 0 28px; border:0; background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2841' stroke-width='1.7'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat left center/16px 16px; font:inherit; font-size:15px; color:var(--ink); border-radius:0}
.faq-find input::placeholder{color:var(--navy); opacity:.6}
.faq-find:focus-within{border-top-color:var(--pink)}
.faq-find input:focus{outline:none}
.faq-count{white-space:nowrap; color:var(--navy); opacity:.75; font-size:13.5px}
.faq-find{border-top-color:var(--line)}
.on-dark .faq-find{border-top-color:rgba(255,255,255,.28)}
.on-dark .faq-find input{color:#fff; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")}
.on-dark .faq-find input::placeholder, .on-dark .faq-count{color:rgba(255,255,255,.72); opacity:1}

.vh{position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}

/* ---------- blog: how far through you are, inside the sticky contents ---------- */
.post-read{display:flex; align-items:center; gap:12px; margin:0 0 16px; font-size:12.5px; color:var(--navy)}
.post-read-bar{flex:1; height:2px; background:var(--line); border-radius:2px; overflow:hidden}
.post-read-bar i{display:block; height:100%; background:linear-gradient(90deg, var(--breathe), var(--pink)); transform:scaleX(0); transform-origin:0 50%; transition:transform .18s linear}
.post-read-out{white-space:nowrap; opacity:.8; font-variant-numeric:tabular-nums}

/* the who lattice: let the standfirst run to an even two lines under the heading */
.site-who .who-head .small{max-width:62ch; text-wrap:balance}
.site-who .who-head h3{text-wrap:balance}
.post-toc a{text-wrap:pretty}
/* never let a link in the rail break across two lines */
@media (min-width:641px){.area-help a{white-space:nowrap}}

/* =====================================================================================
   30 Sep: Amy's live review round
   ===================================================================================== */

/* never let a two column grid be crushed by an unbreakable child */
.d1-two > *, .d3-two > *, .find-in > *, .fn-meet-grid > *{min-width:0}

/* her faded frequency waves: a seamless strip of fine lines, drifting very slowly */
.waves{position:absolute; left:0; right:0; pointer-events:none; overflow:hidden; z-index:0}
.waves i{position:absolute; top:0; bottom:0; left:0; width:200%;
  background:linear-gradient(90deg, var(--breathe), var(--flow) 34%, var(--pink) 68%, var(--breathe)) 0 0/50% 100% repeat-x;
  -webkit-mask:url(/assets/img/brand/waves-mask.svg) 0 0/50% 100% repeat-x; mask:url(/assets/img/brand/waves-mask.svg) 0 0/50% 100% repeat-x;
  animation:waves-drift 110s linear infinite}
@keyframes waves-drift{to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.waves i{animation:none}}

/* hi, I'm Liane: two columns, the portrait stays a small circle (her ask), waves low behind */
.fn-meet{position:relative; isolation:isolate}
.fn-meet > .wrap{position:relative; z-index:1}
.fn-meet-waves{top:auto; bottom:0; height:46%; opacity:.55}
.fn-meet-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px 76px; align-items:center}
.fn-meet-grid .fn-meet-head{grid-template-columns:1fr; gap:26px; max-width:none; align-items:start}
.fn-meet-grid .fn-meet-head h2{text-wrap:balance}
.fn-meet-grid .fn-meet-text{margin-top:0; max-width:none; font-size:clamp(21px,1.85vw,28px)}
.fn-meet-chips{margin-top:60px}
.fn-meet-chips a span{white-space:nowrap}
@media (max-width:1180px){.fn-meet-chips{grid-template-columns:1fr; max-width:560px}}
@media (max-width:1080px){.fn-meet-grid{grid-template-columns:1fr; gap:30px}}

/* flip card photos: no colour wash (it read as chalky), a little more life, the scrim only where the logo sits */
.d4-card-ph::before{display:none}
.d4-card-ph::after{background:linear-gradient(to top, rgba(20,26,45,.64) 0%, rgba(20,26,45,.2) 36%, transparent 60%)}
.d4-card-ph img:not(.d4-lock){filter:saturate(1.2) contrast(1.08) brightness(1.04)}

/* anyone with a spine: the lattice runs the full width, so both sides match */
.who-grid{max-width:none}
.who-head{max-width:none}
.who .who-head .who-lead{max-width:none; text-wrap:wrap}
.who-lead span{display:inline-block}

/* a button and its link sit on one line, centred on each other */
.btn-row > .btn, .btn-row > .link{margin-top:0; margin-bottom:0}

/* area rails: each link stays whole, and the rail wraps between links */
@media (min-width:641px){.area-help{display:flex; flex-wrap:wrap; align-items:center; row-gap:0} .area-help a{white-space:nowrap}}

/* the breathing tool on navy: the waves breathe with it */
.d1-pacer-sec{position:relative; isolation:isolate}
.d1-pacer-sec > .wrap{position:relative; z-index:1}
.pacer-waves{top:16%; bottom:16%; opacity:.3; transform-origin:50% 50%; transition:transform var(--breath-dur,1.2s) ease-in-out, opacity 1.2s ease}
.pacer-waves i{background:linear-gradient(90deg, #fff, var(--breathe) 30%, var(--flow) 62%, #fff) 0 0/50% 100% repeat-x; animation-duration:140s}
.d1-pacer-sec[data-breath="in"] .pacer-waves, .d1-pacer-sec[data-breath="hold"] .pacer-waves{transform:scaleY(1.45); opacity:.48}
.d1-pacer-sec[data-breath="out"] .pacer-waves, .d1-pacer-sec[data-breath="hold2"] .pacer-waves{transform:scaleY(.8); opacity:.24}

/* what people say: a strip that keeps moving, several in view */
.rv-sec{padding-left:0; padding-right:0}
.rv-head{text-align:center; margin-bottom:34px}
.rv-head .eyebrow{justify-content:center}
.rv-source{margin:8px 0 0; color:var(--ink)} .rv-source a{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.rv-strip{overflow:hidden; outline-offset:-4px;
  -webkit-mask:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent)}
.rv-track{display:flex; width:max-content; animation:rv-move var(--rv-dur,60s) linear infinite}
.rv-strip:hover .rv-track, .rv-strip:focus-within .rv-track{animation-play-state:paused}
.rv-set{display:flex; align-items:stretch}
.rv-card{flex:none; width:clamp(290px, 30vw, 440px); margin:0 22px 0 0; padding:30px 32px 26px; background:rgba(255,255,255,.74); border-radius:var(--r); display:flex; flex-direction:column; justify-content:space-between; gap:22px}
.rv-card blockquote{margin:0; font-family:var(--serif); font-style:italic; font-size:clamp(18px,1.35vw,21px); line-height:1.5; color:var(--ink)}
.rv-card figcaption{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.rv-card figcaption b{font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink)}
.rv-card figcaption b a{color:inherit}
.rv-card figcaption span{font-size:12.5px; color:#3F4A63}
.rv-meta{display:flex; align-items:center; gap:10px}
.rv-stars{display:inline-flex; gap:2px; color:#B7791F}
.rv-stars svg{width:15px; height:15px}
@keyframes rv-move{to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.rv-track{animation:none} .rv-strip{overflow-x:auto}}

/* find the studio: the details on a card with brand icons, the picker on its own row */
.find-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px 76px; align-items:center}
.find-lines{list-style:none; margin:30px 0 0; padding:4px 24px; background:#fff; border-radius:var(--r); box-shadow:0 22px 46px -32px rgba(31,40,65,.4)}
.find-lines li{display:grid; grid-template-columns:40px minmax(0,1fr); gap:16px; align-items:center; padding:15px 0; border-bottom:1px solid var(--line); font-size:15.5px; line-height:1.45; color:var(--ink)}
.find-lines li:last-child{border-bottom:0}
.find-lines li::before{display:none}
.find-lines b{display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#3F4A63; font-weight:600; margin-bottom:3px}
.find-lines a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--pink); text-underline-offset:3px; text-decoration-thickness:1.5px}
.find-ic{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--ink)}
.find-ic svg{width:18px; height:18px}
.find-ic-pin{background:var(--breathe)} .find-ic-phone{background:var(--flow)} .find-ic-mail{background:var(--pink)} .find-ic-cal{background:var(--move)}
.find-sec .from-pick{margin-top:30px}
.find-sec .find-note{margin-top:18px; max-width:52ch}
.find-sec .find-note a{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.find-sec .btn-row{margin-top:28px}
.find-map .map-frame{aspect-ratio:1/1}
@media (max-width:1080px){.find-in{grid-template-columns:1fr} .find-map .map-frame{aspect-ratio:4/3}}

/* menopause: the chooser has its own section; heading left, the choice right */
.sym-in{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:76px; align-items:start}
.sym-in > .eyebrow{grid-column:1; grid-row:1}
.sym-in > h2{grid-column:1; grid-row:2; margin-bottom:0}
.sym-in > .d4-org{grid-column:2; grid-row:1 / span 2; align-self:center}
@media (max-width:1080px){.sym-in{grid-template-columns:1fr} .sym-in > .d4-org{grid-column:1; grid-row:3; margin-top:26px}}

/* flip cards: both faces share one grid cell, so each card is as tall as its fullest face and
   "Read more" is never clipped; the row stretches, so the buttons line up across all three */
.fn-cards .d4-card, .fn-cards .d4-card-inner{min-height:0}
.fn-cards .d4-card-inner{display:grid; height:100%}
.fn-cards .d4-face{position:relative; inset:auto; grid-area:1 / 1}
.fn-meet-grid .fn-meet-head h2{font-size:clamp(36px,3.7vw,56px)}
.d3-gate-head p{text-wrap:pretty}
.fn-meet-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.fn-meet-grid .fn-meet-head h2{font-size:clamp(34px,3.2vw,48px)}
.fn-meet-grid .fn-meet-text{font-size:clamp(20px,1.7vw,26px)}
.fn-gate-sec .d3-gate-wrap{border-top:0}
/* area rails on tablet and desktop: clean underlined links in a wrapping row, no leading dots */
@media (min-width:641px){
  .area-help{line-height:1.5; column-gap:26px; row-gap:4px}
  .area-help a{padding:8px 0}
  .area-help a + a::before{display:none}
}
.sym-in > .sym-head{grid-column:1; grid-row:1 / span 2; align-self:center}
.sym-head h2{margin-bottom:0}
@media (max-width:1080px){.sym-in > .sym-head{grid-row:1}}
/* the frozen FAQ heading sits in a narrow column: a size that keeps it to three tidy lines */
.faq-two .faq-head h2{font-size:clamp(32px,3vw,46px)}
.find-lines a{display:inline-block; padding:6px 0}
.post-card h2{text-wrap:balance}

/* ---------- back pain: a sixty second unwind ---------- */
.unwind-in{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px 76px; align-items:center}
.uw-steps{list-style:none; margin:28px 0 0; padding:0; border-top:1px solid rgba(31,40,65,.16); counter-reset:none}
.uw-steps li{display:grid; grid-template-columns:34px minmax(0,1fr); gap:4px 14px; align-items:center; padding:14px 0; border-bottom:1px solid rgba(31,40,65,.16); color:var(--ink); transition:color .5s var(--ease)}
.uw-steps li::before{display:none}
.uw-n{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:12.5px; font-weight:600; background:#fff; color:var(--ink); transition:background .5s var(--ease), color .5s var(--ease)}
.uw-t{font-size:16px}
.uw-bar{grid-column:2; height:2px; background:rgba(31,40,65,.12); border-radius:2px; overflow:hidden}
.uw-bar i{display:block; height:100%; width:100%; background:linear-gradient(90deg, var(--flow-deep), var(--pink)); transform:scaleX(0); transform-origin:0 50%}
.uw-steps li.on .uw-n{background:var(--ink); color:#fff}
.uw-steps li.on .uw-bar i{transform:scaleX(1); transition:transform 15s linear}
.uw-steps li.done .uw-bar i{transform:scaleX(1)}
.uw-steps li.done .uw-n{background:var(--flow); color:var(--ink)}
.unwind-sec .btn-row{margin-top:26px}
.uw-out{color:var(--ink)}
.unwind-stage{position:relative; display:grid; place-items:center; min-height:440px}
.uw-spine{position:relative; width:160px; height:380px}
.uw-v{position:absolute; left:50%; top:0; width:34px; height:15px; margin-left:-17px; border-radius:8px; background:rgba(31,40,65,.22);
  transform:translate(var(--x,0px), var(--y,0px)) rotate(var(--r,0deg)); transition:transform 1.6s cubic-bezier(.3,.7,.2,1), background .6s ease, box-shadow .6s ease}
.uw-v.lit{background:var(--flow-deep); box-shadow:0 0 0 6px rgba(54,112,114,.14)}
.uw-clock{position:absolute; right:0; bottom:0; width:92px; height:92px; display:grid; place-items:center}
.uw-clock svg{position:absolute; inset:0; transform:rotate(-90deg)}
.uw-clock circle{fill:none; stroke:rgba(31,40,65,.14); stroke-width:4}
.uw-clock .uw-ring{stroke:var(--flow-deep); stroke-dasharray:100; stroke-dashoffset:100; stroke-linecap:round; transition:stroke-dashoffset 1s linear}
.uw-clock b{font-family:var(--serif); font-size:26px; color:var(--ink); font-weight:400; font-variant-numeric:tabular-nums}
@media (max-width:1080px){.unwind-in{grid-template-columns:1fr} .unwind-stage{min-height:400px}}

/* ---------- trauma: the window of tolerance ---------- */
.window-in{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px 76px; align-items:center}
.window-label{display:block; margin-top:30px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.78)}
.window-range{width:100%; margin:14px 0 8px; accent-color:var(--pink); height:32px; cursor:pointer}
.window-scale{display:flex; justify-content:space-between; font-size:12.5px; color:rgba(255,255,255,.72)}
.window-stage{position:relative; height:240px; border-radius:var(--r); overflow:hidden; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12)}
.wz{position:absolute; left:0; right:0}
.wz-high{top:0; height:28%; background:linear-gradient(180deg, rgba(204,156,192,.26), rgba(204,156,192,.06))}
.wz-mid{top:28%; height:44%; background:rgba(159,204,206,.1); border-top:1px dashed rgba(159,204,206,.45); border-bottom:1px dashed rgba(159,204,206,.45)}
.wz-low{bottom:0; height:28%; background:linear-gradient(0deg, rgba(133,156,206,.26), rgba(133,156,206,.06))}
.window-stage svg{position:absolute; inset:0; width:100%; height:100%}
.window-stage path{fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 6px rgba(159,204,206,.6))}
.window-card{margin-top:18px; padding:22px 24px; border-radius:var(--r); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); min-height:170px}
.window-zone{font-family:var(--serif); font-size:26px; margin:0 0 8px; color:#fff}
.window-feel{margin:0 0 10px; color:rgba(255,255,255,.9)}
.window-help{margin:0; color:rgba(255,255,255,.82); font-size:15px}
.window-safe{margin-top:14px; color:rgba(255,255,255,.72)}
.window-sec[data-zone="high"] .window-zone{color:#E9C3DD} .window-sec[data-zone="low"] .window-zone{color:#C9D3EE} .window-sec[data-zone="mid"] .window-zone{color:#CFE8E8}
@media (max-width:1080px){.window-in{grid-template-columns:1fr}}

/* ---------- holistic: build your month ---------- */
.month-head{max-width:760px}
.month-seg{margin-top:26px}
.mo-weeks{list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px}
.mo-week{display:flex; flex-direction:column; gap:8px; padding:22px 22px 20px; border-radius:var(--r); background:#fff; border-top:5px solid var(--c, var(--breathe)); box-shadow:0 18px 40px -30px rgba(31,40,65,.45); min-height:188px}
.mo-week::before{display:none}
.mo-breathe{--c:var(--breathe)} .mo-move{--c:var(--move)} .mo-flow{--c:var(--flow)}
.mo-k{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#3F4A63}
.mo-mod{font-family:var(--serif); font-style:italic; font-size:22px; color:var(--ink)}
.mo-t{font-size:15.5px; color:var(--ink); line-height:1.4; flex:1}
.mo-p{font-size:15px; font-weight:600; color:var(--ink)}
.mo-weeks.swap .mo-week{animation:mo-in .7s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i) * 90ms)}
@keyframes mo-in{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.month-foot{margin-top:26px}
.mo-total{font-size:18px; color:var(--ink); margin:0 0 6px}
.mo-total b{font-family:var(--serif); font-size:30px; font-weight:400; font-variant-numeric:tabular-nums}
@media (max-width:1080px){.mo-weeks{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:560px){.mo-weeks{grid-template-columns:1fr} .mo-week{min-height:0}}
@media (prefers-reduced-motion:reduce){.mo-weeks.swap .mo-week{animation:none} .uw-v{transition:none}}
/* the closing band on every inner page: her waves, faint, drifting */
.site-cta{position:relative; isolation:isolate}
.site-cta > .wrap{position:relative; z-index:1}
.cta-waves{top:10%; bottom:10%; opacity:.22}
.cta-waves i{background:linear-gradient(90deg, #fff, var(--pink) 30%, var(--flow) 62%, #fff) 0 0/50% 100% repeat-x; animation-duration:150s}
.uw-bar{background:transparent}
.unwind-stage::before{content:""; position:absolute; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 70%)}
.uw-spine{z-index:1}

/* ---------- the areas map: real boundaries, rivers, roads; search for the distance to Olney ---------- */
.am{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:28px; align-items:start; margin-top:30px}
.am-box{position:relative; aspect-ratio:1040/760; border-radius:var(--r); overflow:hidden; background:#F7F9FC; box-shadow:0 26px 50px -34px rgba(31,40,65,.45)}
.am-svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.am-cty{stroke:none; transition:fill .6s ease}
.am-c0{fill:#E4E9F6} .am-c1{fill:#E6F1F1} .am-c2{fill:#EEF2F8} .am-c3{fill:#F3EAF1} .am-c4{fill:#EDF3F7} .am-c5{fill:#E9EDF7} .am-c6, .am-c7, .am-c8, .am-c9, .am-c10, .am-c11{fill:#F1F3F6}
.am-cty.am-hi{fill:#D9E2F4}
.am-borders{fill:none; stroke:#fff; stroke-width:2.2; stroke-linejoin:round}
.am-ring{fill:none; stroke:rgba(158,75,137,.28); stroke-width:1.2; stroke-dasharray:4 7}
.am-road{fill:none; stroke-linecap:round; stroke-linejoin:round}
.am-road.am-motorway{stroke:#B9C3DA; stroke-width:3.2}
.am-road.am-a{stroke:#D3D9E6; stroke-width:1.9}
.am-riv{fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:7 9; animation:am-flow 9s linear infinite}
.am-riv.am-main{stroke:#7FA9C9; stroke-width:2.4}
.am-riv.am-canal{stroke:#9DB9CF; stroke-width:1.6; stroke-dasharray:3 6}
.am-riv.am-minor{stroke:#A9C6DA; stroke-width:1.1}
@keyframes am-flow{to{stroke-dashoffset:-32}}
.am-route{stroke:var(--pink-deep); stroke-width:3; stroke-dasharray:8 7; stroke-linecap:round; opacity:0; transition:opacity .4s ease}
.am-route.on{opacity:1; animation:am-route 1.4s linear infinite}
@keyframes am-route{to{stroke-dashoffset:-30}}
.am-layer{position:absolute; inset:0; pointer-events:none}
.am-layer > *{position:absolute; transform:translate(-50%,-50%)}
.am-clab{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(31,40,65,.42); white-space:nowrap}
.am-shield{font-size:10px; font-weight:700; padding:2px 5px; border-radius:3px; line-height:1.2; color:#fff}
.am-shield.am-motorway{background:#3F5FA8} .am-shield.am-a{background:#2E7D5B}
.am-town i{display:block; width:5px; height:5px; border-radius:50%; background:rgba(31,40,65,.45)}
.am-town b{display:none; position:absolute; left:9px; top:50%; transform:translateY(-50%); font-size:11.5px; font-weight:500; color:rgba(31,40,65,.75); white-space:nowrap}
.am-town.am-lab b{display:block}
.am-town.am-here i{width:10px; height:10px; background:var(--pink-deep); box-shadow:0 0 0 5px rgba(158,75,137,.18)}
.am-town.am-here b{display:block; color:var(--ink); font-weight:600}
.am-pin i{display:block; width:14px; height:14px; border-radius:50%; background:var(--ink); border:3px solid #fff; box-shadow:0 4px 10px rgba(31,40,65,.35)}
.am-pin b{position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:11px; font-weight:600; color:var(--ink); white-space:nowrap; background:rgba(255,255,255,.86); padding:2px 6px; border-radius:4px}
.am-pin.am-studio i{width:20px; height:20px; background:var(--pink-deep); animation:am-pulse 2.6s ease-out infinite}
@keyframes am-pulse{0%{box-shadow:0 0 0 0 rgba(158,75,137,.45), 0 4px 10px rgba(31,40,65,.3)} 100%{box-shadow:0 0 0 22px rgba(158,75,137,0), 0 4px 10px rgba(31,40,65,.3)}}
.am-you{width:18px; height:18px; border-radius:50%; background:#fff; border:4px solid var(--pink-deep); opacity:0; transition:left .9s cubic-bezier(.2,.8,.2,1), top .9s cubic-bezier(.2,.8,.2,1), opacity .3s ease}
.am-you.on{opacity:1}
.am-side{display:flex; flex-direction:column; gap:18px}
.am-form label{display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#3F4A63; margin-bottom:8px}
.am-row{display:flex; gap:8px}
.am-row input{flex:1; width:0; min-width:0; height:46px; padding:0 14px; border:1px solid rgba(31,40,65,.2); border-radius:10px; background:#fff; font:inherit; font-size:15.5px; color:var(--ink)}
.am-row input:focus{outline:2px solid var(--breathe); outline-offset:1px}
.am-locate{display:inline-flex; align-items:center; gap:8px; margin-top:10px; padding:8px 0; background:none; border:0; font:inherit; font-size:14px; color:var(--ink); cursor:pointer; text-decoration:underline; text-decoration-color:var(--pink); text-underline-offset:3px}
.am-locate svg{width:16px; height:16px}
.am-result{padding:20px 22px; border-radius:var(--r); background:#fff; box-shadow:0 18px 40px -30px rgba(31,40,65,.45); min-height:150px}
.am-big{margin:0; font-family:var(--serif); font-size:20px; color:var(--ink)}
.am-big b{font-size:44px; font-weight:400; margin-right:6px; font-variant-numeric:tabular-nums}
.am-say{margin:6px 0 10px; font-size:15px; color:var(--ink); line-height:1.5}
.am-venues{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.am-venues li{display:grid; grid-template-columns:14px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink)}
.am-venues li::before{display:none}
.am-venues b{display:block; font-weight:600}
.am-venues em{font-style:normal; font-size:13px; color:#3F4A63; white-space:nowrap}
.am-dot{width:10px; height:10px; border-radius:50%; background:var(--ink)} .am-dot.am-studio{background:var(--pink-deep)}
.am-licence{margin:0; font-size:11px; color:#57637D; line-height:1.45}
@media (max-width:1080px){.am{grid-template-columns:1fr}}
@media (max-width:640px){.am-clab, .am-shield{display:none} .am-town.am-lab b{display:none} .am-town.am-here b{display:block} .am-pin b{display:none} .am-pin.am-studio b{display:block}}
@media (prefers-reduced-motion:reduce){.am-riv, .am-route.on, .am-pin.am-studio i{animation:none}}
/* label sides, chosen by the collision pass */
.am-pin.am-l b, .am-town.am-l b{left:auto; right:14px}
.am-pin.am-t b, .am-town.am-t b{left:50%; top:auto; bottom:10px; transform:translateX(-50%)}
.am-pin.am-bm b, .am-town.am-bm b{left:50%; top:10px; transform:translateX(-50%)}
.am-layer .am-off{visibility:hidden}
.am-town.am-nolab b{display:none !important}
.am-clab{color:#57637D}

/* Liane's FAQs: links inside answers read as links; the heading tabs fill their bar evenly */
.faq-a a{color:var(--ink); font-weight:500; text-decoration:underline; text-decoration-color:var(--pink); text-decoration-thickness:1.5px; text-underline-offset:3px}
.faq-a a:hover{text-decoration-thickness:2.5px}
.on-dark .faq-a a{color:#fff}
.faq-tabs .seg{display:flex; width:100%}
.faq-tabs .seg > .chip{flex:1 1 auto; justify-content:center; text-align:center}

/* stage by stage: the starry studio stays put while the stages scroll, but it can never leave its
   own section. The old version (sticky with a minus 100vh margin) slid 100vh past the bottom in
   Safari and painted over "Not just for the yoga lot", hiding its ground and its text. */
.fn-journey{isolation:isolate}
.fn-journey-bg{position:absolute; inset:0; height:auto; margin:0; overflow:visible; z-index:0; pointer-events:none}
.fn-journey-bg-in{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden}
.fn-journey-bg-in img{width:100%; height:100%; object-fit:cover; object-position:center; display:block; filter:saturate(.9) brightness(.9)}
.fn-journey-bg-in .d1-sparkle{position:absolute; inset:0; width:100%; height:100%}
html:not(.js) .fn-journey-bg-in, .reduced .fn-journey-bg-in{position:absolute; inset:0; height:auto}

/* ---------- read next: a card with the post's photo, title, a line of it and an arrow that moves ---------- */
.rn-card{position:relative; display:grid; grid-template-columns:240px minmax(0,1fr) 64px; gap:0 30px; align-items:center; margin:44px 0 0; padding:14px 26px 14px 14px;
  border-radius:var(--r); background:linear-gradient(120deg, #F5EBF2 0%, #EEF2F8 55%, #E9F2F2 100%); color:var(--ink); text-decoration:none; overflow:hidden; isolation:isolate;
  box-shadow:0 22px 46px -34px rgba(31,40,65,.5); transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease}
.rn-card::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg, var(--breathe), var(--flow), var(--pink)); transform:scaleX(.18); transform-origin:0 50%; transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.rn-card:hover{transform:translateY(-3px); box-shadow:0 30px 56px -34px rgba(31,40,65,.6)}
.rn-card:hover::before, .rn-card:focus-visible::before{transform:scaleX(1)}
.rn-ph{display:block; aspect-ratio:3/2; border-radius:calc(var(--r) - 6px); overflow:hidden}
.rn-ph img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s cubic-bezier(.2,.8,.2,1); filter:saturate(1.1)}
.rn-card:hover .rn-ph img{transform:scale(1.06)}
.rn-body{display:flex; flex-direction:column; gap:8px; min-width:0}
.rn-k{display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#8A3D77; font-weight:600}
.rn-k i{width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.6}
.rn-t{font-family:var(--serif); font-size:clamp(20px,1.7vw,26px); line-height:1.25; text-wrap:balance}
.rn-p{font-size:15px; line-height:1.5; color:#3F4A63; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.rn-go{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:#fff; transition:transform .5s cubic-bezier(.2,.8,.2,1), background .4s ease}
.rn-go svg{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.rn-card:hover .rn-go{background:var(--pink-deep)}
.rn-card:hover .rn-go svg{transform:translateX(4px)}
@media (max-width:760px){.rn-card{grid-template-columns:1fr; gap:16px; padding:12px 12px 20px} .rn-ph{aspect-ratio:16/9} .rn-body{padding:0 8px} .rn-go{position:absolute; right:22px; top:calc(12px + (100% - 24px) * 0); width:48px; height:48px; top:auto; bottom:20px} .rn-p{-webkit-line-clamp:3; padding-right:56px}}
@media (prefers-reduced-motion:reduce){.rn-card, .rn-card::before, .rn-ph img, .rn-go, .rn-go svg{transition:none}}

/* ---------- back pain unwind, round two: it has to look pressable before anyone touches it ---------- */
.uw-hit{position:relative; z-index:1; display:block; padding:16px 40px; margin:0; border:0; background:none; cursor:pointer; border-radius:40px}
.uw-hit:focus-visible{outline:3px solid var(--ink); outline-offset:4px}
.uw-v{background:var(--c, rgba(31,40,65,.22)); opacity:.55; animation:uw-shimmer 3.4s ease-in-out infinite; animation-delay:calc(var(--i) * 95ms)}
@keyframes uw-shimmer{0%, 70%, 100%{opacity:.5; box-shadow:none} 35%{opacity:1; box-shadow:0 0 0 5px rgba(255,255,255,.75), 0 0 18px 2px color-mix(in srgb, var(--c, #9fccce) 60%, transparent)}}
.uw-hit:hover .uw-v{opacity:.9}
.unwind-in.running .uw-v, .unwind-in.done .uw-v{animation:none; opacity:.4}
.unwind-in.running .uw-v.lit, .unwind-in.done .uw-v{opacity:1}
.uw-v.lit{background:var(--c); box-shadow:0 0 0 5px rgba(255,255,255,.8), 0 0 22px 4px color-mix(in srgb, var(--c, #9fccce) 70%, transparent)}
.uw-clock{position:absolute; right:0; bottom:16px; z-index:2; width:118px; height:118px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:#fff; cursor:pointer;
  box-shadow:0 18px 40px -20px rgba(31,40,65,.55); transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.uw-clock:hover{transform:scale(1.05)}
.uw-clock:focus-visible{outline:3px solid var(--ink); outline-offset:4px}
.uw-clock svg{position:absolute; inset:6px; width:calc(100% - 12px); height:calc(100% - 12px); transform:rotate(-90deg)}
.uw-clock circle{fill:none; stroke:rgba(31,40,65,.12); stroke-width:5}
.uw-clock .uw-ring{stroke:var(--pink-deep); stroke-dasharray:100; stroke-dashoffset:100; stroke-linecap:round; transition:stroke-dashoffset 1s linear}
.uw-play{position:relative; width:70px; height:70px; border-radius:50%; display:grid; place-items:center; background:var(--pink-deep); color:#fff; animation:uw-call 2.2s ease-out infinite}
.uw-play svg{position:static; transform:none; width:30px; height:30px; inset:auto; fill:#fff; margin-left:4px}
@keyframes uw-call{0%{box-shadow:0 0 0 0 rgba(158,75,137,.55)} 80%, 100%{box-shadow:0 0 0 22px rgba(158,75,137,0)}}
.uw-clock b{position:relative; display:none; font-family:var(--serif); font-size:34px; color:var(--ink); font-weight:400; font-variant-numeric:tabular-nums}
.unwind-in.running .uw-play{display:none}
.unwind-in.running .uw-clock b{display:block}
.unwind-in.done .uw-play{animation:none; background:var(--ink)}
.uw-tap{position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); margin:0; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#3F4A63; white-space:nowrap; transition:opacity .4s ease}
.unwind-in.running .uw-tap, .unwind-in.done .uw-tap{opacity:0}
.unwind-in:not(.running):not(.done) [data-unwind-btn]{animation:uw-btn 2.6s ease-out infinite}
@keyframes uw-btn{0%{box-shadow:0 0 0 0 rgba(31,40,65,.4)} 70%, 100%{box-shadow:0 0 0 14px rgba(31,40,65,0)}}
@media (max-width:1080px){.uw-clock{right:4%; bottom:20px}}
@media (max-width:560px){.uw-clock{width:96px; height:96px; right:0} .uw-play{width:56px; height:56px}}
@media (prefers-reduced-motion:reduce){.uw-v, .uw-play, .unwind-in [data-unwind-btn]{animation:none !important}}

/* ---------- somatic body map, round two: front and back, a label on the spot, steps, links ---------- */
.bm-side{display:flex; flex-direction:column; align-items:center; gap:20px}
.bm-views.seg{display:inline-flex; width:auto}
.bm-stage{position:relative; width:min(100%, 320px); aspect-ratio:200/420; margin:0 auto; transition:transform .3s cubic-bezier(.4,0,.6,1)}
.bm-stage.flip{transform:scaleX(0)}
.bm-face{position:absolute; inset:0}
.bm-stage[data-view="front"] .bm-back, .bm-stage[data-view="back"] .bm-front{visibility:hidden}
.bm-spine rect{fill:rgba(54,112,114,.35)}
.bm-spot{z-index:1}
.bm-label{position:absolute; z-index:2; transform:translate(20px,-50%); padding:5px 11px; border-radius:6px; background:var(--ink); color:#fff; font-size:12.5px; font-weight:600; white-space:nowrap; pointer-events:none; opacity:0;
  transition:opacity .3s ease, left .45s cubic-bezier(.2,.8,.2,1), top .45s cubic-bezier(.2,.8,.2,1)}
.bm-label.on{opacity:1}
.bm-label.left{transform:translate(calc(-100% - 20px),-50%)}
.bm-hint{position:absolute; left:50%; bottom:-30px; transform:translateX(-50%); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#3F4A63; white-space:nowrap; animation:bm-hint 2.4s ease-in-out infinite}
.bm-hint.gone{opacity:0; animation:none; transition:opacity .4s ease}
@keyframes bm-hint{50%{opacity:.35}}
.bm-steps{display:flex; align-items:center; gap:10px; margin-top:18px}
.bm-step{width:44px; height:44px; border-radius:50%; border:1px solid rgba(31,40,65,.25); background:#fff; color:var(--ink); display:grid; place-items:center; cursor:pointer; transition:background .3s ease, color .3s ease}
.bm-step:hover, .bm-step:focus-visible{background:var(--ink); color:#fff}
.bm-steps .small{color:#3F4A63; margin-left:6px}
.bm-item .bm-k{margin:0 0 6px; font-size:11px; letter-spacing:.2em; color:#3F4A63; display:flex; align-items:center; gap:8px}
.bm-item .bm-k i{width:26px; height:1px; background:currentColor}
.bm-item .bm-which{display:block; margin:12px 0 0; padding:0; background:none; border-radius:0; font-size:14.5px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink)}
.bm-item .bm-which a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--pink); text-decoration-thickness:1.5px; text-underline-offset:3px}
@media (max-width:1080px){.bm-stage{width:min(100%, 260px)}}
@media (prefers-reduced-motion:reduce){.bm-stage{transition:none} .bm-hint{animation:none}}
.uw-spine{display:block}
.unwind-stage{min-height:470px}
.uw-clock{top:50%; bottom:auto; margin-top:-59px}
.uw-tap{bottom:-14px}
@media (max-width:560px){.uw-clock{margin-top:-48px}}
.bm-label.mid{transform:translate(-50%, calc(-100% - 22px))}

/* blog cards: every card in a row shares the same lines, so the excerpts always start level */
@supports (grid-template-rows: subgrid) {
  .post-grid{row-gap:56px}
  .post-card{display:grid; grid-row:span 5; grid-template-rows:subgrid; row-gap:12px; align-content:start}
  .post-card .link{margin-top:0; align-self:end}
}
.post-card p, .rn-p, .mo-t, .am-say{text-wrap:pretty}

/* ======================================================================================
   Liane's BIG CHANGES (2 Oct 2026)
   ====================================================================================== */

/* the breath counter: its own banner on the homepage, between "sound familiar" and "Hi, I'm Liane" */
.breaths-band{position:relative; background:var(--navy); color:#fff; padding:clamp(28px,3.4vw,40px) 0; overflow:hidden}
.breaths-band-in{display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; text-align:center}
.breaths-ring{flex:none; width:48px; height:48px; border-radius:50%; border:1.5px solid rgba(255,255,255,.32); display:grid; place-items:center}
.breaths-ring i{width:16px; height:16px; border-radius:50%; background:var(--pink); animation:breathsRing 4s ease-in-out infinite}
@keyframes breathsRing{0%,100%{transform:scale(.6); opacity:.65} 50%{transform:scale(2.1); opacity:1}}
@media (prefers-reduced-motion:reduce){.breaths-ring i{animation:none}}
.breaths-band .breaths-big{margin:0; display:flex; align-items:baseline; justify-content:center; gap:6px 14px; flex-wrap:wrap; background:none; border:0; padding:0; border-radius:0;
  font-family:var(--serif); font-size:clamp(21px,2.3vw,30px); line-height:1.3; color:#fff; white-space:normal}
.breaths-band .breaths-big b{font-family:var(--serif); font-weight:400; font-size:1.45em; color:var(--pink); min-width:1.4ch; margin:0 .08em}
.breaths-band .breaths-big em{display:inline; font-family:var(--serif); font-style:italic; font-size:.82em; color:rgba(255,255,255,.78)}

/* ...and in every footer, above the breathe in, breathe out line */
.ftr-breathe{display:flex; flex-direction:column; align-items:flex-end; gap:10px}
.ftr .ftr-breaths{margin:0; background:transparent; border:1px solid rgba(255,255,255,.14); border-left:3px solid var(--pink); border-radius:var(--r-sm);
  color:rgba(255,255,255,.74); font-size:13px; padding:7px 14px; white-space:normal}
.ftr .ftr-breaths b{color:var(--pink); font-size:15px}
.ftr .ftr-breaths em{color:#fff}
@media (max-width:700px){.ftr-breathe{align-items:flex-start} .ftr .ftr-breaths em{display:inline}}

/* "Hi, I'm Liane": her name stands up straight, and the three logos are one size */
.fn-meet-foot .d4-intro-sig{font-style:normal; letter-spacing:.01em}
.fn-meet-chips .d4-chip-lock{width:86px; height:32px; max-width:none; flex:none; object-fit:contain}
.fn-meet-chips a span{white-space:normal; text-wrap:balance}
@media (max-width:700px){.fn-meet-chips .d4-chip-lock{width:72px; height:27px}}

/* her waves, faded so the words in front read easily (Liane, 2 Oct) */
.fn-meet-waves{opacity:.32}
.pacer-waves{opacity:.16}
.d1-pacer-sec[data-breath="in"] .pacer-waves, .d1-pacer-sec[data-breath="hold"] .pacer-waves{opacity:.26}
.d1-pacer-sec[data-breath="out"] .pacer-waves, .d1-pacer-sec[data-breath="hold2"] .pacer-waves{opacity:.12}
.cta-waves{opacity:.13}
.fn-contact .d4-water{opacity:.4}
.fn-contact .d4-hero-waves{opacity:.26}

/* homepage questions: a heading is always picked, and the rest of it is one link away */
.faq-more{margin:20px 0 0; display:flex; justify-content:flex-end}
.faq-more .link{font-weight:600}

/* projects, in three plain categories */
.pk-k{margin:28px 0 8px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--ink)}
.proj-kinds{list-style:none; margin:0 0 8px; padding:0; border-top:1px solid rgba(31,40,65,.2)}
.proj-kinds li{display:grid; grid-template-columns:42px minmax(0,1fr); gap:12px; align-items:baseline; padding:14px 0; border-bottom:1px solid rgba(31,40,65,.2)}
.pk-n{font-family:var(--serif); font-style:italic; font-size:22px; line-height:1; color:var(--ink); opacity:.6}
.pk-t b{display:block; font-size:16.5px; font-weight:600; line-height:1.4; color:var(--ink)}
.pk-t span{display:block; margin-top:6px; font-size:15.5px; line-height:1.6; color:var(--body)}
.proj-kinds-full li{padding:18px 0}
.fn-recovery .btn-row{margin-top:26px}

/* five locations in two level rows: three, then two */
.rel-grid-5{grid-template-columns:repeat(6, minmax(0,1fr))}
.rel-grid-5 > *{grid-column:span 2}
.rel-grid-5 > :nth-child(n+4){grid-column:span 3}
@media (max-width:1080px){.rel-grid-5{grid-template-columns:1fr} .rel-grid-5 > *, .rel-grid-5 > :nth-child(n+4){grid-column:auto}}

/* the seven gateways on a spine drawn to anatomy, laid out like the official Spinal Flow chart */
.spine-wrap .d3-spine{max-width:290px}
.spine-anat .v{cursor:pointer; transition:opacity .45s var(--ease), filter .45s var(--ease)}
.spine-anat .v-proc{opacity:.5}
.spine-anat .v-fuse{fill:none; stroke:rgba(255,255,255,.85); stroke-width:1.2}
.spine-anat .v-lab{font:600 8.5px/1 var(--sans); letter-spacing:.04em; fill:var(--mute)}
.spine-wrap[data-gate-now] .spine-anat .v{opacity:.46}
.spine-wrap[data-gate-now="awaken"] .spine-anat .v-awaken, .spine-wrap[data-gate-now="pause"] .spine-anat .v-pause,
.spine-wrap[data-gate-now="passion"] .spine-anat .v-passion, .spine-wrap[data-gate-now="centre"] .spine-anat .v-centre,
.spine-wrap[data-gate-now="power"] .spine-anat .v-power, .spine-wrap[data-gate-now="foundation"] .spine-anat .v-foundation,
.spine-wrap[data-gate-now="base"] .spine-anat .v-base{opacity:1; filter:saturate(1.25) drop-shadow(0 0 5px rgba(255,255,255,.9))}
.spine-wrap .d3-gate{width:36px; height:36px; margin:-18px 0 0 -18px}
.spine-wrap .d3-gate::before{width:18px; height:18px; border-width:3px}
.spine-wrap .d3-gate-beam{left:var(--gate-x, 50%); width:calc(100% - var(--gate-x, 50%) + 60px)}
@media (max-width:1080px){.spine-wrap .d3-gate-beam{display:none}}

/* the map: a new venue still to announce is a hollow pin */
.am-pin.am-soon i{background:#fff; border:3px solid var(--ink); box-shadow:0 4px 10px rgba(31,40,65,.25)}
.am-dot.am-soon{background:#fff; box-shadow:inset 0 0 0 2px var(--ink)}
@media (min-width:1181px){.fn-meet-chips a{column-gap:12px; padding:0 14px 0 12px} .fn-meet-chips a span{font-size:14px}}

/* the lit gateway gets a fine outline, so it reads on the pale ground */
.spine-wrap[data-gate-now="awaken"] .spine-anat .v-awaken > :not(.v-proc):not(.v-fuse),
.spine-wrap[data-gate-now="pause"] .spine-anat .v-pause > :not(.v-proc):not(.v-fuse),
.spine-wrap[data-gate-now="passion"] .spine-anat .v-passion > :not(.v-proc):not(.v-fuse),
.spine-wrap[data-gate-now="centre"] .spine-anat .v-centre > :not(.v-proc):not(.v-fuse),
.spine-wrap[data-gate-now="power"] .spine-anat .v-power > :not(.v-proc):not(.v-fuse),
.spine-wrap[data-gate-now="foundation"] .spine-anat .v-foundation > :not(.v-proc):not(.v-fuse),
.spine-wrap[data-gate-now="base"] .spine-anat .v-base > :not(.v-proc):not(.v-fuse){stroke:rgba(31,40,65,.34); stroke-width:.8}

/* the floating rail sits over the last 72px on the right; on screens under 1312px wide the wrap reaches
   under it, so whatever ends a page on the right keeps clear of it ("is the button wonky?", Liane) */
@media (min-width:1081px) and (max-width:1311px){.site-cta-btns{padding-right:64px}}
@media (min-width:701px) and (max-width:1311px){.ftr-live, .ftr-bottom{padding-right:64px}}
.faq-more{justify-content:flex-start}
.ftr-breathe{margin-left:auto}
@media (max-width:700px){.ftr-breathe{margin-left:0}}
.am-clab.am-clab-hi{color:var(--ink); font-weight:700}

/* the timeline: headings share one row, so every paragraph starts on the same line even when a
   heading wraps ("The Brave Studio in Olney", Liane 2 Oct; Amy's rule) */
@supports (grid-template-rows: subgrid){
  @media (min-width:1081px){
    .tl{grid-template-rows:auto auto}
    .tl-item{display:grid; grid-row:span 2; grid-template-rows:subgrid; row-gap:0; align-content:start}
  }
}

/* ======================================================================================
   Liane's folder (5 Oct): the places she has worked with, her photos, the Spinal Flow marks
   ====================================================================================== */
/* the organisations: one calm set in her navy, five across, two on a phone (ten fills every row) */
.orgs{list-style:none; margin:36px 0 0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:1px; background:rgba(31,40,65,.12); border:1px solid rgba(31,40,65,.12); border-radius:var(--r-sm); overflow:hidden}
.orgs li{background:#fff; height:120px; display:grid; place-items:center; padding:14px}
.orgs img{max-width:100%; height:auto; opacity:.86; transition:opacity .35s var(--ease), transform .35s var(--ease)}
.orgs li:hover img{opacity:1; transform:scale(1.04)}
.orgs-plain{background:none; border:0; border-top:1px solid rgba(31,40,65,.18); border-radius:0; margin-top:14px; padding-top:10px}
.orgs-plain li{background:none; height:104px}
.orgs-home{margin-top:calc(var(--sec) * .55)}
.orgs-home > .eyebrow{margin-bottom:0}
@media (max-width:820px){.orgs{grid-template-columns:repeat(2, minmax(0,1fr))} .orgs li{height:104px}}

/* the studio deck can hold more than four: the rest wait, hidden, behind the top card */
.d2-deck.is-live .d2-card:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="2"]):not([data-pos="3"]){opacity:0; pointer-events:none}

/* the Spinal Flow marks: her practitioner logo, and the official chart beside the gateways */
.sf-badge{margin:22px 0 0}
.sf-badge img{width:118px; height:auto}
.sf-chart-row{margin-top:calc(var(--sec) * .5)}
.sf-chart-link{display:grid; grid-template-columns:120px minmax(0,1fr); gap:22px; align-items:center; max-width:560px; padding:16px; border-radius:var(--r); background:#fff; border:1px solid rgba(31,40,65,.14); color:var(--body); text-decoration:none; transition:border-color .3s var(--ease), transform .3s var(--ease)}
.sf-chart-link:hover{border-color:var(--ink); transform:translateY(-2px)}
.sf-chart-link img{width:120px; height:auto; border-radius:6px}
.sf-chart-link b{display:block; font-family:var(--serif); font-weight:400; font-size:21px; color:var(--ink); margin-bottom:6px}
.sf-chart-link svg{vertical-align:middle; margin-left:4px}
.post-fig{margin:34px auto; max-width:560px}
.post-fig img{width:100%; height:auto; border-radius:var(--r); box-shadow:0 26px 50px -36px rgba(31,40,65,.45)}

/* ======================================================================================
   Liane, 5 Oct (WhatsApp and the anxiety page notes)
   ====================================================================================== */
/* the rounded buttons from her demo, not the squared bars (an exception to our no pill rule, at her request) */
.seg{display:inline-flex; flex-wrap:wrap; gap:8px; border:0; border-radius:0; overflow:visible; background:none}
.seg .chip,.seg .pacer-chip,.seg .chip:first-child,.seg .pacer-chip:first-child{border:1px solid rgba(31,40,65,.2); border-radius:var(--r-pill); background:#fff; min-height:42px; padding:0 18px}
.seg .chip:hover,.seg .pacer-chip:hover{border-color:var(--navy); background:#fff}
.seg .chip[aria-pressed="true"],.seg .pacer-chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.on-dark .seg{background:none}
.on-dark .seg .chip,.on-dark .seg .pacer-chip,.on-dark .seg .chip:first-child,.on-dark .seg .pacer-chip:first-child{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.32); color:#fff}
.on-dark .seg .chip:hover,.on-dark .seg .pacer-chip:hover{background:rgba(255,255,255,.14); border-color:#fff}
.on-dark .seg .chip[aria-pressed="true"],.on-dark .seg .pacer-chip[aria-pressed="true"]{background:#fff; border-color:#fff; color:var(--ink)}
.faq-tabs .seg > .chip{flex:0 0 auto}
.lattice{gap:8px; background:none; border:0; border-radius:0; overflow:visible}
.lattice .chip{border:1px solid rgba(31,40,65,.2); border-radius:var(--r-pill); background:#fff; min-height:44px}
.lattice .chip:hover{background:#fff; border-color:var(--navy)}
.lattice .chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
@media (max-width:700px){.seg{width:auto} .seg .chip,.seg .pacer-chip{flex:0 0 auto}}

/* the anxiety page's count: her brand's serif, not the thin sans */
.jitter-count{font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(40px,4.4vw,56px); letter-spacing:0; color:var(--ink)}

/* copy beside a deck of photographs, on any page */
.deck-sec .d2-studio-copy .lead{margin-top:6px}

/* the three kinds of group: a photograph card each, and it turns over to show how it helps (Liane, 6 Oct).
   The homepage flip card script drives it; both faces share one grid cell, so a card is as tall as its
   fuller face, and the front rows are a subgrid so titles, text and buttons line up across the three */
.pk-cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; margin-top:34px; perspective:1800px}
.pk-card.d4-card{min-height:0; display:grid}
.pk-card .d4-card-inner{min-height:0; height:auto; display:grid}
.pk-card .d4-face{position:relative; inset:auto; grid-area:1 / 1; padding:0; border-radius:var(--r); overflow:hidden}
.pk-card .d4-front{background:#fff; border:0; box-shadow:0 22px 46px -34px rgba(31,40,65,.45); display:grid; grid-template-rows:auto auto auto 1fr auto; padding-bottom:24px}
.pk-card.pk-breathe .d4-front{border-top:5px solid var(--breathe)} .pk-card.pk-move .d4-front{border-top:5px solid var(--move)} .pk-card.pk-flow .d4-front{border-top:5px solid var(--flow)}
.pk-card .ph{margin:0 0 20px; border-radius:0; position:relative}
.pk-card .pk-n, .pk-card .d4-front h3, .pk-card .d4-front p, .pk-card .d4-front .d4-flip-btn{margin-left:24px; margin-right:24px}
.pk-card .pk-n{font-family:var(--serif); font-style:italic; font-size:22px; color:var(--ink); opacity:.6; margin-bottom:6px}
.pk-card.d4-card h3{font-size:20px; line-height:1.3; margin-bottom:10px; white-space:normal}
.pk-card .d4-front p{font-size:15.5px; line-height:1.6; color:var(--body); margin-bottom:20px}
.pk-card .d4-front .d4-flip-btn{margin-top:0; justify-self:start; align-self:end}
.pk-card .d4-turn{top:auto; bottom:16px; right:16px}
.pk-card .d4-back{display:flex; flex-direction:column; padding:30px 28px 26px}
/* her faded wave lines fill the quiet space under the points, behind the links */
.pk-card .d4-back::before{content:""; position:absolute; left:-12%; right:-12%; bottom:96px; height:34%; background:url(/assets/img/brand/waves.webp) center / 150% auto no-repeat; opacity:.5; pointer-events:none; z-index:0}
.pk-card .d4-back > *{position:relative; z-index:1}
.pk-back-k{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); opacity:.75; margin:0 0 10px}
.pk-card.d4-card .d4-back h3{font-size:clamp(22px,1.9vw,26px); line-height:1.15; margin-bottom:14px}
.pk-gains{list-style:none; margin:0 0 22px; padding:0}
.pk-gains li{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid rgba(31,40,65,.18); font-size:15px; line-height:1.55; color:var(--ink)}
.pk-gains li:first-child{border-top:1px solid rgba(31,40,65,.18)}
.pk-gains li i{flex:none; width:7px; height:7px; border-radius:50%; background:var(--ink); opacity:.55; margin-top:.6em}
.pk-card .d4-back .link{margin-top:auto; margin-bottom:14px; color:var(--ink); align-self:flex-start}
.pk-card .d4-back .d4-flip-btn.back{margin-top:0; align-self:flex-start}
.pk-foot{margin-top:30px; display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:20px 40px; align-items:start}
.pk-foot .small{margin:0; color:var(--ink); opacity:.85; max-width:70ch}
.pk-rates{margin:0; color:var(--ink)}
.pk-rates a{color:var(--ink); font-weight:500; text-decoration:underline; text-decoration-color:var(--pink); text-decoration-thickness:1.5px; text-underline-offset:3px}
html:not(.js) .pk-card .d4-card-inner{display:block} html:not(.js) .pk-card .d4-back{margin-top:14px}
@supports (grid-template-rows: subgrid){
  .pk-cards{grid-auto-rows:auto}
  .pk-card.d4-card{grid-row:span 5; grid-template-rows:subgrid; row-gap:0}
  .pk-card .d4-card-inner{grid-row:1 / -1; grid-template-rows:subgrid; row-gap:0}
  .pk-card .d4-face{grid-row:1 / -1; grid-column:1}
  .pk-card .d4-front{grid-template-rows:subgrid; row-gap:0}
}
@media (max-width:1080px){
  .pk-cards{grid-template-columns:1fr; max-width:560px}
  .pk-card.d4-card, .pk-card .d4-card-inner{grid-row:auto; grid-template-rows:none}
  .pk-card .d4-face{grid-row:1; grid-column:1}
  .pk-card .d4-front{grid-template-rows:auto auto auto 1fr auto}
  .pk-foot{grid-template-columns:1fr}
}

/* the questions page opens on the heading in its address, clear of the header */
.faq-tabs .chip[id]{scroll-margin-top:130px}

/* the other buttons beside the rounded ones go round too (Liane, 5 Oct): the sound toggle and the card flip */
.pacer-sound,.d4-flip-btn{border-radius:var(--r-pill)}
/* a link in a section's lead reads as a link, the same pink underline as the answers */
.d1-head-row .lead a{color:var(--ink); font-weight:500; text-decoration:underline; text-decoration-color:var(--pink); text-decoration-thickness:1.5px; text-underline-offset:3px}

/* the trauma page list (Liane, 5 Oct): her line "You do not have to…" says what the list is, and a plain
   dot replaces the tick, which read as a to do list ("tick: relive anything") */
.nots-lead{font-family:var(--serif); font-style:italic; font-size:clamp(22px,2.2vw,28px); line-height:1.3; color:var(--ink); margin:22px 0 6px}
.nots li i{width:8px; height:8px; background:var(--pink); margin:0 6px 0 4px}
.nots li i::after{display:none}

/* links inside a post's text (6 Oct: her breathing tool, the NHS menopause pages, booking and WhatsApp) */
.post-body p a{color:var(--ink); font-weight:500; text-decoration:underline; text-decoration-color:var(--pink); text-decoration-thickness:1.5px; text-underline-offset:3px}
.post-body p a:hover{text-decoration-color:var(--ink)}

/* the gym photo on the projects card keeps Liane's head in the frame (8 Oct: "move my head down a bit") */
.pk-card.pk-move .ph img{object-position:50% 0%}

/* each testimonial card is as wide as its quote needs (8 Oct), never wider than a phone */
.rv-card{width:min(var(--rv-w, 440px), 86vw)}

/* tidyheads_html.py (Amy, 8 Oct): a short accent phrase never breaks; a longer one holds from tablet up */
.nw{white-space:nowrap}
@media (min-width:600px){.nw-lg{white-space:nowrap}}

/* the picture code on the form's last step (ordinary hosting, 8 Oct) and a message when something needs putting right */
.cap-row{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 16px; margin:16px 0 4px}
.cap-row img{display:block; width:180px; height:56px; border-radius:var(--r-sm); border:1px solid rgba(31,40,65,.18); background:#F4F6FB}
.cap-in{display:flex; flex-direction:column; gap:6px; min-width:180px; flex:1}
.cap-in input{text-transform:uppercase; letter-spacing:.2em; max-width:220px}
.cap-new{align-self:flex-start; background:none; border:0; padding:6px 0; font:inherit; font-size:13.5px; color:var(--ink); text-decoration:underline; text-decoration-color:var(--pink); text-underline-offset:3px; cursor:pointer}
.form-err{margin:14px 0 0; padding:12px 16px; border-radius:var(--r-sm); background:#FBEDEF; color:#7A1F35; font-weight:500}
.form-err[hidden]{display:none}

/* "Hi, I'm Liane" on a phone or tablet: one column (a later two column rule above had cancelled the stack, 8 Oct) */
@media (max-width:1080px){.fn-meet-grid{grid-template-columns:1fr; gap:30px}}

/* phones: the long testimonials a size smaller, so the strip is not one tall quote and several short ones */
@media (max-width:700px){.rv-card.rv-long blockquote{font-size:15.5px; line-height:1.5}}
/* phones: the footer towns on ONE line that slides sideways (Amy, 7 Oct), the intro on its own line above,
   so no separator is ever left hanging at the end of a line */
@media (max-width:700px){
  .ftr-areas{display:block; white-space:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-mask-image:linear-gradient(to right, #000 82%, transparent); mask-image:linear-gradient(to right, #000 82%, transparent); padding-right:24px}
  .ftr-areas::-webkit-scrollbar{display:none}
  .ftr-areas span{display:block; white-space:normal; margin:0 0 6px}
  .ftr-areas a{margin:0 6px}
  .ftr-areas a:first-of-type{margin-left:0}
}

/* a credential without a logo carries a tick, so its circle reads as "checked", not as a missing picture (8 Oct) */
.cred li i{position:relative}
.cred li i::after{content:""; position:absolute; left:11px; top:7px; width:7px; height:13px; border:solid var(--ink); border-width:0 2px 2px 0; transform:rotate(45deg)}

/* "If any of these sound familiar": a label is never cut off with an ellipsis (iPad landscape, 8 Oct); it wraps */
.d1-chip{white-space:normal; padding-top:8px; padding-bottom:8px}
.d1-chip span{overflow:visible; text-overflow:clip}