#st-lp-hero-polaroid-01 {
    top: 1.5%;
    left: 17%;
    transform: rotate(-8deg);
    width: 18vw;
}

#st-lp-hero-prop-01 {
    width: 5vw;
    top: 82%;
    left: 65%;
    transform: rotate(0deg);
}

#st-lp-hero-doodle-01 {
    width: 15vw;
    right: 0;
    top: 17%;
}

@media (max-width: 1023px) {
    #st-lp-hero-polaroid-01 {
        width: 21vw;
        top: 24%;
        left: 12%;
    }

    #st-lp-hero-prop-01 {
        width: 6vw;
        top: 77%;
        left: 77%;
    }

    #st-lp-hero-doodle-01 {
        top: 6%;
    }

}



.st-section--top {
    margin-top: var(--main-section-first-margin-top);
}

.st-section--bottom {
    margin-bottom: var(--main-section-margin-bottom);
}

.st-section--relative {
    position: relative;
}

@media (max-width: 1023px) {
    .st-section--mobile {
        margin-left: var(--main-section-margin-side);
        margin-right: var(--main-section-margin-side);
    }
}




/************************
***** ST TEXT BLOCK ****
************************/

.st-section--lp-heading {
    margin-bottom: 3vw;
}

h1.st-section__heading, h2.st-section__heading, h3.st-section__heading {
    line-height: 1.1;
    margin-bottom: clamp(5px, 0.5vw, 10px);
    font-family: var(--main-heading-font-family);
    padding: 0;
    font-size: var(--main-heading-font-size);
}

h1.st-section__heading--center, h2.st-section__heading--center, h3.st-section__heading--center {
    text-align: center;
}

.st-section__text-container {
    display: flex;
    flex-direction: column;
    max-width: 42%;
}

.st-section__text-container--right {
    order: 1;
}

h2.st-section__text, p.st-section__text {
    margin-bottom: 0;
    font-family: var(--main-text-font-family);
    color: black;
    line-height: 1.25;
    font-size: var(--main-text-font-size);
    font-weight: 400;
}

h2.st-section__text--title, p.st-section__text--title {
    font-family: var(--main-heading-font-family);
}

h3.st-section__subtitle {
    margin-bottom: 0;
    font-family: var(--main-heading-font-family);
    color: white;
    line-height: 1;
    font-weight: 400;
    font-size: 16px;
    order: -1;
    align-self: flex-start;
    background: var(--main-orange-background);
    padding: 10px 16px 8px;
    border-radius: 5px;
}

.st-section__text-btn-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.st-section__text-button {
    margin-top: 30px;
}

.st-section--text {
    display: flex;
    flex-wrap: wrap;
}

.st-section__img-container {
    flex: 1;
    position: relative;
}

.st-section__tag-container {
    display: flex;
    gap: 15px 30px;
    flex-wrap: wrap;
}

.st-section__tag {
    display: flex;
    gap: 5px;
    align-items: center;
}

.st-section__tag-icon {
    width: 24px;
    height: 24px;
}

h4.st-section__tag-label {
    margin-bottom: 0;
    font-family: var(--main-heading-font-family);
    color: black;
    line-height: 1;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}

h5.st-section__tag-value {
    margin-bottom: 0;
    font-family: var(--main-text-font-family);
    color: black;
    line-height: 1.25;
    font-size: 16px;
    font-weight: 400;
    background: #EDEDED;
    padding: 4px 8px 3px;
    border-radius: 5px;
    white-space: nowrap;
}

.st-section__achievement-wrapper {
    width: 100%;
    margin-top: clamp(40px, 3vw, 50px);
    padding: 0 clamp(
        10vw,
        calc(20.714vw - 109.714px),
        15vw
    );
    order: 1;
    margin-bottom: 55px;
}

.st-section__achievement-container {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 3%;
    gap: 10px;
}

.st-section__achievement-container--img {
    background: white;
    border-radius: 15px;
    justify-content: space-between;
    padding: 10px 5%;
    margin-top: 15px;
    gap: unset;
}

.st-section__achievement {
    text-align: center;
}

.st-section__achievement--img {
    width: 10%;
}

p.st-section__achievement-text, h4.st-section__achievement-text {
    line-height: 1;
    margin-bottom: 0;
    font-family: var(--main-heading-font-family);
    padding: 0;
    font-size: var(--main-text-font-size);
    color: var(--main-button-color);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: 0.01px;
}

p.st-section__achievement-label, h5.st-section__achievement-label {
    margin-bottom: 0;
    font-family: var(--main-heading-font-family);
    color: black;
    line-height: 1.25;
    font-weight: 400;
    font-size: clamp(18px, 1.05vw, 20px);
    letter-spacing: 0.01px;
}

.st-section__achievement-img {
    object-fit: contain;
}



/* ── Tablet ──────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
    h1.st-section__heading, h2.st-section__heading, h3.st-section__heading {
        font-size: var(--main-heading-font-size-tablet);
    }

    .st-section__text-container {
        max-width: 52%;
    }

    h2.st-section__text, p.st-section__text {
        font-size: var(--main-text-font-size-tablet);
    }

    .st-section__achievement-wrapper {
        padding: 0 5vw;
        margin-top: 40px;
        margin-bottom: 45px;
    }

    .st-section__achievement-container {
        justify-content: space-between;
    }

}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .st-section__text-button {
        margin-top: 20px;
    }

    .st-section--text {
        flex-direction: column;
    }

    h1.st-section__heading, h2.st-section__heading, h3.st-section__heading {
        font-size: var(--main-heading-font-size-mobile);
    }

    .st-section__text-container {
        max-width: 100%;
    }

    .st-section__text-container--right {
        order: unset;
    }

    h2.st-section__text, p.st-section__text {
        font-size: var(--main-text-font-size-mobile);
    }

    .st-section__img-container {
        padding-top: 54vw;
    }

    .st-section__tag-container {
        flex-direction: column;
        gap: 10px;
    }

    .st-section__achievement-wrapper {
        margin-top: 60px;
        order: 0;
        padding: 0;
        margin-bottom: 45px;
    }

    .st-section__achievement-container {
        flex-wrap: wrap;
        padding: 0;
    }

    .st-section__achievement-container--img {
        flex-wrap: unset;
        overflow: auto;
        gap: 12px;
        border-radius: 10px;
        padding: 10px 5%;
    }

    .st-section__achievement {
        width: 48%;
    }

    .st-section__achievement--img {
        flex: 0 0 22%;
    }

}


/************************
***** ST YOUTUBE PLAYER BLOCK ****
************************/


.st-section__yt {
    position: relative;
    overflow: hidden;
    aspect-ratio: 2.3;
}

.st-section__yt-container {
    aspect-ratio: 16 / 9;
    max-width: unset !important;
    position: absolute;
    width: 100%;
    transform: translateY(-50%);
    top: 50%;
}

.st-section__yt-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.st-section__yt-thumbnail {
    width: 100%;
    height: 99.53%;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}

.st-section__yt-bar {
    width: 100%;
    position: absolute;
    left: 0;
    background: black;
    height: 13%;
}

.st-section__yt-bar--top {
    top: 0;
}

.st-section__yt-bar--bottom {
    bottom: 0;
}

.st-section__yt-text-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding-bottom: 50px;
    padding-top: 30px;
    background: linear-gradient(transparent, black);
}

.st-section__yt-text-container {
    max-width: max(550px, 50%);
    margin: auto;
}

h2.st-section__yt-title, h3.st-section__yt-title {
    line-height: 1.1;
    margin-bottom: clamp(5px, 0.5vw, 10px);
    font-family: var(--main-heading-font-family);
    padding: 0;
    font-size: var(--main-heading-font-size);
    color: white;
}

h3.st-section__yt-text, h4.st-section__yt-text {
    line-height: 1.25;
    margin-bottom: 0;
    font-family: var(--main-heading-font-family);
    font-size: var(--main-text-font-size);
    font-weight: 400;
    color: white;
}

@media (max-width: 1023px) {
    h2.st-section__yt-title, h3.st-section__yt-title {
        font-size: var(--main-heading-font-size-tablet);
    }

    h3.st-section__yt-text, h4.st-section__yt-text {
        font-size: var(--main-text-font-size-tablet);
    }
}

@media (max-width: 767px) {
    .st-section__yt {
        height: 63vh;
        aspect-ratio: unset;
    }

    .st-section__yt-container {
        height: 85vh;
        width: unset;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

    .st-section__yt-text-wrapper {
        padding-bottom: 30px;
    }

    .st-section__yt-text-container {
        max-width: calc(100% - 2 * var(--main-section-margin-side));
    }

    h2.st-section__yt-title, h3.st-section__yt-title {
        font-size: var(--main-heading-font-size-mobile);
    }

    h3.st-section__yt-text, h4.st-section__yt-text {
        font-size: var(--main-text-font-size-mobile);
    }
}



/************************
***** ST STEPS BLOCK ****
************************/

.st-section__step-container {
    display: flex;
    gap: clamp(10px, 1.3vw, 15px);
    margin-top: 2vw;
}

.st-section__step {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: white;
    padding: clamp(15px, 1.56vw, 30px);
    border-radius: 10px;
    gap: clamp(15px, 1.56vw, 30px);
}

.st-section__step-img {
    max-width: 27.5%;
    aspect-ratio: 1;
}

h2.st-section__step-title, h3.st-section__step-title {
    line-height: 1;
    margin-bottom: 0;
    font-family: var(--main-heading-font-family);
    padding: 0;
    font-size: var(--main-subheading-font-size);
}

@media (max-width: 1023px) {

    h2.st-section__step-title, h3.st-section__step-title {
        font-size: var(--main-subheading-font-size-tablet);
    }
}

@media (max-width: 767px) {
    .st-section__step-container {
        flex-direction: column;
    }

    .st-section__step {
        padding: 20px 15px;
    }

    h2.st-section__step-title, h3.st-section__step-title {
        font-size: var(--main-subheading-font-size-mobile);
    }
}



/************************
***** ST-COLUMNS BLOCK ****
************************/

/* ── Title ─────────────────────────────────────────────────────────────── */

h1.st-columns__title,
h2.st-columns__title,
h3.st-columns__title {
    text-align: center;
    text-transform: none;
    margin: 0 12.5vw;
    font-family: bookmania, sans-serif;
    font-weight: 600;
    line-height: 1.1;
    font-size: var(--main-heading-font-size);
}

/* ── Wrapper ────────────────────────────────────────────────────────────── */

.st-columns {
    /* --st-col-count set via inline style by the PHP builder */
}

/* ── Tab menu ───────────────────────────────────────────────────────────── */

.st-columns__menu {
    display: none; /* hidden on desktop by default */
    justify-content: space-between;
    position: relative;
    padding: 5vw 15% 3px;
    gap: clamp(30px, 4.8%, 60px);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 1;
}

.st-columns__menu::-webkit-scrollbar {
    display: none;
}

/* Show menu on desktop when there are >4 columns (overflow mode) */
.st-columns--overflow .st-columns__menu {
    display: flex;
}

.st-columns__menu-item {
    cursor: pointer;
    margin: 0 !important;
    font-family: franklin-gothic-urw, sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 3.75vw, 1.75em);
    color: black;
}

.st-columns__menu-item--active {
    font-weight: 500;
}

.st-columns__menu-underline {
    height: 3px;
    background: black;
    position: absolute;
    bottom: 0;
    left: 15%;
    width: 63px;
    border-radius: 15px;
    opacity: 0;
    transition: left 0.3s, width 0.3s;
}

/* ── Column list ────────────────────────────────────────────────────────── */

.st-columns__list {
    /* Gap used both as flex gap and in the width calculation for items */
    --_gap: 10%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--_gap) / ((var(--st-col-count, 3) - 1)));
    padding: 4vw 12.5vw 2.2vw 12.5vw;
}

.st-columns--overflow .st-columns__list::before, .st-columns--overflow .st-columns__list::after {
    content: '';
    display: block;
    width: 15vw;
    flex: none;
}

/* Desktop overflow: show menu + horizontal scroll, columns don't wrap */
.st-columns--overflow .st-columns__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-left: 0;
    padding-right: 0;
}
.st-columns--overflow .st-columns__list::-webkit-scrollbar {
    display: none;
}

/* ── Column item ─────────────────────────────────────────────────────────── */

.st-columns__item {
    /*
    * Width = (available width − gaps between items) ÷ number of items.
    * --st-col-count is a unitless integer set as an inline style on .st-columns.
    * --_gap is inherited from .st-columns__list.
    * This produces correct widths for 1, 2, 3, 4 columns automatically.
    */
    flex: 0 0 calc(100% / 3 - var(--_gap) / (var(--st-col-count, 3)));
    max-width: calc(100% / 3 - var(--_gap) / (var(--st-col-count, 3)));

    background-color: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
    position: relative;
    transition: transform 0.15s ease-in-out;
}

.st-columns__item:hover {
    transform: scale(1.075);
}

@media (min-width: 768px) {
    /* In overflow mode on desktop, items are also fixed-width */
    .st-columns--overflow .st-columns__item {
        flex: none;
        max-width: 32vw;
        width: 32vw;
    }
}

/* ── Item image ──────────────────────────────────────────────────────────── */

.st-columns__item-img img {
    width: 100%;
    border-radius: 30px;
}

/* ── Item title ──────────────────────────────────────────────────────────── */

.st-columns__item-title {
    font-family: bookmania, sans-serif;
    font-weight: 600;
    margin: 0;
    margin-top: 6.5%;
    line-height: 1.5;
    font-size: clamp(25px, 2.45vw, 40px);
}

/* ── Item price ──────────────────────────────────────────────────────────── */

p.st-columns__item-price {
    font-family: bookmania, sans-serif;
    margin: 0;
    line-height: 1;
    font-weight: 600;
    color: #c96d36;
    font-size: clamp(22px, 2.1vw, 37px);
}

.st-columns__item-price-unit {
    color: #5a5a5a;
    font-size: 17px;
}

/* ── Item description ────────────────────────────────────────────────────── */

.st-columns__item-description {
    font-size: clamp(15px, 1.45vw, 20px);
    line-height: 1.25;
    margin: 3.75% 0;
    color: black;
}

/* ── Feature list ────────────────────────────────────────────────────────── */

ul.st-columns__item-features {
    list-style-type: none;
    padding: 0;
    margin-top: 5%;
    margin-bottom: 6.5%;
}

.st-columns__item-feature {
    position: relative;
    padding: 0 0 0 8%;
    margin-bottom: 5.5%;
    color: black;
    line-height: 1.15;
    font-size: clamp(15px, 1.45vw, 20px);
}

.st-columns__item-feature::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45vw;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #1a4620;
}

/* ── CTA button / anchor ─────────────────────────────────────────────────── */

.st-columns__item-cta {
    margin-top: auto;
    min-width: unset;
}

/* Overlay anchor inside button (keeps button focusable, link handles navigation) */
.st-columns__item-cta-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

/* ── Tablet ──────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
    h1.st-columns__title,
    h2.st-columns__title,
    h3.st-columns__title {
        font-size: var(--main-heading-font-size-tablet);
        margin: 0 var(--main-section-margin-side);
    }

    .st-columns__list {
        padding: 4vw 5vw 2.2vw 5vw;
    }

    .st-columns__item-title {
        font-size: clamp(22px, 2.7vw, 25px);
    }

    .st-columns__item-price {
        font-size: clamp(19px, 2.4vw, 22px);
    }

    .st-columns__item-price-unit {
        font-size: 15px;
    }

    .st-columns__item-feature::before {
        width: 8px;
        height: 8px;
    }

    .st-columns__item-cta {
        font-size: clamp(19px, 2.4vw, 22px);
        height: clamp(38px, 4.9vw, 45px);
        padding-top: clamp(11px, 6%, 15px);
    }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    h1.st-columns__title,
    h2.st-columns__title,
    h3.st-columns__title {
        font-size: var(--main-heading-font-size-mobile);
    }

    /* Always show the tab menu on mobile (when present) */
    .st-columns__menu {
        display: flex;
    }

    /* Mobile: horizontal scroll, all columns at 70vw */
    .st-columns__list {
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 8%;
        padding: 4vw 0 0 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .st-columns__list::-webkit-scrollbar {
        display: none;
    }

    /* Spacers create peek-through effect at edges */
    .st-columns__list::before,
    .st-columns__list::after {
        content: '';
        display: block;
        width: 15vw;
        flex: none;
    }

    .st-columns__item {
        width: 70vw;
        max-width: 70vw;
        flex: none;
        scroll-snap-align: center;
    }

    .st-columns__item:hover {
        transform: none;
    }

    .st-columns__item-title {
        text-align: left;
        font-size: clamp(22px, 6.9vw, 40px);
    }

    .st-columns__item-price {
        text-align: left;
        font-size: clamp(17px, 4.6vw, 30px);
    }

    .st-columns__item-price-unit {
        font-size: clamp(15px, 4vw, 17px);
    }

    .st-columns__item-features {
        padding-left: 0;
    }

    .st-columns__item-feature {
        padding-left: clamp(20px, 9%, 40px);
        font-size: clamp(15px, 4.1vw, 20px);
    }

    .st-columns__item-feature::before {
        width: 8px;
        height: 8px;
    }

    .st-columns__item-cta {
        font-size: clamp(19px, 5.2vw, 30px);
        height: clamp(38px, 10.3vw, 60px);
        padding-top: clamp(11px, 4.5%, 17px);
    }
}


/* ── Stats list ────────────────────────────────────────────────────────── */
.st-section.st-stats {
    background: var(--main-green-background);

    /* Prevent existing .st-section side margins from stacking with this section */
    margin-left: 0;
    margin-right: 0;

    /* 15vw side spacing, as requested */
    padding: 6vw clamp(200px, 23.5vw, 500px);
}

.st-stats__heading {
    color: white;
    text-align: center;
}

/* Desktop grid */
.st-stats__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3vw;
    width: 100%;
    margin-top: clamp(45px, 4vw, 75px);
}

/* Every card stretches to the row height */
.st-stats__grid-item {
    display: flex;
    align-items: stretch;
    min-width: 0;
}

/* Main item: number and text below each other */
.st-stats__grid-item--main {
    flex-direction: column;
    justify-content: center;
    padding-inline-start: 6%;
}

/* Big image should fill the height of the first row */
.st-stats__grid-item--image-big {
    align-items: stretch;
}

/* Normal items: image left, text right */
.st-stats__grid-item:not(.st-stats__grid-item--main):not(.st-stats__grid-item--image-big) {
    flex-direction: row;
    align-items: stretch;
    gap: 1.5vw;
}

.st-stats__grid-item-img-container {
    width: 8.5vw;
    display: flex;
    align-items: stretch;
    justify-content: center;
    aspect-ratio: 1;
}

.st-stats__grid-item-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: invert();
}

.st-stats__grid-item-img--big {
    width: 17.5vw;
}

.st-stats__grid-item-text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.st-stats__grid-item-number,
.st-stats__grid-item-text {
    margin: 0;
    padding: 0;
    line-height: 1;
    font-family: var(--main-heading-font-family);
    color: white;
}

.st-stats__grid-item-number {
    font-size: var(--main-heading-font-size);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.st-stats__grid-item-number--big {
    font-size: clamp(50px, 4.72vw, 90px);
}

.st-stats__grid-item-text {
    margin-top: 0.4em;
    font-size: var(--main-text-font-size);
    font-weight: 400;
}

.st-stats__grid-item-text--big {
    font-size: var(--main-subheading-font-size);
}

@media (max-width: 1023px) {
    .st-section.st-stats {
        padding: 8vw clamp(125px, 16.3vw, 200px);
    }

    .st-stats__grid-item-number {
        font-size: var(--main-heading-font-size-tablet);
    }

    .st-stats__grid-item-number--big {
        font-size: clamp(45px, 5vw, 50px);
    }

    .st-stats__grid-item-text {
        font-size: var(--main-text-font-size-tablet);
    }

    .st-stats__grid-item-text--big {
        font-size: var(--main-subheading-font-size-tablet);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .st-section.st-stats {
        padding: 10vw;
    }

    .st-stats__grid {
        grid-template-columns: 1fr;
        gap: 5vw;
    }

    /* Bigger gap between second and third item */
    .st-stats__grid-item:nth-child(3) {
        margin-top: 8vw;
    }

    .st-stats__grid-item--main {
        text-align: center;
        padding-inline-start: unset;
    }

    .st-stats__grid-item--image-big {
        justify-content: center;
        min-height: 45vw;
    }

    .st-stats__grid-item-img--big {
        width: 50vw;
    }

    .st-stats__grid-item:not(.st-stats__grid-item--main):not(.st-stats__grid-item--image-big) {
        gap: 6vw;
    }

    .st-stats__grid-item-img-container {
        flex-basis: clamp(70px, 22vw, 120px);
    }

    .st-stats__grid-item-number {
        font-size: var(--main-heading-font-size-mobile);
    }

    .st-stats__grid-item-number--big {
        font-size: clamp(50px, 12.5vw, 90px);
    }

    .st-stats__grid-item-text {
        font-size: var(--main-text-font-size-mobile);
    }

    .st-stats__grid-item-text--big {
        font-size: var(--main-subheading-font-size-mobile);
    }
}



#st-lp__doodle-reviews {
    width: 8%;
    top: 61%;
    right: -12%;
    transform: rotate(-110deg) scaleX(-1);
}

.st-companies {
    display: flex;
    flex-direction: column;
}

.st-companies__heading-container {
    position: relative;
    display: inline-flex;
    margin: auto;
}

.st-companies__heading {
    text-align: center;
}

.st-companies__row-container {
    display: flex;
    margin-top: 3vw;
    flex-direction: column;
    gap: 2vw;
    margin-left: 14vw;
    margin-right: 14vw;
}

.st-companies__row {
    grid-template-columns: repeat(4, 1fr);
    display: grid;
    align-items: center;
    gap: 5vw;
}

.st-reviews {
    margin-top: 6vw;
}

.st-reviews__wrapper {
    display: flex;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
    -ms-overflow-style: none;
}


.st-reviews__wrapper::-webkit-scrollbar {
    display: none;
}

.st-reviews__wrapper--animating {
    scroll-snap-type: none;
}

.st-reviews__wrapper:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
}

.st-reviews__container {
    box-sizing: border-box;
    width: 100%;
    min-width: 100%;
    display: flex;
    flex: 0 0 100%;
    padding: 0 6vw;
    gap: clamp(15px, 1.56vw, 30px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.st-reviews__card {
    display: flex;
    flex: 1;
    flex-direction: column;
    background: white;
    padding: 20px;
    justify-content: space-between;
    gap: 30px;
    border-radius: clamp(8px, 0.7vw, 12px);
}

.st-reviews__star-container {
    display: flex;
    margin-bottom: clamp(15px, 0.8vw, 10px);
    gap: clamp(7px, 0.53vw, 10px);
}

.st-reviews__star {
    color: #C96D36;
}

p.st-reviews__customer {
    font-family: var(--main-heading-font-family);
    line-height: 1.1;
    font-size: clamp(18px, 1.05vw, 20px);
}

p.st-reviews__company {
    opacity: 0.65;
}

.st-reviews__controller-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: clamp(30px, 2.9vw, 50px);
    gap: clamp(25px, 2.3vw, 45px);
}

.st-reviews__controller-arrow-container,
.st-reviews__controller-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 44px;
    min-height: 44px;
    padding: 0;

    border: 0;
    background: transparent !important;
    cursor: pointer;
}

.st-reviews__controller-arrow-container {
    opacity: 0.5;
}

.st-reviews__controller-arrow-container:hover,
.st-reviews__controller-arrow-container:focus-visible {
    opacity: 1;
}

.st-reviews__controller-arrow-container:disabled {
    opacity: 0.2;
    cursor: default;
}

.st-reviews__controller-arrow--next {
    transform: rotate(180deg);
}

.st-reviews__controller-dots-container {
    display: flex;
    align-items: center;
}

.st-reviews__controller-dot {
    opacity: 0.4;
}

.st-reviews__controller-dot--active,
.st-reviews__controller-dot:hover,
.st-reviews__controller-dot:focus-visible {
    opacity: 1;
}

.st-reviews__controller-dot-img {
    display: block;
    width: 12px;
    height: 12px;
    background: black;
    border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
    .st-reviews__wrapper {
        scroll-behavior: auto;
    }
}

@media (max-width: 1023px) {
    p.st-reviews__customer {
        font-size: clamp(16px, 2.05vw, 18px)
    }

    .st-reviews__controller-container {
        gap: clamp(15px, 1.9vw, 25px);
    }
}


@media (max-width: 767px) {
    .st-companies__heading-container, .st-companies__row-container {
        margin-left: var(--main-section-margin-side);
        margin-right: var(--main-section-margin-side);
    }

    .st-companies__row-container {
        margin-top: clamp(30px, 10.3vw, 45px);
    }

    .st-companies__row {
        grid-template-columns: repeat(2, 1fr);
        gap: 10vw;
    }

    .st-reviews {
        margin-top: clamp(45px, 13.9vw, 60px);
    }

    .st-reviews__card:not(:first-of-type) {
        display: none;
    }

    .st-reviews__controller-container {
        gap: 5px;
    }

    .st-reviews__controller-dot {
        padding-left: 15px;
        padding-right: 15px;
    }
}


.st-service__section {
    /* padding-top: clamp(45px, 4.4vw, 85px); */
    /* padding-bottom: 60px; */
    margin-top: var(--main-section-first-margin-top);
    margin-bottom: var(--main-section-margin-bottom);
    position: relative;
}

.st-service__grid {
    display: grid;
    width: 100%;
    grid-template-areas:
        "title title"
        "text summary"
        "buttons .";
    /* grid-template-areas:
        ". title title ."
        ". text summary ."
        ". buttons . ."; */
    padding: 0;
    margin: 0 auto;
    justify-content: center;
    grid-template-columns: calc(41.22vw - clamp(0px, calc((1920px - 100vw) * (20 / 896)), 20px)) clamp(210px, calc(310px - (1920px - 100vw) * (100 / 896)), 310px);
    /* grid-template-columns: calc(((58vw - clamp(210px, calc(310px - (1920px - 100vw) * (100 / 896)), 310px)) / 2) + clamp(0px, calc((1920px - 100vw)*(10 / 896)), 10px)) 1fr clamp(210px, calc(310px - (1920px - 100vw) * (100 / 896)), 310px) calc(((58vw - clamp(210px, calc(310px - (1920px - 100vw) * (100 / 896)), 310px)) / 2) + clamp(0px, calc((1920px - 100vw)*(10 / 896)), 10px)); */
    gap: clamp(20px, 1.9vw, 40px) 0;
}

.st-service__title-container {
    grid-area: title;
}

h1.st-service__title, h2.st-service__title {
    line-height: 1;
    margin-bottom: clamp(5px, 0.5vw, 10px);
    font-family: var(--main-heading-font-family);
    padding: 0;
    font-size: var(--main-heading-font-size);
}

.st-service__hr-divider {
    height: 3px;
    margin: 0;
}

.st-service__summary-container {
    grid-area: summary;
    border-left: 3px solid #ccc;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: clamp(10px, 1vw, 25px);
}

h2.st-service__main-point, h3.st-service__main-point {
    line-height: 1.25;
    margin-bottom: clamp(15px, 1.45vw, 20px);
    font-family: var(--main-heading-font-family);
    font-size: clamp(20px, 1.7vw, 26px);
}

.st-service__main-point.st-service__main-point--last {
    margin-bottom: 10px;
}

.st-service__text--orange {
    color: var(--main-orange-background);
    white-space: nowrap;
}

.st-service__text--addendum {
    color: #5A5A5A;
    font-size: 17px;
}

p.st-service__extra_point {
    font-family: var(--main-heading-font-family);
    margin-bottom: clamp(15px, 1.45vw, 20px);
    color: black;
    opacity: 0.75;
}

ul.st-service__points-list {
    margin: 0;
    padding-left: 0;
    padding-top: clamp(10px, 1vw, 15px);
    font-family: var(--main-text-font-family);
    color: black;
    line-height: 1.1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    list-style-type: none;
    font-size: clamp(17px, 1.665vw, 20px);
}

.st-service__point {
    position: relative;
    padding-left: clamp(20px, 1.95vw, 22px);
}

.st-service__point::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    border-radius: 50%;
    background-color: #1A4620;
    --marker-size-grid: clamp(10px, 1vw, 12px);
    width: var(--marker-size-grid);
    height: var(--marker-size-grid);
}

.st-service__text-container {
    grid-area: text;
    padding-bottom: 15px;
    padding-right: clamp(10px, 1vw, 30px);
}

h2.st-service__subtitle, h3.st-service__subtitle {
    line-height: 1;
    margin-bottom: clamp(5px, 0.5vw, 10px);
    font-family: var(--main-heading-font-family);
    font-size: clamp(26px, 2.54vw, 32px);
}

p.st-service__text {
    margin-bottom: 0;
    font-family: var(--main-text-font-family);
    color: black;
    line-height: 1.1;
    font-size: var(--main-text-font-size);
}

.st-service__button-container {
    grid-area: buttons;
    display: flex;
    justify-content: space-between;
    gap: clamp(20px, 1.95vw, 50px);
    flex-wrap: wrap;
}

.st-service__button {
    flex: 1;
}

@media (max-width: 1023px) {

    .st-service__section {
        /* padding-bottom: clamp(45px, 4.4vw, 85px); */
        /* margin: 0 6%; */
        margin-left: var(--main-section-margin-side);
        margin-right: var(--main-section-margin-side);
    }

    .st-service__grid {
        grid-template-columns: none;
        grid-template-areas:
            "title"
            "summary"
            "buttons"
            "text";
        --mobile-gap-grid: clamp(20px, 6.4vw, 30px);
        gap: var(--mobile-gap-grid);
    }

    h1.st-service__title, h2.st-service__title {
        font-size: var(--main-heading-font-size-tablet);
        margin-bottom: clamp(12px, 3.8vw, 20px);
    }

    .st-service__summary-container {
        padding: 0;
        border-left: none;
    }

    h2.st-service__main-point, h3.st-service__main-point {
        font-size: clamp(17px, 5.13vw, 26px);
    }

    .st-service__main-point.st-service__main-point--last {
        margin-bottom: var(--mobile-gap-grid);
    }

    p.st-service__extra_point {
        margin-bottom: 5px;
    }

    ul.st-service__points-list {
        padding: var(--mobile-gap-grid) 0 0;
        font-size: clamp(15px, 4.36vw, 20px);
        gap: clamp(12px, 3.85vw, 20px);
    }

    .st-service__text-container {
        padding: var(--mobile-gap-grid) 0 0;
    }

    h2.st-service__subtitle, h3.st-service__subtitle {
        font-size: clamp(22px, 6.67vw, 32px);
        margin-bottom: clamp(5px, 1.3vw, 10px);
    }

    p.st-service__text {
        font-size: var(--main-text-font-size-tablet);
    }

}

@media (max-width: 767px) {

    h1.st-service__title, h2.st-service__title {
        font-size: var(--main-heading-font-size-mobile);
    }

    p.st-service__text {
        font-size: var(--main-text-font-size-mobile);
    }
}