/* Tablet only (768–991px; bounded so it can't leak into the ≤767px range,
   which Webflow already zeroes out correctly). Webflow's own tablet rules
   give these sections a 58px (3.625rem) left inset against a 28px/0 right
   one — the same gap doubled on one side. Match left to right. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .artworks-wrapper { padding-left: 1.75rem; }
  .hello-wrapper { margin-left: 0; }
  .get-in-touch-wrapper { margin-left: 0; }
  .footer { padding-left: 1.5rem; }
}

/* Tablet only: line up the page's recurring left-aligned text blocks — the nav
   name, the hero heading, every case title, and the skills labels — on one
   shared x (108px from viewport left, i.e. 80px past the container's own
   28px edge). The case title's inset is the anchor; the other three each had
   their own, different inset baked into Webflow's tablet rules. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .kb-initials { margin-left: 68px; }
  .hello-wrapper { padding-left: 80px; }
  .skillstet { padding-left: 80px; }
  /* The name text moved 20px right above; the icon is a separate sibling
     element and needs its own nudge to keep pace — 16px on top of the
     sitewide -1px stem alignment. Three classes (not two) so this outweighs
     `.body .kb-logo` below regardless of source order — equal specificity
     would let that later, unconditional rule win over this scoped one. */
  .body .kb-logo.kb-logo-head { transform: translateX(15px); }

  /* Every card logo badge (Beefy/FinchTrade/MarketGuard/Entangle) shares this
     base class — one rule moves all four. Right-anchored, so shifting right
     means shrinking the right inset: 80px → 56px. */
  .logo-wraper { padding-right: 3.5rem; }

  /* Missed in the earlier alignment pass — this text has its own tablet-only
     vendor rule (margin-left: 7rem = 112px) separate from the .artworks-wrapper/
     .hello-wrapper/.footer pattern found earlier, so it wasn't caught by that
     fix. The footer's own CV/social links already sit at x≈106; match it. */
  .txt-12.copyright { margin-left: 56px; }
}

/* Site header — the one row that repeats on every page: the mark, the name and
   the two contact links. It used to be tuned per page, which is how the case
   pages ended up 4px tighter than the home page. One file, loaded everywhere
   the header is, so the row cannot drift again. */

/* Contact links: 24px between them. The shell's own 28px left the pair reading
   as two separate items rather than one group. */
.body .kb-links { column-gap: 24px; }

/* Logo mark sits 1px further left, so its stem lines up with the text below
   rather than with its own bounding box. */
.body .kb-logo { transform: translateX(-1px); }

/* Phone: the mark points the other way, so it leans into the text instead of
   away from it in the tighter header. The preloader logo is excluded — it is
   animated by Webflow IX2, which resets the transform unconditionally when the
   exit animation fires. Keeping scaleX(-1) here would cause a visible flip
   jump at the moment IX2 takes over (t ≈ 600 ms into the preloader animation). */
@media screen and (max-width: 767px) {
  .body .kb-logo { transform: translateX(-1px) scaleX(-1); }
  .body .kb-logo.preloader-logo { transform: none; }
}

/* The contact row sits on the same line of type as the name to its left. Left to
   itself the row is as tall as the close cross (32px), which is 7px taller than
   the line, and bottom-alignment pushed the links below it. Pin the row to the
   line's own height instead. */
.body .kb-links {
  height: 25px;
  align-items: flex-end;
}

/* ≥768px: position is static (flex child) — margin-left:auto pushes the pair to
   the right edge. Below 768 Webflow switches to position:absolute which makes
   auto margins resolve to 0, so we handle mobile separately. */
@media screen and (min-width: 768px) {
  .body .kb-links {
    /* The shell positions this row with a per-page hardcoded left margin, which is
       why it started at a different x on the home page, the old cases and the new
       ones. Push it to the right edge of the header line instead, and it lands in
       the same place on all of them. */
    margin-left: auto;
    margin-right: 0;
  }
}

/* Mobile nav: Email at left, Telegram at right — Webflow already sets
   space-between here; removing the placeholder closebtn from flex makes
   it a clean 2-item split instead of shoving Telegram to the middle. */
@media screen and (max-width: 767px) {
  .body .kb-links .closebtn.is-placeholder { display: none; }
}

/* ≤479px: Webflow resets to position:static + margin:0 — container collapses
   to content width, killing space-between. width:100% restores the split. */
@media screen and (max-width: 479px) {
  .body .kb-links { width: 100%; }
}

/* The cross takes no part in that height: a zero-height box centred on the
   links' text line, with the svg allowed to spill out of it. Its width and the
   pull toward the telegram link are stated in px, so the slot is the same box
   on the page that shows a cross and on the one that only reserves it. */
.body .kb-links .closebtn {
  position: relative;
  top: 5px;
  float: none;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 0;
  margin: 0 0 0 -8px;
  overflow: visible;
}

.body .kb-links .closebtn.is-placeholder { visibility: hidden; pointer-events: none; }

/* Beefy card: layers positioned from the Figma artboard (1173x761 frame) on
   desktop. The backdrop carries the laptop, the screenshot sits inside its
   screen — percentages keep the two locked together as the card scales. */
/* overflow:hidden lives on the image wrapper, not the card itself — the mobile
   logo badge (below) intentionally hangs off this same corner past the card's
   own edge, and a card-level clip would slice it off along with the laptop. */
.artwork.bf { position: relative; background-color: #1c1e32; }
.artwork.bf .laptop-image-wraper { position: absolute; inset: 0; max-width: none; margin-left: 0; overflow: hidden; border-radius: inherit; }
.artwork.bf .laptop-image.bf {
  position: absolute;
  left: 25.23%;
  top: 14.77%;
  width: 82.27%;
  height: auto;
}
.artwork.bf .logo-wraper .logo { width: 96px; height: 96px; border-radius: 16px; }

/* Mobile: Webflow collapses the wrapper to a 44×44px corner badge. Let the logo
   fill it instead of staying at the hardcoded 96px and overflowing the wrapper.
   Radius scales proportionally (16px→8px) so the badge doesn't look over-rounded
   at the smaller size. */
@media screen and (max-width: 767px) {
  .artwork.bf .logo-wraper .logo {
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }
}

/* Tablet and mobile: frontal MacBook shot anchored to the bottom-right corner
   instead, overflowing the card on both sides via overflow:hidden on the
   artwork — the Figma-scaled desktop crop reads too small at these widths. */
@media screen and (max-width: 991px) {
  .artwork.bf .laptop-image.bf {
    left: auto;
    top: auto;
    right: -39.12%;
    bottom: 5.74%;
    width: 105.84%;
    height: auto;
  }
}

/* Mobile: single block from Figma 360px reference (card 318×696px).
   Replaces the earlier ≤767 / ≤540 / ≤479 approximations. */
@media screen and (max-width: 767px) {
  .artwork.bf .laptop-image.bf {
    right: -62.75%;
    bottom: 3.93%;
    width: 115%;
  }

  .artwork.bf .logo-wraper {
    border: 1px solid #f1f1f4;
    border-radius: 8px;
    overflow: hidden;
  }

  .artwork-header.firs {
    white-space: nowrap;
  }
}

/* MarketGuard only — Beefy also carries .ft, hence :not(.bf) — 20px taller on
   narrow mobile than the shared .artwork.ft default (696px). */
@media screen and (max-width: 479px) {
  .artwork.ft:not(.bf) { height: 44.75rem; }
}

/* Tags on the Beefy card share the card's own background, so they read as part
   of the surface rather than as chips sitting on top of it. */
.tag_desktop.bf { background-color: #1c1e32; }

/* Primary and secondary CTA labels use the same tracking; the shared Webflow
   rules gave the white label .04rem and the dark one .023rem. */
.btn-primary .text-14,
.btn-secondary .text-14 { letter-spacing: .04rem; }