/*
 * LoadTruck (لود تراك) — brand layer on top of the Apexa theme (v3).
 * Direction: the Saudi road itself — blue guide signs with a white inset rule, asphalt with yellow median
 * and white lane dashes, km posts and the paper waybill. Flat surfaces, hairlines, no gradients or glass.
 * Contract: platform/themes/apexa/DESIGN.md. Logical properties throughout (ar = RTL, en = LTR).
 * No @layer on purpose: Apexa's CSS is unlayered and would otherwise win.
 */

/* 1. Fonts (self-hosted) --------------------------------------------------------------------------- */
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Light-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Light-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Regular.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Medium.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Bold.woff2') format('woff2'); }
/* Display face (2026-10-01): Readex Pro, variable 160–700 — open geometric forms that read like modern signage. */
@font-face { font-family: 'Readex Pro'; font-style: normal; font-weight: 160 700; font-display: swap; src: url('../fonts/readex-pro/ReadexPro-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Readex Pro'; font-style: normal; font-weight: 160 700; font-display: swap; src: url('../fonts/readex-pro/ReadexPro-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* 2. Tokens (see DESIGN.md) ------------------------------------------------------------------------ */
:root {
    --lt-blue: #004F9E;
    --lt-blue-700: #003F7F;
    --lt-blue-on: #D6E2F0;
    --lt-asphalt: #1C2430;
    --lt-asphalt-900: #141A23;
    --lt-amber: #FFB523;
    --lt-amber-300: #FFC857;
    --lt-ink: #13202F;
    --lt-lead: #3A4757;
    --lt-muted: #4E5B6B;
    --lt-line: #D5DCE4;
    --lt-line-strong: #AEB8C4;
    --lt-concrete: #EEF1F4;
    --lt-paper: #FFFFFF;
    --lt-on-dark: #C3CAD3;
    --lt-steel: #7D8894;

    --lt-font: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
    --lt-font-display: 'Readex Pro', 'IBM Plex Sans Arabic', system-ui, sans-serif;
    --lt-fs-h1: clamp(38px, 5.2vw, 78px);
    --lt-fs-h2: clamp(28px, 2.7vw, 40px);
    --lt-fs-head-lead: clamp(17px, 1.3vw, 19px);
    --lt-fs-h3: clamp(19px, 1.45vw, 22px);
    --lt-fs-lead: clamp(18px, 1.3vw, 21px);

    --lt-r: 4px;
    --lt-r-sign: 10px;
    --lt-section: clamp(72px, 9vw, 128px);
    --lt-block: clamp(36px, 4.4vw, 60px);
    --lt-header-h: 76px;
    --lt-ease: cubic-bezier(.2, .7, .2, 1);
    /* The sign's own border: blue margin, then a white rule (no drop shadow anywhere). */
    --lt-sign-rule: inset 0 0 0 6px var(--lt-blue), inset 0 0 0 8px #FFFFFF;
    /* Asphalt aggregate: a 120px tile of faint light and dark specks over the dark ground. */
    --lt-grain: url('../images/lt-asphalt.png');

    /* Apexa bridge */
    --tg-body-font-family: var(--lt-font);
    --tg-heading-font-family: var(--lt-font-display);
    --heading-font: var(--lt-font-display);
    --tg-color-gray-3: var(--lt-concrete);
    --tg-color-dark-blue: var(--lt-ink);
}

/* 3. Base ------------------------------------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--lt-font);
    font-size: 17px;
    line-height: 1.85;
    color: var(--lt-ink);
    background: var(--lt-paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body, input, textarea, select, button, .btn { font-family: var(--lt-font); }
h1, h2, h3, h4, h5, h6 { color: var(--lt-ink); font-weight: 700; line-height: 1.5; letter-spacing: 0; text-transform: none; }
h1, h2, h3, .title { font-family: var(--lt-font-display); font-synthesis-weight: none; }
h4, h5, h6 { font-family: var(--lt-font); font-weight: 700; }
[dir="ltr"] h1, [dir="ltr"] h2 { line-height: 1.2; letter-spacing: -.015em; }
a { color: var(--lt-blue); text-underline-offset: .25em; }
a:hover { color: var(--lt-blue-700); }
::selection { background: var(--lt-amber); color: var(--lt-ink); }
img { height: auto; }
main.fix { overflow: clip; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--lt-ink);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--lt-amber);
    border-radius: 2px;
}
.container { --bs-gutter-x: 40px; }
@media (max-width: 575.98px) { .container { --bs-gutter-x: 32px; } }

/* 4. Buttons, links, lists ------------------------------------------------------------------------- */
.lt-btn,
.btn, .tg-btn, .quotation-button, .contact-form button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 26px;
    border: 1.5px solid transparent;
    border-radius: var(--lt-r);
    background: var(--lt-blue);
    color: #FFFFFF;
    font-family: var(--lt-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
    transition: background-color .2s var(--lt-ease), color .2s var(--lt-ease), border-color .2s var(--lt-ease);
}
.lt-btn:hover,
.btn:hover, .tg-btn:hover, .quotation-button:hover, .contact-form button[type="submit"]:hover { background: var(--lt-blue-700); color: #FFFFFF; transform: none; }
.lt-btn:active, .btn:active { transform: translateY(1px); }
.btn::before, .btn::after, .tg-btn::before, .tg-btn::after { display: none !important; }
.lt-btn--lg { min-height: 58px; padding-inline: 32px; font-size: 17px; }
.lt-btn--signal { background: var(--lt-amber); color: var(--lt-ink); }
.lt-btn--signal:hover { background: var(--lt-amber-300); color: var(--lt-ink); }
.lt-btn--line { background: transparent; border-color: var(--lt-ink); color: var(--lt-ink); }
.lt-btn--line:hover { background: var(--lt-ink); color: #FFFFFF; }
.lt-btn--line-light { background: transparent; border-color: rgba(255, 255, 255, .75); color: #FFFFFF; }
.lt-btn--line-light:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--lt-ink); }
@media (max-width: 575.98px) { .lt-btn { white-space: normal; text-align: center; } }

.lt-link {
    display: inline-block;
    font-weight: 600;
    color: var(--lt-blue);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .45em;
    transition: color .2s var(--lt-ease), text-decoration-color .2s var(--lt-ease);
}
.lt-link:hover { color: var(--lt-ink); text-decoration-color: var(--lt-amber); }

/* Page content sits in .ck-content, whose `ul { list-style-type: disc }` would add markers to every list. */
:is(.lt-hero, .lt-section, .lt-pagehead, .lt-cta, .lt-footer) :is(.lt-dashlist, .lt-board__face, .lt-road__steps, .lt-platform__list, .lt-waybill__timeline, .lt-waybill__files ul, .lt-app__features, .lt-phone__steps, .lt-gsign__rows, .lt-checkdoc, .lt-channels__list, .lt-vfile__rows, .lt-crumbs ol) { list-style: none; }

/* Lane-mark bullet */
.lt-dashlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lt-dashlist li { position: relative; padding-inline-start: 28px; line-height: 1.7; }
.lt-dashlist li::before { content: ""; position: absolute; inset-inline-start: 0; top: .8em; inline-size: 16px; block-size: 3px; background: var(--lt-amber); }
.lt-dashlist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
@media (max-width: 575.98px) { .lt-dashlist--2 { grid-template-columns: 1fr; } }

/* Ticked box (documents, checklists) — the tick is not mirrored in RTL. */
.lt-box { position: relative; flex: none; display: inline-block; inline-size: 22px; block-size: 22px; border: 2px solid var(--lt-ink); border-radius: 2px; background: #FFFFFF; }
.lt-box::after { content: ""; position: absolute; left: 5.5px; top: 1px; inline-size: 7px; block-size: 13px; border: solid var(--lt-blue); border-width: 0 3px 3px 0; transform: rotate(45deg); }

.lt-note { margin: 28px 0 0; max-width: 780px; color: var(--lt-muted); font-size: 15px; padding-inline-start: 28px; position: relative; }
.lt-note::before { content: ""; position: absolute; inset-inline-start: 0; top: .85em; inline-size: 16px; block-size: 3px; background: var(--lt-amber); }

/* 5. Sections and headings ------------------------------------------------------------------------- */
.lt-section { position: relative; padding-block: var(--lt-section); }
.lt-section p { color: inherit; }
.lt-section--paper { background: var(--lt-paper); }
.lt-section--concrete { background: var(--lt-concrete); }
.lt-section--asphalt { background: var(--lt-asphalt) var(--lt-grain) 0 0 / 120px 120px repeat; color: var(--lt-on-dark); }
.lt-section--asphalt h2, .lt-section--asphalt h3 { color: #FFFFFF; }
.lt-section--asphalt .lt-link { color: #FFFFFF; }
.lt-section--paper + .lt-section--paper { border-top: 1px solid var(--lt-line); }

/* Section headings read like a line on a guide sign: the title, then a lane line running on to a small lane
   sign whose arrow points down into the section; the lead sits directly under the title. */
.lt-head {
    --lt-head-dash: var(--lt-line-strong);
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(72px, 1fr);
    grid-template-areas: "title lane" "lead lead";
    align-items: end;
    gap: 14px clamp(20px, 2.4vw, 36px);
    margin: 0 0 var(--lt-block);
}
.lt-head--solo { grid-template-areas: "title lane"; }
.lt-head__title { grid-area: title; max-width: 820px; margin: 0; font-size: var(--lt-fs-h2); font-weight: 600; line-height: 1.4; color: var(--lt-ink); text-wrap: balance; }
/* In a half-width column there is no room beside the title: the lane runs under the opening instead, its sign
   at the far end pointing down to what follows. */
.lt-head--stack { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "lead" "lane"; }
.lt-head--stack.lt-head--solo { grid-template-areas: "title" "lane"; }
.lt-head--stack .lt-head__lane { block-size: auto; margin-top: 8px; }
/* Where a ruled list follows, the lane is its top rule. */
.lt-head--stack:has(+ .lt-platform__list), .lt-head--stack:has(+ .lt-app__features) { margin-bottom: 6px; }
.lt-head--stack + .lt-platform__list, .lt-head--stack + .lt-app__features { border-top: 0; }
[dir="ltr"] .lt-head__title { line-height: 1.15; letter-spacing: -0.015em; }
.lt-head__lead { grid-area: lead; margin: 0; max-width: 660px; font-size: var(--lt-fs-head-lead); font-weight: 400; line-height: 1.85; color: var(--lt-lead); text-wrap: balance; }
[dir="ltr"] .lt-head__lead { line-height: 1.7; }
/* One line-box tall and top-aligned, so the lane runs on from the title's first line. */
.lt-head__lane { grid-area: lane; align-self: start; display: flex; align-items: center; gap: 14px; block-size: calc(var(--lt-fs-h2) * 1.4); }
[dir="ltr"] .lt-head__lane { block-size: calc(var(--lt-fs-h2) * 1.15); }
/* Dashes start whole at the title (or sign) side: --lt-dash-dir points away from it. */
.lt-head__lane i { --lt-dash-dir: 90deg; flex: 1; block-size: 3px; background: repeating-linear-gradient(var(--lt-dash-dir), var(--lt-head-dash) 0 20px, transparent 20px 34px); }
[dir="rtl"] .lt-head__lane i { --lt-dash-dir: 270deg; }
.lt-head__lane i:last-child { display: none; }
.lt-head__sign { flex: none; inline-size: 34px; block-size: 34px; }
.lt-head--dark { --lt-head-dash: rgba(255, 255, 255, .4); }
.lt-head--dark .lt-head__title { color: #FFFFFF; }
.lt-head--dark .lt-head__lead { color: var(--lt-on-dark); }
/* Drawn once as the heading comes into view (JS adds .lt-heads-motion; nothing is hidden without it). */
.lt-heads-motion .lt-head__lane i:first-child { transform: scaleX(0); transform-origin: left center; transition: transform .9s var(--lt-ease); }
[dir="rtl"].lt-heads-motion .lt-head__lane i:first-child { transform-origin: right center; }
.lt-heads-motion .lt-head__sign { opacity: 0; transform: translateY(-10px); transition: opacity .4s var(--lt-ease) .55s, transform .5s var(--lt-ease) .55s; }
.lt-heads-motion .lt-head.is-in .lt-head__lane i:first-child { transform: scaleX(1); }
.lt-heads-motion .lt-head.is-in .lt-head__sign { opacity: 1; transform: none; }

/* 6. Header ---------------------------------------------------------------------------------------- */
.tg-header__style-four,
.tg-header__style-four.transparent-header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0;
    background: #FFFFFF;
    border-bottom: 1px solid var(--lt-line);
}
.show-admin-bar .tg-header__style-four { top: 40px; }
.tg-header__area-four,
.tg-header__area-four.sticky-menu { position: static; padding: 0; background: transparent; box-shadow: none; animation: none; border: 0; }
.tg-header__area-four .tgmenu__wrap { padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; }
.tgmenu__nav { min-height: var(--lt-header-h); align-items: center; gap: 20px; flex-wrap: nowrap !important; justify-content: space-between; }
.tgmenu__nav .logo { flex: none; }
.tgmenu__nav .logo img { max-height: 40px !important; width: auto; }
.tgmenu__navbar-wrap { flex: 1 1 auto; min-width: 0; justify-content: center; }
.tgmenu__navbar-wrap > ul { margin-inline: auto !important; flex-wrap: nowrap !important; }
.tgmenu__navbar-wrap > ul > li > a,
.tgmenu__main-menu .navigation > li > a { position: relative; padding: 26px 13px; font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--lt-ink); }
/* Active / hover item: a lane mark on the header's bottom edge. */
.tgmenu__navbar-wrap > ul > li > a::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    top: auto;
    bottom: -1px;
    left: auto;
    right: auto;
    inset-inline: 13px;
    inline-size: auto;
    block-size: 3px;
    background: var(--lt-amber);
    border-radius: 0;
    opacity: 1;
    transform: scaleX(0);
    transition: transform .25s var(--lt-ease);
}
.tgmenu__navbar-wrap > ul > li:hover > a::before,
.tgmenu__navbar-wrap > ul > li.active > a::before,
.tgmenu__navbar-wrap > ul > li.current-menu-item > a::before { transform: scaleX(1); }
.tgmenu__navbar-wrap > ul > li:hover > a { color: var(--lt-blue); }
.tgmenu__navbar-wrap > ul > li.active > a { color: var(--lt-ink); }
.tgmenu__navbar-wrap > ul > li.menu-item-has-children > a::after {
    content: "" !important;
    display: inline-block;
    inline-size: 7px;
    block-size: 7px;
    margin-inline-start: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    opacity: .6;
    font-family: inherit;
}
.tgmenu__navbar-wrap ul li .sub-menu { min-width: 240px; padding: 8px; border: 1px solid var(--lt-line); border-radius: var(--lt-r); box-shadow: 0 14px 28px -20px rgba(19, 32, 47, .45); }
.tgmenu__navbar-wrap ul li .sub-menu li a { padding: 9px 12px; border-radius: 2px; font-weight: 500; color: var(--lt-ink); }
.tgmenu__navbar-wrap ul li .sub-menu li a:hover { background: var(--lt-concrete); color: var(--lt-blue); }
.tgmenu__navbar-wrap ul li .sub-menu li a::before { display: none; }

.lt-header-actions { flex: none; align-items: center; margin: 0 !important; }
.lt-header-actions .list-wrap { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
/* The template hides this button below 1200px; the quote action stays visible at every width. */
.lt-header-actions .list-wrap .header-btn { display: block; margin: 0; }
.lt-header-actions .list-wrap .header-btn .btn { min-height: 46px; padding: 10px 20px; font-size: 15.5px; }
.lt-header-actions .header-btn .btn svg, .lt-header-actions .header-btn .btn img { display: none; }
.header-language-switcher .dropdown-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 8px 12px; border: 1px solid var(--lt-line); border-radius: var(--lt-r); background: #FFFFFF; color: var(--lt-ink); font-size: 15px; font-weight: 600; }
.header-language-switcher .dropdown-toggle:hover { border-color: var(--lt-ink); color: var(--lt-ink); }
.header-language-switcher .dropdown-toggle::after { display: none; }
.header-language-switcher .dropdown-toggle svg { inline-size: 18px; block-size: 18px; }
.header-language-switcher .dropdown-menu { min-width: 170px; padding: 6px; border: 1px solid var(--lt-line); border-radius: var(--lt-r); box-shadow: 0 14px 28px -20px rgba(19, 32, 47, .45); }
.header-language-switcher .dropdown-item { padding: 8px 12px; border-radius: 2px; font-weight: 500; }
.header-language-switcher .dropdown-item:hover { background: var(--lt-concrete); color: var(--lt-blue); }
/* Menu button: three bars drawn with gradients (the element is empty; it carries role="button"). */
.tgmenu__nav .mobile-nav-toggler { display: none !important; place-items: center; flex: none; float: none; top: 0; inline-size: 44px; block-size: 44px; margin: 0; border: 1px solid var(--lt-line-strong); border-radius: var(--lt-r); background: #FFFFFF; box-shadow: none; color: var(--lt-ink); font-size: 0; line-height: 1; cursor: pointer; }
.tgmenu__nav .mobile-nav-toggler::before {
    content: "";
    inline-size: 20px;
    block-size: 14px;
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
    background-size: 100% 2px;
    background-position: 0 0, 0 50%, 0 100%;
    background-repeat: no-repeat;
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .tgmenu__navbar-wrap > ul > li > a { padding-inline: 8px; font-size: 15px; }
    .tgmenu__navbar-wrap > ul > li > a::before { inset-inline: 8px; }
    .header-language-switcher .language-selected { display: none; }
}
@media (max-width: 991.98px) {
    :root { --lt-header-h: 64px; }
    .tgmenu__nav { gap: 10px; }
    .tgmenu__nav .mobile-nav-toggler { display: grid !important; margin-inline-start: auto; }
    .tgmenu__nav .logo img { max-height: 34px !important; }
    .lt-header-actions { margin: 0 !important; margin-inline-start: auto !important; }
    .tgmenu__nav .lt-header-actions + .mobile-nav-toggler { margin-inline-start: 0; }
}
/* Phones: keep the quote button in the bar (language moves into the drawer). */
@media (max-width: 767.98px) {
    .lt-header-actions { display: flex !important; }
    .lt-header-actions .list-wrap > li:not(.header-btn) { display: none; }
    .lt-header-actions .list-wrap .header-btn .btn { min-height: 44px; padding: 8px 12px !important; font-size: 14px; }
    .lt-header-actions .header-btn .btn span { margin: 0 !important; }
    .tgmenu__nav .logo img { max-height: 30px !important; }
}
@media (max-width: 374.98px) { .lt-header-actions { display: none !important; } }

/* Drawer (the template positions everything with physical left/right; these rules follow the text direction). */
.tgmobile__menu { inline-size: min(340px, 88vw); padding: 0; }
.tgmobile__menu .tgmobile__menu-box { padding: 18px 20px 24px; background: #FFFFFF; box-shadow: none; }
.tgmobile__menu .close-btn { top: 18px; right: auto; left: auto; inset-inline-end: 14px; inline-size: 44px; block-size: 44px; line-height: 44px; color: var(--lt-ink) !important; font-size: 20px; }
.tgmobile__menu .nav-logo { padding: 4px 0 18px; text-align: start; }
.tgmobile__menu .nav-logo img { max-height: 36px; width: auto; }
.tgmobile__search { padding: 0 0 18px; }
.tgmobile__search input { block-size: 48px; padding: 10px 14px; padding-inline-end: 46px; border: 1px solid var(--lt-line-strong); border-radius: var(--lt-r); background: #FFFFFF; font-size: 16px; }
.tgmobile__search button { right: auto; left: auto; inset-inline-end: 12px; color: var(--lt-ink); }
.tgmobile__menu .navigation li { border-top-color: var(--lt-line); }
.tgmobile__menu .navigation:last-child { border-bottom-color: var(--lt-line); }
.tgmobile__menu .navigation li > a { padding: 14px 0; padding-inline-end: 52px; color: var(--lt-ink); font-size: 17px; font-weight: 600; line-height: 1.5; text-transform: none; }
.tgmobile__menu .navigation li > a::before { display: none; }
.tgmobile__menu .navigation li.active > a { color: var(--lt-blue); }
.tgmobile__menu .navigation li ul li > a, .tgmobile__menu .navigation ul li ul li > a { margin-inline-start: 0; padding-inline-start: 18px; font-size: 16px; font-weight: 500; }
.tgmobile__menu .navigation li.menu-item-has-children .dropdown-btn { top: 8px; right: auto; left: auto; inset-inline-end: 0; inline-size: 38px; block-size: 38px; border: 1px solid var(--lt-line-strong); border-radius: var(--lt-r); background: #FFFFFF; line-height: 38px; }
.tgmobile__menu .navigation li.menu-item-has-children .dropdown-btn.open { border-color: var(--lt-blue); background: var(--lt-blue); }
.tgmobile__menu-bottom { padding: 16px 0 0; }
.language-switcher-mobile { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--lt-line); }
.language-switcher-mobile .title { padding: 0; color: var(--lt-muted); font-family: var(--lt-font); font-size: 14px; font-weight: 600; }
.language-switcher-mobile .list { margin: 6px 0 0 !important; padding: 0 !important; }
.language-switcher-mobile .list a { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; color: var(--lt-ink); font-weight: 600; }
.tgmobile__menu-backdrop { background: rgba(19, 32, 47, .6); }
.lt-mobile-cta { display: flex; inline-size: 100%; margin: 18px 0 4px; }

/* 7. Page header: blue sign on posts over a concrete band ------------------------------------------ */
.lt-pagehead { position: relative; padding-top: clamp(36px, 5vw, 64px); background: var(--lt-concrete); }
.lt-pagehead::after {
    content: "";
    display: block;
    block-size: 18px;
    background-color: var(--lt-asphalt);
    background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .8) 0 26px, transparent 26px 52px);
    background-size: 100% 2px;
    background-position: 0 50%;
    background-repeat: no-repeat;
}
.lt-pagehead__sign { display: inline-flex; flex-direction: column; max-inline-size: min(100%, 900px); vertical-align: bottom; }
.lt-pagehead__face { padding: clamp(20px, 2.6vw, 30px) clamp(24px, 3vw, 38px) clamp(24px, 2.8vw, 34px); border-radius: var(--lt-r-sign); background: var(--lt-blue); box-shadow: var(--lt-sign-rule); color: #FFFFFF; }
.lt-pagehead__title { margin: 8px 0 0; font-size: clamp(30px, 4.2vw, 56px); font-weight: 700; line-height: 1.4; color: #FFFFFF; }
[dir="ltr"] .lt-pagehead__title { line-height: 1.15; }
.lt-pagehead__posts { display: flex; justify-content: space-between; padding-inline: 20%; block-size: clamp(26px, 4vw, 52px); }
.lt-pagehead__posts i { inline-size: 10px; background: var(--lt-steel); box-shadow: inset 3px 0 0 rgba(255, 255, 255, .2); }
.lt-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; font-weight: 500; line-height: 1.7; }
.lt-crumbs li { display: inline-flex; align-items: center; gap: 10px; color: var(--lt-blue-on); }
.lt-crumbs li + li::before { content: "/"; opacity: .6; }
.lt-crumbs a { color: #FFFFFF; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: .3em; }
.lt-crumbs a:hover { color: #FFFFFF; text-decoration-color: var(--lt-amber); }
.lt-crumbs [aria-current] { color: var(--lt-blue-on); }

/* 8. Home hero: headline, guide sign, road ------------------------------------------------------------ */
.lt-hero { position: relative; padding-top: clamp(40px, 6vw, 88px); background: var(--lt-paper); }
.lt-hero p { color: inherit; }
.lt-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 88px); align-items: end; }
.lt-hero__copy { padding-bottom: clamp(44px, 5vw, 76px); }
.lt-hero__title { margin: 0 0 24px; font-size: var(--lt-fs-h1); font-weight: 700; line-height: 1.3; color: var(--lt-ink); }
.lt-hero__line { display: block; }
.lt-hero__line--light { font-weight: 300; }
[dir="ltr"] .lt-hero__title { font-size: clamp(38px, 4.8vw, 70px); line-height: 1.08; letter-spacing: -.025em; }
.lt-hero__lead { margin: 0 0 32px; max-width: 60ch; font-size: var(--lt-fs-lead); font-weight: 300; line-height: 1.85; color: var(--lt-lead); }
.lt-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }
.lt-hero__facts { grid-template-columns: repeat(2, max-content); gap: 10px 36px; font-size: 15.5px; font-weight: 500; color: var(--lt-ink); }

/* Guide sign (always laid out like the real sign: English left, Arabic right) */
.lt-hero__sign { position: relative; display: flex; flex-direction: column; justify-self: center; inline-size: min(100%, 470px); margin: 0; }
.lt-gsign { padding: 22px 26px 16px; border-radius: var(--lt-r-sign); background: var(--lt-blue); box-shadow: var(--lt-sign-rule); color: #FFFFFF; }
.lt-gsign__head { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 2px solid #FFFFFF; }
.lt-gsign__marker { flex: none; display: grid; place-items: center; inline-size: 58px; block-size: 58px; border-radius: 8px; background: #FFFFFF; }
.lt-gsign__marker img { inline-size: 44px; block-size: 44px; }
.lt-gsign__plate { font: 600 15px/1.55 var(--lt-font); color: #FFFFFF; }
.lt-gsign__rows { margin: 0; padding: 0; list-style: none; }
.lt-gsign__rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto minmax(7.2em, auto); align-items: center; gap: 10px 14px; padding-block: 12px 10px; }
.lt-gsign__rows li + li { padding-top: 6px; }
/* One shared set of columns for all rows, so names and distances line up like on a real sign. */
@supports (grid-template-columns: subgrid) {
    .lt-gsign__rows { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: 14px; }
    .lt-gsign__rows li { grid-column: 1 / -1; grid-template-columns: subgrid; }
}
.lt-gsign__en { font: 600 19px/1.2 var(--lt-font); text-align: left; white-space: nowrap; }
.lt-gsign__ar { font: 700 22px/1.4 var(--lt-font-display); text-align: right; white-space: nowrap; }
.lt-gsign__km { min-inline-size: 3.2ch; font: 700 19px/1 var(--lt-font); font-variant-numeric: tabular-nums; text-align: right; }
.lt-gsign__km--ar { font-family: var(--lt-font-display); font-size: 20px; text-align: left; }
.lt-gsign__km + .lt-gsign__km { padding-left: 14px; border-left: 2px solid rgba(255, 255, 255, .5); }
.lt-gsign__posts { display: flex; justify-content: space-between; padding-inline: 22%; block-size: clamp(56px, 7vw, 112px); }
.lt-gsign__posts i { inline-size: 12px; background: var(--lt-steel); box-shadow: inset 3px 0 0 rgba(255, 255, 255, .22); }

/* Road: yellow median line, white lane dashes, white edge line. */
.lt-hero__road {
    position: relative;
    block-size: clamp(92px, 9vw, 124px);
    overflow: hidden;
    background: var(--lt-asphalt) var(--lt-grain) 0 0 / 120px 120px repeat;
}
.lt-hero__lanes {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--lt-amber), var(--lt-amber)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .9) 0 46px, transparent 46px 92px),
        linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9));
    background-size: 100% 4px, 100% 3px, 100% 4px;
    background-position: 0 12px, 0 50%, 0 calc(100% - 12px);
    background-repeat: no-repeat;
}
.lt-hero__truck { position: absolute; bottom: 22px; inset-inline-start: 7%; inline-size: clamp(170px, 17vw, 250px); }
.lt-hero__truck .lt-truck { display: block; inline-size: 100%; margin-bottom: -4.0625%; }
.lt-hero__trip { background: var(--lt-asphalt-900); color: var(--lt-on-dark); border-top: 1px solid rgba(255, 255, 255, .08); }
.lt-trip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 30px; margin: 0; padding-block: 14px; font-size: 14.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.lt-trip b { color: #FFFFFF; font-weight: 600; }
.lt-trip__status { display: inline-flex; align-items: center; gap: 8px; color: var(--lt-amber); font-weight: 700; }
.lt-trip__status::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor; }
@media (max-width: 991.98px) {
    .lt-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .lt-hero__copy { padding-bottom: 28px; }
    .lt-hero__sign { inline-size: min(100%, 400px); justify-self: start; }
}
@media (max-width: 575.98px) {
    .lt-hero__facts { grid-template-columns: minmax(0, 1fr); }
    .lt-hero__actions { flex-wrap: nowrap; gap: 10px; }
    .lt-hero__actions .lt-btn { flex: 1 1 0; min-inline-size: 0; padding-inline: 10px; font-size: 15px; }
    .lt-gsign { padding: 18px 18px 12px; }
    .lt-gsign__marker { inline-size: 48px; block-size: 48px; }
    .lt-gsign__marker img { inline-size: 36px; block-size: 36px; }
    .lt-gsign__en { font-size: 16px; }
    .lt-gsign__ar { font-size: 18px; }
    .lt-gsign__km { font-size: 16px; }
    .lt-gsign__km--ar { font-size: 17px; }
    .lt-gsign__rows, .lt-gsign__rows li { column-gap: 10px; }
    .lt-gsign__km + .lt-gsign__km { padding-left: 10px; }
    .lt-trip { gap: 4px 18px; font-size: 13.5px; }
}
@media (max-width: 359.98px) { .lt-hero__actions { flex-wrap: wrap; } .lt-hero__actions .lt-btn { flex-basis: 100%; } }

/* 9. Audiences: an overhead gantry with one lane sign per party; the lane under each sign holds its details -- */
.lt-gantry { position: relative; display: grid; grid-template-columns: repeat(var(--lt-lanes, 3), minmax(0, 1fr)); padding-inline: 14px; }
/* Steel frame: two legs and the beam the signs hang on. */
.lt-gantry::before, .lt-gantry::after { content: ""; position: absolute; top: 40px; bottom: 0; inline-size: 14px; background: var(--lt-steel); box-shadow: inset 4px 0 0 rgba(255, 255, 255, .2); }
.lt-gantry::before { inset-inline-start: 0; }
.lt-gantry::after { inset-inline-end: 0; }
.lt-gantry__beam { position: absolute; top: 40px; inset-inline: 0; block-size: 16px; background: var(--lt-steel); box-shadow: inset 0 4px 0 rgba(255, 255, 255, .2); }
.lt-lane { position: relative; display: grid; grid-template-rows: auto 1fr; }
.lt-lane__sign { position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; gap: 10px; min-block-size: 132px; margin-inline: clamp(14px, 2.2vw, 34px); padding: 18px 16px 16px; border-radius: var(--lt-r-sign); background: var(--lt-blue); box-shadow: var(--lt-sign-rule); color: #FFFFFF; text-align: center; }
.lt-lane__title { margin: 0; color: #FFFFFF; font-size: clamp(20px, 1.9vw, 27px); font-weight: 700; line-height: 1.4; }
[dir="ltr"] .lt-lane__title { line-height: 1.2; }
.lt-lane__arrow { inline-size: 22px; block-size: 28px; }
.lt-lane__body { position: relative; display: flex; flex-direction: column; gap: 18px; margin-top: 22px; padding: 34px clamp(22px, 2.6vw, 40px) 36px; background: var(--lt-asphalt) var(--lt-grain) 0 0 / 120px 120px repeat; color: var(--lt-on-dark); }
/* Lane paint: yellow edge on the first lane, dashes between lanes, white edge on the last. */
.lt-lane__body::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: -1.5px; inline-size: 3px; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .85) 0 28px, transparent 28px 56px); }
.lt-lane:first-of-type .lt-lane__body::before { inset-inline-start: 8px; inline-size: 4px; background: var(--lt-amber); }
.lt-lane:last-of-type .lt-lane__body::after { content: ""; position: absolute; inset-block: 0; inset-inline-end: 8px; inline-size: 4px; background: rgba(255, 255, 255, .85); }
.lt-lane__desc { margin: 0; font-size: 16.5px; line-height: 1.8; color: var(--lt-on-dark); }
.lt-lane__points { gap: 11px; color: #FFFFFF; font-size: 15.5px; font-weight: 500; }
.lt-lane__link { align-self: flex-start; margin-top: auto; min-height: 46px; padding: 10px 20px; font-size: 15.5px; }
.lt-lane__link:hover { background: var(--lt-amber); border-color: var(--lt-amber); color: var(--lt-ink); }
@media (max-width: 991.98px) {
    .lt-gantry { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-inline: 0; }
    .lt-gantry::before, .lt-gantry::after, .lt-gantry__beam { display: none; }
    /* Stacked: each sign is mounted over the top edge of its own stretch of road. */
    .lt-lane__sign { justify-self: start; grid-auto-flow: column; align-items: center; gap: 14px; min-block-size: 0; margin-inline: 16px; padding: 14px 20px; }
    .lt-lane__title { font-size: 20px; }
    .lt-lane__arrow { inline-size: 16px; block-size: 20px; }
    .lt-lane__body { margin-top: -26px; padding: 48px 22px 26px; border-radius: var(--lt-r); }
    .lt-lane__body::before, .lt-lane:first-of-type .lt-lane__body::before { inset: auto 22px 12px; inline-size: auto; block-size: 3px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .85) 0 22px, transparent 22px 44px); }
    .lt-lane:last-of-type .lt-lane__body::after { display: none; }
    .lt-lane__link { margin-bottom: 14px; }
}
/* Phones: the lane signs line up across the top as tabs and only the chosen lane shows below (JS adds .is-tabs;
   without it the lanes stay stacked). The chosen sign is lit; the others are shown in reverse, blue on white. */
@media (max-width: 767.98px) {
    .lt-gantry.is-tabs { grid-template-columns: repeat(var(--lt-lanes, 3), minmax(0, 1fr)); gap: 0 8px; }
    .lt-gantry.is-tabs .lt-lane { display: contents; }
    .lt-gantry.is-tabs .lt-lane__sign { grid-row: 1; justify-self: stretch; grid-auto-flow: row; justify-items: center; align-content: center; gap: 6px; min-block-size: 78px; margin: 0; padding: 10px 6px 9px; background: #FFFFFF; box-shadow: inset 0 0 0 2px var(--lt-blue); color: var(--lt-blue); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s var(--lt-ease), color .2s var(--lt-ease); }
    .lt-gantry.is-tabs .lt-lane__sign.is-active { background: var(--lt-blue); box-shadow: var(--lt-sign-rule); color: #FFFFFF; }
    .lt-gantry.is-tabs .lt-lane__title { color: inherit; font-size: 14.5px; line-height: 1.45; }
    [dir="ltr"] .lt-gantry.is-tabs .lt-lane__title { font-size: 14px; line-height: 1.25; }
    .lt-gantry.is-tabs .lt-lane__arrow { inline-size: 12px; block-size: 15px; visibility: hidden; }
    .lt-gantry.is-tabs .lt-lane__sign.is-active .lt-lane__arrow { visibility: visible; }
    .lt-gantry.is-tabs .lt-lane__body { grid-row: 2; grid-column: 1 / -1; margin-top: 12px; padding: 26px 20px 28px; }
    .lt-gantry.is-tabs .lt-lane__body[hidden] { display: none; }
}

/* 10. Services: a roadside services board — blue sign, white pictogram plates ----------------------------- */
.lt-board { display: flex; flex-direction: column; }
.lt-board__face { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 14px; list-style: none; border-radius: var(--lt-r-sign); background: var(--lt-blue); box-shadow: var(--lt-sign-rule); color: #FFFFFF; }
.lt-board__item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 20px; padding: clamp(22px, 2.4vw, 34px); transition: background-color .2s var(--lt-ease); }
/* White rules between the panels, like the dividers on a real sign. */
.lt-board__item:not(:nth-child(3n + 1)) { border-inline-start: 2px solid rgba(255, 255, 255, .55); }
.lt-board__item:nth-child(n + 4) { border-top: 2px solid rgba(255, 255, 255, .55); }
.lt-board__item:hover, .lt-board__item:focus-within { background: var(--lt-blue-700); }
.lt-board__plate { display: grid; place-items: center; inline-size: 68px; block-size: 68px; border-radius: 8px; background: #FFFFFF; color: var(--lt-blue); }
.lt-board__plate svg { inline-size: 38px; block-size: 38px; stroke-width: 1.75; }
.lt-board__name { margin: 2px 0 6px; font-size: clamp(19px, 1.6vw, 23px); font-weight: 700; line-height: 1.45; }
.lt-board__name a { color: #FFFFFF; text-decoration: none; }
.lt-board__name a::after { content: ""; position: absolute; inset: 0; }
.lt-board__desc { margin: 0 0 12px; font-size: 15.5px; line-height: 1.75; color: var(--lt-blue-on); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lt-board__more { font-size: 14.5px; font-weight: 600; color: #FFFFFF; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .45em; }
.lt-board__item:hover .lt-board__more { text-decoration-color: var(--lt-amber); }
/* The board stands on two posts over a strip of road that closes the section. */
.lt-board__posts { padding-inline: 24%; block-size: clamp(30px, 4vw, 56px); }
.lt-services { padding-bottom: 18px; }
.lt-services::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; block-size: 18px; background-color: var(--lt-asphalt); background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .8) 0 26px, transparent 26px 52px); background-size: 100% 2px; background-position: 0 50%; background-repeat: no-repeat; }
@media (max-width: 991.98px) {
    .lt-board__face { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lt-board__item:not(:nth-child(3n + 1)) { border-inline-start: 0; }
    .lt-board__item:nth-child(even) { border-inline-start: 2px solid rgba(255, 255, 255, .55); }
    .lt-board__item:nth-child(n + 3) { border-top: 2px solid rgba(255, 255, 255, .55); }
}
/* Phones: a real roadside services sign — pictogram plates with their names in two columns; the descriptions
   wait on each service page. */
@media (max-width: 575.98px) {
    .lt-board__face { padding: 10px; }
    .lt-board__item { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 10px; padding: 20px 8px 18px; text-align: center; }
    .lt-board__plate { inline-size: 50px; block-size: 50px; border-radius: 7px; }
    .lt-board__plate svg { inline-size: 29px; block-size: 29px; }
    .lt-board__name { margin: 0; font-size: 15.5px; line-height: 1.5; }
    [dir="ltr"] .lt-board__name { line-height: 1.3; }
    .lt-board__desc, .lt-board__more { display: none; }
}

/* 11. Process: a full-width stretch of highway; km posts on the verge, the step text under the road -------- */
.lt-road { position: relative; --lt-steps: 4; --lt-road-h: 84px; }
.lt-road__track { position: relative; block-size: 204px; }
/* Road and dunes run edge to edge (main clips the overflow); the track itself stays as wide as the container. */
.lt-road__dunes { position: absolute; left: calc(50% - 50vw); bottom: var(--lt-road-h); inline-size: 100vw; block-size: 112px; }
.lt-road__track::before {
    content: "";
    position: absolute;
    left: calc(50% - 50vw);
    bottom: 0;
    inline-size: 100vw;
    block-size: var(--lt-road-h);
    background-color: var(--lt-asphalt);
    background-image:
        linear-gradient(var(--lt-amber), var(--lt-amber)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .9) 0 44px, transparent 44px 88px),
        linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)),
        var(--lt-grain);
    background-size: 100% 4px, 100% 3px, 100% 4px, 120px 120px;
    background-position: 0 10px, 0 50%, 0 calc(100% - 10px), 0 0;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}
/* Travelled distance repaints the lane line in amber behind the truck. */
.lt-road__fill { position: absolute; left: calc(50% - 50vw); bottom: calc(var(--lt-road-h) / 2 - 1.5px); z-index: 1; inline-size: 100vw; block-size: 3px; background: var(--lt-amber); transform: scaleX(0); transform-origin: left center; }
[dir="rtl"] .lt-road__fill { transform-origin: right center; }
.lt-road__truck { position: absolute; left: 0; bottom: 20px; z-index: 3; inline-size: 214px; }
.lt-road__truck .lt-truck { display: block; inline-size: 100%; margin-bottom: -4.0625%; }
.lt-road__steps { display: grid; grid-template-columns: repeat(var(--lt-steps), minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; padding-inline-start: 86px; list-style: none; }
.lt-road__step { position: relative; padding-top: 28px; }
.lt-road__step > * { transition: opacity .4s var(--lt-ease); }
/* Km post: stands on the verge behind the truck, its leg planted at the road's edge. */
.lt-road__post { position: absolute; top: calc(-1 * var(--lt-road-h) - 84px); inset-inline-start: 0; z-index: 2; display: grid; place-items: center; inline-size: 46px; block-size: 54px; border: 2px solid var(--lt-ink); border-radius: var(--lt-r); background: #FFFFFF; color: var(--lt-ink); font: 700 23px/1 var(--lt-font-display); transition: background-color .35s var(--lt-ease), color .35s var(--lt-ease), border-color .35s var(--lt-ease); }
.lt-road__post::before { content: ""; position: absolute; top: calc(100% + 2px); inset-inline-start: calc(50% - 2px); inline-size: 4px; block-size: 30px; background: var(--lt-steel); }
.lt-road__title { margin: 0 0 6px; font-size: clamp(19px, 1.6vw, 23px); font-weight: 700; line-height: 1.5; }
.lt-road__desc { margin: 0; max-width: 34ch; font-size: 16px; line-height: 1.75; color: var(--lt-muted); }
/* Steps the truck has not reached yet are dimmed (text only, so the post stays solid). */
.lt-road.is-ready .lt-road__step:not(.is-active) > :not(.lt-road__post) { opacity: .5; }
.lt-road.is-ready .lt-road__step:not(.is-active) .lt-road__post { border-color: var(--lt-line-strong); color: var(--lt-muted); }
.lt-road__step.is-active .lt-road__post { background: var(--lt-blue); border-color: var(--lt-blue); color: #FFFFFF; }
@media (max-width: 991.98px) {
    /* Stacked: the road runs down the start edge with the posts standing on it. */
    .lt-road__track { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 44px; block-size: auto; }
    .lt-road__dunes, .lt-road__truck { display: none; }
    .lt-road__track::before {
        inset: 0;
        inline-size: auto;
        block-size: auto;
        background-image:
            linear-gradient(var(--lt-amber), var(--lt-amber)),
            repeating-linear-gradient(180deg, rgba(255, 255, 255, .85) 0 22px, transparent 22px 44px),
            var(--lt-grain);
        background-size: 3px 100%, 3px 100%, 120px 120px;
        background-position: 7px 0, 50% 0, 0 0;
        background-repeat: no-repeat, no-repeat, repeat;
    }
    .lt-road__fill { left: 50%; bottom: auto; top: 0; inline-size: 3px; block-size: 100%; margin-left: -1.5px; transform: scaleY(0); transform-origin: center top; }
    [dir="rtl"] .lt-road__fill { transform-origin: center top; }
    .lt-road__steps { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-inline-start: 72px; }
    .lt-road__step { padding-top: 0; }
    .lt-road__post { top: -4px; inset-inline-start: -72px; inline-size: 44px; block-size: 50px; font-size: 21px; }
    .lt-road__post::before { display: none; }
    .lt-road__title { margin-top: 2px; }
    .lt-road__desc { max-width: none; }
}

/* 12. Fleet: a truck picker (the booking step) — options on one side, the chosen truck in its bay on the other */
.lt-picker { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.lt-picker__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lt-picker__option { position: relative; display: grid; gap: 10px; padding: 16px 16px 14px; border: 1.5px solid var(--lt-line-strong); border-radius: var(--lt-r); background: #FFFFFF; color: var(--lt-ink); text-align: start; cursor: pointer; transition: border-color .2s var(--lt-ease), background-color .2s var(--lt-ease); }
.lt-picker__option:hover { border-color: var(--lt-ink); }
/* Radio mark in the corner: this is a choice, not a card. */
.lt-picker__option::before { content: ""; position: absolute; top: 12px; inset-inline-end: 12px; inline-size: 18px; block-size: 18px; border: 2px solid var(--lt-line-strong); border-radius: 50%; background: #FFFFFF; }
.lt-picker__option.is-active { border-color: var(--lt-blue); box-shadow: inset 0 0 0 1px var(--lt-blue); background: #F4F8FC; }
.lt-picker__option.is-active::before { border-color: var(--lt-blue); background: radial-gradient(circle, var(--lt-blue) 0 4.5px, #FFFFFF 5px); }
.lt-picker__thumb { display: block; inline-size: min(100%, 150px); padding-bottom: 5px; border-bottom: 2px solid var(--lt-ink); overflow: hidden; }
.lt-picker__thumb .lt-truck { display: block; inline-size: 100%; margin-bottom: -4.0625%; transition: --lt-spin-hover .9s var(--lt-ease); }
@media (hover: hover) { .lt-picker__option:hover .lt-truck { --lt-spin-hover: 300deg; } }
.lt-picker__label { font-family: var(--lt-font); font-size: 16.5px; font-weight: 700; line-height: 1.5; }
.lt-picker__option.is-active .lt-picker__label { color: var(--lt-blue); }
.lt-js .lt-picker__panel:not(.is-active) { display: none; }
.lt-picker__panel + .lt-picker__panel { margin-top: 32px; }
.lt-js .lt-picker__panel + .lt-picker__panel { margin-top: 0; }
/* The bay: concrete wall, a strip of road, the truck parked on it. */
.lt-picker__bay { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 52px) 12% 26px; border-radius: var(--lt-r); background: var(--lt-concrete); }
.lt-picker__bay::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; block-size: 54px; background-color: var(--lt-asphalt); background-image: linear-gradient(var(--lt-amber), var(--lt-amber)), repeating-linear-gradient(90deg, rgba(255, 255, 255, .85) 0 34px, transparent 34px 68px), var(--lt-grain); background-size: 100% 3px, 100% 3px, 120px 120px; background-position: 0 8px, 0 68%, 0 0; background-repeat: no-repeat, no-repeat, repeat; }
.lt-picker__truck { position: relative; z-index: 1; }
.lt-picker__truck .lt-truck { display: block; inline-size: 100%; margin-bottom: -4.0625%; }
.lt-picker__name { margin: 22px 0 6px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; line-height: 1.4; }
.lt-picker__use { margin: 0; max-width: 56ch; font-size: 17px; line-height: 1.8; color: var(--lt-lead); }
.lt-picker__cta { margin-top: 18px; }
@media (max-width: 991.98px) {
    .lt-picker { grid-template-columns: minmax(0, 1fr); }
    .lt-picker__options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}
@media (max-width: 575.98px) {
    .lt-picker__option { gap: 8px; padding: 24px 10px 10px; }
    .lt-picker__option::before { top: 8px; inset-inline-end: 8px; inline-size: 14px; block-size: 14px; }
    .lt-picker__option.is-active::before { background: radial-gradient(circle, var(--lt-blue) 0 3px, #FFFFFF 3.5px); }
    .lt-picker__thumb { inline-size: 84%; }
    .lt-picker__label { font-size: 14px; line-height: 1.4; }
    .lt-picker__bay { padding: 24px 8% 22px; }
    .lt-picker__bay::after { block-size: 44px; }
    .lt-picker__name { margin-top: 18px; font-size: 22px; }
    .lt-picker__use { font-size: 15.5px; }
}

/* 13. Platform: a multi-copy waybill; each feature is tabbed to the part of the document it produces ------- */
.lt-platform__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 112px); align-items: center; }
.lt-platform__list { display: grid; margin: 0 0 32px; padding: 0; list-style: none; border-top: 2px solid var(--lt-ink); }
.lt-platform__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--lt-line-strong); }
.lt-platform__item { margin: 2px 0 2px; font-family: var(--lt-font); font-size: 17.5px; font-weight: 700; line-height: 1.5; transition: color .2s var(--lt-ease); }
.lt-platform__list p { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--lt-muted); }
.lt-platform__list li.is-active .lt-platform__item { color: var(--lt-blue); }
/* Index tab: the same tab sits beside a feature and on the edge of its part of the document. */
.lt-doc-tag { display: grid; place-items: center; inline-size: 34px; block-size: 34px; border: 1.5px solid var(--lt-ink); border-radius: var(--lt-r); background: #FFFFFF; color: var(--lt-ink); font-size: 15px; font-weight: 700; line-height: 1; transition: background-color .2s var(--lt-ease); }
.lt-doc-tag svg { inline-size: 20px; block-size: 20px; }
.is-active > .lt-doc-tag { background: var(--lt-amber); }

.lt-waybill { position: relative; isolation: isolate; margin: 0 18px 18px 0; border: 1px solid var(--lt-line-strong); border-radius: var(--lt-r); background: #FFFFFF; color: var(--lt-ink); font-size: 14.5px; line-height: 1.6; }
/* The carbon copies under the top sheet. */
.lt-waybill::before, .lt-waybill::after { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--lt-line-strong); border-radius: var(--lt-r); }
.lt-waybill::before { translate: 9px 9px; background: #FFE9B0; }
.lt-waybill::after { translate: 18px 18px; z-index: -2; background: #DCE3EA; }
.lt-waybill__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 2px solid var(--lt-ink); border-radius: var(--lt-r) var(--lt-r) 0 0; background: #FFFFFF; }
.lt-waybill__head img { block-size: 30px; inline-size: auto; }
.lt-waybill__doc { display: grid; justify-items: end; color: var(--lt-muted); font-size: 13px; font-weight: 600; line-height: 1.4; }
.lt-waybill__doc b { color: var(--lt-ink); font: 700 17px/1.3 var(--lt-font); font-variant-numeric: tabular-nums; direction: ltr; }
.lt-waybill__barcode { inline-size: 112px; block-size: 20px; margin-top: 4px; background: repeating-linear-gradient(90deg, var(--lt-ink) 0 2px, transparent 2px 5px, var(--lt-ink) 5px 6px, transparent 6px 8px, var(--lt-ink) 8px 11px, transparent 11px 13px, var(--lt-ink) 13px 14px, transparent 14px 17px); }
.lt-waybill__zone { position: relative; background: #FFFFFF; transition: background-color .25s var(--lt-ease), box-shadow .25s var(--lt-ease); }
.lt-waybill__zone > .lt-doc-tag { position: absolute; top: 50%; inset-inline-start: -18px; z-index: 2; translate: 0 -50%; }
.lt-waybill__zone.is-active { background: #FFF7E0; box-shadow: inset 0 0 0 2px var(--lt-amber); }
.lt-waybill__route { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); align-items: end; gap: 18px; padding: 20px 22px 20px 30px; padding-inline: 30px 22px; border-bottom: 1px solid var(--lt-line); }
.lt-waybill__route small { display: block; color: var(--lt-muted); font-size: 12.5px; font-weight: 600; }
.lt-waybill__route b { font: 700 26px/1.35 var(--lt-font-display); }
.lt-waybill__arrow { padding-bottom: 6px; color: var(--lt-blue); font-size: 22px; line-height: 1; }
.lt-waybill__stamp { justify-self: end; align-self: center; padding: 4px 12px; border: 2px solid var(--lt-blue); border-radius: 3px; background: #FFFFFF; color: var(--lt-blue); font-size: 14px; font-weight: 700; transform: rotate(-4deg); }
.lt-waybill__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-bottom: 1px solid var(--lt-line); background: #FFFFFF; }
.lt-waybill__fields div { padding: 12px 22px; padding-inline-start: 30px; border-top: 1px solid var(--lt-line); }
.lt-waybill__fields div:nth-child(-n + 2) { border-top: 0; }
.lt-waybill__fields div:nth-child(odd) { border-inline-end: 1px solid var(--lt-line); }
.lt-waybill__fields div:nth-child(even) { padding-inline-start: 22px; }
.lt-waybill__fields dt { color: var(--lt-muted); font-size: 12.5px; font-weight: 600; }
.lt-waybill__fields dd { margin: 0; font-weight: 600; }
.lt-waybill__timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 18px 22px; padding-inline-start: 30px; list-style: none; border-bottom: 1px solid var(--lt-line); }
.lt-waybill__timeline li { position: relative; padding-top: 18px; color: var(--lt-muted); font-size: 13px; font-weight: 600; line-height: 1.45; }
.lt-waybill__timeline li::before { content: ""; position: absolute; top: 2px; inset-inline: 0; block-size: 4px; background: var(--lt-line-strong); }
.lt-waybill__timeline li.is-done::before { background: var(--lt-blue); }
.lt-waybill__timeline li.is-now::before { background: var(--lt-amber); }
.lt-waybill__timeline li.is-done, .lt-waybill__timeline li.is-now { color: var(--lt-ink); }
.lt-waybill__timeline time { display: block; color: var(--lt-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.lt-waybill__pod, .lt-waybill__files { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 15px 22px; padding-inline-start: 30px; font-size: 13.5px; }
.lt-waybill__pod { border-bottom: 1px solid var(--lt-line); }
.lt-waybill__files { border-radius: 0 0 var(--lt-r) var(--lt-r); }
.lt-waybill__pod > span:nth-of-type(2), .lt-waybill__files > span:nth-of-type(2) { font-weight: 700; }
.lt-waybill__sign { padding-bottom: 4px; border-bottom: 1px dashed var(--lt-line-strong); color: var(--lt-muted); font-weight: 400 !important; }
.lt-waybill__files ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lt-waybill__files li { padding: 2px 9px; border: 1px solid var(--lt-line-strong); border-radius: 3px; background: #FFFFFF; font-size: 12.5px; font-weight: 600; }
@media (max-width: 991.98px) { .lt-platform__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575.98px) {
    .lt-waybill { margin: 0 10px 10px 12px; font-size: 13.5px; }
    .lt-waybill::before { translate: 5px 5px; }
    .lt-waybill::after { translate: 10px 10px; }
    .lt-waybill__head { padding: 14px 16px; }
    .lt-waybill__head img { block-size: 24px; }
    .lt-waybill__barcode { inline-size: 84px; }
    .lt-waybill__route { grid-template-columns: auto auto auto; gap: 12px; padding: 16px; padding-inline-start: 26px; }
    .lt-waybill__route b { font-size: 21px; }
    .lt-waybill__stamp { grid-column: 1 / -1; justify-self: start; }
    .lt-waybill__fields div, .lt-waybill__fields div:nth-child(even) { padding: 10px 16px; }
    .lt-waybill__fields div:nth-child(odd) { padding-inline-start: 26px; }
    .lt-waybill__timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; padding: 16px; padding-inline-start: 26px; }
    .lt-waybill__pod, .lt-waybill__files { padding: 13px 16px; padding-inline-start: 26px; }
    .lt-waybill__zone > .lt-doc-tag { inset-inline-start: -15px; inline-size: 30px; block-size: 30px; }
}

/* 14. Driver app: the driver's seat — windscreen, road ahead, the phone on its dashboard mount ------------ */
.lt-app__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
/* Feature rows switch the phone screen (first four); the lane mark turns amber on the one in view. */
.lt-app__features { margin: 0 0 34px; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .2); }
.lt-app__features li { position: relative; padding: 15px 0; padding-inline-start: 34px; border-bottom: 1px solid rgba(255, 255, 255, .2); color: var(--lt-on-dark); font-size: 17.5px; font-weight: 500; line-height: 1.6; transition: color .2s var(--lt-ease); }
.lt-app__features li[data-lt-doc-key] { cursor: pointer; }
.lt-app__features li::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; inline-size: 18px; block-size: 3px; margin-top: -1.5px; background: #5A6676; transition: background-color .2s var(--lt-ease), inline-size .2s var(--lt-ease); }
.lt-app__features li.is-active { color: #FFFFFF; font-weight: 600; }
.lt-app__features li.is-active::before { inline-size: 24px; background: var(--lt-amber); }
.lt-app__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lt-store { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 18px; border: 1.5px solid rgba(255, 255, 255, .75); border-radius: var(--lt-r); color: #FFFFFF; text-decoration: none; transition: background-color .2s var(--lt-ease), color .2s var(--lt-ease); }
.lt-store:hover { background: #FFFFFF; color: var(--lt-ink); }
.lt-store svg { inline-size: 26px; block-size: 26px; }
.lt-store span { display: flex; flex-direction: column; font-size: 16px; font-weight: 700; line-height: 1.2; }
.lt-store small { font-size: 11.5px; font-weight: 500; opacity: .8; }

.lt-cab { position: relative; inline-size: 100%; max-inline-size: 560px; margin-inline: auto; aspect-ratio: 560 / 520; }
.lt-cab__view { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.lt-cab .lt-phone { position: absolute; right: 5.5%; bottom: 4.5%; }

.lt-phone { inline-size: 244px; padding: 9px; border-radius: 34px; background: #05080C; box-shadow: inset 0 0 0 2px #3A4556; }
.lt-phone__screen { min-block-size: 428px; padding: 18px 13px 13px; border-radius: 26px; background: var(--lt-concrete); color: var(--lt-ink); display: flex; }
.lt-phone__view { display: none; flex: 1; flex-direction: column; gap: 10px; min-inline-size: 0; }
.lt-phone__view.is-active { display: flex; }
.lt-phone__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid var(--lt-line-strong); }
.lt-phone__bar b { font-size: 14.5px; font-weight: 700; }
.lt-phone__bar span { padding: 2px 8px; border-radius: 3px; background: var(--lt-amber); color: var(--lt-ink); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.lt-phone__card { display: grid; gap: 3px; padding: 11px 12px; border: 1px solid var(--lt-line); border-radius: var(--lt-r); background: #FFFFFF; font-size: 12.5px; font-weight: 500; line-height: 1.55; color: var(--lt-lead); }
.lt-phone__card small { color: var(--lt-muted); font-size: 11.5px; font-weight: 600; }
.lt-phone__card strong { color: var(--lt-ink); font: 700 19px/1.5 var(--lt-font-display); }
.lt-phone__card b { color: var(--lt-ink); font-weight: 700; }
.lt-phone__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lt-phone__tiles span { display: grid; padding: 9px 11px; border: 1px solid var(--lt-line); border-radius: var(--lt-r); background: #FFFFFF; font-size: 13.5px; line-height: 1.5; }
.lt-phone__tiles small { color: var(--lt-muted); font-size: 11.5px; font-weight: 600; }
.lt-phone__tiles b { font-weight: 700; }
.lt-phone__actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; margin-top: auto; }
.lt-phone__cta, .lt-phone__ghost { display: flex; align-items: center; justify-content: center; gap: 7px; min-block-size: 42px; margin-top: auto; border-radius: var(--lt-r); background: var(--lt-blue); color: #FFFFFF; font-size: 13px; font-weight: 600; }
.lt-phone__actions > * { margin-top: 0; }
.lt-phone__ghost { background: #FFFFFF; color: var(--lt-ink); box-shadow: inset 0 0 0 1.5px var(--lt-ink); }
.lt-phone__cta svg { inline-size: 17px; block-size: 17px; }
.lt-phone__map { display: block; inline-size: 100%; block-size: 176px; border-radius: var(--lt-r); }
.lt-phone__steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lt-phone__steps li { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--lt-r); background: #FFFFFF; color: var(--lt-muted); font-size: 12.5px; font-weight: 600; }
.lt-phone__steps li::before { content: ""; flex: none; inline-size: 12px; block-size: 12px; border: 2px solid var(--lt-line-strong); border-radius: 50%; }
.lt-phone__steps li.is-done { color: var(--lt-ink); }
.lt-phone__steps li.is-done::before { background: var(--lt-blue); border-color: var(--lt-blue); }
.lt-phone__steps li.is-now { color: var(--lt-ink); box-shadow: inset 0 0 0 2px var(--lt-amber); }
.lt-phone__steps li.is-now::before { background: var(--lt-amber); border-color: var(--lt-amber); }
.lt-phone__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lt-phone__photos i { display: grid; place-items: center; aspect-ratio: 1; border: 1.5px dashed var(--lt-line-strong); border-radius: var(--lt-r); background: #FFFFFF; color: var(--lt-muted); }
.lt-phone__photos i.is-done { border: 0; background: var(--lt-blue); color: #FFFFFF; }
.lt-phone__photos svg { inline-size: 22px; block-size: 22px; }
.lt-phone__pod { padding: 8px 12px; border: 1px dashed var(--lt-line-strong); border-radius: var(--lt-r); background: #FFFFFF; color: var(--lt-ink); }
.lt-phone__pod small { color: var(--lt-muted); font-size: 11.5px; }
.lt-phone__pod svg { display: block; inline-size: 100%; block-size: 40px; }
@media (max-width: 991.98px) { .lt-app__grid { grid-template-columns: minmax(0, 1fr); } }
/* Phones: the windscreen becomes a strip above the device so the screen stays full size. */
@media (max-width: 575.98px) {
    .lt-app__features li { padding-block: 13px; font-size: 16px; }
    .lt-cab { aspect-ratio: auto; display: grid; justify-items: center; padding-top: 57%; }
    .lt-cab__view { inset: 0 0 auto; block-size: auto; aspect-ratio: 560 / 372; clip-path: inset(0 0 0 0 round 6px); }
    .lt-cab .lt-phone { position: relative; right: auto; bottom: auto; inline-size: 236px; }
    .lt-phone__screen { min-block-size: 336px; }
    .lt-phone__map { block-size: 140px; }
}

/* 15. Closing call to action: a full-bleed sign band ---------------------------------------------------- */
.lt-cta { position: relative; padding-block: clamp(56px, 7vw, 96px); background: var(--lt-blue); color: #FFFFFF; }
.lt-cta p { color: inherit; }
.lt-cta--asphalt { background: var(--lt-asphalt) var(--lt-grain) 0 0 / 120px 120px repeat; }
.lt-cta__face { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px 56px; padding: clamp(30px, 4.4vw, 60px) clamp(24px, 4.4vw, 64px); border: 2px solid #FFFFFF; border-radius: var(--lt-r-sign); }
.lt-cta--asphalt .lt-cta__face { border-color: var(--lt-amber); }
.lt-cta__title { margin: 0 0 10px; font-size: clamp(28px, 3.5vw, 50px); font-weight: 700; line-height: 1.45; color: #FFFFFF; text-wrap: balance; }
[dir="ltr"] .lt-cta__title { line-height: 1.15; }
.lt-cta__desc { margin: 0; max-width: 58ch; font-size: var(--lt-fs-lead); font-weight: 300; line-height: 1.8; color: var(--lt-blue-on); }
.lt-cta--asphalt .lt-cta__desc { color: var(--lt-on-dark); }
.lt-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 991.98px) { .lt-cta__face { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575.98px) { .lt-cta__actions .lt-btn { flex: 1 1 100%; } }

/* 16. Text + visual, and the illustrations ------------------------------------------------------------ */
.lt-split__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 104px); align-items: center; }
.lt-split--reverse .lt-split__copy { order: 2; }
.lt-split__points { margin-bottom: 32px; font-weight: 500; }
.lt-split__img { display: block; inline-size: 100%; border-radius: var(--lt-r); }
.lt-visual { position: relative; margin: 0; border-radius: var(--lt-r); background: var(--lt-concrete); }
.lt-visual--device { display: flex; justify-content: center; padding: 32px 16px; background: var(--lt-asphalt) var(--lt-grain) 0 0 / 120px 120px repeat; }

/* Strip map */
.lt-visual--strip { padding: 26px 24px 0; }
.lt-strip { display: block; inline-size: 100%; block-size: auto; overflow: visible; direction: ltr; }
.lt-strip__city { fill: var(--lt-ink); font: 600 15px/1 var(--lt-font); }
.lt-strip__km { fill: var(--lt-muted); font: 500 13px/1 var(--lt-font); }
.lt-strip__tag { fill: var(--lt-ink); font: 700 13px/1 var(--lt-font); }
.lt-strip__readout { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 8px -24px 0; border-top: 1px solid var(--lt-line-strong); }
.lt-strip__readout div { padding: 14px 16px; }
.lt-strip__readout div + div { border-inline-start: 1px solid var(--lt-line-strong); }
.lt-strip__readout dt { color: var(--lt-muted); font-size: 12.5px; font-weight: 600; }
.lt-strip__readout dd { margin: 0; font-size: 15.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) {
    .lt-visual--strip { padding: 18px 12px 0; }
    .lt-strip__readout { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: -12px; }
    .lt-strip__readout div:nth-child(3) { border-inline-start: 0; }
    .lt-strip__readout div:nth-child(n + 3) { border-top: 1px solid var(--lt-line-strong); }
}

/* Hub diagram */
.lt-visual--hub { aspect-ratio: 5 / 4; }
.lt-hub__lines { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.lt-hub__lines line { stroke: var(--lt-line-strong); stroke-width: 1.5; }
.lt-hub__center { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; inline-size: 108px; block-size: 108px; border-radius: var(--lt-r-sign); background: var(--lt-blue); box-shadow: var(--lt-sign-rule); }
.lt-hub__center img { inline-size: 60px; block-size: 60px; padding: 6px; border-radius: 8px; background: #FFFFFF; }
.lt-hub__node { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1.5px solid var(--lt-ink); border-radius: var(--lt-r); background: #FFFFFF; color: var(--lt-ink); font-size: 13.5px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.lt-hub__node svg { inline-size: 18px; block-size: 18px; color: var(--lt-blue); }
@media (max-width: 575.98px) {
    .lt-visual--hub { aspect-ratio: 1; }
    .lt-hub__center { inline-size: 80px; block-size: 80px; }
    .lt-hub__center img { inline-size: 46px; block-size: 46px; }
    .lt-hub__node { padding: 5px 8px; font-size: 12px; }
    .lt-hub__node svg { display: none; }
}

/* Verification file */
.lt-visual--file { padding: clamp(24px, 4vw, 48px); }
/* avoid-ai-design-ignore: K4 — the blue top edge is the folder tab of the drawn file, not a card stripe. */
.lt-vfile { position: relative; max-inline-size: 460px; margin-inline: auto; padding: 22px 24px 28px; border: 1px solid var(--lt-line-strong); border-top: 6px solid var(--lt-blue); border-radius: var(--lt-r); background: #FFFFFF; }
.lt-vfile__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid var(--lt-ink); }
.lt-vfile__head b { font: 700 20px/1.4 var(--lt-font-display); }
.lt-vfile__head span { color: var(--lt-muted); font-size: 13px; font-weight: 600; }
.lt-vfile__rows { margin: 0 0 72px; padding: 0; list-style: none; }
.lt-vfile__rows li { display: flex; align-items: center; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--lt-line); font-size: 15px; font-weight: 600; }
.lt-vfile__rows em { margin-inline-start: auto; color: var(--lt-blue); font-size: 12.5px; font-style: normal; font-weight: 700; white-space: nowrap; }
.lt-vfile__stamp { position: absolute; inset-inline-end: 24px; bottom: 22px; padding: 6px 16px; border: 3px double var(--lt-blue); border-radius: var(--lt-r); color: var(--lt-blue); font: 700 16px/1.4 var(--lt-font-display); transform: rotate(-6deg); }
@media (max-width: 991.98px) { .lt-split__grid { grid-template-columns: minmax(0, 1fr); } .lt-split--reverse .lt-split__copy { order: 0; } }

/* 17. Features: spec columns, document checklist ---------------------------------------------------- */
.lt-cols { display: grid; grid-template-columns: repeat(var(--lt-cols, 3), minmax(0, 1fr)); gap: 44px clamp(28px, 3.4vw, 56px); }
.lt-cols-2 { --lt-cols: 2; }
.lt-cols-3 { --lt-cols: 3; }
.lt-cols-4 { --lt-cols: 4; }
.lt-col { padding-top: 20px; border-top: 2px solid var(--lt-ink); }
.lt-col__title { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: var(--lt-fs-h3); font-weight: 700; line-height: 1.5; }
.lt-col__title svg { flex: none; inline-size: 24px; block-size: 24px; color: var(--lt-blue); }
.lt-col__desc { margin: 0; font-size: 16px; line-height: 1.8; color: var(--lt-muted); }
.lt-features--dark .lt-col { border-top-color: var(--lt-amber); }
.lt-features--dark .lt-col__title { color: #FFFFFF; }
.lt-features--dark .lt-col__title svg { color: var(--lt-amber); }
.lt-features--dark .lt-col__desc { color: var(--lt-on-dark); }
.lt-checkdoc { display: grid; grid-template-columns: repeat(var(--lt-cols, 2), minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--lt-ink); }
.lt-checkdoc__item { display: flex; align-items: flex-start; gap: 16px; padding-block: 22px; border-bottom: 1px solid var(--lt-line); }
.lt-checkdoc__item .lt-box { margin-top: 5px; }
.lt-checkdoc__title { margin: 0 0 4px; font-family: var(--lt-font); font-size: 18px; font-weight: 700; line-height: 1.55; }
.lt-checkdoc__desc { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--lt-muted); }
@media (max-width: 1199.98px) { .lt-cols-4 { --lt-cols: 2; } }
@media (max-width: 991.98px) { .lt-cols-3 { --lt-cols: 2; } }
@media (max-width: 575.98px) { .lt-cols.lt-cols-2, .lt-cols.lt-cols-3, .lt-cols.lt-cols-4, .lt-checkdoc.lt-cols-2, .lt-checkdoc.lt-cols-3 { --lt-cols: 1; } }

/* 18. FAQ ------------------------------------------------------------------------------------------------ */
.lt-faq__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 104px); align-items: start; }
.lt-faq__aside { position: sticky; top: calc(var(--lt-header-h) + 32px); }
.lt-faq__aside .lt-head { margin-bottom: 24px; }
.lt-faq__group + .lt-faq__group { margin-top: 48px; }
.lt-faq__group-title { margin: 0 0 10px; color: var(--lt-blue); font-family: var(--lt-font); font-size: 15px; font-weight: 700; }
.lt-faq__group { border-top: 2px solid var(--lt-ink); }
.lt-faq__group-title { padding-top: 14px; }
.lt-faq__item { border-bottom: 1px solid var(--lt-line); }
.lt-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 20px; color: var(--lt-ink); font-size: 18px; font-weight: 600; line-height: 1.6; list-style: none; cursor: pointer; transition: color .2s var(--lt-ease); }
.lt-faq__item summary::-webkit-details-marker { display: none; }
.lt-faq__item summary:hover, .lt-faq__item[open] summary { color: var(--lt-blue); }
.lt-faq__icon { position: relative; flex: none; inline-size: 18px; block-size: 18px; }
.lt-faq__icon::before, .lt-faq__icon::after { content: ""; position: absolute; left: 0; top: 50%; inline-size: 18px; block-size: 2px; margin-top: -1px; background: currentColor; transition: transform .25s var(--lt-ease); }
.lt-faq__icon::after { transform: rotate(90deg); }
.lt-faq__item[open] .lt-faq__icon::after { transform: rotate(0deg); }
.lt-faq__answer { max-width: 70ch; padding: 0 0 22px; color: var(--lt-lead); line-height: 1.9; }
.lt-faq__answer p:last-child { margin-bottom: 0; }
@media (max-width: 991.98px) { .lt-faq__layout { grid-template-columns: minmax(0, 1fr); } .lt-faq__aside { position: static; } }

/* 19. Contact channels ------------------------------------------------------------------------------ */
.lt-channels__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--lt-ink); }
.lt-channel { display: grid; grid-template-columns: 24px minmax(0, 13ch) minmax(0, 1fr); align-items: center; gap: 16px; padding-block: 20px; border-bottom: 1px solid var(--lt-line); color: var(--lt-ink); text-decoration: none; }
.lt-channel svg { inline-size: 24px; block-size: 24px; color: var(--lt-blue); }
.lt-channel__label { font-weight: 700; }
.lt-channel__text { color: var(--lt-muted); font-size: 15px; overflow-wrap: anywhere; }
.lt-channel:hover { color: var(--lt-ink); }
.lt-channel:hover .lt-channel__label { color: var(--lt-blue); text-decoration: underline; text-decoration-color: var(--lt-amber); text-decoration-thickness: 2px; text-underline-offset: .4em; }
@media (max-width: 767.98px) {
    .lt-channels__list { grid-template-columns: minmax(0, 1fr); }
    .lt-channel { grid-template-columns: 24px minmax(0, 1fr); row-gap: 2px; }
    .lt-channel__text { grid-column: 2; }
}

/* 20. Latest articles: editorial list ----------------------------------------------------------------- */
.lt-posts__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; margin-bottom: var(--lt-block); }
.lt-posts__head { align-items: center; }
.lt-posts__head .lt-head { flex: 1; margin: 0; }
/* The articles row is full width, so its heading keeps the lane beside the title like the other wide sections. */
@media (min-width: 576px) {
    .lt-posts__head .lt-head--stack { grid-template-columns: minmax(0, max-content) minmax(72px, 1fr); grid-template-areas: "title lane" "lead lead"; }
    .lt-posts__head .lt-head--stack.lt-head--solo { grid-template-areas: "title lane"; }
    .lt-posts__head .lt-head--stack .lt-head__lane { block-size: calc(var(--lt-fs-h2) * 1.4); margin-top: 0; }
}
.lt-posts__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 clamp(32px, 5vw, 72px); align-items: start; }
.lt-post { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: start; gap: 20px; padding-block: 22px; border-bottom: 1px solid var(--lt-line); }
.lt-post--lead { grid-row: span 3; display: block; padding: 0; border: 0; }
.lt-posts__grid > .lt-post:nth-child(2) { border-top: 2px solid var(--lt-ink); }
.lt-post__media { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--lt-r); background: var(--lt-concrete); }
.lt-post--lead .lt-post__media { aspect-ratio: 16 / 9; margin-bottom: 22px; }
.lt-post__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .6s var(--lt-ease); }
.lt-post:hover .lt-post__media img { transform: scale(1.03); }
.lt-post__meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0 0 6px; color: var(--lt-muted); font-size: 13.5px; }
.lt-post__meta span { color: var(--lt-blue); font-weight: 700; }
.lt-post__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.6; }
.lt-post--lead .lt-post__title { font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; line-height: 1.5; }
.lt-post__title a { color: var(--lt-ink); text-decoration: none; }
.lt-post__title a:hover { color: var(--lt-blue); text-decoration: underline; text-decoration-color: var(--lt-amber); text-decoration-thickness: 2px; text-underline-offset: .35em; }
.lt-post__desc { margin: 10px 0 0; color: var(--lt-muted); }
.lt-posts__grid--single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
@media (max-width: 991.98px) { .lt-posts__grid { grid-template-columns: minmax(0, 1fr); } .lt-post--lead { grid-row: auto; margin-bottom: 18px; } }
@media (max-width: 575.98px) { .lt-post { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; } }

/* 21. Forms: quotation (paper form) and contact ------------------------------------------------------ */
.lt-quote__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.lt-quote__aside { position: sticky; top: calc(var(--lt-header-h) + 32px); }
.lt-quote__perks { font-weight: 500; }
/* Forms are concrete panels with white fields (same as the service question form), no coloured top stripe. */
.lt-form, .contact__form-wrap { padding: clamp(24px, 3.6vw, 44px); border: 0; border-radius: var(--lt-r); background: var(--lt-concrete); box-shadow: none; }
.lt-form__title, .contact__form-wrap > .title { margin: 0 0 6px; color: var(--lt-ink); font-size: clamp(22px, 2vw, 28px); font-weight: 700; }
.lt-form__desc, .contact__form-wrap > p { margin: 0 0 24px; color: var(--lt-muted); font-size: 15px; }
.lt-form .quotation-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.lt-form .quotation-form > * { grid-column: 1 / -1; }
.lt-form .quotation-form > .form-group, .lt-form .quotation-form > [class*="col-"] { grid-column: auto; }
.lt-form .quotation-form .row { margin: 0; }
@media (max-width: 991.98px) { .lt-quote__grid { grid-template-columns: minmax(0, 1fr); } .lt-quote__aside { position: static; } }
@media (max-width: 575.98px) { .lt-form .quotation-form { grid-template-columns: minmax(0, 1fr); } }

.shortcode-contact-form.contact__area { padding-block: var(--lt-section); }
.contact__content .section-title .title { color: var(--lt-ink); font-size: var(--lt-fs-h2); font-weight: 600; line-height: 1.4; }
.contact__content .section-title p { color: var(--lt-lead); font-size: var(--lt-fs-head-lead); font-weight: 400; line-height: 1.85; }
.contact__info .list-wrap { display: grid; gap: 0; margin-top: 28px; border-top: 2px solid var(--lt-ink); }
.contact__info .list-wrap li { display: flex; align-items: flex-start; gap: 16px; margin: 0; padding: 18px 0; border-bottom: 1px solid var(--lt-line); border-radius: 0; background: none; }
.contact__info .list-wrap li .icon { display: grid; place-items: center; inline-size: auto; block-size: auto; flex: none; margin-top: 3px; border-radius: 0; background: none; box-shadow: none; color: var(--lt-blue); }
.contact__info .list-wrap li .icon svg { inline-size: 24px; block-size: 24px; }
.contact__info .content .title { margin: 0 0 2px; color: var(--lt-ink); font-family: var(--lt-font); font-size: 17px; font-weight: 700; }
.contact__info .content p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--lt-muted); }

.contact-form label, .quotation-form label, .contact-form .form-label, .quotation-form .form-label { margin-bottom: 6px; color: var(--lt-ink); font-size: 14.5px; font-weight: 600; }
.contact-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .contact-form select, .contact-form textarea,
.quotation-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .quotation-form select, .quotation-form textarea,
.contact__form-wrap input:not([type="checkbox"]):not([type="radio"]), .contact__form-wrap textarea, .contact__form-wrap select,
.contact__form-wrap form .form-grp textarea, .contact__form-wrap form .form-grp input:not([type="checkbox"]):not([type="radio"]), .contact__form-wrap form .form-grp select, .lt-form form .quotation-form-input {
    inline-size: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid var(--lt-line-strong);
    border-radius: var(--lt-r);
    background: #FFFFFF;
    color: var(--lt-ink);
    font-size: 16px;
    box-shadow: none;
    transition: border-color .2s var(--lt-ease), box-shadow .2s var(--lt-ease);
}
.contact-form textarea, .quotation-form textarea, .contact__form-wrap textarea, .contact__form-wrap form .form-grp textarea { min-height: 140px; max-height: none; resize: vertical; }
.contact-form input:hover, .contact-form select:hover, .contact-form textarea:hover, .quotation-form input:hover, .quotation-form select:hover, .quotation-form textarea:hover { border-color: var(--lt-ink); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus,
.quotation-form input:focus, .quotation-form select:focus, .quotation-form textarea:focus { outline: 0; border-color: var(--lt-blue); box-shadow: inset 0 0 0 1px var(--lt-blue), 0 0 0 3px var(--lt-amber); }
.contact-form ::placeholder, .quotation-form ::placeholder { color: #7A8593; }
.contact-form .form-grp, .quotation-form .form-group { margin-bottom: 16px; }
.contact-form button[type="submit"], .quotation-form .quotation-button { inline-size: 100%; min-height: 56px; margin-top: 6px; font-size: 17px; }
.contact-form .text-danger, .quotation-form .text-danger, .contact-form .invalid-feedback, .quotation-form .invalid-feedback { font-size: 13.5px; }
[dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[name="phone"], [dir="rtl"] input[name="email"] { direction: ltr; text-align: right; }

/* 22. Blog, service detail, sidebar, pagination, legal, 404 ------------------------------------------ */
.blog__area, .blog__details-area, .services__details-area { padding-block: clamp(56px, 7vw, 96px) !important; }
.blog-post-item, .blog__post-item, .blog__post-two, .blog__post-item-two { overflow: hidden; border: 0 !important; border-bottom: 1px solid var(--lt-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--lt-ink) !important; }
.blog-post-item img, .blog__post-item img, .blog__post-thumb img { border-radius: var(--lt-r) !important; }
.blog-post-item .title a, .blog__post-item .title a, .blog__post-content .title a { color: var(--lt-ink) !important; }
.blog-post-item .title a:hover, .blog__post-content .title a:hover { color: var(--lt-blue) !important; }
.blog__details-thumb img, .services__details-thumb img { inline-size: 100%; border-radius: var(--lt-r); }
.blog__details-content .title, .services__details-content .title { color: var(--lt-ink); font-weight: 700; }
.ck-content > p, .ck-content > ul, .ck-content > ol { color: var(--lt-lead); font-size: 17.5px; line-height: 1.95; }
.ck-content > h2, .ck-content > h3, .ck-content > h4 { margin: 1.6em 0 .6em; color: var(--lt-ink); font-weight: 700; }
.ck-content > h2 { font-size: clamp(22px, 2.2vw, 28px); }
.ck-content > h3 { font-size: clamp(19px, 1.8vw, 22px); }
.ck-content > ul, .ck-content > ol { padding-inline-start: 1.3em; }
.ck-content > ul li, .ck-content > ol li { margin-bottom: .45em; }
.ck-content > ul li::marker, .ck-content > ol li::marker { color: var(--lt-blue); }
.ck-content > blockquote { margin: 1.5em 0; padding: 4px 22px; border-inline-start: 4px solid var(--lt-amber); color: var(--lt-ink); background: none; }
.blog__sidebar .sidebar__widget, .services__sidebar .sidebar__widget, .services__sidebar > div, .blog__sidebar > div { border: 0 !important; border-top: 2px solid var(--lt-ink) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.sidebar__widget-title, .services__sidebar .title, .blog__sidebar .title { color: var(--lt-ink); font-weight: 700; }
.services__sidebar .services__cat-list li a, .sidebar-cat-list li a { border-radius: var(--lt-r); }
.services__sidebar .services__cat-list li.active a, .services__sidebar .services__cat-list li a:hover { background: var(--lt-blue); color: #FFFFFF; }
.pagination-wrap .page-link, .pagination .page-link { border-radius: var(--lt-r) !important; color: var(--lt-ink); }
.pagination .page-item.active .page-link { border-color: var(--lt-blue); background: var(--lt-blue); color: #FFFFFF; }

.lt-legal { max-width: 820px; margin: clamp(48px, 6vw, 80px) auto; }
.lt-legal__updated { display: inline-flex; align-items: center; gap: 10px; padding: 0; border-radius: 0; background: none; color: var(--lt-muted); font-size: 14.5px; font-weight: 600; }
.lt-legal__updated::before { content: ""; inline-size: 16px; block-size: 3px; background: var(--lt-amber); }
.lt-legal__item { padding: 28px 0; border-bottom: 1px solid var(--lt-line); }
.lt-legal__item:last-child { border-bottom: 0; }
.lt-legal__item h2 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 12px; color: var(--lt-ink); font-size: 22px; font-weight: 700; }
.lt-legal__num { display: inline; min-inline-size: 1.4em; inline-size: auto; block-size: auto; border-radius: 0; background: none; color: var(--lt-blue); font: 700 22px/1 var(--lt-font-display); flex: none; }
.lt-legal__item p, .lt-legal__item li { font-size: 16.5px; line-height: 1.95; color: var(--lt-lead); }
.lt-legal__item p:last-child { margin-bottom: 0; }

.lt-404__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.lt-404__sign { display: flex; flex-direction: column; inline-size: min(100%, 380px); justify-self: center; }
.lt-404__face { display: grid; justify-items: center; gap: 6px; padding: 30px 24px 26px; border-radius: var(--lt-r-sign); background: var(--lt-amber); box-shadow: inset 0 0 0 6px var(--lt-amber), inset 0 0 0 9px var(--lt-ink); color: var(--lt-ink); }
.lt-404__code { font: 900 clamp(64px, 9vw, 112px)/1 var(--lt-font-display); font-variant-numeric: tabular-nums; }
.lt-404__detour { font: 700 22px/1.4 var(--lt-font-display); }
.lt-404__title { margin: 0 0 12px; font-size: var(--lt-fs-h2); line-height: 1.45; }
.lt-404__text { margin: 0 0 28px; color: var(--lt-lead); font-size: var(--lt-fs-lead); font-weight: 300; }
.lt-404__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 767.98px) { .lt-404__grid { grid-template-columns: minmax(0, 1fr); } .lt-404__sign { inline-size: min(100%, 280px); justify-self: start; } }

/* 23. Footer: the highway at dusk again, then the links as lanes on the asphalt --------------------------- */
.lt-footer { position: relative; background: var(--lt-asphalt) var(--lt-grain) 0 0 / 120px 120px repeat; color: var(--lt-on-dark); text-align: start; }
.lt-footer__top { padding: clamp(44px, 5vw, 64px) 0 36px; }
.lt-footer .wrapper-footer-widgets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; }
.lt-footer .wrapper-footer-widgets > * { position: relative; inline-size: auto; max-width: none; flex: none; padding: 0; }
/* Brand line across the top, closed by a row of lane dashes. */
.lt-footer .widget-information { grid-column: 1 / -1; margin-bottom: 34px; padding-bottom: 34px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 24px, transparent 24px 48px) 0 100% / 100% 2px no-repeat; }
.lt-footer .widget-information .footer-widget { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px 56px; }
.lt-footer .fw-logo { margin: 0 !important; }
.lt-footer .fw-logo img { max-height: 46px !important; width: auto; }
.lt-footer .footer-content p { max-width: 64ch; margin: 0; color: var(--lt-on-dark); font-size: 17px; line-height: 1.8; }
/* Lanes: one per menu, a dashed lane line between neighbours. */
.lt-footer .wrapper-footer-widgets > .col:not(.widget-information) { padding: 4px clamp(20px, 3.4vw, 52px) 10px; }
.lt-footer .wrapper-footer-widgets > .widget-information + .col { padding-inline-start: 0; }
.lt-footer .wrapper-footer-widgets > .col:not(.widget-information) + .col:not(.widget-information)::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: -1.5px; inline-size: 3px; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .6) 0 22px, transparent 22px 44px); }
.lt-footer .fw-title { position: static; margin: 0 0 14px !important; padding: 0 !important; color: var(--lt-amber); font-family: var(--lt-font); font-size: 15px; font-weight: 700; line-height: 1.6; }
.lt-footer .fw-title::before, .lt-footer .fw-title::after { display: none; }
.lt-footer .footer-info-list .list-wrap { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.lt-footer .footer-info-list li { display: flex; align-items: center; gap: 8px; margin: 0; }
.lt-footer .footer-info-list .icon { display: none; }
.lt-footer .footer-info-list a { display: inline-block; padding-block: 5px; color: #FFFFFF; font-size: 16px; font-weight: 500; text-decoration: none; }
.lt-footer .footer-info-list a:hover { color: var(--lt-amber); text-decoration: underline; text-underline-offset: .4em; }
.lt-footer .footer-social .list-wrap { display: flex; gap: 10px; margin-top: 18px; }
.lt-footer .footer-social a { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--lt-r); color: #FFFFFF; }
.lt-footer .footer-social a:hover { border-color: var(--lt-amber); color: var(--lt-amber); }
.lt-footer__contact { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 34px; padding-top: 24px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 24px, transparent 24px 48px) 0 0 / 100% 2px no-repeat; }
.lt-footer__contact a { display: inline-flex; align-items: center; gap: 10px; color: #FFFFFF; font-weight: 500; text-decoration: none; direction: ltr; unicode-bidi: isolate; }
.lt-footer__contact a:hover { color: var(--lt-amber); }
.lt-footer__contact svg { inline-size: 20px; block-size: 20px; color: var(--lt-amber); }
.lt-footer__bottom { padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.lt-footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.lt-footer__bottom .copyright-text, .lt-footer__bottom .copyright-text p { margin: 0; color: #9AA4B0; }
.lt-footer__bottom a { color: var(--lt-on-dark); }
.lt-footer__bottom a:hover { color: var(--lt-amber); }
/* Phones: one centred column; the lane dashes turn into rules between the menus. */
@media (max-width: 767.98px) {
    .lt-footer { text-align: center; }
    .lt-footer__top { padding: 40px 0 16px; }
    .lt-footer .wrapper-footer-widgets { grid-template-columns: minmax(0, 1fr); }
    .lt-footer .widget-information { margin-bottom: 0; padding-bottom: 28px; background: none; }
    .lt-footer .widget-information .footer-widget { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; }
    .lt-footer .fw-logo img { max-height: 40px !important; }
    .lt-footer .footer-content p { margin-inline: auto; font-size: 16px; }
    .lt-footer .wrapper-footer-widgets > .col:not(.widget-information), .lt-footer .wrapper-footer-widgets > .widget-information + .col { padding: 22px 0 18px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 22px, transparent 22px 44px) 0 0 / 100% 2px no-repeat; }
    .lt-footer .wrapper-footer-widgets > .col:not(.widget-information) + .col:not(.widget-information)::before { display: none; }
    .lt-footer .fw-title { margin-bottom: 8px !important; }
    .lt-footer .footer-info-list .list-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 22px; }
    .lt-footer__contact { justify-content: center; }
    .lt-footer__bottom-inner { justify-content: center; text-align: center; line-height: 1.7; }
}

/* 24. Overlays: WhatsApp, cookie notice, scroll-to-top ---------------------------------------------- */
.whatsapp-float { position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 1000; display: grid; place-items: center; inline-size: 56px; block-size: 56px; padding: 0; border-radius: 50%; background: #25D366; color: #FFFFFF; box-shadow: 0 8px 20px -8px rgba(19, 32, 47, .5); }
.whatsapp-float:hover { color: #FFFFFF; background: #1FB757; }
.whatsapp-float svg { inline-size: 30px; block-size: 30px; }
.site-notice { font-family: var(--lt-font) !important; }
.site-notice.site-notice-minimal { inset-inline-start: 20px; inset-inline-end: auto; bottom: 20px; max-width: min(440px, calc(100vw - 40px)); border: 1px solid rgba(255, 255, 255, .16) !important; border-radius: var(--lt-r); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .5); }
.site-notice .site-notice__message { font-size: 14.5px; line-height: 1.7; }
.site-notice .site-notice__message a { color: var(--lt-amber) !important; text-decoration: underline; }
.site-notice button { border-radius: var(--lt-r) !important; font-weight: 600 !important; }
.site-notice .site-notice__agree { padding: 8px 20px; border-color: var(--lt-amber) !important; background: var(--lt-amber) !important; color: var(--lt-ink) !important; }
#preloader { display: none !important; }
.scroll__top { border-radius: var(--lt-r) !important; background: var(--lt-blue) !important; color: #FFFFFF !important; }
.scroll__top:hover { background: var(--lt-ink) !important; }

/* 25. Trucks and motion ---------------------------------------------------------------------------------- */
/* The SVGs carry width/height attributes; the height follows the width so the drawing is not letterboxed. */
.lt-truck { block-size: auto; }
[dir="rtl"] .lt-truck { transform: scaleX(-1); }
/* Wheels spin around their own centre. Scripts drive --lt-spin on the truck <svg> (never the wheels directly),
   hover adds --lt-spin-hover; both are registered so they interpolate and inherit into the wheel groups. */
@property --lt-spin { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --lt-spin-hover { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.lt-wheel { transform-box: fill-box; transform-origin: 50% 50%; rotate: calc(var(--lt-spin, 0deg) + var(--lt-spin-hover, 0deg)); }

/* The hero truck waits off the road until the script drives it in (CSS failsafe after 2.5 s). */
.lt-js [data-lt-hero-truck] { opacity: 0; }
.lt-js:not(.lt-motion-ready) [data-lt-hero-truck] { animation: lt-failsafe .01s 2.5s forwards; }
.lt-motion-ready [data-lt-hero-truck] { opacity: 1; }
@keyframes lt-failsafe { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .lt-js [data-lt-hero-truck] { opacity: 1; }
}

/* 26. Blog listing cards from the template: flat, 4px images, no shine sweep --------------------------- */
.blog__post-two, .blog__post-thumb-two, .blog__post-thumb-two a, .blog__post-thumb-two img { border-radius: var(--lt-r) !important; }
.blog__post-two { padding-bottom: 22px; }
.blog__post-thumb-two { overflow: hidden; margin-bottom: 18px; }
.blog__post-thumb-two img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.shine-animate::before, .shine-animate::after { display: none !important; }
.blog__post-content-two { padding: 0 !important; background: none !important; }
.blog__post-content-two .title { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.55; }
.blog__post-content-two .title a { color: var(--lt-ink); }
.blog__post-content-two .title a:hover { color: var(--lt-blue); }

/* 27. Phones: type scale, spacing and alignment ---------------------------------------------------------- */
@media (max-width: 575.98px) {
    :root { --lt-section: 60px; --lt-block: 30px; --lt-fs-h1: clamp(32px, 9.6vw, 38px); --lt-fs-h2: clamp(25px, 7.2vw, 28px); --lt-fs-lead: 17px; --lt-fs-head-lead: 17px; }
    body { font-size: 16px; line-height: 1.8; }
    [dir="ltr"] .lt-hero__title { font-size: var(--lt-fs-h1); }
    /* Light 300 is too thin at phone sizes; leads go back to regular. */
    .lt-head__lead, .lt-hero__lead, .lt-cta__desc, .lt-404__text, .contact__content .section-title p { font-weight: 400; line-height: 1.8; }
    .lt-hero { padding-top: 32px; }
    .lt-hero__title { margin-bottom: 16px; }
    .lt-hero__lead { margin-bottom: 24px; }
    .lt-hero__actions { margin-bottom: 26px; }
    .lt-hero__facts { font-size: 15px; }
    .lt-hero__sign { justify-self: center; }
    .lt-btn--lg { min-height: 54px; font-size: 16px; }
    .lt-lane__desc { font-size: 15.5px; }
    .lt-lane__points { font-size: 15px; }
    .lt-road__title { font-size: 18px; }
    .lt-road__desc { font-size: 15px; }
    .lt-col__desc, .lt-checkdoc__desc { font-size: 15px; }
    .lt-checkdoc__title { font-size: 17px; }
    .lt-faq__item summary { padding-block: 16px; font-size: 16.5px; }
    .lt-faq__answer { font-size: 15.5px; }
    .lt-post--lead .lt-post__title { font-size: 21px; }
    .lt-post__title { font-size: 16.5px; }
    .lt-cta { padding-block: 44px; }
    .lt-cta__face { padding: 26px 20px; text-align: center; }
    .lt-cta__desc { margin-inline: auto; }
    .lt-pagehead { padding-top: 28px; }
    .lt-pagehead__sign { display: flex; }
    .lt-pagehead__face { padding: 18px 22px 22px; }
    .lt-pagehead__title { font-size: clamp(26px, 8vw, 32px); }
    .lt-crumbs ol { font-size: 13.5px; }
    .ck-content > p, .ck-content > ul, .ck-content > ol { font-size: 16px; line-height: 1.9; }
    .lt-legal__item h2 { font-size: 19px; }
    .lt-legal__item p, .lt-legal__item li { font-size: 15.5px; }
    .lt-form, .contact__form-wrap { padding: 22px 18px; }
    .lt-404__sign { justify-self: center; }
    .lt-404__copy { text-align: center; }
    .lt-404__actions { justify-content: center; }
}
/* Tablets: single-column sections keep their illustration centred. */
@media (max-width: 991.98px) {
    .lt-hero__sign { justify-self: center; }
    .lt-visual { max-inline-size: 560px; margin-inline: auto; inline-size: 100%; }
    .lt-waybill { max-inline-size: 560px; justify-self: center; inline-size: calc(100% - 30px); }
}

/* 28. Home hero with background media (image or looping video, set in the shortcode) ------------------------
   The media fills the stage and is anchored to the bottom, so a road at the foot of the picture stays in view.
   The overlay is the one place a flat scrim is allowed: it keeps white text readable on any uploaded footage. */
.lt-hero--media { padding-top: 0; background: #1B2738; color: #FFFFFF; }
.lt-hero--media .lt-hero__stage {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: start;
    min-block-size: clamp(520px, calc(100svh - var(--lt-header-h) - 52px), 840px);
    padding-block: clamp(40px, 6vh, 84px) calc(14.3vw + 64px);
}
.lt-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #1B2738; }
.lt-hero__media img, .lt-hero__media video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 100%; }
.lt-hero__media video { opacity: 0; transition: opacity .6s var(--lt-ease); }
.lt-hero__media video.is-playing { opacity: 1; }
.lt-hero__media::after { content: ""; position: absolute; inset: 0; background: #0F1722; opacity: var(--lt-hero-overlay, .25); pointer-events: none; }
.lt-hero--overlay-none { --lt-hero-overlay: 0; }
.lt-hero--overlay-light { --lt-hero-overlay: .25; }
.lt-hero--overlay-medium { --lt-hero-overlay: .45; }
.lt-hero--overlay-strong { --lt-hero-overlay: .62; }
.lt-hero--media .lt-hero__grid { align-items: start; }
.lt-hero--media .lt-hero__copy { padding-bottom: 0; }
.lt-hero--media.lt-hero--no-sign .lt-hero__grid { grid-template-columns: minmax(0, 1fr); }
.lt-hero--media.lt-hero--no-sign .lt-hero__copy { max-inline-size: 1000px; }
.lt-hero--media.lt-hero--no-sign .lt-hero__lead { max-width: 62ch; }
/* Without the sign the four facts sit on one line, which keeps the copy clear of the road. */
@media (min-width: 1200px) { .lt-hero--media.lt-hero--no-sign .lt-hero__facts { grid-template-columns: repeat(4, max-content); gap: 10px 32px; } }
.lt-hero--media .lt-hero__title { margin-bottom: 18px; color: #FFFFFF; font-size: clamp(36px, 4.7vw, 70px); }
[dir="ltr"] .lt-hero--media .lt-hero__title { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.14; }
.lt-hero--media .lt-hero__lead { margin-bottom: 26px; }
.lt-hero--media .lt-hero__actions { margin-bottom: 26px; }
.lt-hero--media .lt-hero__lead { color: #DCE2EA; }
.lt-hero--media .lt-hero__facts { color: #FFFFFF; }
/* Optional road sign over the media: its posts run down to the foot of the picture. */
.lt-hero--media .lt-hero__sign { align-self: end; margin-bottom: calc(-14.3vw - 64px); }
.lt-hero--media .lt-gsign__posts { block-size: calc(14.3vw + 130px); }
@media (max-width: 1199.98px) {
    .lt-hero--media .lt-hero__stage { padding-bottom: max(14.3vw + 64px, 250px); }
    .lt-hero--media .lt-hero__sign { display: none; }
    .lt-hero--media .lt-hero__grid { grid-template-columns: minmax(0, 1fr); }
}
/* Phones use the portrait media: copy on the sky, the road stays visible underneath. */
@media (max-width: 767.98px) {
    .lt-hero--media .lt-hero__stage { min-block-size: 0; padding-block: 28px calc(50vw + 96px); }
    .lt-hero--media .lt-hero__title { font-size: var(--lt-fs-h1); margin-bottom: 14px; }
    [dir="ltr"] .lt-hero--media .lt-hero__title { font-size: clamp(27px, 8vw, 33px); }
    .lt-hero--media .lt-hero__lead { margin-bottom: 20px; font-size: 16px; line-height: 1.75; }
    .lt-hero--media .lt-hero__actions { flex-wrap: nowrap; gap: 10px; margin-bottom: 22px; }
    .lt-hero--media .lt-hero__actions .lt-btn { flex: 1 1 0; min-inline-size: 0; min-height: 52px; padding-inline: 10px; font-size: 15px; }
    .lt-hero--media .lt-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; font-size: 14px; }
    .lt-hero--media .lt-hero__facts li { padding-inline-start: 22px; }
    .lt-hero--media .lt-hero__facts li::before { inline-size: 12px; }
}

/* 29. Phones: a calmer, smaller scale; every section opens centred ------------------------------------------
   Section openings (heading, lead and their single link or button) are centred; lists, steps and documents
   below them keep the reading edge so their dashes, posts and icons line up. */
@media (max-width: 575.98px) {
    :root { --lt-section: 52px; --lt-block: 26px; --lt-fs-h1: clamp(28px, 8.2vw, 32px); --lt-fs-h2: clamp(22px, 6.2vw, 24px); --lt-fs-h3: 17px; --lt-fs-lead: 16px; --lt-fs-head-lead: 15.5px; }
    body { font-size: 15.5px; }

    /* Centred: title, lead, then the lane line across with the sign in its middle. */
    .lt-head, .lt-head--solo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "lead" "lane"; justify-items: center; gap: 10px; margin-inline: auto; text-align: center; }
    .lt-head--solo { grid-template-areas: "title" "lane"; }
    .lt-head__lane, [dir="ltr"] .lt-head__lane { justify-self: stretch; block-size: auto; gap: 12px; margin-top: 8px; }
    .lt-head__lane i:last-child { display: block; }
    .lt-head__lane i:first-child { --lt-dash-dir: 270deg; }
    [dir="rtl"] .lt-head__lane i:first-child { --lt-dash-dir: 90deg; }
    .lt-head__sign { inline-size: 30px; block-size: 30px; }
    .lt-heads-motion .lt-head__lane i:first-child { transform: none; }
    .lt-heads-motion .lt-head__lane { opacity: 0; transition: opacity .6s var(--lt-ease); }
    .lt-heads-motion .lt-head.is-in .lt-head__lane { opacity: 1; }
    .lt-head__title { line-height: 1.45; }
    [dir="ltr"] .lt-head__title { line-height: 1.2; }
    .lt-head__lead { line-height: 1.8; }

    .lt-btn { min-height: 46px; padding: 9px 18px; font-size: 14.5px; }
    .lt-btn--lg { min-height: 50px; font-size: 15px; }

    /* Hero */
    .lt-hero { padding-top: 26px; }
    .lt-hero__copy { padding-bottom: 22px; text-align: center; }
    .lt-hero__title { margin-bottom: 12px; }
    .lt-hero__lead { margin: 0 auto 20px; font-size: 15.5px; line-height: 1.8; }
    .lt-hero__actions { margin-bottom: 20px; }
    .lt-hero__facts, .lt-hero--media .lt-hero__facts { grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: center; gap: 8px 20px; font-size: 13.5px; text-align: start; }
    .lt-hero__sign { inline-size: min(100%, 340px); }
    .lt-hero--media .lt-hero__stage { padding-top: 24px; }
    .lt-hero--media .lt-hero__title { margin-bottom: 12px; }
    .lt-hero--media .lt-hero__lead { font-size: 15.5px; }

    /* Audiences */
    .lt-lane__desc { font-size: 15px; line-height: 1.75; }
    .lt-lane__points { gap: 9px; font-size: 14.5px; }
    .lt-lane__body { gap: 14px; }
    .lt-lane__link { min-height: 44px; padding: 8px 18px; font-size: 14.5px; }

    /* Services board */
    .lt-board__name { font-size: 14.5px; }
    .lt-board__plate { inline-size: 46px; block-size: 46px; }
    .lt-board__plate svg { inline-size: 27px; block-size: 27px; }

    /* Process */
    .lt-road__title { font-size: 16.5px; }
    .lt-road__desc { font-size: 14.5px; line-height: 1.7; }
    .lt-road__steps { gap: 28px; }

    /* Fleet picker */
    .lt-picker__name { margin-top: 16px; font-size: 22px; text-align: center; }
    .lt-picker__use { margin-inline: auto; font-size: 15px; text-align: center; }
    .lt-picker__cta { display: table; margin: 14px auto 0; }

    /* Platform */
    .lt-platform__list { margin-bottom: 24px; }
    .lt-platform__list li { gap: 14px; padding: 13px 0; }
    .lt-platform__item { font-size: 15.5px; }
    .lt-platform__list p { font-size: 14px; line-height: 1.7; }
    .lt-platform__copy > .lt-btn { display: flex; inline-size: fit-content; margin-inline: auto; }

    /* Driver app */
    .lt-app__features li { padding-block: 12px; font-size: 15px; }
    .lt-app__actions { justify-content: center; }
    .lt-store { min-height: 48px; padding: 6px 14px; }
    .lt-store span { font-size: 15px; }

    /* Split / features */
    .lt-split__points { margin-bottom: 24px; font-size: 15px; }
    .lt-split__copy > .lt-btn { display: flex; inline-size: fit-content; margin-inline: auto; }
    .lt-col__title { font-size: 16.5px; }
    .lt-col__desc, .lt-checkdoc__desc { font-size: 14.5px; }

    /* FAQ and articles */
    .lt-faq__aside { text-align: center; }
    .lt-faq__item summary { padding-block: 14px; font-size: 15.5px; }
    .lt-faq__answer { font-size: 15px; }
    .lt-posts__head { flex-direction: column; align-items: center; gap: 8px; }
    .lt-post--lead .lt-post__title { font-size: 19px; }
    .lt-post__title { font-size: 15.5px; }

    /* Closing band and page header */
    .lt-cta { padding-block: 36px; }
    .lt-cta__title { font-size: clamp(22px, 6.4vw, 25px); }
    .lt-cta__desc { font-size: 15px; }
    .lt-cta__actions { justify-content: center; }
    .lt-pagehead__title { font-size: clamp(23px, 6.8vw, 27px); }
    [dir="ltr"] .lt-hero--media .lt-hero__title, [dir="ltr"] .lt-hero__title { font-size: clamp(25px, 7.4vw, 29px); }

    /* Short point lists under a centred opening sit as a centred two-column block. */
    .lt-split__points { grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: center; gap: 10px 20px; font-size: 14.5px; }

    /* Feature grids: two columns, pictogram above the name. */
    .lt-cols.lt-cols-2, .lt-cols.lt-cols-3, .lt-cols.lt-cols-4 { --lt-cols: 2; gap: 26px 18px; }
    .lt-col { padding-top: 14px; }
    .lt-col__title { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 6px; font-size: 15px; line-height: 1.5; }
    .lt-col__title svg { inline-size: 22px; block-size: 22px; }
    .lt-col__desc { font-size: 13.5px; line-height: 1.7; }
}

/* 30. Phones: a compact footer — the menus fold into lanes ------------------------------------------------
   Brand line on top, then one lane per menu: the title opens it (button added by loadtruck.js), white lane
   dashes run between the lanes and the open lane gets the amber edge line. Without JS every menu stays open. */
@media (max-width: 767.98px) {
    .lt-footer__top { padding: 30px 0 6px; }
    .lt-footer .widget-information { padding-bottom: 22px; }
    .lt-footer .widget-information .footer-widget { gap: 12px; margin-bottom: 0; }
    .lt-footer .fw-logo img { max-height: 34px !important; }
    .lt-footer .footer-content p { max-width: 36ch; font-size: 14.5px; line-height: 1.8; }

    .lt-footer .wrapper-footer-widgets > .col.is-fold { padding: 0 14px; text-align: start; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .4) 0 22px, transparent 22px 44px) 0 0 / 100% 2px no-repeat; }
    .lt-footer .wrapper-footer-widgets > .col.is-fold:last-child { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .4) 0 22px, transparent 22px 44px) 0 0 / 100% 2px no-repeat, repeating-linear-gradient(90deg, rgba(255, 255, 255, .4) 0 22px, transparent 22px 44px) 0 100% / 100% 2px no-repeat; }
    .lt-footer .wrapper-footer-widgets > .col.is-fold::after { content: ""; position: absolute; inset-block: 14px; inset-inline-start: 0; inline-size: 3px; background: var(--lt-amber); opacity: 0; transition: opacity .2s var(--lt-ease); }
    .lt-footer .wrapper-footer-widgets > .col.is-open::after { opacity: 1; }
    .lt-footer .col.is-fold .fw-title { margin: 0 !important; }
    .lt-fold { display: flex; align-items: center; justify-content: space-between; gap: 12px; inline-size: 100%; min-block-size: 54px; padding: 0; border: 0; background: none; color: #FFFFFF; font: inherit; font-size: 15.5px; font-weight: 600; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .lt-footer .col.is-open .lt-fold { color: var(--lt-amber); }
    .lt-fold:focus-visible { outline: 2px solid var(--lt-amber); outline-offset: 2px; }
    .lt-fold__icon { position: relative; flex: none; inline-size: 14px; block-size: 14px; color: var(--lt-amber); }
    .lt-fold__icon::before, .lt-fold__icon::after { content: ""; position: absolute; left: 0; top: 50%; inline-size: 14px; block-size: 2px; margin-top: -1px; background: currentColor; transition: transform .25s var(--lt-ease); }
    .lt-fold__icon::after { transform: rotate(90deg); }
    .lt-footer .col.is-open .lt-fold__icon::after { transform: rotate(0deg); }
    .lt-footer .col.is-fold:not(.is-open) .footer-info-list { display: none; }
    .lt-footer .col.is-fold .footer-info-list .list-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; padding-bottom: 14px; }
    .lt-footer .col.is-fold .footer-info-list a { padding-block: 7px; color: var(--lt-on-dark); font-size: 14.5px; }
    .lt-footer__bottom { padding: 16px 0 18px; border-top: 0; }
    .lt-footer__bottom-inner { font-size: 12.5px; }
    .lt-footer__bottom .copyright-text { text-wrap: balance; }
}
@media (max-width: 575.98px) {
    /* The waybill keeps every part, at nine-tenths size. */
    .lt-waybill { zoom: .9; }
    /* Driver app: the phone sits a little lower on the windscreen and a size smaller. */
    .lt-cab { padding-top: 50%; }
    .lt-cab .lt-phone { inline-size: 224px; }
    .lt-phone__screen { min-block-size: 318px; padding: 16px 12px 12px; }
}

/* 31. Inner pages: service detail, articles and legal text ------------------------------------------------- */
.lt-service__lead { margin: 0 0 28px; max-width: 62ch; color: var(--lt-ink); font-size: clamp(18px, 1.4vw, 21px); line-height: 1.8; }
.services__details-thumb { margin-bottom: 34px; }
:is(.services__details-content, .blog__details-content) .ck-content :is(h2, h3) { margin: 34px 0 12px; color: var(--lt-ink); font-family: var(--lt-font-display); font-size: clamp(20px, 1.7vw, 24px); font-weight: 600; line-height: 1.45; }
/* Lists in long-form text use the same lane-mark dash as every other list on the site. */
:is(.services__details-content .ck-content, .blog__details-content .ck-content, .lt-legal__item) ul { display: grid; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
:is(.services__details-content .ck-content, .blog__details-content .ck-content, .lt-legal__item) ul > li { position: relative; margin: 0; padding-inline-start: 28px; list-style: none; }
:is(.services__details-content .ck-content, .blog__details-content .ck-content, .lt-legal__item) ul > li::before { content: ""; position: absolute; inset-inline-start: 0; top: .9em; inline-size: 16px; block-size: 3px; background: var(--lt-amber); }
/* Sidebars: the template's short blue underline under widget titles goes; the service question form becomes a
   concrete panel that stays in view beside the text. */
.sidebar__widget-title::before, .sidebar__widget-title::after { display: none !important; }
.services__sidebar .sidebar__widget { padding: 26px 24px 24px !important; border-top: 0 !important; border-radius: var(--lt-r) !important; background: var(--lt-concrete) !important; }
.services__sidebar .sidebar__widget-title { margin: 0 0 16px; padding: 0; font-size: 20px; font-weight: 600; line-height: 1.45; }
.services__sidebar .contact-form-row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
.services__sidebar .contact-form button[type="submit"] { inline-size: 100%; }
@media (min-width: 992px) { .services__details-wrap .col-30 { position: sticky; top: calc(var(--lt-header-h) + 24px); align-self: flex-start; } }
@media (max-width: 575.98px) {
    /* The contact form's own heading opens centred like every other section. */
    .contact__content .section-title { text-align: center; }
    /* On phones the lane runs under every heading, so it stands in for a ruled list's own top rule. */
    .lt-head:has(+ .lt-channels__list) { margin-bottom: 6px; }
    .lt-head + .lt-channels__list { border-top: 0; }
    /* A short perks list under a centred opening sits centred as a block. */
    .lt-head + .lt-dashlist { inline-size: fit-content; margin-inline: auto; }
}

/* 32. Accessibility pass (2026-10-01) ----------------------------------------------------------------------
   The template's a:focus / .btn:focus / button:focus { outline: none } outranked the focus ring above, so the
   ring is restated with enough weight to win; radius is left alone. */
html body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--lt-ink) !important; outline-offset: 3px !important; box-shadow: 0 0 0 3px var(--lt-amber) !important; }
html body :is(.lt-section--asphalt, .lt-footer, .lt-cta, .lt-pagehead__face, .lt-hero--media) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: #FFFFFF !important; }
/* Menu controls are real buttons now: strip the browser button look, keep the template's placement. */
.tgmenu__nav .mobile-nav-toggler { padding: 0; font: inherit; appearance: none; }
.tgmobile__menu .close-btn { padding: 0; border: 0; background: none; appearance: none; }
/* Muted text on light grounds stays at 4.5:1 or better. */
.sidebar__post-content .date, .sidebar__post-content time, .fob-comment-form-note { color: var(--lt-muted) !important; }
/* Small text links get a taller hit area (24px minimum). */
.lt-footer__bottom a, .lt-crumbs a { display: inline-block; padding-block: 3px; }
/* Pictures keep their box while they load, so nothing below them jumps. */
.services__details-thumb img, .blog__details-thumb img { inline-size: 100%; aspect-ratio: 850 / 480; object-fit: cover; }
.sidebar__post-thumb img { aspect-ratio: 1; object-fit: cover; }
/* Skip link: hidden until focused, then a sign-blue tab at the top start corner. */
.lt-skip { position: absolute; inset-inline-start: 12px; top: -100px; z-index: 10000; transition: none !important; padding: 10px 18px; border-radius: var(--lt-r); background: var(--lt-blue); color: #FFFFFF; font-weight: 600; text-decoration: none; }
.lt-skip:focus { top: 12px; color: #FFFFFF; }
main#main-content:focus { outline: none; }
/* Taps act at once (no double-tap zoom delay) on controls. */
a, button, summary, select, label, [role="tab"] { touch-action: manipulation; }
/* Phones: form fields at 16px so iOS does not zoom the page on focus; every field at least 46px tall. */
@media (max-width: 767.98px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { font-size: 16px !important; }
    :is(.comment-form, .fob-comment-form, .blog__sidebar, .services__sidebar) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) { min-block-size: 46px; }
}
/* Contact form rows pair up evenly: name | email, phone | subject. */
@media (min-width: 768px) { .contact-form-row > .contact-field-subject_wrapper { flex: 0 0 50%; max-width: 50%; } }

/* 33. Motion v2 (2026-10-01) ----------------------------------------------------------------------------------
   Small physical cues taken from the road and the paperwork, each played once: page-to-page transitions that keep
   the header and turn the page-header sign over, gantry signs settling onto their beam, service plates turning in
   like tri-vision slats, the waybill stamped "in transit" with a scan across its barcode, smooth answers in the
   FAQ and folds in the phone footer, and a reading-progress lane line on articles.
   Rules: transform / opacity only (plus block-size for the native disclosure), Material-standard or pop easing,
   nothing hidden unless JS has added .lt-motion-on, and all of it off under prefers-reduced-motion. */
:root { --lt-ease-std: cubic-bezier(.2, 0, 0, 1); --lt-ease-pop: cubic-bezier(.16, 1, .3, 1); }

/* The template sets `transition: all .3s` on every link and button; list the properties instead. */
a, button { transition-property: color, background-color, border-color, text-decoration-color, opacity, transform, box-shadow; transition-duration: .18s; transition-timing-function: var(--lt-ease-std); }

@keyframes lt-vt-out { to { opacity: 0; } }
@keyframes lt-vt-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes lt-drop { from { opacity: 0; transform: translateY(-8px); } }
@keyframes lt-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes lt-stamp {
    0% { opacity: 0; transform: scale(1.9) rotate(-16deg); }
    55% { opacity: 1; transform: scale(.94) rotate(-3deg); }
    100% { opacity: 1; transform: scale(1) rotate(-4deg); }
}
@keyframes lt-scan { from { transform: translateX(-6px); opacity: 1; } 90% { opacity: 1; } to { transform: translateX(118px); opacity: 0; } }
@keyframes lt-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(5px); } }
@keyframes lt-ping { from { transform: scale(1); opacity: .7; } to { transform: scale(3); opacity: 0; } }
@keyframes lt-read { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: no-preference) {
    /* Page to page (browsers with cross-document View Transitions): the header stays, the page-header sign keeps
       its place and changes its words, the rest of the page eases in. */
    @view-transition { navigation: auto; }
    #sticky-header { view-transition-name: lt-header; }
    .lt-pagehead__sign { view-transition-name: lt-sign; }
    ::view-transition-old(root) { animation: lt-vt-out .16s var(--lt-ease-std) both; }
    ::view-transition-new(root) { animation: lt-vt-in .34s var(--lt-ease-pop) .04s both; }
    ::view-transition-group(lt-sign) { animation-duration: .4s; animation-timing-function: var(--lt-ease-pop); }
    ::view-transition-old(lt-header), ::view-transition-new(lt-header) { animation-duration: .12s; }

    /* Gantry (wide screens): the lane signs drop onto the beam one after another, then their arrows point down once. */
    @media (min-width: 992px) {
        .lt-motion-on .lt-gantry .lt-lane__sign { opacity: 0; transform: translateY(-18px); }
        .lt-motion-on .lt-gantry.is-in .lt-lane__sign { opacity: 1; transform: none; transition: opacity .35s var(--lt-ease-std), transform .6s var(--lt-ease-pop); transition-delay: calc(var(--i, 0) * 110ms); }
        .lt-motion-on .lt-gantry.is-in .lt-lane__arrow { animation: lt-nudge .6s var(--lt-ease-std) calc(var(--i, 0) * 110ms + .55s) 2; }
    }
    /* Phone gantry tabs and footer folds: the opened panel drops in. */
    .lt-gantry.is-tabs .lt-lane__body:not([hidden]) { animation: lt-drop .3s var(--lt-ease-pop); }
    .lt-footer .col.is-open .footer-info-list { animation: lt-drop .28s var(--lt-ease-pop); }

    /* Services board: each pictogram plate turns in on its vertical axis, in reading order. */
    .lt-board__item { perspective: 600px; }
    .lt-motion-on .lt-board .lt-board__plate { opacity: 0; transform: rotateY(90deg); }
    .lt-motion-on .lt-board.is-in .lt-board__plate { opacity: 1; transform: none; transition: opacity .2s linear, transform .55s var(--lt-ease-pop); transition-delay: calc(var(--i, 0) * 70ms + .1s); }

    /* Waybill: stamped "in transit", and a scan line runs across the barcode. */
    .lt-motion-on .lt-waybill .lt-waybill__stamp { opacity: 0; }
    .lt-motion-on .lt-waybill.is-in .lt-waybill__stamp { animation: lt-stamp .55s var(--lt-ease-pop) .45s both; }
    .lt-waybill__barcode { position: relative; overflow: hidden; }
    .lt-motion-on .lt-waybill.is-in .lt-waybill__barcode::after { content: ""; position: absolute; inset-block: -2px; left: 0; inline-size: 2px; background: #E5484D; box-shadow: 0 0 6px 1px rgba(229, 72, 77, .6); animation: lt-scan .9s linear .15s both; }

    /* Hero trip bar: the "in transit" light pings three times. */
    .lt-trip__status { position: relative; }
    .lt-trip__status::after { content: ""; position: absolute; inset-inline-start: 0; top: 50%; inline-size: 8px; block-size: 8px; margin-top: -4px; border-radius: 50%; background: currentColor; animation: lt-ping 1.6s var(--lt-ease-std) 1.4s 3 both; }

    /* Driver app: a new screen rises into the phone instead of snapping in. */
    .lt-phone__view.is-active { animation: lt-rise .32s var(--lt-ease-pop); }

    /* FAQ: answers open and close smoothly (browsers with ::details-content). */
    @supports selector(::details-content) {
        :root { interpolate-size: allow-keywords; }
        .lt-faq__item::details-content { block-size: 0; overflow-y: clip; transition: block-size .32s var(--lt-ease-std), content-visibility .32s allow-discrete; }
        .lt-faq__item[open]::details-content { block-size: auto; }
    }

    /* Buttons and plates answer a press. */
    .lt-btn:active { transform: scale(.98); }
    .lt-picker__option:active, [data-lt-picker-tab]:active { transform: scale(.98); }
}

/* Reading progress on articles: an amber lane line under the header, scaled by the page scroll (no JS). */
.lt-readbar { display: none; }
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .lt-readbar { display: block; position: fixed; inset-inline: 0; top: 0; z-index: 10001; block-size: 3px; background: var(--lt-amber); transform-origin: left center; animation: lt-read linear both; animation-timeline: scroll(block root); pointer-events: none; }
        [dir="rtl"] .lt-readbar { transform-origin: right center; }
    }
}