/* HERO_APROPOS (Figma 89:5). This file owns only the Hero and its handoff. */
.about-page .about-hero {
  height: var(--about-stage-height, max(100svh, 68.385vw));
  min-height: 100svh;
  overflow: visible;
  background:
    radial-gradient(circle at 58% 42%, rgba(28, 55, 66, .52), transparent 36%),
    linear-gradient(135deg, var(--black) 0%, #071919 42%, #071b21 100%);
}

.about-hero-stage {
  position: relative;
  width: 100%;
  min-height: max(900px, 100svh, 68.385vw);
  overflow: hidden;
  isolation: isolate;
  color: #faf8f2;
  background:
    radial-gradient(circle at 58% 42%, rgba(28, 55, 66, .52), transparent 36%),
    linear-gradient(135deg, var(--black) 0%, #071919 42%, #071b21 100%);
}

.about-hero-stage::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    radial-gradient(circle at 56% 38%, rgba(31, 63, 72, .34), transparent 38%),
    linear-gradient(180deg, rgba(var(--black-rgb), .56) 0%, rgba(6, 18, 20, .18) 46%, rgba(var(--black-rgb), .64) 100%);
  pointer-events: none;
}

.about-hero-intro {
  position: absolute;
  z-index: 6;
  top: 8.958vw;
  left: 50%;
  width: min(66.354vw, 1274px);
  margin: 0;
  color: #faf8f2;
  font-family: 'PP Eiko', Georgia, serif;
  font-size: min(5vw, 96px);
  font-weight: 500;
  line-height: 1.0208;
  letter-spacing: 0;
  text-align: center;
  opacity: var(--about-copy-opacity, 1);
  transform: translateX(-50%);
  pointer-events: none;
}

.about-hero-intro span {
  display: block;
  white-space: nowrap;
}

.about-hero-subtitle {
  position: absolute;
  z-index: 6;
  top: 20.78vw;
  left: 50%;
  margin: 0;
  color: rgba(250, 248, 242, .70);
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: var(--about-copy-opacity, 1);
  transform: translateX(-50%);
  pointer-events: none;
}

.about-hero-visual {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.about-hero-portrait {
  position: absolute;
  inset: 12.76vw auto auto 50%;
  width: min(45.104vw, 866px);
  aspect-ratio: 1;
  overflow: hidden;
  transform: translateX(-50%);
  background: #010101;
  isolation: isolate;
  -webkit-mask-image: radial-gradient(ellipse 50% 54% at 50% 46%, #000 0 58%, rgba(0, 0, 0, .98) 66%, rgba(0, 0, 0, .9) 72%, rgba(0, 0, 0, .66) 80%, rgba(0, 0, 0, .36) 88%, rgba(0, 0, 0, .12) 94%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 54% at 50% 46%, #000 0 58%, rgba(0, 0, 0, .98) 66%, rgba(0, 0, 0, .9) 72%, rgba(0, 0, 0, .66) 80%, rgba(0, 0, 0, .36) 88%, rgba(0, 0, 0, .12) 94%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.about-hero-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #010101 url('../images/about/face-frames/center.webp') center / cover no-repeat;
  transform: scale(1.035);
  transform-origin: 50% 50%;
  pointer-events: none;
}

/* Same real overlay as Home: above media, below all copy and the marquee. */
.about-hero .about-hero-grain {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .35;
  mix-blend-mode: plus-lighter;
  background-image: url('../images/home/hero-overlay.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.about-hero .vision-marquee {
  position: absolute;
  z-index: 6;
  display: block !important;
  inset: 57.55vw 0 auto;
  height: min(6.667vw, 128px);
  overflow: visible;
  opacity: var(--about-copy-opacity, 1);
  transform: translateY(-50%);
  pointer-events: none;
}

.about-hero .vision-marquee-track {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  width: max-content;
  animation: visionMarqueeLoop 29s linear infinite;
  transform: translate3d(-25%, -50%, 0);
  will-change: transform;
}

.about-hero .vision-line-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(22px, 1.8vw, 35px);
  width: max-content;
  padding-right: clamp(22px, 1.8vw, 35px);
  color: #faf8f2;
  font-family: 'PP Eiko', Georgia, serif !important;
  font-size: min(6.667vw, 128px) !important;
  font-weight: 500 !important;
  line-height: .7656 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  white-space: nowrap;
}

.about-hero .vision-line-keyword {
  display: inline-block;
  flex: 0 0 auto;
}

.about-hero .vision-line-separator {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: #ff5a35;
  font-family: 'Satoshi', sans-serif;
  font-size: .18em;
  line-height: 1;
}

@keyframes visionMarqueeLoop {
  from { transform: translate3d(-25%, -50%, 0); }
  to { transform: translate3d(-75%, -50%, 0); }
}

@media (min-width: 901px) and (min-height: 561px) and (prefers-reduced-motion: no-preference) {
  .about-hero-enhanced .about-hero {
    height: calc(var(--about-stage-height, max(100svh, 68.385vw)) + 164vh);
  }

  .about-hero-enhanced .about-hero-stage {
    position: sticky;
    top: calc(-1 * var(--about-stage-overflow, 0px));
  }

  .about-hero-enhanced .about-brands-section {
    margin-top: -100svh;
    background: rgba(247, 247, 247, var(--about-solid-bg, 0));
  }

  .about-hero-enhanced .about-brands-wipe { transition: none; }

  .about-hero-enhanced .about-brands-inner [data-transition-reveal] {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}

@media (max-width: 1200px) and (min-width: 901px) {
  .about-hero-stage { min-height: max(860px, 100svh, 68.385vw); }
  .about-hero-portrait { width: max(600px, 45.104vw); }
}

/* V11 — keep the subtitle attached to the resized two-line title. */
@media (min-width: 901px) {
  .about-hero-subtitle {
    top: calc(8.958vw + clamp(98px, 8vw, 138px) + clamp(18px, 1.25vw, 24px));
  }
}

@media (max-width: 900px) {
  .about-page .about-hero { height: auto; }

  .about-hero-stage {
    min-height: max(100svh, 880px);
  }

  .about-hero-intro {
    top: clamp(116px, 17vw, 154px);
    width: calc(100% - 48px);
    font-size: clamp(44px, 8.2vw, 68px);
    line-height: 1.025;
  }

  .about-hero-subtitle {
    top: clamp(224px, 30vw, 270px);
    width: calc(100% - 48px);
    font-size: 14px;
    white-space: normal;
  }

  .about-hero-portrait {
    top: clamp(220px, 31vw, 284px);
    width: min(86vw, 680px);
  }

  .about-hero .vision-marquee {
    top: auto;
    bottom: clamp(54px, 8svh, 90px);
    height: clamp(72px, 11vw, 112px);
  }

  .about-hero .vision-line-group {
    gap: clamp(16px, 2.6vw, 28px);
    padding-right: clamp(16px, 2.6vw, 28px);
    font-size: clamp(52px, 10.5vw, 86px) !important;
    line-height: .9 !important;
  }
}

@media (max-width: 640px) {
  .about-hero-stage { min-height: max(100svh, 760px); }

  .about-hero-intro {
    top: 112px;
    width: calc(100% - 32px);
    font-size: clamp(34px, 10.2vw, 48px);
    line-height: 1.01;
  }

  .about-hero-intro span { white-space: normal; }

  .about-hero-subtitle {
    top: 218px;
    width: calc(100% - 48px);
    font-size: 12px;
    line-height: 1.35;
  }

  .about-hero-portrait {
    top: 232px;
    width: min(118vw, 570px);
  }

  .about-hero .vision-marquee { bottom: 62px; }

  .about-hero .vision-line-group {
    font-size: clamp(42px, 15vw, 64px) !important;
  }

  .about-hero .about-hero-grain { width: 100%; }
}

@media (max-width: 360px) {
  .about-page .site-header .brand-logo { width: 88px; flex-shrink: 0; }
}

@media (max-height: 560px) and (min-width: 641px) {
  .about-hero-stage { min-height: 780px; }
  .about-hero-intro { top: 100px; }
  .about-hero-subtitle { top: 230px; }
  .about-hero-portrait { top: 210px; width: 520px; }
  .about-hero .vision-marquee { top: 650px; bottom: auto; }
  .about-hero-enhanced .about-brands-wipe { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .about-hero .vision-marquee-track { animation: none; }
  .about-hero-intro,
  .about-hero-subtitle,
  .about-hero .vision-marquee { opacity: 1; }
}

/* V8 — reuse the exact Home Hero type token at every breakpoint. */
.about-page .about-hero-intro {
  font-family: 'PP Eiko', 'Satoshi', sans-serif !important;
  font-size: var(--hero-title-size) !important;
  line-height: var(--hero-title-line-height) !important;
}

/* V14 — place the keyword band immediately after the visible neck. The
   position follows the portrait geometry rather than an unrelated viewport
   percentage, so it stays attached to the face at every desktop width. */
@media (min-width: 901px) and (min-height: 561px) {
  .about-hero .vision-marquee {
    top: calc(12.76vw + min(42.4vw, 814px));
    bottom: auto;
  }
}