/* Support — a direct line to the team.
   Morning light for the hero (office hours); each section sets its head across the page, the lead and a
   photograph on the left and the ruled ledger on the right; the safety notice runs full width. */

body[data-page="support"] {
  --hero: url("../img/photos/morning-window.jpg"); --hero-pos: 50% 45%;
  --cta: url("../img/photos/london-bluehour.jpg"); --cta-pos: 50% 55%;
}

body[data-page="support"] .poster > section.machine {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  grid-template-rows: auto auto 1fr; column-gap: clamp(2rem, 5vw, 5.5rem); row-gap: 1.6rem; align-items: start;
}
body[data-page="support"] .machine > .sh { grid-column: 1 / -1 }
body[data-page="support"] .machine > .section-lead { grid-column: 1; grid-row: 2; margin: 0 }
body[data-page="support"] .machine > ol.points { grid-column: 2; grid-row: 2 / span 2; grid-template-columns: minmax(0, 1fr); margin-top: 0 }
body[data-page="support"] .machine > .notice { grid-column: 1 / -1; max-width: none }

/* a photograph under the lead: the team for 01, London for 02 */
body[data-page="support"] .poster > section.machine:nth-child(2)::after,
body[data-page="support"] .poster > section.machine:nth-child(3)::after {
  content: ""; grid-column: 1; grid-row: 3; aspect-ratio: 4 / 3; border-radius: var(--radius);
  background: var(--navy) var(--sec-img) center / cover no-repeat; background-position: var(--sec-pos, 50% 50%);
}
body[data-page="support"] .poster > section.machine:nth-child(2) { --sec-img: url("../img/photos/about-team-sm.jpg"); --sec-pos: 50% 55% }
body[data-page="support"] .poster > section.machine:nth-child(3) { --sec-img: url("../img/photos/london-night-sm.jpg"); --sec-pos: 50% 50% }

@media (max-width: 860px) {
  body[data-page="support"] .poster > section.machine { grid-template-columns: minmax(0, 1fr); grid-template-rows: none }
  body[data-page="support"] .machine > .section-lead,
  body[data-page="support"] .machine > ol.points { grid-column: 1; grid-row: auto }
  body[data-page="support"] .poster > section.machine:nth-child(2)::after,
  body[data-page="support"] .poster > section.machine:nth-child(3)::after { grid-column: 1; grid-row: auto; aspect-ratio: 16 / 9 }
}