/* FleetConnect247 solution-page system. The existing style.css remains the brand baseline. */
:root {
  --solution-ink: #1a2332;
  --solution-muted: #5b6777;
  --solution-cyan: #03cece;
  --solution-cyan-soft: #5bc5cd;
  --solution-blue: #3398db;
  --solution-deep: #0e4d6e;
  --solution-line: #e2edf2;
  --solution-glass: rgba(255, 255, 255, .78);
  --solution-shadow: 0 20px 60px rgba(19, 94, 130, .13);
}

.solution-page {
  color: var(--solution-ink);
  background: #fff;
}

.solution-page a:focus-visible,
.solution-page button:focus-visible {
  outline: 3px solid rgba(3, 206, 206, .6);
  outline-offset: 3px;
}

/* Hero */
.hero:not(.thermo-hero) {
  background: linear-gradient(125deg, #0e4d6e, #1b7fb8 52%, #2eb8d6);
}

.feature-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(27, 127, 184, .3);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.feature-link:hover { color: #1b7fb8; text-decoration-color: currentColor; }

.solution-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 8.8vw, 112px) 0 clamp(66px, 8vw, 100px);
  background:
    radial-gradient(ellipse at 78% 15%, rgba(91, 197, 205, .20), transparent 37%),
    radial-gradient(ellipse at 8% 100%, rgba(51, 152, 219, .11), transparent 34%),
    linear-gradient(132deg, #fbfeff 0%, #f2fbfd 52%, #eaf7fb 100%);
}

.solution-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .38;
  background-image: radial-gradient(rgba(27, 127, 184, .18) .7px, transparent .7px);
  background-size: 18px 18px;
  mask-image: linear-gradient(90deg, transparent, #000 40%, #000 100%);
}

.solution-hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr);
  align-items: center;
  gap: clamp(28px, 5vw, 70px);
}

.solution-hero__copy {
  max-width: 720px;
}

.solution-hero__copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  padding: 7px 13px;
  border: 1px solid rgba(27, 127, 184, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: #1b7fb8;
  letter-spacing: .09em;
}

.solution-hero__copy .eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--solution-cyan);
  box-shadow: 0 0 0 4px rgba(3, 206, 206, .12);
}

.solution-hero h1 {
  max-width: 820px;
  margin: 0 0 16px;
  color: #142c3c;
  font-size: clamp(2.25rem, 4.5vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 600;
  text-wrap: balance;
}

.solution-hero__subtitle {
  max-width: 760px;
  margin: 0 0 16px;
  color: #1b7fb8;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.35;
  font-weight: 600;
  text-wrap: balance;
}

.solution-hero__lead {
  max-width: 760px;
  margin: 0;
  color: var(--solution-muted);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.8;
}

.solution-hero__actions {
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.solution-page .btn {
  gap: 10px;
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
}

.solution-page .btn:hover {
  transform: translateY(-2px);
}

.solution-page .btn-primary {
  color: #fff;
  background: linear-gradient(105deg, #1b7fb8, #2eb8d6 63%, #03bfc9);
  box-shadow: 0 12px 26px rgba(27, 127, 184, .23);
}

.solution-page .btn-primary:hover {
  box-shadow: 0 16px 34px rgba(27, 127, 184, .30);
}

.solution-page .btn-ghost {
  border-color: rgba(27, 127, 184, .20);
  box-shadow: 0 7px 20px rgba(27, 127, 184, .06);
}

/* CSS/SVG product illustration: local, light and fast to load. */
.hero-art {
  position: relative;
  width: min(100%, 540px);
  min-height: 400px;
  margin: 0 auto;
  perspective: 1100px;
  animation: art-enter .9s cubic-bezier(.2, .8, .2, 1) both;
}

.hero-img-new{
    border-color: rgba(75, 120, 219, .18);
    color: #42bce2;
    background: rgba(255, 255, 255, .88);
    border-radius: 15px;
    padding: 7px;
    box-shadow: 0 11px 28px rgb(50 88 142 / 28%);
}
.hero-art img {
    border-radius: 10px;
    border: 1px solid ;
    border-color: rgba(75, 120, 219, .18);
    color: #42bce2;
    background: rgba(255, 255, 255, .88);
}

.hero-art__halo {
  position: absolute;
  inset: 6% 3% 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(3, 206, 206, .21), rgba(51, 152, 219, .09) 44%, transparent 70%);
  filter: blur(2px);
  animation: halo-breathe 6s ease-in-out infinite alternate;
}

.hero-art__window {
  position: absolute;
  inset: 42px 12px 30px 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(248,253,254,.93));
  box-shadow: 0 28px 80px rgba(18, 81, 111, .20), 0 3px 12px rgba(24, 68, 90, .07);
  transform: rotateY(-7deg) rotateX(2deg) rotateZ(-1.2deg);
  animation: art-float 7s ease-in-out infinite;
}

.art-toolbar {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 17px;
  border-bottom: 1px solid #eaf1f4;
  background: rgba(255,255,255,.8);
}

.art-brand { display: flex; gap: 4px; }
.art-brand i { width: 6px; height: 6px; border-radius: 50%; background: #b3c6cf; }
.art-brand i:first-child { background: #45c7ce; }
.art-toolbar-line { width: 34%; height: 6px; border-radius: 6px; background: #edf3f5; }
.art-toolbar-dot { width: 19px; height: 19px; margin-left: auto; border-radius: 50%; background: linear-gradient(135deg, #e4f7f7, #cde9f5); }

.art-layout {
  display: grid;
  grid-template-columns: 50px 1fr;
  height: calc(100% - 46px);
}

.art-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding-top: 21px;
  border-right: 1px solid #edf2f4;
  background: #fbfdfe;
}

.art-rail i {
  width: 17px;
  height: 17px;
  border: 1px solid #d6e7ec;
  border-radius: 5px;
  background: linear-gradient(135deg, #fff, #eaf9fa);
}

.art-rail i:nth-child(2), .art-rail i:nth-child(4) {
  border-radius: 50%;
  background: #ecf7fb;
}

.art-rail i:nth-child(3) {
  border-color: transparent;
  background: linear-gradient(135deg, #03cece, #3398db);
  box-shadow: 0 4px 10px rgba(3, 150, 190, .2);
}

.art-main { min-width: 0; padding: 18px 18px 14px; }
.art-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.art-stats span {
  height: 42px;
  border: 1px solid #edf2f4;
  border-radius: 9px;
  background: linear-gradient(90deg, #f7fbfc 0 44%, #fff 44% 100%);
}
.art-stats span:nth-child(2) { background: linear-gradient(90deg, #edf9fa 0 38%, #fff 38% 100%); }
.art-stats span:nth-child(3) { background: linear-gradient(90deg, #eef6fc 0 51%, #fff 51% 100%); }

.art-map {
  position: relative;
  height: 190px;
  margin-top: 11px;
  overflow: hidden;
  border: 1px solid #eaf1f4;
  border-radius: 12px;
  background:
    linear-gradient(31deg, transparent 46%, rgba(255,255,255,.9) 47% 50%, transparent 51%),
    linear-gradient(150deg, transparent 44%, rgba(255,255,255,.9) 45% 48%, transparent 49%),
    #f0f8fa;
}

.art-map::before,
.art-map::after {
  content: "";
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 17px;
  background: rgba(255,255,255,.53);
  transform: rotate(24deg);
}

.art-map::before { left: 12%; top: 12%; }
.art-map::after { right: 9%; bottom: 10%; width: 70px; height: 40px; }
.art-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.art-road { fill: none; stroke: #d5e9ee; stroke-width: 10; stroke-linecap: round; }
.art-road--soft { stroke: #fff; stroke-width: 7; opacity: .95; }
.art-route-line {
  fill: none;
  stroke: #03bfc9;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 8 9;
  animation: route-dash 15s linear infinite;
}
.art-pin { fill: #fff; stroke: #1b7fb8; stroke-width: 4; filter: drop-shadow(0 3px 4px rgba(27,127,184,.25)); }
.art-pin:nth-of-type(3) { stroke: #03bfc9; }

.art-footer { display: grid; grid-template-columns: 1.3fr .8fr 1fr .75fr; gap: 9px; margin-top: 12px; }
.art-footer span { height: 7px; border-radius: 9px; background: #e8f1f4; }
.art-footer span:nth-child(2) { background: #c9eff0; }
.art-footer span:nth-child(3) { background: #e2f1f9; }

.art-float {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 13px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 30px rgba(24, 92, 119, .16);
  backdrop-filter: blur(10px);
}

.art-float--one { top: 17px; right: -2px; animation: float-soft 5.2s ease-in-out infinite; }
.art-float--two { left: -4px; bottom: 27px; animation: float-soft 6s ease-in-out infinite reverse; }
.art-float i { width: 19px; height: 19px; flex: 0 0 19px; border-radius: 50%; background: linear-gradient(145deg, #03cece, #3398db); box-shadow: 0 0 0 5px rgba(3,206,206,.1); }
.art-float b { height: 5px; flex: 1; border-radius: 8px; background: #dcebf0; }
.art-float b:last-child { position: absolute; left: 38px; right: 10px; bottom: 10px; height: 4px; background: #edf3f5; }

.art-orbit {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(27, 127, 184, .13);
  border-radius: 50%;
  transform: rotate(-25deg);
}
.art-orbit--one { width: 94%; height: 62%; left: 2%; top: 19%; }
.art-orbit--two { width: 76%; height: 45%; left: 10%; top: 27%; border-style: dashed; opacity: .7; }

.hero-art--camera .art-route-line { stroke: #3398db; }
.hero-art--camera .art-pin { stroke: #03cece; }
.hero-art--fuel .art-route-line { stroke: #45bdc5; }
.hero-art--public .art-route-line { stroke: #197caa; }
.hero-art--maintenance .art-route-line { stroke: #2eb8d6; }
.hero-art--route .art-route-line { stroke-width: 5; }

/* About-only map delivery vehicle; the marker follows the illustrated route in both directions. */
.hero-art--about-truck .art-route-line { stroke:#10b7bf;stroke-width:5;stroke-dasharray:7 8; }
.hero-art--about-truck .about-truck-marker { filter:drop-shadow(0 3px 4px rgba(14,77,110,.28)); }
.hero-art--about-truck .about-truck__halo { fill:rgba(3,206,206,.16);stroke:rgba(3,170,190,.38);stroke-width:1.2; }
.hero-art--about-truck .about-truck__cargo { fill:#0e4d6e;stroke:#fff;stroke-width:1.5; }
.hero-art--about-truck .about-truck__cab { fill:#3398db;stroke:#fff;stroke-width:1.5;stroke-linejoin:round; }
.hero-art--about-truck .about-truck__window { fill:#dff8fa;stroke:#fff;stroke-width:.8;stroke-linejoin:round; }
.hero-art--about-truck .about-truck__wheel { fill:#163f56;stroke:#fff;stroke-width:1.4; }

.solution-hero__blob {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(3, 206, 206, .1);
  filter: blur(2px);
}
.solution-hero__blob--one { width: 180px; height: 180px; right: 37%; top: -110px; }
.solution-hero__blob--two { width: 96px; height: 96px; left: 48%; bottom: 2%; background: rgba(51, 152, 219, .10); }

/* Long-form content sections */
.content-section {
  position: relative;
  padding: clamp(58px, 7.5vw, 92px) 0;
  overflow: hidden;
}

.content-section--white { background: #fff; }
.content-section--tint {
  background:
    radial-gradient(ellipse at 92% 50%, rgba(3,206,206,.075), transparent 38%),
    linear-gradient(180deg, #f5fbfd, #f0f9fb);
}

.section-heading {
  max-width: 820px;
  margin: 0 auto 36px;
  text-align: center;
}

.section-heading .eyebrow {
  margin-bottom: 12px;
  color: #1b7fb8;
}

.section-heading h2 {
  margin: 0 auto 14px;
  color: #172f40;
  font-size: clamp(1.75rem, 3.1vw, 2.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.section-intro {
  max-width: 780px;
  margin: 0 auto;
  color: var(--solution-muted);
  font-size: 1rem;
  line-height: 1.8;
}

.section-subheading {
  margin: 24px 0 -16px;
  color: #1b7fb8;
  font-weight: 600;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

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

.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  padding: 27px 25px 25px;
  overflow: hidden;
  border: 1px solid rgba(213, 230, 237, .9);
  border-radius: 18px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 8px 28px rgba(18, 76, 101, .055);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25px;
  width: 42px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #03cece, #3398db);
  transition: width .28s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  border-color: rgba(91,197,205,.45);
  box-shadow: 0 18px 42px rgba(18, 76, 101, .11);
}

.feature-card:hover::before { width: calc(100% - 50px); }

.feature-card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 39px;
  margin: 0 0 17px;
  border-radius: 12px;
  color: #167ea8;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  background: linear-gradient(135deg, #e6fbfb, #eaf4fb);
}

.feature-card h3 {
  margin: 0 0 13px;
  color: #1b2c3a;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
}

.feature-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-list li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr)!important;
  gap: 19px!important;
  align-items: start;
  color: var(--solution-muted);
  font-size: .91rem;
  line-height: 1.7;
}

.feature-list__dot {
  width: 6px;
  height: 6px;
  margin-top: .62em;
  border-radius: 50%;
  background: linear-gradient(135deg, #03cece, #3398db);
  box-shadow: 0 0 0 3px rgba(3, 206, 206, .09);
}

.story-panel {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 42px) clamp(24px, 5vw, 52px);
  border: 1px solid #deedf2;
  border-radius: 20px;
  background: linear-gradient(120deg, #fff, #f7fcfd);
  box-shadow: 0 15px 40px rgba(18, 76, 101, .075);
}

.story-panel p {
  margin: 0;
  color: #526777;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.85;
}

.story-panel__accent {
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 0;
  width: 4px;
  border-radius: 0 5px 5px 0;
  background: linear-gradient(180deg, #03cece, #3398db);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step-card {
  position: relative;
  min-height: 215px;
  padding: 25px 23px;
  border: 1px solid #e0edf1;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(18, 76, 101, .055);
  transition: transform .28s ease, box-shadow .28s ease;
}

.step-card:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(18,76,101,.1); }
.step-card__index {
  display: block;
  margin-bottom: 27px;
  color: #1b9cb7;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.step-card__index::after {
  content: "";
  display: block;
  width: 37px;
  height: 1px;
  margin-top: 13px;
  background: linear-gradient(90deg, #03cece, #3398db);
}
.step-card h3 { margin: 0 0 8px; color: #1b2c3a; font-size: 1rem; line-height: 1.4; }
.step-card p { margin: 0; color: var(--solution-muted); font-size: .91rem; line-height: 1.7; }

/* Feature-directory cards used by the existing Features navigation link. */
.solution-directory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.directory-card {
  position: relative;
  min-height: 202px;
  padding: 24px 24px 48px;
  border: 1px solid var(--solution-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(18, 76, 101, .05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.directory-card:hover {
  transform: translateY(-5px);
  border-color: rgba(91,197,205,.55);
  box-shadow: 0 17px 38px rgba(18,76,101,.11);
}

.directory-card__index {
  display: inline-block;
  margin-bottom: 14px;
  color: #1b9cb7;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.directory-card h3 { margin: 0 0 9px; color: #1b2c3a; font-size: 1rem; line-height: 1.42; font-weight: 600; }
.directory-card p { margin: 0; color: var(--solution-muted); font-size: .87rem; line-height: 1.6; }
.directory-card__arrow { position: absolute; right: 20px; bottom: 17px; color: #1b7fb8; font-size: 1.25rem; transition: transform .2s ease; }
.directory-card:hover .directory-card__arrow { transform: translateX(4px); }

/* Final conversion band */
.final-cta {
  position: relative;
  padding: 28px 0 clamp(58px, 7vw, 84px);
  overflow: hidden;
  background: #fff;
}

.final-cta__panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 205px;
  padding: clamp(30px, 5vw, 52px);
  overflow: hidden;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(90deg, #1b7fb8 0%, #2eb8d6 55%, #3aa0d8 100%)!important;
  background: linear-gradient(124deg, #0e4d6e 0%, #1b7fb8 50%, #2eb8d6 100%)!important;
  box-shadow: 0 22px 52px rgba(27,127,184,.22);
}

.final-cta__copy { position: relative; z-index: 2; max-width: 740px; }
.final-cta__label { position: relative; z-index: 2; margin-bottom: 8px; color: #b7e8f3; }
.final-cta__copy h2 {
  margin: 0 0 11px;
  color: #fff;
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  font-weight: 600;
  line-height: 1.23;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.final-cta__copy p { margin: 0; color: rgba(255,255,255,.9); line-height: 1.75; }
.final-cta .btn-cta {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: auto;
  padding: 13px 21px;
  color: #0e4d6e;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.13);
}
.final-cta__orb { position: absolute; border-radius: 50%; pointer-events: none; }
.final-cta__orb--one { width: 270px; height: 270px; right: -80px; top: -140px; background: rgba(255,255,255,.10); }
.final-cta__orb--two { width: 150px; height: 150px; right: 24%; bottom: -108px; background: rgba(3,206,206,.22); }

/* Scroll reveal. Content stays visible if JavaScript is unavailable. */
body.motion-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .68s cubic-bezier(.2,.7,.2,1), transform .68s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--item-index, var(--card-index, 0)) * 65ms);
}
body.motion-ready [data-reveal].is-visible { opacity: 1; transform: translate3d(0,0,0); }
body.motion-ready [data-reveal="fade-up"] { transform: translate3d(0,28px,0); }
body.motion-ready [data-reveal="from-left"] { transform: translate3d(-28px,0,0); }
body.motion-ready [data-reveal="from-right"] { transform: translate3d(28px,0,0); }
body.motion-ready [data-reveal="scale-in"] { transform: translate3d(0,14px,0) scale(.92); }
body.motion-ready [data-reveal="flip-up"] { transform: perspective(900px) translate3d(0,18px,0) rotateX(8deg); transform-origin: center bottom; }
body.motion-ready [data-reveal="wipe-up"] { transform: translate3d(0,10px,0); clip-path: inset(0 0 100% 0); transition: opacity .68s cubic-bezier(.2,.7,.2,1), transform .68s cubic-bezier(.2,.7,.2,1), clip-path .75s cubic-bezier(.2,.7,.2,1); }
body.motion-ready [data-reveal="blur-in"] { transform: translate3d(0,14px,0) scale(.98); filter: blur(8px); transition: opacity .68s cubic-bezier(.2,.7,.2,1), transform .68s cubic-bezier(.2,.7,.2,1), filter .68s ease; }
body.motion-ready [data-reveal="wipe-up"].is-visible { clip-path: inset(0 0 0 0); }
body.motion-ready [data-reveal="blur-in"].is-visible { filter: blur(0); }

@keyframes route-dash { to { stroke-dashoffset: -255; } }
@keyframes halo-breathe { from { transform: scale(.93); opacity: .72; } to { transform: scale(1.05); opacity: 1; } }
@keyframes art-float { 0%, 100% { transform: rotateY(-7deg) rotateX(2deg) rotateZ(-1.2deg) translateY(0); } 50% { transform: rotateY(-7deg) rotateX(2deg) rotateZ(-1.2deg) translateY(-8px); } }
@keyframes float-soft { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(1deg); } }
@keyframes art-enter { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 1024px) {
  .solution-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(280px, .82fr); gap: 28px; }
  .hero-art { min-height: 350px; }
  .hero-art__window { inset: 40px 5px 28px 15px; }
  .art-map { height: 158px; }
  .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solution-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .solution-hero { padding: 58px 0 62px; }
  .solution-hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .solution-hero__copy { max-width: 100%; }
  .solution-hero h1 { font-size: clamp(2rem, 8.5vw, 3.25rem); }
  .solution-hero__lead { font-size: 1rem; }
  .hero-art { width: min(100%, 500px); min-height: 330px; }
  .hero-art__window { inset: 30px 12px 22px 18px; }
  .art-map { height: 145px; }
  .content-section { padding: 56px 0; }
  .feature-grid,
  .feature-grid--two,
  .feature-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-heading { margin-bottom: 28px; }
  .final-cta__panel { align-items: flex-start; flex-direction: column; }
  .final-cta .btn-cta { width: 100%; }
}

@media (max-width: 560px) {
  .solution-hero { padding: 48px 0 46px; }
  .solution-hero__actions { flex-direction: column; align-items: stretch; }
  .solution-hero__actions .btn { width: 100%; }
  .hero-art { min-height: 275px; margin-top: 4px; }
  .hero-art__window { inset: 22px 8px 16px 13px; border-radius: 18px; }
  .art-toolbar { height: 37px; }
  .art-layout { grid-template-columns: 38px 1fr; height: calc(100% - 37px); }
  .art-rail { gap: 11px; padding-top: 15px; }
  .art-rail i { width: 14px; height: 14px; }
  .art-main { padding: 12px 11px 9px; }
  .art-stats span { height: 31px; }
  .art-map { height: 115px; margin-top: 8px; }
  .art-footer { margin-top: 8px; gap: 5px; }
  .art-footer span { height: 5px; }
  .art-float { width: 75px; height: 41px; padding: 8px; gap: 5px; }
  .art-float--one { top: 4px; right: -1px; }
  .art-float--two { bottom: 8px; left: -1px; }
  .art-float i { width: 14px; height: 14px; flex-basis: 14px; }
  .art-float b:last-child { left: 29px; right: 8px; bottom: 8px; }
  .content-section { padding: 48px 0; }
  .section-heading h2 { font-size: clamp(1.6rem, 7vw, 2rem); }
  .feature-grid,
  .feature-grid--two,
  .feature-grid--four,
  .steps-grid,
  .solution-directory-grid { grid-template-columns: 1fr; }
  .feature-card { padding: 23px 21px; }
  .step-card { min-height: 0; }
  .final-cta { padding-top: 10px; }
  .final-cta__panel { padding: 28px 22px; border-radius: 19px; }
}

/* Section-layout families: each solution page gets a distinct editorial rhythm. */
.section-heading--left { max-width: 900px; margin-left: 0; text-align: left; }
.section-heading--left h2 { margin-left: 0; }
.section-heading--left .section-intro { margin-left: 0; }

/* Connected timeline */
.timeline-list {
  position: relative;
  display: grid;
  gap: 15px;
  max-width: 940px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
/*.timeline-list::before {*/
/*  content: "";*/
/*  position: absolute;*/
/*  top: 26px;*/
/*  bottom: 28px;*/
/*  left: 28px;*/
/*  width: 2px;*/
/*  background: linear-gradient(180deg, #03cece, #3398db 75%, rgba(51,152,219,.08));*/
/*}*/
.timeline-entry {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0,1fr);
  gap: 18px;
  align-items: start;
  padding: 22px 26px 22px 0;
  border: 1px solid #e0edf2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(18,76,101,.055);
}
.timeline-entry__index {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  margin: 2px 0;
  border: 5px solid #f4fbfd;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg,#03cece,#3398db);
  font-size: .66rem;
  font-weight: 700;
}
.timeline-entry__content h3 { margin: 0 0 9px; color: #1b2c3a; font-size: 1.08rem; }

/* Alternating editorial rows, rather than a repeated card grid */
.alternating-stack { display: grid; gap: 14px; }
.alternating-row {
  display: grid;
  grid-template-columns: 90px minmax(0,1fr);
  align-items: center;
  gap: clamp(18px,3vw,36px);
  padding: clamp(21px,3vw,32px);
  border: 1px solid #e2edf2;
  border-radius: 20px;
  background: linear-gradient(110deg,#fff,#f8fcfd);
  box-shadow: 0 9px 28px rgba(18,76,101,.045);
  transition: transform .25s ease, box-shadow .25s ease;
}
.alternating-row:hover { transform: translateX(5px); box-shadow: 0 16px 34px rgba(18,76,101,.09); }
.alternating-row__index {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 21px;
  color: #1b7fb8;
  background: linear-gradient(145deg,#e4fafa,#e9f3fc);
  font-size: 1.18rem;
  font-weight: 700;
  margin-bottom:15px; 
}
.alternating-row__content h3 { margin: 0 0 11px; color: #1b2c3a; font-size: 1.13rem; }
/*.alternating-row:nth-child(even) { grid-template-columns: minmax(0,1fr) 90px; }*/
/*.alternating-row:nth-child(even) .alternating-row__index { grid-column: 2; grid-row: 1; }*/
/*.alternating-row:nth-child(even) .alternating-row__content { grid-column: 1; grid-row: 1; text-align: right; }*/
/*.alternating-row:nth-child(even) .feature-list li { grid-template-columns: minmax(0,1fr) 8px; }*/
/*.alternating-row:nth-child(even) .feature-list__dot { grid-column: 2; grid-row: 1; }*/
/*.alternating-row:nth-child(even) .feature-list li > span:last-child { grid-column: 1; grid-row: 1; }*/

/* Bento layouts with deliberate asymmetry */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  grid-auto-rows: minmax(150px,auto);
  gap: 16px;
}
.bento-grid-0 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  grid-auto-rows: minmax(150px,auto);
  gap: 16px;
}
.bento-card {
  position: relative;
  min-height: 190px;
  padding: 25px;
  overflow: hidden;
  border: 1px solid #dfeef2;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(18,76,101,.06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.bento-card::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  right: -38px;
  bottom: -54px;
  border: 1px solid rgba(3,206,206,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 13px rgba(3,206,206,.035),0 0 0 27px rgba(51,152,219,.025);
}
.bento-card:hover { transform: translateY(-5px); box-shadow: 0 19px 42px rgba(18,76,101,.12); }
/* .bento-card:first-child { grid-column: span 2; grid-row: span 2; background: linear-gradient(145deg,#f3fcfd,#fff 68%); } */
.bento-card:first-child .bento-card__index { width: 52px; height: 52px; border-radius: 16px; font-size: .9rem; }
.bento-card__index { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 15px; border-radius: 12px; color: #157ea8; background: #e6f8fa; font-size: .75rem; font-weight: 700; }
.bento-card__content { position: relative; z-index: 1; }
.bento-card h3 { margin: 0 0 11px; color: #1b2c3a; font-size: 1.08rem; }

/* Connected delivery route nodes */
.route-sequence {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 15px;
  margin: 0;
  padding: 13px 0 0;
  list-style: none;
  counter-reset: route;
}
.route-sequence::before {
  content: "";
  position: absolute;
  top: 39px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: repeating-linear-gradient(90deg,#44bccb 0 9px,transparent 9px 17px);
}
.route-stop {
  position: relative;
  z-index: 1;
  min-height: 202px;
  padding: 0 18px 20px;
  border: 1px solid #e1edf1;
  border-radius: 18px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 9px 28px rgba(18,76,101,.055);
}
.route-stop__index {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border: 7px solid #f5fbfc;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg,#03cece,#3398db);
  font-size: .7rem;
  font-weight: 700;
}
.route-stop__content h3 { margin: 0 0 9px; color: #1b2c3a; font-size: 1rem; text-align: center; }
.route-stop .feature-list { font-size: .9rem; }

/* Wide editorial stripes */
.stripe-stack { max-width: 960px; margin: 0 auto; border-top: 1px solid #dbe9ee; }
.stripe-row {
  display: grid;
  grid-template-columns: 72px minmax(0,1fr);
  gap: 22px;
  padding: 23px 8px;
  border-bottom: 1px solid #dbe9ee;
  transition: padding .2s ease, background .2s ease;
}
.stripe-row:hover { padding-left: 18px; background: #f7fcfd; }
.stripe-row__index { color: #27a8b8; font-size: 1.1rem; font-weight: 700; }
.stripe-row__content h3 { margin: 0 0 8px; color: #1b2c3a; font-size: 1.05rem; }
.stripe-row .feature-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 22px; }

/* Paperless checklists */
.checklist-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.check-row {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 15px;
  align-items: start;
  padding: 22px 22px 20px;
  border: 1px solid #e1edf1;
  border-radius: 16px;
  background: #fff;
  transition: transform .22s ease, border-color .22s ease;
}
.check-row:hover { transform: translateY(-3px); border-color: #aee2e7; }
.check-row__index {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: 1px;
  border-radius: 50%;
  color: transparent;
  background: #e6f8f8;
  font-size: 0;
  font-weight: 700;
}
.check-row__index::after { content: "✓"; color: #167ea8; font-size: 1.1rem; }
.check-row__content h3 { margin: 0 0 8px; color: #1b2c3a; font-size: 1rem; }
.check-row .feature-card__number { display: none; }

/* Scorecards and measured safety styles */
.scorecard-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.scorecard-card {
  position: relative;
  min-height: 235px;
  padding: 26px 24px;
  overflow: hidden;
  border: 1px solid #dfeaf0;
  border-radius: 19px;
  background: linear-gradient(150deg,#fff,#f5fbfd);
  box-shadow: 0 10px 30px rgba(18,76,101,.06);
}
.scorecard-card__index { position: absolute; top: 18px; right: 19px; color: #83a5b5; font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
.scorecard-card__meter { display: flex; align-items: end; gap: 4px; width: 50px; height: 28px; margin-bottom: 18px; }
.scorecard-card__meter i { display: block; width: 9px; border-radius: 5px; background: linear-gradient(180deg,#5bc5cd,#3398db); }
.scorecard-card__meter i:nth-child(1) { height: 11px; opacity: .5; }
.scorecard-card__meter i:nth-child(2) { height: 17px; opacity: .65; }
.scorecard-card__meter i:nth-child(3) { height: 22px; opacity: .8; }
.scorecard-card__meter i:nth-child(4) { height: 28px; }
.scorecard-card__content h3 { margin: 0 34px 11px 0; color: #1b2c3a; font-size: 1rem; }

/* Operational workflow */
.workflow-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.workflow-list::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg,#03cece,#3398db);
  opacity: .45;
}
.workflow-entry {
  position: relative;
  z-index: 1;
  padding: 19px 20px 22px;
  border: 1px solid #dceaf0;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(18,76,101,.055);
}
.workflow-entry__index { display: grid; place-items: center; width: 31px; height: 31px; margin-bottom: 15px; border: 5px solid #f5fbfd; border-radius: 50%; color: #fff; background: #1b9cb7; font-size: .62rem; font-weight: 700; }
.workflow-entry__content h3 { margin: 0 0 8px; color: #1b2c3a; font-size: .98rem; }
.step-flow { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.workflow-step { padding: 21px; border-top: 3px solid #36b6c7; border-radius: 4px 4px 16px 16px; background: #f5fbfd; }
.workflow-step__index { display: block; margin-bottom: 18px; color: #1585ac; font-size: .78rem; font-weight: 700; letter-spacing: .1em; }
.workflow-step h3 { margin: 0 0 8px; font-size: 1rem; }
.workflow-step p { margin: 0; color: var(--solution-muted); font-size: .91rem; line-height: 1.7; }

/* Asset location split with an abstract, animated map */
.map-list-layout { display: grid; grid-template-columns: minmax(280px,.9fr) minmax(0,1.1fr); gap: 28px; align-items: stretch; }
.layout-map { position: relative; min-height: 330px; overflow: hidden; border: 1px solid #d9ecf0; border-radius: 24px; background: linear-gradient(135deg,#e9f8fa,#eaf3f9); }
.layout-map::before,.layout-map::after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.48); }
.layout-map::before { width:170px;height:170px;left:-45px;top:-55px; }
.layout-map::after { width:150px;height:150px;right:-35px;bottom:-50px; }
.layout-map svg { position:absolute;inset:0;width:100%;height:100%; }
.layout-map__road { fill:none;stroke:#fff;stroke-width:12;stroke-linecap:round; }
.layout-map__road--soft { stroke:#d0e8ed;stroke-width:7; }
.layout-map__route { fill:none;stroke:#12aebc;stroke-width:4;stroke-dasharray:8 9;stroke-linecap:round;animation:route-dash 12s linear infinite; }
.layout-map circle { fill:#fff;stroke:#1b7fb8;stroke-width:4; }
.map-list { display: grid; align-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.map-list__entry { display:grid;grid-template-columns:40px 1fr;gap:14px;padding:16px 18px;border:1px solid #e0edf1;border-radius:14px;background:#fff; }
.map-list__entry__index { display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:#147ca5;background:#eaf8fa;font-size:.7rem;font-weight:700; }
.map-list__entry__content h3 { margin:0 0 7px;font-size:1rem;color:#1b2c3a; }

/* Industry and account architectures */
.matrix-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
.matrix-card { display:grid;grid-template-columns:49px 1fr;gap:15px;padding:22px;border:1px solid #dfebef;border-radius:17px;background:#fff;box-shadow:0 8px 24px rgba(18,76,101,.045); }
.matrix-card__index { display:grid;place-items:center;width:42px;height:42px;border-radius:13px;color:#137da5;background:#eaf8fa;font-size:.72rem;font-weight:700; }
.matrix-card__content h3 { margin:0 0 9px;font-size:1rem;color:#1b2c3a; }
.governance-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px; }
.governance-card { position:relative;padding:26px 23px 23px;border:1px solid #dbe9ee;border-top:3px solid #2eb8d6;border-radius:6px 6px 17px 17px;background:#fff;box-shadow:0 12px 30px rgba(18,76,101,.055); }
.governance-card__index { display:block;margin-bottom:18px;color:#1b7fb8;font-size:.72rem;font-weight:700;letter-spacing:.13em; }
.governance-card__rule { display:block;width:44px;height:3px;margin-bottom:13px;border-radius:4px;background:linear-gradient(90deg,#03cece,#3398db); }
.governance-card__content h3 { margin:0 0 10px;font-size:1rem;line-height:1.45; }
.client-panel-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px; }
.client-panel { padding:24px 22px;border:1px solid #e0ebef;border-top:4px solid #49c2cd;border-radius:3px 3px 16px 16px;background:#fff;box-shadow:0 8px 24px rgba(18,76,101,.05); }
.client-panel__index { display:block;margin-bottom:19px;color:#338eb9;font-size:.78rem;font-weight:700; }
.client-panel__content h3 { margin:0 0 9px;font-size:1rem;line-height:1.45; }
.coldchain-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px; }
.coldchain-card { position:relative;min-height:190px;padding:26px 23px;border:1px solid #d9eef0;border-radius:22px;background:linear-gradient(140deg,#f1fbfc,#fff 72%);box-shadow:0 10px 28px rgba(18,76,101,.05); }
.coldchain-card__index { display:grid;place-items:center;width:34px;height:34px;margin-bottom:16px;border-radius:50%;color:#137fa9;background:#def6f7;font-size:.7rem;font-weight:700; }
.coldchain-card__pulse { position:absolute;top:23px;right:23px;width:13px;height:13px;border-radius:50%;background:#03cece;box-shadow:0 0 0 6px rgba(3,206,206,.10),0 0 0 12px rgba(51,152,219,.06);animation:pulse-ring 2.4s ease-out infinite; }
.coldchain-card__content h3 { margin:0 25px 9px 0;font-size:1rem;line-height:1.45; }

/* Story blocks and individual page identities */
.story-panel { display:grid;gap:15px; }
.story-panel p + p { margin-top:7px; }
.story-panel--safe-k9 { background:linear-gradient(120deg,#effafa,#fff 70%);border-left:4px solid #5bc5cd; }
.story-panel--fuel-management { max-width:960px;border-radius:4px 22px 22px 4px;background:linear-gradient(120deg,#e9f8fa,#fff); }
/*.solution-page--safe-k9 .timeline-list::before { background:linear-gradient(180deg,#03cece,#1b7fb8); }*/
.solution-page--ai-dashcam .alternating-row { border-radius:9px 24px 24px 9px;background:linear-gradient(100deg,#edf8fb,#fff 55%); }
.solution-page--route-planner .content-section--layout-route { background:linear-gradient(180deg,#eff9fb,#fff); }
.solution-page--fuel-management .bento-card { border-radius:10px 26px 10px 26px; }
.solution-page--maintenance .workflow-entry { border-radius:7px 18px 18px 18px; }
.solution-page--enterprise .bento-card:first-child { background:linear-gradient(140deg,#e8f9fa,#fff 68%); }
.solution-page--duty-of-care .check-row__index { color:#fff;background:linear-gradient(140deg,#1b7fb8,#03bfc9); }
.solution-page--digital-inspection .matrix-card { border-left:4px solid #4bc1cb; }
.solution-page--fmcg .coldchain-card { border-radius:7px 22px 7px 22px; }
.solution-page--public-sector .governance-card { background:linear-gradient(150deg,#fff,#f2f9fc); }
.solution-page--logistics .client-panel { background:linear-gradient(160deg,#fff,#f4fafc); }

@keyframes pulse-ring { 0% { box-shadow:0 0 0 4px rgba(3,206,206,.12),0 0 0 8px rgba(51,152,219,.05); } 70% { box-shadow:0 0 0 9px rgba(3,206,206,.04),0 0 0 17px rgba(51,152,219,0); } 100% { box-shadow:0 0 0 4px rgba(3,206,206,0),0 0 0 8px rgba(51,152,219,0); } }

@media (max-width: 900px) {
  .bento-grid,.governance-grid,.scorecard-grid,.client-panel-grid,.coldchain-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .route-sequence { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .route-sequence::before { display:none; }
  .workflow-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .workflow-list::before { display:none; }
  .step-flow { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .map-list-layout { grid-template-columns:1fr; }
  .layout-map { min-height:250px; }
}

@media (max-width: 620px) {
  .timeline-entry { grid-template-columns:47px minmax(0,1fr);gap:10px;padding:18px 15px 18px 0; }
  .timeline-list::before { left:22px; }
  .timeline-entry__index { width:34px;height:34px; }
  .alternating-row,.alternating-row:nth-child(even) { grid-template-columns:52px minmax(0,1fr);gap:14px;padding:17px; }
  .alternating-row__index { width:48px;height:48px;border-radius:14px;font-size:.9rem; }
  .alternating-row:nth-child(even) .alternating-row__index { grid-column:1;grid-row:1; }
  .alternating-row:nth-child(even) .alternating-row__content { grid-column:2;grid-row:1;text-align:left; }
  .alternating-row:nth-child(even) .feature-list li { grid-template-columns:8px 1fr; }
  .alternating-row:nth-child(even) .feature-list__dot { grid-column:1;grid-row:1; }
  .alternating-row:nth-child(even) .feature-list li > span:last-child { grid-column:2;grid-row:1; }
  .bento-grid,.matrix-grid,.checklist-grid,.scorecard-grid,.governance-grid,.client-panel-grid,.coldchain-grid,.route-sequence,.workflow-list,.step-flow { grid-template-columns:1fr; }
  .bento-card:first-child { grid-column:auto;grid-row:auto; }
  .route-stop { min-height:0;padding-bottom:18px; }
  .route-stop__content h3 { text-align:left; }
  .route-stop__index { margin-left:0; }
  .stripe-row { grid-template-columns:45px 1fr;gap:12px;padding:19px 4px; }
  .stripe-row .feature-list { grid-template-columns:1fr; }
  .map-list-layout { gap:16px; }
  .layout-map { min-height:210px; }
}

/* About page: editorial story, mission statement, team split, and product-family ribbon. */
.about-page .about-section { overflow: hidden; }
.about-page .about-section__heading { max-width: 260px; }
.about-page .about-section__heading .eyebrow { margin-bottom: 12px; }
.about-page .about-section__heading h2,
.about-page .about-section h2 { margin: 0; color: #17384d; font-size: clamp(2rem,4vw,3rem); line-height: 1.1; letter-spacing: -.04em; }
.about-story__grid { display: grid; grid-template-columns: minmax(180px,.65fr) minmax(0,1.35fr); gap: clamp(24px,6vw,90px); align-items: start; }
.about-story .about-section__heading { position: sticky; top: 110px; }
.about-story__copy { display: grid; gap: 0; border-left: 1px solid #d9e9ee; }
.about-story__copy p { position: relative; margin: 0; padding: 0 0 28px 28px; color: #536a78; line-height: 1.85; }
.about-story__copy p::before { content:""; position:absolute; left:-5px; top:.55em; width:9px; height:9px; border:2px solid #fff; border-radius:50%; background:#2eb8d6; box-shadow:0 0 0 2px #bfe7eb; }
.about-story__copy p + p { padding-top: 6px; }
.about-mission { background:linear-gradient(120deg,#0e4d6e,#1b7fb8 58%,#2eb8d6); color:#fff; }
.about-mission__panel { display:grid; grid-template-columns:150px 1fr; gap:clamp(25px,5vw,70px); align-items:center; padding:clamp(28px,5vw,58px); border:1px solid rgba(255,255,255,.19); border-radius:26px; background:rgba(255,255,255,.08); box-shadow:0 25px 60px rgba(2,52,80,.16); }
.about-mission .eyebrow { color:#b7e8f3; }
.about-mission h2 { color:#fff !important; margin-bottom:20px !important; }
.about-mission p { color:rgba(255,255,255,.88); line-height:1.8; }
.about-mission__statement { max-width:680px; margin:0 0 12px; color:#fff !important; font-size:clamp(1.4rem,2.8vw,2rem); font-weight:600; line-height:1.35 !important; }
.about-mission__mark { position:relative; display:grid; place-items:center; width:124px; height:124px; border:1px solid rgba(255,255,255,.4); border-radius:50%; animation:mission-orbit 18s linear infinite; }
.about-mission__mark::before,.about-mission__mark::after { content:""; position:absolute; width:82px;height:82px;border:1px solid rgba(255,255,255,.3);border-radius:50%; }
.about-mission__mark::after { width:38px;height:38px;background:#5bc5cd;border:0;box-shadow:0 0 30px rgba(3,206,206,.45); }
.about-mission__mark span { position:absolute; width:9px;height:9px;border-radius:50%;background:#fff; }
.about-mission__mark span:nth-child(1){transform:translate(51px,-30px)}
.about-mission__mark span:nth-child(2){transform:translate(-48px,31px);background:#9ce7e9}
.about-mission__mark span:nth-child(3){transform:translate(0,58px);background:#7bcde1}
.about-team__grid { display:grid;grid-template-columns:minmax(180px,.65fr) minmax(0,1.35fr);gap:clamp(24px,6vw,90px);align-items:start; }
.about-team__copy { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px; }
.about-team__copy p { margin:0;padding:26px;border-radius:5px 20px 20px 20px;background:#fff;color:#536a78;line-height:1.8;box-shadow:0 14px 38px rgba(18,76,101,.075); }
.about-team__copy p:nth-child(2) { transform:translateY(32px);border-radius:20px 5px 20px 20px;background:#e9f8fa; }
.about-vxceed { padding-top:clamp(64px,8vw,100px); }
.about-vxceed__panel { position:relative; overflow:hidden;padding:clamp(30px,5vw,58px);border-radius:26px;background:linear-gradient(138deg,#f2fbfc,#fff 58%,#eaf7fa);box-shadow:0 18px 48px rgba(18,76,101,.09); }
.about-vxceed__panel::after { content:"";position:absolute;width:260px;height:260px;right:-85px;top:-145px;border:1px solid rgba(27,127,184,.14);border-radius:50%;box-shadow:0 0 0 18px rgba(3,206,206,.035),0 0 0 38px rgba(51,152,219,.025); }
.about-vxceed__copy { position:relative;z-index:1;max-width:850px; }
.about-vxceed__copy h2 { margin-bottom:17px !important; }
.about-vxceed__copy p { color:#526a79;line-height:1.8; }
.about-vxceed__copy p + p { margin-top:13px; }
.about-brand-row { position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:32px; }
.about-brand-row a { display:grid;place-items:center;min-height:94px;padding:16px;border:1px solid #deebef;border-radius:15px;background:#fff;transition:transform .25s ease,box-shadow .25s ease; }
.about-brand-row a:hover { transform:translateY(-4px);box-shadow:0 12px 28px rgba(18,76,101,.1); }
.about-brand-row img { width:auto;max-width:100%;object-fit:contain; }
a.is-current::after {
  margin-bottom: -5px;
}

/* Contact page: direct support paths and location cards, no fake submit form. */
.contact-page .solution-hero__actions { margin-top:24px; }
.contact-support-section { background:linear-gradient(180deg,#fff,#f4fbfd); }
.contact-support-section .section-heading { margin-bottom:24px; }
.support-contact-panel { display:grid;grid-template-columns:1.1fr .9fr;gap:18px;max-width:980px;margin-left:0; }
.support-contact-panel__copy,.support-contact-panel__email { display:flex;flex-wrap:wrap;align-content:center;gap:9px 18px;padding:24px;border:1px solid #dcecf0;border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(18,76,101,.06); }
.support-contact-panel__copy p,.support-contact-panel__email p { margin:0;color:#354f60;line-height:1.7; }
.support-contact-panel a,.contact-office-card a { color:#1b7fb8;font-weight:600;text-decoration:underline;text-decoration-color:rgba(27,127,184,.28);text-underline-offset:3px; }
.support-contact-panel a:hover,.contact-office-card a:hover { text-decoration-color:currentColor; }
.support-contact-panel__email { align-items:center;background:linear-gradient(135deg,#ecf9fa,#fff); }
.contact-icon { display:grid;place-items:center;flex:0 0 43px;height:43px;border-radius:14px;color:#fff;background:linear-gradient(135deg,#03cece,#3398db);font-size:1.25rem;font-weight:700; }
.support-booking-link { display:inline-flex;align-items:center;gap:8px;width:fit-content;margin-top:6px;padding:10px 14px;border-radius:999px;color:#fff !important;background:linear-gradient(120deg,#1b7fb8,#2eb8d6);font-size:.86rem;font-weight:600;text-decoration:none !important; }
.support-booking-link:hover { filter:brightness(.96);transform:translateY(-1px); }
.contact-offices-section { background:linear-gradient(140deg,#edf8fb,#f8fcfd); }
.contact-office-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px; }
.contact-office-card { position:relative;min-height:235px;padding:25px 25px 22px;overflow:hidden;border:1px solid #dceaf0;border-radius:18px;background:#fff;box-shadow:0 10px 28px rgba(18,76,101,.055);transition:transform .25s ease,box-shadow .25s ease; }
.contact-office-card:hover { transform:translateY(-4px);box-shadow:0 17px 36px rgba(18,76,101,.11); }
.contact-office-card::before { content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#03cece,#3398db); }
.contact-office-card__index { display:block;margin-bottom:14px;color:#1b9cb7;font-size:.75rem;font-weight:700;letter-spacing:.12em; }
.contact-office-card h3 { margin:0 0 13px;color:#1b2c3a;font-size:1.1rem; }
.contact-office-card p { margin:0 0 7px;color:#5b6777;font-size:.92rem;line-height:1.65; }
.contact-office-card p:last-child { margin-bottom:0; }

@keyframes mission-orbit { to { transform:rotate(360deg); } }

@media (max-width: 760px) {
  .about-story__grid,.about-team__grid { grid-template-columns:1fr; gap:20px; }
  .about-story .about-section__heading { position:static; }
  .about-mission__panel { grid-template-columns:1fr; }
  .about-mission__mark { width:92px;height:92px; }
  .about-team__copy { grid-template-columns:1fr; }
  .about-team__copy p:nth-child(2) { transform:none; }
  .support-contact-panel { grid-template-columns:1fr; }
}

@media (max-width: 560px) {
  .about-brand-row,.contact-office-grid { grid-template-columns:1fr; }
  .about-brand-row a { min-height:75px; }
  .support-contact-panel__copy { display:grid;gap:8px; }
}

/* Feature directory is a weighted bento map, not another uniform section grid. */
.feature-directory-page .solution-directory-grid {
  grid-template-columns: repeat(4,minmax(0,1fr));
  grid-auto-rows: minmax(156px,auto);
  align-items: stretch;
}
.feature-directory-page .directory-card {
  display:flex;
  flex-direction:column;
  min-height:220px;
  padding:24px 24px 48px;
  border-radius:9px 22px 9px 22px;
  background:linear-gradient(150deg,#fff,#f7fcfd);
}
.feature-directory-page .directory-card:nth-child(1),
.feature-directory-page .directory-card:nth-child(7) { grid-column:span 2; background:linear-gradient(135deg,#eaf8fa,#fff 72%); }
.feature-directory-page .directory-card:nth-child(12) { grid-column:span 2; background:linear-gradient(135deg,#eaf5fb,#fff 70%); }
.feature-directory-page .directory-card:nth-child(3n) { border-bottom:3px solid #7bd4d7; }
.feature-directory-page .directory-card:nth-child(3n + 2) { background:linear-gradient(155deg,#fff,#f1f8fc); }
.feature-directory-page .directory-card__index { width:38px;height:29px;padding:5px 8px;border-radius:9px;background:#e5f7f8; }
.feature-directory-page .directory-card h3 { max-width:35ch; }
.feature-directory-page .directory-card__arrow { width:30px;height:30px;display:grid;place-items:center;right:17px;bottom:15px;border-radius:50%;background:#e7f7f8; }

@media (max-width: 980px) {
  .feature-directory-page .solution-directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .feature-directory-page .directory-card:nth-child(1),
  .feature-directory-page .directory-card:nth-child(7),
  .feature-directory-page .directory-card:nth-child(12) { grid-column:span 2; }
}
@media (max-width: 620px) {
  .feature-directory-page .solution-directory-grid { grid-template-columns:1fr; }
  .feature-directory-page .directory-card:nth-child(1),
  .feature-directory-page .directory-card:nth-child(7),
  .feature-directory-page .directory-card:nth-child(12) { grid-column:auto; }
  .feature-directory-page .directory-card { min-height:190px; }
}


/* Motion is progressive enhancement; keep all content readable when reduced motion is requested. */
@media (prefers-reduced-motion: reduce) {
  body.motion-ready [data-reveal],
  body.motion-ready [data-reveal].is-visible {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .about-mission__mark,
  .coldchain-card__pulse,
  .layout-map__route { animation: none !important; }
  .hero-art--about-truck .about-truck__motion { display:none !important; }
  .hero-art--about-truck .about-truck-marker { transform:translate(52px,157px); }
}

/* Prevent route/workflow lists from forcing their parent sections wider than the viewport. */
.route-sequence,
.workflow-list { width:100%; min-width:0; }
.route-stop,
.workflow-entry { display:block; min-width:0; overflow-wrap:anywhere; }
.route-stop__content,
.workflow-entry__content { min-width:0; }
.route-stop__content h3,
.workflow-entry__content h3 { overflow-wrap:anywhere; }
.route-stop .feature-list,
.workflow-entry .feature-list { min-width:0; }
.route-stop .feature-list li > span:last-child,
.workflow-entry .feature-list li > span:last-child { min-width:0; overflow-wrap:anywhere; }
.route-sequence::before,
.workflow-list::before { pointer-events:none; }

@media (max-width: 1024px) {
  .route-sequence { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .route-sequence { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .workflow-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .route-sequence,
  .workflow-list { grid-template-columns:1fr; }
}

/* Non-submitting HTML demo form on Contact page. */
.contact-form-section { background:linear-gradient(145deg,#f3fbfd,#fff 72%); }
.contact-form-grid { display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);gap:clamp(24px,5vw,68px);align-items:start; }
.contact-form-intro { position:sticky;top:110px;max-width:390px; }
.contact-form-intro h2 { margin:0 0 14px;color:#17384d;font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.15;letter-spacing:-.035em; }
.contact-form-intro p:last-child { color:#5b6777;line-height:1.8; }
.contact-form { min-width:0;padding:clamp(22px,4vw,38px);border:1px solid #dcecf0;border-radius:22px;background:#fff;box-shadow:0 16px 42px rgba(18,76,101,.08); }
.contact-form__fields { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 18px; }
.contact-form__field { display:grid;gap:7px;min-width:0; }
.contact-form__field--wide { grid-column:1/-1; }
.contact-form__field label { color:#263f50;font-size:.9rem;font-weight:600; }
.contact-form__field input,
.contact-form__field textarea { width:100%;min-width:0;padding:12px 14px;border:1px solid #d7e6eb;border-radius:11px;color:#1a2332;background:#fbfeff;font:inherit;font-size:.94rem;line-height:1.5;transition:border-color .2s ease,box-shadow .2s ease; }
.contact-form__field textarea { min-height:130px;resize:vertical; }
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder { color:#93a4ae; }
.contact-form__field input:focus,
.contact-form__field textarea:focus { outline:0;border-color:#31b4c4;box-shadow:0 0 0 4px rgba(3,206,206,.12); }
.contact-form__submit { display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:12px 19px;border:0;border-radius:999px;color:#fff;background:linear-gradient(120deg,#1b7fb8,#2eb8d6);font:inherit;font-size:.95rem;font-weight:600;cursor:default; }
.contact-form__note { margin:12px 0 0;color:#687c88;font-size:.82rem;line-height:1.6; }
@media (max-width: 760px) {
  .contact-form-grid { grid-template-columns:1fr; }
  .contact-form-intro { position:static;max-width:none; }
}
@media (max-width: 560px) {
  .contact-form__fields { grid-template-columns:1fr; }
  .contact-form__field--wide { grid-column:auto; }
  .contact-form { padding:20px 17px; }
  .contact-form__submit { width:100%;justify-content:center; }
}

/* About / Team section: change its visual composition without changing its text. */
.about-team {
  isolation:isolate;
  background:
    radial-gradient(ellipse at 92% 16%,rgba(3,206,206,.13),transparent 30%),
    linear-gradient(145deg,#effafd 0%,#f7fbfc 58%,#eaf6fa 100%);
}
.about-team::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:4%;
  right:-195px;
  width:430px;
  height:430px;
  border:1px solid rgba(27,127,184,.12);
  border-radius:50%;
  box-shadow:0 0 0 22px rgba(3,206,206,.035),0 0 0 48px rgba(51,152,219,.025);
  pointer-events:none;
}
.about-team .about-team__grid {
  grid-template-columns:minmax(205px,.55fr) minmax(0,1.45fr);
  gap:clamp(24px,4.5vw,64px);
  align-items:stretch;
}
.about-team .about-section__heading {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  max-width:none;
  min-height:100%;
  padding:clamp(26px,3.5vw,38px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.9);
  border-radius:26px;
  background:linear-gradient(155deg,rgba(255,255,255,.97),rgba(226,247,250,.93));
  box-shadow:0 18px 44px rgba(18,76,101,.075);
}
.about-team .about-section__heading::before {
  content:"";
  position:absolute;
  right:-62px;
  bottom:-85px;
  width:205px;
  height:205px;
  border:1px solid rgba(27,127,184,.16);
  border-radius:50%;
  box-shadow:0 0 0 16px rgba(3,206,206,.045),0 0 0 34px rgba(51,152,219,.035);
}
.about-team .about-section__heading .eyebrow {
  position:relative;
  z-index:1;
  margin-bottom:auto;
  color:#1682a8;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.about-team .about-section__heading h2 {
  position:relative;
  z-index:1;
  margin-top:38px;
  color:#0e4d6e;
  font-size:clamp(2.8rem,5vw,4.6rem);
  line-height:.98;
  letter-spacing:-.055em;
}
.about-team .about-section__heading h2::after {
  content:"";
  display:block;
  width:62px;
  height:4px;
  margin-top:19px;
  border-radius:8px;
  background:linear-gradient(90deg,#03cece,#3398db);
}
.about-team__copy {
  position:relative;
  grid-template-columns:minmax(0,1fr);
  gap:16px;
  align-content:center;
}
.about-team__copy::before {
  content:"";
  position:absolute;
  top:30px;
  bottom:30px;
  left:15px;
  width:1px;
  background:linear-gradient(180deg,rgba(3,206,206,.15),rgba(27,127,184,.42),rgba(3,206,206,.15));
}
.about-team__copy p,
.about-team__copy p:nth-child(2) {
  position:relative;
  z-index:1;
  min-width:0;
  margin:0;
  padding:clamp(22px,3vw,32px) clamp(22px,3.2vw,36px) clamp(22px,3vw,32px) 66px;
  transform:none;
  border:1px solid #d7e9ee;
  border-radius:18px 18px 18px 6px;
  color:#536a78;
  background:rgba(255,255,255,.94);
  font-size:1rem;
  line-height:1.85;
  box-shadow:0 12px 30px rgba(18,76,101,.065);
  transition:transform .24s ease,box-shadow .24s ease;
}
.about-team__copy p::before {
  content:"";
  position:absolute;
  top:30px;
  left:23px;
  width:18px;
  height:18px;
  border:4px solid #e0f5f6;
  border-radius:50%;
  background:linear-gradient(135deg,#03cece,#3398db);
  box-shadow:0 0 0 1px rgba(27,127,184,.18);
}
.about-team__copy p:hover { transform:translateX(4px);box-shadow:0 18px 36px rgba(18,76,101,.10); }
.about-team__copy p:nth-child(2) {
  margin-left:clamp(0px,4vw,48px);
  border-color:rgba(14,77,110,.12);
  border-radius:6px 18px 18px 18px;
  color:#fff;
  background:linear-gradient(120deg,#0e4d6e,#1b7fb8 82%,#238bb9);
  box-shadow:0 16px 34px rgba(14,77,110,.15);
}
.about-team__copy p:nth-child(2)::before {
  border-color:rgba(255,255,255,.22);
  background:#5bc5cd;
  box-shadow:0 0 0 1px rgba(255,255,255,.2);
}
.about-team__copy p:nth-child(2):hover { transform:translateX(4px);box-shadow:0 20px 40px rgba(14,77,110,.2); }
@media (max-width: 760px) {
  .about-team .about-team__grid { grid-template-columns:1fr;gap:22px; }
  .about-team .about-section__heading { min-height:190px;padding:25px;border-radius:20px; }
  .about-team .about-section__heading h2 { margin-top:24px;font-size:clamp(2.8rem,12vw,4rem); }
  .about-team__copy p:nth-child(2) { margin-left:0; }
}
@media (max-width: 560px) {
  .about-team__copy p,
  .about-team__copy p:nth-child(2) { padding:21px 19px 21px 56px;font-size:.96rem; }
  .about-team__copy p::before { top:25px;left:19px;width:16px;height:16px; }
  .about-team__copy::before { left:11px; }
}

.pb-0 {
    padding-bottom: 0;
}