/* ==========================================================================
   ITEM engineering — template
   Design system derived from the "Orbit AI" reference:
   indigo/lavender on near-black, Clash Display + Inter, rounded stacked slabs,
   directional motion-blur reveals.
   All tokens live here — retheme the whole site from :root.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* palette (from the reference's published swatches) */
  --ink:        #040404;
  --ink-2:      #0a0a14;
  --ink-3:      #10101f;
  --indigo:     #202cad;
  --indigo-2:   #373d81;
  --lav:        #c7cbec;
  --lav-2:      #e6e8f7;
  --grey:       #adadad;
  --paper:      #f8f8f8;
  --paper-2:    #ececf2;
  /* ITEM brand blue, taken from the supplied logo mark */
  --brand:      #455994;
  --brand-tint: #f2f4fb;

  /* semantic */
  --bg:         var(--ink);
  --on-ink:     var(--paper);
  --on-ink-mut: var(--grey);
  --on-paper:   #0b0b12;
  --on-paper-mut:#6a6a78;
  --line-ink:   rgba(248,248,248,.14);
  --line-paper: rgba(11,11,18,.13);

  /* type */
  --f-display: "Clash Display", "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --t-hero: clamp(2.6rem, 6.2vw, 5.4rem);
  --t-h2:   clamp(2rem, 4.4vw, 3.9rem);
  --t-h3:   clamp(1.3rem, 2vw, 1.75rem);
  --t-lead: clamp(1.05rem, 1.5vw, 1.5rem);
  --t-body: clamp(.95rem, 1.05vw, 1.125rem);
  --t-sm:   .8125rem;
  --t-xs:   .6875rem;

  /* space + shape */
  --gut: clamp(1.25rem, 4vw, 4.5rem);
  --slab-r: clamp(18px, 2.6vw, 40px);
  --slab-pad: clamp(3.5rem, 8vw, 8.5rem);
  --maxw: 1400px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{
  margin:0;
  background:var(--bg);
  color:var(--on-ink);
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul{margin:0}
ul{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--paper);color:var(--ink);padding:.75rem 1.25rem;border-radius:0 0 12px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--lav);outline-offset:3px;border-radius:4px}

/* ---------- 3. Typography primitives ---------- */
.h2{
  font-family:var(--f-display);
  font-weight:500;
  font-size:var(--t-h2);
  line-height:1.02;
  letter-spacing:-.022em;
}
.h2--right{text-align:right}
.h2--center{text-align:center}
.h3{
  font-family:var(--f-display);
  font-weight:500;
  font-size:var(--t-h3);
  line-height:1.15;
  letter-spacing:-.015em;
  color:var(--on-paper);
}
.h3--inv{color:var(--on-ink)}
.lead{font-size:var(--t-lead);line-height:1.35;letter-spacing:-.012em;color:var(--on-paper);font-weight:500}
.lead--inv{color:var(--on-ink)}
.body{font-size:var(--t-body);line-height:1.65;color:var(--on-paper-mut)}
.body--inv{color:var(--on-ink-mut)}
.eyebrow,.tag{
  font-size:var(--t-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--on-ink-mut);
  line-height:1.7;
}
.slab--paper .tag{color:var(--on-paper-mut)}
.spark{
  font-size:.7rem;color:var(--indigo);opacity:.75;
  display:inline-block;
}
.link-ul{
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding-bottom:3px;
  transition:opacity .3s var(--ease);
}
.link-ul:hover{opacity:.55}
.proof__note .link-ul,.body .link-ul{display:inline-block;margin-top:.6rem;color:var(--on-paper)}

/* ---------- 4. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--t-sm);font-weight:500;letter-spacing:.01em;
  padding:.85rem 1.6rem;border-radius:999px;
  transition:transform .35s var(--ease-out), background .3s, color .3s, box-shadow .35s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--pill{background:var(--paper);color:var(--ink)}
.btn--pill:hover{box-shadow:0 10px 30px -8px rgba(199,203,236,.5)}
.btn--dark{background:var(--ink);color:var(--paper)}
.btn--dark:hover{background:var(--indigo)}
.btn--light{background:var(--paper);color:var(--ink)}
.btn--light:hover{background:var(--lav)}

.arrow{
  width:2.6rem;height:2.6rem;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid currentColor;border-radius:999px;
  font-size:1rem;opacity:.7;
  transition:transform .4s var(--ease-out), opacity .3s, background .3s, color .3s;
}
.arrow--btn{color:var(--on-paper)}
.post:hover .arrow, .card:hover .arrow, .arrow:hover{
  opacity:1;transform:translateX(4px) rotate(-45deg);
}

/* ---------- 5. Nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding:1rem var(--gut);
  transition:background .4s var(--ease), backdrop-filter .4s, padding .4s;
}
.nav.is-stuck{
  background:rgba(4,4,4,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  padding:.6rem var(--gut);
  border-bottom:1px solid var(--line-ink);
}
.nav__inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;gap:1.5rem;
}
/* logo — the supplied ITEM lockup. Full lockup where it has room to read,
   square mark alone in tight spaces (mobile nav). */
.brand{display:flex;align-items:center;margin-right:auto;line-height:0}
.brand img{height:44px;width:auto}
.brand__mark{display:none}
.brand__mark img{height:34px}
.nav__links{display:flex;gap:2rem}
.nav__links a{
  font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-ink-mut);transition:color .3s;
  padding-bottom:3px;border-bottom:1px solid transparent;
}
.nav__links a:hover{color:var(--on-ink)}
.nav__links a[aria-current="page"]{color:var(--on-ink);border-bottom-color:var(--lav)}
.nav__toggle{display:none;width:2.5rem;height:2.5rem;flex-direction:column;justify-content:center;gap:6px;align-items:flex-end}
.nav__toggle span{display:block;height:1.5px;background:var(--paper);transition:transform .35s var(--ease),width .35s var(--ease)}
.nav__toggle span:nth-child(1){width:22px}
.nav__toggle span:nth-child(2){width:14px}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){width:22px;transform:translateY(-3.75px) rotate(-45deg)}

.drawer[hidden]{display:none}
.drawer{
  position:fixed;inset:0;z-index:99;
  background:rgba(4,4,4,.96);
  backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;gap:1.25rem;
  padding:6rem var(--gut) 3rem;
}
.drawer a{font-family:var(--f-display);font-size:1.6rem;font-weight:500;letter-spacing:-.01em}
.drawer .btn{align-self:flex-start;margin-top:1rem;font-family:var(--f-body);font-size:var(--t-sm)}

/* ---------- 6. Hero ---------- */
.hero{
  position:relative;isolation:isolate;
  min-height:100svh;
  padding:clamp(6rem,14vh,10rem) var(--gut) clamp(2rem,5vh,3.5rem);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.hero__glow{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(120% 90% at 12% 108%, rgba(32,44,173,.85) 0%, rgba(32,44,173,.28) 34%, transparent 66%),
    radial-gradient(80% 60% at 88% 0%, rgba(55,61,129,.45) 0%, transparent 60%),
    linear-gradient(180deg,#05050c 0%, #04040a 45%, #070714 100%);
}
.hero__grain{
  position:absolute;inset:0;z-index:-1;opacity:.16;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
}
/* team photo behind the hero; the glow becomes a tinted scrim so text stays legible */
.hero__bg{
  position:absolute;inset:0;z-index:-3;
  width:100%;height:100%;object-fit:cover;object-position:50% 62%;
  filter:saturate(.75);
}
.hero--photo .hero__glow{
  background:
    radial-gradient(120% 90% at 12% 108%, rgba(32,44,173,.7) 0%, rgba(32,44,173,.22) 38%, transparent 68%),
    linear-gradient(180deg, rgba(4,4,10,.78) 0%, rgba(4,4,10,.42) 38%, rgba(4,4,10,.55) 62%, rgba(4,4,12,.92) 100%);
}
.hero__top{max-width:var(--maxw);width:100%;margin:0 auto}
.hero__lede{
  max-width:var(--maxw);width:100%;margin:auto auto 0;
  display:flex;flex-direction:column;align-items:flex-end;gap:1.6rem;
  text-align:right;
  padding-bottom:clamp(2rem,8vh,6rem);
}
.hero__h1{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.9rem,3.6vw,3.1rem);
  line-height:1.06;letter-spacing:-.02em;
  max-width:22ch;
}
.hero__foot{
  max-width:var(--maxw);width:100%;margin:0 auto;
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
}
.hero__caption{
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-ink-mut);text-align:right;line-height:1.9;flex:0 0 auto;
}

/* giant wordmark with directional motion-blur trail (the reference's signature) */
.wordmark{position:relative;line-height:.78}
.wordmark__solid,.wordmark__trail{
  display:block;
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(4.5rem,17vw,15rem);
  letter-spacing:-.045em;
  color:var(--paper);
}
.wordmark__trail{
  position:absolute;inset:0;
  filter:blur(14px);
  transform:translateX(.06em) scaleX(1.04);
  transform-origin:left center;
  opacity:.85;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 92%);
  mask-image:linear-gradient(90deg,transparent 30%,#000 92%);
}
.hero__scroll{
  position:absolute;left:50%;bottom:1.25rem;transform:translateX(-50%);
  width:1px;height:44px;background:linear-gradient(180deg,transparent,var(--line-ink));
  overflow:hidden;
}
.hero__scroll span{
  display:block;width:1px;height:14px;background:var(--lav);
  animation:drop 2.4s var(--ease) infinite;
}
@keyframes drop{0%{transform:translateY(-14px)}60%,100%{transform:translateY(44px)}}

/* ---------- 7. Slabs ---------- */
.slab{
  position:relative;isolation:isolate;
  margin:0 clamp(.4rem,1vw,1rem) clamp(.4rem,1vw,1rem);
  border-radius:var(--slab-r);
  padding:var(--slab-pad) var(--gut);
  overflow:hidden;
}
.slab--tight{padding-block:clamp(3rem,6vw,6rem)}
.slab--paper{background:var(--paper);color:var(--on-paper)}
.slab--ink{background:var(--ink-2);color:var(--on-ink)}
.slab__inner{max-width:var(--maxw);margin:0 auto}
.slab__glow{
  position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 70% at 8% 100%, rgba(32,44,173,.55), transparent 62%);
}
.slab__glow--right{background:radial-gradient(65% 80% at 92% 10%, rgba(32,44,173,.5), transparent 62%)}
.slab__glow--left{background:radial-gradient(60% 80% at 0% 40%, rgba(55,61,129,.55), transparent 60%)}

.band{margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.band .tag{margin-bottom:1.1rem;display:block}
.band--split{
  display:grid;gap:1.5rem;
  grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  align-items:end;
}
.band--split .tag{margin:0}

/* ---------- 8. About ---------- */
.two-col{
  display:grid;gap:clamp(1.5rem,3vw,3rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  padding-bottom:clamp(2.5rem,5vw,4.5rem);
}
.two-col__body{display:grid;gap:1rem;align-content:start}
.proof{
  display:grid;gap:0;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line-paper);
}
.proof__col{
  position:relative;
  padding:1.75rem 1.5rem 1.75rem 0;
  border-right:1px solid var(--line-paper);
}
.proof__col:last-child{border-right:0}
.proof__col--tint{
  padding-inline:1.5rem;
  border-radius:0 0 20px 20px;
  background:linear-gradient(170deg,var(--lav-2),rgba(199,203,236,.25));
}
.proof__big{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.9rem,4vw,3.1rem);line-height:1;letter-spacing:-.03em;
  color:var(--on-paper);
}
.proof__label{font-size:var(--t-sm);font-weight:600;margin-top:.9rem;color:var(--on-paper)}
.proof__note{font-size:var(--t-sm);color:var(--on-paper-mut);margin-top:.4rem;max-width:30ch;line-height:1.5}
.proof__col .spark{position:absolute;left:0;bottom:1rem}
.proof__col--tint .spark{left:1.5rem}

.vision{
  display:grid;gap:.9rem 3rem;
  grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  padding-top:clamp(2.5rem,5vw,4.5rem);
  align-items:start;
}
.vision .h3{grid-column:1}
.vision .body{grid-column:2}

/* ---------- 9. Card rail ---------- */
.rail{
  display:grid;
  grid-template-columns:1.5fr repeat(3,1fr);
  gap:clamp(.6rem,1vw,1rem);
  align-items:stretch;
}
.card{
  position:relative;
  display:flex;flex-direction:column;
  min-height:clamp(15rem,26vw,20rem);
  padding:1.5rem;
  border-radius:20px;
  border:1px solid var(--line-ink);
  background:linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  transition:transform .5s var(--ease-out), background .5s, border-color .5s;
}
.card:hover{transform:translateY(-6px);border-color:rgba(199,203,236,.4)}
.card--open{
  background:linear-gradient(165deg,var(--paper-2) 0%, var(--lav) 100%);
  border-color:transparent;color:var(--on-paper);
}
.card__num{
  position:absolute;top:1.25rem;right:1.5rem;
  font-family:var(--f-display);font-size:1.4rem;font-weight:500;opacity:.6;
}
.card .spark{position:absolute;top:1.5rem;left:1.5rem}
.card__title{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.1rem,1.6vw,1.6rem);line-height:1.1;letter-spacing:-.02em;
  margin-top:auto;
}
.card__body{
  font-size:var(--t-sm);line-height:1.55;margin-top:.75rem;
  color:var(--on-ink-mut);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease), opacity .4s, margin .4s;
}
.card--open .card__body{max-height:12rem;opacity:1;color:var(--on-paper-mut)}
.card__foot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1.5rem;
}
.card:not(.card--open) .card__foot .link-ul{opacity:0;transition:opacity .4s}
.card:not(.card--open):hover .card__foot .link-ul{opacity:.8}

/* ---------- 10. Accordion ---------- */
.acc{border-top:1px solid var(--line-paper)}
.acc__row{border-bottom:1px solid var(--line-paper)}
.acc__head{
  width:100%;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(1rem,3vw,3rem);align-items:center;
  padding:1.4rem 0;text-align:left;
  transition:opacity .3s;
}
.acc__head:hover{opacity:.62}
.acc__num{
  font-family:var(--f-display);font-size:var(--t-sm);
  width:2.4rem;height:2.4rem;border:1px solid var(--line-paper);border-radius:999px;
  display:grid;place-items:center;color:var(--on-paper-mut);
  transition:background .4s,color .4s,border-color .4s;
}
.is-open .acc__num{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.acc__txt{display:grid;gap:.2rem}
.acc__kicker{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--on-paper-mut)}
.acc__line{font-size:var(--t-body);font-weight:500;color:var(--on-paper);line-height:1.35}
.acc__ico{
  font-size:1.1rem;color:var(--on-paper-mut);
  display:inline-block;transform:rotate(90deg);
  transition:transform .45s var(--ease-out),color .3s;
}
.is-open .acc__ico{transform:rotate(0);color:var(--indigo)}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out)}
.is-open .acc__panel{grid-template-rows:1fr}
.acc__panel-in{overflow:hidden}
.acc__panel .body{
  padding:0 0 1.5rem;max-width:70ch;
  margin-left:clamp(0rem,calc(2.4rem + 3vw),5.4rem);
}
.tiles{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:.75rem;padding-bottom:1.75rem;
  margin-left:clamp(0rem,calc(2.4rem + 3vw),5.4rem);
}
.tile{
  position:relative;
  border:1px solid var(--line-paper);border-radius:18px;
  padding:1.4rem;display:flex;flex-direction:column;gap:.35rem;
  min-height:9rem;
}
.tile--tint{background:linear-gradient(160deg,var(--lav-2),rgba(199,203,236,.35));border-color:transparent}
.tile__big{font-family:var(--f-display);font-size:clamp(1.8rem,3.5vw,2.7rem);line-height:1;letter-spacing:-.03em;color:var(--on-paper)}
.tile__sub{font-size:var(--t-xs);color:var(--on-paper-mut);line-height:1.5}
.tile .spark{position:absolute;bottom:1.2rem;left:1.4rem}
.tile .btn{margin-top:auto;align-self:flex-start}

.closer{
  display:flex;gap:2rem;align-items:end;justify-content:space-between;flex-wrap:wrap;
  padding-top:clamp(2.5rem,5vw,4rem);
}
.closer .lead{max-width:62ch}

/* ---------- 11. Statement ---------- */
.statement{max-width:min(100%,62rem);display:grid;gap:1.5rem;justify-items:start}
.statement .body{max-width:72ch}

/* ---------- 12. Posts ---------- */
.posts{border-top:1px solid var(--line-paper)}
.post{
  display:grid;align-items:center;gap:clamp(1rem,2.5vw,2.5rem);
  grid-template-columns:7rem 12rem minmax(0,1fr) auto;
  padding:1.5rem 0;border-bottom:1px solid var(--line-paper);
  transition:opacity .3s;
}
.post:hover{opacity:.9}
.post__tag{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--on-paper-mut)}
.post__thumb{
  display:block;height:6rem;border-radius:14px;
  background:
    radial-gradient(120% 90% at 25% 15%, rgba(199,203,236,.9), transparent 55%),
    conic-gradient(from 210deg at 60% 60%, #202cad, #0a0a2e, #373d81, #05051a, #202cad);
  transition:transform .6s var(--ease-out);
}
.post__thumb--b{
  background:
    radial-gradient(120% 80% at 80% 20%, rgba(199,203,236,.75), transparent 58%),
    linear-gradient(115deg,#05051a,#202cad 45%,#0a0a2e 75%,#373d81);
}
.post:hover .post__thumb{transform:scale(1.03)}
.post__txt{display:grid;gap:.3rem}
.post__title{font-size:var(--t-lead);font-weight:500;line-height:1.25;letter-spacing:-.012em;color:var(--on-paper)}
.post__meta{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--on-paper-mut)}
.post__body{font-size:var(--t-sm);color:var(--on-paper-mut);line-height:1.55;max-width:70ch}

/* ---------- 13. Careers ---------- */
.careers{
  display:grid;gap:clamp(1.5rem,3vw,3rem);
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  align-items:start;
}
.careers__copy{display:grid;gap:1.25rem}
.roles{
  border:1px solid var(--line-ink);border-radius:22px;
  padding:1.75rem;display:grid;gap:.6rem;justify-items:start;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
}
.roles__head{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-mut)}
.roles__empty{font-family:var(--f-display);font-size:var(--t-h3);line-height:1.15;letter-spacing:-.015em}
.roles .btn{margin-top:.75rem}

/* ---------- 14. Footer ---------- */
.foot{
  position:relative;isolation:isolate;overflow:hidden;
  margin:0 clamp(.4rem,1vw,1rem) clamp(.4rem,1vw,1rem);
  border-radius:var(--slab-r);
  background:
    radial-gradient(90% 60% at 50% 78%, rgba(32,44,173,.65), transparent 60%),
    linear-gradient(180deg,#06060f,#04040a);
  padding:clamp(3.5rem,7vw,7rem) var(--gut) clamp(1.25rem,2vw,2rem);
}
.foot__streak{display:none}
.foot__inner{max-width:var(--maxw);margin:0 auto}
.foot__grid{
  display:grid;gap:clamp(2rem,4vw,3rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) minmax(0,1.1fr);
  align-items:start;
}
.brand--foot{margin:0;display:inline-flex}
.brand--foot img{height:clamp(56px,6vw,74px)}
.foot__tag{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-mut);margin-top:.9rem;line-height:1.8}
.foot__mid{display:grid;gap:1.1rem;justify-items:center;text-align:center}
.foot__lede{font-size:var(--t-sm);color:var(--on-ink-mut);max-width:46ch;line-height:1.6}
.cform{
  display:grid;grid-template-columns:1fr 1fr auto;gap:.5rem;
  width:min(100%,34rem);
  border:1px solid var(--line-ink);border-radius:999px;padding:.4rem .4rem .4rem 1.25rem;
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(8px);
}
.cform input{
  background:none;border:0;color:var(--on-ink);
  font-size:var(--t-sm);padding:.6rem .25rem;min-width:0;
}
.cform input::placeholder{color:var(--on-ink-mut)}
.cform input:focus{outline:none}
.cform input:focus-visible{outline:none;box-shadow:inset 0 -1px 0 var(--lav)}
.cform__note{font-size:var(--t-xs);color:var(--lav);min-height:1.2em;letter-spacing:.08em;text-transform:uppercase}
.foot__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.foot__cols > div{display:grid;gap:.45rem;align-content:start}
.foot__ch{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink);margin-bottom:.35rem}
.foot__cols a{font-size:var(--t-sm);color:var(--on-ink-mut);transition:color .3s}
.foot__cols a:hover{color:var(--on-ink)}
.foot__addr{font-size:var(--t-sm);color:var(--on-ink-mut);line-height:1.6}

.foot__word{
  position:relative;line-height:.72;text-align:center;
  margin:clamp(1.5rem,4vw,3rem) 0 clamp(1rem,2vw,1.5rem);
}
/* the light streak sits behind the wordmark, like the reference's lens flare */
.foot__word::before{
  content:"";position:absolute;z-index:-1;
  left:-30vw;right:-30vw;top:52%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(199,203,236,.9),#fff,rgba(199,203,236,.9),transparent);
  filter:blur(2px);
  box-shadow:0 0 90px 34px rgba(32,44,173,.8);
}
.foot__word .wordmark__solid,
.foot__word .wordmark__trail{font-size:clamp(4rem,20vw,17rem)}
.foot__word .wordmark__trail{
  -webkit-mask-image:linear-gradient(90deg,transparent 42%,#000 96%);
  mask-image:linear-gradient(90deg,transparent 42%,#000 96%);
}

.foot__legal{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  border-top:1px solid var(--line-ink);padding-top:1.25rem;
}
.foot__legal p,.foot__legal a{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-mut)}
.foot__legal a:hover{color:var(--on-ink)}

/* ---------- 15. Motion — directional blur reveal ---------- */
.reveal,.split .word{
  opacity:0;
  transform:translate3d(0,18px,0);
  filter:blur(12px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.split .word{
  display:inline-block;white-space:pre;
  transform:translate3d(-.18em,0,0);
}
.reveal.is-in,.split.is-in .word{
  opacity:1;transform:translate3d(0,0,0);filter:blur(0);
}
.wordmark__solid,.wordmark__trail{
  opacity:0;transform:translateX(-.14em);
  transition:opacity 1.2s var(--ease-out) .25s, transform 1.4s var(--ease-out) .25s, filter 1.4s var(--ease-out) .25s;
}
.wordmark__trail{filter:blur(42px)}
.is-in .wordmark__solid,.is-in .wordmark__trail,
.hero .wordmark__solid,.hero .wordmark__trail{opacity:1;transform:translateX(0)}
.hero .wordmark__trail{filter:blur(14px)}
.foot__word.is-in .wordmark__trail{filter:blur(16px)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal,.split .word,.wordmark__solid,.wordmark__trail{opacity:1;transform:none;filter:none}
  .hero__scroll{display:none}
}

/* ---------- 16. Responsive ---------- */
@media (max-width:1080px){
  .rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post{grid-template-columns:9rem minmax(0,1fr) auto}
  .post__thumb{grid-row:span 1}
  .foot__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot__mid{grid-column:1/-1;order:-1}
}
@media (max-width:860px){
  .nav__links,.nav .btn--pill{display:none}
  .nav__toggle{display:flex}
  .band--split{grid-template-columns:1fr}
  .h2--right{text-align:left}
  .two-col,.vision,.careers{grid-template-columns:1fr}
  .vision .h3,.vision .body{grid-column:1}
  .vision .body{margin-bottom:1rem}
  .proof{grid-template-columns:1fr}
  .proof__col{border-right:0;border-bottom:1px solid var(--line-paper);padding-right:0}
  .proof__col--tint{border-radius:20px;padding-inline:1.25rem;border-bottom:0}
  .proof__col .spark{position:static;display:block;margin-top:.75rem}
  .hero__lede{align-items:flex-start;text-align:left}
  .hero__foot{flex-direction:column;align-items:flex-start;gap:1.25rem}
  .hero__caption{text-align:left}
  .post{grid-template-columns:1fr auto;gap:.75rem 1rem}
  .post__tag{grid-column:1}
  .post__thumb{grid-column:1/-1;height:9rem;order:-1}
  .post__txt{grid-column:1}
  .closer{flex-direction:column;align-items:flex-start}
}
@media (max-width:620px){
  .rail{grid-template-columns:1fr}
  .card{min-height:auto}
  .card__body{max-height:12rem;opacity:1;margin-top:.75rem}
  .card:not(.card--open) .card__foot .link-ul{opacity:.8}
  .cform{grid-template-columns:1fr;border-radius:22px;padding:1rem;gap:.25rem}
  .cform input{border-bottom:1px solid var(--line-ink);padding:.75rem .25rem}
  .cform .btn{margin-top:.75rem;width:100%}
  .foot__grid{grid-template-columns:1fr}
  .foot__legal{justify-content:flex-start}
  .acc__head{grid-template-columns:auto minmax(0,1fr);gap:1rem}
  .acc__ico{display:none}
  .acc__panel .body,.tiles{margin-left:0}
  .tiles{grid-template-columns:1fr}
}

/* ==========================================================================
   17. Multi-page components
   ========================================================================== */

/* ---------- Page hero (interior pages) ---------- */
.phero{
  position:relative;isolation:isolate;overflow:hidden;
  margin:0 clamp(.4rem,1vw,1rem) clamp(.4rem,1vw,1rem);
  border-radius:var(--slab-r);
  padding:clamp(8rem,16vh,12rem) var(--gut) clamp(3rem,7vw,6rem);
  background:linear-gradient(180deg,#05050c,#07071a);
}
.phero__glow{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(90% 90% at 10% 120%, rgba(32,44,173,.8), transparent 62%),
    radial-gradient(70% 70% at 95% -10%, rgba(69,89,148,.55), transparent 62%);
}
.phero__inner{max-width:var(--maxw);margin:0 auto;display:grid;gap:1.4rem}
.phero h1{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(2.4rem,6vw,5rem);line-height:1;letter-spacing:-.03em;
  max-width:18ch;
}
.phero__sub{font-size:var(--t-lead);color:var(--on-ink-mut);max-width:58ch;line-height:1.45}
.phero__meta{
  display:flex;flex-wrap:wrap;gap:.5rem 2rem;margin-top:.75rem;
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-mut);
}

/* ---------- Split media (image + copy) ---------- */
.media{
  display:grid;gap:clamp(1.5rem,4vw,4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
}
.media--flip .media__fig{order:2}
.media__fig{
  margin:0;border-radius:22px;overflow:hidden;
  background:var(--ink-2);
  box-shadow:0 30px 80px -40px rgba(4,4,12,.7);
}
.media__fig img{width:100%;height:auto;display:block}
.media__fig figcaption{
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  padding:.85rem 1rem;color:var(--on-ink-mut);background:var(--ink-2);
}
.media__body{display:grid;gap:1rem;align-content:start}
.media__body .tag{margin-bottom:.25rem}
.media--tall .media__fig img{aspect-ratio:4/3;object-fit:cover}

/* ---------- Challenges list ---------- */
.chal{
  display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
  border-top:1px solid var(--line-paper);
}
.slab--ink .chal{border-top-color:var(--line-ink)}
.chal li{
  padding:1.5rem 1.25rem 1.5rem 0;
  border-right:1px solid var(--line-paper);
  display:grid;gap:.6rem;align-content:start;
}
.slab--ink .chal li{border-right-color:var(--line-ink)}
.chal li:last-child{border-right:0}
.chal__n{
  font-family:var(--f-display);font-size:var(--t-sm);
  width:2.2rem;height:2.2rem;border-radius:999px;display:grid;place-items:center;
  border:1px solid currentColor;opacity:.55;
}
.chal__t{font-size:var(--t-body);font-weight:500;line-height:1.3}

/* ---------- Bento feature grid ---------- */
.bento{
  display:grid;gap:.7rem;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:minmax(8.5rem,auto);
}
.bx{
  position:relative;overflow:hidden;border-radius:20px;
  padding:1.4rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.3rem;
  border:1px solid var(--line-ink);
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  transition:transform .5s var(--ease-out),border-color .5s;
}
.bx:hover{transform:translateY(-4px);border-color:rgba(199,203,236,.4)}
.bx__k{font-family:var(--f-display);font-size:clamp(1.4rem,2.4vw,2.1rem);line-height:1;letter-spacing:-.025em}
.bx__s{font-size:var(--t-sm);color:var(--on-ink-mut);line-height:1.45}
.bx--img{padding:0;border:0}
.bx--img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.bx--img .bx__cap{
  position:relative;z-index:1;padding:1.4rem;margin-top:auto;
  background:linear-gradient(0deg,rgba(4,4,12,.86),transparent);
  width:100%;
}
.bx--tint{background:linear-gradient(160deg,var(--lav-2),rgba(199,203,236,.4));border-color:transparent;color:var(--on-paper)}
.bx--tint .bx__s{color:var(--on-paper-mut)}
.bx--brand{background:linear-gradient(160deg,var(--brand),#2a3a६8);background:linear-gradient(160deg,var(--brand),#28345e);border-color:transparent}
.bx--w2{grid-column:span 2}
.bx--w3{grid-column:span 3}
.bx--h2{grid-row:span 2}

/* ---------- Use-case orbit + grid ---------- */
.orbit{display:grid;place-items:center;padding:1rem 0}
.orbit svg{width:min(100%,30rem);height:auto}
.uc{
  display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
}
.uc__item{
  position:relative;border-radius:20px;padding:1.4rem;
  border:1px solid var(--line-paper);
  display:grid;gap:.45rem;align-content:start;
  transition:transform .5s var(--ease-out),background .4s,border-color .4s;
}
.slab--ink .uc__item{border-color:var(--line-ink)}
.uc__item:hover{transform:translateY(-4px);background:var(--brand-tint);border-color:transparent}
.slab--ink .uc__item:hover{background:rgba(69,89,148,.28);border-color:rgba(199,203,236,.35)}
.uc__ico{width:1.6rem;height:1.6rem;color:var(--brand);margin-bottom:.35rem}
.slab--ink .uc__ico{color:var(--lav)}
.uc__ico svg{width:100%;height:100%}
.uc__t{font-family:var(--f-display);font-size:1.05rem;font-weight:500;line-height:1.2;letter-spacing:-.01em}
.uc__fr{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--on-paper-mut)}
.slab--ink .uc__fr{color:var(--on-ink-mut)}
.uc__d{font-size:var(--t-sm);line-height:1.5;color:var(--on-paper-mut)}
.slab--ink .uc__d{color:var(--on-ink-mut)}

/* ---------- Segments row ---------- */
.segs{display:flex;flex-wrap:wrap;gap:.5rem}
.seg{
  font-size:var(--t-sm);padding:.6rem 1.1rem;border-radius:999px;
  border:1px solid var(--line-paper);
}
.slab--ink .seg{border-color:var(--line-ink)}

/* ---------- Founder / person ---------- */
.person{
  display:grid;gap:clamp(1.5rem,3vw,3rem);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:center;
}
.person__fig{margin:0;border-radius:22px;overflow:hidden;position:relative}
.person__fig img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover;object-position:30% center}
.person__body{display:grid;gap:.75rem;align-content:start}
.person__name{font-family:var(--f-display);font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.05;letter-spacing:-.02em}
.person__role{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-mut)}
.slab--paper .person__role{color:var(--on-paper-mut)}
.person__list{display:grid;gap:.35rem;margin-top:.5rem}
.person__list li{font-size:var(--t-sm);color:var(--on-ink-mut);padding-left:1.1rem;position:relative}
.slab--paper .person__list li{color:var(--on-paper-mut)}
.person__list li::before{content:"✦";position:absolute;left:0;color:var(--brand);font-size:.6rem;top:.45em}
.slab--ink .person__list li::before{color:var(--lav)}

/* team photo — wide banner, cropped toward the group on narrow screens */
.team{margin:0;border-radius:22px;overflow:hidden}
.team img{width:100%;height:auto;display:block;aspect-ratio:2400/914;object-fit:cover;object-position:52% 60%}
@media (max-width:860px){.team img{aspect-ratio:4/3}}

/* founder — compact card under the team photo */
.person--sm{
  grid-template-columns:clamp(7rem,14vw,10rem) minmax(0,1fr);
  align-items:start;max-width:52rem;
  padding:clamp(1.25rem,2.5vw,1.75rem);border-radius:22px;border:1px solid var(--line-ink);
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
}
.person--sm .person__fig{border-radius:16px}
.person--sm .person__name{font-size:clamp(1.3rem,2vw,1.6rem)}
.person--sm .person__body{gap:.5rem}
@media (max-width:860px){.person--sm .person__fig{max-width:8rem}}

/* ---------- Compare strip ---------- */
.cmp{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.cmp__c{
  border-radius:20px;padding:1.4rem;border:1px solid var(--line-ink);
  display:grid;gap:.4rem;align-content:start;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
}
.cmp__y{font-family:var(--f-display);font-size:1.5rem;letter-spacing:-.02em}
.cmp__l{font-size:var(--t-sm);color:var(--on-ink-mut);line-height:1.5}

/* ---------- Big CTA band ---------- */
.ctaband{
  display:grid;gap:1.5rem;justify-items:start;
  max-width:60rem;
}
.ctaband__row{display:flex;flex-wrap:wrap;gap:.6rem}

/* ---------- Contact detail cards ---------- */
.cx{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.cx__c{
  border:1px solid var(--line-ink);border-radius:20px;padding:1.5rem;
  display:grid;gap:.45rem;align-content:start;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
}
.cx__h{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-mut)}
.cx__v{font-family:var(--f-display);font-size:1.15rem;line-height:1.3;letter-spacing:-.01em;overflow-wrap:anywhere}
.cx__n{font-size:var(--t-sm);color:var(--on-ink-mut);line-height:1.55}

/* ---------- Section spacing helper ---------- */
.stack{display:grid;gap:clamp(2.5rem,6vw,5rem)}
.rule{border:0;border-top:1px solid var(--line-paper);margin:0}
.slab--ink .rule{border-top-color:var(--line-ink)}

/* ---------- Responsive for the above ---------- */
@media (max-width:1080px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bx--w3{grid-column:span 2}
}
@media (max-width:860px){
  .media,.person{grid-template-columns:1fr}
  .media--flip .media__fig{order:0}
  .chal li{border-right:0;border-bottom:1px solid var(--line-paper);padding-right:0}
  .slab--ink .chal li{border-bottom-color:var(--line-ink)}
  .chal li:last-child{border-bottom:0}
  .phero{padding-top:clamp(7rem,20vh,9rem)}
}
@media (max-width:620px){
  .bento{grid-template-columns:1fr}
  .bx--w2,.bx--w3{grid-column:span 1}
  .bx--h2{grid-row:span 1}
}

/* ---------- 18. Fixes / dark-slab variants ---------- */

/* Editorial post rows on a dark slab */
.slab--ink .posts{border-top-color:var(--line-ink)}
.slab--ink .post{border-bottom-color:var(--line-ink)}
.slab--ink .post__title{color:var(--on-ink)}
.slab--ink .post__tag,
.slab--ink .post__meta,
.slab--ink .post__body{color:var(--on-ink-mut)}
.slab--ink .arrow--btn{color:var(--on-ink)}

/* Figures holding light-background diagrams shouldn't sit on an ink plate */
.media__fig--light{background:#fff}
.media__fig--light figcaption{background:var(--paper-2);color:var(--on-paper-mut)}

/* Ghost button that adapts to its slab */
.btn--ghost{border:1px solid var(--line-paper);color:var(--on-paper)}
.slab--ink .btn--ghost,.phero .btn--ghost{border-color:var(--line-ink);color:var(--on-ink)}
.btn--ghost:hover{background:rgba(69,89,148,.12)}

/* Mobile: swap the full lockup for the square mark in the nav */
@media (max-width:860px){
  .brand img{display:none}
  .brand__mark{display:block}
  .brand__mark img{display:block}
}

/* Use-case grid: 4 up on desktop, never a cramped 5th column */
.uc{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){ .uc{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .uc{grid-template-columns:1fr} }

/* Bento image crops */
.bx--img img{object-position:center}
.bx--img.bx--right img{object-position:78% center}