@charset "UTF-8";
  @font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url(//wombles-wheels.co.uk/wp-content/themes/webwinton/assets/fonts/archivo-variable-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url(//wombles-wheels.co.uk/wp-content/themes/webwinton/assets/fonts/archivo-variable-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
U+2113, U+2C60-2C7F, U+A720-A7FF;
} :root { --ww-blue: #14318c;
--ww-cobalt: #1236a4;
--ww-cobalt-deep: #0e2a80;
--ww-cobalt-gloss: #2a55d4;
--ww-navy-start: #0b1226;
--ww-navy-end: #0a1633;
--ww-centre-line: #10235e; --ww-silver: #e8edf6;
--ww-hero-white: #eef2fa;
--ww-muted-blue: #9fb2e0;
--ww-nav-link: #c9d4ee; --ww-ink: #101722;
--ww-body: #3d4452;
--ww-muted: #5c6470;
--ww-fine: #8b93a0; --ww-rule: #d4d9e2;
--ww-tint: #eef2fa;
--ww-white: #fff;
--ww-night: #0f1420; --ww-gradient: linear-gradient(150deg, #0b1226 0%, #14318c 58%, #0a1633 100%);
--ww-gradient-alt: linear-gradient(150deg, #0a1633 0%, #14318c 60%, #0b1226 100%); --ww-container: 1180px;
--ww-gutter: 48px; --ww-font: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
} *,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--ww-white);
color: var(--ww-ink);
font-family: var(--ww-font);
font-size: 16px;
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} [hidden] {
display: none !important;
}
img,
svg {
display: block;
max-width: 100%;
}
img {
height: auto;
} picture {
display: contents;
}
a {
color: var(--ww-cobalt);
text-decoration: none;
}
a:hover {
color: var(--ww-cobalt-deep);
}
h1, h2, h3, h4, h5, h6, p, figure {
margin: 0;
}
button {
font: inherit;
color: inherit;
}
:focus-visible {
outline: 2px solid var(--ww-cobalt);
outline-offset: 2px;
}
.ww-dark :focus-visible,
.mobile-menu :focus-visible {
outline-color: var(--ww-silver);
}
::selection {
background: var(--ww-cobalt);
color: #fff;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
} .ww-container {
max-width: var(--ww-container);
margin: 0 auto;
width: 100%;
}
.screen-reader-text {
border: 0;
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 200;
background: var(--ww-silver);
color: var(--ww-cobalt-deep);
padding: 14px 22px;
font-weight: 600;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
}
.skip-link:focus {
left: 0;
}
.ww-site {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.ww-main {
flex: 1 0 auto;
} .btn {
display: inline-block;
font-family: inherit;
font-weight: 600;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
text-align: left;
border: 0;
border-radius: 0;
cursor: pointer;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
} .btn--light {
background: var(--ww-silver);
color: var(--ww-cobalt-deep);
padding: 16px 28px;
}
.btn--light:hover,
.btn--light:focus-visible {
background: #fff;
color: var(--ww-cobalt-deep);
} .btn--ghost {
border: 1px solid rgba(232, 237, 246, .35);
color: var(--ww-silver);
padding: 15px 28px;
background: none;
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
border-color: var(--ww-silver);
color: #fff;
} .btn--cobalt {
background: var(--ww-cobalt);
color: #fff;
padding: 16px 28px;
}
.btn--cobalt:hover,
.btn--cobalt:focus-visible {
background: var(--ww-cobalt-deep);
color: #fff;
} .btn--cobalt-outline {
border: 1px solid var(--ww-cobalt);
color: var(--ww-cobalt);
padding: 15px 22px;
background: none;
}
.btn--cobalt-outline:hover,
.btn--cobalt-outline:focus-visible {
background: var(--ww-tint);
color: var(--ww-cobalt-deep);
}
.btn--block {
display: block;
width: 100%;
}
.btn-row {
display: flex;
gap: 14px;
flex-wrap: wrap;
} .link-more {
font-weight: 600;
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--ww-cobalt);
}
.link-more:hover {
color: var(--ww-cobalt-deep);
} .site-header {
background: var(--ww-gradient);
position: relative;
}
.site-nav {
padding: 20px var(--ww-gutter);
border-bottom: 1px solid rgba(232, 237, 246, .16);
}
.site-nav__inner {
max-width: var(--ww-container);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
position: relative;
} .brand {
display: flex;
align-items: center;
gap: 18px;
}
.brand__text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.brand__name {
font-weight: 800;
font-size: 22px;
line-height: 1;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--ww-silver);
white-space: nowrap;
}
.brand__tagline {
font-weight: 500;
font-size: 9px;
letter-spacing: 2.6px;
text-transform: uppercase;
color: var(--ww-muted-blue);
white-space: nowrap;
}
.brand .ww-mark {
flex: none;
} .nav-desktop {
display: flex;
align-items: center;
gap: 28px;
}
.nav-desktop__group {
position: static;
}
.nav-desktop__link,
.nav-desktop__toggle {
font-family: inherit;
font-weight: 500;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--ww-nav-link);
background: none;
border: 0;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
gap: 7px;
transition: color .2s ease;
}
.nav-desktop__link:hover,
.nav-desktop__toggle:hover,
.nav-desktop__link.is-current,
.nav-desktop__toggle[aria-expanded="true"] {
color: #fff;
}
.nav-desktop__chevron {
transition: transform .2s ease;
}
.nav-desktop__toggle[aria-expanded="true"] .nav-desktop__chevron {
transform: rotate(180deg);
}
.nav-desktop__cta {
font-weight: 600;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
border: 1px solid rgba(232, 237, 246, .4);
color: var(--ww-silver);
padding: 12px 20px;
display: inline-block;
transition: border-color .2s ease, color .2s ease;
}
.nav-desktop__cta:hover,
.nav-desktop__cta:focus-visible {
border-color: #fff;
color: #fff;
} .nav-burger {
display: none;
background: none;
border: 0;
cursor: pointer;
padding: 8px;
color: var(--ww-silver);
margin: -8px -8px -8px 0;
} .mega {
position: absolute;
top: 100%;
right: 0;
margin-top: 16px;
background: #fff;
border: 1px solid var(--ww-rule);
box-shadow: 0 28px 56px rgba(8, 12, 26, .3);
display: grid;
grid-template-columns: 1fr 1fr;
width: 620px;
max-width: 90vw;
z-index: 50;
}
.mega__item {
padding: 22px 26px;
display: flex;
flex-direction: column;
gap: 6px;
transition: background-color .15s ease;
}
.mega__item:nth-child(2n) {
border-left: 1px solid var(--ww-rule);
}
.mega__item:nth-child(n + 3) {
border-top: 1px solid var(--ww-rule);
}
.mega__item:hover,
.mega__item:focus-visible {
background: var(--ww-tint);
}
.mega__title {
font-weight: 800;
font-size: 14px;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--ww-ink);
}
.mega__desc {
font-size: 13px;
line-height: 1.5;
color: var(--ww-muted);
} .mobile-menu {
position: fixed;
inset: 0;
background: var(--ww-gradient);
z-index: 70;
display: flex;
flex-direction: column;
padding: 20px 28px 36px;
overflow: auto;
overscroll-behavior: contain;
}
.mobile-menu__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.mobile-menu__brand {
display: flex;
align-items: center;
gap: 14px;
}
.mobile-menu__brand .brand__text {
gap: 3px;
}
.mobile-menu__brand .brand__name {
font-size: 16px;
letter-spacing: 2px;
}
.mobile-menu__brand .brand__tagline {
font-size: 8px;
letter-spacing: 2.4px;
}
.mobile-menu__close {
background: none;
border: 0;
cursor: pointer;
padding: 8px;
margin: -8px -8px -8px 0;
color: var(--ww-silver);
}
.mobile-menu__nav {
display: flex;
flex-direction: column;
margin-top: 44px;
}
.mobile-menu__link {
font-weight: 300;
font-size: 24px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--ww-silver);
padding: 18px 0;
border-top: 1px solid rgba(232, 237, 246, .18);
transition: color .2s ease;
}
.mobile-menu__link:last-child {
border-bottom: 1px solid rgba(232, 237, 246, .18);
}
.mobile-menu__link:hover,
.mobile-menu__link.is-current {
color: #fff;
}
.mobile-menu__actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: auto;
padding-top: 40px;
}
.mobile-menu__actions .btn--light {
padding: 16px 22px;
}
.mobile-menu__actions .btn--ghost {
padding: 15px 22px;
border-color: rgba(232, 237, 246, .4);
}
.mobile-menu__actions .btn--ghost:hover {
border-color: #fff;
}
body.ww-locked {
overflow: hidden;
} .hero {
padding: 48px var(--ww-gutter) 0;
overflow: hidden;
position: relative;
}
.hero--inner {
padding: 76px var(--ww-gutter) 84px;
} .ww-main > .hero {
background: var(--ww-gradient);
}
.hero__watermark {
position: absolute;
right: -8%;
top: -22%;
height: 150%;
opacity: .14;
pointer-events: none;
width: auto;
}
.hero__inner {
max-width: var(--ww-container);
margin: 0 auto;
position: relative;
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 48px;
align-items: center;
}
.hero--inner .hero__inner {
display: flex;
flex-direction: column;
align-items: flex-start; gap: 0;
}
.hero__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-bottom: 64px;
}
.hero__title {
font-weight: 300;
font-size: 54px;
line-height: 1.08;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--ww-hero-white);
text-wrap: pretty;
}
.hero__title strong {
font-weight: 800;
}
.hero--inner .hero__title {
font-size: 46px;
max-width: 640px;
}
.hero__intro {
font-size: 16px;
line-height: 1.6;
color: var(--ww-muted-blue);
margin: 22px 0 34px;
max-width: 420px;
}
.hero--inner .hero__intro {
margin: 20px 0 32px;
max-width: 520px;
}
.hero--inner .hero__intro:last-child {
margin-bottom: 0;
}
.hero__media {
position: relative;
align-self: end;
}
.hero__road,
.hero__road-dashes {
position: absolute;
left: -10%;
right: -10%;
}
.hero__road {
bottom: 34px;
height: 1px;
background: rgba(232, 237, 246, .35);
}
.hero__road-dashes {
bottom: 22px;
border-top: 2px dashed rgba(232, 237, 246, .25);
}
.hero__car {
width: 100%;
max-width: 640px;
margin: 0 auto;
position: relative;
filter: drop-shadow(0 44px 36px rgba(3, 8, 26, .55));
} .statement {
padding: 96px var(--ww-gutter) 84px;
}
.statement__text {
font-size: 26px;
font-weight: 300;
line-height: 1.55;
color: var(--ww-ink);
max-width: 820px;
text-wrap: pretty;
}
.statement__text strong {
font-weight: 600;
} .section-heading {
font-weight: 800;
font-size: 26px;
letter-spacing: -.2px;
text-transform: uppercase;
color: var(--ww-ink);
}
.ww-dark .section-heading {
color: var(--ww-silver);
}  .cards {
display: grid;
border: 1px solid var(--ww-rule);
border-top: 0;
border-left: 0;
}
.cards > .card {
border-top: 1px solid var(--ww-rule);
border-left: 1px solid var(--ww-rule);
}
.cards--2 {
grid-template-columns: repeat(2, 1fr);
}
.cards--3 {
grid-template-columns: repeat(3, 1fr);
}
.cards--4 {
grid-template-columns: repeat(4, 1fr);
}
.card {
padding: 44px 40px;
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
.card--feature {
gap: 12px;
}
.card__title {
font-weight: 800;
font-size: 19px;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--ww-ink);
text-wrap: balance;
}
.card--feature .card__title {
font-size: 16px;
}
.card__text {
font-size: 14px;
line-height: 1.65;
color: var(--ww-body);
}
.card__link {
margin-top: auto;
padding-top: 14px;
}
.card .ww-icon {
color: var(--ww-cobalt);
flex: none;
}
.services {
padding: 0 var(--ww-gutter) 96px;
}
.services--standalone {
padding-top: 96px;
}
.services__heading {
margin-bottom: 36px;
}
.service-features {
padding: 96px var(--ww-gutter);
} .ww-dark {
background: var(--ww-gradient);
}
.booking {
padding: 88px var(--ww-gutter);
}
.split {
max-width: var(--ww-container);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.split__intro {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.booking__text {
font-size: 15px;
line-height: 1.65;
color: var(--ww-muted-blue);
margin: 16px 0 20px;
max-width: 400px;
}
.booking__phone {
font-weight: 700;
font-size: 24px;
letter-spacing: 1px;
color: var(--ww-silver);
transition: color .2s ease;
}
.booking__phone:hover {
color: #fff;
}
.steps {
display: flex;
flex-direction: column;
}
.step {
display: flex;
gap: 28px;
border-top: 1px solid rgba(232, 237, 246, .22);
padding: 22px 0;
}
.step:last-child {
border-bottom: 1px solid rgba(232, 237, 246, .22);
}
.step__number {
font-weight: 600;
font-size: 12px;
letter-spacing: 2px;
color: var(--ww-muted-blue);
padding-top: 3px;
flex: none;
}
.step__text {
font-size: 15px;
line-height: 1.6;
color: var(--ww-silver);
} .coverage {
padding: 96px var(--ww-gutter);
}
.coverage__text {
font-size: 15px;
line-height: 1.65;
color: var(--ww-body);
margin-top: 16px;
max-width: 400px;
}
.places {
display: flex;
flex-direction: column;
}
.places__item {
font-weight: 300;
font-size: 24px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--ww-ink);
border-top: 1px solid var(--ww-rule);
padding: 18px 0;
opacity: 0;
transform: translateY(20px);
transition: opacity .6s ease, transform .6s ease;
}
.places__note {
font-weight: 500;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--ww-cobalt);
border-top: 1px solid var(--ww-rule);
border-bottom: 1px solid var(--ww-rule);
padding: 18px 0;
opacity: 0;
transform: translateY(20px);
transition: opacity .6s ease, transform .6s ease;
}
.places.is-revealed .places__item,
.places.is-revealed .places__note {
opacity: 1;
transform: translateY(0);
}
.places.is-revealed .places__item:nth-child(2) { transition-delay: .12s; }
.places.is-revealed .places__item:nth-child(3) { transition-delay: .24s; }
.places.is-revealed .places__item:nth-child(4) { transition-delay: .36s; }
.places.is-revealed .places__item:nth-child(5) { transition-delay: .48s; }
.places.is-revealed .places__note { transition-delay: .5s; }
@media (prefers-reduced-motion: reduce) {
.places__item,
.places__note {
opacity: 1;
transform: none;
}
} .quote-band {
background: var(--ww-gradient-alt);
padding: 64px var(--ww-gutter);
}
.quote-band--home {
padding: 72px var(--ww-gutter);
}
.quote-band__inner {
max-width: var(--ww-container);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
.quote-band__lead {
display: flex;
align-items: center;
gap: 36px;
flex-wrap: wrap;
}
.quote-band__car {
width: 210px;
flex: none;
filter: drop-shadow(0 22px 18px rgba(3, 8, 26, .5));
}
.quote-band__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.quote-band__title {
font-weight: 800;
font-size: 30px;
line-height: 1.05;
letter-spacing: -.3px;
text-transform: uppercase;
color: var(--ww-silver);
text-wrap: balance;
}
.quote-band--home .quote-band__title {
font-size: 34px;
}
.quote-band__text {
font-size: 14px;
color: var(--ww-muted-blue);
}
.quote-band__actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.quote-band__actions .btn {
font-size: 14px;
text-transform: none;
}
.quote-band__actions .btn--light {
padding: 16px 26px;
}
.quote-band__actions .btn--ghost {
padding: 15px 26px;
border-color: var(--ww-muted-blue);
}
.quote-band__actions .btn--ghost:hover {
border-color: var(--ww-silver);
} .site-footer {
background: var(--ww-night);
padding: 32px var(--ww-gutter);
margin-top: auto;
}
.site-footer__inner {
max-width: var(--ww-container);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.site-footer__brand {
display: flex;
align-items: center;
gap: 12px;
}
.site-footer__lockup {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
}
.site-footer__name {
font-weight: 700;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--ww-silver);
}
.site-footer__tagline {
font-weight: 500;
font-size: 8px;
letter-spacing: 2.4px;
text-transform: uppercase;
color: var(--ww-muted-blue);
}
.site-footer__meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
text-align: right;
}
.site-footer__legal {
font-weight: 500;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--ww-fine);
}
.site-footer__legal-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 18px;
flex-wrap: wrap;
justify-content: flex-end;
}
.site-footer__legal-links a {
font-weight: 500;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--ww-fine);
transition: color .2s ease;
}
.site-footer__legal-links a:hover {
color: var(--ww-silver);
}
.site-footer__credit,
.site-footer__credit a {
font-weight: 500;
font-size: 9px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--ww-muted);
}
.site-footer__credit a:hover {
color: var(--ww-silver);
} .quote-modal {
position: fixed;
inset: 0;
background: rgba(8, 12, 26, .6);
display: flex;
align-items: center;
justify-content: center;
z-index: 60;
padding: 24px;
}
.quote-modal__panel {
background: #fff;
max-width: 400px;
width: 100%;
padding: 44px 40px 40px;
position: relative;
display: flex;
flex-direction: column;
max-height: calc(100vh - 48px);
overflow-y: auto;
}
.quote-modal__close {
position: absolute;
top: 12px;
right: 12px;
background: none;
border: 0;
font-size: 24px;
line-height: 1;
color: var(--ww-muted);
cursor: pointer;
padding: 8px;
}
.quote-modal__close:hover {
color: var(--ww-ink);
}
.quote-modal__title {
font-weight: 800;
font-size: 22px;
letter-spacing: -.2px;
text-transform: uppercase;
color: var(--ww-ink);
margin-bottom: 10px;
padding-right: 28px;
}
.quote-modal__text {
font-size: 14px;
line-height: 1.6;
color: var(--ww-body);
margin-bottom: 24px;
}
.quote-modal__actions {
display: flex;
flex-direction: column;
gap: 10px;
}
.quote-modal__actions .btn--cobalt {
padding: 16px 22px;
} .contact {
padding: 96px var(--ww-gutter);
}
.contact__inner {
max-width: var(--ww-container);
margin: 0 auto;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 80px;
align-items: start;
}
.panel-heading {
font-weight: 800;
font-size: 22px;
letter-spacing: -.2px;
text-transform: uppercase;
color: var(--ww-ink);
} .enquiry-form {
display: flex;
flex-direction: column;
gap: 22px;
}
.enquiry-form .panel-heading {
margin-bottom: 4px;
}
.field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
}
.field {
display: flex;
flex-direction: column;
gap: 8px;
font-weight: 600;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--ww-muted);
min-width: 0;
}
.field input,
.field select,
.field textarea {
font-family: var(--ww-font);
font-size: 15px;
font-weight: 400;
letter-spacing: normal;
text-transform: none;
color: var(--ww-ink);
background: #fff;
border: 1px solid var(--ww-rule);
padding: 14px 16px;
width: 100%;
border-radius: 0;
appearance: none;
}
.field select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c6470' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 42px;
}
.field textarea {
resize: vertical;
min-height: 120px;
line-height: 1.6;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: 2px solid var(--ww-cobalt);
outline-offset: 0;
border-color: var(--ww-cobalt);
}
.field input::placeholder,
.field textarea::placeholder {
color: var(--ww-fine);
}
.field--error input,
.field--error select,
.field--error textarea {
border-color: #8a3030;
}
.field__error {
font-weight: 500;
font-size: 12px;
letter-spacing: .2px;
text-transform: none;
color: #8a3030;
}
.enquiry-form__honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.enquiry-form__submit {
align-self: flex-start;
}
.enquiry-form__submit[disabled] {
opacity: .6;
cursor: progress;
}
.form-notice {
font-size: 14px;
line-height: 1.6;
color: #8a3030;
border-left: 3px solid #8a3030;
padding-left: 14px;
} .enquiry-success {
border: 1px solid var(--ww-rule);
padding: 56px 48px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.enquiry-success .ww-icon {
color: var(--ww-cobalt);
}
.enquiry-success__text {
font-size: 15px;
line-height: 1.65;
color: var(--ww-body);
max-width: 420px;
}
.enquiry-success__again {
margin-top: 8px;
} .contact-direct {
display: flex;
flex-direction: column;
}
.contact-direct__intro {
font-size: 14px;
line-height: 1.6;
color: var(--ww-muted);
margin: 8px 0 24px;
}
.contact-direct__item {
display: flex;
flex-direction: column;
gap: 4px;
border-top: 1px solid var(--ww-rule);
padding: 20px 0;
}
.contact-direct__item:last-of-type {
border-bottom: 1px solid var(--ww-rule);
}
.contact-direct__label {
font-weight: 600;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--ww-muted);
}
.contact-direct__value {
font-weight: 700;
font-size: 22px;
letter-spacing: .5px;
color: var(--ww-cobalt);
word-break: break-word;
}
.contact-direct__item--email .contact-direct__value {
font-size: 18px;
}
.contact-direct__item:hover .contact-direct__value {
color: var(--ww-cobalt-deep);
}
.contact-direct__note {
font-size: 13px;
line-height: 1.6;
color: var(--ww-fine);
margin-top: 20px;
} .page-body {
padding: 96px var(--ww-gutter);
}
.page-body__inner {
max-width: 820px;
margin: 0 auto;
}
.prose {
font-size: 16px;
line-height: 1.7;
color: var(--ww-body);
}
.prose > * + * {
margin-top: 22px;
}
.prose h2 {
font-weight: 800;
font-size: 24px;
letter-spacing: -.2px;
text-transform: uppercase;
color: var(--ww-ink);
margin-top: 48px;
}
.prose h3 {
font-weight: 800;
font-size: 18px;
letter-spacing: .3px;
text-transform: uppercase;
color: var(--ww-ink);
margin-top: 36px;
}
.prose ul,
.prose ol {
padding-left: 22px;
}
.prose li + li {
margin-top: 8px;
}
.prose a {
text-decoration: underline;
text-underline-offset: 3px;
}
.prose blockquote {
border-left: 2px solid var(--ww-rule);
padding-left: 24px;
margin-left: 0;
font-weight: 300;
font-size: 20px;
line-height: 1.55;
color: var(--ww-ink);
}
.prose table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.prose th,
.prose td {
border: 1px solid var(--ww-rule);
padding: 12px 16px;
text-align: left;
}
.error-actions {
margin-top: 34px;
} .search-form {
display: flex;
gap: 0;
max-width: 520px;
margin-top: 28px;
}
.search-form__input {
font-family: var(--ww-font);
font-size: 15px;
color: var(--ww-ink);
border: 1px solid var(--ww-rule);
border-right: 0;
padding: 14px 16px;
flex: 1;
min-width: 0;
border-radius: 0;
}
.search-form__input:focus {
outline: 2px solid var(--ww-cobalt);
outline-offset: 0;
position: relative;
z-index: 1;
}
.results {
display: flex;
flex-direction: column;
margin-top: 40px;
border-top: 1px solid var(--ww-rule);
}
.result {
border-bottom: 1px solid var(--ww-rule);
padding: 26px 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.result__title {
font-weight: 800;
font-size: 19px;
letter-spacing: .3px;
text-transform: uppercase;
color: var(--ww-ink);
}
.result__title a:hover {
color: var(--ww-cobalt);
}
.result__excerpt {
font-size: 14px;
line-height: 1.65;
color: var(--ww-body);
}
.result__url {
font-weight: 600;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--ww-fine);
}
.pagination {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 40px;
font-weight: 600;
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.pagination .page-numbers {
border: 1px solid var(--ww-rule);
padding: 12px 16px;
color: var(--ww-ink);
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
border-color: var(--ww-cobalt);
color: var(--ww-cobalt);
}  @media (max-width: 1140px) {
.cards--4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1040px) {
.hero__title {
font-size: 46px;
}
.hero--inner .hero__title {
font-size: 40px;
}
.split,
.contact__inner {
gap: 56px;
}
} @media (max-width: 920px) {
:root {
--ww-gutter: 36px;
}
.nav-desktop {
display: none;
}
.nav-burger {
display: block;
}
.hero {
padding-top: 40px;
}
.hero--inner {
padding: 60px var(--ww-gutter) 68px;
}
.hero__inner {
grid-template-columns: 1fr;
gap: 32px;
}
.hero__copy {
padding-bottom: 0;
}
.hero__intro,
.hero--inner .hero__intro {
max-width: 560px;
}
.hero__media {
align-self: stretch;
margin-top: 8px;
}
.hero__watermark {
right: -22%;
height: 120%;
opacity: .1;
}
.split,
.contact__inner {
grid-template-columns: 1fr;
gap: 44px;
}
.booking__text,
.coverage__text {
max-width: none;
}
.cards--2,
.cards--3 {
grid-template-columns: 1fr;
}
.statement {
padding: 72px var(--ww-gutter) 64px;
}
.statement__text {
font-size: 23px;
}
.services {
padding-bottom: 72px;
}
.booking,
.coverage,
.contact,
.service-features,
.page-body {
padding-top: 72px;
padding-bottom: 72px;
}
} @media (max-width: 720px) {
:root {
--ww-gutter: 28px;
}
.hero__title {
font-size: 38px;
letter-spacing: .5px;
}
.hero--inner .hero__title {
font-size: 34px;
}
.hero__intro {
font-size: 15px;
margin: 18px 0 28px;
}
.brand {
gap: 12px;
}
.brand__name {
font-size: 17px;
letter-spacing: 2px;
}
.brand__tagline {
font-size: 8px;
letter-spacing: 2.2px;
}
.brand > .ww-mark {
width: 42px;
height: 42px;
}
.cards--4 {
grid-template-columns: 1fr;
}
.card {
padding: 34px 28px;
}
.statement__text {
font-size: 20px;
}
.section-heading {
font-size: 22px;
}
.places__item {
font-size: 20px;
letter-spacing: 1.5px;
}
.quote-band__title,
.quote-band--home .quote-band__title {
font-size: 26px;
}
.quote-band__inner {
flex-direction: column;
align-items: flex-start;
gap: 28px;
}
.quote-band__lead {
gap: 24px;
}
.quote-band__car {
width: 170px;
}
.quote-band__actions .btn {
flex: 1 1 auto;
text-align: center;
}
.field-row {
grid-template-columns: 1fr;
}
.enquiry-success {
padding: 40px 28px;
}
.site-footer__inner {
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
.site-footer__meta {
align-items: flex-start;
text-align: left;
}
.site-footer__legal-links {
justify-content: flex-start;
}
.quote-modal__panel {
padding: 40px 28px 32px;
}
.page-body__inner .prose h2 {
font-size: 21px;
}
} @media (max-width: 480px) {
:root {
--ww-gutter: 22px;
}
.hero__title {
font-size: 32px;
}
.hero--inner .hero__title {
font-size: 29px;
}
.statement__text {
font-size: 18px;
}
.brand__name {
font-size: 15px;
letter-spacing: 1.5px;
}
.brand > .ww-mark {
width: 38px;
height: 38px;
}
.btn-row .btn {
flex: 1 1 100%;
text-align: center;
}
.mobile-menu {
padding: 20px 22px 28px;
}
.mobile-menu__link {
font-size: 21px;
padding: 16px 0;
}
.mobile-menu__nav {
margin-top: 32px;
}
.step {
gap: 18px;
}
.quote-band__car {
width: 140px;
}
.places__item {
font-size: 18px;
}
.contact-direct__value {
font-size: 19px;
}
.contact-direct__item--email .contact-direct__value {
font-size: 15px;
}
} @media print {
.site-nav,
.nav-burger,
.mobile-menu,
.quote-modal,
.quote-band,
.hero__watermark {
display: none !important;
}
body {
color: #000;
}
.site-header {
background: none;
}
.hero__title,
.hero__intro {
color: #000;
}
}