/* ---------- The stage: flows as chapters without script or with reduced motion ---------- */
.stage{position:relative;background:var(--lavender);color:var(--grape)}
.opening{z-index:0;position:relative;min-height:100svh;background:var(--lavender);color:var(--grape);padding:calc(var(--bar) + 4svh) var(--m) var(--m);overflow:hidden}
.opening .intro{display:none}
h1.state{font-size:clamp(4rem,9.5vw,10.5rem);line-height:.94;letter-spacing:-.026em;font-weight:500;margin-top:0;max-width:7.4em}
h1.state span{display:block}
h1.state .b{color:var(--orchid)}
.kid{position:absolute;left:52%;bottom:0;height:min(60svh,43vw);width:auto;max-width:none;z-index:2;transform-origin:50% 100%}
.op-foot{position:absolute;left:var(--m);bottom:calc(var(--m) + 2svh);max-width:min(25em,43vw);z-index:5;--fill:var(--sun);--fill-ink:var(--grape)}
.op-foot p{margin-bottom:1.1rem;font-size:var(--s-lead);line-height:1.22;letter-spacing:-.012em}
canvas#toy{display:none}

.tstep{position:relative;min-height:90svh;padding:calc(var(--bar) + 1.5vh) var(--m) var(--m);overflow:hidden}
.tstep h2{font-size:clamp(3rem,8.6vw,9.6rem);line-height:.92;letter-spacing:-.024em;max-width:7.5em}
.tstep .say{margin-top:clamp(12px,2vh,24px);max-width:17em;font-size:var(--s-lead);line-height:1.22;letter-spacing:-.012em}
.tstep .tl{margin-top:clamp(12px,2vh,22px)}
.tstep .cut{position:absolute;bottom:0;left:20%;height:min(60svh,37vw);width:auto;max-width:none;z-index:1;transform-origin:50% 100%}
.tstep .t{position:relative;z-index:2}
.tstep.end{background:var(--lavender);color:var(--grape);--fill:var(--sun);--fill-ink:var(--grape)}
.tstep.end .kid{left:44%;z-index:1;height:min(58svh,44vw)}
.tstep.end .btn{margin-top:1.3rem}

/* pinned version */
.pin .stage{height:900vh}
.pin .frame{position:sticky;top:0;height:100svh;overflow:hidden}
.pin .opening,.pin .tstep{position:absolute;inset:0;min-height:0}
.pin .tstep{clip-path:circle(0 at 75% 80%);will-change:clip-path;visibility:hidden}
.pin .tstep .t{width:47%;padding-top:3svh}
.pin .tstep h2{font-size:clamp(3.1rem,6.2vw,7rem);max-width:none;line-height:1.02;overflow-wrap:normal}
.pin .tstep .say{max-width:22em;font-size:clamp(1.2rem,1.8vw,1.65rem);line-height:1.35;margin-top:26px}
.pin .tstep .tl{font-size:clamp(1rem,1.35vw,1.2rem);max-width:100%;line-height:1.4;margin-top:24px}
.pin .tstep .cut{left:52%;width:24%;height:auto;max-height:61svh;object-fit:contain;object-position:50% 100%;bottom:2svh}
.pin .tstep.end .kid{left:53%;height:min(57svh,39vw);bottom:0;mask-image:linear-gradient(#000 88%,transparent)}
.pin canvas#toy{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:20;pointer-events:none;mask-image:linear-gradient(#000 94%,transparent)}
.pin .fallback-star{display:none}
.kid-in{animation:kidIn 1.1s var(--spring) both .1s}
@keyframes kidIn{from{transform:translateY(46%) rotate(-4deg)}}
h1.state span{animation:lineIn .9s var(--ease) both}
h1.state .b{animation-delay:.08s}
@keyframes lineIn{from{transform:translateY(38%);opacity:0}}
.op-foot{animation:lineIn .9s var(--ease) both .25s}

/* ---------- Noticed ---------- */
.noticed{padding-top:clamp(100px,12vw,180px);background:var(--butter)}
.noticed>.head{font-size:clamp(2.4rem,5.8vw,5.5rem);max-width:13em}
.noticed>.lead{max-width:38em;margin-top:1.2rem;font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.45}
.sel{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);margin-top:clamp(30px,4vw,62px);align-items:start}
.sel>*{min-width:0}
.sel h3{font-size:clamp(1.25rem,1.8vw,1.6rem);letter-spacing:-.015em;margin-bottom:.6rem;font-weight:520;line-height:1.2}
.selection-hint{font-size:1rem;line-height:1.4;margin-bottom:24px}
.selection-count{font-weight:600;color:var(--orchid);margin-left:.4em;white-space:nowrap}
.chips{display:grid;gap:22px}
.choice-group h4{font-size:.9rem;letter-spacing:.02em;font-weight:600;margin-bottom:10px}
.choice-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.chip{appearance:none;display:flex;align-items:center;gap:10px;border:1.5px solid #2b0b3f16;background:#fffaf0;font:500 1rem/1.35 var(--face);padding:14px;border-radius:14px;cursor:pointer;text-align:left;min-height:64px;transition:background-color .15s,color .15s,border-color .15s}
.chip::before{content:'';display:grid;place-items:center;width:20px;height:20px;flex:none;border:1.5px solid #2b0b3f50;border-radius:6px;font-size:.8rem;line-height:1}
@media (hover:hover) and (pointer:fine){.chip:hover{background:#fff;border-color:var(--orchid)}}
.chip:active{opacity:.85}
.chip[aria-pressed=true]{background:var(--grape);color:var(--cloud);border-color:var(--grape)}
.chip[aria-pressed=true]::before{content:'✓';background:var(--sun);color:var(--grape);border-color:var(--sun);font-weight:600}
.ages{margin-top:clamp(22px,3vw,36px);border:0;padding:0}
.ages legend{font-size:1.2rem;letter-spacing:-.015em;font-weight:600;padding:0;margin-bottom:.8rem}
.ages label{display:inline-block;margin:0 6px 8px 0}
.ages input{position:absolute;opacity:0;width:1px;height:1px}
.ages span{display:block;background:#fffaf0;border:1.5px solid #2b0b3f16;padding:.66em 1.1em;border-radius:999px;cursor:pointer;font-weight:500;transition:background-color .15s,color .15s}
.ages input:checked+span{background:var(--grape);color:var(--sun)}
.ages input:focus-visible+span{outline:3px solid var(--grape);outline-offset:3px}
.clear{background:none;border:0;padding:0;font-weight:500;text-decoration:underline;text-underline-offset:.25em;cursor:pointer;margin-top:.8rem}
.clear[hidden]{display:none}
/* A working message preview, in the idiom of the app it opens */
.chat{background:#fff;border:1px solid #2b0b3f10;border-radius:24px;overflow:hidden;position:sticky;top:calc(var(--bar) + 24px);color:var(--grape)}
.chat-top{background:var(--grape);color:#fff;display:flex;align-items:center;gap:.7rem;padding:12px 16px}
.chat-top svg{width:42px;height:42px;background:var(--sun);border-radius:50%;padding:7px;flex:none;color:var(--grape);--smile:var(--sun)}
.chat-top b{display:block;line-height:1.1;font-weight:600}
.chat-top span{font-size:.9rem}
.chat-body{padding:22px;min-height:160px;display:flex;flex-direction:column;gap:14px;background:#F4EFF8}
.bub{max-width:100%;padding:16px;border-radius:16px;font-size:1rem;line-height:1.5;animation:bub .34s var(--spring) both}
@keyframes bub{from{transform:scale(.86) translateY(8px);opacity:0}}
.bub.in{background:#fff;border-top-left-radius:4px;align-self:flex-start}
.bub.out{background:#D9FDD3;border-top-right-radius:4px;align-self:flex-end}
.meet{align-self:stretch;background:#fff;border-radius:16px;border-top-left-radius:4px;padding:16px;width:100%;animation:bub .34s var(--spring) both}
.meet>b{display:block;margin-bottom:.35em;font-weight:600}
.meet a{display:flex;align-items:center;gap:.55em;padding:.3em 0;text-decoration:none;font-weight:500}
.meet a i{width:.85em;height:.85em;border-radius:50%;background:var(--c);flex:none}
.meet a:hover{text-decoration:underline}
.chat-send{padding:18px 18px 12px;display:flex;gap:8px}
.chat-send .wa{flex:1;min-width:0;background:#25D366;color:#072b14;min-height:54px;padding-inline:1em}
.chat-send .call{background:var(--grape);color:#fff;min-height:54px;padding:0 1.1em}
.fine{padding:0 18px 20px;font-size:.85rem;line-height:1.45;color:#5B4966}

/* ---------- First visit: accordion ---------- */
.first{padding-top:clamp(120px,15vw,260px)}
.first .top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--m);align-items:end}
.acc{display:flex;gap:0;margin-top:clamp(28px,4vw,60px);height:clamp(480px,66svh,720px);border-radius:var(--r);overflow:hidden}
.acc>article{position:relative;flex:0 0 clamp(70px,8vw,120px);transition:flex-basis .6s var(--ease);overflow:hidden;color:var(--ink)}
.acc>article.open{flex:1 1 auto}
.acc button{all:unset;cursor:pointer;position:absolute;inset:0;z-index:2}
.acc button:focus-visible{outline:3px solid currentColor;outline-offset:-8px;border-radius:18px}
.acc .sl{position:absolute;left:0;bottom:clamp(16px,2vw,28px);font-size:var(--s-lead);font-weight:500;letter-spacing:-.02em;writing-mode:vertical-rl;transform:rotate(180deg);padding-right:clamp(18px,2.4vw,38px);white-space:nowrap;transition:opacity .25s}
.acc .open .sl{opacity:0}
.acc .in{position:absolute;inset:0;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(16px,2vw,30px);padding:clamp(18px,2.4vw,36px);opacity:0;visibility:hidden;transition:opacity .25s}
.acc .open .in{opacity:1;visibility:visible;transition:opacity .45s .18s}
.acc h3{font-size:clamp(1.7rem,1.2rem + 1.7vw,2.9rem);line-height:1.02}
.acc p{margin-top:.9rem;max-width:22em}
.acc img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r) - 8px)}

/* ---------- Prints dropped on the headline ---------- */
.prints{height:210svh;position:relative;background:var(--coral);color:var(--grape);z-index:2}
.prints .smile-edge{z-index:4}
.prints-in{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:var(--m);text-align:center}
.prints h2{font-size:clamp(3.4rem,11.4vw,14rem);line-height:.84;letter-spacing:-.028em}
.prints .p{position:absolute;width:clamp(150px,17vw,280px);background:var(--cloud);padding:8px;left:50%;top:50%;margin:0;will-change:transform;transition:rotate .25s}
.prints .p img{width:100%;aspect-ratio:3/4;object-fit:cover}
.prints .p:hover{z-index:5}
.prints .note{display:none}
.prints .all{position:absolute;left:50%;transform:translateX(-50%);bottom:var(--m);--fill:var(--grape);--fill-ink:var(--sun)}

/* ---------- The picture that opens ---------- */
.opens{height:260svh;position:relative;background:var(--sky);color:var(--grape)}
.opens-in{position:sticky;top:0;height:100svh;overflow:hidden}
.opens h2{position:absolute;left:var(--m);top:calc(var(--bar) + 2vh);font-size:var(--s-head);max-width:9em;z-index:1}
.opens .fr{position:absolute;inset:0;z-index:2;will-change:clip-path;clip-path:inset(46% 8% 8% 40% round 32px)}
.opens video,.opens .fr img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.opens .cap{position:absolute;left:var(--m);bottom:var(--m);z-index:3;max-width:27em;background:var(--cloud);color:var(--grape);padding:clamp(16px,2vw,28px);border-radius:var(--r);opacity:0;--fill:var(--grape);--fill-ink:var(--sun)}
.opens .cap b{display:block;font-size:clamp(1.1rem,1rem + .5vw,1.4rem);line-height:1.15;letter-spacing:-.02em;font-weight:600;margin-bottom:.4em}

/* ---------- Team ---------- */
.team{padding-top:clamp(110px,14vw,240px);min-height:0}
.team .more{margin-top:1.6rem}

/* ---------- Close: the page smiles back ---------- */
.close{min-height:100svh;padding-top:calc(var(--bar) + var(--m));display:flex;flex-direction:column;justify-content:space-between;gap:var(--m);overflow:hidden;--fill:var(--sun);--fill-ink:var(--grape)}
.close h2{font-size:clamp(3.3rem,12.6vw,14.5rem);line-height:.86;letter-spacing:-.028em;color:var(--sun)}
.face{position:absolute;right:var(--m);bottom:var(--m);width:min(44vw,76svh);z-index:0;color:var(--orchid)}
.face .eye{transform-box:fill-box;transform-origin:50% 50%}
.close .row{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:27em}
.close .row p{font-size:var(--s-lead);line-height:1.22;margin-bottom:.4rem}

@media (min-width:801px) and (max-width:1100px){
  .kid{height:min(50svh,56vw);left:30%}
  .tstep .cut{left:4%;height:min(46svh,50vw)}
  .tstep.end .kid{left:26%;height:min(50svh,56vw)}
}
@media (max-width:800px){
  h1.state{font-size:clamp(3rem,15.8vw,6rem);margin-top:8px;line-height:.96}
  .op-foot{right:var(--m);max-width:none}
  .close{padding-bottom:calc(var(--m) + 66px)}
  .close h2{font-size:16.6vw}
  .face{position:static;width:70vw;align-self:flex-end;margin:-8px 0}
}
html:not(.pin) .opening{min-height:max(740px,100svh)}
html:not(.pin) .opening .intro{display:block;position:relative;z-index:3;font-size:1.1rem;line-height:1.35;max-width:23em;margin-top:18px}
html:not(.pin) .op-foot p{display:none}
html:not(.pin) .opening>.kid{height:clamp(280px,50svh,480px);left:auto;right:6vw;bottom:0}
html:not(.pin) .opening>canvas#toy{display:block;position:absolute;inset:100px 0 0;width:100%;height:calc(100% - 100px);z-index:2;pointer-events:none}
html:not(.pin) #therapies{top:0!important}
html:not(.pin) .tstep{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:24px;min-height:0;padding:clamp(48px,8vw,96px) var(--m) 0}
html:not(.pin) .tstep .t{padding-bottom:36px;min-width:0}
html:not(.pin) .tstep h2{font-size:clamp(2.25rem,5.8vw,6rem);overflow-wrap:anywhere}
html:not(.pin) .tstep .say{font-size:var(--s-lead)}
html:not(.pin) .tstep .tl{display:inline-flex;align-items:center;min-height:44px;line-height:1.4}
html:not(.pin) .tstep .cut,html:not(.pin) .tstep.end .kid{position:static;left:auto;right:auto;bottom:auto;width:100%;height:auto;max-width:100%;max-height:560px;object-fit:contain;object-position:50% 100%;align-self:end;justify-self:center}
html:not(.pin) .prints,html:not(.pin) .opens{height:auto}
html:not(.pin) .prints-in{position:relative;height:auto;min-height:0;padding:clamp(72px,12vw,150px) var(--m) 48px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:center}
html:not(.pin) .prints h2{grid-column:1/-1;font-size:clamp(2.8rem,11vw,8rem);margin-bottom:18px}
html:not(.pin) .prints .p:nth-of-type(n){position:static;width:auto;transform:none;rotate:none;min-width:0;will-change:auto}
html:not(.pin) .prints .p:nth-of-type(odd){rotate:-3deg}
html:not(.pin) .prints .p:nth-of-type(even){rotate:3deg}
html:not(.pin) .prints .p img{aspect-ratio:4/3}
html:not(.pin) .prints .all{position:static;transform:none;grid-column:1/-1;justify-self:center;margin-top:18px}
html:not(.pin) .opens-in{position:relative;height:auto;padding:48px var(--m);display:grid;gap:24px}
html:not(.pin) .opens h2{display:block;position:static;max-width:12em;font-size:var(--s-head)}
html:not(.pin) .opens .fr{position:relative;inset:auto;clip-path:none;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden}
html:not(.pin) .opens .cap{position:static;opacity:1;max-width:none;justify-self:start}
@media (max-width:1040px){
  .sel,.first .top{grid-template-columns:minmax(0,1fr)}
  .chat{position:static}
  .acc{flex-direction:column;height:auto}
  .acc>article,.acc>article.open{flex:none;height:auto;transition:none}
  .acc button{position:relative;display:block;box-sizing:border-box;min-height:72px;width:100%;padding:20px 54px 20px 20px;font:600 var(--s-lead)/1.3 var(--face);text-align:left}
  .acc button::before{content:attr(aria-label)}
  .acc button::after{content:'+';position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:1.8rem}
  .acc .open button::after{content:'−'}
  .acc .sl{display:none}
  .acc .in{position:static;display:none;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;padding:0 20px 20px;transition:none}
  .acc .open .in{display:grid;transition:none}
  .acc .in h3{display:none}
  .acc p{margin:0;max-width:none}
  .acc img{height:auto;aspect-ratio:16/10;max-height:360px;object-fit:cover}
  .close{min-height:0}
}
@media (max-width:600px){
  .choice-options{grid-template-columns:minmax(0,1fr)}
  .chat-body{padding:18px;min-height:0}
  html:not(.pin) .tstep{grid-template-columns:minmax(0,1fr);gap:0;padding-top:44px}
  html:not(.pin) .tstep .t{padding-bottom:20px}
  html:not(.pin) .tstep h2{font-size:clamp(2.1rem,9.8vw,3.5rem);max-width:12em}
  html:not(.pin) .tstep .say{font-size:1.15rem}
  html:not(.pin) .tstep .cut,html:not(.pin) .tstep.end .kid{width:88%;max-height:340px}
  html:not(.pin) .tstep.end .kid{max-height:300px}
  html:not(.pin) .opening .intro{max-width:20em}
  .chat-send{flex-wrap:wrap}
  .chat-send .wa{flex:1 1 180px}
  .chat-send .call{flex:0 0 54px;padding-inline:0}
  .chip{max-width:100%}
  .ages{min-width:0}
  .ages span{min-height:44px}
  .close .row,.close .row .btn{width:100%;max-width:none}
}


/* =========================================================
   Refinement pass: depth planes, masked type, quieter colour
   ========================================================= */
/* Hero: headline lines rise out of a mask, a sun disc sits behind the child */
.opening{background:radial-gradient(120% 90% at 78% 110%,#fff6e4 0,transparent 55%),var(--lavender)}
.hero-title .eyebrow{color:var(--orchid);margin-bottom:clamp(14px,2vh,26px)}
h1.state{font-size:clamp(4rem,10.6vw,12rem);line-height:.9;letter-spacing:-.032em;font-weight:500;max-width:none}
h1.state span{animation:none}
h1.state>span{display:block;overflow:hidden;padding:.04em .08em .14em 0;margin-bottom:-.14em}
h1.state .i{display:block;animation:rise 1.25s cubic-bezier(.16,1,.3,1) both .15s}
h1.state .b .i{animation-delay:.27s}
h1.state .b{color:var(--orchid)}
h1.state em{font-weight:420;letter-spacing:-.02em}
@keyframes rise{from{transform:translateY(108%) rotate(2.5deg)}}
.hero-title .eyebrow{animation:fadeUp .9s var(--ease) both .05s}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}}
.op-foot{animation:fadeUp 1s var(--ease) both .55s}
.op-foot p{font-size:clamp(1.1rem,.95rem + .5vw,1.4rem);line-height:1.35;max-width:21em;color:var(--ink-soft)}
.op-foot .btn{--fill:var(--grape);--fill-ink:var(--cloud)}
.sunhalo{position:absolute;z-index:1;left:49%;bottom:-26svh;width:min(48vw,82svh);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 42%,#FFE08F 0,var(--sun) 58%,#FFC94a 100%);box-shadow:0 0 0 clamp(18px,2.4vw,40px) #ffd46533,0 0 0 clamp(40px,5vw,84px) #ffd4651a;transform-origin:50% 60%;animation:haloIn 1.4s cubic-bezier(.16,1,.3,1) both;pointer-events:none}
@keyframes haloIn{from{transform:scale(.4);opacity:0}}
.kid-in{animation:kidIn 1.3s cubic-bezier(.22,1.2,.36,1) both .2s}
@keyframes kidIn{from{transform:translateY(40%) rotate(-3deg);opacity:0}}
.kid{filter:drop-shadow(0 30px 40px #24093a2e)}

/* Therapy chapters: a light disc behind each cut-out, text in three beats */
.tstep .halo{position:absolute;z-index:0;left:50%;bottom:-18svh;width:min(42vw,76svh);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 40%,#ffffffa6 0,#ffffff59 52%,#ffffff1f 70%,transparent 71%);pointer-events:none;transform-origin:50% 70%}
.tstep .cut{filter:drop-shadow(0 34px 38px #24093a30)}
.pin .tstep h2{font-weight:480;letter-spacing:-.025em;line-height:.98}
.pin .tstep .t>*{will-change:transform,opacity}
.pin .tstep .say{color:var(--ink-soft)}
.tstep.end .btn{--fill:var(--grape);--fill-ink:var(--cloud)}
html:not(.pin) .tstep .halo{display:none}
html:not(.pin) .sunhalo{left:auto;right:-6vw;bottom:-14vw;width:min(78vw,520px)}

/* Selector */
.noticed>.head{font-weight:480}
.chip{background:#fffdf8;border-color:#24093a14;box-shadow:0 1px 0 #24093a08;font-family:var(--face)}
.chip[aria-pressed=true]{background:var(--grape);color:var(--cloud)}
.chip[aria-pressed=true]::before{background:var(--sun-x);border-color:var(--sun-x)}
.ages span{background:#fffdf8}
.chat{box-shadow:0 40px 80px -40px #24093a55,0 2px 0 #24093a08}
.chat-top{background:var(--grape)}
.selection-count{color:var(--orchid)}

/* Prints read as real photographs */
.prints .p{padding:10px 10px 12px;border-radius:6px;box-shadow:0 2px 0 #24093a10,0 40px 60px -30px #24093a70}
.prints .p img{border-radius:2px}
.prints h2{font-weight:460;letter-spacing:-.02em}
.prints h2 em{color:var(--orchid)}
.opens h2 em{color:var(--orchid)}
.opens .cap{box-shadow:0 30px 60px -30px #24093a80}

/* Team: monograms instead of four identical stars */
.team{background:var(--mint)}
.team .tile{background:var(--cloud)!important;box-shadow:0 1px 0 #24093a0d,0 30px 50px -36px #24093a66;grid-template-rows:auto auto;gap:clamp(36px,6vw,90px);transition:transform .5s var(--spring)}
@media (hover:hover) and (pointer:fine){.team .tile:hover{box-shadow:0 1px 0 #24093a0d,0 40px 60px -34px #24093a80}}
.mono{display:grid;place-items:center;width:clamp(64px,7vw,108px);aspect-ratio:1;border-radius:50%;font:italic 460 clamp(2.2rem,3.6vw,3.8rem)/1 var(--display);color:var(--grape);padding-bottom:.08em}
.tile:nth-child(4n+1) .mono{background:var(--pink-x)}
.tile:nth-child(4n+2) .mono{background:var(--sky-x)}
.tile:nth-child(4n+3) .mono{background:var(--coral-x)}
.tile:nth-child(4n+4) .mono{background:var(--sun-x)}
.team .tile b{font-weight:520}
.team .tile span{color:var(--ink-soft)}

/* Parents: cards that stack as you read */
.words{background:var(--grape);color:var(--cloud);padding:calc(var(--m) * 3) var(--m) calc(var(--m) * 2)}
.words>.head{color:var(--cloud);max-width:11em;margin-bottom:clamp(36px,6vw,90px);font-weight:480}
.words>.head em{color:var(--sun)}
.qstack{display:grid;gap:clamp(24px,8vh,90px)}
.qcard{position:sticky;top:calc(var(--bar) + 3vh + var(--i) * 20px);margin:0;min-height:min(58svh,560px);border-radius:var(--r);padding:clamp(24px,4vw,64px);display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto;column-gap:clamp(16px,3vw,48px);overflow:hidden;color:var(--grape);transform-origin:50% 0;box-shadow:0 -20px 50px -30px #00000066}
.qm{font:italic 500 clamp(7rem,14vw,15rem)/.7 var(--display);color:var(--orchid);grid-row:1/3}
.qcard blockquote{align-self:start;position:relative;z-index:1}
.qcard blockquote p{font:500 clamp(1.7rem,1.1rem + 2.3vw,3.5rem)/1.1 var(--display);letter-spacing:-.018em;max-width:17em}
.qcard figcaption{position:relative;z-index:1;align-self:end;margin-top:2rem}
.qcard figcaption b{display:block;font-size:var(--s-lead);font-weight:650;letter-spacing:-.01em}
.qcard figcaption span{color:var(--ink-soft)}
.qtoy{position:absolute;right:clamp(16px,3vw,48px);bottom:0;height:62%;width:auto;max-width:34%;object-fit:contain;object-position:100% 100%;pointer-events:none;filter:drop-shadow(0 20px 30px #24093a33)}
.qcard:nth-child(2) .qtoy{height:78%}
.qcard:nth-child(1) .qtoy,.qcard:nth-child(3) .qtoy{bottom:clamp(16px,3vw,40px)}

/* Close */
.close h2{font-weight:460;letter-spacing:-.02em}
.close h2 em{font-weight:420}
.face{color:#7d1d9c}
.close .row p{color:#fff8f1cc}

@media (max-width:800px){
  h1.state{font-size:clamp(3rem,15vw,6rem)}
  .qcard{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;min-height:0;padding:28px 22px 30px;top:calc(var(--bar) + 12px + var(--i) * 12px)}
  .qm{grid-row:auto;font-size:6.5rem;line-height:.55;margin-top:14px}
  .qcard blockquote p{font-size:clamp(1.5rem,6.4vw,2.1rem)}
  .qtoy{height:120px;max-width:30%;bottom:18px!important}
  .qcard figcaption{padding-right:32%}
  .words{padding-bottom:calc(var(--m) * 2 + 70px)}
}
@media (prefers-reduced-motion:reduce){
  .kid-in,h1.state .i,.op-foot,.sunhalo,.hero-title .eyebrow{animation:none}
  .qcard{position:relative;top:auto}
}

/* =========================================================
   Smile friends: one character per therapy, one shared face rig
   ========================================================= */
.pal{display:inline-block;position:relative;line-height:0;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pal svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 16px 14px #24093a30)}
.pal .body{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 3.8s ease-in-out infinite}
.pal[data-k=ot] .body{animation-delay:-.7s}.pal[data-k=physio] .body{animation-delay:-1.5s}.pal[data-k=behaviour] .body{animation-delay:-2.2s}.pal[data-k=edu] .body{animation-delay:-3s}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025,.975)}}
.pal .eye{transform-box:fill-box;transform-origin:50% 50%;transition:transform .09s ease-out}
.pal.blink .eye{transform:scaleY(.12)}
.pal.laugh .eye{transform:scaleY(.62) translateY(-2px)}
.pal .m1{opacity:0}
.pal.laugh .m0{opacity:0}.pal.laugh .m1{opacity:1}
.pal.hop .body{animation:squish .85s cubic-bezier(.3,1.4,.5,1)}
@keyframes squish{0%{transform:none}14%{transform:scale(1.16,.82)}42%{transform:translateY(-24%) scale(.9,1.12) rotate(-4deg)}68%{transform:translateY(0) scale(1.1,.9)}84%{transform:scale(.97,1.03)}100%{transform:none}}
.pal.held{cursor:grabbing;z-index:6}
.pal.held svg{filter:drop-shadow(0 34px 24px #24093a40)}

/* in the selector: a row of five that wake up as you choose */
.pals{display:flex;flex-wrap:wrap;gap:clamp(10px,1.8vw,30px);align-items:flex-end;margin:clamp(30px,4vw,56px) 0 clamp(34px,4vw,48px)}
.pal-row{width:clamp(66px,7.4vw,116px);transition:opacity .4s,filter .4s}
.pal-row.on .body{animation:bob 1.3s ease-in-out infinite}
.pal-row.on.hop .body{animation:squish .85s cubic-bezier(.3,1.4,.5,1)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9%) rotate(2deg)}}
.pal-tag{position:absolute;left:50%;top:calc(100% + 10px);translate:-50% 6px;white-space:nowrap;font:600 .78rem/1 var(--face);letter-spacing:.01em;background:var(--grape);color:var(--cloud);padding:.5em .8em;border-radius:99px;opacity:0;transition:opacity .25s,translate .35s var(--spring);pointer-events:none}
.pal-row.on .pal-tag{opacity:1;translate:-50% 0;background:var(--pc);color:var(--grape)}
@media (hover:hover) and (pointer:fine){.pal-row:hover .pal-tag{opacity:1;translate:-50% 0}}

/* in each therapy chapter: its friend pops up from the floor */
.pal-step{position:absolute;z-index:3;left:var(--m);bottom:5svh;width:clamp(130px,12.5vw,220px);transform-origin:50% 100%}
html:not(.pin) .pal-step{left:auto;right:var(--m);top:clamp(40px,7vw,90px);bottom:auto;width:clamp(64px,13vw,110px)}

/* =========================================================
   The close: a Villiappally morning. The sun rises and smiles.
   ========================================================= */
.close{--glow:0;min-height:max(100svh,720px);background:linear-gradient(180deg,#24093A 0%,#330c4d 34%,#5e1780 58%,#a12a8e 78%,#ef7a6c 92%,#ffb36b 100%);justify-content:flex-start;gap:clamp(18px,3vh,32px)}
.close{background-color:var(--grape)}
.palm.pm{display:none}
@media (max-width:800px){.palm.pd{display:none}.palm.pm{display:inline}}
.close::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 72% 78%,#ffcf7a 0,#ff9a6233 40%,transparent 70%);opacity:var(--glow);pointer-events:none}
.close h2,.close .row{z-index:2}
.dawn{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.dawn svg{position:absolute;display:block}
.dawn .stars{top:0;left:0;width:100%;height:50%;fill:#FFF8F1}
.dawn .stars circle{animation:twinkle 3.2s ease-in-out infinite;animation-delay:calc(var(--d) * -1)}
@keyframes twinkle{0%,100%{opacity:.9}50%{opacity:.25}}
.sun{right:9vw;bottom:19svh;width:min(32vw,54svh);height:auto}
.hill{left:0;bottom:-1px;width:100%;height:clamp(240px,44svh,520px)}
.palm .crown{transform-box:view-box;transform-origin:0 0;animation:sway 5.5s ease-in-out infinite;animation-delay:calc(var(--d) * -1)}
@keyframes sway{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}
.close .row p{color:#fff8f1d9}
.close .btn.alt{color:var(--cloud)}
@media (max-width:800px){
  .close{min-height:max(100svh,640px)}
  .sun{right:4vw;bottom:15svh;width:58vw}
  .hill{height:30svh}
}
@media (prefers-reduced-motion:reduce){
  .pal .body,.pal-row.on .body,.dawn .stars circle,.palm .crown{animation:none}
  .pal-row.on .pal-tag{opacity:1}
}
/* sticker edge, echoing the logo's outlined bubble letters */
.pal .pb{stroke:#fff;stroke-width:9;stroke-linejoin:round;paint-order:stroke}
@media (max-width:1040px){html:not(.pin) .pal-step{top:auto;bottom:18px;right:var(--m);width:clamp(70px,18vw,110px)}}

/* =========================================================
   v4: modern hero and chapters
   ========================================================= */
.opening{background:radial-gradient(70% 60% at 85% 100%,#ffe9b3 0,transparent 60%),radial-gradient(55% 55% at 0% 0%,#fffaf3 0,transparent 70%),var(--lavender)}
.hero-title .badge{display:inline-flex;align-items:center;gap:.6em;padding:.55em 1em .55em .8em;border-radius:99px;background:#fff8f1;box-shadow:0 0 0 1px #24093a12;text-transform:none;letter-spacing:-.005em;font-size:.92rem;font-weight:560;color:var(--grape);margin-bottom:clamp(18px,3vh,30px)}
.badge i{width:9px;height:9px;border-radius:50%;background:var(--mint-x);box-shadow:0 0 0 4px #17c98d33;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px #17c98d00}}
h1.state{font-size:clamp(3.6rem,8.4vw,9.4rem);font-weight:780;letter-spacing:-.03em;line-height:.86}
h1.state em{font-weight:780;letter-spacing:-.03em;color:var(--orchid)}
h1.state>span{padding:.02em .04em .1em 0;margin-bottom:-.1em}
.op-foot{position:relative;left:auto;bottom:auto;margin-top:clamp(22px,4vh,44px);max-width:min(36em,46vw)}
.op-foot p{font-size:clamp(1.1rem,.95rem + .45vw,1.35rem);line-height:1.4;max-width:24em;color:var(--ink-soft);margin-bottom:1.3rem}
.op-acts{display:flex;flex-wrap:wrap;gap:10px}
.btn.ghost{background:#fff8f1;color:var(--grape);box-shadow:0 0 0 1px #24093a1a}
.btn.ghost svg{color:#1da851}
.hero-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(20px,3.4vh,34px);max-width:34em}
.hero-pills a{display:inline-flex;align-items:center;gap:.5em;padding:.5em .9em;border-radius:99px;background:#ffffff8c;box-shadow:0 0 0 1px #24093a10;font-size:.9rem;font-weight:560;text-decoration:none;transition:background-color .2s,transform .3s var(--spring)}
.hero-pills i{width:8px;height:8px;border-radius:50%;background:var(--c)}


/* arches replace the flat discs: a doorway frame each person steps out of */
.sunhalo{left:calc(52% + min(60svh,43vw) * .356);margin-left:calc(min(31vw,50svh) / -2);bottom:0;width:min(31vw,50svh);height:min(66svh,50vw);aspect-ratio:auto;border-radius:999px 999px 0 0;background:linear-gradient(180deg,#ffe6a0 0%,var(--sun) 55%,#ffc64a 100%);box-shadow:0 2px 0 #ffffff99 inset,0 40px 80px -40px #b8860b66;transform-origin:50% 100%}
@keyframes haloIn{from{transform:scaleY(.2);opacity:0}}
html:not(.pin) .sunhalo{left:auto;right:4vw;margin-left:0;width:min(62vw,360px);height:min(84vw,460px)}
.pin .tstep .t{width:40%}
.pin .tstep h2{font-size:clamp(3rem,5.6vw,6.6rem);font-weight:760;letter-spacing:-.028em;line-height:.9}
.pin .tstep .say{font-size:clamp(1.15rem,1.55vw,1.5rem);max-width:19em}
.pin .tstep .cut{left:37%;width:31%;max-height:68svh;bottom:0}
.tstep .halo{left:52.5%;bottom:0;width:30%;margin-left:-15%;height:min(76svh,58vw);aspect-ratio:auto;border-radius:999px 999px 0 0;background:linear-gradient(180deg,#ffffff99 0%,#ffffff40 60%,#ffffff14 100%);box-shadow:0 2px 0 #ffffffb3 inset;transform-origin:50% 100%}
.pin .tstep.end .kid{left:40%}
@media (min-width:1041px) and (max-width:1280px){.pin .tstep .cut{left:36%;width:33%}}

/* chapter accents no longer italic */
.mono{font-style:normal;font-weight:760;letter-spacing:-.022em}
.qm{font-style:normal;font-weight:800}
.qcard blockquote p{font-weight:600;letter-spacing:-.02em;line-height:1.08}
.close h2{font-weight:780;letter-spacing:-.03em;line-height:.88}
.close h2 em{color:var(--cloud)}
.prints h2{font-weight:780;letter-spacing:-.03em}
@media (max-width:800px){
  h1.state{font-size:clamp(3rem,14.5vw,5.6rem)}
  .op-foot{max-width:none}
  .hero-pills{display:none}
}

/* v4 fixes: team monograms beat the generic tile span rule; phone hero spacing */
.team .tile .mono{display:grid;place-items:center;margin:0;font-size:clamp(2rem,3.4vw,3.4rem);line-height:1;font-weight:760;color:var(--grape);letter-spacing:-.022em}
@media (max-width:800px){
  .op-foot{right:auto;left:auto}
  .op-acts .btn{flex:1 1 auto}
}
html:not(.pin) .opening>canvas#toy{inset:auto 0 0;top:auto;height:56%}

/* =========================================================
   v5 hero: hand-made layer. Sticker tag, drawn swoosh, doodles,
   paper-cut arch outline, a friend on the arch, the gang below the CTA
   ========================================================= */
.opening{--kh:min(60svh,43vw);--kx:calc(52% + var(--kh) * .356);--aw:min(31vw,50svh);--ah:min(66svh,50vw)}
html:not(.pin) .opening{--kh:clamp(280px,50svh,480px);--kx:calc(100% - 6vw - var(--kh) * .356);--aw:calc(var(--kh) * .86);--ah:calc(var(--kh) * .98)}
html .opening>.sunhalo{left:var(--kx);right:auto;margin-left:calc(var(--aw) / -2);width:var(--aw);height:var(--ah);bottom:0}
.arch-line{position:absolute;z-index:0;left:var(--kx);bottom:0;width:var(--aw);height:calc(var(--ah) + 26px);margin-left:calc(var(--aw) / -2 - 26px);border:2.5px solid var(--grape);border-bottom:0;border-radius:999px 999px 0 0;opacity:.85;animation:fadeUp 1.2s var(--ease) both .5s;pointer-events:none}
.hero-title{--h1s:clamp(3.6rem,8.2vw,9.2rem)}
h1.state{font-size:var(--h1s)}
.tag{display:inline-flex;align-items:center;gap:.5em;background:var(--sun-x);color:var(--grape);font-weight:680;font-size:clamp(.88rem,.8rem + .2vw,1rem);letter-spacing:-.01em;padding:.5em 1em .5em .75em;border-radius:12px;box-shadow:3px 3px 0 var(--grape);margin-bottom:clamp(18px,3vh,30px);transform:rotate(-2.5deg);transform-origin:0 50%;animation:tagIn .9s cubic-bezier(.3,1.5,.5,1) both .1s}
.tag svg{width:1.2em;height:1.2em;color:var(--orchid)}
@keyframes tagIn{from{transform:rotate(-14deg) scale(.6);opacity:0}}
.swoosh{display:block;font-size:var(--h1s);width:2.45em;height:.3em;margin:-.15em 0 0 1.8em;overflow:visible;fill:none}
.swoosh path{stroke:var(--sun-x);stroke-width:8px;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s cubic-bezier(.6,0,.2,1) forwards 1s}
@keyframes draw{to{stroke-dashoffset:0}}

.doodles{position:absolute;z-index:3;left:var(--kx);bottom:0;width:calc(var(--kh) * 1.25);height:calc(var(--kh) * 1.18);margin-left:calc(var(--kh) * -.625);pointer-events:none}
.doodles .d{position:absolute;overflow:visible;animation:pop .8s cubic-bezier(.3,1.6,.5,1) both}
.doodles .sp1{left:10%;top:9%;width:34px;fill:var(--orchid);animation-delay:1.1s}
.doodles .sp2{left:84%;top:3%;width:26px;fill:var(--sun-x);animation-delay:1.25s}
.doodles .sp3{left:91%;top:28%;width:17px;fill:var(--grape);animation-delay:1.4s}
.doodles .sp4{left:2%;top:33%;width:20px;fill:var(--coral-x);animation-delay:1.55s}
.doodles .sp1 path,.doodles .sp2 path{transform-box:fill-box;transform-origin:50% 50%;animation:twinkle2 3s ease-in-out infinite 2s}
.doodles .sp2 path{animation-delay:2.6s}
@keyframes twinkle2{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.7) rotate(25deg)}}
@keyframes pop{from{transform:scale(0) rotate(-40deg);opacity:0}}
.doodles .sq{left:58%;top:-2%;width:96px;fill:none;animation:none}
.doodles .lp{left:-20%;top:4%;width:70px;fill:none;animation:none}
.doodles .sq path,.doodles .lp path{stroke-width:3.5px;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.3s cubic-bezier(.6,0,.2,1) forwards 1.3s}
.doodles .sq path{stroke:var(--orchid)}
.doodles .lp path{stroke:var(--grape)}
.doodles .dots{left:96%;top:52%;width:34px;fill:var(--pink-x);animation-delay:1.7s}
.pal-hero{position:absolute;z-index:4;left:calc(var(--kx) - var(--aw) / 2 - 48px);bottom:5%;width:clamp(84px,7.4vw,124px);rotate:-9deg;animation:fadeUp 1s var(--ease) both 1.5s}

.hero-friends{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);margin-top:clamp(26px,4.6vh,50px)}
.hero-friends p{font-size:.95rem;line-height:1.3;max-width:10.5em;color:var(--ink-soft);font-weight:520}
.hero-friends ul{display:flex;gap:clamp(4px,.6vw,10px)}
.hf a{display:block;position:relative;width:clamp(50px,4.4vw,66px);text-decoration:none;border-radius:16px}
.hf a:focus-visible{outline-offset:4px}
.hf .lbl{position:absolute;left:50%;bottom:calc(100% + 8px);translate:-50% 6px;white-space:nowrap;background:var(--grape);color:var(--cloud);font-size:.8rem;font-weight:620;padding:.45em .75em;border-radius:99px;opacity:0;pointer-events:none;transition:opacity .2s,translate .3s var(--spring)}
.hf a:hover .lbl,.hf a:focus-visible .lbl{opacity:1;translate:-50% 0}
.hf .pal svg{filter:drop-shadow(0 8px 8px #24093a26)}
.hf:nth-child(2) .pal{rotate:6deg}.hf:nth-child(4) .pal{rotate:-6deg}

/* One plan: the jumping boy, his shadow on the floor */
.pin .tstep.end .kid.jump{left:41%;height:min(62svh,46vw);bottom:6svh;mask-image:none;-webkit-mask-image:none;filter:drop-shadow(0 30px 30px #24093a26)}
.pin .tstep.end::after{content:"";position:absolute;left:calc(41% + min(62svh,46vw) * .1);bottom:2.4svh;width:calc(min(62svh,46vw) * .34);height:18px;border-radius:50%;background:radial-gradient(closest-side,#24093a33,transparent);z-index:0}
.qpal{width:clamp(110px,12vw,190px)}
.qcard .qpal{height:auto}
.qcard .qpal svg{filter:drop-shadow(0 18px 18px #24093a33)}

@media (prefers-reduced-motion:reduce){
  .tag,.arch-line,.doodles .d,.pal-hero,.doodles .sp1 path,.doodles .sp2 path{animation:none}
  .swoosh path,.doodles .sq path,.doodles .lp path{animation:none;stroke-dashoffset:0}
}

/* v5 phone hero: text first, then the child in her arch as her own block */
.qcard .qpal{position:absolute}
html:not(.pin) .opening{--kx:50%;--kh:clamp(300px,52svh,460px);--aw:calc(var(--kh) * .74);--ah:calc(var(--kh) * .92);min-height:0;padding-bottom:calc(var(--kh) + 8px)}
html:not(.pin) .opening>.kid{right:auto;left:50%;margin-left:calc(var(--kh) * -.356);height:var(--kh)}
html:not(.pin) .opening>canvas#toy{inset:auto 0 0;height:calc(var(--kh) + 30px)}
html:not(.pin) .hero-friends p{display:block}
html:not(.pin) .pal-hero{left:calc(var(--kx) - var(--aw) / 2 - 14px);width:clamp(60px,16vw,90px);bottom:4%}
@media (max-width:800px){
  .hero-friends{flex-wrap:wrap;gap:10px 14px;margin-top:24px}
  .hero-friends p{max-width:none;flex:1 1 100%;font-size:.9rem}
  .hf a{width:clamp(48px,13vw,60px)}
  .hf .lbl{display:none}
  .op-acts .btn{min-height:52px}
  .doodles .lp{display:none}
  .doodles .sq{display:none}
  .opening .intro{margin-top:14px}
  .tag{font-size:.84rem}
}
.qcard .qtoy.qpal{height:auto!important;bottom:clamp(16px,3vw,40px)}
@media (max-width:800px){
  .pals{gap:8px;flex-wrap:nowrap}
  .pal-row{width:clamp(50px,14vw,66px)}
  .pal-tag{font-size:.7rem}
  .qcard .qtoy.qpal{width:84px;bottom:16px!important}
}
/* the hero child always stands in her arch, whatever the width */
.pin .opening>.kid{left:52%;height:var(--kh)}
.doodles .lp{display:none}
@media (min-width:1041px) and (max-width:1240px){.pin .opening{--kh:min(56svh,40vw)}.pin .opening>.kid,.pin .opening{--kx:calc(54% + var(--kh) * .356)}.pin .opening>.kid{left:54%}}
/* hero accent: warm tangerine instead of violet, to sit with the cream and the yellow swoosh */
h1.state .b,h1.state em{color:#E44D26}

/* =========================================================
   First visit: three sherbet step cards instead of a violet slab
   ========================================================= */
.acc{gap:clamp(8px,.9vw,14px);border-radius:0;overflow:visible;height:clamp(460px,62svh,620px)}
.acc>article{border-radius:var(--r);flex:0 0 clamp(92px,8.2vw,124px);box-shadow:0 1px 0 #ffffff80 inset,0 24px 50px -36px #24093a80;transition:flex-basis .7s cubic-bezier(.65,0,.25,1),box-shadow .3s}
.acc>article.open{flex:1 1 auto}
@media (hover:hover) and (pointer:fine){.acc>article:not(.open):hover{box-shadow:0 1px 0 #ffffff80 inset,0 30px 60px -30px #24093a99}}
.acc button:focus-visible{border-radius:var(--r)}
.acc .sl{inset:0;writing-mode:horizontal-tb;transform:none;padding:clamp(18px,2vw,28px) 0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;font-size:inherit;pointer-events:none}
.acc .sl b{font:780 clamp(2.4rem,3.4vw,3.6rem)/1 var(--display);letter-spacing:-.03em}
.acc .pal-acc{width:68%;max-width:84px;pointer-events:none}
.acc .in{grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:clamp(18px,2.4vw,40px);padding:clamp(12px,1.2vw,18px) clamp(12px,1.2vw,18px) clamp(12px,1.2vw,18px) clamp(24px,3vw,48px)}
.acc .tx{display:flex;flex-direction:column;justify-content:space-between;padding-block:clamp(12px,1.6vw,26px);min-width:0}
.acc .num{display:grid;place-items:center;width:clamp(52px,4.4vw,68px);aspect-ratio:1;border-radius:50%;background:var(--grape);color:var(--cloud);font:760 clamp(1.4rem,1.9vw,1.9rem)/1 var(--display)}
.acc h3{font-size:clamp(2rem,1.2rem + 2.4vw,3.6rem);line-height:.98;letter-spacing:-.028em;font-weight:760;max-width:9em}
.acc p{margin-top:1rem;font-size:clamp(1.05rem,.95rem + .35vw,1.3rem);line-height:1.45;max-width:24em;color:var(--ink-soft)}
.acc img{border-radius:calc(var(--r) - 10px)}
.acc .open .tx>*{animation:fadeUp .7s var(--ease) both .2s}
.acc .open .tx>div{animation-delay:.3s}
@media (max-width:1040px){
  .acc{height:auto;gap:10px}
  .acc button{padding-left:72px}
  .acc .sl{display:flex;inset:0 auto auto 0;height:72px;width:64px;padding:0;justify-content:center;flex-direction:row;opacity:1!important}
  .acc .sl b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--grape);color:var(--cloud);font-size:1.05rem}
  .acc .pal-acc,.acc .num{display:none}
  .acc .in{padding:0 18px 18px}
  .acc .tx{padding:0}
  .acc p{font-size:1.02rem}
}
@media (prefers-reduced-motion:reduce){.acc .open .tx>*{animation:none}}
@media (max-width:1040px){
  .acc button::before{content:attr(data-t)}
  .acc .in{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;gap:14px}
  .acc .in img{order:-1;aspect-ratio:16/10;height:auto;max-height:none}
  .foot-name .pal.fdot{width:.3em}
}
.foot-name .pal.fdot{width:.31em}
@media (max-width:1040px){.acc>article,.acc>article.open{flex:none}}

/* =========================================================
   Magenta hero: layered berry gradient, warm glow, printed dot texture
   ========================================================= */
.opening{--berry:#D42F78;color:var(--cloud);background:radial-gradient(42% 52% at 64% 82%,#F2629E 0,transparent 70%),radial-gradient(70% 70% at 100% 100%,#A3185A 0,transparent 62%),radial-gradient(60% 60% at 0% 0%,#E54A90 0,transparent 70%),linear-gradient(160deg,#DA3580 0%,#C2266C 100%)!important}
.opening::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(#fff 1.1px,transparent 1.5px);background-size:22px 22px;opacity:.1;-webkit-mask-image:linear-gradient(110deg,#000 0%,transparent 55%);mask-image:linear-gradient(110deg,#000 0%,transparent 55%)}
.hero-title{position:relative;z-index:2}
h1.state{color:var(--cloud)}
h1.state .b,h1.state em{color:var(--sun)!important}
.swoosh path{stroke:var(--cloud)}
.op-foot p,.opening .intro,.hero-friends p{color:#fff8f1e0!important}
.op-foot .btn:not(.ghost){--fill:var(--sun);--fill-ink:var(--grape);background:var(--sun);color:var(--grape);box-shadow:3px 3px 0 var(--grape)}
.op-foot .btn.ghost{background:#ffffff1f;color:var(--cloud);box-shadow:0 0 0 1.5px #ffffff59}
.op-foot .btn.ghost svg{color:var(--cloud)}
.arch-line{border-color:var(--cloud);opacity:.55}
.doodles .sp1,.doodles .sp3{fill:var(--cloud)}
.doodles .sp2,.doodles .sp4{fill:var(--sun)}
.doodles .sq path{stroke:var(--cloud)}
.doodles .dots{fill:var(--cloud)}
.kid{filter:drop-shadow(0 30px 40px #5a0a3466)}
.hf .lbl{background:var(--cloud);color:var(--grape)}
.opening .intro{position:relative;z-index:2}

/* Headline lockup: "shine" on a tilted sun sticker, a smiling star for the full stop */
h1.state{line-height:.9}
h1.state>span{padding:.06em .2em .16em .02em;margin-bottom:-.12em}
h1.state .b{color:var(--cloud)!important}
h1.state .hl{display:inline-block;font-style:normal;color:var(--grape)!important;background:var(--sun);padding:0 .16em .06em;margin-left:.04em;border-radius:.2em;rotate:-2.5deg;box-shadow:.055em .055em 0 var(--grape);transform-origin:20% 60%;animation:hlPop .7s cubic-bezier(.3,1.6,.5,1) both .75s}
@keyframes hlPop{from{scale:.6;rotate:-12deg}}
h1.state .hstar{display:inline-block;width:.46em;margin-left:.08em;vertical-align:-.02em;color:var(--sun);--smile-c:var(--grape);animation:starIn .8s cubic-bezier(.3,1.6,.5,1) both 1s}
h1.state .hstar svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(.04em .04em 0 var(--grape));animation:spinSlow 9s linear infinite 2s}
@keyframes starIn{from{transform:scale(0) rotate(-120deg)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.op-foot{margin-top:clamp(26px,4.4vh,46px)}
.op-foot .btn.ghost{background:transparent;color:var(--cloud);box-shadow:inset 0 0 0 2px #fff8f1b3}
@media (hover:hover) and (pointer:fine){.op-foot .btn.ghost:hover{background:#fff8f126}}
.hero-friends{flex-direction:column;align-items:flex-start;gap:12px}
.hero-friends p{max-width:none;font-size:.82rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.hero-friends ul{gap:clamp(8px,1vw,14px)}
@media (prefers-reduced-motion:reduce){h1.state .hl,h1.state .hstar,h1.state .hstar svg{animation:none}}
h1.state .hstar{width:.62em;margin-left:.1em;vertical-align:.02em}
h1.state .hstar svg{animation:wobble 3.2s ease-in-out infinite 2s}
@keyframes wobble{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(12deg) scale(1.06)}}
.opening{padding-top:calc(var(--bar) + clamp(16px,4svh,44px))}
.pin .prints .p{width:clamp(140px,min(17vw,26svh),280px)}
.pin .prints .p{width:clamp(140px,min(15vw,22svh),280px)}
.pin .prints h2{font-size:clamp(3.4rem,9.4vw,12rem)}
.pin .prints .p{width:clamp(140px,min(15vw,20svh),260px)}
.pin .prints h2{font-size:clamp(3.4rem,min(9.4vw,15svh),12rem)}
.pin .prints .all{bottom:calc(var(--m) * .8)}
.pin .prints .all{translate:-50% 0}
.pin .prints .p{width:clamp(200px,min(22vw,32svh),420px);padding:10px 10px 12px}
.pin .prints .p img{aspect-ratio:4/3}

/* Hero in the logo's own violet */
.opening{background:radial-gradient(42% 52% at 64% 82%,#D63BE6 0,transparent 70%),radial-gradient(70% 70% at 100% 100%,#7A0590 0,transparent 62%),radial-gradient(60% 60% at 0% 0%,#C628D8 0,transparent 70%),linear-gradient(160deg,#BA08CC 0%,#9A06AD 100%)!important}
.kid{filter:drop-shadow(0 30px 40px #3d024966)}
/* new space headline: "play." in sun on the coral field */
.prints h2 em{color:var(--grape);background:var(--sun-x);padding:0 .14em .04em;border-radius:.18em;display:inline-block;rotate:-2deg;box-shadow:.05em .05em 0 var(--grape);font-style:normal}
/* hero in the brand violet #A535B1 */
.opening{background:radial-gradient(42% 52% at 64% 82%,#C35BCE 0,transparent 70%),radial-gradient(70% 70% at 100% 100%,#82228D 0,transparent 62%),radial-gradient(60% 60% at 0% 0%,#B547C1 0,transparent 70%),linear-gradient(160deg,#A535B1 0%,#952AA1 100%)!important}
.kid{filter:drop-shadow(0 30px 40px #3a0a4166)}
/* space section v3: big prints, compact centre lockup */
.pin .prints .p{width:clamp(240px,min(29vw,44svh),560px);padding:12px 12px 14px}
.prints .ph-wrap{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center}
.pin .prints h2{font-size:clamp(3rem,min(6.6vw,11svh),9rem);line-height:.92;letter-spacing:-.03em}
.prints h2 em{rotate:-2.5deg}
.ph-sub{margin-top:clamp(14px,2.2svh,26px);font-size:clamp(1rem,.9rem + .4vw,1.3rem);line-height:1.4;max-width:22em;text-align:center;color:var(--ink-soft)}
html:not(.pin) .prints .ph-wrap{grid-column:1/-1;margin-bottom:18px}
html:not(.pin) .ph-sub{font-size:1rem}
.pin .prints .p{width:clamp(240px,min(27vw,40svh),520px)}
.pin .prints h2{font-size:clamp(3rem,min(6.2vw,10.5svh),9rem)}

/* =========================================================
   Come and see the room: an arch doorway opens into the room
   ========================================================= */
.opens{height:320svh;background:radial-gradient(60% 50% at 50% 100%,#fff7e6 0,transparent 70%),var(--sky)}
.opens .fr{clip-path:inset(30% 36% 0 36% round 50vw 50vw 0 0);z-index:2}
.opens .fr img,.opens .fr video{object-position:50% 70%}
.oh-wrap{position:absolute;z-index:3;left:0;right:0;top:calc(var(--bar) + 2svh);display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none}
.oh-wrap .tag-sm{font-size:.85rem;margin-bottom:14px}
.opens .oh-wrap h2{position:static;font-size:clamp(2.8rem,min(6.4vw,10svh),8rem);max-width:none;line-height:.92;letter-spacing:-.03em}
.opens h2 em{font-style:normal;color:var(--grape);background:var(--sun-x);padding:0 .14em .04em;border-radius:.18em;display:inline-block;rotate:-2deg;box-shadow:.05em .05em 0 var(--grape)}
.o-arch{position:absolute;z-index:1;left:calc(36% - 22px);right:calc(36% - 22px);top:calc(30% - 22px);bottom:0;border:2.5px solid var(--grape);border-bottom:0;border-radius:50vw 50vw 0 0;opacity:.6;transform-origin:50% 100%}
.o-doodles{position:absolute;inset:0;z-index:3;pointer-events:none;transform-origin:50% 70%}
.od{position:absolute;overflow:visible}
.od1{left:27%;top:40%;width:34px;fill:var(--orchid)}
.od2{right:28%;top:36%;width:26px;fill:var(--sun-x)}
.od3{right:25%;top:62%;width:18px;fill:var(--grape)}
.od4{left:24%;top:70%;width:90px;fill:none;stroke:var(--grape);stroke-width:3.5px;stroke-linecap:round}
.od1 path,.od2 path{transform-box:fill-box;transform-origin:50% 50%;animation:twinkle2 3s ease-in-out infinite}
.o-shade{position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,#24093a59);pointer-events:none;opacity:0}
.room-pals{position:absolute;inset:0;pointer-events:none}
.rp{position:absolute;bottom:var(--b);left:var(--l);width:clamp(64px,6.4vw,112px);pointer-events:auto}
.rp .pal svg{filter:drop-shadow(0 18px 14px #24093a4d)}
.rp0{--l:47%;--b:30%}.rp1{--l:58%;--b:22%}.rp2{--l:69%;--b:31%;width:clamp(74px,7.4vw,128px)}.rp3{--l:80%;--b:20%}.rp4{--l:38%;--b:16%}
.opens .cap{z-index:4;opacity:0;background:var(--orchid);color:var(--cloud);border-radius:var(--r);padding:clamp(22px,2.4vw,34px);max-width:30em;box-shadow:6px 6px 0 var(--grape)}
.opens .cap b{font:720 clamp(1.4rem,1.1rem + 1vw,2.1rem)/1.08 var(--display);letter-spacing:-.02em;margin-bottom:.6rem}
.cap-addr{display:flex;align-items:center;gap:.5em;font-size:1rem;opacity:.9;margin-bottom:1.1rem}
.cap-addr svg{width:1.1em;height:1.1em;flex:none;color:var(--sun-x)}
.cap-acts{display:flex;flex-wrap:wrap;gap:10px}
.opens .cap .btn:not(.ghost){background:var(--sun-x);color:var(--grape)}
.opens .cap .btn.ghost{background:transparent;color:var(--cloud);box-shadow:inset 0 0 0 2px #fff8f1b3}
.opens .cap .btn.ghost svg{color:var(--cloud)}
/* phones / reduced motion: a static arch card */
html:not(.pin) .opens{height:auto;padding-top:clamp(56px,10vw,90px)}
html:not(.pin) .opens-in{display:flex;flex-direction:column;gap:22px}
html:not(.pin) .oh-wrap{position:static}
html:not(.pin) .o-arch,html:not(.pin) .o-doodles{display:none}
html:not(.pin) .opens .fr{clip-path:none;border-radius:50vw 50vw var(--r) var(--r);aspect-ratio:4/5;overflow:hidden}
html:not(.pin) .opens .fr img{object-position:40% 70%}
html:not(.pin) .rp{width:clamp(48px,14vw,70px)}
html:not(.pin) .rp0{--l:10%;--b:8%}html:not(.pin) .rp1{--l:30%;--b:4%}html:not(.pin) .rp2{--l:50%;--b:9%}html:not(.pin) .rp3{--l:70%;--b:4%}html:not(.pin) .rp4{display:none}
html:not(.pin) .opens .cap{opacity:1;max-width:none}
@media (prefers-reduced-motion:reduce){.od1 path,.od2 path{animation:none}}
.pin .room-pals .rp{visibility:hidden}
.opens .fr img{object-position:50% 60%}
.rp0{--l:30%;--b:31%}.rp1{--l:41%;--b:36%}.rp2{--l:51%;--b:29%}.rp3{--l:62%;--b:35%}.rp4{--l:23%;--b:20%}
.opens .fr{background:#f3e7d6}
html:not(.pin) .opens .fr img{object-position:48% 60%}
.pin .rp4{--l:70%;--b:24%}
.room-pals{display:none}
.opens .fr img{object-position:50% 55%}
html:not(.pin) .opens .fr{aspect-ratio:4/5}
html:not(.pin) .opens .fr img{object-position:58% 60%}
.opens .o-shade{height:38%}

/* =========================================================
   Noticed: pill choices by need + a real note form
   ========================================================= */
.sel{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4.4vw,72px)}
.sel h3{font-size:clamp(1.4rem,2vw,1.9rem);font-weight:720;letter-spacing:-.02em}
.selection-hint{color:var(--ink-soft);margin-bottom:clamp(20px,2.4vw,30px)}
.selection-count{color:var(--grape);background:var(--sun-x);border-radius:99px;padding:.15em .6em;font-size:.85rem;font-weight:650;margin-left:.6em}
.selection-count:empty{display:none}
.chips{gap:clamp(18px,2vw,26px)}
.choice-group h4{display:flex;align-items:center;gap:10px;font-size:.78rem;letter-spacing:.08em;margin-bottom:12px;color:var(--grape)}
.g-pal{width:30px;flex:none}
.g-pal svg{filter:none}
.choice-options{display:flex;flex-wrap:wrap;gap:8px;grid-template-columns:none}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:10px 18px 10px 14px;border-radius:99px;border:2px solid #24093a1f;background:#fffdf8;font:560 .98rem/1.25 var(--face);box-shadow:none;transition:background-color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.chip::before{display:none}
.chip .ck{width:18px;height:18px;flex:none;border-radius:50%;padding:2px;color:transparent;box-shadow:inset 0 0 0 2px #24093a40;transition:background-color .25s,color .25s,box-shadow .25s}
@media (hover:hover) and (pointer:fine){.chip:hover{border-color:var(--gc);background:#fff}}
.chip[aria-pressed=true]{background:var(--gc);color:var(--grape);border-color:var(--grape);box-shadow:3px 3px 0 var(--grape)}
.chip[aria-pressed=true] .ck{background:var(--grape);color:var(--cloud);box-shadow:none}
.ages{margin-top:clamp(26px,3vw,38px)}
.ages legend{font-size:1.1rem;font-weight:700}
.ages legend span{font-weight:450;color:var(--ink-soft)}
.ages span{border:2px solid #24093a1f;font-weight:560}
.ages input:checked+span{background:var(--grape);color:var(--cloud);border-color:var(--grape)}

.note{position:sticky;top:calc(var(--bar) + 20px);background:var(--cloud);border:2px solid var(--grape);border-radius:var(--r);box-shadow:6px 6px 0 var(--grape);overflow:hidden;color:var(--grape)}
.hp{position:absolute;left:-9999px}
.note-top{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--orchid);color:var(--cloud)}
.note-star svg{width:44px;height:44px;background:var(--sun-x);border-radius:50%;padding:8px;color:var(--grape);--smile-c:var(--sun-x)}
.note-top b{display:block;font:720 1.2rem/1.1 var(--display);letter-spacing:-.01em}
.note-top span{font-size:.88rem;opacity:.85}
.note-body{padding:clamp(18px,2vw,26px);display:grid;gap:16px}
.note-meet{background:var(--butter);border-radius:16px;padding:12px 14px}
.note-meet b{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.note-meet a{display:inline-flex;align-items:center;gap:.45em;margin:2px 12px 2px 0;font-weight:600;text-decoration:none}
.note-meet a i{width:.8em;height:.8em;border-radius:50%;background:var(--c)}
.fld{display:grid;gap:6px;min-width:0}
.fld>span{font-size:.85rem;font-weight:650}
.fld input,.fld textarea{font:450 1rem/1.45 var(--face);color:var(--grape);background:#fff;border:2px solid #24093a26;border-radius:14px;padding:12px 14px;width:100%;transition:border-color .2s,box-shadow .2s;resize:vertical}
.fld textarea{min-height:110px}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--orchid);box-shadow:0 0 0 4px #a535b133}
.fld.bad input,.fld.bad textarea{border-color:#d0342c;box-shadow:0 0 0 4px #d0342c22}
.fld .auto{font-size:.8rem;color:var(--orchid);font-weight:600}
.fld .auto[hidden]{display:none}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pref{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pref legend{font-size:.85rem;font-weight:650;margin-bottom:6px;padding:0;width:100%}
.pref input{position:absolute;opacity:0;width:1px;height:1px}
.pref span{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:99px;border:2px solid #24093a26;font-weight:600;font-size:.95rem;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.pref input:checked+span{background:var(--grape);color:var(--cloud);border-color:var(--grape)}
.pref input:focus-visible+span{outline:3px solid var(--orchid);outline-offset:2px}
.note-err{background:#fde8e6;color:#8f1d16;border-radius:12px;padding:10px 14px;font-size:.92rem;font-weight:550}
.note-err a{color:inherit;font-weight:700}
.note-acts{display:flex;flex-wrap:wrap;gap:10px}
.note .send{flex:1 1 180px;background:var(--sun-x);color:var(--grape);box-shadow:3px 3px 0 var(--grape);border:2px solid var(--grape);min-height:54px}
@media (hover:hover) and (pointer:fine){.note .send:hover{box-shadow:5px 5px 0 var(--grape)}}
.note .send .sp{display:none;width:16px;height:16px;border-radius:50%;border:2.5px solid var(--grape);border-right-color:transparent;animation:spin .7s linear infinite}
.note.sending .send .sp{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.note .wa-alt{background:transparent;color:var(--grape);box-shadow:inset 0 0 0 2px #24093a33;min-height:54px}
.note .wa-alt svg{color:#1da851}
.note .fine{font-size:.8rem;line-height:1.45;color:var(--ink-soft);padding:0;margin:0}
.note-done{padding:clamp(28px,3vw,40px) clamp(20px,2.4vw,30px);text-align:center;display:grid;justify-items:center;gap:10px}
.note-done[hidden]{display:none}
.note-done:focus{outline:none}
.done-pals{display:flex;gap:10px;margin-bottom:6px}
.done-pals .pal{width:62px}
.note-done b{font:760 clamp(1.6rem,2.4vw,2.2rem)/1.05 var(--display);letter-spacing:-.02em}
.note-done p{color:var(--ink-soft);max-width:22em}
.note-done .tl{background:none;border:0;cursor:pointer;margin-top:6px;font:inherit;font-weight:650}
@media (max-width:1040px){.note{position:static}}
@media (max-width:600px){.fld-row{grid-template-columns:1fr}.chip{font-size:.95rem;padding:9px 14px 9px 11px}.note-acts .btn{flex:1 1 100%}}
.note-body[hidden]{display:none}
.ages legend span{display:inline;background:none;border:0;padding:0;min-height:0;border-radius:0;font-weight:450;cursor:default}
@media (max-width:1040px){.sel{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.choice-options{display:flex}.chip{max-width:100%}}
html:not(.pin) .opening>.kid,html:not(.pin) .opening>.sunhalo{animation-fill-mode:backwards}

/* Hero in the footer's deep plum */
.opening{background:radial-gradient(45% 55% at 64% 86%,#5b1a7a 0,transparent 70%),radial-gradient(55% 60% at 0% 0%,#3a0f55 0,transparent 70%),radial-gradient(70% 70% at 100% 100%,#1a0629 0,transparent 62%),linear-gradient(160deg,#2c0b45 0%,#20072f 100%)!important}
.opening::before{opacity:.07}
.kid{filter:drop-shadow(0 30px 40px #00000066)}
.arch-line{opacity:.4}

/* phones: hero arch, outline and child share one centre line */
.stage{background:var(--grape)}
html:not(.pin) .opening{--kh:clamp(320px,56svh,480px);--aw:calc(var(--kh) * .8);--ah:calc(var(--kh) * .9)}
html:not(.pin) .opening>.sunhalo{left:50%;right:auto;margin-left:calc(var(--aw) / -2);width:var(--aw);height:var(--ah);bottom:0}
html:not(.pin) .opening>.arch-line{left:50%;width:calc(var(--aw) + 40px);margin-left:calc(var(--aw) / -2 - 20px);height:calc(var(--ah) + 20px);bottom:0}
html:not(.pin) .opening>.kid{left:50%;right:auto;margin-left:calc(var(--kh) * -.356);height:var(--kh);bottom:0}
html:not(.pin) .pal-hero{left:calc(50% - var(--aw) / 2 - 12px)}
html:not(.pin) .opening{--kh:min(clamp(320px,56svh,480px),calc((100vw - 48px) / .8))}

/* "Ask about" buttons in each therapy chapter: cream sticker pills */
.ask{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(16px,2.4vh,26px);padding:6px 16px 6px 6px;min-height:52px;border-radius:99px;background:var(--cloud);color:var(--grape);border:2px solid var(--grape);box-shadow:3px 3px 0 var(--grape);text-decoration:none;font:650 1rem/1.2 var(--face);letter-spacing:-.01em;transition:box-shadow .3s var(--ease),background-color .3s var(--ease)}
.ask-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--grape);color:var(--cloud);flex:none}
.ask-ic svg{width:19px;height:19px}
.ask-ar{width:18px;height:18px;flex:none;transition:transform .45s cubic-bezier(.7,0,.2,1)}
@media (hover:hover) and (pointer:fine){.ask:hover{box-shadow:5px 5px 0 var(--grape);background:#fff}.ask:hover .ask-ar{transform:translateX(4px)}}
.ask:active{box-shadow:1px 1px 0 var(--grape);translate:2px 2px}
.tstep .ask{max-width:100%}
.ask-t{white-space:normal}
@media (max-width:420px){.ask{font-size:.94rem;padding-right:14px}}
/* ring-telescope hero: image is ~0.664 wide per unit height */
.pin .opening{--kx:calc(52% + var(--kh) * .332)}
@media (min-width:1041px) and (max-width:1240px){.pin .opening{--kx:calc(54% + var(--kh) * .332)}}
html:not(.pin) .opening>.kid{margin-left:calc(var(--kh) * -.332)}
/* plum is the dark base: form header and the room's visit card */
.note-top{background:var(--grape)}
.note-star svg{background:var(--sun-x)}
.opens .cap{background:var(--grape);box-shadow:6px 6px 0 #00000055}
.note-meet #meetList{display:flex;flex-wrap:wrap;gap:4px 14px}
.note-meet #meetList span{display:inline-flex;align-items:center;gap:.45em;font-weight:600}
.note-meet #meetList i{width:.8em;height:.8em;border-radius:50%;background:var(--c)}
.pin .prints .p{z-index:1}
.pin .prints .ph-wrap{z-index:3}
/* brand orchid hero, stage, reviews and closing sky */
.opening{background:radial-gradient(42% 52% at 64% 82%,#C35BCE 0,transparent 70%),radial-gradient(70% 70% at 100% 100%,#82228D 0,transparent 62%),radial-gradient(60% 60% at 0% 0%,#B547C1 0,transparent 70%),linear-gradient(160deg,#A535B1 0%,#952AA1 100%)!important}
.opening::before{opacity:.1}
.kid{filter:drop-shadow(0 30px 40px #3a0a4166)}
.stage{background:var(--brand)}
.words{background:var(--brand)}
.close{background:linear-gradient(180deg,#A535B1 0%,#A836AE 30%,#BC3F9E 55%,#DB5B8A 76%,#F2846E 90%,#FFB36B 100%);background-color:var(--brand)}
.opens .cap{background:var(--brand)}