/* ============================================================
   DESIGN D — "Modern Advisory" (leanadvisory.sa vibe, Sanad orange)
   Cool slate neutrals · soft rounded cards · Readex Pro · pill labels
   Layered over the shared structure in styles.css
   ============================================================ */
/* NOTE: styles.css is loaded via its own <link> tag BEFORE this file (no @import — parallel loading). */

:root{
  --paper:#ffffff;
  --paper-2:#f4f7fa;      /* cool light panel */
  --card:#ffffff;
  --card-2:#f8fafc;
  --line:#e6ebf1;         /* cool hairline */
  --line-soft:#eff3f7;

  --espresso:#131a24;     /* cool dark slate — footer / why */
  --espresso-2:#1b232f;
  --espresso-line:#2a3441;

  --ink:#151b25;          /* dark slate */
  --ink-2:#333d4a;
  --muted:#586576;        /* slate muted */
  --muted-2:#5d6b7d;      /* AA-safe muted (≥4.5:1 on white) */
  --on-dark:#eef2f7;
  --on-dark-muted:#a6b1bf;

  --orange:#f15f22;
  --orange-ink:#b5410c;   /* AA on white AND on the light pill tint */
  --orange-tint:#fdeee6;
  --orange-tint-2:#f8d7c7;

  --f-display:'Readex Pro', system-ui, sans-serif;
  --f-body:'Readex Pro', system-ui, sans-serif;

  --r-sm:12px;
  --r:16px;
  --r-lg:22px;
  --r-pill:999px;         /* pill buttons */

  --shadow-1:0 4px 18px rgba(19,26,36,.06);
  --shadow-2:0 26px 54px -28px rgba(19,26,36,.24);
}

/* --- modern, clean, soft --- */
h1,h2,h3,h4{font-weight:600;letter-spacing:normal} /* Arabic script: never negative tracking */
.hero{background:var(--paper-2)}
.hero-skyline,.hero-mark{display:none}
.hero-title{font-weight:700;letter-spacing:normal}
.section-title{font-weight:700}

/* --- refined smaller type scale (client feedback: الخط أصغر ومنسّق أكثر) --- */
body{font-size:clamp(14.5px,.35vw + 13.8px,16px);line-height:1.8}
.hero-title{font-size:clamp(2rem,3.6vw,3.1rem)}
.hero-lead{font-size:clamp(.98rem,1.1vw,1.12rem)}
.pill-num{font-size:1.25rem}
.section-title{font-size:clamp(1.6rem,2.8vw,2.3rem)}
.section-sub{font-size:clamp(.95rem,1vw,1.06rem)}
.svc-card-title{font-size:1.15rem}
.svc-card p{font-size:.92rem}
.svc-en{font-size:.78rem}
.mv-label{font-size:1.25rem}
.value-title{font-size:1.1rem}
.value-text{font-size:.9rem}
.why-item h3{font-size:1.05rem;font-weight:600;line-height:1.7}
.page-title{font-size:clamp(1.9rem,4vw,2.9rem)}
.page-lead{font-size:clamp(.98rem,1.15vw,1.1rem)}
.svc-detail-titles h2{font-size:clamp(1.3rem,2.2vw,1.75rem)}
.svc-detail-desc{font-size:clamp(.98rem,1.05vw,1.06rem)}
.svc-detail .svc-sub h3{font-size:1.05rem}
.svc-detail .svc-sub p{font-size:.92rem}
.cta-inner h2{font-size:clamp(1.3rem,2vw,1.8rem)}
.btn{font-size:.95rem}

/* eyebrow as a soft pill tag (Lean-style section labels) */
.eyebrow,.eyebrow-light{background:var(--orange-tint);color:var(--orange-ink);padding:7px 16px;border-radius:var(--r-pill);font-weight:600}
.eyebrow span,.eyebrow-light span{color:var(--orange-ink)}
.section-head-center .eyebrow{margin-inline:auto}

/* soft rounded cards with a gentle lift */
.mv-card:hover,.svc-card:hover,.value:hover{border-color:var(--orange-tint-2)}

/* "why" becomes a light section in this theme */
.why{background:var(--paper-2);color:var(--ink)}
.why .section-title{color:var(--ink)}
.why .eyebrow-light{background:var(--orange-tint);color:var(--orange-ink)}
.why-item{background:var(--card);border-color:var(--line);box-shadow:var(--shadow-1)}
.why-item:hover{border-color:var(--orange-tint-2)}
.why-item h3{color:var(--ink)}
.why-item p{color:var(--muted)}
.why-num{color:var(--orange)}