/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:  relative;
  width:     1024px;
  max-width: calc(100% - 160px); /* 80px × 2 — desktop */
  margin:    0 auto;
}

/* Tablet (≤991px): 60px × 2 = 120px */
@media (max-width: 991px) {
  .container {
    max-width: calc(100% - 120px);
  }
}

/* Landscape mobile (≤767px): 2rem × 2 = 4rem */
@media (max-width: 767px) {
  .container {
    max-width: calc(100% - 4rem);
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1360px + 96px);   /* 1360px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet + landscape mobile (≤991px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 2rem;
  }

  .container-wide > * {
    margin-left:  -1rem;
    width:        calc(100% + 2rem) !important;
  }
}


/* ============================================================
   CtaSection — "Ready to talk?" 2-step CTA form
   ============================================================ */

/* ---- Calendly inline widget container ---- */
.cta-calendly {
  position:  relative;
  min-width: 320px;
  height:    700px;
  width:     100%;
}

/* Custom preloader — centered, sits behind the widget */
.cta-calendly__preloader {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         0;
}

.cta-calendly__spinner {
  width:         36px;
  height:        36px;
  border:        2.5px solid var(--border);
  border-top-color: var(--foreground);
  border-radius: var(--radius-full);
  animation:     cta-spin 0.7s linear infinite;
}

@keyframes cta-spin {
  to { transform: rotate(360deg); }
}

/* Calendly widget fills the container on top of the preloader */
.cta-calendly__widget {
  position: absolute;
  inset:    0;
  z-index:  1;
}

/* Suppress Calendly's own spinner — we show ours instead */
.cta-calendly__widget .calendly-spinner {
  display: none !important;
}

/* ---- Outer section ---- */
.cta-section {
  position:    relative;
  padding:     8rem 0;
  background:  linear-gradient(
                 180deg,
                 rgba(229, 223, 213, 0.5) 0%,
                 rgba(222, 215, 204, 0.5) 100%
               ),
               var(--background);
  font-family: var(--font-family-default);
  width:       100%;
  box-sizing:  border-box;
}

.cta-section__inner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  align-items:           center;
  gap:                   2rem;
}


/* ============================================================
   Left: copy
   ============================================================ */

.cta-section__copy {
  display:        flex;
  flex-direction: column;
  gap:            2.25rem;
  padding-right:  2rem;
}

.cta-section__heading {
  margin:      0;
  font-size:   2.25rem;
  font-weight: var(--font-weight-bold);
  line-height: 2.5rem;
  color:       var(--foreground);
}

.cta-section__body {
  margin:      0;
  font-size:   1.25rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.75rem;
  color:       var(--foreground);
}


/* ============================================================
   Right: form card
   ============================================================ */

.cta-form {
  display:        flex;
  flex-direction: column;
  gap:            0;
  background:     var(--secondary);
  border:         0.5px solid var(--border);
  border-radius:  12px;
  overflow:       hidden;
  padding:        1.5rem 0;
}

/* Step label */
.cta-form__step-label {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
  color:       rgba(40, 40, 37, 0.4);
  padding:     0 1.75rem;
}

/* Fields container — grid so both steps occupy the same cell */
.cta-form__fields {
  display: grid;
  padding: 1.5rem 1.5rem 0;
}

/* Both steps stack in cell 1/1; inactive step is invisible but still occupies space */
.cta-form__step {
  grid-column:    1;
  grid-row:       1;
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;
  visibility:     hidden;
  pointer-events: none;
}

.cta-form__step--active {
  visibility:     visible;
  pointer-events: auto;
}

/* Side-by-side row (first/last name) */
.cta-form__row {
  display: flex;
  gap:     0.75rem;
}

.cta-form__row .cta-field {
  flex: 1;
}

/* Footer */
.cta-form__footer {
  display:         flex;
  justify-content: flex-end;
  padding:         1.5rem 1.5rem 0;
}

.cta-form__footer--split {
  justify-content: space-between;
}


/* ============================================================
   Form field
   ============================================================ */

.cta-field {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
}

.cta-field__label {
  margin:      0;
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
  color:       var(--foreground);
}

.cta-field__required {
  color: var(--primary);
}

/* Shared input base */
.cta-field__input,
.cta-field__select {
  width:         100%;
  height:        36px;
  padding:       4px 12px;
  background:    var(--background);
  border:        0.5px solid var(--input, var(--border));
  border-radius: 8px;
  font-family:   var(--font-family-default);
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-regular);
  line-height:   var(--line-height-sm);
  color:         var(--foreground);
  box-shadow:    0 1px 3px 0 rgba(0, 0, 0, 0.05);
  box-sizing:    border-box;
  outline:       none;
  transition:    border-color 150ms ease;
}

.cta-field__input::placeholder {
  color: var(--muted-foreground);
}

.cta-field__input:focus,
.cta-field__select:focus {
  border-color: var(--foreground);
}

.cta-field__input--error {
  border-color: var(--destructive);
}

.cta-field__error {
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xs);
  color:       var(--destructive);
}

/* Select */
.cta-field__select-wrap {
  position: relative;
}

.cta-field__select {
  appearance:    none;
  cursor:        pointer;
  padding-right: 2.25rem;
}

.cta-field__select:invalid,
.cta-field__select option[value=""] {
  color: var(--muted-foreground);
}

.cta-field__select-icon {
  position:       absolute;
  right:          10px;
  top:            50%;
  transform:      translateY(-50%);
  pointer-events: none;
  color:          var(--muted-foreground);
  display:        flex;
  align-items:    center;
}



/* ============================================================
   Radio group
   ============================================================ */

.cta-radio-group {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
  padding-top:    4px;
}

.cta-radio {
  display:     flex;
  align-items: flex-start;
  gap:         0.75rem;
  cursor:      pointer;
}

/* Hide native radio */
.cta-radio__input {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

/* Custom dot */
.cta-radio__dot {
  flex-shrink:   0;
  width:         16px;
  height:        16px;
  margin-top:    2px;   /* optical alignment with label text */
  border-radius: var(--radius-full);
  border:        1.5px solid var(--border);
  background:    var(--background);
  box-shadow:    0 1px 3px rgba(26, 26, 24, 0.05);
  box-sizing:    border-box;
  transition:    border-color 150ms ease, background 150ms ease;
}

.cta-radio__dot--checked {
  background: var(--primary);
  box-shadow: inset 0 0 0 3px var(--background);
}

.cta-radio__input:focus-visible + .cta-radio__dot {
  outline:        2px solid var(--foreground);
  outline-offset: 2px;
}

.cta-radio__text {
  display:        flex;
  flex-direction: column;
  gap:            0;
  flex:           1;
  min-width:      0;
}

.cta-radio__label {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
  color:       var(--foreground);
}

.cta-radio__desc {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
  color:       var(--muted-foreground);
}


/* ============================================================
   Legal text
   ============================================================ */

.cta-form__legal {
  margin:      0;
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
  color:       var(--muted-foreground);
  text-align:  center;
}

.cta-form__legal-link {
  color:                 inherit;
  text-decoration:       underline;
  text-underline-offset: 2px;
  transition:            color 150ms ease;
}

.cta-form__legal-link:hover {
  color: var(--foreground);
}


/* ============================================================
   Footer buttons
   ============================================================ */

/* Back — secondary pill */
.cta-form__back {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  padding:         0.625rem 1.5rem 0.625rem 1rem;
  background:      var(--secondary);
  border:          1px solid var(--border);
  border-radius:   var(--radius-full);
  font-family:     var(--font-family-default);
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-medium);
  line-height:     var(--line-height-sm);
  color:           var(--secondary-foreground);
  cursor:          pointer;
  transition:      opacity 150ms ease;
}

.cta-form__back:hover {
  opacity: 0.88;
}

/* Next — secondary pill */
.cta-form__next {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  padding:         0.625rem 1rem 0.625rem 1.5rem;
  background:      var(--secondary);
  border:          1px solid var(--border);
  border-radius:   var(--radius-full);
  font-family:     var(--font-family-default);
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-medium);
  line-height:     var(--line-height-sm);
  color:           var(--secondary-foreground);
  cursor:          pointer;
  transition:      opacity 150ms ease;
}

.cta-form__next:hover:not(:disabled) {
  opacity: 0.88;
}

.cta-form__next:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}

/* Submit wrapper + error */
.cta-form__submit-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            0.5rem;
}

.cta-form__submit-error {
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xs);
  color:       var(--destructive);
}

/* Submit — primary pill */
.cta-form__submit {
  display:       inline-flex;
  align-items:   center;
  gap:           0.5rem;
  padding:       0.625rem 1rem 0.625rem 1.5rem;
  background:    var(--primary);
  border:        none;
  border-radius: var(--radius-full);
  font-family:   var(--font-family-default);
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-medium);
  line-height:   var(--line-height-sm);
  color:         var(--primary-foreground);
  cursor:        pointer;
}

.cta-form__submit:not(:disabled) {
  transition: opacity 150ms ease;
}

.cta-form__submit:hover:not(:disabled) {
  opacity: 0.88;
}

.cta-form__submit:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}


/* ============================================================
   Tablet (≤991px)
   ============================================================ */

@media (max-width: 991px) {
  .cta-section {
    padding: 6rem 0;
  }

  .cta-section__inner {
    grid-template-columns: 1fr;
  }

  .cta-section__copy {
    padding-right: 0;
    gap:           2rem;
  }

  .cta-form {
    margin-left: -1rem;
    width:       calc(100% + 2rem);
  }
}


/* ============================================================
   Mobile (≤767px)
   ============================================================ */

@media (max-width: 767px) {
  .cta-section {
    padding: 4rem 0;
  }

  .cta-section__heading {
    font-size:   1.875rem;
    line-height: 2.25rem;
  }

  .cta-section__body {
    font-size:   1.125rem;
    line-height: 1.75rem;
  }
}


/* ============================================================
   Portrait mobile (≤479px)
   ============================================================ */

@media (max-width: 479px) {
  .cta-form__row {
    flex-direction: column;
  }
}