/* MVTJ Designs — Hero fix using one finished composite image */

.site-header {
  min-height: 92px;
  background: linear-gradient(180deg, rgba(2, 4, 6, 0.98), rgba(2, 4, 6, 0.92)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  position: relative;
  z-index: 50;
}

.nav-inner {
  min-height: 92px;
}

.logo {
  width: 190px !important;
}

.logo img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* HERO SECTION */
.hero {
  position: relative !important;
  min-height: calc(100vh - 92px) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    linear-gradient(90deg, rgba(3, 7, 10, 0.92) 0%, rgba(3, 7, 10, 0.68) 24%, rgba(3, 7, 10, 0.18) 45%, rgba(3, 7, 10, 0.06) 100%),
    url("mvtj-hero-composite.png") center center / cover no-repeat !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(4, 8, 12, 0.08) 0%, rgba(4, 8, 12, 0.18) 100%),
    radial-gradient(circle at 68% 34%, rgba(217, 155, 43, 0.16), transparent 32%) !important;
}

.hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0.10 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
  background-size: 115px 115px !important;
}

.hero-inner,
.hero .container {
  position: relative !important;
  z-index: 2 !important;
}

.hero-inner {
  min-height: calc(100vh - 92px) !important;
  display: grid !important;
  grid-template-columns: 1.05fr 0.95fr !important;
  align-items: end !important;
}

/* LEFT TEXT AREA */
.hero-copy {
  position: relative !important;
  z-index: 5 !important;
  max-width: 760px !important;
  padding-top: clamp(42px, 7vh, 92px) !important;
  padding-bottom: clamp(60px, 8vh, 95px) !important;
}

.hero-copy h1 {
  font-size: clamp(4.7rem, 8.2vw, 9rem) !important;
  line-height: 0.88 !important;
  letter-spacing: 0.015em !important;
  text-shadow: 0 16px 42px rgba(0, 0, 0, 0.58) !important;
}

.hero-copy .lead {
  max-width: 620px !important;
  font-size: clamp(1.08rem, 1.45vw, 1.45rem) !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

.hero-tabs {
  gap: 16px 34px !important;
}

.hero-meta {
  margin-top: 34px !important;
  color: var(--gold-2) !important;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

.hero-actions {
  margin-top: 34px !important;
}

/* HIDE OLD SEPARATE PORTRAIT AREA
   because the new composite image already includes you */
.hero-portrait-wrap,
.hero-portrait {
  display: none !important;
}

/* Cyprus mark on the upper-right */
.cyprus-mark {
  top: 108px !important;
  right: 48px !important;
  width: 142px !important;
  opacity: 0.98 !important;
  z-index: 6 !important;
}

.cyprus-mark svg,
.cyprus-mark img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

.cyprus-mark span {
  color: var(--gold-2) !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.2em !important;
}

/* MOBILE */
@media (max-width: 980px) {
  .site-header,
  .nav-inner {
    min-height: 78px !important;
  }

  .logo {
    width: 145px !important;
  }

  .hero {
    min-height: auto !important;
    background:
      linear-gradient(180deg, rgba(2, 6, 9, 0.78) 0%, rgba(2, 6, 9, 0.60) 45%, rgba(2, 6, 9, 0.88) 100%),
      url("mvtj-hero-composite.png") 62% center / cover no-repeat !important;
  }

  .hero-inner {
    min-height: auto !important;
    display: block !important;
  }

  .hero-copy {
    max-width: 100% !important;
    padding-top: 72px !important;
    padding-bottom: 64px !important;
  }

  .hero-copy h1 {
    font-size: clamp(3.3rem, 14vw, 6rem) !important;
    line-height: 0.9 !important;
  }

  .hero-copy .lead {
    font-size: 1.05rem !important;
  }

  .hero-tabs {
    gap: 14px 20px !important;
  }

  .cyprus-mark {
    top: 82px !important;
    right: 20px !important;
    width: 102px !important;
  }
}
/* =========================================================
   EXPERIENCE & PROJECTS — FINAL CLEAN LAYOUT
   ========================================================= */

#experience.experience {
  padding: 90px 0 !important;
  background: #050607 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#experience .experience-row {
  display: grid !important;
  grid-template-columns: 360px minmax(0, 1fr) !important;
  gap: 72px !important;
  align-items: start !important;
}

#experience .section-kicker {
  margin-bottom: 14px !important;
  color: var(--gold-2) !important;
  letter-spacing: 0.22em !important;
}

#experience h2 {
  max-width: 360px !important;
  font-size: clamp(2.7rem, 3vw, 3.35rem) !important;
  line-height: 0.92 !important;
  letter-spacing: 0.025em !important;
  margin: 0 !important;
  overflow-wrap: normal !important;
}

#experience .gold-line {
  width: 84px !important;
  margin-top: 28px !important;
}

#experience .experience-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

#experience .experience-logo {
  min-height: 106px !important;
  padding: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
  letter-spacing: 0.14em !important;
}

#experience .experience-note {
  max-width: 760px !important;
  margin-top: 22px !important;
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
  color: rgba(220, 225, 230, 0.76) !important;
}

/* Tablet */
@media (max-width: 1100px) {
  #experience .experience-row {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  #experience h2 {
    max-width: 620px !important;
    font-size: clamp(3rem, 7vw, 4.6rem) !important;
  }

  #experience .experience-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile */
@media (max-width: 720px) {
  #experience.experience {
    padding: 70px 0 !important;
  }

  #experience .experience-list {
    grid-template-columns: 1fr !important;
  }

  #experience h2 {
    font-size: clamp(2.7rem, 12vw, 4rem) !important;
  }

  #experience .experience-logo {
    min-height: 86px !important;
  }
}
/* =========================================================
   PROCESS SECTION — FINAL CLEAN LAYOUT
   ========================================================= */

#process.section {
  padding: 90px 0 !important;
  background: #05090b !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#process .process-grid {
  display: grid !important;
  grid-template-columns: 320px repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(34px, 3.5vw, 54px) !important;
  align-items: start !important;
}

#process .process-title {
  max-width: 320px !important;
}

#process .section-kicker {
  margin-bottom: 14px !important;
  color: var(--gold-2) !important;
  letter-spacing: 0.22em !important;
}

#process .process-title h2 {
  max-width: 320px !important;
  font-size: clamp(2.7rem, 3vw, 3.35rem) !important;
  line-height: 0.92 !important;
  letter-spacing: 0.025em !important;
  margin: 0 !important;
}

#process .process-title .gold-line {
  width: 84px !important;
  margin-top: 28px !important;
}

#process .process-step {
  min-width: 0 !important;
  padding-top: 0 !important;
  position: relative !important;
}

#process .step-num {
  font-size: clamp(2.5rem, 3.1vw, 3.1rem) !important;
  margin-bottom: 2px !important;
  color: rgba(255, 255, 255, 0.10) !important;
}

#process .process-step svg {
  width: 38px !important;
  height: 38px !important;
  margin-bottom: 18px !important;
  color: var(--gold-2) !important;
}

#process .process-step h3 {
  font-size: 0.95rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 12px !important;
}

#process .process-step p {
  max-width: 230px !important;
  font-size: 0.84rem !important;
  line-height: 1.6 !important;
  color: rgba(220, 225, 230, 0.76) !important;
}

#process .process-step:not(:last-child)::after {
  right: -30px !important;
  top: 46px !important;
  width: 34px !important;
  opacity: 0.55 !important;
}

/* Tablet */
@media (max-width: 1100px) {
  #process .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 42px 34px !important;
  }

  #process .process-title {
    grid-column: 1 / -1 !important;
    max-width: 640px !important;
  }

  #process .process-title h2 {
    max-width: 640px !important;
    font-size: clamp(3rem, 7vw, 4.6rem) !important;
  }

  #process .process-step:not(:last-child)::after {
    display: none !important;
  }
}

/* Mobile */
@media (max-width: 720px) {
  #process.section {
    padding: 70px 0 !important;
  }

  #process .process-grid {
    grid-template-columns: 1fr !important;
  }

  #process .process-title h2 {
    font-size: clamp(2.7rem, 12vw, 4rem) !important;
  }

  #process .process-step p {
    max-width: 100% !important;
  }
}