/* Round 4 (B8): About Us, scroll-led. Native scrolling only: chapters fade and rise in with IntersectionObserver
   (.is-in, noirix-about-story.js); the gold timeline line draws with the page (CSS scroll-driven animation, or
   the observer's --about-progress where unsupported); images drift slightly (parallax) where scroll-driven
   animations exist. Everything is still and visible under prefers-reduced-motion. */
.values-grid { grid-template-columns: 1fr !important; max-width: 760px; margin: 0 auto; }

.about-hero--full { position: relative; min-height: calc(100svh - var(--nrx-header-h, 74px)); display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.about-hero--full .about-hero__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: grayscale(0.25) brightness(0.62); }
.about-hero--full::after { z-index: -1; }
.about-hero--full .about-hero__inner { padding-bottom: clamp(48px, 9vh, 96px); }

.about-timeline { width: min(1200px, calc(100% - 40px)); margin: 0 auto; padding: clamp(64px, 10vw, 120px) 0; }
.about-timeline .section-title { margin-bottom: 48px; }
.about-timeline__track { position: relative; padding-left: 36px; }
.about-timeline__line { position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: rgba(244, 240, 233, 0.12); }
.about-timeline__progress { position: absolute; inset: 0; background: linear-gradient(180deg, #c9a96e, #e8d3a6); transform-origin: top; transform: scaleY(var(--about-progress, 0)); }
.about-chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(64px, 10vw, 120px); }
.about-chapter { position: relative; display: grid; grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.about-chapter::before { content: ""; position: absolute; left: -36px; top: 8px; width: 13px; height: 13px; border: 1px solid #c9a96e; border-radius: 50%; background: #050505; }
.about-chapter__label { margin: 0; position: sticky; top: calc(var(--nrx-header-h, 74px) + 24px); }
.about-chapter__year { color: #c9a96e; font: 500 12px/1.4 "Inter", sans-serif; letter-spacing: 0.22em; text-transform: uppercase; }
.about-chapter__body h3 { margin: 0 0 12px; font: 400 clamp(26px, 3.4vw, 40px)/1.08 "Cormorant Garamond", Georgia, serif; letter-spacing: 0.04em; color: #f4f0e9; }
.about-chapter__body p { margin: 0; color: rgba(244, 240, 233, 0.7); line-height: 1.75; }
.about-chapter__media { margin: 0; overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 5; background: #0d0d0d; }
.about-chapter__media img { width: 100%; height: 112%; object-fit: cover; display: block; will-change: transform; }
@media (max-width: 900px) {
  .about-chapter { grid-template-columns: 1fr; gap: 14px; }
  .about-chapter__label { position: static; }
  .about-chapter__media { aspect-ratio: 4 / 3; }
}

.about-mission { width: min(900px, calc(100% - 40px)); margin: 0 auto; padding: clamp(80px, 12vw, 160px) 0; text-align: center; }
.about-mission h2 { margin: 12px 0 20px; font: 400 clamp(40px, 7vw, 88px)/1 "Cormorant Garamond", Georgia, serif; letter-spacing: 0.08em; text-transform: uppercase; color: #f4f0e9; }
.about-mission p:last-child { margin: 0 auto; max-width: 620px; color: rgba(244, 240, 233, 0.75); line-height: 1.8; font-size: 17px; }

/* Reveal: staggered fade and rise (title, then text, then image). */
.js-about [data-reveal] .about-chapter__body > *, .js-about [data-reveal] .about-chapter__media, .js-about .about-mission[data-reveal] > * {
  opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.js-about [data-reveal].is-in .about-chapter__body > *, .js-about [data-reveal].is-in .about-chapter__media, .js-about .about-mission[data-reveal].is-in > * { opacity: 1; transform: none; }
.js-about [data-reveal] .about-chapter__body > :nth-child(2), .js-about .about-mission > :nth-child(2) { transition-delay: 90ms; }
.js-about [data-reveal] .about-chapter__media, .js-about .about-mission > :nth-child(3) { transition-delay: 180ms; }

/* Scroll-driven extras where the browser has them (the observer still covers the line elsewhere). */
@supports (animation-timeline: view()) {
  .about-timeline__progress { animation: about-draw linear both; animation-timeline: view(); animation-range: entry 20% exit 60%; animation-name: about-draw; }
  @keyframes about-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  .about-chapter__media img { animation: about-parallax linear both; animation-timeline: view(); }
  @keyframes about-parallax { from { transform: translate3d(0, -6%, 0); } to { transform: translate3d(0, 0, 0); } }
}

@media (prefers-reduced-motion: reduce) {
  .js-about [data-reveal] .about-chapter__body > *, .js-about [data-reveal] .about-chapter__media, .js-about .about-mission[data-reveal] > * { opacity: 1; transform: none; transition: none; }
  .about-timeline__progress { animation: none !important; transform: none; }
  .about-chapter__media img { animation: none !important; height: 100%; }
}

/* Owner, 22 Oct: dates not yet confirmed stay in the page source as placeholders, never shown to customers. */
.about-chapter [data-placeholder] { display: none !important; }