/* Tokens, fonts and the reset. Loopback's palette: a near-black ground, light ink, paper bands, one blue accent.
   Layout is a conventional centred column (.wrap) with a sticky top bar. */

@font-face {
  font-family: "Gambarino";
  src: url("../assets/fonts/gambarino-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../assets/fonts/general-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../assets/fonts/general-sans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --bg: #121214;
  --surface: #19191c;
  --surface-2: #212024;
  --surface-3: #2c2b31;
  --line: rgba(255, 255, 255, .08);
  --ink: #edecef;
  --soft: #b4b2bc;
  --accent: #4a8ad6;
  --accent-hover: #6aa1e2;
  --on-accent: #0b0d12;
  --paper: #f3f2ee;
  --paper-2: #e8e6df;
  --paper-ink: #141416;
  --paper-soft: #46454c;
  --paper-accent: #2a64aa;

  --font-display: "Gambarino", "Iowan Old Style", Georgia, serif;
  --font-text: "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step-small: 0.875rem;
  --step-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-lead: clamp(1.1875rem, 1.08rem + 0.5vw, 1.5rem);
  --step-title: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --step-head: clamp(2.375rem, 1.6rem + 3vw, 4.25rem);
  --step-name: clamp(3.5rem, 2rem + 6.4vw, 8rem);

  --max: 1600px;
  --margin: clamp(16px, 4vw, 64px);
  --nav-h: 64px;
  --section-gap: clamp(88px, 10vw, 152px);
  --radius: 24px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1; letter-spacing: -0.02em; }

/* Whole-control hit areas: the icon and label inside a button or card never swallow the click. */
button *, .btn *, .tz *, .link-card * { pointer-events: none; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--margin); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: var(--margin); top: -100px; z-index: 60;
  background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 999px; text-decoration: none;
}
.skip:focus { top: 12px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }

/* One button shape for the whole page: a full pill, flat fill. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 50px; padding: 0 24px; border-radius: 999px;
  font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.btn .ico { transition: transform .25s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: var(--step-small); }
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--accent:hover { background: var(--accent-hover); }
.btn--light { background: var(--ink); color: var(--bg); }
.btn--light:hover { background: #fff; }
.btn--quiet { background: var(--surface-2); color: var(--ink); }
.btn--quiet:hover { background: var(--surface-3); }
.btn--ink { background: var(--paper-ink); color: var(--paper); }
.btn--ink:hover { background: #2e2d33; }
.btn--ink:focus-visible { outline-color: var(--paper-accent); }

/* Section headings share one pattern: a serif title and an optional line or chips beside it. */
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-title { font-size: var(--step-head); }
.sec-sub { color: var(--soft); }

/* Parallax that stays inside its frame: the frame clips, the picture inside drifts.
   Nothing outside the frame ever moves, so nothing can overlap while scrolling. */
.pfx-frame { position: relative; overflow: hidden; isolation: isolate; }
.pfx-frame picture { position: absolute; inset: 0; }
.pfx {
  position: absolute; left: 0; width: 100%; max-width: none;
  top: calc(var(--amp, 0px) * -1); height: calc(100% + 2 * var(--amp, 0px));
  object-fit: cover;
  will-change: transform;
}

/* Entrances: hidden only when the script runs and motion is welcome; content shows without JS. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0; transform: translate3d(0, 24px, 0);
    transition: opacity .7s var(--ease-out), transform .8s var(--ease-out);
    transition-delay: var(--delay, 0ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}