/* ── Flap tile primitives (font-agnostic) ──
   .flap-tile is the visual box (can have real CSS padding for a card
   look). .flap-inner is the glyph-accurate reference box the top/bottom
   split math uses — keeping these separate means padding never throws
   off where the crease line sits relative to the actual letterform. */
.flap-tile{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:top;
}
.flap-inner{
  position:relative;
  height:var(--flap-h,1.15em);
  overflow:hidden;
  letter-spacing:0;
}
.flap-top,.flap-bottom,.flap-card{
  position:absolute;left:0;width:100%;height:50%;
  overflow:hidden;
}
.flap-top{top:0;}
.flap-bottom{bottom:0;}
.flap-top span,.flap-bottom span,.flap-card span{
  display:block;
  position:absolute;
  left:50%;
  width:max-content;
  line-height:var(--flap-h,1.15em);
  letter-spacing:0;
}
.flap-top span{top:0;transform:translateX(-50%);}
.flap-card span{top:0;transform:translateX(-50%);}
.flap-bottom span{bottom:0;transform:translateX(-50%);}
.flap-card{top:0;height:50%;transform-origin:bottom;backface-visibility:hidden;}
.flap-card.flip{animation:flapDown .15s linear;}
@keyframes flapDown{
  from{transform:rotateX(0deg);}
  to{transform:rotateX(-90deg);}
}

/* ── Nav logo instance ── */
.flap-logo{
  display:inline-flex;
  font-family:"JetBrains Mono",monospace;
  font-weight:600;
  font-size:13px;
  letter-spacing:1.56px;
  color:var(--ink,rgb(15,21,38));
  --flap-h:1.3em;
}

/* ── Hero heading instance ──
   Tiles inherit h1.hero-h1's font (Space Grotesk, weight 700, huge clamp
   size) since they're built inside the existing .hl line blocks. Gradient
   line keeps working: text-fill is applied per glyph layer, same technique
   already used by .hero-letter. */
.hero-h1 .hl{--flap-h:1.15em;}
.hero-h1 .hl .flap-tile+.flap-tile{margin-left:.01em;}
.hero-h1 .hl.grad .flap-top span,
.hero-h1 .hl.grad .flap-bottom span,
.hero-h1 .hl.grad .flap-card span{
  background:linear-gradient(110deg,#0078d4 10%,#22d3ee 60%,#5eead4 95%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ── Big brand board — opaque cards, like an airport departure board.
   Re-triggerable on hover; solid tiles unlike the transparent hero/nav
   variants above. ── */
.flap-board-wrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;}
.flap-board{
  display:inline-flex;
  font-family:var(--display,"Space Grotesk",sans-serif);
  font-weight:800;
  font-size:clamp(32px,9vw,130px);
  letter-spacing:-.01em;
  color:#0d1420;
  --flap-h:1.12em;
  cursor:pointer;
}
.flap-board .flap-tile{
  background:#eef1f5;
  border-radius:6px;
  margin-right:8px;
  padding:.42em .22em;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.flap-board .flap-tile:last-child{margin-right:0;}
.flap-board .flap-top{box-sizing:border-box;border-bottom:1px solid rgba(0,0,0,.14);}