:root {
--accent:        #85C442; --accent-hover:  #85C442;
--heading-color: var(--color-blue); --submit-bg:     var(--color-green); --submit-hover:  #5C1B4A;
}
.theme-measurement {
--accent:        #85C442;
--accent-hover:  #85C442;
--heading-color: var(--color-blue);
--submit-bg:     var(--color-green); --submit-hover:  #74AE36;
}                        :root {
--text-display-size:        64px;
--text-display-line-height: 80px;
--text-h2-size:             42px;
--text-h2-line-height:      50px;
--text-stat-size:           52px;
--text-stat-line-height:    55px;
--text-h3-size:             30px;
--text-h3-line-height:      33px;
--text-body-lg-size:        24px;
--text-body-lg-line-height: 28px;
--text-body-size:           20px;
--text-body-line-height:    24px;
--text-body-sm-size:        18px;
--text-body-sm-line-height: 24px;
--text-nav-size:            15px;
--text-nav-alt-size:        17px;
--text-button-size:         17px;
--text-caption-size:        14px;
--text-caption-line-height: 12px;
--text-micro-size:          10px;
--text-micro-line-height:   12px;
} html {  font-size: clamp(11px, 0.8663vw, 12.5px);
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
transition-duration: .001ms !important;
}
}
*, *::before, *::after { box-sizing: border-box; }  .em-page {
position: relative;
z-index: 0;
min-height: 100vh;
padding-top: 40px; padding-bottom: 60px;
background: var(--color-white);
color: var(--color-ink);
font-family: var(--font-body);
font-size: var(--text-body-size);
line-height: var(--text-body-line-height);
font-weight: var(--font-weight-regular);
letter-spacing: normal;
text-align: left;
} html body.em-advertise {
margin: 0;
padding: 0; line-height: 25px;
} :where(.em-page) :is(section, main, header, footer, aside, article) {
margin: 0;
padding: 0;
background: none;
background-image: none;
background-color: transparent;
border: 0;
box-shadow: none;
text-shadow: none;
} body.em-advertise header { display: revert; } .em-page > #main,
body.em-advertise #main {
background: none;
background-image: none;
background-color: transparent;
box-shadow: none;
border: 0;
padding: 0;
margin: 0;
}
:where(.em-page) :is(blockquote, figure, dl, dd, address) { margin: 0; padding: 0; }
body {
margin: 0;
background: var(--color-white);
color: var(--color-ink);
font-family: var(--font-body);
font-size: var(--text-body-size);
line-height: var(--text-body-line-height);
-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, dl, dd, figure, blockquote { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:where(a, button, input, select, textarea):focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.u-visually-hidden {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
position: absolute; left: 1rem; top: -4rem; z-index: 100;
padding: .75rem 1.25rem; border-radius: var(--radius-md);
background: var(--color-navy); color: var(--color-white);
transition: top .15s ease;
}
.skip-link:focus { top: 1rem; }
.icon { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; } .wrap { margin-inline: auto; }  :root {
--em-box:    1140px; --em-gutter: 20px;
}
.wrap--panel   { width: min(var(--em-box), 100% - var(--em-gutter) * 2); }
.wrap--content { width: min(calc(var(--em-box) * 0.886), 100% - var(--em-gutter) * 2); }
.wrap--process { width: min(calc(var(--em-box) * 0.754), 100% - var(--em-gutter) * 2); }
.wrap--cards   { width: min(calc(var(--em-box) * 0.664), 100% - var(--em-gutter) * 2); } .eyebrow { font-size: 1.5rem;
line-height: 2.125rem;
font-weight: 400;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--accent);
}
.section-title {
font-family:'univiapro-regular';
font-weight: 300;
font-size: var(--text-h2-size);
line-height: var(--text-h2-line-height);
letter-spacing: var(--text-h2-tracking);
text-transform: var(--text-h2-transform);
color: var(--heading-color);
}
.section-title--ink    { color: var(--color-ink); }
.section-title--center { text-align: center; }
.rule {
display: block;
width: 4.9375rem; height: .375rem; background: var(--accent);
}
.rule--center { margin-inline: auto; margin-top: 2.5625rem; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20.625rem; min-height: 3.9375rem; padding-inline: 1.5rem;
border: 0;
border-radius: var(--radius-md);
font-family: var(--font-body);
font-weight: var(--text-button-weight);
font-size: var(--text-button-size);
line-height: normal;
letter-spacing: .02em;
text-transform: var(--text-button-transform);
color: var(--color-white);
white-space: nowrap;
cursor: pointer;
transition: background-color .18s ease, transform .18s ease;
}
.btn--accent { background: var(--accent); }
.btn--accent:hover { background: var(--accent-hover); }
.btn--submit { background: var(--submit-bg); min-width: 10.5rem; }
.btn--submit:hover { background: var(--submit-hover); }
.btn:active { transform: translateY(1px); }
.btn--sm {
min-width: 12.25rem; min-height: 2.75rem; font-size: var(--text-nav-size);
}
.btn-row {
display: flex;
flex-wrap: wrap;
gap: .425rem; }
.icon-btn {
display: inline-grid;
place-items: center;
width: 2.75rem; height: 2.75rem;
padding: 0; border: 0; border-radius: 50%;
background: none; cursor: pointer;
color: var(--color-deep-purple);
}
.icon-btn:hover { color: var(--accent); } .dots { display: flex; justify-content: center; gap: .5625rem; }
.dots__dot {
width: .75rem; height: .75rem; padding: 0; border: 0; border-radius: 50%;
background: var(--color-gray-300);
cursor: pointer;
transition: background-color .18s ease;
}
.dots__dot.is-active { background: var(--color-gray-400); } .site-header { padding-block: 2.25rem 3.5625rem; }
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.brand { display: block; }
.brand__mark { width: 6.375rem; } .brand__word {
display: block;
margin-top: .375rem;
font-size: .5625rem; font-weight: var(--font-weight-bold);
letter-spacing: .085em;
line-height: 1;
text-transform: uppercase;
color: var(--color-deep-purple);
white-space: nowrap;
}
.brand--reverse .brand__word { color: var(--color-white); }
.site-nav__list { display: flex; gap: 1.5rem; }
.site-nav__list a {
font-family: var(--font-nav);
font-weight: var(--text-nav-weight);
font-size: var(--text-nav-size);
letter-spacing: .03em;
text-transform: var(--text-nav-transform);
color: var(--color-ink);
transition: color .15s ease;
}
.site-nav__list a:hover { color: var(--accent); }
.site-header__actions { display: flex; align-items: center; gap: .75rem; }
.nav-toggle { display: none; }
.nav-toggle__close { display: none; } .hero__panel {
position: relative;
border-radius: var(--radius-lg); padding: 7rem 3rem 7rem 3rem;
color: var(--color-white);
overflow: hidden;  }  .theme-measurement .hero__panel::before {
background-image: url(//measurementandmanufacturing.com/wp-content/themes/wibase/assets/advertise/img/m-hero-art-right.png);
} .hero__copy {
position: relative;
z-index: 2;
max-width: 53%;
}
.hero__title {
margin-top: 2rem;
font-family: 'univiapro-regular';
font-weight: 300;
font-size: var(--text-display-size);
line-height: var(--text-display-line-height);
letter-spacing: var(--text-display-tracking);
text-transform: var(--text-display-transform);
}
.hero__copy .rule { margin-top: 1.5rem; }
.hero__lead {
margin-top: 2.75rem;
font-size: var(--text-body-lg-size);
line-height: var(--text-body-lg-line-height);
letter-spacing: var(--text-body-lg-tracking);
max-width: 46rem;
}
.hero__copy .btn-row { margin-top: 2.25rem; }
.stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
position: relative;
z-index: 2;
margin-top: 5.5rem;
padding-right: 0;
gap:70px;
}
.stats__item:not(:last-child) {
border-right: var(--border-width) solid var(--accent);
}
.stats__figure {
font-family: var(--font-heading);
font-size: var(--text-stat-size);
line-height: var(--text-stat-line-height);
letter-spacing: var(--text-stat-tracking);
}
.stats__label {
margin: 2rem 0 0;
max-width: 15rem;
padding-right: 1.5rem;
font-size: 1.375rem; line-height: 1.5625rem;
} .clients { padding-block: 5rem 4rem; }
.clients .section-title { text-align: center; }
.clients__viewport { overflow: hidden; margin-top: 1.5rem; }
.clients__track {
--per-view: 7;
--logo-gap: 3rem;
display: flex;
align-items: center;
gap: var(--logo-gap);
min-height: 10.3125rem;
transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.clients__track > li {
flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--logo-gap)) / var(--per-view));
display: grid;
place-items: center;
}
.clients__track img {
width: auto;
max-height: 6.25rem; object-fit: contain;
}
.clients__item--tall img { max-height: 10.3125rem; } .clients .dots { margin-top: 3.5rem; }
.clients .dots:empty { display: none; } section.approach{
padding: 40px 60px;
}
.approach__panel {
position: relative;
border-radius: var(--radius-lg);
background: var(--color-bg-light-alt);
min-height: 0;
width: 100%; display: flex;
justify-content: center;
padding: 2.5rem;
}
.approach-content-wrap{
display: grid; grid-template-columns: 1fr 1fr;
gap: 2.5rem;
align-items: center;
padding: 0rem 1rem 4rem 1rem;
max-width: 1400px;
margin: 0px auto;
} .approach__copy { position: relative; z-index: 2; max-width: none; width: 60rem; }
.approach__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 2rem;
width: 100%;
max-width: 100%;
margin-top: .75rem;
}
.approach__item {
display: flex;
align-items: center;
gap: 2.3125rem; font-size: 24px;
line-height: 28px;
letter-spacing: var(--text-body-lg-tracking);
}
.approach__icon {
flex: none;
width: 5.5rem; height: 5.5rem; color: var(--heading-color); stroke-width: 1.6;
}
.approach__copy .btn-row { margin-top: 4.5rem; }
.approach__art {
position: relative;
width: 100%;
z-index: 1;
pointer-events: none;
margin-top: -6rem;
}
.approach__person { width: 100%; }
.approach__mag {
position: absolute;
left: 47.06%; top: 52.62%; width: 59.07%; }
.theme-measurement .approach__mag {
left: 38.80%; top: 45.94%; width: 69.09%; } .process { padding: 5rem; }
.wrap--process {
display: grid;
grid-template-columns: 50% 45%;
gap: 5%;
align-items: start;
}
.process__media img {
width: 100%;
height: 26rem;
object-fit: cover;
border-radius: var(--radius-lg);
}
.process__copy { padding-top: 2.875rem; }
.steps { margin-top: 2.5rem; }
.steps__step {
display: flex;
align-items: center;
gap: 1.5rem;
}
.steps__step + .steps__step { margin-top: 2.0625rem; } .steps__marker {
position: relative;
flex: none;
display: grid;
place-items: center;
width: 7rem; height: 7rem;
border: var(--border-width) solid var(--accent);
border-radius: 50%;
}
.steps__marker::after { content: "";
position: absolute;
inset: .375rem;
border-radius: 50%;
background: var(--color-navy);
}
.steps__step + .steps__step .steps__marker::before { content: "";
position: absolute;
left: 50%;
top: -2.0625rem;
width: var(--border-width);
height: 2.0625rem;
background: var(--accent);
}
.steps__num {
position: relative;
z-index: 1;
font-size: 1.875rem;
line-height: 1;
font-weight: var(--font-weight-medium);
color: var(--accent);
}
.steps__text {
font-size: var(--text-body-lg-size);
line-height: var(--text-body-lg-line-height);
color: var(--color-navy);
}
.process__note {
margin-top: 1.5rem;
max-width: 40rem; font-size: var(--text-body-lg-size);
line-height: var(--text-body-lg-line-height);
} .services { padding: 5rem; }
.services__head { text-align: center; }
.services__lead {
margin: 1.5rem auto 0;
max-width: 68rem;
text-align: center;
font-size: var(--text-body-lg-size);
line-height: 2.75rem; }
.cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.6875rem 1.125rem; margin-top: 2.375rem;
}
.card {
position: relative;
display: flex;
flex-direction: column;
min-height: 17rem;
padding: 3rem 2rem;
border-radius: var(--radius-lg);
background: var(--color-navy);
color: var(--color-white);
overflow: hidden;
}
.card__watermark {
position: absolute;
right: 1.25rem;
width: 7rem;
opacity: 1;
}
.card__title {
font-family: var(--font-heading);
font-weight: 400;
font-size: var(--text-h3-size);
line-height: var(--text-h3-line-height);
color: var(--accent);
}
.card__link {
margin-top: auto;
margin-left: -.3125rem;
color: var(--accent);
transition: transform .18s ease;
}
.card__link .icon { width: 3.5rem; height: 3.5rem; }
.card__link:hover { transform: translateX(.25rem); }
.card__body {
margin-top: 1.5rem;
font-size: var(--text-body-size);
line-height: var(--text-body-line-height);
} .quotes { padding-block: 5.5rem 0; }
.quotes__row {
display: flex;
align-items: center;
justify-content: center;
margin-top: 3.75rem;
}
.quote {
flex: none;
width: 25rem; min-height: 31.25rem; padding: 4.6875rem 3.5rem;
border: var(--border-width) solid rgba(137, 137, 137, .35);
border-radius: var(--radius-xl); background: #F4F4F4;
box-shadow: 0 1.25rem 2.5rem rgba(2, 18, 44, .07);
text-align: center;
color: var(--color-slate);
}.quote--feature {
width: 28rem; min-height: 38.875rem; padding: 4.0625rem 1.875rem 2.5rem;
margin-inline: -2.5rem;
z-index: 2;
border-color: rgba(149, 149, 149, .5);
background: var(--color-navy);
color: var(--color-white);
box-shadow: 0 1.875rem 3.75rem rgba(2, 18, 44, .25);
}
.quote__avatar {
width: 9.625rem; height: 9.625rem; margin-inline: auto;
border-radius: 50%;
object-fit: cover;
}
.quote--feature .quote__avatar { width: 11.625rem; height: 11.625rem; }  .quote__avatar--placeholder {
display: grid;
place-items: center;
background: var(--color-bg-light);
}
.quote--feature .quote__avatar--placeholder { background: rgba(255, 255, 255, .08); }
.quote__avatar--placeholder img { width: 55%; height: auto; }
.quote__name {
margin-top: 2.8125rem;
font-size: var(--text-body-size);
font-weight: var(--font-weight-medium);
text-transform: uppercase;
letter-spacing: .02em;
}
.quote--feature .quote__name {
margin-top: 3.4375rem;
font-size: 2.2rem; line-height: 1.1;
}
.quote__company {
margin-top: .7rem;
font-family: var(--font-fallback);
font-size: var(--text-caption-size);
line-height: 1.875rem;
text-transform: uppercase;
letter-spacing: .06em;
}
.quote--feature .quote__company {
font-family: var(--font-body);
font-size: 1.5rem; }
.quote__text {
margin: 1.75rem 0 0;
font-family: var(--font-body); font-size: 16px;
line-height: var(--text-caption-size);
line-height: 1.5rem;
}
.quote--feature .quote__text { margin-top: 2rem; }
.quotes .dots { margin-top: 2.75rem; } .enquiry { padding: 40px 60px 0px 60px; }
.enquiry__panel {
position: relative;
overflow: hidden;
min-height: 0;	
border-radius: var(--radius-lg);
color: var(--color-white);
background: radial-gradient(120% 150% at 78% 45%, rgba(14, 54, 114, .55) 0%, rgba(23, 42, 83, 0) 62%), 
linear-gradient(105deg, #232033 0%, #22243C 55%, #20243F 100%);
width: 100%; margin: 0 auto;
display: flex;
justify-content: center;
padding: 10px 10px 0px 10px;
}
.enquiry-box-wrap{
padding: 0rem 1rem 0rem 1rem;
max-width: 1400px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.enquiry__copy { 
position: relative;
z-index: 2;
width: 100%;
overflow: hidden;
padding: 6rem 0rem;
}
.enquiry__mark { width: 6.25rem; } .enquiry__title {
margin-top: 2rem;
font-family: var(--font-display);
font-weight: var(--font-weight-regular);
font-size: var(--text-h2-size);
line-height: var(--text-h2-line-height);
letter-spacing: var(--text-h2-tracking);
text-transform: uppercase;
}
.enquiry__copy .rule { margin-top: .5rem; }
.enquiry__lead {
margin-top: 1.25rem;
font-size: 1.375rem;
line-height: 2rem;
}
.enquiry__phone {
width: 80%;
z-index: 1;
} textarea#input_5_12 {
background: #fff;
}
.form { margin-top: 2rem; max-width: 100%; }
.field { margin: .875rem 0 0; }
.field:first-child { margin-top: 0; }
.field-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .8125rem;
margin-top: .875rem;
}
.field-row .field { margin-top: 0; }
.field input,
.field select,
.field textarea {
width: 100%;
min-height: 2.9375rem; padding: .625rem 1.375rem;
border: 0;
border-radius: 0;
background: var(--color-bg-light);
color: var(--color-ink);
font-family: var(--font-body);
font-size: var(--text-body-sm-size);
line-height: var(--text-body-sm-line-height);
}
.field textarea { min-height: 8.6875rem; resize: vertical; }
.field ::placeholder { color: var(--color-ink); opacity: 1; }
.field--select { position: relative; }
.field--select select {
appearance: none;
padding-right: 3rem;
cursor: pointer;
}
.field--select::after { content: "";
position: absolute;
right: 1.5rem; top: 50%;
width: 0; height: 0;
margin-top: -.1875rem;
border-left: .5rem solid transparent;
border-right: .5rem solid transparent;
border-top: .5rem solid var(--color-ink);
pointer-events: none;
}
.form__actions { margin: 3.3125rem 0 0; } .form__status {
margin: 2rem 0 0;
padding: 1.25rem 1.5rem;
max-width: 47.75rem;
border-left: .25rem solid var(--accent);
background: rgba(255, 255, 255, .1);
font-size: var(--text-body-sm-size);
line-height: 1.5;
}
.form__status--sent  { border-left-color: var(--color-green); }
.form__status--error { border-left-color: #E4572E; }
.field--error input,
.field--error textarea,
.field--error select { box-shadow: inset 0 0 0 2px #E4572E; }
.field__error {
display: block;
margin-top: .375rem;
font-size: .875rem;
line-height: 1.4;
color: #FFC9B8;
} .u-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
} .site-footer {
margin-top: 3.9375rem;
padding-block: 5.3125rem 1.5rem;
background: var(--color-navy);
color: var(--color-white); overflow: hidden;
}
.site-footer__top {
display: grid;
grid-template-columns: 31.5% 10.6% 9.8% 31.8% 16.3%;
align-items: start;
width: 100%;
max-width: 1440px;
padding: 0rem 0rem;
}
.site-footer__logos { display: flex; align-items: flex-start; gap: 3.5rem; }
.em-badge { display: flex; align-items: center; gap: .75rem; color: var(--color-white); }
.em-badge__mark { width: 3rem; height: 3rem; }
.em-badge__word {
font-size: .6875rem;
font-weight: var(--font-weight-bold);
letter-spacing: .1em;
line-height: 1.35;
text-transform: uppercase;
}
.site-footer__blurb {
margin-top: 4.375rem;
max-width: 28rem; font-size: 1rem; line-height: 1.5125rem;
}
.site-footer__heading {
margin: 0 0 1.7rem;
font-size: 1.4rem; font-weight: 700;
line-height: 1.2;
}
.site-footer__col li + li { margin-top: 0; }
.site-footer__col a,
.site-footer__address {
font-size: 1.3rem;
line-height: 1.7rem; font-style: normal;
}
footer.site-footer img{
max-width: 95px;
margin-bottom: -22px;
}
footer.site-footer .site-footer__col ul{
column-count: 1;
}
.site-footer__col a { transition: color .15s ease; }
.site-footer__col a:hover { color: var(--accent); }
.socials { display: flex; gap: .5rem; }
.socials a {
display: grid;
place-items: center;
width: 2.125rem; height: 2.125rem;
border-radius: 50%;
background: var(--color-white);
color: var(--color-navy);
transition: background-color .15s ease, color .15s ease;
}
.socials .icon { width: 1.125rem; height: 1.125rem; }
.socials a:hover { background: var(--accent); color: var(--color-white); }
.site-footer__address { margin-top: 2.8125rem; }
.site-footer__address a:hover { color: var(--accent); }
.site-footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: var(--border-width) solid #A7A7A7; width: 100%;
max-width: 1440px;
padding: 0rem 1rem;
}
.site-footer__copyright {
font-size: var(--text-caption-size);
line-height: var(--text-caption-line-height);
line-height: 1.5;
color: #BFBFBF; }
.to-top {
display: grid;
place-items: center;
width: 2.8125rem; height: 2.8125rem; background: #565C5D; color: #DEDEDE;
transition: background-color .15s ease;
}
.to-top:hover { background: var(--accent); color: var(--color-white); }  @media (max-width: 1440px) {
.approach__copy {
position: relative;
z-index: 2;
max-width: none;
width: 100%;
}
}
@media (max-width: 1240px) {
:root {
--text-display-size:        50px;
--text-display-line-height: 65px;
--text-h2-size:             38px;
--text-h2-line-height:      45px;
--text-stat-size:           44px;
--text-stat-line-height:    50px;
}
.clients__track { --per-view: 5; }
.hero__panel { padding: 8rem 3rem 5rem 5rem; background-position: 80% center; } .hero__panel::after {
content: "";
position: absolute;
inset: 0; }
.hero__copy, .stats { position: relative; z-index: 2; }
.hero__copy {		
width: 100%;
}
.hero-banner-img img {
width: 100% !important;
}
.approach-content-wrap {
grid-template-columns: 1.5fr 1fr;
padding: 3rem 1rem 4rem 1rem;
}
.approach__art {
margin-top: 0rem;
}
.stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2.5rem 3rem;
padding-right: 0;
}
.stats__item:not(:last-child) {
border-right: 0;}
.stats__label { max-width: none; }
.stats__label
{
margin: 1rem 0 0;
} .approach__panel {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: center;
padding: 0rem 4rem;
min-height: 0;
}
.approach__copy { max-width: none; }
.approach__list { width: 100%; }
.approach__art { position: relative; inset: auto; width: 100%; }
.approach__panel { overflow: hidden; }
.approach__mag { width: 52%; left: 50%; top: 55%; }
section.hero {
padding: 0px 40px 20px 40px !important;
}
section.approach {
padding: 40px;
}
.process {
padding: 40px;
}
.services {
padding: 40px;
}
.enquiry {
padding: 20px 40px 0px 40px;
}
}
@media (max-width: 899px) {
html { font-size: 13px; }
.wrap--panel,
.wrap--content,
.wrap--process,
.wrap--cards { width: min(100% - 2.5rem, 56rem); } .site-header { padding-block: 1.5rem; }
.site-header__inner { position: relative; }
.nav-toggle { display: inline-grid; }
.site-header__actions .btn--sm { display: none; }
.site-nav {
position: absolute;
inset: 100% 0 auto;
z-index: 30;
display: none;
margin-top: 1rem;
padding: 1.5rem;
border-radius: var(--radius-md);
background: var(--color-white);
box-shadow: 0 1rem 2.5rem rgba(2, 18, 44, .16);
}
.site-nav.is-open { display: block; }
.site-nav__list { flex-direction: column; gap: 1.25rem; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }
.brand__mark { width: 5rem; } .hero__panel {
padding: 2.5rem 1.75rem 3rem;
background-position: 68% center;
}
.hero__panel::after {
content: "";
position: absolute; inset: 0; }
.hero__copy, .stats { position: relative; z-index: 2; }
.hero__title { margin-top: 1.5rem; font-size: 2.75rem; line-height: 1.1; }
.hero__lead { margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.55; }
.hero__copy .btn-row { margin-top: 1.75rem; }
.btn { min-width: 0; width: 100%; }
.btn-row > .btn { flex: 1 1 4rem; }
.stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.75rem;
margin-top: 2.5rem;
padding-right: 0;
}
.stats__item + .stats__item { border: 0; padding-left: 0; }
.stats__figure { font-size: 2.25rem; line-height: 1.1; }
.stats__label { font-size: 1rem; line-height: 1.35; } .section-title { font-size: 1.875rem; line-height: 1.2; }
.clients { padding-block: 3.5rem; }
.clients__track { --per-view: 5; --logo-gap: 1.5rem; min-height: 0; }
.clients__track img,
.clients__item--tall img { max-height: 3.5rem; }
.clients .dots { margin-top: 1.75rem; }
.approach__panel { display: block;         padding: 2.5rem 1.5rem; min-height: 0; width: 100%; }
.approach__list { width: 100%; grid-template-columns: 1fr; row-gap: 1.5rem; margin-top: 2rem; }
.approach__item { font-size: 1.125rem; line-height: 1.4; gap: 1.25rem; }
.approach__icon { width: 3.5rem; height: 3.5rem; }
.approach__copy .btn-row { margin-top: 2rem; }
.approach__art {
position: relative;
inset: auto;
width: 100%;
max-width: 22rem;
margin: 2.5rem auto 0;
}
.approach__mag { left: 30%; top: 55%; width: 55%; }
section.hero {
padding: 0px 25px 20px 25px !important;
}
section.approach {
padding: 25px;
}
.btn-row
{
flex-direction: column;
}
.process { padding: 3rem 25px;}
.wrap--process { grid-template-columns: 1fr; gap: 2rem; }
.process__media img { height: 14rem; }
.process__copy { padding-top: 0; }
.steps__marker { width: 7rem; height: 7rem; }
.steps__marker::after { inset: .3125rem; }
.steps__num { font-size: 1.75rem; }
.steps__text, .process__note { font-size: 1.125rem; line-height: 1.5; }
.steps__step + .steps__step .steps__marker::before { top: -1.25rem; height: 1.25rem; }
.steps__step + .steps__step { margin-top: 1.25rem; }
body section.services { padding: 5rem 25px !important; background: #ebebeb; }
.services__lead { font-size: 1.125rem; line-height: 1.6; margin-top: 1.5rem; }
.cards { grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.card { min-height: 0; padding: 2rem 1.75rem; }
.card__title { font-size: 1.75rem; line-height: 1.1; }
.card__watermark {  right: 1.25rem; width: 4rem; }
.card__link { margin-top: 1.5rem; }
.card__body { font-size: 1rem; line-height: 1.3em; }
section.services ul.cards .card{
height: 330px !important;
}
.quotes { padding: 5rem 25px !important; }
.quotes .wrap.wrap--content {
width: 100%;
}
.quotes__row { flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.quote[hidden] { display: block; } .quote, .quote--feature {
width: 100%;
min-height: 0;
margin-inline: 0;
padding: 2.5rem 1.75rem;
}
.quote__avatar,
.quote--feature .quote__avatar { width: 6.5rem; height: 6.5rem; }
.quote__name { margin-top: 1.25rem; }
.quote--feature .quote__name { margin-top: 1.25rem; font-size: 1.5rem; }
.quotes .dots { display: none; }
.enquiry { padding: 40px 25px 0px 25px;  }
.enquiry__panel { padding: 2.5rem 1.75rem 3rem; min-height: 0; width:100%; }
.enquiry__title { margin-top: 1.5rem; font-size: 2rem; line-height: 1.1; }
.enquiry__lead { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.5; }
.enquiry__phone { display: block; }
.field-row { grid-template-columns: 1fr; }
.form__actions { margin-top: 1.75rem; }
.btn--submit { width: auto; min-width: 10.5rem; } .site-footer { margin-top: 3rem; padding-block: 3rem 25px; }
.site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
.site-footer__brand,
.site-footer__contact { grid-column: 1 / -1; }
.site-footer__blurb { margin-top: 4rem; max-width: none; }
.site-footer__address { margin-top: 1.5rem; }
}
@media (max-width: 480px) {
.site-footer__logos { flex-direction: row; gap: 1.5rem; }
.btn-row > .btn { flex: 1 1 100%; }
.clients__track { --per-view: 2; }
}    @media screen and (max-width: 1350px) { }    .wrap-container-box{ background: radial-gradient(120% 150% at 78% 45%, rgba(14, 54, 114, .55) 0%, rgba(23, 42, 83, 0) 62%), linear-gradient(105deg, #232033 0%, #22243C 55%, #20243F 100%);
border-radius: 29px;
margin: 0px auto;
padding: 10px;
}
.wrap.wrap--panel.hero__panel {
max-width: 1400px !important;
width: 100%;
}
.hero-content-top {
display: flex;
gap: 20px;
align-items: center;
}
.hero-banner-img {
text-align: right;
display: flex;
justify-content: flex-end;
}
.hero-banner-img img {
width: 85%;
}
section.hero {
padding: 20px 60px 40px 60px;
}
section.clients .wrap--content{
width: 100%;
max-width: 1400px;
}
h2#approach-title {
margin-bottom: 50px;
}
.wrap.wrap--process {
max-width: 1100px !important;
width: 100%;
}
.process__media {
width: 100%;
height: 100%;
}
.process__media img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-lg);
}
section.services {
padding-top: 150px !important;
}
.wrap.wrap--cards {
width: 100%;
max-width: 1170px;
}
section.services ul.cards .card {
height: 400px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
section.quotes {
padding-top: 130px;
}
.enquiry__image_right {
text-align: right;
display: flex;
justify-content: flex-end;
align-items: end;
}
@media (max-width: 950px) { }
@media (max-width: 700px) { }
@media (max-width: 550px) { .hero-content-top {
align-items: flex-start !important;
flex-direction: column;
}
.hero-banner-img {
display: none !important;
}
.hero__copy {		
max-width: 100%;
}
.stats {
margin-top: 4.5rem;
}
.approach-content-wrap {
grid-template-columns: 1fr;
}
.enquiry-box-wrap {
grid-template-columns: 1fr;
}
.cards {
grid-template-columns: 1fr;
}
a.marketing-link {
display: none !important;
}
a.top_bar_issue {
display: none !important;
}
#menubtn {
top: 54px;
width: 35px;
height: 35px;
border-radius: 50px;
padding: 8px;
gap: 0px;
}
.hbar {
height: 4px;
width: 20px;
background: #fff;
border-radius: 2px;
transition: all 350ms ease-in-out;
margin-bottom: -2px;
} .stats__figure {
font-size: 2rem;
line-height: 1.1;
}
.hero__title {
font-size: 2.45rem;
}
.section-title {
font-size: 1.575rem;
line-height: 1.5;
}
.enquiry__image_right {
display: none;
}
section.services {
padding-top: 80px !important;
}
section.quotes {
padding-top: 70px;
}
.clients .section-title {
text-align: center;
max-width: 300px;
margin: 0 auto;
}
.steps__marker {
position: relative;
flex: none;
display: grid;
place-items: center;
width: 6rem; height: 6rem;
border: var(--border-width) solid var(--accent);
border-radius: 50%;
}
} .clients__viewport--marquee {
overflow: hidden;
}
.clients__track--marquee {
display: flex;
width: auto;
animation: clients-marquee 30s linear infinite;
}
.clients__track--marquee.is-paused {
animation-play-state: paused;
}
@keyframes clients-marquee {
from { transform: translateX(0); }
to   { transform: translateX(-50%); }
} @media (max-width: 899px) {
section.services ul.cards .card{
height: 330px !important;
}
.quotes { padding-block: 3.5rem 0; }
.quotes__row {
margin-top: 2rem; } .quote:not(.quote--feature) {
display: none;
}
.quote,
.quote--feature {
width: 100%;
min-height: 0;
margin-inline: 0;
padding: 2.5rem 1.75rem;
}
.quote__avatar,
.quote--feature .quote__avatar { width: 6.5rem; height: 6.5rem; }
.quote__name { margin-top: 1.25rem; }
.quote--feature .quote__name { margin-top: 1.25rem; font-size: 1.5rem; } .quotes .dots { margin-top: 2rem; }
.quotes .dots {
display: flex;
}
}
.top_bar_socials img {
object-fit: contain;
}
a.marketing-link {
font-size: 15px;
}