/*
Theme Name: Nasser Portfolio Child
Template: twentytwentyfive
Description: استنساخ دقيق لتصميم localhost:8080 — ووردبريس محلي
Version: 2.5.46
*/

/* ============ Tokens (matching post-6 global kit) ============ */
:root{
  --bg:#0C0F14;            /* secondary */
  --bg-deep:#090b0e;
  --card:#0c172d;
  --blue:#245BFE;          /* primary */
  --accent:#163E98;        /* accent */
  --icon-blue:#2468FE;
  --muted:#9E9FA2;
  --dim:#FFFFFFA6;
  --dim2:#FFFFFFD9;
  --nav:#FFFFFFC7;
  --footer-gray:#8A8A8A;
  --footer-nav:#B8B8B8;
  --grad-card:linear-gradient(135deg,#0c172d,#090b0e);
  --grad-border:linear-gradient(150deg,#0e3897,#041024);
  --grad-blue:linear-gradient(135deg,#245BFE,#163E98);
  --font:"Tajawal",sans-serif;
  --max:1200px;
}

/* ============ Base ============ */
*{box-sizing:border-box;}
html,body{background:var(--bg) !important;}
html{overflow-x:clip;}
body{color:#fff;font-family:var(--font);font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:clip;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}

/* neutralise block-theme chrome we replace */
.wp-block-site-title,.wp-block-navigation,.wp-block-post-title{display:none;}
.wp-site-blocks{margin:0;padding:0;}
.wp-site-blocks > .wp-block-template-part{margin-block:0;padding:0;}
.wp-site-blocks main{margin-top:0 !important;padding:0 !important;}
.wp-site-blocks main .wp-block-group{padding:0 !important;margin:0 !important;}
.wp-site-blocks .is-layout-constrained > *:not(.wrap){max-width:none;}
.entry-content,.wp-block-post-content,.has-global-padding{padding-left:0 !important;padding-right:0 !important;margin-block:0 !important;}
/* kill WP root-padding aware alignments: they add -50px side margins on .alignfull and cause a fixed horizontal overflow */
html,body,.wp-site-blocks{--wp--style--root--padding-left:0px !important;--wp--style--root--padding-right:0px !important;}
.alignfull,.alignwide{margin-left:0 !important;margin-right:0 !important;}
h1,h2,h3,h4,h5,p{margin:0;}
h1,h2,h3,h4,h5,h6{letter-spacing:normal;}

/* ============ Layout ============ */
.wrap{max-width:calc(var(--max) + 40px);margin-inline:auto;padding-inline:20px;}
.section{margin-top:100px;}
.center{text-align:center;}

/* ============ Buttons (exact .primarybtn + ghost) ============ */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font);font-size:18px;font-weight:300;line-height:1;
  padding:15px 35px;border-radius:50px;border:1px solid transparent;
  cursor:pointer;transition:all .3s ease;z-index:0;
}
.btn-primary{
  background:var(--grad-blue) padding-box,linear-gradient(135deg,#ffffff50,#ffffff10) border-box;
  border:1px solid transparent;color:#fff;
}
.btn-primary::before{
  content:"";position:absolute;top:-3px;left:0;width:calc(99% + 1px);height:calc(99% + 1px);
  background:linear-gradient(45deg,#040ECE,#3E4AFF,#3E4AFF,#0D19F9,#3E4AFF,#626cfc,#3E4AFF,#0D19F9,#0D19F9);
  background-size:400%;border-radius:50px;filter:blur(5px);z-index:-1;opacity:0;
  transition:opacity .3s ease-in-out;animation:glowing 20s linear infinite;
}
.btn-primary:hover::before{opacity:1;}
@keyframes glowing{0%{background-position:0 0;}50%{background-position:400% 0;}100%{background-position:0 0;}}
.btn-ghost{
  background:linear-gradient(300deg,#163E9821 0%,#245BFE70 100%);
  color:var(--nav);border:1px solid #245BFE7A;
}
.btn-ghost:hover{color:#fff;border-color:#245BFE;}

/* ============ Badge ============ */
.badge{
  display:inline-block;background:var(--blue);color:#fff;
  padding:7px 20px;border-radius:7px;
  font-family:var(--font);font-size:16px;font-weight:400;line-height:1.1;letter-spacing:normal;
}
.badge--ls1{letter-spacing:1px;font-size:15px;}

/* ============ Header (sticky pill glass) ============ */
.wp-site-blocks > header.wp-block-template-part{position:sticky;top:0;z-index:200;}
.site-header{
  position:relative;z-index:200;width:100%;
  background:transparent;
  background-image:linear-gradient(180deg,#0C0F144F 0%,#0C0F1400 100%);
}
.site-header__inner{max-width:var(--max);margin:0 auto;padding:17px 0 20px;}
.site-header__pill{
  position:relative;display:flex;align-items:center;gap:15px;
  border:1px solid #163E98;border-radius:500px;
  background:#0C0F1417;
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  padding:13px 20px;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,backdrop-filter .3s ease;
}
.site-header.is-scrolled .site-header__pill{
  background:rgba(12,15,20,.58);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-color:rgba(89,122,255,.4);
  box-shadow:0 10px 32px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08);
}
.site-header__logo{width:20%;display:flex;justify-content:center;align-items:flex-start;}
.site-header__logo img{width:160px;height:auto;}
.site-nav{
  width:80%;display:flex;align-items:center;justify-content:flex-end;gap:32px;
}
.site-nav a{
  position:relative;font-family:var(--font);font-size:16px;font-weight:300;line-height:20px;
  color:var(--nav);padding:7px;transition:color .25s ease;
}
.site-nav a + a::before{content:"";position:absolute;right:-16px;top:10px;height:14px;border-right:1px solid #FFFFFF40;}
.site-nav a:hover{color:#fff;}
.site-nav a.active{color:#fff;font-weight:500;}
.menu-toggle{display:none;}

/* mobile nav hide/show */
.navboxborder.nav-hide{transform:translateY(-125%);}
.navboxborder.nav-show{transform:translateY(0);}

/* ============ Hero ============ */
.hero{position:relative;max-width:800px;margin:30px auto 0;text-align:center;padding:18px 0 10px;}
/* قاعدة ووردبريس :first-child تلغّي الهامش — نحتاج مُحدّد أقوى */
#home{margin-top:30px;}
.hero__h1{
  position:relative;font-size:65px;font-weight:200;line-height:1.2;
  letter-spacing:normal;color:#fff;margin:0 0 44px;
}
.hero__h2{
  position:relative;font-size:71px;font-weight:600;line-height:1.2;
  letter-spacing:normal;color:#fff;margin:0;
}
.hero__desc{
  max-width:600px;margin:32px auto 0;
  font-size:22px;font-weight:200;line-height:1.6;color:#fff;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:21px;justify-content:center;margin-top:65px;}

.hero__bleed{
  position:relative;isolation:isolate;width:100%;margin:0;direction:ltr;
  padding:80px 0 50px;overflow:hidden;container-type:inline-size;
  background:radial-gradient(ellipse at center,#142044 0%,#0c0f14 72%);
  border:0;
}
.hero__bleed::before,.hero__bleed::after{
  content:"";position:absolute;left:0;right:0;z-index:2;pointer-events:none;
}
.hero__bleed::before{
  top:0;height:35%;background:linear-gradient(to bottom,var(--bg) 0%,#0C0F1400 100%);
}
.hero__bleed::after{
  bottom:0;height:35%;background:linear-gradient(to top,var(--bg) 0%,#0C0F1400 100%);
}
.hero__track{display:flex;direction:ltr;align-items:flex-start;gap:0;width:max-content;animation:heroMarquee 20s linear infinite;}
@keyframes heroMarquee{from{transform:translateX(0);}to{transform:translateX(-33.333333%);}}
.hero__track img{width:calc(min(1300px, 100cqw) / 4);height:auto;aspect-ratio:325 / 396;object-fit:cover;border-radius:0;}
.hero__track img:nth-child(3n+1),.hero__track img:nth-child(3n){transform:rotate(10deg);}
.hero__track img:nth-child(3n+2){transform:rotate(-10deg);}
.hero__desc b{font-weight:700;}
@keyframes marqueeRtl{from{transform:translateX(0);}to{transform:translateX(calc(-50% - 2.5px));}}

/* floating hero icons — EXACT from localhost:8080 post-15 custom CSS + motion_fx */
/* outer wrapper: infinite "circle" drift (translate ±5px, 2s linear) — NOT a rotation */
.hero__icon{position:absolute;z-index:3;height:55px;perspective:1200px;animation:circle 2s linear infinite;will-change:transform;}
/* inner: Elementor motion-effects layer (mouse-track + tilt), 1s cubic-bezier */
.hero__icon img{height:55px;width:auto;transition:transform 1s cubic-bezier(0,.33,.07,1.03);will-change:transform;}
.hero__icon--1{top:67px;right:-8px;}
.hero__icon--2{top:199px;left:-40px;}
/* duplicate name in original -> last definition wins */
@keyframes circle{
  0%{transform:translate(-5px,0);}
  25%{transform:translate(0,5px);}
  50%{transform:translate(5px,0);}
  75%{transform:translate(0,-5px);}
  100%{transform:translate(-5px,0);}
}

/* ============ Animated headline marks (x / curly) — EXACT Elementor headline-dash ============ */
.mark{position:relative;display:inline-block;white-space:nowrap;}
.mark__svg{position:absolute;left:-4%;top:-6%;width:108%;height:112%;overflow:visible;pointer-events:none;}
.mark svg path{fill:none;stroke:#245BFE;stroke-linecap:round;}
/* base (Elementor): hidden, 0 1500 dash */
.mark .mark__svg path{stroke-width:9;opacity:0;stroke-dasharray:0 1500;transition:.3s;}
.mark--x .mark__svg path{stroke-width:6;}
.mark--curly .mark__svg{top:auto;bottom:-.28em;height:.55em;}
.mark--curly .mark__svg path{stroke:#245BFEBF;stroke-width:4;}
/* draw-in: duration = --hd (1.5s for x / 1.2s for curly, as in source) */
.mark.e-draw .mark__svg path{animation:elementor-headline-dash forwards;animation-duration:var(--hd,1.5s);animation-iteration-count:1;}
/* erase (blur + fade), Elementor hide-highlight .4s */
.mark.e-hide .mark__svg path{opacity:1;stroke-dasharray:1500 1500;animation:hide-highlight .4s forwards;animation-iteration-count:1;}
@keyframes elementor-headline-dash{0%{stroke-dasharray:0 1500;opacity:1;}to{stroke-dasharray:1500 1500;opacity:1;}}
@keyframes hide-highlight{0%{opacity:1;stroke-dasharray:1500 1500;}to{filter:blur(10px);opacity:0;}}

/* ============ Section titles ============ */
.h-section{
  font-size:50px;font-weight:200;line-height:1.4;color:#fff;
  text-align:center;max-width:760px;margin:0 auto 14px;
}
.h-section--sm{max-width:620px;}
.h-mid{font-size:50px;font-weight:200;line-height:1.4;color:#fff;text-align:center;max-width:620px;margin:0 auto 14px;}
.sec-sub{font-size:20px;font-weight:200;line-height:1.5;color:var(--dim);text-align:center;max-width:600px;margin:0 auto;}

/* ============ WHY / Framework ============ */
.framework{position:relative;text-align:center;overflow-x:clip;margin-top:30px;}
.framework__glow{
  position:absolute;top:-37px;right:15vw;width:500px;height:372px;z-index:-1;
  background:radial-gradient(at center center,#245BFEA3 -150%,var(--bg) 63%);
}
.strip{
  width:100vw;max-width:100vw;direction:rtl;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  overflow:hidden;margin-bottom:120px;padding:11px 0;container-type:inline-size;
}
.strip__track{display:flex;direction:rtl;align-items:center;gap:28px;width:max-content;animation:stripMarquee 16.5s linear infinite;}
@keyframes stripMarquee{from{transform:translateX(0);}to{transform:translateX(calc(33.333333% + 9.333333px));}}
.strip__track img{width:calc((100cqw - 56px) / 3);height:auto;border-radius:0;}
.framework .h-section{margin-top:0;}
.framework .sec-sub{margin-top:10px;}

.cards-row{display:flex;justify-content:center;align-items:center;gap:30px;margin-top:24px;}
.card{
  width:33.33%;display:flex;flex-direction:column;gap:16px;text-align:start;
  background:var(--grad-card) padding-box,var(--grad-border) border-box;
  border:1px solid transparent;border-radius:50px;
  padding:101px 45px 81px 60px;
}
.card__icon{width:82px;height:82px;align-self:flex-start;object-fit:contain;opacity:.7;margin-bottom:22px;}
.card h4{font-size:25px;font-weight:400;line-height:1.2;letter-spacing:normal;color:#fff;}
.card p{font-size:16px;font-weight:300;line-height:1.5;color:var(--muted);}
.card__link{display:inline-block;font-size:16px;font-weight:400;color:var(--blue);transition:color .25s;}
.card__link:hover{color:#fff;}

/* ============ Portfolio / Work ============ */
/* الأصل يضيف 20px حول صندوق الأعمال */
#work{padding-top:20px;padding-bottom:20px;}
.work-box{
  display:flex;align-items:center;gap:5px;overflow:hidden;border-radius:30px;
  background:var(--grad-card) padding-box,var(--grad-border) border-box;
  border:1px solid transparent;
}
.work-box__text{width:35%;display:flex;flex-direction:column;align-items:flex-start;text-align:start;padding:0 25px 0 0;}
.work-box__text .badge{margin-bottom:18px;}
.work-box__text .h-section{text-align:start;max-width:400px;font-size:45px;line-height:1.3;margin:0;}
.work-box__text .btn{margin-top:15px;}
.work-cols{position:relative;width:65%;display:flex;direction:ltr;flex-direction:column;align-items:flex-start;gap:2px;overflow:hidden;container-type:inline-size;}
/* تدرّج الظل على الحافة اليسرى (يطابق spacer 0c51883) */
.work-cols::before{
  content:"";position:absolute;top:0;bottom:0;left:-2px;width:122px;z-index:2;pointer-events:none;
  background:linear-gradient(-90deg,#FFFDFD00 25%,#08101F 100%);
}
/* تدرّج الظل على الحافة اليمنى (يطابق spacer f3bbffa) */
.work-cols::after{
  content:"";position:absolute;top:0;bottom:0;right:-1px;width:173px;z-index:2;pointer-events:none;
  background:linear-gradient(-90deg,#0A0F1A 0%,#FFFFFF00 75%);
}
.work-row{display:flex;direction:ltr;gap:5px;width:max-content;}
.work-row--1{animation:marqueeLtr 100s linear infinite;}
.work-row--2{animation:marqueeRtl 100s linear infinite;}
.work-row img{width:calc((100cqw - 10px) / 3);height:auto;aspect-ratio:255 / 193;object-fit:cover;display:block;}
@keyframes marqueeLtr{from{transform:translateX(calc(-50% - 2.5px));}to{transform:translateX(0);}}

/* ============ About ============ */
.about{text-align:center;margin-top:110px;}
.about__icon{width:153px;height:auto;margin:0 auto 16px;}
.about__hi{font-size:20px;font-weight:300;line-height:1.5;color:#fff;}
.about__bio{font-size:18px;font-weight:200;line-height:1.5;color:var(--dim2);max-width:650px;margin:8px auto 0;}
.h-mid b,.about__bio b,.cta__box h2 b{font-weight:800;}
.about .sec-sub{margin-top:10px;}

/* ============ Process ============ */
.process{margin-top:100px;}
.process__rule-row{display:flex;align-items:center;gap:0;width:100%;}
.process__rule{flex:1;height:1px;}
.process__rule--l{background:linear-gradient(90deg,var(--blue) 0%,#245BFE00 90%);}
.process__rule--r{background:linear-gradient(90deg,#245BFE00 10%,var(--blue) 100%);}
.process__rule-row .badge{flex:0 0 auto;letter-spacing:1px;}
.process__grid{display:flex;justify-content:center;gap:60px;margin-top:20px;}
.step{display:flex;flex-direction:column;text-align:start;border-radius:50px;}
.step__icon{width:105px;height:105px;align-self:flex-start;object-fit:contain;}
.step h3{font-size:28px;font-weight:700;line-height:1.2;letter-spacing:normal;color:var(--blue);margin:0 0 7px;}
.step h3 .w{color:#fff;}
.step p{font-size:15px;font-weight:300;line-height:1.7;color:var(--muted);}

/* ============ CTA ============ */
.cta{margin-top:100px;padding-top:60px;padding-bottom:60px;}
.cta__box{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:70px;
  border-radius:50px;padding:100px 25px;text-align:center;
  background:var(--grad-card) padding-box,var(--grad-border) border-box;
  border:1px solid transparent;
}
.cta__icon{position:absolute;top:-25px;right:-5px;height:85px;width:auto;}
.cta__box h2{font-size:50px;font-weight:200;line-height:1.4;max-width:510px;}
.cta__box .btn{background:var(--accent);padding:15px 30px;box-shadow:0 23px 29px -16px rgba(45,89,234,.98);border-width:2px;}

/* ============ Footer (post-1212) ============ */
.site-footer{background:#0F131A;}
.footer-grid{
  max-width:var(--max);margin-inline:auto;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:0;
  padding:30px 25px;
}
.footer-brand{max-width:340px;}
.footer-grid > *{padding:10px;}
.footer-grid .footer-brand,.footer-grid > .footer-col:last-child{width:30%;max-width:360px;}
.footer-grid > .footer-col:nth-child(2){width:20%;}
.footer-brand__name{font-size:20px;font-weight:400;line-height:1.6;color:#fff;}
.footer-brand__copy{margin-top:10px;font-size:14px;font-weight:200;line-height:1.6;color:var(--footer-gray);}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
.footer-col h5{font-size:24px;font-weight:500;line-height:1.6;color:#fff;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.footer-col a{font-size:18px;font-weight:300;color:var(--footer-nav);transition:color .25s;}
.footer-col a:hover{color:#fff;}
.social-row{display:flex;flex-wrap:wrap;gap:12px;}
.social-row a{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--blue);color:#fff;
  padding:14px;border-radius:50%;font-size:0;transition:background .25s;
}
.social-row a svg{width:18px;height:18px;fill:#fff;}
.social-row a:hover,.social-row a:focus,.social-row a:active{background:var(--blue);animation:elementor-animation-push .3s linear 1;}
@keyframes elementor-animation-push{50%{transform:scale(.8);}100%{transform:scale(1);}}
.footer-bottom{
  max-width:var(--max);margin:0 auto;padding:22px 25px;
  border-top:1px solid rgba(255,255,255,.06);text-align:center;
  font-size:14px;font-weight:200;color:var(--footer-gray);
}

/* ============ Services popup (post-1155) ============ */
.popup{position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.8);}
.popup.open{display:flex;}
.popup__backdrop{display:none;}
.popup__box{
  position:relative;width:100%;max-width:640px;background:#fff;color:var(--bg);
  border-radius:28px;box-shadow:2px 8px 23px 3px rgba(0,0,0,.2);
  padding:60px 40px 50px;text-align:center;
  animation:popIn .3s ease;
}
@keyframes popIn{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:none;}}
.popup__close{
  position:absolute;top:13px;left:13px;background:none;border:none;
  color:var(--bg);font-size:26px;line-height:1;cursor:pointer;
}
.popup__title{font-size:38px;font-weight:200;line-height:1.3;color:var(--bg);margin-bottom:30px;}
.popup__item{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:38px;font-weight:300;color:var(--blue);
  padding-bottom:14px;margin:0 0 14px;border-bottom:1px solid #245BFE;
  transition:all .2s ease-out;
}
.popup__item:hover,.popup__item:focus-visible{color:var(--accent);background:#245BFE0D;}
.popup__item:hover span{color:var(--accent);}
.popup__item span{font-size:28px;}

/* ============ Motion — EXACT Elementor entrance animations ============ */
/* Elementor: element starts elementor-invisible; on scroll into view JS adds
   .animated + <name> after _animation_delay, duration 1.25s, fill both. */
.reveal{visibility:hidden;--d:0s;}
@media (prefers-reduced-motion: no-preference){
  .reveal.in{visibility:visible;animation-duration:1.25s;animation-fill-mode:both;animation-delay:var(--d,0s);}
  .reveal.in.e-fadeInUp{animation-name:fadeInUp;}
  .reveal.in.e-fadeIn{animation-name:fadeIn;}
  .reveal.in.e-zoomIn{animation-name:zoomIn;}
  .reveal.in.e-slideInUp{animation-name:slideInUp;}
}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0);}to{opacity:1;transform:none;}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes zoomIn{from{opacity:0;transform:scale3d(.3,.3,.3);}50%{opacity:1;}to{opacity:1;transform:none;}}
@keyframes slideInUp{from{transform:translate3d(0,100%,0);visibility:visible;}to{transform:translate3d(0,0,0);}}

@media (prefers-reduced-motion: reduce){
  .reveal{visibility:visible;}
  .hero__track,.strip__track,.work-row,.hero__icon{animation:none;}
  .hero__icon img{transition:none;}
}

/* ============ Responsive ============ */
@media (max-width:1024px){
  .site-header__logo{width:auto;justify-content:flex-start;}
  .site-header__logo img{width:130px;}
  .site-nav{
    display:none;position:absolute;top:calc(100% + 5px);left:0;right:auto;
    width:max-content;min-width:240px;flex-direction:column;align-items:stretch;gap:0;
    background:#0C0F14FA;border:1px solid var(--accent);border-radius:20px;
    padding:6px 0;z-index:60;
  }
  .site-nav.open{display:flex;}
  .site-nav a{padding:15px 35px;font-size:15px;font-weight:600;color:#fff;width:100%;}
  .site-nav a + a::before{display:none;}
  .menu-toggle{
    display:flex;align-items:center;justify-content:center;margin-inline-start:auto;
    background:none;border:none;color:#fff;font-size:25px;cursor:pointer;padding:5px;
  }
  /* الكروت تبقى بصف واحد على التابلت (مطابق للأصل)، والتكديس فقط على الجوال */
  .cards-row{gap:10px;}
  .card{padding:60px 20px;gap:10px;}
  .card__icon{width:50px;height:50px;}
  .card h4{font-size:20px;}
  .card p{font-size:14px;line-height:1.5;}
  /* العنصر يبقى جنب-إلى-جنب على التابلت (يطابق الأصل)، فقط يقلل حشوة اليمين */
  .work-box__text{padding:0 20px 0 0;}
  .work-box__text .h-section{font-size:28px;}
  /* hero على التابلت (مطابق للأصل: h1 45 / h2 50 / وصف 18) */
  .hero{padding:18px 10px 10px;}
  .hero__h1{font-size:45px;line-height:1.2;margin:0 0 24px;}
  .hero__h2{font-size:50px;line-height:1.2;}
  .hero__desc{font-size:18px;line-height:1.6;margin-top:29px;}
  .hero__actions{margin-top:44px;}
  .hero__actions .btn{font-size:16px;padding:12px 20px;}
  /* عناوين الأقسام على التابلت (مطابق للأصل: 45/63) */
  .h-section,.h-mid{font-size:45px;line-height:1.4;}
  .cta__box h2{font-size:45px;line-height:1.4;}
  /* حشوة قسم الدعوة + الصندوق على التابلت (مطابق للأصل: قسم 50 / صندوق 81) */
  .cta{padding-top:50px;padding-bottom:50px;}
  .cta__box{padding:81px 25px;}
  .footer-grid{flex-direction:column;gap:10px;}
  .footer-grid .footer-brand,.footer-grid > .footer-col:last-child,.footer-grid > .footer-col:nth-child(2){width:100%;max-width:none;}
  .footer-brand{order:3;}
  /* مراحل العمل تبقى بصف واحد على التابلت (مطابق للأصل) */
  /* original disables motion-fx (mouse/tilt) at <=1024 */
  .hero__icon img{transform:none !important;}
}
/* الأصل يبدّل لصورتين بالصف عند أقل من 1024 (وليس 1024 نفسه) */
@media (max-width:1023px){
  .work-row img{width:calc((100cqw - 5px) / 2);}
}
@media (max-width:767px){
  .site-header__pill{padding:9px 11px;gap:0;}
  .site-header__logo img{width:100px;}
  .hero__h1{font-size:7vw;line-height:1.2;margin:0 0 24px;}
  .hero__h2{font-size:7.5vw;line-height:1.2;}
  .hero__desc{font-size:3.8vw;line-height:1.6;margin-top:29px;max-width:78%;}
  .hero__actions{margin-top:30px;}
  .hero__actions{gap:6px;flex-wrap:nowrap;}
  .hero__actions .btn{font-size:4vw;padding:3vw 6vw;white-space:nowrap;}
  .hero__actions .btn-ghost{font-size:3.9vw;padding:3vw 4vw;}
  .hero__track img{width:calc(100cqw / 2);height:auto;aspect-ratio:325 / 396;}
  .hero__icon{display:none;}
  .h-section,.h-mid{font-size:7vw;line-height:1.4;}
  .cta__box h2{font-size:6.3vw;line-height:1.4;}
  .cards-row{flex-wrap:wrap;gap:13px;}
  .card{width:100%;max-width:none;padding:40px 26px;border-radius:30px;}
  .card__icon{width:64px;height:64px;}
  .process__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:25px;}
  .step__icon{width:102px;height:102px;}
  .about__icon{width:110px;height:110px;}
  .strip__track{gap:10px;}
  @keyframes stripMarquee{from{transform:translateX(0);}to{transform:translateX(calc(33.333333% + 3.333333px));}}
  .strip__track img{width:calc((100cqw - 10px) / 2);height:auto;}
  .work-row img{width:calc((100cqw - 5px) / 2);}
  .work-box{flex-direction:column;align-items:stretch;border-radius:20px;}
  .work-box__text{width:100%;padding:15px 25px 40px;}
  .work-box__text .h-section{font-size:8.3vw;}
  .work-cols{width:100%;}
  .work-cols::before{width:24px;}
  .work-cols::after{width:28px;}
  .cta__box{padding:50px 25px;border-radius:34px;gap:30px;}
  .cta__box .btn{padding:9px 22px;font-size:16px;}
  .footer-grid{flex-direction:column;gap:10px;}
  .popup__box{padding:40px 22px;}
  .popup__title{font-size:26px;}
  .popup__item{font-size:24px;}
  .site-header__inner{padding:17px 10px 20px;}
  .site-header__pill{padding:9px 11px;min-height:65px;}
  .site-header__logo img{width:26vw;}
  .menu-toggle{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#182653,#0c0f14);font-size:25px;}
  #home{margin-top:0;}
  .hero{padding-top:18px;padding-bottom:10px;}
  .hero__bleed{padding:50px 0 20px;background:radial-gradient(ellipse at center,#142044 0%,#0c0f14 70%);border:0;}
  .hero__track{padding-bottom:6px;}
  .hero__icon{display:block;height:6vw;}
  .hero__icon img{height:6vw;}
  .hero__icon--1{top:39px;right:12px;}
  .hero__icon--2{top:91px;left:12px;}
  .framework{margin-top:9px;}
  .strip{padding:0;margin-bottom:76px;}
  .strip__track{min-height:24px;}
  .sec-sub{font-size:3.3vw;}
  .card h4{font-size:5vw;}
  .card p,.card__link{font-size:3.1vw;}
  .card__icon{width:40px;height:40px;margin-bottom:6px;}
  .card{padding:30px;gap:6px;}
  #work{margin-top:15px;}
  .about{margin-top:50px;padding-top:21px;padding-bottom:30px;}
  .work-box__text .btn{font-size:4.1vw;padding:3vw 7vw;}
  .footer-col h5{font-size:20px;}
  .footer-col a{font-size:18px;line-height:26px;}
  .footer-col ul{gap:8px;}
  .footer-brand__name{font-size:17px;}
  .footer-brand__copy{font-size:12px;}
  .work-cols{order:-1;}
  .about__bio{font-size:3.2vw;}
  .about__hi{font-size:14px;}
  .process{margin-top:35px;}
  .step h3{font-size:4.5vw;}
  .step p{font-size:2.6vw;line-height:1.3;}
  .step__icon{width:64px;height:64px;}
  .badge{font-size:10px;}
  .badge--ls1{font-size:10px;}
  .mark .mark__svg path{vector-effect:none;}
}

/* Header navigation */
.site-nav__label,.site-nav .site-nav__cta{display:none;}
.site-nav a[aria-current="page"]{color:#fff;font-weight:500;}
@media(max-width:1024px){
  .site-nav{top:calc(100% + 10px);left:0;right:0;width:100%;min-width:0;padding:18px;gap:4px;border-radius:24px;background:rgba(12,15,20,.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 18px 40px #00000066;max-height:calc(100dvh - 125px);overflow-y:auto;}
  .site-nav__label{display:block;color:var(--muted);font-size:12px;padding:2px 12px 12px;}
  .site-nav a{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:12px;font-size:16px;font-weight:400;border-radius:12px;}
  .site-nav a::after{content:"←";color:var(--muted);font-size:16px;}
  .site-nav a:hover,.site-nav a[aria-current="page"]{background:#245BFE1A;color:#fff;}
  .site-nav a[aria-current="page"]::after{content:"•";color:var(--blue);}
  .site-nav .site-nav__cta{display:flex;justify-content:center;background:var(--grad-blue);color:#fff;margin-top:12px;font-weight:500;}
  .site-nav .site-nav__cta::after{content:none;}
  .menu-toggle{position:relative;flex-direction:column;gap:6px;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#182653,#0c0f14);}
  .menu-toggle span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .2s;}
  .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg);}
  .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg);}
}

.site-brand-name{display:flex;flex-direction:column;white-space:nowrap;font-size:22px;font-weight:500;color:#fff;line-height:1.5;}
.site-brand-name small{font-size:10px;font-weight:300;color:#9E9FA2;}
@media(max-width:767px){.site-brand-name{font-size:18px;}}

.site-header__logo img.site-logo{width:190px;height:auto;display:block;}
@media(max-width:1024px){.site-header__logo img.site-logo{width:160px;}}
@media(max-width:767px){.site-header__logo img.site-logo{width:140px;}}

.site-logo-lockup{display:flex;align-items:center;gap:10px;}
.site-logo-symbol{position:relative;width:44px;height:44px;overflow:hidden;flex-shrink:0;}
.site-header__logo .site-logo-symbol img{position:absolute;width:285px;max-width:none;height:95px;right:-29px;top:-26px;}
.site-logo-type{display:flex;flex-direction:column;font-family:var(--font);text-align:right;white-space:nowrap;}
.site-logo-name{font-size:24px;line-height:1.45;color:#fff;}
.site-logo-name b{font-weight:600;}
.site-logo-name>span{font-weight:300;}
.site-logo-type small{font-size:10px;font-weight:300;line-height:1.5;color:var(--muted);}
@media(max-width:767px){.site-logo-name{font-size:20px;}.site-logo-lockup{gap:7px;}.site-logo-type small{font-size:9px;}}

/* Readable live-text marquee */
.strip{padding:15px 0;border-block:1px solid #163E9866;background:linear-gradient(90deg,#0C0F14,#0c172d,#0C0F14);}
.strip__track{gap:0;animation-duration:24s;}
.strip__phrase{display:flex;align-items:center;gap:24px;padding-inline:24px;flex-shrink:0;color:#FFFFFFD9;font-size:20px;font-weight:300;line-height:1.5;white-space:nowrap;}
.strip__phrase>span{color:var(--blue);font-size:19px;}
@keyframes stripMarquee{from{transform:translateX(0);}to{transform:translateX(33.333333%);}}
@media(max-width:767px){.strip{padding:12px 0;}.strip__phrase{font-size:16px;padding-inline:16px;gap:16px;}.strip__phrase>span{font-size:15px;}@keyframes stripMarquee{from{transform:translateX(0);}to{transform:translateX(33.333333%);}}}
@media(prefers-reduced-motion:reduce){.strip__track{animation:none;}}

/* Tajawal typography: clear body copy and stronger headings. */
body .hero__h1,body .hero__h2,body .h-mid,body .sec-title,body .cta__box h2,body .card h4,body .step h3,body .popup__title{font-weight:700;}
body .hero__desc,body .sec-sub,body .card p,body .about__hi,body .about__bio,body .step p,body .footer-brand__copy,body .footer-col a,body .strip__phrase{font-weight:400;}
body .site-nav a,body .btn,body .card__link{font-weight:500;}
body .site-logo-name b{font-weight:700;}
body .site-logo-name>span{font-weight:400;}
body .site-logo-type small{font-weight:400;}

.about__portrait{display:block;width:220px;aspect-ratio:1;object-fit:cover;border-radius:28px;margin:0 auto 24px;border:1px solid #245BFE44;box-shadow:0 16px 50px #00000033;}
@media(max-width:767px){.about__portrait{width:180px;border-radius:24px;margin-bottom:20px;}}


@media(max-width:767px){body .hero__icon{display:block;height:26px;}body .hero__icon img{height:26px;}body .hero__icon--1{top:-14px;right:12px;}body .hero__icon--2{top:66px;left:8px;}}

/* Anchor floating labels below their matching headline edges. */
body .hero__h1 .hero__icon--1{top:auto;bottom:-36px;right:0;left:auto;}
body .hero__h2 .hero__icon--2{top:auto;bottom:-36px;left:0;right:auto;}
@media(max-width:767px){
 body .hero__h1{margin-bottom:36px;}
 body .hero__h1 .hero__icon--1{bottom:-25px;right:0;}
 body .hero__h2 .hero__icon--2{bottom:-25px;left:0;}
 body .hero__desc{margin-top:40px;}
}

body .hero__h1{margin-bottom:26px;}
body .hero__h1 .hero__icon--1{height:32px;bottom:-27px;}
body .hero__h1 .hero__icon--1 img{height:32px;}
@media(max-width:767px){
 body .hero__h1{margin-bottom:20px;}
 body .hero__h1 .hero__icon--1{height:22px;bottom:-19px;}
 body .hero__h1 .hero__icon--1 img{height:22px;}
}

/* Balanced hero actions. */
body .hero__actions{display:flex;align-items:stretch;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:36px;}
body .hero__actions .btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:52px;min-width:220px;padding:12px 24px;border-radius:16px;font-family:var(--font);font-size:17px;font-weight:500;line-height:1.5;white-space:nowrap;}
body .hero__actions .btn-ghost{min-width:270px;border:1px solid var(--blue);}
@media(max-width:767px){
 body .hero__actions{gap:10px;padding:0 20px;margin-top:30px;}
 body .hero__actions .btn,body .hero__actions .btn-ghost{width:100%;max-width:360px;min-width:0;min-height:48px;padding:12px 16px;font-size:16px;border-radius:14px;}
}

/* About specialties as compact, wrapping tags. */
body .about__bio{max-width:600px;margin:16px auto 0;line-height:1.85;}
body .about__tags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;list-style:none;padding:0;margin:24px auto 0;max-width:660px;}
body .about__tags li{display:flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid #245BFE44;border-radius:12px;background:#245BFE0D;color:#FFFFFFD9;font-size:15px;font-weight:500;line-height:1.5;}
body .about__tags li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue);flex-shrink:0;}
@media(max-width:767px){body .about__bio{font-size:15px;max-width:100%;}body .about__tags{gap:8px;margin-top:20px;}body .about__tags li{font-size:13px;padding:8px 11px;}}

/* Portrait and introduction share one balanced section. */
body .about{padding-top:40px;padding-bottom:40px;}
body .about__layout{display:grid;grid-template-columns:minmax(240px,340px) minmax(0,1fr);gap:60px;align-items:center;direction:rtl;max-width:1080px;margin:auto;}
body .about__photo{padding:12px;border:1px solid #245BFE33;border-radius:36px;background:linear-gradient(145deg,#245BFE14,#0C0F14);}
body .about__portrait{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center;margin:0;border-radius:26px;border:0;box-shadow:none;}
body .about__content{text-align:right;}
body .about__hi{font-size:18px;font-weight:500;color:var(--blue);margin:0 0 14px;}
body .about .h-mid{font-size:clamp(28px,3.1vw,42px);line-height:1.5;text-align:right;margin:0;max-width:100%;}
body .about__bio{font-size:17px;line-height:1.9;margin:18px 0 0;max-width:560px;}
body .about__tags{justify-content:flex-start;margin:22px 0 0;gap:8px;}
body .about__tags li{font-size:13px;padding:8px 12px;}
body .about__tags li:first-child{background:var(--blue);color:#fff;border-color:var(--blue);}
body .about__tags li:first-child::before{background:#fff;}
@media(max-width:767px){
 body .about{padding-top:24px;padding-bottom:24px;}
 body .about__layout{grid-template-columns:1fr;gap:26px;}
 body .about__photo{width:min(240px,80%);margin:auto;padding:9px;border-radius:30px;}
 body .about__portrait{border-radius:22px;}
 body .about__content,body .about .h-mid{text-align:center;}
 body .about__hi{font-size:16px;margin-bottom:12px;}
 body .about .h-mid{font-size:27px;}
 body .about__bio{font-size:15px;margin-top:14px;}
 body .about__tags{justify-content:center;margin-top:20px;}
}

/* Shared dark glass surfaces, using the existing blue and charcoal palette. */
:root{--glass-fill:linear-gradient(145deg,#FFFFFF0D,#245BFE0A 48%,#0C0F14CC);--glass-edge:#FFFFFF24;--glass-shadow:inset 0 1px 0 #FFFFFF14,0 16px 40px #00000026;}
body{background-color:#0C0F14;background-image:radial-gradient(ellipse at 90% 10%,#245BFE12,transparent 42%),radial-gradient(ellipse at 10% 65%,#163E9817,transparent 42%);}
body .site-header__pill,body .site-header.is-scrolled .site-header__pill{background:linear-gradient(135deg,#FFFFFF0C,#0C0F14CC);border:1px solid var(--glass-edge);backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%);box-shadow:var(--glass-shadow);}
body .card,body .work-box,body .cta__box,body .about__photo,body .service-item,body .services-stats>div,body .services-contact,body .sb-card,body .sb-final{background:var(--glass-fill);border:1px solid var(--glass-edge);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--glass-shadow);}
body .about__tags li,body .badge,body .btn-ghost{background:linear-gradient(135deg,#FFFFFF0B,#245BFE12);border:1px solid #FFFFFF29;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 #FFFFFF14;}
body .btn-primary,body .sb-button,body .about__tags li:first-child{background:linear-gradient(145deg,#245BFEEB,#163E98D9);border:1px solid #FFFFFF38;box-shadow:inset 0 1px 0 #FFFFFF38,0 6px 24px #245BFE20;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
body .hero__actions .btn-ghost{border-color:#FFFFFF29;}
body .btn:hover,body .sb-button:hover{box-shadow:inset 0 1px 0 #FFFFFF38,0 8px 28px #245BFE33;}
@media(max-width:1024px){body .site-nav{background:linear-gradient(145deg,#172033F5,#0C0F14F2);border:1px solid var(--glass-edge);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--glass-shadow);}}
@media(max-width:767px){body .card,body .work-box,body .cta__box,body .about__photo,body .service-item,body .services-stats>div,body .services-contact,body .sb-card,body .sb-final{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}}
@supports not (backdrop-filter:blur(1px)){body .card,body .work-box,body .cta__box,body .service-item,body .sb-card,body .site-header__pill{background:#111722;}}

/* More visible glass: brighter reflections and light behind the surfaces. */
:root{--glass-fill:linear-gradient(135deg,#FFFFFF20 0%,#FFFFFF09 36%,#245BFE16 70%,#0C0F1466 100%);--glass-edge:#FFFFFF40;--glass-shadow:inset 0 1px 0 #FFFFFF55,inset 1px 0 0 #FFFFFF12,0 18px 45px #00000033,0 0 30px #245BFE09;}
body{background-image:radial-gradient(ellipse at 90% 12%,#245BFE30,transparent 40%),radial-gradient(ellipse at 5% 55%,#163E9838,transparent 40%);}
body .cards-row,body .services-grid,body .sb-grid,body .about__layout{background:radial-gradient(ellipse at 85% 35%,#245BFE20,transparent 65%);}
body .site-header__pill,body .site-header.is-scrolled .site-header__pill{background:linear-gradient(135deg,#FFFFFF1A,#0C0F1466 65%,#245BFE18);border-color:#FFFFFF40;backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);box-shadow:var(--glass-shadow);}
body .card,body .work-box,body .cta__box,body .about__photo,body .service-item,body .services-stats>div,body .services-contact,body .sb-card,body .sb-final{backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);}
body .about__tags li,body .badge,body .btn-ghost{background:linear-gradient(135deg,#FFFFFF1A,#FFFFFF08 45%,#245BFE20);border-color:#FFFFFF40;box-shadow:inset 0 1px 0 #FFFFFF40,0 8px 22px #00000020;}
body .hero__actions .btn-ghost{border-color:#FFFFFF40;}
body .btn-primary,body .sb-button,body .about__tags li:first-child{background:linear-gradient(145deg,#245BFECC,#245BFEBB 45%,#163E9899);border-color:#FFFFFF55;box-shadow:inset 0 1px 0 #FFFFFF66,inset 0 -1px 0 #FFFFFF18,0 8px 30px #245BFE26;}
@media(max-width:767px){body .card,body .work-box,body .cta__box,body .about__photo,body .service-item,body .services-stats>div,body .services-contact,body .sb-card,body .sb-final{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}}

/* Floating glass header with a centered navigation and dedicated action. */
body .site-header__inner{max-width:1160px;padding:16px 20px;transition:padding .25s ease;}
body .site-header__pill{border-radius:22px;padding:15px 22px;gap:24px;transition:padding .25s ease,background .25s ease,box-shadow .25s ease;}
body .site-header__logo{width:auto;flex:0 0 auto;justify-content:flex-start;}
body .site-nav{width:auto;flex:1;justify-content:center;gap:10px;}
body .site-nav a{font-size:15px;padding:10px 12px;border-radius:10px;white-space:nowrap;}
body .site-nav a+a::before{content:none;}
body .site-nav a:hover,body .site-nav a[aria-current="page"]{background:#FFFFFF0D;}
body .site-header__cta{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-height:44px;padding:10px 20px;border-radius:12px;background:linear-gradient(135deg,#245BFECC,#163E98AA);border:1px solid #FFFFFF40;color:#fff;font-size:15px;font-weight:500;box-shadow:inset 0 1px 0 #FFFFFF30;}
body .site-header.is-scrolled .site-header__inner{padding-top:8px;padding-bottom:8px;}
body .site-header.is-scrolled .site-header__pill{padding-top:10px;padding-bottom:10px;background:linear-gradient(135deg,#FFFFFF1A,#0C0F14CC);}
@media(max-width:1024px){
 body .site-header__inner{padding:12px 14px;}
 body .site-header__pill{padding:12px 14px;border-radius:20px;justify-content:space-between;gap:12px;}
 body .site-header__cta{display:none;}
 body .site-nav{position:absolute;width:100%;flex:none;justify-content:flex-start;gap:4px;padding:18px;border-radius:20px;}
 body .site-nav a{padding:12px;font-size:16px;}
 body .menu-toggle{border-radius:12px;width:44px;height:44px;border:1px solid #FFFFFF26;background:#FFFFFF0C;}
 body .site-nav .site-nav__cta{border-radius:12px;}
}
@media(prefers-reduced-motion:reduce){body .site-header__inner,body .site-header__pill{transition:none;}}

/* Minimal NH monogram paired with the live Arabic wordmark. */
body .site-logo-lockup{gap:10px;align-items:center;}
body .site-logo-monogram{display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex-shrink:0;border:1px solid #245BFE70;border-radius:12px;background:linear-gradient(135deg,#245BFE18,#FFFFFF05);box-shadow:inset 0 1px 0 #FFFFFF20;color:var(--blue);font-family:Arial,sans-serif;font-size:20px;font-weight:500;letter-spacing:-1px;direction:ltr;line-height:1;}
body .site-logo-name{font-size:24px;line-height:1.3;}
body .site-logo-name b{font-weight:700;}
body .site-logo-name>span{font-weight:400;}
@media(max-width:767px){body .site-logo-monogram{width:36px;height:36px;font-size:18px;border-radius:10px;}body .site-logo-name{font-size:21px;}}

body .site-logo-monogram--creative{border:0;background:none;box-shadow:none;overflow:hidden;width:48px;height:48px;}
body .site-logo-monogram--creative img{width:86px;height:86px;max-width:none;object-fit:contain;flex-shrink:0;}
@media(max-width:767px){body .site-logo-monogram--creative{width:40px;height:40px;}body .site-logo-monogram--creative img{width:72px;height:72px;}}

/* Floating search labels in the same glass language as the site. */
body .hero__h1 .hero__icon--1,body .hero__h2 .hero__icon--2{display:flex;align-items:flex-start;gap:5px;height:auto;bottom:-30px;font-size:12px;line-height:1.3;direction:rtl;}
body .hero__float-label{display:block;padding:5px 10px;border-radius:8px;border:1px solid #FFFFFF40;background:linear-gradient(135deg,#FFFFFF1A,#245BFE26);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 #FFFFFF26,0 4px 12px #00000026;color:#FFFFFFD9;font-family:var(--font);font-size:12px;font-weight:500;white-space:nowrap;}
body .hero__cursor{display:block;width:11px;height:14px;background:var(--blue);clip-path:polygon(0 0,100% 60%,58% 68%,42% 100%);transform:rotate(-15deg);margin-top:-5px;}
@media(max-width:767px){body .hero__float-label{font-size:9px;padding:3px 7px;border-radius:6px;}body .hero__cursor{width:8px;height:11px;}body .hero__h1 .hero__icon--1{bottom:-21px;}body .hero__h2 .hero__icon--2{bottom:-26px;}}

body .site-logo-monogram--creative img{width:62px;height:62px;}
@media(max-width:767px){body .site-logo-monogram--creative img{width:52px;height:52px;}}

/* Branded glass footer with direct social links. */
body .site-footer{margin-top:70px;border-top:1px solid #FFFFFF26;background:linear-gradient(135deg,#FFFFFF08,#245BFE0C 60%,#0C0F14);}
body .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;max-width:1160px;margin:auto;padding:48px 24px 36px;}
body .footer-grid .footer-brand,body .footer-grid>.footer-col{width:auto;max-width:none;padding:0;}
body .footer-logo{display:inline-flex;}
body .footer-brand__description{font-size:15px;line-height:1.9;color:var(--muted);max-width:290px;margin-top:16px;}
body .footer-col h5{font-size:17px;font-weight:700;margin-bottom:10px;}
body .footer-col a{font-size:15px;font-weight:400;}
body .footer-socials{display:flex;flex-direction:column;gap:10px;width:100%;max-width:240px;}
body .footer-socials a{display:flex;justify-content:space-between;align-items:center;direction:ltr;min-height:46px;padding:10px 14px;border:1px solid #FFFFFF30;border-radius:12px;background:linear-gradient(135deg,#FFFFFF12,#245BFE0D);box-shadow:inset 0 1px 0 #FFFFFF18;color:#FFFFFFD9;}
body .footer-socials a:hover{background:#245BFE26;border-color:#245BFE80;}
body .footer-socials span{color:var(--blue);}
body .footer-bottom{text-align:right;font-size:13px;font-weight:400;padding:20px 24px;border-top:1px solid #FFFFFF15;max-width:1112px;}
@media(max-width:767px){body .footer-grid{grid-template-columns:1fr 1fr;gap:30px 20px;padding:32px 24px;}body .footer-grid .footer-brand{grid-column:1/-1;order:0;}body .footer-brand__description{max-width:100%;}body .footer-col h5{font-size:15px;}body .footer-col a{font-size:14px;}body .footer-socials a{padding:10px;font-size:13px;}body .footer-bottom{text-align:center;}}

body .footer-socials .footer-social-name{display:flex;align-items:center;gap:9px;color:#FFFFFFD9;}
body .footer-social-icon{width:19px;height:19px;flex-shrink:0;color:var(--blue);}

/* Mobile WhatsApp contact, with reserved space and safe-area support. */
.mobile-contact{display:none;}
@media(max-width:767px){
 body.has-mobile-contact{padding-bottom:calc(96px + env(safe-area-inset-bottom));}
 .mobile-contact:not([hidden]){position:fixed;display:flex;align-items:center;justify-content:space-between;gap:12px;bottom:calc(12px + env(safe-area-inset-bottom));left:12px;right:12px;z-index:180;padding:12px;border:1px solid #FFFFFF40;border-radius:18px;background:linear-gradient(135deg,#192131F2,#0C0F14E6);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 #FFFFFF20,0 8px 30px #00000055;}
 .mobile-contact__copy{display:flex;flex-direction:column;gap:3px;min-width:0;}
 .mobile-contact__copy strong{font-size:12px;font-weight:500;color:#fff;}
 .mobile-contact__copy>span{font-size:11px;color:var(--muted);}
 .mobile-contact a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:10px 12px;background:linear-gradient(135deg,#245BFE,#163E98);border:1px solid #FFFFFF30;border-radius:12px;color:#fff;font-size:12px;font-weight:500;white-space:nowrap;}
 .mobile-contact__icon{width:18px;height:18px;fill:currentColor;flex-shrink:0;}
}

.portfolio-page{max-width:1160px;margin:auto;padding:0 24px 60px;}
.portfolio-hero{padding:60px 0 48px;max-width:700px;}
.portfolio-hero>span{color:var(--blue);font-size:15px;}
body .portfolio-hero h1{font-family:var(--font);font-size:clamp(36px,5vw,64px);font-weight:700;line-height:1.4;margin:16px 0;}
.portfolio-hero em{font-style:normal;color:var(--blue);}
.portfolio-hero p{color:var(--muted);font-size:18px;line-height:1.8;}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
.portfolio-card{overflow:hidden;border:1px solid var(--glass-edge);border-radius:24px;background:var(--glass-fill);box-shadow:var(--glass-shadow);backdrop-filter:blur(12px);}
.portfolio-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;align-items:center;}
.portfolio-preview{display:block;background:#0C0F14;overflow:hidden;}
.portfolio-browser{display:flex;align-items:center;gap:5px;padding:12px 16px;direction:ltr;border-bottom:1px solid #FFFFFF15;}
.portfolio-browser>span{width:6px;height:6px;border-radius:50%;background:#FFFFFF40;}
.portfolio-browser small{font-size:11px;color:var(--muted);margin-left:10px;}
.portfolio-preview img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform .4s;}
.portfolio-preview:hover img{transform:scale(1.025);}
.portfolio-info{padding:28px;}
.portfolio-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-bottom:18px;}
.portfolio-meta>span{border:1px solid #FFFFFF26;border-radius:8px;padding:4px 10px;background:#FFFFFF08;}
body .portfolio-info h2{font-size:25px;font-weight:700;text-align:right;line-height:1.4;}
.portfolio-info p{font-size:16px;color:var(--muted);line-height:1.8;margin:16px 0 24px;}
.portfolio-visit{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #FFFFFF26;padding-top:18px;color:#fff;font-size:15px;min-height:44px;}
.portfolio-visit span{color:var(--blue);}
.portfolio-contact{text-align:center;padding:50px 20px;margin-top:40px;border-radius:24px;background:var(--glass-fill);border:1px solid var(--glass-edge);}
body .portfolio-contact h2{font-size:28px;font-weight:700;line-height:1.5;margin-bottom:24px;}
@media(max-width:767px){.portfolio-page{padding:0 20px 36px;}.portfolio-hero{padding:36px 0;}.portfolio-hero p{font-size:16px;}.portfolio-grid{grid-template-columns:1fr;gap:20px;}.portfolio-card:first-child{display:block;grid-column:auto;}.portfolio-info{padding:22px;}.portfolio-info h2{font-size:23px;}.portfolio-contact{padding:32px 18px;}.portfolio-contact h2{font-size:24px;}}
@media(prefers-reduced-motion:reduce){.portfolio-preview img{transition:none;}}

.portfolio-card:first-child{grid-column:auto;display:block;}

.portfolio-features{margin:0 0 24px;}
body .portfolio-features h3{font-size:14px;font-weight:500;color:#fff;margin-bottom:12px;}
.portfolio-features ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0;}
.portfolio-features li{font-size:12px;line-height:1.6;padding:6px 10px;border:1px solid #FFFFFF26;border-radius:8px;background:linear-gradient(135deg,#FFFFFF0D,#245BFE12);color:#FFFFFFD9;}

/* Mobile previews layered over the existing animated desktop view. */
.portfolio-device-stage{position:relative;padding-bottom:18px;}
.portfolio-device-stage>img{width:100%;}
.portfolio-phone{position:absolute;bottom:4px;left:16px;width:24%;max-width:130px;aspect-ratio:390/844;border:4px solid #182030;border-radius:18px;overflow:hidden;background:#0C0F14;box-shadow:0 10px 25px #00000070,inset 0 0 0 1px #FFFFFF40;z-index:2;}
.portfolio-phone::before{content:"";position:absolute;top:5px;left:35%;width:30%;height:5px;border-radius:8px;background:#182030;z-index:3;}
.portfolio-preview .portfolio-phone img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:top;}
@media(max-width:767px){.portfolio-phone{left:12px;border-width:3px;border-radius:14px;}}

.store-request{max-width:850px;margin:40px auto 70px;}
body .store-request h1{font-size:clamp(32px,5vw,52px);font-weight:700;line-height:1.4;margin:20px 0 12px;}
.store-request__intro{color:var(--muted);line-height:1.8;font-size:17px;}
.store-request__form{margin-top:30px;padding:30px;border:1px solid var(--glass-edge);border-radius:24px;background:var(--glass-fill);box-shadow:var(--glass-shadow);}
.store-request__fields{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.store-request__form label{display:flex;flex-direction:column;gap:8px;font-size:15px;color:#FFFFFFD9;}
.store-request__form label>span{color:var(--blue);display:contents;}
.store-request__form input:not([type=checkbox]),.store-request__form select,.store-request__form textarea{width:100%;box-sizing:border-box;font:400 16px var(--font);color:#fff;background:#0C0F14B3;border:1px solid #FFFFFF30;border-radius:12px;padding:12px;min-height:48px;}
.store-request__form select option{background:#0C0F14;}
.store-request__form :is(input,select,textarea):focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.store-request__form fieldset{border:0;padding:0;margin:24px 0;}
.store-request__form legend{font-size:15px;margin-bottom:12px;}
.store-request__options{display:flex;flex-wrap:wrap;gap:10px;}
.store-request__options label{flex-direction:row;align-items:center;padding:10px 12px;border:1px solid #FFFFFF26;border-radius:10px;background:#FFFFFF08;font-size:13px;cursor:pointer;}
.store-request__options input{accent-color:var(--blue);width:17px;height:17px;}
.store-request__form button{margin-top:24px;min-height:48px;font-size:16px;}
.store-request__note{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.7;}
@media(max-width:767px){.store-request__fields{grid-template-columns:1fr;gap:16px;}.store-request__form{padding:20px;}.store-request__form button{width:100%;padding:12px;font-size:14px;}}

/* Consistent feature choices in the request form. */
body .store-request__options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
body .store-request__options label{min-height:52px;box-sizing:border-box;padding:12px 14px;font-size:14px;gap:10px;transition:background .2s,border-color .2s;}
body .store-request__options label:has(input:checked){border-color:var(--blue);background:#245BFE26;color:#fff;}
body .store-request__options input{flex-shrink:0;margin:0;}
@media(max-width:420px){body .store-request__options{grid-template-columns:1fr;}}

/* Blue portrait edge light, preserving natural face colors. */
body .about__photo{position:relative;isolation:isolate;border-color:#245BFE66;background:linear-gradient(145deg,#245BFE33,#0C0F14 65%);box-shadow:0 0 45px #245BFE20,inset 0 1px 0 #FFFFFF26;}
body .about__photo::after{content:"";position:absolute;inset:12px;border-radius:26px;pointer-events:none;background:linear-gradient(100deg,#245BFE40 0%,#245BFE08 22%,transparent 45%,transparent 72%,#245BFE24 100%);box-shadow:inset 2px 0 16px #245BFE30;}
@media(max-width:767px){body .about__photo::after{inset:9px;border-radius:22px;}}

body .theme-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border:1px solid #FFFFFF30;border-radius:12px;background:#FFFFFF0C;color:#fff;font-size:22px;cursor:pointer;}
body .theme-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
@media(max-width:1024px){body .site-header__logo{margin-left:auto;}body .site-header__pill{gap:10px;}}
html[data-theme="light"]{color-scheme:light;--bg:#F3F5FA;--dim:#495366;--dim2:#495366;--muted:#596477;--nav:#344054;--footer-gray:#596477;--footer-nav:#344054;--glass-edge:#163E9829;--glass-fill:linear-gradient(135deg,#FFFFFFE6,#FFFFFF99 50%,#245BFE0D);--glass-shadow:inset 0 1px 0 #fff,0 12px 35px #163E9810;}
html[data-theme="light"] body{color:#182234;background-color:#F3F5FA;background-image:radial-gradient(ellipse at 90% 12%,#245BFE12,transparent 40%);}
html[data-theme="light"] body :is(h1,h2,h3,h4,h5,.hero__desc,.about__content,.services-page,.portfolio-page,.store-request,.site-logo-name){color:#182234;}
html[data-theme="light"] body :is(.card p,.step p,.sec-sub,.about__bio,.portfolio-info p,.service-body p,.services-hero p,.footer-brand__description,.store-request__intro){color:#596477;}
html[data-theme="light"] body .site-header{background:none;}
html[data-theme="light"] body :is(.site-header__pill,.site-header.is-scrolled .site-header__pill,.site-nav,.mobile-contact:not([hidden])){background:linear-gradient(135deg,#FFFFFFE6,#F3F5FACC);border-color:#163E9833;}
html[data-theme="light"] body :is(.site-nav a,.theme-toggle,.footer-col a,.footer-social-name,.mobile-contact__copy strong,.store-request__form label,.portfolio-visit){color:#182234;}
html[data-theme="light"] body :is(.theme-toggle,.menu-toggle){background:#245BFE0C;border-color:#163E9833;}
html[data-theme="light"] body .menu-toggle span{background:#182234;}
html[data-theme="light"] body :is(.btn-ghost,.about__tags li,.portfolio-features li,.footer-socials a,.store-request__options label){background:linear-gradient(135deg,#FFFFFFCC,#245BFE0D);color:#344054;border-color:#163E9833;}
html[data-theme="light"] body :is(.btn-primary,.site-header__cta,.site-nav .site-nav__cta,.about__tags li:first-child,.mobile-contact a){color:#fff;}
html[data-theme="light"] body .site-footer{background:linear-gradient(135deg,#FFFFFFAA,#245BFE08);border-color:#163E9826;}
html[data-theme="light"] body .hero__bleed{background:radial-gradient(ellipse at center,#245BFE15,#F3F5FA 72%);}
html[data-theme="light"] body .hero__bleed::before{background:linear-gradient(to bottom,#F3F5FA,transparent);}
html[data-theme="light"] body .hero__bleed::after{background:linear-gradient(to top,#F3F5FA,transparent);}
html[data-theme="light"] body .strip{background:#FFFFFF80;border-color:#163E9826;}
html[data-theme="light"] body .strip__phrase{color:#344054;}
html[data-theme="light"] body .hero__float-label{background:#FFFFFFCC;color:#344054;border-color:#163E9833;}
html[data-theme="light"] body .store-request__form :is(input:not([type=checkbox]),select,textarea){background:#FFFFFFCC;color:#182234;border-color:#163E9833;}
html[data-theme="light"] body .store-request__form select option{background:#fff;color:#182234;}
html[data-theme="light"] body .store-request__options label:has(input:checked){background:#245BFE15;border-color:var(--blue);}
html[data-theme="light"] body :is(.footer-bottom,.portfolio-visit){border-color:#163E9826;}

/* Light theme contrast and softer, neutral shadows. */
html[data-theme="light"]{--glass-shadow:inset 0 1px 0 #FFFFFFE6,0 8px 24px #1822340A;--glass-fill:linear-gradient(135deg,#FFFFFFE6,#FFFFFFB3);--glass-edge:#1822341A;}
html[data-theme="light"] body :is(.site-header__pill,.site-header.is-scrolled .site-header__pill,.card,.work-box,.cta__box,.service-item,.services-contact,.portfolio-card,.store-request__form,.about__photo){box-shadow:var(--glass-shadow);border-color:#1822341A;}
html[data-theme="light"] body :is(.btn-primary,.sb-button,.site-header__cta,.cta__box .btn){box-shadow:inset 0 1px 0 #FFFFFF30,0 4px 12px #245BFE18;}
html[data-theme="light"] body :is(.btn-ghost,.about__tags li,.footer-socials a,.hero__float-label){box-shadow:inset 0 1px 0 #FFFFFFB3;}
html[data-theme="light"] body .btn::before{display:none;}
html[data-theme="light"] body :is(.step h3 .w,.footer-brand__name,.portfolio-meta,.portfolio-browser small,.service-tags,.services-work,.store-request__note,.mobile-contact__copy>span,.site-nav__label){color:#495366;}
html[data-theme="light"] body :is(.hero__h1,.hero__h2,.h-section,.h-mid,.cta__box h2,.card h4,.step h3,.about__hi,.footer-col h5){color:#182234;}
html[data-theme="light"] body :is(.hero__h2 .mark,.about__hi,.step h3){color:var(--blue);}
html[data-theme="light"] body :is(.site-nav a:hover,.site-nav a[aria-current="page"],.footer-col a:hover,.btn-ghost:hover,.card__link:hover){color:var(--blue);}
html[data-theme="light"] body .site-nav .site-nav__cta{color:#fff;}
html[data-theme="light"] body .work-cols::before{background:linear-gradient(-90deg,transparent 25%,#F3F5FA 100%);}
html[data-theme="light"] body .work-cols::after{background:linear-gradient(-90deg,#F3F5FA 0%,transparent 75%);}
html[data-theme="light"] body .about__photo{background:linear-gradient(145deg,#245BFE14,#FFFFFFCC);}
html[data-theme="light"] body .mobile-contact:not([hidden]){box-shadow:0 6px 24px #18223414,inset 0 1px 0 #fff;}
html[data-theme="light"] body .site-nav{box-shadow:0 10px 30px #18223414;}
html[data-theme="light"] body .portfolio-browser{background:#FFFFFFE6;border-color:#18223415;}
html[data-theme="light"] body .portfolio-browser>span{background:#49536666;}

html[data-theme="light"] body .about__tags li:first-child{background:var(--blue);color:#fff;border-color:var(--blue);}
html[data-theme="light"] body .popup__close{color:#182234;}
html[data-theme="light"] body .popup__title{color:#182234;}
html[data-theme="light"] body :is(.portfolio-features h3,.service-body h3,.services-heading h2,.services-contact h2){color:#182234;}
html[data-theme="light"] body .footer-socials .footer-social-name{color:#344054;}
html[data-theme="light"] body .services-page :is(p,.service-tags){color:#596477;}

html[data-theme="light"] body .process__rule-row .badge{color:#182234;background:#245BFE0D;border:1px solid #245BFE33;box-shadow:none;}

html[data-theme="light"] body .cards-row{background:none;}

html[data-theme="light"] body .work-box__text .badge{color:#182234;background:#245BFE0D;border:1px solid #245BFE33;box-shadow:none;}

html[data-theme="light"] body .about__layout{background:none;}

html[data-theme="light"] body .cta__box{background:linear-gradient(135deg,#FFFFFF,#F5F7FE);border:1px solid #18223414;box-shadow:0 8px 24px #18223408;}
html[data-theme="light"] body .cta__box .btn{background:var(--blue);color:#fff;border:1px solid #245BFE;border-radius:16px;box-shadow:0 4px 12px #245BFE18;}
html[data-theme="light"] body .cta__box .btn:hover{background:var(--accent);border-color:var(--accent);}
html[data-theme="light"] body .cta__icon{opacity:0;}
html[data-theme="light"] body .cta__box::before{content:"";position:absolute;top:-25px;right:-5px;width:86px;height:85px;background:var(--blue);mask:url('/wp-content/uploads/site-assets/cta-icon.svg') center/contain no-repeat;-webkit-mask:url('/wp-content/uploads/site-assets/cta-icon.svg') center/contain no-repeat;opacity:.7;pointer-events:none;}
@media(max-width:767px){html[data-theme="light"] body .cta__box::before{width:64px;height:64px;top:-20px;right:8px;}}

html[data-theme="light"] body :is(.services-grid,.sb-grid){background:none;}

body .theme-toggle{width:auto;min-width:46px;padding:0 10px;font-family:var(--font);font-size:12px;font-weight:500;}

body .theme-toggle{width:40px;min-width:40px;padding:0;}body .theme-toggle span{display:flex;}body .theme-icon{width:20px;height:20px;}body .theme-icon--contrast{display:none;}html[data-theme="light"] .theme-icon--sun{display:none;}html[data-theme="light"] .theme-icon--contrast{display:block;}

html[data-theme="light"] body .about__photo::after{opacity:.3;}

/* Keep mobile header controls together at the outer edge. */
@media(max-width:1024px){
 body .site-header__pill{justify-content:flex-start;gap:8px;}
 body .site-header__logo{margin-left:auto;margin-inline-end:auto;min-width:0;}
 body .theme-toggle{margin:0;flex:0 0 40px;width:40px;height:40px;}
 body .menu-toggle{margin:0;flex:0 0 40px;width:40px;height:40px;}
}