/* ==========================================================================
   Frogspark SEO/UX improvements — June 2026
   Loaded AFTER scss/dist/bundle.min.css (see header.php) so these rules win
   on the cascade. Every block is tagged with its CSV "Need" item number so it
   can be reviewed or reverted item-by-item. Visual layer only; server-side
   logic lives in inc/frogspark-improvements.php.
   ========================================================================== */


/* --------------------------------------------------------------------------
   #2  Mega-menu: show the FIRST sub-category's items expanded by default,
       swap the right pane when another sub-category is hovered (TDM pattern).
       The panes are already a shared right column anchored to .menu-2_0-children;
       we just change the default-visible one and the hover swap logic.
   -------------------------------------------------------------------------- */
/* IMPORTANT: every rule here is gated behind `.menu-2_0-parent:hover` so it only
   applies while the mega-menu is actually OPEN. Without that gate, setting
   pointer-events:all on the default pane leaves an invisible-but-hit-testable
   panel sitting in the page (the panel is position:fixed); hovering that empty
   region counts as hovering inside .menu-2_0-parent and auto-opens the menu. */
#navigation .menu-2_0-parent:hover .menu-2_0 > .d-flex > .menu-2_0-children > li:first-child > .menu-2_0-sub_children {
  opacity: 1;
  pointer-events: all;
  transform: translateX(0);
}
/* While hovering anywhere in the sub-category column, hide the default pane... */
#navigation .menu-2_0-parent:hover .menu-2_0 > .d-flex > .menu-2_0-children:hover > li:first-child > .menu-2_0-sub_children {
  opacity: 0;
  pointer-events: none;
}
/* ...unless the first sub-category itself is the one being hovered. */
#navigation .menu-2_0-parent:hover .menu-2_0 > .d-flex > .menu-2_0-children > li:first-child:hover > .menu-2_0-sub_children {
  opacity: 1;
  pointer-events: all;
}
/* Subtle "active by default" cue on the first sub-category label. */
#navigation .menu-2_0-parent .menu-2_0 > .d-flex > .menu-2_0-children > li:first-child > a.menu-2_0-parent {
  color: #35DAF4 !important;
}
#navigation .menu-2_0-parent .menu-2_0 > .d-flex > .menu-2_0-children:hover > li:first-child > a.menu-2_0-parent {
  color: #3E3E3E !important;
}
#navigation .menu-2_0-parent .menu-2_0 > .d-flex > .menu-2_0-children > li:hover > a.menu-2_0-parent {
  color: #35DAF4 !important;
}


/* --------------------------------------------------------------------------
   #5  Mobile readability — bump small font sizes / line-heights.
       (Pairs with the viewport meta fix in header.php that re-enables zoom.)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  body { font-size: 16px; }
  .wysiwyg p,
  .wysiwyg li { font-size: 16px; line-height: 1.7; }
  .wysiwyg .small,
  p.small,
  .small { font-size: 14px; }
  p.h3, .h3 { font-size: 1.3rem; line-height: 1.5; }
  h1, .h1 { font-size: 1.9rem; line-height: 1.3; }
  h2, .h2 { font-size: 1.5rem; line-height: 1.35; }
  .hero p.h3 { font-size: 1.15rem; }
}


/* --------------------------------------------------------------------------
   #7  Remove the "Get in touch" pop-out tab on desktop — it overlaps the
       Pipedrive LeadBooster chat bubble in the bottom-right corner.
       (Mobile keeps its own .sticky-mobile CTA, untouched.)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .btn-popout,
  .popout-wrapper { display: none !important; }
}


/* --------------------------------------------------------------------------
   #8  "Image + Text (50/50)" builder block (Alice's request). Sits inside the
       container on a white background — image one side, left-aligned copy the
       other, with a left/right flip toggle. Markup: fs_render_image_text_block()
       in inc/frogspark-improvements.php, wired into page-service/page-sector.
       (The earlier /web column-stacking rule was dropped — those blocks stay
       as-is per the brief; this is the replacement deliverable for #8.)
   -------------------------------------------------------------------------- */
.fs-image-text { background: #FFFFFF; }
.fs-image-text .fs-image-text-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.fs-image-text .fs-image-text-copy { text-align: left; }
.fs-image-text .fs-image-text-copy > :first-child { margin-top: 0; }
.fs-image-text .fs-image-text-copy > :last-child { margin-bottom: 0; }
@media (max-width: 991px) {
  /* On stacked mobile the image always leads, regardless of the flip choice. */
  .fs-image-text .order-lg-1,
  .fs-image-text .order-lg-2 { order: 0; }
}


/* --------------------------------------------------------------------------
   #10  CTAs solid (not transparent) + readable top-right header CTA.
   -------------------------------------------------------------------------- */
/* The theme generates every button from $theme-colors as an OUTLINE: transparent
   bg + 3px coloured border, filled only by an expanding-circle <span> on hover
   (>=992px). `.btn-X` uses coloured text (for light bgs); `.btn-alt-X` uses white
   text (for dark/coloured bgs). That left ghost buttons at rest, an unreadable
   white-on-white hover on .btn-alt-quaternary (its $color is #FFF, so the hover
   <span> filled it white under white text), and black-outline .btn-alt-primary.
   Fix: give every CTA a SOLID fill in its OWN design-intent colour, kill the
   <span>, and apply one consistent, always-readable hover. We deliberately scope
   to CTA classes only — .btn-underline / .btn-sidebar / .btn-header / .btn-popout
   / .btn-back are text/utility links and are left untouched. */

/* Resting solid fills (each keeps the colour family it was already designed for). */
.btn-primary           { background-color: #3E3E3E !important; border-color: #3E3E3E !important; color: #FFFFFF !important; }
.btn-secondary         { background-color: #35DAF4 !important; border-color: #35DAF4 !important; color: #FFFFFF !important; }
.btn-tertiary          { background-color: #55D282 !important; border-color: #55D282 !important; color: #FFFFFF !important; }
.btn-alt-secondary     { background-color: #35DAF4 !important; border-color: #35DAF4 !important; color: #FFFFFF !important; }
.btn-alt-tertiary      { background-color: #55D282 !important; border-color: #55D282 !important; color: #FFFFFF !important; }
.btn-alt-quaternary    { background-color: #2B2492 !important; border-color: #2B2492 !important; color: #FFFFFF !important; }
/* .btn-alt-primary carries an inline .text-primary (dark text); the compound
   selector out-specifies it so the label is white on the dark fill. */
.btn-alt-primary,
.btn-alt-primary.text-primary { background-color: #3E3E3E !important; border-color: #3E3E3E !important; color: #FFFFFF !important; }
/* .btn-quaternary is the white button used on coloured/dark bands ("Work with us").
   Solid white + dark text; a soft shadow keeps it defined even on a light section. */
.btn-quaternary        { background-color: #FFFFFF !important; border-color: #FFFFFF !important; color: #3E3E3E !important; box-shadow: 0 4px 14px rgba(0,0,0,0.12) !important; }

/* Kill the expanding-circle <span> on every CTA so nothing paints over the fill. */
.btn-primary > span, .btn-secondary > span, .btn-tertiary > span, .btn-quaternary > span,
.btn-alt-primary > span, .btn-alt-secondary > span, .btn-alt-tertiary > span, .btn-alt-quaternary > span {
  width: 0 !important; height: 0 !important; background-color: transparent !important;
}

/* One consistent hover for all CTAs: subtle darken, text stays readable. */
.btn-primary:hover, .btn-secondary:hover, .btn-tertiary:hover,
.btn-alt-primary:hover, .btn-alt-primary.text-primary:hover, .btn-alt-secondary:hover,
.btn-alt-tertiary:hover, .btn-alt-quaternary:hover { color: #FFFFFF !important; filter: brightness(0.9); }
.btn-quaternary:hover { color: #3E3E3E !important; filter: brightness(0.94); }

/* Ninja Forms submit button ("Contact us") sat as white text on the dark form
   band with no fill — invisible. Give it a solid cyan fill to match the CTAs. */
.nf-form-cont input[type="button"],
.nf-form-cont input[type="submit"],
.nf-form-cont button[type="submit"] {
  background-color: #35DAF4 !important;
  border: 3px solid #35DAF4 !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  font-weight: bold !important;
}
.nf-form-cont input[type="button"]:hover,
.nf-form-cont input[type="submit"]:hover,
.nf-form-cont button[type="submit"]:hover { filter: brightness(0.9); color: #FFFFFF !important; }

/* Top-right header CTA: light green (#4fed90) failed contrast with white text.
   Use a deeper, AA-compliant green. ID selector out-specifies the class fills above. */
#navigation ul li:last-child a,
.scrolled #navigation ul li:last-child a,
#navigation ul.nav li:last-child a.active {
  background: #0B7A3E !important;
  color: #FFFFFF !important;
}
#navigation ul li:last-child a:hover {
  background: #35DAF4 !important;
  color: #FFFFFF !important;
}
/* Keep submenu "last child" links unaffected by the above (they are text links). */
#navigation .submenu ul.nav li:last-child a,
#navigation .menu-2_0 li:last-child a {
  background: transparent !important;
  color: #3E3E3E !important;
}


/* --------------------------------------------------------------------------
   #15  Fallback enquiry form (formless service pages) — the heading sat on a
        dark band but inherited a dark colour, making it unreadable. Force white
        and give the [ninja_form id=7] block room. Mirrors the /web short form.
   -------------------------------------------------------------------------- */
.fs-fallback-form h2,
.fs-fallback-form .h1,
.fs-fallback-form p { color: #FFFFFF !important; }
.fs-fallback-form .nf-form-cont { color: #3E3E3E; }
/* The fallback page renders Ninja form 7 with a simpler DOM than /web (the
   theme's chunky-input + auto-width-submit rules need Ninja's full
   .nf-field-container markup, which only one of the two pages gets). Re-apply
   those two properties scoped to the fallback form so it matches /web exactly:
   chunky 16px inputs + content-width (not full-width) submit button. */
.fs-fallback-form .nf-element:not([type="submit"]):not([type="button"]):not(.btn-primary) {
  padding: 16px !important;
}
.fs-fallback-form input[type="submit"],
.fs-fallback-form input[type="button"],
.fs-fallback-form .btn-primary.nf-element {
  width: auto !important;
}


/* --------------------------------------------------------------------------
   #11  Breadcrumbs — independent bar BELOW the hero (was Yoast, over the hero).
        Markup printed by fs_breadcrumb() in inc/frogspark-improvements.php.
   -------------------------------------------------------------------------- */
.fs-breadcrumbs {
  background: #F4F7F9;
  border-bottom: 1px solid #E6EBEE;
  padding: 14px 0;
  font-size: 14px;
}
.fs-breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.fs-breadcrumbs .fs-crumb { display: inline-flex; align-items: center; }
.fs-breadcrumbs .fs-crumb + .fs-crumb:before {
  content: '\f105';
  font-family: 'Font Awesome 5 Pro';
  color: #9AA6AD;
  margin: 0 10px;
  font-weight: 600;
}
.fs-breadcrumbs a { color: #3E3E3E; text-decoration: none; }
.fs-breadcrumbs a:hover { color: #35DAF4; }
.fs-breadcrumbs .fs-crumb-current span { color: #0B7A3E; font-weight: 600; }


/* --------------------------------------------------------------------------
   #14  Homepage trust signals — make the badges row prominent under the hero.
        Markup added to inc/new/_front-builder.php (hero block).
   -------------------------------------------------------------------------- */
.fs-trust-strip {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin: 44px 0 8px;
  width: fit-content;   /* shrink to the badge row so the label rules match its width */
  max-width: 100%;
}
/* "PLATFORM PARTNERS & ACCREDITATIONS" with a thin rule on each side, matched to
   the width of the badge row beneath. */
.fs-trust-label {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  color: #FFFFFF;
  opacity: 0.85;
}
.fs-trust-label > span {
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.fs-trust-label:before,
.fs-trust-label:after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.35);
}
/* Each badge sits in a white rounded card (per the mockup). */
.fs-trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.fs-trust-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 9px;
  padding: 4px 12px;
  height: 52px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
/* Base logo height — every badge logo renders at the same height. */
.fs-trust-badge img {
  height: 32px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  display: block;
}
/* The WooCommerce badge artwork already has its own solid background, so it
   doesn't need a white card — but its logo matches the others' height. */
.fs-trust-badge--bare {
  background: transparent;
  box-shadow: none;
  padding: 0; /* pill fills its box exactly (tight asset), matching how the white cards fill theirs -> even tile gaps */
}
.fs-trust-badge--bare img { height: 52px; max-width: 200px; } /* no early width cap, so the pill is flush top/bottom with the cards */
/* Google Partner logo has heavy built-in whitespace, so its artwork is scaled up
   to read at the same visual size as the others. */
.fs-trust-badge--inset img { height: 44px; max-width: 132px; }
/* East Midlands logo is a tight-cropped asset (emc-member.png), so it fills its
   card without the whitespace the original had — sized to balance the others. */
.fs-trust-badge--emc img { height: 38px; max-width: 130px; }
/* Mobile: same treatment as desktop so every tile is the same height (Woo pill
   flush, padded logos scaled up), just a touch smaller. */
@media (max-width: 767px) {
  .fs-trust-strip { margin-top: 32px; width: 100%; }
  .fs-trust-badges { gap: 12px; }
  .fs-trust-badge { height: 44px; padding: 4px 10px; }
  .fs-trust-badge img { height: 28px; max-width: 120px; }       /* base (Drum) */
  .fs-trust-badge--bare { padding: 0; }
  .fs-trust-badge--bare img { height: 44px; max-width: 170px; } /* Woo flush */
  .fs-trust-badge--inset img { height: 38px; max-width: 124px; }/* Google */
  .fs-trust-badge--emc img { height: 32px; max-width: 116px; }  /* East Midlands */
}
/* Tablet/mobile (below the desktop 992px split): centre everything the desktop
   left-aligns, and tidy the grey bar. */
@media (max-width: 991px) {
  .home-hero .col-lg-8.offset-lg-2,
  .home-hero h1,
  .home-hero p.h3 { text-align: center !important; }
  .home-hero p.h3 { margin-left: auto !important; margin-right: auto !important; }
  .fs-trust-strip {
    width: 100% !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .fs-trust-badges { justify-content: center !important; }
  /* Grey bar: stack the "Rated 8.5/10" accolade above the logos with breathing
     room, and drop the vertical separator (it only makes sense inline). */
  .fs-drum-clients-inner { flex-direction: column !important; gap: 24px !important; }
  .fs-drum-sep { display: none !important; }
  .fs-drum-accolade { justify-content: center; }
}


/* --------------------------------------------------------------------------
   #16  Homepage hero — align text left (desktop) so it clears the video.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  /* More breathing room above the headline (it sat too close to the nav). */
  .hero.home-hero { padding-top: 80px; }
  .home-hero .col-lg-8.offset-lg-2 {
    margin-left: 0 !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    text-align: left !important;
  }
  .home-hero .col-lg-8.offset-lg-2 .btn-alt-quaternary,
  .home-hero .col-lg-8.offset-lg-2 .btn-alt-secondary,
  .home-hero .col-lg-8.offset-lg-2 .btn-alt-tertiary { margin-left: 0 !important; margin-right: 1rem !important; }
  .home-hero .fs-trust-strip { align-items: flex-start; }
}

/* Mockup hero CTAs: solid green "Book a Call" + outline "View Our Work". */
.home-hero .btn-alt-quaternary {
  background-color: #55D282 !important;
  border-color: #55D282 !important;
  color: #FFFFFF !important;
}
.home-hero .btn-alt-secondary {
  background-color: transparent !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}
.home-hero .btn-alt-secondary:hover {
  background-color: #FFFFFF !important;
  color: #3E3E3E !important;
}

/* --------------------------------------------------------------------------
   Homepage hero refinements (brand feedback, June 2026):
   - Smaller subheading.
   - Heavy left-side darkening of the video so the H1/subheading/CTAs have a
     clean reading area (content is left-aligned per #16).
   - Client logos relocated into the grey 'drum' bar (.fs-drum-clients).
   -------------------------------------------------------------------------- */
/* Bigger hero headline. */
.home-hero h1 {
  font-size: 2.4rem;
  line-height: 1.08;
}
@media (min-width: 992px) {
  .home-hero h1 { font-size: 3.4rem; }
}
/* Smaller, lighter hero subheading. */
.home-hero p.h3 {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.6;
  max-width: 34em;
}
@media (min-width: 992px) {
  .home-hero p.h3 { font-size: 0.98rem; }
}
/* Darken the left of the video for a clean reading area (fades out to the right). */
.home-hero .hero-background:after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.9) 28%, rgba(0,0,0,0.6) 52%, rgba(0,0,0,0.2) 78%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 1;
}
.home-hero .container { position: relative; z-index: 2; }
@media (max-width: 991px) {
  /* On mobile the content is centred over the full width — darken evenly. */
  .home-hero .hero-background:after {
    background: rgba(0,0,0,0.6);
  }
}

/* Client logos inside the grey drum bar. "Who we've worked with" sits inline with
   the logos, everything vertically centred; logos are small + uniform. On mobile
   the whole thing stacks (label on top, logos beneath each other). */
.fs-drum-clients { padding: 16px 0; }
.fs-drum-clients-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 28px;
}
.fs-drum-clients-label {
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
  margin: 0;
  white-space: nowrap;
}
/* "Rated 8.5/10 / The Drum Recommends" accolade on the left of the grey bar. */
.fs-drum-accolade {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.fs-drum-accolade-icon { height: 26px; width: auto; }
.fs-drum-accolade-text { display: flex; flex-direction: column; line-height: 1.15; }
.fs-drum-rating { color: #FFFFFF; font-weight: 700; font-size: 0.95rem; }
.fs-drum-sub { color: #FFFFFF; opacity: 0.75; font-size: 0.72rem; }
/* Vertical white separator between the label and the logos. */
.fs-drum-sep {
  flex: 0 0 auto;
  align-self: center;
  width: 1px;
  height: 30px;
  background: rgba(255,255,255,0.55);
}
.fs-drum-clients-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fs-drum-clients-logos li { display: flex; }
.fs-drum-clients-logos .brand-item { opacity: 0.85; transition: opacity .2s ease; }
.fs-drum-clients-logos .brand-item:hover { opacity: 1; }
/* Real <img>s sized by HEIGHT so every logo is the same height (uniform, closer
   in size) and the width follows naturally. Can't overflow/clip on mobile. */
.fs-drum-clients-logos .brand-item img {
  height: 38px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  display: block;
}
@media (max-width: 767px) {
  .fs-drum-clients-inner { flex-direction: column; gap: 14px; }
  .fs-drum-sep { display: none; } /* vertical line is N/A once stacked */
  /* Logos in rows of two on mobile (not a single stacked column). Each cell is a
     fixed, uniform size with the logo centred + contained, so every logo reads at
     a consistent size regardless of its native shape. */
  .fs-drum-clients-logos { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 18px 16px; }
  .fs-drum-clients-logos li {
    flex: 0 0 calc(50% - 8px);
    height: 42px;
    align-items: center;
    justify-content: center;
  }
  .fs-drum-clients-logos .brand-item { justify-content: center; width: 100%; height: 100%; }
  .fs-drum-clients-logos .brand-item img {
    height: 100%;
    max-height: 32px;
    max-width: 86%;
    width: auto;
    object-fit: contain;
  }
}


/* --------------------------------------------------------------------------
   #17  Long mobile text blocks — improve rhythm/readability while content is
        split editorially. (CSS can't create new blocks; this aids scannability.)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .wysiwyg { line-height: 1.75; }
  .wysiwyg p { margin-bottom: 1.15rem; }
  .wysiwyg h2, .wysiwyg h3 { margin-top: 1.5rem; }
}


/* --------------------------------------------------------------------------
   #3  Related-services: hide the old sticky tab bar, style the new cards
       (printed lower down the page by page-service.php).
   -------------------------------------------------------------------------- */
#menu-service { display: none !important; }

.fs-related-services { background: #FAFAFA; }
.fs-related-services .fs-rel-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #FFFFFF;
  border: 1px solid #ECECEC;
  border-radius: 10px;
  padding: 24px;
  transition: all .25s ease;
  text-decoration: none;
}
.fs-related-services .fs-rel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  border-color: #35DAF4;
}
.fs-related-services .fs-rel-card .fs-rel-title {
  color: #3E3E3E;
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0;
}
.fs-related-services .fs-rel-card .fs-rel-go {
  margin-top: 14px;
  color: #0B7A3E;
  font-weight: 700;
  font-size: 0.9rem;
}
.fs-related-services .fs-rel-card:hover .fs-rel-go { color: #35DAF4; }


/* --------------------------------------------------------------------------
   #6 / #9  FAQ accordion polish (markup reuses the theme's .faqs-wrapper).
   -------------------------------------------------------------------------- */
.fs-faq-section .faqs-wrapper .collapse .wysiwyg,
.fs-faq-section .faqs-wrapper .collapsing .wysiwyg {
  background: #F7F9FA;
  border-radius: 0 0 4px 4px;
}


/* --------------------------------------------------------------------------
   #13  Resources cards — read-time + thumbnail polish (markup in page-service).
   -------------------------------------------------------------------------- */
.fs-resource-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 0.8rem;
  color: #6B7780;
  margin-bottom: 8px;
}
.fs-resource-meta .fs-readtime:before {
  content: '\f017';
  font-family: 'Font Awesome 5 Pro';
  margin-right: 5px;
  color: #35DAF4;
}


/* --------------------------------------------------------------------------
   #12  Quote attribution — make the "who said it" line clear & visible.
   -------------------------------------------------------------------------- */
.carousel-testimonials .fs-quote-author,
.carousel-testimonials h3 {
  position: relative;
  padding-left: 28px;
  color: #35DAF4; /* on-brand cyan (was green) per brand feedback */
  font-weight: 600;
}
.carousel-testimonials .fs-quote-author:before {
  content: '\2014'; /* em dash */
  position: absolute;
  left: 0;
  color: #35DAF4;
}


/* --------------------------------------------------------------------------
   Client logos (testimonials section): show in full colour. The theme bundle
   (.logo-item in scss/src/styles.scss) renders them grayscale + 50% opacity,
   colour only on hover — brand wants them in colour by default. Override here
   (loads after bundle.min.css) so no SCSS rebundle is needed. Hover keeps its
   white-card lift.
   -------------------------------------------------------------------------- */
.logo-item {
  filter: none !important;
  opacity: 1 !important;
}