*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}
img, video, canvas, 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; padding: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 1px dashed currentColor; outline-offset: 2px; }

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

.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(-1 * var(--gutter));
}
[class*="col-"] { padding-inline: var(--gutter); --c: calc(100% / var(--grid-cols)); }

.col-1  { flex: 0 0 calc(var(--c) * 1);  max-width: calc(var(--c) * 1);  }
.col-2  { flex: 0 0 calc(var(--c) * 2);  max-width: calc(var(--c) * 2);  }
.col-3  { flex: 0 0 calc(var(--c) * 3);  max-width: calc(var(--c) * 3);  }
.col-4  { flex: 0 0 calc(var(--c) * 4);  max-width: calc(var(--c) * 4);  }
.col-5  { flex: 0 0 calc(var(--c) * 5);  max-width: calc(var(--c) * 5);  }
.col-6  { flex: 0 0 calc(var(--c) * 6);  max-width: calc(var(--c) * 6);  }
.col-7  { flex: 0 0 calc(var(--c) * 7);  max-width: calc(var(--c) * 7);  }
.col-8  { flex: 0 0 calc(var(--c) * 8);  max-width: calc(var(--c) * 8);  }
.col-9  { flex: 0 0 calc(var(--c) * 9);  max-width: calc(var(--c) * 9);  }
.col-10 { flex: 0 0 calc(var(--c) * 10); max-width: calc(var(--c) * 10); }
.col-11 { flex: 0 0 calc(var(--c) * 11); max-width: calc(var(--c) * 11); }
.col-12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 1024px) {
  .col-md-1  { flex: 0 0 calc(var(--c) * 1);  max-width: calc(var(--c) * 1);  }
  .col-md-2  { flex: 0 0 calc(var(--c) * 2);  max-width: calc(var(--c) * 2);  }
  .col-md-3  { flex: 0 0 calc(var(--c) * 3);  max-width: calc(var(--c) * 3);  }
  .col-md-4  { flex: 0 0 calc(var(--c) * 4);  max-width: calc(var(--c) * 4);  }
  .col-md-5  { flex: 0 0 calc(var(--c) * 5);  max-width: calc(var(--c) * 5);  }
  .col-md-6  { flex: 0 0 calc(var(--c) * 6);  max-width: calc(var(--c) * 6);  }
  .col-md-7  { flex: 0 0 calc(var(--c) * 7);  max-width: calc(var(--c) * 7);  }
  .col-md-8  { flex: 0 0 calc(var(--c) * 8);  max-width: calc(var(--c) * 8);  }
  .col-md-9  { flex: 0 0 calc(var(--c) * 9);  max-width: calc(var(--c) * 9);  }
  .col-md-10 { flex: 0 0 calc(var(--c) * 10); max-width: calc(var(--c) * 10); }
  .col-md-11 { flex: 0 0 calc(var(--c) * 11); max-width: calc(var(--c) * 11); }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }

  .offset-md-1 { margin-left: calc(var(--c) * 1); }
  .offset-md-2 { margin-left: calc(var(--c) * 2); }
  .offset-md-3 { margin-left: calc(var(--c) * 3); }
  .offset-md-6 { margin-left: calc(var(--c) * 6); }
}

.section {
  padding-block: var(--section-pad);
  background: var(--bg);
  color: var(--fg);
}
.section--flush { padding-block: 0; }

.section__inner {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

.measure { max-width: 68ch; }

h1, h2, h3, h4 { margin: 0; color: var(--fg); font-family: inherit; }

.u-h1 { font-weight: var(--fw-black); text-transform: uppercase; letter-spacing: 0;
        line-height: .9;  font-size: clamp(2rem, 9.52vw - .32rem, 8.25rem); }
.u-h2 { font-weight: var(--fw-black); text-transform: uppercase; letter-spacing: 0;
        line-height: 1;   font-size: clamp(2rem, 5.33vw + .7rem, 5.5rem); }
.u-h3 { font-weight: var(--fw-black); text-transform: uppercase; letter-spacing: 0;
        line-height: .95; font-size: clamp(1.25rem, 2.67vw + .6rem, 3rem); }
.u-h3-nav { font-weight: var(--fw-medium); text-transform: capitalize;
        line-height: .95; font-size: clamp(2.5rem, .762vw + 2.31rem, 3rem); }
.u-h4 { font-weight: var(--fw-medium); line-height: 1.1;
        font-size: clamp(1.5rem, 2.29vw + .94rem, 3rem); }

.b-1 { color: var(--body-fg); font-weight: var(--fw-medium); line-height: 1.3;
       font-size: clamp(1.13rem, .57vw + .99rem, 1.5rem); }
.b-2 { color: var(--body-fg); font-weight: var(--fw-medium); line-height: 1.4; font-size: 1rem; }
.b-3 { color: var(--body-fg); font-weight: var(--fw-medium); line-height: 1.4; font-size: .875rem; }
.light { font-weight: var(--fw-light); }

.cta-large { font-weight: var(--fw-medium); text-transform: uppercase; line-height: 1.3;
             font-size: clamp(1rem, .19vw + .95rem, 1.125rem); }
.cta-small { font-weight: var(--fw-medium); text-transform: uppercase; line-height: 1.3;
             font-size: 14px; }

.btn { position: relative; display: inline-flex; align-items: center; color: var(--fg); }

.btn--pill {
  isolation: isolate;
  height: 32px; gap: 8px; padding-inline: 12px; border-radius: var(--radius-pill);
  overflow: hidden; background: var(--bg); width: fit-content;
  text-transform: uppercase; font-size: 14px; font-weight: var(--fw-medium);
  -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
}
.btn--pill::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fg); opacity: .1; transition: opacity .3s; }
.btn--pill:hover::before { opacity: .3; }

.btn--icon {
  width: 32px; height: 32px; border-radius: 50%; justify-content: center; overflow: hidden;
}
.btn--icon svg { width: 100%; height: 100%; fill: var(--fg);
  transition: scale 1s var(--ease-enter); }
.btn--icon:hover svg { scale: .7; }

.btn--text {
  padding: 4px 0 6px; overflow: hidden; text-transform: uppercase; font-weight: var(--fw-medium);
  line-height: 1.3; font-size: clamp(1rem, .19vw + .95rem, 1.125rem);
}
.btn--text > span { display: block; transition: translate 1s var(--ease-enter); }
.btn--text::before, .btn--text::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--fg);
}
.btn--text::before { translate: calc(-100% - 2px) 0; transition: translate .4s var(--ease-swap); }
.btn--text::after  { transition: translate .3s var(--ease-swap) .15s; }
.btn--text:hover > span { translate: 0 -5px; }
.btn--text:hover::after  { translate: calc(100% + 2px) 0; transition: translate .5s var(--ease-swap); }
.btn--text:hover::before { translate: 0 0; transition: translate .5s var(--ease-swap) .25s; }

.media { position: relative; display: block; overflow: hidden; }
.media--fill { width: 100%; height: 100%; }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }
.media-frame { position: relative; width: 100%; aspect-ratio: var(--aspect-wide); overflow: hidden; }

.card-arrow {
  flex: none;
  width: var(--card-arrow-w);
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
  transition: translate .4s var(--ease-enter);
}
a:hover .card-arrow { translate: var(--space-xs) 0; }

.card-hover { position: relative; isolation: isolate; }
.card-hover::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--tint-4); opacity: 0;
  transition: opacity var(--cursor-dur) var(--ease-enter);
}
.card-hover:hover::after { opacity: 1; }

.reveal { opacity: 0; translate: 0 24px;
  transition: opacity .8s var(--ease-enter), translate .8s var(--ease-enter); }
.reveal.is-revealed { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; translate: 0 0; }
}