/* Entrance and parallax. Invisible only while html.cs-motion-ready and the element is still off-screen.
   Without that class every element stays at opacity 1, in place. Motion is transform, clip-path and opacity. */
@property --cs-enter { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --cs-pop { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --cs-press { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --cs-lift { syntax: "<length>"; inherits: false; initial-value: 0px; }

html.cs-motion-ready :is([data-cs="card"], [data-cs="navy"], [data-cs="row"], [data-cs="step"], [data-cs="cta"]) {
  --cs-enter: 0px;
  --cs-pop: 1;
  --cs-press: 1;
  --cs-lift: 0px;
  opacity: 1;
  clip-path: none;
  transform: translate3d(0, calc(var(--cs-enter) + var(--cs-lift)), 0) scale(calc(var(--cs-pop) * var(--cs-press)));
  box-shadow: 0 10px 22px -16px #0d1b2852;
  transition:
    --cs-enter 640ms cubic-bezier(.4, .05, .2, 1) var(--cs-d, 0ms),
    --cs-pop 640ms cubic-bezier(.4, .05, .2, 1) var(--cs-d, 0ms),
    opacity 640ms ease var(--cs-d, 0ms),
    clip-path 640ms cubic-bezier(.4, .05, .2, 1) var(--cs-d, 0ms),
    --cs-lift 180ms ease,
    --cs-press 120ms ease,
    border-color 180ms ease;
}

/* Cards stay inside their own box. The entrance is scale and a top clip, not a slide into the next card. */
html.cs-motion-ready :is([data-cs="card"], [data-cs="navy"]):not(.is-in) {
  --cs-enter: 0px;
  --cs-pop: 0.9;
  clip-path: inset(22% 0 0 0);
}
html.cs-motion-ready [data-cs="row"]:not(.is-in) {
  --cs-enter: 0px;
  --cs-pop: 0.98;
  clip-path: inset(0 16% 0 0);
}
html.cs-motion-ready [data-cs="step"]:not(.is-in) {
  --cs-enter: 0px;
  --cs-pop: 0.96;
  clip-path: inset(0 0 0 12%);
}
html.cs-motion-ready [data-cs="cta"]:not(.is-in) {
  --cs-enter: 0px;
  --cs-pop: 0.96;
  clip-path: inset(0 6% 0 0);
}
html.cs-motion-ready :is(.resource-links > a, .service-catalog a)[data-cs="card"] { clip-path: none; }
html.cs-motion-ready :is(.resource-links > a, .service-catalog a)[data-cs="card"]:not(.is-in) {
  --cs-enter: 0px;
  --cs-pop: 0.97;
  clip-path: none;
}

/* Titles stay readable the whole way in. The rise and the clip never cover the full glyph. */
html.cs-motion-ready [data-cs="title"] { position: relative; }
.cs-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
.cs-word > span { display: inline-block; transform: none; clip-path: none; }
html.cs-motion-ready [data-cs="title"]:not(.is-in) .cs-word > span {
  transform: translate3d(0, 28%, 0);
  clip-path: inset(0 0 32% 0);
}
html.cs-motion-ready [data-cs="title"].is-in .cs-word > span {
  transform: none;
  clip-path: none;
  transition:
    transform 620ms cubic-bezier(.4, .05, .2, 1),
    clip-path 620ms cubic-bezier(.4, .05, .2, 1);
  transition-delay: calc(var(--cs-i, 0) * 32ms);
}
html.cs-motion-ready [data-cs="title"]:not(.is-in):not(:has(.cs-word)) {
  clip-path: inset(0 0 35% 0);
  transform: translate3d(0, 28px, 0);
}
html.cs-motion-ready [data-cs="title"].is-in:not(:has(.cs-word)) {
  clip-path: none;
  transform: none;
  opacity: 1;
  transition: clip-path 620ms cubic-bezier(.4, .05, .2, 1), transform 620ms cubic-bezier(.4, .05, .2, 1), opacity 620ms ease;
  transition-delay: var(--cs-d, 0ms);
}

/* Rings sit in the margin, outside every text box, and bleed off the sides.
   The section clips them, and a side fade keeps that clip from reading as a hard edge. */
html.cs-motion-ready .hv4-services,
html.cs-motion-ready #why-cornerstone,
html.cs-motion-ready .hv4-group,
html.cs-motion-ready [data-cs="navy"] { position: relative; }
html.cs-motion-ready .hv4-services,
html.cs-motion-ready #why-cornerstone {
  isolation: isolate;
  overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}
html.cs-motion-ready .hv4-services > .hv4-wrap,
html.cs-motion-ready #why-cornerstone > :not(.cs-orn),
html.cs-motion-ready .hv4-group > :not(.cs-orn),
html.cs-motion-ready .hv4-feature > :not(.hv4-ring) { position: relative; z-index: 1; }
.cs-orn, html.cs-motion-ready .hv4-feature .hv4-ring {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
  border-radius: 50%;
}
.cs-orn-ring {
  border: 2.5px solid rgba(130, 91, 49, .8);
  box-shadow: inset 0 0 0 2px rgba(28, 176, 195, .62);
}
.cs-orn-b { border-color: rgba(28, 176, 195, .75); box-shadow: inset 0 0 0 1.5px rgba(224, 194, 138, .7); }
.cs-edge-l, .cs-edge-l2 { left: -54px; width: 66px; height: 66px; }
.cs-edge-r, .cs-edge-r2 { right: -54px; width: 66px; height: 66px; }
.cs-edge-l { top: 6%; }
.cs-edge-r { top: 36%; }
.cs-edge-l2 { top: 64%; width: 48px; height: 48px; left: -40px; }
.cs-edge-r2 { top: 72%; width: 48px; height: 48px; right: -40px; }
.hv4-group > .cs-edge-l,
.hv4-group > .cs-edge-l2 { left: auto; right: calc(100% + 8px); }
.hv4-group > .cs-edge-r,
.hv4-group > .cs-edge-r2 { right: auto; left: calc(100% + 8px); }
html.cs-motion-ready .hv4-feature .hv4-ring {
  width: 64px;
  height: 64px;
  left: calc(100% + 8px);
  right: auto;
  top: 16px;
  opacity: 1;
}
@media (min-width: 901px) {
  html.cs-motion-ready .hv4-services,
  html.cs-motion-ready #why-cornerstone {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  }
  .hv4-services > .cs-edge-l { left: 8px; width: 112px; height: 112px; }
  .hv4-services > .cs-edge-r { right: 8px; width: 112px; height: 112px; }
  .hv4-services > .cs-edge-l2 { left: 18px; width: 72px; height: 72px; }
  .hv4-group > .cs-edge-l,
  .hv4-group > .cs-edge-r,
  .hv4-group > .cs-edge-l2,
  .hv4-group > .cs-edge-r2 { width: 120px; height: 120px; }
  #why-cornerstone > .cs-edge-l { left: 8px; width: 62px; height: 62px; }
  #why-cornerstone > .cs-edge-r { right: 8px; width: 62px; height: 62px; }
  #why-cornerstone > .cs-edge-l2 { left: 16px; width: 44px; height: 44px; }
  html.cs-motion-ready .hv4-feature .hv4-ring { width: 108px; height: 108px; left: calc(100% + 16px); top: 24px; }
}

.hv4-glabel { min-width: 0; }
.hv4-glabel .hv4-watch { position: relative; z-index: 2; max-width: 100%; white-space: normal; }
@media (max-width: 900px) {
  .hv4-group { row-gap: 36px; }
}
@media (max-width: 760px) {
  html.cs-motion-ready .hv4-services,
  html.cs-motion-ready #why-cornerstone {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9px, #000 calc(100% - 9px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9px, #000 calc(100% - 9px), transparent);
  }
  .cs-orn-ring {
    border-width: 3.5px;
    border-color: rgba(130, 91, 49, .95);
    box-shadow: inset 0 0 0 2.5px rgba(28, 176, 195, .92);
  }
  .cs-orn-b {
    border-color: rgba(28, 176, 195, .95);
    box-shadow: inset 0 0 0 2px rgba(224, 194, 138, .95);
  }
  .hv4-services > .cs-edge-l,
  .hv4-services > .cs-edge-l2,
  #why-cornerstone > .cs-edge-l,
  #why-cornerstone > .cs-edge-l2 { left: -34px; width: 66px; height: 66px; }
  .hv4-services > .cs-edge-r,
  .hv4-services > .cs-edge-r2,
  #why-cornerstone > .cs-edge-r,
  #why-cornerstone > .cs-edge-r2 { right: -34px; width: 66px; height: 66px; }
  .hv4-group > .cs-edge-l,
  .hv4-group > .cs-edge-l2,
  .hv4-group > .cs-edge-r,
  .hv4-group > .cs-edge-r2 { width: 66px; height: 66px; }
  .hv4-group > .cs-edge-l,
  .hv4-group > .cs-edge-l2 { left: auto; right: calc(100% - 8px); }
  .hv4-group > .cs-edge-r,
  .hv4-group > .cs-edge-r2 { right: auto; left: calc(100% - 8px); }
  html.cs-motion-ready .hv4-cards article.hv4-feature { overflow: visible; }
  html.cs-motion-ready .hv4-feature .hv4-ring {
    width: 72px;
    height: 72px;
    left: calc(100% - 8px);
    right: auto;
    top: 40px;
    border: 3.5px solid rgba(224, 194, 138, .95);
    box-shadow: inset 0 0 0 2.5px rgba(28, 176, 195, .9);
  }
  html.cs-motion-ready .hv4-feature .hv4-ring *,
  html.cs-motion-ready .hv4-services > .hv4-ring * { stroke: transparent; fill: transparent; }
}

@media (hover: hover) and (pointer: fine) {
  html.cs-motion-ready :is([data-cs="card"], [data-cs="navy"]):hover {
    --cs-lift: -6px;
    border-color: #e0c28a;
    box-shadow: 0 26px 44px -20px #0d1b2866, inset 0 0 0 1px #e0c28a;
  }
  html.cs-motion-ready :is([data-cs="card"], [data-cs="navy"]):hover :is(.text-link, a)::after,
  html.cs-motion-ready :is([data-cs="card"], [data-cs="navy"]):hover svg:not(.hv4-ring),
  html.cs-motion-ready [data-cs="cta"]:hover svg {
    transform: translateX(8px);
  }
}
html.cs-motion-ready :is(.resource-links > a, .service-catalog a)[data-cs="card"]:hover { --cs-lift: 0px; }
html.cs-motion-ready :is([data-cs="card"], [data-cs="navy"], [data-cs="cta"], [data-cs="pill"]):active { --cs-press: 0.98; }
html.cs-motion-ready :is([data-cs="card"], [data-cs="navy"]) :is(.text-link, a)::after,
html.cs-motion-ready :is([data-cs="card"], [data-cs="navy"]) svg:not(.hv4-ring),
html.cs-motion-ready [data-cs="cta"] svg {
  display: inline-block;
  transition: transform 200ms cubic-bezier(.4, .05, .2, 1);
}

@media (prefers-reduced-motion: no-preference) {
  html.cs-motion-ready [data-cs="pill"] i {
    animation: cs-pill 1.7s ease-in-out infinite;
    transform-origin: center;
  }
}
@keyframes cs-pill {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.16); }
}

/* These beat the home card and pill hover rules, which set transform on their own. */
html.cs-motion-ready .hv4-cards article[data-cs]:hover,
html.cs-motion-ready .hv4-cards article[data-cs]:active,
html.cs-motion-ready .launch-cards article[data-cs]:hover,
html.cs-motion-ready .launch-cards article[data-cs]:active {
  transform: translate3d(0, calc(var(--cs-enter, 0px) + var(--cs-lift, 0px)), 0) scale(calc(var(--cs-pop, 1) * var(--cs-press, 1)));
}
html.cs-motion-ready a.hv4-watch[data-cs="pill"]:hover,
html.cs-motion-ready a.hv4-watch[data-cs="pill"]:active {
  transform: translate3d(0, var(--cs-lift, 0px), 0) scale(var(--cs-press, 1));
}

html.cs-motion-done :is([data-cs]) {
  --cs-enter: 0px !important;
  --cs-pop: 1 !important;
  opacity: 1 !important;
  clip-path: none !important;
}
html.cs-motion-done .cs-word > span { transform: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  html.cs-motion-ready :is([data-cs]),
  html.cs-motion-ready .cs-word > span,
  html.cs-motion-ready .cs-orn,
  html.cs-motion-ready .hv4-feature .hv4-ring {
    --cs-enter: 0px !important;
    --cs-pop: 1 !important;
    --cs-y: 0px !important;
    opacity: 1 !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}
@media print {
  html.cs-motion-ready :is([data-cs]),
  html.cs-motion-ready .cs-word > span { opacity: 1 !important; clip-path: none !important; transform: none !important; animation: none !important; }
}