/* Animated project devices follow the homepage reading column. */
.site-shell--home .section--showcase{position:relative;width:100%;margin-left:0;transform:none}
.section--showcase>.section-heading{margin-bottom:12px}
.section--showcase .project-filters{gap:6px;margin-bottom:24px}
.section--showcase .project-filters button{gap:7px;padding:7px 13px;border:1px solid transparent;border-radius:999px;background:var(--raised);font-size:12px;line-height:20px;text-decoration:none}
.section--showcase .project-filters button[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--bg)}
.section--showcase .project-filters button[aria-pressed="true"] .project-filter-count{color:inherit;opacity:.65}
.section--showcase .project-filters button:not([aria-pressed="true"]):hover{border-color:var(--border);background:var(--border)}
.section--showcase .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.section--showcase .project-card{position:relative;min-width:0;height:440px;padding:0;overflow:visible;isolation:isolate;border:0;border-radius:22px;background:#efefed;box-shadow:none;container-type:inline-size;transition:filter 220ms var(--ease),opacity 220ms var(--ease)}
.section--showcase .project-card:hover{transform:none;box-shadow:none}
.section--showcase .project-card.is-noting{z-index:4}
.section--showcase .project-card-copy{display:contents}
.section--showcase .row-title{position:absolute;z-index:2;top:23px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#252525;font-size:17px;font-weight:600;line-height:1.35;letter-spacing:-.025em}
.project-title-text{min-width:0}
.project-brand-logo{display:block;width:auto;height:20px;max-width:70px;flex:0 0 auto;object-fit:contain}
.section--showcase [data-project="maybank"] .project-brand-logo{width:74px;height:auto;max-height:20px}
.section--showcase [data-project="grab"] .project-brand-logo{width:39px;height:auto}
.section--showcase [data-project="ayana"] .project-brand-logo{width:auto;height:29px;max-width:54px}
.section--showcase .row-description{position:absolute;z-index:2;bottom:22px;left:20px;right:20px;margin:0;color:#747674;font-size:12px;line-height:1.6;font-weight:400}
.section--showcase .showcase-stage{display:block;position:absolute;inset:0;height:100%;aspect-ratio:auto;border-radius:22px;overflow:hidden;background:transparent;pointer-events:none}
.showcase-composition{position:absolute;inset:90px 14px 90px;display:flex;align-items:center;justify-content:center;perspective:1200px}
.showcase-phone{position:absolute;display:block;height:94%;aspect-ratio:390/810;padding:5px;border:1px solid #777;border-radius:25px;background:#202220;box-shadow:0 18px 24px -14px #0005,inset 0 0 0 1px #111}
.showcase-screen{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:19px;background:#fff}
.showcase-screen>video,.showcase-screen>img{position:absolute;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top}
.showcase-stage--honda .showcase-phone{height:78%;aspect-ratio:520/1128}
.showcase-stage--honda .showcase-phone--main{z-index:2;left:50%;transform:translateX(-50%)}
.showcase-stage--honda .showcase-phone--left,.showcase-stage--honda .showcase-phone--right{z-index:1;left:50%;top:12%;opacity:0;transform:translateX(-50%) scale(.88);transition:transform 320ms var(--ease),opacity 200ms ease}
.project-card.is-noting .showcase-phone--left{opacity:1;transform:translateX(calc(-50% - 23cqw)) rotate(-8deg)}
.project-card.is-noting .showcase-phone--right{opacity:1;transform:translateX(calc(-50% + 23cqw)) rotate(8deg)}
.showcase-stage--honda .showcase-screen>video,.showcase-stage--honda .showcase-screen>img{width:117%;height:106%;left:-8.5%;top:-3%}
.showcase-stage .showcase-phone--main{height:98%;aspect-ratio:520/1128;top:1%}
.showcase-phone--main,.showcase-desktop{z-index:2}
.showcase-stage--grab .showcase-screen>video{width:208%;height:106.4%;left:-54%;top:-3.2%;object-fit:fill}
.showcase-stage--astra .showcase-screen>video{width:204%;height:115%;left:-52%;top:-7.5%;object-fit:fill}
.showcase-stage--ayo .showcase-screen>video{width:116.5%;height:109.2%;left:-8%;top:-4.6%;object-fit:fill}
.showcase-desktop{position:relative;display:block;width:96%;padding:7px 7px 16px;border:1px solid #737575;border-radius:14px 14px 9px 9px;background:#242626;box-shadow:0 20px 25px -15px #0005}
.showcase-desktop::before{position:absolute;left:50%;top:2px;width:3px;height:3px;border-radius:50%;background:#737575;content:""}
.showcase-desktop-screen{position:relative;display:block;overflow:hidden;aspect-ratio:1440/900;border-radius:5px;background:white}
.showcase-desktop-screen video{display:block;width:100%;height:100%;object-fit:contain}
.showcase-desktop-stand{position:absolute;top:100%;left:50%;width:25%;height:44px;transform:translateX(-50%);background:linear-gradient(90deg,#a7a8a6,#d6d7d4 45%,#b4b5b2);clip-path:polygon(18% 0,82% 0,91% 91%,100% 96%,100% 100%,0 100%,0 96%,9% 91%)}
:is(.showcase-stage--maybank,.showcase-stage--ayana) .showcase-desktop{position:absolute;left:0;top:13%;width:94%;margin:0;transform:none;padding:5px 5px 12px;border-radius:10px}
:is(.showcase-stage--maybank,.showcase-stage--ayana) .showcase-phone--companion{right:0;bottom:3%;height:64%;padding:3px;border-radius:17px;z-index:3}
:is(.showcase-stage--maybank,.showcase-stage--ayana) .showcase-phone--companion .showcase-screen{border-radius:13px}
.showcase-desktop-stand{height:32px}
.section--showcase .card-note{inset:88px 10px auto;min-height:260px;aspect-ratio:auto;padding:12px;border-radius:16px;grid-template-columns:36px minmax(0,1fr);background:color-mix(in srgb,var(--preview) 96%,transparent)}
.section--showcase .card-note p{font-size:13px;line-height:20px}
@media(min-width:1300px){.section--showcase .card-note{inset:auto;top:50%;min-height:0;width:17rem;padding:0;transform:translateY(-50%);background:transparent;grid-template-columns:70px minmax(0,1fr)}.section--showcase .card-note[data-side="left"]{right:calc(100% + 14px);grid-template-columns:minmax(0,1fr) 70px}.section--showcase .card-note[data-side="right"]{left:calc(100% + 14px)}.section--showcase .card-note p{font-size:14px;line-height:21px}}
.section--showcase .project-card[data-project="grab"]{background:#eaf0ec}
.section--showcase .project-card[data-project="maybank"]{background:#f0ede4}
.section--showcase .project-card[data-project="astra"]{background:#ebeff2}
.section--showcase .project-card[data-project="ayo"]{background:#edf0e9}
.section--showcase .project-card[data-project="ayana"]{background:#eeebe4}
:root[data-theme='dark'] .section--showcase .project-card{background:#242625}
:root[data-theme='dark'] .section--showcase .row-title{color:#eee}
:root[data-theme='dark'] .section--showcase .row-description{color:#b2b5b2}
:root[data-theme='dark'] .section--showcase [data-project="ayana"] .project-brand-logo,:root[data-theme='dark'] .section--showcase [data-project="maybank"] .project-brand-logo{filter:invert(1)}
@media(max-width:599px){.section--showcase .project-grid{grid-template-columns:minmax(0,1fr);gap:20px}.section--showcase .project-card{height:480px}.section--showcase .row-title{font-size:18px}.showcase-composition{inset:90px 20px 95px}}
@media(prefers-reduced-motion:reduce){.showcase-phone--left,.showcase-phone--right{transition:none!important}}
@media(hover:none),(prefers-reduced-motion:reduce){.section--showcase .project-card:hover{transform:none}}