/* Home visits, WohlOnCall (S09). The signature is the visit in six steps on a line that runs straight down. */

/* ---------- The visit, door to door. ---------- */
.hv-visit { display: flex; align-items: flex-start; gap: 80px; padding: 24px var(--pad) 96px; background: var(--color-surface); }
.hv-visual { position: relative; flex: 0 0 560px; width: 560px; background: #FFFFFF; }
.hv-figure { width: 100%; aspect-ratio: 1; }
.hv-reading { position: absolute; left: 68.57%; top: 22.5%; display: flex; flex-direction: column; gap: 2px; padding: 4px 6px; background: #FFFFFF; }
.hv-reading__value { font-family: var(--font-mono); font-size: var(--text-body); line-height: 24px; font-weight: 500; color: var(--color-primary); }
.hv-example { position: absolute; right: 12px; bottom: 12px; background: #FFFFFF; border: 1px solid var(--color-border); }

.hv-steps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.hv-steps__list { border-left: 2px solid var(--color-foreground); }
.hv-step { display: flex; align-items: flex-start; gap: 20px; padding: 0 0 22px 24px; }
.hv-step:last-child { padding-bottom: 0; }
.hv-step__k { flex: 0 0 120px; line-height: var(--leading-body); }
.hv-step__text { flex: 1; min-width: 0; }
div.hv-step__k { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
div.hv-step__k .t-label { line-height: var(--leading-body); }

@media (max-width: 1279px) {
  .hv-visit { gap: 48px; }
  .hv-visual { flex-basis: min(560px, 46%); width: min(560px, 46%); }
}
@media (max-width: 1023px) {
  .hv-visit { flex-direction: column; gap: 40px; padding-top: 0; padding-bottom: 64px; }
  .hv-visual { flex-basis: auto; width: 420px; max-width: 100%; }
  .hv-steps { width: 100%; max-width: 640px; }
}
@media (max-width: 767px) {
  .hv-visit { gap: 12px; padding-bottom: 48px; }
  .hv-steps { display: contents; }
  .hv-steps > .t-label { order: -1; }
  .hv-visual { width: 100%; display: flex; flex-direction: column; }
  .hv-figure { order: 0; }
  .hv-reading { position: static; order: 1; flex-direction: row; align-items: baseline; gap: 10px; padding: 12px 0 0; background: none; }
  .hv-reading__value { line-height: 22px; }
  .hv-example { position: absolute; right: 0; bottom: 0; border: 0; background: var(--color-background); }
  /* On phones the line keeps its stops: one ring per step. */
  .hv-steps__list { position: relative; border-left: 0; padding: 20px 0 0 30px; display: flex; flex-direction: column; gap: 20px; }
  .hv-steps__list::before { content: ""; position: absolute; left: 6px; top: 26px; bottom: 10px; width: 2px; background: var(--color-foreground); }
  .hv-step { position: relative; flex-direction: column; gap: 4px; padding: 0; }
  .hv-step::before { content: ""; position: absolute; left: -30px; top: 2px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--color-foreground); background: #FFFFFF; }
  .hv-step__k { flex: none; line-height: var(--leading-label); }
  .hv-step__k, .hv-step__k .t-label { color: var(--color-foreground); }
  div.hv-step__k { flex-direction: row; justify-content: space-between; align-items: center; align-self: stretch; }
  div.hv-step__k .t-label { line-height: var(--leading-label); }
}

/* ---------- Who it is for, where we come, consent at home. ---------- */
.hv-more { display: flex; gap: 64px; padding-top: 96px; padding-bottom: 96px; }
.hv-col { display: flex; flex-direction: column; gap: 16px; }
.hv-col--who { flex: 0 0 400px; }
.hv-col--where { flex: 0 0 360px; }
.hv-col--consent { flex: 1; min-width: 0; }
.hv-col__title { letter-spacing: var(--tracking-display); text-wrap: wrap; }
.hv-list { padding-top: 8px; }
.hv-list li { padding: 12px 0; border-top: 1px solid var(--color-border); }
.hv-list li:first-child { border-top-color: var(--color-foreground); }
.hv-list li:last-child { border-bottom: 1px solid var(--color-border); }
.hv-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.hv-call { padding-top: 12px; }

@media (max-width: 1279px) {
  .hv-more { gap: 40px; }
  .hv-col--who, .hv-col--where { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 1023px) {
  .hv-more { flex-direction: column; gap: 48px; padding-top: 72px; padding-bottom: 64px; }
  .hv-col { max-width: 640px; }
  .hv-col--who, .hv-col--where, .hv-col--consent { flex: none; }
}
@media (max-width: 767px) {
  .hv-more { gap: 32px; padding-top: 48px; padding-bottom: 48px; }
  .hv-col { gap: 10px; }
  .hv-list { padding-top: 0; }
  .hv-call { padding-top: 2px; }
  .hv-call .btn { width: 100%; }
}

/* Headlines break where the board breaks them. */
.page-head .t-display { text-wrap: wrap; }

/* S09 head: words 760, aside 420. */
@media (min-width: 1024px) { .page-head__words { max-width: 760px; } .page-head__aside { width: 420px; } }