:root {
    color-scheme: dark;
    --night: #070b12;
    --night-soft: #0d1420;
    --panel: #111a28;
    --line: rgb(255 255 255 / 12%);
    --text: #f6f8fb;
    --muted: #a7b1bf;
    --blue: #55a7ff;
    --blue-bright: #80c1ff;
    --ice: #dceeff;
    --white: #fff;
    --radius: 1.5rem;
    font-family: "Segoe UI", system-ui, sans-serif;
    background: var(--night);
    color: var(--text);
    scroll-behavior: smooth;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; overflow-x: hidden; background: var(--night); color: var(--text); }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
.skip-link { position: fixed; top: 0; left: 1rem; z-index: 50; padding: .8rem 1rem; background: white; color: black; transform: translateY(-120%); }
.skip-link:focus { transform: translateY(0); }

.site-header {
    position: relative;
    inset: 0 0 auto;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 92rem;
    margin: auto;
    padding: 1.4rem clamp(1.25rem, 4vw, 4rem);
}

.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; font-family: "Segoe UI", system-ui, sans-serif; font-size: .9rem; letter-spacing: .16em; }
.brand b { color: var(--blue-bright); }
.brand-logo { width: 3.5rem; height: 3.5rem; object-fit: contain; border-radius: .5rem; }
.hero-logo { grid-area: 1 / 1; width: min(100%, 29rem); height: auto; border-radius: 2rem; }
.hero-visual .route-card { position: absolute; bottom: 0; }
nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem); }
nav a { color: #c3ccd7; font-size: .86rem; text-decoration: none; }
nav a:hover { color: white; }
.nav-cta { padding: .7rem 1rem; border: 1px solid rgb(128 193 255 / 38%); border-radius: 999px; color: white; }

.hero {
    position: relative;
    overflow: clip;
    min-height: 51rem;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .92fr);
    align-items: center;
    gap: 4rem;
    max-width: 92rem;
    margin: auto;
    padding: 3rem clamp(1.25rem, 7vw, 7rem) 5rem;
}
.hero::before { position: absolute; z-index: -1; width: 48rem; height: 48rem; right: -14rem; top: -12rem; border-radius: 50%; background: radial-gradient(circle, rgb(29 111 199 / 28%), transparent 66%); content: ""; }
.hero-copy { min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.4rem; color: var(--blue-bright); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow span { width: 2rem; height: 1px; background: currentColor; }
/* ONE HEADING SIZE FOR THE WHOLE SITE, phone and desktop alike. There were
   five different clamps - hero, section, price, booking, FAQ - so every
   screen introduced a heading of a different size and the pages did not
   look like one site. This is the only place a heading size is set. */
h1, h2 { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; font-size: clamp(2.5rem, 5.4vw, 4.6rem); letter-spacing: -.06em; line-height: 1.02; }
h1 em, h2 em { color: var(--blue-bright); font-style: normal; font-weight: 400; }
.hero-lead { max-width: 39rem; margin: 2rem 0; color: #bdc6d2; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.button { display: inline-flex; min-height: 3.35rem; align-items: center; justify-content: center; gap: 2.5rem; padding: .85rem 1.3rem; border: 1px solid transparent; border-radius: .55rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.button-primary { background: var(--blue); color: #06111e; box-shadow: 0 1rem 2.5rem rgb(32 130 235 / 22%); }
.button-primary:hover { background: var(--blue-bright); transform: translateY(-1px); }
.button-quiet { border-color: var(--line); background: rgb(255 255 255 / 3%); color: white; }
.hero-note { color: #798596; font-size: .78rem; }
.hero-visual { position: relative; min-height: 28rem; display: grid; place-items: center; }
.hero-visual::before, .hero-visual::after { position: absolute; border: 1px solid rgb(95 169 246 / 20%); border-radius: 50%; content: ""; }
.hero-visual::before { width: 30rem; height: 30rem; }
.hero-visual::after { width: 21rem; height: 21rem; }
.monogram { position: absolute; color: rgb(128 193 255 / 7%); font: 700 15rem/.8 "Segoe UI", system-ui, sans-serif; letter-spacing: -.15em; transform: translateX(-.55em); }
.route-card { position: relative; z-index: 2; width: min(100%, 25rem); padding: 1.6rem; border: 1px solid rgb(128 193 255 / 25%); border-radius: var(--radius); background: rgb(10 17 28 / 72%); box-shadow: 0 2rem 6rem rgb(0 0 0 / 50%); backdrop-filter: blur(16px); transform: rotate(-4deg); }
.route-line { display: flex; align-items: center; margin-bottom: .8rem; }
.route-line i { width: .7rem; height: .7rem; border: 2px solid var(--blue-bright); border-radius: 50%; box-shadow: 0 0 1rem var(--blue); }
.route-line span { height: 1px; flex: 1; background: linear-gradient(90deg, var(--blue), rgb(85 167 255 / 16%), var(--blue)); }
.route-cities { display: flex; justify-content: space-between; }
.route-card p { margin: 1.5rem 0 0; color: var(--muted); font-size: .85rem; }

.trust-strip { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 78rem; margin: 0 auto; border-block: 1px solid var(--line); }
.trust-strip article { display: flex; align-items: center; gap: 1rem; padding: 1.7rem clamp(1rem, 3vw, 2.3rem); }
.trust-strip article + article { border-left: 1px solid var(--line); }
.trust-strip article > span { color: var(--blue); font-size: .72rem; }
.trust-strip strong, .trust-strip small { display: block; }
.trust-strip small { margin-top: .25rem; color: var(--muted); }

.section { max-width: 78rem; margin: auto; padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 4vw, 3rem); }
.section-heading { max-width: 38rem; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 4rem; background: var(--line); border: 1px solid var(--line); }
.steps article { min-height: 19rem; padding: 2.2rem; background: var(--night); }
.steps b { color: var(--blue); font-size: .75rem; }
.steps h3 { margin: 5rem 0 1rem; font: 600 1.45rem "Segoe UI", system-ui, sans-serif; }
.steps p, .price-section p, .booking-intro > p, .faq p { color: var(--muted); line-height: 1.7; }

.price-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 7rem; align-items: start; }
/* THE RATE LIST SCROLLS INSIDE ITSELF. Fourteen routes down the page pushed
   everything below them off the screen and read as a spreadsheet. It is now a
   panel of a fixed height: the rows fade out at both edges instead of being
   cut, so the eye is told there is more without a scrollbar having to say it,
   and the page keeps its shape however many routes the operator adds. */
.fare-list {
    max-height: 27rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-block: 1px solid var(--line);
    /* the fade is a mask, not an overlay, so it works on any background */
    mask-image: linear-gradient(to bottom, transparent 0, #000 2.2rem, #000 calc(100% - 2.2rem), transparent 100%);
    scrollbar-width: thin;
    scrollbar-color: rgb(128 193 255 / 35%) transparent;
}
.fare-list::-webkit-scrollbar { width: 4px; }
.fare-list::-webkit-scrollbar-track { background: transparent; }
.fare-list::-webkit-scrollbar-thumb { border-radius: 999px; background: rgb(128 193 255 / 30%); }
.fare-list:hover::-webkit-scrollbar-thumb { background: rgb(128 193 255 / 55%); }
.fare-list article { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.15rem .8rem; border-bottom: 1px solid var(--line); border-radius: .5rem; transition: background .18s ease; }
.fare-list article:last-child { border-bottom: 0; }
.fare-list article:hover { background: rgb(255 255 255 / 3%); }
.fare-list span, .fare-list small { display: block; }
.fare-list span { letter-spacing: -.01em; }
.fare-list small { margin-top: .3rem; color: var(--muted); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.fare-list strong { color: var(--blue-bright); font: 500 1.3rem "Segoe UI", system-ui, sans-serif; white-space: nowrap; font-variant-numeric: tabular-nums; }

.booking-section { max-width: none; display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(3rem, 7vw, 7rem); padding-inline: max(clamp(1.25rem, 7vw, 7rem), calc((100vw - 92rem) / 2)); background: #0a1019; }
.booking-intro { position: sticky; top: 2rem; align-self: start; }
.privacy-note { display: grid; gap: .35rem; margin-top: 2.5rem; padding: 1.2rem 0; border-block: 1px solid var(--line); }
.privacy-note span { color: var(--muted); font-size: .85rem; }
.booking-panel { padding: clamp(1.3rem, 3vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: 0 2rem 5rem rgb(0 0 0 / 22%); }
fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin: 0 0 2rem; padding: 0; border: 0; }
legend { width: 100%; margin-bottom: 1.4rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); font: 600 1.05rem "Segoe UI", system-ui, sans-serif; }
.field { display: grid; gap: .45rem; }
.field.full { grid-column: 1 / -1; }
label { color: #cbd3dd; font-size: .8rem; font-weight: 600; }
input, select, textarea { width: 100%; min-height: 3rem; padding: .75rem .85rem; border: 1px solid rgb(255 255 255 / 14%); border-radius: .45rem; outline: 0; background: #0b121d; color: white; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(85 167 255 / 14%); }
.return-toggle, .terms { display: flex; align-items: center; gap: .7rem; }
.return-toggle { align-self: end; min-height: 3rem; }
.return-toggle input, .terms input { width: 1.15rem; min-height: 1.15rem; accent-color: var(--blue); }
.errorlist { margin: 0; padding: 0; color: #ff9c9c; font-size: .78rem; list-style: none; }
.form-errors { margin-bottom: 1.5rem; padding: 1rem; border: 1px solid rgb(255 110 110 / 35%); border-radius: .5rem; color: #ffb4b4; }
.quote { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .2rem 1rem; margin: 1rem 0; padding: 1.2rem; border: 1px solid rgb(85 167 255 / 27%); border-radius: .65rem; background: rgb(85 167 255 / 7%); }
.quote span { color: var(--muted); font-size: .82rem; }
.quote strong { color: var(--blue-bright); font-size: 1.25rem; }
.quote small { grid-column: 2; color: var(--muted); text-align: right; }
.terms { align-items: flex-start; margin: 1rem 0 1.5rem; }
.submit { width: 100%; }
.booking-closed { padding: 2rem; }
.booking-closed > span { color: var(--blue); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.booking-closed h3 { font: 600 2rem "Segoe UI", system-ui, sans-serif; }
.booking-closed p { color: var(--muted); line-height: 1.7; }

.faq { display: grid; grid-template-columns: .7fr 1.3fr; gap: 5rem; }
.faq-list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.5rem 0; font-weight: 600; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary span { color: var(--blue); font-size: 1.5rem; font-weight: 400; transition: transform .2s; }
details[open] summary span { transform: rotate(45deg); }
details p { margin: -.3rem 0 1.6rem; max-width: 42rem; }

.closing { min-height: 34rem; display: grid; place-items: center; align-content: center; padding: 5rem 1.25rem; text-align: center; background: radial-gradient(circle at 50% 100%, rgb(45 126 214 / 24%), transparent 58%); }
.closing .eyebrow { justify-content: center; }
.closing h2 { margin-bottom: 2.5rem; }
.site-footer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, .9fr); gap: 2rem; max-width: 92rem; margin: auto; padding: 2.5rem clamp(1.25rem, 4vw, 4rem); border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.footer-brand { color: white; font-weight: 700; letter-spacing: .15em; }
.footer-details { display: grid; gap: .55rem; width: fit-content; margin-top: 1.2rem; font-style: normal; line-height: 1.6; }

/* One rhythm for every line of the address: the icon column is a fixed width,
   so the text starts at the same place whether the line has an icon or not. */
.footer-line { display: inline-flex; align-items: center; gap: .55rem; color: var(--muted); text-decoration: none; }
.footer-line--legal { color: #c3ccd7; }
.footer-line strong { color: var(--ice); font-weight: 650; }
a.footer-line { transition: color .18s ease; }
a.footer-line:hover, a.footer-line:focus-visible { color: var(--blue-bright); }
.footer-icon { flex: 0 0 auto; width: .95rem; height: .95rem; fill: none; stroke: var(--blue); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
a.footer-line:hover .footer-icon { stroke: var(--blue-bright); }

/* The same quiet pill the header's language control uses, so the footer's one
   action belongs to the same family instead of being a bare blue link. */
.footer-cta { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.4rem; margin-top: 1.3rem; padding: 0 .95rem; border: 1px solid #2b3c53; border-radius: 999px; background: rgb(18 31 48 / 48%); color: #c8d5e4; font-size: .74rem; font-weight: 650; letter-spacing: .04em; text-decoration: none; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.footer-cta:hover, .footer-cta:focus-visible { border-color: #52779f; background: rgb(28 53 82 / 62%); color: white; }
.footer-cta span { color: var(--blue-bright); }
.footer-maker a { color: var(--blue-bright); }
.footer-maker { display: flex; flex-direction: column; justify-content: end; gap: .7rem; color: #8490a0; line-height: 1.55; text-align: right; }
.footer-maker strong { color: var(--ice); }
.footer-maker__email { color: inherit !important; text-decoration: none; }
.footer-maker__email:hover, .footer-maker__email:focus-visible { text-decoration: underline; }

.confirmation { max-width: 54rem; min-height: 100vh; margin: auto; padding: 10rem 1.25rem 5rem; }
.confirmation > p:not(.eyebrow) { max-width: 42rem; color: var(--muted); font-size: 1.1rem; line-height: 1.7; }
.confirmation dl { margin: 3rem 0; border-top: 1px solid var(--line); }
.confirmation dl div { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.confirmation dt { color: var(--muted); }
.confirmation dd { margin: 0; overflow-wrap: anywhere; }
.nav-account-form { margin: 0; }
.nav-account-form button { padding: 0; border: 0; background: transparent; color: #cbd3dd; font: inherit; cursor: pointer; }
.account-page { display: grid; min-height: calc(100vh - 8rem); place-items: center; padding: 8rem 1.25rem 4rem; }
.account-card { width: min(100%, 34rem); padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: 0 2rem 4rem rgb(0 0 0 / 20%); }
.account-card > p:not(.eyebrow), .account-switch { color: var(--muted); line-height: 1.6; }
.account-card form { display: grid; gap: 1rem; margin-top: 2rem; }
.account-switch { margin: 1.5rem 0 0; }
.account-switch a { color: var(--blue-bright); }
.dashboard-card { width: min(100%, 56rem); }
.journey-list { display: grid; gap: 1rem; margin: 2rem 0; }
.journey-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: .75rem; background: rgb(255 255 255 / 2%); }
.journey-card div { display: grid; gap: .25rem; }
.journey-card span { color: var(--muted); font-size: .75rem; }
.journey-card strong { overflow-wrap: anywhere; }
.journey-card form { grid-column: 1 / -1; margin-top: .25rem; }
.journey-card .button { min-height: 2.75rem; padding-inline: 1rem; }
.empty-state { margin: 2rem 0; color: var(--muted); }

/* A journey that is over is a record, not an offer: one line, status chipped. */
.journey-heading { margin: 2rem 0 .75rem; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.journey-history { display: grid; gap: .5rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.journey-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1rem; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: .5rem; font-size: .9rem; }
.journey-row__date { color: var(--muted); font-variant-numeric: tabular-nums; }
.journey-row__route { overflow-wrap: anywhere; }
.journey-row__price { color: var(--muted); font-variant-numeric: tabular-nums; }
.journey-row__status { padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; white-space: nowrap; background: rgb(255 255 255 / 6%); color: var(--muted); }
.journey-row__status--cancelled_customer,
.journey-row__status--cancelled_operator { background: rgb(255 110 110 / 12%); color: #ffb4b4; }
.journey-row__status--completed { background: rgb(120 220 150 / 12%); color: #a9e7bf; }

.form-notice { margin-bottom: 1.5rem; padding: 1rem; border: 1px solid rgb(120 220 150 / 35%); border-radius: .5rem; color: #a9e7bf; }

@media (max-width: 900px) {
    /* THE LANGUAGE PICKER STAYS TOP RIGHT, LEVEL WITH THE LOGO. The header
       wraps on a phone, and with source order alone the picker was the last
       item and fell to a third row below the menu. Ordering puts it beside the
       brand and gives the nav a row of its own. */
    .brand { order: 1; }
    .language-picker { order: 2; }
    nav { order: 3; flex-basis: 100%; }
    nav a:not(.nav-cta) { display: none; }
    .language-picker__menu a:not(.nav-cta) { display: grid; }
    .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 2rem; }
    .hero-visual { min-height: 22rem; }
    .section { padding-block: 3rem; }
    .section + .section { padding-top: 1.25rem; }
    .steps { margin-top: 2rem; }
    .steps article { min-height: 0; padding: 1.6rem; }
    .steps h3 { margin-top: 2.75rem; }
    .closing { min-height: 0; padding-block: 2.75rem; }
    .closing h2 { margin-bottom: 1.6rem; }
    .trust-strip { grid-template-columns: 1fr; margin-inline: 1.25rem; }
    .trust-strip article + article { border-top: 1px solid var(--line); border-left: 0; }
    .price-section, .booking-section, .faq { grid-template-columns: 1fr; gap: 3rem; }
    .booking-intro { position: static; }

    /* CENTRED ON A PHONE, on the Owner's instruction of 2026-09-08. On one
       narrow column a left edge leaves the short lines looking dropped against
       the long ones; centred, the block reads as one piece.

       What is deliberately NOT centred: the fare rows and the journey rows,
       which are two columns - route on one side, price or status on the other -
       and the form, because a label centred over a field it does not sit
       against stops telling the reader which field it belongs to. */
    .hero-copy, .section-heading, .steps article, .booking-intro,
    .privacy-note, .trust-strip article, .price-section > div:first-child,
    .faq-list details, .site-footer, .footer-ledo, .footer-maker { text-align: center; }
    .eyebrow, .hero-actions { justify-content: center; }
    /* the question and its plus sign travel together, centred as one */
    .faq-list summary { justify-content: center; gap: .75rem; }
    .hero-lead, .booking-intro > p, .faq-list details p { margin-inline: auto; }
    .trust-strip article { flex-direction: column; gap: .5rem; }

    /* One column of buttons, all the same width, and the arrow travelling with
       its label instead of being pushed to the far edge by the 2.5rem gap the
       wide layout uses. */
    .hero-actions .button, .closing .button { width: min(100%, 17rem); gap: .8rem; }

    /* The footer is a column now, so the address block centres with it and the
       two halves are separated by a rule instead of by guesswork. */
    .site-footer { gap: 0; padding-block: 2.2rem 2.6rem; }
    .footer-details { justify-items: center; width: auto; }
    .footer-maker { gap: .45rem; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
}

@media (max-width: 620px) {
    .journey-card { grid-template-columns: 1fr; }
    .journey-row { grid-template-columns: 1fr auto; row-gap: .35rem; }
    .journey-row__route { grid-column: 1 / -1; order: -1; }
    .site-header { padding-inline: 1rem; }
    .brand { font-size: .75rem; }
    .nav-cta { padding: .6rem .8rem; }
    .hero { gap: 1rem; padding-inline: 1.25rem; }
    .hero-visual { min-height: 18rem; }
    .hero-visual::before { width: 20rem; height: 20rem; }
    .hero-visual::after { width: 14rem; height: 14rem; }
    .monogram { font-size: 9rem; }
    .steps { grid-template-columns: 1fr; }
    .steps h3 { margin-top: 2.5rem; }
    fieldset { grid-template-columns: 1fr; }
    .field.full { grid-column: auto; }
    .fare-list article { align-items: flex-start; flex-direction: column; }
    .site-footer { grid-template-columns: 1fr; }
    .confirmation dl div { grid-template-columns: 1fr; gap: .25rem; }
}

@media (prefers-reduced-motion: reduce) {
    :root { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.site-header { flex-wrap: wrap; gap: 1rem; }
.language-picker { position: relative; flex-shrink: 0; border: 0; }
.language-picker summary { display: inline-flex; align-items: center; min-height: 2.3rem; gap: .42rem; padding: 0 .62rem; cursor: pointer; list-style: none; color: #c8d5e4; border: 1px solid #2b3c53; border-radius: 999px; background: rgb(18 31 48 / 48%); font-size: .72rem; font-weight: 650; letter-spacing: .04em; transition: border-color .18s ease, background .18s ease; }
.language-picker summary::-webkit-details-marker { display: none; }
.language-picker summary > span { color: inherit; font-size: inherit; font-weight: inherit; transition: none; }
.language-picker summary:hover { border-color: #52779f; background: rgb(28 53 82 / 62%); }
.language-picker[open] summary { border-color: #52779f; background: rgb(24 53 83 / 72%); }
.language-picker summary:focus-visible, .language-picker__menu a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.language-picker__chevron { width: .38rem; height: .38rem; margin-top: -.18rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .18s ease; }
.language-picker[open] .language-picker__chevron { margin-top: .22rem; transform: rotate(225deg); }
.language-picker__menu { position: absolute; z-index: 10; top: calc(100% + .55rem); right: 0; display: grid; min-width: 11rem; padding: .35rem; border: 1px solid #344b67; border-radius: .85rem; background: #0d1724; box-shadow: 0 1.25rem 3rem rgb(0 0 0 / 35%); }
.language-picker__menu a { display: grid; grid-template-columns: 1.5rem 1fr auto; align-items: center; gap: .6rem; min-height: 2.55rem; padding: 0 .65rem; border-radius: .6rem; color: #bdc9d8; font-size: .82rem; text-decoration: none; }
.language-picker__menu a:hover { color: white; background: rgb(132 196 255 / 13%); }
.language-picker__menu a[aria-current="true"] { color: var(--ice); background: rgb(132 196 255 / 18%); }
.language-picker__check { color: var(--blue-bright); font-size: 1rem; font-weight: 800; }
.language-picker .language-flag { width: 20px; height: 13px; }
.language-flag { width: 24px; height: 16px; object-fit: fill; border-radius: 2px; box-shadow: 0 0 0 1px rgb(255 255 255 / 20%); }
.fleet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.fleet-card { padding: 1.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }

/* The vehicle render is the loudest thing in the top of the card, so it takes
   the full width of it. width/height on the tag reserve the space before the
   file arrives, so the text below does not jump when it does. */
.fleet-image { display: block; width: 100%; height: auto; margin-bottom: 1.1rem; }
.fleet-card h3 { margin: .75rem 0; font-size: 1.6rem; }
.fleet-card p, .fleet-intro { color: var(--muted); line-height: 1.6; }
.fleet-card .fleet-category { color: var(--blue-bright); font-size: .85rem; letter-spacing: .04em; }
.fleet-card .fleet-alternative { padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9rem; }
@media (max-width: 900px) { .fleet-grid { grid-template-columns: 1fr; } }
.hero h1, .section h2, .closing h2 { overflow-wrap: anywhere; }
@media (max-width: 700px) { .language-picker { margin-left: auto; } }
@media (max-width: 900px) { nav a.nav-account { display: inline-flex; font-size: .78rem; } }