/* Wael AI Studio brand override v3 */
:root{color-scheme:dark;--bg:#070707!important;--background:#070707!important;--surface:#101010!important;--panel:#101010!important;--gold:#C8A96B!important;--accent:#C8A96B!important;--primary:#C8A96B!important;--text:#F5F0E6!important;--muted:#B8B1A3!important;--brand:#C8A96B!important;--brand-gold:#C8A96B!important;--blue:#C8A96B!important;--pink:#C8A96B!important;--lime:#C8A96B!important;--purple:#C8A96B!important}
html,body{background-color:#070707!important;color:#F5F0E6!important}body{background-image:radial-gradient(ellipse at 50% 0%,#C8A96B12,transparent 55%)!important}body *{scrollbar-color:#C8A96B #101010}
header,.topbar,.navbar,nav,.nav,.navlinks,.footer,.site-footer,footer,.card,.service-card,.project-card,.details,.panel,.modal,.dropdown-menu,.share-menu,.menu-panel,.work-card,.service-item,.feature-card,.contact-card{background-color:#101010!important}
.brand-mark{display:inline-flex!important;width:42px!important;height:42px!important;min-width:42px!important;flex:0 0 42px!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;border:1px solid #C8A96B!important;border-radius:50%!important;background:#101010 url('/wael-logo.svg?v=3') center/cover no-repeat!important;color:transparent!important;font-size:0!important;box-shadow:0 0 22px #C8A96B22!important}
a.nav-cta,.nav-cta,.cta,.btn-primary,.button-primary,.primary-button,.hero-cta{background:#C8A96B!important;color:#070707!important;border-color:#C8A96B!important}:where(button,a,input,textarea,select):focus-visible{outline:2px solid #C8A96B!important;outline-offset:3px}::selection{background:#C8A96B!important;color:#070707!important}

/* Glossy black and metallic-gold cinematic background */
html,body{background-color:#050505!important}
body{
 background-image:
   radial-gradient(ellipse at 50% -8%,rgba(255,225,151,.24) 0%,rgba(200,169,107,.12) 20%,transparent 48%),
   radial-gradient(ellipse at 0% 38%,rgba(200,169,107,.13) 0%,transparent 32%),
   radial-gradient(ellipse at 100% 68%,rgba(200,169,107,.12) 0%,transparent 34%),
   linear-gradient(135deg,#030303 0%,#11100d 24%,#050505 48%,#17130b 72%,#030303 100%)!important;
 background-attachment:fixed!important;
 background-repeat:no-repeat!important;
 background-size:cover!important;
}
body:before{
 content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:
  linear-gradient(115deg,transparent 0%,rgba(255,255,255,.018) 22%,transparent 37%,rgba(200,169,107,.035) 52%,transparent 68%),
  repeating-linear-gradient(128deg,rgba(255,255,255,.012) 0px,rgba(255,255,255,.012) 1px,transparent 1px,transparent 7px);
 opacity:.55;
}
main,.hero,.hero-section,.section,.content,.page-content{background-color:transparent!important}
header,.topbar,.navbar,nav,.nav,.navlinks,.footer,.site-footer,footer,.card,.service-card,.project-card,.details,.panel,.modal,.dropdown-menu,.share-menu,.menu-panel,.work-card,.service-item,.feature-card,.contact-card{
 background-image:linear-gradient(145deg,rgba(255,255,255,.035),transparent 38%,rgba(200,169,107,.035))!important;
}


/* Premium metallic-gold frames for videos, sections, cards and dialogs */
:root{
 --wael-gold:#C8A96B;--wael-gold-light:#F3DDA0;--wael-gold-deep:#72501F;
 --wael-black:#070707;--wael-panel:#101010;
}
video,.video-frame,.video-container,.video-wrapper,.video-card,.project-video,.media-frame,.reel-frame,.portfolio-video,.work-video,.video-player{
 border:1px solid rgba(200,169,107,.78)!important;
 border-radius:22px!important;
 background:linear-gradient(145deg,#17130b 0%,#050505 38%,#11100d 72%,#030303 100%)!important;
 box-shadow:0 0 0 1px rgba(243,221,160,.10),inset 0 1px 0 rgba(255,255,255,.07),0 12px 38px rgba(0,0,0,.65),0 0 24px rgba(200,169,107,.12)!important;
}
.video-frame,.video-container,.video-wrapper,.video-card,.project-video,.media-frame,.reel-frame,.portfolio-video,.work-video,.video-player{overflow:hidden!important}
video{outline:none!important}
section,.section,.content-section,.service-section,.work-section,.portfolio-section,.contact-section,.process-section,.feature-section,.faq-section,.about-section,.hero-card,.info-panel,.content-panel,.service-card,.project-card,.work-card,.feature-card,.contact-card,.faq-item,.accordion-item,.details,.panel,.modal,.dialog,.popup,.drawer,.dropdown-menu,.menu-panel,.share-menu,.lightbox,.project-details,.service-item,.card{
 border-color:rgba(200,169,107,.34)!important;
}
.card,.service-card,.project-card,.work-card,.feature-card,.contact-card,.faq-item,.accordion-item,.details,.panel,.modal,.dialog,.popup,.drawer,.dropdown-menu,.menu-panel,.share-menu,.lightbox,.project-details,.service-item,.info-panel,.content-panel{
 background:linear-gradient(145deg,rgba(28,24,16,.96) 0%,rgba(10,10,9,.98) 45%,rgba(18,15,10,.98) 100%)!important;
 border:1px solid rgba(200,169,107,.36)!important;
 border-radius:18px!important;
 box-shadow:inset 0 1px 0 rgba(255,240,190,.055),0 10px 28px rgba(0,0,0,.40),0 0 18px rgba(200,169,107,.055)!important;
}
.modal,.dialog,.popup,.drawer,.dropdown-menu,.menu-panel,.share-menu,.lightbox{
 border-color:rgba(200,169,107,.58)!important;
 box-shadow:inset 0 1px 0 rgba(255,240,190,.08),0 18px 48px rgba(0,0,0,.78),0 0 28px rgba(200,169,107,.10)!important;
}
hr,.divider,.section-divider{border-color:rgba(200,169,107,.28)!important}


/* Site-specific frame polish for the actual portfolio and service components */
.work,.service-card,.card,.project-link,.share-menu{
 position:relative;
 border:1px solid rgba(200,169,107,.42)!important;
 background-image:linear-gradient(145deg,rgba(255,239,190,.045),transparent 28%,rgba(200,169,107,.035) 68%,rgba(0,0,0,.16))!important;
}
.work,.service-card,.card{
 border-radius:20px!important;
 box-shadow:inset 0 1px 0 rgba(255,240,190,.07),0 12px 32px rgba(0,0,0,.48),0 0 16px rgba(200,169,107,.055)!important;
}
.work video,.card video,.service-card video,.hero-video,video{
 border:1px solid rgba(200,169,107,.72)!important;
 border-radius:16px!important;
 background:#050505!important;
 box-shadow:0 0 0 1px rgba(243,221,160,.08),0 8px 24px rgba(0,0,0,.48),0 0 18px rgba(200,169,107,.10)!important;
}
.work .share-menu,.share-menu{
 border:1px solid rgba(200,169,107,.58)!important;
 border-radius:14px!important;
 background:linear-gradient(145deg,#1a1710,#080808 72%)!important;
}
.work a:focus-visible,.share button:focus-visible,.share a:focus-visible{
 outline:2px solid #F3DDA0!important;outline-offset:3px;
}
@media(prefers-reduced-motion:no-preference){
 .work,.service-card,.card{transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease}
 .work:hover,.service-card:hover,.card:hover{border-color:rgba(243,221,160,.68)!important;box-shadow:inset 0 1px 0 rgba(255,240,190,.09),0 16px 38px rgba(0,0,0,.56),0 0 22px rgba(200,169,107,.10)!important}
}


/* Footer platform logos: retain original destinations and accessible names */
.socials{align-items:center;gap:9px!important}
.socials a{position:relative;display:inline-flex!important;align-items:center;justify-content:center;width:42px;height:42px;padding:0!important;border:1px solid rgba(200,169,107,.48)!important;border-radius:12px!important;background:linear-gradient(145deg,#17140e,#080808 78%)!important;color:#F5F0E6!important;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease!important}
.socials a img{display:block;width:22px;height:22px;object-fit:contain}
.socials a:hover{transform:translateY(-3px);border-color:#C8A96B!important;box-shadow:0 5px 18px #C8A96B22!important;color:#F5F0E6!important}
.socials a .bot-mark{position:absolute;right:-5px;bottom:-5px;padding:2px 3px;border-radius:4px;background:#C8A96B;color:#070707;font:700 7px/1.2 system-ui,sans-serif;letter-spacing:.02em}
@media(max-width:600px){.socials{gap:7px!important}.socials a{width:38px;height:38px;border-radius:10px!important}.socials a img{width:20px;height:20px}}


/* Footer social icons arranged in two balanced rows: 5 + 4 */
footer .socials{
 display:grid!important;
 grid-template-columns:repeat(5,minmax(0,42px))!important;
 grid-auto-flow:row!important;
 justify-content:center!important;
 align-items:center!important;
 gap:10px!important;
 direction:ltr!important;
}
footer .socials a{
 width:42px!important;height:42px!important;
 margin:0!important;
 justify-self:center!important;
}
@media(max-width:600px){
 footer .socials{
  grid-template-columns:repeat(5,minmax(0,38px))!important;
  gap:8px!important;
 }
 footer .socials a{width:38px!important;height:38px!important}
}