.wm-newsite {
  --wm-yellow: var(--color-brand-yellow, #ffcb05);
  --wm-ink: var(--color-ink, #090909);
  --wm-paper: var(--color-paper, #fff);
  --wm-muted: var(--color-muted, #f4f4f4);
  --wm-line: var(--color-line, rgba(9, 9, 9, .12));
  --wm-err: #b3261e;
  max-width: 40rem;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 5rem;
}
.wm-newsite [hidden],
.wm-newsite [x-cloak] { display: none !important; }
.wm-newsite__kicker {
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .6;
  margin: 0 0 .5rem;
}
.wm-newsite h1 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.15;
  margin: 0 0 .75rem;
}
.wm-newsite__lead {
  font-size: 1.15rem;
  line-height: 1.5;
  margin: 0 0 2rem;
  opacity: .85;
}

.wm-intake {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  counter-reset: wm-group;
}
.wm-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

.wm-field {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  min-width: 0;
  text-transform: none;
  letter-spacing: 0;
  color: var(--wm-ink);
  font-size: 1rem;
}
.wm-field > label:not(.wm-card),
.wm-field__label {
  display: block;
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wm-ink);
}
.wm-field.is-invalid > label:not(.wm-card),
.wm-field.is-invalid .wm-field__label,
.wm-field.is-invalid .wm-card__title {
  color: var(--wm-err);
}
.wm-brand-icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin-left: .35em;
  vertical-align: -0.18em;
}

.wm-input-icon {
  position: relative;
}
.wm-input-icon__mark {
  position: absolute;
  left: 1rem;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  transform: translateY(-50%);
  pointer-events: none;
}
.wm-input-icon__mark svg {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
}
.wm-intake .wm-input-icon input[type=url],
.wm-intake .wm-input-icon input[type=tel],
.wm-intake .wm-input-icon input[type=text] {
  padding-left: 3rem;
}

.wm-intake input[type=text],
.wm-intake input[type=tel],
.wm-intake input[type=email],
.wm-intake input[type=url],
.wm-intake input[type=time],
.wm-intake select,
.wm-intake textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 3.35rem;
  padding: .85rem 1rem;
  border: 1.5px solid var(--wm-ink);
  border-radius: 0;
  background: var(--wm-paper);
  color: var(--wm-ink);
  font: inherit;
  font-size: 1.125rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.wm-intake textarea { min-height: 6.5rem; resize: vertical; }
.wm-intake input:focus,
.wm-intake select:focus,
.wm-intake textarea:focus {
  outline: 3px solid var(--wm-yellow);
  outline-offset: 2px;
  background: var(--wm-paper);
}
.wm-intake select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='%23090909' d='M3 6l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}
.wm-field.is-invalid input[type=text],
.wm-field.is-invalid input[type=tel],
.wm-field.is-invalid input[type=email],
.wm-field.is-invalid input[type=url],
.wm-field.is-invalid input[type=time],
.wm-field.is-invalid select,
.wm-field.is-invalid textarea {
  border-color: var(--wm-err);
  outline-color: var(--wm-err);
}
.wm-field.is-invalid input:focus,
.wm-field.is-invalid select:focus,
.wm-field.is-invalid textarea:focus {
  outline-color: var(--wm-err);
}
.wm-field.is-invalid .wm-card {
  border-color: var(--wm-err);
}

.wm-cards {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.wm-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  min-height: 3.5rem;
  padding: .95rem 1rem;
  border: 1.5px solid var(--wm-ink);
  background: var(--wm-paper);
  cursor: pointer;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  color: var(--wm-ink);
}
.wm-card input {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
}
.wm-card__tick {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: .12rem;
  border: 1.5px solid var(--wm-ink);
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--wm-paper);
  box-sizing: border-box;
}
.wm-card--check .wm-card__tick { border-radius: 3px; }
.wm-card__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.wm-card__title { font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; }
.wm-card__flag { font-size: 1.35em; line-height: 1; display: inline-flex; }
.wm-card__flag img.emoji { width: 1.2em; height: 1.2em; margin: 0 !important; }
.wm-card__help {
  font-size: .95rem;
  font-weight: 400;
  opacity: .72;
}
.wm-card:has(input:checked) { background: var(--wm-yellow); }
.wm-card:has(input:checked) .wm-card__tick {
  background: var(--wm-ink);
  box-shadow: inset 0 0 0 3px var(--wm-yellow);
}
.wm-card--check:has(input:checked) { background: var(--wm-paper); }
.wm-card--check:has(input:checked) .wm-card__tick {
  background-color: var(--wm-ink);
  box-shadow: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='square' d='M3.2 8.2l3 3 6.6-6.8'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: .85rem;
}
.wm-card:has(input:focus-visible) {
  outline: 3px solid var(--wm-yellow);
  outline-offset: 2px;
}

.wm-file {
  position: relative;
  display: flex;
  cursor: pointer;
  border: 1.5px dashed var(--wm-ink);
  background: var(--wm-paper);
  min-height: 5.5rem;
}
.wm-file input[type=file] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.wm-file__ui {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .25rem;
  width: 100%;
  padding: 1.1rem 1.15rem;
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: 0;
}
.wm-file__ui strong { font-size: 1.15rem; }
.wm-file__ui [data-file-name] { opacity: .7; font-weight: 400; }
.wm-file:hover { background: #fff; }

.wm-hint {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  opacity: .7;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}
.wm-error {
  display: block;
  color: var(--wm-err);
  font-size: 1rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.wm-error--form { margin-top: .25rem; }

.wm-actions {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin-top: .25rem;
}
.wm-actions .btn {
  justify-content: center;
  min-height: 3.35rem;
  font-size: 1.1rem;
  width: 100%;
}
.wm-actions .btn[hidden],
.wm-actions .btn[x-cloak],
.wm-actions .btn[style*="display: none"] { display: none !important; }
.wm-btn-small {
  align-self: flex-start;
  min-height: 2.75rem;
  padding: .55rem 1rem;
  font-size: 1rem;
  width: auto;
}
.wm-intake__submit:disabled {
  opacity: .38;
  cursor: not-allowed;
  transform: none;
}
.wm-intake__submit:disabled:hover {
  background: var(--wm-ink);
  color: var(--wm-paper);
  border-color: var(--wm-ink);
  transform: none;
}
.wm-intake__submit.is-sending:disabled {
  opacity: .7;
  cursor: progress;
}
.wm-intake__note {
  margin: .15rem 0 0;
  text-align: center;
}
.wm-intake__note p {
  margin: 0 0 .55rem;
  font-size: .95rem;
  line-height: 1.5;
  font-weight: 400;
  opacity: .72;
  text-transform: none;
  letter-spacing: 0;
}
.wm-intake__note p:last-child { margin-bottom: 0; }

.wm-map {
  height: 280px;
  border: 1.5px solid var(--wm-ink);
  margin-top: .35rem;
}

.wm-newsite .wm-hours__day {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--wm-line);
  font-weight: 400;
}
.wm-newsite .wm-hours__name {
  width: auto;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 0;
  display: flex;
  align-items: center;
  gap: .7rem;
  cursor: pointer;
}
.wm-newsite .wm-hours__name input[type=checkbox] {
  width: 1.35rem;
  height: 1.35rem;
  accent-color: var(--wm-ink);
  flex-shrink: 0;
}
.wm-newsite .wm-hours__day.is-closed .wm-hours__name { opacity: .55; }
.wm-newsite .wm-hours__range {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.wm-newsite .wm-hours__range input[type=time] {
  width: auto;
  flex: 1 1 7rem;
  min-height: 3rem;
}
.wm-newsite .wm-hours__closed { font-size: 1rem; opacity: .65; }
.wm-newsite .wm-hours__tools { display: flex; flex-wrap: wrap; gap: .9rem; font-size: 1rem; }
.wm-newsite .button-link {
  background: none;
  border: 0;
  color: var(--wm-ink);
  cursor: pointer;
  padding: 0;
  font: inherit;
  font-size: 1rem;
  text-decoration: underline;
}
.wm-hours__x { color: var(--wm-err); text-decoration: none; }

.wm-newsite .wm-areas { display: flex; flex-direction: column; gap: .45rem; }
.wm-newsite .wm-area {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  margin: 0;
  padding: .85rem 1rem;
  border: 1.5px solid var(--wm-ink);
  font-weight: 500;
  font-size: 1.1rem;
  cursor: pointer;
}
.wm-newsite .wm-area input[type=checkbox] {
  width: 1.35rem;
  height: 1.35rem;
  accent-color: var(--wm-ink);
  flex-shrink: 0;
}
.wm-newsite .wm-area:has(input:checked) { background: var(--wm-paper); }
.wm-area__tools { margin: .35rem 0; display: flex; gap: 1rem; }
.wm-area__custom {
  display: block;
  width: 100%;
  margin-top: .2rem;
  padding: .85rem 1rem;
  border: 1.5px solid var(--wm-ink);
  font: inherit;
  font-size: 1.125rem;
}

.wm-services,
.wm-faq { display: flex; flex-direction: column; gap: .55rem; }
.wm-faq__row {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: .5rem;
}
.wm-faq__x {
  align-self: flex-start;
  background: none;
  border: 0;
  color: var(--wm-err);
  cursor: pointer;
  font-size: 1.2rem;
}

.wm-status {
  border: 1.5px solid var(--wm-ink);
  padding: 1.5rem;
}
.wm-status__bar {
  height: 8px;
  background: var(--wm-muted);
  overflow: hidden;
}
.wm-status__fill {
  display: block;
  height: 100%;
  width: 5%;
  background: var(--wm-ink);
  transition: width .6s ease;
}
.wm-status__state { font-weight: 600; margin: 1rem 0 .5rem; }
.wm-status__log { list-style: none; padding: 0; margin: 0 0 1rem; font-size: .85rem; opacity: .7; font-family: ui-monospace, Menlo, monospace; display: none; }
.wm-status__log li { padding: .15rem 0; }
.wm-status--debug .wm-status__log { display: block; }
.wm-status__actions { margin-top: 1rem; }
.wm-status__hint { font-size: 1rem; opacity: .75; margin-top: .75rem; }
.wm-steps { list-style: none; padding: 0; margin: 0 0 1rem; }
.wm-steps li { padding: .3rem 0 .3rem 1.7rem; position: relative; opacity: .45; }
.wm-steps li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55rem;
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  border: 2px solid #cfd4da;
}
.wm-steps li.is-active { opacity: 1; }
.wm-steps li.is-active::before { border-color: var(--wm-ink); border-top-color: transparent; animation: wm-spin .8s linear infinite; }
.wm-steps li.is-done { opacity: 1; }
.wm-steps li.is-done::before { background: var(--wm-ink); border-color: var(--wm-ink); }
@keyframes wm-spin { to { transform: rotate(360deg); } }


/* Design (template pack) cards: thumbnail on top, two columns when there is room. */
.wm-cards--packs {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}
@media (min-width: 560px) {
  .wm-cards--packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wm-card--pack {
  flex-direction: column;
  gap: .6rem;
  padding: .6rem .6rem .9rem;
}
.wm-card--pack .wm-card__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--wm-line);
  background: var(--wm-muted);
}
.wm-card--pack .wm-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wm-card--pack .wm-card__tick {
  position: absolute;
  top: .95rem;
  right: .95rem;
  margin: 0;
  box-shadow: 0 0 0 3px var(--wm-paper);
}
.wm-card--pack .wm-card__body { padding: 0 .4rem; }
.wm-card--pack .wm-card__title { font-size: 1rem; }
.wm-card--pack .wm-card__help { font-size: .88rem; }
.wm-link {
  align-self: flex-start;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .2em;
  color: var(--wm-ink);
}
.wm-link:hover { color: var(--wm-ink); text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------- fieldsets
   The form is one long column, so it is split into three groups: what the
   business is, how to reach it, what it offers. Each group is a soft panel
   so the eye can rest between chapters. Browsers give fieldset a border,
   padding and margin of their own, all of which fight the flex column, so
   they are reset before the panel treatment. */
.wm-intake__group {
  counter-increment: wm-group;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  margin: 0;
  padding: 1.5rem 1.25rem 1.75rem;
  border: 0;
  min-width: 0;
  background: var(--wm-muted);
}
@media (max-width: 560px) {
  .wm-intake__group { padding-left: .9rem; padding-right: .9rem; }
}

/* legend is not a flex item in every browser, so it is taken out of the flow
   and given its own spacing instead of relying on the gap. */
.wm-intake__legend {
  display: block;
  float: left;
  width: 100%;
  margin: 0 0 .2rem;
  padding: 0;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--wm-ink);
}

.wm-intake__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-right: .65rem;
  background: var(--wm-yellow);
  color: var(--wm-ink);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: .05em;
}

.wm-intake__step::before { content: counter(wm-group); }

.wm-intake__legend + * { clear: both; }

.wm-intake__group-hint {
  margin: -.55rem 0 .15rem;
  font-size: .95rem;
  opacity: .7;
}

.wm-field__note {
  font-size: .88rem;
  opacity: .75;
}