/* Awards rows: the original draggable carousel cut awards off on narrow screens.
   main.js only starts it on [data-laureate], so the rows now use
   [data-laureate-static] and wrap instead, showing every award in full. */
[data-laureate-static] .ow {
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 34px;
  row-gap: 40px;
}
@media (min-width: 1200px) {
  [data-laureate-static] .ow { column-gap: 100px; }
}

/* ---- Responsive pass (phone portrait, iPad portrait and landscape) ---- */

/* Body copy: no automatic hyphenation; headings set in balanced lines. */
p, h1, h2, h3 { -webkit-hyphens: manual; hyphens: manual; }
h1, h2, h3 { text-wrap: balance; }
/* Keep paragraphs to a readable line length on wide screens. */
p.Text_element { max-width: 680px; }

/* Team: the draggable carousel cut people off at the screen edge.
   main.js only starts it on [data-team], so the row is a wrapping grid now. */
[data-team-static] .ow {
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 24px;
  row-gap: 40px;
}
[data-team-static] .ok { width: calc(50% - 12px) !important; margin: 0 !important; }
@media (min-width: 768px) {
  [data-team-static] .ok { width: calc(33.333% - 16px) !important; max-width: 240px; }
}
@media (min-width: 1265px) {
  [data-team-static] .ok { width: calc(16.666% - 20px) !important; }
}
.Team_team .olf { display: none !important; }

/* Hero on phones: show the intro paragraph and the button under the heading,
   instead of only a button after the phone mock-up. */
@media (max-width: 559px) {
  .oco > .th > p.Text_element,
  .oco > .th > .pw.p_ { display: block !important; }
  .oco > .th > p.Text_element { margin-top: 20px; }
  .oco > .th > .pw.p_ { margin-top: 28px; }
  .oco > .tv.ds { display: none !important; }
}

/* Platform logo strip (Apple TV, Android TV, Roku...): two rows of three on phones. */
@media (max-width: 559px) {
  .ocm.oso { flex-wrap: wrap; row-gap: 28px; width: 100%; margin-left: 0; margin-right: 0; }
  .ocm.oso > * { flex: 0 0 33.333%; width: 33.333%; max-width: none; display: flex; justify-content: center; align-items: center; }
  .ocm.oso svg { height: 30px; width: auto; max-width: 90px; }
}

/* Client logos (Cently, Firstmark, Skillshare): one centred row on tablets. */
@media (min-width: 768px) {
  .u.olk { flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 64px; row-gap: 32px; }
  .u.olk > .tv { flex: 0 0 auto; max-width: none; width: auto; margin: 0; }
}

/* Header: 44px touch targets on phones. */
@media (max-width: 559px) {
  .osb > a.oiv { min-height: 44px; display: inline-flex; align-items: center; }
  .oua { min-height: 44px; display: flex; align-items: center; }
}

/* Vimeo platform tags: use the full width on tablets so they fit on one line. */
@media (min-width: 560px) and (max-width: 1199px) {
  .ocv.oah { max-width: none; }
}

/* Hero intro: same readable width on tablets as on desktop. */
.oco > .th > p.Text_element { max-width: 520px !important; }

/* Client logos on tablets: small enough for all three to share one row. */
@media (min-width: 768px) and (max-width: 1199px) {
  .u.olk { column-gap: 48px; }
  .u.olk img { width: auto; height: auto; max-width: 240px; max-height: 44px; }
}

/* Process intro on phones: smaller lead so it is not a screen-tall block. */
@media (max-width: 559px) {
  #our-process h2.olg { font-size: 22px; line-height: 1.4; }
}

/* Footer: with the address removed there are three items (logo, who, contact).
   One row on tablets and desktop; on phones the logo on top, the other two side by side. */
nav.u.osv { display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: 32px; }
nav.u.osv > * { margin-top: 0 !important; }
@media (min-width: 768px) {
  nav.u.osv { column-gap: 80px; }
  nav.u.osv > .tv { flex: 1 1 auto; max-width: none; width: auto; }
  nav.u.osv > .j { flex: 0 0 auto; max-width: none; width: auto; }
}
@media (max-width: 767px) {
  nav.u.osv > .tv { flex: 0 0 100%; max-width: 100%; }
  nav.u.osv > .j { flex: 0 0 50%; max-width: 50%; }
}