/* MotionSites Hero prompt, native CSS/JS adaptation. Only the formal About. */
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 300; font-display: swap; src: url('./assets/fonts/kanit-light-latin.woff2') format('woff2'); }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 500; font-display: swap; src: url('./assets/fonts/kanit-medium-latin.woff2') format('woff2'); }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 900; font-display: swap; src: url('./assets/fonts/kanit-black-latin.woff2') format('woff2'); }
html:has(body.about-page), body.about-page { background: #0c0c0c; }
body.about-page::before, .about-page > .site-footer { display: none; }
.about-page main { margin-top: calc(-1 * var(--header-band, 98px)); background: #0c0c0c; }
.about-hero {
  position: relative; isolation: isolate; min-height: 100svh; overflow-x: clip;
  display: flex; flex-direction: column;
  padding: calc(var(--header-band, 98px) + 18px) clamp(20px, 2.5vw, 40px) clamp(28px, 4vh, 40px);
  font-family: 'Kanit', 'PingFang SC', sans-serif; color: #d7e2ea; background: #0c0c0c;
}
.about-hero-heading {
  position: relative; z-index: 1; margin: 0; width: 100%;
  font-size: clamp(24px, 13.8vw, 320px); font-weight: 900; line-height: 1;
  letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; text-align: center;
  background: linear-gradient(180deg, #646973 0%, #bbccd7 100%);
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.about-hero-portrait {
  --about-rocket-height: min(calc(100svh - var(--header-band, 98px) - 48px), 1100px);
  position: absolute; z-index: 2; left: 50%; top: calc(var(--header-band, 98px) + 12px);
  transform: translateX(-50%);
  height: var(--about-rocket-height); width: calc(var(--about-rocket-height) * 2 / 3);
  /* Retain the supplied transparent canvas and every flame tip. The centered
     exhibit leaves the existing lower-left copy and lower-right CTA untouched. */
  pointer-events: none;
}
.about-hero-portrait > [data-about-fade] { height: 100%; }
.about-hero-rocket { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.about-hero-bottom { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: auto; padding-top: min(30svh, 400px); }
.about-hero-intro { max-width: 310px; margin: 0; font-size: clamp(.75rem, 1.4vw, 1.5rem); font-weight: 300; text-transform: uppercase; letter-spacing: .025em; line-height: 1.4; text-wrap: pretty; }
.about-hero-contact {
  display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0;
  min-height: 52px; padding: 16px 48px; border: 0; border-radius: 999px;
  background: linear-gradient(123deg, #18011f 7%, #b600a8 37%, #7621b0 72%, #be4c00 100%);
  box-shadow: 0 4px 4px rgba(181,1,167,.25), 4px 4px 12px #7721b1 inset;
  outline: 2px solid #fff; outline-offset: -3px; color: #fff;
  font: 500 1rem/1.4 'Kanit', 'PingFang SC', sans-serif; letter-spacing: .1em;
  text-transform: uppercase; cursor: pointer; transition: filter .2s ease, scale .2s ease;
}
.about-hero-contact:hover { filter: brightness(1.12); }
.about-hero-contact:active { scale: .97; }
.about-hero-contact:focus-visible { outline-offset: 4px; }
@media (min-width: 640px) and (max-height: 700px) {
  .about-hero-bottom { padding-top: 30vh; }
}
@media (max-width: 767px) {
  .about-hero-portrait { --about-rocket-height: min(calc(100svh - var(--header-band, 98px) - 150px), 110vw); }
  .about-hero-intro { max-width: 220px; }
  .about-hero-contact { padding: 14px 30px; font-size: .875rem; }
}
@media (max-width: 639px) {
  .about-hero-portrait { --about-rocket-height: min(calc(100svh - var(--header-band, 98px) - 180px), 140vw); }
  .about-hero-bottom { gap: 18px; padding-top: 54vh; align-items: flex-end; }
  .about-hero-intro { max-width: 190px; flex: 1; }
  .about-hero-contact { padding: 13px 22px; font-size: .75rem; min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-hero-contact { transition: none; }
}
/* Source FadeIn sequence. One owner; route/scroll SplitText is opted out in HTML. */
@keyframes about-hero-fade { from { opacity: 0; transform: translateY(var(--about-fade-y, 30px)); } to { opacity: 1; transform: translateY(0); } }
.about-hero [data-about-fade] { animation: about-hero-fade .7s cubic-bezier(.25,.1,.25,1) both; }
/* Hold the original FadeIn at its first frame while this Hero's fonts load.
   The head bootstrap covers direct loads; the root state covers route entries.
   With JavaScript unavailable, the authored CSS entrance remains accessible. */
html.about-hero-pending .about-hero [data-about-fade],
.about-hero[data-about-hero-state="pending"] [data-about-fade] { animation-play-state: paused; }
.about-hero [data-about-fade="heading"] { --about-fade-y: 40px; animation-delay: .15s; }
.about-hero [data-about-fade="intro"] { --about-fade-y: 20px; animation-delay: .35s; }
.about-hero [data-about-fade="contact"] { --about-fade-y: 20px; animation-delay: .5s; }
.about-hero [data-about-fade="rocket"] { --about-fade-y: 30px; animation-delay: .6s; }
@media (prefers-reduced-motion: reduce) { .about-hero [data-about-fade] { animation: none; } }