/* Hosting migration and small-screen resilience overrides. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Keep the main wordmark proportional within the 70px navigation bar. */
.brand:not(.home) {
  display: flex;
  align-items: center;
  height: 70px;
  max-width: calc(100vw - 140px);
}

.brand:not(.home) .image {
  float: none;
  width: auto;
  max-width: min(300px, calc(100vw - 160px));
  height: 50px;
  margin: 0;
  object-fit: contain;
}

/* Vertically centre the About page copy beside its paired photographs. */
.columns-2.about-us {
  align-items: center;
}

/* Remove the old viewport-height constraints that created empty space. */
#Contact-Us-END.section-div._3,
#Contact-Us-END .div-block-12,
#Contact-Us-END .div-block-11,
#Contact-Us-END .div-block-10 {
  height: auto;
  min-height: 0;
}

#Contact-Us-END .div-block-12,
#Contact-Us-END .div-block-11 {
  padding-top: 28px;
  padding-bottom: 28px;
}

#Contact-Us-END .div-block-11.or {
  padding-top: 12px;
  padding-bottom: 12px;
}

#Contact-Us-END .div-block-12.what-happened {
  display: flex;
  flex-direction: column;
}

#Contact-Us-END .div-block-12.what-happened > .div-block._2 {
  flex: none;
  align-self: flex-start;
  width: 12px;
  min-width: 12px;
  max-width: 12px;
  background-color: #333;
}

#Contact-Us-END .div-block-12.what-happened > .div-block-7 {
  align-self: flex-start;
  width: 100%;
  text-align: left;
}

#Contact-Us-END .grid-2 {
  flex: 1;
  align-content: space-evenly;
}

@media screen and (max-width: 991px) {
  #Contact-Us-END .div-block-12.what-happened {
    display: block;
  }

  #Contact-Us-END .grid-2 {
    align-content: start;
  }
}

@media screen and (max-width: 479px) {
  .container,
  .section-div,
  .section-div._3,
  .section-div-50 {
    width: 100%;
    min-width: 0;
  }

  .columns._2 {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .div-block-3 {
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
  }

  .heading,
  .heading-2 {
    max-width: 100%;
    font-size: clamp(28px, 10vw, 40px);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .heading-2._2000.contact {
    line-height: 1.15;
  }

  .brand:not(.home) .image {
    width: auto;
    max-width: calc(100vw - 150px);
    height: 44px;
  }

  #Contact-Us-END .div-block-12,
  #Contact-Us-END .div-block-11 {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  img,
  iframe,
  video {
    max-width: 100%;
  }
}

/* Contact form: department selector, Turnstile and privacy line. */
.form-2 .bo-department {
  height: auto;
  min-height: 38px;
  color: #333;
}

.form-2 .bo-turnstile {
  margin: 10px 0;
  min-height: 65px;
}

.form-2 .bo-privacy {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: #333;
}

.form-2 .bo-privacy a {
  color: #111;
  text-decoration: underline;
}

/* Privacy notice page. */
.bo-legal {
  max-width: 820px;
  margin: 0 auto;
  padding: 120px 24px 64px;
  color: #333;
  font-size: 16px;
  line-height: 1.65;
}

.bo-legal h1 { font-size: 36px; line-height: 1.2; margin: 0 0 8px; }
.bo-legal h2 { font-size: 20px; line-height: 1.3; margin: 32px 0 8px; }
.bo-legal ul { padding-left: 20px; }
.bo-legal a { color: inherit; text-decoration: underline; }

/* Footer legal lines, added 25 September 2026.
   The registered name and registration number are required on notices and other
   official publications of the company, including in electronic format, under
   section 32(4) of the Companies Act 71 of 2008.

   .footer is display:flex with flex-wrap:nowrap, so extra paragraphs lay out in
   a row beside the copyright. The paragraphs are themselves flex containers,
   which also swallows the whitespace between a text node and an inline link.

   Do NOT put a max-width on these lines. Max-width overrides flex-basis, so the
   items stay narrow enough to sit on one row and never wrap. They must be full
   width to force the wrap; the text is centred, so it does not stretch anyway. */
.footer {
  flex-wrap: wrap;
  padding-bottom: 18px;
}

.footer .bo-legalline {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  margin: 6px 0 0;
  padding: 0 16px;
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
  opacity: 0.75;
}

.footer .bo-legalline a {
  color: inherit;
  text-decoration: underline;
}