/* ============================================================
   Archean Sciences — Engineering Living Intelligence
   ============================================================ */

:root{
  --purple:#8868C8;
  --blue:#659AF5;
  --lilac:#C6BAF2;
  --grad:linear-gradient(115deg,#659AF5 0%,#8868C8 100%);

  --ink:#070709;          /* page background */
  --ink-2:#0d0d12;        /* alt section */
  --surface:#121218;      /* cards */
  --surface-2:#17171f;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.14);

  --white:#f4f4f7;
  --grey-1:#c9c9d1;
  --grey-2:#919191;
  --grey-3:#6e6e6e;
  --grey-4:#595959;

  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--white);
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* Signal-field canvas — hero backdrop */
#bg{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;background:#000;display:block;
  transition:opacity .6s ease;
}
/* Edge vignette that focuses the sphere. Sits above the canvas but below the
   page sections, which are opaque and scroll over both. */
.hero-vignette{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  transition:opacity .6s ease;
  background:radial-gradient(ellipse 72% 72% at 50% 48%, rgba(0,0,0,0) 42%, rgba(0,0,0,.7) 100%);
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;position:relative;z-index:2}

/* ---------- Shared type ---------- */
/* Same colour ramp and keyframes as the headline, run slower so the two drift
   rather than pulsing in lockstep. */
.eyebrow{
  font-size:.96rem;font-weight:500;letter-spacing:.42em;text-transform:uppercase;
  margin-bottom:28px;
  background:linear-gradient(112deg,
    #5AA6FF 0%, #7E93FF 20%, #AE7DFF 38%, #CBB8FF 50%, #AE7DFF 62%, #7E93FF 80%, #5AA6FF 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  /* tight opaque halo first (contrast right at the glyph edge, since the type is
     small and sits on particles of the same hue), then a soft falloff */
  filter:drop-shadow(0 0 2px rgba(0,0,0,1))
         drop-shadow(0 1px 8px rgba(0,0,0,.95))
         drop-shadow(0 0 24px rgba(0,0,0,.75));
  animation:gradFlow 34s ease-in-out infinite;
}
.kicker{
  display:inline-block;font-size:1rem;font-weight:600;letter-spacing:.32em;
  text-transform:uppercase;color:var(--blue);margin-bottom:18px;
}
.grad{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.accent{color:var(--lilac);font-weight:500}

.section__title{
  font-size:clamp(1.9rem,4vw,3rem);font-weight:600;line-height:1.12;
  letter-spacing:-.02em;
}
.section__head{margin-bottom:64px;max-width:760px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:.94rem;font-weight:500;letter-spacing:.01em;
  padding:13px 26px;border-radius:100px;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),
             background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
  border:1px solid transparent;white-space:nowrap;
}
.btn--solid{
  background:var(--grad);color:#fff;
  box-shadow:0 8px 30px -8px rgba(136,104,200,.6);
}
.btn--solid:hover{transform:translateY(-2px);box-shadow:0 14px 44px -8px rgba(101,154,245,.7)}
.btn--ghost{
  background:rgba(255,255,255,.02);color:var(--white);border-color:var(--line-2);
  backdrop-filter:blur(8px);
}
.btn--ghost:hover{border-color:var(--lilac);color:#fff;background:rgba(198,186,242,.08)}
.btn--lg{padding:17px 40px;font-size:1.02rem}

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 44px;transition:background .4s ease,padding .4s ease,border-color .4s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(7,7,9,.72);backdrop-filter:blur(16px);
  padding:15px 44px;border-bottom:1px solid var(--line);
}
.nav__logo{height:50px;width:auto;transition:height .4s var(--ease)}
.nav.scrolled .nav__logo{height:42px}
.nav__links{display:flex;gap:44px}
.nav__links a{
  font-size:1.05rem;font-weight:500;color:#dcdce6;position:relative;padding:4px 0;
  transition:color .25s ease;
}
.nav__links a::after{
  content:'';position:absolute;left:0;bottom:-2px;height:1.5px;width:0;
  background:var(--grad);transition:width .3s var(--ease);
}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after{width:100%}
.nav__cta{font-size:1rem;padding:14px 30px}
.nav__toggle{display:none;flex-direction:column;gap:7px;background:none;border:0;cursor:pointer;padding:6px}
.nav__toggle span{width:30px;height:2px;background:#fff;border-radius:2px;transition:.3s var(--ease)}

/* ============ HERO ============ */
.hero{
  position:relative;z-index:2;min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:120px 24px 80px;
}
/* No scrim behind the hero text — it obscured the signal field. Legibility comes
   from shadows that hug each glyph instead, so the sphere stays fully visible. */
.hero__inner{max-width:900px;position:relative;z-index:2}
.hero__title{
  font-size:clamp(2.9rem,8vw,6.2rem);font-weight:600;line-height:1.02;
  letter-spacing:-.03em;margin-bottom:52px;
  /* NO text-shadow here. It would apply to the .grad span too, and because that
     span is transparent-filled, the shadow renders as a solid dark silhouette
     behind the letters. Each line carries its own shadow instead. */
}
/* plain white line — text-shadow is fine, the fill is opaque */
.hero__title-solid{text-shadow:0 0 3px rgba(0,0,0,.9),0 2px 12px rgba(0,0,0,.85)}
/* Headline gradient. Saturated rather than pastel — the earlier lightened stops
   read washed-out next to the brand gradient used through the rest of the page.
   Symmetric stops so the flow loops seamlessly; slower than aris because the
   type is far larger and a fast sweep across it reads as flicker. */
.hero__title .grad{
  background:linear-gradient(112deg,
    #5AA6FF 0%, #7E93FF 20%, #AE7DFF 38%, #CBB8FF 50%, #AE7DFF 62%, #7E93FF 80%, #5AA6FF 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  /* Same nature as .eyebrow, just scaled for the larger type: a tight opaque
     halo then one soft falloff. drop-shadow traces the glyphs, so no silhouette. */
  filter:drop-shadow(0 0 3px rgba(0,0,0,1))
         drop-shadow(0 2px 12px rgba(0,0,0,.85));
  animation:gradFlow 22s ease-in-out infinite;
}
.hero__cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ============ SECTIONS (over solid bg, covering canvas) ============ */
.section{position:relative;z-index:2;background:var(--ink);padding:120px 0}
/* Alternating band tint. Assigned by an explicit class, NOT :nth-of-type — the
   sections get reordered, and position-based tinting silently breaks when they do. */
.section--alt{background:var(--ink-2)}

/* First section after the hero: fades out of the black canvas so there's no seam. */
.section.statement{
  background:linear-gradient(180deg,#000 0%,var(--ink) 45%);
  padding-top:160px;
}
.statement__lead{
  font-size:clamp(1.5rem,3.4vw,2.4rem);font-weight:300;line-height:1.4;
  letter-spacing:-.01em;max-width:900px;color:var(--white);
}
.statement__body{
  font-size:clamp(1.05rem,1.6vw,1.2rem);font-weight:300;color:var(--grey-1);
  max-width:680px;margin-top:36px;line-height:1.7;
}
/* ---------- "Arche" etymology popover ----------
   Hidden until engaged: hover or keyboard focus on desktop, tap to toggle on
   touch. Never appears on its own. */
.arche-term{position:relative;display:inline-block;margin-bottom:18px}
.arche-term .kicker{margin-bottom:0}
/* font-family only — sizing/tracking come from .kicker, so this label stays
   identical to every other section kicker. */
.arche-term__trigger{
  background-color:transparent;border:0;padding:0;cursor:help;
  font-family:inherit;color:var(--blue);
  transition:color .25s ease;
}
.arche-term__trigger:hover,
.arche-term__trigger:focus-visible{color:var(--lilac)}

.arche-term__pop{
  position:absolute;top:calc(100% + 14px);left:0;z-index:20;
  display:flex;flex-direction:column;gap:6px;
  width:max-content;max-width:min(84vw,340px);padding:15px 19px 17px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:14px;
  box-shadow:0 22px 54px -18px rgba(0,0,0,.9),0 0 46px -24px rgba(136,104,200,.8);
  /* the kicker is uppercase + heavily tracked; the definition must not inherit that */
  text-align:left;text-transform:none;letter-spacing:normal;
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
.arche-term:hover .arche-term__pop,
.arche-term__trigger:focus-visible ~ .arche-term__pop,
.arche-term.is-open .arche-term__pop{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
}
.arche-term__word{font-size:1.06rem;font-weight:500;color:var(--white)}
/* Poppins has no polytonic Greek, so name a stack that does rather than
   letting each glyph fall back inconsistently */
.arche-term__greek{
  color:var(--lilac);font-weight:400;
  font-family:'Palatino Linotype','Times New Roman',Georgia,serif;
}
.arche-term__pos{font-size:.78rem;font-style:italic;color:var(--grey-3);font-weight:300}
.arche-term__def{font-size:.92rem;color:var(--grey-1);font-weight:300;line-height:1.5;white-space:nowrap}

@media(max-width:560px){
  /* narrow screens: let it wrap rather than overflow the viewport */
  .arche-term__pop{width:min(84vw,300px)}
  .arche-term__def{white-space:normal}
}

/* The Archean name / mission tie-in — quieter, set off by a gradient rule. */
.statement__note{
  font-size:1.02rem;font-weight:300;color:var(--grey-2);max-width:640px;
  margin-top:40px;padding-left:24px;line-height:1.75;
  border-left:2px solid transparent;
  border-image:linear-gradient(180deg,var(--blue),var(--purple)) 1;
}

/* ---------- Engine ---------- */
.section__lede{
  font-size:clamp(1.02rem,1.5vw,1.14rem);font-weight:300;color:var(--grey-1);
  line-height:1.75;margin-top:22px;max-width:640px;
}
.mono{font-weight:500;color:var(--lilac);letter-spacing:.01em}
/* aris wordmark: an oversized gradient whose position eases back and forth, so the
   blue/purple drifts through the letters instead of sitting static. */
.mono--xl{
  background:linear-gradient(112deg,
    #659AF5 0%, #8868C8 25%, #C6BAF2 50%, #8868C8 75%, #659AF5 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:-.02em;font-weight:600;
  animation:gradFlow 17s ease-in-out infinite;
}
/* Shared by the hero headline and the aris wordmark, at different durations. */
@keyframes gradFlow{
  0%,100%{background-position:0% 50%}
  50%    {background-position:100% 50%}
}

.scales{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:56px;
  background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.scale{
  background:var(--ink);padding:34px 30px;display:flex;flex-direction:column;gap:8px;
  transition:background .35s ease;
}
.section--alt .scale{background:var(--ink-2)}
.scale:hover{background:var(--surface)}
.scale__label{
  font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);
}
.scale__val{font-size:1.5rem;font-weight:300;color:var(--white);letter-spacing:-.01em}

.engine__claim{
  font-size:clamp(1.25rem,2.4vw,1.75rem);font-weight:300;line-height:1.45;
  margin-top:56px;max-width:760px;letter-spacing:-.01em;
}
.engine__lede{
  font-size:clamp(1.02rem,1.5vw,1.14rem);font-weight:300;color:var(--grey-1);
  line-height:1.75;margin-top:40px;max-width:660px;
}
.engine__close{
  font-size:clamp(1.02rem,1.5vw,1.14rem);font-weight:300;color:var(--grey-1);
  line-height:1.75;margin-top:52px;max-width:680px;
}

/* ---------- Flywheel ---------- */
.section__head--center{margin-left:auto;margin-right:auto;text-align:center}
.section__head--center .section__lede{margin-left:auto;margin-right:auto}
.flywheel{text-align:center}
.loop{
  display:flex;align-items:stretch;justify-content:center;gap:0;flex-wrap:nowrap;
  max-width:880px;margin:0 auto;
}
/* Nodes are links into their own sections. */
.loop__node{
  flex:1 1 0;display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:clamp(1.05rem,2vw,1.4rem);font-weight:400;line-height:1.4;letter-spacing:-.01em;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:44px 28px;cursor:pointer;
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.loop__node:hover{background:var(--surface-2);border-color:rgba(136,104,200,.55);color:#fff}
.loop__badge{
  flex:0 0 auto;width:70px;height:70px;border-radius:50%;align-self:center;
  margin:0 -18px;z-index:2;
  background:var(--grad);display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 40px -8px rgba(136,104,200,.8);
  animation:spin 14s linear infinite;
}
.loop__badge svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
@keyframes spin{to{transform:rotate(360deg)}}
.flywheel__body{
  font-size:clamp(1.05rem,1.6vw,1.18rem);font-weight:300;color:var(--grey-1);
  max-width:640px;margin:48px auto 0;line-height:1.75;
}

/* ---------- Neurocomputer band ---------- */
.band{
  background:radial-gradient(ellipse 70% 90% at 50% 50%,rgba(136,104,200,.12),transparent 70%),var(--ink-2);
  padding:110px 0;
}
.band__inner{display:flex;align-items:center;gap:70px;justify-content:center}
.band__art{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.band__icon{width:170px;height:auto;position:relative;z-index:2;
  filter:drop-shadow(0 0 34px rgba(136,104,200,.45))}
.band__glow{
  position:absolute;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,rgba(101,154,245,.3),rgba(136,104,200,.15) 45%,transparent 70%);
  filter:blur(28px);animation:pulse 6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.12);opacity:1}}
.band__line{
  font-size:clamp(1.3rem,2.6vw,1.95rem);font-weight:300;line-height:1.45;
  letter-spacing:-.01em;max-width:640px;
}

/* ---------- Outcomes ---------- */
.outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.outcome{
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:34px 32px 36px;position:relative;overflow:hidden;
  transition:transform .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.outcome:hover{transform:translateY(-6px);background:var(--surface-2);border-color:var(--line-2)}
/* Abstract brand-drawn motif per card — no stock imagery. */
.outcome__art{margin-bottom:24px}
.outcome__art svg{width:120px;height:auto;opacity:.9;transition:opacity .4s var(--ease)}
.outcome:hover .outcome__art svg{opacity:1}
.outcome h3{font-size:1.2rem;font-weight:600;margin-bottom:12px;letter-spacing:-.01em;line-height:1.35}
.outcome p{font-size:.96rem;font-weight:300;color:var(--grey-1);line-height:1.7}

/* ---------- CTA ---------- */
.cta{
  background:radial-gradient(ellipse at 50% 120%,rgba(136,104,200,.22),transparent 60%),var(--ink);
  text-align:center;padding:140px 0;
}
.cta__inner{max-width:720px;margin:0 auto}
/* no sub-line under the title now, so the title carries the gap to the button */
.cta__title{font-size:clamp(2rem,5vw,3.4rem);font-weight:600;line-height:1.12;letter-spacing:-.02em;margin-bottom:46px}
.cta__sub{font-size:1.12rem;font-weight:300;color:var(--grey-1);margin-bottom:44px;max-width:540px;
  margin-left:auto;margin-right:auto;line-height:1.7}
.cta__mail{margin-top:22px;font-size:.94rem;font-weight:300;color:var(--grey-3)}
.cta__mail a{color:var(--lilac);border-bottom:1px solid rgba(198,186,242,.3);transition:border-color .25s ease}
.cta__mail a:hover{border-color:var(--lilac)}

/* ============ TEAM ============ */
/* tighter than other sections: the "Founders" sub-label sits right beneath the
   heading, so the default 64px gap left them feeling disconnected */
#team .section__head{margin-bottom:34px}
.team__group{
  font-size:.72rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--grey-3);margin:0 0 22px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.team__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:56px}
.team__grid:last-child{margin-bottom:0}

/* flex, not grid: the text is one block so it centres against the portrait as a
   unit, rather than each line centring in its own row */
.person{
  display:flex;align-items:center;gap:26px;
  text-align:left;font:inherit;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:34px 28px 28px;                    /* top room for the head to rise */
  transition:transform .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.person__text{display:flex;flex-direction:column;min-width:0}
.person:hover{transform:translateY(-5px);background:var(--surface-2);border-color:rgba(136,104,200,.5)}

/* The portrait breaks out of its disc. The PNGs carry a baked mask: below the
   disc centre they are clipped to the circle, above it they keep their own
   alpha, so the head rises free. The geometry below MUST match that bake —
   circle centre 58.33% / radius 41.67% of a 720px frame — which is what the
   120% / -10% / -20% figures encode. Don't change one without the other. */
.person__photo{
  position:relative;width:128px;height:128px;flex:0 0 auto;
  grid-row:1 / span 3;overflow:visible;
}
.person__photo::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 32%,rgba(136,104,200,.5),rgba(101,154,245,.18) 66%,rgba(101,154,245,.06));
  border:1px solid rgba(198,186,242,.2);
}
.person__photo img{
  position:absolute;width:120%;left:-10%;top:-20%;height:auto;max-width:none;display:block;
}
.person__name{font-size:1.24rem;font-weight:600;color:var(--white);letter-spacing:-.015em;line-height:1.25}
.person__role{font-size:.95rem;font-weight:400;color:var(--lilac);margin-top:5px}
.person__tags{font-size:.8rem;font-weight:300;color:var(--grey-3);margin-top:11px;line-height:1.5}

/* ---------- expanded bio ---------- */
.modal__panel--person{max-width:660px}
.bio__head{display:flex;align-items:center;gap:26px;margin-bottom:28px;padding:14px 34px 0 0}
/* same break-out treatment as the cards */
.bio__photo{position:relative;width:148px;height:148px;flex:0 0 auto;overflow:visible}
.bio__photo::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 32%,rgba(136,104,200,.5),rgba(101,154,245,.18) 66%,rgba(101,154,245,.06));
  border:1px solid rgba(198,186,242,.2);
}
.bio__photo img{
  position:absolute;width:120%;left:-10%;top:-20%;height:auto;max-width:none;display:block;
}
.bio__head h3{font-size:1.42rem;font-weight:600;letter-spacing:-.02em;margin-bottom:4px}
.bio__role{font-size:.96rem;color:var(--lilac);font-weight:400}
.bio__tags{font-size:.8rem;color:var(--grey-3);font-weight:300;margin-top:8px;line-height:1.5}
.bio__body p{
  font-size:.96rem;font-weight:300;color:var(--grey-1);line-height:1.75;margin-bottom:14px;
}
.bio__body p:last-child{margin-bottom:0}
.bio__body strong{color:var(--white);font-weight:500}

/* ============ SUPPORTERS ============ */
/* Validation, not a callout: desaturated marks that lift on hover.
   Sits on --ink between the lighter CTA above and the darkest footer below. */
.supporters{position:relative;z-index:2;background:var(--ink-2);padding:52px 0}

/* Sliding banner. Edges fade out via a mask so marks enter/leave softly instead
   of being clipped at a hard boundary. */
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
}
.marquee__track{
  display:flex;width:max-content;
  animation:marqueeSlide 42s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{
  display:flex;align-items:center;list-style:none;
  gap:76px;padding-right:76px;
}
.marquee__item{display:flex;align-items:center;flex:0 0 auto}
/* 4 identical groups; shifting by 25% == exactly one group, so it loops seamlessly */
@keyframes marqueeSlide{
  from{transform:translateX(0)}
  to  {transform:translateX(-25%)}
}

.sup{
  width:auto;opacity:.85;
  transition:opacity .35s var(--ease);
}
.marquee__item:hover .sup{opacity:1}

/* Per-logo sizing, derived from each file's measured ink bounding box so the
   *visible artwork* lands ~28-30px tall in every case. TNVC and Origin ship with
   ~53% vertical padding baked in, so they need a much larger max-height to match
   marks like Illinois whose ink fills the full canvas. */
.sup--tnvc{max-height:60px}      /* ink 48% of canvas -> ~29px visible */
.sup--illinois{max-height:26px}  /* ink 100%, 10:1 wordmark            */
.sup--origin{max-height:60px}    /* ink 47% of canvas -> ~28px visible */
.sup--nsf{max-height:38px}       /* ink 100%, but fine detail: a touch larger */

/* All four sit at the SAME grey. The source art ranges from pure black (luma 0)
   to white (235) to full colour (118), so each needs its own brightness() to land
   on ~190. Multipliers are measured from each file, not guessed. */
.sup--tnvc    {filter:invert(1) grayscale(1) brightness(.75)}  /* black  -> invert */
.sup--origin  {filter:invert(1) grayscale(1) brightness(.76)}  /* black  -> invert */
.sup--illinois{filter:grayscale(1) brightness(.81)}            /* already white    */
.sup--nsf     {filter:grayscale(1) brightness(1.61)}           /* full colour      */

/* ============ FOOTER ============ */
.footer{position:relative;z-index:2;background:#050506;border-top:1px solid var(--line);padding:64px 0 40px}
/* Centred stack — mirrors the centred CTA directly above it. */
.footer__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:34px}

.footer__top{display:flex;flex-direction:column;align-items:center;gap:24px}
.footer__brand{display:flex;flex-direction:column;align-items:center;gap:12px}
.footer__logo{height:46px;width:auto}
.footer__tagline{font-size:.86rem;color:var(--grey-2);font-weight:300;letter-spacing:.02em}
/* wrap: without it the row overflows and clips its last item on narrow screens */
.footer__links{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:center}
.footer__links a{font-size:.9rem;color:var(--grey-2);transition:color .25s ease}
.footer__links a:hover{color:#fff}

/* Contact row. width:100% so the divider spans the full column, not just the text. */
.footer__info{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:16px 44px;
  width:100%;padding-top:34px;border-top:1px solid var(--line);
}
.footer__info-item{display:flex;align-items:center;gap:11px;color:var(--grey-2);
  transition:color .25s ease}
.footer__info-item:hover{color:#fff}
/* icons stay brand purple rather than inheriting the grey label colour */
.footer__info-item svg{
  width:17px;height:17px;flex:0 0 auto;
  fill:none;stroke:var(--purple);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .25s ease;
}
.footer__info-item:hover svg{stroke:var(--lilac)}
.footer__info-item a{font-size:.92rem;font-weight:300;color:inherit}

.footer__meta{font-size:.82rem;color:var(--grey-4);font-weight:300}

/* ============ CONTACT MODAL ============ */
.modal{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:24px;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
.modal.is-open{opacity:1;visibility:visible}
.modal__overlay{position:absolute;inset:0;background:rgba(3,3,6,.82);backdrop-filter:blur(10px)}
.modal__panel{
  position:relative;z-index:2;width:100%;max-width:520px;max-height:88vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line-2);border-radius:22px;
  padding:44px 42px 36px;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.8),0 0 70px -30px rgba(136,104,200,.5);
  transform:translateY(18px) scale(.98);transition:transform .4s var(--ease);
}
.modal.is-open .modal__panel{transform:none}
.modal__close{
  position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.04);border:1px solid var(--line);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .25s ease,border-color .25s ease;
}
.modal__close:hover{background:rgba(255,255,255,.09);border-color:var(--line-2)}
.modal__close svg{width:17px;height:17px;fill:none;stroke:var(--grey-1);stroke-width:2;stroke-linecap:round}
.modal__panel h3{font-size:1.7rem;font-weight:600;letter-spacing:-.02em;margin-bottom:12px}
.modal__intro{font-size:.97rem;font-weight:300;color:var(--grey-1);line-height:1.65;margin-bottom:26px}
.modal__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.modal__form{display:flex;flex-direction:column;gap:12px}
.modal__form input,.modal__form textarea{
  width:100%;font-family:inherit;font-size:.96rem;font-weight:300;color:var(--white);
  background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;transition:border-color .25s ease,background .25s ease;resize:vertical;
}
.modal__form input::placeholder,.modal__form textarea::placeholder{color:var(--grey-3)}
.modal__form input:focus,.modal__form textarea:focus{
  outline:none;border-color:var(--purple);background:rgba(136,104,200,.07);
  box-shadow:0 0 0 3px rgba(136,104,200,.14);
}
.modal__form input:user-invalid,.modal__form textarea:user-invalid{border-color:#d9645f}
.btn--full{width:100%;margin-top:8px}

.modal__error{
  display:none;margin-top:14px;font-size:.88rem;color:#e88b86;font-weight:300;line-height:1.55;
}
.modal__error.is-visible{display:block}
.modal__error a{color:#e88b86;text-decoration:underline}
.modal__note{margin-top:16px;font-size:.8rem;color:var(--grey-4);font-weight:300;text-align:center}

.modal__success{display:none;text-align:center;padding:22px 0 10px}
.modal__success.is-visible{display:block}
.modal__success-icon{
  width:62px;height:62px;border-radius:50%;margin:0 auto 22px;
  background:var(--grad);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 34px -8px rgba(136,104,200,.7);
}
.modal__success-icon svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.modal__success p{color:var(--grey-1);font-weight:300;margin-top:8px}
body.modal-open{overflow:hidden}

/* ============ Reveal on scroll (JS-gated: visible if JS is off) ============ */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
/* Hero copy fades in over the top of the established field at ~2s (delays are set
   in site.js). Mostly a fade — just enough rise to feel like it settles in. */
.js .hero .reveal{transform:translateY(14px);transition-duration:1s}

/* The nav joins the same entrance. Pure fade — a fixed bar sliding looks wrong —
   and it keeps its own transitions for the scrolled state. */
.js .nav.reveal{
  transform:none;
  transition:opacity 1s var(--ease),background .4s ease,padding .4s ease,border-color .4s ease;
}
.js .nav.reveal.in{transform:none}

/* ============ Responsive ============ */
/* 1040px, not 940 — a 6th nav link ("team") at this type size crowds the logo
   below ~1000px, so the hamburger takes over before it gets tight. */
@media(max-width:1040px){
  .nav{padding:18px 22px}
  .nav.scrolled{padding:13px 22px}
  .nav__logo{height:42px}
  .nav.scrolled .nav__logo{height:38px}
  .nav__links,.nav__cta{display:none}
  .nav__links a{font-size:1.1rem}
  .nav__toggle{display:flex}
  .nav__links.open{
    display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    background:rgba(7,7,9,.96);backdrop-filter:blur(16px);padding:24px 22px;gap:20px;
    border-bottom:1px solid var(--line);
  }
  .wrap{padding:0 22px}
  .section{padding:80px 0}
  .statement{padding-top:110px}
  .team__grid{grid-template-columns:1fr;gap:16px;margin-bottom:44px}
  .contrast{grid-template-columns:1fr}
  .scales{grid-template-columns:1fr}
  .cycle{grid-template-columns:repeat(2,1fr)}
  .outcomes{grid-template-columns:1fr}
  .section__head{margin-bottom:44px}
  /* the flywheel loop stacks, and the badge rotates to sit between the nodes */
  .loop{flex-direction:column;align-items:stretch}
  .loop__badge{margin:-18px auto;width:60px;height:60px}
  .loop__node{padding:34px 24px}
  /* band: art above the line */
  .band__inner{flex-direction:column;gap:40px;text-align:center}
  .band__icon{width:130px}
  .band__glow{width:180px;height:180px}
  .flow{gap:12px}
  .flow__arrow{min-width:24px}
}
@media(max-width:480px){
  /* Buttons size to their own text and centre. They used to be forced to
     width:100%, which stretched "Learn more" across the whole screen. */
  .hero__cta{align-items:center}
  /* footer is already centred; on narrow screens the contact row becomes a column */
  .footer__links{gap:14px 22px}
  .footer__info{flex-direction:column;align-items:center;gap:14px;padding-top:28px}
  .modal{padding:14px}
  .modal__panel{padding:38px 24px 28px;border-radius:18px}
  .modal__panel h3{font-size:1.45rem}
  /* bio header stacks so the name isn't squeezed beside the portrait */
  .bio__head{flex-direction:column;align-items:flex-start;gap:16px;padding-right:0}
  .person{flex-direction:column;gap:14px;text-align:center}
  .person__text{align-items:center}
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  /* reveal is JS-gated, so it must be unhidden via the same .js scope */
  .js .reveal{opacity:1;transform:none;transition:none}
  .loop__badge,.band__glow,.mono--xl,.hero__title .grad,.eyebrow{animation:none}
  .marquee__track{animation:none}
}