/*
 * 5thspace responsive consolidation
 * Loaded last so the page has one predictable source of truth for layout.
 */

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

html {
  overflow-x: clip;
}

body {
  min-width: 0;
  overflow-x: clip !important;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

:where(section, div, article, nav, main, footer) {
  min-width: 0;
}

:where(#services, #pricing, #our-process, #call-to-action, #block-howwework) {
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

/* Shared page gutters */
.max-w-layout,
.max-w-container,
#pricing.pricing .container {
  width: 100%;
}

/* Navigation */
#custom-navbar-wrapper {
  padding-inline: clamp(24px, 4vw, 56px) !important;
}

.custom-navbar__content {
  width: min(100%, 1280px) !important;
}

@media (min-width: 1024px) and (max-width: 1199px) {
  #custom-navbar-wrapper {
    padding-inline: 20px !important;
  }

  .custom-navbar__menu {
    gap: 20px !important;
  }

  .nav-logo-link img {
    width: 108px !important;
    height: auto !important;
  }
}

/* Hero: prevent the two 50% columns plus gap from exceeding the container. */
@media (min-width: 1024px) {
  #main-hero-section {
    min-height: 700px !important;
    height: min(780px, calc(100svh - var(--nav-h))) !important;
  }

  #main-hero-section > .max-w-layout {
    max-width: 1440px !important;
    padding-inline: clamp(28px, 5vw, 72px) !important;
  }

  #hero-content-block {
    display: grid !important;
    grid-template-columns: minmax(0, 1.04fr) minmax(440px, 0.96fr) !important;
    align-items: center !important;
    justify-content: initial !important;
    column-gap: clamp(24px, 3.5vw, 52px) !important;
    width: 100% !important;
    min-height: 100% !important;
    height: 100% !important;
    padding-block: 40px !important;
  }

  #text-content-block,
  #carousels-wrapper {
    width: 100% !important;
    min-width: 0 !important;
  }

  #text-content-block {
    align-self: center !important;
  }

  #main-heading,
  #sub-paragraph {
    width: 100% !important;
  }

  #main-heading .text-bor-accent {
    font-size: clamp(2.35rem, 3.25vw, 3.55rem) !important;
  }

  #button-container {
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #carousels-wrapper {
    justify-content: flex-end !important;
    gap: clamp(14px, 2vw, 28px) !important;
    overflow: hidden;
  }

  #carousels-wrapper .carousel {
    width: clamp(190px, 19vw, 250px) !important;
    max-width: 250px !important;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  #main-hero-section > .max-w-layout {
    padding-inline: 28px !important;
  }

  #hero-content-block {
    grid-template-columns: minmax(0, 1fr) minmax(410px, 0.92fr) !important;
    column-gap: 24px !important;
  }

  #main-heading .text-bor-accent {
    font-size: clamp(2.15rem, 3.45vw, 2.6rem) !important;
  }

  #sub-paragraph {
    font-size: 1rem !important;
  }

  #carousels-wrapper .carousel {
    width: clamp(190px, 21vw, 220px) !important;
  }
}

/* Tablet and mobile hero */
@media (max-width: 1023px) {
  :where(#services, #pricing, #our-process, #call-to-action, #block-howwework) {
    scroll-margin-top: calc(var(--mnav-h) + 16px);
  }

  #services,
  #our-process,
  .feedback-section,
  .onboarding-hero-section,
  #call-to-action {
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
  }

  .mnav-header {
    width: 100% !important;
    padding-inline: clamp(16px, 4vw, 28px) !important;
  }

  .mnav-panel {
    width: 100% !important;
  }

  #main-hero-section {
    height: auto !important;
    min-height: calc(100svh - var(--mnav-h)) !important;
  }

  #hero-content-block {
    width: 100% !important;
    height: auto !important;
    min-height: calc(100svh - var(--mnav-h)) !important;
    padding: clamp(36px, 6vw, 56px) 0 24px !important;
    gap: clamp(24px, 4vw, 36px) !important;
  }

  #text-content-block {
    width: 100% !important;
    padding-inline: clamp(24px, 7vw, 64px) !important;
  }

  #main-heading {
    width: 100% !important;
    max-width: 680px !important;
  }

  #main-heading .text-bor-accent {
    width: 100% !important;
    font-size: clamp(2rem, 5vw, 2.6rem) !important;
  }

  #sub-paragraph {
    max-width: 640px !important;
    font-size: clamp(0.92rem, 1.8vw, 1rem) !important;
    line-height: 1.55 !important;
  }

  #button-container {
    width: min(100%, 480px) !important;
    margin-inline: auto !important;
  }

  #carousels-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
}

@media (max-width: 768px) {
  #hero-content-block {
    min-height: 0 !important;
    padding-top: clamp(32px, 8vw, 44px) !important;
    padding-bottom: 20px !important;
  }

  #text-content-block {
    padding-inline: clamp(20px, 7vw, 40px) !important;
  }

  #main-heading {
    padding-bottom: 0 !important;
  }

  #main-heading .text-bor-accent {
    font-size: clamp(1.7rem, 7vw, 2rem) !important;
    line-height: 1.04 !important;
    padding-bottom: 0 !important;
  }

  #sub-paragraph {
    margin-top: 1rem !important;
    font-size: clamp(0.875rem, 3.7vw, 0.96rem) !important;
    line-height: 1.5 !important;
  }

  #button-container {
    gap: 10px !important;
    margin-top: 24px !important;
  }

  #button-container > a {
    width: min(100%, 300px);
  }

  #book-demo-button,
  .btn-secondary-hero {
    width: 100% !important;
    min-height: 46px;
  }

  #carousels-wrapper {
    height: clamp(360px, 108vw, 470px) !important;
  }
}

@media (max-width: 359px) {
  #text-content-block {
    padding-inline: 16px !important;
  }

  #main-heading .text-bor-accent {
    font-size: 1.55rem !important;
  }

  #sub-paragraph {
    font-size: 0.84rem !important;
  }
}

/* Core content sections */
#scaling-system,
#services,
#our-process,
#pricing,
.feedback-section,
#call-to-action {
  max-width: 100%;
}

#scaling-system .scaling-grid,
#block-1f05d72ed39680bd8577fbcf21f567ba,
.whyus-magazine {
  min-width: 0;
}

@media (min-width: 769px) and (max-width: 1199px) {
  #block-1f05d72ed39680bd8577fbcf21f567ba {
    width: calc(100% - 48px) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    gap: 20px !important;
  }

  #block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin-inline-start: 0 !important;
  }
}

@media (max-width: 768px) {
  #scaling-system {
    height: auto !important;
    min-height: 0 !important;
    padding: 48px 20px !important;
  }

  #scaling-system .scaling-grid {
    height: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #block-1f05d72ed39680bd8577fbcf21f567ba {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: clamp(16px, 5vw, 24px) !important;
  }

  #block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline-start: 0 !important;
  }

  #independent-horizontal-carousel-section {
    height: auto !important;
    min-height: 0 !important;
    padding-block: 20px !important;
  }

  #independent-horizontal-carousel-section .independent-carousel-wrapper,
  #independent-horizontal-carousel-section .independent-carousel {
    max-width: 100% !important;
  }

  .whyus-magazine {
    width: calc(100% - 40px) !important;
    max-width: none !important;
    margin: 20px !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .whyus-magazine > .notion-column {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline-start: 0 !important;
  }
}

/* Process */
@media (max-width: 1023px) {
  #our-process {
    height: auto !important;
    min-height: 0 !important;
  }

  #our-process .max-w-container {
    padding: clamp(64px, 10vw, 96px) clamp(20px, 5vw, 48px) !important;
  }

  #our-process .process-layout {
    gap: 44px !important;
  }

  #our-process .process-left,
  #our-process #process-timeline-column,
  #our-process #process-timeline-wrap,
  #our-process #process-timeline-grid {
    width: 100% !important;
    max-width: 100% !important;
  }

  #our-process #process-subtext,
  #our-process .timeline-grid p,
  #our-process .timeline-grid h6 {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  #our-process .process-line {
    white-space: normal !important;
  }
}

@media (max-width: 480px) {
  #our-process .max-w-container {
    padding-inline: 20px !important;
  }

  #our-process .timeline-grid {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    column-gap: 12px !important;
  }

  #our-process {
    --dot-d: 38px !important;
  }
}

/* Pricing */
@media (max-width: 1100px) {
  #pricing.pricing {
    padding-inline: clamp(16px, 4vw, 40px) !important;
  }

  #pricing.pricing .pricing__flex {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
  }

  #pricing.pricing .div-block-3.left-hero,
  #pricing.pricing .pricing__card {
    width: 100% !important;
    max-width: 100% !important;
  }

  #pricing.pricing .div-block-3.left-hero {
    min-height: 420px !important;
  }

  #pricing.pricing .pricing-right-track {
    width: 100% !important;
  }

  #pricing.pricing .pricing-plan {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 600px) {
  #pricing.pricing {
    padding: 48px 16px !important;
  }

  #pricing.pricing .div-block-3.left-hero {
    min-height: 360px !important;
  }

  #pricing.pricing .pricing-plan {
    padding: 28px 22px 108px !important;
  }

  #pricing.pricing .pricing-plan__table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #pricing.pricing .pricing-plan__table {
    min-width: 520px;
  }
}

/* Testimonials */
@media (max-width: 768px) {
  section.feedback-section {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 48px 20px !important;
  }

  .feedback-section .feedback-main {
    width: 100% !important;
    max-width: 100% !important;
  }

  .feedback-section #feedbackContent {
    width: 100% !important;
  }
}

/* CTA, booking embed and footer */
#call-to-action {
  width: 100%;
}

#book-call,
.book-call-container {
  width: 100% !important;
  max-width: 100% !important;
}

.book-call-embed {
  width: min(100%, 1000px) !important;
  min-width: 0 !important;
}

.book-call-embed iframe {
  display: block;
  width: 100% !important;
}

@media (max-width: 1023px) {
  #call-to-action {
    height: auto !important;
    min-height: 0 !important;
    padding: clamp(64px, 9vw, 96px) clamp(20px, 5vw, 48px) 48px !important;
    gap: 24px !important;
  }

  #call-to-action .project-heading {
    width: min(100%, 760px) !important;
    margin: 0 auto !important;
  }

  #call-to-action .book-call-subtext {
    width: min(100%, 680px) !important;
    margin: 0 auto 8px !important;
  }

  #book-call {
    padding: 16px 0 0 !important;
  }

  .book-call-container {
    margin-inline: auto !important;
  }

  .book-call-embed {
    margin-bottom: 32px !important;
  }
}

@media (max-width: 768px) {
  #call-to-action {
    padding: 56px 20px 40px !important;
  }

  #call-to-action .project-heading {
    font-size: clamp(2rem, 9vw, 2.75rem) !important;
    line-height: 1.04 !important;
  }

  #call-to-action .book-call-subtext {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  #book-call {
    width: 100% !important;
    padding: 8px 0 0 !important;
  }

  #cal-mobile-wrapper {
    width: 100% !important;
    padding: 16px 0 !important;
  }

  #cal-mobile {
    width: 100% !important;
    min-height: 600px !important;
  }

  .book-call-footer {
    width: 100% !important;
    margin-top: 24px !important;
  }

  .site-footer-meta {
    width: 100% !important;
    padding: 20px !important;
  }
}

/* Short landscape screens */
@media (max-height: 620px) and (min-width: 769px) {
  #main-hero-section {
    min-height: 620px !important;
    height: 620px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-inner,
  .carousel-inner-reverse,
  .independent-carousel-inner {
    animation-play-state: paused !important;
  }
}