/* jamesbi.com — rebuilt from the Wix archive (archive/manifest, archive/rendered-dom).
   Desktop: Wix classic fixed 980px stage, elements placed at their archived coordinates.
   Mobile (<768px): Wix's separate 320px mobile layout, scaled to the screen width. */

@font-face { font-family: "DM Sans Regular"; src: url("../assets/fonts/dm-sans-regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "DM Sans Medium"; src: url("../assets/fonts/dm-sans-medium.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Inter Regular"; src: url("../assets/fonts/inter-regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Inter Medium"; src: url("../assets/fonts/inter-medium.woff2") format("woff2"); font-display: swap; }
/* Wix's second Inter upload, used by the "See case study" buttons */
@font-face { font-family: "Inter Button"; src: url("../assets/fonts/inter-regular-2.woff2") format("woff2"); font-display: swap; }

:root {
  --bg: #F3F3F3;
  --text: #212121;
  --nav: #7B736F;
  --nav-active: #5066D7;
  --nav-hover: #8F8F8F;
  --logo: #B5C4B1;
  --rule: #606060;
  --hover-grey: #8F8F8F;
  --ease-in: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter Regular", sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p { margin: 0; font-weight: normal; }
a { color: inherit; text-decoration: none; }
img { display: block; }

.abs { position: absolute; }
.stage { position: relative; width: 980px; margin: 0 auto; }

/* ---------- Desktop ---------- */
.desk { min-width: 980px; }
.mob { display: none; }

.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); }
.site-header .stage { height: 105px; }
.logo-img { left: -5px; top: 30px; width: 51px; height: 55px; object-fit: cover; }
.logo-text { left: 50px; top: 47px; font: 21px/1.4 "DM Sans Medium"; color: var(--logo); }

.nav { left: 643px; top: 37px; width: 336px; height: 40px; display: flex; }
.nav a {
  display: block; height: 40px; text-align: center;
  font: 20px/40px "DM Sans Medium"; color: var(--nav);
  transition: color 0.4s ease 0s;
}
.nav a:hover { color: var(--nav-hover); }
.nav a.active { color: var(--nav-active); }

.home { height: 2424px; }

.hello { left: 2px; top: 112px; width: 310px; font: 42px/1.2 "DM Sans Medium"; }
.hello a { text-decoration: underline; }
.intro { left: 428px; top: 173px; width: 505px; font: 28px/1.4 "DM Sans Regular"; }
.arrow { left: 2px; top: 359px; width: 33px; height: 42px; fill: var(--text); }

.proj-title { font: 18px/2.1 "Inter Medium"; }
.proj-desc { font: 18px/1.4 "Inter Regular"; }

.cta { width: 178px; height: 40px; display: flex; align-items: center; }
.cta span {
  position: relative; top: 1px;
  font: 700 18px/1.07em "Inter Button"; color: var(--text);
  text-decoration: underline; margin-right: 5.5px;
  transition: all 0.2s ease;
}
.cta:hover span { color: var(--hover-grey); line-height: normal; }

.card { display: block; width: 550px; height: 351px; border-radius: 8px; transition: all 0.4s ease-in-out; }
.card:hover { z-index: 1; }
.card img { position: absolute; object-fit: cover; transition: all 0.4s ease-in-out; }
.card:hover img { transform: translate(-3px, 1px) scale(1.1); }

.card-re2 {
  border: 1px solid #212121;
  background: linear-gradient(205deg, rgba(32,69,150,0.8) 0%, #212121 88.59649122807018%);
}
.card-re2 img { left: 54px; top: 44px; width: 440px; height: 260px; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.card-moolah { background: rgba(95,178,122,0.85); }
.card-moolah img { left: 72px; top: 75px; width: 406px; height: 250px; }
.card-magic { background: rgb(246,110,121); box-shadow: 0 1px 4px 0 rgba(236,45,103,1); }
.card-magic:hover { border-radius: 0; }
.card-magic img { left: 154px; top: 69px; width: 246px; height: 212px; }

.rule { width: 967px; height: 5px; }
.rule::before { content: ""; position: absolute; left: 0; right: 0; top: 0; border-top: 2px solid var(--rule); }

.site-footer .stage { height: 171px; }
.collab { left: 0; top: 39px; width: 338px; font: bold 42px/49px "DM Sans Medium"; color: var(--rule); }
.foot-text { top: 133px; font: 18px/2.1 "Inter Regular"; }

/* Entrance: fadeIn 800ms, delay 500ms, once when scrolled into view */
.js .fade { opacity: 0; }
.js .fade.in { opacity: 1; animation: fadeIn 800ms 500ms var(--ease-in) backwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .js .fade { opacity: 1; animation: none; }
}

/* ---------- Mobile: Wix mobile layout is 320px wide, scaled to fit ---------- */
@media (max-width: 767px) {
  .desk { display: none; }
  .mob { display: block; width: 320px; zoom: var(--mob-zoom, 1); }

  .m-header { position: relative; height: 54px; }
  .m-logo { left: 9px; top: 17px; display: flex; }
  .m-logo img { width: 26px; height: 26px; object-fit: cover; }
  .m-logo span { margin: 4px 0 0 2px; font: 14px/1.4 "DM Sans Medium"; color: var(--logo); }

  .m-burger {
    left: 266px; top: 7px; width: 40px; height: 40px; padding: 0; cursor: pointer;
    background: var(--text); border: 1px solid #FDFDFD; border-radius: 4px;
  }
  .m-burger i { position: absolute; left: 9px; width: 20px; height: 3px; background: #FDFDFD; transition: transform 0.2s, opacity 0.2s; }
  .m-burger i:nth-child(1) { top: 10px; }
  .m-burger i:nth-child(2) { top: 18px; }
  .m-burger i:nth-child(3) { top: 26px; }
  .menu-open .m-burger i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-open .m-burger i:nth-child(2) { opacity: 0; }
  .menu-open .m-burger i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .m-menu {
    display: none; position: absolute; left: 60px; top: 50px; width: 246px; z-index: 60;
    background: var(--text); border-radius: 4px; list-style: none; margin: 0; padding: 0;
  }
  .menu-open .m-menu { display: block; }
  .m-menu li + li { border-top: 1px solid #FDFDFD; }
  .m-menu a { display: block; padding: 12px; text-align: center; font: bold 14px/1.1 arial, helvetica, sans-serif; color: #FDFDFD; }
  .m-menu a.active { color: #F0AC00; }

  .m-home { position: relative; height: 1880px; }
  .m-hello { left: 26px; top: 17px; width: 280px; font: 24px/1.2 "DM Sans Medium"; }
  .m-hello a { text-decoration: underline; }
  .m-intro { left: 26px; top: 84.6px; width: 280px; font: 20px/1.4 "DM Sans Regular"; }
  .m-arrow { left: 26px; top: 167.6px; width: 30px; height: 38px; fill: var(--text); }

  .m-card { display: block; left: 20px; width: 280px; border-radius: 8px; }
  .m-card img { position: absolute; object-fit: cover; }
  .m-card-re2 { top: 253.6px; height: 166px; border: 1px solid #212121;
    background: linear-gradient(205deg, rgba(32,69,150,0.8) 0%, #212121 88.59649122807018%); }
  .m-card-re2 img { left: 45px; top: 27.5px; width: 188px; height: 109px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); }
  .m-card-moolah { top: 757px; height: 186px; background: rgba(95,178,122,0.85); }
  .m-card-moolah img { left: 44px; top: 45px; width: 192px; height: 118px; }
  .m-card-magic { top: 1269px; height: 187px; background: rgb(246,110,121); box-shadow: 0 1px 4px 0 rgba(236,45,103,1); }
  .m-card-magic img { left: 83px; top: 44px; width: 115px; height: 99px; }

  .m-rule { left: 20px; width: 280px; height: 2px; border-top: 2px solid var(--rule); }
  .m-title { left: 20px; width: 290px; font: 18px/2.1 "Inter Medium"; }
  .m-title span { font-size: 16px; }
  .m-desc { left: 20px; width: 280px; font: 14px/1.4 "Inter Regular"; }
  .m-desc.wide { width: 300px; }
  .m-cta { left: 20px; width: 200px; height: 42px; display: flex; align-items: center; }
  .m-cta span { font: 700 18px/1.07em "Inter Button"; text-decoration: underline; color: var(--text); margin-right: 5.5px; }

  .m-footer { position: relative; padding: 15px 0 0 20px; }
  .m-collab { font: bold 25px/1 "DM Sans Medium"; color: var(--rule); margin-bottom: 5px; }
  .m-foot-text { font: 18px/2.1 "Inter Regular"; }
  .m-copy { padding-left: 3.5px; }
}