/*
 * Video library (/videos/ and /videos/{slug}/) - loaded alongside style.css on
 * those pages only.
 *
 * Hand-written in the same spirit as track.css and trust.css: semantic markup,
 * BEM-ish .tzv__* classes, tokens scoped to the .tzv root. The token values are
 * the site palette (see trust.css for where they come from), so these pages read
 * as standard Traizr pages without pulling in Elementor's hash-ID CSS. The
 * layouts, though, are designed for video rather than lifted from another page.
 *
 * NOTE 1: --tzv-primary is #1C6BA6, not #2582C5. style.css declares
 * .elementor-kit-7 twice and the later block overrides primary. Inline SVG icons
 * hard-code stroke #2582C5, so icon blue and button blue genuinely differ on this
 * site; --tzv-icon keeps that intentional.
 *
 * NOTE 2: the font-family declaration below is currently inert - the tail of
 * style.css forces a system stack with `body,body *{...!important}`. It is kept
 * so these pages follow the rest of the site if that temporary block is reverted.
 *
 * NOTE 3: several blocks below exist purely to undo style.css globals, which
 * style bare <button>/<a>/<ul> with a magenta #c36 theme left over from the
 * starter theme. They are marked "reset".
 */

.tzv{
  --tzv-primary:#1C6BA6;
  --tzv-primary-dark:#155884;
  --tzv-secondary:#70B2E2;
  --tzv-btn-ink:#0D2B45;   /* dark label on the light-blue secondary button, as on the home page */
  --tzv-icon:#2582C5;
  --tzv-navy:#185B8D;
  --tzv-ink:#0F2C43;
  --tzv-text:#40596B;
  --tzv-muted:#616F7D;
  --tzv-border:#DCE9F6;
  --tzv-border-strong:#AED4F0;
  --tzv-wash:#F0F5FF;
  --tzv-radius:50px;
  --tzv-radius-sm:18px;
  --tzv-shadow:0 0 10px 0 rgba(0,0,0,.1);
  --tzv-shadow-soft:0 0 10px 0 rgba(0,0,0,.05);
  font-family:"Inter Tight","Inter",system-ui,sans-serif;
  color:var(--tzv-text);
}
.tzv *,.tzv *::before,.tzv *::after{box-sizing:border-box}
@media(max-width:767px){.tzv{--tzv-radius-sm:14px}}

.tzv__wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.tzv__wrap--narrow{max-width:900px}

/* ---------- Sections ---------- */
.tzv__section{padding:60px 0;background:#fff}
.tzv__section--wash{background:var(--tzv-wash)}
.tzv__section--tight{padding:34px 0}
@media(max-width:767px){
  .tzv__section{padding:40px 0}
  .tzv__section--tight{padding:26px 0}
}

.tzv__head{text-align:center;max-width:760px;margin:0 auto 34px}
.tzv__head--left{text-align:left;margin-left:0}
.tzv__eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tzv-primary);background:#FBFCFF;
  border:.5px solid var(--tzv-primary);border-radius:var(--tzv-radius);padding:8px 22px;
  margin:0 0 18px;box-shadow:var(--tzv-shadow-soft)}
/* h2/h3 reset: style.css sets its own sizes plus h2{padding-top:20px} */
.tzv h2{font-size:clamp(26px,3.6vw,38px);font-weight:700;line-height:1.2;
  color:var(--tzv-navy);margin:0 0 12px;padding-top:0}
.tzv h3{font-size:19px;font-weight:600;line-height:1.3;color:var(--tzv-navy);margin:0 0 8px}
.tzv__lede{font-size:18px;line-height:1.65;color:var(--tzv-muted);margin:0}
.tzv__prose{font-size:16px;line-height:1.75;color:var(--tzv-text);max-width:760px}
.tzv__prose p{margin:0 0 14px}
.tzv__prose p:last-child{margin-bottom:0}
.tzv .tzv__prose a{color:var(--tzv-primary);text-decoration:underline}
.tzv .tzv__prose a:hover{color:var(--tzv-primary-dark);text-decoration:none}
@media(max-width:767px){.tzv__lede{font-size:16px}}

/* ---------- Breadcrumb ---------- */
/* reset: style.css underlines every <a> and gives <ul>/<ol> theme defaults */
.tzv__crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0;padding:0;font-size:13px;color:var(--tzv-muted)}
.tzv__crumbs li{display:flex;align-items:center;gap:8px}
.tzv__crumbs li+li::before{content:"/";color:#9DB3C4}
.tzv .tzv__crumbs a{color:var(--tzv-muted);text-decoration:none}
.tzv .tzv__crumbs a:hover{color:var(--tzv-primary);text-decoration:underline}
.tzv__crumbs [aria-current]{color:var(--tzv-navy);font-weight:500}

/* ---------- Hero ---------- */
/* Top padding clears the header, which floats over the top of the page. */
.tzv__hero{background:linear-gradient(180deg,var(--tzv-wash) 0%,#fff 100%);
  padding:clamp(132px,12vw,180px) 0 8px}
.tzv__hero--center{text-align:center}
.tzv__hero h1{font-size:clamp(28px,4.6vw,46px);font-weight:700;line-height:1.15;
  color:var(--tzv-navy);margin:0 0 14px}
.tzv__hero .tzv__lede{max-width:720px}
.tzv__hero--center .tzv__lede{margin-left:auto;margin-right:auto}
.tzv__hero-top{padding-bottom:22px}
@media(max-width:767px){.tzv__hero{padding-top:112px}}

/* ---------- Buttons ---------- */
/*
 * reset: style.css styles bare <a>/<button> with a #c36 border and 3px radius.
 *
 * Every colour rule that lands on an <a> is written as `.tzv .tzv__x`, not
 * `.tzv__x`. style.css contains `.elementor-kit-7 a{color:var(--e-global-color-secondary)}`,
 * and the body carries elementor-kit-7 - one class plus one element beats one
 * class, so a single-class rule here silently loses and the label comes out the
 * site's link blue. Two classes wins. Do not "tidy" the .tzv prefix away.
 */
.tzv__btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:inherit;font-size:15px;font-weight:600;line-height:1;text-align:center;
  text-decoration:none;border-radius:var(--tzv-radius);border:1px solid transparent;
  padding:15px 30px;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.tzv .tzv__btn--primary{background:var(--tzv-primary);border-color:var(--tzv-primary);color:#fff}
.tzv .tzv__btn--primary:hover,.tzv .tzv__btn--primary:focus{background:var(--tzv-primary-dark);
  border-color:var(--tzv-primary-dark);color:#fff;text-decoration:none}
.tzv .tzv__btn--secondary{background:var(--tzv-secondary);border-color:var(--tzv-secondary);color:var(--tzv-btn-ink)}
.tzv .tzv__btn--secondary:hover,.tzv .tzv__btn--secondary:focus{background:#5FA4D6;border-color:#5FA4D6;
  color:var(--tzv-btn-ink);text-decoration:none}
.tzv .tzv__btn--ghost{background:transparent;border-color:#fff;color:#fff}
.tzv .tzv__btn--ghost:hover,.tzv .tzv__btn--ghost:focus{background:#fff;color:var(--tzv-navy);text-decoration:none}
.tzv__btn svg{width:14px;height:14px;fill:currentColor;flex:none}
.tzv__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.tzv__actions--center{justify-content:center}

/* ---------- Player ---------- */
/*
 * Facade, not a live embed: a local poster plus a play button, swapped for the
 * youtube-nocookie iframe on click by assets/js/videos.js. aspect-ratio holds the
 * box through the swap so there is no layout shift, and the poster is the LCP
 * element on a watch page (preloaded in <head>).
 */
.tzv__player{position:relative;display:block;width:100%;aspect-ratio:16/9;
  border-radius:var(--tzv-radius-sm);overflow:hidden;background:var(--tzv-ink);
  box-shadow:0 18px 44px rgba(15,44,67,.18)}
.tzv__player>img,.tzv__player>iframe{display:block;width:100%;height:100%;border:0;object-fit:cover}
/* reset: bare <button> inherits a #c36 border, 3px radius and a hover fill */
.tzv__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:82px;height:82px;padding:0;border-radius:50%;cursor:pointer;
  background:var(--tzv-primary);border:3px solid rgba(255,255,255,.9);color:#fff;
  box-shadow:0 8px 26px rgba(15,44,67,.35);
  display:flex;align-items:center;justify-content:center;
  transition:background-color .15s,border-color .15s}
.tzv__play:hover,.tzv__play:focus{background:var(--tzv-primary-dark);border-color:#fff;color:#fff}
.tzv__play:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* optical centring: the triangle's visual mass sits left of its bounding box */
.tzv__play svg{width:26px;height:26px;fill:currentColor;margin-left:4px}
@media(max-width:600px){.tzv__play{width:64px;height:64px}.tzv__play svg{width:21px;height:21px}}
.tzv__duration{position:absolute;right:12px;bottom:12px;
  background:rgba(13,43,69,.85);color:#fff;font-size:12px;font-weight:600;
  letter-spacing:.02em;border-radius:var(--tzv-radius);padding:5px 12px}
/* the pill would sit over the YouTube controls once the iframe is in */
.tzv__player--playing .tzv__duration{display:none}

/* ---------- Video card grid (hub + related) ---------- */
.tzv__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
/* related-videos strip: auto-fit + a max track so a short row (2 cards once a
   video is retired) centres instead of hugging the left with a hole beside it */
.tzv__grid--three{grid-template-columns:repeat(auto-fit,minmax(260px,340px));gap:22px;
  justify-content:center}
@media(max-width:560px){.tzv__grid,.tzv__grid--three{grid-template-columns:1fr}}

/* .tzv-prefixed for the same specificity reason as the buttons above */
.tzv .tzv__card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--tzv-border);
  border-radius:var(--tzv-radius-sm);overflow:hidden;text-decoration:none;color:var(--tzv-text);
  box-shadow:var(--tzv-shadow-soft);transition:border-color .15s,box-shadow .15s}
.tzv .tzv__card:hover,.tzv .tzv__card:focus{border-color:var(--tzv-border-strong);box-shadow:var(--tzv-shadow);
  text-decoration:none;color:var(--tzv-text)}
.tzv__card:focus-visible{outline:3px solid var(--tzv-icon);outline-offset:2px}
.tzv__card-thumb{position:relative;aspect-ratio:16/9;background:var(--tzv-wash)}
.tzv__card-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.tzv__card-thumb .tzv__duration{right:10px;bottom:10px}
/* small static play glyph so a card still reads as a video at thumbnail size */
.tzv__card-glyph{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:50%;background:rgba(28,107,166,.92);
  border:2px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center}
.tzv__card-glyph svg{width:15px;height:15px;fill:#fff;margin-left:3px}
.tzv__card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:7px;flex:1}
.tzv__card-cat{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tzv-icon)}
.tzv__card h3{margin:0;font-size:17px;line-height:1.35}
.tzv__card p{margin:0;font-size:14px;line-height:1.6;color:var(--tzv-muted)}
.tzv__card-more{margin-top:auto;padding-top:10px;font-size:14px;font-weight:600;color:var(--tzv-primary)}

/* ---------- Category filter ---------- */
/* reset: bare <button> again. Buttons, not a <select>, because style.css forces
   every select to width:100% and border-radius:3px. */
.tzv__filter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 30px}
.tzv__chip{font-family:inherit;font-size:14px;font-weight:500;line-height:1;cursor:pointer;
  padding:11px 20px;border-radius:var(--tzv-radius);
  border:1.5px solid var(--tzv-border-strong);background:#fff;color:var(--tzv-text);
  transition:background-color .15s,border-color .15s,color .15s}
.tzv__chip:hover{border-color:var(--tzv-primary);color:var(--tzv-primary);background:#fff}
.tzv__chip[aria-pressed="true"]{background:var(--tzv-primary);border-color:var(--tzv-primary);color:#fff}
.tzv__chip:focus-visible{outline:3px solid var(--tzv-icon);outline-offset:2px}
.tzv__noresults{display:none;text-align:center;color:var(--tzv-muted);font-size:15px;padding:20px 2px}

/* ---------- Icon chip ----------
 * Shared by every boxed block below. The tinted rounded square with an outline
 * glyph is the site's card-icon idiom (see the home page feature cards). Icons
 * come from tzv_icon() in includes/videos-helpers.php and inherit currentColor,
 * so the chip controls the colour and the paths stay unstyled.
 */
.tzv__ico{flex:none;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:14px;background:var(--tzv-wash);
  border:1px solid #E3EEFA;color:var(--tzv-icon)}
.tzv__ico svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tzv__ico--sm{width:36px;height:36px;border-radius:11px}
.tzv__ico--sm svg{width:18px;height:18px}
.tzv__ico--solid{background:var(--tzv-primary);border-color:var(--tzv-primary);color:#fff}
.tzv__ico--onnavy{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}

/* ---------- Benefit cards (illustration + copy) ----------
 * The site already owns a set of blue line illustrations (assets/images/2026/05/
 * less-manual-work, less-disputes, happy-recipients, audit-confidence,
 * save-staff-work-time, multi-site). They are drawn on white, so the art panel
 * tints behind them and `mix-blend-mode:multiply` drops the white out - that is
 * what lets a flat PNG-style illustration sit on a coloured panel without a box
 * edge showing. object-fit:contain keeps the two aspect ratios in the set
 * (1:1 and 16:9) from being cropped differently.
 */
.tzv__cards{list-style:none;margin:0;padding:0;display:grid;gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.tzv__vcard{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--tzv-border);border-radius:var(--tzv-radius-sm);
  overflow:hidden;box-shadow:var(--tzv-shadow-soft)}
/*
 * A definite height, not aspect-ratio. aspect-ratio is not a definite size for
 * percentage resolution, so `height:100%` on the image fell back to `auto`, the
 * 1:1 illustrations rendered at their intrinsic ratio and pushed the panel
 * taller than the 16:9 ones - the row stopped lining up. A fixed height plus
 * max-width/max-height on the image is deterministic for both ratios.
 *
 * flex:none so the panel cannot absorb spare height when a card carries less
 * copy than its neighbours.
 */
/*
 * Column layout, not an absolutely-positioned tag over the artwork: the tag sits
 * in normal flow and the illustration takes the remaining height, so the two can
 * never overlap however long a tag label gets.
 */
.tzv__vcard-art{flex:none;position:relative;height:clamp(200px,15.5vw,236px);overflow:hidden;
  background:linear-gradient(158deg,#F5F9FF 0%,#E4EFFA 100%);
  display:flex;flex-direction:column;padding:14px 18px 18px}
.tzv__vcard-fig{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  width:100%;margin-top:12px}
.tzv__vcard-fig img{width:auto;height:auto;max-width:100%;max-height:100%;
  object-fit:contain;mix-blend-mode:multiply}
.tzv__vcard-tag{align-self:flex-start;flex:none;display:inline-flex;align-items:center;
  gap:6px;background:rgba(255,255,255,.92);border:1px solid #D9E8F7;border-radius:var(--tzv-radius);
  padding:5px 12px 5px 9px;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tzv-primary)}
.tzv__vcard-tag svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.tzv__vcard-body{padding:22px 24px 24px}
.tzv__vcard h3{margin:0 0 7px;font-size:18px;line-height:1.3}
.tzv__vcard p{margin:0;font-size:15px;line-height:1.65;color:var(--tzv-muted)}
@media(max-width:767px){.tzv__vcard-body{padding:18px 20px 20px}}

/* ---------- Link list (related reading) ---------- */
.tzv__links{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.tzv .tzv__links a{display:flex;align-items:center;gap:14px;padding:16px 18px;
  border:1px solid var(--tzv-border);border-radius:var(--tzv-radius-sm);background:#fff;
  font-size:15px;font-weight:600;color:var(--tzv-navy);text-decoration:none;
  box-shadow:var(--tzv-shadow-soft);transition:border-color .15s,color .15s,box-shadow .15s}
.tzv .tzv__links a:hover,.tzv .tzv__links a:focus{border-color:var(--tzv-border-strong);
  color:var(--tzv-primary);text-decoration:none;box-shadow:var(--tzv-shadow)}
.tzv__links-arrow{flex:none;margin-left:auto;width:12px;height:12px;fill:var(--tzv-icon);stroke:none}

/* ---------- Closing CTA band ---------- */
.tzv__cta{position:relative;overflow:hidden;background:var(--tzv-navy);
  color:#DCEEFA;text-align:center;padding:96px 0 84px}
.tzv__cta h2{color:#fff}
.tzv__cta .tzv__lede{color:#C9DCEC}
/* wave carved out of the white section above; fill must match that background */
.tzv__wave{position:absolute;top:0;left:0;width:100%;height:52px;line-height:0;pointer-events:none}
.tzv__wave svg{display:block;width:100%;height:100%}
.tzv__wave path{fill:#fff}
.tzv__cta--from-wash .tzv__wave path{fill:var(--tzv-wash)}
@media(max-width:767px){.tzv__cta{padding:74px 0 62px}.tzv__wave{height:34px}}
