/* =====================================================
   CONTACT PAGE – page-specific styles
===================================================== */

.bg-wave-bottom {
  top: 400px;
}

/* ── Contact details block ── */
.ct-contact-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 32px;
}

.ct-detail-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ct-detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(0, 200, 200, 0.12);
  border-radius: 50%;
  color: var(--teal);
  font-size: 16px;
  flex-shrink: 0;
}

/* body paragraph — matches global p token */
.ct-detail-text {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--white);
  text-decoration: none;
}

a.ct-detail-text:hover {
  color: var(--teal);
}

/* ── Form wrapper ── */
.ct-form-wrap {
  background: rgba(255, 255, 255, 0.05);
  border: 3px solid var(--teal);
  border-radius: 20px;
  width: 100%;
  max-width: 580px;
  display: flex;
  flex-direction: column;
  padding:32px 20px;
}

.au-diff-card-body {
  border: 3px solid var(--teal);
  border-radius: 20px;
}

.au-diff-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* ── Form layout ── */
.ct-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ct-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ct-field {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ct-field--full {
  grid-column: 1 / -1;
}

/* ── Input wrapper with icon ── */
.ct-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* Icon inside the input on the right */
.ct-input-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--teal);
  font-size: 16px;
  pointer-events: none;
  line-height: 1;
}

/* Textarea icon sits at top-right */
.ct-textarea-icon {
  top: 16px;
  transform: none;
}

/* ── Inputs, selects, textarea — label size (16px / 400) ── */{
    
}
.ct-field input,
.ct-field select{
    height:45px;
    
}
.ct-field input,
.ct-field select,
.ct-field textarea {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: #1a2a3a;
  background: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 10px;
  padding: 14px 44px 14px 16px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.ct-field textarea {
  resize: none;
  min-height: 220px;
  padding-top: 14px;
  align-self: stretch;
}

.ct-field input::placeholder,
.ct-field textarea::placeholder {
  color: #6b8aaa;
}

.ct-field input:focus,
.ct-field select:focus,
.ct-field textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 200, 200, 0.15);
}

/* ── Select: hide default arrow, show custom chevron ── */
.ct-select-wrap select {
  padding-right: 44px;
  cursor: pointer;
  color: #6b8aaa;
}

.ct-select-wrap select:valid:not([value=""]) {
  color: #1a2a3a;
}

.ct-select-chevron {
  color: var(--teal);
  font-size: 14px;
}

.ct-field select option {
  background: #ffffff;
  color: #1a2a3a;
}

/* ── Honeypot spam trap (visually hidden, not display:none so bots see it) ── */
.ct-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Status message ── */
.ct-form-msg {
  margin: 6px 0 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
}
.ct-form-msg--ok  { color: var(--teal); }
.ct-form-msg--err { color: #ffb4b4; }

/* ── Form footer ── */
.ct-form-footer {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.ct-form-fineprint {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  max-width: 58%;
}

/* ── Thank-you panel (replaces the form after submit) ── */
.ct-form[hidden],
.ct-thankyou[hidden] {
  display: none;
}

.ct-thankyou {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  text-align: center;
  padding: 12px 8px;
}

.ct-thankyou-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 600;
  color: var(--white);
}

.ct-thankyou-text {
  margin: 0 auto;
  max-width: 480px;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

/* ── Submit button — label-text size (16px / 600 / uppercase) ── */
.ct-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 14px 28px;
  flex-shrink: 0;
}

/* ── Override hero layout for contact page ──
   Both columns should stretch to align vertically. */
.about-hero-section .au-hero-inner {
  align-items: flex-start;
}

/* ── Right column: "Talk to us" row above the form ── */
.ct-right {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ct-right .ct-form-wrap {
  max-width: none;
}

.ct-talk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 30px;
  margin-left: 10px;
  margin-right: 15px;
}

.ct-talk-label {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
}

.ct-contact-details--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 65px;
  margin-top: 0;
}

.ct-contact-details--row .ct-detail-icon {
  width: 34px;
  height: 34px;
  font-size: 14px;
}

/* ── Review carousel (2 cards per view, sliding) ── */
.ct-reviews {
  /* Pulled up so the hanging logo pill's bottom lines up with the bottom
     of the contact form in the column alongside it. */
  margin-top: 42px;
}

.ct-reviews .cs-row-viewport {
  overflow: hidden;
  /* room so the logo hanging over the bottom of the card isn't clipped */
  padding-bottom: 100px;
}

.ct-reviews .cs-row-track {
  display: flex;
  gap: 20px;
  align-items: stretch;
}

.ct-reviews .cs-row-slide {
  flex: 0 0 auto;
}

.ct-review-card {
  position: relative;
  overflow: visible;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  min-height: 330px;
  background: rgba(255, 255, 255, 0.05);
  border: 3px solid var(--teal);
  border-radius: 20px;
  padding: 34px 34px 38px;
}

/* Transparent speech bubble to make the quote stand out */
.ct-review-bubble {
  position: relative;
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  padding: 26px 28px;
}

.ct-review-bubble::after {
  content: "";
  position: absolute;
  left: 46px;
  bottom: -14px;
  width: 0;
  height: 0;
  border-right: 22px solid transparent;
  border-top: 16px solid rgba(255, 255, 255, 0.07);
}

.ct-review-text {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.55;
  color: var(--white);
  margin: 0;
  text-align: center;
}

/* Attribution role beneath the quote (e.g. "— Activity Coordinator") */
.ct-review-role {
  display: block;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  font-style: normal;
  color: var(--teal);
  text-align: center;
}

/* Care-group logo hangs over the bottom border of the card. A fixed pill
   footprint + object-fit:contain minimises every logo to the same size
   (matching SWCH) regardless of its own aspect ratio, and the generous side
   padding keeps wide logos clear of the rounded pill ends so nothing is
   clipped. */
.ct-review-logo {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: 210px;
  height: 78px;
  max-width: none;
  object-fit: contain;
  background: #fff;
  border-radius: 999px;
  padding: 13px 34px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

/* Careoligy & Country Court are more compact, so at the shared width they
   render taller than the rest. Extra side padding narrows their available
   width, bringing their height in line with the other logos. */
.ct-review-logo--sm {
  padding-left: 54px;
  padding-right: 54px;
}

.ct-reviews-dots {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  /* Pull the dots up so they tuck in tight under the card's bottom-left,
     while the centred logo hangs lower without colliding. */
  margin-top: -46px;
  position: relative;
  z-index: 1;
}

.ct-reviews .cs-row-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: var(--teal);
  opacity: 0.4;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.ct-reviews .cs-row-dot:hover { opacity: 0.7; }
.ct-reviews .cs-row-dot.active { opacity: 1; transform: scale(1.15); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .ct-form-row {
    grid-template-columns: 1fr;
  }

  .ct-form-wrap {
    /*padding: 24px 20px;*/
    max-width: 100%;
  }

  .au-hero-inner {
    flex-direction: column;
  }

  .ct-form-footer {
    flex-direction: column;
    /*align-items: stretch;*/
    gap: 16px;
  }

  .ct-form-fineprint {
    max-width: 100%;
  }
}