/* Contact: the studio's details beside the message form. */
.ct { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 110px); align-items: start; padding-top: clamp(48px, 10vh, 120px); }
.ct-copy { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 22px; }
.ct-list { display: grid; gap: 18px; margin-top: 14px; padding-top: 26px; border-top: 1px solid var(--line); }
.ct-list div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; }
.ct-list dt { padding-top: 3px; font-size: 12.5px; font-weight: 680; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.ct-list dd { font-size: 16.5px; line-height: 1.5; color: rgba(var(--ink-rgb), var(--soft)); }
.ct-list address { font-style: normal; }

/* the form */
.cf { display: flex; flex-direction: column; gap: 26px; padding: clamp(28px, 3vw, 44px); border-radius: 30px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px var(--line), 0 30px 80px rgba(0, 0, 0, 0.35); }
.cf-h { font-size: 26px; font-weight: 760; letter-spacing: -0.02em; }
.cf-field { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.cf-field > label, .cf-field > legend { padding: 0; font-size: 14.5px; font-weight: 650; color: var(--ink); }
fieldset.cf-field > legend { margin-bottom: 10px; }
.cf input:not([type="radio"]), .cf textarea, .cf select {
  width: 100%; padding: 14px 16px; border: 0; border-radius: 14px; font: inherit; font-size: 16px; color: var(--ink);
  background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.2s, background-color 0.2s;
}
.cf input:not([type="radio"]) { height: 52px; }
.cf textarea { min-height: 176px; line-height: 1.5; resize: vertical; }
.cf input::placeholder, .cf textarea::placeholder { color: var(--ink-3); }
.cf input:not([type="radio"]):hover, .cf textarea:hover, .cf select:hover { background: rgba(255, 255, 255, 0.07); }
.cf input:not([type="radio"]):focus-visible, .cf textarea:focus-visible, .cf select:focus-visible { outline: none; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1.5px var(--ink); }
.cf [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #ff7a6e; }
.cf-select { position: relative; display: block; }
.cf-select select { height: 52px; padding-right: 48px; appearance: none; cursor: pointer; }
.cf-select::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; margin-top: -6px; pointer-events: none;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg);
}
.cf-apps .chip { height: 44px; }
.cf-hint { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); text-wrap: pretty; }
.cf-err { font-size: 13.5px; font-weight: 620; color: #ff8a7f; }
.cf-send { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; padding-top: 4px; }
.cf-note { flex: 1 1 240px; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); text-wrap: pretty; }

/* after it's sent: thanks, and who we'll reply to */
.cf-done { display: grid; gap: 12px; padding-left: 44px; position: relative; }
.cf-done::before { content: ""; position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: #4bbc6b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 18px no-repeat; }
.cf-done[hidden] { display: none; }
.cf-done-h { font-size: 17px; font-weight: 700; }
.cf-done-p { font-size: 15px; line-height: 1.5; color: rgba(var(--ink-rgb), var(--soft)); }

/* until sending is connected: the address, a Copy button, and what to include (the form waits, hidden) */
.cf[hidden] { display: none; }
.cf-mail { gap: 24px; }
.cf-mail-to { font-size: clamp(24px, 2.5vw, 34px); font-weight: 780; font-stretch: 106%; letter-spacing: -0.025em; line-height: 1.15; overflow-wrap: anywhere; }
.cf-mail-link { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: rgba(var(--ink-rgb), 0.25); text-underline-offset: 6px; transition: text-decoration-color 0.2s; }
.cf-mail-link:hover, .cf-mail-link:focus-visible { text-decoration-color: var(--ink); outline: none; }
.cf-mail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 20px; }
.cf-copy.is-done { background: #4bbc6b; color: #0b0b0c; }
.cf-mail-tips { display: grid; gap: 14px; margin: 0; padding: 24px 0 0; list-style: none; border-top: 1px solid var(--line); }
.cf-mail-tips li { font-size: 15.5px; line-height: 1.5; color: rgba(var(--ink-rgb), var(--soft)); text-wrap: pretty; }
.cf-mail-tips b { color: var(--ink); font-weight: 680; }
.cf-mail-tips li.is-on { padding-left: 14px; box-shadow: inset 2px 0 0 #4bbc6b; color: var(--ink); }

/* who to reply to, side by side */
.cf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cf-field label em { margin-left: 6px; font-style: normal; font-weight: 520; color: var(--ink-3); }
.cf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* sending: the arrow becomes a small spinner while the message is on its way */
.cf-go:disabled { cursor: progress; opacity: 0.82; }
.cf.is-sending .cf-go-arrow { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; font-size: 0; animation: cf-spin 0.8s linear infinite; }
@keyframes cf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cf.is-sending .cf-go-arrow { animation: none; border-right-color: currentColor; opacity: 0.5; } }

/* sent: the form steps aside for the thanks */
.cf.is-sent > :not(.cf-h):not(.cf-done) { display: none; }
.cf-done .cf-again { justify-self: start; height: 44px; }
.cf-done b { color: var(--ink); font-weight: 680; }
.cf-fail { position: relative; display: grid; gap: 8px; padding-left: 44px; }
.cf-fail::before { content: "!"; position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: #e5534b; }
.cf-fail[hidden] { display: none; }

/* ——— phones: the details, then the form, in one column; every field at a size iOS won't zoom into ——— */
@media (max-width: 760px) {
  .ct { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 32px; }
  .ct-copy { position: static; gap: 16px; }
  .ct-list { gap: 14px; margin-top: 6px; padding-top: 20px; }
  .ct-list div { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .ct-list dd { font-size: 16px; }
  .ct-list dd a { display: inline-block; padding: 6px 0; margin: -6px 0; }
  .cf { gap: 22px; padding: 22px 18px 24px; border-radius: 24px; }
  .cf-h { font-size: 22px; }
  .cf-field { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 72px); scroll-margin-bottom: 24px; }
  .cf input:not([type="radio"]), .cf textarea, .cf select { font-size: 16px; scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 104px); scroll-margin-bottom: 24px; }
  .cf textarea { min-height: 150px; }
  .cf-row { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .cf-apps { gap: 8px; }
  .cf-send { flex-direction: column; align-items: stretch; gap: 12px; }
  .cf-go { justify-content: center; height: 54px; }
  .cf-note { flex: none; text-align: center; }
  .cf-err { font-size: 14px; }
  /* a field with an error says so in its outline too (the base input rule would otherwise win) */
  .cf input[aria-invalid="true"]:not([type="radio"]), .cf textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #ff7a6e; }
  .cf-done, .cf-fail { padding-left: 40px; }
  .cf-mail { gap: 20px; }
  .cf-mail-to { font-size: 24px; }
  .cf-mail-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .cf-copy { justify-content: center; height: 54px; }
  .cf-mail-actions .cf-note { text-align: center; }
  .cf-mail-tips li { font-size: 15px; }
}