/* ===============================
   DRILLING PAGE (drilling.css)
   Golden / Dark palette
   FINAL UNIFIED VERSION (with Scope Split layout)
================================ */

:root{
  --svc-text:#0f172a;
  --svc-muted:#475569;

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

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

  --svc-gold:#C09020;
  --svc-gold-dark:#B8860B;

  --svc-radius:22px;
  --svc-angle:36px; /* زاوية قص الحافة */
}

/* ===================== Base ===================== */
.svc-section{ padding: 80px 0; }

.svc-head{
  text-align:center;
  margin: 0 auto 34px;
}

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

.svc-paragraph{
  margin: 0;
  line-height: 1.95;
  color: #334155;
  font-weight: 600;
  font-size: 17px;
}

.svc-paragraph--muted{
  max-width: 900px;
  margin: 0 auto;
  color: #64748b;
}

/* ===================== HERO (NO IMAGE) ===================== */
.svc-hero{
  padding: 120px 0 80px;
  background: linear-gradient(180deg, #1b1b1b, #2c2c2c);
  color:#fff;
  position: relative;
  overflow: hidden;
}

.svc-hero-overlay{
  position:absolute;
  inset:-40px -60px auto -60px;
  height:320px;
  background: radial-gradient(
    700px 260px at 50% 30%,
    rgba(212,175,55,.22) 0%,
    rgba(0,0,0,0) 60%
  );
  pointer-events:none;
}

.svc-hero-inner{
  position:relative;
  z-index:1;
  text-align:center;
}

.svc-hero-title{
  margin:0 0 14px;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.08;
  font-weight: 900;
}

.svc-hero-subtitle{
  margin:0 auto 22px;
  max-width: 980px;
  font-size: 18px;
  line-height: 1.9;
  opacity: .92;
}

.svc-hero-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

/* ===================== Buttons ===================== */
.svc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 22px;
  border-radius:14px;
  font-weight:900;
  text-decoration:none;
  transition:transform .15s ease, filter .15s ease, background .15s ease;
}

.svc-btn:hover{ transform:translateY(-1px); }

.svc-btn-primary{
  background: linear-gradient(180deg, var(--svc-gold), var(--svc-gold-dark));
  color:#1b1b1b;
}

.svc-btn-primary:hover{ filter:brightness(1.03); }

.svc-btn-ghost{
  background: rgba(255,255,255,.10);
  border: 1.5px solid rgba(200, 162, 58, 0.65);
  color:#fff;
}

.svc-btn-ghost:hover{ background: rgba(255,255,255,.14); }

.svc-btn-light{
  background: linear-gradient(180deg, var(--svc-gold), var(--svc-gold-dark));
  color:#1b1b1b;
  box-shadow:0 14px 35px rgba(0,0,0,.24);
}

/* =========================================================
   HERO WITH IMAGES (OVERRIDE)
========================================================= */


.svc-hero.svc-hero-images{
  padding: 0;
  background: none;
  min-height: 70vh;
  display: flex;
  align-items: flex-start;   
  position: relative;
  overflow: hidden;
}

/* أعطِ المحتوى مسافة آمنة من الأعلى والأسفل */
.svc-hero.svc-hero-images .svc-hero-inner{
  text-align: left;
  width: 100%;
  position: relative;
  z-index: 2;

  padding: 180px 0 90px;     
}

html[dir="rtl"] .svc-hero.svc-hero-images .svc-hero-inner{
  text-align: right;
}

/* موبايل */
@media (max-width:620px){
  .svc-hero.svc-hero-images{ min-height: 60vh; }
  .svc-hero.svc-hero-images .svc-hero-inner{
    padding: 120px 0 70px;
  }
}

/* background container */
.svc-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:#0f1115;
}

/* slides */
.svc-hero-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center 40%;
  opacity:0;
  transform: translate3d(32%,0,0) scale(1.08);
  filter:saturate(1.05) contrast(1.06);
  will-change: transform, opacity;
  pointer-events:none;
}

.svc-hero-slide.is-active{
  opacity:1;
  transform: translate3d(0,0,0) scale(1.06);
}

.svc-hero-slide.is-enter{
  animation: svcSlideIn 900ms cubic-bezier(.2,.9,.2,1) both;
}

.svc-hero-slide.is-exit{
  animation: svcSlideOut 900ms cubic-bezier(.2,.9,.2,1) both;
}

html[dir="rtl"] .svc-hero-slide,
html[dir="ltr"] .svc-hero-slide{
  direction:ltr;
}

@keyframes svcSlideIn{
  from{ opacity:0; transform: translate3d(34%,0,0) scale(1.10); }
  to{ opacity:1; transform: translate3d(0,0,0) scale(1.06); }
}

@keyframes svcSlideOut{
  from{ opacity:1; transform: translate3d(0,0,0) scale(1.06); }
  to{ opacity:0; transform: translate3d(-24%,0,0) scale(1.06); }
}

.svc-hero-slide.is-active,
.svc-hero-slide.is-enter{
  animation:
    svcCameraZoom 10s ease-in-out infinite,
    svcMicroShake 4.2s ease-in-out infinite;
}

@keyframes svcCameraZoom{
  0%   { transform: scale(1.06); }
  50%  { transform: scale(1.10) translate(-1%,-0.5%); }
  100% { transform: scale(1.06); }
}

@keyframes svcMicroShake{
  25%  { transform: translate(-0.2%, 0.1%) scale(1.07); }
  55%  { transform: translate(0.15%,-0.1%) scale(1.08); }
  80%  { transform: translate(-0.1%, 0.05%) scale(1.07); }
}
/*=============================الستار الذهبي =================================--------------*/
.svc-hero.svc-hero-images::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background: linear-gradient(
    180deg,
    rgba(212,175,55,.18) 0%,
    rgba(212,175,55,.10) 45%,
    rgba(15,23,42,.35) 100%
  );
  pointer-events:none;
}


/* =========================================================
   UTIL: Sharp angled shape (cards/images)
========================================================= */
.svc-angled{
  border-radius: 0 !important;
  overflow: hidden;
  position: relative;
}

/* LTR angle cut (top-left) */
@supports (clip-path: polygon(0 0)){
  html[dir="ltr"] .svc-angled{
    clip-path: polygon(
      var(--svc-angle) 0%,
      100% 0%,
      100% 100%,
      0% 100%,
      0% var(--svc-angle)
    );
  }
  /* RTL angle cut (top-right) */
  html[dir="rtl"] .svc-angled{
    clip-path: polygon(
      0% 0%,
      calc(100% - var(--svc-angle)) 0%,
      100% var(--svc-angle),
      100% 100%,
      0% 100%
    );
  }
}

/* =========================================================
   OVERVIEW (image + stacked cards)
========================================================= */

.svc-overview{ background: var(--svc-bg); }

.svc-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:26px;
  align-items:center;
}

/* Overview media */
.svc-media{
  background: var(--svc-card);
  border:1px solid rgba(15,23,42,.08);
  border-radius:0px;
  overflow:hidden;
  box-shadow:0 22px 70px rgba(15,23,42,.10);
}

.svc-media.svc-angled{ border-radius:0 !important; }

.svc-media img{
  width:100%;
  height:420px;
  object-fit:cover;
  display:block;
  filter:saturate(1.05) contrast(1.05);
}

/* compact cards */
.svc-ov-cards{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.svc-ov-cards .svc-card{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px;
  border-radius:0px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 16px 50px rgba(15,23,42,.08);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.svc-ov-cards .svc-card.svc-angled{ border-radius:0 !important; }

.svc-ov-cards .svc-card:hover{
  transform: translateY(-2px);
  box-shadow:0 22px 60px rgba(15,23,42,.12);
  border-color: rgba(212,175,55,.25);
}

.svc-ov-cards .svc-card-icon{
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--svc-gold), var(--svc-gold-dark));
  box-shadow: 0 12px 26px rgba(0,0,0,.16);
}

.svc-ov-cards .svc-ico{
  width:24px;
  height:24px;
}

.svc-ov-cards .svc-card-title{
  margin:2px 0 6px;
  font-size:18px;
  line-height:1.35;
}

.svc-ov-cards .svc-card-text{
  margin: 0;
  color: #475569;
  line-height: 1.85;
  font-weight: 600;
  font-size: 14.8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  max-height: calc(1.85em * 3);
  display: block;
}

html[dir="rtl"] .svc-ov-cards .svc-card{ text-align:right; }
html[dir="ltr"] .svc-ov-cards .svc-card{ text-align:left; }

/* =========================================================
   SCOPE (NEW): Split into TWO sub-sections with image + 4 points
   IMPORTANT: This needs Blade structure update to take effect.
========================================================= */

.svc-scope{
  background:#fff;
}

.svc-scope .svc-head{
  margin-bottom: 28px;
}

/* wrapper for the two blocks */
.svc-scope-splits{
  display: grid;
  gap: 28px;
  margin-top: 18px;
}

/* each block: image + list */
.svc-scope-split{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 26px;
  align-items: center;
}

/* reverse block (swap sides) */
.svc-scope-split.is-reverse{
  grid-template-columns: 1.05fr .95fr;
}

.svc-scope-split .svc-scope-media{
  background: var(--svc-card);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 22px 70px rgba(15,23,42,.10);
  overflow:hidden;
  border-radius:0;
}

.svc-scope-split .svc-scope-media.svc-angled{
  border-radius:0 !important;
}

.svc-scope-split .svc-scope-media img{
  width:100%;
  height: 420px;
  display:block;
  object-fit: cover;
  filter:saturate(1.03) contrast(1.06);
}

/* list panel */
.svc-scope-panel{
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 55px rgba(15,23,42,.08);
  padding: 26px 22px;
  position: relative;
  overflow: hidden;
  border-radius: 0;
}

.svc-scope-panel.svc-angled{ border-radius:0 !important; }

.svc-scope-panel::before{
  content:"";
  position:absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--svc-gold), var(--svc-gold-dark));
  opacity: .95;
}

html[dir="rtl"] .svc-scope-panel::before{
  inset: 0 0 0 auto;
}

.svc-scope-panel-title{
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 900;
  color: var(--svc-text);
}

.svc-scope-panel .svc-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.svc-scope-panel .svc-list li{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 14px 14px;
  border-radius: 0;
  background: rgba(245,241,232,.65);
  border: 1px solid rgba(212,175,55,.18);
  color: #0f172a;
  font-weight: 800;
  line-height: 1.85;
}

.svc-scope-panel .svc-list li.svc-angled{ border-radius:0 !important; }

.svc-scope-panel .svc-list li::before{
  content:"";
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--svc-gold), var(--svc-gold-dark));
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
  flex: 0 0 10px;
}

html[dir="rtl"] .svc-scope-panel{ text-align:right; direction:rtl; }
html[dir="ltr"] .svc-scope-panel{ text-align:left; direction:ltr; }

/* =========================================================
   (OLD SCOPE GRID) Keep it for compatibility if used elsewhere
========================================================= */
.svc-scope-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.svc-scope-card{
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 0px;
  padding: 26px 22px;
  box-shadow: 0 18px 55px rgba(15,23,42,.08);
  position: relative;
  overflow: hidden;
}

.svc-scope-card::before{
  content:"";
  position:absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--svc-gold), var(--svc-gold-dark));
  opacity: .95;
}

html[dir="rtl"] .svc-scope-card::before{ inset: 0 0 0 auto; }

.svc-scope-title{
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 900;
  color: var(--svc-text);
  display: flex;
  align-items: center;
  gap: 10px;
}

.svc-scope-title::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--svc-gold), var(--svc-gold-dark));
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
  flex: 0 0 10px;
}

.svc-scope .svc-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.svc-scope .svc-list li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 12px;
  border-radius: 0px;
  background: rgba(245,241,232,.65);
  border: 1px solid rgba(212,175,55,.18);
  color: #0f172a;
  font-weight: 700;
  line-height: 1.85;
}

.svc-scope .svc-list li::before{
  content:"";
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--svc-gold), var(--svc-gold-dark));
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
  flex: 0 0 10px;
}

html[dir="rtl"] .svc-scope-card{ text-align: right; direction: rtl; }
html[dir="ltr"] .svc-scope-card{ text-align: left; direction: ltr; }

/* ===================== WORK MODELS ===================== */
.svc-models{ background:#fff; }

.svc-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

.svc-tag{
  padding:10px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 10px 20px rgba(15,23,42,.08);
  font-weight:700;
  font-size:14px;
}

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

.svc-cta-card{
  border-radius: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);
}

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

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

.svc-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:14px;
  background: linear-gradient(180deg, var(--svc-gold), var(--svc-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;
}

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

/* ===================== Responsive ===================== */
@media (max-width:1100px){
  .svc-grid{ grid-template-columns:1fr; }
  .svc-media img{ height:320px; }

  .svc-scope-split,
  .svc-scope-split.is-reverse{
    grid-template-columns: 1fr;
  }
  .svc-scope-split .svc-scope-media img{
    height: 320px;
  }
}

@media (max-width:620px){
  .svc-section{ padding:70px 0; }
  .svc-hero.svc-hero-images{ min-height: 60vh; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .svc-hero-slide,
  .svc-hero-slide.is-active,
  .svc-hero-slide.is-enter,
  .svc-hero-slide.is-exit{
    animation:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}

/* =========================
   REVEAL ANIMATIONS
========================= */
.reveal{
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  filter: blur(6px);
  transition:
    opacity 900ms cubic-bezier(.2,.8,.2,1),
    transform 900ms cubic-bezier(.2,.8,.2,1),
    filter 900ms cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform, filter;
}

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

/* Variants */
.reveal.reveal-card{
  transform: translateY(26px) scale(0.97);
}

.reveal.reveal-media{
  transform: translateY(18px) scale(0.99);
}

.reveal.reveal-panel{
  transform: translateY(22px) scale(0.985);
}

/* List items: more noticeable + staggered */
.reveal.reveal-li{
  opacity: 0;
  transform: translateX(18px);
  filter: blur(6px);
  transition:
    opacity 700ms cubic-bezier(.2,.8,.2,1),
    transform 700ms cubic-bezier(.2,.8,.2,1),
    filter 700ms cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform, filter;
}

[dir="rtl"] .reveal.reveal-li{
  transform: translateX(-18px);
}

.reveal.reveal-li.is-inview{
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

/* Ensure list items also get activated */
.reveal-panel.is-inview .reveal-li{
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

/* Optional: make it pop slightly on cards */
.reveal-card.is-inview{
  animation: revealPop 520ms cubic-bezier(.2,.9,.2,1) both;
  animation-delay: var(--d, 0ms);
}

@keyframes revealPop{
  0%{ transform: translateY(26px) scale(.97); }
  60%{ transform: translateY(-4px) scale(1.01); }
  100%{ transform: translateY(0) scale(1); }
}