/* -----------------------------------------------------------------------
   Sections — page chrome first, page sections below.
   ----------------------------------------------------------------------- */

/* Site header ------------------------------------------------------------ */

/*
 * The header is a white pill floating over the hero image. It starts absolutely
 * positioned so the hero shows through, then sticks to the top once scrolled.
 */
.site-header {
  /* How far the bar rides up before it stops and pins itself. */
  --header-lift: 10px;

  position: absolute;
  inset: var(--space-24) 0 auto;
  z-index: var(--z-header);
  transition: transform var(--transition-base);
}

/*
 * The bar rides up by --header-lift and pins itself there. Because it pins at
 * exactly the height it had reached, the swap from absolute to fixed lands on
 * the pixel the bar was already on: nothing to animate, nothing to jump.
 */
.site-header.is-stuck {
  position: fixed;
  inset-block-start: calc(var(--space-24) - var(--header-lift));
}

.site-header.is-hidden {
  transform: translateY(calc(-100% - var(--space-24)));
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding: var(--space-8) var(--space-32);
  border-radius: var(--radius-pill);
  background-color: var(--color-white);
  transition: box-shadow var(--transition-base);
}

.site-header.is-stuck .site-header__bar {
  box-shadow: var(--shadow-floating);
}

.site-logo img {
  width: auto;
  max-height: 5.3125rem; /* 85 */
  object-fit: contain;
}

.site-logo--text {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  text-transform: uppercase;
}

.site-header__nav .nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.site-header__nav .nav-menu a {
  display: block;
  padding: var(--space-4) 0.625rem;
  border-bottom: 1px solid transparent;
  font-size: var(--fs-secondary);
  text-transform: uppercase;
  white-space: nowrap;
}

/*
 * Only real page links get the active underline. WordPress also marks custom
 * links as current when their URL matches the current page, which would light
 * up the "/#services" and "/#contact" anchors on the home page.
 */
.site-header__nav .nav-menu a:hover,
.site-header__nav .nav-menu .menu-item-type-post_type.current-menu-item > a {
  border-bottom-color: var(--color-primary);
  color: var(--color-black);
}

/* Burger + mobile menu --------------------------------------------------- */

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
}

.burger__box,
.burger__box::before,
.burger__box::after {
  display: block;
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--color-black);
  transition:
    transform var(--transition-base),
    opacity var(--transition-fast);
}

.burger__box {
  position: relative;
}

.burger__box::before,
.burger__box::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
}

.burger__box::before {
  inset-block-start: -0.5rem;
}

.burger__box::after {
  inset-block-start: 0.5rem;
}

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

.burger[aria-expanded="true"] .burger__box::before {
  transform: translateY(0.5rem) rotate(45deg);
}

.burger[aria-expanded="true"] .burger__box::after {
  transform: translateY(-0.5rem) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-32);
  padding: var(--space-80) var(--container-pad) var(--space-56);
  background-color: var(--color-white);
  overflow-y: auto;
}

.mobile-menu[hidden] {
  display: none;
}

/*
 * Sits exactly where the burger does, so the way out is where the way in was:
 * the header's own offset plus half of what the 72 bar leaves around a 44 box,
 * and in from the edge by the page gutter plus the bar's own padding.
 */
.mobile-menu__close {
  position: absolute;
  inset-block-start: calc(var(--space-24) + 0.875rem);
  inset-inline-end: calc(var(--container-pad) + var(--space-16));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  color: var(--color-black);
  transition: background-color var(--transition-fast);
}

.mobile-menu__close:hover,
.mobile-menu__close:focus-visible {
  background-color: var(--color-gray-5);
}

.mobile-menu__close .icon {
  width: 2rem;
  height: 2rem;
}

.mobile-menu__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  text-align: center;
}

.mobile-menu__list a {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  text-transform: uppercase;
}

/* Site footer ------------------------------------------------------------ */

.site-footer {
  margin-block-start: var(--section-gap);
  border-start-start-radius: var(--radius-pill);
  border-start-end-radius: var(--radius-pill);
  background-color: var(--color-gray-15);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-56);
  padding: var(--space-24) var(--space-56);
}

/*
 * The design gives this column a fixed height and pushes the button to its
 * foot, so it sits well below the logo and past the link columns beside it.
 */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  min-height: 21.5625rem; /* 345 */
  width: 17.1875rem; /* 275 */
}

/* The design fills the brand column with the mark, edge to edge. */
.site-footer__logo img {
  width: 100%;
  max-height: none;
}

.site-footer__cta {
  width: 100%;
}

.site-footer__columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-56) 12.875rem; /* 206 between columns in the design */
}

.site-footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.site-footer__title {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  text-transform: none;
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/*
 * A fixed column, not one the longest line happens to size: the design pins it
 * to 432, and letting it shrink drags the whole block of links to the right.
 */
.site-footer__list--contacts {
  width: 27rem; /* 432 */
  max-width: 100%;
}

/* Hero ------------------------------------------------------------------- */

.hero {
  /* Home and Gallery tint the photo black; Careers uses navy — see below. */
  --hero-tint-start: rgb(0 0 0);
  --hero-tint-end: rgb(0 0 0 / 0%);

  position: relative;
  display: flex;
  align-items: center;
  min-height: min(52.75rem, 100svh); /* 844 in the design */
  padding-block: calc(var(--space-80) + var(--space-56)) var(--space-80);
  overflow: hidden;
  isolation: isolate;
}

.hero__media,
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Dark on the left so the white heading stays readable over the photo. */
.hero__overlay {
  background-image: linear-gradient(
    90deg,
    var(--hero-tint-start) 0%,
    var(--hero-tint-end) 100%
  );
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
  max-width: 43.375rem; /* 694 */
  color: var(--color-white);
}

.hero__title {
  font-size: var(--fs-h1);
}

/* Two lines of 22 in the design, not the 27 the body's 1.5 would give. */
.hero__text {
  max-width: 28.6875rem; /* 459 */
  line-height: var(--lh-heading);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);

}

/* Both hero buttons are pinned to 208 in the design. */
.hero__actions .button {
  min-width: 13rem;
  max-heigth: 3.375rem !important;
}

/* Highlights bar --------------------------------------------------------- */

/*
 * The bar sits centred on the bottom edge of the hero photo. Shifting it by
 * half its own height keeps it centred whatever the captions wrap to; the
 * negative bottom margin claws back the gap that shift would otherwise leave.
 */
.stats {
  position: relative;
  z-index: 1;
  margin-block-end: -2.75rem;
  transform: translateY(-50%);
}

.stats__bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-24);
  padding: var(--space-16);
  border-radius: var(--radius-card);
  background-color: var(--color-navy);
  color: var(--color-white);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  text-align: center;
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-display);
  text-transform: uppercase;
}

.stat__label {
  font-size: var(--fs-secondary);
}

/* Why Drivers Choose NODIR ----------------------------------------------- */

/*
 * A grey panel running the full width of the viewport, rounded at the top only
 * — so the padding and the corners belong to the section itself, not to the
 * container that caps the content width inside it.
 */
.strengths {
  margin-block-start: var(--section-gap);
  padding-block: var(--space-32);
  border-start-start-radius: var(--radius-panel);
  border-start-end-radius: var(--radius-panel);
  background-color: var(--color-gray-5);
}

/* Inner page hero -------------------------------------------------------- */

.hero--page {
  min-height: min(52.875rem, 90svh); /* 846 in the design */
  align-items: center;
  padding-block: calc(var(--space-80) + var(--space-56));
}

/*
 * Careers only: the cards below ride up over this hero, so the copy is pushed
 * clear of them rather than centred.
 */
.hero--overlapped {
  align-items: flex-end;
  padding-block-end: 17.25rem; /* 276 */
}

/* Careers tints its photo navy rather than black. */
.hero--tinted {
  --hero-tint-start: rgb(6 22 50);
  --hero-tint-end: rgb(13 91 175 / 10%);
}

.hero--page .hero__content {
  max-width: 41rem; /* 656 */
  gap: var(--space-8);
}

/* The brand mark above the heading, indented as the design has it. */
.hero__mark {
  width: 16.3125rem; /* 261 */
  height: 8.875rem; /* 142 */
  margin-inline-start: 6.25rem; /* 100 */
  object-fit: contain;
}

.hero__button {
  min-width: 20rem; /* 320 */
  margin-block-start: var(--space-32);
}

.hero__text--wide {
  max-width: none;
}

/*
 * Gallery sets this hero narrower than Careers does: the heading wraps at 582
 * into two lines, the intro at 459 into two, with 16 between them.
 */
.hero--gallery .hero__content {
  gap: var(--space-16);
}

.hero--gallery .hero__title {
  max-width: 36.375rem; /* 582 */
}

.hero--gallery .hero__text {
  max-width: 28.6875rem; /* 459 */
}

/* Careers: position cards ------------------------------------------------ */

/*
 * The grey surface starts where the hero photo ends, but the cards themselves
 * ride up over its last 194px, exactly as the design lays them out.
 */
.position-cards {
  /* The hero is positioned, so this has to be too in order to paint over it. */
  position: relative;
  z-index: 1;

  /*
	 * flow-root, or the grid's negative margin collapses through and drags the
	 * grey surface up with it, hiding the strip of hero photo either side.
	 */
  display: flow-root;
  background-color: var(--color-gray-5);
  padding-block: 0 var(--section-gap);
}

.position-cards .card-grid {
  margin-block-start: -12.125rem; /* -194 */
}

/* Careers: how it works -------------------------------------------------- */

.how-it-works {
  background-color: var(--color-gray-5);
  padding-block-start: 0;
}

.how-it-works__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  text-align: center;
  text-transform: uppercase;
  margin-block-end: 80px;
}

/*
 * The dashed route. In the design it is a run of rounded brackets sitting in
 * the margins either side of the cards, alternating sides: a wide lead-in from
 * the truck across the top, one bracket per gap, and a tail reaching the pin.
 * Each bracket runs into the cards above and below it — the cards are opaque
 * and painted on top, so only the part in the margin shows and the line reads
 * as continuous.
 */
.how-it-works__route {
  --card: min(27rem, 100%); /* 432 */
  --gutter: 4.5rem; /* 72 */
  --link-height: 8.0625rem; /* 129 */
  --link-line: 1px dashed var(--color-primary);
  /* The turn at the end of every bracket, eased against the design's curve. */
  --link-radius: 2.75rem;
  --link-overlap: 2.5rem; /* how far a bracket runs into the card above it */
  --lead-lift: 1.25rem; /* 20 — how much higher the lead-in and truck ride */
  --pin-size: 4.1875rem; /* 66.5 */

  position: relative;
  width: calc(var(--card) + var(--gutter) * 2);
  max-width: 100%;
  margin-inline: auto;
  margin-block-start: var(--space-56);
}

.route__steps {
  display: flex;
  flex-direction: column;
}

.route__marker {
  position: absolute;
  display: flex;
  color: var(--color-primary);
}

.route__marker--truck .icon {
  width: 3.5rem; /* 56 */
  height: 3.5rem;
}

.route__marker--pin .icon {
  width: var(--pin-size);
  height: var(--pin-size);
}

/* The truck rides on the lead-in's top edge. */
.route__marker--truck {
  inset-block-start: 0;
  inset-inline-start: -2px;
  transform: translateY(calc(-50% - var(--lead-lift)));
}

/* The pin stands on the tail's bottom edge — its point touches the line. */
.route__marker--pin {
  inset-block-end: 0;
  inset-inline-start: 50%;
  transform: translate(-50%, 0);
}

/*
 * No inline padding: in the design the description runs the full width of the
 * card, which is what keeps it to two lines and the card to 135 tall.
 */
.step {
  position: relative;
  z-index: 1;
  width: var(--card);
  margin-inline: var(--gutter);
  padding-block: var(--space-16);
  border-radius: var(--radius-card);
  background-color: var(--color-white);
  text-align: center;
}

.step__title {
  display: inline-block;
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  padding-left: 10px;
  padding-right: 10px;
}

.step__text {
  margin-block-start: var(--space-12);
  font-size: var(--fs-secondary);
}

.route__link {
  height: var(--link-height);
  flex: none;
}

/* Every bracket is closed on three sides, rounded on its outer end. */
.route__link--lead,
.route__link--left,
.route__link--right,
.route__link--tail {
  border-block: var(--link-line);
}

/*
 * Carries the line from the truck across the top and round into the first card.
 * It starts at the card's left edge, because its bottom edge only exists to
 * slip under that card: run the box the full width and the bottom edge sticks
 * out into the left margin as a second line beside the first step. The run from
 * the truck to the card is the top edge alone, so that is a stub of its own.
 *
 * Lifted by --lead-lift, along with the truck. A transform rather than a margin,
 * so the cards below it stay where they are.
 */
.route__link--lead {
  position: relative;
  width: calc(100% - var(--gutter));
  transform: translateY(calc(var(--lead-lift) * -1));
  margin-inline-start: var(--gutter);
  border-inline-end: var(--link-line);
  border-start-end-radius: var(--link-radius);
  border-end-end-radius: var(--link-radius);
  margin-block-end: calc(var(--link-height) * -1 + 2rem);
}

.route__link--lead::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-end: 100%;
  width: var(--gutter);
  border-block-start: var(--link-line);
}

.route__link--left,
.route__link--right,
.route__link--tail {
  margin-block: calc(var(--link-overlap) * -1) -2.75rem;
}

.route__link--right {
  width: var(--gutter);
  margin-inline-start: auto;
  border-inline-end: var(--link-line);
  border-start-end-radius: var(--link-radius);
  border-end-end-radius: var(--link-radius);
}

.route__link--left {
  width: var(--gutter);
  margin-inline-end: auto;
  border-inline-start: var(--link-line);
  border-start-start-radius: var(--link-radius);
  border-end-start-radius: var(--link-radius);
}

/*
 * Runs on under the last card so its bottom edge meets the pin. It also has to
 * be deep enough for the pin standing on that edge to clear the card — the
 * shorter link height of the narrow layout is not, so the pin takes over there.
 */
.route__link--tail {
  width: calc(var(--gutter) + var(--card) / 2);
  height: max(
    var(--link-height),
    var(--link-overlap) + var(--pin-size) + var(--space-8)
  );
  margin-inline-end: auto;
  margin-block-end: 0;
  border-inline-start: var(--link-line);
  border-start-start-radius: var(--link-radius);
  border-end-start-radius: var(--link-radius);
}

/* Careers band ----------------------------------------------------------- */

.careers-band__panel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-56);
  min-height: 27.0625rem; /* 433 */
  padding: var(--space-24) var(--space-44);
  border-radius: var(--radius-card);
  background-color: var(--color-black-60);
  color: var(--color-white);
}

/* The exported mark is already faint, so it needs no opacity of its own. */
.careers-band__watermark {
  width: 16.3125rem; /* 261 */
  height: 8.875rem; /* 142 */
  flex: none;
  object-fit: contain;
  pointer-events: none;
}

.careers-band__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-44);
  width: 31.25rem; /* 500 */
  flex: none;
}

.careers-band__head {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.careers-band__icon {
  width: 3.75rem; /* 60 */
  height: 3.75rem;
  color: var(--color-primary);
}

.careers-band__text {
  max-width: 29.75rem; /* 476 */
  margin-block-start: calc(var(--space-44) * -1 + var(--space-16));
}

/*
 * The driver sits against the bottom of the panel and overhangs its top edge
 * by 56px, stopping 74px short of the right edge — all straight from the
 * design, which is why the box is pinned rather than laid out in the row.
 */
.careers-band__photo {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 4.625rem; /* 74 */
  width: 26.4375rem; /* 423 */
  height: 30.5625rem; /* 489 */
  overflow: hidden;
}

/*
 * The design crops the photo rather than fitting it whole: it is scaled to
 * cover the box and pulled left, which frames the driver off-centre.
 */
.careers-band__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 44% center;
}

/* Driver stories --------------------------------------------------------- */

.driver-stories__panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20.75rem; /* 332 */
  padding: var(--space-32) var(--space-24);
  border-radius: var(--radius-card);
  background-color: var(--color-gray-15);
  overflow: hidden;
  isolation: isolate;
}

/*
 * The photo peeks out on the left and dissolves into the panel colour.
 */
.driver-stories__image {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: -1;
  width: 33%;
  height: 100%;
  object-fit: cover;
  mask-image: linear-gradient(90deg, rgb(0 0 0 / 56%) 0%, transparent 100%);
}

.driver-stories__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  text-align: center;
}

.driver-stories__text {
  max-width: 35.25rem; /* 564 */
}

/* Regional routes -------------------------------------------------------- */

.regional-routes__panel {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 33.625rem; /* 538 */
  padding: var(--space-24);
  border-radius: var(--radius-card);
  background-color: var(--color-gray-15);
  overflow: hidden;
  isolation: isolate;
}

.regional-routes__map {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: -2;
  width: 72%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

/* The panel colour fades out over the map so the text stays readable. */
.regional-routes__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(
    90deg,
    var(--color-gray-15) 0%,
    var(--color-gray-15) 30%,
    transparent 62%
  );
}

.regional-routes__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  width: 31.25rem;
  max-width: 100%;
}

.regional-routes__states {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
}

.state-pill {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  min-height: 2rem;
  padding-inline: var(--space-16);
  border-radius: var(--radius-button);
  background-color: var(--color-white);
  font-size: 1.25rem;
}

.state-pill .icon {
  color: var(--color-primary);
}

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

.faq {
  padding-block: var(--section-gap);
  background-color: var(--color-navy);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-block-start: var(--space-44);
}

.faq__item {
  border-radius: var(--radius-button);
  background-color: var(--color-white);
  color: var(--color-black-60);
  overflow: hidden;
}

.faq__question {
  margin: 0;
  font-size: inherit;
}

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  width: 100%;
  padding: var(--space-16) var(--space-24);
  text-align: start;
}

.faq__question-text {
  font-size: var(--fs-h3);
}

.faq__chevron {
  transition: transform var(--transition-base);
}

.faq__item.is-open .faq__chevron {
  transform: rotate(180deg);
}

.faq__panel {
  padding: 0 var(--space-24) var(--space-16);
}

.faq__panel[hidden] {
  display: none;
}

/* Contact form ----------------------------------------------------------- */

.contact-section {
  background-color: var(--color-gray-5);
}

/*
 * Careers turns the section inside out: the band is white and the fields carry
 * the grey. The design also gives that band a tighter 44 of padding than the
 * section rhythm elsewhere. The page around it is grey, so the band reads as a
 * band — including the strip left between it and the footer.
 */
.page-template-template-careers {
  background-color: var(--color-gray-5);
}

.contact-section--light {
  padding-block: var(--space-44);
  background-color: var(--color-white);
}

.contact-section--light .form-control {
  background-color: var(--color-gray-5);
}

/* The one eyebrow the design sets a step smaller than the rest — 18, not 20. */
.contact-section--light .section-title__eyebrow {
  font-size: var(--fs-main);
}

/* Two equal columns in the design — 656 each with 16 between them. */
.contact-section__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  align-items: center;
}

.contact-section__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-44);
}

/* The heading runs the full column; the fields under it do not. */
.contact-section__form .nodir-form {
  width: 100%;
  max-width: 34rem; /* 544 */
}

.contact-section__map img,
.contact-section__frame {
  display: block;
  width: 100%;
  aspect-ratio: 656 / 731;
  border: 0;
  border-radius: var(--radius-box);
  object-fit: cover;
}

/* Closing CTA ------------------------------------------------------------ */

.closing-cta__panel {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  isolation: isolate;
}

.closing-cta__image {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* Keeps the road's vanishing point where the design places it. */
  object-position: center 33%;
}

.closing-cta__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-44);
  min-height: 24.125rem; /* 386 */
  width: min(44.75rem, 100%); /* 716 */
  padding: var(--space-16);
  background-image: linear-gradient(
    90deg,
    rgb(19 24 50 / 100%) 0%,
    rgb(19 24 50 / 0%) 100%
  );
  color: var(--color-white);
}

.closing-cta__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 28.1875rem; /* 451 */
  font-size: var(--fs-h3);
}

.closing-cta__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  text-transform: uppercase;
}

.closing-cta__content .button {
  align-self: flex-start;
}

/* Gallery ---------------------------------------------------------------- */

/* Grey runs from under the hero to the footer, as it does on Careers. */
.page-template-template-gallery {
  background-color: var(--color-gray-5);
}

.gallery {
  background-color: var(--color-gray-5);
}

.gallery-filter {
  position: relative;
  width: min(27rem, 100%); /* 432 */
  z-index: 2;
}

.gallery-filter__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
  min-height: 3.5rem; /* 56 */
  padding: 0.375rem var(--space-16);
  border-radius: var(--radius-box);
  background-color: var(--color-white);
  font-size: var(--fs-h3);
  text-align: start;
}

.gallery-filter__chevron {
  width: 2rem;
  height: 2rem;
  transition: transform var(--transition-base);
}

.gallery-filter.is-open .gallery-filter__chevron {
  transform: rotate(180deg);
}

.gallery-filter__list {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + var(--space-24));
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  max-height: 24rem;
  padding: var(--space-12);
  border-radius: var(--radius-box);
  background-color: var(--color-white);
  box-shadow: var(--shadow-floating);
  overflow-y: auto;
}

.gallery-filter__list[hidden] {
  display: none;
}

.gallery-filter__option {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 3.5rem;
  padding-inline: var(--space-16);
  border-block-end: 1px solid var(--color-gray-15);
  border-radius: var(--radius-box);
  font-size: var(--fs-h3);
  text-align: start;
}

.gallery-filter__option:hover,
.gallery-filter__option.is-selected {
  background-color: var(--color-gray-5);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
  margin-block-start: var(--space-44);
}

.gallery-tile[hidden] {
  display: none;
}

.gallery-tile__button {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--radius-box);
  overflow: hidden;
}

.gallery-tile__image {
  width: 100%;
  aspect-ratio: 432 / 425;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.gallery-tile__button:hover .gallery-tile__image {
  transform: scale(1.03);
}

.gallery-tile__play {
  position: absolute;
  inset-block-end: var(--space-16);
  inset-inline-start: var(--space-16);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: var(--color-white);
}

.gallery__empty {
  margin-block-start: var(--space-44);
  color: var(--color-gray-60);
  text-align: center;
}

/* Lightbox --------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
}

.lightbox[hidden] {
  display: none;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgb(2 7 35 / 88%);
}

/*
 * Room either side for the arrows, which hang outside the frame at this size:
 * on a screen narrower than the frame's 1152 plus its controls, a full-width
 * dialog pushed them off the edge of the viewport.
 */
.lightbox__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  width: min(72rem, 100% - 4rem);
  max-height: 100%;
}

.lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}

.lightbox__image {
  max-width: 100%;
  max-height: 78svh;
  border-radius: var(--radius-card);
  object-fit: contain;
}

.lightbox__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 78svh;
  border: 0;
  border-radius: var(--radius-card);
}

.lightbox__caption {
  color: var(--color-white);
  text-align: center;
}

.lightbox__caption:empty {
  display: none;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background-color: rgb(255 255 255 / 12%);
  color: var(--color-white);
  transition: background-color var(--transition-fast);
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background-color: var(--color-primary);
}

.lightbox__close {
  inset-block-start: calc(var(--space-56) * -1);
  inset-inline-end: 0;
}

.lightbox__nav {
  inset-block-start: 50%;
  translate: 0 -50%;
}

.lightbox__nav[hidden] {
  display: none;
}

.lightbox__nav--prev {
  inset-inline-start: calc(var(--space-56) * -1);
  rotate: 180deg;
}

.lightbox__nav--next {
  inset-inline-end: calc(var(--space-56) * -1);
}

/* Plain pages (no hero) -------------------------------------------------- */

/*
 * The header floats over a hero image. Templates without one need to clear it.
 */
.site-main--simple,
.error-404 {
  padding-block-start: calc(var(--space-80) + var(--space-56));
}

.entry-header {
  margin-block-end: var(--space-24);
}

.entry-content > * + * {
  margin-block-start: var(--space-16);
}

/*
 * Plain pages — the privacy policy, and anything else written in the editor
 * rather than composed from sections. The design never draws a plain page, so
 * these rules only give the base elements back what the reset took: readable
 * measure, real headings and list markers.
 */
.entry-content {
  max-width: 52rem; /* 832 — a comfortable line length for running text */
}

.entry-content h2 {
  margin-block-start: var(--space-44);
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  line-height: var(--lh-heading);
  text-transform: uppercase;
}

.entry-content h3 {
  margin-block-start: var(--space-32);
  font-size: var(--fs-h3);
}

.entry-content ul,
.entry-content ol {
  padding-inline-start: var(--space-24);
  list-style: revert;
}

.entry-content li + li {
  margin-block-start: var(--space-8);
}

.entry-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.error-404__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  max-width: 40rem;
}

.error-404__code {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1;
  color: var(--color-primary);
}

.error-404__text {
  color: var(--color-gray-60);
}

.error-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-block-start: var(--space-16);
}

/* Chat widget ------------------------------------------------------------ */

.chat-widget {
  position: fixed;
  inset-block-end: var(--space-24);
  inset-inline-end: var(--space-24);
  z-index: var(--z-chat);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-12);
}

.chat-widget__bubble {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  width: max-content;
  max-width: calc(100vw - 3rem);
  padding: var(--space-12);
  border-radius: var(--radius-card);
  background-color: var(--color-white);
  box-shadow: var(--shadow-floating);
}

/* The speech tail pointing down towards the trigger. */
.chat-widget__bubble::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-end: 1.75rem;
  border: 0.75rem solid transparent;
  border-block-start-color: var(--color-white);
  border-block-end-width: 0;
}

.chat-widget__bubble[hidden] {
  display: none;
}

.chat-widget__avatar {
  width: 5rem;
  height: 5rem;
  flex: none;
  border: 1px solid var(--color-gray-5);
  border-radius: var(--radius-full);
  object-fit: cover;
}

.chat-widget__greeting {
  align-self: center;
  color: var(--color-gray-60);
  font-size: var(--fs-h3);
  white-space: nowrap;
}

.chat-widget__close {
  display: flex;
  flex: none;
  color: var(--color-gray-60);
}

.chat-widget__close:hover {
  color: var(--color-black);
}

.chat-widget__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem; /* 56 */
  height: 3.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 0 0 0.5rem rgb(233 31 38 / 15%);
  transition:
    background-color var(--transition-fast),
    box-shadow var(--transition-base);
}

.chat-widget__trigger:hover {
  background-color: var(--color-primary-dark);
  box-shadow: 0 0 0 0.75rem rgb(233 31 38 / 20%);
}

.chat-widget__trigger .icon {
  width: 2.25rem;
  height: 2.25rem;
}

/* Responsive ------------------------------------------------------------- */

@media (width <= 62rem) {
  .site-header__nav,
  .site-header__action {
    display: none;
  }

  .burger {
    display: flex;
  }

  /*
   * With the menu and the button gone the bar only holds the logo, so it comes
   * down from the 101 of the design to a height a phone can spare.
   */
  .site-header__bar {
    padding: var(--space-8) var(--space-16);
  }

  .site-header .site-logo img {
    max-height: 3.5rem; /* 56 */
  }

  .site-footer__columns {
    gap: var(--space-56);
  }
}

@media (width <= 62rem) {
  .stats__bar {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-32) var(--space-24);
  }

  /* Stacked, with the driver back in the flow under the copy. */
  /*
   * The driver keeps standing on the panel's bottom edge, as on wide screens —
   * so the panel gives up its bottom padding and clips to its own corners.
   */
  .careers-band__panel {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-24);
    min-height: 0;
    padding: var(--space-24) var(--space-24) 0;
    overflow: hidden;
  }

  .careers-band__content {
    width: 100%;
  }

  .careers-band__photo {
    position: static;
    width: min(20rem, 70%);
    height: auto;
    aspect-ratio: 423 / 489;
    margin: 0 auto;
    order: 3;
  }

  .careers-band__watermark {
    width: 10rem;
    height: auto;
    align-self: center;
    order: 2;
  }

  /* The map moves above the text instead of sitting behind it. */
  .regional-routes__panel {
    flex-direction: column;
    gap: var(--space-24);
    min-height: 0;
  }

  .regional-routes__map {
    position: static;
    width: 100%;
    height: auto;
    border-radius: var(--radius-card);
    object-fit: contain;
  }

  .regional-routes__content {
    width: 100%;
  }

  .regional-routes__panel::before {
    display: none;
  }

  .contact-section__inner {
    grid-template-columns: 1fr;
  }

  /* Stacked, the fields have the whole column and no reason to stay at 544. */
  .contact-section__form .nodir-form {
    max-width: none;
  }

  .contact-section__map img,
  .contact-section__frame {
    aspect-ratio: 16 / 10;
  }

  .closing-cta__content {
    width: 100%;
    background-image: linear-gradient(
      90deg,
      rgb(19 24 50 / 92%) 0%,
      rgb(19 24 50 / 70%) 100%
    );
  }

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

  /* Controls move inside the frame once there is no room beside it. */
  .lightbox__dialog {
    width: min(72rem, 100%);
  }

  .lightbox__close {
    inset-block-start: var(--space-16);
    inset-inline-end: var(--space-16);
    background-color: rgb(2 7 35 / 60%);
  }

  .lightbox__nav--prev {
    inset-inline-start: var(--space-16);
  }

  .lightbox__nav--next {
    inset-inline-end: var(--space-16);
  }
}

@media (width <= 48rem) {
  .hero {
    min-height: 0;
    padding-block: calc(var(--space-80) + var(--space-44)) var(--space-56);
  }

  /* The gradient runs top-to-bottom once the text sits under the photo. */
  .hero__overlay {
    background-image: linear-gradient(
      180deg,
      var(--hero-tint-end) 0%,
      var(--hero-tint-start) 100%
    );
  }

  .hero__actions .button {
    flex: 1 1 100%;
  }

  /* No room to overlap once everything is a single column. */
  .hero--overlapped {
    align-items: center;
    padding-block-end: calc(var(--space-80) + var(--space-44));
  }

  .hero__mark {
    width: 10rem;
    height: auto;
    margin-inline-start: 0;
  }

  .hero__button {
    width: 100%;
    min-width: 0;
  }

  .position-cards {
    padding-block-start: var(--section-gap);
  }

  .position-cards .card-grid {
    margin-block-start: 0;
  }

  /*
   * Narrow margins, or the cards have nowhere left to go. The margin is also
   * what the turns have to fit in, so it holds the 2rem radius exactly; a
   * narrower one would shrink the curves back to its own width.
   */
  .how-it-works__route {
    --gutter: 2rem;
    --card: calc(100% - var(--gutter) * 2);
    --link-height: 6rem;
    --link-radius: 2rem;
    --pin-size: 3.25rem; /* 52 */
  }

  /* The full-width text of the design would touch the edges at this size. */
  .step {
    padding-inline: var(--space-16);
  }

  /* Stacked under the hero rather than straddling it. */
  .stats {
    margin-block: var(--space-24) 0;
    transform: none;
  }

  .stats__bar {
    grid-template-columns: 1fr;
  }

  .driver-stories__image {
    width: 100%;
    mask-image: linear-gradient(180deg, rgb(0 0 0 / 35%) 0%, transparent 70%);
  }

  .faq__question-text {
    font-size: var(--fs-main);
  }

  .faq__trigger,
  .faq__panel {
    padding-inline: var(--space-16);
  }

  .nodir-form input[type="submit"] {
    width: 100%;
    min-width: 0;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-filter {
    width: 100%;
  }

  .site-footer__inner {
    flex-direction: column;
    align-items: stretch;
    padding-inline: var(--space-24);
  }

  /*
   * The fixed height exists on wide screens to push the button past the link
   * columns beside it. Stacked there is nothing beside it, so the height goes
   * and the button follows the mark instead of hanging below a gap.
   */
  .site-footer__brand {
    width: 100%;
    min-height: 0;
  }

  .site-footer__logo img {
    width: auto;
    max-height: 10rem;
  }

  /*
   * Stacked under a centred mark, the columns sit in the middle too — but as
   * blocks, not as centred text: each list stays as wide as its longest row, so
   * the contact icons keep to one column and every label still starts on the
   * same edge. Centring the text itself would ragged both lists out.
   */
  .site-footer__columns {
    flex-direction: column;
    align-items: center;
    gap: var(--space-32);
  }

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

  .site-footer__list {
    width: max-content;
    max-width: 100%;
  }

  /* The contacts take the width they are given, not the 432 the design pins
     them to beside the links — that would push the page wider than the
     screen. */
  .site-footer__list--contacts {
    width: max-content;
  }

  .chat-widget__greeting {
    font-size: var(--fs-main);
    white-space: normal;
  }

  .chat-widget__avatar {
    width: 3.5rem;
    height: 3.5rem;
  }
}