/* Block - Hero Section #09 Start */
/* ------------------------------------------------*/
.db-hero-09 {
  position: relative;
  width: 100%;
  padding-top: 11rem;
}
@media only screen and (min-width: 768px) {
  .db-hero-09 {
    padding-top: 14.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .db-hero-09 {
    padding-top: 0;
  }
}

.db-hero-09__wrap {
  position: relative;
  width: 100%;
  padding-top: 9.6rem;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .db-hero-09__wrap {
    padding-top: 9.6rem;
  }
}
@media only screen and (min-width: 1200px) {
  .db-hero-09__wrap {
    padding-top: 0;
    height: 100vh;
  }
}

.db-hero-09__headline,
.db-hero-09__objects {
  position: relative;
  padding: 0 3rem;
}
@media only screen and (min-width: 768px) {
  .db-hero-09__headline,
  .db-hero-09__objects {
    padding: 0 6rem;
  }
}
@media only screen and (min-width: 1600px) {
  .db-hero-09__headline,
  .db-hero-09__objects {
    padding: 0 9rem;
  }
}

.db-hero-09__headline {
  position: relative;
}
@media only screen and (min-width: 1200px) {
  .db-hero-09__headline {
    position: absolute;
    bottom: 4rem;
    left: 0;
    width: 100%;
    z-index: 2;
  }
}

.hero-09-headline__caption {
  margin-bottom: 3.6rem;
}
.hero-09-headline__caption p {
  /* Match the standard supporting/body paragraph (same as .db-section-title__
     subhead and .db-sector__text): muted body colour (--t-medium), regular
     weight, body font + size — instead of the bold near-black accent it was. */
  font: normal var(--fw-regular) var(--fs-body)/1.5 var(--_font-default);
  color: var(--t-medium);
}
@media only screen and (min-width: 768px) {
  .hero-09-headline__caption {
    max-width: 500px;
    margin-bottom: 5.4rem;
  }
  .hero-09-headline__caption p {
    font-size: var(--fs-body);
  }
}
@media only screen and (min-width: 1200px) {
  .hero-09-headline__caption {
    max-width: 440px;
  }
}

.hero-09-headline__title {
  position: relative;
  overflow: hidden;
  color: var(--t-bright);
}
.hero-09-headline__title svg {
  fill: currentColor;
}

.hero-09-svg-mobile {
  display: block;
}
@media only screen and (min-width: 1200px) {
  .hero-09-svg-mobile {
    display: none;
  }
}

.hero-09-svg-desktop {
  display: none;
}
@media only screen and (min-width: 1200px) {
  .hero-09-svg-desktop {
    display: block;
  }
}

.hero-09-headline__hidden {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
}

.hero-09-headline__tags {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
     -moz-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
  margin-top: 6rem;
  max-width: 800px;
}
@media only screen and (min-width: 1600px) {
  .hero-09-headline__tags {
    max-width: 1000px;
  }
}

.db-hero-09__objects {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .db-hero-09__objects {
    gap: 0;
    max-width: 550px;
    margin: 6rem auto 0;
    padding: 0;
  }
}
@media only screen and (min-width: 1200px) {
  .db-hero-09__objects {
    position: absolute;
    right: 14%;
    top: 11.8rem;
    margin: 0;
    z-index: 1;
  }
}

.hero-09-objects__image {
  position: relative;
  max-width: 325px;
  margin: 6rem auto 0;
  padding-bottom: 4.5rem;
}
@media only screen and (min-width: 768px) {
  .hero-09-objects__image {
    max-width: none;
    margin: 0;
    padding-bottom: 0;
  }
}

.hero-09-objects__item {
  position: relative;
  padding: 1.8rem 2rem;
  -moz-border-radius: var(--_radius-pt-m);
       border-radius: var(--_radius-pt-m);
  background-color: var(--base-tint);
}
@media only screen and (min-width: 768px) {
  .hero-09-objects__item {
    position: absolute;
    background-color: var(--neutral-transparent);
    border: 1px solid var(--neutral-transparent);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    -webkit-box-shadow: 0px 4px 8px 0px rgba(var(--pt-purple-rgb), 0.3);
       -moz-box-shadow: 0px 4px 8px 0px rgba(var(--pt-purple-rgb), 0.3);
            box-shadow: 0px 4px 8px 0px rgba(var(--pt-purple-rgb), 0.3);
  }
  .hero-09-objects__item.item-01 {
    top: 7rem;
    right: -9rem;
  }
  .hero-09-objects__item.item-02 {
    left: -14rem;
    top: 18rem;
  }
  .hero-09-objects__item.item-03 {
    right: -8rem;
    top: 24rem;
  }
}
@media only screen and (min-width: 1600px) {
  .hero-09-objects__item.item-01 {
    top: 8rem;
    right: -9rem;
  }
  .hero-09-objects__item.item-02 {
    left: -14rem;
    top: 29rem;
  }
  .hero-09-objects__item.item-03 {
    right: -8rem;
    top: 27rem;
  }
}

.db-hero-09__more {
  display: none;
}
@media only screen and (min-width: 1200px) {
  .db-hero-09__more {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 4rem 6rem;
    z-index: 3;
  }
}
@media only screen and (min-width: 1600px) {
  .db-hero-09__more {
    padding: 4rem 9rem;
  }
}

/* ── Responsive fit ───────────────────────────────────────────────────────
   The desktop layout anchors the headline to the bottom of a 100vh hero and
   floats the image top-right. With the full-size title/caption the headline
   block grew tall enough to collide with the fixed header (and the image ran
   past the fold) on laptop-height viewports. Scale the title, caption, tags
   and image down and compact the vertical rhythm so the hero fits within the
   viewport at every width/height. */
@media only screen and (min-width: 1200px) {
  /* One smooth scale that continues from the < 1200 --fs-h1 (which tops out at
     8rem near 1200) and keeps growing — so the hero title stays the largest
     heading on the page, comfortably above the section headings, with no jump
     at 1200. The min(…, 14vh) caps it by viewport height so it still fits above
     the fixed header on genuinely short screens (only engages below ~640px
     tall), instead of the old rule that shrank it to ~40px on every laptop. */
  .hero-09-headline__title h1 {
    font-size: min(clamp(7rem, 6.67vw, 9.6rem), 14vh);
    line-height: 1.05;
  }
  .hero-09-headline__caption {
    max-width: 440px;
    margin-bottom: 2.6rem;
  }
  .hero-09-headline__caption p {
    font-size: var(--fs-body);
  }
  .hero-09-headline__tags {
    margin-top: 2.4rem;
  }
  .hero-09-objects__image img {
    max-height: 68vh;
    width: auto;
  }
}
/* Shorter viewports (typical laptops): shrink further and lift the image so
   nothing overlaps the header. Keyed on height so it also helps wide-but-short
   windows. */
@media only screen and (min-width: 1200px) and (max-height: 820px) {
  /* Title size is handled by the min(…, 14vh) cap above; here we only compact
     the surrounding rhythm and lift the image so nothing collides. */
  .hero-09-headline__caption {
    margin-bottom: 1.8rem;
  }
  .hero-09-headline__caption p {
    font-size: 1.9rem;
  }
  .hero-09-headline__tags {
    margin-top: 1.6rem;
  }
  .hero-09-objects__image img {
    max-height: 58vh;
  }
  .db-hero-09__objects {
    top: 9rem;
  }
}

/* ------------------------------------------------*/
/* Block - Hero Section #09 End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/