/* ---------- Interior page hero: no side panel, slightly shorter ---------- */
.kb-hero--page { padding: 60px 0 56px; }
.kb-hero--page h1 { max-width: 18ch; }
.kb-hero--page .kb-lead { max-width: 54ch; }
.kb-ticks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 26px 0 0; padding: 0; }
.kb-ticks li { font-size: 14.5px; color: #C3CBD9; margin: 0; }
.kb-ticks li::before { content: "\2713"; color: var(--kb-gold); font-weight: 700; margin-right: 8px; }

/* ---------- Numbered steps on a light section ---------- */
.kb-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 36px; counter-reset: kb-step; }
.kb-steps > * { margin-block-start: 0 !important; }
.kb-step { counter-increment: kb-step; margin: 0 !important; }
.kb-step::before {
  content: counter(kb-step); display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--kb-gold); background: #fff;
  font-family: var(--kb-font-head); font-weight: 700; color: var(--kb-gold-ink); margin-bottom: 12px;
}
.kb-step h3 { font-family: var(--kb-font-head); font-weight: 600; font-size: 17px; color: var(--kb-ink); margin: 0 0 4px; }
.kb-step p { font-size: 15px; line-height: 1.55; color: var(--kb-body); margin: 0; }

/* ---------- The form's column ---------- */
.kb-form { max-width: 700px; margin-left: auto !important; margin-right: auto !important; scroll-margin-top: 96px; }
.kb-form > .kb-lead { margin-bottom: 26px; }

/* ---------- Dark cards inside a navy section ---------- */
.kb-sec--navy { background: var(--kb-navy); color: var(--kb-ink-light); }
.kb-sec--navy .kb-eyebrow { color: var(--kb-gold); }
.kb-sec--navy h2 { color: #fff; }
.kb-sec--navy .kb-lead { color: #C3CBD9; }
.kb-sec--navy .kb-card { background: var(--kb-card-dark); border-color: var(--kb-line-dark); }
.kb-sec--navy .kb-card h3 { color: #fff; }
.kb-sec--navy .kb-card p { color: #C3CBD9; }
.kb-sec--navy .kb-card::before { display: none; }
.kb-cards--two { grid-template-columns: repeat(2, 1fr); }
.kb-cards--plain .kb-card::before { display: none; }

/* ---------- Pull quote ---------- */
.kb-quote { border-left: 3px solid var(--kb-gold); padding-left: 26px; margin: 34px 0 0; max-width: 40ch;
  font-family: var(--kb-font-head); font-weight: 500; font-size: clamp(19px, 2.4vw, 24px); line-height: 1.42; color: var(--kb-ink); }
.kb-prose p { font-size: 17px; line-height: 1.65; color: var(--kb-body); max-width: 62ch; margin: 16px 0 0; }

/* ---------- Timeline ---------- */
.kb-timeline { margin-top: 36px; border-left: 2px solid var(--kb-line); padding-left: 26px; display: grid; gap: 26px; }
.kb-timeline > * { margin-block-start: 0 !important; }
.kb-moment { position: relative; margin: 0 !important; }
.kb-moment::before { content: ""; position: absolute; left: -35px; top: 4px; width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid var(--kb-gold); background: #fff; }
.kb-moment .kb-eyebrow { margin-bottom: 4px; }
.kb-moment h3 { font-family: var(--kb-font-head); font-weight: 600; font-size: 19px; color: var(--kb-ink); margin: 0 0 4px; }
.kb-moment p { font-size: 16px; line-height: 1.6; color: var(--kb-body); max-width: 62ch; margin: 0; }

/* ---------- Contact method cards: the whole card is the link's target ---------- */
.kb-contact-cards .kb-card h3 a { color: var(--kb-ink); text-decoration: none; }
.kb-contact-cards .kb-card h3 a::after { content: ""; position: absolute; inset: 0; }
.kb-contact-cards .kb-card { position: relative; }
.kb-contact-cards .kb-card:focus-within { border-color: var(--kb-gold-ink); }

@media (max-width: 900px) {
  .kb-steps { grid-template-columns: 1fr 1fr; }
  .kb-cards--two { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .kb-steps { grid-template-columns: 1fr; }
  .kb-hero--page { padding: 46px 0 44px; }
}


/* ---------- Coverage graphic: wide screens only; the town list carries tablets and phones ---------- */
.kb-coverage { margin: 30px 0 0; }
.kb-coverage img { display: block; width: 100%; height: auto; }
/* Below about 1040px the labels would shrink under 13px, so the graphic steps aside. */
@media (max-width: 1040px) { .kb-coverage { display: none; } }

/* ---------- About: a row of three coin photographs ---------- */
.kb-photo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; max-width: 720px; }
.kb-photo-row > * { margin: 0 !important; }
.kb-photo-row img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: #0B0A14; }
@media (max-width: 600px) { .kb-photo-row { gap: 8px; } }

/* ---------- Contact: a link line with a full tap height; card text sits above the card-wide link ---------- */
.kb-note--link { margin-top: 0; }
.kb-note--link a { display: inline-flex; align-items: center; min-height: 44px; }
.kb-contact-cards .kb-card p { position: relative; z-index: 1; }

/* ---------- Text sizes on phones ---------- */
@media (max-width: 600px) { .kb-step p { font-size: 16px; } }

.kb-note--link .kb-sep { margin: 0 10px; color: var(--kb-body); }

/* ---------- Areas we cover: town links as tappable pills ---------- */
.kb-towns--links li { padding: 0; }
.kb-towns--links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; color: var(--kb-ink); font-weight: 600; text-decoration: none; }
.kb-towns--links a:hover, .kb-towns--links a:focus { color: var(--kb-gold-ink); text-decoration: underline; }