/* Shared page shell, flex layout, sections, and responsive spacing. */

:root {
  --reach-nav-height: 0px;
  --reach-mobile-section-nav-height: 0px;
  --reach-sidebar-width: 15rem;
  --reach-shell-max: 1600px;
  --reach-content-max: 1080px;
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: clip;
}

.reach-page {
  min-height: 100vh;
  padding: 3rem 0 6rem;
  background: var(--theme-background);
  color: var(--theme-text);
}

.reach-shell {
  width: 100%;
  max-width: var(--reach-shell-max);
}

.reach-layout {
  display: flex;
  width: 100%;
  gap: 3rem;
}

.reach-content-column {
  min-width: 0;
  width: 100%;
}

.reach-loading {
  min-height: 40vh;
}

.reach-section {
  position: relative;
  padding: 6.5rem 0;
  scroll-margin-top: calc(var(--reach-nav-height) + 2rem);
  border-bottom: 1px solid var(--theme-border);
}

.reach-section:first-child {
  padding-top: 1rem;
}

.reach-section:last-child {
  border-bottom: 0;
}

.reach-section-inner {
  width: 100%;
  max-width: var(--reach-content-max);
}

.reach-hero {
  min-height: 72vh;
  overflow: hidden;
}

.reach-hero-row {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 6rem);
  width: 100%;
}

.reach-copy-column {
  flex: 1 1 0;
  min-width: 0;
  order: 1;
}

.reach-media-column {
  flex: 0 1 470px;
  width: 100%;
  max-width: 470px;
  order: 2;
}

.reach-form-shell {
  padding-top: clamp(2.5rem, 7vw, 5.5rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.reach-form-wrap {
  width: min(100%, 760px);
  gap: clamp(2rem, 5vw, 3.5rem);
}

@media (max-width: 991.98px) {
  .reach-page.has-section-nav {
    padding-top: 0;
  }

  .reach-layout {
    flex-direction: column;
    gap: 0;
  }

  .reach-content-column {
    width: 100%;
  }

  .reach-section-inner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .reach-section {
    padding: 4.5rem 0;
    scroll-margin-top: calc(
      var(--reach-nav-height) + var(--reach-mobile-section-nav-height) + 1rem
    );
  }

  .reach-hero {
    min-height: auto;
    padding-top: 2rem;
  }

  .reach-hero-row {
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }

  .reach-copy-column,
  .reach-media-column {
    width: 100%;
    max-width: 100%;
  }

  .reach-media-column {
    order: 1;
  }

  .reach-copy-column {
    order: 2;
  }
}

@media (max-width: 767.98px) {
  .reach-form-shell {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

@media (max-width: 575.98px) {
  .reach-section {
    padding: 3.75rem 0;
  }
}