/*
 * JF Kit: the small Elementor widgets (heading, text, button, image, service
 * boxes, stats, FAQ, CTA card) for custom sections. Typography and colours
 * come from jf-landing.min.css and the Site Options "Theme Styles"
 * variables; this only adds the parts the page templates style per section.
 */

/* Section backgrounds the templates use, as container classes. Elementor's own
   background setting on the container still wins. */
.e-con.jf-bg-brand {
  background-color: var(--brand-color);
}

.e-con.jf-bg-light {
  background-color: var(--light-background);
}

/* The About, Meet the Team and Core heroes: brand color into the accent. */
.e-con.jf-bg-gradient {
  background-color: var(--brand-color);
  background-image: linear-gradient(135deg, var(--brand-color) 0%, var(--accent-cta) 100%);
}

/* The wrapper adds nothing of its own: spacing belongs to the container. */
.jf-kit {
  padding: 0;
  margin: 0;
}

.jf-kit > :last-child,
.jf-kit-text > :last-child {
  margin-bottom: 0 !important;
}

/* Eyebrow: the uppercase label with the short rule, as on the templates. */
.jf-kit-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--accent-cta);
}

.jf-kit-eyebrow::before {
  content: "";
  flex: 0 0 32px;
  height: 2px;
  background: currentColor;
}

.jf-kit-eyebrow--no-rule::before {
  display: none;
}

/* Buttons */
/* .jf-kit first: Bootstrap's ".bootstrap-container .btn-lg" sets padding too. */
.jf-kit .jf-kit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 40px;
  border-radius: var(--cta-button-border-radius, 200px) !important;
  font-size: 1.125rem !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  text-transform: none !important;
  text-decoration: none !important;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.jf-kit-btn--primary {
  background: var(--accent-cta) !important;
  border: 0 !important;
  color: #fff !important;
}

.jf-kit-btn--primary:hover,
.jf-kit-btn--primary:focus {
  background: var(--accent-cta-hover) !important;
  color: #fff !important;
}

.jf-kit .jf-kit-btn--outline {
  padding: 12px 40px;
  background: transparent !important;
  border: 2px solid var(--accent-cta) !important;
  color: var(--accent-cta) !important;
}

.jf-kit-btn--outline:hover,
.jf-kit-btn--outline:focus {
  background: var(--accent-cta-hover) !important;
  border-color: var(--accent-cta-hover) !important;
  color: #fff !important;
}

.jf-kit .jf-kit-btn--outline_light {
  padding: 12px 40px;
  background: transparent !important;
  border: 2px solid var(--accent-cta) !important;
  color: #fff !important;
}

.jf-kit-btn--outline_light:hover,
.jf-kit-btn--outline_light:focus {
  background: var(--accent-cta-hover) !important;
  border-color: var(--accent-cta-hover) !important;
  color: #fff !important;
}

/* The eyebrow above both columns sits right on top of them. */
/* The plugin stylesheet gives every eyebrow 24px with !important: the
   section rules below win by being more specific. */
.jf-section .jf-it__top .jf-sec-eyebrow {
  margin-bottom: 0 !important;
}

/* The Site Options CTA button colours (white on the brand CTA band by default). */
.jf-kit-btn--cta {
  background: var(--cta-button-bg, #fff) !important;
  border: 0 !important;
  color: var(--cta-button-text-color, #000) !important;
}

.jf-kit-btn--cta:hover,
.jf-kit-btn--cta:focus {
  background: var(--cta-button-hover-bg, #f5f5f5) !important;
  color: var(--cta-button-hover-text-color, #000) !important;
}

.jf-kit-btn--block {
  display: flex;
  width: 100%;
}

/* Image */
.jf-kit-image img {
  display: block;
  width: 100%;
  height: auto;
}

.jf-kit-image--radius-medium img {
  border-radius: var(--rounded-medium, 8px);
}

.jf-kit-image--radius-large img {
  border-radius: var(--rounded-large, 16px);
}

.jf-kit-image--radius-xl img {
  border-radius: 24px;
}

.jf-kit-image--border img {
  border: 1px solid var(--box-stroke-color, #e7e7e7);
  border-radius: var(--rounded-large, 16px);
}

.jf-kit-image--shadow img {
  box-shadow: 4px 10px 44px rgba(0, 0, 0, 0.2);
}

/* Glass box, as the Home hero trust badges: the box sets the padding and the
   image sits inside at a fixed height, so any export fits. */
.jf-kit.jf-kit-image--glass > .jf-kit-image__link {
  display: inline-flex !important;
  align-items: center;
  box-sizing: border-box;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--rounded-medium, 16px);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.jf-kit.jf-kit-image--glass img {
  display: block;
  width: auto !important;
  max-width: 100%;
  height: 56px !important;
  object-fit: contain;
}

/* Grids (service boxes, stats): columns come from the widget's controls. */
.jf-kit-grid {
  display: grid;
  grid-template-columns: repeat(var(--jf-kit-columns, 3), minmax(0, 1fr));
  gap: var(--jf-kit-gap, 20px);
  align-items: stretch;
}

/* Service boxes, as the Home "Our services" cards. */
.jf-kit-service-box {
  border: 0;
  border-radius: var(--rounded-large, 16px);
  background: #fff;
  box-shadow: 4px 10px 44px rgba(0, 0, 0, 0.2);
}

.jf-kit .jf-kit-service-box .card-body {
  padding: 32px;
}

.jf-kit .jf-kit-service-box .service-icon {
  margin-bottom: 24px !important;
}

.jf-kit-service-box--border {
  border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.175));
}

.jf-kit-service-box--flat {
  box-shadow: none;
  border: 1px solid #e7e7e7;
}

.jf-kit-service-box a.jf-kit-service-box__link {
  color: inherit;
  text-decoration: none !important;
}

.jf-kit-service-box__more {
  display: inline-block;
  margin-top: 12px;
  color: var(--accent-cta) !important;
  font-weight: 500;
}

/* Stats */
.jf-kit-stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jf-kit-stat__number {
  color: var(--stats-numbers-color, var(--accent-cta));
}

/* FAQ: Bootstrap's collapse, with the plus/minus icons swapped in CSS. */
.jf-kit-faq .accordion-button:not(.collapsed) .icon-plus {
  display: none;
}

.jf-kit-faq .accordion-button:not(.collapsed) .icon-minus {
  display: block !important;
}

/* CTA card, as the Home CTA band. */
.jf-kit-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 64px;
  border-radius: var(--rounded-large, 16px);
  background-color: var(--brand-color);
  background-size: cover;
  background-position: center;
}

.jf-kit-cta .h2,
.jf-kit-cta .jf-body-large,
.jf-kit-cta .jf-body-large p {
  color: #fff !important;
}

.jf-kit-cta .jf-kit-btn {
  margin-top: 22px;
}

/* A site's CSS on links must not change the card's button (white on white). */
.jf-kit .jf-kit-cta a.jf-kit-btn.jf-kit-btn--cta {
  color: var(--cta-button-text-color, #000) !important;
}

.jf-kit .jf-kit-cta a.jf-kit-btn.jf-kit-btn--cta:hover,
.jf-kit .jf-kit-cta a.jf-kit-btn.jf-kit-btn--cta:focus {
  color: var(--cta-button-hover-text-color, #000) !important;
}

@media (max-width: 767px) {
  .jf-kit .jf-kit-btn {
    font-size: 14px !important;
  }

  .jf-kit-cta {
    padding: 36px;
  }

  .jf-kit.jf-kit-image--glass > .jf-kit-image__link {
    padding: 12px 16px;
  }

  .jf-kit .jf-kit-service-box .service-icon {
    margin-bottom: 16px !important;
  }

  .jf-kit-cta .jf-kit-btn {
    margin-top: 14px;
  }
}

/* =============================================================================
   JF Sections: one widget per section. The section sets the background and
   the spacing (as variables the widget's controls change per device); the
   inner box is the template's .container: the site width less 12px gutters.
   ============================================================================= */
.jf-section {
  position: relative;
  margin-top: var(--jf-sec-mt, 0) !important;
  margin-bottom: var(--jf-sec-mb, 0) !important;
  padding-top: var(--jf-sec-pt, 100px);
  padding-bottom: var(--jf-sec-pb, 100px);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.jf-section--bg-brand {
  background-color: var(--brand-color);
}

.jf-section--bg-gradient {
  background-color: var(--brand-color);
  background-image: linear-gradient(135deg, var(--brand-color) 0%, var(--accent-cta) 100%);
}

.jf-section--bg-light {
  background-color: var(--light-background);
}

.jf-section__inner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--jf-sec-gap, 0);
  max-width: var(--container-max-width, 1200px);
  margin: 0 auto;
  padding-left: var(--jf-gutter, 12px);
  padding-right: var(--jf-gutter, 12px);
}

/* White text on dark backgrounds. */
.jf-tone-light .jf-sec-title,
.jf-tone-light .jf-sec-text,
.jf-tone-light .jf-sec-text p,
.jf-tone-light .jf-sec-extra,
.jf-tone-light .jf-sec-extra p {
  color: #fff !important;
}

.jf-sec-text > :last-child,
.jf-sec-extra > :last-child {
  margin-bottom: 0;
}

/* Hero */
.jf-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--jf-hero-gap, 10px);
  width: 100%;
  max-width: var(--jf-hero-width, 696px);
}

.jf-hero--center .jf-hero__content {
  margin: 0 auto;
  align-items: center;
  text-align: center;
}

.jf-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: var(--jf-hero-buttons, 22px);
}

.jf-hero--center .jf-hero__buttons {
  justify-content: center;
}

.jf-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
  margin-top: var(--jf-hero-badges, 38px);
}

/* Image + Text */
.jf-it__top {
  width: 50%;
}

.jf-it {
  display: flex;
  align-items: var(--jf-it-align, stretch);
  gap: var(--jf-it-gap, 20px);
}

.jf-it__text {
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--jf-it-text-gap, 20px);
  padding: var(--jf-it-text-pad, 0);
}

.jf-section .jf-it__heading .jf-sec-eyebrow {
  margin-bottom: var(--jf-it-eyebrow-gap, 24px) !important;
}

.jf-it__media {
  box-sizing: border-box;
  flex: 0 0 calc(var(--jf-it-image-width, 50%) - var(--jf-it-gap, 20px) / 2);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: var(--jf-it-media-pad, 0);
}

.jf-it__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: var(--jf-it-img-max, none);
  object-fit: cover;
}

/* Services */
.jf-section .jf-services .jf-services__eyebrow,
.jf-section.jf-services .jf-services__eyebrow {
  margin-bottom: var(--jf-svc-eyebrow, 24px) !important;
}

.jf-services__intro--columns {
  display: flex;
  gap: var(--jf-svc-intro-gap, 20px);
}

.jf-services__intro--columns > * {
  flex: 1 1 0;
  min-width: 0;
}

.jf-services__intro--stacked {
  display: flex;
  flex-direction: column;
  gap: var(--jf-svc-intro-gap, 20px);
}

.jf-services__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jf-services__boxes {
  margin-top: var(--jf-svc-boxes, 64px);
}

@media (max-width: 767px) {
  .jf-hero__badges {
    flex-direction: column;
    gap: 16px;
  }

  .jf-it__top {
    width: 100%;
  }

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

  .jf-it--image-right.jf-it--mobile-image-first,
  .jf-it--image-left.jf-it--mobile-text-first {
    flex-direction: column-reverse;
  }

  .jf-it__media {
    flex: 0 0 auto;
  }

  .jf-services__intro--columns {
    flex-direction: column;
  }
}

/* -----------------------------------------------------------------------------
 * Slider arrows in the JF widgets. Elementor's own Swiper styles make them
 * black and 44px; here they take the Theme Styles accent at a readable size,
 * and the logo sliders keep room at the sides so an arrow never covers a logo.
 * -------------------------------------------------------------------------- */
.jf-ew .jf-slider-container {
    --jf-slider-navigation-color: var(--accent-cta, #007aff);
    --jf-slider-navigation-size: 22px;
}
.jf-ew :is(.jf-clients-slider-container, .jf-awards-slider-container, .jf-partners-slider-container) {
    padding-inline: 32px !important;
}
.jf-ew :is(.jf-clients-slider-container, .jf-awards-slider-container, .jf-partners-slider-container) :is(.jf-slider-button-prev, .jf-slider-button-next) {
    width: 24px;
    margin-top: calc(0px - (var(--jf-slider-navigation-size) / 2));
}
.jf-ew :is(.jf-clients-slider-container, .jf-awards-slider-container, .jf-partners-slider-container) .jf-slider-button-prev { left: 0; }
.jf-ew :is(.jf-clients-slider-container, .jf-awards-slider-container, .jf-partners-slider-container) .jf-slider-button-next { right: 0; }
.jf-ew :is(.jf-slider-button-prev, .jf-slider-button-next).jf-slider-button-disabled { opacity: .3; }

/* JF Heading "Label" style: the logo rows' titles. */
.jf-kit .jf-label {
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}
@media (max-width: 767px) {
    .jf-kit .jf-label { font-size: 14px !important; }
}

/* JF Slider: the slider alone; the container gives the section its spacing. */
.jf-kit-slider :is(.home-clients-slider-section, .home-testimonials-section, .home-case-studies-section, #case-studies-section) {
    padding: 0 !important;
    margin: 0 !important;
    background: none;
}
.jf-kit-slider .home-clients-carousel { min-width: 0; }

/* JF Slider logos: at most 56px tall, as in the templates, whichever design. */
.jf-kit-slider--logos .jf-slider-slide img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 56px;
    object-fit: contain;
}
/* Phones: the arrows' side room as in the templates (16px), so logos keep their size. */
@media (max-width: 767px) {
    .jf-ew :is(.jf-clients-slider-container, .jf-awards-slider-container, .jf-partners-slider-container) {
        padding-inline: 16px !important;
    }
}

/* Accordion headers are <button>s: a theme's button:hover must not restyle them. */
.faq-accordion-btn.accordion-button:hover,
.faq-accordion-btn.accordion-button:focus,
.faq-accordion-btn.accordion-button:active,
.vertical-tabs-accordion-btn.accordion-button:hover,
.vertical-tabs-accordion-btn.accordion-button:focus,
.vertical-tabs-accordion-btn.accordion-button:active {
  background-color: var(--bs-accordion-btn-bg, transparent) !important;
  color: var(--bs-accordion-btn-color, inherit) !important;
  text-decoration: none !important;
}

.faq-accordion-btn.accordion-button:not(.collapsed):hover,
.faq-accordion-btn.accordion-button:not(.collapsed):focus,
.faq-accordion-btn.accordion-button:not(.collapsed):active,
.vertical-tabs-accordion-btn.accordion-button:hover,
.vertical-tabs-accordion-btn.accordion-button:focus,
.vertical-tabs-accordion-btn.accordion-button:active {
  background-color: transparent !important;
}

/* Desktop: room between the image and the text. */
@media (min-width: 1025px) {
  [data-elementor-type="single-page"] .e-con:has(> .e-con > .elementor-widget-jf-kit-image):has(> .e-con > .elementor-widget-jf-kit-heading, > .e-con > .elementor-widget-jf-kit-text) {
    column-gap: 64px !important;
  }

  .jf-it {
    gap: var(--jf-it-gap, 64px);
  }

  .jf-it__media {
    flex-basis: calc(var(--jf-it-image-width, 50%) - var(--jf-it-gap, 64px) / 2);
  }
}

/* Five stats (mini location pages) share one row, as on the PHP template. */
@media (min-width: 768px) {
  [data-elementor-type="single-page"] .elementor-widget-jf-kit-stats .jf-kit-grid:has(> .jf-kit-stat:nth-child(5):last-child) {
    --jf-kit-columns: 5;
  }
}

/* "Section text" on the Service Boxes widget: the heading and text beside it, not the cards. */
.e-con:has(> .elementor-widget-jf-kit-service-boxes.jf-text-tone-white, > .e-con-inner > .elementor-widget-jf-kit-service-boxes.jf-text-tone-white) :is(.jf-kit-heading, .jf-kit-text, .jf-kit-text p) {
  color: #fff !important;
}

.e-con:has(> .elementor-widget-jf-kit-service-boxes.jf-text-tone-dark, > .e-con-inner > .elementor-widget-jf-kit-service-boxes.jf-text-tone-dark) .jf-kit-heading {
  color: var(--heading-color) !important;
}

.e-con:has(> .elementor-widget-jf-kit-service-boxes.jf-text-tone-dark, > .e-con-inner > .elementor-widget-jf-kit-service-boxes.jf-text-tone-dark) :is(.jf-kit-text, .jf-kit-text p) {
  color: var(--paragraph-color) !important;
}

/* "Section text" on the Vertical Tabs widget. Its markup is white by default. */
.elementor-widget-jf-tabs.jf-text-tone-dark #vertical-tabs-section :is(.jf-text-white, .jf-body-large),
.elementor-widget-jf-tabs.jf-text-tone-dark #vertical-tabs-section .jf-body-large p {
  color: var(--paragraph-color) !important;
}

.elementor-widget-jf-tabs.jf-text-tone-dark #vertical-tabs-section :is(.h2, strong) {
  color: var(--heading-color) !important;
}

.elementor-widget-jf-tabs.jf-text-tone-dark #vertical-tabs-section .icon-container path {
  stroke: var(--heading-color);
}

.elementor-widget-jf-tabs.jf-text-tone-dark #vertical-tabs-section .accordion-item {
  border-bottom-color: rgba(0, 0, 0, 0.15) !important;
}

/* Stats numbers on tablets: four 64px numbers ("99.9%") don't fit side by side, and the widest one
   pushed the page sideways. Scaled with the screen there; phones and wide screens keep their size. */
@media (min-width: 768px) and (max-width: 1199px) {
    .jf-service-page-template-wrapper .jf-kit-stat .big-number {
        font-size: clamp(40px, 5vw, 4rem) !important;
    }
    .jf-kit-stat {
        min-width: 0;
    }
}

/* Core hero: its text box is 860px wide (100% on phones), wider than tablets, so the page scrolled
   sideways between 768px and ~880px. Never wider than its section; wide screens keep 860px. Here and
   not in the layout, so Core templates already on a site get it too. */
.jf-section-core-hero .e-con {
    max-width: 100%;
}