/* =========================================================
   Kev's Atelier: Contact
   ========================================================= */

.ct { position: relative; overflow: hidden; padding: calc(var(--header-h) + clamp(40px, 8vw, 96px)) 0 clamp(88px, 12vw, 150px); }
.ct::before {
  content: ""; position: absolute; top: -60vmax; left: -60vmax; width: 120vmax; height: 120vmax;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(232, 200, 115, 0) 0deg 3deg, rgba(232, 200, 115, 0.3) 3deg 3.5deg, rgba(232, 200, 115, 0) 3.5deg 6deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 50%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 50%);
  animation: hero-spin 240s linear infinite; pointer-events: none;
}
/* Phone: intro, form, then steps. Desktop: intro and steps left, form right. */
.ct-grid { position: relative; display: grid; grid-template-areas: "intro" "card" "steps"; gap: 36px; align-items: start; }
.ct-intro { grid-area: intro; }
.ct-card { grid-area: card; }
.ct-aside { grid-area: steps; }
@media (min-width: 960px) {
  .ct-aside { margin-top: 44px; }
  .ct-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "intro card" "steps card"; grid-template-rows: auto 1fr; column-gap: clamp(40px, 6vw, 72px); row-gap: 0; }
}
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 28px; font-size: 0.9rem; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold-bright); }
.crumbs .sep { width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); }
.ct h1 { font-size: clamp(2.6rem, 7.4vw, 5.2rem); max-width: 10ch; }
.ct .lead { margin-top: 22px; }

/* Steps */
.ct-steps { display: grid; gap: 0; border-top: 1px solid var(--line); }
.ct-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.ct-steps b { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.4rem; line-height: 1.2; color: var(--gold-bright); }
.ct-steps h2 { font-family: var(--body); font-size: 1.05rem; font-weight: 600; letter-spacing: 0; }
.ct-steps p { margin-top: 4px; color: var(--muted); font-size: 0.98rem; line-height: 1.55; }
.ct-es { margin-top: 22px; color: var(--muted); font-size: 0.95rem; }

/* Card */
.ct-card {
  position: relative; padding: clamp(22px, 4vw, 40px); border: 1px solid var(--line); border-radius: 8px;
  background: linear-gradient(180deg, rgba(20, 18, 14, 0.96), rgba(10, 9, 7, 0.96));
  box-shadow: 0 50px 100px -50px rgba(232, 200, 115, 0.35);
}
.ct-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-bright), transparent); }

/* Form */
.ct-form { display: grid; gap: 22px; }
.ct-row { display: grid; gap: 22px; }
@media (min-width: 620px) { .ct-row.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ct-field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ct-field label, .ct-field legend { padding: 0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright); }
.ct-field legend { margin-bottom: 8px; }
.ct-field .opt { margin-left: 6px; font-weight: 400; letter-spacing: 0.06em; text-transform: none; color: var(--muted); }

.ct-field input[type="text"], .ct-field input[type="email"], .ct-field textarea, .ct-select select {
  width: 100%; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 4px;
  background: rgba(6, 6, 6, 0.7); color: var(--ivory); font: inherit; font-size: 1rem; /* 16px stops iOS zoom */
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease);
}
.ct-field textarea { resize: vertical; min-height: 150px; line-height: 1.55; }
.ct-field ::placeholder { color: rgba(163, 154, 134, 0.7); }
.ct-field input:hover, .ct-field textarea:hover, .ct-select select:hover { border-color: rgba(232, 200, 115, 0.45); }
.ct-field input:focus, .ct-field textarea:focus, .ct-select select:focus { outline: none; border-color: var(--gold-bright); background: rgba(6, 6, 6, 0.95); box-shadow: 0 0 0 3px rgba(232, 200, 115, 0.16); }
.ct-field [aria-invalid="true"] { border-color: #e0796a; }

.ct-select { position: relative; }
.ct-select select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.ct-select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--gold-bright); border-bottom: 1.5px solid var(--gold-bright); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.ct-select option { background: #14120e; color: var(--ivory); }

/* Pills */
.ct-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-pill { position: relative; cursor: pointer; }
.ct-field .ct-pill { font-size: 0.95rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ivory); }
.ct-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ct-pill span { display: inline-block; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease); }
.ct-pill:hover span { border-color: rgba(232, 200, 115, 0.55); }
.ct-pill input:checked + span { background: linear-gradient(120deg, var(--gold-bright), var(--gold)); border-color: var(--gold-bright); color: #060606; font-weight: 600; }
.ct-pill input:focus-visible + span { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
fieldset[aria-invalid="true"] .ct-pill span { border-color: rgba(224, 121, 106, 0.6); }

.ct-err { min-height: 0; color: #f0a093; font-size: 0.9rem; }
.ct-err:empty { display: none; }

.ct [hidden] { display: none !important; }

/* Honeypot: off-screen, not display:none (some bots skip hidden fields) */
.ct-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.ct-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 4px; }
.ct-submit .btn[disabled] { opacity: 0.7; cursor: progress; }
.ct-status { color: var(--muted); font-size: 0.95rem; }
.ct-status.bad { color: #f0a093; }

/* Sent */
.ct-done { display: grid; justify-items: start; gap: 12px; padding: clamp(12px, 3vw, 28px) 0; outline: none; }
.ct-done h2 { font-family: var(--display); font-weight: 500; font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1; color: var(--gold-bright); }
.ct-done p { font-size: 1.15rem; }
.ct-done .ct-done-note { font-size: 0.9rem; color: var(--muted); }
.ct-done .link-arrow { margin-top: 18px; }
.ct-check { width: 64px; height: 64px; margin-bottom: 8px; fill: none; stroke: var(--gold-bright); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ct-check circle { stroke-dasharray: 183; stroke-dashoffset: 183; animation: ct-draw 800ms var(--ease-out) forwards; }
.ct-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: ct-draw 500ms var(--ease-out) 600ms forwards; }
@keyframes ct-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ct::before { animation: none; }
  .ct-check circle, .ct-check path { animation: none; stroke-dashoffset: 0; }
}