@charset "UTF-8";
/* ══════════════════════════════════════════════════════════
   CONTACT.CSS — this page only.
   Tokens, buttons, header, footer and the shared page-title
   and CTA components live in assets/css.
══════════════════════════════════════════════════════════ */
:root{--rule-w:636px}

/* ════════════════════════════════════════
   SEC 01 — PAGE TITLE (shared lockup)
════════════════════════════════════════ */

/* ════════════════════════════════════════
   SEC 02 — CONTACT FRAME
   The CTA frame from every other page, reused as a
   container: same 36px gutters, 6px purple border,
   30px radius, photo background. Two lavender panels
   sit on it — a narrow info card pinned left, a wide
   form card pinned right — with the photo showing
   through the gap between them.
════════════════════════════════════════ */
section.ct-sec-02{padding:5rem 0 4rem}
.ct-frame{
  border:6px solid var(--color-purple);
  border-radius:30px;
  background-image:url('bg-cta.webp');background-position:center;background-size:cover;background-repeat:no-repeat;
  padding:5.9rem 4.8rem 9rem 4.3rem;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:2rem;
  background-attachment: fixed;
}
.ct-panel{
  background:var(--color-lavender);
  border:4px solid var(--color-purple);
  border-radius:var(--r-panel);
  box-shadow:0 14px 40px rgba(20,8,40,.35);
}
.ct-info{flex:0 0 20.1%;max-width:376px;padding:2.4rem 2rem 2.6rem}
.ct-formcard{flex:0 0 43.2%;max-width:798px;padding:2.4rem 2.6rem 2.6rem}

/* ── info card ── */
.ct-info h2{font-size: 2rem;color:var(--color-purple);margin-bottom:.55rem}
.ct-info h2:not(:first-child){margin-top:1.9rem}
.ct-info p,.ct-info a{font-family:var(--font-sans);/* font-size:1rem; */line-height:1.55;color:var(--color-dark);text-decoration:none;display:block}
.ct-info a{transition:color .3s var(--ease)}
.ct-info a:hover{color:var(--color-pink)}

/* ── form ── */
.ct-field{margin-bottom:.85rem}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:1.9rem}
.ct-label{
  display:block;
  font-family:var(--font-display);text-transform:uppercase;
  font-size:1rem;letter-spacing:.01em;color:var(--color-purple);
  margin-bottom:.5rem;
}
.ct-input,.ct-select,.ct-textarea{
  width:100%;
  background:var(--color-white);
  border:1.5px solid transparent;
  border-radius:var(--r-field);
  padding:.95rem 1.5rem;
  font-family:var(--font-sans);font-size:1rem;line-height:1.4;
  color:var(--color-dark);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.ct-textarea{border-radius:var(--r-card);min-height:177px;resize:vertical;padding:1.1rem 1.5rem}
.ct-input::placeholder,.ct-textarea::placeholder{color:#8b839b;opacity:1}
.ct-input:focus,.ct-select:focus,.ct-textarea:focus{
  outline:none;border-color:var(--color-purple);
  box-shadow:0 0 0 4px rgba(105,68,178,.18);
}
/* native select arrow, drawn rather than imported */
.ct-select{
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--color-purple) 50%),linear-gradient(135deg,var(--color-purple) 50%,transparent 50%);
  background-position:calc(100% - 26px) 55%,calc(100% - 19px) 55%;
  background-size:7px 7px,7px 7px;
  background-repeat:no-repeat;
  padding-right:3.2rem;cursor:pointer;
}
.ct-submit{
  width:100%;margin-top:1.1rem;
  padding:.95rem 1rem;
  background:var(--color-purple);border:1.5px solid var(--color-purple);
  border-radius:var(--r-field);
  color:var(--color-white);
  font-family:var(--font-display);font-size:1.2rem;letter-spacing:.01em;
  text-transform:uppercase;cursor:pointer;
  transition:background .38s var(--ease),border-color .38s var(--ease);
}
.ct-submit:hover{background:var(--color-dark);border-color:var(--color-dark)}
.ct-submit:focus-visible{outline:3px solid var(--color-pink);outline-offset:3px}
.ct-status{margin-top:.9rem;font-size:.95rem;line-height:1.5;color:var(--color-purple);min-height:1.4em}
.ct-status[data-state="error"]{color:#b3245f}

/* ── RESPONSIVE ── */
@media(max-width:1399px){
  .ct-frame{padding:4rem 3rem 5rem;gap:2.5rem}
  .ct-info{flex:0 0 30%}
  .ct-formcard{flex:0 0 62%}
}
@media(max-width:991px){
    .ct-frame{flex-direction:column;align-items:stretch;padding:2.5rem 1.75rem;gap:1.75rem}
  .ct-info,.ct-formcard{flex:1 1 auto;max-width:none}
}
@media(max-width:767px){
  .ct-row{grid-template-columns:1fr;gap:0}
  .ct-frame{padding:1.5rem 1rem}
  .ct-formcard{padding:1.6rem 1.2rem 1.8rem}
}