/* ==========================================================================
Home — hero (main.css section 5 provides .container/.section)
========================================================================== */
.hero {
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg);
}

/* --- background photo -------------------------------------------------- */
.hero__stage--desktop {
    display: none;
}

.hero__stage--mobile {
    position: absolute;
    inset: 0;
}

.hero__stage--desktop .slider, .hero__stage--desktop .slider__slide, .hero__stage--desktop .slider__image {
    height: 100%;
}

.hero__stage--desktop .slider {
    height: 49.1rem;
}

.hero__overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 49.1rem;
    pointer-events: none;
}

/*
 * Same composed dimming used on the Solutions hero:
 * left-side shade + top fade + lower diagonal shade.
 */
.hero__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.hero__frame--top {
    object-position: top;
}

/* --- top content (kicker / h1 / cta / text / badges) ------------------- */
.hero__content {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    max-width: var(--container-width);
    padding-top: 9.3rem;
    transform: translateX(-50%);
}

.hero__kicker {
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 0.2rem;
    color: var(--color-light);
}

.hero__title {
    max-width: 46.4rem;
    margin-top: 1.2rem;
    font-family: var(--font-serif);
    font-size: 3.2rem;
    font-weight: 400;
    line-height: 0.97;
    color: var(--color-light);
}

.hero__title em {
    font-style: italic;
    color: var(--color-accent);
}

.hero__cta {
    width: 100%;
    height: 4.12rem;
    margin-top: 2.08rem;
    padding: 0 2.4rem;
    font-size: 1.1rem;
}

.hero__text {
    max-width: 41.7rem;
    margin-top: 2.38rem;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-light);
}

.hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem 1.4rem;
    margin-top: 2.8rem;
}

.hero__badges li {
    position: relative;
    padding-top: 0.8rem;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0.12rem;
    text-transform: uppercase;
    color: var(--color-light);
}

.hero__badges li::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.6rem;
    height: 0.1rem;
    content: "";
    background-color: var(--color-light);
}

/* --- lead-form panel ---------------------------------------------------
The panel is a compact bar overlapping the bottom of the photo on
narrow screens, and a short strip that simply follows the photo
(no overlap) from 960px — see the two @media blocks below.
------------------------------------------------------------------- */
.hero__panel {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    background-color: var(--color-bg-light);
}

.hero__panel-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1200 / 164;
    pointer-events: none;
}

.hero__panel-inner {
    position: relative;
    display: flex;
    flex-direction: column;
}

.hero__panel-title {
    font-family: var(--font-serif);
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1.13;
    color: var(--color-light);
}

.hero__panel-text {
    max-width: 38rem;
    margin-top: 1.6rem;
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--color-light);
}

.hero__form {
    --field-height: 4rem;
    --field-font-size: 1rem;
    --button-font-size: 1.1rem;
}

/* Below 960px the lead-form is a single stacked column, not the shared
inline 3-column grid — override it locally for this section only. */
@media (max-width: 959px) {
    .hero__form.lead-form--inline {
        display: flex;
        flex-direction: column;
        gap: var(--field-gap);
    }
    .hero__form.lead-form--inline .lead-form__fields {
        display: flex;
        flex-direction: column;
        gap: var(--field-gap);
    }
    .hero__form.lead-form--inline .lead-form__submit {
        width: 100%;
    }
}

/* ---- < 480px (320 artboard) --------------------------------------- */
.hero {
    height: 96.5rem;
}

.hero__stage--mobile {
    height: 96.5rem;
}

.hero__panel {
    height: 42.1rem;
}

.hero__panel-inner {
    padding-top: 2.6rem;
}

.hero__panel-text {
    margin-top: 1.6rem;
}

.hero__form {
    margin-top: 2.3rem;
}

/* ---- 480–639px (480 artboard, real measurements) ------------------ */
@media (min-width: 480px) and (max-width: 639px) {
    .hero {
        height: 144.7rem;
    }
    .hero__stage--mobile {
        height: 144.7rem;
    }
    .hero__content {
        padding-top: 13.95rem;
    }
    .hero__title {
        max-width: 69.6rem;
        margin-top: 1.8rem;
        font-size: 4.8rem;
    }
    .hero__cta {
        margin-top: 2.97rem;
    }
    .hero__text {
        max-width: 62.55rem;
        margin-top: 3.58rem;
        font-size: 1.8rem;
    }
    .hero__badges {
        gap: 1.8rem 2.1rem;
        margin-top: 4.2rem;
    }
    .hero__badges li {
        padding-top: 1.2rem;
        font-size: 1.5rem;
        letter-spacing: 0.18rem;
    }
    .hero__panel {
        height: 62.4rem;
    }
    .hero__panel-inner {
        padding-top: 3.45rem;
    }
    .hero__panel-title {
        font-size: 3.6rem;
    }
    .hero__panel-text {
        max-width: 57rem;
        margin-top: 2.37rem;
        font-size: 1.8rem;
    }
    .hero__form {
        margin-top: 3.5rem;
    }
    .hero__form {
        --field-height: 6rem;
        --field-font-size: 1.5rem;
        --button-font-size: 1.65rem;
    }
}

/* ---- 640–959px (640 artboard, two-column panel) -------------------- */
@media (min-width: 640px) and (max-width: 959px) {
    .hero {
        height: 66.6rem;
    }
    .hero__stage--mobile {
        height: 66.6rem;
    }
    .hero__content {
        padding-top: 9.3rem;
    }
    .hero__title {
        max-width: 46.4rem;
    }
    .hero__cta {
        width: auto;
    }
    .hero__text {
        position: absolute;
        top: 21.9rem;
        left: 32rem;
        max-width: 27.8rem;
        margin-top: 0;
    }
    .hero__badges {
        position: absolute;
        top: 32.1rem;
        left: 32.1rem;
        max-width: 34.1rem;
    }
    .hero__panel {
        height: 28rem;
    }
    .hero__panel-inner {
        flex-direction: row;
        justify-content: space-between;
        gap: 1.6rem;
    }
    .hero__panel-head {
        flex: 0 0 27.8rem;
        padding-top: 2.9rem;
    }
    .hero__panel-text {
        margin-top: 3rem;
    }
    .hero__form {
        flex: 0 0 29.2rem;
        margin-top: 0;
        padding-top: 2.5rem;
    }
    .hero__form {
        --field-height: 4rem;
    }
}

/* ---- >= 960px (desktop: photo band + short panel strip) ------------ */
@media (min-width: 960px) {
    .hero {
        height: auto;
    }
    .hero__stage--desktop {
        display: block;
        position: relative;
    }
    .hero__stage--mobile {
        display: none;
    }
    .hero__content {
        padding-top: 10rem;
    }
    .hero__title {
        max-width: 46.4rem;
        font-size: 5.2rem;
        line-height: 0.97;
    }
    .hero__cta {
        width: auto;
    }
    .hero__text {
        position: absolute;
        top: 31.8rem;
        left: 46rem;
        max-width: 45.6rem;
        margin-top: 0;
    }
    .hero__badges {
        position: absolute;
        top: 43.8rem;
        left: 46rem;
        max-width: 55.4rem;
    }
    .hero__panel {
        position: relative;
        inset: auto;
        height: 14.6rem;
    }
    .hero__panel-inner {
        flex-direction: row;
        justify-content: space-between;
    }
    .hero__panel-head {
        flex: 0 0 42.8rem;
        padding-top: 3.2rem;
    }
    .hero__panel-text {
        max-width: 42.8rem;
        margin-top: 1.5rem;
    }
    .hero__form {
        flex: 0 0 48.2rem;
        margin-top: 0;
        padding-top: 3.2rem;
    }
}

@media (min-width: 1200px) {
    .hero__stage--desktop .slider {
        height: 49.1rem;
    }
    .hero__overlay {
        height: 49.1rem;
    }
    .hero__title {
        font-size: 5.2rem;
    }
    .hero__text {
        left: 55.8rem;
    }
    .hero__badges {
        left: 55.8rem;
    }
    .hero__panel {
        height: 13.7rem;
    }
    .hero__panel-head {
        flex: 0 0 51.9rem;
        padding-top: 3.2rem;
    }
    .hero__panel-title {
        font-size: 3.2rem;
    }
    .hero__panel-text {
        max-width: 51.9rem;
        font-size: 1.4rem;
    }
    .hero__form {
        flex: 0 0 59.8rem;
        margin-right: 0.4rem;
        padding-top: 2.2rem;
        --field-height: 5rem;
        --button-width: 18.5rem;
    }
    .hero__form.lead-form--inline {
        grid-template-columns: 19.5rem 19.5rem 18.5rem;
        column-gap: 1.15rem;
    }
}

/* ==========================================================================
Pergolas (главная: «Перголы ALSSEN» — видео и фотогалереи)
========================================================================== */
.pergolas {
    padding: 90px 0 45px;
}

.pergolas__title {
    line-height: 1.03;
    font-size: 2.8rem;
}

.pergolas__grid {
    margin-top: 3rem;
}

@media (min-width: 480px) {
    .pergolas__grid {
        margin-top: 4.5rem;
    }
}

.pergolas__video {
    aspect-ratio: 300 / 277;
}

.pergolas__video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pergolas__row {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;
}

.pergolas__item {
    position: relative;
    aspect-ratio: 300 / 273;
}

@media (min-width: 480px) and (max-width: 639px) {
    .pergolas__video {
        aspect-ratio: 459 / 319;
    }
    .pergolas__row--large > .pergolas__item {
        aspect-ratio: 220 / 200;
    }
    .pergolas__row--small > .pergolas__item {
        aspect-ratio: 220 / 200;
    }
    .pergolas__row--small > .pergolas__item:last-child {
        aspect-ratio: 460 / 261;
    }
}

@media (min-width: 640px) and (max-width: 959px) {
    .pergolas__video {
        aspect-ratio: 620 / 342;
    }
    .pergolas__row--large > .pergolas__item {
        aspect-ratio: 300 / 226;
    }
    .pergolas__row--small > .pergolas__item {
        aspect-ratio: 300 / 242;
    }
    .pergolas__row--small > .pergolas__item:last-child {
        aspect-ratio: 621 / 353;
    }
}

.pergolas__slider {
    width: 100%;
    height: 100%;
}

.pergolas__slider .slider__arrow {
    opacity: 0.6;
}

.pergolas__tag {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    z-index: 3;
    padding: 0.8rem 1.4rem;
    font-size: 0.8rem;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    color: var(--color-text-dark);
    background-color: rgb(247 244 238 / 94%);
}

@media (min-width: 640px) {
    .pergolas {
        padding-top: 150px;
    }
}

@media (min-width: 480px) {
    .pergolas__title {
        font-size: 3.6rem;
    }
    .pergolas__row--large, .pergolas__row--small {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .pergolas__row--large > .pergolas__item {
        flex: 1 1 calc(50% - 1rem);
    }
    .pergolas__row--small > .pergolas__item {
        flex: 1 1 calc(50% - 1rem);
    }
    .pergolas__row--small > .pergolas__item:last-child {
        flex-basis: 100%;
    }
}

@media (min-width: 960px) {
    .pergolas {
        padding: 150px 0 45px;
    }
    .pergolas__title {
        font-size: 4rem;
    }
    .pergolas__video {
        aspect-ratio: 1160 / 653;
    }
    .pergolas__row--large > .pergolas__item {
        aspect-ratio: 570 / 430;
    }
    .pergolas__row--small > .pergolas__item {
        aspect-ratio: 373 / 300;
    }
    .pergolas__row--small > .pergolas__item, .pergolas__row--small > .pergolas__item:last-child {
        flex: 1 1 calc(33.333% - 1.4rem);
    }
}

@media (min-width: 1200px) {
    .pergolas__title {
        font-size: 4.8rem;
    }
}

/* ==========================================================================
Audiences (главная: «Частный дом / Рестораны / Архитекторы»)
========================================================================== */
.audiences__grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.audience-card {
    position: relative;
    min-height: 41.5rem;
    padding: 4.3rem 2.2rem 2rem;
    border: 1px solid var(--color-line);
}

@media (min-width: 960px) {
    .audience-card {
        min-height: 45rem;
    }
}

@media (min-width: 1200px) {
    .audience-card {
        min-height: 46rem;
    }
}

.audience-card__tag {
    position: absolute;
    top: -0.05rem;
    left: 50%;
    padding: 1rem 1.6rem 0;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: 0.2rem;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    background-color: var(--color-bg);
    transform: translate(-50%, -50%);
}

.audience-card__title {
    max-width: 21rem;
    font-family: var(--font-serif);
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1.08;
    color: var(--color-light);
}

.audience-card__text {
    max-width: 29.8rem;
    margin-top: 2.6rem;
    padding-bottom: 2.6rem;
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--color-light);
    border-bottom: 1px solid var(--color-line);
}

.audience-card__features {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    margin-top: 2.6rem;
}

.audience-card__features li {
    position: relative;
    padding-left: 2.1rem;
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1.4;
    color: var(--color-light);
}

.audience-card__features li::before {
    position: absolute;
    top: 0.65rem;
    left: 0;
    width: 0.6rem;
    height: 0.1rem;
    content: "";
    background-color: var(--color-light);
}

@media (min-width: 480px) and (max-width: 639px) {
    .audience-card__features {
        flex-flow: row wrap;
        column-gap: 2rem;
    }
    .audience-card__features li {
        flex: 1 1 calc(50% - 1rem);
    }
}

@media (min-width: 640px) {
    .audiences__grid {
        flex-flow: row wrap;
    }
    .audience-card {
        flex: 1 1 calc(50% - 1rem);
    }
    .audiences__grid > .audience-card:first-child {
        flex-basis: 100%;
    }
    .audiences__grid > .audience-card:first-child .audience-card__features {
        flex-flow: row wrap;
        column-gap: 2rem;
    }
    .audiences__grid > .audience-card:first-child .audience-card__features li {
        flex: 1 1 calc(50% - 1rem);
    }
}

@media (min-width: 960px) {
    .audiences__grid {
        flex-wrap: nowrap;
    }
    .audience-card, .audiences__grid > .audience-card:first-child {
        flex: 1 1 0;
    }
    .audience-card__features, .audiences__grid > .audience-card:first-child .audience-card__features {
        flex-direction: column;
    }
    .audience-card__features li, .audiences__grid > .audience-card:first-child .audience-card__features li {
        flex: none;
    }
}

/* ==========================================================================
Climate (главная: «Перголы ALSSEN под климат вашего объекта»)
========================================================================== */
.climate {
    padding-bottom: 0;
}

.climate__head {
    padding-top: 90px;
    padding-bottom: 30px;
}

.climate__title {
    max-width: 21.5rem;
    line-height: 1.03;
    font-size: 2.8rem;
}

.climate__lead {
    margin-top: 2rem;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.53;
    color: var(--color-light);
}

.climate-block {
    position: relative;
    padding-bottom: 45px;
}

.climate-block:last-child {
    padding-bottom: 0;
}

@media (max-width: 639px) {
    .climate-block:first-child {
        padding-bottom: 15px;
    }
    .climate-block:nth-child(2) {
        padding-bottom: 0;
    }
}

.climate-block__gallery {
    aspect-ratio: 300 / 360;
}

.climate-block__slider {
    width: 100%;
    height: 100%;
}

.climate-block__container {
    margin-top: 3rem;
}

.climate-block__tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 2.9rem;
    padding: 0 1rem;
    font-size: 0.8rem;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    color: var(--color-light);
    background-color: rgb(197 165 102 / 39%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 3.75% 100%, 0 50%);
}

.climate-block__tag-flag {
    display: none;
}

.climate-block__city {
    margin-top: 4rem;
    font-family: var(--font-serif);
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1.04;
    color: var(--color-light);
}

@media (min-width: 480px) {
    .climate-block__city {
        font-size: 2.8rem;
    }
}

@media (min-width: 960px) {
    .climate-block__city {
        font-size: 3.2rem;
    }
}

.climate-block__features {
    margin-top: 3.2rem;
    border-top: 1px solid var(--color-line);
}

.climate-block__features li {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--color-line);
}

.climate-block__icon {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
}

.climate-block__features span {
    display: inline-block;
    max-width: 35.5rem;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1.4;
    color: var(--color-light);
}

.climate-block__accent {
    font-weight: 400;
    color: var(--color-accent);
}

.climate-block__desc {
    max-width: 37.1rem;
    margin-top: 3.2rem;
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-light);
}

.climate-block__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 3.4rem;
}

.climate-block__button {
    flex: 1 1 auto;
    height: 4.92rem;
    font-size: 1.1rem;
}

@media (min-width: 480px) {
    .climate__title {
        font-size: 3.6rem;
    }
}

@media (min-width: 640px) {
    .climate__head {
        padding-top: 150px;
        padding-bottom: 45px;
    }
}

@media (min-width: 960px) {
    .climate__title {
        font-size: 4rem;
    }
    .climate__head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 2rem;
    }
    .climate__lead {
        flex: 0 0 41.5rem;
        margin-top: 0;
        font-size: 2rem;
    }
    .climate-block {
        display: flex;
        align-items: stretch;
    }
    .climate-block__gallery {
        flex: 0 0 58.3%;
        aspect-ratio: auto;
    }
    .climate-block__container {
        flex: 1 1 auto;
        width: auto;
        margin: 0;
        padding-inline: 4.5rem;
    }
    .climate-block--reverse {
        flex-direction: row-reverse;
    }
    .climate-block__city {
        margin-top: 3rem;
    }
}

@media (min-width: 1200px) {
    .climate__title {
        font-size: 4.8rem;
    }
    .climate__lead {
        flex: 0 0 58rem;
    }
}

/* ==========================================================================
Models (главная: «Три модели — три способа управлять пространством»)
Card grid: template-parts/components/model-cards.php, assets/css/components/model-cards.css
========================================================================== */
.models {
    padding: 75px 0 0;
}

.models__head {
    position: relative;
}

.models__title {
    line-height: 1.03;
    font-size: 2.8rem;
}

.models__lead {
    max-width: 42.4rem;
    margin-top: 1.6rem;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.53;
    color: var(--color-light);
}

.models__deco {
    display: none;
}

.models > .container:last-child {
    margin-top: 0;
}

@media (min-width: 640px) {
    .models > .container:last-child {
        margin-top: 45px;
    }
}

@media (max-width: 959px) {
    .models__deco {
        position: absolute;
        right: 0;
        bottom: 0.6rem;
        display: block;
        width: 4.4rem;
        height: 4.4rem;
        opacity: 0.45;
    }
}

@media (min-width: 480px) {
    .models__title {
        font-size: 3.6rem;
    }
}

@media (min-width: 640px) {
    .models {
        padding-top: 150px;
    }
}

@media (min-width: 960px) {
    .models__head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 2rem;
    }
    .models__title {
        font-size: 4rem;
    }
    .models__lead {
        flex: 0 0 45.4rem;
        max-width: 45.4rem;
        margin-top: 0;
        font-size: 2rem;
    }
    .models__deco {
        width: 2.8rem;
        height: 2.8rem;
    }
}

@media (min-width: 1200px) {
    .models__title {
        font-size: 4.8rem;
    }
    .models__lead {
        max-width: 44rem;
    }
    .models__deco {
        display: none;
    }
}

/* ==========================================================================
Consultation (главная: «Не уверены, какая модель подойдёт?»)
========================================================================== */
.consultation {
    position: relative;
    padding: 90px 0 0;
    overflow: hidden;
}

.consultation__image {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 24.1rem;
}

.consultation__overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 53.4rem;
    background-color: rgb(68 62 61 / 87%);
}

.consultation__container {
    position: relative;
}

.consultation__content {
    display: flex;
    flex-direction: column;
    padding: 2.8rem 0 4rem;
}

.consultation__title {
    font-family: var(--font-serif);
    font-size: 2.8rem;
    font-weight: 400;
    line-height: 1.17;
    color: var(--color-light);
}

.consultation__text {
    margin-top: 2rem;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.45;
    color: var(--color-light);
}

.consultation__form {
    margin-top: 3.2rem;
    --field-height: 5rem;
}

@media (min-width: 480px) and (max-width: 639px) {
    .consultation {
        padding: 90px 0 0;
    }
    .consultation__image {
        height: 33rem;
    }
    .consultation__overlay {
        height: 43.4rem;
    }
    .consultation__content {
        padding-top: 2.4rem;
    }
    .consultation__title {
        line-height: 0.92;
    }
    .consultation__form {
        margin-top: 2.8rem;
    }
}

@media (min-width: 640px) and (max-width: 959px) {
    .consultation {
        padding: 105px 0 0;
    }
    .consultation__image {
        height: 38.2rem;
    }
    .consultation__overlay {
        height: 44.8rem;
    }
    .consultation__content {
        padding-top: 2.4rem;
    }
    .consultation__title {
        font-size: 3.6rem;
        line-height: 0.97;
    }
    .consultation__text {
        font-size: 1.8rem;
        line-height: 1.5;
    }
    .consultation__form {
        margin-top: 3.2rem;
    }
}

@media (min-width: 960px) {
    .consultation {
        padding: 105px 0 0;
    }
    .consultation__image {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: auto;
    }
    .consultation__overlay {
        top: 0;
        left: 46rem;
        height: auto;
    }
    /* This one section runs its content flush to the viewport's right
    edge (no container gutter) — override the shared .container here. */
    .consultation__container {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        padding-left: 46rem;
    }
    .consultation__content {
        padding: 3.2rem 0;
    }
    .consultation__title {
        font-size: 4.8rem;
        line-height: 0.97;
    }
    .consultation__text {
        font-size: 2rem;
        line-height: 1.5;
    }
}

@media (min-width: 1200px) {
    .consultation__overlay {
        left: 58rem;
    }
    .consultation__container {
        padding-left: 58rem;
    }
}

/* ==========================================================================
Advantages (главная: «Преимущества архитектурной перголы ALSSEN»)
========================================================================== */
.advantages {
    padding: 75px 0 0;
}

.advantages__title {
    line-height: 1.03;
    font-size: 2.8rem;
}

.advantages__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3.6rem 2rem;
    margin-top: 30px;
}

.advantage-card__title {
    font-family: var(--font-serif);
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-light);
}

.advantage-card__text {
    max-width: 25.1rem;
    margin-top: 2rem;
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--color-light);
}

.advantage-card__text ul {
    margin-top: 0.4rem;
}

.advantage-card__text li {
    position: relative;
    padding-left: 1.4rem;
}

.advantage-card__text li::before {
    position: absolute;
    top: 0.7rem;
    left: 0;
    width: 0.5rem;
    height: 0.1rem;
    content: "";
    background-color: var(--color-light);
}

.advantage-card__note {
    position: relative;
    max-width: 32rem;
    margin-top: 2rem;
    padding: 1.4rem 1.4rem;
    background-color: rgb(197 165 102 / 39%);
}

.advantage-card__note p {
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1.36;
    color: var(--color-light);
}

@media (min-width: 480px) {
    .advantages__title {
        font-size: 3.6rem;
    }
}

@media (min-width: 640px) {
    .advantages {
        padding-top: 135px;
        padding-bottom: 15px;
    }
    .advantages__grid {
        margin-top: 45px;
    }
}

@media (min-width: 640px) and (max-width: 959px) {
    .advantages__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 25rem 19.1rem 19.1rem;
    }
}

@media (min-width: 960px) {
    .advantages__title {
        font-size: 4rem;
    }
    .advantages__grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 25rem 19.1rem;
    }
}

@media (min-width: 1200px) {
    .advantages__title {
        font-size: 4.8rem;
    }
    .advantages__grid {
        grid-template-rows: 21.7rem 16.18rem;
    }
}

/* ==========================================================================
Numbers (главная: «Не «навес», а инженерная конструкция на 25+ лет»)
========================================================================== */
.numbers {
    padding: 90px 0 0;
}

.numbers__title {
    line-height: 1.03;
    font-size: 2.8rem;
}

.numbers__lead {
    max-width: 40rem;
    margin-top: 2rem;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.53;
    color: var(--color-light);
}

.numbers__button {
    height: 6.9rem;
    margin-top: 4rem;
    padding: 0 2rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.numbers__stats {
    display: flex;
    flex-direction: column;
    margin-top: 4rem;
}

.numbers__column {
    display: flex;
    flex-direction: column;
}

.numbers__column + .numbers__column {
    margin-top: 0;
    border-top: 1px solid var(--color-line);
}

.numbers__stat {
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--color-line);
}

.numbers__stat-label {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    color: var(--color-light);
    opacity: 0.6;
}

.numbers__stat-value {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-top: 3rem;
}

.numbers__stat-number {
    font-family: var(--font-serif);
    font-size: 4rem;
    font-weight: 400;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--color-light);
}

.numbers__stat-unit {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-light);
}

.numbers__stat-caption {
    margin-top: 0.6rem;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--color-light);
}

@media (min-width: 480px) {
    .numbers__title {
        font-size: 3.6rem;
    }
    .numbers__stats {
        flex-direction: row;
        gap: 3.3rem;
    }
    .numbers__column {
        flex: 1 1 0;
        border-top: 1px solid var(--color-line);
    }
    .numbers__column + .numbers__column {
        border-top: 1px solid var(--color-line);
        border-left: 1px solid var(--color-line);
        padding-left: 3.3rem;
    }
    .numbers__stat:first-child {
        padding-top: 0;
    }
}

@media (min-width: 640px) {
    .numbers {
        padding-top: 150px;
    }
}

@media (min-width: 960px) {
    .numbers__title {
        font-size: 4rem;
    }
    .numbers__layout {
        display: flex;
        align-items: flex-start;
        gap: 4rem;
    }
    .numbers__intro {
        position: relative;
        flex: 0 0 37rem;
        padding-right: 4rem;
    }
    .numbers__intro::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1px;
        content: "";
        background-color: var(--color-line);
    }
    .numbers__button {
        position: relative;
        margin-top: 4rem;
    }
    .numbers__stats {
        flex: 1 1 auto;
        margin-top: 1rem;
    }
    .numbers__column:first-child {
        border-top: 0;
    }
}

@media (min-width: 1200px) {
    .numbers__title {
        font-size: 4.8rem;
    }
    .numbers__intro {
        flex: 0 0 37rem;
    }
    .numbers__stat-number {
        font-size: 6rem;
    }
}

/* ==========================================================================
Section-title wrap-width corrections

Several section headings wrap onto 2-4 lines in the original at each
artboard (a fixed max-width forces the break); also several headings
keep the 320/480 font-size all the way to 639px, only growing at 640.
========================================================================== */
.climate__title {
    max-width: 21.5rem;
}

.models__title {
    max-width: 28.3rem;
}

.advantages__title {
    max-width: 25.5rem;
}

.numbers__title {
    max-width: 43.4rem;
}

@media (max-width: 639px) {
    .pergolas__title, .climate__title, .models__title, .advantages__title, .numbers__title {
        font-size: 2.8rem;
    }
}

@media (min-width: 640px) and (max-width: 959px) {
    .climate__title {
        max-width: 27.7rem;
    }
    .models__title {
        max-width: 51rem;
    }
    .advantages__title {
        max-width: 48.2rem;
    }
    .numbers__title {
        max-width: 55.4rem;
    }
}

@media (min-width: 960px) and (max-width: 1199px) {
    .climate__title {
        max-width: 30.6rem;
    }
    .models__title {
        max-width: 39.3rem;
    }
    .advantages__title {
        max-width: 52.7rem;
    }
    .numbers__title {
        max-width: 37.3rem;
        font-size: 4.8rem;
    }
}

@media (min-width: 1200px) {
    .climate__title {
        max-width: 36.9rem;
    }
    .models__title {
        max-width: 47.8rem;
    }
    .advantages__title {
        max-width: 64.6rem;
    }
    .numbers__title {
        max-width: 37.3rem;
    }
}

@media (min-width: 480px) {
    .climate-block__tag {
        height: 3.6rem;
    }
}

@media (min-width: 1200px) {
    .climate-block__tag {
        height: 4.2rem;
    }
}

/* Lead paragraph sizes at 640-959 (own real design, larger than 480/320) */
@media (min-width: 640px) and (max-width: 959px) {
    .climate__lead, .models__lead, .numbers__lead {
        font-size: 1.8rem;
    }
}

@media (min-width: 960px) {
    .numbers__lead {
        font-size: 2rem;
    }
}

/* ==========================================================================
Integration (главная: «Четыре способа интеграции в объект»)
========================================================================== */
.integration {
    padding-top: 150px;
    /* section padding does not scale, see README «Как устроены размеры» */
    overflow-x: hidden;
    /* карточки шире контейнера на 640-1199, как в оригинале */
}

.integration__container {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
    margin-bottom: 45px;
}

.integration__title {
    max-width: 48rem;
    font-size: 4.8rem;
    line-height: 1.02;
}

.integration__lead {
    max-width: 56.1rem;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--color-light);
}

.integration__cursor {
    display: none;
}

@media (max-width: 1199px) {
    .integration__title {
        max-width: 39.3rem;
        font-size: 4rem;
    }
    .integration__lead {
        max-width: 43.4rem;
        font-size: 1.8rem;
    }
}

@media (max-width: 959px) {
    .integration__container {
        flex-direction: column;
        align-items: flex-start;
        gap: 2.5rem;
    }
    .integration__title, .integration__lead {
        max-width: 58.6rem;
    }
    .integration__title {
        font-size: 3.6rem;
    }
    .integration__lead {
        font-size: 1.8rem;
    }
    .integration__cursor {
        position: absolute;
        top: 12.5rem;
        right: 0;
        display: block;
        width: 4.4rem;
        height: 4.4rem;
        opacity: 0.45;
    }
}

@media (max-width: 639px) {
    .integration__title, .integration__lead {
        max-width: 43.8rem;
    }
    .integration__title {
        font-size: 2.8rem;
    }
    .integration__lead {
        font-size: 1.5rem;
    }
    .integration__cursor {
        top: 8.2rem;
    }
}

@media (max-width: 479px) {
    .integration {
        padding-top: 75px;
    }
    .integration__container {
        margin-bottom: 0;
        gap: 2.4rem;
    }
    .integration__title, .integration__lead {
        max-width: 28.3rem;
    }
    .integration__cursor {
        display: none;
    }
}

/* ==========================================================================
Solutions (главная: «Типовые решения для ваших задач»)
========================================================================== */
.solutions {
    padding-top: 150px;
}

.solutions__container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
    margin-bottom: 45px;
}

.solutions__title {
    max-width: 43rem;
    font-size: 4.8rem;
    line-height: 1.02;
}

.solutions__lead {
    max-width: 50.8rem;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--color-light);
}

@media (max-width: 1199px) {
    .solutions__title {
        max-width: 39.3rem;
        font-size: 4rem;
    }
    .solutions__lead {
        max-width: 45.4rem;
    }
}

@media (max-width: 959px) {
    .solutions__container {
        flex-direction: column;
        align-items: flex-start;
        gap: 2.5rem;
    }
    .solutions__title {
        max-width: 51rem;
        font-size: 3.6rem;
    }
    .solutions__lead {
        max-width: 48.5rem;
        font-size: 1.8rem;
    }
}

@media (max-width: 479px) {
    .solutions {
        padding-top: 75px;
    }
    .solutions__container {
        margin-bottom: 0;
        gap: 2.4rem;
    }
    .solutions__title {
        max-width: 24.7rem;
        font-size: 2.8rem;
    }
    .solutions__lead {
        max-width: 28.4rem;
        font-size: 1.5rem;
    }
}

/* ==========================================================================
Production (главная: «Собственное производство в России и испанская
архитектурная школа»)
========================================================================== */
.production {
    padding-top: 120px;
}

.production__container {
    display: flex;
    gap: 1rem;
}

.production__col--text {
    flex: 0 0 56.5rem;
}

.production__col--media {
    flex: 1 1 auto;
    min-width: 0;
}

.production__title {
    max-width: 56.5rem;
    font-size: 4.8rem;
    line-height: 1.02;
}

.production__checklist, .production__stats, .production__button {
    max-width: 42.2rem;
}

.production__title-accent {
    color: var(--color-accent);
}

.production__checklist {
    margin-top: 2.1rem;
}

.production__check {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    padding: 1.6rem 0;
    font-size: 1.6rem;
    font-weight: 300;
    border-top: 1px solid rgb(247 244 238 / 20%);
}

.production__check:last-child {
    border-bottom: 1px solid rgb(247 244 238 / 20%);
}

.production__check-icon {
    flex: none;
    width: 0.8rem;
    height: 0.6rem;
    color: var(--color-light);
}

.production__stats {
    display: grid;
    grid-template-columns: 17.1rem 1fr;
    column-gap: 2rem;
    row-gap: 3.7rem;
    margin-top: 4.8rem;
}

.production__stat:nth-child(n + 3) {
    padding-top: 3.7rem;
    border-top: 1px solid rgb(247 244 238 / 20%);
}

.production__stat:nth-child(even) {
    padding-left: 2rem;
    border-left: 1px solid rgb(247 244 238 / 20%);
}

.production__stat-value {
    font-family: var(--font-serif);
    font-size: 3.4rem;
    line-height: 1.5;
    color: var(--color-accent);
    text-transform: uppercase;
}

.production__stat-label {
    margin-top: 0.5rem;
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.2rem;
    color: var(--color-light);
    text-transform: uppercase;
    opacity: 0.75;
}

.production__button {
    height: 5.6rem;
    margin-top: 4.4rem;
    padding: 0 3rem;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.121rem;
}

.production__lead {
    max-width: 57.1rem;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.5;
}

.production__photo {
    position: relative;
    width: 57.1rem;
    max-width: 100%;
    height: 42.7rem;
    margin-top: 2.5rem;
}

.production__photo-image {
    position: absolute;
    inset: 0;
}

.production__address {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 38.7rem;
    max-width: 100%;
    padding: 1.7rem 2rem;
    background-color: #3a3433;
    border: 1px solid rgb(99 94 92 / 90%);
}

.production__address-title {
    font-family: var(--font-serif);
    font-size: 2rem;
    line-height: 1.5;
    color: var(--color-white);
}

.production__address-text {
    margin-top: 0.6rem;
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--color-white);
}

@media (max-width: 1199px) {
    .production__container {
        gap: 1rem;
    }
    .production__col--text {
        flex-basis: 46rem;
    }
    .production__title, .production__checklist, .production__stats, .production__button {
        max-width: 46rem;
    }
    .production__title {
        font-size: 4rem;
    }
}

@media (max-width: 959px) {
    .production__container {
        flex-direction: column;
        gap: 4rem;
    }
    .production__col--text, .production__col--media {
        flex: none;
        width: 100%;
    }
    .production__title {
        font-size: 3.6rem;
    }
    .production__lead, .production__photo {
        width: 100%;
    }
}

@media (max-width: 479px) {
    .production {
        padding-top: 75px;
    }
    .production__title {
        font-size: 2.8rem;
    }
    .production__stats {
        grid-template-columns: 1fr;
    }
    .production__stat:nth-child(even) {
        padding-left: 0;
        border-left: 0;
    }
    .production__stat:nth-child(n + 2) {
        padding-top: 2.4rem;
        border-top: 1px solid rgb(247 244 238 / 20%);
    }
    .production__address {
        position: static;
        width: 100%;
        margin-top: 1px;
    }
}

/* ==========================================================================
Sauna (главная: «Авторские сауны и банные комплексы»)
========================================================================== */
.sauna {
    padding-top: 150px;
}

.sauna__container {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
    margin-bottom: 45px;
}

.sauna__kicker {
    position: absolute;
    top: -3rem;
    left: 0;
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
}

.sauna__title {
    max-width: 48rem;
    font-size: 4.8rem;
    line-height: 1.02;
    color: var(--color-accent);
}

.sauna__lead {
    max-width: 58.5rem;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.5;
}

.sauna__row {
    display: flex;
    gap: 2.1rem;
}

.sauna__cards-container > .sauna__card--wide {
    margin-top: 2.5rem;
}

.sauna__card {
    position: relative;
    flex: 1 1 0;
    height: 33.2rem;
    overflow: hidden;
}

.sauna__card--wide {
    height: 39.3rem;
}

.sauna__card-image {
    position: absolute;
    inset: 0;
}

.sauna__card::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 60%;
    background: linear-gradient(to top, rgb(0 0 0 / 85%) 0%, transparent 100%);
}

.sauna__card-body {
    position: absolute;
    right: 3.5rem;
    bottom: 2.5rem;
    left: 3.5rem;
}

.sauna__card-title {
    font-family: var(--font-serif);
    font-size: 3.2rem;
    line-height: 1.05;
    color: var(--color-light);
}

.sauna__card-text {
    max-width: 53rem;
    padding-top: 1.4rem;
    margin-top: 1.4rem;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1.5;
    border-top: 1px solid rgb(247 244 238 / 20%);
}

@media (max-width: 1199px) {
    .sauna__title {
        max-width: 39.3rem;
        font-size: 4rem;
    }
    .sauna__lead {
        max-width: 45.4rem;
    }
}

@media (max-width: 959px) {
    .sauna__container {
        flex-direction: column;
        align-items: flex-start;
        gap: 2.5rem;
    }
    .sauna__title, .sauna__lead {
        max-width: 58.6rem;
    }
    .sauna__title {
        font-size: 3.6rem;
    }
}

@media (max-width: 639px) {
    .sauna__row {
        flex-direction: column;
    }
    .sauna__card, .sauna__card--wide {
        height: 30.2rem;
    }
    .sauna__cards-container > .sauna__card--wide {
        margin-top: 2.1rem;
    }
}

@media (max-width: 479px) {
    .sauna {
        padding-top: 75px;
    }
    .sauna__container {
        margin-bottom: 0;
    }
    .sauna__title, .sauna__lead {
        max-width: 28.3rem;
    }
    .sauna__title {
        font-size: 2.8rem;
    }
    .sauna__lead {
        font-size: 1.5rem;
    }
    .sauna__card-body {
        right: 2rem;
        left: 2rem;
    }
}

/* ==========================================================================
Configurator (home, «Соберите конфигурацию под ваш объект», anchor #calc)

A 4-step cost quiz: model -> size & city -> options -> contact. There is
no separate 480 layout, so the section carries .layout-320 and the mobile rules below live in a single
max-width: 639px query (main.css zooms them x1.5 for 480-639).
========================================================================== */
.configurator {
    position: relative;
    overflow: hidden;
    padding-top: 120px;
    padding-bottom: 0;
    background-color: var(--color-bg);
    color: var(--color-light);
}

@media (max-width: 480px) {
    .configurator {
        padding-top: 0;
    }
}

.configurator__media {
    position: absolute;
    inset: 0;
}

.configurator__photo {
    position: absolute;
    inset: 0;
}

.configurator__scrim {
    position: absolute;
    inset: 0;
    width: 69.8rem;
    background: linear-gradient(0deg, rgb(43 38 37 / 88%) 0%, rgb(43 38 37 / 88%) 100%);
}

.configurator__container {
    position: relative;
}

.configurator__title {
    max-width: 56.4rem;
    margin: 0 0 1.9rem;
    font-family: var(--font-serif);
    font-size: 4.8rem;
    font-weight: 400;
    line-height: 1.02;
    color: var(--color-light);
}

.configurator__lead {
    max-width: 55.1rem;
    margin: 0 0 3.8rem;
    font-family: var(--font-sans);
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--color-light);
}

/* ---- quiz panel ---- */
.configurator__panel {
    position: relative;
    width: 63.6rem;
    max-width: 100%;
    background-color: var(--color-light);
}

.configurator__progress {
    position: relative;
    height: 2.5rem;
    border: 1px solid rgb(197 165 102 / 20%);
        background: #f7f4ee;
}

.configurator__progress-fill {
    position: absolute;
    inset: 0;
    width: 25%;
    background-color: var(--color-accent);
    transition: width 0.3s ease;
}

.configurator__progress-value {
    position: absolute;
    top: 50%;
    right: 1.7rem;
    font-family: var(--font-sans);
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-text-dark);
    transform: translateY(-50%);
}

.configurator__step {
    display: none;
    padding: 2.9rem 2.8rem 1.7rem;
    margin: 0;
    border: 0;
}

.configurator__step.is-active {
    display: block;
}

.configurator__step-title {
    position: relative;
    margin: 0 0 1.7rem;
    padding: 0;
    font-family: var(--font-serif);
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1.21;
    color: var(--color-text-dark);
}

.configurator__step-title--final {
    max-width: 30rem;
}

.configurator__step-note {
    display: block;
    margin: -1rem 0 1.7rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--color-text-dark);
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    opacity: 0.9;
}

/* ---- step 1: model ---- */
.configurator__models {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.7rem 1.8rem;
}

.configurator__models.is-invalid .model-option__media, .configurator__installs.is-invalid .install-option__media {
    outline: 2px solid var(--color-error);
    outline-offset: 2px;
}

.configurator__message {
    margin-top: 1.2rem;
    font-family: var(--font-sans);
    font-size: 1.3rem;
    line-height: 1.4;
    color: var(--color-error);
}

.model-option {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.model-option__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.model-option__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    margin-bottom: 1.2rem;
    background-color: var(--color-light-alt);
}

.model-option__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.model-option__badge {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0.6rem 0.9rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;
    color: var(--color-light);
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    background-color: rgb(197 165 102 / 82%);
}

.model-option__check {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    width: 2rem;
    height: 2rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.model-option__check svg {
    display: block;
    width: 100%;
    height: 100%;
}

.model-option__input:checked ~ .model-option__media .model-option__check {
    opacity: 1;
}

.model-option__input:focus-visible ~ .model-option__media {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.model-option__title {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.19;
    color: var(--color-accent);
}

.model-option__caption {
    margin-top: 0.6rem;
    font-family: var(--font-sans);
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.42;
    color: var(--color-text-dark);
}

/* ---- step 2: size & city ---- */
.configurator__fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.7rem 1.6rem;
    margin-bottom: 2.4rem;
}

.configurator__field-group {
    display: block;
}

.configurator__field-label {
    display: block;
    margin-bottom: 0.9rem;
    font-family: var(--font-sans);
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    color: var(--color-text-dark);
}

.configurator__field {
    display: block;
    width: 100%;
    height: 4rem;
    padding: 0 1.2rem;
    font-family: var(--font-sans);
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1.33;
    color: var(--color-text-dark);
    background-color: transparent;
    border: 1px solid #d8d6d1;
    border-radius: 0;
    outline: none;
    appearance: none;
}

.configurator__field:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.configurator__field.is-invalid {
    outline: 2px solid var(--color-error);
    outline-offset: -2px;
}

.configurator__installs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.7rem 1.6rem;
}

.install-option {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.install-option__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.install-option__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 220 / 136;
    margin-bottom: 0.8rem;
    background-color: var(--color-light-alt);
}

.install-option__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.install-option__check {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    width: 1.8rem;
    height: 1.8rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.install-option__check svg {
    display: block;
    width: 100%;
    height: 100%;
}

.install-option__input:checked ~ .install-option__media .install-option__check {
    opacity: 1;
}

.install-option__input:focus-visible ~ .install-option__media {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.install-option__title {
    font-family: var(--font-sans);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.17;
    color: var(--color-accent);
}

/* ---- step 3: options ---- */
.configurator__options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.3rem 2rem;
}

.option-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 1.1rem 1.4rem;
    cursor: pointer;
    border: 1px solid rgb(43 38 37 / 15%);
}

.option-checkbox__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.option-checkbox__box {
    position: relative;
    flex-shrink: 0;
    width: 1.8rem;
    height: 1.8rem;
    margin-top: 0.1rem;
    background-color: var(--color-light);
    border: 1.5px solid var(--color-text-dark);
}

.option-checkbox__box::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.9rem;
    height: 0.5rem;
    content: "";
    border-bottom: 1.5px solid var(--color-light);
    border-left: 1.5px solid var(--color-light);
    opacity: 0;
    transform: translate(-50%, -65%) rotate(-45deg);
}

.option-checkbox__input:checked ~ .option-checkbox__box {
    background-color: var(--color-text-dark);
}

.option-checkbox__input:checked ~ .option-checkbox__box::after {
    opacity: 1;
}

.option-checkbox__input:focus-visible ~ .option-checkbox__box {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.option-checkbox__text {
    display: block;
}

.option-checkbox__label {
    display: block;
    font-family: var(--font-sans);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.17;
    color: var(--color-text-dark);
}

.option-checkbox__caption {
    display: block;
    margin-top: 0.4rem;
    font-family: var(--font-sans);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.17;
    color: var(--color-text-dark);
    opacity: 0.5;
}

/* ---- step 4: contact ---- */
.configurator__final-text {
    max-width: 24.2rem;
    margin: 0 0 2.4rem;
    font-family: var(--font-sans);
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--color-text-dark);
}

.configurator__lead-form {
    --field-height: 5rem;
    --field-gap: 1.4rem;
    --field-font-size: 1rem;
    --field-padding: 1.6rem;
    --button-width: 100%;
    --button-font-size: 1.1rem;
}

/* .checkbox defaults to light text for dark backgrounds; this form sits on
the light quiz card, so the consent line needs the dark text color. */
.configurator__lead-form .checkbox {
    color: var(--color-text-dark);
}

/* ---- nav (prev / next) ---- */
.configurator__nav {
    display: flex;
    gap: 2.2rem;
    margin-top: 6rem;
}

.configurator__prev {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 4.1rem;
    height: 4.1rem;
    color: var(--color-text-dark);
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--color-text-dark);
    opacity: 0.2;
    transition: opacity 0.15s ease;
}

.configurator__prev:not(:disabled) {
    opacity: 1;
}

.configurator__prev:disabled {
    cursor: default;
}

.configurator__prev-icon {
    width: 1.4rem;
    height: 1.2rem;
}

@media (hover: hover) {
    .configurator__prev:not(:disabled):hover {
        color: var(--color-light);
        background-color: var(--color-text-dark);
    }
}

.configurator__next {
    width: 11.7rem;
    height: 4.1rem;
    padding: 0;
    font-size: 1.1rem;
}

/* ---- "what's included / what affects the price" ---- */
.configurator__lists {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3.8rem;
    padding: 5rem 0 6rem 2rem;
}

.configurator__list-title {
    margin: 0 0 2.5rem;
    font-family: var(--font-serif);
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1.03;
    color: var(--color-light);
}

.configurator__list-items {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.configurator__list-item {
    display: flex;
    align-items: flex-start;
    gap: 1.7rem;
    padding: 1.5rem 0;
    font-family: var(--font-sans);
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.2;
    color: var(--color-light);
    border-top: 1px solid rgb(247 244 238 / 20%);
}

.configurator__list--affects .configurator__list-item:last-child, .configurator__list-item:last-child {
    border-bottom: 1px solid rgb(247 244 238 / 20%);
}

.configurator__list-icon {
    flex-shrink: 0;
    width: 0.8rem;
    margin-top: 0.3rem;
    color: var(--color-light);
}

.configurator__list-icon svg {
    display: block;
    width: 100%;
    height: auto;
}

/* ==========================================================================
Mobile layout (design 320; screens 320/640/960/1200 — no own 480 design,
main.css zooms this x1.5 between 480 and 639px).
========================================================================== */
@media (max-width: 639px) {
    .configurator__scrim {
        width: 100%;
    }
    .configurator__title {
        max-width: none;
        margin-bottom: 1.7rem;
        font-size: 2.8rem;
        line-height: 1.04;
    }
    .configurator__lead {
        max-width: none;
        margin-bottom: 2.4rem;
        font-size: 1.5rem;
        line-height: 1.53;
    }
    .configurator__panel {
        width: 100%;
    }
    .configurator__step {
        padding: 2.4rem 1.8rem 1.7rem;
    }
    .configurator__step-title {
        font-size: 2rem;
    }
    .configurator__models {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1.4rem;
    }
    .model-option__title {
        font-size: 1.6rem;
    }
    .model-option__caption {
        font-size: 0.8rem;
    }
    .configurator__fields {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    .configurator__field-group--wide {
        grid-column: auto;
    }
    .configurator__installs {
        grid-template-columns: repeat(2, 1fr);
    }
    .configurator__options {
        grid-template-columns: 1fr;
    }
    .configurator__nav {
        margin-top: 3rem;
    }
    .configurator__next {
        width: 11.7rem;
    }
    .configurator__lists {
        grid-template-columns: 1fr;
        padding: 3.2rem 0 4rem;
    }
    .configurator__list--affects {
        margin-top: 0.5rem;
    }
    .configurator__list-title {
        font-size: 2rem;
    }
}

/* Reference alignment — September 2026 */
.hero__overlay {
    z-index: 1;
}

.hero__content {
    z-index: 2;
}

.hero__slider .slider__arrow, .hero__slider .slider__dots {
    opacity: 0;
    transition: opacity .2s;
}

.hero__slider:hover .slider__arrow, .hero__slider:focus-within .slider__arrow, .hero__slider:hover .slider__dots, .hero__slider:focus-within .slider__dots {
    opacity: 1;
}

.advantages__title {
    margin-left: calc((100% - var(--container-width))/2);
    margin-right: 0;
}

.sauna__card::before {
    z-index: 1;
    pointer-events: none;
}

.sauna__card-body {
    z-index: 2;
}

@media (min-width: 1200px) {
    /* Keep artboard spacing separate from the flowing text within each section. */
    .pergolas__grid {
        margin-top: calc(5.8rem + 45px - 4.9rem);
        height: 141.1rem;
    }
    .audiences {
        min-height: 46.1rem;
    }
    .climate__head {
        min-height: calc(15.8rem + 195px);
    }
    .climate-block:last-child {
        min-height: 60rem;
    }
    .models__head {
        min-height: 15.8rem;
    }
    .advantages__title {
        min-height: 10.8rem;
    }
    .advantages__grid {
        grid-template-rows: 21.7rem 16.3rem;
    }
    .numbers__layout {
        min-height: 65rem;
    }
    .numbers__stat {
        min-height: 18.5rem;
        padding: 0;
        margin-bottom: 3.9rem;
    }
    .numbers__stat:last-child {
        min-height: 19.5rem;
        margin-bottom: 0;
    }
    .numbers__stat-caption {
        margin-top: 0;
    }
    .integration__container,.solutions__container {
        min-height: 11.8rem;
        align-items: flex-start;
    }
    .solutions__cases-container {
        padding-bottom: 2.8rem;
    }
    .production__container {
        min-height: 78.7rem;
    }
    .sauna__container {
        min-height: 18.6rem;
        padding-top: 8rem;
        align-items: flex-start;
    }
    .sauna__lead {
        margin-top: -2.3rem;
    }
    .sauna__cards-container {
        padding-bottom: 1.5rem;
    }
    .configurator__media {
        top: 120px;
    }
    .configurator__container {
        padding-top: 5.4rem;
        min-height: 105.5rem;
    }
    .configurator__title {
        margin-bottom: 3.1rem;
    }
    .configurator__quiz {
        width: 63.6rem;
        max-width: 100%;
    }
    .configurator__nav {
        justify-content: flex-end;
    }
    .configurator__lists {
        grid-template-columns: 34.7rem 25.4rem;
        gap: 3.3rem;
        padding: 3.2rem 0 1.7rem;
    }
    .configurator__list-item {
        min-height: 4.5rem;
        padding: 1.5rem 0;
    }
    .configurator__list--affects {
        position: relative;
    }
    .configurator__list--affects::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: -1.4rem;
        border-left: 1px solid var(--color-line);
    }
    .configurator__list--affects .configurator__list-item {
        min-height: 3.5rem;
        padding: 0;
        align-items: center;
        border: 0;
    }
    .hero__title {
        margin-top: 2.2rem;
    }
    .hero__text {
        font-size: 1.4rem;
        line-height: 1.64;
    }
    .hero__cta {
        width: 19.1rem;
        margin-top: 2.7rem;
    }
    .hero__badges {
        margin-top: 0;
        gap: 2.4rem;
        max-width: none;
        width: 60rem;
        flex-wrap: nowrap;
    }
    .hero__badges li {
        padding-top: 0;
        padding-left: 1.4rem;
        font-size: 1.2rem;
        letter-spacing: .2rem;
    }
    .hero__badges li::before {
        top: .65em;
    }
    .hero__panel-inner {
        padding-top: 0;
    }
    .hero__panel-head {
        flex-basis: 55.1rem;
    }
    .hero__panel-text {
        max-width: 55.1rem;
        margin-top: 1.4rem;
    }
    .hero__form {
        --field-gap: 1.6rem;
    }
    .pergolas__title {
        line-height: 49px;
        line-height: 1.020833;
    }
    .audience-card {
        padding: 5.4rem 2.5rem 2rem;
    }
    .audience-card__title {
        font-size: 3.2rem;
        max-width: 24.4rem;
    }
    .audience-card:first-child .audience-card__title {
        max-width: 19.6rem;
    }
    .audience-card__text,.audience-card__features li {
        font-size: 1.4rem;
    }
    .audience-card__tag {
        font-size: 1.2rem;
        line-height: 1.87;
        padding-top: 0;
    }
    .climate__head {
        min-height: calc(15.8rem + 195px);
        align-items: flex-end;
    }
    .climate__lead {
        flex-basis: 58rem;
        position: relative;
        left: -2rem;
        line-height: 1.5;
        letter-spacing: -.025em;
    }
    .climate-block {
        min-height: 63.75rem;
        padding-bottom: 3.75rem;
    }
    .climate-block__gallery {
        flex-basis: 58.3%;
    }
    .climate-block__container {
        min-width: 0;
        padding: 0 1.9rem 0 3.5rem;
    }
    .climate-block--reverse .climate-block__container {
        padding: 0 3.5rem 0 2rem;
    }
    .climate-block__tag {
        display: flex;
        width: max-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        font-size: 1.2rem;
        height: 4.2rem;
        padding: 0 1.4rem;
    }
    .climate-block__city {
        margin-top: 2.2rem;
    }
    .climate-block__features span {
        line-height: 1.5;
    }
    .climate-block__desc {
        margin-top: 3rem;
    }
    .climate-block:last-child .climate-block__desc {
        max-width: 43.7rem;
    }
    .models__head,.solutions__head {
        display: grid;
        grid-template-columns: 56rem 1fr;
        align-items: end;
        gap: 0;
    }
    .models__lead,.solutions__lead {
        margin-top: 0;
        line-height: 1.5;
    }
    .consultation {
        min-height: calc(57rem + 105px);
    }
    .consultation__image,.consultation__overlay {
        top: 105px;
    }
    .consultation__container {
        padding-left: 60rem;
    }
    .consultation__content {
        padding-top: 3.2rem;
        padding-right: 1.9rem;
    }
    .consultation__title {
        max-width: 45.3rem;
    }
    .consultation__text {
        max-width: 51.9rem;
        margin-top: 3.4rem;
    }
    .consultation__form {
        margin-top: 3.8rem;
    }
    .advantage-card {
        padding: 2.5rem;
        border: 1px solid var(--color-line);
    }
    .advantages__grid {
        gap: 2rem;
    }
    .advantage-card__text,.advantage-card__note p {
        font-size: 1.4rem;
    }
    .advantage-card__note {
        margin-left: 0;
    }
    .numbers__intro {
        flex-basis: 37.3rem;
        padding-right: 0;
    }
    .numbers__layout {
        gap: 4.6rem;
    }
    .numbers__title {
        max-width: 37.3rem;
    }
    .numbers__lead {
        max-width: 32.8rem;
        line-height: 1.5;
        margin-top: 3.6rem;
    }
    .numbers__stat-label {
        font-size: 1.2rem;
    }
    .numbers__stat-caption {
        font-size: 1.6rem;
    }
    .numbers__stat-value {
        margin-top: 1.7rem;
    }
    .numbers__column + .numbers__column {
        border-top: 0;
    }
    .production__col--text {
        flex-basis: 56rem;
    }
    .production__col--media {
        flex: 1;
        padding-top: 5.2rem;
    }
    .production__container {
        gap: 0;
    }
    .production__stats {
        grid-template-columns: 17.1rem 22rem;
        gap: 0;
    }
    .production__stat:nth-child(even) {
        padding-left: 0;
        border-left: 0;
    }
    .production__stat:nth-child(n+3) {
        margin-top: 3.1rem;
        padding-top: 0;
        border-top: 0;
    }
    .production__stat-value {
        white-space: nowrap;
        font-family: var(--font-serif);
        text-transform: none;
    }
    .production__stat-label {
        max-width: 19rem;
    }
    .sauna__container {
        gap: 0;
    }
    .sauna__lead {
        flex-basis: 58.5rem;
        margin-right: 1.5rem;
    }
    .sauna__card-body {
        left: 1.5rem;
        right: 1.5rem;
        bottom: 2.5rem;
    }
    .sauna__card-text {
        padding-top: 1.5rem;
        margin-top: 2.6rem;
        max-width: 52.7rem;
    }
    .sauna__card--wide .sauna__card-text {
        max-width: 100%;
    }
}

@media (max-width: 479px) {
    .hero__content,.hero__panel-inner {
        width: 28rem;
        max-width: 28rem;
    }
    .hero__stage--mobile {
        height: 56.2rem;
    }
    .hero__overlay {
        height: 56.2rem;
    }
    .hero__panel {
        height: 41.6rem;
    }
    .hero__badges {
        gap: 2rem 1.6rem;
    }
    .hero__badges li {
        padding-top: 0;
        padding-left: 1rem;
    }
    .hero__badges li::before {
        top: .65em;
    }
    .hero__cta {
        margin-top: 2.4rem;
    }
    .models__head {
        min-height: 23.8rem;
    }
    .consultation {
        padding-top: calc(90px + 24.1rem);
        min-height: calc(77.8rem + 90px);
    }
    .consultation__image {
        top: 90px;
        height: 24.1rem;
    }
    .consultation__overlay {
        top: calc(90px + 24.1rem);
        height: auto;
    }
    .advantages__title {
        min-height: 9.8rem;
    }
    .advantages__grid {
        gap: 2rem;
        margin-top: 30px;
    }
    .advantage-card {
        padding: 2.4rem;
        border: 1px solid var(--color-line);
    }
    .advantage-card:nth-child(1) {
        min-height: 23.5rem;
    }
    .advantage-card:nth-child(2) {
        min-height: 17.9rem;
    }
    .advantage-card:nth-child(3) {
        min-height: 15.9rem;
    }
    .advantage-card:nth-child(4),.advantage-card:nth-child(5) {
        min-height: 18.9rem;
    }
    .advantage-card:nth-child(6) {
        min-height: 16.8rem;
    }
    .advantage-card__note {
        margin-left: 0;
    }
    .numbers__layout {
        display: flex;
        flex-direction: column;
        min-height: 130.8rem;
    }
    .numbers__intro {
        display: contents;
    }
    .numbers__title {
        order: 0;
    }
    .numbers__lead {
        order: 1;
        max-width: 26.4rem;
    }
    .numbers__stats {
        order: 2;
        margin-top: 3.6rem;
        width: 100%;
    }
    .numbers__column+.numbers__column {
        border-top: 0;
    }
    .numbers__stat {
        min-height: 16rem;
        padding: 0 0 2rem;
        margin: 0;
    }
    .numbers__stat+.numbers__stat {
        padding-top: 2rem;
    }
    .numbers__column+.numbers__column .numbers__stat:first-child {
        padding-top: 2rem;
    }
    .numbers__stat-value {
        margin-top: 1.2rem;
    }
    .numbers__stat-number {
        line-height: 1.3;
    }
    .numbers__stat-caption {
        margin-top: 0;
    }
    .numbers__button {
        order: 3;
        width: 100%;
        margin-top: 3.5rem;
    }
    .integration__container {
        min-height: 16.8rem;
    }
    .production__container {
        display: flex;
        flex-direction: column;
        gap: 0;
        min-height: 126.7rem;
    }
    .production__col {
        display: contents;
    }
    .production__title {
        order: 0;
        max-width: 28.3rem;
    }
    .production__lead {
        order: 1;
        font-size: 1.5rem;
        line-height: 1.5;
        width: 28.3rem;
        margin-top: 2.4rem;
    }
    .production__checklist {
        order: 2;
        margin-top: 3.6rem;
    }
    .production__check {
        min-height: 5.3rem;
        padding: 1.3rem 0;
        gap: 1.2rem;
        font-size: 1.3rem;
    }
    .production__stats {
        order: 3;
        width: 100%;
        grid-template-columns: 13.8rem 1fr;
        gap: 0;
        margin-top: 3.1rem;
    }
    .production__stat {
        min-width: 0;
        padding: 0 !important;
        border: 0 !important;
    }
    /* Original: vertical rule between the columns, short rule under the first row. */
    .production__stat:nth-child(1),.production__stat:nth-child(3) {
        padding-bottom: 2rem !important;
        margin-bottom: 2rem;
        border-bottom: 1px solid rgb(247 244 238 / 20%) !important;
    }
    .production__stat:nth-child(1) {
        margin-right: 1.6rem;
    }
    .production__stat:nth-child(2) {
        margin-right: 1.6rem;
    }
    .production__stat:nth-child(3),.production__stat:nth-child(4) {
        padding-left: 1.4rem !important;
        border-left: 1px solid rgb(247 244 238 / 20%) !important;
    }
    .production__stat:nth-child(3) {
        margin-bottom: 0;
        padding-bottom: 4rem !important;
        border-bottom: 0 !important;
        position: relative;
    }
    .production__stat:nth-child(3)::after {
        content: '';
        position: absolute;
        left: 1.6rem;
        right: 0;
        bottom: 2rem;
        border-bottom: 1px solid rgb(247 244 238 / 20%);
    }
    .production__stat:nth-child(2) {
        order: 3;
    }
    .production__stat:nth-child(3) {
        order: 2;
    }
    .production__stat:nth-child(4) {
        order: 4;
    }
    .production__stat-value {
        font-size: 2.4rem;
        font-family: var(--font-serif);
        text-transform: none;
        white-space: nowrap;
    }
    .production__stat-label {
        font-size: 1rem;
        max-width: 14.1rem;
    }
    .production__photo {
        order: 4;
        height: auto;
        margin-top: 3.3rem;
    }
    .production__photo-image {
        position: static;
        display: block;
        width: 100%;
        height: 21.5rem;
    }
    .production__address {
        min-height: 11.9rem;
        margin-top: 1.3rem;
        padding: 1.7rem 1.9rem;
    }
    .production__address-title {
        font-size: 1.5rem;
    }
    .production__address-text {
        font-size: 1.05rem;
    }
    .production__button {
        order: 5;
        width: 100%;
        margin-top: 2.6rem;
    }
    .sauna__container {
        min-height: 33.8rem;
    }
    .sauna__card {
        flex: none;
        width: 100%;
        height: 36rem;
    }
    .sauna__card--wide {
        height: 45.2rem;
    }
    .sauna__card-title {
        font-size: 2.4rem;
    }
    .sauna__card-text {
        font-size: 1.2rem;
    }
    .sauna__card-body {
        left: 1.1rem;
        right: 1.1rem;
        bottom: 1.7rem;
    }
    .sauna__cards-container {
        padding-bottom: 30px;
    }
}