@charset "utf-8";

/* Shared layout and typography for content, board, directory, and consultation heroes. */
.wons-page-hero.wons-page-hero {
  position: relative;
  display: grid;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--wons-hero-min-height, clamp(460px, 66vh, 720px));
  align-items: end;
  overflow: hidden;
  padding-block: var(--wons-page-hero-padding-start, clamp(52px, 6vw, 84px)) var(--wons-page-hero-padding-end, clamp(36px, 4vw, 56px));
  color: #fff;
}

/* Gnuboard's legacy .is-visible rule forces display:block!important. */
.wons-page-hero.wons-page-hero.is-visible {
  display: grid !important;
}

.wons-page-hero__inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(100%, calc(var(--wons-page-hero-content-max, 1200px) + var(--wons-page-hero-gutter, 40px) * 2));
  margin-inline: auto;
  padding-inline: var(--wons-page-hero-gutter, 40px);
}

.wons-page-hero__content {
  display: flex;
  min-height: var(--wons-page-hero-copy-min-height, 206px);
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.wons-page-hero .wons-page-hero__eyebrow {
  margin: 0 0 var(--wons-page-hero-eyebrow-gap, 12px);
  color: var(--we-color-accent, #c6a24a);
  font-size: var(--wons-page-hero-eyebrow-size, 12px);
  font-weight: 800;
  letter-spacing: var(--wons-page-hero-eyebrow-spacing, .16em);
}

.wons-page-hero__title {
  max-width: 820px;
  margin: 0;
  color: #fff;
  font-size: var(--wons-page-hero-title-size, clamp(48px, 7vw, 88px));
  line-height: var(--wons-page-hero-title-line-height, 1.04);
  letter-spacing: var(--wons-page-hero-title-spacing, -.055em);
  word-break: keep-all;
}

.wons-page-hero__description {
  max-width: 720px;
  margin: var(--wons-page-hero-description-gap, 20px) 0 0;
  color: rgba(255, 255, 255, .8);
  font-size: var(--wons-page-hero-description-size, clamp(16px, 1.6vw, 20px));
  line-height: var(--wons-page-hero-description-line-height, 1.7);
  word-break: keep-all;
}

/* Keep large heading glyphs inside the text-reveal mask. */
.we-contentPage.has-content-text-motion .wons-page-hero__title[data-content-text-motion] {
  clip-path: inset(-.12em -.06em 16% -.06em);
}

.we-contentPage.has-content-text-motion .wons-page-hero__title[data-content-text-motion].is-content-text-visible {
  clip-path: inset(-.12em -.06em -.12em -.06em);
}

@media (max-width: 767px) {
  .wons-page-hero.wons-page-hero {
    min-height: var(--wons-hero-mobile-min-height, 460px);
  }
}