/* ===== Sub-pages (services / projects / gallery) — extends style.css ===== */

.back-link{display:inline-flex;align-items:center;gap:10px}
.back-link:before{content:"←";transition:transform .3s}
.back-link:hover:before{transform:translateX(-4px)}
html[dir="rtl"] .back-link:before{content:"→"}
html[dir="rtl"] .back-link:hover:before{transform:translateX(4px)}
html[dir="rtl"] .page-head h1{letter-spacing:0!important;text-transform:none!important;line-height:1.25!important}
html[dir="rtl"] .page-head .hero-copy,html[dir="rtl"] .page-section .section-heading{text-align:right}

/* project cards */
.page-section{padding-top:56px}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.project-card{display:block;min-height:360px;color:inherit}
.project-card .service-photo{z-index:1}
.project-card .glass-panel{z-index:3;min-height:150px}
.project-card .glass-panel h3{font-size:18px;line-height:1.35;margin:4px 0 6px;padding-inline-end:34px}
.project-card .glass-panel p{max-width:none;font-size:11px;letter-spacing:.04em;color:#b7c3d6}
.project-card .card-number{z-index:4}
.cover-empty{position:absolute;inset:0;z-index:0;display:flex;align-items:flex-start;justify-content:center;padding-top:34%;
  background:
    linear-gradient(rgba(60,130,220,.08) 1px,transparent 1px) 0 0/34px 34px,
    linear-gradient(90deg,rgba(60,130,220,.08) 1px,transparent 1px) 0 0/34px 34px,
    radial-gradient(ellipse at 50% 35%,rgba(0,200,210,.12),transparent 65%),#050b16}
.cover-empty span{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#6f86a6}
html[dir="rtl"] .cover-empty span{letter-spacing:0}
.project-card.has-cover .cover-empty{display:none}
.project-card .service-photo{opacity:.9}
.card-arrow{position:absolute;inset-inline-end:18px;bottom:20px}

/* empty state */
.empty-box{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:70px 24px;border:1px dashed rgba(120,170,240,.32);border-radius:8px;background:rgba(5,14,30,.55)}
.empty-box .empty-icon{font-size:28px;color:#4d78b3}
.empty-box p{margin:0;font-size:13px;color:#9db0ca;letter-spacing:.04em}

/* gallery */
.gallery-grid{columns:3;column-gap:16px}
.g-item{position:relative;display:block;width:100%;margin:0 0 16px;padding:0;break-inside:avoid;cursor:zoom-in;overflow:hidden;
  border:1px solid rgba(49,111,190,.5);border-radius:6px;background:#061225;
  opacity:0;transform:translateY(34px) scale(.965);filter:blur(6px);
  transition:opacity .8s cubic-bezier(.2,.75,.2,1),transform .8s cubic-bezier(.2,.75,.2,1),filter .8s,border-color .3s,box-shadow .3s;
  transition-delay:calc(var(--i,0)*90ms)}
.g-item.in{opacity:1;transform:none;filter:none}
.g-item img{display:block;width:100%;height:auto;transition:transform .7s cubic-bezier(.2,.75,.2,1)}
.g-item:hover{border-color:rgba(54,200,230,.85);box-shadow:0 0 22px rgba(0,170,220,.22);transition-delay:0s}
.g-item:hover img{transform:scale(1.05)}
.g-item:focus-visible{outline:2px solid #35d0e6;outline-offset:3px}
.g-zoom{position:absolute;inset-inline-end:12px;top:12px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(2,6,14,.7);border:1px solid rgba(255,255,255,.3);font-size:18px;line-height:1;opacity:0;transform:scale(.8);transition:.3s;backdrop-filter:blur(6px)}
.g-item:hover .g-zoom,.g-item:focus-visible .g-zoom{opacity:1;transform:none}
.gallery-loading{display:flex;gap:12px;justify-content:center;padding:60px 0;column-span:all}
.gallery-loading span{width:9px;height:9px;border-radius:50%;background:#35d0e6;animation:galDot 1s ease-in-out infinite}
.gallery-loading span:nth-child(2){animation-delay:.15s}.gallery-loading span:nth-child(3){animation-delay:.3s}
@keyframes galDot{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)}}

/* lightbox */
body.lb-lock{overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;direction:ltr;background:rgba(1,4,10,.96);backdrop-filter:blur(10px);opacity:0;transition:opacity .25s}
.lightbox[hidden]{display:none}
.lightbox.open{opacity:1}
.lb-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px max(16px,2vw);background:linear-gradient(180deg,rgba(0,0,0,.65),transparent)}
.lb-count{font-size:12px;letter-spacing:.2em;color:#b8c6dc;font-variant-numeric:tabular-nums}
.lb-tools{display:flex;align-items:center;gap:8px}
.lb-btn,.lb-zoomlabel{height:42px;min-width:42px;display:grid;place-items:center;padding:0;color:#f3f5f8;background:rgba(10,24,48,.75);border:1px solid rgba(120,170,240,.35);border-radius:50%;cursor:pointer;transition:.25s}
.lb-btn svg{width:20px;height:20px}
.lb-zoomlabel{border-radius:21px;padding:0 12px;font:500 12px/1 "DM Sans",Arial,sans-serif;letter-spacing:.04em;min-width:58px}
.lb-btn:hover,.lb-zoomlabel:hover{border-color:#35d0e6;background:rgba(0,70,110,.7);box-shadow:0 0 16px rgba(0,190,230,.25)}
.lb-btn:focus-visible,.lb-zoomlabel:focus-visible{outline:2px solid #35d0e6;outline-offset:2px}
.lb-sep{width:1px;height:24px;background:rgba(255,255,255,.18);margin:0 4px}
.lightbox.single [data-a="prev"],.lightbox.single [data-a="next"]{display:none}
.lb-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;cursor:zoom-in;padding:0 max(10px,2vw) 20px}
.lightbox.zoomed .lb-stage{cursor:grab}
.lb-stage.panning{cursor:grabbing}
.lb-img{max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;border-radius:3px;box-shadow:0 20px 70px rgba(0,0,0,.6);transition:opacity .25s,transform .12s ease-out;will-change:transform}
.lb-stage.panning .lb-img{transition:opacity .25s}
.lb-img.loading{opacity:.15}

/* contact footer box */
.page-footer{display:flex;justify-content:center;padding-top:90px;padding-bottom:50px}
.contact-box{width:min(760px,100%);padding:22px 24px 24px;border:1px solid transparent;border-radius:14px;
  background:linear-gradient(#02060e,#02060e) padding-box,linear-gradient(135deg,#00fff0,#006dff,#00d8c8) border-box;
  box-shadow:0 0 24px rgba(0,205,220,.16),0 0 60px rgba(0,100,255,.08)}
.contact-box-title{margin:0 0 16px;text-align:center;font-size:10px;letter-spacing:.3em;color:#8fa3c0}
html[dir="rtl"] .contact-box-title{letter-spacing:0;font-size:12px}
.contact-box-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cb-link{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid rgba(120,170,240,.22);border-radius:9px;background:rgba(6,18,38,.55);transition:.3s;min-width:0}
.cb-link:hover{border-color:#35d0e6;background:rgba(0,60,100,.45);transform:translateY(-2px)}
.cb-ico{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(120,170,240,.35);font-size:12px;color:#d8e6fb}
.cb-ico svg{width:16px;height:16px}
.cb-text{display:flex;flex-direction:column;min-width:0;line-height:1.4}
.cb-text small{font-size:8px;letter-spacing:.2em;color:#7f93b0}
html[dir="rtl"] .cb-text small{letter-spacing:0;font-size:10px}
.cb-text span{font-size:12px;color:#eef3fb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:start}
html[dir="rtl"] .cb-text span{text-align:right}

@media(max-width:1000px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-grid{columns:2}}
@media(max-width:650px){
  .page-section{padding-top:50px}
  .project-grid{grid-template-columns:1fr}.project-card{min-height:300px}
  .gallery-grid{columns:2;column-gap:10px}.g-item{margin-bottom:10px}
  .contact-box-grid{grid-template-columns:1fr}
  .page-footer{padding-top:60px}
  .lb-top{padding:10px 10px}.lb-tools{gap:5px}.lb-btn{height:38px;min-width:38px}.lb-zoomlabel{height:38px;min-width:50px;padding:0 8px}.lb-sep{display:none}
  .lb-count{font-size:11px;letter-spacing:.1em}
}
@media(max-width:380px){.lb-zoomlabel{display:none}}
@media(prefers-reduced-motion:reduce){.g-item{opacity:1;transform:none;filter:none;transition:none}}

/* The site has a global "white pill button" rule (button:not(.menu-toggle){background:#fff!important…}).
   Gallery tiles are buttons too, so they must opt out explicitly. */
.gallery-grid button.g-item{background:#061225!important;color:#fff!important;border:1px solid rgba(49,111,190,.5)!important;border-radius:6px;box-shadow:none;font-weight:inherit}
.gallery-grid button.g-item:hover{background:#061225!important;border-color:rgba(54,200,230,.85)!important;box-shadow:0 0 22px rgba(0,170,220,.22)!important}
.gallery-grid button.g-item .g-zoom{color:#fff}

/* plain page title block (replaces the big home hero on inner pages) */
.page-head{padding-top:clamp(52px,9vh,92px);padding-bottom:6px}
.page-head-copy{max-width:780px}
.page-head h1{font:400 clamp(40px,6vw,84px)/1.02 "Playfair Display",serif;letter-spacing:-.05em;text-transform:uppercase;margin:14px 0 20px;color:#fff}
.page-head-desc{max-width:540px;margin:0 0 26px;font-size:14px;line-height:1.8;color:#b4bfd4}
.page-head-copy:after{content:"";display:block;height:1px;margin-top:44px;width:min(100%,1240px);background:linear-gradient(90deg,rgba(0,229,220,.55),rgba(0,104,255,.35),transparent)}
html[dir="rtl"] .page-head-copy{text-align:right}
html[dir="rtl"] .page-head-copy:after{background:linear-gradient(270deg,rgba(0,229,220,.55),rgba(0,104,255,.35),transparent)}

/* "All services / All projects" link: same understated look as EXPLORE PORTFOLIO on the home hero */
.page-head .text-link.back-link{
  display:inline-flex!important;align-items:center!important;gap:14px!important;
  padding:0 0 10px!important;border:0!important;border-bottom:1px solid rgba(0,238,224,.72)!important;border-radius:0!important;
  background:transparent!important;color:#fff!important;box-shadow:none!important;
  font-size:10px!important;font-weight:500!important;letter-spacing:.2em!important;text-decoration:none!important;
  transition:color .25s,border-color .25s,gap .25s!important}
.page-head .text-link.back-link:before{color:#00eee0;font-size:16px;line-height:1}
.page-head .text-link.back-link:hover{background:transparent!important;border-bottom-color:#087bff!important;box-shadow:0 5px 16px -12px rgba(0,238,224,.8)!important;gap:20px!important}
html[dir="rtl"] .page-head .text-link.back-link{letter-spacing:0!important;font-size:12px!important}