﻿/* ==========================================================================
   Legacy 2020 case studies: Kadima, Mirror
   Karla body copy, sky-blue condensed headings, alternating gray "step" bands,
   collapsible research toggles.
   Note: the original declared "Open Sans Condensed" but never loaded it, so it
   renders with the system sans-serif fallback; that is kept on purpose.
   ========================================================================== */
.lcs {
  --lcs-blue: #3fb3ff;
  --lcs-band: #f4f4f4;
  --lcs-quote-band: #e9e9e9;
  --lcs-muted: #777;
  --lcs-ink: #020101;
  --lcs-toggle: #54595f;
  --lcs-rule: #d5d8dc;
  --lcs-condensed: "Open Sans Condensed", sans-serif;
  font-family: "Karla", sans-serif;
  font-size: 14px;
  line-height: 16.8px;
  color: var(--c-navy);
}
.lcs p,
.lcs p:last-child { margin: 0 0 1.6em; }
.lcs ol,
.lcs ul { margin: 0 0 1.5em 3em; padding: 0; }
.lcs li > ol,
.lcs li > ul { margin: 0 0 0 1.5em; }
.lcs figure,
.lcs blockquote { margin: 0; }
.lcs figure.lcs-container { margin-inline: auto; }
.lcs a { transition: color .2s linear; }

/* ---------- Layout: boxed column with the original 24px block spacing ---------- */
.lcs-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding: 10px;
}
.lcs-container > *,
.lcs-col > * { min-width: 0; }
@media (max-width: 1024px) { .lcs-container { max-width: 80%; } }
@media (max-width: 767px) { .lcs-container { max-width: 90%; } }

/* Extra space where the original used spacer widgets */
.lcs-gap { margin-top: 74px; }
.lcs-gap-xl { margin-top: 124px; }

/* Two-column rows */
/* Inner rows had no trailing widget spacing in the original */
.lcs-cols { display: flex; width: 100%; }
.lcs-cols:not(:last-child) { margin-bottom: -24px; }
.lcs-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 10px;
}
.lcs-cols--halves > .lcs-col { width: 50%; }
.lcs-cols--1-2 > .lcs-col:first-child { width: 33.333%; }
.lcs-cols--1-2 > .lcs-col:last-child { width: 66.666%; }
@media (max-width: 1024px) { .lcs-cols { max-width: 80%; margin-inline: auto; } }
@media (max-width: 767px) {
  .lcs-cols { flex-direction: column; max-width: 90%; }
  .lcs-cols > .lcs-col,
  .lcs-cols--1-2 > .lcs-col:first-child,
  .lcs-cols--1-2 > .lcs-col:last-child { width: 100%; }
}

/* ---------- Type ---------- */
.lcs-eyebrow {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: var(--lcs-muted);
}
.lcs-title,
.lcs-step-title {
  margin-top: -28px;
  font-family: var(--lcs-condensed);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  color: var(--lcs-blue);
}
.lcs-title { font-size: 56px; }
.lcs-step-title { font-size: 48px; }
.lcs-step-title.lcs-gap-xl { margin-top: 96px; }
.lcs-subhead {
  margin-bottom: 2px;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 16.8px;
  text-transform: uppercase;
  color: var(--lcs-ink);
}
.lcs-center { text-align: center; }
.lcs p.lcs-proto-link {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--lcs-muted);
}

/* ---------- Intro + hero ---------- */
.lcs-intro { padding-top: 3%; }
/* Improvement: on tablet/mobile the original tucked the eyebrow under the header's menu/Contact buttons */
@media (max-width: 1024px) { .lcs-intro { padding-top: 92px; } }
.lcs-hero { padding: 10px; }

.lcs-figure img { margin-inline: auto; }
.lcs-figure--white { background-color: #fff; }

/* ---------- Sections ---------- */
.lcs-overview > .lcs-container { padding-top: 80px; padding-bottom: 84px; }
.lcs-step > .lcs-container { padding-top: 84px; padding-bottom: 84px; }
/* a trailing two-column row had no widget spacing below it */
.lcs-container:has(> .lcs-cols:last-child) { padding-bottom: 60px; }
.lcs .lcs-overview--tight-bottom > .lcs-container,
.lcs .lcs-step--tight-bottom > .lcs-container { padding-bottom: 10px; }

.lcs-step--gray { background-color: var(--lcs-band); }

/* Testimonial band */
.lcs-quote { background-color: var(--lcs-quote-band); }
.lcs-quote > .lcs-container { padding-top: 49px; }
.lcs .lcs-quote__text p {
  margin: 0;
  font-family: var(--lcs-condensed);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--lcs-toggle);
}
.lcs-quote figcaption { margin-bottom: 1.6em; text-align: center; }

/* ---------- Buttons ---------- */
.lcs p.lcs-button-wrap { margin: 0 0 20px; }
.lcs .lcs-button {
  display: inline-block;
  padding: 10px 40px;
  border: 2px solid var(--lcs-blue);
  border-radius: 0;
  background-color: var(--lcs-blue);
  color: #fff;
  font-family: var(--lcs-condensed);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  transition: all .3s;
}
/* Improvement: tighter side padding on phones so short labels stay on one line */
@media (max-width: 767px) { .lcs .lcs-button { padding-inline: 24px; } }
.lcs .lcs-button:hover,
.lcs .lcs-button:focus-visible { background-color: #fff; color: var(--lcs-blue); }

/* ---------- Toggles (Elementor "toggle" widget equivalent) ---------- */
.lcs-toggle { interpolate-size: allow-keywords; }
.lcs-toggle summary {
  display: block;
  padding: 15px;
  border-bottom: 1px solid var(--lcs-rule);
  font-weight: 700;
  color: var(--lcs-toggle);
  cursor: pointer;
  list-style: none;
  transition: color .2s linear;
}
.lcs-toggle summary::-webkit-details-marker { display: none; }
.lcs-toggle summary::before {
  content: "";
  float: left;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'%3E%3Cpath d='M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z'/%3E%3C/svg%3E") left center / auto 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'%3E%3Cpath d='M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z'/%3E%3C/svg%3E") left center / auto 14px no-repeat;
}
.lcs-toggle details[open] > summary { border-bottom: 0; color: var(--lcs-blue); }
.lcs-toggle details[open] > summary::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z'/%3E%3C/svg%3E");
}
.lcs-toggle__content { padding: 15px; border-bottom: 1px solid var(--lcs-rule); }
/* 400ms slide like jQuery slideDown/slideUp (Chromium; elsewhere it opens instantly) */
.lcs-toggle details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .4s cubic-bezier(.45, .05, .55, .95), content-visibility .4s allow-discrete;
}
.lcs-toggle details[open]::details-content { block-size: auto; }
@media (max-width: 767px) {
  .lcs-toggle summary { padding: 12px; }
  .lcs-toggle__content { padding: 12px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .lcs-toggle details::details-content { transition: none; }
}
