/*
 * The Typekit service used to deliver these fonts is provided by Adobe and
 * is subject to https://www.adobe.com/products/eulas/tou_typekit.
 * Font license information from the saved source:
 * Montserrat: http://typekit.com/eulas/00000000000000007735a185
 *   http://typekit.com/eulas/00000000000000007735a18b
 *   http://typekit.com/eulas/00000000000000007735a18f
 *   http://typekit.com/eulas/00000000000000007735a197
 * Navigo: http://typekit.com/eulas/00000000000000003b9b01fb
 *   http://typekit.com/eulas/00000000000000003b9b01fd
 *   http://typekit.com/eulas/00000000000000003b9b01fe
 *   http://typekit.com/eulas/00000000000000003b9b01ff
 * © 2009-2026 Adobe Systems Incorporated. All Rights Reserved.
 */
@import url("https://use.typekit.net/oja6tol.css");


:root {
  --navy:#03152b;
  --navy-2:#062249;
  --blue:#004eff;
  --green:#80bc00;
  --paper:#fff;
  --mist:#f3f5f7;
  --text:#142131;
  --muted:#4c5867;
  --container:1140px;
  --header-height:110px;
  --body-font:montserrat,Arial,sans-serif;
  --heading-font:navigo,montserrat,Arial,sans-serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  color:var(--text);
  font:400 16px/1.65 var(--body-font);
  -webkit-font-smoothing:antialiased
}

img {
  display:block;
  max-width:100%
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit
}

a:focus-visible,button:focus-visible {
  outline:3px solid #9dd523;
  outline-offset:4px
}

.container {
  width:min(var(--container),calc(100% - 48px));
  margin-inline:auto
}

.section {
  position:relative;
  padding:90px 0
}

h1,h2,h3,h4,p {
  margin-top:0
}

h1,h2,h3,h4 {
  font-family:var(--heading-font);
  line-height:1.2
}

h1 {
  font-size:clamp(2.25rem,4.3vw,3.65rem);
  font-weight:700
}

h2 {
  font-size:clamp(1.9rem,3.2vw,2.8rem);
  font-weight:500
}

h3 {
  font-size:1.45rem;
  font-weight:500
}

.site-header {
  height:var(--header-height);
  position:fixed;
  z-index:1000;
  inset:0 0 auto;
  background:var(--navy);
  color:#fff;
  transition:height .3s ease,box-shadow .3s ease
}

.site-header.is-shrunk {
  height:110px;
  box-shadow:0 3px 10px rgba(0,0,0,.12)
}

.topbar {
  height:50px
}

.topbar-inner {
  height:100%;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:28px;
  font-size:.83rem
}

.topbar nav ul,.desktop-nav ul,.mobile-menu ul,.footer-bottom nav,.office-links {
  list-style:none;
  padding:0;
  margin:0
}

.topbar nav ul {
  display:flex;
  gap:25px
}
.topbar a,.desktop-nav a {
  transition:color .2s ease
}
.topbar a:hover,.desktop-nav a:hover {
  color:#a8d33d
}

.top-contact {
  display:flex;
  align-items:center;
  gap:7px
}
.top-contact .call-label {
  margin-left:12px
}

.header-main {
  height:calc(100% - 50px)
}
.site-header.is-shrunk .header-main {
  height:100%
}

.header-inner {
  height:100%;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding-bottom:21px
}

.site-header.is-shrunk .header-inner {
  align-items:center;
  padding-bottom:0
}

.brand {
  width:190px;
  display:inline-flex;
  align-items:center;
  flex:none
}
.brand-mark {
  width:100%;
  height:auto;
  display:block
}

.desktop-nav ul {
  display:flex;
  align-items:center;
  gap:31px
}
.desktop-nav li {
  font-size:.97rem;
  font-weight:300;
  white-space:nowrap
}
.desktop-nav a[aria-current="page"] {
  font-weight:500
}

.menu-toggle {
  display:none;
  width:36px;
  height:32px;
  padding:4px 0;
  border:0;
  background:transparent;
  color:#fff;
  appearance:none;
  cursor:pointer
}
.menu-toggle span {
  display:block;
  height:3px;
  background:#fff;
  margin:5px 0;
  border-radius:2px;
  transition:transform .2s ease,opacity .2s ease
}

.header-spacer {
  height:var(--header-height)
}
.site-header.is-shrunk~.header-spacer {
  height:var(--header-height)
}

.mobile-menu,.menu-backdrop {
  display:none
}

.hero {
  height:866px;
  max-height:calc(100vh - 55px);
  min-height:590px;
  position:relative;
  display:flex;
  align-items:center;
  color:white;
  background:var(--navy) url("../images/1920_1080_crop_homepage_hero2_1_BkTt5vk70J.webp") center/cover no-repeat
}

.hero-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,14,34,.77),rgba(0,20,46,.42) 58%,rgba(0,16,35,.63))
}

.hero-content {
  position:relative;
  padding-top:20px
}
.hero h1 {
  max-width:650px;
  margin-bottom:30px
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-weight:600;
  border-bottom:1px solid var(--green);
  padding-bottom:4px
}
.text-link span {
  color:#9bd325;
  font-size:1.45em;
  line-height:.8
}
.hero .text-link {
  font-size:1.03rem
}

.why {
  z-index:2;
  background:#fff;
  margin-top:-55px;
  padding-top:82px;
  padding-bottom:80px
}
.why-layout {
  display:grid;
  grid-template-columns:25% 1fr;
  gap:40px;
  align-items:start
}
.section-heading {
  padding-top:10px
}
.angle-heading {
  position:relative;
  display:inline-block;
  margin-bottom:36px
}
.angle-heading:after {
  content:"";
  position:absolute;
  left:0;
  bottom:-13px;
  width:72px;
  height:9px;
  border:2px solid #8bc329;
  border-top:0;
  transform:skewX(-42deg)
}
.reasons {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:31px
}
.reason {
  text-align:center;
  padding:0 3px
}
.reason img {
  width:92px;
  height:92px;
  object-fit:contain;
  margin:0 auto 19px
}
.reason h3 {
  margin-bottom:13px
}
.reason p {
  font-size:.94rem;
  line-height:1.65;
  margin:0;
  color:#303b48
}

.introduction {
  min-height:510px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#f5f6f8
}
.intro-photo {
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:43%;
  background:url("../images/1920_1080_fit_productshero_oiRFAK_HZ3.webp") center/cover no-repeat;
  clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)
}
.intro-layout {
  position:relative;
  z-index:1
}
.intro-copy {
  width:61%;
  max-width:720px;
  padding:8px 0
}
.intro-copy h2 {
  margin-bottom:26px;
  font-size:2rem
}
.angle-over {
  position:relative;
  padding-top:14px
}
.angle-over:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:70px;
  height:7px;
  border:2px solid #8bc329;
  border-bottom:0;
  transform:skewX(-40deg)
}
.intro-copy p {
  margin-bottom:19px;
  color:#37424f
}
.intro-copy p:last-child {
  margin-bottom:0
}

.services {
  background:var(--navy);
  padding:74px 0
}
.service-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:38px
}
.service-card {
  display:grid;
  grid-template-columns:44% 1fr;
  min-height:245px;
  background:#fff;
  color:var(--text);
  transition:transform .25s ease,box-shadow .25s ease
}
.service-card:hover {
  transform:translateY(-4px);
  box-shadow:0 15px 30px rgba(0,0,0,.2)
}
.service-image {
  overflow:hidden;
  min-height:245px
}
.service-image img {
  width:100%;
  height:100%;
  object-fit:cover
}
.service-copy {
  padding:29px 25px;
  align-self:center
}
.service-copy h2 {
  font-size:1.75rem;
  margin-bottom:12px
}
.service-copy p {
  margin-bottom:19px;
  line-height:1.5
}
.service-copy .text-link {
  font-size:.91rem
}

.clients {
  background:#f5f6f8;
  padding:77px 0 85px
}
.centered {
  display:block;
  width:max-content;
  margin:0 auto 46px
}
.client-logos {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px 42px;
  align-items:center
}
.client-logos img {
  width:100%;
  height:95px;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.84
}

.latest {
  padding:78px 0 90px;
  background:#fff
}
.article-card {
  display:grid;
  grid-template-columns:1fr 1fr;
  max-width:900px;
  margin:auto;
  box-shadow:0 8px 25px rgba(0,0,0,.11);
  background:white;
  transition:box-shadow .2s ease
}
.article-card:hover {
  box-shadow:0 13px 32px rgba(0,0,0,.18)
}
.article-card>img {
  width:100%;
  height:100%;
  min-height:285px;
  object-fit:cover
}
.article-copy {
  padding:34px 39px;
  align-self:center
}
.article-copy time {
  font-size:.85rem;
  color:#66717d
}
.article-copy h3 {
  font-size:1.8rem;
  margin:9px 0 13px
}
.article-copy p {
  line-height:1.6;
  margin-bottom:18px
}

.quick-enquiry {
  min-height:300px;
  display:flex;
  align-items:center;
  overflow:hidden;
  color:#fff;
  background:var(--navy) url("../images/1920_1080_fit_products_listing_light_DBvCuomewA.webp") center/cover no-repeat
}
.enquiry-shade {
  position:absolute;
  inset:0;
  background:rgba(1,19,42,.74)
}
.enquiry-content {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.enquiry-content h2 {
  font-size:2.5rem;
  margin:0
}
.button-link {
  display:inline-flex;
  gap:14px;
  align-items:center;
  padding:13px 26px;
  color:#fff;
  border:1px solid #fff;
  font-weight:600;
  transition:background .2s,color .2s
}
.button-link:hover {
  background:#fff;
  color:var(--navy)
}
.button-link span {
  font-size:1.25rem;
  color:#9bd325
}

.site-footer {
  background:var(--navy);
  color:white
}
.footer-main {
  min-height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.25)
}
.footer-brand {
  width:190px
}
.footer-social {
  display:flex;
  gap:25px;
  font-size:.92rem
}
.footer-social a:hover,.footer-bottom a:hover {
  color:#a8d33d
}
.footer-bottom {
  min-height:77px;
  display:flex;
  align-items:center;
  gap:23px;
  padding-top:14px;
  padding-bottom:14px;
  font-size:.75rem
}
.footer-bottom nav {
  display:flex;
  gap:18px;
  flex-wrap:wrap
}
.footer-bottom p {
  margin:0;
  white-space:nowrap
}

.legal-content .container { max-width:960px; }
.legal-content h2 { margin:40px 0 12px; color:var(--navy); font-size:1.45rem; font-weight:600; }
.legal-content h3 { margin:26px 0 8px; color:var(--navy); font-size:1.12rem; font-weight:600; }
.legal-content p { margin:0 0 16px; }
.legal-content ul { margin:0 0 18px; padding-left:24px; }
.legal-content li { padding-left:4px; margin:0 0 7px; }
.legal-table { width:100%; margin:18px 0 26px; border-collapse:collapse; }
.legal-table th,.legal-table td { border:1px solid #d7dce2; padding:12px; text-align:left; vertical-align:top; }
.legal-table th { background:#f1f3f5; color:var(--navy); }
@media(max-width:639.98px) { .legal-content { padding:36px 0 56px; } .legal-table { display:block; overflow-x:auto; } }


/* Single-row header after removing the secondary navigation bar */
.site-header { height:110px; }
.site-header.is-shrunk { height:92px; }
.topbar { display:none; height:0; }
.header-main { height:100%; }
.header-inner { align-items:center; padding-bottom:0; }
.site-header.is-shrunk .header-main { height:100%; }
.site-header.is-shrunk .header-inner { align-items:center; padding-bottom:0; }

.legal-content table { width:100%; margin:18px 0 26px; border-collapse:collapse; }
.legal-content th,.legal-content td { border:1px solid #d7dce2; padding:12px; text-align:left; vertical-align:top; }
.legal-content th { background:#f1f3f5; color:var(--navy); }
@media(max-width:639.98px) { .legal-content table { display:block; overflow-x:auto; } }

/* Contact page and client marks */
.clients {
  background:var(--navy);
  color:#fff;
}
.clients .angle-heading { color:#fff; }
.client-logos img {
  filter:none;
  opacity:1;
}

.page-title {
  padding:26px 0 12px;
  background:#fff;
}
.page-title h1 {
  margin:0;
  color:var(--navy);
}
.contact-intro {
  padding:42px 0 56px;
  background:#fff;
}
.contact-intro .container {
  max-width:1140px;
}
.contact-intro p {
  margin:0 0 12px;
  color:var(--text);
  line-height:1.7;
}
.contact-intro p:last-child { margin-bottom:0; }
.contact-office {
  min-height:350px;
  padding:70px 0 78px;
  overflow:hidden;
  background:#f3f5f7;
}
.contact-office .office-shade { display:none; }
.office-layout {
  position:relative;
  display:flex;
  justify-content:center;
}
.office-spacer { display:none; }
.office-details {
  width:min(100%,560px);
  color:var(--text);
}
.office-details h2 {
  margin:0 0 20px;
  color:var(--navy);
  font-size:clamp(1.8rem,3vw,2.35rem);
}
.office-details address {
  margin:0;
  font-style:normal;
  line-height:1.75;
}
.office-details address span { display:block; }
.office-links {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:26px;
}
.office-links li { margin:0; }
.office-links a {
  display:inline-flex;
  min-height:48px;
  align-items:center;
  gap:11px;
  padding:11px 18px;
  border:1px solid var(--navy);
  background:var(--navy);
  color:#fff;
  font-size:.94rem;
  font-weight:600;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.office-links a:hover {
  border-color:var(--navy-2);
  background:var(--navy-2);
}
.contact-icon {
  color:#9bd325;
  font-size:1.2rem;
  line-height:1;
}

@media(max-width:700px) {
  .clients { padding:60px 0 64px; }
  .client-logos { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px; }
  .client-logos img { height:78px; }
  .page-title { padding:22px 0 8px; }
  .contact-intro { padding:32px 0 42px; }
  .contact-office { min-height:0; padding:48px 0 54px; }
  .office-links { gap:10px; }
  .office-links a { min-height:46px; padding:10px 13px; }
}
@media(max-width:420px) {
  .office-links li,
  .office-links a { width:100%; max-width:100%; }
  .office-links a { white-space:normal; overflow-wrap:anywhere; }
}

/* Layout adjustments for phones and small tablets */
[hidden] { display:none !important; }
@media(max-width:800px) {
  :root { --header-height:88px; }
  .site-header,.site-header.is-shrunk { height:var(--header-height); }
  .site-header .header-main,.site-header.is-shrunk .header-main { height:100%; }
  .site-header .header-inner,.site-header.is-shrunk .header-inner { align-items:center; padding-bottom:0; }
  .header-spacer,.site-header.is-shrunk~.header-spacer { height:var(--header-height); }
  .brand,.footer-brand { width:160px; }
  .desktop-nav { display:none; }
  .menu-toggle { display:block; }
  .menu-backdrop:not([hidden]) {
    display:block;
    position:fixed;
    z-index:1001;
    inset:0;
    background:rgba(0,10,24,.62);
  }
  .mobile-menu {
    display:flex;
    position:fixed;
    z-index:1002;
    inset:0 0 0 auto;
    width:min(88vw,390px);
    min-height:100dvh;
    flex-direction:column;
    overflow-y:auto;
    padding:24px;
    background:var(--navy);
    color:#fff;
    box-shadow:-12px 0 32px rgba(0,0,0,.2);
    transform:translateX(105%);
    visibility:hidden;
    transition:transform .25s ease,visibility .25s;
  }
  .mobile-menu.is-open { transform:translateX(0); visibility:visible; }
  .mobile-menu-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:30px; }
  .mobile-menu-head .brand { width:155px; }
  .menu-close { border:0; padding:4px 8px; color:#fff; background:transparent; font-size:2rem; cursor:pointer; }
  .mobile-menu nav ul { display:grid; gap:0; }
  .mobile-menu nav a { display:block; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.2); font-size:1.12rem; }
  .mobile-menu-contact { display:grid; gap:5px; margin-top:28px; overflow-wrap:anywhere; }
  .mobile-menu-contact b:not(:first-child) { margin-top:14px; }
  .social-links { display:flex; flex-wrap:wrap; gap:18px; margin-top:24px; color:#d5e1ed; }
  body.menu-open { overflow:hidden; }
  .hero { height:auto; min-height:590px; max-height:none; padding:64px 0; background-position:58% center; }
  .hero-content { padding-top:0; }
  .hero h1 { max-width:600px; font-size:clamp(2.35rem,8vw,3.5rem); }
  .why { margin-top:-30px; padding:58px 0; }
  .why-layout { grid-template-columns:1fr; gap:30px; }
  .section-heading { padding-top:0; }
  .reasons { grid-template-columns:1fr; gap:34px; }
  .reason { max-width:520px; margin-inline:auto; }
  .introduction { min-height:0; padding:65px 0; }
  .intro-photo { width:100%; opacity:.12; clip-path:none; }
  .intro-layout { z-index:1; }
  .intro-copy { width:100%; max-width:720px; }
  .service-grid { grid-template-columns:1fr; gap:22px; }
  .service-card { grid-template-columns:minmax(120px,36%) 1fr; min-height:210px; }
  .service-image { min-height:210px; }
  .service-copy { padding:22px; }
  .service-copy h2 { font-size:1.45rem; }
  .article-card { grid-template-columns:1fr; }
  .article-card>img { height:220px; min-height:0; }
  .article-copy { padding:26px; }
  .enquiry-content { align-items:flex-start; flex-direction:column; gap:24px; }
  .enquiry-content h2 { font-size:2rem; }
  .footer-main { min-height:0; padding:28px 0; flex-wrap:wrap; gap:22px; }
  .footer-social { flex-wrap:wrap; gap:16px; }
  .footer-bottom { align-items:flex-start; flex-direction:column; gap:12px; }
  .footer-bottom p { white-space:normal; }
}
@media(max-width:480px) {
  .container { width:calc(100% - 36px); }
  .section { padding:58px 0; }
  .hero { min-height:540px; }
  .service-card { grid-template-columns:1fr; }
  .service-image { min-height:190px; height:190px; }
  .service-copy { padding:22px; }
  .footer-bottom nav { gap:10px 16px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}
