/* The supplied artwork, framed at its original button bounds. */
.site-header .nav-cta-art {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 19rem;
    aspect-ratio: 1830 / 408;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 3.8% / 17%;
    background: #08131e;
    box-shadow: 0 4px 18px rgb(0 0 0 / 20%);
    transition: filter .2s ease, box-shadow .2s ease;
}
.site-header .nav-cta-art img {
    position: absolute;
    left: -4.6448%;
    top: -39.951%;
    width: 109.1257%;
    height: 193.1373%;
    max-width: none;
    display: block;
    pointer-events: none;
}
.site-header .nav-cta-art::before { content: none; }

/* THE FIREFLY, on the one button the whole site is for (Owner, 2026-09-16).
   Same light as the one on the green notices - see premium.css, which declares
   `--ledo-firefly` and the keyframes; @property registration is global, so the
   two files share it without one having to come first.
   Blue here, not green: it belongs to this button, and the button is blue.
   `::after`, because `::before` is deliberately switched off above, and inside
   the bounds rather than around them - this element clips its overflow to keep
   the artwork inside the frame. */
.site-header .nav-cta-art::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 1.6px;
    border-radius: inherit;
    pointer-events: none;
    /* Red, at the Owner's word (2026-09-19): the site's burgundy family, a
       bright head and a dimmer body, on the one button the whole site is for. */
    background: conic-gradient(from var(--ledo-firefly), transparent 0deg, rgb(255 214 214) 8deg, rgb(226 78 88 / 45%) 20deg, transparent 34deg);
    -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;
    filter: drop-shadow(0 0 3px rgb(226 78 88 / 85%));
    animation: ledo-firefly-run 5.2s linear infinite;
}
.site-header .nav-cta-art:hover::after { animation-duration: 2.8s; }
@media (hover: hover) {
    .site-header .nav-cta-art:hover {
        transform: none;
        filter: brightness(1.12);
        box-shadow: 0 0 18px rgb(85 167 255 / 24%);
    }
}
/* THE WORD, SET OVER THE PICTURE (Owner, 2026-09-19: one line, no small
   print, in any language). The button is a container, so the type is sized
   in cqw and keeps its place and proportion at every width the button takes.
   It starts just right of the picture's divider and stops short of the
   burger's end, or of the frame where there is no burger. */
.site-header .nav-cta-art { container-type: inline-size; }
.nav-cta-type { display: none; }
.site-header .nav-cta-art--typeset .nav-cta-type {
    position: absolute;
    /* From the divider to the burger or the frame, and the word in the middle
       of that space - not hung on the divider (Owner). The divider is at 36.1%
       of the button, measured off the artwork itself, and 37% left barely two
       pixels of air: with a long line, which fills this box edge to edge, it
       read as if the line was about to touch the word (Owner, 2026-09-23:
       "move it about five pixels"). 38.5% is that air, and it scales with the
       button because it is a percentage of it. */
    left: 38.5%;
    right: 6%;
    top: 50%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.4cqw;
    overflow: hidden;
    transform: translateY(-50%);
    color: #f6f9ff;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}
/* The size the line is DRAWN at. It is not the size it is always shown at:
   the box clips, and the line is a different length in every language -
   "Bestill" is 45px where "Book a ride" is 94px in the same 87px box, and no
   cqw value changes that ratio. nav-cta-fit.js scales the line down when, and
   only when, it would otherwise be cut (Owner, 2026-09-23: "shrink the type
   as the window narrows, do not cut the words off"). Origin is the middle,
   because the line is centred in its box. */
.nav-cta-type__title { font-size: 8.6cqw; font-weight: 400; letter-spacing: -.01em; transform-origin: 50% 50%; }
/* Where the burger stands in the button, the word stops short of it - and
   stops short with air, not against it. 21% left a long line ending two
   pixels from the burger once it had been scaled to fit; 24% is the same
   measurement with room to breathe (Owner, 2026-09-23). */
@media (max-width: 1100px) { .site-header .nav-cta-art--typeset .nav-cta-type { right: 24%; } }
/* The phone widths are sized in premium.css, next to the header's own grid. */
@media (prefers-reduced-motion: reduce) {
    .site-header .nav-cta-art { transition: none; }
    .site-header .nav-cta-art::after { animation: none; }
}