------------------------------------------------------------------- */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------
   2. Fluid media — images, video, embeds never overflow their column.
   (No forced height:auto, so object-fit/fixed-ratio cards are untouched.)
   ------------------------------------------------------------------- */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  max-width: 100%;
}

/* Plain content images (no fixed-height wrapper) keep their aspect ratio. */
main img:not([height]):not([width]):not([class*="logo"]):not([class*="avatar"]):not([class*="icon"]) {
  height: auto;
}

/* Responsive map / video embeds keep their declared height but cap width. */
main iframe {
  width: 100%;
}

/* ---------------------------------------------------------------------
   3. Long words / URLs / IDs must wrap instead of forcing overflow.
   Scoped to text containers so inputs & layout boxes are unaffected.
   ------------------------------------------------------------------- */
main p,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main li,
main span,
main a,
main td,
main th,
main dd,
main dt,
main figcaption,
main blockquote {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ---------------------------------------------------------------------
   4. Tables scroll horizontally on small screens instead of breaking
   the page width. Applies only to plain tables not wrapped already.
   ------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  main table:not(.table-fixed-layout) {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------------------------------------------------------------------
   5. Phones — stop fixed-pixel inline widths from forcing overflow.
   Scoped to inline width declarations only, so component styling that
   relies on class-based sizing is left exactly as designed.
   ------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  main [style*="width:"][style*="px"] {
    max-width: 100%;
  }
}

/* ---------------------------------------------------------------------
   6. Landscape phones / short viewports — let tall hero/banner blocks
   shrink so the search card and CTA stay reachable without scrolling.
   ------------------------------------------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero-section {
    min-height: auto;
  }
}

/* ---------------------------------------------------------------------
   7. Respect users who prefer reduced motion (the site uses transforms
   and entrance animations heavily).
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
   8. Footer — iPad 11 portrait on non-landing pages only.
   Landing (#home-page) keeps footer.css as on production.
   ------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  body:not(:has(#home-page)) > footer.footer-section {
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 2.5rem !important;
  }

  body:not(:has(#home-page)) > footer.footer-section .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  body:not(:has(#home-page)) > footer.footer-section .row.g-4 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    --bs-gutter-x: 1rem !important;
  }

  body:not(:has(#home-page)) > footer.footer-section .row.g-4 > [class*="col-"] {
    display: block !important;
    visibility: visible !important;
    margin-bottom: 1.25rem;
  }

  body:not(:has(#home-page)) > footer.footer-section .row.g-4 > [class*="col-"]:first-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body:not(:has(#home-page)) > footer.footer-section .row.g-4 > [class*="col-"]:not(:first-child) {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  body:not(:has(#home-page)) > footer.footer-section .row.g-4 > [class*="col-"]:not(:first-child) .d-flex.flex-column.gap-2 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }

  body:not(:has(#home-page)) > footer.footer-section .row.g-4 > [class*="col-"]:not(:first-child) .d-flex.gap-3 {
    justify-content: flex-start !important;
  }

  body:not(:has(#home-page)) > footer.footer-section .footer-brand img {
    height: 48px !important;
  }

  body:not(:has(#home-page)) > footer.footer-section .footer-brand p {
    max-width: 38rem;
  }

  body:not(:has(#home-page)) > footer.footer-section h6 {
    font-size: 15px !important;
    margin-bottom: 10px !important;
  }

  body:not(:has(#home-page)) > footer.footer-section p,
  body:not(:has(#home-page)) > footer.footer-section li,
  body:not(:has(#home-page)) > footer.footer-section a {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  body:not(:has(#home-page)) > footer.footer-section li {
    margin-bottom: 6px !important;
  }

  body:not(:has(#home-page)) > footer.footer-section .d-flex.flex-column.gap-2 a {
    width: 120px !important;
    padding: 6px 8px !important;
    margin: 0 !important;
  }

  body:not(:has(#home-page)) > footer.footer-section .d-flex.flex-column.gap-2 a span:last-child {
    font-size: 11px !important;
  }

  body:not(:has(#home-page)) > footer.footer-section .social-icon {
    width: 32px !important;
    height: 32px !important;
  }

  body:not(:has(#home-page)) > footer.footer-section .col-12 p {
    font-size: 11px !important;
  }
}

/* ---------------------------------------------------------------------
   9. Builders + Agents list — unified iPad 11 portrait layout.
   ------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .builders-list-page,
  .agents-list-page {
    background: #f6f7fb !important;
  }

  .builders-list-page .container,
  .agents-list-page .container {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .builders-list-page__title,
  .agents-list-page__title {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
  }

  .builders-list-page__lead,
  .agents-list-page__lead {
    font-size: 0.875rem !important;
    color: #6b7280 !important;
  }

  .builders-mobile-filter-btn,
  .agents-mobile-filter-btn {
    display: none !important;
  }

  .builders-list-page .builder-filter.builders-filter-bar,
  .agents-filter-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    background: #f3f4f6 !important;
    border-radius: 14px !important;
    padding: 10px !important;
    margin-bottom: 1rem !important;
  }

  .builders-list-page .builder-filter__item,
  .builders-list-page .builders-filter-bar__item,
  .agents-filter-bar__item {
    flex: 1 1 calc(33.33% - 10px) !important;
    min-width: 0 !important;
  }

  .builders-list-page .builder-filter__select,
  .builders-list-page .builders-filter-bar__select,
  .builders-list-page .builder-filter select,
  .agents-filter-bar__select {
    width: 100% !important;
    min-width: 0 !important;
  }

  .builder-card,
  .agents-list-page .agent-card {
    flex-direction: row !important;
    border-radius: 16px !important;
    align-items: flex-start !important;
  }

  .builder-card__media {
    width: 160px !important;
    min-height: 180px !important;
    flex-shrink: 0 !important;
  }

  .builder-card__img,
  .builder-card__avatar {
    min-height: 180px !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    padding: 0 !important;
    object-fit: cover !important;
  }

  .agents-list-page .agent-card__media {
    width: 80px !important;
    height: 80px !important;
    min-height: 0 !important;
    max-height: 80px !important;
    align-self: flex-start !important;
    position: relative !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    border-radius: 14px !important;
  }

  .agents-list-page .agent-card__img,
  .agents-list-page .agent-card__avatar {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .agents-list-page .agents-filter-bar {
    flex-wrap: nowrap !important;
    background: #fff !important;
    border: 1px solid #e8eaed !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
  }

  .agents-list-page .agents-filter-bar__item {
    flex: 1 1 0 !important;
  }

  .builders-list-page .col-lg-4,
  .agents-list-page .col-lg-4 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .builders-sidebar,
  .agents-list-page .col-lg-4 {
    margin-top: 1rem !important;
  }

  .builders-sidebar__ad,
  .agents-sidebar__ad {
    padding: 28px 18px !important;
    border-radius: 18px !important;
  }

  .builders-list-page .pd-sidebar-requirement-mini,
  .agents-list-page .pd-sidebar-requirement-mini {
    display: block !important;
    text-decoration: none !important;
    color: #14213f !important;
  }

  .builders-list-page .pd-sidebar-requirement-mini__title,
  .agents-list-page .pd-sidebar-requirement-mini__title {
    display: block !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #14213f !important;
  }

  .builders-list-page .pd-sidebar-requirement-mini__text,
  .agents-list-page .pd-sidebar-requirement-mini__text {
    display: block !important;
    color: #58709d !important;
  }

  .builders-list-page .pd-sidebar-requirement-mini__chips,
  .agents-list-page .pd-sidebar-requirement-mini__chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .builders-list-page .pd-sidebar-requirement-mini__cta,
  .agents-list-page .pd-sidebar-requirement-mini__cta {
    display: flex !important;
  }
}

/* ---------------------------------------------------------------------
   10. Builders + Agents list — sticky sidebar (laptop + iPad landscape)
   Sticky on .col-lg-4 (not inner wrapper): align-self:flex-start shrinks
   the column, so an inner sticky element has no room to stick.
   ------------------------------------------------------------------- */
@media (min-width: 992px) {
  .builders-list-page .row,
  .agents-list-page .row {
    align-items: flex-start !important;
  }

  .builders-list-page .col-lg-4,
  .agents-list-page .col-lg-4 {
    position: sticky !important;
    top: calc(var(--pd-topbar-h, 36px) + var(--pd-header-h, 72px) + 12px) !important;
    align-self: flex-start !important;
    height: fit-content;
    z-index: 10;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) and (orientation: landscape) {
  .builders-list-page .row,
  .agents-list-page .row {
    align-items: flex-start !important;
  }

  .builders-list-page .col-lg-8,
  .agents-list-page .col-lg-8 {
    flex: 0 0 66.666667% !important;
    max-width: 66.666667% !important;
    width: 66.666667% !important;
  }

  .builders-list-page .col-lg-4,
  .agents-list-page .col-lg-4 {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
    width: 33.333333% !important;
    display: block !important;
    margin-top: 0 !important;
    position: sticky !important;
    top: calc(var(--pd-topbar-h, 36px) + var(--pd-header-h, 72px) + 12px) !important;
    align-self: flex-start !important;
    height: fit-content;
    z-index: 10;
  }
}