/* Photography-led packaging gallery and a two-colour treatment of the supplied logo. */
.brand-colour-filters{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.brand-refresh.immersive header .brand-logo,.brand-refresh footer .brand-logo,.photo-brand{filter:url(#afaq-white-gold)!important}
.packaging-gallery{background:#102635;color:#f4f4ed;padding:55px 6vw 62px;border-top:1px solid #ffffff13}
.packaging-heading{display:flex;align-items:center;justify-content:space-between;gap:35px;margin-bottom:27px}
.packaging-heading .eyebrow{color:#cdb78a;margin:0 0 8px;font-size:11px}
.packaging-heading h2{font-size:29px;line-height:1.65;font-weight:500;margin:0;color:#f4f4ed}
.packaging-heading .section-secondary{color:#9bb0b9;font-size:12px;margin-top:0!important}
.packaging-heading>p{font-size:12px;max-width:290px;color:#a6bbc4;margin:0}
.packaging-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr;gap:17px}
.brand-refresh .packaging-card{display:block;position:relative;width:100%;height:285px;padding:0;overflow:hidden;border:1px solid #ffffff26;border-radius:24px;background:#193743;color:white;text-align:start;cursor:pointer;isolation:isolate}
.packaging-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#071c2e55,transparent 43%,#081e31e6);pointer-events:none;z-index:1}
.packaging-card>.packaging-image{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.packaging-card:hover>.packaging-image,.packaging-card:focus-visible>.packaging-image{transform:scale(1.055)}
.photo-brand{position:absolute;inset-inline-start:18px;top:15px;width:49px;height:47px;object-fit:contain;opacity:.62;z-index:2;pointer-events:none}
.packaging-card .photo-open{position:absolute;inset-inline-end:17px;top:17px;z-index:2;width:31px;height:31px;display:grid;place-items:center;border:1px solid #ffffff5e;background:#10263550;border-radius:50%;font:17px Manrope,sans-serif;transition:background .25s}
.packaging-card:hover .photo-open{background:#c8ad78;color:#0d2636}
.packaging-label{position:absolute;inset-inline:22px;bottom:22px;z-index:2}
.packaging-label strong{font-size:20px;font-weight:500;line-height:1.6;display:block}
.packaging-label small{font:10px/1.8 Manrope,'IBM Plex Sans Arabic',sans-serif;color:#c8d4d7;display:block;margin-top:3px}
.packaging-note{font-size:10px!important;color:#98adb7;margin:21px 0 0!important;line-height:1.8!important}
.project-concepts .concept-photo{height:320px}
.brand-refresh .concept-photo-button{display:block;width:100%;height:100%;padding:0;border:0;border-radius:0;background:#173342;position:relative;text-align:start;cursor:pointer;color:white}
.concept-photo-button>img:not(.photo-brand){width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s}
.concept-photo-button:hover>img:not(.photo-brand){transform:scale(1.045)}
.concept-photo-button .photo-brand{height:57px;width:61px;top:19px;inset-inline-start:23px;opacity:.62;filter:url(#afaq-white-gold)!important;transform:none!important}
.concept-photo-button:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0b203950,transparent 50%);pointer-events:none}
.concept-photo-button .concept-tag{inset-inline-start:auto;inset-inline-end:20px}
.concept-photo-button .photo-hint{position:absolute;bottom:18px;inset-inline-end:20px;padding:8px 15px;background:#0d283acb;border:1px solid #ffffff40;border-radius:999px;color:#f6f4e9;font-size:11px}
.concept-bottom>a{font-size:12px;border:1px solid #55707c;color:#e5c2a3;border-radius:999px;padding:11px 21px;white-space:nowrap}
.project-brand-signature{display:flex;align-items:center;gap:16px;margin-bottom:20px;color:#bda578;font:10px/1.5 Manrope,sans-serif;letter-spacing:1.8px}
.project-brand-signature .photo-brand{position:static;width:51px;height:50px;opacity:.55}
.photo-dialog{background:#102635;color:#eff2ee;border-color:#45606d;padding:23px;width:1160px;max-width:min(1160px,94vw)}
.photo-dialog .dialog-top h2{color:#eff2ee}.photo-dialog .dialog-close{background:#284350;color:#fff}
.photo-dialog figure>img{max-height:60vh;border-color:#ffffff26;border-radius:16px;object-fit:contain;background:#0b1f2b}
.photo-dialog figcaption{color:#b7c9d1;font-size:12px}.photo-dialog .dialog-actions{align-items:center;justify-content:space-between}
.photo-dialog .dialog-actions span{font-size:11px;color:#9eb1b9;max-width:460px}.photo-dialog .button{background:#c9ad79;color:#102635}
@media(min-width:1700px){.packaging-card{height:330px!important}}
@media(max-width:1100px){.packaging-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.brand-refresh .packaging-card{height:290px}.project-concepts .concept-photo{height:270px}}
@media(max-width:760px){.packaging-gallery{padding:35px 20px 40px}.packaging-heading{display:block;margin-bottom:24px}.packaging-heading h2{font-size:25px}.packaging-heading>p{font-size:11px;max-width:330px;margin-top:12px}.packaging-grid{gap:12px}.brand-refresh .packaging-card{height:216px;border-radius:20px}.packaging-label{inset-inline:13px;bottom:16px}.packaging-label strong{font-size:15px;line-height:1.6}.packaging-label small{font-size:8px;line-height:1.65}.photo-brand{width:37px;height:36px;inset-inline-start:12px;top:11px}.packaging-card .photo-open{width:26px;height:26px;inset-inline-end:11px;top:12px;font-size:14px}.packaging-note{font-size:9px!important}.project-concepts .concept-photo{height:245px}.project-brand-signature{margin-bottom:17px}.photo-dialog{padding:15px}.photo-dialog .dialog-top h2{font-size:16px}.photo-dialog .dialog-top{gap:12px}.photo-dialog figure>img{max-height:52vh;border-radius:12px}.photo-dialog figcaption{font-size:11px}.photo-dialog .dialog-actions{gap:15px}.photo-dialog .dialog-actions span{font-size:10px}.concept-bottom>a{font-size:11px;padding:11px 17px}}
@media(prefers-reduced-motion:reduce){.packaging-card>.packaging-image,.concept-photo-button>img{transition:none!important}}