/* ==========================================================================
   Keynes — interior article pages (Ver 3.0).

   Currently the case study template. Loaded only where the legacy stylesheets
   are dequeued, so like kx-home.css it owns the document and is free to set
   base element styles.

   Depends on kx-chrome.css for @font-face, the :root tokens and the button and
   pill classes — chrome is always enqueued first.

   The design handoff covers the one-pager only, so there is no reference for
   this page. It is built from the same system: white and #f5f5f7 bands, the
   ink/muted type scale, 22px cards, the #platform-scale stat panel and the
   #proof quote treatment.
   ========================================================================== */

/* --- Base ----------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--kx-bg);
  color: var(--kx-ink);
  font-family: var(--kx-font);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: var(--kx-purple); text-decoration: none; }
a:hover { color: var(--kx-purple-link-hover); }
::selection { background: rgba(110, 86, 248, .18); }

img, svg, video { display: block; max-width: 100%; }

:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 2px solid var(--kx-purple);
  outline-offset: 3px;
  border-radius: 4px;
}

.kx-article__container {
  width: min(100% - var(--kx-gutter), var(--kx-container));
  margin-inline: auto;
}

/* Narrower measure for running prose - long lines are the main readability
   risk on a page that is mostly body copy. */
.kx-prose { max-width: 72ch; }

/* --- Hero ----------------------------------------------------------------- */
.kx-cs-hero {
  padding: clamp(48px, 7vw, 84px) 0 clamp(32px, 4vw, 48px);
  background: var(--kx-bg);
}
.kx-cs-hero__inner { display: flex; flex-direction: column; gap: 26px; }

.kx-cs-hero__eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kx-muted);
}
.kx-cs-hero__title {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(32px, 4.2vw, 62px);
  font-weight: 600;
  letter-spacing: -.038em;
  line-height: 1.05;
  text-wrap: pretty;
}
.kx-cs-hero__logo { display: flex; align-items: center; }
.kx-cs-hero__logo img { max-height: 42px; width: auto; object-fit: contain; }

/* Client hero artwork ranges from portrait crops to wide banners, so the
   panel takes its height from the image rather than imposing one. Nothing is
   ever cropped; a narrow image simply sits centred on the panel. */
.kx-cs-hero__media {
  display: flex;
  justify-content: center;
  margin-top: 8px;
  border-radius: 32px;
  overflow: hidden;
  background: var(--kx-bg-alt);
}
.kx-cs-hero__media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(300px, 42vw, 480px);
  object-fit: contain;
}

/* --- Brand strip ---------------------------------------------------------- */
.kx-cs-brand {
  padding: clamp(28px, 4vw, 44px) 0;
  background: var(--kx-bg);
}
.kx-cs-brand__inner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 34px);
  flex-wrap: wrap;
  padding: 24px;
  border-radius: 22px;
  border: 1px solid var(--kx-border);
}
.kx-cs-brand__logo { flex: 0 0 auto; }
.kx-cs-brand__logo img { max-height: 46px; max-width: 190px; width: auto; object-fit: contain; }
.kx-cs-brand__copy { flex: 1 1 320px; min-width: 0; }
.kx-cs-brand__title {
  margin: 0 0 6px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.kx-cs-brand__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -.01em;
  color: var(--kx-muted);
}

/* --- Section rhythm ------------------------------------------------------- */
.kx-cs-section { padding: clamp(40px, 5.5vw, 68px) 0; }
.kx-cs-section--alt { background: var(--kx-bg-alt); }

/* --- Editor prose --------------------------------------------------------- */
.kx-rt { font-size: 16.5px; line-height: 1.62; letter-spacing: -.01em; color: var(--kx-muted); }
.kx-rt > :first-child { margin-top: 0; }
.kx-rt > :last-child { margin-bottom: 0; }
.kx-rt p { margin: 0 0 1.1em; }
.kx-rt strong, .kx-rt b { color: var(--kx-ink); font-weight: 600; }
.kx-rt h2 {
  margin: 1.6em 0 .5em;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.14;
  color: var(--kx-ink);
}
.kx-rt h3 {
  margin: 1.5em 0 .45em;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--kx-ink);
}
.kx-rt h4 {
  margin: 1.4em 0 .4em;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--kx-ink);
}
.kx-rt ul, .kx-rt ol { margin: 0 0 1.1em; padding-left: 1.25em; }
.kx-rt li { margin: 0 0 .45em; }
.kx-rt li::marker { color: var(--kx-purple); }
.kx-rt img { border-radius: 16px; margin: 1.2em 0; }
.kx-rt a { text-decoration: underline; text-underline-offset: 2px; }

/* --- Two-column blocks ---------------------------------------------------- */
.kx-cs-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 3.4vw, 48px);
  align-items: start;
}
.kx-cs-cols--reverse > :first-child { order: 2; }

.kx-cs-panel {
  padding: 24px;
  border-radius: 22px;
  border: 1px solid var(--kx-border);
  background: var(--kx-bg);
}

.kx-cs-media { border-radius: 22px; overflow: hidden; background: var(--kx-bg-alt); }
.kx-cs-media img { width: 100%; height: auto; }
.kx-cs-media--tall img { height: clamp(260px, 34vw, 420px); object-fit: cover; }

.kx-cs-fullimage {
  border-radius: 28px;
  overflow: hidden;
  background: var(--kx-bg-alt);
}
.kx-cs-fullimage img { width: 100%; height: auto; }

/* --- Three text columns --------------------------------------------------- */
.kx-cs-trio__title {
  margin: 0 0 26px;
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--kx-ink);
}
.kx-cs-trio__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 236px), 1fr));
  gap: 18px;
  align-items: stretch;
}
.kx-cs-trio__grid .kx-cs-panel { display: flex; flex-direction: column; }

/* --- Stats ---------------------------------------------------------------- */
.kx-cs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
  align-items: start;
  gap: clamp(24px, 4vw, 20px);
  padding: clamp(26px, 4vw, 34px);
  border-radius: 28px;
  border: 1px solid var(--kx-border);
  background: var(--kx-bg-alt);
}
.kx-cs-section--alt .kx-cs-stats { background: var(--kx-bg); }
.kx-cs-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.kx-cs-stat__figure {
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--kx-ink);
}
.kx-cs-stat__label {
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--kx-muted);
}
.kx-cs-stats__intro { margin-bottom: 22px; }
.kx-cs-stats__outro { margin-top: 22px; }

/* --- Quote ---------------------------------------------------------------- */
.kx-cs-quote {
  max-width: 960px;
  margin-inline: auto;
  text-align: center;
}
.kx-cs-quote blockquote {
  margin: 0;
  font-size: clamp(21px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.32;
  color: var(--kx-ink);
  text-wrap: pretty;
}
.kx-cs-quote figcaption {
  margin-top: 20px;
  font-size: 14.5px;
  letter-spacing: -.01em;
  color: var(--kx-muted-2);
}
.kx-cs-quote figcaption strong { display: block; font-weight: 600; color: var(--kx-ink); }

/* --- Embedded form -------------------------------------------------------- */
.kx-cs-form {
  max-width: 720px;
  margin-inline: auto;
  padding: 30px;
  border-radius: 24px;
  border: 1px solid var(--kx-border);
  background: var(--kx-bg);
  text-align: center;
}
.kx-cs-form__title {
  margin: 0 0 8px;
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.12;
}
.kx-cs-form__subtitle {
  margin: 0 0 22px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--kx-muted);
}
.kx-cs-form__embed { text-align: left; }
.kx-cs-form__embed:empty { display: none; }

/* --- Foot ----------------------------------------------------------------- */
.kx-cs-foot {
  padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 96px);
  background: var(--kx-bg-alt);
  text-align: center;
}
.kx-cs-foot__title {
  margin: 0 0 10px;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 600;
  letter-spacing: -.032em;
  line-height: 1.12;
}
.kx-cs-foot__text {
  margin: 0 auto 26px;
  max-width: 52ch;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--kx-muted);
}
.kx-cs-foot__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 760px) {
  .kx-cs-cols--reverse > :first-child { order: 0; }
  .kx-cs-brand__inner { padding: 20px; }
  .kx-cs-panel { padding: 20px; }
  .kx-cs-form { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- Flodesk enquiry form -------------------------------------------------
   The case study enquiry form is a Flodesk embed. Its own stylesheet is not
   loaded here (the legacy sheet that carried it is dequeued), so the design
   system dresses it instead - the same arrangement as the HubSpot form on the
   home page.

   Targets the generic fd-* classes rather than the ff-<form-id> ones, so a new
   Flodesk form id does not silently unstyle the page.

   Note the source order: Flodesk emits the input before its label, which is the
   floating-label pattern its own CSS relies on. Without that CSS the label
   would sit under the field, so the group is reversed rather than the label
   hidden - the placeholder alone is weaker for screen readers. */
.kx-cs-form__embed .fd-form-content { text-align: left; }

.kx-cs-form__embed .form-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 14px;
}

.kx-cs-form__embed .fd-form-group {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  margin-bottom: 14px;
}

.kx-cs-form__embed .fd-form-label,
.kx-cs-form__embed .fd-form-label div {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--kx-ink);
}

.kx-cs-form__embed .fd-form-control {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  padding: 0 13px;
  font: inherit;
  font-size: 15px;
  border-radius: 12px;
  border: 1px solid var(--kx-border-pill);
  background: #fff;
  color: var(--kx-ink);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.kx-cs-form__embed textarea.fd-form-control {
  height: auto;
  min-height: 90px;
  padding: 10px 13px;
  line-height: 1.5;
  resize: vertical;
}
.kx-cs-form__embed .fd-form-control:focus {
  border-color: var(--kx-purple);
  box-shadow: 0 0 0 3px rgba(110, 86, 248, .18);
}

/* Preference radios. */
.kx-cs-form__embed .radio-fields-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 15px;
  color: var(--kx-muted);
}
.kx-cs-form__embed .radio-fields-wrap label {
  display: flex;
  align-items: center;
  gap: 9px;
  letter-spacing: -.01em;
}
.kx-cs-form__embed input[type='radio'],
.kx-cs-form__embed input[type='checkbox'] {
  width: 16px;
  height: 16px;
  accent-color: var(--kx-purple);
}

/* Submit. The button also carries legacy theme classes that no longer have any
   CSS behind them here, so everything it needs is set explicitly. */
.kx-cs-form__embed .fd-btn {
  display: inline-block;
  width: auto;
  padding: 12px 26px;
  font-family: var(--kx-font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: normal;
  border: none;
  border-radius: 999px;
  background: var(--kx-purple);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease;
}
.kx-cs-form__embed .fd-btn:hover { background: var(--kx-purple-hover); }
.kx-cs-form__embed .ff-ID__footer,
.kx-cs-form__embed [class*='__footer'] { margin-top: 4px; }

.kx-cs-form__embed .fd-form-success,
.kx-cs-form__embed [class*='__success'] {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--kx-muted);
}

/* Flodesk leaves empty title/subtitle blocks in the markup; the section
   already has its own heading above. */
.kx-cs-form__embed [class*='__title'],
.kx-cs-form__embed [class*='__subtitle'] { display: none; }

/* Flodesk shows the success message by swapping data-ff-stage on the root. Its
   own CSS normally keeps it hidden until then; without that sheet the thank-you
   line sat above the form from the start. */
.kx-cs-form__embed [data-ff-el='root']:not([data-ff-stage='success']) [data-ff-el='success'] {
  display: none;
}