/* ==========================================================================
   Collsta website — Contact (/contact/)

   A subpage of the same site: header, footer, tokens and typography are the
   homepage's own. Nothing here is a new brand, a support portal or a help
   centre — it is one panel with a short form and the two facts a visitor
   needs.

   No scene, no loop, no scroll effect. The only motion is what a form owes
   the person using it: focus, selection, hover, and the state change after
   submitting.
   ========================================================================== */

.is-contact{
  /* Referenced throughout this file — they were used before they were
     declared, which made every error message and info link fall back to the
     inherited colour. Both are palette hues mixed toward navy so small text
     clears AA on white: coral at full strength measures 3.2:1 and --purple
     4.87:1, which is fine for the link but not for a 12.5px error line. */
  --ct-error:#A0526A;
  --ct-error-soft:#FFF1F3;
  --ct-purple:#665EE6;

  background:var(--surface-page);
}
@supports (color:color-mix(in oklab,red,blue)){
  .is-contact{
    --ct-error:color-mix(in oklab,var(--coral) 70%,var(--navy));
    --ct-error-soft:color-mix(in oklab,var(--coral) 12%,#FFFFFF);
  }
}

.ct{
  position:relative;
  padding-top:calc(var(--nav-h) + clamp(34px,5vw,72px));
  padding-bottom:clamp(56px,7vw,104px);
  overflow:hidden;
  isolation:isolate;
}
@supports (overflow:clip){
  .is-contact .ct{overflow:clip}
}
/* One soft wash, kept fully inside the block. */
.ct::before{
  content:"";
  position:absolute;
  left:50%;top:-14%;
  width:min(88vw,1080px);
  aspect-ratio:1.8;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(184,171,242,.28) 0%,
    rgba(255,154,163,.12) 46%,
    rgba(184,171,242,0) 72%);
  z-index:0;pointer-events:none;
}

/* ==========================================================================
   Intro
   ========================================================================== */
.ct__head{position:relative;z-index:1;max-width:44rem}
.ct__title{
  margin-top:clamp(10px,1.4vw,16px);
  font-family:var(--font-display);
  font-weight:var(--fw-extrabold);
  font-size:clamp(32px,4vw,50px);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  color:var(--navy);
}
.ct__title-accent{
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ct__sub{
  margin:clamp(14px,1.8vw,20px) 0 0;
  max-width:40rem;
  font-size:var(--fs-body-lg);
  line-height:var(--lh-body);
  color:var(--text-body);
  text-wrap:pretty;
}

/* ==========================================================================
   Panel
   ========================================================================== */
.ct__panel{
  position:relative;z-index:1;
  margin-top:clamp(28px,3.6vw,52px);
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(18px,2.4vw,36px);
  align-items:start;
}
.ct-card{
  border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  padding:clamp(20px,2.6vw,36px);
}

/* ==========================================================================
   Form
   ========================================================================== */
.ct-form{display:flex;flex-direction:column;gap:clamp(16px,1.8vw,22px)}
.ct-field{display:flex;flex-direction:column;gap:7px}
.ct-label{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:12.5px;
  color:var(--navy);
}
.ct-label__opt{font-weight:var(--fw-regular,400);color:var(--text-meta)}

.ct-input,
.ct-textarea{
  width:100%;
  padding:12px 14px;
  border-radius:var(--radius-md);
  background:var(--surface);
  border:1px solid var(--border);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  color:var(--navy);
  transition:border-color var(--dur-mid) var(--ease-out),
             box-shadow var(--dur-mid) var(--ease-out);
}
.ct-input::placeholder,
.ct-textarea::placeholder{color:var(--text-meta)}
.ct-textarea{min-height:132px;resize:vertical}

/* Focus is drawn on the control itself rather than relying only on the global
   outline: on a filled field the ring alone reads as decoration, the border
   change is what says "you are here". */
.ct-input:focus-visible,
.ct-textarea:focus-visible{
  outline:none;
  border-color:var(--purple-bright);
  box-shadow:0 0 0 3px rgba(115,92,255,.18);
}
/* Filled: a settled field is quieter than an empty one. */
.ct-input:not(:placeholder-shown),
.ct-textarea:not(:placeholder-shown){background:var(--bg-soft)}

/* ---- Error ---- */
.ct-field.is-invalid .ct-input,
.ct-field.is-invalid .ct-textarea{
  border-color:var(--ct-error);
  box-shadow:0 0 0 3px rgba(176,70,106,.14);
}
.ct-error{
  display:none;
  align-items:center;gap:6px;
  font-size:12.5px;
  color:var(--ct-error);
}
.ct-field.is-invalid .ct-error{display:flex}
.ct-error::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:currentColor;flex:none;
}

/* ---- Topic chips (real radios) ---- */
.ct-topics{border:0;margin:0;padding:0}
.ct-topics__legend{
  padding:0;margin-bottom:9px;
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:12.5px;
  color:var(--navy);
}
.ct-chips{display:flex;flex-wrap:wrap;gap:8px}
.ct-chip{position:relative}
/* The input stays in the accessibility tree and keeps keyboard behaviour —
   it is only visually replaced by its label. */
.ct-chip__input{
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  margin:0;
}
.ct-chip__label{
  display:inline-flex;align-items:center;
  /* 42px tall: a comfortable target without turning the row into buttons. */
  padding:11px 16px;
  border-radius:var(--radius-pill);
  background:var(--surface);
  border:1px solid var(--border);
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:13px;
  color:var(--text-body);
  cursor:pointer;
  transition:background var(--dur-mid) var(--ease-out),
             border-color var(--dur-mid) var(--ease-out),
             color var(--dur-mid) var(--ease-out);
}
.ct-chip__label:hover{border-color:var(--lavender)}
.ct-chip__input:checked + .ct-chip__label{
  background:var(--lavender-pale);
  border-color:transparent;
  color:var(--navy);
}
/* The ring has to follow the hidden input onto its label. */
.ct-chip__input:focus-visible + .ct-chip__label{
  outline:2px solid var(--focus-ring);
  outline-offset:3px;
}

/* ---- Honeypot: never shown, never announced, never tabbed to ---- */
.ct-hp{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}

/* ---- Submit ---- */
.ct-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ct-submit[disabled]{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
}
.ct-submit.is-sending{cursor:progress}
.ct-spinner{
  width:15px;height:15px;flex:none;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  display:none;
}
.ct-submit.is-sending .ct-spinner{
  display:block;
  animation:ct-spin .7s linear infinite;
}
@keyframes ct-spin{to{transform:rotate(360deg)}}
.ct-note{font-size:12.5px;color:var(--text-meta)}

/* ---- Form-level status ---- */
.ct-status{
  display:none;
  gap:10px;
  padding:13px 15px;
  border-radius:var(--radius-md);
  font-size:13.5px;
  line-height:1.5;
}
.ct-status.is-shown{display:flex}
.ct-status--error{
  background:var(--ct-error-soft);
  color:var(--ct-error);
}
.ct-status--error a{color:inherit;text-decoration:underline}

/* ---- Success ---- */
.ct-success{
  display:none;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}
.ct-success.is-shown{display:flex}
.ct-success__mark{
  width:44px;height:44px;
  border-radius:50%;
  display:grid;place-items:center;
  background:var(--lavender-pale);
}
.ct-success__title{
  font-family:var(--font-display);
  font-weight:var(--fw-extrabold);
  font-size:clamp(19px,1.9vw,23px);
  letter-spacing:var(--ls-tight);
  color:var(--navy);
}
.ct-success__text{
  font-size:14.5px;
  line-height:1.6;
  color:var(--text-body);
  max-width:38rem;
}
.ct-form.is-hidden{display:none}

/* ==========================================================================
   Side info
   ========================================================================== */
.ct-side{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px)}
.ct-info{
  border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  padding:clamp(16px,1.8vw,22px);
}
.ct-info__label{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-meta);
  margin-bottom:8px;
}
.ct-info__main{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:15.5px;
  color:var(--navy);
  line-height:1.4;
}
.ct-info__text{
  margin-top:7px;
  font-size:13px;
  line-height:1.55;
  color:var(--text-body);
}
.ct-info__link{
  color:var(--ct-purple);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-color:var(--lavender);
  transition:text-decoration-color var(--dur-mid) var(--ease-out);
}
.ct-info__link:hover{text-decoration-color:currentColor}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (max-width:900px){
  /* Not a squeezed two-column: the form goes full width and the info cards
     follow it, which is also the order they matter in. */
  .ct__panel{grid-template-columns:minmax(0,1fr);gap:16px}
}

@media (max-width:640px){
  .ct-card{padding:18px}
  /* Larger targets on touch. */
  .ct-input,.ct-textarea{padding:13px 14px;font-size:16px}
  .ct-chip__label{padding:12px 16px;font-size:13.5px}
  .ct-actions{flex-direction:column;align-items:stretch}
  .ct-submit{width:100%;justify-content:center}
  .ct-note{text-align:center}
}