/* =========================================================
   EJADA — Inner pages stylesheet
   Loaded after styles.css in the master layout.
   Contains: the reusable inner-page hero + per-page sections.
   (This file supersedes the earlier "APPEND-to-styles.css" step —
   if you already appended that block to styles.css, remove it
   from there; it now lives here.)
   ========================================================= */

/* ---------------------------------------------------------
   Inner-page hero (About / Services / Projects / Insights / Contact)
   --------------------------------------------------------- */
.hero--page{
  padding: 150px 0 100px;
  background:
    linear-gradient(100deg, rgba(8,26,44,.94) 25%, rgba(8,26,44,.55) 55%, rgba(8,26,44,.12)),
    var(--hero-bg, url('https://placehold.co/1920x800/12314e/a6c339?text=Ejada')) center/cover no-repeat;
}
@media (max-width: 991px){
  .hero--page{ padding: 130px 0 80px; }
}

/* Inner-page eyebrows match the homepage treatment: leading rule only.
   (The old trailing rule clashed with the green-highlight eyebrow style.) */

/* ---------------------------------------------------------
   Section intro (eyebrow + heading + copy)
   The recurring block that opens a section on Home, Services,
   Projects, Insights and Contact. One measure drives the whole
   group: the heading is capped so it breaks into ~2 balanced
   lines instead of running the full container, and the copy is
   derived from that same measure rather than an unrelated pixel
   value — so the two read as one unit. Replaces five hand-picked
   inline max-widths (420/440/460/560px).

   Contact's variant has no heading; the copy rule stands alone
   and the wrapper carries the trailing space.
   --------------------------------------------------------- */
.sec-intro{ --sec-measure:40rem; }
.sec-intro h2{
  max-width:var(--sec-measure);
  margin:.75rem 0 0;
  font-size:clamp(1.9rem,3vw,2.6rem);
  line-height:1.22;
  text-wrap:balance;
}
.sec-intro p{
  max-width:calc(var(--sec-measure) * .85);
  margin:1.15rem 0 0;
}

/* =========================================================
   SERVICES PAGE
   ========================================================= */

/* ---------- Service cards (What We Do) ---------- */
.svc-card{
  background:var(--ej-white);
  border:1px solid var(--ej-line);
  border-radius:var(--ej-radius);
  overflow:hidden;
  height:100%;
  display:flex; flex-direction:column;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.svc-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--ej-shadow);
  border-color:rgba(166,195,57,.5);
}
.svc-media{ position:relative; overflow:hidden; }
.svc-media img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  transition:transform .6s ease;
}
.svc-card:hover .svc-media img{ transform:scale(1.06); }

.svc-body{ padding:1.4rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.svc-body h5{ font-size:1.05rem; margin-bottom:.55rem; }
.svc-body p{ font-size:.88rem; color:var(--ej-muted); margin-bottom:1rem; }

.svc-more{
  margin-top:auto;
  color:var(--ej-navy); font-weight:600; font-size:.88rem;
  display:inline-flex; align-items:center; gap:.5rem;
  transition:color .25s ease, gap .25s ease;
}
.svc-more:hover{ color:var(--ej-green); gap:.8rem; }
.svc-more .bi{ color:var(--ej-green); }

/* ---------- Our Approach in Action (horizontal timeline) ---------- */
.approach-step{ position:relative; text-align:left; }
.approach-head{
  display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; position:relative;
}
.approach-icon{
  width:60px; height:60px; flex:0 0 auto; border-radius:16px;
  background:rgba(166,195,57,.16); color:var(--ej-green-dark);
  box-shadow:0 6px 16px rgba(11,34,57,.06);
  display:grid; place-items:center; font-size:1.3rem;
  position:relative; z-index:2;
  transition:background .35s ease, color .35s ease, transform .35s ease;
}
.approach-step:hover .approach-icon{
  background:var(--ej-green); color:var(--ej-navy); transform:scale(1.08);
}
.approach-num{
  font-size:2rem; font-weight:900; letter-spacing:-.02em;
  color:rgba(11,34,57,.14); line-height:1;
  transition:color .35s ease;
}
.approach-step:hover .approach-num{ color:rgba(166,195,57,.85); }

/* dashed connector between steps (desktop) */
@media (min-width: 768px){
  .approach-step:not(:last-child) .approach-head::after{
    content:""; position:absolute; left:calc(60px + .6rem + 2.6rem); right:-1rem; top:50%;
    border-top:2px dashed rgba(166,195,57,.55);
  }
}
/* vertical connector on mobile */
@media (max-width: 767px){
  .approach-step{ padding-left:0; padding-bottom:1.6rem; }
  .approach-step:not(:last-child)::after{
    content:""; position:absolute; left:29px; top:64px; bottom:0;
    border-left:2px dashed rgba(166,195,57,.55);
  }
}

.approach-step h6{ font-size:.98rem; color:var(--ej-navy); margin-bottom:.35rem; }
.approach-step p{ font-size:.84rem; color:var(--ej-muted); margin:0; max-width:210px; }

/* =========================================================
   CONTACT PAGE
   ========================================================= */

/* ---------- Form ---------- */
.contact-form .form-control,
.contact-form .form-select{
  border:1px solid rgba(11,34,57,.18);
  border-radius:10px;
  padding:.85rem 1rem;
  font-size:.9rem;
  color:var(--ej-ink);
  background-color:var(--ej-white); /* background-color (not the shorthand) so Bootstrap's dropdown arrow image is preserved on .form-select */
  transition:border-color .25s ease, box-shadow .25s ease;
}
.contact-form .form-select{ padding-right:2.6rem; } /* room for the arrow */
.contact-form .form-control::placeholder{ color:var(--ej-muted); }
.contact-form .form-control:focus,
.contact-form .form-select:focus{
  border-color:var(--ej-green);
  box-shadow:0 0 0 .2rem rgba(166,195,57,.18);
}
.contact-form textarea.form-control{ min-height:150px; resize:vertical; }

/* intl-tel-input — match the rest of the form */
.contact-form .iti{ width:100%; display:block; }
.contact-form .iti .form-control{ width:100%; }
.contact-form .iti__selected-country{
  border-radius:10px 0 0 10px;
  background:transparent;
}
.contact-form .iti__selected-country:hover{ background:rgba(166,195,57,.08); }
.iti__dropdown-content{
  border-radius:12px;
  border:1px solid rgba(11,34,57,.15);
  box-shadow:0 14px 36px rgba(11,34,57,.14);
  font-size:.88rem;
}
.iti__search-input{
  padding:.65rem .9rem;
  font-size:.88rem;
  border-bottom:1px solid rgba(11,34,57,.1);
  outline:none;
}
.iti__country.iti__highlight{ background:rgba(166,195,57,.14); }

.contact-form .form-check-input:checked{
  background-color:var(--ej-green); border-color:var(--ej-green);
}
.contact-form .form-check-label{ font-size:.86rem; color:var(--ej-muted); }
.contact-form .form-check-label a{ color:var(--ej-green); font-weight:600; }
.contact-form .form-check-label a:hover{ text-decoration:underline; }

.btn-ej-grow{
  flex:1 1 auto; justify-content:center; padding:.95rem 1.4rem; font-size:.95rem;
}

/* Quick WhatsApp secondary button */
.btn-whatsapp{
  --bs-btn-padding-x:1.4rem; --bs-btn-padding-y:.95rem;
  background:var(--ej-white); color:#128C7E;
  font-weight:700; font-size:.92rem;
  border:1.5px solid #25D366; border-radius:8px;
  display:inline-flex; align-items:center; gap:.6rem;
  transition:background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn-whatsapp .bi{ font-size:1.1rem; }
.btn-whatsapp:hover{
  background:#25D366; color:var(--ej-white); border-color:#25D366;
  transform:translateY(-2px); box-shadow:0 12px 26px rgba(37,211,102,.3);
}

/* validation states */
.contact-form .is-invalid{ border-color:#dc3545 !important; }
.contact-form .invalid-feedback{ font-size:.78rem; }

/* ---------- Get in Touch ---------- */
.gt-item{ display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.6rem; }
.gt-icon{
  width:52px; height:52px; flex:0 0 auto; border-radius:50%;
  border:1.4px solid rgba(166,195,57,.5);
  background:var(--ej-white); color:var(--ej-green);
  display:grid; place-items:center; font-size:1.2rem;
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.gt-item:hover .gt-icon{ background:var(--ej-green); color:var(--ej-navy); transform:scale(1.07); }
.gt-item h6{ font-size:.92rem; color:var(--ej-navy); margin-bottom:.2rem; }
.gt-item p, .gt-item a{ font-size:.86rem; color:var(--ej-muted); margin:0; }
.gt-item a:hover{ color:var(--ej-green); }

/* ---------- Map ---------- */
.map-card{
  border-radius:var(--ej-radius);
  overflow:hidden;
  border:1px solid var(--ej-line);
  box-shadow:0 10px 30px rgba(11,34,57,.08);
}
.map-card iframe, .map-card img{
  width:100%; height:300px; object-fit:cover; display:block; border:0;
}

/* ---------- Trust bar ---------- */
.trust-bar{
  background:var(--ej-cream);
  border-radius:24px;
  padding:2.2rem 2rem;
}
.trust-item{ display:flex; gap:.9rem; align-items:flex-start; }
.trust-icon{
  width:52px; height:52px; flex:0 0 auto; border-radius:14px;
  background:rgba(166,195,57,.16); color:var(--ej-green-dark);
  display:grid; place-items:center; font-size:1.2rem;
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.trust-item:hover .trust-icon{ background:var(--ej-green); color:var(--ej-navy); transform:scale(1.07); }
.trust-item h6{ font-size:.92rem; margin-bottom:.25rem; color:var(--ej-navy); }
.trust-item p{ font-size:.82rem; color:var(--ej-muted); margin:0; }

/* =========================================================
   PROJECTS PAGE
   ========================================================= */

/* ---------- Filters ---------- */
.filter-pill{
  border:none; background:transparent;
  color:var(--ej-muted); font-weight:600; font-size:.86rem;
  padding:.5rem 1rem; border-radius:50rem;
  transition:background .25s ease, color .25s ease;
}
.filter-pill:hover{ color:var(--ej-navy); background:rgba(11,34,57,.05); }
.filter-pill.active{
  background:var(--ej-green); color:var(--ej-navy);
}

/* ---------- Filter toolbar (projects) ----------
   One line however many categories exist: chips scroll inside .pf-rail,
   with arrows + edge fades only on the side that hides chips (JS sets
   .can-prev / .can-next). Region select docks at the end of the bar. */
.pf-bar{
  display:flex; align-items:center; gap:.5rem;
  background:var(--ej-white);
  border:1px solid rgba(11,34,57,.08); border-radius:50rem;
  padding:.375rem;
  box-shadow:0 6px 18px rgba(11,34,57,.04);
}
.pf-rail-wrap{ position:relative; flex:1 1 auto; min-width:0; }
.pf-rail{
  --fade-s:0px; --fade-e:0px;
  display:flex; gap:.25rem;
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent 100%);
}
.pf-rail::-webkit-scrollbar{ display:none; }
.can-prev .pf-rail{ --fade-s:64px; }
.can-next .pf-rail{ --fade-e:64px; }

.pf-rail .filter-pill{
  flex:0 0 auto; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.45rem;
}
.pf-count{
  min-width:1.45rem; padding:.08rem .42rem; border-radius:50rem;
  background:rgba(11,34,57,.06); color:var(--ej-muted);
  font-size:.72rem; font-weight:700; text-align:center;
  font-variant-numeric:tabular-nums;
  transition:background .25s ease, color .25s ease;
}
.filter-pill.active .pf-count{ background:rgba(11,34,57,.14); color:var(--ej-navy); }
.filter-pill.is-empty{ opacity:.45; }

.pf-nav{
  position:absolute; top:50%; z-index:2; translate:0 -50%;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--ej-line); background:var(--ej-white); color:var(--ej-navy);
  box-shadow:0 4px 12px rgba(11,34,57,.12);
  font-size:.8rem;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, background .2s ease, border-color .2s ease;
}
.pf-prev{ inset-inline-start:0; }
.pf-next{ inset-inline-end:0; }
.can-prev .pf-prev,
.can-next .pf-next{ opacity:1; pointer-events:auto; }
.pf-nav:hover{ background:var(--ej-green); border-color:var(--ej-green); }
@media (hover:none){ .pf-nav{ display:none; } }   /* touch: swipe the rail */

.pf-region{
  flex:0 0 auto; min-width:210px;
  padding-inline-start:.5rem;
  border-inline-start:1px solid var(--ej-line);
}
.pf-bar .pf-region .ej-select-trigger{   /* outranks the later .ej-select--filter padding */
  border-color:transparent; background:transparent;
  padding-inline-start:2.2rem;
  font-weight:600; color:var(--ej-navy);
}
.pf-region-icon{
  position:absolute; z-index:1; top:50%; translate:0 -50%;
  inset-inline-start:1.35rem;
  color:var(--ej-green-dark); pointer-events:none;
}

.pf-status{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:2.25rem; margin-top:1rem;
}
.pf-results{ margin:0; font-size:.86rem; color:var(--ej-muted); }
.pf-clear{
  display:inline-flex; align-items:center; gap:.4rem;
  border:none; background:none; border-radius:50rem;
  padding:.35rem .7rem;
  color:var(--ej-navy); font-size:.86rem; font-weight:600;
  transition:background .2s ease;
}
.pf-clear[hidden]{ display:none; }
.pf-clear:hover{ background:rgba(11,34,57,.06); }
.pf-clear i{ font-size:.7rem; }

@media (max-width:767.98px){
  .pf-bar{ flex-direction:column; align-items:stretch; border-radius:18px; }
  .pf-region{
    min-width:0; padding-inline-start:0; padding-top:.375rem;
    border-inline-start:none; border-top:1px solid var(--ej-line);
  }
  .pf-region-icon{ inset-inline-start:.85rem; translate:0 calc(-50% + .19rem); }
}
/* ---------- Project cards ---------- */
.proj-card{
  background:var(--ej-white);
  border:1px solid var(--ej-line);
  border-radius:var(--ej-radius);
  overflow:hidden;
  height:100%;
  display:flex; flex-direction:column;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.proj-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--ej-shadow);
  border-color:rgba(166,195,57,.5);
}
.proj-media{ overflow:hidden; }
.proj-media img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  transition:transform .6s ease;
}
.proj-card:hover .proj-media img{ transform:scale(1.06); }

.proj-body{ padding:1.3rem 1.2rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.proj-tag{
  font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ej-green-dark); margin-bottom:.5rem;
}
.proj-body h5{ font-size:1.05rem; line-height:1.35; margin-bottom:.55rem; }
.proj-body p{ font-size:.88rem; color:var(--ej-muted); margin-bottom:1rem; }
.proj-body .svc-more{ margin-top:auto; }

/* filter animation */
.proj-item{ transition:opacity .3s ease, transform .3s ease; }
.proj-item.filtering{ opacity:0; transform:scale(.97); }

/* empty state */
.proj-empty{
  border:1px dashed rgba(11,34,57,.2); border-radius:var(--ej-radius);
  padding:3rem 1.5rem; text-align:center; color:var(--ej-muted); font-size:.92rem;
}

/* ---------- CTA banner (Partnerships) ---------- */
.proj-cta{
  background:var(--ej-cream);
  border-radius:24px;
  padding:2.4rem 2.6rem;
}
.proj-cta-icon{
  width:74px; height:74px; flex:0 0 auto; border-radius:18px;
  background:var(--ej-navy); color:var(--ej-green);
  display:grid; place-items:center; font-size:1.7rem;
}
.proj-cta .eyebrow{ font-size:.7rem; }
.proj-cta h3{ font-size:clamp(1.3rem,2.2vw,1.7rem); margin:0; }
.proj-cta p{ font-size:.9rem; color:var(--ej-muted); margin:0; max-width:340px; }
@media (max-width: 767px){
  .proj-cta{ padding:2rem 1.4rem; }
}

/* =========================================================
   INSIGHTS PAGE
   ========================================================= */

/* ---------- Featured insight ---------- */
.featured-card{
  background:var(--ej-white);
  border:1px solid var(--ej-line);
  border-radius:var(--ej-radius);
  overflow:hidden;
  transition:box-shadow .35s ease;
}
.featured-card:hover{ box-shadow:var(--ej-shadow); }
.featured-media{ height:100%; min-height:280px; overflow:hidden; }
.featured-media img{
  width:100%; height:100%; object-fit:cover; transition:transform .6s ease;
}
.featured-card:hover .featured-media img{ transform:scale(1.05); }
.featured-body{ padding:2rem 1.8rem; display:flex; flex-direction:column; height:100%; }
.featured-body h4{ font-size:1.35rem; line-height:1.3; margin-bottom:.7rem; }
.featured-body p{ font-size:.9rem; color:var(--ej-muted); margin-bottom:1.2rem; }
.featured-body .svc-more{ margin-top:auto; }

.ins-tag{
  display:inline-block;
  font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ej-green-dark); margin-bottom:.6rem;
}

/* ---------- Recent insights (sidebar) ---------- */
.recent-label{
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ej-navy); margin-bottom:1rem;
}
.recent-item{
  display:flex; gap:.9rem; align-items:flex-start;
  padding:.9rem 0; border-bottom:1px solid var(--ej-line);
}
.recent-item:last-child{ border-bottom:none; }
.recent-thumb{
  width:88px; height:66px; flex:0 0 auto; border-radius:10px; overflow:hidden;
}
.recent-thumb img{
  width:100%; height:100%; object-fit:cover; transition:transform .5s ease;
}
.recent-item:hover .recent-thumb img{ transform:scale(1.08); }
.recent-item .ins-tag{ margin-bottom:.15rem; }
.recent-item h6{
  font-size:.9rem; line-height:1.35; margin-bottom:.25rem;
}
.recent-item h6 a{ color:var(--ej-navy); transition:color .25s ease; }
.recent-item h6 a:hover{ color:var(--ej-green-dark); }
.recent-item .ins-date{ font-size:.76rem; color:var(--ej-muted); }

/* ---------- All insights grid ---------- */
.ins-card{
  background:var(--ej-white);
  border:1px solid var(--ej-line);
  border-radius:var(--ej-radius);
  overflow:hidden;
  height:100%;
  display:flex; flex-direction:column;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ins-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--ej-shadow);
  border-color:rgba(166,195,57,.5);
}
.ins-media{ overflow:hidden; }
.ins-media img{
  width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .6s ease;
}
.ins-card:hover .ins-media img{ transform:scale(1.06); }
.ins-body{ padding:1.2rem; display:flex; flex-direction:column; flex:1; }
.ins-body h5{ font-size:1rem; line-height:1.4; margin-bottom:.9rem; }
.ins-foot{
  margin-top:auto;
  display:flex; align-items:center; justify-content:space-between;
}
.ins-foot .ins-date{ font-size:.78rem; color:var(--ej-muted); }
.ins-foot .ins-arrow{
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--ej-navy); border:1px solid rgba(11,34,57,.18);
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.ins-card:hover .ins-arrow{
  background:var(--ej-green); border-color:var(--ej-green);
  color:var(--ej-navy); transform:translateX(3px);
}


/* =========================================================
   GLOBAL — Language switcher (navbar)
   A regular nav item; inherits all .nav-link styling
   (color, spacing, green underline hover). Only adds the
   globe icon alignment.
   ========================================================= */
.navbar-ej .nav-link.lang-switch{
  display:inline-flex; align-items:center; gap:.4rem;
}
.navbar-ej .nav-link.lang-switch .bi{ font-size:.95rem; opacity:.8; }

/* =========================================================
   PROJECT DETAIL PAGE
   ========================================================= */
.back-link{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--ej-muted); font-size:.88rem; font-weight:600;
  transition:color .25s ease, gap .25s ease;
}
.back-link:hover{ color:var(--ej-green-dark); gap:.75rem; }

.proj-detail-img{
  width:100%; aspect-ratio:16/8; object-fit:cover;
  border-radius:var(--ej-radius-lg);
  box-shadow:var(--ej-shadow);
}
.proj-detail-body{
  font-size:.98rem; line-height:1.85; color:var(--ej-ink);
}

/* Key outcomes */
.outcomes-panel{
  background:var(--ej-cream); border-radius:var(--ej-radius);
  padding:1.6rem 1.8rem;
}
.outcomes-list{ list-style:none; padding:0; margin:0; }
.outcomes-list li{
  display:flex; gap:.7rem; align-items:flex-start;
  font-size:.92rem; padding:.45rem 0; color:var(--ej-ink);
}
.outcomes-list li .bi{ color:var(--ej-green-dark); font-size:1rem; margin-top:2px; flex:0 0 auto; }

/* Meta sidebar — card with icon tiles and stacked label/value rows */
.proj-meta-panel{
  background:var(--ej-white); border:1px solid var(--ej-line);
  border-radius:var(--ej-radius-lg); overflow:hidden;
  position:sticky; top:100px;
  box-shadow:0 14px 40px rgba(11,34,57,.08);
  padding:0 1.5rem 1.5rem;
}
.proj-meta-head{
  margin:0 -1.5rem 1rem;
  padding:1.15rem 1.5rem;
  background:linear-gradient(120deg, var(--ej-navy-deep), var(--ej-navy-soft));
  position:relative;
}
.proj-meta-head::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, var(--ej-green), rgba(166,195,57,.15));
}
.proj-meta-head h3{
  font-size:1rem; font-weight:700; color:var(--ej-white); margin:0;
}
.proj-meta-row{
  display:flex; align-items:flex-start; gap:.9rem;
  padding:.85rem 0; border-bottom:1px solid var(--ej-line);
}
.proj-meta-row:last-of-type{ border-bottom:none; }
.proj-meta-ic{
  width:40px; height:40px; flex:0 0 auto; border-radius:10px;
  background:rgba(166,195,57,.14); color:var(--ej-green-dark);
  display:grid; place-items:center; font-size:1.05rem;
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.proj-meta-row:hover .proj-meta-ic{
  background:var(--ej-green); color:var(--ej-navy); transform:scale(1.06);
}
.proj-meta-txt{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.proj-meta-label{
  color:var(--ej-muted); font-size:.7rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
}
.proj-meta-value{ font-size:.94rem; font-weight:600; color:var(--ej-navy); }

.proj-status-pill{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.8rem; font-weight:700;
  border-radius:50rem; padding:.3rem .8rem; margin-top:.1rem;
}
.proj-status-pill--completed{ background:rgba(166,195,57,.18); color:#5d731a; }
.proj-status-pill--ongoing{ background:rgba(255,180,0,.16); color:#8a6100; }

.proj-cat-chip{
  display:inline-block; font-size:.74rem; font-weight:600;
  background:rgba(166,195,57,.16); color:#5d731a;
  border-radius:50rem; padding:.25rem .7rem; margin:0 .2rem .3rem 0;
}

/* =========================================================
   CLIENT LOGO CARDS (dynamic, homepage)
   Base .client-card styles live in styles.css; these cover
   the link wrapper and no-logo fallback.
   ========================================================= */
a.client-card{ text-decoration:none; }
.client-fallback{
  width:44px; height:44px; border-radius:12px;
  background:rgba(166,195,57,.16); color:var(--ej-green-dark);
  display:grid; place-items:center;
  font-weight:900; font-size:1.15rem;
}

/* =========================================================
   INSIGHT DETAIL PAGES
   ========================================================= */
/* Article meta bar */
.ins-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.4rem;
  padding:1rem 1.3rem;
  background:var(--ej-cream); border-radius:var(--ej-radius);
}
.ins-meta-item{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.86rem; font-weight:600; color:var(--ej-muted);
}
.ins-meta-item .bi{ color:var(--ej-green-dark); }

/* Case study blocks */
.cs-block{ margin-bottom:2.2rem; }
.cs-block-head{
  display:flex; align-items:center; gap:1rem; margin-bottom:.9rem;
}
.cs-num{
  font-size:.9rem; font-weight:900; color:var(--ej-green-dark);
  background:rgba(166,195,57,.14);
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; flex:0 0 auto;
}
.cs-block-head h2{
  font-size:1.35rem; font-weight:700; color:var(--ej-navy); margin:0;
}

/* =========================================================
   STATS — elevated card bridging the hero curve
   ========================================================= */
.stats-band{
  position:relative;
  margin-top:-64px;          /* pulls the card up over the hero curve */
  padding-bottom:2.5rem;
  background:var(--ej-cream); /* fills the gap down to the cream section below */
}
/* The card must sit ABOVE the hero; the band background sits BELOW the hero so the
   hero's own curve (green on home, navy on inner pages) always paints on top of the
   cream in the overlap zone — no flat cream edge cutting across the curve. */
.stats-band .stats-card{ position:relative; z-index:6; }
.stats-card{
  background:var(--ej-white);
  border:1px solid var(--ej-line);
  border-radius:var(--ej-radius-lg);
  box-shadow:0 24px 60px rgba(11,34,57,.14);
  padding:1.9rem 2.2rem;
}
.stat-cell{
  display:flex; align-items:center; gap:1rem;
  padding-inline-start:1.4rem;
  border-inline-start:1px solid var(--ej-line);
}
/* first cell of each visual row has no divider */
.stats-card .col-6:first-child .stat-cell{ border-inline-start:none; padding-inline-start:0; }
@media (min-width: 992px){
  .stats-card .col-lg-3:first-child .stat-cell{ border-inline-start:none; padding-inline-start:0; }
}
@media (max-width: 991.98px){
  /* 2x2: kill dividers on the left column */
  .stats-card .col-6:nth-child(odd) .stat-cell{ border-inline-start:none; padding-inline-start:0; }
}
.stat-tile{
  width:52px; height:52px; flex:0 0 auto; border-radius:14px;
  background:rgba(166,195,57,.15); color:var(--ej-green-dark);
  display:grid; place-items:center; font-size:1.35rem;
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.stat-cell:hover .stat-tile{
  background:var(--ej-green); color:var(--ej-navy); transform:translateY(-2px);
}
.stat-num{
  font-size:1.7rem; font-weight:900; color:var(--ej-navy); line-height:1.05;
  display:flex; align-items:baseline; gap:.05rem;
}
.stat-plus{ color:var(--ej-green-dark); font-size:1.25rem; font-weight:900; }
.stat-label{
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ej-navy); margin-top:.15rem;
}
.stat-sub{ font-size:.82rem; color:var(--ej-muted); margin-top:.1rem; }

@media (max-width: 767.98px){
  .stats-band{ margin-top:-48px; }
  .stats-card{ padding:1.4rem 1.3rem; }
  .stat-tile{ width:44px; height:44px; font-size:1.15rem; border-radius:12px; }
  .stat-num{ font-size:1.4rem; }
}

/* =========================================================
   PILLARS — "Why choose Ejada" redesign
   Overrides the base .pillar-* rules in styles.css (this file
   loads after). Full-image cards: taller, description lives
   over the image, larger titles, number badge, gradient scrim.
   ========================================================= */
.pillar-card{
  display:block; position:relative; height:100%;
  border-radius:var(--ej-radius-lg); overflow:hidden;
  text-decoration:none;
  box-shadow:0 10px 30px rgba(11,34,57,.10);
  transition:transform .4s ease, box-shadow .4s ease;
}
.pillar-card:hover{ transform:translateY(-8px); box-shadow:var(--ej-shadow-lg); }

/* the image now fills the whole card */
.pillar-media{
  position:relative; height:100%; min-height:420px; overflow:hidden;
}
.pillar-media img{
  position:absolute; inset:0;
  width:100%; height:100%; aspect-ratio:auto; object-fit:cover;
  transition:transform .7s ease;
}
.pillar-card:hover .pillar-media img{ transform:scale(1.06); }

/* navy scrim: subtle at top, deep at the bottom where text sits */
.pillar-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(
    to top,
    rgba(6,20,35,.96) 0%,
    rgba(7,22,38,.86) 22%,
    rgba(8,26,44,.45) 46%,
    rgba(8,26,44,.10) 70%,
    rgba(8,26,44,.28) 100%);
  transition:background .4s ease;
}
.pillar-card:hover .pillar-media::after{
  background:linear-gradient(
    to top,
    rgba(6,20,35,.97) 0%,
    rgba(7,22,38,.90) 26%,
    rgba(8,26,44,.55) 52%,
    rgba(8,26,44,.18) 75%,
    rgba(8,26,44,.32) 100%);
}

/* number badge, top-left — chip keeps it legible on any image */
.pillar-num{
  position:absolute; top:1rem; left:1rem; z-index:3;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .8rem;
  font-size:1rem; font-weight:900; letter-spacing:.04em;
  color:var(--ej-green);
  background:rgba(6,20,35,.55);
  border:1px solid rgba(166,195,57,.35);
  border-radius:50rem;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:background .4s ease, border-color .4s ease;
}
.pillar-num::before{
  content:""; display:inline-block; width:18px; height:2px;
  background:var(--ej-green); opacity:.8;
}
.pillar-card:hover .pillar-num{
  background:var(--ej-green); border-color:var(--ej-green); color:var(--ej-navy);
}
.pillar-card:hover .pillar-num::before{ background:var(--ej-navy); }

/* text stack pinned to the bottom, over the image */
.pillar-content{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1.5rem 1.4rem 1.6rem;
}
.pillar-media .overlay-title{
  position:static; padding:0; background:none;
  color:#fff; font-weight:800;
  font-size:1.45rem; line-height:1.22;
  letter-spacing:-.01em;
  text-shadow:0 2px 12px rgba(6,20,35,.5);
}
.pillar-media .overlay-title span{
  /* second word: same size and weight, green accent — one continuous
     title, matching the site's two-tone heading idiom */
  display:inline; font-weight:800; font-size:inherit;
  color:var(--ej-green); margin-top:0;
  text-shadow:0 2px 12px rgba(6,20,35,.5);
}
/* description: hidden by default, slides in on hover */
.pillar-desc{
  margin:0; color:rgba(255,255,255,.9);
  font-size:.9rem; line-height:1.5;
  max-height:0; opacity:0; overflow:hidden;
  transform:translateY(6px);
  transition:max-height .45s ease, opacity .4s ease, transform .45s ease, margin-top .45s ease;
}
.pillar-card:hover .pillar-desc,
.pillar-card:focus-visible .pillar-desc{
  max-height:120px; opacity:1; transform:translateY(0); margin-top:.7rem;
}


/* subtle down-cue so the resting card invites a hover */
.pillar-content::after{
  content:"\2192";              /* → */
  position:absolute; right:1.4rem; bottom:1.6rem;
  color:var(--ej-green); font-size:1.3rem; font-weight:700;
  opacity:0; transform:translateX(-6px);
  transition:opacity .4s ease, transform .4s ease;
}
.pillar-card:hover .pillar-content::after,
.pillar-card:focus-visible .pillar-content::after{
  opacity:1; transform:translateX(0);
}
@media (hover: none){
  .pillar-content::after{ opacity:1; transform:none; }
}

/* accent bar sits at the very bottom edge, above the image */
.pillar-card .accent-bar{
  position:absolute; left:0; bottom:0; z-index:3;
  height:4px; width:0; background:var(--ej-green);
  transition:width .45s ease;
}
.pillar-card:hover .accent-bar{ width:100%; }

/* touch devices: no hover, so always show the description */
@media (hover: none){
  .pillar-desc{ max-height:120px; opacity:1; transform:none; margin-top:.7rem; }
  .pillar-card .accent-bar{ width:100%; }
}

@media (max-width: 991.98px){
  .pillar-media{ min-height:360px; }
}

/* =========================================================
   PROCESS STEPS — align with the site's tile + green language
   Overrides base .step-* rules in styles.css (loads after).
   No connector line; icons are soft-green rounded tiles that
   fill green on hover; generous spacing so each stage breathes.
   ========================================================= */

/* remove the connector line entirely — the 01–04 numbers imply sequence */
.process-steps::before{ display:none; }
.process-steps::after{ display:none; }

/* generous vertical rhythm between stages */
.process-steps .step{
  display:flex; align-items:flex-start; gap:1.25rem;
  padding:1.4rem 0;
  border-bottom:1px solid rgba(11,34,57,.07);
}
.process-steps .step:first-child{ padding-top:0; }
.process-steps .step:last-child{ padding-bottom:0; border-bottom:none; }

/* ghost number: larger, quieter, fixed width so icons + text align */
.step .ghost-num{
  width:70px; flex:0 0 auto; text-align:left;
  font-size:2.6rem; font-weight:900; letter-spacing:-.03em;
  color:rgba(11,34,57,.10); line-height:1;
  transition:color .35s ease, transform .35s ease;
}
.step:hover .ghost-num{ color:var(--ej-green); transform:translateX(-3px); }

/* icon: rounded-square soft-green tile (matches stats + pillar chips) */
.step .step-icon{
  width:58px; height:58px; flex:0 0 auto; border-radius:16px;
  background:rgba(166,195,57,.16);
  color:var(--ej-green-dark); font-size:1.35rem;
  display:grid; place-items:center; position:relative; z-index:1;
  outline:none; box-shadow:0 6px 18px rgba(11,34,57,.06);
  transition:background .35s ease, color .35s ease, transform .35s ease;
}
.step:hover .step-icon{
  background:var(--ej-green); color:var(--ej-navy); transform:translateY(-3px) scale(1.05);
}

/* text: a little more room, clear hover focus */
.step h5{ margin:0 0 .3rem; font-size:1.1rem; transition:color .3s ease; }
.step:hover h5{ color:var(--ej-green-dark); }
.step p{ margin:0; font-size:.9rem; color:var(--ej-muted); max-width:340px; line-height:1.55; }

/* =========================================================
   HOMEPAGE SERVICE CARDS — tie into the page's interaction
   language (green accent sweep on hover, like the pillars).
   Base .service-card styles live in styles.css; this only adds.
   ========================================================= */
.service-card::after{
  content:""; position:absolute; left:0; bottom:0; z-index:2;
  height:4px; width:0; background:var(--ej-green);
  transition:width .45s ease;
}
.service-card:hover::after{ width:100%; }

/* deepen the overlay a touch on hover so revealed text reads cleanly */
.service-card .sc-overlay{ transition:background .4s ease; }
.service-card:hover .sc-overlay{
  background:linear-gradient(to top, rgba(6,20,35,.96) 12%, rgba(8,26,44,.45) 60%, rgba(8,26,44,.10));
}

/* ---- Service cards: title weight + clean squared arrow badge ---- */
.service-card h5{
  font-size:1.2rem; font-weight:700; line-height:1.25;
  margin:0 0 .3rem; letter-spacing:-.005em;
  text-shadow:0 2px 10px rgba(6,20,35,.4);
}
.service-card .sc-overlay{ padding:1.25rem; }

/* squared arrow badge, no rotation — overrides the rotate(-45deg) in styles.css */
.service-card .sc-arrow{
  width:38px; height:38px; border-radius:11px;
  transform:translate(6px,-6px) rotate(0deg);
}
.service-card:hover .sc-arrow{
  transform:translate(0,0) rotate(0deg);
}

/* ---- Clients: larger logos, full colour at rest, cleaner cards ---- */
.client-card{
  height:130px;
  filter:none;                       /* full colour at rest — was grayscale(.35) */
  padding:.75rem 1rem;
  border-color:rgba(11,34,57,.08);
}
.client-card:hover{
  filter:none;
  border-color:rgba(166,195,57,.55);
}
/* Seeded logos ship pre-balanced on a transparent 2:1 canvas, so every
   logo gets the same 2:1 box; contain keeps admin uploads of any shape inside it */
.client-logo{
  width:100%; height:auto;
  max-width:none; max-height:none;
  aspect-ratio:2 / 1;
  object-fit:contain;
  transition:transform .35s ease;
}
.client-card:hover .client-logo{ transform:scale(1.06); }

/* ---- Clients marquee: two full-bleed rows drifting in opposite directions.
   Each track holds its group twice; translating -50% lands exactly on the
   copy, so the loop is seamless. The trailing padding on each group stands
   in for the gap between the two copies. Pauses on hover / keyboard focus. */
.cl-rows{ margin-top:2.25rem; }
.cl-marquee{
  overflow:hidden;
  direction:ltr;                     /* loop maths assume LTR; rtl.css mirrors the drift */
  padding-block:.6rem;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.cl-track{
  display:flex; width:max-content;
  animation:cl-scroll calc(var(--cl-count) * 4.5s) linear infinite;
}
.cl-marquee:nth-child(2) .cl-track{ animation-direction:reverse; }
.cl-marquee:hover .cl-track,
.cl-marquee:focus-within .cl-track{ animation-play-state:paused; }
@keyframes cl-scroll{ to{ transform:translateX(-50%); } }

.cl-group{
  display:flex; gap:1rem;
  list-style:none; margin:0; padding:0;
  padding-inline-end:1rem;
}
.cl-group .client-card{ width:200px; height:104px; }
.cl-group .client-card:hover{ box-shadow:0 10px 22px rgba(11,34,57,.09); }

@media (max-width:575.98px){
  .cl-group{ gap:.75rem; padding-inline-end:.75rem; }
  .cl-group .client-card{ width:148px; height:80px; padding:.5rem .7rem; border-radius:10px; }
}

/* Static layout: short client lists, and visitors who prefer reduced motion
   (styles.css already kills the animation globally). Both rows collapse into
   one centred wrap — display:contents lifts the tiles out of the marquee boxes. */
.cl-static{
  display:flex; flex-wrap:wrap; justify-content:center; gap:1rem;
  max-width:1320px; margin-inline:auto; padding-inline:1rem;
}
.cl-static :is(.cl-marquee, .cl-track, .cl-group){ display:contents; }
.cl-static .cl-group > li{ list-style:none; }
@media (prefers-reduced-motion: reduce){
  .cl-rows{
    display:flex; flex-wrap:wrap; justify-content:center; gap:1rem;
    max-width:1320px; margin-inline:auto; padding-inline:1rem;
  }
  .cl-rows :is(.cl-marquee, .cl-track, .cl-group){ display:contents; }
  .cl-group > li{ list-style:none; }
  .cl-dup{ display:none !important; }
}
@media (max-width:575.98px){
  .cl-static, .cl-rows{ gap:.5rem; }
  /* three across on phones so the wrap stays compact */
  .cl-static .client-card{ width:calc((100vw - 3rem) / 3); height:64px; }
}
@media (max-width:575.98px) and (prefers-reduced-motion: reduce){
  .cl-group .client-card{ width:calc((100vw - 3rem) / 3); height:64px; }
}


/* =========================================================
   CTA — full-width band (overrides the floating rounded box
   in styles.css). Flows white(clients) → navy(CTA) → cream(footer):
   two clean transitions instead of a detached island.
   ========================================================= */
.cta{
  margin:0;                 /* was 0 18px */
  border-radius:0;          /* was 56px */
}
@media (max-width:767px){
  .cta{ margin:0; border-radius:0; }
}
/* footer flows straight out of the navy CTA — drop the redundant top border */
.cta + .footer{ border-top:none; }

/* =========================================================
   CUSTOM DROPDOWN (contact form service select)
   Styled UI over a hidden native <select>. Matches the
   form-control look; menu uses the site's green language.
   ========================================================= */
.ej-select{ position:relative; }
.ej-select-native{                      /* real select, visually hidden but present for submit/a11y */
  position:absolute; opacity:0; width:100%; height:100%; inset:0;
  pointer-events:none;
}
.ej-select-trigger{
  width:100%; text-align:start;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  background:var(--ej-white);
  border:1px solid var(--ej-line); border-radius:10px;
  padding:.85rem 1rem; font-size:.95rem; color:var(--ej-ink);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.ej-select.open .ej-select-trigger,
.ej-select-trigger:focus-visible{
  outline:none; border-color:var(--ej-green);
  box-shadow:0 0 0 .18rem rgba(166,195,57,.2);
}
.ej-select-value.is-placeholder{ color:#8a97a3; }   /* mimic native placeholder */
.ej-select-caret{ color:var(--ej-muted); font-size:.85rem; transition:transform .3s ease; }
.ej-select.open .ej-select-caret{ transform:rotate(180deg); color:var(--ej-green-dark); }

.ej-select-menu{
  position:absolute; z-index:30; left:0; right:0; top:calc(100% + 6px);
  margin:0; padding:.4rem; list-style:none;
  background:var(--ej-white); border:1px solid var(--ej-line); border-radius:12px;
  box-shadow:0 18px 45px rgba(11,34,57,.16);
  max-height:280px; overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.ej-select.open .ej-select-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.ej-select-option{
  padding:.65rem .8rem; border-radius:8px; font-size:.92rem; color:var(--ej-ink);
  cursor:pointer; transition:background .2s ease, color .2s ease;
}
.ej-select-option:hover{ background:rgba(166,195,57,.14); }
.ej-select-option.is-active{
  background:var(--ej-green); color:var(--ej-navy); font-weight:600;
}
.ej-select.is-invalid .ej-select-trigger{ border-color:#dc3545; }

/* ---- Project cards: image region chip + hover accent (page consistency) ---- */
.proj-card{ position:relative; }
.proj-media{ position:relative; }
/* region chip sits on the image, matching the site's badge language */
.proj-media .proj-chip{
  position:absolute; top:.9rem; left:.9rem; z-index:2;
  display:inline-flex; align-items:center;
  padding:.32rem .7rem; border-radius:50rem;
  font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ej-green); background:rgba(6,20,35,.55);
  border:1px solid rgba(166,195,57,.35);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
/* green accent sweep at the card's bottom on hover */
.proj-card::after{
  content:""; position:absolute; left:0; bottom:0; z-index:2;
  height:4px; width:0; background:var(--ej-green); transition:width .45s ease;
}
.proj-card:hover::after{ width:100%; }


/* ---- Insight cards: type chip on image + hover accent (page consistency) ---- */
.ins-card{ position:relative; }
.ins-media{ position:relative; }
.ins-media .ins-chip{
  position:absolute; top:.8rem; left:.8rem; z-index:2;
  display:inline-flex; align-items:center;
  padding:.3rem .65rem; border-radius:50rem;
  font-size:.64rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ej-green); background:rgba(6,20,35,.55);
  border:1px solid rgba(166,195,57,.35);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.ins-card::after{
  content:""; position:absolute; left:0; bottom:0; z-index:2;
  height:4px; width:0; background:var(--ej-green); transition:width .45s ease;
}
.ins-card:hover::after{ width:100%; }

/* =========================================================
   INNER-PAGE HERO — remove white corner wedges
   The curved hero leaves its rectangular corners exposing the
   body (white). .hero-wrap is the box whose corners show; make
   it cream so those wedges merge into the cream section below.
   Uses a plain descendant selector (no :has) for reliability.
   The homepage hero uses .hero (not .hero--page) and is styled
   separately, so it is unaffected.
   ========================================================= */
.hero-wrap:has(> .hero--page){ background:var(--hero-backdrop, var(--ej-cream)); border-radius:0; padding-bottom:0; }

/* hero paints over the stats-band cream in the overlap zone */
.hero-wrap{ position:relative; z-index:4; }

/* ---- Inner-page hero polish ---- */
/* soft green radial glow in the lower-left, adds depth without noise */
.hero--page::after{
  content:""; position:absolute; left:-10%; bottom:-30%;
  width:55%; height:80%; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(166,195,57,.14), transparent 65%);
}
/* keep hero text above the glow */
.hero--page .container{ position:relative; z-index:1; }

/* ---- Filter transitions: cards fade/scale in when filters change ---- */
.proj-item, .ins-item{
  transition:opacity .35s ease, transform .35s ease;
}
.proj-item.filtering, .ins-item.filtering{
  opacity:0; transform:scale(.97);
}

/* filter-variant of ej-select: compact inline width for card filters */
.ej-select--filter{ min-width:190px; }
.ej-select--filter .ej-select-trigger{ padding:.6rem .9rem; font-size:.88rem; border-radius:50rem; }
.ej-select--filter .ej-select-menu{ font-size:.9rem; }

/* ej-select: ensure the open dropdown paints above surrounding content
   (reveal animations create competing stacking contexts) */
.ej-select{ z-index:1; }
.ej-select.open{ z-index:80; }

/* Release the reveal transform once animation completes: translateY(0) is still a
   transform, which keeps a stacking context alive forever and traps open dropdowns
   below later-DOM siblings. transform:none is interpolable, so the animation is
   unaffected — but the stacking context is released after reveal. */
.reveal.in-view{ transform:none; }

/* belt & braces: raise the dropdown's positioned ancestor while open */
.reveal:has(.ej-select.open){ position:relative; z-index:80; }

/* =========================================================
   PRIVACY POLICY — clean legal-text layout
   ========================================================= */
.privacy-updated{
  font-size:.85rem; color:var(--ej-muted);
  padding-bottom:1.2rem; margin-bottom:2rem;
  border-bottom:1px solid var(--ej-line);
}
.privacy-block{ margin-bottom:2.2rem; }
.privacy-block h2{
  font-size:1.25rem; font-weight:700; color:var(--ej-navy);
  margin-bottom:.6rem; position:relative; padding-inline-start:1rem;
}
.privacy-block h2::before{
  content:""; position:absolute; inset-inline-start:0; top:.3em; bottom:.3em;
  width:4px; border-radius:4px; background:var(--ej-green);
}
.privacy-block p{
  font-size:.95rem; line-height:1.75; color:var(--ej-muted); margin:0;
}

/* =========================================================
   MOBILE DRAWER — replaces the broken Bootstrap collapse.
   Slide-in navy panel with ghost-numbered links, staggered
   entrance, backdrop blur overlay. Desktop nav untouched.
   ========================================================= */
.ej-drawer-overlay{
  position:fixed; inset:0; z-index:1040;
  background:rgba(6,20,35,.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; transition:opacity .35s ease;
}
.ej-drawer-overlay.show{ opacity:1; }

.ej-drawer{
  position:fixed; top:0; bottom:0; inset-inline-end:0; z-index:1050;
  width:min(85vw, 360px);
  display:flex; flex-direction:column;
  background:linear-gradient(160deg, var(--ej-navy) 0%, var(--ej-navy-deep) 100%);
  box-shadow:-24px 0 60px rgba(6,20,35,.45);
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(.22,.8,.3,1);
  visibility:hidden;
}
.ej-drawer.open{ transform:translateX(0); visibility:visible; }

/* subtle green glow, echoing the page heroes */
.ej-drawer::after{
  content:""; position:absolute; left:-20%; bottom:-15%;
  width:70%; height:50%; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(166,195,57,.12), transparent 65%);
}

.ej-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.4rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ej-drawer-logo{ height:52px; }
.ej-drawer-close{
  width:42px; height:42px; border:none; border-radius:12px;
  background:rgba(255,255,255,.08); color:#fff;
  display:grid; place-items:center; font-size:1rem;
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.ej-drawer-close:hover{ background:var(--ej-green); color:var(--ej-navy); transform:rotate(90deg); }

.ej-drawer-nav{
  flex:1; display:flex; flex-direction:column;
  padding:1.2rem 1.4rem; gap:.15rem; overflow-y:auto;
}
.ej-drawer-link{
  display:flex; align-items:center; gap:.9rem;
  padding:.85rem .4rem;
  font-size:1.25rem; font-weight:700; color:rgba(255,255,255,.88);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:color .25s ease, padding-inline-start .25s ease;
  /* staggered entrance (driven by .open on the drawer) */
  opacity:0; transform:translateX(18px);
}
.ej-drawer.open .ej-drawer-link{
  opacity:1; transform:none;
  transition:opacity .4s ease, transform .4s ease, color .25s ease, padding-inline-start .25s ease;
}
.ej-drawer.open .ej-drawer-link:nth-child(1){ transition-delay:.08s; }
.ej-drawer.open .ej-drawer-link:nth-child(2){ transition-delay:.14s; }
.ej-drawer.open .ej-drawer-link:nth-child(3){ transition-delay:.20s; }
.ej-drawer.open .ej-drawer-link:nth-child(4){ transition-delay:.26s; }
.ej-drawer.open .ej-drawer-link:nth-child(5){ transition-delay:.32s; }
.ej-drawer-link:hover{ color:var(--ej-green); padding-inline-start:.7rem; }
.ej-drawer-link.active{ color:var(--ej-green); }
.ej-drawer-num{
  font-size:.72rem; font-weight:900; letter-spacing:.08em;
  color:rgba(166,195,57,.55); width:1.6rem; flex:0 0 auto;
}
.ej-drawer-link.active .ej-drawer-num{ color:var(--ej-green); }

.ej-drawer-foot{
  padding:1.2rem 1.4rem 1.5rem;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; gap:.9rem;
  position:relative; z-index:1;
}
.ej-drawer-lang{
  display:inline-flex; align-items:center; gap:.55rem; align-self:flex-start;
  padding:.5rem .95rem; border-radius:50rem;
  font-size:.9rem; font-weight:600; color:#fff; text-decoration:none;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(166,195,57,.35);
  transition:background .3s ease, color .3s ease;
}
.ej-drawer-lang:hover{ background:var(--ej-green); color:var(--ej-navy); }
.ej-drawer-contacts{ display:flex; gap:.7rem; }
.ej-drawer-contacts a{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.08); color:#fff; font-size:1.05rem;
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.ej-drawer-contacts a:hover{ background:var(--ej-green); color:var(--ej-navy); transform:translateY(-3px); }

/* drawer is mobile-only; desktop keeps the inline nav */
@media (min-width: 992px){
  .ej-drawer, .ej-drawer-overlay{ display:none !important; }
}
/* body scroll lock while open */
body.ej-drawer-open{ overflow:hidden; }

/* =========================================================
   SCRIM PASS (client feedback): keep text side dark, open up
   the image side so photography reads. Hero & CTA gradients
   moved out of inline styles into classes so RTL can mirror.
   ========================================================= */
.hero--home{
  background:
    linear-gradient(to bottom, rgba(8,26,44,.72) 0, rgba(8,26,44,.38) 90px, rgba(8,26,44,0) 170px),
    linear-gradient(100deg, rgba(8,26,44,.94) 22%, rgba(8,26,44,.42) 55%, rgba(8,26,44,0) 82%),
    var(--hero-bg) center/cover no-repeat;
}
.cta{
  background:
    linear-gradient(100deg, rgba(8,26,44,.80) 30%, rgba(8,26,44,.28) 68%, rgba(8,26,44,.08)),
    var(--cta-bg) center/cover no-repeat;
}
.hero--page{
  background:
    linear-gradient(to bottom, rgba(8,26,44,.72) 0, rgba(8,26,44,.38) 90px, rgba(8,26,44,0) 170px),
    linear-gradient(100deg, rgba(8,26,44,.94) 25%, rgba(8,26,44,.42) 55%, rgba(8,26,44,0) 85%),
    var(--hero-bg, url('https://placehold.co/1920x800/12314e/a6c339?text=Ejada')) center/cover no-repeat;
}

/* Pillar cards: image clear on top, scrim rises only where text sits */
.pillar-media::after{
  background:linear-gradient(
    to top,
    rgba(6,20,35,.94) 0%,
    rgba(7,22,38,.78) 22%,
    rgba(8,26,44,.30) 46%,
    rgba(8,26,44,.04) 68%,
    rgba(8,26,44,.06) 100%);
}
.pillar-card:hover .pillar-media::after{
  background:linear-gradient(
    to top,
    rgba(6,20,35,.96) 0%,
    rgba(7,22,38,.84) 26%,
    rgba(8,26,44,.42) 52%,
    rgba(8,26,44,.10) 74%,
    rgba(8,26,44,.10) 100%);
}

/* Homepage service cards: same principle */
.service-card .sc-overlay{
  background:linear-gradient(to top, rgba(8,26,44,.92) 10%, rgba(8,26,44,.14) 52%, transparent 78%);
}
.service-card:hover .sc-overlay{
  background:linear-gradient(to top, rgba(6,20,35,.96) 12%, rgba(8,26,44,.30) 58%, rgba(8,26,44,.02));
}

/* =========================================================
   RICH BODY CONTENT — media embedded via the admin editor
   ========================================================= */
.proj-detail-body img{
  max-width:100%; height:auto; border-radius:14px;
  margin:1.25rem 0; box-shadow:0 10px 30px rgba(11,34,57,.10);
}
.proj-detail-body iframe,
.proj-detail-body video{
  max-width:100%; width:100%; aspect-ratio:16/9; height:auto;
  border:0; border-radius:14px; margin:1.25rem 0;
  box-shadow:0 10px 30px rgba(11,34,57,.12);
}
.proj-detail-body h3{ font-size:1.3rem; margin:1.6rem 0 .6rem; }
.proj-detail-body h4{ font-size:1.1rem; margin:1.3rem 0 .5rem; }
.proj-detail-body ul, .proj-detail-body ol{ padding-inline-start:1.4rem; margin-bottom:1rem; }
.proj-detail-body li{ margin-bottom:.35rem; }
.proj-detail-body blockquote{
  border-inline-start:4px solid var(--ej-green);
  padding:.35rem 1rem; margin:1.25rem 0;
  color:var(--ej-muted); font-style:italic;
}
.proj-detail-body p{ margin-bottom:1rem; }

/* =========================================================
   ABOUT — editorial composition (Story / Mission·Vision / Pillars)
   Numbered 01–06; rhythm: cream -> navy -> white.
   ========================================================= */

/* shared ghost numeral */
.ed-block{ position:relative; }

/* 01 — story */
.ed-heading{ font-size:clamp(1.9rem, 3vw, 2.6rem); position:relative; }
.ed-lede{
  font-size:1.18rem; line-height:1.75; color:var(--ej-ink);
  padding-inline-start:1.2rem; margin-bottom:1.4rem;
  border-inline-start:3px solid var(--ej-green);
}
.ed-body{ font-size:.98rem; line-height:1.8; color:var(--ej-muted); }


/* =========================================================
   ABOUT — refinement pass: imagery, staggered composition,
   progression framework, featured value, split closing.
   ========================================================= */

/* 01 · story media: architectural crop with offset frame */
.story-media{ position:relative; margin:0; padding-inline-start:1.1rem; padding-top:1.1rem; }
.story-media::before{
  content:""; position:absolute; top:0; inset-inline-start:0;
  width:70%; height:70%; border-radius:var(--ej-radius-lg);
  border:2px solid rgba(166,195,57,.55);
}
.story-media img{
  position:relative; width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--ej-radius-lg); box-shadow:var(--ej-shadow);
}

/* 02–03 · mission & vision: staggered, expressive numerals */

/* 04–06 · framework: progression line through nodes */

/* values: featured panel + typographic entries */
.valf{
  position:relative; height:100%; overflow:hidden;
  background:
    radial-gradient(420px 300px at 90% 110%, rgba(166,195,57,.14), transparent 60%),
    linear-gradient(135deg, var(--ej-navy), var(--ej-navy-deep));
  border-radius:var(--ej-radius-lg);
  padding:2.6rem 2.4rem;
  display:flex; flex-direction:column; justify-content:flex-end; min-height:340px;
}
.valf-mark{
  position:absolute; top:2.2rem; inset-inline-start:2.4rem;
  width:52px; height:52px; border-radius:14px;
  background:rgba(166,195,57,.18); color:var(--ej-green);
  display:grid; place-items:center; font-size:1.3rem;
}
.valf h3{ color:#fff; font-size:1.7rem; font-weight:800; margin-bottom:.6rem; }
.valf p{ color:rgba(255,255,255,.78); font-size:.98rem; line-height:1.75; margin:0; max-width:36ch; }

.val-entry{
  height:100%; padding:1.5rem 1.6rem 1.5rem 0; padding-inline:0 1.6rem;
  border-top:1px solid var(--ej-line); position:relative;
}
/* the even-column indent + divider only exist once the list is two columns */
@media (min-width: 768px){
  .val-list .col-md-6:nth-child(even) .val-entry{ padding-inline:1.6rem 0; border-inline-start:1px solid var(--ej-line); }
  .val-list .col-md-6:nth-child(even) .val-entry::before{ inset-inline-start:1.6rem; }
}
.val-entry::before{
  content:""; position:absolute; top:-1px; inset-inline-start:0;
  width:34px; height:2px; background:var(--ej-green);
  transition:width .5s ease;
}
.val-entry:hover::before{ width:60px; }
.val-entry h4{ font-size:1.05rem; font-weight:700; margin-bottom:.45rem; }
.val-entry p{ font-size:.9rem; line-height:1.7; color:var(--ej-muted); margin:0; }

/* closing: full-width split with photographic half */
.closing{
  position:relative; overflow:hidden;
  background:linear-gradient(120deg, var(--ej-navy-deep) 0%, var(--ej-navy) 100%);
  padding:96px 0;
}
.closing-media{
  position:absolute; top:0; bottom:0; inset-inline-end:0; width:44%;
  background-size:cover; background-position:center;
}
.closing-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to var(--closing-fade, right), rgba(8,26,44,.92), rgba(8,26,44,.25) 45%, rgba(8,26,44,.05));
}
[dir="rtl"] .closing-media::after{ --closing-fade: left; }
.closing .container{ position:relative; z-index:1; }
.closing-heading{ color:#fff; font-size:clamp(1.9rem, 3vw, 2.6rem); }
.closing-copy{ color:rgba(255,255,255,.75); max-width:46ch; }
.closing-outcomes{ border-top:1px solid rgba(255,255,255,.12); }
.co-item{
  padding:1.15rem 1.4rem 1.15rem 0; padding-inline:0 1.4rem;
  border-bottom:1px solid rgba(255,255,255,.12); height:100%;
}
@media (min-width: 576px){
  .closing-outcomes .col-sm-6:nth-child(even) .co-item{ padding-inline:1.4rem 0; border-inline-start:1px solid rgba(255,255,255,.12); }
}
.co-item h6{
  color:#fff; font-size:.95rem; font-weight:700; margin-bottom:.3rem;
  position:relative; padding-inline-start:1.1rem;
}
.co-item h6::before{
  content:""; position:absolute; inset-inline-start:0; top:.28em;
  width:.55rem; height:.55rem; border-radius:2px; background:var(--ej-green);
}
.co-item p{ color:rgba(255,255,255,.62); font-size:.84rem; line-height:1.65; margin:0; }
/* below lg the photo sits behind the whole section under a deep scrim,
   instead of trailing the content as a stray stacked image */
@media (max-width: 991px){
  .closing{ padding:64px 0; }
  .closing-media{ width:100%; }
  .closing-media::after{
    background:linear-gradient(to bottom, rgba(8,26,44,.97) 0%, rgba(8,26,44,.93) 55%, rgba(8,26,44,.78) 100%);
  }
}

/* story: slightly tighter vertical rhythm now the image carries the section */
#story{ padding-top:84px; padding-bottom:78px; }
@media (max-width: 991px){ #story{ padding-top:60px; padding-bottom:56px; } }


/* =========================================================
   ABOUT — Direction panel: hero mission statement + ledger
   (replaces the former Mission/Vision + pillars sections)
   ========================================================= */
.dir-band{
  position:relative; overflow:hidden;
  background:
    radial-gradient(700px 420px at 88% 0%, rgba(166,195,57,.10), transparent 60%),
    linear-gradient(120deg, var(--ej-navy-deep), var(--ej-navy));
  padding:84px 0;
}
.dir-statement{
  color:#fff; font-weight:800; letter-spacing:-.015em;
  font-size:clamp(1.7rem, 3.2vw, 2.7rem); line-height:1.3;
  max-width:21ch; margin-bottom:0;
}
.dir-ledger{
  margin-top:3.2rem; padding-top:2.6rem;
  border-top:1px solid rgba(255,255,255,.14);
}
.dir-term{ height:100%; }
.dir-key{
  display:inline-block; position:relative;
  font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ej-green); margin-bottom:.75rem; padding-top:.65rem;
}
.dir-key::before{
  content:""; position:absolute; top:0; inset-inline-start:0;
  width:24px; height:2px; background:var(--ej-green); border-radius:2px;
}
.dir-term p{
  color:rgba(255,255,255,.72); font-size:.9rem; line-height:1.7; margin:0;
}
@media (max-width: 991px){
  .dir-band{ padding:60px 0; }
  .dir-statement{ max-width:none; }
  .dir-ledger{ margin-top:2.4rem; padding-top:2rem; }
}

/* =========================================================
   TYPE SCALE PASS — larger section intros + justified copy
   ========================================================= */
/* homepage pillars intro (and reusable elsewhere) */
.sec-heading-lg{
  font-size:clamp(2.1rem, 3.5vw, 3rem); line-height:1.18; letter-spacing:-.02em;
}
.sec-copy-lg{
  font-size:1.05rem; line-height:1.85; color:var(--ej-muted);
  max-width:580px; text-align:justify; hyphens:auto;
}

/* About story: bigger presence */
.ed-heading{ font-size:clamp(2.1rem, 3.4vw, 3rem); }
.ed-lede{ font-size:1.25rem; line-height:1.8; }
.ed-body{ font-size:1.02rem; line-height:1.85; }

/* justify long-form copy site-wide (RTL-safe; Arabic justification is standard) */
.ed-lede, .ed-body,
.closing-copy,
.privacy-block p,
.proj-detail-body p{
  text-align:justify; hyphens:auto;
}

/* Contact: confidentiality / NDA assurance panel */
.confid-note{
  display:flex; gap:1rem; align-items:flex-start;
  background:linear-gradient(135deg, var(--ej-navy), var(--ej-navy-deep));
  border-radius:var(--ej-radius);
  padding:1.35rem 1.4rem; margin-top:1.6rem;
}
.confid-icon{
  width:46px; height:46px; flex:0 0 auto; border-radius:13px;
  background:rgba(166,195,57,.18); color:var(--ej-green);
  display:grid; place-items:center; font-size:1.2rem;
}
.confid-note h6{ color:#fff; font-size:.98rem; font-weight:700; margin-bottom:.35rem; }
.confid-note p{ color:rgba(255,255,255,.72); font-size:.86rem; line-height:1.7; margin:0; text-align:justify; }

/* =========================================================
   ABOUT — Responsibility: elevated card bridging cream -> navy
   (the site's stats-card overlap motif, reused deliberately)
   ========================================================= */
.resp-band{ background:var(--ej-cream); padding-top:72px; }
.resp-card{
  position:relative; z-index:2;
  background:#fff; border-radius:var(--ej-radius-lg);
  box-shadow:var(--ej-shadow-lg);
  padding:2.6rem 2.8rem 2.4rem;
  margin-bottom:-96px;
}
.resp-item{ height:100%; }
.resp-tile{
  width:48px; height:48px; border-radius:14px;
  background:rgba(166,195,57,.16); color:var(--ej-green-dark);
  display:grid; place-items:center; font-size:1.2rem; margin-bottom:1rem;
  transition:background .3s ease, color .3s ease;
}
.resp-item:hover .resp-tile{ background:var(--ej-green); color:var(--ej-navy); }
.resp-item h3{ font-size:1.12rem; font-weight:700; margin-bottom:.5rem; }
.resp-item p{ font-size:.93rem; line-height:1.75; color:var(--ej-muted); margin:0; }
@media (min-width: 992px){
  .resp-item{ padding-inline-end:2.2rem; }
  .resp-item--divided{
    border-inline-start:1px solid var(--ej-line);
    padding-inline-start:2.2rem;
  }
}
.closing--overlapped{ padding-top:190px; }
@media (max-width: 991px){
  .resp-card{ padding:1.8rem 1.5rem; margin-bottom:-72px; }
  .closing--overlapped{ padding-top:140px; }
}

/* =========================================================
   LABEL SYSTEM PASS — larger, consistent eyebrows site-wide
   ========================================================= */
/* Section/hero eyebrows: from ~.78rem up to a confident label size.
   One rule governs every eyebrow on the site for consistency. */
.eyebrow{
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.16em;
}

/* Direction ledger terms (About): same family, one step smaller
   to preserve hierarchy under the hero statement */
.dir-key{
  font-size:.88rem;
  letter-spacing:.14em;
}

/* =========================================================
   HERO LOGO BACKDROP — Ejada mark as a subtle watermark
   behind the hero text (opacity is baked into the SVG)
   ========================================================= */
.hero-backdrop{
  position:absolute;
  top:-6%; bottom:-6%;
  inset-inline-start:-6%;
  width:min(58%, 820px);
  background:url('../images/ejada-logo-backdrop.svg') no-repeat center / contain;
  pointer-events:none;
  z-index:0;
}
/* keep hero content above the backdrop */
.hero--home .container{ position:relative; z-index:1; }
@media (max-width: 991px){
  .hero-backdrop{ width:90%; inset-inline-start:-12%; }
}

/* inner-page heroes: same logo backdrop, content layered above */
.hero--page{ position:relative; }
.hero--page .container{ z-index:1; }

/* =========================================================
   SERVICE CATEGORY CARDS — no-image fallback
   Categories without an uploaded image render a branded tile
   instead of a placeholder graphic. The card title already
   sits in the overlay/body, so the tile carries no text —
   that avoids the duplicated, clipped name the old
   placehold.co image produced.
   The glow sits top-right to echo the .sc-arrow badge, which
   stays in that physical corner in Arabic too (rtl.css only
   flips its rotation) — so this tile takes no RTL mirror.
   ========================================================= */
.service-card .sc-fallback,
.svc-media .svc-fallback{
  background:
    radial-gradient(120% 90% at 78% 10%, rgba(166,195,57,.20) 0%, rgba(166,195,57,0) 58%),
    linear-gradient(145deg, var(--ej-navy-soft) 0%, var(--ej-navy-deep) 96%);
  transition:transform .6s ease;
}

/* Homepage tiles: fill the fixed-height card, sit under the overlay */
.service-card .sc-fallback{
  position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.service-card:hover .sc-fallback{ transform:scale(1.06); }

/* Services page tiles: match the 16/10 media box the <img> defines */
.svc-media .svc-fallback{
  display:block; width:100%; aspect-ratio:16/10;
}
.svc-card:hover .svc-fallback{ transform:scale(1.06); }


/* =========================================================
   SERVICE CATEGORY + SERVICE PAGES
   Hero breadcrumb, category service rows with deliverable
   previews, service deliverable tiles + sticky side column,
   and the shared "Other service areas" strip.
   Cards that also .reveal keep opacity/transform in their own
   transition lists so the entrance fade isn't lost.
   ========================================================= */

/* ---- Hero breadcrumb (stands in for the eyebrow) ---- */
.hero-crumbs ol{
  display:flex; flex-wrap:wrap; align-items:center; gap:.25rem .6rem;
  list-style:none; margin:0; padding:0;
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.hero-crumbs ol::before{
  content:""; width:34px; height:2px; border-radius:2px;
  background:var(--ej-green); opacity:.85;
}
.hero-crumbs li{ display:inline-flex; align-items:center; gap:.6rem; }
.hero-crumbs li::after{ content:"/"; color:rgba(255,255,255,.4); letter-spacing:0; }
.hero-crumbs a{ color:var(--ej-green); transition:color .2s ease; }
.hero-crumbs a:hover{ color:var(--ej-white); }

/* ---- Shared vertical link list (category jump list + service side nav) ---- */
.sc-jump ul,
.svc-nav ul{
  list-style:none; margin:0; padding:0;
  border-inline-start:2px solid var(--ej-line);
}
.sc-jump a,
.svc-nav-link{
  display:block; padding:.5rem 0; padding-inline-start:1rem;
  margin-inline-start:-2px; border-inline-start:2px solid transparent;
  color:var(--ej-muted); font-size:.88rem; font-weight:600; line-height:1.45;
  transition:color .2s ease, border-color .2s ease;
}
.sc-jump a:hover,
a.svc-nav-link:hover{ color:var(--ej-navy); border-color:rgba(166,195,57,.6); }
.sc-jump a.is-active,
.svc-nav-link.is-current{ color:var(--ej-navy); border-color:var(--ej-green); font-weight:700; }

/* ---- Category page ---- */
.sc-aside h2{ font-size:clamp(1.6rem,2.4vw,2.1rem); margin:.9rem 0 .8rem; }
.sc-aside p{ font-size:.95rem; max-width:34ch; }
.sc-jump{ margin-top:1.75rem; }
@media (min-width:992px){
  .sc-aside{ position:sticky; top:110px; }
}

.svc-rows{ display:grid; gap:1.25rem; }
.svc-row{
  position:relative; overflow:hidden;
  background:var(--ej-white);
  border:1px solid var(--ej-line); border-radius:var(--ej-radius-lg);
  padding:1.75rem 1.9rem;
  scroll-margin-top:110px;
  transition:opacity .7s ease, transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.svc-row::before{                      /* green accent bar sweep */
  content:""; position:absolute; inset-block:0; inset-inline-start:0; width:4px;
  background:var(--ej-green);
  transform:scaleY(0); transform-origin:top;
  transition:transform .45s ease;
}
.svc-row:hover{ transform:translateY(-4px); box-shadow:var(--ej-shadow); border-color:rgba(166,195,57,.45); }
.svc-row:hover::before{ transform:scaleY(1); }
.svc-row:has(.stretched-link:focus-visible){ outline:2px solid var(--ej-green); outline-offset:3px; }
.svc-row .stretched-link:focus-visible{ outline:none; }

.svc-row-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.svc-row h3{ font-size:1.2rem; line-height:1.35; margin:0; }
.svc-row h3 a{ color:var(--ej-navy); }
.svc-row-go{
  flex:0 0 auto; width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center;
  background:rgba(166,195,57,.16); color:var(--ej-green-dark);
  transition:background .3s ease, color .3s ease;
}
.svc-row-go i{ transition:transform .3s ease; }
.svc-row:hover .svc-row-go{ background:var(--ej-green); color:var(--ej-navy); }
.svc-row:hover .svc-row-go i{ transform:translate(2px,-2px); }
.svc-row-excerpt{ color:var(--ej-muted); font-size:.95rem; line-height:1.7; margin:.6rem 0 0; max-width:62ch; }

.svc-row-list{
  list-style:none; margin:1.2rem 0 0; padding:1.1rem 0 0;
  border-top:1px dashed rgba(11,34,57,.14);
  display:grid; gap:.55rem 1.5rem;
}
@media (min-width:768px){ .svc-row-list{ grid-template-columns:1fr 1fr; } }
.svc-row-list li{ display:flex; gap:.55rem; font-size:.86rem; line-height:1.55; color:var(--ej-ink); }
.svc-row-list i{ flex:0 0 auto; color:var(--ej-green-dark); font-size:1rem; line-height:1.4; }
.svc-row-more{
  display:inline-block; margin-top:.85rem; padding:.2rem .65rem; border-radius:50rem;
  background:rgba(166,195,57,.14); color:var(--ej-green-dark);
  font-size:.76rem; font-weight:700;
}
@media (max-width:575.98px){ .svc-row{ padding:1.4rem 1.25rem; } }

/* ---- Service page ---- */
.svc-intro{ font-size:1.1rem; line-height:1.85; color:var(--ej-ink); }
.svc-intro p{ margin-bottom:1rem; }
.svc-intro p:last-child{ margin-bottom:0; }
.svc-intro h2, .svc-intro h3{ font-size:1.3rem; margin:1.6rem 0 .6rem; }
.svc-h{ font-size:clamp(1.35rem,2vw,1.6rem); margin:2.6rem 0 1.25rem; }
.svc-prose h3{ margin-top:2rem; }

.svc-deliver{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
@media (min-width:768px){
  .svc-deliver{ grid-template-columns:1fr 1fr; }
  .svc-deliver li:last-child:nth-child(odd){ grid-column:1 / -1; }   /* no orphan tile */
}
.svc-deliver li{
  display:flex; align-items:flex-start; gap:.9rem;
  background:#FAF9F4; border:1px solid var(--ej-line); border-radius:var(--ej-radius);
  padding:1.1rem 1.2rem;
  font-size:.93rem; line-height:1.6; color:var(--ej-ink);
  transition:opacity .7s ease, transform .7s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.svc-deliver li:hover{ background:var(--ej-white); border-color:rgba(166,195,57,.5); box-shadow:0 10px 26px rgba(11,34,57,.07); }
.svc-check{
  flex:0 0 auto; width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center;
  background:rgba(166,195,57,.18); color:var(--ej-green-dark); font-size:1.05rem;
  transition:background .3s ease, color .3s ease;
}
.svc-deliver li:hover .svc-check{ background:var(--ej-green); color:var(--ej-navy); }

.svc-approach{ margin-top:2.75rem; border-top:1px solid var(--ej-line); }
.svc-approach .svc-h{ margin-top:2.25rem; margin-bottom:1.6rem; }

.svc-aside{ display:grid; gap:1.25rem; }
@media (min-width:992px){
  .svc-aside{ position:sticky; top:110px; }
}
.svc-engage{
  position:relative; overflow:hidden;
  background:var(--ej-navy); color:var(--ej-white);
  border-radius:var(--ej-radius-lg); padding:1.9rem 1.75rem;
  box-shadow:var(--ej-shadow);
}
.svc-engage::before{                   /* soft green glow, as on the About cards */
  content:""; position:absolute; top:-90px; inset-inline-end:-90px;
  width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle, rgba(166,195,57,.24), transparent 65%);
  pointer-events:none;
}
.svc-engage > *{ position:relative; }
.svc-engage .eyebrow{ font-size:.7rem; }
.svc-engage h3{ color:var(--ej-white); font-size:1.35rem; margin:.6rem 0; }
.svc-engage p{ color:rgba(255,255,255,.72); font-size:.9rem; line-height:1.65; margin-bottom:1.4rem; }

.svc-nav{
  background:var(--ej-white);
  border:1px solid var(--ej-line); border-radius:var(--ej-radius-lg);
  padding:1.4rem 1.5rem;
}
.svc-nav-label{
  display:block; color:var(--ej-muted);
  font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.svc-nav-cat{
  display:inline-block; margin:.35rem 0 .9rem;
  color:var(--ej-navy); font-size:1.02rem; font-weight:800; line-height:1.35;
  transition:color .2s ease;
}
.svc-nav-cat:hover{ color:var(--ej-green-dark); }

/* ---- "Other service areas" strip ---- */
.area-card{
  display:flex; align-items:center; gap:.9rem; height:100%;
  padding:.75rem; padding-inline-end:1rem;
  background:var(--ej-white);
  border:1px solid var(--ej-line); border-radius:var(--ej-radius);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.area-card:hover{ transform:translateY(-3px); box-shadow:var(--ej-shadow); border-color:rgba(166,195,57,.55); }
.area-thumb{
  position:relative; flex:0 0 64px; height:64px;
  border-radius:10px; overflow:hidden; background:var(--ej-cream);
}
.area-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.area-card:hover .area-thumb img{ transform:scale(1.08); }
.area-thumb .svc-fallback{
  position:absolute; inset:0; display:block;
  background:linear-gradient(135deg, var(--ej-navy), var(--ej-navy-soft));
}
.area-text{ display:flex; flex-direction:column; flex:1; min-width:0; }
.area-name{ color:var(--ej-navy); font-size:.92rem; font-weight:700; line-height:1.35; }
.area-count{ color:var(--ej-muted); font-size:.76rem; margin-top:.2rem; }
.area-arrow{
  flex:0 0 auto; color:var(--ej-green-dark);
  opacity:0; transform:translateX(-6px);
  transition:opacity .25s ease, transform .25s ease;
}
.area-card:hover .area-arrow,
.area-card:focus-visible .area-arrow{ opacity:1; transform:translateX(0); }
@media (hover:none){ .area-arrow{ opacity:1; transform:none; } }

/* ======================= ADMIN PREVIEW BAR =======================
   Shown only to a signed-in admin on a section switched off in Site
   settings. Centred so it clears the back-to-top button in both locales;
   stays under the mobile drawer (1050). */
.ej-preview-bar{
  position:fixed; bottom:22px; left:50%; translate:-50% 0; z-index:1040;
  display:flex; align-items:center; gap:.6rem;
  max-width:calc(100vw - 160px); width:max-content;
  padding:.6rem 1.1rem; border-radius:50rem;
  background:var(--ej-navy); color:#fff; font-size:.85rem; line-height:1.35;
  box-shadow:0 12px 30px rgba(8,26,44,.35);
}
.ej-preview-bar .bi{ color:var(--ej-green); font-size:1rem; flex:none; }
.ej-preview-bar a{ flex:none; color:var(--ej-green); font-weight:700; text-decoration:none; }
.ej-preview-bar a:hover{ text-decoration:underline; }
@media (max-width:575.98px){
  .ej-preview-bar{ bottom:16px; max-width:calc(100vw - 150px); font-size:.78rem; padding:.55rem .9rem; flex-wrap:wrap; justify-content:center; text-align:center; border-radius:16px; }
}

/* =========================================================
   MOBILE PASS
   Phone-width fixes found on a 375px audit (EN + AR).
   ========================================================= */

/* Logo: sized here, not inline, so phones can shrink it */
.brand-img{ height:80px; width:auto; }
@media (max-width: 991.98px){
  .navbar-ej .brand-img{ height:60px; transition:height .3s ease; }
  .navbar-ej.scrolled .brand-img{ height:46px; }
  .navbar-ej.scrolled{ padding:.5rem 0; }
}

@media (max-width: 575.98px){
  /* Bootstrap's g-5 rows pull 24px past a 12px container gutter: the page
     came out 387px wide on a 375px screen, so phones zoomed out (or panned
     sideways) and RTL pages clipped their text at the right edge. A wider
     container gutter plus a matching row gutter keeps rows inside it. */
  .container, .container-fluid{ --bs-gutter-x:2.5rem; }   /* 20px sides */
  .row.g-5, .row.gx-5{ --bs-gutter-x:2.5rem; }

  /* justified copy opens wide rivers in a 330px column */
  .sec-copy-lg, .ed-lede, .ed-body, .closing-copy,
  .privacy-block p, .proj-detail-body p, .confid-note p{ text-align:start; hyphens:manual; }

  /* inner-page hero: less dead space under the smaller logo */
  .hero--page{ padding:118px 0 72px; }

  /* home process steps: the ghost number + icon left ~180px for text */
  .process-steps .step{ gap:.9rem; }
  .step .ghost-num{ width:2.4rem; font-size:1.7rem; padding-top:.7rem; }
  .step .step-icon{ width:48px; height:48px; border-radius:14px; font-size:1.15rem; }

  /* stats: icon above the figure so labels get the cell's full width */
  .stat-cell{ flex-direction:column; align-items:flex-start; gap:.6rem; padding-inline-start:1.1rem; }

  /* stacked full-image cards: shorter, so a section isn't 4–6 screens long */
  .pillar-media{ min-height:300px; }
  .service-card{ height:180px; }

  /* back-to-top: smaller, tucked in, and the footer's last line clears it */
  .to-top{ right:14px; bottom:14px; width:42px; height:42px; font-size:1.05rem; }
}

/* iOS Safari zooms into any field under 16px on focus (and stays zoomed) */
@media (max-width: 991.98px){
  .contact-form .form-control,
  .contact-form .form-select,
  .ej-select-trigger{ font-size:1rem; }
}

/* =========================================================
   MOBILE PASS 2 — client review on a real phone
   ========================================================= */

/* Headings never strand one word; paragraphs avoid ragged short last lines */
.hero h1{ text-wrap:balance; }
.hero .lead-copy, .sec-intro p, .closing-copy, .ed-body{ text-wrap:pretty; }

@media (max-width: 575.98px){
  /* Eyebrows: at the desktop size + tracking they wrapped to two lines and
     outgrew the heading under them. Smaller, one line, rule kept short. */
  .eyebrow{ font-size:.74rem; letter-spacing:.14em; gap:.5rem; }
  .eyebrow::before{ width:22px; flex:0 0 auto; }

  /* Hero: full-width text needs an even scrim, not the desktop's
     left-to-right fade that left the right half of the text on bright sky.
     .hero.hero--* outranks the base and rtl.css gradients. */
  .hero.hero--home,
  .hero.hero--page{
    background:
      linear-gradient(to bottom, rgba(8,26,44,.82) 0%, rgba(8,26,44,.72) 45%, rgba(8,26,44,.80) 100%),
      var(--hero-bg) center/cover no-repeat;
  }
  /* the wide elliptical curve bulged at phone width — plain rounded corners */
  .hero{ border-radius:0 0 32px 32px; }
  .hero-wrap{ border-radius:0 0 36px 36px; }
  .hero--home{ padding:128px 0 112px; }
  .hero .lead-copy{ font-size:1rem; }

  /* hero + closing CTAs: equal full-width buttons instead of a ragged pair */
  .hero--home .hero-enter.d4,
  .cta .d-flex.flex-wrap{ flex-direction:column; align-items:stretch !important; gap:.75rem !important; }
  .hero--home .hero-enter.d4 .btn,
  .cta .d-flex.flex-wrap .btn{ justify-content:center; }

  /* About · story: calmer lede, image without the offset frame */
  .ed-lede{
    font-size:1.08rem; line-height:1.65;
    border-inline-start:none; padding-inline-start:0;
  }
  .ed-body{ font-size:.95rem; line-height:1.7; }
  .story-media{ padding:0; }
  .story-media::before{ display:none; }
  .story-media img{ aspect-ratio:4/3; }

  /* Projects · partnership CTA: a cream card on the cream page read as
     loose parts — white card, centred, full-width button */
  .proj-cta{
    background:var(--ej-white); border:1px solid var(--ej-line);
    box-shadow:0 10px 30px rgba(11,34,57,.06);
    padding:2rem 1.5rem; text-align:center;
  }
  .proj-cta .row > *{ flex:0 0 100%; width:100%; display:flex; flex-direction:column; align-items:center; }
  .proj-cta-icon{ width:56px; height:56px; border-radius:16px; font-size:1.35rem; }
  .proj-cta p{ max-width:none; }
  .proj-cta .btn{ width:100%; justify-content:center; }

  /* Footer: compact, so it reads as a footer rather than one more section.
     Logo and social icons share one row; link groups sit under short
     inset dividers; Explore's short links wrap inline. */
  .footer{ padding-top:40px; }
  .footer .row.g-5{ --bs-gutter-y:0; }
  .footer .row > * + *{   /* divider inset to the text, matching .footer-bottom */
    background:linear-gradient(var(--ej-line), var(--ej-line)) center top / calc(100% - var(--bs-gutter-x)) 1px no-repeat;
    padding-top:1.25rem; margin-top:1.25rem;
  }
  .footer-brand{
    display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:1rem;
  }
  .footer-brand .brand-logo{ margin:0 !important; }
  .footer-brand .brand-img{ height:52px; }
  .footer-brand > div{ grid-row:1; grid-column:2; justify-self:end; margin:0 !important; }   /* social icons */
  .footer-brand > p{ grid-column:1 / -1; margin:.9rem 0 0; max-width:none !important; font-size:.86rem !important; }
  .footer h6{ margin-bottom:.75rem; }
  .footer ul li{ margin-bottom:.4rem; }
  .footer-explore ul{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; }
  .footer-explore ul li{ margin:0; }
  .footer .contact-line{ margin-bottom:.6rem; }
  .footer-bottom{ margin-top:1.5rem; padding-bottom:4.25rem; }
}

/* Services · approach: below md the dashed connector ran through the text.
   Icon in its own column with the connector under it; number becomes a
   small label above the title. */
@media (max-width: 767px){
  .approach-step{
    display:grid; grid-template-columns:60px 1fr; column-gap:1rem; align-items:start;
    padding-inline:calc(var(--bs-gutter-x) * .5);   /* undo the older padding-left:0 */
  }
  .approach-head{ display:contents; }
  .approach-icon{ grid-column:1; grid-row:1 / span 3; }
  .approach-num{
    grid-column:2; grid-row:1; margin-top:.4rem;
    font-size:.78rem; letter-spacing:.12em; color:var(--ej-green-dark);
  }
  .approach-step h6{ grid-column:2; grid-row:2; margin-top:.2rem; }
  .approach-step p{ grid-column:2; grid-row:3; }
  /* centre the connector under the icon (the column's gutter padding shifts it) */
  [dir="ltr"] .row .approach-step:not(:last-child)::after{ left:calc(var(--bs-gutter-x) * .5 + 29px); }
  [dir="rtl"] .row .approach-step:not(:last-child)::after{ right:calc(var(--bs-gutter-x) * .5 + 29px); }
}

/* =========================================================
   MOBILE PASS 3 — second phone review
   ========================================================= */

/* iOS overscroll ("rubber band") past the footer showed the white canvas;
   cream continues the footer instead. body keeps its own white. */
html{ background:var(--ej-cream); }

/* the card arrow sat on top of the last line of the description */
.pillar-desc{ padding-inline-end:2.4rem; }

/* Touch screens: a tap leaves :hover stuck on whatever was touched (lifted
   card, green badge, zoomed photo), sometimes until the next tap elsewhere.
   Hold hover-only effects at rest; content that hover used to reveal is
   shown permanently instead (pillar text already is, further up). */
@media (hover: none){
  .pillar-card:hover{ transform:none; box-shadow:0 10px 30px rgba(11,34,57,.10); }
  .pillar-card:hover .pillar-media img,
  .service-card:hover img,
  .proj-card:hover .proj-media img,
  .svc-card:hover .svc-media img{ transform:none; }
  .pillar-card:hover .pillar-media::after{
    background:linear-gradient(to top,
      rgba(6,20,35,.94) 0%, rgba(7,22,38,.78) 22%, rgba(8,26,44,.30) 46%,
      rgba(8,26,44,.04) 68%, rgba(8,26,44,.06) 100%);
  }
  .pillar-card:hover .pillar-num{
    background:rgba(6,20,35,.55); border-color:rgba(166,195,57,.35); color:var(--ej-green);
  }
  .pillar-card:hover .pillar-num::before{ background:var(--ej-green); }

  .service-card:hover{ transform:none; box-shadow:none; }
  .service-card:hover::after{ width:0; }
  /* description + arrow badge always visible: no "tap gently to peek" */
  .service-card p,
  .service-card:hover p{ max-height:none; opacity:1; font-size:.86rem; line-height:1.45; }
  .service-card .sc-arrow,
  .service-card:hover .sc-arrow{ opacity:1; transform:none; }
  .service-card .sc-overlay,
  .service-card:hover .sc-overlay{
    background:linear-gradient(to top, rgba(6,20,35,.95) 18%, rgba(8,26,44,.35) 62%, rgba(8,26,44,.05));
  }

  .proj-card:hover, .svc-card:hover{ transform:none; box-shadow:none; border-color:var(--ej-line); }
}

@media (max-width: 575.98px){
  /* one vertical rhythm for every section on phones */
  .section{ padding:56px 0; }
  #story{ padding-top:56px; padding-bottom:56px; }
  .closing{ padding-bottom:56px; }
  .stats-band{ padding-bottom:0; }   /* card → next section was ~104px */

  /* the pillars heading was a size above every other section heading */
  .sec-heading-lg{ font-size:1.9rem; }

  /* stat subtitles: a shared measure so all four wrap the same way,
     instead of one breaking at 390–430px wide while the others don't */
  .stat-sub{ max-width:8.6em; }

  /* services panel spans the screen like the CTA band, instead of a
     slightly wider box than the cards above it */
  .services{ margin:0; border-radius:0; }

  /* touch: room for the always-visible description */
  .service-card{ height:230px; }
}