/* JMonay Management — written for this site, from measurements of the original.
   Nothing here was copied from anywhere: the numbers were read off the page
   (colours, type sizes, weights, spacing) and the rules written to match them. */

:root {
  --ink: #111111;          /* the page itself */
  --stage: #000000;        /* the bands that carry content */
  --floor: #0d0d0d;        /* the footer */
  --gold: #c6a45c;         /* headings, marks, rules */
  --white: #ffffff;
  --warm: #e9d8d8;         /* the softer white the service lines use */
  --cool: #f8fafc;         /* the footer's white */
  --shell: 1140px;         /* how wide the content runs */
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: Poppins, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1.7;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* Keyboard users get to the content without walking the whole menu. */
.skip {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip:focus {
  width: auto; height: auto;
  clip: auto; clip-path: none;
  left: 16px; top: 12px;
  z-index: 20;
  background: var(--gold); color: #000;
  padding: 8px 14px; border-radius: 4px;
  text-decoration: none;
}

/* ------------------------------------------------------------------ header */

.bar {
  background: #111111;
  position: relative;
  z-index: 10;
}

.bar__in {
  margin: 0 auto;
  padding: 0 30px;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

/* Three columns, 35 / 30 / 35, with the mark standing in the middle one. */
.bar__side {
  flex: 0 0 35%;
  display: flex;
  align-items: center;
  gap: 34px;
}
.bar__side--end { justify-content: flex-end; }

.bar__side a {
  font-family: Oswald, "Arial Narrow", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 1px;
  word-spacing: 1px;
  text-decoration: none;
  color: #ffffff;
  white-space: nowrap;
  transition: color .18s ease;
}
.bar__side a:hover,
.bar__side a:focus-visible { color: var(--gold); }

/* Their stylesheet lifts the mark 83px above the bar, which worked because a
   second header stood above it. There is only one header here, so the lift would
   push it off the top of the page: it stays in the row, at its own size. */
.bar__logo {
  flex: 0 0 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bar__logo img {
  width: 325px;
  height: 220px;
  object-fit: contain;
}

.bar__burger {
  display: none;
  width: 44px; height: 38px;
  margin-left: auto;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.bar__burger span {
  display: block;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
}
.bar__burger span + span { margin-top: 5px; }

/* ---------------------------------------------------------- sliding panel */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 40px 24px;
  overflow-y: auto;
}
.drawer[hidden] { display: none; }

.drawer__shut {
  position: absolute;
  top: 18px; right: 22px;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  color: #ffffff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

.drawer__logo { width: 96px; height: 65px; object-fit: contain; }

.drawer__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.drawer__nav a {
  font-family: Oswald, "Arial Narrow", system-ui, sans-serif;
  font-size: 56px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  color: #ffffff;
  transition: color .18s ease;
}
.drawer__nav a:hover,
.drawer__nav a:focus-visible { color: #c5a65e; }

@media (max-width: 900px) {
  .bar__side { display: none; }
  .bar__in { min-height: 84px; justify-content: space-between; }
  .bar__burger { display: block; }
  .drawer__nav a { font-size: 34px; }
}

/* ------------------------------------------------------------------- video */

.stage {
  background: var(--stage);
  padding: 66px 24px 60px;
}

.stage__frame {
  max-width: 1280px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #000;
}
.stage__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ------------------------------------------------------------- what we say */

.say {
  background: var(--stage);
  padding: 40px 24px 80px;
  /* The original's section height lands on a fraction and leaves a single
     row of page colour above the footer. This keeps that row. */
  margin-bottom: 1px;
  text-align: center;
}

.say__in { max-width: 1280px; margin: 0 auto; }

.gold {
  font-family: Oswald, "Arial Narrow", system-ui, sans-serif;
  font-size: 55px;
  font-weight: 700;
  line-height: 56px;
  color: var(--gold);
  margin: 0 0 20px;
}

/* Both paragraphs run in a 68% column, not the full 1280. */
.say__words { padding-top: 61px; }

.say__lead {
  width: 68%;
  margin: 0 auto 18px;
  line-height: 43px;
  letter-spacing: 1.7px;
  color: var(--white);
}

.say__lead strong { font-weight: 700; }

.say__body {
  width: 68%;
  margin: 0 auto 18px;
  line-height: 43px;
  letter-spacing: 1.7px;
  font-weight: 400;
  color: var(--white);
}

/* This heading is set on a taller line and inset 10px each side. */
.say__what {
  max-width: calc(100% - 20px);
  margin: 128px auto 30px;
  line-height: 68px;
}

.does { max-width: 1280px; margin: 0 auto; }

.does__one {
  margin: 0 0 18px;
  line-height: 40px;
  letter-spacing: 1.5px;
  font-weight: 400;
  color: var(--warm);
}

.does__one strong { font-weight: 700; }

/* ------------------------------------------------------------------ footer

   Built from the footer's own blueprint, not from a photograph of it: the
   widths below are the percentages the original carries (23.629 / 14.839 /
   30 / 25 of a 1240px row), and the type, colours and spacing are its own.
   The footer runs to 1280px — wider than the 1140px the page body uses. */

.foot { background: #0d0d0d; }

.foot__in {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.foot__cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  row-gap: 40px;
  column-gap: 30px;
  padding: 20px;
}

.foot__col { display: flex; flex-direction: column; flex: 0 0 auto; }

.foot__col--say   { width: 23.629%; padding: 10px; row-gap: 10px; }
.foot__col--links { width: 14.839%; row-gap: 15px; }
.foot__col--touch { width: 30%;     row-gap: 15px; }

/* Empty by design — see the note in the markup. */
.foot__col--tail  { width: 25%; padding: 10px 0 0 20px; }

.foot__note {
  margin: 0;
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 35px;
  color: var(--cool);
}

/* Filled squares with a soft corner, the mark in gold — not outlines. */
/* Laid out the way the original lays it out: inline boxes on a zero-height
   line, spaced by margin rather than gap. */
.foot__social { display: inline-block; font-size: 0; line-height: 0; }
.foot__social a + a { margin-left: 8px; }

/* Sized off the mark itself (1em at 23px) with half an em of air all
   round, the way the original builds the tile. */
.foot__social a {
  position: relative;
  font-size: 23px;
  width: 2em;
  height: 2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #111111;
  color: #c5a65e;
  line-height: 1;
  text-align: center;
  transition: background .18s ease, color .18s ease;
}
/* The mark is placed on whole pixels — 11px in from the tile edge — which is
   where the original paints it; centring it lands on a half pixel and the
   mark rasterises a pixel over. */
.foot__social svg { position: absolute; left: 11px; top: 11px; width: 1em; height: 1em; }
.foot__social a:hover,
.foot__social a:focus-visible { background: #c5a65e; color: #ffffff; }

/* The heading and its orange mark sit on one line, the mark to the left.
   The mark asks for a tenth of the column and gives ground to the words,
   which is why it is short beside ESSENTIAL LINKS and long beside GET IN
   TOUCH. */
.foot__head { display: flex; align-items: center; gap: 10px; }

.foot__rule {
  flex: 0 1 10%;
  height: 35px;
  display: flex;
  align-items: center;
}
.foot__rule::before {
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  background: #f97316;
}

.foot__title {
  flex: 0 1 auto;
  margin: 0;
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 68px;
  color: var(--cool);
}

.foot__list { margin: 0; padding: 0; list-style: none; }
.foot__list li { display: flex; align-items: flex-start; }
.foot__list li:not(:last-child)  { padding-bottom: 5px; }
.foot__list li:not(:first-child) { margin-top: 5px; }
/* This column's list shrinks to its own words, as the original's does. */
.foot__list--touch { align-self: flex-start; }
.foot__list--touch li:not(:last-child)  { padding-bottom: 7.5px; }
.foot__list--touch li:not(:first-child) { margin-top: 7.5px; }

/* The mark sits at the left of its 17.5px slot, not centred in it. */
.foot__bullet {
  flex: 0 0 17.5px;
  height: 26px;
  display: flex;
  align-items: center;
  color: #f97316;
}
.foot__bullet svg { width: 14px; height: 14px; display: block; }

.foot__list a {
  padding-left: 5px;
  font-family: Oswald, "Arial Narrow", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  text-decoration: none;
  color: var(--cool);
  transition: color .18s ease;
}
.foot__list a:hover,
.foot__list a:focus-visible { color: #c5a65e; }

/* A hairline the full width of the footer, with air either side of it. */
.foot__band { padding: 15px 0; }
.foot__band span { display: block; height: 1px; background: #f97316; }

.foot__tail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.foot__rights {
  width: 33%;
  margin: 0 0 18px;
  text-align: center;
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 1px;
  word-spacing: 1px;
  color: var(--cool);
}

/* ------------------------------------------------- the inner pages' header

   Same bar as the home page, in the darker colours the other pages use. */

.bar--inner { background: #0d0d0d; }
.bar--inner .bar__side a { color: var(--cool); }
.bar--inner .bar__side a:hover,
.bar--inner .bar__side a:focus-visible { color: #f97316; }

/* ------------------------------------------------------------ what we do */

.band {
  height: 600px;
  background: #0d0d0d center / cover no-repeat;
}
/* Matched to the client's page, where this band renders as flat colour. Their
   basketball photograph is in /assets/img/hero-what-we-do.jpg — uncomment the
   line below to show it. */
/* .band--wwd { background-image: url("/assets/img/hero-what-we-do.jpg"); } */

.intro { background: #0d0d0d; }

.intro__in {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 0;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.intro__mark {
  width: 512px;
  margin-right: 30px;
  text-align: center;
}
.intro__mark img { width: 62%; height: auto; display: block; margin: 0 auto; }

.intro__words {
  width: 640px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.intro__head {
  margin: 0;
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  color: var(--cool);
}

.intro__body {
  margin: 0 0 18px;
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: var(--cool);
}
.intro__body strong { font-weight: 700; }

.cards {
  background: #0d0d0d;
  padding: 0 10px;
  margin-bottom: 60px;
}

.cards__in {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.card {
  width: 31%;
  padding: 0 0 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #0d0d0d;
}

/* The pictures are held to a set height rather than their own proportions —
   that is how the original crops them. */
.card__pic { width: 100%; height: 391px; }
.card__pic--tall { height: 394px; }

.card__line,
.card__name {
  margin: 0;
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  color: var(--cool);
  text-align: center;
}

.card__line { font-size: 18px; font-weight: 700; line-height: 35px; }
.card__name { font-size: 35px; font-weight: 700; line-height: 35px; }

/* The second row is set smaller. */
.card--quiet .card__line { font-size: 16px; font-weight: 600; }
.card--quiet .card__name { font-size: 26px; }

.card__go { margin: 0; text-align: center; line-height: 26px; }

.btn {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid #c6a45c;
  border-radius: 5px;
  background: #f97316;
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--cool);
  text-decoration: none;
  transition: background .18s ease;
}
.btn__t { display: flex; justify-content: center; }
.btn:hover,
.btn:focus-visible { background: #000000; color: #ffffff; }

/* -------------------------------------------------------- make your move */

.lead {
  background: #0d0d0d center / cover no-repeat;
  height: 444px;
  padding: 0 10px;
  display: flex;
  align-items: center;
}
.lead--mym { background-image: url("/assets/img/hero-make-your-move.jpg"); }

.lead__in { max-width: 1280px; width: 100%; margin: 0 auto; }
.lead__box { padding: 10px; }

.lead__head {
  margin: 0 0 20px;
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 60px;
  font-weight: 700;
  line-height: 68px;
  color: var(--white);
}

.lead__body {
  margin: 0 0 18px;
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: var(--cool);
}

.touch { background: #0d0d0d; padding: 10px; }

.touch__in { max-width: 1280px; margin: 0 auto; }

.touch__head {
  margin: 0 0 20px;
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 68px;
  color: var(--gold);
}

/* The rows sit in a track five pixels wider each side, so each field's own
   padding brings it back to the column edge. */
.form {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px;
}

.field { width: 100%; padding: 0 5px; margin: 0 0 10px; }
.field--half { width: 50%; }

.field__label {
  display: block;
  width: fit-content;
  font-family: Roboto, "Segoe UI", system-ui, sans-serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 50px;
  color: var(--white);
}

.field__in {
  display: block;
  width: 100%;
  padding: 12px 24px;
  border: 1px solid #000000;
  border-radius: 0;
  background: #b5933b;
  font-family: Roboto, "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: #000000;
}
/* The hint text is the field's own colour at six tenths, not the browser grey. */
.field__in::placeholder { color: #000000; opacity: .6; }

.field__in--sel { height: 52px; padding: 12px 20px 12px 24px; }
.field__in--area { height: 130px; resize: vertical; }
.field__in--multi { height: 118px; }

.field--send { margin-bottom: 0; text-align: center; }

.send {
  padding: 12px 24px;
  border: 1px solid #f97316;
  border-radius: 0;
  background: #22c55e;
  font-family: Roboto, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--white);
  cursor: pointer;
}
/* The original keeps an empty slot for an icon, and the gap beside it is part
   of the button's width. */
.send__w { display: flex; justify-content: center; gap: 5px; }
.send__i { display: flex; }
.send__t { display: block; }
.send:hover, .send:focus-visible { background: #16a34a; }

.form__note {
  width: 100%;
  margin: 12px 5px 0;
  font-family: Roboto, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  color: var(--gold);
}

/* ---------------------------------------------------- event registration */

.er { background: #0d0d0d; }

.er__in {
  max-width: 95.748%;
  margin: 0 auto;
  padding: 70px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* The headings and the card share one centred column with no gap between the
   headings; the outer column is the one that spaces its own children. */
.er__stack {
  padding: 10px;
  margin-top: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.er__kicker,
.er__title {
  margin: 0;
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  line-height: 68px;
  text-align: center;
}
.er__kicker { font-size: 34px; color: var(--white); }
.er__title { font-size: 56px; color: var(--gold); }

.er__card {
  width: 60%;
  margin-top: 50px;
  padding: 60px;
  border-radius: 5px;
  background: #1a1a1a;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: center;
}

/* Native disclosure, no script: the browser already knows how to open these. */
.acc { margin: 0; }
.acc--sub { margin: 0 0 20px; }

.acc__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 25px;
  border: 1px solid #4a402a;
  background: #141414;
  cursor: pointer;
  list-style: none;
}
.acc__sum::-webkit-details-marker { display: none; }
.acc--sub > .acc__sum { padding: 15px; }

.acc__t {
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 26px;
  color: var(--gold);
}
.acc--sub > .acc__sum .acc__t { font-size: 20px; font-weight: 500; text-transform: uppercase; }

.acc__i { display: flex; align-items: center; color: var(--gold); }
.acc__i svg { width: 13px; height: 15px; }
.acc__minus { display: none; }
.acc[open] > .acc__sum .acc__minus { display: block; }
.acc[open] > .acc__sum .acc__plus { display: none; }

/* A column, so the paragraph margins do not collapse into the panels below
   them — the original keeps both. */
.acc__body {
  display: flex;
  flex-direction: column;
  padding: 27px 28px 16px;
  background: #141414;
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: var(--cool);
}
/* 10px on the panel and 10px on the block inside it. */
/* The second top-level panel is inset less than the first. */
.acc__body--wide { padding: 20px 20px 0; }

.acc__body--sub { padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.acc__body > .acc--sub:first-of-type { margin-top: 20px; }

.acc__body p { margin: 0 0 18px; }
.acc__body--sub p { margin: 0; }
/* Inside one block the paragraphs keep their own spacing. */
.acc__text p { margin: 0 0 18px; }
.acc__body strong { font-weight: 700; }
.acc__body ul { margin: 0 0 27px 54px; padding: 0; }
.acc__body li { margin: 0; }

.er__formhead,
.er__formsub {
  margin: 0;
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
}
.er__formhead { line-height: 23px; color: var(--gold); }
.er__formsub { line-height: 1px; color: #adadad; }

/* --------------------------------------------------- the work in motion */

.band--wim { background-image: url("/assets/img/hero-work-in-motion.webp"); }

.wim { background: #111111; padding: 10px; }

.wim__in {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tab__sum {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #d5d8dc;
  cursor: pointer;
  list-style: none;
}
.tab__sum::-webkit-details-marker { display: none; }

/* The mark sits before the words, and both are centred together. */
.tab__i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 30px;
  color: #cf9944;
}
.tab__i svg { width: 26px; height: 30px; }
.tab__minus { display: none; }
.tab[open] > .tab__sum .tab__minus { display: block; }
.tab[open] > .tab__sum .tab__plus { display: none; }

.tab__t {
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 26px;
  color: #cf9944;
}

.tab__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
}
.tab__body--mid { align-items: center; }

.wim__soon,
.wim__head {
  margin: 0;
  font-family: Oswald, "Arial Narrow", system-ui, sans-serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 68px;
}
.wim__soon { color: #ff0000; }
.wim__head { color: #cf9944; }

.wim__sub {
  margin: 0 0 18px;
  font-family: Oswald, "Arial Narrow", system-ui, sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 26px;
  color: #fff2f2;
}

/* Four to a row, each picture centred in its own quarter. */
.gal { display: flex; flex-wrap: wrap; margin: 0 0 27px; }
.gal__i { width: 25%; margin: 0; text-align: center; }
.gal__i img { display: block; margin: 0 auto; }

.wim__film { aspect-ratio: 16 / 9; background: #000; }
.wim__film iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------------------------- the picture viewer

   Opens over the page and walks the set. The measurements are the ones the
   original uses: a 20px close mark, 25px arrows in a fifteen-percent strip
   down each side, and a near-white that goes to full white on hover. */

.lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .8);
  --lb-ui: hsla(0, 0%, 93%, .9);
}
.lb[hidden] { display: none; }

/* The viewer fades up rather than appearing, over the .3s the original uses. */
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lbZoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.lb { animation: lbIn .3s both; }
.lb__fig { animation: lbZoom .3s both; }

@media (prefers-reduced-motion: reduce) {
  .lb, .lb__fig { animation: none; }
}

.lb__fig {
  margin: 0;
  max-width: 70%;
  max-height: calc(100% - 96px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb__img {
  max-width: 100%;
  max-height: calc(100vh - 96px);
  width: auto;
  height: auto;
  display: block;
}

.lb__shut {
  position: absolute;
  top: 13px;
  right: .75em;
  z-index: 2;
  padding: .25em;
  border: 0;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--lb-ui);
  cursor: pointer;
  transition: color .3s;
}
.lb__shut svg { width: 1em; height: 1em; display: block; }

.lb__go {
  position: absolute;
  top: 0;
  height: 100%;
  width: 15%;
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  color: var(--lb-ui);
  cursor: pointer;
  transition: color .3s;
}
.lb__go--prev { left: 0; }
.lb__go--next { right: 0; }
.lb__go svg { width: 1em; height: 1em; display: block; }
.lb__go[hidden] { display: none; }

.lb__shut:hover, .lb__shut:focus-visible,
.lb__go:hover, .lb__go:focus-visible { color: #ffffff; }

.lb__count {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color: var(--lb-ui);
}
.lb__count[hidden] { display: none; }

.gal__a { display: block; cursor: zoom-in; }

@media (max-width: 767px) {
  .lb__fig { max-width: 84%; }
  .lb__go { width: 18%; }
}

/* -------------------------------------------------------- entrance lift */

@keyframes riseIn {
  from { opacity: 0; transform: translate3d(0, 100%, 0); }
  to { opacity: 1; transform: none; }
}

.js-anim .rise { opacity: 0; }
.js-anim .rise.is-in { animation: riseIn 1.25s both; }

@media (prefers-reduced-motion: reduce) {
  .js-anim .rise { opacity: 1; }
  .js-anim .rise.is-in { animation: none; }
}

/* --------------------------------------------- the registration forms

   Not the same dress as the enquiry form on Make Your Move: these fields are
   white with a grey hairline, and their labels are gold. */

.rf {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px;
}

/* Sits inside a panel body whose paragraphs are margin-less, so it says so louder. */
.rf .rf__section {
  width: 100%;
  margin: 0 0 10px;
  padding: 0 5px;
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: var(--cool);
}

.rf__row { width: 100%; padding: 0 5px; margin: 0 0 10px; }

.rf__label {
  display: block;
  width: fit-content;
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  color: var(--gold);
}

.rf__in {
  display: block;
  width: 100%;
  height: 52px;
  padding: 12px 24px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  background: #ffffff;
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: #111111;
}
.rf__in::placeholder { color: #111111; opacity: 1; }
.rf__in--sel { padding: 12px 20px 12px 24px; }
.rf__in--area { height: 130px; resize: vertical; }
.rf__in[type="date"] { height: 54px; }

/* One choice to a line, the mark and its words on the same baseline. */
.rf__opts { display: flex; flex-direction: column; }
.rf__opt { display: block; line-height: 26px; }
.rf__opt input { width: 13px; height: 13px; margin: 0; accent-color: var(--gold); }
/* The gap after the mark is the space in the markup, not padding. */
.rf__opt label {
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: var(--cool);
}

.rf__row--send { margin-bottom: 0; }

.rf__send {
  width: 100%;
  padding: 12px 24px;
  border: 1px solid #f97316;
  border-radius: 0;
  background: #f97316;
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--white);
  cursor: pointer;
  transition: background .18s ease;
}
.rf__sendw { display: flex; justify-content: center; }
.rf__sendt { display: block; }
.rf__send:hover, .rf__send:focus-visible { background: #d95f0c; }

.rf .form__note { width: 100%; margin: 12px 5px 0; }

/* ------------------------------------------------------------------ narrow

   The page changes at the two widths the original changes at — 1024 and 767 —
   and the numbers below were read off the original at each of them. */

@media (max-width: 1024px) {
  .say { padding-left: 15px; padding-right: 50px; }
  .say__in { max-width: none; }

  /* The heading and the paragraphs stop stacking and sit side by side,
     the heading centred against the taller column of words. */
  .say__top { display: flex; align-items: center; gap: 20px; }
  .say__top > * { flex: 1 1 0; min-width: 0; }
  /* Side by side, the gap under the heading is the row gap, not its margin. */
  .say__top .gold { margin-bottom: 0; }
  .say__what { margin-top: 110px; }
  .say__lead, .say__body { width: 100%; }

  /* --- what we do --- */
  .band { height: 362px; }
  .intro { padding: 0 50px 0 15px; }
  .intro__in { flex-direction: column; gap: 20px; }
  .intro__mark { width: 100%; margin-right: 0; }
  .intro__mark img { width: 40%; }
  .intro__words { width: 100%; padding-bottom: 0; gap: 20px; }
  .card__pic, .card__pic--tall { height: 261px; }
  .card__line, .card--quiet .card__line { font-size: 12px; }
  /* --- make your move --- */
  .lead { height: 362px; }
  .lead__head { font-size: 45px; }
  .touch__head { font-size: 45px; }
}

@media (max-width: 767px) {
  .say { padding-left: 15px; padding-right: 15px; padding-bottom: 50px; }
  .say__top { display: block; }
  /* Paragraph spacing tightens here, as it does on the original. */
  /* The heading stacks again here, so its own margin sets the gap. */
  .say__top .gold { margin-bottom: 20px; }
  .say__words { padding-top: 42px; }
  .say__lead { margin-bottom: 16px; }
  .say__body { margin-bottom: 16px; }
  .does__one { margin-bottom: 16px; }
  .say__what { margin-top: 126px; }

  .gold { font-size: 28px; line-height: 44px; }
  .say__what { font-size: 30px; line-height: 48px; }

  .say__lead { width: 100%; font-size: 16px; line-height: 26px; letter-spacing: .2px; }
  .say__body { width: 100%; font-size: 16px; line-height: 26px; letter-spacing: .2px; }


  /* --- what we do --- */
  .band { height: 348px; }
  .intro { padding: 0 15px; }
  .intro__in { padding: 50px 0; }
  .intro__head { font-size: 28px; line-height: 44px; text-align: center; }
  .intro__body { font-size: 16px; line-height: 24px; text-align: center; margin-bottom: 10px; }
  .card { width: 100%; }
  .card__line, .card--quiet .card__line { font-size: 14px; line-height: 48px; }
  .card__name, .card--quiet .card__name { font-size: 40px; line-height: 48px; }
  /* --- make your move --- */
  .lead { height: 348px; }
  .lead__head { font-size: 30px; line-height: 37px; }
  .lead__body { font-size: 16px; line-height: 24px; margin-bottom: 16px; }
  .touch__head { font-size: 30px; line-height: 37px; }
  .field--half { width: 100%; }
  .field__label { font-size: 16px; line-height: 24px; }
  .field__in { height: 50px; font-size: 16px; }
  .field__in--sel { height: 50px; }
  .field__in--area { height: 122px; }
  .field__in--multi { height: 106px; }
  /* --- event registration --- */
  .er__in { max-width: 100%; }
  .er__kicker, .er__title { font-size: 40px; line-height: 48px; }
  .er__card { width: 100%; }
  .acc__t { font-size: 25px; line-height: 24px; }
  .acc--sub > .acc__sum .acc__t { font-size: 20px; line-height: 24px; }
  .acc__body { font-size: 16px; line-height: 24px; }
  .acc__body p { margin-bottom: 16px; }
  .acc__body ul { margin: 0 0 24px 48px; }
  .er__formhead, .er__formsub { font-size: 40px; line-height: 48px; }
  /* --- the registration forms --- */
  .rf .rf__section { font-size: 16px; line-height: 24px; }
  .rf__label { font-size: 16px; line-height: 24px; }
  .rf__in { height: 50px; font-size: 16px; line-height: 24px; }
  .rf__in--sel { height: 50px; }
  .rf__in--area { height: 122px; }
  .rf__in[type="date"] { height: 52px; }
  .rf__opt { line-height: 24px; }
  .rf__opt label { font-size: 16px; line-height: 24px; }

  /* --- the work in motion --- */
  .tab__t { line-height: 24px; }

  /* The service lines give up the centre and read from the left. */
  .does__one {
    font-size: 16px;
    line-height: 25px;
    letter-spacing: .2px;
    text-align: left;
  }
}

/* The footer changes at the two widths the original changes at, 1024 and 767,
   rather than at the page's own 900/560 — its columns are its own. */

@media (max-width: 1024px) {
  .foot__in { padding: 80px 50px 80px 15px; }
  .foot__cols { justify-content: center; padding: 0; }
  .foot__col--say,
  .foot__col--links,
  .foot__col--touch,
  .foot__col--tail { width: 48%; }
  .foot__tail { flex-direction: row; justify-content: center; }
}

@media (max-width: 767px) {
  .foot__in { padding: 50px 15px; align-items: flex-start; }
  /* The three bands still run the full width once they stop sharing a line. */
  .foot__cols, .foot__band, .foot__tail { width: 100%; }
  .foot__cols { flex-direction: column; align-items: flex-start; padding: 0; }
  .foot__col--say,
  .foot__col--links,
  .foot__col--touch,
  .foot__col--tail { width: 100%; }
  .foot__col--links,
  .foot__col--touch,
  .foot__col--tail { padding: 0; }

  .foot__note { font-size: 16px; line-height: 32px; }
  .foot__social a { width: 36px; height: 36px; }
  .foot__social svg { width: 18px; height: 18px; }
  .foot__title { line-height: 48px; }
  .foot__list a { font-size: 16px; line-height: 24px; }
  .foot__bullet { height: 24px; }

  .foot__tail { flex-direction: column; align-items: center; }
  .foot__rights { width: 100%; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}