/* ==========================================================================
   sptechies.com — site stylesheet
   --------------------------------------------------------------------------
   Reproduces the WordPress/Astra/Elementor site this replaced (captured
   2026-09-17), rebuilt on plain markup emitted by cms/render/*.php. Values
   are the ones measured on the old pages (capture/probe.js), not guesses:
   a 1120px content column (Elementor's 1140px box less 10px column padding),
   two 550px columns with a 20px gap, Lato throughout, the #0b7dd8 blue.

   Class names are the contract with the renderers — change them together.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts -- */
/* Lato (SIL Open Font License), self-hosted: the old site pulled it from
   Google on every visit. The design asks for weights 500 and 600, which Lato
   does not have; browsers use the 400 and 700 files for them, exactly as the
   old site rendered. */
@font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/lato-300.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lato-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/lato-400i.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/lato-700.woff2") format("woff2"); }

/* --------------------------------------------------------------- tokens -- */
:root {
  /* The old site's blues (#0b7dd8 / #0b7cd8) and teal (#3bbfce) failed WCAG AA
     contrast as text colours (4.25, 4.30 and 2.20 to 1). Text and filled
     buttons use the nearest shades that pass; decoration keeps the original. */
  --sp-blue: #0b73c9;        /* link text on white: 4.87:1 */
  --sp-blue-btn: #0b73c9;    /* white text on filled buttons: 4.87:1 */
  --sp-blue-deco: #0b7dd8;   /* accent lines, borders, icon discs (original) */
  --sp-teal: #177d88;        /* label on the white buttons in blue bands: 4.86:1 (was #3bbfce) */
  --sp-ink: #0a0a0a;         /* body text */
  --sp-heading: #202020;
  --sp-grey-text: #3e3e3e;
  --sp-muted: #707070;
  --sp-band: #edf1f4;        /* newsletter band */
  --sp-footer: #2e2e2e;
  --sp-dark: #4a4141;        /* optional dark band */
  --sp-content: 1120px;
  --sp-gutter: 10px;
  --sp-font: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------- base -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sp-font);
  font-size: 16px;
  line-height: 1.85714;
  font-weight: 400;
  color: var(--sp-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; border: 0; }
a { color: var(--sp-blue); text-decoration: none; }
a:hover { color: var(--sp-ink); }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; color: var(--sp-heading); }
p { margin: 0 0 1.6em; }
ul, ol { margin: 0 0 1.5em 3em; padding: 0; }
button, input, textarea, select { font: inherit; }

:focus-visible { outline: 2px solid var(--sp-blue); outline-offset: 3px; }
.sp-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sp-skip {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  background: #fff; color: var(--sp-ink); padding: 10px 16px; border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
}
.sp-skip:focus { top: 12px; }

.sp-container {
  width: 100%;
  max-width: calc(var(--sp-content) + 2 * var(--sp-gutter));
  margin: 0 auto;
  padding: 0 var(--sp-gutter);
}

.sp-icon { display: inline-block; flex: none; vertical-align: middle; }
.sp-empty {
  display: flex; align-items: center; justify-content: center; min-height: 120px;
  border: 2px dashed #9aa7b4; color: #51606f; font-size: 14px; border-radius: 8px;
}

/* -------------------------------------------------------------- buttons -- */
.sp-btn {
  display: inline-block;
  font-size: 15px; font-weight: 500; line-height: 1; text-transform: uppercase;
  color: #fff; background: var(--sp-blue-btn);
  padding: 13px 20px; border-radius: 10px; border: 0; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.sp-btn:hover { background: #000; color: #fff; }
.sp-btn .sp-icon { margin: -2px 0 0 6px; }
.sp-btn--light {
  font-size: 16px; text-transform: none;
  background: #fff; color: var(--sp-teal);
  padding: 15px 30px; border-radius: 5px;
}
.sp-btn--light:hover { background: #000; color: #fff; }

/* ------------------------------------------------------ section heading -- */
.sp-heading {
  font-size: 50px; font-weight: 500; line-height: 60px;
  color: var(--sp-heading); text-align: center; text-transform: capitalize;
}
.sp-heading--light { color: #fff; }
.sp-accent {
  display: block; width: 87px; height: 7px; margin: 33px auto 0;
  background: linear-gradient(90deg, var(--sp-blue-deco) 43px, #bdbdbd 43px);
}

/* rich text defaults */
.sp-rich > :last-child { margin-bottom: 0; }
.sp-rich ul { margin-left: 0; list-style: none; }

/* --------------------------------------------------------------- header -- */
.sp-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  background: linear-gradient(0deg, rgba(255, 255, 240, 0) 0%, rgba(255, 255, 240, .2) 50%, rgba(255, 255, 240, .3) 100%);
}
.sp-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 120px; padding: 0 20px;
}
.sp-header__logo { display: block; flex: none; }
.sp-header__logo img { display: block; width: 120px; height: auto; padding: 10px; }
.sp-header__name { font-size: 24px; font-weight: 700; color: var(--sp-heading); }
.sp-nav__list { display: flex; flex-wrap: wrap; justify-content: flex-end; margin: 0; padding: 0; list-style: none; }
.sp-nav__link {
  display: block; padding: 0 16px; line-height: 64px;
  font-size: 16px; color: var(--sp-ink);
}
.sp-nav__link:hover, .sp-nav__link[aria-current="page"] { color: var(--sp-blue); }
.sp-nav__link[aria-current="page"] { text-decoration: underline; }
.sp-nav-toggle { display: none; }

/* ----------------------------------------------------------- home hero -- */
.sp-hero {
  position: relative;
  min-height: 858px;
  margin-bottom: 60px;
  background-color: #fff;
  background-size: cover;
  background-position: 50% 100%;
  background-repeat: no-repeat;
}
.sp-hero > .sp-container { padding-top: 190px; padding-bottom: 320px; }
.sp-hero__box { max-width: 500px; margin-left: -10px; }
.sp-hero__title { font-size: 45px; font-weight: 500; line-height: 1.3; color: var(--sp-heading); margin-bottom: 8px; }
.sp-hero__text { font-size: 21px; line-height: 32px; color: #000; }
.sp-hero__text p { margin-bottom: 2px; }
.sp-hero .sp-btn { margin-top: 22px; }

/* ---------------------------------------------------------- page banner -- */
.sp-pagehero {
  position: relative;
  padding: 170px 0 270px;
  background-color: #fff;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.sp-pagehero--focus-right { background-position: 100% 50%; }
.sp-pagehero--focus-left { background-position: 0 50%; }
.sp-pagehero--focus-top { background-position: 50% 0; }
.sp-pagehero--focus-bottom { background-position: 50% 100%; }
.sp-pagehero--dark { background-color: #fff; }
.sp-pagehero__box { max-width: 520px; padding: 20px 0; }
.sp-pagehero__title { font-size: 50px; line-height: 60px; font-weight: 500; color: #fff; margin-bottom: 20px; }
.sp-pagehero--title-m .sp-pagehero__title { font-size: 47px; line-height: 61px; }
.sp-pagehero--title-s .sp-pagehero__title { font-size: 43px; line-height: 56px; }
.sp-pagehero--dark .sp-pagehero__title { color: #000; font-weight: 600; }
.sp-pagehero__text { max-width: 500px; font-size: 16px; line-height: 1.85714; color: #fff; }
.sp-pagehero--dark .sp-pagehero__text { color: #000; }
.sp-pagehero__text p, .sp-pagehero__text.sp-rich > :last-child { margin-bottom: 25.6px; }
.sp-pagehero .sp-btn { margin-top: 4px; }

/* ------------------------------------------------------ picture + text -- */
.sp-split { padding: 60px 0 20px; }
.sp-split:last-child, .sp-tiles:last-child, .sp-logos:last-child { margin-bottom: 50px; }
.sp-split--dark { background: var(--sp-dark); padding: 60px 0; }
.sp-split--photo { background-size: cover; background-position: 50% 50%; padding: 60px 0; }
.sp-split--dark .sp-heading, .sp-split--photo .sp-heading,
.sp-split--dark .sp-rich, .sp-split--photo .sp-rich { color: #fff; }
.sp-split .sp-heading { font-size: 30px; line-height: 39px; font-weight: 600; text-transform: none; }
.sp-split .sp-accent { margin-top: 33px; }
.sp-split__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  align-items: center; margin-top: 39.7px;
}
.sp-split--no-heading { padding-top: 40px; }
.sp-split--no-heading .sp-split__row { margin-top: 0; }
.sp-split__media { text-align: center; }
.sp-split__text[style] { padding: var(--sp-inset-y, 0) var(--sp-inset-x, 0); }
/* on a phone the text sits under its picture: keep a little of the inset,
   never the tall padding that only centred it beside the picture */
@media (max-width: 767px) {
  .sp-split__text[style] { padding: min(var(--sp-inset-y, 0px), 50px) min(var(--sp-inset-x, 0px), 30px); }
}
.sp-split__img { display: inline-block; vertical-align: middle; }
.sp-split--above .sp-split__media { margin-top: 30px; }
.sp-split--above .sp-split__img { max-width: 200px; }
.sp-split--above .sp-split__text, .sp-split--text .sp-split__text {
  max-width: var(--sp-content); margin: 25px auto 0; text-align: center;
}
.sp-split__badge { display: block; width: 150px; margin: 20px 0 16px; }
.sp-split .sp-rich { font-size: 18px; line-height: 28px; color: #000; }
.sp-split .sp-rich p { margin-bottom: 15px; }
.sp-split .sp-rich strong { display: block; margin-bottom: 10px; font-weight: 700; }
.sp-split .sp-rich p strong:only-child { margin-bottom: 0; }
.sp-split .sp-rich ul { margin: 0; padding: 0; list-style: none; }
.sp-split .sp-rich li {
  position: relative; padding-left: 25px; margin-bottom: 15px;
  color: var(--sp-grey-text); line-height: 20px; text-align: left;
}
.sp-split .sp-rich li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px;
  background: url("../img/bullet.png") no-repeat 0 0 / 16px 16px;
}
.sp-split--dark .sp-rich li, .sp-split--photo .sp-rich li { color: #fff; }
.sp-split__action { margin: 20px 0 0; }

/* ---------------------------------------------------------------- tiles -- */
.sp-tiles { padding: 60px 0 20px; }
.sp-tiles--attached { padding-top: 20px; }
.sp-tiles__intro { max-width: 800px; margin: 20px auto 0; text-align: center; }
.sp-tiles__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin: 0; padding: 0; list-style: none;
}
.sp-tile {
  display: flex; align-items: center; justify-content: center;
  padding: 30px 15px;
  background-color: #1d3557; background-size: cover; background-position: 50% 50%;
  color: #fff; text-align: center;
  transition: transform .2s;
}
.sp-tile:hover { transform: scale(1.1); }
.sp-tile__label { font-size: 20px; font-weight: 600; line-height: 30px; text-transform: capitalize; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
/* long labels (the Virtual Assistants grid) were set at 17px so they hold one line */
.sp-tiles--small .sp-tile__label { font-size: 17px; line-height: 25.5px; }

/* ---------------------------------------------------------------- logos -- */
.sp-logos { padding: 10px 0 40px; }
.sp-logos--attached { padding-top: 20px; }
.sp-logos__intro {
  max-width: 600px; margin: 25px auto 25px; text-align: center;
  font-size: 24px; line-height: 35px; font-weight: 300; color: #757575; /* was #7e7f7f: 3.9:1 at phone size */
}
.sp-logos .sp-accent + .sp-logos__row { margin-top: 40px; }
.sp-logos__row {
  display: grid; align-items: center; justify-items: center;
  grid-template-columns: repeat(var(--sp-cols, 4), 1fr);
  margin: 0; padding: 0; list-style: none;
}
.sp-logos__row--1 { --sp-cols: 1; }
.sp-logos__row--2 { --sp-cols: 2; }
.sp-logos__row--3 { --sp-cols: 3; }
.sp-logos__row--4 { --sp-cols: 4; }
.sp-logos__row--5 { --sp-cols: 5; }
.sp-logos__row--6 { --sp-cols: 6; }
.sp-logo { padding: 10px; text-align: center; }
.sp-logo img { display: block; margin: 0 auto; transition: transform .2s; }
/* only when the owner set a width: otherwise the width/height attributes size
   the picture before it loads (no layout shift) */
.sp-logo[style] img { width: var(--sp-logo-w); }
.sp-logo img:hover { transform: scale(1.1); }
.sp-logo__caption { display: block; margin-top: 13px; font-size: 13px; line-height: 20px; color: var(--sp-ink); }
/* a captioned logo grid (the PHP frameworks): rows 125.5px apart, as measured */
.sp-logo:has(.sp-logo__caption) { padding: 10px 10px 32.5px; }
.sp-logos__row + .sp-logos__row .sp-logo:has(.sp-logo__caption) { margin-top: 0; }

/* ------------------------------------------------------- service cards -- */
.sp-services {
  padding: 90px 0 160px; margin-bottom: 80px;
  background-size: contain; background-position: 50% 100%; background-repeat: no-repeat;
}
.sp-services__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin: 40px 0 0; padding: 0; list-style: none;
}
.sp-card {
  position: relative; display: flex; align-items: stretch;
  border: 1px solid var(--sp-blue-deco); border-radius: 10px; background: #fff;
  transition: transform .2s, box-shadow .2s;
}
.sp-card:hover, .sp-card:focus-within { transform: scale(1.05); box-shadow: 0 2px 15px #a6a6a6; z-index: 1; }
.sp-card--img-right { flex-direction: row-reverse; }
.sp-card__media { flex: 0 0 49%; }
.sp-card__img { display: block; width: 100%; height: auto; border-radius: 9px 0 0 9px; }
.sp-card--img-right .sp-card__img { border-radius: 0 9px 9px 0; }
.sp-card__body { flex: 1 1 51%; padding: 12px; }
.sp-card__title {
  font-size: 18px; font-weight: 600; line-height: 16px; letter-spacing: -1px;
  text-transform: uppercase; color: var(--sp-ink); margin: 0 0 6px;
}
.sp-card__link { color: inherit; }
.sp-card__link::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
.sp-card__text { font-size: 14px; line-height: 20px; color: var(--sp-ink); }
.sp-card__text ul { margin: 0; }
.sp-card__text li { position: relative; padding-left: 12px; margin-bottom: 5px; }
.sp-card__text li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 9px;
  background: #a0a0a0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9'%3E%3Cpath d='M1.2 0 0 1.2l3.3 3.3L0 7.8 1.2 9l4.5-4.5z'/%3E%3C/svg%3E") no-repeat 0 0 / 6px 9px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9'%3E%3Cpath d='M1.2 0 0 1.2l3.3 3.3L0 7.8 1.2 9l4.5-4.5z'/%3E%3C/svg%3E") no-repeat 0 0 / 6px 9px;
}
.sp-card__text li:last-child { margin-bottom: 0; }
.sp-card__go {
  position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 25px; height: 25px; border-radius: 50%;
  background: var(--sp-blue-deco); color: #fff;
}

/* ----------------------------------------------------------- icon boxes -- */
.sp-features {
  margin: 90px 0 95px; padding-top: 190px;
  background-size: contain; background-position: 50% 0; background-repeat: no-repeat;
}
.sp-features__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 20px;
  margin: 40px 0 0; padding: 0; list-style: none;
}
.sp-feature { position: relative; transition: transform .2s; }
.sp-feature:hover { transform: scale(1.1); z-index: 1; }
.sp-feature__icon {
  position: absolute; left: 0; top: 17px;
  display: flex; align-items: center; justify-content: center;
  width: 88px; height: 88px; border-radius: 50%; background: var(--sp-blue-deco);
}
.sp-feature__img { width: 56px; height: 56px; }
.sp-feature__box {
  margin-left: 37px; padding: 20px 15px 19px 67px;
  border: 1px solid #117fd9; border-radius: 10px; background: #fff;
}
.sp-feature__title {
  font-size: 18px; font-weight: 600; line-height: 27px; text-transform: uppercase;
  color: #414247; margin: -2px 0 3px;
}
.sp-feature__text { font-size: 16px; line-height: 24px; font-weight: 300; color: #000; margin: 0; min-height: 120px; }

/* -------------------------------------------------------- numbers band -- */
.sp-counters {
  padding: 90px 0;
  background-color: #2b3440; background-size: cover; background-position: 50% 50%;
}
.sp-counters__grid {
  display: flex; justify-content: center; gap: 145px;
  margin: 40px 0 0; padding: 0; list-style: none; text-align: center;
}
.sp-counter { display: flex; flex-direction: column-reverse; align-items: center; min-width: 120px; color: #fff; }
.sp-counter__value { font-size: 40px; line-height: 40px; margin-top: -6px; color: #fff; }
.sp-counter__label { font-size: 20px; line-height: 30px; color: #fff; }

/* -------------------------------------------------------- testimonials -- */
.sp-testimonials { padding: 90px 0; }
.sp-carousel { position: relative; margin-top: 40px; }
.sp-carousel__viewport { overflow: hidden; max-width: 77%; margin: 0 auto; }
.sp-carousel__track {
  display: flex; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.sp-carousel__track::-webkit-scrollbar { display: none; }
.sp-carousel.is-ready .sp-carousel__track { overflow: visible; transition: transform .6s ease; }
.sp-quote {
  flex: 0 0 100%; scroll-snap-align: start;
  display: grid; grid-template-columns: 130px 1fr; column-gap: 20px; align-items: start;
}
.sp-quote__photo { grid-row: 1 / span 2; width: 130px; height: 130px; object-fit: cover; border-radius: 10px; }
.sp-quote__who { grid-column: 2; }
.sp-quote__name { font-size: 24px; line-height: 21px; color: #000; margin: 0 0 5px; }
.sp-quote__role { font-size: 18px; line-height: 33px; font-style: italic; color: var(--sp-muted); margin: 0; }
.sp-quote__text { grid-column: 2; margin: 10px 0 0; padding: 0; }
.sp-quote__text p { font-size: 20px; line-height: 30px; font-weight: 300; color: #000; margin: 0; }
.sp-carousel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 0; border-radius: 9px;
  background: #e8e8e8; color: #999; cursor: pointer;
}
.sp-carousel__arrow:hover { background: var(--sp-blue-btn); color: #fff; }
.sp-carousel__arrow--prev { left: 5px; }
.sp-carousel__arrow--next { right: 5px; }
.sp-carousel__dots { display: flex; justify-content: center; gap: 4px; margin-top: 30px; }
.sp-carousel__dot {
  display: block; width: 25px; height: 25px; position: relative;
}
.sp-carousel__dot::before {
  content: ""; position: absolute; left: 5px; top: 5px; width: 15px; height: 15px;
  border-radius: 50%; background: #d6d6d6; transition: background-color .2s;
}
.sp-carousel__dot:hover::before, .sp-carousel__dot.is-active::before { background: #869791; }
.sp-carousel__dot.is-active::before { background: var(--sp-blue-deco); }

/* ------------------------------------------------------ call to action -- */
.sp-cta {
  margin: 50px 0 20px; padding: 50px 0; text-align: center;
  background-color: var(--sp-blue); background-size: cover; background-position: 50% 50%;
}
.sp-cta__title {
  font-size: 30px; font-weight: 600; line-height: 39px; text-transform: capitalize;
  color: #fff; margin-bottom: 20px;
}

/* ------------------------------------------------------------- contact -- */
.sp-contact { padding: 20px 0 40px; }
.sp-contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sp-contact__label {
  display: flex; align-items: center; gap: 8px;
  font-size: 20px; line-height: 30px; font-weight: 700; color: var(--sp-ink);
  margin: 15px 0 5px;
}
.sp-contact__label:first-child { margin-top: 0; }
.sp-contact__label .sp-icon { color: var(--sp-ink); }
.sp-contact__value { margin: 0; }
.sp-hours { margin: 0; }
.sp-hours__row { display: flex; gap: 5px; margin-bottom: 10px; }
.sp-hours dt { font-size: 18px; line-height: 28.8px; }
.sp-hours dd { margin: 0; font-size: 16px; line-height: 29.7px; color: #000; }

/* ---------------------------------------------------------------- forms -- */
.sp-form .sp-field { position: relative; margin: 0 0 20px; }
.sp-form .sp-field .sp-icon { position: absolute; left: 0; top: 12px; color: #666; }
.sp-form input[type="text"], .sp-form input[type="email"], .sp-form input[type="tel"], .sp-form textarea {
  display: block; width: 100%;
  padding: 12px 12px 12px 25px;
  font-size: 16px; font-weight: 500; line-height: 1; color: #666;
  background: #fff; border: 0; border-bottom: 1px solid var(--sp-blue-deco); border-radius: 0;
}
.sp-form textarea { height: 80px; line-height: 1.85714; resize: vertical; }
.sp-form input::placeholder, .sp-form textarea::placeholder { color: #666; opacity: 1; }
.sp-form input:focus, .sp-form textarea:focus { outline: none; border-bottom-width: 2px; }
.sp-form .sp-btn { font-size: 16px; text-transform: none; padding: 12px 35px; }
.sp-form__actions { margin: 0; }
.sp-form__status { margin: 12px 0 0; font-size: 16px; line-height: 1.5; }
.sp-form__status:empty { display: none; }
.sp-form__status.is-ok { color: #1a7f37; }
.sp-form__status.is-error { color: #b42318; }
.sp-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------ newsletter band -- */
.sp-newsletter { padding: 50px 0; background: var(--sp-band); text-align: center; }
.sp-newsletter__title { font-size: 30px; font-weight: 500; line-height: 30px; color: var(--sp-heading); margin-bottom: 20px; }
.sp-newsletter__form { position: relative; max-width: 500px; margin: 0 auto; }
.sp-newsletter__input {
  display: block; width: 100%; height: 55px; padding: 0 150px 0 18px;
  font-size: 20px; font-weight: 500; color: #666; background: #fff;
  border: 1px solid var(--sp-blue-deco); border-radius: 10px;
}
.sp-newsletter__input::placeholder { color: #666; opacity: 1; }
.sp-newsletter__button {
  position: absolute; top: 0; right: 0; height: 55px; padding: 0 20px;
  font-size: 24px; font-weight: 500; color: #fff; background: var(--sp-blue-btn);
  border: 0; border-radius: 0 12px 12px 0; cursor: pointer;
}
.sp-newsletter__button:hover { background: #000; }
.sp-newsletter__note { margin: 12px 0 0; font-size: 16px; line-height: 1.85714; color: var(--sp-ink); }
.sp-newsletter .sp-form__status { text-align: center; }

/* --------------------------------------------------------------- footer -- */
.sp-footer { color: #fff; background: var(--sp-band); }
.sp-footer__wave {
  height: 0; padding-bottom: 8.49%;
  background: url("../img/footer-top.png") no-repeat 50% 100% / 100% auto;
}
.sp-footer__main { background: var(--sp-footer); padding-top: 10px; }
.sp-footer__cols { display: grid; grid-template-columns: 525fr 309fr 286fr; padding-bottom: 10px; }
.sp-footer__brand { padding-right: 88px; }
.sp-footer__menu { padding-right: 20px; }
.sp-footer__logo img { display: block; width: 186px; height: auto; margin-bottom: 20px; }
.sp-footer__about { font-size: 16px; line-height: 1.85714; color: #fff; }
.sp-footer__about p { margin-bottom: 28px; }
.sp-footer__heading { font-size: 18px; font-weight: 600; line-height: 18px; color: #fff; margin: 0 0 20px; }
.sp-footer__menu ul, .sp-footer__contact ul { margin: 0; padding: 0; list-style: none; }
.sp-footer__menu a { color: #fff; text-transform: capitalize; line-height: 1.85714; }
.sp-footer__menu a:hover { color: var(--sp-blue); }
.sp-footer__line { position: relative; display: flex; gap: 10px; align-items: flex-start; margin-bottom: 25px; line-height: 22px; }
.sp-footer__line .sp-chrome { flex: none; width: 22px; height: auto; object-fit: contain; object-position: 0 0; }
.sp-footer__line a { color: #fff; }
.sp-footer__line a:hover { color: var(--sp-blue); }
.sp-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  border-top: 1px solid #545454; padding: 18px 0 20px;
}
.sp-footer__copy { margin: 0; line-height: 30px; color: #fff; }
.sp-social { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sp-social a, .sp-social__icon { display: block; line-height: 0; }
.sp-social .sp-chrome { width: 28px; height: 28px; }
.sp-social__drawn { display: flex; width: 28px; height: 28px; align-items: center; justify-content: center; background: #555; color: #fff; }

/* ------------------------------------------------------------ not found -- */
.sp-notfound { padding: 220px 0 120px; text-align: center; }
.sp-notfound__title { font-size: 36px; line-height: 1.3; margin-bottom: 16px; }

/* ===================================================================== */
/* Tablet                                                                 */
/* ===================================================================== */
@media (max-width: 1100px) {
  .sp-nav__link { padding: 0 10px; font-size: 15px; }
  .sp-footer__cols { gap: 20px 40px; }
}

/* ===================================================================== */
/* Phone and small tablet (the old site switched at 921px / 767px)       */
/* ===================================================================== */
@media (max-width: 921px) {
  .sp-nav-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; margin-right: -4px;
    background: transparent; border: 0; cursor: pointer; color: var(--sp-blue);
  }
  .sp-nav-toggle__bars, .sp-nav-toggle__bars::before, .sp-nav-toggle__bars::after {
    display: block; width: 26px; height: 3px; background: currentColor; border-radius: 2px;
    transition: transform .2s, opacity .2s;
  }
  .sp-nav-toggle__bars { position: relative; }
  .sp-nav-toggle__bars::before, .sp-nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .sp-nav-toggle__bars::before { top: -8px; }
  .sp-nav-toggle__bars::after { top: 8px; }
  .sp-nav-toggle[aria-expanded="true"] .sp-nav-toggle__bars { background: transparent; }
  .sp-nav-toggle[aria-expanded="true"] .sp-nav-toggle__bars::before { transform: translateY(8px) rotate(45deg); }
  .sp-nav-toggle[aria-expanded="true"] .sp-nav-toggle__bars::after { transform: translateY(-8px) rotate(-45deg); }
  .sp-header__bar { flex-wrap: wrap; }
  .sp-nav { flex: 0 0 100%; display: none; }
  .sp-nav.is-open { display: block; }
  .sp-nav__list {
    flex-direction: column; background: #fff; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15); padding: 8px 0; margin-bottom: 16px;
  }
  .sp-nav__link { line-height: 1.4; padding: 12px 20px; font-size: 16px; }
}

@media (max-width: 767px) {
  body { font-size: 14.592px; }
  :root { --sp-gutter: 20px; }

  .sp-heading { font-size: 30px; line-height: 36px; }
  .sp-accent { margin-top: 31px; }

  .sp-hero { min-height: 0; margin-bottom: 20px; }
  .sp-hero > .sp-container { padding-top: 120px; padding-bottom: 70px; }
  .sp-hero__box { max-width: none; margin-left: 0; }
  .sp-hero__title { font-size: 30px; line-height: 39px; }
  .sp-hero__text { font-size: 18px; line-height: 24px; }
  .sp-hero .sp-btn { padding: 11px 15px; }

  .sp-pagehero { padding: 100px 0 130px; }
  .sp-pagehero--has-phone { background-image: var(--sp-bg-phone) !important; }
  .sp-pagehero__title, .sp-pagehero--title-m .sp-pagehero__title, .sp-pagehero--title-s .sp-pagehero__title { font-size: 30px; line-height: 36px; }
  .sp-pagehero__text { font-size: 18px; line-height: 24px; }
  .sp-pagehero__text p { margin-bottom: 2px; }

  .sp-split { padding: 25px 0 10px; }
  .sp-split .sp-heading { font-size: 25px; line-height: 32.5px; }
  .sp-split__row { grid-template-columns: 1fr; gap: 20px; margin-top: 30px; }
  .sp-split .sp-rich { font-size: 15px; line-height: 21px; }

  .sp-tiles__grid { grid-template-columns: 1fr; padding: 0 30px; gap: 20px; }
  .sp-tile__label { font-size: 18.24px; line-height: 27.36px; }

  .sp-logos__row { grid-template-columns: 1fr; }
  .sp-logo { padding: 10px 0; }
  .sp-logos__intro { font-size: 20px; line-height: 30px; }

  .sp-services { padding: 30px 0 80px; margin-bottom: 32px; }
  .sp-services__grid { grid-template-columns: 1fr; gap: 40px; }
  .sp-card, .sp-card--img-right { flex-direction: column; }
  .sp-card__media { flex: none; }
  .sp-card__img, .sp-card--img-right .sp-card__img { width: auto; max-width: 100%; border-radius: 9px 0 0 0; }
  .sp-card:hover, .sp-card:focus-within { transform: none; }

  .sp-features { margin: 32px 0 25px; padding-top: 80px; }
  .sp-features__grid { grid-template-columns: 1fr; gap: 60px; margin-top: 70px; }
  .sp-feature:hover { transform: none; }
  .sp-feature__icon { left: 0; right: 0; top: -45px; margin: 0 auto; }
  .sp-feature__box { margin-left: 0; padding: 50px 15px 15px; text-align: center; }
  .sp-feature__text { min-height: 0; }

  .sp-counters { padding: 35px 0 20px; }
  .sp-counters__grid { flex-direction: column; align-items: center; gap: 24px; }

  .sp-testimonials { padding: 40px 0; }
  .sp-carousel__viewport { max-width: none; }
  .sp-quote { grid-template-columns: 1fr; text-align: center; }
  .sp-quote__photo { grid-row: auto; margin: 0 auto 12px; }
  .sp-quote__who, .sp-quote__text { grid-column: 1; }
  .sp-quote__text p { font-size: 17px; line-height: 26px; }
  .sp-carousel__arrow { top: 65px; }

  .sp-cta__title { font-size: 25px; line-height: 32.5px; }

  .sp-contact__row { grid-template-columns: 1fr; }
  .sp-contact__label { font-size: 18.24px; line-height: 27.36px; }

  .sp-newsletter__title { font-size: 24px; line-height: 30px; }
  .sp-newsletter__input { font-size: 17px; padding-right: 130px; }
  .sp-newsletter__button { font-size: 20px; }

  .sp-footer__cols { grid-template-columns: 1fr; gap: 30px; }
  .sp-footer__brand, .sp-footer__menu { padding-right: 0; }
  .sp-footer__bottom { flex-direction: column; text-align: center; }
  .sp-footer__copy { line-height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .sp-tile:hover, .sp-logo img:hover, .sp-feature:hover, .sp-card:hover { transform: none; }
}