@charset "utf-8";
/* =============================================================================
skylabdigital.com
One stylesheet. Replaces the old style.css + slick.css + a patch file that
only existed to win the cascade. Same design, rebuilt: no float layout, no
carousel library, custom properties for the palette, native nesting.
Layout note: is text-align:center and a lot of the design leans on
it, so it stays. Blocks that want ragged-left say so.
========================================================================== */
:root {
/* Brand */
--blue: #0162ad;
--blue-grad: linear-gradient(90deg, #008ed9 0%, #03a9e0 50%, #08d2ec 100%);
--orange-grad: linear-gradient(90deg, #f07000 0%, #ff8a00 50%, #ffa733 100%);
--headline-grad: linear-gradient(to right, #2e55dc 0%, #2383e5 50%, #18b1ed 100%);
/* Ink */
--ink: #000;
--ink-heading: #313552;
--ink-inverse: #fff;
/* Surfaces */
--surface: #eff0f9;
--surface-tint: #f5f6fc;
--surface-dark: #111;
--surface-nav: #162745;
/* Lines */
--rule: #d7d7d7;
--rule-soft: #dedede;
--rule-mid: #ccc;
/* Metrics */
--header-height: 70px;
--container: 1170px;
--radius: 15px;
--shadow-card: 0 0 9px 4px rgb(0 0 0 / 0.1);
}
/* ── Reset ────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }
:where(body, h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure, form, fieldset) {
margin: 0;
padding: 0;
}
body {
margin: 0;
background: #fff;
color: var(--ink);
font-family: Poppins, system-ui, sans-serif;
font-weight: 400;
text-align: center;
-webkit-font-smoothing: antialiased;
}
:where(ul, ol) { list-style: none; }
a {
color: inherit;
text-decoration: none;
}
img {
border: 0;
height: auto;
max-width: 100%;
}
button {
font: inherit;
color: inherit;
}
fieldset { border: 0; }
/* Anything focused by keyboard gets a visible ring. The old build removed
outlines everywhere and put nothing back. */
:focus-visible {
outline: 3px solid #08d2ec;
outline-offset: 3px;
}
html {
scroll-behavior: smooth;
/* In-page links used to land under the fixed header. */
scroll-padding-top: calc(var(--header-height) + 20px);
}
@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;
}
}
/* ── Fonts ────────────────────────────────────────────────────────────────── */
@font-face {
font-family: Poppins;
src: url("../fonts/Poppins-Light.woff2") format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Poppins;
src: url("../fonts/Poppins-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Poppins;
src: url("../fonts/Poppins-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Poppins;
src: url("../fonts/Poppins-SemiBold.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Poppins;
src: url("../fonts/Poppins-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Poppins;
src: url("../fonts/Poppins-BoldItalic.woff2") format("woff2");
font-weight: 700;
font-style: italic;
font-display: swap;
}
/* ── Shared ───────────────────────────────────────────────────────────────── */
.container {
width: var(--container);
margin-inline: auto;
position: relative;
}
.section-title {
font-size: 60px;
line-height: 60px;
color: var(--ink-heading);
font-weight: 600;
margin-top: 20px;
&.is-inverse { color: var(--ink-inverse); }
}
.prose {
font-size: 19px;
line-height: 29px;
color: var(--ink);
font-weight: 400;
margin-top: 20px;
&.is-inverse { color: var(--ink-inverse); }
}
/* The three dots that sit above a section heading. Decorative. */
.eyebrow {
display: inline-block;
vertical-align: middle;
margin: -4px 15px 0 0;
}
.eyebrow--center {
display: block;
margin: 0 auto 5px;
}
.btn-wrap {
display: inline-block;
vertical-align: middle;
margin-top: 40px;
width: 100%;
max-width: 270px;
text-align: center;
/* Centred under its column rather than flush left — the column is wider
than the button, so left-aligned read as a mistake. */
&.btn-wrap--wide {
display: block;
max-width: 440px;
margin-inline: auto;
}
}
.btn {
display: block;
width: 100%;
border: 2px solid #252525;
border-radius: 100px;
font-size: 20px;
line-height: 20px;
padding: 25px 0 21px;
color: var(--ink);
font-weight: 600;
letter-spacing: 0.3px;
cursor: pointer;
background: none;
appearance: none;
& img {
display: inline-block;
vertical-align: middle;
margin: -2px 0 0 15px;
}
&:hover {
background: var(--blue-grad);
border-color: #008ed9;
color: var(--ink-inverse);
}
&:hover img { filter: brightness(0) invert(1); }
}
/* Approved 2026-08: orange CTA that turns blue on hover. */
.btn--accent {
background: var(--orange-grad);
border-color: #f07000;
color: var(--ink-inverse);
& img { filter: brightness(0) invert(1); }
}
.btn--inverse {
border-color: #fff;
color: var(--ink-inverse);
& img { filter: brightness(0) invert(1); }
}
/* ── Header ───────────────────────────────────────────────────────────────── */
/* Sticky rather than the old fixed/relative/negative-margin dance. The
negative margin lets the hero start underneath it, as before. */
.masthead {
position: sticky;
top: 0;
z-index: 11;
height: var(--header-height);
margin-bottom: calc(var(--header-height) * -1);
transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out;
/* Set by JS once the page has scrolled past the hero's first 110px. */
&.is-stuck {
background: var(--surface-nav);
box-shadow: 0 3px 4px 0 rgb(0 0 0 / 0.1);
}
/* Logo left, menu centred in the container, phone right — the menu's
centring must not depend on how wide the other two are. */
& .container {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
height: 100%;
}
}
.masthead__logo { justify-self: start; }
/* Marks the end of the page for the menu highlight. */
#page-end-sentinel {
display: block;
height: 1px;
}
/* Tells the header when to go solid. */
#scroll-sentinel {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 110px;
pointer-events: none;
}
.nav {
justify-self: center;
& ul { display: flex; }
& li { padding: 4px 15px; }
& a {
color: var(--ink-inverse);
font-size: 15px;
line-height: 15px;
letter-spacing: 0.5px;
}
& a.is-active { color: #1bb0ff; }
}
.phone-btn {
justify-self: end;
border: 1px solid #fff;
border-radius: 100px;
color: var(--ink-inverse);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.3px;
text-align: center;
padding: 12px 20px;
height: 48px;
&:hover {
background: var(--blue-grad);
border-color: #008ed9;
}
}
/* ── Mobile nav ───────────────────────────────────────────────────────────── */
.nav-toggle {
display: none;
justify-self: end;
background: none;
border: 0;
padding: 0;
cursor: pointer;
z-index: 16;
}
.nav-toggle__bar {
display: block;
width: 25px;
height: 3px;
border-radius: 4px;
background: #fff;
transition: transform 0.4s, opacity 0.4s;
& + & { margin-top: 4px; }
}
.nav-toggle[aria-expanded="true"] {
& .nav-toggle__bar:nth-child(1) { transform: rotate(-45deg) translate(-5px, 5px); }
& .nav-toggle__bar:nth-child(2) { opacity: 0; }
& .nav-toggle__bar:nth-child(3) { transform: rotate(45deg) translate(-5px, -5px); }
}
.mobile-nav {
position: fixed;
inset: var(--header-height) 0 0;
z-index: 10;
background: #fff;
border-top: 1px solid #ddd;
overflow-y: auto;
text-align: left;
/* Closed. Kept in the DOM so the transition has something to animate. */
visibility: hidden;
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
&.is-open {
visibility: visible;
opacity: 1;
transform: none;
}
& li { border-bottom: 1px solid #ddd; }
& a {
display: block;
padding: 13px 20px 10px;
font-size: 16px;
color: var(--ink);
}
}
/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
background: url("../images/banner.jpg") no-repeat center top #151b27;
/* The header overlaps the top of the hero, so keep its height clear. */
padding-top: var(--header-height);
padding-bottom: 50px;
position: relative;
}
.hero__inner {
width: 79%;
text-align: left;
padding: 100px 0;
}
.hero__title {
font-size: 88px;
line-height: 94px;
color: var(--ink-inverse);
font-weight: 700;
& em {
font-style: italic;
background: var(--headline-grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
}
.hero .prose { margin-top: 50px; }
.hero .btn-wrap { margin-top: 50px; }
.hero__cue {
position: absolute;
top: 620px;
left: 50%;
transform: translateX(-50%);
}
/* ── Client logo strip ────────────────────────────────────────────────────── */
.logos {
border-bottom: 1px solid var(--rule-soft);
padding: 25px 0 35px;
}
.logos__viewport {
display: flex;
margin-top: 20px;
overflow: hidden;
}
.logos__track {
display: flex;
align-items: center;
flex: 0 0 auto;
/* Duration comes from the template: ~5s per logo, so the strip travels at
the same speed however many there are. */
animation: logos-marquee var(--marquee-duration, 30s) linear infinite;
}
.logos__viewport:hover .logos__track { animation-play-state: paused; }
.logos__item {
flex: 0 0 auto;
padding-inline: 25px;
}
.logos__item img {
display: block;
margin-inline: auto;
}
@keyframes logos-marquee {
to { transform: translateX(-100%); }
}
/* No motion: one static set the visitor can scroll by hand. */
@media (prefers-reduced-motion: reduce) {
.logos__viewport { overflow-x: auto; }
.logos__track { animation: none; }
.logos__track:not(:first-child) { display: none; }
}
/* ── About ────────────────────────────────────────────────────────────────── */
.about { padding: 60px 0; }
.about__grid {
display: flex;
align-items: center;
}
.about__figure { width: 43%; }
.about__figure img,
.about__figure-mobile img {
display: block;
margin-inline: auto;
}
.about__body {
width: 50%;
text-align: left;
margin-left: 70px;
}
.stats {
display: flex;
margin-top: 40px;
}
.stats__item {
width: 33.33%;
text-align: center;
border-right: 1px solid var(--rule);
&:last-child,
&:nth-child(3) { border-right: none; }
& dt {
font-size: 32px;
line-height: 36px;
color: var(--ink);
font-weight: 900;
}
& dd {
margin: 4px 0 0;
font-weight: 500;
}
}
/* ── Verticals ────────────────────────────────────────────────────────────── */
.verticals {
padding: 70px 0 20px;
background: var(--surface-tint);
}
.verticals__tabs {
display: flex;
justify-content: center;
width: 100%;
max-width: 880px;
margin: 40px auto 0;
}
.vertical-tab {
flex: 0 0 175px;
padding: 0 22px;
margin: 5px 0;
border: 0;
background: none;
text-align: center;
cursor: pointer;
position: relative;
&::after {
content: "";
position: absolute;
right: 0;
top: 40px;
bottom: 0;
border-right: 1px solid var(--rule);
}
&:last-child::after { border-right: none; }
& img {
display: block;
margin: 0 auto 10px;
filter: grayscale(100%);
opacity: 0.5;
transition: filter 0.2s, opacity 0.2s;
}
&[aria-selected="true"] img {
filter: none;
opacity: 1;
}
}
.vertical-tab__label {
display: block;
font-size: 18px;
line-height: 23px;
color: var(--ink-heading);
font-weight: 600;
opacity: 0.5;
/* Two lines' worth, so single-word verticals still line up. */
min-height: 46px;
transition: opacity 0.2s;
.vertical-tab[aria-selected="true"] & { opacity: 1; }
}
.verticals__panels {
position: relative;
max-width: 1030px;
width: 100%;
margin: 30px auto 0;
}
.vertical-panel[hidden] { display: none; }
.vertical-panel {
border-radius: 20px;
margin-bottom: 70px;
padding: 100px 50px 0 60%;
/* Contains the card's negative bottom margin instead of letting it collapse
out of the panel — what the old float layout did by accident. */
display: flow-root;
/* Image comes from the vertical's "Background image" field in the admin. */
background: var(--tab-image) center top no-repeat;
background-size: cover;
animation: panel-in 0.35s ease;
}
@keyframes panel-in {
from { opacity: 0; }
}
.vertical-panel__card {
background: #fff;
border-radius: 10px;
padding: 25px 25px 70px;
text-align: left;
box-shadow: var(--shadow-card);
margin-bottom: -60px;
position: relative;
z-index: 1;
}
.vertical-panel__title {
position: relative;
font-size: 30px;
line-height: 34px;
font-weight: 700;
color: var(--ink-heading);
padding-right: 60px;
& img {
position: absolute;
right: 0;
top: 10px;
}
}
.vertical-panel__card .prose { min-height: 176px; }
/* Prev/next only exist on phones, where the panel is a card you flick through. */
.verticals__arrow { display: none; }
/* ── Why us ───────────────────────────────────────────────────────────────── */
.why { padding: 60px 0 20px; }
.why__head {
width: 70%;
text-align: left;
}
.why__list { margin-top: 20px; }
.why__item {
position: relative;
&:last-child .why__text { border-bottom: none; }
}
.why__body {
padding: 30px 43% 0 75px;
text-align: left;
position: relative;
}
.why__icon {
position: absolute;
left: 0;
top: 35px;
}
.why__title {
font-size: 30px;
line-height: 36px;
color: var(--ink);
font-weight: 600;
}
.why__text {
margin-top: 10px;
border-bottom: 1px solid var(--rule-mid);
padding-bottom: 30px;
min-height: 176px;
}
.why__photo {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
border-radius: 10px;
}
/* ── Services ─────────────────────────────────────────────────────────────── */
.services { padding: 60px 0 20px; }
.services__box {
background: var(--surface);
border-radius: var(--radius);
overflow: hidden;
}
.services__head {
background: url("../images/s2-box-bg.jpg") no-repeat center top #222539;
padding: 40px 45px 0;
border-radius: var(--radius);
}
.services__head .prose { margin-top: 20px; }
.services__grid {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 30px;
}
.services__item {
width: 23.5%;
border-radius: 10px 10px 0 0;
background: var(--surface);
padding: 0 10px 25px;
margin-top: 50px;
& img {
display: inline-block;
vertical-align: top;
margin: -43px auto 20px;
}
& .prose { margin-top: 10px; }
}
.services__item-title {
font-size: 24px;
line-height: 30px;
color: var(--ink);
font-weight: 600;
/* Room for the tallest title, so all four blurbs start on the same line —
the old markup padded two of them with a hand-typed
. */
min-height: 90px;
}
.services__foot { padding: 10px 30px 50px; }
/* ── Process ──────────────────────────────────────────────────────────────── */
.process { padding: 70px 0 30px; }
.process__list {
width: 100%;
max-width: 1030px;
margin: 35px auto 0;
position: relative;
}
.process__step {
position: relative;
padding: 30px 0;
display: flex;
/* The vertical spine between steps. */
&::before {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0;
bottom: -40px;
width: 2px;
background: #d2d2d2;
}
&:first-child::before { top: 40px; }
&:last-child::before { display: none; }
&:nth-child(odd) { justify-content: flex-start; }
&:nth-child(even) { justify-content: flex-end; }
}
.process__body {
width: 50%;
position: relative;
/* The node on the spine. */
&::after {
content: "";
position: absolute;
right: -8px;
top: 8px;
width: 15px;
height: 15px;
border-radius: 50%;
background: #d2d2d2;
}
.process__step:nth-child(odd) & {
padding-right: 35px;
text-align: right;
}
.process__step:nth-child(even) & {
padding-left: 35px;
text-align: left;
}
.process__step:nth-child(even) &::after {
right: auto;
left: -8px;
}
.process__step:first-child &::after,
.process__step:last-child &::after { background: var(--blue-grad); }
}
.process__title {
font-size: 24px;
line-height: 30px;
color: var(--ink-heading);
font-weight: 600;
}
.process__body .prose { margin-top: 15px; }
.process__number {
position: absolute;
right: -200px;
top: -5px;
width: 160px;
padding: 12px 0 9px;
font-size: 18px;
line-height: 20px;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--ink-inverse);
background: var(--blue-grad);
border-radius: 50px;
text-align: center;
.process__step:nth-child(even) & {
right: auto;
left: -200px;
}
}
/* ── Contact ──────────────────────────────────────────────────────────────── */
.contact {
padding: 130px 0 10px;
background: #fff;
position: relative;
/* The dark band the card sits half-in. */
&::before {
content: "";
position: absolute;
inset: 60% 0 0;
background: var(--surface-dark);
}
}
.contact__box {
position: relative;
background: url("../images/contct-bg.jpg") no-repeat center top #1c1f34;
padding: 0 60px 45px 50px;
border-radius: var(--radius);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.contact__intro {
width: 50%;
text-align: left;
padding-top: 45px;
& .eyebrow--center { margin: 0 0 5px; }
}
.contact__lede {
font-size: 16px;
font-style: italic;
font-weight: 700;
color: var(--ink-inverse);
}
.contact__address {
position: relative;
padding-left: 45px;
margin-top: 40px;
font-size: 19px;
line-height: 27px;
font-style: normal;
color: var(--ink-inverse);
text-align: left;
& img {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
}
.contact-card {
width: 45%;
padding: 40px;
background: var(--blue);
border-radius: var(--radius);
margin-top: -70px;
&.is-sent { background: #fff; }
}
.contact-card form {
display: flex;
flex-direction: column;
}
.contact-form__title {
font-size: 45px;
line-height: 45px;
color: var(--ink-inverse);
font-weight: 600;
text-align: center;
margin-bottom: 6px;
}
.contact-form__fields { margin-top: 20px; }
.field + .field { margin-top: 18px; }
.field__input {
display: block;
width: 100%;
height: 62px;
background: #fff;
border: 0;
border-radius: 10px;
padding: 24px 18px 20px;
font: 400 17px/24px Poppins, system-ui, sans-serif;
color: var(--ink);
&::placeholder { color: #6b6b6b; }
}
textarea.field__input {
min-height: 110px;
padding: 15px 18px;
resize: none;
}
.contact-form__captcha {
display: flex;
justify-content: center;
}
.contact-form__actions {
margin: 26px 0 0;
text-align: center;
}
.contact-form__submit {
display: inline-block;
width: auto;
padding: 20px 48px 17px;
background: var(--orange-grad);
border-color: #f07000;
color: var(--ink-inverse);
& img { filter: brightness(0) invert(1); }
}
.form-error {
margin: 10px 0 0;
font-weight: 600;
color: #ffd166;
text-align: center;
}
.form-sent {
font-size: 26px;
line-height: 38px;
color: var(--blue);
font-weight: 600;
text-align: center;
padding: 60px 15px;
}
/* ── Editor-written pages (Privacy Policy) ────────────────────────────────── */
.page-content {
text-align: left;
/* One line-height of gap == the blank line the old static page spelled out
with
between every paragraph. */
& p { margin-bottom: 29px; }
& p:last-child { margin-bottom: 0; }
& :is(h1, h2, h3, h4) {
margin: 28px 0 12px;
font-weight: 600;
}
& :is(ul, ol) { margin: 0 0 18px 20px; }
& li { list-style: disc; margin-bottom: 6px; }
& a { text-decoration: underline; }
}
.page-header { padding: 70px 0 20px; background: var(--surface-tint); }
.page-body { padding: 60px 0 20px; }
/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer {
padding: 35px 0 40px;
& p + p { margin-top: 8px; }
background: var(--surface-dark);
color: var(--ink-inverse);
font-size: 16px;
line-height: 20px;
letter-spacing: 0.5px;
& a { text-decoration: underline; }
}
/* ── Utilities ────────────────────────────────────────────────────────────── */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.mob-only,
.tab-only { display: none; }
/* =============================================================================
Breakpoints. Kept at the original 1200 / 1023 / 767 so the design lands
where it always has.
========================================================================== */
@media only screen and (max-width: 1200px) {
:root { --container: 1004px; }
.nav a { font-size: 14px; line-height: 14px; }
.hero__title { font-size: 70px; line-height: 70px; }
.logos__item { padding-inline: 17px; }
.section-title { font-size: 50px; line-height: 56px; }
.prose { font-size: 17px; line-height: 25px; letter-spacing: 0.5px; }
.services__head { padding: 40px 25px 0; }
.services__item-title { font-size: 22px; line-height: 28px; min-height: 84px; }
.why__photo { width: 420px; }
.contact__intro { width: 52%; }
.contact-card { padding: 25px; }
.page-content p { margin-bottom: 25px; }
}
@media only screen and (max-width: 1023px) {
:root { --container: 750px; }
.nav,
.phone-btn { display: none; }
.nav-toggle,
.tab-only { display: block; }
.hero__inner { padding: 60px 0; }
.hero__title { font-size: 56px; line-height: 62px; }
.hero .prose { margin-top: 20px; }
.hero .btn-wrap { margin-top: 30px; }
.hero__cue { top: 430px; }
.logos { padding: 15px 0 20px; }
.logos__viewport { margin-top: 5px; }
.prose { font-size: 16px; line-height: 24px; }
.section-title { font-size: 38px; line-height: 44px; }
.about__body { width: 53%; margin-left: 25px; }
.stats__item dt { font-size: 26px; line-height: 32px; }
.stats__item dd { font-size: 14px; line-height: 18px; margin-top: 5px; }
.services__head { padding: 25px 15px 0; }
.services__item { width: 24%; padding: 0 5px 20px; }
.services__item img { width: 66px; margin: -33px auto 20px; }
.services__item-title { font-size: 17px; line-height: 25px; min-height: 75px; }
.why__photo { width: 310px; }
/* The tab strip stops fitting — let it scroll instead of squashing. */
.verticals__tabs {
max-width: 750px;
justify-content: flex-start;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.verticals__tabs::-webkit-scrollbar { display: none; }
.vertical-tab { scroll-snap-align: center; }
.vertical-panel { padding: 40px 30px 20px 55%; margin-bottom: 50px; }
.vertical-panel__card { padding: 20px 20px 50px; }
.vertical-panel__title { font-size: 24px; line-height: 30px; }
.vertical-panel__title img { width: 40px; }
.vertical-panel__card .btn-wrap { margin-top: 20px; }
.contact__box { padding: 0 15px 25px; }
.contact__intro { width: 40%; }
.contact-card { padding: 20px; width: 60%; }
.contact-card form {
display: flex;
flex-direction: column;
}
.contact-form__title { font-size: 30px; line-height: 36px; }
.contact-form__fields { margin-top: 10px; }
.contact__address { font-size: 15px; line-height: 20px; }
.page-content p { margin-bottom: 24px; }
}
@media only screen and (max-width: 767px) {
:root {
--container: 100%;
--header-height: 55px;
}
.container {
padding-inline: 15px;
max-width: 600px;
}
.tab-only { display: none; }
.mob-only { display: block; }
.hide-mob { display: none; }
.masthead__logo { width: 150px; }
.hero { padding-bottom: 30px; }
.hero__inner { width: 100%; padding: 30px 0 0; text-align: center; }
.hero__title { font-size: 32px; line-height: 38px; letter-spacing: 0.5px; }
.hero .btn-wrap { margin-top: 25px; }
.hero__cue { display: none; }
.btn-wrap { max-width: 230px; margin-top: 20px; }
.btn { font-size: 17px; line-height: 25px; padding: 18px 0 14px; }
.btn img { width: 25px; }
.logos { padding: 15px 0; }
.logos__item { padding-inline: 15px; }
/* Each logo carries its own mobile width from the admin. */
.logos__item img { width: var(--logo-mobile-width, 105px); }
.about { padding: 30px 0 35px; }
.about__grid { display: block; }
.about__body {
width: 100%;
margin-left: 0;
text-align: left;
}
.about__figure-mobile img { margin: 20px auto 5px; }
.eyebrow,
.contact__intro .eyebrow--center { width: 45px; margin: -2px 10px 0 0; }
.eyebrow--center { width: 45px; }
.section-title { font-size: 28px; line-height: 36px; margin-top: 8px; }
.stats {
flex-wrap: wrap;
margin-top: 25px;
}
.stats__item {
position: relative;
width: 50%;
padding: 20px 15px;
border-right: none;
}
.stats__item::before,
.stats__item::after {
content: "";
position: absolute;
left: 15px;
right: 0;
top: 15px;
bottom: 0;
border-bottom: 1px solid var(--rule);
}
.stats__item::after {
border-bottom: none;
border-right: 1px solid var(--rule);
bottom: 15px;
}
.stats__item:nth-child(1)::before { right: 15px; }
.stats__item:nth-child(3)::before,
.stats__item:nth-child(4)::before { display: none; }
.services { padding: 35px 0 15px; }
.services__head { padding: 20px 10px 0; }
.services__head .prose { margin-top: 12px; }
.services__grid { margin-top: 10px; padding: 0 15px; }
.services__item {
width: 100%;
border-radius: var(--radius);
padding: 0 15px 20px;
}
.services__item:last-child { border-radius: var(--radius) var(--radius) 0 0; }
.services__item img { width: 60px; margin: -30px auto 10px; }
.services__item-title { min-height: 0; }
.services__foot { padding: 0 15px 25px; }
.why { padding: 35px 0 15px; }
.why__head { width: 100%; }
.why__list { margin: 0; }
.why__item {
margin-top: 30px;
padding-bottom: 30px;
border-bottom: 1px solid var(--rule);
}
.why__item:last-child { padding-bottom: 0; border-bottom: none; }
.why__body { padding: 0; }
.why__title {
font-size: 20px;
line-height: 26px;
padding: 10px 0 10px 55px;
position: relative;
}
.why__icon { width: 45px; top: 50%; transform: translateY(-50%); }
.why__text { padding-bottom: 0; border: none; min-height: 0; }
.why__photo {
position: static;
transform: none;
width: 100%;
margin-top: 15px;
}
.process { padding: 35px 0; }
.process__list { margin-top: 10px; }
.process__step { padding: 25px 0 0; }
.process__step::before { transform: none; left: 5px; }
.process__body,
.process__step:nth-child(odd) .process__body,
.process__step:nth-child(even) .process__body {
width: 100%;
text-align: left;
padding: 0 0 20px 25px;
}
.process__body::after,
.process__step:nth-child(even) .process__body::after {
right: auto;
left: -1px;
top: 13px;
}
.process__number,
.process__step:nth-child(even) .process__number {
position: static;
right: auto;
left: auto;
}
.process__title { margin-top: 15px; font-size: 22px; line-height: 28px; }
.verticals { padding: 35px 0 30px; }
.verticals__panels { padding-inline: 5%; }
.vertical-tab { flex-basis: 160px; padding: 0 10px; }
.vertical-panel {
padding: 0;
width: 100%;
background: #fff;
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 0 9px 1px rgb(0 0 0 / 0.1);
margin-bottom: 10px;
}
.vertical-panel__photo { display: block; width: 100%; }
.vertical-panel__card {
margin: 0;
padding: 20px 20px 25px;
box-shadow: none;
}
/* Flick through the verticals like the old carousel let you. */
.verticals__arrow {
display: block;
position: absolute;
top: 50%;
margin-top: -22px;
width: 44px;
height: 44px;
border: 1px solid #b0b0b0;
border-radius: 50%;
background: no-repeat center / 100%;
cursor: pointer;
z-index: 2;
}
.verticals__arrow--prev {
left: -10px;
background-image: url("../images/prev.png");
}
.verticals__arrow--next {
right: -10px;
background-image: url("../images/next.png");
}
.contact { padding: 35px 0 20px; }
.contact__box { padding: 20px 10px; }
.contact__intro { width: 100%; padding: 5px 5px 0; }
.contact__address {
margin-top: 30px;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.5px;
}
.contact-card { width: 100%; padding: 15px; margin-top: 25px; }
.site-footer { padding: 30px 0; font-size: 14px; line-height: 22px; }
}