/*! Piero Salardi® · Site shell (no Elementor) · header, menu, Sound, footer · v1.0
 * One header, one menu and one footer for every page. Same position on every page:
 *   up to 1024px  the header line sits at 43px from the top (logo 21px, menu button 19px)
 *   from 1025px   the header line sits at 51px from the top (logo 29px, menu button 27px)
 *   side margin   24px on phones, 32px from 768px
 */
@font-face{font-family:"Galano Grot Reg";src:url(/wp-content/uploads/2025/10/3551AC_11_0.woff2) format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Galano Grot Bold";src:url(/wp-content/uploads/2025/10/3551AC_12_0.woff2) format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"TT Firs Neue Bold";src:url(/wp-content/uploads/2026/05/TT_Firs_Neue_Bold.woff2) format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Romie";src:url(/wp-content/uploads/2024/10/Romie-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{--ps-ink-l:#FFFFFF;--ps-ink-r:#FFFFFF;--psh-m:24px;--psh-c:43px}
@media(min-width:768px){:root{--psh-m:32px}}
@media(min-width:1025px){:root{--psh-c:51px}}

/* ---------- header ---------- */
.psh{position:fixed;top:0;left:0;right:0;height:0;z-index:10040;pointer-events:none}
.psh a,.psh button{pointer-events:auto}
.psh-logo{position:fixed;left:var(--psh-m);top:calc(var(--psh-c) - 22px);display:block;width:44px;height:44px;line-height:0;z-index:10040;-webkit-tap-highlight-color:transparent;transition:opacity .35s ease}
html.psf-in .psh-logo{opacity:0;pointer-events:none}
html.psm-open .psh-logo{opacity:0;pointer-events:none}
.pslg{position:relative;display:block;width:44px;height:44px;line-height:0}
.pslg svg{position:absolute;left:6px;top:8.5px;width:32px;height:27px;overflow:visible;pointer-events:none}
.pslg .pc{fill:var(--ps-ink-l);transition:fill .45s ease;transform-box:fill-box;transform-origin:0 50%}
@media(hover:hover) and (pointer:fine){.pslg:hover .pc{animation:pslgeq .42s ease-in-out infinite alternate;animation-delay:calc(var(--row)*-110ms)}}
.pslg.run .pc{animation:pslgeq .42s ease-in-out infinite alternate;animation-delay:calc(var(--row)*-110ms)}
@keyframes pslgeq{0%{transform:scaleX(1)}100%{transform:scaleX(.28)}}

/* the menu button: two lines, an X while the menu is open */
.ps-burger,.ps-burger:hover,.ps-burger:focus,.ps-burger:active{position:fixed;right:var(--psh-m);top:calc(var(--psh-c) - 24px);z-index:10050;display:block;width:48px;height:48px;margin:0;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;min-height:0!important;cursor:pointer;color:var(--ps-ink-r);-webkit-tap-highlight-color:transparent;transition:color .45s ease}
.ps-burger:focus-visible{outline:2px solid #9EC7FF;outline-offset:4px;border-radius:4px}
.ps-burger i{position:absolute;left:50%;top:50%;width:20px;height:2px;margin-left:-10px;border-radius:2px;background:currentColor;transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.ps-burger i:nth-child(1){transform:translateY(-3.5px)}
.ps-burger i:nth-child(2){transform:translateY(1.5px)}
@media(hover:hover){.ps-burger:not(.is-open):hover i:nth-child(1){transform:translateY(-5px)}.ps-burger:not(.is-open):hover i:nth-child(2){transform:translateY(3px)}}
@keyframes psb-pop{0%{scale:1}30%{scale:.8}65%{scale:1.1}100%{scale:1}}
.ps-burger.pop{animation:psb-pop .32s cubic-bezier(.3,0,.3,1)}
.ps-burger.is-open{color:#fff}
.ps-burger.is-open i:nth-child(1){transform:translateY(-1px) rotate(45deg)}
.ps-burger.is-open i:nth-child(2){transform:translateY(-1px) rotate(-45deg)}

/* Sound: text and EQ bars, left of the menu button, on the line of the lower menu stroke */
.psq,.psq:hover,.psq:focus,.psq:active{position:fixed;right:calc(var(--psh-m) + 56px);top:calc(var(--psh-c) - 24px);z-index:10049;display:inline-flex;align-items:center;height:32px;margin:0!important;padding:0 4px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;min-height:0!important;color:var(--ps-ink-q,var(--ps-ink-r))!important;font:400 9px/1 "Galano Grot Reg",sans-serif!important;letter-spacing:1.4px;text-transform:uppercase;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .35s ease,color .45s ease}
.psq:focus-visible{outline:2px solid #9EC7FF;outline-offset:2px}
.psq.hide{opacity:0;pointer-events:none}
.psq-l{display:inline-flex;align-items:baseline}
.psq-eq{display:inline-flex;align-items:flex-end;gap:2.7px;height:12.6px;margin-right:8px}
.psq-eq i{display:block;width:2.7px;height:3.6px;background:currentColor}
.psq[aria-pressed="true"] .psq-eq i{animation:psqEq 1s ease-in-out infinite}
.psq[aria-pressed="true"] .psq-eq i:nth-child(2){animation-delay:-.4s}
.psq[aria-pressed="true"] .psq-eq i:nth-child(3){animation-delay:-.7s}
@keyframes psqEq{0%,100%{height:3.6px}50%{height:12.6px}}

/* ---------- menu ---------- */
.psm{position:fixed;inset:0;z-index:10030;display:none;overflow:hidden;color:#FBFBFB;opacity:0;will-change:clip-path}
.psm.on{display:block}
.psm *{box-sizing:border-box}
.psm-bg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;background:radial-gradient(120% 90% at 20% 80%,#0161FF 0%,#0422B6 35%,#020A3A 70%,#16181D 100%)}
.psm.psm-anim{transition:clip-path var(--psm-d,.7s) cubic-bezier(.76,0,.24,1),-webkit-clip-path var(--psm-d,.7s) cubic-bezier(.76,0,.24,1),opacity .18s linear}
.psm-sc{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;display:flex;align-items:center;justify-content:center}
.psm-in{position:relative;display:flex;width:920px;max-width:100%;margin:auto 0;padding:0}
.psm-l{width:40%;margin-top:87px;margin-left:-3px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.psm-r{width:60%;margin-top:64px;display:flex;flex-direction:column;gap:48px}
.psm a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.psm a:focus{outline:none}
.psm a:focus-visible{outline:2px solid #9EC7FF;outline-offset:4px}
.psm-name{margin:0;font:400 30px/30px "TT Firs Neue Bold",sans-serif;letter-spacing:-.5px;color:#FBFBFB}
.psm-tag{display:block;height:24px;margin:-11px 0 0;padding-top:1px;font:400 16px/20px "Romie",serif;color:#FBFBFB}
.psm-mail{display:inline-block;margin-top:40px;padding:8px 8px 8px 0;font:400 14px/14px "Galano Grot Bold",sans-serif;color:#FBFBFB;transition:letter-spacing 1s ease}
.psm-mail:hover{letter-spacing:1px}
.psm-badge{display:block;width:130px;height:130px;margin-top:32px;will-change:transform}
.psm-badge svg{display:block;width:100%;height:100%}
.psm-badge #Texto{transform-origin:50% 50%;animation:psmRot 7s linear infinite}
@keyframes psmRot{to{transform:rotate(-360deg)}}
.psm-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.psm-nav a{display:block;padding:27px 0;border-bottom:1px solid #F2EDE1;font:400 21px/23px "TT Firs Neue Bold",sans-serif;letter-spacing:-.6px;color:#FBFBFB;transition:letter-spacing 1.5s ease,color .3s ease}
.psm-nav a:hover,.psm-nav a:focus-visible{color:#DFD9D1;letter-spacing:3px}
.psm-nav a[aria-current="page"]{color:#9EC7FF}
.psm-row{display:flex;align-items:center;gap:24px}
.psm-row>*{flex:1 1 0}
.psm-copy a{font:400 16px/28px "Galano Grot Bold",sans-serif;text-decoration:underline;text-underline-offset:3px;color:#FBFBFB;transition:letter-spacing 1.5s ease,color .3s ease}
.psm-copy a:hover{letter-spacing:2px;color:#DFD9D1}
.psm-nft a{display:inline-flex;align-items:center;justify-content:center;width:160px;height:52px;border:1px solid #FBFBFB;border-radius:999px;font:400 16px/1 "Galano Grot Bold",sans-serif;color:#FBFBFB;background:transparent;transition:box-shadow 1s ease,letter-spacing 1s ease,color .3s ease,border-color .3s ease}
.psm-nft a:hover{box-shadow:0 0 64px 1px rgba(242,237,255,.4);letter-spacing:1px;color:#DFD9D1;border-color:#DFD9D1}
.psm-soc{display:flex;align-items:center;gap:24px}
.psm-soc a{display:block;width:24px;height:24px;color:#FBFBFB;transition:transform .3s ease,color .3s ease}
.psm-soc a:hover{transform:scale(1.1);color:#DFD9D1}
.psm-soc svg{display:block;height:24px;width:auto;fill:currentColor}
/* items rise in one after another */
.psm-i{transition:opacity .5s ease calc(.28s + var(--i,0)*.07s),transform .7s cubic-bezier(.22,1,.36,1) calc(.28s + var(--i,0)*.07s)}
.psm.psm-snap .psm-i{transition:none!important}
.psm.psm-pre .psm-i{opacity:0;transform:translateY(26px);transition:opacity .18s ease,transform .18s ease}
@media(max-width:1024px){
 .psm-sc{align-items:flex-start}
 .psm-in{flex-direction:column;width:100%;margin:auto 0;padding:96px 32px 64px}
 .psm-l{width:100%;margin:0 0 40px}
 .psm-tag{margin:0}
 .psm-mail{margin:0 0 36px}
 .psm-badge{margin:0}
 .psm-r{width:100%;margin-top:0}
 .psm-row{flex-direction:column;align-items:flex-start;gap:24px}
 .psm-row>*{flex:none}
}
@media(max-width:767px){
 .psm-sc{align-items:center}
 .psm-in{padding:0 32px}
 .psm-l{display:none}
 .psm-nav a{padding:18px 0;font-size:23px;line-height:25px;letter-spacing:-.9px}
 .psm-r{gap:26px}
 .psm-row{flex-direction:row;align-items:center;justify-content:space-between;gap:16px}
 .psm-soc{display:none}
}
@media(prefers-reduced-motion:reduce){.psm-i,.psm.psm-anim{transition:none!important}.psm-badge #Texto,.pslg .pc,.psq-eq i{animation:none!important}}
html.psm-lock,html.psm-lock body{overflow:hidden!important}

/* ---------- footer ("Big statement") ---------- */
.psf{--ink:#F8F3ED;--soft:rgba(248,243,237,.62);--line:rgba(248,243,237,.16);--accent:#9EC7FF;box-sizing:border-box;position:relative;z-index:2;background:#16181D;color:var(--ink);padding:120px 32px 32px;font:400 16px/1.5 "Galano Grot Reg",sans-serif;overflow:hidden}
.psf *{box-sizing:border-box}
html.ps-ck-on .psf{padding-bottom:calc(32px + var(--ps-ck,0px))}
.psf a{color:inherit;text-decoration:none}
.psf-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.psf-kicker{grid-column:1/-1;margin:0 0 16px;color:var(--soft);font:400 12px/1 "Galano Grot Reg",sans-serif;letter-spacing:.16em;text-transform:uppercase}
.psf-big{grid-column:1/-1;display:block;margin:0 0 48px;font:400 clamp(72px,15.5vw,264px)/.86 "TT Firs Neue Bold",sans-serif;letter-spacing:-.035em;color:var(--ink);white-space:nowrap}
.psf-big span{display:inline-block;transition:color .3s ease}
.psf-big:hover span,.psf-big:focus-visible span{color:var(--accent)}
.psf-big:focus-visible{outline:2px solid var(--accent);outline-offset:8px}
.psf-cta{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:24px 32px;margin:0 0 120px}
.psf-mail{font:400 clamp(20px,2vw,28px)/1.2 "Galano Grot Reg",sans-serif;border-bottom:1px solid var(--line);padding-bottom:4px;transition:border-color .3s ease,color .3s ease}
.psf-mail:hover{color:var(--accent);border-color:var(--accent)}
.psf .psf-btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 32px;border-radius:999px;font:400 16px/1 "Galano Grot Bold",sans-serif;color:#FBFBFB;background-color:#0422B6}
.psf-index{border-top:1px solid var(--line);padding-top:40px;row-gap:40px}
.psf-h{margin:0 0 16px;color:var(--soft);font:400 12px/1 "Galano Grot Reg",sans-serif;letter-spacing:.16em;text-transform:uppercase}
.psf-studio{grid-column:1/span 4}
.psf-studio p:not(.psf-h){margin:0;font-size:16px;line-height:1.5}
.psf-time{display:block;margin-top:16px;font:400 32px/1 "Galano Grot Reg",sans-serif;font-variant-numeric:tabular-nums}
.psf-time small{margin-left:8px;color:var(--soft);font:400 12px/1 "Galano Grot Reg",sans-serif;letter-spacing:.16em;text-transform:uppercase}
.psf-menu{grid-column:6/span 3}
.psf-social{grid-column:10/span 3}
.psf ul{list-style:none;margin:0;padding:0}
.psf li{margin:0 0 8px}
.psf-menu a,.psf-social a{font:400 18px/1.4 "Galano Grot Bold",sans-serif;transition:color .25s ease}
.psf-menu a:hover,.psf-social a:hover,.psf-menu a[aria-current="page"]{color:var(--accent)}
.psf-social a[target]::after{content:"\2197";margin-left:6px;font-size:.8em;opacity:.6}
.psf-base{margin-top:96px;border-top:1px solid var(--line);padding-top:24px;color:var(--soft);font-size:12px;line-height:1.5;letter-spacing:.04em}
.psf-base>span{grid-column:span 3}
.psf-base a{text-decoration:underline;text-underline-offset:3px}
.psf-base a:hover{color:var(--ink)}
.psf-tools{display:inline-flex;gap:12px;margin-left:16px;vertical-align:middle}
.psf .psf-ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-6px 0;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:var(--soft)!important;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:color .25s ease}
@media(pointer:coarse){.psf .psf-ic{width:44px!important;height:44px!important;margin:-14px -8px!important}}
.psf .psf-ic:hover,.psf .psf-ic:focus-visible{color:var(--ink)!important;outline:none}
.psf .psf-ic:focus-visible{outline:2px solid var(--accent)!important;outline-offset:2px}
.psf-ic svg{display:block;width:20px;height:20px}
@media(max-width:1024px){.psf-studio{grid-column:1/span 6}.psf-menu{grid-column:7/span 3}.psf-social{grid-column:10/span 3}.psf-base>span{grid-column:span 6}}
@media(max-width:767px){.psf{padding:96px 24px 24px}.psf-grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px}
 .psf-big{font-size:clamp(56px,19vw,96px);white-space:normal;margin-bottom:32px}.psf-cta{margin-bottom:80px}
 .psf-studio{grid-column:1/-1}.psf-menu{grid-column:1/span 2}.psf-social{grid-column:3/span 2}.psf-base{margin-top:64px;row-gap:8px}.psf-base>span{grid-column:1/-1}}

/* ---------- liquid buttons (the brand-blue buttons) ---------- */
.ps-liq{position:relative!important;overflow:hidden!important;isolation:isolate}
.ps-liq::before{content:"";position:absolute;left:-60%;top:-140%;width:220%;height:380%;z-index:-1;pointer-events:none;background:radial-gradient(38% 42% at 28% 62%,#0161FF 0%,rgba(1,97,255,0) 70%),radial-gradient(30% 36% at 72% 38%,rgba(158,199,255,.75) 0%,rgba(158,199,255,0) 70%),radial-gradient(44% 50% at 58% 78%,#020A3A 0%,rgba(2,10,58,0) 72%),radial-gradient(36% 40% at 16% 24%,#16181D 0%,rgba(22,24,29,0) 70%),#0422B6;animation:psliq 11s ease-in-out infinite alternate;will-change:transform}
.ps-liq::before{transition:opacity .4s ease}.ps-liq,.ps-liq *{transition:color .3s ease,fill .3s ease}.ps-liq:hover,.ps-liq:focus-visible{color:#9EC7FF!important}.ps-liq:hover *,.ps-liq:focus-visible *{color:#9EC7FF!important;fill:#9EC7FF!important}
@keyframes psliq{0%{transform:translate3d(-9%,-5%,0) rotate(0deg)}33%{transform:translate3d(7%,4%,0) rotate(38deg)}66%{transform:translate3d(-4%,7%,0) rotate(-24deg)}100%{transform:translate3d(9%,-6%,0) rotate(16deg)}}
@media (prefers-reduced-motion:reduce){.ps-liq::before{animation:none}}

/* ---------- scroll line: the Home line on every full-screen hero ---------- */
.psh-line{position:absolute;left:50%;bottom:40px;z-index:3;display:block;width:1px;height:56px;margin-left:-.5px;background:rgba(251,251,251,.7);transform-origin:50% 0;transform:scaleY(0);pointer-events:none;transition:transform .8s cubic-bezier(.65,0,.35,1)}
.psh-line.in{transform:scaleY(1)}
.psh-line.loop{animation:pshLine 2.4s cubic-bezier(.65,0,.35,1) infinite}
.psh-line.gone{opacity:0;animation-play-state:paused}
.psh-line{transition:transform .8s cubic-bezier(.65,0,.35,1),opacity .4s ease}
@keyframes pshLine{0%{transform:scaleY(1);transform-origin:50% 100%}45%{transform:scaleY(0);transform-origin:50% 100%}50%{transform:scaleY(0);transform-origin:50% 0}100%{transform:scaleY(1);transform-origin:50% 0}}
@media(max-width:767px){.psh-line{bottom:28px}}
@media(prefers-reduced-motion:reduce){.psh-line{transition:none}.psh-line.loop{animation:none}}

/* ---------- footer sign-up: PlayGrnd updates, Journal opt-in ---------- */
.psf-sub{grid-column:1/span 6;margin:-56px 0 96px}
.psf-sub .psf-h{margin-bottom:12px}
.psf-sub-p{margin:0 0 20px;color:var(--ink);font:400 16px/1.5 "Galano Grot Reg",sans-serif}
.psf-sub-f{display:flex;flex-wrap:wrap;gap:12px}
.psf .psf-in{flex:1 1 240px;min-width:0;height:52px;margin:0;padding:0 24px;border:1px solid rgba(248,243,237,.45);border-radius:999px;background:transparent;color:var(--ink);font:400 16px/1 "Galano Grot Reg",sans-serif;outline:none;transition:border-color .25s ease}
.psf .psf-in::placeholder{color:var(--soft)}
.psf .psf-in:focus{border-color:var(--accent)}
.psf .psf-go{flex:0 0 auto;height:52px;margin:0;padding:0 32px;border:0;border-radius:999px;background:#0422B6;color:#FBFBFB;font:400 16px/1 "Galano Grot Bold",sans-serif;cursor:pointer}
.psf .psf-go[disabled]{opacity:.6;pointer-events:none}
.psf-opt{display:flex;align-items:center;gap:10px;margin:16px 0 0;color:var(--soft);font:400 14px/1.4 "Galano Grot Reg",sans-serif;cursor:pointer;-webkit-user-select:none;user-select:none}
.psf-opt input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin:0;border:1px solid rgba(248,243,237,.55);border-radius:4px;background:transparent;display:grid;place-items:center;cursor:pointer}
.psf-opt input:checked{background:#F8F3ED;border-color:#F8F3ED}
.psf-opt input:checked::after{content:"";width:9px;height:5px;border:2px solid #16181D;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.psf-opt input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.psf-msg{min-height:20px;margin:12px 0 0;font:400 14px/1.4 "Galano Grot Reg",sans-serif;color:var(--accent)}
.psf-msg.err{color:#FF8A8A}
.psf-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
@media(max-width:1024px){.psf-sub{grid-column:1/span 9}}
@media(max-width:767px){.psf-sub{grid-column:1/-1;margin:-24px 0 72px}.psf .psf-go{flex:1 1 100%}}
.psf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===================== approved 2026-10-13 (was shell-next.css) =====================
 * Footer: "Let's talk" is the one way to Contact. Header: the mark's first stroke on the grid margin. */
.psf .psf-btn{display:none!important}
.psh-logo{left:calc(var(--psh-m) - 2px)}

/* past the bottom of the page (phones pull past the end): the footer color, never white.
   Pages without their own background keep white; :where() lets any page background win */
:where(body.ps-shell){background-color:#fff}
html.ps-end{background:#16181D}

/* the cookie notice (Elementor popup 6011) sits above the full-screen PlayGrnd apps, so its buttons always answer */
#elementor-popup-modal-6011{z-index:2147483646!important}

/* the PlayGrnd apps' Manual window shares the class .psm with the site menu (#psm):
   it keeps its own look and shows when it opens */
.psm:not(#psm){opacity:1;overflow:auto;color:inherit;will-change:auto}

/* PlayGrnd apps: fields and lists in the control panels take the panel's charcoal, no navy */
body.ps-kit-bare select,body.ps-kit-bare textarea{background-color:rgba(251,251,251,.04)!important}
body.ps-kit-bare option,body.ps-kit-bare optgroup{background-color:#16181D!important}

/* ===== one opening for every page (preview ?psdoors=1: html.ps-ui) =====
   the count: on the left door, at the bottom, right next to the line; it leaves with the door */
html.ps-ui #psh-doors .l .psx-cnt{position:absolute!important;left:auto!important;right:16px!important;bottom:32px!important;transform:none!important;opacity:1!important;animation:none!important}
@media (max-width:767px){html.ps-ui #psh-doors .l .psx-cnt{bottom:24px!important}}
/* the header waits behind the doors */
html.ps-ui.ps-hold .psh{visibility:hidden!important}
/* the pages' own header steps (Home, Services) step aside: one entrance for all */
html.ps-ui .psh .psh-logo,html.ps-ui .psh .psq,html.ps-ui .psh .ps-burger{opacity:1!important;translate:none!important;filter:none!important;pointer-events:auto!important}
/* the entrance: logo, Sound and menu each come in as one piece, 80 ms apart:
   the piece settles from 10px above while everything inside it fades in together
   (the menu's two lines keep their own places, so they arrive as one) */
html.ps-ui.ps-in .psh .psh-logo,html.ps-ui.ps-in .psh .psq,html.ps-ui.ps-in .psh .ps-burger{animation:ps-uimv .7s cubic-bezier(.22,1,.36,1) both}
html.ps-ui.ps-in .psh .psh-logo>*,html.ps-ui.ps-in .psh .psq>*,html.ps-ui.ps-in .psh .ps-burger>*{animation:ps-uiop .7s cubic-bezier(.22,1,.36,1) both}
html.ps-ui.ps-in .psh .psq,html.ps-ui.ps-in .psh .psq>*{animation-delay:.08s}
html.ps-ui.ps-in .psh .ps-burger,html.ps-ui.ps-in .psh .ps-burger>*{animation-delay:.16s}
@keyframes ps-uimv{from{transform:translateY(-10px)}to{transform:none}}
@keyframes ps-uiop{from{opacity:0}to{opacity:1}}

/* the logo: one mark, one size on every page (the PlayGrnd and Portfolio size: 32 x 27 in a 44 x 44 box).
   The older logo styles some pages still load (logo.html) stretch it to the whole box; this keeps it to size */
html.ps-ui .psh .pslg{display:block!important;width:44px!important;height:44px!important}
html.ps-ui .psh .pslg svg{left:6px!important;top:8.5px!important;width:32px!important;height:27px!important}
/* PlayGrnd and Portfolio show the site's logo too; the app's own mark keeps its place in the layout, unseen */
html.ps-ui .ps-kit-app .psh-logo{display:block!important}
html.ps-ui .ps-kit-app .pgl-logo{visibility:hidden!important}
/* the menu open: the logo steps out, as before */
html.ps-ui.psm-open .psh .psh-logo{opacity:0!important;pointer-events:none!important}

/* the menu open: Sound steps out with the logo (the menu's close button stays) */
html.ps-ui.psm-open .psh .psq,html.ps-ui.psm-open .ps-kit-app .pgl-sn{opacity:0!important;pointer-events:none!important}

/* PlayGrnd page: cream only (no Dark switch); Sound sits beside the menu like every page; the heart sits beside the title */
html.ps-ui .ps-kit-app .pgl-tb .pgl-th:not(.pgl-sn):not(.psx-sup){display:none!important}
html.ps-ui .ps-kit-app .pgl-sn.ps-snr{position:fixed!important;top:calc(var(--psh-c,43px) - 18px)!important;right:calc(var(--psh-m,24px) + 56px)!important;left:auto!important;margin:0!important;z-index:2147483642!important}
html.ps-ui .ps-kit-app .ps-ttl{display:flex;align-items:center;gap:16px}
html.ps-ui .ps-kit-app .ps-ttl>h1{margin:0}
html.ps-ui.ps-hold .ps-kit-app .pgl-sn.ps-snr{visibility:hidden!important}
/* the heart beside the title: the round 36px button with the heart only, in line with the title */
html.ps-ui .ps-kit-app .ps-ttl .psx-sup{position:static!important;top:auto!important;left:auto!important;right:auto!important;transform:none!important;width:36px!important;height:36px!important;min-width:0!important;padding:0!important;justify-content:center!important;flex:none}
html.ps-ui .ps-kit-app .ps-ttl .psx-sup>span{display:none!important}
/* Sound beside the menu takes the site's Sound look: bars and words, no pill */
html.ps-ui .ps-kit-app .pgl-sn.ps-snr{border:0!important;background:none!important;box-shadow:none!important;padding:0!important;height:36px!important}
/* the count on PlayGrnd and Portfolio's own doors: same place and look as every page */
html.ps-ui .pgl-dl .psx-cnt{position:absolute;right:16px;bottom:32px;font:400 11px/1 "Galano Grot Reg",sans-serif;letter-spacing:.24em;color:var(--ink,#16181D);font-variant-numeric:tabular-nums;pointer-events:none}
@media (max-width:767px){html.ps-ui .pgl-dl .psx-cnt{bottom:24px}}

/* project pages: the footer waits until the project is built, so "Let's talk" never flashes at the top */
html.ps-pjv body.ps-pjs .psf{visibility:hidden}
html.ps-pjv body.ps-pjs:has(.pj-hero) .psf{visibility:visible}

/* cookie bar: hidden until shell.js has given it the site's look (it shows anyway after 4s if the script never runs) */
#cookiez-banner:not(.ps-ck-ready){visibility:hidden;animation:ps-ck-late 0s 4s forwards}
@keyframes ps-ck-late{to{visibility:visible}}