/*
  Satellite Specialized Transportation: site styles.

  Colors, fonts and proportions follow the old Transcargo theme so the site
  looks the same. Three changes for accessibility (WCAG AA contrast):
  body text is #666 instead of #808080, links in text are a darker blue
  than the old #71a8d1, and the menu red is a shade darker.
*/

/* ---------- Fonts (self-hosted, latin subset) ---------- */

@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/titillium-web-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/titillium-web-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/titillium-web-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/titillium-web-latin-700-normal.woff2") format("woff2");
}
/* Homepage slideshow headlines only, as on the old slider. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/open-sans-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/open-sans-latin-wght-italic.woff2") format("woff2");
}

/* ---------- Tokens ---------- */

:root {
  --navy: #10416b;       /* top bar, footer, headings */
  --navy-ink: #183650;   /* menu text */
  --navy-deep: #0b2f4f;  /* hover on navy */
  --sky: #71a8d1;        /* accents, bands */
  --red: #e31b23;        /* "Request a Quote" in the menu (old #ee1c24, a shade darker to pass contrast) */
  --text: #666;
  --text-light: #767676;
  --link: #2a6a9a;
  --line: #e3e7eb;
  --font-heading: "Titillium Web", "Segoe UI", system-ui, sans-serif;
  --font-body: "Open Sans", "Segoe UI", system-ui, sans-serif;
  --container: 1140px;
  --gutter: 16px;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.625;
}

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

a {
  color: var(--link);
}

a:hover {
  color: var(--navy);
}

:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
}

main:focus {
  outline: none;
}

/* The hidden attribute always hides, even on elements given a display. */
[hidden] {
  display: none !important;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 1rem;
  color: var(--navy);
  font-family: var(--font-heading);
  font-weight: 300;
  line-height: 1.17;
}

p {
  margin: 0 0 1.625rem;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.icon-sprite {
  display: none;
}

.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 100;
  padding: 0.75rem 1rem;
  background: #fff;
  color: var(--navy);
  font-weight: 700;
}

.skip-link:focus {
  top: var(--gutter);
}

/* ---------- Top bar ---------- */

.top-bar {
  background: var(--navy);
  color: #fff;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.top-bar__phones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
}

.top-bar__phones li {
  white-space: nowrap;
}

.top-bar .icon {
  margin-right: 0.375rem;
  color: var(--sky);
  font-size: 1rem;
  vertical-align: -0.2em;
}

.top-bar a {
  color: #fff;
  text-decoration: none;
}

.top-bar a:hover {
  text-decoration: underline;
}

.top-bar :focus-visible,
.site-footer :focus-visible {
  outline-color: #fff;
}

@media (min-width: 48em) {
  .top-bar__phones {
    justify-content: flex-end;
    gap: 0 4.375rem;
    padding: 0.95rem 0;
  }
}

/* ---------- Masthead: logo and main menu ---------- */

.masthead {
  position: relative;
  z-index: 20;
  background: #fff;
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.625rem;
}

.masthead__logo {
  display: block;
  flex-shrink: 0;
}

.masthead__logo img {
  display: block;
  width: 180px;
}

.main-menu,
.submenu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-menu a {
  text-decoration: none;
}

.main-menu__item > a {
  color: var(--navy-ink);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
}

.main-menu__item > a:hover {
  color: var(--link);
}

.main-menu__item--quote > a,
.main-menu__item--quote > a:hover {
  color: var(--red);
  text-transform: uppercase;
}

.submenu-toggle,
.main-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy);
  cursor: pointer;
}

.submenu-toggle .icon {
  font-size: 1.125rem;
  transition: transform 0.2s;
}

.submenu-toggle[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

/* Phones and tablets: menu button opens a panel under the header. */
@media (max-width: 63.999em) {
  .main-nav__bars,
  .main-nav__bars::before,
  .main-nav__bars::after {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    transition: transform 0.2s, opacity 0.2s;
  }

  .main-nav__bars {
    position: relative;
  }

  .main-nav__bars::before,
  .main-nav__bars::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .main-nav__bars::before {
    top: -7px;
  }

  .main-nav__bars::after {
    top: 7px;
  }

  .main-nav__toggle[aria-expanded="true"] .main-nav__bars {
    background: transparent;
  }

  .main-nav__toggle[aria-expanded="true"] .main-nav__bars::before {
    transform: translateY(7px) rotate(45deg);
  }

  .main-nav__toggle[aria-expanded="true"] .main-nav__bars::after {
    transform: translateY(-7px) rotate(-45deg);
  }

  .main-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    padding: 0.25rem var(--gutter) 1rem;
    border-top: 3px solid var(--sky);
    background: #fff;
    box-shadow: 0 12px 24px rgb(0 0 0 / 0.12);
  }

  /* Without JavaScript the menu stays visible in the page instead. */
  html:not(.js) .main-nav__toggle {
    display: none;
  }

  html:not(.js) .main-menu {
    position: static;
    box-shadow: none;
  }

  html:not(.js) .masthead__inner {
    flex-wrap: wrap;
  }

  .js .main-nav__toggle[aria-expanded="false"] + .main-menu {
    display: none;
  }

  .main-menu__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--line);
  }

  .main-menu__item > a {
    flex: 1;
    padding: 0.75rem 0;
  }

  .main-menu__item.is-current > a {
    color: var(--link);
  }

  .submenu {
    width: 100%;
    padding: 0 0 0.5rem 1rem;
  }

  .js .submenu-toggle[aria-expanded="false"] + .submenu {
    display: none;
  }

  .submenu a {
    display: block;
    padding: 0.5rem 0;
    color: var(--navy-ink);
    font-family: var(--font-heading);
    font-size: 0.9375rem;
  }

  .submenu a[aria-current="page"] {
    color: var(--link);
    font-weight: 600;
  }
}

/* Desktop: horizontal menu with dropdowns on hover or keyboard focus. */
@media (min-width: 64em) {
  .masthead__inner {
    padding-block: 0.875rem;
  }

  .masthead__logo img {
    width: 300px;
  }

  .main-nav__toggle,
  .submenu-toggle {
    display: none;
  }

  .main-menu {
    display: flex;
    gap: 0 1.25rem;
  }

  .main-menu__item {
    position: relative;
  }

  .main-menu__item > a {
    display: block;
    position: relative;
    padding: 2.3rem 0;
  }

  .main-menu__item.is-current > a::after {
    content: "";
    position: absolute;
    bottom: 1.1rem;
    left: 50%;
    width: 36px;
    height: 3px;
    margin-left: -18px;
    background: var(--sky);
  }

  .submenu {
    position: absolute;
    top: calc(100% - 0.75rem);
    left: -1.25rem;
    width: max-content;
    max-width: 18rem;
    padding: 0.75rem 0;
    background: var(--navy);
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    /* Hide after the fade-out, but show at once so keyboard focus can move into it. */
    transition: opacity 0.15s, transform 0.15s, visibility 0s 0.15s;
  }

  .main-menu__item:hover > .submenu,
  .main-menu__item:focus-within > .submenu {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  .main-menu__item:last-child > .submenu {
    right: -1.25rem;
    left: auto;
  }

  .submenu a {
    display: block;
    min-width: 12rem;
    padding: 0.55rem 1.25rem;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    line-height: 1.35;
  }

  .submenu a:hover,
  .submenu a[aria-current="page"] {
    background: rgb(255 255 255 / 0.1);
  }

  .submenu :focus-visible {
    outline-color: #fff;
    outline-offset: -3px;
  }
}

/* ---------- Page banner and breadcrumbs ---------- */

.page-banner {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
}

.page-banner__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-position (which part shows) is set per photo from src/_data/banners.yaml. */
}

/* Full size, as the old theme showed most banners: 1920px wide, centered, so smaller screens see the middle. */
.page-banner--full .page-banner__photo {
  left: 50%;
  width: max(100%, 1920px);
  max-width: none;
  transform: translateX(-50%);
}

/* No tint over the photo (the old theme's tint was switched off). A soft
   shadow keeps the white title readable where the photo is bright. */
.page-banner--photo .page-banner__title {
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.5);
}

.page-banner__title {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 2.75rem 0;
  color: #fff;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.625rem);
  text-transform: uppercase;
}

@media (min-width: 48em) {
  .page-banner__title {
    padding: 3.5rem 0;
  }
}

.breadcrumbs {
  margin: 1.75rem 0 2.5rem;
  font-size: 0.8125rem;
  color: var(--text-light);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs li + li::before {
  content: ">";
  content: ">" / "";
  margin: 0 0.5rem;
}

.breadcrumbs a {
  color: var(--navy);
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

@media (min-width: 48em) {
  .breadcrumbs {
    margin: 2.25rem 0 4.5rem;
  }
}

/* ---------- Page content ---------- */

.page-content {
  padding-bottom: 4rem;
}

.page-content h2,
.page-content h3 {
  text-transform: uppercase;
}

.page-content h2 {
  margin-bottom: 2rem;
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.25rem);
}

.page-content h3 {
  margin: 2.5rem 0 1.3rem;
  font-size: 1.5rem;
}

/* Short light-blue rule above section headings, as on the old site. */
.page-content h2::before,
.page-content h3::before {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  margin-bottom: 1.75rem;
  background: var(--sky);
}

.page-content h3::before {
  margin-bottom: 1.6rem;
}

.page-content ul {
  margin: 0 0 1.625rem;
  padding: 0;
  list-style: none;
}

.page-content li {
  position: relative;
  margin-bottom: 0.75rem;
  padding-left: 1.25rem;
}

.page-content li::before {
  content: "";
  position: absolute;
  top: 0.65em;
  left: 0.25rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sky);
}

/* Checkmark list (About page). */
.page-content .check-list li {
  padding-left: 1.875rem;
  font-size: 1.0625rem;
}

.page-content .check-list li::before {
  top: 0.45em;
  left: 0;
  width: 14px;
  height: 10px;
  border-radius: 0;
  background: none;
  border: solid var(--sky);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg) scale(0.85);
  transform-origin: center;
}

.columns {
  display: grid;
  gap: 0 2rem;
}

@media (min-width: 48em) {
  .columns {
    grid-template-columns: 1fr 1fr;
  }
}

/* Full-width light-blue heading strip (e.g. "Our Mission"). */
.panel-sky {
  margin: 3rem 0 1.5rem;
  padding: 1.75rem var(--gutter);
  background: var(--sky);
}

.page-content .panel-sky h2 {
  margin: 0;
  color: var(--navy);
}

.page-content .panel-sky h2::before {
  display: none;
}

.statement {
  margin: 0 auto 3rem;
  max-width: 56rem;
  color: var(--navy);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.05rem 1.5rem;
  border: 2px solid var(--navy);
  background: var(--navy);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.button:hover {
  border-color: var(--navy-deep);
  background: var(--navy-deep);
  color: #fff;
}

.button .icon {
  font-size: 1.375rem;
}

/* Rounded white button used on the light-blue band. */
.button--pill {
  padding: 0.95rem 1.5rem;
  border-color: #fff;
  border-radius: 50px;
  background: #fff;
  color: var(--navy);
}

.button--pill:hover {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

/* ---------- "Not sure which solution fits...?" band ---------- */

.cta-band {
  padding: 3rem 0;
  background: var(--sky);
}

.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}

.cta-band__title {
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  font-weight: 400;
}

@media (min-width: 48em) {
  .cta-band {
    padding: 4.25rem 0;
  }
}

/* ---------- Shared page parts ---------- */

/* Heading on the left, text on the right (service pages, Services, Contact). */
.intro-split {
  display: grid;
  gap: 0 3rem;
  margin-bottom: 3rem;
}

.intro-split__image {
  display: block;
  margin-top: 1rem;
}

.intro-split__body h3 {
  margin-top: 2rem;
  font-size: 1.25rem;
  font-weight: 600;
}

@media (min-width: 64em) {
  .intro-split {
    grid-template-columns: 1fr 2fr;
  }

  .intro-split__head h2 {
    margin-bottom: 1rem;
  }
}

/* Light-grey band across the full width of the window (Services page). */
.panel-grey {
  margin: 4rem 0 0;
  padding: 3.5rem 0 1.5rem;
  background: #f5f5f5;
  box-shadow: 0 0 0 100vmax #f5f5f5;
  clip-path: inset(0 -100vmax);
}

.panel-grey h3 {
  margin-top: 0;
}

/* Content with a sidebar on the right. */
.with-sidebar {
  display: grid;
  gap: 3rem;
}

@media (min-width: 64em) {
  .with-sidebar {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 4rem;
  }
}

.sidebar-box {
  margin-bottom: 2.5rem;
  padding: 2rem 1.75rem 1.5rem;
  border: 2px solid var(--sky);
}

.sidebar-box--plain {
  padding: 2rem 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.page-content .sidebar-box__title {
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
  text-transform: uppercase;
}

.page-content .sidebar-box__list li {
  margin-bottom: 0.9rem;
  padding-left: 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
}

.page-content .sidebar-box__list li::before {
  content: "›";
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--sky);
}

.sidebar-box__list a {
  color: var(--navy);
  text-decoration: none;
}

.sidebar-box__list a:hover {
  text-decoration: underline;
}

.sidebar-box__more {
  margin: 0;
  font-size: 0.875rem;
}

.sidebar-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  color: var(--navy-ink);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}

.sidebar-link .icon {
  font-size: 1.375rem;
  color: var(--text);
}

.sidebar-link:hover {
  color: var(--link);
}

.page-content .doc-links {
  margin-bottom: 2rem;
}

.page-content .doc-links li {
  padding-left: 0;
}

.page-content .doc-links li::before {
  display: none;
}

.doc-links a {
  display: block;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  background: #f7f9fb;
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}

.doc-links a:hover {
  border-color: var(--sky);
  background: #fff;
}

/* Grey box behind forms. */
.form-panel {
  padding: 2rem var(--gutter);
  background: #f5f5f5;
}

@media (min-width: 48em) {
  .form-panel {
    padding: 2rem 2.5rem;
  }
}

/* ---------- Forms (Contact, Request a Quote, eBook) ---------- */
/* Same look as the old Gravity Forms: bold light-blue labels (a darker blue
   here, for contrast), light-blue borders, cream text areas and lists,
   rounded outline buttons, and numbered quote sections with a double rule. */

.site-form {
  font-size: 0.9375rem;
}

.site-form fieldset {
  min-width: 0;
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
}

.field {
  margin-bottom: 1.25rem;
}

.field__label {
  display: block;
  margin-bottom: 0.4rem;
  padding: 0;
  color: var(--link);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
}

.field__required {
  color: var(--link);
}

.site-form input:not([type="radio"], [type="range"]),
.site-form select,
.site-form textarea {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--sky);
  border-radius: 0;
  background: #fff;
  color: var(--navy);
  font: inherit;
}

.site-form select,
.site-form textarea {
  background-color: #faf6ee;
}

.site-form textarea {
  resize: vertical;
}

.site-form [aria-invalid="true"]:not([type="radio"]) {
  border-color: var(--red);
  box-shadow: inset 0 0 0 1px var(--red);
}

.field__error {
  margin: 0.35rem 0 0;
  color: var(--red);
  font-size: 0.875rem;
  font-weight: 600;
}

.field__options {
  display: grid;
  gap: 0.35rem;
}

.field__options--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2rem;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}

.choice input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--navy);
}

/* Number field with a slider underneath (quote dimensions, weight, value):
   a light track and a light-blue handle, as on the old form. */
.slider__range {
  display: none;
  width: 100%;
  height: 10px;
  margin: 0.75rem 0 0.25rem;
  border: 1px solid var(--sky);
  border-radius: 5px;
  background: #faf6ee;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.slider__range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 0 1px var(--link);
  -webkit-appearance: none;
  appearance: none;
}

.slider__range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 0 1px var(--link);
}

.js .slider__range {
  display: block;
}

/* Layout */
.form-grid,
.form-row {
  display: grid;
  gap: 0 1.5rem;
}

.form-grid {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.form-row {
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.form-cols {
  display: grid;
  gap: 0 2.5rem;
}

@media (min-width: 48em) {
  .form-cols {
    grid-template-columns: 1fr 1fr;
  }
}

.form-section__title,
.page-content .form-section__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0 1.25rem;
  color: var(--text-light);
  font-size: 1.25rem;
  font-weight: 600;
}

.page-content .form-section__title::before {
  display: none;
}

.form-section__title::after {
  content: "";
  flex: 1;
  height: 4px;
  border-block: 1px solid var(--sky);
}

.form-section__title:focus {
  outline: none;
}

.form-step__count {
  margin: 0;
  color: var(--text-light);
  font-size: 0.875rem;
}

.form-note {
  font-size: 0.875rem;
}

/* Two-step Quote form: with JavaScript, one step at a time. */
.js [data-steps] .form-step:not(.is-current) {
  display: none;
}

.form-step__next,
.form-step__prev {
  display: none;
}

.js .form-step__next,
.js .form-step__prev {
  display: inline-flex;
}

.trailer-drawings img {
  display: block;
  width: 100%;
  max-width: 520px;
  margin-top: 1.5rem;
}

@media (min-width: 48em) {
  .trailer-drawings img {
    margin-top: 0.5rem;
  }
}

.trailer-drawing {
  margin: 0;
}

.form-turnstile {
  min-height: 65px;
  margin: 0.5rem 0 1.25rem;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}

.form-actions--end {
  justify-content: flex-end;
}

.site-form button[disabled] {
  cursor: progress;
  opacity: 0.7;
}

/* Messages after sending. */
.form-alert:empty {
  display: none;
}

.form-alert,
.form-success {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--red);
  background: #fdf2f2;
  color: #333;
}

.form-alert--static {
  border-left-color: var(--sky);
  background: #f1f6fa;
}

.form-success {
  border-left-color: var(--sky);
  background: #f1f6fa;
  font-size: 1.0625rem;
}

.form-success:focus {
  outline: none;
}

.form-alert p,
.form-success p {
  margin: 0 0 0.75rem;
}

.form-alert p:last-child,
.form-success p:last-child {
  margin-bottom: 0;
}

.page-content .form-phones {
  margin: 0;
}

/* Contact form: labels beside the fields on wider screens, as before. */
@media (min-width: 48em) {
  .site-form--aside .field {
    display: grid;
    grid-template-columns: 9.5rem 1fr;
    column-gap: 1rem;
  }

  .site-form--aside .field > * {
    grid-column: 2;
  }

  .site-form--aside .field > .field__label {
    grid-column: 1;
    margin: 0;
    padding-top: 0.65rem;
  }

  /* A legend can't be a grid item, so radio groups float it instead. */
  .site-form--aside .field--choices {
    display: block;
  }

  .site-form--aside .field--choices > .field__label {
    float: left;
    width: 9.5rem;
    padding-top: 0.25rem;
  }

  .site-form--aside .field--choices > .field__options,
  .site-form--aside .field--choices > .field__error,
  .site-form--aside .form-turnstile {
    margin-left: 10.5rem;
  }
}

/* Small print (terms and conditions). */
.legal {
  margin-top: 3rem;
  font-size: 0.875rem;
}

/* Label/value pairs (Customers payment terms). */
.terms {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.25rem;
  margin: 0 0 2.5rem;
  font-weight: 700;
}

.terms dt {
  color: #333;
}

.terms dd {
  margin: 0;
  color: var(--red);
}

@media (max-width: 30em) {
  .terms {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .terms dd {
    margin-bottom: 1rem;
  }
}

.button--light {
  border-color: #ccc;
  background: #f2f2f2;
  color: #555;
}

.button--light:hover {
  border-color: var(--navy);
}

/* Rounded outline buttons on the forms, as on the old site. */
.button--outline,
.button--outline-sky {
  padding: 0.85rem 1.75rem;
  border-color: var(--sky);
  border-radius: 50px;
  background: #fff;
  color: var(--navy);
}

.button--outline:hover,
.button--outline-sky:hover {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

.button--outline-sky {
  border-color: #d5e5f2;
  color: var(--link);
}

.button--outline-light {
  border-color: #fff;
  background: transparent;
}

.button--outline-light:hover {
  border-color: #fff;
  background: #fff;
  color: var(--navy);
}

/* ---------- Service pages ---------- */

.info-cards {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 48em) {
  .info-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* On computers the boxes are at most 352px wide, so their 350px photos (plus
   the 1px border) show pixel for pixel, as on the old site. Shrinking them
   even 1% (to 346px) made them, and the words in them, visibly softer. */
@media (min-width: 64em) {
  .info-cards {
    grid-template-columns: repeat(3, minmax(0, 352px));
    column-gap: 1.5rem;
    justify-content: space-between;
  }

  /* As wide as its 700px picture (plus border), as on the old site. */
  .info-card--wide {
    grid-column: span 2;
    max-width: 702px;
  }
}

.info-card {
  border: 1px solid var(--line);
  font-size: 0.9375rem;
}

.info-card__image {
  display: block;
  width: 100%;
}

.info-card__body {
  padding: 1.75rem 1.5rem 0.5rem;
}

.page-content .info-card__title {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.page-content .info-card__title::before {
  display: none;
}

.page-content .info-card h4 {
  margin: 1.5rem 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
}

/* "Safe & Secure / Fast Delivery / 24/7 Support" band. Darker than the old
   light blue so the white text is readable. */
.features__inner {
  display: grid;
}

.features__item {
  padding: 3.5rem var(--gutter);
  background: #2a6a9a;
  color: #fff;
  text-align: center;
}

.features__item:nth-child(2) {
  background: #245e8a;
}

.features__item:nth-child(3) {
  background: #1e527a;
}

.features__item p {
  max-width: 21rem;
  margin: 0 auto;
}

.features__icon {
  font-size: 4.5rem;
}

.features__title {
  margin: 1.5rem 0 1rem;
  color: #fff;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (min-width: 64em) {
  .features__inner {
    grid-template-columns: repeat(3, 1fr);
  }

  .features__item {
    padding: 4.5rem 3rem;
  }
}

/* ---------- Service cards (homepage, Services page) ---------- */

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.875rem;
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: #fff;
}

.service-card:hover {
  box-shadow: 0 6px 20px rgb(16 65 107 / 0.15);
}

.service-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 35 / 22;
  object-fit: cover;
}

.service-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem 1.5rem 1.25rem;
}

.page-content .service-card__title,
.service-card__title {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.3;
  text-transform: uppercase;
}

.page-content .service-card__title::before {
  display: none;
}

.service-card__title a {
  color: var(--navy);
  text-decoration: none;
}

/* The whole card is the link. */
.service-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.service-card__title a:focus-visible {
  outline: none;
}

.service-card:focus-within {
  outline: 3px solid var(--link);
  outline-offset: 2px;
}

.service-card__more {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: auto 0 0;
  color: var(--link);
  font-size: 0.8125rem;
}

/* ---------- Articles and the News + Info list ---------- */

.page-content .article__title {
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.25rem);
  text-transform: uppercase;
}

.article__title::before {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  margin-bottom: 1.75rem;
  background: var(--sky);
}

.article__meta,
.post-list__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  color: var(--text-light);
  font-size: 0.8125rem;
}

.article__meta {
  margin-bottom: 2rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.article img {
  display: block;
  margin: 0 0 1.5rem;
}

.page-content .post-list li {
  padding-left: 0;
}

.page-content .post-list li::before {
  display: none;
}

.post-list__item {
  margin-bottom: 1.875rem;
  padding: 1.75rem 1.875rem 0.25rem;
  border: 1px solid var(--line);
}

.page-content .post-list__title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 400;
}

.page-content .post-list__title::before {
  display: none;
}

.post-list__title a {
  color: var(--navy);
  text-decoration: none;
}

.post-list__title a:hover {
  text-decoration: underline;
}

.post-list__meta {
  margin-bottom: 1rem;
}

/* ---------- Incoterms ---------- */

.term-cards {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 48em) {
  .term-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.term-card {
  padding: 1.75rem 1.5rem 0.25rem;
  border: 1px solid var(--line);
  font-size: 0.9375rem;
}

.page-content .term-card h3 {
  margin-top: 0;
  font-size: 1.25rem;
  font-weight: 400;
}

/* ---------- eBook landing page and thank-you page ---------- */

.ebook {
  display: grid;
  gap: 3rem;
}

.page-content .ebook__form h2,
.page-content .legal h2 {
  font-size: 1.5rem;
}

.ebook__cover {
  display: block;
  width: 200px;
  margin: 0 auto 1.5rem;
}

@media (min-width: 48em) {
  .ebook {
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }

  .ebook__about .ebook__cover {
    float: right;
    margin: 0 0 1rem 2rem;
  }

  .ebook--thanks {
    grid-template-columns: 1fr 248px;
  }

  .ebook--thanks .ebook__cover {
    width: 248px;
  }
}

/* ---------- Team pages ---------- */

.staff-section + .staff-section {
  margin-top: 5rem;
}

.staff-group + .staff-group {
  margin-top: 4rem;
}

.page-content .staff-grid {
  display: grid;
  gap: 1.875rem;
  margin: 0;
}

@media (min-width: 40em) {
  .page-content .staff-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .page-content .staff-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-content .staff-grid > li {
  margin: 0;
  padding: 0;
}

.page-content .staff-grid > li::before {
  display: none;
}

.staff-card {
  border: 1px solid var(--line);
  background: #fff;
}

.staff-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 35 / 23;
  object-fit: cover;
  background: var(--navy);
}

.staff-card__body {
  padding: 1.25rem 1.5rem 1.25rem;
}

.staff-card--no-photo .staff-card__body {
  border-top: 3px solid var(--sky);
}

.page-content .staff-card__name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 400;
}

.page-content .staff-card__name::before {
  display: none;
}

.staff-card__title {
  margin: 0.15rem 0 0;
  color: var(--text-light);
  font-size: 0.875rem;
}

.staff-card__contact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.75rem;
  margin: 0.9rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.staff-card__contact dt {
  color: var(--text-light);
}

.staff-card__contact dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.staff-card__contact a {
  color: var(--link);
}

/* ---------- Homepage ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(22rem, 55vw, 38rem);
  overflow: hidden;
  background: var(--navy);
  color: #fff;
}

/* The old slider's photo filter ("Mayfair"): 10% more contrast and color,
   plus a soft warm glow left of center that darkens toward the edges. */
.hero__photos {
  position: absolute;
  inset: 0;
  filter: contrast(1.1) saturate(1.1);
}

.hero__photos::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 40% 40%, rgb(255 255 255 / 0.8), rgb(255 200 200 / 0.6), #111 60%);
  mix-blend-mode: overlay;
  opacity: 0.4;
}

/* Slides are stacked; the active one fades in over the others. */
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.hero__photo.is-active {
  opacity: 1;
}

/* From 768px wide, each photo shows the same part, at the same size, as on
   the old slider (measured on the live site 2026-11-03). The old slider was a
   1240 x 900 box scaled to the screen width (never taller than 900px), starting
   at the very top of the page, with the old header covering its top 226px
   (230px from 769 to 1024px wide, 139px at 768px). Each photo filled the box
   (cover, centered). Here the photo box is that size and starts the old
   header's height above the strip, so the part the old header covered is cut
   off, and the strip is as tall as the part that showed below it. Narrower
   screens keep the strip above: the old site had no slideshow on phones.
   If this changes, update heroSizes in src/index.njk. */
@media (min-width: 48em) {
  .hero {
    --old-header: 230px;
    min-height: calc(min(900px, 72.58vw) - var(--old-header));
  }

  .hero__photos {
    top: calc(-1 * var(--old-header));
  }
}

@media (min-width: 48em) and (max-width: 48.03em) {
  .hero {
    --old-header: 139px;
  }
}

@media (min-width: 64.0625em) {
  .hero {
    --old-header: 226px;
  }
}

.hero .container {
  position: relative;
  z-index: 1;
}

/* All headlines share one spot, so the box is as tall as the longest. */
.hero__titles {
  display: grid;
  margin: 0 0 2rem;
}

.hero__title {
  grid-area: 1 / 1;
  align-self: end;
  /* Narrow enough that the first headline breaks after "SERVICE", as on the old slider. */
  max-width: 15em;
  margin: 0;
  color: #fff;
  /* Font, size and shadow of the old slider: 47px at 1366px wide, 29px at 768px. */
  font-family: "Poppins", var(--font-heading);
  font-size: clamp(1.75rem, 0.37rem + 3vw, 3rem);
  font-weight: 500;
  line-height: 1.17;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-shadow: 0.1em 0 0.2em rgb(0 0 0 / 0.75);
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

/* The old headline fades out first, then the new one fades in. */
.hero__title.is-active {
  opacity: 1;
  transition: opacity 0.3s ease-out 0.3s;
}

.hero__pause {
  position: absolute;
  right: var(--gutter);
  bottom: 1rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgb(16 65 107 / 0.6);
  color: #fff;
  font-size: 1.125rem;
  cursor: pointer;
}

.hero__pause[hidden] {
  display: none;
}

.hero__pause:hover {
  background: var(--navy);
}

.hero__pause:focus-visible {
  outline-color: #fff;
}

.hero__play-icon,
.hero__pause.is-paused .hero__pause-icon {
  display: none;
}

.hero__pause.is-paused .hero__play-icon {
  display: block;
}

.quick-links {
  background: var(--navy);
}

.quick-links__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.quick-links a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1rem 0.5rem;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  text-align: center;
  text-decoration: none;
}

.quick-links a:hover {
  background: var(--navy-deep);
}

.quick-links .icon {
  font-size: 2rem;
  color: var(--sky);
}

.welcome {
  display: grid;
  gap: 2.5rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.welcome__text {
  padding-bottom: 0;
}

.welcome__signature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 3rem;
}

.welcome__signature p {
  margin: 0;
  font-size: 0.875rem;
}

.welcome__signature strong {
  color: var(--navy);
  text-transform: uppercase;
}

.welcome__signature img {
  width: 200px;
}

/* Never wider than the original photo (540px), so it isn't enlarged on tablets. */
.welcome__photo {
  display: block;
  width: 100%;
  max-width: 540px;
}

@media (min-width: 64em) {
  /* The photo column is exactly the photo's own width (540px), so it shows
     pixel for pixel, as on the old site. In a half-width column (522px) the
     browser had to shrink it by 3%, which visibly blurred it and lowered its
     contrast on standard screens. */
  .welcome {
    grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
    align-items: center;
    gap: 4rem;
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
  }
}

.counters {
  padding: 2.75rem 0;
  background: var(--sky);
}

.counters__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1rem;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  list-style: none;
}

/* Phones: icon above the figure. Wider screens: icon beside it. */
.counters__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  color: var(--navy);
  text-align: center;
}

.counters__icon {
  margin-bottom: 0.5rem;
  font-size: 2.75rem;
}

@media (min-width: 40em) {
  .counters__item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 1rem;
    align-items: center;
    text-align: left;
  }

  .counters__icon {
    grid-row: span 2;
    margin: 0;
    font-size: 3.25rem;
  }
}

.counters__value {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  font-weight: 300;
  line-height: 1.1;
}

.counters__label {
  color: var(--navy-deep);
  font-size: 0.8125rem;
}

@media (min-width: 64em) {
  .counters__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

.home-services {
  padding: 4.5rem 0;
  background: var(--navy);
  color: #fff;
}

.home-services__intro h2 {
  color: #fff;
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.25rem);
  text-transform: uppercase;
}

.home-services__intro h2::before {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  margin-bottom: 1.75rem;
  background: var(--sky);
}

.home-services .container {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 64em) {
  .home-services .container {
    grid-template-columns: 1fr 3fr;
    align-items: start;
  }

  .service-grid--home {
    grid-template-columns: repeat(3, 1fr);
  }
}

.home-services .service-card p {
  color: var(--text);
}

.testimonials {
  padding: 4.5rem 0;
}

.testimonials__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 2.5rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.testimonial {
  margin: 0;
}

.testimonial__quote {
  position: relative;
  margin: 0 0 1.25rem;
  padding-top: 3.25rem;
  font-style: italic;
  line-height: 1.75;
}

.testimonial__quote::before {
  content: "“";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--sky);
  border-radius: 50%;
  color: var(--sky);
  font: 700 2.25rem/1 Georgia, serif;
  text-align: center;
  padding-top: 0.45rem;
}

.testimonial__quote p {
  margin: 0;
}

.testimonial__by {
  display: flex;
  flex-direction: column;
  font-size: 0.8125rem;
}

.testimonial__name {
  color: var(--navy);
  font-weight: 700;
  text-transform: uppercase;
}

.testimonial__company {
  color: var(--text-light);
}

/* Office addresses (homepage, contact page). */
.offices {
  padding: 3.5rem 0 2.5rem;
  background: #eef2f6;
}

.offices__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.offices__name {
  margin-bottom: 1rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
}

.offices__line {
  display: flex;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
}

.offices__line .icon {
  flex: none;
  margin-top: 0.2rem;
  font-size: 1.125rem;
  color: var(--link);
}

.offices__line a {
  color: inherit;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy);
  color: #fff;
}

.site-footer__main {
  padding-top: 3.5rem;
  padding-bottom: 2.25rem;
}

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

.site-footer__logo img {
  display: block;
  width: 260px;
}

.site-footer__text {
  max-width: 17rem;
  margin: 1.25rem 0 0;
}

.site-footer__copyright {
  margin: 0;
  padding: 1.1rem 0 1.4rem;
  border-top: 1px solid rgb(255 255 255 / 0.2);
  color: rgb(255 255 255 / 0.8);
  font-size: 0.8125rem;
}

@media (min-width: 48em) {
  .site-footer__logo img {
    width: 300px;
  }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}