@charset "UTF-8";
/* ==========================================================================
   SmartCogs — Bootstrap compatibility layer

   The 136 deep solution pages were authored against Bootstrap's grid and
   component classes. Rather than re-introduce Bootstrap (and its CDN
   dependency), this file reimplements only the classes those pages actually
   use, styled in the SmartCogs palette.

   Load AFTER smartcogs.css.
   ========================================================================== */

/* ---------- grid ---------- */
.container,
.container-fluid {
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
}

.container-fluid {
  width: min(100% - 2rem, 100%);
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -.75rem;
}

.row>* {
  padding-inline: .75rem;
  width: 100%;
}

[class*="col-"] {
  padding-inline: .75rem;
}

.col {
  flex: 1 0 0%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-1 {
  width: 8.3333%;
}

.col-2 {
  width: 16.6667%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.3333%;
}

.col-5 {
  width: 41.6667%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.3333%;
}

.col-8 {
  width: 66.6667%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.3333%;
}

.col-11 {
  width: 91.6667%;
}

.col-12 {
  width: 100%;
}

@media (min-width: 576px) {
  .col-sm-3 {
    width: 25%;
  }

  .col-sm-4 {
    width: 33.3333%;
  }

  .col-sm-6 {
    width: 50%;
  }

  .col-sm-12 {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .col-md-1 {
    width: 8.3333%;
  }

  .col-md-2 {
    width: 16.6667%;
  }

  .col-md-3 {
    width: 25%;
  }

  .col-md-4 {
    width: 33.3333%;
  }

  .col-md-5 {
    width: 41.6667%;
  }

  .col-md-6 {
    width: 50%;
  }

  .col-md-7 {
    width: 58.3333%;
  }

  .col-md-8 {
    width: 66.6667%;
  }

  .col-md-9 {
    width: 75%;
  }

  .col-md-10 {
    width: 83.3333%;
  }

  .col-md-12 {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .col-lg-2 {
    width: 16.6667%;
  }

  .col-lg-3 {
    width: 25%;
  }

  .col-lg-4 {
    width: 33.3333%;
  }

  .col-lg-5 {
    width: 41.6667%;
  }

  .col-lg-6 {
    width: 50%;
  }

  .col-lg-7 {
    width: 58.3333%;
  }

  .col-lg-8 {
    width: 66.6667%;
  }

  .col-lg-9 {
    width: 75%;
  }

  .col-lg-12 {
    width: 100%;
  }
}

/* ---------- flex & alignment ---------- */
.d-flex {
  display: flex;
}

.d-block {
  display: block;
}

.d-none {
  display: none;
}

.d-inline-block {
  display: inline-block;
}

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.align-items-center {
  align-items: center;
}

.align-items-start {
  align-items: flex-start;
}

.align-items-end {
  align-items: flex-end;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-end {
  justify-content: flex-end;
}

.text-center {
  text-align: center;
}

.text-start,
.text-left {
  text-align: left;
}

.text-end,
.text-right {
  text-align: right;
}

.mx-auto {
  margin-inline: auto;
}

.h-100 {
  height: 100%;
}

.w-100 {
  width: 100%;
}

.position-relative {
  position: relative;
}

/* ---------- spacing ---------- */
.m-0 {
  margin: 0
}

.mt-0 {
  margin-top: 0
}

.mb-0 {
  margin-bottom: 0
}

.mt-1 {
  margin-top: .25rem
}

.mt-2 {
  margin-top: .5rem
}

.mt-3 {
  margin-top: 1rem
}

.mt-4 {
  margin-top: 1.5rem
}

.mt-5 {
  margin-top: 3rem
}

.mb-1 {
  margin-bottom: .25rem
}

.mb-2 {
  margin-bottom: .5rem
}

.mb-3 {
  margin-bottom: 1rem
}

.mb-4 {
  margin-bottom: 1.5rem
}

.mb-5 {
  margin-bottom: 3rem
}

.ms-2 {
  margin-left: .5rem
}

.ms-3 {
  margin-left: 1rem
}

.me-2 {
  margin-right: .5rem
}

.me-3 {
  margin-right: 1rem
}

.p-0 {
  padding: 0
}

.p-2 {
  padding: .5rem
}

.p-3 {
  padding: 1rem
}

.p-4 {
  padding: 1.5rem
}

.p-5 {
  padding: 3rem
}

.pt-3 {
  padding-top: 1rem
}

.pt-4 {
  padding-top: 1.5rem
}

.pt-5 {
  padding-top: 3rem
}

.pb-3 {
  padding-bottom: 1rem
}

.pb-4 {
  padding-bottom: 1.5rem
}

.pb-5 {
  padding-bottom: 3rem
}

.py-2 {
  padding-block: .5rem
}

.py-3 {
  padding-block: 1rem
}

.py-4 {
  padding-block: 1.5rem
}

.py-5 {
  padding-block: 3rem
}

.px-3 {
  padding-inline: 1rem
}

.px-4 {
  padding-inline: 1.5rem
}

.px-5 {
  padding-inline: 3rem
}

/* ---------- legacy custom classes from the old stylesheet ---------- */
.specer {
  display: block;
  height: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.block100 {
  display: block;
  width: 100%;
}

.p20 {
  padding: 1.25rem;
}

.nrmltxt {
  font-size: 1rem;
  color: var(--slate);
  line-height: 1.7;
}

/* ---------- images ---------- */
.img-fluid,
.img-responsive {
  max-width: 100%;
  height: auto;
}

.rounded {
  border-radius: var(--radius);
}

.rounded-circle {
  border-radius: 50%;
}

/* ---------- typography bridged to the brand ---------- */
.fw-bold,
.fw-bolder {
  font-weight: 700;
}

.fw-normal {
  font-weight: 400;
}

.text-primary {
  color: var(--teal-ink) !important;
}

.text-muted,
.text-secondary {
  color: var(--slate) !important;
}

.text-white {
  color: #fff !important;
}

.lead {
  font-size: var(--fs-lead);
  color: var(--slate);
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  font-family: var(--font-display);
  line-height: 1.12;
  color: var(--navy);
}

/* deep pages set headings via plain tags — give them the brand face */
main h1,
main h2,
main h3 {
  font-family: var(--font-display);
  color: var(--navy);
}

main h1 {
  font-size: clamp(1.9rem, 1.3rem + 2.3vw, 3rem);
  margin-bottom: .8rem;
}

main h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);
  margin-bottom: .7rem;
}

main h3 {
  font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem);
  margin-bottom: .5rem;
}

main h4,
main h5 {
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .4rem;
}

main p {
  margin-bottom: 1rem;
  color: var(--slate);
}

main ul:not(.card__list):not(.tile__links) {
  padding-left: 1.15rem;
  list-style: disc;
}

main ul:not(.card__list):not(.tile__links) li {
  margin-bottom: .4rem;
  color: var(--slate);
}

main a:not(.btn):not(.tile):not(.chip) {
  color: var(--teal-ink);
}

main a:not(.btn):not(.tile):not(.chip):hover {
  text-decoration: underline;
}

/* ---------- cards ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 1rem + .8vw, 1.8rem);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.card-body {
  padding: 0;
}

.card-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--navy);
  margin-bottom: .5rem;
}

.card-text {
  color: var(--slate);
  font-size: 1rem;
}

.card-img-top {
  border-radius: var(--radius) var(--radius) 0 0;
  margin: -1.4rem -1.4rem 1.1rem;
  width: calc(100% + 2.8rem);
}

/* ---------- buttons ---------- */
.btn-primary,
.btn.btn-primary {
  background: var(--teal);
  color: var(--navy);
  border-color: var(--teal);
}

.btn-primary:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.btn-secondary,
.btn-outline-primary {
  border-color: var(--line-strong);
  color: var(--ink);
  background: #fff;
}

.btn-outline-primary:hover {
  border-color: var(--teal-ink);
  color: var(--teal-ink);
}

.btn-lg {
  padding: 1rem 2rem;
}

.btn-sm {
  padding: .55rem 1.1rem;
  font-size: .78rem;
}

/* ---------- forms ---------- */
.form-label {
  display: block;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin-bottom: .4rem;
}

.form-control,
.form-select,
textarea.form-control {
  width: 100%;
  padding: .8rem 1rem;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--teal-ink);
  box-shadow: 0 0 0 3px rgba(17, 92, 122, .16);
}

/* ---------- nav / list remnants ---------- */
.nav {
  display: flex;
  flex-wrap: wrap;
}

.nav-item {
  list-style: none;
}

.nav-link {
  display: block;
  padding: .5rem .9rem;
  color: var(--slate);
}

.nav-link:hover,
.nav-link.active {
  color: var(--teal-ink);
}

.list-unstyled {
  list-style: none !important;
  padding-left: 0 !important;
}

/* ---------- tables ---------- */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: .7rem .6rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.table th {
  color: var(--navy);
  font-weight: 700;
}

/* wide content must scroll inside itself, never widen the page */
.table-responsive {
  overflow-x: auto;
}

/* ---------- deep-page section rhythm ---------- */
main>section,
main>div.container {
  padding-block: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* ---------- legacy hero sections ----------
   The old pages set white text on a `.bg` section whose background image came
   from the stylesheet we removed. Without a ground those headings rendered
   white-on-white and looked like an empty gap. Give them the brand navy so the
   original intent (dark hero, white type) still reads. */
section.bg,
.bg {
  background: linear-gradient(150deg, var(--navy) 0%, #123052 100%);
  color: #fff;
  border-radius: var(--radius);
  padding-block: clamp(2rem, 1.5rem + 3vw, 4rem);
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* cover every descendant - labels were sitting navy-on-navy */
.bg,
.bg * {
  color: #fff !important;
}

.bg svg,
.bg i {
  fill: currentColor;
  stroke: currentColor;
}

.bg a:not(.btn) {
  color: var(--teal) !important;
}

.bg input,
.bg select,
.bg textarea,
.bg option {
  color: var(--ink) !important;
}

.bg .nrmltxt {
  color: rgba(255, 255, 255, .86) !important;
}

.bg .btn,
.bg button {
  background: var(--teal);
  color: var(--navy);
  border-color: var(--teal);
}

/* page-specific helpers left behind by the old stylesheet */
.disflx {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.subcont {
  width: 100%;
}

.container1 {
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
}

/* legacy forms sat on the dark hero */
.bg .form-control,
.bg input,
.bg select {
  background: rgba(255, 255, 255, .96);
  color: var(--ink);
  border-color: transparent;
}

.bg .form-label,
.bg label {
  color: #fff !important;
}

/* ==========================================================================
   LEGACY PAGE PATTERNS
   The deep pages were authored against a stylesheet we removed, so their
   layout classes had no rules at all and collapsed into stacked columns.
   These reimplement the patterns in the brand palette. Counts are how many
   deep pages use each one.
   ========================================================================== */

/* ---------- section shells ---------- */
.hero-section,
.content-section,
.about-us-section,
.use-cases-section,
.services-section,
.testimonials-section,
.faq-section,
.stats-section,
.cta-section,
.process-section {
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

.hero-section>.container,
.content-section>.container,
.about-us-section>.container,
.use-cases-section>.container,
.services-section>.container,
.testimonials-section>.container,
.faq-section>.container,
.stats-section>.container {
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
}

.about-us-section,
.testimonials-section,
.faq-section {
  background: var(--bg-alt);
}

/* ---------- headings ---------- */
.section-heading {
  font-family: var(--font-display);
  color: var(--navy);
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  margin-bottom: .6rem;
}

.underline {
  width: 64px;
  height: 3px;
  background: var(--teal);
  border-radius: 2px;
  margin-bottom: 1.8rem;
}

/* ---------- hero blocks (124 pages) ---------- */
.hero-section {
  background: linear-gradient(150deg, var(--navy) 0%, var(--surface-2, #123052) 100%);
  color: #fff;
  border-radius: var(--radius);
}

.hero-section,
.hero-section * {
  color: #fff;
}

.hero-section a:not(.btn) {
  color: var(--teal);
}

/* ---------- the hero's own composition ----------
   The generic image rule caps art at 300px tall, so a 499x578 hero
   illustration rendered at 259x300 - under half size in a 612px column. The
   two columns also sat edge to edge with no air between copy and artwork. */
main .hero-section:first-of-type .row {
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}

main .hero-section:first-of-type .row>[class*="col-"] {
  flex: 1 1 0;
  width: auto;
  max-width: none;
  min-width: 0;
}

main .hero-section:first-of-type .row img {
  width: 100%;
  max-width: 460px;
  height: auto;
  max-height: none;
  margin-inline: auto;
  display: block;
}

/* ---------- .hero-section reused as a generic section wrapper ----------
   Some templates put .hero-section on EVERY band, so the whole page rendered
   as one flat navy slab instead of the usual white / tint / navy rhythm. Only
   the first one is the hero; the rest become normal light sections. */
main .hero-section~.hero-section {
  background: #fff;
  border-radius: 0;
}

main .hero-section~.hero-section:nth-of-type(even) {
  background: var(--bg-alt);
}

main .hero-section~.hero-section,
main .hero-section~.hero-section :is(h1, h2, h3, h4, h5, h6, strong, b) {
  color: var(--navy);
}

main .hero-section~.hero-section :is(p, li, span, div, small, td, th, label):not(:is(.btn, .btn *)) {
  color: var(--slate);
}

/* deliberate accent spans keep the accent tone - without this they fall back
   to the blanket `.hero-section * { color:#fff }` and vanish on a light band */
main .hero-section~.hero-section :is(.accent, .highlight, .highlight-blue, .blue, .gradient-text) {
  color: var(--teal-ink);
}

/* --teal is 2.58 on white and fails AA; the darker ink tone is 6.4 */
main .hero-section~.hero-section a:not(.btn) {
  color: var(--teal-ink);
}

/* cards inside those sections were given a translucent dark-band surface */
main .hero-section~.hero-section :is(.card, [class*="-card"], [class*="-box"]) {
  background: #fff;
  border-color: var(--line);
}

/* `.hero-section p` is set to the dark-band muted tone with !important, which
   leaves body copy washed out once the band is white. */
main .hero-section~.hero-section p {
  color: var(--slate) !important;
}

/* the small bold labels were left on full-strength teal, which is 2.58 on
   white and fails AA. --teal-ink is the token for accent text on light. */
main .hero-section~.hero-section :is(strong, b) {
  color: var(--teal-ink) !important;
}

/* 62ch is right for a plain prose hero, but this class is also used on full
   `.container` wrappers holding a grid - there it squeezed a 1224px row down to
   593px and stacked its columns. Only constrain the prose case. */
.hero-content:not(.container):not(:has(.row)):not(:has([class*="-grid"])) {
  max-width: 62ch;
}

.hero-content h1,
.hero-content h2 {
  color: #fff;
}

/* ---------- the numbered timeline (use-case) ----------
   DOM order alternates between rows (some put the image first), so a fixed
   three-column grid squeezed every other image. A simple two-column grid works
   regardless of order, and the step number comes from a CSS counter because the
   original numerals were bitmap images. */
.use-cases-section .container {
  counter-reset: usecase;
}

.use-case {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
  counter-increment: usecase;
}

.use-case-content h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  color: var(--navy);
  margin-bottom: .7rem;
}

.use-case-content p {
  color: var(--slate);
  font-size: .96rem;
}

.use-case-image {
  position: relative;
  min-width: 0;
}

.use-case-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
  display: block;
}

/* the step badge sits on the image corner */
.number-circle {
  position: absolute;
  top: -18px;
  left: -18px;
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--navy);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.05rem;
  box-shadow: 0 0 0 6px rgba(39, 183, 188, .16);
}

.number-circle::before {
  content: counter(usecase, decimal-leading-zero);
}

.number-circle img {
  display: none;
}

/* old dashed-line spacer graphic */

@media (max-width: 820px) {
  .use-case {
    grid-template-columns: 1fr;
  }

  .number-circle {
    top: -14px;
    left: -8px;
    width: 44px;
    height: 44px;
    font-size: .95rem;
  }
}

/* ---------- card patterns ---------- */
.service-card,
.feature-card,
.testimonial-card,
.step-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(1.2rem, 1rem + .8vw, 1.8rem);
  height: 100%;
  box-shadow: 0 2px 6px rgba(12, 36, 63, .05), 0 14px 34px rgba(12, 36, 63, .06);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.service-card:hover,
.feature-card:hover,
.step-card:hover {
  transform: translateY(-3px);
}

.service-card h3,
.feature-card h3,
.testimonial-card h3,
.step-card h3,
.service-card h4,
.feature-card h4,
.step-card h4 {
  font-family: var(--font-body);
  font-weight: 800;
  color: var(--navy);
  font-size: 1.1rem;
  margin-bottom: .5rem;
}

.service-card p,
.feature-card p,
.testimonial-card p,
.step-card p {
  color: var(--slate);
  font-size: .95rem;
}

.service-card img,
.feature-card img,
.step-card img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 1rem;
}

/* ---------- utilities the old sheet supplied ---------- */
.fs-1 {
  font-size: clamp(2rem, 1.4rem+2vw, 2.8rem)
}

.fs-2 {
  font-size: clamp(1.7rem, 1.3rem+1.5vw, 2.3rem)
}

.fs-3 {
  font-size: clamp(1.4rem, 1.2rem+1vw, 1.9rem)
}

.fs-4 {
  font-size: clamp(1.2rem, 1.1rem+.6vw, 1.5rem)
}

.fs-5 {
  font-size: 1.15rem
}

.fs-6 {
  font-size: 1rem
}

/* On a plain flex container these are a real gap. */
.g-2 {
  gap: .5rem
}

.g-3 {
  gap: 1rem
}

.g-4 {
  gap: 1.5rem
}

.g-5 {
  gap: 3rem
}

/* On a .row they are NOT. Bootstrap implements g-* as gutters - padding on the
   columns plus a negative margin on the row - and the columns here already
   carry that padding. Adding a flex gap on top pushed two 50% columns past the
   row width and collapsed every 2-up grid into a single column. Column gutters
   come from the padding; g-* only controls the vertical rhythm between rows. */
.row.g-1,
.row.g-2,
.row.g-3,
.row.g-4,
.row.g-5 {
  column-gap: 0;
}

.row.g-1 {
  row-gap: .25rem
}

.row.g-2 {
  row-gap: .5rem
}

.row.g-3 {
  row-gap: 1rem
}

.row.g-4 {
  row-gap: 1.5rem
}

.row.g-5 {
  row-gap: 3rem
}

/* icon fonts were dropped with the old stylesheet - an empty <i> would
   otherwise leave a stray gap or a tofu box */
i.bi:empty,
i.fa:empty,
i.fas:empty,
i.far:empty,
span.bi:empty {
  display: none;
}

/* ==========================================================================
   LEGACY "PageN" TEMPLATE  -  18 files (9 pages + 9 UAT copies)

   A second authoring template, unrelated to the `use-case` one above. It wraps
   everything in numbered shells (.Page1 - .Page8) and leans on a stylesheet we
   removed, so every one of these classes had no rules at all: heroes rendered
   as bare paragraphs, stat rows stacked one word per line, and half-width
   columns whose only content was a background image collapsed into voids.

   Decorative bitmaps in this template are drawn in #2073C2 - one of the
   competing blues the audit bans. Rules, arrows and chevrons are hidden and
   redrawn in CSS; the content icons are hue-corrected into the brand family.
   ========================================================================== */

/* ---------- shells & rhythm ---------- */
.Page2,
.Page3,
.Page4,
.Page5,
.Page6,
.Page7 {
  padding-block: clamp(2.25rem, 1.75rem + 2.5vw, 4rem);
}

/* .Page1 is an empty shell on most of these pages - its only content was a
   background image on the old stylesheet. Hide it only when it really is empty. */
.Page1:not(:has(img, p, h1, h2, h3, section, a, button, ul)) {
  display: none;
}

/* the legacy in-page copyright. The real site footer already carries one, so
   this rendered as a second stray "(c) 2026 - All Rights Reserved." above it. */
.Inc,
hr.lines {
  display: none;
}

.Page8:not(:has(img, h1, h2, h3, ul, section)) {
  display: none;
}

/* ---------- the blue divider bitmaps (115x5, #2073C2) ----------
   Used as a rule under every heading. Hidden; the heading draws its own. */
.Page2 img[alt="Small Image"],
.Page3 img[alt="Small Image"],
.Page4 img[alt="Small Image"],
.Page5 img[alt="Small Image"],
.Page6 img[alt="Small Image"],
.Page7 img[alt="Small Image"],
.Page5 .new>img[alt=""] {
  display: none;
}

/* ---------- headings ---------- */
.left-text,
.left-text1,
.left-text2,
.info-box,
.Page5 .title,
.Page6>.container>h1,
.Page7>.container>h1,
.heading,
.heading1,
.heading2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 .55rem;
  text-align: left;
}

.left-text::after,
.left-text1::after,
.left-text2::after,
.info-box::after,
.Page5 .title::after,
.Page6>.container>h1::after,
.Page7>.container>h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  background: var(--teal);
  border-radius: 2px;
  margin-top: .9rem;
}

.Page5 .blue-background .title {
  color: #fff;
}

/* ---------- .Page2 - the opening hero ----------
   Consistently the headline block across all 9 pages (.text is the headline). */
.Page2 {
  background: linear-gradient(150deg, var(--navy) 0%, #123052 100%);
  color: #fff;
  padding-block: clamp(3rem, 2rem + 4.5vw, 5.5rem);
}

.Page2 .text,
.Page2 h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 1.06;
  color: #fff;
  margin: 0;
  max-width: 20ch;
}

.Page2 .text0,
.Page2 .nrmltxt {
  font-size: var(--fs-lead);
  color: var(--on-band-mut);
  max-width: 54ch;
  margin-top: 1.1rem;
}

.Page2 .text0>br:first-child,
.Page2 .nrmltxt>br:first-child {
  display: none;
}

.Page2 .row {
  align-items: center;
}

.Page2 img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.Page2 a:not(.btn) {
  color: var(--teal);
}

/* ---------- .Page3 - label / prose splits + the card grid ---------- */
.Page3 .row {
  align-items: flex-start;
}

.Page3 .right-paragraphs p,
.Page3 .right-paragraph p,
.Page3 .head {
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--slate);
  margin: 0 0 .9rem;
}

.Page3 .right-paragraph p:first-child {
  color: var(--navy);
  font-weight: 700;
}

.Page3 .head {
  color: var(--slate-soft);
  font-size: .95rem;
}

.Page3 .head strong {
  font-weight: 600;
}

/* the three product cards. Only the first carried `.card`; the other two used
   `.card1` / `.card2` and so had no frame at all. */
.card1,
.card2 {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 1rem + .8vw, 1.8rem);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.card1:hover,
.card2:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.dist .row {
  align-items: stretch;
}

.dist .card,
.dist .card1,
.dist .card2 {
  height: 100%;
}

.dist .card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dist .card-text {
  flex: 1 1 auto;
}

.small-screen-padding {
  padding-left: .75rem !important;
}

.card-img-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-bottom: 1rem;
  display: block;
  filter: hue-rotate(-15deg) saturate(.92);
}

/* One exception. The oil & gas set's img4 is drawn WHITE on transparency and
   vanished against the white card; a hue shift cannot rescue white, so that
   single file is flattened to the accent. Kept to an exact src match, because
   flattening a tile-style icon fills it into a solid block. */
.card-img-icon[src*="solution-oil-and-gas-exploration-and-production-distributor"] {
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(738%) hue-rotate(159deg) brightness(93%) contrast(92%);
}

/* "Read More" - the arrow was a blue bitmap on its own line. */
.read-more,
.read-more1,
.read-more2 {
  margin-top: 1rem;
}

.read-more span,
.read-more1 span,
.read-more2 span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .01em;
  color: var(--teal-ink) !important;
}

.read-more span::after,
.read-more1 span::after,
.read-more2 span::after {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h13M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h13M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
  transition: transform .25s var(--ease);
}

.read-more:hover span::after,
.read-more1:hover span::after,
.read-more2:hover span::after {
  transform: translateX(3px);
}

.read-more-icon {
  display: none;
}

/* ---------- .Page4 - the metrics band ----------
   `.bg-left` was an empty half whose picture came from the old stylesheet, so
   half the band rendered as white void while the stats crushed into the right
   column one word per line. Made a full-width navy band instead. */
/* Only a metrics band when the shell holds no cards - on other pages in this
   family .Page4 is an ordinary light section full of white cards. */
.Page4:not(:has(.card, .card1, .card2, .service-card, .feature-card, .testimonial-card, .step-card)) {
  background: linear-gradient(150deg, var(--navy) 0%, #123052 100%);
  color: #fff;
}

.Page4 .bg-left {
  display: none;
}

.Page4 .bg-right {
  width: 100%;
  justify-content: flex-start;
}

.Page4 .content-right {
  width: 100%;
  max-width: var(--maxw);
}

.Page4 .left-text2 {
  color: #fff;
}

.Page4 .dist1 {
  font-size: var(--fs-lead);
  color: var(--on-band-mut);
  max-width: 58ch;
  margin: 1rem 0 2.25rem;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
}

.stats>div {
  border-top: 2px solid rgba(39, 183, 188, .45);
  padding-top: 1rem;
}

.stats p {
  margin: 0;
  color: var(--on-band-mut);
  font-size: 1rem;
  line-height: 1.35;
}

.stats p.color {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem);
  line-height: 1;
  color: var(--teal);
  margin-bottom: .5rem;
}

/* ---------- .Page5 - split panel + the sample-question band ---------- */
.Page5 .row.no-gutters {
  margin-inline: 0;
}

.Page5 .row.no-gutters>* {
  padding-inline: 0;
}

/* When the section holds nothing but a full-bleed panel, its own 64px section
   padding shows as a white strip above and below - which reads as a gap when
   the neighbours are dark bands too. The panel is the section here. */
.Page5:has(> .row.no-gutters:only-child) {
  padding-block: 0;
}

.Page5 .full-height {
  align-items: stretch;
}

.Page5 .blue-background {
  background: linear-gradient(150deg, var(--navy) 0%, #123052 100%);
  color: #fff;
  display: flex;
  align-items: center;
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

.Page5 .blue-background p,
.Page5 .blue-background li {
  color: rgba(255, 255, 255, .88);
  font-size: 1.02rem;
}

.Page5 .blue-background ul {
  list-style: none;
  padding-left: 0;
  margin: 1.2rem 0;
}

.Page5 .blue-background li {
  padding: .35rem 0 .35rem 1.35rem;
  position: relative;
}

/* the literal middot prefixes were stripped from the markup; draw a real
   marker so the list reads as a list */
.Page5 .blue-background li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .95em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}

.Page5 .image-container {
  padding: 0;
}

.Page5 .image-container img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}

/* the sample-question band carried an inline light-blue ground */
.Page5#CheatSheet {
  background: var(--bg-alt) !important;
}

.Page5#CheatSheet .primary {
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--teal-ink) !important;
}

.Page5#CheatSheet h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.12;
  color: var(--navy);
}

.Page5#CheatSheet ul {
  padding-left: 1.1rem;
}

.Page5#CheatSheet li {
  color: var(--slate);
  padding: .3rem 0;
}

.Page5#CheatSheet li::marker {
  color: var(--teal);
}

.Page5#CheatSheet p:empty {
  display: none;
}

/* ---------- dark-panel text guard ----------
   compat.css sets `main ul:not(.card__list):not(.tile__links) li` to --slate at
   specificity 0,2,3, which outranks the panel rules above and painted dark
   slate text onto navy (contrast 1.9). Same guard the legacy `.bg` panel uses.

   Every selector skips card interiors: a white card sitting inside a navy band
   still needs light-theme ink, and a blanket rule here whited out the dentist
   page's card copy. */
.Page2,
.Page2 :is(p, li, h1, h2, h3, h4, h5, h6, div, span, strong, b, em, td, th, label, dt, dd, blockquote):not(:is(.card, .card1, .card2, .service-card, .feature-card, .testimonial-card, .step-card) *),
.Page4:not(:has(.card, .card1, .card2, .service-card, .feature-card, .testimonial-card, .step-card)),
.Page4:not(:has(.card, .card1, .card2, .service-card, .feature-card, .testimonial-card, .step-card)) :is(p, li, h1, h2, h3, h4, h5, h6, div, span, strong, b, em, td, th, label, dt, dd, blockquote):not(:is(.card, .card1, .card2, .service-card, .feature-card, .testimonial-card, .step-card) *),
.Page5 .blue-background,
.Page5 .blue-background :is(p, li, h1, h2, h3, h4, h5, h6, div, span, strong, b, em, td, th, label, dt, dd, blockquote):not(:is(.card, .card1, .card2, .service-card, .feature-card, .testimonial-card, .step-card) *) {
  color: #fff !important;
}

.Page2 .text0,
.Page2 .nrmltxt {
  color: var(--on-band-mut) !important;
}

.Page4 .dist1,
.Page4 .stats p {
  color: var(--on-band-mut) !important;
}

.Page4 .stats p.color {
  color: var(--teal) !important;
}

.Page5 .blue-background p,
.Page5 .blue-background li {
  color: rgba(255, 255, 255, .88) !important;
}

.Page5 .blue-background .small {
  color: rgba(255, 255, 255, .88) !important;
  font-size: 1.02rem;
}

.Page5 .blue-background .title1 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  margin: 1.4rem 0 .8rem;
  line-height: 1.2;
}

/* links and buttons keep their own treatment on the dark grounds */
.Page2 a:not(.btn),
.Page4 a:not(.btn),
.Page5 .blue-background a:not(.btn) {
  color: var(--teal) !important;
}

.Page2 .btn,
.Page4 .btn,
.Page5 .blue-background .btn,
.Page2 button,
.Page5 .blue-background button {
  background: var(--teal);
  color: var(--navy) !important;
  border-color: var(--teal);
}

/* ---------- shared: check-list rows ----------
   `<li><img class="img-responsive">We're Fast</li>` - img-responsive makes the
   tick a block element, so every icon sat on its own line above its label at
   full width. Lay the row out instead. */
.full-section ul,
.block50 ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.full-section ul li,
.block50 ul li {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .5rem 0;
  font-size: 1rem;
  color: var(--slate);
}

.full-section ul li img,
.block50 ul li img {
  width: 26px !important;
  height: 26px;
  flex: none;
  margin-right: 0 !important;
  object-fit: contain;
  filter: hue-rotate(-15deg) saturate(.92);
}

/* ---------- .Page6 - the news strip ---------- */
.Page6 .row {
  align-items: stretch;
}

.small-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .6rem 1rem;
  border-radius: var(--radius);
  background: var(--bg-alt) !important;
  color: var(--slate) !important;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* `.bg-primary`/`.text-white` were never defined here, so this label rendered
   white on white and the first tab looked blank. */
.small-box.bg-primary,
.small-box.text-white {
  background: var(--navy) !important;
  color: #fff !important;
}

.Page6 .space {
  margin-top: 1.5rem;
}

.big-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 260px;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background-color: var(--bg-alt);
  background-position: center;
  background-size: cover;
  padding: 1.4rem;
  position: relative;
}

.big-box[style*="background-image"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 36, 63, .25) 0%, rgba(12, 36, 63, .82) 100%);
}

.big-box>* {
  position: relative;
  z-index: 1;
}

.big-box .container {
  width: 100%;
  margin: 0;
  padding: 0;
}

.big-box .top {
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.42;
  color: var(--navy);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.big-box[style*="background-image"] .top {
  color: #fff;
}

.big-box .line,
.big-box .line1 {
  width: 44px;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
  margin-bottom: .9rem;
}

.big-box .date {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}

.big-box .date h1 {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
  margin: 0;
  color: var(--navy);
}

.big-box .date span:last-child {
  font-size: .82rem;
  color: var(--slate-soft);
  line-height: 1.2;
}

.big-box[style*="background-image"] .date h1,
.big-box[style*="background-image"] .date span {
  color: #fff;
}

/* ---------- .Page7 - FAQ + closing block ---------- */
.text3 {
  list-style: none;
  padding-left: 0;
  margin: 1.5rem 0 0;
}

.text3>li:empty {
  display: none;
}

.line2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line);
  padding: 1.15rem 0 .55rem;
}

.line2 h6 {
  font-size: 1.05rem;
  font-weight: 700 !important;
  color: var(--navy);
  margin: 0;
}

/* the blue bitmap chevron, redrawn */
.line2 img {
  display: none;
}

.line2::after {
  content: "";
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background-color: var(--teal-ink);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'><path d='M6 12h12'/></svg>");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
}

.text4 {
  padding: 0 0 1.15rem;
}

.text4 p {
  color: var(--slate);
  font-size: 1rem;
  margin: 0;
}

.Page7 h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--navy);
  margin: 1.5rem 0 .6rem;
}

.Page7>.container>.text-left>p {
  color: var(--slate);
  font-size: 1.02rem;
  max-width: 62ch;
}

@media (max-width: 767px) {

  .Page2 .text,
  .Page2 h1 {
    max-width: none;
  }

  .Page5 .image-container img {
    min-height: 240px;
  }

  .big-box {
    min-height: 200px;
  }

  .line2 {
    align-items: flex-start;
  }
}

/* ==========================================================================
   BATCH 1 - SHARED PATTERNS + FIVE PAGE TEMPLATES

   Shared block first: these class names recur across dozens of the remaining
   deep pages, so they are written unscoped. Page-specific vocabularies follow,
   each scoped to a wrapper that only that template uses.
   ========================================================================== */

/* ---------- shared: photo hero bands ----------
   `.bg-image` / `.bg-image2` carried their photograph in the removed
   stylesheet. Left with no ground and no container they collapsed to ~97px
   strips with the heading against the viewport edge. */
.bg-image,
.bg-image2 {
  background: linear-gradient(150deg, var(--navy) 0%, #123052 100%);
  color: #fff;
  padding-block: clamp(2.75rem, 2rem + 4vw, 5rem);
}

.bg-image .text-overlay,
.bg-image2 .text-overlay {
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
}

.bg-image h1,
.bg-image2 h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3.1rem);
  line-height: 1.08;
  color: #fff;
  margin: 0;
  max-width: 22ch;
}

.bg-image p,
.bg-image2 p {
  font-size: var(--fs-lead);
  color: var(--on-band-mut);
  max-width: 56ch;
  margin: 1rem 0 0;
}

.bg-image2 .text-overlay button {
  margin-top: 1.5rem;
  background: var(--teal);
  border: none;
  border-radius: var(--radius);
  padding: .75rem 1.6rem;
}

/* the global `a` colour is teal-ink, which on the teal button ground measures
   2.58 and fails AA. Navy on teal is 6.41. */
.bg-image2 .text-overlay button a,
.bg-image .text-overlay button a {
  color: var(--navy) !important;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
}

/* ---------- shared: section headings (24+ pages) ---------- */
.section-title,
.main-heading,
.main-title,
.section-title2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.2rem);
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 .6rem;
}

.service-title,
.title1 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--navy);
  display: block;
  margin-bottom: .3rem;
}

.description {
  font-size: .98rem;
  color: var(--slate);
}

.gray {
  color: var(--slate-soft);
  font-size: .88rem;
}

.fw-semibold {
  font-weight: 600;
}

.font-weight-bold {
  font-weight: 700;
}

/* icon bitmaps in this era were drawn in the old brand blue; bring them onto
   the single accent rather than leaving a second hue on the page */
/* These icons are drawn at hue 212. A -15deg shift lands them on the brand
   accent hue (197) while keeping the artwork intact. Do NOT flatten here: some
   are a coloured tile with a white glyph knocked out, and brightness(0) fills
   the tile and swallows the glyph. */
.service-icon-img,
.service-icon,
.emergency-icon,
.container-two .item .icon {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex: none;
  filter: hue-rotate(-15deg) saturate(.92);
}

.container-two .item .icon {
  width: 52px;
  height: 52px;
}

/* ---------- shared: contact block (31 pages) + send button (27) ---------- */
.contact-section {
  background: var(--bg-alt);
}

.contact-section .row {
  align-items: flex-start;
}

.contact-section input,
.contact-section textarea,
.contact-section select {
  width: 100%;
  padding: .75rem .9rem;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

.contact-section input:focus,
.contact-section textarea:focus {
  outline: none;
  border-color: var(--teal-ink);
  box-shadow: 0 0 0 3px rgba(17, 92, 122, .16);
}

.contact-section label {
  display: block;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-soft);
  font-weight: 700;
  margin-bottom: .35rem;
}

.send-btn,
button.send-btn,
.custom-btn,
.appointment-button,
.Newbutton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.9rem;
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  background: var(--teal);
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}

.send-btn:hover,
.custom-btn:hover,
.appointment-button:hover,
.Newbutton:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* ---------- shared: odometer counters ----------
   These were digit strips scrolled by the old stylesheet. With no rules the
   whole 0-9 strip printed inline ("- 0 1 2 3 4 5 M+"). The real value is in
   aria-label, so show that and hide the strip. */
.counters {
  text-align: left;
}

.counter {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem);
  line-height: 1;
  color: var(--teal-ink);
  margin: 0 0 .2rem;
}

/* an inline script rebuilds .counter into a scrolling odometer of digit
   spans. Without the old stylesheet the whole 0-9 strip printed as a column
   under each figure. The real value is in aria-label, so render that and drop
   the strip entirely. */
.counter[aria-label]>* {
  display: none;
}

.counter[aria-label]::before {
  content: attr(aria-label);
}

.counters>span {
  font-size: .92rem;
  color: var(--slate);
  display: block;
}

/* ---------- shared: testimonial strip ---------- */
.testimonials {
  background: var(--bg-alt);
}

.testimonials .row {
  align-items: stretch;
}

.testimonials .testimonial-card {
  height: 100%;
}

.here {
  text-align: center;
  color: var(--slate);
  max-width: 60ch;
  margin-inline: auto;
}

/* ---------- government-state ---------- */
.weare-section .row {
  align-items: center;
}

.weare__img img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}

.weare__content h2 {
  font-size: var(--fs-eyebrow);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-ink);
  font-family: var(--font-body);
  font-weight: 700;
  margin: 0;
}

.weare__count {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.Case-Studies .row {
  align-items: stretch;
}

.Case-Studies-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.Case-Studies-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.Case-Studies-card img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  margin-bottom: .9rem;
  filter: hue-rotate(-15deg) saturate(.92);
}

.Case-Studies-card h5 {
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 .3rem;
}

.Case-Studies-card p {
  font-size: .93rem;
  color: var(--slate);
  margin: .5rem 0 0;
}

/* ---------- utilities-electric-customer ---------- */
.container-one,
.container-two,
.main-section {
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
  padding-block: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
}

.container-one>h1,
.main-section>.main-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.25rem + 1.7vw, 2.4rem);
  color: var(--navy);
  margin: 0 0 .5rem;
  text-align: center;
}

.container-one>h1+span,
.main-heading>span {
  display: block;
  width: 64px;
  height: 3px;
  background: var(--teal);
  border-radius: 2px;
  margin: 0 auto 2rem;
}

/* the three pricing panels; they were stacked in a narrow left column */
.container-one .image-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, .8rem + 1vw, 1.75rem);
  align-items: start;
}

.container-one .image-container img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* the four quick-action tiles */
.container-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1rem, .8rem + 1vw, 1.75rem);
}

.container-two .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.2rem;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.container-two .item:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.container-two .item .icon {
  object-fit: contain;
}

.container-two .item .description {
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}

.container-two .item .btn {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--teal-ink);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: .55rem 1.1rem;
  border-radius: var(--radius);
  cursor: pointer;
}

.container-two .item .btn:hover {
  border-color: var(--teal-ink);
  background: var(--bg-alt);
}

/* the three tip blocks - image and prose side by side, alternating */
.main-section .content,
.main-section .content2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 1.2rem + 2vw, 3rem);
  align-items: center;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.main-section .content2 .image-content2 {
  order: 2;
}

.main-section .image-content img,
.main-section .image-content2 img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  display: block;
}

.main-section h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.1rem + .9vw, 1.7rem);
  color: var(--navy);
  margin: 0 0 .7rem;
}

.main-section p {
  color: var(--slate);
  margin: 0;
}

/* ---------- retail-generic ---------- */
.banner-section {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
  align-items: center;
}

.banner-l img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

.banner-heading h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
  line-height: 1.1;
  color: var(--navy);
  margin: 0 0 1.25rem;
}

.banner-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.banner-images img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

/* the three promo panels that had collapsed to 40px-tall strips */
.section2-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1rem, .8rem + 1vw, 1.5rem);
}

.section2-inner-div {
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  border-radius: var(--radius);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  position: relative;
}

.section2-inner-div::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 36, 63, .05) 40%, rgba(12, 36, 63, .78) 100%);
}

.section2-inner-div>* {
  position: relative;
  z-index: 1;
}

.section2-inner-div h5 {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 .8rem;
}

.card-body2 {
  padding: 1rem 0 0;
}

.card-body2 h5 {
  font-size: .98rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 .25rem;
}

.hvr-pop {
  transition: transform .3s var(--ease);
}

.hvr-pop:hover {
  transform: translateY(-3px);
}

/* the two closing promo tiles - the caption sat half off the bottom edge */
.section5 {
  align-items: stretch;
}

/* heading + card row: as plain blocks the content box started 14px above the
   heading's baseline, so the first card's photo sat on top of the title, and
   the three cards each took the full 1200px and stacked. */
.section5:has(> .section5-heading):has(> .section5-content) {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
}

.section5-content:not(:has(> [class*="col-"])) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, .8rem + 1.5vw, 2rem);
  align-items: start;
}

.section5 .content-section {
  position: relative;
  height: 100%;
  min-height: 340px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy) !important;
  display: flex;
  align-items: flex-end;
}

.section5 .content-section>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.section5 .content-section-div {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 1.75rem;
  background: linear-gradient(180deg, rgba(12, 36, 63, 0) 0%, rgba(12, 36, 63, .85) 55%);
}

.section5 .content-section-div h3 {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.45rem;
  margin: 0 0 .9rem;
}

.section5 .content-section-div button {
  background: var(--teal);
  color: var(--navy);
  border: none;
  padding: .65rem 1.4rem;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ---------- retail-furniture ---------- */
.bg3 {
  background: var(--bg-alt);
  padding-block: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
}

.diflex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.imgalig {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  height: auto;
}

.mp30 {
  margin-block: 1.875rem;
}

/* the category / collection grids had ragged rows because each photo kept its
   own aspect ratio; a fixed ratio aligns the captions */
.shd .card {
  border: 1px solid var(--line) !important;
  height: 100%;
  overflow: hidden;
}

.shd .card-img-top {
  margin: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
}

.shd .card .nrmltxt,
.shd .card span {
  display: block;
  padding: .9rem 1.1rem 1.2rem;
  text-align: center;
  font-size: 1rem !important;
  font-weight: 700;
  color: var(--navy);
}

/* ---------- corporate-customer ---------- */
.full-section {
  padding-block: clamp(2rem, 1.5rem + 2.5vw, 3.75rem);
}

/* an empty shell still counts as content if it holds an empty <p> or <span>,
   which left a 268px band of solid colour above the footer. Judge it on
   elements that actually carry something. */
.full-section:not(:has(img, h1, h2, h3, h4, h5, h6, a, button, input, li, table, iframe, form)) {
  display: none;
}

.fixed-content {
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
}

.blockfull {
  width: 100%;
}

.dislex:not(:has(> [class*="col-"])),
.r-dislex:not(:has(> [class*="col-"])) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 1.2rem + 2vw, 3rem);
  align-items: center;
}

.r-dislex>.block50:first-child {
  order: 2;
}

.block50 {
  width: 50%;
  min-width: 0;
  padding-inline: .75rem;
}

@media (max-width: 820px) {
  .block50 {
    width: 100%;
  }
}

.block50.pl {
  padding-left: 0;
}

.block50.pr {
  padding-right: 0;
}

.full-section .center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.full-section .left {
  text-align: left;
}

.full-section .gap {
  height: 1.5rem;
}

.full-section img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.full-section h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.25rem + 1.8vw, 2.4rem) !important;
  line-height: 1.12;
  color: var(--navy);
  margin: 0;
}

/* the news list was a stack of thumbnails with the caption underneath */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1rem, .8rem + 1vw, 1.75rem);
}

.cards .card {
  height: 100%;
  padding: 0;
  overflow: hidden;
}

.cards .card img {
  width: 100% !important;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.cards .card .nrmltxt {
  display: block;
  padding: 1rem 1.1rem 1.25rem;
  font-size: .95rem !important;
  font-weight: 600;
  color: var(--navy);
}

@media (max-width: 820px) {

  .banner-section,
  .dislex,
  .r-dislex,
  .main-section .content,
  .main-section .content2 {
    grid-template-columns: 1fr;
  }

  .r-dislex>.block50:first-child,
  .main-section .content2 .image-content2 {
    order: 0;
  }
}

/* ---------- sections that lost their dark ground ----------
   Several sections set their copy to .text-white explicitly because the old
   stylesheet gave them a dark photograph or panel. Without it they render
   white-on-white. Restore a navy ground wherever the markup still declares
   white type and nothing else paints the section. */
section:not([style*="background"]):has(.text-white),
.newsletter-section,
.subscribe-section {
  background: linear-gradient(150deg, var(--navy) 0%, #123052 100%);
  color: #fff;
}

section:not([style*="background"]):has(.text-white) :is(h1, h2, h3, h4, p, span, small, li, div):not(:is(.card, .cat-card, .info-card, .product-card) *),
.newsletter-section :is(h1, h2, h3, h4, p, span, small, li):not(:is(.card) *),
.subscribe-section :is(h1, h2, h3, h4, p, span, small, li):not(:is(.card) *) {
  color: #fff;
}

.newsletter-section .newsletter-policy,
.newsletter-section small.text-muted,
.subscribe-section .subscribe-text {
  color: var(--on-band-mut) !important;
}

.newsletter-input,
.subscribe-section input {
  color: var(--ink);
  background: #fff;
}

/* the hero guard listed block elements only, so an <em> inside the headline
   kept the global teal-ink link colour and measured 1.94 on navy */
/* ...but a button is not a link: this was painting a teal label onto a teal
   button ground, so the text disappeared. Buttons keep their own colour. */
.hero :is(em, i, b, strong, a, small):not(:is(.btn, [class*="-btn"], [class*="button"])),
.hero-section :is(em, i, b, strong, a, small):not(:is(.btn, [class*="-btn"], [class*="button"])),
.hero-bg :is(em, i, b, strong, a, small):not(:is(.btn, [class*="-btn"], [class*="button"])) {
  color: var(--teal) !important;
  font-style: normal;
}

/* `<a class="custom-btn">` - the global anchor colour outranked the button
   rule, leaving teal-ink on the teal ground at 3.03 */
a.custom-btn,
a.cta-btn,
a.card-btn,
a.learn-more-btn,
a.offer-btn,
a.see-all-services,
a.signup-btn {
  color: var(--navy) !important;
}

/* ==========================================================================
   BATCH 3 - MARKETING-PAGE VOCABULARY

   A later template generation: named sections plus `*-grid` wrappers that
   carried their columns in the removed stylesheet. With no rules the grids
   became single stacked columns with an empty right half.
   ========================================================================== */

/* ---------- generic grids ---------- */
.cat-grid,
.offerings-grid,
.services-grid,
.stats-grid,
.testi-grid,
.card-grid,
.product-grid,
.overlay-grid,
.about-grid,
.values-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1rem, .8rem + 1.2vw, 1.9rem);
  align-items: stretch;
}

.stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.about-grid:not(:has(> [class*="col-"])),
.values-inner:not(:has(> [class*="col-"])),
.offer-container:not(:has(> [class*="col-"])),
.cta-row:not(:has(> [class*="col-"])),
.testimonial-row:not(:has(> [class*="col-"])) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 1.2rem + 2vw, 3rem);
  align-items: center;
}

/* ---------- generic cards ---------- */
.cat-card,
.offering-card,
.testi-card,
.info-card,
.product-card,
.overlay-card,
.custom-card,
.popular-card,
.program-card,
.feature-box,
.service-box,
.icon-box,
.achievement-box,
.achievements-box,
.offer-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 1rem + .8vw, 1.75rem);
  height: auto;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: flex-start;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.cat-card:hover,
.offering-card:hover,
.info-card:hover,
.product-card:hover,
.custom-card:hover,
.popular-card:hover,
.program-card:hover,
.feature-box:hover,
.service-box:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.cat-card img,
.offering-card img,
.product-card img,
.info-card img,
.program-card img,
.popular-card img,
.custom-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
  margin-bottom: .4rem;
}

/* ---------- section headings ---------- */
.categories-header,
.offerings-header,
.services-header,
.testimonials-header,
.section-heading,
.program-header,
.quality-title,
.cta-title,
.title-main,
.offer-heading,
.feature-title,
.program-title,
.success-title,
.HText {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.45rem, 1.2rem + 1.4vw, 2.15rem);
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 .5rem;
}

.feature-title,
.program-title,
.quality-title {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.05rem;
}

.hero-eyebrow,
.offering-tag,
.offer-tag,
.promo-badge,
.about-badge,
.tag,
.our,
.CD,
.role {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--teal-ink);
  margin-bottom: .5rem;
}

.small-hr,
.title-underline,
.wave-divider {
  display: block;
  width: 64px;
  height: 3px;
  background: var(--teal);
  border-radius: 2px;
  margin: .9rem 0 1.6rem;
  border: 0;
}

.gradient-text,
.highlight,
.highlight-blue,
.accent {
  color: var(--teal-ink);
  font-weight: 700;
}

.sub-text,
.hero-sub,
.feature-desc,
.about-text p,
.quality-text,
.offer-subtext,
.program-text,
.card-content p,
.success-text {
  color: var(--slate);
  font-size: 1rem;
}

/* ---------- heroes ---------- */
.hero,
.hero-section,
.hero-bg {
  background: linear-gradient(150deg, var(--navy) 0%, #123052 100%);
  color: #fff;
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}

.hero>.container,
.hero-section>.container,
.hero-bg>.container,
.hero-section__txt {
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
}

.hero :is(h1, h2, p, span, div):not(:is(.btn, .cta-btn, .card, .card *)),
.hero-section :is(h1, h2, p, span, div):not(:is(.btn, .cta-btn, .card, .card *)) {
  color: #fff;
}

.hero .hero-eyebrow,
.hero-section .hero-eyebrow,
.hero .tag,
.hero-section .tag {
  color: var(--teal);
}

.hero-sub,
.hero-section p {
  color: var(--on-band-mut) !important;
  max-width: 58ch;
}

.hero-ctas,
.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.5rem;
}

/* the scroll cue and the mobile menu belong to the removed nav */
.hero-scroll,
.scroll-line,
.mobile-menu,
.mob-link,
.nav-btn {
  display: none;
}

/* ---------- stats ---------- */
.stats-ribbon {
  background: var(--bg-alt);
  padding-block: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
}

.stats-ribbon>.container,
.stats-section>.container {
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
}

.stat-item {
  text-align: left;
}

.stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem);
  line-height: 1;
  color: var(--teal-ink);
  margin-bottom: .25rem;
}

.stat-label {
  font-size: .92rem;
  color: var(--slate);
}

.stat-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  margin-bottom: .6rem;
}

/* ---------- about / feature / offer split rows ---------- */
.about-section,
.quality-section,
.features-section,
.offer-section,
.success-story-section,
.success-story,
.achievement-section,
.newsletter-section,
.subscribe-section,
.promo,
.promo-wrapper,
.values,
.categories,
.offerings,
.services,
.about,
.card-section,
.product-section,
.overlay-section,
.testimonial-section,
.testimonials-section,
.cta-section,
.cta-wrapper,
.popular-programs,
.popular-services,
.feature-section,
.quality-item,
.program-item {
  padding-block: clamp(2rem, 1.6rem + 2vw, 3.5rem);
}

.about-section>.container,
.quality-section>.container,
.offer-section>.container,
.features-section>.container {
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
}

.about-img,
.about-img-wrap,
.about-visual,
.values-visual,
.values-img-wrap,
.feature-image,
.service-image,
.cta-image,
.offer-image,
.subscribe-img,
.left-img,
.right-img,
.side-img,
.success-img,
.about-image {
  min-width: 0;
}

.about-img img,
.about-img-wrap img,
.about-visual img,
.values-visual img,
.feature-image img,
.service-image img,
.cta-image img,
.offer-image img,
.subscribe-img img,
.left-img img,
.right-img img,
.side-img img,
.success-img img,
.feature-img,
.program-img,
.card-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

.about-img-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.about-img-box {
  min-width: 0;
}

/* ---------- icons ---------- */
.cat-icon,
.quality-icon,
.program-icon,
.achievement-icon,
.icon-circle,
.service-icon,
.stat-icon {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex: none;
  filter: hue-rotate(-15deg) saturate(.92);
}

.icon-circle {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  filter: none;
}

.service-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--navy);
  font-weight: 800;
  font-size: .85rem;
  margin-bottom: .6rem;
}

/* ---------- testimonials ---------- */
.testi-card,
.testimonial-content {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.testi-author,
.testimonial-name {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: 1rem;
  font-weight: 700;
  color: var(--navy);
  font-size: .95rem;
}

.testimonial-img,
.testi-author img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.testimonial-text,
.quote {
  color: var(--slate);
  font-size: 1rem;
  font-style: normal;
}

.quote-left,
.quote-right {
  color: var(--teal);
  font-size: 1.6rem;
  line-height: 1;
}

.testimonial-images {
  display: flex;
  gap: .5rem;
}

.testimonial-nav {
  display: flex;
  gap: .5rem;
  margin-top: 1rem;
}

/* ---------- checklists ---------- */
.value-check,
.offer-list,
.values-list li,
.footer-links {
  list-style: none;
  padding-left: 0;
}

.value-check li,
.offer-list li {
  position: relative;
  padding: .4rem 0 .4rem 1.6rem;
  color: var(--slate);
}

.value-check li::before,
.offer-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
}

/* ---------- buttons ---------- */
.cta-btn,
.card-btn,
.learn-more-btn,
.offer-btn,
.signup-btn,
.newsletter-btn,
.subscribe-btn,
.see-all-services {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .78rem 1.7rem;
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  background: var(--teal);
  color: var(--navy) !important;
  font: inherit;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}

.cta-btn:hover,
.card-btn:hover,
.learn-more-btn:hover,
.offer-btn:hover,
.signup-btn:hover,
.newsletter-btn:hover,
.subscribe-btn:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff !important;
}

.newsletter-input,
.signup-form input {
  padding: .78rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: inherit;
  min-width: 0;
}

.signup-form,
.newsletter-section form {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

.newsletter-policy,
.newsletter-section small {
  font-size: .85rem;
  color: var(--slate-soft);
}

/* ---------- misc leftovers ---------- */
.footer-strip,
.footer-cta {
  display: none;
}

/* duplicated by the site footer */
.reveal,
.reveal-delay-1,
.reveal-delay-2,
.reveal-delay-3 {
  opacity: 1;
  transform: none;
}

.catalog-image-bar {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.catalog-image-bar img {
  flex: 1 1 160px;
  height: auto;
  border-radius: var(--radius);
}

.center-overlay,
.cta-overlay,
.overlay-text {
  position: relative;
  z-index: 1;
}

.bord-left-right {
  border-inline: 1px solid var(--line);
}

.fl-direc-col {
  display: flex;
  flex-direction: column;
}

@media (max-width: 820px) {

  .about-grid,
  .values-inner,
  .offer-container,
  .cta-row,
  .testimonial-row,
  .about-img-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   BATCH 4 - DROPDOWN-REACHABLE PAGES

   Written against the five heaviest pages a user can actually reach from the
   industry finder, but the shared names (banner, rcard, scard, team, block*,
   accordion, box, step-*) recur across the rest of that set.
   ========================================================================== */

/* ---------- leftover legacy navigation (10 files) ----------
   The old page nav was replaced by the site header. Its markup survives on a
   few pages and, with no stylesheet, renders as a bare list running off the
   left edge above the content. */
main .navbar1,
main .main-nav,
main .hamburger2,
main .navbar1 .logo {
  display: none !important;
}

/* ---------- shared banner / hero ---------- */
.banner {
  background: linear-gradient(150deg, var(--navy) 0%, #123052 100%);
  color: #fff;
  padding-block: clamp(2.75rem, 2rem + 4vw, 5rem);
}

/* Some pages use .banner as a plain image holder rather than a dark hero band.
   The navy ground then shows as a solid box behind a transparent PNG. */
.banner:has(> img:only-child) {
  background: none;
  padding-block: 0;
}

.banner>.container,
.hero-inner,
.trust-inner,
.section-content {
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
}

/* .section-content is a section-level measure wrapper. Some pages put it on a
   col-* grid column instead - the 1200px width then beats the column's 50% and
   pushes its sibling column onto its own line, leaving half the row empty. */
.section-content[class*="col-"] {
  width: auto;
  margin-inline: 0;
}

.banner :is(h1, h2, h3, p, span, div):not(:is(.btn, .card, .card *)) {
  color: #fff;
}

.banner p,
.banner .sub-title {
  color: var(--on-band-mut) !important;
  max-width: 58ch;
}

.hero-img,
.left-image img,
.hero-inner img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}

.hero-points {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: .5rem;
}

.hero-points li {
  position: relative;
  padding-left: 1.5rem;
}

.hero-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
}

/* ---------- shared section rhythm ---------- */
.About,
.Our,
.What,
.Say,
.Customer,
.service,
.team,
.testimonials,
.testimonial,
.resource,
.industry,
.touch,
.our-service,
.review,
.progress-section,
.story-section,
.values-section,
.numbers-section,
.join-section,
.featured-section,
.trust-band,
.assist-note {
  padding-block: clamp(2rem, 1.6rem + 2vw, 3.5rem);
}

.mtb80 {
  margin-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.Seprator,
.orange-line {
  display: block;
  width: 64px;
  height: 3px;
  background: var(--teal);
  border-radius: 2px;
  margin: .9rem 0 1.6rem;
  border: 0;
}

.sub-title,
.sub,
.about-description,
.service-text,
.story-text,
.r-content p,
.O-text,
.c-text,
.rtext,
.join-text {
  color: var(--slate);
  font-size: 1rem;
}

.about-heading,
.about-title,
.story-title,
.testimonials-heading,
.review-title,
.step-title,
.pkg-top,
.Our,
.What,
.About {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.18rem + 1.3vw, 2.05rem);
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 .5rem;
}

.step-title,
.doc-spec,
.dept-card h3,
.pkg-card h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.05rem;
}

.blue,
.custom-text-color,
.highlight-box strong {
  color: var(--teal-ink);
}

.grey {
  background: var(--bg-alt);
}

/* ...but on a heading or paragraph that background reads as a stray highlight
   band behind the text. On text .grey means the muted tone, not a panel. */
:is(h1, h2, h3, h4, h5, h6, p, span).grey {
  background: none;
  color: var(--slate);
}

/* `<button class="btn-rm">View more</button>` had no rule at all, so it
   rendered as unstyled default-button text. Secondary/ghost treatment. */
.btn-rm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem 1.6rem;
  border: 1px solid var(--teal-ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--teal-ink);
  font: inherit;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: .4rem;
  transition: background .3s var(--ease), color .3s var(--ease);
}

.btn-rm:hover {
  background: var(--teal-ink);
  color: #fff;
}

.bold {
  font-weight: 700;
}

/* ---------- shared card grids ---------- */
.rcard,
.rcard-c,
.scard,
.bcard,
.s-card,
.t-card,
.O-card,
.card-1,
.box,
.dept-grid,
.doc-grid,
.pkg-grid,
.step-grid,
.dept-card,
.doc-card,
.pkg-card,
.value-box,
.number-box,
.rating-box,
.highlight-box {
  min-width: 0;
}

.dept-grid,
.doc-grid,
.pkg-grid,
.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1rem, .8rem + 1.2vw, 1.8rem);
  align-items: stretch;
}

.rcard,
.rcard-c,
.scard,
.bcard,
.s-card,
.t-card,
.O-card,
.card-1,
.box,
.dept-card,
.doc-card,
.pkg-card,
.value-box,
.rating-box,
.highlight-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.15rem, 1rem + .8vw, 1.7rem);
  height: auto;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  align-items: flex-start;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.rcard:hover,
.scard:hover,
.s-card:hover,
.O-card:hover,
.card-1:hover,
.dept-card:hover,
.doc-card:hover,
.pkg-card:hover,
.value-box:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

/* A row of highlight cards carrying `align-items-center` centres each card on
   the cross axis, so cards with different text lengths sit at different heights
   and the row reads as staggered/overlapping. They should share a baseline. */
.row-icon {
  align-items: stretch;
}

.row-icon>.highlight-box {
  height: auto;
}

.rcard img,
.scard img,
.s-card img,
.t-card img,
.O-card img,
.card-1 img,
.dept-card img,
.doc-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

.dept-icon,
.value-icon,
.arrow-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: none;
  filter: hue-rotate(-15deg) saturate(.92);
}

.doc-avatar,
.doc-card img,
.review-author img,
.profile-info img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  aspect-ratio: 1;
  flex: none;
}

/* ---------- proportional blocks ---------- */
.c-flex,
.r-content,
.right-content,
.story-block,
.cta-content,
.cta-cnt,
.values-section .row,
.story-content {
  min-width: 0;
}

.block33 {
  width: 33.3333%;
}

.block40 {
  width: 40%;
}

.block45 {
  width: 45%;
}

.block60 {
  width: 60%;
}

.block33,
.block40,
.block45,
.block60 {
  min-width: 0;
  padding-inline: .75rem;
}

@media (max-width: 820px) {

  .block33,
  .block40,
  .block45,
  .block60 {
    width: 100%;
  }
}

.c-flex:not(:has(> [class*="col-"])),
.story-block:not(:has(> [class*="col-"])) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 1.2rem + 2vw, 3rem);
  align-items: center;
}

.story-img-left img,
.r-image img,
.story-block img,
.c-flex img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}

/* ---------- numbered story blocks ---------- */
.numbers-section,
.story-number,
.number-box {
  min-width: 0;
}

.story-number,
.number-box strong,
.pkg-price,
.rating-number {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  line-height: 1;
  color: var(--teal-ink);
}

.pkg-badge,
.step-label,
.pub,
.stars,
.dot {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--teal-ink);
}

.stars,
.rating-text {
  letter-spacing: normal;
  text-transform: none;
  color: var(--teal);
}

.trust-band {
  background: var(--bg-alt);
}

.trust-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: center;
}

/* ---------- reviews / testimonials ---------- */
.review-carousel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.review-text {
  color: var(--slate);
}

.review-author,
.profile-info {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1rem;
  font-weight: 700;
  color: var(--navy);
  font-size: .95rem;
}

/* ---------- accordion ---------- */
.accordion {
  border-top: 1px solid var(--line);
}

.accordion>* {
  border-bottom: 1px solid var(--line);
}

.accordion button,
.accordion .accordion-header {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 1.1rem 0;
  font: inherit;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
}

.accordion p,
.accordion .accordion-body {
  color: var(--slate);
  padding-bottom: 1.1rem;
}

/* ---------- forms ---------- */
.Contact-Form,
.form,
.input-item {
  min-width: 0;
}

.custom-input,
.custom-text,
.Contact-Form input,
.Contact-Form textarea {
  width: 100%;
  padding: .78rem .95rem;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

.custom-input:focus,
.custom-text:focus {
  outline: none;
  border-color: var(--teal-ink);
  box-shadow: 0 0 0 3px rgba(17, 92, 122, .16);
}

.submit,
.cta-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.9rem;
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  background: var(--teal);
  color: var(--navy) !important;
  font: inherit;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.cta-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--teal-ink) !important;
  font: inherit;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.submit:hover,
.cta-btn-primary:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff !important;
}

.cta-btn-outline:hover {
  border-color: var(--teal-ink);
  background: var(--bg-alt);
}

.Contact-info,
.touch {
  color: var(--slate);
}

.arrow-wrapper {
  display: flex;
  gap: .6rem;
  align-items: center;
}

.ms {
  margin-inline-start: .5rem;
}

/* every `*-grid` wrapper, not just the ones named earlier: svc-grid, prod-grid
   and friends were left as display:block and stacked full-width */
main [class$="-grid"]:not(:has(> [class*="col-"])),
main [class*="-grid "]:not(:has(> [class*="col-"])) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1rem, .8rem + 1.2vw, 1.8rem);
  align-items: stretch;
}

main [class$="-grid"]>*,
main [class*="-grid "]>* {
  min-width: 0;
}

/* ---------- images never upscale ----------
   A flex column stretches its children across the full cross-axis. On these
   cards that took a 60x60 icon to 531x531 and made the card 3896px tall (one
   page ended up 25,165px long). Images size to their own content unless a rule
   explicitly asks for a full-width photo. */
main .card img:not([class*="card-img"]):not(.w-100),
main [class*="-box"] img,
main [class*="-card"] img:not([class*="card-img"]):not(.w-100) {
  align-self: flex-start;
}

main img.img-fluid,
main img.img-responsive {
  width: auto;
  max-width: 100%;
  height: auto;
}

main [class*="-card"] img[class*="card-img"],
main .card img.card-img-top {
  width: 100%;
}

/* ---------- card height ----------
   `height: 100%` equalises cards that each own a grid cell. Where several
   stack inside one column it is wrong: six .feature-box items each claimed
   100% of a 1118px column, so each rendered 1070px tall and the stack
   overflowed the page to 25,000px. Only equalise a card that is alone in its
   cell. */
.cat-card:only-child,
.offering-card:only-child,
.testi-card:only-child,
.info-card:only-child,
.product-card:only-child,
.overlay-card:only-child,
.custom-card:only-child,
.popular-card:only-child,
.program-card:only-child,
.service-box:only-child,
.icon-box:only-child,
.achievement-box:only-child,
.offer-box:only-child,
.rcard:only-child,
.scard:only-child,
.bcard:only-child,
.s-card:only-child,
.t-card:only-child,
.O-card:only-child,
.card-1:only-child,
.dept-card:only-child,
.doc-card:only-child,
.pkg-card:only-child,
.value-box:only-child,
.rating-box:only-child {
  height: 100%;
}

[class$="-grid"]>* {
  height: 100%;
}

/* an icon beside its label reads as a row, not a stack - the markup puts a
   margin-start on the text, which only makes sense horizontally */
.feature-box,
.feature-item,
.quality-item,
.achievement-box,
.stat-item.d-flex {
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

.feature-box>span,
.feature-item>span,
.quality-item>span {
  margin-left: 0 !important;
}

.feature-box h5,
.feature-item h5 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--navy);
}

/* ---------- images inside cards never dictate the card's size ----------
   Three separate failures, one cause: an image with no width constraint takes
   the container's width whatever its natural size. An 86x86 icon rendered at
   1083px, a 227x174 at 1384px, and a 3916x5874 portrait at 1440x2160 - which
   made single cards 1225px, 1244px and 2223px tall and pushed whole pages past
   16,000px. Images size to their own content, never stretch on the cross axis,
   and are capped so one photo cannot define a card's height.
   Explicit cover-photo rules earlier in this file are more specific and win.

   The `-item` substring also matches Bootstrap's `align-items-*` utilities,
   which appear 728 times across the site and mean "centre these children
   vertically", not "this is a card item". That accidental match pinned hero
   photos to 300px inside much taller columns, so the alignment utilities are
   now excluded explicitly. */
main [class*="card"] img:not([class*="card-img"]):not(.w-100),
main [class*="box"] img:not(.w-100),
main [class*="-item"]:not([class*="align-items"]):not([class*="justify-items"]) img:not(.w-100) {
  align-self: flex-start;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
}

/* A photo that leads a card fills the card's width inside a fixed frame. An
   ICON that leads a card must not - this rule was matching `.service-icon` and
   `icon2.png` (both first children) and blowing a 40x40 mark up to 531x260.
   An AVATAR must not either: testimonial portraits are 40-61px source files,
   and this rule stretched them to 257px with object-fit:cover, which is what
   made them look blurred. */
main [class*="card"]>img:first-child:not([class*="card-img"]):not([class*="icon"]):not([src*="icon"]):not([src*="Icon"]):not(.rounded-circle) {
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: cover;
  border-radius: var(--radius);
}

/* avatars keep their own scale - never upscale a 60px portrait */
main img.rounded-circle {
  width: auto;
  height: auto;
  max-width: 72px;
  max-height: 72px;
  object-fit: contain;
  border-radius: 50%;
  align-self: flex-start;
}

/* icons keep their own scale wherever they sit */
main img[class*="icon"],
main img[src*="icon"],
main img[src*="Icon"] {
  width: auto;
  height: auto;
  max-width: 56px;
  max-height: 56px;
  object-fit: contain;
  align-self: flex-start;
  border-radius: 0;
}

/* ---------- block-percentage columns need a flex parent ----------
   .block33 / .block40 / .block45 / .block50 / .block60 set a percentage width,
   but their container is display:block, so they stacked at a third of the width
   with two thirds empty beside them - three 1015px blocks instead of one row. */
.block100:has(> [class*="block33"]),
.block100:has(> [class*="block40"]),
.block100:has(> [class*="block45"]),
.block100:has(> [class*="block50"]),
.block100:has(> [class*="block60"]),
.blockfull:has(> [class*="block33"]),
.fixed-content:has(> [class*="block33"]) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

/* The wrapper's class name varies per template - .block100 on one page,
   .testimonial on the next - so key off the structure instead: anything
   holding a pair of block-percentage children is a row, whatever it's called.
   Requiring the pair keeps single-child wrappers out of it.
   Grid, not flex: 40% + 60% + a gap overflows 100% and wraps, but a track
   divides exactly. The children's own percentage widths are dropped so they
   fill their track rather than taking 40% of it. */
:is(:has(> [class*="block40"] + [class*="block60"]),
  :has(> [class*="block60"] + [class*="block40"]),
  :has(> [class*="block33"] + [class*="block60"]),
  :has(> [class*="block45"] + [class*="block45"])) {
  display: grid;
  align-items: start;
  gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
}

:has(> [class*="block40"] + [class*="block60"]) {
  grid-template-columns: 2fr 3fr;
}

:has(> [class*="block60"] + [class*="block40"]) {
  grid-template-columns: 3fr 2fr;
}

:has(> [class*="block33"] + [class*="block60"]) {
  grid-template-columns: 1fr 2fr;
}

:has(> [class*="block45"] + [class*="block45"]) {
  grid-template-columns: 1fr 1fr;
}

:is(:has(> [class*="block40"] + [class*="block60"]),
  :has(> [class*="block60"] + [class*="block40"]),
  :has(> [class*="block33"] + [class*="block60"]),
  :has(> [class*="block45"] + [class*="block45"]))>[class*="block"] {
  width: auto;
  padding-inline: 0;
}

@media (max-width: 720px) {

  :is(:has(> [class*="block40"] + [class*="block60"]),
    :has(> [class*="block60"] + [class*="block40"]),
    :has(> [class*="block33"] + [class*="block60"]),
    :has(> [class*="block45"] + [class*="block45"])) {
    grid-template-columns: 1fr;
  }
}

.block33,
.block40,
.block45,
.block50,
.block60 {
  min-width: 0;
}

/* card header images were excluded from the cap above so they could span the
   card's width - but they still must not set its height (899px tall headers) */
main img[class*="card-img"] {
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   BATCH 6 - remaining reachable pages
   utilities-water, solar-customer, dentist-customer, retail-banking-agent,
   health-insurance-marketing, government-economic-development
   ========================================================================== */

/* ---------- card rows that stacked ---------- */
.section__cardsmain,
.need-cards__row1,
.cards-container,
.testimonal-cards,
.contact-icons-main,
.main__imgs,
.architecture-card-container2,
.testimonial-container,
.usecases-section .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1rem, .8rem + 1.2vw, 1.8rem);
  align-items: stretch;
}

.contact-icons-main,
.social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
}

/* ---------- two-column splits ---------- */
.contact-main:not(:has(> [class*="col-"])),
.about-main:not(:has(> [class*="col-"])),
.how-works:not(:has(> [class*="col-"])),
.getready-main:not(:has(> [class*="col-"])),
.aboutmain:not(:has(> [class*="col-"])),
.image-section:not(:has(> [class*="col-"])) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 1.2rem + 2vw, 3rem);
  align-items: center;
}

.about-left,
.about-right,
.how-works-left,
.how-works-right,
.contact-right,
.bl,
.br {
  min-width: 0;
}

/* ---------- section shells ---------- */
.contactus-section,
.usecases-section,
.about-us,
.why-choose,
.how-works,
.getready-section,
.getintouch-section,
.testimonal-cards,
.wave-bg {
  padding-block: clamp(2rem, 1.6rem + 2vw, 3.5rem);
}

.wave-bg,
.getready-section {
  background: var(--bg-alt);
}

/* ---------- headings ---------- */
.second-heading,
.hero-heading,
.getintouch-heading,
.contact-title,
.usecases__card-title,
.about-card__title,
.works-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.18rem + 1.3vw, 2.05rem);
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 .5rem;
}

.usecases__card-title,
.about-card__title,
.feature-text strong {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.05rem;
}

.contact-subtext,
.usecases__card-text,
.about-card__text,
.feature-text,
.contact-details,
.contact-info,
.author-details {
  color: var(--slate);
  font-size: 1rem;
}

/* ---------- cards ---------- */
.usecases-card1,
.usecases-card2,
.usecases-card3,
.usecases-card4,
.about-card,
.architecture-card2,
.x-card,
.feature,
.cart-testimonal,
.prof {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.15rem, 1rem + .8vw, 1.7rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.usecases-card1:hover,
.usecases-card2:hover,
.usecases-card3:hover,
.usecases-card4:hover,
.about-card:hover,
.architecture-card2:hover,
.x-card:hover,
.feature:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.usecases__card-body,
.architecture-card-content2,
.about-card__overlay {
  width: 100%;
}

.about-card__overlay {
  position: relative;
}

/* ---------- icons & numerals ---------- */
/* `.contact-icon` is the WRAPPER (an icon plus its line of text), not the
   image. Sizing the wrapper to 44x44 clipped the address and pushed it through
   the social icons. Size the image; lay the wrapper out as a row. */
img.contact-icon,
.feature-icon,
.icon6,
.quality-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: none;
  filter: hue-rotate(-15deg) saturate(.92);
}

div.contact-icon {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  width: 100%;
  min-width: 0;
}

div.contact-icon>img {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: .2rem;
  object-fit: contain;
  filter: hue-rotate(-15deg) saturate(.92);
}

div.contact-icon>p {
  margin: 0;
  min-width: 0;
  font-size: .95rem;
  color: var(--slate);
  line-height: 1.55;
}

.number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--navy);
  font-weight: 800;
  font-size: .95rem;
  flex: none;
}

/* ---------- accordion (Bootstrap markup, no Bootstrap) ---------- */
.accordion-item {
  border-bottom: 1px solid var(--line);
}

.accordion-button {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 1.05rem 0;
  font: inherit;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.accordion-button::after {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background: var(--teal-ink);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") center/contain no-repeat;
  transition: transform .25s var(--ease);
}

.accordion-button[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* Bootstrap's markup is here but Bootstrap's JS is not; smartcogs.js provides
   the collapse behaviour instead. A collapsed panel is hidden ONLY when that
   script is running, which is what the .js class on <html> signals. With
   JavaScript off, every panel stays open, so no answer is lost to a reader or
   to a crawler. */
.accordion-collapse {
  display: block;
  overflow: hidden;
}

.js .accordion-collapse:not(.show) {
  display: none;
}

.accordion-collapse.show,
.accordion-collapse {
  padding-bottom: 1rem;
  color: var(--slate);
}

/* ---------- buttons ---------- */
.contact-btn,
.form-btn,
.hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.9rem;
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  background: var(--teal);
  color: var(--navy) !important;
  font: inherit;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.contact-btn:hover,
.form-btn:hover,
.hero-button:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff !important;
}

/* ---------- misc ---------- */
.author,
.author-details {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.author img,
.prof img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}

.main-img,
.image_1 {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

@media (max-width: 820px) {

  .contact-main,
  .about-main,
  .how-works,
  .getready-main,
  .aboutmain,
  .contact-content,
  .image-section {
    grid-template-columns: 1fr;
  }
}

/* `.x-card` is sometimes the wrapper AROUND a set of cards, not a card itself.
   Treated as a card it became a flex column and stacked its three children. */
.x-card:has(> .card1),
.x-card:has(> .card2),
.x-card:has(> .card) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1rem, .8rem + 1.2vw, 1.8rem);
  background: none;
  border: 0;
  padding: 0;
  align-items: stretch;
}

.x-card>.card1,
.x-card>.card2 {
  height: 100%;
}

/* ==========================================================================
   BATCH 7 - reachable pages, group 1 of 3
   manufacturing-field-service, mental-wellness, health-insurance-customer,
   hospital-nurse, retail-banking-marketing, dentist-admin,
   manufacturing-customer, life-insurance-customer
   ========================================================================== */

/* ---------- Bootstrap utilities the pages assume ---------- */
.me-4 {
  margin-right: 1.5rem;
}

.ms-4 {
  margin-left: 1.5rem;
}

.ms-auto {
  margin-left: auto;
}

.me-auto {
  margin-right: auto;
}

.pe-0 {
  padding-right: 0;
}

.ps-0 {
  padding-left: 0;
}

.overflow-hidden {
  overflow: hidden;
}

.fw-light {
  font-weight: 300;
}

.semi-bold {
  font-weight: 600;
}

.flex-row {
  flex-direction: row;
}

@media (min-width: 768px) {
  .flex-md-row {
    flex-direction: row;
  }
}

.start {
  text-align: left;
}

.end {
  text-align: right;
}

.mt {
  margin-top: 1rem;
}

.mt50 {
  margin-top: 3.125rem;
}

.mmt-62 {
  margin-top: 3.875rem;
}

.mh {
  min-height: 0;
}

.mmh {
  min-height: 0;
}

.spacer {
  display: block;
  height: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.divider {
  display: block;
  width: 64px;
  height: 3px;
  background: var(--teal);
  border-radius: 2px;
  margin: .9rem 0 1.6rem;
  border: 0;
}

/* ---------- named section shells ---------- */
.Work,
.Reports,
.Process,
.Meet,
.Blog,
.News,
.Call,
.part,
.about-bot-section,
.stat-section,
.use-cases,
.testimonial-layout,
.section2,
.section3,
.section4,
.clinic-overview-section,
.appointment-section,
.completeContainer,
.contact,
.footer-bg {
  padding-block: clamp(2rem, 1.6rem + 2vw, 3.5rem);
}

.bgcolor,
.aboutBg,
.wave-background,
.footer-bg {
  background: var(--bg-alt);
}

/* ---------- two-column splits ---------- */
.section2-content,
.section3,
.section4,
.completeContainer,
.testimonial-layout,
.clinic-overview-section>.container>.row,
.main {
  min-width: 0;
}

/* auto-fit so a wrapper with a single child spans the full width instead of
   sitting in the left column with an empty right half */
.section2-content:not(:has(> [class*="col-"])),
.completeContainer:not(:has(> [class*="col-"])) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(1.5rem, 1.2rem + 2vw, 3rem);
  align-items: center;
}

.section2-l,
.section2-r,
.section3-l,
.section3-r,
.section4-l,
.section4-r,
.leftContainer,
.rightContainer,
.clinic-image,
.clinic-text,
.image-column,
.hero-content1 {
  min-width: 0;
}

.section3:not(:has(> [class*="col-"])),
.section4:not(:has(> [class*="col-"])) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 1.2rem + 2vw, 3rem);
  align-items: center;
}

/* ...but some pages use .section3 as a heading + card-grid section rather than
   a text/image split. Two columns then parked the heading in the left half and
   stacked every card down the right. Heading on top, cards in a grid. */
.section3:has(> .section-heading):has(> .section3-content) {
  grid-template-columns: 1fr;
}

.section3-content:not(:has(> [class*="col-"])) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(1rem, .8rem + 1.5vw, 2rem);
  align-items: start;
  text-align: center;
}

.section3-content .section3-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}

/* fixed height, not max-height: the icons have different aspect ratios, so a
   cap alone left each label sitting at a slightly different baseline */
.section3-content .section3-card img {
  height: 48px !important;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.section4 {
  direction: ltr;
}

.section4-l {
  order: 2;
}

.leftContainer,
.rightContainer {
  flex: 1 1 320px;
}

.completeContainer>* {
  min-width: 0;
}

/* ---------- cards ---------- */
.stat-card,
.support-card,
.unit-card,
.unit2-card,
.unit-box,
.plan-card,
.fourth-card,
.custom-fourth-card,
.card-wrapper,
.testimonial-box,
.ratingContainer,
.algcont {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.15rem, 1rem + .8vw, 1.7rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.stat-card:hover,
.support-card:hover,
.unit-card:hover,
.unit2-card:hover,
.plan-card:hover,
.fourth-card:hover,
.card-wrapper:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.testimonial-wrap,
.card-wrapper,
.testimonial-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1rem, .8rem + 1.2vw, 1.8rem);
  align-items: stretch;
}

.card-wrapper {
  background: none;
  border: 0;
  padding: 0;
}

.unit2-header {
  font-weight: 800;
  color: var(--navy);
  font-size: 1.05rem;
}

.card-text-content {
  color: var(--slate);
}

/* ---------- icons, badges, stars ---------- */
.card-icon,
.card-icon-1,
.person-icon,
.unit2-icon,
.check-icon,
.right-icon,
.quote-img,
.emergency-icon,
.centerArrow {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: none;
  filter: hue-rotate(-15deg) saturate(.92);
}

.icon-star,
.star {
  color: var(--teal);
  letter-spacing: .1em;
}

.new-badge {
  display: inline-block;
  padding: .2em .6em;
  border-radius: 2px;
  background: var(--teal);
  color: var(--navy);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.blue-text,
.grey-text {
  color: var(--teal-ink);
  font-weight: 700;
}

.grey-text {
  color: var(--slate);
  font-weight: 500;
}

.testimonial-heading,
.see-all {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.18rem + 1.3vw, 2.05rem);
  color: var(--navy);
  margin: 0 0 .5rem;
}

.see-all {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--teal-ink);
}

/* ---------- progress bars ---------- */
.review-progress {
  display: grid;
  gap: .6rem;
}

.progress-bar-custom {
  height: 8px;
  border-radius: 4px;
  background: var(--surface-2);
  overflow: hidden;
}

.progress-bar-custom>* {
  display: block;
  height: 100%;
  background: var(--teal);
}

/* ---------- carousel arrows (no JS behind them any more) ----------
   `.navigation` was in this list, but no page uses it as an arrow - all 8
   occurrences wrap a whole hero. Sized as a 40x40 circle it crushed the hero
   to 0px wide, so the headline broke to one word per line and spilled out of
   its band. Removed from the arrow group. */
.arrow-btn,
.arrow-left,
.arrow-right {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--teal-ink);
  cursor: pointer;
}

/* ---------- dentist-admin hero bits ---------- */
.emergency-info {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
}

.emergency-text,
.emergency-number {
  font-weight: 700;
}

.centered-image,
.clinic-image img,
.image-column img,
.main-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}

.appointment-section {
  padding-block: 1.5rem;
}

/* ---------- buttons ---------- */
.common-btn,
.button-send,
.arrow-btn.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.9rem;
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  background: var(--teal);
  color: var(--navy) !important;
  font: inherit;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.common-btn:hover,
.button-send:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff !important;
}

/* ---------- text bits ---------- */
.text1,
.text2,
.works-text,
.clinic-text p,
.Meet1 {
  color: var(--slate);
  font-size: 1rem;
}

.one {
  font-weight: 700;
  color: var(--navy);
}

.card-img-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem;
  color: #fff;
  background: linear-gradient(180deg, rgba(12, 36, 63, 0) 40%, rgba(12, 36, 63, .8) 100%);
}

.card-img-overlay * {
  color: #fff;
}

@media (max-width: 820px) {

  .section2-content,
  .section3,
  .section4,
  .completeContainer {
    grid-template-columns: 1fr;
  }

  .section4-l {
    order: 0;
  }
}

/* ==========================================================================
   BATCH 8 - reachable pages, group 2 of 3
   oil-and-gas-employee, life-insurance-agent, pharma-dealer,
   general-insurance-customer, nbfc-agent, dentist-surgeon,
   health-insurance-agent, financial-services-investment
   ========================================================================== */

.pe-4 {
  padding-right: 1.5rem;
}

.ps-5 {
  padding-left: 3rem;
}

.pd {
  padding: 1.25rem;
}

.hide {
  display: none;
}

.br-remove br {
  display: none;
}

.section-padding {
  padding-block: clamp(2rem, 1.6rem + 2vw, 3.5rem);
}

@media (min-width: 768px) {
  .flex-md-row-reverse {
    flex-direction: row-reverse;
  }
}

/* ---------- section shells ---------- */
.Programs,
.service-section,
.client,
.shop,
.accord {
  padding-block: clamp(2rem, 1.6rem + 2vw, 3.5rem);
}

/* ---------- card + tile groups ---------- */
.main-box,
.box1,
.box2,
.box3,
.txt-box,
.emailbox,
.solution-box,
.insurance-card,
.items1,
.items2,
.tickContent {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.15rem, 1rem + .8vw, 1.7rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.main-box:hover,
.box1:hover,
.box2:hover,
.box3:hover,
.solution-box:hover,
.insurance-card:hover,
.items1:hover,
.items2:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

/* A .main-box holding col-* children is a row, not a card. Styled as a flex
   column its two col-md-6 children stacked at 50% width, leaving the right
   half of the box empty. */
.main-box:has(> [class*="col-"]) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1rem;
}

.main-box:has(> [class*="col-"])>[class*="col-"] {
  flex: 1 1 260px;
  max-width: none;
  width: auto;
}

.insurance-card__body,
.content-container,
.l-content,
.txt-box {
  min-width: 0;
  width: 100%;
}

.insurance-card__icon,
.icon-container img,
.Arrowicon,
.product-image,
.product-image1,
.right-image img,
.img5,
.img51 {
  object-fit: contain;
  filter: hue-rotate(-15deg) saturate(.92);
}

.insurance-card__icon,
.Arrowicon {
  width: 44px;
  height: 44px;
  flex: none;
}

.product-image,
.product-image1,
.right-image img,
.img5,
.img51 {
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: cover;
  border-radius: var(--radius);
  filter: none;
  display: block;
}

.icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface-2);
  flex: none;
}

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

/* ---------- headings & copy ---------- */
.service-heading,
.product-card-title,
.Programs>h2,
.insurance-card h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--navy);
  margin: 0 0 .3rem;
}

.service-desc,
.insurance-card__text,
.nrmltxt14,
.testimonial-quote {
  color: var(--slate);
  font-size: .98rem;
}

.nrmltxt14 {
  font-size: .92rem;
}

.testimonial-quote {
  font-style: normal;
}

.testimonial-role {
  font-size: .85rem;
  color: var(--slate-soft);
  font-weight: 600;
}

/* ---------- proportional column ---------- */
.block35 {
  width: 35%;
  min-width: 0;
  padding-inline: .75rem;
}

@media (max-width: 820px) {
  .block35 {
    width: 100%;
  }
}

.block100:has(> [class*="block35"]) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

/* ---------- forms & buttons ---------- */
.form-group {
  margin-bottom: 1rem;
}

.form-group input,
.form-group textarea,
.form-group select,
.emailbox input {
  width: 100%;
  padding: .78rem .95rem;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

.form-group input:focus,
.form-group textarea:focus,
.emailbox input:focus {
  outline: none;
  border-color: var(--teal-ink);
  box-shadow: 0 0 0 3px rgba(17, 92, 122, .16);
}

.button-apply,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.9rem;
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  background: var(--teal);
  color: var(--navy) !important;
  font: inherit;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.button-apply:hover,
.button:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff !important;
}

/* ---------- carousel remnant: the slides must all stay visible ---------- */
.swip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1rem, .8rem + 1.2vw, 1.8rem);
}

/* ==========================================================================
   BATCH 9 - reachable pages, group 3 of 3
   hospital-patient, accounting-customer, credit-card-agent, corporate-agent,
   utilities-rural, home-insurance, credit-card-marketing, retail-banking-customer
   ========================================================================== */

/* ---------- feature / step blocks ---------- */
.feature-items,
.feature-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1rem, .8rem + 1.2vw, 1.8rem);
  align-items: stretch;
}

.feature-header,
.sub-customer {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.18rem + 1.3vw, 2.05rem);
  color: var(--navy);
  margin: 0 0 .5rem;
}

.feature-point2,
.hover-card,
.active-card,
.card-box,
.boxShade,
.timeline-item,
.offer-content {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.15rem, 1rem + .8vw, 1.7rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.feature-point2:hover,
.hover-card:hover,
.active-card:hover,
.card-box:hover,
.boxShade:hover,
.timeline-item:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.active-card {
  border-color: var(--teal);
  box-shadow: var(--shadow-md);
}

.boxShade {
  box-shadow: var(--shadow-sm);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--navy);
  font-weight: 800;
  font-size: .95rem;
  flex: none;
  margin-bottom: .4rem;
}

.step-description,
.offer-text {
  color: var(--slate);
  font-size: .98rem;
}

.blue-fnt {
  color: var(--teal-ink);
  font-weight: 700;
}

/* ---------- images ---------- */
.image-container2,
.image-feature {
  min-width: 0;
}

.image-container2 img,
.image-feature img,
.img {
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

.icon-up {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: none;
  filter: hue-rotate(-15deg) saturate(.92);
}

/* ---------- proportional column ---------- */
.block70 {
  width: 70%;
  min-width: 0;
  padding-inline: .75rem;
}

@media (max-width: 820px) {
  .block70 {
    width: 100%;
  }
}

.block100:has(> [class*="block70"]) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

/* ---------- forms ---------- */
.contact-form,
.form3,
.l-form {
  min-width: 0;
}

.l-inp,
.form3 input,
.form3 textarea,
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: .78rem .95rem;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

.l-inp:focus,
.form3 input:focus,
.contact-form input:focus {
  outline: none;
  border-color: var(--teal-ink);
  box-shadow: 0 0 0 3px rgba(17, 92, 122, .16);
}

/* ---------- cards that sit on a dark band ----------
   Some cards carry .text-white / .text-light because they were designed on a
   navy panel. Painting them white made the labels invisible. Give those a
   translucent surface instead so the white type still reads. */
main [class*="card"]:has(.text-white),
main [class*="card"]:has(.text-light),
main [class*="box"]:has(.text-white) {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .20);
}

main [class*="card"]:has(.text-white) :is(h1, h2, h3, h4, h5, h6),
main [class*="box"]:has(.text-white) :is(h1, h2, h3, h4, h5, h6) {
  color: #fff;
}

.text-light {
  color: rgba(255, 255, 255, .82) !important;
}

/* Bootstrap's amber accent is not in the palette - use the brand accent */
.text-warning {
  color: var(--teal) !important;
}

/* ---------- tick lists ----------
   `<li><span class="check-icon"><img tick.png></span> LABEL</li>`. The span is
   an inline box, so a width rule on it is ignored and the 52px tick pushed the
   label onto the next line. Lay the row out and draw the tick in the brand
   accent instead of the source art's green. */
li:has(> .check-icon),
li:has(> .tick),
.list-unstyled li:has(img[src*="tick"]) {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .45rem 0;
  color: var(--slate);
}

.check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  background: var(--teal);
  position: relative;
}

.check-icon img {
  display: none;
}

.check-icon::after {
  content: "";
  width: 13px;
  height: 13px;
  background: var(--navy);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12l6 6L20 6'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12l6 6L20 6'/></svg>") center/contain no-repeat;
}

/* Bootstrap semantic colours are not in the palette */
.text-success {
  color: var(--teal-ink) !important;
}

.text-danger {
  color: #A3341F !important;
}

.text-info {
  color: var(--teal-ink) !important;
}

/* FAQ toggles: the arrow is a bitmap whose alt text leaks next to the question */
.accordion-button img,
.faq-question img,
[class*="faq"] button img {
  display: none;
}

/* the star and quote marks are green source art; the audit allows one accent,
   so shift them into the brand teal rather than leaving a second hue */
main img[src*="star"],
main img[src*="quote"],
main img[src*="Star"] {
  filter: hue-rotate(94deg) saturate(1.15);
}

/* ...but the art is not green on every page. The corporate-marketing bullets
   are blue source art (~226deg), so the +94deg shift above pushed them to
   magenta - a second accent. -44deg brings them onto the brand teal instead.
   Scoped by image path so the green-art pages above are untouched. */
main img[src*="solution-corporate-marketing"][src*="star"] {
  filter: hue-rotate(-44deg) saturate(.9);
}

main .quote-left,
main .quote-right,
main .quote {
  color: var(--teal) !important;
}

/* the panel that replaced the banned robot photograph - audit hard rule:
   no androids; on-palette, dark, blue-toned, high contrast */
.assist-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 300px;
  padding: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  border-radius: var(--radius);
  background: linear-gradient(150deg, var(--navy) 0%, #123052 100%);
  position: relative;
  overflow: hidden;
}

.assist-panel::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -28%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(39, 183, 188, .22) 0%, rgba(39, 183, 188, 0) 70%);
}

.assist-panel__eyebrow {
  position: relative;
  z-index: 1;
  font-size: var(--fs-eyebrow);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: .8rem;
}

.assist-panel__line {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem);
  line-height: 1.3;
  color: #fff;
  max-width: 24ch;
}

/* ==========================================================================
   HOSPITAL-NURSE - structure pass
   Nothing was broken here, but every card title sat at ~11px with the icon
   crammed into the corner, a five-card row left an orphan, and two dark bands
   carried slate body copy (`main p` outranks the band's own colour).
   ========================================================================== */

.unit-box,
.support-card,
.icon-box,
.custom-card,
.stat-card,
.unit2-card,
.unit-card,
.testimonial-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 1rem + .9vw, 1.85rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.unit-box:hover,
.support-card:hover,
.icon-box:hover,
.custom-card:hover,
.unit2-card:hover,
.unit-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

/* the icon reads as a mark, not a thumbnail */
.unit2-icon,
.icon-box>img,
.unit-card>img,
.support-card>img,
.custom-card>img,
.stat-card>img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex: none;
  padding: 8px;
  border-radius: 10px;
  background: var(--surface-2);
}

/* titles were rendering around 11px */
.unit2-header,
.unit-card>h5,
.unit-card>h6,
.support-card h5,
.support-card h6,
.icon-box h5,
.icon-box h6,
.custom-card h5,
.custom-card h6 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.05rem !important;
  line-height: 1.3;
  color: var(--navy);
  margin: 0;
}

.unit-box p,
.unit-card p,
.support-card p,
.icon-box p,
.custom-card p,
.unit2-card p {
  font-size: .97rem !important;
  color: var(--slate);
  margin: 0;
}

/* five cards in a three-up grid left an orphan row */
.row:has(> [class*="col-"] > .unit2-card),
.row:has(> [class*="col-"] > .support-card) {
  justify-content: center;
}

.stat-card {
  align-items: flex-start;
  gap: .35rem;
}

.stat-card :first-child {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1;
  color: var(--teal-ink);
}

.testimonial-box {
  gap: .9rem;
}

.quote-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: hue-rotate(-15deg) saturate(.92);
}

.testimonial-box .author {
  font-weight: 700;
  color: var(--navy);
  font-size: .95rem;
}

.testimonial-box p {
  font-size: 1rem;
  color: var(--slate);
}

/* the closing band: `main p` sets --slate directly on the paragraph, which
   outranks the band's inherited white and left the copy near-invisible */
.hero-bg,
.hero-bg .hero-content1 {
  color: #fff;
}

.hero-bg :is(h1, h2, h3, h4, p, span, li, div):not(:is(.btn, .card, .card *)) {
  color: #fff !important;
}

.hero-bg p {
  color: var(--on-band-mut) !important;
  max-width: 56ch;
  margin-inline: auto;
}

.hero-content1 {
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
}

/* a `.row` whose children are bare cards rather than col-* wrappers has nothing
   setting their width, so each took the full 1200px and the set stacked into a
   single tall column. Lay those out as a grid. */
/* `> [class*="-card"]` was too loose - it matched `.testimonal-cards`, which is
   a CONTAINER of cards, and turned the whole row into a grid so the heading,
   the standfirst and the card set sat side by side. Match real cards only. */
.row:not(:has(> [class*="col-"])):has(> .card)>.card,
.row:not(:has(> [class*="col-"])):has(> .card),
.card-section:not(:has(> [class*="col-"])) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, .8rem + 1.2vw, 1.8rem);
  align-items: stretch;
}

/* the step timeline's dashed connector is a 10x553 bitmap sized for the old
   layout; with the steps now ~250px tall it dangled 300px into empty space */
.line>img,
.line1>img {
  display: none;
}

/* the contact block put three icon+address pairs in one 588px flex row, so the
   address wrapped through the social icons underneath */
/* three-across left the address wrapping to five lines inside a 44px-tall
   flex row, so it ran through the social icons below. One item per row. */
.contact-icons-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
  align-items: start;
  height: auto;
}

.contact-icons-main>* {
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .95rem;
  color: var(--slate);
  line-height: 1.55;
}

.contact-icons-main>*>* {
  min-width: 0;
}

.contact-icons-main img,
.contact-icon {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: .18rem;
  object-fit: contain;
  filter: hue-rotate(-15deg) saturate(.92);
}

.social-icons {
  clear: both;
  margin-top: 1.5rem !important;
}

.social-icons img,
.social-icons a {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* ---------- grid columns the compat layer never defined ----------
   `.col-lg-1`, `.col-lg-10/11`, `.col-md-11`, the `col-sm-*` and `col-xl-*`
   ranges and `col-xs-*` were missing, so those elements fell back to the
   `.row > * { width: 100% }` default. A `col-lg-1` arrow spacer rendered
   1224px wide and forced a line break after every card. */
@media (min-width: 576px) {
  .col-sm-1 {
    width: 8.3333%
  }

  .col-sm-2 {
    width: 16.6667%
  }

  .col-sm-5 {
    width: 41.6667%
  }

  .col-sm-7 {
    width: 58.3333%
  }

  .col-sm-8 {
    width: 66.6667%
  }

  .col-sm-9 {
    width: 75%
  }

  .col-sm-10 {
    width: 83.3333%
  }

  .col-sm-11 {
    width: 91.6667%
  }
}

@media (min-width: 768px) {
  .col-md-11 {
    width: 91.6667%
  }
}

@media (min-width: 992px) {
  .col-lg-1 {
    width: 8.3333%
  }

  .col-lg-10 {
    width: 83.3333%
  }

  .col-lg-11 {
    width: 91.6667%
  }
}

@media (min-width: 1200px) {
  .col-xl-1 {
    width: 8.3333%
  }

  .col-xl-2 {
    width: 16.6667%
  }

  .col-xl-3 {
    width: 25%
  }

  .col-xl-4 {
    width: 33.3333%
  }

  .col-xl-5 {
    width: 41.6667%
  }

  .col-xl-6 {
    width: 50%
  }

  .col-xl-7 {
    width: 58.3333%
  }

  .col-xl-8 {
    width: 66.6667%
  }

  .col-xl-9 {
    width: 75%
  }

  .col-xl-10 {
    width: 83.3333%
  }

  .col-xl-11 {
    width: 91.6667%
  }

  .col-xl-12 {
    width: 100%
  }
}

.col-xs-1 {
  width: 8.3333%
}

.col-xs-2 {
  width: 16.6667%
}

.col-xs-3 {
  width: 25%
}

.col-xs-4 {
  width: 33.3333%
}

.col-xs-6 {
  width: 50%
}

.col-xs-12 {
  width: 100%
}

/* `.block100` holding half-width children. Two 50% flex items came to exactly
   the content width and wrapped on a sub-pixel rounding error, so both columns
   stacked. A grid divides the track exactly and cannot round over. */
/* Any legacy wrapper holding half-width children needs to be the grid - the
   hero's `.container1` is display:block, so its two .block50 halves stacked.
   And a .block50 INSIDE such a grid must drop its own 50%, or it takes half of
   an already-halved track (288px instead of 576px). */
.block100:has(> [class*="block50"]),
.container1:has(> [class*="block50"]),
.blockfull:has(> [class*="block50"]),
.fixed-content:has(> [class*="block50"]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1rem, .8rem + 1.5vw, 2.5rem);
  align-items: center;
}

.block100>[class*="block"],
.container1>[class*="block"],
.blockfull>[class*="block"],
.About>[class*="block"],
.Contact-Form>[class*="block"],
.fixed-content>[class*="block"] {
  width: auto;
  padding-inline: 0;
  min-width: 0;
}

/* .team here is an image wrapper, not a card set */
.About>.team {
  display: block;
}

/* bare inputs inside the legacy block layout had no width and rendered 177px */
.full-section form,
.full-section .l-form {
  width: 100%;
}

.full-section input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.full-section textarea,
.full-section select,
.blockfull input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.blockfull textarea {
  width: 100%;
  max-width: 100%;
  padding: .78rem .95rem;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

.full-section input:focus,
.full-section textarea:focus {
  outline: none;
  border-color: var(--teal-ink);
  box-shadow: 0 0 0 3px rgba(17, 92, 122, .16);
}

.full-section label {
  display: block;
  font-weight: 600;
  color: var(--slate);
  margin-bottom: .3rem;
}

.full-section input[type="submit"],
.full-section button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.9rem;
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  background: var(--teal);
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
}

/* `.contact-content` is an icon beside its line of text, not a two-column
   split. As a 1fr/1fr grid the 30px icon sat in a 294px track with the text
   starting 300px away. */
.contact-content {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin-bottom: .9rem;
}

.contact-content>img {
  width: 26px;
  height: 26px;
  flex: none;
  margin-top: .2rem;
  object-fit: contain;
  filter: hue-rotate(-15deg) saturate(.92);
}

.contact-content>p {
  margin: 0;
  min-width: 0;
  color: var(--slate);
  line-height: 1.6;
}

/* ---------- sections with no .container wrapper ----------
   Some legacy sections put their content straight into the section, so it ran
   the full 1440px bleed with a 28px gutter. Constrain the direct children to
   the same measure every other section uses. */
/* These sections hold their cards directly, with no .container and no grid, so
   each card took the full 1440px bleed and the set stacked. Make the section
   itself the measure and the track. */
.service:not(:has(> .container)),
.resource:not(:has(> .container)),
.Testimonials:not(:has(> .container)),
.team:not(:has(> .container)) {
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, .8rem + 1.2vw, 1.9rem);
  align-items: stretch;
}

.service:has(> .container),
.resource:has(> .container),
.Testimonials:has(> .container),
.team:has(> .container) {
  padding-block: clamp(2rem, 1.6rem + 2vw, 3.5rem);
}

.service>h2,
.resource>h2,
.Testimonials>h2,
.team>h2,
.service>.heading,
.resource>.heading,
.Testimonials>.heading {
  grid-column: 1 / -1;
}

.industry>.c-flex,
.mtb80>.c-flex,
.industry>.row,
.mtb80>.row,
.touch>.row,
.touch>.contact-main {
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
}

.c-flex {
  gap: clamp(1.5rem, 1.2rem + 2vw, 3rem);
}

.c-flex>img {
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: cover;
  border-radius: var(--radius);
}

.c-text {
  min-width: 0;
}

/* ---------- headings that sit outside any container ----------
   `.heading` is a bare sibling of the sections, so its h1, rule and standfirst
   ran the full 1440px bleed and the rule sat hard against the left edge. */
.heading {
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
  text-align: center;
  padding-top: clamp(1.75rem, 1.4rem + 1.6vw, 3rem);
}

.heading>h1,
.heading>h2,
.heading>.center,
.heading>.sub-title {
  text-align: center;
  width: 100%;
}

.heading>h1,
.heading>h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.22rem + 1.4vw, 2.2rem);
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 .4rem;
}

.heading>.Seprator {
  margin-inline: auto;
}

.heading>.sub-title {
  color: var(--slate);
  margin: 0;
}

/* card sets that live one level inside a container */
.testimonials,
.Testimonials .testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, .8rem + 1.2vw, 1.9rem);
  align-items: stretch;
}

/* the About block is an image beside its prose */
.About:not(:has(> [class*="col-"])) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.5rem, 1.2rem + 2vw, 3rem);
  align-items: center;
}

.About img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
  border-radius: var(--radius);
}

/* contact details beside the form, not stacked above it */
.Contact-Form:not(:has(> [class*="col-"])) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.5rem, 1.2rem + 2vw, 3rem);
  align-items: start;
}

.Contact-Form>.block45,
.Contact-Form>.block40,
.Contact-Form>.block60 {
  width: auto;
  padding-inline: 0;
}

.Contact-info {
  min-width: 0;
}

/* The contact and social marks are blue-baked bitmaps hosted remotely, which
   puts a second accent on the page. Shift the hue onto the brand teal rather
   than redrawing the art (212 -> 197). Never brightness(0) - it fills the
   tile-style social marks into solid blocks. */
.Contact-info .item img,
.Contact-info .item1 img,
.Contact-info .item2 img {
  filter: hue-rotate(-15deg) saturate(.92);
}

/* social icon strips: each mark is a block-level img in a narrow column, so
   they stacked into a vertical stripe */
.social-icons,
.social,
.Contact-info .social-icons {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: 1.25rem;
}

.social-icons>*,
.social>* {
  flex: none;
}

.social-icons img,
.social img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}

/* ---------- legacy contact list: .item / .item1 / .item2 ----------
   `.item` and `.item1` are an icon beside a line of text; `.item2` is the
   social strip. All three were unstyled blocks, so every icon sat on its own
   line above (or stacked down the side of) its content. */
.Contact-info .item,
.Contact-info .item1,
.contact-details .item,
.contact-details .item1 {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-bottom: .9rem;
  min-width: 0;
}

.Contact-info .item>img,
.Contact-info .item1>img,
.contact-details .item>img,
.contact-details .item1>img {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: .2rem;
  object-fit: contain;
  filter: hue-rotate(-15deg) saturate(.92);
}

.Contact-info .item>p,
.Contact-info .item1>p,
.contact-details .item>p,
.contact-details .item1>p {
  margin: 0;
  min-width: 0;
  color: var(--slate);
  font-size: .98rem;
  line-height: 1.6;
}

/* the social strip runs across, not down */
.item2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  margin-top: 1.4rem;
}

.item2>img,
.item2>a,
.item2>i {
  width: 32px;
  height: 32px;
  flex: none;
  object-fit: contain;
  display: block;
}

/* ===========================================================================
   ACCOUNTING CUSTOMER - contact + FAQ structure pass
   ========================================================================== */

/* The contact form and map are one composed panel. The legacy `.container`
   class on the first column otherwise subtracts another 40px from its width. */
.shadow-box:has(.contact-form.form3) {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  width: min(100% - 2.5rem, 1200px);
  margin: clamp(1.5rem, 1.15rem + 1.4vw, 2.5rem) auto 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.shadow-box:has(.contact-form.form3)>[class*="col-"] {
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.shadow-box .contact-form.form3 {
  height: 100%;
  padding: clamp(1.5rem, 1.15rem + 1.7vw, 2.75rem) !important;
}

/* The section already has a centred heading; the legacy form repeats it. */
.shadow-box .contact-form.form3>h2 {
  display: none;
}

.shadow-box .contact-form.form3>p {
  max-width: 58ch;
  margin: 0 0 1.5rem;
  color: var(--slate);
}

.shadow-box .contact-form.form3 .mb-3 {
  margin-bottom: 1rem;
}

.shadow-box .contact-form.form3 :is(input, textarea) {
  margin-bottom: 0;
}

.shadow-box .contact-form.form3 textarea {
  min-height: 118px;
  resize: vertical;
}

.shadow-box .contact-form.form3 .btn {
  min-height: 48px;
}

.shadow-box:has(.contact-form.form3)>[class*="col-"]:last-child {
  min-height: 100%;
  background: linear-gradient(145deg, var(--navy), #123052);
}

.shadow-box:has(.contact-form.form3)>[class*="col-"]:last-child>img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: none;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
}

/* "Why choose us": replace the loose inline icon rows with a stable grid.
   The icons are inline SVGs, so a missing remote bitmap cannot break it. */
.accounting-choice .container {
  padding-block: clamp(2.25rem, 1.75rem + 2vw, 4rem);
}

.accounting-choice .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1.2rem + 3vw, 4.5rem);
  align-items: center;
  margin-inline: 0;
}

.accounting-choice .row>[class*="col-"] {
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.accounting-choice__image img {
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: contain;
}

.accounting-choice__content>span:first-child {
  display: block;
  margin-bottom: .65rem;
  color: var(--teal-ink);
  font-size: var(--fs-eyebrow) !important;
  font-weight: 700 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.accounting-choice__content h1 {
  max-width: 16ch;
  margin: 0 0 1.15rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.55rem + 2vw, 3.5rem);
  font-weight: 400;
  line-height: 1.08;
  color: var(--navy);
}

.accounting-choice__content h1 strong {
  font-weight: inherit;
}

.accounting-choice__content>p {
  max-width: 58ch;
  margin: 0;
  color: var(--slate);
  line-height: 1.7;
}

.accounting-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin: 1.6rem 0 1.75rem;
  padding: 0;
  list-style: none;
}

.accounting-benefits li {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  padding: .8rem .9rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--navy);
}

.accounting-benefit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--radius);
  background: rgba(39, 183, 188, .14);
  color: var(--teal-ink);
}

.accounting-benefit__icon svg {
  width: 23px;
  height: 23px;
}

.accounting-benefits strong {
  font-size: .95rem;
}

.accounting-choice__cta {
  margin: 0;
}

/* FAQ: restore the missing two-column composition and turn the unstyled
   question/answer blocks into a readable, consistent card stack. */
#Solution:has(.w-box)>.container-fluid {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-inline: 1.25rem;
  background: var(--bg-alt);
}

#Solution:has(.w-box) .section-heading {
  text-align: center;
  margin-bottom: clamp(1.5rem, 1.15rem + 1.4vw, 2.5rem);
}

#Solution:has(.w-box) .row {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1.2rem + 3vw, 4rem);
  align-items: center;
  margin-inline: 0;
}

#Solution:has(.w-box) .row>[class*="col-"] {
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 0;
}

#Solution:has(.w-box) .row>[class*="col-"]>img:not(.img-hide) {
  width: 100%;
  height: auto;
  max-height: none;
  margin-inline: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

#Solution .w-box {
  position: relative;
  margin-bottom: .85rem;
  padding: 1.15rem 1.25rem 1.2rem 1.45rem;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

#Solution .w-box:last-child {
  margin-bottom: 0;
}

#Solution .w-box p {
  margin: 0 0 .55rem;
  color: var(--navy);
  line-height: 1.4;
}

#Solution .w-box strong {
  font-size: 1.02rem;
}

#Solution .w-box>span {
  display: block;
  color: var(--slate);
  line-height: 1.65;
}

#Solution .w-box .img-hide {
  display: none;
}

@media (max-width: 820px) {

  .shadow-box:has(.contact-form.form3),
  #Solution:has(.w-box) .row,
  .accounting-choice .row {
    grid-template-columns: 1fr;
  }

  .accounting-choice__image {
    width: min(100%, 620px) !important;
    margin-inline: auto !important;
  }

  .accounting-choice__content {
    padding-top: .5rem !important;
  }

  .accounting-choice__content h1 {
    max-width: 20ch;
  }

  .shadow-box:has(.contact-form.form3) {
    width: min(100% - 1.5rem, 680px);
  }

  .shadow-box:has(.contact-form.form3)>[class*="col-"]:last-child {
    min-height: 280px;
  }

  #Solution:has(.w-box) .row>[class*="col-"]:first-child {
    max-width: 520px;
    margin-inline: auto;
  }
}

@media (max-width: 520px) {
  .shadow-box .contact-form.form3 {
    padding: 1.25rem !important;
  }

  .accounting-benefits {
    grid-template-columns: 1fr;
  }

  .accounting-choice__cta .btn {
    width: 100%;
  }

  #Solution:has(.w-box)>.container-fluid {
    padding-inline: .75rem;
  }

  #Solution .w-box {
    padding: 1rem 1rem 1.05rem 1.2rem;
  }
}

/* ===========================================================================
   CORPORATE BANKING AGENT - hero, process and testimonials structure pass
   ========================================================================== */

.corporate-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 0;
  padding: clamp(3.5rem, 2.8rem + 2.7vw, 5.5rem) 1.25rem;
  border-radius: 0;
  background:
    radial-gradient(circle at 82% 48%, rgba(39, 183, 188, .22), transparent 28%),
    linear-gradient(145deg, var(--navy) 0%, #123052 100%);
}

.corporate-hero .hero-content {
  position: relative;
  z-index: 2;
  width: min(100%, 1200px);
  max-width: none !important;
  margin-inline: auto;
  padding-right: min(42vw, 500px);
}

.corporate-hero .hero-content h1 {
  max-width: 17ch;
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 2rem + 2.4vw, 4.4rem);
  font-weight: 400;
  line-height: 1.08;
  text-wrap: balance;
}

.corporate-hero .hero-content p {
  max-width: 55ch;
  margin: 0;
  color: var(--on-band-mut) !important;
  font-size: clamp(1rem, .94rem + .35vw, 1.16rem);
  line-height: 1.75;
}

/* Code-native banking dashboard: it fills the empty second half without
   introducing another fragile remote image URL. */
.corporate-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: max(1.25rem, calc((100vw - 1200px) / 2));
  width: clamp(290px, 31vw, 450px);
  aspect-ratio: 1.42;
  transform: translateY(-50%) rotate(-2deg);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(0deg, rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .035));
  box-shadow: 0 28px 60px rgba(0, 0, 0, .22);
}

.corporate-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: max(3.75rem, calc((100vw - 1100px) / 2));
  width: clamp(230px, 25vw, 355px);
  height: clamp(120px, 14vw, 200px);
  transform: translateY(-42%);
  border-bottom: 2px solid rgba(255, 255, 255, .24);
  background:
    linear-gradient(to top, var(--teal) 0 58%, transparent 58%) 4% 100% / 12% 72% no-repeat,
    linear-gradient(to top, rgba(255, 255, 255, .70) 0 58%, transparent 58%) 24% 100% / 12% 48% no-repeat,
    linear-gradient(to top, var(--teal) 0 58%, transparent 58%) 44% 100% / 12% 88% no-repeat,
    linear-gradient(to top, rgba(255, 255, 255, .70) 0 58%, transparent 58%) 64% 100% / 12% 65% no-repeat,
    linear-gradient(to top, var(--teal) 0 58%, transparent 58%) 84% 100% / 12% 100% no-repeat;
  opacity: .9;
}

.corporate-process {
  padding-block: clamp(2.75rem, 2.1rem + 2.3vw, 4.5rem);
}

.corporate-process>.text-center {
  width: min(100% - 2.5rem, 1200px);
  margin: 0 auto clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem) !important;
}

.corporate-process>.text-center h2,
.corporate-testimonials>h2 {
  margin-top: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.65rem + 1.5vw, 3rem);
  color: var(--navy);
}

.corporate-process>.text-center p {
  margin: .55rem 0 0;
  color: var(--slate);
}

.corporate-process__panel {
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
  padding: clamp(1.5rem, 1.15rem + 1.8vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.corporate-process__panel .row {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 1.2rem + 3vw, 4rem);
  align-items: center;
  margin-inline: 0;
}

.corporate-process__panel .row>[class*="col-"] {
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 0;
}

.corporate-process__panel img {
  width: 100%;
  height: auto;
  max-width: 100% !important;
  max-height: 390px;
  object-fit: contain;
}

.corporate-process__steps>.d-flex {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .8rem !important;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.corporate-process__steps>.d-flex:last-child {
  margin-bottom: 0 !important;
}

.corporate-process__steps .step-number {
  margin: 0;
}

.corporate-process__steps .step-title {
  margin-bottom: .25rem;
  color: var(--navy);
}

.corporate-process__steps .step-description {
  line-height: 1.55;
}

.corporate-testimonials {
  padding-block: clamp(2.75rem, 2.1rem + 2.3vw, 4.5rem);
  background: #fff;
}

.corporate-testimonials>.underline {
  margin-bottom: 2.25rem !important;
}

.corporate-testimonials .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, .95rem + 1.4vw, 2rem);
  margin-inline: 0;
}

.corporate-testimonials .row>[class*="col-"] {
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 0;
}

.corporate-testimonials :is(.colm, .colm2, .colmm, .colmm2) {
  display: none;
}

.corporate-testimonials .card {
  position: relative;
  height: 100%;
  min-height: 0;
  padding: clamp(1.35rem, 1.1rem + 1vw, 1.9rem) !important;
  background: #fff;
  border: 1px solid var(--line) !important;
  border-top: 3px solid var(--teal) !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.corporate-testimonials .card::before {
  content: "\201C";
  position: absolute;
  top: .35rem;
  right: 1rem;
  color: rgba(17, 92, 122, .16);
  font-family: Georgia, serif;
  font-size: 4.8rem;
  line-height: 1;
}

.corporate-testimonials .card>.d-flex {
  position: relative;
  z-index: 1;
  gap: 1rem;
}

.corporate-testimonials .rounded-circle {
  width: 66px;
  height: 66px;
  margin-right: 0 !important;
  flex: none;
  object-fit: cover;
  border: 2px solid var(--teal);
}

.corporate-testimonials h5 {
  color: var(--navy);
  font-size: 1.05rem;
}

.corporate-testimonials small {
  display: block;
  margin-top: .2rem;
}

.corporate-testimonials .card>p {
  position: relative;
  z-index: 1;
  margin-top: 1rem;
  color: var(--slate);
  line-height: 1.7;
}

@media (max-width: 820px) {
  .corporate-hero .hero-content {
    padding-right: 0;
  }

  .corporate-hero::before,
  .corporate-hero::after {
    display: none;
  }

  .corporate-hero .hero-content h1 {
    max-width: 17ch;
  }

  .corporate-process__panel .row {
    grid-template-columns: 1fr;
  }

  .corporate-process__panel .row> :first-child {
    width: min(100%, 520px);
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  .corporate-testimonials .row {
    grid-template-columns: 1fr;
  }

  .corporate-process__panel {
    width: min(100% - 1.5rem, 680px);
    padding: 1.1rem;
  }

  .corporate-hero {
    padding-inline: 1.25rem;
  }
}

/* ---------- corporate customer: contained transfer feature ---------- */
.corporate-transfer {
  position: relative;
  isolation: isolate;
  width: min(100% - 2.5rem, 1200px);
  margin: clamp(2.25rem, 1.7rem + 2vw, 3.75rem) auto;
  padding-block: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background-position: center !important;
  box-shadow: var(--shadow-md);
}

.corporate-transfer::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(12, 36, 63, .68) 0%, rgba(12, 36, 63, .36) 48%, rgba(12, 36, 63, .12) 100%);
}

.corporate-transfer>.fixed-content {
  width: 100%;
}

.corporate-transfer>.fixed-content>.blockfull>.specer {
  display: none;
}

.corporate-transfer .block100.p20.dislex {
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
  min-height: 440px;
  gap: clamp(2rem, 1.25rem + 3vw, 4.5rem);
  padding: clamp(2rem, 1.45rem + 2.4vw, 3.75rem);
}

.corporate-transfer .block100.p20.dislex>.block50 {
  width: auto;
  padding-inline: 0;
}

.corporate-transfer h2 {
  max-width: 14ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.7rem + 1.8vw, 3.35rem) !important;
  font-weight: 400;
  line-height: 1.08;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .28);
}

.corporate-transfer .center img {
  width: auto !important;
  max-width: 100%;
  max-height: 390px;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .22));
}

@media (max-width: 820px) {
  .corporate-transfer {
    width: min(100% - 1.5rem, 680px);
    background-position: 35% center !important;
  }

  .corporate-transfer .block100.p20.dislex {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 2rem 1.25rem;
  }

  .corporate-transfer h2 {
    max-width: 18ch;
    text-align: center;
    margin-inline: auto;
  }

  .corporate-transfer .center img {
    max-height: 340px;
  }
}


/* ---------- legacy .bg hero: plan cards ----------
   `.bg *` forces white text, but the shared [class*=card] rule paints the card
   solid white - so the label, and the white icon art drawn for a dark band,
   both disappeared. Translucent surface instead. Icons 3 and 4 also carry .mt,
   which made those two cards taller and their content sit lower, so the row
   stretches and .mt is dropped: all four now match inside and out. */
.bg .row:has(.plan-card) {
  align-items: stretch;
}

.bg [class*="col-"]:has(.plan-card) {
  display: flex;
}

.bg .plan-card {
  flex: 1;
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .22);
}

.bg .plan-card img.mt {
  margin-top: 0;
}

/* ---------- Generate Quote form ----------
   The submit column is taller than the field columns, so `align-items-end`
   dropped the button below the inputs. `.form-group` also carries
   margin-bottom:1rem, which occupies row space but is not part of its measured
   height - the button column needs the same margin or it stretches lower. */
.form-section form.row {
  align-items: stretch;
}

.form-section form.row>.form-group,
.form-section form.row>.col-md-2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.form-section form.row>.col-md-2 {
  margin-bottom: 1rem;
}

.form-section .submit-btn {
  width: 100%;
  min-height: 57px;
}

/* ===========================================================================
   CORPORATE MARKETING - testimonials, subscribe banner and closing prompt

   `.box-content3` is unique to this page, so it is a safe CSS-only hook. The
   adjacent selectors keep these repairs local without adding presentation
   classes to the legacy HTML.
   ========================================================================== */

/* Remove the stacked outer + `.py-5` padding from the three closing bands. */
main>.hero-section:has(.box-content3),
main>.hero-section:has(.box-content3)+.hero-section,
main>.hero-section:has(.box-content3)+.hero-section+.hero-section {
  padding-block: clamp(3rem, 2.35rem + 2.4vw, 4.75rem);
}

main>.hero-section:has(.box-content3)>.container,
main>.hero-section:has(.box-content3)+.hero-section>.container,
main>.hero-section:has(.box-content3)+.hero-section+.hero-section>.container {
  padding-block: 0;
}

/* Use the established short accent rule instead of a full-width divider. */
main>.hero-section:has(.box-content3)>.container>hr,
main>.hero-section:has(.box-content3)+.hero-section>.container>hr {
  width: 64px;
  height: 3px;
  margin: .9rem auto clamp(2rem, 1.65rem + 1vw, 2.6rem);
  border: 0;
  border-radius: 99px;
  background: var(--teal);
}

/* Testimonials: the quote and author now read as one card. */
main>.hero-section:has(.box-content3) {
  background: var(--bg-alt);
  border-block: 1px solid var(--line);
}

main>.hero-section:has(.box-content3) .row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: clamp(2rem, 2.5vw + 1rem, 4.5rem);
  align-items: center;
  margin-inline: 0;
}

main>.hero-section:has(.box-content3) .row>[class*="col-"] {
  width: auto;
  min-width: 0;
  padding-inline: 0;
}

main>.hero-section:has(.box-content3) .row>[class*="col-"]:first-child {
  display: grid;
  gap: 1.1rem;
}

main>.hero-section:has(.box-content3) .box-content3 {
  padding: clamp(1.3rem, 1.05rem + .9vw, 1.8rem);
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

main>.hero-section:has(.box-content3) .box-content3>p {
  max-width: none;
  margin: 0 0 1.15rem !important;
  line-height: 1.7;
}

/* The generic `.box` rule makes this author row a second vertical card. */
main>.hero-section:has(.box-content3) .box-content3>.box {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .9rem;
  padding: 1rem 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

main>.hero-section:has(.box-content3) .box img {
  width: 56px;
  height: 56px;
  flex: none;
  object-fit: cover;
  border: 2px solid rgba(39, 183, 188, .45);
  border-radius: 50%;
}

main>.hero-section:has(.box-content3) .box h5,
main>.hero-section:has(.box-content3) .box p {
  margin: 0 !important;
}

main>.hero-section:has(.box-content3) .box p {
  font-size: .92rem;
}

main>.hero-section:has(.box-content3) .row>[class*="col-"]:last-child>img {
  display: block;
  width: min(100%, 500px);
  max-height: 430px;
  margin-inline: auto;
  object-fit: contain;
}

/* Subscribe: group the heading, message and action into a compact banner. */
main>.hero-section:has(.box-content3)+.hero-section {
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
}

main>.hero-section:has(.box-content3)+.hero-section h2 {
  color: #fff;
}

main>.hero-section:has(.box-content3)+.hero-section p {
  max-width: 58ch;
  margin: 0 auto 1.6rem !important;
  color: var(--on-band-mut) !important;
}

main>.hero-section:has(.box-content3)+.hero-section .hero-button {
  min-width: 160px;
  min-height: 48px;
  padding: .8rem 1.8rem !important;
}

main>.hero-section:has(.box-content3)+.hero-section .hero-button:hover {
  background: #fff;
  border-color: #fff;
  color: var(--navy) !important;
}

/* Closing prompt: balance the heading and its existing links as one row. */
main>.hero-section:has(.box-content3)+.hero-section+.hero-section {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
}

main>.hero-section:has(.box-content3)+.hero-section+.hero-section>.container>.d-flex {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr);
  gap: clamp(2rem, 2.5vw + 1rem, 4.5rem);
  align-items: center;
}

main>.hero-section:has(.box-content3)+.hero-section+.hero-section h2 {
  max-width: 22ch;
  margin: 0;
}

main>.hero-section:has(.box-content3)+.hero-section+.hero-section h2 br {
  display: none;
}

main>.hero-section:has(.box-content3)+.hero-section+.hero-section h2 .accent {
  display: block;
  margin-top: .85rem;
}

main>.hero-section:has(.box-content3)+.hero-section+.hero-section ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .9rem clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

main>.hero-section:has(.box-content3)+.hero-section+.hero-section li {
  margin: 0;
  padding-left: .85rem;
  border-left: 2px solid var(--teal);
  color: var(--navy);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

@media (max-width: 820px) {

  main>.hero-section:has(.box-content3) .row,
  main>.hero-section:has(.box-content3)+.hero-section+.hero-section>.container>.d-flex {
    grid-template-columns: 1fr;
  }

  main>.hero-section:has(.box-content3) .row>[class*="col-"]:last-child>img {
    width: min(100%, 440px);
  }

  main>.hero-section:has(.box-content3)+.hero-section+.hero-section h2 {
    max-width: 26ch;
  }

  main>.hero-section:has(.box-content3)+.hero-section+.hero-section ul {
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {

  main>.hero-section:has(.box-content3),
  main>.hero-section:has(.box-content3)+.hero-section,
  main>.hero-section:has(.box-content3)+.hero-section+.hero-section {
    padding-block: 2.75rem;
  }

  main>.hero-section:has(.box-content3)+.hero-section+.hero-section ul {
    flex-direction: column;
  }

  main>.hero-section:has(.box-content3)+.hero-section .hero-button {
    width: min(100%, 280px);
  }
}

/* ---------- corporate marketing: artwork balance ---------- */

/* The first services band uses block-level images, so text-align alone does
   not centre them. Give all four illustrations the same centred visual slot. */
main>.hero-section:has(img[src$="/img2.png"]) .row {
  align-items: stretch;
  row-gap: clamp(2rem, 1.5rem + 1.6vw, 3rem);
}

main>.hero-section:has(img[src$="/img2.png"]) .row>[class*="col-"] {
  display: flex;
}

main>.hero-section:has(img[src$="/img2.png"]) .box-content {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

main>.hero-section:has(img[src$="/img2.png"]) .box-content>img {
  width: min(100%, 380px);
  height: clamp(220px, 18vw, 265px);
  align-self: center;
  margin: 0 auto 1rem;
  object-fit: contain;
  object-position: center;
}

main>.hero-section:has(img[src$="/img2.png"]) .box-content>p {
  margin-inline: auto;
}

/* Enlarge the three two-column illustrations while keeping their artwork
   inside the container. Category Grid is right-aligned to use its empty edge. */
main>.hero-section:has(img[src$="/img6.png"]) .row>[class*="col-"]:last-child,
main>.hero-section:has(img[src$="/img7.png"]) .row>[class*="col-"]:last-child,
main>.hero-section:has(img[src$="/img9.png"]) .row>[class*="col-"]:last-child {
  display: flex;
  align-items: center;
}

main>.hero-section:has(img[src$="/img6.png"]) .row>[class*="col-"]:last-child {
  justify-content: flex-end;
}

main>.hero-section:has(img[src$="/img7.png"]) .row>[class*="col-"]:last-child,
main>.hero-section:has(img[src$="/img9.png"]) .row>[class*="col-"]:last-child {
  justify-content: center;
}

main>.hero-section:has(img[src$="/img6.png"]) img[src$="/img6.png"] {
  flex: 0 0 auto;
  width: 112%;
  max-width: none;
  margin-left: auto;
  margin-right: 0;
  transform: translateX(clamp(.5rem, 1.2vw, 1.15rem));
}

main>.hero-section:has(img[src$="/img7.png"]) img[src$="/img7.png"] {
  flex: 0 0 auto;
  width: 110%;
  max-width: none;
  margin-inline: auto;
}

main>.hero-section:has(img[src$="/img9.png"]) img[src$="/img9.png"] {
  flex: 0 0 auto;
  width: 110%;
  max-width: none;
  margin-inline: auto;
}

/* Keep the modest desktop oversize inside the viewport near the grid
   breakpoint, where the two-column layout has only a narrow outer gutter. */
@media (min-width: 992px) and (max-width: 1279px) {

  main>.hero-section:has(img[src$="/img6.png"]) img[src$="/img6.png"],
  main>.hero-section:has(img[src$="/img7.png"]) img[src$="/img7.png"],
  main>.hero-section:has(img[src$="/img9.png"]) img[src$="/img9.png"] {
    width: 100%;
    max-width: 100%;
    transform: none;
  }
}

/* The existing accent is the closing action; make its light-blue treatment
   distinct from the surrounding heading without changing the page copy. */
main>.hero-section:has(.box-content3)+.hero-section+.hero-section h2 .accent {
  display: inline-flex;
  width: max-content;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  margin-top: 1.15rem;
  padding: .75rem 1.25rem;
  border: 1px solid #8ed7db;
  border-radius: var(--radius);
  background: #d9f2f4;
  box-shadow: var(--shadow-sm);
  color: var(--navy) !important;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .09em;
  text-transform: uppercase;
}

@media (max-width: 991px) {

  main>.hero-section:has(img[src$="/img6.png"]) .row>[class*="col-"]:last-child,
  main>.hero-section:has(img[src$="/img7.png"]) .row>[class*="col-"]:last-child,
  main>.hero-section:has(img[src$="/img9.png"]) .row>[class*="col-"]:last-child {
    justify-content: center;
    margin-top: 1.5rem;
  }

  main>.hero-section:has(img[src$="/img6.png"]) img[src$="/img6.png"],
  main>.hero-section:has(img[src$="/img7.png"]) img[src$="/img7.png"],
  main>.hero-section:has(img[src$="/img9.png"]) img[src$="/img9.png"] {
    width: min(100%, 500px);
    max-width: 100%;
    margin-inline: auto;
    transform: none;
  }
}

@media (max-width: 520px) {
  main>.hero-section:has(img[src$="/img2.png"]) .box-content>img {
    height: 210px;
  }

  main>.hero-section:has(.box-content3)+.hero-section+.hero-section h2 .accent {
    min-height: 44px;
    padding-inline: 1.1rem;
  }
}

.text-blue {
  color: var(--navy) !important;
}

.bg1 {
  position: relative;
  overflow: hidden;
  padding: 4rem 2rem;
  border-radius: 8px;
  background-color: #f8fbff;
}

.bg1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--teal);
  -webkit-mask-image: url("data:image/png;base64,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");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: 0.15;
  z-index: 0;
}

.bg1>* {
  position: relative;
  z-index: 1;
}

/* Subscribe Banner dark navy section */
.subscribe-banner {
  background-color: var(--navy, #0C233E) !important;
}

.subscribe-banner h2 {
  color: rgba(255, 255, 255, 0.15) !important;
  font-size: 2.5rem;
}

.subscribe-banner hr {
  border-color: var(--teal, #1ac8c8) !important;
  opacity: 1;
  width: 60px;
  margin-inline: auto;
}

.subscribe-banner p {
  color: #ffffff !important;
  font-size: 1.1rem;
}


/* ==========================================================================
   FAQ blocks on the legacy solution pages
   --------------------------------------------------------------------------
   19 pages use .faq-* markup in several shapes, and almost none of the class
   names were defined anywhere, so the questions and answers rendered as an
   undifferentiated wall of text. These give every shape the same treatment as
   the rest of the site: a ruled list, the question in navy, the answer in
   slate, and a teal accent.
   ========================================================================== */
.faq-section,
.faq-container,
.faq-wrapper,
.faq-box {
  max-width: 68rem;
  margin-inline: auto;
}

.faq-title,
.faq-heading,
.faq-content-heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.16;
  color: var(--navy);
  margin-bottom: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
}

.faq-underline {
  width: 64px;
  height: 3px;
  background: var(--teal-ink);
  border: 0;
  margin: 0 0 1.6rem;
}

.faq-item {
  border-top: 1px solid var(--line);
  padding: 1.15rem 0;
}

.faq-item:last-child {
  border-bottom: 1px solid var(--line);
}

.faq-question,
.faq-item > h5 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--navy);
  margin: 0 0 .5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.faq-answer,
.faq-item .faq-answer,
.faq-item > p {
  font-size: .96rem;
  line-height: 1.7;
  color: var(--slate);
  margin: 0;
  max-width: 68ch;
}

.faq-icon {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: .35rem;
  opacity: .55;
}

/* two-column variants: question list beside an image */
.faq-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 1rem + 2vw, 3rem);
  align-items: start;
}

@media (min-width: 900px) {
  .faq-row {
    grid-template-columns: 1.1fr .9fr;
  }
}

.faq-image img,
.faq-image > img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* card-grid variant: each question in its own card (.faq-card inside .faq-cards) */
.faq-card {
  height: 100%;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.faq-card .icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.faq-card .faq-question,
.faq-card h5 {
  display: block;
  justify-content: initial;
}

/* text column of a tick-list variant, where the icon sits in a sibling column */
.faq-left {
  flex: 1 1 auto;
  min-width: 0;
}


/* ==========================================================================
   Bootstrap layout utilities the pages use but no stylesheet defined
   --------------------------------------------------------------------------
   compat.css carried mb-*/mt-* only. 89 pages also use gap-*, my-*, shadow*,
   responsive margin resets and a handful of colour utilities, so flex rows
   collapsed with no spacing, sections butted together and cards rendered flat.
   Values follow Bootstrap's own scale (1=.25rem .. 5=3rem) so existing markup
   spaces exactly as its author intended.
   ========================================================================== */
.g-0 { gap: 0; }
.gap-0 { gap: 0; }
.gap-1 { gap: .25rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }
.gap-5 { gap: 3rem; }
.gy-3 { row-gap: 1rem; }
.gy-4 { row-gap: 1.5rem; }
.gy-5 { row-gap: 3rem; }

.my-0 { margin-block: 0; }
.my-1 { margin-block: .25rem; }
.my-2 { margin-block: .5rem; }
.my-3 { margin-block: 1rem; }
.my-4 { margin-block: 1.5rem; }
.my-5 { margin-block: 3rem; }
.mx-0 { margin-inline: 0; }
.mx-auto { margin-inline: auto; }
.mr-3 { margin-right: 1rem; }
.ml-3 { margin-left: 1rem; }
.px-0 { padding-inline: 0; }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-md); }
.border-0 { border: 0; }
.border-top { border-top: 1px solid var(--line); }
.border-bottom { border-bottom: 1px solid var(--line); }
.rounded-3 { border-radius: 6px; }
.rounded-4 { border-radius: 10px; }
.bg-white { background: #fff; }
.text-dark { color: var(--ink); }

.row-cols-1 > * { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 768px) {
  .mb-md-0 { margin-bottom: 0; }
  .mt-md-0 { margin-top: 0; }
  .my-md-0 { margin-block: 0; }
}

@media (min-width: 992px) {
  .mb-lg-0 { margin-bottom: 0; }
  .mt-lg-0 { margin-top: 0; }
}

/* Colour utilities used on cards. .text-white existed but .bg-dark did not,
   so "bg-dark text-white" cards rendered white text on a white card: the copy
   was invisible. */
.bg-dark { background: var(--navy); }
.bg-primary { background: var(--teal-ink); color: #fff; }
.text-success { color: #1b7a4b; }
.btn-success { background: var(--teal-ink); color: #fff; border: 0; }
.btn-danger { background: #9b2c2c; color: #fff; border: 0; }
.btn-light { background: var(--bg-alt); color: var(--navy); border: 1px solid var(--line); }
.btn-success:hover,
.btn-danger:hover,
.btn-light:hover { filter: brightness(1.08); }