:root {
  --preloader-color: #487eb0;
  --preloader-z: 99999;
  /* One timing/opacity source for the shell, decorative veil and JS handoff. */
  --slc-preloader-veil-duration: 1400ms;
  --slc-preloader-veil-start-opacity: 0.8;
  --slc-preloader-veil-end-opacity: 0.2;

  /* Shared fixed geometry for the first-paint shell and full preloader. */
  --slc-preloader-panel-width: 380px;
  --slc-preloader-panel-height: 390px;
  --slc-preloader-panel-border-width: 6px;
  --slc-preloader-panel-radius: 6px;
  --slc-preloader-panel-font-size: 15px;
  --slc-preloader-content-size: 300px;
  --slc-preloader-content-top: 10px;
  --slc-preloader-wheel-wrap-size: 292px;
  --slc-preloader-wheel-wrap-top: 5px;
  --slc-preloader-wheel-svg-size: 340px;
  --slc-preloader-rings-size: 292px;
  --slc-preloader-rings-top: 5px;
  --slc-preloader-load-inset: 24px;
  --slc-preloader-load-bottom: 18px;
  --slc-preloader-load-height: 46px;
  --slc-preloader-load-glyph-width: 20px;
  --slc-preloader-load-glyph-height: 36px;
  --slc-preloader-load-glyph-bottom: 4px;
  --slc-preloader-dust-size: 3px;
  --slc-preloader-spark-height: 2px;
  --slc-preloader-glint-size: 5px;
  --slc-preloader-glint-line-long: 17px;
  --slc-preloader-glint-line-thin: 1px;
  --slc-preloader-shell-wheel-size: 260px;
  --slc-preloader-shell-wheel-top: 28px;
  --slc-preloader-shell-wheel-border: 12px;
  --slc-preloader-shell-wheel-inset-shadow: 3px;
  --slc-preloader-shell-wheel-inner-inset: 21px;
  --slc-preloader-shell-wheel-inner-border: 7px;
  --slc-preloader-shell-wheel-hub-inset: 91px;
  --slc-preloader-shell-wheel-hub-border: 5px;
  --slc-preloader-label-inset: 24px;
  --slc-preloader-label-bottom: 29px;
  --slc-preloader-label-font-size: 15px;
  --slc-preloader-label-letter-spacing: 0.45em;
}

/* Keep three explicit geometry profiles in step with the CSS viewport. */
@media (max-width: 2800px), (max-height: 1600px) {
  :root {
    --slc-preloader-panel-width: 310px;
    --slc-preloader-panel-height: 320px;
    --slc-preloader-panel-border-width: 5px;
    --slc-preloader-panel-radius: 5px;
    --slc-preloader-panel-font-size: 14px;
    --slc-preloader-content-size: 245px;
    --slc-preloader-content-top: 8px;
    --slc-preloader-wheel-wrap-size: 238px;
    --slc-preloader-wheel-wrap-top: 4px;
    --slc-preloader-wheel-svg-size: 278px;
    --slc-preloader-rings-size: 238px;
    --slc-preloader-rings-top: 4px;
    --slc-preloader-load-inset: 20px;
    --slc-preloader-load-bottom: 15px;
    --slc-preloader-load-height: 38px;
    --slc-preloader-load-glyph-width: 17px;
    --slc-preloader-load-glyph-height: 30px;
    --slc-preloader-load-glyph-bottom: 3px;
    --slc-preloader-dust-size: 2.5px;
    --slc-preloader-spark-height: 1.7px;
    --slc-preloader-glint-size: 4px;
    --slc-preloader-glint-line-long: 14px;
    --slc-preloader-shell-wheel-size: 212px;
    --slc-preloader-shell-wheel-top: 23px;
    --slc-preloader-shell-wheel-border: 10px;
    --slc-preloader-shell-wheel-inset-shadow: 2px;
    --slc-preloader-shell-wheel-inner-inset: 17px;
    --slc-preloader-shell-wheel-inner-border: 6px;
    --slc-preloader-shell-wheel-hub-inset: 74px;
    --slc-preloader-shell-wheel-hub-border: 4px;
    --slc-preloader-label-inset: 20px;
    --slc-preloader-label-bottom: 24px;
    --slc-preloader-label-font-size: 14px;
    --slc-preloader-label-letter-spacing: 0.42em;
  }
}

@media (max-width: 2100px), (max-height: 1200px) {
  :root {
    --slc-preloader-panel-width: 250px;
    --slc-preloader-panel-height: 260px;
    --slc-preloader-panel-border-width: 4px;
    --slc-preloader-panel-radius: 4px;
    --slc-preloader-panel-font-size: 13px;
    --slc-preloader-content-size: 200px;
    --slc-preloader-content-top: 7px;
    --slc-preloader-wheel-wrap-size: 197px;
    --slc-preloader-wheel-wrap-top: 3px;
    --slc-preloader-wheel-svg-size: 230px;
    --slc-preloader-rings-size: 197px;
    --slc-preloader-rings-top: 3px;
    --slc-preloader-load-inset: 16px;
    --slc-preloader-load-bottom: 12px;
    --slc-preloader-load-height: 32px;
    --slc-preloader-load-glyph-width: 14px;
    --slc-preloader-load-glyph-height: 25px;
    --slc-preloader-load-glyph-bottom: 2px;
    --slc-preloader-dust-size: 2px;
    --slc-preloader-spark-height: 1.3px;
    --slc-preloader-glint-size: 3px;
    --slc-preloader-glint-line-long: 11px;
    --slc-preloader-shell-wheel-size: 176px;
    --slc-preloader-shell-wheel-top: 19px;
    --slc-preloader-shell-wheel-border: 8px;
    --slc-preloader-shell-wheel-inset-shadow: 2px;
    --slc-preloader-shell-wheel-inner-inset: 14px;
    --slc-preloader-shell-wheel-inner-border: 5px;
    --slc-preloader-shell-wheel-hub-inset: 60px;
    --slc-preloader-shell-wheel-hub-border: 3px;
    --slc-preloader-label-inset: 16px;
    --slc-preloader-label-bottom: 19px;
    --slc-preloader-label-font-size: 13px;
    --slc-preloader-label-letter-spacing: 0.4em;
  }
}

/* Reserve the classic scrollbar lane from the first paint. The preloader
   temporarily locks document scrolling; without a stable gutter, releasing
   that lock narrows the Hero and forces a late full-width repaint. */
html {
  scrollbar-gutter: stable;
}

/* The reserved lane sits outside the fixed overlay in Chromium. Paint it as
   part of the opaque shell only; after Hero release the document owns it. */
html.is-preloading {
  background-color: var(--preloader-color);
  scrollbar-color: var(--preloader-color) var(--preloader-color);
}

html.is-preloading::-webkit-scrollbar-track,
html.is-preloading::-webkit-scrollbar-thumb {
  background-color: var(--preloader-color);
}

* {
  box-sizing: border-box;
}

html.is-preloading,
html.is-preloading body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* Compact runtime CSS is asynchronous. Keep the document out of paint until
   those styles apply, then allow the Hero to paint behind the opaque shell. */
html.is-preloading #smooth-wrapper {
  visibility: hidden;
}

html.is-preloading.slc-critical-styles-ready #smooth-wrapper {
  visibility: visible;
}

/* While Hero media is pending, expose a deterministic dark surface instead
   of the light document canvas. Copy can paint independently above it. */
html.is-preloading .hero,
html.is-preloading .hero-media,
html[data-slc-preloader-phase="released"]:not([data-slc-hero-ready="ready"]) .hero,
html[data-slc-preloader-phase="released"]:not([data-slc-hero-ready="ready"]) .hero-media {
  background: #06152b;
}

#slc-preloader-mount {
  position: fixed;
  z-index: var(--preloader-z);
  inset: 0;
  background: var(--preloader-color);
}

#slc-preloader-mount::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  border: 3px solid rgb(255 255 255 / 0.24);
  border-top-color: rgb(255 255 255 / 0.88);
  border-radius: 50%;
  animation: slc-preloader-bootstrap-spin 0.8s linear infinite;
  content: "";
  translate: -50% -50%;
}

/* The first desktop frame already contains a lightweight version of the
   existing wheel panel. It needs no template, runtime script or image. */
.slc-preloader-core {
  display: none;
}

@media (min-width: 64.0625rem) and (prefers-reduced-motion: no-preference) {
  html[data-slc-preloader-mode="full"] #slc-preloader-mount::after {
    display: none;
  }

  html[data-slc-preloader-mode="full"] .slc-preloader-core {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: var(--slc-preloader-panel-width);
    height: var(--slc-preloader-panel-height);
    direction: ltr;
    background: rgba(0, 0, 0, 0.20);
    border: var(--slc-preloader-panel-border-width) solid #33577a;
    border-radius: var(--slc-preloader-panel-radius);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.25),
      inset 0 0 5px rgba(255, 255, 255, 0.15);
    translate: -50% -50%;
  }

  .slc-preloader-core__wheel {
    position: absolute;
    top: var(--slc-preloader-shell-wheel-top);
    left: 50%;
    width: var(--slc-preloader-shell-wheel-size);
    height: var(--slc-preloader-shell-wheel-size);
    border: var(--slc-preloader-shell-wheel-border) solid #4b525e;
    border-radius: 50%;
    background: conic-gradient(from 18deg,
      #f7f9fc, #737984 18%, #eef1f5 32%, #555b66 49%,
      #f8f9fb 64%, #6c737e 82%, #f7f9fc);
    box-shadow: 0 10px 20px rgba(7, 17, 29, 0.28),
      inset 0 0 0 var(--slc-preloader-shell-wheel-inset-shadow) #e8ebef;
    translate: -50% 0;
    animation: slc-preloader-core-wheel 4s linear infinite;
  }

  .slc-preloader-core__wheel::before,
  .slc-preloader-core__wheel::after {
    position: absolute;
    border-radius: 50%;
    content: "";
  }

  .slc-preloader-core__wheel::before {
    inset: var(--slc-preloader-shell-wheel-inner-inset);
    border: var(--slc-preloader-shell-wheel-inner-border) solid #d9dee5;
    background: radial-gradient(circle at 34% 27%,
      #fbfcfe, #aeb4be 24%, #535966 58%, #e7eaef);
    box-shadow: inset 0 0 0 3px #59606c;
  }

  .slc-preloader-core__wheel::after {
    inset: var(--slc-preloader-shell-wheel-hub-inset);
    border: var(--slc-preloader-shell-wheel-hub-border) solid #e4e8ee;
    background: radial-gradient(circle at 35% 30%, #858c97, #252b35 70%);
  }

  .slc-preloader-core__label {
    position: absolute;
    right: var(--slc-preloader-label-inset);
    bottom: var(--slc-preloader-label-bottom);
    left: var(--slc-preloader-label-inset);
    color: #afbbcc;
    font: 700 var(--slc-preloader-label-font-size)/1 Helvetica, Arial, sans-serif;
    letter-spacing: var(--slc-preloader-label-letter-spacing);
    text-align: center;
  }
}

@keyframes slc-preloader-core-wheel {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  #slc-preloader-mount::after {
    animation: none;
  }
}

/* A repeated desktop visit starts with the already light blue veil. */
@media (min-width: 64.0625rem) {
  /* Desktop critical styles block rendering, so cached Hero content can paint
     behind the translucent repeat shell from its first visible frame. */
  html.is-preloading[data-slc-preloader-mode="short"] #smooth-wrapper {
    visibility: visible;
  }

  html[data-slc-preloader-mode="short"] #slc-preloader-mount {
    background: transparent;
  }

  html[data-slc-preloader-mode="short"] #slc-preloader-mount::before {
    position: absolute;
    inset: 0;
    background: var(--preloader-color);
    opacity: var(--slc-preloader-veil-end-opacity);
    content: "";
  }

  html[data-slc-preloader-mode="short"] #slc-preloader-mount::after {
    z-index: 1;
  }
}

/* First desktop visit: fade only the blue veil, leaving the spinner solid. */
@media (min-width: 64.0625rem) and (prefers-reduced-motion: no-preference) {
  html[data-slc-preloader-mode="full"] #slc-preloader-mount {
    background: transparent;
  }

  html[data-slc-preloader-mode="full"] #slc-preloader-mount::before {
    position: absolute;
    inset: 0;
    background: var(--preloader-color);
    content: "";
    animation: slc-preloader-blue-veil var(--slc-preloader-veil-duration) linear both;
  }

  html[data-slc-preloader-mode="full"] #slc-preloader-mount::after {
    z-index: 1;
  }
}

@keyframes slc-preloader-blue-veil {
  from { opacity: var(--slc-preloader-veil-start-opacity); } /* 20% transparent */
  to { opacity: var(--slc-preloader-veil-end-opacity); }   /* 80% transparent */
}

/* Cover the outgoing document during a hard navigation/refresh. */
html.is-page-leaving {
  overflow: hidden;
}

html.is-page-leaving::before {
  position: fixed;
  z-index: calc(var(--preloader-z) + 1);
  inset: 0;
  background: var(--preloader-color, #487eb0);
  content: "";
  pointer-events: none;
}

@keyframes slc-preloader-bootstrap-spin {
  to { transform: rotate(360deg); }
}

body {
  margin: 0;
}