:root{--a-ink:#3e246f;--a-dark:#1b0c0b;--a-paper:#fff3eb;--a-purple:#7446d8;--a-line:rgba(71,32,28,.18)}.about-story-page{margin:0;color:var(--a-ink);background:var(--a-paper);font-family:PPNeueMontreal,Arial,sans-serif}.about-story-page .site-header{position:fixed}.about-story{overflow:hidden}.about-hero{position:relative;height:100vh;display:grid;align-items:center;color:#fff;background:var(--a-dark);isolation:isolate}.about-hero>picture{position:absolute;inset:0;z-index:-3}.about-hero>picture img{width:100%;height:100%;object-fit:cover}.about-hero>div{position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,12,11,.84),rgba(47,18,24,.3));z-index:-2}.about-hero>section{padding:120px 32px 40px}.about-hero p,.about-intro>p,.about-numbers header>p,.about-founders header>p,.about-storyline header>p,.about-values header>p,.about-contact p,.about-learn header>p,.about-mission p{font:500 12px/1.2 SimplonMono,monospace;letter-spacing:.1em;text-transform:uppercase}.about-hero h1{max-width:760px;margin-top:28px;font-size:54.4px;line-height:57.8px;letter-spacing:-.035em;font-weight:300}.about-hero h1 em{color:#cfb5ff}.about-hero span{display:block;margin-top:34px;font-size:20px}.about-intro,.about-numbers,.about-founders,.about-storyline,.about-values{padding-inline:32px}.about-intro{min-height:797px;padding-top:190px}.about-intro>h2,.about-numbers h2,.about-founders h2,.about-storyline h2,.about-values h2,.about-contact h2{max-width:1100px;margin-top:28px;font-size:60px;line-height:1.06;letter-spacing:-.035em;font-weight:440}.about-intro>div{display:none}
.about-mission{position:relative;min-height:3902px;overflow:clip;color:#fff;background:var(--a-ink);isolation:isolate}.about-mission>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.16;z-index:-1}.about-mission>div{position:sticky;top:0;height:100vh;display:grid;place-content:center;padding:60px 32px;text-align:center}.about-mission h2{max-width:1180px;margin-top:30px;font-size:60px;line-height:1.06}.about-mission h2.is-changing{animation:missionIn .6s cubic-bezier(.16,1,.3,1)}@keyframes missionIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.about-numbers{min-height:2049px;padding-top:150px;background:#fff}.about-numbers>div{margin-top:80px;display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:370px;gap:24px}.about-numbers article{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:32px 32px 32px 0;text-align:center;background:#f0edea}.about-numbers article:nth-child(even){background:#dfcff3}.about-numbers article:nth-child(1),.about-numbers article:nth-child(4){grid-column:span 4}.about-numbers article:nth-child(2),.about-numbers article:nth-child(3),.about-numbers article:nth-child(5),.about-numbers article:nth-child(6){grid-column:span 2}.about-numbers strong{font-size:96px;line-height:.8}.about-numbers span{max-width:220px;margin-top:30px;font:500 12px/1.4 SimplonMono,monospace;text-transform:uppercase}
.about-founders{min-height:1402px;padding-top:150px;color:#fff;background:var(--a-dark)}.about-founders>div{margin-top:82px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.about-founders article{position:relative;height:850px;overflow:hidden;border-radius:36px 36px 36px 0}.about-founders article>img{width:100%;height:100%;object-fit:cover}.about-founders article::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(27,12,11,.9))}.about-founders article>section{position:absolute;left:42px;right:42px;bottom:42px;z-index:1}.about-founders small{font:500 11px/1 SimplonMono,monospace;text-transform:uppercase}.about-founders h3{margin-top:18px;font-size:46px}.about-founders article p{max-width:480px;margin-top:16px;color:rgba(255,255,255,.7)}
.about-storyline{min-height:946px;padding-top:150px;overflow:hidden}.about-storyline ol{margin:80px 0 0;padding:0;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;list-style:none}.about-storyline li{min-width:620px;min-height:470px;padding:42px;display:flex;flex-direction:column;border:1px solid var(--a-line);border-radius:32px 32px 32px 0;scroll-snap-align:start}.about-storyline li>span{font:500 13px/1 SimplonMono,monospace;text-transform:uppercase}.about-storyline li>div{margin-top:auto}.about-storyline h3{font-size:38px}.about-storyline li p{margin-top:14px;color:#74676d}
.about-values{min-height:2441px;padding-top:150px;display:grid;grid-template-columns:.38fr .62fr;gap:48px;align-items:start;color:#fff;background:#69342d}.about-values>header{position:sticky;top:160px}.about-values>div{display:grid;gap:16px}.about-values article{min-height:616px;position:relative;overflow:hidden;padding:34px;border:1px solid rgba(255,255,255,.2);border-radius:32px 32px 32px 0}.about-values img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18}.about-values h3{position:relative;margin-top:420px;font-size:44px}.about-values article p{position:relative;margin-top:18px;color:rgba(255,255,255,.72)}
.about-contact{position:relative;min-height:813px;display:grid;place-items:center;overflow:hidden;color:#fff;background:var(--a-dark);isolation:isolate}.about-contact>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}.about-contact::after{content:"";position:absolute;inset:0;background:rgba(27,12,11,.7);z-index:-2}.about-contact>div{text-align:center}.about-contact>div>section{margin-top:42px;display:flex;justify-content:center;gap:10px}.about-contact a{min-height:60px;display:inline-flex;align-items:center;padding:0 26px;border:1px solid rgba(255,255,255,.35);border-radius:31px;color:#fff}.about-contact a:first-child{color:var(--a-ink);background:#fff}
.about-learn{min-height:547px;padding:90px 32px;display:grid;grid-template-columns:360px 1fr;gap:56px;background:#fff}.about-learn h2{margin-top:22px;font-size:46px;line-height:1}.about-learn header>a{display:inline-block;margin-top:28px;color:var(--a-purple)}.about-learn>div{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory}.about-learn>div>a{min-width:310px;color:var(--a-ink);scroll-snap-align:start}.about-learn img{width:100%;height:230px;object-fit:cover;border-radius:24px 24px 24px 0}.about-learn span{display:block;margin-top:16px;font-size:18px}
@media(max-width:730px){.about-hero{height:100svh}.about-hero>section{padding:110px 16px 30px}.about-hero h1{font-size:32px;line-height:1.125}.about-hero span{font-size:18px}.about-intro{min-height:623px;padding:130px 16px 0}.about-intro>h2,.about-numbers h2,.about-founders h2,.about-storyline h2,.about-values h2,.about-contact h2{font-size:32px;line-height:1.125}.about-intro>h2{margin-top:80px}.about-mission{min-height:4051px}.about-mission h2{font-size:32px;line-height:1.125}.about-numbers{min-height:3493px;padding:92px 16px 0}.about-numbers>div{grid-template-columns:repeat(2,1fr);grid-auto-rows:330px;gap:16px}.about-numbers article:nth-child(1),.about-numbers article:nth-child(4){grid-column:1/-1}.about-numbers article:nth-child(2),.about-numbers article:nth-child(3),.about-numbers article:nth-child(5),.about-numbers article:nth-child(6){grid-column:span 1}.about-numbers strong{font-size:68px}.about-founders{min-height:1222px;padding:92px 16px 0}.about-founders>div{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.about-founders article{min-width:358px;height:850px;scroll-snap-align:start}.about-storyline{min-height:560px;padding:30px 16px 0}.about-storyline ol{margin:16px -16px 0;padding-left:16px}.about-storyline li{min-width:345px;min-height:260px}.about-values{min-height:1360px;padding:92px 16px 0;display:block}.about-values>header{position:static}.about-values>div{margin-top:52px}.about-values article{min-height:268px}.about-values h3{margin-top:145px}.about-contact{min-height:515px}.about-contact>div{padding:50px 16px}.about-contact>div>section{display:grid}.about-learn{min-height:542px;padding:50px 16px;grid-template-columns:1fr;gap:20px}.about-learn>div{margin-inline:-16px;padding-left:16px}.about-learn>div>a{min-width:290px}.about-learn img{height:180px}}

/* Cleo Company modules keep media and metric cards softly rounded on every corner. */
.about-numbers article,.about-founders article,.about-storyline li,.about-values article,.about-learn img{border-radius:32px}
@media(max-width:730px){.about-founders article,.about-storyline li,.about-values article,.about-learn img{border-radius:28px}}
.about-story-page{overflow-x:clip}.about-story{overflow:visible}
.about-founders article,.about-values article,.about-learn a{transition:transform .38s cubic-bezier(.16,1,.3,1)}
.about-founders article>img,.about-values img,.about-learn img{transition:transform .55s cubic-bezier(.16,1,.3,1)}
.about-founders article:hover,.about-values article:hover,.about-learn a:hover{transform:translateY(-4px)}
.about-founders article:hover>img,.about-values article:hover img,.about-learn a:hover img{transform:scale(1.025)}
.about-contact a,.about-learn header>a{transition:background-color .2s,color .2s,transform .2s}
.about-contact a:hover,.about-learn header>a:hover{transform:translateY(-2px)}
.about-story-page :focus-visible{outline:3px solid #c6a7ff;outline-offset:4px}
.about-motion-ready .about-reveal{opacity:0;transform:translateY(28px);transition:opacity .68s cubic-bezier(.16,1,.3,1) var(--about-delay,0ms),transform .68s cubic-bezier(.16,1,.3,1) var(--about-delay,0ms)}
.about-motion-ready .about-reveal.is-about-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.about-mission h2.is-changing{animation:none}.about-founders article,.about-values article,.about-learn a,.about-founders article>img,.about-values img,.about-learn img,.about-contact a,.about-learn header>a{transition:none}.about-founders article:hover,.about-values article:hover,.about-learn a:hover,.about-founders article:hover>img,.about-values article:hover img,.about-learn a:hover img{transform:none}}

/* Founder portraits: one real photograph, one reserved slot until the owner supplies theirs.
   The pending slot holds the same box as the photo so the row geometry never shifts when the
   real file lands - drop it in and swap the element, nothing else moves. */
.about-founders .founder-portrait { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 28px 28px 28px 0; display: block; }
.about-founders .founder-portrait--pending {
  display: grid;
  place-items: center;
  border: 1px dashed rgba(62, 36, 111, .28);
  background: linear-gradient(155deg, rgba(238, 234, 229, .9), rgba(248, 246, 242, .9));
  color: #6e686f;
}
.about-founders .founder-portrait--pending span { font: 500 12px/1.2 SimplonMono, monospace; letter-spacing: .1em; text-transform: uppercase; }
.about-numbers__note { max-width: 720px; margin: 22px auto 0; color: #6e686f; font-size: 12px; line-height: 1.5; text-align: center; }

/* Product examples use live text, not blank phones or reused photographs. */
.about-story-page .about-learn{min-height:0;padding:64px 32px;grid-template-columns:1fr;gap:32px;color:#242128}
.about-story-page .about-learn h2{margin:16px 0 0;max-width:18ch;font-weight:400;letter-spacing:-.04em;color:#242128}
.about-story-page .about-learn>div.about-learn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;overflow:visible;margin:0;padding:0}
.about-story-page .about-learn-grid>a{min-width:0;display:block;color:#242128;text-decoration:none}
.about-story-page .about-learn-card h3{font-size:25px;font-weight:500;line-height:1.15;margin:22px 0 12px;letter-spacing:-.025em}
.about-story-page .about-learn-card>p{font-size:17px;line-height:1.5;color:#5b565f;margin:0 0 18px}
.about-story-page .about-learn-card>b{font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:5px;color:#432777}
.about-example{min-height:285px;padding:24px;border-radius:28px;border:1px solid #ddd5e4;background:#f2edf7;color:#242128;display:flex;flex-direction:column;gap:16px}
.about-example>small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#625b68}.about-example>strong{font-size:22px;font-weight:500}
.about-example p{font-size:16px;line-height:1.4;margin:0}.about-chat-question{padding:12px 16px;background:#ddd1ee;border-radius:18px 18px 4px 18px}.about-chat-answer{padding:12px 16px;background:#fff;border-radius:18px 18px 18px 4px}
.about-example--report{background:#f3efe7}.about-example ol{padding:0;margin:0;list-style-position:inside}.about-example li{padding:12px 0;border-bottom:1px solid #d8d0c3;font-size:16px}
.about-example--practice{background:#eaf0e9}.about-practice-count{font-size:64px;line-height:1;letter-spacing:-.05em}.about-practice-count small{display:block;font-size:15px;line-height:1.5;letter-spacing:0;margin-top:10px;color:#4e5c4d}
.about-learn-card:focus-visible{outline:3px solid #432777;outline-offset:6px;border-radius:8px}
@media(max-width:850px){.about-story-page .about-learn>div.about-learn-grid{grid-template-columns:1fr}.about-story-page .about-learn{padding:40px 20px}.about-example{min-height:0;padding:24px}.about-story-page .about-learn-grid>a{padding-bottom:24px}.about-story-page .about-learn h2{font-size:38px}}

.about-founders .founder-portrait{object-position:center top}.about-story-page{--a-ink:#27242b}
@media(max-width:730px){.about-hero>picture img{object-position:72% center}.about-hero>div{background:linear-gradient(0deg,rgba(20,22,25,.88),rgba(20,22,25,.08) 85%)}.about-hero{align-items:end}.about-hero>section{position:relative;padding:110px 24px 40px}}

/* 2026-09-12: content determines section length; mission retains one viewport of scroll. */
.about-story-page .about-story {overflow:clip;}
.about-story-page :is(.about-intro,.about-numbers,.about-founders,.about-storyline,.about-values,.about-contact) {min-height:0;padding-top:80px;padding-bottom:80px;}
.about-story-page .about-mission {min-height:200vh;min-height:200svh;}
.about-story-page .about-mission>div {height:100vh;height:100svh;box-sizing:border-box;}
.about-story-page .about-numbers>div {margin-top:48px;grid-auto-rows:minmax(240px,auto);}
.about-story-page .about-values article {min-height:360px;display:flex;flex-direction:column;justify-content:flex-end;}
.about-story-page .about-values h3 {margin-top:120px;}
.about-story-page .about-storyline ol {margin-top:48px;}
.about-story-page .about-storyline li {min-height:300px;}
@media(max-width:760px){
 .about-story-page :is(.about-intro,.about-numbers,.about-founders,.about-storyline,.about-values,.about-contact) {padding-top:48px;padding-bottom:48px;}
 .about-story-page .about-intro>h2 {margin-top:28px;}
 .about-story-page .about-numbers>div {margin-top:32px;grid-auto-rows:minmax(190px,auto);}
 .about-story-page .about-storyline ol {margin-top:28px;}
 .about-story-page .about-storyline li {min-height:260px;}
 .about-story-page .about-values article {min-height:280px;}
 .about-story-page .about-values h3 {margin-top:100px;}
}

/* Keep explanatory About copy neutral on the light surface. */
.about-story-page .about-intro>div>p{color:#514d55!important;}
/* UI sweep 3 (2026-09-24): show the value-card photos clearly and keep the copy readable on a dark lower scrim. */
.about-story-page .about-values img{opacity:1;z-index:0}
.about-story-page .about-values article::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(to top,rgba(24,14,40,.86) 0%,rgba(24,14,40,.45) 42%,rgba(24,14,40,0) 68%);pointer-events:none}
.about-story-page .about-values article h3,.about-story-page .about-values article p{z-index:1;color:#fff}
.about-story-page .about-values article p{color:rgba(255,255,255,.86)}