/* ========================================================================== 
   SAFETRANS FREIGHT SOLUTIONS — RESPONSIVE PRODUCTION STYLESHEET
   One design system, one cascade, and five intentional responsive breakpoints.
   ========================================================================== */

:root {
  --brand: #C4E31D;
  --brand-hover: #d3ed43;
  --brand-soft: #f4f9d8;
  --ink: #111814;
  --body: #566159;
  --muted: #778179;
  --white: #fff;
  --surface: #f6f8f5;
  --surface-2: #eef2ed;
  --border: #dce4dd;
  --border-strong: #c8d3ca;
  --footer: #32392e;
  --dark: #1d261f;
  --dark-deep: #121914;
  --danger: #a52620;

  --container: 77.5rem;
  --page-pad: clamp(1.25rem, 4.2vw, 4.5rem);
  --section-space: clamp(4.75rem, 7.2vw, 7.25rem);
  --header-height: 4.5rem;

  --radius-xs: 0.625rem;
  --radius-sm: 0.875rem;
  --radius-md: 1.125rem;
  --radius-lg: 1.625rem;
  --radius-xl: 2.125rem;

  --shadow-xs: 0 1px 2px rgba(14, 31, 18, 0.035), 0 8px 24px rgba(14, 31, 18, 0.045);
  --shadow-sm: 0 18px 45px rgba(14, 31, 18, 0.08);
  --shadow-md: 0 28px 72px rgba(14, 31, 18, 0.12);
  --shadow-lg: 0 38px 100px rgba(8, 22, 12, 0.18);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reset and global primitives ------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.nav-open {
  overflow: hidden;
}

main,
section,
article,
nav,
header,
footer,
figure,
picture {
  min-width: 0;
}

h1,
h2,
h3,
p,
ul,
ol,
figure,
address {
  margin: 0;
}

h1,
h2,
h3 {
  color: var(--ink);
  font-family: inherit;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

:where(h1, h2, h3, h4, p, li, dt, dd, address) {
  overflow-wrap: anywhere;
}

svg {
  max-width: 100%;
}

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

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

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

img,
video {
  height: auto;
}

button,
input,
textarea,
select {
  max-width: 100%;
  font: inherit;
}

button {
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

address {
  font-style: normal;
}

::selection {
  background: rgba(196, 227, 29, 0.75);
  color: var(--ink);
}

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 4px;
}

[hidden] {
  display: none !important;
}

.shell {
  width: min(100%, calc(var(--container) + (var(--page-pad) * 2)));
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.ico {
  display: block;
  width: 1em;
  height: 1em;
  flex: none;
}

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

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  transform: translateY(-160%);
  padding: 0.75rem 1.125rem;
  border-radius: 999px;
  background: var(--brand);
  color: var(--ink);
  font-weight: 700;
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: none;
}

.d-only {
  display: block;
}

.m-only {
  display: none;
}

/* Typography ------------------------------------------------------------- */
.h2 {
  font-size: clamp(2.125rem, 3.75vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.048em;
}

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

.accent {
  color: var(--brand);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6875rem;
  color: var(--brand);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.145em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  flex: none;
  border-radius: 999px;
  background: currentColor;
}

.eyebrow--center {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
}

.eyebrow--dark {
  color: var(--ink);
}

.section-sub,
.advantage__lead,
.why__lead,
.capabilities__lead,
.blog-intro__sub {
  max-width: 47.5rem;
  margin: 1.125rem auto 0;
  color: var(--body);
  font-size: clamp(0.9375rem, 1.25vw, 1.125rem);
  font-weight: 400;
  line-height: 1.72;
  text-align: center;
}

/* Buttons and links ------------------------------------------------------ */
.btn,
.qform__submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6875rem;
  min-height: 3.125rem;
  max-width: 100%;
  padding-inline: 1.4375rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
  transition: transform 0.25s var(--ease), box-shadow 0.25s ease, background-color 0.25s ease,
    color 0.25s ease, border-color 0.25s ease;
}

.btn .ico,
.qform__submit .ico {
  width: 0.9375rem;
  height: 0.9375rem;
  transition: transform 0.25s var(--ease);
}

.btn:hover .ico,
.qform__submit:hover .ico {
  transform: translateX(0.25rem);
}

.btn--lime,
.qform__submit {
  background: var(--brand);
  color: var(--ink);
  box-shadow: 0 12px 30px rgba(196, 227, 29, 0.24);
}

.btn--lime:hover,
.qform__submit:hover {
  transform: translateY(-2px);
  background: var(--brand-hover);
  box-shadow: 0 18px 38px rgba(196, 227, 29, 0.32);
}

.btn--dark {
  background: var(--dark);
  color: var(--white);
  box-shadow: 0 12px 30px rgba(10, 20, 12, 0.18);
}

.btn--dark:hover {
  transform: translateY(-2px);
  background: var(--dark-deep);
}

.btn--ghost {
  border: 1px solid rgba(18, 25, 20, 0.36);
  background: rgba(255, 255, 255, 0.14);
  color: var(--ink);
}

.btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--ink);
  background: var(--white);
}

.btn--lg,
.btn--hero,
.btn--glass {
  min-height: 3.375rem;
  padding-inline: 1.6875rem;
}

.btn--glass {
  border: 1px solid rgba(255, 255, 255, 0.46);
  background: rgba(255, 255, 255, 0.09);
  color: var(--white);
  backdrop-filter: blur(10px);
}

.btn--glass:hover {
  transform: translateY(-2px);
  background: var(--white);
  color: var(--ink);
}

.link-arrow,
.link-lime {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  width: max-content;
  max-width: 100%;
  padding-bottom: 0.375rem;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
}

.link-arrow::after,
.link-lime::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  border-radius: 999px;
  background: var(--brand);
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}

.link-arrow:hover::after,
.link-lime:hover::after {
  transform: scaleX(1);
}

.link-arrow .ico,
.link-lime .ico {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 0.25s var(--ease);
}

.link-arrow:hover .ico,
.link-lime:hover .ico {
  transform: translate(3px, -2px);
}

/* Header and navigation -------------------------------------------------- */
.site-header,
.site-header--solid {
  position: absolute;
  inset: 0 0 auto;
  z-index: 200;
  padding-top: 1rem;
  transition: padding 0.3s ease, transform 0.3s var(--ease);
}

.site-header--solid {
  position: relative;
  background: var(--white);
}

.site-header.is-scrolled {
  position: fixed;
  padding-top: 0.5rem;
  animation: header-in 0.32s var(--ease) both;
}

.page-blogs .site-header.is-scrolled,
.page-contact .site-header.is-scrolled {
  position: fixed;
}

@keyframes header-in {
  from {
    transform: translateY(-1.125rem);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.site-header__inner,
.site-header--solid .site-header__inner {
  display: flex;
  align-items: center;
  min-height: var(--header-height);
  padding: 0.5625rem 0.75rem 0.5625rem 1.0625rem;
  gap: clamp(0.875rem, 1.7vw, 1.75rem);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 1.0625rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 15px 46px rgba(14, 28, 17, 0.12);
  backdrop-filter: blur(20px) saturate(150%);
}

.site-header__inner > * {
  min-width: 0;
}

.brand {
  order: 1;
  display: block;
  flex: none;
}

.brand img {
  width: clamp(7rem, 8.5vw, 8.5rem);
  height: auto;
  object-fit: contain;
}

.nav {
  order: 2;
  min-width: 0;
  margin-left: auto;
}

.nav__panel {
  display: contents;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.125rem, 1.7vw, 1.75rem);
}

.nav__item {
  position: relative;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  min-height: 2.75rem;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.012em;
  transition: color 0.2s ease;
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--brand);
}

.nav__label {
  position: relative;
}

.nav__label::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.625rem;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--brand);
  transform: scaleX(0);
  transition: transform 0.25s var(--ease);
}

.nav__link:hover .nav__label::after,
.nav__link.is-active .nav__label::after {
  transform: scaleX(1);
}

.nav__link .ico {
  width: 0.5rem;
  height: 0.5rem;
  transition: transform 0.2s ease;
}

.nav__link[aria-expanded="true"] .ico {
  transform: rotate(180deg);
}

.site-header__actions {
  order: 3;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: clamp(0.875rem, 1.35vw, 1.25rem);
}

.site-header__actions > .btn {
  min-height: 2.8125rem;
  padding-inline: 1.1875rem;
  font-size: 0.8125rem;
}

.burger {
  display: none;
  order: 4;
  position: relative;
  width: 2.625rem;
  height: 2.625rem;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--white);
}

.burger span {
  position: absolute;
  left: 0.75rem;
  width: 1rem;
  height: 1.5px;
  border-radius: 999px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.burger span:nth-child(1) { top: 0.875rem; }
.burger span:nth-child(2) { top: 1.25rem; }
.burger span:nth-child(3) { top: 1.625rem; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(0.375rem) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-0.375rem) rotate(-45deg); }

/* Desktop services dropdown --------------------------------------------- */
.mega {
  position: absolute;
  top: calc(100% + 0.875rem);
  left: -1.125rem;
  z-index: 220;
  display: grid;
  width: min(20rem, calc(100vw - (var(--page-pad) * 2)));
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 1.125rem;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.625rem);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.25s var(--ease);
  backdrop-filter: blur(18px);
}

.mega.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.mega__link {
  display: flex;
  align-items: center;
  min-height: 2.6875rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.6875rem;
  color: var(--body);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.mega__link:hover,
.mega__link.is-current {
  transform: translateX(0.25rem);
  background: var(--brand-soft);
  color: var(--ink);
}

/* Language selector ------------------------------------------------------ */
.lang-select {
  position: relative;
}

.lang-select__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding-inline: 0.8125rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lang-select__toggle:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.lang-select__toggle .ico {
  width: 0.5rem;
  height: 0.5rem;
  transition: transform 0.2s ease;
}

.lang-select__toggle[aria-expanded="true"] .ico {
  transform: rotate(180deg);
}

.flag-wrap,
.flag {
  display: block;
  width: 1.3125rem;
  height: 1rem;
  flex: none;
  overflow: hidden;
  border-radius: 3px;
}

.lang-select__menu {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  z-index: 230;
  display: grid;
  width: min(15.625rem, calc(100vw - (var(--page-pad) * 2)));
  max-height: min(31rem, 70vh);
  padding: 0.5625rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--white);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s var(--ease);
}

.lang-select.is-open .lang-select__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.lang-select__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5625rem 0.625rem;
  border-radius: 0.625rem;
  color: var(--body);
  font-size: 0.8125rem;
  text-align: left;
}

.lang-select__item:hover,
.lang-select__item.is-selected {
  background: var(--brand-soft);
  color: var(--ink);
}

/* Shared section rhythm -------------------------------------------------- */
.services,
.advantage,
.legacy,
.recognition,
.sectors,
.customers,
.insights,
.story,
.why,
.capabilities,
.supply,
.values,
.svc-overview,
.partners,
.process,
.blog,
.contact,
.office,
.mapsec {
  padding-block: var(--section-space);
}

/* Homepage media-only hero ---------------------------------------------- */
.hero {
  position: relative;
  height: clamp(41.25rem, 72vw, 56.25rem);
  min-height: 41.25rem;
  overflow: hidden;
  background: var(--dark);
}

.hero--media-only .hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #111a14;
}

.hero--media-only .hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  background: transparent;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Homepage services ------------------------------------------------------ */
.services {
  position: relative;
  background: var(--white);
}

.services::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 44%;
  height: 100%;
  background: radial-gradient(circle at 82% 20%, rgba(196, 227, 29, 0.1), transparent 34%);
  pointer-events: none;
}

.services__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.375rem;
  align-items: stretch;
}

.services__intro {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.375rem;
  padding: 1.5rem 2rem 1.5rem 0;
}

.services__intro .h2 {
  max-width: 27.5rem;
}

.svc-card {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-xs);
  transition: transform 0.35s var(--ease), box-shadow 0.35s ease, border-color 0.35s ease;
}

.svc-card:hover {
  transform: translateY(-0.5rem);
  border-color: rgba(196, 227, 29, 0.46);
  box-shadow: var(--shadow-md);
}

.svc-card__media {
  overflow: hidden;
}

.svc-card__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  transition: transform 0.7s var(--ease);
}

.svc-card:hover .svc-card__media img {
  transform: scale(1.05);
}

.svc-card__body {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  flex: 1;
  min-height: 13.375rem;
  padding: 1.5625rem;
}

.svc-card__icon {
  display: grid;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  flex: none;
  border-radius: 0.8125rem;
  background: var(--brand);
  color: var(--ink);
}

.svc-card__icon .ico {
  width: 1.375rem;
  height: 1.375rem;
}

.svc-card__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  height: 100%;
}

.svc-card__title {
  font-size: 1.1875rem;
  line-height: 1.3;
}

.svc-card__desc {
  margin-top: 0.5625rem;
  color: var(--body);
  font-size: 0.875rem;
  line-height: 1.75;
}

.svc-card .link-arrow {
  margin-top: auto;
  padding-top: 1.375rem;
}

/* Advantage -------------------------------------------------------------- */
.advantage {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  color: var(--white);
}

.advantage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 78% 18%, rgba(196, 227, 29, 0.13), transparent 30%),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: auto, 4.5rem 4.5rem, 4.5rem 4.5rem;
  mask-image: linear-gradient(to bottom, black, transparent 94%);
}

.advantage > .shell {
  position: relative;
}

.advantage__lead {
  color: rgba(255, 255, 255, 0.68);
}

.advantage__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.125rem;
  margin-top: 3rem;
}

.adv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 16.75rem;
  padding: 1.875rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
  transition: transform 0.3s var(--ease), background-color 0.3s ease, border-color 0.3s ease;
}

.adv-card:hover {
  transform: translateY(-0.4375rem);
  border-color: rgba(196, 227, 29, 0.36);
  background: rgba(255, 255, 255, 0.085);
}

.adv-card__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  background: var(--brand);
  color: var(--ink);
}

.adv-card__icon .ico {
  width: 1.6875rem;
  height: 1.6875rem;
}

.adv-card__title {
  margin-top: 1.9375rem;
  color: var(--white);
  font-size: 1.125rem;
  line-height: 1.35;
}

.adv-card__desc {
  margin-top: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.875rem;
  line-height: 1.7;
}

/* Homepage about preview ------------------------------------------------- */
.legacy {
  background: var(--white);
}

.legacy__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(min(100%, 28.75rem), 0.95fr);
  gap: clamp(3.5rem, 8vw, 7rem);
  align-items: center;
}

.legacy__copy {
  max-width: 41.25rem;
}

.legacy .eyebrow {
  margin-bottom: 1.375rem;
}

.legacy__para,
.story__para,
.svc-overview__para {
  margin-top: 1.375rem;
  font-size: 1rem;
  line-height: 1.8;
}

.legacy__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.375rem;
  margin-top: 2.125rem;
  padding-top: 1.875rem;
  border-top: 1px solid var(--border);
}

.point {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.point__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 0.875rem;
  background: var(--brand-soft);
  color: var(--brand);
}

.point__icon .ico {
  width: 1.4375rem;
  height: 1.4375rem;
}

.point__title {
  font-size: 1rem;
  line-height: 1.35;
}

.point__desc {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.65;
}

.legacy .btn {
  margin-top: 2.125rem;
}

.legacy__media {
  position: relative;
}

.legacy__media::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  left: -1.5rem;
  width: 8.125rem;
  height: 8.125rem;
  border-radius: 1.75rem;
  background: var(--brand);
  opacity: 0.2;
}

.legacy__media img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.075;
  border-radius: var(--radius-lg);
  object-fit: cover;
  object-position: center;
  box-shadow: var(--shadow-md);
}

/* Recognition ------------------------------------------------------------ */
.recognition {
  background: var(--surface);
}

.recognition .h2 {
  margin-bottom: 2.625rem;
}

.recognition .section-sub {
  margin-bottom: 2.375rem;
}

.recognition__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.recognition__row li {
  display: grid;
  place-items: center;
  min-height: 9.375rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-xs);
  transition: transform 0.3s var(--ease), box-shadow 0.3s ease;
}

.recognition__row li:hover {
  transform: translateY(-0.3125rem);
  box-shadow: var(--shadow-sm);
}

.recognition__row img {
  width: auto;
  max-width: 82%;
  height: 5.125rem;
  object-fit: contain;
}

/* Industries ------------------------------------------------------------- */
.sectors {
  background: var(--white);
}

.sectors .h2 {
  margin-top: 1.25rem;
}

.sectors .section-sub {
  margin-bottom: 3rem;
}

.sectors__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.sector {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  align-items: center;
  gap: 1.125rem;
  min-height: 7.875rem;
  padding: 1.375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  transition: transform 0.25s var(--ease), border-color 0.25s ease, box-shadow 0.25s ease;
}

.sector:hover {
  transform: translateY(-0.3125rem);
  border-color: rgba(196, 227, 29, 0.48);
  box-shadow: var(--shadow-sm);
}

.sector__icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  overflow: visible;
  border: 1px solid rgba(16, 23, 18, 0.07);
  border-radius: 1rem;
  background: linear-gradient(145deg, #fbfcfa, #f0f4ef);
}

.sector__icon img,
.sector > img {
  width: 3.375rem;
  height: 3.375rem;
  max-width: none;
  object-fit: contain;
  object-position: center;
}

.sector:nth-child(1) .sector__icon img {
  transform: scale(1.13);
}

.sector:nth-child(3) .sector__icon img {
  transform: scale(1.05);
}

.sector span {
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Customer carousel ------------------------------------------------------ */
.customers {
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface), #f2f5f1);
}

.customers .h2 {
  margin-top: 1.25rem;
  margin-bottom: 2.625rem;
}

.customers__marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-block: 0.375rem 0.75rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.customers__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: customers-scroll 34s linear infinite;
}

.customers__marquee:hover .customers__track,
.customers__marquee:focus-within .customers__track {
  animation-play-state: paused;
}

.customers__set {
  display: flex;
  gap: 1rem;
  padding-right: 1rem;
}

.customer-logo {
  display: grid;
  place-items: center;
  flex: 0 0 clamp(11.5rem, 15vw, 14.125rem);
  min-height: 7.25rem;
  padding: 1.375rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--white);
  box-shadow: var(--shadow-xs);
}

.customer-logo img,
.customers__row img,
.customers__row--2 img {
  width: auto;
  max-width: 100%;
  height: 3.375rem;
  max-height: 3.375rem;
  object-fit: contain;
  filter: none !important;
  opacity: 1 !important;
  image-rendering: auto;
  transform: translateZ(0);
  transition: transform 0.25s ease;
}

.customer-logo:hover img {
  transform: scale(1.035);
}

@keyframes customers-scroll {
  to { transform: translateX(-50%); }
}

/* Insights and article cards -------------------------------------------- */
.insights {
  background: var(--white);
}

.insights__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.625rem;
}

.insights__grid,
.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.375rem;
}

.post {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: 0.75rem 0.75rem 1.625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-xs);
  transition: transform 0.35s var(--ease), box-shadow 0.35s ease;
}

.post:hover {
  transform: translateY(-0.4375rem);
  box-shadow: var(--shadow-md);
}

.post__media {
  display: block;
  overflow: hidden;
  border-radius: 0.9375rem;
}

.post__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  transition: transform 0.65s var(--ease);
}

.post:hover .post__media img {
  transform: scale(1.045);
}

.post__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0.5rem 0.8125rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.5625rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.post__title {
  margin-inline: 0.5rem;
  font-size: 1.25rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.post__title a:hover {
  color: var(--brand);
}

.post__excerpt {
  margin: 0.6875rem 0.5rem 0;
  color: var(--body);
  font-size: 0.875rem;
  line-height: 1.7;
}

.post__action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  max-width: calc(100% - 1rem);
  margin: auto 0.5rem 0;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5625rem;
  background: var(--footer);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.post__action .ico {
  width: 0.875rem;
  height: 0.875rem;
}

.post__action:hover {
  transform: translateY(-2px);
  background: var(--brand);
  color: var(--ink);
}

/* CTA -------------------------------------------------------------------- */
.cta {
  padding-block: clamp(4.875rem, 8vw, 7.375rem);
  background: var(--white);
}

.cta__panel {
  position: relative;
  min-height: 26.875rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--brand);
  box-shadow: 0 28px 72px rgba(75, 91, 0, 0.2);
}

.cta__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 12% 4%, rgba(255, 255, 255, 0.42), transparent 34%),
    linear-gradient(122deg, rgba(255, 255, 255, 0.14), transparent 52%);
  pointer-events: none;
}

.cta__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(18, 25, 20, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 25, 20, 0.055) 1px, transparent 1px);
  background-size: 3.625rem 3.625rem;
  mask-image: linear-gradient(90deg, black, transparent 76%);
  pointer-events: none;
}

.cta__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 26.875rem;
  max-width: 40.625rem;
  padding: 3.625rem clamp(2rem, 5vw, 4.875rem);
}

.cta__copy .eyebrow {
  color: var(--ink);
}

.cta__title {
  max-width: 37.5rem;
  margin-top: 1.125rem;
  color: var(--ink);
  font-size: clamp(2.375rem, 4.4vw, 3.875rem);
  line-height: 1.02;
  letter-spacing: -0.055em;
}

.cta__desc {
  max-width: 29.375rem;
  margin-top: 1.125rem;
  color: rgba(18, 25, 20, 0.74);
  font-size: 1rem;
  line-height: 1.75;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.875rem;
}

.cta__ship {
  position: absolute;
  right: -1%;
  bottom: -2%;
  z-index: 1;
  width: min(59%, 48.75rem);
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  opacity: 0.98;
  filter: drop-shadow(0 24px 26px rgba(27, 34, 12, 0.2));
}

/* Inner page banners ----------------------------------------------------- */
/* Inner banners intentionally contain title, subtitle, and existing actions only; no pre-title badge. */
.inner-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(25rem, 31vw, 27.5rem);
  overflow: hidden;
  background: var(--dark);
}

.inner-hero picture {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
}

.inner-hero .svc-hero__img,
.inner-hero .about-hero__img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.inner-hero .svc-hero__video {
  position: absolute;
  inset: 0;
  z-index: -3;
  display: block;
}


/* Sea Freight banner: obscure only the embedded Gemini mark in the supplied video. */
.svc-hero--sea .svc-hero__gemini-mask {
  position: absolute;
  right: 4.5%;
  bottom: 0.25rem;
  z-index: -2;
  display: none;
  width: 3.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(18, 43, 53, 0.38);
  -webkit-backdrop-filter: blur(16px) saturate(0.75);
  backdrop-filter: blur(16px) saturate(0.75);
  pointer-events: none;
}

/* At these viewport widths the supplied 16:9 video exposes its embedded bottom-right mark. */
@media (min-width: 48rem) and (max-width: 68rem) {
  .svc-hero--sea .svc-hero__gemini-mask {
    display: block;
  }
}

.inner-hero .svc-hero__scrim,
.inner-hero .about-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgba(8, 14, 9, 0.91) 0%, rgba(8, 14, 9, 0.76) 33%,
      rgba(8, 14, 9, 0.42) 57%, rgba(8, 14, 9, 0.1) 82%, rgba(8, 14, 9, 0.04) 100%),
    linear-gradient(180deg, rgba(8, 14, 9, 0.12), rgba(8, 14, 9, 0.28));
}

.inner-hero .svc-hero__inner,
.inner-hero .about-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: inherit;
  padding-top: clamp(8rem, 8vw, 8.5rem);
  padding-bottom: clamp(3.25rem, 4vw, 4.25rem);
  text-align: left;
}

.inner-hero .svc-hero__title,
.inner-hero .about-hero__title {
  max-width: 48.75rem;
  color: var(--white);
  font-size: clamp(2.625rem, 4.7vw, 4rem);
  line-height: 1.01;
  letter-spacing: -0.052em;
  text-align: left;
}

.inner-hero .svc-hero__sub,
.inner-hero .about-hero__sub {
  max-width: 40.625rem;
  margin-top: 1.0625rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
  line-height: 1.62;
  text-align: left;
}

.inner-hero .btn--hero {
  margin-top: 1.5rem;
}

.about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.375rem;
}

.page-about .inner-hero.about-hero {
  min-height: clamp(27.5rem, 34vw, 30rem);
}

.page-about .inner-hero .about-hero__img {
  object-position: center 50%;
}

.page-about .inner-hero .about-hero__scrim {
  background: linear-gradient(90deg, rgba(7, 13, 8, 0.94) 0%, rgba(7, 13, 8, 0.8) 30%,
      rgba(7, 13, 8, 0.49) 53%, rgba(7, 13, 8, 0.12) 78%, rgba(7, 13, 8, 0.03) 100%),
    linear-gradient(180deg, rgba(7, 13, 8, 0.08), rgba(7, 13, 8, 0.3));
}

.page-about .inner-hero .about-hero__inner {
  padding-top: clamp(8rem, 8vw, 8.5rem);
  padding-bottom: clamp(3.25rem, 4vw, 4.25rem);
}

/* Service overview ------------------------------------------------------- */
.svc-overview {
  background: var(--white);
}

.svc-overview__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(min(100%, 24rem), 0.92fr);
  gap: clamp(3.25rem, 7vw, 5.75rem);
  align-items: center;
}

.svc-overview__copy {
  max-width: 42.5rem;
}

.svc-overview .eyebrow {
  margin-bottom: 1.375rem;
}

.svc-overview__para + .svc-overview__para {
  margin-top: 1rem;
}

.svc-overview__media img {
  width: 100%;
  aspect-ratio: 4 / 4.15;
  border-radius: var(--radius-lg);
  object-fit: cover;
  object-position: center;
  box-shadow: var(--shadow-md);
}

.svc-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6875rem 0.8125rem;
  margin-top: 2.0625rem;
}

.svc-checks li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3.375rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 0.8125rem;
  background: #f8faf6;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}

.svc-checks .ico {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--brand);
}


.svc-checks--detailed li {
  align-items: flex-start;
  min-height: 0;
}

.svc-checks--detailed li span {
  display: block;
  flex: 1;
}

.svc-checks--detailed li strong {
  display: block;
  margin-bottom: 0.1875rem;
  font-size: 0.84375rem;
}

.svc-checks--detailed li small {
  display: block;
  color: var(--muted);
  font-size: 0.76875rem;
  font-weight: 500;
  line-height: 1.45;
}

.svc-checks--detailed li small + small {
  margin-top: 0.1875rem;
}

/* Partners --------------------------------------------------------------- */
.partners {
  background: var(--surface);
}

.partners .eyebrow {
  margin-bottom: 1.125rem;
}

.partners .h2 {
  margin-bottom: 2.75rem;
}

.partners__card {
  padding: clamp(1.75rem, 4vw, 3.125rem);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.partners__head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.875rem;
}

.partners__badge {
  display: grid;
  place-items: center;
  width: 3.375rem;
  height: 3.375rem;
  flex: none;
  border-radius: 0.9375rem;
  background: var(--brand);
  color: var(--ink);
}

.partners__badge .ico {
  width: 1.6875rem;
  height: 1.6875rem;
}

.partners__sub {
  font-size: 1.25rem;
  line-height: 1.3;
}

.partners__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.partners__grid li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  padding: 0.875rem 0.9375rem 0.875rem 1.9375rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 500;
}

.partners__grid li::before {
  content: "";
  position: absolute;
  left: 1rem;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--brand);
}


.partners__grid--logos li {
  gap: 0.875rem;
  min-height: 4.625rem;
  padding: 0.875rem 1rem;
}

.partners__grid--logos li::before {
  display: none;
}

.partners__grid--logos img {
  display: block;
  width: auto;
  height: auto;
  max-width: 6rem;
  max-height: 2.5rem;
  object-fit: contain;
  image-rendering: auto;
  flex: none;
}

.partners__grid--logos span {
  display: block;
  line-height: 1.4;
}

/* Process ---------------------------------------------------------------- */
.process {
  background: var(--white);
}

.process .h2 {
  margin-bottom: 3.625rem;
}

.process__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.125rem;
  counter-reset: process;
}

.process__row::before {
  content: "";
  position: absolute;
  top: 3.375rem;
  right: 8%;
  left: 8%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), var(--brand), transparent);
}

.step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 16.25rem;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #fff, #f9fbf8);
  box-shadow: var(--shadow-xs);
  counter-increment: process;
  transition: transform 0.3s var(--ease), box-shadow 0.3s ease, border-color 0.3s ease;
}

.step:hover {
  transform: translateY(-0.4375rem);
  border-color: rgba(196, 227, 29, 0.45);
  box-shadow: var(--shadow-sm);
}

.step::before {
  content: counter(process, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1.875rem;
  border: 7px solid var(--white);
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 1px var(--border);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 800;
}

.step__mark {
  display: none;
}

.step__title {
  font-size: 1.125rem;
  line-height: 1.35;
}

.step__desc {
  margin-top: 0.75rem;
  color: var(--body);
  font-size: 0.875rem;
  line-height: 1.7;
}

/* About story ------------------------------------------------------------ */
.story {
  background: var(--white);
}

.story__grid {
  display: grid;
  grid-template-columns: minmax(min(100%, 27.5rem), 0.95fr) minmax(0, 1.05fr);
  grid-template-areas: "media copy";
  gap: clamp(3.875rem, 9vw, 7.875rem);
  align-items: center;
}

.story__media {
  position: relative;
  grid-area: media;
  min-height: clamp(30rem, 45vw, 35.625rem);
}

.story__img--a {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 78%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  object-position: center;
  box-shadow: var(--shadow-md);
}

.story__frame {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 66%;
  overflow: hidden;
  border: 10px solid var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.story__img--b {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

.story__copy {
  grid-area: copy;
  max-width: 40.625rem;
}

.story__title {
  font-size: clamp(2.375rem, 4.5vw, 3.875rem);
  line-height: 1.04;
  letter-spacing: -0.055em;
}

.story__sub {
  margin-top: 1.75rem;
  font-size: 1.3125rem;
  line-height: 1.4;
}

.story__para {
  margin-top: 0.75rem;
}

/* About why, capabilities and values ------------------------------------ */
.why {
  background: var(--surface);
}

.why .h2 {
  margin-top: 1.25rem;
}

.why__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.875rem;
}

.why__points li {
  padding: 1.5rem 1.625rem;
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--white);
  box-shadow: var(--shadow-xs);
}

.why__point-title {
  font-size: 1.0625rem;
}

.why__point-desc {
  margin-top: 0.4375rem;
  font-size: 0.875rem;
  line-height: 1.7;
}

.why__row,
.capabilities__grid,
.values__grid {
  display: grid;
  gap: 1.125rem;
}

.why__row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1.25rem;
}

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

.why-card,
.cap-card,
.value-card {
  display: flex;
  flex-direction: column;
  min-height: 14.25rem;
  padding: 1.6875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-xs);
  transition: transform 0.3s var(--ease), box-shadow 0.3s ease, border-color 0.3s ease;
}

.why-card:hover,
.cap-card:hover,
.value-card:hover {
  transform: translateY(-0.375rem);
  border-color: rgba(196, 227, 29, 0.44);
  box-shadow: var(--shadow-sm);
}

.why-card__icon,
.cap-card__icon,
.value-card__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  flex: none;
  border-radius: 0.875rem;
  background: var(--brand-soft);
  color: var(--brand);
}

.why-card__icon img {
  width: 1.8125rem;
  height: 1.8125rem;
  object-fit: contain;
}

.cap-card__icon .ico {
  width: 1.5625rem;
  height: 1.5625rem;
}

.value-card__icon {
  background: var(--footer);
}

.value-card__icon img {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
}

.why-card__title,
.cap-card__title,
.value-card__title {
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.35;
}

.why-card__desc,
.cap-card__desc,
.value-card__desc {
  margin-top: 0.625rem;
  color: var(--body);
  font-size: 0.8125rem;
  line-height: 1.7;
}

.capabilities {
  background: var(--white);
}

.capabilities .eyebrow {
  margin-bottom: 1.25rem;
}

.capabilities__lead {
  max-width: 47.5rem;
  margin: 1.25rem 0 2.75rem;
  text-align: left;
}

.values {
  background: var(--surface);
}

.values .h2 {
  margin-top: 1.25rem;
  margin-bottom: 2.75rem;
}

/* Global reach panel ----------------------------------------------------- */
.supply {
  padding-top: 0;
  background: var(--white);
}

.supply__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(min(100%, 32.5rem), 0.92fr);
  gap: 2.75rem;
  align-items: center;
  min-height: 22.125rem;
  padding: clamp(2rem, 4vw, 3rem);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #171f19, #303a32);
  box-shadow: var(--shadow-lg);
}

.supply__panel::after {
  content: "";
  position: absolute;
  right: -5rem;
  bottom: -7.5rem;
  width: 24.375rem;
  height: 24.375rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 227, 29, 0.19), transparent 68%);
}

.supply__copy,
.supply__stats {
  position: relative;
  z-index: 1;
}

.supply__eyebrow {
  color: var(--brand);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.supply__title {
  margin-top: 1.0625rem;
  color: var(--white);
  font-size: clamp(2.125rem, 4vw, 3.375rem);
  line-height: 1.04;
  letter-spacing: -0.05em;
}

.supply__para {
  max-width: 35rem;
  margin-top: 1.125rem;
  color: rgba(255, 255, 255, 0.67);
  font-size: 0.9375rem;
  line-height: 1.75;
}

.supply__rule {
  width: 100%;
  height: 1px;
  margin-top: 1.6875rem;
  background: rgba(255, 255, 255, 0.12);
}

.supply__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem;
  align-items: stretch;
}

.supply-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 11.5rem;
  padding: 1.375rem 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.065);
  text-align: center;
}

.supply-stat__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--brand);
  color: var(--ink);
}

.supply-stat__icon .ico {
  width: 1.3125rem;
  height: 1.3125rem;
}

.supply-stat__big {
  margin-top: 1rem;
  color: var(--white);
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.supply-stat__small {
  margin-top: 0.25rem;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.6875rem;
  line-height: 1.45;
}

/* Blog and contact page intros ------------------------------------------ */
.contact-intro {
  position: relative;
  padding: clamp(3.25rem, 5vw, 4.75rem) 0 clamp(3rem, 5vw, 4.375rem);
  overflow: hidden;
  background: linear-gradient(180deg, #fbfdf5, #fff);
}

.contact-intro::before {
  content: "";
  position: absolute;
  top: -11.25rem;
  left: 50%;
  width: min(38.75rem, 100vw);
  height: 26.875rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 227, 29, 0.2), transparent 66%);
}

.contact-intro > .shell {
  position: relative;
}

.contact-intro .h2 {
  max-width: 50rem;
  font-size: clamp(2.625rem, 5vw, 4.375rem);
  text-align: left;
}

.contact-intro__lead {
  max-width: 48.75rem;
  margin-top: 1.1875rem;
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 400;
  text-align: left;
}

.contact-intro__body {
  max-width: 48.75rem;
  margin: 1.125rem 0 0;
  text-align: left;
}

.contact-intro .blog-intro__sub {
  max-width: 48.75rem;
  margin: 1.125rem 0 0;
  text-align: left;
}

.contact-intro__body p {
  font-size: 0.9375rem;
  line-height: 1.75;
}

.contact-intro__body p + p {
  margin-top: 0.75rem;
}

/* Blog listing ----------------------------------------------------------- */
.blog {
  background: linear-gradient(180deg, #fff, #f8faf7);
}

.blog__toolbar {
  display: grid;
  grid-template-columns: minmax(17.5rem, 0.72fr) minmax(0, 1.28fr);
  gap: 1.25rem;
  align-items: center;
  margin-bottom: 1.875rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.blog__search {
  margin: 0;
}

.blog__cats {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.625rem;
  padding-inline: 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--body);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.chip:hover {
  border-color: var(--border-strong);
  background: var(--white);
}

.chip.is-active {
  background: var(--dark);
  color: var(--white);
}

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(min(100%, 21.875rem), 0.85fr);
  gap: 2.375rem;
  align-items: center;
  margin-bottom: 2.125rem;
  padding: 0.875rem;
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.feature__media {
  display: block;
  overflow: hidden;
  border-radius: 1.0625rem;
}

.feature__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s var(--ease);
}

.feature:hover .feature__media img {
  transform: scale(1.035);
}

.feature__body {
  min-width: 0;
  padding: 1.375rem 1.875rem 1.375rem 0;
}

.feature__flag {
  display: inline-flex;
  padding: 0.25rem 0.5625rem;
  border-radius: 999px;
  background: var(--dark);
  color: var(--white);
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
}

.feature__title {
  font-size: clamp(1.875rem, 3.1vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.045em;
}

.feature__excerpt {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.75;
}

.feature .link-arrow {
  margin-top: 1.75rem;
}

.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 20rem);
  gap: 1.875rem;
  align-items: start;
}

.blog-main {
  min-width: 0;
}

.blog__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.blog__empty {
  padding: 2.5rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: center;
}

.blog-sidebar {
  position: sticky;
  top: 6.875rem;
  display: grid;
  gap: 1.125rem;
}

.blog-sidecard {
  min-width: 0;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-xs);
}

.blog-sidecard__title {
  padding-bottom: 0.9375rem;
  border-bottom: 1px solid var(--border);
  font-size: 1.125rem;
}

.blog-sidecard__categories {
  display: grid;
  margin-top: 0.5rem;
}

.blog-sidecard__categories a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.8125rem;
  border-bottom: 1px solid var(--border);
  color: var(--body);
  font-size: 0.8125rem;
  font-weight: 500;
}

.blog-sidecard__categories li:last-child a {
  border-bottom: 0;
}

.blog-sidecard__categories a::after {
  content: "→";
  color: var(--brand);
}

.blog-sidecard__categories a:hover {
  color: var(--brand);
}

.recent-posts {
  display: grid;
  gap: 0.9375rem;
  margin-top: 1.125rem;
}

.recent-posts a {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
}

.recent-posts img {
  width: 4.75rem;
  height: 4rem;
  border-radius: 0.625rem;
  object-fit: cover;
}

.recent-posts__body {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.recent-posts strong {
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.45;
}

.recent-posts__body > span {
  color: var(--muted);
  font-size: 0.625rem;
}







/* Form controls ---------------------------------------------------------- */
.field {
  margin: 0;
}

.field__label {
  display: block;
  margin-bottom: 0.5625rem;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
}

.field__control {
  position: relative;
  display: block;
  min-width: 0;
}

.field__icon {
  position: absolute;
  top: 50%;
  left: 0.9375rem;
  display: grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.field__icon .ico {
  width: 100%;
  height: 100%;
}

.field__input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0 0.9375rem 0 2.8125rem;
  border: 1px solid var(--border);
  border-radius: 0.8125rem;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 400;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.field__control--plain .field__input,
.field__input--area {
  padding-left: 0.9375rem;
}

.field__input::placeholder {
  color: #849087;
}

.field__input:focus {
  outline: 0;
  border-color: var(--brand);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(196, 227, 29, 0.22);
}

.field__input--area {
  min-height: 9.0625rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  line-height: 1.55;
  resize: vertical;
}

/* Contact page ----------------------------------------------------------- */
.contact {
  padding-top: 2.125rem;
  background: var(--white);
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(20rem, 0.72fr) minmax(0, 1.28fr);
  gap: 1.625rem;
  align-items: stretch;
}

.contact-info--card,
.qform {
  min-width: 0;
  padding: 2.5rem;
  border: 1px solid var(--border);
  border-radius: 1.375rem;
  box-shadow: var(--shadow-sm);
}

.contact-info--card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #172119, #263329);
  color: var(--white);
}

.contact-info--card::after {
  content: "";
  position: absolute;
  right: -6.875rem;
  bottom: -8.125rem;
  width: 20.625rem;
  height: 20.625rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 227, 29, 0.16), transparent 68%);
}

.contact-info__title {
  position: relative;
  z-index: 1;
  color: var(--white);
  font-size: 1.75rem;
  letter-spacing: -0.035em;
}

.contact-info__list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.8125rem;
  margin-top: 2.375rem;
}

.contact-info__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  min-width: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.contact-info__icon {
  display: grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  flex: none;
  border-radius: 0.75rem;
  background: rgba(196, 227, 29, 0.12);
  color: var(--brand);
}

.contact-info__icon .ico {
  width: 1.125rem;
  height: 1.125rem;
}

.contact-info__body {
  min-width: 0;
}

.contact-info__label {
  display: block;
  margin-bottom: 0.4375rem;
  color: var(--brand);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.contact-info__list a,
.contact-info__addr {
  overflow-wrap: anywhere;
}

.contact-info__list a:hover {
  color: var(--brand);
}

.qform {
  background: var(--white);
}

.qform__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.125rem;
}

.qform > .field,
.qform > .qform__row + .qform__row,
.qform > .qform__row + .field,
.qform > .field + .field {
  margin-top: 1.1875rem;
}

.qform > .qform__row:first-of-type {
  margin-top: 0;
}

.qform__submit {
  width: min(100%, 27.5rem);
  margin-top: 1.5rem;
}

.qform__status {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

.qform__status[data-state="ok"] { color: var(--brand); }
.qform__status[data-state="error"] { color: var(--danger); }

.office {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f4f7f3, #eef2ed);
}

.office::before {
  content: "";
  position: absolute;
  top: -9.375rem;
  right: -6.875rem;
  width: 24.375rem;
  height: 24.375rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 227, 29, 0.18), transparent 68%);
}

.office > .shell {
  position: relative;
}

.office .h2,
.mapsec .h2 {
  margin-bottom: 2.125rem;
}

.office__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(18.75rem, 0.62fr);
  align-items: center;
}

.office__media {
  overflow: hidden;
  border-radius: 1.5rem;
  box-shadow: var(--shadow-md);
}

.office__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

.office__address {
  position: relative;
  z-index: 2;
  margin-left: -2.375rem;
  padding: 2.375rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--body);
  font-size: 0.9375rem;
  line-height: 1.8;
  box-shadow: var(--shadow-md);
}

.office__address::before {
  content: "";
  display: block;
  width: 2.375rem;
  height: 4px;
  margin-bottom: 1.375rem;
  border-radius: 999px;
  background: var(--brand);
}

.office__address-name {
  display: block;
  margin-bottom: 0.625rem;
  color: var(--ink);
  font-size: 1.3125rem;
  font-weight: 700;
}

.mapsec {
  background: var(--white);
}

.mapsec__frame {
  position: relative;
  height: clamp(22.5rem, 36vw, 30rem);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 1.375rem;
  background: linear-gradient(135deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow-md);
}

.mapsec__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Footer ----------------------------------------------------------------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--footer);
  color: rgba(255, 255, 255, 0.72);
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(196, 227, 29, 0.25) 18%,
      var(--brand) 50%, rgba(196, 227, 29, 0.25) 82%, transparent 100%);
}

.site-footer::after {
  content: "";
  position: absolute;
  right: -11.25rem;
  bottom: -15.625rem;
  width: 35rem;
  height: 35rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 227, 29, 0.085), transparent 68%);
  pointer-events: none;
}

.site-footer__top {
  position: relative;
  z-index: 1;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(17.5rem, 1.15fr) minmax(8.125rem, 0.48fr) minmax(9.0625rem, 0.52fr)
    minmax(18.75rem, 1.05fr);
  gap: clamp(2.25rem, 5vw, 4.875rem);
  align-items: start;
  padding-top: clamp(4.25rem, 6.5vw, 5.75rem);
  padding-bottom: clamp(3.625rem, 5vw, 4.75rem);
}

.site-footer__brand {
  position: relative;
  min-width: 0;
  padding-right: clamp(0.75rem, 2vw, 1.875rem);
}

.site-footer__brand::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  min-height: 14.375rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03));
}

.site-footer__logo-link {
  display: inline-flex;
  align-items: center;
  min-height: 3.625rem;
  transition: opacity 0.2s ease, transform 0.25s var(--ease);
}

.site-footer__logo-link:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.site-footer__logo {
  width: 12.75rem;
  height: auto;
  object-fit: contain;
}

.site-footer__tagline {
  max-width: 23.125rem;
  margin-top: 1.5625rem;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.875rem;
  line-height: 1.8;
}

.site-footer__heading {
  position: relative;
  margin: 0.25rem 0 1.5rem;
  padding-bottom: 0.9375rem;
  color: var(--white);
  font-size: 0.8125rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer__heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2.125rem;
  height: 2px;
  border-radius: 999px;
  background: var(--brand);
}

.site-footer__col ul {
  display: grid;
}

.site-footer__col li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}

.site-footer__col li:last-child {
  border-bottom: 0;
}

.site-footer__col a,
.site-footer__col span {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.8125rem;
  padding-block: 0.375rem;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.8125rem;
  line-height: 1.45;
  transition: color 0.2s ease, padding-left 0.22s var(--ease);
}

.site-footer__col a::before {
  content: "";
  width: 0;
  height: 1px;
  margin-right: 0;
  background: var(--brand);
  transition: width 0.22s var(--ease), margin-right 0.22s var(--ease);
}

.site-footer__col a:hover {
  padding-left: 2px;
  color: var(--white);
}

.site-footer__col a:hover::before {
  width: 0.875rem;
  margin-right: 0.5rem;
}

.footer-link--disabled {
  opacity: 0.56;
}

.site-footer__contact-list {
  display: grid;
  gap: 1.125rem;
}

.site-footer__contact-list > li {
  display: grid;
  grid-template-columns: 2.625rem minmax(0, 1fr);
  gap: 0.8125rem;
  align-items: start;
}

.site-footer__contact-icon {
  display: grid;
  place-items: center;
  width: 2.625rem;
  height: 2.625rem;
  border: 1px solid rgba(196, 227, 29, 0.25);
  border-radius: 0.75rem;
  background: rgba(196, 227, 29, 0.08);
  color: var(--brand);
}

.site-footer__contact-icon .ico {
  width: 1.125rem;
  height: 1.125rem;
}

.site-footer__contact-label {
  display: block;
  margin-bottom: 0.3125rem;
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer__contact-list a,
.site-footer__contact-list address {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78125rem;
  line-height: 1.68;
  overflow-wrap: anywhere;
}

.site-footer__contact-list a:hover {
  color: var(--brand);
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5625rem;
  margin-top: 1.75rem;
}

.socials a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.6875rem;
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.96);
  transition: transform 0.22s var(--ease), border-color 0.2s ease, background-color 0.2s ease,
    color 0.2s ease;
}

.socials a:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  background: var(--brand);
  color: #20271f;
}

.socials .ico {
  width: 1.08rem;
  height: 1.08rem;
}

.site-footer__bar {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(14, 19, 15, 0.14);
}

.site-footer__bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4rem;
  text-align: center;
}

.site-footer__bar p {
  padding-block: 1.125rem;
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Motion ----------------------------------------------------------------- */
.reveal-item {
  opacity: 0;
  transform: translateY(1.125rem);
  transition: opacity 0.7s ease, transform 0.8s var(--ease);
}

.reveal-item.is-visible {
  opacity: 1;
  transform: none;
}

/* Tablet navigation and large-tablet layouts ---------------------------- */
@media (max-width: 74.9375rem) {
  :root {
    --container: 67.5rem;
    --page-pad: clamp(1.5rem, 4vw, 3rem);
  }

  .site-header,
  .site-header--solid {
    padding-top: clamp(0.75rem, 2vw, 1rem);
  }

  .site-header__inner,
  .site-header--solid .site-header__inner {
    position: relative;
    min-height: 5.25rem;
    padding: 0;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .site-header.is-scrolled {
    padding-top: 0.5rem;
  }

  .site-header.is-scrolled .site-header__inner {
    min-height: 4.5rem;
    padding-inline: 0.625rem;
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 40px rgba(14, 28, 17, 0.14);
    backdrop-filter: blur(20px) saturate(145%);
  }

  .brand {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 202;
    order: 2;
    transform: translate(-50%, -50%);
  }

  .brand img {
    width: clamp(5.75rem, 13vw, 7rem);
  }

  .burger {
    z-index: 202;
    display: block;
    order: 1;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
  }

  .burger:hover {
    background: rgba(255, 255, 255, 0.28);
  }

  .burger:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    background: transparent;
  }

  .burger span {
    left: 0.75rem;
    width: 1.25rem;
    height: 1.5px;
  }

  .burger span:nth-child(1) { top: 0.9375rem; }
  .burger span:nth-child(2) { top: 1.34375rem; }
  .burger span:nth-child(3) { top: 1.75rem; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(0.40625rem) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-0.40625rem) rotate(-45deg); }

  .site-header__actions {
    z-index: 202;
    order: 3;
    margin-left: auto;
  }

  .site-header__actions > .btn {
    min-height: 2.75rem;
    padding-inline: clamp(0.875rem, 2vw, 1.125rem);
    border-radius: 0.625rem;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 190;
    display: grid;
    align-items: start;
    justify-items: center;
    margin: 0;
    padding: clamp(6.75rem, 12vh, 7.5rem) var(--page-pad) max(1rem, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(12, 18, 14, 0.38);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    backdrop-filter: blur(5px);
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav__panel {
    display: block;
    width: min(100%, 26rem);
    max-height: calc(100dvh - 8.25rem);
    padding: 0.75rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 1.125rem;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 24px 70px rgba(8, 17, 10, 0.28);
    opacity: 0;
    transform: translateY(-1rem) scale(0.985);
    transform-origin: top center;
    transition: opacity 0.22s ease, transform 0.32s var(--ease);
    backdrop-filter: blur(24px) saturate(140%);
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
    -webkit-overflow-scrolling: touch;
  }

  .nav.is-open .nav__panel {
    opacity: 1;
    transform: none;
  }

  .nav__list {
    display: grid;
    width: 100%;
    gap: 0.125rem;
  }

  .inner-hero .svc-hero__inner,
  .inner-hero .about-hero__inner {
    padding-top: 7.5rem;
    padding-bottom: 2.75rem;
  }

  .nav__list > li {
    min-width: 0;
  }

  .nav__link {
    position: relative;
    justify-content: space-between;
    width: 100%;
    min-height: 3rem;
    padding: 0.375rem 1rem;
    border: 0;
    border-radius: 0.75rem;
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.015em;
    text-transform: uppercase;
  }

  .nav__link:hover,
  .nav__link.is-active {
    background: rgba(196, 227, 29, 0.13);
    color: var(--ink);
  }

  .nav__link.is-active::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0;
    width: 3px;
    border-radius: 999px;
    background: var(--brand);
  }

  .nav__label::after {
    display: none;
  }

  .nav__link .ico {
    width: 0.625rem;
    height: 0.625rem;
  }

  .mega {
    position: static;
    display: grid;
    width: 100%;
    max-height: 0;
    padding: 0 0.75rem;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: max-height 0.35s var(--ease);
  }

  .mega__link {
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.625rem;
    color: var(--body);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
  }

  .mega__link:hover,
  .mega__link.is-current {
    transform: none;
    background: rgba(196, 227, 29, 0.19);
    color: var(--ink);
  }

  .nav__panel > .lang-select {
    width: 100%;
    margin-top: 0.625rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
  }

  .nav__panel > .lang-select .lang-select__toggle {
    width: min(100%, 10rem);
    min-height: 2.875rem;
    justify-content: flex-start;
    border-color: var(--border-strong);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.72);
    color: var(--ink);
    font-size: 0.8125rem;
  }

  .nav__panel > .lang-select .lang-select__toggle > .ico {
    margin-left: auto;
  }

  .nav__panel > .lang-select .lang-select__menu {
    position: static;
    width: 100%;
    max-height: 0;
    margin-top: 0.5rem;
    padding-block: 0;
    overflow: hidden;
    border: 0;
    background: rgba(246, 248, 245, 0.96);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: max-height 0.3s var(--ease), padding 0.3s ease;
  }

  .nav__panel > .lang-select.is-open .lang-select__menu {
    max-height: 31rem;
    padding: 0.5625rem;
  }

  .nav__panel > .lang-select .lang-select__item {
    color: var(--body);
  }

  .services__intro {
    grid-column: 1 / -1;
    padding-right: 0;
  }

  .svc-card {
    grid-column: span 6;
  }

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

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

  .supply__panel {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .supply__stats {
    max-width: none;
  }

  .site-footer__grid {
    grid-template-columns: minmax(17.5rem, 1fr) minmax(9rem, 0.5fr) minmax(9rem, 0.5fr);
    gap: 3rem 2.125rem;
  }

  .site-footer__brand {
    grid-row: span 2;
  }

  .site-footer__contact {
    grid-column: 2 / 4;
  }

  .site-footer__contact-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.875rem;
  }
}

/* Tablet layouts --------------------------------------------------------- */
@media (max-width: 61.9375rem) {
  .sectors__grid,
  .capabilities__grid,
  .values__grid,
  .insights__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .legacy__grid,
  .story__grid,
  .svc-overview__grid,
  .contact__grid,
  .office__grid {
    grid-template-columns: 1fr;
  }

  .legacy__copy,
  .story__copy,
  .svc-overview__copy {
    max-width: none;
  }

  .legacy__media {
    width: min(100%, 42rem);
    margin-inline: auto;
  }

  .story__media {
    width: min(100%, 40rem);
    margin-inline: auto;
  }

  .svc-overview__media {
    width: min(100%, 39rem);
    margin-inline: auto;
  }

  .svc-overview__media img {
    aspect-ratio: 4 / 3.4;
  }

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

  .process__row::before {
    display: none;
  }

  .blog-layout {
    grid-template-columns: 1fr;
  }

  .blog-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0.5rem;
  }

  .office__grid {
    gap: 1.5rem;
  }

  .office__address {
    margin-left: 0;
  }

  .site-footer__contact-list {
    grid-template-columns: 1fr;
  }
}

/* Mobile and small tablet ------------------------------------------------ */
@media (max-width: 47.9375rem) {
  :root {
    --page-pad: clamp(1rem, 5vw, 1.5rem);
    --section-space: 4.5rem;
    --radius-xl: 1.75rem;
  }

  body {
    font-size: 0.9375rem;
  }

  .d-only {
    display: none;
  }

  .m-only {
    display: block;
  }

  .h2 {
    font-size: clamp(2rem, 10vw, 2.75rem);
    line-height: 1.08;
  }

  .eyebrow {
    font-size: 0.625rem;
    letter-spacing: 0.14em;
  }

  .section-sub,
  .advantage__lead,
  .why__lead,
  .capabilities__lead,
  .blog-intro__sub {
    font-size: 0.9375rem;
  }

  .site-header,
  .site-header--solid {
    padding-top: 1.75rem;
  }

  .site-header__inner,
  .site-header--solid .site-header__inner {
    min-height: 5.25rem;
  }

  .brand img {
    width: 5.5rem;
  }

  .site-header__actions > .btn {
    min-height: 2.625rem;
    padding-inline: 0.875rem;
    font-size: 0.6875rem;
  }

  .burger {
    width: 2.75rem;
    height: 2.75rem;
  }

  .nav {
    padding-top: 7.25rem;
  }

  .nav__panel {
    max-height: calc(100dvh - 7.75rem);
    border-radius: 1rem;
  }

  .nav__link {
    min-height: 2.875rem;
    font-size: 0.875rem;
  }

  .hero {
    height: 46.25rem;
    min-height: 46.25rem;
  }

  .services__grid {
    grid-template-columns: 1fr;
    gap: 1.125rem;
  }

  .services__intro,
  .svc-card {
    grid-column: auto;
  }

  .services__intro {
    gap: 1.125rem;
    padding: 0 0 0.75rem;
  }

  .svc-card__media img {
    aspect-ratio: 16 / 10;
  }

  .svc-card__body {
    min-height: 0;
    padding: 1.375rem;
  }

  .svc-card__title {
    font-size: 1.1875rem;
  }

  .advantage__row,
  .why__points,
  .why__row,
  .capabilities__grid,
  .values__grid,
  .supply__stats,
  .blog__grid,
  .qform__row {
    grid-template-columns: 1fr;
  }

  .advantage__row {
    gap: 0.75rem;
    margin-top: 2.125rem;
  }

  .adv-card,
  .why-card,
  .cap-card,
  .value-card {
    min-height: 0;
    padding: 1.5rem;
  }

  .legacy__grid,
  .story__grid,
  .svc-overview__grid,
  .contact__grid,
  .office__grid {
    gap: 2.5rem;
  }

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

  .legacy__media::before {
    top: -0.875rem;
    left: -0.875rem;
    width: 5.625rem;
    height: 5.625rem;
  }

  .legacy__media img {
    aspect-ratio: 4 / 3;
  }

  .recognition__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
  }

  .recognition__row li {
    min-height: 7.375rem;
    padding: 0.9375rem;
  }

  .recognition__row img {
    height: 3.875rem;
  }

  .sectors__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
  }

  .sector {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 8.875rem;
    padding: 1rem 0.625rem;
    gap: 0.75rem;
    text-align: center;
  }

  .sector__icon {
    width: 3.75rem;
    height: 3.75rem;
  }

  .sector__icon img,
  .sector > img {
    width: 3.0625rem;
    height: 3.0625rem;
  }

  .sector span {
    font-size: 0.75rem;
  }

  .customers .h2 {
    margin-bottom: 1.875rem;
  }

  .customers__marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  }

  .customers__track {
    animation-duration: 26s;
  }

  .customer-logo {
    flex-basis: 9.875rem;
    min-height: 5.875rem;
    padding: 1.0625rem;
  }

  .customer-logo img {
    height: 2.875rem;
    max-height: 2.875rem;
  }

  .insights__head {
    align-items: flex-end;
    margin-bottom: 1.75rem;
  }

  .insights__grid {
    grid-template-columns: 1fr;
    gap: 1.0625rem;
  }

  .post {
    padding: 0.625rem 0.625rem 1.375rem;
  }

  .post__title {
    font-size: 1.1875rem;
  }

  .cta {
    padding-block: 4.5rem;
  }

  .cta__panel,
  .cta__copy {
    min-height: 33.75rem;
  }

  .cta__copy {
    justify-content: flex-start;
    padding: 2.375rem 1.5625rem 14.875rem;
  }

  .cta__title {
    font-size: clamp(2.25rem, 11vw, 3rem);
  }

  .cta__desc {
    font-size: 0.875rem;
  }

  .cta__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta__actions .btn {
    width: 100%;
  }

  .cta__ship {
    right: -17%;
    bottom: -0.5rem;
    width: 134%;
    height: 16.25rem;
  }

  .inner-hero {
    min-height: 27.5rem;
  }

  .inner-hero .svc-hero__scrim,
  .inner-hero .about-hero__scrim {
    background: linear-gradient(90deg, rgba(7, 13, 8, 0.9) 0%, rgba(7, 13, 8, 0.72) 58%,
        rgba(7, 13, 8, 0.27) 100%),
      linear-gradient(180deg, rgba(7, 13, 8, 0.12) 0%, rgba(7, 13, 8, 0.2) 52%, rgba(7, 13, 8, 0.72) 100%);
  }

  .inner-hero .svc-hero__inner,
  .inner-hero .about-hero__inner {
    min-height: inherit;
    padding-top: 7rem;
    padding-bottom: 2.5rem;
  }

  .inner-hero .svc-hero__title,
  .inner-hero .about-hero__title {
    max-width: 35rem;
    font-size: clamp(2.25rem, 10.8vw, 3.0625rem);
    line-height: 1.04;
    letter-spacing: -0.045em;
  }

  .inner-hero .svc-hero__sub,
  .inner-hero .about-hero__sub {
    max-width: 32.5rem;
    margin-top: 0.875rem;
    font-size: 0.875rem;
    line-height: 1.58;
  }

  .page-about .inner-hero.about-hero {
    min-height: 31.875rem;
  }

  .page-about .inner-hero .about-hero__img {
    object-position: 61% center;
  }

  .page-about .inner-hero .about-hero__inner {
    padding-top: 7rem;
    padding-bottom: 2.5rem;
  }

  .about-hero__actions {
    width: min(100%, 24.375rem);
    margin-top: 1.25rem;
  }

  .about-hero__actions .btn {
    flex: 1 1 8.5rem;
  }

  .svc-overview__media img {
    aspect-ratio: 4 / 3;
  }

  .svc-checks {
    grid-template-columns: 1fr;
    gap: 0.5625rem;
  }

  .process .h2 {
    margin-bottom: 2.125rem;
  }

  .process__row {
    grid-template-columns: 1fr;
    gap: 0.8125rem;
  }

  .step {
    min-height: 0;
    padding: 1.4375rem;
  }

  .step::before {
    width: 2.875rem;
    height: 2.875rem;
    margin-bottom: 1.25rem;
    border-width: 5px;
  }

  .story__media {
    min-height: 26.875rem;
  }

  .story__img--a {
    width: 86%;
    height: 76%;
  }

  .story__frame {
    width: 68%;
    border-width: 7px;
  }

  .story__sub {
    font-size: 1.25rem;
  }

  .capabilities__lead {
    margin-bottom: 2rem;
  }

  .supply__panel {
    gap: 1.625rem;
    min-height: 0;
    padding: 1.75rem;
    border-radius: 1.375rem;
  }

  .supply__title {
    font-size: 2.25rem;
  }

  .supply__para {
    font-size: 0.875rem;
  }

  .supply-stat {
    min-height: 8rem;
  }

  .contact-intro {
    padding-top: clamp(2.75rem, 10vw, 3.75rem);
  }

  .contact-intro .h2 {
    font-size: 2.75rem;
  }

  .contact-intro__lead {
    font-size: 1rem;
  }

  .contact-intro__body p {
    font-size: 0.875rem;
  }

  .blog__toolbar {
    grid-template-columns: 1fr;
    padding: 0.75rem;
  }

  .blog__cats {
    justify-content: flex-start;
  }

  .feature {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0.6875rem;
    border-radius: 1.1875rem;
  }

  .feature__body {
    padding: 0.5rem 0.5rem 1.125rem;
  }

  .feature__title {
    font-size: 1.875rem;
  }

  .feature__excerpt {
    font-size: 0.9375rem;
  }

  .blog-sidebar {
    grid-template-columns: 1fr;
  }

  .blog-sidecard {
    padding: 1.25rem;
  }

  .contact {
    padding-top: 2.125rem;
  }

  .contact-info--card,
  .qform {
    padding: 1.6875rem;
    border-radius: 1.1875rem;
  }

  .contact-info__title {
    font-size: 1.5rem;
  }

  .qform__row {
    gap: 1.0625rem;
  }

  .office__media {
    border-radius: 1.1875rem;
  }

  .office__address {
    padding: 1.625rem;
    border-radius: 1rem;
  }

  .mapsec__frame {
    height: 22.5rem;
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.625rem 1.5rem;
    padding-top: 3.875rem;
    padding-bottom: 3.25rem;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
    grid-row: auto;
    padding-right: 0;
    padding-bottom: 2.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .site-footer__brand::after {
    display: none;
  }

  .site-footer__contact {
    grid-column: 1 / -1;
    padding-top: 0.25rem;
  }

  .site-footer__contact-list {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .site-footer__tagline {
    max-width: 28.75rem;
  }
}

/* Narrow mobile ---------------------------------------------------------- */
@media (max-width: 26.25rem) {
  .sectors__grid {
    grid-template-columns: 1fr;
  }

  .sector {
    grid-template-columns: 3.625rem minmax(0, 1fr);
    justify-items: initial;
    min-height: 6.5rem;
    padding: 0.875rem;
    gap: 0.875rem;
    text-align: left;
  }

  .sector__icon {
    width: 3.625rem;
    height: 3.625rem;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 2.125rem;
  }

  .site-footer__brand,
  .site-footer__contact {
    grid-column: auto;
  }
}


/* Compact header controls for the narrowest phones ---------------------- */
@media (max-width: 22.5rem) {
  .brand img {
    width: 5rem;
  }

  .site-header__actions > .btn {
    min-height: 2.5rem;
    padding-inline: 0.75rem;
    gap: 0.5rem;
    font-size: 0.625rem;
  }

  .site-header__actions > .btn .ico {
    width: 0.75rem;
    height: 0.75rem;
  }
}

/* 320px safety ----------------------------------------------------------- */
@media (max-width: 21.25rem) {
  .brand img {
    width: 4.625rem;
  }

  .site-header__actions > .btn {
    padding-inline: 0.625rem;
    gap: 0.375rem;
    font-size: 0.59375rem;
  }

  .nav__panel {
    padding: 0.625rem;
  }

  .nav__link {
    padding-inline: 0.8125rem;
    font-size: 0.8125rem;
  }

  .page-about .inner-hero.about-hero {
    min-height: 33.75rem;
  }

  .about-hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
}

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .customers__track {
    animation: none;
    transform: none;
  }

  .customers__marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .reveal-item {
    opacity: 1;
    transform: none;
  }
}

/* Mobile navigation viewport containment fix -----------------------------
   Sticky-header transforms and filters can make fixed descendants behave as
   header-relative elements. Keep the mobile overlay viewport-fixed and allow
   scrolling only inside the menu panel. */
@media (max-width: 74.9375rem) {
  :root {
    --mobile-header-top: clamp(0.625rem, 1.6vw, 1rem);
    --mobile-header-row: 5.25rem;
    --mobile-menu-gap: 0.625rem;
  }

  .site-header,
  .site-header.is-scrolled,
  .site-header--solid,
  .site-header--solid.is-scrolled {
    animation: none;
    transform: none;
  }

  body.nav-open .site-header,
  body.nav-open .site-header--solid {
    position: fixed;
    inset: 0 0 auto;
    padding-top: var(--mobile-header-top);
  }

  .site-header__inner,
  .site-header--solid .site-header__inner {
    min-height: var(--mobile-header-row);
    padding-inline: clamp(0.625rem, 2vw, 0.875rem);
  }

  body.nav-open .site-header .site-header__inner {
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 14px 40px rgba(14, 28, 17, 0.14);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nav {
    width: 100vw;
    height: 100dvh;
    min-height: 100svh;
    padding:
      calc(var(--mobile-header-top) + var(--mobile-header-row) + var(--mobile-menu-gap))
      var(--page-pad)
      max(1rem, env(safe-area-inset-bottom));
    overflow: hidden;
  }

  .nav__panel {
    width: min(100%, 26rem);
    max-height: calc(
      100dvh - var(--mobile-header-top) - var(--mobile-header-row) -
      var(--mobile-menu-gap) - max(1rem, env(safe-area-inset-bottom))
    );
    overscroll-behavior: contain;
  }
}

@media (max-width: 47.9375rem) {
  :root {
    --mobile-header-top: clamp(0.5rem, 2.5vw, 0.75rem);
    --mobile-header-row: 5rem;
  }

  .site-header,
  .site-header--solid {
    padding-top: var(--mobile-header-top);
  }

  .site-header__inner,
  .site-header--solid .site-header__inner {
    min-height: var(--mobile-header-row);
  }
}

@media (max-height: 31.25rem) and (max-width: 74.9375rem) {
  :root {
    --mobile-header-top: 0.375rem;
    --mobile-header-row: 4.25rem;
    --mobile-menu-gap: 0.375rem;
  }

  .site-header__inner,
  .site-header--solid .site-header__inner {
    border-radius: 0.875rem;
  }

  .nav__panel {
    padding: 0.625rem;
  }

  .nav__link {
    min-height: 2.75rem;
  }
}


/* ========================================================================
   RESOURCES NAVIGATION + EDUCATIONAL PAGE COMPONENTS
   ======================================================================== */
@media (min-width: 75rem) {
  .nav__list { gap: clamp(.7rem, .92vw, 1.05rem); }
  .nav__link { font-size: clamp(.75rem, .7vw, .85rem); white-space: nowrap; }
  .mega--resources { width: min(18.5rem, calc(100vw - (var(--page-pad) * 2))); }
  .nav__item:nth-last-child(-n+2) .mega { right: -1rem; left: auto; }
}

.resource-hero {
  min-height: clamp(20.5rem, 23vw, 23.75rem);
}
.resource-hero .svc-hero__img {
  object-fit: cover;
  object-position: center;
}
.resource-hero .svc-hero__scrim {
  background:
    linear-gradient(90deg, rgba(8, 14, 9, .93) 0%, rgba(8, 14, 9, .76) 36%, rgba(8, 14, 9, .38) 62%, rgba(8, 14, 9, .08) 100%),
    linear-gradient(180deg, rgba(8, 14, 9, .08), rgba(8, 14, 9, .25));
}
.resource-hero .svc-hero__inner {
  max-width: none;
  padding-top: clamp(8rem, 8vw, 8.5rem);
  padding-bottom: clamp(3.25rem, 4vw, 4.25rem);
}
.resource-hero .svc-hero__title {
  max-width: 16ch;
  text-wrap: balance;
}
.resource-hero .svc-hero__sub {
  max-width: 44rem;
  text-wrap: pretty;
}

@media (max-width: 74.9375rem) {
  .resource-hero .svc-hero__inner {
    padding-top: 7.5rem;
    padding-bottom: 2.75rem;
  }
}

.resource-intro,
.resource-section { padding-block: var(--section-space); }
.resource-section--soft { background: var(--surface); }
.resource-intro__grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(20rem,.9fr); gap:clamp(2rem,6vw,6rem); align-items:center; }
.resource-heading { max-width: 51rem; }
.resource-heading .h2 { margin-top: .9rem; }
.resource-heading > p:last-child { margin-top: 1.15rem; color:var(--body); font-size:clamp(.95rem,1.2vw,1.08rem); line-height:1.75; }
.resource-intro__card { padding:clamp(1.6rem,3vw,2.5rem); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--white); box-shadow:var(--shadow-sm); }
.resource-intro__card h3 { margin-top:1.1rem; font-size:1.25rem; }
.resource-intro__card p { margin-top:.85rem; }
.resource-icon { display:grid; place-items:center; width:3.25rem; height:3.25rem; border:1px solid rgba(196,227,29,.45); border-radius:.9rem; background:var(--brand-soft); color:var(--ink); flex:none; }
.resource-icon--large { width:4.25rem; height:4.25rem; border-radius:1.15rem; }
.resource-icon__svg { width:1.55rem; height:1.55rem; }
.resource-icon--large .resource-icon__svg { width:2rem; height:2rem; }
.resource-note { padding:.85rem 1rem; border-left:3px solid var(--brand); border-radius:0 .65rem .65rem 0; background:var(--surface); color:var(--muted); font-size:.78rem; line-height:1.6; }
.resource-note--below { margin-top:1.1rem; }
.text-link { display:inline-flex; align-items:center; gap:.55rem; margin-top:1rem; color:var(--ink); font-size:.86rem; font-weight:700; }
.text-link .ico { width:.95rem; height:.95rem; }
.text-link:hover { color:var(--brand); }

.resource-card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1rem,2vw,1.5rem); margin-top:2.5rem; }
.resource-card-grid--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.resource-card,
.incoterm-quick,
.transport-mode { min-height:100%; padding:1.5rem; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--white); box-shadow:var(--shadow-xs); transition:transform .25s var(--ease),box-shadow .25s ease,border-color .25s ease; }
.resource-card:hover,.incoterm-quick:hover,.transport-mode:hover { transform:translateY(-4px); border-color:rgba(196,227,29,.72); box-shadow:var(--shadow-sm); }
.resource-card h3,.incoterm-quick h3,.transport-mode h3 { margin-top:1.1rem; font-size:1.08rem; line-height:1.35; }
.resource-card p,.incoterm-quick p,.transport-mode p { margin-top:.65rem; color:var(--body); font-size:.88rem; line-height:1.7; }

.faq-category-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-bottom:clamp(2.5rem,5vw,4rem); }
.faq-category-nav a { display:flex; align-items:center; gap:1rem; min-height:4.5rem; padding:1rem 1.25rem; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--white); color:var(--ink); font-weight:700; box-shadow:var(--shadow-xs); }
.faq-category-nav a span { display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:.7rem; background:var(--brand); font-size:.72rem; }
.faq-category + .faq-category { margin-top:clamp(3.5rem,7vw,6rem); }
.faq-category__head { margin-bottom:1.5rem; }
.faq-category__head .h2 { margin-top:.9rem; }
.faq-accordion { display:grid; gap:.75rem; }
.faq-accordion__item { border:1px solid var(--border); border-radius:var(--radius-md); background:var(--white); box-shadow:var(--shadow-xs); overflow:hidden; transition:border-color .2s ease,box-shadow .2s ease; }
.faq-accordion__item:has(.faq-accordion__trigger[aria-expanded="true"]) { border-color:rgba(196,227,29,.85); box-shadow:var(--shadow-sm); }
.faq-accordion__trigger { display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; min-height:4.5rem; padding:1rem 1.25rem; color:var(--ink); text-align:left; font-size:clamp(.93rem,1.25vw,1.05rem); font-weight:700; line-height:1.45; }
.faq-accordion__symbol { position:relative; width:1.4rem; height:1.4rem; flex:none; border-radius:50%; background:var(--brand-soft); }
.faq-accordion__symbol::before,.faq-accordion__symbol::after { content:""; position:absolute; top:50%; left:50%; width:.7rem; height:1.5px; background:var(--ink); transform:translate(-50%,-50%); transition:transform .25s ease; }
.faq-accordion__symbol::after { transform:translate(-50%,-50%) rotate(90deg); }
.faq-accordion__trigger[aria-expanded="true"] .faq-accordion__symbol::after { transform:translate(-50%,-50%) rotate(0); }
.faq-accordion__panel { max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-accordion__panel > div { padding:0 1.25rem 1.35rem; }
.faq-accordion__panel p { max-width:68rem; color:var(--body); font-size:.9rem; line-height:1.75; }

.incoterm-quick-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-top:2.5rem; }
.incoterm-quick { padding:1.25rem; }
.incoterm-quick .resource-icon { width:2.9rem; height:2.9rem; }
.incoterm-quick h3 { font-size:1.4rem; }
.incoterm-quick p strong { color:var(--ink); }
.premium-table-wrap { position:relative; width:100%; max-width:100%; margin-top:2.5rem; overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--white); box-shadow:var(--shadow-sm); scrollbar-width:thin; scrollbar-gutter:stable; }
.premium-table { width:100%; min-width:58rem; border-collapse:separate; border-spacing:0; color:var(--body); font-size:.82rem; }
.premium-table th,.premium-table td { padding:1rem 1.1rem; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
.premium-table thead th { position:sticky; top:0; z-index:2; background:var(--footer); color:var(--white); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; }
.premium-table tbody tr:nth-child(even) { background:var(--surface); }
.premium-table tbody tr:hover { background:var(--brand-soft); }
.premium-table tbody tr:last-child th,.premium-table tbody tr:last-child td { border-bottom:0; }
.premium-table tbody th { color:var(--ink); font-weight:700; }
.premium-table tbody th span { display:inline-grid; place-items:center; min-width:2.8rem; margin-right:.65rem; padding:.35rem .45rem; border-radius:.45rem; background:var(--brand); font-size:.72rem; }
.incoterm-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.15rem; margin-top:2.5rem; }
.incoterm-detail { padding:clamp(1.25rem,2vw,1.75rem); border:1px solid var(--border); border-radius:var(--radius-md); background:var(--white); box-shadow:var(--shadow-xs); }
.incoterm-detail__top { display:grid; grid-template-columns:4rem minmax(0,1fr); gap:1rem; align-items:start; }
.incoterm-code { display:grid; place-items:center; min-height:4rem; border-radius:1rem; background:var(--brand); color:var(--ink); font-size:1rem; font-weight:800; }
.incoterm-detail h3 { margin-top:.55rem; font-size:1rem; line-height:1.55; letter-spacing:-.02em; }
.incoterm-detail dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; margin-top:1.2rem; }
.incoterm-detail dl div { padding:.85rem; border-radius:.75rem; background:var(--surface); }
.incoterm-detail dt { color:var(--muted); font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.incoterm-detail dd { margin:.35rem 0 0; color:var(--ink); font-size:.78rem; line-height:1.5; }

.resource-tabs { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:2.25rem; }
.resource-tabs button { min-height:2.9rem; padding:.65rem 1rem; border:1px solid var(--border-strong); border-radius:999px; background:var(--white); color:var(--body); font-size:.8rem; font-weight:700; }
.resource-tabs button:hover,.resource-tabs button.is-active { border-color:var(--brand); background:var(--brand); color:var(--ink); }
.container-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; margin-top:2rem; }
.container-card { overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--white); box-shadow:var(--shadow-xs); }
.container-card[hidden],.premium-table tr[hidden] { display:none; }
.container-card__body { padding:1.35rem; }
.container-card h3 { margin-top:.65rem; font-size:1.2rem; }
.container-card p { margin-top:.6rem; font-size:.84rem; line-height:1.65; }
.container-card dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; margin-top:1.1rem; }
.container-card dl div { padding:.7rem; border-radius:.65rem; background:var(--surface); }
.container-card dt { color:var(--muted); font-size:.58rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.container-card dd { margin:.3rem 0 0; color:var(--ink); font-size:.76rem; font-weight:600; line-height:1.45; }
.container-illustration { position:relative; height:10rem; overflow:hidden; background:linear-gradient(145deg,#e8eee7,#f8faf7); }
.container-illustration::after { content:""; position:absolute; right:-3rem; bottom:-4rem; width:11rem; height:11rem; border-radius:50%; background:rgba(196,227,29,.28); }
.container-illustration__body { position:absolute; left:12%; right:12%; bottom:22%; height:48%; border:2px solid #344238; border-radius:.45rem; background:linear-gradient(180deg,#53665a,#344238); box-shadow:0 18px 30px rgba(23,40,28,.18); }
.container-illustration__body::before { content:""; position:absolute; inset:8% 4%; background:repeating-linear-gradient(90deg,transparent 0 9%,rgba(255,255,255,.13) 9% 11%); }
.container-illustration__door { position:absolute; right:12%; bottom:22%; width:16%; height:48%; border:2px solid #29362d; border-radius:0 .45rem .45rem 0; background:#617267; }
.container-illustration__rib { position:absolute; left:16%; right:17%; bottom:17%; height:3px; background:#263329; box-shadow:0 9px 0 rgba(38,51,41,.25); }
.container-illustration--reefer .container-illustration__door::before { content:"❄"; position:absolute; inset:0; display:grid; place-items:center; color:var(--white); font-size:1.7rem; }
.container-illustration--open .container-illustration__body { border-top:0; background:linear-gradient(180deg,transparent 0 16%,#53665a 16%); }
.container-illustration--open::before { content:"OPEN TOP"; position:absolute; top:1rem; left:1rem; z-index:2; padding:.35rem .55rem; border-radius:.4rem; background:var(--brand); color:var(--ink); font-size:.6rem; font-weight:800; letter-spacing:.08em; }

.resource-split { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(20rem,.95fr); gap:clamp(2.5rem,6vw,6rem); align-items:center; }
.resource-split--reverse > :first-child { order:2; }
.resource-timeline,.process-track { position:relative; margin-top:2rem; }
.resource-timeline::before { content:""; position:absolute; top:1.45rem; bottom:1.45rem; left:1.45rem; width:2px; background:linear-gradient(var(--brand),var(--border)); }
.resource-timeline li { position:relative; display:grid; grid-template-columns:3rem minmax(0,1fr); gap:1rem; padding:0 0 1.4rem; }
.resource-timeline li:last-child { padding-bottom:0; }
.resource-timeline li > span { z-index:1; display:grid; place-items:center; width:2.9rem; height:2.9rem; border:5px solid var(--white); border-radius:50%; background:var(--brand); color:var(--ink); font-size:.66rem; font-weight:800; }
.resource-timeline h3 { font-size:1rem; }
.resource-timeline p { margin-top:.35rem; font-size:.84rem; line-height:1.65; }
.document-visual { display:grid; place-items:center; min-height:31rem; padding:2rem; border-radius:var(--radius-xl); background:radial-gradient(circle at 25% 15%,rgba(196,227,29,.52),transparent 28%),var(--footer); overflow:hidden; }
.document-visual__sheet { position:relative; width:min(100%,20rem); aspect-ratio: .72; padding:2rem; border-radius:.8rem; background:var(--white); box-shadow:0 30px 70px rgba(0,0,0,.3); transform:rotate(3deg); }
.document-visual__sheet > span { display:block; width:65%; height:.55rem; margin-top:1rem; border-radius:999px; background:var(--border); }
.document-visual__sheet > span:nth-of-type(3n) { width:88%; }
.document-visual__brand { width:45%!important; height:1rem!important; margin-top:0!important; background:var(--brand)!important; }
.document-visual__wide { width:100%!important; height:5rem!important; border-radius:.5rem!important; }
.document-visual__stamp { position:absolute; right:1.5rem; bottom:1.5rem; display:grid; place-items:center; width:4.2rem; height:4.2rem; border:3px solid var(--brand); border-radius:50%; color:var(--brand); font-size:1.1rem; font-weight:800; transform:rotate(-12deg); }
.document-check-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin-top:2rem; }
.document-check-grid li,.feature-list li { display:flex; gap:.75rem; align-items:flex-start; padding:1rem; border:1px solid var(--border); border-radius:.8rem; background:var(--white); color:var(--ink); font-size:.84rem; font-weight:600; line-height:1.55; }
.document-check-grid .ico,.feature-list .ico { width:1.05rem; height:1.05rem; margin-top:.18rem; color:var(--brand); flex:none; }

.process-track { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1rem; }
.process-track::before { content:""; position:absolute; top:3rem; left:8%; right:8%; height:2px; background:linear-gradient(90deg,var(--brand),var(--border)); }
.process-track li { position:relative; z-index:1; min-height:100%; padding:1.2rem; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--white); box-shadow:var(--shadow-xs); }
.process-track__number { position:absolute; top:.8rem; right:.9rem; color:var(--border-strong); font-size:.7rem; font-weight:800; }
.process-track h3 { margin-top:1rem; font-size:1rem; }
.process-track p { margin-top:.55rem; font-size:.8rem; line-height:1.65; }
.transport-mode-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-top:2.25rem; }
.resource-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:1.25rem; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--white); overflow:hidden; }
.resource-stats div { padding:1.25rem; text-align:center; }
.resource-stats div+div { border-left:1px solid var(--border); }
.resource-stats strong { display:block; color:var(--ink); font-size:clamp(1.8rem,3vw,2.5rem); line-height:1; }
.resource-stats span { display:block; margin-top:.45rem; color:var(--muted); font-size:.72rem; }
.feature-list { display:grid; gap:.7rem; margin-top:1.5rem; }
.freight-network-visual { position:relative; min-height:26rem; border-radius:var(--radius-xl); background:radial-gradient(circle at 50% 50%,rgba(196,227,29,.2),transparent 38%),var(--footer); overflow:hidden; }
.freight-network-visual svg { position:absolute; inset:12%; width:76%; height:76%; }
.freight-network-visual path { stroke:rgba(196,227,29,.55); stroke-width:2; stroke-dasharray:7 8; }
.network-node { position:absolute; z-index:2; display:grid; place-items:center; width:4.8rem; height:4.8rem; border:1px solid rgba(196,227,29,.55); border-radius:50%; background:rgba(255,255,255,.96); color:var(--ink); font-size:.67rem; font-weight:800; box-shadow:0 14px 35px rgba(0,0,0,.25); }
.network-node--a { left:8%; bottom:14%; }.network-node--b { left:48%; top:27%; }.network-node--c { right:8%; bottom:18%; }.network-node--d { right:14%; top:8%; }


@media (min-width: 75rem) {
  .site-footer__grid { grid-template-columns:minmax(15rem,1.12fr) minmax(7.5rem,.42fr) minmax(7.5rem,.45fr) minmax(11rem,.62fr) minmax(17rem,1fr); gap:clamp(1.6rem,2.8vw,3rem); }
}
@media (max-width: 74.9375rem) {
  .site-footer__resources { grid-column:auto; }
  .resource-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .incoterm-quick-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .container-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .process-track { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .process-track::before { display:none; }
  .transport-mode-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 61.9375rem) {
  .resource-intro__grid,.resource-split { grid-template-columns:1fr; }
  .resource-split--reverse > :first-child { order:initial; }
  .incoterm-detail dl { grid-template-columns:1fr; }
  .site-footer__resources { grid-column:auto; }
}
@media (max-width: 47.9375rem) {
  .resource-intro,.resource-section { padding-block:clamp(3.5rem,14vw,5rem); }
  .resource-hero {
    min-height: clamp(22rem, 88vw, 25rem);
  }
  .resource-hero .svc-hero__scrim {
    background:
      linear-gradient(90deg, rgba(7, 13, 8, .93) 0%, rgba(7, 13, 8, .76) 58%, rgba(7, 13, 8, .26) 100%),
      linear-gradient(180deg, rgba(7, 13, 8, .04) 0%, rgba(7, 13, 8, .22) 55%, rgba(7, 13, 8, .58) 100%);
  }
  .resource-hero .svc-hero__inner {
    padding-top: 7rem;
    padding-bottom: 2.5rem;
  }
  .resource-hero .svc-hero__title {
    max-width: 15ch;
    font-size: clamp(2.15rem, 10vw, 3rem);
  }
  .resource-hero .svc-hero__sub {
    max-width: 34rem;
    font-size: clamp(.875rem, 3.65vw, 1rem);
  }
  .faq-category-nav,.document-check-grid { grid-template-columns:1fr; }
  .resource-card-grid,.resource-card-grid--three,.incoterm-detail-grid,.container-grid { grid-template-columns:1fr; }
  .incoterm-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .process-track { grid-template-columns:1fr; }
  .transport-mode-grid { grid-template-columns:1fr; }
  .resource-stats { grid-template-columns:1fr; }
  .resource-stats div+div { border-top:1px solid var(--border); border-left:0; }  .document-visual { min-height:24rem; }
  .site-footer__resources { grid-column:auto; }
}
@media (max-width: 26.25rem) {
  .resource-hero { min-height: 22.5rem; }
  .resource-hero .svc-hero__title { font-size: clamp(2rem, 10.6vw, 2.55rem); }
  .incoterm-quick-grid { grid-template-columns:1fr; }
  .resource-tabs { display:grid; grid-template-columns:1fr 1fr; }
  .resource-tabs button { border-radius:.75rem; }
  .container-card dl { grid-template-columns:1fr; }
  .incoterm-detail__top { grid-template-columns:3.4rem minmax(0,1fr); }
  .incoterm-code { min-height:3.4rem; }
  .faq-accordion__trigger { padding-inline:1rem; }
}


/* About story: tablet and mobile content-first layout ------------------- */
@media (max-width: 64rem) {
  .story__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "media";
    gap: clamp(2rem, 5vw, 3.25rem);
    align-items: start;
  }

  .story__copy {
    width: 100%;
    max-width: none;
  }

  .story__media {
    display: grid;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    place-items: stretch;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-md);
  }

  .story__img--a {
    position: relative;
    z-index: 1;
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    aspect-ratio: 714 / 680;
    border-radius: inherit;
    object-fit: cover;
    object-position: center;
    box-shadow: none;
  }

  .story__frame {
    position: relative;
    z-index: 2;
    right: auto;
    bottom: auto;
    grid-area: 1 / 1;
    align-self: end;
    justify-self: end;
    width: min(66%, 32rem);
    margin: 0 clamp(0.75rem, 2.5vw, 1.5rem) clamp(0.75rem, 2.5vw, 1.5rem) 0;
    overflow: hidden;
    border: clamp(0.375rem, 1vw, 0.625rem) solid var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
  }

  .story__img--b {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 651 / 496;
    object-fit: cover;
    object-position: center;
  }
}

@media (max-width: 47.9375rem) {
  .story__grid {
    gap: 2rem;
  }

  .story__media {
    border-radius: 1.25rem;
  }

  .story__frame {
    width: 68%;
    margin: 0 0.75rem 0.75rem 0;
    border-width: 0.375rem;
    border-radius: 1rem;
  }
}

/* Container Specifications — native technical layout -------------------- */
.container-grid--specifications {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.1vw, 1.5rem);
}

.container-card--detailed {
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: transform .25s var(--ease), box-shadow .25s ease, border-color .25s ease;
}

.container-card--detailed:hover {
  transform: translateY(-4px);
  border-color: rgba(196, 227, 29, .72);
  box-shadow: var(--shadow-sm);
}

.container-card--detailed .container-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(1.15rem, 2vw, 1.55rem);
}

.container-card--detailed h3 {
  max-width: 24ch;
  margin-top: .6rem;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.35;
  text-wrap: balance;
}

.container-illustration__size {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 3;
  display: inline-grid;
  min-height: 1.8rem;
  place-items: center;
  padding: .35rem .6rem;
  border: 1px solid rgba(18, 25, 20, .1);
  border-radius: .5rem;
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .07em;
  box-shadow: 0 8px 20px rgba(18, 25, 20, .08);
}

.container-illustration--high-cube .container-illustration__body,
.container-illustration--high-cube .container-illustration__door {
  height: 58%;
}

.container-illustration--reefer .container-illustration__body {
  background: linear-gradient(180deg, #edf3ef, #ccd7d0);
}

.container-illustration--reefer .container-illustration__body::before {
  background: repeating-linear-gradient(90deg, transparent 0 9%, rgba(45, 64, 52, .13) 9% 11%);
}

.container-illustration--flatrack .container-illustration__body {
  bottom: 27%;
  height: 15%;
  border-radius: .25rem;
  background: linear-gradient(180deg, #596b60, #303d35);
}

.container-illustration--flatrack .container-illustration__body::before {
  inset: auto 0 100%;
  height: 4.2rem;
  background:
    linear-gradient(90deg, #38483e 0 5%, transparent 5% 95%, #38483e 95% 100%),
    linear-gradient(90deg, transparent 0 3%, rgba(255,255,255,.16) 3% 5%, transparent 5% 95%, rgba(255,255,255,.16) 95% 97%, transparent 97%);
}

.container-illustration--flatrack .container-illustration__door {
  display: none;
}

.container-illustration--flatrack .container-illustration__rib {
  bottom: 21%;
}

.container-dimension-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin-top: 1.25rem;
}

.container-dimension-group {
  min-width: 0;
  padding: .8rem;
  border: 1px solid var(--border);
  border-radius: .8rem;
  background: var(--surface);
}

.container-dimension-group h4 {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--ink);
  font-size: .72rem;
  line-height: 1.2;
}

.container-spec-icon {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  color: var(--ink);
}

.container-dimension-group dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  margin-top: .75rem;
}

.container-dimension-group dl div {
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.container-dimension-group dl div + div {
  padding-top: .5rem;
  border-top: 1px solid var(--border);
}

.container-dimension-group dt,
.container-capacity-item dt {
  color: var(--muted);
  font-size: .57rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.container-dimension-group dd,
.container-capacity-item dd {
  margin: .28rem 0 0;
}

.container-value-stack {
  display: inline-flex;
  flex-direction: column;
  gap: .16rem;
  min-width: 0;
  color: var(--ink);
  line-height: 1.3;
  white-space: nowrap;
}

.container-value-stack strong {
  font-size: .76rem;
  font-weight: 700;
}

.container-value-stack > span {
  color: var(--muted);
  font-size: .67rem;
  font-weight: 500;
}

.container-capacity-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: .65rem !important;
  margin-top: .65rem !important;
}

.container-capacity-item {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .55rem;
  align-items: start;
  min-width: 0;
  padding: .8rem !important;
  border: 1px solid var(--border);
  border-radius: .8rem !important;
  background: var(--white) !important;
}

.container-capacity-icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: .6rem;
  background: var(--brand-soft);
  color: var(--ink);
}

.container-capacity-icon .container-spec-icon {
  width: 1rem;
  height: 1rem;
}

.container-table-block {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}

.container-table-block + .container-table-block {
  margin-top: clamp(2.75rem, 5vw, 4rem);
}

.container-table-heading {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.container-table-heading h3 {
  color: var(--ink);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.container-table-heading p {
  margin-top: .35rem;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.6;
}

.container-table-wrap {
  margin-top: 1.2rem;
  overscroll-behavior-inline: contain;
}

.container-table--dimensions {
  min-width: 76rem;
}

.container-table--capacity {
  min-width: 48rem;
}

.container-table th,
.container-table td {
  vertical-align: middle;
}

.container-table thead tr:first-child th {
  height: 3.2rem;
}

.container-table--dimensions thead tr:nth-child(2) th {
  top: 3.2rem;
  background: #273129;
}

.container-table tbody th {
  min-width: 15rem;
}

.container-table .container-value-stack strong {
  font-size: .8rem;
}

.container-table .container-value-stack > span {
  font-size: .72rem;
}

@media (max-width: 61.9375rem) {
  .container-grid--specifications {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 47.9375rem) {
    .container-dimension-grid,
  .container-capacity-grid {
    grid-template-columns: 1fr !important;
  }

  .container-table-heading {
    align-items: flex-start;
  }

  .container-table-wrap {
    border-radius: .85rem;
  }
}

@media (max-width: 26.25rem) {
  .page-container-specifications .resource-tabs {
    grid-template-columns: 1fr;
  }

  .container-card--detailed .container-card__body {
    padding-inline: 1rem;
  }
}


/* FINAL CTA RESPONSIVE + BLOG FILTER CONSISTENCY ------------------------ */
/* Desktop CTA rules above remain untouched. At tablet/mobile widths the
   same component becomes content-first and keeps the complete transparent
   ship artwork inside the green panel. */
@media (max-width: 64rem) {
  .cta__panel {
    display: grid;
    grid-template-rows: auto auto;
    min-height: 0;
  }

  .cta__copy {
    min-height: 0;
    max-width: 46rem;
    padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3.5rem) 1rem;
  }

  .cta__ship {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 1;
    display: block;
    align-self: end;
    justify-self: center;
    width: min(calc(100% - 2rem), 48rem);
    max-width: 100%;
    height: auto;
    max-height: none;
    margin: 0 auto clamp(1.25rem, 3vw, 2rem);
    object-fit: contain;
    object-position: center;
  }
}

@media (max-width: 47.9375rem) {
  .cta {
    padding-block: clamp(3.5rem, 12vw, 4.5rem);
  }

  .cta__panel {
    min-height: 0;
  }

  .cta__copy {
    justify-content: flex-start;
    padding: clamp(2rem, 8vw, 2.75rem) clamp(1.25rem, 5vw, 1.75rem) 0.75rem;
  }

  .cta__title {
    font-size: clamp(2.125rem, 10vw, 3rem);
  }

  .cta__desc {
    font-size: 0.9rem;
  }

  .cta__ship {
    right: auto;
    bottom: auto;
    width: calc(100% - 1rem);
    height: auto;
    margin-bottom: 1rem;
  }
}

.blog__grid {
  align-items: stretch;
}

.blog__grid .post {
  height: 100%;
}

.blog__grid .post__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

.feature.is-filtered-in,
.blog__grid .post.is-filtered-in {
  animation: blog-filter-in 0.36s var(--ease) both;
}

@keyframes blog-filter-in {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .feature.is-filtered-in,
  .blog__grid .post.is-filtered-in {
    animation: none;
  }
}

/* ========================================================================
   CARRIER + CONTACT/BLOG BANNER FINAL ALIGNMENT
   ======================================================================== */
.page-carrier .resource-hero .svc-hero__img {
  object-fit: cover;
  object-position: center;
}

.page-carrier .resource-hero .svc-hero__scrim {
  background:
    linear-gradient(90deg, rgba(7, 13, 8, 0.93) 0%, rgba(7, 13, 8, 0.78) 34%,
      rgba(7, 13, 8, 0.46) 58%, rgba(7, 13, 8, 0.12) 82%, rgba(7, 13, 8, 0.04) 100%),
    linear-gradient(180deg, rgba(7, 13, 8, 0.08), rgba(7, 13, 8, 0.26));
}

.page-contact .contact-intro .h2,
.page-contact .contact-intro__lead,
.page-blogs .contact-intro .h2,
.page-blogs .contact-intro .blog-intro__sub {
  display: block;
  width: 100%;
  margin-inline: auto;
  text-align: center;
}

.page-contact .contact-intro .h2,
.page-contact .contact-intro__lead {
  max-width: 50rem;
}

.page-contact .contact-intro__lead {
  margin-top: 1.125rem;
}

@media (max-width: 48rem) {
  .page-carrier .resource-hero .svc-hero__scrim {
    background:
      linear-gradient(90deg, rgba(7, 13, 8, 0.9) 0%, rgba(7, 13, 8, 0.67) 72%, rgba(7, 13, 8, 0.36) 100%),
      linear-gradient(180deg, rgba(7, 13, 8, 0.1), rgba(7, 13, 8, 0.3));
  }
}


/* ========================================================================
   CONTACT INTRO AXIS + CONTAINER SPECIFICATIONS RESPONSIVE HARDENING
   ======================================================================== */

/* Contact intro: keep the heading, lead and supporting copy on one
   mathematically centred axis at every breakpoint. */
.page-contact .contact-intro > .shell {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-contact .contact-intro .h2 {
  width: min(100%, 50rem);
  max-width: 50rem;
  margin-inline: auto;
  text-align: center;
}

.page-contact .contact-intro__lead,
.page-contact .contact-intro__body {
  width: min(100%, 48rem);
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}

.page-contact .contact-intro__lead {
  margin-top: 1.125rem;
  line-height: 1.65;
}

.page-contact .contact-intro__body {
  margin-top: 1.125rem;
}

/* Prevent any child of the technical page from forcing the document wider
   than its responsive shell. */
.page-container-specifications main,
.page-container-specifications .resource-section,
.page-container-specifications .resource-section > .shell,
.page-container-specifications .container-grid--specifications,
.page-container-specifications .container-card--detailed,
.page-container-specifications .container-card__body,
.page-container-specifications .container-table-block,
.page-container-specifications .container-table-heading {
  min-width: 0;
  max-width: 100%;
}

.container-grid--specifications {
  align-items: stretch;
}

.container-card--detailed {
  width: 100%;
}

.container-card--detailed .container-card__body {
  width: 100%;
}

.container-illustration {
  width: 100%;
  height: auto;
  min-height: 9.5rem;
  aspect-ratio: 16 / 6;
}

.container-table-block {
  width: 100%;
}

.container-table-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  scrollbar-color: rgba(50, 57, 46, 0.42) rgba(50, 57, 46, 0.08);
}

.container-table-wrap::-webkit-scrollbar {
  height: 0.65rem;
}

.container-table-wrap::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(50, 57, 46, 0.08);
}

.container-table-wrap::-webkit-scrollbar-thumb {
  border: 0.15rem solid transparent;
  border-radius: 999px;
  background: rgba(50, 57, 46, 0.42);
  background-clip: padding-box;
}

.container-table {
  width: 100%;
  max-width: none;
}

.container-table th,
.container-table td {
  white-space: nowrap;
}

@media (max-width: 64rem) {
  .container-grid--specifications {
    grid-template-columns: 1fr;
  }

  .container-illustration {
    min-height: 10rem;
    aspect-ratio: 16 / 5;
  }

  .container-table-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .container-table--dimensions {
    min-width: 64rem;
  }

  .container-table--capacity {
    min-width: 48rem;
  }

  .container-table th,
  .container-table td {
    padding: 0.8rem 0.85rem;
  }

  .container-table tbody th {
    min-width: 13rem;
  }

  /* Keep the container name visible while users inspect measurements. */
  .container-table tbody th,
  .container-table--dimensions thead tr:first-child th:first-child,
  .container-table--capacity thead tr:first-child th:first-child {
    position: sticky;
    left: 0;
  }

  .container-table tbody th {
    z-index: 1;
    background: var(--white);
    box-shadow: 1px 0 0 var(--border);
  }

  .container-table tbody tr:nth-child(even) th {
    background: var(--surface);
  }

  .container-table tbody tr:hover th {
    background: var(--brand-soft);
  }

  .container-table--dimensions thead tr:first-child th:first-child,
  .container-table--capacity thead tr:first-child th:first-child {
    z-index: 4;
    background: var(--footer);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.16);
  }
}

@media (max-width: 48rem) {
  .page-contact .contact-intro__lead,
  .page-contact .contact-intro__body {
    width: min(100%, 44rem);
  }

  .page-container-specifications .resource-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .page-container-specifications .resource-tabs button {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .container-card--detailed .container-card__body {
    padding: 1.1rem;
  }

  .container-illustration {
    min-height: 9rem;
    aspect-ratio: 16 / 6.5;
  }

  .container-dimension-grid,
  .container-capacity-grid {
    grid-template-columns: 1fr !important;
  }

  .container-dimension-group,
  .container-capacity-item {
    width: 100%;
  }

  .container-value-stack {
    white-space: normal;
  }

  .container-table-wrap {
    margin-inline: 0;
    border-radius: 0.85rem;
  }

  .container-table--dimensions {
    min-width: 58rem;
  }

  .container-table--capacity {
    min-width: 48rem;
  }

  .container-table th,
  .container-table td {
    padding: 0.72rem 0.75rem;
    font-size: 0.76rem;
  }

  .container-table tbody th {
    min-width: 11.75rem;
    white-space: normal;
    line-height: 1.45;
  }

  .container-table .container-value-stack {
    white-space: nowrap;
  }

  .container-table .container-value-stack strong {
    font-size: 0.76rem;
  }

  .container-table .container-value-stack > span {
    font-size: 0.68rem;
  }
}

@media (max-width: 26.25rem) {
  .page-container-specifications .resource-tabs {
    grid-template-columns: 1fr;
  }

  .container-card--detailed .container-card__body {
    padding-inline: 0.95rem;
  }

  .container-illustration {
    min-height: 8.25rem;
    aspect-ratio: 16 / 7;
  }

  .container-table-heading {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.75rem;
  }

  .container-table-heading .resource-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .container-table--dimensions {
    min-width: 54rem;
  }

  .container-table--capacity {
    min-width: 48rem;
  }
}

/* Preserve the established desktop card proportions; fluid media ratios are
   introduced only at tablet and mobile widths below. */
@media (min-width: 64.0625rem) {
  .container-illustration {
    height: 10rem;
    min-height: 0;
    aspect-ratio: auto;
  }

  .container-table {
    width: 100%;
  }
}


/* FINAL RESPONSIVE PRODUCTION HARDENING --------------------------------- */
.premium-table-wrap:focus-visible,
.container-table-wrap:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 4px;
}

@media (max-width: 47.9375rem) {
  .btn,
  .faq-accordion__trigger,
  .resource-tabs button,
  .qform button[type="submit"] {
    min-height: 2.75rem;
  }

  .premium-table th,
  .premium-table td {
    padding: 0.8rem 0.875rem;
  }
}

/* ========================================================================
   FINAL MOBILE HEADER, TYPOGRAPHY + BLOG MEDIA POLISH
   ======================================================================== */

/* Give every blog card a stable media box so imagery remains equal-height
   before and after image loading. */
.post__media {
  aspect-ratio: 16 / 9;
}

.post__media img {
  height: 100%;
}

@media (max-width: 47.9375rem) {
  /* Three equal header tracks keep the brand on the true viewport centre,
     independent of the hamburger and quote-button widths. */
  .site-header__inner,
  .site-header--solid .site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    width: 100%;
  }

  .burger {
    grid-column: 1;
    justify-self: start;
  }

  .brand {
    position: static;
    top: auto;
    left: auto;
    grid-column: 2;
    justify-self: center;
    transform: none;
  }

  .site-header__actions {
    grid-column: 3;
    justify-self: end;
    margin-left: 0;
  }

  /* Mobile supporting-copy standard. Titles, headings, navigation, buttons
     and form labels retain their established component sizes. */
  body {
    font-family: "Inter", Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: normal;
  }

  main p:not(.eyebrow):not(.supply__eyebrow),
  main address,
  .section-sub,
  .about-hero__sub,
  .svc-hero__sub,
  .advantage__lead,
  .why__lead,
  .capabilities__lead,
  .blog-intro__sub,
  .svc-card__desc,
  .adv-card__desc,
  .why-card__desc,
  .cap-card__desc,
  .value-card__desc,
  .step__desc,
  .point__desc,
  .why__point-desc,
  .post__excerpt,
  .feature__excerpt,
  .cta__desc,
  .contact-intro__lead,
  .contact-info__addr,
  .office__address,
  .resource-note,
  .site-footer__tagline,
  .site-footer__contact-list a,
  .site-footer__contact-list address,
  .site-footer__bar p {
    font-family: "Inter", Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: normal;
  }

  .feature__media,
  .post__media {
    width: 100%;
  }

  .feature__media img,
  .post__media img,
  .recent-posts img {
    object-fit: cover;
    object-position: center;
  }
}


@media (max-width: 47.9375rem) {
  .burger,
  .site-header__actions > .btn {
    min-height: 2.75rem;
  }

  .burger {
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* Prevent desktop dropdown content from flashing during the first paint while
   retaining the established fade-and-slide opening motion. */
@media (min-width: 75rem) {
  .mega {
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.25s var(--ease);
  }

  .mega.is-open {
    pointer-events: auto;
  }
}

/* ========================================================================
   FINAL SOLID STICKY HEADER + HOMEPAGE VIDEO DELIVERY
   ======================================================================== */

/* The header is intentionally solid and fixed from first paint. The same
   geometry is retained while scrolling, eliminating contrast changes and
   layout shifts between initial and scrolled states. */
.site-header,
.site-header--solid,
.site-header.is-scrolled,
.site-header--solid.is-scrolled {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  padding-top: 0.5rem;
  animation: none;
  transform: none;
  opacity: 1;
}

.site-header__inner,
.site-header--solid .site-header__inner,
.site-header.is-scrolled .site-header__inner,
.site-header--solid.is-scrolled .site-header__inner {
  border: 1px solid rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 40px rgba(14, 28, 17, 0.14);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
}

.hero--media-only .hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 74.9375rem) {
  .site-header,
  .site-header--solid,
  .site-header.is-scrolled,
  .site-header--solid.is-scrolled {
    padding-top: var(--mobile-header-top);
  }

  .site-header__inner,
  .site-header--solid .site-header__inner,
  .site-header.is-scrolled .site-header__inner,
  .site-header--solid.is-scrolled .site-header__inner {
    min-height: var(--mobile-header-row);
    padding-inline: clamp(0.625rem, 2vw, 0.875rem);
    border-radius: 1rem;
  }
}

@media (max-width: 47.9375rem) {
  :root {
    --mobile-header-top: clamp(0.375rem, 1.8vw, 0.625rem);
    --mobile-header-row: 4.5rem;
  }

  .site-header__inner,
  .site-header--solid .site-header__inner,
  .site-header.is-scrolled .site-header__inner,
  .site-header--solid.is-scrolled .site-header__inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    min-height: var(--mobile-header-row);
  }

  .brand img {
    width: clamp(5.5rem, 24vw, 6.25rem);
  }

  .burger {
    width: 2.625rem;
    height: 2.625rem;
    min-height: 2.625rem;
  }

  .site-header__actions > .btn {
    min-height: 2.625rem;
    height: 2.625rem;
    padding-inline: clamp(0.5rem, 2.2vw, 0.75rem);
    gap: 0.375rem;
    border-radius: 0.625rem;
    font-size: clamp(0.625rem, 2.55vw, 0.7rem);
    line-height: 1;
    white-space: nowrap;
  }

  .site-header__actions > .btn .ico {
    width: 0.625rem;
    height: 0.625rem;
  }
}

@media (max-width: 22.4375rem) {
  :root {
    --mobile-header-row: 4.25rem;
  }

  .brand img {
    width: 5.25rem;
  }

  .site-header__actions > .btn {
    min-height: 2.5rem;
    height: 2.5rem;
    padding-inline: 0.5rem;
    font-size: 0.625rem;
  }
}

/* ========================================================================
   CONTAINER SPECIFICATIONS MOBILE VISIBILITY + CONTACT PLACEHOLDER FIX
   ======================================================================== */

/* Tablet and mobile must never depend on a viewport reveal animation for
   essential technical data. This also protects content when scripts are
   delayed, disabled, restored from bfcache, or an observer threshold cannot
   be reached by a very tall element. Desktop animation/design stays intact. */
@media (max-width: 64rem) {
  .page-container-specifications .reveal-item,
  .page-container-specifications .reveal-item.is-visible {
    opacity: 1;
    transform: none;
  }

  .page-container-specifications main,
  .page-container-specifications .resource-intro,
  .page-container-specifications .resource-section,
  .page-container-specifications .container-catalogue,
  .page-container-specifications .container-comparison-section,
  .page-container-specifications .resource-section > .shell,
  .page-container-specifications .container-grid--specifications,
  .page-container-specifications .container-card--detailed,
  .page-container-specifications .container-card__body,
  .page-container-specifications .container-dimension-grid,
  .page-container-specifications .container-capacity-grid,
  .page-container-specifications .container-table-block {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    visibility: visible;
  }

  .page-container-specifications .container-grid--specifications {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1rem, 2.6vw, 1.5rem);
    width: 100%;
  }

  .page-container-specifications .container-card--detailed {
    display: flex;
    width: 100%;
    min-width: 0;
    opacity: 1;
  }

  /* Preserve the card's rounded media edge without clipping its content. */
  .page-container-specifications .container-illustration {
    flex: none;
    width: 100%;
    height: auto;
    min-height: clamp(9rem, 22vw, 11rem);
    aspect-ratio: 16 / 6;
    overflow: hidden;
  }

  .page-container-specifications .container-card__body {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .page-container-specifications .container-dimension-grid,
  .page-container-specifications .container-capacity-grid {
    width: 100%;
  }

  .page-container-specifications .container-table-block,
  .page-container-specifications .container-table-heading,
  .page-container-specifications .container-table-wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  /* Only the table viewport scrolls; the page itself never becomes wider. */
  .page-container-specifications .container-table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .page-container-specifications .container-table {
    display: table;
    width: 100%;
    max-width: none;
    table-layout: auto;
  }

  .page-container-specifications .container-table th,
  .page-container-specifications .container-table td {
    height: auto;
    visibility: visible;
    opacity: 1;
  }

  /* Contact-form placeholder scale requested for tablet/mobile only. */
  .page-contact .field__input,
  .page-contact .field__input::placeholder {
    font-family: "Inter", Arial, sans-serif;
    font-weight: 400;
    line-height: 1.5;
  }

  .page-contact .field__input::placeholder {
    font-size: 0.75rem;
    color: #849087;
    opacity: 1;
  }

  .page-contact select.field__input {
    font-size: 0.75rem;
  }
}

@media (max-width: 47.9375rem) {
  .page-container-specifications .resource-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
    width: 100%;
  }

  .page-container-specifications .resource-tabs button {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 2.75rem;
    padding: 0.65rem 0.75rem;
    white-space: normal;
  }

  .page-container-specifications .container-dimension-grid,
  .page-container-specifications .container-capacity-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.75rem !important;
  }

  .page-container-specifications .container-dimension-group,
  .page-container-specifications .container-capacity-item {
    width: 100%;
    min-width: 0;
  }

  .page-container-specifications .container-value-stack {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .page-container-specifications .container-table .container-value-stack {
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .page-container-specifications .container-table-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
  }

  .page-container-specifications .container-table--dimensions {
    min-width: 56rem;
  }

  .page-container-specifications .container-table--capacity {
    min-width: 48rem;
  }

  .page-container-specifications .container-table th,
  .page-container-specifications .container-table td {
    padding: 0.72rem 0.75rem;
    font-size: 0.75rem;
    line-height: 1.45;
  }

  .page-container-specifications .container-table tbody th {
    min-width: 11.5rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* On phones the first column scrolls with the table. Keeping it sticky
     consumed most of the narrow viewport and visually cut off measurement
     columns even though the wrapper itself was scrollable. */
  .page-container-specifications .container-table tbody th,
  .page-container-specifications .container-table--dimensions thead tr:first-child th:first-child,
  .page-container-specifications .container-table--capacity thead tr:first-child th:first-child {
    position: static;
    left: auto;
    box-shadow: none;
  }

  .page-contact .field__input {
    /* Keep the original control height while vertically centering input text. */
    line-height: 1.5;
  }

  .page-contact .field__input--area {
    line-height: 1.5;
  }
}

@media (max-width: 26.25rem) {
  .page-container-specifications .resource-tabs {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-container-specifications .container-illustration {
    min-height: 8.25rem;
    aspect-ratio: 16 / 7;
  }

  .page-container-specifications .container-card--detailed .container-card__body {
    padding-inline: 0.95rem;
  }
}


/* ========================================================================
   PREMIUM BLOG MEDIA + MOBILE HOMEPAGE HERO POLISH
   ======================================================================== */

/* All editorial thumbnails use the same true 16:9 media frame. The image
   element fills that intrinsic frame, so cards remain equal-height before
   and after loading without stretching the photography. */
.feature__media,
.post__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.9375rem;
  background: #eef1ec;
}

.feature__media img,
.post__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
}

.page-blogs .blog__grid {
  align-items: stretch;
}

.page-blogs .blog__grid .post {
  height: 100%;
}

.page-blogs .blog__grid .post__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.page-blogs .blog__grid .post__body .link-arrow {
  margin-top: auto;
}

/* Tablet keeps the existing media-only hero concept while reducing the
   oversized legacy height so the 16:9 video remains visually balanced. */
@media (max-width: 64rem) {
  .page-home .hero.hero--media-only {
    height: clamp(26rem, 56vw, 34rem);
    min-height: 26rem;
  }

  .page-home .hero--media-only .hero__video {
    object-position: 50% 50%;
  }
}

/* Mobile uses a landscape-first hero window. This keeps the ship focal point
   visible, substantially reduces side cropping, and avoids the previous
   portrait-height media block without changing the video or desktop design. */
@media (max-width: 47.9375rem) {
  .page-home .hero.hero--media-only {
    height: clamp(14rem, 65vw, 18.5rem);
    min-height: 14rem;
    max-height: 18.5rem;
  }

  .page-home .hero--media-only .hero__media {
    background: #071f20;
  }

  .page-home .hero--media-only .hero__video {
    object-fit: cover;
    object-position: 50% 50%;
  }

  .page-home .hero--media-only .hero__video,
  .page-home .hero--media-only .hero__media {
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  .page-blogs .feature__media,
  .page-blogs .post__media,
  .page-home .insights .post__media {
    border-radius: 0.875rem;
  }
}

/* Equalize the two standard Blog cards on single-column mobile layouts while
   preserving the existing responsive grid and flexible content alignment. */
@media (max-width: 47.9375rem) {
  .page-blogs .blog__grid .post {
    height: 26rem;
    min-height: 26rem;
  }
}


/* ========================================================================
   CONTACT + BLOG FIXED-HEADER BANNER OFFSET
   ======================================================================== */

/* The shared fixed header is measured in JavaScript and published through
   --site-header-offset. The 5rem fallback matches the production header's
   first-paint geometry, preventing a jump before JavaScript runs. */
:root {
  --site-header-offset: 5rem;
}

.page-contact main,
.page-blogs main {
  padding-top: var(--site-header-offset);
}

/* Contact and Blog use the same centred, reduced inner-page title treatment.
   Their content begins below the measured fixed header rather than underneath
   it, and the title size now follows the website's standard .h2 scale. */
.page-contact .contact-intro,
.page-blogs .contact-intro {
  padding-top: clamp(2.75rem, 4vw, 3.75rem);
  padding-bottom: clamp(2.75rem, 4vw, 3.75rem);
}

.page-contact .contact-intro > .shell,
.page-blogs .contact-intro > .shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.page-contact .contact-intro .h2,
.page-blogs .contact-intro .h2 {
  width: min(100%, 50rem);
  max-width: 50rem;
  margin-inline: auto;
  font-size: clamp(2.125rem, 3.75vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.048em;
  text-align: center;
}

.page-contact .contact-intro__lead,
.page-blogs .contact-intro .blog-intro__sub {
  width: min(100%, 48rem);
  max-width: 48rem;
  margin: 1.125rem auto 0;
  line-height: 1.65;
  text-align: center;
}

.page-contact .contact-intro__body {
  width: min(100%, 48rem);
  max-width: 48rem;
  margin: 1.125rem auto 0;
  text-align: center;
}

@media (max-width: 47.9375rem) {
  .page-contact .contact-intro,
  .page-blogs .contact-intro {
    padding-top: clamp(2.25rem, 9vw, 3rem);
    padding-bottom: clamp(2.25rem, 9vw, 3rem);
  }

  .page-contact .contact-intro .h2,
  .page-blogs .contact-intro .h2 {
    font-size: clamp(2rem, 10vw, 2.75rem);
    line-height: 1.08;
  }

  .page-contact .contact-intro__lead,
  .page-blogs .contact-intro .blog-intro__sub {
    margin-top: 0.875rem;
  }
}

/* ========================================================================
   FINAL HOMEPAGE BANNER MEDIA REPLACEMENT
   ======================================================================== */

/* Preserve the current SafeTrans hero structure while displaying the newly
   supplied 16:9 banner at its natural focal point. The surrounding colour is
   sampled from the footage so any responsive containment blends seamlessly. */
.page-home .hero--media-only .hero__media {
  display: grid;
  place-items: center;
  background: #031f20;
}

.page-home .hero--media-only .hero__video {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}

/* On narrow screens the full horizontal cargo vessel is more important than
   filling every pixel. Containment prevents the bow/stern from being cut off,
   while the matching ocean background avoids visible black letterboxing. */
@media (max-width: 47.9375rem) {
  .page-home .hero.hero--media-only {
    height: clamp(12.5rem, 56.25vw, 15.25rem);
    min-height: 12.5rem;
    max-height: 15.25rem;
  }

  .page-home .hero--media-only .hero__video {
    object-fit: contain;
    object-position: 50% 50%;
  }
}

/* ========================================================================
   EXACT UPLOADED HERO VIDEO — FULL-VIEWPORT RESPONSIVE OVERRIDE
   Keeps the supplied video bytes unchanged and adjusts only presentation.
   ======================================================================== */
.page-home .hero.hero--media-only {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #071919;
}

.page-home .hero--media-only .hero__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #071919;
}

.page-home .hero--media-only .hero__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  object-fit: cover;
  object-position: 50% 50%;
  background: #071919;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Preserve any existing hero copy/CTA layer above the background media. */
.page-home .hero__content,
.page-home .hero__inner {
  position: relative;
  z-index: 2;
}

/* Tablets use the full available viewport and favour the ship/containers. */
@media (max-width: 64rem) {
  .page-home .hero.hero--media-only {
    height: 100vh;
    min-height: 100vh;
    max-height: none;
  }

  @supports (height: 100svh) {
    .page-home .hero.hero--media-only {
      height: 100svh;
      min-height: 100svh;
    }
  }

  @supports (height: 100dvh) {
    .page-home .hero.hero--media-only {
      height: 100dvh;
      min-height: 100dvh;
    }
  }

  .page-home .hero--media-only .hero__video {
    object-position: 62% 50%;
  }
}

/* Android and iPhone portrait screens need a right-shifted focal point so the
   cargo vessel remains visible while cover fills the complete hero. */
@media (max-width: 47.9375rem) {
  .page-home .hero.hero--media-only {
    height: 100vh;
    min-height: 100vh;
    max-height: none;
  }

  @supports (height: 100svh) {
    .page-home .hero.hero--media-only {
      height: 100svh;
      min-height: 100svh;
    }
  }

  @supports (height: 100dvh) {
    .page-home .hero.hero--media-only {
      height: 100dvh;
      min-height: 100dvh;
    }
  }

  .page-home .hero--media-only .hero__video {
    object-fit: cover;
    object-position: 68% 50%;
  }

  .page-home .hero__content,
  .page-home .hero__inner {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 8vw, 3rem) clamp(1.25rem, 5.5vw, 1.5rem)
      clamp(3rem, 11vw, 4rem);
  }

  .page-home .hero__actions,
  .page-home .hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
}

/* Short landscape devices still fill the viewport but use a more central crop. */
@media (max-width: 64rem) and (orientation: landscape) and (max-height: 36rem) {
  .page-home .hero--media-only .hero__video {
    object-position: 58% 50%;
  }
}


/* ========================================================================
   HOMEPAGE HERO HEADING — DUAL-COLOR SAFETRANS TREATMENT
   Changes only the copy layer; hero media, sizing and navigation stay intact.
   ======================================================================== */
.page-home #home-hero .hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  min-height: 100%;
  align-items: center;
  padding-block: clamp(3.5rem, 8vh, 6.5rem);
  pointer-events: none;
}

.page-home #home-hero .hero__copy {
  width: min(100%, 53rem);
}

.page-home #home-hero .hero__eyebrow {
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  color: #C4E31D;
}

.page-home #home-hero .hero__title {
  max-width: 12ch;
  margin: 0;
  font-family: "Manrope", Inter, "Segoe UI", Arial, sans-serif;
  font-size: clamp(3rem, 5.8vw, 5rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.page-home #home-hero .hero__title-line {
  display: block;
}

.page-home #home-hero .hero__title-line--dark {
  color: #FFFFFF;
}

.page-home #home-hero .hero__title-line--brand {
  margin-top: 0.08em;
  color: #C4E31D;
}

@media (max-width: 47.9375rem) {
  .page-home #home-hero .hero__content {
    min-height: 100%;
    justify-content: center;
    padding: clamp(2.5rem, 8vh, 4rem) clamp(1.25rem, 5.5vw, 1.5rem)
      clamp(3rem, 10vh, 5rem);
  }

  .page-home #home-hero .hero__copy {
    width: 100%;
    max-width: 100%;
  }

  .page-home #home-hero .hero__eyebrow {
    margin-bottom: clamp(0.875rem, 3.5vw, 1.25rem);
  }

  .page-home #home-hero .hero__title {
    max-width: none;
    font-size: clamp(1.8rem, 8.5vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
  }

  .page-home #home-hero .hero__title-line {
    white-space: nowrap;
  }
}

@media (max-width: 21.25rem) {
  .page-home #home-hero .hero__title {
    font-size: clamp(1.72rem, 8.35vw, 1.9rem);
  }
}

/* ========================================================================
   HOMEPAGE HEADER + HERO COPY CORRECTIONS
   Scoped to Home so the existing site-wide design system remains unchanged.
   ======================================================================== */

/* Slightly stronger Home-page brand presence without changing header height. */
.page-home .brand img {
  transform: scale(1.06);
  transform-origin: left center;
}

/* Keep the desktop navigation grouped toward the centre/right, with the
   flexible space between the brand and navigation instead of before actions. */
@media (min-width: 75rem) {
  .page-home .nav {
    margin-left: auto;
  }

  .page-home .site-header__actions {
    margin-left: clamp(0.75rem, 1vw, 1rem);
  }

  .page-home .nav__list {
    gap: clamp(0.75rem, 0.9vw, 1rem);
  }

  .page-home .nav__link {
    color: var(--ink);
  }

  .page-home .nav__link:hover,
  .page-home .nav__link.is-active {
    color: var(--dark-deep);
  }
}

/* Tablet uses the existing hamburger navigation; only the logo receives the
   requested small size increase and remains centred in the established row. */
@media (max-width: 74.9375rem) {
  .page-home .brand img {
    transform-origin: center;
  }
}

/* Preserve the existing hero-title scale while adding the requested secondary
   line directly underneath it. */
.page-home #home-hero .hero__support {
  width: min(100%, 42rem);
  margin-top: clamp(0.85rem, 1.5vw, 1.15rem);
  color: rgba(255, 255, 255, 0.9);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: clamp(0.95rem, 1.25vw, 1.125rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.28);
}

@media (max-width: 47.9375rem) {
  .page-home #home-hero .hero__support {
    max-width: 30rem;
    margin-top: clamp(0.7rem, 3vw, 0.95rem);
    font-size: clamp(0.82rem, 3.6vw, 0.98rem);
    line-height: 1.5;
  }
}



/* ========================================================================
   EMBEDDED GOOGLE WEBSITE TRANSLATION — NON-VISUAL SUPPORT LAYER
   Keeps SafeTrans' existing custom language selector as the visible UI while
   preventing Google's injected helper UI from shifting or widening the site.
   ======================================================================== */
.safetrans-translate-mount,
#google_translate_element {
  position: fixed !important;
  left: -10000px !important;
  bottom: 0 !important;
  width: 1px !important;
  height: 1px !important;
  max-width: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd {
  display: none !important;
  visibility: hidden !important;
}

html,
body {
  top: 0 !important;
}

body > .skiptranslate:not(.safetrans-translate-mount) {
  max-width: 100vw !important;
}


/* Homepage sectors: rebuilt to match reference ---------------------------- */
.page-home #industries .sector {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.25rem;
}

.page-home #industries .sector__icon {
  flex: 0 0 3.5rem;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  padding: 0;
}

.page-home #industries .sector__icon img {
  display: block;
  width: 48px;
  height: 48px;
  max-width: 48px;
  max-height: 48px;
  margin: 0;
  object-fit: contain;
  object-position: center;
  transform: none;
}

.page-home #industries .sector__title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  margin: 0;
}

@media (max-width: 63.9375rem) {
  .page-home #industries .sector {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    text-align: left;
  }

  .page-home #industries .sector__icon {
    flex: 0 0 3.25rem;
    width: 3.25rem;
    height: 3.25rem;
  }

  .page-home #industries .sector__icon img {
    width: 44px;
    height: 44px;
    max-width: 44px;
    max-height: 44px;
  }

  .page-home #industries .sector__title {
    min-height: 0;
  }
}

@media (max-width: 26.25rem) {
  .page-home #industries .sector {
    gap: 0.875rem;
  }

  .page-home #industries .sector__icon {
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
  }

  .page-home #industries .sector__icon img {
    width: 40px;
    height: 40px;
    max-width: 40px;
    max-height: 40px;
  }
}


/* ========================================================================
   GLOBAL HEADER ALIGNMENT + APPROVED HOMEPAGE CTA VISUAL
   ======================================================================== */
@media (min-width: 75rem) {
  .site-header__inner,
  .site-header--solid .site-header__inner,
  .site-header.is-scrolled .site-header__inner,
  .site-header--solid.is-scrolled .site-header__inner {
    align-items: center;
  }

  .nav {
    margin-left: auto;
  }

  .site-header__actions {
    margin-left: clamp(0.875rem, 1.35vw, 1.25rem);
  }
}

/* The approved artwork is displayed at its native 1882:836 ratio, so the
   supplied pixels are neither stretched nor cropped. */
.page-home .cta__panel--approved {
  position: relative;
  display: block;
  min-height: 0;
  aspect-ratio: 1882 / 836;
  overflow: hidden;
  background: #C4E31D;
}

.page-home .cta__panel--approved::before,
.page-home .cta__panel--approved::after {
  display: none;
}

.page-home .cta__approved-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Retain the real CTA links over the exact approved artwork, while the
   supplied image remains the sole visible typography/transport composition. */
.page-home .cta__copy--approved-accessible {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  min-height: 0;
  max-width: none;
  padding: 0;
  pointer-events: none;
}

.page-home .cta__copy--approved-accessible .cta__actions {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
}

.page-home .cta__copy--approved-accessible .btn {
  position: absolute;
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0.75rem;
  background: transparent;
  box-shadow: none;
  color: transparent;
  opacity: 0;
  pointer-events: auto;
}

.page-home .cta__copy--approved-accessible .btn:first-child {
  left: 5%;
  top: 63.2%;
  width: 14.6%;
  height: 10.4%;
}

.page-home .cta__copy--approved-accessible .btn:last-child {
  left: 20.45%;
  top: 63.2%;
  width: 13.65%;
  height: 10.4%;
}

.page-home .cta__copy--approved-accessible .btn:focus-visible {
  opacity: 1;
  outline: 3px solid #111814;
  outline-offset: 2px;
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 64rem) {
  .page-home .cta__panel--approved {
    display: block;
    min-height: 0;
  }

  .page-home .cta__copy--approved-accessible {
    min-height: 0;
    padding: 0;
  }
}

@media (max-width: 47.9375rem) {
  .page-home .cta__panel--approved {
    min-height: 0;
  }
}

/* Service CTA image sizing corrections — Air / Road only */
.page-air-freight .cta__ship {
  right: 0;
  bottom: 0;
  width: min(61%, 53rem);
  height: auto;
  max-height: 92%;
  object-fit: contain;
  object-position: right bottom;
}

.page-road-transport .cta__ship {
  right: 1.5%;
  bottom: 0;
  width: min(54%, 44rem);
  height: auto;
  max-height: 91%;
  object-fit: contain;
  object-position: right bottom;
}

@media (max-width: 64rem) {
  .page-air-freight .cta__ship {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(calc(100% - 2.5rem), 47rem);
    max-width: 100%;
    max-height: none;
    margin: 0 auto clamp(1.25rem, 3vw, 2rem);
    object-fit: contain;
    object-position: center bottom;
  }

  .page-road-transport .cta__ship {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(calc(100% - 4rem), 43rem);
    max-width: 100%;
    max-height: none;
    margin: 0 auto clamp(1.25rem, 3vw, 2rem);
    object-fit: contain;
    object-position: center bottom;
  }
}

@media (max-width: 47.9375rem) {
  .page-air-freight .cta__ship {
    position: relative;
    right: auto;
    bottom: auto;
    width: calc(100% - 1.5rem);
    height: auto;
    margin: 0 auto 1rem;
    object-position: center bottom;
  }

  .page-road-transport .cta__ship {
    position: relative;
    right: auto;
    bottom: auto;
    width: calc(100% - 3rem);
    height: auto;
    margin: 0 auto 1.1rem;
    object-position: center bottom;
  }
}

/* Bill of Lading: lost/destroyed/stolen guidance ------------------------- */
.bol-loss-content { max-width: 68rem; margin-top: 2rem; color: var(--body); }
.bol-loss-content h3 { margin-top: 2rem; color: var(--ink); font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.35; }
.bol-loss-content h3:first-child { margin-top: 0; }
.bol-loss-content p { margin-top: .8rem; font-size: .95rem; line-height: 1.75; }
.bol-loss-content ul { display: grid; gap: .75rem; margin-top: 1rem; padding-left: 1.25rem; list-style: disc; }
.bol-loss-content li { padding-left: .25rem; font-size: .9rem; line-height: 1.75; }


/* Final technical container imagery: keep existing card/media dimensions. */
.container-illustration--technical {
  display: grid;
  place-items: center;
  background: #f6f8fb;
}
.container-illustration--technical::before,
.container-illustration--technical::after { display: none !important; }
.container-technical-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
}


/* Air Freight CTA: exact user-supplied approved artwork. */
.page-air-freight .cta__panel--approved-air {
  position: relative;
  display: block;
  min-height: 0;
  aspect-ratio: 1802 / 873;
  overflow: hidden;
  background: #C4E31D;
}
.page-air-freight .cta__panel--approved-air::before,
.page-air-freight .cta__panel--approved-air::after { display: none; }
.page-air-freight .cta__approved-air-image {
  position: absolute; inset: 0; z-index: 1; display: block;
  width: 100%; height: 100%; object-fit: contain; object-position: center;
}
.page-air-freight .cta__copy--approved-air-accessible {
  position: absolute; inset: 0; z-index: 2; display: block;
  min-height: 0; max-width: none; padding: 0; pointer-events: none;
}
.page-air-freight .cta__copy--approved-air-accessible .cta__actions {
  position: absolute; inset: 0; display: block; margin: 0;
}
.page-air-freight .btn--approved-air-hit {
  position: absolute; min-width: 0; min-height: 0; padding: 0; border: 0;
  background: transparent; color: transparent; opacity: 0; pointer-events: auto;
}
.page-air-freight .btn--approved-air-hit:first-child { left: 6.7%; top: 64.5%; width: 14.0%; height: 8.7%; }
.page-air-freight .btn--approved-air-hit:last-child { left: 21.7%; top: 64.5%; width: 11.8%; height: 8.7%; }
.page-air-freight .btn--approved-air-hit:focus-visible {
  opacity: 1; outline: 3px solid #111814; outline-offset: 2px; background: rgba(255,255,255,.08);
}
@media (max-width:64rem) {
  .page-air-freight .cta__panel--approved-air { display:block; min-height:0; }
  .page-air-freight .cta__copy--approved-air-accessible { min-height:0; padding:0; }
}


/* AUG20 FINAL LOGO / SOCIAL / FAQ CORRECTIONS */
/* Keep the supplied Safetrans artwork untouched; normalize its box alignment everywhere. */
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.brand img {
  display: block;
  margin: 0 auto;
  object-position: center center;
  transform-origin: center center;
}

/* Remove the Home-only offset/scale so the same logo alignment is used site-wide. */
.page-home .brand img {
  transform: none !important;
  transform-origin: center center !important;
}

.site-footer__logo-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 12.75rem;
  line-height: 0;
}

.site-footer__logo {
  display: block;
  margin: 0;
  object-position: left center;
  /* Offset only the transparent left padding so the visible logo artwork,
     underline and tagline share the footer content's existing left edge. */
  transform: translateX(-14.67%);
}

/* Keep social icons prominent by default and slightly muted on hover. */
.socials a {
  border-color: rgba(196, 227, 29, 0.72);
  background: rgba(196, 227, 29, 0.12);
  color: #C4E31D;
  box-shadow: inset 0 0 0 1px rgba(196, 227, 29, 0.12);
  opacity: 1;
  filter: brightness(1);
  transition: transform 0.22s var(--ease), border-color 0.2s ease,
    background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

.socials a:hover {
  border-color: rgba(196, 227, 29, 0.36);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(196, 227, 29, 0.68);
  opacity: 0.76;
  filter: brightness(0.84);
}

.socials .ico path {
  stroke: currentColor;
  stroke-width: 0.45px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

/* Preserve both people/faces in the supplied FAQ hero while retaining cover behavior. */
.resource-hero--faq .resource-hero__img {
  object-position: 74% top;
}

@media (max-width: 47.9375rem) {
  .resource-hero--faq .resource-hero__img {
    object-position: 78% top;
  }
}


/* Air Freight CTA final normalization: reuse the same service CTA geometry,
   breakpoints and shared button classes as Sea Freight. The supplied artwork
   remains unchanged and is only windowed inside the standard media area. */
.page-air-freight .cta__ship.cta__air-media {
  right: -1%;
  bottom: -2%;
  width: min(59%, 48.75rem);
  height: 100%;
  max-height: none;
  aspect-ratio: 1252 / 636;
  overflow: hidden;
  object-fit: initial;
  object-position: initial;
}

.page-air-freight .cta__air-media-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: right center;
  transform: scale(1.55);
  transform-origin: right center;
}

@media (max-width: 64rem) {
  .page-air-freight .cta__ship.cta__air-media {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(calc(100% - 2rem), 48rem);
    max-width: 100%;
    height: auto;
    max-height: none;
    margin: 0 auto clamp(1.25rem, 3vw, 2rem);
    aspect-ratio: 1252 / 636;
  }

  .page-air-freight .cta__air-media-image {
    transform: scale(1.65);
  }
}

@media (max-width: 47.9375rem) {
  .page-air-freight .cta__ship.cta__air-media {
    right: auto;
    bottom: auto;
    width: calc(100% - 1rem);
    height: auto;
    margin-bottom: 1rem;
    aspect-ratio: 1252 / 636;
  }
}

/* AUG21 FINAL — Air Freight CTA seamless image/background integration */
.page-air-freight .cta__panel {
  isolation: isolate;
}

.page-air-freight .cta__ship.cta__air-media {
  right: 0;
  bottom: 0;
  width: min(59%, 48.75rem);
  height: 100%;
  max-height: none;
  overflow: hidden;
  background: transparent;
  filter: none;
  opacity: 1;
}

.page-air-freight .cta__ship.cta__air-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--brand) 0%,
    rgba(196, 227, 29, 0.98) 7%,
    rgba(196, 227, 29, 0.86) 14%,
    rgba(196, 227, 29, 0.45) 21%,
    rgba(196, 227, 29, 0.08) 28%,
    rgba(196, 227, 29, 0) 35%
  );
}

.page-air-freight .cta__air-media-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: right center;
  transform: scale(1.55);
  transform-origin: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.56) 14%, #000 28%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.56) 14%, #000 28%, #000 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

@media (max-width: 64rem) {
  .page-air-freight .cta__ship.cta__air-media {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    height: clamp(17rem, 42vw, 23rem);
    margin: 0;
    aspect-ratio: auto;
  }

  .page-air-freight .cta__ship.cta__air-media::before {
    background: linear-gradient(
      180deg,
      var(--brand) 0%,
      rgba(196, 227, 29, 0.95) 12%,
      rgba(196, 227, 29, 0.58) 24%,
      rgba(196, 227, 29, 0.14) 34%,
      rgba(196, 227, 29, 0) 42%
    );
  }

  .page-air-freight .cta__air-media-image {
    transform: none;
    object-position: center bottom;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.72) 18%, #000 40%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.72) 18%, #000 40%, #000 100%);
  }
}

@media (max-width: 47.9375rem) {
  .page-air-freight .cta__ship.cta__air-media {
    width: 100%;
    height: clamp(14rem, 58vw, 18rem);
    margin: 0;
  }
}

/* AUG21 — Air Freight CTA responsive duplicate-content fix.
   The supplied CTA artwork contains its own left-side copy. On tablet/mobile,
   keep that embedded copy outside the media viewport so only the real HTML CTA
   copy/buttons render once, matching the other service-page CTA structure. */
@media (max-width: 64rem) {
  .page-air-freight .cta__ship.cta__air-media {
    overflow: hidden;
  }

  .page-air-freight .cta__air-media-image {
    object-fit: cover;
    object-position: right center;
    transform: scale(1.85);
    transform-origin: right center;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.72) 16%, #000 38%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.72) 16%, #000 38%, #000 100%);
  }
}

@media (max-width: 47.9375rem) {
  .page-air-freight .cta__air-media-image {
    object-position: right center;
    transform: scale(1.9);
    transform-origin: right center;
  }
}


/* V2 correction: subtle Home-only mobile header sizing. */
@media (max-width: 47.9375rem) {
  .page-home .site-header .brand img {
    transform: scale(1.08) !important;
  }
  .page-home .site-header .nav__link { font-size: 1rem; }
  .page-home .site-header .mega__link { font-size: 0.875rem; }
  .page-home .site-header__actions > .btn {
    font-size: clamp(0.6875rem, 2.75vw, 0.7625rem);
  }
}
@media (max-width: 21.25rem) {
  .page-home .site-header .nav__link { font-size: 0.875rem; }
}