/* Shared base for every mockup: reset, accessibility helpers, form plumbing.
   Each mockup layers its own look on top via custom properties:
   --bg --fg --muted --accent --field-bg --field-border --focus --error */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg, #fff); color: var(--fg, #111); }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
input, textarea, button, select { font: inherit; color: inherit; }
a { color: inherit; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .6rem 1rem;
  background: var(--fg, #111); color: var(--bg, #fff); border-radius: .4rem; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 3px solid var(--focus, var(--accent, #1a56db)); outline-offset: 3px; border-radius: 2px; }

/* Placeholder copy is visibly marked so nobody mistakes it for real facts. */
.placeholder { background: color-mix(in srgb, var(--accent, #1a56db) 14%, transparent); border-radius: .2em; padding: 0 .15em; }

/* ---- Contact form plumbing ---- */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
form[data-contact] label { display: block; }
form[data-contact] input, form[data-contact] textarea {
  width: 100%; background: var(--field-bg, transparent); border: 1px solid var(--field-border, currentColor);
  border-radius: var(--field-radius, .35rem); padding: .7rem .8rem; min-height: 2.75rem;
}
form[data-contact] textarea { resize: vertical; min-height: 8rem; }
form[data-contact] [aria-invalid="true"] { border-color: var(--error, #b42318); box-shadow: 0 0 0 1px var(--error, #b42318); }
form[data-contact] button[type="submit"] { min-height: 2.75rem; cursor: pointer; }
form[data-contact] button[disabled] { opacity: .6; cursor: progress; }
.field-error { color: var(--error, #b42318); font-size: .9em; margin: .35rem 0 0; }
.form-status { min-height: 1.5em; margin: .75rem 0 0; }
form[data-state="sent"] .form-status { color: var(--success, inherit); font-weight: 600; }
form[data-state="error"] .form-status { color: var(--error, #b42318); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}