:root {
  --mb-ink:            #070C2B;  
  --mb-indigo-deep:    #0B1550;  
  --mb-indigo:         #112182;  
  --mb-indigo-mid:     #1D34A8;  
  --mb-indigo-bright:  #2C4AD6;  
  --mb-indigo-light:   #6B84F0;  
  --mb-tint:           #DDE3FA;  
  --mb-wash:           #F1F4FD;  
  --mb-body:           #33384A;  
  --mb-muted:          #6E7589;  
  --mb-rule:           #D4D9E8;  
  --mb-white:          #FFFFFF;
  --mb-sans: "Avenir Next", "Avenir", "Helvetica Neue", Helvetica, sans-serif;
}
:root {
  --font: "Avenir Next", "Avenir", "Helvetica Neue", Helvetica, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --edge: clamp(1rem, 4vw, 4.125rem);
  --g: 0.75rem;
  --cols: 12;
  --band: clamp(5.5rem, 11vw, 10.5rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --pop: #67FF23;
  --soft: #EEFFFF;
  --head: var(--mb-white);
  --text: var(--mb-tint);
  --label: var(--soft);
  --accent: var(--soft);
  --hair: color-mix(in srgb, var(--soft) 34%, transparent);
}
html { font-size: 16px; }
@media (min-width: 1681px) { html { font-size: calc(100vw / 105); } }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.55;
  color: var(--text); background: var(--mb-indigo); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ol { margin: 0; }
ol { padding: 0; list-style: none; }
a { color: inherit; }
::selection { background: var(--mb-indigo-bright); color: var(--mb-white); }
.skip { position: absolute; left: -9999px; top: 0; background: var(--mb-white); color: var(--mb-indigo); padding: 0.625rem 1rem; z-index: 30; }
.skip:focus { left: 0.5rem; top: 0.5rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 0.25rem; }
.fluid, .veil { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
main { position: relative; z-index: 1; }
.flip { display: none; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: var(--mb-white); isolation: isolate; mix-blend-mode: darken; }
.ink-on .flip { display: block; }
.flip .stage { position: absolute; inset: 0; }
.flip .top { z-index: auto; }
.flip .veil { z-index: 9; }
.flip *, .flip *::before, .flip *::after { color: var(--mb-indigo) !important; border-color: var(--mb-indigo) !important; }
.flip img, .flip .foot img { filter: none; opacity: 1; }
.flip .mail { background-image: linear-gradient(var(--mb-indigo), var(--mb-indigo)) !important; }
.flip .btn { background: transparent !important; }
.flip .btn::before { display: none; }
.flip .btn.is-hover { background: var(--pop) !important; }
.guides {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; justify-content: space-between; padding: 0 var(--edge);
  opacity: .5; transition: opacity .4s;
}
.guides i {
  width: var(--g); flex: none;
  background:
    repeating-linear-gradient(to bottom, var(--hair) 0 0.25rem, transparent 0.25rem 0.5rem) left / 1px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--hair) 0 0.25rem, transparent 0.25rem 0.5rem) right / 1px 100% no-repeat;
}
.no-grid .guides { opacity: 0; }
.row {
  position: relative;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--g); padding: 0 calc(var(--edge) + var(--g));
}
.mono { font-family: var(--mono); font-size: 0.75rem; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; color: var(--label); }
a.mono { text-decoration: none; }
a.mono:hover { color: var(--head); }
.hero, .contact { position: relative; overflow: hidden; background: var(--mb-indigo); isolation: isolate; }
.stage { position: relative; display: flex; flex-direction: column; min-height: 100svh; will-change: transform; }
.js .hero { position: sticky; top: 0; z-index: 0; height: 100svh; }
.js .contact { position: sticky; bottom: 0; z-index: 0; height: 100svh; }
.js .stage { height: 100%; }
.js .hero { visibility: visible; }
.js.past-hero .hero { visibility: hidden; }
.js .contact { visibility: hidden; }
.js.at-end .contact { visibility: visible; }
.top { position: absolute; inset: 0 0 auto 0; z-index: 5; padding: 1.375rem 0 1.625rem; }
.top .row { align-items: start; }
.top-name { grid-column: 1 / span 3; color: var(--head); }
.top-role { grid-column: 4 / span 3; }
.top-nav { grid-column: 7 / span 4; display: flex; flex-direction: column; align-items: flex-start; }
.top-mail { grid-column: 11 / span 2; justify-self: end; color: var(--pop); border-bottom: 1px solid var(--pop); }
a.top-mail:hover { color: var(--mb-white); }
.js #nav { position: fixed; z-index: 10; clip-path: inset(0 0 100% 0); }
.js .top { opacity: 0; pointer-events: none; transition: opacity .35s; }
.js.nav-on .top, .js .top:focus-within { opacity: 1; pointer-events: auto; }
#nav[data-ground="white"] {
  --head: var(--mb-ink); --label: var(--mb-indigo-mid); --pop: var(--mb-indigo-bright);
  background: linear-gradient(var(--mb-white) 55%, transparent);
}
#nav[data-ground="white"] a.top-mail:hover, #nav[data-ground="white"] a.mono:hover { color: var(--mb-ink); }
#nav[data-ground="blue"] {
  --head: var(--mb-white); --label: var(--mb-tint);
  background: linear-gradient(var(--mb-indigo) 55%, transparent);
}
.hero-head { margin: auto 0; }
.hero-row { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: clamp(2rem, 5vw, 4.5rem); }
h1 {
  grid-column: 1 / -1; color: var(--mb-white);
  font-size: clamp(2.3rem, min(7.6vw, 13.5svh), 8.2rem); font-weight: 600; line-height: .98; letter-spacing: -.035em;
  text-wrap: balance;
}
h1 em { font-style: normal; color: var(--pop); }
.hero-tag { grid-column: 1 / span 3; color: var(--pop); }
.lead { grid-column: 4 / span 5; font-size: clamp(1.05rem, 1.45vw, 1.3rem); line-height: 1.5; max-width: 30em; }
.hero-cta { grid-column: 10 / span 3; justify-self: end; align-self: end; }
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 0.875rem; overflow: hidden;
  font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none;
  padding: 1.125rem 1.5rem; border-radius: 2px; background: var(--mb-white); color: var(--mb-indigo);
  white-space: nowrap;
  transition: color .25s;
}
.btn span, .btn i { position: relative; z-index: 1; }
.btn::before { content: ""; position: absolute; inset: 0; background: var(--pop); transform: translateY(101%); transition: transform .4s var(--ease); }
.btn:hover { color: var(--mb-indigo); }
.btn:hover::before { transform: none; }
.btn i, .mail i { flex: none; width: 1.125rem; height: 2px; background: currentColor; position: relative; transition: width .3s var(--ease); }
.btn i::after, .mail i::after { content: ""; position: absolute; right: 0; top: -0.25rem; width: 0.5rem; height: 0.5rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.btn i { margin-right: 0.75rem; transition: width .3s var(--ease), margin-right .3s var(--ease); }
.btn:hover i, .btn.is-hover i { width: 1.875rem; margin-right: 0; }
.cover {
  position: relative; z-index: 1;
  box-shadow:
    0 -1.75rem 4.375rem -0.625rem color-mix(in srgb, var(--mb-ink) 55%, transparent),
    0 1.75rem 4.375rem -0.625rem color-mix(in srgb, var(--mb-ink) 55%, transparent);
}
.band { position: relative; padding: var(--band) 0; }
.band-white {
  background: var(--mb-white);
  --head: var(--mb-ink); --text: var(--mb-body); --label: var(--mb-indigo-mid); --accent: var(--mb-indigo-bright);
  --hair: color-mix(in srgb, var(--mb-indigo) 24%, transparent);
  color: var(--text);
}
.band-blue {
  background: var(--mb-indigo);
  --head: var(--mb-white); --text: var(--mb-tint); --label: var(--mb-tint); --accent: var(--mb-tint);
  --hair: color-mix(in srgb, var(--mb-white) 26%, transparent);
  color: var(--text);
}
.head { align-items: start; margin-bottom: clamp(2.25rem, 5vw, 4.5rem); }
.label { grid-column: 1 / span 3; padding-top: .9em; }
h2 { grid-column: 4 / -1; color: var(--head); font-size: clamp(1.9rem, 4.6vw, 4.4rem); font-weight: 600; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
.index li { align-items: start; padding-top: 1.875rem; padding-bottom: 2.125rem; }
.index li::before, .index li:last-child::after {
  content: ""; position: absolute; left: var(--edge); right: var(--edge); top: 0; height: 1px;
  background: repeating-linear-gradient(to right, var(--hair) 0 0.25rem, transparent 0.25rem 0.5rem);
}
.index li:last-child::after { top: auto; bottom: 0; }
.idx { grid-column: 1 / span 3; font-size: 0.875rem; padding-top: .7em; transition: color .3s; }
.index h3 { grid-column: 4 / span 4; color: var(--head); font-size: clamp(1.5rem, 2.7vw, 2.6rem); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; transition: transform .5s var(--ease), color .3s; }
.index h3 + p { grid-column: 8 / span 3; padding-top: .4em; }
.tags { grid-column: 11 / span 2; padding-top: .7em; }
@media (hover: hover) and (pointer: fine) {
  .index li:hover h3 { transform: translateX(var(--g)); color: var(--accent); }
  .index li:hover .idx { color: var(--head); }
}
.stat { grid-column: span 4; padding-top: 1.375rem; position: relative; padding-right: var(--g); }
.stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: repeating-linear-gradient(to right, var(--hair) 0 0.25rem, transparent 0.25rem 0.5rem); }
.big { color: var(--head); font-size: clamp(2.6rem, 6vw, 6.2rem); font-weight: 600; line-height: 1; letter-spacing: -.04em; margin-bottom: 1.25rem; white-space: nowrap; transition: transform .5s var(--ease); }
.stat:hover .big { transform: translateX(var(--g)); }
.stat p + p { max-width: 24em; }
.steps li { grid-column: span 4; padding-right: var(--g); }
.steps h3 { color: var(--head); font-size: clamp(1.3rem, 1.9vw, 1.75rem); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; margin: 0.875rem 0 0.75rem; }
.steps p + h3 + p { max-width: 24em; }
.contact-main { margin: auto 0; padding: 3.75rem 0 1.875rem; }
.contact .head { margin-bottom: clamp(1.75rem, 6svh, 4.5rem); }
.contact .label { color: var(--pop); }
.mail {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  color: var(--mb-white); text-decoration: none;
  font-size: clamp(1.45rem, 6.3vw, 6.6rem); font-weight: 600; line-height: 1.1; letter-spacing: -.04em;
  padding-bottom: .16em;
  background: linear-gradient(var(--pop), var(--pop)) 0 100% / 100% 2px no-repeat;
  transition: color .3s, background-size .5s var(--ease);
}
.mail i { width: .55em; height: .05em; min-height: 2px; }
.mail i::after { width: .22em; height: .22em; top: -.095em; border-width: max(2px, .05em); }
.mail:hover { color: var(--pop); }
.mail:hover, .mail.is-hover { background-size: 100% 0.375rem; }
.mail:hover i, .mail.is-hover i { width: .9em; }
.mail-note { grid-column: 1 / -1; margin-top: 1.125rem; }
.foot { padding: 1.75rem 0 2.125rem; }
.foot .row { align-items: center; }
.foot img { grid-column: 1 / span 3; width: 9.375rem; filter: brightness(0) invert(1); opacity: .9; }
.foot-g { grid-column: 4 / span 4; }
.foot-c { grid-column: 8 / -1; justify-self: end; }
@media (hover: none), (pointer: coarse) { .foot-g { visibility: hidden; } }
.note { margin: auto 0; padding: 0 calc(var(--edge) + var(--g)); }
.note h1 { font-size: clamp(2.4rem, 6vw, 5rem); margin-bottom: 0; }
.note p { margin-top: 1.375rem; font-size: 1.15rem; max-width: 28em; }
.note .btn { margin-top: 2.375rem; }
.cover { --arc: 4rem; }
.js .cover { box-shadow: none; }
.arc-shadow { position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; filter: blur(1.625rem); opacity: .5; }
.arc-shadow i { position: absolute; inset: 0; background: var(--mb-ink); }
.js .cover .band:not(:last-child) { padding-bottom: calc(var(--band) + var(--arc)); }
.js .cover { box-shadow: none; }
.arc-shadow { position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; filter: blur(1.625rem); opacity: .5; }
.arc-shadow i { position: absolute; inset: 0; background: var(--mb-ink); }
.js .cover .band:not(:last-child) { padding-bottom: calc(var(--band) + var(--arc)); }
.js .cover .band { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.js .cover .band:not(:last-child) { min-height: calc(100svh + var(--arc)); }
.js .cover .band + .band { margin-top: calc(-1 * var(--arc)); }
.js .rv { opacity: 0; transform: translateY(1.25rem); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.still .rv { transition: none; }
@media (max-width: 860px) {
  :root { --cols: 4; }
  .guides i:nth-child(n+6) { display: none; }
  .top { padding-bottom: 1.125rem; }
  .top-name { grid-column: 1 / span 2; }
  .top-role, .top-nav { display: none; }
  .top-mail { grid-column: 3 / span 2; }
  .hero-tag { display: none; }
  .hero-head { margin: auto 0 0; padding-top: 4.5rem; }
  .hero-row { position: relative; margin: 1.75rem 0 auto; padding-bottom: 0; }
  .lead, .hero-cta { grid-column: 1 / -1; justify-self: start; }
  .hero-cta { margin-top: 1.75rem; }
  .label, h2 { grid-column: 1 / -1; }
  .label { padding: 0 0 0.875rem; }
  .idx, .index h3, .index h3 + p { grid-column: 1 / -1; }
  .idx { padding: 0 0 0.625rem; }
  .index h3 + p { padding-top: 0.75rem; }
  .tags { display: none; }
  .stat, .steps li { grid-column: 1 / -1; padding-right: 0; }
  .stat + .stat, .steps li + li { margin-top: 2.25rem; }
  .mail i { display: none; }
  .foot img { grid-column: 1 / -1; width: 8.125rem; }
  .foot-g { display: none; }
  .foot-c { grid-column: 1 / -1; justify-self: start; margin-top: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .js .rv { opacity: 1; transform: none; }
}