/* ═══════════════════════════════════════════════════════════════════
   IT INSPECTORS — Post-approval refinements

   theme.css / pages.css / home.css are copied verbatim from the approved
   design so they can be re-copied at any time. Anything changed after
   sign-off lives here instead, loaded last, so the design sources stay
   pristine and every deviation from them is visible in one file.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Testimonial carousel controls ──────────────────────────────────
   Before: 54px round buttons absolutely centred at left/right: -8px
   inside a stage padded 34px. A 54px button offset -8px reaches 46px
   into the stage, so each one sat on the card's edge, vertically
   centred over the quote — and the taller the card, the more marooned
   they looked.

   After: the buttons leave the card entirely and form a control row
   underneath it — dots on the left, arrows on the right, the pattern
   the rest of the page already uses for grouped controls. Nothing can
   overlap the card at any width, and the card reclaims the 68px the
   old side gutters had to reserve. */

.tst-stage {
  /* was 0 34px — no side gutters needed now; the bottom band holds the
     controls, which sit in the padding box below the slides. */
  padding: 0 0 74px;
}

.tst-stage .owl-nav {
  position: absolute;
  right: 0;
  top: 100%;          /* below .owl-carousel, in the stage's bottom padding */
  bottom: auto;
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: .55rem;
}

.tst-stage .owl-nav button.owl-prev,
.tst-stage .owl-nav button.owl-next {
  position: static;          /* out of the old absolute centring */
  transform: none;
  left: auto;
  right: auto;
  top: auto;
  width: 46px;
  height: 46px;
  box-shadow: var(--sh-sm);
}

/* The old hover kept translateY(-50%) to hold the vertical centring.
   In a static row that offset no longer applies, so the lift is plain. */
.tst-stage .owl-nav button.owl-prev:hover,
.tst-stage .owl-nav button.owl-next:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

.tst-stage .owl-dots {
  position: absolute;
  left: 0;
  top: 100%;
  bottom: auto;
  margin-top: 22px;
  height: 46px;              /* matches the buttons, so the row aligns */
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

@media (max-width: 575.98px) {
  /* pages.css centres the nav under the card on small screens; the
     control row already handles that, so only the spacing changes. */
  .tst-stage { padding: 0 0 66px; }
  .tst-stage .owl-nav {
    position: absolute;
    right: 0;
    top: 100%;
    bottom: auto;
    margin-top: 18px;
    justify-content: flex-end;
  }
  .tst-stage .owl-dots { margin-top: 18px; }
  .tst-stage .owl-nav button.owl-prev,
  .tst-stage .owl-nav button.owl-next { width: 42px; height: 42px; }
  .tst-stage .owl-dots { height: 42px; }
}

/* home-v6.css tints .ch-opt:nth-child(2) with WhatsApp green — that assumed a
   "Call us" tile sat first. With it removed the green landed on the Email
   tile. refinements.css loads after home-v6.css, so these win. Bound to the
   icon rather than a position, so it follows the WhatsApp option. */
.ch-opt:nth-child(2) .ch-opt-ic { background: var(--navy); color: var(--lime); }
.ch-opt:has(.fa-whatsapp) .ch-opt-ic { background: #25D366; color: #fff; }

/* Team member with a profile page: the name becomes a link. Flat colour and
   a border, no gradient. */
.tm-name { color: inherit; text-decoration: none; border-bottom: 2px solid transparent; transition: color .25s, border-color .25s; }
.tm-name:hover { color: var(--acc); border-bottom-color: var(--acc); }

/* ---- team cards: photo-first layout ------------------------------------- */
/* The 96px avatar left the cards looking like a plain list. A full-width
   portrait block reads as a proper team card, and equal heights stop the
   longest bio stretching one column. Works with a photo or with initials. */
.tm-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: stretch; }
.tm-card { padding: 0; overflow: hidden; height: 100%; gap: 0; }

.tm-av {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  position: relative;
}
.tm-av img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }

/* Initials get a faint monogram ring so the block reads as designed rather
   than as a photo that failed to load. */
.tm-av span::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 104px;
  height: 104px;
  transform: translate(-50%, -50%);
  border: 1px dashed currentColor;
  border-radius: 50%;
  opacity: .28;
}

.tm-body { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.tm-card h3 { font-size: 1.16rem; }
.tm-role { margin: .3rem 0 .7rem; font-size: .74rem; }
.tm-card p { font-size: .9rem; line-height: 1.6; }
.tm-li { top: -3.1rem; right: 1.1rem; box-shadow: var(--sh-sm); }

@media (max-width: 520px) { .tm-av { aspect-ratio: 16 / 9; } }
/* Six members auto-fit to five columns and leave one orphan on row two.
   Fixed tracks give a clean 3 x 2 instead, and bigger portraits. */
@media (min-width: 640px)  { .tm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- mobile overflow fixes ---------------------------------------------- */
/* .dc-grid had no mobile rule at all: it kept three columns
   (1fr / auto / 1fr) at phone width, pushing the second card off-screen and
   giving the whole page a horizontal scrollbar. Seen on services, pricing,
   web-design, web-hosting, the Amazon category pages and the UK SEO page. */
@media (max-width: 767.98px) {
  .dc-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .dc-grid > * { min-width: 0; }
  .dc-card { padding: 24px 20px; }
  .dc-card h3 { font-size: 1.28rem; }
  .dc-joint { justify-self: center; margin: .2rem 0; }

  /* Timeline cards were not constrained to their grid column. */
  .tl-item, .tl-card { min-width: 0; }
  .tl-card { max-width: 100%; box-sizing: border-box; }
}
/* .pt-bar bleeds edge-to-edge on mobile with margin:0 -16px, but the Bootstrap
   container only pads 12px, so it overshot the viewport by 4px each side and
   gave /pricing a horizontal scrollbar. Match the real gutter. */
@media (max-width: 767.98px) {
  .pt-bar { margin-inline: -12px; padding-inline: 12px; max-width: 100vw; }
}

/* ---- logo: light artwork while the header sits over a dark section ------- */
.brand-logo--light { display: none; }
.hdr.over-dark .brand-logo { display: none; }
.hdr.over-dark .brand-logo--light { display: block; }
/* The fallback SVG mark + wordmark were only hidden for .hdr-brand, so the
   footer showed the logo image AND the fallback side by side. */
.has-logo .brand-mark, .has-logo .brand-text { display: none !important; }

/* ---- skip to content (WCAG 2.4.1 bypass blocks) ------------------------- */
.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 1100;
  padding: .7rem 1.1rem;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: var(--navy);
  color: #fff;
  font-family: var(--font-h);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 0; color: #fff; outline: 2px solid var(--lime); outline-offset: 2px; }