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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}


html, body {
  overflow-x: clip;

  overscroll-behavior-x: none;
}

body {
  margin: 0;
  background: var(--h7-surface-page);
  color: var(--h7-text-primary);
  font-family: var(--h7-font-body);
  font-weight: var(--h7-weight-book);
  font-size: var(--h7-size-body);
  line-height: var(--h7-leading-body);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--h7-duration-base) var(--h7-ease-standard),
              color var(--h7-duration-base) var(--h7-ease-standard);
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }


picture { display: contents; }


a {
  color: var(--h7-text-link);
  text-decoration: none;
  transition: var(--h7-transition-colour);
}
a:hover { color: var(--h7-text-link-hover); }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }


:focus-visible {
  outline: none;
  box-shadow: var(--h7-focus-ring);
  border-radius: var(--h7-radius-xs);
}

::selection { background: var(--h7-brass-light); color: var(--h7-dark-indigo); }

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

.h7-skip-link {
  position: absolute; top: var(--h7-space-3); left: var(--h7-space-3);
  z-index: 200; padding: var(--h7-space-3) var(--h7-space-5);
  background: var(--h7-surface-page); color: var(--h7-text-primary);
  border: 1px solid var(--h7-border-strong);
  transform: translateY(-200%);
}
.h7-skip-link:focus { transform: translateY(0); }


.h7-display-1, .h7-display-2, .h7-display-3, .h7-headline {
  font-family: var(--h7-font-display);
  font-weight: var(--h7-weight-book);
  color: var(--h7-text-primary);
}

.h7-display-1 { font-size: var(--h7-size-display-1); line-height: var(--h7-leading-display); }
.h7-display-2 { font-size: var(--h7-size-display-2); line-height: 1.06; }
.h7-display-3 { font-size: var(--h7-size-display-3); line-height: 1.1; }
.h7-headline  { font-size: var(--h7-size-headline);  line-height: var(--h7-leading-tight); }

.h7-title {
  font-size: var(--h7-size-title); line-height: var(--h7-leading-title);
  font-weight: var(--h7-weight-medium);
}

.h7-body-lg { font-size: var(--h7-size-body-lg); line-height: 1.6; }
.h7-body    { font-size: var(--h7-size-body);    line-height: var(--h7-leading-body); }
.h7-body-sm { font-size: var(--h7-size-body-sm); line-height: 1.6; }

.h7-ui {
  font-size: var(--h7-size-ui); line-height: 1.4;
  font-weight: var(--h7-weight-medium);
}

.h7-caption {
  font-size: var(--h7-size-caption); line-height: 1.5;
  color: var(--h7-text-muted);
}


.h7-eyebrow {
  font-size: var(--h7-size-eyebrow);
  font-weight: var(--h7-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--h7-tracking-caps);
  color: var(--h7-text-accent);
  line-height: 1.4;
}



.h7-measure { max-width: var(--h7-measure); }
.h7-secondary { color: var(--h7-text-secondary); }


.h7-container {
  width: 100%;
  max-width: calc(var(--h7-content-max) + var(--h7-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--h7-gutter);
}

.h7-section {
  padding-block: var(--h7-section-y);
  background: var(--h7-surface-page);
  color: var(--h7-text-primary);
}


.h7-invert,
.h7-invert-on-light {
  background: var(--h7-surface-page);
  color: var(--h7-text-primary);
}


.h7-section--tight { padding-block: var(--h7-space-10); }

.h7-stack     { display: flex; flex-direction: column; gap: var(--h7-space-5); }
.h7-stack-sm  { display: flex; flex-direction: column; gap: var(--h7-space-3); }
.h7-stack-lg  { display: flex; flex-direction: column; gap: var(--h7-space-7); }
.h7-row       { display: flex; align-items: center; gap: var(--h7-space-4); }

.h7-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--h7-space-5);
  margin-bottom: var(--h7-space-8);
}

@media (max-width: 640px) {
  .h7-section-head { flex-direction: column; align-items: flex-start; gap: var(--h7-space-3); }
}


.h7-reveal-ready [data-reveal] { opacity: 0; }

.h7-reveal-ready [data-reveal="in"] {
  opacity: 1;
  animation: h7-mask-reveal var(--h7-duration-reveal) var(--h7-ease-linen) backwards;
}

@keyframes h7-mask-reveal {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}


.h7-reveal-ready [data-reveal-delay="1"] { animation-delay: 80ms; }
.h7-reveal-ready [data-reveal-delay="2"] { animation-delay: 160ms; }
.h7-reveal-ready [data-reveal-delay="3"] { animation-delay: 240ms; }
