/* ============================================================================
   Contact us page
   ---------------------------------------------------------------------------
   SCOPING. A page stylesheet is global once bundled, so the one shared class
   this page borrows — `.sc-faq__list`, for the accordion — is overridden only
   through `.ct-faq__list`, never by naming `.sc-` on its own.
   ========================================================================= */

.ct-top, .ct-exp, .ct-next, .ct-faq { position: relative; overflow: hidden; }

/* `.section--flow + .section--flow` zeroes the top padding so consecutive
   bands read as one field. These are distinct bands, so each keeps its own. */
.ct-exp.section.section--flow,
.ct-next.section.section--flow,
.ct-faq.section.section--flow { padding-top: var(--section-y); }

/* --- 1. Introduction + form --------------------------------------------------
   No hero image and a tightened top pad, because the guide wants the form
   visible without scrolling on a typical desktop screen. */

.ct-top {
  padding-top: clamp(6.5rem, 4.5rem + 7vw, 9.5rem);
  padding-bottom: clamp(3rem, 2rem + 4vw, 5rem);
  background: var(--page);
}
.ct-top__field { position: absolute; inset: 0; background: var(--page-wash); pointer-events: none; }

.ct-top__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 1.4rem + 3vw, 3.75rem);
  align-items: start;
}
.ct-top__grid > * { min-width: 0; }
/* Source order is intro → form → direct contact, which is the mobile stack the
   guide asks for. On two columns the direct details belong back under the
   intro, so they are placed there explicitly rather than reordered — the tab
   order still follows the source, and the form keeps the right-hand column to
   itself across both rows. */
@media (min-width: 960px) {
  .ct-top__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    /* The form is taller than the intro, so the spare height has to go
       somewhere. `1fr` on the second row sends it below the direct details
       rather than into the gap above them. */
    grid-template-rows: min-content 1fr;
    row-gap: 0;
  }
  .ct-top__copy { grid-column: 1; grid-row: 1; }
  .ct-top__form { grid-column: 2; grid-row: 1 / span 2; }
  .ct-direct    { grid-column: 1; grid-row: 2; align-self: start; }
}

.ct-top__title {
  margin: 1.1rem 0 0;
  max-width: 17ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.1rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--blue-700);
}
.ct-top__p {
  margin: 1.1rem 0 0;
  max-width: 48ch;
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--text-secondary);
}
.ct-top__reassure {
  margin: 1.35rem 0 0;
  max-width: 48ch;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* --- Direct contact ---------------------------------------------------------- */

.ct-direct { margin-top: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); }
.ct-direct__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
  font-weight: 700;
  color: var(--blue-700);
}
.ct-direct__list {
  display: grid;
  gap: 0.6rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}
.ct-direct__list li { display: flex; align-items: center; gap: 0.7rem; }
.ct-direct__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--r-sm);
  background: var(--blue-100);
  color: var(--blue-600);
}
.ct-direct__list a {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--blue-600);
  text-decoration: none;
}
.ct-direct__list a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- The form card ------------------------------------------------------------ */

.cf {
  display: grid;
  gap: 0.9rem;
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border), var(--e-2);
}
.cf__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 700;
  color: var(--blue-600);
}

.cf__field { display: grid; gap: 0.35rem; margin: 0; }
/* Visible label above every field, as the guide asks — never a placeholder
   standing in for one. */
.cf__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-900);
}
.cf__req { color: var(--blue-600); }
.cf__opt { font-weight: 500; color: var(--text-secondary); }

.cf__input {
  width: 100%;
  padding: 0.62rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--white);
  /* 16px on mobile keeps iOS from zooming the page on focus. */
  font: inherit;
  font-size: max(1rem, var(--fs-sm));
  color: var(--ink-900);
  transition: border-color var(--d-fast) var(--ease-out-soft),
              box-shadow var(--d-fast) var(--ease-out-soft);
}
.cf__input::placeholder { color: var(--text-secondary); opacity: .75; }
.cf__input:focus-visible {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgb(35 105 210 / .18);
}
.cf__input--area { min-height: 6.5rem; resize: vertical; }
.cf__input--select {
  appearance: none;
  padding-right: 2.2rem;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%232369D2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 1.05rem;
}

/* Errors name the field and sit against it, never in a summary at the top. */
.cf__field.has-error .cf__input { border-color: #C0392B; }
.cf__error {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #A93226;
}

.cf__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  padding: 0.8rem 1.35rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--yellow-300);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-900);
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out-soft),
              transform var(--d-fast) var(--ease-out-soft);
}
.cf__submit:hover { background: var(--yellow-400); transform: translateY(-1px); }
.cf__submit:active { transform: none; }

.cf__note {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  text-align: center;
  color: var(--text-secondary);
}
.cf__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0.2rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
}
.cf__privacy { color: var(--blue-600); text-underline-offset: 3px; }
.cf__privacy.is-pending { color: var(--text-secondary); cursor: default; }
.cf__required { color: var(--text-secondary); }

/* --- The confirmation that replaces the form ---------------------------------- */

.cf--done { justify-items: center; text-align: center; gap: 0.7rem; }
.cf__tick {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--r-pill);
  background: #E4F5EA;
  color: #1E7A44;
}
.cf--done .cf__title { color: var(--ink-900); }
.cf__doneBody {
  margin: 0;
  max-width: 42ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}
.cf__doneNote {
  margin: 0;
  max-width: 42ch;
  padding: 0.6rem 0.9rem;
  border-radius: var(--r-md);
  background: var(--blue-50);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--blue-700);
}
.cf__again {
  margin-top: 0.2rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* --- 2. Relevant customer experience ------------------------------------------- */

.ct-exp { background: var(--white); }
.ct-exp__inner { position: relative; z-index: 1; text-align: center; }
.ct-exp__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--blue-700);
}
.ct-exp__lead {
  margin: 0.85rem auto 0;
  max-width: 56ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

.ct-exp__row {
  display: flex;
  flex-wrap: wrap;
  /* Stretch, not centre: one customer carries a launch label and the rest do
     not, and centring set their names on two different baselines. This puts
     every name on one line and lets the label hang beneath its own. */
  align-items: stretch;
  justify-content: center;
  gap: 0.75rem clamp(1.25rem, 0.9rem + 2vw, 3rem);
  margin: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem) 0 0;
  padding: 0;
  list-style: none;
}
.ct-exp__customer {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 0.3rem;
  padding: 0 clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
}
/* The divider the guide's mockup sets between names. It is decoration, so it
   is drawn rather than typed, and the first item goes without. */
@media (min-width: 720px) {
  .ct-exp__customer + .ct-exp__customer { border-left: 1px solid var(--border); }
}
.ct-exp__name {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.1rem);
  font-weight: 700;
  color: var(--blue-700);
}
.ct-exp__badge {
  padding: 0.15rem 0.55rem;
  border-radius: var(--r-pill);
  background: var(--yellow-300);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #5A4A05;
}
.ct-exp__link { margin: clamp(1.35rem, 1.1rem + 1vw, 2rem) 0 0; }
.ct-exp__link a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--blue-600);
  text-decoration: underline;
  text-decoration-color: var(--blue-300);
  text-underline-offset: 4px;
}
.ct-exp__link a:hover { text-decoration-color: currentColor; }

/* --- 3. What happens next -------------------------------------------------------
   Pale blue, as the guide asks, and no second call to action anywhere in it. */

.ct-next { background: var(--blue-50); }
.ct-next__inner { position: relative; z-index: 1; }
.ct-next__head { max-width: 54rem; margin: 0 auto clamp(2rem, 1.6rem + 2vw, 3rem); text-align: center; }
.ct-next__title {
  margin: 1.1rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.35rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--blue-700);
}

.ct-steps {
  display: grid;
  gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
@media (min-width: 820px) { .ct-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ct-step {
  display: grid;
  /* The cards stretch to match the tallest, and auto rows would have split
     that spare height between them — which set the three icons and the three
     headings at three different heights. Packing to the top lines them up. */
  align-content: start;
  justify-items: center;
  gap: 0.15rem;
  min-width: 0;
  padding: clamp(1.35rem, 1.1rem + 1vw, 1.9rem) clamp(1rem, 0.85rem + 0.7vw, 1.5rem);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border), var(--e-1);
  text-align: center;
}
.ct-step__n {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: var(--r-pill);
  background: var(--yellow-300);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-900);
}
.ct-step__icon { width: 4.5rem; height: 4.5rem; margin: 0.5rem 0 0.35rem; }
.ct-step__k {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.15rem);
  font-weight: 700;
  color: var(--blue-700);
}
.ct-step__d {
  margin: 0.45rem 0 0;
  max-width: 30ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* --- 4. A few questions ---------------------------------------------------------
   "Keep this section visually lighter than the introduction and form." */

.ct-faq { background: var(--white); }
.ct-faq__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
  align-items: start;
}
.ct-faq__grid > * { min-width: 0; }
@media (min-width: 900px) {
  .ct-faq__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}
.ct-faq__title {
  margin: 1.1rem 0 0;
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.35rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--blue-700);
}
.ct-faq__mark { width: clamp(5rem, 4.4rem + 2.5vw, 7.5rem); height: auto; margin-top: 1.25rem; }

/* The shared accordion, lightened for this page: no panel ground behind it,
   and a hairline rather than a raised card. */
.ct-faq__list { max-width: none; margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .cf__submit, .cf__submit:hover { transition: none; transform: none; }
}