/*
  Transportation Services (redesign) scoped ts-* styles
  - Loads only on the "Transportation Services" template (see functions.php)
  - Extends the globally-loaded landing-page.css
*/

.gscf7-frontend-gdpr-notice { display: none; }

.ts-page {
  font-family: 'Poppins';
  overflow-x: hidden;

  /* Brand tokens */
  --ts-navy: #012b55;
  --ts-orange: #dc4e20;
  --ts-orange-400: #f16f45;
  --ts-teal: #002128;
  --ts-ink: #333333;
  --ts-n100: #f9f9f9;
  --ts-n500: #a4a4a4;
}

/* Service section */
.ts-services { padding: 0 30px; max-width: 1440px; background: #fff; }
.ts-services__title { margin: 0 0 16px; }
.ts-page .ts-services__header { max-width: 1044px; margin: 0 auto 40px; text-align: center; }
.ts-page .ts-services__lead { color: var(--ts-ink); font-size: 16px; line-height: 25px; }
.ts-services__lead p { margin: 0; }
.ts-page .ts-services__note { margin: 12px 0 0; color: var(--ts-orange); font-weight: 700; font-size: 16px; line-height: 25px; }
.ts-page .ts-services__inner {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
}

/* Service section: Slider */
.ts-services .lp-services__track { height: auto; align-items: stretch; }
.ts-page .ts-services .lp-services__slider { max-width: 1240px; margin: 0 auto; overflow: hidden; }
.ts-page .ts-services .lp-services__header { max-width: 1044px; margin-left: auto; margin-right: auto; }
.ts-page .ts-services__slider { max-width: none; width: 100%; margin: 0; overflow: hidden; }
.ts-page .ts-services__viewport { overflow: hidden; }
.ts-page .ts-services__track { display: flex; gap: 24px; transition: transform .45s ease; will-change: transform; }
.ts-page .ts-services .ts-services__slide { flex: 0 0 calc((100% - 48px) / 3); min-width: 0; max-width: none; margin-right: 0; }

/* Service section: Card */
.ts-page .ts-service-card {
  position: relative;
  display: block;
  aspect-ratio: 431 / 606;
  overflow: hidden;
  border-radius: 4px;
  text-decoration: none;
  background: #f9f9f9;
  box-shadow: 5px 5px 10px rgba(0,0,0,.10);
}
.ts-page .ts-service-card__media {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: auto;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  transition: height .4s ease, clip-path .4s ease;
}
.ts-page .ts-service-card:hover .ts-service-card__media,
.ts-page .ts-service-card:focus-within .ts-service-card__media,
.ts-page .ts-service-card.is-open .ts-service-card__media {
  height: 43.9%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%, 0 84%);
}
.ts-page .ts-service-card__img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  transition: transform .5s ease;
}
.ts-page .ts-service-card:hover .ts-service-card__img,
.ts-page .ts-service-card:focus-visible .ts-service-card__img { transform: scale(1.05); }
.ts-page .ts-service-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: 28px;
  background: linear-gradient(180deg, rgba(1,43,85,0) 42%, rgba(1,43,85,.85) 100%);
  transition: opacity .4s ease;
}
.ts-page .ts-service-card:hover .ts-service-card__overlay,
.ts-page .ts-service-card.is-open .ts-service-card__overlay { opacity: 0; pointer-events: none; }
.ts-page .ts-service-card__title { margin: 0; color: #fff; font-size: 28px; line-height: 1.2; font-weight: 700; overflow-wrap: anywhere; }
.ts-page .ts-service-card__hover {
  position: absolute;
  top: 44%; left: 0; right: 0; bottom: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 26px 28px;
  background: transparent;
  color: #333;
  opacity: 1;
  transition: none;
}
.ts-page .ts-service-card:hover .ts-service-card__hover,
.ts-page .ts-service-card:focus-within .ts-service-card__hover,
.ts-page .ts-service-card.is-open .ts-service-card__hover { opacity: 1; z-index: 3; }
.ts-page .ts-service-card__hover-title { margin: 0; color: #012b55; font-size: 32px; line-height: 1.05; font-weight: 700; }
.ts-page .ts-service-card__desc {
  overflow: hidden;
  margin: 0;
  display: -webkit-box;
  color: #333;
  font-size: 16px;
  line-height: 25px;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.ts-page .ts-service-card__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ts-orange);
  font-weight: 700;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Service section: Slider controls */
.ts-page .ts-services__controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; }
.ts-page .ts-services__arrow { border: none; background: none; cursor: pointer; padding: 0; line-height: 0; }
.ts-page .ts-services__dots { display: flex; gap: 8px; }
.ts-page .ts-services__dot {
  border-radius: 50%;
  border: 1px solid var(--ts-orange);
  padding: 0;
  min-width: 0;
  width: 15px;
  height: 15px;
  background: #fff;
  cursor: pointer;
}
.ts-page .ts-services__dot.is-active { background: var(--ts-orange); }

/* Service section: Responsiveness */
@media (max-width: 1024px) {
  .ts-page .ts-services .ts-services__slide { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 767px) {
  .ts-page .ts-services__slider { width: 100%; max-width: none; margin-inline: auto; padding: 0; }
  .ts-page .ts-services .ts-services__slide { flex: 0 0 100%; }
  .ts-page .ts-service-card__title { font-size: 24px; }
  .ts-page .ts-service-card__hover-title { font-size: 26px; }
}

/* Hero section */
.ts-page .ts-hero {
  position: relative;
  z-index: 2;
  overflow: visible;
  background-color: var(--ts-navy);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  color: #fff;
}
.ts-page .ts-hero__inner {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  min-height: 695px;
  display: flex;
  align-items: stretch;
  overflow: visible;
}
.ts-page .ts-hero__inner > * { min-width: 0; }
.ts-page .ts-hero__content {
  position: relative;
  z-index: 3;
  flex: 0 0 50%;
  max-width: 700px;
  min-width: 0;
  background: var(--ts-navy);
  padding: 68px 62px calc(48px + 72px + 78px) 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
}
/* Bleed the navy panel to the left screen edge on contained/ultrawide viewports */
.ts-page .ts-hero__content::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 100vw;
  background: var(--ts-navy);
}
.ts-page .ts-hero__title {
  margin: 0;
  color: #fff;
  font-size: 42px;
  line-height: 46px;
  font-weight: 700;
  text-transform: uppercase;
}
.ts-page .ts-hero__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.ts-page .ts-hero__feature { display: flex; align-items: flex-start; gap: 18px; }
.ts-page .ts-hero__feature-icon {
  flex: 0 0 50px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  width: 50px;
  height: 50px;
  background: var(--ts-orange);
}
.ts-page .ts-hero__feature-icon svg { width: 30px; height: 30px; }
.ts-page .ts-hero__feature-text { color: #fff; font-size: 16px; line-height: 25px; flex: 1 1 auto; min-width: 0; }
.ts-page .ts-hero__feature-text strong { color: #fff; font-weight: 700; }

/* Hero section: Form card */
.ts-page .ts-hero__form {
  position: absolute;
  z-index: 6;
  scroll-margin-top: 120px;
  top: 68px;
  right: 76px;
  width: 572px;
  max-width: 572px;
  min-width: 0;
  margin: 0;
  background: #012b55;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 2px solid #fff;
  border-radius: 10px;
  padding: 32px;
}
.ts-page .ts-hero__form-title { margin: 0 0 12px; text-align: center; color: #fff; font-size: 32px; line-height: 32px; font-weight: 700; text-transform: uppercase; }
.ts-page .ts-hero__form-body,
.ts-page .ts-hero__form .get-quote-form-colum,
.ts-page .ts-hero__form .wpcf7,
.ts-page .ts-hero__form .wpcf7 form { width: 100%; }
.ts-page .ts-hero__form .wpcf7,
.ts-page .ts-hero__form .wpcf7-form,
.ts-page .ts-hero__form .get-quote-form-colum,
.ts-page .ts-hero__form .row,
.ts-page .ts-hero__form .form-outline,
.ts-page .ts-hero__form .formfield { background: transparent; }
.ts-page .ts-hero__form .get-quote-form-colum .form-outline { margin-bottom: 12px; }
.ts-page .ts-hero__form .get-quote-form-colum .form-outline label { display: block; color: #fff; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.ts-page .ts-hero__form .get-quote-form-colum .form-outline .form-control { width: 100%; background: #fff; color: #333; border: 1px solid #000; border-radius: 4px; padding: 10px; font-size: 14px; min-width: 0; }
.ts-page .ts-hero__form .get-quote-form-colum textarea { min-height: 90px; resize: vertical; }
.ts-page .ts-hero__form .get-quote-form-colum .form-outline .form-control::placeholder { color: #a4a4a4; opacity: 1; }
.ts-page .ts-hero__form .get-quote-form-colum .form-outline.form-select .wpcf7-select {
  background-image: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9L12 15L18 9' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px;
}
.ts-page .ts-hero__form .get-quote-form-colum .row { display: flex; gap: 12px; align-items: flex-start; }
.ts-page .ts-hero__form .get-quote-form-colum .row > .form-outline { flex: 1 1 0; min-width: 0; width: auto; margin-bottom: 12px; }
.ts-page .ts-hero__form .get-quote-form-colum .wpcf7-submit,
.ts-page .ts-hero__form .get-quote-form-colum .form-btn button {
  width: 100%;
  margin-top: 8px;
  background: var(--ts-orange);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  padding: 16px;
  cursor: pointer;
  transition: background .2s ease;
}
.ts-page .ts-hero__form fieldset,
.ts-page .ts-hero__form .hidden-fields-container { border: 0; margin: 0; padding: 0; min-width: 0; }
.ts-page .ts-hero__form .wpcf7-response-output { border: 0; margin: 0; padding: 0; }
.ts-page .ts-hero__form .no-js { border: 0; background: transparent; border-radius: 0; overflow: visible; }

/* Hero section: Overlaid logo bar (seamless marquee under the form) */
.ts-page .ts-hero__logobar {
  position: absolute;
  z-index: 4;
  left: 76px;
  right: auto;
  bottom: 78px;
  width: calc(100% - 624px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 0 7px rgba(0,0,0,.25);
  padding: 16px 20px;
  overflow: hidden;
}
/* Edge fade via gradient overlays */
.ts-page .ts-hero__logobar::before,
.ts-page .ts-hero__logobar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  z-index: 2;
  pointer-events: none;
}
.ts-page .ts-hero__logobar::before {
  left: 0;
  background: linear-gradient(90deg, #fff, rgba(255,255,255,0));
}
.ts-page .ts-hero__logobar::after {
  right: 0;
  background: linear-gradient(270deg, #fff, rgba(255,255,255,0));
}
.ts-page .ts-hero__logobar-viewport {
  overflow: hidden;
}
.ts-page .ts-hero__logobar-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: ts-hero-marquee 30s linear infinite;
  /* No will-change / backface-visibility / translate3d:
		- those force the wide strip onto a single GPU texture
		that exceeds WebKit's limit at retina DPR */
}
.ts-page .ts-hero__logobar-set {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 33px;
  padding-right: 33px;
}
.ts-page .ts-hero__logo {
  width: auto !important;
  height: 40px !important;
  max-width: 132px !important;
  max-height: 40px;
  object-fit: contain;
  flex: 0 0 auto;
}

@keyframes ts-hero-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ts-page .ts-hero__logobar-track { animation: none; }
}

/* Hero section: Responsiveness */
@media (max-width: 1280px) {
  .ts-page .ts-hero__content { flex-basis: 55%; padding-left: 48px; padding-right: 38px; }
  .ts-page .ts-hero__form { right: 40px; width: 480px; max-width: 480px; }
  .ts-page .ts-hero__logobar { left: 40px; width: calc(100% - 460px); }
}
@media (max-width: 1100px) {
  .ts-page .ts-hero__content { flex-basis: 48%; }
}
@media (max-width: 991px) {
  /* Stacked: navy content block on top, logo bar + form sit over the photo below */
  .ts-page .ts-hero__inner { flex-direction: column; align-items: stretch; min-height: 0; }
  .ts-page .ts-hero__content { order: 1; flex: 0 0 auto; max-width: none; justify-content: flex-start; padding: 40px 30px; gap: 26px; }
  .ts-page .ts-hero__content::before { display: none; }
  .ts-page .ts-hero__logobar { order: 2; position: relative; z-index: 4; left: auto; right: auto; bottom: auto; width: auto; margin: 0; border-radius: 0; }
  .ts-page .ts-hero__form { order: 3; position: relative; z-index: 6; top: auto; right: auto; width: auto; max-width: none; margin: 40px 30px; }
  .ts-page .ts-hero__title { font-size: 32px; line-height: 1.15; max-width: none; }
  .ts-page .ts-hero__feature { max-width: none; align-items: center; }
}
@media (max-width: 767px) {
  .ts-page .ts-hero__title { overflow-wrap: anywhere; }
  .ts-page .ts-hero__logo { height: 34px !important; max-width: 108px !important; }
  .ts-page .get-quote-form-colum .row { flex-wrap: wrap; }
  .ts-page .get-quote-form-colum .form-outline,
  .ts-page .get-quote-form-colum .form-outline.form-outline-2 { flex: 1 1 100%; min-width: 0; }
  .ts-page .get-quote-form-colum .form-control { width: 100%; max-width: 100%; min-width: 0; }
}
@media (max-width: 575px) {
  .ts-page .ts-hero__form { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 540px) {
  .ts-page .ts-hero__feature { align-items: flex-start; }
}
@media (max-width: 479px) {
  .ts-page .ts-hero__title { font-size: 28px; }
  .ts-page .ts-hero__form .get-quote-form-colum .row { flex-direction: column; gap: 0; }
  .ts-page .ts-hero__form .get-quote-form-colum .row > .form-outline { flex: 1 1 auto; width: 100%; }
}

/* Breadcrumb section */
.ts-page .ts-breadcrumb { overflow: hidden; line-height: 0; background: #fff; }
.ts-page .ts-breadcrumb .ts-breadcrumb__bar.lp-bc {
  transform: scaleX(-1);
  width: calc(100% - 170px);
  max-width: none;
  height: 80px;
  margin-left: auto;
  margin-right: 0;
}
.ts-page .ts-breadcrumb .lp-bc__wrap { padding: 0; }

/* Breadcrumb section: Responsiveness */
@media (max-width: 767px) {
  .ts-page .ts-breadcrumb .ts-breadcrumb__bar.lp-bc { height: 64px; }
}
@media (max-width: 443px) {
  .ts-page .ts-breadcrumb .ts-breadcrumb__bar.lp-bc {
    min-height: unset;
    background: linear-gradient(
      90deg,
      var(--accent) 0 calc(100% - 92px),
      transparent calc(100% - 92px) 100%
    );
  }
  .ts-page .ts-breadcrumb .ts-breadcrumb__bar::before {
    right: 113px;
    width: 16px;
  }
  .ts-page .ts-breadcrumb .ts-breadcrumb__bar::after {
    right: 28px;
    width: 92px;
  }
}

/* Testimonials section */
.ts-page .ts-testimonials {
  position: relative;
  overflow: hidden;
  padding: 0 30px;
  background: linear-gradient(180deg, #fff 0, #fff 45%, var(--ts-orange) 45%, var(--ts-orange) 100%);
}
.ts-page .ts-testimonials__inner {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding: 72px 0;
}
.ts-page .ts-testimonials__title { text-align: center; margin: 0 auto 44px; }
.ts-page .ts-testimonials__viewport { overflow: hidden; }
.ts-page .ts-testimonials__track {
  display: flex;
  gap: 24px;
  align-items: stretch;
  transition: transform .4s ease;
  will-change: transform;
  cursor: grab;
}
.ts-page .ts-testimonials__track:active { cursor: grabbing; }
.ts-page .ts-testimonials__slide { flex: 0 0 calc((100% - 48px) / 3); }
.ts-page .ts-testi-card {
  margin: 0;
  height: 100%;
  background: #fff;
  border: 1px solid var(--ts-orange);
  border-radius: 0;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
.ts-page .ts-testi-card__top { display: flex; flex-direction: column; gap: 20px; }
.ts-page .ts-testi-card__stars { display: flex; gap: 6px; }
.ts-page .ts-testi-card__quote { margin: 0; color: var(--ts-ink); font-size: 16px; line-height: 26px; }
.ts-page .ts-testi-card__meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  color: var(--ts-navy);
  font-size: 15px;
}
.ts-page .ts-testi-card__meta strong { color: var(--ts-navy); font-weight: 700; }
.ts-page .ts-testi-card__dot { color: var(--ts-orange); font-weight: 700; }

/* Testimonials section: Responsiveness */
@media (min-width: 1400.01px) {
  .ts-page .ts-breadcrumb .ts-breadcrumb__bar.lp-bc { width: calc((100% - 1440px) / 2 + (1440px - 170px)); }
}
@media (max-width: 1180px) {
  .ts-page .ts-testimonials__slide { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 767px) {
  .ts-page .ts-testimonials__slide { flex: 0 0 100%; }
  .ts-page .ts-breadcrumb .ts-breadcrumb__bar.lp-bc { width: calc(100% - 24px); }
}

/* Stats section */
.ts-page .ts-stats { padding: 0 30px; background: #fff; }
.ts-page .ts-stats .ts-stats__inner { max-width: 1240px; margin: 0 auto; padding: 72px 0 36px; }
.ts-page .ts-stats__header { text-align: center; margin-bottom: 44px; }
.ts-page .ts-stats .ts-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.ts-page .ts-stats__value {
  font-size: 72px;
  line-height: 75px;
  font-weight: 800;
  color: var(--ts-navy);
}
.ts-page .ts-stats__label {
  margin: 10px auto 0;
  max-width: 220px;
  color: #333;
  font-size: 16px;
  line-height: 25px;
}

/* Stats section: Responsiveness */
@media (max-width: 767px) {
  .ts-page .ts-stats .ts-stats__grid { gap: 32px; }
  .ts-page .ts-stats__value { font-size: 52px; line-height: 1.05; }
}
@media (max-width: 575px) {
  .ts-page .ts-stats .ts-stats__grid { grid-template-columns: 1fr; }
}

/* FAQ section */
.ts-page .ts-faq.lp-section { padding-top: 40px; padding-left: 30px; padding-right: 30px; }
.ts-page .ts-faq.lp-section .lp-faq { padding: 0; max-width: 840px; }
.ts-page .ts-faq__cta { text-align: center; margin-top: 36px; }
.ts-page .ts-faq__cta-btn { min-width: 300px; text-transform: uppercase; }

/* FAQ section: Responsiveness */
@media (max-width: 767px) {
  .ts-page .ts-faq__cta-btn { min-width: 0; width: 100%; }
}

/* CTA section */
.ts-page .ts-cta { margin: 0; padding: 0 30px; background-color: var(--ts-navy); }
.ts-page .ts-cta .ts-cta__inner { padding: 72px 0; }