/**
 * Kultiva — home page. Boards: "Home" (desktop) and "Mobile — Home" (390 px).
 * Phones get the lean board: no finder, no "What you get" or brands, compact
 * cards that scroll sideways, a one-line leasing estimate, and the list of
 * locations with call buttons instead of the map.
 */

.k-section-pad {
    padding-block: var(--k-section-y);
}

.k-section-pad h2 {
    margin: 0;
}

/* ============================================
   HERO: text beside one priced machine on the "furrow stage"
   ============================================ */

.k-hero {
    background: var(--k-surface-2);
    border-bottom: 1px solid var(--k-line);
}

.k-hero__inner {
    display: grid;
    gap: 18px;
    padding-block: 28px 20px;
}

.k-hero__intro {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.k-hero__intro .k-eyebrow {
    margin: 0;
}

.k-hero__title {
    margin: 0;
    color: var(--k-text-max);
    text-wrap: balance;
}

.k-hero__lead {
    max-width: 580px;
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--k-text);
    text-wrap: pretty;
}

.k-hero__actions {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.k-hero__buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.k-checks {
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: var(--k-text);
}

.k-checks li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.k-checks .bi {
    color: var(--k-text-green);
    font-size: 18px;
}

/* Phones: the buttons right under the lead, the machine after them (E6) */
.k-hero__visual {
    position: relative;
    order: 1;
}

.k-stage {
    position: relative;
    height: 250px;
    overflow: hidden;
    border-radius: var(--k-radius-dialog);
    /* Sky above the horizon (41% down, where the furrows meet), ground below; the drawing holds only the lines */
    background: linear-gradient(#EEF1E9 0 41%, var(--k-surface-3) 41%);
    isolation: isolate;
}

.k-stage__ground {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.k-stage__machine {
    position: absolute;
    inset: 4% 8% 3%;
    width: 84%;
    height: 93%;
    object-fit: contain;
    object-position: center bottom;
    mix-blend-mode: multiply;
}

/* Phones: the price card sits under the stage as one link */
.k-price-card {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 12px;
    margin-top: -6px;
    padding: 14px 16px;
    border-radius: var(--k-radius-card);
    background: var(--k-surface);
    box-shadow: 0 1px 2px rgba(15, 26, 46, 0.08), 0 8px 20px rgba(15, 26, 46, 0.1);
    color: var(--k-text-strong);
    text-decoration: none;
}

.k-price-card:hover {
    color: var(--k-text-strong);
}

/* On arrival, once: the furrows open from the point on the horizon where they meet, the machine comes down
   them to its place and the price card settles under it. The only motion on the site that plays by itself;
   the words are there from the first frame. static/js/motion.js holds the machine back until its photo has
   loaded, so on a slow connection it still arrives rather than appears. */
@media (prefers-reduced-motion: no-preference) {
    .k-stage__ground {
        animation: k-furrows 600ms var(--k-ease-out) backwards;
    }

    .k-stage__machine {
        transform-origin: 50% 100%;
        animation: k-arrive 560ms var(--k-ease-out) backwards;
    }

    .k-stage__machine.is-loading {
        animation-name: none;
    }

    .k-price-card {
        animation: k-settle 400ms var(--k-ease-out) 60ms backwards;
        transition: transform var(--k-fast) var(--k-ease-out);
        -webkit-tap-highlight-color: transparent;
    }

    .k-price-card:active {
        transform: scale(0.98);
    }
}

@keyframes k-furrows {
    from {
        clip-path: circle(0% at 50% 41%);
    }

    to {
        clip-path: circle(80% at 50% 41%);
    }
}

@keyframes k-arrive {
    from {
        opacity: 0;
        transform: translateY(-3%) scale(0.92);
    }

    40% {
        opacity: 1;
    }
}

@keyframes k-settle {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    40% {
        opacity: 1;
    }
}

.k-price-card__top {
    display: none;
}

.k-price-card__brand {
    font-family: var(--k-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--k-text-muted);
}

:lang(hy) .k-price-card__brand {
    font-size: 14px;
    letter-spacing: 0;
}

.k-price-card__name {
    flex: 1 1 100%;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--k-text-muted);
}

.k-price-card__figures {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.k-price-card__price {
    font-size: 20px;
    font-weight: 800;
    font-stretch: 88%;
    font-variant-numeric: tabular-nums;
    color: var(--k-text-max);
}

.k-price-card__monthly {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--k-text-green);
}

.k-price-card__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.k-price-card__more-text {
    display: none;
}

@media (min-width: 768px) {
    .k-hero__inner {
        gap: 26px;
        padding-block: 48px 28px;
    }

    .k-hero__intro {
        gap: 26px;
    }

    .k-hero__lead {
        font-size: 20px;
    }

    .k-hero__buttons {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
    }

    .k-hero__visual {
        order: 0;
    }

    .k-stage {
        height: auto;
        aspect-ratio: 6 / 5;
        border-radius: var(--k-radius-panel);
    }

    .k-stage__machine {
        inset: 6% 6% 10%;
        width: 88%;
        height: 84%;
    }

    /* The price card sits under the photo and laps only the strip of ground below the wheels, as on phones
       (Arthur, 2026-10-20: it hid the featured machine's front wheel). -6% of the column's width is about 7% of
       the 6:5 stage's height, inside the photo's 10% bottom inset at every width; coming after the stage, the
       card paints over it. */
    .k-price-card {
        width: 330px;
        max-width: calc(100% - 32px);
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 10px;
        margin: -6% 0 0 16px;
        padding: 18px 20px;
        box-shadow: 0 1px 2px rgba(15, 26, 46, 0.08), 0 14px 36px rgba(15, 26, 46, 0.14);
    }

    .k-price-card__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .k-price-card__name {
        flex: 0 0 auto;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.3;
        color: var(--k-text-strong);
    }

    .k-price-card__power {
        color: var(--k-text-muted);
        font-weight: 600;
    }

    .k-price-card__figures {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 12px;
    }

    .k-price-card__price {
        font-size: 28px;
    }

    .k-price-card__monthly {
        font-size: 15px;
    }

    .k-price-card__more {
        min-height: 32px;
        text-decoration: underline;
        text-decoration-thickness: 1.5px;
        text-underline-offset: 4px;
    }

    .k-price-card__more-text {
        display: inline;
    }

    .k-price-card__chevron {
        display: none;
    }
}

@media (min-width: 992px) {
    /* Display grows with the window up to its 76 px cap, so the line count stays near the board's. A short
       window holds it back (the vh part), so the two buttons under it stay in the first screen on a laptop:
       at 1366 x 768 and 1280 x 720 they were cut off. */
    .k-hero__title {
        font-size: clamp(44px, min(5.2vw, 8.2vh), 76px);
    }

    /* Armenian words are longer: the same headline ran to six lines and pushed the buttons under the fold on
       every laptop up to 1536 x 864. A step smaller (56 px at most), it sets in five at every width. */
    :lang(hy) .k-hero__title {
        font-size: clamp(44px, min(4.3vw, 7.2vh), 56px);
    }

    .k-hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
        grid-template-areas:
            "intro visual"
            "actions visual";
        align-items: center;
        column-gap: 48px;
        row-gap: 26px;
        padding-block: clamp(40px, 5vw, 80px) 28px;
    }

    .k-hero__intro {
        grid-area: intro;
        align-self: end;
    }

    .k-hero__visual {
        grid-area: visual;
    }

    .k-hero__actions {
        grid-area: actions;
        align-self: start;
    }
}

/* A laptop's window is short: about 630 to 730 px are left under the browser's own bars, and the picture
   beside the text is taller than that. Centred against the picture, the text began low and its two buttons
   fell under the fold (1366 x 768 and 1536 x 864 screens, the common ones). In a short window the text starts
   at the top of the band, and the band's top padding gives way to the window's height. */
@media (min-width: 992px) and (max-height: 800px) {
    .k-hero__inner {
        grid-template-rows: auto 1fr;
        padding-block-start: clamp(24px, 5vh, 56px);
    }
}


/* ============================================
   MACHINE FINDER (from 768 px)
   ============================================ */

.k-finder-wrap {
    padding-block: 8px 40px;
}

.k-finder {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    align-items: end;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--k-line);
    border-radius: var(--k-radius-dialog);
    background: var(--k-surface);
    box-shadow: 0 1px 2px rgba(15, 26, 46, 0.05);
}

.k-finder .k-btn {
    min-height: var(--k-control-lg);
}

.k-footnote {
    margin: 10px 2px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--k-text-muted);
}


/* ============================================
   QUICK TASKS
   ============================================ */

.k-tasks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-block: 20px;
}

.k-task {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 104px;
    padding: 16px;
    border: 1px solid var(--k-line);
    border-radius: var(--k-radius-card);
    background: var(--k-surface);
    color: var(--k-text-strong);
    text-decoration: none;
    transition: box-shadow var(--k-base) var(--k-ease), border-color var(--k-base) var(--k-ease),
        transform var(--k-fast) var(--k-ease-out);
    -webkit-tap-highlight-color: transparent;
}

/* Tiles give under the finger; the short wait keeps them still when the finger only starts a scroll */
@media (prefers-reduced-motion: no-preference) {
    .k-task:active {
        transform: scale(0.98);
        transition-delay: 0s, 0s, 70ms;
    }
}

/* Hover is for a mouse: on a touch screen it would stay on the tile after the tap */
@media (hover: hover) and (pointer: fine) {
    .k-task:hover {
        border-color: var(--k-chip-line);
        box-shadow: var(--k-shadow-raised);
    }
}

.k-task:hover {
    color: var(--k-text-strong);
}

.k-task__icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--k-radius-button);
    background: var(--k-success-bg);
    color: var(--k-text-green);
    font-size: 22px;
}

.k-task__icon--harvest {
    background: var(--k-warning-bg);
    color: #6B5300;
}

.k-task__icon--navy {
    background: var(--k-info-bg);
    color: var(--k-text-navy);
}

.k-task__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.k-task__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
}

.k-task__detail {
    display: none;
    font-size: 14px;
    line-height: 1.45;
    color: var(--k-text-muted);
}

/* Narrow phones: room for "պահեստամաս" inside the tile (QA-041) */
@media (max-width: 374.98px) {
    .k-task {
        padding-inline: 12px;
    }
}

@media (min-width: 768px) {
    .k-tasks {
        grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
        gap: 16px;
        padding-block: 40px 8px;
    }

    .k-task {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        min-height: 0;
        padding: 20px;
        border-radius: var(--k-radius-dialog);
    }

    .k-task__title {
        font-size: 17px;
    }

    .k-task__detail {
        display: block;
    }
}


/* ============================================
   SHOP BY JOB
   ============================================ */

.k-jobs__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.k-job {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    padding: 12px 12px 4px;
    border-radius: var(--k-radius-card);
    background: var(--k-surface-2);
    color: var(--k-text-strong);
    text-decoration: none;
    isolation: isolate;
    transition: background-color var(--k-fast) ease-out, transform var(--k-fast) var(--k-ease-out);
    -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
    .k-job:active {
        transform: scale(0.98);
        transition-delay: 0s, 70ms;
    }
}

@media (hover: hover) and (pointer: fine) {
    .k-job:hover {
        background: var(--k-surface-3);
    }
}

.k-job:hover {
    color: var(--k-text-strong);
}

/* The count sits beside the title, and drops under it only when the title's longest word leaves no room
   (QA-041: "Տրակտորներ", "տնտեսություն" ran into the count at 360 px). The 8 px between them keeps
   "Փոքր տնտեսություն" and its count on one line at 375 px. */
.k-job__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2px 8px;
}

.k-job__text {
    display: flex;
    flex: 1 1 min-content;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.k-job__title {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
}

.k-job__detail {
    font-size: 14px;
    line-height: 1.4;
    color: var(--k-text-muted);
}

.k-job__count {
    flex: 0 0 auto;
    font-family: var(--k-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--k-text-green);
}

.k-job__photo {
    display: block;
    width: 100%;
    height: 96px;
    margin-top: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

@media (min-width: 768px) {
    .k-jobs__grid {
        gap: 16px;
    }

    .k-job {
        gap: 8px;
        min-height: 290px;
        padding: 22px 22px 6px;
        border-radius: var(--k-radius-sheet);
    }

    .k-job__title {
        font-size: 24px;
        font-stretch: 88%;
        line-height: 1.1;
    }

    .k-job__count {
        padding: 5px 10px;
        border-radius: 999px;
        background: var(--k-surface);
        font-size: 13px;
    }

    .k-job__photo {
        height: 190px;
    }
}

@media (min-width: 992px) {
    .k-jobs__grid {
        grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
    }
}

@media (min-width: 1200px) {
    .k-jobs__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/* ============================================
   POPULAR TRACTORS: a sideways row on phones, a grid from 768 px
   ============================================ */

.k-popular {
    border-top: 1px solid var(--k-line-soft);
}

.k-popular__grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--k-gutter));
    padding: 0 var(--k-gutter) 6px;
    scroll-padding-inline: var(--k-gutter);
    scroll-snap-type: x mandatory;
}

.k-popular__grid > .k-card {
    flex: 0 0 250px;
    scroll-snap-align: start;
}

@media (min-width: 768px) {
    .k-popular__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
        gap: 16px;
        overflow: visible;
        margin-inline: 0;
        padding: 0;
    }
}


/* ============================================
   LEASING (Night band) with the estimate card
   ============================================ */

.k-lease {
    position: relative;
    overflow: hidden;
    background: var(--k-band);
    color: var(--k-white);
}

.k-lease::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 22px);
    pointer-events: none;
}

.k-lease__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-block: 40px;
}

.k-lease__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.k-lease__text .k-eyebrow {
    margin: 0;
}

.k-lease h2 {
    margin: 0;
    color: var(--k-white);
}

.k-lease__lead {
    max-width: 560px;
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--k-on-night-2);
}

.k-lease__mini {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-radius: var(--k-radius-card);
    background: var(--k-surface);
    color: var(--k-text-strong);
}

.k-lease__mini > span:first-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.k-lease__mini-label {
    font-size: 14px;
    color: var(--k-text-muted);
}

.k-lease__mini-amount {
    font-size: 24px;
    font-weight: 800;
    font-stretch: 85%;
    font-variant-numeric: tabular-nums;
}

.k-lease__mini-tag {
    font-family: var(--k-mono);
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--k-text-muted);
}

:lang(hy) .k-lease__mini-tag {
    letter-spacing: 0;
    text-transform: none;
}

.k-estimate {
    flex-direction: column;
    gap: 20px;
    padding: 28px;
    border-radius: var(--k-radius-panel);
    background: var(--k-surface);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
    color: var(--k-text-strong);
}

.k-estimate__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.k-estimate__head h3 {
    margin: 0;
    font-size: 20px;
    font-stretch: 90%;
}

.k-estimate__badge {
    font-family: var(--k-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--k-text-muted);
}

:lang(hy) .k-estimate__badge {
    letter-spacing: 0;
    text-transform: none;
}

.k-estimate .k-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.k-estimate__note {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--k-text-muted);
}

.k-estimate__result {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border-radius: var(--k-radius-card);
    background: var(--k-surface-2);
}

.k-estimate__label {
    font-size: 14px;
    color: var(--k-text-muted);
}

.k-estimate__monthly {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}

.k-estimate__monthly [data-k-out="monthly"] {
    font-size: 44px;
    font-weight: 800;
    font-stretch: 85%;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--k-text-max);
}

.k-estimate__per {
    font-size: 15px;
    color: var(--k-text-muted);
}

.k-estimate__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: 10px;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--k-line);
    font-size: 14px;
}

.k-estimate__facts dt {
    font-weight: 400;
    color: var(--k-text-muted);
}

.k-estimate__facts dd {
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.k-estimate__fine {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--k-text-muted);
}

@media (min-width: 768px) {
    .k-lease__inner {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 40px 56px;
        padding-block: 64px;
    }

    .k-lease__text {
        flex: 1 1 380px;
        min-width: 0;
        gap: 22px;
    }

    .k-lease__text .k-btn {
        align-self: flex-start;
    }

    .k-lease__lead {
        font-size: 18px;
        line-height: 1.6;
    }

    .k-estimate {
        flex: 1 1 420px;
        min-width: 0;
    }
}

@media (min-width: 992px) {
    .k-lease__inner {
        padding-block: 88px;
    }
}


/* ============================================
   LOCATIONS: list beside the drawn map
   ============================================ */

.k-network__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.k-network__text {
    display: flex;
    flex-direction: column;
}

.k-network__lead {
    margin: 6px 0 14px;
    font-size: 15px;
    color: var(--k-text-muted);
}

.k-places {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--k-line);
}

.k-place {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 16px;
    min-height: 64px;
    padding: 10px 0;
    border-bottom: 1px solid var(--k-line);
}

.k-place__text {
    display: flex;
    /* Grow from nothing, so a long name wraps inside and the call button keeps its place on the right */
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
}

.k-place__name {
    font-weight: 700;
}

.k-place__detail {
    font-size: 14px;
    color: var(--k-text-muted);
}

.k-place__phone {
    color: var(--k-text-strong);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
    .k-place__phone:hover {
        text-decoration: underline;
    }
}

.k-place__call {
    display: grid;
    flex: 0 0 44px;
    place-items: center;
    width: 44px;
    height: var(--k-control);
    border-radius: 50%;
    background: var(--k-success-bg);
    color: var(--k-text-green-strong);
    font-size: 18px;
}

.k-network__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

@media (min-width: 768px) {
    .k-network__text {
        gap: 20px;
    }

    .k-network__text .k-eyebrow {
        margin: 0;
    }

    .k-network__lead {
        margin: 0;
        font-size: 18px;
        line-height: 1.6;
        color: var(--k-text);
    }

    .k-places {
        margin-top: 8px;
    }

    .k-network__actions {
        margin-top: 8px;
    }
}

@media (min-width: 992px) {
    .k-network__inner {
        flex-direction: row;
        align-items: flex-start;
        gap: 56px;
    }

    .k-network__text {
        flex: 1 1 460px;
        min-width: 0;
    }

    .k-network__map {
        flex: 1 1 560px;
        min-width: 0;
    }
}


/* ============================================
   WHAT YOU GET, AND THE BRANDS (from 768 px)
   ============================================ */

.k-proof {
    background: var(--k-surface-2);
}

.k-proof h2 {
    margin-bottom: 36px;
}

.k-proof__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 16px;
}

.k-proof__item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px;
    border-radius: var(--k-radius-sheet);
    background: var(--k-surface);
}

.k-proof__item h3 {
    margin: 0;
}

.k-proof__item p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--k-text);
}

.k-brands {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 32px;
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--k-line);
}

.k-brands__label {
    font-family: var(--k-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--k-text-muted);
}

:lang(hy) .k-brands__label {
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
}

.k-brands__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.k-brands__list a,
.k-brands__list span {
    color: var(--k-text-navy);
    font-size: 17px;
    font-weight: 800;
    font-stretch: 80%;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
    .k-brands__list a:hover {
        text-decoration: underline;
    }
}


/* ============================================
   TALK TO A SPECIALIST
   ============================================ */

.k-help__box {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px 20px;
    border-radius: var(--k-radius-sheet);
    background: var(--k-surface-2);
}

.k-help__text h2 {
    margin: 0 0 8px;
}

.k-help__text p {
    max-inline-size: 68ch;
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--k-text);
}

.k-help__contact {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.k-help__phone {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: var(--k-control);
    color: var(--k-text-max);
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .k-help__phone:hover {
        color: var(--k-text-max);
    }
}

.k-help__phone-icon {
    flex: 0 0 52px;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--k-green);
    color: var(--k-white);
    font-size: 22px;
}

.k-help__number {
    display: block;
    font-size: 24px;
    font-weight: 800;
    font-stretch: 88%;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.k-help__hours {
    font-size: 14px;
    color: var(--k-text-muted);
}

.k-help__buttons {
    display: grid;
    gap: 8px;
}

@media (min-width: 768px) {
    .k-help__box {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 32px 40px;
        padding: clamp(28px, 4vw, 56px);
        border: 1.5px solid var(--k-text-strong);
        border-radius: var(--k-radius-panel);
        background: var(--k-surface);
    }

    .k-help__text {
        flex: 1 1 420px;
        min-width: 0;
    }

    .k-help__text p {
        font-size: 18px;
        line-height: 1.6;
    }

    .k-help__contact {
        flex: 1 1 340px;
        min-width: 0;
    }

    .k-help__number {
        font-size: 28px;
    }

    .k-help__buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
}


/* ============================================
   AS THE PAGE SCROLLS
   Scrolling is the visitor's own movement, and three things answer it, tied to the scroll position by the
   browser (no script; where it cannot do this, nothing moves). Nothing is hidden and nothing waits: these
   only shift what is already in place, and stop when the scrolling stops.
   Kept at the end of the file: these rules must win over the sections' own (overflow, inset) above.
   - The hero's machine hangs back a little as the stage leaves the screen, as a near thing does against a
     far one. It uses translate and scale, so the arrival's transform above is left alone.
   - The furrows on the leasing band (its fine slanted lines) pass by, the field carried on from the hero.
   - The leasing estimate settles into its place as it comes into view, as the price card did on arrival.
   ============================================ */

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        /* overflow: hidden would make the stage and the band scroll containers of their own, and the browser
           would measure the scroll against them, where nothing ever scrolls. clip cuts the same way without that. */
        .k-stage,
        .k-lease {
            overflow: clip;
        }

        .k-stage__machine {
            animation: k-arrive 560ms var(--k-ease-out) backwards, k-hang-back linear both;
            animation-timeline: auto, view();
            animation-range: normal, exit 0% exit 100%;
        }

        .k-lease::before {
            inset: 0 -48px;
            animation: k-furrows-pass linear both;
            animation-timeline: view();
        }

        .k-estimate,
        .k-lease__mini {
            animation: k-settle-in linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 70%;
        }
    }
}

@keyframes k-hang-back {
    to {
        translate: 0 5%;
        scale: 1.03;
    }
}

@keyframes k-furrows-pass {
    from {
        translate: -44px 0;
    }

    to {
        translate: 44px 0;
    }
}

@keyframes k-settle-in {
    from {
        translate: 0 28px;
    }
}