/* A page-specific service-centre banner; the graphic is illustrative. */
.kkt-page .ofd-bridge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 230px);
  align-items: center;
  gap: clamp(20px, 4vw, 52px);
  padding: clamp(26px, 4vw, 42px);
  border: 1px solid #b8dcf6;
  border-radius: 18px;
  background: linear-gradient(110deg, #e5f3ff 0%, #edf7ff 52%, #f7fbff 100%);
  color: #222;
}
.kkt-page .ofd-bridge h2 {
  margin: 0;
  max-width: 720px;
  font-size: clamp(25px, 2.6vw, 34px);
  line-height: 1.17;
  letter-spacing: -.03em;
}
.kkt-page .ofd-bridge p { margin: 14px 0 20px; line-height: 1.5; color: #324b60; }
.kkt-page .ofd-bridge a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 12px;
  background: #2291ff;
  color: #222;
  font-weight: 600;
  text-decoration: none;
}
.kkt-page .ofd-bridge a:hover { background: #51adff; }
.kkt-page .ofd-bridge a:focus-visible { outline: 3px solid #174c79; outline-offset: 4px; }
.kkt-page .ofd-bridge-art { display: block; width: 100%; max-width: 230px; justify-self: end; }
@media (max-width: 580px) {
  .kkt-page .ofd-bridge { grid-template-columns: minmax(0,1fr) 40px; column-gap: 8px; row-gap: 0; padding: 24px 20px; }
  .kkt-page .ofd-bridge-copy { display: contents; }
  .kkt-page .ofd-bridge h2, .kkt-page .ofd-bridge p { grid-column: 1 / -1; }
  .kkt-page .ofd-bridge p { margin: 12px 0 18px; }
  .kkt-page .ofd-bridge a { grid-column: 1; grid-row: 3; justify-self: start; max-width: 100%; padding-inline: 8px; font-size: 14px; text-align: center; }
  .kkt-page .ofd-bridge-art { grid-column: 2; grid-row: 3; width: 40px; max-width: 100%; align-self: center; }
}