#signage-form { scroll-margin-top: 90px; }
.sign-hero-chat { margin: 16px 0 0; font-size: 14px; line-height: 1.6; }
.sign-hero-chat a { text-decoration: underline; text-underline-offset: 3px; }
#signage-quote-form .form-control { font-size: 16px; }
.sign-brief-hint { margin: 0 0 18px; color: var(--text-3); font-size: 14px; line-height: 1.6; }
.sign-brief-options { margin: 12px 0 24px; border: 1px solid var(--border); border-radius: 12px; }
.sign-brief-options summary { padding: 16px; cursor: pointer; font-weight: 600; line-height: 1.5; }
.sign-brief-options-body { padding: 0 16px 8px; }
.sign-brief-review { padding-top: 4px; }
#sign-preview { min-height: 180px; margin-bottom: 12px; line-height: 1.6; resize: vertical; background: var(--bg-2, #f7f6fa); }
.sign-brief-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.sign-brief-buttons .btn { min-height: 48px; }
.sign-brief-buttons .btn-whatsapp { flex: 1; }
.sign-brief-options summary:focus-visible { outline: 2px solid var(--purple, #453064); outline-offset: 3px; }
@media (max-width: 600px) {
  .sign-brief-buttons { flex-direction: column; }
  .sign-brief-buttons .btn { width: 100%; }
}


/* Signage brief, October 2026: three essentials, then a reviewable draft.
   An additive component. Existing markup keeps the original fallback above. */
.sg-experience #signage-form {
  padding-block: clamp(48px, 6vw, 80px);
  background: var(--sg-paper, #f4f0e8);
  content-visibility: visible;
  contain-intrinsic-size: none;
}
.sg-experience #signage-form .section-header { margin-bottom: 28px; }
.sg-experience #signage-form .section-sub { max-width: 66ch; }
.sg-experience #signage-form .sign-brief-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--sg-line, #dbd3c7);
  border-radius: 24px;
  background: var(--sg-white, #fffdf9);
  box-shadow: 0 24px 48px -36px #211b2b33;
  overflow: visible;
}
.sg-experience #signage-form .sign-brief-shell::before,
.sg-experience #signage-form .sign-brief-shell::after { content: none; }
.sg-experience #signage-form #signage-quote-form.sign-brief-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(20px, 2.8vw, 36px);
  border: 0;
  border-radius: 24px;
  background: none;
  box-shadow: none;
  box-sizing: border-box;
}
.sg-experience #signage-form :is(.sign-brief-inputs, .sign-brief-review, .form-group, .form-row, .sign-brief-specs-body, .sign-brief-options-body) {
  min-width: 0;
  box-sizing: border-box;
}
.sg-experience #signage-form .sign-brief-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  margin-bottom: 26px;
}
.sg-experience #signage-form .sign-brief-number {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  align-self: start;
  border-radius: 10px;
  color: var(--sg-ink, #211b2b);
  background: var(--sg-accent, #e8f598);
  font: 750 12px/1 var(--sj-body, Inter, sans-serif);
  letter-spacing: .015em;
  font-variant-numeric: tabular-nums;
}
.sg-experience #signage-form .sign-brief-step > div { min-width: 0; }
.sg-experience #signage-form .sign-brief-step h3 {
  margin: 3px 0 0;
  color: var(--sg-ink, #211b2b);
  font: 800 clamp(20px, 1.9vw, 25px)/1.2 var(--sj-display, Archivo, sans-serif);
  font-stretch: 105%;
  letter-spacing: -.02em;
  text-transform: none;
  overflow-wrap: anywhere;
}
.sg-experience #signage-form .sign-brief-step p {
  margin: 8px 0 0;
  color: var(--sg-muted, #625b6d);
  font-size: 13px;
  line-height: 1.6;
}
.sg-experience #signage-form .form-label {
  display: block;
  margin: 0 0 9px;
  color: var(--sg-ink, #211b2b);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
}
.sg-experience #signage-form .form-control {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 13px 14px;
  border: 1px solid #ada1bd;
  border-radius: 10px;
  color: var(--sg-ink, #211b2b);
  background: #fff;
  font: 450 16px/1.5 var(--sj-body, Inter, sans-serif);
  box-shadow: none;
  box-sizing: border-box;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.sg-experience #signage-form select.form-control { padding-right: 32px; }
.sg-experience #signage-form .form-control::placeholder { color: #716778; opacity: 1; }
.sg-experience #signage-form .form-control:hover:not(:focus):not(:disabled) { border-color: #756381; }
.sg-experience #signage-form .form-control:focus {
  outline: 2px solid #5131b9;
  outline-offset: 2px;
  border-color: #5131b9;
  background: #fff;
  box-shadow: none;
}
.sg-experience #signage-form .form-control[aria-invalid="true"] { border-color: #a9342b; }
.sg-experience #signage-form textarea.form-control { min-height: 118px; resize: vertical; }
.sg-experience #signage-form .form-group { margin: 0; }
.sg-experience #signage-form .sign-brief-essentials {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.sg-experience #signage-form .sign-brief-hint {
  margin: 14px 0 24px;
  color: var(--sg-muted, #625b6d);
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.sg-experience #signage-form :is(.sign-brief-specs, .sign-brief-options) {
  margin: 12px 0 0;
  border: 1px solid #d8cede;
  border-radius: 12px;
  background: #fcfaf7;
}
.sg-experience #signage-form :is(.sign-brief-specs, .sign-brief-options) > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 56px;
  padding: 15px 16px;
  color: #3c2c4d;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
  box-sizing: border-box;
}
.sg-experience #signage-form :is(.sign-brief-specs, .sign-brief-options) > summary::-webkit-details-marker { display: none; }
.sg-experience #signage-form :is(.sign-brief-specs, .sign-brief-options) > summary::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease;
}
.sg-experience #signage-form :is(.sign-brief-specs, .sign-brief-options)[open] > summary::after { transform: rotate(225deg); margin-top: 4px; }
.sg-experience #signage-form :is(.sign-brief-specs, .sign-brief-options) > summary:focus-visible {
  outline: 3px solid #5131b9;
  outline-offset: 3px;
  border-radius: 10px;
}
.sg-experience #signage-form :is(.sign-brief-specs-body, .sign-brief-options-body) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 19px;
  padding: 7px 16px 20px;
}
.sg-experience #signage-form .form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 19px; margin: 0; }
.sg-experience #signage-form .sign-brief-review {
  align-self: start;
  padding: 24px;
  border: 1px solid #ded5ec;
  border-radius: 17px;
  color: var(--sg-ink, #211b2b);
  background: #f3eef9;
}
.sg-experience #signage-form .sign-brief-review[hidden] { display: none !important; }
.sg-experience #signage-form .sign-brief-review .sign-brief-step { margin-bottom: 19px; }
.sg-experience #signage-form .sign-brief-review .sign-brief-number { color: var(--sg-accent, #e8f598); background: var(--sg-ink, #211b2b); }
.sg-experience #signage-form #sign-essentials-status {
  display: block;
  margin: 0 0 9px;
  color: #544264;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
}
.sg-experience #signage-form #sign-essentials-progress {
  appearance: none;
  display: block;
  width: 100%;
  height: 5px;
  margin: 0 0 23px;
  border: 0;
  border-radius: 6px;
  color: #6643b5;
  background: #ded3ec;
  overflow: hidden;
}
.sg-experience #signage-form #sign-essentials-progress::-webkit-progress-bar { border-radius: 6px; background: #ded3ec; }
.sg-experience #signage-form #sign-essentials-progress::-webkit-progress-value { border-radius: 6px; background: #6643b5; }
.sg-experience #signage-form #sign-essentials-progress::-moz-progress-bar { border-radius: 6px; background: #6643b5; }
.sg-experience #signage-form #sign-preview {
  min-height: 194px;
  margin: 0;
  border-color: #c4b6d2;
  background: #fffdfd;
  font-size: 16px;
  line-height: 1.7;
  resize: vertical;
}
.sg-experience #signage-form .sign-brief-review .sign-brief-hint { margin: 14px 0 20px; }
.sg-experience #signage-form .sign-brief-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.sg-experience #signage-form .sign-brief-buttons .btn {
  justify-content: center;
  min-height: 50px;
  max-width: 100%;
  margin: 0;
  padding: 13px 17px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  white-space: normal;
  text-align: center;
  box-sizing: border-box;
}
.sg-experience #signage-form .sign-brief-buttons .btn-whatsapp { flex: 1 1 200px; color: #fff; background: #5131b9; border: 1px solid #5131b9; }
.sg-experience #signage-form .sign-brief-buttons .btn-whatsapp:hover { background: #3a208f; border-color: #3a208f; }
.sg-experience #signage-form .sign-brief-buttons .btn-outline { flex: 1 1 110px; color: #3c265c; background: #fffdfd; border: 1px solid #9c87b5; }
.sg-experience #signage-form .sign-brief-buttons .btn-outline:hover { color: #211b2b; background: #eae1f4; border-color: #6d507f; }
.sg-experience #signage-form .sign-brief-buttons .btn:focus-visible { outline: 3px solid #5131b9; outline-offset: 4px; }
.sg-experience #signage-form .contact-action-note { margin: 16px 0 0; color: #62566e; font-size: 12.5px; line-height: 1.7; overflow-wrap: anywhere; }
.sg-experience #signage-form #signage-quote-form-status:not(:empty) { padding: 12px 14px; border-radius: 8px; background: #fffdfd; color: #3c265c; }
.sg-experience #signage-form #signage-quote-form-status:empty { margin: 0; }
.sg-experience #signage-form noscript { grid-column: 1 / -1; color: var(--sg-muted, #625b6d); font-size: 14px; line-height: 1.7; }
.sg-experience #signage-form noscript a { color: #5131b9; text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 640px) {
  .sg-experience #signage-form .sign-brief-essentials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-experience #signage-form .sign-brief-essentials > .form-group:first-child { grid-column: 1 / -1; }
  .sg-experience #signage-form .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .sg-experience #signage-form #signage-quote-form.sign-brief-layout.sign-brief-ready {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(28px, 3.3vw, 46px);
    align-items: start;
  }
  .sg-experience #signage-form .sign-brief-inputs { padding: 3px 0; }
}
@media (min-width: 960px) and (min-height: 800px) {
  .sg-experience #signage-form .sign-brief-ready .sign-brief-review { position: sticky; top: 105px; }
}
@media (max-width: 639px) {
  .sg-experience #signage-form .sign-brief-shell { border-radius: 18px; }
  .sg-experience #signage-form #signage-quote-form.sign-brief-layout { gap: 26px; padding: 20px 16px; }
  .sg-experience #signage-form .sign-brief-step { margin-bottom: 24px; gap: 7px 11px; }
  .sg-experience #signage-form .sign-brief-step h3 { font-size: 21px; }
  .sg-experience #signage-form .sign-brief-step p { margin-top: 2px; }
  .sg-experience #signage-form .sign-brief-essentials { gap: 18px; }
  .sg-experience #signage-form .sign-brief-review { padding: 21px 16px; border-radius: 13px; }
  .sg-experience #signage-form .sign-brief-buttons { flex-direction: column; }
  .sg-experience #signage-form .sign-brief-buttons .btn { width: 100%; flex-basis: auto; }
  .sg-experience #signage-form :is(.sign-brief-specs, .sign-brief-options) > summary { padding-inline: 14px; }
  .sg-experience #signage-form :is(.sign-brief-specs-body, .sign-brief-options-body) { padding-inline: 14px; }
  .sg-experience #signage-form .form-control { padding-inline: 12px; }
  .sg-experience #signage-form select.form-control { padding-right: 28px; }
  .sg-experience #signage-form #sign-preview { min-height: 214px; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-experience #signage-form .form-control,
  .sg-experience #signage-form .sign-brief-buttons .btn,
  .sg-experience #signage-form :is(.sign-brief-specs, .sign-brief-options) > summary::after { transition: none; }
}

/* SJ signage choice: 20261008-1 — one action within each existing card. */
#sign-types .sign-type-quote {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  max-width: 100%;
  margin-top: 8px;
  padding: 8px 0;
  color: var(--purple, #453064);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  text-decoration: underline;
  text-underline-offset: 3px;
  box-sizing: border-box;
}
#sign-types .sign-type-quote:focus-visible { outline: 2px solid var(--purple, #453064); outline-offset: 3px; }
#signage-form #sign-type { scroll-margin-top: 110px; }