*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  font-family: Barlow, Helvetica Neue, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  --tw-text-opacity: 1;
  color: rgb(10 19 48 / var(--tw-text-opacity, 1));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ---------- heading rhythm ----------
     One line-height for every heading is what made the type feel congested:
     1.04 is a logotype setting, and it only holds for a single short line.
     These headings routinely wrap to two or three lines, so each level now
     carries a leading and a tracking sized to its own optical weight, tight
     at the top of the scale where the counters are large and opening up as
     the type gets smaller. */

h1, h2, h3, h4 {
  font-family: Archivo, Helvetica Neue, Arial, sans-serif;
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  line-height: 1.08;
  letter-spacing: -0.032em;
}

/* A default size on h2 so a heading outside a layout component is never
     left at body size; every layout component overrides it. */

h2 {
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  line-height: 1.14;
  letter-spacing: -0.024em;
}

h3 {
  line-height: 1.3;
  letter-spacing: -0.012em;
}

h4 {
  line-height: 1.4;
  letter-spacing: -0.008em;
}

/* Stops a single short word being left stranded on a paragraph's last line. */

p {
  text-wrap: pretty;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

ul, ol {
  margin: 0px;
  list-style-type: none;
  padding: 0px;
}

.font-mono, table {
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 3px solid #E95010;
  outline-offset: 3px;
  border-radius: 4px;
}

::-moz-selection {
  background: #E95010;
  color: #fff;
}

::selection {
  background: #E95010;
  color: #fff;
}

/* Phone and email links inside page content were 19px tall, well under the
     44px a thumb needs. Padding grows the hit area, negative margin keeps the
     visual rhythm identical. */

@media (max-width: 1023px) {
  main a[href^="tel:"],
    main a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -0.35rem;
    padding-block: 0.35rem;
  }
}

/* Breadcrumb links were 13px tall. WCAG 2.2 asks for 24px minimum on
     targets like these; this gives 32px without inflating the bar. */

nav[aria-label="Breadcrumb"] a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

/* Stops iOS tinting a grey box over tapped links and buttons. */

a, button, summary, [role="button"] {
  -webkit-tap-highlight-color: rgba(233,80,16,.18);
}

/* A tapped card or link should give immediate feedback on touch, where
     there is no hover state to rely on. */

@media (hover: none) {
  a:active, button:active {
    opacity: .82;
  }
}

/* Long-press on a photograph should not offer the iOS callout menu for a
     decorative image. */

.banner__img, .page-banner img[aria-hidden="true"] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* The wordmark is the home link and was 40px tall, just under the target. */

.site-header .brand {
  min-height: 44px;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

/* ============================================================
     LAYOUT
     A single content rail at 1240px with generous but not cavernous
     gutters. Section padding steps up three times so the page breathes
     on a desktop without leaving a phone scrolling through emptiness.
     ============================================================ */

.wrap {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (min-width: 640px) {
  .wrap {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .wrap {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 768px) {
  .section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

@media (min-width: 1024px) {
  .section {
    padding-top: 76px;
    padding-bottom: 76px;
  }
}

.section-sm {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .section-sm {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

@media (min-width: 1024px) {
  .section-sm {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

/* Centred section header: eyebrow, heading, optional lede. */

.section-head {
  margin-left: auto;
  margin-right: auto;
  max-width: 44rem;
  text-align: center;
}

.section-head :where(.eyebrow) {
  margin-bottom: 1rem;
  justify-content: center;
}

.section-head :where(h2) {
  font-size: clamp(1.55rem, 2.4vw, 2.05rem);
}

.section-head :where(p) {
  margin-top: 1rem;
  font-size: clamp(0.98rem, 1.1vw, 1.06rem);
  line-height: 1.7;
  --tw-text-opacity: 1;
  color: rgb(90 103 132 / var(--tw-text-opacity, 1));
}

.section-head :where(p + p) {
  margin-top: 0.75rem;
}

/* Left aligned variant for split headers. */

.section-head-left {
  max-width: 46rem;
  text-align: left;
}

.section-head-left :where(.eyebrow) {
  justify-content: flex-start;
}

/* Measure control. Body copy over ~72 characters is tiring to read. */

/* ============================================================
     SECTION LAYOUTS
     Three shapes for a heading-plus-body block, used in rotation so a
     long page does not read as the same two columns eleven times over.
     ============================================================ */

/* 1. Narrow heading rail beside the copy. The heading column is fixed
        rather than proportional, so it never leaves a half-empty column
        the width of the page next to three lines of type. */

/* minmax(0,…) on the single-column case too: without it a wide child, such
     as a data table inside its own scroll container, sets the track width and
     pushes the whole page sideways on a phone. */

.split {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  max-width: 64rem;
  grid-template-columns: minmax(0,1fr);
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
  row-gap: 1rem;
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: minmax(0,17rem) minmax(0,1fr);
    -moz-column-gap: 3rem;
         column-gap: 3rem;
  }
}

.split > * {
  min-width: 0;
}

.split > :where(h2) {
  font-size: clamp(1.3rem, 1.85vw, 1.6rem);
}

/* 2. Editorial: heading over the full measure, body set in two columns.
        Halves the height of a long text block and fills the line. */

.editorial {
  margin-left: auto;
  margin-right: auto;
  max-width: 68rem;
}

.editorial > :where(h2) {
  max-width: 32ch;
  font-size: clamp(1.4rem, 2.05vw, 1.75rem);
}

.editorial-body {
  margin-top: 1.25rem;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 229 242 / var(--tw-border-opacity, 1));
  padding-top: 1.5rem;
}

@media (min-width: 768px) {
  .editorial-body {
    -moz-columns: 2;
         columns: 2;
    -moz-column-gap: 3rem;
         column-gap: 3rem;
  }
}

.editorial-body > p {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

/* 3. Feature: copy beside a photograph, so at least one block per page
        carries an image inside the content rather than beside nothing. */

.feature {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  align-items: center;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .feature {
    grid-template-columns: minmax(0,1.02fr) minmax(0,0.98fr);
    gap: 3.5rem;
  }
}

.feature > * {
  min-width: 0;
}

.feature > :where(h2), .feature-copy > :where(h2) {
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
}

/* A photograph that fills its panel. Used where the frame is a designed
     shape rather than a slot for an unknown ratio: the focal point is set per
     image so the vehicle stays in frame at every width. */

.media {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgb(10 24 70 / var(--tw-bg-opacity, 1));
}

.media > img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Full-bleed photographic break between sections. Short enough to read as
     a band rather than a page of its own. */

/* Photographic break between sections. Held to the content rail so the
     supplied files are scaled down rather than up, at ratios that keep most
     of the frame in view instead of a magnified sliver of it. */

.media-band {
  position: relative;
  isolation: isolate;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgb(5 13 43 / var(--tw-bg-opacity, 1));
}

@media (min-width: 640px) {
  .media-band {
    aspect-ratio: 16/9;
  }
}

@media (min-width: 1024px) {
  .media-band {
    aspect-ratio: 2/1;
  }
}

.media-band > img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* A quiet vignette, so the band reads as part of the page rather than a
     photograph dropped into it. */

.media-band::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0px;
  background: linear-gradient(180deg, rgba(5,13,43,.14) 0%, rgba(5,13,43,0) 38%, rgba(5,13,43,.30) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

/* ============================================================
     SIGNATURE MARK: registration plate badge
     Echoes the yellow commercial number plate carried by every
     licensed passenger vehicle in India. Recurring identity mark.
     ============================================================ */

/* Navy on orange for the same contrast reason as the primary button, and it
     is closer to a real commercial plate than white on orange ever was. */

.plate {
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 4px;
  border-width: 1.5px;
  border-color: rgb(5 13 43 / 0.7);
  --tw-bg-opacity: 1;
  background-color: rgb(233 80 16 / var(--tw-bg-opacity, 1));
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.11em;
  --tw-text-opacity: 1;
  color: rgb(5 13 43 / var(--tw-text-opacity, 1));
}

@media (max-width: 1023px) {
  .plate {
    font-size: 12.5px;
  }
}

.plate {
  box-shadow: 0 2px 8px rgba(10,24,70, .18);
}

.plate-ghost {
  --tw-border-opacity: 1;
  border-color: rgb(221 229 242 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(10 19 48 / var(--tw-text-opacity, 1));
  box-shadow: 0 2px 8px rgba(10,24,70, .06);
}

/* ---------- eyebrow ---------- */

.eyebrow {
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  --tw-text-opacity: 1;
  color: rgb(42 75 180 / var(--tw-text-opacity, 1));
}

@media (max-width: 1023px) {
  .eyebrow {
    font-size: 12.5px;
  }
}

.eyebrow::before {
  content: '';
  display: block;
  height: 3px;
  width: 1.75rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(233 80 16 / var(--tw-bg-opacity, 1));
}

.site-footer svg[stroke="currentColor"].eyebrow-light {
  --tw-text-opacity: 1;
  color: rgb(255 127 69 / var(--tw-text-opacity, 1));
}

.eyebrow-light {
  --tw-text-opacity: 1;
  color: rgb(197 63 8 / var(--tw-text-opacity, 1));
}

.eyebrow-invert {
  color: rgb(255 255 255 / 0.85);
}

.eyebrow-invert::before {
  --tw-bg-opacity: 1;
  background-color: rgb(255 127 69 / var(--tw-bg-opacity, 1));
}

/* ============================================================
     BUTTONS
     Pill geometry. It is the single strongest signal that this is a
     travel and transport brand rather than a software product, and it
     pairs with the rounded card language used everywhere else.
     ============================================================ */

.\!btn {
  min-height: 48px !important;
}

.btn {
  min-height: 48px;
}

.\!btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border-width: 1.5px;
  border-color: transparent;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: center;
  font-family: Archivo, Helvetica Neue, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (max-width: 1023px) {
  .\!btn {
    font-size: 13.5px;
  }
}

.\!btn:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\!btn:active {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border-width: 1.5px;
  border-color: transparent;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: center;
  font-family: Archivo, Helvetica Neue, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (max-width: 1023px) {
  .btn {
    font-size: 13.5px;
  }
}

.btn:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.btn:active {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.btn-sm {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 12px;
}

@media (max-width: 1023px) {
  .btn-sm {
    font-size: 13px;
  }
}

.btn-sm {
  min-height: 44px;
}

.btn-lg {
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 13.5px;
  min-height: 52px;
}

/* The primary action carries a shallow gradient and a sheen that crosses it
     on hover. On a page of photographs a flat fill loses its status as the
     single strongest element; a lit surface holds it. */

/* Deep navy on orange, not white. White on #E95010 measures 3.74:1 and fails
     AA at this text size; navy-950 measures between 4.7:1 and 5.9:1 across the
     whole gradient and passes. It is also the second logo colour, so the
     primary action is built from the two brand inks and nothing else. */

.btn-orange {
  position: relative;
  overflow: hidden;
  --tw-border-opacity: 1;
  border-color: rgb(233 80 16 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(5 13 43 / var(--tw-text-opacity, 1));
}

.btn-orange:hover {
  --tw-border-opacity: 1;
  border-color: rgb(197 63 8 / var(--tw-border-opacity, 1));
}

.btn-orange {
  background-image: linear-gradient(135deg, #ff8a52 0%, #E95010 55%, #e04a0d 100%);
  box-shadow: 0 10px 24px -12px rgba(233,80,16, .75);
}

.btn-orange:hover {
  background-image: linear-gradient(135deg, #ff9764 0%, #ef5613 55%, #e6500f 100%);
  box-shadow: 0 18px 36px -14px rgba(233,80,16, .82);
}

.btn-orange::after {
  content: '';
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  width: 33.333333%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  transform: translateX(-160%) skewX(-18deg);
}

.btn-orange:hover::after {
  animation: sheen .75s ease-out forwards;
}

.btn-navy {
  --tw-border-opacity: 1;
  border-color: rgb(16 42 131 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.btn-navy:hover {
  --tw-border-opacity: 1;
  border-color: rgb(28 58 156 / var(--tw-border-opacity, 1));
}

.btn-navy {
  background-image: linear-gradient(135deg, #1c3a9c 0%, #102A83 55%, #0a1846 100%);
  box-shadow: 0 10px 24px -14px rgba(16,42,131, .85);
}

.btn-navy:hover {
  background-image: linear-gradient(135deg, #2a4bb4 0%, #1c3a9c 55%, #0c2068 100%);
  box-shadow: 0 18px 36px -16px rgba(16,42,131, .9);
}

.btn-line {
  --tw-border-opacity: 1;
  border-color: rgb(221 229 242 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(10 24 70 / var(--tw-text-opacity, 1));
}

.btn-line:hover {
  --tw-border-opacity: 1;
  border-color: rgb(10 24 70 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(244 247 252 / var(--tw-bg-opacity, 1));
}

/* On photography: a glass outline that stays legible over any frame. */

.btn-glass {
  border-color: rgb(255 255 255 / 0.45);
  background-color: rgb(255 255 255 / 0.1);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.btn-glass:hover {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  background-color: rgb(255 255 255 / 0.2);
}

.arrow-link {
  /* negative margin keeps the visual position while the padding grows the
       tap area to 44px, so layout is unchanged but thumbs land reliably */
  margin-top: -0.75rem;
  margin-bottom: -0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-family: Archivo, Helvetica Neue, Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  --tw-text-opacity: 1;
  color: rgb(42 75 180 / var(--tw-text-opacity, 1));
  min-height: 44px;
}

.arrow-link svg {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.arrow-link:hover svg {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* ============================================================
     PHOTO FRAME
     The supplied photographs arrive in mixed portrait and landscape
     ratios. Cropping them to a shared ratio would cut vehicles in half,
     so instead the whole frame is filled with a blurred, darkened copy
     of the same photograph and the real image sits over it with
     object-fit:contain. Nothing is ever cropped or stretched, and the
     frame still reads as a solid block in the grid.
     ============================================================ */

/* Hairline so a pale photograph does not bleed into a pale section. */

.group:hover .photo-zoom .photo-img,
  .photo-zoom:hover .photo-img {
  --tw-scale-x: 1.04;
  --tw-scale-y: 1.04;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Caption strip that floats on the frame. */

/* ============================================================
     PAGE BANNER
     Every page opens on a photograph with a graded scrim over it. The
     scrim is a two-axis gradient rather than a flat wash so the text
     side stays dark enough for AA contrast while the far side keeps the
     photograph readable.
     ============================================================ */

.page-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(5 13 43 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.banner-media {
  position: absolute;
  inset: 0px;
  z-index: -20;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Three stacked washes rather than one: a navy horizontal grade that holds
     the type side at AA, a vertical foot that anchors the banner to the page,
     and a low brand-navy tint that pulls the photography towards the logo
     blue instead of leaving it a neutral grey. */

.banner-scrim {
  position: absolute;
  inset: 0px;
  z-index: -10;
  background:
      linear-gradient(100deg, rgba(5,13,43, .93) 0%, rgba(5,13,43, .76) 42%, rgba(5,13,43, .34) 100%),
      linear-gradient(0deg, rgba(5,13,43, .82) 0%, rgba(5,13,43, .10) 55%, rgba(5,13,43, .44) 100%),
      linear-gradient(120deg, rgba(16,42,131, .48) 0%, rgba(16,42,131, 0) 62%);
}

/* A single orange hairline where the banner meets the page: the smallest
     possible piece of brand, and it stops the photograph ending on nothing. */

.page-banner::after {
  content: '';
  pointer-events: none;
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 10;
  height: 3px;
  background: linear-gradient(90deg, #E95010 0%, #ff7f45 32%, rgba(233,80,16,0) 88%);
}

/* A thin warm edge so the banner meets the cream page cleanly. */

.banner-inner {
  position: relative;
  width: 100%;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 768px) {
  .banner-inner {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

@media (min-width: 1024px) {
  .banner-inner {
    padding-top: 68px;
    padding-bottom: 68px;
  }
}

/* Phones compress the horizontal gradient into almost nothing, so the scrim
     switches to an even vertical veil there: the photograph still reads and the
     type keeps its contrast. */

@media (max-width: 767px) {
  .banner-scrim {
    background: linear-gradient(180deg, rgba(5,13,43,.74) 0%, rgba(5,13,43,.58) 42%, rgba(5,13,43,.93) 100%);
  }
}

.banner-inner :where(h1) {
  font-size: clamp(1.7rem, 2.7vw, 2.3rem);
  font-weight: 800;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.banner-inner :where(p) {
  color: rgb(255 255 255 / 0.85);
}

/* Breadcrumb sitting on the photograph. */

.crumb {
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgb(255 255 255 / 0.6);
}

@media (max-width: 1023px) {
  .crumb {
    font-size: 12px;
  }
}

.crumb a {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.crumb a:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.crumb [aria-current='page'] {
  color: rgb(255 255 255 / 0.95);
}

.crumb-sep {
  color: rgb(255 255 255 / 0.3);
}

/* ============================================================
     FORM FIELDS
     ============================================================ */

.flabel {
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.5rem;
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  --tw-text-opacity: 1;
  color: rgb(90 103 132 / var(--tw-text-opacity, 1));
}

@media (max-width: 1023px) {
  .flabel {
    font-size: 12px;
  }
}

.fctl {
  /* 16px is deliberate: iOS Safari auto-zooms the viewport on focus for any
       field under 16px. Stepping down to 15px on desktop keeps the visual weight. */
  width: 100%;
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 229 242 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(244 247 252 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  font-family: Barlow, Helvetica Neue, Arial, sans-serif;
  font-size: 16px;
  --tw-text-opacity: 1;
  color: rgb(10 19 48 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.fctl:hover {
  --tw-border-opacity: 1;
  border-color: rgb(255 167 124 / var(--tw-border-opacity, 1));
}

.fctl:focus {
  --tw-border-opacity: 1;
  border-color: rgb(233 80 16 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(233 80 16 / 0.1);
}

@media (min-width: 1024px) {
  .fctl {
    font-size: 15px;
  }
}

.fctl {
  min-height: 52px;
}

.fctl::-moz-placeholder {
  color: rgb(90 103 132 / 0.55);
}

.fctl::placeholder {
  color: rgb(90 103 132 / 0.55);
}

select.fctl {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235a6784' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-position: right 0.85rem center;
}

.filter {
  min-height: 44px;
}

/* ---------- footer links: 17px tall was far too tight for a thumb ---------- */

/* One uniform row height sets the whole footer rhythm. 44px on touch for the
     tap target, tightened to 34px from lg up where input is a mouse, which stops
     the columns reading as loose and unaligned. The -ml-1/px-1 pair keeps the
     text optically flush with the column heading while the hit area stays wide. */

.foot-link {
  display: flex;
  align-items: center;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 15px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.foot-link:hover {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-text-opacity: 1;
  color: rgb(10 24 70 / var(--tw-text-opacity, 1));
}

.foot-link {
  min-height: 44px;
}

@media (pointer: fine) and (min-width: 1024px) {
  .foot-link {
    min-height: 34px;
  }
}

/* ============================================================
     CARDS
     ============================================================ */

.card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 229 242 / var(--tw-border-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.card:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(255 167 124 / var(--tw-border-opacity, 1));
}

.card {
  /* A barely-there vertical grade rather than flat white. On a grid of six
       it is what stops the cards reading as printed boxes. */
  background-image: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  box-shadow: 0 1px 2px rgba(10,24,70, .04), 0 8px 24px -18px rgba(10,24,70, .35);
}

.card:hover {
  box-shadow: 0 3px 6px rgba(10,24,70, .06), 0 30px 56px -28px rgba(16,42,131, .45);
}

/* Content card with a quiet rule at the top: used for the text-only
     service and feature blocks so a wall of cards gains a top edge to
     align on and stops reading as an undifferentiated grid. */

.card-tick {
  position: relative;
}

.card-tick::before {
  content: '';
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 3px;
  transform-origin: left;
  --tw-scale-x: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(233 80 16 / var(--tw-bg-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.card-tick:hover::before {
  --tw-scale-x: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.vcard .photo {
  border-radius: 0px;
}

.vcard .photo::after {
  border-radius: 0px;
}

/* Soft tinted panel used for asides and callouts. */

.\!panel {
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 229 242 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
}

@media (min-width: 640px) {
  .\!panel {
    padding: 2rem;
  }
}

.panel {
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 229 242 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
}

@media (min-width: 640px) {
  .panel {
    padding: 2rem;
  }
}

.\!panel {
  box-shadow: 0 1px 2px rgba(10,24,70, .04), 0 18px 44px -30px rgba(10,24,70, .4) !important;
}

.panel {
  box-shadow: 0 1px 2px rgba(10,24,70, .04), 0 18px 44px -30px rgba(10,24,70, .4);
}

/* ---------- destination board ---------- */

.board {
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
  row-gap: 0.625rem;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.2);
  background-color: rgb(255 255 255 / 0.1);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgb(255 255 255 / 0.8);
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

@media (max-width: 1023px) {
  .board {
    font-size: 12.5px;
  }
}

/* ============================================================
     ROUTE RAIL (fixed section navigator)
     ============================================================ */

.rail-dot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  text-align: left;
}

.rail-dot i {
  display: block;
  height: 0.625rem;
  width: 0.625rem;
  flex: none;
  border-radius: 9999px;
  border-width: 1.5px;
  border-color: rgb(255 255 255 / 0.5);
  background-color: rgb(255 255 255 / 0.3);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.rail-dot span {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgb(255 255 255 / 0);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

@media (max-width: 1023px) {
  .rail-dot span {
    font-size: 12px;
  }
}

.\!rail:hover .rail-dot span {
  color: rgb(255 255 255 / 0.7);
}

.rail:hover .rail-dot span {
  color: rgb(255 255 255 / 0.7);
}

.rail-dot[aria-current='true'] i {
  --tw-scale-x: 1.25;
  --tw-scale-y: 1.25;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(255 127 69 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(233 80 16 / var(--tw-bg-opacity, 1));
}

.rail-dot[aria-current='true'] span {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.rail-dot:hover i {
  --tw-border-opacity: 1;
  border-color: rgb(255 127 69 / var(--tw-border-opacity, 1));
}

/* light variant when the rail sits over a pale section */

.rail-light .rail-dot i {
  border-color: rgb(10 24 70 / 0.3);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.rail-light .rail-dot span {
  color: rgb(10 24 70 / 0);
}

.rail-light:hover .rail-dot span {
  color: rgb(10 24 70 / 0.55);
}

.rail-light .rail-dot[aria-current='true'] i {
  --tw-border-opacity: 1;
  border-color: rgb(197 63 8 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(233 80 16 / var(--tw-bg-opacity, 1));
}

.rail-light .rail-dot[aria-current='true'] span {
  --tw-text-opacity: 1;
  color: rgb(10 24 70 / var(--tw-text-opacity, 1));
}

/* ============================================================
     HEADER — transparent over the hero, solid on scroll
     ============================================================ */

.site-header {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  z-index: 50;
  border-bottom-width: 1px;
  border-color: transparent;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.site-header .hdr-inner {
  display: flex;
  height: 84px;
  align-items: center;
  gap: 1.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.site-header .wordmark {
  --tw-text-opacity: 1;
  color: rgb(10 24 70 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.site-header .nav-link {
  position: relative;
  display: block;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: Archivo, Helvetica Neue, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgb(10 24 70 / 0.8);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.site-header .nav-link:hover {
  --tw-text-opacity: 1;
  color: rgb(10 24 70 / var(--tw-text-opacity, 1));
}

@media (min-width: 1280px) {
  .site-header .nav-link {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }
}

.site-header .nav-link::after {
  content: '';
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.25rem;
  height: 2px;
  transform-origin: left;
  --tw-scale-x: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(233 80 16 / var(--tw-bg-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

/* Current-page underline. aria-current="page" stays on the one link that is
     genuinely the current page; a parent whose child page is open carries
     data-active instead, so only a single element per nav claims aria-current. */

.site-header .nav-link:hover::after,
  .site-header .nav-link[data-active]::after,
  .site-header .nav-link[aria-current='page']::after {
  --tw-scale-x: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.site-header .hdr-tel {
  font-variant-numeric: tabular-nums;
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 13px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(10 24 70 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

@media (max-width: 1023px) {
  .site-header .hdr-tel {
    font-size: 13.5px;
  }
}

@media (min-width: 1280px) {
  .site-header .hdr-tel {
    display: flex;
  }
}

.site-header .burger-bar, .site-header .burger-bar::before, .site-header .burger-bar::after {
  --tw-bg-opacity: 1;
  background-color: rgb(10 24 70 / var(--tw-bg-opacity, 1));
}

.site-header .burger {
  --tw-border-opacity: 1;
  border-color: rgb(221 229 242 / var(--tw-border-opacity, 1));
}

.site-header.is-stuck {
  --tw-border-opacity: 1;
  border-color: rgb(221 229 242 / var(--tw-border-opacity, 1));
  background-color: rgb(255 255 255 / 0.95);
  --tw-backdrop-blur: blur(8px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  box-shadow: 0 1px 0 rgba(10,24,70,.04), 0 10px 30px -22px rgba(10,24,70,.5);
}

.site-header.is-stuck .hdr-inner {
  height: 68px;
}

.site-header.is-stuck .wordmark {
  --tw-text-opacity: 1;
  color: rgb(10 24 70 / var(--tw-text-opacity, 1));
}

.site-header.is-stuck .nav-link {
  color: rgb(10 24 70 / 0.8);
}

.site-header.is-stuck .nav-link:hover {
  --tw-text-opacity: 1;
  color: rgb(10 24 70 / var(--tw-text-opacity, 1));
}

.site-header.is-stuck .hdr-tel {
  --tw-text-opacity: 1;
  color: rgb(10 24 70 / var(--tw-text-opacity, 1));
}

.site-header.is-stuck .burger {
  --tw-border-opacity: 1;
  border-color: rgb(221 229 242 / var(--tw-border-opacity, 1));
}

.site-header.is-stuck .burger-bar,
  .site-header.is-stuck .burger-bar::before,
  .site-header.is-stuck .burger-bar::after {
  --tw-bg-opacity: 1;
  background-color: rgb(10 24 70 / var(--tw-bg-opacity, 1));
}

/* --- Header while it floats over a photographic hero ---
     The home page opens on a dark photograph, so the transparent state has
     to invert. Every rule is scoped to body[data-hero-dark] and to the
     header *before* it sticks, so the solid white state is untouched. */

body[data-hero-dark] .site-header:not(.is-stuck) {
  border-color: rgb(255 255 255 / 0.1);
}

body[data-hero-dark] .site-header:not(.is-stuck) .wordmark {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

body[data-hero-dark] .site-header:not(.is-stuck) .nav-link {
  color: rgb(255 255 255 / 0.85);
}

body[data-hero-dark] .site-header:not(.is-stuck) .nav-link:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

body[data-hero-dark] .site-header:not(.is-stuck) .hdr-tel {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

body[data-hero-dark] .site-header:not(.is-stuck) .burger {
  border-color: rgb(255 255 255 / 0.35);
}

body[data-hero-dark] .site-header:not(.is-stuck) .burger-bar,
  body[data-hero-dark] .site-header:not(.is-stuck) .burger-bar::before,
  body[data-hero-dark] .site-header:not(.is-stuck) .burger-bar::after {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

/* Reversed lockup while over the photograph; the colour original returns
     the moment the header turns white. */

body[data-hero-dark] .site-header:not(.is-stuck) .brand.has-light .brand-logo--light {
  display: block;
}

body[data-hero-dark] .site-header:not(.is-stuck) .brand.has-light .brand-logo--dark {
  display: none;
}

body[data-hero-dark] .site-header:not(.is-stuck) .brand.has-light .brand-word {
  display: none;
}

.burger {
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
}

@media (min-width: 1024px) {
  .burger {
    display: none;
  }
}

.burger-bar {
  position: relative;
  display: block;
  height: 2px;
  width: 19px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.burger-bar::before, .burger-bar::after {
  content: '';
  position: absolute;
  left: 0px;
  height: 2px;
  width: 19px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.burger-bar::before {
  top: -6px;
}

.burger-bar::after {
  top: 6px;
}

.burger[aria-expanded='true'] .burger-bar {
  background-color: transparent;
}

.burger[aria-expanded='true'] .burger-bar::before {
  top: 0px;
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.burger[aria-expanded='true'] .burger-bar::after {
  top: 0px;
  --tw-rotate: -45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* ---------- corporate journey line ---------- */

.stop {
  position: relative;
  flex: 1 1 0%;
  padding-top: 2rem;
}

.stop::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 13px;
  height: 2px;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(221 229 242 / var(--tw-bg-opacity, 1));
}

.stop::after {
  content: '';
  position: absolute;
  left: 0px;
  top: 7px;
  height: 0.875rem;
  width: 0.875rem;
  border-radius: 9999px;
  border-width: 2.5px;
  --tw-border-opacity: 1;
  border-color: rgb(255 167 124 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.stop:last-child::before {
  width: 0.875rem;
}

.stop-active::after {
  --tw-border-opacity: 1;
  border-color: rgb(197 63 8 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(233 80 16 / var(--tw-bg-opacity, 1));
}

/* ============================================================
     BRAND LOGO
     Two optional files. JS adds .has-dark / .has-light to the container
     only for files that actually load, so a missing file never renders a
     broken image. With no logo at all the typographic wordmark shows.
     ============================================================ */

.brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.625rem;
}

.brand-logo {
  display: none;
  height: 2.75rem;
  width: auto;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

@media (min-width: 1024px) {
  .brand-logo {
    height: 54px;
  }
}

.site-header.is-stuck .brand-logo {
  height: 2.5rem;
}

@media (min-width: 1024px) {
  .site-header.is-stuck .brand-logo {
    height: 2.75rem;
  }
}

/* Header while transparent over the hero: reversed logo, else the wordmark */

.site-header .brand.has-light .brand-logo--light {
  display: none;
}

.site-header .brand.has-dark .brand-logo--dark {
  display: block;
}

.site-header .brand.has-dark .brand-word {
  display: none;
}

/* Header once it turns white on scroll: original colour logo, else the wordmark.
     Order matters here, the has-dark rules must come last. */

.site-header.is-stuck .brand.has-light .brand-logo--light {
  display: none;
}

.site-header.is-stuck .brand.has-light .brand-word {
  display: flex;
}

.site-header.is-stuck .brand.has-dark .brand-logo--dark {
  display: block;
}

.site-header.is-stuck .brand.has-dark .brand-word {
  display: none;
}

.brand-footer.has-dark .brand-logo--dark {
  display: block;
}

.brand-footer.has-dark .brand-word {
  display: none;
}

/* ============================================================
     PRIMARY NAV DROPDOWNS
     Panels are always white with navy text so they read correctly against
     both header states, transparent over the hero and solid on scroll.
     ============================================================ */

.nav-item {
  position: relative;
}

.site-header .nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.nav-caret {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.nav-item.is-open .nav-caret {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.dropdown {
  visibility: hidden;
  position: absolute;
  left: 0px;
  top: 100%;
  z-index: 50;
  width: 272px;
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 229 242 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0.625rem;
  opacity: 0;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  box-shadow: 0 30px 60px -30px rgba(10,24,70, .55);
}

.nav-item.is-open .dropdown {
  visibility: visible;
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 1;
}

.dropdown a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.75rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-family: Archivo, Helvetica Neue, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(10 24 70 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.site-footer svg.dropdown a:hover[stroke="currentColor"] {
  --tw-text-opacity: 1;
  color: rgb(255 127 69 / var(--tw-text-opacity, 1));
}

.dropdown a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 247 252 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(197 63 8 / var(--tw-text-opacity, 1));
}

.dropdown a {
  min-height: 42px;
}

.dropdown a::before {
  content: '';
  height: 0.375rem;
  width: 0.375rem;
  flex: none;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(233 80 16 / var(--tw-bg-opacity, 1));
  opacity: 0.6;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.dropdown a:hover::before {
  opacity: 1;
}

.site-footer svg[stroke="currentColor"].dropdown a[aria-current='page'] {
  --tw-text-opacity: 1;
  color: rgb(255 127 69 / var(--tw-text-opacity, 1));
}

.dropdown a[aria-current='page'] {
  --tw-bg-opacity: 1;
  background-color: rgb(244 247 252 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(197 63 8 / var(--tw-text-opacity, 1));
}

.dropdown a[aria-current='page']::before {
  opacity: 1;
}

/* ---------- mobile drawer ---------- */

.drawer-link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 229 242 / var(--tw-border-opacity, 1));
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: left;
  font-family: Archivo, Helvetica Neue, Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(10 24 70 / var(--tw-text-opacity, 1));
  min-height: 52px;
}

.site-footer svg[stroke="currentColor"].drawer-link[aria-current='page'],.site-footer svg[stroke="currentColor"]
  .drawer-link[data-active] {
  --tw-text-opacity: 1;
  color: rgb(255 127 69 / var(--tw-text-opacity, 1));
}

.drawer-link[aria-current='page'],
  .drawer-link[data-active] {
  --tw-text-opacity: 1;
  color: rgb(197 63 8 / var(--tw-text-opacity, 1));
}

.drawer-group.is-open .nav-caret {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.drawer-sub {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-bottom-width: 1px;
  border-color: rgb(221 229 242 / 0.6);
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 1rem;
  font-family: Barlow, Helvetica Neue, Arial, sans-serif;
  font-size: 15px;
  --tw-text-opacity: 1;
  color: rgb(90 103 132 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.drawer-sub:hover {
  --tw-text-opacity: 1;
  color: rgb(10 24 70 / var(--tw-text-opacity, 1));
}

.drawer-sub {
  min-height: 44px;
}

.drawer-sub::before {
  content: '';
  height: 0.375rem;
  width: 0.375rem;
  flex: none;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(233 80 16 / var(--tw-bg-opacity, 1));
  opacity: 0.7;
}

.drawer-sub[aria-current='page'] {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(10 24 70 / var(--tw-text-opacity, 1));
}

.drawer-sub[aria-current='page']::before {
  opacity: 1;
}

/* ---------- FAQ ---------- */

.faq-item {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 229 242 / var(--tw-border-opacity, 1));
}

.faq-item summary {
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  font-family: Archivo, Helvetica Neue, Arial, sans-serif;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(10 24 70 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.site-footer svg.faq-item summary:hover[stroke="currentColor"] {
  --tw-text-opacity: 1;
  color: rgb(255 127 69 / var(--tw-text-opacity, 1));
}

.faq-item summary:hover {
  --tw-text-opacity: 1;
  color: rgb(197 63 8 / var(--tw-text-opacity, 1));
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '';
  margin-top: 0.25rem;
  height: 0.75rem;
  width: 0.75rem;
  flex: none;
  --tw-bg-opacity: 1;
  background-color: rgb(197 63 8 / var(--tw-bg-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  clip-path: polygon(46% 0,54% 0,54% 46%,100% 46%,100% 54%,54% 54%,54% 100%,46% 100%,46% 54%,0 54%,0 46%,46% 46%);
}

.faq-item[open] summary::after {
  --tw-rotate: 135deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.site-footer svg[stroke="currentColor"].faq-item[open] summary {
  --tw-text-opacity: 1;
  color: rgb(255 127 69 / var(--tw-text-opacity, 1));
}

.faq-item[open] summary {
  --tw-text-opacity: 1;
  color: rgb(197 63 8 / var(--tw-text-opacity, 1));
}

/* ============================================================
     BACKGROUNDS AND SECTION GROUNDS
     Four grounds in rotation instead of white / cream / white:
     white, paper, a navy field and a photographic band. Sections
     now differ by ground as well as by layout.
     ============================================================ */

/* Deep navy field with a soft brand-blue bloom and a faint grid.
     Used for the sections that carry the most weight. */

.band-navy {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(5 13 43 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.band-navy::before {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0px;
  z-index: -10;
  background:
      radial-gradient(80% 62% at 12% 0%,   rgba(16,42,131,.72) 0%, rgba(16,42,131,0) 68%),
      radial-gradient(60% 55% at 92% 8%,   rgba(233,80,16,.20) 0%, rgba(233,80,16,0) 70%),
      radial-gradient(90% 70% at 60% 108%, rgba(16,42,131,.42) 0%, rgba(16,42,131,0) 72%);
}

.band-navy::after {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0px;
  z-index: -10;
  opacity: .55;
  background-image:
      linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 78px 78px;
  -webkit-mask-image: radial-gradient(88% 78% at 50% 34%, #000 0%, transparent 76%);
  mask-image: radial-gradient(88% 78% at 50% 34%, #000 0%, transparent 76%);
}

/* Pale ground with the same bloom, for the light half of the page. */

.band-tint {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(244 247 252 / var(--tw-bg-opacity, 1));
}

.band-tint::before {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0px;
  z-index: -10;
  background:
      radial-gradient(70% 58% at 6% 0%,   rgba(16,42,131,.07) 0%, rgba(16,42,131,0) 66%),
      radial-gradient(64% 56% at 96% 12%, rgba(233,80,16,.08) 0%, rgba(233,80,16,0) 68%);
}

/* ---------- road rule: the dashed centre line of a carriageway ----------
     A two-pixel motif that says transport faster than any icon. Used to
     separate sections and to underline section heads. */

.road-rule {
  position: relative;
  height: 3px;
  width: 100%;
  border-radius: 9999px;
  background-image: linear-gradient(90deg, #E95010 0 26px, transparent 26px 56px);
  background-size: 56px 3px;
  opacity: .85;
}

@media (prefers-reduced-motion: no-preference) {
  .road-rule-run {
    animation: nx-road 1.9s linear infinite;
  }
}

/* Full-width divider that carries the road rule across the page with a
     fade at both ends, so stacked sections join rather than butt. */

/* ============================================================
     HERO FURNITURE
     ============================================================ */

/* Figures already stated in the copy, restated as a strip along the foot
     of the banner. Glass over the photograph so the vehicle still reads. */

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: 1rem;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.15);
  background-color: rgb(255 255 255 / 0.1);
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

@media (min-width: 640px) {
  .hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.hstat {
  background-color: rgb(255 255 255 / .06);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (min-width: 640px) {
  .hstat {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
}

.hstat b {
  display: block;
  font-family: Archivo, Helvetica Neue, Arial, sans-serif;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hstat span {
  font-variant-numeric: tabular-nums;
  margin-top: 0.5rem;
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  text-transform: uppercase;
  line-height: 1.5;
  letter-spacing: 0.18em;
  color: rgb(255 255 255 / 0.65);
}

@media (max-width: 1023px) {
  .hstat span {
    font-size: 12px;
  }
}

/* Scroll cue at the foot of the hero. */

.scroll-cue {
  display: flex;
  height: 2.75rem;
  width: 1.75rem;
  align-items: flex-start;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.35);
  padding-top: 0.5rem;
}

.scroll-cue i {
  display: block;
  height: 0.5rem;
  width: 3px;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 127 69 / var(--tw-bg-opacity, 1));
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-cue i {
    animation: nx-bob 1.8s ease-in-out infinite;
  }
}

/* ============================================================
     FLEET CARD
     The single most important object on the site. A large vehicle
     photograph, a seat badge that reads as a capacity marker, and a
     body that lifts on hover.
     ============================================================ */

.fcard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 229 242 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.fcard:hover {
  --tw-translate-y: -0.375rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(255 167 124 / var(--tw-border-opacity, 1));
}

.fcard {
  box-shadow: 0 1px 2px rgba(10,24,70,.05), 0 10px 30px -22px rgba(10,24,70,.4);
}

.fcard:hover {
  box-shadow: 0 4px 8px rgba(10,24,70,.07), 0 36px 64px -30px rgba(16,42,131,.5);
}

.fcard-media {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16/11;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(10 24 70 / var(--tw-bg-opacity, 1));
}

.fcard-media > img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 900ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.fcard:hover .fcard-media > img {
  --tw-scale-x: 1.07;
  --tw-scale-y: 1.07;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Foot gradient so the badges sit on a dark base whatever the photograph. */

.fcard-media::after {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0px;
  background: linear-gradient(180deg, rgba(5,13,43,.42) 0%, rgba(5,13,43,0) 34%, rgba(5,13,43,.06) 62%, rgba(5,13,43,.72) 100%);
}

.fcard-body {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  padding: 1.25rem;
}

@media (min-width: 640px) {
  .fcard-body {
    padding: 1.5rem;
  }
}

/* Capacity marker. Deliberately shaped like the seat count on a coach
     door rather than a generic pill. */

.seat-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.25);
  background-color: rgb(5 13 43 / 0.7);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.seat-badge b {
  font-family: Archivo, Helvetica Neue, Arial, sans-serif;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
}

.seat-badge span {
  font-variant-numeric: tabular-nums;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.18em;
  color: rgb(255 255 255 / 0.7);
}

/* The strip of small facts under a vehicle name. */

.spec-row {
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  row-gap: 0.375rem;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  --tw-text-opacity: 1;
  color: rgb(90 103 132 / var(--tw-text-opacity, 1));
}

@media (max-width: 1023px) {
  .spec-row {
    font-size: 12px;
  }
}

.spec-row .dot {
  --tw-text-opacity: 1;
  color: rgb(233 80 16 / var(--tw-text-opacity, 1));
}

/* A specification laid out as a labelled tile. */

.spec-tile {
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 229 242 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(244 247 252 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: center;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.spec-tile:hover {
  --tw-border-opacity: 1;
  border-color: rgb(255 167 124 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.spec-tile b {
  display: block;
  font-family: Archivo, Helvetica Neue, Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  --tw-text-opacity: 1;
  color: rgb(10 24 70 / var(--tw-text-opacity, 1));
}

.spec-tile span {
  font-variant-numeric: tabular-nums;
  margin-top: 0.375rem;
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.18em;
  --tw-text-opacity: 1;
  color: rgb(90 103 132 / var(--tw-text-opacity, 1));
}

.spec-tile-key {
  --tw-border-opacity: 1;
  border-color: rgb(255 167 124 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 245 240 / var(--tw-bg-opacity, 1));
}

.site-footer svg[stroke="currentColor"].spec-tile-key b {
  --tw-text-opacity: 1;
  color: rgb(255 127 69 / var(--tw-text-opacity, 1));
}

.spec-tile-key b {
  --tw-text-opacity: 1;
  color: rgb(197 63 8 / var(--tw-text-opacity, 1));
}

/* ============================================================
     ICONS AND SMALL FURNITURE
     ============================================================ */

.site-footer svg[stroke="currentColor"].icon-badge {
  --tw-text-opacity: 1;
  color: rgb(255 127 69 / var(--tw-text-opacity, 1));
}

.icon-badge {
  display: flex;
  height: 3rem;
  width: 3rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background-color: rgb(233 80 16 / 0.1);
  --tw-text-opacity: 1;
  color: rgb(197 63 8 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.group:hover .icon-badge,
  .icon-badge-hover:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(233 80 16 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  box-shadow: 0 12px 22px -12px rgba(233,80,16,.8);
}

.group:hover .icon-badge-navy {
  --tw-bg-opacity: 1;
  background-color: rgb(16 42 131 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  box-shadow: 0 12px 22px -12px rgba(16,42,131,.8);
}

.group:hover .icon-badge-glass {
  --tw-bg-opacity: 1;
  background-color: rgb(233 80 16 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* Numbered step marker for the how-it-works sequences. */

.step-num {
  display: inline-flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  font-family: Archivo, Helvetica Neue, Arial, sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.045em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  background-image: linear-gradient(135deg, #1c3a9c 0%, #102A83 60%, #0a1846 100%);
  box-shadow: 0 12px 24px -14px rgba(16,42,131,.85);
}

.step-num-orange {
  background-image: linear-gradient(135deg, #ff7f45 0%, #E95010 60%, #c53f08 100%);
  box-shadow: 0 12px 24px -14px rgba(233,80,16,.85);
}

/* Chip used for coverage areas, vehicle types and tags. */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 229 242 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: Archivo, Helvetica Neue, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(10 24 70 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

@media (max-width: 1023px) {
  .chip {
    font-size: 13.5px;
  }
}

.site-footer svg.chip:hover[stroke="currentColor"] {
  --tw-text-opacity: 1;
  color: rgb(255 127 69 / var(--tw-text-opacity, 1));
}

.chip:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(255 167 124 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(197 63 8 / var(--tw-text-opacity, 1));
}

.chip {
  box-shadow: 0 1px 2px rgba(10,24,70,.04);
}

.chip::before {
  content: '';
  height: 0.375rem;
  width: 0.375rem;
  flex: none;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(233 80 16 / var(--tw-bg-opacity, 1));
}

.chip-mono {
  font-variant-numeric: tabular-nums;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  --tw-text-opacity: 1;
  color: rgb(90 103 132 / var(--tw-text-opacity, 1));
}

@media (max-width: 1023px) {
  .chip-mono {
    font-size: 12px;
  }
}

.chip-mono:hover {
  --tw-text-opacity: 1;
  color: rgb(10 24 70 / var(--tw-text-opacity, 1));
}

/* ============================================================
     DARK TILES
     Photographic tiles used for the audience and service grids.
     ============================================================ */

.tile {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  --tw-bg-opacity: 1;
  background-color: rgb(10 24 70 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.tile:hover {
  --tw-translate-y: -0.375rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.tile {
  box-shadow: 0 10px 30px -22px rgba(5,13,43,.7);
}

.tile:hover {
  box-shadow: 0 36px 64px -30px rgba(5,13,43,.85);
}

.tile > img {
  position: absolute;
  inset: 0px;
  z-index: -20;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 900ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.tile:hover > img {
  --tw-scale-x: 1.07;
  --tw-scale-y: 1.07;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* The heading sits around the 45% mark, so the wash has to be well past
     half strength by then or a pale photograph swallows the type. */

.tile-scrim {
  position: absolute;
  inset: 0px;
  z-index: -10;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  background:
      linear-gradient(178deg, rgba(5,13,43,.18) 0%, rgba(5,13,43,.52) 30%, rgba(5,13,43,.84) 58%, rgba(5,13,43,.97) 100%),
      linear-gradient(120deg, rgba(16,42,131,.46) 0%, rgba(16,42,131,.06) 72%);
}

/* An orange edge that draws itself along the foot of the tile on hover. */

.tile::after {
  content: '';
  pointer-events: none;
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 3px;
  transform-origin: left;
  --tw-scale-x: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(233 80 16 / var(--tw-bg-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

.tile:hover::after {
  --tw-scale-x: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* ============================================================
     PANELS, TABLES AND CALL TO ACTION
     ============================================================ */

/* A panel that reads as a dispatch board: navy head, white body. */

.panel-head {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  margin-top: -1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .panel-head {
    margin-left: -2rem;
    margin-right: -2rem;
    margin-top: -2rem;
    margin-bottom: 1.75rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.panel-head {
  background-image: linear-gradient(120deg, #102A83 0%, #0a1846 72%, #0c2068 100%);
}

.panel-head .ph-title {
  font-variant-numeric: tabular-nums;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  --tw-text-opacity: 1;
  color: rgb(255 167 124 / var(--tw-text-opacity, 1));
}

@media (max-width: 1023px) {
  .panel-head .ph-title {
    font-size: 12.5px;
  }
}

.panel-head .ph-meta {
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgb(255 255 255 / 0.6);
}

@media (max-width: 1023px) {
  .panel-head .ph-meta {
    font-size: 12px;
  }
}

.table-premium {
  width: 100%;
  border-collapse: collapse;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  text-align: left;
}

.table-premium thead th {
  font-variant-numeric: tabular-nums;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 229 242 / var(--tw-border-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (max-width: 1023px) {
  .table-premium thead th {
    font-size: 12px;
  }
}

.table-premium thead th {
  background-image: linear-gradient(120deg, #102A83 0%, #0a1846 100%);
}

.table-premium tbody tr {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.table-premium tbody tr:nth-child(even) {
  --tw-bg-opacity: 1;
  background-color: rgb(244 247 252 / var(--tw-bg-opacity, 1));
}

.table-premium tbody tr:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 245 240 / var(--tw-bg-opacity, 1));
}

.table-premium td {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 229 242 / var(--tw-border-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  vertical-align: top;
  font-size: 15px;
  --tw-text-opacity: 1;
  color: rgb(90 103 132 / var(--tw-text-opacity, 1));
}

.table-premium td:first-child {
  font-family: Archivo, Helvetica Neue, Arial, sans-serif;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(10 24 70 / var(--tw-text-opacity, 1));
}

/* The middle column is the Nishnai column on every comparison table. */

.table-premium td:nth-child(2) {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(16 42 131 / var(--tw-text-opacity, 1));
}

/* Strong closing band: navy ground with a road rule along the top. */

/* A short run of carriageway dashes at the head of a closing band. Held to
     the left third and faded out, so it reads as a marker rather than a
     stripe across the whole page. */

.cta-rule {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  z-index: 10;
  height: 3px;
  background-image: linear-gradient(90deg, #E95010 0 22px, transparent 22px 50px);
  background-size: 50px 3px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.55) 16%, transparent 34%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.55) 16%, transparent 34%);
}

/* ============================================================
     JOURNEY LINE
     The horizontal stop sequence, with the connector redrawn as a
     dashed carriageway rather than a plain rule.
     ============================================================ */

.journey .stop::before {
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(16,42,131,.34) 0 14px, transparent 14px 26px);
  background-size: 26px 2px;
}

.journey-invert .stop::before {
  background-image: linear-gradient(90deg, rgba(255,255,255,.32) 0 14px, transparent 14px 26px);
}

.journey-invert .stop::after {
  --tw-border-opacity: 1;
  border-color: rgb(255 127 69 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(5 13 43 / var(--tw-bg-opacity, 1));
}

.journey-invert .stop-active::after {
  --tw-border-opacity: 1;
  border-color: rgb(255 127 69 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(233 80 16 / var(--tw-bg-opacity, 1));
}

/* ============================================================
     TRUST STRIP
     ============================================================ */

/* ============================================================
     GALLERY
     ============================================================ */

.gallery-figure {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 20px;
  --tw-bg-opacity: 1;
  background-color: rgb(10 24 70 / var(--tw-bg-opacity, 1));
}

.gallery-figure > img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 900ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.gallery-figure:hover > img {
  --tw-scale-x: 1.06;
  --tw-scale-y: 1.06;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.gallery-figure figcaption {
  font-variant-numeric: tabular-nums;
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-bottom: 1rem;
  padding-top: 3rem;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgb(255 255 255 / 0.85);
}

@media (max-width: 1023px) {
  .gallery-figure figcaption {
    font-size: 12px;
  }
}

.gallery-figure figcaption {
  background: linear-gradient(transparent, rgba(5,13,43,.86));
}

/* ============================================================
     LINK CARD (used for cross-links between fleet pages)
     ============================================================ */

.link-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 229 242 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.link-card:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(255 167 124 / var(--tw-border-opacity, 1));
}

.link-card {
  box-shadow: 0 1px 2px rgba(10,24,70,.04);
}

.link-card:hover {
  box-shadow: 0 26px 46px -28px rgba(16,42,131,.5);
}

.link-card-media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(10 24 70 / var(--tw-bg-opacity, 1));
}

.link-card-media > img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 700ms;
}

.link-card:hover .link-card-media > img {
  --tw-scale-x: 1.07;
  --tw-scale-y: 1.07;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* ============================================================
     FOOTER
     Navy ground so the page ends on the brand. The reversed logo
     is shown only when the file actually decodes; the typographic
     wordmark is the fallback, and it is white here.
     ============================================================ */

.site-footer .brand-footer.has-light .brand-logo--light {
  display: block;
}

.site-footer .brand-footer.has-light .brand-word {
  display: none;
}

.site-footer .foot-link {
  color: rgb(255 255 255 / 0.7);
}

.site-footer .foot-link:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.site-footer a {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* the small glyphs beside phone, email and address */

.site-footer svg[stroke="currentColor"].text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(255 127 69 / var(--tw-text-opacity, 1));
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.inset-0 {
  inset: 0px;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-2 {
  bottom: 0.5rem;
}

.bottom-3 {
  bottom: 0.75rem;
}

.bottom-4 {
  bottom: 1rem;
}

.bottom-6 {
  bottom: 1.5rem;
}

.left-3 {
  left: 0.75rem;
}

.left-4 {
  left: 1rem;
}

.left-5 {
  left: 1.25rem;
}

.left-\[4\.5px\] {
  left: 4.5px;
}

.right-0 {
  right: 0px;
}

.top-0 {
  top: 0px;
}

.top-2 {
  top: 0.5rem;
}

.top-5 {
  top: 1.25rem;
}

.-z-20 {
  z-index: -20;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-40 {
  z-index: 40;
}

.col-span-1 {
  grid-column: span 1 / span 1;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.-mx-5 {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}

.-my-1\.5 {
  margin-top: -0.375rem;
  margin-bottom: -0.375rem;
}

.-my-2 {
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.-ml-1 {
  margin-left: -0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-7 {
  margin-bottom: 1.75rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-9 {
  margin-bottom: 2.25rem;
}

.mb-auto {
  margin-bottom: auto;
}

.ml-auto {
  margin-left: auto;
}

.mt-0 {
  margin-top: 0px;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-16 {
  margin-top: 4rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-2\.5 {
  margin-top: 0.625rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-3\.5 {
  margin-top: 0.875rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-9 {
  margin-top: 2.25rem;
}

.mt-auto {
  margin-top: auto;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.\!aspect-\[16\/9\] {
  aspect-ratio: 16/9 !important;
}

.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-14 {
  height: 3.5rem;
}

.h-2 {
  height: 0.5rem;
}

.h-20 {
  height: 5rem;
}

.h-4 {
  height: 1rem;
}

.h-\[300px\] {
  height: 300px;
}

.h-\[320px\] {
  height: 320px;
}

.h-\[3px\] {
  height: 3px;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.max-h-11 {
  max-height: 2.75rem;
}

.max-h-\[calc\(100svh-64px\)\] {
  max-height: calc(100svh - 64px);
}

.min-h-\[124px\] {
  min-height: 124px;
}

.min-h-\[360px\] {
  min-height: 360px;
}

.min-h-\[44px\] {
  min-height: 44px;
}

.min-h-\[52px\] {
  min-height: 52px;
}

.min-h-\[580px\] {
  min-height: 580px;
}

.w-1\.5 {
  width: 0.375rem;
}

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-2 {
  width: 0.5rem;
}

.w-20 {
  width: 5rem;
}

.w-4 {
  width: 1rem;
}

.w-auto {
  width: auto;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.w-full {
  width: 100%;
}

.w-max {
  width: -moz-max-content;
  width: max-content;
}

.w-px {
  width: 1px;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-\[560px\] {
  min-width: 560px;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-\[16rem\] {
  max-width: 16rem;
}

.max-w-\[20ch\] {
  max-width: 20ch;
}

.max-w-\[30ch\] {
  max-width: 30ch;
}

.max-w-\[34ch\] {
  max-width: 34ch;
}

.max-w-\[36ch\] {
  max-width: 36ch;
}

.max-w-\[40ch\] {
  max-width: 40ch;
}

.max-w-\[46rem\] {
  max-width: 46rem;
}

.max-w-\[48ch\] {
  max-width: 48ch;
}

.max-w-\[48rem\] {
  max-width: 48rem;
}

.max-w-\[52rem\] {
  max-width: 52rem;
}

.max-w-\[54ch\] {
  max-width: 54ch;
}

.max-w-\[54rem\] {
  max-width: 54rem;
}

.max-w-\[56ch\] {
  max-width: 56ch;
}

.max-w-\[58ch\] {
  max-width: 58ch;
}

.max-w-\[60ch\] {
  max-width: 60ch;
}

.max-w-\[62ch\] {
  max-width: 62ch;
}

.max-w-\[68rem\] {
  max-width: 68rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-none {
  flex: none;
}

.shrink-0 {
  flex-shrink: 0;
}

.origin-left {
  transform-origin: left;
}

.scale-x-0 {
  --tw-scale-x: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-\[auto_1fr\] {
  grid-template-columns: auto 1fr;
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-px {
  gap: 1px;
}

.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-y-10 {
  row-gap: 2.5rem;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-hairline > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(221 229 242 / var(--tw-divide-opacity, 1));
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.break-words {
  overflow-wrap: break-word;
}

.break-all {
  word-break: break-all;
}

.\!rounded-2xl {
  border-radius: 1rem !important;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.rounded-\[1px\] {
  border-radius: 1px;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-l-\[4px\] {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.rounded-l-none {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.rounded-tl-2xl {
  border-top-left-radius: 1rem;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-l-\[3px\] {
  border-left-width: 3px;
}

.border-r {
  border-right-width: 1px;
}

.border-r-0 {
  border-right-width: 0px;
}

.border-t {
  border-top-width: 1px;
}

.border-t-\[3px\] {
  border-top-width: 3px;
}

.border-dashed {
  border-style: dashed;
}

.border-hairline {
  --tw-border-opacity: 1;
  border-color: rgb(221 229 242 / var(--tw-border-opacity, 1));
}

.border-navy-900 {
  --tw-border-opacity: 1;
  border-color: rgb(10 24 70 / var(--tw-border-opacity, 1));
}

.border-orange-500 {
  --tw-border-opacity: 1;
  border-color: rgb(233 80 16 / var(--tw-border-opacity, 1));
}

.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}

.border-l-orange-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(233 80 16 / var(--tw-border-opacity, 1));
}

.border-t-orange-500 {
  --tw-border-opacity: 1;
  border-top-color: rgb(233 80 16 / var(--tw-border-opacity, 1));
}

.bg-hairline {
  --tw-bg-opacity: 1;
  background-color: rgb(221 229 242 / var(--tw-bg-opacity, 1));
}

.bg-navy-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(10 24 70 / var(--tw-bg-opacity, 1));
}

.bg-navy-900\/15 {
  background-color: rgb(10 24 70 / 0.15);
}

.bg-orange-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 127 69 / var(--tw-bg-opacity, 1));
}

.bg-orange-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(233 80 16 / var(--tw-bg-opacity, 1));
}

.bg-orange-500\/10 {
  background-color: rgb(233 80 16 / 0.1);
}

.bg-paper {
  --tw-bg-opacity: 1;
  background-color: rgb(244 247 252 / var(--tw-bg-opacity, 1));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/15 {
  background-color: rgb(255 255 255 / 0.15);
}

.bg-\[linear-gradient\(180deg\2c rgba\(5\2c 13\2c 43\2c \.34\)\2c rgba\(5\2c 13\2c 43\2c \.62\)\)\] {
  background-image: linear-gradient(180deg,rgba(5,13,43,.34),rgba(5,13,43,.62));
}

.bg-\[linear-gradient\(transparent\2c rgba\(5\2c 13\2c 43\2c \.9\)\)\] {
  background-image: linear-gradient(transparent,rgba(5,13,43,.9));
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.object-\[58\%_64\%\] {
  -o-object-position: 58% 64%;
     object-position: 58% 64%;
}

.object-\[center_48\%\] {
  -o-object-position: center 48%;
     object-position: center 48%;
}

.object-\[center_50\%\] {
  -o-object-position: center 50%;
     object-position: center 50%;
}

.object-\[center_52\%\] {
  -o-object-position: center 52%;
     object-position: center 52%;
}

.object-\[center_54\%\] {
  -o-object-position: center 54%;
     object-position: center 54%;
}

.object-\[center_55\%\] {
  -o-object-position: center 55%;
     object-position: center 55%;
}

.object-\[center_56\%\] {
  -o-object-position: center 56%;
     object-position: center 56%;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-7 {
  padding: 1.75rem;
}

.p-8 {
  padding: 2rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-12 {
  padding-bottom: 3rem;
}

.pb-5 {
  padding-bottom: 1.25rem;
}

.pb-7 {
  padding-bottom: 1.75rem;
}

.pb-\[66px\] {
  padding-bottom: 66px;
}

.pb-\[env\(safe-area-inset-bottom\)\] {
  padding-bottom: env(safe-area-inset-bottom);
}

.pl-5 {
  padding-left: 1.25rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pr-8 {
  padding-right: 2rem;
}

.pt-0\.5 {
  padding-top: 0.125rem;
}

.pt-12 {
  padding-top: 3rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

.pt-\[112px\] {
  padding-top: 112px;
}

.pt-\[116px\] {
  padding-top: 116px;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.font-display {
  font-family: Archivo, Helvetica Neue, Arial, sans-serif;
}

.font-mono {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

.\!text-\[15px\] {
  font-size: 15px !important;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[12\.5px\] {
  font-size: 12.5px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[14\.5px\] {
  font-size: 14.5px;
}

.text-\[15\.5px\] {
  font-size: 15.5px;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-\[16\.5px\] {
  font-size: 16.5px;
}

.text-\[16px\] {
  font-size: 16px;
}

.text-\[17\.5px\] {
  font-size: 17.5px;
}

.text-\[17px\] {
  font-size: 17px;
}

.text-\[19px\] {
  font-size: 19px;
}

.text-\[20px\] {
  font-size: 20px;
}

.text-\[22px\] {
  font-size: 22px;
}

.text-\[26px\] {
  font-size: 26px;
}

.text-\[9px\] {
  font-size: 9px;
}

.text-\[clamp\(0\.95rem\2c 1\.15vw\2c 1\.06rem\)\] {
  font-size: clamp(0.95rem, 1.15vw, 1.06rem);
}

.text-\[clamp\(0\.98rem\2c 1\.1vw\2c 1\.06rem\)\] {
  font-size: clamp(0.98rem, 1.1vw, 1.06rem);
}

.text-\[clamp\(1\.05rem\2c 1\.3vw\2c 1\.2rem\)\] {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
}

.text-\[clamp\(1\.15rem\2c 1\.8vw\2c 1\.45rem\)\] {
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
}

.text-\[clamp\(1\.3rem\2c 2\.05vw\2c 1\.7rem\)\] {
  font-size: clamp(1.3rem, 2.05vw, 1.7rem);
}

.text-\[clamp\(1\.5rem\2c 2\.4vw\2c 2rem\)\] {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.text-\[clamp\(1\.6rem\2c 2\.6vw\2c 2\.15rem\)\] {
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
}

.text-\[clamp\(1\.9rem\2c 2\.9vw\2c 2\.5rem\)\] {
  font-size: clamp(1.9rem, 2.9vw, 2.5rem);
}

.text-\[clamp\(1rem\2c 1\.15vw\2c 1\.08rem\)\] {
  font-size: clamp(1rem, 1.15vw, 1.08rem);
}

.text-\[clamp\(1rem\2c 1\.15vw\2c 1\.1rem\)\] {
  font-size: clamp(1rem, 1.15vw, 1.1rem);
}

.text-\[clamp\(1rem\2c 1\.25vw\2c 1\.15rem\)\] {
  font-size: clamp(1rem, 1.25vw, 1.15rem);
}

.text-\[clamp\(1rem\2c 1\.2vw\2c 1\.12rem\)\] {
  font-size: clamp(1rem, 1.2vw, 1.12rem);
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.leading-\[1\.45\] {
  line-height: 1.45;
}

.leading-\[1\.5\] {
  line-height: 1.5;
}

.leading-\[1\.72\] {
  line-height: 1.72;
}

.leading-\[1\.75\] {
  line-height: 1.75;
}

.leading-\[1\.7\] {
  line-height: 1.7;
}

.leading-\[1\.8\] {
  line-height: 1.8;
}

.leading-\[1\.9\] {
  line-height: 1.9;
}

.leading-none {
  line-height: 1;
}

.leading-snug {
  line-height: 1.375;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-\[0\.07em\] {
  letter-spacing: 0.07em;
}

.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}

.tracking-\[0\.1em\] {
  letter-spacing: 0.1em;
}

.tracking-\[0\.24em\] {
  letter-spacing: 0.24em;
}

.tracking-data {
  letter-spacing: 0.18em;
}

.tracking-normal {
  letter-spacing: 0em;
}

.tracking-tightest {
  letter-spacing: -0.045em;
}

.text-ink {
  --tw-text-opacity: 1;
  color: rgb(10 19 48 / var(--tw-text-opacity, 1));
}

.text-muted {
  --tw-text-opacity: 1;
  color: rgb(90 103 132 / var(--tw-text-opacity, 1));
}

.text-navy-600 {
  --tw-text-opacity: 1;
  color: rgb(42 75 180 / var(--tw-text-opacity, 1));
}

.text-navy-900 {
  --tw-text-opacity: 1;
  color: rgb(10 24 70 / var(--tw-text-opacity, 1));
}

.text-navy-900\/25 {
  color: rgb(10 24 70 / 0.25);
}

.text-navy-950 {
  --tw-text-opacity: 1;
  color: rgb(5 13 43 / var(--tw-text-opacity, 1));
}

.text-orange-300 {
  --tw-text-opacity: 1;
  color: rgb(255 167 124 / var(--tw-text-opacity, 1));
}

.text-orange-400 {
  --tw-text-opacity: 1;
  color: rgb(255 127 69 / var(--tw-text-opacity, 1));
}

.text-orange-500 {
  --tw-text-opacity: 1;
  color: rgb(233 80 16 / var(--tw-text-opacity, 1));
}

.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(197 63 8 / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/45 {
  color: rgb(255 255 255 / 0.45);
}

.text-white\/55 {
  color: rgb(255 255 255 / 0.55);
}

.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}

.text-white\/75 {
  color: rgb(255 255 255 / 0.75);
}

.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}

.text-white\/85 {
  color: rgb(255 255 255 / 0.85);
}

.underline {
  text-decoration-line: underline;
}

.underline-offset-2 {
  text-underline-offset: 2px;
}

.opacity-0 {
  opacity: 0;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-\[0\.34\] {
  opacity: 0.34;
}

.shadow-\[0_-8px_28px_-16px_rgba\(16\2c 42\2c 131\2c \.4\)\] {
  --tw-shadow: 0 -8px 28px -16px rgba(16,42,131,.4);
  --tw-shadow-colored: 0 -8px 28px -16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_0_14px_rgba\(233\2c 80\2c 16\2c \.18\)\] {
  --tw-shadow: 0 0 0 14px rgba(233,80,16,.18);
  --tw-shadow-colored: 0 0 0 14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-card {
  --tw-shadow: 0 1px 2px rgba(10, 24, 70, .04), 0 8px 24px -18px rgba(10, 24, 70, .35);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 8px 24px -18px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-panel {
  --tw-shadow: 0 2px 4px rgba(10, 24, 70, .04), 0 40px 90px -46px rgba(10, 24, 70, .5);
  --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color), 0 40px 90px -46px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-navy-900\/15 {
  --tw-ring-color: rgb(10 24 70 / 0.15);
}

.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-1000 {
  transition-duration: 1000ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

/* Mobile type floor. The mono data labels are set small by design, but below
     11px they stop being legible on a phone, so they step up under 640px. */

/* Mobile type floor. The mono metadata labels are set small by design, but
     uppercase mono with wide tracking stops being comfortably readable on a
     phone below 12px, so the floor rises on small screens. Desktop sizes are
     untouched. */

@media (max-width: 1023px) {
  .text-\[9px\]  {
    font-size: 12px;
    letter-spacing: .16em;
  }

  .text-\[10px\] {
    font-size: 12px;
  }

  .text-\[11px\] {
    font-size: 12.5px;
  }

  .text-\[12px\] {
    font-size: 13px;
  }

  .text-\[13px\] {
    font-size: 13.5px;
  }
}

/* Long page, so sections below the fold skip layout and paint until near
     the viewport. contain-intrinsic-size stops the scrollbar from jumping. */

.cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

.grain::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
      linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(90% 80% at 55% 40%, #000 0%, transparent 78%);
  mask-image: radial-gradient(90% 80% at 55% 40%, #000 0%, transparent 78%);
}

/* Soft cream-to-white joins so stacked sections read as one page rather
     than a stack of unrelated bands. */

.fade-to-white {
  background-image: linear-gradient(180deg, #f4f7fc 0%, #ffffff 100%);
}

/* Cool section joins, matched to the new paper value. */

/* Slow drift on hero photography, and a gentle float for badges. */

/* Sideways scroller that still shows a hint of the next card. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   MOBILE-FIRST REFINEMENTS
   Touch ergonomics and small-screen legibility. No layout is
   restructured and no content is affected.
   ============================================================ */

/* ============================================================
   NISHNAI PREMIUM TRAVEL LAYER
   Everything below is presentation only. It adds the visual
   vocabulary a bus-rental and group-travel brand is expected to
   carry — fleet cards, seat badges, spec rails, road motifs,
   journey lines and lit dark bands — without touching a single
   word of the approved copy.
   ============================================================ */

/* Explicit keyframes: these are driven from CSS rather than from an
   animate-* utility, so Tailwind would not emit them on its own. */

@keyframes sheen {
  0%   {
    transform: translateX(-160%) skewX(-18deg);
  }

  100% {
    transform: translateX(320%)  skewX(-18deg);
  }
}

@keyframes nx-road {
  0%   {
    background-position: 0 0;
  }

  100% {
    background-position: 56px 0;
  }
}

@keyframes nx-float {
  0%,100% {
    transform: translateY(0);
  }

  50%     {
    transform: translateY(-7px);
  }
}

@keyframes nx-bob {
  0%,100% {
    transform: translateY(0);
    opacity: .9;
  }

  50%     {
    transform: translateY(6px);
    opacity: .45;
  }
}

@keyframes nx-drift {
  0%,100% {
    transform: translate3d(0,0,0) scale(1.04);
  }

  50%     {
    transform: translate3d(-1.6%,0,0) scale(1.08);
  }
}

.focus\:font-mono:focus {
  font-variant-numeric: tabular-nums;
}

.site-footer .group:hover .group-hover\:text-orange-600svg[stroke="currentColor"] {
  --tw-text-opacity: 1;
  color: rgb(255 127 69 / var(--tw-text-opacity, 1));
}

.first\:mt-0:first-child {
  margin-top: 0px;
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-orange-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(255 167 124 / var(--tw-border-opacity, 1));
}

.hover\:border-orange-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(233 80 16 / var(--tw-border-opacity, 1));
}

.hover\:border-orange-500\/60:hover {
  border-color: rgb(233 80 16 / 0.6);
}

.hover\:bg-paper:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 247 252 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[linear-gradient\(180deg\2c rgba\(5\2c 13\2c 43\2c \.26\)\2c rgba\(5\2c 13\2c 43\2c \.55\)\)\]:hover {
  background-image: linear-gradient(180deg,rgba(5,13,43,.26),rgba(5,13,43,.55));
}

.hover\:text-navy-600:hover {
  --tw-text-opacity: 1;
  color: rgb(42 75 180 / var(--tw-text-opacity, 1));
}

.hover\:text-navy-900:hover {
  --tw-text-opacity: 1;
  color: rgb(10 24 70 / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:shadow-card:hover {
  --tw-shadow: 0 1px 2px rgba(10, 24, 70, .04), 0 8px 24px -18px rgba(10, 24, 70, .35);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 8px 24px -18px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:grayscale-0:hover {
  --tw-grayscale: grayscale(0);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.focus\:fixed:focus {
  position: fixed;
}

.focus\:left-4:focus {
  left: 1rem;
}

.focus\:top-4:focus {
  top: 1rem;
}

.focus\:z-\[999\]:focus {
  z-index: 999;
}

.focus\:bg-orange-500:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(233 80 16 / var(--tw-bg-opacity, 1));
}

.focus\:px-4:focus {
  padding-left: 1rem;
  padding-right: 1rem;
}

.focus\:py-3:focus {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.focus\:font-mono:focus {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

.focus\:text-xs:focus {
  font-size: 0.75rem;
  line-height: 1rem;
}

.focus\:uppercase:focus {
  text-transform: uppercase;
}

.focus\:tracking-data:focus {
  letter-spacing: 0.18em;
}

.focus\:text-navy-950:focus {
  --tw-text-opacity: 1;
  color: rgb(5 13 43 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:scale-x-100 {
  --tw-scale-x: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(197 63 8 / var(--tw-text-opacity, 1));
}

.aria-pressed\:border-orange-500[aria-pressed="true"] {
  --tw-border-opacity: 1;
  border-color: rgb(233 80 16 / var(--tw-border-opacity, 1));
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes pulseDot {
    0%,100% {
      opacity: 1;
    }

    50% {
      opacity: .35;
    }
  }

  .motion-safe\:animate-pulseDot {
    animation: pulseDot 2.4s ease-in-out infinite;
  }

  @keyframes ticker {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-50%);
    }
  }

  .motion-safe\:animate-ticker {
    animation: ticker 42s linear infinite;
  }
}

@media not all and (min-width: 768px) {
  .max-md\:object-\[46\%_58\%\] {
    -o-object-position: 46% 58%;
       object-position: 46% 58%;
  }

  .max-md\:object-\[50\%_52\%\] {
    -o-object-position: 50% 52%;
       object-position: 50% 52%;
  }

  .max-md\:object-\[50\%_54\%\] {
    -o-object-position: 50% 54%;
       object-position: 50% 54%;
  }

  .max-md\:object-\[52\%_54\%\] {
    -o-object-position: 52% 54%;
       object-position: 52% 54%;
  }

  .max-md\:object-\[58\%_58\%\] {
    -o-object-position: 58% 58%;
       object-position: 58% 58%;
  }

  .max-md\:object-\[58\%_62\%\] {
    -o-object-position: 58% 62%;
       object-position: 58% 62%;
  }

  .max-md\:object-\[66\%_74\%\] {
    -o-object-position: 66% 74%;
       object-position: 66% 74%;
  }
}

@media not all and (min-width: 640px) {
  .max-sm\:hidden {
    display: none;
  }
}

@media (min-width: 640px) {
  .sm\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .sm\:block {
    display: block;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:\!aspect-\[21\/9\] {
    aspect-ratio: 21/9 !important;
  }

  .sm\:h-\[380px\] {
    height: 380px;
  }

  .sm\:h-\[400px\] {
    height: 400px;
  }

  .sm\:h-\[420px\] {
    height: 420px;
  }

  .sm\:min-h-\[76svh\] {
    min-height: 76svh;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-wrap {
    flex-wrap: wrap;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:p-10 {
    padding: 2.5rem;
  }

  .sm\:p-7 {
    padding: 1.75rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .sm\:pb-0 {
    padding-bottom: 0px;
  }

  .sm\:pb-14 {
    padding-bottom: 3.5rem;
  }
}

@media (min-width: 768px) {
  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .md\:mb-0 {
    margin-bottom: 0px;
  }

  .md\:mb-10 {
    margin-bottom: 2.5rem;
  }

  .md\:mb-4 {
    margin-bottom: 1rem;
  }

  .md\:grid {
    display: grid;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:gap-x-8 {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }

  .md\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .md\:pb-14 {
    padding-bottom: 3.5rem;
  }

  .md\:pb-16 {
    padding-bottom: 4rem;
  }

  .md\:pt-28 {
    padding-top: 7rem;
  }

  .md\:pt-\[132px\] {
    padding-top: 132px;
  }
}

@media (min-width: 1024px) {
  .lg\:order-1 {
    order: 1;
  }

  .lg\:order-2 {
    order: 2;
  }

  .lg\:order-first {
    order: -9999;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:mb-0 {
    margin-bottom: 0px;
  }

  .lg\:mb-5 {
    margin-bottom: 1.25rem;
  }

  .lg\:ml-0 {
    margin-left: 0px;
  }

  .lg\:mt-11 {
    margin-top: 2.75rem;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:\!hidden {
    display: none !important;
  }

  .lg\:\!aspect-\[3\/1\] {
    aspect-ratio: 3/1 !important;
  }

  .lg\:h-\[460px\] {
    height: 460px;
  }

  .lg\:h-\[470px\] {
    height: 470px;
  }

  .lg\:h-\[480px\] {
    height: 480px;
  }

  .lg\:min-h-\[80svh\] {
    min-height: 80svh;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[0\.88fr_1\.12fr\] {
    grid-template-columns: 0.88fr 1.12fr;
  }

  .lg\:grid-cols-\[0\.92fr_1\.08fr\] {
    grid-template-columns: 0.92fr 1.08fr;
  }

  .lg\:grid-cols-\[0\.9fr_1\.1fr\] {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .lg\:grid-cols-\[1\.02fr_0\.98fr\] {
    grid-template-columns: 1.02fr 0.98fr;
  }

  .lg\:gap-14 {
    gap: 3.5rem;
  }

  .lg\:gap-16 {
    gap: 4rem;
  }

  .lg\:gap-4 {
    gap: 1rem;
  }

  .lg\:gap-x-10 {
    -moz-column-gap: 2.5rem;
         column-gap: 2.5rem;
  }

  .lg\:self-start {
    align-self: flex-start;
  }

  .lg\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .lg\:pb-\[76px\] {
    padding-bottom: 76px;
  }
}