/* AKS Fleet design tokens. Variables --aks-*.
   One place for every repeated value. Pages and components never write a size, radius, duration or color as a number,
   they use a token. Version 2 adds the look decided in stage 08 (document 16): font, squircle corners, grain, motion.
   Spacing is in multiples of 8. Type sizes are fluid between 360 px and 1440 px.
   Order: spacing, page layout, spacing roles, type, corners, lines and depth, grain, generic controls, motion, gradients and dark
   surfaces, then the values of single components in four groups (icons and form controls, logos and store buttons, hero car app
   section and photographs, grid pattern), then layers. To change how the site looks, change a value here, never in a component. */
/* a color that can fade between states, used by the service cards so the photograph gradient and the base change together. The initial value is the brand navy, a registered property cannot read another variable */
@property --card-bg { syntax: "<color>"; inherits: true; initial-value: #183870; }

:root {
  /* spacing */
  --aks-s-0: 4px;
  --aks-s-1: 8px;
  --aks-s-2: 16px;
  --aks-s-3: 24px;
  --aks-s-4: 32px;
  --aks-s-5: 48px;
  --aks-s-6: 64px;
  --aks-s-7: 96px;
  --aks-s-8: 128px;

  /* page layout */
  --aks-container: 1280px;
  --aks-container-narrow: 880px;
  --aks-gutter: clamp(16px, 4vw, 40px);
  --aks-grid-gap: clamp(16px, 2vw, 24px);
  --aks-sec: clamp(64px, 7vw, 96px);           /* vertical padding of a section */
  --aks-head-gap: var(--aks-s-2);              /* between a section title and the line under it */
  --aks-head-mb: clamp(32px, 4vw, 48px);       /* between a section head and its content */
  --aks-head-mb-air: clamp(40px, 5vw, 64px);   /* the same where the content is light, a table or text steps, and needs more air */
  --aks-line-w-strong: calc(var(--aks-line-w) * 2);   /* the one outline that is twice as strong as a divider, the table */
  /* spacing roles, every gap on the site is one of these (document 23, section 3) */
  --aks-gap-tight: var(--aks-s-1);             /* 8, label and value, icon and text */
  --aks-gap-text: var(--aks-s-2);              /* 16, text to text, title to its line */
  --aks-gap-group: var(--aks-s-3);             /* 24, items of one group, stack, grids */
  --aks-gap-block: var(--aks-s-5);             /* 48, between two blocks inside a section */
  --aks-pad-card: var(--aks-s-4);              /* 32, inside cards, tiles and panels */
  --aks-pad-card-sm: var(--aks-s-3);           /* 24, the same on phones */
  --aks-split-gap: clamp(32px, 5vw, 80px);     /* between the two columns of a split section */
  --aks-measure: 68ch;                         /* longest line of running text */
  --aks-header-h: 72px;

  /* type, Poppins only (see 05-brand/typography). Hierarchy comes from size, weight and tracking */
  --aks-w-regular: 400;
  --aks-w-medium: 500;
  --aks-w-semibold: 600;
  --aks-w-bold: 700;
  --aks-w-extrabold: 800;                                      /* home hero title only */
  /* type scale (document 23). Fluid between 360 and 1440 px. Roles:
     xs captions, sm secondary text, md body, lg lead and intro, xl card title, 2xl big figure label and price,
     3xl section title (h2), 4xl page title (h1 of inner pages), 5xl home hero title, statement the large paragraph under the hero, num figures. */
  --aks-fs-xs: 0.75rem;                                        /* 12 */
  --aks-fs-sm: 0.875rem;                                       /* 14 */
  --aks-fs-md: 1rem;                                           /* 16, text never smaller on phones */
  --aks-fs-lg: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);        /* 16 to 18 */
  --aks-fs-xl: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);        /* 18 to 22 */
  --aks-fs-2xl: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);     /* 20 to 26 */
  --aks-fs-3xl: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);       /* 28 to 40 */
  --aks-fs-4xl: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem);       /* 34 to 56 */
  --aks-fs-5xl: clamp(2.125rem, 1.3rem + 3vw, 3.75rem);        /* 34 to 60, home hero only */
  --aks-fs-statement: clamp(1.25rem, 1rem + 1.1vw, 1.875rem);  /* 20 to 30 */
  --aks-lh-tight: 1.06;
  --aks-lh-head: 1.16;
  --aks-lh-snug: 1.3;
  --aks-lh-body: 1.6;
  --aks-tracking-display: -0.03em;                            /* hero and figures */
  --aks-tracking-head: -0.02em;                               /* headings */
  --aks-tracking-label: 0.16em;                               /* the wide spacing of the one small capital label */
  --aks-tracking-caps: 0.06em;                                 /* functional small labels only */

  /* corners. Buttons and single line inputs are pills, everything else is a large rounded shape. All of it a squircle (Apple continuous corner),
     radius times the scale so it reads like the plain radius. Square corners are not used on the site. */
  --aks-r-pill: 999px;  /* buttons, inputs, small controls */
  --aks-r-sm: 8px;      /* small marks inside drawings */
  --aks-r-md: 16px;     /* textarea, dropdown items */
  --aks-r-lg: 24px;     /* panels, table, dropdown */
  --aks-r-xl: 32px;     /* hero, tiles, vehicle cards, photographs */
  --aks-squircle-k: 1.6;
  --aks-squircle-scale: 1.43;
  --aks-icon-radius: 22.37%;    /* app icon tile, share of the side */

  /* lines and depth. Flat by default, one soft shadow for floating things only */
  --aks-line-w: 1px;                /* every line on the site: outlines, inputs, dividers, underlines. One value */
  --aks-focus-w: 2px;               /* the keyboard focus ring only, it must stay clearly visible */
  --aks-hair: var(--aks-line-w);
  --aks-rule: var(--aks-line-w);
  --aks-line: var(--aks-gray-300);
  --aks-line-soft: var(--aks-gray-100);
  --aks-shadow-float: 0 1px 2px rgba(16, 26, 46, 0.06), 0 12px 32px rgba(16, 26, 46, 0.1);

  /* film grain, a static noise laid over every photograph, same strength everywhere */
  --aks-grain: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --aks-grain-size: 260px;
  --aks-grain-opacity: 0.14;

  /* controls */
  --aks-focus: var(--aks-focus-w) solid var(--aks-blue-600);
  --aks-focus-offset: 3px;

  /* motion, subtle and exact. Out-quart for things that arrive, in-out for things that move between states.
     No bounce, no overshoot, no looping decoration. All of it is removed for reduced motion. */
  --aks-dur-fast: 160ms;            /* small color changes */
  --aks-dur-ui: 200ms;              /* every hover, focus and press change on buttons, tiles, cards and links */
  --aks-dur: 280ms;                 /* arrows, panels, header */
  --aks-dur-slow: 480ms;            /* accordions, menus */
  --aks-dur-reveal: 1000ms;         /* section content arriving */
  --aks-dur-count: 1400ms;          /* figures counting up */
  --aks-ease: cubic-bezier(0.25, 1, 0.5, 1);
  --aks-ease-ui: cubic-bezier(0.4, 0, 0.2, 1);   /* standard ease for color and opacity */
  --aks-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --aks-ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);   /* soft, long settle for content arriving */
  --aks-reveal-distance: 24px;
  --aks-reveal-distance-sm: 16px;               /* phone */
  --aks-reveal-settle: 1.06;                    /* photographs in cards start this much larger */
  --aks-stagger: 90ms;
  --aks-arrow-turn: 45deg;          /* the arrow of a card turns this far upwards on hover */
  --aks-car-vis: clamp(280px, 30vw, 480px);   /* the part of the car that shows, the front half. The picture is twice as wide and runs off the screen edge */
  --aks-glow-size: calc(var(--aks-car-vis) * 1.8);   /* the orange glow behind the car */
  --aks-glow-blur: 64px;
  --aks-glow-shift-x: 80px;                  /* how far the glow centre sits to the right of its basic place */
  --aks-car-shift: 32px;                      /* how far the car sits to the left of the screen edge it comes in from, on desktop */
  --aks-glow-shift: 88px;                     /* how far the glow centre sits below the middle of its section */
  --aks-glow-alpha: 0.5;                       /* 50 percent */
  --aks-glow-corner-size: clamp(420px, 68vw, 1100px);   /* the two soft orange glows in the lower left corner of the hero photograph and the fleet band */
  --aks-glow-corner-alpha: 0.25;
  --aks-glow-corner-alpha-strong: 0.5;      /* the glow in the top right corner of the app section */               /* 25 percent */
  --aks-glow-corner-blur: 150px;               /* soft, so the edge of the circle is hardly seen */
  --aks-hero-zoom: 1.08;                       /* the hero photograph starts this much larger and settles to its size */
  --aks-dur-hero-zoom: 5s;
  --aks-hero-interval: 5s;                     /* time one hero picture stays, site.js reads it */
  --aks-dur-hero-fade: 1s;                     /* cross fade between hero pictures */
  --aks-dot: 10px;                             /* hero picture dots */
  --aks-dot-gap: 8px;
  --aks-glow-drift: 14px;                      /* how far the glow wanders, one way and back */
  --aks-dur-drift: 10s;
  --aks-car-top: 0px;              /* distance of the car from the top of its section on desktop. It is taller than the section and hangs over the lower edge */
  --aks-nudge: 4px;                 /* the arrow in a button moves this far to the right on hover */
  --aks-zoom: 1.03;                 /* photograph zoom on card hover */

  /* gradients and dark surfaces. Gradients exist for contrast on photographs and to give dark sections depth, never as decoration alone */
  --aks-line-dark: rgba(255, 255, 255, 0.16);
  --aks-text-dark: rgba(255, 255, 255, 0.74);
  --aks-white-50: rgba(255, 255, 255, 0.5);    /* the small note under the app text */
  --aks-white-75: rgba(255, 255, 255, 0.75);   /* paragraph on the service cards */
  --aks-navy-75: rgba(24, 56, 112, 0.75);      /* the same paragraph on the orange hover state */
  --aks-grad-hero: linear-gradient(90deg, rgba(8, 20, 43, 0.96) 0%, rgba(8, 20, 43, 0.8) 40%, rgba(8, 20, 43, 0.5) 75%, rgba(8, 20, 43, 0.12) 100%), linear-gradient(180deg, rgba(8, 20, 43, 0.35) 0%, rgba(8, 20, 43, 0) 30%, rgba(8, 20, 43, 0) 70%, rgba(8, 20, 43, 0.5) 100%);   /* navy over the photograph for the text, full at the left edge and almost clear at the right */
  --aks-grad-footer: linear-gradient(0deg, var(--aks-night) 0%, color-mix(in srgb, var(--aks-night) 82%, transparent) 25%, color-mix(in srgb, var(--aks-night) 45%, transparent) 55%, color-mix(in srgb, var(--aks-night) 12%, transparent) 80%, transparent 100%);   /* from the footer color up into the contact band, eased so there is no visible edge */
  --aks-grad-spill: linear-gradient(180deg, var(--aks-white) 0%, var(--aks-paper) 100%);   /* white under the hero photograph into the paper color of the next section. Only below the photograph, never beside it */
  --aks-hero-spill: clamp(48px, 6vw, 80px);   /* height of that gradient */
  --aks-hero-gap-title: var(--aks-s-2);     /* hero title to line */
  --aks-hero-gap-lead: var(--aks-s-5);      /* hero line to buttons */
  --aks-grad-band: linear-gradient(90deg, rgba(8, 20, 43, 0.96) 0%, rgba(8, 20, 43, 0.84) 45%, rgba(8, 20, 43, 0.62) 100%);
  --aks-grad-dark: linear-gradient(160deg, var(--aks-navy-800) 0%, var(--aks-navy-950) 55%, var(--aks-night) 100%);
  --aks-tint-navy: rgba(24, 56, 112, 0.08);      /* hover fill of an outline button on light */
  --aks-tint-navy-press: rgba(24, 56, 112, 0.16);
  --aks-tint-white: rgba(255, 255, 255, 0.12);   /* hover fill of an outline button on dark */
  --aks-tint-white-press: rgba(255, 255, 255, 0.22);
  --aks-grad-glow: radial-gradient(60% 60% at 80% 20%, rgba(8, 144, 200, 0.28) 0%, rgba(8, 144, 200, 0) 100%);
  --aks-focus-dark: var(--aks-focus-w) solid var(--aks-white);

  /* icons, hit sizes and form controls */
  --aks-label-line: 40%;                       /* strength of the frame of a small label, mixed from the text color */
  --aks-acard-gap: var(--aks-s-5);             /* 48, between the icon and the title in the advantage cards */
  --aks-hit: 48px;                  /* minimum height of a button or input, 44 px is the lower limit */
  --aks-icon: 20px;                 /* interface icons, one size, plus --aks-icon-sm for dense places */
  --aks-icon-sm: 16px;
  --aks-icon-lg: 28px;              /* the arrow at the corner of tiles, cards and rows */
  --aks-icon-xl: 40px;              /* the icon in the advantage box */
  --aks-icon-stroke: 2;
  --aks-hit-min: 44px;              /* lower limit for dense places such as the header on phones */
  --aks-slide-w: 84%;               /* phone: width of one card in a swipeable row, the next card shows beside it */
  --aks-check-size: 22px;           /* the checkbox of the consent line */
  --aks-fab: 56px;                  /* round call button, also the height of a menu row */
  --aks-row-h: 72px;                /* accordion question row */
  --aks-textarea-h: 88px;
  --aks-icon-md: 24px;              /* icon inside a small box */
  --aks-icon-box: 48px;             /* the box behind a card icon */
  --aks-underline-offset: 0.25em;                /* every underlined link */
  --aks-gap-hair: 2px;                           /* the smallest gap, inside the dropdown items */
  --aks-table-min: 640px;                        /* narrowest the table is drawn as a table, below it becomes rows */

  /* logos, partners and store buttons */
  --aks-sub-w: 360px;                          /* services dropdown */
  --aks-logo-h: 36px;               /* header logo */
  --aks-logo-h-footer: 44px;        /* footer logo, a little larger than in the header */
  --aks-btn-lg: 56px;               /* height of every button, the header excepted */
  --aks-btn-hero-w: 248px;          /* the two hero buttons share this width */
  --aks-logo-rest: 0.7;                          /* every grey logo at rest, manufacturers and OMR group members */
  --aks-logo-hover: 1;                           /* and under the pointer */
  --aks-store-w: 216px;             /* both store buttons share one width */
  --aks-store-icon-h: 28px;         /* the Apple and Google Play symbols in the store buttons */
  --aks-brand-cell-h: 80px;
  --aks-member-cell-h: 96px;
  --aks-tracking-btn: 0.01em;                    /* the label of a button */
  --aks-sub-w-lang: 220px;                       /* the language dropdown */

  /* hero, car, app section and photographs */
  --aks-card-fade-start: 50%;                  /* where the base color starts to cover the photograph of a card, from its top edge */
  --aks-more-gap: var(--aks-s-6);              /* 64, between a row of cards and the button under it */
  --aks-contact-bg-pos: 25% 50%;    /* which part of the wide contact photograph stays in view */
  --aks-hero-h: clamp(640px, 90vh, 900px);
  --aks-hero-pad: clamp(24px, 4vw, 56px);
  --aks-phone-mock: 280px;
  --aks-app-art-w: clamp(280px, 28vw, 440px);   /* the app illustration on desktop, larger than the section and cut by its lower edge */
  --aks-app-art-w-phone: 66vw;                   /* phone: width of the tilted illustration */
  --aks-app-art-drop-phone: 8vw;                 /* phone: how far the illustration sits lower than the text above it */
  --aks-app-art-cut-phone: 26vw;                 /* phone: how far its lower part runs below the section */
  --aks-app-art-tilt: 18deg;
  --aks-app-art-sway: 5deg;                      /* how far the illustration swings to each side of its tilt */
  --aks-app-art-pivot: 65%;                      /* the swing turns around this height of the illustration */
  --aks-dur-sway: 10s;                           /* one swing there and back */
  --aks-ease-sway: cubic-bezier(0.37, 0, 0.63, 1);   /* sine in and out, slow and soft */
  --aks-app-art-top: 2%;
  --aks-app-art-right: 17vw;
  --aks-fs-note: 0.8125rem;                      /* 13, the small note under the app text */
  --aks-hero-copy-w: 48rem;                      /* widest the hero text block gets */
  --aks-hero-min-h-phone: 600px;                 /* lowest the hero gets on a phone */
  --aks-statement-w: 34em;                       /* widest the statement under the hero gets */
  --aks-app-copy-w: 560px;                       /* widest the text of the app section gets */
  --aks-shadow-car: 0 var(--aks-s-3) var(--aks-s-3) rgba(16, 26, 46, 0.2);   /* the soft shadow of the car under the hero */
  --aks-shadow-art: 0 24px 48px rgba(0, 0, 0, 0.4);                          /* the shadow of the app illustration */
  --aks-footer-spill: calc(var(--aks-hero-spill) * 2);   /* the navy gradient from the footer up into the contact band, twice the height of the one under the hero */

  /* grid pattern on the paper sections and the app section */
  --aks-pattern-color: color-mix(in srgb, var(--aks-gray-500) 5%, transparent);   /* the grid pattern on the paper sections, the site grey at 5 percent, lines as thick as the table outline */
  --aks-pattern-color-light: color-mix(in srgb, var(--aks-white) 5%, transparent);   /* and the same pattern in white on the dark app section */
  --aks-pattern-size: 64px;                      /* one cell of the grid */
  --aks-pattern-dot: 3px;                        /* radius of the dot at each crossing */
  --aks-pattern-patches: radial-gradient(ellipse 38% 40% at 12% 35%, #000 0%, transparent 70%), radial-gradient(ellipse 30% 40% at 62% 65%, #000 0%, transparent 70%), radial-gradient(ellipse 26% 36% at 92% 30%, #000 0%, transparent 70%);   /* where the pattern shows, first variant, every patch ends well before the section edges */
  --aks-pattern-patches-b: radial-gradient(ellipse 34% 40% at 88% 62%, #000 0%, transparent 70%), radial-gradient(ellipse 30% 38% at 35% 33%, #000 0%, transparent 70%), radial-gradient(ellipse 22% 34% at 8% 66%, #000 0%, transparent 70%);   /* and the second, so neighbouring sections differ */

  /* layers */
  --aks-z-header: 100;
  --aks-z-menu: 200;
  --aks-z-float: 300;
  --aks-z-skip: 400;
}

/* Breakpoints, as used by min-width media queries (custom properties cannot be used in them)
   480  large phone
   640  phone ends here, phone rules are one block below 640
   900  tablet, grids go to columns, footer goes to columns
   1080 three and four column grids
   1200 seven column timeline
   1360 desktop header, the full menu with the services dropdown and the language dropdown replace the menu button (Poppins is wide, the English menu needs 1243 px of room)
   1440 wide, container stops growing at 1280 */