/* ==========================================================================
   Latestinvest — Nova  ·  MAIN
   Clean modern-CSS rebuild of the Nova Investments Webflow design.
   Layers: tokens (tokens.css) → base → layout → components → utilities.
   ========================================================================== */
@layer base, layout, components, utilities;

/* ------------------------------------------------------------------ base -- */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
  body {
    margin: 0;
    background: var(--li-bg);
    color: var(--li-ink);
    font-family: var(--li-font-body);
    font-size: var(--li-text-regular);
    line-height: var(--li-lh-body);
    font-weight: var(--li-weight-regular);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  img, svg, video { max-width: 100%; height: auto; display: block; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; }
  ul { margin: 0; padding: 0; list-style: none; }
  h1, h2, h3, h4, h5, h6, p { margin: 0; overflow-wrap: break-word; }
  /* Grid/flex children default to min-width:auto → long words force overflow.
     Reset so tracks can shrink and content wraps within the viewport. */
  .grid-2 > *, .grid-2--1-2 > *, .hero__head > *, .split > *, .contact-grid > *,
  .features > *, .cards > *, .footer__top > *, .footer__nav > * { min-width: 0; }

  h1, .h1 { font-family: var(--li-font-display); font-size: var(--li-h1); font-weight: var(--li-weight-semibold); line-height: var(--li-lh-tight); text-wrap: balance; }
  h2, .h2 { font-family: var(--li-font-display); font-size: var(--li-h2); font-weight: var(--li-weight-semibold); line-height: 1.15; text-wrap: balance; }
  h3, .h3 { font-family: var(--li-font-display); font-size: var(--li-h3); font-weight: var(--li-weight-semibold); line-height: var(--li-lh-heading); text-wrap: balance; }
  h4, .h4 { font-family: var(--li-font-display); font-size: var(--li-h4); font-weight: var(--li-weight-semibold); line-height: var(--li-lh-heading); text-wrap: balance; }
  h5, .h5 { font-family: var(--li-font-display); font-size: var(--li-h5); font-weight: var(--li-weight-semibold); line-height: var(--li-lh-heading); text-wrap: balance; }
  h6, .h6 { font-family: var(--li-font-display); font-size: var(--li-h6); font-weight: var(--li-weight-semibold); line-height: 1.5; text-wrap: balance; }
  p, .lead { text-wrap: pretty; }

  :focus-visible { outline: 2px solid var(--li-light-blue); outline-offset: 3px; border-radius: 2px; }

  .skip-link {
    position: fixed; top: 0; left: 0; transform: translateY(-120%);
    background: var(--li-navy); color: #fff; padding: .75rem 1.25rem; z-index: 200;
    transition: transform .2s;
  }
  .skip-link:focus { transform: translateY(0); }

  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  }
}

/* ---------------------------------------------------------------- layout -- */
@layer layout {
  .container { width: 100%; max-width: var(--li-container); margin-inline: auto; padding-inline: var(--li-pad-global); position: relative; }
  .container--medium { max-width: var(--li-container-medium); }

  .section { padding-block: var(--li-section-lg); position: relative; }
  .section--sm { padding-block: var(--li-section-sm); }
  .section--md { padding-block: var(--li-section-md); }
  .section--flush-top { padding-top: 0; }

  .section--blue { background: var(--li-surface-blue); color: #fff; }
  .section--navy { background: var(--li-surface-navy); color: #fff; }
  .section--alt  { background: var(--li-bg-alt); }
  .section--white{ background: var(--li-white); }

  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--li-grid-gap-col); row-gap: var(--li-grid-gap-row); align-items: start; }
  /* Section header: heading gets the room (avoids cramped/orphaned headings);
     supporting intro sits in the narrower right column. */
  .grid-2--1-2 { grid-template-columns: 1.35fr 1fr; }
  .grid-2--bottom { align-items: end; }

  @media (max-width: 860px) {
    .grid-2, .grid-2--1-2 { grid-template-columns: 1fr; row-gap: 2rem; }
  }

  .stack > * + * { margin-top: var(--li-space-md); }
  .measure { max-width: 44ch; }
  .measure-wide { max-width: 60ch; }
}

/* ------------------------------------------------------------ components -- */
@layer components {

  /* ---- Eyebrow / lead / accent ---- */
  .eyebrow {
    display: inline-block; font-family: var(--li-font-display);
    font-size: var(--li-text-small); font-weight: var(--li-weight-semibold);
    letter-spacing: var(--li-tracking-eyebrow); color: var(--li-blue);
  }
  .section--blue .eyebrow, .section--navy .eyebrow, .hero .eyebrow { color: var(--li-green); }
  .lead { font-size: var(--li-text-medium); line-height: 1.55; color: inherit; }
  .prose p + p { margin-top: 1.25em; }
  /* Article rhythm: headings get clear air above so they read as new sections,
     not as text crammed onto the previous paragraph. */
  .prose > :first-child { margin-top: 0; }
  .prose h2 { font-size: var(--li-h3); line-height: 1.2; margin-top: 2.4em; margin-bottom: .55em; }
  .prose h3 { font-size: var(--li-h4); line-height: 1.25; margin-top: 2em; margin-bottom: .5em; }
  .prose h4 { font-size: var(--li-text-large); line-height: 1.3; margin-top: 1.75em; margin-bottom: .45em; }
  .prose ul, .prose ol { margin-top: 1.25em; padding-left: 1.3em; }
  .prose li + li { margin-top: .4em; }
  .prose img { display: block; width: 100%; height: auto; border-radius: var(--li-radius-m); margin-block: 2em; }
  .prose blockquote, .prose .quote { margin-block: 2em; }
  .prose hr { border: 0; border-top: 1px solid var(--li-navy-10); margin-block: 2.5em; }
  .accent { color: var(--li-blue); font-style: normal; }
  .section--blue .accent, .section--navy .accent, .hero .accent, .accent--green { color: var(--li-green); }

  /* ---- Buttons ---- */
  .button {
    --_bg: var(--li-blue); --_fg: #fff; --_bd: var(--li-blue);
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .75rem 1.5rem; border: 1px solid var(--_bd); border-radius: var(--li-radius-s);
    background: var(--_bg); color: var(--_fg);
    font-family: var(--li-font-display); font-size: 1rem; font-weight: var(--li-weight-medium);
    line-height: 1.2; position: relative; overflow: hidden;
    transition: background .25s var(--li-ease-out), color .25s var(--li-ease-out), border-color .25s var(--li-ease-out), transform .25s var(--li-ease-out);
  }
  .button__text { position: relative; z-index: 2; }
  .button__icon { display: inline-flex; width: 1.25rem; height: 1.25rem; transition: transform .25s var(--li-ease-out); }
  .button:hover { background: var(--li-blue-80); transform: translateY(-1px); }
  .button:hover .button__icon { transform: translate(2px, -2px); }

  .button--outlined { --_bg: transparent; --_fg: var(--li-blue); --_bd: var(--li-blue); }
  .button--outlined:hover { background: var(--li-blue); color: #fff; }
  .section--blue .button--outlined, .section--navy .button--outlined, .hero .button--outlined { --_fg: #fff; --_bd: rgba(255,255,255,.55); }
  .section--blue .button--outlined:hover, .section--navy .button--outlined:hover, .hero .button--outlined:hover { background: #fff; color: var(--li-blue); border-color: #fff; }

  .button--dark { --_bg: var(--li-green); --_fg: var(--li-navy); --_bd: var(--li-green); }
  .button--dark:hover { background: var(--li-green-80); color: var(--li-navy); }

  .button--text {
    --_bg: transparent; --_fg: var(--li-blue); --_bd: transparent;
    padding-inline: 0; overflow: visible;
  }
  .button--text:hover { background: transparent; color: var(--li-blue-80); }
  .section--blue .button--text, .section--navy .button--text, .hero .button--text { --_fg: var(--li-green); }

  .button-group { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }

  /* ---- Navbar ---- */
  .nav {
    position: sticky; top: 0; z-index: 100;
    background: var(--li-blue); border-bottom: 2px solid var(--li-light-blue);
    transition: transform .35s var(--li-ease-out), background .3s var(--li-ease-out);
  }
  .nav.is-hidden { transform: translateY(-100%); }
  .nav__inner {
    display: flex; align-items: center; gap: 1.5rem;
    max-width: var(--li-container); margin-inline: auto;
    min-height: var(--li-navbar-h); padding-inline: var(--li-pad-global);
  }
  .nav__logo { display: inline-flex; align-items: center; }
  .nav__logo-img { height: 2rem; width: auto; }
  .nav__menu { display: flex; align-items: center; gap: .25rem; margin-inline-start: auto; }
  .nav__link {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .5rem 1rem; color: #fff; font-family: var(--li-font-display);
    font-weight: var(--li-weight-medium); background: none; border: 0;
    border-radius: var(--li-radius-s); transition: color .2s, background .2s;
  }
  .nav__link:hover, .nav__link.is-active { color: var(--li-green); }
  .nav__caret { transition: transform .25s var(--li-ease-out); }

  .nav__item--has-dropdown { position: relative; }
  .nav__dropdown {
    position: absolute; top: calc(100% + .5rem); left: 0; min-width: 16rem;
    background: #fff; border-radius: var(--li-radius-s); padding: .75rem;
    box-shadow: 0 20px 45px rgba(41,56,69,.18); display: grid; gap: .15rem;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .nav__item--has-dropdown.is-open .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__item--has-dropdown.is-open .nav__caret { transform: rotate(180deg); }
  .nav__dropdown-link { padding: .6rem .85rem; border-radius: var(--li-radius-s); color: var(--li-navy); font-weight: var(--li-weight-medium); transition: background .18s, color .18s; }
  .nav__dropdown-link:hover, .nav__dropdown-link.is-active { background: var(--li-navy-5); color: var(--li-blue); }

  .nav__actions { display: flex; align-items: center; gap: 1rem; }
  .nav__cta { white-space: nowrap; }
  .nav__toggle { display: none; flex-direction: column; gap: 5px; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; background: none; border: 0; }
  .nav__toggle-bar { display: block; width: 22px; height: 2px; background: #fff; transition: transform .3s var(--li-ease-out), opacity .2s; }
  .nav.is-menu-open .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-menu-open .nav__toggle-bar:nth-child(2) { opacity: 0; }
  .nav.is-menu-open .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  @media (max-width: 991px) {
    .nav__menu {
      position: fixed; inset: var(--li-navbar-h) 0 auto 0; flex-direction: column; align-items: stretch;
      gap: .25rem; background: var(--li-blue); padding: 1.25rem var(--li-pad-global) 2rem;
      border-bottom: 2px solid var(--li-light-blue); margin: 0;
      transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity .25s, transform .25s, visibility .25s; max-height: calc(100dvh - var(--li-navbar-h)); overflow: auto;
    }
    .nav.is-menu-open .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
    .nav__link { padding: .75rem .5rem; font-size: 1.05rem; }
    .nav__dropdown { position: static; box-shadow: none; background: rgba(255,255,255,.06); opacity: 1; visibility: visible; transform: none; padding: .25rem .5rem; margin-top: .25rem; display: none; }
    .nav__item--has-dropdown.is-open .nav__dropdown { display: grid; }
    .nav__dropdown-link { color: #fff; }
    .nav__dropdown-link:hover, .nav__dropdown-link.is-active { background: rgba(255,255,255,.1); color: var(--li-green); }
    .nav__cta { display: none; }
    .nav__toggle { display: inline-flex; margin-inline-start: auto; }
    .nav__actions { margin-inline-start: auto; }
  }

  /* ---- Hero (home + inner page heads) ----
     HOME: headline fills the left column, lead + actions occupy the right and
     bottom-align to the headline baseline, then a full-width banner. The two
     columns fill the whole width so there is no dead gutter and no empty half. */
  .hero { background: var(--li-blue); color: #fff; overflow: hidden; }
  .hero__inner { padding-block: clamp(3.75rem, 2rem + 6vw, 5.75rem) clamp(3.5rem, 2rem + 6vw, 6rem); }
  .hero .eyebrow { display: block; }
  .hero__head { display: grid; grid-template-columns: 1.35fr 1fr; column-gap: clamp(2rem, 4vw, 4.5rem); align-items: end; }
  .hero__headline { min-width: 0; }
  .hero__title { font-size: var(--li-h1); max-width: none; margin-top: 1.1rem; text-wrap: balance; }
  .hero__aside { min-width: 0; display: flex; flex-direction: column; gap: 1.85rem; padding-bottom: .35rem; }
  .hero__lead { font-size: var(--li-text-medium); color: rgba(255,255,255,.85); max-width: 42ch; }
  .hero__actions { margin: 0; }
  .hero__banner { margin-top: clamp(2.75rem, 1rem + 5vw, 4.5rem); border-radius: var(--li-radius-l); overflow: hidden; }
  .hero__banner img { width: 100%; height: auto; display: block; }

  /* Inner-page heads inherit the home 2-col head (headline fills its column,
     lead + actions bottom-align); only the vertical rhythm differs. */
  .hero--inner .hero__inner { padding-block: clamp(5rem, 3rem + 7vw, 7rem) clamp(3rem, 2rem + 4vw, 4.5rem); }
  .hero--inner .hero__lead { max-width: 46ch; }
  @media (max-width: 860px) {
    .hero__head, .hero--inner .hero__head { grid-template-columns: 1fr; row-gap: 1.75rem; align-items: start; }
    .hero__aside { padding-bottom: 0; }
    .hero__title, .hero--inner .hero__title, .hero__lead, .hero--inner .hero__lead { max-width: none; }
  }

  /* ---- Feature grid (numbered NN items) ---- */
  .features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem 2rem; }
  .features--3 { grid-template-columns: repeat(3, 1fr); }
  .features--2 { grid-template-columns: repeat(2, 1fr); }
  .feature { padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
  .feature__num { font-family: var(--li-font-display); font-size: var(--li-text-small); font-weight: var(--li-weight-semibold); color: var(--li-blue); letter-spacing: .06em; }
  .section--blue .feature__num, .section--navy .feature__num { color: var(--li-green); }
  .feature__title { margin-top: .6rem; font-size: var(--li-h6); font-weight: var(--li-weight-semibold); }
  .feature__text { margin-top: .5rem; font-size: var(--li-text-regular); color: var(--li-ink-soft); }
  .section--blue .feature__text, .section--navy .feature__text { color: rgba(255,255,255,.8); }
  .feature__link { margin-top: .75rem; display: inline-flex; }
  @media (max-width: 991px) { .features { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .features, .features--3, .features--2 { grid-template-columns: 1fr; } }

  /* ---- Split section (sticky aside + body list) ---- */
  .split { display: grid; grid-template-columns: 1fr 1.3fr; column-gap: var(--li-grid-gap-col); row-gap: 2.5rem; align-items: start; }
  .split__aside { position: sticky; top: calc(var(--li-navbar-h) + 2rem); }
  @media (max-width: 991px) { .split { grid-template-columns: 1fr; } .split__aside { position: static; } }

  /* Feature list: bold term — description */
  .feature-list { display: grid; gap: 1rem; }
  .feature-list__item { display: grid; gap: .25rem; padding-block: 1rem; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
  .feature-list__term { font-weight: var(--li-weight-semibold); font-size: var(--li-text-medium); }
  .feature-list__desc { color: var(--li-ink-soft); }

  /* Dash list */
  .list-dash { display: grid; gap: .5rem; }
  .list-dash li { position: relative; padding-left: 1.25rem; }
  .list-dash li::before { content: ""; position: absolute; left: 0; top: .7em; width: .6rem; height: 2px; background: var(--li-blue); }
  .section--blue .list-dash li::before, .section--navy .list-dash li::before { background: var(--li-green); }

  /* ---- Chips ---- */
  .chips { display: flex; flex-wrap: wrap; gap: .6rem .6rem; }
  .chip {
    display: inline-flex; align-items: center; padding: .5rem 1rem; border-radius: var(--li-radius-pill);
    background: var(--li-blue-10); color: var(--li-blue); font-weight: var(--li-weight-medium); font-size: var(--li-text-small);
  }
  .section--blue .chip, .section--navy .chip { background: rgba(255,255,255,.1); color: #fff; }

  /* ---- Quote band ---- */
  .quote { border-left: 3px solid var(--li-green); padding-left: 1.5rem; font-size: var(--li-h4); font-weight: var(--li-weight-medium); line-height: 1.4; max-width: 40ch; }

  /* ---- CTA band ---- */
  .cta { display: grid; gap: 1.25rem; max-width: 60rem; }
  .cta__title { font-size: var(--li-h3); max-width: 28ch; }
  .cta__body { font-size: var(--li-text-medium); color: rgba(255,255,255,.85); max-width: 52ch; }

  /* ---- Insight cards ---- */
  .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .card { display: grid; grid-template-rows: auto 1fr; background: #fff; border-radius: var(--li-radius-m); overflow: hidden; border: 1px solid var(--li-navy-10); }
  .card__media { aspect-ratio: 16 / 10; overflow: hidden; }
  .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--li-ease-out); }
  .card:hover .card__media img { transform: scale(1.05); }
  .card__body { display: grid; gap: .6rem; padding: 1.25rem; align-content: start; }
  .card__cat { justify-self: start; padding: .2rem .6rem; border-radius: var(--li-radius-s); background: var(--li-blue-10); color: var(--li-blue); font-size: var(--li-text-tiny); font-weight: var(--li-weight-semibold); }
  .card__title { font-size: var(--li-h6); color: var(--li-navy); }
  .card__excerpt { font-size: var(--li-text-small); color: var(--li-ink-soft); }
  @media (max-width: 991px) { .cards { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }

  /* ---- Logo marquee ---- */
  .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .marquee__track { display: flex; gap: 4rem; width: max-content; will-change: transform; }
  .marquee__item { display: grid; place-items: center; height: 3rem; }
  .marquee__item img { height: 100%; width: auto; opacity: .85; }

  /* ---- Contact ---- */
  .contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; column-gap: var(--li-grid-gap-col); row-gap: 2.5rem; align-items: start; }
  @media (max-width: 991px) { .contact-grid { grid-template-columns: 1fr; } }
  .contact-meta { display: grid; gap: 1.25rem; }
  .contact-meta__item { display: grid; gap: .15rem; padding-block: 1rem; border-top: 1px solid var(--li-navy-10); }
  .contact-meta__label { font-size: var(--li-text-small); color: var(--li-ink-soft); }
  .contact-meta__value { font-size: var(--li-text-medium); font-weight: var(--li-weight-medium); }

  .form { display: grid; gap: 1rem; }
  .form__row { display: grid; gap: .4rem; }
  .form__label { font-size: var(--li-text-small); font-weight: var(--li-weight-medium); }
  .form__input, .form__select, .form__textarea {
    width: 100%; padding: .8rem 1rem; border: 1px solid var(--li-navy-30); border-radius: var(--li-radius-s);
    background: #fff; color: var(--li-ink); font: inherit; font-size: var(--li-text-regular);
    transition: border-color .2s, box-shadow .2s;
  }
  .form__input:focus, .form__select:focus, .form__textarea:focus { border-color: var(--li-blue); box-shadow: 0 0 0 3px var(--li-blue-10); outline: none; }
  .form__textarea { min-height: 9rem; resize: vertical; }
  .form__honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .form__note { font-size: var(--li-text-small); color: var(--li-ink-soft); }
  .form__status { font-size: var(--li-text-small); }
  .form__status.is-ok { color: var(--li-success); }
  .form__status.is-err { color: var(--li-error); }

  /* ---- Footer ---- */
  .footer { background: var(--li-blue); color: #fff; padding-block: clamp(3rem, 1.5rem + 6vw, 5rem); }
  .footer__top { display: grid; grid-template-columns: 1.2fr 2fr; gap: 3rem; }
  .footer__logo-img { height: 2rem; width: auto; }
  .footer__tagline { margin-top: 1.25rem; max-width: 40ch; color: rgba(255,255,255,.8); font-size: var(--li-text-small); }
  .footer__geo { margin-top: 1rem; letter-spacing: .12em; font-size: var(--li-text-small); color: var(--li-green); }
  .footer__social { display: flex; gap: .75rem; margin-top: 1.5rem; }
  .footer__social-link { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--li-radius-s); background: rgba(255,255,255,.1); color: #fff; transition: background .2s; }
  .footer__social-link:hover { background: rgba(255,255,255,.22); }
  .footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .footer__col-title { font-size: .825rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8); font-weight: var(--li-weight-semibold); }
  .footer__links { margin-top: 1rem; display: grid; gap: .6rem; }
  .footer__link { color: rgba(255,255,255,.9); font-size: var(--li-text-small); transition: color .2s; }
  .footer__link:hover { color: var(--li-green); }
  .footer__link--static { color: rgba(255,255,255,.65); }
  .footer__divider { height: 1px; background: rgba(255,255,255,.15); margin-block: 2.5rem; }
  .footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
  .footer__copyright, .footer__credit { font-size: var(--li-text-small); color: rgba(255,255,255,.7); }
  .footer__legal { display: flex; gap: 1.25rem; }
  .footer__legal-link { font-size: var(--li-text-small); color: #fff; }
  .footer__legal-link:hover { color: var(--li-green); }
  @media (max-width: 767px) { .footer__top { grid-template-columns: 1fr; } .footer__nav { grid-template-columns: repeat(2, 1fr); } }
}

/* ---------------------------------------------------------- utilities -- */
@layer utilities {
  .text-white { color: #fff; }
  .text-green { color: var(--li-green); }
  .text-blue  { color: var(--li-blue); }
  .text-soft  { color: var(--li-ink-soft); }
  .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; }
  .mt-sm { margin-top: var(--li-space-sm); } .mt-md { margin-top: var(--li-space-md); } .mt-lg { margin-top: var(--li-space-lg); }

  /* Scroll-reveal + hero-entrance initial states (only when JS is on; GSAP
     animates them in). No-JS shows everything. Prevents first-paint flash. */
  html.js [data-reveal],
  html.js [data-hero-in] { opacity: 0; will-change: transform, opacity; }
  html.js [data-reveal="up"]   { transform: translateY(2.5rem); }
  html.js [data-reveal="left"] { transform: translateX(2.5rem); }
  html.js [data-reveal="right"]{ transform: translateX(-2.5rem); }
  html.js [data-hero-in]       { transform: translateY(2.5rem); }
}