@font-face{font-family:"Flexa";src:url(fonts/flexa-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Flexa";src:url(fonts/flexa-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Flexa";src:url(fonts/flexa-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Flexa Black";src:url(fonts/flexa-black.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Flexa XC";src:url(fonts/flexa-xc-lazer.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Flexa XE";src:url(fonts/flexa-xe-black.woff2) format("woff2");font-display:swap}
:root{
  --paper:#FFFFFF; --ink:#0A0A0A; --green:#28FF00; --grey:#E6E6E3; --mute:#6B6E6B; --rule:#0A0A0A;
  --body:"Flexa","Helvetica Neue",Arial,sans-serif; --sub:"Flexa","Helvetica Neue",Arial,sans-serif;
  --gut:clamp(16px,3vw,40px);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font-family:var(--body);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:var(--green);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* micro label rows, justified */
.row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.row a{text-decoration:none}
.row a:hover{text-decoration:underline;text-underline-offset:4px}

/* splash */
.splash{min-height:100vh;min-height:100svh;background:var(--green);display:grid;grid-template-rows:auto 1fr auto;padding:var(--gut)}
.splash .mark{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:40px 0}
.splash .mark img,.splash .mark .fv-anim{width:clamp(240px,46vw,620px);height:auto;display:block}
.splash .tag,.splash .seedmark,.splash .line,.splash .enter{animation:fvFade .6s 2.3s both}
.splash .seedmark{display:block;line-height:0}
.splash .seedmark img{display:block;width:clamp(64px,6vw,88px);height:auto}
.splash .tag{font-family:var(--body);font-weight:700;font-size:clamp(13px,1.5vw,17px);letter-spacing:.14em;text-transform:uppercase;text-align:center;margin-top:-4px}
@keyframes fvFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.splash .line{font-family:var(--sub);font-style:italic;font-size:clamp(14px,1.6vw,18px);letter-spacing:.08em;text-transform:uppercase;text-align:center}
.splash .enter{display:flex;gap:10px}
.btn{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:14px 26px;border:2px solid var(--ink)}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--green)}

/* inner pages */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px var(--gut);border-bottom:1px solid var(--rule)}
.top .logo img{display:block;width:72px;height:auto}
.top nav{display:flex;gap:26px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.top nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.top nav a:hover,.top nav a[aria-current="page"]{border-bottom-color:var(--ink)}
main{padding:0 var(--gut)}
.kicker{font-family:var(--sub);font-style:italic;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin:48px 0 0}
h1{font-weight:700;font-size:clamp(56px,13vw,200px);line-height:.86;letter-spacing:-.04em;text-transform:uppercase;margin:10px 0 0}
.lede{max-width:46ch;font-size:clamp(16px,1.6vw,20px);margin:22px 0 0}

/* client grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);margin:56px 0 0;border-top:2px solid var(--rule)}
.cell{position:relative;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);padding:22px 20px 26px;min-height:240px;display:flex;flex-direction:column;justify-content:space-between;transition:background .15s}
.cell:nth-child(3n){border-right:0}
.cell:hover{background:var(--green)}
.cell .no{font-size:11px;font-weight:700;letter-spacing:.16em}
.cell .name{font-weight:700;font-size:clamp(26px,3vw,40px);line-height:.95;letter-spacing:-.02em;text-transform:uppercase;margin:28px 0 14px}
.cell .name img{display:block;max-width:70%;max-height:64px;width:auto;height:auto}
.cell .what{font-size:13px;color:var(--mute);max-width:34ch}
.cell:hover .what{color:var(--ink)}
.cell .yr{position:absolute;top:22px;right:20px;font-size:11px;font-weight:700;letter-spacing:.16em}

/* contact */
.mail{display:inline-block;font-weight:700;font-size:clamp(28px,6.4vw,92px);line-height:.95;letter-spacing:-.03em;text-decoration:none;margin:40px 0 0;border-bottom:6px solid var(--green);word-break:break-all}
.mail:hover{background:var(--green)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:64px 0 0;border-top:2px solid var(--rule)}
.facts div{padding:18px 20px 22px 0;border-right:1px solid var(--rule);padding-left:20px}
.facts div:first-child{padding-left:0}
.facts div:last-child{border-right:0}
.facts b{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}

footer{margin:96px 0 0;padding:16px var(--gut) 22px;border-top:1px solid var(--rule)}

@media (max-width:860px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .cell:nth-child(3n){border-right:1px solid var(--rule)}
  .cell:nth-child(2n){border-right:0}
  .facts{grid-template-columns:1fr}
  .facts div{border-right:0;border-bottom:1px solid var(--rule);padding-left:0}
}
@media (max-width:520px){
  .grid{grid-template-columns:1fr}
  .cell{border-right:0 !important;min-height:180px}
  .top nav{gap:16px}
}
@media (prefers-reduced-motion:reduce){.cell{transition:none}.splash .seedmark,.splash .tag,.splash .line,.splash .enter{animation:none}}

/* logo animation */

.fv-anim{--ink:#0A0A0A;--bg:#28FF00;display:block;overflow:visible}
.fv-anim .ink{fill:var(--ink)} .fv-anim .bg{fill:var(--bg)}
.fv-anim .drop,.fv-anim .squash,.fv-anim .handle,.fv-anim .lt{transform-box:fill-box}
.fv-anim .drop{animation:fvDrop .62s cubic-bezier(.5,0,.75,0) both}
.fv-anim .squash{transform-origin:50% 100%;animation:fvSquash .9s .58s both, fvSettle .7s 2.55s both}
.fv-anim .handle{transform-origin:50% 100%;animation:fvHandle .95s .78s both}
.fv-anim .whole{animation:fvWhole 1.74s step-end both}
.fv-anim .lt{transform-origin:50% 100%;animation:fvLetter .58s calc(1.05s + var(--i) * .09s) both}
@keyframes fvWhole{0%{opacity:0}100%{opacity:1}}
@keyframes fvDrop{0%{transform:translateY(-140%)}100%{transform:translateY(0)}}
@keyframes fvSquash{0%{transform:scale(1.06,.86)}28%{transform:scale(.97,1.05)}52%{transform:scale(1.02,.97)}74%{transform:scale(.995,1.01)}100%{transform:scale(1,1)}}
@keyframes fvHandle{0%{transform:scaleY(0);opacity:0}1%{opacity:1}42%{transform:scaleY(1.14) rotate(0deg)}60%{transform:scaleY(.94) rotate(-5deg)}76%{transform:scaleY(1.03) rotate(3deg)}90%{transform:scaleY(1) rotate(-1deg)}100%{transform:scaleY(1) rotate(0)}}
@keyframes fvLetter{0%{transform:translateY(-62%) scale(.9);opacity:0}18%{opacity:1}55%{transform:translateY(4%) scale(1.04,.94)}75%{transform:translateY(-3%) scale(.98,1.02)}100%{transform:translateY(0) scale(1)}}
@keyframes fvSettle{0%{transform:translateY(0) rotate(0)}30%{transform:translateY(1.2%) rotate(-1.4deg)}60%{transform:translateY(-.4%) rotate(.9deg)}100%{transform:translateY(0) rotate(0)}}
@media (prefers-reduced-motion:reduce){.fv-anim *{animation:none !important}}

.cell.is-link .hit{color:inherit;text-decoration:none}
.cell.is-link .hit::after{content:"";position:absolute;inset:0}
.cell .ig{position:absolute;right:20px;bottom:22px;z-index:1;display:flex;gap:10px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:0;transition:opacity .15s}
.cell .ig a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.cell.is-link:hover .ig,.cell.is-link:focus-within .ig{opacity:1}
@media (hover:none){.cell .ig{opacity:1}}

/* mixed width display type, after the GT Flexa cover */
.mix{font-weight:400;letter-spacing:.01em}
.mix span{font-family:"Flexa Black",var(--body)}
.mix .xc{font-family:"Flexa XC",var(--body)}
.mix .xe{font-family:"Flexa XE",var(--body)}
.hello{text-transform:none;margin-top:10px}
.hello a{text-decoration:none;display:inline-block}
.hello a:hover{background:var(--green)}
.hello .dom{display:block;font-family:var(--body);font-weight:700;font-size:clamp(20px,3.2vw,46px);letter-spacing:-.01em;line-height:1;margin-top:14px}