/* About is isolated from product, member, and dashboard layouts. */
body.about-page { --about-bg:#030f1c; background:var(--about-bg); }
.about-page::before { opacity:.4; }
.about-page .ambient-field { opacity:.18; }
.about-main { position:relative; overflow:clip; background:radial-gradient(ellipse at 50% 58%,#05203966,transparent 58%); }
.about-hero { position:relative; z-index:2; width:100%; margin:0; min-height:48vw; isolation:isolate; direction:ltr; }
.about-portrait { position:absolute; right:0; top:0; width:73%; height:100%; }
.founders-photo { display:block; width:100%; height:100%; object-fit:cover; object-position:center top; border-radius:0; mask-image:linear-gradient(to right,transparent,black 22%,black 89%,transparent 100%),linear-gradient(to bottom,black 79%,transparent 100%); mask-composite:intersect; }
.about-hero-copy { position:relative; z-index:2; width:34%; padding:6.2vw 0 4.8vw 3.8%; pointer-events:none; }
.about-page .about-eyebrow { margin:0 0 22px; color:#9cd2ff; text-transform:uppercase; letter-spacing:.34em; font-size:12px; font-weight:500; }
.about-hero h1 { font-size:clamp(36px,3.8vw,78px); line-height:1.13; letter-spacing:-.025em; font-weight:350; margin:0 0 24px; color:#f7f9ff; }
.about-intro { font-size:clamp(16px,1.5vw,28px); line-height:1.55; color:#c0cee5; margin:0; }
.about-motto { display:flex; gap:18px; align-items:center; margin:32px 0 0; color:#95cfff; font-size:11px; line-height:1.7; letter-spacing:.3em; text-transform:uppercase; }
.about-motto>span:first-child { flex:0 0 32px; height:1px; background:#6ac5ff; }
.founder { position:absolute; z-index:4; }
.founder.is-open { z-index:6; }
.founder-darien { left:44%; top:20%; }
.founder-jean { left:73%; top:22%; }
.founder-marker { position:relative; width:42px; height:42px; display:grid; place-items:center; border:1px solid #edda9c9e; border-radius:50%; background:#05172bcc; color:#f6dfa2; cursor:pointer; box-shadow:0 0 20px #edc36c33,inset 0 0 13px #e1ca8220; backdrop-filter:blur(12px); transition:box-shadow .25s,background .25s; }
.founder-jean .founder-marker svg { animation-delay:-2s; }
.founder-marker svg { width:21px; height:21px; animation:founder-float 4s ease-in-out infinite; }
.founder-marker:hover,.founder-marker:focus-visible,.founder.is-open .founder-marker { box-shadow:0 0 30px #f3d68a88; background:#213149; outline:2px solid #e8d393; outline-offset:4px; }
.marker-name { position:absolute; top:calc(100% + 8px); white-space:nowrap; font-size:10px; letter-spacing:.06em; font-weight:500; padding:3px 7px; border-radius:8px; background:#031120b3; color:#f9e3ad; }
.founder-bio { position:absolute; top:calc(100% + 36px); width:280px; padding:23px; border:1px solid #e8d4a03b; border-radius:18px; background:linear-gradient(140deg,#15283cf5,#071424f7); box-shadow:0 18px 60px #0008,inset 0 1px #ffffff0c; backdrop-filter:blur(22px); opacity:0; visibility:hidden; pointer-events:none; transform:translateX(14px) translateY(6px) scale(.97); transform-origin:top right; transition:opacity .23s,transform .3s,visibility .3s; text-align:start; }
.founder-darien .founder-bio { right:0; }
.founder-jean .founder-bio { left:0; transform:translateX(-14px) translateY(6px) scale(.97); transform-origin:top left; }
.founder.is-open .founder-bio { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.founder.is-open::after { content:""; position:absolute; top:40px; left:-6px; width:54px; height:70px; z-index:-1; }
.about-page .founder-bio h2 { font-size:21px; font-weight:500; color:#ebd394; line-height:1.25; margin:0 15px 16px 0; letter-spacing:-.02em; }
.founder-bio p { font-size:14px; color:#e0e8f4; line-height:1.6; margin:0 0 13px; }
.founder-bio p:last-child { margin:0; }
.bio-close { position:absolute; right:6px; top:5px; width:32px; height:32px; background:none; border:0; color:#cbd5e3; font-size:24px; cursor:pointer; border-radius:50%; }
.bio-close:focus-visible { outline:2px solid #f0d795; }
.about-story { position:relative; z-index:1; max-width:1160px; margin:0 auto; padding:0 48px; }
.story-heading { position:relative; text-align:center; max-width:740px; margin:0 auto 65px; padding-top:35px; }
.story-heading::before { content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,#6dc2fa55,transparent); }
.story-heading .about-eyebrow { margin-bottom:12px; }
.story-heading h2 { color:#f4f7ff; font-size:clamp(28px,3vw,44px); line-height:1.2; letter-spacing:-.025em; font-weight:350; margin:0 0 14px; }
.story-heading>p:last-child { color:#bdcde5; font-size:19px; line-height:1.55; max-width:680px; margin:0 auto; }
.story-timeline { --line-progress:1; position:relative; list-style:none; margin:0; padding:0 0 75px; direction:ltr; }
.story-timeline::before,.story-timeline::after { content:""; position:absolute; width:1px; top:28px; bottom:0; left:50%; background:linear-gradient(#7bbded22,#79c8ff55); }
.story-timeline::after { background:linear-gradient(#54b5ff,#a6ddff); box-shadow:0 0 12px #3499fb; transform:scaleY(var(--line-progress)); transform-origin:top; }
.story-step { --step-progress:1; position:relative; min-height:190px; display:grid; grid-template-columns:1fr 120px 1fr; align-items:start; }
.story-node { position:relative; z-index:2; grid-column:2; grid-row:1; justify-self:center; width:68px; height:68px; border-radius:50%; border:1px solid #73c9ffab; display:grid; place-items:center; color:#e3f1ff; background:radial-gradient(circle at 30% 15%,#123d60,#041426 75%); box-shadow:0 0 25px #298ceb30,inset 0 0 15px #198ff133; opacity:var(--step-progress); transform:translateY(calc((1 - var(--step-progress))*24px)) scale(calc(.82 + var(--step-progress)*.18)); }
.story-node svg { width:30px; height:30px; }
.story-copy { grid-row:1; grid-column:1; max-width:360px; padding:8px 0 28px; opacity:var(--step-progress); transform:translateY(calc((1 - var(--step-progress))*24px)); }
.story-step:nth-child(odd) .story-copy { justify-self:end; padding-right:24px; }
.story-step:nth-child(even) .story-copy { grid-column:3; padding-left:24px; }
.story-copy h3 { font-size:26px; font-weight:400; color:#f5f7fc; line-height:1.25; letter-spacing:-.025em; margin:0 0 12px; }
.story-copy p { color:#b8cbe4; font-size:17px; line-height:1.65; margin:0; }
.story-timeline>li:last-child::after { content:""; position:absolute; bottom:-75px; left:calc(50% - 3px); width:7px; height:7px; background:#ddf3ff; border-radius:50%; box-shadow:0 0 20px 5px #349bff88; }
.about-earth { position:relative; width:100%; height:clamp(300px,33vw,490px); margin-top:-20px; overflow:hidden; opacity:var(--earth-progress,1); transform:translateY(calc((1 - var(--earth-progress,1))*65px)); }
.earth-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.earth-fallback { position:absolute; top:65px; left:-55%; width:210%; aspect-ratio:1; border-radius:50%; background:linear-gradient(#2279b144,#03142566),url('/about/earth-fallback.php?v=20261002-white2') 53% 30%/100% 50%; border-top:3px solid #a9e4ff; box-shadow:0 -3px 7px #adf0ff,0 -10px 25px #339ffcaa,0 -25px 65px #1680ff55; transform:rotate(calc((1 - var(--earth-progress,1))*12deg)); }
.about-earth.has-webgl .earth-fallback { display:none; }
.earth-credit { margin:0; padding:10px 22px 25px; text-align:center; font-size:10px; letter-spacing:.06em; color:#748aa5; background:linear-gradient(transparent,#030f1c); }
.earth-credit a { color:inherit; }
.about-page .site-footer { position:relative; background:#030f1c; }
[dir="rtl"] .about-hero-copy,[dir="rtl"] .story-copy,[dir="rtl"] .founder-bio { direction:rtl; }
@keyframes founder-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
@media(min-width:1101px) {
  .about-title-line { display:block; }
  /* Keep biographies within the photograph, away from the introduction. */
  .founder-darien .founder-bio { right:0; left:auto; top:calc(100% + 36px); }
  .founder-jean .founder-bio { left:-18px; }
}
@media(max-width:1100px) {
  .about-hero { min-height:0; display:flex; flex-direction:column; }
  .about-portrait { position:relative; top:auto; width:100%; height:auto; aspect-ratio:3/2; margin:0; }
  .about-hero-copy { order:-1; width:100%; padding:46px 5.4% 28px; }
  .about-hero h1 { font-size:43px; max-width:650px; }
  .about-intro { max-width:620px; font-size:18px; }
  .founders-photo { mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent),linear-gradient(to bottom,transparent,black 10%,black 80%,transparent); mask-composite:intersect; }
  .founder-bio { position:fixed; width:min(400px,calc(100vw - 32px)); max-height:calc(100dvh - 165px); overflow:auto; }
  .founder-darien .founder-bio,.founder-jean .founder-bio { left:50%; right:auto; top:auto; bottom:16px; margin-left:calc(min(400px,100vw - 32px) / -2); }
}
@media(max-width:760px) {
  .about-hero { min-height:0; display:flex; flex-direction:column; }
  .about-hero-copy { order:-1; width:100%; padding:46px 26px 28px; }
  .about-hero h1 { font-size:clamp(35px,7.7vw,52px); max-width:600px; }
  .about-intro { font-size:17px; max-width:560px; }
  .about-motto { margin-top:24px; font-size:10px; }
  .about-portrait { position:relative; top:auto; width:100%; aspect-ratio:3/2; }
  .founder-darien { left:20%; top:15%; }
  .founder-jean { left:75%; top:21%; }
  .founder-marker { width:40px; height:40px; }
  .founder-bio { position:fixed; width:calc(100vw - 32px); padding:24px; max-height:calc(100dvh - 165px); overflow:auto; z-index:20; }
  .founder-darien .founder-bio,.founder-jean .founder-bio { left:16px; right:16px; top:auto; bottom:16px; margin-left:0; }
  .founder-bio p { font-size:13px; }
  .about-story { margin:0 auto; padding:0 25px; }
  .story-heading { padding-top:24px; margin-bottom:45px; }
  .story-heading>p:last-child { font-size:17px; }
  .story-timeline { padding-bottom:40px; }
  .story-timeline::before,.story-timeline::after { left:29px; }
  .story-step { min-height:205px; grid-template-columns:60px 1fr; column-gap:22px; }
  .story-node { width:58px; height:58px; grid-column:1; }
  .story-step:nth-child(n) .story-copy { grid-column:2; justify-self:start; padding:4px 0 38px; max-width:none; }
  .story-copy h3 { font-size:23px; }
  .story-copy p { font-size:16px; line-height:1.65; }
  .story-timeline>li:last-child::after { left:26px; bottom:-40px; }
  .about-earth { height:280px; margin-top:0; }
}