/* ===== Responsive design =====
   Desktop-first. The rules are container queries on .site-wrapper (container name: site), not media queries,
   so the layout follows the width of the page wrapper. Each breakpoint starts with its token overrides. */

/* Compact header */
@container site (max-width: 1300px) {
    .site-header__bar {
        gap: var(--space-5);
        padding: 0 var(--space-7) 0 var(--space-8);
    }

    .main-nav {
        gap: var(--space-4-5);
    }

    .site-header__cta-long {
        display: none;
    }

    .site-header__cta-short {
        display: inline;
    }

    .process-steps--dense {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--grid-gap);
    }

    .process-steps--dense .step-card__body {
        padding: var(--space-5-5) var(--space-5) var(--space-6-5) var(--space-5-5);
    }

    .direction-card__body {
        padding: var(--space-4-5) var(--space-3) var(--space-4-5) var(--space-3-5);
    }
}

/* Carousel: three cards */
@container site (max-width: 1239px) {
    .site-wrapper__page {
        --carousel-visible: 3;
        --carousel-peek: 72px;
    }
}

/* Tablet: burger menu, 40px gutters, two-column grids, hero text above the photo */
@container site (max-width: 1100px) {
    .site-wrapper__page {
        --page-gutter: 40px;
        --section-gap: 64px;
        --text-5xl: clamp(2.75rem, 7.4vw, 4rem);
        --hero-subtitle-max: 560px;
        --carousel-peek: 48px;
    }

    .main-nav {
        display: none;
    }

    .site-header__actions {
        margin-left: auto;
    }

    .menu-toggle,
    .mobile-nav {
        display: flex;
    }

    .hero--full {
        display: flex;
        flex-direction: column;
        height: auto;
        background: var(--hero-gradient-stacked);
    }

    .hero__content {
        position: static;
        order: 1;
        max-width: none;
        padding: var(--space-12) var(--page-gutter) 0;
        transform: none;
    }

    .hero__actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3) var(--space-5);
    }

    .hero__media {
        position: relative;
        inset: auto;
        order: 2;
        height: var(--hero-photo-height);
        margin-top: calc(var(--space-2-5) * -1);
        -webkit-mask-image: linear-gradient(180deg, transparent 0, black 30%);
        mask-image: linear-gradient(180deg, transparent 0, black 30%);
    }

    .hero__media::after {
        display: none;
    }

    .hero__image {
        object-position: 72% 40%;
    }

    .trust-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: var(--space-8) var(--page-gutter) var(--space-1);
    }

    .direction-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .steps-carousel__controls {
        gap: var(--space-4-5);
    }

    .steps-carousel__segment {
        width: var(--space-4);
    }

    .trust-panel {
        padding: var(--space-11) var(--space-9) var(--space-12);
    }

    .trust-panel__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-8) var(--space-9);
    }

    .page-head {
        padding: var(--space-5-5) var(--page-gutter) var(--space-10);
    }

    .page-head__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-7);
    }

    .page-head__photo {
        aspect-ratio: 2.1;
    }

    .page-head__deco {
        display: none;
    }

    .process-steps,
    .process-steps--dense {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .document-list__items,
    .service-cards--mini {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .document-lists,
    .price-panel,
    .pricing-cards,
    .service-cards,
    .feature-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .service-cards--mini {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-text {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-9);
    }

    .contact-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-card,
    .contact-card--wide {
        grid-column: auto;
    }

    .contact-card--wide:last-child {
        grid-column: 1 / -1;
    }

    .faq {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-7);
    }

    .cta-banner {
        gap: var(--space-8);
        padding: var(--space-10) var(--space-8) var(--space-6-5);
    }

    .cta-banner__route {
        display: none;
    }

    .lead-form__bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer {
        padding: var(--space-12) var(--page-gutter) var(--space-7);
    }

    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Carousel: two cards */
@container site (max-width: 960px) {
    .site-wrapper__page {
        --carousel-visible: 2;
        --carousel-peek: 64px;
    }
}

@container site (max-width: 900px) {
    .reviews {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Carousel: controls move under the cards */
@container site (max-width: 760px) {
    .steps-carousel {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "header" "track" "controls";
        gap: var(--space-5-5) 0;
    }

    .steps-carousel__controls {
        justify-content: space-between;
        gap: var(--space-4);
    }

    .steps-carousel__segments {
        flex: 1;
        max-width: calc(var(--space-15) * 4);
    }

    .steps-carousel__segment {
        flex: 1;
        width: auto;
    }
}

/* Carousel: one card */
@container site (max-width: 700px) {
    .site-wrapper__page {
        --carousel-visible: 1;
    }

    .steps-carousel__card {
        width: min(calc(var(--sheet-width) - var(--page-gutter) - var(--grid-gap) - var(--carousel-peek)), var(--step-card-max));
    }
}

/* Phone: the sheet goes edge to edge, 16px gutters, single column */
@container site (max-width: 640px) {
    .site-wrapper__page {
        --sheet-margin: 0;
        --sheet-width: 100cqw;
        --page-gutter: 16px;
        --section-gap: 52px;
        --grid-gap: 12px;
        --card-radius: var(--radius-lg);
        --icon-circle: 44px;
        --logo-mark-height: 36px;
        --logo-name-size: var(--text-2xl);
        --text-5xl: clamp(2.375rem, 11.4vw, 3rem);
        --text-4xl: min(2.25rem, 8.9cqw);  /* 36px, a little less on narrow phones so a long word of the H1 fits */
        --text-price: 2.375rem;
        --text-heading-sm: 1.5rem;
        --map-height: 300px;
        --hero-photo-height: 300px;
        --hero-subtitle-max: none;
        --carousel-peek: 56px;
        --carousel-fade: 16px;
        --step-card-min-height: 428px;
        background: var(--surface-primary);
    }

    .sheet {
        border-radius: 0;
    }

    .site-content section {
        scroll-margin-top: calc(var(--header-height-mobile) + var(--space-3));
    }

    .logo {
        gap: var(--space-2);
    }

    .logo__descriptor {
        display: none;
    }

    .site-header::before {
        display: none;
    }

    .site-header__bar {
        gap: var(--space-3);
        height: var(--header-height-mobile);
        padding: 0 var(--space-4);
        border-radius: 0;
    }

    .site-header__actions {
        gap: var(--space-2);
    }

    .site-header__telegram {
        display: none;
    }

    .site-header__cta {
        padding: 0 var(--space-4);
        box-shadow: none;
    }

    .menu-toggle {
        width: var(--tap-target);
        height: var(--tap-target);
        border-radius: var(--radius-sm);
    }

    .mobile-nav {
        max-height: calc(100vh - var(--header-height-mobile));
        max-height: calc(100dvh - var(--header-height-mobile));
        padding: var(--space-1) var(--space-4) var(--space-5);
    }

    .mobile-nav__cta {
        box-shadow: none;
    }

    .hero__content {
        padding: var(--space-7) var(--page-gutter) 0;
    }

    .hero__subtitle {
        margin-top: var(--space-3-5);
    }

    .hero__actions {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2-5);
        margin-top: var(--space-5-5);
    }

    .hero__actions .btn {
        width: 100%;
    }

    .hero__media {
        margin-top: calc(var(--space-1-5) * -1);
    }

    .hero__image {
        object-position: 70% 42%;
    }

    .trust-bar {
        gap: var(--space-4-5) var(--space-3);
        padding: var(--space-6) var(--page-gutter) 0;
    }

    .trust-bar__item {
        align-items: flex-start;
        gap: var(--space-2-5);
    }

    .trust-bar .icon-circle svg {
        width: var(--space-5);
        height: var(--space-5);
    }

    .trust-bar__value {
        font-size: var(--text-lg);
    }

    .trust-bar__label {
        font-size: var(--text-xs);
    }

    .page-section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        margin-bottom: var(--space-5-5);
    }

    .page-section__caption {
        max-width: none;
        text-align: left;
    }

    .direction-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .direction-card__tag {
        top: var(--space-2-5);
        left: var(--space-2-5);
    }

    .direction-card__body {
        margin-top: calc(var(--space-5) * -1);
        padding: var(--space-4) var(--space-2-5) var(--space-4) var(--space-3);
        border-radius: var(--radius-md) var(--radius-md) 0 0;
    }

    .direction-card__arrow {
        top: calc(var(--space-5) * -1);
        right: var(--space-2-5);
        width: var(--space-10);
        height: var(--space-10);
    }

    .direction-card__name {
        font-size: var(--text-md);
    }

    .direction-card__price {
        font-size: var(--text-xs);
    }

    .direction-card__term {
        font-size: var(--text-2xs);
    }

    .steps-carousel {
        gap: var(--space-5) 0;
    }

    .steps-carousel__arrow {
        width: var(--tap-target);
        height: var(--tap-target);
    }

    .step-card__body {
        padding: var(--space-5) var(--space-4-5) var(--space-3-5) var(--space-5);
    }

    .step-card__top {
        font-size: var(--text-sm);
    }

    .step-card__title {
        margin-top: var(--space-3);
    }

    .step-card__text {
        margin-top: var(--space-2);
    }

    .step-card__photo {
        flex: 1 1 calc(var(--space-10) * 4);
        height: auto;
        min-height: calc(var(--space-10) * 4);
        margin-top: var(--space-1);
    }

    .trust-panel {
        padding: var(--space-9) var(--space-5-5) var(--space-9);
        border-radius: var(--radius-xl);
    }

    .trust-panel__title {
        text-align: left;
    }

    .trust-panel__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5-5);
        margin-top: var(--space-7);
    }

    .trust-panel__item {
        display: grid;
        grid-template-columns: var(--space-13) minmax(0, 1fr);
        column-gap: var(--space-3-5);
        align-items: start;
    }

    .trust-panel__icon {
        grid-row: 1 / span 2;
        width: var(--space-13);
        height: var(--space-13);
    }

    .trust-panel__item-title {
        margin-top: var(--space-0-5);
        font-size: var(--text-lg);
    }

    .trust-panel__text {
        margin-top: var(--space-1);
    }

    .review-card {
        padding: var(--space-5-5) var(--card-padding-sm) var(--card-padding-sm);
    }

    .page-head {
        padding: var(--space-4) var(--page-gutter) var(--space-7);
    }

    .breadcrumbs {
        font-size: var(--text-xs);
    }

    .page-head__grid,
    .page-head--simple .page-head__grid {
        gap: var(--space-5-5);
        margin-top: var(--space-3-5);
    }

    .key-facts {
        gap: var(--space-2);
        margin-top: var(--space-5);
    }

    .key-facts__item {
        flex: 1 1 var(--key-fact-basis);
        padding: var(--space-3) var(--space-3-5);
    }

    .key-facts__value {
        font-size: var(--text-lg);
    }

    .page-head__actions {
        margin-top: var(--space-5);
    }

    .page-head__actions .btn {
        flex: 1 1 100%;
    }

    .page-head__photo {
        aspect-ratio: 1.55;
        border-radius: var(--radius-lg);
    }

    .intro-text {
        font-size: var(--text-md);
    }

    .process-steps,
    .process-steps--dense {
        grid-template-columns: minmax(0, 1fr);
    }

    .step-card--plain .step-card__body,
    .process-steps--dense .step-card__body {
        padding: var(--space-5) var(--space-4-5) var(--space-5-5) var(--space-5);
    }

    .document-list {
        padding: var(--space-5-5) var(--space-5);
    }

    .document-list__items,
    .document-list--double .document-list__items {
        grid-template-columns: minmax(0, 1fr);
    }

    .price-panel {
        border-radius: var(--radius-xl);
    }

    .price-panel__main {
        padding: var(--space-7) var(--space-5-5) var(--space-6-5);
    }

    .price-panel__main .btn {
        width: 100%;
    }

    .price-panel__includes {
        padding: var(--space-6-5) var(--space-5-5) var(--space-7);
    }

    .fee-table {
        padding: var(--space-5-5) var(--space-5) var(--space-3);
    }

    .fee-table__row {
        gap: var(--space-3-5);
        font-size: var(--text-base);
    }

    .pricing-card {
        padding: var(--space-6-5) var(--space-5-5) var(--space-5-5);
    }

    .service-card--horizontal {
        grid-template-columns: minmax(0, 1fr);
    }

    .service-card--horizontal .service-card__photo {
        height: var(--service-card-photo-height);
        min-height: 0;
    }

    .service-card--horizontal .service-card__body {
        padding: var(--space-5);
    }

    .service-card--mini .service-card__body {
        padding: var(--space-3) var(--space-3) var(--space-4);
    }

    .service-card--mini .service-card__title {
        font-size: var(--text-md);
    }

    .feature-card {
        padding: var(--space-5-5) var(--space-5) var(--space-6);
    }

    .about-text p {
        font-size: var(--text-md);
    }

    .contact-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-card--wide:last-child {
        grid-column: auto;
    }

    .contact-card {
        padding: var(--space-5-5) var(--space-5) var(--space-5);
    }

    .contact-card__action {
        width: 100%;
    }

    .legal-text h2 {
        margin-top: var(--space-6-5);
        font-size: var(--text-xl);
    }

    .faq__actions .btn {
        flex: 1 1 var(--btn-wrap-basis);
    }

    .faq__question {
        gap: var(--space-4);
        padding: var(--space-4) 0;
        font-size: var(--text-lg);
    }

    .faq__answer {
        padding-right: 0;
    }

    .cta-banner {
        gap: var(--space-5-5);
        min-height: 0;
        padding: calc(var(--banner-photo-height) - var(--space-11)) var(--space-3-5) var(--space-4-5);
        border-radius: var(--radius-xl);
    }

    .cta-banner::after {
        background: var(--banner-shade-stacked);
    }

    .cta-banner__image {
        inset: 0 0 auto;
        height: var(--banner-photo-height);
    }

    .cta-banner__content {
        padding: 0 var(--space-1-5);
    }

    .cta-banner__text {
        font-size: var(--text-md);
    }

    .lead-form__bar {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--space-4) var(--space-3-5);
        border-radius: var(--radius-lg);
    }

    .lead-form__error {
        grid-row: auto;
    }

    .lead-form__submit {
        margin-top: var(--space-1);
    }

    .lead-form__footer {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2-5);
        line-height: var(--leading-relaxed);
    }

    .lead-form__consent {
        align-items: flex-start;
    }

    .site-footer {
        padding: var(--space-10) var(--page-gutter) var(--space-6);
        border-radius: 0;
    }

    .site-footer__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6-5);
    }

    .site-footer__link,
    .site-footer__text {
        padding: var(--space-3) 0;
    }

    .site-footer__legal {
        margin-top: var(--space-7);
    }

    .site-footer__legal-links {
        flex-direction: column;
        gap: 0;
    }

    .site-footer__legal-link {
        display: block;
        padding: var(--space-3) 0;
    }
}

/* Narrow phone: tighter header */
@container site (max-width: 350px) {
    .site-wrapper__page {
        --logo-mark-height: 32px;
        --logo-name-size: var(--text-xl);
        --carousel-peek: 40px;
        --text-4xl: 1.75rem;  /* the longest word of an inner-page H1 still fits */
    }

    .site-header__bar {
        gap: var(--space-2);
        padding: 0 var(--space-3);
    }

    .site-header__cta {
        padding: 0 var(--space-3);
        font-size: var(--text-sm);
    }
}

/* Photo cards do not lift for visitors who asked for less motion */
@media (prefers-reduced-motion: reduce) {
    .direction-card:hover,
    .service-card:hover {
        transform: none;
    }
}