/* REUSABLE PAGE HERO */
.sta-page-hero{
  position:relative;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:-104px;
  margin-bottom:34px;
  min-height:375px;
  border-radius:0 0 42px 42px;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:flex-start;
  color:#fff;
  box-sizing:border-box;
  background:
    linear-gradient(135deg, #4d8440 0%, #3d7031 40%, #1f2a20 100%);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

.sta-page-hero,
.sta-page-hero *,
.sta-page-hero *::before,
.sta-page-hero *::after{
  box-sizing:border-box;
}

.sta-page-hero:not(.sta-page-hero--no-image){
  background:
    linear-gradient(to bottom, rgba(0,0,0,.16), rgba(0,0,0,.16)),
    var(--sta-page-hero-image),
    linear-gradient(135deg, #4d8440 0%, #3d7031 40%, #1f2a20 100%);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

.sta-page-hero--light-overlay:not(.sta-page-hero--no-image){
  background:
    linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.10)),
    var(--sta-page-hero-image),
    linear-gradient(135deg, #4d8440 0%, #3d7031 40%, #1f2a20 100%);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

.sta-page-hero__inner{
  position:relative;
  z-index:2;
  width:min(calc(100% - 40px), 1240px);
  margin:0 auto;
  padding:
    clamp(90px, 8vw, 108px)
    0
    clamp(22px, 3vw, 34px);
}

.sta-page-hero__content{
  width:100%;
}

.sta-page-hero__eyebrow{
  display:inline-block;
  margin:0 0 12px;
  color:rgba(255,255,255,.92);
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
}

.sta-page-hero__title{
  margin:0 0 14px;
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.20);
  max-width:100%;
  font-size:clamp(38px, 4vw, 66px);
  line-height:1.08;
  letter-spacing:-0.02em;
  overflow-wrap:anywhere;
  word-break:break-word;
}

html[lang="zh-TW"] .sta-page-hero__title{
  line-height:1.16;
}

.sta-page-hero__line{
  width:260px;
  max-width:38vw;
  height:2px;
  margin:0 0 20px;
  border-radius:999px;
  background:#84997D;
  box-shadow:0 2px 12px rgba(0,0,0,.12);
}

.sta-page-hero__intro{
  display:block;
  width:100%;
  max-width:none;
  box-sizing:border-box;
  margin:0;
  padding:16px 20px 18px;
  border-radius:14px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:saturate(120%) blur(2px);
  -webkit-backdrop-filter:saturate(120%) blur(2px);
  box-shadow:0 12px 32px rgba(0,0,0,.10);
  color:#F5F3EE;
  font-size:clamp(16px, 1.5vw, 20px);
  line-height:1.75;
  text-align:left;
  text-shadow:none;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.sta-page-hero__intro,
.sta-page-hero__intro p,
.sta-page-hero__intro li,
.sta-page-hero__intro span{
  color:#F5F3EE !important;
}

.sta-page-hero__intro p{
  margin:0 0 25px 0;
}

.sta-page-hero__intro p:last-child{
  margin-bottom:0;
}

.sta-page-hero__intro strong{
  color:#FFFFFF !important;
  font-weight:700;
}
@media (max-width:1024px){
  .sta-page-hero{
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-right:0;
    min-height:clamp(230px, 34vw, 320px);
    margin-top:-92px;
    margin-bottom:30px;
    border-radius:0 0 34px 34px;
  }

  .sta-page-hero__inner{
    width:min(calc(100% - 32px), 1240px);
    padding:clamp(82px, 8vw, 98px) 0 clamp(20px, 3vw, 28px);
  }

  .sta-page-hero__title{
    font-size:clamp(34px, 5vw, 54px);
    line-height:1.08;
    overflow-wrap:break-word;
    word-break:normal;
  }

  .sta-page-hero__intro{
    max-width:100%;
    overflow-wrap:break-word;
    word-break:normal;
  }
}

@media (max-width:600px){
  .sta-page-hero{
    width:calc(100svw - 24px);
    max-width:calc(100svw - 24px);
    margin-left:auto;
    margin-right:auto;
    margin-top:-64px;
    margin-bottom:22px;
    min-height:auto;
    border-radius:0 0 22px 22px;
    overflow:clip;
  }

  .sta-page-hero__inner{
    width:100%;
    max-width:100%;
    padding:72px 14px 18px;
  }

  .sta-page-hero__content{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .sta-page-hero__eyebrow{
    max-width:100%;
    font-size:11px;
    line-height:1.35;
    letter-spacing:.12em;
    white-space:normal;
    overflow-wrap:break-word;
  }

  .sta-page-hero__title{
    max-width:100%;
    margin-bottom:12px;
    font-size:clamp(28px, 8.2vw, 36px);
    line-height:1.12;
    letter-spacing:-.015em;
    text-wrap:balance;
    overflow-wrap:break-word;
    word-break:normal;
  }

  .sta-page-hero__line{
    width:120px;
    max-width:40vw;
    margin-bottom:14px;
  }

  .sta-page-hero__intro{
    width:100%;
    max-width:100%;
    padding:13px 14px 15px;
    border-radius:14px;
    font-size:15px;
    line-height:1.62;
    overflow-wrap:break-word;
    word-break:normal;
  }

  .sta-page-hero__intro code,
  .sta-page-hero__intro a{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
}