/* Isolated handcraft-video concept. All other sections retain their approved styles. */
#hero.hero {
  isolation: isolate;
  min-height: 760px;
  min-height: min(920px, 100svh);
  align-items: flex-end;
  padding: 180px max(36px, calc((100vw - 1280px) / 2)) 84px;
  background: #292622;
}
#hero::before, #hero::after { content: none; }
#hero .hero-media, #hero .hero-shade { position: absolute; inset: 0; pointer-events: none; }
#hero .hero-media { z-index: -3; }
#hero .hero-media picture { display: block; width: 100%; height: 100%; }
#hero .hero-media img, #hero .hero-media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
#hero .hero-media video { opacity: 0; transition: opacity .35s ease; }
#hero.is-video-ready .hero-media video { opacity: 1; }
#hero .hero-shade {
  z-index: -2;
  background: linear-gradient(90deg, rgba(13,17,18,.66) 0%, rgba(13,17,18,.3) 34%, transparent 64%),
    linear-gradient(0deg, rgba(13,17,18,.22) 0%, transparent 48%);
}
#hero .hero-copy { width: 100%; max-width: 800px; opacity: 1; transform: none; text-align: left; }
#hero .hero-copy > * { animation: none; opacity: 1; transform: none; }
#hero h1 {
  max-width: none; margin: 0; font-family: "Inter", Arial, sans-serif;
  font-size: clamp(48px, 5.45vw, 84px); line-height: 1.04;
  font-weight: 600; letter-spacing: -.055em; color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.16);
}
#hero h1 span, #hero h1 span:last-child { color: #fff; white-space: normal; }
html[lang^="zh"] #hero h1 { font-family: "Noto Sans SC", sans-serif; letter-spacing: .015em; line-height: 1.2; }
#hero .hero-copy > p { margin-top: 24px; max-width: 100%; font-size: 19px; line-height: 1.5; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
#hero .hero-actions { margin-top: 30px; gap: 12px; }
#hero .hero-actions .button { min-width: 150px; min-height: 50px; border-radius: 6px; font-size: 14px; box-shadow: none; }
#hero .hero-actions .button-outline { color: #fff; border-color: rgba(255,255,255,.8); background: rgba(0,0,0,.18); }
#hero .hero-actions .button-outline:hover { background: rgba(0,0,0,.4); }
#hero .hero-video-toggle {
  position: absolute; right: max(36px, calc((100vw - 1280px) / 2)); bottom: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55); background: rgba(16,20,22,.5);
  color: #fff; font: 500 12px/1.2 "Inter", "Noto Sans SC", sans-serif; cursor: pointer;
}
#hero .hero-video-toggle > span {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
#hero .hero-video-toggle:hover { background: rgba(16,20,22,.72); }
#hero .hero-video-toggle[hidden] { display: none; }
#hero .hero-video-toggle .video-icon-pause { display: none; }
#hero .hero-video-toggle[data-playing="true"] .video-icon-pause { display: block; }
#hero .hero-video-toggle[data-playing="true"] .video-icon-play { display: none; }
#hero .hero-video-toggle:focus-visible { outline: 3px solid #ffcb27; outline-offset: 4px; }
/* Desktop refinement only; the approved mobile and tablet composition is unchanged. */
@media(min-width: 1021px) {
  #hero.hero { min-height: min(874px, 95svh); }
  #hero h1 { font-size: clamp(64px, 6.5vw, 100px); line-height: 1.04; }
  #hero .hero-copy > p { margin-top: 26px; font-size: clamp(20px, 1.55vw, 22px); }
  #hero .hero-actions { margin-top: 32px; gap: 14px; }
  #hero .hero-actions .button { min-width: 166px; min-height: 56px; padding: 14px 24px; font-size: 16px; }
}
@media(max-width: 1020px) and (min-width: 761px) {
  #hero.hero { min-height: 720px; min-height: max(700px, 90svh); padding-inline: 38px; }
  #hero h1 { font-size: 64px; }
}
@media(max-width: 760px) {
  #hero.hero {
    min-height: 540px; min-height: clamp(520px, 68svh, 600px);
    align-items: flex-start;
    padding: 110px 22px 76px;
  }
  #hero .hero-media img, #hero .hero-media video { object-position: 49% center; }
  #hero .hero-shade {
    background: linear-gradient(180deg, rgba(10,15,16,.2) 0%, rgba(10,15,16,.64) 16%, rgba(10,15,16,.55) 34%, rgba(10,15,16,.12) 57%, transparent 72%),
      linear-gradient(0deg, rgba(10,15,16,.24) 0%, transparent 18%);
  }
  #hero h1 { font-size: clamp(32px, 9.6vw, 48px); line-height: 1.08; letter-spacing: -.04em; }
  html[lang^="zh"] #hero h1 { font-size: clamp(32px, 9.6vw, 46px); }
  #hero .hero-copy > p { margin-top: 16px; font-size: 14px; }
  #hero .hero-actions { margin-top: 22px; flex-direction: row; flex-wrap: wrap; gap: 10px; }
  #hero .hero-actions .button { flex: 0 1 auto; min-width: 0; min-height: 46px; width: auto; padding: 11px 14px; font-size: 13px; }
  #hero .hero-video-toggle { right: 18px; bottom: 18px; }
}
@media(prefers-reduced-motion: reduce) { #hero .hero-media video { transition: none; } }