/* AKS Fleet components. Every value comes from tokens.css and colors.css, nothing is written as a number here
   except 0, 1 and percentages. One shape (squircle), one icon style, one motion language.
   Classes .aks-*. Behavior is in motion.js and the page script.
   Version 4 (document 22): pill buttons and inputs, large squircle radii for tiles, cards and photographs, a plain arrow inside
   buttons and no separate arrow element, Poppins, Phosphor icons (filled shapes, not strokes). */

/* ---------- squircle ---------- */
/* Each component sets --r (its plain radius). Where the browser knows corner-shape, the radius becomes a squircle
   (superellipse 1.6, radius times 1.43, measured against the Apple icon in the EPI project). Elsewhere it stays a plain radius. */
.aks-btn, .aks-field, .aks-card, .aks-media, .aks-panel, .aks-table-wrap, .aks-input, .aks-sub, .aks-sub a, .aks-social a, .aks-callfab, .aks-ocard .aks-specs span, .aks-card { border-radius: var(--r, var(--aks-r-md)); }
@supports (corner-shape: superellipse(1.6)) {
  .aks-btn, .aks-field, .aks-card, .aks-media, .aks-panel, .aks-table-wrap, .aks-input, .aks-sub, .aks-sub a, .aks-social a, .aks-callfab, .aks-ocard .aks-specs span, .aks-card {
    corner-shape: superellipse(var(--aks-squircle-k));
    border-radius: calc(var(--r, var(--aks-r-md)) * var(--aks-squircle-scale));
  }
}
.aks-btn, .aks-input, .aks-ocard .aks-specs span { --r: var(--aks-r-pill); }
.aks-social a { --r: calc(var(--aks-hit) / 2); }   /* round, drawn as a squircle like everything else */
.aks-callfab { --r: calc(var(--aks-fab) / 2); }
.aks-brandgrid a, .aks-members a { corner-shape: inherit; }   /* the link takes the squircle of its cell */
textarea.aks-input { --r: var(--aks-r-md); }
.aks-card, .aks-panel, .aks-table-wrap, .aks-sub { --r: var(--aks-r-lg); }
.aks-media { --r: var(--aks-r-lg); }
.aks-media--xl { --r: var(--aks-r-xl); }
.aks-media--flat { --r: 0; }

/* ---------- icons ---------- */
.aks-icon { width: var(--aks-icon); height: var(--aks-icon); flex: none; fill: currentColor; stroke: none; }
.aks-icon--sm { width: var(--aks-icon-sm); height: var(--aks-icon-sm); }
.aks-icon--xl { width: var(--aks-icon-xl); height: var(--aks-icon-xl); }

/* ---------- buttons, one system (documents 23 and 25) ----------
   Anatomy: a pill with a label and, when it leads somewhere, a plain arrow after the label.
   Variants (colors only): primary (navy, on light), light (white, on dark), orange (hero, fades to white), accent (orange, header, fades to navy), outline (on light), outline-light (on dark).
   States, the same for every variant and for the tiles, cards and rows that are links. Only color and opacity change, and the arrow moves 4 px to the right on hover.
   hover       the fill fades to the next color of the variant, or for outline buttons a faint tint fades in (200 ms, standard ease)
   focus       3 px ring, white on dark surfaces, plus the hover look
   active      one step darker than hover, for as long as the press lasts
   busy        aria-busy="true", 70 percent opacity, no pointer events, for a form that is sending
   disabled    55 percent opacity, no pointer events
   Size: every button is 56 px high. The header button is 48 px (44 px on small screens). */
.aks-btn {
  --btn-bg: var(--aks-navy-900); --btn-fg: var(--aks-white); --btn-line: var(--aks-navy-900);
  --btn-bg-hover: var(--aks-orange-500); --btn-line-hover: var(--aks-orange-500); --btn-bg-active: var(--aks-orange-hover); --btn-fg-hover: var(--aks-white);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--aks-s-1);
  min-height: var(--aks-btn-lg); padding-inline: var(--aks-s-5);
  font: inherit; font-size: var(--aks-fs-md); font-weight: var(--aks-w-bold); letter-spacing: var(--aks-tracking-btn); line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--btn-bg); color: var(--btn-fg); border: var(--aks-hair) solid var(--btn-line);
  transition: background-color var(--aks-dur-ui) var(--aks-ease-ui), border-color var(--aks-dur-ui) var(--aks-ease-ui), color var(--aks-dur-ui) var(--aks-ease-ui), opacity var(--aks-dur-ui) var(--aks-ease-ui);
}
.aks-btn:hover, .aks-btn:focus-visible { background: var(--btn-bg-hover); border-color: var(--btn-line-hover); color: var(--btn-fg-hover, var(--btn-fg)); }
.aks-btn:active { background: var(--btn-bg-active); border-color: var(--btn-bg-active); }
.aks-btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; cursor: progress; }
.aks-btn[disabled], .aks-btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.aks-btn .aks-icon { width: var(--aks-icon-sm); height: var(--aks-icon-sm); transition: transform var(--aks-dur) var(--aks-ease); }
.aks-btn:is(:hover, :focus-visible) .aks-icon { transform: translateX(var(--aks-nudge)); }
.aks-btn--block { width: 100%; }
.aks-btn--light { --btn-bg: var(--aks-white); --btn-fg: var(--aks-navy-900); --btn-line: var(--aks-white); --btn-bg-hover: var(--aks-orange-500); --btn-line-hover: var(--aks-orange-500); --btn-bg-active: var(--aks-orange-hover); --btn-fg-hover: var(--aks-white); }
.aks-btn--orange { --btn-bg: var(--aks-orange-500); --btn-fg: var(--aks-white); --btn-line: var(--aks-orange-500); --btn-bg-hover: var(--aks-white); --btn-line-hover: var(--aks-white); --btn-bg-active: var(--aks-navy-100); --btn-fg-hover: var(--aks-navy-900); }
.aks-btn--accent { --btn-bg: var(--aks-orange-500); --btn-fg: var(--aks-white); --btn-line: var(--aks-orange-500); --btn-bg-hover: var(--aks-navy-900); --btn-line-hover: var(--aks-navy-900); --btn-bg-active: var(--aks-navy-950); --btn-fg-hover: var(--aks-white); }
.aks-btn--outline { --btn-bg: transparent; --btn-fg: var(--aks-navy-900); --btn-line: var(--aks-navy-900); --btn-bg-hover: var(--aks-tint-navy); --btn-line-hover: var(--aks-navy-900); --btn-bg-active: var(--aks-tint-navy-press); --btn-fg-hover: var(--aks-navy-900); }
.aks-btn--outline:active { border-color: var(--aks-navy-900); }
.aks-btn--outline-light { --btn-bg: transparent; --btn-fg: var(--aks-white); --btn-line: var(--aks-white-50); --btn-bg-hover: var(--aks-tint-white); --btn-line-hover: var(--aks-white); --btn-bg-active: var(--aks-tint-white-press); --btn-fg-hover: var(--aks-white); }
.aks-btn--outline-light:active { border-color: var(--aks-white); }
.aks-on-dark :focus-visible { outline: var(--aks-focus-dark); outline-offset: var(--aks-focus-offset); }

/* the bare arrow at the corner of tiles, cards and rows. It fades to orange on hover, it does not move */
.aks-go { display: inline-flex; flex: none; color: var(--aks-navy-900); transition: color var(--aks-dur-ui) var(--aks-ease-ui); }
.aks-go .aks-icon { width: var(--aks-icon-lg); height: var(--aks-icon-lg); }
.aks-on-dark .aks-go { color: var(--aks-white); }
:is(.aks-scard, .aks-ncard):is(:hover, :focus-visible) .aks-go { color: var(--aks-orange-500); }

/* text link, an underline that changes color */
.aks-link { display: inline-flex; align-items: center; gap: var(--aks-s-1); font-weight: var(--aks-w-medium); color: var(--aks-navy-900); text-decoration: underline; text-decoration-color: var(--aks-orange-500); text-decoration-thickness: var(--aks-rule); text-underline-offset: var(--aks-underline-offset); transition: color var(--aks-dur-ui) var(--aks-ease-ui), text-decoration-color var(--aks-dur-ui) var(--aks-ease-ui); }
.aks-link:hover { color: var(--aks-blue-600); text-decoration-color: var(--aks-blue-600); }
.aks-link .aks-icon { width: var(--aks-icon-sm); height: var(--aks-icon-sm); }
.aks-on-dark .aks-link { color: var(--aks-white); }
.aks-on-dark .aks-link:hover { color: var(--aks-navy-100); text-decoration-color: var(--aks-navy-100); }

/* ---------- photographs ---------- */
.aks-media { position: relative; overflow: hidden; background: var(--aks-gray-100); }
.aks-media img, .aks-media video { width: 100%; height: 100%; object-fit: cover; transition: transform calc(var(--aks-dur-reveal) * 1.4) var(--aks-ease); }
.aks-media::after, .aks-band__bg::after { content: ""; position: absolute; inset: 0; background: var(--aks-grain); background-size: var(--aks-grain-size) var(--aks-grain-size); opacity: var(--aks-grain-opacity); mix-blend-mode: overlay; pointer-events: none; }
a:hover .aks-media img, .aks-card:hover .aks-media img { transform: scale(var(--aks-zoom)); }
.aks-ratio-16x9 { aspect-ratio: 16 / 9; } .aks-ratio-4x3 { aspect-ratio: 4 / 3; } .aks-ratio-1x1 { aspect-ratio: 1 / 1; } .aks-ratio-4x5 { aspect-ratio: 4 / 5; } .aks-ratio-3x2 { aspect-ratio: 3 / 2; }

/* ---------- utility bar and header ---------- */
.aks-header { position: sticky; top: 0; z-index: var(--aks-z-header); background: var(--aks-white); border-bottom: var(--aks-hair) solid var(--aks-line-soft); }
.aks-header__bar { display: flex; align-items: center; gap: var(--aks-s-3); height: var(--aks-header-h); }
.aks-header__logo { flex: none; display: inline-flex; align-items: center; min-height: var(--aks-hit); }
.aks-header__logo img { height: var(--aks-logo-h); width: auto; }
.aks-nav { display: none; margin-inline: auto; align-items: center; gap: var(--aks-s-0); }
.aks-nav__item { position: relative; }
.aks-nav a, .aks-nav__btn { display: inline-flex; align-items: center; gap: var(--aks-s-0); min-height: var(--aks-hit); padding-inline: var(--aks-gap-tight); background: none; border: 0; font: inherit; font-size: var(--aks-fs-sm); color: var(--aks-ink); font-weight: var(--aks-w-regular); text-decoration: none; cursor: pointer; position: relative; white-space: nowrap; }
/* the selected item is bold. A hidden bold copy of the label keeps the width, so nothing shifts when the selection changes */
.aks-nav__t, .aks-sub__t { display: inline-grid; }
.aks-nav__t::after, .aks-sub__t::after { content: attr(data-t); height: 0; overflow: hidden; visibility: hidden; font-weight: var(--aks-w-bold); user-select: none; pointer-events: none; }
.aks-nav :is(a, .aks-nav__btn)[aria-current] { font-weight: var(--aks-w-bold); }
.aks-nav a::after, .aks-nav__btn::after { content: ""; position: absolute; left: var(--aks-s-1); right: var(--aks-s-1); bottom: var(--aks-s-1); height: var(--aks-rule); background: var(--aks-orange-500); opacity: 0; transition: opacity var(--aks-dur-ui) var(--aks-ease-ui); }
.aks-nav a:hover::after, .aks-nav a[aria-current="page"]::after, .aks-nav .aks-nav__btn[aria-current]::after, .aks-nav__item:hover > .aks-nav__btn::after, .aks-nav__btn[aria-expanded="true"]::after { opacity: 1; }
.aks-nav__btn .aks-icon { width: var(--aks-icon-sm); height: var(--aks-icon-sm); transition: transform var(--aks-dur) var(--aks-ease); }
.aks-nav__btn[aria-expanded="true"] .aks-icon { transform: rotate(180deg); }
.aks-sub { position: absolute; top: 100%; left: 0; min-width: var(--aks-sub-w); display: grid; gap: var(--aks-s-0); padding: var(--aks-s-1); background: var(--aks-white); box-shadow: var(--aks-shadow-float); border: var(--aks-hair) solid var(--aks-line-soft); opacity: 0; visibility: hidden; transform: translateY(calc(var(--aks-s-1) * -1)); transition: opacity var(--aks-dur) var(--aks-ease), transform var(--aks-dur) var(--aks-ease), visibility 0s linear var(--aks-dur); }
.aks-nav__item:not(.is-shut):is(:hover, :focus-within) .aks-sub, .aks-nav__item.is-open .aks-sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.aks-sub a { display: grid; gap: var(--aks-gap-hair); align-items: start; padding: var(--aks-s-1) var(--aks-s-2); min-height: 0; white-space: normal; color: var(--aks-ink); text-decoration: none; transition: background-color var(--aks-dur-ui) var(--aks-ease-ui); --r: var(--aks-r-md); }
.aks-sub a::after { display: none; }
.aks-sub a:hover { background: var(--aks-paper); }
.aks-sub__t { font-weight: var(--aks-w-medium); color: var(--aks-navy-900); }
.aks-sub a[aria-current] .aks-sub__t { font-weight: var(--aks-w-bold); }
.aks-sub__d { font-size: var(--aks-fs-sm); color: var(--aks-gray-700); font-weight: var(--aks-w-regular); }
.aks-header__actions { display: flex; align-items: center; gap: var(--aks-s-2); margin-left: auto; }
.aks-phone { display: none; align-items: center; gap: var(--aks-s-1); color: var(--aks-navy-900); font-weight: var(--aks-w-semibold); text-decoration: none; }
.aks-lang { display: inline-flex; gap: var(--aks-s-1); font-weight: var(--aks-w-semibold); }
.aks-lang a { color: var(--aks-gray-500); text-decoration: none; }
.aks-lang a[aria-current="true"] { color: var(--aks-navy-900); font-weight: var(--aks-w-bold); }
.aks-lang-dd { display: none; position: relative; }
.aks-lang-dd__btn { display: inline-flex; align-items: center; gap: var(--aks-s-1); min-height: var(--aks-hit); padding-inline: var(--aks-gap-text); background: none; border: var(--aks-hair) solid var(--aks-line); font: inherit; font-size: var(--aks-fs-sm); font-weight: var(--aks-w-medium); color: var(--aks-navy-900); cursor: pointer; transition: background-color var(--aks-dur-ui) var(--aks-ease-ui), border-color var(--aks-dur-ui) var(--aks-ease-ui); --r: var(--aks-r-pill); border-radius: var(--aks-r-pill); }
@supports (corner-shape: superellipse(1.6)) { .aks-lang-dd__btn { corner-shape: superellipse(var(--aks-squircle-k)); border-radius: calc(var(--aks-r-pill) * var(--aks-squircle-scale)); } }
.aks-lang-dd__btn:hover, .aks-lang-dd__btn[aria-expanded="true"] { background: var(--aks-paper); border-color: var(--aks-gray-300); }
.aks-lang-dd__btn .aks-icon { width: var(--aks-icon-sm); height: var(--aks-icon-sm); transition: transform var(--aks-dur-ui) var(--aks-ease-ui); }
.aks-lang-dd__btn[aria-expanded="true"] .aks-icon:last-child { transform: rotate(180deg); }
.aks-lang-dd .aks-sub { left: auto; right: 0; min-width: var(--aks-sub-w-lang); margin-top: var(--aks-s-1); }
.aks-lang-dd .aks-sub a { grid-template-columns: 1fr auto; align-items: center; }
.aks-lang-dd .aks-sub a[aria-current="true"] .aks-sub__t { color: var(--aks-navy-900); }
.aks-lang-dd .aks-sub a .aks-icon { color: var(--aks-orange-500); }
@media (min-width: 1360px) { .aks-lang-dd { display: block; } }
.aks-menu-btn { display: inline-grid; place-items: center; width: var(--aks-hit); height: var(--aks-hit); margin-right: calc(var(--aks-s-1) * -1); background: none; border: 0; color: var(--aks-navy-900); cursor: pointer; }
/* the header button is the one compact button */
.aks-header__actions .aks-btn { min-height: var(--aks-hit); padding-inline: var(--aks-s-4); font-size: var(--aks-fs-sm); }
@media (max-width: 1359px) { .aks-header__actions .aks-btn { min-height: var(--aks-hit-min); padding-inline: var(--aks-s-2); } }
@media (max-width: 639px) { .aks-header__actions .aks-btn { display: none; } }
@media (min-width: 1360px) { .aks-nav { display: flex; } .aks-header__actions { margin-left: 0; } .aks-menu-btn { display: none; } }

/* ---------- hero, an inset photograph with a gradient, the headline and three figures on it ---------- */
.aks-hero { position: relative; isolation: isolate; z-index: 1; padding-inline: var(--aks-gutter); padding-block: var(--aks-s-2) var(--aks-hero-spill); }   /* above the section below, so the glow behind the car runs up behind the photograph and shows in the white beside it */

.aks-hero + .aks-section { padding-top: calc(var(--aks-sec) - var(--aks-hero-spill)); }
.aks-section--car::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--aks-hero-spill) * -1); height: var(--aks-hero-spill); background: var(--aks-grad-spill); z-index: -3; }   /* the white to paper gradient under the hero photograph, below the glow */
.aks-hero__media { position: relative; display: grid; align-content: center; justify-items: center; text-align: center; gap: var(--aks-gap-block); min-height: var(--aks-hero-h); padding: var(--aks-hero-pad); padding-bottom: calc(var(--aks-hero-pad) + var(--aks-hit-min)); color: var(--aks-white); isolation: isolate; background: var(--aks-night); }
.aks-hero__media > .aks-hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.aks-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--aks-dur-hero-fade) var(--aks-ease-inout); }
.aks-hero__slide.is-active { opacity: 1; }
.aks-hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
/* the dots under the copy: the current one filled, the others only a line, as small as the page lines allow */
.aks-hero__dots { position: absolute; left: 50%; bottom: var(--aks-s-1); transform: translateX(-50%); display: flex; gap: var(--aks-dot-gap); }
.aks-hero__dot { display: grid; place-items: center; width: var(--aks-hit-min); height: var(--aks-hit-min); padding: 0; margin-inline: calc((var(--aks-hit-min) - var(--aks-dot)) / -2); background: none; border: 0; cursor: pointer; }
.aks-hero__dot::before { content: ""; width: var(--aks-dot); height: var(--aks-dot); border-radius: 50%; border: var(--aks-line-w) solid var(--aks-white-50); background: transparent; transition: background-color var(--aks-dur-ui) var(--aks-ease-ui), border-color var(--aks-dur-ui) var(--aks-ease-ui); }
.aks-hero__dot.is-active::before { background: var(--aks-white); border-color: var(--aks-white); }
.aks-hero__dot:focus-visible { outline: var(--aks-focus-w) solid var(--aks-white); outline-offset: calc(var(--aks-focus-w) * -1); border-radius: 50%; }
.aks-hero__media::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--aks-grad-hero); }   /* contrast for the text, and the fade into the page */
.aks-hero h1 { color: var(--aks-white); max-width: 16ch; font-size: var(--aks-fs-5xl); line-height: var(--aks-lh-tight); letter-spacing: var(--aks-tracking-display); font-weight: var(--aks-w-extrabold); }
.aks-hero__copy { display: grid; justify-items: center; max-width: var(--aks-hero-copy-w); }
.aks-hero__lead { margin-top: var(--aks-hero-gap-title); font-size: var(--aks-fs-lg); color: var(--aks-text-dark); max-width: 40ch; text-wrap: balance; }
.aks-hero__copy .aks-row { display: grid; grid-template-columns: minmax(var(--aks-btn-hero-w), 1fr); margin-top: var(--aks-hero-gap-lead); }   /* the two buttons are as wide as the wider one, stacked on phones */
@media (min-width: 640px) { .aks-hero__copy .aks-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(var(--aks-btn-hero-w), 1fr); } }
.aks-panel { background: var(--aks-white); color: var(--aks-ink); padding: var(--aks-pad-card); box-shadow: var(--aks-shadow-float); display: grid; gap: var(--aks-s-3); }

.aks-panel { background: var(--aks-white); color: var(--aks-ink); padding: var(--aks-s-4); box-shadow: var(--aks-shadow-float); display: grid; gap: var(--aks-s-3); }


/* ---------- section head, a title and, when it needs one, a line under it. Stacked, left aligned ---------- */
.aks-stack--head { max-width: 62ch; }

/* ---------- statement, the large paragraph under the hero. Words that matter first, the rest dimmed ---------- */
.aks-statement { display: grid; gap: var(--aks-gap-text); font-size: var(--aks-fs-statement); line-height: 1.3; letter-spacing: var(--aks-tracking-head); max-width: var(--aks-statement-w); }
.aks-statement strong { font-weight: var(--aks-w-semibold); color: var(--aks-navy-950); text-wrap: balance; }
.aks-statement span { color: var(--aks-gray-500); font-weight: var(--aks-w-medium); text-wrap: balance; }
.aks-statement-wrap { display: grid; gap: var(--aks-gap-block); justify-items: start; }
/* the car comes in from the right edge. Only its front half is on screen, it never covers the text, and on desktop it hangs over the lower edge of the section onto the next one */
.aks-section--car { position: relative; overflow-x: clip; }
.aks-section--car > .aks-container { position: relative; z-index: 1; }
/* an orange circle, blurred, behind the car. The section cuts it at its top and bottom edge */
.aks-car-glow { position: absolute; z-index: -2; inset: 0; clip-path: inset(calc(var(--aks-glow-size) * -1) 0 0 0); pointer-events: none; }   /* the section cuts the glow at its bottom edge, upwards nothing cuts it, the hero photograph lies above it and the glow shows in the white around the photograph */
.aks-car-glow__orb { position: absolute; width: var(--aks-glow-size); aspect-ratio: 1; right: calc(var(--aks-car-vis) * -0.46 - var(--aks-glow-shift-x)); bottom: calc(var(--aks-car-vis) * 0.51 - var(--aks-glow-size) / 2 - var(--aks-glow-shift)); animation: aks-drift var(--aks-dur-drift) var(--aks-ease-inout) infinite alternate; }
.aks-car-glow__orb::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--aks-orange-500); opacity: var(--aks-glow-alpha); filter: blur(var(--aks-glow-blur)); }
.aks-car-glow__orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--aks-grain); background-size: var(--aks-grain-size) var(--aks-grain-size); opacity: var(--aks-grain-opacity); mix-blend-mode: overlay; mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }   /* the film grain of the photographs, on the glow only */
@keyframes aks-sway { 0%, 100% { transform: rotate(calc(var(--aks-app-art-tilt) - var(--aks-app-art-sway))); } 50% { transform: rotate(calc(var(--aks-app-art-tilt) + var(--aks-app-art-sway))); } }
@keyframes aks-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(calc(var(--aks-glow-drift) * -1), var(--aks-glow-drift), 0) scale(1.04); } }   /* a slow drift, a few pixels, hardly noticeable */
.aks-glow-corner { position: absolute; z-index: -1; width: var(--aks-glow-corner-size); aspect-ratio: 1; left: calc(var(--aks-glow-corner-size) * -0.32); bottom: calc(var(--aks-glow-corner-size) * -0.81); pointer-events: none; animation: aks-drift var(--aks-dur-drift) var(--aks-ease-inout) infinite alternate; }
.aks-glow-corner::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--aks-orange-500); opacity: var(--aks-glow-corner-alpha); filter: blur(var(--aks-glow-corner-blur)); }
.aks-glow-corner::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--aks-grain); background-size: var(--aks-grain-size) var(--aks-grain-size); opacity: var(--aks-grain-opacity); mix-blend-mode: overlay; mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }
.aks-glow-corner--top { left: auto; bottom: auto; right: calc(var(--aks-glow-corner-size) * -0.32); top: calc(var(--aks-glow-corner-size) * -0.81); --aks-glow-corner-alpha: var(--aks-glow-corner-alpha-strong); }   /* the same glow in the top right corner, stronger */
.aks-glow-corner--late { animation-delay: -5s; }   /* the second glow is half a cycle apart from the first */
.aks-car { position: relative; z-index: 2; width: calc(var(--aks-car-vis) * 2); margin: var(--aks-gap-block) calc(var(--aks-car-vis) * -1) calc(var(--aks-sec) * -1) auto; pointer-events: none; }
.aks-car img { display: block; width: 100%; height: auto; filter: drop-shadow(var(--aks-shadow-car)); }
.aks-car::after { content: ""; position: absolute; inset: 0; background: var(--aks-grain); background-size: var(--aks-grain-size) var(--aks-grain-size); opacity: var(--aks-grain-opacity); mix-blend-mode: overlay; mask-image: var(--car-mask); mask-size: 100% 100%; mask-repeat: no-repeat; }   /* film grain on the car only, cut out with the car picture itself */
@media (min-width: 1080px) {
  .aks-section--car .aks-statement { max-width: min(var(--aks-statement-w), calc(100vw - var(--aks-car-vis) - var(--aks-s-4) - max(var(--aks-gutter), (100vw - var(--aks-container)) / 2))); }
  .aks-car-glow__orb { bottom: auto; top: calc(50% - var(--aks-glow-size) / 2 + var(--aks-glow-shift)); }
  .aks-car { position: absolute; right: calc(var(--aks-car-vis) * -1 + var(--aks-car-shift)); top: var(--aks-car-top); margin: 0; }
}
.aks-br { display: none; }
@media (min-width: 900px) { .aks-br { display: inline; } }

/* ---------- dark band with a photograph behind it ---------- */
.aks-band { position: relative; isolation: isolate; overflow: hidden; color: var(--aks-white); background: var(--aks-night); padding-block: var(--aks-sec); }
.aks-band__bg { position: absolute; inset: 0; z-index: -2; }
.aks-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.aks-band__bg--contact img { object-position: var(--aks-contact-bg-pos); }
.aks-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--aks-grad-band); }
.aks-band h2, .aks-band h3 { color: var(--aks-white); }
.aks-band p { color: var(--aks-text-dark); font-size: var(--aks-fs-lg); }
.aks-band__copy { display: grid; justify-items: start; }
.aks-band__copy p { margin-top: var(--aks-gap-text); max-width: 52ch; text-wrap: balance; }   /* four even lines */
.aks-band__copy > div { margin-top: var(--aks-gap-block); }

/* ---------- vehicle cards, the photograph on top, name, specs and price under it ---------- */
.aks-price__v { font-size: var(--aks-fs-2xl); font-weight: var(--aks-w-semibold); letter-spacing: var(--aks-tracking-head); line-height: 1; color: var(--aks-navy-900); }
.aks-price__v small { display: block; margin-top: var(--aks-s-0); font-size: var(--aks-fs-sm); font-weight: var(--aks-w-regular); color: var(--aks-gray-500); letter-spacing: 0; }
.aks-specs { display: flex; flex-wrap: wrap; gap: var(--aks-s-0) var(--aks-s-2); font-size: var(--aks-fs-sm); margin: 0; }
/* vehicle offer cards are service cards (navy, orange on hover) with the specs as small framed labels and the price at the foot */
.aks-ocard .aks-specs { gap: var(--aks-s-1); align-content: start; }
.aks-ocard .aks-specs { font-size: var(--aks-fs-xs); }
.aks-ocard .aks-specs span { padding: var(--aks-s-0) calc(var(--aks-s-2) - var(--aks-s-0)); border: var(--aks-hair) solid color-mix(in srgb, currentColor var(--aks-label-line), transparent); line-height: var(--aks-lh-snug); transition: border-color var(--aks-dur-ui) var(--aks-ease-ui); }
.aks-ocard .aks-card-foot { align-items: flex-end; }
.aks-ocard .aks-price__v { color: var(--aks-white); transition: color var(--aks-dur-ui) var(--aks-ease-ui); }
.aks-ocard .aks-price__v small { color: var(--aks-white-75); transition: color var(--aks-dur-ui) var(--aks-ease-ui); }
.aks-ocard:is(:hover, :focus-visible) .aks-price__v { color: var(--aks-navy-900); }
.aks-ocard:is(:hover, :focus-visible) .aks-price__v small { color: var(--aks-navy-75); }
.aks-row.aks-after-cards { margin-top: var(--aks-more-gap); }
.aks-prose { display: grid; gap: var(--aks-gap-text); max-width: 62ch; margin-top: var(--aks-gap-block); color: var(--aks-gray-700); text-wrap: pretty; }

/* ---------- table, who does what ---------- */
.aks-table-wrap { overflow-x: auto; background: var(--aks-white); border: var(--aks-line-w-strong) solid var(--aks-line); }   /* the table is the one exception with an outline, twice as strong as its row dividers */
.aks-table { width: 100%; border-collapse: collapse; min-width: var(--aks-table-min); }
.aks-table th, .aks-table td { padding: var(--aks-s-2) var(--aks-s-3); text-align: left; border-bottom: var(--aks-hair) solid var(--aks-line-soft); vertical-align: middle; }
.aks-table thead th { background: var(--aks-navy-900); color: var(--aks-white); font-weight: var(--aks-w-semibold); font-size: inherit; }
.aks-table tbody tr:last-child th, .aks-table tbody tr:last-child td { border-bottom: 0; }
.aks-table tbody th { font-weight: var(--aks-w-semibold); color: var(--aks-navy-900); }
@media (max-width: 639px) {
  .aks-table { min-width: 0; }
  .aks-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .aks-table tr { display: grid; gap: var(--aks-s-1); padding: var(--aks-s-2) var(--aks-s-3); border-bottom: var(--aks-hair) solid var(--aks-line-soft); }
  .aks-table tbody tr:last-child { border-bottom: 0; }
  .aks-table th, .aks-table td { display: block; padding: 0; border: 0; }
  .aks-table td[data-label]::before { content: attr(data-label); display: block; font-size: var(--aks-fs-xs); color: var(--aks-gray-500); font-weight: var(--aks-w-medium); }
}
.aks-yes, .aks-no { display: inline-flex; align-items: center; gap: var(--aks-s-1); font-weight: var(--aks-w-medium); }
.aks-yes { color: var(--aks-success); }
.aks-no { color: var(--aks-gray-500); }

/* ---------- steps, a timeline: a line that draws once, a dot and a number on it ---------- */
.aks-steps { position: relative; display: grid; gap: var(--aks-gap-block) var(--aks-grid-gap); counter-reset: step; }
.aks-step { position: relative; display: grid; gap: var(--aks-gap-tight); align-content: start; padding-top: var(--aks-s-4); counter-increment: step; }
.aks-step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--aks-hair); background: var(--aks-gray-300); }
.aks-step::after { content: counter(step, decimal-leading-zero); position: absolute; top: calc(var(--aks-s-1) * -1 - var(--aks-s-0)); left: 0; padding-right: var(--aks-s-1); background: var(--aks-paper); font-size: var(--aks-fs-sm); font-weight: var(--aks-w-medium); color: var(--aks-orange-700); line-height: var(--aks-s-3); }
.aks-step h3 { font-size: var(--aks-fs-lg); }
.aks-step p { color: var(--aks-gray-700); font-size: var(--aks-fs-sm); }
@media (min-width: 640px) { .aks-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .aks-steps { grid-template-columns: repeat(7, minmax(0, 1fr)); } }


/* ---------- forms ---------- */
.aks-field { display: grid; gap: var(--aks-s-1); align-content: start; border: 0; padding: 0; }
.aks-field label { font-weight: var(--aks-w-medium); font-size: var(--aks-fs-sm); color: var(--aks-navy-900); }
.aks-input { width: 100%; min-height: var(--aks-hit); padding: 0 var(--aks-s-2); font: inherit; color: var(--aks-ink); background: var(--aks-white); border: var(--aks-hair) solid var(--aks-gray-300); transition: border-color var(--aks-dur-fast) var(--aks-ease), box-shadow var(--aks-dur-fast) var(--aks-ease); }
.aks-input:hover { border-color: var(--aks-gray-500); }
.aks-input:focus { outline: none; border-color: var(--aks-navy-900); box-shadow: 0 0 0 var(--aks-focus-w) var(--aks-navy-100); }
.aks-input[aria-invalid="true"] { border-color: var(--aks-error); }
textarea.aks-input { min-height: var(--aks-textarea-h); padding-block: var(--aks-s-1); resize: vertical; }
.aks-error { color: var(--aks-error); font-size: var(--aks-fs-sm); }
.aks-form { display: grid; gap: var(--aks-s-2) var(--aks-s-2); grid-template-columns: minmax(0, 1fr); }
.aks-form > * { min-width: 0; }
@media (min-width: 640px) { .aks-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aks-form__wide { grid-column: 1 / -1; } }
.aks-consent { display: flex; gap: var(--aks-s-1); align-items: center; font-size: var(--aks-fs-sm); color: var(--aks-gray-700); }
.aks-consent input { appearance: none; -webkit-appearance: none; flex: none; width: var(--aks-check-size); height: var(--aks-check-size); margin: 0; background: var(--aks-white) center / 70% no-repeat; border: var(--aks-hair) solid var(--aks-gray-300); --r: var(--aks-r-sm); border-radius: var(--aks-r-sm); cursor: pointer; transition: background-color var(--aks-dur-ui) var(--aks-ease-ui), border-color var(--aks-dur-ui) var(--aks-ease-ui); }
@supports (corner-shape: superellipse(1.6)) { .aks-consent input { corner-shape: superellipse(var(--aks-squircle-k)); border-radius: calc(var(--aks-r-sm) * var(--aks-squircle-scale)); } }
.aks-consent input:hover { border-color: var(--aks-navy-900); }
.aks-consent input:checked { background-color: var(--aks-navy-900); border-color: var(--aks-navy-900); background-image: url("../img/check-white.svg"); }
.aks-consent input:checked:hover { background-color: var(--aks-orange-500); border-color: var(--aks-orange-500); }
.aks-form-note { font-size: var(--aks-fs-sm); color: var(--aks-success); font-weight: var(--aks-w-medium); }
.aks-form-note[hidden] { display: none; }
.aks-inline-form .aks-input { min-height: var(--aks-btn-lg); }
.aks-inline-form { display: grid; gap: var(--aks-s-1); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .aks-inline-form { grid-template-columns: minmax(0, 1fr) auto; } }

/* ---------- accordion (behavior in motion.js) ---------- */
.aks-acc { border-top: var(--aks-hair) solid var(--aks-line); }
.aks-acc__item { border-bottom: var(--aks-hair) solid var(--aks-line); }
.aks-acc__q { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--aks-s-3); min-height: var(--aks-row-h); padding: var(--aks-s-2) 0; background: none; border: 0; font: inherit; font-size: var(--aks-fs-lg); font-weight: var(--aks-w-medium); letter-spacing: var(--aks-tracking-head); color: var(--aks-navy-900); text-align: left; cursor: pointer; }
.aks-acc__q .aks-icon { transition: transform var(--aks-dur-slow) var(--aks-ease); }
.aks-acc__q[aria-expanded="true"] .aks-icon { transform: rotate(45deg); }
.aks-acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--aks-dur-slow) var(--aks-ease); }
.aks-acc__a > div { overflow: hidden; }
.aks-acc__a p { padding-bottom: var(--aks-s-3); color: var(--aks-gray-700); text-wrap: balance; }   /* an answer is two lines of equal length */
.aks-acc__q[aria-expanded="true"] + .aks-acc__a { grid-template-rows: 1fr; }

/* ---------- link rows, used for other services and news. Title and text stacked, one chip at the right ---------- */

/* ---------- contact block ---------- */
.aks-contact { display: grid; gap: var(--aks-s-3); margin: 0; }
.aks-contact div { display: grid; gap: var(--aks-s-0); }
.aks-contact a { display: inline-flex; align-items: center; min-height: var(--aks-hit-min); color: var(--aks-white); text-decoration: none; }
.aks-contact a:hover { text-decoration: underline; text-decoration-color: var(--aks-orange-500); text-underline-offset: var(--aks-underline-offset); }
.aks-contact dt { color: var(--aks-text-dark); font-size: var(--aks-fs-sm); }
.aks-contact dd { margin: 0; }
.aks-bigphone { font-size: var(--aks-fs-2xl); font-weight: var(--aks-w-semibold); letter-spacing: var(--aks-tracking-head); }


/* ---------- footer ---------- */
.aks-footer { background: var(--aks-night); color: var(--aks-gray-300); padding-block: var(--aks-sec) var(--aks-s-4); }
.aks-footer a { color: var(--aks-white); text-decoration: none; }
.aks-footer a:hover { text-decoration: underline; text-decoration-color: var(--aks-orange-500); text-underline-offset: var(--aks-underline-offset); }
.aks-footer h2, .aks-footer h3 { color: var(--aks-white); }
.aks-footer h4 { color: var(--aks-white); font-size: var(--aks-fs-md); margin-bottom: var(--aks-s-3); }
.aks-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--aks-s-2); }   /* the same step between every row of links in every column */
.aks-footer .aks-header__logo:hover { text-decoration: none; }
.aks-footer .aks-header__logo img { height: var(--aks-logo-h-footer); }
.aks-footer .aks-input { border-color: transparent; }
.aks-footer__news { display: grid; gap: var(--aks-s-3); padding-bottom: var(--aks-gap-block); margin-bottom: var(--aks-gap-block); border-bottom: var(--aks-hair) solid var(--aks-line-dark); }
.aks-footer__h { font-size: var(--aks-fs-2xl); }
.aks-footer__news .aks-form-note { color: var(--aks-white); }
.aks-footer__grid { display: grid; gap: var(--aks-gap-block) var(--aks-grid-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aks-footer__grid > :first-child { grid-column: 1 / -1; }
.aks-contact--footer { gap: var(--aks-s-2); margin-top: var(--aks-s-1); }   /* the same rows as in the contact section, a little tighter */
.aks-contact--footer dt { font-size: var(--aks-fs-sm); }
.aks-contact--footer a { min-height: 0; }
.aks-footer { position: relative; }
.aks-footer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--aks-footer-spill); background: var(--aks-grad-footer); pointer-events: none; }   /* navy rises from the footer into the contact band, as tall as the white to paper gradient under the hero */
.aks-band--before-footer { padding-bottom: calc(var(--aks-sec) + var(--aks-hero-spill)); }   /* room for the taller gradient, so it never covers the form panel */
.aks-footer__legal { margin-top: var(--aks-gap-block); padding-top: var(--aks-s-3); border-top: var(--aks-hair) solid var(--aks-line-dark); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--aks-s-2); font-size: var(--aks-fs-sm); }
.aks-footer__brand { display: grid; gap: var(--aks-s-2); align-content: start; max-width: 32ch; }
@media (min-width: 900px) {
  .aks-footer__news { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .aks-footer__grid { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); }
  .aks-footer__grid > :first-child { grid-column: auto; }
}

/* ---------- reveal: content arrives once, slowly and softly (24 px, a long fade, one soft curve). Everything that moves uses `translate` and `scale`, so hover and layout transforms are never in the way ---------- */
.js [data-reveal] { opacity: 0; translate: 0 var(--aks-reveal-distance); transition: opacity var(--aks-dur-reveal) var(--aks-ease-reveal), translate var(--aks-dur-reveal) var(--aks-ease-reveal); transition-delay: calc(var(--i, 0) * var(--aks-stagger)); }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }
/* a card that reveals keeps its own hover transitions. The reveal shorthand above would replace them, and the card would snap to its hover colors while its text fades */
.js :is(.aks-scard, .aks-ncard)[data-reveal] { transition: opacity var(--aks-dur-reveal) var(--aks-ease-reveal) calc(var(--i, 0) * var(--aks-stagger)), translate var(--aks-dur-reveal) var(--aks-ease-reveal) calc(var(--i, 0) * var(--aks-stagger)), background-color var(--aks-dur-ui) var(--aks-ease-ui), --card-bg var(--aks-dur-ui) var(--aks-ease-ui); }
/* a section head arrives in two beats, the title and then the intro, instead of as one block */
.js .aks-head[data-reveal] { opacity: 1; translate: none; transition: none; }
.js .aks-head[data-reveal] > * { opacity: 0; translate: 0 var(--aks-reveal-distance); transition: opacity var(--aks-dur-reveal) var(--aks-ease-reveal), translate var(--aks-dur-reveal) var(--aks-ease-reveal); }
.js .aks-head[data-reveal] > :nth-child(2) { transition-delay: calc(var(--aks-stagger) * 1.5); }
.js .aks-head[data-reveal] > :nth-child(n+3) { transition-delay: calc(var(--aks-stagger) * 3); }
.js .aks-head[data-reveal].is-in > * { opacity: 1; translate: 0 0; }
/* photographs in cards settle from slightly larger while their card arrives (the hover zoom uses transform, so both work together) */
.js [data-reveal] .aks-media > img { scale: var(--aks-reveal-settle); transition: scale calc(var(--aks-dur-reveal) * 1.6) var(--aks-ease-reveal) calc(var(--i, 0) * var(--aks-stagger)), transform calc(var(--aks-dur-reveal) * 1.4) var(--aks-ease); }
.js [data-reveal].is-in .aks-media > img { scale: 1; }
/* the line over a step draws from left to right, the step number follows */
.js .aks-step::before { transform-origin: left; scale: 0 1; transition: scale calc(var(--aks-dur-reveal) * 1.4) var(--aks-ease-reveal) calc(var(--i, 0) * var(--aks-stagger)); }
.js .aks-step.is-in::before { scale: 1 1; }
.js .aks-step::after { opacity: 0; transition: opacity var(--aks-dur-reveal) var(--aks-ease-reveal) calc(var(--i, 0) * var(--aks-stagger) + var(--aks-stagger)); }
.js .aks-step.is-in::after { opacity: 1; }
/* logo grids: one logo after the other (site.js numbers them in --n) */
.js [data-reveal] :is(.aks-brandgrid, .aks-members ul) > li { opacity: 0; translate: 0 calc(var(--aks-reveal-distance) / 2); transition: opacity var(--aks-dur-reveal) var(--aks-ease-reveal) calc(var(--n, 0) * var(--aks-stagger) / 2), translate var(--aks-dur-reveal) var(--aks-ease-reveal) calc(var(--n, 0) * var(--aks-stagger) / 2); }
.js [data-reveal].is-in :is(.aks-brandgrid, .aks-members ul) > li { opacity: 1; translate: 0 0; }
/* the hero dots arrive after the copy */
.js .aks-hero__dots { opacity: 0; transition: opacity var(--aks-dur-reveal) var(--aks-ease-reveal) calc(var(--aks-stagger) * 8); }
.js .aks-hero.is-in .aks-hero__dots { opacity: 1; }
.js .aks-hero__slide.is-active img { animation: aks-hero-zoom var(--aks-dur-hero-zoom) var(--aks-ease-inout) both; }   /* the photograph zooms out once, every time the page loads. It runs by itself, no scroll observer is needed */
.js.static .aks-hero__slide img { animation: none; }
@keyframes aks-hero-zoom { from { transform: scale(var(--aks-hero-zoom)); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js .aks-head[data-reveal] > *, .js [data-reveal] :is(.aks-brandgrid, .aks-members ul) > li, .js .aks-hero__dots, .js .aks-step::after { opacity: 1; translate: none; transition: none; }
  .js [data-reveal] .aks-media > img, .js .aks-step::before { scale: none; transition: none; }
  .js .aks-hero__slide img { transform: none; animation: none; }
  .js .aks-app-art-wrap { animation: none; }
}

/* ---------- mobile menu, call button ---------- */
.aks-menu { position: fixed; inset: var(--aks-header-h) 0 0 0; z-index: var(--aks-z-menu); background: var(--aks-white); padding: var(--aks-s-3) var(--aks-gutter) var(--aks-s-6); display: grid; align-content: start; gap: var(--aks-s-1); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--aks-dur) var(--aks-ease), transform var(--aks-dur) var(--aks-ease), visibility 0s linear var(--aks-dur); }
.aks-menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.aks-menu a:not(.aks-btn), .aks-menu summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--aks-fab); border-bottom: var(--aks-hair) solid var(--aks-line); font-size: var(--aks-fs-xl); font-weight: var(--aks-w-medium); letter-spacing: var(--aks-tracking-head); color: var(--aks-navy-900); text-decoration: none; cursor: pointer; list-style: none; }
.aks-menu summary::-webkit-details-marker { display: none; }
.aks-menu details[open] summary .aks-icon { transform: rotate(180deg); }
.aks-menu summary .aks-icon { transition: transform var(--aks-dur) var(--aks-ease); }
.aks-menu details a:not(.aks-btn) { padding-left: var(--aks-s-3); font-size: var(--aks-fs-lg); font-weight: var(--aks-w-regular); min-height: var(--aks-hit); }
.aks-menu .aks-phone { display: inline-flex; }
.aks-menu__cta { margin-top: var(--aks-s-3); }
.aks-menu__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--aks-s-2); margin-top: var(--aks-s-3); }
.aks-menu .aks-lang { display: inline-flex; }
.aks-menu .aks-menu__meta a:not(.aks-btn) { min-height: var(--aks-hit); border-bottom: 0; font-size: var(--aks-fs-md); justify-content: flex-start; }   /* phone and language are not menu rows, no divider under them */
@media (min-width: 1360px) { .aks-menu { display: none; } }
body.menu-open { overflow: hidden; }

.aks-callfab { position: fixed; right: var(--aks-s-2); bottom: var(--aks-s-2); z-index: var(--aks-z-float); display: grid; place-items: center; width: var(--aks-fab); height: var(--aks-fab); background: var(--aks-navy-900); color: var(--aks-white); box-shadow: var(--aks-shadow-float); }
@media (min-width: 1360px) { .aks-callfab { display: none; } }


.aks-skip { position: absolute; left: var(--aks-s-2); top: calc(var(--aks-s-8) * -1); z-index: calc(var(--aks-z-skip) + 1); background: var(--aks-navy-900); color: var(--aks-white); padding: var(--aks-s-1) var(--aks-s-2); }
.aks-skip:focus { top: var(--aks-s-1); }

/* ---------- page layout pieces ---------- */
.aks-row.aks-more { margin-top: var(--aks-gap-group); }
.aks-row--center { justify-content: center; }
.aks-row--wide { gap: var(--aks-s-3); }
.aks-split { display: grid; gap: var(--aks-gap-block); align-items: center; }
.aks-split--top { align-items: start; }
@media (min-width: 900px) { .aks-split { grid-template-columns: var(--split, minmax(0, 1fr) minmax(0, 1fr)); gap: var(--aks-split-gap); } }
/* app artwork, the client's own SVG of the My AFS Car screen (05-brand/images) */
.aks-app-art { width: min(var(--aks-phone-mock), 70%); margin-inline: auto; filter: drop-shadow(var(--aks-shadow-art)); }
.aks-note { font-size: var(--aks-fs-note); color: var(--aks-gray-700); max-width: none; }
.aks-footer__grid { min-width: 0; }

.aks-head > .aks-link { justify-self: start; }
.aks-section--flush { padding-top: 0; }
.aks-section--dark .aks-note { color: var(--aks-white-50); }

/* ---------- vehicle grid ---------- */

/* ---------- service, other service and news cards: a photograph, then icon and title, then the text ---------- */
.aks-cards { display: grid; gap: var(--aks-grid-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .aks-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .aks-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .aks-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.aks-scard, .aks-ncard { display: grid; grid-template-rows: auto 1fr; overflow: hidden; color: var(--aks-ink); background: var(--aks-paper); text-decoration: none; transition: background-color var(--aks-dur-ui) var(--aks-ease-ui); --r: var(--aks-r-xl); border-radius: var(--aks-r-xl); }
@supports (corner-shape: superellipse(1.6)) { .aks-scard, .aks-ncard { corner-shape: superellipse(var(--aks-squircle-k)); border-radius: calc(var(--aks-r-xl) * var(--aks-squircle-scale)); } }
/* service cards and news cards are navy and turn orange on hover. The photograph fades into the base from its top edge (clear) to its bottom edge (full), the base color is one variable so both change together */
:is(.aks-scard, .aks-ncard) { --card-bg: var(--aks-navy-900); background: var(--card-bg); color: var(--aks-white); transition: --card-bg var(--aks-dur-ui) var(--aks-ease-ui); }
:is(.aks-scard, .aks-ncard):is(:hover, :focus-visible) { --card-bg: var(--aks-orange-500); background: var(--card-bg); }
:is(.aks-scard, .aks-ncard) .aks-media { position: relative; background: var(--card-bg); }   /* no lighter hairline where the photograph ends */
:is(.aks-scard, .aks-ncard) .aks-media::before { content: ""; position: absolute; inset: var(--aks-card-fade-start) 0 -1px; z-index: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 0%, transparent) 0%, var(--card-bg) 100%); pointer-events: none; }
:is(.aks-scard, .aks-ncard) .aks-media::after { z-index: 2; mask-image: linear-gradient(180deg, #000 var(--aks-card-fade-start), transparent 100%); }   /* the grain is on the photograph and gone where the photograph has become the base */
a:is(.aks-scard, .aks-ncard) .aks-card-icon { background: var(--aks-white); color: var(--aks-navy-900); }
a:is(.aks-scard, .aks-ncard) h3 { color: var(--aks-white); }
a:is(.aks-scard, .aks-ncard) p { color: var(--aks-white-75); }
:is(.aks-scard, .aks-ncard) .aks-go { color: var(--aks-white); }
/* on hover the card is orange and everything on it turns navy, the icon box swaps its two colors */
:is(.aks-scard, .aks-ncard) :is(h3, p, .aks-card-icon, .aks-go) { transition: color var(--aks-dur-ui) var(--aks-ease-ui), background-color var(--aks-dur-ui) var(--aks-ease-ui); }
a:is(.aks-scard, .aks-ncard):is(:hover, :focus-visible) h3, :is(.aks-scard, .aks-ncard):is(:hover, :focus-visible) .aks-go { color: var(--aks-navy-900); }
a:is(.aks-scard, .aks-ncard):is(:hover, :focus-visible) p { color: var(--aks-navy-75); }
a:is(.aks-scard, .aks-ncard):is(:hover, :focus-visible) .aks-card-icon { background: var(--aks-navy-900); color: var(--aks-white); }
:is(.aks-scard, .aks-ncard) .aks-ncard__date { color: var(--aks-white-75); }
.aks-ncard:is(:hover, :focus-visible) .aks-ncard__date { color: var(--aks-navy-900); }
.aks-ncard h3 { min-height: 2lh; }   /* every title takes two lines */
.aks-ncard p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }   /* every excerpt takes two lines and ends with three dots */
/* the arrow of a card points right and turns 45 degrees up on hover */
:is(.aks-scard, .aks-ncard) :is(.aks-go, .aks-link) .aks-icon { transition: transform var(--aks-dur) var(--aks-ease); }
:is(.aks-scard, .aks-ncard):is(:hover, :focus-visible) :is(.aks-go, .aks-link) .aks-icon { transform: rotate(calc(var(--aks-arrow-turn) * -1)); }
.aks-scard .aks-media > img, .aks-ncard .aks-media > img { transition: transform calc(var(--aks-dur-reveal) * 1.4) var(--aks-ease); }
.aks-scard:hover .aks-media > img, .aks-ncard:hover .aks-media > img { transform: scale(var(--aks-zoom)); }
.aks-card-body { display: grid; gap: var(--aks-gap-text); align-content: start; grid-template-rows: auto 1fr auto; padding: var(--aks-pad-card); }
.aks-card-head { display: flex; align-items: center; gap: var(--aks-gap-text); }
.aks-scard .aks-card-head h3 { min-height: 2lh; display: flex; align-items: center; }   /* the icon and title row is two lines high in every card, so the paragraphs start together even when one title wraps */
@media (min-width: 1080px) { .aks-cards--4 .aks-scard h3 { min-height: 2lh; } .aks-cards--oneline .aks-scard h3, .aks-cards--oneline .aks-scard .aks-card-head h3 { min-height: 0; } }   /* a row whose titles all take one line has no room kept for a second one */   /* room for a two line title, so the paragraphs of four cards start on one line */
.aks-card-icon { display: inline-grid; place-items: center; flex: none; width: var(--aks-icon-box); height: var(--aks-icon-box); background: var(--aks-navy-900); color: var(--aks-white); --r: var(--aks-r-md); border-radius: var(--aks-r-md); }
@supports (corner-shape: superellipse(1.6)) { .aks-card-icon { corner-shape: superellipse(var(--aks-squircle-k)); border-radius: calc(var(--aks-r-md) * var(--aks-squircle-scale)); } }
.aks-card-icon .aks-icon { width: var(--aks-icon-md); height: var(--aks-icon-md); }
.aks-scard h3, .aks-ncard h3 { font-size: var(--aks-fs-xl); color: var(--aks-navy-900); text-wrap: balance; }
.aks-scard p, .aks-ncard p { color: var(--aks-gray-700); text-wrap: balance; }
.aks-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--aks-gap-text); min-height: var(--aks-icon-lg); }
.aks-ncard .aks-card-body { grid-template-rows: auto auto 1fr auto; }
.aks-ncard__date { font-size: var(--aks-fs-sm); color: var(--aks-gray-500); transition: color var(--aks-dur-ui) var(--aks-ease-ui); }

/* ---------- manufacturer logos, one box for all so they look equally big ---------- */
.aks-brands { display: grid; gap: var(--aks-gap-group); margin-top: var(--aks-gap-block); padding-top: var(--aks-gap-block); border-top: var(--aks-hair) solid var(--aks-line); }
.aks-brandgrid { display: grid; gap: var(--aks-gap-text); grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .aks-brandgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .aks-brandgrid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.aks-brandgrid li { display: grid; place-items: center; height: var(--aks-brand-cell-h); background: var(--aks-paper); --r: var(--aks-r-lg); border-radius: var(--aks-r-lg); }
@supports (corner-shape: superellipse(1.6)) { .aks-brandgrid li { corner-shape: superellipse(var(--aks-squircle-k)); border-radius: calc(var(--aks-r-lg) * var(--aks-squircle-scale)); } }
.aks-brandgrid a { display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; }
.aks-brandgrid img { height: auto; max-width: 80%; max-height: 70%; object-fit: contain; opacity: var(--aks-logo-rest); transition: opacity var(--aks-dur-ui) var(--aks-ease-ui); }
.aks-brandgrid li:hover img { opacity: var(--aks-logo-hover); }
.aks-brands .aks-prose { margin-top: 0; }

/* ---------- advantages, four plain cards: icon, a two line title, a two line paragraph ---------- */
.aks-acard { display: grid; gap: var(--aks-acard-gap); align-content: start; padding: var(--aks-pad-card); background: var(--aks-white); }
.aks-acard h3 { font-size: var(--aks-fs-xl); color: var(--aks-navy-900); text-wrap: balance; }
.aks-acard p { color: var(--aks-gray-700); text-wrap: balance; }
.aks-acard__text { display: grid; gap: var(--aks-gap-text); }

/* ---------- partners on a dark panel, group companies in equal cells ---------- */
.aks-partners { display: grid; gap: var(--aks-gap-block); align-content: center; padding: var(--aks-pad-card); background: var(--aks-navy-900); --r: var(--aks-r-xl); border-radius: var(--aks-r-xl); }
@supports (corner-shape: superellipse(1.6)) { .aks-partners { corner-shape: superellipse(var(--aks-squircle-k)); border-radius: calc(var(--aks-r-xl) * var(--aks-squircle-scale)); } }
.aks-partners figure { display: grid; gap: var(--aks-gap-tight); margin: 0; }
.aks-partners a { display: inline-flex; justify-self: start; max-width: 100%; }
.aks-partners img { height: auto; max-width: 100%; object-fit: contain; object-position: left center; }   /* full white as before, the logo is only a link now */   /* size comes from the width and height attributes, one area for every mark */
.aks-partners figcaption { font-size: var(--aks-fs-sm); color: var(--aks-text-dark); }
.aks-logo--invert { filter: brightness(0) invert(1); }
.aks-members { display: grid; gap: var(--aks-gap-group); margin-top: var(--aks-gap-block); }
.aks-label { font-size: var(--aks-fs-sm); font-weight: var(--aks-w-semibold); text-transform: uppercase; letter-spacing: var(--aks-tracking-label); color: var(--aks-navy-900); text-align: center; }   /* the one small label in capitals, used for the OMR group members */
.aks-members ul { display: grid; gap: var(--aks-gap-text); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .aks-members ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.aks-members li { display: grid; place-items: center; height: var(--aks-member-cell-h); background: var(--aks-paper); --r: var(--aks-r-lg); border-radius: var(--aks-r-lg); }
@supports (corner-shape: superellipse(1.6)) { .aks-members li { corner-shape: superellipse(var(--aks-squircle-k)); border-radius: calc(var(--aks-r-lg) * var(--aks-squircle-scale)); } }
.aks-members a { display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; }
.aks-members img { height: auto; max-width: 90%; object-fit: contain; filter: brightness(0); opacity: var(--aks-logo-rest); transition: opacity var(--aks-dur-ui) var(--aks-ease-ui); }
.aks-members li:hover img, .aks-members a:focus-visible img { opacity: var(--aks-logo-hover); }
.aks-social { display: flex !important; flex-wrap: wrap; gap: var(--aks-s-2) !important; }
.aks-social a { display: inline-grid; place-items: center; width: var(--aks-hit); height: var(--aks-hit); background: var(--aks-white); color: var(--aks-navy-900); transition: background-color var(--aks-dur-ui) var(--aks-ease-ui), color var(--aks-dur-ui) var(--aks-ease-ui); }
.aks-social a:is(:hover, :focus-visible) { background: var(--aks-orange-500); color: var(--aks-white); text-decoration: none; }   /* white with a navy symbol, orange with a white one under the pointer */
.aks-social .aks-icon { width: var(--aks-icon-md); height: var(--aks-icon-md); }
.aks-social img { width: var(--aks-icon); height: var(--aks-icon); }

/* ---------- store buttons, white pills with a grey label and the store symbol (document 25) ---------- */
.aks-store { display: flex; flex-wrap: wrap; gap: var(--aks-s-2); align-items: center; margin-top: var(--aks-gap-tight); }
.aks-btn--store { --btn-fg: var(--aks-gray-700); justify-content: center; gap: var(--aks-s-2); width: var(--aks-store-w); padding-inline: var(--aks-s-3); text-align: left; }   /* symbol and label are one group, centered in the button */
.aks-store__mark { display: flex; align-items: center; flex: none; height: var(--aks-store-icon-h); }
.aks-store__mark img { height: 100%; width: auto; max-width: none; }
.aks-store__apple { display: block; height: 100%; aspect-ratio: 0.81; background: currentColor; -webkit-mask: url("../img/stores/apple-glyph.svg") center / contain no-repeat; mask: url("../img/stores/apple-glyph.svg") center / contain no-repeat; }   /* grey like the text, the Google Play symbol keeps its colors */
.aks-store__t { display: grid; gap: var(--aks-s-0); line-height: 1; }
.aks-store__t small { font-size: var(--aks-fs-xs); font-weight: var(--aks-w-regular); }
.aks-store__t b { font-size: var(--aks-fs-md); font-weight: var(--aks-w-bold); }

/* ---------- app section: the illustration is large, tilted, half of it visible and cut by the lower edge of the section ---------- */
.aks-section--app { overflow: hidden; }
.aks-section--app > .aks-container { position: relative; z-index: 1; }
.aks-app-art-wrap { position: relative; margin: calc(var(--aks-gap-block) + var(--aks-app-art-drop-phone)) auto calc(var(--aks-app-art-cut-phone) * -1); width: var(--aks-app-art-w-phone); transform: rotate(var(--aks-app-art-tilt)); pointer-events: none; }   /* phone: tilted like on desktop, centered, its lower part cut by the edge of the section */
.aks-section--app { padding-bottom: 0; }
.aks-app-art-wrap .aks-app-art { width: 100%; }
.js:not(.static) .aks-app-art-wrap { will-change: transform; animation: aks-sway var(--aks-dur-sway) var(--aks-ease-sway) infinite; }
@media (min-width: 900px) {
  .aks-section--app { padding-bottom: var(--aks-sec); }
  .aks-app-art-wrap { position: absolute; margin: 0; z-index: 0; top: var(--aks-app-art-top); right: var(--aks-app-art-right); width: var(--aks-app-art-w); transform: rotate(var(--aks-app-art-tilt)); transform-origin: 50% 0; pointer-events: none; }
  .aks-app-art-wrap .aks-app-art { width: 100%; }
  .js:not(.static) .aks-app-art-wrap { transform-origin: 50% var(--aks-app-art-pivot); will-change: transform; backface-visibility: hidden; animation: aks-sway var(--aks-dur-sway) var(--aks-ease-sway) infinite; }
  .aks-section--app .aks-stack { max-width: var(--aks-app-copy-w); }
}

/* ---------- contact section is a band like Upravljamo vašim voznim parkom: the aerial photograph, the navy gradient, the corner glow ---------- */
.aks-band .aks-panel p { color: var(--aks-gray-700); font-size: var(--aks-fs-sm); }

/* ---------- the app illustration carries the film grain like every picture, cut with its own picture ---------- */
.aks-app-art-box { position: relative; }
.aks-app-art-box::after { content: ""; position: absolute; inset: 0; background: var(--aks-grain); background-size: var(--aks-grain-size) var(--aks-grain-size); opacity: var(--aks-grain-opacity); mix-blend-mode: overlay; mask-image: var(--art-mask); mask-size: 100% 100%; -webkit-mask-image: var(--art-mask); -webkit-mask-size: 100% 100%; pointer-events: none; }

/* ---------- browser autofill keeps the look of typed text: the site font, the site color, a white ground ---------- */
.aks-input:-webkit-autofill, .aks-input:-webkit-autofill:hover, .aks-input:-webkit-autofill:focus, .aks-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 100vmax var(--aks-white) inset; box-shadow: 0 0 0 100vmax var(--aks-white) inset;
  -webkit-text-fill-color: var(--aks-ink); caret-color: var(--aks-ink); font-family: var(--aks-font-sans); font-size: var(--aks-fs-md);
  transition: background-color 600000s 0s;
}

/* ---------- phone, below 640 px: card rows swipe sideways and show a piece of the next card, text links are as tall as a finger, the call button steps aside while the page is read downwards ---------- */
@media (max-width: 639px) {
  :is(.aks-cards--3, .aks-cards--4) { display: flex; gap: var(--aks-grid-gap); margin-inline: calc(var(--aks-gutter) * -1); padding-inline: var(--aks-gutter); overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--aks-gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  :is(.aks-cards--3, .aks-cards--4)::-webkit-scrollbar { display: none; }
  :is(.aks-cards--3, .aks-cards--4) > * { flex: 0 0 var(--aks-slide-w); min-width: 0; scroll-snap-align: start; }
  :root { --aks-reveal-distance: var(--aks-reveal-distance-sm); }
  .aks-btn { padding-inline: var(--aks-s-3); max-width: 100%; }   /* a long label still fits a 320 px screen */
  .aks-footer ul { gap: 0; }
  :is(.aks-footer__grid ul:not(.aks-social), .aks-footer__legal, .aks-contact--footer dd, .aks-contact dd) a { display: inline-flex; align-items: center; min-height: var(--aks-hit-min); padding-block: var(--aks-s-1); }
  .aks-footer__grid > :last-child { grid-column: 1 / -1; }
  a:has(> .aks-logo) { display: inline-flex; align-items: center; min-height: var(--aks-hit-min); }
  .aks-callfab { transition: transform var(--aks-dur-ui) var(--aks-ease-ui), opacity var(--aks-dur-ui) var(--aks-ease-ui); }
  body.menu-open .aks-callfab, .aks-callfab.is-away { transform: translateY(calc(var(--aks-fab) + var(--aks-s-4))); opacity: 0; pointer-events: none; }
}