/* ==========================================
   SHOOTIX — EDITORIAL DARK REDESIGN v2
   Zigzag services + tura.sa portfolio
   ========================================== */

:root {
    --clr-bg:         #0A1428;
    --clr-bg-2:       #10223E;
    --clr-bg-3:       #162C4D;
    --clr-navy:       #1A2B4C;
    --clr-cream:      #F8F5E6;
    --clr-cream-soft: #E8E3CE;
    --clr-cream-dim:  #8C8B7F;
    --clr-accent:     #C5A059;
    --clr-border:     rgba(248, 245, 230, 0.12);
    --clr-border-str: rgba(248, 245, 230, 0.25);
    --clr-beige:      var(--clr-cream);
    --clr-gold:       var(--clr-accent);
    --clr-white:      var(--clr-cream);
    --clr-gray:       var(--clr-cream-soft);
    --clr-dark-gray:  var(--clr-cream-soft);
    --clr-black:      var(--clr-bg);
    --font-arabic: 'Cairo', sans-serif;
    --font-latin:  'Montserrat', sans-serif;
    --font-display: 'Lora', 'Cairo', serif;
    --tr-fast:   0.2s ease;
    --tr-normal: 0.35s cubic-bezier(.4, 0, .2, 1);
    --tr-slow:   0.65s cubic-bezier(.4, 0, .2, 1);
    --shadow-sm:   0 4px 12px rgba(0,0,0,0.3);
    --shadow-md:   0 10px 30px rgba(0,0,0,0.45);
    --shadow-lg:   0 25px 60px rgba(0,0,0,0.55);
    --shadow-glow: 0 0 40px rgba(197,160,89,0.15);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;width:100%;background-color:var(--clr-bg)}
body{font-family:var(--font-arabic);background-color:var(--clr-bg);color:var(--clr-cream-soft);line-height:1.65;overflow-x:hidden;width:100%;position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{text-decoration:none;color:inherit;transition:var(--tr-normal)}
ul{list-style:none}
img{max-width:100%;display:block}
.container{width:90%;max-width:1280px;margin:0 auto;position:relative}

h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;color:var(--clr-cream)}
.text-navy{color:var(--clr-cream)!important}
.text-beige{color:var(--clr-cream)!important}
.text-gold{color:var(--clr-accent)!important}
.text-center{text-align:center}

.section-title{
    font-family:var(--font-display);
    font-size:clamp(2rem,4.2vw,3.5rem);
    font-weight:400;letter-spacing:-0.01em;
    line-height:1.15;color:var(--clr-cream);margin-bottom:1rem;
}
.title-underline{width:48px;height:1px;background-color:var(--clr-accent);margin:1.2rem 0 2rem}
.text-center-underline{margin-left:auto;margin-right:auto}

/* EYEBROW — ALWAYS start-aligned (left LTR, right RTL) */
.section-eyebrow{
    display:flex;align-items:center;gap:1rem;margin-bottom:2.5rem;
    color:var(--clr-cream-dim);font-family:var(--font-latin);
    font-size:0.82rem;letter-spacing:0.35em;text-transform:uppercase;font-weight:500;
    justify-content:flex-start;
}
.section-eyebrow .num{font-family:var(--font-display);font-size:2.4rem;line-height:1;color:var(--clr-cream);font-weight:400;letter-spacing:0;font-style:italic}
.section-eyebrow .bar{flex:0 0 60px;height:1px;background-color:var(--clr-border-str)}

/* ==================== BUTTONS ==================== */
.btn{display:inline-block;padding:14px 32px;border:1px solid transparent;font-family:var(--font-latin);font-weight:500;font-size:0.9rem;letter-spacing:0.15em;text-transform:uppercase;cursor:pointer;transition:var(--tr-normal);border-radius:0;text-align:center}
.btn-icon{margin-inline-end:8px}
.btn-primary{background-color:var(--clr-cream);color:var(--clr-bg);border-color:var(--clr-cream)}
.btn-primary:hover{background-color:transparent;color:var(--clr-cream);border-color:var(--clr-cream)}
.btn-primary-light{background-color:var(--clr-cream);color:var(--clr-bg);border-color:var(--clr-cream)}
.btn-primary-light:hover{background-color:transparent;color:var(--clr-cream)}
.btn-outline-light{background-color:transparent;color:var(--clr-cream);border-color:rgba(248,245,230,0.4)}
.btn-outline-light:hover{background-color:var(--clr-cream);color:var(--clr-bg);border-color:var(--clr-cream)}
.btn-show-more{background-color:transparent;color:var(--clr-cream-soft);border-color:var(--clr-border-str);font-size:0.78rem;padding:12px 28px}
.btn-show-more:hover{background-color:var(--clr-cream);color:var(--clr-bg);border-color:var(--clr-cream)}

/* ==================== WHATSAPP ==================== */
.floating-wa{position:fixed;bottom:28px;inset-inline-end:28px;width:56px;height:56px;background:#25D366;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.7rem;z-index:999;box-shadow:0 8px 25px rgba(37,211,102,0.35);animation:wa-pulse 2s infinite}
.floating-wa:hover{transform:scale(1.08)}
@keyframes wa-pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,0.55)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ==================== NAVBAR ==================== */
.navbar{position:fixed;top:0;left:0;width:100%;padding:22px 0;z-index:1000;transition:background-color var(--tr-normal),padding var(--tr-normal);border-bottom:1px solid transparent}
.navbar.scrolled{background-color:rgba(10,20,40,0.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:14px 0;border-bottom-color:var(--clr-border)}
.nav-container{width:92%;max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}
.logo img{height:46px;width:auto;max-width:180px;object-fit:contain;border-radius:4px;transition:var(--tr-normal);filter:brightness(1.05)}
.nav-links{display:flex;gap:34px;flex:1;justify-content:center}
.nav-links a{color:var(--clr-cream-soft);font-family:var(--font-latin);font-weight:400;font-size:0.88rem;letter-spacing:0.1em;text-transform:uppercase;position:relative;padding:6px 0}
.nav-links a::after{content:'';position:absolute;bottom:0;inset-inline-end:0;width:0%;height:1px;background-color:var(--clr-accent);transition:var(--tr-normal)}
.nav-links a:hover,.nav-links a.active{color:var(--clr-cream)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta .btn{padding:10px 22px;font-size:0.78rem;background-color:transparent;color:var(--clr-cream);border-color:var(--clr-border-str)}
.nav-cta .btn:hover{background-color:var(--clr-cream);color:var(--clr-bg);border-color:var(--clr-cream)}
.navbar.scrolled .nav-cta .btn{background-color:var(--clr-cream);color:var(--clr-bg);border-color:var(--clr-cream)}
.navbar.scrolled .nav-cta .btn:hover{background-color:transparent;color:var(--clr-cream)}
.mobile-actions{display:none;align-items:center;gap:10px}
/* Sized explicitly rather than by its icon glyph: the button keeps a full
   44px tap target even if the icon font is slow or fails to load, so the
   menu can never become unopenable on a phone. */
.mobile-menu-btn{
    font-size:1.4rem;color:var(--clr-cream);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin-inline-end:-10px;
    -webkit-tap-highlight-color:transparent;transition:color var(--tr-fast);
}
.mobile-menu-btn:active{color:var(--clr-accent)}
.mobile-actions .lang-switch{font-family:var(--font-latin);font-weight:500;font-size:0.85rem;letter-spacing:0.1em;color:var(--clr-cream)}
.lang-switch i{margin-inline-end:4px;font-size:0.9em}

/* ==================== HERO ==================== */
/* 100dvh (with a 100vh fallback) so mobile browsers' collapsing address bar
   can't leave the hero taller than the screen and push the copy off-centre. */
.hero{position:relative;height:100vh;height:100dvh;min-height:600px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.video-background{position:absolute;inset:0;z-index:1;overflow:hidden}
.video-background video{width:100%;height:100%;object-fit:cover}
/* <picture> is inline by default, which would collapse the still's height:100%. */
.video-background picture{display:block;width:100%;height:100%}
/* Hero still — the studio's own work, drifting slowly so the frame breathes
   without the weight (or the mobile autoplay problems) of a background video. */
.hero-still{width:100%;height:100%;object-fit:cover;will-change:transform;animation:hero-drift 26s ease-in-out infinite alternate}
@keyframes hero-drift{
    from{transform:scale(1.04) translate3d(0,0,0)}
    to{transform:scale(1.13) translate3d(0,-1.5%,0)}
}
.video-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,40,0.55) 0%,rgba(10,20,40,0.75) 60%,rgba(10,20,40,0.95) 100%),linear-gradient(135deg,rgba(26,43,76,0.5) 0%,rgba(10,20,40,0.7) 100%)}
/* No padding-top: the hero is a centring flex container, so top padding only
   shoves the copy below the optical centre and opens a gap under the nav. */
.hero-content{position:relative;z-index:2;text-align:center;width:92%;max-width:960px}
/* line-height 1.3 (not 1.15): Arabic ascenders plus the italic shear need the
   extra leading or the glyph tops clip against the line box. */
.hero-title{font-family:var(--font-display);color:var(--clr-cream);font-size:clamp(2.5rem,6vw,5rem);font-weight:400;margin-bottom:1.6rem;line-height:1.3;letter-spacing:-0.01em}
.hero-title .highlight{color:var(--clr-cream);font-style:italic;font-weight:400}
.hero-subtitle{color:var(--clr-cream-soft);font-family:var(--font-latin);font-size:clamp(1rem,1.4vw,1.15rem);max-width:620px;margin:0 auto 2.8rem;line-height:1.7;font-weight:300}
.hero-buttons{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}

/* ==================== SECTION SEAM ==================== */
/* The hero/about boundary is a hard cut: solid dark hero meeting a bright
   photo. Two halves blend it, both tinted with the page background rather
   than black — black over navy reads as a dirty smudge, whereas the bg colour
   disappears into the hero and only does visible work against the photo.
   Each half carries many stops to approximate an ease curve; a 3-stop linear
   gradient leaves visible kinks where the slope changes abruptly.

   This half rides the tail of the hero. margin-top cancels its height exactly,
   so it adds no scroll height, and it sits entirely ABOVE the seam — it never
   reaches into .about, so it cannot dim that section's copy. */
.section-seam-fade{
    position:relative;height:240px;margin-top:-240px;z-index:1;pointer-events:none;
    background:linear-gradient(to bottom,
        rgba(10,20,40,0) 0%,
        rgba(10,20,40,0.08) 20%,
        rgba(10,20,40,0.22) 35%,
        rgba(10,20,40,0.42) 50%,
        rgba(10,20,40,0.62) 62%,
        rgba(10,20,40,0.79) 73%,
        rgba(10,20,40,0.91) 83%,
        rgba(10,20,40,0.98) 92%,
        rgba(10,20,40,1) 100%);
}

/* ==================== ABOUT ==================== */
.about{padding:96px 0 84px;background-color:var(--clr-bg);position:relative;overflow:hidden}
/* Second half of the seam blend (see .section-seam-fade). Was a 1px border,
   which was itself part of the hard edge. z-index 2 clears the photo and its
   scrim but stays under the copy at z-index 3, so the eyebrow and body text
   read at full strength instead of being dimmed by the fade. */
.about.overlay-section::before{
    content:'';position:absolute;top:0;left:0;right:0;height:240px;z-index:2;pointer-events:none;
    background:linear-gradient(to bottom,
        rgba(10,20,40,1) 0%,
        rgba(10,20,40,0.98) 8%,
        rgba(10,20,40,0.91) 17%,
        rgba(10,20,40,0.79) 27%,
        rgba(10,20,40,0.62) 38%,
        rgba(10,20,40,0.42) 50%,
        rgba(10,20,40,0.22) 65%,
        rgba(10,20,40,0.08) 80%,
        rgba(10,20,40,0) 100%);
}
/* .container is position:relative globally, which would make IT the containing
   block for the bleeding photo and pin the image to the 1280px column. Opt this
   one out so the image resolves against .about and spans the full section, and
   lift the copy above it instead. */
.about .container{position:static}
.about .section-eyebrow,.about .about-text{position:relative;z-index:3}
.layout-2-col{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center}
.about-text p{color:var(--clr-cream-soft);margin-bottom:1.2rem;font-size:1rem;line-height:1.85;font-weight:300}
.about-text strong{color:var(--clr-cream);font-weight:600}

/* Client logo strip. Placeholder slots today; the img rules below take over
   untouched the moment real logos are dropped in. */
.client-strip{margin-top:2.6rem;padding-top:1.8rem;border-top:1px solid var(--clr-border)}
.client-logos{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.client-logo{
    display:flex;align-items:center;justify-content:center;
    min-width:150px;height:72px;padding:0 16px;
    font-family:var(--font-latin);font-size:0.68rem;letter-spacing:0.12em;
    color:var(--clr-cream-dim);white-space:nowrap;
}
.client-logos img{height:60px;width:auto;padding:0;border:0;background:none}
/* The about photo is no longer a card in its column — it bleeds across the
   whole section and runs behind the copy. The column stays in the grid
   (position:static) purely to reserve the space that sets the section height;
   the image itself is positioned against .about, so it spans edge to edge. */
.about-image{position:static;aspect-ratio:4/5}
.about-image img,.about-image .rounded-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;filter:saturate(0.85) brightness(0.9);z-index:0}
/* The scrim: transparent over the photo, ramping to near-solid under the text
   so the copy keeps its contrast instead of fighting the image. */
.image-glow{position:absolute;inset:0;pointer-events:none;z-index:1}
html[dir="rtl"] .image-glow{background:linear-gradient(to right,rgba(10,20,40,0.28) 0%,rgba(10,20,40,0.45) 26%,rgba(10,20,40,0.88) 52%,rgba(10,20,40,0.96) 72%,rgba(10,20,40,0.97) 100%)}
html[dir="ltr"] .image-glow{background:linear-gradient(to left,rgba(10,20,40,0.28) 0%,rgba(10,20,40,0.45) 26%,rgba(10,20,40,0.88) 52%,rgba(10,20,40,0.96) 72%,rgba(10,20,40,0.97) 100%)}

/* ==================== SERVICES — ZIGZAG TIMELINE ==================== */
.services{padding:96px 0 84px;background-color:var(--clr-bg-2);position:relative;border-top:1px solid var(--clr-border);border-bottom:1px solid var(--clr-border)}

.timeline{position:relative;max-width:900px;margin:4rem auto 0;padding:20px 0}
.timeline-line{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:2px;background:linear-gradient(180deg,transparent 0%,var(--clr-accent) 8%,var(--clr-accent) 92%,transparent 100%);z-index:0}
.timeline-item{position:relative;width:50%;padding:0 0 60px;z-index:1}
.timeline-item.left{padding-inline-end:50px;text-align:end}
.timeline-item.right{margin-inline-start:50%;padding-inline-start:50px;text-align:start}

.timeline-dot{position:absolute;top:20px;width:14px;height:14px;background-color:var(--clr-accent);border:3px solid var(--clr-bg-2);border-radius:50%;z-index:2}
.timeline-item.left .timeline-dot{inset-inline-end:-7px}
.timeline-item.right .timeline-dot{inset-inline-start:-7px}

.timeline-content{background-color:var(--clr-cream);padding:36px 32px;border-radius:16px;transition:transform var(--tr-normal),box-shadow var(--tr-normal);position:relative}
.timeline-content:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}

.service-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--clr-cream);background-color:var(--clr-navy);border-radius:50%;margin-bottom:1.5rem}
.timeline-item.left .service-icon{margin-inline-start:auto}
.service-title{font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--clr-navy);margin-bottom:0.8rem;line-height:1.25}
.service-desc{color:var(--clr-navy);font-size:0.95rem;line-height:1.7;font-weight:300;margin-bottom:1.2rem;opacity:0.75}
.service-badge{display:inline-block;font-family:var(--font-latin);font-size:0.72rem;color:var(--clr-navy);letter-spacing:0.15em;text-transform:uppercase;padding:6px 14px;border:1px solid rgba(26,43,76,0.2);border-radius:20px;opacity:0.7}

/* ==================== PORTFOLIO — TURA.SA CATEGORIES ==================== */
.portfolio{padding:96px 0 44px;background-color:var(--clr-bg)}
.portfolio-category{margin-bottom:100px;position:relative}
.portfolio-cat-header{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:flex-start;margin-bottom:50px;padding-bottom:40px;border-bottom:1px solid var(--clr-border)}
.portfolio-cat-title{font-family:var(--font-display);font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:400;color:var(--clr-cream);line-height:1.2}
.portfolio-cat-desc{color:var(--clr-cream-soft);font-size:0.95rem;line-height:1.85;font-weight:300}

.portfolio-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:28px}
.portfolio-card{display:block;position:relative;overflow:hidden;cursor:pointer}
.portfolio-card-img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform var(--tr-slow)}
.portfolio-card:hover .portfolio-card-img{transform:scale(1.06)}
.portfolio-card-play{display:none}
.portfolio-card-title{margin-top:12px;font-family:var(--font-display);font-size:1rem;font-weight:400;color:var(--clr-cream);line-height:1.3}
.portfolio-cat-more{text-align:center;padding-top:20px;border-top:1px solid var(--clr-border)}

/* ==================== TESTIMONIALS ==================== */
.testimonials{padding:96px 0 84px;background-color:var(--clr-bg-2);position:relative;overflow:hidden;border-top:1px solid var(--clr-border);border-bottom:1px solid var(--clr-border)}
.testimonials-pattern{position:absolute;inset:0;background-image:radial-gradient(circle at 20% 30%,rgba(197,160,89,0.06),transparent 50%),radial-gradient(circle at 80% 70%,rgba(197,160,89,0.04),transparent 50%);pointer-events:none}
.relative-z{position:relative;z-index:2}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:4rem}
.testimonial-card{background-color:var(--clr-bg);border:1px solid var(--clr-border);padding:40px 34px;transition:var(--tr-normal);position:relative}
.testimonial-card::before{content:'\201C';position:absolute;top:10px;inset-inline-end:22px;font-family:var(--font-display);font-size:5rem;line-height:1;color:var(--clr-accent);opacity:0.25}
.testimonial-card:hover{border-color:var(--clr-border-str);transform:translateY(-4px)}
.stars{color:var(--clr-accent);margin-bottom:1.2rem;font-size:0.85rem;letter-spacing:2px}
.quote{color:var(--clr-cream-soft);font-size:0.98rem;line-height:1.85;font-weight:300;font-style:italic;margin-bottom:1.8rem}
.client-info{display:flex;align-items:center;gap:14px;padding-top:1.2rem;border-top:1px solid var(--clr-border)}
.client-details{display:flex;flex-direction:column}
.client-name{color:var(--clr-cream);font-size:0.98rem;font-weight:600;margin-bottom:2px}
.client-role{color:var(--clr-cream-dim);font-size:0.78rem;letter-spacing:0.1em;text-transform:uppercase;font-family:var(--font-latin)}

/* ==================== CONTACT ==================== */
.contact{padding:96px 0 84px;background-color:var(--clr-bg)}
.contact-wrapper{max-width:860px;margin:0 auto;padding:64px;background-color:var(--clr-bg-2);border:1px solid var(--clr-border)}
.contact-header{margin-bottom:3rem}
.contact-subtitle{color:var(--clr-cream-soft);font-size:1rem;font-weight:300;margin-top:1rem}
.contact-form{display:flex;flex-direction:column;gap:20px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-group{display:flex;flex-direction:column}
.form-group label{font-family:var(--font-latin);font-size:0.72rem;color:var(--clr-cream-dim);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:0.6rem}
.form-group input,.form-group select,.form-group textarea{background-color:transparent;border:none;border-bottom:1px solid var(--clr-border-str);padding:12px 2px;color:var(--clr-cream);font-family:var(--font-arabic);font-size:1rem;outline:none;transition:var(--tr-normal);width:100%}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(248,245,230,0.35)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-bottom-color:var(--clr-accent)}
.form-group textarea{resize:vertical;min-height:110px}
.form-group select option{background-color:var(--clr-bg);color:var(--clr-cream)}
.contact-form .btn{align-self:center;margin-top:1.5rem;padding:16px 48px}

/* ==================== FOOTER ==================== */
.footer{background-color:var(--clr-bg);padding:64px 0 0;border-top:1px solid var(--clr-border)}
.footer-grid{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:48px;flex-wrap:wrap;gap:40px}
.footer-brand{display:flex;flex-direction:column;gap:16px;max-width:380px}
.footer-logo-img{height:48px;width:auto;align-self:flex-start;filter:brightness(1.05)}
.footer-tagline{color:var(--clr-cream-dim);font-size:0.92rem;line-height:1.75;font-weight:300}
.footer-email{align-self:flex-start;font-family:var(--font-latin);font-size:0.92rem;color:var(--clr-cream-soft);letter-spacing:0.02em;transition:var(--tr-normal);direction:ltr}
.footer-email:hover{color:var(--clr-accent)}
.footer-contact{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.footer-heading{font-family:var(--font-latin);font-size:0.75rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--clr-accent)}
.footer-phone{font-family:var(--font-latin);font-size:1.05rem;color:var(--clr-cream-soft);letter-spacing:0.02em;transition:var(--tr-normal);direction:ltr}
.footer-phone:hover{color:var(--clr-accent)}
.footer-social{display:flex;gap:14px}
.footer-social a{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid var(--clr-border);border-radius:50%;color:var(--clr-cream-soft);font-size:1rem;transition:var(--tr-normal)}
.footer-social a:hover{background-color:var(--clr-accent);color:var(--clr-bg);border-color:var(--clr-accent)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:26px 0;border-top:1px solid var(--clr-border);color:var(--clr-cream-dim);font-size:0.8rem;letter-spacing:0.08em;font-family:var(--font-latin);flex-wrap:wrap;gap:16px}

/* ==================== PROJECT DETAIL PAGES ==================== */
.project-hero{position:relative;min-height:70vh;display:flex;align-items:flex-end;padding:180px 0 80px;overflow:hidden}
.project-hero-bg{position:absolute;inset:0;z-index:1}
.project-hero-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(0.55)}
.project-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,40,0.5),rgba(10,20,40,0.95));z-index:1}
.project-hero-content{position:relative;z-index:2;width:90%;max-width:1100px;margin:0 auto}
.project-meta{font-family:var(--font-latin);font-size:0.78rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--clr-accent);margin-bottom:1.5rem}
.project-title{font-family:var(--font-display);font-size:clamp(2.4rem,5vw,4.2rem);font-weight:400;color:var(--clr-cream);line-height:1.1;margin-bottom:1.2rem}
.project-tagline{color:var(--clr-cream-soft);font-size:1.1rem;font-weight:300;max-width:640px;line-height:1.7}

.project-details{padding:88px 0 60px;background-color:var(--clr-bg)}
.project-details-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:flex-start}
.project-info-list{display:flex;flex-direction:column;gap:1.5rem}
.project-info-item{display:flex;flex-direction:column;padding-bottom:1.2rem;border-bottom:1px solid var(--clr-border)}
.project-info-label{font-family:var(--font-latin);font-size:0.72rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--clr-cream-dim);margin-bottom:0.4rem}
.project-info-value{color:var(--clr-cream);font-size:1.05rem;font-weight:500}
.project-description p{color:var(--clr-cream-soft);font-size:1rem;line-height:1.9;font-weight:300;margin-bottom:1.2rem}

.process-section{padding:88px 0;background-color:var(--clr-bg-2);border-top:1px solid var(--clr-border);border-bottom:1px solid var(--clr-border)}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background-color:var(--clr-border);margin-top:4rem;border:1px solid var(--clr-border)}
.process-step{background-color:var(--clr-bg-2);padding:48px 40px;transition:var(--tr-normal);min-height:200px;display:flex;flex-direction:column;justify-content:flex-start}
.process-step:hover{background-color:var(--clr-bg-3)}
.process-num{font-family:var(--font-display);font-size:2.4rem;font-weight:400;color:var(--clr-accent);line-height:1;font-style:italic;margin-bottom:1.8rem;display:block}
.process-step-title{font-family:var(--font-display);font-size:1.35rem;font-weight:400;color:var(--clr-cream);line-height:1.3}

.project-gallery{padding:88px 0;background-color:var(--clr-bg-2);border-top:1px solid var(--clr-border)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:60px}
.gallery-grid img{width:100%;height:360px;object-fit:cover;transition:var(--tr-slow)}
.gallery-grid img:hover{transform:scale(1.02)}
.mt-5{margin-top:3rem}

/* ==================== RESPONSIVE ==================== */
@media screen and (max-width:1024px){
    .layout-2-col{grid-template-columns:1fr;gap:60px}
    /* Stacked. The spacer moves ABOVE the copy so the photo reads as a clear
       band at the top of the section instead of only surfacing at the bottom;
       the scrim then ramps up behind the text underneath it. */
    .about-image{order:-1;aspect-ratio:16/10}
    html[dir="rtl"] .image-glow,html[dir="ltr"] .image-glow{
        background:linear-gradient(to bottom,rgba(10,20,40,0.34) 0%,rgba(10,20,40,0.30) 26%,rgba(10,20,40,0.62) 36%,rgba(10,20,40,0.90) 46%,rgba(10,20,40,0.96) 60%,rgba(10,20,40,0.97) 100%);
    }
    .portfolio-row{grid-template-columns:repeat(2,1fr)}
    .portfolio-cat-header{grid-template-columns:1fr;gap:20px}
    .testimonials-grid{grid-template-columns:1fr;gap:16px}
    .project-details-grid{grid-template-columns:1fr;gap:48px}
    .gallery-grid{grid-template-columns:repeat(2,1fr)}
    .process-grid{grid-template-columns:repeat(2,1fr)}
}
@media screen and (max-width:900px){
    .navbar{background-color:rgba(10,20,40,0.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:14px 0!important;border-bottom:1px solid var(--clr-border)}
    /* The open menu is one flowing column: nav links and the CTA wrap onto
       their own rows under the logo. No absolute positioning and no magic
       pixel offset, so the panel stays correct whatever the link count,
       font size or language. */
    .nav-container{flex-wrap:wrap;row-gap:0}
    .nav-links,.nav-cta{display:none}
    .mobile-actions{display:flex}
    .navbar.active{background-color:var(--clr-bg);border-bottom-color:var(--clr-border);max-height:100dvh;overflow-y:auto}
    .navbar.active .nav-links{
        display:flex;flex-direction:column;flex-basis:100%;width:100%;
        order:3;gap:4px;padding:22px 0 8px;margin-top:14px;text-align:center;
        border-top:1px solid var(--clr-border);
    }
    .navbar.active .nav-links a{padding:13px 0;font-size:0.95rem}
    .navbar.active .nav-links a::after{inset-inline-start:50%;transform:translateX(-50%);inset-inline-end:auto}
    html[dir="rtl"] .navbar.active .nav-links a::after{transform:translateX(50%)}
    .navbar.active .nav-cta{display:block;flex-basis:100%;width:100%;order:4;padding-bottom:22px;text-align:center}
    .navbar.active .nav-cta .btn{display:block;width:100%}
    /* One full-width column — no 50px rail to indent past, so the cards sit
       centred instead of nudged off to one side. */
    .timeline-item,.timeline-item.left,.timeline-item.right{width:100%;margin-inline-start:0;padding-inline-start:0;padding-inline-end:0;text-align:start}
    .timeline-item.left .service-icon{margin-inline-start:0}
    /* The line and its dots only mean something next to the desktop zigzag;
       on one column they just float loose against the edge. */
    .timeline-line,.timeline-dot{display:none}
}
@media screen and (max-width:768px){
    .about,.services,.portfolio,.testimonials,.contact,.project-details,.project-gallery{padding:64px 0}
    .portfolio-row{grid-template-columns:repeat(2,1fr)}
    .form-row{grid-template-columns:1fr}
    .contact-wrapper{padding:32px 24px}
    /* Footer collapses to one centred column; the logo and email carry
       align-self:flex-start on desktop, so both need re-centring here. */
    .footer{padding-top:56px}
    .footer-grid{flex-direction:column;align-items:center;text-align:center;gap:30px;padding-bottom:34px}
    .footer-brand{align-items:center;max-width:34ch;gap:14px}
    .footer-logo-img{align-self:center}
    .footer-email{align-self:center}
    .footer-contact{align-items:center;gap:14px}
    /* Extra bottom room so the fixed WhatsApp button can't sit on the credit line. */
    .footer-bottom{flex-direction:column;text-align:center;gap:14px;padding:22px 0 92px}
    .footer-links{justify-content:center;gap:26px}
    .gallery-grid{grid-template-columns:1fr}
    .gallery-grid img{height:280px}
    .section-eyebrow .num{font-size:1.8rem}
    .hero-title{margin-bottom:1.1rem}
    .hero-subtitle{margin-bottom:2rem}
    .hero-buttons{gap:12px}
    .hero-buttons .btn{flex:1 1 auto;min-width:170px}
    .process-grid{grid-template-columns:1fr}
    .process-step{padding:36px 28px;min-height:auto}
}

html[dir="rtl"] .section-eyebrow{direction:rtl}
/* These classes are styled for tracked-out uppercase Latin micro-labels
   (font-latin + wide letter-spacing). Arabic text dropped into the same
   classes breaks cursive letter-joining under that spacing, rendering
   every letter isolated with visible gaps. Reset both on RTL pages. */
html[dir="rtl"] .section-eyebrow,
html[dir="rtl"] .btn,
html[dir="rtl"] .nav-links a,
html[dir="rtl"] .client-logo,
html[dir="rtl"] .client-role,
html[dir="rtl"] .form-group label,
html[dir="rtl"] .service-badge,
html[dir="rtl"] .footer-heading,
html[dir="rtl"] .footer-bottom,
html[dir="rtl"] .footer-links a,
html[dir="rtl"] .project-meta,
html[dir="rtl"] .project-info-label{
    font-family:var(--font-arabic);
    letter-spacing:normal;
}
/* Arabic service cards read right-to-left in BOTH timeline columns. The
   zigzag still alternates sides, but the copy inside a card never flips
   to left-aligned just because the card sits on the left. */
html[dir="rtl"] .timeline-item.left{text-align:start}
html[dir="rtl"] .timeline-item.left .service-icon{margin-inline-start:0}
html[dir="ltr"] body{font-family:var(--font-latin),var(--font-arabic)}
html[dir="ltr"] .quote{font-style:italic}
html[dir="ltr"] {--font-display: 'Montserrat', sans-serif}

/* ==================== LIGHTBOX GALLERY ==================== */
.gallery-grid img,.portfolio-row img,.portfolio-grid img{cursor:pointer}
.lightbox{
    position:fixed;inset:0;z-index:9999;
    background:rgba(5,10,20,0.92);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;
    transition:opacity 0.3s ease;
}
.lightbox.active{opacity:1;pointer-events:all}
.lightbox-img{
    max-width:90vw;max-height:88vh;
    object-fit:contain;
    border:1px solid var(--clr-border-str);
    transform:scale(0.92);
    transition:transform 0.35s cubic-bezier(.4,0,.2,1);
}
.lightbox.active .lightbox-img{transform:scale(1)}
.lightbox-close{
    position:absolute;top:24px;right:28px;
    width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;
    color:var(--clr-cream);font-size:1.4rem;
    border:1px solid var(--clr-border-str);
    background:rgba(10,20,40,0.6);
    cursor:pointer;transition:var(--tr-normal);z-index:10;
}
.lightbox-close:hover{background:var(--clr-cream);color:var(--clr-bg);border-color:var(--clr-cream)}
.lightbox-nav{
    position:absolute;top:50%;transform:translateY(-50%);
    width:48px;height:48px;
    display:flex;align-items:center;justify-content:center;
    color:var(--clr-cream);font-size:1.2rem;
    border:1px solid var(--clr-border-str);
    background:rgba(10,20,40,0.6);
    cursor:pointer;transition:var(--tr-normal);z-index:10;
}
.lightbox-nav:hover{background:var(--clr-cream);color:var(--clr-bg);border-color:var(--clr-cream)}
.lightbox-prev{left:24px}
.lightbox-next{right:24px}
.lightbox-counter{
    position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
    font-family:var(--font-latin);font-size:0.82rem;
    color:var(--clr-cream-dim);letter-spacing:0.2em;
}

/* ==========================================
   V3 — CINEMATIC LAYER
   Scroll progress, richer hovers.
   Same palette — more atmosphere.
   ========================================== */

::selection{background:var(--clr-accent);color:var(--clr-bg)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--clr-bg)}
::-webkit-scrollbar-thumb{background:var(--clr-bg-3);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--clr-accent)}

/* --- scroll progress hairline --- */
.scroll-progress{
    position:fixed;top:0;inset-inline-start:0;height:2px;width:0%;
    background:linear-gradient(90deg,var(--clr-accent),rgba(197,160,89,0.4));
    z-index:2001;pointer-events:none;transition:width 0.1s linear;
}

/* background-clip:text clips to each line fragment's box, and italic Arabic
   glyphs overhang theirs — which sheared the leading "لا" / "بل" off every
   line. clone gives each fragment its own padded box to paint into. */
.hero-title .highlight{
    background:linear-gradient(120deg,var(--clr-cream) 60%,var(--clr-accent) 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
    padding-inline:0.14em;
}

@media (prefers-reduced-motion:reduce){
    .hero-still{animation:none}
    *,*::before,*::after{transition-duration:0.01ms!important}
    html{scroll-behavior:auto}
}

/* --- portfolio cards: title reveal + gold line --- */
.portfolio-card{isolation:isolate}
.portfolio-card::after{
    content:'';position:absolute;inset-inline-start:0;bottom:0;width:0%;height:2px;
    background:var(--clr-accent);transition:width var(--tr-slow);z-index:2;
}
.portfolio-card:hover::after{width:100%}
.portfolio-card-title{position:relative;padding-inline-start:0;transition:padding var(--tr-normal),color var(--tr-normal)}
.portfolio-card:hover .portfolio-card-title{padding-inline-start:12px;color:var(--clr-accent)}

/* --- process steps: gold hover accent --- */
.process-step{position:relative;overflow:hidden}
.process-step::before{
    content:'';position:absolute;top:0;inset-inline-start:0;width:2px;height:0%;
    background:var(--clr-accent);transition:height var(--tr-normal);
}
.process-step:hover::before{height:100%}
.process-step:hover .process-num{transform:translateY(-4px);display:inline-block;transition:transform var(--tr-normal)}

/* --- reveal titles --- */
.section-title{position:relative}

/* --- footer utility links (staff / admin) --- */
.footer-links{display:flex;gap:22px;flex-wrap:wrap}
.footer-links a{
    font-family:var(--font-latin);font-size:0.72rem;letter-spacing:0.15em;
    text-transform:uppercase;color:var(--clr-cream-dim);
    padding-bottom:2px;border-bottom:1px solid transparent;
    transition:var(--tr-normal);
}
.footer-links a:hover{color:var(--clr-accent);border-bottom-color:var(--clr-accent)}

/* ==================== ADMIN-MANAGED IMAGES ====================
   Uploaded through the admin panel and injected at runtime.
   They fade in on decode so the portfolio never flashes a
   half-loaded frame while scrolling on a phone. */
.managed-img{opacity:0;transition:opacity .5s ease}
.managed-img.loaded{opacity:1}
@media (prefers-reduced-motion:reduce){.managed-img{opacity:1;transition:none}}