.state-screen{
  min-height:70vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:var(--space-sm);
  padding:var(--space-lg);
}
.state-screen__icon{ width:56px; height:56px; color:var(--color-accent); opacity:0.8; }
.state-screen h1,
.state-screen h2{ font-size:var(--fs-h2); }
.state-screen p{ max-width:420px; color:var(--color-text-soft); }

.portfolio-skeleton{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-lg);
  padding-block:calc(72px + var(--space-2xl)) var(--space-lg);
}
.portfolio-skeleton > div{ width:100%; max-width:360px; }
.portfolio-skeleton .skeleton-line{ height:1em; margin-bottom:0.6em; }
.portfolio-section{
  padding-block:var(--space-3xl);
}
.portfolio-section--alt{
  background:var(--color-surface-warm);
}
.portfolio-prose{
  max-width:720px;
  margin-inline:auto;
  color:var(--color-text-soft);
  font-size:var(--fs-lead);
}
.portfolio-hero{
  position:relative;
  padding-block:calc(72px + var(--space-3xl)) var(--space-3xl);
  overflow:hidden;
  text-align:center;
}
.portfolio-hero__cover{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  z-index:0;
}
.portfolio-hero__cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 0%, var(--color-bg) 92%);
  background:linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 55%, transparent) 0%, var(--color-bg) 92%);
}
.portfolio-hero__inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-2xs);
  max-width:720px;
}
.portfolio-hero__photo-wrap{
  width:168px;
  height:168px;
  border-radius:50%;
  padding:5px;
  background:var(--gradient-gold);
  margin-bottom:var(--space-md);
  box-shadow:var(--shadow-md);
}
.portfolio-hero__photo{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
  border:3px solid var(--color-bg);
}
.portfolio-hero__name{
  font-size:clamp(2rem, 1.5rem + 2vw, 3.2rem);
  font-family:var(--font-signature-en);
  font-weight:var(--font-signature-en-weight);
  line-height:var(--font-signature-en-leading);
  letter-spacing:var(--font-signature-en-tracking);
}
html[lang="ar"] .portfolio-hero__name{
  font-family:var(--font-signature-ar);
  font-weight:var(--font-signature-ar-weight);
  line-height:var(--font-signature-ar-leading);
  letter-spacing:var(--font-signature-ar-tracking);
}
[data-hero-title]:empty,
[data-hero-tagline]:empty,
[data-hero-location]:empty{
  display:none;
}
.portfolio-hero__tagline{
  max-width:560px;
  font-size:var(--fs-lead);
  color:var(--color-text-soft);
  margin-top:var(--space-2xs);
}
.portfolio-hero__location{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:var(--fs-small);
  color:var(--color-text-muted);
}
.portfolio-hero__location:not(:empty)::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--color-secondary);
  flex-shrink:0;
}
.portfolio-hero__tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-3xs);
  margin-top:var(--space-2xs);
}
.portfolio-hero__cta{ margin-top:var(--space-md); }
.portfolio-hero__cta:empty{ display:none; }
.mission-vision-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:var(--space-lg);
}
.mission-vision-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-xl);
  box-shadow:var(--shadow-sm);
  text-align:center;
}
.mission-vision-card__icon{
  width:52px;
  height:52px;
  margin-inline:auto;
  margin-bottom:var(--space-sm);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--color-accent-soft);
  color:var(--color-accent-strong);
}
.mission-vision-card__icon svg{ width:26px; height:26px; }
.mission-vision-card h3{ margin-bottom:var(--space-2xs); }
.mission-vision-card p{ color:var(--color-text-soft); }
.timeline{
  position:relative;
  max-width:720px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:var(--space-xl);
}
.timeline::before{
  content:"";
  position:absolute;
  inset-inline-start:7px;
  top:8px;
  bottom:8px;
  width:1px;
  background:var(--color-border-strong);
}
.timeline-item{
  position:relative;
  padding-inline-start:var(--space-xl);
}
.timeline-item__marker{
  position:absolute;
  inset-inline-start:0;
  top:6px;
  width:15px;
  height:15px;
  border-radius:50%;
  background:var(--color-bg);
  border:2px solid var(--color-accent);
}
.timeline-item__year{
  display:inline-block;
  font-size:var(--fs-xs);
  font-family:var(--font-interface-en);
  font-weight:700;
  letter-spacing:0.06em;
  color:var(--color-accent-strong);
  margin-bottom:4px;
}
html[lang="ar"] .timeline-item__year{
  font-family:var(--font-interface-ar);
}
.timeline-item__title{ font-size:var(--fs-h3); margin-bottom:4px; }
.timeline-item__desc{ color:var(--color-text-soft); font-size:var(--fs-small); }
.skills-grid{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-sm);
  max-width:860px;
  margin-inline:auto;
}
.skill-tag{
  display:flex;
  align-items:center;
  gap:var(--space-2xs);
  padding:0.6rem 1rem;
  border-radius:var(--radius-badge);
  background:var(--color-sage-soft);
  color:var(--color-sage-strong);
  font-size:var(--fs-small);
  font-family:var(--font-interface-en);
  font-weight:var(--font-interface-en-weight);
  letter-spacing:var(--font-interface-en-tracking);
}
html[lang="ar"] .skill-tag{
  font-family:var(--font-interface-ar);
  font-weight:var(--font-interface-ar-weight);
  letter-spacing:var(--font-interface-ar-tracking);
}
.skill-tag__bar{
  width:56px;
  height:4px;
  border-radius:var(--radius-pill);
  background:rgba(124, 146, 104, 0.22);
  background:color-mix(in srgb, var(--color-sage-strong) 22%, transparent);
  overflow:hidden;
}
.skill-tag__fill{
  display:block;
  height:100%;
  border-radius:var(--radius-pill);
  background:currentColor;
}
.cert-grid, .achievements-grid, .projects-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:var(--space-lg);
}

.cert-card, .project-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium), border-color var(--dur-base) var(--ease-soft);
}
.cert-card:hover, .project-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-glow-lg);
  border-color:var(--color-border-strong);
}
.cert-card__image, .project-card__image{ aspect-ratio:16/10; overflow:hidden; background:var(--color-surface-2); }
.cert-card__image img, .project-card__image img{ width:100%; height:100%; object-fit:cover; }
.cert-card__body, .project-card__body{ padding:var(--space-md); }
.cert-card__title, .project-card__title{ font-size:var(--fs-h3); margin-bottom:4px; }
.cert-card__meta{ font-size:var(--fs-xs); font-family:var(--font-interface-en); color:var(--color-olive-strong); background:var(--color-olive-soft); display:inline-block; padding:3px 9px; border-radius:var(--radius-badge); margin-top:4px; }
html[lang="ar"] .cert-card__meta{ font-family:var(--font-interface-ar); }
.cert-card__link, .project-card__link{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:var(--space-sm);
  font-size:var(--fs-small);
  font-weight:700;
  color:var(--color-accent-strong);
}
.project-card__desc{ color:var(--color-text-soft); font-size:var(--fs-small); margin-top:4px; }
.project-card__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--space-2xs); }

.achievement-card{
  display:flex;
  gap:var(--space-sm);
  padding:var(--space-md);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.achievement-card__icon{
  flex-shrink:0;
  width:44px;
  height:44px;
  border-radius:var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--color-olive-soft);
  color:var(--color-olive-strong);
}
.achievement-card__icon svg{ width:22px; height:22px; }
.achievement-card__year{ font-size:var(--fs-xs); font-family:var(--font-interface-en); font-weight:700; color:var(--color-olive-strong); }
html[lang="ar"] .achievement-card__year{ font-family:var(--font-interface-ar); }
.achievement-card__title{ font-size:var(--fs-h3); margin:2px 0 4px; }
.achievement-card__desc{ color:var(--color-text-soft); font-size:var(--fs-small); }
.portfolio-quote-block{
  max-width:760px;
  margin-inline:auto;
  text-align:center;
}
.portfolio-quote-mark{
  width:44px;
  height:33px;
  color:var(--color-accent);
  opacity:0.55;
  margin-bottom:var(--space-sm);
}
.portfolio-quote-block h2{ margin-bottom:var(--space-sm); }
.portfolio-quote-block .portfolio-prose{
  font-size:var(--fs-h3);
  font-family:var(--font-signature-en);
  font-weight:var(--font-signature-en-weight);
  line-height:var(--font-signature-en-leading);
  letter-spacing:var(--font-signature-en-tracking);
  color:var(--color-text);
}
html[lang="ar"] .portfolio-quote-block .portfolio-prose{
  font-family:var(--font-signature-ar);
  font-weight:var(--font-signature-ar-weight);
  line-height:var(--font-signature-ar-leading);
  letter-spacing:var(--font-signature-ar-tracking);
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:var(--space-md);
}
.gallery-item{
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--color-surface-2);
  box-shadow:var(--shadow-sm);
}
.gallery-item img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform var(--dur-slow) var(--ease-premium); }
.gallery-item:hover img{ transform:scale(1.04); }
.gallery-item figcaption{ padding:var(--space-2xs) var(--space-sm); font-size:var(--fs-xs); color:var(--color-text-muted); }
.portfolio-final-cta{
  text-align:center;
  background:linear-gradient(180deg, var(--color-surface-warm), var(--color-bg));
}
.portfolio-final-cta__inner{
  max-width:620px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-sm);
}
.portfolio-final-cta p{ color:var(--color-text-soft); }