.contact-page .ch-hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 70% 20%,#e4f6ffb0,transparent 65%),linear-gradient(115deg,#f7f9ff,#eef3ff 60%,#f4f0ff);padding:0 0 42px}.ch-hero::after{content:"";position:absolute;z-index:-1;pointer-events:none;inset:0;background:linear-gradient(140deg,transparent 50%,#fff6 50%,#fff0 74%),linear-gradient(26deg,#fff0 55%,#e0edff66 55%,transparent 78%)}.ch-layout{position:relative;display:grid;grid-template-columns:.95fr 1.05fr;align-items:center;min-height:590px}.ch-copy{position:relative;z-index:12;padding:55px 0 65px}.contact-page .ch-copy h1{font-size:clamp(37px,3.7vw,59px);line-height:1.3;font-weight:800;letter-spacing:-.04em;white-space:nowrap}.ch-copy h1>span{display:block;background:linear-gradient(100deg,#0084ff,#3659ff 53%,#a144ff);background-clip:text;-webkit-background-clip:text;color:transparent;margin-top:8px}.contact-page .ch-copy p{font-size:20px;line-height:1.85;color:#5e7192;margin-top:24px}.ch-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:30px}.ch-button{display:inline-flex;align-items:center;justify-content:center;gap:13px;padding:15px 23px;min-height:56px;border:1.5px solid #0877ff;border-radius:35px;background:linear-gradient(115deg,#128eff,#0763fa);color:#fff!important;font-size:17px;font-weight:700;box-shadow:0 7px 17px #167bff25;transition:transform .25s,box-shadow .25s}.ch-button:hover{transform:translateY(-3px);box-shadow:0 12px 22px #167bff38}.ch-button svg{width:23px;height:23px}.ch-button.ch-outline{background:white;color:#0877ff!important;box-shadow:none}.ch-scene{position:relative;display:block;align-self:end;justify-self:end;width:620px;height:570px;padding:0;border:0;background:none;color:inherit;cursor:pointer;margin:0 -30px 0 0;outline-offset:-10px}.ch-scene-inner{display:block;position:absolute;inset:0;pointer-events:none}.ch-deck{position:absolute;display:block;left:26px;top:22px;width:580px;height:445px;perspective:1300px}.ch-panel{position:absolute;display:block;left:0;top:0;width:244px;height:390px;border:4px solid white;border-radius:13px;overflow:hidden;background:white;transform-origin:50% 100%;transform:translate3d(var(--x),var(--y),0) rotateY(-17deg) rotateZ(1deg) scale(var(--s));box-shadow:4px 8px 11px #304c7f26,0 0 0 1px #d9e6f6;z-index:var(--z);transition:transform 1s cubic-bezier(.22,.75,.25,1),opacity .6s;backface-visibility:hidden}.ch-panel img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}.ch-panel[data-slot="0"]{--x:-17px;--y:65px;--s:.68;--z:1}.ch-panel[data-slot="1"]{--x:55px;--y:45px;--s:.76;--z:2}.ch-panel[data-slot="2"]{--x:127px;--y:25px;--s:.84;--z:3}.ch-panel[data-slot="3"]{--x:199px;--y:5px;--s:.92;--z:4}.ch-panel[data-slot="4"]{--x:271px;--y:-15px;--s:1;--z:5}.ch-dragie{position:absolute;z-index:9;width:285px!important;height:auto;left:108px;bottom:1px;filter:drop-shadow(0 9px 5px #55729e22);animation:ch-idle 5s ease-in-out infinite;transform-origin:50% 90%}.ch-orbit{position:absolute;z-index:7;left:0;right:-4px;bottom:71px;height:146px;border:5px solid #fff;border-left-color:#77d9ff;border-right-color:#a87dff;border-radius:50%;transform:rotate(-7deg);box-shadow:0 0 6px #70baff70,inset 0 0 6px #c0a1ff40}.ch-floor{position:absolute;z-index:0;left:-20px;right:-5px;bottom:7px;height:90px;border-radius:50%;background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:0 15px 0 #e6edfa55,0 23px 16px #8394b80a}.ch-scene[aria-pressed=true] .ch-dragie{animation-play-state:paused}.contact-page .ch-hero+.channel-strip{position:relative;z-index:14;background:#fff;border-radius:24px;width:min(1320px,calc(100% - 64px));margin-top:-38px;padding:32px 34px;box-shadow:0 9px 40px #49689c08;margin-bottom:30px}.contact-page .ch-hero+.channel-strip>a:last-child strong{font-size:17px}@keyframes ch-idle{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-5px) rotate(.5deg)}}@media(min-width:1600px){.ch-layout{min-height:650px}.ch-scene{transform:scale(1.08);transform-origin:100% 100%}}@media(max-width:1200px) and (min-width:761px){.ch-layout{grid-template-columns:1fr 1fr;min-height:510px}.ch-scene{width:500px;height:490px;margin-right:-30px}.ch-scene-inner{width:620px;height:570px;transform:scale(.84);transform-origin:100% 100%;left:auto;right:0;top:auto;bottom:0}.contact-page .ch-copy h1{font-size:38px}.contact-page .ch-copy p{font-size:16px}.ch-button{font-size:14px;padding:12px 17px;gap:9px}.ch-actions{gap:10px}}@media(max-width:760px){.contact-page .ch-hero{padding-bottom:36px}.ch-layout{display:flex;flex-direction:column;min-height:0}.ch-copy{width:100%;padding:32px 0 16px}.contact-page .ch-copy h1{font-size:clamp(26px,6.9vw,40px);white-space:normal;line-height:1.35}.ch-copy h1>span{margin-top:4px}.contact-page .ch-copy p{font-size:15px;line-height:1.85;margin-top:16px}.ch-actions{margin-top:21px;gap:10px}.ch-button{font-size:13px;padding:12px 16px;gap:8px;min-height:46px}.ch-button svg{width:20px;height:20px}.ch-scene{width:100%;height:330px;margin:0;align-self:center;justify-self:auto}.ch-scene-inner{width:620px;height:570px;inset:auto auto 0 50%;transform:translateX(-50%) scale(.58);transform-origin:50% 100%}.ch-dragie{width:285px!important}.contact-page .ch-hero+.channel-strip{width:calc(100% - 32px);padding:25px 22px;margin-top:-30px;margin-bottom:16px}.contact-page .ch-hero+.channel-strip>a:last-child strong{font-size:17px}.contact-page .ch-hero+.channel-strip>a{padding-block:16px}.contact-page .ch-hero+.channel-strip>a:first-child{padding-top:0}.contact-page .ch-hero+.channel-strip>a:last-child{padding-bottom:0}}@media(max-width:360px){.ch-scene{height:295px}.ch-scene-inner{transform:translateX(-50%) scale(.51)}.ch-actions{gap:8px}.ch-button{font-size:12px;padding:11px 13px}}@media(prefers-reduced-motion:reduce){.ch-panel,.ch-button{transition:none}.ch-dragie{animation:none}.ch-button:hover{transform:none}}
.ch-dragie{display:block;width:265px!important;aspect-ratio:3/4;height:auto;left:118px;background:url('./contact-assets/dragie-welcome-poses.webp') left top/400% 100% no-repeat}.ch-dragie canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.ch-dragie.ch-mascot-ready{background-image:none}@media(max-width:760px){.ch-dragie{width:265px!important}}
@media(min-width:1201px){.contact-page .ch-copy h1{font-size:clamp(48px,4.1vw,62px)}}
@media(min-width:761px){.ch-layout{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}.ch-copy{min-width:0}.contact-page:lang(en) .ch-copy h1{white-space:normal;font-size:46px;line-height:1.22}.contact-page:lang(en) .ch-copy h1>span{font-size:43px}.contact-page:lang(en) .ch-copy p{font-size:18px}}@media(min-width:761px) and (max-width:1200px){.contact-page:lang(en) .ch-copy h1{font-size:35px}.contact-page:lang(en) .ch-copy h1>span{font-size:33px}.contact-page:lang(en) .ch-copy p{font-size:15px}}@media(max-width:760px){.contact-page:lang(en) .ch-copy h1{font-size:30px;white-space:normal;line-height:1.25}}
/* Scale the complete character and stacked websites together to 80%. */
@media(min-width:1201px){.ch-scene-inner{transform:scale(.8);transform-origin:50% 100%}}@media(min-width:761px) and (max-width:1200px){.ch-scene-inner{transform:scale(.672)}}@media(max-width:760px){.ch-scene{height:264px}.ch-scene-inner{transform:translateX(-50%) scale(.464)}}@media(max-width:360px){.ch-scene{height:236px}.ch-scene-inner{transform:translateX(-50%) scale(.408)}}

/* Compact showroom: match the Demo Studio hero and reuse the home podium. */
.contact-page .ch-orbit{display:none}
.contact-page .ch-floor{left:35px;right:auto;bottom:-37px;width:550px;height:99px;border-radius:0;background:url('/hero-preview/pearl-podium.svg') center/contain no-repeat;box-shadow:none}
.ch-floor::after{content:"";position:absolute;left:155px;top:30px;width:190px;height:26px;border-radius:50%;background:radial-gradient(ellipse,#344d7952 0%,#47618c28 38%,transparent 72%);filter:blur(4px)}
@media(min-width:761px){.contact-page .ch-hero{padding-bottom:20px}.ch-layout{min-height:415px;height:415px}.ch-scene{height:415px;transform:none}.ch-scene-inner{width:620px;height:570px;inset:auto 0 0 auto;transform:scale(.7);transform-origin:50% 100%}.ch-copy{padding:26px 0 35px}.contact-page .ch-copy h1{font-size:clamp(35px,3.7vw,54px)}.contact-page .ch-copy p{margin-top:18px;font-size:18px}.ch-actions{margin-top:22px}.contact-page:lang(en) .ch-copy h1{font-size:40px}.contact-page:lang(en) .ch-copy h1>span{font-size:37px}}
@media(min-width:1440px){.ch-layout{height:455px;min-height:455px}.ch-scene{height:455px}.ch-scene-inner{transform:scale(.8)}}
@media(min-width:961px) and (max-width:1100px){.ch-layout{height:326px;min-height:326px}.ch-scene{height:326px}.ch-scene-inner{transform:scale(.55);transform-origin:100% 100%}.contact-page .ch-copy h1{font-size:36px}.contact-page .ch-copy p{font-size:15px}.ch-copy{padding:15px 0 25px}.contact-page:lang(en) .ch-copy h1,.contact-page:lang(en) .ch-copy h1>span{font-size:30px}}
@media(min-width:761px) and (max-width:960px){.ch-layout{height:310px;min-height:310px}.ch-scene{height:310px}.ch-scene-inner{transform:scale(.52);transform-origin:100% 100%}.contact-page .ch-copy h1{font-size:30px}.contact-page .ch-copy p{font-size:14px}.ch-copy{padding:14px 0 24px}.ch-actions{gap:8px;margin-top:16px}.ch-button{padding:10px 12px;font-size:12px;min-height:44px}.contact-page:lang(en) .ch-copy h1,.contact-page:lang(en) .ch-copy h1>span{font-size:27px}.contact-page:lang(en) .ch-copy p{font-size:13px}}

@media(min-width:1201px){.ch-scene-inner{bottom:35px;transform:scale(.64)}}@media(min-width:1440px){.ch-scene-inner{transform:scale(.72)}}
@media(min-width:761px) and (max-width:1200px){.ch-scene-inner{bottom:28px}}@media(max-width:760px){.ch-scene-inner{bottom:24px}}

/* Same pearlescent light ribbons as the homepage hero. */
.contact-page .ch-hero{background:#eff5ff url('/hero-preview/pearl-showroom.svg') center top/100% 100% no-repeat}
.ch-hero::after{background:linear-gradient(90deg,#ffffff38,transparent 60%)}
@media(max-width:760px){.contact-page .ch-hero{background-size:auto 100%}}

/* Match Demo Studio hero typography at each viewport. */
@media(min-width:761px){.ch-layout{grid-template-columns:minmax(0,56fr) minmax(0,44fr)}.contact-page .ch-copy h1{font-size:clamp(48px,6.05vw,80px);line-height:1.08;letter-spacing:-.045em}.contact-page .ch-copy h1>span{font-size:.89em}.contact-page .ch-copy p{font-size:clamp(17px,2vw,26px);line-height:1.45}.contact-page:lang(en) .ch-copy h1{font-size:clamp(36px,4.45vw,62px);line-height:1.13}.contact-page:lang(en) .ch-copy h1>span{font-size:.9em}.contact-page:lang(en) .ch-copy p{font-size:16px}}
@media(min-width:961px) and (max-width:1100px){.contact-page .ch-copy h1{font-size:70px;line-height:1.04}.contact-page .ch-copy h1>span{font-size:55px}.contact-page .ch-copy p{font-size:21px}}
@media(min-width:761px) and (max-width:960px){.contact-page .ch-copy h1{font-size:clamp(48px,6.5vw,62px)}.contact-page .ch-copy h1>span{font-size:clamp(39px,5.15vw,49px)}.contact-page .ch-copy p{font-size:17px}.contact-page:lang(en) .ch-copy h1{font-size:40px}.contact-page:lang(en) .ch-copy h1>span{font-size:.9em}}
@media(max-width:760px){.contact-page .ch-copy h1{font-size:clamp(35px,8.1vw,56px);line-height:1.22}.contact-page .ch-copy h1>span{font-size:.89em}.contact-page .ch-copy p{font-size:16px;line-height:1.6}.contact-page:lang(en) .ch-copy h1{font-size:clamp(37px,8.7vw,58px)}.contact-page:lang(en) .ch-copy h1>span{font-size:.86em}.contact-page:lang(en) .ch-copy p{font-size:15px}}
@media(max-width:400px){.contact-page:lang(th) .ch-copy h1{font-size:33px}}

/* Feature Dragie at the Demo Studio scale; keep the websites secondary. */
.contact-page .ch-floor{display:none}
.ch-deck{transform:scale(.8);transform-origin:65% 85%}
.contact-page .ch-dragie{width:473px!important;left:140px;bottom:0;filter:drop-shadow(0 10px 9px #46618b24)}
@media(min-width:761px){.ch-scene-inner{bottom:0}}
@media(min-width:761px) and (max-width:1200px){.contact-page .ch-dragie{width:420px!important;left:180px}}
@media(max-width:760px){.ch-scene{height:310px}.ch-scene-inner{bottom:0}.contact-page .ch-dragie{width:473px!important;left:74px}.ch-deck{transform:scale(.75);transform-origin:50% 80%}}
@media(max-width:360px){.ch-scene{height:280px}}
.ch-deck{transform:translate(-55px,-95px) scale(.8)}
@media(max-width:760px){.ch-deck{transform:translate(-35px,-75px) scale(.75)}}

/* Let Dragie step beyond the hero edge, as on Demo Studio. */
.contact-page .ch-hero{overflow:visible;z-index:1}
.ch-hero::after{pointer-events:none}
.contact-page .ch-dragie{bottom:-64px}
@media(max-width:760px){.contact-page .ch-dragie{bottom:-110px}}

/* Reveal the stacked websites to Dragie's right. */
.contact-page .ch-dragie{left:-5px}
@media(min-width:761px) and (max-width:1200px){.contact-page .ch-dragie{left:55px}}
@media(max-width:760px){.contact-page .ch-dragie{left:-5px}}

/* Soft ground contact shadow, kept behind the transparent mascot canvas. */
.contact-page .ch-dragie::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:18%;right:10%;bottom:-7px;height:34px;border-radius:50%;background:radial-gradient(ellipse at center,#30436745 0%,#40577c2b 28%,#62779b12 54%,transparent 74%);filter:blur(6px)}

/* Complete-hand mascot artwork, with space between Dragie and the website fan. */
.contact-page .ch-dragie{width:570px!important;aspect-ratio:680/742;left:-130px;background-image:url('./contact-assets/dragie-welcome.webp');background-size:100% 100%}
.ch-deck{transform:translate(75px,-70px) scale(.8);transform-origin:65% 85%}
@media(min-width:761px) and (max-width:1200px){.contact-page .ch-dragie{width:510px!important;left:-30px}.ch-deck{transform:translate(65px,-65px) scale(.8)}}
@media(max-width:760px){.contact-page .ch-dragie{width:570px!important;left:-125px}.ch-deck{transform:translate(80px,-65px) scale(.75)}}
.contact-page .ch-dragie.ch-mascot-ready{background-image:none}
@media(min-width:1201px){.contact-page .ch-dragie{left:-150px}.ch-deck{transform:translate(135px,-70px) scale(.8)}}