/* CLA Global brand CSS custom properties (used throughout claglobal.css / cla-style.css / cla-memberuplift.css) */
:root, body {
    --wp--preset--color--cla-primary: #2D3C59;
    --wp--preset--color--cla-secondary: #7DD2D3;
    --wp--preset--color--cla-dark: #393939;
    --wp--preset--color--cla-off-white: #F7F7F6;
    --wp--preset--color--cla-dark-blue: #2E334E;
    --wp--preset--color--cla-dark-grey: #ABAEAB;
    --wp--preset--color--cla-black: #000000;
    --wp--preset--color--cla-blue-tint: #F3FBFB;
    --wp--preset--color--cla-blue-tint-strong: #DCF3F3;
    --wp--preset--color--cla-white: #ffffff;
    --wp--preset--color--cla-riptide: #39A5A7;
    --wp--preset--color--cla-riptide-2: #2A787A;
    --wp--preset--color--cla-riptide-3: #DCF3F3;
    --wp--preset--spacing--50: 1.5rem;
    --wp--preset--spacing--80: 5.06rem;
    --wp--style--global--content-size: 1140px;
    --wp--style--global--wide-size: 1140px;
}

/* WP block layout fallbacks (no WP runtime present in static export) */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto !important;
    margin-right: auto !important;
}
.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }
.is-layout-flex { display: flex; flex-wrap: wrap; align-items: center; }
.wp-block-buttons { display: flex; justify-content: center; }

/* Language toggle */
html[data-lang="bg"] [data-lang-content="en"] { display: none !important; }
html[data-lang="en"] [data-lang-content="bg"] { display: none !important; }

.lang-switch { display: flex; align-items: center; gap: 6px; margin-right: 8px; font-family: "Museo Sans"; font-size: 14px; }
.lang-switch .lang-sep { color: #abaeab; }
.lang-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 2px;
    font-family: "Museo Sans";
    font-size: 14px;
    font-weight: 400;
    color: #abaeab;
}
html[data-lang="bg"] .lang-btn[data-set-lang="bg"],
html[data-lang="en"] .lang-btn[data-set-lang="en"] {
    color: #2e334e;
    font-weight: 700;
    text-decoration: underline;
}

/* Logo sizing */
.footer__logo img { height: 32px; width: auto; }

/* Force the hero video to stay visible on mobile — claglobal.css hides it
   below 768px in favor of a static .hero-video-image fallback we don't use.
   (.hero-group__inner already has min-height:400px !important from
   cla-memberuplift.css, so the video has room to render at every size.) */
.hero-video { display: block !important; }

/* Hero circulating photos (admin-uploaded, replace the default video). Stacked
   absolutely and crossfaded via .is-active (assets/custom.js runs the interval). */
.hero-group__inner .hero-slide-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease-in-out; z-index: 1; }
.hero-group__inner .hero-slide-image.is-active { opacity: 1; }

/* Hero stat cards — each card's top half overlaps the bottom edge of the hero
   image no matter its own height: the container sits flush with the image
   (no negative margin) and every card is shifted up by translateY(-50%),
   i.e. by exactly half of ITS OWN rendered height. Sizing is deliberately
   simple and fixed rather than flex-grow-based, so it stays predictable
   regardless of how many cards exist or what the neighboring cards are
   sized: no admin width -> fixed 180x180 square; an explicit width from the
   admin panel -> exactly that value, with auto height so multi-line text
   isn't clipped. (content.json "hero.stats") */
.hero-stats { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 16px; max-width: var(--wp--style--global--content-size); margin: 0 auto; padding-inline: 24px; position: relative; z-index: 20; }
.hero-stats__item { background: #fff; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.12); padding: 24px 20px; flex: 0 0 auto; width: 180px; aspect-ratio: 1; max-width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translateY(-50%); }
.hero-stats__text { font-weight: 700; color: #2e334e; line-height: 1.1; }
.hero-stats__label { font-size: 14px; color: #666; margin-top: 6px; }
@media (max-width: 767px) {
    .hero-stats { gap: 10px; }
    .hero-stats__item { padding: 16px 12px; flex: 1 1 45%; width: auto; }
}

/* "About us" section with an optional photo (admin panel, "about" section
   type, content.json sections[].image) — side-by-side like the sibling CLA
   network sites (e.g. cla.com.ro's "Where international ambition meets
   local intelligence"). Without an image the section falls back to the
   original centered, text-only layout (base theme .joinCla rules). */
.joinCla--with-image .container { display: grid; grid-template-columns: 1fr 1fr; align-items: center; text-align: left; width: 100%; max-width: var(--wp--style--global--content-size); gap: 48px; }
/* Explicit placement, not left to grid auto-placement: with this base theme's
   other rules also in the cascade, plain source-order auto-placement put the
   image in column 2 / row 1 and the text in column 1 / row 2 instead of side
   by side — pinning both to row 1 in their intended column sidesteps it. */
.joinCla--with-image .joinCla__media { grid-column: 1; grid-row: 1; }
.joinCla--with-image .joinCla__body { grid-column: 2; grid-row: 1; }
.joinCla--with-image .container h2,
.joinCla--with-image .container p { text-align: left; }
.joinCla__media { min-height: 200px; }
.joinCla__media img { width: 100%; height: auto; display: block; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.12); object-fit: cover; }
.joinCla--with-image .wp-block-buttons { justify-content: flex-start; }
@media (max-width: 900px) {
    .joinCla--with-image .container { grid-template-columns: 1fr; text-align: center; }
    .joinCla--with-image .joinCla__media,
    .joinCla--with-image .joinCla__body { grid-column: 1; }
    .joinCla--with-image .joinCla__media { grid-row: 1; }
    .joinCla--with-image .joinCla__body { grid-row: 2; }
    .joinCla--with-image .container h2,
    .joinCla--with-image .container p { text-align: center; }
    .joinCla--with-image .wp-block-buttons { justify-content: center; }
}

/* "Services" section — image-background cards with an always-visible title,
   like cla.com.ro's "Solutions for your growth". On hover/focus the whole
   card darkens solid and the title is replaced by the link text, centered
   over the full card. Admin-managed list (content.json sections[].items,
   type "services") with a per-card image, link text/url, and optional width
   — no width set means the cards share the row evenly, like the reference. */
.servicesSection { padding-block: 60px; }
.servicesSection__intro { max-width: 720px; margin: 12px auto 0; }
.servicesSection__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 40px; }
.serviceCard { position: relative; flex: 1 1 180px; max-width: 260px; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; display: block; color: #fff; text-decoration: none; }
.serviceCard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.serviceCard__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: 20px; background: linear-gradient(to top, rgba(46,51,78,.9) 0%, rgba(46,51,78,.35) 55%, rgba(46,51,78,0) 100%); transition: background .3s ease; }
.serviceCard__title { color: #fff !important; font-size: 20px; margin: 0; line-height: 1.2; }
/* Sits below the title in normal flow, collapsed to 0 height by default. The
   overlay is bottom-anchored (justify-content: flex-end), so growing this on
   hover pushes the title upward along with it instead of the two overlapping
   in place. */
.serviceCard__link { display: block; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.4; margin-top: 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s ease, opacity .3s ease, margin-top .3s ease; }
.serviceCard:hover .serviceCard__overlay,
.serviceCard:focus-visible .serviceCard__overlay { background: rgba(46,51,78,.92); }
.serviceCard:hover .serviceCard__link,
.serviceCard:focus-visible .serviceCard__link { max-height: 150px; opacity: 1; margin-top: 10px; }
@media (max-width: 767px) {
    .servicesSection__grid { gap: 10px; }
    .serviceCard { flex: 1 1 45%; max-width: 47%; }
}

/* "Sectors" section — industry specialization carousel (Swiper, bundled in
   assets/swiper-bundle.min.*), like cla.com.ro's "Deep specialization in key
   sectors". 3 cards per view on desktop, admin-managed list with per-card
   icon and bar color (content.json sections[].items, type "sectors"). */
.sectorsSection { padding-block: 60px; }
.sectorsSwiper { overflow: hidden; margin-top: 40px; padding-bottom: 4px; }
.sectorCard { padding-top: 20px; height: 100%; }
.sectorCard__bar { height: 4px; border-radius: 2px; margin-bottom: 20px; }
.sectorCard__icon { width: 44px; height: 44px; margin-bottom: 16px; }
.sectorCard__icon svg { width: 100%; height: 100%; }
.sectorCard h3 { font-size: 22px; margin: 0 0 10px; }
.sectorCard p { color: #666; font-size: 16px; margin: 0; }
.sectorsSwiper__nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.sectorsSwiper__nav .swiper-button-prev,
.sectorsSwiper__nav .swiper-button-next {
    position: static; margin: 0; width: 44px; height: 44px;
    border-radius: 50%; border: 1px solid #ddd; background: #fff; color: #2e334e;
}
.sectorsSwiper__nav .swiper-button-prev::after,
.sectorsSwiper__nav .swiper-button-next::after { font-size: 16px; font-weight: 700; }
.sectorsSwiper__nav .swiper-button-disabled { opacity: .35; }

/* "Grow with us" section — edge-to-edge photo on the left, a solid color
   panel with heading/text/button on the right, like cla.com.ro. Admin-
   managed (content.json section type "grow": image, color, title/text,
   button). Falls back to stacked (photo on top) on narrow screens. */
.growSection { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.growSection__media { position: relative; min-height: 320px; }
.growSection__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.growSection__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 60px 6vw; }
.growSection__body h2 { margin: 0 0 20px; color: #2e334e; }
.growSection__body p { margin: 0 0 24px; color: #2e334e; }
.growSection__body .btn { margin: 0; }
@media (max-width: 767px) {
    .growSection { grid-template-columns: 1fr; }
    .growSection__media { min-height: 260px; }
    .growSection__body { padding: 40px 24px; align-items: center; text-align: center; }
}

/* "Testimonials" section — one client quote at a time, auto-rotating (Swiper,
   5.5s, loops) with the same circular arrow nav used by the sectors carousel,
   plus two decorative diagonal triangles in the corner like cla.com.ro.
   Admin-managed list (content.json sections[].items, type "testimonials"). */
.testimonialsSection {
    position: relative; min-height: calc(336px * var(--t-scale, 1));
    display: flex; align-items: center; padding-block: calc(48px * var(--t-scale, 1));
    background-color: rgba(171, 174, 171, .1);
    background-image: url("../images/quote-img.svg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
}
.testimonialsSection .container { position: relative; z-index: 1; width: 100%; }
.testimonialsSwiper { max-width: 620px; margin-left: 0; margin-right: auto; }
.testimonialCard { display: flex; align-items: flex-start; gap: calc(14px * var(--t-scale, 1)); }
.testimonialCard__quote {
    display: block; flex: 0 0 auto; margin-top: calc(5px * var(--t-scale, 1));
    width: calc(32px * var(--t-scale, 1)); height: calc(27px * var(--t-scale, 1));
}
.testimonialCard__body { min-width: 0; }
.testimonialCard__text { font-size: calc(22px * var(--t-scale, 1)) !important; color: #2e334e; line-height: 1.4; margin: 0 0 24px; }
.testimonialCard__author { font-weight: 700 !important; font-size: calc(16px * var(--t-scale, 1)); color: #2e334e; margin: 0; }
.testimonialCard__meta { font-weight: 400 !important; color: #999; font-size: calc(15px * var(--t-scale, 1)); margin: 4px 0 0; }
.testimonialsSwiper__nav { display: flex; gap: 10px; margin-top: calc(26px * var(--t-scale, 1)); }
.testimonialsSwiper__nav .swiper-button-prev,
.testimonialsSwiper__nav .swiper-button-next {
    position: static; margin: 0;
    width: calc(35px * var(--t-scale, 1)); height: calc(35px * var(--t-scale, 1));
    border-radius: 50%; border: 1px solid #ddd; background: #fff; color: #2e334e;
}
.testimonialsSwiper__nav .swiper-button-prev::after,
.testimonialsSwiper__nav .swiper-button-next::after { font-size: 16px; font-weight: 700; }
@media (max-width: 767px) {
    .testimonialsSection {
        background-image: url("../images/quote-img-mobile.svg");
        background-position: top left;
        background-size: 100%;
        opacity: 1;
    }
    .testimonialsSwiper { max-width: 100%; }
    .testimonialCard__text { font-size: calc(19px * var(--t-scale, 1)) !important; }
}

/* "Insights" section — grid of cards split by the triangle motif into a dark
   text panel and a photo, like cla.com.ro. Admin-managed list
   (content.json sections[].items, type "insights"). */
.insightsSection { padding-block: 70px; }
.insightsSection__title { font-size: 40px; color: #2e334e; margin-bottom: 40px; }
/* Carousel: 3 cards per view on desktop (see custom.js). The arrows sit at the
   left and right of the cards, vertically centred on them. The padding gives
   the cards' hover shadow room inside the overflow:hidden viewport; the
   arrows are siblings of it, so they are never clipped. Arrows hide when all
   cards already fit (.swiper-button-lock). */
.insightsCarousel__stage { position: relative; }
.insightsSwiper { overflow: hidden; padding: 6px 6px 10px; margin: 0 -6px; }
.insightsSwiper .swiper-slide { height: auto; }
.insightsSwiper__nav .swiper-button-prev,
.insightsSwiper__nav .swiper-button-next {
    position: absolute; z-index: 5; margin: 0;
    top: calc(50% - 2px); transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid #ddd; background: #fff; color: #2e334e;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
/* Sit outside the cards when the page has room beside the container, otherwise
   slide in over the card edge — 100vw minus the carousel width is the free
   space on both sides together (20px margin also covers a scrollbar). */
.insightsSwiper__nav .swiper-button-prev { left: calc(-1 * min(60px, max(0px, (100vw - 100%) / 2 - 20px))); }
.insightsSwiper__nav .swiper-button-next { right: calc(-1 * min(60px, max(0px, (100vw - 100%) / 2 - 20px))); }
.insightsSwiper__nav .swiper-button-prev::after,
.insightsSwiper__nav .swiper-button-next::after { font-size: 16px; font-weight: 700; }
.insightsSwiper__nav .swiper-button-disabled { opacity: .35; }
.insightsSwiper__nav .swiper-button-lock { display: none; }
/* Dots under the carousel — one per page of cards, the current one is a
   longer navy pill. Clickable; hidden when everything fits. */
.insightsSwiper__dots { position: static; margin-top: 4px; text-align: center; line-height: 0; }
.insightsSwiper__dots .swiper-pagination-bullet {
    width: 9px; height: 9px; margin: 0 5px; background: #c3c7d1; opacity: 1;
    border-radius: 5px; transition: width .25s ease, background-color .25s ease;
}
.insightsSwiper__dots .swiper-pagination-bullet-active { width: 26px; background: #2e334e; }
.insightsSwiper__dots.swiper-pagination-lock { display: none; }
/* No room beside the cards (tablet/phone): smaller arrows tucked into the
   bottom corners of the card, where the dark panel is empty. */
@media (max-width: 1099px) {
    .insightsSwiper__nav .swiper-button-prev,
    .insightsSwiper__nav .swiper-button-next { top: auto; bottom: 24px; transform: none; width: 38px; height: 38px; }
    .insightsSwiper__nav .swiper-button-prev { left: 14px; }
    .insightsSwiper__nav .swiper-button-next { right: 14px; }
}
.insightCard {
    position: relative; display: block; aspect-ratio: 1 / 1;
    border-radius: 12px; overflow: hidden; text-decoration: none;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    transition: box-shadow .3s ease;
}
.insightCard:hover, .insightCard:focus-visible { box-shadow: 0 12px 28px rgba(0, 0, 0, .16); }
.insightCard__image {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease;
}
.insightCard:hover .insightCard__image,
.insightCard:focus-visible .insightCard__image { transform: scale(1.03); }
/* The dark-panel + teal/blue triangle divider is the client's own graphic
   (images/insight-divider.png, transparent where the photo should show
   through) layered on top of the photo — not redrawn in CSS. */
.insightCard__divider {
    position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
    object-fit: cover; object-position: right; pointer-events: none;
}
.insightCard__panel {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: 28px 24px; text-align: left; overflow: hidden;
    transition: transform .5s ease;
}
.insightCard__body {
    max-width: 40%; transition: transform .5s ease; transform-origin: left top;
}
.insightCard:hover .insightCard__body,
.insightCard:focus-visible .insightCard__body { transform: scale(1.04); }
.insightCard__eyebrow {
    color: #7dd2d3 !important; font-size: 14px !important; margin: 0 0 6px;
    overflow-wrap: break-word;
}
.insightCard__title {
    color: #fff !important; font-size: 20px !important; line-height: 1.25 !important; margin: 0; font-family: inherit !important;
    overflow-wrap: break-word;
}
.insightCard__tag {
    color: #7dd2d3 !important; font-size: 13px !important; margin: 12px 0 0; max-width: 24%;
    overflow-wrap: break-word;
}
.insightsSection__cta { margin-top: 40px; }
@media (max-width: 640px) {
    .insightCard__body { max-width: 66%; }
    .insightCard__tag { max-width: 50%; }
    .insightCard__title { font-size: 22px !important; }
}

/* Contact section */
.contactSection { padding-block: 50px; background: rgba(171,174,171,.1); }
.contactCard { border-top: 5px solid #7dd2d3 !important; }
.contactCard .card-title { font-size: 20px; margin: 0 0 10px; }
.contactCard .card-text { margin: 0; }
.contactCard a { color: #2e334e !important; }

/* Bootstrap navbar brand/logo */
.navbar-brand.site-logo { padding: 0; }
/* cla-style.css has ".wp-site-blocks header .site-logo img { max-height: 95px !important }"
   (higher specificity than a plain .navbar-brand.site-logo img rule) which both caps the
   admin-configured size and — since max-height only ever shrinks, never enlarges an image
   past its natural pixel size — would silently ignore a larger value entirely. Using an
   explicit height (not max-height) with a selector specific enough to beat that rule is
   what makes the admin panel's logo-size setting actually take effect in both directions. */
.cla-header-row .navbar-brand.site-logo { align-self: var(--cla-header-logo-align, center); }
.cla-header-row .navbar-brand.site-logo img { height: var(--cla-header-logo-height, 56px) !important; max-height: none !important; width: auto !important; }
.navbar .nav-link { color: #2e334e; font-weight: 500; }
.navbar .nav-link:hover { color: #2a787a; }
.navbar .nav-item .btn { margin: 0; }

/* .wp-block-template-part has display:flex (row) from the theme CSS — harmless
   with a single block-level child. */
.cla-header-inner { display: block; width: 100%; background: #fff; border-bottom: 2px solid #eee; }

/* Header content is centered in a max-width column, like claglobal.com —
   not stretched edge-to-edge across a wide monitor. */
.cla-header-container { max-width: var(--wp--style--global--content-size); margin: 0 auto; padding-inline: 24px; }

/* Single row on desktop: logo left, menu + language switch right (admin-configurable
   height/logo size/logo position/font via the --cla-header-* custom properties set
   inline on .cla-header-inner from content.json's "header" key). */
.cla-header-row { min-height: var(--cla-header-height, 90px); }
.cla-header-row .navbar-nav .nav-link { padding-block: 8px; font-size: var(--cla-header-font-size, 16px); }
.cla-header-row .navbar-nav .nav-link,
.cla-header-row .lang-switch,
.cla-header-row .lang-btn { font-family: var(--cla-header-font, "Museo Sans"), sans-serif; }
.cla-header-row .lang-switch-item { display: flex; align-items: center; }

/* cla-style.css also sets header{position:fixed} (sized for the original multi-page
   theme's 130px-tall fixed header) plus a matching margin-top:130px !important on
   main to compensate. We use .cla-header-inner's own sticky-top instead, so the
   header must flow normally — otherwise main renders at y:0, hidden under it. */
header.wp-block-template-part { position: sticky !important; top: 0; z-index: 1020; height: auto !important; }
.wp-site-blocks main { margin-top: 0 !important; }

.lang-switch { margin-right: 0; }
/* .btn has margin:auto in cla-memberuplift.css (for centering in block contexts) —
   inside this flex row it would swallow all free space instead of hugging the
   right edge, so it needs to be reset to 0 here. */
.btn-topbar { margin: 0 !important; padding: 6px 16px !important; font-size: 13px !important; }

/* Footer centered on mobile */
@media (max-width: 767px) {
    footer .footer__container__wrapper { text-align: center; }
    footer .footer__container { align-items: center; }
    footer .footer__logo { text-align: center; }
    footer .social-icons { justify-content: center; }
}

/* Smaller footer type on all screen sizes (was inheriting the ~16-20px body size) */
footer h4 { font-size: 13px !important; }
footer p { font-size: 12px !important; line-height: 1.6 !important; }
footer .footer__container__link a { font-size: 12px !important; }

/* WP utility classes not present in static export */
.has-cla-dark-blue-background-color.has-background { background-color: #2E334E !important; }
.wp-block-cover__background.has-background-dim-10 { background-color: rgba(0,0,0,.1); position: absolute; inset: 0; }

/* Standalone subpage (content.json pages[].sections, index.php?page=<id>) —
   renders the exact same section types/markup as the homepage (see
   sections-render.php), just preceded by a small back-to-home link. The
   "not found" state (?page=<unmatched id>) keeps the older centered-notice
   look since it has no sections of its own to show. */
.subpage-back-wrap { padding-top: 24px; }
.subpage__back {
    display: inline-block; color: #2a787a !important;
    font-size: 14px; text-decoration: none;
}
.subpage__back:hover { text-decoration: underline; }
.subpage { padding-block: 60px; }
.subpage__inner { max-width: 760px; }
.subpage__title { color: #2e334e; font-size: 38px; line-height: 1.2; margin: 0 0 24px; }
.subpage__inner--notfound { text-align: center; padding-block: 40px; }
@media (max-width: 640px) {
    .subpage__title { font-size: 28px; }
}

/* ---- Rich text from the admin editor (cla-rich.php) ----
   Paragraphs keep the theme's own <p> styling (they're ordinary <p>s);
   only what the theme never styled — lists, bold weight, links — is set here. */
.cla-rich strong { font-weight: 700; }
.cla-rich u { text-decoration: underline; }
.cla-rich a { color: inherit; text-decoration: underline; }
.cla-rich-list { margin: 0 0 10px; padding-left: 1.4em; text-align: left; color: #2e334e; line-height: 1.5; }
ul.cla-rich-list { list-style: disc; }
ol.cla-rich-list { list-style: decimal; }
.cla-rich-list li { margin: 0 0 .35em; font-size: inherit; line-height: inherit; }
.cla-rich-list li:last-child { margin-bottom: 0; }
/* Lists take the same size/colour as the paragraph text of the section they sit in. */
.joinCla .container .cla-rich-list { color: #000; font-size: 18px; }
@media screen and (min-width: 576px) { .joinCla .container .cla-rich-list { font-size: calc(0.641025641vw + 14.3076923077px); } }
@media screen and (min-width: 1200px) { .joinCla .container .cla-rich-list { font-size: 22px; } }
.sectorCard .cla-rich-list { color: #666; font-size: 16px; margin: 0; }
.growSection__body .cla-rich-list { margin: 0 0 24px; }
.testimonialCard__body .cla-rich-list { font-size: calc(22px * var(--t-scale, 1)); line-height: 1.4; margin: 0 0 24px; }
@media (max-width: 781px) { .testimonialCard__body .cla-rich-list { font-size: calc(19px * var(--t-scale, 1)); } }
/* Centered sections: keep the bullets left-aligned to each other but center the whole list. */
.joinCla:not(.joinCla--with-image) .container .cla-rich-list,
.servicesSection .cla-rich-list { display: table; margin-left: auto; margin-right: auto; }