/* Final hero owns layout, instead of accumulating overrides. */
#hero-stage{display:block;min-height:850px;padding:calc(var(--header-h) + 50px) var(--gutter) 50px;overflow:hidden}
#hero-stage .hero-content{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);grid-template-rows:auto auto;align-items:center;gap:36px 30px;max-width:1440px;position:relative;z-index:3;pointer-events:none}
#hero-stage .hero-copy{width:100%;max-width:none;margin:0;align-self:center;position:relative;z-index:5}
#hero-stage .hero-copy h1{display:block;max-width:580px;font-size:clamp(42px,4.8vw,72px);line-height:1.12;margin:22px 0 24px;letter-spacing:-.035em}
#hero-stage .hero-copy h1 span{display:inline;line-height:inherit}
#hero-stage .hero-copy .lead{font-size:clamp(16px,1.3vw,19px);line-height:1.7;max-width:490px;margin:0}
#hero-stage .hero-copy .eyebrow{display:block;line-height:1.8;letter-spacing:.17em}
#hero-stage .hero-tags{margin:24px 0;gap:12px 18px;line-height:1.6}
#hero-stage .hero-actions{position:relative;display:flex;flex-wrap:wrap;gap:14px;margin:0}
#hero-stage .hero-visual{height:590px;min-width:0;position:relative;z-index:3;overflow:visible}
#hero-stage #hero-canvas{position:absolute;inset:-7% -10%;width:120%;height:114%;z-index:3;animation:none!important;filter:none;display:block;pointer-events:none}
#hero-stage .hero-frame{inset:12% 8% 10%;z-index:1}
#hero-stage .hero-fallback{position:absolute;inset:-5% -5%;width:110%;height:110%;padding:0;display:none;align-items:center;justify-items:center;z-index:4}
#hero-stage .hero-fallback.show{display:grid}
#hero-stage .hero-fallback img{display:block;width:100%;max-width:none;height:100%;object-fit:contain;animation:giftPhotoMotion 8s ease-in-out infinite;transform-origin:50% 55%}
#hero-stage .hero-selector{position:relative;grid-column:1/-1;inset:auto;width:100%;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 24px;margin:0;padding:22px 0 0;border-top:1px solid rgba(212,175,55,.2);animation:none;z-index:6}
#hero-stage .hero-selector .ps-name{display:none}
#hero-stage .hero-selector button{line-height:1.5;min-height:36px;font-size:11px;letter-spacing:.1em}
#hero-stage .hero-scroll{display:none}
#hero-stage .hero-fg{z-index:1;opacity:.18}
@keyframes giftPhotoMotion{0%,100%{transform:perspective(1200px) translateZ(0) rotateY(-12deg) rotateX(3deg) scale(.84)}45%{transform:perspective(1200px) translateZ(120px) rotateY(14deg) rotateX(-3deg) scale(1.04)}70%{transform:perspective(1200px) translateZ(70px) rotateY(3deg) scale(.98)}}
@media(max-width:1024px){
 #hero-stage{min-height:0;padding:calc(var(--header-h) + 34px) var(--gutter) 40px}
 #hero-stage .hero-content{grid-template-columns:minmax(0,1fr);gap:24px}
 #hero-stage .hero-copy{max-width:680px}
 #hero-stage .hero-copy h1{font-size:clamp(38px,7vw,62px);max-width:660px}
 #hero-stage .hero-visual{height:530px;width:100%;max-width:730px;margin:0 auto}
 #hero-stage #hero-canvas{inset:-7% -5%;width:110%;height:114%}
 #hero-stage .hero-selector{grid-column:1;margin:0;gap:10px 20px}
 #hero-stage .hero-actions .btn{width:auto}
}
@media(max-width:520px){
 #hero-stage .hero-copy h1{font-size:39px;line-height:1.12}
 #hero-stage .hero-copy .lead{font-size:16px;line-height:1.65}
 #hero-stage .hero-visual{height:410px}
 #hero-stage .hero-actions{display:grid;grid-template-columns:1fr}
 #hero-stage .hero-actions .btn{width:100%}
 #hero-stage .hero-selector{gap:8px 16px}
 #hero-stage .hero-selector button{font-size:10px}
 #hero-stage .hero-tags{font-size:9px;letter-spacing:.12em}
}

#hero-stage #hero-product-video{position:absolute;inset:-7% -10%;width:120%;height:114%;z-index:4;object-fit:contain;pointer-events:auto;mask-image:radial-gradient(ellipse at center,#000 60%,transparent 74%);-webkit-mask-image:radial-gradient(ellipse at center,#000 60%,transparent 74%)}
#hero-stage #hero-product-video[controls]{mask-image:none;-webkit-mask-image:none}
#hero-stage .hero-visual{pointer-events:auto}
@media(max-width:1024px){#hero-stage #hero-product-video{inset:-7% -5%;width:110%;height:114%}}

#hero-stage #hero-product-video{mask-image:none;-webkit-mask-image:none;mix-blend-mode:lighten}

#hero-stage .hero-fallback img{mix-blend-mode:lighten}

/* Prominent product sizing requested for pink product hero. */
#hero-stage .hero-content{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
#hero-stage .hero-visual{height:650px}
#hero-stage #hero-product-video,#hero-stage #hero-canvas{inset:-17% -25%;width:150%;height:134%}
@media(max-width:1024px){#hero-stage .hero-content{grid-template-columns:1fr}#hero-stage .hero-visual{height:550px}#hero-stage #hero-product-video,#hero-stage #hero-canvas{inset:-12% -15%;width:130%;height:124%}}
@media(max-width:520px){#hero-stage .hero-visual{height:440px}}

/* Remove only decorative outer lines around the hero product. */
#hero-stage .hero-frame{display:none}
#hero-stage .hero-fg::before,#hero-stage .hero-fg::after{display:none}
#hero-stage::after{border:0}

/* Corporate gift product and client trophy collection. */
#hero-stage .hero-fallback img{animation:none;mix-blend-mode:normal}
#hero-stage .hero-fallback{inset:0;width:100%;height:100%}
.client-trophy-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;max-width:1200px;margin:auto}
.client-trophy-card{display:block;min-width:0;color:inherit;text-decoration:none}
.client-trophy-card img{display:block;width:100%;height:390px;object-fit:contain;background:#f4f4f4;border-radius:4px}
.client-trophy-card h3{margin:22px 0 12px;font-size:22px;line-height:1.3}
@media(max-width:760px){.client-trophy-grid{grid-template-columns:1fr;max-width:480px}.client-trophy-card img{height:420px}}

/* Main hero now displays the corporate gift-set image directly. */
#hero-stage .hero-fallback.show{display:grid;z-index:4}
#hero-stage .hero-fallback img{animation:none!important;transform:none;object-fit:contain;width:100%;height:100%}

/* Trophy stays behind the text composition, within the right hero environment. */
#hero-stage #hero-canvas{inset:0;width:100%;height:100%;z-index:3;display:block}
#hero-stage .hero-fallback img{object-fit:contain}
#hero-stage .hero-copy{z-index:5}

/* Continuous depth movement for the photo fallback on devices without WebGL. */
#hero-stage .hero-visual{perspective:1100px}
#hero-stage .hero-fallback.show img{animation:trophyPhotoDepth 14s ease-in-out infinite!important;transform-origin:center!important}
@keyframes trophyPhotoDepth{0%,100%{transform:rotateY(-16deg) rotateX(3deg) translateZ(0)}50%{transform:rotateY(16deg) rotateX(-3deg) translateZ(65px)}}
@media(prefers-reduced-motion:reduce){#hero-stage .hero-fallback.show img{animation:none!important}}

/* Real product photograph with slow perspective motion. */
#hero-stage .hero-fallback.show{display:grid;inset:0;width:100%;height:100%;perspective:1100px;overflow:visible}
#hero-stage .hero-fallback.show img{animation:realProductTurn 16s ease-in-out infinite!important;object-fit:contain;filter:drop-shadow(0 28px 28px rgba(0,0,0,.55));will-change:transform;transform-origin:50% 60%}
@keyframes realProductTurn{0%,100%{transform:translateZ(0) rotateY(-20deg) rotateX(4deg) scale(.90)}50%{transform:translateZ(85px) rotateY(20deg) rotateX(-3deg) scale(1)}}
@media(prefers-reduced-motion:reduce){#hero-stage .hero-fallback.show img{animation:none!important}}

/* Oversized real WebGL award, with text at a separate foreground depth. */
#hero-stage #hero-canvas{position:absolute;inset:-5% -8%;width:116%;height:110%;display:block;z-index:4}
#hero-stage .hero-copy{z-index:6}
#hero-stage .hero-visual{height:650px}
@media(max-width:1024px){#hero-stage .hero-visual{height:540px}}
@media(max-width:520px){#hero-stage .hero-visual{height:440px}}

/* Keep the complete sculptural award and base inside the hero. */
#hero-stage #hero-canvas{inset:0;width:100%;height:100%}
#hero-stage .hero-visual{height:620px}
@media(max-width:1024px){#hero-stage .hero-visual{height:510px}}
@media(max-width:520px){#hero-stage .hero-visual{height:430px}}

/* Luxury photographic hero: luminous metal, generous spacing and clean depth. */
#hero-stage{background:radial-gradient(ellipse at 76% 46%,rgba(112,78,27,.22),transparent 45%),#070707;min-height:780px;padding-top:calc(var(--header-h) + 32px)}
#hero-stage .hero-content{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;max-width:1400px}
#hero-stage .hero-copy h1{font-size:clamp(46px,5.4vw,78px);font-weight:400;line-height:1.06;max-width:610px}
#hero-stage .hero-visual{height:650px;isolation:isolate}
#hero-stage .hero-visual::after{content:'';position:absolute;left:20%;right:20%;bottom:4%;height:45px;border-radius:50%;background:rgba(0,0,0,.8);filter:blur(20px);z-index:0}
#hero-stage .hero-fallback.show{inset:-2% 0;width:100%;height:104%;z-index:2;perspective:1400px}
#hero-stage .hero-fallback.show img{width:100%;height:100%;filter:drop-shadow(18px 28px 24px rgba(0,0,0,.45));animation:premiumTrophyMotion 16s ease-in-out infinite!important;object-fit:contain;mix-blend-mode:normal}
#hero-stage .hero-grid{opacity:.07}
@keyframes premiumTrophyMotion{0%,100%{transform:translate3d(0,5px,0) rotateY(-10deg) rotateX(2deg) scale(.94)}50%{transform:translate3d(0,-8px,70px) rotateY(12deg) rotateX(-2deg) scale(1)}}
@media(max-width:1024px){#hero-stage .hero-content{grid-template-columns:1fr;gap:12px}#hero-stage .hero-visual{height:560px}#hero-stage .hero-copy h1{font-size:clamp(42px,7vw,65px)}}
@media(max-width:520px){#hero-stage .hero-visual{height:450px}#hero-stage .hero-copy h1{font-size:43px}}
@media(prefers-reduced-motion:reduce){#hero-stage .hero-fallback.show img{animation:none!important}}

/* Film-inspired studio ribbons, independent foreground and background depths. */
#hero-stage{background:#040506;--light-x:70%;--light-y:42%;min-height:820px;isolation:isolate}
#hero-stage .hero-bg{overflow:hidden;background:radial-gradient(ellipse at var(--light-x) var(--light-y),rgba(145,98,37,.20),transparent 43%)}
#hero-stage .hero-content{max-width:1480px;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:40px}
#hero-stage .hero-copy h1{font-size:clamp(44px,5.2vw,76px);line-height:1.08}
#hero-stage .hero-visual{height:670px;z-index:4}
#hero-stage .hero-fallback.show{inset:-4% -6%;width:112%;height:108%;transform-style:preserve-3d}
#hero-stage .hero-fallback.show img{animation:cinematicProductReveal 18s ease-in-out infinite!important;filter:drop-shadow(20px 35px 24px rgba(0,0,0,.75))}
#hero-stage .hero-glow,#hero-stage .hero-grid{display:none}
.cinema-aura{position:absolute;width:1100px;height:700px;right:-330px;top:-70px;border-radius:48%;border:2px solid rgba(255,206,125,.65);box-shadow:0 0 18px #d4944e,0 0 65px rgba(211,141,63,.6),inset 0 0 50px rgba(221,154,78,.3);transform:rotate(-28deg);filter:blur(12px);animation:cinemaGold 18s ease-in-out infinite;opacity:.6}
.cinema-aura--blue{width:1100px;height:250px;top:110px;right:-470px;border-color:rgba(123,183,255,.65);box-shadow:0 0 26px #447fcc,0 0 80px rgba(41,103,183,.6),inset 0 0 45px #336cab;animation:cinemaBlue 18s ease-in-out infinite;opacity:0;filter:blur(18px)}
.cinema-beam{position:absolute;inset:-30%;background:linear-gradient(125deg,transparent 45%,rgba(255,231,183,.10) 48%,rgba(255,235,203,.22) 50%,transparent 56%);filter:blur(22px);animation:cinemaBeam 14s ease-in-out infinite}
.cinema-dust{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(225,196,136,.55) 1px,transparent 2px);background-size:180px 145px;opacity:.16;animation:cinemaDust 30s linear infinite}
@keyframes cinemaGold{0%,100%{transform:translate(-70px,20px) rotate(-28deg) scale(.95);opacity:.65}50%{transform:translate(80px,-70px) rotate(-8deg) scale(1.15);opacity:.12}}
@keyframes cinemaBlue{0%,100%{transform:translate(70px,-50px) rotate(40deg);opacity:.04}50%{transform:translate(-180px,130px) rotate(28deg);opacity:.55}}
@keyframes cinemaBeam{0%,100%{transform:translateX(-12%) rotate(-8deg);opacity:.4}50%{transform:translateX(14%) rotate(8deg);opacity:.8}}
@keyframes cinemaDust{to{transform:translateY(-145px)}}
@keyframes cinematicProductReveal{0%,100%{transform:perspective(1500px) translateZ(0) rotateY(-16deg) rotateX(2deg) scale(.93)}35%{transform:perspective(1500px) translateZ(90px) rotateY(8deg) rotateX(-2deg) scale(1)}70%{transform:perspective(1500px) translateZ(45px) rotateY(18deg) rotateX(1deg) scale(.98)}}
.cinema-paused .cinema-aura,.cinema-paused .cinema-beam,.cinema-paused .cinema-dust,.cinema-paused .hero-fallback img{animation-play-state:paused!important}
@media(max-width:1024px){#hero-stage .hero-content{grid-template-columns:1fr;gap:10px}#hero-stage .hero-visual{height:560px}.cinema-aura{right:-650px;top:300px}}
@media(max-width:520px){#hero-stage .hero-visual{height:470px}#hero-stage .hero-copy h1{font-size:43px}.cinema-dust{display:none}}
@media(prefers-reduced-motion:reduce){.cinema-aura,.cinema-beam,.cinema-dust,#hero-stage .hero-fallback.show img{animation:none!important}}

/* Mouse depth is on the outer layer; idle animation stays on the image. */
#hero-stage .hero-fallback.show{will-change:transform;transform-style:preserve-3d;transition:none}
#hero-stage .hero-bg{will-change:transform;transform-origin:center}

/* Clear inherited photo padding so the product occupies the full visual stage. */
#hero-stage .hero-fallback.show{padding:0;justify-items:center;align-items:center}
#hero-stage .hero-fallback.show img{max-width:none;backface-visibility:visible}