/* Bezalel.one — responsive layer over the design comps.
   Uses !important to override the comps' inline styles at breakpoints. */

html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }

/* mobile-nav scaffolding (JS builds the menu) */
.bz-burger { display: none; background: none; border: 0; padding: 8px; margin: -8px; cursor: pointer; color: #ECE4D3; line-height: 0; }
.bz-menu {
  position: fixed; inset: 0; z-index: 200; background: rgba(11,13,17,.98);
  backdrop-filter: blur(8px); display: none; flex-direction: column;
  padding: 96px 28px 40px; gap: 4px;
}
body.bz-menu-open .bz-menu { display: flex; }
body.bz-menu-open { overflow: hidden; }
.bz-menu a {
  font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 22px; font-weight: 500;
  color: #ECE4D3; text-decoration: none; padding: 16px 0;
  border-bottom: 1px solid rgba(236,228,211,.08); letter-spacing: -.01em;
}
.bz-menu a:last-child { color: #f2ca5c; border-bottom: 0; }

@media (max-width: 900px) {
  /* section rhythm + gutters */
  .bz-sec { padding-left: 24px !important; padding-right: 24px !important;
            padding-top: 64px !important; padding-bottom: 64px !important; }
  /* card grids stack */
  .bz-grid { grid-template-columns: 1fr !important; }
  /* section headings scale down so they fit the narrow column */
  .bz-sec h2 { font-size: 29px !important; line-height: 1.14 !important; }
  .bz-sec h3 { font-size: 19px !important; }
  /* nav -> hamburger */
  .bz-nav { height: 64px !important; padding-left: 24px !important; padding-right: 24px !important; }
  .bz-nav > *:not(:first-child):not(.bz-burger) { display: none !important; }
  .bz-burger { display: inline-flex; align-items: center; }

  /* hero reflow: shrink the fixed 720 frame, keep copy absolute but full-width,
     hide the decorative cross/tree/pill */
  .bz-hero { height: auto !important; min-height: 500px !important; }
  .bz-herocopy { top: 116px !important; left: 24px !important; right: 24px !important;
                 max-width: none !important; width: auto !important; }
  .bz-herocopy h1 { font-size: 44px !important; line-height: 1.06 !important; }
  .bz-herocross, .bz-herotree, .bz-heropill { display: none !important; }

  /* photo bands shorter */
  .bz-band { height: 340px !important; }

  /* cap every in-section element to its container so nothing overflows */
  .bz-sec *, .bz-herocopy * { max-width: 100% !important; }
  .bz-sec p, .bz-sec h1, .bz-sec h2, .bz-sec h3, .bz-herocopy * { overflow-wrap: break-word; }
  /* let flex rows wrap + their children shrink so text reflows instead of clipping */
  .bz-sec [style*="display:flex"] { flex-wrap: wrap !important; }
  .bz-sec [style*="display:flex"] > *, .bz-herocopy [style*="display:flex"] > * { min-width: 0 !important; }
  /* wide software-mock tables scroll horizontally instead of clipping */
  .bz-sec [style*="border-radius:14px"][style*="overflow:hidden"] { overflow-x: auto !important; }
  /* belt-and-suspenders: text always breaks within the column, nothing spills past the gutter */
  .bz-sec p, .bz-sec h1, .bz-sec h2, .bz-sec h3, .bz-sec span, .bz-sec a,
  .bz-herocopy p, .bz-herocopy h1, .bz-herocopy span { overflow-wrap: anywhere; }
  .bz-sec, .bz-herocopy { max-width: 100vw !important; }

  body { overflow-x: hidden; }
}

@media (max-width: 560px) {
  .bz-sec { padding-top: 52px !important; padding-bottom: 52px !important; }
  .bz-herocopy h1 { font-size: 38px !important; }
}