/* Hero title glass pill */
.page__hero .wrapper{
  position:absolute; left:1rem; bottom:.75rem; z-index:2;
  background: rgba(0,0,0,0.46);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding:.45rem .70rem; border-radius:.55rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);
}
.page__hero .page__title{
  margin:0; color:#fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.65);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .page__hero .wrapper{ background: rgba(0,0,0,0.62); }
}

/* 0) Put the variable on html (stronger) */
html { --hero-h: 100px; } /* change this value to test */

/* 1) Enforce height + stop margin collapse */
.page__hero,
.page__hero--image,
.page__hero--overlay{
  height: var(--hero-h) !important;
  min-height: var(--hero-h) !important;
  max-height: var(--hero-h) !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;

  overflow: hidden !important;              /* 🔑 prevents next H1 margin collapsing upward */
  border-bottom: 1px solid transparent;     /* extra guard */

  background-size: contain !important;      /* letterbox/pillarbox */
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #20405B !important;
}

/* 2) Kill top margin of first content element (belt & suspenders) */
.page__content > *:first-child { margin-top: 0 !important; }

/* 3) Mobile value */
@media (max-width:480px){
  html { --hero-h: 80px; }
}