body.is-about { --scene-bg: #030609; --scene-fog: #080a0c; --scene-accent: #c7cad1; --scene-ink: #f4f7fb; --scene-ink-dim: #a5bdd3; background: #030609; }
.about { padding-top: calc(var(--hdr-h) + var(--ruo-h)); overflow: clip; }
.about .btn { display: inline-flex; align-items: center; justify-content: space-between; gap: .9rem; }
.about .btn svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }
.about h1, .about h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
.about a:focus-visible, .about button:focus-visible { outline: 2px solid #b8d8f4; outline-offset: 6px; }
.about ::selection { background: #c7cad1; color: #08111e; }
.about-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
  width: var(--page);
  min-height: min(820px, calc(100svh - var(--hdr-h) - var(--ruo-h)));
  padding: 4rem 0;
  margin-inline: auto;
}
.about-hero__copy { position: relative; z-index: 2; }
.about-hero h1 { font-size: clamp(3rem, 6.1vw, 6rem); line-height: 1.03; margin: 1.8rem 0; }
.about-hero h1 span { display: block; }
.about-hero__intro { font-size: clamp(1rem, 1.5vw, 1.2rem); max-width: 40ch; color: #b4bac1; line-height: 1.65; margin-bottom: 2rem; }
.about-hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.about-hero__link { padding: .9rem 0; color: #c3d8e9; text-underline-offset: .3em; font-size: .9rem; }
.about-hero__art { position: relative; min-width: 0; height: 610px; perspective: 1200px; }
.about-hero__art::before {
  content: ''; position: absolute; inset: 15% -25% 0;
  background: radial-gradient(ellipse at 50% 65%, #25221b 0%, #0b0c0e 35%, transparent 65%);
}
.about-document { position: absolute; width: 63%; top: 5%; left: 7%; transform: rotate(-9deg) rotateY(10deg); transition: transform .7s var(--ease-out); }
.about-document img { width: 100%; height: auto; border-radius: 2px; box-shadow: 12px 25px 50px #000a; }
.about-hero__vial { position: absolute; width: 37%; height: 77%; object-fit: contain; bottom: 2%; right: 4%; filter: drop-shadow(12px 20px 18px #000a); transform: rotate(7deg); transition: transform .7s var(--ease-out); }
.about-hero__art:hover .about-document { transform: rotate(-5deg) rotateY(0); }
.about-hero__art:hover .about-hero__vial { transform: rotate(2deg) translateY(-12px); }
.about-document__caption { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; color: #a6adb5; font: .65rem/1.5 var(--font-mono); }
.about-standard {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6rem;
  width: var(--page); margin: auto; padding: 4rem 0 5rem;
  border-top: 1px solid #ffffff20;
}
.about-standard h2 { font-size: clamp(2rem, 3.5vw, 3.5rem); line-height: 1.1; margin: 0; }
.about-standard p { margin: 0 0 1.2rem; color: #b4bac1; font-size: 1.06rem; line-height: 1.75; max-width: 58ch; }
.about-standard a { color: #d6e6f4; text-underline-offset: .3em; }
.about-proof { position: relative; background: #080a0c; border-block: 1px solid #ffffff20; }
.about-proof__inner { width: var(--page); margin: auto; padding: 4rem 0; }
.about-proof__head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.about-proof h2 { margin: 0; font-size: clamp(2.1rem, 3.7vw, 3.6rem); line-height: 1.1; max-width: 16ch; }
.about-proof__head p { color: #b4bac1; max-width: 38ch; line-height: 1.6; font-size: .94rem; margin: 0; }
.proof-workspace { display: grid; grid-template-columns: 1fr 1.15fr; gap: 4rem; align-items: center; }
.proof-tabs { display: flex; gap: .25rem; border-bottom: 1px solid #ffffff20; margin-bottom: 2rem; }
.proof-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 1rem .75rem; color: #b4bac1; font: 500 .9rem var(--font-body); min-height: 48px; cursor: pointer; }
.proof-tabs button[aria-selected="true"] { color: #fff; border-bottom-color: #c7cad1; }
.proof-value { margin: 0; font: 500 clamp(3.7rem, 7vw, 6.5rem)/1 var(--font-display); letter-spacing: -.035em; color: #f1f3f5; font-variant-numeric: tabular-nums; }
.proof-value small { font-size: .4em; letter-spacing: -.02em; }
.proof-caption { font-size: 1.05rem; line-height: 1.5; color: #fff; margin: .7rem 0 1.2rem; }
.proof-description { color: #b4bac1; line-height: 1.7; max-width: 45ch; font-size: .95rem; }
.proof-reference { font: .68rem/1.8 var(--font-mono); color: #a6adb5; padding-block: 1.3rem; margin-top: 1.5rem; border-top: 1px solid #ffffff20; }
.proof-visual { position: relative; margin: 0; }
.proof-visual__stage { height: 380px; background: #fff; border-radius: 3px; overflow: hidden; position: relative; }
.proof-visual__stage img { width: 100%; height: 100%; object-fit: contain; }
.proof-visual figcaption { color: #a6adb5; font-size: .8rem; margin-top: .85rem; line-height: 1.5; }
.proof-scope { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid #ffffff20; }
.proof-scope p { margin: 0; max-width: 69ch; color: #b4bac1; font-size: .84rem; line-height: 1.7; }
.about-pair { width: var(--page); margin: auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 5rem; padding: 5rem 0; }
.about-pair__art { position: relative; height: 440px; display: flex; align-items: end; justify-content: center; }
.about-pair__vial { height: 88%; width: 43%; object-fit: contain; filter: drop-shadow(10px 24px 20px #000a); transform: rotate(-7deg); z-index: 1; }
.about-pair__water { background: none; width: 30%; transform: rotate(8deg); filter: drop-shadow(10px 18px 20px #0008); border-radius: 4px; }
.about-pair__water img { display: block; width: 100%; height: auto; }
.about-pair h2 { margin: 0 0 1.5rem; font-size: clamp(2.1rem, 3.7vw, 3.6rem); line-height: 1.1; }
.about-pair p { color: #b4bac1; line-height: 1.75; max-width: 48ch; }
.about-pair__offer { margin: 2rem 0; padding-block: 1.3rem; border-block: 1px solid #ffffff20; display: flex; gap: 1.3rem; align-items: center; }
.about-pair__offer strong { color: #e2e6ea; font: 500 2.1rem var(--font-display); flex: none; }
.about-pair__offer p { font-size: .88rem; margin: 0; }
.about-contact { display: flex; justify-content: space-between; align-items: center; gap: 2rem; width: var(--page); margin: auto; padding: 0 0 4rem; }
.about-contact p { max-width: 55ch; color: #b4bac1; font-size: .9rem; line-height: 1.7; }
.about-contact a { color: #e2e6ea; text-underline-offset: .3em; }
@media (max-width: 1100px) {
  .about-hero__art { height: 490px; }
  .about-standard, .proof-workspace, .about-pair { gap: 2.5rem; }
  .proof-scope { grid-template-columns: 1fr; gap: 1.4rem; }
  .proof-scope .btn { justify-self: start; }
}
@media (max-width: 760px) {
  .about-hero { grid-template-columns: 1fr; padding: 2rem 0; gap: 0; min-height: auto; }
  .about-hero h1 { font-size: clamp(2.9rem, 10.6vw, 4.6rem); margin: 1.4rem 0; }
  .about-hero__intro { font-size: 1rem; }
  .about-hero__art { width: 100%; height: 440px; margin-top: 1.5rem; }
  .about-document { width: 59%; top: 8%; left: 5%; }
  .about-hero__vial { height: 78%; width: 40%; right: 5%; }
  .about-standard { grid-template-columns: 1fr; padding: 2rem 0 3rem; gap: 1.5rem; }
  .about-proof__inner { padding: 2.5rem 0; }
  .about-proof__head { display: block; }
  .about-proof__head p { margin-top: 1rem; }
  .proof-workspace { grid-template-columns: 1fr; gap: 2rem; }
  .proof-tabs { margin-bottom: 1.5rem; }
  .proof-tabs button { flex: 1; padding-inline: .5rem; font-size: .83rem; }
  .proof-value { font-size: 4.6rem; }
  .proof-visual__stage { height: 280px; }
  .about-pair { grid-template-columns: 1fr; padding: 3rem 0; gap: 2rem; }
  .about-pair__art { height: 350px; order: 2; }
  .about-contact { display: block; padding-bottom: 3rem; }
  .about-standard p { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .about-document, .about-hero__vial { transition: none; }
  .about-hero__art:hover .about-document { transform: rotate(-9deg) rotateY(10deg); }
  .about-hero__art:hover .about-hero__vial { transform: rotate(7deg); }
}