/* ===== JOVIK 4.1.2 LAYOUT REPAIR ===== */

/* Global width reset */
html, body {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}
body > main,
body > .site-shell,
main {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.site-header {
  width: 100% !important;
  max-width: none !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
}
.site-header > * {
  min-width: 0 !important;
}

/* Header content remains centered independently from hero */
.site-header {
  padding-left: max(24px, calc((100vw - 1240px) / 2)) !important;
  padding-right: max(24px, calc((100vw - 1240px) / 2)) !important;
}

/* Hero becomes a true full-width band with centered inner content */
.hero-v41 {
  width: 100% !important;
  max-width: none !important;
  min-height: 690px !important;
  margin: 0 !important;
  padding: 72px 0 84px !important;
  overflow: hidden !important;
  position: relative !important;
}
.hero-shell {
  width: calc(100% - 48px) !important;
  max-width: 1240px !important;
  min-height: 540px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 64px !important;
  align-items: center !important;
}
.hero-copy {
  width: 100% !important;
  max-width: 590px !important;
  min-width: 0 !important;
  align-self: center !important;
}
.hero-v41 .hero-copy h1 {
  max-width: 590px !important;
  margin: 20px 0 24px !important;
  font-size: clamp(58px, 5.2vw, 82px) !important;
  line-height: .94 !important;
  letter-spacing: -.055em !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.hero-v41 .hero-copy h1 br {
  display: initial !important;
}
.hero-v41 .hero-copy p {
  max-width: 570px !important;
  font-size: 18px !important;
  line-height: 1.62 !important;
  margin-bottom: 0 !important;
}
.hero-v41 .eyebrow {
  max-width: max-content !important;
  white-space: nowrap !important;
}

/* Search bar stays within the left column */
.hero-search-dark {
  width: 100% !important;
  max-width: 590px !important;
  grid-template-columns: auto minmax(0, 1.35fr) minmax(115px, .7fr) minmax(100px, .55fr) auto !important;
}
.hero-search-dark input,
.hero-search-dark select,
.hero-search-dark button {
  min-width: 0 !important;
  max-width: 100% !important;
}
.hero-metrics,
.hero-actions,
.hero-proof {
  max-width: 590px !important;
}

/* Right visual: no overlap with text */
.hero-device {
  width: 100% !important;
  max-width: 590px !important;
  min-width: 0 !important;
  min-height: 500px !important;
  margin: 0 auto !important;
  position: relative !important;
  align-self: center !important;
  overflow: visible !important;
}
.device-browser {
  position: absolute !important;
  width: 470px !important;
  max-width: calc(100% - 54px) !important;
  height: auto !important;
  left: 50% !important;
  right: auto !important;
  top: 34px !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  z-index: 1 !important;
}
.phone-a {
  width: 150px !important;
  height: 320px !important;
  right: 0 !important;
  left: auto !important;
  bottom: 0 !important;
  transform: rotate(2deg) !important;
  z-index: 4 !important;
}
.phone-b {
  width: 150px !important;
  height: 320px !important;
  right: 150px !important;
  left: auto !important;
  bottom: -18px !important;
  transform: rotate(-2deg) !important;
  z-index: 3 !important;
}

/* All other site sections use the same centered width */
.category-strip-v41,
.showcase-v41,
.dashboard-preview,
.feature-ribbon-v41,
.business-hero,
.plan-grid,
.market-promise,
.discover-head,
.request-grid,
.detail,
.dashboard-head-v41,
.stat-grid,
.dashgrid,
.profile-edit,
.admin-shell,
.update-shell,
.section-head,
.section {
  width: calc(100% - 48px) !important;
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
.category-strip-v41 {
  margin-top: -24px !important;
}
.dashboard-preview {
  overflow: hidden !important;
  border-radius: 22px !important;
}
.preview-sidebar,
.preview-main {
  min-width: 0 !important;
}

/* Repair cards and grids so no child can force the page wide */
.request-grid,
.discover-grid,
.showcase-steps,
.plan-grid,
.feature-ribbon-v41,
.preview-kpis,
.stat-grid,
.dashgrid,
.admin-grid {
  min-width: 0 !important;
}
.request-grid > *,
.discover-grid > *,
.showcase-steps > *,
.plan-grid > *,
.feature-ribbon-v41 > *,
.preview-kpis > *,
.stat-grid > *,
.dashgrid > *,
.admin-grid > * {
  min-width: 0 !important;
  max-width: 100% !important;
}
img, svg, video {
  max-width: 100% !important;
  height: auto;
}

/* Desktop tuning */
@media (min-width: 1400px) {
  .hero-shell { column-gap: 74px !important; }
  .hero-copy { max-width: 600px !important; }
  .hero-device { max-width: 610px !important; }
}
@media (max-width: 1180px) {
  .hero-shell {
    width: calc(100% - 40px) !important;
    column-gap: 40px !important;
  }
  .hero-v41 .hero-copy h1 {
    font-size: clamp(52px, 5.7vw, 70px) !important;
  }
  .hero-device { max-width: 520px !important; }
  .device-browser { width: 420px !important; }
  .phone-a,.phone-b { width: 138px !important; height: 292px !important; }
  .phone-b { right: 138px !important; }
}

/* Tablet becomes stacked */
@media (max-width: 980px) {
  .hero-v41 {
    min-height: auto !important;
    padding-top: 56px !important;
  }
  .hero-shell {
    grid-template-columns: 1fr !important;
    gap: 44px !important;
    min-height: 0 !important;
  }
  .hero-copy {
    max-width: 760px !important;
    margin: 0 auto !important;
    text-align: left !important;
  }
  .hero-v41 .hero-copy h1,
  .hero-v41 .hero-copy p,
  .hero-search-dark,
  .hero-metrics,
  .hero-actions,
  .hero-proof {
    max-width: 760px !important;
  }
  .hero-device {
    width: 100% !important;
    max-width: 720px !important;
    min-height: 470px !important;
  }
  .device-browser {
    width: 560px !important;
    max-width: calc(100% - 80px) !important;
  }
  .phone-a { right: 4% !important; }
  .phone-b { right: 24% !important; }
}

/* Mobile: simplify visual */
@media (max-width: 700px) {
  .site-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .hero-v41 {
    padding: 42px 0 54px !important;
  }
  .hero-shell {
    width: calc(100% - 32px) !important;
    gap: 30px !important;
  }
  .hero-v41 .hero-copy h1 {
    font-size: clamp(44px, 13vw, 58px) !important;
    line-height: .95 !important;
  }
  .hero-v41 .eyebrow {
    white-space: normal !important;
  }
  .hero-search-dark {
    max-width: 100% !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }
  .hero-search-dark input:nth-of-type(2),
  .hero-search-dark select {
    display: none !important;
  }
  .hero-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .hero-actions .btn {
    width: 100% !important;
    text-align: center !important;
  }
  .hero-device {
    min-height: 280px !important;
  }
  .device-browser {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
  }
  .phone-a,.phone-b {
    display: none !important;
  }
  .category-strip-v41,
  .showcase-v41,
  .dashboard-preview,
  .feature-ribbon-v41,
  .business-hero,
  .plan-grid,
  .market-promise,
  .discover-head,
  .request-grid,
  .detail,
  .dashboard-head-v41,
  .stat-grid,
  .dashgrid,
  .profile-edit,
  .admin-shell,
  .update-shell,
  .section-head,
  .section {
    width: calc(100% - 32px) !important;
  }
}