/* Photography follows Creative Production's category navigator and gallery stack. */
.photography-portfolio.work-showcase{padding:82px 0 70px;background:#0d0d10;color:#fff}
.photography-portfolio .work-showcase-head{border-bottom:1px solid rgba(255,255,255,.09)}
#portfolio.photography-portfolio .cp-portfolio-nav{grid-template-columns:repeat(3,minmax(0,1fr))!important;padding-bottom:38px}
#portfolio.photography-portfolio .cp-portfolio-nav .capability{min-height:76px!important;padding:14px!important;grid-template-columns:34px minmax(0,1fr)!important;gap:12px!important;white-space:normal}
#portfolio.photography-portfolio .cp-portfolio-nav .capability::after{content:none!important;display:none!important}
#portfolio.photography-portfolio .capability-no.capability-icon{align-self:center!important;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#f1eaff,#fff3eb);border:1px solid rgba(125,79,235,.14);color:#7d4feb!important;box-shadow:0 5px 14px rgba(86,48,153,.08)}
.photography-portfolio .capability-icon svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#portfolio.photography-portfolio .cp-portfolio-nav .capability b{font-size:11px!important;line-height:1.4!important;margin:0 0 4px!important}
#portfolio.photography-portfolio .cp-portfolio-nav .capability small{font-size:8px!important;line-height:1.5!important}
.photography-portfolio .discipline-section{position:relative;padding:40px 0 50px;border-bottom:1px solid rgba(255,255,255,.09);scroll-margin-top:108px}
.photography-portfolio .discipline-section:last-child{border-bottom:0;padding-bottom:0}
.photography-portfolio .discipline-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end;margin-bottom:24px}
.photography-portfolio .discipline-kicker{display:flex;align-items:center;gap:9px;color:#9e97a5;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.photography-portfolio .discipline-kicker::before{content:"";width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--grad);box-shadow:0 0 18px rgba(180,86,243,.5)}
main .photography-portfolio .discipline-head h2{margin:12px 0;font-size:clamp(30px,3.4vw,47px);line-height:1.12;letter-spacing:-.05em;color:#fff!important}
main .photography-portfolio .discipline-head p{max-width:760px;margin:0;color:#aaa3b1!important;font-size:13px;line-height:1.8}
.photography-portfolio .portfolio-empty-note{display:inline-flex;margin:0;padding:8px 12px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.025);color:#aaa3b1;font-size:9px;font-weight:600;white-space:nowrap}
.photography-portfolio .discipline-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start;direction:ltr}
.photography-portfolio .new-work-card{min-width:0;margin:0}
.photography-portfolio .photo-media-slot{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:20px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(145deg,#17141d,#101014);box-shadow:0 14px 34px rgba(0,0,0,.16);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.photography-portfolio .photo-media-slot.is-landscape{aspect-ratio:4/3}
.photography-portfolio .photo-media-slot.is-square{aspect-ratio:1}
.photography-portfolio .photo-media-slot.is-vertical{aspect-ratio:9/16}
.photography-portfolio .photo-video-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.photography-portfolio .photo-media-slot::before{content:"";position:absolute;inset:12px;border:1px dashed rgba(255,255,255,.07);border-radius:12px;pointer-events:none}
.photography-portfolio .photo-media-slot::after{content:none!important}
#portfolio.photography-portfolio a.capability:focus-visible{outline:3px solid #bc87ff;outline-offset:5px}
html[lang="ar"] .photography-portfolio .discipline-head{direction:rtl;text-align:right}
html[lang="ar"] .photography-portfolio .discipline-kicker{letter-spacing:0;line-height:1.7}
html[lang="ar"] main .photography-portfolio .discipline-head h2{line-height:1.45;letter-spacing:0}
html[lang="ar"] #portfolio.photography-portfolio .cp-portfolio-nav :is(b,small){font-family:"Cairo","Tahoma",Arial,sans-serif!important;letter-spacing:0!important}
html[lang="ar"] main .hero .service-title.photo-service-title{font-size:clamp(37px,4.7vw,64px)!important;line-height:1.3!important;letter-spacing:0!important;overflow:visible!important}
html[lang="ar"] main .hero .photo-service-title span{display:block!important;line-height:1.3!important;white-space:normal!important}
html[lang="ar"] main .hero .photo-service-title br{display:none}
main .production-engine .studio-node{color:#fff!important}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .photography-portfolio .new-work-card:hover .photo-media-slot{transform:perspective(900px) translateY(-4px) rotateX(1deg);border-color:rgba(173,114,255,.34);box-shadow:0 20px 42px rgba(0,0,0,.24),0 0 28px rgba(129,73,255,.09)}
}
@media(max-width:700px){
  .photography-portfolio.work-showcase{padding:46px 0 50px}
  #portfolio.photography-portfolio .cp-portfolio-nav{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding-bottom:25px}
  #portfolio.photography-portfolio .cp-portfolio-nav .capability{min-height:76px!important;padding:10px!important;grid-template-columns:28px minmax(0,1fr)!important;gap:8px!important}
  #portfolio.photography-portfolio .capability-no.capability-icon{width:28px;height:28px;border-radius:8px}
  #portfolio.photography-portfolio .cp-portfolio-nav .capability b{font-size:9px!important}
  #portfolio.photography-portfolio .cp-portfolio-nav .capability small{font-size:7px!important}
  .photography-portfolio .capability-icon svg{width:16px;height:16px}
  .photography-portfolio .discipline-section{padding:24px 0 35px}
  .photography-portfolio .discipline-head{grid-template-columns:1fr;gap:12px;margin-bottom:18px}
  main .photography-portfolio .discipline-head h2{font-size:clamp(27px,7vw,37px)}
  main .photography-portfolio .discipline-head p{font-size:11px;line-height:1.8}
  .photography-portfolio .discipline-kicker{font-size:8px}
  .photography-portfolio .portfolio-empty-note{justify-self:start;font-size:8px}
  .photography-portfolio .discipline-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .photography-portfolio .discipline-grid:not(.photo-video-grid) .new-work-card:last-child{grid-column:1/-1;width:calc(50% - 6px);justify-self:center}
  .photography-portfolio .photo-media-slot{border-radius:14px}
  .photography-portfolio .photo-media-slot::before{inset:9px;border-radius:8px}
  html[lang="ar"] main .hero .service-title.photo-service-title{font-size:clamp(34px,9vw,46px)!important;line-height:1.35!important}
}
@media(prefers-reduced-motion:reduce){.photography-portfolio .photo-media-slot{transition:none}}

/* Portfolio media supplied for Photography & Videography. */
#portfolio.photography-portfolio .discipline-grid:not(.photo-video-grid){grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
#portfolio.photography-portfolio .photo-work-card[hidden],#portfolio.photography-portfolio .portfolio-video-card[hidden],.photo-lightbox[hidden]{display:none!important}
#portfolio.photography-portfolio .photo-media-slot{appearance:none;padding:0;cursor:zoom-in;aspect-ratio:1122/1402;background:#17141d}
#portfolio.photography-portfolio .photo-media-slot::before{content:none}
#portfolio.photography-portfolio .photo-media-slot img{display:block;width:100%;height:100%;object-fit:contain}
#portfolio.photography-portfolio .new-work-card figcaption{padding:12px 2px 0;color:#d9d3df;font-size:11px;font-weight:700;line-height:1.5}
#portfolio.photography-portfolio .discipline-more-wrap{display:flex;justify-content:center;margin-top:26px}
#portfolio.photography-portfolio .discipline-more{appearance:none;min-width:142px;padding:12px 22px;border:1px solid rgba(186,143,251,.55);border-radius:999px;background:linear-gradient(130deg,rgba(141,67,236,.22),rgba(51,30,83,.55));color:#fff;font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 10px 28px rgba(83,30,154,.2);transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
#portfolio.photography-portfolio .discipline-more:hover{transform:translateY(-3px);box-shadow:0 14px 38px rgba(145,64,238,.32)}
#portfolio.photography-portfolio .photo-video-group+.photo-video-group{margin-top:42px}
#portfolio.photography-portfolio .photo-video-group h3{margin:0 0 20px;color:#f7f1ff;font-size:clamp(18px,2.2vw,25px);font-weight:800}
#portfolio.photography-portfolio .photo-video-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
#portfolio.photography-portfolio .photo-video-grid.is-wide{grid-template-columns:repeat(3,minmax(0,1fr))}
#portfolio.photography-portfolio .video-preview,#portfolio.photography-portfolio .video-live-frame{position:relative;display:block;width:100%;padding:0;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:17px;background:radial-gradient(circle at 50% 45%,#6d2b97,#18111e 70%);box-shadow:0 15px 35px rgba(0,0,0,.22);aspect-ratio:9/16}
#portfolio.photography-portfolio .is-wide :is(.video-preview,.video-live-frame){aspect-ratio:16/9}
#portfolio.photography-portfolio .video-preview{cursor:pointer;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
#portfolio.photography-portfolio .video-preview:hover{transform:perspective(900px) translateY(-5px) rotateX(1.5deg);border-color:#bb7bff;box-shadow:0 20px 46px rgba(107,40,169,.3)}
#portfolio.photography-portfolio .video-preview img{display:block;width:100%;height:100%;object-fit:cover}
#portfolio.photography-portfolio .video-card-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,5,14,.55))}
#portfolio.photography-portfolio .video-play{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:54px;height:54px;border:1px solid rgba(255,255,255,.75);border-radius:50%;background:rgba(25,10,36,.66);backdrop-filter:blur(8px);transform:translate(-50%,-50%);box-shadow:0 0 28px rgba(170,94,247,.5)}
#portfolio.photography-portfolio .video-play i{display:block;width:0;height:0;margin-left:4px;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:14px solid white}
#portfolio.photography-portfolio .video-live-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#portfolio.photography-portfolio button:focus-visible,.photo-lightbox button:focus-visible{outline:3px solid #d6a5ff;outline-offset:4px}
.photo-lightbox-open{overflow:hidden}
.photo-lightbox{position:fixed;z-index:10000;inset:0;display:grid;grid-template-columns:64px minmax(0,1fr) 64px;align-items:center;gap:10px;padding:45px 18px 20px;background:rgba(5,3,9,.95);backdrop-filter:blur(16px)}
.photo-lightbox figure{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;max-height:100%;margin:0}
.photo-lightbox img{display:block;max-width:100%;max-height:calc(100vh - 115px);width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 25px 70px rgba(0,0,0,.5)}
.photo-lightbox figcaption{padding:12px;color:#eee;font-size:12px;text-align:center}
.photo-lightbox button{appearance:none;display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(255,255,255,.23);border-radius:50%;background:rgba(255,255,255,.09);color:#fff;cursor:pointer;font-size:30px;line-height:1}
.photo-lightbox button:hover{background:rgba(172,97,244,.28)}
.photo-lightbox-close{position:absolute;right:22px;top:18px}
.photo-lightbox-arrow{justify-self:center}
@media(max-width:1000px){#portfolio.photography-portfolio .discipline-grid:not(.photo-video-grid){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){#portfolio.photography-portfolio .discipline-grid:not(.photo-video-grid),#portfolio.photography-portfolio .photo-video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#portfolio.photography-portfolio .photo-video-grid.is-wide{grid-template-columns:1fr 1fr}#portfolio.photography-portfolio .discipline-grid:not(.photo-video-grid) .new-work-card:last-child{grid-column:auto;width:auto}#portfolio.photography-portfolio .photo-video-group+.photo-video-group{margin-top:30px}.photo-lightbox{grid-template-columns:40px minmax(0,1fr) 40px;gap:0;padding:52px 4px 22px}.photo-lightbox button{width:36px;height:36px;font-size:25px}.photo-lightbox-close{right:14px;top:10px}}
