/* /contact/ - the page-specific layer.
 *
 * Everything shared comes from prospira.css: .section, .container, .card, .btn,
 * .eyebrow, .spec-pills, .section-head, .u-h1-plain / .u-h1-serif, the .reveal
 * choreography and .hero-seq / .hero-item. This file holds only what is true of
 * THIS page. landing.css is not loaded - it is scoped to body.page-home.
 *
 * The two dropdowns are the shared .s-sel listbox - prospira.css for the look,
 * js/select.js for the behaviour - the same control as the booking dialog's
 * country picker and the language switcher in the nav. Nothing about it is
 * restated here.
 */

/* ---------- Hero ------------------------------------------------------------
   No backdrop canvas here on purpose. /about/ and /services/ both open on a
   drawn field, and a contact page that arrives with the same production value
   reads as a landing page - which invites scepticism at exactly the moment the
   page is asking to be believed. The page-wide sparkles are enough. */
.ct-hero {
  padding: clamp(84px, 6.6vw, 96px) 0 0;
}
.ct-hero-in {
  position: relative;
  z-index: 1;
  text-align: center;
}
.ct-title {
  margin: 0 0 18px;
  max-width: 720px;
  margin-inline: auto;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--text-hi);
}
.ct-lead {
  margin: 0 auto;
  max-width: 54ch;
  /* the same step as .u-hero-lede, which /utility/ and /services/ use */
  font-size: clamp(1rem, 2.2vw, 1.18rem);
  line-height: 1.6;
  color: var(--text-mid);
}
.page-contact .ct-hero-in .spec-pills {
  justify-content: center;
  margin-top: 26px;
}

/* ---------- The two routes --------------------------------------------------
   Two columns, equal weight, on purpose. The email card is FIRST in the source
   and first on the left, because the person who cannot use the ticket is the
   one this page was losing. Equal weight is also the honest arrangement: the
   ticket is better once you have an account, and worse before you do. */
.ct-routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.ct-route {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 30px);
  /* so the corner mark below is cut by the card's own radius */
  overflow: hidden;
}

/* The corner mark: what the card DOES, drawn once at watermark size. It sits
   under everything, is masked so it is strongest in the corner and gone by the
   time it reaches the words, and never takes a pointer event.

   The two are not the same alpha on purpose, and the numbers are measured, not
   judged: rasterised at 138px and averaged, the stroked envelope inks 23.5% of
   its box and the solid Discord glyph 53.9% - 2.3x as much. Equal opacity would
   make the blue one read as a logo stamped on the card while the other read as
   texture. So alpha is set to equalise INK, not opacity: 0.09 x 0.235 = 0.0212,
   and 0.039 x 0.539 = 0.0210. Change one glyph and re-measure. */
.ct-route-mark {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 138px;
  height: 138px;
  z-index: 0;
  pointer-events: none;
  color: #a8c4ff;
  opacity: 0.09;
  -webkit-mask-image: radial-gradient(112% 112% at 92% 8%, #000 18%, transparent 74%);
          mask-image: radial-gradient(112% 112% at 92% 8%, #000 18%, transparent 74%);
}
.ct-route-alt .ct-route-mark { opacity: 0.039; }
.ct-route-mark svg { display: block; width: 100%; height: 100%; }
/* Everything the card says stays above it. */
.ct-route > :not(.ct-route-mark) { position: relative; z-index: 1; }
.ct-route-who {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7fa2ff;   /* --accent-soft does not exist; this always WAS the literal */
}
.ct-route-h {
  margin: 0 0 12px;
  font-size: clamp(1.24rem, 1.8vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text-hi);
}
.ct-route-body {
  margin: 0 0 20px;
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--text-mid);
}
/* The address is set in mono and is selectable text, not a button. Someone who
   wants to paste it into their own mail client should be able to see it whole -
   a mailto: button that hides the address is asking for trust it has not earned. */
.ct-mail {
  display: inline-block;
  align-self: flex-start;
  padding: 11px 15px;
  border-radius: 12px;
  border: 1px solid var(--border-mid);
  background: linear-gradient(180deg, rgba(16, 22, 44, 0.5), rgba(10, 14, 30, 0.56));
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text-hi);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.ct-mail:hover { border-color: var(--border-strong); }
.ct-route-cta { align-self: flex-start; }
.ct-aside {
  max-width: 62ch;
  margin: 22px auto 0;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-low);
}
.ct-aside strong { color: var(--text-mid); font-weight: 500; }

/* ---------- The form --------------------------------------------------------
   A narrow state panel beside a wide form. The split is not decoration: the
   panel answers "who am I signed in as, and where does this end up", the form
   takes the words. Keeping those apart means the form is never interrupted by a
   notice in the middle of a sentence, which is what the old amber gate did.

   The form column still lands near the 640px it wants for comfortable typing;
   the panel takes the space to its left rather than stealing from it, which is
   why the whole block is capped wider than the 720px it used to be. */
.ct-write { max-width: 980px; }
.ct-write-grid {
  display: grid;
  grid-template-columns: minmax(0, 268px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
.ct-card { padding: clamp(22px, 2.6vw, 32px); }

/* --- the state panel --- */
.ct-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 2.4vw, 30px) 22px;
  text-align: center;
}
/* The badge is the page's one piece of borrowed identity, so it is drawn as a
   lit plate rather than a flat brand circle - Discord's own blurple would be the
   only colour on the site that is not ours, sitting at the exact moment we ask
   someone to trust us. The mark stays recognisable; the light is the site's. */
.ct-side-badge {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 999px;
  border: 1px solid rgba(120, 160, 255, 0.3);
  background:
    radial-gradient(130% 130% at 30% 12%, rgba(95, 135, 255, 0.26), transparent 66%),
    linear-gradient(180deg, rgba(18, 26, 54, 0.82), rgba(10, 16, 34, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13),
              0 0 26px -14px rgba(42, 91, 255, 0.75);
  color: #a8c4ff;
}
.ct-side-h {
  margin: 0 0 10px;
  font-size: 1.04rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-hi);
}
.ct-side-body {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-mid);
}
.ct-side-action { margin-top: 18px; width: 100%; }
.ct-side-action:empty { display: none; }
.ct-side-action .btn { width: 100%; justify-content: center; }
.ct-side-note {
  display: block;
  margin-top: 10px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-low);
}
.ct-form { display: flex; flex-direction: column; gap: 22px; }
.ct-field { min-width: 0; }   /* was a <fieldset> reset; it is a <div> now */
.ct-label {
  display: block;
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mid);
}

.ct-form textarea {
  display: block;
  width: 100%;
  min-height: 148px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border-mid);
  background: linear-gradient(180deg, rgba(10, 14, 30, 0.66), rgba(8, 11, 24, 0.72));
  color: var(--text-hi);
  font-family: inherit;
  font-size: 0.98rem;
  line-height: 1.6;
  resize: vertical;
  transition: border-color var(--dur-1) var(--ease-out);
}
.ct-form textarea::placeholder { color: var(--text-low); }
.ct-form textarea:focus-visible {
  outline: none;
  border-color: rgba(120, 160, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(42, 91, 255, 0.16);
}
.ct-count {
  margin: 8px 0 0;
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.76rem;
  color: var(--text-low);
}
.ct-count.is-near { color: #ffd9a0; }

.ct-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.ct-submit[disabled] { opacity: 0.45; cursor: not-allowed; }
.ct-submit.is-busy { pointer-events: none; }
/* It is a text link, but it sits beside a button as a real alternative route, so
   it has to be as easy to hit as one. Measured at 23px before the min-height -
   the text's own line box - which is under the 44px this site holds itself to. */
.ct-actions-alt {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.88rem;
  color: var(--text-low);
  text-underline-offset: 3px;
}
.ct-actions-alt:hover { color: var(--text-mid); }

.ct-status {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-mid);
}
.ct-status:empty { display: none; }
.ct-status.is-error { color: #ffb4b4; }

/* ---------- Sent ------------------------------------------------------------ */
.ct-done { text-align: center; padding: 8px 0 4px; }
.ct-done-mark {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 999px;
  border: 1px solid rgba(120, 160, 255, 0.32);
  background: radial-gradient(130% 130% at 30% 12%, rgba(95, 135, 255, 0.22), transparent 64%);
  color: #a8c4ff;
}
.ct-done-h {
  margin: 0 0 10px;
  font-size: clamp(1.2rem, 1.8vw, 1.44rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.22;
  color: var(--text-hi);
}
.ct-done-body {
  margin: 0 auto 22px;
  max-width: 46ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-mid);
}
.ct-done-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* ---------- Responsive ------------------------------------------------------ */
@media (max-width: 860px) {
  .ct-routes { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
  /* One column now, so the panel sits ABOVE the form. Kept as a tall centred
     card it would push the first field most of a screen down; as a row it says
     the same thing in a third of the height and still reads first. */
  .ct-write-grid { grid-template-columns: 1fr; }
  .ct-side {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
    padding: 20px;
  }
  .ct-side-badge { width: 44px; height: 44px; margin-bottom: 0; flex-shrink: 0; }
  .ct-side-badge svg { width: 21px; height: 21px; }
  .ct-side-copy { min-width: 0; }
  .ct-side-action { width: auto; margin-top: 14px; }
  .ct-side-action .btn { width: auto; }
}
@media (max-width: 560px) {
  .ct-hero { padding-top: clamp(68px, 12vw, 84px); }
  /* The mark is sized for a two-column card. Left at 138px it takes half the
     width of a 320px phone's card, which stops being a watermark and starts
     being a picture behind the text. Measured: 0.50 of card width at 320px
     before, 0.38 after - the same share it has on a desktop card. */
  .ct-route-mark { width: 104px; height: 104px; top: 4px; right: 6px; }
  .ct-side { gap: 14px; padding: 18px 16px; }
  .ct-side-h { font-size: 1rem; }
  .ct-card { padding: 20px 16px; }
  .ct-actions { gap: 12px; }
  .ct-submit { width: 100%; justify-content: center; }
}
/* Below this the chips stop fitting two to a row and the address starts to
   overflow its pill; both are allowed to go full width rather than shrink the
   44px target. */
@media (max-width: 360px) {
  .ct-mail { width: 100%; text-align: center; font-size: 0.82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-form textarea, .ct-mail { transition: none; }
}