/* Stötzer Modern 2.5: only the requested header / homepage changes.
   The reference portrait is an extracted asset, not a newly generated face. */

/* One continuous dark header. Logo block centred across both desktop rows. */
.site-header {
  border: 0;
  box-shadow: none;
}
.site-header .sto-nav-row {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.sto-header-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(76px, auto) minmax(50px, auto);
  column-gap: 28px;
  align-items: center;
}
.sto-header-layout > .sto-brand {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 16px;
}
.sto-header-layout > .sto-header-tools {
  grid-column: 2;
  grid-row: 1;
  justify-content: flex-end;
  align-self: center;
}
.sto-header-layout > .sto-nav-row {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
}
.site-header .sto-brand-name {
  font-size: clamp(1.55rem, 2vw, 1.75rem);
  line-height: 1.14;
}
.site-header .sto-brand-sub {
  font-size: .875rem;
  line-height: 1.4;
  margin-top: 5px;
}
.site-header .sto-cross {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
}
.site-header .sto-cross::before {
  width: 20px;
  height: 56px;
  left: 18px;
  top: 0;
}
.site-header .sto-cross::after {
  width: 56px;
  height: 20px;
  left: 0;
  top: 18px;
}
.site-header .custom-logo { max-height: 72px; width: auto; }
.site-header .sto-brand-copy { justify-content: center; }
.site-header .sto-nav-inner { min-height: 50px; }

/* Keep visible blue water all the way to the left. The translucent gradient
   still protects the copy without an almost-opaque white panel. */
.sto-hero::before {
  background: linear-gradient(90deg,
    rgba(240,250,253,.65) 0%,
    rgba(243,251,253,.65) 26%,
    rgba(244,252,253,.54) 43%,
    rgba(245,252,253,.31) 56%,
    rgba(245,252,253,.09) 72%,
    rgba(245,252,253,.025) 100%);
}
.sto-hero::after {
  background: linear-gradient(180deg,
    rgba(255,255,255,.17) 0%,
    rgba(255,255,255,.10) 40%,
    rgba(255,255,255,0) 100%);
}

/* The full chest-and-shoulders silhouette from the approved header reference.
   The image has its own alpha channel; no shirt removal, crop or fade-out. */
.sto-hero-person.sto-hero-person--reference {
  left: calc(6% - 75px);
  right: auto;
  bottom: 0;
  top: auto;
  width: auto;
  height: 322px;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: contain;
  object-position: center bottom;
  transform: none;
  filter: none;
  clip-path: none;
  -webkit-mask-image: none;
  mask-image: none;
}

@media (min-width: 1101px) and (max-width: 1200px) {
  /* Keep the signature clear of the face in the narrower desktop grid. */
  .sto-hero-signature { width: 184px; }
}

@media (max-width: 1100px) {
  .sto-header-layout {
    grid-template-rows: auto auto;
    column-gap: 18px;
  }
  .sto-header-layout > .sto-brand { grid-row: 1; }
  .sto-header-layout > .sto-nav-row { grid-column: 1 / -1; }
  .site-header .sto-brand-name { font-size: 1.55rem; }
  .site-header .sto-brand-sub { font-size: .82rem; }
  .sto-hero-person.sto-hero-person--reference { height: 312px; left: -73px; }
}
@media (min-width: 681px) and (max-width: 900px) {
  .sto-hero-person.sto-hero-person--reference {
    width: min(100%, 355px);
    height: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media (max-width: 900px) {
  .site-header .sto-brand { gap: 14px; }
  .site-header .sto-brand-name { font-size: 1.45rem; }
  .site-header .sto-cross { width: 48px; height: 48px; flex-basis: 48px; }
  .site-header .sto-cross::before { width: 18px; height: 48px; left: 15px; top: 0; }
  .site-header .sto-cross::after { width: 48px; height: 18px; left: 0; top: 15px; }
}
@media (max-width: 680px) {
  .sto-header-layout { column-gap: 12px; }
  .sto-header-layout > .sto-brand {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 16px 0 6px;
  }
  .sto-header-layout > .sto-header-tools {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    min-height: 50px;
    position: relative;
    z-index: 2;
  }
  .sto-header-layout > .sto-nav-row { grid-column: 1 / -1; grid-row: 2; }
  .site-header .sto-menu-toggle { padding-right: 8px; }
  .site-header .sto-brand-name { font-size: clamp(1.2rem, 5.2vw, 1.5rem); }
  .site-header .sto-cross { width: 44px; height: 44px; flex-basis: 44px; }
  .site-header .sto-cross::before { width: 16px; height: 44px; left: 14px; top: 0; }
  .site-header .sto-cross::after { width: 44px; height: 16px; left: 0; top: 14px; }
  .sto-hero::before {
    background: linear-gradient(180deg,
      rgba(242,251,253,.93) 0%,
      rgba(242,251,253,.89) 38%,
      rgba(238,249,253,.56) 62%,
      rgba(236,249,253,.14) 100%);
  }
  .sto-hero-visual { min-height: clamp(196px, calc(60vw + 4px), 274px); }
  .sto-hero-person.sto-hero-person--reference {
    height: clamp(180px, calc(60vw - 12px), 258px);
    width: auto;
    left: max(0px, calc(50% - 245px));
    transform: none;
  }
  .sto-hero-signature {
    width: clamp(122px, 32vw, 178px);
    top: 10px;
  }
}