/* Services page (new design, Figma "MY site" / "services").
   Everything is scoped under .sv-page so it can't affect the old site styles. */

.sv-page {
  --sv-orange: #f5a028;
  --sv-orange-light: #fcc066;
  --sv-brown: #593636;
  --sv-grey-bg: #f9f9f9;
  --sv-grey-border: #eaeaea;
  --sv-dark: #121212;
  --sv-black: #000000;
  --sv-white: #ffffff;
  --sv-font-heading: "Poppins", sans-serif;
  --sv-font-body: "Inter", sans-serif;
  --sv-text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);

  font-family: var(--sv-font-body);
  color: var(--sv-black);
  /* decorative backdrops run off the right edge; clip (not hidden) keeps the sticky side menu working */
  overflow-x: clip;
}

.sv-page *,
.sv-page *::before,
.sv-page *::after {
  box-sizing: border-box;
}

/* Blocks use <div> rather than <section>: the old responsive.css forces
   `section { padding: 40px 0 !important }` on mobile.
   Undo the old heading underline inside the new design. */
.sv-page h1::after,
.sv-page h2::after {
  content: none;
}

/* 1280px content width (as in Figma) + 20px side padding */
.sv-page .sv-container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Buttons ---------- */

.sv-page .sv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 100px;
  font-family: var(--sv-font-body);
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.sv-page .sv-btn--light {
  min-width: 214px;
  height: 56px;
  padding: 0 32px;
  background: var(--sv-white);
  color: var(--sv-black);
  font-size: 18px;
  line-height: 32px;
  letter-spacing: -0.5px;
}

.sv-page .sv-btn--light:hover,
.sv-page .sv-btn--light:focus {
  background: #f2f2f2;
  color: var(--sv-black);
  transform: translateY(-1px);
}

.sv-page .sv-btn__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.sv-page .sv-btn--primary {
  min-width: 200px;
  height: 52px;
  padding: 0 32px;
  background: var(--sv-orange);
  color: var(--sv-black);
  font-family: var(--sv-font-heading);
  font-size: 16px;
  font-weight: 600;
}

.sv-page .sv-btn--primary:hover,
.sv-page .sv-btn--primary:focus {
  background: #e8901a;
  color: var(--sv-black);
  transform: translateY(-1px);
}

/* ---------- Hero ---------- */

.sv-page .sv-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 500px;
  overflow: hidden;
  background: var(--sv-dark);
}

.sv-page .sv-hero__bg,
.sv-page .sv-hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sv-page .sv-hero__bg img {
  object-fit: cover;
  object-position: center right;
}

/* dark fade on the left so the white text stays readable */
.sv-page .sv-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(18, 18, 18, 0.55) 0%,
    rgba(18, 18, 18, 0.25) 45%,
    rgba(18, 18, 18, 0) 70%
  );
  pointer-events: none;
}

.sv-page .sv-hero .sv-container {
  position: relative;
  z-index: 1;
}

.sv-page .sv-hero__content {
  max-width: 640px;
  padding: 56px 0;
  text-align: left;
}

.sv-page .sv-hero__title {
  margin: 0 0 14px;
  color: var(--sv-white);
  font-family: var(--sv-font-heading);
  font-size: 64px;
  font-weight: 600;
  line-height: 68px;
  letter-spacing: -2px;
  text-align: inherit;
  text-shadow: var(--sv-text-shadow);
}

.sv-page .sv-hero__subtitle {
  max-width: 600px;
  margin: 0 0 32px;
  color: var(--sv-white);
  font-family: var(--sv-font-body);
  font-size: 22px;
  font-weight: 500;
  line-height: 32px;
  text-shadow: var(--sv-text-shadow);
}

/* ---------- Layout: side menu + main column ---------- */

.sv-page .sv-layout {
  display: grid;
  grid-template-columns: 288px minmax(0, 876px);
  justify-content: space-between;
  align-items: start;
  gap: 40px;
  padding-top: 56px;
}

/* sticky menu taller than the screen: scroll inside it so every item stays reachable */
.sv-page .sv-sidenav {
  position: sticky;
  top: 40px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--sv-white);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.sv-page .sv-sidenav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sv-page .sv-sidenav__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  color: var(--sv-brown);
  font-family: var(--sv-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.sv-page .sv-sidenav__link:hover,
.sv-page .sv-sidenav__link:focus,
.sv-page .sv-sidenav__link.is-active {
  color: var(--sv-brown);
}

/* round icon badge; the icon is a mask so its colour follows `color` */
.sv-page .sv-sidenav__icon {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--sv-grey-border);
  border-radius: 50%;
  background: var(--sv-grey-bg);
  color: #9a9a9a;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.sv-page .sv-sidenav__icon::before {
  content: "";
  position: absolute;
  inset: 11px;
  background: currentColor;
  -webkit-mask: var(--sv-icon) center / contain no-repeat;
  mask: var(--sv-icon) center / contain no-repeat;
}

.sv-page .sv-sidenav__link:hover .sv-sidenav__icon,
.sv-page .sv-sidenav__link:focus .sv-sidenav__icon {
  border-color: var(--sv-orange);
  color: var(--sv-orange);
}

.sv-page .sv-sidenav__link.is-active .sv-sidenav__icon {
  border-color: var(--sv-orange);
  background: var(--sv-orange);
  color: var(--sv-white);
}

/* ---------- Shared section heading ---------- */

.sv-page .sv-section {
  padding-bottom: 96px;
  scroll-margin-top: 40px;
}

.sv-page .sv-heading {
  position: relative;
  max-width: 680px;
  margin: 0 0 56px;
  color: var(--sv-brown);
  font-family: var(--sv-font-heading);
  font-size: 38px;
  font-weight: 600;
  line-height: 46px;
  letter-spacing: -2px;
  text-align: left;
}

/* short orange bar under the heading */
.sv-page .sv-heading::before {
  content: "";
  position: absolute;
  left: 2px;
  bottom: -21px;
  width: 26px;
  height: 5px;
  border-radius: 6px;
  background: #ffa527;
}

/* ---------- Complimentary services ---------- */

.sv-page .sv-perks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sv-page .sv-perks__icon {
  display: block;
  width: 60px;
  height: 60px;
  margin-bottom: 16px;
  object-fit: contain;
}

.sv-page .sv-perks__label {
  display: block;
  max-width: 230px;
  color: var(--sv-brown);
  font-family: var(--sv-font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
}

/* ---------- Delivery timings ---------- */

.sv-page .sv-timings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 42px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.sv-page .sv-timing {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sv-grey-border);
  border-radius: 8px;
  background: var(--sv-white);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.sv-page .sv-timing__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 94px;
  padding: 16px 20px 16px 24px;
  border-radius: 8px 8px 0 0;
  background: var(--sv-orange-light);
}

.sv-page .sv-timing__title {
  margin: 0;
  color: var(--sv-brown);
  font-family: var(--sv-font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  text-align: left;
}

.sv-page .sv-timing__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* pink "Popular Choice" tag hanging over the top edge of the card */
.sv-page .sv-timing__ribbon {
  position: absolute;
  top: -22px;
  right: 24px;
  z-index: 1;
}

.sv-page .sv-timing__body {
  flex: 1;
  padding: 20px 24px 24px;
}

.sv-page .sv-timing__text {
  margin: 0 0 16px;
  color: var(--sv-brown);
  font-family: var(--sv-font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}

.sv-page .sv-timing__text:last-child {
  margin-bottom: 0;
}

.sv-page .sv-timing__badge {
  display: inline-block;
  padding: 2px 12px;
  border: 1px solid var(--sv-orange);
  border-radius: 50px;
  color: var(--sv-orange);
  font-family: var(--sv-font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

.sv-page .sv-timing__value {
  margin: 8px 0 4px;
  color: var(--sv-brown);
  font-family: var(--sv-font-heading);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}

.sv-page .sv-timing__book {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 52px;
  border-top: 1px solid var(--sv-grey-border);
  color: var(--sv-orange);
  font-family: var(--sv-font-body);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.sv-page .sv-timing__book:hover,
.sv-page .sv-timing__book:focus {
  color: #d57f0c;
}

.sv-page .sv-timing__book-icon {
  width: 16px;
  height: 16px;
}

/* ---------- Vehicle types ---------- */

.sv-page .sv-vehicles {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sv-page .sv-vehicles__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sv-page .sv-vehicles__img {
  display: block;
  width: auto;
  height: 96px;
  max-width: 60%;
  margin-bottom: 16px;
  object-fit: contain;
}

.sv-page .sv-vehicles__label {
  color: var(--sv-brown);
  font-family: var(--sv-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}

/* ---------- Add-ons ---------- */

.sv-page .sv-addons {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 40px;
  align-items: start;
}

.sv-page .sv-addons__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 440px;
  margin-bottom: 32px;
}

.sv-page .sv-chip {
  padding: 6px 18px;
  border: 1px solid var(--sv-grey-border);
  border-radius: 50px;
  background: var(--sv-white);
  color: var(--sv-brown);
  font-family: var(--sv-font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.sv-page .sv-chip:hover,
.sv-page .sv-chip:focus {
  border-color: var(--sv-orange);
  outline: none;
}

.sv-page .sv-chip[aria-selected="true"] {
  border-color: var(--sv-orange);
  background: var(--sv-orange);
  color: var(--sv-black);
}

.sv-page .sv-addons__card {
  display: flex;
  min-height: 360px;
  overflow: hidden;
  border: 1px solid var(--sv-grey-border);
  border-radius: 8px;
  background: var(--sv-white);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.sv-page .sv-addons__panels {
  flex: 1;
  display: flex;
}

/* each panel: text on the left, its own picture on the right */
.sv-page .sv-addons__panel {
  display: flex;
  width: 100%;
}

.sv-page .sv-addons__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
}

.sv-page .sv-addons__panel[hidden] {
  display: none;
}

.sv-page .sv-addons__title {
  margin: 0 0 10px;
  color: var(--sv-brown);
  font-family: var(--sv-font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
}

.sv-page .sv-addons__text {
  margin: 0 0 4px;
  color: var(--sv-brown);
  font-family: var(--sv-font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}

.sv-page .sv-addons__price {
  margin: auto 0 0;
  padding-top: 24px;
  color: var(--sv-brown);
  font-family: var(--sv-font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.sv-page .sv-addons__img {
  flex-shrink: 0;
  width: 112px;
  object-fit: cover;
}

/* ---------- Small packages ---------- */

/* isolate so the backdrop's negative z-index stays inside this section */
.sv-page .sv-section--packages {
  position: relative;
  isolation: isolate;
}

.sv-page .sv-packages__backdrop {
  position: absolute;
  top: -200px;
  right: -140px;
  z-index: -1;
  width: 74%;
  max-width: 650px;
  pointer-events: none;
}

.sv-page .sv-packages__backdrop img {
  display: block;
  width: 100%;
  height: auto;
}

.sv-page .sv-packages {
  margin-bottom: 24px;
}

.sv-page .sv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

/* tag looks like a note with its top-right corner folded down:
   clip-path cuts the corner off, ::after draws the folded flap in the gap */
.sv-page .sv-tag {
  --sv-fold: 10px;
  position: relative;
  padding: 6px 18px 6px 14px;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  background: #fff;
  color: var(--sv-orange);
  font-family: var(--sv-font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  clip-path: polygon(
    0 0,
    calc(100% - var(--sv-fold)) 0,
    100% var(--sv-fold),
    100% 100%,
    0 100%
  );
}

.sv-page .sv-tag::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: var(--sv-fold);
  height: var(--sv-fold);
  box-sizing: border-box;
  border-bottom: 1px solid #e7e7e7;
  border-left: 1px solid #e7e7e7;
  border-bottom-left-radius: 2px;
  /* the fold line sits just inside the clipped edge; centred on it, clip-path would cut half of it away */
  background: linear-gradient(
    to bottom left,
    transparent 50%,
    #e7e7e7 50%,
    #e7e7e7 calc(50% + 1.5px),
    #fff calc(50% + 1.5px)
  );
}

.sv-page .sv-packages__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sv-page .sv-package {
  padding: 24px;
  border: 1px solid var(--sv-grey-border);
  border-radius: 8px;
  background: var(--sv-white);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.sv-page .sv-package__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.sv-page .sv-package__title {
  margin: 0;
  color: var(--sv-brown);
  font-family: var(--sv-font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  text-align: left;
}

.sv-page .sv-package__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.sv-page .sv-package__text {
  margin: 0;
  color: var(--sv-brown);
  font-family: var(--sv-font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}

.sv-page .sv-packages + .sv-btn {
  margin-top: 8px;
}

/* ---------- Bulky loads ---------- */

/* four columns, each boxed by a dark line on top and a light line at the bottom */
.sv-page .sv-bulky {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 16px 0 40px;
  padding: 0;
  list-style: none;
}

.sv-page .sv-bulky__item {
  display: flex;
  flex-direction: column;
  padding-bottom: 16px;
  border-top: 1px solid var(--sv-brown);
  border-bottom: 1px solid #e6d6d6;
}

.sv-page .sv-bulky__head {
  min-height: 64px;
  margin-bottom: 16px;
  padding: 14px 0 10px;
  border-bottom: 1px solid #e6d6d6;
}

.sv-page .sv-bulky--extras .sv-bulky__head {
  min-height: 84px;
}

.sv-page .sv-bulky__title {
  margin: 0;
  color: var(--sv-brown);
  font-family: var(--sv-font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  text-align: left;
}

/* "Open | Covered | Tail-gate" */
.sv-page .sv-bulky__types {
  margin: 4px 0 0;
  color: var(--sv-orange);
  font-family: var(--sv-font-body);
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
}

.sv-page .sv-bulky__types span + span::before {
  content: "|";
  margin: 0 6px;
  color: #e6d6d6;
}

.sv-page .sv-bulky__label {
  margin: 0 0 12px;
  color: var(--sv-brown);
  font-family: var(--sv-font-body);
  font-size: 13px;
  line-height: 18px;
}

.sv-page .sv-bulky__size {
  margin: 0 0 20px;
  color: var(--sv-brown);
  font-family: var(--sv-font-body);
  font-size: 17px;
  font-weight: 700;
  line-height: 22px;
}

.sv-page .sv-bulky__img {
  width: 110px;
  height: 80px;
  margin-top: auto;
  object-fit: contain;
  object-position: left bottom;
}

.sv-page .sv-bulky__text {
  margin: 0 0 24px;
  color: var(--sv-brown);
  font-family: var(--sv-font-body);
  font-size: 13px;
  line-height: 18px;
}

.sv-page .sv-bulky__price {
  margin: auto 0 0;
  color: var(--sv-brown);
  font-family: var(--sv-font-body);
  font-size: 17px;
  font-weight: 700;
  line-height: 22px;
}

/* ---------- Dedicated fleet ---------- */

.sv-page .sv-fleet {
  overflow: hidden;
  border-radius: 8px;
}

.sv-page .sv-fleet__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 876 / 400;
  object-fit: cover;
}

.sv-page .sv-fleet__body {
  padding: 32px 40px;
  background: var(--sv-brown);
  color: var(--sv-white);
}

.sv-page .sv-fleet__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.sv-page .sv-fleet__lead {
  margin: 0;
  font-family: var(--sv-font-body);
  font-size: 26px;
  font-weight: 300;
  line-height: 32px;
}

.sv-page .sv-fleet__btn {
  flex-shrink: 0;
  height: 40px;
  padding: 0 22px;
  background: var(--sv-white);
  color: var(--sv-brown);
  font-size: 15px;
}

.sv-page .sv-fleet__btn:hover,
.sv-page .sv-fleet__btn:focus {
  background: #f2f2f2;
  color: var(--sv-brown);
  transform: translateY(-1px);
}

/* divider above the note: short white stroke, then a faint line */
.sv-page .sv-fleet__note {
  margin: 20px 0 0;
  padding-top: 20px;
  background:
    linear-gradient(var(--sv-white), var(--sv-white)) top left / 56px 1.5px
      no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25)) top
      left / 100% 1px no-repeat;
  font-family: var(--sv-font-body);
  font-size: 15px;
  line-height: 22px;
}

.sv-page .sv-fleet__note a {
  color: var(--sv-orange);
  text-decoration: underline;
}

/* ---------- Warehouse & fulfilment ---------- */

/* isolate so the backdrop's negative z-index stays inside this section */
.sv-page .sv-section--warehouse {
  position: relative;
  isolation: isolate;
}

.sv-page .sv-heading--wide {
  max-width: none;
}

.sv-page .sv-warehouse__backdrop {
  position: absolute;
  top: -40px;
  right: -140px;
  z-index: -1;
  width: 420px;
  pointer-events: none;
}

.sv-page .sv-subheading {
  margin: 0 0 8px;
  color: var(--sv-brown);
  font-family: var(--sv-font-heading);
  font-size: 22px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -0.5px;
  text-align: left;
}

.sv-page .sv-warehouse__intro {
  max-width: 740px;
  margin: 0 0 32px;
  color: var(--sv-brown);
  font-family: var(--sv-font-body);
  font-size: 15px;
  line-height: 22px;
}

.sv-page .sv-wh-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 56px;
  padding: 0;
  list-style: none;
}

.sv-page .sv-wh-card {
  padding: 20px 20px 32px;
  border: 1px solid #e6d6d6;
  border-radius: 8px;
  background: var(--sv-white);
}

.sv-page .sv-wh-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 336 / 160;
  margin-bottom: 24px;
  border-radius: 6px;
  object-fit: cover;
}

.sv-page .sv-wh-card__title {
  margin: 0 0 10px;
  color: var(--sv-brown);
  font-family: var(--sv-font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
}

.sv-page .sv-wh-card__text {
  margin: 0;
  color: #8a5a5a;
  font-family: var(--sv-font-body);
  font-size: 14px;
  line-height: 20px;
}

/* the steps sit in one white card; ">>" between them is drawn here */
.sv-page .sv-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  margin: 16px 0 40px;
  padding: 28px 24px;
  border-radius: 8px;
  background: var(--sv-white);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  list-style: none;
}

.sv-page .sv-step {
  position: relative;
  text-align: center;
}

.sv-page .sv-step + .sv-step::before {
  content: "\203A\203A";
  position: absolute;
  top: 18px;
  left: -32px;
  width: 24px;
  color: #b9b9b9;
  font-family: var(--sv-font-body);
  font-size: 24px;
  line-height: 24px;
  letter-spacing: -2px;
}

.sv-page .sv-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 18px;
  border-radius: 50%;
}

.sv-page .sv-step__icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.sv-page .sv-step__icon--red {
  background: #fdece6;
}

.sv-page .sv-step__icon--blue {
  background: #e1f1fd;
}

.sv-page .sv-step__icon--purple {
  background: #e8e5fb;
}

.sv-page .sv-step__icon--green {
  background: #e0f5e8;
}

.sv-page .sv-step__title {
  margin: 0 0 8px;
  color: var(--sv-black);
  font-family: var(--sv-font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.sv-page .sv-step__text {
  margin: 0;
  color: var(--sv-black);
  font-family: var(--sv-font-body);
  font-size: 12px;
  line-height: 16px;
}

/* ---------- Marketplace solutions ---------- */

/* picture left, text right; --flip rows swap sides */
.sv-page .sv-market {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

.sv-page .sv-market__row {
  display: grid;
  grid-template-columns: minmax(0, 404fr) minmax(0, 428fr);
  align-items: center;
  gap: 44px;
}

.sv-page .sv-market__row--flip {
  grid-template-columns: minmax(0, 428fr) minmax(0, 404fr);
}

.sv-page .sv-market__row--flip .sv-market__media {
  order: 2;
}

.sv-page .sv-market__media {
  overflow: hidden;
  border-radius: 8px;
  background: #f5f4f2;
}

.sv-page .sv-market__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 404 / 290;
  object-fit: cover;
}

.sv-page .sv-market__title {
  margin: 0 0 10px;
  color: var(--sv-brown);
  font-family: var(--sv-font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
}

.sv-page .sv-market__text {
  margin: 0 0 12px;
  color: var(--sv-brown);
  font-family: var(--sv-font-body);
  font-size: 14px;
  line-height: 20px;
}

.sv-page .sv-market__text:last-child {
  margin-bottom: 0;
}

/* ---------- Logistics technology consultancy ---------- */

.sv-page .sv-section--consult {
  position: relative;
  isolation: isolate;
}

/* route line starts behind the photo panel and ends in the pin beside Learn More */
.sv-page .sv-consult__backdrop {
  position: absolute;
  right: -140px;
  bottom: 30px;
  z-index: -1;
  width: 620px;
  pointer-events: none;
}

.sv-page .sv-consult__intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  padding: 32px 36px;
  border-radius: 8px;
  background: #ffbb5c;
}

.sv-page .sv-consult__title {
  margin: 0 0 12px;
  color: var(--sv-brown);
  font-family: var(--sv-font-heading);
  font-size: 26px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.5px;
  text-align: left;
}

.sv-page .sv-consult__lead {
  max-width: 640px;
  margin: 0;
  color: var(--sv-brown);
  font-family: var(--sv-font-body);
  font-size: 16px;
  line-height: 23px;
}

.sv-page .sv-consult__intro-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

/* flow column on the left, photo on the right */
.sv-page .sv-consult__panel {
  display: grid;
  grid-template-columns: minmax(0, 263fr) minmax(0, 569fr);
  overflow: hidden;
  margin-bottom: 40px;
  border-radius: 8px;
  background: #efeeec;
}

.sv-page .sv-consult__flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 24px 24px;
}

.sv-page .sv-consult__inputs {
  position: relative;
  display: flex;
  gap: 16px;
}

/* dashed U from the bottom of each chip into the sides of the hub */
.sv-page .sv-consult__inputs::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50px;
  right: 50px;
  height: 49px;
  border: 1.5px dashed #f5b25a;
  border-top: 0;
  border-radius: 0 0 10px 10px;
}

.sv-page .sv-consult__chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100px;
  height: 100px;
  border-radius: 8px;
  background: var(--sv-white);
}

.sv-page .sv-consult__chip img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.sv-page .sv-consult__chip span {
  color: var(--sv-brown);
  font-family: var(--sv-font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  text-align: center;
}

.sv-page .sv-consult__hub {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-top: 20px;
  overflow: hidden;
  border: 4px solid var(--sv-white);
  border-radius: 50%;
  background: var(--sv-orange);
  box-shadow: 0 0 0 4px rgba(245, 160, 40, 0.18);
}

.sv-page .sv-consult__hub img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* dashed arrow from the hub down to the result card */
.sv-page .sv-consult__result {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 220px;
  margin-top: 34px;
  padding: 20px 22px;
  border-radius: 8px;
  background: var(--sv-white);
}

.sv-page .sv-consult__result::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  height: 22px;
  border-left: 1.5px dashed #f5b25a;
}

.sv-page .sv-consult__result::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: calc(50% - 4px);
  border-width: 6px 4.5px 0;
  border-style: solid;
  border-color: #f5b25a transparent transparent;
}

.sv-page .sv-consult__result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sv-white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.sv-page .sv-consult__result-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.sv-page .sv-consult__result-text {
  max-width: 170px;
  margin: auto 0 0;
  color: var(--sv-brown);
  font-family: var(--sv-font-heading);
  font-size: 22px;
  font-weight: 600;
  line-height: 26px;
}

/* photo fills the cell; the text sits on a dark fade at the bottom */
.sv-page .sv-consult__photo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 420px;
}

.sv-page .sv-consult__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sv-page .sv-consult__photo-text {
  position: relative;
  margin: 0;
  padding: 80px 32px 28px;
  background: linear-gradient(
    to bottom,
    rgba(40, 32, 28, 0),
    rgba(40, 32, 28, 0.6) 45%
  );
  color: var(--sv-white);
  font-family: var(--sv-font-body);
  font-size: 15px;
  line-height: 23px;
}

/* ---------- Tablet ---------- */

@media (max-width: 1199px) {
  .sv-page .sv-hero {
    min-height: 440px;
  }

  .sv-page .sv-layout {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 32px;
  }

  .sv-page .sv-timings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
  }

  /* chips above, card below */
  .sv-page .sv-addons {
    grid-template-columns: minmax(0, 1fr);
  }

  .sv-page .sv-addons__card {
    max-width: 520px;
  }

  /* too narrow for four steps in a row: 2 x 2, no ">>" */
  .sv-page .sv-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }

  .sv-page .sv-step + .sv-step::before {
    content: none;
  }

  .sv-page .sv-hero__title {
    font-size: 48px;
    line-height: 54px;
  }

  .sv-page .sv-hero__subtitle {
    font-size: 20px;
    line-height: 28px;
  }
}

/* below 992px there is no room for the side menu */
@media (max-width: 991px) {
  .sv-page .sv-layout {
    display: block;
    padding-top: 48px;
  }

  .sv-page .sv-sidenav {
    display: none;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  .sv-page .sv-container {
    padding: 0 16px;
  }

  .sv-page .sv-hero {
    min-height: 340px;
  }

  /* full-width dark wash instead of the left fade: text is centred on mobile */
  .sv-page .sv-hero::after {
    background: rgba(18, 18, 18, 0.35);
  }

  .sv-page .sv-hero__content {
    max-width: none;
    padding: 40px 0;
    text-align: center;
  }

  .sv-page .sv-hero__title {
    margin: 0 auto 8px;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  }

  .sv-page .sv-hero__subtitle {
    max-width: 323px;
    margin: 0 auto 20px;
    font-size: 13px;
    line-height: 17px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  }

  .sv-page .sv-btn--light {
    min-width: 160px;
    height: 44px;
    padding: 0 24px;
    gap: 8px;
    font-size: 16px;
    line-height: 16px;
  }

  .sv-page .sv-btn__icon {
    width: 18px;
    height: 18px;
  }

  .sv-page .sv-btn--primary {
    width: 100%;
    height: 48px;
  }

  .sv-page .sv-layout {
    padding-top: 32px;
  }

  .sv-page .sv-section {
    padding-bottom: 56px;
  }

  .sv-page .sv-heading {
    margin-bottom: 36px;
    font-size: 22px;
    line-height: 26px;
    letter-spacing: -1px;
  }

  .sv-page .sv-heading::before {
    bottom: -14px;
    width: 20px;
    height: 3px;
  }

  .sv-page .sv-perks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 16px;
  }

  /* icon and label centred in each cell */
  .sv-page .sv-perks__item {
    text-align: center;
  }

  .sv-page .sv-perks__icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
  }

  .sv-page .sv-perks__label {
    margin: 0 auto;
    font-size: 14px;
    line-height: 18px;
  }

  /* timings fold into an accordion: icon, title and a chevron; services.js toggles .is-open */
  .sv-page .sv-timings {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 24px;
  }

  .sv-page .sv-timing__head {
    justify-content: flex-start;
    min-height: 0;
    padding: 14px 16px;
    border-radius: 8px;
    cursor: pointer;
  }

  .sv-page .sv-timing.is-open .sv-timing__head {
    border-radius: 8px 8px 0 0;
  }

  .sv-page .sv-timing__head::after {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin: -4px 4px 0 auto;
    border-right: 2px solid var(--sv-brown);
    border-bottom: 2px solid var(--sv-brown);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }

  .sv-page .sv-timing.is-open .sv-timing__head::after {
    margin-top: 4px;
    transform: rotate(-135deg);
  }

  .sv-page .sv-timing__icon {
    order: -1;
    width: 32px;
    height: 32px;
  }

  .sv-page .sv-timing__title {
    font-size: 15px;
    line-height: 20px;
  }

  .sv-page .sv-timing__title br {
    display: none;
  }

  .sv-page .sv-timing:not(.is-open) .sv-timing__body,
  .sv-page .sv-timing:not(.is-open) .sv-timing__book {
    display: none;
  }

  .sv-page .sv-timing__ribbon {
    top: -14px;
    right: auto;
    left: 52px;
    height: 26px;
  }

  .sv-page .sv-vehicles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 16px;
    align-items: end;
  }

  .sv-page .sv-vehicles__img {
    height: 64px;
    margin-bottom: 10px;
  }

  .sv-page .sv-vehicles__label {
    font-size: 12px;
    line-height: 16px;
  }

  .sv-page .sv-addons {
    gap: 24px;
  }

  /* the card becomes a carousel: chips shrink to dots under it (names stay for screen readers),
     Book Now goes last; services.js turns a swipe on the card into the next/previous tab */
  .sv-page .sv-addons {
    gap: 16px;
  }

  .sv-page .sv-addons__side {
    display: contents;
  }

  .sv-page .sv-addons__chips {
    order: 1;
    justify-content: center;
    gap: 6px;
    max-width: none;
    margin-bottom: 8px;
  }

  .sv-page .sv-chip {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    background: #e3e3e3;
    font-size: 0;
    line-height: 0;
    transition:
      width 0.2s ease,
      background-color 0.2s ease;
  }

  .sv-page .sv-chip[aria-selected="true"] {
    width: 24px;
  }

  .sv-page .sv-chip:focus-visible {
    outline: 2px solid var(--sv-orange);
    outline-offset: 2px;
  }

  .sv-page .sv-addons__book {
    order: 2;
  }

  .sv-page .sv-addons__card {
    min-height: 240px;
    touch-action: pan-y;
  }

  .sv-page .sv-addons__img {
    width: 96px;
  }

  /* smaller, pulled to the screen edge so it stays clear of the title and the Book Now button above */
  .sv-page .sv-packages__backdrop {
    top: -30px;
    right: -16px;
    width: 200px;
  }

  /* two small cards per row */
  .sv-page .sv-packages__cards {
    gap: 12px;
  }

  .sv-page .sv-package {
    padding: 14px 12px;
  }

  .sv-page .sv-package__head {
    gap: 8px;
    margin-bottom: 10px;
  }

  .sv-page .sv-package__title {
    font-size: 15px;
    line-height: 19px;
  }

  .sv-page .sv-package__icon {
    width: 28px;
    height: 28px;
  }

  .sv-page .sv-package__text {
    font-size: 12px;
    line-height: 16px;
  }

  /* bulky loads fold into an accordion: title + chevron, details open in a grey panel */
  .sv-page .sv-bulky {
    grid-template-columns: 1fr;
    gap: 0;
    margin: 8px 0 32px;
  }

  .sv-page .sv-bulky__item {
    padding-bottom: 0;
    border-top: 0;
  }

  .sv-page .sv-bulky__item:first-child {
    border-top: 1px solid #e6d6d6;
  }

  .sv-page .sv-bulky__head,
  .sv-page .sv-bulky--extras .sv-bulky__head {
    position: relative;
    min-height: 0;
    margin: 0;
    padding: 14px 32px 14px 0;
    border-bottom: 0;
    cursor: pointer;
  }

  .sv-page .sv-bulky__head::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid var(--sv-brown);
    border-bottom: 2px solid var(--sv-brown);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }

  .sv-page .sv-bulky__item.is-open .sv-bulky__head::after {
    margin-top: -2px;
    transform: rotate(-135deg);
  }

  .sv-page .sv-bulky__title {
    font-size: 16px;
    line-height: 20px;
  }

  .sv-page .sv-bulky__title br {
    display: none;
  }

  .sv-page .sv-bulky__item:not(.is-open) > :not(.sv-bulky__head) {
    display: none;
  }

  .sv-page .sv-bulky__item.is-open > :not(.sv-bulky__head) {
    margin: 0;
    padding: 0 16px 8px;
    background: #f6f6f6;
  }

  .sv-page .sv-bulky__item.is-open > .sv-bulky__head + * {
    padding-top: 16px;
  }

  .sv-page .sv-bulky__item.is-open > :last-child {
    padding-bottom: 16px;
  }

  .sv-page .sv-bulky__size,
  .sv-page .sv-bulky__price {
    font-size: 14px;
    line-height: 19px;
  }

  .sv-page .sv-bulky__label,
  .sv-page .sv-bulky__text {
    font-size: 12px;
    line-height: 16px;
  }

  .sv-page .sv-bulky__img {
    width: 100%;
    height: 80px;
  }

  /* Contact Us drops under the text */
  .sv-page .sv-fleet__body {
    padding: 20px;
  }

  .sv-page .sv-fleet__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .sv-page .sv-fleet__lead {
    font-size: 18px;
    line-height: 24px;
  }

  .sv-page .sv-fleet__note {
    font-size: 13px;
    line-height: 19px;
  }

  /* consultancy: icon above the text, flow above the photo */
  .sv-page .sv-consult__intro {
    flex-direction: column-reverse;
    padding: 20px;
  }

  .sv-page .sv-consult__intro-icon {
    width: 48px;
    height: 48px;
  }

  .sv-page .sv-consult__title {
    font-size: 20px;
    line-height: 26px;
  }

  .sv-page .sv-consult__title br {
    display: none;
  }

  .sv-page .sv-consult__lead {
    font-size: 14px;
    line-height: 20px;
  }

  .sv-page .sv-consult__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  /* the flow runs sideways: the two chips stacked, the hub, then an arrow into the result card */
  .sv-page .sv-consult__flow {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    column-gap: 24px;
    padding: 20px 16px;
  }

  .sv-page .sv-consult__inputs {
    flex-direction: column;
    gap: 12px;
  }

  .sv-page .sv-consult__inputs::after {
    top: 38px;
    bottom: 38px;
    left: 100%;
    right: auto;
    width: 48px;
    height: auto;
    border: 1.5px dashed #f5b25a;
    border-left: 0;
    border-radius: 0 10px 10px 0;
  }

  .sv-page .sv-consult__chip {
    width: 84px;
    height: 76px;
    gap: 4px;
  }

  .sv-page .sv-consult__chip img {
    width: 22px;
    height: 22px;
  }

  .sv-page .sv-consult__chip span {
    font-size: 11px;
    line-height: 14px;
  }

  .sv-page .sv-consult__hub {
    width: 48px;
    height: 48px;
    margin: 0;
  }

  .sv-page .sv-consult__result {
    min-height: 164px;
    margin: 0;
    padding: 14px;
  }

  .sv-page .sv-consult__result::before {
    top: 50%;
    bottom: auto;
    left: -22px;
    width: 14px;
    height: 0;
    border-top: 1.5px dashed #f5b25a;
    border-left: 0;
  }

  .sv-page .sv-consult__result::after {
    top: calc(50% - 4px);
    bottom: auto;
    left: -9px;
    border-width: 4.5px 0 4.5px 6px;
    border-color: transparent transparent transparent #f5b25a;
  }

  .sv-page .sv-consult__result-icon {
    width: 36px;
    height: 36px;
  }

  .sv-page .sv-consult__result-icon img {
    width: 20px;
    height: 20px;
  }

  .sv-page .sv-consult__result-text {
    font-size: 16px;
    line-height: 20px;
  }

  .sv-page .sv-consult__photo {
    min-height: 360px;
  }

  .sv-page .sv-consult__photo-text {
    padding: 64px 20px 20px;
    font-size: 14px;
    line-height: 20px;
  }

  .sv-page .sv-consult__backdrop {
    right: -16px;
    bottom: 0;
    width: 200px;
  }

  /* each row becomes a grey card: text first, picture below */
  .sv-page .sv-market {
    gap: 16px;
  }

  .sv-page .sv-market__row,
  .sv-page .sv-market__row--flip {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 20px 16px;
    border-radius: 8px;
    background: #f5f4f2;
  }

  .sv-page .sv-market__row .sv-market__media {
    order: 1;
  }

  .sv-page .sv-market__title {
    font-size: 18px;
  }

  .sv-page .sv-market__title br {
    display: none;
  }

  .sv-page .sv-heading--wide br {
    display: none;
  }

  .sv-page .sv-warehouse__backdrop {
    top: -20px;
    right: -16px;
    width: 160px;
  }

  .sv-page .sv-subheading {
    font-size: 17px;
    line-height: 23px;
  }

  .sv-page .sv-warehouse__intro {
    font-size: 13px;
    line-height: 19px;
  }

  .sv-page .sv-wh-cards {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 40px;
  }

  .sv-page .sv-wh-card {
    padding: 16px 16px 24px;
  }

  .sv-page .sv-wh-card__title {
    font-size: 16px;
    line-height: 21px;
  }

  .sv-page .sv-wh-card__text {
    font-size: 13px;
    line-height: 19px;
  }

  .sv-page .sv-steps {
    gap: 24px 16px;
    padding: 24px 16px;
  }
}