/* ============================================================================
   Pokorný Logistics — design system
   Light surfaces, dark feature panels, brand red + champagne gold.
   ========================================================================= */

:root {
    /* The palette is light-only, so tell the browser — otherwise form controls,
       scrollbars, the caret and autofill render in dark-mode chrome. */
    color-scheme: light;

    /* Surfaces */
    --pl-bg: #f3f3f5;
    --pl-bg-raised: #ffffff;
    --pl-bg-sunken: #f0f0f3;
    --pl-bg-image: #e6e6ea;

    /* Dark feature panels, the CTA band and the footer. */
    --pl-dark: #1b1a18;
    --pl-dark-raised: #262421;
    --pl-dark-input: #131211;

    /* Brand black for copy on light surfaces; gold is reserved for details. */
    --pl-fg: #202020;
    --pl-fg-strong: #141414;
    --pl-fg-bright: #202020;
    --pl-fg-soft: #292929;
    --pl-fg-muted: #292929;
    --pl-fg-dim: #333333;
    --pl-fg-faint: #404040;
    --pl-fg-placeholder: #8b8b95;

    /* Ink on the dark panels. */
    --pl-on-dark: #e9e9ea;
    --pl-on-dark-strong: #ffffff;
    --pl-on-dark-muted: #bcbcc0;
    --pl-on-dark-dim: #a2a2a8;

    /* Accent. --pl-accent is the brand red, safe as a *fill* and, at 4.55:1 on
       white, just clears the floor for text. Anything set on the tinted page
       background uses --pl-accent-text (5.9:1) instead. */
    --pl-accent: #e52332;
    --pl-accent-dark: #c41b28;
    --pl-accent-text: #c41b28;
    --pl-accent-text-hover: #9c1520;
    --pl-accent-on-dark: #ff6472;
    --pl-accent-wash: rgba(229, 35, 50, 0.08);
    --pl-accent-line: rgba(229, 35, 50, 0.35);

    /* Champagne gold. The fill is too light to carry white text, so gold pills
       take dark ink; gold *text* on a light surface uses --pl-gold-text (5.2:1). */
    --pl-gold: #c9a14a;
    --pl-gold-deep: #b08633;
    --pl-gold-text: #8a6714;
    --pl-gold-on-dark: #e5b869;
    --pl-gold-line: rgba(201, 161, 74, 0.45);
    --pl-gold-wash: rgba(201, 161, 74, 0.1);

    /* Feedback */
    --pl-danger: #c2151f;
    --pl-success: #1d7a45;

    /* Smallest comfortable hit area (HIG: 44 pt default, 28 pt minimum). */
    --pl-tap: 44px;
    --pl-header-height: 85px;

    /* Hairlines */
    --pl-line: rgba(20, 20, 26, 0.08);
    --pl-line-soft: rgba(20, 20, 26, 0.11);
    --pl-line-mid: rgba(20, 20, 26, 0.14);
    --pl-line-chip: rgba(20, 20, 26, 0.16);
    --pl-line-strong: rgba(20, 20, 26, 0.2);
    --pl-line-dark: rgba(255, 255, 255, 0.11);
    --pl-line-dark-soft: rgba(255, 255, 255, 0.16);

    /* Type */
    --pl-display: 'Space Grotesk', system-ui, sans-serif;
    --pl-body: Archivo, system-ui, sans-serif;

    /* Shape & depth */
    --pl-radius: 18px;
    --pl-radius-sm: 12px;
    --pl-radius-lg: 26px;
    --pl-pill: 999px;
    --pl-shadow: 0 1px 2px rgba(16, 16, 24, 0.04), 0 10px 28px rgba(16, 16, 24, 0.06);
    --pl-shadow-lift: 0 2px 6px rgba(16, 16, 24, 0.06), 0 20px 46px rgba(16, 16, 24, 0.11);
    --pl-shadow-panel: 0 24px 60px rgba(16, 16, 24, 0.16);

    /* Rhythm */
    --pl-shell: 1280px;
    --pl-gutter: clamp(20px, 4vw, 48px);
    --pl-block: clamp(64px, 9vw, 128px);
    --pl-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Base ──────────────────────────────────────────────────────────────── */

html,
body {
    margin: 0;
    padding: 0;
    background: var(--pl-bg);
}

body {
    font-family: var(--pl-body);
    color: var(--pl-fg);
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: border-box;
}

a {
    color: var(--pl-accent-text);
    text-decoration: none;
}

a:hover {
    color: var(--pl-accent-text-hover);
}

::selection {
    background: var(--pl-accent);
    color: #fff;
}

/* One keyboard-visible focus ring for everything. Near-black reads at 15.8:1 on
   the page and 4.9:1 on the accent fill, so it survives every light surface;
   the dark panels re-declare it in white. Only :focus-visible is styled, so
   pointer users never see it. */
:focus-visible {
    outline: 2px solid var(--pl-fg-strong);
    outline-offset: 2px;
    border-radius: 3px;
}

.pl-on-dark :focus-visible,
.pl-panel--dark :focus-visible,
.pl-info--dark :focus-visible,
.pl-form :focus-visible,
.pl-footer :focus-visible,
.pl-cta :focus-visible,
.pl-hero--media .pl-hero__body:focus-visible,
.pl-hero--media .pl-hero__body :focus-visible {
    outline-color: var(--pl-on-dark-strong);
}

/* <FocusOnNavigate> parks focus on the h1 after every route change, including
   the first interactive render. Chrome counts that programmatic focus as
   keyboard focus whenever the navigation itself came from the keyboard, so
   :focus-visible boxed the whole headline until the next click. The heading is
   never tabbable — Blazor only gives it tabindex="-1" to hold focus for screen
   readers — so the ring guides nobody and is dropped outright. */
h1:focus {
    outline: none;
}

.pl-skip-link {
    position: absolute;
    left: var(--pl-gutter);
    top: 0;
    z-index: 10;
    transform: translateY(-120%);
    background: var(--pl-accent);
    color: #fff;
    font-family: var(--pl-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 14px 20px;
    border-radius: 0 0 var(--pl-radius-sm) var(--pl-radius-sm);
}

.pl-skip-link:focus-visible {
    transform: translateY(0);
    color: #fff;
}

.pl-page {
    background: var(--pl-bg);
    color: var(--pl-fg);
    min-height: 100vh;
    /* Mobile browsers report 100vh as the *largest* viewport, so the page
       under-fills once the URL bar is showing. dvh tracks the live height. */
    min-height: 100dvh;
    overflow-x: hidden;
}

/* Keep anchor targets and focused controls clear of the pinned header. */
[id] {
    scroll-margin-top: 24px;
}

html {
    scroll-padding-top: var(--pl-header-height);
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Keep the hero still; reveal supporting content further down the page. */
@media (prefers-reduced-motion: no-preference) {
    .pl-reveal-pending {
        opacity: 0;
    }

    .pl-reveal-pending:focus-within {
        opacity: 1;
    }

    .pl-btn,
    .pl-link,
    .pl-nav__link,
    .pl-language,
    .pl-footer__link,
    .pl-header__phone,
    .pl-burger,
    .pl-input,
    .pl-tile,
    .pl-card,
    .pl-vehicle,
    .pl-contact-card {
        transition: color 160ms ease, background-color 160ms ease,
                    border-color 160ms ease, box-shadow 220ms ease,
                    transform 220ms var(--pl-motion-ease);
    }

    .pl-btn:active {
        transform: translateY(1px);
    }

    .pl-form__status,
    .pl-field__error {
        animation: pl-content-enter 200ms var(--pl-motion-ease) backwards;
    }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    .pl-btn:hover {
        transform: translateY(-2px);
    }

    .pl-btn:active {
        transform: translateY(0);
    }

    .pl-tile:hover,
    .pl-vehicle:hover,
    .pl-contact-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--pl-shadow-lift);
    }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 1120px) {
    .pl-header__menu--open {
        animation: pl-content-enter 180ms var(--pl-motion-ease) backwards;
    }
}

@keyframes pl-content-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media print {
    .pl-reveal-pending { opacity: 1 !important; }
}

/* ── Layout primitives ─────────────────────────────────────────────────── */

.pl-shell {
    width: 100%;
    max-width: var(--pl-shell);
    margin: 0 auto;
    /* Keep clear of the rounded corners / camera housing when a notched phone
       is held in landscape. */
    padding-left: max(var(--pl-gutter), env(safe-area-inset-left));
    padding-right: max(var(--pl-gutter), env(safe-area-inset-right));
}

.pl-section {
    position: relative;
    background: var(--pl-bg);
}

/* White bands break the page up instead of the hairlines a dark theme needs. */
.pl-section--raised {
    background: var(--pl-bg-raised);
}

.pl-section--dark {
    background: var(--pl-dark);
    color: var(--pl-on-dark);
}

.pl-section__inner {
    padding-top: var(--pl-block);
    padding-bottom: var(--pl-block);
}

.pl-split {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(40px, 6vw, 88px);
}

.pl-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: clamp(28px, 4vw, 40px);
}

.pl-btn-row--center {
    justify-content: center;
}

/* ── Typography ────────────────────────────────────────────────────────── */

/* Sizes below are in rem so they follow the reader's own default font size —
   px and clamp(px…) ignore it entirely. Uppercase micro-labels carry real
   information here (field labels, spec names), so none of them drop below the
   11 pt platform minimum. */

.pl-eyebrow {
    font-family: var(--pl-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pl-accent-text);
}

.pl-eyebrow--sm {
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    color: var(--pl-fg-faint);
}

.pl-eyebrow--block {
    display: block;
    margin-bottom: clamp(14px, 1.8vw, 20px);
}

.pl-on-dark .pl-eyebrow,
.pl-panel--dark .pl-eyebrow,
.pl-section--dark .pl-eyebrow,
.pl-cta .pl-eyebrow {
    color: var(--pl-gold-on-dark);
}

.pl-on-dark .pl-eyebrow--sm,
.pl-panel--dark .pl-eyebrow--sm,
.pl-section--dark .pl-eyebrow--sm {
    color: var(--pl-on-dark-dim);
}

/* Leading on the uppercase display faces has to clear Czech diacritics: Í, Ě, Ů
   and Ď sit well above cap height, so sub-1.0 leading makes them collide with
   the descenders and commas of the line above. 1.05/1.12 stays tight without
   overlapping. */

.pl-h1 {
    font-family: var(--pl-display);
    font-size: clamp(2.125rem, 5.4vw, 4.25rem);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    color: var(--pl-fg-strong);
    margin: 0;
    text-wrap: balance;
}

.pl-h2 {
    font-family: var(--pl-display);
    font-size: clamp(1.75rem, 3.6vw, 2.875rem);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--pl-fg-strong);
    margin: 0;
    text-wrap: balance;
}

.pl-h2--sm {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.15;
}

.pl-h3 {
    font-family: var(--pl-display);
    font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--pl-fg-strong);
    margin: 0;
    text-wrap: pretty;
}

.pl-h3--lg {
    font-size: clamp(1.25rem, 2.3vw, 1.625rem);
    letter-spacing: -0.02em;
}

.pl-on-dark .pl-h2,
.pl-on-dark .pl-h3,
.pl-panel--dark .pl-h2,
.pl-panel--dark .pl-h3,
.pl-section--dark .pl-h2,
.pl-section--dark .pl-h3,
.pl-cta .pl-h2 {
    color: var(--pl-on-dark-strong);
}

/* A restrained gold highlight inside the display typography. */
.pl-accent {
    color: var(--pl-accent-text);
}

.pl-on-dark .pl-accent,
.pl-panel--dark .pl-accent,
.pl-section--dark .pl-accent,
.pl-cta .pl-accent,
.pl-hero--media .pl-accent {
    color: var(--pl-accent-on-dark);
}

/* Short gold rule under a centred section title. */
.pl-rule {
    width: 72px;
    height: 3px;
    border-radius: 2px;
    background: var(--pl-gold);
    margin-top: clamp(18px, 2.4vw, 24px);
}

.pl-rule--center {
    margin-left: auto;
    margin-right: auto;
}

.pl-rule--accent {
    background: var(--pl-gold);
}

.pl-lead {
    font-size: clamp(0.9375rem, 1.6vw, 1.125rem);
    line-height: 1.7;
    color: var(--pl-fg-muted);
    margin: clamp(20px, 2.6vw, 28px) 0 0;
    text-wrap: pretty;
}

.pl-text {
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    line-height: 1.75;
    color: var(--pl-fg-muted);
    margin: clamp(18px, 2vw, 26px) 0 0;
    text-wrap: pretty;
}

.pl-text--flush {
    margin-top: 0;
}

.pl-note {
    margin: 0;
    font-size: 0.90625rem;
    line-height: 1.7;
    color: var(--pl-fg-dim);
    text-wrap: pretty;
}

.pl-note--sm {
    font-size: 0.84375rem;
    line-height: 1.65;
}

.pl-on-dark .pl-lead,
.pl-on-dark .pl-text,
.pl-on-dark .pl-note,
.pl-panel--dark .pl-lead,
.pl-panel--dark .pl-text,
.pl-panel--dark .pl-note,
.pl-section--dark .pl-lead,
.pl-section--dark .pl-text,
.pl-section--dark .pl-note {
    color: var(--pl-on-dark-muted);
}

.pl-meta {
    font-family: var(--pl-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pl-fg-muted);
}

.pl-label {
    display: block;
    font-family: var(--pl-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pl-fg-faint);
    margin-bottom: 4px;
}

.pl-on-dark .pl-label,
.pl-panel--dark .pl-label,
.pl-section--dark .pl-label,
.pl-info--dark .pl-label,
.pl-footer .pl-label {
    color: var(--pl-gold-on-dark);
}

/* ── Buttons & links ───────────────────────────────────────────────────── */

.pl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* Guarantees the 44 pt hit area even when the label shrinks or the padding
       is overridden per-variant. */
    min-height: var(--pl-tap);
    font-family: var(--pl-body);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    text-decoration: none;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
    border: 1px solid transparent;
    border-radius: var(--pl-pill);
    cursor: pointer;
}

.pl-btn__icon {
    flex: 0 0 auto;
    display: block;
}

.pl-btn--primary {
    background: var(--pl-accent);
    color: #fff;
    padding: 17px 32px;
    box-shadow: 0 8px 20px rgba(229, 35, 50, 0.24);
}

.pl-btn--primary:hover {
    background: var(--pl-accent-dark);
    color: #fff;
}

.pl-btn--dark {
    background: var(--pl-dark);
    color: #fff;
    padding: 16px 30px;
}

.pl-btn--dark:hover {
    background: #322f2b;
    color: #fff;
}

.pl-btn--sm {
    font-size: 0.8125rem;
    padding: 13px 24px;
}

.pl-btn--block {
    width: 100%;
}

.pl-btn--ghost {
    border-color: var(--pl-line-strong);
    background: transparent;
    color: var(--pl-fg-strong);
    padding: 16px 30px;
}

.pl-btn--ghost:hover {
    border-color: var(--pl-fg-strong);
    background: rgba(20, 20, 26, 0.04);
    color: var(--pl-fg-strong);
}

.pl-on-dark .pl-btn--ghost,
.pl-cta .pl-btn--ghost,
.pl-panel--dark .pl-btn--ghost {
    border-color: var(--pl-line-dark-soft);
    color: #fff;
}

.pl-on-dark .pl-btn--ghost:hover,
.pl-cta .pl-btn--ghost:hover,
.pl-panel--dark .pl-btn--ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* Phone numbers are set in the display face rather than the uppercase button
   face, so the digits stay readable at a glance. */
.pl-btn--phone {
    border-color: var(--pl-accent-line);
    background: var(--pl-accent-wash);
    color: var(--pl-accent-text);
    font-family: var(--pl-display);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
    padding: 16px 28px;
}

.pl-btn--phone:hover {
    border-color: var(--pl-accent);
    background: rgba(229, 35, 50, 0.18);
    color: var(--pl-accent-text-hover);
}

.pl-cta .pl-btn--phone,
.pl-hero--media .pl-btn--phone,
.pl-on-dark .pl-btn--phone,
.pl-panel--dark .pl-btn--phone {
    border-color: var(--pl-accent-line);
    background: rgba(255, 100, 114, 0.1);
    color: var(--pl-accent-on-dark);
}

.pl-cta .pl-btn--phone:hover,
.pl-hero--media .pl-btn--phone:hover,
.pl-on-dark .pl-btn--phone:hover,
.pl-panel--dark .pl-btn--phone:hover {
    border-color: var(--pl-accent-on-dark);
    background: rgba(255, 100, 114, 0.2);
    color: var(--pl-accent-on-dark);
}

.pl-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--pl-tap);
    font-family: var(--pl-body);
    font-size: 0.78125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pl-accent-text);
    /* Underline the text rather than the box, so growing the box to a 44 pt hit
       area doesn't strand the rule below the label. */
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--pl-accent-line);
    text-underline-offset: 5px;
}

.pl-link:hover {
    color: var(--pl-accent-text-hover);
    text-decoration-color: currentColor;
}

.pl-link__arrow {
    font-size: 1em;
    line-height: 1;
}

.pl-on-dark .pl-link,
.pl-panel--dark .pl-link,
.pl-section--dark .pl-link,
.pl-cta .pl-link {
    color: var(--pl-gold-on-dark);
    text-decoration-color: rgba(229, 184, 105, 0.4);
}

.pl-on-dark .pl-link:hover,
.pl-panel--dark .pl-link:hover,
.pl-section--dark .pl-link:hover,
.pl-cta .pl-link:hover {
    color: #fff;
    text-decoration-color: #fff;
}

/* ── Chips ─────────────────────────────────────────────────────────────── */

.pl-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--pl-line-chip);
    border-radius: var(--pl-pill);
    background: var(--pl-bg-raised);
    color: var(--pl-fg-bright);
    font-family: var(--pl-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 9px 16px;
}

.pl-chip--tight {
    letter-spacing: 0.08em;
    padding: 9px 14px;
}

.pl-chip--accent {
    border-color: var(--pl-gold-line);
    color: var(--pl-gold-text);
    background: var(--pl-gold-wash);
}

.pl-on-dark .pl-chip,
.pl-panel--dark .pl-chip,
.pl-section--dark .pl-chip,
.pl-cta .pl-chip {
    border-color: var(--pl-line-dark-soft);
    background: rgba(255, 255, 255, 0.06);
    color: var(--pl-on-dark);
}

.pl-on-dark .pl-chip--accent,
.pl-panel--dark .pl-chip--accent,
.pl-section--dark .pl-chip--accent {
    border-color: var(--pl-gold-line);
    background: rgba(229, 184, 105, 0.12);
    color: var(--pl-gold-on-dark);
}

.pl-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pl-chip-row--center {
    justify-content: center;
}

/* ── Header ────────────────────────────────────────────────────────────── */

.pl-header-space {
    height: var(--pl-header-height);
    flex: 0 0 auto;
}

.pl-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    background: var(--pl-bg-raised);
    box-shadow: 0 1px 0 var(--pl-line), 0 8px 26px rgba(16, 16, 24, var(--pl-header-shadow, 0));
}

@media (prefers-reduced-transparency: reduce) {
    .pl-header {
        background: var(--pl-bg-raised);
    }
}

.pl-header__inner {
    min-height: 84px;
    display: grid;
    /* Equal side columns keep the navigation at the centre of the shell,
       independent of the logo and translated action labels. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.pl-header__logo {
    display: flex;
    justify-self: start;
    align-items: center;
    min-height: var(--pl-tap);
    flex: 0 0 auto;
}

.pl-header__logo img {
    height: 44px;
    width: auto;
    display: block;
}

.pl-header__actions {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 12px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

/* A filled control here reads as a second button competing with the enquiry CTA,
   so the switcher is set in the navigation's voice: no box, nav type and ink,
   accent on hover. The platform arrow is drawn in its own metrics and colours,
   so it is replaced with a painted caret — the same technique as .pl-select. */
.pl-language {
    appearance: none;
    display: inline-flex;
    align-items: center;
    min-height: var(--pl-tap);
    padding: 0 22px 0 2px;
    border: 0;
    background-color: transparent;
    background-image:
        linear-gradient(45deg, transparent 50%, currentcolor 50%),
        linear-gradient(135deg, currentcolor 50%, transparent 50%);
    background-position: right 11px center, right 6px center;
    background-repeat: no-repeat;
    background-size: 5px 5px;
    color: var(--pl-fg-strong);
    font-family: var(--pl-body);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    width: fit-content;
}

.pl-language:hover {
    color: var(--pl-accent-text);
}

/* Browsers do not reliably inherit the select colours into the popup. */
.pl-language option {
    background: var(--pl-bg-raised);
    color: var(--pl-fg);
}

/* Where the browser supports the customizable select, the option list is real
   DOM rather than a platform popup, so it is dressed like the rest of the site.
   Everything below is additive: without the feature the control keeps the
   painted caret and the native list styled above. */
@supports (appearance: base-select) {
    .pl-language,
    .pl-language::picker(select) {
        appearance: base-select;
    }

    /* The caret is the UA's ::picker-icon from here on, so drop the painted one
       and let the flex gap space it instead of the right padding. */
    .pl-language {
        gap: 8px;
        padding-right: 2px;
        background-image: none;
    }

    .pl-language::picker-icon {
        /* The UA glyph is a counter, so it scales with the font size. */
        font-size: 0.6875rem;
        color: currentcolor;
    }

    .pl-language:open::picker-icon {
        transform: rotate(180deg);
    }

    .pl-language::picker(select) {
        margin-top: 10px;
        padding: 6px;
        min-inline-size: anchor-size(width);
        border: 1px solid var(--pl-line-mid);
        border-radius: var(--pl-radius-sm);
        background: var(--pl-bg-raised);
        box-shadow: var(--pl-shadow-lift);
    }

    .pl-language option {
        display: flex;
        align-items: center;
        min-height: 40px;
        padding: 0 14px;
        border-radius: 10px;
        color: var(--pl-fg-strong);
        font-size: 0.875rem;
        font-weight: 700;
        cursor: pointer;
    }

    /* Two entries whose label is their own value, so the UA tick is dropped for
       the accent ink the navigation already uses to say "you are here". */
    .pl-language option::checkmark {
        display: none;
    }

    .pl-language option:hover,
    .pl-language option:focus {
        background: var(--pl-bg-sunken);
        color: var(--pl-fg-strong);
    }

    .pl-language option:checked {
        background: var(--pl-accent-wash);
        color: var(--pl-accent-text);
    }

    @media (prefers-reduced-motion: no-preference) {
        .pl-language::picker-icon {
            transition: transform 160ms var(--pl-motion-ease);
        }

        /* overlay/display need allow-discrete so the list stays in the top layer
           while it fades back out. */
        .pl-language::picker(select) {
            transition: opacity 140ms ease, transform 140ms var(--pl-motion-ease),
                        overlay 140ms allow-discrete, display 140ms allow-discrete;
        }

        .pl-language::picker(select):not(:popover-open) {
            opacity: 0;
            transform: translateY(-6px);
        }

        @starting-style {
            .pl-language::picker(select):popover-open {
                opacity: 0;
                transform: translateY(-6px);
            }
        }
    }
}

.pl-header__phone {
    display: inline-flex;
    align-items: center;
    min-height: var(--pl-tap);
    font-family: var(--pl-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--pl-fg-strong);
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
}

.pl-header__phone:hover {
    color: var(--pl-accent-text);
}

.pl-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Column gap is tight for rhythm; the row gap only matters once the nav
       wraps on narrow screens, where the links need breathing room so people
       don't hit the wrong one. */
    gap: 4px clamp(12px, 1.8vw, 26px);
    flex: 1 1 auto;
    justify-content: center;
    font-family: var(--pl-body);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.pl-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--pl-tap);
    padding: 0 2px;
    color: var(--pl-fg-strong);
    border-bottom: 2px solid transparent;
    text-decoration: none;
    white-space: nowrap;
}

.pl-nav__link:hover {
    color: var(--pl-accent-text);
}

/* The current page is marked three ways — accent ink, an accent rule and
   aria-current — so it never depends on colour alone. */
.pl-nav__link[aria-current='page'] {
    color: var(--pl-accent-text);
    border-bottom-color: var(--pl-accent);
}

/* Wrapper so the nav and the actions can be hidden — and re-laid out as a
   drop-down — as a single unit below the nav breakpoint. */
.pl-header__menu {
    /* Let navigation and actions occupy the header's grid columns. This
       wrapper becomes the disclosure panel on smaller screens. */
    display: contents;
}

/* ── Burger (below the nav breakpoint only) ────────────────────────────── */

.pl-burger {
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: var(--pl-tap);
    margin-left: auto;
    padding: 10px 16px;
    font: 600 0.875rem var(--pl-body);
    background: none;
    border: 1px solid var(--pl-line-chip);
    border-radius: var(--pl-pill);
    color: var(--pl-fg-strong);
    cursor: pointer;
}

.pl-burger:hover {
    border-color: var(--pl-fg-strong);
}

/* The middle bar is the element itself; the other two are its pseudo-elements,
   so the whole icon is one box to centre and one transform to animate. */
.pl-burger__bars,
.pl-burger__bars::before,
.pl-burger__bars::after {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.pl-burger__bars::before,
.pl-burger__bars::after {
    content: '';
    position: absolute;
}

.pl-burger__bars::before {
    transform: translateY(-6px);
}

.pl-burger__bars::after {
    transform: translateY(6px);
}

@media (prefers-reduced-motion: no-preference) {
    .pl-burger__bars,
    .pl-burger__bars::before,
    .pl-burger__bars::after {
        transition: transform 160ms ease, opacity 160ms ease;
    }
}

/* Open state: the outer bars meet in the middle and cross, the middle one goes. */
.pl-burger[aria-expanded='true'] .pl-burger__bars {
    background: transparent;
}

.pl-burger[aria-expanded='true'] .pl-burger__bars::before {
    transform: rotate(45deg);
}

.pl-burger[aria-expanded='true'] .pl-burger__bars::after {
    transform: rotate(-45deg);
}

/* ── Nav breakpoint ────────────────────────────────────────────────────── */

/* Fold before the centred navigation meets the language/enquiry controls. */
@media (max-width: 1120px) {
    .pl-header__inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .pl-burger {
        display: inline-flex;
    }

    /* display:none rather than a visually-hidden panel, so the links are out of
       the tab order and off the accessibility tree while the menu is closed. */
    .pl-header__menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 3;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px var(--pl-gutter) 24px;
        max-height: calc(100dvh - var(--pl-header-height));
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--pl-bg-raised);
        border-bottom: 1px solid var(--pl-line-soft);
        box-shadow: 0 18px 32px rgba(16, 16, 24, 0.1);
    }

    .pl-header__menu--open {
        display: flex;
    }

    .pl-nav {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        font-size: 1rem;
    }

    /* Stacked links swap the underline for a left accent bar — a rule under a
       full-width row would read as a separator, not as the current page. */
    .pl-nav__link {
        padding: 12px 0 12px 14px;
        border-bottom: none;
        border-left: 3px solid transparent;
    }

    .pl-nav__link + .pl-nav__link {
        border-top: 1px solid var(--pl-line);
    }

    .pl-nav__link[aria-current='page'] {
        border-left-color: var(--pl-accent);
    }

    .pl-header__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 16px;
        padding-top: 20px;
        border-top: 1px solid var(--pl-line);
    }

    .pl-header__phone {
        justify-content: center;
        font-size: 1.125rem;
    }

    .pl-language {
        align-self: center;
    }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.pl-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--pl-bg);
    overflow: hidden;
}

/* The image-backed variant used on the home page. */
.pl-hero--media {
    background: var(--pl-dark);
}

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

.pl-hero > .pl-hero__media {
    object-position: 62% 52%;
}

.pl-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        /* Pool of shade behind the headline: the van in the photo is white, so the
           copy needs its own dark bed while the rest of the scene stays readable. */
        radial-gradient(92% 78% at 50% 52%, rgba(14, 13, 12, 0.82) 0%, rgba(14, 13, 12, 0.62) 46%, rgba(14, 13, 12, 0.12) 100%),
        linear-gradient(180deg, rgba(14, 13, 12, 0.55) 0%, rgba(14, 13, 12, 0.24) 45%, rgba(14, 13, 12, 0.7) 100%);
}

.pl-hero__body {
    position: relative;
    z-index: 2;
    padding-top: clamp(56px, 8vw, 104px);
    padding-bottom: clamp(56px, 8vw, 104px);
}

.pl-hero--media .pl-hero__body {
    padding-top: clamp(80px, 12vw, 176px);
    padding-bottom: clamp(80px, 12vw, 176px);
}

.pl-hero__content {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.pl-hero__eyebrow {
    font-family: var(--pl-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pl-accent-text);
    margin-bottom: clamp(16px, 2vw, 22px);
}

.pl-hero__eyebrow--gold {
    color: var(--pl-gold-text);
}

.pl-hero--media .pl-hero__eyebrow {
    color: var(--pl-gold-on-dark);
}

.pl-hero .pl-h1 {
    margin-inline: auto;
    max-width: 20ch;
}

.pl-hero--media .pl-h1 {
    color: #fff;
    text-shadow: 0 2px 26px rgba(0, 0, 0, 0.45);
}

.pl-hero__line {
    display: block;
}

.pl-hero .pl-lead {
    max-width: 62ch;
    margin-inline: auto;
    margin-top: clamp(20px, 2.4vw, 28px);
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    line-height: 1.75;
}

.pl-hero--media .pl-lead {
    color: rgba(255, 255, 255, 0.86);
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

.pl-hero .pl-btn-row {
    justify-content: center;
    margin-top: clamp(28px, 3.6vw, 40px);
}

.pl-hero__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--pl-tap);
    color: var(--pl-fg-soft);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--pl-line-strong);
    text-underline-offset: 5px;
}

.pl-hero--media .pl-hero__secondary {
    color: rgba(255, 255, 255, 0.9);
    text-decoration-color: rgba(255, 255, 255, 0.4);
}

.pl-hero__secondary:hover {
    color: var(--pl-fg-strong);
    text-decoration-color: currentColor;
}

.pl-hero--media .pl-hero__secondary:hover {
    color: #fff;
}

/* ── Fact strip ────────────────────────────────────────────────────────── */

.pl-summary {
    background: var(--pl-bg-raised);
    border-bottom: 1px solid var(--pl-line);
}

.pl-facts {
    padding-top: clamp(24px, 3vw, 34px);
    padding-bottom: clamp(24px, 3vw, 34px);
}

.pl-facts__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px clamp(20px, 3vw, 40px);
}

.pl-facts__pair {
    display: contents;
}

.pl-facts__grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pl-fact {
    min-width: 0;
    padding-left: 16px;
    border-left: 2px solid var(--pl-gold-line);
}

.pl-fact__label {
    margin-bottom: 6px;
}

.pl-fact .pl-eyebrow {
    color: var(--pl-fg-dim);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: none;
}

.pl-fact__value,
.pl-fact__value--sm {
    font-family: var(--pl-display);
    font-size: 1.0625rem;
    line-height: 1.45;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--pl-fg-strong);
    font-variant-numeric: tabular-nums;
}

.pl-fact__value--sm {
    font-size: 0.9375rem;
}

@media (max-width: 900px) {
    .pl-facts__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Stat band (dark, rounded) ─────────────────────────────────────────── */

.pl-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    background: var(--pl-dark);
    border-radius: var(--pl-radius-lg);
    box-shadow: var(--pl-shadow-panel);
    padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 32px);
    text-align: center;
}

.pl-stat {
    padding: 12px clamp(12px, 2vw, 24px);
    border-left: 1px solid var(--pl-line-dark);
}

.pl-stat:first-child {
    border-left: 0;
}

.pl-stat__value {
    font-family: var(--pl-display);
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--pl-gold-on-dark);
    font-variant-numeric: tabular-nums;
}

.pl-stat__label {
    margin-top: 10px;
    font-family: var(--pl-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pl-on-dark-dim);
}

@media (max-width: 720px) {
    .pl-stat {
        border-left: 0;
        border-top: 1px solid var(--pl-line-dark);
    }

    .pl-stat:first-child {
        border-top: 0;
    }
}

/* ── Hairline spec grids ───────────────────────────────────────────────── */

.pl-cells {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 45%), 1fr));
    gap: 1px;
    background: var(--pl-line-soft);
    border: 1px solid var(--pl-line-soft);
    border-radius: var(--pl-radius-sm);
    overflow: hidden;
}

.pl-cell {
    background: var(--pl-bg-raised);
    padding: 20px 18px;
}

.pl-section--raised .pl-cell {
    background: var(--pl-bg-sunken);
}

.pl-cell--lg {
    padding: clamp(20px, 2.5vw, 28px);
}

.pl-cell__value {
    font-family: var(--pl-display);
    font-size: clamp(1.375rem, 2.6vw, 1.875rem);
    font-weight: 700;
    color: var(--pl-fg-strong);
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}

.pl-cell__value--lg {
    font-size: clamp(1.625rem, 3.2vw, 2.375rem);
    letter-spacing: -0.03em;
    margin-top: 8px;
}

.pl-cell__label {
    font-family: var(--pl-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pl-gold-text);
    margin-top: 8px;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */

.pl-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
    gap: clamp(20px, 2.4vw, 28px);
}

.pl-card-grid--reasons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
}

@media (max-width: 900px) {
    .pl-card-grid--reasons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pl-card {
    background: var(--pl-bg-raised);
    border: 1px solid var(--pl-line);
    border-radius: var(--pl-radius);
    box-shadow: var(--pl-shadow);
    padding: clamp(24px, 3vw, 34px) clamp(22px, 2.6vw, 30px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pl-section--raised .pl-card {
    background: var(--pl-bg);
    box-shadow: none;
}

.pl-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.pl-card__num {
    font-family: var(--pl-display);
    font-size: clamp(2rem, 3.6vw, 2.875rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.9;
    color: var(--pl-accent);
    font-variant-numeric: tabular-nums;
}

.pl-card__num--muted {
    color: #a9a9b2;
}

.pl-card__tag {
    font-family: var(--pl-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pl-gold-text);
    white-space: nowrap;
}

.pl-card__tag--accent {
    color: var(--pl-gold-text);
}

.pl-card__title {
    margin: 0;
    font-family: var(--pl-display);
    font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--pl-fg-strong);
    text-wrap: pretty;
}

.pl-card__title--lg {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
}

.pl-card__body {
    margin: 0;
    font-size: 0.90625rem;
    line-height: 1.7;
    color: var(--pl-fg-muted);
    text-wrap: pretty;
}

.pl-card__body--airy {
    line-height: 1.75;
}

.pl-card__foot {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--pl-line);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    justify-content: space-between;
}

.pl-card__foot-label {
    font-family: var(--pl-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pl-gold-text);
}

.pl-card__foot-value {
    font-family: var(--pl-display);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--pl-fg-strong);
}

/* ── Tiles: the image/icon-led card from the reference layout ──────────── */

.pl-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: clamp(20px, 2.6vw, 32px);
}

.pl-tile {
    display: flex;
    flex-direction: column;
    background: var(--pl-bg-raised);
    border: 1px solid var(--pl-line);
    border-radius: var(--pl-radius);
    box-shadow: var(--pl-shadow);
    overflow: hidden;
}

.pl-tile__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--pl-bg-image);
    overflow: hidden;
}

.pl-tile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pl-tile__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    padding: clamp(22px, 2.6vw, 30px);
}

.pl-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--pl-gold-wash);
    color: var(--pl-gold-text);
    margin-bottom: 6px;
}

.pl-tile__icon--accent {
    background: var(--pl-accent-wash);
    color: var(--pl-accent-text);
}

.pl-tile__title {
    margin: 0;
    font-family: var(--pl-display);
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--pl-fg-strong);
    text-wrap: pretty;
}

.pl-tile__body p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--pl-gold-text);
    text-wrap: pretty;
}

.pl-tile__foot {
    margin-top: auto;
    padding-top: 6px;
}

/* ── Rule-topped feature columns ───────────────────────────────────────── */

.pl-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: clamp(26px, 3.4vw, 44px) clamp(32px, 4vw, 64px);
}

.pl-features--wide {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 45%), 1fr));
}

.pl-feature {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 20px;
    border-top: 2px solid var(--pl-gold-line);
}

.pl-feature__num {
    font-family: var(--pl-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--pl-accent-text);
    font-variant-numeric: tabular-nums;
}

.pl-feature:nth-child(odd) .pl-feature__num {
    color: var(--pl-gold-text);
}

.pl-section--dark .pl-feature,
.pl-on-dark .pl-feature {
    border-top-color: var(--pl-line-dark-soft);
}

/* ── Section headers ───────────────────────────────────────────────────── */

.pl-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 56px);
}

.pl-section-head--ruled {
    padding-bottom: clamp(28px, 3.4vw, 44px);
    border-bottom: 1px solid var(--pl-line-soft);
}

.pl-intro {
    max-width: 56ch;
    margin-bottom: clamp(36px, 4.5vw, 64px);
}

/* The centred title block that leads every section in the reference layout. */
.pl-intro--center {
    max-width: 68ch;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.pl-intro--center .pl-lead,
.pl-intro--center .pl-text {
    margin-left: auto;
    margin-right: auto;
    max-width: 62ch;
}

/* ── Panels ────────────────────────────────────────────────────────────── */

.pl-panel {
    background: var(--pl-bg-raised);
    border: 1px solid var(--pl-line);
    border-radius: var(--pl-radius);
    box-shadow: var(--pl-shadow);
    padding: clamp(22px, 2.8vw, 32px);
}

.pl-panel--dark {
    background: var(--pl-dark);
    border-color: transparent;
    border-radius: var(--pl-radius-lg);
    box-shadow: var(--pl-shadow-panel);
    color: var(--pl-on-dark);
    padding: clamp(28px, 4vw, 52px);
}

/* The red spine from the reference "Spolehlivost bez kompromisů" card. */
.pl-panel--spine {
    border-left: 5px solid var(--pl-accent);
}

.pl-panel__phone {
    display: flex;
    align-items: center;
    min-height: var(--pl-tap);
    font-family: var(--pl-display);
    font-size: clamp(1.625rem, 3.2vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--pl-fg-strong);
    text-decoration: none;
}

.pl-panel--dark .pl-panel__phone {
    color: var(--pl-on-dark-strong);
}

.pl-panel__phone:hover {
    color: var(--pl-accent-text);
}

.pl-panel--dark .pl-panel__phone:hover {
    color: var(--pl-gold-on-dark);
}

/* ── Checklist ─────────────────────────────────────────────────────────── */

.pl-checklist {
    list-style: none;
    margin: clamp(18px, 2.2vw, 24px) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pl-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--pl-fg);
}

.pl-checklist li::before {
    content: '\2713';
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--pl-gold-text);
    line-height: 1.6;
}

.pl-panel--dark .pl-checklist li {
    color: var(--pl-on-dark);
}

.pl-panel--dark .pl-checklist li::before {
    color: var(--pl-gold-on-dark);
}

/* ── Progress track ────────────────────────────────────────────────────── */

.pl-track {
    margin-top: clamp(28px, 3.6vw, 40px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 20px 0;
}

.pl-track__step {
    position: relative;
    padding-top: 26px;
    text-align: left;
}

/* The connecting rail is drawn per step so it wraps with the grid instead of
   stranding a full-width line behind a re-flowed row. */
.pl-track__step::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--pl-line-dark);
}

.pl-track__step--done::before {
    background: var(--pl-gold);
}

.pl-track__step::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--pl-line-dark-soft);
    background: var(--pl-dark);
}

.pl-track__step--done::after {
    border-color: var(--pl-gold);
    background: var(--pl-gold);
    box-shadow: 0 0 0 5px rgba(229, 184, 105, 0.16);
}

.pl-track__label {
    font-family: var(--pl-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pl-on-dark-dim);
}

.pl-track__step--done .pl-track__label {
    color: var(--pl-on-dark-strong);
}

.pl-track__note {
    margin-top: 6px;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--pl-on-dark-dim);
    padding-right: 16px;
}

/* ── Vehicle cards ─────────────────────────────────────────────────────── */

.pl-vehicles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(20px, 2.6vw, 32px);
}

.pl-vehicle {
    display: flex;
    flex-direction: column;
    background: var(--pl-bg-raised);
    border: 1px solid var(--pl-line);
    border-radius: var(--pl-radius);
    box-shadow: var(--pl-shadow);
    overflow: hidden;
}

.pl-vehicle__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--pl-bg-image);
}

.pl-vehicle__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pl-vehicle__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--pl-dark);
    color: #fff;
    border-radius: var(--pl-pill);
    padding: 7px 14px;
    font-family: var(--pl-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pl-vehicle__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    padding: clamp(22px, 2.6vw, 28px);
}

.pl-vehicle__title {
    margin: 0;
    font-family: var(--pl-display);
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pl-fg-strong);
}

.pl-vehicle__body > p {
    margin: 0;
    font-size: 0.90625rem;
    line-height: 1.7;
    color: var(--pl-fg-muted);
    text-wrap: pretty;
}

.pl-vehicle__specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
    background: var(--pl-bg-sunken);
    border-radius: var(--pl-radius-sm);
    padding: 18px;
    margin-top: 4px;
}

.pl-vehicle__spec dt {
    font-family: var(--pl-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    /*color: var(--pl-gold-text);*/
}

.pl-vehicle__spec dd {
    margin: 5px 0 0;
    font-family: var(--pl-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--pl-gold-text);
    font-variant-numeric: tabular-nums;
}

.pl-vehicle__foot {
    margin-top: auto;
    padding-top: 6px;
}

/* ── Contact cards ─────────────────────────────────────────────────────── */

.pl-contact-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(20px, 2.6vw, 28px);
}

.pl-contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    background: var(--pl-bg-raised);
    border: 1px solid var(--pl-line);
    border-radius: var(--pl-radius);
    box-shadow: var(--pl-shadow);
    padding: clamp(28px, 3.4vw, 40px) clamp(22px, 2.6vw, 32px);
}

.pl-contact-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--pl-accent-wash);
    color: var(--pl-accent-text);
    margin-bottom: 10px;
}

.pl-contact-card__icon--gold {
    background: var(--pl-gold-wash);
    color: var(--pl-gold-text);
}

.pl-contact-card__title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--pl-display);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--pl-gold-text);
}

.pl-contact-card__title--accent {
    color: var(--pl-accent-text);
}

/* Steady dot, not a blinking one: it states availability, it is not an alert. */
.pl-contact-card__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--pl-success);
    box-shadow: 0 0 0 4px rgba(29, 122, 69, 0.14);
}

.pl-contact-card__note {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--pl-gold-text);
}

.pl-contact-card__value {
    display: inline-flex;
    align-items: center;
    min-height: var(--pl-tap);
    margin-top: 8px;
    font-family: var(--pl-display);
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--pl-fg-strong);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.pl-contact-card__value:hover {
    color: var(--pl-accent-text);
}

/* ── Image-backed CTA band ─────────────────────────────────────────────── */

.pl-cta {
    position: relative;
    overflow: hidden;
    background: var(--pl-dark);
    color: var(--pl-on-dark);
}

.pl-cta__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}

.pl-cta__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18, 17, 16, 0.94) 0%, rgba(18, 17, 16, 0.8) 52%, rgba(18, 17, 16, 0.55) 100%);
}

.pl-cta__inner {
    position: relative;
    padding-top: var(--pl-block);
    padding-bottom: var(--pl-block);
}

.pl-cta__text {
    margin: clamp(18px, 2.4vw, 26px) 0 0;
    font-size: clamp(0.9375rem, 1.6vw, 1.125rem);
    line-height: 1.7;
    color: var(--pl-on-dark-muted);
    text-wrap: pretty;
}

/* ── Forms ─────────────────────────────────────────────────────────────── */

.pl-form {
    background: var(--pl-dark);
    border-radius: var(--pl-radius-lg);
    box-shadow: var(--pl-shadow-panel);
    color: var(--pl-on-dark);
    padding: clamp(24px, 3.4vw, 44px);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pl-form__head {
    text-align: center;
    padding-bottom: 6px;
}

.pl-form__title {
    display: block;
    margin: 0;
    font-family: var(--pl-display);
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--pl-on-dark-strong);
}

.pl-form__subtitle {
    margin: 10px 0 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--pl-on-dark-dim);
}

.pl-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.pl-field {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.pl-field--half {
    flex: 1 1 200px;
    min-width: 0;
}

.pl-field__label {
    font-family: var(--pl-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--pl-gold-on-dark);
}

.pl-input {
    background: var(--pl-dark-input);
    border: 1px solid #797671;
    border-radius: 10px;
    color: var(--pl-on-dark-strong);
    font-family: var(--pl-body);
    /* Must not drop below 1rem: mobile Safari zooms the whole viewport when a
       focused field is smaller, and never zooms back out. */
    font-size: 1rem;
    min-height: var(--pl-tap);
    padding: 13px 16px;
    width: 100%;
}

textarea.pl-input {
    resize: vertical;
}

/* The native arrow is drawn by the platform in its own colours and reads as a
   light-theme control on this dark field, so it is replaced with a painted one.
   The option list keeps a light surface: browsers do not reliably inherit the
   select colours into the popup. */
.pl-select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--pl-gold-on-dark) 50%),
        linear-gradient(135deg, var(--pl-gold-on-dark) 50%, transparent 50%);
    background-position: right 21px center, right 16px center;
    background-repeat: no-repeat;
    background-size: 6px 6px;
    cursor: pointer;
    padding-right: 44px;
}

.pl-select option {
    background: var(--pl-bg-raised);
    color: var(--pl-fg);
}

.pl-input::placeholder {
    color: #85858c;
}

/* The accent border alone was a colour-only focus cue on a 1px hairline. Keep
   it, but let the shared :focus-visible ring do the actual signalling. */
.pl-input:focus-visible {
    outline: 2px solid var(--pl-on-dark-strong);
    outline-offset: 2px;
    border-color: var(--pl-gold-on-dark);
}

.pl-field__label .pl-req {
    color: var(--pl-accent-on-dark);
    margin-left: 2px;
}

/* Field-level errors sit next to the input that caused them rather than only in
   a summary at the foot of the form, and lead with a glyph so the message does
   not depend on the red alone. */
.pl-field__error,
.pl-field .validation-message {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--pl-accent-on-dark);
}

.pl-field__error::before,
.pl-field .validation-message::before {
    content: '\26A0';
    flex: 0 0 auto;
    font-size: 0.875rem;
    line-height: 1.4;
}

.pl-field__error:empty {
    display: none;
}

.pl-form__status {
    display: flex;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--pl-gold-line);
    border-radius: var(--pl-radius-sm);
    background: var(--pl-gold-wash);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--pl-on-dark);
}

.pl-form__status a {
    color: var(--pl-gold-on-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.pl-form > [role='alert']:empty {
    display: none;
}

.pl-form__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding-top: 4px;
}

/* ── Privacy policy ────────────────────────────────────────────────────── */

.pl-policy {
    max-width: 860px;
    padding-bottom: var(--pl-block);
    color: var(--pl-fg);
    font-size: 1rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.pl-policy__intro,
.pl-policy__section {
    padding-block: clamp(24px, 4vw, 40px);
}

.pl-policy__section {
    border-top: 1px solid var(--pl-line);
}

.pl-policy p,
.pl-policy ul {
    margin: 0 0 1.25rem;
}

.pl-policy .pl-h2 {
    margin-bottom: 1.25rem;
}

.pl-policy ul {
    padding-left: 1.5rem;
}

.pl-policy li + li {
    margin-top: 0.375rem;
}

.pl-policy a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.pl-policy p:last-child,
.pl-policy ul:last-child {
    margin-bottom: 0;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.pl-footer {
    background: var(--pl-dark);
    color: var(--pl-on-dark);
    border-top: 3px solid var(--pl-gold);
}

.pl-footer__inner {
    padding-top: clamp(48px, 6vw, 80px);
    padding-bottom: 28px;
}

.pl-footer__cols {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(32px, 4vw, 56px);
    padding-bottom: clamp(32px, 4vw, 52px);
    border-bottom: 1px solid var(--pl-line-dark);
}

/* Pairs keep the four footer columns breaking 2 + 2. */
.pl-footer__pair {
    flex: 1 1 520px;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(32px, 4vw, 56px);
}

.pl-footer__col {
    flex: 1 1 240px;
    min-width: 0;
}

.pl-footer__logo {
    height: 40px;
    width: auto;
    display: block;
    margin-bottom: 18px;
}

.pl-footer__wordmark {
    font-family: var(--pl-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--pl-on-dark-strong);
    line-height: 1.6;
}

.pl-footer__tagline {
    font-family: var(--pl-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pl-gold-on-dark);
}

.pl-footer__blurb {
    margin: 14px 0 0;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--pl-on-dark-dim);
    max-width: 36ch;
}

.pl-footer__heading {
    font-family: var(--pl-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pl-gold-on-dark);
    margin-bottom: 14px;
}

.pl-footer__nav {
    display: flex;
    flex-direction: column;
    font-size: 0.9375rem;
}

/* Stacked 14px links with an 11px gap gave ~18px of hit area apiece. The links
   now claim the full 44 pt row instead, which also spaces them apart. */
.pl-footer__link {
    display: flex;
    align-items: center;
    min-height: var(--pl-tap);
    color: var(--pl-on-dark-dim);
    text-decoration: none;
}

.pl-footer__link:hover {
    color: var(--pl-gold-on-dark);
}

.pl-footer__link[aria-current='page'] {
    color: var(--pl-on-dark-strong);
}

.pl-footer__link[aria-current='page']:hover {
    color: var(--pl-gold-on-dark);
}

.pl-footer__contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--pl-on-dark-muted);
}

.pl-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 32px;
}

.pl-footer__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(229, 184, 105, 0.14);
    color: var(--pl-gold-on-dark);
    margin-top: 2px;
}

.pl-footer__contact .pl-footer__phone,
.pl-footer__contact .pl-footer__email {
    min-height: 0;
}

.pl-footer__contact .pl-footer__phone {
    font-size: 1.125rem;
    letter-spacing: -0.01em;
}

.pl-footer__facts {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--pl-on-dark-muted);
}

.pl-id-row {
    display: flex;
    gap: 28px;
}

.pl-footer__phone {
    display: flex;
    align-items: center;
    min-height: var(--pl-tap);
    font-family: var(--pl-display);
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pl-on-dark-strong);
    text-decoration: none;
}

.pl-footer__phone:hover {
    color: var(--pl-gold-on-dark);
}

.pl-footer__email {
    display: inline-flex;
    align-items: center;
    min-height: var(--pl-tap);
    font-size: 0.875rem;
    color: var(--pl-on-dark-muted);
    text-decoration: none;
    /* break-all splits the address at arbitrary letters; anywhere only breaks
       when the line genuinely cannot fit. */
    overflow-wrap: anywhere;
}

.pl-footer__email:hover {
    color: var(--pl-gold-on-dark);
}

.pl-footer__bottom {
    padding-top: 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 0.8125rem;
    color: var(--pl-on-dark-dim);
}

.pl-footer__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* ── Service rows ──────────────────────────────────────────────────────── */

.pl-service {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 3vw, 44px);
    background: var(--pl-bg-raised);
    border: 1px solid var(--pl-line);
    border-radius: var(--pl-radius);
    box-shadow: var(--pl-shadow);
    padding: clamp(24px, 3.2vw, 40px);
}

.pl-service + .pl-service {
    margin-top: clamp(18px, 2.2vw, 26px);
}

.pl-service__num {
    flex: 0 0 auto;
    min-width: 64px;
    font-family: var(--pl-display);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.85;
    color: var(--pl-accent);
    font-variant-numeric: tabular-nums;
}

.pl-service__main {
    flex: 1 1 360px;
    min-width: 0;
    max-width: 58ch;
}

.pl-service__title {
    margin: 0;
    font-family: var(--pl-display);
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.18;
    color: var(--pl-fg-strong);
    text-wrap: pretty;
}

.pl-service__body {
    margin: 14px 0 0;
    font-size: clamp(0.90625rem, 1.5vw, 1.03125rem);
    line-height: 1.75;
    color: var(--pl-fg-muted);
    text-wrap: pretty;
}

.pl-service__side {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

/* ── Info panels ───────────────────────────────────────────────────────── */

.pl-info-grid {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 2.4vw, 28px);
}

.pl-info-pair {
    flex: 1 1 640px;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 2.4vw, 28px);
}

.pl-info {
    flex: 1 1 300px;
    min-width: 0;
    background: var(--pl-bg-raised);
    border: 1px solid var(--pl-line);
    border-radius: var(--pl-radius);
    box-shadow: var(--pl-shadow);
    padding: clamp(24px, 3vw, 36px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pl-info--dark {
    background: var(--pl-dark);
    border-color: transparent;
    box-shadow: var(--pl-shadow-panel);
    color: var(--pl-on-dark);
}

.pl-info--dark .pl-h3,
.pl-info--dark .pl-h3--lg {
    color: var(--pl-on-dark-strong);
}

.pl-info__phone {
    display: inline-flex;
    align-items: center;
    min-height: var(--pl-tap);
    font-family: var(--pl-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--pl-fg-strong);
    text-decoration: none;
}

.pl-info__phone:hover {
    color: var(--pl-accent-text);
}

.pl-info__email {
    display: inline-flex;
    align-items: center;
    min-height: var(--pl-tap);
    font-size: 0.90625rem;
    color: var(--pl-fg-soft);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.pl-info__email:hover {
    color: var(--pl-accent-text);
}

/* ── Contact page ──────────────────────────────────────────────────────── */

.pl-contact-card__value--email {
    font-size: clamp(1rem, 1.9vw, 1.1875rem);
    letter-spacing: -0.015em;
}

.pl-guarantees {
    margin-top: clamp(32px, 4vw, 52px);
}

/* The enquiry panel is the page's single focal point, so it stays narrower
   than the shell and centred rather than stretching the full width. */
.pl-form-wrap {
    max-width: 860px;
    margin-inline: auto;
}

.pl-form__hint {
    margin: 0;
    color: var(--pl-on-dark-dim);
}

.pl-info__facts {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--pl-on-dark-muted);
}

.pl-info__role {
    font-size: 0.875rem;
    color: var(--pl-gold-text);
    font-weight: 600;
    margin-top: -6px;
}

.pl-info__lines {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pl-info__legal {
    flex: 1 1 auto;
}

.pl-info__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

/* ── Page blocks ───────────────────────────────────────────────────────── */

.pl-manifest {
    flex: 1 1 420px;
    min-width: 0;
}

.pl-manifest__body {
    flex: 1 1 340px;
    min-width: 0;
    max-width: 56ch;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: clamp(0px, 2vw, 40px);
}

.pl-quote {
    margin: 0;
    font-family: var(--pl-display);
    font-size: clamp(1.625rem, 3.4vw, 2.625rem);
    line-height: 1.16;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--pl-fg-strong);
    text-wrap: pretty;
}

.pl-signature {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: clamp(22px, 3vw, 34px);
}

.pl-signature__rule {
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: var(--pl-accent);
}

.pl-placeholder {
    margin-top: 8px;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: var(--pl-radius);
    border: 1px dashed var(--pl-line-strong);
    background-color: var(--pl-bg-sunken);
    background-image: repeating-linear-gradient(135deg, rgba(20, 20, 26, 0.035) 0 1px, transparent 1px 10px);
}

.pl-placeholder span {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pl-fg-faint);
    text-align: center;
}

.pl-coverage__copy {
    flex: 1 1 380px;
    min-width: 0;
    max-width: 58ch;
}

.pl-coverage__hq {
    margin-top: clamp(20px, 2.6vw, 28px);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--pl-fg-faint);
}

.pl-chip-row--spaced {
    margin-top: clamp(22px, 2.8vw, 30px);
}

.pl-fleet-preview__image {
    flex: 1 1 380px;
    min-width: 0;
    display: flex;
}

.pl-fleet-preview__image .pl-frame {
    flex: 1 1 auto;
    min-height: clamp(280px, 32vw, 440px);
}

.pl-fleet-preview__body {
    flex: 1 1 400px;
    min-width: 0;
}

/* The inline stat band is narrower than the standalone one, so it keeps the
   padding tight and drops the outer shadow. */
.pl-stats--inline {
    margin-top: clamp(24px, 3vw, 32px);
    margin-bottom: clamp(20px, 2.4vw, 26px);
    padding: clamp(20px, 2.4vw, 26px) clamp(14px, 1.8vw, 20px);
    box-shadow: var(--pl-shadow);
}

.pl-stats--inline .pl-stat__value {
    font-size: clamp(1.375rem, 2.6vw, 1.875rem);
}

.pl-track__title {
    margin-top: 6px;
    font-family: var(--pl-display);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--pl-on-dark-strong);
    padding-right: 16px;
}

.pl-track {
    list-style: none;
    padding: 0;
}

.pl-cta__content {
    max-width: 48ch;
}

/* The "promise" card: copy on the left, the calls to action pinned right. */
.pl-promise {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
    padding: clamp(28px, 4vw, 48px);
}

.pl-promise__copy {
    flex: 1 1 420px;
    min-width: 0;
    max-width: 62ch;
}

.pl-promise__action {
    flex: 0 1 300px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pl-promise__action .pl-btn {
    width: 100%;
}

/* The fleet page shows a single flagship vehicle, so its card is built as a
   dark feature panel rather than a product tile: the night photo runs to the
   panel edge and fades into the same ink the CTA band and footer use. */
.pl-vehicle--feature {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    background: var(--pl-dark);
    border-color: transparent;
    border-radius: var(--pl-radius-lg);
    box-shadow: var(--pl-shadow-panel);
}

/* The panel is a static showcase, not a link, so it keeps the resting lift. */
.pl-vehicle--feature:hover {
    transform: none;
    box-shadow: var(--pl-shadow-panel);
}

.pl-vehicle--feature .pl-vehicle__media {
    aspect-ratio: auto;
    min-height: clamp(300px, 32vw, 460px);
    background: var(--pl-dark-raised);
}

/* Dissolve the seam between photo and copy instead of cutting it with an edge. */
.pl-vehicle--feature .pl-vehicle__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(27, 26, 24, 0) 58%, rgba(27, 26, 24, 0.92) 100%);
}

/* Matches the caption pill on .pl-frame in the cargo section below. */
.pl-vehicle--feature .pl-vehicle__badge {
    top: auto;
    right: auto;
    bottom: clamp(18px, 2vw, 26px);
    left: clamp(18px, 2vw, 26px);
    z-index: 1;
    border: 1px solid var(--pl-gold-line);
    background: rgba(18, 17, 16, 0.86);
    color: var(--pl-gold-on-dark);
    letter-spacing: 0.12em;
}

/* Spacing runs on margins here so the accent rule can sit tight under the
   title while the blocks below keep the wider section rhythm. */
.pl-vehicle--feature .pl-vehicle__body {
    justify-content: center;
    gap: 0;
    padding: clamp(28px, 3.6vw, 52px);
}

.pl-vehicle--feature .pl-vehicle__title {
    margin-top: 10px;
    color: var(--pl-on-dark-strong);
}

.pl-vehicle--feature .pl-rule {
    margin-top: 16px;
}

.pl-vehicle--feature .pl-vehicle__body > p {
    margin-top: clamp(18px, 2vw, 24px);
    max-width: 46ch;
    color: var(--pl-on-dark-muted);
}

/* Hairline cells, the same construction as .pl-cells, drawn on the dark ink.
   Two fixed columns keep the four specs square instead of leaving an orphan. */
.pl-vehicle--feature .pl-vehicle__specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--pl-line-dark);
    border: 1px solid var(--pl-line-dark);
    border-radius: var(--pl-radius-sm);
    padding: 0;
    margin-top: clamp(24px, 2.8vw, 32px);
    overflow: hidden;
}

.pl-vehicle--feature .pl-vehicle__spec {
    background: var(--pl-dark);
    padding: 16px 18px;
}

.pl-vehicle--feature .pl-vehicle__spec dt {
    color: var(--pl-on-dark-dim);
}

.pl-vehicle--feature .pl-vehicle__spec dd {
    font-size: 1.0625rem;
    color: var(--pl-gold-on-dark);
}

/* The foot is a .pl-btn-row, so it stacks to full-width buttons under 600px on
   its own; only the base card's margin-top:auto needs cancelling. */
.pl-vehicle--feature .pl-vehicle__foot {
    margin-top: clamp(24px, 2.8vw, 32px);
    padding-top: 0;
}

@media (max-width: 860px) {
    .pl-vehicle--feature {
        grid-template-columns: minmax(0, 1fr);
    }

    .pl-vehicle--feature .pl-vehicle__media {
        aspect-ratio: 16 / 10;
        min-height: 0;
    }

    /* Stacked, the fade would run across the photo rather than into the copy. */
    .pl-vehicle--feature .pl-vehicle__media::after {
        background: linear-gradient(180deg, rgba(27, 26, 24, 0) 62%, rgba(27, 26, 24, 0.92) 100%);
    }
}

.pl-cargo__media {
    flex: 1 1 340px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.pl-cargo__media .pl-frame {
    flex: 1 1 auto;
    min-height: clamp(260px, 28vw, 380px);
}

.pl-cargo__note {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 48ch;
}

.pl-cargo__specs {
    flex: 1 1 420px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.4vw, 26px);
}

.pl-cell__note {
    margin-top: 10px;
}

.pl-access {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
}

.pl-access__copy {
    flex: 1 1 260px;
    min-width: 0;
}

.pl-access__body {
    margin-top: 8px;
    max-width: 52ch;
}

.pl-fleet-status {
    margin-top: clamp(36px, 4.5vw, 60px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 3vw, 40px);
}

.pl-fleet-status__copy {
    flex: 1 1 380px;
    min-width: 0;
    max-width: 56ch;
}

.pl-fleet-status__chips {
    flex: 0 1 auto;
}

.pl-process-rail {
    margin-bottom: clamp(28px, 3.6vw, 44px);
}

.pl-work-head {
    margin-bottom: clamp(28px, 3.4vw, 44px);
}

.pl-work-features .pl-feature {
    gap: 12px;
}

/* ── Media frames ──────────────────────────────────────────────────────── */

.pl-frame {
    position: relative;
    border-radius: var(--pl-radius);
    overflow: hidden;
    background: var(--pl-bg-image);
    box-shadow: var(--pl-shadow);
}

.pl-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pl-frame__caption {
    position: absolute;
    left: 14px;
    max-width: calc(100% - 28px);
    bottom: 14px;
    background: rgba(18, 17, 16, 0.86);
    color: #fff;
    border-radius: var(--pl-pill);
    padding: 8px 16px;
    font-family: var(--pl-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ── Blazor framework UI ───────────────────────────────────────────────── */

.valid.modified:not([type=checkbox]):not(:focus-visible) {
    outline: 1px solid #6ee7a0;
}

/* 2px so the invalid state is a weight change as well as a colour change, for
   anyone who can't separate the red from the neutral hairline. */
.invalid:not(:focus-visible) {
    outline: 2px solid var(--pl-accent-on-dark);
    outline-offset: -1px;
}

.validation-message {
    color: var(--pl-accent-on-dark);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Došlo k neočekávané chybě.";
}

/* Mobile reading rhythm. Inline desktop sizing is overridden only where needed. */
@media (max-width: 600px) {
    :root {
        --pl-gutter: 22px;
        --pl-block: 60px;
        --pl-tap: 48px;
        --pl-header-height: 81px;
        --pl-radius: 16px;
        --pl-radius-lg: 20px;
    }

    .pl-header__inner {
        min-height: 80px;
        gap: 16px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .pl-header__logo img {
        height: 38px;
    }

    .pl-nav__link {
        padding: 14px 16px;
    }

    .pl-hero--media .pl-hero__body {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .pl-h1 {
        font-size: clamp(1.875rem, 8vw, 2.5rem) !important;
        line-height: 1.16;
        letter-spacing: -0.03em;
        text-wrap: pretty;
    }

    .pl-h2 {
        font-size: 1.6875rem !important;
        line-height: 1.22 !important;
        letter-spacing: -0.025em;
        text-wrap: pretty;
    }

    .pl-h3, .pl-card__title, .pl-service__title, .pl-tile__title {
        line-height: 1.3;
    }

    .pl-lead, .pl-text, .pl-note, .pl-card__body,
    .pl-service__body, .pl-cta__text, .pl-tile__body p {
        font-size: 1rem;
        line-height: 1.75;
    }

    .pl-eyebrow, .pl-meta, .pl-cell__label, .pl-card__tag,
    .pl-card__foot-label, .pl-field__label, .pl-footer__heading,
    .pl-label, .pl-track__label, .pl-stat__label {
        font-size: 0.8125rem;
        line-height: 1.5;
        letter-spacing: 0.06em;
    }

    .pl-eyebrow--block {
        margin-bottom: 14px;
    }

    .pl-meta {
        font-weight: 400;
        max-width: 32ch;
    }

    .pl-btn-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 28px;
    }

    .pl-btn {
        font-size: 0.9375rem;
        letter-spacing: 0.02em;
        text-transform: none;
        white-space: normal;
        text-align: center;
        padding: 15px 22px;
    }

    .pl-link {
        max-width: 100%;
        font-size: 0.9375rem;
        line-height: 1.5;
        letter-spacing: 0;
        text-transform: none;
    }

    .pl-facts__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 16px;
    }

    .pl-fact {
        padding-left: 12px;
    }

    .pl-fact__value, .pl-fact__value--sm {
        font-size: 0.9375rem;
        line-height: 1.5;
    }

    .pl-split {
        gap: 32px;
    }

    .pl-card-grid, .pl-features--wide, .pl-cells--descriptive,
    .pl-tiles, .pl-vehicles, .pl-contact-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .pl-card__head {
        gap: 16px;
        flex-wrap: wrap;
    }

    .pl-card__num {
        font-size: 1.875rem;
        line-height: 1;
    }

    .pl-card__tag {
        white-space: normal;
    }

    .pl-cell {
        padding: 18px 16px;
    }

    .pl-cell__value {
        font-size: 1.375rem;
    }

    .pl-chip {
        font-size: 0.8125rem;
        letter-spacing: 0;
        text-transform: none;
        line-height: 1.5;
        padding: 7px 14px;
    }

    .pl-service {
        gap: 18px;
        padding: 26px 22px;
    }

    .pl-service__num, .pl-service__main, .pl-service__side {
        flex-basis: auto;
    }

    .pl-service__num {
        font-size: 1.75rem;
        line-height: 1;
    }

    .pl-service__title {
        font-size: 1.4375rem;
    }

    .pl-track {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .pl-track__step::before {
        right: auto;
        width: 2px;
        height: 100%;
        top: 14px;
        left: 6px;
    }

    .pl-track__step {
        padding-top: 0;
        padding-left: 30px;
    }

    .pl-track__step::after {
        top: 2px;
    }

    .pl-fleet-preview {
        padding-top: 40px;
        padding-bottom: 56px;
        gap: 32px !important;
    }

    .pl-fleet-preview__image {
        flex-basis: 100% !important;
        min-height: 240px !important;
    }

    .pl-fleet-preview__body {
        padding: 0 !important;
    }

    .pl-fleet-actions {
        width: 100%;
        margin-top: 0;
    }

    .pl-form {
        padding: 24px 20px;
        gap: 24px;
    }

    .pl-form__row {
        flex-direction: column;
        gap: 24px;
    }

    .pl-form > [role='alert']:empty {
        display: none;
    }

    .pl-field--half {
        flex-basis: auto;
    }

    .pl-input {
        font-size: 1rem;
        line-height: 1.5;
    }

    .pl-form__foot {
        align-items: stretch;
        flex-direction: column;
    }

    .pl-form__foot > span {
        flex-basis: auto !important;
        line-height: 1.6;
    }

    .pl-vehicle__specs {
        gap: 14px 16px;
    }

    .pl-footer__cols, .pl-footer__pair {
        flex-direction: column;
        gap: 32px;
    }

    .pl-footer__pair, .pl-footer__col {
        flex-basis: auto;
    }

    .pl-footer__heading {
        margin-bottom: 10px;
    }

    .pl-footer__nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
    }

    .pl-id-row {
        flex-wrap: wrap;
        gap: 16px 28px;
    }

    .pl-footer__badges {
        gap: 12px 20px;
        line-height: 1.6;
    }
}