/* =========================================================
   Skills Decoration — Stylesheet v2.1
   Palette: Deep Navy · Teal · Cream-Teal
   Fonts:   Cinzel · Cormorant Garamond · Inter · Cairo
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400;1,500&family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Inter:wght@200;300;400;500;600;700&family=Great+Vibes&family=Cairo:wght@200;300;400;500;600;700&display=swap');

:root{
  --bg:#0E3C39;
  --bg-2:#F0FDFA;
  --bg-3:#0A2E2B;
  --panel:#134E4A;
  --panel-2:#175B57;
  --panel-cream:#E8F5F3;
  --panel-cream-2:#CCF0ED;
  --gold:#0D9488;
  --gold-2:#14B8A6;
  --gold-soft:rgba(13,148,136,.14);
  --gold-glow:rgba(13,148,136,.4);
  --royal:#134E4A;
  --royal-2:#0D9488;
  --charcoal:#78716C;
  --text:#F0FDFA;
  --text-dark:#134E4A;
  --muted:#8FB8B3;
  --muted-dark:#78716C;
  --border:rgba(13,148,136,.32);
  --border-2:rgba(240,253,250,.08);

  --border-dark:rgba(19,78,74,.14);
  --shadow:0 28px 80px rgba(0,0,0,.65);
  --shadow-soft:0 18px 50px rgba(19,78,74,.14);
  --radius:8px;
  --container:1320px;
  --font-sans:"Inter","Segoe UI",sans-serif;
  --font-display:"Cinzel","Playfair Display",serif;
  --font-serif:"Cormorant Garamond","Playfair Display",serif;
  --font-script:"Great Vibes","Cormorant Garamond",cursive;
  --font-ar:"Cairo","Tajawal",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.72;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.018em;
  font-weight:300;
}
body[dir="rtl"]{font-family:var(--font-ar)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}

.container{max-width:var(--container);margin:0 auto;padding:0 44px}

/* ---------- Page Transition Overlay ---------- */
#page-veil{
  position:fixed;inset:0;z-index:9999;
  background:var(--bg-3);
  pointer-events:none;
  opacity:0;transition:opacity .55s cubic-bezier(.4,0,.2,1);
}
#page-veil.entering{opacity:1}
#page-veil.leaving{opacity:0}

/* ---------- Typography ---------- */
h1,h2{font-family:var(--font-display);font-weight:500;letter-spacing:.08em;margin:0 0 .5em;line-height:1.1;text-transform:uppercase}
h3,h4{font-family:var(--font-sans);font-weight:300;letter-spacing:.1em;margin:0 0 .5em;line-height:1.2;text-transform:uppercase}
h1{font-size:clamp(2.2rem,5vw,4.2rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.7rem)}
h3{font-size:1.08rem;letter-spacing:.18em;font-weight:400}
.eyebrow{
  color:var(--gold);text-transform:uppercase;
  font-size:.68rem;letter-spacing:.42em;
  margin-bottom:1.4rem;display:inline-block;
  font-family:var(--font-sans);font-weight:600;
  position:relative;padding-left:36px;
}
.eyebrow::before{
  content:"";position:absolute;left:0;top:50%;
  width:24px;height:1px;background:var(--gold);
  transform:translateY(-50%);
}
body[dir="rtl"] .eyebrow{padding-left:0;padding-right:36px}
body[dir="rtl"] .eyebrow::before{left:auto;right:0}
.gold{color:var(--gold)}
.serif-italic{font-family:var(--font-script);font-style:normal;font-weight:400;color:var(--gold);text-transform:none;letter-spacing:.02em;line-height:1}
.muted{color:var(--muted);font-size:.93rem;line-height:1.8}

svg{display:inline-block;vertical-align:middle}
.ic svg,.icon svg,.dot svg,.circle svg,.arrow svg{width:100%;height:100%}

/* ---------- Navigation ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:18px 44px;
  display:flex;align-items:center;justify-content:space-between;
  transition:all .5s cubic-bezier(.2,.8,.2,1);
  background:linear-gradient(180deg,rgba(19,78,74,.95),rgba(19,78,74,0));
  backdrop-filter:blur(14px);
}
.nav.scrolled{background:rgba(19,78,74,.97);padding:12px 44px;box-shadow:0 4px 40px rgba(0,0,0,.6)}

/* Brand Logo */
.brand{display:flex;align-items:center;gap:0}
.brand-logo{
  height:72px;width:auto;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),filter .4s;
  filter:drop-shadow(0 0 18px rgba(13,148,136,.28));
}
.brand:hover .brand-logo{transform:scale(1.04);filter:drop-shadow(0 0 26px rgba(13,148,136,.55))}
.footer .brand-logo{height:48px}

/* Fallback if image fails */
.brand-mark{
  width:44px;height:44px;flex:none;border-radius:8px;
  background:linear-gradient(135deg,var(--royal-2),var(--royal) 55%,#134E4A);
  color:#fff;display:grid;place-items:center;font-family:var(--font-script);
  font-size:1.9rem;line-height:1;padding-bottom:6px;
  box-shadow:0 6px 20px rgba(13,148,136,.5),inset 0 0 0 1px rgba(255,255,255,.08);
}
.brand-txt{line-height:1;letter-spacing:.24em;font-size:.88rem;font-weight:600;font-family:var(--font-display)}
.brand-txt small{display:block;font-size:.58rem;color:var(--muted);letter-spacing:.44em;margin-top:5px;font-weight:400;font-family:var(--font-sans)}

.nav-links{display:flex;gap:34px;align-items:center;list-style:none;margin:0;padding:0}
.nav-links a{
  font-family:var(--font-sans);
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--text);opacity:.72;position:relative;padding:6px 0;
  transition:opacity .3s,color .3s;font-weight:500;
}
.nav-links a::after{
  content:"";position:absolute;bottom:-4px;left:0;right:0;
  height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:center;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.nav-links a:hover{opacity:1;color:var(--gold)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--gold);opacity:1}
.nav-tools{display:flex;align-items:center;gap:12px}
.lang-btn{
  padding:8px 16px;border-radius:22px;border:1px solid var(--border);
  color:var(--gold);font-size:.68rem;letter-spacing:.22em;font-weight:600;
  transition:all .35s;background:transparent;font-family:var(--font-sans);
}
.lang-btn:hover{background:var(--gold-soft);border-color:var(--gold)}
.menu-btn{
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--border);color:var(--text);
  display:grid;place-items:center;transition:all .35s;
}
.menu-btn:hover{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.menu-btn svg{width:18px;height:18px}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100vh;
  display:grid;grid-template-columns:1fr 1.15fr;gap:0;
  padding-top:110px;overflow:hidden;
  background:radial-gradient(circle at 22% 38%,rgba(19,78,74,.22),transparent 58%),
             linear-gradient(185deg,var(--bg) 0%,var(--bg-3) 100%);
}
.hero-left{padding:40px 60px 80px 60px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}
.hero-title{margin-bottom:1.6rem}
.hero-sub{color:var(--muted);max-width:400px;margin-bottom:2.6rem;font-size:.96rem;line-height:1.8}
.play-btn{
  display:inline-flex;align-items:center;gap:18px;
  padding:6px 6px;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--text);align-self:flex-start;font-weight:600;font-family:var(--font-sans);
}
.play-btn .circle{
  width:54px;height:54px;border-radius:50%;border:1px solid var(--gold);
  display:grid;place-items:center;color:var(--gold);
  transition:all .4s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 0 0 0 var(--gold-glow);
}
.play-btn .circle svg{width:16px;height:16px}
.play-btn:hover .circle{background:var(--gold);color:var(--bg);box-shadow:0 0 30px var(--gold-glow),0 0 60px var(--gold-glow)}
.scroll-hint{margin-top:58px;display:inline-flex;align-items:center;gap:16px;font-size:.68rem;letter-spacing:.32em;color:var(--muted);text-transform:uppercase;font-weight:600;font-family:var(--font-sans)}
.scroll-hint .circle{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;color:var(--gold);animation:scrollBounce 2s ease-in-out infinite}
.scroll-hint .circle svg{width:14px;height:14px}
@keyframes scrollBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

.hero-right{position:relative;overflow:hidden}
.hero-img{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.78) saturate(1.1);transition:transform 12s ease}
/* Media slots that hold an autoplaying video instead of a still image */
.media-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-img.has-video,.cta-img.has-video{background-image:none!important}
.hero-img.has-video .media-video,.cta-img.has-video .media-video{filter:inherit}
img.media-video-replace{display:none!important}
.hero-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(92deg,rgba(19,78,74,.92) 0%,rgba(19,78,74,.28) 34%,transparent 62%);
}
/* Decorative S-curve divider on left edge of hero image */
.hero-right{
  clip-path:polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  -webkit-clip-path:polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  margin-left:-9%;
}
.hero-right::before{
  content:"";position:absolute;top:0;right:0;bottom:0;width:60px;z-index:3;pointer-events:none;
  background:linear-gradient(-90deg,rgba(19,78,74,.6),transparent);
}
body[dir="rtl"] .hero-right{
  clip-path:polygon(0 0, 82% 0, 100% 100%, 0 100%);
  -webkit-clip-path:polygon(0 0, 82% 0, 100% 100%, 0 100%);
  margin-left:0;margin-right:-9%;
}
@media(max-width:900px){
  .hero-right,body[dir="rtl"] .hero-right{
    clip-path:polygon(0 8%,100% 0,100% 100%,0 100%);
    -webkit-clip-path:polygon(0 8%,100% 0,100% 100%,0 100%);
    margin:0;
  }
}

/* ---------- Brand "S" logo — centered on seam between hero image and text ---------- */
.hero-s-ornament{
  position:absolute;left:50%;top:50%;
  width:clamp(320px,38vw,560px);
  transform:translate(-50%,-50%);
  pointer-events:none;z-index:6;
  animation:sFloat 6s ease-in-out infinite;
}
.hero-s-ornament .hero-s-logo{
  width:100%;height:auto;object-fit:contain;display:block;
  filter:drop-shadow(0 26px 54px rgba(10,46,43,.6));
}
@keyframes sFloat{
  0%,100%{transform:translate(-50%,-50%)}
  50%{transform:translate(-50%,calc(-50% - 14px))}
}
body[dir="rtl"] .hero-s-ornament{left:50%;right:auto;transform:translate(-50%,-50%);animation-name:sFloat}





.hero-nav-list{
  position:absolute;right:30px;top:50%;transform:translateY(-50%);
  z-index:3;display:flex;flex-direction:column;gap:20px;list-style:none;margin:0;padding:0;
}
.hero-nav-list li{
  display:flex;gap:14px;align-items:center;font-size:.65rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--muted);font-weight:600;cursor:pointer;
  transition:color .35s,transform .35s;font-family:var(--font-sans);
}
.hero-nav-list li .num{color:var(--gold);font-weight:700;min-width:20px}
.hero-nav-list li:hover{color:var(--text);transform:translateX(-4px)}
.hero-nav-list li.active{color:var(--text)}
.hero-nav-list li.active .num{color:var(--gold-2)}
.hero-nav-list li.active::before{content:"";width:20px;height:1px;background:var(--gold);margin-right:2px}

/* ---------- Sections ---------- */
section{padding:110px 0;position:relative}
.section-head{margin-bottom:64px}
.section-grid{display:grid;grid-template-columns:1fr 2fr;gap:64px;align-items:start}

/* ---------- Dark section on teal-light background ---------- */
section[style*="--bg-2"]{background:var(--bg-2)!important;color:var(--text-dark)}
section[style*="--bg-2"] h1,section[style*="--bg-2"] h2,section[style*="--bg-2"] h3,section[style*="--bg-2"] h4{color:var(--text-dark)}
section[style*="--bg-2"] .eyebrow{color:var(--royal)}
section[style*="--bg-2"] .eyebrow::before{background:var(--royal)}
section[style*="--bg-2"] .muted{color:var(--muted-dark)}
section[style*="--bg-2"] .card,section[style*="--bg-2"] .value,section[style*="--bg-2"] .article,section[style*="--bg-2"] .service-card,section[style*="--bg-2"] .member .ph{background:#fff;border-color:rgba(19,78,74,.08);color:var(--text-dark)}
section[style*="--bg-2"] .card p,section[style*="--bg-2"] .value p,section[style*="--bg-2"] .article p{color:var(--muted-dark)}
section[style*="--bg-2"] .btn{color:var(--text-dark);border-color:rgba(19,78,74,.2)}
section[style*="--bg-2"] .btn:hover{color:#fff;background:var(--charcoal);border-color:var(--charcoal)}
section[style*="--bg-2"] .btn-gold{color:var(--bg)}
section[style*="--bg-2"] .process-step .dot{background:#fff}
section[style*="--bg-2"] .ba-wrap{background:#fff;border-color:rgba(19,78,74,.1)}
section[style*="--bg-2"] .filter{color:var(--muted-dark)}
section[style*="--bg-2"] .filter.active{color:var(--charcoal)}
section[style*="--bg-2"] .filter.active::after{background:var(--gold)}
section[style*="--bg-2"] .newsletter{background:#fff;border-color:rgba(19,78,74,.1)}
section[style*="--bg-2"] .newsletter input{color:var(--text-dark);border-color:rgba(19,78,74,.15)}
section[style*="--bg-2"] .newsletter input::placeholder{color:var(--muted-dark)}
section[style*="--bg-2"] .mission,section[style*="--bg-2"] .why-grid,section[style*="--bg-2"] .featured-article{background:#fff;border-color:rgba(19,78,74,.08)}
section[style*="--bg-2"] .stat .num{color:var(--charcoal)}
section[style*="--bg-2"] .proj{background:#fff;border-color:rgba(19,78,74,.08)}
section[style*="--bg-2"] .proj::after{background:linear-gradient(0deg,rgba(19,78,74,.88) 8%,transparent 60%)}
section[style*="--bg-2"] .proj-body,section[style*="--bg-2"] .proj-body p,section[style*="--bg-2"] .proj-body h3,section[style*="--bg-2"] .proj-body .loc,section[style*="--bg-2"] .proj-body .view{color:#fff}

/* ── mat-universe-section on bg-2 ── */
.mat-universe-section{background:var(--bg)!important}

/* ---------- Cards ---------- */
.card{
  background:linear-gradient(170deg,var(--panel),var(--panel-2));
  border:1px solid var(--border-2);
  border-radius:var(--radius);padding:36px 28px;
  position:relative;overflow:hidden;
  transition:all .55s cubic-bezier(.2,.8,.2,1);
}
.card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,0%),var(--gold-glow),transparent 40%);
  opacity:0;transition:opacity .55s;pointer-events:none;
}
.card:hover{transform:translateY(-10px);border-color:var(--gold);box-shadow:var(--shadow)}
.card:hover::before{opacity:.28}
.card .icon{
  width:58px;height:58px;border-radius:12px;
  border:1px solid var(--gold);color:var(--gold);
  display:grid;place-items:center;margin-bottom:24px;
  transition:all .4s;background:rgba(13,148,136,.06);
}
.card .icon svg{width:26px;height:26px}
.card:hover .icon{background:var(--gold-soft);box-shadow:0 0 20px var(--gold-glow)}
.card .num{color:var(--gold);font-size:.72rem;letter-spacing:.3em;margin-bottom:10px;display:block;font-weight:600;font-family:var(--font-sans)}
.card h3{margin-bottom:14px;font-family:var(--font-display);font-size:.95rem}
.card p{color:var(--muted);font-size:.88rem;margin-bottom:24px}
.card .learn{color:var(--gold);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;display:inline-flex;align-items:center;gap:12px;font-weight:600;transition:gap .35s;font-family:var(--font-sans)}
.card .learn:hover{gap:22px}
.card .learn svg{width:16px;height:10px}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:15px 30px;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  border:1px solid var(--border);color:var(--text);
  transition:all .4s cubic-bezier(.2,.8,.2,1);background:transparent;border-radius:2px;
  font-weight:600;font-family:var(--font-sans);position:relative;overflow:hidden;
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);z-index:-1;
}
.btn:hover::before{transform:scaleX(1)}
.btn:hover{color:var(--bg);border-color:var(--gold);box-shadow:0 8px 36px var(--gold-glow);transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.btn-gold::before{background:var(--gold-2)}
.btn-gold:hover{color:var(--bg)}
.btn .arrow{width:18px;height:10px;display:inline-block;position:relative;transition:transform .35s}
.btn .arrow::before,.btn .arrow::after{content:"";position:absolute;background:currentColor}
.btn .arrow::before{left:0;right:4px;top:50%;height:1px;transform:translateY(-.5px)}
.btn .arrow::after{right:0;top:2px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.btn:hover .arrow{transform:translateX(5px)}
body[dir="rtl"] .btn .arrow{transform:scaleX(-1)}

/* ---------- Philosophy strip (Home) ---------- */
.strip-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.strip-card{
  aspect-ratio:.52;position:relative;overflow:hidden;border-radius:10px;
  background-size:cover;background-position:center;
  transition:transform .65s cubic-bezier(.2,.8,.2,1),box-shadow .55s,flex .65s;
  cursor:pointer;flex:1;
}
.strip-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(19,78,74,.96) 0%,rgba(19,78,74,.3) 50%,transparent 72%);
}
.strip-card:hover{transform:translateY(-12px) scale(1.02);box-shadow:0 24px 50px rgba(0,0,0,.4)}
.strip-card .strip-body{position:absolute;bottom:0;left:0;right:0;padding:20px;z-index:2;color:#fff}
.strip-card .icon{width:36px;height:36px;color:var(--gold);display:grid;place-items:center;margin-bottom:12px}
.strip-card .icon svg{width:22px;height:22px}
.strip-card .num{color:var(--gold);font-size:.68rem;letter-spacing:.24em;font-weight:700;font-family:var(--font-sans)}
.strip-card .name{color:#fff;text-transform:uppercase;font-size:.72rem;letter-spacing:.22em;margin-top:6px;font-weight:500;font-family:var(--font-display)}

/* ---------- Before / After slider ---------- */
.ba-wrap{position:relative;background:var(--panel);border:1px solid var(--border-2);border-radius:12px;overflow:hidden;user-select:none;-webkit-user-select:none}
.ba-images{position:relative;display:block;width:100%;aspect-ratio:16/10}
.ba-images img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ba-images img.ba-before{z-index:2;clip-path:inset(0 0 0 var(--ba-pos,50%))}
.ba-images img.ba-after{z-index:1}
.ba-images img:first-child:not(.ba-before):not(.ba-after){z-index:1}
.ba-images img:nth-child(2):not(.ba-before):not(.ba-after){z-index:2;clip-path:inset(0 0 0 var(--ba-pos,50%))}
.ba-divider{
  position:absolute;top:0;bottom:0;left:var(--ba-pos,50%);width:2px;
  background:linear-gradient(180deg,transparent,var(--gold),transparent);
  z-index:4;pointer-events:none;box-shadow:0 0 20px var(--gold-glow);
  animation:baPulse 2.6s ease-in-out infinite;
}
@keyframes baPulse{0%,100%{box-shadow:0 0 20px var(--gold-glow)}50%{box-shadow:0 0 38px rgba(13,148,136,.7)}}
.ba-handle{
  position:absolute;top:50%;left:var(--ba-pos,50%);transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:50%;background:var(--bg);border:1.5px solid var(--gold);
  color:var(--gold);display:grid;grid-auto-flow:column;place-items:center;gap:2px;
  cursor:ew-resize;z-index:5;box-shadow:0 0 28px var(--gold-glow),0 8px 24px rgba(0,0,0,.4);
  transition:transform .2s,box-shadow .35s;
}
.ba-handle:hover{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 0 42px rgba(13,148,136,.8)}
.ba-handle svg{width:14px;height:14px}
.ba-hint{position:absolute;top:14px;right:14px;font-size:.62rem;letter-spacing:.28em;color:#fff;background:rgba(19,78,74,.65);padding:6px 14px;border-radius:20px;text-transform:uppercase;z-index:4;font-weight:600;opacity:.9;font-family:var(--font-sans)}
.ba-labels{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:space-between;padding:0 24px;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:#fff;z-index:4;font-weight:600;pointer-events:none;font-family:var(--font-sans)}
.ba-labels span{background:rgba(19,78,74,.6);padding:6px 14px;border-radius:4px}
.ba-labels .active{color:var(--gold-2)}
.ba-toggle{display:none}


/* ---------- Material Universe — showroom panel display (reference-matched) ---------- */
.mat-universe-section{padding:120px 0;background:linear-gradient(180deg,var(--bg-3) 0%,var(--bg) 55%,var(--bg-3) 100%)!important;position:relative;overflow:hidden}
.mat-universe-section::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
  background:radial-gradient(ellipse at 60% 100%,rgba(20,184,166,.16),transparent 65%);
  pointer-events:none;
}
.mat-universe-grid{display:grid;grid-template-columns:1fr 3fr;gap:64px;align-items:center;position:relative;z-index:2}
.mat-universe-text{display:flex;flex-direction:column}
.mat-universe-text h2{line-height:1.1;font-size:clamp(2rem,3.4vw,3rem)}
.mat-panels-wrap{position:relative;display:flex;align-items:center;gap:20px}

.mat-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;align-items:end;flex:1}
.mat-panel-col{display:flex;flex-direction:column;align-items:center}

/* Tall standing panel (showroom slab) */
.mat-item{
  position:relative;
  aspect-ratio:.36;
  width:100%;
  background-size:cover;background-position:center;
  border-radius:6px 6px 3px 3px;
  overflow:hidden;cursor:pointer;
  transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .55s;
  box-shadow:
    0 30px 60px rgba(10,46,43,.75),
    0 8px 18px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(240,253,250,.05);
}
/* subtle top-to-bottom depth gradient over panel */
.mat-item::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(14,60,57,.15) 0%,transparent 30%,rgba(10,46,43,.55) 100%),
    linear-gradient(90deg,rgba(240,253,250,.06) 0%,transparent 25%,transparent 75%,rgba(10,46,43,.35) 100%);
  pointer-events:none;
}
/* Warm floor glow under each slab */
.mat-item::before{
  content:"";position:absolute;bottom:-14px;left:-30%;right:-30%;height:65%;
  background:radial-gradient(ellipse at 50% 100%,rgba(20,184,166,.55) 0%,rgba(13,148,136,.22) 35%,transparent 70%);
  z-index:2;pointer-events:none;border-radius:50%;
  filter:blur(4px);
}
.mat-item:hover{transform:translateY(-20px) scale(1.03);box-shadow:0 44px 90px rgba(10,46,43,.85),0 0 50px rgba(20,184,166,.35)}

.mat-label{text-align:center;color:var(--muted);font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;margin-top:18px;font-weight:600;font-family:var(--font-sans)}
.mat-panel-col:hover .mat-label{color:var(--gold-2)}

/* Material nav arrow — circular teal button on the right */
.mat-nav-arrow{
  flex-shrink:0;
  width:56px;height:56px;border-radius:50%;
  border:1.5px solid var(--gold);color:var(--gold);
  display:grid;place-items:center;
  transition:all .45s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 0 24px var(--gold-glow);
  margin-left:14px;background:rgba(19,78,74,.35);backdrop-filter:blur(4px);
}
.mat-nav-arrow svg{width:22px;height:22px}
.mat-nav-arrow:hover{background:var(--gold);color:var(--bg);box-shadow:0 0 40px var(--gold-glow);transform:scale(1.1)}


/* ---------- Process ---------- */
.process{display:grid;grid-template-columns:1fr 2.5fr;gap:64px;align-items:center}
.process-track{position:relative;display:grid;grid-template-columns:repeat(5,1fr) auto;gap:20px;align-items:start}
/* Straight line — hidden, replaced by SVG wave */
.process-track::before{
  content:"";position:absolute;top:32px;left:5%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);z-index:0;
  opacity:.3;
}

/* Wavy process connector SVG */
.process-wave-wrap{
  position:absolute;top:22px;left:5%;right:14%;
  height:22px;z-index:0;pointer-events:none;
}
.process-wave-svg{width:100%;height:100%;overflow:visible}

.process-step{position:relative;z-index:1;text-align:center}
.process-step .dot{
  width:72px;height:72px;border-radius:50%;
  background:var(--bg);
  border:1.5px solid var(--gold);
  color:var(--gold);display:grid;place-items:center;margin:0 auto 18px;
  box-shadow:0 0 24px var(--gold-glow),0 0 0 6px rgba(13,148,136,.07);
  transition:all .4s cubic-bezier(.2,.8,.2,1);
}
.process-step .dot svg{width:26px;height:26px}
.process-step:hover .dot{
  background:var(--gold);color:var(--bg);
  transform:scale(1.12);
  box-shadow:0 0 48px var(--gold-glow),0 0 0 10px rgba(13,148,136,.12);
}
.process-step .num{color:var(--gold);font-size:.68rem;letter-spacing:.28em;margin-bottom:8px;font-weight:700;font-family:var(--font-sans)}
.process-step .name{font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:8px;font-weight:500;font-family:var(--font-display)}
.process-step .desc{color:var(--muted);font-size:.76rem;max-width:150px;margin:0 auto;line-height:1.6}
.dream-orb{
  width:144px;height:144px;border-radius:50%;
  background:radial-gradient(circle,var(--gold-soft),transparent 72%);
  border:1.5px solid var(--gold);display:grid;place-items:center;text-align:center;
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  animation:pulse 3.2s ease-in-out infinite;padding:22px;font-weight:600;font-family:var(--font-display);
}
@keyframes pulse{0%,100%{box-shadow:0 0 30px var(--gold-glow)}50%{box-shadow:0 0 60px var(--gold-glow),0 0 90px var(--gold-soft)}}

/* ---------- CTA Band ---------- */
.cta-band{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  background:var(--bg-3);border-top:1px solid var(--border-2);border-bottom:1px solid var(--border-2);
  overflow:hidden;
}
.cta-img{background-size:cover;background-position:center;min-height:360px;position:relative}
.cta-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,var(--bg-3));}
.cta-body{padding:64px 44px;display:flex;flex-direction:column;justify-content:center}
.cta-body h2{font-size:2rem}
.cta-body .serif-italic{font-size:2.6rem;display:block;margin:.4rem 0}
.cta-info{padding:64px 42px;display:flex;flex-direction:column;gap:24px;justify-content:center;border-left:1px solid var(--border-2)}
body[dir="rtl"] .cta-info{border-left:none;border-right:1px solid var(--border-2)}
.cta-row{display:flex;align-items:center;gap:18px}
.cta-row .ic{width:46px;height:46px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center;flex-shrink:0;transition:all .35s}
.cta-row:hover .ic{background:var(--gold);color:var(--bg)}
.cta-row .ic svg{width:18px;height:18px}
.cta-row .lbl{color:var(--gold);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;margin-bottom:2px;font-weight:600;font-family:var(--font-sans)}
.cta-row .val{color:var(--text);font-size:.9rem}
.socials{display:flex;gap:12px;margin-top:8px}
.socials a{width:40px;height:40px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center;transition:all .4px cubic-bezier(.2,.8,.2,1)}
.socials a svg{width:16px;height:16px}
.socials a:hover{background:var(--gold);color:var(--bg);transform:translateY(-4px) scale(1.1);box-shadow:0 8px 20px var(--gold-glow)}

.footer{padding:28px 0;background:var(--bg-3);border-top:1px solid var(--border-2)}
.footer .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.footer-links{display:flex;gap:28px;flex-wrap:wrap}
.footer-links a{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);font-weight:500;transition:color .3s;font-family:var(--font-sans)}
.footer-links a:hover,.footer-links a.active{color:var(--gold)}
.footer small{color:var(--muted);font-size:.68rem;letter-spacing:.12em;font-family:var(--font-sans)}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;text-align:center}
.stat .ic{width:60px;height:60px;border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center;margin:0 auto 20px;border-radius:12px;transition:all .4s}
.stat .ic svg{width:26px;height:26px}
.stat:hover .ic{background:var(--gold-soft);box-shadow:0 0 24px var(--gold-glow);transform:scale(1.08)}
.stat .num{color:var(--gold);font-size:2.8rem;font-weight:300;line-height:1;font-family:var(--font-serif);font-style:italic}
.stat .lbl{color:var(--muted);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;margin-top:12px;font-weight:600;font-family:var(--font-sans)}

.mission{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:0;background:var(--panel);border:1px solid var(--border-2);border-radius:12px;overflow:hidden}
.mission img{width:100%;height:100%;object-fit:cover;min-height:360px}
.mission-body{padding:54px 46px;display:flex;flex-direction:column;justify-content:center}

.values{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.value{padding:34px 22px;border:1px solid var(--border-2);border-radius:12px;background:var(--panel);transition:all .45s cubic-bezier(.2,.8,.2,1)}
.value:hover{border-color:var(--gold);transform:translateY(-6px);box-shadow:var(--shadow)}
.value .ic{width:66px;height:66px;border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center;margin:0 auto 22px;border-radius:50%;transition:all .4s}
.value .ic svg{width:28px;height:28px}
.value:hover .ic{background:var(--gold);color:var(--bg);box-shadow:0 0 28px var(--gold-glow)}
.value h3{font-size:.88rem;margin-bottom:12px;font-family:var(--font-display)}

.team{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.member{text-align:center}
.member .ph{aspect-ratio:1;background:var(--panel);border:1px solid var(--border-2);background-size:cover;background-position:center;margin-bottom:18px;border-radius:12px;filter:grayscale(.1) contrast(1.06);transition:all .45s}
.member:hover .ph{border-color:var(--gold);box-shadow:0 12px 40px var(--gold-glow)}
.member .name{font-size:.86rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;font-family:var(--font-display)}
.member .role{color:var(--gold);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;margin-top:6px;font-weight:600;font-family:var(--font-sans)}

/* ---------- Projects grid ---------- */
.filters{display:flex;gap:34px;flex-wrap:wrap;margin-bottom:44px;border-bottom:1px solid var(--border-2);padding-bottom:22px}
.filter{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);cursor:pointer;position:relative;padding-bottom:10px;font-weight:600;transition:color .35s;font-family:var(--font-sans)}
.filter:hover{color:var(--text)}
.filter.active{color:var(--gold)}
.filter.active::after{content:"";position:absolute;left:0;right:0;bottom:-23px;height:2px;background:var(--gold);border-radius:1px}

.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.proj-grid .wide{grid-column:span 2}
.proj{
  position:relative;overflow:hidden;border-radius:12px;
  background:var(--panel);aspect-ratio:1.15;
  border:1px solid var(--border-2);transition:border-color .35s;
}
.proj .img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.proj:hover .img{transform:scale(1.08)}
.proj::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(19,78,74,.95) 12%,transparent 62%)}
.proj:hover{border-color:var(--gold)}
.proj-body{position:absolute;left:0;right:0;bottom:0;padding:32px;z-index:2}
.proj-body .cat{color:var(--gold);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;margin-bottom:8px;font-weight:600;font-family:var(--font-sans)}
.proj-body h3{margin-bottom:6px;font-family:var(--font-display)}
.proj-body .loc{color:var(--muted);font-size:.8rem;margin-bottom:16px}
.proj-body p{color:var(--muted);font-size:.83rem;max-width:340px;margin-bottom:18px}
.proj-body .view{color:var(--gold);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;display:inline-flex;align-items:center;gap:12px;font-weight:600;font-family:var(--font-sans);transition:gap .35s}
.proj-body .view:hover{gap:20px}

/* ---------- Our Projects (مشاريعنا) Media Gallery ---------- */
.media-tabs{display:flex;gap:0;border-bottom:2px solid var(--border-2);margin-bottom:48px}
.media-tab{
  padding:14px 32px;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);font-weight:600;font-family:var(--font-sans);
  border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;
  transition:all .35s;
}
.media-tab:hover{color:var(--text)}
.media-tab.active{color:var(--gold);border-color:var(--gold)}
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.media-item{
  position:relative;border-radius:10px;overflow:hidden;
  border:1px solid var(--border-2);transition:all .45s cubic-bezier(.2,.8,.2,1);cursor:pointer;
  background:var(--panel);
}
.media-item:hover{border-color:var(--gold);transform:translateY(-6px);box-shadow:var(--shadow)}
.media-item .thumb{aspect-ratio:16/10;background:var(--panel);background-size:cover;background-position:center;position:relative;overflow:hidden}
.media-item .thumb img,.media-item .thumb video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.media-item:hover .thumb img,.media-item:hover .thumb video{transform:scale(1.06)}
.media-item .play-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(19,78,74,.3);opacity:0;transition:opacity .35s;
}
.media-item:hover .play-overlay{opacity:1}
.play-overlay .play-circle{
  width:70px;height:70px;border-radius:50%;background:var(--gold);
  display:grid;place-items:center;box-shadow:0 0 40px var(--gold-glow);
  transform:scale(.85);transition:transform .35s;
}
.media-item:hover .play-circle{transform:scale(1)}
.play-circle svg{width:24px;height:24px;color:var(--bg)}
.media-item .info{padding:20px}
.media-item .info .type{color:var(--gold);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;margin-bottom:8px;font-weight:600;font-family:var(--font-sans)}
.media-item .info h3{font-size:.9rem;margin-bottom:6px;font-family:var(--font-display)}
.media-item .info p{color:var(--muted);font-size:.8rem}
.media-badge{
  position:absolute;top:14px;left:14px;
  background:rgba(19,78,74,.75);border:1px solid var(--border-2);
  color:var(--gold);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  padding:5px 12px;border-radius:4px;font-weight:600;font-family:var(--font-sans);
  backdrop-filter:blur(8px);
}
/* Featured projects section on home */
.our-projects-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.proj-preview-item{
  position:relative;border-radius:10px;overflow:hidden;
  border:1px solid var(--border-2);aspect-ratio:1.2;
  background:var(--panel);transition:all .5s cubic-bezier(.2,.8,.2,1);cursor:pointer;
}
.proj-preview-item:hover{border-color:var(--gold);transform:scale(1.02);box-shadow:var(--shadow)}
.proj-preview-item .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .7s}
.proj-preview-item:hover .bg{transform:scale(1.06)}
.proj-preview-item::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(19,78,74,.88) 20%,transparent 60%)}
.proj-preview-item .label{position:absolute;bottom:20px;left:20px;right:20px;z-index:2}
.proj-preview-item .label .type{color:var(--gold);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;font-weight:600;margin-bottom:6px;font-family:var(--font-sans)}
.proj-preview-item .label h4{font-family:var(--font-display);font-size:.9rem;margin:0}

/* ---------- Insights ---------- */
.categories{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:44px}
.categories .cat{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;color:var(--muted);cursor:pointer;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;transition:all .35s;background:var(--panel);border:1px solid var(--border-2);border-radius:8px;font-weight:600;font-family:var(--font-sans)}
.categories .cat:hover{color:var(--gold);border-color:var(--gold)}
.categories .cat.active{color:var(--gold);border-color:var(--gold);background:var(--gold-soft)}
.categories .cat .ic{width:22px;height:22px;color:var(--gold);display:grid;place-items:center}
.categories .cat .ic svg{width:16px;height:16px}

.featured-article{display:grid;grid-template-columns:1fr 1.5fr;gap:0;background:var(--panel);border:1px solid var(--border-2);border-radius:12px;overflow:hidden;margin-bottom:64px}
.featured-article .body{padding:54px 46px;display:flex;flex-direction:column;justify-content:center}
.featured-article img{width:100%;height:100%;object-fit:cover;min-height:360px}

.articles{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.article{background:var(--panel);border:1px solid var(--border-2);border-radius:12px;overflow:hidden;transition:all .45s cubic-bezier(.2,.8,.2,1);cursor:pointer}
.article:hover{transform:translateY(-8px);border-color:var(--gold);box-shadow:var(--shadow)}
.article .img{aspect-ratio:1.4;background-size:cover;background-position:center;transition:transform .6s}
.article:hover .img{transform:scale(1.05)}
.article .body{padding:24px}
.article .cat{color:var(--gold);font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;margin-bottom:12px;font-weight:600;font-family:var(--font-sans)}
.article h3{font-size:.95rem;margin-bottom:12px;line-height:1.38;font-family:var(--font-display)}
.article p{color:var(--muted);font-size:.83rem;margin-bottom:16px}
.article-meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.7rem;padding-top:12px;border-top:1px solid var(--border-2)}
.article-meta .arrow{width:32px;height:32px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center;transition:all .35s}
.article-meta .arrow:hover{background:var(--gold);color:var(--bg)}
.article-meta .arrow svg{width:14px;height:14px}

.newsletter{margin-top:64px;padding:34px 44px;border:1px solid var(--border-2);border-radius:12px;background:var(--panel);display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center}
.newsletter .ic{width:58px;height:58px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center}
.newsletter .ic svg{width:22px;height:22px}
.newsletter form{display:flex;gap:0}
.newsletter input{flex:1;padding:14px 20px;background:transparent;border:1px solid var(--border);color:var(--text);font-family:var(--font-sans);font-size:.85rem;border-radius:4px 0 0 4px;transition:border-color .3s}
.newsletter input:focus{outline:none;border-color:var(--gold)}
.newsletter button{padding:14px 32px;background:var(--gold);color:var(--bg);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;font-weight:700;border-radius:0 4px 4px 0;font-family:var(--font-sans);transition:background .35s}
.newsletter button:hover{background:var(--gold-2)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:64px}
.contact-info{display:flex;flex-direction:column;gap:26px;margin-top:32px}
.contact-form{background:var(--panel);border:1px solid var(--border-2);border-radius:12px;padding:44px}
.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.contact-form .col{margin-bottom:16px}
.contact-form input,.contact-form textarea{
  width:100%;padding:16px 20px;background:transparent;border:1px solid var(--border);color:var(--text);
  font-family:var(--font-sans);font-size:.88rem;border-radius:4px;letter-spacing:.06em;transition:all .35s;
}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.contact-form textarea{min-height:170px;resize:vertical}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--muted);letter-spacing:.18em;text-transform:uppercase;font-size:.7rem;font-weight:600}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.form-status{min-height:1.2em;font-size:.85rem;font-family:var(--font-sans)}
.form-status.ok{color:#7fc98a}
.form-status.err{color:#e0806f}
.contact-form button[disabled]{opacity:.6;pointer-events:none}

.map-wrap{background:var(--panel);border:1px solid var(--border-2);border-radius:12px;aspect-ratio:2.4;position:relative;overflow:hidden;background-image:radial-gradient(circle,rgba(13,148,136,.1) 1px,transparent 1px);background-size:22px 22px}
.map-pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--gold);font-size:.82rem;letter-spacing:.2em}
.map-pin .ic{width:54px;height:54px;border-radius:50%;background:var(--gold);color:var(--bg);display:grid;place-items:center;margin:0 auto 12px;box-shadow:0 0 34px var(--gold-glow);animation:pulse 2.2s ease-in-out infinite}
.map-pin .ic svg{width:22px;height:22px}

/* ---------- Material lab ---------- */
.exp-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.exp-item .img{aspect-ratio:1.2;background-size:cover;background-position:center;border-radius:10px;overflow:hidden;transition:transform .5s}
.exp-item:hover .img{transform:scale(1.04)}
.exp-item .num{color:var(--gold);font-size:.68rem;letter-spacing:.26em;margin-top:18px;font-weight:700;font-family:var(--font-sans)}
.exp-item h4{font-size:.88rem;letter-spacing:.2em;text-transform:uppercase;margin:8px 0 8px;font-weight:500;font-family:var(--font-display)}
.exp-item p{color:var(--muted);font-size:.8rem}

.samples{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:64px;align-items:center;background:var(--bg-3);border-radius:12px;padding:54px;border:1px solid var(--border-2)}
.samples img{width:100%;border-radius:10px}
.sample-features{display:flex;flex-direction:column;gap:24px}
.sample-features .f{display:flex;gap:18px;align-items:flex-start}
.sample-features .ic{width:46px;height:46px;border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center;border-radius:50%;flex-shrink:0;transition:all .35s}
.sample-features .f:hover .ic{background:var(--gold);color:var(--bg)}
.sample-features .ic svg{width:20px;height:20px}
.sample-features .lbl{color:var(--gold);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;margin-bottom:6px;font-weight:600;font-family:var(--font-sans)}

/* ---------- Services extra ---------- */
.why-grid{display:grid;grid-template-columns:1.1fr 1.5fr;gap:0;align-items:center;background:var(--panel);border:1px solid var(--border-2);border-radius:12px;overflow:hidden}
.why-grid > .img{background-size:cover;background-position:center;min-height:440px}
.why-body{padding:54px 46px}
.why-feats{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:32px}
.why-feats .f .ic{width:48px;height:48px;border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center;border-radius:10px;margin-bottom:14px;transition:all .35s}
.why-feats .f:hover .ic{background:var(--gold);color:var(--bg);box-shadow:0 0 20px var(--gold-glow)}
.why-feats .f .ic svg{width:22px;height:22px}
.why-feats .lbl{color:var(--gold);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;margin-bottom:6px;font-weight:600;font-family:var(--font-sans)}

/* ---------- Reveal animations ---------- */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal-l{opacity:0;transform:translateX(-50px);transition:all .9s cubic-bezier(.2,.8,.2,1)}
.reveal-l.in{opacity:1;transform:none}
.reveal-r{opacity:0;transform:translateX(50px);transition:all .9s cubic-bezier(.2,.8,.2,1)}
.reveal-r.in{opacity:1;transform:none}
.reveal-s{opacity:0;transform:scale(.92);transition:all .9s cubic-bezier(.2,.8,.2,1)}
.reveal-s.in{opacity:1;transform:none}
.stagger > *{transition-delay:calc(var(--i,0) * 100ms)}

/* ---------- Particle Canvas (hero background) ---------- */
#hero-particles{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.45}

/* ---------- Scroll progress bar ---------- */
#scroll-progress{
  position:fixed;top:0;left:0;height:2px;background:var(--gold);z-index:200;
  width:0%;transition:width .1s linear;box-shadow:0 0 8px var(--gold-glow);
}

/* ---------- RTL support ---------- */
body[dir="rtl"] .nav-links{flex-direction:row-reverse}
body[dir="rtl"] .hero{grid-template-columns:1.15fr 1fr;direction:rtl}
body[dir="rtl"] .hero-img::after{background:linear-gradient(-90deg,rgba(19,78,74,.92),rgba(19,78,74,.28) 34%,transparent 62%)}
body[dir="rtl"] .hero-nav-list{right:auto;left:30px}
body[dir="rtl"] .cta-img::after{background:linear-gradient(-90deg,transparent 55%,var(--bg-3))}
body[dir="rtl"] .btn .arrow{transform:scaleX(-1)}
body[dir="rtl"] .hero-right::before{left:0;right:auto;background:linear-gradient(90deg,rgba(19,78,74,.6),transparent)}
body[dir="rtl"] .mat-universe-grid{direction:rtl}

/* ---------- Mobile menu ---------- */
.mobile-drawer{
  position:fixed;inset:0;background:rgba(19,78,74,.98);z-index:200;
  display:none;flex-direction:column;padding:100px 44px;
  backdrop-filter:blur(20px);
}
.mobile-drawer.open{display:flex;animation:drawerIn .4s cubic-bezier(.2,.8,.2,1)}
@keyframes drawerIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
.mobile-drawer a{font-family:var(--font-display);font-size:1.4rem;letter-spacing:.18em;text-transform:uppercase;padding:18px 0;border-bottom:1px solid var(--border-2);transition:color .35s,padding-left .35s}
.mobile-drawer a:hover{color:var(--gold);padding-left:8px}
.mobile-close{position:absolute;top:22px;right:44px;font-size:2rem;color:var(--gold);width:44px;height:44px;transition:transform .3s}
.mobile-close:hover{transform:rotate(90deg)}

/* ---------- Responsive ---------- */
/* ---------- Tablet ---------- */
@media(max-width:1024px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:130px;padding-bottom:60px}
  .hero-right{height:60vh;min-height:420px}
  .hero-nav-list{display:none}
  .brand-logo{height:60px}
  .footer .brand-logo{height:42px}

  .section-grid,.process,.contact-grid,.mission,.featured-article,.why-grid,.samples{grid-template-columns:1fr}
  .cards-grid,.values,.team,.articles,.exp-row,.why-feats{grid-template-columns:repeat(2,1fr)}
  .strip-grid{grid-template-columns:repeat(3,1fr)}
  .mat-strip{grid-template-columns:repeat(4,1fr)}
  .mat-universe-grid{grid-template-columns:1fr;gap:36px}
  .proj-grid{grid-template-columns:repeat(2,1fr)}
  .proj-grid .wide{grid-column:span 2}
  .cta-band{grid-template-columns:1fr}
  .cta-img{display:none}
  .cta-info{border-left:0}
  .nav-links{display:none}
  .process-track{grid-template-columns:repeat(3,1fr);gap:40px 20px}
  .process-track::before{display:none}
  .process-wave-wrap{display:none}
  .newsletter{grid-template-columns:1fr;text-align:center}
  .newsletter .ic{margin:0 auto}
  .media-grid,.our-projects-preview{grid-template-columns:repeat(2,1fr)}
}
/* ---------- Mobile ---------- */
@media(max-width:640px){
  .container,.hero-left,.nav{padding-left:20px;padding-right:20px}
  section{padding:64px 0}
  .hero-left{padding:20px 20px 60px}
  .hero-right{height:46vh;min-height:320px}

  .cards-grid,.values,.team,.articles,.strip-grid,.proj-grid,.exp-row,.why-feats,.media-grid,.our-projects-preview{grid-template-columns:1fr}
  /* Materials: keep panels horizontal, scroll-snap for mobile showroom feel */
  .mat-panels-wrap{flex-direction:column;gap:14px}
  .mat-strip{
    display:flex;grid-template-columns:none;overflow-x:auto;
    scroll-snap-type:x mandatory;padding:10px 4px 24px;gap:14px;-webkit-overflow-scrolling:touch;
  }
  .mat-strip::-webkit-scrollbar{height:4px}
  .mat-strip::-webkit-scrollbar-thumb{background:var(--gold);border-radius:4px}
  .mat-panel-col{flex:0 0 44%;scroll-snap-align:center}
  .mat-nav-arrow{margin:6px auto 0}
  .stats{grid-template-columns:repeat(3,1fr);gap:14px}
  .stat .num{font-size:1.9rem}
  .contact-form{padding:26px}
  .contact-form .row{grid-template-columns:1fr}
  .newsletter{padding:22px}
  .newsletter form{flex-direction:column}
  .newsletter input,.newsletter button{border-radius:4px}
  .media-tabs{overflow-x:auto}
  .media-tab{padding:12px 20px;white-space:nowrap}
  .brand-logo{height:52px}
  .footer .brand-logo{height:38px}

  h1{font-size:clamp(1.8rem,7vw,2.6rem)}
  h2{font-size:clamp(1.4rem,5.5vw,2rem)}
}