/* ==========================================================================
   KUTAY OS — contact.html
   The Contact window: the brief-wizard launch card and a one-column brief
   form on the left, the studio card on the right (restored from the
   original's desktop-refine.css: an inset, bordered panel, not a flush
   side column). Under 900px the card follows the form; on phones it
   collapses to the compact portrait header the original used
   (v107-mobile.css). Built on the shared tokens; only this page loads it.
   ========================================================================== */

.contact-page {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); align-items: start;
  gap: clamp(var(--space-5), 3vw, var(--space-8)); min-height: 100%;
  padding: clamp(var(--space-6), 3.6vw, var(--space-9)) clamp(var(--space-5), 3.6vw, var(--space-9));
}

.contact-main { min-width: 0; display: flex; flex-direction: column; }
.contact-main > * { max-width: 560px; width: 100%; }
.contact-main .eyebrow { font: 600 10px/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); }
.contact-main h1 { font-size: clamp(40px, 4.4vw, 60px); line-height: .94; letter-spacing: -.05em; margin: var(--space-4) 0; text-wrap: balance; }
.contact-main > p { font-size: 15px; line-height: 1.6; color: var(--text-muted); margin: 0; }

/* the wizard is the front door (original v87.css .bw-launch) */
.bw-launch {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  margin-top: var(--space-6); padding: var(--space-4) var(--space-5); border-radius: var(--r-lg);
  border: 1px dashed color-mix(in srgb, var(--accent) 70%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.bw-launch div { display: flex; flex-direction: column; gap: 4px; flex: 1 1 240px; min-width: 0; }
.bw-launch b { font-size: 14.5px; }
.bw-launch span { font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.bw-launch .btn { min-height: 42px; white-space: nowrap; }

.contact-form { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.contact-form .field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.contact-form label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.contact-form input, .contact-form textarea, .contact-form select {
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 14px; color: var(--text); font-size: 15px; min-height: 46px; width: 100%; font-family: var(--font-sans);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
:root[data-theme="light"] .contact-form :is(input, textarea, select) { background: rgba(0, 0, 0, .03); }
.contact-form :is(input, textarea, select):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.contact-form [aria-invalid="true"] { border-color: #ff8a7a; box-shadow: 0 0 0 1px #ff8a7a inset; }
.contact-form textarea { min-height: 136px; resize: vertical; line-height: 1.55; }
.contact-form select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 42px;
}
.contact-form select option { color: #111; }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.contact-form .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field-error { margin: 0; font-size: 12.5px; line-height: 1.4; color: #ffab9f; }
.field-error:empty { display: none; }
:root[data-theme="light"] .field-error { color: #b3261e; }

.form-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-1); }
.form-actions .btn { min-height: 44px; }
.form-actions [data-submit]:disabled { opacity: .7; cursor: progress; }
.form-status { margin: 0; padding: 11px 14px; border-radius: var(--r-md); font-size: 13.5px; line-height: 1.5; border: 1px solid var(--line); color: var(--text-muted); }
.form-status.is-error { color: #ffc2b9; border-color: rgba(255, 138, 122, .4); background: rgba(255, 138, 122, .08); }
.form-status.is-ok { color: #b9ecc8; border-color: rgba(143, 224, 168, .35); background: rgba(143, 224, 168, .08); }
:root[data-theme="light"] .form-status.is-error { color: #8c1d14; }
:root[data-theme="light"] .form-status.is-ok { color: #1f6b3a; }
.form-hint { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; margin: 0; }

.contact-links { display: grid; gap: var(--space-2); margin-top: var(--space-7); }
.contact-links a { min-height: 48px; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: var(--r-md); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); font-size: 13px; transition: background var(--dur-fast), border-color var(--dur-fast); }
.contact-links a span { color: var(--text-dim); letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }
.contact-links a b { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* studio card */
.contact-art {
  position: sticky; top: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5);
  padding: clamp(var(--space-5), 2.4vw, var(--space-7)); background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-lg);
}
.contact-card-kicker { font: 600 10px/1 var(--font-mono); letter-spacing: .13em; color: var(--text-muted); }
.contact-person { display: flex; align-items: center; gap: var(--space-4); }
.contact-person img { width: 90px; height: 108px; object-fit: cover; object-position: 50% 30%; border-radius: var(--r-sm); flex-shrink: 0; }
.contact-person h2 { font-size: 21px; line-height: 1.2; margin: 0 0 6px; letter-spacing: -.03em; }
.contact-person p { font-size: 12px; margin: 0; color: var(--text-muted); }
.contact-art h3 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.12; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
.contact-art > p { font-size: 14px; line-height: 1.6; margin: 0; color: var(--text-muted); }
.contact-services { display: flex; flex-wrap: wrap; gap: 7px; }
/* labels, not controls — deliberately flat so they don't read as buttons */
.contact-services span { border: 1px solid var(--line-2); border-radius: 6px; padding: 6px 9px; font-size: 11px; color: var(--text-muted); }
.contact-art .btn { justify-content: center; min-height: 44px; }
.contact-art .btn + .btn { margin-top: calc(var(--space-2) * -1); }

@media (max-width: 900px) {
  .contact-page { grid-template-columns: 1fr; padding: var(--space-6) var(--space-5) var(--space-7); gap: var(--space-7); }
  .contact-main > * { max-width: none; }
  .contact-art { position: static; }
}
@media (max-width: 600px) {
  .contact-page { padding: var(--space-4) var(--space-4) var(--space-7); gap: var(--space-5); }
  /* compact portrait header first, the rest of the card is redundant here */
  .contact-art { order: -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); align-items: center; }
  .contact-card-kicker { grid-column: 1 / -1; font-size: 9px; }
  .contact-person { display: contents; }
  .contact-person img { width: 56px; height: 64px; }
  .contact-person h2 { font-size: 17px; margin-bottom: 2px; }
  .contact-art > :is(h3, p, .contact-services, .btn) { display: none; }
  .contact-main h1 { font-size: 42px; margin: var(--space-3) 0; }
  .contact-main > p { font-size: 14px; }
  .bw-launch { margin-top: var(--space-5); padding: var(--space-4); }
  .bw-launch .btn { flex: 1 1 100%; justify-content: center; }
  .contact-form { margin-top: var(--space-5); }
  .contact-form .row { grid-template-columns: 1fr; gap: var(--space-4); }
  .contact-form :is(input, select, textarea) { font-size: 16px; }
  .form-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---- motion: inline validation and the sent state ---- */
.field-error:not(:empty), .form-status:not([hidden]) { animation: pm-rise .24s var(--ease-out) both; }
.contact-form .is-shake { animation: pm-shake .34s ease; }
.form-status.is-ok { display: flex; gap: 10px; align-items: flex-start; }
.form-status.is-ok::before {
  content: "✓"; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #0f1a13; background: #8fe0a8; animation: cf-pop .42s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes cf-pop { from { transform: scale(0) rotate(-40deg); } }
[data-submit].is-sent { background: #8fe0a8; border-color: #8fe0a8; color: #0f1a13; }
.bw-launch { transition: border-color var(--dur-base), background var(--dur-base), transform var(--dur-base); }
.bw-launch .btn span { display: inline-block; transition: transform var(--dur-base) var(--ease-out); }


/* hover affordances only where hover exists — no sticky rings after a tap */
@media (hover: hover) {
  .contact-form :is(input, textarea, select):hover:not([aria-invalid="true"]) { border-color: rgba(255, 255, 255, .24); }
  :root[data-theme="light"] .contact-form :is(input, textarea, select):hover:not([aria-invalid="true"]) { border-color: rgba(0, 0, 0, .28); }
  .contact-links a:hover { background: rgba(255, 255, 255, .055); border-color: var(--line); }
  .bw-launch:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
  .bw-launch .btn:hover span { transform: translateX(3px); }
}