/* ==========================================================================
   Video Editing service page (Figma: IW / "Video Editing", 1920px)
   Builds on style.css tokens + common components.
   ========================================================================== */

/* ---------- Hero ---------- */
.ve-hero { position: relative; width: 100%; min-height: 920px; padding-bottom: 40px; overflow: hidden; background: var(--c-black); }   /* grows when the hero text is longer than the design */
.ve-hero__bg { position: absolute; left: -3.73px; top: auto; bottom: -104.9px; width: 1927.47px; height: 1075.8px; max-width: none; }
.ve-hero::after { content: ""; position: absolute; left: -3.73px; top: auto; bottom: -104.9px; width: 1927.47px; height: 1075.8px; background: linear-gradient(152deg, #0D0E10 0%, rgba(13, 14, 16, 0) 73%); }
.ve-hero__pattern { position: absolute; left: 533px; top: 443px; width: 904px; height: 953px; max-width: none; opacity: .3; }
.ve-hero__floor { position: absolute; z-index: 1; left: -23.2px; top: auto; bottom: -48.1px; width: 1213.34px; height: 214.08px; max-width: none; }
.ve-hero__content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 40px; }
.ve-hero__cols { display: flex; justify-content: space-between; align-items: center; }
.ve-hero__copy { display: flex; flex-direction: column; gap: 40px; align-self: flex-start; padding-top: 14px; }
.ve-hero__group { display: flex; flex-direction: column; gap: 40px; }
.breadcrumb { font-size: 18px; line-height: 26px; color: #D2D3D2; }
.breadcrumb a:hover { color: var(--c-white); }
.breadcrumb span { color: var(--c-white); }
.ve-hero__stack { display: flex; flex-direction: column; gap: 50px; width: 891px; }
.ve-hero__intro { display: flex; flex-direction: column; gap: 24px; }
.ve-hero__intro .h1 { width: 903px; }
.ve-hero__intro p { font-weight: 500; font-size: 18px; line-height: 30px; color: var(--c-border-gray); }
.ve-benefits { display: flex; flex-wrap: wrap; gap: 24px; }
.ve-benefits li { display: inline-flex; align-items: center; gap: 12px; padding: 8px 32px; background: #0A0A12; border: 1px solid var(--c-red); border-radius: 100px; font-weight: 500; font-size: 18px; line-height: 30px; color: var(--c-white); }
.ve-benefits li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 5px; background: var(--c-red); }
.ve-pm { display: flex; align-items: center; gap: 16px; }
.ve-pm__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 24px; background: rgba(255, 255, 255, .08); }
.ve-pm div { display: flex; flex-direction: column; gap: 4px; }
.ve-pm strong { font-weight: 500; font-size: 18px; line-height: 30px; color: var(--c-white); }
.ve-pm span { font-weight: 500; font-size: 15px; color: var(--c-border-gray); }

/* Lead form */
.lead-form { flex: none; width: 760px; padding: 32px; display: flex; flex-direction: column; gap: 24px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 5px; box-shadow: 0 0 24px rgba(187, 187, 187, .2); }
.lead-form__head { display: flex; flex-direction: column; gap: 12px; }
.lead-form__head h2 { font-weight: 500; font-size: 22px; line-height: 28px; color: var(--c-white); }
.lead-form__head p { font-weight: 500; font-size: 15px; line-height: 18px; color: var(--c-border-gray); }
.lead-form__fields { display: flex; flex-direction: column; gap: 24px; }
.lead-form__row { display: flex; gap: 24px; }
.field { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.field span { font-weight: 500; font-size: 15px; line-height: 18px; color: var(--c-border-gray); }
.field input, .field textarea { width: 100%; padding: 13px 14px; background: transparent; color: var(--c-white); border: 1px solid var(--c-border-gray); border-radius: 5px; font: 500 17px/20px var(--font-body); outline: none; resize: none; transition: border-color .2s, box-shadow .2s; }
.field textarea { padding-bottom: 55px; }
.field input::placeholder, .field textarea::placeholder { color: var(--c-divider-gray); }
.field input:focus, .field textarea:focus { border-color: var(--c-red); box-shadow: 0 0 0 3px rgba(196, 32, 48, .25); }
.btn--block { width: 100%; }
.lead-form__privacy { line-height: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 500; font-size: 14px; color: #888; }

/* ---------- Portfolio ---------- */
.ve-portfolio { display: flex; flex-direction: column; gap: 40px; }
.ve-portfolio__head { display: flex; flex-direction: column; gap: 24px; }
.ve-portfolio__top { display: flex; justify-content: space-between; align-items: center; }
.ve-portfolio__title { width: 1551px; display: flex; flex-direction: column; gap: 12px; }
.round-arrows { display: flex; align-items: center; gap: 24px; }
.round-arrow { display: grid; place-items: center; width: 80px; height: 80px; background: var(--c-white); border: 1.8px solid #E5E7EB; border-radius: 40px; transition: border-color .2s, box-shadow .2s, opacity .2s; }
.round-arrow:hover { border-color: var(--c-red); box-shadow: 0 4px 16px rgba(196, 32, 48, .18); }
.round-arrow:disabled { opacity: .4; cursor: default; box-shadow: none; border-color: #E5E7EB; }
.filter-tabs { display: flex; gap: 12px; }
.filter-tab { padding: 10px 34px; background: var(--c-border-gray); border-radius: 20px; font-size: 14px; line-height: normal; text-transform: uppercase; color: var(--c-body-gray); transition: background-color .2s, color .2s; }
.filter-tab:hover { background: #cfcfcf; }
.filter-tab.is-active { background: var(--c-red); color: var(--c-white); }
.pf-cards { display: flex; gap: 44px; overflow: hidden; }
.pf-cards.is-sliding { transition: transform .5s cubic-bezier(.22, .8, .24, 1); }
.pf-card { flex: none; width: 417px; display: flex; flex-direction: column; gap: 16px; transition: opacity .3s, transform .3s; }
.pf-card[hidden] { display: none; }
.pf-media { position: relative; height: 233px; overflow: hidden; cursor: pointer; }
.pf-media img { position: absolute; max-width: none; }
.pf-media__base { left: 0; top: 0; width: 417px; height: 232.74px; }
.pf-media__overlay { left: 2.63px; top: 25.44px; width: 411.32px; height: 183.58px; object-fit: cover; }
.pf-media__time { position: absolute; left: 303px; top: 181px; padding: 4px 24px; background: var(--c-white); border-radius: 4px; font-weight: 500; font-size: 14px; line-height: normal; color: var(--c-ink); }
.pf-media__play { position: absolute; left: 169px; top: 77.23px; width: 80px; height: 80px; transition: transform .25s; }
.pf-media__play img { position: static; }
.pf-card:hover .pf-media__play { transform: scale(1.1); }
.pf-meta { display: flex; flex-direction: column; gap: 6px; }
.pf-meta__row { display: flex; justify-content: space-between; align-items: center; }
.pf-meta h3 { font-weight: 600; font-size: 18px; line-height: normal; text-transform: uppercase; color: #111827; }
.pf-meta p { font-size: 16px; line-height: 24px; color: var(--c-body-gray); }

/* ---------- Stats ---------- */
.ve-stats { position: relative; height: 400px; overflow: hidden; background: var(--c-black); border-radius: 5px; }
.ve-stats img { position: absolute; max-width: none; }
.ve-stats__bg1 { left: 1060.05px; top: 91.95px; width: 772.47px; height: 585.41px; object-fit: cover; opacity: .2; }
.ve-stats__bg2 { left: 1294px; top: -72.25px; width: 506px; height: 272.75px; object-fit: cover; opacity: .3; }
.ve-stats__bg3 { position: absolute; left: 0; top: 0; width: 870px; height: 400px; }   /* matches the 870x400 statistics pictures, so nothing is cropped */
.ve-stats__bg3 img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.ve-stats__bg3::after { content: ""; position: absolute; inset: 0; background: linear-gradient(-90deg, #000 0%, rgba(0, 0, 0, 0) 23%); }
.ve-stats__content { position: absolute; left: 850px; top: 55.5px; display: flex; flex-direction: column; gap: 24px; }
.ve-stats__row { display: flex; align-items: center; gap: 40px; }
.ve-stats__divider { flex: none; width: 1px; height: 120px; border-radius: 1000px; background: var(--c-divider-gray); }
.ve-stats__rule { height: 1px; border-radius: 1000px; background: var(--c-divider-gray); }
.ve-stat { width: 240px; display: flex; flex-direction: column; gap: 12px; }
.ve-stat__value { display: flex; align-items: baseline; gap: 6px; font-weight: 600; font-size: 48px; line-height: normal; color: var(--c-white); }
.ve-stat__label { font-weight: 500; font-size: 18px; line-height: 26px; color: var(--c-border-gray); }

/* ---------- Why ---------- */
.ve-why { display: flex; flex-direction: column; gap: 40px; }
.ve-split { display: flex; justify-content: center; gap: 80px; align-self: stretch; }
.ve-split > .h2 { flex: none; width: 720px; max-width: 45%; }
.ve-split--center > .h2 { width: auto; flex: 1; }
.ve-split__side { flex: 1; max-width: 880px; display: flex; flex-direction: column; gap: 24px; }   /* paragraph column kept to a comfortable reading width */
.ve-split { justify-content: flex-start; }
.ve-split__side p:empty { display: none; }   /* an empty paragraph field no longer leaves a gap */
.ve-split__side p { font-weight: 500; font-size: 18px; line-height: 30px; color: var(--c-body-gray); }
.btn--enquire { height: 56px; padding: 16px 48px; line-height: 30px; }
.pillars { display: flex; gap: 16px; }
.pillar { position: relative; flex: 1; height: 280px; overflow: hidden; border: 1px solid #E2E8F0; border-radius: 10px; }
.pillar__img { position: absolute; top: 0; width: 470.23px; height: 100%; max-width: none; object-fit: cover; }
.pillar__content { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; gap: 18px; padding: 20px 12px 20px 20px; }
.pillar__icon { flex: none; display: grid; place-items: center; width: 64px; height: 64px; background: var(--c-white); border: 1px solid; border-radius: 32px; }
.pillar__text { display: flex; flex-direction: column; gap: 12px; }
.pillar__text h3 { font-weight: 700; font-size: 16px; line-height: 22px; color: #1A1A1A; }
.pillar__text p { width: 238px; font-size: 15px; line-height: 22px; color: var(--c-body-gray); }

/* ---------- Tools strip ---------- */
.ve-tools { position: relative; width: 1920px; max-width: 100%; height: 500px; overflow: hidden; background: var(--c-white); }
.ve-tools__bg { position: absolute; left: -20px; top: -193.34px; width: 1960px; height: 1103.09px; max-width: none; }
.ve-tools::after { content: ""; position: absolute; left: -20px; top: -193.34px; width: 1960px; height: 1103.09px; background: linear-gradient(180deg, rgba(255, 255, 255, .2) 18%, rgba(255, 255, 255, 0) 38%); }
.ve-tools__row { position: absolute; z-index: 1; left: 0; top: 61px; width: 100%; box-sizing: border-box; padding: 0 24px; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 28px 24px; }   /* more than six tools wrap onto a second row instead of being squeezed */
.ve-tool { display: flex; align-items: center; gap: 20px; }
.ve-tool img { flex: none; width: auto; min-width: 72px; max-width: 128px; height: 72px; object-fit: contain; border-radius: 14px; }
.ve-tool:last-child img { object-fit: contain; }
.ve-tool div { display: flex; flex-direction: column; gap: 8px; }
.ve-tool strong { font-weight: 600; font-size: 18px; line-height: normal; color: var(--c-white); }
.ve-tool span { font-size: 16px; line-height: 24px; color: var(--c-off-white); }
.ve-tools__divider { flex: none; width: 1px; height: 58px; background: var(--c-border-gray); }

/* ---------- Services + workflow ---------- */
.ve-services-flow { display: flex; flex-direction: column; align-items: center; gap: 80px; }
.ve-services { display: flex; flex-direction: column; gap: 40px; }
.ve-services__content { display: flex; gap: 80px; align-self: stretch; }
.acc--services { flex: 1; display: flex; flex-direction: column; gap: 32px; }
.acc__rule { height: 1px; background: var(--c-border-gray); }
.acc--services .acc-head { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; }
.acc--services .acc-title { font-size: 24px; line-height: 32px; color: var(--c-body-gray); transition: color .25s; }
.acc--services .acc-item.is-open .acc-title { font-weight: 600; color: var(--c-dark-gray); }
.acc-icons { position: relative; flex: none; width: 42px; height: 42px; }
.acc-icon { position: absolute; inset: 0; transition: opacity .25s ease, transform .3s ease; }
.acc-icon--open { opacity: 0; transform: translateY(-6px); }
.acc-item.is-open .acc-icon--closed { opacity: 0; transform: translateY(6px); }
.acc-item.is-open .acc-icon--open { opacity: 1; transform: none; }
.acc--services .acc-head:hover .acc-title { color: var(--c-red); }
.acc--services .acc-points { padding-top: 24px; }
.acc--services .acc-points { width: 100%; gap: 18px; }
.acc--services .acc-points li { color: var(--c-ink); font-weight: 400; gap: 12px; line-height: 26px; }
.acc--services .is-static .acc-head { cursor: default; }
.ve-services__img { flex: none; width: 900px; align-self: flex-start; position: sticky; top: 120px; height: auto; object-fit: contain; border: 1px solid var(--c-divider-gray); border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, .1); }

/* generic accordion panel behaviour */
/* Grid-row trick (not a measured max-height) so the animation never clips content that reflows
   after webfonts finish loading. The padded content sits in .acc-panel__inner, one level below
   the grid item: padding is real CSS box space that never shrinks past its own size, so the
   item that gets measured for the 0fr row must itself have none, or the "collapsed" panel still
   renders at padding-top + padding-bottom tall instead of 0. */
.acc-panel { display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0; transition: grid-template-rows .4s ease, opacity .3s ease; }
.acc-panel__inner { min-height: 0; overflow: hidden; }
.acc-item.is-open > .acc-panel { grid-template-rows: 1fr; opacity: 1; }
.acc-head { cursor: pointer; }

.workflow { width: 1824px; max-width: 100%; min-height: 466.55px; }
.workflow__inner { position: relative; display: flex; align-items: flex-start; gap: 74px; padding: 0 0 20px 37px; }   /* steps flow in a row, so long titles or copy make the block taller instead of overflowing */
.workflow__line { position: absolute; top: 220px; width: 304px; height: 1px; }
.wstep { position: relative; left: auto !important; flex: none; top: 0; width: 230px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.wstep__art { position: relative; width: 194px; height: 194px; }
.wstep__ring { position: absolute; inset: 0; width: 194px; height: 194px; max-width: none; }
.wstep__no { position: absolute; top: 14px; height: 60px; font-family: var(--font-display); font-weight: 500; font-size: 48px; line-height: 60px; color: var(--c); }
.wstep__img { position: absolute; max-width: none; object-fit: contain; left: 37px !important; top: 76px !important; width: 120px !important; height: 114px !important; }   /* every step icon the same size, centred in its ring */
.wstep__body { display: flex; flex-direction: column; align-items: center; gap: 7px; align-self: stretch; }
.wstep__copy { display: flex; flex-direction: column; align-items: center; gap: 28px; align-self: stretch; }
.wstep__copy h3 { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 6px; width: 230px; min-height: 68px; font-weight: 500; font-size: 22px; line-height: 28px; color: var(--c-near-black); text-align: center; white-space: normal; }
.wstep__copy h3 span { width: 34px; height: 3px; border-radius: 100px; background: var(--c); }
.wstep__copy p { width: 230px; text-align: center; font-size: 16px; line-height: 24px; color: var(--c-body-gray); }
.workflow__next { position: absolute; top: 205.5px; width: 30px; height: 30px; }

/* ---------- Dark showcase extras ---------- */
.showcase__decor { position: absolute; max-width: none; pointer-events: none; }

/* ---------- Offers / CTA / Engagement wrapper ---------- */
.ve-offer-engagement { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 80px; }
.ve-offers { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; }
.ve-offers__head { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ve-offers__head p { width: 1600px; max-width: 100%; text-align: center; font-weight: 500; font-size: 18px; line-height: 30px; color: var(--c-body-gray); }
.offer-viewport { overflow: hidden; }
.offer-cards { display: flex; align-items: center; gap: 40px; }
.offer-cards.is-sliding { transition: transform .6s cubic-bezier(.22, .8, .24, 1); }
.offer-card { position: relative; flex: none; width: calc((100% - 80px) / 3); height: 530px; padding: 48px 40px; overflow: hidden; display: flex; flex-direction: column; gap: 24px; border-radius: 10px; }
.offer-card { background: #E8E8E8 !important; }
.offer-card__top { display: flex; justify-content: space-between; align-items: center; }
.offer-card__no { font-family: var(--font-display); font-weight: 500; font-size: 48px; line-height: 60px; }
.offer-card__top a { transition: transform .25s; }
.offer-card__top a:hover { transform: translate(3px, -3px); }
.offer-card__body { display: flex; flex-direction: column; gap: 12px; height: 159px; }
.offer-card__body h3 { font-weight: 500; font-size: 24px; line-height: normal; color: var(--c-near-black); }
.offer-card__body p { width: 495px; max-width: 100%; font-size: 16px; line-height: 24px; color: var(--c-body-gray); }
.offer-card__img { position: absolute; max-width: none; }
.dots--navy .dots__dot { background: #D1D0F9; }
.dots--navy .dots__dot.is-active { background: var(--c-navy); }

.ve-cta { position: relative; align-self: stretch; height: 240px; padding: 0 60px; overflow: hidden; display: flex; align-items: center; justify-content: space-between; background: var(--c-navy); }
.ve-cta > * { position: relative; z-index: 1; }
.ve-cta__bg { position: absolute !important; z-index: 0 !important; left: -37.03px; top: -334.37px; width: 1990.06px; height: 852.74px; max-width: none; }
.ve-cta::after { content: ""; position: absolute; z-index: 0; left: -37.03px; top: -334.37px; width: 1990.06px; height: 852.74px; background: rgba(0, 0, 0, .6); }
.ve-cta .h1 { color: var(--c-white); }

/* ---------- FAQ ---------- */
.ve-faq { display: flex; flex-direction: column; gap: 40px; }
.acc--faq { display: flex; flex-direction: column; gap: 20px; }
.acc--faq .acc-item { background: var(--c-white); border: 1px solid var(--c-border-gray); border-radius: 5px; }
.acc--faq .acc-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 0 32px; text-align: left; }
.acc--faq .acc-item.is-open .acc-head { padding-top: 24px; min-height: 59px; }
.acc--faq .acc-chevron { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 100px; transition: transform .3s; }
.acc--faq .acc-chevron img { transform: rotate(180deg); transition: transform .3s; }
.acc--faq .acc-item.is-open .acc-chevron img { transform: rotate(0); }
.acc--faq .acc-title { font-size: 24px; line-height: 32px; font-weight: 400; color: var(--c-body-gray); }
.acc--faq .acc-item.is-open .acc-title { font-weight: 500; color: var(--c-near-black); }
.acc--faq .acc-panel p { padding: 16px 32px 24px 82px; font-size: 16px; line-height: 24px; color: var(--c-body-gray); }

/* ---------- Video popup ---------- */
.video-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; }
.video-modal[hidden] { display: none; }
.video-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .82); animation: vm-fade .25s ease; }
.video-modal__box { position: relative; width: min(1200px, calc(92vw / var(--z, 1))); animation: vm-pop .3s cubic-bezier(.22, .8, .24, 1); }
.video-modal__title { margin-bottom: 14px; font-weight: 600; font-size: 20px; text-transform: uppercase; color: var(--c-white); }
.video-modal__stage { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.video-modal__stage video, .video-modal__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
/* reels / shorts: the player becomes a tall 9:16 card that always fits the screen height (--z = the page's zoom factor) */
.video-modal__box--portrait { width: min(460px, calc(92vw / var(--z, 1)), calc((100vh - 170px) / var(--z, 1) * 9 / 16)); }
.video-modal__box--portrait .video-modal__stage { aspect-ratio: 9 / 16; }
.video-modal__stage.is-loading video { opacity: 0; }
.video-modal__close { position: absolute; right: 0; top: -54px; width: 44px; height: 44px; border: 1px solid var(--c-red); border-radius: 50%; font-size: 30px; line-height: 40px; color: var(--c-white); transition: background-color .2s; }
.video-modal__close:hover { background: var(--c-red); }
/* previous / next video inside the popup (they sit at the screen edges, so they work for wide and tall players alike) */
.video-modal__count { margin-top: 12px; text-align: center; font-size: 14px; letter-spacing: .04em; color: rgba(255, 255, 255, .7); }
.video-modal__nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; border: 1px solid var(--c-red); border-radius: 50%; color: var(--c-white); background: rgba(0, 0, 0, .35); cursor: pointer; transition: background-color .2s; }
.video-modal__nav[hidden] { display: none; }
.video-modal__nav:hover, .video-modal__nav:focus-visible { background: var(--c-red); }
.video-modal__nav--prev { left: 16px; }
.video-modal__nav--next { right: 16px; }
@media (max-width: 700px) {
    .video-modal__nav { top: auto; bottom: 14px; margin-top: 0; }
    .video-modal__nav--prev { left: calc(50% - 64px); }
    .video-modal__nav--next { right: calc(50% - 64px); }
    .video-modal__box { margin-bottom: 64px; }     /* room for the arrows under the player */
}
@keyframes vm-fade { from { opacity: 0; } }
@keyframes vm-pop { from { opacity: 0; transform: scale(.94); } }
body.modal-open { overflow: hidden; }

/* optional hero picture (admin: Hero > Hero background picture) on the plain hero layouts */
.ve-hero__photo { position: absolute; z-index: 0; left: 580px; top: 410px; width: 733px; height: 550px; max-width: none; object-fit: cover; opacity: .95; pointer-events: none; }   /* same placement as the Collaterals hero art: the 589x419 artwork sits whole behind the text, not stretched over the page */

/* optional paragraph above the bullet points of an accordion item */
.acc--services .acc-para { margin: 0 0 18px; width: 100%; font-weight: 400; font-size: 18px; line-height: 28px; color: var(--c-ink); }
.acc--services .acc-para + .acc-points { padding-top: 0; }

/* statistics bar: one picture only (the one on the left); the extra faint pictures on the right are not shown */
.ve-stats__bg1, .ve-stats__bg2, .ppt-stats__layer, .pk-stats__lines { display: none !important; }

/* the tools-strip pictures are 1920x500 like the strip itself: shown whole instead of the oversized crop (also for pictures uploaded in the admin) */
.ve-tools__bg[src$="tools-bg.webp"], .ve-tools__bg[src^="uploads/"] { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.ve-tools:has(.ve-tools__bg[src$="tools-bg.webp"])::after, .ve-tools:has(.ve-tools__bg[src^="uploads/"])::after { left: 0; top: 0; width: 100%; height: 100%; }

/* Tools strip: the tools always stay on one line; when there are too many for the width the line scrolls by itself, endlessly */
.ve-tools__row .ve-tool { flex: none; }
.ve-tools.is-marquee .ve-tools__row { justify-content: flex-start; width: max-content; padding: 0; gap: 24px; animation: ve-tools-scroll var(--ve-time, 30s) linear infinite; }
.ve-tools.is-marquee .ve-tools__row:hover { animation-play-state: paused; }
@keyframes ve-tools-scroll { to { transform: translateX(calc(var(--ve-shift, 0px) * -1)); } }

/* dark showcase on the video pages: the decorative pictures stay behind the cards, and the cards are solid so no picture shows through them */
.showcase__decor { z-index: 0; }
.showcase__content { z-index: 1; }
.showcase .showcase-card { background: #050506; }

/* only the video pages (which have the film strip at the bottom of the hero) need the extra room under the text; other hero sections end right after their content */
.ve-hero:has(.ve-hero__floor) { padding-bottom: 170px; }