/* Full-page local art direction. Original copy, fonts and demo code are retained. */
:root{--clay-paper:#f8f5ef;--clay-ink:#2b2637;--clay-violet:#75549f;--clay-line:#ded5e3;--clay-muted:#716878}
html,body{background:var(--clay-paper);color:var(--clay-ink)}
.site-header{background:#f8f5eff5;border-color:#e6e0e7;backdrop-filter:blur(12px)}
.wordmark{display:inline-flex;align-items:center;gap:9px;color:var(--clay-ink)}
.clay-mark{width:43px;height:43px;object-fit:contain;display:inline-block;flex:none}
.desktop-nav a,.desktop-nav button,.mobile-cta{color:#504657}
.nav-inner{border-bottom-color:#e6e0e7}
#hero.connected-hero{background:var(--clay-paper);padding-top:34px;padding-bottom:86px}
#hero .hero-intro{display:grid;grid-template-columns:minmax(0,1fr) 390px;align-items:center;gap:32px;text-align:left;margin-bottom:40px}
#hero .hero-intro h1{font-size:clamp(40px,4.25vw,59px);letter-spacing:-2.3px;font-weight:550;color:var(--clay-ink)}
#hero .hero-intro h1 span{color:#82718f}
#hero .hero-intro>div>p[data-copy]{margin:28px 0 0;font-size:18px;line-height:1.65;max-width:680px;color:#675d6c}
#hero .hero-actions{justify-content:flex-start;margin-top:30px}
.primary,#hero .hero-intro .primary{background:var(--clay-violet);border-color:var(--clay-violet);box-shadow:0 3px 6px #593b701a,inset 0 1px #ffffff30;color:#fff}
.primary:hover,#hero .hero-intro .primary:hover{background:#634389;border-color:#634389}
#hero .hero-secondary{color:#655071}
.clay-room-spot{margin:0;width:390px;height:380px;align-self:center}
.clay-room-spot iframe{display:block;width:100%;height:100%;border:0;background:transparent}
#hero .hero-story-controls{margin-bottom:32px}
.native-controls .native-phases [aria-selected=true]{background:var(--clay-violet);border-color:var(--clay-violet);color:#fff}
.native-controls .native-phases button{box-shadow:none}
#hero .hero-tool-token{box-shadow:0 4px 9px #5741650d,0 1px 1px #fff inset;border-color:#eee8ee}
#sources{background:#f1edf4;border-block:1px solid #e8e0ec;padding-block:94px}
#sources .container,#change .container{position:relative}
#sources .native-intro h2,#change .native-intro h2{color:var(--clay-ink)}
#sources .native-intro p,#change .native-intro p{color:#6d6273}
#change{background:#f8f5ef;color:var(--clay-ink);padding-block:94px}
#change::before{background:none}
#sources .native-stage-viewport,#change .native-stage-viewport{isolation:isolate}
#sources .native-composition,#change .native-composition{filter:drop-shadow(0 10px 19px #5a3d6c08)}
#experience.section{background:#f8f5ef;padding-top:24px;padding-bottom:100px}
#experience .editorial-mosaic{background:transparent;gap:18px;grid-template-rows:270px 254px 188px}
#experience .mosaic-tile{border-radius:21px;box-shadow:none}
#experience .mosaic-photo img{border-radius:21px}
#experience .mosaic-lead{background:#ddd0eb;color:#4d3563;position:relative;padding:38px}
#experience .mosaic-lead:after{content:'';position:absolute;right:30px;bottom:30px;width:66px;height:10px;background:#b99bcf;border-radius:50%;transform:rotate(-8deg);box-shadow:0 4px 0 #b99bcf25}
#experience .mosaic-lead p{font-size:36px;line-height:1.16;font-weight:450;letter-spacing:-1px;position:relative;z-index:1}
#experience .mosaic-clay{grid-column:9/span 4;grid-row:2;background:#eee5e9;box-shadow:inset 0 1px 0 #ffffff70;overflow:hidden;position:relative}
.mosaic-clay iframe{width:100%;height:100%;display:block;border:0;background:transparent}
#experience .mosaic-cta{background:#eee8f1;color:#51355e;padding:30px 34px}
#experience .mosaic-cta h3{font-weight:450;font-size:30px}
#experience .mosaic-cta .primary{background:#76519e;border-color:#76519e}
#access{background:#f1eee7;padding-top:54px;padding-bottom:90px;border-block:1px solid #e9e3db}
.clay-intro{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:65px;margin:0 0 26px}
.clay-art{margin:0;min-width:0;position:relative}
.clay-art img{display:block;width:100%;height:310px;object-fit:contain;transform-origin:center 75%}
#access .section-intro,#team .section-intro{text-align:left;margin:0;max-width:480px;display:block}
#access .section-intro p,#team .section-intro p{margin:22px 0 0;max-width:470px;color:#6b6070;line-height:1.65}
#access .section-intro h2,#team .section-intro h2{color:var(--clay-ink);font-weight:450}
#access .clay-intro-access .section-intro{padding-right:25px}
#access .cycle-bar{justify-content:flex-end;max-width:1080px;margin-inline:auto}
#access .access-composition{background:transparent}
#access .projection{box-shadow:0 10px 25px #624e6b0b;border-color:#ded7e4}
#team{background:#f8f5ef;padding-top:60px;padding-bottom:84px}
#team .clay-intro-team{gap:55px;margin-bottom:28px}
#team .clay-intro-team .clay-art img{height:300px}
#team .event-mini{margin-top:24px;padding-top:18px;border-top-color:#e1d9e5}
#team .compact-crew{margin-top:0;border-color:#dfd7e5;box-shadow:0 12px 25px #6a4b790b}
#closing{background:#eee8f1;padding-top:76px;padding-bottom:0;border-top:1px solid #e0d6e6}
#closing .trust{margin:0 0 72px;padding-bottom:60px;border-bottom:1px solid #d9cddf}
.clay-faq-intro h3{color:#42334f;max-width:250px}
.clay-scribble{display:block;margin-top:24px;width:156px;height:68px}
.clay-scribble svg{width:100%;height:100%;fill:none;stroke:#a68bbd;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
#closing .faq details{border-color:#d9cedf}
#closing .faq summary{color:#49394f}
#closing .faq p{color:#706078}
#pilot.final{background:transparent;border:0;box-shadow:none;gap:80px;padding:0 0 78px!important;align-items:center}
.clay-closing-art{margin:-36px 0 0 -20px;width:250px;height:190px}
.clay-closing-art img{display:block;width:100%;height:100%;object-fit:contain}
#pilot .lead-intro h2{color:#493450;font-weight:450}
#pilot .lead-intro p{color:#78687e;line-height:1.65}
#pilot .lead-form{background:#f9f6fa;border:1px solid #ddd0e4;padding:30px;border-radius:18px;box-shadow:0 5px 15px #6d478009}
#pilot .lead-form input,#pilot .lead-form textarea{background:#fffdfd;border-color:#d9d0df}
#pilot .lead-form input:focus,#pilot .lead-form textarea:focus{border-color:#8d6ba9;outline-color:#b999d2}
#pilot .lead-form label{color:#5e4d69}
footer{background:#eee8f1;border-top:1px solid #dfd3e5}
footer .footer-brand .wordmark{font-size:27px}
footer .footer-details,footer .footer-brand p{color:#7a6982}
@keyframes clay-settle{0%{transform:translateY(12px) rotate(-2deg)}65%{transform:translateY(-3px) rotate(.7deg)}100%{transform:none}}
.clay-art.in-view img{animation:clay-settle .65s steps(8,end) both}
@media(min-width:1450px){#hero .hero-intro{grid-template-columns:minmax(0,1fr) 415px}.clay-room-spot{width:415px;height:400px}}
@media(min-width:741px) and (max-width:1100px){#hero .hero-intro{grid-template-columns:minmax(0,1fr) 310px;gap:12px}.clay-room-spot{width:310px;height:325px}#hero .hero-intro h1{font-size:47px}.clay-intro{gap:22px}.clay-art img{height:270px}#experience .mosaic-lead{padding:26px}#experience .mosaic-lead p{font-size:30px}#pilot.final{gap:35px}}
@media(max-width:740px){
 .clay-mark{width:34px;height:34px}.wordmark{gap:6px}.nav-inner{width:calc(100% - 34px)}
 #hero.connected-hero{padding-top:28px;padding-bottom:58px}
 #hero .hero-intro{display:flex;flex-direction:column;gap:8px;text-align:left;margin-bottom:24px}
 #hero .hero-intro h1{font-size:39px;line-height:1.11;letter-spacing:-1.8px;font-weight:550}
 #hero .hero-intro>div>p[data-copy]{margin-top:22px;font-size:16px;line-height:1.65}
 #hero .hero-actions{justify-content:flex-start;gap:17px;margin-top:25px;flex-wrap:wrap}
 #hero .hero-actions .primary{margin-top:0;min-height:45px;font-size:12px;gap:14px}
 #hero .hero-secondary{font-size:12px}
 .clay-room-spot{width:294px;height:278px;margin:0 auto}
 #hero .hero-story-controls{margin-bottom:24px}
 #sources,#change{padding-block:64px}
 #experience.section{padding-top:12px;padding-bottom:64px}
 #experience .editorial-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:none;gap:13px}
 #experience .mosaic-tile{border-radius:16px}
 #experience .mosaic-photo img{border-radius:16px}
 #experience .mosaic-activation{grid-column:1/-1;height:222px;grid-row:auto}
 #experience .mosaic-lead{grid-column:1/-1;grid-row:auto;min-height:174px;padding:26px}
 #experience .mosaic-lead p{font-size:31px;max-width:280px}
 #experience .mosaic-conference{grid-column:1;grid-row:auto;height:230px}
 #experience .mosaic-crew{grid-column:2;grid-row:auto;height:230px}
 #experience .mosaic-clay{grid-column:1/-1;grid-row:auto;height:310px}
 #experience .mosaic-cta{grid-column:1/-1;grid-row:auto;min-height:166px;padding:25px;gap:20px}
 #experience .mosaic-cta h3{font-size:26px}
 #access{padding-top:30px;padding-bottom:60px}
 .clay-intro{display:flex;flex-direction:column;gap:0;margin-bottom:22px}
 .clay-art{width:100%}.clay-art img{height:245px}
 #access .clay-intro-access .clay-art{order:2;margin-top:10px}
 #access .clay-intro-access .section-intro{padding:0}
 #access .section-intro,#team .section-intro{max-width:none;text-align:left}
 #access .section-intro p,#team .section-intro p{margin-top:19px;font-size:14px}
 #access .cycle-bar{margin-top:0}
 #team{padding-top:58px;padding-bottom:56px}
 #team .clay-intro-team{gap:0;margin-bottom:20px}
 #team .clay-intro-team .clay-art img{height:240px}
 #team .compact-crew{padding:20px}
 #closing{padding-top:54px}
 #closing .trust{margin-bottom:38px;padding-bottom:34px}
 .clay-faq-intro{display:flex;align-items:flex-start;gap:12px;justify-content:space-between}
 .clay-faq-intro h3{max-width:230px}.clay-scribble{width:74px;height:45px;margin-top:0}
 #pilot.final{display:block;padding-bottom:54px!important}
 .clay-closing-art{height:166px;width:220px;margin:-12px 0 -4px -25px}
 #pilot .lead-intro{margin-bottom:28px}
 #pilot .lead-form{padding:23px 20px;border-radius:15px}
 footer .container{padding-block:24px}
}
@media(max-width:370px){#hero .hero-intro h1{font-size:35px}.clay-room-spot{width:270px;height:258px}#experience .mosaic-conference,#experience .mosaic-crew{height:205px}}
@media(prefers-reduced-motion:reduce){.clay-art.in-view img{animation:none}}
html[data-motion=reduce] .clay-art.in-view img{animation:none}

/* Brand navigation controls, outside the emulated third-party screens. */
#hero .native-phases button[aria-selected=true],#sources .native-phases button[aria-selected=true],#change .native-phases button[aria-selected=true],#access .party-rail button[aria-selected=true]{background:#75549f!important;border-color:#75549f!important;color:#fff!important}

/* A contained, slow ribbon contrasts with the playful clay scenes. */
#hero .clay-tools-panel{position:relative;z-index:3;background:#fffdf9;border:1px solid #e5dce8;border-radius:20px;padding:21px 0 19px;margin:12px auto 38px;max-width:1120px;box-shadow:0 3px 8px #62486b05;overflow:hidden}
.clay-tools-heading{display:flex;align-items:center;justify-content:center;position:relative;padding:0 70px 18px;gap:16px}
.clay-tools-heading p{margin:0;font-size:14px;color:#827187;line-height:1.4;text-align:center;letter-spacing:-.15px}
.clay-logo-pause{position:absolute;right:22px;top:0;border:0;border-bottom:1px solid #dbd1e0;background:transparent;padding:0 0 2px;font-family:inherit;font-size:10px;line-height:1.5;color:#94839c;cursor:pointer;min-height:22px}
.clay-logo-pause:focus-visible{outline:2px solid #75549f;outline-offset:5px}
.clay-tool-window{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.clay-tool-track{display:flex;width:max-content;animation:clay-logo-drift 89s linear infinite;will-change:transform}
.clay-tool-group{display:flex;align-items:center;gap:18px;padding-right:18px;flex:none}
.clay-tool-lockup{display:flex;align-items:center;justify-content:center;gap:10px;flex:none;min-width:146px;min-height:50px;padding:12px 17px;background:#faf7fb;border:1px solid #efe8f2;border-radius:10px;color:#54465d;font-size:17px;font-weight:500;letter-spacing:-.3px;white-space:nowrap}
.clay-tool-lockup img{display:block;width:25px;height:25px;object-fit:contain;flex:none}
.clay-tool-lockup[data-tool=monday] img{width:118px;height:25px;object-fit:contain}
.clay-tools-panel:hover .clay-tool-track,.clay-tools-panel:focus-within .clay-tool-track,.clay-tools-panel.is-paused .clay-tool-track,.clay-tools-panel.is-offscreen .clay-tool-track{animation-play-state:paused}
@keyframes clay-logo-drift{to{transform:translateX(-50%)}}
@media(max-width:740px){#hero .clay-tools-panel{padding-block:19px 16px;margin-top:10px;margin-bottom:28px;border-radius:16px}.clay-tools-heading{padding:0 42px 15px}.clay-tools-heading p{font-size:12px;max-width:230px}.clay-logo-pause{right:12px;font-size:9px;top:-2px}.clay-tool-group{gap:12px;padding-right:12px}.clay-tool-lockup{min-width:130px;font-size:15px;gap:8px;min-height:47px;padding:11px 15px}.clay-tool-lockup img{width:22px;height:22px}.clay-tool-lockup[data-tool=monday] img{width:108px;height:22px}#hero .hero-intro{margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){.clay-tool-track{animation:none!important;width:100%}.clay-tool-group{flex-wrap:wrap;justify-content:center;width:100%;padding:0 15px;gap:12px}.clay-tool-group[aria-hidden=true]{display:none}.clay-tool-window{mask-image:none}.clay-logo-pause{display:none}.clay-tool-lockup{min-width:130px}}
html[data-motion=reduce] .clay-tool-track{animation:none!important;width:100%}html[data-motion=reduce] .clay-tool-group{flex-wrap:wrap;justify-content:center;width:100%;padding:0 15px;gap:12px}html[data-motion=reduce] .clay-tool-group[aria-hidden=true]{display:none}html[data-motion=reduce] .clay-tool-window{mask-image:none}html[data-motion=reduce] .clay-logo-pause{display:none}

/* Full supplied wordmarks: retain native proportions and colours. */
.clay-tool-lockup{min-width:165px;padding:13px 20px;min-height:62px;background:#faf7fb}
.clay-tool-lockup img{width:125px;height:32px;max-width:100%;object-fit:contain}
.clay-tool-lockup[data-tool=chatgpt] img{width:129px;height:30px}
.clay-tool-lockup[data-tool=claude] img{width:117px;height:28px}
.clay-tool-lockup[data-tool=gemini] img{width:124px;height:29px}
.clay-tool-lockup[data-tool=monday] img{width:128px;height:32px}
.clay-tool-lockup[data-tool=hubspot] img{width:119px;height:34px}
.clay-tool-lockup[data-tool=slack] img{width:123px;height:34px}
.clay-tool-lockup[data-tool=linear] img{width:110px;height:28px}
@media(max-width:740px){.clay-tool-lockup{min-width:148px;min-height:56px;padding:11px 17px}.clay-tool-lockup img{max-width:112px;max-height:30px}.clay-tool-lockup[data-tool=monday] img{width:116px;height:29px}}

.clay-tool-lockup[data-tool=chatgpt] img{width:136px;height:38px}.clay-tool-lockup[data-tool=monday] img{width:142px;height:41px}
@media(max-width:740px){.clay-tool-lockup[data-tool=chatgpt] img{width:119px;height:33px}.clay-tool-lockup[data-tool=monday] img{width:126px;height:36px}}

/* Production playback: no WebGL, external frames or third-party runtime. */
.clay-motion{width:100%;height:100%;position:relative;overflow:hidden;isolation:isolate}
.clay-motion .clay-poster,.clay-motion .clay-film{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;border:0;background:transparent;transition:opacity .15s linear}
.clay-motion .clay-poster{opacity:1}.clay-motion .clay-film{opacity:0}
.clay-motion.has-video .clay-film{opacity:1}.clay-motion.has-video .clay-poster{opacity:0}
.clay-motion-toggle{position:absolute;z-index:2;bottom:3px;left:50%;transform:translateX(-50%);border:0;border-radius:4px;background:#f8f5efb3;color:#796685;font:10px/1.5 Arial,Helvetica,sans-serif;min-width:44px;min-height:30px;padding:4px 9px;cursor:pointer}
.clay-motion-toggle:focus-visible{outline:2px solid #75549f;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.clay-motion .clay-film{display:none}.clay-motion .clay-poster{opacity:1!important}.clay-motion-toggle{display:none}.clay-motion .clay-poster,.clay-motion .clay-film{transition:none}}
html[data-motion=reduce] .clay-motion .clay-film{display:none}html[data-motion=reduce] .clay-motion .clay-poster{opacity:1!important}html[data-motion=reduce] .clay-motion-toggle{display:none}

/* Approved two-room scene framing and quiet playback, 21 October 2026. */
#hero .hero-intro{grid-template-columns:minmax(0,1fr) 490px;gap:18px}
.clay-room-spot{width:490px;height:430px}
@media(min-width:1450px){#hero .hero-intro{grid-template-columns:minmax(0,1fr) 510px}.clay-room-spot{width:510px;height:450px}}
@media(min-width:741px) and (max-width:1100px){#hero .hero-intro{grid-template-columns:minmax(0,1fr) 355px}.clay-room-spot{width:355px;height:345px}}
@media(max-width:740px){#hero .hero-intro{grid-template-columns:1fr}.clay-room-spot{width:min(100%,365px);height:315px;margin:0 auto}}
.clay-motion-toggle,.clay-logo-pause,.native-playback,.crew-playback,.source-cycle-toggle,.party-cycle-toggle,[data-demo]{display:none!important}