/* =====================================================================
   LEAD MARINE — publieke site (BEM-ish, prefix .lm-)
   One on one with the Figma design "Lead Marine website v1 DESIGN": colours and
   typography from the style guide (page 00_design-tile), the components from
   01_components and the page build-up from 02_design.
   Design width 1440 px with a content column of 1124 px (margin 158 px).
   lm-base.css holds the base rules (fonts, body, cookie banner); the admin is Vsi.Cms.
   ===================================================================== */

:root {
    /* Style guide - Colors, sorted by how often they are used, as in the design. */
    --lm-blue: #2589CA;          /* Primary Blue  */
    --lm-black: #020202;         /* Near Black    */
    --lm-navy: #0F172A;          /* Dark Navy     */
    --lm-gray: #D9D9D9;          /* Light Gray    */
    --lm-amber: #F59E0B;         /* Amber         */
    --lm-bg: #FAFAFA;            /* Background    */
    --lm-orange: #EF9035;        /* Orange        */
    --lm-teal: #0F766E;          /* Teal          */

    --lm-font: "Montserrat", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --lm-radius: 8px;
    --lm-container: 1124px;
    --lm-header-height: 112px;
}

/* --- Basis ---------------------------------------------------------- */

.lm-site {
    font-family: var(--lm-font);
    color: var(--lm-black);
    background: #fff;
}

.lm-site *,
.lm-site *::before,
.lm-site *::after {
    box-sizing: border-box;
}

.lm-container {
    width: 100%;
    max-width: var(--lm-container);
    margin-inline: auto;
    padding-inline: 24px;
}

.lm-main {
    display: block;
}

/* Typography from the style guide: H1 36/120, H2 28/120, H3 20/120, body 16/160. */
.lm-h1 {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 24px;
}

.lm-h2 {
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 24px;
}

.lm-h3 {
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 16px;
}

.lm-prose {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
}

.lm-prose p { margin: 0 0 16px; }
.lm-prose p:last-child { margin-bottom: 0; }
.lm-prose ul,
.lm-prose ol { margin: 0 0 16px; padding-left: 20px; }

/* In the design, lists use a small middot (.) tight against the text instead of
   the default browser bullet with its wide indent. */
.lm-prose ul { list-style: none; padding-left: 14px; }
.lm-prose ul > li { position: relative; }
.lm-prose ul > li::before { content: "\00B7"; position: absolute; left: -14px; }
.lm-prose a { color: inherit; text-decoration: underline; }
.lm-prose img { max-width: 100%; height: auto; }
.lm-prose--bold { font-weight: 700; }

/* --- Areas (the background styles from SectionStyles) ---------------- */

.lm-surface--light { background: var(--lm-bg); color: var(--lm-black); }
.lm-surface--white { background: #fff; color: var(--lm-black); }
.lm-surface--navy { background: var(--lm-navy); color: #fff; }
.lm-surface--teal { background: var(--lm-teal); color: #fff; }
.lm-surface--amber { background: var(--lm-amber); color: #fff; }
.lm-surface--blue { background: var(--lm-blue); color: #fff; }

/* On a light background the headings are blue; on a coloured area white.
   One exception from the design: the heading of the service cards block is blue
   on navy as well ("Core Marine Services" on the home page), while a split block
   on navy keeps a white heading ("Heavy Lift Marine Contractor"). */
.lm-surface--light .lm-h2,
.lm-surface--light .lm-h3,
.lm-surface--white .lm-h2,
.lm-surface--white .lm-h3,
.lm-cards.lm-surface--navy .lm-cards__title { color: var(--lm-blue); }

/* --- Buttons (Button components: radius 8 px, height 48 px) ---------- */

.lm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 24px;
    border: 0;
    border-radius: var(--lm-radius);
    font-family: var(--lm-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .05s ease;
}

.lm-btn--primary { background: var(--lm-amber); color: #fff; }
.lm-btn--primary:hover { background: #d98806; color: #fff; }
.lm-btn--primary:active { background: #b8730a; transform: translateY(1px); }

.lm-btn--contact { background: var(--lm-blue); color: #fff; padding-inline: 28px; }
.lm-btn--contact:hover { background: #1c72aa; color: #fff; }
.lm-btn--contact:active { background: #175f8e; transform: translateY(1px); }

.lm-btn--ghost { background: transparent; color: currentColor; box-shadow: inset 0 0 0 2px currentColor; }

/* An amber button on an amber area is invisible; the design puts the blue button
   there (About us, block "Download our Company Profile"). The same applies the
   other way round for the blue Contact button on a blue area - an admin can put
   that combination together in /beheer/paginas/{id}/blokken. */
.lm-surface--amber .lm-btn--primary { background: var(--lm-blue); }
.lm-surface--amber .lm-btn--primary:hover { background: #1c72aa; }
.lm-surface--amber .lm-btn--primary:active { background: #175f8e; }

.lm-surface--blue .lm-btn--contact { background: #fff; color: var(--lm-blue); }
.lm-surface--blue .lm-btn--contact:hover { background: var(--lm-bg); color: var(--lm-blue); }
.lm-surface--blue .lm-btn--contact:active { background: var(--lm-gray); color: var(--lm-blue); }
.lm-btn--lg { min-height: 56px; padding-inline: 32px; }
.lm-btn--submit { min-width: 100px; letter-spacing: .04em; }

/* Two buttons side by side in a block: the view button ("Visit the catalog") on the left of a
   PDF download button (PageSection.ViewButtonText). The text column of a split block is 466 px at
   1440 px and "Visit the catalog" + "Download our Catalogue" with the normal 24 px padding and a
   24 px gap measured 467 px, so they fell below each other. A 16 px gap and 20 px side padding keep
   them on one line with room to spare; on a narrower screen they still wrap, view button first. */
.lm-btnrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.lm-btnrow .lm-btn { padding-inline: 20px; }

/* --- Header --------------------------------------------------------- */

.lm-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #fff;
    box-shadow: 0 1px 0 rgba(2, 2, 2, .06);
}

.lm-header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: var(--lm-header-height);
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: 32px;
}

.lm-header__logo { flex: 0 0 auto; display: inline-flex; }
.lm-header__logo img { height: 78px; width: auto; display: block; }
/* No logo chosen in the settings: the company name keeps the header from being empty. */
.lm-header__wordmark { font-size: 22px; font-weight: 700; color: var(--lm-navy); line-height: 1.2; align-self: center; }

.lm-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 24px;
}

.lm-nav__list {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lm-nav__link {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: var(--lm-black);
    text-decoration: none;
    white-space: nowrap;
}

.lm-nav__link:hover,
.lm-nav__link--active { color: var(--lm-blue); }

/* Menu groups (NavGroup in /beheer/paginas): on a desktop the submenu unfolds under the group name -
   with the mouse and with the tab key, because :focus-within reacts to the links below it. On a
   phone the submenu is open straight away (see the 1200 px block at the bottom). */
.lm-nav__item--group { position: relative; }
.lm-nav__group { cursor: default; }

.lm-nav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 45;
    min-width: 220px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(2, 2, 2, .14);
    /* Deliberately no display:none: a hidden link cannot be reached with the tab key. */
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

.lm-nav__item--group:hover .lm-nav__sub,
.lm-nav__item--group:focus-within .lm-nav__sub { opacity: 1; pointer-events: auto; }

.lm-nav__sublink {
    display: block;
    padding: 10px 16px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--lm-black);
    text-decoration: none;
    white-space: nowrap;
}

.lm-nav__sublink:hover,
.lm-nav__sublink.lm-nav__link--active { color: var(--lm-blue); }

/* Hamburger: pure CSS (checkbox), so the menu works without JavaScript as well. */
.lm-nav__toggle { position: absolute; opacity: 0; pointer-events: none; }
.lm-nav__burger { display: none; }

/* "Only the catalogue" (/beheer/instellingen): no menu, only the Contact button, on the right at every
   width. It is not inside .lm-nav, so the hamburger rules below 1200 px leave it alone. */
.lm-header__contact { margin-left: auto; }

/* --- Hero (homepage) ------------------------------------------------ */

/* The height comes from the page itself ("Height of the header photo" in /beheer/paginas), written
   by LmPageHeader as --lm-headerimage-height. Without that value the design height applies, so a
   page that has never been given a height keeps looking exactly as it does now. */
.lm-hero {
    position: relative;
    min-height: var(--lm-headerimage-height, 835px);
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
}

.lm-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(2, 2, 2, .28);
}

.lm-hero__inner {
    position: relative;
    max-width: var(--lm-container);
    padding: 64px 24px;
}

.lm-hero__title {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 24px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.lm-hero__subtitle {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 700;
    margin: 0 0 48px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.lm-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}

/* --- Page header: photo band with a coloured text band ---------------- */

.lm-pagehead__media {
    position: relative;
    min-height: var(--lm-headerimage-height, 471px);
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

.lm-pagehead__overlay { position: absolute; inset: 0; background: rgba(2, 2, 2, .30); }

.lm-pagehead__title {
    position: relative;
    max-width: var(--lm-container);
    margin: 0;
    padding: 32px 24px;
    color: #fff;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.lm-pagehead__band { padding: 64px 24px; }

.lm-pagehead__intro {
    max-width: var(--lm-container);
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 700;
    text-align: center;
}

.lm-pagetitle { padding: 64px 0 24px; }

/* --- PDF viewer (/document-viewer, js/pdf-viewer.js) ------------------- */
/* A port of the brochure reader of the Marnex website: pdf.js draws one page at a time on a
   canvas, with Previous/Next and a page counter above AND below the page (a portrait page is taller
   than the screen, so a bar only below it is out of sight) and a download button in the top bar. */
.lm-docviewer { padding: 16px 0 80px; }
.lm-docviewer__title { margin-bottom: 24px; }

/* Narrower than the content column: a portrait A4 page at 1124 px would be 1590 px tall. */
.lm-pdf { max-width: 900px; }
.lm-pdf [hidden] { display: none; }

.lm-pdf__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 16px;
}

.lm-pdf__bar--bottom { justify-content: center; margin: 16px 0 0; }

.lm-pdf__pager { display: flex; align-items: center; gap: 12px; }

.lm-pdf__counter {
    min-width: 110px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: var(--lm-navy);
}

/* 48 px high: the touch-target minimum of the house style, same height as .lm-btn. */
.lm-pdf__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 48px;
    min-height: 48px;
    padding: 8px 16px;
    border: 0;
    border-radius: var(--lm-radius);
    background: var(--lm-blue);
    color: #fff;
    font-family: var(--lm-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease;
}

.lm-pdf__nav:hover { background: #1c72aa; }
.lm-pdf__nav[disabled] { background: var(--lm-blue); opacity: .4; cursor: default; }

/* No fixed height: the canvas keeps the proportions of the sheet. */
.lm-pdf__stage {
    min-height: 320px;
    background: #f5f5f5;
    border: 1px solid var(--lm-gray);
}

.lm-pdf--ready .lm-pdf__stage { min-height: 0; }
/* margin auto: on a phone or tablet pdf-viewer.js draws the page narrower, so it fits the screen. */
.lm-pdf__page { display: block; width: 100%; height: auto; margin: 0 auto; }

.lm-pdf__frame {
    display: block;
    width: 100%;
    height: 80vh;
    min-height: 420px;
    border: 0;
}

/* --- Split: half photo next to half text ---------------------------- */

.lm-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.lm-split--imageright .lm-split__media { order: 2; }
.lm-split--imageright .lm-split__content { order: 1; }

.lm-split__media { position: relative; min-height: 460px; overflow: hidden; }

.lm-split__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lm-split__content { display: flex; align-items: center; }

/* The text column of a split: a fixed 158 px outer margin (the page margin of the design at
   1440 px) and 96 px towards the photo. A deliberate deviation from Figma, which uses 96 px
   and 48 px interchangeably on the photo side; here that gap is equal on both sides, so the
   text is the same width in every split block (466 px at 1440 px). Fixed instead of computed:
   the text starts the same distance from the edge on every screen and no longer jumps along
   with the content column. */
.lm-split__inner {
    width: 100%;
    padding: 100px 96px;
}

.lm-split--imageleft .lm-split__inner { padding-right: 158px; }

.lm-split--imageright .lm-split__inner { padding-left: 158px; }

.lm-split .lm-btn { margin-top: 40px; }
.lm-split .lm-btnrow { margin-top: 40px; justify-content: flex-start; }
.lm-split .lm-btnrow .lm-btn { margin-top: 0; }

/* --- Dienstenkaarten (Core Marine Services) ------------------------- */

.lm-cards { padding: 80px 0; }
.lm-cards__title { text-align: center; margin-bottom: 48px; }

.lm-cards__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.lm-card { display: flex; flex-direction: column; }
.lm-card__link { display: block; text-decoration: none; color: inherit; }

.lm-card__img,
.lm-card__img--empty {
    display: block;
    width: 100%;
    aspect-ratio: 211 / 150;
    object-fit: cover;
    background: var(--lm-gray);
}

.lm-card__title {
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
    margin: 24px 0 0;
}

.lm-card__text {
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
    margin: 24px 0 0;
}

.lm-cards__cta { display: flex; justify-content: center; margin-top: 56px; }

/* --- Twee tekstkolommen (Vision / Mission) -------------------------- */

.lm-columns { padding: 64px 0; }

.lm-columns__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
}

.lm-columns__title { margin-bottom: 24px; }

/* --- Smalle fotorij (QHSE) ------------------------------------------ */

.lm-mediarow { padding: 32px 0; }
.lm-mediarow:first-of-type { padding-top: 80px; }

/* The photo is slightly taller than the 365 x 200 from the design: at 200 px the text of
   "Health & Safety" (heading + list + closing line) stuck out below the photo. If the text in a
   block stretches further anyway - a longer text, a narrower screen - the photo grows along
   (stretch + height 100%) instead of the text sticking out below the photo again. */
.lm-mediarow__grid {
    display: grid;
    grid-template-columns: 365px 1fr;
    gap: 32px;
    align-items: stretch;
}

.lm-mediarow__img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 365 / 230;
    object-fit: cover;
}

.lm-mediarow__title { margin-bottom: 12px; }

/* --- Oproepband (Request Marine Support) ---------------------------- */

.lm-cta { padding: 72px 0; text-align: center; }
.lm-cta__inner { display: flex; flex-direction: column; align-items: center; }
.lm-cta__text { max-width: 720px; margin-bottom: 32px; }

/* --- Free text / article --------------------------------------------- */

.lm-article { padding: 64px 0; }

/* The list of links on the "page not found" page. Its own list (not .lm-prose ul) because these
   are real tap targets: on a touch screen a bare list link is only 19 px high. */
.lm-linklist { list-style: none; margin: 16px 0 0; padding: 0; }
.lm-linklist > li { margin: 0; }
/* The list sits inside .lm-prose, which puts a middot in front of every list item; these are
   navigation links, not a bulleted list. */
.lm-linklist > li::before { content: none; }
.lm-linklist a { display: inline-block; padding-block: 8px; font-weight: 700; color: var(--lm-blue); }
.lm-freetext { padding: 64px 0; text-align: center; }
.lm-freetext__inner { display: flex; flex-direction: column; align-items: center; }

/* --- Vlootoverzicht -------------------------------------------------- */

.lm-fleet { padding: 48px 0 80px; }
.lm-fleet__top { padding-block: 16px 24px; }

/* The arrow itself is 24 px; the negative indent keeps it optically on the left
   margin while the tap area stays 44 px (guideline for touch screens). */
.lm-fleet__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: -10px;
    color: var(--lm-black);
    text-decoration: none;
}

.lm-fleet__back:hover { color: var(--lm-blue); }

.lm-fleet__filter { margin-bottom: 48px; }
.lm-fleet__label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 8px; }

/* As wide as the content column (1124 px in a design of 1440 px): in the design the drop-down
   runs from the left to the right margin, not to halfway the page. */
.lm-select {
    width: 100%;
    min-height: 64px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--lm-radius);
    background: #fff;
    box-shadow: 0 2px 10px rgba(2, 2, 2, .08);
    font-family: var(--lm-font);
    font-size: 16px;
    font-weight: 700;
    color: var(--lm-black);
}

.lm-fleet__list { display: flex; flex-direction: column; gap: 48px; }

.lm-fleetrow {
    display: grid;
    grid-template-columns: 274px 1fr;
    gap: 32px;
    align-items: start;
}

.lm-fleetrow__media { display: block; }

.lm-fleetrow__img,
.lm-fleetrow__img--empty {
    display: block;
    width: 100%;
    aspect-ratio: 274 / 190;
    object-fit: cover;
    background: var(--lm-gray);
}

.lm-fleetrow__type { font-size: 12px; font-weight: 700; margin: 0 0 4px; }

.lm-fleetrow__title { font-size: 20px; font-weight: 700; line-height: 1.2; margin: 0 0 24px; }
.lm-fleetrow__title a { color: inherit; text-decoration: none; }
.lm-fleetrow__title a:hover { color: var(--lm-blue); }

/* The same middot list as in .lm-prose; the fleet overview in the design uses a
   middot before every specification line, the detail page keeps real bullets. */
.lm-fleetrow__specs { margin: 0; padding-left: 14px; font-size: 16px; line-height: 1.6; list-style: none; }
.lm-fleetrow__specs > li { position: relative; }
.lm-fleetrow__specs > li::before { content: "\00B7"; position: absolute; left: -14px; }
.lm-fleetrow__summary { margin: 0; font-size: 16px; line-height: 1.6; }
.lm-fleet__empty { font-size: 16px; }

/* --- Assetdetail ----------------------------------------------------- */

.lm-vessel { padding: 24px 0 64px; }

.lm-vessel__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

/* The big photo: all slides lie on top of each other in the same 3:2 box, so the page does not
   jump when the next photo has a different height. Without JavaScript the first slide stays put
   (it already carries lm-slide--active from the server). */
.lm-vessel__stage { position: relative; aspect-ratio: 3 / 2; background: var(--lm-gray); }

.lm-vessel__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease;
}

.lm-vessel__slide.lm-slide--active { opacity: 1; visibility: visible; }

.lm-vessel__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The thumbnails from the design: a row under the big photo, aligned left, the photo being shown
   with a blue border. They are buttons (not links): they jump within the same page. */
/* A grid instead of a row: the thumbnails always fill the photo column neatly, whether there are
   two of them (ELDA in the design) or six. With fewer than three they stay on the left. */
.lm-vessel__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.lm-vessel__thumb {
    display: block;
    width: 100%;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 2px;
    background: none;
    cursor: pointer;
}

.lm-vessel__thumb > img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--lm-gray);
}

.lm-vessel__thumb:hover { border-color: var(--lm-blue); }
.lm-vessel__thumb.lm-dot--active { border-color: var(--lm-blue); }
.lm-vessel__thumb:focus-visible { outline: 2px solid var(--lm-blue); outline-offset: 2px; }

.lm-vessel__type { font-size: 12px; font-weight: 700; color: var(--lm-blue); margin: 0 0 4px; }

.lm-vessel__title {
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--lm-blue);
    margin: 0 0 32px;
}

.lm-vessel__specs { margin: 0 0 32px; padding-left: 20px; font-size: 16px; line-height: 1.7; font-weight: 700; }

.lm-vesselpick { padding: 24px 0 48px; }

/* --- Contactformulier ------------------------------------------------ */

.lm-form { padding: 72px 0; }
.lm-form__inner { display: flex; flex-direction: column; }
.lm-form__title { text-align: center; margin-bottom: 48px; }
.lm-form__error { color: #b00020; font-weight: 700; margin-bottom: 16px; }

.lm-field { margin-bottom: 12px; }
.lm-field--trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.lm-input {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--lm-blue);
    border-radius: 2px;
    background: #fff;
    font-family: var(--lm-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--lm-black);
}

.lm-input::placeholder { color: #9aa3ad; font-weight: 700; }
.lm-input:focus { outline: 2px solid var(--lm-blue); outline-offset: 1px; }
.lm-input--message { min-height: 200px; resize: vertical; }

.lm-form__actions { display: flex; justify-content: center; margin-top: 32px; }
.lm-form .validation-message { display: block; color: #b00020; font-size: 12px; margin-top: 4px; }

/* --- Locations with a map -------------------------------------------- */

.lm-locations { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.lm-locations--mapright .lm-locations__map { order: 2; }
.lm-locations--mapright .lm-locations__panel { order: 1; }

.lm-locations__map { min-height: 340px; background: var(--lm-gray); }
.lm-locations__frame { display: block; width: 100%; height: 100%; min-height: 340px; border: 0; }

/* The map is one big link to Google Maps. The iframe itself no longer catches clicks: on a click
   on the pin the embedded map showed "Place info could not load" (Google cannot fetch place
   details for a pin that sits on coordinates). Dragging and zooming are therefore no longer
   possible inside the box - that now happens in Google Maps itself. */
.lm-locations__maplink { position: relative; display: block; width: 100%; height: 100%; min-height: 340px; }
.lm-locations__frame { pointer-events: none; }

.lm-locations__maphint {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 8px 12px;
    border-radius: var(--lm-radius);
    background: #fff;
    color: var(--lm-black);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 10px rgba(2, 2, 2, .18);
}

.lm-locations__maplink:hover .lm-locations__maphint { background: var(--lm-blue); color: #fff; }
.lm-locations__maplink:focus-visible { outline: 3px solid var(--lm-blue); outline-offset: -3px; }

.lm-locations__panel { display: flex; align-items: center; }
.lm-locations__inner { width: 100%; max-width: 520px; padding: 64px 48px; }
.lm-locations__line { margin: 0 0 4px; font-size: 16px; line-height: 1.6; }

/* Address, phone and e-mail in the coloured block are clickable; they keep the text colour of the
   block and get an underline on hover, just like the cards above. */
.lm-locations__link { color: inherit; text-decoration: none; }
.lm-locations__link:hover { text-decoration: underline; }
.lm-locations__link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* --- Contact details (cards on the contact page) ---------------------- */
/* Two columns of white cards with a blue icon, as on the old website: visiting
   address next to postal address, phone next to fax, and the e-mail addresses
   below them. The content comes from /beheer/instellingen. */

.lm-contactdetails { padding: 80px 0; }
.lm-contactdetails__title { text-align: center; margin-bottom: 16px; }

.lm-contactdetails__intro {
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
}

.lm-contactdetails__title:last-child { margin-bottom: 48px; }

.lm-contactdetails__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.lm-contactcard {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 28px;
    background: #fff;
    /* Own text colour: on a dark background style the card would otherwise inherit white text. */
    color: var(--lm-black);
    border-radius: var(--lm-radius);
    box-shadow: 0 2px 12px rgba(2, 2, 2, .08);
}

.lm-contactcard__icon { flex: 0 0 auto; line-height: 0; color: var(--lm-blue); }
.lm-contactcard__body { min-width: 0; }

.lm-contactcard__label {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.lm-contactcard__line { margin: 0 0 4px; font-size: 16px; line-height: 1.6; word-break: break-word; }
.lm-contactcard__line:last-child { margin-bottom: 0; }
.lm-contactcard__link { color: inherit; text-decoration: none; }
.lm-contactcard__link:hover { color: var(--lm-blue); text-decoration: underline; }

/* --- Footer ---------------------------------------------------------- */

.lm-footer { background: var(--lm-navy); color: #fff; }

.lm-footer__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    max-width: 1440px;
    margin-inline: auto;
    padding: 130px 190px 60px;
}

/* "Only the catalogue": the column with the page links is left out, so three columns remain. The
   tablet and phone rules further down still take over. */
.lm-footer__inner--catalogue { grid-template-columns: repeat(3, 1fr); }

.lm-footer__heading { font-size: 18px; font-weight: 700; margin: 0 0 24px; }
.lm-footer__line { margin: 0 0 8px; font-size: 16px; line-height: 1.6; }
/* The address wraps as running text, just like in the design - the width keeps 'Trinidad & Tobago' together. */
.lm-footer__address { max-width: 220px; }
.lm-footer__link { color: #fff; text-decoration: none; }
.lm-footer__link:hover { color: var(--lm-blue); text-decoration: underline; }

.lm-footer__social { display: flex; gap: 12px; margin-top: 24px; }

.lm-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--lm-blue);
    color: #fff;
}

.lm-social:hover { background: #1c72aa; color: #fff; }

.lm-footer__nav {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

.lm-footer__nav:hover,
.lm-footer__nav--active { color: var(--lm-blue); }

.lm-footer__col--logo { display: flex; align-items: flex-start; justify-content: flex-end; }
.lm-footer__logos { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 20px; }
.lm-footer__logo { max-width: 220px; height: auto; }

/* When there is a second logo (a certification for instance), both sit side by side - on a phone
   as well. The min-width of 0 lets the column and the logos shrink along instead of stretching
   the footer; without a second logo none of this applies and the footer stays exactly as in the
   ontwerp. */
.lm-footer__col--twologos { min-width: 0; }
.lm-footer__col--twologos .lm-footer__logos { min-width: 0; max-width: 100%; }
.lm-footer__col--twologos .lm-footer__logo { min-width: 0; }
.lm-footer__logo--second { max-width: 140px; }

.lm-footer__bar { background: var(--lm-blue); }

.lm-footer__barinner {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: center;
    max-width: 1440px;
    margin-inline: auto;
    padding: 20px 190px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.lm-footer__legal { color: #fff; text-decoration: none; }
.lm-footer__legal:hover { text-decoration: underline; }

/* --- Back to top + test banner --------------------------------------- */

.lm-totop {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(37, 137, 202, .75);
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.lm-totop--visible { opacity: 1; pointer-events: auto; }
.lm-totop:hover { background: var(--lm-blue); color: #fff; }

.lm-noindex {
    background: #b00020;
    color: #fff;
    padding: 8px 24px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

/* --- Responsive -------------------------------------------------------
   The breakpoints from large to small:
     >= 1600 / 1920 / 2400 px  the content column grows along with ultrawide screens;
     <= 1440 px                tighter spacing in the menu;
     <= 1200 px                the menu becomes a hamburger (the full menu no longer
                               fits next to the logo) + first indent;
     561-900 px                tablet: roomier margins than on a phone;
     <= 900 px                 all two-column layouts stacked;
     <= 560 px                 telefoon: alles één kolom.
   ---------------------------------------------------------------------- */

/* --- Ultrawide -------------------------------------------------------- */
/* The design assumes 1440 px wide with a content column of 1124 px. On a 2560 or
   3440 screen that column is literally a third of the picture and the content
   drowns in white; it therefore grows along in steps. Header, footer and bar keep
   the same 126 px overhang relative to the content column as in the design, so
   logo, menu and content stay in proportion to each other. */
@media (min-width: 1600px) {
    :root { --lm-container: 1240px; }

    .lm-header__inner,
    .lm-footer__inner,
    .lm-footer__barinner { max-width: 1560px; }
}

@media (min-width: 1920px) {
    :root { --lm-container: 1360px; }

    .lm-header__inner,
    .lm-footer__inner,
    .lm-footer__barinner { max-width: 1680px; }

    /* The same 1.078 ratio as 835 -> 900 px in the design, so a page with its own header height
       grows along on a wide screen instead of falling back to the design height. */
    .lm-hero { min-height: calc(var(--lm-headerimage-height, 835px) * 1.078); }
    .lm-hero__title { font-size: 44px; }
    .lm-hero__subtitle { font-size: 18px; }
    .lm-pagehead__title { font-size: 44px; }
    .lm-pagehead__intro { font-size: 18px; }
    .lm-split__media { min-height: 560px; }
}

@media (min-width: 2400px) {
    :root { --lm-container: 1440px; }

    .lm-header__inner,
    .lm-footer__inner,
    .lm-footer__barinner { max-width: 1760px; }

    .lm-split__media { min-height: 640px; }
    .lm-locations__inner { max-width: 620px; }
    .lm-locations__map,
    .lm-locations__frame { min-height: 420px; }
}

/* --- Desktop narrower than the design --------------------------------- */
/* The full menu (seven items plus the Contact button) is about 1200 px wide. With
   the 24 px spacing from the design it just does not fit next to the logo below
   1440 px; 16 px keeps it intact all the way to the hamburger at 1200 px. */
@media (max-width: 1440px) {
    .lm-nav { gap: 16px; }
    .lm-nav__list { gap: 16px; }
}

@media (max-width: 1200px) {
    .lm-split__inner,
    .lm-split--imageleft .lm-split__inner,
    .lm-split--imageright .lm-split__inner { padding: 64px 48px; }
    .lm-cards__grid { grid-template-columns: repeat(3, 1fr); }
    .lm-footer__inner { padding: 80px 48px 48px; }
    .lm-footer__barinner { padding-inline: 48px; }

    /* Hamburger from here on - not only at 900 px. Between 900 and 1200 px (iPad in
       landscape, small laptops) the horizontal menu otherwise pushed the page 150 px
       open, which made the whole site scroll horizontally and put the Contact button
       off screen. */
    .lm-header__inner { height: auto; padding: 16px 24px; flex-wrap: wrap; }

    .lm-nav__burger {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        margin-left: auto;
        cursor: pointer;
    }

    .lm-nav__burger span { display: block; height: 3px; background: var(--lm-black); border-radius: 2px; }

    .lm-nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin-left: 0;
        padding-bottom: 16px;
    }

    .lm-nav__toggle:checked ~ .lm-nav { display: flex; }
    .lm-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .lm-nav__item { border-top: 1px solid rgba(2, 2, 2, .08); }
    .lm-nav__link { display: block; padding: 14px 0; }

    /* On a phone the pages below a menu group are visible straight away under the group name:
       no drop-down and no plus sign, because nobody works that out by themselves. */
    .lm-nav__item--group { position: static; }

    .lm-nav__sub {
        position: static;
        min-width: 0;
        padding: 0 0 8px 16px;
        background: none;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        pointer-events: auto;
        transition: none;
    }

    .lm-nav__sublink { padding: 10px 0; white-space: normal; }
    /* The Contact button sits at the bottom of the unfolded menu and must not stretch
       across the full width like the menu items. */
    .lm-nav .lm-btn--contact { align-self: flex-start; margin-top: 16px; }
}

/* --- Tablet ------------------------------------------------------------ */
/* On a tablet (768 px portrait) the phone margin of 24 px is too tight; at 1440 px
   the design uses a 96 px inner margin in a split block. */
@media (min-width: 561px) and (max-width: 900px) {
    .lm-container { padding-inline: 40px; }
    .lm-pagehead__band { padding-inline: 40px; }
    .lm-hero__inner { padding-inline: 40px; }
}

@media (max-width: 900px) {
    .lm-header__logo img { height: 56px; }

    /* min(): a page with its own (lower) header height keeps that height on a phone; a page with
       the design height gets the phone height, because 835 px is the whole screen there. */
    .lm-hero { min-height: min(var(--lm-headerimage-height, 835px), 520px); }
    .lm-hero__title { font-size: 26px; }
    .lm-h1,
    .lm-pagehead__title { font-size: 26px; }
    .lm-h2 { font-size: 22px; }

    .lm-pagehead__media { min-height: min(var(--lm-headerimage-height, 471px), 300px); }
    .lm-pagehead__band { padding: 40px 24px; }

    .lm-split { grid-template-columns: 1fr; }
    .lm-split--imageright .lm-split__media { order: 0; }
    .lm-split--imageright .lm-split__content { order: 0; }
    .lm-split__media { min-height: 260px; }
    .lm-split__inner,
    .lm-split--imageleft .lm-split__inner,
    .lm-split--imageright .lm-split__inner { padding: 40px 24px; }

    .lm-cards__grid { grid-template-columns: repeat(2, 1fr); }
    .lm-columns__grid { grid-template-columns: 1fr; gap: 32px; }
    .lm-mediarow__grid { grid-template-columns: 1fr; }
    /* Without a maximum the narrow QHSE photo becomes page-wide on a tablet. */
    .lm-mediarow__img { max-width: 365px; }
    .lm-fleetrow { grid-template-columns: 1fr; }
    .lm-fleetrow__img,
    .lm-fleetrow__img--empty { max-width: 320px; }
    .lm-vessel__grid { grid-template-columns: 1fr; gap: 32px; }
    /* On a tablet/phone the thumbnails may be smaller, otherwise only two fit. */
    .lm-vessel__thumbs { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 16px; }

    .lm-contactdetails { padding: 48px 0; }
    .lm-contactdetails__grid { grid-template-columns: 1fr; }
    .lm-contactcard { padding: 20px 24px; gap: 16px; }
    /* On a touch screen an e-mail or phone link would otherwise be only 26 px high. */
    .lm-contactcard__link { display: inline-block; padding-block: 4px; }

    /* On a touch screen an address or phone line would otherwise be only 26 px high. */
    .lm-locations__link { display: inline-block; padding-block: 4px; }

    /* The same for the name of an asset in the fleet overview: 24 px is too low to tap reliably. */
    .lm-fleetrow__title a { display: inline-block; padding-block: 6px; }
    .lm-fleetrow__title { margin-bottom: 18px; }

    .lm-locations { grid-template-columns: 1fr; }
    .lm-locations--mapright .lm-locations__map { order: 0; }
    .lm-locations--mapright .lm-locations__panel { order: 0; }
    .lm-locations__inner { max-width: none; padding: 40px 24px; }

    .lm-footer__inner { grid-template-columns: 1fr 1fr; padding: 48px 24px 32px; }
    .lm-footer__col--logo { justify-content: flex-start; }
    .lm-footer__barinner { padding: 16px 24px; gap: 16px; }

    /* iOS Safari zooms in automatically on an input field with a font size below
       16 px, and does not zoom back out afterwards. */
    .lm-input { font-size: 16px; }

    /* On a touch screen the footer links are otherwise 19-31 px high and sit too
       close together to tap reliably. */
    .lm-footer__nav { padding-block: 7px; margin-bottom: 0; }
    .lm-footer__line { margin-bottom: 0; }
    .lm-footer__link { display: inline-block; padding-block: 7px; }
    .lm-footer__legal { display: inline-block; padding-block: 7px; }
}

/* --- Telefoon en kleine tablet: alles links uitgelijnd ------------------ */
/* In the design (1440 px) the heading, the introduction under the photo band, the heading of the
   service cards and the call-to-action band ("Request Marine Support") are centred. On a narrow
   screen that yields ragged, bumpy text blocks: every line starts somewhere else. From here on
   everything is therefore left-aligned, including the buttons below it. Limit: 900 px - the same
   point at which the two-column layouts stack. */
@media (max-width: 900px) {
    .lm-hero,
    .lm-pagehead__title,
    .lm-pagehead__intro,
    .lm-cards__title,
    .lm-cta,
    .lm-freetext,
    .lm-form__title,
    .lm-contactdetails__title,
    .lm-contactdetails__intro { text-align: left; }

    .lm-hero { justify-content: flex-start; }
    /* Without this the photo band centres its heading as a flex item, so a short title ("Contact
       us") ended up in the middle while a long one wrapped to the left margin. */
    .lm-pagehead__media { justify-content: flex-start; }
    .lm-pagehead__title { width: 100%; }
    .lm-hero__actions { justify-content: flex-start; }
    .lm-cards__cta { justify-content: flex-start; }
    .lm-form__actions { justify-content: flex-start; }
    .lm-cta__inner,
    .lm-freetext__inner { align-items: flex-start; }
    .lm-btnrow { justify-content: flex-start; }
    /* Without the automatic side margin the introduction on the contact page stays on the left. */
    .lm-contactdetails__intro { margin-inline: 0; }
}

/* On a tablet the split blocks and the locations get the tablet margin; this rule
   comes after the 900 px block because it overrides the same properties. */
@media (min-width: 561px) and (max-width: 900px) {
    .lm-split__inner,
    .lm-split--imageleft .lm-split__inner,
    .lm-split--imageright .lm-split__inner { padding: 56px 40px; }
    .lm-locations__inner { padding: 56px 40px; }
    .lm-split__media { min-height: 320px; }
}

@media (max-width: 560px) {
    .lm-cards__grid { grid-template-columns: 1fr; }
    /* PDF viewer on a phone: Previous, the counter, Next and Download on ONE line, icons only, and
       a smaller heading. Everything above the page is height the page cannot use, and
       pdf-viewer.js fits the whole page between the top bar and the bottom of the screen. */
    .lm-docviewer { padding-top: 8px; }
    .lm-docviewer .lm-fleet__top { padding-block: 0; }
    .lm-docviewer .lm-docviewer__title { font-size: 22px; margin-bottom: 12px; }
    .lm-pdf__navtext,
    .lm-pdf__downloadtext { display: none; }
    .lm-pdf__bar { flex-wrap: nowrap; gap: 8px; margin-bottom: 12px; }
    .lm-pdf__bar--bottom { justify-content: center; margin: 12px 0 0; }
    .lm-pdf__pager { gap: 8px; }
    .lm-pdf__counter { min-width: 96px; }
    .lm-pdf__download { flex: none; min-width: 48px; padding: 12px; }
    .lm-footer__inner { grid-template-columns: 1fr; }
    .lm-hero__actions { flex-direction: column; align-items: stretch; }
    /* One column: the photos may use the full width again. */
    .lm-mediarow__img,
    .lm-fleetrow__img,
    .lm-fleetrow__img--empty { max-width: none; }
    /* On a phone the 'back to top' button otherwise lies half over the content. */
    .lm-totop { right: 16px; bottom: 16px; }
}

/* Very narrow phones (320 px): the long headings from the design no longer fit
   there on two lines. */
@media (max-width: 380px) {
    .lm-hero__title,
    .lm-h1,
    .lm-pagehead__title { font-size: 24px; }
    .lm-container { padding-inline: 20px; }
}

/* Phone in landscape: a heading of 520 px then fills the whole screen, so the
   buttons below it fall off screen. */
@media (max-height: 520px) and (orientation: landscape) {
    .lm-hero { min-height: min(var(--lm-headerimage-height, 835px), 420px); }
    .lm-hero__inner { padding-block: 32px; }
    .lm-hero__subtitle { margin-bottom: 24px; }
    .lm-pagehead__media { min-height: min(var(--lm-headerimage-height, 471px), 240px); }
}

/* Visitors who have switched motion animations off. */
@media (prefers-reduced-motion: reduce) {
    .lm-btn,
    .lm-totop { transition: none; }
}