: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); }
/* The emblem has no background of its own any more, so it needs no box: the
   rounded corner and the card it used to sit on are gone. Twice the size the
   header first gave it (Owner, 2026-09-16): the badge carries detail - the
   road, the mountains, the wordmark - and at 45px none of it was readable. */
.brand-logo { width: 7rem; height: 7rem; object-fit: contain; }
.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 color-mix(in srgb, var(--blue-bright) 38%, transparent); 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: color-mix(in srgb, var(--blue-bright) 7%, transparent); 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 color-mix(in srgb, var(--blue-bright) 25%, transparent); 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), color-mix(in srgb, var(--blue) 16%, transparent), 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; }
/* NOT the eyebrow. It is a <p> too, and `.faq p` outranks `.eyebrow`, so
   three of the site's labels had quietly turned grey (Owner, 2026-09-16). */
.steps p:not(.eyebrow), .price-section p:not(.eyebrow),
.booking-intro > p:not(.eyebrow), .faq p:not(.eyebrow) { 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. */
/* THE SAME PANEL AS THE FARES (Owner, 2026-09-16: "the same scroll as the
   price block"). A list that grows with its content pushed the page taller for
   nothing; inside a panel it is as tall as the panel, and the questions scroll.
   One recipe for both, so the two panels cannot drift apart. */
.fare-list, .faq-list, .fare-table-wrap {
    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: color-mix(in srgb, var(--blue-bright) 35%, transparent) transparent;
}
.fare-list::-webkit-scrollbar, .faq-list::-webkit-scrollbar, .fare-table-wrap::-webkit-scrollbar { width: 4px; }
.fare-list::-webkit-scrollbar-track, .faq-list::-webkit-scrollbar-track, .fare-table-wrap::-webkit-scrollbar-track { background: transparent; }
.fare-list::-webkit-scrollbar-thumb, .faq-list::-webkit-scrollbar-thumb, .fare-table-wrap::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb, var(--blue-bright) 30%, transparent); }
.fare-list:hover::-webkit-scrollbar-thumb, .faq-list:hover::-webkit-scrollbar-thumb, .fare-table-wrap:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--blue-bright) 55%, transparent); }
.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 { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(3rem, 7vw, 7rem); 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 color-mix(in srgb, var(--blue) 14%, transparent); }
.return-toggle, .terms, .route-preference { display: flex; align-items: center; gap: .7rem; }
.return-toggle { align-self: end; min-height: 3rem; }
.return-toggle input, .terms input, .route-preference 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 color-mix(in srgb, var(--blue) 27%, transparent); border-radius: .65rem; background: color-mix(in srgb, var(--blue) 7%, transparent); }
.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: 0; }
details { border-bottom: 1px solid var(--line); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: .75rem 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: -.2rem 0 .8rem; 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; }
/* The wordmark is an eyebrow now; it has no rule of its own, which is the
   point - colour, weight and tracking arrive with the class. `inherit` was no
   better than `white`: it took the footer's muted grey. */
.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; }
/* A list of facts about one booking: label in its own column, value beside it.
   Both the customer's receipt and the operator's confirmation show the same
   list, so the rules live on the class and not on either page. */
.detail-list { margin: 3rem 0; border-top: 1px solid var(--line); }
.detail-list div { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.detail-list dt { color: var(--muted); }
.detail-list 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, .journey-card__action { 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; }
    .site-header nav { order: 3; flex-basis: 100%; }
    /* HEADER ONLY. Unscoped, this hid the policy links in the footer as well -
       they are a <nav> too, and the legal pages simply vanished on a phone. */
    .site-header nav a:not(.nav-cta) { display: none; }
    /* ...EXCEPT WHEN THE BURGER IS OPEN. Scoping the rule above to the header
       raised its specificity, and it started beating what showed the links
       inside the open panel - so the menu opened empty, 23px tall. Said out
       loud here rather than left to the cascade. */
    .site-header .nav-links.is-open a { display: flex; }
    /* The language menu is a <nav> in the header too. Its restore has to
       out-specify the hider above (which counts two elements and two
       classes), so it is said with the header in front of it. */
    .site-header .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 { 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. */
    /* ONE SIZE FOR THE BUTTONS ON A PHONE (Owner, 2026-09-17), written once:
       the hero's pair, the closing call and the footer's contact button all
       read this. */
    /* The phone's width for that token is set in premium.css, which loads after
       this file: a :root here would be overwritten by the base value there. */
    .hero-actions .button, .closing .button { gap: .8rem; }
    .closing .button { margin-inline: auto; }

    /* The footer is one left-aligned column on a phone; premium.css states the
       whole of it, so nothing here pulls the other way. */
    .site-footer { grid-template-columns: 1fr; gap: 0; }
}

@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; }
    .detail-list 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) { .header-account a { display: inline-flex; font-size: .78rem; } }

/* Careers (2026-10-29): yes/no and fulltid/deltid as a row of radios. The
   fieldset drops the booking form's two-column grid and its legend's rule. */
.careers-page .choice-field { display: grid; gap: .45rem; margin: 0; padding: 0; border: 0; min-width: 0; grid-template-columns: 1fr; }
.careers-page .choice-field legend { margin: 0 0 .45rem; padding: 0; border: 0; color: #cbd3dd; font: 500 .75rem "Segoe UI", system-ui, sans-serif; letter-spacing: normal; text-transform: none; }
/* The yes/no rows sit in the same box as a text input (Owner #1481: the form looked
   ragged - 37px choice blocks between 71px fields, dots hanging below their words). */
.choice-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 2rem; min-height: 48px; box-sizing: border-box;
              padding: .55rem .85rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: .3rem; background: rgb(11, 18, 29); }
.choice-row label { display: inline-flex; align-items: center; gap: .55rem; margin: 0; font: 500 1rem/1.2 "Segoe UI", system-ui, sans-serif; color: inherit; cursor: pointer; }
.choice-row input { flex: none; width: 1.15rem; height: 1.15rem; min-height: 0; margin: 0; accent-color: var(--blue); }
/* On a computer (Owner #1526, #1532) the form is a form, not a 1300px strip: a 920px card,
   short answers in pairs, and each yes/no as one row, question left, answer right. The phone keeps
   one column with the answers centred under the question (#1501). */
@media (min-width: 901px) {
    .careers-page .contact-card { max-width: 920px; margin-inline: auto; }
    .careers-page form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; align-items: end; }
    .careers-page form > * { grid-column: 1 / -1; }
    .careers-page form > .careers-half { grid-column: auto; }
    .careers-page .choice-field:not(.careers-half) { position: relative; }
    .careers-page .choice-field:not(.careers-half) legend { position: absolute; z-index: 1; top: 50%; left: 1rem; max-width: 68%; margin: 0; transform: translateY(-50%); font-size: .9rem; }
    .careers-page .choice-field:not(.careers-half) .choice-row { justify-content: flex-end; min-height: 54px; padding-inline: 1rem 1.25rem; }
    .careers-page .careers-half .choice-row { justify-content: flex-start; padding-inline: 1rem; }
}
/* The tick starts at the form's left edge with everything else, on every screen (Owner #1536). */
.careers-page .terms { display: flex; justify-content: flex-start; align-items: flex-start; gap: .65rem; width: 100%; margin: 0; text-align: left; }
.careers-page .terms input { margin: 0; }
.careers-page .terms label { margin: 0; text-align: left; }
.careers-privacy { color: var(--muted); font-size: .8rem; }

/* The Careers form's "wow" (Owner, 2026-10-30), all borrowed from the home
   page and the cards: the road behind the heading, the firefly that runs
   round a card now round the field in use and the send button, and the rows
   arriving one after another. CSS only; stillness is kept below. */
.careers-page .contact-card { isolation: isolate; }
.careers-hero { position: absolute; inset: 0 0 auto; z-index: -1; width: 100%; height: 15rem; object-fit: cover; opacity: .5;
    -webkit-mask: linear-gradient(#000 20%, transparent); mask: linear-gradient(#000 20%, transparent); pointer-events: none; }
.careers-page form > * { animation: careers-rise .55s cubic-bezier(.2, .7, .2, 1) both; }
.careers-page form > :nth-child(n+4) { animation-delay: .08s; }
.careers-page form > :nth-child(n+6) { animation-delay: .16s; }
.careers-page form > :nth-child(n+8) { animation-delay: .24s; }
.careers-page form > :nth-child(n+10) { animation-delay: .32s; }
.careers-page form > :nth-child(n+12) { animation-delay: .4s; }
@keyframes careers-rise { from { opacity: 0; transform: translateY(14px); } }
.careers-page .field:focus-within input:not([type="radio"]), .careers-page .field:focus-within textarea {
    border-color: var(--blue-bright); box-shadow: 0 0 18px color-mix(in srgb, var(--blue) 30%, transparent); }
.careers-page .choice-row { position: relative; transition: border-color .25s, box-shadow .25s; }
.careers-page .choice-row:has(input:checked), .careers-page .submit { position: relative; overflow: hidden; }
.careers-page .choice-row:has(input:checked) { border-color: color-mix(in srgb, var(--blue-bright) 55%, transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--blue) 24%, transparent); }
.careers-page .choice-row:has(input:checked)::after, .careers-page .submit::after {
    content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; pointer-events: none;
    background: conic-gradient(from var(--ledo-firefly), transparent 0deg, transparent 315deg, var(--blue) 330deg, white 338deg, var(--blue) 346deg, transparent 352deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    animation: ledo-firefly-run 3.2s linear infinite; }
@media (prefers-reduced-motion: reduce) {
    .careers-page form > *, .careers-page .choice-row:has(input:checked)::after, .careers-page .submit::after { animation: none; }
}
.careers-consent-link { justify-self: start; color: var(--blue-bright); font-size: .8rem; text-decoration: underline; }
/* One rhythm for the whole form (Owner, 2026-10-30): 16px between every block, from the
   grid's gap alone. A <legend> does not take the fieldset's grid gap, so the yes/no
   questions sat flush on their boxes (0px) while every other label had 7px - fixed with
   the legend's own margin above. The blocks under the CV each brought margins of their
   own on top of the gap (29px, 33px); here they bring none. */
.careers-page form > .terms, .careers-page form > p, .careers-page form > .turnstile,
.careers-page form > .careers-consent-link { margin-block: 0; }