/* ==========================================================================
   Magnifize concept sites — shared base.
   Each concept site has its own style.css with its own type, colour and layout.
   This file only resets, and draws the two Magnifize parts every demo carries:
   the concept label on top and the way back at the bottom. Those two stay neutral
   on purpose, so they never read as part of the fictional business.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
p, li, h1, h2, h3, h4, dd, dt { overflow-wrap: break-word; }
ul[class], ol[class] { list-style: none; padding: 0; }
[id] { scroll-margin-top: 6rem; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- Magnifize: concept label ------------------------------------------- */
.mz-bar {
  position: relative; z-index: 80;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.35rem 1.5rem;
  padding: 0.6rem clamp(1rem, 4vw, 2.5rem);
  background: #0A0A0B; color: #F4F4F6;
  font: 500 0.8125rem/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0;
}
.mz-bar p { max-width: 80ch; color: #C9CCD1; }
.mz-bar strong { color: #FFFFFF; font-weight: 600; }
.mz-bar nav { display: flex; gap: 1.25rem; }
.mz-bar a { color: #FFFFFF; text-underline-offset: 3px; }
.mz-skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.7rem 1rem; border-radius: 999px;
  background: #0A0A0B; color: #FFFFFF; font: 500 0.875rem ui-sans-serif, system-ui, sans-serif; text-decoration: none;
}
.mz-skip:focus { top: 1rem; }
.mz-bar a:focus-visible, .mz-outro a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

/* --- Magnifize: the way back ---------------------------------------------- */
.mz-outro { background: #0A0A0B; color: #F4F4F6; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.mz-outro__in { max-width: 72rem; margin-inline: auto; padding: clamp(4rem, 10vw, 7rem) clamp(1rem, 4vw, 2.5rem); }
.mz-outro__eyebrow { font-size: 0.8125rem; font-weight: 600; color: #A3A7AE; letter-spacing: 0.02em; }
.mz-outro h2 { font-family: inherit; font-style: normal; font-variation-settings: normal; font-stretch: 100%; text-transform: none; margin-top: 1rem; font-size: clamp(2.2rem, 5.5vw, 4.5rem); font-weight: 650; letter-spacing: -0.045em; line-height: 1; max-width: 16ch; }
.mz-outro p:not([class]) { margin-top: 1.25rem; max-width: 42ch; font-size: 1.125rem; color: #C9CCD1; }
.mz-outro__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2.25rem; }
.mz-btn {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3.25rem; padding: 0 1.6rem; border-radius: 999px;
  background: #FFFFFF; color: #0A0A0B; font-weight: 600; text-decoration: none; transition: background-color 0.3s;
}
.mz-btn:hover { background: #D9DCE1; }
.mz-link { color: #FFFFFF; font-weight: 500; text-underline-offset: 4px; }
.mz-outro__credits { margin-top: 3rem; font-size: 0.8125rem; color: #A3A7AE; }
.mz-outro__credits a { color: #FFFFFF; }

/* --- scroll reveal, only once base.js is running --------------------------- */
.rv-on [data-rv] { opacity: 0; transform: translateY(1.25rem); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.rv-on [data-rv].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}