/* Chethu Cinematic Gift 2.5.0 — scoped, responsive 16:4 composition. */
.cccg{--cccg-bg:#f5f1e9;--cccg-box:#39414e;--cccg-gold:#df2637;--cccg-ink:#202b3a;--cccg-muted:#576273;--cccg-time:8s;--cccg-stage-scale:1;container-type:inline-size;box-sizing:border-box;width:calc(100% - 32px);max-width:1280px;margin:20px auto;font-family:Arial,Helvetica,sans-serif;isolation:isolate;clear:both}
.cccg[hidden]{display:none!important}.cccg *{box-sizing:border-box}
.cccg .cccg-panel{position:relative;overflow:hidden;width:100%;height:auto;min-height:0;aspect-ratio:16/9;border-radius:14px;border:1px solid #26344612;background:radial-gradient(ellipse at 76% 42%,#c9a76a24,transparent 56%),var(--cccg-bg);box-shadow:0 6px 24px #17243809;color:var(--cccg-ink)}
.cccg .cccg-copy{position:absolute;left:6%;top:20%;width:42%;padding:0;z-index:2;text-align:left}
.cccg .cccg-eyebrow{font-size:clamp(8px,1cqw,12px);line-height:1.5;font-weight:700;letter-spacing:clamp(.6px,.17cqw,2px);color:var(--cccg-muted);margin:0 0 1.8cqw;max-width:100%}
.cccg h2{font:500 clamp(18px,4.4cqw,56px)/1.1 Georgia,'Times New Roman',serif;letter-spacing:-.025em;color:var(--cccg-ink)!important;margin:0 0 1.8cqw;max-width:100%;text-wrap:balance;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.cccg .cccg-description{font-size:clamp(11px,1.35cqw,17px);line-height:1.6;color:var(--cccg-muted);margin:0;max-width:32ch;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.cccg .cccg-cta,.cccg .cccg-trigger{position:absolute;bottom:7%;min-height:44px;border-radius:6px;font-family:inherit;font-size:clamp(11px,1.2cqw,15px);font-weight:600;line-height:1.2;letter-spacing:0;margin:0;cursor:pointer;z-index:7;display:flex;align-items:center;justify-content:center;padding:12px 18px;text-align:center;touch-action:manipulation}
.cccg .cccg-cta{left:6%;max-width:42%;gap:16px;background:#263446;color:#fff!important;border:1px solid #263446;text-decoration:none!important;box-shadow:0 3px 8px #17243812}
.cccg .cccg-cta:hover{background:#35465d}.cccg .cccg-cta span{flex:none}
.cccg .cccg-trigger{left:76%;transform:translateX(-50%);max-width:40%;appearance:none;background:#ffffff70;color:var(--cccg-ink);border:1px solid #57627338;pointer-events:auto;white-space:nowrap}
.cccg .cccg-trigger:hover{background:#ffffffb0}.cccg .cccg-trigger:disabled{cursor:default;opacity:.65}.cccg .cccg-trigger[hidden]{display:none}
.cccg .cccg-cta:focus-visible,.cccg .cccg-trigger:focus-visible{outline:3px solid #a47530;outline-offset:3px}
.cccg .cccg-visual{position:absolute;inset:0;padding:0;pointer-events:none}
.cccg .cccg-stage{position:absolute;left:74%;top:43%;width:600px;height:460px;margin:0;transform:translate(-50%,-50%) scale(var(--cccg-stage-scale));transform-origin:center;pointer-events:none}
.cccg .cccg-status{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@container(max-width:600px){
 .cccg .cccg-panel{border-radius:10px}
 .cccg .cccg-copy{top:12%;width:43%}
 .cccg .cccg-eyebrow{font-size:8px;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:8px}
 .cccg h2{font-size:clamp(18px,5.1cqw,30px);line-height:1.1;margin:0}
 .cccg .cccg-description{display:none}
 .cccg .cccg-cta,.cccg .cccg-trigger{bottom:6%;font-size:11px;padding:9px 10px;height:44px}
 .cccg .cccg-cta{max-width:43%;overflow:hidden}
 .cccg .cccg-cta span{display:none}
 .cccg .cccg-stage{top:40%}
 .cccg .cccg-surprise span{display:none}
}
@media(max-width:600px){.cccg{width:calc(100% - 20px);margin:12px auto}}

.cccg .cccg-delivery{display:block;width:600px;height:460px;overflow:visible}
.cccg .cccg-surprise{position:absolute;left:0;right:0;bottom:3px;text-align:center;opacity:0;color:var(--cccg-ink);font:600 18px/1.3 Arial,sans-serif}
.cccg .cccg-scooter{transform:translateX(-265px);opacity:0}
.cccg .cccg-courier,.cccg .cccg-confirm{opacity:0}
.cccg .cccg-parcel{transform:translate(97px,267px);opacity:0}
.cccg-playing .cccg-scooter{animation:cccg-arrive var(--cccg-time) both}
.cccg-playing .cccg-rider{animation:cccg-dismount var(--cccg-time) both}
.cccg-playing .cccg-courier{animation:cccg-walk var(--cccg-time) both}
.cccg-playing .cccg-parcel{animation:cccg-handover var(--cccg-time) both}
.cccg-playing .cccg-confirm,.cccg-playing .cccg-surprise{animation:cccg-received var(--cccg-time) both}
.cccg-playing .cccg-wheel{animation:cccg-wheel var(--cccg-time) both}
.cccg-playing .cccg-speed{animation:cccg-speed var(--cccg-time) both}
.cccg-playing .cccg-receive-arm{animation:cccg-reach var(--cccg-time) both;transform-origin:431px 280px}
.cccg-open .cccg-scooter,.cccg-open .cccg-courier{transform:none;opacity:1}
.cccg-open .cccg-rider,.cccg-open .cccg-speed{opacity:0}
.cccg-open .cccg-parcel{transform:translate(392px,243px);opacity:1}
.cccg-open .cccg-confirm,.cccg-open .cccg-surprise{opacity:1}
@keyframes cccg-arrive{0%{transform:translateX(-265px);opacity:0}5%{opacity:1}35%,100%{transform:translateX(0);opacity:1}}
@keyframes cccg-dismount{0%,38%{opacity:1}45%,100%{opacity:0}}
@keyframes cccg-walk{0%,41%{opacity:0;transform:translate(-103px,-10px)}46%{opacity:1;transform:translate(-103px,-10px)}61%,100%{opacity:1;transform:none}}
@keyframes cccg-handover{0%{transform:translate(-168px,267px);opacity:0}5%{opacity:1}35%,41%{transform:translate(97px,267px);opacity:1}46%{transform:translate(224px,267px);opacity:1}61%,68%{transform:translate(327px,267px);opacity:1}82%,100%{transform:translate(392px,243px);opacity:1}}
@keyframes cccg-received{0%,81%{opacity:0;transform:translateY(8px)}91%,100%{opacity:1;transform:none}}
@keyframes cccg-wheel{0%{transform:rotate(0)}35%,100%{transform:rotate(540deg)}}
@keyframes cccg-speed{0%,25%{opacity:1}36%,100%{opacity:0}}
@keyframes cccg-reach{0%,60%{transform:rotate(-22deg)}78%,100%{transform:none}}
@media(prefers-reduced-motion:reduce){.cccg *{animation:none!important;transition:none!important}.cccg .cccg-scooter,.cccg .cccg-courier{transform:none;opacity:1}.cccg .cccg-rider,.cccg .cccg-speed{opacity:0}.cccg .cccg-parcel{transform:translate(392px,243px);opacity:1}.cccg .cccg-confirm,.cccg .cccg-surprise{opacity:1}}

/* Slim editorial banner. Scene remains contained inside the 16:4 panel. */
.cccg{max-width:1440px;margin:16px auto}
.cccg .cccg-panel{aspect-ratio:16/4;border-radius:10px;background:radial-gradient(ellipse at 80% 50%,#c9a76a18,transparent 48%),var(--cccg-bg);border:1px solid #26344616;box-shadow:0 4px 18px #17243806}
.cccg .cccg-copy{left:5%;top:16%;width:51%}
.cccg .cccg-eyebrow{font-size:clamp(8px,.85cqw,12px);margin:0 0 .8cqw;letter-spacing:.15em}
.cccg h2{font-size:clamp(16px,3cqw,42px);line-height:1.12;margin:0 0 .8cqw;-webkit-line-clamp:2}
.cccg .cccg-title-link{color:inherit!important;text-decoration:none!important;display:block}
.cccg .cccg-title-link:focus-visible{outline:2px solid #a47530;outline-offset:3px}
.cccg .cccg-description{font-size:clamp(11px,1.1cqw,16px);line-height:1.45;max-width:46ch;-webkit-line-clamp:2}
.cccg .cccg-cta{left:5%;bottom:10%;padding:10px 18px;min-height:44px;font-size:clamp(11px,1.05cqw,15px);border-radius:4px}
.cccg .cccg-stage{left:78%;top:48%}
.cccg .cccg-surprise,.cccg .cccg-trigger{display:none!important}
@container(max-width:950px){.cccg .cccg-description{display:none}.cccg .cccg-copy{top:13%}.cccg h2{font-size:clamp(18px,3cqw,28px)}.cccg .cccg-cta{bottom:9%;height:44px}}
@container(max-width:600px){.cccg .cccg-copy{top:50%;transform:translateY(-50%);width:52%}.cccg .cccg-eyebrow,.cccg .cccg-description,.cccg .cccg-cta{display:none}.cccg h2{font-size:clamp(14px,4cqw,24px);line-height:1.15;margin:0}.cccg .cccg-title-link{min-height:44px;display:flex;align-items:center}.cccg .cccg-stage{left:78%;top:48%}.cccg .cccg-panel{border-radius:8px}}

/* Branded photo edition: transparent rider cutout. */
.cccg .cccg-panel{background:var(--cccg-bg);border:1px solid #ffffff12;box-shadow:0 6px 22px #00000014}
.cccg .cccg-eyebrow{color:#ef6a73}
.cccg .cccg-cta{background:#cc2130;border-color:#e13745;color:#fff!important;box-shadow:none}
.cccg .cccg-cta:hover{background:#e12a3b}
.cccg .cccg-building{opacity:1}.cccg .cccg-plant{opacity:.85}
.cccg .cccg-confirm{filter:drop-shadow(0 2px 10px #0006)}
.cccg .cccg-title-link:focus-visible,.cccg .cccg-cta:focus-visible{outline-color:#ff7180}
@keyframes cccg-handover{0%,40%{transform:translate(145px,264px);opacity:0}48%{transform:translate(170px,263px);opacity:1}65%{transform:translate(323px,256px);opacity:1}82%,100%{transform:translate(392px,243px);opacity:1}}

/* Warm architectural palette, with the transparent rider above it. */
.cccg .cccg-panel{background:radial-gradient(ellipse at 81% 40%,#d7bc8c26,transparent 55%),linear-gradient(110deg,#ffffff38,transparent 60%),var(--cccg-bg);border:1px solid #b6a38333;box-shadow:0 5px 20px #2732440a}
.cccg .cccg-eyebrow{color:var(--cccg-muted)}
.cccg .cccg-confirm{filter:drop-shadow(0 2px 5px #22334415)}
.cccg .cccg-title-link:focus-visible,.cccg .cccg-cta:focus-visible{outline-color:#a56838}

/* 2.0: arrive > park > dismount > walk > hand over > receive. */
.cccg .cccg-parked{opacity:0}.cccg .cccg-seated{opacity:1}
.cccg .cccg-courier{opacity:0;transform:translate(-145px,-28px)}
.cccg-playing .cccg-seated{animation:cccg-seat-exit var(--cccg-time) both}
.cccg-playing .cccg-parked{animation:cccg-park var(--cccg-time) both}
.cccg-playing .cccg-courier{animation:cccg-step-down var(--cccg-time) both}
.cccg-playing .cccg-walking-body{animation:cccg-footsteps var(--cccg-time) linear both;transform-origin:310px 390px}
.cccg-open .cccg-parked{opacity:1}.cccg-open .cccg-seated{opacity:0}
.cccg-open .cccg-courier{transform:none;opacity:1}
@keyframes cccg-arrive{0%{transform:translateX(-265px);opacity:0}5%{opacity:1}30%,100%{transform:none;opacity:1}}
@keyframes cccg-seat-exit{0%,33%{opacity:1}41%,100%{opacity:0}}
@keyframes cccg-park{0%,33%{opacity:0}41%,100%{opacity:1}}
@keyframes cccg-step-down{0%,35%{opacity:0;transform:translate(-145px,-28px) rotate(-6deg)}40%{opacity:1;transform:translate(-145px,-28px) rotate(-6deg)}48%{opacity:1;transform:translate(-118px,0)}52%{opacity:1;transform:translate(-118px,0)}72%,100%{opacity:1;transform:none}}
@keyframes cccg-footsteps{0%,51%,56%,62%,68%,74%,100%{transform:translateY(0) rotate(0)}53%,59%,65%,71%{transform:translateY(-5px) rotate(-2deg)}}
@keyframes cccg-handover{0%,48%{transform:translate(207px,264px);opacity:0}52%{transform:translate(216px,264px);opacity:1}72%,76%{transform:translate(334px,264px);opacity:1}86%,100%{transform:translate(392px,243px);opacity:1}}
@keyframes cccg-received{0%,86%{opacity:0;transform:translateY(8px)}94%,100%{opacity:1;transform:none}}
@keyframes cccg-reach{0%,74%{transform:rotate(-22deg)}86%,100%{transform:none}}
@media(prefers-reduced-motion:reduce){.cccg .cccg-seated{opacity:0}.cccg .cccg-parked{opacity:1}.cccg .cccg-courier{opacity:1;transform:none}}

/* 2.1: shared character ground line and matched handover height. */
.cccg .cccg-customer{transform-origin:440px 390px}
.cccg-playing .cccg-customer{animation:cccg-customer-receipt var(--cccg-time) both}
.cccg .cccg-copy{width:45%;top:17%}
.cccg h2{font-family:Arial,Helvetica,sans-serif;font-weight:650;font-size:clamp(17px,2.7cqw,38px);line-height:1.13;letter-spacing:-.025em}
.cccg .cccg-stage{left:76%;top:47%}
.cccg .cccg-cta{bottom:9%;border-radius:6px}
.cccg .cccg-building{opacity:.82}
@keyframes cccg-handover{0%,48%{transform:translate(207px,243px);opacity:0}52%{transform:translate(216px,243px);opacity:1}72%,76%{transform:translate(334px,243px);opacity:1}86%,100%{transform:translate(392px,243px);opacity:1}}
@keyframes cccg-customer-receipt{0%,75%{transform:none}82%{transform:rotate(-1.5deg)}90%,100%{transform:none}}
@container(max-width:950px){.cccg .cccg-copy{top:13%;width:45%}.cccg h2{font-size:clamp(17px,2.7cqw,27px)}}
@container(max-width:600px){.cccg .cccg-copy{top:50%;width:46%}.cccg h2{font-size:clamp(13px,3.9cqw,23px);line-height:1.12}.cccg .cccg-stage{left:76%;top:47%}}

/* Jointed gait, limited to the walk from 52% to 72% of the sequence. */
.cccg .cccg-leg-back{transform-origin:306px 303px;transform-box:view-box}
.cccg .cccg-leg-front{transform-origin:319px 303px;transform-box:view-box}
.cccg .cccg-knee-back{transform-origin:297px 342px;transform-box:view-box}
.cccg .cccg-knee-front{transform-origin:329px 342px;transform-box:view-box}
.cccg-playing .cccg-leg-back{animation:cccg-stride-back var(--cccg-time) linear both}
.cccg-playing .cccg-leg-front{animation:cccg-stride-front var(--cccg-time) linear both}
.cccg-playing .cccg-knee-back{animation:cccg-knee-back var(--cccg-time) linear both}
.cccg-playing .cccg-knee-front{animation:cccg-knee-front var(--cccg-time) linear both}
@keyframes cccg-stride-back{0%,51%,73%,100%{transform:rotate(0)}53%,61%,69%{transform:rotate(14deg)}57%,65%{transform:rotate(-14deg)}}
@keyframes cccg-stride-front{0%,51%,73%,100%{transform:rotate(0)}53%,61%,69%{transform:rotate(-14deg)}57%,65%{transform:rotate(14deg)}}
@keyframes cccg-knee-back{0%,51%,57%,65%,73%,100%{transform:rotate(0)}54%,62%,70%{transform:rotate(24deg)}}
@keyframes cccg-knee-front{0%,51%,53%,61%,69%,73%,100%{transform:rotate(0)}58%,66%{transform:rotate(24deg)}}
@keyframes cccg-footsteps{0%,51%,53%,57%,61%,65%,69%,73%,100%{transform:translateY(0)}55%,59%,63%,67%,71%{transform:translateY(-2px)}}
.cccg-open .cccg-leg-back,.cccg-open .cccg-leg-front,.cccg-open .cccg-knee-back,.cccg-open .cccg-knee-front{transform:none}

/* Full-width journey, store left to customer right. */
.cccg .cccg-stage{inset:0;left:0;top:0;width:100%;height:100%;transform:none;margin:0}
.cccg .cccg-delivery{width:100%;height:100%;display:block;overflow:hidden}
.cccg .cccg-copy{display:none}
@keyframes cccg-arrive{0%{transform:translateX(-650px);opacity:0}4%{opacity:1}30%,100%{transform:none;opacity:1}}
/* In-scene CTA: reserved lower-right space beneath the customer building. */
.cccg .cccg-shop-overlay{position:absolute;z-index:5;right:7%;bottom:3%;width:16%;display:flex;justify-content:center}
.cccg .cccg-shop-overlay .cccg-cta{position:relative;inset:auto;display:inline-flex;align-items:center;justify-content:center;gap:clamp(4px,.9cqw,13px);width:100%;max-width:180px;height:clamp(16px,2.8cqw,40px);min-height:0;margin:0;padding:0 6px;box-sizing:border-box;border-radius:clamp(3px,.5cqw,7px);font-size:clamp(9px,1.15cqw,15px);font-weight:600;line-height:1;white-space:nowrap;text-decoration:none;background:linear-gradient(135deg,#303947,#171e28);border:1px solid #c6a76b;box-shadow:0 3px 10px #17202b24;color:#f6e6c5!important}
.cccg .cccg-shop-overlay .cccg-cta:before{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,44px);transform:translateY(-50%)}
.cccg .cccg-shop-overlay .cccg-cta:hover{background:#344152;border-color:#e2c58d;color:#fff4db!important}
.cccg .cccg-shop-overlay .cccg-cta:focus-visible{outline:2px solid #273244;outline-offset:3px}
.cccg .cccg-shop-overlay .cccg-cta span{display:inline}