/* About page: extends the ONEBIO visual system. */
.about-hero { display:flex; position:relative; min-height:92svh; padding-top:calc(var(--announcement-height) + var(--header-height)); flex-direction:column; justify-content:flex-end; overflow:hidden; background:radial-gradient(circle at 72% 43%,rgba(134,184,29,.13),transparent 24%),linear-gradient(118deg,#070807 0%,#111311 56%,#060706 100%); color:var(--color-white); }
.about-hero__noise { position:absolute; inset:0; opacity:.15; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }
.about-hero__wordmark { position:absolute; top:50%; right:-1vw; color:rgba(255,255,255,.04); font-size:clamp(9rem,17vw,19rem); font-weight:600; letter-spacing:-.08em; line-height:.7; transform:translateY(-50%); pointer-events:none; }
.about-hero__grid { display:grid; position:relative; z-index:2; grid-template-columns:.92fr 1.08fr; align-items:center; min-height:calc(92svh - var(--announcement-height) - var(--header-height) - 92px); gap:clamp(45px,7vw,110px); }
.about-hero__content { max-width:690px; padding-block:64px; }
.about-hero__content .section-label { opacity:0; transform:translateY(12px); animation:aboutReveal .75s .15s var(--ease-premium) forwards; }
.about-hero h1 { font-size:clamp(4rem,7vw,7.5rem); font-weight:600; letter-spacing:-.06em; line-height:.88; opacity:0; transform:translateY(28px); animation:aboutReveal .9s .25s var(--ease-premium) forwards; }
.about-hero h1 em { color:var(--color-green); font-size:.84em; font-style:normal; }
.about-hero__content > p:not(.section-label) { max-width:620px; margin-top:31px; color:#b8bdb6; font-size:1.02rem; line-height:1.75; opacity:0; transform:translateY(20px); animation:aboutReveal .8s .39s var(--ease-premium) forwards; }
.about-hero__content .button { margin-top:34px; opacity:0; transform:translateY(16px); animation:aboutReveal .75s .5s var(--ease-premium) forwards; }
.about-hero__visual { position:relative; min-height:590px; opacity:0; transform:translateX(24px); animation:aboutReveal 1s .38s var(--ease-premium) forwards; }
.about-hero__visual > img { position:absolute; z-index:3; right:-3%; bottom:-4%; width:min(47vw,680px); height:100%; object-fit:contain; filter:drop-shadow(0 38px 32px rgba(0,0,0,.72)); animation:aboutFloat 7s 1.4s ease-in-out infinite; }
.about-hero__orbit { position:absolute; z-index:1; top:50%; left:53%; width:min(39vw,560px); aspect-ratio:1; border:1px solid rgba(255,255,255,.1); border-radius:50%; transform:translate(-50%,-50%); }
.about-hero__orbit::before,.about-hero__orbit::after,.about-hero__orbit span { position:absolute; border:1px solid rgba(134,184,29,.15); border-radius:50%; content:""; }
.about-hero__orbit::before { inset:11%; } .about-hero__orbit::after { inset:25%; border-color:rgba(255,255,255,.08); }
.about-hero__orbit span:first-child { top:12%; right:18%; width:9px; height:9px; background:var(--color-green); box-shadow:0 0 20px rgba(134,184,29,.7); }
.about-hero__orbit span:last-child { bottom:14%; left:12%; width:6px; height:6px; background:var(--color-green); }
.about-hero__glow { position:absolute; z-index:0; right:3%; bottom:9%; width:82%; height:30%; border-radius:50%; background:rgba(134,184,29,.12); filter:blur(60px); }
.about-hero__molecule { position:absolute; z-index:0; top:5%; right:-3%; width:66%; color:var(--color-green); opacity:.13; animation:aboutMolecule 14s ease-in-out infinite; }
.about-hero__molecule path { fill:none; stroke:currentColor; stroke-width:1; } .about-hero__molecule circle { fill:currentColor; }
.about-hero__strip { display:grid; position:relative; z-index:4; grid-template-columns:repeat(3,1fr); min-height:92px; border-top:1px solid var(--border-dark); }
.about-hero__strip p { display:flex; align-items:center; gap:16px; padding-inline:28px; border-right:1px solid var(--border-dark); font-size:.67rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; }
.about-hero__strip p:first-child { padding-left:0; } .about-hero__strip p:last-child { border-right:0; } .about-hero__strip span { color:var(--color-green); font-size:.95rem; }
@keyframes aboutReveal { to { opacity:1; transform:none; } } @keyframes aboutFloat { 50% { transform:translateY(-7px); } } @keyframes aboutMolecule { 50% { transform:translate3d(-8px,6px,0) rotate(1deg); } }

.about-intro { background:var(--color-white); }
.about-intro__grid { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(65px,10vw,160px); }
.about-intro h2,.about-story h2,.about-transparency h2,.about-cta h2 { font-size:clamp(2.8rem,4.9vw,5rem); font-weight:500; letter-spacing:-.06em; line-height:.95; }
.about-intro h2 em,.about-story h2 em,.about-transparency h2 em,.about-cta h2 em { color:var(--color-green-deep); font-style:normal; }
.about-intro__copy { padding-top:43px; } .about-intro__copy p { color:var(--color-grey-dark); font-size:1rem; line-height:1.82; } .about-intro__copy p + p { margin-top:22px; }
.about-intro__statement { margin-top:96px; padding-top:34px; border-top:1px solid var(--border-light); font-size:clamp(2rem,4vw,4.3rem); font-weight:500; letter-spacing:-.05em; line-height:1.15; }
.about-intro__statement p:last-child { color:#979c95; } .about-intro__statement span { color:var(--color-green-deep); }

.about-story { position:relative; overflow:hidden; background:var(--color-black); color:var(--color-white); }
.about-story__backdrop { position:absolute; inset:0; } .about-story__backdrop img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08) brightness(.25); opacity:.58; }
.about-story__backdrop::after { position:absolute; inset:0; background:linear-gradient(100deg,rgba(8,9,8,.98) 5%,rgba(8,9,8,.83) 50%,rgba(8,9,8,.88) 100%),radial-gradient(circle at 74% 35%,rgba(134,184,29,.14),transparent 31%); content:""; }
.about-story__grid { display:grid; position:relative; z-index:1; grid-template-columns:.85fr 1.15fr; gap:clamp(65px,10vw,150px); }
.about-story h2 em { color:var(--color-green); } .about-story__heading > p:last-child { max-width:500px; margin-top:28px; color:#aeb3ad; line-height:1.78; }
.about-process { border-top:1px solid var(--border-dark); } .about-process li { display:grid; grid-template-columns:66px 1fr; gap:18px; padding:30px 0; border-bottom:1px solid var(--border-dark); }
.about-process li > span { color:var(--color-green); font-size:1.15rem; font-weight:500; } .about-process h3 { font-size:1.13rem; letter-spacing:-.02em; }
.about-process p { max-width:520px; margin-top:10px; color:#aeb3ad; font-size:.91rem; line-height:1.72; }

.about-values { background:var(--color-off-white); } .about-values__grid { display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--border-light); }
.about-values__grid article { min-height:310px; padding:31px 28px; border-right:1px solid var(--border-light); background:rgba(255,255,255,.35); transition:background-color .3s ease,transform .3s var(--ease-premium); }
.about-values__grid article:first-child { border-left:1px solid var(--border-light); } .about-values__grid article:hover { background:var(--color-white); transform:translateY(-3px); }
.about-values__grid article > span { color:var(--color-green); font-size:2.8rem; font-weight:500; line-height:1; } .about-values__grid h3 { margin-top:77px; font-size:1.05rem; }
.about-values__grid p { margin-top:13px; color:var(--color-grey-dark); font-size:.86rem; line-height:1.72; }

.about-transparency { overflow:hidden; background:var(--color-white); } .about-transparency__grid { display:grid; grid-template-columns:1fr .9fr; align-items:center; gap:clamp(65px,9vw,135px); }
.about-transparency__content > p:not(.section-label):not(.about-transparency__note) { max-width:650px; margin-top:28px; color:var(--color-grey-dark); line-height:1.8; }
.about-transparency__note { max-width:650px; margin-top:20px; padding:15px 17px; border:1px solid rgba(103,143,20,.2); border-radius:9px; background:var(--color-green-soft); color:#525b49; font-size:.78rem; line-height:1.65; }
.about-transparency .button { margin-top:30px; } .about-transparency__visual { display:grid; position:relative; min-height:590px; place-items:center; overflow:hidden; border-radius:12px; background:radial-gradient(circle at 50% 57%,rgba(134,184,29,.18),transparent 31%),linear-gradient(145deg,#eef1eb,#f8f9f7); }
.about-transparency__visual > p { position:absolute; top:8%; right:-5%; color:rgba(8,9,8,.045); font-size:clamp(5rem,8vw,8rem); font-weight:600; letter-spacing:-.08em; }
.about-transparency__visual > img { position:relative; z-index:2; width:83%; height:90%; object-fit:contain; filter:drop-shadow(0 26px 24px rgba(0,0,0,.26)); }
.about-transparency__rings { position:absolute; width:68%; aspect-ratio:1; border:1px solid rgba(103,143,20,.17); border-radius:50%; }
.about-transparency__rings::before,.about-transparency__rings::after { position:absolute; border:1px solid rgba(8,9,8,.07); border-radius:50%; content:""; } .about-transparency__rings::before { inset:15%; } .about-transparency__rings::after { inset:31%; }

.about-cta { position:relative; overflow:hidden; padding-block:92px; background:var(--color-black); color:var(--color-white); }
.about-cta::before { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:72px 72px; content:""; }
.about-cta::after { position:absolute; top:50%; right:6%; width:360px; height:360px; border-radius:50%; background:rgba(134,184,29,.1); filter:blur(90px); content:""; transform:translateY(-50%); }
.about-cta__grid { display:grid; position:relative; z-index:1; grid-template-columns:1fr .8fr; align-items:end; gap:80px; } .about-cta h2 em { color:var(--color-green); }
.about-cta__actions > p { max-width:540px; color:#acb1aa; line-height:1.75; } .about-cta__actions > div { display:flex; flex-wrap:wrap; gap:11px; margin-top:28px; }

@media (max-width:1120px) { .about-hero__grid { min-height:690px; gap:30px; } .about-hero__visual { min-height:540px; } .about-hero__visual > img { width:min(54vw,600px); } .about-story__grid { grid-template-columns:.9fr 1.1fr; gap:65px; } }
@media (max-width:880px) {
  .about-hero { min-height:auto; } .about-hero__grid { grid-template-columns:1fr; min-height:auto; gap:0; } .about-hero__content { max-width:730px; padding:76px 0 10px; }
  .about-hero__visual { width:min(100%,680px); min-height:550px; margin-left:auto; } .about-hero__visual > img { right:2%; width:min(76vw,610px); } .about-hero__orbit { width:min(72vw,530px); }
  .about-hero__strip { grid-template-columns:1fr; } .about-hero__strip p,.about-hero__strip p:first-child { min-height:58px; padding-inline:0; border-right:0; border-bottom:1px solid var(--border-dark); } .about-hero__strip p:last-child { border-bottom:0; }
  .about-intro__grid,.about-story__grid,.about-transparency__grid,.about-cta__grid { grid-template-columns:1fr; } .about-intro__grid,.about-story__grid,.about-transparency__grid { gap:50px; }
  .about-intro__copy { max-width:650px; padding-top:0; } .about-intro__statement { margin-top:70px; } .about-story__heading { max-width:660px; }
  .about-values__grid { grid-template-columns:repeat(2,1fr); } .about-values__grid article:nth-child(3) { border-left:1px solid var(--border-light); border-top:1px solid var(--border-light); } .about-values__grid article:nth-child(4) { border-top:1px solid var(--border-light); }
  .about-transparency__visual { min-height:540px; } .about-cta__grid { gap:45px; }
}
@media (max-width:620px) {
  .about-hero h1 { font-size:clamp(3.5rem,15vw,5.2rem); } .about-hero__content { padding-top:60px; } .about-hero__content > p:not(.section-label) { font-size:.94rem; }
  .about-hero__content .button { width:100%; justify-content:space-between; } .about-hero__visual { width:108%; min-height:440px; margin-right:-8%; } .about-hero__visual > img { width:min(95vw,490px); } .about-hero__orbit { width:min(92vw,450px); } .about-hero__wordmark { top:62%; font-size:31vw; }
  .about-intro h2,.about-story h2,.about-transparency h2,.about-cta h2 { font-size:clamp(2.45rem,11vw,3.7rem); } .about-intro__statement { margin-top:57px; font-size:clamp(1.75rem,8vw,2.8rem); }
  .about-process li { grid-template-columns:48px 1fr; } .about-values__grid { grid-template-columns:1fr; }
  .about-values__grid article,.about-values__grid article:first-child,.about-values__grid article:nth-child(3) { min-height:225px; border:1px solid var(--border-light); border-bottom:0; } .about-values__grid article:last-child { border-bottom:1px solid var(--border-light); } .about-values__grid h3 { margin-top:43px; }
  .about-transparency__visual { min-height:445px; } .about-cta { padding-block:72px; } .about-cta__actions > div { display:grid; } .about-cta .button { width:100%; justify-content:space-between; }
}
@media (prefers-reduced-motion:reduce) { .about-hero__content .section-label,.about-hero h1,.about-hero__content > p:not(.section-label),.about-hero__content .button,.about-hero__visual { opacity:1; transform:none; animation:none; } .about-hero__visual > img,.about-hero__molecule { animation:none; } }
