/* ==========================================================================
   INSIGHTS — WebMotion v2 design language, backported to the v1 site.
   ==========================================================================

   Everything here is scoped under .wm so it cannot collide with the bought
   template's stylesheet, which is loaded on the same page and is far less
   specific than it thinks it is. Nothing in this file leaks out of .wm.

   This is a deliberate stopgap: the same visual language as the v2 rebuild,
   applied to the three blog templates, so the section people actually read
   stops looking like a 2015 theme while v2 is finished.
   ========================================================================== */

.wm {
  /* --- Azure: sampled from the WebMotion monogram (#2cb6e7 / #2b6695) ----- */
  --azure-100: #cfedff;
  --azure-200: #a3ddff;
  --azure-300: #5fcdfb;
  --azure-400: #29b6f0;
  --azure-500: #0d95d8;
  --azure-600: #0079b8;
  --azure-700: #005f8f;

  /* --- Blue-shifted neutrals --------------------------------------------- */
  --ink-950: #080c12;
  --ink-900: #0e141c;
  --ink-800: #17202b;
  --ink-700: #22303f;
  --ink-600: #35485c;
  --ink-500: #4e6479;
  --ink-400: #7a8ea3;
  --ink-300: #a8b8c8;
  --ink-200: #cdd8e2;
  --ink-100: #e4ebf1;
  --ink-50: #f2f6f9;
  --paper: #fbfcfe;

  --font-display: 'Mulish', sans-serif;
  --font-sans: 'Roboto', sans-serif;
  --font-mono: 'Mulish', sans-serif;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --radius-sm: 4px;
  --radius-md: 6px;

  font-family: var(--font-sans);
  color: var(--ink-950);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

/* The template sets colours on almost everything; these reclaim the scope. */
.wm h1, .wm h2, .wm h3, .wm h4, .wm p, .wm a, .wm li, .wm span {
  color: inherit;
}

.wm *, .wm *::before, .wm *::after { box-sizing: border-box; }

.wm img { max-width: 100%; height: auto; display: block; }

.wm ::selection { background-color: var(--azure-500); color: #fff; }

/* --- Layout ---------------------------------------------------------------- */

.wm__container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
}

.wm__section { padding-block: clamp(3rem, 1.5rem + 5vw, 5.5rem); }

/* --- Page head: dark band, matching v2 ------------------------------------- */

.wm__head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--ink-950);
  color: #f4f8fb;
  padding-block: clamp(3rem, 1.5rem + 5vw, 5.5rem) clamp(2.5rem, 1rem + 4vw, 4rem);
}

.wm__head::before {
  content: '';
  position: absolute;
  inset-block-start: -60%;
  inset-inline-end: -10%;
  width: 44rem;
  height: 44rem;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, rgb(41 182 240 / 0.16) 0%, transparent 62%);
}

.wm__head h1 {
  margin: 1rem 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.7rem + 2.7vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.026em;
  color: #fdfeff !important;
  max-width: 20ch;
  text-wrap: balance;
}

.wm__head p {
  margin: 1rem 0 0;
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  line-height: 1.55;
  color: var(--ink-300) !important;
  max-width: 54ch;
}

/* --- Eyebrow label: uppercase mono, the v2 signature ----------------------- */

.wm__label {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azure-400) !important;
}

.wm__label::before {
  content: '';
  width: 2rem;
  height: 1px;
  background-color: currentColor;
  opacity: 0.6;
}

/* --- Category filter bar --------------------------------------------------- */

.wm__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-end: 2.5rem;
}

.wm__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.625rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-600) !important;
  border: 1px solid rgb(8 12 18 / 0.14);
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
}

.wm__chip:hover {
  color: var(--azure-700) !important;
  border-color: var(--azure-400);
  background-color: #eaf7ff;
}

.wm__chip--active {
  color: var(--azure-700) !important;
  background-color: #eaf7ff;
  border-color: rgb(41 182 240 / 0.45);
}

/* --- Card grid ------------------------------------------------------------- */

.wm__grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.wm__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  background-color: #fff;
  border: 1px solid rgb(8 12 18 / 0.08);
  border-radius: var(--radius-md);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.wm__card:hover {
  border-color: rgb(8 12 18 / 0.28);
  transform: translateY(-1px);
}

.wm__card-media {
  margin: -1.5rem -1.5rem 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background-color: var(--ink-50);
}

.wm__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out-expo);
}

.wm__card:hover .wm__card-media img { transform: scale(1.03); }

.wm__card-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500) !important;
  margin: 0;
}

.wm__card-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.011em;
  line-height: 1.3;
  color: var(--ink-950) !important;
}

.wm__card-body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--ink-600) !important;
}

.wm__card-footer { margin-block-start: auto; padding-block-start: 1rem; }

/* Whole card clickable, one real anchor for screen readers. */
.wm__stretch::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* --- Arrow link ------------------------------------------------------------ */

.wm__arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 560;
  text-decoration: none;
  color: var(--ink-950) !important;
  transition: color 0.15s ease;
}

.wm__arrow svg { width: 1em; height: 1em; transition: transform 0.25s var(--ease-out-expo); }
.wm__arrow:hover { color: var(--azure-700) !important; }
.wm__arrow:hover svg { transform: translateX(0.25rem); }

/* --- Buttons --------------------------------------------------------------- */

.wm__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6875rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 580;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

/* Bright azure with ink text — a blue dark enough to carry white text is
   necessarily a dull blue, so the polarity is flipped instead. */
.wm__btn--cta {
  background-color: var(--azure-400);
  border-color: var(--azure-400);
  color: var(--ink-950) !important;
}

.wm__btn--cta:hover {
  background-color: var(--azure-300);
  border-color: var(--azure-300);
  color: var(--ink-950) !important;
}

.wm__btn--outline {
  border-color: rgb(255 255 255 / 0.24);
  color: #f4f8fb !important;
}

.wm__btn--outline:hover {
  background-color: rgb(255 255 255 / 0.07);
  border-color: rgb(255 255 255 / 0.42);
}

/* --- Article body ---------------------------------------------------------- */

.wm__prose {
  max-width: 68ch;
  margin-inline: auto;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink-600) !important;
}

.wm__prose > * + * { margin-block-start: 1.5rem; }

.wm__prose h2 {
  margin-block: 3rem 1rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-950) !important;
}

.wm__prose h3 {
  margin-block: 2.25rem 0.5rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.011em;
  color: var(--ink-950) !important;
}

.wm__prose ul, .wm__prose ol { padding-inline-start: 1.5rem; }
.wm__prose li + li { margin-block-start: 0.5rem; }
.wm__prose li::marker { color: var(--azure-500); }

/* Text colour is capped by contrast on white, so the vivid azure goes into
   the underline — a 2px graphic only needs 3:1. */
.wm__prose a {
  color: var(--azure-600) !important;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--azure-400);
  transition: all 0.15s ease;
}

.wm__prose a:hover {
  color: var(--azure-700) !important;
  background-color: #eaf7ff;
}

.wm__prose blockquote {
  margin: 0;
  padding-inline-start: 1.5rem;
  border-inline-start: 2px solid var(--azure-400);
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.35;
  color: var(--ink-950) !important;
}

.wm__prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 0.15em 0.4em;
  border-radius: 2px;
  background-color: var(--ink-50);
  border: 1px solid rgb(8 12 18 / 0.08);
}

.wm__prose pre {
  padding: 1.5rem;
  border-radius: var(--radius-md);
  background-color: var(--ink-950);
  color: var(--ink-100);
  overflow-x: auto;
  font-size: 0.875rem;
}

.wm__prose pre code { padding: 0; background: none; border: none; }

.wm__prose img {
  border-radius: var(--radius-md);
  border: 1px solid rgb(8 12 18 / 0.08);
}

/* --- Meta row -------------------------------------------------------------- */

.wm__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin-block-start: 1.5rem;
  padding-block-start: 1rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
}

.wm__meta span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400) !important;
}

/* --- Rules and pagination -------------------------------------------------- */

.wm__rule { border-top: 1px solid rgb(8 12 18 / 0.08); }

.wm__pagination { margin-block-start: 3rem; }
.wm__pagination .pagination { justify-content: center; }

.wm__empty {
  padding-block: 3rem;
  font-size: 1.125rem;
  color: var(--ink-500) !important;
}

@media (prefers-reduced-motion: reduce) {
  .wm *, .wm *::before, .wm *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   HERO — v2 copy treatment on the existing carousel
   ==========================================================================
   Scoped to the template's own classes. The headline was previously the
   company name, which tells a visitor nothing; these styles support the
   replacement copy without touching the carousel's behaviour.
   ========================================================================== */

.home-carousel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  font-family: 'Mulish', sans-serif;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #29b6f0 !important;
}

.home-carousel-eyebrow::before {
  content: '';
  width: 2rem;
  height: 1px;
  background-color: currentColor;
  opacity: .6;
}

.home-carousel-title {
  font-family: 'Mulish', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(2.5rem, 1.8rem + 3.4vw, 4.75rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -.026em !important;
  max-width: 18ch;
  text-wrap: balance;
}

.home-carousel-text {
  font-family: 'Roboto', sans-serif !important;
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem) !important;
  line-height: 1.55 !important;
  max-width: 56ch;
  text-wrap: pretty;
}

/* --- Hero buttons ----------------------------------------------------------
   The template animates a large circular ::before over these on hover — a
   400x430px disc that scales from 0 and fills the button. Setting
   background-color alone therefore does nothing on hover, because the disc
   paints over it. Both the base surface and that disc have to be set, and
   the label has to stay legible against each.

   Primary is white on the dark hero: the highest-contrast surface available,
   and it stops competing with the azure used for accents. On hover the disc
   fills azure, so the label reads ink-on-white then ink-on-azure — 18.9:1
   and 8.4:1 respectively. It never disappears at any point in the animation. */

.theme-btn-1 {
  background: #ffffff !important;
  color: #080c12 !important;
  border-color: #ffffff !important;
  font-weight: 580 !important;
}

.theme-btn-1::before {
  background: #29b6f0 !important;
}

.theme-btn-1:hover,
.theme-btn-1:focus,
.theme-btn-1:hover i,
.theme-btn-1:focus i {
  /* Ink, not white. The template flips the label to #fff on hover, which
     was white text over a light disc — the reason it vanished. */
  color: #080c12 !important;
}

/* Secondary: outlined on the dark hero, filling white on hover. */
.theme-btn-2 {
  background: transparent !important;
  color: #f4f8fb !important;
  border: 1px solid rgb(255 255 255 / .28) !important;
  font-weight: 540 !important;
}

.theme-btn-2::before {
  background: #ffffff !important;
}

.theme-btn-2:hover,
.theme-btn-2:focus,
.theme-btn-2:hover i,
.theme-btn-2:focus i {
  color: #080c12 !important;
  border-color: #ffffff !important;
}

/* Keep the label above the expanding disc. The template gives the button
   z-index 3 but does not always stack its own text children. */
.theme-btn-1 > *,
.theme-btn-2 > * {
  position: relative;
  z-index: 2;
}