/* contact page (contact.html, both versions). Loaded after pane.css; uses its tokens (--paper, --ice, --deep ...).
   One short step on one screen: purpose tiles, sender (name, email, organisation), message, Send. Every row has a
   small label in the side column and its controls in the main column; below 860 px the label sits above.
   Without JavaScript the form posts to FormSubmit, which returns to contact?sent=1#sent: #sent:target shows the panel. */

.pg-contact { background: var(--paper); }
.pg-contact .veil { background: var(--ice); }
.ct-page input, .ct-page textarea, .ct-page button { font-family: inherit; font-style: normal; }
.ct-page { --ct-col: 180px; --ct-gap: 48px; --ct-w: 700px; --ct-err: #9A4656; --spring: cubic-bezier(.3, 1.35, .45, 1); }
.plainpg.ct-page { padding-top: 40px; }

.ct-head, .ct-blk, .ct-alt { display: grid; grid-template-columns: var(--ct-col) minmax(0, var(--ct-w)); column-gap: var(--ct-gap); justify-content: center; }
.ct-head > * { grid-column: 2; }
.ct-head .pg-lede { margin-top: 14px; max-width: 620px; transition: opacity .25s linear; }

/* ------------------------------------------------------------------ rows */
.ct-form { margin-top: 36px; }
.ct-blk + .ct-blk { margin-top: 26px; }
.ct-side {
  margin: 0; padding-top: 2px; font-size: 13px; font-weight: 600; letter-spacing: .06em; line-height: 1.6; color: var(--blue);
}
:lang(en) .ct-side { letter-spacing: .02em; }
.ct-side label { display: block; cursor: pointer; }
.ct-b-msg .ct-side .ct-lab { margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.ct-main { min-width: 0; }
/* the group legends speak to screen readers only (the side labels show the same words) */
.ct-legend { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
fieldset.ct-purpose, fieldset.ct-who { border: 0; margin: 0; padding: 0; min-width: 0; }

/* after a send the fields fade, then fold away (clipped); only the panel speaks */
.ct-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s var(--ease) .2s, opacity .2s linear, visibility 0s; }
.ct-fields { min-height: 0; }
.ct-form[data-state="sent"] .ct-fold { grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: opacity .2s linear, grid-template-rows .45s var(--ease) .2s, visibility 0s .65s; }
.ct-form[data-state="sent"] .ct-fields { overflow: hidden; }
.ct-page:has(.ct-form[data-state="sent"]) .ct-head .pg-lede { opacity: 0; visibility: hidden; transition: opacity .25s linear, visibility 0s .25s; }
/* no JavaScript: back from FormSubmit at contact?sent=1#sent */
#sent:target { display: block; }
.ct-form:has(#sent:target) .ct-fold { display: none; }
.ct-page:has(#sent:target) .ct-head .pg-lede { visibility: hidden; }

/* ------------------------------------------------------------------ purpose: one sheet of glass cut into four */
.ct-sheet {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; border-radius: 18px;
  background: var(--ice) url("../assets/env/backdrop-r4.webp") center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 2px rgba(61, 109, 139, .14), 0 30px 54px -40px rgba(34, 70, 92, .5);
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  will-change: transform;
}
.ct-sheen {
  position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 30%) var(--my, -20%), rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 62%);
  opacity: var(--sh, .55); transition: opacity .5s var(--ease);
}
.ct-tile {
  position: relative; z-index: 1; display: flex; align-items: center; min-height: 58px; padding: 14px 48px 14px 20px; border-radius: 13px;
  cursor: pointer; isolation: isolate; -webkit-tap-highlight-color: transparent;
  transition: transform .5s var(--spring), box-shadow .5s var(--ease), opacity .3s var(--ease);
}
.ct-radio { position: absolute; left: 20px; top: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ct-tile-glass {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, .7), rgba(240, 246, 250, .42) 55%, rgba(225, 236, 243, .56));
  -webkit-backdrop-filter: blur(16px) saturate(1.08); backdrop-filter: blur(16px) saturate(1.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 1px 0 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .45),
    inset 0 -1px 0 rgba(61, 109, 139, .2), inset -1px 0 0 rgba(61, 109, 139, .1);
  transition: background .5s var(--ease), -webkit-backdrop-filter .5s var(--ease), backdrop-filter .5s var(--ease);
}
/* the bevel catching cold light (iridescent edge) when a tile is chosen */
.ct-tile-glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: conic-gradient(from 210deg, rgba(157, 188, 205, 0), rgba(176, 214, 238, .95), rgba(206, 200, 238, .7), rgba(186, 232, 226, .85), rgba(157, 188, 205, 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .5s var(--ease);
}
.ct-tile-t { display: block; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); text-wrap: balance; transition: color .35s; }
.ct-tile-mark {
  position: absolute; right: 18px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; border-radius: 50%;
  background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(34, 70, 92, .42);
}
.ct-tile-mark::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--deep);
  transform: scale(0); transition: transform .4s var(--spring);
}
@media (hover: hover) {
  .ct-tile:hover { transform: translate3d(0, -2px, 0); }
  .ct-tile:hover .ct-tile-glass { background: linear-gradient(160deg, rgba(255, 255, 255, .62), rgba(240, 246, 250, .34) 55%, rgba(225, 236, 243, .48)); }
}
/* the chosen purpose is clear at a glance: lifted, a deep blue inner edge, a deeper tint; the others step back */
.ct-tile:has(.ct-radio:checked) { transform: translate3d(0, -3px, 0); box-shadow: 0 18px 30px -20px rgba(34, 70, 92, .6); z-index: 2; }
.ct-tile:has(.ct-radio:checked) .ct-tile-glass {
  background: linear-gradient(160deg, rgba(232, 241, 247, .78), rgba(201, 219, 230, .5) 55%, rgba(186, 209, 223, .62));
  -webkit-backdrop-filter: blur(4px) saturate(1.18); backdrop-filter: blur(4px) saturate(1.18);
  box-shadow: inset 0 0 0 1.5px #3D6D8B, inset 0 1px 0 rgba(255, 255, 255, .95);
}
.ct-tile:has(.ct-radio:checked) .ct-tile-glass::after { opacity: 1; }
.ct-tile:has(.ct-radio:checked) .ct-tile-mark::after { transform: scale(1); }
.ct-sheet:has(.ct-radio:checked) .ct-tile:not(:has(.ct-radio:checked)) { opacity: .74; }
.ct-sheet:has(.ct-radio:checked) .ct-tile:not(:has(.ct-radio:checked)) .ct-tile-t { font-weight: 500; color: var(--deep); }
@media (hover: hover) { .ct-sheet:has(.ct-radio:checked) .ct-tile:not(:has(.ct-radio:checked)):hover { opacity: .92; } }
.ct-tile:has(.ct-radio:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.ct-sheet.is-press .ct-tile.is-down { transform: translate3d(0, 0, 0) scale(.985); transition-duration: .12s; }

/* ------------------------------------------------------------------ fields */
.ct-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.ct-lab { display: block; padding: 0; margin: 0 0 7px; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--deep); }
.ct-opt { font-weight: 400; color: rgba(34, 70, 92, .62); }
.ct-ctl { position: relative; }
.ct-page input[type="text"], .ct-page input[type="email"], .ct-page textarea {
  display: block; width: 100%; margin: 0; padding: 10px 14px; border: 0; border-radius: 11px;
  font: inherit; font-size: 15px; line-height: 1.6; color: var(--ink); font-style: normal;
  background: rgba(255, 255, 255, .74);
  box-shadow: inset 0 0 0 1px rgba(34, 70, 92, .17), inset 0 1px 2px rgba(34, 70, 92, .06);
  transition: box-shadow .25s var(--ease), background .25s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.ct-page textarea { resize: vertical; min-height: 136px; padding-bottom: 28px; }
.ct-page input:hover, .ct-page textarea:hover { box-shadow: inset 0 0 0 1px rgba(34, 70, 92, .28), inset 0 1px 2px rgba(34, 70, 92, .06); }
.ct-page input[type="text"]:focus, .ct-page input[type="email"]:focus, .ct-page textarea:focus {
  outline: none; background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 4px rgba(61, 109, 139, .13);
}
.ct-page [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--ct-err), 0 0 0 4px rgba(154, 70, 86, .1) !important; }
.ct-err { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ct-err); }
.ct-err:not([hidden]) { animation: ct-in .3s var(--out) both; }
.ct-count {
  position: absolute; right: 13px; bottom: 8px; font-size: 11.5px; line-height: 1; pointer-events: none;
  font-variant-numeric: tabular-nums; color: rgba(34, 70, 92, .5); transition: color .25s;
}
.ct-count.is-near { color: var(--deep); }
.ct-count.is-over { color: var(--ct-err); }
@keyframes ct-in { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ send, result */
.ct-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; }
.ct-send, .ct-mailto {
  position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  min-width: 124px; padding: 11px 30px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--paper);
  background: linear-gradient(180deg, #2C5872, var(--deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 12px 24px -14px rgba(34, 70, 92, .8);
  transition: transform .35s var(--spring), box-shadow .35s var(--ease), opacity .3s;
}
.ct-send:hover, .ct-mailto:hover { transform: translate3d(0, -1px, 0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 16px 28px -14px rgba(34, 70, 92, .85); }
.ct-send:active { transform: scale(.98); }
.ct-send:focus-visible, .ct-mailto:focus-visible, .ct-retry:focus-visible, .ct-copy:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.ct-send[aria-busy="true"] { cursor: progress; opacity: .82; }
.ct-send[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .26) 50%, rgba(255, 255, 255, 0) 70%);
  animation: ct-sheen 1.1s linear infinite;
}
@keyframes ct-sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.ct-privacy { margin: 0; font-size: 12.5px; line-height: 1.6; color: rgba(28, 40, 50, .6); }
.ct-status { margin: 10px 0 0; min-height: 1.6em; font-size: 13px; color: var(--deep); }
.ct-status:empty { margin-top: 0; min-height: 0; }
.ct-form[data-state="failed"] .ct-b-send { display: none; }

.ct-b-res { margin-top: 0 !important; }
.ct-b-res .ct-main:has(> :not([hidden])) { padding-top: 6px; }
.ct-form[data-state="failed"] .ct-b-res .ct-main { padding-top: 24px; }
.ct-done, .ct-fail {
  position: relative; padding: 26px 30px 28px; border-radius: 18px; isolation: isolate; overflow: hidden;
  background: var(--ice) url("../assets/env/backdrop-r4.webp") center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 2px rgba(61, 109, 139, .14), 0 30px 54px -40px rgba(34, 70, 92, .5);
  animation: ct-rise .6s var(--out) both;
}
.ct-done::before, .ct-fail::before {
  content: ""; position: absolute; inset: 5px; z-index: -1; border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .74), rgba(240, 246, 250, .5) 55%, rgba(225, 236, 243, .62));
  -webkit-backdrop-filter: blur(16px) saturate(1.08); backdrop-filter: blur(16px) saturate(1.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(61, 109, 139, .2);
}
.ct-done[hidden], .ct-fail[hidden] { display: none; }
.ct-form[data-state="sent"] .ct-done { animation-delay: .35s; }
@keyframes ct-rise { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.985); } to { opacity: 1; transform: none; } }
.ct-res-h { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--ink); }
.ct-res-h:focus { outline: none; }
.ct-res-b { margin: 8px 0 0; color: var(--ink-2); overflow-wrap: anywhere; }
.ct-res-a { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; margin: 18px 0 0; }
.ct-retry {
  appearance: none; border: 0; background: none; padding: 6px 0; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--deep); box-shadow: inset 0 -1px 0 rgba(34, 70, 92, .35);
}
.ct-retry:hover { color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); }

/* ------------------------------------------------------------------ other channels (email, WeChat; no phone) */
.ct-alt { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--hair); }
.ct-alt-l { display: flex; flex-wrap: wrap; gap: 12px 56px; margin: 0; }
.ct-alt-l dt { font-size: 12.5px; color: var(--blue); line-height: 1.6; }
.ct-alt-l dd { display: flex; align-items: center; gap: 12px; margin: 2px 0 0; font-size: 15px; }
.ct-alt-l a { box-shadow: inset 0 -1px 0 rgba(34, 70, 92, .3); transition: box-shadow .2s; }
.ct-alt-l a:hover { box-shadow: inset 0 -1px 0 var(--ink); }
.ct-copy {
  appearance: none; border: 0; margin: 0; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12px; line-height: 1.5; color: var(--blue);
  background: rgba(201, 219, 230, .35); box-shadow: inset 0 0 0 1px rgba(61, 109, 139, .2); transition: background .25s, color .25s;
}
.ct-copy:hover { background: rgba(201, 219, 230, .6); color: var(--deep); }
.ct-copy.is-done { color: var(--deep); background: rgba(201, 219, 230, .7); }

/* the honeypot: out of sight and out of the tab order (bots fill it, people never see it) */
.ct-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------------ narrow screens */
@media (max-width: 860px) {
  .ct-page { --ct-gap: 0; }
  .ct-head, .ct-blk, .ct-alt { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .ct-head > * { grid-column: 1; }
  .ct-form { margin-top: 28px; }
  .ct-blk + .ct-blk { margin-top: 22px; }
  /* the sender's own field labels are enough here: no group label above them */
  .ct-b-send .ct-side, .ct-b-res .ct-side, .ct-b-who .ct-side { display: none; }
  .ct-trio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ct-trio .ct-f-organisation { grid-column: 1 / -1; }
  .ct-alt { margin-top: 36px; }
  .ct-alt-l { gap: 12px 36px; }
}
@media (max-width: 560px) {
  .plainpg.ct-page { padding-top: 20px; }
  .ct-sheet { border-radius: 16px; }
  .ct-tile { min-height: 64px; padding: 12px 36px 12px 14px; border-radius: 12px; }
  .ct-tile-mark { right: 13px; width: 13px; height: 13px; margin-top: -6.5px; }
  .ct-tile-mark::after { inset: 3.5px; }
  .ct-tile-t { font-size: 14.5px; }
  .ct-trio { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ct-page textarea { min-height: 128px; }
  .ct-done, .ct-fail { padding: 22px 22px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-sheet { transform: none !important; }
  .ct-tile, .ct-tile:has(.ct-radio:checked) { transform: none !important; }
  .ct-send[aria-busy="true"]::after { animation: none; }
  .ct-done, .ct-fail, .ct-err:not([hidden]) { animation: none; }
  .ct-fold, .ct-form[data-state="sent"] .ct-fold { transition: none; }
}