*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:#17181a;color:#f1f0ed;font-family:'Familjen Grotesk',system-ui,sans-serif;overflow-x:hidden}
a{color:#c3e34d;text-decoration:none}
a:hover{color:#d6ef6e}
::selection{background:#c3e34d;color:#17181a}

.mono{font-family:'Space Mono',monospace}
.disp{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.03em}
.marker{font-family:'Shantell Sans','Caveat Brush',cursive;font-weight:600}
.spray{font-family:'Permanent Marker',cursive;text-transform:uppercase}
.script{font-family:'Caveat',cursive}

.cta-hover:hover{background:#f1f0ed}
.cta-hover-up:hover{transform:translateY(-3px)}

[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
[data-reveal].is-visible{opacity:1;transform:none}

/* Mobile hero: collage flush under the header (nothing above it), with
   the headline overlaid as real text in the art's empty left area —
   the mobile collage graphic has no lettering baked in, so this never
   collides with anything drawn in it. The real <h1> stays in the DOM
   for desktop/SEO but is hidden here; .hero-heading-mobile is a plain
   element carrying the same words, sized to fit the overlay column. */
@media (max-width: 779px) {
  .hero{
    display:flex !important;
    flex-direction:column !important;
  }
  .hero-copy{
    display:contents !important;
  }
  .hero-heading{
    display:none !important;
  }
  .hero-img{
    display:none !important;
  }
  .hero-collage-wrap{
    display:block !important;
    order:1;
    position:relative;
    width:100%;
    margin:0;
  }
  .hero-img-mobile{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
  }
  .hero-overlay-mobile{
    display:block !important;
    position:absolute;
    top:28%;
    left:5%;
    width:56%;
  }
  .hero-heading-mobile{
    font-size:clamp(31px,9vw,43px);
    line-height:.95;
    text-wrap:balance;
  }
  .hero-subheadline-mobile{
    margin-top:clamp(14px,3vw,20px);
    font-size:clamp(15px,4vw,19px);
    font-weight:600;
    line-height:1.3;
    color:#3a3936;
    text-wrap:pretty;
  }
  .hero-sub{
    display:none !important;
  }
  .hero-badge{
    order:5;
    width:100% !important;
    padding:20px 20px 40px;
  }

  /* "Who we work with" category grid: 5 fixed columns crush down to
     unreadable slivers on phones and overlapping badges. Reflow to 2. */
  .cats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  /* Nav links are display:none below 780px with no other way to reach
     them — show a hamburger that opens a full-screen menu instead. */
  .nav-burger{
    display:flex !important;
  }
  .mobile-menu.is-open{
    display:flex !important;
  }
}

@media (max-width: 420px) {
  .cats-grid{
    grid-template-columns:1fr !important;
  }
}