@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,300&family=Tajawal:wght@300;400;500;700;800&display=swap');

:root {
  /* Core palette */
  --ink:    #060d1a;
  --navy:   #0b1a35;
  --steel:  #122145;
  --mid:    #1b3264;
  --blue:   #2454a4;
  --sky:    #3b7dd8;
  --frost:  #6ca8f0;
  --mist:   #b8d4f8;
  --fog:    #ddeeff;
  --snow:   #f2f7ff;
  --white:  #ffffff;
  /* Greys */
  --g9: #0f1923;  --g8: #1c2838;  --g7: #2d3e55;
  --g6: #445872;  --g5: #627a96;  --g4: #8fa5be;
  --g3: #b8c9da;  --g2: #dde6ef;  --g1: #f0f4f8;
  /* Accents */
  --silver: #c8d8e8;
  --accent: #4a9eff;
  /* Shadows */
  --sh1: 0 2px 8px rgba(6,13,26,.12);
  --sh2: 0 6px 24px rgba(6,13,26,.16);
  --sh3: 0 12px 48px rgba(6,13,26,.22);
  --sh4: 0 24px 80px rgba(6,13,26,.30);
  /* Radii */
  --r1: 6px; --r2: 12px; --r3: 18px; --r4: 26px;
  /* Layout */
  --max: 1340px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; font-size:16px }
body {
  font-family: 'DM Sans', sans-serif;
  color: var(--g8); background: var(--white);
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
.ar { font-family: 'Tajawal', sans-serif }
a { text-decoration: none; transition: all .2s }
img { display:block; max-width:100%; object-fit:cover }
h1, h2, h3 { font-family: 'DM Serif Display', serif; line-height: 1.06; font-weight:400 }
h4, h5, h6 { font-family: 'DM Sans', sans-serif; font-weight: 700 }

/* ══════════════════════════════
   NAVBAR — dark glass
══════════════════════════════ */
#nav {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  height: 74px; background: rgba(6,13,26,.92);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: all .3s;
}
#nav.lit {
  background: rgba(255,255,255,.96);
  border-color: var(--g2);
  box-shadow: var(--sh2);
}
.nav-w {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 100%; padding: 0 36px;
}
/* Logo */
.nlogo { display:flex; align-items:center; gap:14px }
.nlogo-mark {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink:0;
  background: linear-gradient(145deg,var(--blue),var(--sky));
  display: flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 16px rgba(36,84,164,.4);
  position: relative; overflow:hidden;
}
.nlogo-mark::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.2) 0%, transparent 60%);
}
.nlogo-mark svg { width:22px; height:22px; fill:#fff; position:relative; z-index:1 }
.nlogo-en { font-size:.97rem; font-weight:800; color:#fff; line-height:1.1; letter-spacing:-.01em }
.nlogo-ar { font-family:'Tajawal',sans-serif; font-size:.72rem; color:rgba(255,255,255,.38); line-height:1.2; margin-top:1px }
#nav.lit .nlogo-en { color: var(--ink) }
#nav.lit .nlogo-ar { color: var(--g5) }
/* Menu */
.nmenu { display:flex; align-items:center; gap:2px; list-style:none }
.nmenu > li { position:relative }
.nlink {
  display:flex; align-items:center; gap:5px;
  padding: 9px 15px; font-size:.83rem; font-weight:600;
  color: rgba(255,255,255,.7); border-radius:8px;
  transition:all .2s; cursor:pointer; border:none; background:none;
  letter-spacing:.01em; white-space:nowrap;
}
.nlink:hover, .nlink.on { color:#fff; background:rgba(255,255,255,.1) }
#nav.lit .nlink { color:var(--g6) }
#nav.lit .nlink:hover, #nav.lit .nlink.on { color:var(--blue); background:var(--fog) }
.narr { font-size:.55rem; transition:transform .2s }
.nmenu > li:hover .narr { transform:rotate(180deg) }
/* Dropdown */
.ndrop {
  position:absolute; top:calc(100% + 12px); left:50%;
  transform: translateX(-50%) translateY(8px);
  background:#fff; border:1px solid var(--g2);
  border-radius:var(--r3); box-shadow:var(--sh4);
  min-width:256px; padding:10px;
  opacity:0; visibility:hidden; transition:all .2s; z-index:999;
}
.nmenu > li:hover .ndrop { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) }
.ndrop-label {
  font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--g4); padding:10px 14px 5px;
}
.ndrop-item {
  display:flex; align-items:center; gap:11px;
  padding:10px 14px; border-radius:10px;
  font-size:.84rem; font-weight:500; color:var(--g7); transition:all .2s;
}
.ndrop-item:hover { background:var(--fog); color:var(--blue) }
.ndrop-item i { width:17px; color:var(--sky); font-size:.8rem; flex-shrink:0 }
/* CTA */
.ncta {
  background: linear-gradient(135deg, var(--blue), var(--sky));
  color:#fff !important; border-radius:9px; padding:10px 22px;
  font-weight:700; font-size:.83rem;
  box-shadow: 0 4px 16px rgba(36,84,164,.32);
}
.ncta:hover { transform:translateY(-1px); box-shadow:0 8px 28px rgba(36,84,164,.44); color:#fff }
/* Hamburger */
.nhbg {
  display:none; flex-direction:column; gap:5px; cursor:pointer;
  padding:9px; border:none; background:none;
}
.nhbg span { width:22px; height:2px; background:#fff; border-radius:2px; transition:all .3s; display:block }
#nav.lit .nhbg span { background:var(--g7) }
/* Mobile */
.nmob {
  display:none; position:fixed; top:74px; left:0; right:0;
  background:#fff; border-bottom:1px solid var(--g2);
  padding:14px 20px 22px; box-shadow:var(--sh3); z-index:998;
  max-height:calc(100vh - 74px); overflow-y:auto;
}
.nmob.open { display:block }
.nm-link { display:block; padding:11px 14px; font-size:.88rem; font-weight:600; color:var(--g7); border-radius:9px; margin-bottom:2px }
.nm-link:hover { background:var(--fog); color:var(--blue) }
.nm-gt { font-size:.68rem; font-weight:700; color:var(--g4); text-transform:uppercase; letter-spacing:.1em; padding:10px 14px 3px }
.nm-sub { padding-left:8px }
.nm-sub .nm-link { font-size:.83rem; font-weight:500; color:var(--g6) }

/* ══════════════════════════════
   PAGE HERO (inner pages)
══════════════════════════════ */
.phero {
  background: var(--ink); padding: 160px 0 90px;
  position:relative; overflow:hidden;
}
.phero-img {
  position:absolute; inset:0; z-index:0;
  opacity: .18;
}
.phero-img img { width:100%; height:100%; object-fit:cover }
.phero-lines {
  position:absolute; inset:0; z-index:1;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.phero-shade {
  position:absolute; bottom:0; left:0; right:0; height:200px; z-index:1;
  background: linear-gradient(to top, var(--ink), transparent);
}
.phero-in { position:relative; z-index:2 }
.bc { display:flex; align-items:center; gap:8px; margin-bottom:18px; font-size:.76rem; color:rgba(255,255,255,.35) }
.bc a { color:rgba(255,255,255,.35) } .bc a:hover { color:#fff }
.bc i { font-size:.5rem }
.phero-h { font-size:clamp(2.5rem,5vw,4rem); color:#fff; letter-spacing:-.02em; margin-bottom:16px }
.phero-s { font-size:.97rem; color:rgba(255,255,255,.58); line-height:1.8; max-width:560px }

/* ══════════════════════════════
   LAYOUT UTILITIES
══════════════════════════════ */
section { padding:110px 0 }
.dark-sec { background:var(--ink); padding:110px 0 }
.grey-sec { background:var(--snow) }
.mw { max-width:var(--max); margin:0 auto; padding:0 36px }

/* Eyebrow label */
.eye {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sky); background:rgba(59,125,216,.1);
  border:1px solid rgba(59,125,216,.25); border-radius:4px;
  padding:5px 12px; margin-bottom:.9rem;
}
.eye-dark { color:var(--mist); background:rgba(185,212,248,.08); border-color:rgba(185,212,248,.18) }
/* Section title */
.st { font-size:clamp(2.2rem,3.8vw,3.2rem); letter-spacing:-.03em; color:var(--ink); line-height:1.06 }
.st-light { color:#fff }
.st em { font-style:italic; color:var(--sky) }
/* Line */
.rule { width:40px; height:2px; background:linear-gradient(90deg,var(--blue),var(--frost)); border-radius:2px; margin-bottom:1.4rem }
.rule-light { background:linear-gradient(90deg,var(--frost),var(--mist)) }
/* Body text */
.body-t { font-size:.97rem; color:var(--g6); line-height:1.86 }
.body-t-light { color:rgba(255,255,255,.58) }

/* ══════════════════════════════
   BUTTONS
══════════════════════════════ */
.btn-ic {
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,var(--blue),var(--sky));
  color:#fff; border-radius:10px; padding:.9rem 2.4rem;
  font-size:.88rem; font-weight:700; border:none; cursor:pointer;
  transition:all .28s; box-shadow:0 4px 18px rgba(36,84,164,.3);
  font-family:'DM Sans',sans-serif; letter-spacing:.01em;
}
.btn-ic:hover { transform:translateY(-2px); box-shadow:0 10px 36px rgba(36,84,164,.42); color:#fff }
.btn-ic-out {
  display:inline-flex; align-items:center; gap:10px;
  background:transparent; color:var(--blue);
  border:2px solid var(--blue); border-radius:10px; padding:.88rem 2.4rem;
  font-size:.88rem; font-weight:700; cursor:pointer; transition:all .28s;
  font-family:'DM Sans',sans-serif;
}
.btn-ic-out:hover { background:var(--blue); color:#fff; transform:translateY(-2px) }
.btn-w {
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; color:var(--navy);
  border-radius:10px; padding:.9rem 2.4rem;
  font-size:.88rem; font-weight:700; border:none; cursor:pointer;
  transition:all .28s; box-shadow:0 4px 18px rgba(0,0,0,.18);
  font-family:'DM Sans',sans-serif;
}
.btn-w:hover { transform:translateY(-2px); box-shadow:0 12px 36px rgba(0,0,0,.26); color:var(--navy) }
.btn-w-out {
  display:inline-flex; align-items:center; gap:10px;
  background:transparent; color:#fff;
  border:2px solid rgba(255,255,255,.32); border-radius:10px; padding:.88rem 2.4rem;
  font-size:.88rem; font-weight:700; cursor:pointer; transition:all .28s;
  font-family:'DM Sans',sans-serif;
}
.btn-w-out:hover { border-color:#fff; background:rgba(255,255,255,.1); color:#fff }

/* ══════════════════════════════
   FORMS
══════════════════════════════ */
.fg { margin-bottom:18px }
.fg label {
  display:block; font-size:.73rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--g7); margin-bottom:7px;
}
.fg input, .fg select, .fg textarea {
  width:100%; background:var(--g1);
  border:1.5px solid var(--g2); border-radius:10px;
  padding:12px 15px; font-family:'DM Sans',sans-serif;
  font-size:.9rem; color:var(--g8); outline:none; transition:all .2s;
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color:var(--sky); background:#fff;
  box-shadow:0 0 0 4px rgba(59,125,216,.1);
}
.fg textarea { resize:vertical; min-height:120px }
.fsub {
  width:100%; background:linear-gradient(135deg,var(--blue),var(--sky));
  color:#fff; border:none; border-radius:11px; padding:15px;
  font-size:.96rem; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:all .3s; font-family:'DM Sans',sans-serif;
}
.fsub:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(36,84,164,.34) }
.fsub:disabled { opacity:.55; cursor:not-allowed; transform:none }
.f-ok {
  display:none; align-items:center; gap:14px;
  background:#ecfdf5; border:1px solid #a7f3d0;
  border-radius:10px; padding:18px 20px; margin-top:16px;
}

/* ══════════════════════════════
   NEWSLETTER
══════════════════════════════ */
.nl-band {
  background: var(--steel);
  padding: 60px 0; position:relative; overflow:hidden;
}
.nl-band::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 70% 50%, rgba(59,125,216,.18) 0%, transparent 60%);
}
.nl-wrap { position:relative; z-index:1 }
.nl-form { display:flex; gap:10px }
.nl-form input {
  flex:1; background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.2); border-radius:10px;
  padding:13px 18px; color:#fff; font-family:'DM Sans',sans-serif;
  font-size:.9rem; outline:none;
}
.nl-form input::placeholder { color:rgba(255,255,255,.38) }
.nl-form input:focus { border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.15) }
.nl-form button {
  background:#fff; color:var(--navy); border:none; border-radius:10px;
  padding:13px 22px; font-weight:800; font-size:.86rem;
  cursor:pointer; transition:all .25s; font-family:'DM Sans',sans-serif; white-space:nowrap;
}
.nl-form button:hover { transform:translateY(-1px); box-shadow:var(--sh2) }

/* ══════════════════════════════
   FOOTER
══════════════════════════════ */
.ft-iso-strip {
  background: var(--g9); padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.ft-iso-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1); border-radius:6px; margin:3px;
}
.ft-iso-chip span { font-size:.68rem; font-weight:700; color:rgba(255,255,255,.7); letter-spacing:.06em }
footer { background:var(--ink); padding:72px 0 0 }
.ft-lw { display:flex; align-items:center; gap:12px; margin-bottom:20px }
.ft-lm {
  width:42px; height:42px; border-radius:10px;
  background:linear-gradient(135deg,var(--blue),var(--sky));
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ft-lm svg { width:20px; height:20px; fill:#fff }
.ft-le { font-size:.94rem; font-weight:800; color:#fff }
.ft-la { font-family:'Tajawal',sans-serif; font-size:.72rem; color:rgba(255,255,255,.32); margin-top:1px }
.ft-blurb { font-size:.82rem; color:rgba(255,255,255,.4); line-height:1.82; max-width:260px; margin-bottom:22px }
.ft-h { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.13em; color:rgba(255,255,255,.28); margin-bottom:16px }
.ft-ul { list-style:none; padding:0 }
.ft-ul li { margin-bottom:10px }
.ft-ul a { font-size:.83rem; color:rgba(255,255,255,.48); transition:color .2s }
.ft-ul a:hover { color:#fff }
.ft-ci { display:flex; align-items:flex-start; gap:11px; margin-bottom:11px; font-size:.82rem; color:rgba(255,255,255,.45) }
.ft-ci i { color:var(--frost); margin-top:2px; width:15px; flex-shrink:0 }
.ft-ci a { color:rgba(255,255,255,.45) } .ft-ci a:hover { color:#fff }
.ft-soc { display:flex; gap:8px; margin-top:18px }
.ft-s {
  width:36px; height:36px; border-radius:8px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.42); font-size:.82rem; transition:all .2s;
}
.ft-s:hover { background:var(--blue); border-color:var(--blue); color:#fff }
.ft-bar {
  border-top:1px solid rgba(255,255,255,.07);
  padding:22px 0; margin-top:56px;
  display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:10px;
}
.ft-copy { font-size:.73rem; color:rgba(255,255,255,.22) }

/* ══════════════════════════════
   SUPPLY HORIZONTAL SCROLL STRIP
══════════════════════════════ */
.sup-scroll-wrap {
  position: relative;
  margin: 0 -12px;
}

/* hide native scrollbar but keep scroll */
.sup-scroll-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 12px 12px 24px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.sup-scroll-track:active { cursor: grabbing; }
.sup-scroll-track::-webkit-scrollbar { display: none; }

/* ── individual card ── */
.sup-card {
  flex: 0 0 300px;
  width: 300px;
  background: #fff;
  border: 1px solid var(--g2);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sh1);
  transition: transform .3s, box-shadow .3s;
}
.sup-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh4);
}

/* ── image box — fixed height, image never cropped ── */
.sup-img-box {
  width: 100%;
  height: 320px;
  background: var(--fog);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6px;
  box-sizing: border-box;
}
.sup-img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ── card text ── */
.sup-card-body {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--g1);
}
.sup-card-title {
  font-family: 'DM Serif Display', serif;
  font-size: .88rem;
  color: var(--ink);
  margin-bottom: 3px;
}
.sup-card-sub {
  font-size: .72rem;
  color: var(--g5);
  line-height: 1.4;
}

/* ── scroll arrow buttons ── */
.sup-arr {
  position: absolute;
  top: 50%;
  transform: translateY(-60%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--g2);
  background: #fff;
  color: var(--blue);
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(6,13,26,.12);
  transition: background .2s, color .2s;
  z-index: 10;
}
.sup-arr:hover {
  background: var(--blue);
  color: #fff;
}
.sup-arr-l { left: 0; }
.sup-arr-r { right: 0; }

/* ── FIX: skip reveal animation for scroll strip cards ── */
.sup-scroll-track [data-r] {
  opacity: 1;
  transform: translateY(0);
  transition: none;
}

/* hide arrows on mobile — finger scroll instead */
@media (max-width: 640px) {
  .sup-arr { display: none; }
  .sup-card { flex: 0 0 240px; width: 240px; }
  .sup-img-box { height: 260px; }
}

/* ══════════════════════════════
   ANIMATIONS
══════════════════════════════ */
[data-r] {
  opacity:0; transform:translateY(32px);
  transition: opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1);
}
[data-r].vis { opacity:1; transform:translateY(0) }
[data-rd="1"] { transition-delay:.1s }
[data-rd="2"] { transition-delay:.2s }
[data-rd="3"] { transition-delay:.3s }
[data-rd="4"] { transition-delay:.4s }
[data-rd="5"] { transition-delay:.5s }
[data-rd="6"] { transition-delay:.6s }

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media(max-width:1100px) {
  .nmenu, .ncta { display:none }
  .nhbg { display:flex }
}
@media(max-width:768px) {
  section, .dark-sec { padding:72px 0 }
  .mw { padding:0 20px }
  .nav-w { padding:0 20px }
}
/* ══════════════════════════════
   SHA COURSE CARDS
══════════════════════════════ */
.sha-c {
  background: #fff;
  border: 1px solid var(--g2);
  border-radius: var(--r3);
  padding: 28px 22px;
  height: 100%;
  box-shadow: var(--sh1);
  transition: all .35s;
  position: relative;
  overflow: hidden;
}
.sha-c:hover { box-shadow: var(--sh4); transform: translateY(-5px) }
.sha-ghost {
  position: absolute; right: 14px; top: 10px;
  font-family: 'DM Serif Display', serif;
  font-size: 2.8rem; color: var(--g1);
  line-height: 1; pointer-events: none;
}
.sha-code {
  font-size: .66rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 6px;
}
.sha-t {
  font-family: 'DM Serif Display', serif;
  font-size: 1rem; color: var(--ink); margin-bottom: 10px;
}
.sha-d { font-size: .83rem; color: var(--g5); line-height: 1.72 }
.sha-lvl {
  display: inline-block;
  background: var(--fog); border: 1px solid var(--mist);
  border-radius: 5px; padding: 3px 10px;
  font-size: .69rem; font-weight: 700;
  color: var(--blue); margin-top: 12px;
}
.enroll-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 10px 18px;
  background: var(--ink); color: #fff;
  border: none; border-radius: 8px;
  font-size: .82rem; font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer; transition: all .25s;
}
.enroll-btn:hover { background: var(--blue); transform: translateY(-2px) }

/* ══════════════════════════════
   ISO BAND & CARDS
══════════════════════════════ */
.iso-band {
  background: linear-gradient(145deg, var(--ink), var(--steel));
  padding: 110px 0; position: relative; overflow: hidden;
}
.iso-band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(59,125,216,.2) 0%, transparent 60%);
}
.iso-c {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r3); padding: 28px 20px;
  text-align: center; height: 100%;
  transition: all .35s; cursor: pointer;
}
.iso-c:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.24);
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.iso-c i { font-size: 1.8rem; color: var(--frost); margin-bottom: 14px; display: block }
.iso-c .n { font-size: .88rem; font-weight: 800; color: #fff; margin-bottom: 8px }
.iso-c .d { font-size: .76rem; color: rgba(255,255,255,.45); line-height: 1.6; margin-bottom: 16px }

/* ══════════════════════════════
   PROCESS STEPS
══════════════════════════════ */
.proc { display: flex; flex-direction: column; gap: 0 }
.proc-row {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 22px 0; border-bottom: 1px solid var(--g2);
}
.proc-row:last-child { border: none }
.proc-n {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue), var(--sky));
  color: #fff; font-size: .78rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(36,84,164,.3);
}
.proc-t { font-size: .92rem; font-weight: 700; color: var(--ink); margin-bottom: 5px }
.proc-d { font-size: .82rem; color: var(--g5); line-height: 1.6 }

/* ══════════════════════════════
   VISION / MISSION CARDS
══════════════════════════════ */
.vm {
  border-radius: var(--r3); padding: 40px 34px;
  height: 100%; position: relative; overflow: hidden;
}
.vm-dark { background: linear-gradient(145deg, var(--ink), var(--steel)) }
.vm-lite { background: var(--fog); border: 1px solid var(--mist) }
.vm-glyph {
  position: absolute; right: 24px; top: 20px;
  font-size: 5rem; opacity: .05; color: #fff;
}
.vm-lite .vm-glyph { color: var(--blue); opacity: .08 }
.vm-ico {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(255,255,255,.1); display: flex;
  align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.vm-lite .vm-ico { background: rgba(36,84,164,.12) }
.vm-ico i { font-size: 1.3rem; color: var(--frost) }
.vm-lite .vm-ico i { color: var(--blue) }
.vm-t {
  font-family: 'DM Serif Display', serif;
  font-size: 1.4rem; color: #fff; margin-bottom: 14px;
}
.vm-lite .vm-t { color: var(--ink) }
.vm-p { font-size: .88rem; color: rgba(255,255,255,.55); line-height: 1.82 }
.vm-lite .vm-p { color: var(--g6) }

/* ══════════════════════════════
   SERVICE CARDS (svc-a)
══════════════════════════════ */
.svc-a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 700; color: var(--blue);
  margin-top: 14px; transition: gap .2s;
}
.svc-a:hover { gap: 10px; color: var(--sky) }

/* ══════════════════════════════
   KV ITEMS (key values)
══════════════════════════════ */
.kv {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--g2);
}
.kv:last-child { border: none }
.kv-i {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  background: var(--fog); display: flex;
  align-items: center; justify-content: center;
}
.kv-i i { font-size: 1rem; color: var(--blue) }
.kv-t { font-size: .88rem; font-weight: 700; color: var(--ink) }
.kv-s { font-size: .76rem; color: var(--g5) }

/* ══════════════════════════════
   BREADCRUMB
══════════════════════════════ */
.bc {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 18px; font-size: .76rem;
  color: rgba(255,255,255,.35);
}
.bc a { color: rgba(255,255,255,.35) }
.bc a:hover { color: #fff }
.bc i { font-size: .5rem }