/* ==========================================================================
   services-2026.css
   Stylesheet for template-service-solution-expertise-2026.php

   Self-contained: replaces services-new.css on pages using the new template.
   Do not load both — the old sheet's float-based .row/.col rules and the
   infographic positioning will fight this layout.

   Every colour, size and shadow below is lifted from services-new.css so the
   pages still look like the rest of the site. Typography inherits from the
   theme; no font-family is set here, same as the old sheet.
   ========================================================================== */

:root {
  /* Ink */
  --svc-slate:        #5b657e;   /* body copy, most headings */
  --svc-navy:         #04113f;   /* dark sections, strong headings */
  --svc-ink:          #0e142b;   /* deepest chrome */
  --svc-charcoal:     #262627;   /* dark panels */

  /* Accent */
  --svc-blue:         #030cbd;   /* buttons, links, rules */
  --svc-orange:       #ff7d04;   /* primary accent */
  --svc-orange-hover: #fd7d24;   /* link hover */
  --svc-orange-rule:  #d66d0b;   /* stat bar top rule */

  /* Surface */
  --svc-white:        #ffffff;
  --svc-tint:         #f9fcff;   /* panel tint */
  --svc-tint-cool:    #f8fdff;   /* section tint */
  --svc-tint-banner:  rgba(232, 250, 255, 0.3);
  --svc-tint-mobile:  #fbfaf7;

  /* Line */
  --svc-line:         #e4e6ea;
  --svc-line-soft:    #d0d1d8;
  --svc-muted:        #a4acc1;

  /* Depth */
  --svc-shadow-card:  0 5px 6px 0 rgba(219, 224, 228, 0.74);
  --svc-shadow-lift:  14px 13px 36px 0 rgba(0, 0, 0, 0.25);
  --svc-shadow-tile:  3px 8px 36px -15px rgba(1, 4, 60, 0.4);

  /* Metrics */
  --svc-radius:       8px;
  --svc-radius-lg:    16px;
  --svc-form-w:       456px;
  --svc-gap:          24px;
  --svc-section-y:    60px;
}


/* --------------------------------------------------------------------------
   Sticky header
   Applied by app.js once the page scrolls past the fold-2 section. Carried
   over from services-new.css — without these the class toggles but nothing
   visibly changes.
   -------------------------------------------------------------------------- */

.sticky-header {
  height: 80px;
}

.sticky-header .top-header {
  display: none;
}

.sticky-header .logo-section {
  margin-top: 10px;
}

.sticky-header .main-nav {
  margin-top: 20px;
}

.sticky-header .header-logo {
  width: 170px;
}

.sticky-header .logo-subtitle {
  font-size: 0.7rem;
}


/* --------------------------------------------------------------------------
   Section scaffolding
   -------------------------------------------------------------------------- */

.svc-page {
  position: relative;
}

.svc-section {
  position: relative;
  padding: var(--svc-section-y) 0;
}

.svc-section p {
  color: var(--svc-slate);
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
}

.svc-section a {
  color: var(--svc-blue);
  font-weight: 600;
}

.svc-section a:hover,
.svc-section a:focus {
  color: var(--svc-orange-hover);
}

/* Full-bleed photo behind a dark section. */
.svc-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.svc-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  margin: 0;
}

.svc-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 7, 33, 0.86) 16%, rgba(30, 34, 49, 0.86) 100%);
}

.svc-on-dark > .container {
  position: relative;
  z-index: 1;
}

/* White text is for content sitting directly on the photo — the section
   heading and the capability rows. Cards layered on top of the photo have their
   own light backgrounds and set their own colours, so a blanket
   `.svc-on-dark p` rule would paint their text white on white. */
.svc-on-dark .svc-head h2,
.svc-on-dark .svc-head h3,
.svc-on-dark .svc-head p,
.svc-on-dark .svc-head-sub {
  color: var(--svc-white);
}


/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */

.svc-head {
  text-align: center;
  max-width: 62rem;
  margin: 0 auto 40px;
}

.svc-head h2 {
  font-size: 36px;
  line-height: 48px;
  font-weight: 600;
  color: var(--svc-slate);
  margin: 0 0 14px;
  text-transform: none;
}

.svc-head-sub {
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  color: var(--svc-slate);
  margin: 0;
}

.svc-eyebrow-heading {
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: var(--svc-slate);
  margin: 0 0 14px;
  text-transform: none;
}


/* --------------------------------------------------------------------------
   Form + body split
   Used by every fold that pairs a lead form with content. Flex, not float —
   the old sheet floated both children, which is what made the columns drift
   when one side grew.
   -------------------------------------------------------------------------- */

.svc-split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px;
}

.svc-split-form {
  flex: 0 0 var(--svc-form-w);
  max-width: 100%;
  order: 1;
}

.svc-split-body {
  flex: 1 1 320px;
  min-width: 0;
  order: 2;
}

/* Content first, form second — for folds where the form reads better right. */
.svc-split-body-first {
  order: 1;
}

.svc-split-body-first + .svc-split-form {
  order: 2;
}


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

.svc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 55px;
  padding: 0 32px;
  border: 0;
  border-radius: 55px;
  background-color: var(--svc-blue);
  color: var(--svc-white);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

.svc-btn:hover,
.svc-btn:focus {
  background-color: var(--svc-orange);
  color: var(--svc-white);
}

.svc-btn-light {
  background-color: var(--svc-white);
  color: var(--svc-navy);
}

.svc-btn-light:hover,
.svc-btn-light:focus {
  background-color: var(--svc-orange);
  color: var(--svc-white);
}

.svc-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.svc-btn-row .svc-btn {
  flex: 1 1 200px;
}


/* --------------------------------------------------------------------------
   Contact form shortcode
   The shortcode emits .consult-form and friends; these rules keep it looking
   the way it does on the current site.

   Keyed to .svc-form, which every form wrapper carries, so a form works in any
   slot. Scoping these to .svc-split-form meant a form placed anywhere else —
   like the one under the case tiles — rendered completely unstyled.
   -------------------------------------------------------------------------- */

.svc-form .consult-form h2 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: var(--svc-slate);
  margin: 0 0 4px;
  text-transform: none;
}

.svc-form .form-subtitle {
  display: block;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  color: var(--svc-slate);
  padding: 10px 0 20px;
}

.svc-form .consult-form .form-control {
  height: 40px;
  border: 1px solid var(--svc-muted);
  border-radius: var(--svc-radius);
  background-color: var(--svc-white);
  color: #000;
}

.svc-form .consult-form textarea.form-control {
  height: 98px;
}

.svc-form .consult-form .primary-btn {
  display: block;
  width: 100%;
  max-width: 396px;
  height: 55px;
  line-height: 55px;
  border: 0;
  border-radius: 55px;
  background-color: var(--svc-blue);
  color: var(--svc-white);
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.svc-form .consult-form .primary-btn:hover,
.svc-form .consult-form .primary-btn:focus {
  background-color: var(--svc-orange);
}

.svc-form .submit-user-request {
  margin-top: 25px;
  text-align: center;
}


/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.custom-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.custom-breadcrumb li {
  position: relative;
  padding: 0 5px;
}

.custom-breadcrumb li:first-child {
  padding-left: 0;
}

.custom-breadcrumb li a,
.custom-breadcrumb li span {
  display: block;
  margin-left: 10px;
  font-size: 15px;
  line-height: 18px;
  color: #343b42;
}

.custom-breadcrumb li:first-child a {
  margin-left: 0;
  font-weight: 400;
}

.custom-breadcrumb li span {
  font-weight: 700;
}

.custom-breadcrumb li a:hover,
.custom-breadcrumb li a:focus {
  color: var(--svc-orange-hover);
}

.custom-breadcrumb li .icon-chevron-right {
  position: absolute;
  top: 4px;
  left: 2px;
  font-style: normal;
}

.custom-breadcrumb li .icon-chevron-right::before,
.custom-breadcrumb li .icon-chevron-right::after {
  content: "";
  position: absolute;
  top: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.custom-breadcrumb li .icon-chevron-right::before {
  left: 0;
  border-left: 5px solid #343b42;
}

.custom-breadcrumb li .icon-chevron-right::after {
  left: -1px;
  border-left: 5px solid var(--svc-white);
}

.custom-breadcrumb li:first-child .icon-chevron-right {
  display: none;
}


/* --------------------------------------------------------------------------
   Editor bullet lists coming out of ACF WYSIWYG fields
   -------------------------------------------------------------------------- */

.svc-section .org-summary-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-section .org-summary-list li {
  min-height: 48px;
  margin-bottom: 8px;
  padding: 12px 0 8px 65px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  color: var(--svc-slate);
  background: url(https://www.nebiolab.com/wp-content/uploads/2024/12/green-check-mark.webp) left 5px no-repeat;
  background-size: 48px;
}

.svc-section .org-summary-list li:last-child {
  margin-bottom: 0;
}

.svc-section .list-sample-view {
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-section .list-sample-view li {
  position: relative;
  margin-bottom: 14px;
  padding-left: 22px;
  font-size: 16px;
  line-height: 24px;
  color: var(--svc-slate);
}

.svc-section .list-sample-view li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--svc-orange);
}


/* ==========================================================================
   FOLD 1 — Banner
   ========================================================================== */

.svc-banner {
  background: var(--svc-tint-banner);
  padding-top: 20px;
}

.svc-banner-head {
  margin: 20px 0 32px;
}

.svc-banner-head h1 {
  font-size: 36px;
  line-height: 48px;
  font-weight: 600;
  color: var(--svc-slate);
  margin: 0;
  text-transform: none;
}

.svc-accreditation {
  margin-top: 32px;
}

.svc-logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-logo-row li {
  margin: 0;
  flex: 0 0 auto;
}

.svc-logo-row img {
  display: block;
  width: auto;
  max-width: 96px;
  height: auto;
  margin: 0;
}

.svc-accreditation-tiles .svc-logo-row li {
  padding: 8px;
  border-radius: 10px;
  background-color: var(--svc-white);
}


/* ==========================================================================
   STATS BAR
   ========================================================================== */

.svc-statbar {
  background: var(--svc-navy);
  border-top: 4px solid var(--svc-orange-rule);
  padding: 23px 0;
}

.svc-statbar-heading {
  margin: 0 0 30px;
  font-size: 18px;
  line-height: normal;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: var(--svc-white);
}

.svc-statbar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.svc-stat {
  padding: 8px 12px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.svc-stat:last-child {
  border-right: 0;
}

.svc-stat strong {
  font-size: 36px;
  line-height: 1;
  font-weight: 600;
  color: var(--svc-white);
}

.svc-stat .svc-stat-symbol {
  color: var(--svc-orange-rule);
}

.svc-stat span {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}


/* ==========================================================================
   FOLD 2 — Service cards
   One grid, so each left/right pair shares a row height. No character
   counting needed to keep paired cards level.
   ========================================================================== */

.svc-offer {
  background: var(--svc-white);
}

.svc-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--svc-gap);
}

.svc-card {
  padding: 28px 26px 24px;
  background: var(--svc-white);
  border: 1px solid var(--svc-line);
  border-top: 3px solid var(--svc-blue);
  border-radius: var(--svc-radius);
  box-shadow: var(--svc-shadow-card);
}

.svc-card-title {
  margin: 0 0 14px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--svc-navy);
  text-transform: none;
}

.svc-card-body ul,
.svc-card-body ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-card-body li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 22px;
  font-size: 16px;
  line-height: 24px;
  color: var(--svc-slate);
}

.svc-card-body li:last-child {
  margin-bottom: 0;
}

.svc-card-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--svc-orange);
}

.svc-card-body p {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 12px;
}

.svc-card-body p:last-child {
  margin-bottom: 0;
}

/* Reserves the empty cell when the card count is odd, so the surviving card
   of a pair keeps its side of the grid. */
.svc-card-spacer {
  display: block;
}


/* ==========================================================================
   FOLD 3 — Case tiles
   White card, circular icon medallion straddling the top edge, four across.
   The medallion overhangs, so each card carries top padding to clear it and
   the grid carries top margin so row one is not clipped by the section.
   ========================================================================== */

.svc-case-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 46px 12px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}

.svc-case {
  display: flex;
  margin: 0;
}

.svc-case-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 44px 14px 16px;
  background: var(--svc-white);
  border-radius: var(--svc-radius);
  box-shadow: var(--svc-shadow-lift);
  color: inherit;
  font-weight: 400;
  transition: background-color 0.2s ease;
}

.svc-case-icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--svc-white);
  border: 1px solid var(--svc-slate);
  overflow: hidden;
}

/* Inner ring, carried over from the live medallion. */
.svc-case-icon::after {
  content: "";
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid var(--svc-slate);
}

.svc-case-icon img {
  max-width: 40px;
  max-height: 40px;
  width: auto;
  height: auto;
  margin: 0;
}

.svc-case-title {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 21px;
  font-weight: 700;
  color: var(--svc-navy);
  text-transform: none;
  overflow-wrap: break-word;
}

.svc-section .svc-case-desc {
  margin: 0;
  font-size: 13px;
  line-height: 19px;
  color: var(--svc-slate);
}

/* Only tiles with a case study get link affordance. The rest are capability
   claims and should not look clickable. */
.svc-case-link {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  line-height: 17px;
  font-weight: 700;
  color: var(--svc-blue);
}

.svc-case-link::after {
  content: " →";
}

a.svc-case-inner:hover,
a.svc-case-inner:focus {
  background-color: var(--svc-slate);
}

a.svc-case-inner:hover .svc-case-title,
a.svc-case-inner:focus .svc-case-title,
a.svc-case-inner:hover .svc-case-desc,
a.svc-case-inner:focus .svc-case-desc,
a.svc-case-inner:hover .svc-case-link,
a.svc-case-inner:focus .svc-case-link {
  color: var(--svc-white);
}

a.svc-case-inner:focus-visible {
  outline: 2px solid var(--svc-orange);
  outline-offset: 3px;
}

/* ==========================================================================
   FOLD 4 — De-risk block
   ========================================================================== */

.svc-side-image {
  position: absolute;
  top: 220px;
  right: 0;
  max-width: 320px;
  z-index: 0;
}

.svc-side-image img {
  width: 100%;
  max-height: 440px;
  height: 100%;
  margin: 0;
}

.svc-derisk > .container {
  position: relative;
  z-index: 1;
}

.svc-figure-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
  padding: 8px 24px;
  background-color: var(--svc-tint);
  border-radius: var(--svc-radius);
}

.svc-figure {
  flex: 1 1 220px;
  padding: 15px;
}

.svc-figure p {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--svc-slate);
}

/* The ACF field emits the figure and its caption as two sibling paragraphs,
   so the first one carries the number. Also covers the older <span> markup. */
.svc-figure p:first-child,
.svc-figure p span {
  display: block;
  margin-bottom: 6px;
  font-size: 44px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--svc-charcoal);
}


/* ==========================================================================
   FOLD 5 — Testimonials
   Quote first, attribution under it. The old layout put the job title in a
   tab above the card, which read as a label rather than a person.
   ========================================================================== */

/* The role sits in a tab on the card's top edge and the portrait hangs off
   its left edge, so the list reserves room for both: row gap and li padding
   for the tab overhang, left padding for the half of the medallion that
   sits outside the card. */
.svc-quote-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 42px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-quote {
  display: flex;
  margin: 0;
  padding: 0 0 0 50px;
}

.svc-quote-inner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 125px;
  padding: 22px 22px 22px 65px;
  background: var(--svc-white);
  border-radius: var(--svc-radius);
  box-shadow: var(--svc-shadow-lift);
}

/* Role tab, straddling the top edge. */
.svc-quote-role {
  position: absolute;
  top: -20px;
  left: 20px;
  width: calc(100% - 40px);
  padding: 6px;
  border-radius: 6px;
  background-color: var(--svc-slate);
  color: var(--svc-white);
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  text-align: center;
}

/* Portrait, centred on the card's left edge. */
.svc-quote-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
}

.svc-quote-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
}

.svc-quote-body {
  min-width: 0;
}

.svc-quote-body p {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 20px;
  color: var(--svc-slate);
}

.svc-quote-body p:last-child {
  margin-bottom: 0;
}

.svc-quote-body a {
  color: var(--svc-navy);
}


/* ==========================================================================
   FOLD 6 — Services at your terms
   ========================================================================== */

.svc-terms {
  background: var(--svc-white);
}

.svc-two-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.svc-two-col-item h3,
.svc-two-col-item h4 {
  margin: 0 0 16px;
  padding-bottom: 15px;
  font-size: 22px;
  line-height: 30px;
  font-weight: 600;
  color: var(--svc-slate);
  border-bottom: 1px solid var(--svc-line-soft);
  text-transform: none;
}

.svc-panel-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--svc-gap);
  margin-top: 40px;
}

.svc-panel {
  padding: 32px 32px 28px;
  background-color: var(--svc-charcoal);
  border-radius: var(--svc-radius);
}

.svc-panel h3 {
  margin: 0 0 16px;
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
  color: var(--svc-white);
  text-transform: none;
}

.svc-section .svc-panel-body p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 25px;
  color: rgba(255, 255, 255, 0.92);
}

.svc-section .svc-panel-body p:last-child {
  margin-bottom: 0;
}

.svc-panel-body a {
  color: var(--svc-white);
  text-decoration: underline;
}


/* ==========================================================================
   LEARNING CENTRE
   ========================================================================== */

.svc-learn {
  background: var(--svc-navy);
  padding: 40px 0;
}

.svc-learn-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
}

.svc-learn-media {
  flex: 0 0 400px;
  max-width: 100%;
}

.svc-learn-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--svc-radius);
  margin: 0;
}

.svc-learn-text {
  flex: 1 1 320px;
  min-width: 0;
}

.svc-learn-text h2 {
  margin: 0 0 14px;
  font-size: 30px;
  line-height: 40px;
  font-weight: 600;
  color: var(--svc-white);
  text-transform: none;
}

.svc-section .svc-learn-body p {
  color: var(--svc-white);
  margin-bottom: 24px;
}

.svc-learn-body a {
  color: #00f0ff;
}


/* ==========================================================================
   FOLD 7 — Process, step table
   Replaces the vertical rail. One framed box, one row per step: icon cell on
   the left behind a divider, then number, title and one sentence. Borders sit
   on the list and on .svc-step + .svc-step, so the frame closes itself
   whatever the step count is.

   Rows with no description (legacy infographic content) render title-only and
   stay vertically centred against the icon, so the fallback still reads.
   ========================================================================== */

.svc-process {
  background: var(--svc-tint-cool);
}

.svc-steps {
  max-width: 690px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  background: var(--svc-white);
  border: 1px solid var(--svc-line);
  border-radius: 6px;
  overflow: hidden;
}

.svc-step {
  margin: 0;
  padding: 0;
}

.svc-step::marker {
  content: none;
}

.svc-step + .svc-step {
  border-top: 1px solid var(--svc-line);
}

.svc-step-row {
  display: flex;
  align-items: stretch;
  color: inherit;
  font-weight: 400;
  text-decoration: none;
}

/* Icon cell — fixed width, divider on its right edge. */
.svc-step-icon {
  flex: 0 0 76px;
  width: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-right: 1px solid var(--svc-line);
}

.svc-step-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  margin: 0;
}

/* Fallback when no icon has been uploaded for a step. */
.svc-step-num {
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  color: var(--svc-blue);
}

.svc-step-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 24px;
}

.svc-step-title {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: var(--svc-navy);
  text-transform: none;
  overflow-wrap: break-word;
}

.svc-step-no {
  color: var(--svc-blue);
}

.svc-section .svc-step-desc {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--svc-slate);
}

/* Title-only rows sit a little tighter than rows carrying a sentence. */
.svc-step.is-title-only .svc-step-text {
  padding-top: 16px;
  padding-bottom: 16px;
}

a.svc-step-row {
  transition: background-color 0.2s ease;
}

a.svc-step-row:hover,
a.svc-step-row:focus {
  background-color: #f7f8ff;
}

a.svc-step-row:hover .svc-step-title,
a.svc-step-row:focus .svc-step-title {
  color: var(--svc-orange);
}

a.svc-step-row:focus-visible {
  outline: 2px solid var(--svc-orange);
  outline-offset: -2px;
}


/* ==========================================================================
   FOLD 8 — Why choose us
   ========================================================================== */

.svc-why {
  background: var(--svc-tint-banner);
}


/* ==========================================================================
   FOLD 9 — Closing tiles
   ========================================================================== */

.svc-closing {
  background: linear-gradient(180deg, rgba(4, 17, 63, 0.94) 3%, rgba(4, 17, 63, 0.94) 95%);
}

.svc-tile-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--svc-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-tile {
  margin: 0;
}

.svc-tile-inner {
  display: block;
  height: 100%;
  padding: 5px 5px 20px;
  background: var(--svc-tint);
  border: 3px solid transparent;
  border-radius: var(--svc-radius-lg);
  box-shadow: var(--svc-shadow-tile);
  transition: border-color 0.2s ease;
}

a.svc-tile-inner:hover,
a.svc-tile-inner:focus {
  border-color: var(--svc-orange);
}

a.svc-tile-inner:focus-visible {
  outline: 2px solid var(--svc-orange);
  outline-offset: 3px;
}

.svc-tile-img {
  display: block;
  margin-bottom: 18px;
  border-radius: var(--svc-radius-lg);
  overflow: hidden;
}

.svc-tile-img img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  margin: 0;
}

.svc-tile-title {
  margin: 0;
  padding: 0 12px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: var(--svc-slate);
  text-align: left;
  text-transform: none;
}


/* ==========================================================================
   FAQs
   Class names kept from the old sheet so the existing accordion JS still
   finds .ques-text and .inner-faq-section.
   ========================================================================== */

.svc-faqs {
  background-color: var(--svc-tint-cool);
}

.svc-faq {
  margin: 0 0 20px;
  padding: 26px 24px;
  background: var(--svc-white);
  border: 0;
  border-radius: var(--svc-radius);
  box-shadow: var(--svc-shadow-card);
}

.svc-faq:last-child {
  margin-bottom: 0;
}

.svc-faq .ques-text {
  position: relative;
  display: block;
  margin: 0;
  padding: 0 56px 0 0;
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: var(--svc-slate);
  cursor: pointer;
  text-transform: none;
}

.svc-faq .ques-text::after {
  content: "";
  position: absolute;
  right: 0;
  top: -10px;
  display: block;
  width: 42px;
  height: 42px;
  background: url(https://www.nebiolab.com/wp-content/uploads/2023/04/Caret-up.webp) 0 0 no-repeat;
}

.svc-faq .ques-text.active::after {
  background-image: url(https://www.nebiolab.com/wp-content/uploads/2023/04/Caret-down.webp);
}

.svc-faq .inner-faq-section {
  display: none;
  padding-top: 18px;
}

.svc-faq .inner-faq-section p,
.svc-faq .inner-faq-section li,
.svc-faq .inner-faq-section td,
.svc-faq .inner-faq-section th {
  font-size: 17px;
  line-height: 26px;
  color: var(--svc-slate);
}

.svc-faq .inner-faq-section li {
  margin-bottom: 12px;
  word-break: break-word;
}

.svc-faq .inner-faq-section h4,
.svc-faq .inner-faq-section h5,
.svc-faq .inner-faq-section h6 {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--svc-slate);
}

.faq-list-accordian.open_accordian .inner-faq-section {
  display: block !important;
}


/* ==========================================================================
   EXPLORE MORE SERVICES
   ========================================================================== */

.svc-explore-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--svc-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-explore-item {
  margin: 0;
}

.svc-explore-link {
  position: relative;
  display: block;
  height: 218px;
  overflow: hidden;
  border-radius: var(--svc-radius);
  transition: transform 0.15s ease-out;
}

.svc-explore-link:hover,
.svc-explore-link:focus {
  transform: scale(1.014);
}

.svc-explore-link:focus-visible {
  outline: 2px solid var(--svc-orange);
  outline-offset: 3px;
}

.svc-explore-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

.svc-explore-label br {
  display: none;
}

.svc-explore-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  font-size: 22px;
  line-height: 32px;
  font-weight: 600;
  color: var(--svc-white);
  text-align: center;
  background: linear-gradient(90deg, #010920 16%, rgba(6, 10, 95, 0.84) 46%, rgba(4, 25, 43, 0.74) 92%);
}

.svc-explore-link.is-current {
  outline: 5px solid var(--svc-orange-hover);
  outline-offset: -5px;
}


/* ==========================================================================
   RESPONSIVE
   Four breakpoints instead of the old sheet's nine. Nothing here is
   position-dependent, so the intermediate steps are no longer needed.
   ========================================================================== */

@media all and (max-width: 1199px) {
  :root {
    --svc-form-w: 400px;
  }

  .svc-head h2,
  .svc-banner-head h1 {
    font-size: 30px;
    line-height: 40px;
  }

  .svc-card {
    padding: 24px 20px 20px;
  }

  .svc-card-title {
    font-size: 18px;
    line-height: 26px;
  }

  .svc-side-image {
    max-width: 240px;
  }

  .svc-case-grid {
    gap: 42px 10px;
  }

  .svc-case-inner {
    padding: 42px 12px 14px;
  }

  .svc-case-title {
    font-size: 14px;
    line-height: 20px;
  }
}

@media all and (max-width: 1023px) {
  :root {
    --svc-section-y: 36px;
    --svc-gap: 20px;
  }

  .svc-split {
    display: block;
  }

  /* Content before form on every fold once stacked — the form is long, and
     burying the copy under it is what makes the mobile page feel empty. */
  .svc-split-form {
    width: 100%;
    max-width: none;
    margin-top: 32px;
  }

  .svc-split-body {
    margin-top: 0;
  }

  /* Split has stacked, so the grid has the full width back — cards can
     breathe again. */
  .svc-case-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 52px var(--svc-gap);
  }

  .svc-case-inner {
    padding: 52px 20px 20px;
  }

  .svc-case-icon {
    width: 80px;
    height: 80px;
  }

  .svc-case-icon::after {
    width: 72px;
    height: 72px;
  }

  .svc-case-icon img {
    max-width: 52px;
    max-height: 52px;
  }

  .svc-case-title {
    font-size: 17px;
    line-height: 24px;
  }

  .svc-section .svc-case-desc {
    font-size: 14px;
    line-height: 20px;
  }

  .svc-explore-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .svc-side-image {
    display: none;
  }

  .svc-learn-media {
    display: none;
  }

  .svc-statbar {
    background-color: var(--svc-tint-mobile);
    border-top: 0;
    padding: 10px 12px 25px;
  }

  .svc-statbar-heading {
    color: var(--svc-slate);
    margin-bottom: 14px;
  }

  .svc-statbar-grid {
    grid-template-columns: repeat(2, 1fr);
    border: 1px solid rgba(31, 49, 73, 0.12);
  }

  .svc-stat {
    padding: 14px 8px;
    border-right: 1px solid rgba(31, 49, 73, 0.12);
  }

  .svc-stat:nth-child(2n) {
    border-right: 0;
  }

  .svc-stat:nth-child(n + 3) {
    border-top: 1px solid rgba(31, 49, 73, 0.12);
  }

  .svc-stat strong {
    font-size: 24px;
    color: var(--svc-blue);
  }

  .svc-stat .svc-stat-symbol {
    color: var(--svc-orange-rule);
  }

  .svc-stat span {
    font-size: 13px;
    line-height: 18px;
    color: var(--svc-slate);
  }

  .svc-head {
    margin-bottom: 28px;
  }

  .svc-head h2,
  .svc-banner-head h1 {
    font-size: 24px;
    line-height: 32px;
  }

  .svc-head-sub {
    font-size: 18px;
    line-height: 26px;
  }

  .svc-section .org-summary-list li {
    font-size: 18px;
    line-height: 26px;
  }
}

@media all and (max-width: 767px) {
  .svc-card-grid,
  .svc-case-grid,
  .svc-quote-list,
  .svc-two-col,
  .svc-panel-pair,
  .svc-explore-list,
  .svc-tile-row {
    grid-template-columns: 1fr;
  }

  /* Step table narrows rather than stacking — the icon column is what makes
     the rows scannable, and it costs little width. */
  .svc-step-icon {
    flex-basis: 58px;
    width: 58px;
    padding: 8px;
  }

  .svc-step-icon img {
    width: 26px;
    height: 26px;
  }

  .svc-step-num {
    font-size: 18px;
  }

  .svc-step-text {
    padding: 14px 16px;
  }

  .svc-step.is-title-only .svc-step-text {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .svc-step-title {
    font-size: 16px;
    line-height: 24px;
  }

  .svc-section .svc-step-desc {
    font-size: 14px;
    line-height: 20px;
  }

  /* Nothing to reserve once the grid is one column. */
  .svc-card-spacer {
    display: none;
  }

  .svc-panel {
    padding: 24px 20px 20px;
  }

  .svc-figure-pair {
    padding: 4px 16px;
  }

  .svc-figure p span {
    font-size: 40px;
    line-height: 50px;
  }

  .svc-btn-row .svc-btn {
    flex: 1 1 100%;
  }

  .svc-quote {
    padding-left: 40px;
  }

  .svc-quote-inner {
    padding: 22px 18px 18px 52px;
  }

  .svc-quote-icon {
    width: 80px;
    height: 80px;
  }

  .svc-explore-link {
    height: auto;
  }

  .svc-explore-link img {
    display: none;
  }

  .svc-explore-label {
    position: static;
    display: flex;
    min-height: 80px;
    padding: 0 20px;
    background: var(--svc-tint-cool);
    color: var(--svc-slate);
    font-size: 18px;
    line-height: 26px;
    text-align: left;
    justify-content: flex-start;
  }

  .svc-explore-link.is-current {
    outline-offset: 0;
  }

  .svc-tile-img img {
    height: 200px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-case-inner,
  .svc-tile-inner,
  .svc-explore-link,
  .svc-step-row {
    transition: none;
  }

  .svc-explore-link:hover,
  .svc-explore-link:focus {
    transform: none;
  }
}