/* Films page — showreel first, then how we film, formats to scale, films, filmmakers, sound, prices, FAQ. */
.page-films .reel { position: relative; margin-top: clamp(32px, 4vw, 52px); padding: 12px; background: var(--white); box-shadow: var(--shadow-lift); }
.page-films .reel .media { aspect-ratio: 21 / 9; }
.page-films .reel__play { white-space: nowrap; position: absolute; left: clamp(26px, 3vw, 44px); bottom: clamp(26px, 3vw, 44px); z-index: 2; }
.page-films .reel__tc { position: absolute; top: clamp(24px, 2.6vw, 36px); right: clamp(24px, 2.6vw, 36px); z-index: 2; padding: 6px 10px; border-radius: 4px; background: rgba(250, 250, 247, .9); font-family: var(--f-typed); font-size: 14px; color: var(--blue-deep); }
.page-films .reel__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding: 14px 4px 2px; }
.page-films .reel__cap .typed { color: var(--muted); }
@media (max-width: 640px) {
  .page-films .reel .media { aspect-ratio: 4 / 3; }
  .page-films .reel__play { left: 22px; top: 22px; bottom: auto; }
}
@media (max-width: 440px) {
  .page-films .reel__tc { display: none; }
}

/* How we film */
.page-films .ways { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 44px); }
.page-films .ways li { display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.page-films .ways h3 { font-size: 22px; }
.page-films .ways p { color: var(--muted); }
.page-films .how-photo { display: grid; gap: 14px; }
.page-films .how-photo .postcard { --tilt: 1.4deg; }
@media (max-width: 960px) { .page-films .ways { grid-template-columns: minmax(0, 1fr); } }

/* Formats to scale */
.page-films .scale { --label-col: minmax(0, 19rem); display: grid; gap: 0; padding: clamp(20px, 3vw, 36px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.page-films .scale__legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 18px; font-size: 14px; color: var(--muted); }
.page-films .scale__legend span { display: inline-flex; align-items: center; gap: 8px; }
.page-films .scale__legend i { display: inline-block; width: 22px; height: 10px; border-radius: 3px; }
.page-films .key-incl { background: var(--blue); }
.page-films .key-add { background: var(--rose); border: 1.5px dashed var(--rose-deep); }
.page-films .scale__rows { list-style: none; display: grid; }
.page-films .scale__row, .page-films .scale__axis { display: grid; grid-template-columns: var(--label-col) minmax(0, 1fr); gap: 6px 24px; align-items: center; }
.page-films .scale__row { padding-block: 12px; border-bottom: 1px dashed var(--line); }
.page-films .scale__label { display: grid; gap: 4px; min-width: 0; }
.page-films .scale__name { font: 400 19px/1.2 var(--f-display); color: var(--blue-deep); }
.page-films .scale__dur { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 14px; color: var(--muted); }
.page-films .scale__dur .tag { min-height: 22px; padding: 3px 9px; font-size: 11px; }
.page-films .scale__track {
  position: relative; height: 22px;
  background:
    linear-gradient(to right, var(--line) 1px, transparent 1px) 0 0 / 25% 100% repeat-x,
    linear-gradient(var(--airmail), var(--airmail)) 0 50% / 100% 2px no-repeat;
  border-right: 1px solid var(--line);
}
.page-films .scale__bar { position: absolute; top: 3px; bottom: 3px; left: var(--from); width: max(6px, calc(var(--to) - var(--from))); border-radius: 4px; background: var(--blue); }
.page-films .scale__bar--add { background: var(--rose); border: 1.5px dashed var(--rose-deep); }
.page-films .scale__axis { padding-top: 10px; }
.page-films .scale__ticks { position: relative; height: 20px; font: 700 12px/1 var(--f-label); letter-spacing: .12em; color: var(--muted); }
.page-films .scale__ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.page-films .scale__ticks span:first-child { transform: none; }
.page-films .scale__ticks span:last-child { transform: translateX(-100%); }
.page-films .scale__note { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: baseline; }
.page-films .scale__note .note-tag { grid-row: span 2; }
@media (max-width: 760px) {
  .page-films .scale__row, .page-films .scale__axis { grid-template-columns: minmax(0, 1fr); }
  .page-films .scale__axis > :first-child { display: none; }
  .page-films .scale__note { grid-template-columns: minmax(0, 1fr); }
  .page-films .scale__note .note-tag { grid-row: auto; }
}

/* Films list */
.page-films .films { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 36px); }
.page-films .films__side { display: grid; gap: clamp(20px, 2.6vw, 36px); align-content: start; }
.page-films .film-card .media { aspect-ratio: 16 / 9; }
.page-films .film-card__dur { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 5px 9px; border-radius: 4px; background: rgba(38, 42, 51, .72); color: var(--paper); font-family: var(--f-typed); font-size: 13px; }
.page-films .film-card__icon { position: absolute; left: 14px; bottom: 14px; z-index: 2; width: 46px; height: 46px; border-radius: 50%; background: rgba(250, 250, 247, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%232F3E63'/%3E%3C/svg%3E") center / 22px no-repeat; box-shadow: var(--shadow); }
.page-films .film-card--lead .card__title { font-size: clamp(26px, 2.6vw, 34px); }
@media (max-width: 860px) { .page-films .films { grid-template-columns: minmax(0, 1fr); } }

/* Filmmakers */
.page-films .makers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); }
.page-films .maker { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 30px); align-items: start; padding: 12px; background: var(--white); box-shadow: var(--shadow); }
.page-films .maker .media { aspect-ratio: 4 / 5; }
.page-films .maker__body { display: grid; gap: 10px; padding: 8px 8px 8px 0; }
.page-films .maker__body h3 { font-size: 28px; }
.page-films .maker__body p { color: var(--muted); font-size: 16px; }
@media (max-width: 960px) { .page-films .makers { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .page-films .maker { grid-template-columns: minmax(0, 1fr); } .page-films .maker__body { padding: 4px 6px 10px; } }

/* Sound */
.page-films .sound { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.page-films .sound__tips { padding: clamp(22px, 3vw, 32px); background: var(--paper); box-shadow: var(--shadow); }
.page-films .sound__tips h3 { font-size: 22px; margin-bottom: 14px; }
@media (max-width: 860px) { .page-films .sound { grid-template-columns: minmax(0, 1fr); } }

/* Prices */
.page-films .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.page-films .plan { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.6vw, 30px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.page-films .plan--pick { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), var(--shadow); }
.page-films .plan__top { display: grid; justify-items: start; gap: 10px; }
.page-films .plan__top .tag { order: -1; }
.page-films .plan h3 { font-size: 26px; }
.page-films .plan .price { font-size: 38px; line-height: 1; }
.page-films .plan .price small { display: block; margin-top: 6px; font: 400 14px/1.4 var(--f-body); color: var(--muted); }
.page-films .plan .checks { font-size: 15.5px; }
.page-films .addons { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: clamp(22px, 3vw, 32px); }
.page-films .addons .tag { min-height: 34px; padding: 6px 14px; font-size: 12.5px; }
.page-films .terms { margin-top: 16px; font-size: 14.5px; color: var(--muted); }
@media (max-width: 960px) { .page-films .plans { grid-template-columns: minmax(0, 1fr); } }

.page-films .credits-line { padding-bottom: 28px; }