/* Smile CDRC: colours come from the logo's own characters */
@font-face{font-family:"Bricolage";src:url(/assets/fonts/bricolage.woff2) format("woff2");font-weight:380 800;font-stretch:85% 100%;font-display:swap}
:root{
  /* Brand violet from the logo, plum ink, warm paper. Chapter fields are softened
     sherbets of the logo children's colours; the saturated toys and buttons carry the punch. */
  --orchid:#A535B1;--grape:#24093A;--cloud:#FFF8F1;
  --sun:#FFD465;--coral:#FFAC8E;--sky:#A4D3FF;--mint:#9BDFC2;--pink:#FFB7DE;
  --lavender:#F7EFE4;--butter:#FFF1CC;
  --sun-x:#FFC21F;--coral-x:#FF6A45;--sky-x:#2FA8FF;--mint-x:#17C98D;--pink-x:#FF7CC8;
  --ink-soft:#24093acc;
  --face:"Bricolage",ui-sans-serif,system-ui,sans-serif;
  --display:"Bricolage",ui-sans-serif,system-ui,sans-serif;
  --m:clamp(18px,3vw,48px);--bar:78px;--r:clamp(22px,2.4vw,36px);
  --s-small:clamp(.875rem,.84rem + .12vw,.95rem);--s-body:clamp(1.0625rem,1rem + .25vw,1.25rem);--s-lead:clamp(1.3rem,1.1rem + .8vw,1.8rem);
  --s-head:clamp(2.9rem,8vw,8.6rem);--s-mid:clamp(1.9rem,1.3rem + 2.6vw,4rem);
  --ease:cubic-bezier(.2,.9,.25,1);--spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;background:var(--grape);scroll-padding-top:calc(var(--bar) + 16px);scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom))}
html.modal-open{overflow:hidden}
body{background:var(--cloud);color:var(--grape);font:400 var(--s-body)/1.5 var(--face);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video,svg,canvas{display:block}
img{max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:2px}
ul,ol{padding:0;list-style:none}
address{font-style:normal}
button{font:inherit;color:inherit}
::selection{background:var(--grape);color:var(--sun)}
:focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--display);font-weight:720;letter-spacing:-.024em;line-height:.95;text-wrap:balance;font-optical-sizing:auto}
h1 em,h2 em,h3 em{font-style:normal;color:var(--orchid)}
p{text-wrap:pretty;max-width:68ch}
.skip{position:fixed;left:12px;top:-70px;z-index:100;background:var(--grape);color:#fff;padding:.7em 1em;border-radius:12px}
.skip:focus{top:12px}
.head{font-size:var(--s-head)}
.mid{font-size:var(--s-mid);line-height:1.03}
.lead{font-size:var(--s-lead);line-height:1.28;letter-spacing:-.012em}
.chap{position:relative;padding:calc(var(--m) * 3) var(--m);overflow:clip;min-height:90svh}

/* Fields */
.f-orchid{background:var(--orchid);color:var(--cloud);--ink:var(--cloud);--fill:var(--sun);--fill-ink:var(--grape)}
.f-grape{background:var(--grape);color:var(--cloud);--fill:var(--sun);--fill-ink:var(--grape)}
.f-sun{background:var(--sun);color:var(--grape);--fill:var(--grape);--fill-ink:var(--sun)}
.f-coral{background:var(--coral);color:var(--grape);--fill:var(--grape);--fill-ink:var(--sun)}
.f-sky{background:var(--sky);color:var(--grape);--fill:var(--grape);--fill-ink:var(--sun)}
.f-mint{background:var(--mint);color:var(--grape);--fill:var(--grape);--fill-ink:var(--sun)}
.f-pink{background:var(--pink);color:var(--grape);--fill:var(--grape);--fill-ink:var(--sun)}
.f-cloud{background:var(--cloud);color:var(--grape);--fill:var(--orchid);--fill-ink:#fff}
.f-lavender{background:var(--lavender);color:var(--grape);--fill:var(--sun);--fill-ink:var(--grape)}
.f-butter{background:var(--butter);color:var(--grape);--fill:var(--grape);--fill-ink:var(--cloud)}

/* Button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;max-width:100%;white-space:normal;text-align:center;font:600 1.06rem/1.2 var(--face);min-height:56px;padding:.7em 1.55em;border-radius:999px;text-decoration:none;border:0;cursor:pointer;background:var(--fill,var(--grape));color:var(--fill-ink,var(--sun));transition:transform .28s var(--spring)}
.btn svg{width:1.2em;height:1.2em;flex:none}

.btn:active{opacity:.88}
.btn.alt{background:none;color:inherit;border:2.5px solid currentColor}
.tl{font-weight:600;display:inline-block;text-decoration:underline;text-decoration-thickness:2.5px;text-underline-offset:.28em;transition:text-underline-offset .2s var(--ease)}
@media (hover:hover) and (pointer:fine){.tl:hover{text-underline-offset:.46em}}

/* Bar: takes the colours of the chapter beneath it */
.bar{position:fixed;inset:0 0 auto;z-index:50;height:var(--bar);display:flex;align-items:center;justify-content:space-between;gap:1.4rem;padding-inline:var(--m);color:var(--bar-ink,var(--grape));background:var(--bar-bg,var(--cloud));transition:background-color .3s,color .3s}
.bar .logo img{height:56px;width:auto}
.bar nav{display:flex;align-items:center;gap:clamp(1rem,2.1vw,2.1rem);font-weight:500}
.bar nav a:not(.btn){text-decoration:none;position:relative;padding:.45em 0}
.bar nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:.15em;height:2.5px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .25s var(--ease)}
@media (hover:hover) and (pointer:fine){.bar nav a:not(.btn):hover::after{transform:scaleX(1)}}
.bar nav a[aria-current=page]::after{transform:scaleX(1)}
.bar .btn{min-height:48px;background:var(--bar-ink,var(--grape));color:var(--bar-bgs,var(--cloud));transition:background-color .3s,color .3s,transform .28s var(--spring)}
.menu-btn{display:none;width:48px;height:48px;border-radius:50%;border:0;background:var(--bar-ink,var(--grape));color:var(--bar-bgs,var(--cloud));cursor:pointer;align-items:center;justify-content:center;transition:background-color .3s,color .3s}
.menu-btn svg{width:22px;height:22px}
dialog.menu{border:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:none;background:var(--sun);color:var(--grape);padding:max(14px,env(safe-area-inset-top)) max(var(--m),env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(var(--m),env(safe-area-inset-left));overflow:auto;overscroll-behavior:contain}
dialog.menu[open]{display:flex;flex-direction:column;animation:mi .3s var(--ease)}
@keyframes mi{from{opacity:0;transform:translateY(18px)}}
.menu-top{display:flex;justify-content:space-between;align-items:center;min-height:50px;flex:none;position:sticky;top:0;z-index:1;background:var(--sun)}
.menu-top img{height:52px;width:auto}
.menu-close{width:48px;height:48px;flex:none;border-radius:50%;border:0;background:var(--grape);color:var(--sun);cursor:pointer;display:flex;align-items:center;justify-content:center}
.menu-close svg{width:22px;height:22px}
.menu-links{margin-top:clamp(16px,3vh,34px)}
.menu-links>a{display:flex;align-items:center;min-height:48px;font:600 clamp(1.8rem,8.5vw,3rem)/1.16 var(--face);letter-spacing:-.02em;text-decoration:none}
.menu-sub{margin-top:1rem;display:grid;gap:.1rem}
.menu-sub a{display:flex;align-items:center;min-height:44px;font:500 1.1rem/1.4 var(--face);text-decoration:none}
.menu-cta{margin-top:auto;padding-top:22px;display:flex;gap:10px;--fill:var(--grape);--fill-ink:var(--sun)}
.menu-cta .btn{flex:1}

/* Phone actions */
.dock{display:none;position:fixed;inset:auto 0 0;z-index:45;padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:8px;background:var(--grape);color:var(--cloud);transform:translateY(110%);transition:transform .28s var(--ease);--fill:var(--sun);--fill-ink:var(--grape)}
.dock.show{transform:none}
.dock .btn{flex:1;min-height:52px}

/* Smile edge: the field above bends into a smile on scroll */
.smile-edge{position:absolute;left:0;right:0;top:-1px;width:100%;height:clamp(70px,13vw,220px);z-index:3;pointer-events:none}

/* Footer */
.foot{background:var(--sun);color:var(--grape);padding:calc(var(--m) * 2) var(--m) 0;overflow:hidden;position:relative;z-index:6}
.places a{display:block;font-size:var(--s-mid);font-weight:600;letter-spacing:-.02em;line-height:1.12;text-decoration:none}
.places a:hover{text-decoration:underline}
.foot-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.6fr) minmax(0,.6fr) minmax(0,.8fr);gap:clamp(22px,3vw,44px)}
.foot-row>*{min-width:0}
.foot a{overflow-wrap:anywhere}
.foot h2{font-size:1.06rem;letter-spacing:0;margin-bottom:.5rem}
.foot li{margin-bottom:.26rem}
.foot li a{text-decoration:none}
.foot li a:hover{text-decoration:underline}
.foot-note{margin-top:clamp(30px,4vw,60px);font-size:var(--s-small);max-width:68ch}
.foot-name{font-weight:600;letter-spacing:-.028em;line-height:.74;font-size:35vw;margin:clamp(20px,3vw,48px) 0 -.13em -.03em;color:var(--orchid);white-space:nowrap}

/* Inner pages */
.page{padding-top:var(--bar)}
.th-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--m);min-height:calc(100svh - var(--bar));padding:calc(var(--m) * 1.4) var(--m) 0;align-items:end;position:relative;overflow:clip}
.th-top>div:first-child{align-self:start}
.th-top .lead{max-width:24em;margin-top:1.3rem}
.th-top .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:1.7rem}
.th-top img.cut{width:100%;max-height:82svh;object-fit:contain;object-position:50% 100%;display:block}
.crumb{margin-bottom:1rem;font-weight:500}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
.th-film{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(26px,5vw,84px);align-items:center}
.th-film figure{border-radius:var(--r);overflow:hidden;aspect-ratio:2/3;max-height:88svh;justify-self:end;width:100%;max-width:min(38vw,58svh)}
.th-film img,.th-film video{width:100%;height:100%;object-fit:cover}
.big-list{margin-top:clamp(26px,3vw,48px)}
.big-list li{font-size:var(--s-mid);font-weight:600;letter-spacing:-.02em;line-height:1.1;padding:.12em 0}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,5vw,84px)}
.two>*,.th-top>*,.th-film>*{min-width:0}
.head,.mid,.th-next b,.visit-ways a{overflow-wrap:anywhere}
.chap .prose{max-width:60ch}
.chap .prose h3{font-size:var(--s-mid);margin:0 0 .5em;line-height:1.02}
.chap .prose p+h3{margin-top:1.4em}
.person{margin-top:clamp(26px,3vw,44px);font-weight:600;font-size:var(--s-lead);line-height:1.2}
.person span{display:block;font-weight:400;font-size:var(--s-body);margin-top:.25rem}
.th-next{display:grid;grid-template-columns:1fr auto;align-items:end;text-decoration:none;padding:calc(var(--m) * 1.6) var(--m) 0;overflow:clip;min-height:64svh}
.th-next b{font-size:var(--s-head);font-weight:600;letter-spacing:-.02em;line-height:.98;align-self:start;display:block;margin-top:.5rem}
.th-next img{height:52svh;width:auto;object-fit:contain;transform-origin:50% 100%;transition:transform .5s var(--spring)}

.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(26px,3vw,48px)}
.tile{border-radius:var(--r);padding:clamp(18px,2vw,30px);aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:space-between;color:var(--grape)}
.tile svg{width:58%;max-width:190px;align-self:flex-end}
.tile .star3d{width:64%;max-width:220px;height:auto;align-self:flex-end}
.team .tile:nth-child(1){background:var(--pink)}
.team .tile:nth-child(2){background:var(--sky)}
.team .tile:nth-child(3){background:var(--coral)}
.team .tile:nth-child(4){background:var(--cloud)}
.tile b{font-size:clamp(1.45rem,2.3vw,2.2rem);letter-spacing:-.025em;line-height:1.03;font-weight:600;display:block}
.tile span{display:block;margin-top:.4rem;font-size:1rem;line-height:1.3}
.team .tile{display:grid;grid-template-rows:clamp(76px,9vw,132px) auto;align-content:start;gap:24px;aspect-ratio:auto;min-width:0}
.team .tile>.star3d{height:100%;width:auto;max-width:70%;object-fit:contain;justify-self:end;align-self:start}
.team .tile b{font-size:clamp(1.1rem,1.75vw,1.75rem);line-height:1.12;min-height:2.24em;text-wrap:balance}
.team .tile b .initials{display:inline;font:inherit;letter-spacing:inherit;white-space:nowrap;margin:0}
.eyebrow{display:block;font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
.contact-intro,.contact-location{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);padding:clamp(48px,6vw,96px) var(--m);align-items:center}
.contact-intro h1{font-size:clamp(2.6rem,5.5vw,5.5rem);line-height:1.02;max-width:11em}
.contact-intro h1 em{font-style:normal;color:var(--orchid)}
.contact-intro .lead{max-width:26em;margin-top:24px;font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.45}
.contact-actions{display:grid;gap:12px;min-width:0}
.contact-card{display:flex;align-items:center;gap:18px;padding:24px;border-radius:22px;background:var(--cloud);text-decoration:none;transition:background-color .2s}
.contact-card:hover{background:#fff}
.contact-card>svg{width:48px;height:48px;flex:none;border-radius:50%;padding:12px;background:var(--lavender);color:var(--orchid)}
.contact-wa>svg{background:#D9F5DB;color:#125B32}
.contact-card>div{min-width:0;flex:1}
.contact-card b{font-size:clamp(1.1rem,1.55vw,1.4rem);font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.contact-card span{display:block;font-size:.95rem;line-height:1.45;margin-top:6px}
.contact-card .arrow{font-size:1.5rem;flex:none;margin:0}
.contact-location h2{font-size:clamp(2.1rem,3.8vw,3.8rem);max-width:10em}
.contact-location address{font-size:1.25rem;line-height:1.45;margin-top:24px;font-weight:500}
.contact-location p{margin:18px 0 24px;max-width:28em}
.contact-location .map{aspect-ratio:4/3;min-height:300px;background:var(--lavender)}
.visit-prepare{padding:clamp(48px,6vw,88px) var(--m)}
.visit-prepare h2{font-size:clamp(2rem,3.5vw,3.5rem)}
.visit-checklist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:36px;counter-reset:visit}
.visit-checklist li{border-top:1px solid #2b0b3f30;padding-top:20px;counter-increment:visit}
.visit-checklist li::before{content:'0' counter(visit);display:block;font-size:.95rem;font-weight:600;margin-bottom:14px;color:var(--orchid)}
.visit-checklist b{display:block;font-size:1.3rem;font-weight:600;line-height:1.25}
.visit-checklist p{font-size:1rem;line-height:1.45;margin-top:10px;max-width:25em}
@media (max-width:800px){
  .contact-intro,.contact-location{grid-template-columns:minmax(0,1fr)}
  .contact-card{padding:20px;gap:14px}
  .contact-intro h1{font-size:clamp(2.5rem,9vw,4.3rem)}
  .contact-location .map{min-height:240px}
  .visit-checklist{grid-template-columns:minmax(0,1fr);gap:24px}
}
@media (max-width:359px){
  .team .tile b{font-size:1.3rem}
  .contact-card{padding:16px;gap:10px}
  .contact-card>svg{width:40px;height:40px;padding:10px}
  .contact-card .arrow{display:none}
}
.gallery-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,44px) clamp(10px,1.4vw,20px);padding:0 var(--m) calc(var(--m) * 3)}
.gallery-grid figure:nth-child(6n+1){grid-column:1/-1}
.gallery-grid figure:nth-child(6n+2){grid-column:1/6}
.gallery-grid figure:nth-child(6n+3){grid-column:6/13}
.gallery-grid figure:nth-child(6n+4){grid-column:1/8}
.gallery-grid figure:nth-child(6n+5){grid-column:8/13}
.gallery-grid figure:nth-child(6n){grid-column:3/11}
.gallery-grid figure:last-child{grid-column:3/11}
.gallery-grid button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:var(--r);overflow:hidden}
.gallery-grid img{width:100%;height:auto;transition:transform .6s var(--ease)}

.gallery-grid b{display:block;font-size:var(--s-lead);letter-spacing:-.02em;margin-top:.6rem;font-weight:600}
dialog.lb{border:0;background:transparent;max-width:min(94vw,1500px);max-height:94vh;padding:0;margin:auto;overflow:visible}
dialog.lb::backdrop{background:var(--grape)}
dialog.lb img{max-width:100%;max-height:calc(100dvh - 140px);width:auto;height:auto;object-fit:contain;border-radius:18px}
dialog.lb p{color:var(--cloud);margin-top:.6rem}
dialog.lb button{position:fixed;top:16px;right:16px;width:48px;height:48px;border-radius:50%;border:0;background:var(--sun);color:var(--grape);cursor:pointer;display:flex;align-items:center;justify-content:center}
dialog.lb button svg{width:22px}
.visit-ways{margin-top:clamp(26px,3vw,48px)}
.visit-ways a{display:block;font-size:var(--s-head);font-weight:600;letter-spacing:-.024em;line-height:1.12;text-decoration:none;padding-block:.12em}
.visit-ways a:hover{text-decoration:underline;text-decoration-thickness:4px}
.map{border:0;width:100%;aspect-ratio:4/3;border-radius:var(--r);background:var(--cloud)}
.center404{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:var(--bar) var(--m)}
.center404 p{margin:1.1rem 0 1.5rem;max-width:30em}

[data-in]{will-change:transform,opacity}

@media (max-width:1040px){
  :root{--bar:calc(68px + env(safe-area-inset-top))}
  .bar{padding-top:env(safe-area-inset-top);padding-left:max(var(--m),env(safe-area-inset-left));padding-right:max(var(--m),env(safe-area-inset-right))}
  .bar .logo img{height:50px}
  .bar nav a:not(.btn),.bar nav .btn{display:none}
  .menu-btn{display:flex}
  .foot-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .places a{font-size:clamp(1.5rem,6.7vw,3rem)}
  .foot-row>:first-child{grid-column:1/-1}
  .foot-row>div:last-child{grid-column:1/-1}
  .foot li a{display:inline-flex;align-items:center;min-height:44px;line-height:1.3}
  .dock{display:flex;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .foot{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .th-top .head{font-size:clamp(2.25rem,7.4vw,5rem)}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .th-next b{font-size:clamp(2.3rem,7vw,5rem)}
}
@media (max-width:800px){
  :root{--s-head:clamp(2.25rem,8vw,4rem)}
  .chap{min-height:0;padding-block:clamp(48px,10vw,80px)}
  .th-top{grid-template-columns:1fr;min-height:0;padding-bottom:0}
  .th-top img.cut{max-height:56svh;margin-top:16px}
  .two,.th-film{grid-template-columns:1fr}
  .th-film figure{max-width:480px;max-height:none;justify-self:center;aspect-ratio:3/4}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tile{aspect-ratio:auto;min-height:250px;padding:14px;gap:10px}
  .tile b{font-size:1.3rem}
  .tile span{font-size:.95rem}
  .th-next{grid-template-columns:1fr;min-height:0}
  .th-next img{height:38svh;justify-self:end;margin-top:12px}
  .gallery-grid figure:nth-child(n){grid-column:1/-1}
  .visit-ways a{font-size:clamp(1.6rem,7vw,3.5rem)}
  .visit-ways a[href^="tel:"]{white-space:nowrap}
  .th-next img{max-width:100%;height:auto;max-height:38svh}
  .th-top .acts .btn{flex:1 1 200px}
}
@media (max-width:359px){
  :root{--m:16px}
  .btn{font-size:1rem;padding-inline:1.1em}
  .tiles{grid-template-columns:minmax(0,1fr)}
  .tile{min-height:230px}
  .tile .star3d{width:42%}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- Type layer: Fraunces (soft) for display, Figtree for reading ---------- */
.places a,.big-list li,.visit-ways a,.menu-links>a,.th-next b,.tile b,.gallery-grid b,.foot-name,.person,.contact-intro h1,.quote blockquote,.acc .sl{font-family:var(--display);font-weight:500}
.tile b,.person{font-weight:540}
.eyebrow,.foot h2,.choice-group h4{font-family:var(--face);font-weight:650;letter-spacing:.09em;text-transform:uppercase;font-size:.78rem}
.foot h2{opacity:.7}
.lead{font-weight:400;letter-spacing:-.005em}
body{font-feature-settings:"ss01","cv01";text-rendering:optimizeLegibility}
.btn{font-family:var(--face);font-weight:650;letter-spacing:-.005em}
.btn{box-shadow:0 1px 0 #ffffff40 inset,0 10px 24px -14px #24093a80}
.btn.alt{box-shadow:none}
.tl{font-weight:600}
::selection{background:var(--orchid);color:#fff}

/* Paper grain: a quiet print texture over every flat field */
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.07;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Footer: plum, quiet, with the name set large in butter */
.foot{background:var(--grape);color:var(--cloud)}
.foot a{color:var(--cloud)}
.foot-note{opacity:.62}
.foot-name{color:var(--sun);font-style:italic;font-weight:460;letter-spacing:-.02em;line-height:.8}
dialog.menu{background:var(--lavender)}
.menu-top{background:var(--lavender)}
.menu-close{background:var(--grape);color:var(--cloud)}
.menu-cta{--fill:var(--orchid);--fill-ink:#fff}
.dock{background:#24093aee;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);--fill:var(--sun-x)}
.team .tile:nth-child(4){background:var(--sun)}
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.rv.on{opacity:1;transform:none}
img.rv{transform:translateY(40px) scale(.97)}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* =========================================================
   v4: one contemporary grotesk, glass pill nav, arches not discs
   ========================================================= */
body{letter-spacing:-.006em;font-weight:400}
.lead{font-weight:420;letter-spacing:-.015em}
.places a,.big-list li,.visit-ways a,.menu-links>a,.th-next b,.tile b,.gallery-grid b,.person,.contact-intro h1,.acc .sl{font-weight:680;letter-spacing:-.022em}
.tile b,.person{font-weight:650;letter-spacing:-.025em}
.head{letter-spacing:-.026em;line-height:.92}
.eyebrow,.foot h2,.choice-group h4{font-weight:650;letter-spacing:.06em}
.btn{font-weight:620;letter-spacing:-.01em}
.foot-name{font-style:normal;font-weight:800;letter-spacing:-.032em;line-height:.78}
.contact-intro h1 em{color:var(--orchid)}

/* floating glass navigation */
.bar{inset:12px 12px auto;height:64px;border-radius:999px;padding:0 10px 0 22px;background:#fff8f1c7!important;color:var(--grape)!important;-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 1px 0 #ffffffb3 inset,0 0 0 1px #24093a0d,0 14px 34px -22px #24093a66}
.bar .logo img{height:44px}
.bar nav{font-weight:560;font-size:1rem}
.bar .btn{background:var(--grape)!important;color:var(--cloud)!important;min-height:46px}
.menu-btn{background:var(--grape)!important;color:var(--cloud)!important}
@media (max-width:1040px){
  .bar{inset:max(10px,env(safe-area-inset-top)) 10px auto;height:60px;padding:0 8px 0 16px}
  .bar .logo img{height:40px}
}

/* team monograms, shared by home and about */
.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)}
.team .tile .mono{display:grid;place-items:center;width:clamp(64px,7vw,108px);aspect-ratio:1;border-radius:50%;margin:0;font-size:clamp(2rem,3.4vw,3.4rem);line-height:1;font-weight:760;letter-spacing:-.022em;color:var(--grape)}
.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 span:not(.mono){color:var(--ink-soft)}

/* Footer wordmark: full width, fully visible, and the i wears a face, like the logo */
.pal{display:inline-block;position:relative;line-height:0}
.pal svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 12px 12px #00000040)}
.pal .m1{opacity:0}
.pal .pb{stroke:#fff;stroke-width:9;stroke-linejoin:round;paint-order:stroke}
.foot-name{display:flex;justify-content:center;margin:clamp(40px,6vw,96px) 0 0;padding:0 0 clamp(18px,2.4vw,40px);font-size:min(37vw,62svh);line-height:.74;letter-spacing:-.03em;font-style:normal;font-weight:800;color:var(--sun);white-space:nowrap;overflow:visible}
.foot-name .fn{position:relative;display:inline-block;padding-top:.08em}
.foot-name .fi{position:relative;display:inline-block}
.fdot{position:absolute;left:50%;bottom:72%;width:.36em;translate:-50% 0;rotate:-6deg}
.fperch{position:absolute;width:.24em}
.fp1{left:.02em;bottom:84%;rotate:-12deg}
.fp2{right:.06em;bottom:58%;rotate:10deg}
.foot{padding-bottom:0}
@media (max-width:1040px){.foot-name{margin-top:48px;padding-bottom:calc(88px + env(safe-area-inset-bottom))}}
.foot-name{font-size:min(33vw,58svh)}
.foot-name .pal.fdot,.foot-name .pal.fperch{position:absolute;display:block}
.foot-name .pal.fdot{left:50%;bottom:69%;width:.34em}
.foot-name .pal.fp1{left:-.04em;right:auto;bottom:83%;width:.22em}
.foot-name .pal.fp2{right:.02em;left:auto;bottom:62%;width:.22em}

/* =========================================================
   Nav: three floating islands. Logo pill, link pill with a sliding
   highlight, solid CTA. Tucks away on scroll down, returns on scroll up.
   ========================================================= */
.bar{background:transparent!important;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;inset:14px 0 auto;height:60px;padding:0 var(--m);transition:transform .5s cubic-bezier(.65,0,.25,1)}
.bar.away{transform:translateY(calc(-100% - 24px))}
.island{background:#fff8f1e0;-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:0 1px 0 #ffffffcc inset,0 0 0 1px #24093a10,0 14px 34px -20px #24093a59}
.bar .logo{display:flex;align-items:center;height:60px;padding:0 18px;border-radius:99px}
.bar .logo img{height:40px}
.bar nav{gap:10px;font-size:.98rem}
.nav-pill{position:relative;display:flex;align-items:center;gap:2px;height:60px;padding:6px;border-radius:99px}
.bar .nav-pill a{position:relative;z-index:1;display:flex;align-items:center;height:100%;padding:0 1.05em;border-radius:99px;font-weight:600;color:var(--grape);transition:color .25s}
.bar .nav-pill a::after{display:none}
.bar .nav-pill a.hot{color:var(--cloud)}
.nav-blob{position:absolute;z-index:0;top:6px;bottom:6px;left:0;width:0;border-radius:99px;background:var(--grape);opacity:0;transition:transform .5s cubic-bezier(.3,1.3,.5,1),width .5s cubic-bezier(.3,1.3,.5,1),opacity .25s}
.bar .btn{min-height:60px;padding-inline:1.5em;box-shadow:0 14px 34px -18px #24093a99}
.menu-btn{width:60px;height:60px}
@media (max-width:1040px){
  .bar{inset:max(10px,env(safe-area-inset-top)) 0 auto;height:56px;padding:0 12px}
  .bar .logo{height:56px;padding:0 14px}
  .bar .logo img{height:36px}
  .nav-pill{display:none}
  .menu-btn{width:56px;height:56px}
}
@media (prefers-reduced-motion:reduce){.bar,.nav-blob{transition:none}}
.bar nav .nav-pill a:not(.btn){display:flex;align-items:center;height:100%;padding:0 1.1em;border-radius:99px;font-weight:600;color:var(--grape);text-decoration:none}
.bar nav .nav-pill a.hot:not(.btn){color:var(--cloud)}

/* =========================================================
   Nav v3: one cream capsule with a plum sticker edge.
   Logo sits straight in, links in the middle with a sunshine
   highlight that slides between them, CTA on the right.
   ========================================================= */
.bar{inset:14px 0 auto;width:auto;max-width:min(1180px,calc(100% - 2 * var(--m)));margin-inline:auto;height:68px;padding:0 8px 0 20px;justify-content:space-between;background:var(--cloud)!important;color:var(--grape)!important;border:2px solid var(--grape);border-radius:99px;box-shadow:4px 4px 0 var(--grape)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
.bar.away{transform:translateY(calc(-100% - 34px))}
.bar .logo.island,.bar .nav-pill.island{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.bar .logo{height:auto;padding:0;border-radius:0;transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.bar .logo img{height:46px;filter:drop-shadow(0 2px 0 #24093a1f)}

.bar nav{gap:8px;height:100%}
.nav-pill{height:52px;padding:4px}
.nav-blob{top:4px;bottom:4px;background:var(--sun);box-shadow:inset 0 0 0 2px var(--grape)}
.bar nav .nav-pill a:not(.btn){padding:0 1.05em}
.bar nav .nav-pill a.hot:not(.btn){color:var(--grape)}
.bar .btn{min-height:50px;padding-inline:1.35em;box-shadow:none}
.menu-btn{width:50px;height:50px}
@media (max-width:1040px){
  .bar{inset:max(10px,env(safe-area-inset-top)) 0 auto;max-width:calc(100% - 20px);height:60px;padding:0 5px 0 14px;box-shadow:3px 3px 0 var(--grape)!important}
  .bar .logo img{height:38px}
  .menu-btn{width:46px;height:46px}
}
@media (min-width:1041px){.bar{max-width:calc(100% - 2 * var(--m))}}
/* the floating capsule ends ~86px down: reserve its full footprint */
:root{--bar:100px}
@media (max-width:1040px){:root{--bar:calc(80px + env(safe-area-inset-top))}}
/* inner pages: the first band runs up behind the floating nav */
.page{padding-top:0}
.page>section:first-child{padding-top:calc(var(--bar) + clamp(20px,4vw,52px))}
.page>section.th-top:first-child{min-height:100svh}

/* =========================================================
   Hover language: nothing grows. Labels roll, icons nudge,
   surfaces deepen, images warm up.
   ========================================================= */
.btn{transform:none!important;transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.btn .bt{display:inline-block;overflow:hidden;vertical-align:top;line-height:1.3;height:1.3em}
.btn .bt>span{display:block;transition:transform .55s cubic-bezier(.7,0,.2,1)}
.btn .bt>span::after{content:attr(data-t);display:block}
.btn svg{transition:transform .55s cubic-bezier(.7,0,.2,1)}
@media (hover:hover) and (pointer:fine){
  .btn:hover .bt>span{transform:translateY(-50%)}
  .btn:hover svg{transform:rotate(-12deg)}
  .op-foot .btn:not(.ghost):hover,.dock .btn:not(.alt):hover{box-shadow:5px 5px 0 var(--grape)}
  .th-next:hover img,.gallery-grid button:hover img,.prints .p:hover img,.acc>article:not(.open):hover{filter:saturate(1.12) brightness(1.04)}
  .th-next b{background:linear-gradient(currentColor,currentColor) 0 100%/0 3px no-repeat;transition:background-size .6s cubic-bezier(.7,0,.2,1)}
  .th-next:hover b{background-size:100% 3px}
}
.th-next img,.gallery-grid img,.prints .p img{transform:none!important;transition:filter .5s var(--ease)}
.bar .logo{transform:none!important}
@media (prefers-reduced-motion:reduce){.btn .bt>span,.btn svg{transition:none}}

/* =========================================================
   Team: real photos in brand arches, each with their therapy friend
   ========================================================= */
.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);margin-top:clamp(28px,3.4vw,56px)}
.member{background:var(--cloud);border-radius:var(--r);padding:12px 12px clamp(18px,1.8vw,26px);box-shadow:0 1px 0 #24093a0d,0 30px 50px -36px #24093a66;display:flex;flex-direction:column;min-width:0}
.m-photo{position:relative;margin:0;border-radius:999px 999px calc(var(--r) - 10px) calc(var(--r) - 10px);background:var(--mc);padding:10px 10px 0;aspect-ratio:4/5}
.m-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;border-radius:999px 999px calc(var(--r) - 16px) calc(var(--r) - 16px);display:block;transition:filter .5s var(--ease)}
.m-pal{position:absolute;right:-6px;bottom:-14px;width:clamp(54px,4.6vw,74px);rotate:8deg}
.m-text{padding:clamp(16px,1.6vw,22px) 6px 0}
.m-text b{display:block;font:720 clamp(1.25rem,1.6vw,1.6rem)/1.1 var(--display);letter-spacing:-.02em}
.m-text b .initials{white-space:nowrap}
.m-role{display:block;margin-top:.45rem;font-weight:600;font-size:1rem}
.m-cred{display:block;margin-top:.2rem;font-size:.92rem;line-height:1.35;color:var(--ink-soft)}
@media (hover:hover) and (pointer:fine){.member:hover .m-photo img{filter:saturate(1.1) brightness(1.04)}}
@media (max-width:1040px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.team-grid{gap:10px}.member{padding:8px 8px 16px}.m-photo{padding:7px 7px 0}.m-text b{font-size:1.12rem}.m-role{font-size:.92rem}.m-cred{font-size:.84rem}.m-pal{width:48px}}

/* therapy pages: the lead therapist with their photo */
.person-card{display:flex;align-items:center;gap:16px;margin-top:clamp(26px,3vw,44px)}
.person-card img{width:76px;height:76px;border-radius:50%;object-fit:cover;object-position:50% 20%;box-shadow:0 0 0 4px var(--cloud);flex:none}
.person-card .person{margin:0}
.m-photo .pal.m-pal{position:absolute;right:-8px;bottom:-16px;display:block}
/* AI-recreated cut-outs: figure stands in the arch, head rising toward the top */
.m-photo{padding:0;overflow:hidden;background:radial-gradient(70% 55% at 50% 30%,#ffffff59,transparent 70%),var(--mc)}
.m-photo img{object-fit:contain;object-position:50% 100%;border-radius:0;padding-top:14%;filter:drop-shadow(0 14px 18px #24093a33)}
.m-photo .pal.m-pal{right:6px;bottom:8px}
.member .m-photo{overflow:visible}
.member .m-photo>img{clip-path:inset(0 round 999px 999px calc(var(--r) - 10px) calc(var(--r) - 10px))}
.person-card img{object-fit:cover;object-position:50% 6%;background:var(--sun);transform:none}
.person-card img{object-position:50% 50%;background:none}

/* Social icons: round brand stickers with a hard plum shadow */
.social{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.soc{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--sun-x);color:var(--grape);box-shadow:3px 3px 0 var(--grape);border:2px solid var(--grape);text-decoration:none;transition:background-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.soc svg{width:22px;height:22px;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.soc span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.soc-ig{background:var(--pink-x)}.soc-fb{background:var(--sky-x)}.soc-yt{background:var(--coral-x)}.soc-wa{background:var(--mint-x)}
@media (hover:hover) and (pointer:fine){
  .soc:hover{background:var(--cloud);box-shadow:5px 5px 0 var(--grape)}
  .soc:hover svg{transform:rotate(-12deg)}
}
.soc:focus-visible{outline:3px solid var(--sun-x);outline-offset:3px}
.foot .soc{border-color:var(--cloud);box-shadow:3px 3px 0 var(--cloud);color:var(--grape)}
@media (hover:hover) and (pointer:fine){.foot .soc:hover{box-shadow:5px 5px 0 var(--cloud)}}
.foot .soc-h{margin-top:1.4rem}
.foot li .soc{min-height:0;display:grid}
.social-menu{margin-top:22px}
.social-close{margin-top:14px}
.close .soc{border-color:var(--cloud);box-shadow:3px 3px 0 var(--cloud)}

/* Phone dock: a compact floating pill instead of a full-width bar */
.dock{left:auto;right:max(14px,env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));inset-inline-start:auto;width:auto;padding:0;gap:8px;background:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;align-items:center;transform:translateY(calc(100% + 30px));transition:transform .5s cubic-bezier(.3,1.3,.5,1),opacity .3s}
.dock.show{transform:none}
.dock.quiet{transform:translateY(calc(100% + 30px));opacity:0;pointer-events:none}
.dk-wa,.dk-call{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:99px;border:2px solid var(--grape);box-shadow:3px 3px 0 var(--grape);text-decoration:none;font:650 .98rem/1 var(--face);color:var(--grape)}
.dk-wa{background:var(--sun-x);padding:0 18px 0 14px}
.dk-call{width:52px;background:var(--cloud)}
.dk-wa svg,.dk-call svg{width:22px;height:22px}
.dk-wa:active,.dk-call:active{box-shadow:1px 1px 0 var(--grape);translate:2px 2px}
@media (max-width:1040px){.foot{padding-bottom:calc(var(--m) + env(safe-area-inset-bottom))}.foot-name{padding-bottom:clamp(18px,4vw,40px)}.words{padding-bottom:calc(var(--m) * 2)}.close{padding-bottom:var(--m)}}
@media (prefers-reduced-motion:reduce){.dock{transition:none}}
/* phones: a soft band behind the floating nav so the page never shows through above it */
@media (max-width:1040px){
  body::before{content:"";position:fixed;z-index:49;left:0;right:0;top:0;height:calc(max(10px,env(safe-area-inset-top)) + 84px);background:var(--top-bg,var(--grape));-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent);pointer-events:none;transition:background-color .3s,transform .5s cubic-bezier(.65,0,.25,1)}
  html.nav-away body::before{transform:translateY(-100%)}
  .dk-wa{height:48px;padding:0 16px 0 12px;font-size:.92rem}.dk-call{width:48px;height:48px}
}

/* =========================================================
   Phone menu: plum sheet, friend icons, staggered rows, note card
   ========================================================= */
dialog.menu{background:radial-gradient(70% 45% at 100% 0%,#5b1a7a 0,transparent 70%),radial-gradient(60% 40% at 0% 100%,#3d0f58 0,transparent 70%),var(--grape)!important;color:var(--cloud);gap:0;padding-top:max(12px,env(safe-area-inset-top));overflow-x:hidden}
dialog.menu::backdrop{background:#24093a99}
dialog.menu[open]{animation:mnIn .45s cubic-bezier(.2,.9,.25,1)}
@keyframes mnIn{from{opacity:0;transform:translateY(-14px) scale(.985)}}
.mn-glow{position:absolute;right:-20vw;top:30%;width:70vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#a535b155,transparent 65%);pointer-events:none}
.mn-spark{position:absolute;width:20px;fill:var(--sun-x);pointer-events:none;animation:twinkle2 3s ease-in-out infinite}
.mn-spark.s1{right:22%;top:13%}.mn-spark.s2{left:8%;bottom:30%;width:14px;fill:var(--cloud);animation-delay:-1.4s}
dialog.menu .menu-top{background:none;position:relative;z-index:1;min-height:60px}
.mn-logo{display:flex;align-items:center;height:56px;padding:0 16px;border-radius:99px;background:var(--cloud);border:2px solid var(--grape);box-shadow:3px 3px 0 #00000055}
.mn-logo img{height:38px;width:auto}
dialog.menu .menu-close{width:52px;height:52px;background:var(--sun-x);color:var(--grape);border:2px solid var(--grape);box-shadow:3px 3px 0 #00000066}
dialog.menu .menu-close svg{width:22px;height:22px}
dialog.menu .menu-links{position:relative;z-index:1;margin-top:clamp(18px,3.4vh,32px);display:grid;gap:2px}
dialog.menu .menu-links>a{display:flex;align-items:center;gap:14px;min-height:64px;padding:8px 6px;border-radius:20px;color:var(--cloud);font:inherit;text-decoration:none;animation:mnRow .6s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(.08s + var(--i) * .055s);transition:background-color .25s}
dialog.menu .menu-links>a+a{box-shadow:0 -1px 0 #fff8f11a}
dialog.menu .menu-links>a:active,dialog.menu .menu-links>a:focus-visible{background:#fff8f114}
@keyframes mnRow{from{opacity:0;transform:translateX(-26px)}}
.mn-ic{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:16px;background:color-mix(in srgb,var(--c) 22%,transparent)}
.mn-ic .pal{width:36px}
.mn-ic .pal svg{filter:none}
.mn-star svg{width:34px;height:34px;color:var(--sun-x);--smile-c:var(--grape)}
.mn-t{display:grid;flex:1;min-width:0}
.mn-t b{font:760 clamp(1.55rem,6.8vw,2.1rem)/1.05 var(--display);letter-spacing:-.025em}
.mn-t small{font-size:.86rem;color:#fff8f1a6;margin-top:3px}
.mn-ar{width:22px;height:22px;flex:none;color:var(--c);transition:transform .3s}
dialog.menu .menu-links>a:active .mn-ar{transform:translateX(4px)}
.mn-card{position:relative;z-index:1;margin-top:auto;background:var(--sun-x);color:var(--grape);border:2px solid var(--grape);border-radius:24px;box-shadow:4px 4px 0 #00000066;padding:18px;animation:mnRow .6s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(.1s + var(--i) * .055s)}
.mn-card b{display:block;font:760 1.35rem/1.1 var(--display);letter-spacing:-.02em}
.mn-card p{font-size:.95rem;margin:4px 0 14px;color:var(--ink-soft)}
dialog.menu .mn-card .menu-cta{padding:0;margin:0;gap:8px;--fill:var(--grape);--fill-ink:var(--cloud)}
dialog.menu .mn-card .btn{min-height:50px;background:var(--grape);color:var(--cloud);box-shadow:none}
dialog.menu .mn-card .btn.alt{background:transparent;color:var(--grape);box-shadow:inset 0 0 0 2px var(--grape);border:0}
.mn-foot{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;animation:mnRow .6s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(.1s + var(--i) * .055s)}
.mn-foot .social{margin:0}
.mn-foot .soc{width:44px;height:44px;border-color:var(--cloud);box-shadow:2px 2px 0 var(--cloud)}
.mn-foot>span{font-size:.82rem;color:#fff8f199;text-align:right}
@media (max-height:700px){dialog.menu .menu-links>a{min-height:54px}.mn-t small{display:none}.mn-card p{display:none}}
@media (prefers-reduced-motion:reduce){dialog.menu[open],dialog.menu .menu-links>a,.mn-card,.mn-foot,.mn-spark{animation:none}}
.btn .bt{white-space:nowrap}
dialog.menu .mn-card .btn{flex:1 1 0;padding-inline:14px;font-size:.98rem}
dialog.menu .menu-links>a+a{box-shadow:none;position:relative}
dialog.menu .menu-links>a+a::before{content:"";position:absolute;left:68px;right:6px;top:-1px;height:1px;background:#fff8f11f}
/* calmer phone menu */
dialog.menu .menu-links{margin-top:clamp(26px,5vh,44px);gap:0}
dialog.menu .menu-links>a{min-height:58px;gap:14px;padding:6px 4px}
dialog.menu .menu-links>a+a::before{left:52px;background:#fff8f114}
.mn-ic{width:36px;height:36px;border-radius:0;background:none}
.mn-ic .pal{width:32px}
.mn-star svg{width:30px;height:30px}
.mn-t b{font-size:clamp(1.45rem,6.4vw,1.9rem)}
.mn-ar{width:18px;height:18px;opacity:.75}
.mn-spark.s2{display:none}
.mn-card{background:none;border:0;box-shadow:none;padding:0}
dialog.menu .mn-card .btn{background:var(--sun-x);color:var(--grape);min-height:54px}
dialog.menu .mn-card .btn.alt{background:transparent;color:var(--cloud);box-shadow:inset 0 0 0 2px #fff8f159}
.mn-foot{justify-content:center;margin-top:18px}
/* sunshine menu */
dialog.menu{background:radial-gradient(70% 45% at 100% 0%,#ffe08a 0,transparent 70%),radial-gradient(60% 40% at 0% 100%,#ffb92e 0,transparent 70%),var(--sun-x)!important;color:var(--grape)}
dialog.menu::backdrop{background:#24093a80}
.mn-glow{background:radial-gradient(circle,#ffffff66,transparent 65%)}
.mn-spark.s1{fill:var(--orchid)}
.mn-logo{box-shadow:3px 3px 0 var(--grape)}
dialog.menu .menu-close{background:var(--grape);color:var(--sun-x);box-shadow:3px 3px 0 #24093a55}
dialog.menu .menu-links>a{color:var(--grape)}
dialog.menu .menu-links>a+a::before{background:#24093a1f}
dialog.menu .menu-links>a:active,dialog.menu .menu-links>a:focus-visible{background:#ffffff4d}
.mn-ar{color:var(--grape);opacity:.55}
.mn-star svg{color:var(--orchid);--smile-c:var(--sun-x)}
.mn-ic .pal svg{filter:drop-shadow(0 3px 3px #24093a33)}
dialog.menu .mn-card .btn{background:var(--grape);color:var(--cloud)}
dialog.menu .mn-card .btn.alt{background:transparent;color:var(--grape);box-shadow:inset 0 0 0 2px var(--grape)}
.mn-foot .soc{border-color:var(--grape);box-shadow:2px 2px 0 var(--grape)}
.mn-foot .soc-wa{background:var(--mint-x)}
.mn-ic{width:42px;height:42px;border-radius:50%;background:var(--cloud);box-shadow:0 0 0 2px var(--grape)}
.mn-ic .pal{width:28px}
.mn-ic .pal svg{filter:none}
.mn-star svg{width:26px;height:26px}
dialog.menu .menu-links>a+a::before{left:58px}

/* =========================================================
   Phone menu v3: type-led. Big words, small numbers, one friend.
   ========================================================= */
dialog.menu{background:var(--sun-x)!important;padding-bottom:max(22px,env(safe-area-inset-bottom))}
.mn-glow,.mn-spark{display:none}
.mn-logo{background:none;border:0;box-shadow:none;padding:0;height:auto}
.mn-logo img{height:44px;filter:drop-shadow(0 2px 0 #24093a33)}
dialog.menu .menu-close{box-shadow:none;border:0;width:50px;height:50px}
dialog.menu .menu-links{counter-reset:mn;margin-top:clamp(30px,7vh,64px);gap:clamp(2px,.8vh,8px)}
dialog.menu .menu-links>a{counter-increment:mn;min-height:0;padding:2px 0;gap:0;align-items:flex-start;background:none!important}
dialog.menu .menu-links>a+a::before{display:none}
dialog.menu .menu-links>a::after{content:"0" counter(mn);order:-1;font:650 .78rem/1 var(--face);letter-spacing:.04em;color:var(--grape);opacity:.55;width:34px;flex:none;padding-top:.9em}
.mn-ic,.mn-ar{display:none}
.mn-t b{font:780 clamp(2.4rem,11.5vw,3.3rem)/1.02 var(--display);letter-spacing:-.035em;color:var(--grape);transition:color .2s}
dialog.menu .menu-links>a:active .mn-t b,dialog.menu .menu-links>a:focus-visible .mn-t b{color:var(--orchid)}
.mn-peek{position:absolute;right:-34px;bottom:118px;width:150px;rotate:-14deg;pointer-events:none;animation:mnPeek .8s cubic-bezier(.3,1.5,.5,1) both .35s}
.mn-peek .pal svg{filter:drop-shadow(0 14px 14px #24093a33)}
@keyframes mnPeek{from{transform:translateX(120%) rotate(30deg)}}
dialog.menu .mn-card .menu-cta{display:flex;gap:10px}
dialog.menu .mn-card .btn{flex:1;min-height:56px;font-size:1rem;background:var(--grape);color:var(--cloud);box-shadow:none}
.mn-call{display:grid;place-items:center;width:56px;height:56px;flex:none;border-radius:50%;background:var(--cloud);color:var(--grape);border:2px solid var(--grape)}
.mn-call svg{width:22px;height:22px}
.mn-foot{justify-content:flex-start;margin-top:16px}
.mn-foot .social{gap:18px}
.mn-foot .soc{width:auto;height:auto;background:none!important;border:0;box-shadow:none!important;border-radius:0}
.mn-foot .soc svg{display:none}
.mn-foot .soc span{position:static;width:auto;height:auto;clip-path:none;overflow:visible;font:600 .92rem/1 var(--face);color:var(--grape);text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1.5px}
.mn-foot .soc-wa{display:none}
.mn-foot li:has(.soc-wa){display:none}
@media (max-height:700px){.mn-t b{font-size:clamp(2rem,9.5vw,2.6rem)}.mn-peek{display:none}}
@media (prefers-reduced-motion:reduce){.mn-peek{animation:none}}

/* Phone menu v3.1: refinement */
dialog.menu{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
dialog.menu .menu-top{min-height:64px;align-items:center}
.mn-logo img{height:40px}
dialog.menu .menu-close{width:46px;height:46px}
dialog.menu .menu-close svg{width:18px;height:18px}
/* tighter, calmer type with more air between rows */
dialog.menu .menu-links{margin-top:clamp(36px,8vh,72px);gap:clamp(6px,1.4vh,14px)}
.mn-t b{font-size:clamp(2.2rem,10.4vw,3rem);line-height:1;letter-spacing:-.04em}
dialog.menu .menu-links>a::after{width:30px;padding-top:.75em;font-size:.72rem;opacity:.5}
/* active section: a soft plum underline, sliding in */
dialog.menu .menu-links>a .mn-t b{background:linear-gradient(currentColor,currentColor) 0 100%/0 4px no-repeat;padding-bottom:4px;transition:background-size .45s cubic-bezier(.7,0,.2,1),color .2s}
dialog.menu .menu-links>a.cur .mn-t b{background-size:100% 4px}
dialog.menu .menu-links>a:active .mn-t b{background-size:100% 4px}
/* friend smaller and tucked lower, so it doesn't crowd the buttons */
.mn-peek{width:118px;right:-26px;bottom:auto;top:calc(50% + 40px);rotate:-12deg}
/* bottom: a hairline then actions */
.mn-card{border-top:1.5px solid #24093a26;padding-top:20px}
dialog.menu .mn-card .btn{min-height:54px;font-weight:650}
.mn-call{width:54px;height:54px;background:transparent;border-color:var(--grape)}
.mn-foot{margin-top:14px;justify-content:space-between}
.mn-foot .soc span{font-size:.86rem;text-decoration:none;opacity:.75}
.mn-foot .social{gap:16px}
.mn-foot::after{content:"Villiappally, Vatakara";font-size:.8rem;opacity:.55;color:var(--grape)}
/* entrance: rows rise instead of sliding sideways */
@keyframes mnRow{from{opacity:0;transform:translateY(18px)}}
.mn-card{border-top:0;border-radius:0;position:relative}
.mn-card::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;background:#24093a26}
.mn-t{flex:0 1 auto;display:inline-block}
.mn-t b{display:inline}
.mn-foot{flex-wrap:nowrap}
.mn-foot .social{flex-wrap:nowrap;gap:14px}
.mn-foot::after{content:"Villiappally";white-space:nowrap}
/* brand orchid (#A535B1) replaces the deep plum on large surfaces; plum stays as text ink */
:root{--brand:#A535B1;--brand-d:#8C2898}
html{background:var(--brand)}
.foot{background:var(--brand)}
.foot .soc{color:var(--brand)}
.dock{background:#A535B1ee}
dialog.menu{background:radial-gradient(70% 45% at 100% 0%,#C35BCE 0,transparent 70%),radial-gradient(60% 40% at 0% 100%,#82228D 0,transparent 70%),var(--brand)!important}
dialog.menu::backdrop{background:#A535B199}
.bar .btn,.menu-btn{background:var(--brand)!important;color:#fff!important}
.nav-blob{background:var(--brand)}
/* the real Smile logo, alive: kids peek, wave and tilt; the i-face bounces */
.foot-logo{display:flex;justify-content:center;margin:clamp(40px,6vw,96px) auto 0;padding:0 0 clamp(18px,2.4vw,40px);cursor:pointer;-webkit-tap-highlight-color:transparent}
.fl-stage{position:relative;width:min(100%,1100px,118svh);aspect-ratio:2400/1169;filter:drop-shadow(0 22px 36px #4a0a5559)}
.fl-stage img{position:absolute;height:auto;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
.fl-base{transform-origin:50% 100%}
.foot-logo .fl-stage>*{opacity:0}
.foot-logo.is-in .fl-base{animation:flBase .9s cubic-bezier(.34,1.56,.64,1) both}
.foot-logo.is-in .fl-bh{animation:flPeek .8s cubic-bezier(.34,1.7,.64,1) .35s both,flTiltB 3.4s ease-in-out 1.15s infinite}
.foot-logo.is-in .fl-ba{animation:flPeek .7s cubic-bezier(.34,1.7,.64,1) .5s both,flWaveB 3.2s ease-in-out 1.2s infinite}
.foot-logo.is-in .fl-gh{animation:flPeek .8s cubic-bezier(.34,1.7,.64,1) .55s both,flTiltG 3.8s ease-in-out 1.35s infinite}
.foot-logo.is-in .fl-ga{animation:flPeek .7s cubic-bezier(.34,1.7,.64,1) .7s both,flWaveG 3.6s ease-in-out 1.5s infinite}
.foot-logo.is-in .fl-dot{animation:flPop .6s cubic-bezier(.34,1.7,.64,1) .8s both,flBounce 2.6s cubic-bezier(.45,0,.55,1) 1.4s infinite}
@keyframes flBase{from{opacity:0;transform:translateY(14%) scale(.9)}to{opacity:1;transform:none}}
@keyframes flPeek{from{opacity:0;transform:translateY(40%) scale(.4)}to{opacity:1;transform:none}}
@keyframes flPop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
@keyframes flTiltB{0%,100%{opacity:1;transform:rotate(0)}30%{transform:rotate(-5deg) translateY(-1.5%)}60%{transform:rotate(3deg)}}
@keyframes flTiltG{0%,100%{opacity:1;transform:rotate(0)}35%{transform:rotate(4.5deg) translateY(-1.5%)}70%{transform:rotate(-3deg)}}
@keyframes flWaveB{0%,52%,100%{opacity:1;transform:rotate(0)}8%{transform:rotate(10deg)}16%{transform:rotate(-3deg)}24%{transform:rotate(10deg)}32%{transform:rotate(-3deg)}40%{transform:rotate(7deg)}}
@keyframes flWaveG{0%,100%{opacity:1;transform:rotate(0)}50%{transform:rotate(0)}58%{transform:rotate(-9deg)}66%{transform:rotate(-1deg)}74%{transform:rotate(-9deg)}82%{transform:rotate(-1deg)}90%{transform:rotate(-6deg)}}
@keyframes flBounce{0%,62%,100%{opacity:1;transform:none}70%{transform:translateY(3%) scale(1.06,.9)}80%{transform:translateY(-10%) scale(.95,1.06) rotate(-4deg)}90%{transform:translateY(1%) scale(1.03,.96)}}
/* tap or hover: everybody gets excited */
.foot-logo.party .fl-ba{animation:flWaveFast .32s ease-in-out 0s 6 alternate;opacity:1}
.foot-logo.party .fl-ga{animation:flWaveFastG .3s ease-in-out .08s 6 alternate;opacity:1}
.foot-logo.party .fl-bh,.foot-logo.party .fl-gh{animation:flHop .5s cubic-bezier(.34,1.6,.64,1) 0s 3;opacity:1}
.foot-logo.party .fl-dot{animation:flSpin .9s cubic-bezier(.34,1.5,.64,1) 0s 2;opacity:1}
.foot-logo.party .fl-base{animation:flJiggle .6s ease-in-out;opacity:1}
@keyframes flWaveFast{from{transform:rotate(-3deg)}to{transform:rotate(11deg)}}
@keyframes flWaveFastG{from{transform:rotate(0)}to{transform:rotate(-10deg)}}
@keyframes flHop{0%,100%{transform:none}45%{transform:translateY(-9%) rotate(-3deg)}}
@keyframes flSpin{0%,100%{transform:none}40%{transform:translateY(-16%) scale(1.08)}70%{transform:translateY(2%) scale(1.05,.92)}}
@keyframes flJiggle{0%,100%{transform:none}25%{transform:scale(1.02,.97)}50%{transform:scale(.98,1.03)}75%{transform:scale(1.01,.99)}}
@media (max-width:1040px){.foot-logo{margin-top:48px;padding-bottom:calc(88px + env(safe-area-inset-bottom))}.fl-stage{width:min(100%,560px)}}
@media (max-width:1040px){.foot-logo{padding-bottom:clamp(18px,4vw,40px)}}
@media (prefers-reduced-motion:reduce){.foot-logo .fl-stage>*,.foot-logo.is-in .fl-stage>*,.foot-logo.party .fl-stage>*{opacity:1;animation:none!important}}
/* footer logo: big, edge to edge like the old wordmark */
.foot-logo{margin-top:clamp(32px,5vw,80px)}
.fl-stage{width:min(100%,160svh)}
@media (max-width:1040px){.fl-stage{width:100%}.foot-logo{margin-top:36px}}
/* footer: the real Smile logo, static */
.foot-logo{cursor:auto}
.fl-img{display:block;width:min(100%,160svh);height:auto;margin:0 auto;filter:drop-shadow(0 22px 36px #4a0a5559)}
@media (max-width:1040px){.fl-img{width:100%}}
/* footer: crisp type wordmark, the gang perched on the letters */
.foot-gang .fn{display:inline-block;position:relative}
.foot-gang .pal.fperch{position:absolute;display:block;z-index:1}
.foot-gang .pal.fg-s{left:-.02em;bottom:78%;width:.24em;rotate:-10deg}
.foot-gang .pal.fg-m{left:.98em;bottom:58%;width:.22em;rotate:6deg}
.foot-gang .pal.fg-l{left:2.02em;bottom:84%;width:.2em;rotate:-6deg}
.foot-gang .pal.fg-e{right:-.02em;bottom:58%;width:.21em;rotate:9deg}
/* perches measured against the real letter boxes */
.foot-gang .pal.fg-s{left:.05em;bottom:84%;width:.24em;rotate:-10deg}
.foot-gang .pal.fg-m{left:.69em;bottom:66%;width:.22em;rotate:6deg}
.foot-gang .pal.fg-l{left:1.61em;bottom:86%;width:.2em;rotate:-6deg}
.foot-gang .pal.fg-e{left:auto;right:.11em;bottom:66%;width:.21em;rotate:9deg}
/* footer wordmark: white, a touch bigger */
.foot-name.foot-gang{color:#fff;font-size:min(38vw,66svh)}
/* nav active state: the orchid pill rests on the chapter you are in */
.nav-blob{background:var(--brand);box-shadow:inset 0 0 0 2px var(--grape),0 6px 14px -8px #4a0a5599}
.bar nav .nav-pill a.hot:not(.btn){color:#fff}
/* footer sign-off: note on the left, the Kahf Lab credit on the right; on hover the pixels hop, one colour */
.foot-base{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 48px;margin-top:clamp(30px,4vw,60px);padding-top:clamp(18px,2vw,26px);border-top:1px solid #fff8f124}
.foot-base .foot-note{margin:0}
.kahf{flex:none;display:inline-flex;align-items:center;gap:.7em;padding:.55em .9em;margin:-.55em -.9em -.55em 0;border-radius:999px;font-size:var(--s-small);line-height:1;text-decoration:none;color:var(--cloud);transition:background-color .35s var(--ease)}
.kahf-by{opacity:.62;font-weight:420;transition:opacity .35s var(--ease)}
.kahf-mark{width:1.4em;height:auto;overflow:visible;margin-right:-.2em}
.kahf-mark rect{fill:currentColor;transform-box:fill-box;transform-origin:50% 100%}
.kahf-name{font-family:"Bricolage",var(--face);font-weight:800;font-stretch:92%;letter-spacing:.015em;font-size:1.14em}
.kahf:hover,.kahf:focus-visible{background:#fff8f112}
.kahf:hover .kahf-by,.kahf:focus-visible .kahf-by{opacity:1}
@keyframes kahfHop{0%,100%{transform:translateY(0)}40%{transform:translateY(-60%)}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .kahf:hover .kahf-mark rect{animation:kahfHop .55s var(--spring) both}
  .kahf:hover .kb2{animation-delay:.05s}.kahf:hover .kb3{animation-delay:.1s}.kahf:hover .kb4{animation-delay:.15s}.kahf:hover .kb5{animation-delay:.2s}.kahf:hover .kb6{animation-delay:.25s}
}
@media (max-width:720px){.foot-base{flex-direction:column;align-items:flex-start}.kahf{margin-left:-.9em}}
/* phone menu on orchid: cream type + sunshine actions instead of dark plum */
dialog.menu{color:var(--cloud)}
dialog.menu .menu-links>a,.mn-t b{color:var(--cloud)}
dialog.menu .menu-links>a::after{color:var(--cloud);opacity:.6}
dialog.menu .menu-links>a:active .mn-t b,dialog.menu .menu-links>a:focus-visible .mn-t b,dialog.menu .menu-links>a.cur .mn-t b{color:var(--sun-x)}
dialog.menu .menu-close{background:var(--cloud);color:var(--brand)}
dialog.menu .mn-card .btn{background:var(--sun-x);color:var(--grape);box-shadow:0 6px 18px #4a0a5540}
.mn-call{background:transparent;color:var(--cloud);border-color:var(--cloud)}
.mn-card::before{background:#fff8f133}
.mn-foot .soc span{color:var(--cloud);opacity:.85}
.mn-foot::after{color:var(--cloud);opacity:.65}
.mn-logo img{filter:drop-shadow(0 2px 0 #4a0a5540)}