.issue { border:2px solid red;background:#ffcccc;padding:10px;color:#000;}

:root {
  --black: #000000;
  --white: #ffffff;
  --grey: #f4f4f4;

--blue: #154194;
--green: #337733;
--red: #e2000a;
--yellow: #ffba00;

--dead-blue-light: #c5d6f0;
--dead-green-light: #b8d8b8;
--dead-red-light: #f4c5c5;
--dead-yellow-light: #ffe6a0;

--blue-light: #dce8fa;
--green-light: #d0ead0;
--red-light: #f9dfdf;
--yellow-light: #fff0b6;

  --grey-dark: #dddddd;

  --text-dark: #1c1c1c;
  --text-muted: #555555;
  --radius-large: 18px;
  --radius-medium: 12px;
  --radius-small: 6px;
  --shadow: 0 12px 30px rgba(0,0,0,0.08);
  --shadow-strong: 0 20px 40px rgba(0,0,0,0.2);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body
    {
    margin: 0;
    font-family: "Lato", system-ui, -apple-system, sans-serif;
    color: var(--text-dark);
    font-size: 16px;
    line-height: 1.4;
    }

input[type=text], textarea { font-family: inherit; color: inherit; }

a { text-decoration: none; color: inherit; }

h1 { font-size: 3.0rem; }   /* 16*3.0 = 48px */
h2 { font-size: 2.625rem; font-weight: 900; line-height: 1.3; } /* 16*2.625 = 42px */
h3 { font-size: 1.125rem; font-weight: 700; } /* 16*1.125 = 18px */
h4 { font-size: 1.0rem; }   /* 16*1.0 = 16px */

.blue svg, .blue h2 { color: var(--blue); }
.green svg, .green h2 { color: var(--green); }
.red svg, .red h2 { color: var(--red); }
.yellow svg, .yellow h2 { color: var(--yellow); }

p.blue, span.blue { color: var(--blue); font-weight: bold; }
p.green, span.green { color: var(--green); font-weight: bold; }
p.red, span.red { color: var(--red); font-weight: bold; }
p.yellow, span.yellow { color: var(--yellow); font-weight: bold; }


section
    {
    width: 100%;
    background-color: #fff;
    padding: 0 20px;
    }

section > div
    {
    max-width: 1200px;
    margin: 0 auto;      /* centers horizontally */
    padding: 20px 0;
    }

ul { list-style: none; padding: 0; margin: 0; }

.bg-white { background: var(--white); color: var(--black); }
.bg-grey { background: var(--grey); color: var(--black); }

.bg-blue { background: var(--blue); color: var(--white); }
.bg-green { background: var(--green); color: var(--white); }
.bg-red { background: var(--red); color: var(--white); }
.bg-yellow { background: var(--yellow); color: var(--white); }

.bg-blue-frame > div { background: var(--blue); border-radius: var(--radius-large); color: var(--white); padding: 30px; margin-bottom: 30px; }
.bg-blue-frame h2, .bg-blue-frame p { text-align: center; color: var(--white) !important; }
.bg-blue-frame ul[class^="icons-"] li > div { background: none !important; }
.bg-blue-frame ul[class^="icons-"] svg { stroke: var(--yellow) !important; padding: 0; background: none; }

.bg-yellow ul[class^="icons-"] li > div { background: var(--white) !important; }
.bg-yellow ul[class^="icons-"] svg { stroke: var(--yellow) !important; background: var(--white); }

.bg-green-sprout { background: #759a40; color: var(--white); }
.bg-green-sprout > div { background: url(/assets/images/icon-sprout.png) left 40px bottom no-repeat; background-size: auto 80%; }
.bg-green-sprout h2, .bg-green-sprout p { color: var(--white); }
@media(max-width:500px) {
.bg-green-sprout > div { background-size: auto 30%; }
}


.edit-bg-white { background: var(--white); }
.edit-bg-grey { background: var(--grey); }

.edit-bg-blue { background: var(--blue); color: var(--white); }
.edit-bg-green { background: var(--green); color: var(--white); }
.edit-bg-red { background: var(--red); color: var(--white); }
.edit-bg-yellow { background: var(--yellow); color: var(--white); }

.edit-bg-blue-frame { background: var(--blue); color: var(--white); }

.edit-bg-green-sprout { background: #759a40; color: #fff; }
.edit-bg-green-sprout { background: #759a40 url(/assets/images/icon-sprout.png) left 40px bottom no-repeat; background-size: auto 80%; }

.bg-blue-pattern { background:#224488 url(/assets/images/section-background.webp) repeat; color:#fff; }

.edit-bg-blue-gradient { background:linear-gradient(to right, #1a469a, #659bf7); color:#fff; }
.bg-blue-gradient { background:linear-gradient(to right, #1a469a, #659bf7); color:#fff; }
section.bg-blue-gradient { background: linear-gradient(to right, #1a469a 50%, #659bf7 50%); }
section.bg-blue-gradient > div { background: linear-gradient(to right, #1a469a, #659bf7); }

.edit-bg-red-gradient { background:linear-gradient(to right, #e51925, #f7b5b9); color:#000; }
.bg-red-gradient { background:linear-gradient(to right, #e51925, #f7b5b9); color:#000; }
section.bg-red-gradient { background: linear-gradient(to right, #e51925 50%, #f7b5b9 50%); }
section.bg-red-gradient > div { background: linear-gradient(to right, #e51925, #f7b5b9); }

.edit-bg-yellow-gradient { background:linear-gradient(to right, #fbc015, #fff0b6); color:#000; }
.bg-yellow-gradient { background:linear-gradient(to right, #fbc015, #fff0b6); color:#000; }
section.bg-yellow-gradient { background: linear-gradient(to right, #fbc015 50%, #fff0b6 50%); }
section.bg-yellow-gradient > div { background: linear-gradient(to right, #fbc015, #fff0b6); }

section.bg-blue h2, section.bg-blue p { color: var(--white); }
section.bg-green h2, section.bg-green p { color: var(--white); }
section.bg-red h2, section.bg-red p { color: var(--white); }
section.bg-yellow h2, section.bg-yellow p { color: var(--white); }

section.bg-blue-gradient h2, section.bg-blue-gradient p { color: var(--black); }
section.bg-green-gradient h2, section.bg-green-gradient p { color: var(--black); }
section.bg-red-gradient h2, section.bg-red-gradient p { color: var(--black); }
section.bg-yellow-gradient h2, section.bg-yellow-gradient p { color: var(--black); }



section > div > h2 { text-align: center; color: var(--blue); margin-bottom: 20px; }
section > div > p { text-align: center; font-size: 1.2rem; margin-bottom: 20px; }

/* our team */

div.ourTeam { margin: 0 auto; text-align: center; }
.ourTeam div { text-align: center; display: inline-block; width: 240px; padding-bottom: 30px;}
.ourTeam div img { display: block; border-radius: 50%; border: 8px solid #fff; width: 160px; height: 160px; margin: 22px 32px; }
.ourTeam h6.name { color: var(--blue); font-weight: bold; font-size: 1.2rem; }
.ourTeam h6.role { color: #000; font-size: 1rem; }
span.yellow { color: var(--yellow); font-weight: bold; }
span.red { color: var(--red); font-weight: bold; }

/* our team */

div.ourTeam { margin: 0 auto; text-align: center; }
.ourTeam div { text-align: center; display: inline-block; width: 240px; padding-bottom: 30px;}
.ourTeam div img { display: block; border-radius: 50%; border: 8px solid #fff; width: 160px; height: 160px; margin: 22px 32px; }
.ourTeam h6.name { color: var(--blue); font-weight: bold; font-size: 1.2rem; }
.ourTeam h6.role { color: #000; font-size: 1rem; }


/* bees */
.bees { margin: 0 auto; text-align: center; }
.bees img { width:80px;height:80px;padding:10px;border:3px dashed var(--yellow);background:#fae58e;margin:5px;border-radius:var(--radius-large); }
.honeypot { width:80px;height:80px; }
.honeycomb { width:80px;height:80px; }

/* awards */

.awards { margin: 0 auto; text-align: center; }
.awards img { width:150px;padding:10px;border-radius:var(--radius-medium);background:#fff;margin:10px; vertical-align: top; }

/* Timeline */

.timeline { position: relative; max-width:1000px; margin:0 auto; padding:40px 20px 1px 20px; }
/* Vertical line */
.timeline::before { content:''; position:absolute; top:0; bottom:0; left:50%; width:3px; background:#000; transform:translateX(-50%); z-index:1; }
/* Timeline item wrapper */
.timeline > div { display: flex; justify-content: flex-start; position: relative; margin-bottom:30px; }
/* Alternate sides */
.timeline > div:nth-child(odd) { flex-direction: row; }
.timeline > div:nth-child(even) { flex-direction: row-reverse; }
/* Circle */
.timeline > div::after { content:''; position:absolute; top:25px; left:50%; transform:translateX(-50%); width:24px; height:24px;
  border-radius: 99px; background:#f5bd41; border:3px solid #fff; box-shadow:0 0 0 3px #000; z-index:2;
}
/* Content box */
.timeline > div > div { background:#f4f4f4; padding:20px; border-radius: var(--radius-large); width: 45%; position:relative; z-index:3; transition:0.3s; }

.timeline > div h3 { font-size: 2.125rem; line-height: 2.625rem; color: #f5bd41; }
.timeline > div h4 { font-size: 1.5rem; line-height: 2rem; }

.timeline > div:nth-child(odd) > div { margin-right:40px; text-align: right; }
.timeline > div:nth-child(even) > div { margin-left:40px; text-align: left; }

/* Mobile */
@media(max-width:768px){
  .timeline::before { left:20px; }
  .timeline > div::after { left:0; }
  .timeline > div:nth-child(odd) { flex-direction: row; }
  .timeline > div:nth-child(even) { flex-direction: row; }
  .timeline > div > div { width: 100%; }
  .timeline > div:nth-child(odd) > div { margin:0 0 0 40px; text-align: left; }
  .timeline > div:nth-child(even) > div { margin:0 0 0 40px; text-align: left; }
}

/* call to action buttons */

.cta { margin-top: 20px; text-align: center; }
.cta a { margin: 20px; display: inline-block; padding: 14px 22px; border-radius: 999px; font-weight: 700; transition: transform 0.25s ease; background: var(--white); color: var(--blue); }
.cta a:hover { transform: translateY(-4px); }

/* add right arrow to all call to action buttons which are not tel links */
.cta a:not([href^="tel:"])::after { font-size: 1rem; padding-left: 5px; content: " \2192"; } /* Unicode 27A4/2192 */

.bg-grey .cta a { background: var(--blue); color: var(--white); }
.bg-white .cta a { background: var(--blue); color: var(--white); }

.bg-green .cta a { background: var(--white); color: var(--green); }
.bg-green-gradient .cta a { background: var(--white); color: var(--green); }

.bg-red .cta a { background: var(--white); color: var(--red); }
.bg-red-gradient .cta a { background: var(--white); color: var(--red); }

.bg-yellow .cta a { background: var(--white); color: var(--yellow); }
.bg-yellow-gradient .cta a { background: var(--white); color: var(--yellow); }

/* boxes-three */

ul.boxes-three
    {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 -20px;
    padding: 10px 0;
    }

ul.boxes-three li {
    display: flex;
    flex: 0 1 330px;
    margin: 20px;
    padding: 30px 10px;
    flex-direction: column;
    background-color: rgba(255,255,255,0.25);
    border-radius: var(--radius-medium);
    overflow: hidden;
    box-shadow: var(--shadow);
    cursor: pointer;
    text-align: center;
    border: 2px solid #fff;
    color:#000;
    position: relative;
  }

ul.boxes-three p { margin-top: 10px; }

ul.boxes-three.edge li { border: 0; text-align: left; padding: 10px 10px 20px 40px; }
ul.boxes-three.edge li h3 { font-size: 3rem; color: var(--yellow); }
ul.boxes-three.edge li::before { content: ""; position: absolute; top: 0; left: 0; width: 20px; height: 100%; background-color: var(--yellow); }

/* items-234 */

ul[class^="items-"] { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; margin: 0 auto; padding: 20px 0; }
ul[class^="items-"] > li { display: flex; flex: 0 0 330px; flex-direction: column; background: var(--grey); border-radius: var(--radius-large); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
ul[class^="items-"] > li img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; transition: transform 0.3s ease; }
ul[class^="items-"] > li div { padding: 17px 20px; display: flex; flex-direction: column; flex-grow: 1; }
ul[class^="items-"] > li p { color: var(--text-muted); margin: 0 0 10px 0; flex-grow: 1; /* fills space above the link */ }
ul[class^="items-"] > li a { text-decoration: none; font-weight: 700; color: var(--blue); margin-top: auto; /* pushes the link to the bottom */ }
ul[class^="items-"] > li a::after { font-size: 1rem; padding-left: 5px; content: " \2192"; }
.home a::after { display: none;}

ul[class^="items-"] h4 { font-size: 0.9rem; text-transform: uppercase; font-weight: 600; margin:5px 0; }

ul[class^="items-"] span { display: inline-block; background: #ddd; color: #000; font-size: 0.9rem; font-weight: 600; margin: 5px 8px 5px 0; padding: 4px 8px; border-radius: 6px; white-space: nowrap; }


ul.items-two li { flex: 0 0 calc(50% - 20px); min-width: 450px; }
ul.items-three li { flex: 0 0 calc(33% - 30px); min-width: 300px; }
ul.items-four li { flex: 0 0 calc(25% - 30px); min-width: 260px; }

ul.items-two ul { column-count: 2; column-gap: 20px; }

ul.items-four > li { background: var(--white); box-shadow: var(--shadow); cursor: pointer; }
ul.items-four > li:hover { transform: scale(1.05); box-shadow: var(--shadow-strong); }

@media (max-width: 500px) {
ul.items-two li { flex: 0 0 100%; }
ul.items-three li { flex: 0 0 100%; }
ul.items-four li { flex: 0 0 100%; }
}

.bg-grey ul[class^="items-"] > li { background: var(--white); }
img.ratio21 { daspect-ratio: 2/1; padding: 20px 20px 0 20px; }

/* steps-234 */

ul[class^="steps-"] { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; text-align: center; margin: 0 auto; padding: 20px 0; box-sizing: border-box; counter-reset: item; }
ul[class^="steps-"] li { flex: 0 0 250px; background: var(--blue-light); border-radius: var(--radius-large); padding: 20px; counter-increment: item; position: relative; }
ul[class^="steps-"] li::before { content: counter(item); position: absolute; top: 12px; left: 12px; line-height: 32px; font-size: 22px; font-weight: bold; color: #fff; background: var(--blue); width: 34px; height: 34px; text-align: center; border-radius: var(--radius-medium); }
ul[class^="steps-"] svg { width: 64px; height: 64px; stroke: var(--blue); stroke-width: 1.6; margin-bottom: 10px; }

main.yellow ul[class^="steps-"] li { background: var(--yellow-light); }
main.yellow ul[class^="steps-"] li::before { background: var(--yellow); }
main.red ul[class^="steps-"] li { background: var(--red-light); }
main.red ul[class^="steps-"] li::before { background: var(--red); }
main.green ul[class^="steps-"] li { background: var(--green-light); }
main.green ul[class^="steps-"] li::before { background: var(--green); }

ul.steps-two li { flex: 0 0 460px; }
ul.steps-three li { flex: 0 0 330px; }
ul.steps-four li { flex: 0 0 250px; }

/* icons-4 */

ul[class^="icons-"] { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; text-align: center; margin: 0 auto; padding: 20px 0; box-sizing: border-box; }
ul[class^="icons-"] li { flex: 0 0 220px; }
ul[class^="icons-"] h3 { }
ul[class^="icons-"] p { margin-top: 8px; }
ul[class^="icons-"] svg { width: 64px; height: 64px; stroke: var(--blue); stroke-width: 1.6; padding: 12px; border-radius: var(--radius-medium); background: var(--blue-light); margin-bottom: 10px; }

div.background-blue { background: var(--blue); border-radius: var(--radius-large); color: var(--white); padding: 30px; margin-bottom: 30px; }

@media (max-width: 500px) {
ul[class^="icons-"] li { flex: 0 0 100%; }
}
/* tiles-234 */

ul[class^="tiles-"] { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; text-align: center; margin: 0 auto; padding: 20px 0; box-sizing: border-box; }
ul[class^="tiles-"] li { flex: 0 0 250px; background: #f4f4f4; border-radius: var(--radius-large); padding: 20px; }
ul[class^="tiles-"] h3 { }
ul[class^="tiles-"] p { margin-top: 8px; }
ul[class^="tiles-"] svg { width: 64px; height: 64px; stroke: var(--blue); stroke-width: 1.6; padding: 12px; border-radius:var(--radius-medium); background: var(--blue-light); margin-bottom: 14px; }

ul.tiles-two li { flex: 0 0 calc(50% - 20px); }
ul.tiles-three li { flex: 0 0 calc(33% - 30px); }
ul.tiles-four li { flex: 0 0 calc(25% - 30px); }

@media (max-width: 500px) {
ul.tiles-two li { flex: 0 0 100%; }
ul.tiles-three li { flex: 0 0 100%; }
ul.tiles-four li { flex: 0 0 100%; }
}

/* sub-uls in tiles */
ul[class^="tiles-"] ul { text-align: left; margin-top: 30px; }
ul[class^="tiles-"] ul li { position: relative; padding: 0 0 0 28px; margin-bottom: 8px; font-size: 0.95rem; color: #222; }
ul[class^="tiles-"] ul li:last-of-type { margin: 0; }
ul[class^="tiles-"] ul li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; background-size: contain; background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23154194' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E"); }

/* accents on svg */

main.blue svg { background: var(--blue-light); stroke: var(--blue); }
main.green svg { background: var(--green-light); stroke: var(--green); }
main.red svg { background: var(--red-light); stroke: var(--red); }
main.yellow svg { background: var(--yellow-light); stroke: var(--yellow); }

/* items-one */

.items-one article { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin: 40px 0; }
.items-one article:last-of-type { margin-bottom: 20px; }
.items-one article:nth-child(even) { grid-template-columns: 1fr 1fr; }
.items-one article:nth-child(even) div:nth-child(1) { order: 2; }
/* single image */
.items-one article div:nth-child(1) img { border-radius: var(--radius-large); box-shadow: var(--shadow); vertical-align: top; }
/* three images stacked */
.items-one article div:nth-child(1) { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-gap: 20px; }
.items-one article div:nth-child(1) img:nth-child(1) { grid-column: 1 / -1; width: 100%; }
.items-one article div:nth-child(1) img:nth-child(2) { width: 100%; }
.items-one article div:nth-child(1) img:nth-child(3) { width: 100%; }

.items-one h2 { margin-bottom: 20px; color: var(--blue); }
.items-one h4 { margin: 0; }
.items-one p { margin: 20px 0; }
.items-one .cta { text-align: left; }
.items-one .cta a { background: var(--blue); color: var(--white); margin: 0; }

.items-two .cta { text-align: left; display: block; padding: 0; margin: 20px 0 10px 0; }
.items-two .cta a { background: var(--blue); color: var(--white); margin: 0; }

/* Responsive */
@media (max-width: 900px) {
  .items-one article, .items-one article:nth-child(even) { grid-template-columns: 1fr; }
  .items-one article:nth-child(even) div:nth-child(1) { order: 0; }
  .items-one article { margin-bottom: 80px; gap: 0; }
}


/* panels-two */

.panels-two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; margin: 20px 0; }
.panels-two > div { padding: 20px; border-radius: var(--radius-large); }
.panels-two svg { width: 40px; height: 40px; float: right; background: none !important; }
.panels-two h3 { margin-bottom: 20px; font-size: 1.5rem; }
.panels-two div.grey { background: var(--grey); }
.panels-two div.white { background: var(--white); }
.panels-two div.yellow { background: var(--yellow-light); color: var(--black); border: 2px solid var(--yellow); }
.panels-two div.yellow svg { stroke: var(--yellow); }
.panels-two div.blue { background: var(--blue); color: var(--white); }
.panels-two div.blue svg { stroke: var(--white); }
.panels-two div.blue svg { stroke: var(--white); }

.panels-two div.image { position: relative; display: inline-block; text-align: center; }
.panels-two div.image p { text-align: center; margin: 15px; }
.panels-two div.image img { max-width: 100%; border-radius: var(--radius-large); }

img.logo { border-radius: 0; width: 250px; margin: -65px auto 0 auto; z-index: 10; transform: translate(0,58%); }

.panels-two p { margin-bottom: 15px; }
.panels-two p:last-child { margin-bottom: 0; }

.panels-two li { position: relative; padding-left: 28px; margin-bottom: 8px; font-size: 0.95rem; }
.panels-two li:last-of-type { margin-bottom: 0; }
.panels-two li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E"); }
.panels-two div.white li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E"); }
.panels-two div.grey li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E"); }
.panels-two div.yellow li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFBA00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E"); }

@media (max-width: 800px) {
.panels-two { grid-template-columns: 1fr; }
}

.case-right ul { margin-top: 10px; }
.case-right li { position: relative; padding-left: 28px; margin-bottom: 8px; font-size: 0.95rem; }
.case-right li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E"); }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 500; padding: 6px 10px; border-radius: 6px; margin-bottom: 20px; }
.badge.highways { background: #e6f0ff; color: #1e5bd9; }
.badge.rail { background: #fff3d6; color: #d98b00; }
.badge svg { width: 14px; height: 14px; }

/* tick list, on full width articles and also items lists */

article ul.twoColumns { column-count: 2; column-gap: 20px; }
article ul, ul[class^="items-"] ul { list-style: none; padding: 0; margin-top: 6px; }
article ul li, ul[class^="items-"] ul li { position: relative; padding-left: 28px; margin-bottom: 8px; font-size: 0.95rem; color: #222; }

.bg-blue article ul li { color: #fff; }

article ul li:last-of-type, ul[class^="items-"] ul li:last-of-type { margin-bottom: 0; }
article ul li p, ul[class^="items-"] ul li p { display: block; margin: 0; }

article ul li::before, ul[class^="items-"] ul li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; background-size: contain; background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23154194' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E");
}
main.blue article ul li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23154194' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E"); }
main.green article ul li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23337733' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E"); }
main.red article ul li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23E2000A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E"); }
main.yellow article ul li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffBA00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E"); }

.bg-blue article ul li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E") !important; }

.productList span { display: inline-block; background: #ddd; color: #000; font-size: 0.9rem; font-weight: 600; margin: 5px 8px 5px 0; padding: 4px 8px; border-radius: 6px; white-space: nowrap; }

.productList span.blue { background: var(--blue-light); color: var(--blue); }
.productList span.red { background: var(--red-light); color: var(--red); }
.productList span.yellow { background: var(--yellow-light); color: var(--yellow); }
.productList span.green { background: var(--green-light); color: var(--green); }




div.ourTestimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }

div.testimonial { background: #fff; padding:20px;border-radius:var(--radius-medium); display: flex; flex-direction: column; height: 100%; }
div.testimonial p { margin: 10px 0; }
div.testimonial div:nth-of-type(1) { text-align: center; }
div.testimonial img { height: 30px; }
div.testimonial div:nth-of-type(2) { border-top: 1px solid #ccc; padding-top: 10px; margin-top: auto; }
div.testimonial div p { margin: 0; float: right; clear: right; }
div.testimonial div p:nth-of-type(1) { font-style: italic; }
div.testimonial span { color: #888; }



.news-item { display: flex; gap: 20px; }
.news-left { flex: 0 0 60%; padding: 20px; }
.news-left h1, .news-left h2, .news-left h3, .news-left h4 { color: var(--blue); font-size: 1.8rem; margin: 10px 0 20px 0; }
.news-left p { margin: 10px 0 20px 0; }
.news-right { flex: 0 0 40%; padding: 20px; }
.news-right img { margin-bottom: 20px; width: 100%; vertical-align: top; border-radius: var(--radius-large); }

.news-related { display: flex; align-items: center; gap: 20px; margin-top: 20px; }
.news-related a:nth-of-type(1) { flex: 0 0 20%; display: block; }
.news-related img { width: 100%; aspect-ratio: 1; object-fit: cover; margin: 0; display: block; border-radius: var(--radius-small); }
.news-related a:nth-of-type(2) { flex: 1; text-decoration: none; }

@media (max-width: 768px) {
    .news-item { flex-direction: column; }
    .news-left, .news-right { flex: 1 1 100%; }
    }

.case-item { display: flex; gap: 20px; }
.case-left { flex: 0 0 75%; padding: 20px; }
.case-left h1, .case-left h2, .case-left h3, .case-left h4 { color: var(--blue); font-size: 1.8rem; margin: 10px 0 20px 0; }
.case-left p { margin: 10px 0 20px 0; }
.case-right { flex: 0 0 25%; padding: 20px; }
.case-right h3 { color: var(--blue); }
.case-right img { margin-bottom: 20px; width: 100%; vertical-align: top; }

@media (max-width: 768px) {
    .case-item { flex-direction: column; }
    .case-left, .case-right { flex: 1 1 100%; }
    }

div.videoOuter { float: right; width:100%; max-width: 580px; margin: 0 0 20px 20px; }
div.videoInner { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; }
.videoInner iframe, .videoInner object, .videoInner embed { position:absolute; top:0; left:0; width:100%; height:100%; }

.contact div label { width: 100%; font-weight: bold; }
.contact div input[type=text], .contact div textarea { width: 100%; margin: 2px 0 10px 0; padding: 5px 8px; font-size: 1rem; border: 1px solid #999; }


/* hero image covers */
.hero { position: relative; background-position: center; background-size: cover; background-repeat: no-repeat; color: var(--white); }

/* hero overlay */
.hero > div:nth-of-type(1) { position: absolute; inset: 0; margin: 0; padding: 0; background: rgba(15,40,80,0.65); max-width: 100%; }
/* hero content */
.hero > div:nth-of-type(2) { position: relative; max-width: 1200px; margin: 0 auto; padding: 60px 0; text-align: center; }
.hero span { display: inline-block; background: rgba(255,255,255,0.25); padding: 6px 14px; border-radius: 999px; font-size: 0.85rem; margin-bottom: 20px; font-weight: bold; }
.hero h1 { font-weight: 800; margin-bottom: 20px; }
.hero p { max-width: 650px; margin: 0 auto; font-size: 1.1rem; line-height: 1.4; }

/* coloured alpha mask on hero overlay */
main.blue .hero > div:nth-of-type(1) { background: rgba(40,75,130,0.65); }
main.green .hero> div:nth-of-type(1) { background: rgba(40,140,75,0.65); }
main.red .hero > div:nth-of-type(1) { background: rgba(140,50,50,0.65); }
main.yellow .hero > div:nth-of-type(1) { background: rgba(140,120,35,0.65); }

.hero .cta a:nth-of-type(1) { background: var(--white); color: var(--blue); }
.hero .cta a:nth-of-type(2) { background: var(--blue); color: var(--white); }
main.blue .hero .cta a:nth-of-type(1) { background: var(--white); color: var(--blue); }
main.blue .hero .cta a:nth-of-type(2) { background: var(--blue); color: var(--white); }
main.green .hero .cta a:nth-of-type(1) { background: var(--white); color: var(--green); }
main.green .hero .cta a:nth-of-type(2) { background: var(--green); color: var(--white); }
main.red .hero .cta a:nth-of-type(1) { background: var(--white); color: var(--red); }
main.red .hero .cta a:nth-of-type(2) { background: var(--red); color: var(--white); }
main.yellow .hero .cta a:nth-of-type(1) { background: var(--white); color: var(--yellow); }
main.yellow .hero .cta a:nth-of-type(2) { background: var(--yellow); color: var(--white); }




.faqs h3 { font-size:1.6rem;line-height:1.8rem;margin:10px 0;padding-left:12px;color:var(--blue);border-left:6px solid var(--yellow); }
.faqs dl { margin-bottom: 20px; margin-right: 20px; }

.faqs dt { font-weight: 600; cursor: pointer; margin: 10px 0 0 20px; padding: 8px 10px; border: 1px solid var(--grey-dark); border-radius: var(--radius-small); }
.faqs dd { display: none; margin-left: 20px; padding: 8px 10px; border: 1px solid var(--grey-dark); border-top: none; border-radius: 0 0 var(--radius-small) var(--radius-small); background: var(--grey); }
.faqs dt.active { border-bottom: none; border-radius: var(--radius-small) var(--radius-small) 0 0; }


.telematics a {border:0;background: var(--blue);padding:10px 20px;clear:both;color:#fff;text-decoration:none}
#telematicsFrame{border:0;width:350px;height:410px;margin: 0 auto; }




/* resources */


.resources h3 { cursor: pointer; font-size:1.6rem;line-height:1.8rem;margin:10px 0;padding-left:12px;color:var(--blue);border-left:6px solid var(--yellow); }
.resources span { font-size: 1.4rem; }
.resources h3.open span { display: none; }

.resources > div { display: none; margin: 10px 0; }
.resources > div.open { display: block; }

.resources div div { border: 1px solid var(--grey-dark); margin: 10px 0 0 20px; padding: 8px 10px; border-radius: var(--radius-small); font-weight: 600; line-height: 40px; cursor: pointer; }
.resources div div img { width: 40px; margin-right: 10px; float: left; }


main li a:hover { text-decoration: underline; }

/* footer */

footer { width: 100%; color: #fff; padding: 0 20px; background: linear-gradient(to right, #1a469a 50%, #659bf7 50%); color: #fff; }

footer > div { max-width: 1200px; margin: 0 auto; padding: 30px 0 20px 0; background: linear-gradient(to right, #1a469a, #659bf7); }

footer img { margin-bottom: 20px; }
footer p { margin-bottom: 20px; }

footer a:hover { text-decoration: underline; }

footer ul { list-style: none; padding: 0; margin: 0; }
footer ul li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 0.9rem; }
footer ul li svg { width: 18px; height: 18px; stroke: var(--yellow); flex-shrink: 0; margin-top: 2px; }

.footer-upper { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.footer-lists { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.footer-lists p { color: var(--yellow); font-weight: bold; margin-bottom: 15px; }

.footer-lower { border-top: 1px solid rgba(255,255,255,0.25); margin-top: 10px; padding-top: 15px; display: grid; grid-template-columns: auto auto; font-size: 0.8rem; }
.footer-lower p { margin-bottom: 15px; }
.footer-lower p:nth-of-type(2) { text-align: right; }
.footer-lower a { margin-left: 16px; }

@media (max-width: 768px) {
.footer-upper { grid-template-columns: 1fr; text-align: center; }
.footer-lower { grid-template-columns: 1fr; text-align: center; }
.footer-lower p { text-align: center !important; }
.footer-lower a { margin: 0 8px; }
footer ul li { justify-content: center; }
}





/* Header */
.header {
  background: var(--white);
}

.header-inner {
  max-width: 1200px;
  height: 40px;
  margin: 10px auto;
  padding: 0 10px;
  display: flex;
  align-items: center; /* vertical alignment */
  justify-content: space-between; /* horizontal spacing */
}

.header-cta { font-weight: 600; }
.header-cta a { display: inline-flex; align-items: center; gap: 6px; }

/* floating Get a Quote button */
.buttonQuote { background: var(--yellow); padding: 9px 18px; border-radius: 999px; font-weight: 700; position: fixed; z-index: 999; top: 10px; right: 10px; pointer-events: none; opacity: 0; transition: opacity 0.3s ease;   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);  color: #fff; }
.buttonQuote.active { opacity: 1; pointer-events: auto; }




/* --------------------
   Desktop Navigation
-------------------- */
.nav-menu { list-style: none; display: flex; gap: 28px; }

.nav-item { position: relative; }
.nav-item > a { font-weight: 500; padding: 8px 0; display: inline-block; }

.nav-item ul { list-style: none; position: absolute; top: 100%; left: 0; background: #f4f4f4; box-shadow: var(--shadow); padding: 0; min-width: 180px; opacity: 0;
  visibility: hidden; transform: translateY(10px); transition: opacity 0.25s ease, transform 0.25s ease; z-index: 10; }

.nav-item ul li a { display: block; padding: 10px 16px; color: var(--text-dark); }
.nav-item ul li a:hover { background: var(--blue-light); color: var(--blue-dark); }

.nav-item:hover > ul,
.nav-item:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }

/* --------------------
   navBurger button
-------------------- */
/* navBurger button */
.navToggle { display: none; background: none; border: none; cursor: pointer; position: relative; z-index: 1003;
justify-content: center; align-items: center;
  width: 36px;
  height: 36px; /* increased height to fit top and bottom lines */
  flex-shrink: 0; /* don't allow shrinking in flex container */
}

/* Lines */
.navToggle .navBurger, .navToggle .navBurger::before, .navToggle .navBurger::after {
  content: ''; display: block; background: var(--text-dark); height: 3px; border-radius: 2px; transition: 0.3s ease; width: 100%; left: 0;
  position: absolute; transform-origin: center; 
}

.navToggle .navBurger { top: 50%; transform: translateY(-50%); }
.navToggle .navBurger::before { top: -10px; }
.navToggle .navBurger::after { top: 10px; }

/* Active cross animation */
.navToggle.active .navBurger { background: transparent; }
.navToggle.active .navBurger::before { transform: translateY(-50%) rotate(45deg); top: 50%; }
.navToggle.active .navBurger::after { transform: translateY(-50%) rotate(-45deg); top: 50%; }




/* --------------------
   Mobile Navigation
-------------------- */
@media (max-width: 320px) {
.header-cta { display: none; }
    }

@media (max-width: 768px) {

    nav { flex: 1; } /* make nav item fill middle space in header */
  .navToggle { display: flex; margin-right: 10px; }

    /* Overlay behind menu */
    .navOverlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 1001; opacity:0; visibility:hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
    header.active .navOverlay { opacity: 1; visibility: visible; }

  /* Mobile menu slides over content */
  .nav-menu {
    flex-direction: column;
    gap: 0;
    background: var(--white);
    position: fixed;
    top: 0;
    left: 0;
    min-width: 220px;
    width: 60%;
    height: 100vh;
    padding-top: 80px; /* header space */
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1002;
    overflow-y: auto;
  }

header.active .nav-menu { transform: translateX(0); padding-bottom: 150px; }

  .nav-item > a { padding: 10px 16px; font-weight: 600; display: block; }
  .nav-item ul { background: #fff; padding-left: 24px; position: static; opacity: 1; visibility: visible; box-shadow: none; transform: none; }
}