/* ===============================
   PROJECTS PAGE (projects.css)
   Golden / Dark palette — FULL VERSION (NO REMOVAL)
   UPDATED: pr-journey layout + bars to match image #2 (1 wide + 2 half cards, bar flush edge)
================================ */

:root{
  --sv-text:#0f172a;
  --sv-muted:#475569;
  --sv-border: rgba(15,23,42,.10);

  --sv-bg:#f7fbff;
  --sv-card:#ffffff;

  --sv-dark:#2C2C2C;
  --sv-sand:#f5f1e8;

  --sv-gold:#D4AF37;
  --sv-gold-dark:#B8860B;

  --sv-radius:0px; /* was 22px -> sharp */

  /* === NEW: journey colors === */
  --journey-line: rgba(15,23,42,.14);
  --journey-dot: rgba(212,175,55,.95);
  --journey-dot-ring: rgba(212,175,55,.22);

  /* === NEW: NOC-like cards === */
  --pr-card:#ffffff;
  --pr-soft:#f7fbff;
  --pr-ink:#0f172a;
  --pr-muted:#475569;
  --pr-border: rgba(15,23,42,.10);

  /* tuned to match image #2 (flatter, cleaner) */
  --pr-shadow: 0 16px 44px rgba(2,8,23,.08);
  --pr-shadow-strong: 0 22px 70px rgba(2,8,23,.12);

  --pr-bar:#0b1f3a;       /* navy */
  --pr-bar-soft: rgba(11,31,58,.08);
  --pr-accent: var(--sv-gold);
  --pr-accent-2: var(--sv-gold-dark);

  /* new: bar width like image #2 */
  --pr-bar-w: 16px;
}

/* ===================== Layout ===================== */
.sv-section{ padding: 80px 0; }
.sv-head{ text-align:center; margin: 0 auto 34px; }

.sv-title{
  margin:0 0 10px;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 900;
  color: var(--sv-text);
}

.sv-subtitle{
  margin: 0 auto;
  max-width: 860px;
  line-height: 1.9;
  color: #64748b;
  font-weight: 600;
}

/* ===================== HERO (Photo) ===================== */
.sv-hero{
  position: relative;
  padding: 120px 0 80px;
  color:#fff;
  overflow: hidden;
}

.sv-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--sv-hero-bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  animation: svHeroZoom 16s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes svHeroZoom{
  from{ transform: scale(1.02); }
  to{ transform: scale(1.12); }
}

.sv-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 260px at 50% 30%, rgba(212,175,55,.22) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.42) 100%);
  z-index: 1;
  pointer-events:none;
}

.sv-hero-inner{
  position:relative;
  z-index:2;
  text-align:center;
}

.sv-hero-title{
  margin:0 0 14px;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.08;
  font-weight: 900;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}

.sv-hero-subtitle{
  margin:0 auto;
  max-width: 980px;
  font-size: 18px;
  line-height: 1.9;
  opacity: .95;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}

/* ===================== INTRO + APPROACH ===================== */
.sv-intro{ background: var(--sv-bg); }

/* space between intro text and ticker */
.sv-approach{ padding-bottom: 90px; }

/* --- Ticker container --- */
.approach-ticker{
  margin-top: 22px;
  border-radius: 0; /* was 22px */
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.70);
  box-shadow: 0 18px 60px rgba(15,23,42,.10);
  overflow: hidden;
}

/* inner padding */
.approach-track{
  padding: 18px 14px;
  display: grid;
  gap: 14px;
}

/* row is a horizontal loop */
.approach-row{
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  min-width: 200%;
  animation: approach-marquee 28s linear infinite;
}

.approach-row--reverse{
  animation-direction: reverse;
  animation-duration: 34s;
}

.approach-ticker:hover .approach-row{
  animation-play-state: paused;
}

/* each image tile */
.approach-item{
  width: 420px;
  height: 260px;
  border-radius: 0; /* was 26px */
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.16);
  background: #fff;
  flex: 0 0 auto;
  box-shadow: 0 26px 70px rgba(15,23,42,.18);
}

.approach-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.04) contrast(1.03);
}

@keyframes approach-marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* RTL/LTR for ticker direction */
html[dir="rtl"] .approach-row{ animation-name: approach-marquee-rtl; }
@keyframes approach-marquee-rtl{
  from{ transform: translateX(0); }
  to{ transform: translateX(50%); }
}

/* === Full width projects showcase === */
.sv-approach .container{
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* ===================== NEW: Journey edges + soft fade ===================== */
/* makes the ticker look framed nicely while still full-width */
.approach-ticker{
  position: relative;
  border-left: 0;
  border-right: 0;
  border-radius: 0; /* keep sharp */
}

.approach-ticker::before,
.approach-ticker::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width: clamp(26px, 4vw, 70px);
  z-index: 2;
  pointer-events:none;
}

.approach-ticker::before{
  left:0;
  background: linear-gradient(90deg, rgba(247,251,255,1) 0%, rgba(247,251,255,.0) 100%);
}

.approach-ticker::after{
  right:0;
  background: linear-gradient(270deg, rgba(247,251,255,1) 0%, rgba(247,251,255,.0) 100%);
}

/* add a subtle "journey line" under the images */
.approach-track{
  position: relative;
  padding-bottom: 26px; /* room for the line */
}

.approach-track::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(15,23,42,0) 0%,
    var(--journey-line) 12%,
    var(--journey-line) 88%,
    rgba(15,23,42,0) 100%
  );
}

/* little dots aligned with tiles (gives "steps" feeling) */
.approach-item{
  position: relative;
}

.approach-item::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: -22px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 999px; /* dot stays round */
  background: var(--journey-dot);
  box-shadow: 0 0 0 8px var(--journey-dot-ring);
}

/* ===================== NEW SECTION: EXECUTION JOURNEY (MATCH IMAGE #2) ===================== */
/* ===============================
   PROJECTS – NOC CARDS (MATCH REF)
   Bigger typography + better text rhythm
   RTL icon on RIGHT / LTR icon on LEFT (card flips)
================================ */

/* ---------- Brand palette (LOCAL ONLY — does NOT affect site.css/footer) ---------- */
:root{
  --prj-brand-dark: #0b1220;   /* local dark for NOC bar */
  --prj-brand-gold: #d4af37;   /* local gold for icons */
  --ink-main: #0f172a;
  --ink-muted: #475569;

  --card-border: rgba(15,23,42,.08);
  --card-shadow: 0 16px 42px rgba(2,8,23,.06);
  --card-shadow-hover: 0 24px 64px rgba(2,8,23,.10);
}

/* ---------- Section ---------- */
.noc-cards{
  background:#ffffff;
  padding: 56px 0;
}

.noc-cards .container{
  max-width: 1180px;
}

/* ---------- Grid ---------- */
.noc-row{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 28px;
  margin-top: 28px;
}

/* ---------- Card base ---------- */
.noc-card{
  position: relative;
  background:#fff;
  border: 1px solid var(--card-border);
  border-radius: 0;            /* sharp corners */
  box-shadow: var(--card-shadow);
  overflow: hidden;

  display: grid;
  align-items: center;
  min-height: 240px;

  transition: transform .25s ease, box-shadow .25s ease;
}

.noc-card:hover{
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
}

/* Wide card */
.noc-card--wide{
  min-height: 200px;
}

/* ---------- Content ---------- */
.noc-body{
  padding: 30px 34px;
}

/* TYPOGRAPHY: bigger + cleaner rhythm like the reference */
.noc-text{
  margin: 15px;
  color: var(--ink-main);
  font-weight: 600;
  font-size: 14px;
  line-height: 2.05;
  letter-spacing: .0px;
}

/* optionally tighten English a bit */
html[dir="ltr"] .noc-text{
  font-size: 18px;
  line-height: 1.95;
}

/* ---------- Icon ---------- */
.noc-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px 24px;
}

.noc-svg{
  width: 92px;
  height: 92px;
  color: var(--prj-brand-gold);
}

/* ---------- Side bar ---------- */
.noc-bar{
  position:absolute;
  top:0;
  bottom:0;
  width: 22px;
  background: var(--prj-brand-dark);
}

/* ================= RTL ================= */
html[dir="rtl"] .noc-card{
  direction: rtl;
  text-align: right;
  grid-template-columns: 1fr 170px;
}

html[dir="rtl"] .noc-card--wide{
  grid-template-columns: 1fr 190px;
}

html[dir="rtl"] .noc-bar{
  right: 0;
  left: auto;
}

html[dir="rtl"] .noc-body{
  padding: 30px 22px 30px 34px;
}

/* =========================================================
   FIXED DIRECTION + LAYOUT (RTL/LTR) using GRID AREAS
========================================================= */

/* bind areas (order-independent) */
.noc-card{
  display: grid;
  grid-template-rows: 1fr;
  align-items: center;
}
.noc-body{ grid-area: body; }
.noc-icon{
  grid-area: icon;
  align-self: center;
  justify-self: center;
}

/* ---------- RTL ---------- */
html[dir="rtl"] .noc-card{
  direction: rtl;
  text-align: right;
  grid-template-columns: 1fr 190px;
  grid-template-areas: "body icon";
}

html[dir="rtl"] .noc-card--wide{
  grid-template-columns: 1fr 210px;
  grid-template-areas: "body icon";
}

html[dir="rtl"] .noc-bar{
  right: 0;
  left: auto;
}

html[dir="rtl"] .noc-body{
  padding: 30px 22px 30px 34px;
}

/* ---------- LTR (ENGLISH) ---------- */
html[dir="ltr"] .noc-card{
  direction: ltr;
  text-align: left;
  grid-template-columns: 190px 1fr;
  grid-template-areas: "icon body";
}

html[dir="ltr"] .noc-card--wide{
  grid-template-columns: 210px 1fr;
  grid-template-areas: "icon body";
}

html[dir="ltr"] .noc-bar{
  left: 0;
  right: auto;
}

html[dir="ltr"] .noc-body{
  padding: 30px 34px 30px 24px;
}

/* Text wrapping (no word-per-line / no hyphen breaks) */
html[dir="ltr"] .noc-text{
  direction: ltr;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 980px){
  .noc-row{ grid-template-columns: 1fr; }

  .noc-card,
  .noc-card--wide{
    grid-template-columns: 1fr !important;
    min-height: auto;
  }

  /* On mobile: icon on top (both dirs) */
  .noc-icon{
    justify-content: flex-start;
    padding: 22px 34px 0;
  }

  .noc-svg{
    width: 78px;
    height: 78px;
  }

  .noc-body{
    padding: 18px 34px 30px;
  }

  .noc-text{
    font-size: 14px;
    line-height: 2.0;
  }
}

/* ===================== PROJECTS GRID ===================== */
.sv-cards{ background: #fff; padding-top: 30px; }

.sv-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 18px;
}

.sv-card{
  background: var(--sv-card);
  border: 1px solid rgba(15,23,42,.07);
  border-radius: 0; /* was var(--sv-radius) */
  padding: 26px 24px;
  box-shadow: 0 18px 55px rgba(15,23,42,.08);
  display:flex;
  flex-direction: column;
  min-height: 270px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sv-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 80px rgba(15,23,42,.14);
  border-color: rgba(212,175,55,.25);
}

.sv-card-top{
  display:flex;
  align-items:center;
  gap: 14px;
  margin-bottom: 12px;
}

.sv-icon{
  width: 54px;
  height: 54px;
  border-radius: 16px; /* was 16px */
  display:grid;
  place-items:center;
  flex: 0 0 54px;
  box-shadow: 0 12px 26px rgba(0,0,0,.16);
}

.sv-icon-svg{
  width: 26px;
  height: 26px;
  display:block;
  filter: brightness(0) invert(1);
}

.sv-icon--gold{ background: linear-gradient(180deg, var(--sv-gold), var(--sv-gold-dark)); }
.sv-icon--dark{ background: linear-gradient(180deg, #3a3a3a, #1f1f1f); }
.sv-icon--sand{ background: linear-gradient(180deg, #c9a961, #b8860b); }

.sv-card-title{
  margin:0;
  font-size: 22px;
  font-weight: 900;
  color: var(--sv-text);
}

.sv-card-text{
  margin: 6px 0 18px;
  color:#475569;
  line-height: 1.9;
  font-weight: 600;
  flex: 1 1 auto;
}

.sv-card-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-weight: 900;
  color: var(--sv-dark);
  padding: 12px 14px;
  border-radius: 0; /* was 14px */
  border: 1px solid rgba(212,175,55,.35);
  background: rgba(245,241,232,.8);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.sv-card-link:hover{
  transform: translateY(-1px);
  background: rgba(245,241,232,1);
  border-color: rgba(212,175,55,.55);
}

/* ===================== MODELS ===================== */
.sv-models{ background: var(--sv-bg); }

.sv-models-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.sv-model{
  background:#fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 0; /* was 18px */
  padding: 22px;
  box-shadow: 0 14px 45px rgba(15,23,42,.08);
  text-align: center;
}

/* NEW: image/icon block */
.sv-model-media{
  width: 84px;
  height: 84px;
  margin: 0 auto 14px;
  display:grid;
  place-items:center;
  border-radius: 0; /* was 18px */
  background: rgba(212,175,55,.10);
  border: 1px solid rgba(212,175,55,.22);
}

.sv-model-media img{
  width: 54px;
  height: 54px;
  object-fit: contain;
  display:block;
  /* filter: ... */
}

.sv-model-title{
  margin:0 0 8px;
  font-size: 18px;
  font-weight: 900;
  color: var(--sv-text);
}

.sv-model-text{
  margin:0;
  color:#475569;
  line-height: 1.9;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 980px){
  .sv-models-grid{ grid-template-columns: 1fr; }
}

/* ===================== MODELS (Image Stats Cards) ===================== */
.sv-models{
  background: var(--sv-bg);
}

/* 3 columns like the reference */
.mstats-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 28px;
}

/* card */
.mstats-card{
  position: relative;
  min-height: 360px;
  border-radius: 0; /* was 44px */
  overflow: hidden;
  background-image: var(--mstats-bg);
  background-size: cover;
  background-position: center;
  box-shadow: 0 24px 80px rgba(2,8,23,.14);
  border: 1px solid rgba(15,23,42,.10);
  transform: translateZ(0);
}

/* subtle top shading + heavy bottom overlay like screenshot */
.mstats-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 380px at 50% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(0,0,0,.0) 25%, rgba(0,0,0,.72) 100%);
  pointer-events:none;
}

.mstats-overlay{
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 28px 28px;
  color:#fff;
}

/* KPI big number */
.mstats-kpi{
  font-size: clamp(34px, 3.2vw, 54px);
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.05;
  margin-bottom: 10px;
  text-shadow: 0 8px 24px rgba(0,0,0,.45);
}

/* text under KPI */
.mstats-text{
  font-size: 18px;
  font-weight: 600;
  line-height: 1.55;
  max-width: 92%;
  color: rgba(255,255,255,.92);
  text-shadow: 0 6px 18px rgba(0,0,0,.40);
}

/* RTL alignment like Arabic sites */
html[dir="rtl"] .mstats-overlay{ text-align: right; }
html[dir="ltr"] .mstats-overlay{ text-align: left; }

/* hover (soft) */
.mstats-card{
  transition: transform .25s ease, box-shadow .25s ease;
}
.mstats-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 34px 110px rgba(2,8,23,.18);
}

/* responsive */
@media (max-width: 980px){
  .mstats-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .mstats-card{
    min-height: 320px;
    border-radius: 0; /* was 34px */
  }
  .mstats-text{
    font-size: 16px;
  }
}

/* ===================== QUALITY ===================== */
.sv-quality{ background: #fff; }

.sv-quality-box{
  border-radius: 0; /* was 26px */
  padding: 34px 28px;
  background: linear-gradient(135deg, rgba(212,175,55,.16), rgba(44,44,44,.06));
  border: 1px solid rgba(212,175,55,.25);
  box-shadow: 0 20px 70px rgba(15,23,42,.10);
  text-align:center;
}

.sv-quality-title{
  margin:0 0 10px;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 900;
  color: var(--sv-text);
}

.sv-quality-text{
  margin:0 auto;
  max-width: 920px;
  line-height: 1.9;
  color:#334155;
  font-weight: 600;
}

/* ===================== CTA ===================== */
.sv-cta{
  background: linear-gradient(180deg, #2c2c2c, #1b1b1b);
  color:#fff;
}

.sv-cta-card{
  border-radius: 0; /* was 26px */
  padding: 40px 28px;
  text-align:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
}

.sv-cta-title{
  margin:0 0 10px;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 900;
}

.sv-cta-text{
  margin:0 auto 18px;
  max-width: 860px;
  line-height: 1.9;
  opacity: .92;
  font-weight: 700;
}

.sv-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 0; /* was 14px */
  background: linear-gradient(180deg, var(--sv-gold), var(--sv-gold-dark));
  color: #1b1b1b;
  font-weight: 900;
  text-decoration:none;
  box-shadow: 0 14px 35px rgba(0,0,0,.24);
  transition: transform .15s ease, filter .15s ease;
}

.sv-cta-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
}

/* ===================== RTL / LTR ===================== */
html[dir="rtl"] .sv-card{ direction: rtl; text-align: right; }
html[dir="ltr"] .sv-card{ direction: ltr; text-align: left; }

html[dir="rtl"] .sv-card-top{ flex-direction: row-reverse; }
html[dir="ltr"] .sv-card-top{ flex-direction: row; }

/* ===================== Responsive ===================== */
@media (max-width: 980px){
  .sv-grid{ grid-template-columns: 1fr; }
  .sv-models-grid{ grid-template-columns: 1fr; }
  .sv-section{ padding: 70px 0; }

  .approach-item{ width: 220px; height: 140px; border-radius: 0; } /* was 20px */
  .approach-track{ padding-bottom: 22px; }
  .approach-item::after{ bottom: -18px; box-shadow: 0 0 0 6px var(--journey-dot-ring); }

  /* Journey cards stack on mobile */
  .pr-steps{ grid-template-columns: 1fr; }
  .pr-step:nth-child(1){ grid-column: auto; }
}

.js-reveal{
  --d: 0s;
  opacity: 0;
  transform: translateY(18px);
  filter: blur(4px);
  transition:
    opacity .65s ease,
    transform .75s cubic-bezier(.2,.8,.2,1),
    filter .75s ease;
  transition-delay: var(--d);
  will-change: opacity, transform, filter;
}

.js-reveal.is-in{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.js-reveal--fade{
  transform: none;
}

.js-reveal--fade.is-in{
  transform: none;
}

.js-reveal--card{
  transform: translateY(22px) scale(.985);
}

.js-reveal--card.is-in{
  transform: translateY(0) scale(1);
}

.js-reveal--up{
  transform: translateY(22px);
}

@media (prefers-reduced-motion: reduce){
  .js-reveal{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}