/*
 * Hevel Capital - motion layer
 *
 * Adds transitions, hovers and scroll reveals on top of the existing design.
 * It never changes layout, colours or type at rest.
 *
 * Scoping:
 *   html.hv-fx      the layer is switched on (visual polish, no movement)
 *   html.hv-motion  hv-fx + the visitor has not asked for reduced motion
 *   html.hv-ready   hevel-motion.js has started
 *
 * The switch lives in the "Hevel Motion" snippet (Elementor > Custom Code).
 * Source: motion/src in the project folder. Rebuild with `node motion/build.js`.
 */

:root {
  --hv-ease: cubic-bezier(.16, 1, .3, 1);
  --hv-ease-io: cubic-bezier(.65, 0, .35, 1);
  --hv-gold: #d3ad78;
  --hv-orange: #e07a1f;
  --hv-navy: #162f54;
  --hv-ink: #000916;
}

/* ==========================================================================
   Page transitions (the @view-transition opt-in is added by the snippet)
   ========================================================================== */

@keyframes hv-vt-out { to { opacity: 0; } }
@keyframes hv-vt-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } }

::view-transition-old(root) { animation: hv-vt-out .25s ease both; }
::view-transition-new(root) { animation: hv-vt-in .5s var(--hv-ease) both; }

html.hv-motion .hv-site-header { view-transition-name: hv-header; }

/* ==========================================================================
   Global polish
   ========================================================================== */

html.hv-motion { scroll-behavior: smooth; }

html.hv-fx ::selection {
  background: rgba(211, 173, 120, .35);
}

html.hv-fx :is(a, button, [tabindex]):focus-visible {
  outline: none;
}

html.hv-fx.hv-kbd :is(a, button, [tabindex]):focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 3px;
}

html.hv-fx .elementor-form :is(input, textarea, select):focus-visible {
  outline: none;
}

/* The radio inputs are visually hidden, so show keyboard focus on the pill. */
html.hv-fx .elementor-field-option input:focus-visible + label {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Lazy images fade in instead of popping. */
html.hv-motion img.hv-img {
  transition: opacity .7s ease !important;
}

html.hv-motion img.hv-img:not(.hv-img-on) {
  opacity: 0 !important;
}

/* ==========================================================================
   Split headings (reveal type "words")
   ========================================================================== */

/* Each word rises out of its own mask. The mask box is exactly one line tall
   and bottom-aligned, so line breaks and baselines match the plain heading. */
html.hv-motion .hv-split .hv-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0 .08em .1em;
  margin: 0 -.08em -.1em;
}

html.hv-motion .hv-split .hv-wi {
  display: inline-block;
  transform: translate3d(0, 118%, 0);
  transition: transform .9s var(--hv-ease);
  transition-delay: calc(var(--hv-d, 0s) + var(--hv-i, 0) * var(--hv-ws, .055s));
}

html.hv-motion .hv-split.hv-in .hv-wi {
  transform: none;
}

/* Once landed, drop the masks so nothing is ever clipped at rest. */
html.hv-motion .hv-split.hv-done .hv-w {
  overflow: visible;
}

/* One gold light sweep across "Investable." */
@keyframes hv-shine {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

html.hv-motion .hero-copy h1 em .hv-wi.hv-shine {
  background-image: linear-gradient(105deg, currentColor 0 40%, #fff3d9 50%, currentColor 60% 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: .14em;
  margin-right: -.14em;
  animation: hv-shine 1.5s var(--hv-ease-io) forwards;
}

/* ==========================================================================
   Divider lines that draw in (reveal type "mark", or on another target)
   ========================================================================== */

html.hv-motion :is(.ceiling-bridge-list, .footer-bottom, .block--topline) {
  border-top-color: transparent !important;
}

html.hv-motion :is(.block--divided, .cadence-item:not(:last-child)) {
  border-bottom-color: transparent !important;
}

html.hv-motion :is(.ceiling-bridge-list, .footer-bottom, .block--topline)::before,
html.hv-motion :is(.block--divided, .cadence-item:not(:last-child))::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.2s var(--hv-ease) .1s;
  pointer-events: none;
}

html.hv-motion :is(.ceiling-bridge-list, .footer-bottom, .block--topline)::before { top: -1px; }
html.hv-motion :is(.block--divided, .cadence-item:not(:last-child))::after { bottom: -1px; }

html.hv-motion .ceiling-bridge-list::before { background: #eee; }
html.hv-motion .footer-bottom::before { background: rgba(255, 255, 255, .08); }
html.hv-motion :is(.block--topline)::before,
html.hv-motion :is(.block--divided, .cadence-item:not(:last-child))::after { background: #e6e4e0; }

html.hv-motion .hv-in:is(.ceiling-bridge-list, .footer-bottom, .block--topline)::before,
html.hv-motion .hv-in:is(.block--divided, .cadence-item:not(:last-child))::after {
  transform: scaleX(1);
}

/* Founder quote: the gold rule grows, then the words appear. */
html.hv-motion .founder-quote {
  position: relative;
  border-left-color: transparent !important;
}

html.hv-motion .founder-quote::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 2px;
  background: #e0a457;
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .8s var(--hv-ease) var(--hv-d, 0s);
}

html.hv-motion .founder-quote:not(.hv-in) { color: transparent; }
html.hv-motion .founder-quote.hv-in::before { transform: scaleY(1); }
html.hv-motion .founder-quote.hv-in:not(.hv-done) {
  transition: color .8s ease calc(var(--hv-d, 0s) + .45s);
}

/* ==========================================================================
   Living backgrounds: a slow zoom while the section is on screen
   ========================================================================== */

@keyframes hv-kb {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

html.hv-motion :is(.hero-bg, .breadcrumb-bg, .touch-bg, .nlg-bg, .whycs-media) {
  overflow: hidden;
}

html.hv-motion :is(.hero-bg, .breadcrumb-bg, .touch-bg) img {
  animation: hv-kb 22s ease-in-out infinite alternate;
  animation-play-state: paused;
  will-change: transform;
}

html.hv-motion .hv-inview :is(.hero-bg, .breadcrumb-bg, .touch-bg) img {
  animation-play-state: running;
}

/* "Live" details: a soft pulse on the banner dot, light travelling down the
   thin guide lines, and a gentle float on the NLG photo. All pause off screen. */
@keyframes hv-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(211, 173, 120, .55); }
  60% { box-shadow: 0 0 0 7px rgba(211, 173, 120, 0); }
}

html.hv-motion .hv-inview :is(.hero-eyebrow, .breadcrumb-eyebrow) .dot {
  animation: hv-dot-pulse 2.6s ease-in-out 1.6s infinite;
}

@keyframes hv-travel {
  0% { top: -90px; opacity: 0; }
  4% { opacity: 1; }
  30% { opacity: 1; }
  36% { top: 100%; opacity: 0; }
  100% { top: 100%; opacity: 0; }
}

html.hv-motion :is(.hero-guides .v-line, .breadcrumb-guides .v-line, .touch-lines span).hv-done::after {
  content: "";
  position: absolute;
  top: -90px;
  left: -1px;
  width: 3px;
  height: 90px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(211, 173, 120, 0), rgba(211, 173, 120, .9), rgba(211, 173, 120, 0));
  opacity: 0;
  pointer-events: none;
  animation: hv-travel 8s linear infinite;
  animation-play-state: paused;
}

html.hv-motion :is(.v-line--right, .touch-lines span:last-child).hv-done::after {
  animation-delay: 4s;
}

html.hv-motion .hv-inview :is(.v-line, .touch-lines span).hv-done::after {
  animation-play-state: running;
}

@keyframes hv-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -12px, 0); }
}

html.hv-motion .nlg-section.hv-inview .nlg-image.hv-done img {
  animation: hv-float 6s ease-in-out infinite;
}

/* Parallax: hevel-motion.js writes --hv-py while the section is in view. */
html.hv-motion :is(.nlg-bg, .whycs-media) img {
  transform: translate3d(0, var(--hv-py, 0px), 0) scale(1.1);
  will-change: transform;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

html.hv-fx :is(.hv-btn-primary, .hv-btn-outline, .hv-btn-contact, .hv-btn-send, .hv-contact-form, .hv-newsletter-form) .elementor-button.elementor-button:hover {
  opacity: 1;
}

html.hv-motion :is(.hv-btn-primary, .hv-btn-outline, .hv-btn-contact, .hv-btn-send, .hv-contact-form, .hv-newsletter-form) .elementor-button {
  transition:
    transform .35s var(--hv-ease),
    box-shadow .35s var(--hv-ease),
    background-color .35s ease,
    border-color .35s ease,
    color .35s ease,
    opacity .2s ease;
}

html.hv-motion :is(.hv-btn-primary, .hv-btn-outline, .hv-btn-contact, .hv-btn-send, .hv-contact-form, .hv-newsletter-form) .elementor-button:hover {
  transform: translate3d(0, -2px, 0);
}

html.hv-motion :is(.hv-btn-primary, .hv-btn-outline, .hv-btn-contact, .hv-btn-send, .hv-contact-form, .hv-newsletter-form) .elementor-button:active {
  transform: scale(.98);
  transition-duration: .1s;
}

html.hv-motion .elementor-button .arrow {
  transition: transform .35s var(--hv-ease);
}

html.hv-motion .elementor-button:hover .arrow {
  transform: translate3d(4px, 0, 0);
}

/* White buttons on dark cards */
html.hv-fx :is(.hv-btn-primary, .hv-newsletter-form) .elementor-button.elementor-button:hover {
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .6), 0 0 0 4px rgba(255, 255, 255, .1);
}

/* Outline buttons on light cards */
html.hv-fx .hv-btn-outline .elementor-button.elementor-button:hover {
  border-color: rgba(22, 47, 84, .35);
  box-shadow: 0 10px 22px -12px rgba(22, 47, 84, .4);
}

/* Navy "Send Message" */
html.hv-fx :is(.hv-btn-send, .hv-contact-form) .elementor-button.elementor-button:hover {
  box-shadow: 0 14px 28px -12px rgba(22, 47, 84, .6);
}

/* Header "Contact Us" */
html.hv-fx body:not(.hv-page-contact) .hv-btn-contact .elementor-button.elementor-button:hover {
  background-color: #fff;
}

html.hv-fx .hv-btn-contact .elementor-button.elementor-button:hover {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), 0 10px 24px -10px rgba(0, 0, 0, .5);
}

/* Form buttons while sending: a small ring replaces the arrow. */
@keyframes hv-spin { to { transform: rotate(360deg); } }

html.hv-fx .elementor-form-waiting button[type="submit"] { cursor: progress; }
html.hv-fx .elementor-form-waiting button[type="submit"] .elementor-form-spinner { display: none; }

html.hv-fx .elementor-form-waiting button[type="submit"] .arrow {
  position: relative;
  color: transparent !important;
}

html.hv-fx .elementor-form-waiting button[type="submit"] .arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 2px solid var(--hv-spin-track, rgba(255, 255, 255, .35));
  border-top-color: var(--hv-spin-head, #fff);
  animation: hv-spin .7s linear infinite;
}

html.hv-fx .hv-newsletter-form {
  --hv-spin-track: rgba(22, 47, 84, .25);
  --hv-spin-head: #162f54;
}

@keyframes hv-msg {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
}

html.hv-motion .elementor-message {
  animation: hv-msg .5s var(--hv-ease) both;
}

/* ==========================================================================
   Header
   ========================================================================== */

html.hv-fx .hv-nav a.elementor-item::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 9px;
  height: 1px;
  background: currentColor;
  opacity: .75;
  transform: scaleX(0);
  transition: transform .35s var(--hv-ease);
  pointer-events: none;
}

html.hv-fx .hv-nav a.elementor-item:hover::after,
html.hv-fx .hv-nav a.elementor-item:focus-visible::after,
html.hv-fx .hv-nav a.elementor-item.elementor-item-active::after,
html.hv-fx .hv-nav a.elementor-item.hv-current::after {
  transform: scaleX(1);
}

/* Current page in the same blue the design uses for Home. */
html.hv-fx .hv-nav a.elementor-item.hv-current {
  color: #86b3fe !important;
}


/* Logo */
html.hv-fx :is(.logo, .footer-logo) a:hover { opacity: 1; }

html.hv-motion :is(.logo, .footer-logo) a img {
  transition: transform .4s var(--hv-ease), filter .4s ease;
}

html.hv-motion :is(.logo, .footer-logo) a:hover img {
  transform: scale(1.04);
  filter: brightness(1.18);
}

/* Sticky header once the hero has scrolled away (tablet and desktop). */
@keyframes hv-drop {
  from { transform: translate3d(0, -100%, 0); }
}

@media (min-width: 641px) {
  html.hv-fx.hv-stuck .hv-site-header {
    position: fixed;
    top: var(--wp-admin--admin-bar--height, 0px);
    z-index: 100;
    background: rgba(0, 9, 22, .8);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 12px 32px -16px rgba(0, 0, 0, .6);
  }

  html.hv-motion.hv-stuck .hv-site-header {
    animation: hv-drop .5s var(--hv-ease);
  }

  html.hv-fx .hv-site-header .navbar {
    transition: height .35s var(--hv-ease);
  }

  html.hv-fx.hv-stuck .hv-site-header .navbar {
    height: 68px;
  }
}

/* ==========================================================================
   Phones: one header on every page, with a hamburger menu
   ========================================================================== */

/* Without the layer the phone header sits on the page background, which is
   white on Home and navy elsewhere. Give it the navy everywhere. */
@media (max-width: 640px) {
  html:not(.hv-fx) .hv-site-header {
    background-color: #000916;
  }
}

.hv-burger,
.hv-mmenu {
  display: none;
}

@media (max-width: 640px) {
  /* Floats over the dark banner at the top of every page, like on desktop. */
  html.hv-fx .hv-site-header {
    position: fixed;
    top: var(--wp-admin--admin-bar--height, 0px);
    left: 0;
    right: 0;
    z-index: 100;
    background-color: transparent;
    transition: background-color .35s ease, box-shadow .35s ease;
  }

  html.hv-fx .e-con.hero-section,
  html.hv-fx .e-con.breadcrumb-section {
    padding-top: 64px;
  }

  /* Pages without a dark banner keep a solid bar and room for it. */
  html.hv-fx body:not(:has(.hero-section, .breadcrumb-section)) {
    padding-top: 64px;
  }

  html.hv-fx.hv-stuck .hv-site-header,
  html.hv-fx.hv-menu-open .hv-site-header,
  html.hv-fx body:not(:has(.hero-section, .breadcrumb-section)) .hv-site-header {
    background-color: rgba(0, 9, 22, .92);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .6);
  }

  html.hv-fx.hv-menu-open .hv-site-header {
    box-shadow: none;
  }

  html.hv-fx .hv-site-header .navbar {
    height: 64px;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 0 72px 0 20px;
  }

  html.hv-fx .hv-site-header .hv-nav {
    display: none !important;
  }

  html.hv-fx .hv-site-header .hv-btn-contact {
    margin-left: auto;
  }

  html.hv-fx .hv-site-header .hv-btn-contact .elementor-button {
    padding: 9px 14px;
    font-size: 14px;
    line-height: 18px;
  }

  /* Hamburger */
  html.hv-fx .hv-burger {
    position: absolute;
    top: 50%;
    right: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
    cursor: pointer;
    transition: background-color .3s ease, border-color .3s ease;
  }

  html.hv-fx .hv-burger:hover {
    background: rgba(255, 255, 255, .12);
  }

  .hv-burger span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .4s var(--hv-ease), opacity .2s ease;
  }

  html.hv-menu-open .hv-burger span:nth-child(1) { transform: translate3d(0, 7px, 0) rotate(45deg); }
  html.hv-menu-open .hv-burger span:nth-child(2) { opacity: 0; }
  html.hv-menu-open .hv-burger span:nth-child(3) { transform: translate3d(0, -7px, 0) rotate(-45deg); }

  /* Menu panel */
  html.hv-fx .hv-mmenu {
    position: fixed;
    inset: 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    padding: calc(64px + var(--wp-admin--admin-bar--height, 0px) + 28px) 28px 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
      radial-gradient(120% 55% at 100% 0%, rgba(47, 111, 208, .16), rgba(47, 111, 208, 0) 60%),
      #000916;
    color: #fff;
    visibility: hidden;
    opacity: 0;
    transition: opacity .35s ease, visibility 0s linear .35s;
  }

  html.hv-menu-open .hv-mmenu {
    visibility: visible;
    opacity: 1;
    transition: opacity .35s ease;
  }

  html.hv-menu-open,
  html.hv-menu-open body {
    overflow: hidden;
  }
}

/* The site's thin guide lines, framing the menu */
.hv-mmenu::before,
.hv-mmenu::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0));
  pointer-events: none;
}

.hv-mmenu::before { left: 14px; }
.hv-mmenu::after { right: 14px; }

.hv-mm-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hv-mm-link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: #fff;
  font-family: 'Fraunces', serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .3px;
  text-decoration: none;
}

.hv-mm-num {
  min-width: 22px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--hv-gold);
}

.hv-mm-label { flex: 1; }

.hv-mm-arrow {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  color: rgba(255, 255, 255, .45);
  transition: transform .35s var(--hv-ease), color .35s ease;
}

.hv-mm-link:hover .hv-mm-arrow,
.hv-mm-link:focus-visible .hv-mm-arrow {
  transform: translate3d(4px, 0, 0);
  color: var(--hv-gold);
}

.hv-mm-link.is-current .hv-mm-label {
  font-style: italic;
  color: var(--hv-gold);
}

.hv-mm-foot {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: auto;
  padding-top: 36px;
}

.hv-mm-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 8px;
  background: #fff;
  color: var(--hv-navy);
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
}

.hv-mm-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}

.hv-mm-contact a {
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
}

.hv-mm-contact a:hover { color: #fff; }

/* Links slide in one after another as the menu opens. */
html.hv-motion .hv-mm-item {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .3s ease, transform .5s var(--hv-ease);
}

html.hv-motion.hv-menu-open .hv-mm-item {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .7s var(--hv-ease);
  transition-delay: calc(.1s + var(--hv-i, 0) * .06s);
}

/* Reading progress on Insight articles */
.hv-progress {
  position: fixed;
  top: var(--wp-admin--admin-bar--height, 0px);
  left: 0;
  right: 0;
  z-index: 101;
  height: 3px;
  pointer-events: none;
}

.hv-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #e0a457, var(--hv-gold));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ==========================================================================
   Cards and media
   ========================================================================== */

/* Zoom inside the frame: scale the photo and clip it back to its box. */
html.hv-motion :is(.ceiling-card, .roadmap-media, .insight-card-media) img {
  clip-path: inset(0);
  transition:
    transform .9s var(--hv-ease),
    clip-path .9s var(--hv-ease),
    opacity .7s ease;
}

html.hv-motion :is(.ceiling-card:hover, .roadmap-card:hover .roadmap-media, .insight-card:hover .insight-card-media) img {
  transform: scale(1.05);
  clip-path: inset(2.381%);
}

/* Capital ceiling cards */
html.hv-motion .ceiling-card-info {
  transition: transform .5s var(--hv-ease), box-shadow .5s var(--hv-ease);
}

html.hv-motion .ceiling-card:hover .ceiling-card-info {
  transform: translate3d(0, -6px, 0);
  box-shadow: 0 20px 38px -10px rgba(0, 0, 0, .22);
}

/* Solution blocks */
html.hv-fx :is(.solution-num, .solution-num .elementor-heading-title) {
  transition: color .4s ease;
}

html.hv-fx .solution-card:hover :is(.solution-num, .solution-num .elementor-heading-title) {
  color: var(--hv-orange);
}

html.hv-fx .solution-rule {
  transition: background-color .4s ease;
}

html.hv-fx .solution-card:hover .solution-rule {
  background-color: var(--hv-gold);
}

html.hv-motion .solution-card h4 {
  transition: transform .4s var(--hv-ease);
}

html.hv-motion .solution-card:hover h4 {
  transform: translate3d(4px, 0, 0);
}

/* Strips */
html.hv-fx .strip-item span,
html.hv-fx .strip-item .dots b {
  transition: color .35s ease, background-color .35s ease;
}

html.hv-fx .hero-strip .strip-item:hover span { color: #fff; }
html.hv-fx .strip-item:hover .dots b { background-color: var(--hv-gold); }

/* Audience cards */
html.hv-motion .audience-card {
  transition: transform .5s var(--hv-ease), box-shadow .5s var(--hv-ease);
}

html.hv-motion .audience-card:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: 0 26px 50px -24px rgba(22, 47, 84, .35);
}

html.hv-motion .audience-card-img img {
  transition: transform .9s var(--hv-ease), opacity .7s ease;
}

html.hv-motion .audience-card:hover .audience-card-img img {
  transform: scale(1.05);
}

@keyframes hv-pulse {
  50% { transform: scale(1.7); }
}

html.hv-motion .audience-card:hover .audience-tag .dot {
  animation: hv-pulse .6s var(--hv-ease);
}

/* Framed photos (What We Do, About mission) */
html.hv-motion .service-media img {
  transition: transform .6s var(--hv-ease), box-shadow .6s var(--hv-ease), opacity .7s ease;
}

html.hv-motion .service-media img:hover {
  transform: translate3d(0, -6px, 0) scale(1.01);
  box-shadow: 0 30px 60px -18px rgba(22, 47, 84, .32);
}

/* Insight cards */
html.hv-motion .insight-card {
  transition: transform .5s var(--hv-ease), box-shadow .5s var(--hv-ease);
}

html.hv-motion .insight-card:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: 0 24px 46px -24px rgba(22, 47, 84, .35);
}

html.hv-fx .insight-card h3 a,
html.hv-fx .roadmap-heading a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color .35s ease, color .35s ease;
}

html.hv-fx .insight-card:hover h3 a {
  text-decoration-color: rgba(22, 47, 84, .45);
}

/* Filter tabs */
html.hv-fx .hv-insight-tabs .e-filter-item {
  transition:
    border-color .35s ease,
    color .35s ease,
    background-color .35s ease,
    box-shadow .35s ease,
    transform .35s var(--hv-ease);
}

html.hv-motion .hv-insight-tabs .e-filter-item.hv-done:hover {
  transform: translate3d(0, -1px, 0);
  box-shadow: 0 8px 18px -10px rgba(22, 47, 84, .35);
}

html.hv-motion .hv-insight-grid .elementor-loop-container {
  transition: opacity .3s ease;
}

html.hv-motion .hv-insight-grid.hv-filtering .elementor-loop-container {
  opacity: .35;
}

/* Contact details cards */
html.hv-motion .details-card .details-icon img {
  transition: transform .45s var(--hv-ease);
}

html.hv-motion .details-card:hover .details-icon img {
  transform: translate3d(0, -2px, 0) rotate(-8deg);
}

.hv-copied {
  position: absolute;
  top: 10px;
  left: 50%;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--hv-navy);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, 4px, 0);
  transition: opacity .25s ease, transform .35s var(--hv-ease);
}

.hv-copied.is-on {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

/* Article media */
html.hv-motion :is(.article-figure, .cadence-item) img {
  transition: transform .6s var(--hv-ease), box-shadow .6s var(--hv-ease), opacity .7s ease;
}

html.hv-motion :is(.article-figure, .cadence-item) img:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: 0 22px 48px -12px rgba(0, 0, 0, .28);
}

html.hv-motion .criteria-diamond.hv-done {
  transition: transform .45s var(--hv-ease);
}

html.hv-motion .criteria-diamond.hv-done:hover {
  transform: rotate(45deg) scale(1.08);
}

/* ==========================================================================
   Forms
   ========================================================================== */

html.hv-fx .elementor-form .elementor-field {
  transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}

html.hv-fx .hv-contact-form .elementor-field-label {
  transition: color .3s ease;
}

html.hv-fx .hv-contact-form .elementor-field-group:focus-within > .elementor-field-label {
  color: var(--hv-orange);
}

html.hv-fx .hv-newsletter-form .elementor-field:focus {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .08);
}

html.hv-fx .hv-contact-form .elementor-field-option label {
  transition:
    border-color .3s ease,
    color .3s ease,
    background-color .3s ease,
    transform .3s var(--hv-ease);
}

html.hv-fx .hv-contact-form .elementor-field-option label:hover {
  border-color: #c9c5bd;
}

html.hv-motion .hv-contact-form .elementor-field-option label:hover {
  transform: translate3d(0, -1px, 0);
}

@keyframes hv-pop-in {
  40% { transform: scale(1.05); }
}

html.hv-motion .hv-contact-form .elementor-field-option input:checked + label {
  animation: hv-pop-in .4s var(--hv-ease);
}

/* ==========================================================================
   Footer
   ========================================================================== */

html.hv-fx .elementor .e-con.footer-col ul a,
html.hv-fx .elementor .e-con.footer-legal a,
html.hv-fx .footer-contact-item .elementor-heading-title {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color .2s ease, background-size .4s var(--hv-ease);
}

html.hv-fx .elementor .e-con.footer-col ul a:hover,
html.hv-fx .elementor .e-con.footer-legal a:hover,
html.hv-fx .footer-contact-item:hover .elementor-heading-title {
  background-size: 100% 1px;
}

html.hv-fx .elementor .e-con.footer-social a:hover {
  color: var(--hv-ink);
  background: var(--hv-gold);
}

html.hv-motion .elementor .e-con.footer-social a {
  transition: background .3s ease, color .3s ease, transform .35s var(--hv-ease);
}

html.hv-motion .elementor .e-con.footer-social a:hover {
  transform: translate3d(0, -2px, 0);
}

/* ==========================================================================
   Phones and tablets: swipe carousels and strip tickers
   ========================================================================== */

.hv-car-dots { display: none; }

@media (max-width: 900px) {
  html.hv-fx .hv-car {
    --hv-bleed: clamp(20px, 5.5vw, 80px);
    display: flex !important;
    /* Elementor containers default to a column; a carousel is a single row. */
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 16px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-left: calc(-1 * var(--hv-bleed));
    margin-right: calc(-1 * var(--hv-bleed));
    padding-left: var(--hv-bleed);
    padding-right: var(--hv-bleed);
    scroll-padding-inline: var(--hv-bleed);
  }

  html.hv-fx .hv-car::-webkit-scrollbar { display: none; }

  html.hv-fx .hv-car > * {
    flex: 0 0 min(80%, 400px) !important;
    width: min(80%, 400px) !important;
    max-width: none !important;
    scroll-snap-align: center;
  }

  html.hv-fx .ceiling-cards.hv-car {
    padding-bottom: 60px;
    margin-bottom: 8px;
  }

  html.hv-fx .audience-grid.hv-car {
    padding-top: 8px;
    padding-bottom: 28px;
  }

  html.hv-fx .hv-car-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 4px 0 8px;
  }

  .hv-car-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(22, 47, 84, .2);
    cursor: pointer;
    transition: width .35s var(--hv-ease), background-color .35s ease;
  }

  .hv-car-dots button.is-on {
    width: 22px;
    background: var(--hv-orange);
  }
}

/* hevel-motion.js sets --hv-mq-shift to the exact width of one set of labels,
   so the loop is seamless at any screen width. */
@keyframes hv-marquee {
  to { transform: translate3d(var(--hv-mq-shift, -50%), 0, 0); }
}

html.hv-motion .hv-mq-on {
  flex-wrap: nowrap !important;
  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);
}

html.hv-motion .hv-mq {
  display: flex;
  flex: none;
  width: max-content;
  animation: hv-marquee var(--hv-mq-dur, 34s) linear infinite;
  will-change: transform;
}

html.hv-motion .hv-mq:hover,
html.hv-motion .hv-mq:active,
html.hv-motion .hero-section:not(.hv-inview) .hv-mq {
  animation-play-state: paused;
}

html.hv-motion .hv-mq-a,
html.hv-motion .hv-mq-b {
  display: flex;
  flex: none;
}

/* Same bordered cells as the static row: four of them span roughly the width
   the row had before. */
html.hv-motion .hv-mq-on .strip-item {
  flex: 0 0 auto !important;
  width: clamp(220px, 23vw, 340px) !important;
  max-width: none !important;
  gap: 16px;
}

html.hv-motion .hv-mq-b .strip-item:first-child {
  border-left: 0;
}

/* Test mode (?hv_test=1): jump straight to the final state. */
html.hv-test *,
html.hv-test *::before,
html.hv-test *::after {
  transition: none !important;
  animation: none !important;
}

/* ==========================================================================
   Print: everything visible, nothing moving
   ========================================================================== */

@media print {
  html.hv-motion * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   Scroll reveals (generated from src/config.js - edit that file, not this)
   ========================================================================== */

html.hv-motion :is(
  .hero-eyebrow,
  .hero-copy p,
  .hero-content > .hv-btn-primary,
  .breadcrumb-eyebrow,
  .breadcrumb-text, .breadcrumb-meta,
  .ceiling-eyebrow, .solution-eyebrow, .audience-eyebrow, .nlg-eyebrow, .whycs-eyebrow,
  .details-inner > .service-eyebrow, .founder-intro > .service-eyebrow,
  .ceiling-text,
  .audience-text, .nlg-text, .details-company, .contact-sub,
  .founder-intro > .service-text,
  .whycs-inner > .whycs-text,
  .nlg-content > .hv-btn-primary,
  .ceiling-card,
  .ceiling-bridge,
  .solution-card,
  .audience-card,
  .touch-eyebrow,
  .touch-text,
  .touch-inner .hv-btn-primary, .touch-inner .hv-newsletter-form,
  .founder-card,
  .founder-photo-caption,
  .roadmap-card,
  .insight-card,
  .contact-card,
  .details-card,
  .pillar,
  .footer-top > .elementor-element,
  .hero-strip .strip-item,
  .ceiling-card-info,
  .ceiling-bridge-list > span,
  .solution-strip .strip-item,
  .mission-callout h4, .mission-callout p,
  .founder-tags li,
  .hv-insight-tabs .e-filter-item,
  .hv-contact-form .elementor-field-group,
  .criteria-chip,
  .cadence-item h4, .cadence-item p,
  .tile,
  .service-row:not(.service-row--reverse) > .service-copy,
  .mission-row > .mission-copy,
  .nlg-image,
  .service-row--reverse > .service-copy,
  .touch-card,
  .service-media img,
  .founder-photo img,
  .whycs-media,
  .article-figure img,
  .cadence-item img,
  .founder-body,
  .mission-callout,
  .hero-strip .dots b,
  .ceiling-bridge-list i,
  .solution-strip .dots b,
  .pillar-num,
  .cadence-item h4 i,
  .solution-rule,
  .service-rule,
  .hero-guides .v-line,
  .breadcrumb-guides .v-line,
  .touch-lines span,
  .whycs-lines span,
  .footer-lines span,
  .criteria-diamond
):not(.hv-done) {
  transition:
    opacity var(--hv-dur,.8s) var(--hv-ease) var(--hv-d,0s),
    transform var(--hv-dur,.8s) var(--hv-ease) var(--hv-d,0s),
    clip-path calc(var(--hv-dur,.8s) + .2s) var(--hv-ease) var(--hv-d,0s);
}

/* up */
html.hv-motion :is(
  .hero-eyebrow,
  .hero-copy p,
  .hero-content > .hv-btn-primary,
  .breadcrumb-eyebrow,
  .breadcrumb-text, .breadcrumb-meta,
  .ceiling-eyebrow, .solution-eyebrow, .audience-eyebrow, .nlg-eyebrow, .whycs-eyebrow,
  .details-inner > .service-eyebrow, .founder-intro > .service-eyebrow,
  .ceiling-text,
  .audience-text, .nlg-text, .details-company, .contact-sub,
  .founder-intro > .service-text,
  .whycs-inner > .whycs-text,
  .nlg-content > .hv-btn-primary,
  .ceiling-card,
  .ceiling-bridge,
  .solution-card,
  .audience-card,
  .touch-eyebrow,
  .touch-text,
  .touch-inner .hv-btn-primary, .touch-inner .hv-newsletter-form,
  .founder-card,
  .founder-photo-caption,
  .roadmap-card,
  .insight-card,
  .contact-card,
  .details-card,
  .pillar,
  .footer-top > .elementor-element
):not(.hv-in) { opacity:0;transform:translate3d(0,24px,0); }

/* up-s */
html.hv-motion :is(
  .hero-strip .strip-item,
  .ceiling-card-info,
  .ceiling-bridge-list > span,
  .solution-strip .strip-item,
  .mission-callout h4, .mission-callout p,
  .founder-tags li,
  .hv-insight-tabs .e-filter-item,
  .hv-contact-form .elementor-field-group,
  .criteria-chip,
  .cadence-item h4, .cadence-item p,
  .tile
):not(.hv-in) { opacity:0;transform:translate3d(0,12px,0); }

/* left */
html.hv-motion :is(
  .service-row:not(.service-row--reverse) > .service-copy,
  .mission-row > .mission-copy
):not(.hv-in) { opacity:0;transform:translate3d(-32px,0,0); }

/* right */
html.hv-motion :is(
  .nlg-image,
  .service-row--reverse > .service-copy
):not(.hv-in) { opacity:0;transform:translate3d(32px,0,0); }

/* media */
html.hv-motion :is(
  .touch-card,
  .service-media img,
  .founder-photo img,
  .whycs-media,
  .article-figure img,
  .cadence-item img
):not(.hv-in) { opacity:0;transform:translate3d(0,34px,0);clip-path:inset(12% 8% round 18px); }

/* fade */
html.hv-motion :is(
  .founder-body
):not(.hv-in) { opacity:0; }

/* scale */
html.hv-motion :is(
  .mission-callout
):not(.hv-in) { opacity:0;transform:scale(.96); }

/* pop */
html.hv-motion :is(
  .hero-strip .dots b,
  .ceiling-bridge-list i,
  .solution-strip .dots b,
  .pillar-num,
  .cadence-item h4 i
):not(.hv-in) { opacity:0;transform:scale(0); }

/* line-x */
html.hv-motion :is(
  .solution-rule,
  .service-rule
):not(.hv-in) { transform:scaleX(0); }

/* line-y */
html.hv-motion :is(
  .hero-guides .v-line,
  .breadcrumb-guides .v-line,
  .touch-lines span,
  .whycs-lines span,
  .footer-lines span
):not(.hv-in) { clip-path:inset(0 0 100% 0); }

/* diamond */
html.hv-motion :is(
  .criteria-diamond
):not(.hv-in) { opacity:0;transform:rotate(0deg) scale(.5); }

html.hv-motion :is(
  .solution-rule,
  .service-rule
) { transform-origin: 0 50%; }

html.hv-motion :is(
  .hero-guides .v-line,
  .breadcrumb-guides .v-line,
  .touch-lines span,
  .whycs-lines span,
  .footer-lines span
).hv-in:not(.hv-done) { clip-path: inset(0); }

html.hv-motion :is(
  .touch-card,
  .service-media img,
  .founder-photo img,
  .whycs-media,
  .article-figure img,
  .cadence-item img
).hv-in:not(.hv-done) { clip-path: inset(-100px round 0px); }

html.hv-motion :is(
  .hero-copy h1,
  .breadcrumb-heading h1,
  .ceiling-heading > .elementor-heading-title, .solution-heading > .elementor-heading-title, .audience-heading > .elementor-heading-title, .nlg-heading > .elementor-heading-title, .service-heading > .elementor-heading-title, .founder-heading > .elementor-heading-title, .whycs-heading > .elementor-heading-title, .contact-heading > .elementor-heading-title, .details-heading > .elementor-heading-title, .sec-title > .elementor-heading-title, .roadmap-heading > .elementor-heading-title, .article-heading > .elementor-heading-title, .block-heading > .elementor-heading-title,
  .touch-heading h2,
  .service-tag p
):not(.hv-split) { opacity: 0; }