:root {
  --paper: #fbfaf7;
  --ink: #0e2a47;
  --muted: #5f6978;
  --orange: #d4af37;
  --heading: 'Montserrat', Arial, sans-serif;
  --body: 'Inter', Arial, sans-serif;
}

.brand-logo { display: block; width: 190px; height: auto; }
.footer .brand-logo { width: 145px; }
.footer > div > a { display: block; }
.contact-address, .footer address { font-size: 10px; font-style: normal; letter-spacing: .08em; color: #c3d0cc; margin: -8px 0 18px; }
.footer address { margin: 5px 0 0; color: var(--muted); letter-spacing: .04em; }
.parent-brand { color: var(--orange); }

/* Let the hero annotation sit directly on the technical drawing. */
.visual-note {
  background: transparent;
  box-shadow: none;
  color: var(--paper);
}

.visual-note div > span {
  color: #d3dfdc;
}

.hero-photo {
  object-fit: cover;
  object-position: 62% center;
  transform: none;
}

.header nav > a:not(.nav-cta):hover,
.text-link:hover {
  color: #a47d16;
}

.button:hover {
  background: #e3c45c;
}

.note-icon {
  color: #b88b18;
}

.process-grid article > span {
  color: #b88b18;
}

.about-statement em,
details[open] summary {
  color: #a47d16;
}

.enquiry-placeholder button {
  background: var(--orange);
  color: #182e38;
  cursor: pointer;
  transition: background .2s, transform .2s;
}

.enquiry-placeholder button:hover {
  background: #e3c45c;
  transform: translateY(-2px);
}

.header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: transparent;
  box-shadow: none;
  transition: background .2s ease, box-shadow .2s ease;
}

.header.is-scrolled {
  background: rgb(247 246 240 / 96%);
  box-shadow: 0 2px 10px #1833420d;
}

@media (max-width: 580px) {
  .hero-photo {
    width: 100%;
    transform: none;
  }

  .header {
    min-height: 74px;
    padding: 13px 22px;
    gap: 14px;
  }

  .brand-logo {
    width: 148px;
  }

  .wrap {
    padding-left: 22px;
    padding-right: 22px;
  }

  h1, h2, h3 {
    letter-spacing: -0.03em;
  }

  .hero h1 {
    font-size: clamp(38px, 11vw, 48px);
    line-height: 1.1;
  }

  .hero-intro,
  .section-heading > p,
  .body-copy {
    line-height: 1.7;
  }

  .markets > div {
    flex-wrap: wrap;
    row-gap: 9px;
  }

  .role-card,
  .role-card h3,
  .role-card li {
    overflow-wrap: normal;
    word-break: normal;
  }

  .footer .brand-logo {
    width: 130px;
  }
}