/* KRU case study. Shared colours and typography live in /styles.css. */
.request-shell {
  max-width: 480px;
  background: linear-gradient(180deg, #eee7ff 0, #f5f0fb 900px, #fdfbf6 1800px);
}
.request-inset { padding-inline: 22px; }
.request-hero { padding-top: 12px; background: transparent; }
.request-header { margin-bottom: 26px; }
.request-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 35px;
  padding-inline: 12px;
  border: 1px solid #cbb9df;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 550;
  text-decoration: none;
}
.request-hero h1 {
  font-size: clamp(1.875rem, 8.2vw, 2.25rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}
.case-result {
  white-space: nowrap;
  text-decoration-line: underline;
  text-decoration-color: var(--lime);
  text-decoration-thickness: 5px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}
.reading-time {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  color: #785f8e;
  font-size: .8125rem;
  line-height: 1.5;
}
.reading-time svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reader-track { display: contents; }
.principles-article { padding-top: 32px; padding-bottom: 36px; }
.principle-section + .principle-section {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid #dcd0e5;
}
.principle-title {
  font-size: 1.375rem;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.principle-number { white-space: nowrap; }
.principle-copy {
  margin-top: 18px;
  font-size: 1.0625rem;
  line-height: 1.65;
  letter-spacing: normal;
  color: #493b53;
}
.principle-copy p { font: inherit; }
.principle-copy > * + * { margin-top: 1em; }
.principle-copy strong { color: var(--ink); font-weight: 650; }
.principle-tools { margin-bottom: 0; padding-left: 1.15em; }
.principle-tools li { padding-left: .15em; }
.principle-tools li + li { margin-top: .8em; }
.principle-tools li::marker { color: #8d71a1; font-size: .8em; }
.request-hero h1, .principle-title, .principle-copy, .call-card {
  overflow-wrap: anywhere;
}
.call-section {
  background: transparent;
  padding-bottom: 28px;
}
.call-card {
  padding: 26px 22px 21px;
  background: var(--ink);
  color: #fff9ff;
  border-radius: 25px;
}
.call-card h2 {
  font-size: 1.75rem;
  font-weight: 750;
  line-height: 1.18;
  letter-spacing: -0.04em;
}
.call-card h2 span {
  color: var(--lime);
}
.call-card > p {
  margin-top: 18px;
  font-size: 1rem;
  line-height: 1.65;
  letter-spacing: normal;
  color: #e6ddeb;
}
.call-card > p + p {
  margin-top: 15px;
}
.call-card strong {
  color: #fff9ff;
  font-weight: 650;
}
.call-card .request-project-button {
  margin-top: 25px;
  min-height: 56px;
  padding: 7px 7px 7px 15px;
  border-radius: 99px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.025em;
  gap: 8px;
}
.call-card .button-arrow {
  height: 36px;
  width: 36px;
  border-radius: 50%;
  font-size: 24px;
}
.request-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 13px;
  padding-bottom: max(26px, env(safe-area-inset-bottom));
  background: transparent;
}
.request-footer .logo {
  font-size: 28px;
}
.request-footer > span {
  margin-left: 6px;
  font-size: 10px;
  color: #95839f;
}
.request-footer > a:last-child {
  margin-left: auto;
  font-size: 10px;
  color: #785e88;
  text-decoration: none;
}

@media (max-width: 359px) {
  .request-inset { padding-inline: 18px; }
  .request-hero h1 { font-size: 1.875rem; }
  .principle-copy { font-size: 1rem; }
  .call-card { padding-inline: 18px; }
  .call-card h2 { font-size: 1.625rem; }

  .call-card .request-project-button { font-size: 14px; padding-left: 12px; }
  .call-card .button-arrow { width: 31px; height: 31px; flex-basis: 31px; }
  .request-footer { gap: 10px; }
}
@media (min-width: 440px) {
  .request-hero h1 { font-size: 2.25rem; }
  .call-card h2 { font-size: 2rem; }

  .call-card .request-project-button { font-size: 16px; }
}