/* =========================================================
   THINKPAC BLOG STYLESHEET — v2.4
   Part of universal-2026.css

   v2.4  linked cards keep their styling when the theme
         restyles plain <a> elements
   v2.3  removed the tp-modal-* rules — the popup is now
         written with inline styles and needs no stylesheet
   v2.2  image cards (.tp-photo-*)
   v2.1  comparison table (.tp-table-*)
   v2.0  popup / modal — superseded by v2.3
   v1.9  .tp-btn-outline-green and .tp-popup-trigger
   v1.8  card grid (.tp-card-*) — steps, options, features
   v1.7  stat band (.tp-stat-*)
   v1.6  text alignment (.tp-align-*), trust stat badges and
         the trust bar column control. Trust bar is now a grid.
   v1.5  video embed (.tp-video-*)
   v1.4  bullet lists inside body copy (.tp-list-body)
   v1.3  hero image beside the copy (.tp-hero-split),
         .tp-eyebrow-white, .tp-btn-row
   v1.2  trust / certification bar (.tp-trust-*)
   v1.1  .tp-grid-image-left (image left, desktop only)
   v1.0  original PIDA award blog styles

   Generated by Section Generator | WP-Bakery - Code by JCR
   ========================================================= */

/* =========================================================
   THINKPAC PIDA AWARD BLOG — RESPONSIVE VERSION
   ========================================================= */

.tp-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  font-family: "Poppins", Arial, sans-serif;
  color: #343444;
  line-height: 1.7;
  font-size: 16px;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Keep all images inside their containers */
.tp-wrapper img {
  max-width: 100%;
}

/* =========================================================
   SECTION CONTAINERS
   ========================================================= */

.tp-section-white {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 22px;
  margin: 34px 0;
  border: 1px solid #dceee9;
  box-shadow: 0 10px 28px rgba(16, 101, 82, 0.08);
}

.tp-section-green {
  width: 100%;
  box-sizing: border-box;
  background: #0f6553;
  color: #ffffff;
  border-radius: 22px;
  padding: 36px 30px;
  margin: 34px 0;
  box-shadow: 0 12px 30px rgba(15, 101, 83, 0.18);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tp-pad-hero {
  padding: 30px;
}

.tp-pad-std {
  padding: 36px 30px;
}

.tp-pad-center {
  padding: 40px 30px;
  text-align: center;
}

.tp-content-pad {
  padding: 0 10px;
}

/* =========================================================
   RESPONSIVE HERO IMAGE
   ========================================================= */

.tp-hero-wrap {
  width: 100%;
  margin-bottom: 30px;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(16, 101, 82, 0.14);
  background: #f1fbf8;
}

.tp-hero-img {
  width: 100%;
  height: auto;
  max-height: 650px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.tp-hero-img-cover {
  height: clamp(260px, 52vw, 650px);
  object-fit: cover;
  object-position: center;
}

/* =========================================================
   CONTENT GRID
   ========================================================= */

.tp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  margin-bottom: 18px;
}

@media (min-width: 768px) {
  .tp-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
  }
}

.tp-grid > * {
  min-width: 0;
}

/*
  Image on the left, text on the right.
  Add to the grid container: class="tp-grid tp-grid-image-left"

  The markup order stays text-then-image, so screen readers and
  phones still read the copy first. Only the desktop columns swap,
  and the text keeps the wider 1.6fr share.
*/
@media (min-width: 768px) {
  .tp-grid-image-left {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  }

  .tp-grid-image-left > *:first-child {
    order: 2;
  }
}

.tp-grid-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(16, 101, 82, 0.12);
}

/* =========================================================
   TRUST / CERTIFICATION BAR
   ========================================================= */

.tp-trust-section {
  text-align: center;
}

.tp-trust-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  align-items: stretch;
  gap: 14px;
}

.tp-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  flex: 0 1 auto;
  min-height: 96px;
  padding: 18px 22px;
  background: #fafcfb;
  border: 1px solid #dceee9;
  border-radius: 16px;
  text-align: center;
}

a.tp-trust-item {
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

a.tp-trust-item:hover {
  border-color: #288f7a;
  box-shadow: 0 8px 22px rgba(16, 101, 82, 0.08);
  transform: translateY(-1px);
}

a.tp-trust-item:focus-visible {
  outline: 3px solid rgba(40, 143, 122, 0.3);
  outline-offset: 3px;
}

.tp-trust-logo {
  display: block;
  width: auto;
  height: 52px;
  max-width: 190px;
  object-fit: contain;
}

.tp-trust-text {
  color: #0f6553;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.tp-trust-caption {
  color: #343444;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.tp-trust-note {
  margin: 20px 0 0;
  color: #343444;
  font-size: 14px;
  line-height: 1.6;
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.tp-eyebrow {
  margin: 0 0 10px;
  color: #288f7a;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tp-h1 {
  margin: 0 0 18px;
  color: #0f6553;
  font-size: clamp(29px, 5vw, 48px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
}

.tp-h2 {
  margin: 0 0 18px;
  color: #288f7a;
  font-size: clamp(25px, 4vw, 36px);
  line-height: 1.2;
  font-weight: 700;
  overflow-wrap: break-word;
}

.tp-h2-sm {
  margin: 0 0 18px;
  color: #288f7a;
  font-size: clamp(23px, 3.5vw, 32px);
  line-height: 1.2;
  font-weight: 700;
  overflow-wrap: break-word;
}

.tp-h2-lg {
  margin: 0 0 18px;
  color: #288f7a;
  font-size: clamp(27px, 4vw, 40px);
  line-height: 1.2;
  font-weight: 700;
  overflow-wrap: break-word;
}

.tp-h2-white {
  margin: 0 0 18px;
  color: #ffffff;
  font-size: clamp(25px, 4vw, 36px);
  line-height: 1.2;
  font-weight: 700;
  overflow-wrap: break-word;
}

.tp-h3 {
  margin: 0 0 12px;
  color: #0f6553;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  overflow-wrap: break-word;
}

.tp-p {
  margin: 0 0 18px;
  font-size: 16px;
}

.tp-p-lg {
  margin: 0 0 24px;
  font-size: 16px;
}

.tp-p-nomargin {
  margin: 0;
  font-size: 16px;
}

.tp-p-white {
  margin: 0 0 24px;
  color: #ffffff;
  font-size: 16px;
}

.tp-p-center {
  margin: 0 auto 18px;
  max-width: 800px;
  font-size: 16px;
}

.tp-p-center-lg {
  margin: 0 auto 32px;
  max-width: 800px;
  font-size: 16px;
}

/* =========================================================
   TEXT LINKS
   ========================================================= */

.tp-text-link {
  color: #0f6553;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  transition:
    color 0.2s ease,
    text-decoration-thickness 0.2s ease;
}

.tp-text-link:hover {
  color: #288f7a;
  text-decoration-thickness: 2px;
}

.tp-text-link:focus-visible {
  outline: 3px solid rgba(40, 143, 122, 0.3);
  outline-offset: 3px;
  border-radius: 3px;
}

/* =========================================================
   CALLOUT BOXES
   ========================================================= */

.tp-takeaways-box {
  box-sizing: border-box;
  background: #fafcfb;
  border: 2px dashed #288f7a;
  border-radius: 16px;
  padding: 22px;
  margin: 0 0 18px;
}

.tp-quote-box {
  box-sizing: border-box;
  background: #f1fbf8;
  border-left: 6px solid #288f7a;
  border-radius: 16px;
  padding: 26px;
  margin: 32px 0;
}

.tp-quote-text {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f6553;
  font-style: italic;
  line-height: 1.6;
}

.tp-quote-attribution {
  margin: 14px 0 0;
  color: #0f6553;
  font-size: 14px;
  font-weight: 700;
  font-style: normal;
}

/* =========================================================
   LISTS
   ========================================================= */

.tp-list {
  margin: 0;
  padding-left: 20px;
  color: #343444;
  font-size: 16px;
}

.tp-list li {
  margin-bottom: 8px;
}

.tp-list li:last-child {
  margin-bottom: 0;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.tp-btn-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.tp-btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.tp-btn-green,
.tp-btn-white,
.tp-btn-outline-green,
.tp-btn-outline-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  text-align: center;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.tp-btn-green {
  background: #0f6553;
  color: #ffffff;
}

.tp-btn-green:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.tp-btn-white {
  background: #ffffff;
  color: #0f6553;
}

.tp-btn-white:hover {
  background: #f1fbf8;
  transform: translateY(-1px);
}

.tp-btn-outline-white {
  background: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.tp-btn-outline-white:hover {
  background: #ffffff;
  color: #0f6553;
  transform: translateY(-1px);
}

.tp-btn-outline-green {
  background: #ffffff;
  color: #0f6553;
  border: 2px solid #0f6553;
}

.tp-btn-outline-green:hover {
  background: #f1fbf8;
  transform: translateY(-1px);
}

/* Buttons that open a popup carry no real href */
.tp-popup-trigger {
  cursor: pointer;
}

.tp-btn-green:focus-visible,
.tp-btn-white:focus-visible,
.tp-btn-outline-green:focus-visible,
.tp-btn-outline-white:focus-visible {
  outline: 3px solid rgba(40, 143, 122, 0.35);
  outline-offset: 3px;
}

/* =========================================================
   AEO FAQ ACCORDION
   ========================================================= */

.tp-faq-section {
  scroll-margin-top: 100px;
}

.tp-accordion {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tp-accordion-item {
  background: #fafcfb;
  border: 1px solid #dceee9;
  border-radius: 16px;
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.tp-accordion-item:hover,
.tp-accordion-item[open] {
  border-color: #288f7a;
  box-shadow: 0 8px 22px rgba(16, 101, 82, 0.08);
}

.tp-accordion-title {
  position: relative;
  padding: 20px 56px 20px 22px;
  color: #0f6553;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  overflow-wrap: break-word;
}

.tp-accordion-title::-webkit-details-marker {
  display: none;
}

.tp-accordion-title::marker {
  content: "";
}

.tp-accordion-title::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 22px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1fbf8;
  border-radius: 50%;
  color: #0f6553;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-50%);
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.tp-accordion-item[open] .tp-accordion-title::after {
  content: "\\2212";
  background: #0f6553;
  color: #ffffff;
}

.tp-accordion-content {
  padding: 0 22px 20px;
  color: #343444;
}

.tp-accordion-content p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
}

.tp-accordion-title:focus-visible {
  outline: 3px solid rgba(40, 143, 122, 0.3);
  outline-offset: -3px;
  border-radius: 14px;
}

/* =========================================================
   TABLET ADJUSTMENTS
   ========================================================= */

@media (max-width: 1024px) {
  .tp-section-white,
  .tp-section-green {
    margin: 28px 0;
  }

  .tp-pad-hero {
    padding: 26px;
  }

  .tp-pad-std,
  .tp-pad-center,
  .tp-section-green {
    padding: 32px 26px;
  }

  .tp-hero-wrap {
    margin-bottom: 26px;
  }

  .tp-hero-img {
    max-height: 520px;
  }
}

/* =========================================================
   MOBILE ADJUSTMENTS
   ========================================================= */

@media (max-width: 767px) {
  .tp-wrapper {
    font-size: 16px;
    line-height: 1.65;
  }

  .tp-section-white,
  .tp-section-green {
    margin: 22px 0;
    border-radius: 16px;
  }

  .tp-pad-hero,
  .tp-pad-std,
  .tp-pad-center,
  .tp-section-green {
    padding: 22px 16px;
  }

  .tp-content-pad {
    padding: 0;
  }

  .tp-hero-wrap {
    margin-bottom: 22px;
    border-radius: 14px;
  }

  .tp-hero-img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }

  .tp-hero-img-cover {
    height: clamp(220px, 68vw, 340px);
    object-fit: cover;
  }

  .tp-grid {
    gap: 22px;
  }

  .tp-grid-img {
    border-radius: 16px;
  }

  .tp-trust-bar {
    grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
    gap: 10px;
  }

  .tp-trust-item {
    flex: 1 1 138px;
    min-height: auto;
    padding: 14px 12px;
    gap: 8px;
    border-radius: 14px;
  }

  .tp-trust-logo {
    height: 40px;
    max-width: 130px;
  }

  .tp-trust-text {
    font-size: 15px;
  }

  .tp-trust-caption {
    font-size: 12px;
  }

  .tp-h1 {
    font-size: clamp(28px, 8vw, 36px);
    line-height: 1.18;
    letter-spacing: -0.02em;
  }

  .tp-h2 {
    font-size: clamp(24px, 7vw, 30px);
  }

  .tp-h2-sm {
    font-size: clamp(22px, 6.5vw, 28px);
  }

  .tp-h2-lg,
  .tp-h2-white {
    font-size: clamp(25px, 7vw, 31px);
  }

  .tp-takeaways-box {
    padding: 18px 16px;
    border-radius: 14px;
  }

  .tp-quote-box {
    padding: 20px 16px;
    margin: 24px 0;
    border-left-width: 5px;
    border-radius: 14px;
  }

  .tp-list {
    padding-left: 18px;
  }

  .tp-accordion {
    gap: 12px;
  }

  .tp-accordion-item {
    border-radius: 14px;
  }

  .tp-accordion-title {
    padding: 18px 52px 18px 16px;
    font-size: 16px;
  }

  .tp-accordion-title::after {
    right: 14px;
    width: 28px;
    height: 28px;
    font-size: 22px;
  }

  .tp-accordion-content {
    padding: 0 16px 18px;
  }

  .tp-btn-wrap,
  .tp-btn-group {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .tp-btn-green,
  .tp-btn-white,
  .tp-btn-outline-green,
  .tp-btn-outline-white {
    width: 100%;
    padding: 13px 18px;
  }
}

/* =========================================================
   SMALL MOBILE ADJUSTMENTS
   ========================================================= */

@media (max-width: 420px) {
  .tp-pad-hero,
  .tp-pad-std,
  .tp-pad-center,
  .tp-section-green {
    padding: 20px 14px;
  }

  .tp-h1 {
    font-size: 27px;
  }

  .tp-h2 {
    font-size: 24px;
  }

  .tp-h2-sm {
    font-size: 22px;
  }

  .tp-eyebrow {
    font-size: 12px;
  }
}

/* =========================================================
   FOUNDER INTRO
   ========================================================= */

.tp-founder-intro{
    display:grid;
    grid-template-columns:240px 1fr;
    gap:30px;
    align-items:start;
    margin:24px 0 32px;
}

.tp-founder-image img{
    width:100%;
    display:block;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(15,101,83,.12);
}

.tp-founder-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.tp-founder-text p:last-child{
    margin-bottom:0;
}

/* Tablet */

@media (max-width:900px){

.tp-founder-intro{
    grid-template-columns:180px 1fr;
    gap:20px;
}

}

/* Mobile */

@media (max-width:767px){

.tp-founder-intro{
    grid-template-columns:1fr;
    text-align:center;
}

.tp-founder-image{
    max-width:240px;
    margin:0 auto;
}

.tp-founder-text{
    text-align:left;
}

}
/* =========================================================
   FOUNDER LAYOUT
   ========================================================= */

.tp-founder-layout{
    display:grid;
    grid-template-columns:680px 1fr;
    gap:34px;
    align-items:start;
    margin:24px 0 0;
}

.tp-founder-image img{
    width:100%;
    display:block;
    border-radius:18px;
    box-shadow:0 10px 28px rgba(15,101,83,.15);
}

.tp-founder-content{
    min-width:0;
}

.tp-founder-content .tp-quote-box:last-child{
    margin-bottom:0;
}

/* Hide the mobile image on desktop */
.tp-founder-image-mobile{
    display:none;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:900px){

.tp-founder-layout{
    grid-template-columns:180px 1fr;
    gap:24px;
}

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:767px){

/* Show image before the heading */
.tp-founder-image-mobile{
    display:block;
    max-width:260px;
    margin:0 auto 20px;
}

.tp-founder-image-mobile img{
    width:100%;
    display:block;
    border-radius:18px;
    box-shadow:0 10px 28px rgba(15,101,83,.15);
}

/* Hide desktop image */
.tp-founder-image{
    display:none;
}

/* Single column for content */
.tp-founder-layout{
    display:block;
}

.tp-founder-content{
    margin-top:20px;
}

}

/* =========================================================
   HERO — IMAGE BESIDE THE COPY  (CSS v1.3)
   Markup order is image-then-copy, so a phone shows the image
   first, exactly like the stacked hero. Only desktop splits
   into columns, and only the right variant swaps the order.
   ========================================================= */

.tp-hero-split{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:28px;
    align-items:center;
}

.tp-hero-split > *{
    min-width:0;
}

.tp-hero-split .tp-hero-wrap{
    margin-bottom:0;
}

.tp-hero-split .tp-hero-img{
    max-height:none;
    object-fit:cover;
}

.tp-hero-split .tp-hero-img-cover{
    height:clamp(240px,38vw,460px);
    object-fit:cover;
}

@media (min-width:768px){

.tp-hero-split{
    grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
}

/* Image on the right: keep the copy in the wider first column */
.tp-hero-split-right{
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
}

.tp-hero-split-right > *:first-child{
    order:2;
}

}

@media (max-width:767px){

.tp-hero-split{
    gap:22px;
}

.tp-hero-split .tp-hero-img{
    object-fit:contain;
}

.tp-hero-split .tp-hero-img-cover{
    height:clamp(220px,68vw,340px);
    object-fit:cover;
}

}

/* =========================================================
   EYEBROW ON A GREEN BAND  (CSS v1.3)
   ========================================================= */

.tp-eyebrow-white{
    margin:0 0 10px;
    color:rgba(255,255,255,.8);
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.08em;
}

@media (max-width:420px){

.tp-eyebrow-white{
    font-size:12px;
}

}

/* =========================================================
   SECTION BUTTON ROW  (CSS v1.3)
   Spacing for a button placed at the end of any section.
   ========================================================= */

.tp-btn-row{
    margin-top:24px;
}

.tp-section-green .tp-btn-row{
    margin-top:8px;
}

/* =========================================================
   BULLET LIST INSIDE BODY COPY  (CSS v1.4)
   Written as "- item" lines in any body field.
   ========================================================= */

.tp-list-body{
    margin:0 0 18px;
}

.tp-list-body:last-child{
    margin-bottom:0;
}

.tp-section-green .tp-list{
    color:#ffffff;
}

/* =========================================================
   VIDEO EMBED  (CSS v1.5)
   The wrapper holds the ratio, the iframe fills it. No
   padding-bottom hack and no inline styles needed.
   ========================================================= */

.tp-video-section{
    text-align:center;
}

.tp-video-wrap{
    position:relative;
    width:100%;
    aspect-ratio:16 / 9;
    overflow:hidden;
    border-radius:16px;
    background:#f1fbf8;
    box-shadow:0 8px 24px rgba(16,101,82,.12);
}

.tp-video-wrap-4x3{
    aspect-ratio:4 / 3;
}

.tp-video-wrap-1x1{
    aspect-ratio:1 / 1;
    max-width:640px;
    margin-left:auto;
    margin-right:auto;
}

/* Shorts and Reels — keep it from filling the whole column */
.tp-video-wrap-9x16{
    aspect-ratio:9 / 16;
    max-width:420px;
    margin-left:auto;
    margin-right:auto;
}

.tp-video-frame{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    display:block;
}

.tp-video-caption{
    margin:14px 0 0;
    color:#343444;
    font-size:14px;
    line-height:1.6;
}

@media (max-width:767px){

.tp-video-wrap{
    border-radius:14px;
}

.tp-video-wrap-9x16{
    max-width:320px;
}

}

/* =========================================================
   TRUST BAR — STAT BADGES + COLUMN CONTROL  (CSS v1.6)
   A badge can be a logo, plain text, or a big figure with a
   caption under it. The bar is a grid, so badges shrink to
   fit the row instead of dropping to the next one.
   ========================================================= */

.tp-trust-item-stat{
    background:#f1fbf8;
}

.tp-trust-stat{
    margin:0 0 8px;
    color:#0f6553;
    font-size:clamp(24px,3.2vw,30px);
    line-height:1;
    font-weight:700;
}

.tp-trust-sub{
    margin:0;
    color:#343444;
    font-size:15px;
    font-weight:700;
    line-height:1.4;
}

@media (min-width:768px){

.tp-trust-cols-3 .tp-trust-bar{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.tp-trust-cols-4 .tp-trust-bar{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.tp-trust-cols-5 .tp-trust-bar{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.tp-trust-cols-6 .tp-trust-bar{ grid-template-columns:repeat(6,minmax(0,1fr)); }

}

@media (max-width:767px){

.tp-trust-stat{
    font-size:24px;
}

.tp-trust-sub{
    font-size:13px;
}

}

/* =========================================================
   STAT BAND  (CSS v1.7)
   Big figures in cards. Green band by default, or a white
   card with mint tiles. The grid shrinks to one column on a
   phone whatever the desktop column count is.
   ========================================================= */

.tp-stat-section{
    align-items:stretch;
    text-align:center;
}

.tp-stat-section .tp-h2-white,
.tp-stat-section .tp-h2{
    font-size:clamp(27px,4vw,42px);
}

.tp-stat-section .tp-p,
.tp-stat-section .tp-p-lg,
.tp-stat-section .tp-p-white{
    font-size:17px;
}

.tp-stat-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    align-items:stretch;
    gap:20px;
}

.tp-stat-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:8px;
    box-sizing:border-box;
    padding:28px 22px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.2);
    border-radius:16px;
    text-align:center;
}

a.tp-stat-card{
    text-decoration:none;
    transition:
      background 0.2s ease,
      border-color 0.2s ease,
      transform 0.2s ease;
}

a.tp-stat-card:hover{
    background:rgba(255,255,255,.18);
    border-color:rgba(255,255,255,.4);
    transform:translateY(-1px);
}

a.tp-stat-card:focus-visible{
    outline:3px solid rgba(255,255,255,.6);
    outline-offset:3px;
}

.tp-stat-value{
    margin:0;
    color:#ffffff;
    font-size:clamp(28px,4.2vw,40px);
    line-height:1;
    font-weight:700;
}

.tp-stat-label{
    margin:0;
    color:#ffffff;
    font-size:17px;
    font-weight:700;
    line-height:1.4;
}

/* White card variant */
.tp-stat-light .tp-stat-card{
    background:#f1fbf8;
    border-color:#dceee9;
}

.tp-stat-light a.tp-stat-card:hover{
    background:#e6f6f1;
    border-color:#288f7a;
}

.tp-stat-light a.tp-stat-card:focus-visible{
    outline-color:rgba(40,143,122,.35);
}

.tp-stat-light .tp-stat-value{
    color:#0f6553;
}

.tp-stat-light .tp-stat-label{
    color:#343444;
}

@media (min-width:768px){

.tp-stat-cols-2 .tp-stat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.tp-stat-cols-3 .tp-stat-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.tp-stat-cols-4 .tp-stat-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }

}

@media (max-width:767px){

.tp-stat-grid{
    grid-template-columns:minmax(0,1fr);
    gap:14px;
}

.tp-stat-card{
    padding:22px 16px;
}

.tp-stat-value{
    font-size:30px;
}

.tp-stat-label{
    font-size:15px;
}

}

/* =========================================================
   CARD GRID  (CSS v1.8)
   Steps, options, features. Cards keep their copy left
   aligned whatever the section alignment is, stretch to
   equal height, and drop to one column on a phone.
   ========================================================= */

.tp-card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    align-items:stretch;
    gap:16px;
}

.tp-card{
    box-sizing:border-box;
    padding:22px;
    background:#f1fbf8;
    border:1px solid #dceee9;
    border-radius:16px;
    text-align:left;
}

a.tp-card{
    display:block;
    color:#343444;
    text-decoration:none;
    transition:
      border-color 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease;
}

a.tp-card:hover{
    border-color:#288f7a;
    box-shadow:0 8px 22px rgba(16,101,82,.08);
    transform:translateY(-1px);
}

a.tp-card:focus-visible{
    outline:3px solid rgba(40,143,122,.3);
    outline-offset:3px;
}

.tp-card-title{
    margin:0 0 10px;
    color:#0f6553;
    font-size:22px;
    line-height:1.3;
    font-weight:700;
    overflow-wrap:break-word;
}

@media (min-width:768px){

.tp-card-cols-2 .tp-card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.tp-card-cols-3 .tp-card-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.tp-card-cols-4 .tp-card-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }

}

@media (max-width:767px){

.tp-card-grid{
    grid-template-columns:minmax(0,1fr);
    gap:12px;
}

.tp-card{
    padding:18px 16px;
}

.tp-card-title{
    font-size:20px;
}

}

/* =========================================================
   IMAGE CARDS  (CSS v2.2)
   Picture on top, label underneath. The aspect ratio is set
   on the wrapper, so every tile crops to the same shape no
   matter what the source images are.
   ========================================================= */

.tp-photo-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    align-items:stretch;
    gap:16px;
}

.tp-photo-card{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:#ffffff;
    border:1px solid #dceee9;
    border-radius:16px;
    box-shadow:0 8px 24px rgba(16,101,82,.08);
}

a.tp-photo-card{
    color:#343444;
    text-decoration:none;
    transition:
      border-color 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease;
}

a.tp-photo-card:hover{
    border-color:#288f7a;
    box-shadow:0 12px 28px rgba(16,101,82,.16);
    transform:translateY(-2px);
}

a.tp-photo-card:focus-visible{
    outline:3px solid rgba(40,143,122,.3);
    outline-offset:3px;
}

.tp-photo-img{
    display:block;
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:cover;
    object-position:center;
}

.tp-photo-4x3 .tp-photo-img{ aspect-ratio:4 / 3; }
.tp-photo-16x9 .tp-photo-img{ aspect-ratio:16 / 9; }
.tp-photo-3x4 .tp-photo-img{ aspect-ratio:3 / 4; }

.tp-photo-body{
    padding:22px;
}

.tp-photo-title{
    margin:0;
    color:#0f6553;
    font-size:20px;
    line-height:1.3;
    font-weight:700;
    overflow-wrap:break-word;
}

.tp-photo-text{
    margin:10px 0 0;
    color:#343444;
    font-size:15px;
    line-height:1.6;
}

@media (min-width:768px){

.tp-photo-cols-2 .tp-photo-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.tp-photo-cols-3 .tp-photo-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.tp-photo-cols-4 .tp-photo-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.tp-photo-cols-5 .tp-photo-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); }

}

@media (max-width:767px){

.tp-photo-grid{
    grid-template-columns:repeat(auto-fit,minmax(144px,1fr));
    gap:12px;
}

.tp-photo-card{
    border-radius:14px;
}

.tp-photo-body{
    padding:14px 12px;
}

.tp-photo-title{
    font-size:16px;
}

.tp-photo-text{
    margin-top:6px;
    font-size:13px;
}

}

/* =========================================================
   COMPARISON TABLE  (CSS v2.1)
   The wrapper scrolls sideways on a narrow screen rather than
   squashing the columns. Minimum width follows the column
   count, so a small table never scrolls needlessly.
   ========================================================= */

.tp-table-wrap{
    margin-top:24px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border:1px solid #dceee9;
    border-radius:12px;
}

.tp-table{
    width:100%;
    border-collapse:collapse;
    text-align:left;
    font-size:16px;
    color:#343444;
}

.tp-table-c3{ min-width:520px; }
.tp-table-c4{ min-width:700px; }
.tp-table-c5{ min-width:860px; }
.tp-table-c6{ min-width:1020px; }

.tp-table thead th{
    padding:16px 20px;
    background:#f1fbf8;
    color:#0f6553;
    font-size:16px;
    font-weight:700;
    border-bottom:1px solid #dceee9;
}

.tp-table td,
.tp-table tbody th{
    padding:16px 20px;
    border-bottom:1px solid #dceee9;
    vertical-align:top;
}

.tp-table tbody th{
    color:#343444;
    font-weight:700;
    text-align:left;
}

.tp-table tbody tr:last-child td,
.tp-table tbody tr:last-child th{
    border-bottom:0;
}

.tp-table-hl{
    color:#288f7a;
    font-weight:700;
}

@media (max-width:767px){

.tp-table-wrap{
    border-radius:10px;
}

.tp-table{
    font-size:15px;
}

.tp-table-c3{ min-width:460px; }
.tp-table-c4{ min-width:580px; }
.tp-table-c5{ min-width:700px; }
.tp-table-c6{ min-width:820px; }

.tp-table thead th,
.tp-table td,
.tp-table tbody th{
    padding:12px 14px;
}

}

/* =========================================================
   TEXT ALIGNMENT  (CSS v1.6)
   Goes on the section. Keep this block LAST — it has to beat
   tp-pad-center, tp-trust-section and tp-video-section, which
   have the same specificity.
   ========================================================= */

.tp-align-left{ text-align:left; }
.tp-align-center{ text-align:center; }
.tp-align-right{ text-align:right; }

.tp-align-justify{
    text-align:justify;
    text-justify:inter-word;
    hyphens:auto;
}

/* Lists and badges stay readable whatever the section does */
.tp-align-justify .tp-list,
.tp-align-center .tp-list,
.tp-align-right .tp-list{
    text-align:left;
}

/* Centred paragraphs are a centred block — release the side
   margin so left and right alignment actually move them */
.tp-align-left .tp-p-center,
.tp-align-left .tp-p-center-lg{
    margin-left:0;
}

.tp-align-right .tp-p-center,
.tp-align-right .tp-p-center-lg{
    margin-right:0;
}

/* Buttons are flex rows, so text-align does not reach them */
.tp-align-left .tp-btn-wrap{ justify-content:flex-start; }
.tp-align-center .tp-btn-group{ justify-content:center; }
.tp-align-right .tp-btn-group{ justify-content:flex-end; }

/* The green band is a flex column pinned to the start */
.tp-section-green.tp-align-center,
.tp-section-green.tp-align-right,
.tp-section-green.tp-align-justify{
    align-items:stretch;
}

/* =========================================================
   LINKED CARDS — THEME OVERRIDE GUARD  (CSS v2.4)
   A card with a link is an <a>, and theme stylesheets restyle
   plain anchors: background, colour, display, padding. Adding
   :link and :visited raises specificity enough to win without
   reaching for !important. Keep this block last.
   ========================================================= */

.tp-trust-bar > *,
.tp-stat-grid > *,
.tp-card-grid > *,
.tp-photo-grid > *{
    min-width:0;
}

a.tp-trust-item:link,
a.tp-trust-item:visited{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:18px 22px;
    background:#fafcfb;
    border:1px solid #dceee9;
    border-radius:16px;
    color:#0f6553;
    text-align:center;
    text-decoration:none;
}

a.tp-trust-item-stat:link,
a.tp-trust-item-stat:visited{
    background:#f1fbf8;
}

a.tp-card:link,
a.tp-card:visited{
    display:block;
    padding:22px;
    background:#f1fbf8;
    border:1px solid #dceee9;
    border-radius:16px;
    color:#343444;
    text-align:left;
    text-decoration:none;
}

a.tp-stat-card:link,
a.tp-stat-card:visited{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:8px;
    padding:28px 22px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.2);
    border-radius:16px;
    text-align:center;
    text-decoration:none;
}

.tp-stat-light a.tp-stat-card:link,
.tp-stat-light a.tp-stat-card:visited{
    background:#f1fbf8;
    border-color:#dceee9;
}

a.tp-photo-card:link,
a.tp-photo-card:visited{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding:0;
    background:#ffffff;
    border:1px solid #dceee9;
    border-radius:16px;
    color:#343444;
    text-decoration:none;
}

/* Headings inside a linked card keep their own colour, not the
   theme's link colour */
a.tp-trust-item .tp-trust-stat,
a.tp-trust-item .tp-trust-text{ color:#0f6553; }
a.tp-trust-item .tp-trust-caption,
a.tp-trust-item .tp-trust-sub{ color:#343444; }
a.tp-card .tp-card-title{ color:#0f6553; }
a.tp-photo-card .tp-photo-title{ color:#0f6553; }
a.tp-photo-card .tp-photo-text{ color:#343444; }
a.tp-stat-card .tp-stat-value,
a.tp-stat-card .tp-stat-label{ color:#ffffff; }
.tp-stat-light a.tp-stat-card .tp-stat-value{ color:#0f6553; }
.tp-stat-light a.tp-stat-card .tp-stat-label{ color:#343444; }

@media (max-width:767px){

a.tp-trust-item:link,
a.tp-trust-item:visited{
    padding:14px 12px;
    gap:8px;
    border-radius:14px;
}

a.tp-card:link,
a.tp-card:visited{
    padding:18px 16px;
}

a.tp-stat-card:link,
a.tp-stat-card:visited{
    padding:22px 16px;
}

a.tp-photo-card:link,
a.tp-photo-card:visited{
    border-radius:14px;
}

}