/* Zen2K Consulting — responsive refinements shared by every page. Loaded after each page's inline styles, so these rules win. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%
}

h1,
h2,
h3 {
  overflow-wrap: break-word
}

video {
  max-width: 100%
}

/* in-page links: stop the section just below the sticky nav */
section[id] {
  scroll-margin-top: 77px
}

/* nav: the dropdown spans the full screen and scrolls on short screens */
.nav .btn {
  white-space: nowrap
}

@media (max-width:1120px) {
  .nav .wrap {
    position: static
  }

  .nav ul {
    max-height: calc(100vh - 76px);
    max-height: calc(100dvh - 76px);
    overflow-y: auto
  }

  .nav ul li:last-child a {
    border-bottom: 0
  }
}

@media (max-width:520px) {
  .nav .wrap {
    gap: 10px
  }

  .nav .logo {
    gap: 8px
  }

  .nav .nav-right {
    gap: 8px
  }

  .nav .btn {
    padding: 0 12px
  }
}

@media (max-width:340px) {
  .nav .logo .mark {
    display: none
  }
}

/* wider side gutters once there is room for them */
@media (min-width:700px) {
  .band {
    padding-left: max(32px, env(safe-area-inset-left, 0px));
    padding-right: max(32px, env(safe-area-inset-right, 0px))
  }

  .nav ul {
    padding-left: max(32px, env(safe-area-inset-left, 0px));
    padding-right: max(32px, env(safe-area-inset-right, 0px))
  }
}

/* tighter vertical rhythm on phones */
@media (max-width:700px) {
  .sec {
    padding-block: 60px
  }

  .sec.tight {
    padding-block: 48px
  }

  .sec-head {
    margin-bottom: 32px
  }

  .lead {
    font-size: 18px
  }
}

/* inner page heroes: keep the photo from filling a tablet screen */
@media (max-width:880px) {
  .phero .ph {
    aspect-ratio: auto;
    height: min(380px, 56vw)
  }
}

/* home hero */
.hero-video.is-active .hero-video-overlay {
  pointer-events: none
}

@media (min-width:769px) and (max-width:1120px) {
  .hero-content {
    margin-left: 32px;
    padding-right: 32px
  }
}

@media (max-width:768px) {

  /* video only: the hero takes the film's own shape, so nothing is cropped */
  .hero-video {
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 16/9
  }

  .hero-video-overlay,
  .hero-eyebrow,
  .hero-content p,
  .hero-actions {
    display: none
  }

  /* off screen, but the page keeps its main heading for search engines and screen readers */
  .hero-content {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%)
  }

  /* small round play button, the only way to start the film with sound */
  .hero-video-toggle {
    right: 10px;
    bottom: 10px;
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center
  }

  .hero-video-toggle .video-label {
    display: none
  }
}

/* short, wide screens such as a phone held sideways */
@media (max-height:500px) {
  .hero-video {
    height: auto;
    min-height: 0;
    max-height: none
  }
}

/* touch screens have no hover, so a tap must not bring the button back over the film */
@media (hover:none) {
  .hero-video.is-active:hover .hero-video-toggle {
    opacity: 0;
    pointer-events: none
  }
}

/* team: keep the portrait beside the bio on tablets */
@media (min-width:600px) and (max-width:860px) {
  .leader {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 32px
  }

  .leader .ph {
    max-width: none
  }
}

/* home: industry tiles are narrow on phones, so long names need a smaller size */
@media (max-width:520px) {
  .tile h3 {
    font-size: 5vw
  }

  .tile .t {
    left: 12px;
    right: 12px;
    bottom: 12px
  }
}

/* programmes: on phones each schedule row becomes a labelled card, no sideways scrolling */
@media (max-width:600px) {

  .sched,
  .sched tbody,
  .sched tr,
  .sched td {
    display: block;
    min-width: 0;
    width: 100%
  }

  .sched thead {
    display: none
  }

  .sched tr {
    padding-block: 16px;
    border-bottom: 1px solid var(--rule)
  }

  .sched td {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px;
    padding: 4px 0;
    border: 0
  }

  .sched td:first-child {
    display: block;
    padding-bottom: 8px;
    font-weight: 700
  }

  .sched td:nth-child(n+2)::before {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.9
  }

  .sched td:nth-child(2)::before {
    content: "Duration"
  }

  .sched td:nth-child(3)::before {
    content: "City"
  }

  .sched td:nth-child(4)::before {
    content: "Date"
  }
}

/* contact form */
@media (max-width:640px) {
  .row21 {
    grid-template-columns: minmax(0, 1fr)
  }

  /* iOS zooms the page when a focused field is under 16px */
  .field input,
  .field select,
  .field textarea {
    font-size: 16px
  }
}

/* footer */
@media (max-width:560px) {
  footer .top>div:last-child {
    grid-column: 1/-1
  }

  footer ul {
    gap: 4px
  }

  footer ul a {
    display: inline-block;
    padding-block: 6px
  }

  footer ul li {
    padding-block: 4px
  }

  footer ul li:has(a) {
    padding-block: 0
  }
}