.hero{height:auto;min-height:0;grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:12px;padding-top:30px;padding-bottom:27px}
.hero-copy{padding:0;max-width:545px}
.hero h1{white-space:normal;font-size:clamp(46px,6.45vw,94px);line-height:1.01}
.hero-description{max-width:415px;margin:23px 0 25px}
.stage-fit{height:clamp(330px,43vw,530px)}
.stage-fit .clay-stage{overflow:visible}
.clay-toolbar{align-items:center;justify-content:flex-start;gap:13px;padding:10px 12px}
.browser-dots{display:flex;gap:4px;flex:none}
.browser-dots i{width:9px;height:9px;border-radius:50%;background:var(--logo-violet)}
.browser-dots i:nth-child(2){background:var(--logo-rose)}
.browser-dots i:nth-child(3){background:var(--logo-ink)}
.browser-search{display:flex;align-items:center;gap:7px;border-radius:30px;border:1px solid #ddcec5;background:#fff9f2;color:var(--ink);font-size:13px;font-weight:600;padding:6px 12px;flex:1}
.browser-search svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;flex:none}
.clay-screen strong{margin-top:10px}

.studio{background:linear-gradient(142deg,#eee0d2,#ecdae5 61%,#efe0d6)}
.studio-inner{padding-top:clamp(40px,5vw,74px);padding-bottom:clamp(44px,5vw,74px)}
.studio h2{font-size:clamp(36px,4.6vw,62px)}
.studio .section-kicker{margin-bottom:12px;color:#56339c}
.service-list{margin:20px 0 0}
.service-list div{padding:10px 0;border-top:1px solid #30233d29}
.service-list dt{font-size:16px;font-weight:700}
.service-list dd{font-size:14px;line-height:1.45;color:#514658;margin:2px 0 0}
.showcase{background:none;overflow:visible;padding:0;margin-top:clamp(32px,5vw,68px);border-top:1px solid #30233d29;padding-top:clamp(24px,4vw,46px)}
.showcase-intro{margin-top:12px}
.example-tabs{margin:22px 0 16px}
.client-screen{min-height:0}
.example-notes h3{font-size:clamp(25px,3vw,38px);margin:12px 0}
.workflow-demo h3,.campaign-demo h3,.client-screen h3{font-size:clamp(28px,4vw,43px)}
.campaign-demo #campaign-art{min-height:0}
.contact-inner{padding-top:clamp(42px,6vw,80px);padding-bottom:clamp(42px,6vw,80px)}
.contact-copy h2{font-size:clamp(37px,5.2vw,70px)}
.contact-copy>p:not(.section-kicker){max-width:350px;margin-top:16px}
.brief-form{margin-top:0}
.field-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{min-width:0;margin-bottom:14px}
.field select{min-height:44px}
.footer-top{padding-bottom:18px}
@media(max-width:800px){.example-panel{grid-template-columns:1fr;gap:22px}}
@media(max-width:700px){
  .hero{grid-template-columns:minmax(0,1fr);padding-top:22px;padding-bottom:7px;gap:0}
  .hero h1{font-size:clamp(40px,9.3vw,63px)}
  .hero-description{font-size:15px;margin:13px 0 17px}
  .hero .button{min-height:44px}
  .stage-fit{height:clamp(255px,83vw,365px)}
  .brief-form{margin-top:25px}
  .footer-top{column-gap:10px;row-gap:8px}
  .footer-top .brand-image{width:155px}
  .client-tabs{flex-wrap:wrap}
  .field input,.field select,.field textarea{font-size:16px}
}
@media(max-width:360px){.field-pair{grid-template-columns:1fr;gap:0}}
@media print{.stage-fit,.intro-replay{display:none}}

:root{--logo-violet:#512dbf;--logo-rose:#cf8e9f;--logo-ink:#16141e}
.logo-intro{border:0;padding:0;width:100%;height:100%;max-width:none;max-height:none;inset:0;overflow:hidden;overscroll-behavior:contain;color:var(--ink);background:radial-gradient(ellipse at 50% 46%,#fff9ef 0,#f2e3e3 58%,#dbc6e4 100%)}
.logo-intro[open]{display:grid;place-items:center;animation:intro-open 3.45s both}
.logo-intro::backdrop{background:transparent}
.intro-lockup{position:relative;width:min(80vw,570px);aspect-ratio:2169/725}
.intro-lockup img{position:absolute;inset:0;width:100%;height:100%}
.intro-symbol{clip-path:inset(0 66.2% 0 0);animation:intro-symbol 3.45s both}
.intro-wordmark{animation:intro-writing 3.45s steps(16,end) both}
.intro-orbits{position:absolute;width:min(115vw,800px);aspect-ratio:1.7;left:50%;top:50%;translate:-50% -50%;animation:intro-orbit 3.45s both}
.intro-orbits i{position:absolute;inset:10% 5%;border:1px solid #7955aa54;border-radius:50%;transform:rotate(-17deg)}
.intro-orbits i:nth-child(2){inset:22% 13%;border-color:#bc739666;transform:rotate(17deg)}
.intro-orbits i:nth-child(3){inset:31% 22%;border-color:#7955aa44;transform:rotate(-30deg)}
.intro-orbits i:after{content:'';position:absolute;left:18%;top:9%;width:7px;height:7px;border-radius:50%;background:#916dc8}
.intro-orbits i:nth-child(2):after{left:78%;top:5%;background:#cd879d}
.intro-orbits i:nth-child(3):after{left:94%;top:62%;background:#30233f}
.intro-blob{position:absolute;display:block;width:6.25%;aspect-ratio:1;border-radius:50%;translate:-50% -50%;background:var(--blob);animation:intro-jump 1.7s var(--hop-delay) cubic-bezier(.25,.58,.32,.99) both}
.intro-violet{left:9%;top:39.4%;--blob:var(--logo-violet);--start-x:520%;--start-y:30%;--jump-x:460%;--jump-y:-225%;--hop-delay:0s}
.intro-rose{left:3.8%;top:49.8%;width:5.35%;--blob:var(--logo-rose);--start-x:460%;--start-y:65%;--jump-x:310%;--jump-y:-190%;--hop-delay:.07s}
.intro-ink{left:9%;top:61.3%;--blob:var(--logo-ink);--start-x:695%;--start-y:-14%;--jump-x:590%;--jump-y:-250%;--hop-delay:.14s}
.intro-skip{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));min-height:44px;padding:10px 16px;border:1px solid #6f587866;border-radius:30px;background:#fff9f1;color:var(--ink);font-size:13px}
.intro-skip span{padding-left:8px}
@keyframes intro-orbit{
  0%{opacity:0;transform:scale(.7) rotate(-22deg)}
  24%{opacity:1}
  60%{opacity:.55}
  82%,100%{opacity:0;transform:scale(1.13) rotate(11deg)}
}
@keyframes intro-jump{
  0%{opacity:0;transform:translate(var(--start-x),var(--start-y)) scale(1.2,.67);box-shadow:inset 4px 6px 11px #fff6,inset -4px -6px 11px #0005,0 14px 22px #4b286345}
  11%{opacity:1;transform:translate(var(--start-x),var(--start-y)) scale(1.46,.8)}
  34%{transform:translate(var(--jump-x),var(--jump-y)) scale(.93,1.23)}
  65%{transform:translate(20%,12%) scale(1.22,.79);box-shadow:inset 3px 4px 6px #fff4,inset -3px -3px 7px #0003,0 8px 15px #4b286330}
  81%{transform:translate(0,-21%) scale(.95,1.06)}
  96%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(0,0);box-shadow:none}
}
@keyframes intro-symbol{
  0%,32%{opacity:0;clip-path:inset(0 66.2% 0 12.1%);transform:translateX(1.8%)}
  50%{opacity:1;clip-path:inset(0 66.2% 0 12.1%);transform:translateX(0)}
  53.5%,100%{opacity:1;clip-path:inset(0 66.2% 0 0)}
}
@keyframes intro-writing{
  0%,52%{clip-path:inset(0 65.8% 0 34.2%)}
  83%,100%{clip-path:inset(0 0 0 34.2%)}
}
@keyframes intro-open{
  0%,88%{opacity:1;clip-path:inset(0 round 0)}
  100%{opacity:0;clip-path:inset(3% round 20px)}
}
.intro-replay{background:transparent;border:0;padding:8px 4px;min-height:44px;text-decoration:underline;text-underline-offset:4px;font-size:12px}

#main{position:relative;isolation:isolate;background:radial-gradient(ellipse at 76% 19%,#f8e8d9,transparent 45%),linear-gradient(154deg,#f3e8dc 2%,#eee0eb 54%,#f0e2dc 100%)}
.motion-backdrop{position:sticky;top:0;z-index:-1;width:100%;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;overflow:hidden;pointer-events:none}
.motion-field{position:absolute;inset:0 auto 0 0;width:max(780px,min(88vw,1520px));height:100%;transform:translate3d(calc(var(--field-x,70vw) - 50%),calc(var(--field-y,60%) - 50%),0) rotate(var(--field-angle,-10deg)) scale(var(--field-scale,1));animation:motion-float 5.8s ease-in-out infinite;will-change:transform}
.motion-field video{position:absolute;top:50%;left:0;display:block;width:100%;height:auto;aspect-ratio:16/9;translate:0 -50%;mask-image:radial-gradient(ellipse 50% 50% at center,#000 45%,#000e 65%,#0005 83%,transparent 100%)}
@keyframes motion-float{0%,100%{translate:0 0}50%{translate:10px -13px}}
.motion-orbits{position:absolute;width:72%;height:49%;left:14%;top:25%;transform:rotate(var(--orbit-turn,0deg));opacity:.75}
.motion-orbits i{position:absolute;inset:8% 2%;border:1px solid #9467a043;border-radius:50%;transform:rotate(-17deg)}
.motion-orbits i:nth-child(2){inset:15% 8%;border-color:#ba75964d;transform:rotate(23deg)}
.motion-orbits i:nth-child(3){inset:23% 15%;border-color:#ffffffa8;transform:rotate(-33deg)}
.motion-orbits i:after{content:'';position:absolute;left:15%;top:13%;width:6px;height:6px;border-radius:50%;background:#8d63acaa}
.motion-orbits i:nth-child(2):after{left:82%;top:11%;background:#c27795b0}
.motion-orbits i:nth-child(3):after{left:90%;top:73%;background:#432952a6}
.motion-toggle{position:fixed;z-index:4;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));min-height:44px;padding:9px 14px;background:#fff8ef;border-color:#674f755e;box-shadow:0 6px 20px #51345d20;font-size:12px}
main>section.hero,main>section.studio,main>section.contact{background:none}
main>section.hero:before,main>section.studio:before,main>section.contact:before,main>section:after,.clay-stage:before{content:none}
.hero-copy{background:none}
.hero-copy h1,.contact-copy h2{ text-shadow:0 1px 15px #fff8 }
.hero-copy,.studio-copy,.contact-copy,.example-notes{min-width:0}
.studio-copy,.contact-copy,.example-notes,.contact .brief-form{
  padding:clamp(21px,3.1vw,40px);
  border:1px solid #fff9;border-radius:22px;
  background:linear-gradient(145deg,#fff9f1ed,#f8eaf1e8);
  box-shadow:0 10px 36px #51345d14;
}
.contact-copy{align-self:start}
.contact-inner{gap:clamp(16px,4vw,58px)}
.contact-inner .section-kicker{margin-bottom:12px;color:#56339c}
.contact-inner .contact-copy h2{font-size:clamp(36px,4.6vw,62px)}
.studio-overview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:6%}
.clay-stage .clay-browser{top:37%;left:55%;transform:translate(-50%,-50%) rotate(-8deg) rotateY(-10deg) scale(.84)}
.showcase>h2,.showcase>.showcase-intro{text-shadow:0 1px 16px #fff,0 1px 9px #fff}
.example-tabs button,.client-tabs button{background:#fff8ef}
.site-footer{padding-bottom:68px;background:linear-gradient(135deg,#f3e6df,#eee0eb)}
.site-footer:before{content:none}
@media(max-width:700px){
  .motion-field{width:clamp(565px,110vw,820px);--field-x:57vw;--field-y:64%}
  .motion-orbits{height:29%;top:35%}
  .motion-toggle{width:44px;padding:0;font-size:0;display:grid;place-items:center}
  .motion-toggle:before{content:'';width:13px;height:15px;background:currentColor;clip-path:polygon(0 0,36% 0,36% 100%,0 100%,0 0,64% 0,100% 0,100% 100%,64% 100%,64% 0)}
  .motion-paused .motion-toggle:before{clip-path:polygon(8% 0,100% 50%,8% 100%)}
  .studio-overview{display:block}
  .studio-copy,.contact-copy,.example-notes,.contact .brief-form{padding:20px}
  .studio-copy{background:linear-gradient(145deg,#fff9f1da,#f8eaf1cc)}
  .studio-inner{padding-top:44px}
  .showcase{margin-top:103px}
  .contact-inner{padding-top:57px}
  .clay-stage .clay-browser{top:35%;left:49%;transform:translate(-50%,-50%) rotate(-8deg) rotateY(-10deg) scale(.82)}
}
@media(prefers-reduced-motion:reduce){
  .logo-intro[open]{display:none}
  .motion-backdrop{position:absolute;top:0;height:clamp(390px,70vh,720px);margin:0}
  .motion-field{transform:translate3d(calc(66vw - 50%),7%,0);will-change:auto}
  .motion-orbits{transform:none}
  .motion-field video{display:none}
  .motion-field:before{content:'';position:absolute;inset:0;background:url(blob-film.webp) center/contain no-repeat;mask-image:radial-gradient(ellipse 46% 39% at center,#000 24%,transparent 100%)}
}
@media print{.motion-backdrop,.motion-toggle,.logo-intro{display:none!important}}