/* Compact visual layer for all public HTML pages.
   Keep this conservative: it reduces oversized spacing and type without changing page behavior. */
html {
  scroll-padding-top: 72px;
}

body {
  font-size: 14px !important;
  line-height: 1.42 !important;
}

.container {
  width: min(1040px, calc(100% - 28px)) !important;
}

header {
  border-bottom-color: rgba(31, 41, 51, 0.10) !important;
}

.nav {
  min-height: 62px !important;
  gap: 14px !important;
}

.menu {
  gap: 14px !important;
  font-size: 13px !important;
}

.brand img {
  width: 64px !important;
}

.logo {
  width: min(500px, 88vw) !important;
}

.hero-logo {
  width: min(520px, 88vw) !important;
  margin-bottom: 20px !important;
}

.hero,
section.hero {
  min-height: auto !important;
  padding-top: 38px !important;
  padding-bottom: 34px !important;
}

main {
  padding-top: 34px !important;
  padding-bottom: 46px !important;
}

h1 {
  font-size: clamp(26px, 3.3vw, 42px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  margin-bottom: 12px !important;
}

h2,
.wizard-title {
  font-size: clamp(20px, 2.5vw, 28px) !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
}

h3 {
  font-size: 16px !important;
}

.hero-text,
.intro,
.form-intro,
.info-card p,
.choice-card p,
.contact-card p,
.intro-card p,
.content-card p,
.panel p {
  font-size: 14px !important;
  line-height: 1.46 !important;
}

.icon {
  width: 82px !important;
  margin-bottom: 18px !important;
}

.choice-grid,
.info-grid,
.contact-grid,
.usp-grid,
.grid,
.pricing-layout {
  gap: 12px !important;
}

.choice-card,
.card,
.info-card,
.form-card,
.login-card,
.intro-card,
.content-card,
.contact-card,
.wizard-card,
.quality-panel,
.price-panel,
.panel,
.contractor-card,
.company-card,
.search-panel,
.meta-box,
.preview,
.stat,
.stat-card,
.usp-card,
.toolbar,
.empty,
.login-panel {
  border-radius: 8px !important;
  padding: 18px !important;
  box-shadow: 0 14px 34px rgba(24, 35, 47, 0.07) !important;
}

.choice-card {
  min-height: 192px !important;
}

.choice-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  font-size: 20px !important;
  margin-bottom: 16px !important;
}

.choice-card h2 {
  font-size: 21px !important;
  margin-bottom: 8px !important;
}

.primary-button,
.secondary-button,
button,
.button,
.login-link,
.primary,
.pill,
.close-wizard {
  font-size: 13px !important;
}

.primary-button,
.secondary-button,
.button,
.login-link,
.primary {
  padding: 10px 16px !important;
}

input,
textarea,
select,
.field input,
.field textarea,
.field select {
  min-height: 38px !important;
  padding: 9px 11px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
}

.field,
.form-grid,
.trade-select,
.trade-groups,
.list {
  gap: 8px !important;
}

.section,
.usp-section,
.content-section,
.contact-section,
.wizard-section {
  padding-top: 0 !important;
  padding-bottom: 46px !important;
}

footer {
  padding: 20px 0 !important;
  font-size: 12px !important;
}

@media (max-width: 760px) {
  body {
    font-size: 13px !important;
  }

  .container {
    width: min(100% - 18px, 1040px) !important;
  }

  .nav {
    padding: 8px 0 !important;
  }

  .brand img {
    width: 58px !important;
  }

  .logo,
  .hero-logo {
    width: min(360px, 84vw) !important;
  }

  .hero,
  section.hero,
  main {
    padding-top: 24px !important;
    padding-bottom: 28px !important;
  }

  .choice-card,
  .card,
  .info-card,
  .form-card,
  .login-card,
  .intro-card,
  .content-card,
  .contact-card,
  .wizard-card,
  .panel,
  .contractor-card,
  .search-panel,
  .login-panel {
    padding: 14px !important;
  }
}