.df-implx {
--maroon: var(--df-navy-ink, #083F4C); --wh: rgba(255, 255, 255, .96);
--wh-dim: rgba(255, 255, 255, .8);
--hair: rgba(255, 255, 255, .28);
font-family: var(--font-sans);
color: #fff;
-webkit-font-smoothing: antialiased;
}
.df-implx * { margin: 0; padding: 0; box-sizing: border-box; }
.df-implx img { display: block; max-width: 100%; }
.df-implx a { color: inherit; } .df-implx .stage { padding: 0; }
.df-implx .frame { width: 100%; max-width: none; margin: 0 auto; container-type: inline-size; height: 100%; } .df-implx .card {
position: relative;
border-radius: 0;
overflow: hidden; isolation: isolate;
background: #E9E6E0; }
.df-implx .card::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(75% 75% at 100% 100%, rgba(6, 33, 40, .52), transparent 60%),
radial-gradient(55% 55% at 0% 100%, rgba(0, 155, 187, .18), transparent 60%),
radial-gradient(60% 45% at 50% 0%, rgba(6, 52, 64, .16), transparent 65%);
} .df-implx .implant { position: relative; z-index: 1; } .df-implx .implant img { width: 100%; height: auto; user-select: none; -webkit-user-drag: none; } .df-implx .btn {
display: inline-flex; align-items: center; gap: .9em;
font-weight: 500; letter-spacing: .03em; text-decoration: none;
border-radius: .4em; white-space: nowrap;
transition: transform .18s ease, background .18s ease, color .18s ease;
}
.df-implx .btn svg { width: 1em; height: 1em; flex: none; }
.df-implx .btn-primary { background: #fff; color: var(--maroon); }
.df-implx .btn-primary:hover { transform: translateY(-2px); }
.df-implx .btn-ghost { border: 2px solid rgba(255, 255, 255, .95); color: #fff; }
.df-implx .btn-ghost:hover { background: #fff; color: var(--maroon); }
.df-implx .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .df-implx .btn { text-transform: uppercase; }
.df-implx .mobilebar .btn { text-transform: none; }
.df-implx .desc { text-transform: uppercase; }
.df-implx .desc strong { font-weight: 600; }
.df-implx .desc p { margin: 0; }
.df-implx .lbl-eyebrow {
font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
color: var(--wh);
}
.df-implx .stat .num {
font-family: var(--font-display); font-weight: 600; line-height: 1; letter-spacing: .005em;
display: flex; align-items: baseline; gap: .16em;
}
.df-implx .stat .num .star { width: .6em; height: .6em; flex: none; transform: translateY(-.03em); }
.df-implx .stat .lbl {
font-weight: 500; letter-spacing: .02em; text-transform: uppercase;
color: var(--wh); line-height: 1.41;
}
.df-implx .headline {
font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
letter-spacing: .002em;
} .df-implx .step { position: relative; border-top: 1px solid var(--hair); }
.df-implx .idx {
font-family: var(--font-display); font-weight: 600; line-height: 1;
color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .55);
}
.df-implx .step h3 {
font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
letter-spacing: .01em; line-height: 1.12;
}
.df-implx .step p { color: var(--wh); line-height: 1.6; }
.df-implx .more {
display: inline-flex; align-items: center; gap: .6em;
font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
text-decoration: none;
}
.df-implx .more svg { width: 1em; height: 1em; transition: transform .18s ease; }
.df-implx .step:hover .more svg { transform: translate(3px, -3px); }
.df-implx .more::after { content: ""; position: absolute; inset: 0; }
.df-implx .more:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.df-implx .rail, .df-implx .pill { display: none; } .df-implx .mobilebar {
position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50;
display: flex; justify-content: center;
padding-bottom: env(safe-area-inset-bottom, 0);
opacity: 0; transform: translateY(16px); pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
}
.df-implx .mobilebar .btn {
width: 100%; max-width: 480px; justify-content: center;
font-size: 16px; padding: 1em 1.4em;
box-shadow: 0 12px 30px -10px rgba(6, 33, 40, .55);
}
.df-implx .mobilebar.show { opacity: 1; transform: none; pointer-events: auto; } .df-implx .card {
display: flex; flex-direction: column; align-items: center; text-align: center;
padding: 6cqw 6cqw 9cqw; gap: 0;
}
.df-implx .hero-abs { display: contents; }
.df-implx .btn-ghost { order: 1; align-self: flex-end; font-size: 3.2cqw; padding: 2.6cqw 4cqw; border-radius: 1.6cqw; }
.df-implx .implant { order: 2; width: 52%; max-width: 250px; margin-top: 2cqw; }
.df-implx .headline { order: 3; margin-top: 4.5cqw; font-size: 8.4cqw; line-height: 1.07; }
.df-implx .desc { order: 4; margin-top: 4.5cqw; font-size: 3.45cqw; line-height: 1.55; max-width: 36ch; color: var(--wh); }
.df-implx .stats { order: 5; display: flex; justify-content: center; gap: 8cqw; margin-top: 6.5cqw; list-style: none; }
.df-implx .stat { text-align: center; }
.df-implx .stat .num { font-size: 7.2cqw; justify-content: center; }
.df-implx .stat .lbl { font-size: 2.9cqw; margin-top: .55em; }
.df-implx .btn-primary.cta-main { order: 6; margin-top: 6.5cqw; font-size: 3.5cqw; padding: 3.4cqw 5.5cqw; border-radius: 1.6cqw; }
.df-implx .lbl-eyebrow { order: 7; margin-top: 8cqw; font-size: 3.1cqw; }
.df-implx .steps { order: 8; width: 100%; margin-top: 4cqw; text-align: left; }
.df-implx .step { padding: 5.5cqw 0 6cqw; }
.df-implx .idx { font-size: 8.5cqw; }
.df-implx .step h3 { margin-top: .5em; font-size: 5.6cqw; }
.df-implx .step p { margin-top: .8em; font-size: 3.5cqw; max-width: 52ch; }
.df-implx .more { margin-top: 1.2em; font-size: 3.1cqw; } .df-implx .canvas { display: contents; } @media (min-width: 820px) {
.df-implx .mobilebar { display: none; }
.df-implx:not(.is-fx) .card { display: block; padding: 0 0 3.4cqw; text-align: left; }
.df-implx:not(.is-fx) .canvas {
display: block; position: relative;
aspect-ratio: 1850 / 1428;
}
.df-implx:not(.is-fx) .hero-abs { position: absolute; inset: 0; }
.df-implx:not(.is-fx) .steps {
order: initial; width: auto; margin: 0;
padding: 2.4cqw 6.5% 0;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw;
text-align: left;
}
.df-implx:not(.is-fx) .steps .step { padding: 1.6cqw 0 0; }
} @media (min-width: 820px) {
.df-implx .el { position: absolute; z-index: 2; margin: 0; }
.df-implx .implant { position: absolute; z-index: 1; max-width: none; width: 33.78%; margin: 0; }
.df-implx .btn-ghost {
order: initial; align-self: auto; position: absolute; z-index: 3;
top: 5.72%; right: 7.08%; height: 3.89cqw;
padding: 0 1.35cqw; font-size: 1.351cqw; border-width: 0.11cqw; border-radius: .4cqw;
}
.df-implx .desc {
order: initial; top: 20.31%; right: 7.03%; max-width: 24.6cqw;
text-align: right; font-size: 1.30cqw; line-height: 1.497; color: var(--wh);
}
.df-implx .stats { order: initial; display: contents; margin: 0; }
.df-implx .stat { position: absolute; z-index: 2; top: 32.49%; text-align: left; }
.df-implx .stat--1 { left: 7.05%; }
.df-implx .stat--2 { left: 14.70%; }
.df-implx .stat--3 { left: 25.00%; }
.df-implx .stat .num { font-size: 2.80cqw; justify-content: flex-start; }
.df-implx .stat .lbl { font-size: 1.06cqw; margin-top: .35em; }
.df-implx .lbl-eyebrow { order: initial; left: 6.38%; top: 72.57%; font-size: 1.30cqw; margin: 0; }
.df-implx .headline {
order: initial; right: 7.08%; bottom: 4.63%; margin: 0;
text-align: right; font-size: 4.6cqw; line-height: 1.07;
}
.df-implx .btn-primary.cta-main {
order: initial; position: absolute; z-index: 3; margin: 0;
top: 60.92%; right: 6.97%; height: 3.84cqw;
padding: 0 1.5cqw; font-size: 1.351cqw; border-radius: .4cqw;
}
.df-implx .idx { font-size: 5.2cqw; }
.df-implx .step h3 { margin-top: .5em; font-size: 2.9cqw; }
.df-implx .step p { margin-top: .8em; font-size: 1.08cqw; }
.df-implx .more { margin-top: 1.2em; font-size: .95cqw; }
} .df-implx.is-fx { height: 460vh; } .df-implx.is-fx, .df-implx.is-fx .card { background: #E9E6E0; } .df-implx.is-fx .stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: stretch; }
.df-implx.is-fx .frame { display: flex; }
.df-implx.is-fx .card { display: block; width: 100%; height: 100%; padding: 0; aspect-ratio: auto; }
.df-implx.is-fx .canvas { display: contents; }
.df-implx.is-fx .hero-abs {
position: absolute; inset: 0; z-index: 2;
will-change: transform, opacity;
}
.df-implx.is-fx .implant { left: 0; top: 0; transform-origin: 50% 58%; will-change: transform; }
.df-implx.is-fx .steps {
order: initial; position: absolute; right: 6.5%; top: 0; height: 100%; width: 41%;
margin: 0; display: block; text-align: left; z-index: 2;
}
.df-implx.is-fx .step {
position: absolute; left: 0; right: 0; top: 50%;
transform: translateY(calc(-50% + 40px));
opacity: 0; visibility: hidden;
padding: 2.2cqw 0 0;
will-change: transform, opacity;
}
.df-implx.is-fx .rail {
display: flex; flex-direction: column; gap: 2.4cqw;
position: absolute; left: 3.2%; top: 50%; transform: translateY(-50%);
padding-left: 1.3cqw; z-index: 3;
opacity: 0; visibility: hidden;
}
.df-implx.is-fx .rail::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--hair); }
.df-implx.is-fx .rail .fill { position: absolute; left: 0; top: 0; width: 1px; background: #fff; }
.df-implx.is-fx .rail button {
background: none; border: 0; cursor: pointer; font: inherit;
font-size: .95cqw; font-weight: 500; letter-spacing: .08em;
color: rgba(255, 255, 255, .45); text-align: left; transition: color .2s ease;
}
.df-implx.is-fx .rail button[aria-current="true"] { color: #fff; }
.df-implx.is-fx .rail button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.df-implx.is-fx .pill {
display: inline-flex; position: absolute; left: 6.5%; bottom: 6.5%; z-index: 3;
height: 3.84cqw; padding: 0 1.5cqw; font-size: 1.351cqw; border-radius: .4cqw;
opacity: 0; visibility: hidden; transform: translateY(14px);
will-change: transform, opacity;
} @media (min-width: 1500px) {
.df-implx .btn-ghost { height: 58px; padding: 0 20px; font-size: 20px; border-width: 1.7px; border-radius: 6px; }
.df-implx .desc { max-width: 370px; font-size: 19.5px; }
.df-implx .stat .num { font-size: 42px; }
.df-implx .stat .lbl { font-size: 16px; }
.df-implx .lbl-eyebrow { font-size: 19.5px; }
.df-implx .headline { font-size: 69px; }
.df-implx .btn-primary.cta-main { height: 58px; padding: 0 22px; font-size: 20px; border-radius: 6px; }
.df-implx .idx { font-size: 78px; }
.df-implx .step h3 { font-size: 44px; }
.df-implx .step p { font-size: 16px; }
.df-implx .more { font-size: 14px; }
.df-implx.is-fx .step { padding-top: 33px; }
.df-implx.is-fx .rail { gap: 36px; padding-left: 20px; }
.df-implx.is-fx .rail button { font-size: 14px; }
.df-implx.is-fx .pill { height: 58px; padding: 0 22px; font-size: 20px; border-radius: 6px; }
} .df-implx { --wh: #1e1e1e; --wh-dim: rgba(30, 30, 30, .68); --hair: rgba(30, 30, 30, .16); color: var(--df-ink); }
.df-implx .btn-primary { background: var(--df-blue); color: #fff; } .df-implx .btn-primary:hover { background: var(--df-blue-hover); color: #fff; }
.df-implx .btn-ghost { border-color: rgba(30, 30, 30, .38); color: var(--df-ink); }
.df-implx .btn-ghost:hover { background: var(--df-ink); color: #fff; }
.df-implx .btn:focus-visible, .df-implx .more:focus-visible { outline-color: var(--df-ink); }
.df-implx .idx { -webkit-text-stroke: 1.5px rgba(30, 30, 30, .45); }
.df-implx.is-fx .rail .fill { background: var(--df-ink); }
.df-implx.is-fx .rail button { color: rgba(30, 30, 30, .42); }
.df-implx.is-fx .rail button[aria-current="true"] { color: var(--df-ink); }
.df-implx.is-fx .rail button:focus-visible { outline-color: var(--df-ink); }
.df-implx .card::before { background: none; }