.elementor .cr-title{margin: 0 !important;
color: var(--cr-ink) !important;
font-size: clamp(32px, 3.4vw, 52px) !important;
font-weight: 700 !important;
line-height: 1.05 !important;
letter-spacing: .03em !important;
text-transform: uppercase;

& :is(h1, h2, h3, h4) {
margin: 0;
color: inherit !important;
font: inherit !important;
letter-spacing: inherit !important;
text-transform: inherit;
}\n}.elementor .cr-bar{position: relative;
flex: 0 0 auto !important;
width: clamp(72px, 7vw, 112px) !important;
height: 1px !important;
min-height: 0 !important;
margin: clamp(20px, 2vw, 28px) 0 0 !important;
padding: 0 !important;
background: var(--cr-line) !important;

&::after {
content: "";
position: absolute;
inset: 0;
background: var(--cr-accent);
transform-origin: 0 50%;
transition: transform 1.1s cubic-bezier(.65, 0, .35, 1) .25s;
}

/* draws in when its section reveals */
.cr-ready:not(.is-in) &::after { transform: scaleX(0); }\n}.elementor .cr-own{--cr-count-time: 2000ms;
--cr-depth: 18px;
--cr-spot: 560px;
position: relative;
isolation: isolate;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: clamp(40px, 6vw, 120px) !important;
padding: var(--cr-pad-y) max(var(--cr-side), calc((100% - var(--cr-max)) / 2)) !important;

/* cursor spotlight */
&::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: -1;
background: radial-gradient(var(--cr-spot) circle at var(--cr-mx, 30%) var(--cr-my, 50%), color-mix(in srgb, var(--cr-ink) 6%, transparent), transparent 70%) !important;
opacity: 0;
transition: opacity .8s ease !important;
pointer-events: none;
}
&.is-hover::after { opacity: 1; }

& .cr-own-figure {
flex: 0 0 min(42%, 520px) !important;
display: flex !important;
flex-direction: column !important;
gap: 22px !important;
padding: 0 !important;
perspective: 1000px;
}

/* big figure: outline that fills as it counts, leans toward the cursor */
& .cr-own-num {
--cr-fill: 100%;
transform:
  translate3d(calc(var(--cr-px, 0) * var(--cr-depth) * -1), calc(var(--cr-py, 0) * var(--cr-depth) * -.6), 0)
  rotateY(calc(var(--cr-px, 0) * 7deg))
  rotateX(calc(var(--cr-py, 0) * -5deg));
transform-origin: 35% 60%;
}
& :is(.cr-own-num, .cr-own-num :is(h1, h2, h3, h4, p)) {
margin: 0 !important;
padding: 0 0 .04em !important;
font-family: Yantramanav, sans-serif !important;
font-size: clamp(112px, 15vw, 232px) !important;
font-weight: 900 !important;
line-height: .82 !important;
letter-spacing: -.045em !important;
font-variant-numeric: tabular-nums;
color: transparent !important;
-webkit-text-stroke: 1.5px var(--cr-ink);
background-color: transparent !important;
background-image: linear-gradient(to top, var(--cr-ink) var(--cr-fill), transparent 0) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
}

& .cr-own-label {
display: flex !important;
align-items: center;
gap: 14px;
transform: translate3d(calc(var(--cr-px, 0) * var(--cr-depth) * -.4), calc(var(--cr-py, 0) * var(--cr-depth) * -.25), 0);
}
& .cr-own-label::before {
content: "";
flex: 0 0 32px;
height: 1px;
background: var(--cr-accent);
}
& :is(.cr-own-label, .cr-own-label p) {
margin: 0 !important;
color: var(--cr-ink) !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: .18em !important;
text-transform: uppercase;
}

& .cr-own-body {
flex: 1 1 auto !important;
max-width: 640px;
padding: 0 !important;
}

& :is(.cr-own-text, .cr-own-text p) {
max-width: 52ch;
margin: 28px 0 0 !important;
color: var(--cr-text) !important;
font-size: clamp(18px, 1.4vw, 20px) !important;
line-height: 1.65 !important;
}
& .cr-own-text p { margin: 0 !important; }

& .cr-own-stats {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 0 !important;
margin-top: clamp(40px, 4vw, 56px) !important;
padding: 0 !important;
}

/* accent line sits on the top rule and sweeps across on hover */
& .cr-own-stat {
position: relative;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
padding: 28px clamp(12px, 2vw, 28px) 4px !important;
border-top: 1px solid var(--cr-line);
background: linear-gradient(var(--cr-accent), var(--cr-accent)) 0 0 / 32px 2px no-repeat border-box !important;
transition: background-size .7s var(--cr-ease) !important;
}
& .cr-own-stat:first-child { padding-left: 0 !important; }
& .cr-own-stat + .cr-own-stat::before {
content: "";
position: absolute;
left: 0;
top: 28px;
bottom: 0;
width: 1px;
background: var(--cr-line);
pointer-events: none;
}

& :is(.cr-own-stat-num, .cr-own-stat-num :is(h2, h3, h4)) {
margin: 0 !important;
color: var(--cr-ink) !important;
font-family: Yantramanav, sans-serif !important;
font-size: clamp(40px, 3.6vw, 56px) !important;
font-weight: 900 !important;
line-height: .9 !important;
letter-spacing: -.03em !important;
font-variant-numeric: tabular-nums;
}

& :is(.cr-own-stat-label, .cr-own-stat-label p) {
max-width: 22ch;
margin: 0 !important;
color: var(--cr-muted) !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.45 !important;
letter-spacing: .12em !important;
text-transform: uppercase;
}
& .cr-own-stat-num,
& .cr-own-stat-label { transition: transform .6s var(--cr-ease); }

@media (hover: hover) {
& .cr-own-stat:hover { background-size: 100% 2px !important; }
& .cr-own-stat:hover .cr-own-stat-num,
& .cr-own-stat:hover .cr-own-stat-label { transform: translateY(-4px); }
}

/* reveal, only once the script has run */
&.cr-ready :is(.cr-own-num, .cr-own-label, .cr-title, .cr-own-text, .cr-own-stat) {
transition:
  opacity .9s var(--cr-ease) var(--cr-d, 0s),
  translate 1.2s var(--cr-ease) var(--cr-d, 0s),
  background-size .9s var(--cr-ease) calc(var(--cr-d, 0s) + .3s) !important;
}
&.cr-ready:not(.is-in) :is(.cr-own-num, .cr-own-label, .cr-title, .cr-own-text, .cr-own-stat) {
opacity: 0;
translate: 0 36px;
}
&.cr-ready:not(.is-in) .cr-own-stat { background-size: 0 2px !important; }
&.is-settled .cr-own-stat { transition: background-size .7s var(--cr-ease) !important; }
& .cr-title { --cr-d: .1s; }
& .cr-own-label { --cr-d: .15s; }
& .cr-own-text { --cr-d: .2s; }
& .cr-own-stat:nth-child(1) { --cr-d: .3s; }
& .cr-own-stat:nth-child(2) { --cr-d: .38s; }
& .cr-own-stat:nth-child(n+3) { --cr-d: .46s; }

@media (max-width: 1024px) {
flex-direction: column !important;
align-items: flex-start !important;
& .cr-own-figure { flex: 0 0 auto !important; }
& .cr-own-body { max-width: none; }
}

@media (max-width: 480px) {
& .cr-own-stats { grid-template-columns: minmax(0, 1fr) !important; }
& .cr-own-stat {
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 20px 0 !important;
}
& .cr-own-stat + .cr-own-stat::before { display: none; }
& :is(.cr-own-stat-num, .cr-own-stat-num :is(h2, h3, h4)) { min-width: 3ch; }
}

@media (prefers-reduced-motion: reduce) {
& .cr-own-stat-num, & .cr-own-stat-label { transition: none; transform: none !important; }
}

/* editor: solid figure, no depth effects */
.elementor-editor-active &::after { display: none; }
.elementor-editor-active & :is(.cr-own-num, .cr-own-label) { transform: none; }
.elementor-editor-active & :is(.cr-own-num, .cr-own-num :is(h1, h2, h3, h4, p)) {
color: var(--cr-ink) !important;
background-image: none !important;
-webkit-text-stroke: 0;
}\n}.elementor .cutout-buttons-container{/*
 * Cutout buttons
 * Custom CSS on the global class cutout-buttons-container (Elementor wraps it in
 * .elementor .cutout-buttons-container { ... }). Styles any button placed inside.
 */

/** Settings **/
--cutout-text-button-background: rgba(21, 24, 30, 0.174);  /* resting glass; keeps white text legible on bright footage */
--cutout-text-button-background-hover: #FFFFFFCF;
--cutout-text-color: #FFF;
--cutout-text-color-hover: #1a1a1a;  /* knockout letters show the video wherever it's lighter than this */
--cutout-border: rgba(255, 255, 255, .85);
--cutout-text-transition-duration: .45s;  /* background fade; text settles faster so it never vanishes mid-fade */
--cutout-ease: cubic-bezier(.16, 1, .3, 1);

/* matched pair, centered; each button as wide as the longest label */
display: grid !important;
grid-auto-flow: column;
grid-auto-columns: 1fr;
justify-content: center;
align-items: stretch;
gap: clamp(12px, 1.4vw, 20px);
width: fit-content !important;
max-width: 100%;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 !important;

.e-con-inner{ display: contents !important; }

:is(a, button):is(.cutout-button, .e-button-base, .elementor-button){
display: inline-flex !important;
width: 100% !important;  /* fills its column; overrides Elementor's fixed button width */
align-items: center;
justify-content: center;
min-height: 56px;
margin: 0;
padding: 0 clamp(28px, 2.6vw, 40px) !important;
border: 1px solid var(--cutout-border) !important;
border-radius: 0 !important;
background-color: var(--cutout-text-button-background) !important;
color: var(--cutout-text-color) !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: .16em !important;
line-height: 1 !important;
text-transform: uppercase;
text-decoration: none !important;
white-space: nowrap;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
transition:
  background-color var(--cutout-text-transition-duration) var(--cutout-ease),
  color calc(var(--cutout-text-transition-duration) * .4) var(--cutout-ease),
  border-color var(--cutout-text-transition-duration) var(--cutout-ease);
}
:is(a, button):is(.cutout-button, .e-button-base, .elementor-button) :is(span, p){
color: inherit !important;
font: inherit !important;
letter-spacing: inherit !important;
}

/* hover: solid white with the letters cut out to the video */
:is(a, button):is(.cutout-button, .e-button-base, .elementor-button):is(:hover, :focus-visible){
background-color: var(--cutout-text-button-background-hover) !important;
color: var(--cutout-text-color-hover) !important;
border-color: var(--cutout-text-button-background-hover) !important;
mix-blend-mode: lighten;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
:is(a, button):is(.cutout-button, .e-button-base, .elementor-button):focus-visible{
outline: 2px solid #FFF;
outline-offset: 4px;
}

/* the blend only reaches the video if no wrapper between them forms its own layer (z-index) */
.e-background-video-content-base:has(&){ z-index: auto !important; }
.hero-image-details-container:not(.hero-image-container-inner .hero-image-details-container):has(&){ z-index: auto !important; }

/* phones: stacked, full width up to a comfortable size */
@media (max-width: 600px){
grid-auto-flow: row;
width: 100% !important;
max-width: 360px;

:is(a, button):is(.cutout-button, .e-button-base, .elementor-button){ min-height: 52px; }
}

@media (prefers-reduced-motion: reduce){
:is(a, button):is(.cutout-button, .e-button-base, .elementor-button){ transition: none !important; }
}\n}.elementor .cutout-button:hover,.elementor .cutout-button:focus-visible{color: var(--cutout-text-color-hover);
  background-color: var(--cutout-text-button-background-hover) !important;\n}.elementor .hero-image-container{width: 100%;
padding: 0;
margin: 0;

/* overlay color: any opaque brand color, held dark enough to carry white text */
--hero-tint: var(--company-hero-overlay-color, var(--company-color, var(--hero-overlay-color, #0b1220)));
--hero-shade: color-mix(in srgb, var(--hero-tint), #000 10%);
@supports (color: oklch(from red l c h)){
--hero-shade: oklch(from var(--hero-tint) min(l, .2) c h);  /* caps lightness, keeps hue */
}

/* video controls */
--hero-control-size: 44px;
--hero-control-icon: 18px;
--hero-control-accent: var(--ww-accent, #4e1512);

.hero-image-container-inner{
width: 100%;
padding: 0;
margin: 0;
position: relative;
isolation: isolate;
overflow: clip;  /* contains the drifting photo; clip, not hidden, so scroll-driven animations keep working */
}

/* overlay sits on the inner container: .hero-image is an image element, which can't render ::before/::after */
.hero-image-container-inner::before{
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: radial-gradient(ellipse 60% 50% at 50% 52%, color-mix(in srgb, var(--hero-shade) 15%, transparent) 0%, transparent 100%),  /* center focus */
  color-mix(in srgb, var(--hero-shade) var(--hero-wash, 15%), transparent);
}

.hero-image{
display: block;
width: 100%;
max-height: 100vh;
max-height: 100svh;
object-fit: cover;
}

.hero-image-details-container{
position: absolute;
inset: 0;
z-index: auto;  /* beside the inner container it paints above it without forming its own layer, so blend-mode buttons reach the video */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: auto;
height: auto;
margin: 0;
padding: var(--sticky-header-height, 100px) clamp(16px, 4vw, 64px) clamp(24px, 6vh, 64px);
gap: 20px;
text-align: center;
}
.hero-image-container-inner .hero-image-details-container{ z-index: 2; }  /* inside the inner container it must clear the overlay */

/* the text layer covers the whole hero: let clicks through its empty areas (e.g. to video play/pause);
 text, links and buttons inside it stay interactive */
.hero-image-details-container,
.hero-image-details-container :is(.e-con, .e-con-inner){ pointer-events: none; }
.hero-image-details-container :not(.e-con, .e-con-inner){ pointer-events: auto; }

  .hero-image-details-container :is(h1, h2, h3, h4, h5, p){
  text-shadow: 0 1px 3px rgb(0 0 0 / .5), 0 0 28px rgb(0 0 0 / .4);
}

.hero-image-details-container :is(svg, img){
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / .45)) drop-shadow(0 0 24px rgb(0 0 0 / .3));
}

.hero-image-breadcrumb{
font-size: 0.7em;
color: var(--hero-breadcrumb-color, #fff);  /* light on the overlay; muted gray fails contrast here */
letter-spacing: .14em;
text-transform: uppercase;
}

.hero-image-company-tagline{
color: var(--company-secondary-color);
}

.hero-image-company-description{
color: var(--company-secondary-color);
font-size: 0.9em;
}


/* ---------- Video toggle: one circular button whose icon morphs (markup + script in hero-video-toggle.html) ---------- */
&:has(.hero-video-toggle) .e-background-video__controls{ display: none !important; }  /* the toggle replaces the player's own buttons */
:is(.elementor-widget-html, .elementor-widget-container):has(.hero-video-toggle){ display: contents !important; }  /* Elementor's widget wrappers are positioned; step them aside so the toggle positions against the hero */

.hero-video-toggle{
position: absolute;
right: clamp(16px, 3vw, 40px);
bottom: clamp(16px, 3vw, 40px);
z-index: 3;
display: grid;
place-items: center;
width: var(--hero-control-size);
height: var(--hero-control-size);
margin: 0;
padding: 0 !important;
border: 1px solid rgba(255, 255, 255, .85) !important;
border-radius: 50% !important;
background: rgba(10, 14, 24, .28) !important;  /* faint glass, legible over bright footage */
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
color: #FFF !important;
cursor: pointer;
pointer-events: auto;
-webkit-tap-highlight-color: transparent;
box-shadow: inset 0 0 0 0 var(--hero-control-accent);  /* inset shadow fill: the icon stays on top */
transition: box-shadow .55s cubic-bezier(.16, 1, .3, 1), border-color .45s ease;
}
.hero-video-toggle:is(:hover, :focus-visible){
box-shadow: inset 0 0 0 calc(var(--hero-control-size) / 2 + 1px) var(--hero-control-accent);
border-color: var(--hero-control-accent) !important;
}
.hero-video-toggle:focus-visible{
outline: 2px solid #FFF;
outline-offset: 4px;
}
.hero-video-toggle svg{
display: block;
width: var(--hero-control-icon);
height: var(--hero-control-icon);
overflow: visible;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce){
.hero-video-toggle{ transition: none; }
}


/* slow drift on photo heroes only (videos already move); keyframes in hero-keyframes.css */
@media (prefers-reduced-motion: no-preference){
:is(img.hero-image, .hero-image img){ animation: hero-drift 40s ease-in-out infinite alternate; }
}

/* phones: wide photos and videos get too short to hold the text; crop to a taller frame */
@media (max-width: 767px){
.hero-image-container-inner{ min-height: clamp(460px, 78svh, 680px); }
.hero-image-container-inner .e-background-video{ position: absolute; inset: 0; }
:is(img.hero-image, .hero-image img){ min-height: clamp(460px, 78svh, 680px); }
}\n}.elementor .cr-perks{--cr-perk-time: 7s;
--cr-media-min: clamp(420px, 42vw, 640px);
--cr-depth: 14px;
--cr-indent: clamp(44px, 4vw, 64px);
position: relative;
flex-direction: row !important;
align-items: stretch !important;
justify-content: space-between !important;
gap: clamp(40px, 6vw, 120px) !important;
padding: var(--cr-pad-y) max(var(--cr-side), calc((100% - var(--cr-max)) / 2)) !important;
background-color: var(--cr-soft);

& .cr-perks-media {
position: relative;
flex: 0 0 min(44%, 560px) !important;
display: grid !important;
gap: 12px !important;
padding: 0 !important;
}
& .cr-perks-img {
overflow: hidden;
aspect-ratio: 4 / 3;
}
& .cr-perks-img :is(.elementor-widget-container, a) { display: block; height: 100%; }
& :is(.cr-perks-img, .cr-perks-img img) {
display: block;
width: 100% !important;
max-width: none !important;
height: 100% !important;
object-fit: cover;
}

/* stacked crossfade with cursor depth, only once the script has run */
& .cr-perks-media.cr-js {
grid-template-areas: "m";
grid-template-rows: minmax(var(--cr-media-min), 1fr);
gap: 0 !important;
overflow: hidden;
}
& .cr-perks-media.cr-js .cr-perks-img {
grid-area: m;
aspect-ratio: auto;
opacity: 0;
scale: 1.14;
transform: translate3d(calc(var(--cr-px, 0) * var(--cr-depth) * -1), calc(var(--cr-py, 0) * var(--cr-depth) * -1), 0);
transition: opacity 1s ease, scale 1.8s var(--cr-ease);
}
& .cr-perks-media.cr-js .cr-perks-img.is-active { opacity: 1; scale: 1.06; }

/* counter on the image, added by the script */
& .cr-perks-count {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: 72px 24px 22px;
background: linear-gradient(to top, rgba(10, 22, 85, .55), transparent);
color: rgba(255, 255, 255, .8);
font: 600 14px/1 Yantramanav, sans-serif;
letter-spacing: .12em;
font-variant-numeric: tabular-nums;
pointer-events: none;
}
& .cr-perks-count b { color: #fff; font-weight: 800; }

& .cr-perks-body {
flex: 1 1 auto !important;
max-width: 640px;
padding: 0 !important;
}

& .cr-perks-list {
counter-reset: crp;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
margin-top: clamp(32px, 4vw, 56px) !important;
padding: 0 !important;
}

& .cr-perk {
--mx: 50%;
--my: 50%;
counter-increment: crp;
position: relative;
isolation: isolate;
display: grid !important;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto 1fr;
gap: 0 !important;
padding: 26px 16px 26px var(--cr-indent) !important;
border-top: 1px solid var(--cr-line);
transition: grid-template-rows .6s var(--cr-ease);
}
& .cr-perk:last-child { border-bottom: 1px solid var(--cr-line); }

/* small counter label */
& .cr-perk::before {
content: counter(crp, decimal-leading-zero);
position: absolute;
left: 0;
top: calc(26px + .45em);
color: var(--cr-accent);
font: 700 13px/1 Yantramanav, sans-serif;
letter-spacing: .12em;
pointer-events: none;
}

/* cursor spotlight */
& .cr-perk::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(380px circle at var(--mx) var(--my), rgba(255, 255, 255, .95), transparent 70%);
opacity: 0;
transition: opacity .5s ease;
pointer-events: none;
}

& :is(.cr-perk-title, .cr-perk-title :is(h3, h4, h5)) {
margin: 0 !important;
color: var(--cr-ink) !important;
font-size: clamp(19px, 1.6vw, 24px) !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: .04em !important;
}

& :is(.cr-perk-text, .cr-perk-text p) {
max-width: 50ch;
margin: 0 !important;
color: var(--cr-text) !important;
font-size: clamp(16px, 1.2vw, 18px) !important;
line-height: 1.6 !important;
}
& .cr-perk-text {
min-height: 0;
overflow: hidden;
padding-top: 12px !important;
}

/* button added inside each title by the script */
& .cr-perk-btn {
appearance: none;
display: block;
width: 100%;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
color: inherit !important;
font: inherit !important;
line-height: inherit !important;
letter-spacing: inherit !important;
text-transform: inherit !important;
text-align: left;
cursor: pointer;
}
& .cr-perk-btn:focus-visible { outline: 2px solid var(--cr-accent); outline-offset: 6px; }

/* progress line on the open benefit, added by the script */
& .cr-perk-progress {
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 2px;
pointer-events: none;
}
& .cr-perk-progress i {
position: absolute;
inset: 0;
background: var(--cr-accent);
transform: scaleX(0);
transform-origin: 0 50%;
}
& .cr-perk-progress i.is-running { animation: cr-fill var(--cr-perk-time) linear forwards; }
& .cr-perks-list.is-paused .cr-perk-progress i { animation-play-state: paused; }
& .cr-perks-list.is-manual .cr-perk-progress i { transition: transform .8s var(--cr-ease); }
& .cr-perks-list.is-manual .cr-perk.is-active .cr-perk-progress i { transform: scaleX(1); }

/* accordion, only once the script has run */
& .cr-perks-list.cr-js .cr-perk { cursor: pointer; }
& .cr-perks-list.cr-js .cr-perk:not(.is-active) { grid-template-rows: auto 0fr; }
& .cr-perks-list.cr-js .cr-perk-text { transition: padding .6s var(--cr-ease), opacity .5s ease .1s, visibility 0s; }
& .cr-perks-list.cr-js .cr-perk:not(.is-active) .cr-perk-text {
padding-top: 0 !important;
opacity: 0;
visibility: hidden;
transition: padding .6s var(--cr-ease), opacity .3s ease, visibility 0s linear .6s;
}
& .cr-perks-list.cr-js .cr-perk-title { transition: opacity .4s ease, transform .6s var(--cr-ease); }
& .cr-perks-list.cr-js .cr-perk:not(.is-active) .cr-perk-title { opacity: .5; }
& .cr-perks-list.cr-js .cr-perk.is-preview .cr-perk-title { opacity: 1; transform: translateX(6px); }
@media (hover: hover) {
& .cr-perks-list.cr-js .cr-perk:hover::after { opacity: 1; }
}

/* reveal, only once the script has run */
&.cr-ready :is(.cr-title, .cr-perk) {
transition:
  opacity .9s var(--cr-ease) var(--cr-d, 0s),
  translate 1.1s var(--cr-ease) var(--cr-d, 0s),
  grid-template-rows .6s var(--cr-ease) !important;
}
&.cr-ready:not(.is-in) :is(.cr-title, .cr-perk) {
opacity: 0;
translate: 0 28px;
}
&.cr-ready .cr-perks-media { transition: clip-path 1.4s var(--cr-ease) .05s; }
&.cr-ready:not(.is-in) .cr-perks-media { clip-path: inset(10% 12% 10% 0); }
& .cr-perk:nth-child(1) { --cr-d: .15s; }
& .cr-perk:nth-child(2) { --cr-d: .22s; }
& .cr-perk:nth-child(3) { --cr-d: .29s; }
& .cr-perk:nth-child(4) { --cr-d: .36s; }
& .cr-perk:nth-child(n+5) { --cr-d: .43s; }

@media (max-width: 1024px) {
flex-direction: column !important;
& .cr-perks-media { flex: 0 0 auto !important; width: 100% !important; }
& .cr-perks-media.cr-js { grid-template-rows: auto; aspect-ratio: 16 / 10; }
& .cr-perks-body { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
& .cr-perk, & .cr-perk-text, & .cr-perk-title, & .cr-perks-media.cr-js .cr-perks-img { transition: none !important; }
& .cr-perks-media.cr-js .cr-perks-img { scale: 1; transform: none; }
}

/* editor: images as a labeled thumbnail grid, every benefit open */
.elementor-editor-active & .cr-perks-media {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-content: start;
padding-top: 28px !important;
}
.elementor-editor-active & .cr-perks-media::before {
content: "Benefit images – same order as the list (one shows at a time on the live site)";
position: absolute;
top: 0;
left: 0;
right: 0;
color: #8b9198;
font: 12px/1.4 monospace;
}
.elementor-editor-active & .cr-perks-img { aspect-ratio: 4 / 3; }
.elementor-editor-active & .cr-perk::after { display: none; }\n}.elementor .cr-paths{--cr-cols: 3;
--cr-grid-ratio: 3 / 2;
--cr-card-ratio: 4 / 5;
--cr-card: calc((100vw - 2 * var(--cr-side) - var(--cr-gap)) / 2.15);
--cr-gap: clamp(16px, 1.6vw, 24px);
--cr-link-icon: 44px;
--cr-tilt: 10deg;
--cr-co-1: #0f243f;
--cr-co-2: #580e0e;
--cr-co-3: #bcad8f;
--cr-co-4: #445139;
--cr-co-5: #004c80;
--cr-co-6: #580e0e;
--cr-inset: max(var(--cr-side), calc((100% - var(--cr-max)) / 2));
position: relative;
overflow: clip;
flex-direction: column !important;
gap: clamp(40px, 4vw, 64px) !important;
padding: var(--cr-pad-y) 0 !important;

& .cr-paths-head {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
align-items: end;
gap: 24px clamp(32px, 6vw, 120px) !important;
padding: 0 var(--cr-inset) !important;
}
& .cr-paths-head > :not(.cr-paths-intro) { grid-column: 1; }
& .cr-paths-intro { grid-column: 2; grid-row: 1 / span 2; }

& :is(.cr-paths-intro, .cr-paths-intro p) {
max-width: 56ch;
margin: 0 !important;
color: var(--cr-text) !important;
font-size: clamp(17px, 1.3vw, 19px) !important;
line-height: 1.6 !important;
}

& .cr-paths-track {
position: relative;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
gap: var(--cr-gap) !important;
width: 100% !important;
padding: 12px var(--cr-inset) 4px !important;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--cr-inset);
scrollbar-width: none;
}
& .cr-paths-track::-webkit-scrollbar { display: none; }
& .cr-paths-track.is-dragging { scroll-snap-type: none; user-select: none; }
& .cr-paths-track.is-dragging .cr-path { pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
&:not(.is-static) .cr-paths-track.cr-js { cursor: grab; }
& .cr-paths-track.is-dragging { cursor: grabbing; }
}

& .cr-path {
--cr-co: var(--cr-co-1);
--rx: 0deg;
--ry: 0deg;
--sx: 50%;
--sy: 50%;
position: relative;
flex: 0 0 var(--cr-card) !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
padding: 0 0 28px !important;
border-bottom: 1px solid var(--cr-line);
background: none !important;
color: var(--cr-ink) !important;
text-decoration: none !important;
scroll-snap-align: start;
}
& .cr-path:nth-child(6n+2) { --cr-co: var(--cr-co-2); }
& .cr-path:nth-child(6n+3) { --cr-co: var(--cr-co-3); }
& .cr-path:nth-child(6n+4) { --cr-co: var(--cr-co-4); }
& .cr-path:nth-child(6n+5) { --cr-co: var(--cr-co-5); }
& .cr-path:nth-child(6n+6) { --cr-co: var(--cr-co-6); }

/* company-color line on hover */
& .cr-path::after {
content: "" !important;
position: absolute !important;
left: 0;
right: 0;
bottom: -1px;
height: 2px !important;
background: var(--cr-co) !important;
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform .8s var(--cr-ease) !important;
}

/* image tile tilts toward the cursor */
& .cr-path-media {
position: relative;
overflow: hidden;
aspect-ratio: var(--cr-card-ratio);
margin-bottom: 14px !important;
padding: 0 !important;
background: #eef0f3 !important;
transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
transition: transform .5s var(--cr-ease);
}
/* light sheen that follows the cursor */
& .cr-path-media::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 2;
background: radial-gradient(420px circle at var(--sx) var(--sy), rgba(255, 255, 255, .28), transparent 60%) !important;
opacity: 0;
transition: opacity .5s ease !important;
pointer-events: none;
}
/* company-color band rises from the bottom edge */
& .cr-path-media::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 1;
height: 6px !important;
background: var(--cr-co) !important;
transform: scaleY(0);
transform-origin: 50% 100%;
transition: transform .6s var(--cr-ease) !important;
pointer-events: none;
}
& .cr-path-media :is(.elementor-widget-image, .elementor-widget-container, img) { height: 100%; }
& .cr-path-media img {
display: block;
width: 100% !important;
max-width: none !important;
height: 100% !important;
object-fit: cover;
transition: scale 1.4s var(--cr-ease);
}

& .cr-path-tag {
display: flex !important;
align-items: center;
gap: 10px;
}
& .cr-path-tag::before {
content: "";
flex: 0 0 8px;
height: 8px;
background: var(--cr-co);
}
& :is(.cr-path-tag, .cr-path-tag p) {
margin: 0 !important;
color: var(--cr-muted) !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
letter-spacing: .16em !important;
text-transform: uppercase;
}

& :is(.cr-path-name, .cr-path-name :is(h3, h4, h5)) {
margin: 0 !important;
color: var(--cr-ink) !important;
font-size: clamp(21px, 1.7vw, 27px) !important;
font-weight: 700 !important;
line-height: 1.15 !important;
}

& :is(.cr-path-text, .cr-path-text p) {
max-width: 34ch;
margin: 0 !important;
color: var(--cr-text) !important;
font-size: 16px !important;
line-height: 1.55 !important;
}
& .cr-path-text { padding-bottom: 16px !important; }

/* "Learn more" row pinned to the bottom of the card */
& .cr-path-more {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 16px !important;
margin-top: auto !important;
padding: 0 !important;
}
& .cr-path-more-text,
& .cr-path-more-text * {
margin: 0 !important;
color: var(--cr-ink) !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: .14em !important;
text-transform: uppercase;
transition: color .45s var(--cr-ease), transform .6s var(--cr-ease);
}

& .cr-path-icon {
display: grid !important;
place-items: center;
flex: 0 0 auto !important;
width: var(--cr-link-icon) !important;
height: var(--cr-link-icon) !important;
margin-top: auto !important;
padding: 0 !important;
border: 1px solid var(--cr-ink);
border-radius: 50%;
color: var(--cr-ink) !important;
box-shadow: inset 0 0 0 0 var(--cr-accent);
transition: box-shadow .55s var(--cr-ease), color .45s var(--cr-ease), border-color .45s var(--cr-ease);
}
& .cr-path-icon :is(svg, i) {
width: 18px !important;
height: 18px !important;
font-size: 18px !important;
transition: transform .6s var(--cr-ease);
}
& .cr-path-icon svg:not([stroke]) { fill: currentColor; }

& .cr-path:is(:hover, :focus-visible)::after { transform: scaleX(1); }
& .cr-path:is(:hover, :focus-visible) .cr-path-media::before { opacity: 1; }
& .cr-path:is(:hover, :focus-visible) .cr-path-media::after { transform: scaleY(1); }
& .cr-path:is(:hover, :focus-visible) .cr-path-media img { scale: 1.06; }
& .cr-path:is(:hover, :focus-visible) .cr-path-icon {
border-color: var(--cr-accent);
box-shadow: inset 0 0 0 calc(var(--cr-link-icon) / 2 + 1px) var(--cr-accent);
color: #fff !important;
}
& .cr-path:is(:hover, :focus-visible) .cr-path-icon :is(svg, i) { transform: translateX(3px); }
& .cr-path:is(:hover, :focus-visible) .cr-path-more-text { color: var(--cr-accent) !important; transform: translateX(4px); }
& .cr-path:focus-visible { outline: 2px solid var(--cr-accent); outline-offset: 6px; }

/* nav under the track, added by the script */
& .cr-paths-nav {
display: flex;
align-items: center;
gap: 16px;
padding: 0 var(--cr-inset);
}
& .cr-paths-nav.is-hidden { display: none; }
& .cr-paths-progress {
position: relative;
flex: 1 1 auto;
max-width: 320px;
height: 1px;
margin-right: auto;
overflow: hidden;
background: var(--cr-line);
}
& .cr-paths-progress i {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 30%;
background: var(--cr-accent);
}
& .cr-paths-btn {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border: 1px solid var(--cr-ink);
border-radius: 50%;
background: transparent;
color: var(--cr-ink);
box-shadow: inset 0 0 0 0 var(--cr-accent);
cursor: pointer;
transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0);
transition: transform .5s var(--cr-ease), box-shadow .55s var(--cr-ease), color .45s var(--cr-ease), border-color .45s var(--cr-ease), opacity .3s ease;
}
& .cr-paths-btn svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2;
transition: transform .5s var(--cr-ease);
}
& .cr-paths-btn[data-dir="-1"] svg { scale: -1 1; }
& .cr-paths-btn:disabled { opacity: .3; cursor: default; }
& .cr-paths-btn:focus-visible { outline: 2px solid var(--cr-accent); outline-offset: 4px; }
@media (hover: hover) {
& .cr-paths-btn:not(:disabled):hover {
  border-color: var(--cr-accent);
  box-shadow: inset 0 0 0 25px var(--cr-accent);
  color: #fff;
}
& .cr-paths-btn[data-dir="1"]:not(:disabled):hover svg { transform: translateX(3px); }
& .cr-paths-btn[data-dir="-1"]:not(:disabled):hover svg { transform: translateX(-3px); }
}

/* reveal, only once the script has run */
&.cr-ready :is(.cr-title, .cr-paths-intro, .cr-path, .cr-paths-nav) {
transition: opacity .9s var(--cr-ease) var(--cr-d, 0s), translate 1.2s var(--cr-ease) var(--cr-d, 0s);
}
&.cr-ready:not(.is-in) :is(.cr-title, .cr-paths-intro, .cr-path, .cr-paths-nav) {
opacity: 0;
translate: 0 36px;
}
& .cr-paths-intro { --cr-d: .1s; }
& .cr-path:nth-child(1) { --cr-d: .2s; }
& .cr-path:nth-child(2) { --cr-d: .28s; }
& .cr-path:nth-child(3) { --cr-d: .36s; }
& .cr-path:nth-child(4) { --cr-d: .44s; }
& .cr-path:nth-child(n+5) { --cr-d: .52s; }
& .cr-paths-nav { --cr-d: .5s; }

/* desktop and wide: every card visible in a grid aligned to the content width */
@media (min-width: 1025px) {
& .cr-paths-track {
  display: grid !important;
  grid-template-columns: repeat(var(--cr-cols), minmax(0, 1fr));
  gap: clamp(36px, 3.4vw, 56px) var(--cr-gap) !important;
  overflow: visible;
  scroll-snap-type: none;
}
& .cr-path { flex: none !important; }
& .cr-path-media { aspect-ratio: var(--cr-grid-ratio); }
}

/* tablet and phone: swipeable row with the next card peeking in */
@media (max-width: 1024px) {
& .cr-paths-head { grid-template-columns: minmax(0, 1fr); }
& .cr-paths-intro { grid-column: 1; grid-row: auto; }
}

@media (max-width: 767px) {
--cr-card: calc(100vw - 2 * var(--cr-side) - 48px);
}

@media (prefers-reduced-motion: reduce) {
& .cr-path-media, & .cr-path-media img, & .cr-paths-btn { transition: none !important; transform: none !important; scale: 1 !important; }
}

/* editor: cards wrap into rows so every card can be selected */
.elementor-editor-active & { overflow: visible; }
.elementor-editor-active & .cr-paths-track {
flex-wrap: wrap !important;
row-gap: 40px !important;
overflow: visible;
scroll-snap-type: none;
padding-top: 28px !important;
}
.elementor-editor-active & .cr-paths-track::before {
content: "Company cards – on tablet and phone the live site shows these as a swipeable row";
position: absolute;
top: 0;
left: var(--cr-inset);
color: #8b9198;
font: 12px/1.4 monospace;
}
.elementor-editor-active & .cr-path {
flex: 0 0 calc((100% - 2 * var(--cr-gap)) / 3) !important;
animation: none;
}
.elementor-editor-active & .cr-path-media { transform: none; }
.elementor-editor-active & .cr-path-media::before { display: none; }
@media (max-width: 1024px) {
.elementor-editor-active & .cr-path { flex-basis: calc((100% - var(--cr-gap)) / 2) !important; }
}
@media (max-width: 767px) {
.elementor-editor-active & .cr-path { flex-basis: 100% !important; }
}\n}.elementor .cr-cta{--cr-band-mix: 90%;
--cr-link-icon: 52px;
--cr-spot: 520px;
--cr-depth: 16px;
position: relative;
isolation: isolate;
overflow: clip;
flex-direction: row !important;
align-items: flex-end !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
gap: 48px clamp(32px, 6vw, 120px) !important;
width: min(calc(100% - 2 * var(--cr-side)), var(--cr-max)) !important;
max-width: none !important;
margin: 0 auto var(--cr-pad-y) !important;
padding: clamp(56px, 7vw, 112px) clamp(28px, 6vw, 96px) !important;
background-color: var(--cr-band);

/* section background image: slow pan plus cursor depth */
&::after {
content: "" !important;
position: absolute !important;
inset: -6% !important;
z-index: -2;
background-image: inherit;
background-color: inherit;
background-size: cover !important;
background-position: center !important;
translate: calc(var(--cr-px, 0) * var(--cr-depth) * -1) calc(var(--cr-py, 0) * var(--cr-depth) * -1);
pointer-events: none;
}

/* navy overlay with a soft light that follows the cursor */
&::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: -1;
background:
  radial-gradient(var(--cr-spot) circle at var(--cr-mx, 75%) var(--cr-my, 20%), rgba(255, 255, 255, .09), transparent 70%),
  linear-gradient(120deg,
    color-mix(in srgb, var(--cr-band) var(--cr-band-mix), transparent) 0%,
    color-mix(in srgb, var(--cr-band) calc(var(--cr-band-mix) - 16%), transparent) 100%) !important;
pointer-events: none;
}

& .cr-cta-body {
flex: 1 1 520px !important;
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
padding: 0 !important;
}

& .cr-cta-kicker {
display: flex !important;
align-items: center;
gap: 14px;
}
& .cr-cta-kicker::before {
content: "";
flex: 0 0 32px;
height: 1px;
background: rgba(255, 255, 255, .6);
}
& :is(.cr-cta-kicker, .cr-cta-kicker p) {
margin: 0 !important;
color: rgba(255, 255, 255, .75) !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: .2em !important;
text-transform: uppercase;
}

& :is(.cr-cta-title, .cr-cta-title :is(h2, h3)) {
max-width: 16ch;
margin: 0 !important;
color: #fff !important;
font-size: clamp(36px, 4.6vw, 72px) !important;
font-weight: 700 !important;
line-height: 1.02 !important;
letter-spacing: -.01em !important;
}

& .cr-cta-links {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 2.4em !important;
width: auto !important;
padding: 0 !important;
}

& .cr-cta-link {
position: relative;
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 24px !important;
width: auto !important;
min-width: 300px;
padding: 16px 0 !important;
background: none !important;
color: #fff !important;
text-decoration: none !important;
}

/* underline that wipes in on hover */
& .cr-cta-link::after,
& .cr-cta-link::before {
content: "" !important;
position: absolute !important;
left: 0;
right: 0;
bottom: 0;
height: 1px !important;
}
& .cr-cta-link::after { background: rgba(255, 255, 255, .28) !important; }
& .cr-cta-link::before {
z-index: 1;
background: #fff !important;
transform: scaleX(0);
transform-origin: 100% 50%;
transition: transform .7s var(--cr-ease) !important;
}

& .cr-cta-link-text,
& .cr-cta-link-text * {
margin: 0 !important;
color: inherit !important;
font-size: 16px !important;
font-weight: 600 !important;
letter-spacing: .08em !important;
text-transform: uppercase;
}

/* circle icon, pulled toward the cursor */
& .cr-cta-link-icon {
display: grid !important;
place-items: center;
flex: 0 0 auto !important;
width: var(--cr-link-icon) !important;
height: var(--cr-link-icon) !important;
padding: 0 !important;
border: 1px solid rgba(255, 255, 255, .7);
border-radius: 50%;
color: #fff !important;
box-shadow: inset 0 0 0 0 #fff;
transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0);
transition: transform .5s var(--cr-ease), box-shadow .55s var(--cr-ease), color .45s var(--cr-ease), border-color .45s var(--cr-ease);
}
& .cr-cta-link-icon :is(svg, i) {
width: 20px !important;
height: 20px !important;
font-size: 20px !important;
transition: transform .6s var(--cr-ease);
}
& .cr-cta-link-icon svg:not([stroke]) { fill: currentColor; }

& .cr-cta-link:is(:hover, :focus-visible)::before { transform: scaleX(1); transform-origin: 0 50%; }
& .cr-cta-link:is(:hover, :focus-visible) .cr-cta-link-icon {
border-color: #fff;
box-shadow: inset 0 0 0 calc(var(--cr-link-icon) / 2 + 1px) #fff;
color: var(--cr-band) !important;
}
& .cr-cta-link:is(:hover, :focus-visible) .cr-cta-link-icon :is(svg, i) { transform: translateX(3px); }
& .cr-cta-link:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }

@media (prefers-reduced-motion: no-preference) {
&::after { animation: cr-pan 48s ease-in-out infinite alternate; }
}

/* reveal, only once the script has run */
&.cr-ready { transition: clip-path 1.4s var(--cr-ease); }
&.cr-ready:not(.is-in) { clip-path: inset(6% 4% 6% 4%); }
&.cr-ready :is(.cr-cta-kicker, .cr-cta-title, .cr-cta-link) {
transition: opacity .9s var(--cr-ease) var(--cr-d, 0s), translate 1.2s var(--cr-ease) var(--cr-d, 0s);
}
&.cr-ready:not(.is-in) :is(.cr-cta-kicker, .cr-cta-title, .cr-cta-link) {
opacity: 0;
translate: 0 32px;
}
& .cr-cta-kicker { --cr-d: .2s; }
& .cr-cta-title { --cr-d: .28s; }
& .cr-cta-link:nth-child(1) { --cr-d: .4s; }
& .cr-cta-link:nth-child(n+2) { --cr-d: .48s; }

@media (max-width: 767px) {
align-items: flex-start !important;
& .cr-cta-links, & .cr-cta-link { width: 100% !important; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
& .cr-cta-link-icon { transform: none !important; }
}

/* editor: nothing clipped or moving around the band */
.elementor-editor-active & { overflow: visible; }
.elementor-editor-active &::after { inset: 0 !important; animation: none; translate: none; }
.elementor-editor-active & .cr-cta-link-icon { transform: none; }\n}