@font-face {
  font-family: "GT Walsheim Pro";
  src: url("assets/fonts/GTWalsheimPro-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* The supplied font is native Bold, not Black. A filled, same-color
   stroke adds the visual weight requested in the Canva reference. */
.hero h1,
.section-heading h2,
.about-heading h2,
.contact h2,
.statement-band span {
  font-family: "GT Walsheim Pro", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-synthesis: none;
  letter-spacing: 0.055em;
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0.065em currentColor;
  paint-order: stroke fill;
}

.hero h1,
.section-heading h2,
.about-heading h2,
.contact h2 {
  line-height: 1.16;
  overflow-wrap: break-word;
}

/* Retire the old hollow-title treatment, retaining the brand colors. */
.work h2 .outline,
.contact h2 .outline {
  color: inherit;
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0.065em currentColor;
}

.hero {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  column-gap: 36px;
}

.hero-copy,
.section-heading > div,
.about-heading {
  min-width: 0;
}

.hero h1 {
  font-size: clamp(2rem, 4.2vw, 4rem);
  margin-bottom: 28px;
}

.hero-title-line {
  display: block;
}

.type-filter-defs {
  position: absolute;
  pointer-events: none;
}

/* Keep real, selectable text; highlight words can wrap as whole units. */
.hero h1 .hero-highlight {
  display: inline-block;
  white-space: nowrap;
  color: var(--pink);
  padding-inline: 0.04em;
  margin-inline: -0.04em;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero h1 .hero-highlight {
    background-image: linear-gradient(105deg, #ff009c 0%, #ff7650 20%, #fff000 39%, #ffb228 49%, #6856ff 72%, #365bff 83%, #a474ff 100%);
    background-color: var(--pink);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0;
    /* Dilation thickens the colored glyphs themselves, without a white rim. */
    filter: url("#nova-gradient-weight");
  }
}

@media (forced-colors: active) {
  .hero h1 .hero-highlight {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: currentColor;
    -webkit-text-stroke: 0;
    filter: none;
  }
}

.hero-intro {
  max-width: 38rem;
  font-size: 1rem;
  line-height: 1.75;
}

.hero .hero-art {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
}

@media (max-width: 760px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .hero h1 {
    font-size: clamp(2rem, 8.8vw, 3.5rem);
    max-width: 38rem;
    text-wrap: balance;
  }

  .hero-title-line {
    display: inline;
  }

  .section-heading h2,
  .about-heading h2 {
    font-size: clamp(1.875rem, 7.2vw, 3rem);
  }

  .contact h2 {
    font-size: clamp(2.125rem, 9.2vw, 4rem);
  }
}