/* A Chinese-first statement with an editorial English signature. */
.hero h1 {
  /* Keep the statement in the upper visual third, clear of the product focal point. */
  top: calc(50% - clamp(7rem, 9vw, 9rem));
  width: min(92vw, 1280px) !important;
  white-space: normal !important;
  color: #f8f9f2;
  font-family: var(--font-ui);
  font-size: inherit;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}

.hero h1 .hero-title-cn,
.hero h1 .hero-title-en { display: block; font-style: normal; }

.hero h1 .hero-title-cn {
  font-size: clamp(3.8rem, 7.6vw, 9.4rem);
  font-weight: 500;
  letter-spacing: -.085em;
  text-shadow: 0 2px 24px rgba(18, 28, 23, .58);
}

.hero h1 .hero-title-en {
  margin-top: .42em;
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.55vw, 1.75rem);
  font-weight: 500;
  letter-spacing: .26em;
  text-shadow: 0 1px 14px rgba(18, 28, 23, .58);
}

.hero-service {
  position: absolute;
  z-index: 1;
  top: calc(50% + clamp(6.2rem, 10vw, 10.7rem));
  left: 50%;
  width: min(90vw, 980px);
  margin: 0;
  transform: translateX(-50%);
  color: rgba(248, 249, 242, .92);
  font: 500 clamp(.55rem, .66vw, .78rem) var(--font-mono);
  letter-spacing: .2em;
  text-align: center;
  text-shadow: 0 1px 12px rgba(18, 28, 23, .55);
}

.hero-actions { top: calc(50% + clamp(8.3rem, 12.4vw, 13rem)); }

/* The consultation trigger reveals the actual copy actions instead of navigating away. */
.hero-contact-menu { position: relative; }
.hero-contact-menu::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -1rem;
  right: -4.4rem;
  bottom: -4.4rem;
  left: -.6rem;
}
.hero-contact-trigger { position: relative; z-index: 1; cursor: default; }
.hero-contact-options {
  position: absolute;
  top: 50%;
  left: calc(100% + .6rem);
  display: grid;
  gap: .48rem;
  width: 2.9rem;
  opacity: 0;
  pointer-events: none;
  transform: translate(-.55rem, -50%) scale(.88);
  transform-origin: left center;
  z-index: 1;
  transition: opacity .26s ease .34s, transform .36s cubic-bezier(.22, .8, .24, 1) .34s;
}
.hero-contact-menu:hover .hero-contact-options,
.hero-contact-menu:focus-within .hero-contact-options {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, -50%) scale(1);
  transition-delay: 0s;
}
.hero-contact-option {
  display: grid;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(244, 243, 238, .2);
  border-radius: 50%;
  background: #161616;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
  cursor: pointer;
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}
.hero-contact-option img { width: 1.16rem; height: 1.16rem; filter: brightness(0) invert(1); }
.hero-contact-option:hover,
.hero-contact-option:focus-visible { transform: scale(1.09); border-color: rgba(244, 243, 238, .72); background: #252525; outline: none; }
.copy-toast {
  position: fixed;
  z-index: 30;
  display: grid;
  width: min(8rem, calc(100vw - 2rem));
  min-height: 5rem;
  padding: 1.1rem 1.15rem 1.45rem;
  place-items: center;
  color: #151515;
  font: 400 clamp(.58rem, .58vw, .7rem)/1.32 var(--font-ui);
  letter-spacing: .025em;
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: none;
  animation: copy-toast-life 2s cubic-bezier(.22, .8, .24, 1) forwards;
}
.copy-toast::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -12% -10%;
  background: url("assets/brand/copy-toast-cloud.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .18));
  transform: scaleX(var(--toast-flip, 1));
}
.copy-toast > span { position: relative; z-index: 1; display: block; max-width: 100%; transform: translateY(-.38rem); }
@keyframes copy-toast-life {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + .6rem)) scale(.92); }
  14%, 68% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - .45rem)) scale(.97); }
}

/* Custom title artwork keeps its original full silhouette — no clipping frame. */
.hero h1.hero-art-title {
  width: min(96vw, 1500px) !important;
  height: auto;
  overflow: visible;
  font-size: 0;
  text-shadow: none;
}
.hero-title-art {
  position: relative;
  display: none;
  width: 100%;
  max-width: none;
  height: auto;
  transform: none;
  filter: drop-shadow(0 3px 20px rgba(8, 14, 12, .48));
}
html[lang="zh-Hant"] .hero-title-art--zh,
html[lang="zh-CN"] .hero-title-art--zh,
html[lang="en"] .hero-title-art--en { display: block; }
.hero-title-tagline {
  position: absolute;
  z-index: 1;
  top: calc(50% + clamp(2.4rem, 4.2vw, 5rem));
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  color: rgba(248, 249, 242, .92);
  font: 500 clamp(.65rem, .82vw, .98rem) var(--font-mono);
  letter-spacing: .28em;
  text-shadow: 0 1px 14px rgba(18, 28, 23, .58);
  white-space: nowrap;
}
html[lang="zh-Hant"] .hero-title-tagline,
html[lang="zh-CN"] .hero-title-tagline {
  top: calc(50% - clamp(1.55rem, 2.1vw, 2.1rem));
  font-family: var(--font-ui);
  font-size: clamp(.775rem, 1.275vw, 1.5rem);
  font-weight: 100;
  letter-spacing: 2.16em;
}

@media (max-width: 700px) {
  .hero h1 {
    top: calc(50% - 5.1rem);
    width: 94vw !important;
  }
  .hero h1 .hero-title-cn { font-size: clamp(2.7rem, 12.6vw, 4.8rem); line-height: 1.08; }
  .hero h1 .hero-title-en { margin-top: .7em; font-size: .78rem; letter-spacing: .15em; }
  .hero-service { top: calc(50% + 7.8rem); font-size: .48rem; letter-spacing: .1em; }
  .hero-actions { top: calc(50% + 10.2rem); }
  .hero-contact-options { left: calc(100% + .38rem); width: 2.55rem; gap: .38rem; }
  .hero-contact-option { width: 2.55rem; height: 2.55rem; }
  .hero-contact-option img { width: 1.02rem; height: 1.02rem; }
  .hero h1.hero-art-title { width: 98vw !important; }
  .hero-title-tagline { top: calc(50% + 3.7rem); font-size: .58rem; letter-spacing: .18em; }
  html[lang="zh-Hant"] .hero-title-tagline,
  html[lang="zh-CN"] .hero-title-tagline { top: calc(50% - .3rem); font-family: var(--font-ui); font-size: .43rem; font-weight: 100; letter-spacing: 1.32em; }
  .copy-toast { width: min(7.4rem, calc(100vw - 1.5rem)); min-height: 4.6rem; padding: 1rem 1rem 1.3rem; font-size: .58rem; }
}