/* Three horizons of growth (includes/visuals/horizons.php) */
.hz-chart { position: relative; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.hz-svg--compact { display: none; max-width: 520px; margin-inline: auto; }
.hz-axis { fill: none; stroke: #7d8a80; stroke-width: 1.5; }
.hz-arrow { fill: #7d8a80; }
.hz-ax-t { fill: var(--ink-2); font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.hz-today line { stroke: var(--forest); stroke-width: 1.5; stroke-dasharray: 4 6; }
.hz-today text { fill: var(--forest); font-size: 15px; font-weight: 700; }
.hz-area { stroke: none; }
.hz-area--1 { fill: rgba(12, 43, 21, .07); }
.hz-area--2 { fill: rgba(150, 248, 120, .22); }
.hz-area--3 { fill: rgba(184, 225, 205, .28); }
.hz-curve { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hz-curve--1 { stroke: var(--forest); stroke-width: 4; }
.hz-curve--2 { stroke: var(--green-2); stroke-width: 4.5; }
.hz-curve--3 { stroke: var(--forest); stroke-width: 3; stroke-dasharray: .006 .012; }
.hz-mask { fill: none; stroke: #fff; stroke-width: 12; stroke-linecap: round; }
.hz-dot { fill: var(--forest); stroke: var(--white); stroke-width: 3; }
.hz-mark--2 .hz-dot { fill: var(--green); }
.hz-mark--3 .hz-dot { fill: var(--white); stroke: var(--forest); stroke-width: 2.5; }
.hz-dot-t { fill: var(--green); font-size: 14px; font-weight: 700; }
.hz-mark--2 .hz-dot-t, .hz-mark--3 .hz-dot-t { fill: var(--forest); }
.hz-halo { fill: none; stroke: var(--forest); stroke-width: 2; opacity: 0; }
.hz-name { fill: var(--forest); font-size: 17px; font-weight: 600; paint-order: stroke; stroke: var(--white); stroke-width: 6px; stroke-linejoin: round; }

/* cards */
.hz-cards { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .hz-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.hz-card { min-width: 0; display: flex; flex-direction: column; padding: 24px 24px 22px; border-radius: var(--radius); background: var(--paper); }
.section--paper .hz-card { background: var(--white); }
.hz-card-top { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.hz-key { flex: none; width: 28px; height: 0; border-top: 4px solid var(--forest); border-radius: 2px; }
.hz-card--2 .hz-key { border-top-color: var(--green-2); }
.hz-card--3 .hz-key { border-top: 3px dotted var(--forest); border-radius: 0; }
.hz-h { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--forest); }
.hz-time { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: var(--forest); color: var(--white); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.hz-title { margin: 0 0 18px; font-family: var(--font-serif); font-size: 24px; font-weight: 400; line-height: 1.2; color: var(--forest); }
.hz-l { margin: 0 0 8px; }
.hz-moves { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 7px; font-size: 15px; line-height: 1.4; color: var(--ink); }
.hz-moves li { position: relative; padding-left: 18px; }
.hz-moves li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--green-2); }
.hz-meta { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: 14px; }
.hz-meta div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.hz-meta dt { color: var(--ink-2); }
.hz-meta dd { margin: 0; font-weight: 600; color: var(--forest); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.hz-res { display: inline-flex; gap: 3px; }
.hz-res i { width: 14px; height: 8px; border-radius: 2px; background: var(--line); }
.hz-res--3 i, .hz-res--2 i:nth-child(-n+2), .hz-res--1 i:first-child { background: var(--forest); }

@media (min-width: 900px) and (max-width: 1200px) {
  .hz-card { padding: 22px 20px 20px; }
  .hz-card-top { flex-wrap: wrap; }
  .hz-h { white-space: nowrap; }
  .hz-title { font-size: 22px; }
  .hz-meta div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* animation: axes and today line, then H1, H2 and H3 draw themselves in turn, areas and markers follow,
   then the three cards rise; H3's marker keeps a slow pulse */
.js .vz-figure .hz-today, .js .vz-figure .hz-area, .js .vz-figure .hz-name { opacity: 0; transition: opacity .6s ease; }
.js .vz-figure .hz-curve--1, .js .vz-figure .hz-curve--2, .js .vz-figure .hz-mask { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .vz-figure .hz-curve--1, .js .vz-figure .hz-curve--2, .js .vz-figure .hz-mask { transition: stroke-dashoffset 1.1s cubic-bezier(.45, 0, .3, 1); }
.js .vz-figure .hz-curve--1 { transition-delay: .2s; }
.js .vz-figure .hz-curve--2 { transition-delay: .6s; }
.js .vz-figure .hz-mask { transition-delay: 1s; }
.js .vz-figure .hz-area--1 { transition-delay: 1s; }
.js .vz-figure .hz-area--2 { transition-delay: 1.4s; }
.js .vz-figure .hz-area--3 { transition-delay: 1.8s; }
.js .vz-figure .hz-today { transition-delay: .1s; }
.js .vz-figure .hz-mark { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .4s ease, transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.js .vz-figure .hz-mark--1 { transition-delay: 1.1s; }
.js .vz-figure .hz-mark--2 { transition-delay: 1.5s; }
.js .vz-figure .hz-mark--3 { transition-delay: 1.9s; }
.js .vz-figure .hz-name { transition-delay: inherit; }
.js .vz-figure .hz-card { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure .hz-card--1 { transition-delay: 1.3s; }
.js .vz-figure .hz-card--2 { transition-delay: 1.7s; }
.js .vz-figure .hz-card--3 { transition-delay: 2.1s; }
.js .vz-figure.is-visible .hz-today, .js .vz-figure.is-visible .hz-area, .js .vz-figure.is-visible .hz-name,
.js .vz-figure.is-visible .hz-mark, .js .vz-figure.is-visible .hz-card { opacity: 1; transform: none; }
.js .vz-figure.is-visible .hz-curve--1, .js .vz-figure.is-visible .hz-curve--2, .js .vz-figure.is-visible .hz-mask { stroke-dashoffset: 0; }
.vz-figure.is-visible .hz-mark--3 .hz-halo { animation: hz-pulse 2.8s ease-out 2.6s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hz-pulse { 0% { opacity: .7; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.9); } }

/* phones and small tablets: the compact drawing, the cards stacked */
@media (max-width: 759px) {
  .hz-svg--wide { display: none; }
  .hz-svg--compact { display: block; }
  .hz-ax-t, .hz-today text { font-size: 13px; }
  .hz-dot-t { font-size: 11.5px; }
  .hz-curve--1, .hz-curve--2 { stroke-width: 3; }
  .hz-curve--3 { stroke-width: 2.5; }
  .hz-cards { margin-top: 22px; }
  .hz-card { padding: 20px 18px 18px; }
  .hz-title { font-size: 22px; }
  .hz-meta div { grid-template-columns: 100px minmax(0, 1fr); }
}