@font-face {
  font-family: 'Soleil';
  src: url('Assets/fonts/SoleilRegular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Soleil';
  src: url('Assets/fonts/SoleilBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

*,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #201D1D; color: #fff; font-family: 'Soleil', sans-serif; font-weight: 400; font-size: 16px; line-height: 28px; }
.page { width: 1280px; margin: 0 auto; }

/* ── Nav ── */
nav { display: flex; justify-content: center; padding: 60px 0; }
.logo a { display: block; line-height: 0; text-decoration: none; outline: none; }
.logo svg { width: 190px; height: auto; display: block; }

/* ── Hero heading ── */
.hero-heading { display: block; width: 100%; }
.hero-heading svg { width: 100%; height: auto; display: block; }

/* ── Hero 3-column content ── */
.hero-content {
  display: grid;
  grid-template-columns: 1fr 304.75px 1fr;
  gap: 30px;
  padding: 15px 105px 0 105px;
  align-items: start;
  margin-bottom: 170px;
}

.hero-left { margin-top: 60px; text-align: right; }
.hero-left h2 { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 25px; line-height: 28px; }
.hero-left .role { font-size: 16px; font-weight: 400; color: rgba(255,255,255,.58); line-height: 28px; margin-bottom: 25px; }
.hero-left .tagline { font-size: 16px; font-weight: 400; color: rgba(255,255,255,.58); line-height: 28px; }

.hero-image { display: flex; justify-content: center; }
.hero-image svg { width: 304.75px; height: 378.93px; display: block; }

.hero-right { margin-top: 60px; }
.hero-right p { font-size: 16px; font-weight: 400; color: rgba(255,255,255,.58); line-height: 28px; }
.hero-right p + p { margin-top: 25px; }

/* ── Work & Education ── */
.work-edu { display: flex; justify-content: center; padding: 0 44px; margin-bottom: 120px; }
.work-edu svg { width: 100%; max-width: 1192px; height: auto; display: block; }

/* ── Projects ── */
.projects { padding: 150px 96px 0; }
.projects-heading { display: flex; align-items: center; justify-content: center; margin-bottom: 40px; }
.projects-heading svg { height: 62px; width: auto; display: block; }
.projects-arrow { display: flex; justify-content: center; margin-bottom: 40px; }
.projects-arrow svg { width: 57px; height: auto; }
.projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 16px; row-gap: 50px; }
.project-thumb { width: 100%; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; background: #2C2828; }
.project-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.project-card { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.project-card:hover .project-thumb img { transform: scale(1.05); }
.thumb-ph { width: 100%; height: 100%; background: linear-gradient(145deg, #2C2828, #363030); }
.project-card h4 { font-size: 16px; font-weight: 400; color: #C9A84C; margin: 14px 0 6px; line-height: 28px; }
.project-card p { font-size: 16px; font-weight: 400; color: rgba(255,255,255,.52); line-height: 28px; }

/* ── Contact ── */
.contact { padding: 170px 96px 56px; display: flex; justify-content: center; }
.contact-wrap { position: relative; width: 836px; height: 331px; display: flex; align-items: center; justify-content: center; }
.contact-outline { position: absolute; inset: 0; width: 100%; height: 100%; }
.contact-outline svg { width: 100%; height: 100%; display: block; }
.contact-inner { position: relative; z-index: 1; text-align: center; }
.contact-inner .lbl { letter-spacing: 8px; font-size: 18px; font-weight: 700; text-transform: uppercase; color: #fff; margin-bottom: 14px; line-height: 28px; }
.contact-inner .sub { font-size: 16px; font-weight: 400; color: rgba(255,255,255,.55); line-height: 28px; margin-bottom: 22px; }
.contact-inner a { font-size: 22px; font-weight: 400; color: #C9A84C; text-decoration: none; line-height: 28px; }
.contact-inner a:hover { text-decoration: underline; }

/* ── Footer ── */
footer { display: flex; justify-content: center; padding: 16px 0 48px; }
.footer-svg svg { width: 1231px; max-width: 100%; height: auto; display: block; opacity: .72; }