/*
 * lulu-cards v1 (phase 8, 2026-10-30): one card system for the whole site: product, product-category and article cards, the numbers
 * strip and the icon strip. Colours come from the theme variables (Settings > Colours: --main-color-one, --main-color-two,
 * --heading-color, --paragraph-color), nothing else is hard-coded, and only logical properties (inline/block, start/end) are used,
 * so the same rules serve a right-to-left and a left-to-right page.
 *
 * Grid: <div class="lc-grid" style="--lc-cols-lg:4;--lc-cols-md:3;--lc-cols-sm:2"> (see lulu_grid_style() in helpers.php):
 * lg = 992px and up, md = 576-991px, sm = below 576px.
 */

:root {
    --lc-accent: var(--main-color-one);
    --lc-accent-2: var(--main-color-two);
    --lc-ink: var(--heading-color);
    --lc-muted: var(--paragraph-color);
    --lc-radius: 18px;
    --lc-gap: clamp(12px, 1.8vw, 24px);
    --lc-line: color-mix(in srgb, var(--lc-ink) 11%, transparent);
    --lc-tint: color-mix(in srgb, var(--lc-accent) 7%, white);
    --lc-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 10px 26px -14px color-mix(in srgb, var(--lc-ink) 24%, transparent);
    --lc-shadow-hover: 0 2px 4px rgb(0 0 0 / .05), 0 26px 46px -20px color-mix(in srgb, var(--lc-accent) 48%, transparent);
    --lc-hover: var(--hover-color);
    --lc-dir: 1;
    --lc-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
:root[dir="rtl"] { --lc-dir: -1; }

/* ---- grid ---- */
.lc-grid {
    display: grid;
    gap: var(--lc-gap);
    grid-template-columns: repeat(var(--lc-cols-sm, 2), minmax(0, 1fr));
}
@media (min-width: 576px) {
    .lc-grid { grid-template-columns: repeat(var(--lc-cols-md, 3), minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .lc-grid { grid-template-columns: repeat(var(--lc-cols-lg, 4), minmax(0, 1fr)); }
}

/* ---- section head (eyebrow, title with an accent bar, lead) ---- */
.lc-head { max-inline-size: 720px; margin: 0 auto 40px; text-align: center; }
.lc-eyebrow {
    display: inline-block; margin-block-end: 10px; padding: 4px 14px; border-radius: 999px;
    font-size: .82rem; font-weight: 700; letter-spacing: .02em;
    color: var(--lc-accent); background: color-mix(in srgb, var(--lc-accent) 10%, white);
}
.lc-head h2 { margin: 0; color: var(--lc-ink); font-weight: 800; font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.4; }
.lc-head h2::after {
    content: ""; display: block; inline-size: 64px; block-size: 4px; margin: 14px auto 0; border-radius: 4px;
    background: linear-gradient(90deg, var(--lc-accent), var(--lc-accent-2));
}
/* the theme forces every <p> to 20px !important (fonts.css), so the sizes of paragraphs in these blocks are !important too */
.lc-head p { margin: 14px 0 0; color: var(--lc-muted); font-size: 1.05rem !important; line-height: 1.9; text-align: center; }
.lc-more { margin-block-start: 36px; text-align: center; }

/* ---- card base ---- */
a.lc-card, a.lc-card:hover, a.lc-card:focus { color: inherit; text-decoration: none; }
.lc-card {
    position: relative; display: flex; flex-direction: column; min-inline-size: 0; block-size: 100%;
    overflow: hidden; background: #fff; border: 1px solid var(--lc-line); border-radius: var(--lc-radius);
    box-shadow: var(--lc-shadow);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.lc-card:hover, .lc-card:focus-visible {
    transform: translateY(-5px); box-shadow: var(--lc-shadow-hover);
    border-color: color-mix(in srgb, var(--lc-accent) 38%, transparent);
}
.lc-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--lc-accent) 45%, transparent); outline-offset: 2px; }

.lc-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: linear-gradient(160deg, #fff 0%, var(--lc-tint) 100%); }
.lc-card__media img {
    display: block; inline-size: 100%; block-size: 100%; object-fit: cover; /* catalogue photos are 4:3 like the box, so nothing is cropped */
    transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}
.lc-card:hover .lc-card__media img { transform: scale(1.07); }
.lc-card__media--empty img { object-fit: contain; padding: 26%; opacity: .55; mix-blend-mode: multiply; }

.lc-card__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 6px; padding: 14px 16px 12px; text-align: start; }
.lc-card__eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .02em; color: var(--lc-accent); }
.lc-card__title {
    margin: 0; color: var(--lc-ink); font-size: 1rem; font-weight: 700; line-height: 1.55;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.lc-card__text {
    margin: 0; color: var(--lc-muted); font-size: .86rem; line-height: 1.75; text-align: start;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.lc-card__cta {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-start: auto;
    padding: 11px 16px; color: #fff; background: var(--lc-accent); font-size: .85rem; font-weight: 700;
    transition: background .22s ease, color .22s ease;
}
.lc-card__cta::after {
    content: ""; flex: 0 0 auto; inline-size: 1.15em; block-size: 1.15em; background: currentColor;
    -webkit-mask: var(--lc-arrow) center / contain no-repeat; mask: var(--lc-arrow) center / contain no-repeat;
    transform: scaleX(var(--lc-dir)); transition: transform .22s ease;
}
.lc-card:hover .lc-card__cta, .lc-card:focus-visible .lc-card__cta { background: var(--lc-hover); }
.lc-card:hover .lc-card__cta::after { transform: translateX(calc(4px * var(--lc-dir))) scaleX(var(--lc-dir)); }

.lc-chip {
    position: absolute; inset-block-start: 10px; inset-inline-start: 10px; z-index: 1; max-inline-size: calc(100% - 20px);
    padding: 3px 10px; border-radius: 999px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .72rem; font-weight: 700; line-height: 1.6;
    color: var(--lc-ink); background: rgb(255 255 255 / .92); box-shadow: 0 1px 3px rgb(0 0 0 / .12);
}
/* the code is read left to right whatever the page direction; the direction is set on the inner <bdi>, not on the chip, whose logical offsets follow the page */
.lc-chip--code bdi { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; letter-spacing: .03em; }

/* ---- product card ---- */
.lc-card--product .lc-card__body { padding-block-end: 14px; }
@media (max-width: 575px) {
    .lc-card--product .lc-card__text { display: none; }
    .lc-card--product .lc-card__title { font-size: .92rem; }
    .lc-card__cta { padding: 9px 12px; font-size: .8rem; }
}

/* ---- category tile: the photo fills the card, a shade at the bottom carries the name, a short text and the link ---- */
.lc-card--tile {
    aspect-ratio: 4 / 3; border: 0; border-radius: calc(var(--lc-radius) + 2px); color: #fff; isolation: isolate;
    background: linear-gradient(135deg, var(--lc-accent), var(--lc-accent-2));
}
.lc-card--tile:hover, .lc-card--tile:focus-visible { border-color: transparent; }
.lc-tile__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.lc-tile__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.lc-card--tile:hover .lc-tile__media img { transform: scale(1.08); }
.lc-tile__media--icon { display: grid; place-items: center; }
.lc-tile__media--icon i { color: #fff; font-size: clamp(2.6rem, 6vw, 4rem); opacity: .3; transform: translateY(-14%); }
.lc-tile__shade {
    position: absolute; inset: 0; z-index: -1; transition: opacity .3s ease;
    background: linear-gradient(to top, color-mix(in srgb, var(--lc-accent-2) 96%, black) 0%, color-mix(in srgb, var(--lc-accent-2) 70%, transparent) 42%, transparent 78%);
}
.lc-card--tile:hover .lc-tile__shade { opacity: .94; }
.lc-tile__body { display: flex; flex-direction: column; gap: 4px; margin-block-start: auto; padding: 18px 20px; text-align: start; }
.lc-tile__title { margin: 0; color: #fff !important; font-size: 1.2rem; font-weight: 800; line-height: 1.45; text-shadow: 0 1px 8px rgb(0 0 0 / .35); }
.lc-tile__text {
    color: rgb(255 255 255 / .84); font-size: .85rem; line-height: 1.7; text-align: start;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.lc-tile__more { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 4px; font-size: .85rem; font-weight: 700; color: #fff; }
.lc-tile__more::after {
    content: ""; inline-size: 1.05em; block-size: 1.05em; background: currentColor;
    -webkit-mask: var(--lc-arrow) center / contain no-repeat; mask: var(--lc-arrow) center / contain no-repeat;
    transform: scaleX(var(--lc-dir)); transition: transform .22s ease;
}
.lc-card--tile:hover .lc-tile__more::after { transform: translateX(calc(5px * var(--lc-dir))) scaleX(var(--lc-dir)); }
.lc-count {
    position: absolute; inset-block-start: 14px; inset-inline-start: 14px; padding: 2px 12px; border-radius: 999px;
    font-size: .74rem; font-weight: 700; line-height: 1.7; color: var(--lc-ink); background: rgb(255 255 255 / .92); box-shadow: 0 1px 4px rgb(0 0 0 / .18);
}
@media (max-width: 575px) {
    .lc-card--tile { aspect-ratio: 1 / 1; }
    .lc-tile__body { padding: 12px 14px; }
    .lc-tile__title { font-size: 1rem; }
    .lc-tile__text, .lc-tile__more { display: none; }
    .lc-count { inset-block-start: 10px; inset-inline-start: 10px; padding-inline: 9px; }
}

/* ---- article card ---- */
.lc-card--post .lc-card__media { aspect-ratio: 16 / 10; background: var(--lc-tint); }
.lc-card--post .lc-card__body { gap: 8px; padding: 16px 18px 14px; }
.lc-card--post .lc-card__title { font-size: 1.08rem; }
.lc-card--post .lc-card__text { -webkit-line-clamp: 3; line-clamp: 3; }
.lc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--lc-muted); font-size: .78rem; }
.lc-meta i { margin-inline-end: 5px; color: var(--lc-accent); }
@media (max-width: 575px) {
    .lc-card--post .lc-card__body { padding: 14px; }
}

/* ---- numbers strip (page-builder addon CounterupAreaStyleTwo): two per row on a phone ---- */
.lc-stats { display: grid; gap: var(--lc-gap); grid-template-columns: repeat(var(--lc-stats-cols, 4), minmax(0, 1fr)); }
.lc-stat {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 22px 12px; text-align: center;
    background: #fff; border: 1px solid var(--lc-line); border-radius: var(--lc-radius); box-shadow: var(--lc-shadow);
}
.lc-stat__icon { color: var(--lc-accent); font-size: 1.35rem; margin-block-end: 2px; }
.lc-stat__num { color: var(--lc-accent); font-size: clamp(1.7rem, 4.2vw, 2.5rem); font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; }
.lc-stat__num { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .3em; }
.lc-stat__num small { margin-inline-start: .3em; color: var(--lc-muted); font-size: .42em; font-weight: 600; }
.lc-stat__label { margin: 0; color: var(--lc-ink); font-size: .95rem; font-weight: 700; line-height: 1.5; }
@media (max-width: 767px) {
    .lc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lc-stat { padding: 16px 8px; }
}

/* ---- icon strip (page-builder addon IconStripStyleOne): each item brings its own colour in --ic ---- */
.lc-icons { display: grid; gap: var(--lc-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 576px) { .lc-icons { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .lc-icons { grid-template-columns: repeat(var(--lc-icons-cols, 6), minmax(0, 1fr)); } }
@media (max-width: 575px) { .lc-icons > .lc-icon:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.lc-icon {
    --ic: var(--lc-accent);
    display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 10px; text-align: center;
    background: #fff; border: 1px solid var(--lc-line); border-radius: var(--lc-radius); box-shadow: var(--lc-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}
.lc-icon:hover { transform: translateY(-4px); box-shadow: 0 20px 38px -20px color-mix(in srgb, var(--ic) 55%, transparent); }
.lc-icon__glyph {
    display: grid; place-items: center; inline-size: 60px; block-size: 60px; border-radius: 50%; font-size: 1.5rem; color: var(--ic);
    background: color-mix(in srgb, var(--ic) 13%, white); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ic) 24%, white);
    transition: background .25s ease, color .25s ease;
}
.lc-icon:hover .lc-icon__glyph { background: var(--ic); color: #fff; }
.lc-icon__title { margin: 0; color: var(--lc-ink); font-size: .92rem; font-weight: 700; line-height: 1.5; }
.lc-icon__text { margin: -4px 0 0; color: var(--lc-muted); font-size: .8rem !important; line-height: 1.6; }

/* ---- section wrapper and button of the page-builder elements that use the cards ---- */
.lc-section--tint { background: linear-gradient(180deg, var(--lc-tint) 0%, #fff 100%); }
a.lc-btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 12px 28px; border-radius: 999px;
    color: #fff !important; background: var(--lc-accent) !important; font-weight: 700; text-decoration: none;
    box-shadow: 0 14px 26px -16px color-mix(in srgb, var(--lc-accent) 75%, transparent);
    transition: transform .22s ease, background .22s ease;
}
a.lc-btn::after {
    content: ""; inline-size: 1.1em; block-size: 1.1em; background: currentColor;
    -webkit-mask: var(--lc-arrow) center / contain no-repeat; mask: var(--lc-arrow) center / contain no-repeat; transform: scaleX(var(--lc-dir));
}
a.lc-btn:hover, a.lc-btn:focus { color: #fff !important; background: var(--lc-accent-2) !important; transform: translateY(-2px); }

/* ---- "why choose us" (page-builder element IconBoxImageGridStyleOne): the photo beside a grid of points, 3 across on desktop (--lc-why-cols), 2 on a tablet and a
   phone (an odd last point takes the whole row). --ic is the colour of a point: the theme accent unless the point brings its own ---- */
.lc-why__media { block-size: 100%; margin: 0; overflow: hidden; border-radius: calc(var(--lc-radius) + 8px); box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--lc-ink) 65%, transparent), 0 10px 24px -14px rgb(0 0 0 / .35); }
.lc-why__media img { display: block; inline-size: 100%; block-size: 100%; min-block-size: 320px; max-block-size: none !important; object-fit: cover; }
.lc-why__grid { display: grid; gap: var(--lc-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 992px) { .lc-why__grid { grid-template-columns: repeat(var(--lc-why-cols, 3), minmax(0, 1fr)); } }
@media (max-width: 991px) {
    .lc-why__grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .lc-why__media img { min-block-size: 0; aspect-ratio: 16 / 10; }
}
.lc-why__item {
    --ic: var(--lc-accent);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px 12px; text-align: center; color: var(--lc-ink); text-decoration: none;
    background: #fff; border: 1px solid var(--lc-line); border-radius: var(--lc-radius); box-shadow: var(--lc-shadow);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
a.lc-why__item:hover, a.lc-why__item:focus { color: var(--lc-ink); }
.lc-why__item:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--ic) 35%, transparent); box-shadow: 0 20px 38px -20px color-mix(in srgb, var(--ic) 55%, transparent); }
.lc-why__glyph {
    display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 50%; font-size: 1.6rem; color: var(--ic);
    background: color-mix(in srgb, var(--ic) 13%, white); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ic) 24%, white);
    transition: background .25s ease, color .25s ease;
}
.lc-why__item:hover .lc-why__glyph { background: var(--ic); color: #fff; }
.lc-why__title { margin: 0; color: var(--lc-ink) !important; font-size: 1rem; font-weight: 700; line-height: 1.55; }
@media (max-width: 575px) {
    .lc-why__item { gap: 10px; padding: 16px 8px; }
    .lc-why__glyph { inline-size: 54px; block-size: 54px; font-size: 1.35rem; }
    .lc-why__title { font-size: .92rem; }
}

/* ---- request form (page-builder element RequestFormStyleOne): a form of the form builder in a card, two fields across on desktop (the textarea, the file
   and the button take the whole row); the same card serves a form that goes to an email and one that goes to WhatsApp ---- */
.lc-form {
    max-inline-size: 900px; margin-inline: auto; padding: clamp(22px, 4vw, 44px); background: #fff;
    border: 1px solid var(--lc-line); border-radius: calc(var(--lc-radius) + 8px);
    box-shadow: 0 36px 70px -40px color-mix(in srgb, var(--lc-ink) 60%, transparent), 0 10px 24px -14px rgb(0 0 0 / .25);
}
.lc-form form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; margin: 0; }
.lc-form form .error-message, .lc-form form .btn-wrapper, .lc-form form .form-group.textarea, .lc-form form .form-group.file, .lc-form form .form-group.checkbox { grid-column: 1 / -1; }
.lc-form .error-message:empty { display: none; }
.lc-form .form-group { margin: 0; text-align: start; }
.lc-form .form-group label { display: block; margin-block-end: 7px; color: var(--lc-ink); font-size: 1rem !important; font-weight: 700; }
.lc-form .form-control {
    display: block; inline-size: 100%; block-size: auto; padding: 12px 16px; color: var(--lc-ink); font-size: 1rem; line-height: 1.6; box-shadow: none;
    background: color-mix(in srgb, var(--lc-accent) 3%, white); border: 1.5px solid color-mix(in srgb, var(--lc-ink) 14%, transparent); border-radius: 14px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.lc-form textarea.form-control { min-block-size: 130px; resize: vertical; }
/* the form builder repeats the label as the placeholder: the label already says it */
.lc-form .form-control::placeholder { color: transparent; }
.lc-form .form-control:focus { background: #fff; border-color: var(--lc-accent); outline: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--lc-accent) 16%, transparent); }
.lc-form .btn-wrapper { margin: 6px 0 0; text-align: center; }
.lc-form button.submit-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; inline-size: 100%; padding: 15px 32px; border: 0; border-radius: 999px;
    color: #fff !important; background: var(--lc-accent) !important; font-size: 1.1rem; font-weight: 800; cursor: pointer;
    box-shadow: 0 16px 30px -16px color-mix(in srgb, var(--lc-accent) 80%, transparent); transition: transform .22s ease, background .22s ease;
}
.lc-form button.submit-btn:hover, .lc-form button.submit-btn:focus { background: var(--lc-hover) !important; transform: translateY(-2px); }
.lc-form button.submit-btn i { font-size: 1.3rem; }
.lc-form .alert { margin: 0; border-radius: 12px; }
.lc-form__note { margin: 18px 0 0; color: var(--lc-muted); font-size: .92rem !important; line-height: 1.8; text-align: center; }
@media (max-width: 575px) { .lc-form form { grid-template-columns: minmax(0, 1fr); } }

/* ---- catalogs: the card of the list is a product card with the cover (a portrait page) as its picture; the category page offers a button to its catalog ---- */
.lc-card--catalog .lc-card__media { aspect-ratio: 3 / 4; background: var(--lc-tint); }
.lc-card--catalog .lc-card__media img { object-position: top center; }
.lc-card--catalog .lc-card__text { -webkit-line-clamp: 3; line-clamp: 3; }
.lc-catalog-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-block-end: 30px; }
.lc-catalog-cta a.lc-btn i { font-size: 1.1em; }

/* ---- listing pages (products, categories, blog): the grid and its pagination ---- */
.lc-listing { padding-block: 40px 76px; }
.lc-pagination { display: flex; justify-content: center; margin-block-start: 42px; }
.lc-pagination .pagination { flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; }
.lc-pagination .page-link {
    min-inline-size: 42px; padding: 8px 14px; border: 1px solid var(--lc-line); border-radius: 12px !important;
    color: var(--lc-accent); background: #fff; font-weight: 700; text-align: center;
}
.lc-pagination .page-link:hover { background: color-mix(in srgb, var(--lc-accent) 9%, white); }
.lc-pagination .page-item.active .page-link { color: #fff; background: var(--lc-accent); border-color: var(--lc-accent); }
.lc-pagination .page-item.disabled .page-link { color: var(--lc-muted); background: transparent; opacity: .6; }
.lc-pagination p, .lc-pagination .small { display: none; } /* the "showing x to y of z" sentence */

/* ---- footer: one slim bar with the copyright line and the social links, in the colours of the Footer Color Settings screen (partials/footer.blade.php hands them over
   as the --lc-footer-* variables: background, copyright bar, text, widget title / text / hover / icon). Without a setting: the primary colour and white text ---- */
footer.lc-footer { background: var(--lc-footer-bg, var(--lc-accent)); color: var(--lc-footer-text, #fff); border: 0; }
.lc-footer .footer-bottom { border: 0; background: var(--lc-footer-bar, transparent); padding: 0; }
.lc-footer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 18px; }
.lc-footer .copyright { color: var(--lc-footer-text, #fff); font-size: .9rem; line-height: 1.8; }
.lc-footer .copyright a { color: var(--lc-footer-text, #fff); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lc-footer__social { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lc-footer__social a {
    display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 50%; font-size: .95rem; text-decoration: none;
    color: var(--lc-footer-text, #fff); background: color-mix(in srgb, var(--lc-footer-text, #fff) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--lc-footer-text, #fff) 32%, transparent);
    transition: background .22s ease, color .22s ease, transform .22s ease;
}
.lc-footer__social a:hover { color: var(--lc-footer-bg, var(--lc-accent)); background: var(--lc-footer-text, #fff); transform: translateY(-2px); }
/* widgets: the area exists only when someone adds widgets to the location "footer" */
.lc-footer .footer-main { background: var(--lc-footer-bg, var(--lc-accent)); padding-block: 36px 8px; }
.lc-footer .footer-widget .widget-title { color: var(--lc-footer-title, #fff) !important; }
.lc-footer .footer-widget p, .lc-footer .footer-widget ul li, .lc-footer .footer-widget ul li a { color: var(--lc-footer-wtext, rgb(255 255 255 / .85)); }
.lc-footer .footer-widget ul li a:hover { color: var(--lc-footer-hover, #fff); }
.lc-footer .footer-widget i { color: var(--lc-footer-icon, #fff); }
@media (max-width: 575px) {
    .lc-footer__bar { justify-content: center; text-align: center; }
}

/* ---- contact band (page-builder element ContactBandStyleOne): a gradient of the theme colors, a headline and call buttons ---- */
.lc-cta { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: linear-gradient(120deg, var(--lc-accent-2), var(--lc-accent)); }
.lc-cta::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(circle at 8% 18%, rgb(255 255 255 / .13) 0 9%, transparent 9.4%),
        radial-gradient(circle at 94% 86%, rgb(255 255 255 / .10) 0 15%, transparent 15.4%),
        radial-gradient(circle at 78% 10%, rgb(255 255 255 / .07) 0 6%, transparent 6.4%);
}
.lc-cta--image { background: var(--lc-bg) center / cover no-repeat; }
.lc-cta--image::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(120deg, color-mix(in srgb, var(--lc-accent-2) 93%, transparent), color-mix(in srgb, var(--lc-accent) 80%, transparent));
}
.lc-cta__box { max-inline-size: 780px; margin-inline: auto; text-align: center; }
.lc-eyebrow--light { color: #fff; background: rgb(255 255 255 / .16); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28); }
.lc-cta__title { margin: 6px 0 0; color: #fff !important; font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 800; line-height: 1.45; }
.lc-cta__text { margin-block-start: 12px; text-align: center; color: rgb(255 255 255 / .9); font-size: clamp(1.02rem, 2vw, 1.25rem); line-height: 1.9; }
.lc-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-block-start: 28px; }
a.lc-cta__btn {
    display: inline-flex; align-items: center; gap: 12px; padding: 9px 26px; padding-inline-start: 10px; border-radius: 999px;
    color: var(--lc-accent) !important; background: #fff; font-size: 1.2rem; font-weight: 800; letter-spacing: .02em; text-decoration: none;
    box-shadow: 0 16px 30px -16px rgb(0 0 0 / .55); transition: transform .22s ease, background .22s ease, color .22s ease;
}
a.lc-cta__btn bdi { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
a.lc-cta__btn i {
    display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%;
    color: #fff; background: var(--lc-accent); font-size: .95rem; transition: background .22s ease, color .22s ease;
}
a.lc-cta__btn:hover, a.lc-cta__btn:focus { color: #fff !important; background: var(--lc-hover); transform: translateY(-3px); }
a.lc-cta__btn:hover i, a.lc-cta__btn:focus i { color: var(--lc-hover); background: #fff; }
@media (max-width: 575px) {
    .lc-cta__actions { flex-direction: column; align-items: stretch; }
    a.lc-cta__btn { justify-content: center; }
}

/* ---- contact band, photo style: a rounded card with a shadow, the photo fills it and a shade of the theme colors on the START side carries the text.
   The shade runs along the reading direction: calc(90deg * var(--lc-dir)) is 90deg (towards the end) on a left-to-right page and -90deg on a right-to-left one ---- */
.lc-cta-photo__card {
    position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-block-size: clamp(300px, 32vw, 400px);
    padding: clamp(26px, 5vw, 64px); border-radius: calc(var(--lc-radius) + 10px); color: #fff;
    background: var(--lc-bg) center / cover no-repeat;
    box-shadow: 0 36px 70px -30px color-mix(in srgb, var(--lc-ink) 75%, transparent), 0 12px 26px -14px rgb(0 0 0 / .4);
}
.lc-cta-photo__card::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(calc(90deg * var(--lc-dir)), color-mix(in srgb, var(--lc-accent-2) 96%, black) 0%, color-mix(in srgb, var(--lc-accent-2) 82%, transparent) 40%, color-mix(in srgb, var(--lc-accent) 14%, transparent) 100%);
}
.lc-cta-photo__box { max-inline-size: 560px; text-align: start; }
.lc-cta-photo .lc-cta__title { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
.lc-cta-photo .lc-cta__text { text-align: start; }
.lc-cta-photo .lc-cta__actions { justify-content: flex-start; }
@media (max-width: 767px) {
    .lc-cta-photo__card::before { background: linear-gradient(180deg, color-mix(in srgb, var(--lc-accent-2) 92%, black) 0%, color-mix(in srgb, var(--lc-accent-2) 80%, transparent) 100%); }
    .lc-cta-photo .lc-cta__actions { flex-direction: column; align-items: stretch; }
    .lc-cta-photo a.lc-cta__btn { justify-content: center; }
}

/* ---- numbers strip with a photo behind it (the photo comes in through --lc-bg; a shade of the theme colors keeps the numbers readable) ---- */
.lc-stats-section--image { position: relative; isolation: isolate; background: var(--lc-bg) center / cover no-repeat; }
.lc-stats-section--image::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(135deg, color-mix(in srgb, var(--lc-accent-2) 90%, transparent), color-mix(in srgb, var(--lc-accent) 72%, transparent));
}
.lc-stats-section--image .lc-head h2 { color: #fff !important; }
.lc-stats-section--image .lc-head h2::after { background: #fff; }
.lc-stats-section--image .lc-stat {
    background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .26); box-shadow: 0 18px 34px -22px rgb(0 0 0 / .6);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lc-stats-section--image .lc-stat__icon, .lc-stats-section--image .lc-stat__num { color: #fff; }
.lc-stats-section--image .lc-stat__num small { color: rgb(255 255 255 / .8); }
.lc-stats-section--image .lc-stat__label { color: rgb(255 255 255 / .94) !important; } /* the theme forces heading colours with !important */
.lc-stats-section .lc-head { margin-block-end: 32px; }

/* ---- info cards (page-builder element InfoCardsStyleOne): vision and mission, values, pillars. --ic is the colour of a card: the theme accent unless the card brings its own.
   1 column on a phone, 2 on a tablet, 2 / 3 / 4 on desktop (--lc-info-cols) ---- */
.lc-info { display: grid; gap: var(--lc-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) { .lc-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .lc-info { grid-template-columns: repeat(var(--lc-info-cols, 3), minmax(0, 1fr)); } }
.lc-info__card {
    --ic: var(--lc-accent);
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-inline-size: 0;
    padding: clamp(22px, 2.6vw, 32px); text-align: start; background: #fff; border-radius: calc(var(--lc-radius) + 6px);
    border: 2px solid color-mix(in srgb, var(--ic) 15%, white);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.lc-info__card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--ic) 55%, white); box-shadow: 0 24px 42px -26px color-mix(in srgb, var(--ic) 60%, transparent); }
.lc-info__icon {
    display: grid; place-items: center; inline-size: 58px; block-size: 58px; margin-block-end: 6px; border-radius: 17px; font-size: 1.4rem; color: #fff;
    background: linear-gradient(135deg, var(--ic), color-mix(in srgb, var(--ic) 68%, black));
    box-shadow: 0 14px 24px -14px color-mix(in srgb, var(--ic) 80%, transparent);
}
.lc-info__tag {
    padding: 2px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; line-height: 1.7;
    color: var(--ic); background: color-mix(in srgb, var(--ic) 11%, white);
}
.lc-info__title { margin: 0; color: var(--lc-ink) !important; font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 800; line-height: 1.5; }
.lc-info__text { margin: 0; color: var(--lc-muted); font-size: 1rem !important; line-height: 1.95; text-align: start; }
/* two wide cards (vision and mission): a larger title and text */
@media (min-width: 992px) {
    .lc-info--cols-2 .lc-info__card { gap: 14px; padding: 36px 38px 40px; }
    .lc-info--cols-2 .lc-info__title { font-size: 1.75rem; }
    .lc-info--cols-2 .lc-info__text { font-size: 1.12rem !important; line-height: 2.05; }
}
/* soft: a tinted card with a short accent bar on its start edge instead of a border all round */
.lc-info--soft .lc-info__card {
    border: 0; background: color-mix(in srgb, var(--ic) 6%, white);
    box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 14px 28px -20px color-mix(in srgb, var(--lc-ink) 28%, transparent);
}
.lc-info--soft .lc-info__card::before {
    content: ""; position: absolute; inset-inline-start: 0; inset-block: 24px; inline-size: 5px; background: var(--ic);
    border-start-end-radius: 5px; border-end-end-radius: 5px;
}
.lc-info--soft .lc-info__card:hover { background: #fff; box-shadow: 0 24px 42px -26px color-mix(in srgb, var(--ic) 60%, transparent); }
.lc-info--soft .lc-info__icon { inline-size: 50px; block-size: 50px; border-radius: 50%; font-size: 1.2rem; }

/* ---- photo with text and points (page-builder element ImageListStyleOne): the layout of the home page's "about us" (photo on the start side), with a
   list of points. The photo fills the height of the text column ---- */
.lc-split { background: #fff; }
.lc-split--tint { background: linear-gradient(180deg, var(--lc-tint) 0%, #fff 100%); }
.lc-split > .container > .row > [class*="col-"] { display: flex; }
.lc-split__media {
    position: relative; flex: 1 1 auto; display: flex; margin: 0; min-block-size: 340px; overflow: hidden; border-radius: calc(var(--lc-radius) + 8px);
    box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--lc-ink) 65%, transparent), 0 10px 24px -14px rgb(0 0 0 / .35);
}
.lc-split__media::after {
    content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 6px;
    background: linear-gradient(calc(90deg * var(--lc-dir)), var(--lc-accent), var(--lc-accent-2));
}
.lc-split__media img { display: block; inline-size: 100%; block-size: 100%; max-block-size: none !important; object-fit: cover; }
.lc-split__body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; inline-size: 100%; text-align: start; }
.lc-split__title { margin: 0; color: var(--lc-ink) !important; font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 800; line-height: 1.45; }
.lc-split__title::after {
    content: ""; display: block; inline-size: 64px; block-size: 4px; margin-block-start: 14px; border-radius: 4px;
    background: linear-gradient(calc(90deg * var(--lc-dir)), var(--lc-accent), var(--lc-accent-2));
}
.lc-split__text { margin-block-start: 18px; color: var(--lc-muted); text-align: start; }
.lc-split__text p { margin: 0 0 12px; color: var(--lc-muted); font-size: 1.06rem !important; line-height: 2; text-align: start; }
.lc-split__text strong { color: var(--lc-ink); font-weight: 800; }
.lc-points { inline-size: 100%; display: flex; flex-direction: column; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.lc-point {
    display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px; text-align: start; background: #fff;
    border: 1px solid var(--lc-line); border-radius: var(--lc-radius); box-shadow: var(--lc-shadow);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.lc-point:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--lc-accent) 38%, transparent); box-shadow: var(--lc-shadow-hover); }
.lc-point__icon {
    flex: 0 0 auto; display: grid; place-items: center; inline-size: 46px; block-size: 46px; border-radius: 14px; font-size: 1.1rem; color: #fff;
    background: linear-gradient(135deg, var(--lc-accent), var(--lc-accent-2));
}
.lc-point__body { min-inline-size: 0; }
.lc-point__title { margin: 0; color: var(--lc-ink) !important; font-size: 1.08rem; font-weight: 800; line-height: 1.55; }
.lc-point__text { margin: 4px 0 0; color: var(--lc-muted); font-size: .98rem !important; line-height: 1.85; text-align: start; }
/* a point with a title only: a plain check line */
.lc-point--plain { align-items: center; padding: 9px 16px; box-shadow: none; background: var(--lc-tint); border-color: transparent; }
.lc-point--plain:hover { transform: none; box-shadow: none; }
.lc-point--plain .lc-point__icon { inline-size: 30px; block-size: 30px; border-radius: 50%; font-size: .75rem; }
.lc-point--plain .lc-point__title { font-size: 1rem; font-weight: 700; }
@media (max-width: 991px) {
    .lc-split__media { min-block-size: 0; aspect-ratio: 4 / 3; }
}

/* ---- process steps (page-builder element ProcessStepsStyleOne): in a row joined by a dashed line, one under the other on a phone ---- */
.lc-steps { display: grid; gap: 28px 12px; margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .lc-steps { grid-template-columns: repeat(var(--lc-steps-cols, 5), minmax(0, 1fr)); } }
.lc-step { position: relative; display: flex; flex-direction: column; align-items: center; padding-inline: 6px; text-align: center; }
.lc-step__num {
    position: relative; z-index: 1; display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 50%;
    color: #fff; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, var(--lc-accent), var(--lc-accent-2));
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--lc-accent) 12%, white), 0 16px 26px -14px color-mix(in srgb, var(--lc-accent) 75%, transparent);
}
.lc-step__body { margin-block-start: 16px; }
.lc-step__title { margin: 0; color: var(--lc-ink) !important; font-size: 1.08rem; font-weight: 800; line-height: 1.55; }
.lc-step__text { margin: 6px 0 0; color: var(--lc-muted); font-size: .94rem !important; line-height: 1.85; text-align: center; }
/* the dashed line runs from one circle towards the next, along the reading direction (inset-inline-start follows it) */
@media (min-width: 768px) {
    .lc-step:not(:last-child)::after {
        content: ""; position: absolute; inset-block-start: 31px; inset-inline-start: calc(50% + 44px); inline-size: calc(100% - 88px + 12px); block-size: 0;
        border-block-start: 3px dashed color-mix(in srgb, var(--lc-accent) 35%, white);
    }
}
@media (max-width: 767px) {
    .lc-steps { gap: 0; }
    .lc-step { flex-direction: row; align-items: flex-start; gap: 16px; padding: 0 0 26px; text-align: start; }
    .lc-step__num { flex: 0 0 auto; inline-size: 52px; block-size: 52px; font-size: 1.25rem; box-shadow: 0 0 0 6px color-mix(in srgb, var(--lc-accent) 12%, white); }
    .lc-step__body { margin-block-start: 2px; }
    .lc-step__text { text-align: start; }
    .lc-step:not(:last-child)::after {
        content: ""; position: absolute; inset-block-start: 62px; inset-inline-start: 25px; inline-size: 0; block-size: calc(100% - 62px);
        border-inline-start: 3px dashed color-mix(in srgb, var(--lc-accent) 35%, white);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lc-card, .lc-card *, .lc-icon, .lc-icon *, .lc-info__card, .lc-point, .lc-why__item { transition: none !important; }
    .lc-card:hover, .lc-icon:hover, .lc-info__card:hover, .lc-point:hover, .lc-why__item:hover { transform: none; }
}