:root {
  --video-ink: #071426;
  --video-text: #24415d;
  --video-muted: #5a6f82;
  --video-blue: #176fc1;
  --video-violet: #583e94;
  --video-orange: #e85b24;
  --video-line: #dce5ed;
  --video-soft: #f4f7fa;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--video-text); background: #fff; font-family: Inter, "Segoe UI", Arial, sans-serif; line-height: 1.6; }
a { color: inherit; }
.km-site-header,
.km-site-header * { box-sizing: border-box; }
.km-site-header { position: sticky; top: 0; z-index: 1100; padding: 0; color: #17324d; border-bottom: 1px solid #e7d38b; background: #fff; box-shadow: 0 2px 10px rgba(23,50,77,.06); }
.km-site-header__inner { display: flex; width: min(100% - 2rem, 1360px); min-height: 72px; margin: 0 auto; gap: 2rem; align-items: center; justify-content: space-between; }
.km-site-header__brand { display: block; flex: 0 0 auto; line-height: 0; }
.km-site-header__brand img { display: block; width: auto; height: 40px; max-width: min(190px, 58vw); object-fit: contain; object-position: left center; }
.km-site-header__menu-button { display: none; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; }
.km-site-header__menu-button span { display: block; width: 24px; height: 3px; border-radius: 2px; background: #583e94; transition: transform .2s ease, opacity .2s ease; }
.km-site-header__menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.km-site-header__menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.km-site-header__menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.km-site-nav { display: flex; gap: 1.25rem; align-items: center; }
.km-site-nav a { color: #17324d; font-weight: 500; line-height: 1.3; text-decoration: none; white-space: nowrap; }
.km-site-nav a:hover, .km-site-nav a:focus-visible { color: #315f88; }
.km-site-nav__group { position: relative; display: grid; grid-template-columns: auto 18px; align-items: center; }
.km-site-nav__toggle { width: 18px; padding: 0; border: 0; color: #315f88; background: transparent; cursor: pointer; font-size: .65rem; }
.km-site-nav__submenu { position: absolute; top: calc(100% + .75rem); left: 0; min-width: 240px; padding: .4rem; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; box-shadow: 0 14px 32px rgba(7,37,70,.16); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s ease, transform .15s ease, visibility .15s; }
.km-site-nav__group:hover .km-site-nav__submenu, .km-site-nav__group:focus-within .km-site-nav__submenu { opacity: 1; visibility: visible; transform: none; }
.km-site-nav__submenu a { display: block; padding: .65rem .75rem; border-radius: 5px; font-size: .92rem; }
.km-site-nav__submenu a:hover, .km-site-nav__submenu a:focus-visible { background: #f7f7ff; }
.km-site-nav__cta { padding: .65rem 1rem; border: 1px solid #e2b943; border-radius: 7px; color: #583e94 !important; background: #f6c94c; box-shadow: none; font-size: .95rem; font-weight: 500 !important; }
.km-site-nav__cta:hover, .km-site-nav__cta:focus-visible { border-color: #583e94; color: #fff !important; background: #583e94; }
.km-site-nav-backdrop { display: none; }
body.km-menu-open { overflow: hidden; }
.video-page { color: var(--video-text); background: #fff; }
.video-page h1, .video-page h2 { font-family: Georgia, "Times New Roman", serif; letter-spacing: 0; }
.video-container { width: min(100% - 2rem, 1200px); margin-inline: auto; }
.video-breadcrumb { display: flex; gap: .55rem; padding-block: 1rem; color: var(--video-muted); font-size: .9rem; }
.video-breadcrumb a { color: var(--video-violet); }
.video-hero { padding: clamp(3.75rem, 8vw, 7rem) 0 clamp(3rem, 5vw, 4.5rem); color: #fff; background-color: var(--video-ink); background-image: linear-gradient(120deg, rgba(23,111,193,.38), transparent 55%), radial-gradient(circle at 85% 20%, rgba(232,91,36,.22), transparent 26%); }
.video-hero .video-container { max-width: 960px; margin-left: max(1rem, calc((100vw - 1200px) / 2)); }
.video-eyebrow { margin: 0 0 .8rem; color: var(--video-orange); font-size: .8rem; font-weight: 700; text-transform: uppercase; }
.video-hero h1 { max-width: 900px; margin: 0; font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: 1.02; }
.video-hero > .video-container > p:not(.video-eyebrow) { max-width: 780px; margin: 1.25rem 0 0; color: #dce9f3; font-size: clamp(1.05rem, 1.6vw, 1.24rem); line-height: 1.7; }
.video-hero__meta { display: flex; flex-wrap: wrap; gap: .7rem 1.25rem; align-items: center; margin-top: 1.6rem; color: #c3d5e4; font-size: .92rem; }
.video-hero__meta strong { color: #fff; }
.video-hero__meta a { color: #fff; text-underline-offset: 3px; }
.video-tools { position: sticky; z-index: 5; top: 72px; padding: 1rem 0 .8rem; border-bottom: 1px solid var(--video-line); background: rgba(255,255,255,.97); backdrop-filter: blur(10px); }
.video-search { display: grid; grid-template-columns: auto minmax(230px, 380px); gap: .8rem; align-items: center; font-size: .86rem; font-weight: 700; color: var(--video-ink); }
.video-search input { min-height: 42px; padding: .65rem .8rem; border: 1px solid #bdcbd8; border-radius: 6px; font: inherit; }
.video-search input:focus { outline: 3px solid rgba(23,111,193,.2); border-color: var(--video-blue); }
.video-filters { display: flex; gap: .45rem; margin-top: .8rem; overflow-x: auto; padding-bottom: .2rem; }
.video-filters button, .video-empty button { min-height: 36px; padding: .45rem .75rem; border: 1px solid #bdcbd8; border-radius: 5px; color: var(--video-text); background: #fff; font: inherit; font-size: .82rem; cursor: pointer; white-space: nowrap; }
.video-filters button.is-active { color: #fff; border-color: var(--video-violet); background: var(--video-violet); }
.video-results { margin: .65rem 0 0; color: var(--video-muted); font-size: .82rem; }
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; padding-block: 3rem 5rem; }
.video-card { display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--video-line); border-radius: 7px; overflow: hidden; background: #fff; box-shadow: 0 8px 22px rgba(7,20,38,.07); content-visibility: auto; contain-intrinsic-size: 0 560px; }
.video-card[hidden] { display: none; }
.video-card__media { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; background: #101b27; }
.video-card__media img { width: 100%; height: 100%; object-fit: cover; }
.video-card__play { position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; background: rgba(7,20,38,.82); transform: translate(-50%,-50%); }
.video-card__duration { position: absolute; right: .55rem; bottom: .55rem; padding: .2rem .42rem; border-radius: 3px; color: #fff; background: rgba(7,20,38,.9); font-size: .75rem; font-weight: 700; }
.video-card__body { display: flex; min-height: 280px; padding: 1.1rem; flex: 1; flex-direction: column; }
.video-card__tags { display: flex; gap: .35rem; flex-wrap: wrap; }
.video-card__tags span { color: var(--video-violet); font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.video-card h2 { margin: .65rem 0; color: var(--video-ink); font-size: 1.18rem; line-height: 1.28; }
.video-card p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--video-muted); font-size: .9rem; line-height: 1.62; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.video-card__action { margin-top: auto; padding-top: 1rem; color: var(--video-blue); font-weight: 700; text-decoration: none; }
.video-card__action:hover { text-decoration: underline; }
.video-empty { width: min(100% - 2rem, 600px); margin: 4rem auto; text-align: center; }
.video-next { padding: 3.5rem 0; color: #fff; background: var(--video-violet); }
.video-next .video-container { display: flex; gap: 2rem; justify-content: space-between; align-items: center; }
.video-next h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.video-next p:not(.video-eyebrow) { max-width: 700px; color: #ebe7f3; }
.video-next a { flex: 0 0 auto; padding: .85rem 1rem; border-radius: 6px; color: var(--video-ink); background: #fff; font-weight: 700; text-decoration: none; }
.video-library { padding-block: 4rem 5rem; }
.video-section-heading { max-width: 760px; }
.video-section-heading h2 { margin: 0; color: var(--video-ink); font-size: clamp(2rem, 4vw, 3.2rem); }
.video-section-heading > p:last-child { color: var(--video-muted); line-height: 1.7; }
.video-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.video-category { display: flex; min-width: 0; overflow: hidden; flex-direction: column; border: 1px solid var(--video-line); border-radius: 7px; color: var(--video-text); background: #fff; box-shadow: 0 8px 24px rgba(7,20,38,.06); text-decoration: none; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.video-category:hover, .video-category:focus-visible { color: var(--video-text); border-color: #b6c8d8; transform: translateY(-5px); box-shadow: 0 18px 38px rgba(7,20,38,.14); }
.video-category:focus-visible { outline: 3px solid rgba(23,111,193,.28); outline-offset: 3px; }
.video-category__media { aspect-ratio: 16/9; overflow: hidden; background: var(--video-ink); }
.video-category img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.video-category:hover img, .video-category:focus-visible img { transform: scale(1.035); }
.video-category__body { display: flex; min-height: 260px; padding: 1.4rem; flex: 1; flex-direction: column; }
.video-category span { color: var(--video-orange); font-size: .74rem; font-weight: 700; text-transform: uppercase; }
.video-category h2 { margin: .45rem 0 .55rem; color: var(--video-ink); font-size: 1.5rem; line-height: 1.25; }
.video-category p { margin: 0 0 1.25rem; color: var(--video-muted); font-size: .9rem; line-height: 1.62; }
.video-category strong { display: flex; margin-top: auto; gap: .4rem; align-items: center; color: var(--video-blue); font-size: .86rem; }
.video-category strong span { color: inherit; font-size: 1rem; transition: transform .2s ease; }
.video-category:hover strong span, .video-category:focus-visible strong span { transform: translateX(4px); }

footer { padding: 2rem 0; color: #d9e4ee; background: #071426; }
.footer-container { display: flex; width: min(100% - 2rem, 1200px); margin-inline: auto; gap: 1rem; align-items: center; justify-content: space-between; }
.footer-container p { margin: 0; }
.footer-links { display: flex; gap: 1rem; }
.footer-links a { color: #fff; }

@media (max-width: 1100px) {
  .km-site-header__inner { min-height: 66px; }
  .km-site-header__menu-button { display: flex; }
  .km-site-nav { display: none; position: fixed; top: 66px; right: 0; bottom: 0; z-index: 1101; width: min(92vw, 420px); height: calc(100dvh - 66px); padding: .75rem; flex-direction: column; align-items: stretch; gap: .25rem; overflow-y: auto; background: #fff; box-shadow: -16px 0 40px rgba(7,37,70,.18); }
  .km-site-nav.is-open { display: flex; }
  .km-site-nav > a { flex: 0 0 auto; padding: .85rem 1rem; border-radius: 6px; }
  .km-site-nav__group { display: grid; flex: 0 0 auto; grid-template-columns: minmax(0,1fr) 44px; border-radius: 6px; overflow: hidden; }
  .km-site-nav__group > a { grid-column: 1; grid-row: 1; padding: .85rem 1rem; }
  .km-site-nav__toggle { grid-column: 2; grid-row: 1; width: 44px; min-height: 44px; border-left: 1px solid #e2e8f0; font-size: .75rem; }
  .km-site-nav__toggle[aria-expanded="true"] { color: #583e94; transform: rotate(180deg); }
  .km-site-nav__submenu { position: static; grid-column: 1/-1; grid-row: 2; min-width: 0; max-height: 0; padding: 0; border: 0; border-radius: 0 0 6px 6px; overflow: hidden; background: #f7f7ff; box-shadow: none; opacity: 0; visibility: hidden; transform: none; }
  .km-site-nav__group.is-open .km-site-nav__submenu { max-height: 360px; padding: .25rem; overflow-y: auto; opacity: 1; visibility: visible; }
  .km-site-nav__submenu a { padding: .7rem 1rem; }
  .km-site-nav__cta { width: 100%; margin-top: .5rem; }
  .km-site-nav-backdrop { position: fixed; inset: 66px 0 0; z-index: 1099; background: rgba(7,37,70,.4); backdrop-filter: blur(2px); }
  .km-site-nav-backdrop.is-open { display: block; }
}

@media (max-width: 980px) {
  .video-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .video-category-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px) {
  .video-container { width: min(100% - 1.25rem, 1200px); }
  .video-hero { padding-block: 3.5rem 3rem; }
  .video-hero .video-container { margin-inline: auto; }
  .video-tools { position: static; }
  .video-search { grid-template-columns: 1fr; gap: .35rem; }
  .video-grid { grid-template-columns: 1fr; gap: 1rem; padding-block: 2rem 3rem; }
  .video-card__body { min-height: 255px; }
  .video-next .video-container { align-items: flex-start; flex-direction: column; }
  .video-category-grid { grid-template-columns: 1fr; }
  .video-category__body { min-height: 0; }
  .footer-container { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .video-category, .video-category img, .video-category strong span { transition: none; }
}