@font-face {
  font-family: Manrope;
  src: url("assets/manrope-regular.ttf") format("truetype");
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("assets/manrope-bold.ttf") format("truetype");
  font-weight: 600 800;
  font-display: swap;
}
@font-face {
  font-family: Oswald;
  src: url("assets/oswald-semibold.ttf") format("truetype");
  font-weight: 500 800;
  font-display: swap;
}
:root {
  --body: Manrope, Arial, sans-serif;
  --heading: Oswald, "Arial Narrow", Arial, sans-serif;
  --paper: #f7f8fa;
  --ink: #0d1015;
  --blue: #2878f0;
  --muted: #68717e;
  --line: #dce1e8;
}
body {
  font-size: 16px;
  line-height: 1.7;
}
.utility {
  background: #090b0e;
  color: #b6bdc8;
  font-size: 12px;
}
.header {
  background: #fff;
  border-color: #e6e9ee;
}
.navigation {
  min-height: 108px;
}
.brand {
  gap: 14px;
}
.brand img {
  width: 65px;
  height: 78px;
  object-fit: contain;
}
.wordmark {
  font-size: 35px;
  letter-spacing: 1px;
}
.wordmark > span {
  font-size: 9px;
  letter-spacing: 1.7px;
}
.navigation nav {
  font-size: 13px;
  gap: 28px;
}
.button {
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.1px;
  gap: 20px;
  transition:
    background 0.25s,
    transform 0.25s,
    box-shadow 0.25s;
}
.button:hover {
  box-shadow: 0 8px 22px #2878f020;
}
.button-outline {
  background: transparent;
}
.button-neutral {
  color: var(--ink);
}
.hero {
  min-height: 690px;
  background: #080b10;
}
.hero-image {
  object-position: center 54%;
  filter: none;
}
.hero-shade {
  background:
    linear-gradient(90deg, #070b12eb 0%, #070b1299 48%, #070b121a 100%),
    linear-gradient(0deg, #070b12bb, transparent 45%);
}
h1 {
  font-size: clamp(3.8rem, 5.8vw, 5.7rem);
  line-height: 1.1;
  letter-spacing: -1.8px;
  max-width: 1000px;
}
h1 > span {
  color: #66a6ff;
}
.hero-content {
  padding-block: 82px 70px;
}
.hero-description {
  font-size: 17px;
  color: #d0d6e1;
  line-height: 1.8;
}
.hero-bottom {
  color: #a3adbb;
  letter-spacing: 1.5px;
}
.hero-bottom a {
  color: #fff;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
}
.sector-band {
  background: #0d1015;
  color: #d8dfe9;
  border-top: 1px solid #ffffff1c;
  padding: 27px 0;
}
.sectors > span {
  color: #aab3c1;
  font-size: 13px;
}
.sectors p {
  font-size: 18px;
  letter-spacing: 1px;
}
.sectors i {
  color: #2878f0;
  opacity: 1;
}
.section {
  padding-block: 105px;
}
h2 {
  font-size: clamp(2.4rem, 3.8vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -0.7px;
}
.section-heading > p {
  font-size: 15px;
  line-height: 1.9;
}
.service-image {
  aspect-ratio: 1.4;
}
.service-image > img {
  filter: none;
  transition: transform 0.7s cubic-bezier(0.2, 0.65, 0.25, 1);
}
.service-number {
  background: #fff;
  color: #1e67d2;
}
.service-content h3 {
  font-size: 1.55rem;
}
.service-content > p {
  font-size: 14px;
  line-height: 1.85;
  min-height: 100px;
}
.service-content > a {
  font-size: 12px;
  gap: 8px;
}
.service-content > a .icon {
  transition: transform 0.25s;
}
.service-content > a:hover .icon {
  transform: translateX(4px);
}
.detail-image img {
  object-position: center 85%;
}
.about {
  background: #0d1015;
  color: #f7f8fa;
  padding: 95px 0;
}
.about-brand-panel {
  background: #edf1f7;
  color: #151a23;
  align-items: center;
  text-align: center;
  padding: 40px;
  min-height: 470px;
  border-bottom: 3px solid var(--blue);
}
.about-brand-panel > img {
  width: 230px;
  height: 255px;
  object-fit: contain;
  margin-bottom: 24px;
}
.about-brand-panel > span {
  color: #5c6a7e;
}
.about-brand-panel > p {
  font-size: 31px;
}
.about-copy h2 {
  font-size: clamp(2.2rem, 3.2vw, 3rem);
}
.about-copy > p:not(.eyebrow) {
  font-size: 14px;
  line-height: 1.9;
  color: #9ca8ba;
}
.about-copy .eyebrow {
  color: #6da9ff;
}
.about-signoff {
  border-color: #2b3442;
  font-size: 13px;
}
.steps h3 {
  font-size: 22px;
  line-height: 1.3;
}
.steps p {
  font-size: 14px;
  line-height: 1.9;
}
.steps article > span {
  color: #2878f0;
}
.contact {
  background: #080b10;
}
.contact h2 {
  font-size: clamp(3.6rem, 5.8vw, 5.4rem);
}
.contact h2 span {
  color: #66a6ff;
}
.contact h2 + p {
  font-size: 15px;
  color: #abb5c4;
}
.contact-details {
  border-color: #2a3444;
}
.contact-details span {
  color: #8795aa;
  font-size: 11px;
}
.contact-details a,
.contact-details p {
  font-size: 17px;
}
.footer {
  background: #fff;
}
.footer-main > p {
  font-size: 12px;
}
.footer-bottom {
  font-size: 10px;
}
.footer .brand img {
  width: 50px;
  height: 60px;
}
.footer .wordmark {
  font-size: 29px;
}
.dialog-inner h2 {
  font-size: 34px;
}
.form-intro {
  font-size: 14px;
}
.form-note {
  font-size: 12px;
}
.honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#enquiry-error {
  font-size: 13px;
  color: #a73131;
  line-height: 1.6;
  margin-top: 15px;
}
#enquiry-result > p {
  font-size: 14px;
  color: #637086;
  margin-top: 16px;
}
#enquiry-result .success-kicker {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #1f64c9;
  margin-top: 28px;
}
#enquiry-result h3 {
  font-size: 28px;
  margin-top: 14px;
}
#another-enquiry {
  margin-top: 25px;
}
button:disabled {
  opacity: 0.55;
  cursor: wait;
  transform: none;
}
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.2, 0.65, 0.25, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.service-card:nth-child(2) {
  transition-delay: 0.1s;
}
.service-card:nth-child(3) {
  transition-delay: 0.2s;
}
.hero-content {
  animation: hero-enter 0.9s ease both;
}
.hero-image {
  animation: photo-enter 1.2s ease both;
}
@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes photo-enter {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
@media (max-width: 1050px) {
  .navigation nav {
    gap: 18px;
  }
  .brand img {
    width: 58px;
    height: 68px;
  }
  .wordmark {
    font-size: 30px;
  }
  .contact-details a {
    font-size: 15px;
  }
  .service-content > a {
    font-size: 11px;
  }
}
@media (max-width: 760px) {
  .navigation {
    min-height: 88px;
  }
  .brand img {
    width: 48px;
    height: 60px;
  }
  .wordmark {
    font-size: 29px;
  }
  .wordmark > span {
    font-size: 8px;
    letter-spacing: 1.35px;
  }
  .hero {
    min-height: 650px;
  }
  .hero-content {
    padding-top: 76px;
    padding-bottom: 58px;
  }
  h1 {
    font-size: clamp(2.7rem, 9.7vw, 4.5rem);
    letter-spacing: -1px;
  }
  .hero-description {
    font-size: 15px;
  }
  .hero-shade {
    background:
      linear-gradient(90deg, #070b12e0, #070b1270),
      linear-gradient(0deg, #070b12bb, transparent);
  }
  .hero-image {
    object-position: 60% center;
  }
  .hero-actions .button {
    font-size: 12px;
  }
  .section {
    padding-block: 66px;
  }
  .service-content > p {
    min-height: 0;
  }
  .service-content > a {
    font-size: 12px;
  }
  .sector-band {
    padding: 22px 0;
  }
  .sectors p {
    font-size: 18px;
  }
  .sectors i {
    margin-inline: 12px;
  }
  .about {
    padding: 65px 0;
  }
  .about-brand-panel {
    min-height: 360px;
    padding: 30px;
  }
  .about-brand-panel > img {
    width: 180px;
    height: 205px;
  }
  .about-copy h2 {
    font-size: 2.5rem;
  }
  .contact h2 {
    font-size: 3.8rem;
  }
  .contact-details a {
    font-size: 16px;
  }
  .dialog-inner h2 {
    font-size: 29px;
  }
  .footer-main > p {
    font-size: 12px;
  }
  .hero-bottom {
    font-size: 9px;
  }
  .hero-bottom a {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
  .hero-content,
  .hero-image {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}
.credits-eyebrow {
  margin-top: 45px;
}
.whatsapp-chat {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border: 1px solid #ffffff30;
  border-radius: 999px;
  background: #087c48;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 5px 18px #062b2833;
  transition: background .2s ease, transform .2s ease;
}
.whatsapp-chat svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.whatsapp-chat:hover { background: #056239; transform: translateY(-2px); }
.whatsapp-chat:focus-visible { outline: 3px solid #2473dc; outline-offset: 4px; }
.footer { padding-bottom: 90px; }
@media (max-width: 600px) {
  .whatsapp-chat { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); padding: 12px 16px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .whatsapp-chat { transition: none; } .whatsapp-chat:hover { transform: none; } }