@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Manrope:wght@200..800&family=Onest:wght@100..900&display=swap');

body, .elementor-widget-text-editor {
  font-family: "Manrope", sans-serif !important; font-size: 16px;
}
.site-logo img {
    height: 64px !important;
}
.text-center {text-align: center !important;}
.eyebrow {
	display: inline-flex !important; }
.team_members h3, p.person__role { margin-bottom: 0.6rem; }
.page_cta div {
    text-align: center !important;
}
.page_cta p, .page_cta h2 {
    color: white;
    text-align: center;
    line-height: 54px;
}
.form-card {
    padding: clamp(1.5rem, 1rem + 2vw, 2rem);
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
}

.form-card h2 {
    color: rgb(15, 18, 24) !important;
    font-size: 24px !important;
}
.stages div {
    width: stretch;
}

.journey__line { top: 68px !important; }

.journey__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sp-8) var(--sp-5);
    transition: background var(--t-base) var(--ease);
    background: #EEF0FF;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(23, 24, 28, 0.07);
    margin: 0 4%;
}
.journey__step:hover { background: #EEF0FF;
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.journey__dot { border: none !important; background: transparent !important; font-size: 34px !important; font-family: sans-serif !important;
}
.journey__line { display: none; }

dd.stats-strip__label {
    margin-inline-start: auto;
}
.hero__title {
	font-size: clamp(2.5rem, 1.6rem + 4.2vw, 3rem) !important; }

.cross-card::before { background: rgba(23, 24, 28, .62); transition: background .38s ease; }

span.cross-card__body { font-size: 0.95rem; color: #fff; font-weight: 700; letter-spacing: .03rem;    text-align: center; }
.cross-card {
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    box-shadow: 0 2px 6px rgba(23, 24, 28, 0.07);
}

/* section.section {
    padding: 0;
} */
h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 1.875rem);   margin-bottom: 1rem; }
.entry-content ul > li::before {display: none;}
.consent input {
    margin: 0 0.45rem 0 0;
}
.consent span {
    vertical-align: text-bottom;
}
.container, .container.container--prose {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.ukg_case_study-template-default .page-body {
    padding-top: 0;
}

.single-ukg_service #jp-relatedposts,
.single-ukg_service .jp-relatedposts { display: none !important; }

.divrics {background-color: #fff; padding: 1rem;border-radius: 12px; text-align: center}
.text-white {color: #fff !important; }
.f-500 {font-weight: 500}
.reports-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem;
    }

/* Sample Reports ─────── */
    .report-card {
      background: #fff;
      border: 1px solid #e4e7ef;
      border-radius: 0.75rem;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: box-shadow 0.3s, transform 0.3s;
			height: 100%;
    }
    .report-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.1); transform: translateY(-2px); }
    .report-preview {
      background:#f8f9fc;
      border-bottom: 1px solid #e4e7ef;
      padding: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 160px;
    }
    .report-doc-icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
    }
    .report-doc-shape {
      width: 56px; height: 70px;
      background: #fff;
      border: 1px solid #e4e7ef;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .report-doc-shape::before {
      content: '';
      position: absolute;
      top: 0; right: 0;
      width: 16px; height: 16px;
      background:#f8f9fc;
      border-left: 1px solid #e4e7ef;
      border-bottom: 1px solid #e4e7ef;
    }
    .report-ext {
      display: inline-block;
      font-size: 0.62rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      padding: 0.2rem 0.5rem;
      border-radius: 4px;
    }
    .ext-pdf { background: #fff0f0; color: #EE2630; }
    .ext-doc { background: #eef2ff; color: #434CA0; }
    .ext-xls { background: #f0fff4; color: #1d7b3a; }
    .report-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
    .report-type {
      font-size: 0.62rem;
      font-weight: 800;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: #434CA0;
      margin-bottom: 0.5rem;
    }
    .report-body h3 {
      font-size: 0.9rem;
      font-weight: 700;
      color: #0f1218;
      line-height: 1.4;
      margin-bottom: 0.5rem;
    }
    .report-body p { font-size: 0.75rem; line-height: 1.6; flex: 1; margin-bottom: 1rem; }
    .report-pages { font-size: 0.68rem; color: rgba(74,79,106,0.6); margin-bottom: 1rem; }
    .report-dl {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      width: 100%;
      background: #0f1218;
      color: #fff;
      font-weight: 700;
      font-size: 0.75rem;
      padding: 0.75rem;
      border-radius: 0.5rem;
      min-height: 44px;
      transition: background 0.2s;
    }
    .report-dl:hover { background: #1e2235; }

    @media (max-width: 1279px) { .reports-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 600px)  { .reports-grid { grid-template-columns: 1fr; } }
 /* ── 8. How It Works ──── */
    .process-track {
      position: relative;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 1.5rem;
    }
    .process-track::before {
      content: '';
      position: absolute;
      top: 2.25rem;
      left: 8%;
      right: 8%;
      height: 1px;
      background: #e4e7ef;
    }
    .process-track::after {
      content: '';
      position: absolute;
      top: 2.25rem;
      left: 8%;
      right: 8%;
      height: 1px;
      background: repeating-linear-gradient(to right, #EE2630 0, #EE2630 8px, transparent 8px, transparent 16px);
      opacity: 0.25;
    }
    .process-step { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .process-circle {
      width: 72px; height: 72px;
      border-radius: 50%;
      border: 2px solid #EE2630;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.25rem;
      position: relative;
      z-index: 1;
    }
    .process-num {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      color: #EE2630;
    }
    .process-step h3 {
      font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
      font-size: 0.875rem;
      font-weight: 700;
      color: #0f1218;
      margin-bottom: 0.5rem;
    }
    .process-step p { font-size: 0.75rem; color: var(--body); line-height: 1.6; }

    @media (max-width: 1023px) {
      .process-track { grid-template-columns: 1fr; gap: 0; }
      .process-track::before, .process-track::after { display: none; }
      .process-step { flex-direction: row; text-align: left; gap: 1.25rem; padding-bottom: 1.5rem; align-items: flex-start; }
      .process-step:not(:last-child) {
        padding-bottom: 1.5rem;
        border-left: 2px solid #e4e7ef;
        margin-left: 2.25rem;
        padding-left: 1.5rem;
      }
      .process-step:not(:last-child) .process-circle { margin-left: -2.875rem; }
      .process-circle { margin-bottom: 0; flex-shrink: 0; width: 48px; height: 48px; }
      .process-num { font-size: 0.65rem; }
    }

/* Testimonial */
.testimonial-themes {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 2.5rem;
    }
    .theme-pill {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 0.375rem 0.875rem;
      border-radius: 9999px;
      border: 1px solid rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.4);
    }
    .testimonial-featured {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 1rem;
      padding: clamp(2rem, 4vw, 3rem);
      margin-bottom: 1.5rem;
    }
    .stars { display: flex; gap: 0.2rem; margin-bottom: 1.25rem; }
    .testimonial-featured blockquote {
      font-family: Georgia, 'Times New Roman', serif;
      font-size: clamp(1.1rem, 2.5vw, 1.4rem);
      color: rgba(255,255,255,0.8);
      font-style: italic;
      line-height: 1.65;
      margin-bottom: 1.5rem;
    }
    .testimonial-featured .author { font-weight: 700; color: #fff; font-size: 0.875rem; }
    .testimonial-featured .theme-tag { color: #EE2630; font-size: 0.75rem; font-weight: 600; margin-top: 0.25rem; }
    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }
    .testimonial-card {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 0.75rem;
      padding: 1.5rem;
    }
    .testimonial-card blockquote {
      font-style: italic;
      color: rgba(255,255,255,0.6);
      font-size: 0.875rem;
      line-height: 1.7;
      margin: 1rem 0 1.25rem;
    }
    .testimonial-card .author { font-weight: 700; color: #fff; font-size: 0.75rem; }
    .testimonial-card .theme-tag { color: #EE2630; font-size: 0.68rem; font-weight: 600; margin-top: 0.2rem; }

    @media (max-width: 1023px) { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 600px)  { .testimonials-grid { grid-template-columns: 1fr; } }
/* Project Type */
.project-desc {
    background: #0F1218;
    padding: 1rem;
    color: #F1F1DB;
    font-size: 12px;
}

.project-desc h2 {
    font-size: 18px;
    color: #fff;
}
.projecttypes .project-type div:last-child {
    height: 100%;
}
.project-desc p {
    margin-bottom: .5rem;
}
.project-desc p:last-child {
    margin: 0;
}
@media (max-width: 600px)  {
.projecttypes .project-type div:last-child {height: auto;}
}

.pum-theme-1529, .pum-theme-default-theme {
    background-color: rgba(0, 0, 0, .5) !important;
}
.popmake {
    border-radius: 0.75rem !important;
}
button.pum-close.popmake-close {
    background: black !important;
    border-radius: 0 0.75rem 0 0.75rem !important;
    font-size: 10px !important;
    padding: 0 20px !important;
}
/* UK Estimates legal section */
.legal {
    background: #0f1218;
        border-bottom: 1px solid #EE2630;
    padding: 2.5rem 0;
}
.legal-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}
.legal-label::before {
    content: "";
    width: 32px;
    height: 2px;
    background: currentColor;
    flex: none;
}
.legal-links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.legal-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff !important;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.625rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    transition: background .2s, border-color .2s;
}
.legal-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff !important;
}

/* ── Home: accreditations band ───────────────────────────────────────────
   Goes in Appearance → Customize → Additional CSS, alongside the existing
   .report-card rules. The theme is not editable, so the styling lives here.

   Selectors are deliberately prefixed with .accred-card / .accreditations.
   Elementor's Global Kit sets colour on .elementor-widget-heading
   .elementor-heading-title (0,0,2,0) and on .elementor-widget-text-editor
   (0,0,1,0); prefixing takes each rule one class past it. Do not simplify
   them — the same redundancy section 22 of the theme stylesheet needs.      */

/* The strip the hero prints itself, hidden so the numbers can become their
   own reorderable section instead. Delete this line to put the built-in one
   back.

   Scoped to .hero deliberately. The standalone Statistics section renders the
   same .stats-strip markup, so a bare `.page-home .stats-strip` would hide
   that one too and the section would look like it had failed to import. */
.page-home .hero .stats-strip { display: none; }

.accreditations__eyebrow .elementor-heading-title {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);   /* 7.08:1 on #17181C */
  margin: 0 0 .25rem;
}

.accreditations__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.accred-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: .75rem;
  padding: 1.25rem;
  height: 100%;                      /* equal height, so the links line up */
}

/* The white tile the logo sits on. */
.accred-card__logo {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  background: #fff;
  border-radius: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.accred-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.accred-card__body { flex: 1 1 auto; min-width: 0; }

.accred-card .elementor-widget-heading .elementor-heading-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  margin: 0;
}

.accred-card .elementor-widget-text-editor {
  font-size: .8125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .62);   /* 7.08:1 on the card ground */
}
.accred-card .elementor-widget-text-editor p { margin: 0; }

/* Not the theme's .btn — that styles Elementor's wrapper and leaves the
   inner <a> on the kit's own button styling, which is the trap recorded at
   section 20. Styling the inner element directly avoids it. */
.accred-card .elementor-button {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: .8125rem;
  font-weight: 700;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 0;
}
.accred-card .elementor-button:hover { color: rgba(255, 255, 255, .72); }
.accred-card .elementor-button-content-wrapper { justify-content: flex-start; }

/* ── The certificate popup ───────────────────────────────────────────────
   The certificates are PDFs, so the popup embeds one rather than showing an
   image. A4 aspect ratio keeps the frame the shape of the document instead
   of guessing a height. */
.ukg-cert-title { margin: 0 0 1rem; font-size: 1.25rem; }

.ukg-cert-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.414;
  /* A full A4 frame is taller than most viewports, so the popup would scroll
     the whole page. Clamp it and let the PDF viewer scroll inside instead. */
  max-height: 72vh;
  background: #f8f9fc;
  border: 1px solid var(--c-line, #e4e7ef);
  border-radius: .5rem;
  overflow: hidden;
}
.ukg-cert-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.ukg-cert-fallback { margin: .75rem 0 0; font-size: .875rem; text-align: center; }

/* Mobile browsers commonly refuse to render a PDF in an iframe and leave a
   blank box, which reads as broken. Below 640px the frame is dropped and the
   link is promoted to a button instead. */
@media (max-width: 640px) {
  .ukg-cert-frame { display: none; }
  .ukg-cert-fallback a {
    display: block;
    padding: .75rem 1rem;
    background: var(--c-red-solid, #D81F28);
    color: #fff;
    border-radius: .5rem;
    font-weight: 700;
    text-decoration: none;
  }
}

@media (max-width: 1024px) {
  .accreditations__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .accreditations__grid { grid-template-columns: 1fr; }
}

.stats-strip {display : none;}

.divElite {
    color: #4a4f6a;
    font-size: .875rem;
    text-align: center;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);
    padding: 1rem;
	border: solid 1px #d5e4ec
}

.divElite img {height: .25rem;margin: 0 auto .25rem;width: auto;}
.btn-elite {
	background: #1B5875;
	transform: translateY(-2px);
    box-shadow: var(--sh-red);}
.btn-elite:hover {
    --btn-bg: var(--c-ink-mid);
    transform: translateY(-2px);
}