/* WebByMateen V9.17: new branding gallery, graphics portfolio cards, theme-locked UI/UX eyebrow. */
.wbm-brand-work{isolation:isolate;position:relative;overflow:hidden;padding:clamp(65px,7vw,105px) 0 79px;background:radial-gradient(ellipse at 0% 0%,rgba(242,72,21,.13),transparent 41%),#0b0c0f;color:#fff;font-family:Montserrat,Arial,sans-serif}
.wbm-brand-work *{box-sizing:border-box}
.wbm-brand-work-container{width:calc(100% - 30px);max-width:1210px;min-width:0;margin-inline:auto}
.wbm-brand-work-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(225px,.65fr);align-items:end;gap:38px;margin-bottom:29px}
.wbm-brand-work-top>*{min-width:0}
.wbm-brand-work-kicker{display:flex;align-items:center;gap:11px;margin:0 0 16px;font-size:10px;letter-spacing:.14em;font-weight:800;text-transform:uppercase;color:#ff8a00;background:linear-gradient(95deg,#f24815,#ff8a00);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.wbm-brand-work-kicker-line{width:22px;flex:0 0 22px;height:2px;background:linear-gradient(90deg,#f24815,#ff8a00)!important;-webkit-text-fill-color:initial}
.wbm-brand-work-heading h2{font-size:clamp(33px,4.2vw,58px);font-weight:800;line-height:1.09;letter-spacing:-.042em;margin:0;color:white}
.wbm-brand-work-heading h2 em{font-style:normal;color:#ff8a00;background:linear-gradient(110deg,#f24815,#ff8a00);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.wbm-brand-work-aside p{font-size:13px;line-height:1.85;margin:0 0 12px;color:#b9bac2}
.wbm-brand-work-aside>span{font-size:10px;font-weight:800;line-height:1.5;color:#ff8a00}
.wbm-brand-work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.wbm-brand-work-card{min-width:0;display:flex;border:1px solid rgba(255,255,255,.13);border-radius:23px;overflow:hidden;background:linear-gradient(160deg,#202026,#141518 80%);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.wbm-brand-work-card:hover{border-color:#f24815;transform:translateY(-4px);box-shadow:0 22px 48px rgba(0,0,0,.27)}
.wbm-brand-work-link{color:inherit!important;display:flex;flex-direction:column;width:100%;min-width:0;text-decoration:none!important}
.wbm-brand-work-link:focus-visible{outline:3px solid #ff8a00;outline-offset:-4px}
.wbm-brand-work-art{position:relative;aspect-ratio:1/1;background:#252528;overflow:hidden}
.wbm-brand-work-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.wbm-brand-work-card:hover .wbm-brand-work-art img{transform:scale(1.045)}
.wbm-brand-work-media-tag{position:absolute;bottom:15px;left:15px;max-width:calc(100% - 85px);font-size:9px;font-weight:800;color:#202026;background:#fff;border-radius:999px;padding:8px 11px;line-height:1.2}
.wbm-brand-work-arrow{position:absolute;top:15px;right:15px;width:39px;height:39px;display:grid;place-items:center;background:linear-gradient(135deg,#f24815,#ff8a00);border-radius:50%;font-size:20px;color:white;box-shadow:0 9px 20px rgba(0,0,0,.2)}
.wbm-brand-work-details{display:flex;flex-direction:column;flex:1;min-width:0;padding:21px 23px 24px}
.wbm-brand-work-number{font-size:10px;font-weight:850;letter-spacing:.09em;color:#ff8a00}
.wbm-brand-work-details h3{font-size:20px;line-height:1.25;letter-spacing:-.025em;color:white;margin:10px 0 8px;overflow-wrap:anywhere}
.wbm-brand-work-details p{font-size:12px;line-height:1.73;color:#b6b8c0;margin:0 0 19px;flex:1}
.wbm-brand-work-action{border-top:1px solid #393a40;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;font-weight:800;color:#ff8a00}
.wbm-brand-work-action span{font-size:18px}
.wbm-brand-work-foot{display:flex;gap:25px;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.12);margin-top:35px;padding-top:29px}
.wbm-brand-work-foot>div{min-width:0}
.wbm-brand-work-foot strong{font-size:20px;line-height:1.35;font-weight:800;color:#fff}
.wbm-brand-work-foot p{font-size:12px;line-height:1.65;color:#abaeb9;margin:6px 0 0}
.wbm-brand-work-ctas{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.wbm-brand-work-ctas a{display:inline-flex;justify-content:center;align-items:center;text-decoration:none!important;min-height:45px;padding:12px 16px;border:1px solid rgba(255,255,255,.22);border-radius:14px;font-size:11px;font-weight:800;color:white;white-space:nowrap}
.wbm-brand-work-ctas .wbm-brand-work-btn-primary{background:linear-gradient(110deg,#f24815,#ff8a00);border-color:transparent}
.wbm-brand-work-ctas a:focus-visible{outline:3px solid #ff8a00;outline-offset:3px}
.portfolio-page-body .portfolio-project-grid>.wbm-portfolio-graphic-card[hidden]{display:none!important}
.portfolio-page-body .wbm-portfolio-graphic-card{min-width:0;isolation:isolate}
.portfolio-page-body .wbm-portfolio-graphic-card .portfolio-project-media{background:#1c1d20!important}
.portfolio-page-body .wbm-portfolio-graphic-card .portfolio-project-media img{object-fit:cover!important;object-position:center}
.portfolio-page-body .wbm-portfolio-graphic-card .project-open,.portfolio-page-body .wbm-portfolio-graphic-card .project-index{background:linear-gradient(110deg,#f24815,#ff8a00)!important;color:#fff!important}
.portfolio-page-body .wbm-portfolio-graphic-card .project-view-label{max-width:calc(100% - 76px);white-space:normal;overflow-wrap:anywhere;font-size:9px!important}
.portfolio-page-body .wbm-portfolio-graphic-card .portfolio-project-info{min-width:0}
.portfolio-page-body .wbm-portfolio-graphic-card .portfolio-project-info h3{overflow-wrap:anywhere}
.portfolio-page-body .wbm-portfolio-graphic-card .portfolio-project-info p{flex:1}
.portfolio-page-body .wbm-portfolio-graphic-action{display:flex;justify-content:space-between;gap:12px;align-items:center;border-top:1px solid rgba(255,255,255,.13);margin-top:auto;padding-top:13px;font-size:11px;font-weight:800;color:#ff8a00}
.portfolio-page-body .wbm-portfolio-graphic-action span{font-size:18px}
/* Lock UI/UX service eyebrow and all small accents to the exact approved hero gradient. */
.wbm-uiux-section .wbm-uiux-eyebrow{color:#ff8a00!important;background-image:linear-gradient(100deg,#f24815 0%,#ff8a00 100%)!important;background-clip:text!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;font-weight:850!important;letter-spacing:.13em!important}
.wbm-uiux-section .wbm-uiux-eyebrow span{background:linear-gradient(90deg,#f24815,#ff8a00)!important;-webkit-text-fill-color:initial!important}
@media(max-width:1050px){.wbm-brand-work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wbm-brand-work-top{grid-template-columns:minmax(0,1fr) 270px;gap:25px}}
@media(max-width:680px){.wbm-brand-work{padding:59px 0 62px}.wbm-brand-work-container{width:calc(100% - 30px)!important;max-width:calc(100% - 30px)!important;margin-inline:auto!important}.wbm-brand-work-top{grid-template-columns:minmax(0,1fr);gap:15px}.wbm-brand-work-heading h2{font-size:clamp(29px,8vw,38px)}.wbm-brand-work-aside p{font-size:12px}.wbm-brand-work-grid{grid-template-columns:minmax(0,1fr);gap:16px}.wbm-brand-work-card{border-radius:19px}.wbm-brand-work-details{padding:19px}.wbm-brand-work-details h3{font-size:19px}.wbm-brand-work-details p{font-size:11.5px}.wbm-brand-work-foot{flex-direction:column;align-items:stretch;gap:20px}.wbm-brand-work-ctas{justify-content:stretch}.wbm-brand-work-ctas a{flex:1 1 100%;white-space:normal;min-width:0}.portfolio-page-body .wbm-portfolio-graphic-card{width:100%;min-width:0}.portfolio-page-body .wbm-portfolio-graphic-card .portfolio-project-info{padding-inline:18px!important}}
@media(prefers-reduced-motion:reduce){.wbm-brand-work-card,.wbm-brand-work-art img{transition:none!important}.wbm-brand-work-card:hover{transform:none}.wbm-brand-work-card:hover img{transform:none}}