/* v12 (2026-10-08): the two one-minute films. The arrival plays right under the cover; At Your Service plays in the
   appointment desk above the "Prefer to talk?" close. Centred heads on every screen; the film plays by itself. */
.yfilm { padding-block: clamp(4.5rem, 8vw, 7rem); }
.yfilm__wrap, .yfilm--service { display: grid; justify-items: center; gap: clamp(1.6rem, 3vw, 2.4rem); }
.yfilm--service { margin: clamp(3.5rem, 7vw, 6rem) auto clamp(3rem, 6vw, 5rem); }
.yfilm__head { display: grid; justify-items: center; text-align: center; gap: .9rem; max-width: 40rem; }
.yfilm__head .sec-no { justify-content: center; margin: 0; }
.yfilm__head .d-lg { margin: 0; text-wrap: balance; }
.yfilm__head .body { margin: 0; max-width: 34rem; }
.yfilm--service .yfilm__head .sec-no { color: var(--bone-3, #d8ccb8); }
.yfilm__frame { position: relative; width: min(100%, 400px); aspect-ratio: 9 / 16; max-height: 82vh; background: #15120f; overflow: hidden;
  border: 10px solid #FBF7EF; outline: 1px solid var(--hair-strong); box-shadow: var(--sc-e3); }
.yfilm--service .yfilm__frame { border-color: #24463a; outline-color: hsl(36 40% 70% / .35); }
.yfilm__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yfilm__snd { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .95rem;
  border-radius: 999px; border: 0; background: var(--orange); color: var(--ink); font-weight: 750; font-size: .9rem; cursor: pointer;
  box-shadow: 0 4px 12px hsl(28 30% 8% / .35); }
.yfilm__snd svg { width: 18px; height: 18px; }
.yfilm__snd[aria-pressed="true"] { background: var(--bone); }
.yfilm__snd.is-asking { animation: filmAsk 1.6s ease-in-out infinite; }
@keyframes filmAsk { 50% { box-shadow: 0 0 0 10px hsl(24 76% 54% / .25), 0 4px 12px hsl(28 30% 8% / .35); } }
.yfilm__play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; border: 0;
  background: hsl(36 45% 95% / .92); color: var(--green); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 24px hsl(28 30% 8% / .4); transition: opacity .3s, transform .3s; }
.yfilm__play svg { width: 34px; height: 34px; margin-left: 4px; }
.yfilm.is-playing .yfilm__play, .yfilm--service.is-playing .yfilm__play { opacity: 0; transform: scale(.8); pointer-events: none; }
@media (max-width: 640px) {
  .yfilm__frame { width: min(100%, 360px); border-width: 8px; }
}
@media (prefers-reduced-motion: reduce) { .yfilm__snd.is-asking { animation: none; } }

/* Phone: every section head sits on the centre (Clive, 2026-10-08): the number line, the heading, the intro
   paragraph and the button straight after it. Long reading text, forms and cards below stay as they are. */
@media (max-width: 640px) {
  main section .sec-no { justify-content: center; text-align: center; }
  main section h2.d-lg, #book h3.d-lg { text-align: center; text-wrap: balance; margin-inline: auto; }
  main section .sec-no ~ .lede, main section .sec-no ~ .body:first-of-type, main section .sec-no + h2 + p,
  main section h2.d-lg + .lede, main section h2.d-lg + .body { text-align: center; margin-inline: auto; }
  main section .sec-no ~ .btn, main section .sec-no ~ a.btn { justify-self: center; align-self: center; margin-inline: auto; }
  .wake__copy, .min-head, .groom__head, .depts__head, .diary2__head, .reports__head, .desk__head > div { justify-items: center; text-align: center; }
  main section .sec-no, main section h2.d-lg { justify-self: center; }
}