/* Reset and element defaults. Everything sizes in rem so the whole page scales
   with the viewport the way the Wix original does, see tokens.css.

   This sheet is shared with sibling sites (autobricks.ai copies it verbatim), so it
   names no brand: fonts and colours come from tokens.css, the CTA colour through
   --accent / --on-accent. */


*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/*
 * Anchors glide rather than teleport. The reduced-motion block below already turns this
 * back off, it was written expecting this to arrive one day.
 *
 * scroll-margin keeps a target clear of the sticky header, which would otherwise cover the
 * first 138px of whatever you just jumped to. :where() so it carries no specificity and any
 * page can override it.
 */
html { scroll-behavior: smooth; }
:where([id]) { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

img,
video,
svg { display: block; max-width: 100%; }

img,
video { height: auto; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 { font-weight: 400; line-height: var(--lh); }

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Respect the OS setting; the original site animates a fair amount. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  font-size: var(--fs-sm);
  color: var(--on-accent);
  background: var(--accent);
}
.skip-link:focus { top: 0; }
