@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");

/* Cielibre Design System tokens, consumed directly. Local aliases below map
   DS semantic tokens onto this site's names — do not hardcode hex here. */
:root{
--ink:var(--text-primary);
--mute:var(--neutral-600);
--faint:var(--neutral-500);
--line:var(--border-default);
--paper:var(--surface-page);
--tonal:var(--surface-tonal-1);
--red:var(--accent)
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-16)}
.disp{font-family:var(--font-display);font-weight:var(--fw-display-headline);letter-spacing:var(--ls-display);line-height:var(--lh-tight)}
.eyebrow{margin:0;font-weight:400;font-size:var(--text-caption);letter-spacing:var(--ls-caption);text-transform:uppercase;color:var(--faint)}
section{border-bottom:var(--border-width) solid var(--line)}
.rule{width:52px;height:3px;background:var(--red);margin:var(--space-10) 0 var(--space-8)}

nav{border-bottom:var(--border-width) solid var(--line);position:sticky;top:0;background:color-mix(in oklch,var(--paper) 94%,transparent);backdrop-filter:blur(8px);z-index:10}
nav .wrap{display:flex;justify-content:space-between;align-items:center;height:76px}
.navname{font-family:var(--font-display);font-weight:var(--fw-display-headline);font-size:var(--text-heading-m);letter-spacing:var(--ls-display);color:var(--ink)}
.navlinks{display:flex;gap:var(--space-8);align-self:stretch;align-items:stretch;font-size:var(--text-body-m)}
.navlinks a{color:var(--mute);display:flex;align-items:center;position:relative}
.navlinks a:hover,.navlinks a.on{color:var(--ink)}
.navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .14s}
.navlinks a.on::after,.navlinks a:hover::after{transform:scaleX(1)}
.navlinks a:hover:not(.on)::after{background:var(--aluminum-300,var(--line))}

.pagehead{padding:var(--space-24) 0 var(--space-16)}
.pagehead h1{font-size:var(--text-display-xl);margin:0}
.pagehead p{font-size:var(--text-body-l);line-height:var(--lh-relaxed);color:var(--mute);max-width:62ch;margin:var(--space-5) 0 0}

.hero{padding:calc(var(--space-24) * 1.4) 0 var(--space-24)}
.hero h1{font-size:var(--text-display-xl);margin:0;max-width:15ch}
.hero p{font-size:var(--text-body-l);line-height:var(--lh-relaxed);color:var(--mute);max-width:60ch;margin:0}

.aud{padding:var(--space-24) 0}
.audhead{font-family:var(--font-display);font-weight:var(--fw-display-headline);font-size:var(--text-display-s,40px);letter-spacing:var(--ls-display);margin:var(--space-3) 0 0;color:var(--ink)}
.audgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);margin-top:var(--space-10)}
.card{display:flex;flex-direction:column;background:var(--tonal);padding:var(--space-10) var(--space-8);border:var(--border-width) solid var(--line);border-radius:var(--radius-lg);text-decoration:none;color:inherit;transition:transform .12s,box-shadow .12s,background .12s,border-color .12s}
.card:hover{background:var(--paper);border-color:var(--border-metal,var(--line));transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.card:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.card h3{font-family:var(--font-display);font-weight:var(--fw-display-headline);font-size:var(--text-heading-l,26px);margin:0 0 var(--space-4);color:var(--ink);line-height:1.15}
.card p{margin:0 0 var(--space-6);font-size:var(--text-body-m);line-height:var(--lh-relaxed);color:var(--mute);flex:1}
.cardcta{font-size:var(--text-body-s);font-weight:600;color:var(--red);display:inline-flex;align-items:center;gap:8px}
.cardcta::after{content:"→";transition:transform .12s}
.card:hover .cardcta::after{transform:translateX(4px)}
.card.feature{border-top:3px solid var(--red)}

.invest{padding:var(--space-24) 0;background:var(--tonal)}
.investsub{font-size:var(--text-body-l);line-height:var(--lh-relaxed);color:var(--mute);max-width:64ch;margin:var(--space-5) 0 0}
.investgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);margin-top:var(--space-10)}
.card.alt{background:var(--paper)}
.card.alt:hover{background:var(--paper)}
.investgrid.three{grid-template-columns:repeat(3,1fr)}
.spread{padding-bottom:var(--space-12);margin-bottom:var(--space-4);border-bottom:var(--border-width) solid var(--line)}
.spreadrow{display:grid;gap:var(--space-5);margin-top:var(--space-4);padding-top:var(--space-5);border-top:2px solid var(--red)}
.spreadrow.four{grid-template-columns:repeat(4,1fr)}
.spreadrow.five{grid-template-columns:repeat(5,1fr)}
.spreadrow b{display:block;font-family:var(--font-display);font-weight:var(--fw-display-headline);font-size:var(--text-heading-s);color:var(--ink);margin-bottom:6px;line-height:1.2}
.spreadrow span{font-size:var(--text-body-s);color:var(--mute);line-height:var(--lh-relaxed)}

.holdings{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:var(--space-8);padding-top:var(--space-6);border-top:2px solid var(--red)}
.holdings b{display:block;font-family:var(--font-display);font-weight:var(--fw-display-headline);font-size:var(--text-heading-s);color:var(--ink);margin-bottom:6px}
.holdings span{font-size:var(--text-body-s);color:var(--mute);line-height:var(--lh-relaxed)}
.investnote{margin-top:var(--space-8);padding-left:var(--space-5);border-left:2px solid var(--line);font-size:var(--text-body-s);color:var(--faint);line-height:var(--lh-relaxed);max-width:70ch}

.nums{padding:var(--space-24) 0;background:var(--tonal)}
.numgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-10);margin-top:var(--space-12)}
.num{font-family:var(--font-display);font-weight:var(--fw-display-subhead);font-size:56px;line-height:1;letter-spacing:var(--ls-display)}
.num.accent{color:var(--red)}
.numlab{font-size:var(--text-body-m);color:var(--mute);margin-top:var(--space-3);line-height:var(--lh-normal);max-width:22ch}

.meth{padding:var(--space-24) 0}
.methgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-12);margin-top:var(--space-12)}
.methnum{font-family:var(--font-display);font-weight:var(--fw-display-subhead);font-size:var(--text-body-m);color:var(--red);letter-spacing:var(--ls-caption)}
.meth h3{font-family:var(--font-display);font-weight:var(--fw-display-headline);font-size:var(--text-heading-l);margin:var(--space-4) 0 var(--space-3)}
.meth p{margin:0;font-size:var(--text-body-m);line-height:var(--lh-relaxed);color:var(--mute)}

.bio{padding:var(--space-24) 0 calc(var(--space-24) + var(--space-4))}
.biogrid{display:grid;grid-template-columns:1fr 300px;gap:var(--space-20);align-items:start}
.bio p{font-size:var(--text-body-m);line-height:1.8;color:var(--mute);margin:0 0 var(--space-5);max-width:64ch}
.bio p:first-of-type{color:var(--ink);font-size:var(--text-body-l)}

.btns{display:flex;gap:var(--space-3);margin-top:var(--space-8);flex-wrap:wrap}
.btn{border:var(--border-width) solid var(--ink);border-radius:var(--radius-md);padding:var(--space-3) var(--space-6);font-size:var(--text-body-m);color:var(--ink);transition:all .12s}
.btn:hover{background:var(--ink);color:var(--text-on-inverse)}
.btn:active{transform:scale(.98)}
.btn.pri{background:var(--ink);color:var(--text-on-inverse)}
.btn.pri:hover{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}

.slot{background:var(--tonal);border:var(--border-width) solid var(--line);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:var(--text-caption);text-align:center;line-height:var(--lh-normal);padding:var(--space-3)}
.portrait{width:300px;height:360px}
.slot img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.slot.filled{padding:0;overflow:hidden}
.slot.filled img{width:100%;height:100%;object-fit:cover}
.logos .slot{padding:var(--space-3)}
.logos .slot img{filter:grayscale(1);opacity:.75;transition:filter .12s,opacity .12s}
.logos .slot:hover img{filter:grayscale(0);opacity:1}

.role{display:grid;grid-template-columns:130px 1fr;gap:var(--space-10);padding:var(--space-8) 0;border-top:var(--border-width) solid var(--line)}
.role:last-of-type{border-bottom:var(--border-width) solid var(--line)}
.roleyr{font-size:var(--text-body-m);color:var(--faint);padding-top:4px}
.role h3{font-family:var(--font-display);font-weight:var(--fw-display-headline);font-size:var(--text-heading-l);margin:0 0 4px}
.roleorg{font-size:var(--text-body-m);color:var(--mute);margin-bottom:var(--space-4)}
.role ul{margin:0;padding-left:18px}
.role li{font-size:var(--text-body-m);line-height:1.75;color:var(--mute);margin-bottom:7px}
.exit{margin-top:var(--space-4);padding-left:var(--space-4);border-left:2px solid var(--red);font-size:var(--text-body-m);line-height:var(--lh-relaxed);color:var(--mute)}

.psec{padding:var(--space-20) 0}
.psec.alt{background:var(--tonal)}
.pshead{display:flex;gap:var(--space-5);align-items:baseline;margin-bottom:var(--space-2)}
.psnum{font-family:var(--font-display);font-weight:var(--fw-display-subhead);font-size:var(--text-body-m);color:var(--red);letter-spacing:var(--ls-caption)}
.pshead h2{font-family:var(--font-display);font-weight:var(--fw-display-headline);font-size:var(--text-display-l);margin:0;letter-spacing:var(--ls-display)}
.pssub{font-size:var(--text-body-m);line-height:var(--lh-relaxed);color:var(--mute);max-width:62ch;margin:0 0 var(--space-10)}

table.playbook{width:100%;border-collapse:collapse;font-size:var(--text-body-s);margin-top:var(--space-4)}
table.playbook th{padding:0 var(--space-4) var(--space-3);font-size:var(--text-caption);letter-spacing:var(--ls-caption);text-transform:uppercase;color:var(--faint);font-weight:500;text-align:left;border-bottom:var(--border-width) solid var(--line)}
table.playbook th:last-child{text-align:right}
table.playbook td{padding:var(--space-4);border-top:var(--border-width) solid var(--line);line-height:var(--lh-relaxed);vertical-align:top}
table.playbook tbody tr:nth-child(odd){background:var(--tonal)}
table.playbook td:first-child{font-weight:600;color:var(--ink);width:19%}
table.playbook td:nth-child(2){color:var(--mute)}
table.playbook td.now{text-align:right;color:var(--ink);font-weight:600;width:24%}
table.playbook tr:last-child td{border-bottom:var(--border-width) solid var(--line)}

.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-8);margin-top:var(--space-8);padding:var(--space-8) var(--space-6);background:var(--tonal);border:var(--border-width) solid var(--line);border-radius:var(--radius-md);border-top:3px solid var(--red)}
.statband .num{font-size:52px}
.statband .numlab{font-size:var(--text-body-s);color:var(--text-primary);margin-top:var(--space-2);max-width:24ch}
.statband .numlab span{color:var(--faint)}

table.metrics{width:100%;border-collapse:collapse;font-size:var(--text-body-m);margin-top:var(--space-8)}
table.metrics th{padding:0 var(--space-4) var(--space-3);font-size:var(--text-caption);letter-spacing:var(--ls-caption);text-transform:uppercase;color:var(--faint);font-weight:500;text-align:left;border-bottom:var(--border-width) solid var(--line)}
table.metrics th:last-child{text-align:right}
table.metrics td{padding:var(--space-4);border-top:var(--border-width) solid var(--line)}
table.metrics tbody tr:nth-child(odd){background:var(--surface-tonal-1,var(--tonal))}
table.metrics tr:last-child td{border-bottom:var(--border-width) solid var(--line)}
table.metrics td.was{color:var(--faint);width:24%}
table.metrics td.now{text-align:right;color:var(--text-primary);font-weight:600;width:28%}

.charts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:var(--space-8)}
.charts figure{margin:0}
.charts img{width:100%;aspect-ratio:5/3;object-fit:contain;display:block;background:#fff;border:var(--border-width) solid var(--line);border-radius:var(--radius-md);padding:var(--space-2);box-sizing:border-box;transition:filter .12s}
.charts a:hover img{filter:brightness(.97)}
.charts figcaption{font-size:var(--text-caption);color:var(--faint);margin-top:var(--space-2);line-height:var(--lh-normal)}
.cap{font-size:var(--text-caption);color:var(--faint);margin-top:var(--space-2)}

.years{display:flex;gap:var(--space-2);align-items:flex-end;margin-top:var(--space-4)}
.yr{flex:1;text-align:center}
.yrbar{height:80px;background:var(--aluminum-200);border-radius:var(--radius-sm);transition:background .12s;display:block}
.yr a:hover .yrbar{background:var(--red)}
.yrbar.off{background:transparent;border:var(--border-width) dashed var(--border-metal)}
.yrlab{font-size:var(--text-caption);color:var(--faint);margin-top:var(--space-2)}
.yrnote{font-size:var(--text-body-s);color:var(--faint);margin-top:var(--space-6)}

.logos{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3);margin-top:var(--space-4)}
.logos .slot{height:64px;font-size:10px;flex:0 0 calc((100% - 7 * var(--space-3)) / 8);box-sizing:border-box}

.tllogo{height:22px;width:auto;max-width:110px;object-fit:contain;display:block;margin-bottom:var(--space-2);filter:grayscale(1);opacity:.7;transition:filter .12s,opacity .12s}
.tl a:hover .tllogo{filter:grayscale(0);opacity:1}
.tl a{display:inline-block}

.constant{display:flex;align-items:flex-start;gap:var(--space-4);margin-top:var(--space-6);padding:var(--space-5);background:var(--tonal);border:var(--border-width) solid var(--line);border-radius:var(--radius-md)}
.constant .tllogo{height:26px;margin:0;flex:none}
.constant b{display:block;font-family:var(--font-display);font-weight:var(--fw-display-headline);font-size:var(--text-heading-s);margin-bottom:4px}
.constant span{font-size:var(--text-body-s);color:var(--mute);line-height:var(--lh-relaxed)}

figure.orgchart{margin:var(--space-4) 0 0}
figure.orgchart img{width:100%;height:auto;display:block;border-radius:var(--radius-md);border:var(--border-width) solid var(--line);background:var(--paper)}
figure.orgchart figcaption{font-size:var(--text-caption);color:var(--faint);margin-top:var(--space-2)}

.team{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:var(--space-4)}
.team figure{margin:0}
.team img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:var(--radius-md);border:var(--border-width) solid var(--line)}
.team figcaption{font-size:var(--text-caption);color:var(--faint);margin-top:var(--space-2)}

.funnel{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--space-5);margin-top:var(--space-6);align-items:start}
.funnel figure{margin:0}
.funnel img{width:100%;display:block;border:var(--border-width) solid var(--line);border-radius:var(--radius-md);transition:filter .12s}
.funnel a:hover img{filter:brightness(.96)}
.funnel figure:not(.tall) img{aspect-ratio:16/5;object-fit:contain;background:var(--paper);padding:var(--space-4)}
.funnel figure.tall img{aspect-ratio:4/5;object-fit:cover;object-position:top}
.funnel figcaption{font-size:var(--text-caption);color:var(--faint);margin-top:var(--space-3);line-height:var(--lh-relaxed)}
.funnel figcaption b{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}

figure.video{margin:var(--space-8) 0 0}
figure.video figcaption{font-size:var(--text-caption);color:var(--faint);margin-top:var(--space-2)}
.videoplay{display:block;position:relative;width:100%;padding:0;border:var(--border-width) solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:none;cursor:pointer;line-height:0}
.videoplay img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;transition:filter .12s}
.videoplay:hover img{filter:brightness(.92)}
.videoplay .playicon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;background:var(--red);box-shadow:0 4px 20px rgba(0,0,0,.28);transition:transform .12s}
.videoplay .playicon::after{content:"";position:absolute;top:50%;left:53%;transform:translate(-50%,-50%);border-style:solid;border-width:15px 0 15px 24px;border-color:transparent transparent transparent #fff}
.videoplay:hover .playicon{transform:translate(-50%,-50%) scale(1.06)}
.videoplay:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
figure.video iframe{width:100%;aspect-ratio:16/9;border:var(--border-width) solid var(--line);border-radius:var(--radius-md);display:block}

figure.hero{margin:var(--space-8) 0 0}
figure.hero img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:var(--radius-md);border:var(--border-width) solid var(--line)}
figure.hero figcaption{font-size:var(--text-caption);color:var(--faint);margin-top:var(--space-2)}

.products{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);margin-top:var(--space-4)}
.products figure{margin:0}
.products img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:var(--radius-md);border:var(--border-width) solid var(--line)}
.products figcaption{font-size:var(--text-caption);color:var(--faint);margin-top:var(--space-2);line-height:var(--lh-normal)}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);margin-top:var(--space-4)}
.tiles .slot{height:120px}

.timeline{display:grid;grid-template-columns:repeat(5,1fr);margin-top:var(--space-5)}
.tl{padding:var(--space-5) var(--space-5) 0 0;border-top:2px solid var(--border-metal)}
.tl:first-child{border-top-color:var(--red)}
.tl h4{font-family:var(--font-display);font-weight:var(--fw-display-headline);font-size:var(--text-heading-s);margin:0 0 5px}
.tl span{font-size:var(--text-body-s);color:var(--faint)}
.docs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-10)}
.doc{border:var(--border-width) solid var(--line);border-radius:var(--radius-md);padding:var(--space-5) var(--space-6);font-size:var(--text-body-m);color:var(--mute);line-height:var(--lh-relaxed)}
.doc b{font-family:var(--font-display);font-weight:var(--fw-display-headline);color:var(--ink);display:block;margin-bottom:6px}

.lead{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--space-12);align-items:start;margin-top:var(--space-4)}
.lead .slot{height:280px}
.leadlist{display:flex;flex-direction:column;gap:var(--space-3)}
.leaditem{border:var(--border-width) solid var(--line);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5)}
.leaditem b{font-family:var(--font-display);font-weight:var(--fw-display-headline);font-size:var(--text-heading-s);display:block;margin-bottom:5px;color:var(--ink)}
.leaditem span{font-size:var(--text-body-m);color:var(--mute);line-height:var(--lh-relaxed)}

.beforeafter{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);margin-top:var(--space-4)}
.beforeafter .slot{height:230px}
.memorial{margin-top:var(--space-8);padding-top:var(--space-8);border-top:var(--border-width) solid var(--line)}
.memgrid{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--space-5);margin-top:var(--space-4)}
.memgrid figure{margin:0}
.memgrid img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:var(--radius-md);border:var(--border-width) solid var(--line)}
.memquote{margin:var(--space-6) 0 0;padding-left:var(--space-5);border-left:2px solid var(--red);font-family:var(--font-display);font-weight:var(--fw-display-subhead);font-size:var(--text-heading-s);line-height:var(--lh-relaxed);color:var(--text-primary)}
.memquote span{color:var(--red)}
.memorial p{font-size:var(--text-body-m);color:var(--mute);margin:var(--space-3) 0 0;line-height:var(--lh-relaxed);max-width:62ch}

.posts{border-top:var(--border-width) solid var(--line);margin-top:var(--space-2)}
.post{display:block;padding:var(--space-8) 0;border-bottom:var(--border-width) solid var(--line);transition:padding-left .14s}
.post:hover{padding-left:var(--space-3)}
.posthead{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-8)}
.post h2{font-family:var(--font-display);font-weight:var(--fw-display-subhead);font-size:var(--text-display-m);margin:0;color:var(--ink);line-height:var(--lh-snug);letter-spacing:var(--ls-display)}
.post:hover h2{color:var(--red)}
.postmeta{font-size:var(--text-body-s);color:var(--faint);white-space:nowrap;letter-spacing:var(--ls-caption)}
.post p{font-size:var(--text-body-m);color:var(--mute);margin:var(--space-3) 0 0;line-height:var(--lh-relaxed);max-width:66ch}

footer{padding:var(--space-12) 0 var(--space-16);font-size:var(--text-body-s);color:var(--faint)}
footer .wrap{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-6)}

@media(max-width:900px){
.wrap{padding:0 var(--space-6)}
.hero{padding:var(--space-20) 0 var(--space-16)}
.pagehead{padding:var(--space-16) 0 var(--space-10)}
.num{font-size:44px}
.audgrid,.numgrid,.methgrid,.charts,.tiles,.docs{grid-template-columns:1fr}
.statband{grid-template-columns:1fr 1fr;gap:var(--space-6);padding:var(--space-6)}
.statband .num{font-size:40px}
.products,.team{grid-template-columns:1fr 1fr}
.memgrid,.funnel,.investgrid,.investgrid.three,.holdings{grid-template-columns:1fr}
.spreadrow.four,.spreadrow.five{grid-template-columns:1fr 1fr}
.biogrid,.lead,.beforeafter{grid-template-columns:1fr;gap:var(--space-8)}
.timeline{grid-template-columns:1fr 1fr}
.logos .slot{flex:0 0 calc((100% - 2 * var(--space-3)) / 3)}
.role{grid-template-columns:1fr;gap:var(--space-2)}
.navlinks{gap:var(--space-4);font-size:var(--text-body-s)}
.portrait{width:100%}
.posthead{flex-direction:column;gap:6px}
footer .wrap{flex-direction:column;gap:var(--space-2)}
}