/* ============================================================
   GRAPHICXO — CONTACT
   Loaded only by contact.php, on top of main.css + pages.css.

   The brief furniture (.brief, .field, .picks, .brief__aside) still lives in
   pages.css. This layer adds the head, the field canvas, and the focus
   states that pair with it: whatever the particle swarm has gathered around
   is also the control the page has lit.
   ============================================================ */

.ct{position:relative}

/* ------------------------------------------------------------
   THE FIELD
   z-index:-1 keeps it under .main's in-flow content while still painting
   above the body background — a positioned z-index:0 child would paint
   over the form.
   ------------------------------------------------------------ */
.ct-field{
  position:fixed;inset:0;z-index:-1;
  width:100%;height:100%;pointer-events:none;
  opacity:0;transition:opacity 1.6s var(--ease);
}
.ct-field.is-live{opacity:1}
@media (prefers-reduced-motion:reduce){ .ct-field{display:none} }

/* ------------------------------------------------------------
   HEAD
   ------------------------------------------------------------ */
.ct-head{position:relative;padding-top:clamp(9rem,18vh,13rem);padding-bottom:clamp(2.5rem,6vh,4rem)}
.ct-head__eyebrow{display:flex;align-items:center;gap:.9rem;margin-bottom:1.4rem}
.ct-head__eyebrow::before{content:"";width:40px;height:1px;background:var(--gold)}

.ct-head__title{font-family:var(--serif);font-size:clamp(2.6rem,8.5vw,7.5rem);line-height:.94;letter-spacing:-.03em}
.ct-head__title em{color:var(--gold);font-style:italic;font-weight:300}
/* Each line rises out of its own mask; the padding stops the overflow
   shaving descenders. */
.ct-head__mask{display:block;overflow:hidden;padding-bottom:.08em}
.ct-head__mask > span{display:block;transform:translateY(115%);transition:transform 1.05s var(--ease)}
.ct-head__title.is-in .ct-head__mask > span{transform:none}
.ct-head__title.is-in .ct-head__mask:nth-child(2) > span{transition-delay:.1s}

.ct-head__foot{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:clamp(1.2rem,4vw,3rem);
  margin-top:2rem;padding-top:1.8rem;border-top:1px solid var(--line);
  opacity:0;transform:translateY(24px);
  transition:opacity 1s var(--ease) .2s, transform 1s var(--ease) .2s;
}
.ct-head__foot.is-in{opacity:1;transform:none}
.ct-head__desc{max-width:50ch;color:var(--grey);font-size:clamp(1rem,1.4vw,1.15rem);font-weight:300}
/* The promise, stated where it can be read before anything is typed. */
.ct-reply{display:flex;align-items:baseline;gap:.55rem;white-space:nowrap}
.ct-reply__n{font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);line-height:1;color:var(--gold)}
.ct-reply__l{font-size:.62rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--grey-dim)}

/* ------------------------------------------------------------
   THE LIT CONTROL
   The swarm gathers around whatever has focus; these are the same state,
   said in CSS. Without them the particles would be pointing at a control
   that looks no different from the rest of the form.
   ------------------------------------------------------------ */
.field input,.field select,.field textarea{
  padding-inline:.15rem;
  transition:border-color .4s,box-shadow .5s var(--ease),background .4s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  box-shadow:0 10px 26px -18px rgba(212,175,55,.95);
  background:linear-gradient(180deg,transparent 60%,rgba(212,175,55,.05));
}
.field:focus-within .field__label{color:var(--gold)}
.field__label{transition:color .35s}

/* The send button carries the swarm whenever nothing else does, so it gets
   room of its own rather than sitting tight under the last field. */
.brief__send{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:2.4rem}
.brief__send-note{font-size:.8rem;color:var(--grey-dim);font-weight:300;max-width:28ch}

/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .ct-head__mask > span,.ct-head__foot{opacity:1;transform:none;transition:none}
}