/* ============================================================
   About_Test — elegant editorial about page
   Reuses home_test chrome + overlays (home-test.css).
   Dark canvas · Bodoni Moda italic display · Inter labels.
   ============================================================ */

html { scroll-behavior: smooth; }
body { background: var(--h-bg); color: var(--h-ink); overflow-x: hidden; }
#root { min-height: 100vh; }

.a-page { width: 100%; }

/* shared editorial bits */
.a-eyebrow {
  font-family: var(--h-sans); font-weight: 700; font-size: 12px;
  letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.42);
}
.a-serif { font-family: var(--h-serif); font-style: italic; font-weight: 500; }

/* ============================================================
   HERO — centered manifesto
   ============================================================ */
.a-hero {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 18vh 6vw 0; position: relative;
}
.a-hero .a-eyebrow { margin-bottom: 38px; animation: aRise 800ms cubic-bezier(0.2,0,0.2,1) backwards; }
.a-hero h1 {
  font-family: var(--h-serif); font-style: italic; font-weight: 500;
  font-size: clamp(54px, 9.2vw, 176px); line-height: 0.94; letter-spacing: -0.015em;
  text-wrap: balance; animation: aRise 900ms cubic-bezier(0.2,0,0.2,1) backwards; animation-delay: 0.08s;
}
.a-hero h1 em { font-style: normal; }
.a-hero .a-hero-sub {
  margin-top: 40px; max-width: 560px;
  font-family: var(--h-sans); font-weight: 500; font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6; color: rgba(255,255,255,0.6);
  animation: aRise 900ms cubic-bezier(0.2,0,0.2,1) backwards; animation-delay: 0.18s;
}
.a-scrollcue {
  position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--h-sans); font-weight: 700; font-size: 10px; letter-spacing: 0.26em;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
}
.a-scrollcue .line { width: 1px; height: 54px; background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent); }

@keyframes aRise { from { transform: translateY(30px); } to { transform: translateY(0); } }

/* ============================================================
   SCROLL REVEAL — fade + rise as blocks enter the viewport
   ============================================================ */
.reveal {
  opacity: 0; transform: translateY(34px);
  transition: opacity 1000ms cubic-bezier(0.2,0,0.2,1), transform 1000ms cubic-bezier(0.2,0,0.2,1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }

/* Elements that already transition something on hover need the reveal merged in
   (higher specificity than their own rule further down the file). */
.a-press .row span.reveal {
  transition: opacity 1000ms cubic-bezier(0.2,0,0.2,1), transform 1000ms cubic-bezier(0.2,0,0.2,1), color 320ms cubic-bezier(0.2,0,0.2,1);
}
.a-cta .a-contact-link.reveal {
  transition: opacity 1000ms cubic-bezier(0.2,0,0.2,1), transform 1000ms cubic-bezier(0.2,0,0.2,1), gap 260ms ease;
}

/* Portrait — soft upward wipe + slow settle from dark */
.a-bio .a-portrait.reveal-img { position: relative; }
.a-bio .a-portrait.reveal-img img {
  transform: scale(1.12); filter: grayscale(1) contrast(1.04) brightness(0.62);
  transition: transform 1500ms cubic-bezier(0.2,0,0.2,1), filter 1500ms cubic-bezier(0.2,0,0.2,1);
}
.a-bio .a-portrait.reveal-img.in img { transform: scale(1); filter: grayscale(1) contrast(1.04); }
.a-bio .a-portrait.reveal-img::after {
  content: ""; position: absolute; inset: 0; background: var(--h-bg); z-index: 4;
  transform: scaleY(1); transform-origin: bottom;
  transition: transform 1100ms cubic-bezier(0.76,0,0.24,1);
}
.a-bio .a-portrait.reveal-img.in::after { transform: scaleY(0); }

/* Count-up figure stays tabular; suffix (+/%) stays upright */
.a-stat .n .num { font-variant-numeric: tabular-nums; }
.a-stat .n .suf { font-style: normal; }

@media (prefers-reduced-motion: reduce) {
  .a-hero .a-eyebrow, .a-hero h1, .a-hero .a-hero-sub { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .a-bio .a-portrait.reveal-img img { transform: none; filter: grayscale(1) contrast(1.04); transition: none; }
  .a-bio .a-portrait.reveal-img::after { display: none; }
}

/* ============================================================
   BIO — portrait + text
   ============================================================ */
.a-bio {
  display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 6vw; align-items: center;
  padding: 12vh 6vw; max-width: 1500px; margin: 0 auto;
}
.a-bio .a-portrait { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #161616; }
.a-bio .a-portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.a-bio .a-portrait .a-tag {
  position: absolute; left: 18px; bottom: 16px;
  font-family: var(--h-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #fff;
}
.a-bio .a-text { max-width: 560px; }
.a-bio .a-text h2 {
  font-family: var(--h-serif); font-style: italic; font-weight: 500;
  font-size: clamp(36px, 4.6vw, 76px); line-height: 1.0; letter-spacing: -0.01em;
  margin: 22px 0 30px;
}
.a-bio .a-text p {
  font-family: var(--h-sans); font-weight: 500; font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.66; color: rgba(255,255,255,0.66); margin-bottom: 20px; text-wrap: pretty;
}
.a-bio .a-text p strong { color: #fff; font-weight: 600; }
.a-bio .a-sign {
  font-family: var(--h-serif); font-style: italic; font-weight: 500; font-size: 30px;
  margin-top: 34px; color: #fff;
}
.a-bio .a-sign small {
  display: block; font-family: var(--h-sans); font-style: normal; font-weight: 700;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); margin-top: 8px;
}

/* ============================================================
   STATEMENT — oversized pull-quote
   ============================================================ */
.a-statement { padding: 16vh 8vw; text-align: center; }
.a-statement p {
  font-family: var(--h-serif); font-style: italic; font-weight: 500;
  font-size: clamp(30px, 4.4vw, 78px); line-height: 1.12; letter-spacing: -0.01em;
  max-width: 20ch; margin: 0 auto; text-wrap: balance;
}
.a-statement p em { font-style: normal; color: rgba(255,255,255,0.5); }

/* ============================================================
   APPROACH — three numbered columns
   ============================================================ */
.a-approach { padding: 12vh 6vw; max-width: 1500px; margin: 0 auto; }
.a-approach .a-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 30px;
  padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 64px;
}
.a-approach .a-head h2 {
  font-family: var(--h-serif); font-style: italic; font-weight: 500;
  font-size: clamp(34px, 4.2vw, 68px); line-height: 0.98; letter-spacing: -0.01em;
}
.a-approach .a-head .a-eyebrow { flex: 0 0 auto; }
.a-approach .a-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5vw; }
.a-col .num {
  font-family: var(--h-serif); font-style: italic; font-weight: 500; font-size: 40px;
  color: rgba(255,255,255,0.34); font-variant-numeric: tabular-nums;
}
.a-col h3 {
  font-family: var(--h-sans); font-weight: 800; font-size: 21px; letter-spacing: -0.01em;
  margin: 18px 0 14px;
}
.a-col p {
  font-family: var(--h-sans); font-weight: 500; font-size: 15px; line-height: 1.62;
  color: rgba(255,255,255,0.6); text-wrap: pretty;
}

/* ============================================================
   STATS — tabular figures
   ============================================================ */
.a-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12);
  max-width: 1500px; margin: 0 auto;
}
.a-stat { padding: 8vh 30px; text-align: center; border-right: 1px solid rgba(255,255,255,0.12); }
.a-stat:last-child { border-right: 0; }
.a-stat .n {
  font-family: var(--h-serif); font-style: italic; font-weight: 500;
  font-size: clamp(48px, 6vw, 96px); line-height: 0.9; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.a-stat .l {
  font-family: var(--h-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.45); margin-top: 20px;
}

/* ============================================================
   PRESS — recognition row
   ============================================================ */
.a-press { padding: 14vh 6vw; text-align: center; }
.a-press .a-eyebrow { margin-bottom: 48px; }
.a-press .row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 16px 56px;
}
.a-press .row span {
  font-family: var(--h-serif); font-style: italic; font-weight: 500;
  font-size: clamp(22px, 2.6vw, 40px); color: rgba(255,255,255,0.46);
  transition: color 320ms cubic-bezier(0.2,0,0.2,1);
}
.a-press .row span:hover { color: #fff; }

/* ============================================================
   CTA — closing
   ============================================================ */
.a-cta {
  min-height: 86vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 0 6vw;
}
.a-cta .a-eyebrow { margin-bottom: 34px; }
.a-cta h2 {
  font-family: var(--h-serif); font-style: italic; font-weight: 500;
  font-size: clamp(48px, 8vw, 148px); line-height: 0.94; letter-spacing: -0.02em;
  text-wrap: balance;
}
.a-cta .a-contact-link {
  margin-top: 56px; display: inline-flex; align-items: center; gap: 20px; cursor: pointer;
  background: none; border: 0;
  font-family: var(--h-sans); font-weight: 800; font-size: clamp(20px, 2vw, 30px);
  letter-spacing: 0.02em; color: #fff; transition: gap 260ms ease;
}
.a-cta .a-contact-link:hover { gap: 30px; }
.a-cta .a-contact-link svg { width: 80px; height: 24px; }

/* footer */
.a-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 40px 30px; border-top: 1px solid rgba(255,255,255,0.1);
  font-family: var(--h-sans); font-weight: 600; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
}
.a-foot a { color: rgba(255,255,255,0.4); text-decoration: none; transition: color 200ms; }
.a-foot a:hover { color: #fff; }

/* ============================================================
   TABLET / PHONE
   ============================================================ */
@media (max-width: 860px) {
  .a-bio { grid-template-columns: 1fr; gap: 40px; }
  .a-bio .a-portrait { aspect-ratio: 4 / 5; max-height: 70vh; }
  .a-approach .a-cols { grid-template-columns: 1fr; gap: 44px; }
  .a-approach .a-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .a-stats { grid-template-columns: repeat(2, 1fr); }
  .a-stat { border-right: 0; }
  .a-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.12); }
  .a-stat:nth-child(1), .a-stat:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.12); }
}

@media (max-width: 520px) {
  .a-hero { padding-top: 22vh; }
  .a-hero .a-eyebrow { margin-bottom: 26px; }
  .a-bio, .a-approach, .a-press, .a-statement { padding-left: 22px; padding-right: 22px; }
  .a-statement { padding-top: 12vh; padding-bottom: 12vh; }
  .a-stat { padding: 6vh 16px; }
  .a-press .row { gap: 12px 30px; }
  .a-foot { justify-content: center; text-align: center; }
}