/* ============================================================
   X-COATINGS — Design system
   Tokens, fonts, base reset, shared utilities, and the carousel.
   Loaded site-wide and BEFORE site.css, which extends these tokens.
   The brand-guidelines "book" document styles live in a separate file.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@400;500;600;700;800&family=Saira+SemiCondensed:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* core palette */
  --blue: #1B4B9C;
  --blue-bright: #2C63C4;
  --blue-deep: #0E2A66;
  --navy: #0B1B36;
  --navy-2: #0F2347;
  --ink: #1C1F22;
  --ink-2: #3C434B;
  --ink-3: #6B747D;
  --silver: #C2C8CF;
  --silver-lo: #9AA1AB;
  --silver-hi: #E9ECEF;
  --cloud: #F4F6F8;
  --line: #E3E6EA;
  --line-2: #D2D7DD;
  --white: #FFFFFF;

  --grad-x: linear-gradient(148deg, #4C82E4 0%, #2C63C4 30%, #1B4B9C 60%, #0E2A66 100%);
  --grad-navy: linear-gradient(160deg, #13284e 0%, #0B1B36 70%);

  --display: 'Saira Condensed', 'Saira', system-ui, sans-serif;
  --semi: 'Saira SemiCondensed', 'Saira', system-ui, sans-serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* base reset ----------------------------------------------------- */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--white);
  font-family: var(--body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* type utilities ------------------------------------------------- */
.mono {
  font-family: var(--mono);
}

.disp {
  font-family: var(--display);
}

.semi {
  font-family: var(--semi);
}

.up {
  text-transform: uppercase;
}

/* eyebrow kicker ------------------------------------------------- */
.eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--blue);
}

.eyebrow.on-dark {
  color: #8FB2F0;
}

/* white containment plate for a logo on dark / colored grounds --- */
.logo-plate {
  background: #fff;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  padding: 14px 20px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .34);
}

/* ============================================================
   Family of Brands carousel — Swiper (continuous-drift marquee)
   Scoped under .xc-brands / .xc-brands-swiper. Swiper handles motion;
   these rules only size the slides and add the soft edge fade.
   ============================================================ */

.xc-brands {
  padding: 64px 0;
}

.xc-brands__head {
  text-align: center;
  margin-bottom: 40px;
}

.xc-brands__title {
  margin: 0;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink);
}

/* Allow the heading to wrap on small phones so it never overflows the screen */
@media (max-width: 520px) {
  .xc-brands__title {
    white-space: normal;
  }
}

/* Soft fade on both edges so logos ease in/out */
.xc-brands-swiper {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

/* Linear timing turns Swiper's autoplay into a steady continuous drift */
.xc-brands-swiper .swiper-wrapper {
  transition-timing-function: linear;
  align-items: center;
}

/* slidesPerView:'auto' uses these fixed widths */
.xc-brands-swiper .swiper-slide {
  width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .xc-brands-swiper .swiper-slide {
    width: 300px;
  }
}

.xc-brands__link {
  display: block;
  width: 100%;
}

.xc-brands__logo {
  display: block;
  width: 100%;
  height: 125px;
  object-fit: contain;
}