/* Product detail page — 2026 redesign. Markup: templates/v2/product.php · rules: /DESIGN.md
   Uses the shared pieces from landing.css (container, buttons, headings, reveals, marquee, contact). */

/* ---------------------------------------------------------------- hero: centred machine in front of a yellow block
   The original Locoproject composition (machine over a tall yellow rectangle, centred title below), redone in the
   2026 system: Geist, no eyebrow (breadcrumbs instead), the yellow block wipes up, the machine rises, and on scroll
   the block and the machine drift at different speeds (--py from landing.js) for depth. */
.lp-phero {
    /* the stage takes the height that is left once text, CTAs and key parameters are placed (≈ 520px), so the
       hero always fills the screen and the parameters stay visible: 180px on a short laptop, 340px max */
    /* the machine grows with the screen (client): the height left after bar, paddings, text, CTAs and parameters
       (≈ 570px), capped by the width (32vw) and at 640px — 330px on a 1366×768 laptop, ~350 on 1920×1000,
       ~640 on 2560×1440. The key parameters always stay in the first screen. */
    --stage-h: clamp(180px, min(calc((100svh - 570px) / 1.08), 32vw), 640px);
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(96px + min(64px, 6vh)) 0 var(--spacing-56, 56px);   /* 96px = the bar, then air above the block
                                                         (client: more padding). Everything incl. the key parameters
                                                         fits a 900px-high screen. */
    overflow-x: clip;
    background:
        radial-gradient(ellipse 60% 55% at 50% 38%, rgba(10, 10, 11, 0.25), rgba(10, 10, 11, 0) 70%),
        linear-gradient(to bottom, rgba(10, 10, 11, 0.55) 0, rgba(10, 10, 11, 0.62) 45%, rgba(10, 10, 11, 0.9) 78%, var(--color-graphite-void) 100%),
        image-set(url('../../img/hero/hero-rocks-1440.webp') type('image/webp'), url('../../img/hero/hero-rocks-1440.jpg') type('image/jpeg')) center top / cover no-repeat,
        var(--color-graphite-void);
    color: var(--color-softened-parchment);
    font-family: var(--font-geist-sans);
    -webkit-font-smoothing: antialiased;
}

/* phones: the 1100px photo (same split as the homepage hero, css/design/hero.css) */
@media (max-width: 600px) {
    .lp-phero {
        background:
            radial-gradient(ellipse 60% 55% at 50% 38%, rgba(10, 10, 11, 0.25), rgba(10, 10, 11, 0) 70%),
            linear-gradient(to bottom, rgba(10, 10, 11, 0.55) 0, rgba(10, 10, 11, 0.62) 45%, rgba(10, 10, 11, 0.9) 78%, var(--color-graphite-void) 100%),
            image-set(url('../../img/hero/hero-rocks-1100.webp') type('image/webp'), url('../../img/hero/hero-rocks-1100.jpg') type('image/jpeg')) center top / cover no-repeat,
            var(--color-graphite-void);
    }
}

@media (min-width: 1441px), (min-width: 601px) and (min-resolution: 1.5dppx) {
    .lp-phero {
        background:
            radial-gradient(ellipse 60% 55% at 50% 38%, rgba(10, 10, 11, 0.25), rgba(10, 10, 11, 0) 70%),
            linear-gradient(to bottom, rgba(10, 10, 11, 0.55) 0, rgba(10, 10, 11, 0.62) 45%, rgba(10, 10, 11, 0.9) 78%, var(--color-graphite-void) 100%),
            image-set(url('../../img/hero/hero-rocks-2560.webp') type('image/webp'), url('../../img/hero/hero-rocks-2560.jpg') type('image/jpeg')) center top / cover no-repeat,
            var(--color-graphite-void);
    }
}

.lp-phero__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;                    /* the composition sits in the middle of the screen */
    align-items: center;
    text-align: center;
}

/* the stage: a tall yellow block, the machine in front of it, wider than the block */
.lp-phero__stage {
    --stage-w: min(1280px, 84vw, var(--stage-h) * 2);  /* width follows the height: the block stays tall */
    position: relative;
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);   /* a definite cell: the machine's % height resolves */
    place-items: center;
    width: var(--stage-w);
    height: min(calc(var(--stage-w) * 0.55), var(--stage-h));
    margin: 0;
}

.lp-phero__block {
    position: absolute;
    left: 50%;
    top: -6%;                                   /* a shorter block (client): it reaches just past the machine */
    width: 40%;
    height: 112%;
    background: var(--color-signal-yellow);
    transform: translateX(-50%) translateY(calc(var(--py, 0px) * 1.2));
    transform-origin: 50% 100%;
}

.lp-phero__visual {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 78%;                                 /* the machine a notch smaller than the stage: more yellow shows */
    height: 78%;
    transform: translateY(calc(var(--py, 0px) * -0.6));
}

/* <picture> gets the visual's box, so the image's max-height has a definite height to measure against
   (otherwise a tall render overflows the stage on short screens) */
.lp-phero__visual picture {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.lp-phero__visual img,
.lp-phero__visual svg {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* renders: the machine stands on the block's foot with a soft ground shadow */
.lp-phero__stage--render .lp-phero__visual img {
    max-height: 100%;
    filter: drop-shadow(0 28px 28px rgba(0, 0, 0, 0.55));
}

/* drawings: the dark-faced line drawing reads well against the yellow; it may use more of the stage */
/* drawings: cream lines and yellow values do not read on yellow, so a drawing sits on a dark technical panel and
   the block peeks out behind its top-right corner (like photos) */
.lp-phero__stage--drawing .lp-phero__block {
    left: 62%;
    top: -8%;
    width: 34%;
    height: 96%;
    transform: translateY(calc(var(--py, 0px) * 1.2));
}

.lp-phero__stage--drawing .lp-phero__visual {
    width: 86%;
    height: 100%;
    padding: var(--spacing-12) var(--spacing-16);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-default);
    background: #0d0d0e;                        /* opaque: the yellow block must not tint the drawing */
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
}

.lp-phero__stage--drawing .lp-phero__visual svg {
    width: 100%;
    height: 100%;
}

.lp-phero__stage--photo .lp-phero__visual {
    width: 100%;
    height: 112%;                               /* the room the block would have taken */
}

/* photos: just the photo — no yellow block, no frame, no shadow (client); its own proportions, the 8px radius */
.lp-phero__stage--photo .lp-phero__block {
    display: none;
}

.lp-phero__stage--photo .lp-phero__visual img {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    border-radius: var(--radius-default);
}

.lp-phero__stage figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-1 * var(--spacing-32));
    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;
}

/* entrance (html.lp-ready, set on first render by footer.php): the block wipes up, then the machine rises */
.lp-js .lp-phero__block {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 900ms var(--ease-in-out, cubic-bezier(0.65, 0, 0.35, 1)) 100ms;
}

.lp-ready .lp-phero__block {
    clip-path: inset(0 0 0 0);
}

/* the machine only moves, no fade from opacity 0: it is usually the Largest Contentful Paint, and hidden
   content counts as not painted (see the homepage hero entrance in css/design/hero.css) */
.lp-js .lp-phero__visual > * {
    transform: translateY(48px);
    transition: transform 1200ms var(--ease-out-strong, cubic-bezier(0.2, 0.8, 0.2, 1)) 450ms;
}

.lp-ready .lp-phero__visual > * {
    transform: none;
}

/* text under the stage, centred */
.lp-phero__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-16);
    max-width: 900px;
    padding-top: calc(var(--stage-h) * 0.06 + var(--spacing-40, 40px));   /* the block reaches 6 % below the stage, then air */
}

/* breadcrumbs: navigation, not an eyebrow — plain sans, muted */
.lp-crumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-8);
    color: var(--color-text-medium);
    font-size: var(--text-body-sm);
    line-height: 20px;
}

.lp-crumbs a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration-color-fast) linear;
}

.lp-crumbs a:hover {
    color: var(--color-parchment-cream);
}

.lp-crumbs span {
    opacity: 0.5;
}

.lp-product h1.lp-phero__title {
    margin: 0;
    color: var(--color-parchment-cream);
    font-family: var(--font-geist-sans);
    font-size: clamp(30px, 3.2vw, 48px);
    font-weight: var(--font-weight-regular);
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;          /* page titles in capitals across the site */
    text-wrap: balance;
}

/* the whole product title is cream, the type code included (client) */
.lp-phero__tag {
    color: inherit;
}

.lp-phero__lede {
    max-width: 62ch;
}

.lp-phero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-12);
    margin-top: var(--spacing-8);
}

/* key parameters: centred data row under a hairline */
.lp-keyparams {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-24) var(--spacing-32);
    width: 100%;                                /* the full width of the page container */
    margin: min(48px, 4.5vh) 0 0;
    padding-top: var(--spacing-20);
    border-top: 1px solid var(--color-hairline);
}

.lp-keyparams--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-keyparams--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

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

.lp-keyparams dt {
    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;
}

.lp-keyparams dd {
    margin: 0;
    color: var(--color-parchment-cream);
    font-size: var(--text-heading-sm);
    line-height: var(--leading-heading-sm);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- why: numbered open columns */
.lp-product h2.lp-pwhy__title {
    max-width: 900px;
    margin-bottom: var(--spacing-64);
}

.lp-pwhy__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-48) var(--spacing-32);
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-pwhy__item {                            /* = .lp-why__card on the homepage */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
    padding-top: var(--spacing-32);
}

.lp-pwhy__item::before {                    /* top line: draws in yellow, then cools to grey (like "why" on home) */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-hairline);
    transform-origin: left center;
}

.lp-js .lp-pwhy__item::before {
    transform: scaleX(0);
    transition: transform 800ms ease-out var(--d, 0ms);
}

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

.lp-pwhy__icon {
    display: inline-flex;
    align-self: flex-start;
    color: var(--color-signal-yellow);
    transition: transform var(--duration-ui-default) ease, color var(--duration-ui-default) linear;
}

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

.lp-pwhy__item:hover .lp-pwhy__icon {
    color: var(--color-parchment-cream);
    transform: translateY(-3px);
}

.lp-product h3.lp-pwhy__claim {             /* = .lp-why__title */
    margin: 0 0 calc(-1 * var(--spacing-8));
    color: var(--color-parchment-cream);
    font-size: var(--text-heading-sm);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading-heading-sm);
}

.lp-pwhy__item .lp-body::first-letter {
    text-transform: uppercase;
}

/* ---------------------------------------------------------------- description: title left, text right */
.lp-pdetail .lp-container {
    border-bottom: 1px solid var(--color-hairline);
}

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

.lp-pdetail__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-64);
    padding: var(--spacing-48) 0;
    border-top: 1px solid var(--color-hairline);
}

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

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

.lp-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-softened-parchment);
    font-size: var(--text-body);
    line-height: 24px;
}

.lp-list li {
    position: relative;
    padding-left: var(--spacing-24);
}

.lp-list li::before {                       /* the small yellow square, as in buttons */
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: var(--color-signal-yellow);
}

/* ---------------------------------------------------------------- technical data */
.lp-pspecs {
    padding-top: 0;
}

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

.lp-pspecs__block + .lp-pspecs__block {
    margin-top: var(--spacing-120);
}

.lp-pspecs__block--wide {
    grid-template-columns: 1fr;
    gap: var(--spacing-32);
}

/* grid items default to min-width: auto — without this the wide RC/JC tables stretch the page on phones
   instead of scrolling inside .lp-table-scroll */
.lp-pspecs__block > *,
.lp-pdetail__row > * {
    min-width: 0;
}

.lp-pspecs__head {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
    max-width: 640px;
}

.lp-pspecs__block:not(.lp-pspecs__block--wide) .lp-pspecs__head {
    position: sticky;
    top: var(--lp-sticky-top);                  /* below the sticky navbar */
}

.lp-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.lp-table-scroll:focus-visible {
    outline: 2px solid var(--color-signal-yellow);
    outline-offset: 4px;
}

.lp-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-geist-sans);
    font-variant-numeric: tabular-nums;
}

.lp-pspecs__block--wide .lp-table {
    min-width: 640px;
}

.lp-table thead th {
    padding: 0 var(--spacing-16) 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-align: left;
    text-transform: uppercase;
}

.lp-table tbody th,
.lp-table td {
    padding: var(--spacing-12) var(--spacing-16) var(--spacing-12) 0;
    border-bottom: 1px solid var(--color-hairline);
    text-align: left;
    vertical-align: top;
}

.lp-table tbody th {
    width: 45%;
    color: var(--color-text-medium);
    font-size: var(--text-body-sm);
    font-weight: var(--font-weight-regular);
    line-height: 20px;
}

.lp-pspecs__block--wide .lp-table tbody th {
    width: 34%;
}

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

.lp-table tbody tr {
    transition: background-color var(--duration-ui-default) linear;
}

.lp-table tbody tr:hover {
    background: rgba(246, 243, 236, 0.03);
}

.lp-pspecs__after,
.lp-pspecs__note {
    max-width: 80ch;
    margin-top: var(--spacing-24) !important;
}

.lp-pspecs__note {
    margin-top: var(--spacing-64) !important;
}

/* ---------------------------------------------------------------- product lines: every line, machines without boxes */
.lp-product h2.lp-plines__title-main {
    max-width: 900px;
    margin-bottom: var(--spacing-64);
}

.lp-plines__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--spacing-48) var(--spacing-32);
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.lp-plines__media {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 130px;
    margin-bottom: var(--spacing-8);
    border-bottom: 1px solid var(--color-hairline);   /* a ground line the machines stand on */
    padding-bottom: var(--spacing-16);
}

.lp-plines__media img,
.lp-plines__media svg {
    display: block;
    max-width: 92%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.5));
    transition: transform 600ms var(--ease-out, cubic-bezier(0.33, 1, 0.68, 1));
}

.lp-plines__media svg {
    width: 100%;
    height: 100%;
    filter: none;
}

.lp-plines__line:hover .lp-plines__media img,
.lp-plines__line:hover .lp-plines__media svg {
    transform: translateY(-6px);
}

/* the line of the machine on this page: its ground line is yellow */
.lp-plines__line.is-current .lp-plines__media {
    border-bottom-color: var(--color-signal-yellow);
}

.lp-product h3.lp-plines__name {
    margin: 0;
    text-transform: uppercase;                  /* product-line names in capitals (client) */
    letter-spacing: 0.02em;
    font-size: var(--text-body-lg);
    font-weight: var(--font-weight-medium);
    line-height: 1.25;
}

.lp-plines__name a {
    color: var(--color-parchment-cream);
    text-decoration: none;
}

.lp-plines__name a:hover {
    color: var(--color-signal-yellow);
}

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

.lp-plines__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--color-text-medium);
    font-size: var(--text-body-sm);
    line-height: 1.3;
    text-decoration: none;
    transition: color var(--duration-color-fast) linear, padding-left var(--duration-ui-default) ease;
}

.lp-plines__link::before {                  /* the yellow square of the menu: on hover and for this page */
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 1px;
    background: var(--color-signal-yellow);
    transform: scale(0);
    transition: transform var(--duration-ui-default) ease;
}

.lp-plines__link:hover,
.lp-plines__link.is-current {
    padding-left: 14px;
    color: var(--color-parchment-cream);
}

.lp-plines__link:hover::before,
.lp-plines__link.is-current::before {
    transform: scale(1);
}

/* ---------------------------------------------------------------- closing statement before the contact */
.lp-pclosing {
    padding-bottom: 0;                          /* the contact section below brings its own 200px */
}

/* the same left-aligned statement as the homepage intro: 64px, cream sentence + muted sentence */
.lp-pclosing__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-24);
}

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

.lp-pclosing__note {
    max-width: 62ch;
}

/* a long closing statement (more than ~160 characters) steps down to 48px */
.lp-product h2.lp-pclosing__title.is-long {
    font-size: var(--text-display-sm);
    line-height: 1.05;
    letter-spacing: var(--tracking-display-sm);
}

.lp-pclosing__inner .lp-btn {
    margin-top: var(--spacing-8);
}

/* ---------------------------------------------------------------- Smart & Circular page (templates/v2/smart-solutions.php)
   It reuses the product hero; below the hero an index of the four programs, then one section per program. */
.lp-programs-index {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-24) var(--spacing-32);
    width: 100%;
    margin: var(--spacing-64) 0 0;             /* no hairline (client); pinned to the hero's bottom, see below */
    padding: 0;
    list-style: none;
    text-align: left;
}

.lp-programs-index a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px var(--spacing-12);
    align-items: center;
    text-decoration: none;
}

.lp-programs-index__icon {
    grid-row: span 2;
    display: inline-flex;
    color: var(--color-signal-yellow);
    transition: transform var(--duration-ui-default) ease;
}

.lp-programs-index__icon svg {
    width: 28px;
    height: 28px;
}

.lp-programs-index__name {
    color: var(--color-parchment-cream);
    font-size: var(--text-body-lg);
    line-height: 1.2;
    transition: color var(--duration-color-fast) linear;
}

.lp-programs-index__sub {
    color: var(--color-text-medium);
    font-size: var(--text-body-sm);
    line-height: 1.3;
}

.lp-programs-index a:hover .lp-programs-index__name {
    color: var(--color-signal-yellow);
}

.lp-programs-index a:hover .lp-programs-index__icon {
    transform: translateY(-3px);
}

/* typographic page hero (template-parts/page-hero.php): no picture — about, certifications, contact, services,
   production capacity, 404, Smart & Circular. Larger title; the text is centred in the hero; with an index of links
   (Smart page) the hero is full height and the links sit at its bottom (two auto margins). */
.lp-phero--text {
    min-height: min(72svh, 640px);
}

.lp-phero--text.has-index {
    min-height: min(100svh, 760px);
}

.lp-phero--text .lp-phero__text {
    padding-top: 0;
    margin-top: auto;
    margin-bottom: auto;
}

.lp-phero--text.has-index .lp-phero__text {
    margin-bottom: 0;
}

.lp-phero--text .lp-programs-index {
    margin-top: auto;
}

/* page titles are set in capitals across the site (client); caps read larger, so the size steps down and the
   tracking opens up compared with sentence case */
.lp-phero--text h1.lp-phero__title {
    font-size: clamp(32px, 4.6vw, 72px);
    line-height: 0.95;
    letter-spacing: -1px;
    text-transform: uppercase;
}



/* one program: text left, drawing right on the site grid (as the homepage Smart section); the drawing's frame
   stretches to the height of the text column and centres the drawing */
.lp-program__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-64);
    align-items: stretch;
}

.lp-program__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-24);
    min-width: 0;
    max-width: 560px;                           /* a narrow reading column — headings, text and list alike (client) */
}

.lp-program__icon {
    display: inline-flex;
    color: var(--color-signal-yellow);
}

.lp-program__icon svg {
    width: 32px;
    height: 32px;
}

/* the drawing in a blueprint frame: corner marks, like the Smart drawing on the homepage */
.lp-program__fig {
    --frame: rgba(246, 243, 236, 0.4);
    --corner: 22px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-16);
    min-width: 0;
    margin: 0;
    padding: var(--spacing-32) var(--spacing-24) var(--spacing-24);
}

.lp-program__fig::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-program__fig svg {
    display: block;
    width: 100%;
    max-width: 680px;
    height: auto;
}

.lp-program__fig figcaption {
    align-self: flex-start;
    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;
}

/* LocoTwin access gate, in the homepage form language */
.lp-gate {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    width: 100%;
    max-width: 560px;
    margin: var(--spacing-8) 0 0;
    padding: var(--spacing-24);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-default);
    background: rgba(18, 18, 18, 0.92);
}

.lp-gate__label {
    margin: 0;
    color: var(--color-parchment-cream);
    font-size: var(--text-body-lg);
    font-weight: var(--font-weight-medium);
}

.lp-gate__row {
    display: flex;
    gap: var(--spacing-8);
}

.lp-gate__row input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 var(--spacing-16);
    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(--text-body) / 1 var(--font-geist-sans);
}

.lp-gate__row input:focus {
    border-color: rgba(246, 243, 236, 0.48);
    outline: none;
}

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

.lp-gate .lp-check {
    color: var(--color-softened-parchment);
    font-size: var(--text-body-sm);
}

.lp-gate .v2-gate-note {
    margin: 0;
}

.lp-gate__error {
    margin: 0;
    color: #e05a4e;
    font-size: var(--text-body-sm);
}

.lp-gate__success {
    margin: 0;
    color: var(--color-signal-yellow);
    font-size: var(--text-body-sm);
}

.lp-gate .v2-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
}

.lp-twin-tool {
    margin-top: var(--spacing-64);
}

.lp-twin-tool iframe {
    display: block;
    width: 100%;
    min-height: 720px;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-default);
    background: var(--color-lifted-onyx);
}

/* ---------------------------------------------------------------- pages: about, certifications, contact, services,
   production capacity, 404 (templates/v2/*.php, templates/services.php, vyrobne-kapacity.php, error.php) */

/* a photo in a program-style section (services, production capacity): 8px radius, hairline */
.lp-program__photo {
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0;
}

.lp-program__photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-default);
}

.lp-program__text .lp-table {
    max-width: 560px;
}

/* certifications teaser (about) */
.lp-certs-teaser__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-64);
    align-items: start;
}

.lp-certs-teaser__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-24);
    max-width: 560px;
}

.lp-certs-teaser__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--color-hairline);
}

.lp-certs-teaser__list li {
    display: flex;
    align-items: center;
    gap: var(--spacing-16);
    padding: var(--spacing-20) 0;
    border-top: 1px solid var(--color-hairline);
    color: var(--color-parchment-cream);
    font-size: var(--text-body-lg);
    line-height: 1.3;
}

/* certificates: one row each — the certificate, what it covers, downloads */
.lp-certs__intro {
    max-width: 62ch;
    margin-bottom: var(--spacing-64) !important;
}

.lp-cert {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: var(--spacing-64);
    align-items: start;
    padding: var(--spacing-48) 0;
    border-top: 1px solid var(--color-hairline);
}

.lp-cert:last-child {
    border-bottom: 1px solid var(--color-hairline);
}

.lp-cert__thumb {
    display: block;
    overflow: hidden;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-default);
    background: var(--color-lifted-onyx);
    transition: border-color var(--duration-ui-default) linear;
}

.lp-cert__thumb img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 600ms var(--ease-out, cubic-bezier(0.33, 1, 0.68, 1));
}

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

.lp-cert__thumb:hover img {
    transform: scale(1.03);
}

.lp-cert__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-20);
    max-width: 640px;
}

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

/* link chips (downloads): the product-card chips on the dark ground */
.lp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
    margin: var(--spacing-4) 0 0;
    padding: 0;
    list-style: none;
}

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

.lp-chips a svg {
    width: 14px;
    height: 14px;
    color: var(--color-signal-yellow);
}

.lp-chips a:hover,
.lp-chips a:focus-visible {
    border-color: var(--color-signal-yellow);
}

/* contact page: departments, offices + map */
.lp-depts {
    padding-top: var(--spacing-48);
}

.lp-depts__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-32);
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-depts__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-8);
    padding-top: var(--spacing-24);
    border-top: 1px solid var(--color-hairline);
}

.lp-product h2.lp-depts__title {
    margin-bottom: var(--spacing-8);
    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;
}

.lp-depts__link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--color-parchment-cream);
    font-size: var(--text-body-lg);
    line-height: 1.3;
    text-decoration: none;
    transition: color var(--duration-color-fast) linear;
}

.lp-depts__link:hover {
    color: var(--color-signal-yellow);
}

.lp-offices__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;             /* the site grid */
    gap: var(--spacing-64);
    align-items: stretch;
}

.lp-offices__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-32);
    max-width: 560px;
}

.lp-office {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    padding-top: var(--spacing-24);
    border-top: 1px solid var(--color-hairline);
}

.lp-product h3.lp-office__title {
    margin: 0;
    color: var(--color-parchment-cream);
    font-size: var(--text-heading-sm);
    line-height: var(--leading-heading-sm);
}

.lp-office__reg {
    margin: 0;
    color: var(--color-text-medium);
    font: 300 var(--text-caption) / 1.6 var(--font-geist-mono);
    letter-spacing: var(--tracking-caption);
}

.lp-offices__map {
    min-height: 420px;
    overflow: hidden;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-default);
    background: var(--color-lifted-onyx);
}

.lp-offices__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
    border: 0;
    filter: grayscale(1) invert(0.92) contrast(0.9);   /* a dark map that sits in the page */
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 991px) {
    .lp-keyparams,
    .lp-keyparams--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .lp-pdetail__row,
    .lp-pspecs__block {
        grid-template-columns: 1fr;
        gap: var(--spacing-32);
    }

    .lp-pspecs__block:not(.lp-pspecs__block--wide) .lp-pspecs__head {
        position: static;
    }

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

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

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

    .lp-programs-index {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lp-certs-teaser__grid,
    .lp-offices__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-48);
    }

    .lp-cert {
        grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
        gap: var(--spacing-32);
    }
}

@media (max-width: 767px) {
    .lp-pspecs__block + .lp-pspecs__block {
        margin-top: var(--spacing-96, 96px);    /* phones: 20 % less (client, 2026-11-12) */
    }

    .lp-phero {
        padding: calc(76px + var(--spacing-32)) 0 var(--spacing-48);
    }

    .lp-phero__stage {
        --stage-w: 92vw;
        margin-bottom: var(--spacing-32);
    }

    .lp-product h2.lp-pdetail__title {
        font-size: var(--text-heading-sm);
        line-height: var(--leading-heading-sm);
    }

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

    .lp-plines__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-40, 40px) var(--spacing-16);
    }

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

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

    .lp-cert__thumb {
        max-width: 240px;
    }

    .lp-product h2.lp-cert__title {
        font-size: var(--text-heading-sm);
        line-height: var(--leading-heading-sm);
    }

    .lp-offices__map,
    .lp-offices__map iframe {
        min-height: 320px;
    }

    .lp-gate__row {
        flex-direction: column;
    }

    .lp-program__fig {
        padding: var(--spacing-24) var(--spacing-12) var(--spacing-16);
    }

    .lp-product h2.lp-pclosing__title {
        font-size: 36px;
        line-height: 40px;
        letter-spacing: -1.5px;
    }

    .lp-product h2.lp-pclosing__title.is-long {
        font-size: 28px;
        line-height: 32px;
        letter-spacing: -1px;
    }

    .lp-keyparams {
        margin-top: var(--spacing-48);
    }

    .lp-keyparams dd {
        font-size: var(--text-body-lg);
    }

}

/* touch: breadcrumb links get a 40px tap height */
@media (pointer: coarse) {
    .lp-crumbs a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;                        /* "Home" is a short word */
        min-height: 40px;
    }

    .lp-gate .lp-check {
        min-height: 40px;
        align-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-js .lp-phero__block {
        clip-path: none;
        transition: none;
    }

    .lp-js .lp-phero__visual > * {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .lp-phero__block,
    .lp-phero__visual {
        translate: none;
    }

    .lp-pwhy__item.is-visible::before {
        animation: none;
    }

    .lp-js .lp-pwhy__item::before {
        transform: none;
        transition: none;
    }
}

/* touch: every link on the product and page templates gets a ≥ 40px tap height */
@media (pointer: coarse) {
    .lp-plines__link,
    .lp-chips a,
    .lp-depts__link {
        min-height: 40px;
    }

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

    .lp-programs-index a {
        min-height: 44px;
    }
}