.hero-visual {
  position: relative;
  overflow: hidden;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px;
  background: radial-gradient(circle at 76% 18%, #247fd0 0%, #0b4b92 26%, var(--navy) 62%, var(--deep) 100%);
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 42%, #00d98b12 42.2%, transparent 42.8%),
    linear-gradient(35deg, transparent 64%, #ffffff10 64.2%, transparent 64.8%);
}

.motion-orbit {
  position: absolute;
  border: 1px solid #ffffff26;
  border-radius: 50%;
}

.orbit-one {
  width: 540px;
  height: 540px;
  right: -145px;
  top: -115px;
}

.orbit-two {
  width: 310px;
  height: 310px;
  right: -20px;
  top: 5px;
  border-color: #00d98b55;
}

.hero-monogram {
  position: relative;
  display: flex;
  align-items: center;
  font: 800 clamp(4.5rem, 9vw, 8rem)/0.8 "Manrope";
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 12px 35px #00163155;
}

.hero-monogram b {
  color: var(--green);
  transform: translateY(-5px);
}

.official-logo {
  display: block;
  object-fit: contain;
}

.nav-logo {
  width: 186px;
  height: 66px;
  border-radius: 4px;
}

.hero-logo {
  position: relative;
  z-index: 1;
  width: min(72%, 360px);
  height: auto;
  align-self: flex-start;
  border-radius: 6px;
  box-shadow: 0 18px 42px #00142f45;
}

.typed-hero-logo {
  position: relative;
  z-index: 1;
  width: min(82%, 430px);
}

.typed-hyra {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.03em;
  padding: 0 0.08em 0.08em;
  font: 700 clamp(4.1rem, 7vw, 7rem)/0.92 "DM Sans", sans-serif;
  letter-spacing: 0.015em;
  color: #fff;
}

.typed-human-y {
  position: relative;
  display: inline-block;
  color: var(--green);
  font-weight: 700;
  transform: translateY(0.02em);
}

.typed-human-y::before {
  content: "";
  position: absolute;
  top: -0.16em;
  left: 50%;
  width: 0.19em;
  height: 0.19em;
  border-radius: 50%;
  background: var(--green);
  transform: translateX(-50%);
}

.typed-centre {
  padding: 0.22em 0.3em 0.2em;
  background: var(--green);
  color: var(--navy);
  text-align: center;
  white-space: nowrap;
  font: 800 clamp(0.82rem, 1.35vw, 1.28rem)/1 "Manrope", sans-serif;
  letter-spacing: 0.025em;
}

.visual-tagline {
  position: relative;
  margin: 32px 0 55px;
  font: 600 clamp(1.55rem, 2.5vw, 2.35rem)/1.25 "Manrope";
  color: #dcecff;
  letter-spacing: -0.025em;
}

.care-path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding-top: 22px;
  border-top: 1px solid #ffffff38;
}

.care-path div { display: flex; flex-direction: column; gap: 7px; }
.care-path span { color: var(--green); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; }
.care-path strong { color: #fff; font: 700 1rem "Manrope"; }

@media (max-width: 850px) {
  .hero-visual { min-height: 410px; padding: 46px 26px; }
  .hero-monogram { font-size: clamp(4rem, 20vw, 6.5rem); }
  .nav-logo { width: 148px; height: 52px; }
  .hero-logo { width: min(76%, 330px); }
  .typed-hero-logo { width: min(88%, 390px); }
  .typed-hyra { font-size: clamp(4rem, 20vw, 6.2rem); }
  .typed-centre { font-size: clamp(0.75rem, 3.2vw, 1.1rem); }
  .visual-tagline { margin: 27px 0 45px; }
  .orbit-one { width: 430px; height: 430px; right: -190px; }
  .orbit-two { width: 260px; height: 260px; right: -80px; }
}

.hero-visual.hero-photo {
  display: block;
  padding: 0;
  background: var(--navy);
}

.hero-visual.hero-photo::before {
  display: none;
}

.hero-treatment-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 600px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 850px) {
  .hero-treatment-image {
    min-height: 410px;
    object-position: 57% center;
  }
}