/* Reset, layout, type, buttons, nav, footer and the motion every section shares. */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--fs-base); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip { position: absolute; left: var(--s-4); top: -60px; z-index: 200; padding: var(--s-3) var(--s-4); background: var(--text); color: var(--bg); font-family: var(--font-body); font-weight: 600; transition: top var(--dur); }
.skip:focus { top: var(--s-4); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s-10); }
.eyebrow { display: flex; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: var(--rule); }
.eyebrow h2 { margin: 0; }
.icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; }

/* ---------- type ---------- */
.display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-wrap: balance;
}
.caps { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; }
/* fitted poster lines: JS sets font-size so the line spans its container */
[data-fit] { display: block; white-space: nowrap; font-size: 12vw; margin: 0; }

/* ---------- buttons: colour fill sweeps left → right ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: var(--s-3);
  min-height: 48px; padding: 0 var(--s-5);
  border: 2px solid var(--text); border-radius: 0;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em;
  cursor: pointer;
  transition: color 420ms var(--ease-out), border-color 420ms var(--ease-out);
}
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--sweep, var(--accent)); transform: scaleX(0); transform-origin: right; transition: transform 420ms var(--ease-out); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.btn .icon { transition: transform var(--dur) var(--ease-out); }
.btn:hover .icon { transform: translateX(3px); }
.btn[disabled] { opacity: .6; cursor: progress; }
/* navy button: the navy frame stays and gold sweeps inside */
.btn--primary { --sweep: var(--hover-navy); background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn--primary:hover, .btn--primary:focus-visible { color: var(--on-hover-navy); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.nav.is-scrolled { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); border-color: var(--text); }
.nav__logo { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); letter-spacing: -0.01em; transition: color 380ms var(--ease-out); }
.nav__logo:hover { color: var(--hover-light); }
.nav__logo span { color: var(--accent-ink); }
.nav__links { display: flex; gap: var(--s-1); color: var(--text); font-family: var(--font-body); font-weight: 500; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; }
.nav__links a { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-4); color: var(--text); transition: color 380ms var(--ease-out); }
.nav__links a:hover, .nav__links a:focus-visible { color: var(--hover-light); }
/* underline draws in from the left on hover and leaves to the right; the current section keeps it */
.nav__links a::before { content: ''; position: absolute; left: var(--s-4); right: var(--s-4); bottom: 6px; height: 2px; background: var(--hover-light); transform: scaleX(0); transform-origin: right; transition: transform 380ms var(--ease-out); }
.nav__links a:hover::before, .nav__links a:focus-visible::before, .nav__links a[aria-current="true"]::before { transform: scaleX(1); transform-origin: left; }
@media (max-width: 760px) { .nav__links { display: none; } }

/* ---------- footer ---------- */
.footer { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; padding-block: var(--s-6); border-top: var(--rule); font-family: var(--font-body); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text); }
.footer a { transition: color 380ms var(--ease-out); }
.footer a:hover, .footer a:focus-visible { color: var(--hover-light); }
/* back to top: navy underline draws in from the left, arrow lifts */
.totop { position: relative; display: inline-flex; align-items: center; gap: var(--s-1); min-height: 32px; }
.totop::before { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--hover-light); transform: scaleX(0); transform-origin: right; transition: transform 380ms var(--ease-out); }
.totop:hover::before, .totop:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.totop__arrow { display: inline-block; transition: transform 380ms var(--ease-out); }
.totop:hover .totop__arrow, .totop:focus-visible .totop__arrow { transform: translateY(-3px); }
@media (max-width: 640px) { .footer__steps { display: none; } }

/* ---------- motion ---------- */
/* reveal (JS adds .is-in; no-JS shows everything) */
.js [data-reveal] { opacity: 0; transform: translateY(var(--reveal-distance)); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
/* [data-split] lines rise one by one inside a mask */
.line-mask { display: block; overflow: hidden; padding-bottom: 0.06em; }
.line-mask > span { display: block; }
.js .line-mask > span { transform: translateY(105%); }
.js .is-in .line-mask > span, .js .line-mask.is-in > span { transform: none; transition: transform 1100ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
/* caret blink, used by the hero caret and the Implement scene */
@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
  .js [data-reveal], .js .line-mask > span { opacity: 1; transform: none; }
}