/* Videos page. Everything visual comes from /styles.css (sections, the dark
   price slab, price cards, steps, FAQ, contact form, about block). This file
   only adds what the shared sheet has no component for: the film players, the
   hero order on phones, the enquiry layout and a select box. */

/* The shared teal-deep (#3E8C82) is 3.8:1 on cream, under AA for small text.
   This page uses a darker teal for its small labels and links (5.6:1). */
.videos-page { --teal-text: #286F66; }
.videos-page .eyebrow { color: var(--teal-text); }
.videos-page .section--dark .eyebrow { color: #7FD4C8; }
.videos-page .tlink { color: var(--teal-text); border-bottom-color: rgba(40, 111, 102, 0.35); }
.videos-page .tlink:hover { border-color: var(--teal-text); }

.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 20px; border-radius: 999px; background: var(--purple-deep); color: #fff; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }
.videos-page ::selection { background: rgba(92, 194, 183, 0.35); color: var(--ink); }
.videos-page :focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }

/* ---------- Hero ---------- */
.video-hero { padding: 52px 0 64px; }
.vh-grid { grid-template-columns: 1.08fr 0.92fr; gap: 64px; align-items: center; }
.video-hero h1 { font-size: clamp(2.5rem, 4.4vw, 3.7rem); margin-bottom: 20px; }
.vh-lead { color: var(--ink); max-width: 30ch; margin-bottom: 18px; }
.vh-price { font-size: 1.06rem; line-height: 1.6; color: var(--ink-70); max-width: 44ch; margin-bottom: 26px; }
.vh-price b { color: var(--ink); font-weight: 800; }
.film--feature { width: 100%; max-width: 440px; justify-self: center; }

/* ---------- Film players ---------- */
.film { margin: 0; }
.film-frame { position: relative; overflow: hidden; border-radius: 18px; background: #1c0e2c; box-shadow: 0 24px 56px rgba(36, 25, 50, 0.22); }
.film-frame--portrait { aspect-ratio: 4 / 5; }
.film-frame--landscape { aspect-ratio: 16 / 9; }
.film-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: #1c0e2c; }

/* One clear play button over each poster. videos.js shows it and hands over
   to the native controls once the film starts; without JS the native
   controls are there from the start. */
.film-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 22px 10px 10px; border: 0; border-radius: 999px;
  background: rgba(255, 248, 237, 0.96); color: var(--ink);
  font-family: var(--sans); font-size: 0.95rem; font-weight: 700; white-space: nowrap;
  cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, background 0.15s ease;
}
.film-play::before {
  content: ""; flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M0 0l12 7-12 7z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 56% 50% / 12px 14px;
}
.film-frame { transition: box-shadow 0.25s cubic-bezier(0.2, 0.6, 0.2, 1); }
@media (hover: hover) { .film:hover .film-frame { box-shadow: 0 30px 64px rgba(36, 25, 50, 0.3); } }
.film-play:hover { background: #fff; transform: translate(-50%, -50%) scale(1.04); }
.film-play[hidden] { display: none; }
/* The science poster has its title in the middle, so its button sits low. */
.film-play--low { top: auto; bottom: 18px; transform: translateX(-50%); }
.film-play--low:hover { transform: translateX(-50%) scale(1.04); }

.film-caption { padding-top: 18px; }
.film-kind { display: block; margin-bottom: 8px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-text); }
.film-caption h3 { font-size: 1.25rem; font-weight: 800; line-height: 1.3; margin-bottom: 8px; }
.film-caption p { margin: 0 0 8px; font-size: 1rem; line-height: 1.55; color: var(--ink-70); max-width: 60ch; }
.film-caption .film-meta { margin: 0; font-size: 0.88rem; font-weight: 600; color: var(--ink-55); }

.film-row { display: grid; grid-template-columns: 0.8fr 1.7778fr; gap: 40px; align-items: start; margin-top: 30px; }

/* ---------- Price slab ---------- */
/* .section--dark recolours every p and h3 cream, which vanishes on the white cards. */
.videos-page .section--dark .price-card p { color: var(--ink-70); font-size: 1.02rem; line-height: 1.55; }
.videos-page .section--dark .price-card h3 { color: var(--ink); }
.extras-head { margin: 22px 0 12px; padding-top: 20px; border-top: 1px solid var(--hairline); font-size: 1.02rem; font-weight: 800; }
.extras-prices { list-style: none; margin: 0 0 14px; padding: 0; }
.extras-prices li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--hairline); font-size: 0.98rem; line-height: 1.4; color: var(--ink-70); }
.extras-prices b { flex: none; font-weight: 800; color: var(--ink); white-space: nowrap; }
.videos-page .section--dark .price-card .extras-quoted { margin: 0; font-size: 0.92rem; color: var(--ink-55); }

/* ---------- How it works ---------- */
.steps--icons { margin-top: 74px; }
.steps--icons .step-card { position: relative; padding-top: 40px; }
/* Centred over the top edge of each card. Centred with margins, not a CSS
   transform, because GSAP animates this element's transform. */
.step-icon {
  position: absolute; top: -52px; left: 0; right: 0; margin: 0 auto; width: 78px; height: 78px;
  object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 12px 18px rgba(36, 25, 50, 0.16));
}
/* The shared 1.68rem wraps "Approve the script" and knocks the three cards out of line. */
.videos-page .steps .step-card h3 { font-size: 1.45rem; }
/* Titles that wrap would push their paragraph lower than the others, so every
   title gets the height of two lines on wide screens. */
@media (min-width: 901px) { .videos-page .steps .step-card h3 { min-height: 2.3em; display: flex; align-items: center; } }
.how-note { max-width: 62ch; margin: 0; font-size: 1.02rem; color: var(--ink-70); }

/* Keep the answers on the page's left edge, like every other section. */
.videos-page .faq { margin-left: 0; }

/* ---------- Who makes the films ---------- */
#who h2 { margin-bottom: 30px; }
.about-body .tlink { font-size: 1rem; }

/* The sitewide inbox tagline confused every cold reader on a page about films. */
.videos-page .footer-tag { display: none; }

/* ---------- Enquiry ---------- */
.enquire-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.enquire .contact-form { max-width: none; margin: 0; }
.wa-line { margin-top: 20px; font-size: 1.02rem; color: var(--ink-70); }
.wa-line a { color: var(--teal-text); font-weight: 700; }
.form-field select {
  width: 100%; font-family: var(--sans); font-size: 0.95rem; color: var(--ink);
  background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23241932' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
  border: 1px solid var(--hairline); border-radius: 12px; padding: 12px 40px 12px 14px;
  -webkit-appearance: none; appearance: none;
}
.form-field select:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(70, 67, 138, 0.12); }
.form-result { margin-top: 18px; padding: 18px 20px; border-radius: 14px; background: var(--cream); border: 1px solid var(--hairline); overflow-wrap: anywhere; }
.form-result h3 { font-size: 1.05rem; margin-bottom: 6px; }
.form-result p { margin: 0; font-size: 0.95rem; color: var(--ink-70); }
.form-result dl { margin: 12px 0 0; }
.form-result dt { margin-top: 10px; font-size: 0.8rem; font-weight: 700; color: var(--ink-55); }
.form-result dd { margin: 2px 0 0; font-size: 0.95rem; color: var(--ink); white-space: pre-wrap; }

/* ---------- Narrower screens ---------- */
@media (max-width: 900px) {
  /* The film sits between the promise and the price on phones and tablets. */
  .vh-grid { display: flex; flex-direction: column; gap: 0; }
  .vh-copy { display: contents; }
  .vh-copy > .breadcrumbs { order: 1; align-self: flex-start; }
  .vh-copy > h1 { order: 2; }
  .vh-copy > .vh-lead { order: 3; }
  .vh-grid > .film--feature { order: 4; align-self: center; margin: 6px 0 24px; }
  .vh-copy > .vh-offer { order: 5; }
  .video-hero { padding: 28px 0 44px; }

  .film-row { grid-template-columns: 1fr; gap: 44px; }
  .steps--icons { gap: 64px; margin-top: 70px; }
  .film-row .film-frame--portrait { max-width: 440px; }
  .enquire-grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 620px) {
  /* Three lines instead of four on a phone, with "small businesses" kept together. */
  .video-hero h1 { font-size: 2.15rem; }
  .film-play { font-size: 0.9rem; }
}