/* ══════════════════════════════════════════════
   ai² — core stylesheet
   Palette + type sourced from ai2_Template.pptx
   ══════════════════════════════════════════════ */

:root{
  --navy:#001A3E;
  --navy-2:#0D3348;
  --navy-3:#08264f;
  --indigo:#241B52;
  --violet:#5140C4;
  --violet-2:#7327CB;
  --violet-lt:#8B7CF0;
  --pale:#E6E1FB;
  --blue:#4FA8C5;
  --gray:#546E7A;
  --off:#F5F8FA;
  --line:#DCE3EC;

  --grad:linear-gradient(135deg,#7327CB 0%,#5140C4 52%,#1E42C6 100%);

  --disp:"Figtree",system-ui,-apple-system,Arial,sans-serif;
  --body:"Inter",system-ui,-apple-system,Arial,sans-serif;
  --label:"Inter",system-ui,-apple-system,Arial,sans-serif;

  --wrap:1400px;
  --pad:40px;
  --r:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:var(--navy);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;letter-spacing:-.025em;line-height:1.08;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--violet-lt);outline-offset:3px;border-radius:4px}

/* ── reveal ───────────────────────────────── */
.rev{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rev.in{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}.d4{transition-delay:.3s}

/* grids reveal in sequence rather than all at once */
.use-cards .rev:nth-child(2),.cards .rev:nth-child(2),.why-grid .rev:nth-child(2){transition-delay:.09s}
.use-cards .rev:nth-child(3),.cards .rev:nth-child(3),.why-grid .rev:nth-child(3){transition-delay:.18s}
.use-cards .rev:nth-child(4),.why-grid .rev:nth-child(4){transition-delay:.27s}
.use-cards .rev:nth-child(5){transition-delay:.36s}
.use-cards .rev:nth-child(6){transition-delay:.45s}
@media (prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ══ BRAND MARK ═══════════════════════════════
   The lockup for the page being viewed — ai² Equals, or the programme's
   own. Its artwork carries the descender space of the "q" or "p" below the
   tile, so the height set here runs a little over the tile itself. */
.brand{display:inline-flex;align-items:center;--lockup:52px}
.brand img{height:var(--lockup);width:auto;display:block;
  filter:drop-shadow(0 6px 20px rgba(115,39,203,.4))}
/* The wordmark lockups carry the descender of "q"/"p" below the tile, so the
   tile is only 92.08% of the artwork's height. The mark is the tile alone, so
   it is scaled by that factor to match — set --lockup per context and both
   the mark and the lockups stay the same size on screen. */
.brand .mark{height:calc(var(--lockup) * .9208)}

/* ══ ICONS ════════════════════════════════════ */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;background:var(--pale);flex:none;
}
.ico svg{width:23px;height:23px;fill:none;stroke:var(--violet);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

/* ══ BUTTONS ══════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:-.01em;
  padding:15px 26px;border-radius:100px;background:var(--grad);color:#fff;
  transition:transform .25s,box-shadow .25s,background .25s,color .25s,border-color .25s;
  box-shadow:0 10px 26px -14px rgba(81,64,196,.9);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px -14px rgba(81,64,196,1)}
.btn-sm{padding:11px 20px;font-size:15px}
.btn-ghost{background:none;box-shadow:none;border:1px solid rgba(255,255,255,.28);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.08);box-shadow:none}
.btn-light{background:#fff;color:var(--navy);box-shadow:0 10px 26px -14px rgba(0,0,0,.6)}
.btn-light:hover{background:#fff}
.btn-ghost-light{border-color:rgba(255,255,255,.3)}

/* ══ NAV ══════════════════════════════════════ */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .3s,box-shadow .3s,border-color .3s;border-bottom:1px solid transparent}
.nav-in{width:100%;max-width:var(--wrap);margin:0 auto;padding:16px var(--pad);display:flex;align-items:center;gap:34px}
.nav .brand{margin-right:auto}
.nav-links{display:flex;gap:30px;font-size:15.5px;font-weight:500;color:rgba(255,255,255,.82)}
.nav-links a{position:relative;padding:4px 0;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--violet-lt);transition:width .28s}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav.stuck{background:rgba(0,26,62,.92);backdrop-filter:blur(14px);border-bottom-color:rgba(255,255,255,.1)}
.burger{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.25);background:none;border-radius:10px;cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger i{display:block;width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.nav-drawer{display:none}

/* ══ HERO ═════════════════════════════════════ */
.hero{
  position:relative;background:var(--navy);color:#fff;overflow:hidden;
  padding:170px 0 0;
}
.hero-photo{
  position:absolute;inset:0;pointer-events:none;
  background:url("https://images.unsplash.com/photo-1582560486643-d51a9722b92d?auto=format&fit=crop&w=1800&q=70") center 30%/cover no-repeat;
  opacity:.34;filter:grayscale(.45) contrast(1.05);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 55%,transparent 92%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 55%,transparent 92%);
}
.hero-field{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,26,62,.97) 0%,rgba(0,26,62,.9) 34%,rgba(0,26,62,.35) 72%,rgba(0,26,62,.1) 100%),
    radial-gradient(700px 460px at 78% 8%,rgba(115,39,203,.42),transparent 68%),
    radial-gradient(620px 480px at 6% 62%,rgba(30,66,198,.34),transparent 70%),
    radial-gradient(420px 320px at 62% 84%,rgba(79,168,197,.15),transparent 72%);
}
.hero-field::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(closest-side at 50% 30%,#000,transparent);
          mask-image:radial-gradient(closest-side at 50% 30%,#000,transparent);
}
.hero-in{position:relative;z-index:2;padding-bottom:80px}
.eyebrow{
  font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--violet-lt);margin-bottom:22px;
}
.hero h1{font-size:clamp(42px,6vw,78px);letter-spacing:-.035em;max-width:15ch}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--violet-lt) 0%,#c9b8ff 45%,var(--blue) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lede{margin-top:26px;max-width:60ch;font-size:19px;color:rgba(255,255,255,.76)}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}

/* equation device */
.equation{margin-top:70px;border-radius:var(--r);background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);backdrop-filter:blur(6px)}
.eqn-row{display:flex;align-items:stretch}
.term{flex:1;padding:26px 28px;display:flex;flex-direction:column;justify-content:center;gap:7px}
.term-k{font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:-.02em}
.term-s{font-size:13.5px;color:rgba(255,255,255,.55);line-height:1.45}
.term-alt .term-k{color:var(--violet-lt)}
.term-out{background:rgba(115,39,203,.16);border-left:1px solid rgba(255,255,255,.11);border-radius:0 var(--r) var(--r) 0}
.term-out .term-k{font-size:30px}
.term-out .term-k sup{font-size:.56em;line-height:0;position:relative;top:-.42em;margin-left:1px}
.term-out .term-s{color:rgba(255,255,255,.72)}
.op{display:flex;align-items:center;justify-content:center;width:56px;flex:none;font-family:var(--disp);font-size:22px;font-weight:600;color:rgba(255,255,255,.4)}
.op-eq{flex-direction:column;gap:5px}
.op-eq i{display:block;width:20px;height:3px;border-radius:2px;background:var(--violet-lt)}

/* university strip */
/* Collaborator marquee. Lives on Community now, on the off-white ground, so
   the marks run in their own colours rather than knocked out to white. */
.unis{--unis-gap:88px;--unis-h:104px;
  position:relative;margin-top:44px;padding:34px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* the same marquee on the hero's navy band: marks knocked out to white */
.unis-dark{--unis-h:78px;z-index:2;margin-top:0;padding:26px 0;background:rgba(0,0,0,.16);
  border-top:1px solid rgba(255,255,255,.1);border-bottom:none}
.unis-dark .unis-in{display:flex;align-items:center;gap:36px}
.unis-label{flex:none;font-family:var(--label);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.42)}
.unis-dark .unis-row img{filter:brightness(0) invert(1);opacity:.72}
.unis-dark .unis-row img:hover{opacity:1}
.unis-track{overflow:hidden;display:flex;gap:var(--unis-gap);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.unis-row{display:flex;align-items:center;gap:var(--unis-gap);flex:none;width:max-content;
  animation:slide 62s linear infinite}
/* every mark shares one canvas, so a single height gives an even rhythm */
.unis-row img{height:var(--unis-h);width:auto;flex:none;opacity:.85;transition:opacity .3s}
.unis-row img:hover{opacity:1}
@keyframes slide{from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - var(--unis-gap) / 2))}}
@media (prefers-reduced-motion:reduce){.unis-row{animation:none}}

/* ══ SECTION FURNITURE ════════════════════════ */
.sec{padding:112px 0}
.sec-head{max-width:760px;margin-bottom:56px}
.sec-head h2{font-size:clamp(30px,3.9vw,46px)}
.tag{
  display:flex;align-items:center;gap:12px;margin-bottom:20px;
  font-family:var(--label);font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--violet);
}
.tag span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:22px;border-radius:6px;background:var(--pale);color:var(--violet);
  font-size:11px;letter-spacing:.06em;
}
.tag-light{color:var(--violet-lt)}
.tag-light span{background:rgba(139,124,240,.18);color:#cfc6ff}
.sec-head-split{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;max-width:none;align-items:end}
.sec-note{color:var(--gray);font-size:16.5px}
.sec-line{margin-top:16px;font-family:var(--disp);font-weight:600;font-size:clamp(19px,2vw,24px);
  letter-spacing:-.02em;color:var(--violet)}

/* ══ WHAT IS ai² ══════════════════════════════ */
.what{background:var(--off)}

.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}

/* copy plate, with a dot matrix bleeding off the foot */
.intro-card{
  position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:46px 48px 168px;
}
.intro-card p{color:var(--gray);font-size:18px;line-height:1.62;position:relative;z-index:2}
.intro-card p + p{margin-top:20px}
.dots{position:absolute;left:0;right:0;bottom:0;height:150px;pointer-events:none}
.dots::before,.dots::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,var(--violet) 3.4px,transparent 3.8px);
  background-size:34px 34px;background-position:14px 10px;
}
.dots::before{opacity:.1}
.dots::after{
  opacity:.45;
  -webkit-mask-image:radial-gradient(125% 125% at 72% 122%,#000 30%,transparent 74%);
          mask-image:radial-gradient(125% 125% at 72% 122%,#000 30%,transparent 74%);
}

/* gradient plate: the five inputs wired into ai² */
.intro-art{
  position:relative;overflow:hidden;border-radius:var(--r);min-height:470px;
  background:linear-gradient(150deg,#1E42C6 0%,#4736A8 46%,#7327CB 100%);
}
.intro-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(85% 65% at 12% 100%,rgba(0,15,48,.5),transparent 72%);
}
/* The wire endpoints are baked into the SVG, so the whole star is inset by
   insetting the SVG's own box — the node percentages below are the same
   coordinates remapped onto it (x' = 5 + x*0.90, y' = 7 + y*0.94). That
   buys margin off the plate edges without detaching any wire from its icon. */
.wires{position:absolute;left:5%;top:7%;width:90%;height:94%}
.wires path{fill:none;vector-effect:non-scaling-stroke}
.wire-base path{stroke:rgba(255,255,255,.3);stroke-width:1.2;stroke-dasharray:3 4}
.wire-live path{
  /* vector-effect:non-scaling-stroke puts the dash in screen pixels, so
     pathLength="100" does not apply — the travel below is a pixel distance,
     set to clear the longest wire on the plate at this width. */
  --travel:-290px;
  stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:14 700;
  animation:travel 4.6s cubic-bezier(.45,0,.55,1) infinite;opacity:0;
}
.wire-live .w2{animation-delay:.5s}
.wire-live .w3{animation-delay:1s}
.wire-live .w4{animation-delay:1.5s}
.wire-live .w5{animation-delay:2s}
@keyframes travel{
  0%{stroke-dashoffset:0;opacity:0}
  8%{opacity:1}
  78%{stroke-dashoffset:var(--travel);opacity:.9}
  86%,100%{stroke-dashoffset:var(--travel);opacity:0}
}
.node{
  /* anchored on the icon, not the box: the wires converge on the icon centre,
     so half the icon's height is taken back off the top and the label hangs
     below it. The glass is blurred hard enough to swallow the line inside. */
  position:absolute;z-index:2;transform:translateX(-50%);margin-top:-23px;width:124px;
  display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
}
.nico{
  width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(12px) saturate(1.3);
}
.nico svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.node b{
  font-family:var(--label);font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.84);line-height:1.35;
}
.n1{left:17.6%;top:29.56%}.n2{left:50%;top:19.22%}.n3{left:82.4%;top:29.56%}
/* The top-centre spoke runs straight down through where its own label would
   sit, so that one label goes above its icon and leaves the wire clear. */
.n2 b{position:absolute;bottom:100%;left:0;right:0;margin-bottom:9px}
.n4{left:23%;top:81.26%}.n5{left:77%;top:81.26%}
.art-mark{
  position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);z-index:3;
  width:88px;height:auto;filter:drop-shadow(0 18px 34px rgba(0,0,0,.7));
}
@media (prefers-reduced-motion:reduce){.wire-live path{animation:none;opacity:.7;stroke-dashoffset:-50px}}

/* ══ HUMAN EXPERTISE — full-bleed banner ═════ */
.banner{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:104px 0 96px}
.banner-photo{
  position:absolute;inset:0;
  background:url("https://images.unsplash.com/photo-1758518730083-4c12527b6742?auto=format&fit=crop&w=1800&q=75") center 32%/cover no-repeat;
  filter:grayscale(.5) contrast(1.05);opacity:.55;
}
.banner-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(0,26,62,.97) 0%,rgba(0,26,62,.9) 40%,rgba(0,26,62,.35) 76%,rgba(0,26,62,.12) 100%),
    radial-gradient(760px 460px at 84% 6%,rgba(115,39,203,.4),transparent 70%);
}
.banner-in{position:relative;z-index:2}
.banner-in > *{max-width:50ch}
.banner h2{font-size:clamp(32px,4.4vw,58px);letter-spacing:-.032em;max-width:16ch}
.banner p{margin-top:18px;color:rgba(255,255,255,.76);font-size:17px}
.banner .banner-lead{margin-top:26px;font-size:21px;line-height:1.5;color:rgba(255,255,255,.92)}
.banner .pull{margin-top:26px;font-family:var(--disp);font-weight:700;font-size:21px;
  letter-spacing:-.02em;color:#fff}

/* ══ HOW WE USE ai² ═══════════════════════════ */
.uses{background:var(--off);border-bottom:1px solid var(--line);padding-top:92px}
.use-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.use-card{
  display:flex;gap:20px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s;
}
.use-card:hover{transform:translateY(-3px);box-shadow:0 22px 44px -34px rgba(0,26,62,.55);border-color:#cdd6e4}
.use-card .ico{transition:background .3s}
.use-card:hover .ico{background:#dcd5fb}
.use-card p{font-size:16.5px;color:var(--navy-2);line-height:1.55;margin-top:8px}

/* ══ PHILOSOPHY + PRINCIPLE — full-bleed gradient ══ */
.band{
  position:relative;color:#fff;padding:112px 0;overflow:hidden;
  background:linear-gradient(135deg,#1B1442 0%,#2E2470 34%,#4736A8 64%,#16357F 100%);
}
.band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(820px 520px at 90% 2%,rgba(115,39,203,.45),transparent 70%),
             radial-gradient(700px 500px at 0% 100%,rgba(0,15,48,.75),transparent 72%);
}
.band-in{position:relative;z-index:2}
.band-top{position:relative;padding-bottom:44px;margin-bottom:52px}
.band-top::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.28);
  transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.3,1) 1.45s;
}
.band.play .band-top::after{transform:scaleX(1)}

/* staged: eyebrow → first clause → wipe on the second → rule → principle → figures */
.band .band-top .tag,
.band .mantra span,
.band-main,
.band .exp{opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.band .mantra em{
  clip-path:inset(0 100% 0 0);
  transition:clip-path .75s cubic-bezier(.65,0,.35,1) .95s;
}
.band.play .band-top .tag{opacity:1;transform:none}
.band.play .mantra span{opacity:1;transform:none;transition-delay:.35s}
.band.play .mantra em{clip-path:inset(0 0 0 0)}
.band.play .band-main{opacity:1;transform:none;transition-delay:2.25s}
.band.play .exp{opacity:1;transform:none;transition-delay:2.95s}
.band .exp-item{opacity:0;transform:translateY(12px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.band.play .exp-item{opacity:1;transform:none;transition-delay:3.05s}
.band.play .exp-item:nth-child(2){transition-delay:3.2s}
.band.play .exp-item:nth-child(3){transition-delay:3.35s}
@media (prefers-reduced-motion:reduce){
  .band .band-top .tag,.band .mantra span,.band-main,.band .exp{opacity:1;transform:none;transition:none}
  .band .mantra em{clip-path:none;transition:none}
  .band-top::after{transform:scaleX(1);transition:none}
}
.mantra{
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin-top:16px;
  font-family:var(--disp);font-size:clamp(24px,3.2vw,42px);font-weight:700;letter-spacing:-.03em;
}
.mantra span{color:rgba(255,255,255,.72)}
.mantra em{font-style:normal;color:#fff}
.band blockquote{margin:0}
.band blockquote p{
  font-family:var(--disp);font-weight:700;letter-spacing:-.035em;line-height:1.04;
  font-size:clamp(34px,5.4vw,72px);max-width:18ch;margin-top:16px;
}
.band-sub{margin-top:22px;max-width:74ch;color:rgba(255,255,255,.76);font-size:17.5px}

.exp{position:relative;z-index:2;margin-top:56px;padding-top:40px;border-top:1px solid rgba(255,255,255,.2)}

.exp-row{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.exp-item{border-left:2px solid var(--violet-lt);padding-left:20px}
.exp-n{transition:none}
.exp-n{font-family:var(--disp);font-weight:800;font-size:clamp(38px,4.6vw,54px);line-height:1;letter-spacing:-.045em;
  color:#fff}
.exp-l{margin-top:10px;font-size:14.5px;color:rgba(255,255,255,.62);line-height:1.45;max-width:24ch}

/* ══ FOUNDATION / STATS ═══════════════════════ */
.foundation{background:#fff}





.found-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.found-img{margin:0;border-radius:var(--r);overflow:hidden;position:relative;aspect-ratio:4/3;background:var(--navy)}
.found-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(150deg,rgba(0,26,62,.42),rgba(81,64,196,.3))}
.found-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.25) contrast(1.05);transition:transform 1.1s cubic-bezier(.2,.7,.3,1),filter .6s}
.found-grid:hover .found-img img{transform:scale(1.035);filter:grayscale(.05) contrast(1.02)}

.found-copy h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:24px}
.found-copy p{color:var(--gray);font-size:17px}
.found-copy p + p{margin-top:18px}

/* ══ ENGINES ══════════════════════════════════ */
.engines{background:var(--off);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:0 30px 30px;display:flex;flex-direction:column;overflow:hidden;
  transition:transform .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s,border-color .32s;
}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.card:hover{transform:translateY(-6px);box-shadow:0 30px 55px -35px rgba(0,26,62,.6);border-color:#cdd6e4}
.card:hover::before{transform:scaleX(1)}
.card-img{
  display:block;position:relative;margin:0 -30px 26px;aspect-ratio:16/10;overflow:hidden;background:var(--navy);
}
.card-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(165deg,rgba(0,26,62,.5) 0%,rgba(36,27,82,.62) 100%);
  transition:opacity .45s;
}
.card-img img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.7) contrast(1.1) brightness(.95);
  transition:transform .6s cubic-bezier(.2,.7,.3,1),filter .45s}
.card:hover .card-img img{transform:scale(1.045);filter:grayscale(.15) contrast(1.02) brightness(1)}
.card:hover .card-img::after{opacity:.4}

.card h3{font-size:32px;margin:0 0 10px}
.card-d{font-family:var(--disp);font-weight:600;font-size:17.5px;letter-spacing:-.015em;color:var(--violet);margin-bottom:26px}

.card-go{margin-top:auto;font-family:var(--disp);font-weight:600;font-size:15.5px;display:inline-flex;align-items:center;gap:8px}
.card-go i{font-style:normal;transition:transform .28s}
.card:hover .card-go i{transform:translateX(5px)}

/* ══ WHY ══════════════════════════════════════ */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.why{background:#fff;border-top:1px solid var(--line)}
.why-item{padding-top:0}
.why-item{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.why-item:hover{transform:translateY(-3px)}
.why-item .ico{margin-bottom:16px;transition:background .3s,transform .3s cubic-bezier(.2,.7,.3,1)}
.why-item:hover .ico{background:#dcd5fb;transform:translateY(-2px)}
.why-item h3{font-size:19px;margin-bottom:10px}
.why-item p{font-size:15.5px;color:var(--gray)}

/* ══ CTA ══════════════════════════════════════ */
.cta{background:var(--navy);color:#fff;padding:104px 0;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 420px at 50% 120%,rgba(115,39,203,.45),transparent 70%)}
.cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;mix-blend-mode:screen;
  background:url("https://images.squarespace-cdn.com/content/v1/69859760af885543ed99cf89/f6b64da3-2432-4d07-ae4b-7eb587510967/img-footer-form-message-bg.png?format=1500w") center/cover no-repeat;
}
.cta-in{position:relative;z-index:2;text-align:center}
.cta h2{font-size:clamp(34px,4.6vw,54px)}
.cta p{margin:20px auto 0;max-width:74ch;color:rgba(255,255,255,.72);font-size:18px;text-wrap:balance}
.cta-btns{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:34px}
.cta-who{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;margin-top:46px}
.cta-who li{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--label);font-size:12px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(255,255,255,.72);
}
.cta-who li::before{
  content:"";flex:none;width:18px;height:18px;border-radius:50%;
  border:1.5px solid #fff;background:rgba(255,255,255,.08);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.7' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:12px 12px;background-position:center;background-repeat:no-repeat;
}

/* Pipeline, Talent and Accelerator share this pale, knocked-back
   treatment of the Futures Lab partner texture. */
.cta-partners{
  color:var(--navy);
  background:
    linear-gradient(rgba(245,248,250,.63),rgba(245,248,250,.63)),
    url("https://images.squarespace-cdn.com/content/v1/69859760af885543ed99cf89/c6d2e9a9-abd3-439c-b6a3-466d07a907d3/img-home-partners-bg.png?format=2500w") center/cover no-repeat;
}
.cta-partners::before,.cta-partners::after{display:none}
.cta-partners p{color:var(--gray)}
.cta-partners .btn-light{background:var(--grad);color:#fff}
.cta-partners .btn-light:hover{background:var(--grad)}

/* Partners take the off-white so they read as their own band. */
.partners{background:var(--off);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ══ FOOTER ═══════════════════════════════════ */
.foot{background:var(--navy-3);color:#fff;padding:70px 0 34px}
.foot .brand{--lockup:58px}
.foot-in{display:grid;grid-template-columns:1.1fr 1.4fr;gap:56px;padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-tag{margin-top:20px;color:rgba(255,255,255,.6);font-size:15.5px}
.foot-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.foot-h{font-family:var(--label);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:16px}
.foot-nav a{display:block;font-size:15.5px;color:rgba(255,255,255,.8);padding:5px 0;transition:color .2s}
.foot-nav a:hover{color:var(--violet-lt)}
.foot-base{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:26px}
.foot-lok{display:flex;align-items:center;gap:14px;margin-left:auto}
.foot-lok span{font-family:var(--label);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.lok-chip{display:inline-flex;align-items:center;background:#fff;border-radius:8px;padding:9px 14px;transition:transform .25s}
.lok-chip:hover{transform:translateY(-2px)}
.foot-lok img{height:26px;width:auto}
.foot-legal{font-size:13px;color:rgba(255,255,255,.4)}

/* Balance the description independently of the opening question. */
.cta-description{display:block;text-wrap:balance}

/* Keep the Home lead wrapping naturally after “require” on desktop. */
.banner-home .banner-lead{max-width:27em}