.hero {
  display: grid;
  grid-template-columns: minmax(470px, 46%) minmax(0, 54%);
  min-height: clamp(520px, 39vw, 620px);
  background: var(--navy-850);
  border-bottom: 0;
}
.hero-copy {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--navy-850);
  border-right: 0;
}
.hero-content {
  width: 100%;
  max-width: 760px;
  padding: 72px 54px 72px max(34px, calc((100vw - var(--content-max)) / 2));
}
.hero h1 {
  margin: 0 0 28px;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(58px, 4.5vw, 76px);
  line-height: 1.065;
  letter-spacing: .01em;
}
.hero p {
  margin: 0;
  max-width: 690px;
  color: rgba(255,255,255,.94);
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.43;
}
.hero-image {
  min-width: 0;
  min-height: 100%;
  background: #061d35 url("../assets/hero-duesseldorf-clean.png") center center / cover no-repeat;
}

.proof-strip {
  width: 100%;
  max-width: 1300px;
  min-height: 154px;
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1.17fr;
  align-items: center;
  column-gap: clamp(24px, 2.5vw, 42px);
}
.proof-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 1.6vw, 24px);
  color: #f3f6f9;
  font-size: clamp(16.5px, 1.28vw, 18.5px);
  line-height: 1.4;
}
.proof-item svg {
  width: clamp(46px, 3.6vw, 52px);
  height: clamp(46px, 3.6vw, 52px);
  flex: 0 0 auto;
  fill: none;
  stroke: var(--lime);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.proof-item.wide svg { width: clamp(62px, 4.8vw, 70px); }
.proof-divider { width: 1px; height: 64px; background: rgba(190,204,217,.24); }

.teasers {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 12px var(--page-pad) 62px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 1.5vw, 24px);
}
.teaser-card {
  position: relative;
  min-height: clamp(280px, 22vw, 318px);
  padding: clamp(30px, 2.5vw, 39px) clamp(22px, 1.8vw, 28px) 27px;
  border: 1px solid rgba(135,170,196,.29);
  border-radius: 11px;
  background: #08233d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.teaser-icon {
  width: clamp(43px, 3.4vw, 49px);
  height: clamp(43px, 3.4vw, 49px);
  margin-bottom: 24px;
  fill: none;
  stroke: var(--cyan-bright);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.teaser-card h2 {
  margin: 0 0 13px;
  font-weight: 500;
  font-size: clamp(16px, 1.24vw, 18px);
  line-height: 1.16;
}
.teaser-card p {
  margin: 0;
  color: #d7dee5;
  font-size: clamp(14.3px, 1.08vw, 15.7px);
  line-height: 1.53;
}
.arrow {
  position: absolute;
  left: clamp(22px, 1.8vw, 28px);
  bottom: 24px;
  color: var(--cyan-bright);
  font: 300 30px/1 Arial, sans-serif;
}
.mobile-primary-action { display: none; }

@media (min-width: 1650px) {
  .hero { grid-template-columns: minmax(660px, 44%) minmax(0, 56%); }
  .hero-content { padding-right: 70px; }
}

@media (min-width: 901px) and (max-width: 1050px) {
  .hero {
    grid-template-columns: 56% 44%;
    min-height: 420px;
  }
  .hero-content {
    padding: 46px 42px 46px 42px;
  }
  .hero h1 {
    margin-bottom: 18px;
    font-size: 47px;
  }
  .hero p {
    max-width: 500px;
    font-size: 19px;
    line-height: 1.4;
  }
  .hero p br { display: none; }
  .hero-image {
    background-position: 52% center;
  }

  .proof-strip {
    max-width: none;
    min-height: 132px;
    padding: 0 42px;
    column-gap: 20px;
  }
  .proof-item { gap: 14px; font-size: 14.7px; line-height: 1.34; }
  .proof-item svg { width: 41px; height: 41px; }
  .proof-item.wide svg { width: 54px; }
  .proof-divider { height: 52px; }

  .teasers {
    max-width: none;
    padding: 10px 28px 46px;
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: 16px;
  }
  .teaser-card { min-height: 232px; padding: 25px 20px 23px; }
  .teaser-card:nth-child(1),
  .teaser-card:nth-child(2),
  .teaser-card:nth-child(3) { grid-column: span 2; }
  .teaser-card:nth-child(4) { grid-column: 2 / span 2; }
  .teaser-card:nth-child(5) { grid-column: 4 / span 2; }
  .teaser-icon { width: 39px; height: 39px; margin-bottom: 18px; }
  .teaser-card h2 { font-size: 17px; margin-bottom: 10px; }
  .teaser-card p { font-size: 14.2px; line-height: 1.46; }
  .arrow { left: 20px; bottom: 19px; font-size: 27px; }
}

@media (max-width: 900px) and (min-width: 601px) {
  .hero {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero-copy { border-right: 0; border-bottom: 0; }
  .hero-content { max-width: none; padding: 48px 40px 42px; }
  .hero h1 { margin-bottom: 20px; font-size: 52px; line-height: 1.07; }
  .hero p { max-width: 620px; font-size: 21px; line-height: 1.42; }
  .hero p br { display: none; }
  .hero-image {
    min-height: 0;
    aspect-ratio: 2.25 / 1;
    background-size: cover;
    background-position: center center;
  }

  .proof-strip {
    max-width: none;
    min-height: 148px;
    padding: 0 32px;
    column-gap: 18px;
  }
  .proof-item { gap: 13px; font-size: 14.5px; line-height: 1.36; }
  .proof-item svg { width: 40px; height: 40px; }
  .proof-item.wide svg { width: 52px; }
  .proof-divider { height: 56px; }

  .teasers {
    max-width: none;
    padding: 8px 32px 52px;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
  }
  .teaser-card { min-height: 230px; padding: 27px 25px 23px; }
  .teaser-card:last-child {
    grid-column: 1 / -1;
    min-height: 188px;
    display: grid;
    grid-template-columns: 62px 1fr;
    grid-template-rows: auto auto 1fr;
    column-gap: 20px;
  }
  .teaser-card:last-child .teaser-icon { grid-row: 1 / 4; margin: 3px 0 0; }
  .teaser-card:last-child h2,
  .teaser-card:last-child p { grid-column: 2; }
  .teaser-card:last-child .arrow { left: 106px; }
  .teaser-icon { width: 41px; height: 41px; margin-bottom: 19px; }
  .teaser-card h2 { font-size: 18.5px; }
  .teaser-card p { font-size: 15.5px; line-height: 1.47; }
}

@media (max-width: 600px) {
  .hero {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero-copy { border-right: 0; border-bottom: 0; }
  .hero-content { max-width: none; padding: 29px 19px 27px; }
  .hero h1 {
    max-width: 350px;
    margin-bottom: 16px;
    font-size: clamp(37px, 10vw, 42px);
    line-height: 1.04;
  }
  .hero p {
    max-width: 350px;
    font-size: 16.2px;
    line-height: 1.40;
  }
  .hero p br { display: none; }
  .hero-image {
    min-height: 0;
    aspect-ratio: 2 / 1;
    background-size: cover;
    background-position: center center;
  }

  .proof-strip {
    max-width: none;
    min-height: 0;
    padding: 16px 17px 17px;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .proof-item {
    min-height: 58px;
    justify-content: flex-start;
    gap: 15px;
    padding: 6px 2px;
    font-size: 14.5px;
    line-height: 1.28;
  }
  .proof-item svg,
  .proof-item.wide svg { width: 38px; height: 38px; }
  .proof-item.wide svg { width: 45px; }
  .proof-divider { width: 100%; height: 1px; background: rgba(190,204,217,.19); }

  .teasers { display: none; }
  .mobile-primary-action {
    display: block;
    padding: 2px 17px 24px;
  }
  .mobile-primary-cta {
    width: 100%;
    min-height: 52px;
    padding: 0 22px;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .01em;
  }
}

/* Ultra-wide refinement: keep the headline authoritative instead of forcing
   a narrow text column on large desktop displays. */
@media (min-width: 1650px) {
  .hero { grid-template-columns: 50% 50%; }
  .hero-content { max-width: 820px; padding-right: 58px; }
  .hero h1 { font-size: 74px; }
  .hero p { max-width: 720px; font-size: 27px; }
}

/* v7 — constrained wide-desktop hero
   Large screens must not turn the hero into a wall-sized photo. The original
   1122px desktop/tablet/mobile layouts stay untouched; from 1180px upward the
   hero becomes a centred, deliberately bounded composition. */
@media (min-width: 1180px) {
  .hero {
    width: calc(100% - 2 * var(--page-pad));
    max-width: 1500px;
    margin: 0 auto;
    grid-template-columns: 42% 58%;
    min-height: 0;
    background: var(--navy-850);
    border-left: 0;
    border-right: 0;
  }

  .hero-copy {
    min-width: 0;
    border-right: 0;
  }

  .hero-content {
    max-width: none;
    padding: clamp(38px, 3vw, 56px) clamp(34px, 3vw, 54px);
  }

  .hero h1 {
    margin-bottom: clamp(18px, 1.6vw, 24px);
    font-size: clamp(56px, 4.15vw, 66px);
    line-height: 1.04;
    letter-spacing: .005em;
    white-space: nowrap;
  }

  .hero p {
    max-width: 600px;
    font-size: clamp(20px, 1.55vw, 24px);
    line-height: 1.40;
  }

  .hero-image {
    min-height: 0;
    aspect-ratio: 2 / 1;
    align-self: center;
    background-size: 100% 100%;
    background-position: center center;
  }
}

@media (min-width: 1180px) and (max-width: 1320px) {
  .hero {
    width: calc(100% - 48px);
    grid-template-columns: 44% 56%;
  }
  .hero-content { padding: 34px 34px; }
  .hero h1 { font-size: 54px; }
  .hero p { font-size: 19.5px; line-height: 1.38; }
}

/* v15 — homepage hero aligned to the global visible content grid
   The homepage hero must start and end on the same horizontal edges as
   the primary content on all other pages. Only the hero outer width changes;
   approved content, image ratio, typography and responsive composition stay intact. */
@media (min-width: 1051px) {
  .hero {
    width: calc(100% - var(--site-page-pad) - var(--site-page-pad)) !important;
    max-width: calc(var(--site-content-max) - var(--site-page-pad) - var(--site-page-pad)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 901px) and (max-width: 1050px) {
  .hero {
    width: calc(100% - 64px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 900px) and (min-width: 601px) {
  .hero {
    width: calc(100% - 64px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 600px) {
  .hero {
    width: calc(100% - 30px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* v31 — desktop hero balance
   The Düsseldorf image remains an important visual anchor but must not
   dominate the positioning copy. Tablet landscape keeps its approved
   56/44 text/image split; portrait and mobile remain unchanged. */
@media (min-width: 1051px) {
  .hero {
    grid-template-columns: 50% 50%;
  }
}