#workshop-form { position: relative; padding: 1.25rem 0; }
@media (min-width: 640px) { #workshop-form { padding: 1.5rem 0 2.5rem; } }
#workshop-form .wf-wrap { max-width: 80rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { #workshop-form .wf-wrap { padding: 0 2rem; } }
#workshop-form .wf-card {
  max-width: 62rem; margin: 0 auto; border-radius: 2rem; border: 1px solid var(--border);
  background: linear-gradient(145deg, color-mix(in oklab, var(--foreground) 7%, transparent), color-mix(in oklab, var(--foreground) 2%, transparent));
  padding: 2rem 1.5rem;
}
@media (min-width: 640px) { #workshop-form .wf-card { padding: 3.25rem 4rem; } }
@media (min-width: 1024px) { #workshop-form .wf-panel { max-width: 38rem; margin: 0 auto; } }
#workshop-form .wf-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem; margin: 0;
  font-size: .85rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--accent);
  padding: .55rem 1.15rem; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}
#workshop-form .wf-eyebrow::before { content: ""; width: .45rem; height: .45rem; border-radius: 999px; background: var(--accent); box-shadow: 0 0 .5rem var(--accent); flex: none; }
#workshop-form .wf-title { margin: 1.5rem 0 0; font-size: clamp(1.7rem, 3.6vw, 2.4rem); text-transform: uppercase; line-height: 1.1; }
#workshop-form .wf-lead { margin: 1.1rem 0 0; color: var(--muted-foreground); font-size: 1rem; line-height: 1.6; }
#workshop-form .wf-toggle { margin-top: 1.75rem; border: 0; cursor: pointer; border-radius: 999px; padding: .95rem 2rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
#workshop-form .wf-panel[hidden] { display: none; }
#workshop-form .wf-panel { animation: wf-in .45s ease both; scroll-margin-top: 6rem; }
@keyframes wf-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
#workshop-form form { margin-top: 2rem; display: grid; gap: 1.6rem; }
#workshop-form .wf-field { display: grid; gap: .55rem; border: 0; padding: 0; margin: 0; min-width: 0; }
#workshop-form .wf-label { font-weight: 600; font-size: .95rem; line-height: 1.35; padding: 0; }
#workshop-form .wf-label span { color: var(--accent); margin-right: .45rem; font-variant-numeric: tabular-nums; }
#workshop-form .wf-label em { font-style: normal; font-weight: 400; color: var(--muted-foreground); font-size: .8rem; }
#workshop-form .wf-hint { font-size: .8rem; color: var(--muted-foreground); margin: 0; }
#workshop-form input[type=text], #workshop-form input[type=email], #workshop-form input[type=tel] {
  width: 100%; background: color-mix(in oklab, var(--foreground) 4%, transparent); color: var(--foreground);
  border: 1px solid var(--input); border-radius: .9rem; padding: .85rem 1rem; font: inherit; font-size: .95rem; outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
#workshop-form input::placeholder { color: color-mix(in oklab, var(--foreground) 35%, transparent); }
#workshop-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }
#workshop-form .wf-options { display: grid; gap: .55rem; }
#workshop-form .wf-option { position: relative; display: flex; gap: .75rem; align-items: flex-start; padding: .8rem 1rem; border-radius: .9rem; cursor: pointer;
  border: 1px solid var(--input); background: color-mix(in oklab, var(--foreground) 3%, transparent); font-size: .9rem; line-height: 1.4; transition: border-color .2s, background .2s; }
#workshop-form .wf-option:hover { border-color: color-mix(in oklab, var(--accent) 55%, transparent); }
#workshop-form .wf-option input { position: absolute; opacity: 0; pointer-events: none; }
#workshop-form .wf-dot { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .12rem; border-radius: 50%; border: 1.5px solid color-mix(in oklab, var(--foreground) 45%, transparent); display: grid; place-items: center; transition: border-color .2s; }
#workshop-form .wf-dot::after { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .2s; }
#workshop-form .wf-option:has(input:checked) { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 9%, transparent); }
#workshop-form .wf-option:has(input:checked) .wf-dot { border-color: var(--accent); }
#workshop-form .wf-option:has(input:checked) .wf-dot::after { transform: scale(1); }
#workshop-form .wf-option:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent); }
#workshop-form .wf-field.wf-invalid input, #workshop-form .wf-field.wf-invalid .wf-option { border-color: var(--destructive); }
#workshop-form .wf-error { display: none; color: #ff8a8a; font-size: .8rem; margin: 0; }
#workshop-form .wf-field.wf-invalid .wf-error { display: block; }
#workshop-form .wf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#workshop-form .wf-submit { justify-self: start; border: 0; cursor: pointer; border-radius: 999px; padding: .95rem 2rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
#workshop-form .wf-submit[disabled] { opacity: .6; cursor: wait; }
#workshop-form .wf-msg { margin: 0; font-size: .85rem; color: #ff8a8a; display: none; }
#workshop-form .wf-msg.on { display: block; }
#workshop-form .wf-success { display: none; text-align: center; padding: 2.5rem 1rem; }
#workshop-form .wf-success.on { display: block; }
#workshop-form .wf-success .wf-check { width: 3.5rem; height: 3.5rem; margin: 0 auto 1.25rem; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 15%, transparent); color: var(--accent); }
#workshop-form .wf-success h3 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 .75rem; text-transform: uppercase; letter-spacing: -.03em; }
#workshop-form .wf-success p { margin: 0 auto; max-width: 30rem; color: var(--muted-foreground); line-height: 1.6; }
#workshop-form legend.wf-label { margin-bottom: .55rem; float: left; width: 100%; }
#workshop-form legend.wf-label + * { clear: both; }