.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* Header */
header.top { background: var(--white); border-bottom: 1px solid var(--mist); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 16px; }
header.top img { height: 40px; width: auto; }
header.top nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 400; }
header.top nav a { text-decoration: none; color: var(--slate); }
header.top nav a:hover { color: var(--graphite); }
header.top nav .btn { padding: 11px 18px; font-size: 14px; color: var(--white); }

/* Hero */
.hero { background: var(--white); padding: 88px 0 96px; position: relative; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.25fr 1fr; gap: 72px; align-items: center; }
.hero h1 {
  font-size: clamp(44px, 6.2vw, 84px); font-weight: 700; line-height: .98;
  color: var(--graphite); letter-spacing: -.025em; margin: 22px 0 24px;
}
.hero h1 span { display: block; font-weight: 300; color: var(--grey); }
.hero .lead { font-size: 20px; line-height: 1.5; max-width: 560px; color: var(--charcoal); }
.hero .cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.hero .meta { margin-top: 28px; font-size: 13px; color: var(--grey); letter-spacing: .04em; }
.reveal { opacity: 0; transform: translateY(18px); animation: up .9s var(--ease) forwards; }
.d1 { animation-delay: .1s } .d2 { animation-delay: .22s } .d3 { animation-delay: .34s } .d4 { animation-delay: .46s } .d5 { animation-delay: .58s }
@keyframes up { to { opacity: 1; transform: none; } }

/* Instructor card */
.instructor { position: relative; }
.instructor .photo {
  position: relative; aspect-ratio: 4 / 4.25; overflow: hidden; background: var(--mist);
}
.instructor .photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.instructor .photo::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(to top, rgba(28,27,27,.92), rgba(28,27,27,0));
}
.instructor .cap { position: absolute; left: 28px; right: 28px; bottom: 26px; color: var(--white); z-index: 1; }
.instructor .cap .label { color: var(--cream); }
.instructor .cap h2 { font-size: 30px; font-weight: 700; margin: 8px 0 4px; letter-spacing: -.01em; }
.instructor .cap p { font-size: 15px; font-weight: 300; line-height: 1.45; color: #E7E5E3; }
.instructor .redbar { position: absolute; top: -14px; inset-inline-start: -14px; width: 88px; height: 88px; border-top: 2px solid var(--red); border-inline-start: 2px solid var(--red); }
.instructor .seal {
  position: absolute; inset-inline-end: -22px; top: 28px; width: 116px; z-index: 2;
  background: var(--white); padding: 6px; box-shadow: 0 10px 30px rgba(28,27,27,.18);
  transition: transform .3s var(--ease);
}
.instructor .seal:hover { transform: scale(1.05) rotate(-2deg); }

/* Journey */
.journey { padding: 96px 0; }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; }
.sec-head h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; color: var(--graphite); letter-spacing: -.015em; margin-top: 12px; }
.sec-head p { max-width: 420px; color: var(--slate); font-size: 16px; }
.steps { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--silver); }
.step {
  padding: 26px 0 30px; padding-inline: 20px; text-decoration: none; position: relative; color: var(--charcoal);
  border-inline-end: 1px solid var(--mist);
}
.step:first-child { padding-inline-start: 0; }
.step:last-child { border-inline-end: 0; }
.step::before {
  content: ""; position: absolute; top: -1px; inset-inline-start: 0; height: 2px; width: 0; background: var(--red);
  transition: width .35s var(--ease);
}
.step:hover::before { width: 100%; }
.step .n { font-size: 13px; font-weight: 500; color: var(--red); letter-spacing: .12em; }
.step h3 { font-size: 18px; font-weight: 700; color: var(--graphite); margin: 14px 0 10px; line-height: 1.2; }
.step p { font-size: 14px; line-height: 1.5; color: var(--slate); }

/* Credentials */
.cred { background: var(--graphite); color: var(--white); padding: 80px 0; }
.cred .wrap { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: center; }
.cred img { width: 220px; background: var(--white); padding: 8px; }
.cred h2 { font-size: 30px; font-weight: 700; margin: 12px 0 14px; letter-spacing: -.01em; }
.cred p { color: #D8D5D2; font-size: 16px; max-width: 640px; }
.cred a.link { display: inline-block; margin-top: 20px; color: var(--cream); font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(200,174,125,.5); padding-bottom: 2px; }
.cred a.link:hover { border-color: var(--cream); }

footer { background: var(--white); border-top: 1px solid var(--mist); padding: 40px 0 48px; font-size: 13px; color: var(--grey); }
footer .row { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
footer img { height: 30px; width: auto; }
footer .notice { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--mist); font-size: 12px; line-height: 1.6; }

@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 64px; }
  .instructor { max-width: 460px; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .step:nth-child(4) { border-inline-end: 0; }
  .step:nth-child(5) { padding-inline-start: 0; }
  .step:nth-child(n+5) { border-top: 1px solid var(--mist); }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  header.top .wrap { height: 68px; }
  header.top img { height: 30px; }
  header.top nav a:not(.btn):not(.lang) { display: none; }
  .hero { padding: 56px 0 64px; }
  .hero .lead { font-size: 17px; }
  .instructor .seal { inset-inline-end: 10px; top: 14px; width: 88px; }
  .instructor .redbar { inset-inline-start: -8px; top: -8px; }
  .journey { padding: 64px 0; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step, .step:nth-child(n) { padding: 22px 12px 24px; border-inline-end: 0; border-top: 1px solid var(--mist); }
  .step:nth-child(odd) { padding-inline-start: 0; border-inline-end: 1px solid var(--mist); }
  .cred .wrap { grid-template-columns: 1fr; gap: 32px; }
  .cred img { width: 180px; }
}

/* ---------- Arabic, right to left ---------- */
header.top nav a.lang { color: var(--graphite); font-weight: 500; }
:lang(ar) .hero h1 { line-height: 1.25; letter-spacing: 0; }
:lang(ar) .hero .lead, :lang(ar) .step p, :lang(ar) .cred p { line-height: 1.75; }
[dir="rtl"] .btn:hover .arr { transform: translateX(-4px); }
.term { display: block; font-family: "Roboto", sans-serif; font-size: 13px; font-weight: 400; color: var(--grey); margin-top: 4px; }
:lang(ar) .label { text-transform: none; font-size: 15px; }
:lang(ar) .step .n { font-size: 14px; }

/* LinkedIn line beneath the instructor photo */
.instructor .linkedin {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 0 4px; border-bottom: 1px solid var(--mist);
  font-size: 18px; font-weight: 700; color: var(--graphite); text-decoration: none;
}
.instructor .linkedin svg { width: 26px; height: 26px; fill: #0A66C2; flex: none; transition: fill .2s var(--ease); }
.instructor .linkedin .arr { margin-inline-start: auto; color: var(--red); transition: transform .2s var(--ease); }
.instructor .linkedin:hover svg { fill: #004182; }
.instructor .linkedin:hover { color: #0A66C2; }
.instructor .linkedin:hover .arr { transform: translateX(4px); }
[dir="rtl"] .instructor .linkedin:hover .arr { transform: translateX(-4px); }