/* Homepage sections below the hero — 2026 redesign.
   After BYQ Supply "Modulabs" sections (Intro Text 4, Stats 2, Value & Features 7 / 6 / 2, Image Gallery 1, Contact 4),
   adapted to Locopro tokens (css/design/tokens.css, accent = Signal Yellow). Markup: template-parts/landing.php */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px;                   /* anchors (#contact, #specs, product cards) land below the sticky bar */
}

.lp-main {
    background: var(--color-graphite-void);
}

/* ---------------------------------------------------------------- shared */
.lp-container {
    width: 100%;
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-32);
}

.lp-section {
    position: relative;
    padding: var(--section-gap) 0;              /* overrides the generic `section` padding in screen.css */
    overflow: visible;                          /* legacy CSS sets `section { overflow: hidden }`, which kills position: sticky */
    background: var(--color-graphite-void);
    color: var(--color-softened-parchment);
    font-family: var(--font-geist-sans);
    -webkit-font-smoothing: antialiased;
}

.lp-label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-12);
    margin: 0;
    color: var(--color-softened-parchment);
    font: 300 var(--text-caption) / var(--leading-caption) var(--font-geist-mono);
    letter-spacing: var(--tracking-caption);
    text-transform: uppercase;
}

.lp-label__dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--color-signal-yellow);
}

.lp-muted {
    color: var(--color-text-medium);
}

.lp-section h2,
.lp-section h3,
.lp-contact h2 {
    margin: 0;
    font-family: var(--font-geist-sans);
    font-weight: var(--font-weight-regular);
    text-transform: none;
}

.lp-h2 {
    color: var(--color-parchment-cream);
    font-size: var(--text-display-sm);
    line-height: var(--leading-display-sm);
    letter-spacing: var(--tracking-display-sm);
}

.lp-body {
    margin: 0;
    color: var(--color-text-medium);
    font-size: var(--text-body-sm);
    line-height: 20px;
}

.lp-body--lg {
    color: var(--color-softened-parchment);
    font-size: var(--text-body);
    line-height: 24px;
}

.lp-center-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-24);
    max-width: 680px;
    margin: 0 auto var(--spacing-64);
    text-align: center;
}

/* icons stand alone: no box, no border, no fill (client) — just the yellow line icon */
.lp-icon-chip {
    display: inline-grid;
    place-items: center;
    flex: none;
    align-self: flex-start;                     /* never stretch across a flex column */
    justify-self: start;
    color: var(--color-signal-yellow);
}

.lp-icon-chip svg {
    width: 28px;
    height: 28px;
}

/* buttons: secondary = cream tint with a visible cream outline, light = cream fill. No yellow square and no arrow
   (client); 44px tall so they read as buttons. Arrows live only on the homepage product-card chips. */
.lp-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8);
    min-height: 44px;
    padding: var(--spacing-8) var(--spacing-20);
    border: 0;
    border-radius: var(--radius-default);
    background: rgba(246, 243, 236, 0.1);
    box-shadow: inset 0 0 0 1px rgba(246, 243, 236, 0.4);
    color: var(--color-parchment-cream);
    font: var(--font-weight-medium) var(--text-body-sm) / 24px var(--font-geist-sans);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-background-soft) var(--easing-background-soft), color var(--duration-color-fast) linear;
}

.lp-btn:hover {
    background: rgba(246, 243, 236, 0.18);
    box-shadow: inset 0 0 0 1px rgba(246, 243, 236, 0.7);
    color: var(--color-parchment-cream);
}

.lp-btn--light {
    background: var(--color-parchment-cream);
    box-shadow: none;
    color: var(--color-graphite-void);
}

.lp-btn--light:hover {
    background: var(--color-softened-parchment);
    color: var(--color-graphite-void);
}

/* dark CTA, used on the yellow band */
.lp-btn--dark {
    background: var(--color-graphite-void);
    box-shadow: none;
    color: var(--color-parchment-cream);
}

.lp-btn--dark:hover {
    background: #1d1d20;
    color: var(--color-parchment-cream);
}

/* yellow accent phrase inside a heading (landing.php → $yellow['heading_accents']).
   A heading with an accent uses only two colours: the rest of it is the muted grey, the phrase is yellow
   (cream + grey + yellow read as three colours — client). */
.lp-section h2:has(.lp-accent) {
    color: var(--color-text-medium);
}

.lp-accent,
.lp-accent .lp-w__i {
    color: var(--color-signal-yellow);
}

.lp-section a:focus-visible,
.lp-contact a:focus-visible,
.lp-btn:focus-visible {
    outline: 2px solid var(--color-signal-yellow);
    outline-offset: 3px;
}

/* entrance: fade + rise once in view (js/design/landing.js adds .lp-js and .is-visible) */
.lp-js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms ease-out, transform 700ms ease-out;
    transition-delay: var(--d, 0ms);
}

.lp-js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* ---------------------------------------------------------------- intro (Intro Text 4) */
.lp-intro .lp-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
}

.lp-intro__title {
    max-width: 1180px;
    color: var(--color-parchment-cream);
    font-size: var(--text-display);
    line-height: 60px;
    letter-spacing: var(--tracking-display);
}

/* ---------------------------------------------------------------- stats (Stats 2) */
.lp-stats {
    padding-top: 0;
}

.lp-rule {
    display: block;
    height: 1px;
    background: var(--color-hairline);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 700ms ease-out;
    transition-delay: var(--d, 0ms);
}

.lp-rule.is-visible,
html:not(.lp-js) .lp-rule {
    transform: none;
}

.lp-stats__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-16);
    align-items: start;
    padding: var(--spacing-24) 0;
}

.lp-stats__label {
    padding-top: 6px;
}

.lp-stats__value {
    margin: 0;
    color: var(--color-parchment-cream);
    font: var(--font-weight-regular) var(--text-display) / 60px var(--font-geist-sans);
    letter-spacing: var(--tracking-display);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- about (the original Locoproject block)
   Text left; right a photo with the crusher driving out of it over the dark ground.
   Same grid as the products section below (container, 1fr 1fr, 64px gap), so the photo's edges line up exactly
   with the product cards under it.
   The image (img/section/locoproject-machine.*) is the photo plus a transparent strip on its left (29 % of its
   width) that holds the machine's front: the photo column gets exactly the photo, the strip hangs out to the left. */
.lp-about {
    --strip: 0.29;                              /* transparent strip / image width */
    /* the photo keeps the products' left line but runs on to the right edge of the window:
       bleed = container margin + container padding */
    --bleed: calc((100vw - min(100vw, var(--page-max-width))) / 2 + var(--spacing-32));
    padding: 0;                                 /* the stats above and products below already bring their own section gap */
    overflow-x: clip;                           /* 100vw counts a classic scrollbar: never a sideways scroll */
}

.lp-about__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;             /* = .lp-products__grid */
    gap: var(--spacing-64);
    align-items: center;
}

.lp-about__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-24);
    /* stop 48px before the machine's front: it hangs out of the photo by strip/(1-strip) of the photo width
       (column + bleed), minus the 64px gap (a grid item's % padding resolves against its column width) */
    padding-right: calc((100% + var(--bleed)) * var(--strip) / (1 - var(--strip)) - var(--spacing-64) + var(--spacing-48));
}

.lp-about__content .lp-body--lg {
    max-width: 52ch;
}

/* the portfolio in three lines under hairlines: title left, what it covers right */
.lp-about__points {
    width: 100%;
    margin: var(--spacing-8) 0 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--color-hairline);
}

.lp-about__points li {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: var(--spacing-16);
    padding: var(--spacing-12) 0;
    border-top: 1px solid var(--color-hairline);
}

.lp-about__point-title {
    color: var(--color-parchment-cream);
    font-size: var(--text-body-sm);
    line-height: 20px;
}

.lp-about__point-text {
    color: var(--color-text-medium);
    font-size: var(--text-body-sm);
    line-height: 20px;
}

.lp-about__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-16) var(--spacing-24);
    margin-top: var(--spacing-8);
}

.lp-about__certs {
    color: var(--color-text-medium);
}

.lp-about__title {
    color: var(--color-parchment-cream);
    font-size: var(--text-display);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
}

.lp-about__visual {
    --corner-x: 0px;                            /* where the photo's left edge is inside the figure */
    position: relative;
    z-index: 1;
    margin: 0 calc(-1 * var(--bleed)) 0 0;      /* stretches from the products' left line to the window edge */
    /* static (client, 2026-11-12): no scroll drift and no slide-in, the picture only fades in */
}

/* rounded top-left and bottom-left photo corners (the right edge runs off the page, so it stays square).
   A mask would also cut the machine hanging out on the left, so the corners are painted over in the page colour:
   two 8px squares, transparent inside a quarter circle. The machine never reaches the corners. */
.lp-about__visual::before,
.lp-about__visual::after {
    content: "";
    position: absolute;
    left: calc(var(--corner-x) - 1px);          /* 1px wider to the left: covers the photo's sub-pixel edge column */
    z-index: 1;
    width: calc(var(--radius-default) + 1px);
    height: var(--radius-default);
    pointer-events: none;
}

.lp-about__visual::before {
    top: 0;
    background: radial-gradient(circle at 100% 100%, transparent calc(var(--radius-default) - 0.5px), var(--color-graphite-void) var(--radius-default));
}

.lp-about__visual::after {
    bottom: 0;
    background: radial-gradient(circle at 100% 0, transparent calc(var(--radius-default) - 0.5px), var(--color-graphite-void) var(--radius-default));
}

.lp-about__visual img {
    display: block;
    width: calc(100% / (1 - var(--strip)));
    max-width: none;
    height: auto;
    margin-left: calc(-100% * var(--strip) / (1 - var(--strip)));
    /* no scroll drift: the photo's edges stay on the products grid lines */
}

/* entrance: a fade only — the picture does not move (client) */
.lp-js .lp-about__visual[data-reveal] {
    transform: none;
    transition: opacity 1100ms ease-out var(--d, 0ms);
}

/* ---------------------------------------------------------------- dividers draw themselves in yellow, then cool to grey
   stats rules, "why" columns, Smart items, About portfolio rows. Each line is a 1px pseudo-element (or .lp-rule)
   that scales in from the left when its block becomes visible; while drawing it is Signal Yellow, then it fades
   to the hairline colour. --ld = the line's delay. */
@keyframes lp-line-cool {
    0%, 45% { background-color: var(--color-signal-yellow); }
    100% { background-color: var(--color-hairline); }
}

.lp-rule.is-visible {
    animation: lp-line-cool 2200ms ease-out var(--d, 0ms) backwards;
}

.lp-why__card,
.lp-smart__feature,
.lp-about__points,
.lp-about__points li {
    position: relative;
    border-top: 0;
    border-bottom: 0;
}

.lp-why__card::before,
.lp-smart__feature::before,
.lp-about__points li::before,
.lp-about__points::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-hairline);
    transform-origin: left center;
    pointer-events: none;
}

.lp-about__points::after {
    top: auto;
    bottom: 0;
}

.lp-why__card                         { --ld: var(--d, 0ms); }
.lp-smart__features li:nth-child(2) .lp-smart__feature { --ld: 120ms; }
.lp-smart__features li:nth-child(3) .lp-smart__feature { --ld: 240ms; }
.lp-smart__features li:nth-child(4) .lp-smart__feature { --ld: 360ms; }
.lp-about__points li:nth-child(2)     { --ld: 120ms; }
.lp-about__points li:nth-child(3)     { --ld: 240ms; }
.lp-about__points                     { --ld: 360ms; }

.lp-js .lp-why__card::before,
.lp-js .lp-smart__feature::before,
.lp-js .lp-about__points li::before,
.lp-js .lp-about__points::after {
    transform: scaleX(0);
    transition: transform 800ms ease-out var(--ld, 0ms);
}

.lp-why__card.is-visible::before,
.lp-smart__content.is-visible .lp-smart__feature::before,
.lp-about__content.is-visible .lp-about__points li::before,
.lp-about__content.is-visible .lp-about__points::after {
    transform: none;
    animation: lp-line-cool 2200ms ease-out var(--ld, 0ms) backwards;
}

/* ---------------------------------------------------------------- products (Value & Features 7) */
.lp-products {
    background: var(--color-graphite-void);     /* same ground as the rest of the page (client) */
}

.lp-products__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-64);
    align-items: start;
}

.lp-products__aside {
    position: sticky;
    top: var(--lp-sticky-top);                  /* below the sticky navbar */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-48);
    max-width: 448px;
}

.lp-products__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-24);
}

.lp-tabs {
    max-width: 332px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--color-hairline);
}

.lp-tabs__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    overflow: hidden;
    padding: var(--spacing-12) 0;
    border-bottom: 1px solid var(--color-hairline);
    color: var(--color-text-medium);
    font: 300 var(--text-caption) / var(--leading-caption) var(--font-geist-mono);
    letter-spacing: var(--tracking-caption);
    text-transform: uppercase;
    text-decoration: none;
    transition: padding-left 400ms ease, color var(--duration-ui-default) linear;
}

.lp-tabs__item .lp-label__dot {
    margin-left: -20px;                         /* hidden until the item is active, then it slides in */
    transition: margin-left 400ms ease;
}

.lp-tabs__item:hover {
    color: var(--color-softened-parchment);
}

.lp-tabs__item.is-active {
    color: var(--color-softened-parchment);
}

.lp-tabs__item.is-active .lp-label__dot {
    margin-left: 0;
}

.lp-products__cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
}

.lp-card {
    position: relative;
    height: 400px;
    overflow: hidden;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-default);
    background: var(--color-graphite-void);
    scroll-margin-top: var(--spacing-120);
}

.lp-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateY(var(--py, 0px)) scale(var(--zoom, 1.1));   /* --py: scroll parallax (landing.js) */
    transition: transform 900ms cubic-bezier(0.33, 1, 0.68, 1);
}

.lp-card:hover .lp-card__img {
    --zoom: 1.15;
}

.lp-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--spacing-32);
    background: linear-gradient(0deg, var(--color-graphite-void) 0%, rgba(10, 10, 11, 0.55) 45%, rgba(10, 10, 11, 0) 100%);
}

.lp-card__overlay .lp-icon-chip {
    color: var(--color-parchment-cream);        /* the photos are full of yellow machines: a cream icon stays readable */
    filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.7));
}

.lp-card__text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.lp-card__title,
.lp-section h3.lp-card__title {
    color: var(--color-parchment-cream);
    text-transform: uppercase;                  /* product-line names in capitals (client) */
    letter-spacing: 0.01em;
    font-size: var(--text-heading-sm);
    font-weight: var(--font-weight-medium) !important;
    line-height: var(--leading-heading-sm);
}

.lp-card__body {
    max-width: 52ch;
    margin: 0;
    color: var(--color-text-medium);
    font-size: var(--text-body-sm);
    line-height: 20px;
}

.lp-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
    margin: var(--spacing-12) 0 0;
    padding: 0;
    list-style: none;
}

.lp-card__links a {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8);
    min-height: 36px;
    padding: 0 var(--spacing-12) 0 var(--spacing-16);
    border: 1px solid rgba(246, 243, 236, 0.45);
    border-radius: 6px;
    background: rgba(10, 10, 11, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--color-parchment-cream);
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    transition: border-color var(--duration-ui-default) linear, background-color var(--duration-ui-default) linear, color var(--duration-ui-default) linear;
}

.lp-card__links a::after {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 300ms cubic-bezier(0.33, 1, 0.68, 1);
}

/* hover: the chip fills cream like the light CTA */
.lp-card__links a:hover {
    border-color: var(--color-parchment-cream);
    background: var(--color-parchment-cream);
    color: var(--color-graphite-void);
}

.lp-card__links a:hover::after {
    transform: translateX(2px);
}

/* ---------------------------------------------------------------- why us (Value & Features 6) */
.lp-why__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-48) var(--spacing-32);
}

/* no box: open columns under a hairline (client preference) */
.lp-why__card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
    padding-top: var(--spacing-32);             /* top line: ::before, drawn in yellow (see "dividers") */
}

/* hover: the bare icon turns cream and nudges up a little (there is no chip to fill any more) */
.lp-why__card .lp-icon-chip,
.lp-smart__feature .lp-icon-chip {
    transition: transform var(--duration-ui-default) ease, color var(--duration-ui-default) linear;
}

.lp-why__card:hover .lp-icon-chip,
.lp-smart__feature:hover .lp-icon-chip,
.lp-smart__feature:focus-visible .lp-icon-chip {
    color: var(--color-parchment-cream);
    transform: translateY(-3px);
}

.lp-why__title {
    color: var(--color-parchment-cream);
    font-size: var(--text-heading-sm);
    line-height: var(--leading-heading-sm);
}

/* ---------------------------------------------------------------- gallery marquee (Image Gallery 1) */
.lp-gallery {
    padding-top: var(--spacing-80);
}

.lp-marquee {
    overflow: hidden;
}

.lp-marquee__track {
    display: flex;
    gap: var(--spacing-16);
    width: max-content;
    animation: lp-marquee var(--marquee-dur, 120s) linear infinite;   /* ~15s per photo (gallery-marquee.php) */
}

.lp-marquee:hover .lp-marquee__track,
.lp-marquee:focus-within .lp-marquee__track,
.lp-gallery.is-lightbox-open .lp-marquee__track {
    animation-play-state: paused;
}

@keyframes lp-marquee {
    to { transform: translateX(calc(-50% - var(--spacing-8))); }   /* two copies → loop at half */
}

.lp-marquee__item {
    position: relative;
    flex: none;
    width: clamp(320px, 36vw, 676px);
    aspect-ratio: 676 / 516;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-default);
    background: var(--color-lifted-onyx);
    cursor: zoom-in;
    transition: border-color var(--duration-ui-default) linear;
}

.lp-marquee__item picture,
.lp-marquee__item img {
    display: block;
    width: 100%;
    height: 100%;
}

.lp-marquee__item img {
    object-fit: cover;
    transition: transform 900ms var(--ease-out, cubic-bezier(0.33, 1, 0.68, 1));
}

.lp-marquee__item:hover,
.lp-marquee__item:focus-visible {
    border-color: var(--color-signal-yellow);
    outline: none;
}

.lp-marquee__item:hover img,
.lp-marquee__item:focus-visible img {
    transform: scale(1.04);
}

/* a small zoom chip in the corner on hover: the photo opens */
.lp-marquee__zoom {
    position: absolute;
    right: var(--spacing-16);
    bottom: var(--spacing-16);
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-default);
    background: rgba(10, 10, 11, 0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--color-signal-yellow);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--duration-ui-default) ease, transform var(--duration-ui-default) ease;
}

.lp-marquee__zoom svg {
    width: 20px;
    height: 20px;
}

.lp-marquee__item:hover .lp-marquee__zoom,
.lp-marquee__item:focus-visible .lp-marquee__zoom {
    opacity: 1;
    transform: none;
}

/* ---------- lightbox: the whole gallery full size (js/design/landing.js) */
.lp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 64px;
    align-items: center;
    gap: var(--spacing-16);
    padding: var(--spacing-64) var(--spacing-32);
    background: rgba(10, 10, 11, 0.95);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    animation: lp-lightbox-in 280ms ease-out;
}

.lp-lightbox[hidden] {
    display: none;
}

@keyframes lp-lightbox-in {
    from { opacity: 0; }
}

.lp-lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-16);
    min-width: 0;
    max-height: 100%;
    margin: 0;
}

.lp-lightbox__figure picture {
    display: contents;
}

.lp-lightbox__figure img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 200px);
    max-height: calc(100svh - 200px);
    border-radius: var(--radius-default);
    object-fit: contain;
    animation: lp-lightbox-photo 420ms var(--ease-out, cubic-bezier(0.33, 1, 0.68, 1));
}

@keyframes lp-lightbox-photo {
    from { opacity: 0; transform: scale(0.98); }
}

.lp-lightbox__figure figcaption {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-8) var(--spacing-24);
    color: var(--color-softened-parchment);
    font-size: var(--text-body-sm);
    line-height: 20px;
    text-align: center;
}

.lp-lightbox__count {
    color: var(--color-text-medium);
    font: 300 var(--text-caption) / 20px var(--font-geist-mono);
    letter-spacing: var(--tracking-caption);
}

.lp-lightbox__btn {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-default);
    background: rgba(18, 18, 18, 0.8);
    color: var(--color-parchment-cream);
    cursor: pointer;
    transition: border-color var(--duration-ui-default) linear, color var(--duration-ui-default) linear;
}

.lp-lightbox__btn svg {
    width: 22px;
    height: 22px;
}

.lp-lightbox__btn:hover,
.lp-lightbox__btn:focus-visible {
    border-color: var(--color-signal-yellow);
    color: var(--color-signal-yellow);
    outline: none;
}

.lp-lightbox__close {
    position: absolute;
    top: var(--spacing-24);
    right: var(--spacing-24);
}

.lp-lightbox__prev {
    justify-self: start;
}

.lp-lightbox__next {
    justify-self: end;
}

body.lp-lightbox-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .lp-lightbox {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: 1fr auto;
        padding: var(--spacing-64) var(--spacing-16) var(--spacing-24);
    }

    .lp-lightbox__figure {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .lp-lightbox__prev {
        grid-row: 2;
    }

    .lp-lightbox__next {
        grid-row: 2;
    }

    .lp-lightbox__close {
        top: var(--spacing-12);
        right: var(--spacing-12);
    }
}


/* ---------------------------------------------------------------- smart & circular (Value & Features 2) */
.lp-smart {
    border-top: 1px solid var(--color-hairline);
}

.lp-smart__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-64);
    align-items: stretch;                       /* the drawing takes exactly the height of the text column */
}

.lp-smart__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-24);
}

.lp-smart__content .lp-body {
    max-width: 448px;
}

.lp-smart__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-32) var(--spacing-24);
    width: 100%;
    margin: var(--spacing-24) 0 0;
    padding: 0;
    list-style: none;
}

/* no box: open items under a hairline, like the "why" columns */
.lp-smart__feature {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-12);
    height: 100%;
    padding-top: var(--spacing-20);             /* top line: ::before, drawn in yellow (see "dividers") */
    text-decoration: none;
}

.lp-smart__feature:hover .lp-smart__feature-title {
    text-decoration: underline;
    text-decoration-color: var(--color-signal-yellow);
    text-underline-offset: 5px;
}

.lp-smart__feature-title {
    color: var(--color-parchment-cream);
    font-size: var(--text-body);
    font-weight: var(--font-weight-medium);
    line-height: 24px;
}

.lp-smart__feature-sub {
    color: var(--color-text-medium);
    font-size: var(--text-body-sm);
    line-height: 20px;
}

/* The blueprint frame (corner marks + grid) is drawn in CSS over the full height of the text column,
   so its top and bottom always line up with the label and the last program row; the locomotive drawing
   sits centred inside. The SVG's own grid and corners are hidden here (the hero card still uses them). */
.lp-smart__visual {
    --frame: rgba(246, 243, 236, 0.4);
    --corner: 22px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: var(--spacing-48) var(--spacing-40, 40px);
    color: var(--color-parchment-cream);
    /* no flat square grid any more: the 3D drawing brings its own floor grid in perspective (img/v2/smart-iso.svg) */
}

.lp-smart__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(var(--frame), var(--frame)) left top / var(--corner) 1px no-repeat,
        linear-gradient(var(--frame), var(--frame)) left top / 1px var(--corner) no-repeat,
        linear-gradient(var(--frame), var(--frame)) right top / var(--corner) 1px no-repeat,
        linear-gradient(var(--frame), var(--frame)) right top / 1px var(--corner) no-repeat,
        linear-gradient(var(--frame), var(--frame)) left bottom / var(--corner) 1px no-repeat,
        linear-gradient(var(--frame), var(--frame)) left bottom / 1px var(--corner) no-repeat,
        linear-gradient(var(--frame), var(--frame)) right bottom / var(--corner) 1px no-repeat,
        linear-gradient(var(--frame), var(--frame)) right bottom / 1px var(--corner) no-repeat;
}

.lp-smart__visual .sf-grid,
.lp-smart__visual .sf-frame {
    display: none;                              /* the frame and grid are drawn in CSS above */
}

.lp-smart__visual svg {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
    overflow: visible;
    cursor: crosshair;
    touch-action: pan-y;
}

/* drawn ~1.6× larger than its viewBox here: thin strokes and small labels keep it a fine technical drawing
   (≈1px lines on screen); the hero card uses the same SVG at its original weights */
.lp-smart__visual .sf-line   { stroke-width: 0.65; }
.lp-smart__visual .sf-thin   { stroke-width: 0.5; }
.lp-smart__visual .sf-accent { stroke-width: 0.7; }
.lp-smart__visual .sf-rail   { stroke-width: 0.55; }
.lp-smart__visual .sf-sleeper { stroke-width: 0.45; }
.lp-smart__visual .sf-grid-iso { stroke-width: 0.4; }

.lp-smart__visual .sf-label,
.lp-smart__visual .sf-value {
    font-size: 7.2px;
    font-weight: 400;
    letter-spacing: 0.1em;
}

.lp-smart__visual .sf-dim {
    font-size: 6.6px;
    font-weight: 400;
}

.lp-smart__visual .sf-dot {
    r: 1.4px;
}

/* ---------- digital twin: sensors wake near the pointer (js/design/smart-twin.js) */
.lp-smart__visual .sf-sensor {
    transition: opacity 400ms ease;
}

.lp-smart__visual .sf-sensor .sf-thin,
.lp-smart__visual .sf-sensor .sf-label {
    transition: stroke 300ms linear, fill 300ms linear, opacity 300ms linear;
}

.lp-smart__visual .sf-ring,
.lp-smart__visual .sf-waves,
.lp-smart__visual .sf-sensor .sf-dot {
    transform-box: fill-box;
    transform-origin: center;
}

.lp-smart__visual .sf-ring {
    transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1), stroke-width 300ms linear;
}

.lp-smart__visual .sf-waves {
    transform-origin: 50% 100%;
    animation: tw-waves 2.4s ease-in-out infinite;
}

.lp-smart__visual .sf-sensor .sf-dot {
    animation: tw-pulse 2.4s ease-in-out infinite;
}

.lp-smart__visual.has-active .sf-sensor:not(.is-active) {
    opacity: 0.3;
}

.lp-smart__visual .sf-sensor.is-active .sf-thin {
    stroke: var(--color-signal-yellow);
    opacity: 1;
}

.lp-smart__visual .sf-sensor.is-active .sf-label {
    fill: var(--color-parchment-cream);
}

.lp-smart__visual .sf-sensor.is-active .sf-ring {
    transform: scale(1.9);
    stroke-width: 0.9;
}

.lp-smart__visual .sf-sensor.is-active .sf-waves {
    animation-duration: 0.9s;
}

@keyframes tw-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.6); }
}

@keyframes tw-waves {
    0%, 100% { opacity: 0.35; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* ---------- the measuring probe: guides through the pointer and its position in mm */
.lp-smart__visual .tw-probe {
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
}

.lp-smart__visual.is-probing .tw-probe {
    opacity: 1;
}

.lp-smart__visual .tw-guide {
    fill: none;
    stroke: rgba(246, 243, 236, 0.28);
    stroke-width: 0.4;
    stroke-dasharray: 2 2.5;
}

.lp-smart__visual .tw-cross {
    fill: none;
    stroke: var(--color-signal-yellow);
    stroke-width: 0.6;
}

.lp-smart__visual .tw-read {
    fill: var(--color-softened-parchment);
    font: 400 6.4px var(--font-geist-mono);
    letter-spacing: 0.1em;
}

/* ---------- the drawing draws itself in when it scrolls into view */
.lp-js .lp-smart__visual .lp-draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1400ms cubic-bezier(0.65, 0, 0.35, 1);
    transition-delay: calc(200ms + var(--di, 0) * 22ms);
}

.lp-smart__visual.is-drawn .lp-draw {
    stroke-dashoffset: 0;
}

.lp-js .lp-smart__visual text,
.lp-js .lp-smart__visual .sf-floor,
.lp-js .lp-smart__visual .sf-dimhead {
    opacity: 0;
    transition: opacity 800ms ease-out 1200ms;
}

.lp-smart__visual.is-drawn text,
.lp-smart__visual.is-drawn .sf-floor {
    opacity: 1;
}

.lp-smart__visual.is-drawn .sf-dimhead {
    opacity: 0.55;
}

/* 3D drawing: the outlines draw in as a see-through wireframe, then the faces fill in and the object turns solid */
.lp-js .lp-smart__visual .sf-solid {
    fill-opacity: 0;
    transition: stroke-dashoffset 1400ms cubic-bezier(0.65, 0, 0.35, 1) calc(200ms + var(--di, 0) * 22ms), fill-opacity 900ms ease-out 1100ms;
}

.lp-smart__visual.is-drawn .sf-solid {
    fill-opacity: 1;
}

/* ---------------------------------------------------------------- contact (Contact 4) */
.lp-contact {
    position: relative;
    overflow: hidden;
    padding: 200px 0 160px;
    background: var(--color-graphite-void);
    color: var(--color-softened-parchment);
    font-family: var(--font-geist-sans);
    -webkit-font-smoothing: antialiased;
}

.lp-contact__bg img {
    position: absolute;
    inset: -150px 0;                            /* room for the parallax travel (±126px, data-parallax="4.5") */
    width: 100%;
    height: calc(100% + 300px);
    object-fit: cover;
    transform: translateY(var(--py, 0px)) scale(1.04);   /* slow drift while scrolling (landing.js) */
}

.lp-contact__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, var(--color-graphite-void) 0%, rgba(10, 10, 11, 0) 30%),
        linear-gradient(180deg, var(--color-graphite-void) 0%, rgba(10, 10, 11, 0) 30%),
        rgba(10, 10, 11, 0.62);                 /* same darkness as the hero over the same rock photo */
}

/* yellow band: the contact statement on full-width Signal Yellow above the form (switch: $yellow['contact_band']).
   The band sits at the top of the contact section, over its rock photo; the yellow wipes in from the left. */
.lp-contact--band {
    padding-top: 0;
}

.lp-contact--band .lp-contact__grid {
    padding-top: 120px;
}

.lp-band {
    position: relative;
    z-index: 3;
    padding: 96px 0;
    color: var(--color-graphite-void);
}

/* the yellow is a pseudo-element: a clip-path on the observed band itself would hide it from the
   IntersectionObserver, so the reveal would never fire */
.lp-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-signal-yellow);
}

.lp-band__inner {
    position: relative;
}

.lp-band__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--spacing-32) var(--spacing-64);
}

.lp-contact .lp-band__title {
    max-width: 940px;
    margin: 0;
    color: var(--color-graphite-void);
    font-size: var(--text-display);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
}

.lp-band__muted {
    color: rgba(10, 10, 11, 0.55);
}

.lp-band .lp-btn {
    flex: none;
}

.lp-js .lp-band[data-reveal] {
    opacity: 1;
    transform: none;
}

.lp-js .lp-band::before {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1100ms cubic-bezier(0.65, 0, 0.35, 1);
}

.lp-js .lp-band.is-visible::before {
    clip-path: inset(0 0 0 0);
}

.lp-js .lp-band .lp-btn {
    opacity: 0;
    transition: opacity 600ms ease-out 800ms, background-color var(--duration-background-soft) var(--easing-background-soft);
}

.lp-js .lp-band.is-visible .lp-btn {
    opacity: 1;
}

.lp-contact__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-64);                     /* the site grid: the form card starts on the same line as the
                                                   product cards and the Smart drawing above */
}

.lp-contact__left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-64);
}

.lp-contact__top {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    max-width: 600px;
}

.lp-contact__title {
    color: var(--color-parchment-cream);
    font-size: var(--text-display-sm) !important;
    line-height: var(--leading-display-sm);
    letter-spacing: var(--tracking-display-sm);
}

.lp-contact__direct {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-8);
}

.lp-contact__direct .lp-label {   /* unused since the eyebrows were removed */
    margin-bottom: var(--spacing-8);
}

.lp-contact__direct a {
    color: var(--color-parchment-cream);
    font-size: var(--text-heading-sm);
    line-height: 28px;
    text-decoration: none;
}

.lp-contact__direct a:hover {
    text-decoration: underline;
    text-decoration-color: var(--color-signal-yellow);
    text-underline-offset: 6px;
}

.lp-contact__card {
    padding: var(--card-padding);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-default);
    background: rgba(18, 18, 18, 0.92);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.lp-contact .lp-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-32);
    width: 100%;
    max-width: none;                            /* legacy CSS caps `form.contact` at 700px */
    margin: 0;
    padding: 0;                                 /* responsive.css pads every `form.contact` by 2em */
}

.lp-form__head {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.lp-form__title {
    margin: 0;
    color: var(--color-softened-parchment);
    font-size: var(--text-body-lg);
    font-weight: var(--font-weight-medium);
    line-height: 28px;
}

.lp-form__text {
    margin: 0;
    color: var(--color-text-medium);
    font-size: var(--text-body-sm);
    line-height: 20px;
}

.lp-form__fields {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
}

.lp-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-16);
}

.lp-contact .lp-field {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;               /* services.css centres and upper-cases every `form.contact label` */
    gap: var(--spacing-8);
    margin: 0;
    text-align: left;
    text-transform: none;
}

.lp-field__label {
    color: var(--color-text-medium);
    font: 300 var(--text-caption) / 16px var(--font-geist-mono);
    letter-spacing: var(--tracking-caption);
    text-transform: uppercase;
}

.lp-contact .lp-form input[type="text"],
.lp-contact .lp-form input[type="email"],
.lp-contact .lp-form input[type="tel"],
.lp-contact .lp-form textarea {
    width: 100%;
    max-width: none;                            /* services.css limits `form.contact input` to 48 % */
    height: auto;
    margin: 0;
    padding: var(--spacing-12) var(--spacing-16);
    text-transform: none;
    border: 1px solid rgba(246, 243, 236, 0.08);
    border-radius: var(--radius-default);
    background: rgba(246, 243, 236, 0.08);
    color: var(--color-parchment-cream);
    font: var(--font-weight-regular) var(--text-body) / 24px var(--font-geist-sans);
    outline: none;
    box-shadow: none;
    transition: border-color var(--duration-ui-default) linear;
}

.lp-contact .lp-form textarea {
    min-height: 150px;
    resize: vertical;
}

.lp-contact .lp-form input::placeholder,
.lp-contact .lp-form textarea::placeholder {
    color: var(--color-text-medium);
}

.lp-contact .lp-form input:focus,
.lp-contact .lp-form textarea:focus {
    border-color: rgba(246, 243, 236, 0.48);
}

/* after a submit attempt (landing.js adds .is-checked): empty required fields get a yellow edge */
.lp-contact .lp-form.is-checked input:invalid,
.lp-contact .lp-form.is-checked textarea:invalid,
.lp-form.is-checked .lp-check input:invalid + .lp-check__box {
    border-color: var(--color-signal-yellow);
}

.lp-contact .lp-check,
.lp-gate .lp-check {                            /* the custom checkbox, in every design form */
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    text-transform: none;
    gap: var(--spacing-12);
    margin: 0;
    color: var(--color-softened-parchment);
    font-size: var(--text-body-sm);
    line-height: 20px;
    cursor: pointer;
}

.lp-check input {
    position: absolute;
    opacity: 0;
    width: 24px;
    height: 24px;
    margin: 0;
}

.lp-check__box {
    position: relative;
    flex: none;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(246, 243, 236, 0.16);
    border-radius: var(--radius-default);
    background: rgba(246, 243, 236, 0.08);
    transition: background-color var(--duration-ui-default) linear, border-color var(--duration-ui-default) linear;
}

.lp-check input:checked + .lp-check__box {
    border-color: var(--color-signal-yellow);
    background: var(--color-signal-yellow);
}

.lp-check input:checked + .lp-check__box::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 4px;
    width: 6px;
    height: 11px;
    border: solid var(--color-graphite-void);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.lp-check input:focus-visible + .lp-check__box {
    outline: 2px solid var(--color-signal-yellow);
    outline-offset: 3px;
}

.lp-form .lp-btn {
    align-self: flex-start;
}

/* ---------------------------------------------------------------- animations */

/* headings: words rise from behind a mask, one after another (landing.js splits them) */
.lp-w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.1em;                      /* room for descenders inside the mask */
    margin-bottom: -0.1em;
}

.lp-w__i {
    display: inline-block;
    transform: translateY(105%);
    transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: calc(var(--i, 0) * 40ms);
}

[data-split].is-visible .lp-w__i {
    transform: none;
}

/* buttons: the label slides up and an identical copy follows from below (Modulabs CTA) */
.lp-btn__text {
    display: inline-block;
    height: 24px;
    overflow: hidden;
}

.lp-btn__text > span {
    display: block;
    text-shadow: 0 24px 0 currentColor;
    transition: transform 450ms cubic-bezier(0.33, 1, 0.68, 1);
}

.lp-btn:hover .lp-btn__text > span,
.lp-btn:focus-visible .lp-btn__text > span {
    transform: translateY(-24px);
}

/* buttons carry no yellow square (client) */
.lp-btn .lp-label__dot {
    display: none;
}


/* ---------------------------------------------------------------- touch screens: tap targets
   product link chips grow from 32 to 40px (WCAG 2.2 asks ≥ 24px, Apple / Material ≥ 44 / 48px for primary
   controls; 40px keeps the chips compact while being comfortably tappable) */
@media (pointer: coarse) {
    .lp-card__links a {
        min-height: 40px;
        padding: 0 var(--spacing-16);
    }

    .lp-contact__direct a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* ---------------------------------------------------------------- small desktop / tablet landscape
   about: text on top, the whole picture below (machine front included). Side by side, the machine hanging out
   of the photo left the text only ~300px wide below 1190px. */
@media (max-width: 1190px) {
    .lp-about__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-48);
    }

    .lp-about__content {
        max-width: 760px;
        padding-right: 0;
    }

    .lp-about {
        --bleed: 0px;
    }

    .lp-about__visual {
        --corner-x: calc(100% * var(--strip));  /* full picture: the photo starts 29 % in */
        margin: 0 calc(-1 * var(--spacing-32)); /* the full width of the screen, edge to edge (client) */
    }

    .lp-about__visual img {
        width: 100%;
        margin-left: 0;
    }
}

/* ---------------------------------------------------------------- tablet */
@media (max-width: 991px) {
    .lp-products__aside {
        gap: var(--spacing-48);
    }

    .lp-card {
        height: 450px;
    }

    .lp-smart__visual {
        padding: var(--spacing-32) var(--spacing-20);
    }

    .lp-smart__grid,
    .lp-contact__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-64);
    }

    .lp-why__grid {
        grid-template-columns: 1fr;
    }

    /* products: one column — two columns left the heading on 7 lines and squeezed the cards (768–991px) */
    .lp-products__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-48);
    }

    .lp-products__aside {
        position: static;
        max-width: 640px;
    }
}

/* ---------------------------------------------------------------- phone */
@media (max-width: 767px) {
    .lp-about__visual {
        margin: 0 calc(-1 * var(--spacing-16)); /* edge to edge with the 16px phone container padding */
    }

    .lp-container {
        padding: 0 var(--spacing-16);
    }

    .lp-section {
        padding: var(--spacing-64) 0;           /* phones: 20 % less than 80 (client, 2026-11-12) */
    }

    .lp-gallery {
        padding-top: var(--spacing-64);
    }

    .lp-stats {
        padding-top: 0;
    }

    .lp-h2,
    .lp-contact__title {
        font-size: 36px !important;
        line-height: 40px;
        letter-spacing: -1.5px;
    }

    .lp-intro__title,
    .lp-stats__value {
        font-size: 44px;
        line-height: 44px;
        letter-spacing: -2px;
    }

    .lp-stats__row {
        padding: var(--spacing-16) 0;
    }

    .lp-products__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-48);
    }

    .lp-products__aside {
        position: static;
    }

    .lp-card {
        height: 420px;
    }

    .lp-card__overlay {
        padding: var(--spacing-24);
    }

    .lp-about__content {
        padding: 0;
    }

    .lp-about__points li {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .lp-about__title {
        font-size: 44px;
        line-height: 44px;
        letter-spacing: -2px;
    }

    .lp-smart__features,
    .lp-form__row {
        grid-template-columns: 1fr;
    }


    .lp-contact {
        padding: 96px 0 76px;
    }

    .lp-contact--band {
        padding-top: 0;
    }

    .lp-contact--band .lp-contact__grid {
        padding-top: 64px;
    }

    .lp-band {
        padding: 64px 0;
    }

    .lp-contact .lp-band__title {
        font-size: 36px;
        line-height: 40px;
        letter-spacing: -1.5px;
    }

    .lp-contact__card {
        padding: var(--spacing-24);
    }
}

@media (max-width: 479px) {
    .lp-stats__row {
        grid-template-columns: 1fr;
        gap: var(--spacing-24);
    }
}

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

    .lp-marquee__track {
        animation: none;
    }

    .lp-rule.is-visible,
    .lp-why__card.is-visible::before,
    .lp-smart__content.is-visible .lp-smart__feature::before,
    .lp-about__content.is-visible .lp-about__points li::before,
    .lp-about__content.is-visible .lp-about__points::after {
        animation: none;
    }

    .lp-js .lp-why__card::before,
    .lp-js .lp-smart__feature::before,
    .lp-js .lp-about__points li::before,
    .lp-js .lp-about__points::after {
        transform: none;
        transition: none;
    }

    .lp-js .lp-band::before {
        clip-path: none;
        transition: none;
    }

    .lp-js .lp-band .lp-btn {
        opacity: 1;
    }

    .lp-js [data-reveal],
    .lp-rule,
    .lp-card__img,
    .lp-btn__text > span {
        transition: none;
    }

    .lp-smart__visual .sf-waves,
    .lp-smart__visual .sf-sensor .sf-dot {
        animation: none;
    }

    .lp-js .lp-smart__visual .lp-draw,
    .lp-js .lp-smart__visual text,
    .lp-js .lp-smart__visual .sf-floor,
    .lp-js .lp-smart__visual .sf-solid {
        transition: none;
        stroke-dashoffset: 0;
        opacity: 1;
        fill-opacity: 1;
    }
}