/* Brand coherence, before / after on three reading lines (includes/visuals/coherence.php) */
.co { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.co-side { min-width: 0; border-radius: var(--radius); overflow: hidden; }
.co-before { background: var(--paper); color: var(--ink); }
.co-after { background: var(--forest); color: var(--white); }
.co-cell { min-width: 0; padding: 22px 24px; padding: clamp(18px, 2vw, 28px); }
.co-row { border-top: 1px solid var(--line); }
.co-after .co-row { border-top-color: rgba(255, 255, 255, .12); }
.co-rl { margin: 0 0 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.co-after .co-rl { color: var(--sage); }
.co-lab { display: none; }

/* wide: a comparison table, the two boards aligned row by row */
@media (min-width: 860px) {
  .co { grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.06fr); grid-template-rows: auto auto auto auto; gap: 0 18px; }
  .co-side { grid-row: 1 / span 4; display: grid; grid-template-rows: subgrid; }
  .co-before { grid-column: 2; }
  .co-after { grid-column: 3; }
  .co-rl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .co-lab { display: block; grid-column: 1; margin: 0; padding: 26px 0 0; text-align: right; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; color: var(--ink-2); }
  .co-lab--1 { grid-row: 2; }
  .co-lab--2 { grid-row: 3; }
  .co-lab--3 { grid-row: 4; }
}

/* heads */
.co-tag { display: inline-block; margin: 0 0 12px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--white); color: var(--ink-2); }
.co-after .co-tag { background: var(--green); color: var(--forest); }
.co-sub { margin: 0; font-family: var(--font-serif); font-size: 22px; line-height: 1.25; color: var(--forest); }
.co-after .co-sub { color: var(--white); }
.co-nobase { margin: 18px 0 0; display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.co-nobase strong { color: var(--forest); font-weight: 600; }
.co-nb-marks { flex: none; display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.co-nb-marks i { display: block; width: 12px; height: 12px; }
.co-nb-marks i:nth-child(1) { border-radius: 50%; background: #c4beb5; }
.co-nb-marks i:nth-child(2) { border-radius: 2px; background: var(--ink-2); transform: translateY(3px); }
.co-nb-marks i:nth-child(3) { width: 18px; height: 9px; border-radius: 999px; background: var(--sage); transform: translateY(-3px); }
.co-vp { margin: 18px 0 0; padding: 14px 16px 15px; border-radius: 10px; background: var(--forest-2); box-shadow: 0 0 0 1.5px rgba(150, 248, 120, .55) inset; }
.co-vp-l { margin: 0 0 5px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.co-vp-t { margin: 0; font-family: var(--font-serif); font-size: 18.5px; line-height: 1.3; color: var(--white); }

/* the spine of the "after" board: a dashed line from the value proposition down to each row */
.co-after .co-head, .co-after .co-row { position: relative; }
.co-after .co-head::after, .co-after .co-row::before { content: ""; position: absolute; left: clamp(18px, 2vw, 28px); width: 2px; background: repeating-linear-gradient(to bottom, var(--green-2) 0 6px, transparent 6px 12px); }
.co-after .co-head::after { bottom: 0; height: clamp(18px, 2vw, 28px); }
.co-after .co-row::before { top: 0; bottom: 0; }
.co-after .co-row:last-child::before { bottom: auto; height: 28px; }
.co-after .co-row::after { content: ""; position: absolute; left: calc(clamp(18px, 2vw, 28px) - 5px); top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--forest); }
.co-after .co-row { padding-left: calc(clamp(18px, 2vw, 28px) + 26px); }

/* messages */
.co-msgs, .co-ids, .co-sups, .co-id-notes { list-style: none; margin: 0; padding: 0; }
.co-msgs { display: grid; gap: 14px; }
.co-msg { display: grid; gap: 3px; min-width: 0; }
.co-src { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.co-after .co-src { color: var(--green); }
.co-msg-t { display: block; line-height: 1.3; }
.co-before .co-msg--1 .co-msg-t { font-family: var(--font-serif); font-style: italic; font-size: 19px; color: var(--forest); }
.co-before .co-msg--2 .co-msg-t { font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }
.co-before .co-msg--3 .co-msg-t { font-size: 15px; font-weight: 400; color: var(--ink-2); }
.co-before .co-msg--1 { transform: rotate(-1.2deg); }
.co-before .co-msg--2 { margin-left: 9%; }
.co-before .co-msg--3 { transform: rotate(.9deg); margin-left: 3%; }
.co-after .co-msg-t { font-family: var(--font-serif); font-size: 17.5px; color: var(--white); }
.co-after .co-msg-t strong { font-weight: 600; color: var(--green); }

/* identity */
.co-ids { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.co-id { display: grid; gap: 9px; align-content: start; min-width: 0; }
.co-word { font-size: 21px; line-height: 1.1; color: var(--forest); overflow-wrap: anywhere; }
.co-id--1 .co-word { font-family: var(--font-serif); font-style: italic; }
.co-id--2 .co-word { font-size: 15px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.co-id--3 .co-word { font-weight: 300; letter-spacing: .05em; color: var(--ink-2); }
.co-sw { display: flex; align-items: center; gap: 6px; }
.co-sw i { display: block; width: 20px; height: 20px; }
.co-id--1 .co-sw i { border-radius: 50%; }
.co-id--1 .co-sw i:nth-child(1) { background: #c4beb5; }
.co-id--1 .co-sw i:nth-child(2) { background: #7d8a80; }
.co-id--2 .co-sw i { border-radius: 2px; }
.co-id--2 .co-sw i:nth-child(1) { background: var(--ink-2); }
.co-id--2 .co-sw i:nth-child(2) { background: var(--white); box-shadow: 0 0 0 1px var(--line) inset; }
.co-id--3 .co-sw i { width: 28px; height: 13px; border-radius: 999px; }
.co-id--3 .co-sw i:nth-child(1) { background: var(--sage); }
.co-id--3 .co-sw i:nth-child(2) { background: #b9b3aa; }
.co-id--1 { transform: rotate(-1.5deg); }
.co-id--2 { padding-top: 10px; }
.co-id--3 { transform: rotate(1deg); }
.co-id-c { font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.co-one { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.co-after .co-word { font-family: var(--font-serif); font-size: 28px; color: var(--white); }
.co-after .co-sw i { width: 22px; height: 22px; border-radius: 6px; }
.co-after .co-sw i:nth-child(1) { background: var(--green); }
.co-after .co-sw i:nth-child(2) { background: var(--mint); }
.co-after .co-sw i:nth-child(3) { background: var(--sage); }
.co-after .co-sw i:nth-child(4) { background: var(--paper); }
.co-id-notes { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 13.5px; color: var(--sage); }
.co-id-notes li { display: inline-flex; align-items: center; gap: 7px; }
.co-id-notes li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }

/* materials: a mini website, slide and document */
.co-sups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.co-sup { display: grid; gap: 7px; align-content: start; min-width: 0; }
.co-mini { position: relative; display: block; height: 72px; border-radius: 5px; background: var(--white); overflow: hidden; box-shadow: 0 1px 2px rgba(12, 43, 21, .08), 0 0 0 1px var(--line); }
.co-mini--doc { width: 56px; }
.co-mini::after { content: ""; position: absolute; left: 10px; right: 10px; top: 32px; height: 20px; background: repeating-linear-gradient(to bottom, var(--line) 0 3px, transparent 3px 8px); }
.co-mini--doc::after { left: 8px; right: 8px; top: 26px; height: 32px; }
.co-mini i { position: absolute; display: block; }
/* before: each material with its own cues */
.co-before .co-mini--site::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: #c4beb5; }
.co-before .co-mini--site i { left: 10px; top: 17px; width: 10px; height: 10px; border-radius: 50%; background: #7d8a80; }
.co-before .co-mini--deck::before { content: ""; position: absolute; left: 0; bottom: 0; width: 38%; height: 100%; background: var(--ink-2); }
.co-before .co-mini--deck::after { left: 46%; top: 24px; }
.co-before .co-mini--deck i { left: 46%; top: 12px; width: 26px; height: 5px; background: var(--ink); }
.co-before .co-mini--doc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--sage); }
.co-before .co-mini--doc i { left: 12px; top: 10px; width: 22px; height: 8px; border-radius: 999px; background: #b9b3aa; }
.co-before .co-sup--1 { transform: rotate(-1.5deg); }
.co-before .co-sup--2 { transform: rotate(1.2deg) translateY(6px); }
.co-before .co-sup--3 { transform: rotate(-.8deg); }
/* after: the same header, the same mark, the same lines */
.co-after .co-mini { box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.co-after .co-mini::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--green); }
.co-after .co-mini i { left: 8px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--forest); }
.co-after .co-mini--doc::after { top: 28px; }
.co-after .co-mini--deck::after { right: 40%; }
.co-sup-n { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--forest); }
.co-after .co-sup-n { color: var(--white); }
.co-sup-t { font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.co-after .co-sup-t { color: var(--sage); }

@media (max-width: 480px) {
  .co-ids, .co-sups { gap: 8px; }
  .co-word { font-size: 18px; }
  .co-id--2 .co-word { font-size: 13px; }
  .co-after .co-word { font-size: 24px; }
  .co-before .co-msg--2 { margin-left: 5%; }
}

/* animation: the "before" items land out of order; on the right the proposition appears, the spine runs
   down and each row lights up as it is reached; then the dashes keep flowing along the spine */
.js .vz-figure .co-before .co-msg, .js .vz-figure .co-before .co-id, .js .vz-figure .co-before .co-sup, .js .vz-figure .co-nobase { opacity: 0; transition: opacity .5s ease; }
.js .vz-figure .co-nobase { transition-delay: .1s; }
.js .vz-figure .co-before .co-msg--2, .js .vz-figure .co-before .co-id--3, .js .vz-figure .co-before .co-sup--1 { transition-delay: .3s; }
.js .vz-figure .co-before .co-msg--1, .js .vz-figure .co-before .co-id--1, .js .vz-figure .co-before .co-sup--3 { transition-delay: .55s; }
.js .vz-figure .co-before .co-msg--3, .js .vz-figure .co-before .co-id--2, .js .vz-figure .co-before .co-sup--2 { transition-delay: .8s; }
.js .vz-figure .co-vp { opacity: 0; transform: translateY(-8px); transition: opacity .5s ease .3s, transform .6s cubic-bezier(.2, .7, .2, 1) .3s; }
.js .vz-figure .co-after .co-head::after, .js .vz-figure .co-after .co-row::before { transform: scaleY(0); transform-origin: top; transition: transform .35s linear; }
.js .vz-figure .co-after .co-head::after { transition-delay: .8s; }
.js .vz-figure .co-after .co-row--msg::before { transition-delay: 1.1s; }
.js .vz-figure .co-after .co-row--id::before { transition-delay: 1.5s; }
.js .vz-figure .co-after .co-row--sup::before { transition-delay: 1.9s; }
.js .vz-figure .co-after .co-row::after { transform: scale(0); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.js .vz-figure .co-after .co-row > * { opacity: 0; transform: translateX(10px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure .co-after .co-row--msg::after, .js .vz-figure .co-after .co-row--msg > * { transition-delay: 1.15s; }
.js .vz-figure .co-after .co-row--id::after, .js .vz-figure .co-after .co-row--id > * { transition-delay: 1.55s; }
.js .vz-figure .co-after .co-row--sup::after, .js .vz-figure .co-after .co-row--sup > * { transition-delay: 1.95s; }
.js .vz-figure.is-visible .co-before .co-msg, .js .vz-figure.is-visible .co-before .co-id, .js .vz-figure.is-visible .co-before .co-sup, .js .vz-figure.is-visible .co-nobase { opacity: 1; }
.js .vz-figure.is-visible .co-vp { opacity: 1; transform: none; }
.js .vz-figure.is-visible .co-after .co-head::after, .js .vz-figure.is-visible .co-after .co-row::before, .js .vz-figure.is-visible .co-after .co-row::after { transform: none; }
.js .vz-figure.is-visible .co-after .co-row > * { opacity: 1; transform: none; }
.js .vz-figure.is-visible .co-after .co-head::after, .js .vz-figure.is-visible .co-after .co-row::before { animation: co-flow 1.2s linear 2.4s infinite; }
@keyframes co-flow { to { background-position: 0 12px; } }