/* Young Corporation — homepage/about.css
   Extracted from style.css. Depends on global/global.css tokens. */

/* ==========================================================================
   About / Welcome
   ========================================================================== */
.about__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.about__photo { width: 100%; aspect-ratio: 3/3.4; object-fit: cover; border-radius: 14px; }
.about__stats { display: flex; gap: clamp(2rem, 6vw, 4rem); margin-top: 1.8rem; }
.about__stat { display: flex; flex-direction: column; gap: .35rem; }
.about__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--ink); line-height: 1; }
.about__num sup { color: var(--sky-ink); font-size: .55em; top: -.55em; }
.about__label { font-size: .84rem; color: var(--muted); }

.about__heading { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.12; font-weight: 800; color: var(--ink); margin: 0 0 1rem; letter-spacing: -.01em; }
.about__title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.28; font-weight: 800; color: var(--ink); margin: 0; }
.about__title-sub { color: var(--muted); font-weight: 700; }

.about__feature { position: relative; isolation: isolate; overflow: hidden; border-radius: 14px; display: flex; margin-top: clamp(2rem, 5vw, 3.5rem); aspect-ratio: 16/7; }
.about__feature-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.about__feature::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgba(8,12,26,.55), rgba(8,12,26,.15)); }
.about__feature-body { align-self: flex-end; padding: clamp(1.2rem, 3vw, 2rem); }
.about__more { justify-self: start; }

@media (max-width: 860px) {
  .about__grid { grid-template-columns: 1fr; }
}