/* ==========================================================================
   Event coverage — /event-coverage.html only (body.ev). Loaded after styles.css and services.css.
   The page reads as one event day: Call time → Before doors open → Doors open → The heart of it →
   Last light → After teardown. A slim event clock under the header advances with the reading position.
   Default CSS = the final, complete, visible state. One-shot pre-states exist only inside
     @media (prefers-reduced-motion: no-preference) { html.ready .x:not(.in) … }
   (pages.js adds .in to [data-io] and .r / .split; event.js adds nothing that hides content).
   Words never hide (text may dim to .35); nothing loops. Gold stays on the primary action only.
   Package colours: Storyline #1598B8 · Storyline & Sinker #12C9DA · Documentary #19E6CF ·
   Client Event Visit #3478D4 (the monthly-relationship blue used for management elsewhere).
   Stills (section 11a): the 220 Event Story Doc lends the Documentary its frames, the UAB School of Dentistry visit
   recap lends Storyline & Sinker its frames; each is captioned with its own film and sits only with its own package.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. helpers */
.ev { --ev-lab: 500 max(.66rem, 11px)/1.45 var(--mono); --ev-panel: rgba(15, 18, 23, .92); --ev-bad: #ff8a7a; }
.ev [hidden] { display: none !important; }
.ev-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ev-lab { display: block; max-width: none; font: var(--ev-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--text2); }
.ev-lab.is-t { color: var(--accent-t); }
.ev-cap { margin-top: 14px; max-width: 48rem; font: var(--ev-lab); letter-spacing: .08em; text-transform: uppercase; color: var(--text2); }
.ev main section[id], .ev #compare { scroll-margin-top: 104px; }
.ev .cb { pointer-events: none; transform: none; }   /* brackets fade in place here: the shared slide-in from 46px outside widened phone pages */

/* shared labels set below 11px elsewhere are held at 11px on this page */
.ev .svc-crumbs li { font-size: max(.66rem, 11px); }
.ev .shot-cap .mono { font-size: max(.62rem, 11px); }
.ev .tbl thead th { font-size: max(.64rem, 11px); }
.ev .tbl td::before { font-size: max(.6rem, 11px); }
.ev .opt-price span { font-size: max(.68rem, 11px); }

/* the shared reveals start visible on this page; their one-shot pre-state lives in the motion block (section 14) */
.ev .r, .ev .split .w { opacity: 1; transform: none; filter: none; }
.ev .pulse::after { animation-iteration-count: 3; }

/* ---------------------------------------------------------------- 2. the event clock */
.ev-clock { position: fixed; z-index: 58; top: 69px; left: 0; right: 0; display: flex; align-items: center; gap: 22px; height: 30px; padding: 0 clamp(20px, 3vw, 40px);
  pointer-events: none; background: rgba(11, 13, 16, .72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
  font: var(--ev-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--text2); }
.ev-clock-now { display: flex; align-items: center; gap: 10px; flex: none; white-space: nowrap; }
.ev-clock-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.ev-clock-t { min-width: 5.4em; color: var(--text); font-weight: 500; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.ev-clock-a { color: var(--accent-t); }
.ev-clock-acts { display: flex; flex: 1; justify-content: flex-end; min-width: 0; margin: 0; padding: 0; }
.ev-clock-acts li { display: flex; align-items: center; white-space: nowrap; opacity: .42; transition: opacity .6s var(--ease), color .6s; }
.ev-clock-acts li + li::before { content: ''; width: 20px; height: 1px; margin: 0 10px; background: var(--line2); transition: background .6s; }
.ev-clock-acts li.is-past { opacity: .7; }
.ev-clock-acts li.is-past + li::before, .ev-clock-acts li.is-now::before { background: color-mix(in srgb, var(--accent) 70%, transparent); }
.ev-clock-acts li.is-now { opacity: 1; color: var(--text); }
.ev-clock-bar { position: relative; flex: none; display: none; width: 56px; height: 2px; background: var(--line2); }
.ev-clock-bar i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--dp, 0)); }
@media (min-width: 1181px) { .ev-clock-a { display: none; } }
@media (max-width: 1180px) {
  .ev-clock { justify-content: space-between; }
  .ev-clock-acts { display: none; }
  .ev-clock-now { flex: 1; min-width: 0; }
  .ev-clock-a { overflow: hidden; text-overflow: ellipsis; }
  .ev-clock-bar { display: block; }
}
@media (max-width: 420px) {
  .ev-clock { gap: 12px; padding: 0 16px; height: 28px; }
  .ev-clock-k { display: none; }
  .ev-clock-bar { width: 40px; }
}

/* ---------------------------------------------------------------- 3. hero (01 event introduction) */
.ev-hero { padding-top: clamp(140px, 20vh, 200px); padding-bottom: clamp(36px, 6vh, 72px); }
.ev-hero .pk-h.ev-h1 { max-width: 14.6em; margin-bottom: clamp(30px, 4.5vh, 48px); font-size: clamp(2.5rem, min(6vw, 10.4vh), 5.6rem); line-height: .98; }
.ev-hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 84px); align-items: start; }
.ev-hero .pk-lead { max-width: 36rem; }
.ev-hero .pk-lead + .pk-lead { margin-top: 1em; }
.ev-hero .ev-lead-3 { color: var(--text); font: 400 clamp(1.25rem, 1.8vw, 1.5rem)/1.3 var(--serif); letter-spacing: -.005em; }
.ev-hero .svc-btns { margin-top: 36px; }
.ev-hero .svc-terms { margin-top: 34px; }
.ev-hero-fig { min-width: 0; }

/* the story plan: an event venue from above, the story path through it, and the day's coverage windows */
.ev-plan { position: relative; margin: 0; padding: 18px clamp(14px, 2vw, 24px) 20px; background: var(--ev-panel); border: 1px solid var(--line); box-shadow: 0 40px 120px -70px rgba(25, 230, 207, .45); }
.ev-plan > .cb.tl { top: -1px; left: -1px; } .ev-plan > .cb.br { bottom: -1px; right: -1px; }
.ev-plan-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; font: var(--ev-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-t); }
.ev-plan-head span + span { color: var(--text2); text-align: right; }
.ev-plan-box { position: relative; aspect-ratio: 680 / 345; }
.ev-plan-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ev-plan-svg .p-grid { fill: none; stroke: rgba(244, 243, 239, .05); stroke-width: 1; }
.ev-plan-svg .p-wall { fill: none; stroke: rgba(244, 243, 239, .55); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ev-plan-svg .p-door { fill: none; stroke: rgba(244, 243, 239, .3); stroke-width: 1.2; }
.ev-plan-svg .p-stage { fill: rgba(25, 230, 207, .07); stroke: rgba(244, 243, 239, .5); stroke-width: 1.3; }
.ev-plan-svg .p-lip { fill: none; stroke: rgba(244, 243, 239, .25); stroke-width: 1; stroke-dasharray: 3 4; }
.ev-plan-svg .p-booths rect { fill: rgba(244, 243, 239, .04); stroke: rgba(244, 243, 239, .38); stroke-width: 1.2; }
.ev-plan-svg .p-booths path { fill: none; stroke: rgba(244, 243, 239, .38); stroke-width: 1; }
.ev-plan-svg .p-int circle { fill: none; stroke: rgba(244, 243, 239, .55); stroke-width: 1.3; }
.ev-plan-svg .p-int path { fill: rgba(244, 243, 239, .1); stroke: rgba(244, 243, 239, .5); stroke-width: 1.2; stroke-linejoin: round; }
.ev-plan-svg .p-crowd circle { fill: rgba(244, 243, 239, .45); }
.ev-plan-svg .p-cone { fill: rgba(25, 230, 207, .08); stroke: rgba(25, 230, 207, .38); stroke-width: 1; stroke-linejoin: round; }
.ev-plan-svg .p-body { fill: #0B0D10; stroke: var(--teal); stroke-width: 1.4; }
.ev-plan-svg .p-story-ghost { fill: none; stroke: rgba(25, 230, 207, .22); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.ev-plan-svg .p-story { fill: none; stroke: var(--teal); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 5px rgba(25, 230, 207, .55)); }
.ev-pl { position: absolute; transform: translate(-50%, -50%); font: var(--ev-lab); letter-spacing: .16em; text-transform: uppercase; color: var(--text2); white-space: nowrap; pointer-events: none; }
.ev-pn { position: absolute; display: grid; place-items: center; width: 22px; height: 22px; transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--teal); color: #04201d; font: 600 11px/1 var(--mono); box-shadow: 0 0 0 4px rgba(25, 230, 207, .16), 0 0 16px rgba(25, 230, 207, .6); }
.ev-plan-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.ev-plan-key li { display: flex; gap: 10px; align-items: baseline; color: var(--text); font-size: .9rem; line-height: 1.4; }
.ev-plan-key b { flex: none; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--teal); border-radius: 999px; font: 600 11px/1 var(--mono); color: var(--teal); white-space: nowrap; transform: translateY(-1px); }
.ev-plan-key li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ev-ros { display: grid; gap: 7px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); --lw: 8.6em; }
.ev-ros-ph { position: relative; height: 16px; margin-right: var(--lw); font: var(--ev-lab); letter-spacing: .12em; text-transform: uppercase; color: var(--text2); }
.ev-ros-ph span { position: absolute; top: 0; white-space: nowrap; }
.ev-ros-ph span:nth-child(1) { left: 0; } .ev-ros-ph span:nth-child(2) { left: 16.667%; } .ev-ros-ph span:nth-child(3) { right: 0; }
.ev-ros-r { display: grid; grid-template-columns: minmax(0, 1fr) var(--lw); align-items: center; font: var(--ev-lab); }
.ev-ros-t { position: relative; height: 8px; background: repeating-linear-gradient(90deg, rgba(244, 243, 239, .16) 0 1px, transparent 1px calc(100% / 12)); border-right: 1px solid rgba(244, 243, 239, .16); }
.ev-ros-t i { position: absolute; top: 0; bottom: 0; left: calc(var(--s) / 12 * 100%); width: calc((var(--e) - var(--s)) / 12 * 100%); border-radius: 1px; background: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); }
.ev-ros-r b { padding-left: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; color: color-mix(in srgb, var(--c) 70%, #fff); }
.ev-plan-cap { margin-top: 14px; }

/* ---------------------------------------------------------------- 4. section scaffolding */
.ev-sec { padding: clamp(72px, 10vh, 128px) 0; }
.ev-sec .sec-h { max-width: 14em; }
.ev .eyebrow { flex-wrap: wrap; row-gap: 10px; }
.ev-when { display: inline-flex; align-items: baseline; gap: 10px; color: var(--text2); }
.ev-when b { font-weight: 500; color: var(--text); letter-spacing: .1em; }
.ev-block { margin-top: clamp(64px, 9vh, 110px); }
.ev-sub { margin-top: 0; }
.ev-note + .ev-sub { margin-top: clamp(44px, 6vh, 72px); }
.ev-intro { max-width: 44rem; margin-bottom: 26px; }
.ev-punch { margin-top: 36px; max-width: 30em; }
.ev-note { margin-top: 16px; max-width: 52rem; font-size: .95rem; }
.ev-shot { max-width: 34rem; margin-top: clamp(28px, 4vh, 44px); }

/* ---------------------------------------------------------------- 5. research (02) */
.ev-lens { display: grid; gap: 10px; margin: 28px 0 30px; }
.ev-lens li { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); background: rgba(15, 18, 23, .72); }
.ev-lens li > :not(.ev-lens-eye) { grid-column: 2; }
.ev-lens-eye { grid-row: 1 / 3; position: relative; display: block; width: 44px; height: 24px; border: 1.5px solid color-mix(in srgb, var(--teal) 70%, transparent); border-radius: 50%; }
.ev-lens-eye i { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px var(--teal); }
.ev-lens .ev-lab { margin-bottom: 3px; }
.ev-lens p { margin: 0; max-width: none; color: var(--text); font: 400 1.22rem/1.3 var(--serif); }

/* research → content: a real table drawn as question → decision rows */
.ev-flow-t { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
.ev-flow-t thead th { padding: 0 0 4px; text-align: left; font: var(--ev-lab); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-t); }
.ev-flow-t thead th + th { padding-left: 72px; }
.ev-flow-t tbody th, .ev-flow-t tbody td { position: relative; z-index: 0; vertical-align: middle; text-align: left; }
.ev-flow-t tbody th { width: 41%; padding: 20px 22px; border: 1px solid var(--line); background: rgba(15, 18, 23, .86); }
.ev-flow-n { display: block; margin-bottom: 6px; font: var(--ev-lab); letter-spacing: .16em; color: var(--accent-t); }
.ev-flow-q { display: block; color: var(--text); font: 400 clamp(1.2rem, 1.7vw, 1.45rem)/1.25 var(--serif); }
.ev-flow-t tbody td { padding: 20px 22px 20px calc(72px + 22px); }
.ev-flow-t tbody td::before { content: ''; position: absolute; z-index: -1; inset: 0 0 0 72px; border: 1px solid color-mix(in srgb, var(--teal) 32%, transparent); background: linear-gradient(90deg, rgba(16, 35, 42, .75), rgba(15, 18, 23, .86)); }
.ev-flow-arr { position: absolute; left: 12px; top: 50%; width: 48px; height: 1.5px; background: var(--teal); box-shadow: 0 0 8px rgba(25, 230, 207, .6); transform-origin: left; }
.ev-flow-arr::after { content: ''; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 1.5px solid var(--teal); border-right: 1.5px solid var(--teal); transform: rotate(45deg); }
.ev-flow-chip { display: inline-block; margin-bottom: 8px; padding: 4px 9px; border: 1px solid color-mix(in srgb, var(--teal) 55%, transparent); font: var(--ev-lab); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-t); }
.ev-flow-a { display: block; color: var(--text2); font-size: .98rem; line-height: 1.55; }

/* a purpose for every deliverable: one collection, four uses */
.ev-purpose { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.ev-use { display: grid; grid-template-columns: 148px minmax(0, 1fr); column-gap: 46px; align-items: center; }
.ev-use-core { position: relative; display: grid; place-content: center; gap: 6px; aspect-ratio: 1; padding: 16px; text-align: center; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--teal) 55%, transparent); background: radial-gradient(closest-side, rgba(25, 230, 207, .14), rgba(15, 18, 23, .92)); box-shadow: 0 0 70px -24px var(--teal); }
.ev-use-core b { color: var(--text); font: 400 1.35rem/1.1 var(--serif); font-weight: 400; }
.ev-use-core span { font: var(--ev-lab); letter-spacing: .1em; text-transform: uppercase; color: var(--text2); }
.ev-use-core::after { content: ''; position: absolute; left: 100%; top: 50%; width: 22px; height: 1px; background: var(--teal); transform-origin: left; }
.ev-use-l { position: relative; display: grid; gap: 10px; }
.ev-use-l::before { content: ''; position: absolute; left: -24px; top: 32px; bottom: 32px; width: 1px; background: var(--teal); box-shadow: 0 0 8px rgba(25, 230, 207, .5); transform-origin: 50% 50%; }
.ev-use-l li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); background: rgba(15, 18, 23, .84); }
.ev-use-l li::before { content: ''; position: absolute; left: -24px; top: 50%; width: 24px; height: 1px; background: var(--teal); transform-origin: left; }
.ev-use-l .ev-ico { width: 30px; height: 30px; color: var(--teal); }
.ev-use-l p { margin: 0; max-width: none; font-size: .95rem; line-height: 1.45; }
.ev-use-l p b { display: block; margin-bottom: 2px; color: var(--text); font: 400 1.2rem/1.2 var(--serif); font-weight: 400; }

/* ---------------------------------------------------------------- 6. packages (03) */
.ev-pk-intro { margin-bottom: clamp(36px, 6vw, 64px); }

/* one event day, three coverage windows (drawn to scale: 12 marks = 12 hours) */
.ev-day { position: relative; margin: 0 0 clamp(52px, 7vh, 84px); padding: 22px clamp(16px, 3vw, 34px) 22px; background: var(--ev-panel); border: 1px solid var(--line); }
.ev-day > .cb.tl, .ev-md > .cb.tl, .ev-dl > .cb.tl, .ev-mo > .cb.tl { top: -1px; left: -1px; }
.ev-day > .cb.br, .ev-md > .cb.br, .ev-dl > .cb.br, .ev-mo > .cb.br { bottom: -1px; right: -1px; }
.ev-day-head, .ev-mo-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-bottom: 18px; }
.ev-day-grid { --nw: 230px; --gap: 28px; position: relative; }
.ev-day-ax { position: relative; height: 34px; margin-left: calc(var(--nw) + var(--gap)); }
.ev-day-ph { position: absolute; left: 0; right: 0; top: 0; height: 16px; font: var(--ev-lab); letter-spacing: .12em; text-transform: uppercase; color: var(--text2); }
.ev-day-ph span { position: absolute; top: 0; white-space: nowrap; }
.ev-day-ph span:nth-child(1) { left: 0; } .ev-day-ph span:nth-child(2) { left: 16.667%; } .ev-day-ph span:nth-child(3) { right: 0; }
.ev-day-ticks { position: absolute; left: 0; right: 0; bottom: 4px; height: 8px; border-right: 1px solid var(--line2); background: repeating-linear-gradient(90deg, var(--line2) 0 1px, transparent 1px calc(100% / 12)); }
.ev-day-rows { display: grid; gap: 18px; margin: 0; }
.ev-day-row { display: grid; grid-template-columns: var(--nw) minmax(0, 1fr); column-gap: var(--gap); row-gap: 8px; align-items: center; }
.ev-day-n b { display: block; color: var(--text); font: 400 1.4rem/1.1 var(--serif); font-weight: 400; }
.ev-day-n span { font: var(--ev-lab); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 72%, #fff); }
.ev-day-trk { position: relative; height: 28px; border: 1px solid var(--line); background: repeating-linear-gradient(90deg, rgba(244, 243, 239, .08) 0 1px, transparent 1px calc(100% / 12)), rgba(244, 243, 239, .02); }
.ev-day-trk::before, .ev-day-trk::after { content: ''; position: absolute; top: 0; bottom: 0; width: 16.667%; background: repeating-linear-gradient(135deg, rgba(244, 243, 239, .07) 0 2px, transparent 2px 7px); }
.ev-day-trk::before { left: 0; } .ev-day-trk::after { right: 0; }
.ev-day-trk i { position: absolute; z-index: 1; top: 3px; bottom: 3px; left: calc(var(--s) / 12 * 100%); width: calc((var(--e) - var(--s)) / 12 * 100%); border-radius: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 55%, transparent), var(--c)); box-shadow: 0 0 24px -4px var(--c); }
.ev-day-l { grid-column: 2; color: var(--text2); font-size: .92rem; line-height: 1.4; }
.ev-day-head-play { position: absolute; top: 34px; bottom: 0; left: calc(var(--nw) + var(--gap)); right: 0; pointer-events: none; }
.ev-day-head-play i { position: absolute; top: 0; bottom: 0; left: 100%; width: 1px; background: var(--text); box-shadow: 0 0 12px var(--text); opacity: 0; }

/* package cards — the rows line up across the three cards (subgrid) so the counts compare at a glance */
.ev-cards-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 40px; margin-bottom: 22px; }
.ev-legend { max-width: 46rem; font-size: .92rem; }
.ev-legend .ev-lab { margin-bottom: 6px; }
.ev-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(12, auto); column-gap: clamp(12px, 1.6vw, 22px); margin-bottom: clamp(64px, 9vh, 110px); }
.ev-card { position: relative; grid-row: span 12; display: grid; grid-template-rows: subgrid; row-gap: 14px; padding: 28px clamp(20px, 2.2vw, 30px) 30px;
  background: linear-gradient(175deg, rgba(21, 25, 31, .94), rgba(21, 25, 31, .6)); border: 1px solid var(--line);
  transition: border-color .5s, box-shadow .7s var(--ease), transform .7s var(--ease); }
.ev-card > * { margin: 0 !important; min-width: 0; }
.ev-take { display: contents; }
.ev-card::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--c); box-shadow: 0 0 20px var(--c); transform-origin: left; }
.ev-card.is-flag { background: linear-gradient(170deg, var(--elev), var(--surface)); border-color: color-mix(in srgb, var(--c) 50%, transparent); box-shadow: 0 0 110px -50px var(--c); }
.ev-card:hover, .ev-card:focus-within { border-color: color-mix(in srgb, var(--c) 65%, transparent); box-shadow: 0 34px 90px -44px var(--c); }
.ev-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ev-card-ix { display: inline-flex; align-items: center; gap: 10px; font: var(--ev-lab); letter-spacing: .22em; color: var(--text2); }
.ev-card-ix::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 14px var(--c); }
.ev-card-tag { padding: 7px 11px; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); font: var(--ev-lab); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 72%, #fff); text-align: right; }
.ev-card-name { align-self: end; font: 400 clamp(1.8rem, 2.4vw, 2.3rem)/1.02 var(--serif); letter-spacing: -.02em; }
.ev-card-line { color: var(--text); font: italic 400 1.22rem/1.28 var(--serif); }
.ev-card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; max-width: none; }
.ev-card-price b { font: 400 clamp(3rem, 4.3vw, 4.3rem)/.95 var(--serif); letter-spacing: -.035em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--text) 35%, var(--c)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ev-from, .ev-unit { font: var(--ev-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--text2); }
.ev-unit { flex-basis: 100%; }
.ev-card-purpose { font-size: .96rem; line-height: 1.55; }
.ev-tk { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; align-items: start; padding-top: 14px; border-top: 1px solid var(--line); }
.ev-tk-g { min-height: 22px; padding-top: 3px; }
.ev-tk-t { margin: 0; max-width: none; font-size: .93rem; line-height: 1.45; }
.ev-tk-t b { display: block; font-weight: 600; color: var(--text); }
.ev-tk-t span { display: block; margin-top: 4px; color: var(--text2); font-size: .88rem; }
/* tokens */
.ev-run { position: relative; display: block; height: 6px; margin: 4px 0 10px; background: repeating-linear-gradient(90deg, rgba(244, 243, 239, .2) 0 1px, transparent 1px 10%), rgba(244, 243, 239, .07); }
.ev-run i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w) * 100%); background: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 70%, transparent); transform-origin: left; }
.ev-run::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--w) * 100%); width: calc((var(--w2, var(--w)) - var(--w)) * 100%);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 80%, transparent) 0 2px, transparent 2px 5px); }
.ev-fmt { display: flex; align-items: flex-end; gap: 6px; }
.ev-fmt i { display: block; border: 1.5px solid var(--c); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 30%, transparent), transparent 75%); }
.ev-fmt .is-v { width: 14px; height: 25px; } .ev-fmt .is-h { width: 42px; height: 24px; }
.ev-clips { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 3px; }
.ev-clips i { width: 7px; height: 13px; border: 1px solid color-mix(in srgb, var(--c) 85%, transparent); background: color-mix(in srgb, var(--c) 28%, transparent); }
.ev-clips .is-teaser { width: 12px; height: 21px; margin-left: 6px; border: 1.5px solid var(--c); background: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 0 10px -2px var(--c); }
.ev-voice { display: flex; align-items: center; gap: 3px; height: 22px; }
.ev-voice i { width: 3px; height: calc(var(--h) * 22px); border-radius: 2px; background: color-mix(in srgb, var(--c) 80%, transparent); transform-origin: 50% 50%; }
.ev-car { display: flex; gap: 3px; }
.ev-car i { width: 10px; height: 10px; border: 1px solid color-mix(in srgb, var(--c) 80%, transparent); background: color-mix(in srgb, var(--c) 22%, transparent); }
.ev-car.is-none i { width: 127px; border: 1px dashed var(--line2); background: none; }
.ev-ph { display: grid; grid-template-columns: repeat(10, 10px); gap: 3px; }
.ev-ph i { width: 10px; height: 10px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 34%, #15191F); }
.ev-card-dl { display: grid; align-content: start; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.ev-card-dl div { display: grid; grid-template-columns: 6.6em minmax(0, 1fr); gap: 10px; }
.ev-card-dl dt { padding-top: .2em; font: var(--ev-lab); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 72%, #fff); }
.ev-card-dl dd { margin: 0; color: var(--text); font-size: .93rem; line-height: 1.45; }
.ev-card-dl dd span { display: block; margin-top: 3px; color: var(--text2); font-size: .88rem; }
.ev-card .mag { display: block; align-self: end; }
.ev-card .btn { width: 100%; justify-content: space-between; padding: 19px 22px; background: transparent; color: var(--text); border-color: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: none; }
.ev-card .btn::before { display: none; }
.ev-card .btn:hover, .ev-card .btn:focus-visible { border-color: var(--c); color: color-mix(in srgb, var(--c) 70%, #fff); background: color-mix(in srgb, var(--c) 9%, transparent); box-shadow: 0 0 44px -14px var(--c); }

/* comparison table */
.ev-cmp thead th span { display: inline-flex; align-items: center; gap: 9px; }
.ev-cmp thead th[style] span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.ev-cmp tbody th { width: 16%; }
.ev-cmp td { width: 28%; }
.ev-cmp tbody tr:first-child td { color: var(--text); font: 400 1.6rem/1.1 var(--serif); letter-spacing: -.01em; }
.ev-cmp .na { opacity: 1; color: var(--text2); font-style: italic; }
.ev-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px clamp(24px, 4vw, 56px); max-width: none; margin-bottom: 0; }
.ev-notes p { max-width: 38rem; }

/* ---------------------------------------------------------------- 7. event examples (05; the coverage planner, 04, lives in event-planner.css) */
.ev-x-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.ev-x-tab { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 12px 16px; text-align: left; border: 1px solid var(--line); background: rgba(15, 18, 23, .72);
  color: var(--text2); font: 600 .9rem/1.25 var(--sans); transition: border-color .4s, color .4s, background .4s, box-shadow .5s; }
.ev-x-tab .ev-ico { flex: none; width: 24px; height: 24px; color: var(--accent); }
.ev-x-tab:hover { color: var(--text); border-color: var(--line2); }
.ev-x-tab[aria-selected="true"] { color: var(--text); border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: linear-gradient(170deg, color-mix(in srgb, var(--accent) 14%, transparent), rgba(15, 18, 23, .86)); box-shadow: 0 0 50px -24px var(--accent); }
.ev-x-tab:focus-visible { outline-offset: 2px; }
.ev-x-panel { position: relative; padding: clamp(20px, 3vw, 34px); background: var(--ev-panel); border: 1px solid var(--line); }
.ev-x-panel + .ev-x-panel { margin-top: 14px; }
.ev-x-panel:focus-visible { outline-offset: 2px; }
.ev-x-h { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; color: var(--text); font: 400 clamp(1.5rem, 2.2vw, 2rem)/1.15 var(--serif); }
.ev-x-h .ev-ico { flex: none; width: 28px; height: 28px; color: var(--accent); }
/* with tabs the selected tab names the panel; the heading stays for screen-reader navigation */
.ev-x.is-tabs .ev-x-h { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ev-x-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ev-x-col { position: relative; padding: 20px 20px 22px; border: 1px solid var(--line); border-top: 2px solid var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 6%, transparent), rgba(11, 13, 16, .35) 70%); }
.ev-x-col:nth-child(2) { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, transparent), rgba(11, 13, 16, .35) 70%); }
.ev-x-col:nth-child(3) { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 14%, transparent), rgba(11, 13, 16, .35) 70%); }
.ev-x-k { margin: 0 0 10px; max-width: none; }
.ev-x-k b { display: block; color: var(--text); font: 400 1.35rem/1.15 var(--serif); font-weight: 400; }
.ev-x-k span { font: var(--ev-lab); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 72%, #fff); }
.ev-depth { display: flex; gap: 4px; margin-bottom: 16px; }
.ev-depth i { width: 22px; height: 3px; background: var(--line2); }
.ev-depth i:first-child, .ev-depth.is-2 i:nth-child(2), .ev-depth.is-3 i { background: var(--c); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 70%, transparent); }
.ev-x-it + .ev-x-it { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line2); }
.ev-x-src { display: block; margin-bottom: 6px; color: var(--text2); font: italic 500 .84rem/1.4 var(--sans); }
.ev-x-it p { margin: 0; max-width: none; color: var(--text); font-size: .97rem; line-height: 1.55; }
.ev-x-it p.ev-x-reach { margin-top: 12px; padding: 10px 12px; border-left: 2px solid var(--c); background: color-mix(in srgb, var(--c) 8%, transparent); color: var(--text2); font-size: .92rem; }
.ev-x-reach span { display: block; margin-bottom: 4px; font: var(--ev-lab); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 72%, #fff); }
.ev-best { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px clamp(20px, 3vw, 40px); margin-top: 34px; }
.ev-best p { max-width: none; margin: 0; padding-left: 18px; border-left: 2px solid var(--c); font-size: .96rem; }
.ev-best .ev-lab { margin-bottom: 8px; color: color-mix(in srgb, var(--c) 72%, #fff); }

/* ---------------------------------------------------------------- 8. selected work (06) */
.ev-work { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 26px); align-items: start; }
.ev-reel.is-slate { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: 'k k' 's c'; column-gap: clamp(20px, 3vw, 44px); align-items: center; }
.ev-reel.is-slate .ev-reel-k { grid-area: k; }
.ev-reel.is-slate .ev-slate { grid-area: s; aspect-ratio: 2.35 / 1; }
.ev-reel.is-slate figcaption { grid-area: c; margin-top: 0; }
.ev-reel { position: relative; margin: 0; padding: 16px 16px 20px; background: var(--ev-panel); border: 1px solid var(--line); border-top: 2px solid var(--c); }
.ev-reel-k { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 14px; margin-bottom: 12px; }
.ev-reel-tier { display: inline-flex; align-items: center; gap: 9px; font: 500 max(.7rem, 11px)/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 75%, #fff); }
.ev-reel-tier::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); }
.ev-vm { position: relative; aspect-ratio: 16 / 9; background: #050607; border: 1px solid var(--line); }
.ev-vm iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ev-reel figcaption { display: grid; gap: 6px; margin-top: 14px; }
.ev-reel figcaption > b { color: var(--text); font: 400 clamp(1.3rem, 1.8vw, 1.6rem)/1.2 var(--serif); font-weight: 400; }
.ev-reel-fmt { font: var(--ev-lab); letter-spacing: .12em; text-transform: uppercase; color: var(--text2); }
.ev-reel-def { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--text2); font-size: .92rem; line-height: 1.5; }
.ev-reel-def .ev-lab { margin: 0 0 4px; color: color-mix(in srgb, var(--c) 72%, #fff); }
.ev-reel.is-slate .ev-reel-def .ev-lab { margin-top: 10px; }
/* the Storyline example is in the edit: a slate, not a fake video */
.ev-slate { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: 18px; row-gap: 10px; align-items: end; aspect-ratio: 16 / 9; padding: 18px;
  border: 1px dashed var(--line2); background: radial-gradient(80% 90% at 30% 40%, rgba(21, 152, 184, .14), transparent 70%), #07090b; overflow: hidden; }
.ev-slate-sticks { position: relative; display: block; height: 30px; grid-column: 1; grid-row: 1; }
.ev-slate-sticks i { position: absolute; left: 0; right: 0; height: 13px; border: 1px solid rgba(244, 243, 239, .55);
  background: repeating-linear-gradient(115deg, rgba(244, 243, 239, .85) 0 12px, #0B0D10 12px 24px); }
.ev-slate-sticks i:first-child { top: 0; transform-origin: 0 100%; }
.ev-slate-sticks i:last-child { bottom: 0; }
.ev-slate-board { grid-column: 1; grid-row: 2; align-self: start; display: grid; border: 1px solid rgba(244, 243, 239, .45); }
.ev-slate-row { display: grid; grid-template-columns: 6.6em minmax(0, 1fr); }
.ev-slate-row + .ev-slate-row { border-top: 1px solid rgba(244, 243, 239, .3); }
.ev-slate-row em { padding: 7px 10px; border-right: 1px solid rgba(244, 243, 239, .3); font: var(--ev-lab); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); }
.ev-slate-row b { padding: 5px 10px; color: var(--text); font: 400 1.08rem/1.25 var(--serif); font-weight: 400; }
.ev-slate-row b.is-t { color: color-mix(in srgb, var(--c) 72%, #fff); }
.ev-slate-frame { grid-column: 2; grid-row: 1 / span 2; align-self: center; position: relative; display: block; width: clamp(54px, 6vw, 78px); aspect-ratio: 9 / 16; border: 1.5px dashed color-mix(in srgb, var(--c) 75%, transparent); }
.ev-slate-frame i { position: absolute; inset: 22% 18%; border-top: 1px solid color-mix(in srgb, var(--c) 60%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--c) 60%, transparent); }

/* ---------------------------------------------------------------- 9. multi-day (07) */
.ev-md { position: relative; margin: 0 0 clamp(52px, 7vh, 84px); padding: 22px clamp(16px, 3vw, 34px) 26px; background: var(--ev-panel); border: 1px solid var(--line); }
.ev-md-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-bottom: 22px; }
.ev-md-sel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ev-md-sel .ev-lab { margin-right: 6px; }
.ev-md-sel button { min-height: 44px; padding: 0 16px; border: 1px solid var(--line2); font: 500 max(.7rem, 11px)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text2); transition: color .4s, border-color .4s, background .4s, box-shadow .5s; }
.ev-md-sel button:hover { color: var(--text); border-color: rgba(244, 243, 239, .35); }
.ev-md-sel button[aria-pressed="true"] { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: 0 0 30px -12px var(--accent); }
.ev-md-stage { display: grid; grid-template-columns: minmax(0, 1fr) clamp(60px, 10vw, 150px) minmax(0, .82fr); align-items: center; }
.ev-md-days { display: grid; grid-template-rows: repeat(3, 64px); row-gap: 22px; margin: 0; }
.ev-md-day { display: grid; grid-template-columns: 4.4em minmax(0, 1fr); align-items: center; gap: 12px; }
.ev-md-dn { font: var(--ev-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--text); transition: color .5s var(--ease); }
.ev-md-film { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; height: 64px; padding: 11px 6px; background: #050607; border: 1px solid var(--line2); }
.ev-md-film::before, .ev-md-film::after { content: ''; position: absolute; left: 6px; right: 6px; height: 4px; background: repeating-linear-gradient(90deg, rgba(244, 243, 239, .3) 0 5px, transparent 5px 11px); }
.ev-md-film::before { top: 3px; } .ev-md-film::after { bottom: 3px; }
.ev-md-film i { border: 1px solid var(--line); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 32%, #15191F), #15191F 80%); }
.ev-md-film i:nth-child(3n + 2) { background: linear-gradient(200deg, color-mix(in srgb, var(--accent) 20%, #15191F), #10232A 85%); }
.ev-md-flow { display: block; width: 100%; height: 236px; overflow: visible; }
.ev-md-flow .f-p { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 70%, transparent)); transition: opacity .5s var(--ease); }
.ev-md-merge { display: none; }
.ev-md-out { position: relative; padding: 22px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); background: linear-gradient(170deg, color-mix(in srgb, var(--accent) 16%, transparent), rgba(15, 18, 23, .92)); box-shadow: 0 0 80px -30px var(--accent); }
.ev-md-out-h { margin: 8px 0 14px; max-width: none; color: var(--text); font: 400 clamp(1.3rem, 2vw, 1.7rem)/1.2 var(--serif); }
.ev-md-icons { display: flex; gap: 10px; }
.ev-md-icons .ev-ico { width: 30px; height: 30px; color: var(--accent-t); }
.ev-md-day .ev-md-film { transition: opacity .5s var(--ease); }
.ev-md[data-days="1"] .ev-md-day[data-d="2"] .ev-md-film, .ev-md[data-days="1"] .ev-md-day[data-d="3"] .ev-md-film, .ev-md[data-days="2"] .ev-md-day[data-d="3"] .ev-md-film { opacity: .22; }
.ev-md[data-days="1"] .ev-md-day[data-d="2"] .ev-md-dn, .ev-md[data-days="1"] .ev-md-day[data-d="3"] .ev-md-dn, .ev-md[data-days="2"] .ev-md-day[data-d="3"] .ev-md-dn { color: var(--text2); }
.ev-md[data-days="1"] .f-p[data-d="2"], .ev-md[data-days="1"] .f-p[data-d="3"], .ev-md[data-days="2"] .f-p[data-d="3"] { opacity: .1; }
.ev-md-tot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.ev-md-tot-h { margin-bottom: 12px; max-width: none; font: var(--ev-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--text2); }
.ev-md-tot ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ev-md-tot li { padding: 14px 16px; border: 1px solid var(--line); border-top: 2px solid var(--c); background: rgba(11, 13, 16, .5); }
.ev-md-tot li span { display: block; margin-bottom: 6px; font: var(--ev-lab); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 72%, #fff); }
.ev-md-tot li b { display: block; color: var(--text); font: 400 clamp(1.8rem, 3vw, 2.6rem)/1 var(--serif); font-weight: 400; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ev-md-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 64px); margin-bottom: clamp(48px, 7vh, 80px); }
.ev-same { display: grid; gap: 12px; }
.ev-same li { padding: 14px 16px 14px 18px; border-left: 2px solid var(--c); background: rgba(15, 18, 23, .62); color: var(--text2); font-size: .95rem; line-height: 1.5; }
.ev-same b { color: var(--text); }
.ev-add tbody th { width: 26%; }
@media (min-width: 761px) { .ev-add td:nth-child(2), .ev-add td:nth-child(3) { white-space: nowrap; } }
.ev-tot tr > * { transition: background .5s, color .5s; }
.ev-tot tr.is-on > * { background: color-mix(in srgb, var(--accent) 11%, transparent); }
.ev-tot tr.is-on th { color: var(--accent-t); }
.ev-tot td, .ev-tot tbody th { font-variant-numeric: tabular-nums; }
.ev-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ev-how p { max-width: none; margin: 0; padding: 20px; border: 1px solid var(--line); border-top: 2px solid var(--c); background: rgba(15, 18, 23, .72); font-size: .93rem; line-height: 1.55; }
.ev-how .ev-lab { margin-bottom: 10px; color: color-mix(in srgb, var(--c) 72%, #fff); }
.ev-md-btns { margin-top: 30px; }

/* ---------------------------------------------------------------- 10. existing-client visit (08) */
.ev-visit { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.ev-visit .sec-h { max-width: 12em; margin-bottom: 28px; }
.ev-visit .svc-lede { max-width: 36rem; margin-bottom: 1em; }
.ev-visit-price { margin: 28px 0 16px !important; }
.ev-visit-dl { margin: 0 0 8px; border-top: 1px solid var(--line); }
.ev-visit-dl > div { display: grid; grid-template-columns: 8.4em minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ev-visit-dl dt { padding-top: .25em; font: var(--ev-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-t); }
.ev-visit-dl dd { margin: 0; color: var(--text); font-size: .96rem; line-height: 1.5; }
.ev-visit-btns { margin-top: 28px; }
.ev-visit .ev-visit-btn { border-color: color-mix(in srgb, var(--accent) 65%, transparent); }
.ev-visit .ev-visit-btn:hover, .ev-visit .ev-visit-btn:focus-visible { border-color: var(--accent); color: var(--accent-t); background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: 0 0 40px -12px var(--accent); }
.ev-mo { position: sticky; top: 124px; margin: 0; padding: 20px; background: rgba(11, 13, 16, .62); border: 1px solid var(--line); }
.ev-mo-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ev-mo-d { position: relative; min-height: 40px; padding: 5px 6px; border: 1px solid var(--line); background: rgba(21, 25, 31, .5); font: 500 11px/1 var(--mono); color: var(--text2); }
.ev-mo-d b { font-weight: 500; }
.ev-mo-d.is-reg { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); }
.ev-mo-d.is-evt { border-color: var(--teal); background: rgba(25, 230, 207, .16); color: var(--text); box-shadow: 0 0 24px -6px var(--teal); }
.ev-mo-d.is-evt::after { content: '+$350'; position: absolute; right: 5px; bottom: 5px; font: 600 11px/1 var(--mono); color: var(--teal); }
.ev-mo-key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; max-width: none; font: var(--ev-lab); letter-spacing: .1em; text-transform: uppercase; color: var(--text2); }
.ev-mo-key span { display: inline-flex; align-items: center; gap: 8px; }
.ev-mo-key span::before { content: ''; width: 10px; height: 10px; border: 1px solid; }
.ev-mo-key .is-reg::before { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 30%, transparent); }
.ev-mo-key .is-evt::before { border-color: var(--teal); background: rgba(25, 230, 207, .3); }
.ev-mo-flow { position: relative; height: 34px; }
.ev-mo-line { position: absolute; top: 4px; bottom: 4px; left: calc(2.5 / 7 * 100%); width: 1.5px; background: var(--teal); box-shadow: 0 0 8px var(--teal); transform-origin: top; }
.ev-mo-line::after { content: ''; position: absolute; left: -3.5px; bottom: 0; width: 7px; height: 7px; border-right: 1.5px solid var(--teal); border-bottom: 1.5px solid var(--teal); transform: rotate(45deg); }
.ev-mo-alloc { padding: 14px; border: 1px dashed var(--line2); }
.ev-mo-slots { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.ev-mo-slots i { aspect-ratio: 9 / 16; border: 1px solid var(--line2); background: linear-gradient(165deg, var(--elev), var(--surface)); }
.ev-mo-slots i.is-evt { border-color: var(--teal); background: linear-gradient(165deg, rgba(25, 230, 207, .38), var(--surface)); box-shadow: 0 0 16px -4px var(--teal); }

/* ---------------------------------------------------------------- 11. planning + delivery (09) */
.ev-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin: 0 0 clamp(48px, 7vh, 80px); padding-top: 36px; }
.ev-steps::before { content: ''; position: absolute; top: 8px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--accent), var(--line2)); transform-origin: left; }
.ev-steps li { position: relative; }
.ev-steps li::before { content: ''; position: absolute; top: -33px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1px solid var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); }
.ev-steps-n { display: block; margin-bottom: 10px; color: transparent; font: 400 2.6rem/1 var(--serif); -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 75%, transparent); }
.ev-steps b { display: block; margin-bottom: 8px; color: var(--text); font: 400 1.4rem/1.15 var(--serif); font-weight: 400; }
.ev-steps li > span:last-child { display: block; color: var(--text2); font-size: .95rem; line-height: 1.5; }

.ev-dl { position: relative; margin: 0 0 clamp(56px, 8vh, 96px); padding: 24px clamp(16px, 3vw, 34px) 24px; background: var(--ev-panel); border: 1px solid var(--line); }
.ev-dl-clocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; }
.ev-dl-c { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px; border: 1px solid var(--line); background: rgba(11, 13, 16, .5); }
.ev-dl-c svg { width: 56px; height: 56px; transform: rotate(-90deg); }
.ev-dl-c .c-bg { fill: none; stroke: var(--line2); stroke-width: 3; }
.ev-dl-c .c-fg { fill: none; stroke: var(--accent); stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: var(--f) 1; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 70%, transparent)); }
.ev-dl-c p { margin: 0; max-width: none; }
.ev-dl-c b { display: block; margin-bottom: 8px; color: var(--text); font: 400 clamp(1.6rem, 2.4vw, 2.1rem)/1 var(--serif); font-weight: 400; }
.ev-dl-c span { display: block; color: var(--text2); font-size: .9rem; line-height: 1.45; }
.ev-dl-board { --nw: 200px; --gap: 24px; position: relative; display: grid; gap: 6px; }
.ev-dl-ax { position: relative; height: 24px; margin-left: calc(var(--nw) + var(--gap)); border-bottom: 1px solid var(--line2); font: var(--ev-lab); letter-spacing: .1em; text-transform: uppercase; color: var(--text2); }
.ev-dl-ax span { position: absolute; bottom: 6px; left: calc(var(--at) / 7 * 100%); transform: translateX(-50%); white-space: nowrap; }
.ev-dl-ax .ev-dl-start { left: 0; transform: none; color: var(--text); }
.ev-dl-ax span:last-child { transform: translateX(-100%); }
.ev-dl-lane { display: grid; grid-template-columns: var(--nw) minmax(0, 1fr); gap: var(--gap); align-items: center; }
.ev-dl-n { display: flex; align-items: center; gap: 10px; color: var(--text); font: 400 1.25rem/1.15 var(--serif); }
.ev-dl-n::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); }
.ev-dl-trk { position: relative; height: 62px; margin: 0; padding: 0; background: repeating-linear-gradient(90deg, rgba(244, 243, 239, .07) 0 1px, transparent 1px calc(100% / 7)); }
.ev-dl-trk::before { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: 1px; background: var(--line2); }
.ev-dl-trk::after { content: ''; position: absolute; left: 0; top: calc(50% - 1px); height: 2px; width: calc(var(--end) / 7 * 100%); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 40%, transparent), var(--c)); transform-origin: left; }
.ev-dl-m { position: absolute; z-index: 1; top: 50%; left: calc(var(--at) / 7 * 100%); width: 0; height: 0; }
.ev-dl-m::before { content: ''; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent), 0 0 14px var(--c); }
.ev-dl-m b { position: absolute; left: -6px; white-space: nowrap; font: var(--ev-lab); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.ev-dl-m.is-up b { bottom: 12px; } .ev-dl-m.is-dn b { top: 12px; }
.ev-dl-m[style*="--at:7"] b { left: auto; right: -6px; }
.ev-dl-play { position: absolute; top: 24px; bottom: 0; left: calc(var(--nw) + var(--gap)); right: 0; pointer-events: none; }
.ev-dl-play i { position: absolute; top: 0; bottom: 0; left: 100%; width: 1px; background: var(--text); box-shadow: 0 0 12px var(--text); opacity: 0; }

/* the inquiry: a call sheet */
.ev-plan-f { position: relative; padding: clamp(24px, 4vw, 56px); scroll-margin-top: 104px; background: linear-gradient(165deg, var(--elev), var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); box-shadow: 0 0 120px -60px var(--accent); }
.ev-plan-f:focus { outline: none; }
.ev-plan-f > .cb.tl { top: -1px; left: -1px; } .ev-plan-f > .cb.br { bottom: -1px; right: -1px; }
.ev-plan-f > .cb { opacity: .95; transform: none; }
.ev-form-wrap { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.ev-form-side { position: sticky; top: 124px; }
.ev-form-h { margin: 12px 0 16px; color: var(--text); font: 400 clamp(2rem, 3.6vw, 3.2rem)/1.02 var(--serif); letter-spacing: -.02em; }
.ev-form-h:focus { outline: none; }
.ev-form-side > p { font-size: .98rem; }
.ev-pick { margin-top: 24px; padding: 16px 18px; border: 1px solid var(--line2); border-left: 2px solid var(--accent); background: rgba(11, 13, 16, .45); }
.ev-pick-p { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 0; max-width: none; }
.ev-pick-p b { color: var(--text); font: 400 1.4rem/1.15 var(--serif); font-weight: 400; }
.ev-pick-p span { color: var(--text2); font-size: .93rem; }
.ev-pick-t { margin: 8px 0 0 !important; max-width: none; color: var(--accent-t); font-size: .93rem; }
.ev-pick-t:empty { display: none; }
.ev-form-next { margin-top: 24px !important; font-size: .93rem; }
.ev-form-next .ev-lab { margin-bottom: 6px; }
.ev-fs { min-width: 0; margin: 0 0 28px; padding: 0; border: 0; }
.ev-fs > legend { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 16px; padding: 0 0 12px; border-bottom: 1px solid var(--line); font: var(--ev-lab); letter-spacing: .16em; text-transform: uppercase; color: var(--text); }
.ev-fs-n { color: var(--accent-t); }
.ev-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 18px; }
.ev-f { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ev-f-wide { grid-column: 1 / -1; }
.ev-f > label, .ev-radios > legend { color: var(--text); font: 600 .92rem/1.35 var(--sans); }
.ev-f-goal > label { font: 400 clamp(1.25rem, 1.9vw, 1.55rem)/1.25 var(--serif); }
.ev-opt { color: var(--text2); font-weight: 400; }
.ev-form input[type="text"], .ev-form input[type="email"], .ev-form select, .ev-form textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; color: var(--text); font: 400 1rem/1.4 var(--sans); background: rgba(11, 13, 16, .78); border: 1px solid var(--line2); border-radius: 2px;
  -webkit-appearance: none; appearance: none; transition: border-color .3s, box-shadow .3s; }
.ev-form textarea { min-height: 140px; resize: vertical; }
.ev-form select { padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2319E6CF' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 12px 8px; }
.ev-form select option { color: var(--text); background: #15191F; }
.ev-form :is(input, select, textarea):hover { border-color: rgba(244, 243, 239, .32); }
.ev-form :is(input, select, textarea):focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(25, 230, 207, .2); }
.ev-form :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--ev-bad); box-shadow: 0 0 0 3px rgba(255, 138, 122, .14); }
.ev-hint { margin: 0; max-width: none; color: var(--text2); font-size: .86rem; }
.ev-err { margin: 0; max-width: none; color: #ffb4a9; font-size: .88rem; line-height: 1.4; }
.ev-err::before { content: '!'; content: '!' / ''; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 8px; border-radius: 50%; background: var(--ev-bad); color: #2a0d08; font: 700 11px/1 var(--sans); vertical-align: 1px; }
.ev-radios { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; padding: 0; border: 0; }
.ev-radios > legend { margin-bottom: 8px; padding: 0; }
.ev-radios .ev-err { flex-basis: 100%; }
.ev-radio { position: relative; display: inline-flex; }
.ev-radio input { position: absolute; top: 50%; left: 14px; width: 14px; height: 14px; margin: -7px 0 0; opacity: 0; }
.ev-radio label { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 14px; border: 1px solid var(--line2); background: rgba(11, 13, 16, .62); color: var(--text2); font: 600 .92rem/1 var(--sans); cursor: pointer; transition: color .3s, border-color .3s, background .3s; }
.ev-radio label::before { content: ''; flex: none; width: 14px; height: 14px; border: 1.5px solid rgba(244, 243, 239, .4); border-radius: 50%; box-shadow: inset 0 0 0 3px #0B0D10; transition: background .3s, border-color .3s; }
.ev-radio label:hover { color: var(--text); border-color: rgba(244, 243, 239, .32); }
.ev-radio input:checked + label { color: var(--text); border-color: var(--teal); background: rgba(25, 230, 207, .08); }
.ev-radio input:checked + label::before { border-color: var(--teal); background: var(--teal); }
.ev-radio input:focus-visible + label { outline: 2px solid var(--teal); outline-offset: 3px; }
.ev-radios.is-bad .ev-radio label { border-color: var(--ev-bad); }
.ev-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ev-submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px 20px; padding-top: 6px; }
.ev-status { flex: 1 1 14rem; margin: 0; max-width: none; color: var(--text2); font-size: .92rem; }
.ev-fail { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 14px 16px; border: 1px solid rgba(255, 138, 122, .55); background: rgba(255, 138, 122, .07); }
.ev-fail p { flex: 1 1 18rem; margin: 0; max-width: none; color: var(--text); font-size: .95rem; }
.ev-fail .btn { padding: 14px 20px; }
.ev-fail .ev-fail-alt { flex-basis: 100%; color: var(--text2); }   /* 429 / 503: the content-call booking link as the alternative */
.ev-send[disabled] { opacity: .7; cursor: progress; }
.ev-err-note { display: none; margin: 0 0 22px; max-width: none; padding: 14px 16px; border: 1px solid rgba(255, 138, 122, .55); background: rgba(255, 138, 122, .07); color: var(--text); font-size: .95rem; }
.ev-err-note:focus { outline: none; }
.ev-err-note:target, .ev-plan-f.is-err .ev-err-note { display: block; }
.ev-plan-f.is-sent .ev-err-note { display: none; }
.ev-sent, .ev-err-note { scroll-margin-top: 120px; }
.ev-sent { display: none; padding: clamp(24px, 4vw, 40px); border: 1px solid color-mix(in srgb, var(--teal) 50%, transparent); background: rgba(16, 35, 42, .55); }
.ev-sent:focus { outline: none; }
.ev-sent:target, .ev-plan-f.is-sent .ev-sent { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: start; }
.ev-sent:target ~ .ev-form, .ev-plan-f.is-sent .ev-form, .ev-plan-f.is-sent .ev-form-next { display: none; }
.ev-plan-f:has(.ev-sent:target) .ev-form-next { display: none; }   /* no-JS arrival: the side note would repeat the confirmation */
.ev-sent-mark { display: grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid var(--teal); border-radius: 50%; color: var(--teal); box-shadow: 0 0 30px -8px var(--teal); }
.ev-sent-mark svg { width: 24px; height: 24px; }
.ev-sent-p { margin: 0; max-width: 34rem; color: var(--text); font: 400 clamp(1.2rem, 1.8vw, 1.5rem)/1.4 var(--serif); }
.ev-sent-p strong { display: block; margin-bottom: 8px; color: var(--text); font: 400 clamp(1.8rem, 3vw, 2.5rem)/1.1 var(--serif); }
.ev-monthly { margin: 44px auto 0; text-align: center; color: var(--text2); }

/* ---------------------------------------------------------------- 11a. stills from the example films
   Two films lend the page their frames: the 220 Event Story Doc (the Documentary example: the big-event atmosphere,
   setup to the main sessions) and the UAB School of Dentistry visit recap (the Storyline & Sinker example: planned
   conversations and the participant experience). Each still keeps its own film's caption and sits only beside its
   own package; the Storyline tiles stay drawn (that example is still in the edit). Every still has a sized box
   (aspect-ratio or fixed tile), so nothing shifts as it loads. */

/* hero, call time: the venue from above, dimmed and faded behind the opening words */
.ev-hero > .wrap { z-index: 1; }
.ev-hero-still { position: absolute; z-index: 0; top: 0; right: 0; width: min(84vw, 1280px); margin: 0; pointer-events: none; }
.ev-hero-still-f { display: block; aspect-ratio: 16 / 9; overflow: hidden;
  -webkit-mask-image: radial-gradient(118% 92% at 74% 34%, #000 22%, rgba(0, 0, 0, .55) 46%, transparent 72%);
  mask-image: radial-gradient(118% 92% at 74% 34%, #000 22%, rgba(0, 0, 0, .55) 46%, transparent 72%); }
.ev-hero-still-f img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: .34; filter: saturate(.85); }
.ev-still-cap { position: absolute; top: 110px; right: calc((100vw - min(1240px, 100vw - 48px)) / 2); display: flex; align-items: baseline; justify-content: flex-end; gap: 9px;
  max-width: min(44rem, calc(100vw - 48px)); margin: 0; text-align: right; font: var(--ev-lab); letter-spacing: .12em; text-transform: uppercase; color: var(--text2); }
.ev-still-cap i { flex: none; width: 6px; height: 6px; transform: rotate(45deg) translateY(-1px); background: var(--teal); box-shadow: 0 0 8px var(--teal); }

/* research: the people, moments, and evidence the event supplies (the Storyline & Sinker example) */
.ev-evid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 84px); align-items: center; margin-top: 40px; }
.ev-evid .ev-punch { margin-top: 0; }
.ev-trio { margin: 0; }
.ev-trio-l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.1vw, 14px); max-width: 560px; margin: 0 0 0 auto; }
.ev-trio-l li { min-width: 0; }
.ev-trio-f, .ev-frame, .ev-x-eg-f { position: relative; display: block; overflow: hidden; background: #07090b; border: 1px solid var(--line); border-radius: 3px; }
.ev-trio-f { aspect-ratio: 9 / 16; }
.ev-trio-f img, .ev-frame img, .ev-x-eg-f img, .ev-poster-img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.ev-trio-k { display: flex; align-items: center; gap: 9px; margin-top: 10px; font: var(--ev-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-t); }
.ev-trio-k::before { content: ''; flex: none; width: 16px; height: 1px; background: var(--teal); box-shadow: 0 0 6px var(--teal); }
.ev-trio .ev-cap { max-width: 560px; margin: 14px 0 0 auto; }

/* package cards + planner: real frames inside the format and clip tiles (the counts stay drawn to scale) */
.ev-legend-src { display: block; margin-top: 6px; color: var(--text2); font-size: .86rem; }
.ev-tk-g .ev-fmt { gap: 6px; }
.ev-tk-g .ev-fmt .is-v { width: 27px; height: 48px; }
.ev-tk-g .ev-fmt .is-h { width: 85px; height: 48px; }
.ev-fmt.is-shot i, .ev-clips.is-shot i, .ev-clips.is-shot b { position: relative; overflow: hidden; background: #07090b; }
.ev-fmt.is-shot img, .ev-clips.is-shot img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.ev-clips.is-shot { display: grid; grid-template-columns: repeat(6, 14px) auto; grid-auto-rows: 25px; gap: 3px; align-items: start; }
.ev-clips.is-shot i { width: 14px; height: 25px; }
.ev-clips.is-shot .is-teaser { grid-column: 7; grid-row: 1 / span 2; width: 30px; height: 53px; margin-left: 5px; }

/* explorer: the matching example, beside its own package column */
.ev-x-eg { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; align-items: center; margin: 18px 0 0; padding-top: 16px; border-top: 1px dashed var(--line2); }
.ev-x-eg-f { aspect-ratio: 16 / 9; border-color: color-mix(in srgb, var(--c) 45%, transparent); border-radius: 2px; }
.ev-x-eg figcaption { min-width: 0; color: var(--text2); font-size: .86rem; line-height: 1.45; }
.ev-x-eg .ev-lab { margin-bottom: 2px; color: color-mix(in srgb, var(--c) 72%, #fff); }
.ev-x-eg .tlink { display: flex; width: fit-content; min-height: 36px; font-size: max(.66rem, 11px); }

/* selected work: a designed poster per film; the play button (hidden until event.js reveals it) swaps in the Vimeo
   player. Without JS the poster's "Watch the film on Vimeo" link opens the film. */
.ev-reel[id] { scroll-margin-top: 120px; }
.ev-player { overflow: hidden; container-type: inline-size; }
.ev-poster { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: clamp(12px, 1.8vw, 20px); }
.ev-poster-img { position: absolute; inset: 0; }
.ev-poster-img::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(5, 7, 10, .88) 0%, rgba(5, 7, 10, .3) 40%, rgba(5, 7, 10, 0) 60%), linear-gradient(180deg, rgba(5, 7, 10, .62) 0%, rgba(5, 7, 10, 0) 28%),
    linear-gradient(90deg, rgba(5, 7, 10, .62) 0%, rgba(5, 7, 10, .2) 42%, rgba(5, 7, 10, 0) 62%); }
.ev-poster-k { position: relative; grid-row: 1; display: flex; align-items: center; gap: 9px; margin: 0; max-width: none; font: var(--ev-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.ev-poster-k i { flex: none; width: 7px; height: 7px; transform: rotate(45deg); background: var(--c); box-shadow: 0 0 10px var(--c); }
.ev-poster-t { position: relative; grid-row: 3; margin: 0; max-width: min(11em, 58%); color: var(--text); font: 400 clamp(1.4rem, 2.5vw, 2.3rem)/1 var(--serif); font-size: clamp(1.15rem, 5.6cqi, 2.4rem); letter-spacing: -.02em; }
.ev-poster-t em { display: block; font-style: italic; color: color-mix(in srgb, var(--c) 78%, #fff); }
.ev-play { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 10px; width: 100%; padding: 0 clamp(14px, 4%, 40px) clamp(14px, 5%, 32px) 0; border: 0; background: none; color: var(--text); cursor: pointer; }
.ev-play-i { display: grid; place-items: center; width: clamp(56px, 6vw, 84px); aspect-ratio: 1; border: 1.5px solid var(--c); border-radius: 50%; background: rgba(11, 13, 16, .55);
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--c) 9%, transparent), 0 0 60px -10px var(--c); transition: transform .5s var(--ease), background .4s, box-shadow .5s var(--ease); }
.ev-play-i svg { width: 38%; height: 38%; margin-left: 7%; fill: var(--c); }
.ev-play-t { min-width: clamp(56px, 6vw, 84px); text-align: center; font: var(--ev-lab); letter-spacing: .16em; text-transform: uppercase; color: var(--text); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.ev-play:hover .ev-play-i, .ev-play:focus-visible .ev-play-i { transform: scale(1.06); background: color-mix(in srgb, var(--c) 16%, rgba(11, 13, 16, .6)); box-shadow: 0 0 0 13px color-mix(in srgb, var(--c) 12%, transparent), 0 0 80px -6px var(--c); }
.ev-play:focus-visible { outline: none; }
.ev-play:focus-visible .ev-play-i { outline: 2px solid var(--c); outline-offset: 6px; }
.ev-watch { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; white-space: nowrap;
  border: 1px solid var(--c); background: rgba(11, 13, 16, .74); color: var(--text); font: 700 .74rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.ev-watch:hover, .ev-watch:focus-visible { color: color-mix(in srgb, var(--c) 72%, #fff); background: rgba(11, 13, 16, .9); }
/* the film follows its event, frame by frame */
.ev-frames { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.ev-frames li { min-width: 0; }
.ev-frame { aspect-ratio: 16 / 9; border-radius: 2px; }
.ev-frame-l { display: flex; align-items: flex-start; gap: 7px; margin-top: 7px; font: var(--ev-lab); letter-spacing: .1em; text-transform: uppercase; color: var(--text2); }
.ev-frame-l::before { content: ''; flex: none; width: 5px; height: 5px; margin-top: .5em; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.ev-frames-cap { margin-top: 10px; }

/* after teardown: the hall in the dark; the heart of it: a hand toward the stage (a still beside each act's heading) */
.ev-dl-shot, .ev-act-shot { max-width: none; margin-top: 26px; }

/* packages: stills placed along the example event day, under its tracks (an example day, not the 220 schedule) */
.ev-day-reel-wrap { --nw: 230px; --gap: 28px; padding-left: calc(var(--nw) + var(--gap)); margin-top: 22px; }
.ev-day-reel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 18px 0 0; border-top: 1px dashed var(--line2); list-style: none; }
.ev-day-reel li { min-width: 0; }
.ev-day-reel .ev-frame-l::before { background: var(--teal); box-shadow: 0 0 6px var(--teal); }
.ev-day-reel-cap { margin-top: 10px; }

/* delivery: the Documentary's three stages carry tiles from its example film */
.ev-dl-c .ev-dl-sh { display: flex; align-items: flex-end; gap: 4px; margin-top: 12px; }
.ev-dl-sh i { position: relative; display: block; overflow: hidden; width: 18px; height: 32px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); background: #07090b; }
.ev-dl-sh i.is-v { width: 27px; height: 48px; }
.ev-dl-sh i.is-h { width: 85px; height: 48px; }
.ev-dl-sh img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.ev-dl-sh em { margin-left: 6px; font: var(--ev-lab); font-style: normal; letter-spacing: .1em; color: var(--text2); }
.ev-dl-sh-cap { margin: -12px 0 24px; }

@media (max-width: 980px) {
  .ev-day-reel-wrap { --nw: 180px; }
  .ev-evid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ev-trio-l, .ev-trio .ev-cap { max-width: none; margin-left: 0; }
}
@media (max-width: 760px) {
  .ev-day-reel-wrap { --nw: 0px; --gap: 0px; }
  .ev-hero-still { width: 100%; }
  .ev-hero-still-f { aspect-ratio: 3 / 4;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 46%, transparent 96%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 46%, transparent 96%); }
  .ev-hero-still-f img { object-position: 52% 50%; opacity: .36; }
  .ev-still-cap { top: 106px; }
}
@media (max-width: 560px) {
  .ev-poster-k, .ev-play-t { display: none; }
  .ev-poster-t { max-width: 62%; }
  .ev-play { padding: 0 12px 12px 0; }
  .ev-play-i { width: 52px; }
  .ev-watch { top: 14px; transform: translateX(-50%); min-height: 44px; padding: 0 14px; font-size: .68rem; }
  /* two to a row; five frames sit three over two */
  .ev-frames { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 12px; }
  .ev-frames li { grid-column: span 3; }
  .ev-frames li:first-child:nth-last-child(5), .ev-frames li:first-child:nth-last-child(5) ~ li:nth-child(-n + 3) { grid-column: span 2; }
  .ev-day-reel { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 12px; }
  .ev-day-reel li { grid-column: span 2; }
  .ev-day-reel li:nth-child(n + 4) { grid-column: span 3; }
  .ev-x-eg { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ev-x-eg-f { max-width: 280px; }
}

/* ---------------------------------------------------------------- 12. responsive */
@media (max-width: 1100px) {
  .ev-cards { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 16px; }
  .ev-card { grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 48px); align-content: start; }
  .ev-card > :not(.ev-take) { grid-column: 1; }
  .ev-take { display: grid; grid-column: 2; grid-row: 1 / span 7; align-content: start; gap: 14px; }
  .ev-card .mag { max-width: 420px; }
}
@media (max-width: 980px) {
  .ev-hero-grid, .ev-purpose, .ev-visit, .ev-md-cols, .ev-form-wrap { grid-template-columns: minmax(0, 1fr); }
  .ev-hero-fig { margin-top: 8px; }
  .ev-form-side, .ev-mo { position: static; }
  .ev-work { grid-template-columns: minmax(0, 1fr); }
  .ev-reel.is-slate { display: block; }
  .ev-reel.is-slate .ev-slate { aspect-ratio: 16 / 9; }
  .ev-reel.is-slate figcaption { margin-top: 14px; }
  .ev-best, .ev-how { grid-template-columns: minmax(0, 1fr); }
  .ev-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .ev-steps::before { display: none; }
  .ev-steps li::before { display: none; }
  .ev-x-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-day-grid { --nw: 180px; }
  .ev-dl-board { --nw: 160px; }
  .ev-shot { max-width: none; }
}
@media (max-width: 860px) {
  .ev-x-cols { grid-template-columns: minmax(0, 1fr); }
  .ev-dl-clocks { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ev-card { display: flex; flex-direction: column; gap: 14px; }
  .ev-card-name, .ev-card .mag { align-self: stretch; }
  .ev-notes { grid-template-columns: minmax(0, 1fr); }
  .ev-take { display: grid; gap: 14px; }
  .ev-card .mag { max-width: none; }
  .ev-plan-key { grid-template-columns: minmax(0, 1fr); }
  /* coverage day: names above their tracks */
  .ev-day-grid { --nw: 0px; --gap: 0px; }
  .ev-day-row { grid-template-columns: minmax(0, 1fr); }
  .ev-day-l { grid-column: 1; }
  .ev-day-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
  /* research flow: question above its decision */
  .ev-flow-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ev-flow-t, .ev-flow-t tbody, .ev-flow-t tr, .ev-flow-t tbody th, .ev-flow-t tbody td { display: block; width: auto; }
  .ev-flow-t tr { margin-bottom: 14px; }
  .ev-flow-t tbody td { padding: calc(40px + 18px) 18px 18px; }
  .ev-flow-t tbody td::before { inset: 40px 0 0 0; }
  .ev-flow-t tbody th { padding: 18px; }
  .ev-flow-arr { left: 26px; top: 6px; width: 1.5px; height: 28px; transform-origin: top; }
  .ev-flow-arr::after { right: auto; left: -3.5px; top: auto; bottom: 0; transform: rotate(135deg); }
  /* one collection: a pill above the list */
  .ev-use { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .ev-use-core { aspect-ratio: auto; border-radius: 999px; padding: 14px 22px; justify-self: start; }
  .ev-use-core::after { left: 32px; top: 100%; width: 1px; height: 26px; }
  .ev-use-l { padding-left: 56px; }
  .ev-use-l::before { display: none; }
  .ev-use-l li::before { top: 29px; left: -24px; width: 24px; }
  .ev-use-l li::after { content: ''; position: absolute; left: -24px; top: -11px; bottom: -1px; width: 1px; background: var(--teal); box-shadow: 0 0 8px rgba(25, 230, 207, .5); transform-origin: top; }
  .ev-use-l li:first-child::after { top: -1px; }
  .ev-use-l li:last-child::after { bottom: auto; height: 41px; }
  .ev-use-l li { border-left-color: color-mix(in srgb, var(--teal) 40%, transparent); }
  /* comparison: one card per package, coverage and delivery beside its deliverables */
  .ev-cmp { display: grid; grid-template-columns: minmax(0, 1fr); }
  .ev-cmp td, .ev-cmp tbody th { width: auto; }
  .ev-cmp thead, .ev-cmp tbody, .ev-cmp tr { display: contents; }
  .ev-cmp thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .ev-cmp thead th:first-child, .ev-cmp tbody th { display: none; }
  .ev-cmp thead th[style] { display: block; margin-top: 14px; padding: 18px 20px 10px; background: rgba(21, 25, 31, .82); border: 1px solid var(--line); border-top: 2px solid var(--c); border-bottom: 0;
    color: var(--text); font: 400 1.5rem/1.15 var(--serif); letter-spacing: -.01em; text-transform: none; }
  .ev-cmp thead th:nth-child(2) { order: 100; margin-top: 0; } .ev-cmp thead th:nth-child(3) { order: 200; } .ev-cmp thead th:nth-child(4) { order: 300; }
  .ev-cmp td:nth-child(2) { order: calc(100 + var(--r)); } .ev-cmp td:nth-child(3) { order: calc(200 + var(--r)); } .ev-cmp td:nth-child(4) { order: calc(300 + var(--r)); }
  .tbl.ev-cmp td { grid-template-columns: minmax(0, 8.2rem) minmax(0, 1fr); padding: 10px 20px; background: rgba(21, 25, 31, .82); border: 1px solid var(--line); border-top: 1px solid var(--line); border-bottom: 0; }
  .tbl.ev-cmp tbody tr:last-child td { border-bottom: 1px solid var(--line); padding-bottom: 16px; }
  .tbl.ev-cmp tbody tr:first-child td { font: 400 1.5rem/1.1 var(--serif); }
  .ev-cmp td:not(:first-child) { border-top-color: var(--line); }
  .ev-cmp td { border-left: 1px solid var(--line) !important; border-right: 1px solid var(--line) !important; }
  /* multi-day: strips stack, then merge downward */
  .ev-md-stage { grid-template-columns: minmax(0, 1fr); }
  .ev-md-flow { display: none; }
  .ev-md-days { grid-template-rows: repeat(3, 56px); row-gap: 12px; }
  .ev-md-film { height: 56px; }
  .ev-md-merge { position: relative; display: block; width: 100%; height: 44px; }
  .ev-md-merge::before { content: ''; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 1.5px; background: var(--accent); box-shadow: 0 0 8px var(--accent); transform-origin: top; }
  .ev-md-merge::after { content: ''; position: absolute; left: calc(50% - 4px); bottom: 6px; width: 8px; height: 8px; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(45deg); }
  .ev-md-tot ul { grid-template-columns: minmax(0, 1fr); }
  .ev-md-tot li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 14px; }
  .ev-md-tot li span { margin: 0; }
  .ev-md-tot li b { font-size: 1.9rem; }
  /* delivery lanes: names above, the week stays to scale */
  .ev-dl-board { --nw: 0px; --gap: 0px; }
  .ev-dl-lane { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ev-dl-ax { height: 40px; }
  .ev-dl-ax .ev-dl-start { top: 0; bottom: auto; }
  .ev-dl-play { top: 40px; }
  .ev-dl-m b { letter-spacing: .04em; }
  .ev-grid { grid-template-columns: minmax(0, 1fr); }
  .ev-visit-dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  /* the shared phone-table pattern hides each <thead> with position: absolute; keep those header cells inside their table (they widened the page) */
  .ev .tbl-wrap, .ev-flow { position: relative; overflow: hidden; }
}
@media (max-width: 560px) {
  .ev-plan-head { flex-direction: column; gap: 4px; } .ev-plan-head span + span { text-align: left; }
  .ev-ros-ph span:nth-child(2) { display: none; }
  .ev-ros { --lw: 6.4em; }
  .ev-x-tab { min-height: 52px; padding: 10px 12px; gap: 10px; font-size: .84rem; }
  .ev-x-tab .ev-ico { width: 20px; height: 20px; }
  .ev-steps { grid-template-columns: minmax(0, 1fr); }
  .ev-tk { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ev-card .btn { padding: 18px 16px; gap: 10px; letter-spacing: .08em; }
  .ev-card .btn span { line-height: 1.35; }   /* one line from 375px; on narrower screens a wrapped label keeps its leading */
  .ev-card-dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ev-slate { padding: 14px; column-gap: 12px; }
  .ev-slate-row { grid-template-columns: 5.6em minmax(0, 1fr); }
  .ev-slate-row b { font-size: 1rem; }
  .ev-mo { padding: 14px; }
  .ev-mo-d { min-height: 34px; padding: 4px; }
  .ev-mo-d.is-evt::after { content: '+'; right: 4px; bottom: 4px; }
  .ev-submit .mag { display: block; width: 100%; }
  .ev-submit .btn { width: 100%; justify-content: space-between; }
  .ev-md-btns .mag, .ev-visit-btns .mag { display: block; width: 100%; }
  .ev-md-btns .btn, .ev-visit-btns .btn { width: 100%; justify-content: space-between; }
  .ev-sent:target, .ev-plan-f.is-sent .ev-sent { grid-template-columns: minmax(0, 1fr); }
  .ev-md-sel { width: 100%; }
  .ev-md-sel .ev-lab { flex-basis: 100%; }
  .ev-md-sel button { flex: 1 1 0; padding: 0 10px; }
  .ev-cards-head .tlink { line-height: 1.6; }
}

/* ---------------------------------------------------------------- 13. one-shot motion (pre-states only here) */
@media (prefers-reduced-motion: no-preference) {
  /* shared reveals: dim and lower until in view (never invisible) */
  html.ready .ev .r:not(.in) { opacity: .35; transform: translateY(16px); filter: none; }
  html.ready .ev .split:not(.in) .w { opacity: .35; transform: translateY(.22em); filter: blur(3px); }

  /* clock: the act label settles when the act changes */
  .ev-clock-a.is-new, .ev-clock-acts li.is-now.is-new { animation: evActIn .7s var(--ease) both; }

  /* hero plan: the venue settles, the story path draws, the nodes land in order, the windows open */
  html.ready .ev-plan:not(.in) .p-story { stroke-dashoffset: 1; }
  html.ready .ev-plan:not(.in) .p-cam, html.ready .ev-plan:not(.in) .p-crowd circle, html.ready .ev-plan:not(.in) .p-booths g { opacity: .15; }
  html.ready .ev-plan:not(.in) .ev-pn { transform: translate(-50%, -50%) scale(.3); opacity: .2; }
  html.ready .ev-plan:not(.in) .ev-plan-key li { opacity: .35; }
  html.ready .ev-plan:not(.in) .ev-ros-t i { transform: scaleX(0); }
  .ev-plan .p-story { transition: stroke-dashoffset 2.6s cubic-bezier(.45, .05, .25, 1) .5s; }
  .ev-plan .p-booths g { transition: opacity .6s var(--ease) calc(var(--i) * 70ms + .15s); }
  .ev-plan .p-crowd circle { transition: opacity .5s var(--ease) calc(var(--i) * 22ms + .25s); }
  .ev-plan .p-cam { transition: opacity .7s var(--ease) calc(var(--k) * .25s + .6s); }
  .ev-plan .ev-pn { transition: transform .55s cubic-bezier(.3, 1.5, .5, 1) calc(var(--k) * .62s + .7s), opacity .3s var(--ease) calc(var(--k) * .62s + .7s); }
  .ev-plan .ev-plan-key li { transition: opacity .5s var(--ease) calc(var(--k) * .62s + .8s); }
  .ev-ros-t i { transform-origin: left; transition: transform 1.1s var(--ease) calc(var(--k) * .22s + 2.9s); }

  /* research: the three viewers look up in turn */
  html.ready .ev-lens:not(.in) li { opacity: .35; transform: translateX(-10px); }
  html.ready .ev-lens:not(.in) .ev-lens-eye i { transform: translateX(-11px) scale(.6); }
  .ev-lens li { transition: opacity .6s var(--ease) calc(var(--k) * .22s + .1s), transform .6s var(--ease) calc(var(--k) * .22s + .1s); }
  .ev-lens-eye i { transition: transform .8s cubic-bezier(.3, 1.4, .5, 1) calc(var(--k) * .22s + .45s); }

  /* research → content: each question sends its arrow to a decision */
  html.ready .ev-flow:not(.in) tbody th { opacity: .35; }
  html.ready .ev-flow:not(.in) .ev-flow-arr { transform: scaleX(0); }
  html.ready .ev-flow:not(.in) tbody td { opacity: .35; }
  .ev-flow tbody th { transition: opacity .5s var(--ease) calc(var(--k) * .42s + .1s); }
  .ev-flow .ev-flow-arr { transition: transform .45s var(--ease) calc(var(--k) * .42s + .4s); }
  .ev-flow tbody td { transition: opacity .5s var(--ease) calc(var(--k) * .42s + .7s); }
  @media (max-width: 760px) { html.ready .ev-flow:not(.in) .ev-flow-arr { transform: scaleY(0); } }

  /* one collection, four uses: the spine grows, the branches reach out */
  html.ready .ev-use:not(.in) .ev-use-core::after { transform: scaleX(0); }
  html.ready .ev-use:not(.in) .ev-use-l::before { transform: scaleY(0); }
  html.ready .ev-use:not(.in) .ev-use-l li::before { transform: scaleX(0); }
  html.ready .ev-use:not(.in) .ev-use-l li { opacity: .35; transform: translateX(12px); }
  .ev-use .ev-use-core::after { transition: transform .4s var(--ease) .2s; }
  .ev-use .ev-use-l::before { transition: transform .6s var(--ease) .5s; }
  .ev-use .ev-use-l li::before { transition: transform .35s var(--ease) calc(var(--k) * .16s + .9s); }
  .ev-use .ev-use-l li { transition: opacity .5s var(--ease) calc(var(--k) * .16s + 1s), transform .5s var(--ease) calc(var(--k) * .16s + 1s); }
  @media (max-width: 760px) {
    html.ready .ev-use:not(.in) .ev-use-core::after { transform: scaleY(0); } .ev-use .ev-use-core::after { transform-origin: top; }
    html.ready .ev-use:not(.in) .ev-use-l li::after { transform: scaleY(0); }
    .ev-use .ev-use-l li::after { transition: transform .3s linear calc(var(--k) * .16s + .55s); }
  }

  /* coverage day: a playhead runs the day; each window records as it passes (12 hours = 2.6s) */
  html.ready .ev-day:not(.in) .ev-day-trk i { clip-path: inset(0 100% 0 0); }
  html.ready .ev-day:not(.in) .ev-day-head-play i { left: 0; opacity: .9; }
  .ev-day .ev-day-trk i { transition: clip-path calc((var(--e) - var(--s)) * .2167s) linear calc(var(--s) * .2167s + .5s); }
  .ev-day .ev-day-head-play i { transition: left 2.6s linear .5s, opacity .5s var(--ease) 3.1s; }

  /* cards: each card prints its counts like a contact sheet as it arrives, the runtime fills to scale, the price counts up (event.js).
     Side by side (1101px and up) the three arrive together and stagger by --k; stacked, each starts when it reaches the reader. */
  .ev-cards .ev-card { --kd: 0; }
  @media (min-width: 1101px) { .ev-cards .ev-card { --kd: var(--k); } }
  html.ready .ev-card:not(.in) { opacity: .35; transform: translateY(28px); }
  html.ready .ev-card:not(.in) .ev-run i, html.ready .ev-card:not(.in) .ev-run::after { transform: scaleX(0); }
  html.ready .ev-card:not(.in) .ev-ph i, html.ready .ev-card:not(.in) .ev-clips i, html.ready .ev-card:not(.in) .ev-car i, html.ready .ev-card:not(.in) .ev-clips b { opacity: .1; transform: scale(.5); }
  html.ready .ev-card:not(.in) .ev-voice i { transform: scaleY(.2); }
  html.ready .ev-card:not(.in) .ev-fmt i { opacity: .15; }
  html.ready .ev-card:not(.in)::before { transform: scaleX(0); }
  .ev-cards .ev-card { transition: opacity .9s var(--ease) calc(var(--kd) * .14s), transform 1s var(--ease) calc(var(--kd) * .14s), border-color .5s, box-shadow .7s var(--ease); }
  .ev-cards .ev-card::before { transition: transform .9s var(--ease) calc(var(--kd) * .14s + .3s); }
  .ev-cards .ev-run i { transition: transform 1.2s var(--ease) calc(var(--kd) * .14s + .6s); }
  .ev-cards .ev-run::after { transform-origin: left; transition: transform .6s var(--ease) calc(var(--kd) * .14s + 1.6s); }
  .ev-cards .ev-fmt i { transition: opacity .5s var(--ease) calc(var(--kd) * .14s + .7s); }
  .ev-cards .ev-clips i, .ev-cards .ev-car i { transition: opacity .3s var(--ease) calc(var(--kd) * .14s + var(--i) * 45ms + .9s), transform .3s var(--ease) calc(var(--kd) * .14s + var(--i) * 45ms + .9s); }
  .ev-cards .ev-clips b { transition: opacity .4s var(--ease) calc(var(--kd) * .14s + 1.6s), transform .4s cubic-bezier(.3, 1.5, .5, 1) calc(var(--kd) * .14s + 1.6s); }
  .ev-cards .ev-voice i { transition: transform .5s var(--ease) calc(var(--i) * 40ms + .9s); }
  .ev-cards .ev-ph i { transition: opacity .25s var(--ease) calc(var(--kd) * .14s + var(--i) * 16ms + 1.1s), transform .25s var(--ease) calc(var(--kd) * .14s + var(--i) * 16ms + 1.1s); }
  .ev-card:hover, .ev-card:focus-within { transform: translateY(-4px); }

  /* explorer: switching event types brings the three depths in, left to right */
  .ev-x.is-tabs .ev-x-panel:not([hidden]) .ev-x-col { animation: evColIn .6s var(--ease) both; animation-delay: calc(var(--k) * 90ms); }

  /* the slate claps once */
  html.ready .ev-slate:not(.in) .ev-slate-sticks i:first-child { transform: rotate(-16deg); }
  html.ready .ev-slate:not(.in) .ev-slate-frame { opacity: .3; }
  .ev-slate .ev-slate-sticks i:first-child { transition: transform .35s cubic-bezier(.6, 0, .9, .4) .9s; }
  .ev-slate .ev-slate-frame { transition: opacity .8s var(--ease) 1.3s; }

  /* multi-day: the days roll in, flow together, and land in one collection */
  html.ready .ev-md:not(.in) .ev-md-film i { opacity: .1; }
  html.ready .ev-md:not(.in) .f-p { stroke-dashoffset: 1; }
  html.ready .ev-md:not(.in) .ev-md-merge::before { transform: scaleY(0); }
  html.ready .ev-md:not(.in) .ev-md-out { opacity: .35; transform: scale(.97); }
  .ev-md .ev-md-film i { transition: opacity .3s var(--ease) calc(var(--k, 0) * .25s + var(--i) * 60ms + .2s); }
  .ev-md .ev-md-day:nth-child(2) .ev-md-film i { --k: 1; } .ev-md .ev-md-day:nth-child(3) .ev-md-film i { --k: 2; }
  .ev-md .f-p { transition: stroke-dashoffset 1s var(--ease) 1.2s, opacity .5s var(--ease); }
  .ev-md .ev-md-merge::before { transition: transform .8s var(--ease) 1.2s; }
  .ev-md .ev-md-out { transition: opacity .7s var(--ease) 1.9s, transform .9s var(--ease) 1.9s; }
  .ev-md-tot b.is-bump { animation: evBump .5s var(--ease); }

  /* client visit: the event day lights, its footage flows into the slots you already have */
  html.ready .ev-mo:not(.in) .ev-mo-d.is-evt { transform: scale(.8); box-shadow: none; background: rgba(21, 25, 31, .5); }
  html.ready .ev-mo:not(.in) .ev-mo-line { transform: scaleY(0); }
  html.ready .ev-mo:not(.in) .ev-mo-slots i.is-evt { border-color: var(--line2); background: linear-gradient(165deg, var(--elev), var(--surface)); box-shadow: none; }
  .ev-mo .ev-mo-d.is-evt { transition: transform .5s cubic-bezier(.3, 1.5, .5, 1) .5s, box-shadow .6s var(--ease) .5s, background .6s var(--ease) .5s; }
  .ev-mo .ev-mo-line { transition: transform .6s var(--ease) 1.1s; }
  .ev-mo .ev-mo-slots i { transition: border-color .5s var(--ease) calc(var(--i) * 60ms + 1.6s), background .5s var(--ease) calc(var(--i) * 60ms + 1.6s), box-shadow .5s var(--ease) calc(var(--i) * 60ms + 1.6s); }

  /* stills: the hero's venue settles in; the research frames, the film strips rise in turn (images only; captions never dim) */
  html.ready .ev-hero-still:not(.in) .ev-hero-still-f img { opacity: .12; transform: scale(1.04); }
  .ev-hero-still .ev-hero-still-f img { transition: opacity 1.8s var(--ease) .2s, transform 2.6s var(--ease) .2s; }
  html.ready .ev-trio:not(.in) .ev-trio-l li { opacity: .35; transform: translateY(16px); }
  .ev-trio .ev-trio-l li { transition: opacity .6s var(--ease) calc(var(--k) * .16s + .1s), transform .7s var(--ease) calc(var(--k) * .16s + .1s); }
  html.ready .ev-frames:not(.in) li, html.ready .ev-day-reel:not(.in) li { opacity: .35; transform: translateY(10px); }
  .ev-frames li, .ev-day-reel li { transition: opacity .5s var(--ease) calc(var(--k) * .11s + .15s), transform .6s var(--ease) calc(var(--k) * .11s + .15s); }

  /* steps */
  html.ready .ev-steps:not(.in)::before { transform: scaleX(0); }
  html.ready .ev-steps:not(.in) li { opacity: .35; transform: translateY(10px); }
  .ev-steps::before { transition: transform 1.4s var(--ease) .2s; }
  .ev-steps li { transition: opacity .6s var(--ease) calc(var(--k) * .3s + .3s), transform .6s var(--ease) calc(var(--k) * .3s + .3s); }

  /* delivery: the rings fill to their share of the week; a playhead runs the week and each delivery lands as it passes (7 days = 2.8s) */
  html.ready .ev-dl:not(.in) .c-fg { stroke-dasharray: 0 1; }
  html.ready .ev-dl:not(.in) .ev-dl-m::before { transform: scale(.3); opacity: .25; }
  html.ready .ev-dl:not(.in) .ev-dl-m b { opacity: .35; }
  html.ready .ev-dl:not(.in) .ev-dl-trk::after { transform: scaleX(0); }
  html.ready .ev-dl:not(.in) .ev-dl-play i { left: 0; opacity: .9; }
  .ev-dl .c-fg { transition: stroke-dasharray 1.4s var(--ease) calc(var(--k) * .25s + .2s); }
  .ev-dl .ev-dl-m::before { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1) calc(var(--at) * .4s + .6s), opacity .3s var(--ease) calc(var(--at) * .4s + .6s); }
  .ev-dl .ev-dl-m b { transition: opacity .4s var(--ease) calc(var(--at) * .4s + .7s); }
  .ev-dl .ev-dl-trk::after { transition: transform calc(var(--end) * .4s) linear .6s; }
  .ev-dl .ev-dl-play i { transition: left 2.8s linear .6s, opacity .5s var(--ease) 3.5s; }
}
@keyframes evActIn { from { opacity: .35; transform: translateY(6px); } }
@keyframes evColIn { from { opacity: .35; transform: translateY(12px); } }
@keyframes evBump { 40% { color: var(--accent-t); transform: translateY(-3px); } }

/* ---------------------------------------------------------------- 14. reduced motion + print */
@media (prefers-reduced-motion: reduce) {
  .ev-card:hover, .ev-card:focus-within { transform: none; }
  .ev-play-i { transition: none; }
  .ev-play:hover .ev-play-i, .ev-play:focus-visible .ev-play-i { transform: none; }
}
@media print {
  .ev-clock, .ev-x-tabs, .ev-md-sel { display: none !important; }
  .ev-x-panel[hidden] { display: block !important; }
}