/* theblackit — shared page styles (layout lives inline in the HTML, as in the design source) */
:root{--accent:#FF5A28}
body{margin:0;background:#0B111B}
a{color:#EDE6D6;text-decoration:none}
a:hover{color:#FFFFFF}
.g-card{background:linear-gradient(180deg,#151D2A 0%,#0D131D 100%);border:1px solid rgba(237,230,214,0.09);box-shadow:inset 0 1px 0 rgba(237,230,214,0.06)}
.g-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:999px;background:rgba(14,20,31,0.8);border:1px solid rgba(237,230,214,0.14);font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#C3BDB0}
.g-dot{width:18px;height:18px;border-radius:50%;background:#EDE6D6;display:inline-flex;align-items:center;justify-content:center}
.g-pearl{background:linear-gradient(100deg,#FFF8EC 0%,#F4E6FF 35%,#FFE9E0 65%,#E6F7FF 100%);color:#0B111B}
.g-glowtext{text-shadow:0 0 18px rgba(255,236,200,0.55),0 0 42px rgba(255,220,170,0.25)}
.g-input{padding:16px 18px;border-radius:14px;border:1px solid rgba(237,230,214,0.14);background:#0A0F18;color:#EDE6D6;font-family:'Geist',sans-serif;font-size:16px}
.g-input::placeholder{color:#7E8188}
@keyframes gspin{to{transform:rotate(360deg)}}
@keyframes gfloat{50%{transform:translateY(-8px)}}
@keyframes gtw{50%{opacity:.15}}
.g-spin{animation:gspin 70s linear infinite}
.g-spin-rev{animation:gspin 100s linear infinite reverse}
.g-float{animation:gfloat 6s ease-in-out infinite}
.g-tw{animation:gtw 3s ease-in-out infinite}
.o-orb{position:absolute;pointer-events:none;transform:rotate(var(--a));animation:oSpin 80s linear infinite}
.o-orb.o-rev{animation:oSpinRev 110s linear infinite}
.o-pin{position:absolute;top:0;left:50%;transform:translate(-50%,-50%)}
.o-up{pointer-events:auto;transform:rotate(calc(-1 * var(--a)));animation:oUp 80s linear infinite}
.o-up.o-rev{animation:oUpRev 110s linear infinite}
@keyframes oSpin{from{transform:rotate(var(--a))}to{transform:rotate(calc(var(--a) + 360deg))}}
@keyframes oSpinRev{from{transform:rotate(var(--a))}to{transform:rotate(calc(var(--a) - 360deg))}}
@keyframes oUp{from{transform:rotate(calc(-1 * var(--a)))}to{transform:rotate(calc(-1 * var(--a) - 360deg))}}
@keyframes oUpRev{from{transform:rotate(calc(-1 * var(--a)))}to{transform:rotate(calc(-1 * var(--a) + 360deg))}}
@media (prefers-reduced-motion: reduce){.g-spin,.g-spin-rev,.g-float,.g-tw,.o-orb,.o-up{animation:none}}
.g-row{transition:background .2s}
.g-row:hover{background:rgba(237,230,214,0.04)}
.g-row:focus-visible{outline:2px solid #EDE6D6;outline-offset:-2px}
@media (prefers-reduced-motion: reduce){.g-tw{animation:none}}
.pt-img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.g-row{background:transparent;border:1px solid transparent}
.g-row .g-name{color:#7C8088}
.g-row[aria-pressed="true"]{background:linear-gradient(90deg,#26303F,#141B27);border-color:rgba(237,230,214,0.16)}
.g-row[aria-pressed="true"] .g-name{color:#FFFFFF}

/* ---------- Small motions ---------- */
html{scroll-behavior:smooth;scroll-padding-top:24px}
a,button{transition:color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .25s ease,opacity .2s ease,transform .25s cubic-bezier(.21,.47,.32,.98)}
a.g-card:hover{transform:translateY(-4px);border-color:rgba(237,230,214,0.24);box-shadow:inset 0 1px 0 rgba(237,230,214,0.06),0 18px 40px -18px rgba(0,0,0,0.7)}
.g-pearl:hover,a[style*="border-radius: 999px"]:not(.o-up):hover,button[style*="border-radius: 999px"]:hover{transform:translateY(-2px)}
.site-nav a:hover{transform:none}
.site-nav a:not([aria-current]):hover{background:rgba(237,230,214,0.08)}
.g-name{transition:color .25s ease}
.g-input{transition:border-color .2s ease,box-shadow .2s ease}
.g-input:focus{outline:none;border-color:rgba(237,230,214,0.45);box-shadow:0 0 0 3px rgba(237,230,214,0.08)}
.pt-img{transition:transform .5s cubic-bezier(.21,.47,.32,.98)}
a.g-card:hover .pt-img{transform:scale(1.04)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}a,button,.pt-img,.site-nav,.nav-scrim{transition:none}}

/* Hero orbit can be spun by hand with a mouse */
.orbit a{transition-property:color,background-color,border-color,box-shadow}
@media (hover:hover) and (pointer:fine){
.orbit{cursor:grab;-webkit-user-select:none;user-select:none}
.orbit.dragging,.orbit.dragging *{cursor:grabbing!important}
}
.orbit.dragging *{animation-play-state:paused!important}

/* ---------- Screen sizes ---------- */
html{-webkit-text-size-adjust:100%}
.nav-toggle{display:none}

/* Closing scene: its heading and buttons always sit in front of the leaf silhouettes */
.finale{z-index:1}
@media (max-width:899px){.leaves{height:210px!important}}

/* Card rows: avoid a lone card on its own row at in-between widths */
@media (min-width:600px) and (max-width:1159px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (min-width:640px) and (max-width:979px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))!important}.grid-3>:last-child{grid-column:1/-1}}
@media (min-width:641px) and (max-width:1289px){.team-grid{grid-template-columns:repeat(3,188px)!important}}

/* Founders roll call below laptop width: the long name list becomes a compact row of portrait
   tiles with the profile directly underneath, so picking someone never means scrolling away */
.g-thumb{display:none}
@media (max-width:1031px){
.roll-list{flex:1 1 100%!important;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.roll-list li{display:flex}
.roll-list .g-row{flex-direction:column;flex-wrap:nowrap!important;align-items:stretch!important;justify-content:flex-start;gap:6px!important;min-height:0!important;padding:8px 8px 12px!important;border-radius:14px!important}
.g-num{display:none}
.g-thumb{display:block;position:relative;aspect-ratio:4/5;margin-bottom:4px;border-radius:9px;overflow:hidden;background:linear-gradient(180deg,#243044 0%,#182131 60%,#121925 100%);opacity:.62;transition:opacity .2s}
.g-thumb img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.g-row:hover .g-thumb,.g-row[aria-pressed="true"] .g-thumb{opacity:1}
.roll-list .g-name{flex:none!important;font-size:15px!important;font-weight:600!important;letter-spacing:-0.01em!important;line-height:1.2!important}
.roll-list .g-role{font-family:'Geist',sans-serif!important;font-size:11px!important;letter-spacing:0!important;line-height:1.3;color:#8F918C!important}
.f-card{flex:1 1 100%!important}
}
@media (min-width:600px) and (max-width:1031px){
.f-card{display:grid!important;grid-template-columns:auto minmax(0,1fr);column-gap:32px!important;align-content:start}
.f-card>*{grid-column:2}
.f-card>.f-top{grid-column:1;grid-row:1 / span 4;flex-direction:column;justify-content:flex-start!important}
.f-card>.f-top>span{text-align:left!important}
}

/* Phones: one founder per row (photo, name, role). Tapping a row opens that person's details
   right under it, so there is no separate card to scroll to */
@media (max-width:699px){
.roll-list{grid-template-columns:minmax(0,1fr);gap:4px}
.roll-list li{display:block}
.roll-list .g-row{display:grid!important;grid-template-columns:54px minmax(0,1fr) 16px;column-gap:14px;row-gap:3px!important;align-items:center!important;padding:10px 14px 10px 10px!important}
.g-thumb{grid-column:1;grid-row:1 / span 2;width:54px;aspect-ratio:1;margin:0;border-radius:12px;opacity:1}
.roll-list .g-name{grid-column:2;grid-row:1;align-self:end;font-size:18px!important}
.roll-list .g-role{grid-column:2;grid-row:2;align-self:start;font-size:12.5px!important}
.g-row::after{content:"";grid-column:3;grid-row:1 / span 2;justify-self:center;width:8px;height:8px;border-right:1.5px solid #8F918C;border-bottom:1.5px solid #8F918C;transform:translateY(-2px) rotate(45deg);transition:transform .25s ease}
.g-row[aria-pressed="true"]::after{transform:translateY(2px) rotate(-135deg);border-color:#EDE6D6}
.roll-list .f-card{display:flex!important;flex:none!important;box-sizing:border-box;gap:14px!important;padding:16px 12px 20px!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;overflow:hidden!important}
.roll-list .f-card>.f-top,.roll-list .f-card>div[aria-hidden="true"]{display:none!important}
.roll-list .f-card h2{font-size:22px!important}
.roll-list .f-card h2+p{font-size:17px!important}
.roll-list .f-card>p{font-size:15px!important}
}

/* Small laptops: keep the hero as text beside the orbit rather than stacking with an empty side */
@media (min-width:900px) and (max-width:1100px){.hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:24px!important}}

/* Boarding pass: once the stub drops below the pass, tear along the top instead of the side */
@media (max-width:899px){.pass-stub{border-left:0!important;border-top:1px dashed rgba(237,230,214,0.22)}}

/* Tablet and below: the link pill becomes a menu behind a button. It floats over the page
   (nothing underneath moves) and only fades and slides, which the browser can do smoothly */
@media (max-width:979px){
.site-header{gap:12px!important;row-gap:0!important}
.site-cta{order:2;margin-left:auto}
.nav-toggle{order:3;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(237,230,214,0.2);background:rgba(10,16,26,0.55);cursor:pointer}
.nav-toggle span{width:16px;height:1.5px;border-radius:2px;background:#EDE6D6;transition:transform .2s ease}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.site-header{z-index:60}
.site-nav{position:fixed;z-index:61;top:72px;left:16px;right:16px;display:flex!important;flex-direction:column;flex-wrap:nowrap!important;align-items:stretch!important;gap:2px!important;padding:8px!important;border-radius:22px!important;background:#0A101A!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:0 24px 60px -12px rgba(0,0,0,0.75);transform-origin:100% 0;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px) scale(.97);transition:opacity .2s ease,transform .28s cubic-bezier(.21,.47,.32,.98),visibility 0s linear .28s;will-change:opacity,transform}
.site-nav.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
.nav-scrim{position:fixed;inset:0;z-index:50;background:rgba(5,8,13,0.62);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
.nav-scrim.open{opacity:1;visibility:visible;transition-delay:0s}
html.nav-open{overflow:hidden}
.site-nav a{padding:14px 16px!important;font-size:16px}
}

/* Phones */
@media (max-width:640px){
.site-header{padding:16px 20px!important}
.sec{padding:56px 20px!important}
.hero-inner{padding:28px 20px 300px!important;gap:28px!important}
.page-hero{padding:56px 20px 20px!important}
.finale{padding:96px 20px 150px!important}
.leaves{height:170px!important}
.orbit .o-up{font-size:10.5px!important;padding:6px 10px!important;gap:6px!important}
.grid-4>li{height:340px!important}
.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.team-grid .pt{width:100%!important;height:auto!important;aspect-ratio:4/5}
}
/* Small phones: tighten the header so logo, button and menu stay on one row */
@media (max-width:420px){
.site-header{gap:8px!important;padding:14px 16px!important}
.site-header>a:first-child{gap:8px!important;font-size:17px!important}
.site-header>a:first-child>span{width:26px!important;height:26px!important}
.site-cta{padding:10px 13px!important;font-size:12.5px!important;white-space:nowrap}
.nav-toggle{width:40px;height:40px;flex:none}
.sec{padding-left:16px!important;padding-right:16px!important}
.hero-inner{padding-left:16px!important;padding-right:16px!important}
.g-chip{font-size:10px;letter-spacing:.06em}
}
@media (max-width:340px){
.site-header{gap:6px!important;padding:12px 14px!important}
.site-header>a:first-child{gap:7px!important;font-size:16px!important}
.site-header>a:first-child>span{width:24px!important;height:24px!important}
.site-cta{padding:9px 11px!important;font-size:12px!important}
.nav-toggle{width:38px;height:38px}
.g-chip{font-size:9.5px;letter-spacing:.04em;padding-right:11px}
}
/* The orbit gets crowded on the narrowest phones: drop the inner-ring label, keep the products */
@media (max-width:380px){.orbit .o-orb.o-rev{display:none}.orbit .o-up{font-size:10px!important;padding:6px 9px!important}}

/* Moving between pages: cross-fade instead of a hard cut, and keep the scrollbar's space so nothing shifts sideways */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s;animation-timing-function:ease}
html{scrollbar-gutter:stable;background:#0B111B}
@media (prefers-reduced-motion: reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* Loading screen: a small version of the hero orbit over the same dusk sky */
.loader{display:none;position:fixed;inset:0;z-index:100;flex-direction:column;align-items:center;justify-content:center;gap:34px;background:radial-gradient(ellipse 70% 45% at 50% 100%,rgba(236,196,152,0.22),transparent 70%),linear-gradient(180deg,#0A1220 0%,#121D2F 55%,#1F2A3A 85%,#2B3240 100%);transition:opacity .5s ease,visibility .5s}
.loader::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,#FFF4DE 1px,transparent 1.5px),radial-gradient(circle,#FFF4DE 1px,transparent 1.5px),radial-gradient(circle,#FFF4DE .6px,transparent 1.2px);background-size:470px 390px,610px 530px,730px 310px;background-position:60px 80px,340px 210px,190px 140px;opacity:.5;animation:gtw 3s ease-in-out infinite}
.loader-text{position:relative;margin:0;font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#C3BDB0}
.loader-text span{animation:loaderDot 1.2s ease-in-out infinite}
.loader-text span:nth-child(2){animation-delay:.2s}
.loader-text span:nth-child(3){animation-delay:.4s}
@keyframes loaderDot{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes gtw{50%{opacity:.15}}
html.loading .loader{display:flex;animation:loaderBye .5s 6s forwards}
html.loader-done .loader{opacity:0;visibility:hidden}
.loader-orbit{position:relative;width:210px;height:210px}
.loader-ring{position:absolute;border-radius:50%}
.loader-ring span{position:absolute;border-radius:50%;background:#EDE6D6}
.loader-ring-outer{inset:0;border:1px dashed rgba(237,230,214,0.32);animation:gspin 2.8s linear infinite}
.loader-ring-outer span{top:-5px;left:50%;width:9px;height:9px;margin-left:-4px;box-shadow:0 0 12px rgba(255,236,200,0.8)}
.loader-ring-outer .loader-accent{top:auto;bottom:-4px;width:7px;height:7px;background:var(--accent);box-shadow:none}
.loader-ring-inner{inset:13%;border:1px solid rgba(237,230,214,0.16);animation:gspin 4s linear infinite reverse}
.loader-ring-inner span{top:50%;left:-3px;width:6px;height:6px}
.loader-core{position:absolute;inset:27%;border-radius:50%;background:radial-gradient(circle at 40% 30%,#1A2130,#05080D 70%);border:1px solid rgba(237,230,214,0.14);box-shadow:0 0 50px rgba(246,194,122,0.18);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;animation:loaderPulse 1.8s ease-in-out infinite}
.loader-the{font-family:'Geist Mono',monospace;font-size:7px;letter-spacing:.16em;text-transform:uppercase;color:#9C9A92}
.loader-word{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:19px;letter-spacing:-0.06em;line-height:.9;color:#EDE6D6}
.loader-word span{color:var(--accent)}
@keyframes gspin{to{transform:rotate(360deg)}}
@keyframes loaderPulse{50%{box-shadow:0 0 70px rgba(246,194,122,0.34)}}
@keyframes loaderBye{to{opacity:0;visibility:hidden}}

/* Scroll: progress line and sections easing in as they arrive */
.scroll-progress{position:fixed;top:0;left:0;right:0;z-index:90;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.reveal{opacity:0;transform:translateY(28px) scale(.985);transition:opacity .7s ease var(--reveal-delay,0ms),transform .7s cubic-bezier(.21,.47,.32,.98) var(--reveal-delay,0ms)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.loader-ring,.loader-core,.loader::before,.loader-text span{animation:none}.reveal{opacity:1;transform:none;transition:none}.scroll-progress{display:none}}