.elementor-17708 .elementor-element.elementor-element-e4400000{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17708 .elementor-element.elementor-element-e4400010{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17708 .elementor-element.elementor-element-e4400020{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS *//* =========================================================================
 * 404
 *
 * The .lx-* design system lives in template 565's page custom CSS, and this
 * template is not that one, so what it uses is copied here. Kept to the same
 * hero / search / grid shape as every other page on the site: a 404 that
 * looks like a different website is how a visitor decides they have been
 * thrown out rather than merely mis-routed.
 * ====================================================================== */

.lx-404hero .lx-hero-inner{padding:64px 40px 56px !important;align-items:center !important}
.lx-404hero .lx-display{margin:14px 0 0 !important;font-size:64px !important;line-height:.98 !important;font-weight:900 !important;letter-spacing:-.035em !important;color:#ffffff !important}
.lx-404hero .lx-lede{font-size:19px !important;line-height:1.5 !important;max-width:46ch !important;margin-top:22px !important}

/* The numeral is decoration, not information — the H1 already says it in
   words, and a screen reader reading "four zero four" adds nothing. */
.lx-404num{font-size:180px;line-height:.8;font-weight:900;letter-spacing:-.06em;color:#ffffff;opacity:.22;text-align:right;user-select:none}

.lx-wrap{max-width:1500px !important}
.lx-404main{padding:48px 0 80px}

.lx-listhead--sp{margin-top:56px}
.lx-codegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;background:transparent;border-top:1px solid rgba(32,30,29,.18)}
.lx-codecard{display:block;background:#ffffff;padding:24px 24px 26px;text-decoration:none;color:#201e1d;border-bottom:1px solid rgba(32,30,29,.18);border-right:1px solid rgba(32,30,29,.18);transition:background .12s ease,color .12s ease;position:relative}
.lx-codecard:nth-child(2n+1){padding-left:0}
.lx-codecard:nth-child(2n){border-right:0}
a.lx-codecard:hover{background:#e8f2fb;color:#08558f}
a.lx-codecard::after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:0;background:var(--lx-blue);transition:width .18s ease}
a.lx-codecard:hover::after{width:100%}
.lx-codecard-abbr{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#9b9797;margin-bottom:7px}
a.lx-codecard:hover .lx-codecard-abbr{color:#0a6dbd}
.lx-codecard-t{display:block;font-size:26px;font-weight:900;letter-spacing:-.03em;line-height:1.15}
.lx-404card-d{display:block;margin-top:10px;font-size:14px;font-weight:500;line-height:1.6;color:var(--lx-g2);max-width:42ch}

.lx-404why{margin-top:22px;max-width:78ch}
.lx-404why p{margin:0 0 14px;font-size:16px;line-height:1.7;color:var(--lx-g1)}
.lx-404why p:last-child{margin-bottom:0}
.lx-404why strong{color:var(--lx-ink)}
.lx-404why a{color:var(--lx-blue-d);font-weight:600}
.lx-404why a:hover{color:var(--lx-blue);text-decoration:underline}

@media(max-width:900px){
  .lx-404hero .lx-hero-inner{grid-template-columns:minmax(0,1fr) !important;gap:24px !important;padding:40px 20px 36px !important}
  .lx-404hero .lx-display{font-size:38px !important}
  .lx-404num{font-size:96px;text-align:left;opacity:.2}
  .lx-404main{padding:32px 0 56px}
  .lx-codegrid{grid-template-columns:minmax(0,1fr)}
  .lx-codecard,.lx-codecard:nth-child(2n),.lx-codecard:nth-child(2n+1){border-right:0;padding:20px 0}
}/* End custom CSS */