.puainta-about-hero {
  --about-bg: rgb(var(--color-background));
  --about-orange: rgb(var(--color-button-background));
  --about-orange-text: rgb(var(--color-button-text));
  --about-white: white;
  --about-muted: rgb(var(--color-light-text));
  --about-line: rgb(var(--color-entry-line));
  color: var(--about-white);
  background: var(--about-bg);
  overflow: hidden;
}

.puainta-about-hero *,
.puainta-about-hero *::before,
.puainta-about-hero *::after { box-sizing: border-box; }

.puainta-about-hero__frame {
  position: relative;
  width: 100%;
  min-height: min(var(--about-hero-height, 860px), 100svh);
  height: var(--about-hero-height, 860px);
  max-height: 980px;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  background: color-mix(in srgb, var(--about-orange) 10%, var(--about-bg));
  border-radius: 0;
}

.puainta-about-hero__media,
.puainta-about-hero__shade,
.puainta-about-hero__image,
.puainta-about-hero__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.puainta-about-hero__media { z-index: -2; }
.puainta-about-hero__image,
.puainta-about-hero__media > img {
  display: block;
  object-fit: cover;
  object-position: center 48%;
}

.puainta-about-hero__shade {
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(62 40 30 / 74%) 0%, rgb(82 48 34 / 48%) 32%, rgb(89 57 40 / 12%) 60%, transparent 100%),
    linear-gradient(180deg, rgb(24 22 20 / 10%) 0%, transparent 44%, rgb(238 106 50 / 18%) 100%);
}

.puainta-about-hero__layout {
  display: grid;
  grid-template-rows: 1fr auto;
  width: min(var(--about-content-width, 1180px), calc(100% - 96px));
  min-height: inherit;
  margin-inline: auto;
  padding: 44px 0;
}

.puainta-about-hero__content {
  align-self: center;
  width: min(760px, 65%);
  padding: 72px 0 32px;
}
.puainta-about-hero--center .puainta-about-hero__content { width: min(820px, 76%); margin-inline: auto; text-align: center; }
.puainta-about-hero--center .puainta-about-hero__eyebrow,
.puainta-about-hero--center .puainta-about-hero__actions { justify-content: center; }
.puainta-about-hero--center h1,
.puainta-about-hero--center .puainta-about-hero__tagline,
.puainta-about-hero--center .puainta-about-hero__body { margin-inline: auto; }

.puainta-about-hero__eyebrow {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 0 0 34px;
  color: color-mix(in srgb, var(--about-white) 92%, transparent);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .15em;
}

.puainta-about-hero__eyebrow span { width: 40px; height: 1px; background: color-mix(in srgb, var(--about-white) 64%, transparent); }

.puainta-about-hero h1 {
  max-width: 11em;
  margin: 0;
  color: var(--about-white);
  font-size: clamp(50px, 5vw, 82px);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-weight: 800;
  line-height: 1.23;
  letter-spacing: -.035em;
  white-space: pre-line;
  text-wrap: balance;
  text-shadow: 0 3px 24px rgb(0 0 0 / 18%);
}

.puainta-about-hero__tagline {
  max-width: 36em;
  margin: 28px 0 0;
  color: var(--about-white);
  font-size: clamp(18px, 1.45vw, 23px);
  font-weight: 650;
  line-height: 1.65;
  white-space: pre-line;
}

.puainta-about-hero__body {
  max-width: 41em;
  margin: 36px 0 0;
  color: color-mix(in srgb, var(--about-white) 84%, transparent);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 2;
  white-space: pre-line;
  text-shadow: 0 2px 12px rgb(0 0 0 / 20%);
}

.puainta-about-hero__actions { display: flex; flex-wrap: wrap; gap: 34px; align-items: center; margin-top: 46px; }
.puainta-about-hero__button {
  display: inline-flex;
  min-height: 50px;
  padding: 12px 22px;
  gap: 18px;
  align-items: center;
  justify-content: center;
  color: var(--about-white);
  border: 1px solid color-mix(in srgb, var(--about-white) 58%, transparent);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease;
}
.puainta-about-hero__button:hover { color: var(--about-white); transform: translateY(-1px); }
.puainta-about-hero__button--primary { color: var(--about-orange-text); background: var(--about-orange); border-color: var(--about-orange); }
.puainta-about-hero__button--primary:hover { color: var(--about-orange-text); background: color-mix(in srgb, var(--about-orange) 84%, black); border-color: color-mix(in srgb, var(--about-orange) 84%, black); }
.puainta-about-hero__button--secondary { background: rgb(33 28 25 / 16%); backdrop-filter: blur(7px); }
.puainta-about-hero__button--secondary:hover { background: rgb(255 255 255 / 14%); }

.puainta-about-hero__note {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 13px;
  color: color-mix(in srgb, var(--about-white) 88%, transparent);
  background: color-mix(in srgb, var(--about-white) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--about-white) 30%, transparent);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  backdrop-filter: blur(6px);
}
.puainta-about-hero__note::before { margin-right: 7px; font-size: 13px; letter-spacing: 0; content: "♡"; }
.puainta-about-hero__index { display: flex; align-items: center; justify-self: end; gap: 12px; color: var(--about-white); font-size: 9px; letter-spacing: .08em; }
.puainta-about-hero__index i { display: block; width: 92px; height: 1px; background: color-mix(in srgb, var(--about-white) 40%, transparent); }

@media (max-width: 1023px) {
  .puainta-about-hero__frame { width: 100%; min-height: 690px; height: 82svh; margin: 0; border-radius: 0; }
  .puainta-about-hero__layout { width: calc(100% - 48px); padding-block: 30px; }
  .puainta-about-hero__content { width: min(680px, 76%); padding-left: 0; }
  .puainta-about-hero__index { display: none; }
}

@media (max-width: 599px) {
  .puainta-about-hero__frame { width: 100%; min-height: var(--about-mobile-hero-height, 600px); height: var(--about-mobile-hero-height, 600px); max-height: 760px; margin: 0; border-radius: 0; }
  .puainta-about-hero__layout { width: calc(100% - 40px); padding-block: 22px; }
  .puainta-about-hero__image,
  .puainta-about-hero__media > img { object-position: center; }
  .puainta-about-hero__shade {
    background:
      linear-gradient(180deg, rgb(39 28 23 / 8%) 0%, rgb(45 30 24 / 12%) 34%, rgb(71 42 30 / 62%) 67%, rgb(52 31 24 / 91%) 100%),
      linear-gradient(90deg, rgb(238 106 50 / 14%), transparent 82%);
  }
  .puainta-about-hero__content { align-self: end; width: 100%; padding: 155px 0 8px; }
  .puainta-about-hero--center .puainta-about-hero__content { width: 100%; }
  .puainta-about-hero__eyebrow { margin-bottom: 14px; font-size: 10px; }
  .puainta-about-hero__eyebrow span { width: 28px; }
  .puainta-about-hero h1 { max-width: 9.8em; font-size: clamp(34px, 9.6vw, 43px); line-height: 1.2; letter-spacing: -.035em; }
  .puainta-about-hero__tagline { margin-top: 19px; font-size: 17px; line-height: 1.7; }
  .puainta-about-hero__body { margin-top: 16px; font-size: 14px; line-height: 1.75; }
  .puainta-about-hero__actions { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
  .puainta-about-hero__button { width: auto; min-width: 168px; min-height: 46px; }
  .puainta-about-hero__note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .puainta-about-hero__button,
  .puainta-about-hero__button { transition: none; }
}