.recognition-showcase{position:relative;isolation:isolate;overflow:hidden;padding:clamp(5rem,8vw,8rem) clamp(1rem,5vw,5rem);background:radial-gradient(circle at 92% 12%,rgba(209,164,56,.16),transparent 28%),radial-gradient(circle at 7% 85%,rgba(7,61,53,.08),transparent 30%),linear-gradient(135deg,#fffdf8 0%,#fbf6e9 55%,#f6edd6 100%);color:#073d35;border-block:1px solid rgba(151,111,27,.14)}
.recognition-showcase::before{content:"";position:absolute;z-index:-3;left:0;right:0;bottom:-1.5rem;height:min(33vw,23rem);background:url("recognition-penang-community-line.webp") center bottom/cover no-repeat;opacity:.085;pointer-events:none}
.recognition-showcase::after{content:"";position:absolute;z-index:-2;inset:0;background:linear-gradient(90deg,rgba(255,253,248,.92) 0%,rgba(255,253,248,.56) 38%,rgba(255,253,248,.2) 66%,rgba(255,253,248,.72) 100%);pointer-events:none}
.recognition-glow{position:absolute;z-index:-1;right:-12rem;top:-15rem;width:min(46rem,78vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(220,177,69,.25),rgba(220,177,69,.05) 50%,transparent 72%);filter:blur(10px)}
.recognition-watermark{display:none}
.recognition-shell{position:relative;z-index:1;width:min(1280px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(280px,.72fr) minmax(600px,1.38fr);gap:clamp(3rem,6vw,7rem);align-items:center}
.recognition-heading .eyebrow{color:#9d7119;font-size:.84rem;letter-spacing:.16em}.recognition-heading h2{margin:.7rem 0 1.7rem;font:700 clamp(3.7rem,5.4vw,6rem)/.88 Oswald,sans-serif;letter-spacing:-.045em;text-transform:uppercase}.recognition-heading h2 em{display:block;color:#b4831e;font:400 .8em/1 Allura,cursive;text-transform:none;letter-spacing:0;transform:translateX(.08em)}
.recognition-heading>p:last-of-type{max-width:34rem;margin:0;color:#415953;font-size:clamp(1.08rem,1.45vw,1.3rem);line-height:1.68}.recognition-count{display:flex;align-items:center;gap:.8rem;margin-top:2.6rem;color:#9a7623;font-weight:700;letter-spacing:.12em}.recognition-count strong{font:700 2.25rem/1 Oswald,sans-serif;color:#073d35}.recognition-count span:last-child{opacity:.64}
.recognition-carousel{min-width:0}.recognition-track{display:grid;min-height:clamp(37rem,49vw,45rem)}.recognition-card{grid-area:1/1;display:grid;grid-template-columns:minmax(320px,1.05fr) minmax(280px,.8fr);gap:clamp(1.8rem,3.4vw,3.2rem);align-items:center;opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}.recognition-card.active{opacity:1;transform:none}.recognition-card[hidden]{display:grid;visibility:hidden;pointer-events:none}
.recognition-image-button{appearance:none;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in}.recognition-frame{position:relative;display:grid;place-items:center;width:100%;min-height:35rem;padding:0;background:transparent;filter:drop-shadow(0 24px 22px rgba(53,40,18,.2)) drop-shadow(0 8px 8px rgba(53,40,18,.12));transition:transform .28s ease,filter .28s ease;animation:recognition-float 7s ease-in-out infinite}.recognition-frame::after{content:"";position:absolute;z-index:-1;left:15%;right:15%;bottom:1%;height:5%;border-radius:50%;background:rgba(68,49,22,.2);filter:blur(16px)}.recognition-frame img{display:block;width:100%;height:100%;max-height:42rem;object-fit:contain;background:transparent}.recognition-image-button:hover .recognition-frame,.recognition-image-button:focus-visible .recognition-frame{transform:translateY(-6px) scale(1.012);filter:drop-shadow(0 30px 26px rgba(53,40,18,.25)) drop-shadow(0 9px 9px rgba(53,40,18,.14))}
@keyframes recognition-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.recognition-copy{padding-block:1rem}.recognition-copy>span{display:block;color:#976b17;font-size:.85rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.recognition-copy h3{margin:.75rem 0 1rem;font:700 clamp(2rem,3vw,3rem)/1.02 Oswald,sans-serif;text-transform:uppercase}.recognition-copy p{margin:0;color:#405751;font-size:clamp(1.04rem,1.25vw,1.2rem);line-height:1.7}.recognition-view{margin-top:1.65rem;padding:.8rem 0;border:0;border-bottom:1px solid rgba(7,61,53,.35);background:transparent;color:#073d35;font:800 1rem/1 DM Sans,sans-serif;cursor:pointer}
.recognition-controls{display:flex;align-items:center;justify-content:flex-end;gap:.8rem;margin-top:1.25rem}.recognition-arrow{width:3.15rem;height:3.15rem;border:1px solid rgba(7,61,53,.2);border-radius:50%;background:rgba(255,255,255,.78);box-shadow:0 8px 22px rgba(31,40,35,.08);color:#073d35;font-size:1.45rem;cursor:pointer;transition:background .2s ease,transform .2s ease}.recognition-arrow:hover,.recognition-arrow:focus-visible{background:#073d35;color:#fff;transform:translateY(-2px)}.recognition-dots{display:flex;align-items:center;gap:.5rem}.recognition-dot{width:.58rem;height:.58rem;padding:0;border:0;border-radius:50%;background:rgba(7,61,53,.24);cursor:pointer;transition:width .2s ease,background .2s ease}.recognition-dot.active{width:1.8rem;border-radius:1rem;background:#b88c25}
@media(max-width:1100px){.recognition-showcase::before{height:23rem;opacity:.07}.recognition-shell{grid-template-columns:1fr;gap:2.4rem}.recognition-heading{max-width:50rem;margin-inline:auto;text-align:center}.recognition-heading h2 br{display:none}.recognition-heading>p:last-of-type{margin-inline:auto}.recognition-count{justify-content:center}.recognition-carousel{width:100%;max-width:54rem;margin:auto}.recognition-track{min-height:44rem}.recognition-card{grid-template-columns:minmax(280px,.92fr) minmax(280px,1fr)}.recognition-controls{justify-content:center}}
@media(max-width:700px){.recognition-showcase{padding:4.6rem 1.15rem 5.4rem}.recognition-showcase::before{height:17rem;background-size:auto 100%;opacity:.075}.recognition-heading h2{font-size:clamp(3.35rem,15vw,5rem)}.recognition-heading>p:last-of-type{font-size:1.05rem}.recognition-track{min-height:55rem}.recognition-card{grid-template-columns:1fr;align-content:start;gap:1.3rem}.recognition-frame{min-height:29rem;max-height:34rem}.recognition-frame.landscape{min-height:21rem;max-height:24rem}.recognition-frame img{max-height:33rem}.recognition-copy{text-align:center;padding:0 .35rem}.recognition-copy>span{font-size:.78rem}.recognition-copy h3{font-size:clamp(2rem,9vw,2.55rem)}.recognition-copy p{font-size:1.05rem}.recognition-controls{margin-top:.8rem}}
@media(max-width:410px){.recognition-track{min-height:52rem}.recognition-frame{min-height:25.5rem}.recognition-frame.landscape{min-height:18rem}.recognition-frame img{max-height:29rem}.recognition-heading h2{font-size:clamp(3rem,16vw,4.2rem)}}
@media(prefers-reduced-motion:reduce){.recognition-card,.recognition-frame,.recognition-arrow,.recognition-dot{transition:none}.recognition-frame{animation:none}}
