/* =====================================================
   Base Resets & Variables
   ===================================================== */
:root {
  --brand-blue: #00a8ff;
  --brand-blue-2: #6bbceb;
  --brand-black: #0d1115;
  --brand-white: #ffffff;
  --accent: #00fff6;
  --text: #1a1a1a;
  --muted: #6b7280;
  --bg: #fafafa;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .08);
  --topbar-h: 44px;
  --nav-h: 64px;
  --btn-h: 48px;
  --btn-px: 22px;
  --icon-filter: hue-rotate(30deg) saturate(1.65) brightness(1.12) contrast(1.02);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

/* =====================================================
   Global Element Defaults
   ===================================================== */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--brand-blue);
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

/* =====================================================
   Layout & Containers
   ===================================================== */
.container {
  width: min(1120px, 92vw);
  margin: 0 auto;
}

/* Layout: Wide Containers (80vw) */
.topbar>.container,
.header>.container,
.hero>.container,
.footer>.container,
.footer-contact-wrap>.container,
.footer-copyright>.container {
  width: 80vw;
  max-width: none;
  /* remove cap so it can expand on large screens */
}

/* Layout: 80% Viewport Utility */
.container--wide {
  width: 80vw;
  max-width: none;
}

@media (max-width: 860px) {

  .topbar>.container,
  .header>.container,
  .hero>.container,
  .footer>.container,
  .footer-contact-wrap>.container,
  .footer-copyright>.container {
    width: 92vw;
  }
}

/* Layout: Generic Grid */
.grid {
  display: grid;
  gap: 24px;
}

/* =====================================================
   Components: FAQ Grid
   ===================================================== */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 860px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }
}

/* FAQ Cards */
.faq-grid .accordion {
  /* neutralise the base accordion so items can be individual cards */
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  /* let shadows show */
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.2vw, 18px);
  /* space between FAQ cards */
}

/* each item becomes a “card” */
.faq-grid .accordion .accordion-item {
  background: #fff;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  /* align with global --shadow; lighter to avoid overlap */
  position: relative;
  /* create local stacking context */
  z-index: 0;
  transition: transform .2s ease, box-shadow .2s ease;
}

.faq-grid .accordion .accordion-item+.accordion-item {
  border-top: 0;
}

/* kill base divider */

.faq-grid .accordion .accordion-item:hover,
.faq-grid .accordion .accordion-item:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  /* do not increase shadow intensity on hover */
  z-index: 1;
  /* sit above neighbors without casting a darker shadow onto them */
}

/* FAQ: Header */
.faq-grid .accordion .accordion-header {
  background: #fff;
  color: #111827;
  padding: 18px 52px 18px 20px;
  /* comfy padding + room for chevron */
  font-weight: 700;
  letter-spacing: .01em;
  border: 0;
}

/* FAQ: Chevron States */
.faq-grid .accordion .accordion-header::after {
  right: 16px;
  width: 22px;
  height: 22px;
  background: var(--brand-blue);
}

.faq-grid .accordion .accordion-item.open .accordion-header::after {
  background: var(--accent);
  transform: translateY(-50%) rotate(180deg);
}

/* FAQ: Content Area */
.faq-grid .accordion .accordion-content {
  background: #fff;
  padding: 0 20px;
  /* collapsed state keeps height minimal */
}

.faq-grid .accordion .accordion-item.open .accordion-content {
  padding: 0 20px 18px;
  /* breathing room when open */
}

/* Feature split grid (e.g., “Who We Fit Best”) */
.grid--wide-split {
  grid-template-columns: 1.3fr .7fr;
  align-items: stretch;
}

@media (max-width: 860px) {
  .grid--wide-split {
    grid-template-columns: 1fr;
  }
}

/* Media cover helper (let an image fill its column height responsively) */
.media-cover {
  display: block;
  width: 100%;
  height: 100%;
}

.media-cover>img.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =====================================================
   Forms: Base Input Focus
   ===================================================== */
input:focus,
textarea:focus {
  outline: 2px solid var(--brand-blue-2);
  border-color: var(--brand-blue-2);
}

/* =====================================================
   Components: Buttons
   ===================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-h);
  padding: 0 var(--btn-px);
  border-radius: 999px;
  font-weight: 600;
  line-height: 1;
  background: var(--brand-blue);
  color: #fff;
  border: 2px solid transparent;
  /* reserve space so .btn.outline matches size */
  cursor: pointer;
  transition: .2s;
}

.btn {
  position: relative;
  justify-content: flex-start;
  gap: 0;
}

.btn .btn-text {
  text-align: left;
  transition: color .2s ease, transform .25s ease;
}

.btn .btn-icon {
  width: 0;
  height: 16px;
  margin-right: 0;
  opacity: 0;
  transform: translateX(-6px);
  transition: width .25s ease, margin-right .25s ease, opacity .2s ease, transform .25s ease;
  background: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}

.btn:hover,
.btn:focus-visible {
  background: var(--accent);
  color: #0b0f12;
}

.btn:hover,
.btn:focus-visible {
  text-decoration: none !important;
}

.btn:hover .btn-icon,
.btn:focus-visible .btn-icon {
  width: 20px;
  margin-right: 8px;
  opacity: 1;
  transform: translateX(0);
}

.btn.outline {
  background: transparent;
  color: var(--brand-blue);
  border: 2px solid var(--brand-blue);
  /* same width as .btn so outer size is identical */
}

.btn.outline:hover,
.btn.outline:focus-visible {
  color: #000;
  border-color: #000;
  background: transparent;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn .btn-icon {
    transition: none;
  }

  .btn .btn-text {
    transition: none;
  }
}

.btn.cta-ms .btn-icon {
  display: none;
}

.btn.cta-ms:hover,
.btn.cta-ms:focus-visible {
  background: var(--accent);
  color: #fff;
  text-decoration: none !important;
}

.btn.cta-ms {
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border-radius: 0;
  position: relative;
  top: calc(-2 * var(--topbar-h) / 2);
  transition: top .25s ease;
  white-space: nowrap;
  font-weight: 900;
}

/* =====================================================
   Layout: Section Blocks
   ===================================================== */
.section {
  padding: clamp(48px, 7vw, 96px) 0;
}

/* Ensure strip sections use a solid white background */
.section.strip {
  background: transparent;
}

/* =====================================================
   Components: Cards
   ===================================================== */
.card {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  border: 1px solid rgba(0, 0, 0, .04);
}

/* Card Grid */
.card-grid .card {
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, outline-color .25s ease;
  will-change: transform, box-shadow;
}

.card-grid .card {
  text-align: left;
}

@media (max-width: 640px) {
  .card-grid .card {
    text-align: center;
  }

  .card-grid .card::before {
    margin: 8px auto 14px;
  }
}

.card-grid .card::before {
  content: "";
  display: none;
  width: clamp(64px, 8vw, 112px);
  aspect-ratio: 1 / 1;
  margin: 8px 0 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Global PNG icon filter */
.card-grid .card::before {
  filter: var(--icon-filter);
}

.card .feature>img[src*="/assets/img/icons/"] {
  filter: var(--icon-filter);
}

.card-grid .card {
  padding-top: 28px;
  min-height: clamp(220px, 28vw, 320px);
}

/* Compact cards (reduced padding/height), used for Segments we support */
.card--tight {
  padding: 16px 18px !important;
  min-height: auto !important;
}

.card--tight h3 {
  margin: 0 0 8px;
}

.card--tight .chips {
  gap: 8px;
}

.card--tight .chip {
  padding: 6px 10px;
  font-size: 13px;
}

/* Hover corner icon (Lucide: external-link) */
.card-grid {
  --hover-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><path d="M15 3h6v6"/><path d="M10 14L21 3"/></svg>');
}

.card-grid .card {
  position: relative;
}

.card-grid .card::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  opacity: 0;
  transform: none;
  transition: none;
  background: #f8fafc;
  pointer-events: none;
  -webkit-mask: var(--hover-icon) no-repeat center / contain;
  mask: var(--hover-icon) no-repeat center / contain;
  z-index: 1;
}

/* Allow per-card opt-out of the hover icon (for non-link informational cards) */
.card-grid .card.no-icon::after {
  display: none !important;
}

.card-grid .card:hover::after,
.card-grid .card:focus-within::after {
  opacity: 1;
  transform: none;
}

.card-grid .card a {
  text-decoration: none;
}

.card-grid .card a:hover {
  text-decoration: none;
}

.card-grid .card:hover {
  transform: translateY(-4px) scale(1.02);
  background-color: var(--brand-blue);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
  border-color: transparent;
}

.card-grid .card:hover h3 {
  color: #f8fafc;
}

.card-grid .card:hover a,
.card-grid .card:hover p,
.card-grid .card:hover small,
.card-grid .card:hover .muted {
  color: #f8fafc;
}

/* Turn facility bullet lists white on hover/focus (scoped to lists we mark up) */

.card-grid .card:hover .list--hover-white li,
.card-grid .card:focus-within .list--hover-white li {
  color: #f8fafc;
}

.card-grid .card:hover .list--hover-white li::marker,
.card-grid .card:focus-within .list--hover-white li::marker {
  color: #f8fafc;
}

@media (hover: none) {

  /* Reduce hover effects on touch devices to prevent jumpiness */
  .card-grid .card:hover,
  .card-grid .card:focus-within {
    transform: none;
    background-color: inherit;
    box-shadow: var(--shadow);
    border-color: inherit;
  }

  .card-grid .card:hover h3,
  .card-grid .card:hover a,
  .card-grid .card:hover p,
  .card-grid .card:hover small,
  .card-grid .card:hover .muted {
    color: inherit;
  }

  /* force left alignment on small screens */
  .card-grid .card {
    text-align: left !important;
  }

  /* Most cards use a .feature wrapper with an <img> icon */
  .card-grid .card .feature {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
  }

  .card-grid .card .feature>img,
  .card-grid .card .feature>svg,
  .card-grid .card .feature>picture>img,
  .card-grid .card .feature-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    margin-top: 2px;
    /* nudge down to align with heading baseline */
    flex: 0 0 auto;
  }

  /* let the text block take the remaining space */
  .card-grid .card .feature>*:not(img):not(svg):not(picture):not(.feature-icon) {
    flex: 1 1 auto;
  }

  /* Fallback: if an icon image is the first direct child of the card */
  .card-grid .card>img:first-child,
  .card-grid .card>picture:first-child {
    float: left;
    width: 56px;
    height: auto;
    margin: 2px 12px 0 0;
  }

  .card-grid .card h3 {
    margin-top: 2px;
  }

  .card-grid .card p {
    margin-top: 8px;
  }
}

/* Embedded Maps (About > Facilities cards) */
.map-embed {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: var(--shadow);
  background: #eef2f7;
  /* subtle fallback while map loads */
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: 420px;
  /* tall enough to show the place card */
  border: 0;
}

@media (max-width: 720px) {
  .map-embed iframe {
    height: 360px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-grid .card {
    transition: none;
  }
}

/* =====================================================
   Typography
   ===================================================== */
h1,
h2,
h3 {
  line-height: 1.2;
}

h1 {
  font-size: clamp(28px, 4vw, 44px);
}

h2 {
  font-size: clamp(22px, 3vw, 32px);
}

h3 {
  font-size: clamp(18px, 2.5vw, 24px);
}

small,
.muted {
  color: var(--muted);
}

main {
  margin-top: 0;
}

/* =====================================================
   Layout: Header & Navigation
   ===================================================== */
.topbar {
  background: #0b0f12;
  color: #cbd5e1;
  font-size: 13px;
  padding: 10px 0;
  min-height: calc(var(--topbar-h) + 8px);
  display: flex;
  align-items: center;
}

.header {
  position: absolute;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.header.scrolled {
  background: #ffffff !important;
  border-bottom-color: #eef2f7 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .06) !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.header.scrolled .nav {
  padding: 0px 0;
  min-height: 56px;
  transition: padding .25s ease, min-height .25s ease;
}

body.has-scrolled .topbar {
  height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  opacity: 0;
  transition: opacity .2s ease, height .2s ease, padding .2s ease;
}

.header.scrolled .nav a,
.header.scrolled .nav .menu a {
  color: #111827 !important;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  min-height: var(--nav-h);
  transition: padding .25s ease, min-height .25s ease;
}

.nav .right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav a {
  color: #111827;
  font-weight: 500;
}

.header:not(.scrolled) .nav a {
  color: #f8fafc !important;
}

.header:not(.scrolled) .nav .menu a {
  color: #ffffff !important;
}

.nav .menu {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav .menu a {
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  overflow: hidden;
}

.nav .menu a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: currentColor;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.nav .menu a:hover {
  text-decoration: none;
  opacity: 1;
}

.nav .menu a:hover::after {
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.header.scrolled .btn.cta-ms {
  top: 0;
}

.mobile-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
  align-items: center;
  justify-content: center;
  position: relative;
}

.mobile-toggle::before,
.mobile-toggle::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 2px;
  background: #111827;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

.mobile-toggle::before {
  transform: translateY(-6px);
}

.mobile-toggle::after {
  transform: translateY(6px);
}

.nav.open .mobile-toggle::before {
  transform: rotate(45deg);
}

.nav.open .mobile-toggle::after {
  transform: rotate(-45deg);
}

/* Header: Mobile Navigation */
@media (max-width: 860px) {
  .btn.cta-ms {
    top: 0;
    height: 44px;
  }

  .header:not(.scrolled) .nav .menu a {
    color: #111827 !important;
  }

  .mobile-toggle {
    display: inline-flex;
  }

  .nav .menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 86px;
    background: white;
    border-top: 1px solid #eef2f7;
    padding: 16px;
  }

  .nav.open .menu {
    display: grid;
    gap: 12px;
  }

  .nav .menu a {
    letter-spacing: normal;
    text-transform: none;
  }

  /* Make the toggle icon-only and remove the outline */
  .mobile-toggle {
    border: 0 !important;
    background: transparent !important;
    font-size: 0;
    line-height: 0;
  }

  /* Before scroll (on dark hero): white bars, drop a bit */
  .header:not(.scrolled) .mobile-toggle {
    margin-top: 6px;
  }

  .header:not(.scrolled) .mobile-toggle::before,
  .header:not(.scrolled) .mobile-toggle::after {
    background: #fff !important;
  }

  /* After scroll (on white header): dark bars, align to collapsed height */
  .header.scrolled .mobile-toggle {
    margin-top: 0;
    background: transparent !important;
  }

  .header.scrolled .mobile-toggle::before,
  .header.scrolled .mobile-toggle::after {
    background: #111827 !important;
  }

  /* Move the dropdown panel to sit under the compact header */
  .header.scrolled .nav .menu {
    top: 72px !important;
  }
}

/* =====================================================
   Components: Hero
   ===================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(0, 168, 255, .10), rgba(107, 188, 235, .10));
  padding: clamp(56px, 9vw, 120px) 0;
}

.hero.has-bg {
  background: #0d1115 url('/assets/img/photos/container-unloading-and-palletising-outside-bptfl-cra1.jpg') center/cover no-repeat;
  color: #fff;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: saturate(0.85) contrast(0.9);
  pointer-events: none;
}

.hero.has-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, #19242d 0%, rgba(25, 36, 45, 0.7) 70%);
  pointer-events: none;
}

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

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

.hero.has-bg .badge {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}

/* Normalise hero subtitle colour on image-backed heroes */
.hero.has-bg .muted {
  color: #e2e8f0;
}

.hero.has-bg .btn.outline {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  background: transparent;
}

.hero.has-bg .btn.outline:hover,
.hero.has-bg .btn.outline:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}

.hero .title {
  max-width: 860px;
}

/* =====================================================
   Components: Badges & Chips
   ===================================================== */
.badges {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.badge {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
}

/* Chips (used across Services/Industries) */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  font-weight: 500;
  font-size: 14px;
  color: var(--text);
}

.kpis {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 24px;
}

.kpi {
  background: white;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  box-shadow: var(--shadow);
  color: var(--text);
}

.kpi b {
  display: block;
  font-size: 22px;
}

@media (max-width: 720px) {
  .kpis {
    grid-template-columns: 1fr;
  }
}

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

@media (max-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   Components: Feature Blocks
   ===================================================== */
.feature {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.feature-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  background: var(--brand-blue);
  color: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* =====================================================
   Forms: Layout & Inputs
   ===================================================== */
.form {
  display: grid;
  gap: 14px;
}

.input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
}

/* =====================================================
   Layout: Footer
   ===================================================== */
.footer {
  background: #0b0f12;
  color: #cbd5e1;
  padding: 48px 0 0;
  position: relative;
  margin-top: clamp(32px, 6vw, 96px);
}

.footer a {
  color: #e2e8f0;
}

.footer h4 {
  color: white;
  margin: 0 0 12px;
}

.footer-contact-wrap {
  padding-bottom: 48px;
}

/* Footer background */
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #0d1115 url('/assets/img/photos/20ft-container-in-cra1-parking-lot.jpg') center/cover no-repeat;
  filter: saturate(0.85) contrast(0.9);
  pointer-events: none;
  z-index: 0;
}

.footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, #19242d 0%, rgba(25, 36, 45, 0.7) 70%);
  pointer-events: none;
  z-index: 0;
}

/* Footer content above background */
.footer>* {
  position: relative;
  z-index: 1;
}

/* Footer logo */
.footer-logo.mb-16 {
  max-width: 152px;
  height: auto;
  display: block;
  margin-left: -30px;
  margin-top: -10px;
}

/* Footer layout */
.footer-left {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* the accent strip sits flush under the blue box */
}

.footer-info-box {
  background: var(--brand-blue);
  color: #fff;
  border-radius: 0;
  padding: 20px;
}

.footer-info-box h4 {
  color: #f8fafc;
  font-size: 22px;
  margin-bottom: 8px;
}

.footer-info-box p {
  color: #f8fafc;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.8;
}

.footer-info-box a {
  color: #ffffff;
  text-decoration: none;
}

/* Link hover */
a:not(.btn):hover,
a:not(.btn):focus-visible {
  text-decoration: none !important;
  font-weight: 700;
}

/* Footer socials */
.footer-accent-socials {
  background: var(--accent);
  border-radius: 0;
  padding: 10px 16px;
}

.footer-accent-socials .socials {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Social buttons */
.footer-accent-socials .socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #0d1115;
  color: var(--accent);
  border: 0;
  padding: 0;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
  will-change: transform, box-shadow;
}

/* Footer left layout */
.footer-left .footer-info-box,
.footer-left .footer-accent-socials {
  border-radius: 0;
}

.footer-left .footer-info-box {
  margin-left: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
}

.footer-left .footer-accent-socials {
  margin-left: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
}

/* Lift the blue info box and round right edges */
.footer-left .footer-info-box {
  position: relative;
  z-index: 1;
  margin-top: -100px;
  border-radius: 0 14px 0 0;
  padding-top: 64px;
  padding-bottom: 48px;
}

/* Accent socials strip rounding */
.footer-left .footer-accent-socials {
  border-radius: 0 0 14px 0;
}

/* Footer: stack columns and reset offsets on mobile */
@media (max-width: 860px) {

  /* Collapse footer grid into one column */
  .footer .grid {
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  /* Remove full-bleed offsets and restore rounded corners */
  .footer-left .footer-info-box,
  .footer-left .footer-accent-socials {
    margin-left: 0;
    padding-left: 0;
    border-radius: 14px;
  }

  .footer-left .footer-info-box {
    margin-top: 0;
    padding: 20px;
  }

  .footer-left .footer-accent-socials {
    padding: 10px 16px;
  }

  /* Tidy the footer logo on mobile */
  .footer-logo.mb-16 {
    margin-left: 0;
    margin-top: 0;
    max-width: 132px;
  }

  /* Main blue block: remove its bottom corners so it butts into the strip */
  .footer-left .footer-info-box {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  /* Accent socials strip: remove its top corners so it butts into the blue block */
  .footer-left .footer-accent-socials {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

/* Normalize strong text inside footer info paragraph */
.footer-info-box p strong {
  font-weight: inherit;
}

/* Accessibility: Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 1px, 1px);
  white-space: nowrap;
  border: 0;
}

/* Icons: Mask Helpers */
.social-icon {
  -webkit-mask: var(--icon) no-repeat center / 70% 70%;
  mask: var(--icon) no-repeat center / 70% 70%;
}

.icon--facebook {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M13.5 9H16V6h-2.5C11.57 6 10 7.57 10 9.5V11H8v3h2v7h3v-7h2.1l.4-3H13v-1.5c0-.28.22-.5.5-.5Z"/></svg>');
}

.icon--instagram {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm5 3.5a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Zm0 2a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Zm5.75-.75a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Z"/></svg>');
}

.icon--linkedin {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M4.98 3.5C4.98 4.88 3.86 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5ZM0 8h5v16H0V8Zm7.5 0h4.8v2.2h.07c.67-1.27 2.3-2.6 4.73-2.6 5.05 0 5.98 3.33 5.98 7.66V24h-5v-6.9c0-1.64-.03-3.74-2.28-3.74-2.28 0-2.63 1.78-2.63 3.62V24h-4.87V8Z"/></svg>');
}

.icon--facebook {
  --icon-size: 80%;
  --icon-inset: 2px;
}

.icon--instagram {
  --icon-size: 74%;
  --icon-inset: 3px;
}

.icon--linkedin {
  --icon-size: 70%;
  --icon-inset: 5px;
}

/* Footer socials hover */
.footer-accent-socials .socials a:hover,
.footer-accent-socials .socials a:focus-visible {
  text-decoration: none;
  opacity: 1;
  background-color: var(--brand-blue);
  color: #fff;
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .22);
}

/* Footer socials icon */
.footer-accent-socials .socials a.social-icon {
  -webkit-mask: none;
  mask: none;
}

.footer-accent-socials .socials a.social-icon::after {
  content: "";
  position: absolute;
  inset: var(--icon-inset, 8px);
  background: currentColor;
  -webkit-mask: var(--icon) no-repeat center / var(--icon-size, 74%);
  mask: var(--icon) no-repeat center / var(--icon-size, 74%);
}

/* Footer responsive */
@media (max-width: 860px) {
  .footer-info-box {
    padding: 16px;
  }

  .footer-accent-socials {
    padding: 8px 12px;
  }

  .footer>.container {
    width: 92vw;
  }
}

/* Footer copyright */
.footer-copyright {
  background: #0d1115;
  color: #cbd5e1;
  font-size: 13px;
}

.footer-copyright .container {
  padding: 12px 0;
  opacity: .9;
}

/* =====================================================
   Components: Accordion
   ===================================================== */
.accordion {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  --chev: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
}

.accordion-item {
  background: #fff;
}

.accordion-item+.accordion-item {
  border-top: 1px solid #e5e7eb;
}

.accordion-header {
  position: relative;
  background: white;
  padding: 16px 48px 16px 16px;
  cursor: pointer;
  font-weight: 600;
  line-height: 1.3;
}

.accordion-header::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%) rotate(0deg);
  transition: transform .2s ease;
  background: currentColor;
  -webkit-mask: var(--chev) no-repeat center / contain;
  mask: var(--chev) no-repeat center / contain;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  background: white;
  padding: 0 16px;
  transition: max-height .25s ease, padding .2s ease;
}

.accordion-item.open .accordion-header::after {
  transform: translateY(-50%) rotate(180deg);
}

.accordion-item.open .accordion-content {
  max-height: 800px;
  padding: 0 16px 16px;
}

/* =====================================================
   Utilities
   ===================================================== */
.m-0 {
  margin: 0;
}

.mt-8 {
  margin-top: 8px;
}

.mt-16 {
  margin-top: 16px;
}

.mt-12 {
  margin-top: 12px;
}

.mb-12 {
  margin-bottom: 12px;
}

.mt-24 {
  margin-top: 24px;
}

.mt-32 {
  margin-top: 32px;
}

.center {
  text-align: center;
}

.shadow {
  box-shadow: var(--shadow);
}

.round {
  border-radius: var(--radius);
}

.rounded {
  border-radius: var(--radius);
}

.bg-white {
  background: white;
}

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

.gap-32 {
  gap: 32px;
}

/* Logo sizing */
.header .nav .logo img,
.footer img.logo-footer {
  height: 4.5rem;
  width: auto;
  display: block;
}

.icon--truck {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 17h4V5H2v12h3"/><path d="M14 17h2l3-4h3V9h-6"/><circle cx="5" cy="17" r="2"/><circle cx="17" cy="17" r="2"/></svg>');
}

.icon--box {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 2 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 22 16Z"/><path d="M2.32 6.16L12 12l9.68-5.84"/><path d="M12 22V12"/></svg>');
}

.icon--forklift {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 12H5a2 2 0 0 0-2 2v5"/><circle cx="13" cy="19" r="2"/><circle cx="5" cy="19" r="2"/><path d="M8 19h3m5-17v17h6M6 12V7c0-1.1.9-2 2-2h3l5 5"/></svg>');
}

.icon--phone {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.86 19.86 0 0 1-8.63-3.07A19.5 19.5 0 0 1 3.15 8.81 19.86 19.86 0 0 1 .08 0.18 2 2 0 0 1 2.06 0h3a2 2 0 0 1 2 1.72c.12.89.3 1.76.57 2.6a2 2 0 0 1-.45 2.11L6.1 8.1a16 16 0 0 0 9.8 9.8l1.67-1.07a2 2 0 0 1 2.11-.45c.84.27 1.71.45 2.6.57A2 2 0 0 1 22 16.92z"/></svg>');
}

.icon--bolt {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>');
}

.icon--check {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17 4 12"/></svg>');
}

.icon--finance {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>');
}

.icon--external {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><path d="M15 3h6v6"/><path d="M10 14L21 3"/></svg>');
}

.icon--user-star {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.051 12.616a1 1 0 0 1 1.909.024l.737 1.452a1 1 0 0 0 .737.535l1.634.256a1 1 0 0 1 .588 1.806l-1.172 1.168a1 1 0 0 0-.282.866l.259 1.613a1 1 0 0 1-1.541 1.134l-1.465-.75a1 1 0 0 0-.912 0l-1.465.75a1 1 0 0 1-1.539-1.133l.258-1.613a1 1 0 0 0-.282-.866l-1.156-1.153a1 1 0 0 1 .572-1.822l1.633-.256a1 1 0 0 0 .737-.535z"/><path d="M8 15H7a4 4 0 0 0-4 4v2"/><circle cx="10" cy="7" r="4"/></svg>');
}

.icon--send {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg>');
}

.icon--messages-square {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/><path d="M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1"/></svg>');
}

.icon--phone-call {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2a9 9 0 0 1 9 9"/><path d="M13 6a5 5 0 0 1 5 5"/><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/></svg>');
}

.icon--factory {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16h.01"/><path d="M16 16h.01"/><path d="M3 19a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8.5a.5.5 0 0 0-.769-.422l-4.462 2.844A.5.5 0 0 1 15 10.5v-2a.5.5 0 0 0-.769-.422L9.77 10.922A.5.5 0 0 1 9 10.5V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z"/><path d="M8 16h.01"/></svg>');
}

/* =====================================================
   Sections: Industries
   ===================================================== */
.industries-list {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 720px) {
  .industries-list {
    grid-template-columns: 1fr;
  }
}

.list {
  padding-left: 18px;
  margin: 0;
}

.list li {
  margin: 6px 0;
}

.industries-list .list,
.industries-list .list li {
  color: var(--muted);
}

/* Legal pages & default lists: ensure list item text uses normal body colour */
main ul,
main ol {
  color: var(--muted);
}

main ul li,
main ol li {
  color: var(--muted);
}

/* Match heights for Industries We Serve pair (desktop) */
@media (min-width: 861px) {

  /* Target only the grid that contains the industries list */
  .container.grid:has(.industries-list) {
    align-items: stretch;
  }

  .container.grid:has(.industries-list)>div {
    display: flex;
  }

  /* Make the card fill the column height */
  .container.grid:has(.industries-list)>div:first-child .card {
    height: 100%;
  }

  /* Make the image fill and crop to the column height */
  .container.grid:has(.industries-list) picture {
    display: block;
    width: 100%;
  }

  .container.grid:has(.industries-list) img.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* crop as needed */
  }
}

/* Force any grid to stack on mobile (keeps natural DOM order) */
@media (max-width: 860px) {
  .stack-mobile {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
}

/* Industries card: pin CTAs to bottom but keep content at top */
@media (min-width: 861px) {
  .container.grid:has(.industries-list)>div:first-child .card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* keep content at top */
  }

  .container.grid:has(.industries-list)>div:first-child .card>.mt-16:last-child {
    margin-top: auto;
    /* push only the CTA row down */
  }
}

/* Extra breathing room around the integration chips */
.container.grid:has(.industries-list) .chips {
  margin-top: 12px;
  margin-bottom: 12px;
}

/* Remove divider line inside Industries card */
.container.grid:has(.industries-list) hr {
  display: none;
}

/* Match heights for any grid with a card-img in one column (desktop) */
@media (min-width: 861px) {

  /* Stretch columns if a direct child contains an image card */
  .container.grid:has(> div > img.card-img),
  .container.grid:has(> div > picture > img.card-img) {
    align-items: stretch;
  }

  .container.grid>div:has(> img.card-img),
  .container.grid>div:has(> picture > img.card-img) {
    display: flex;
  }

  .container.grid>div:not(:has(> img.card-img)):not(:has(> picture > img.card-img)) {
    display: block;
  }

  /* Make images fill and crop to their column */
  .container.grid:has(> div > img.card-img) img.card-img,
  .container.grid:has(> div > picture > img.card-img) img.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* crop as needed (height or width) */
  }
}

/* Balance height when a grid column uses .media-cover (desktop) */
@media (min-width: 861px) {
  .container.grid:has(.media-cover) {
    align-items: stretch;
  }

  .container.grid:has(.media-cover)>div {
    display: flex;
  }

  .container.grid:has(.media-cover)>div:has(.media-cover) {
    display: block;
  }
}

/* =====================================================
   Sections: Partners
   ===================================================== */
.partners-logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* spread 5 logos across one row */
  gap: clamp(12px, 3vw, 28px);
  flex-wrap: nowrap;
  /* keep on one line */
  overflow: hidden;
}

.partners-logos a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  flex: 1 1 0;
  /* allow each logo cell to shrink/grow */
  min-width: 0;
}

.partners-logo {
  height: clamp(28px, 4.8vw, 56px);
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  filter:
    sepia(1) contrast(0.8) brightness(1.2) saturate(0.8);
  transition: transform .25s ease, filter .25s ease;
}

@media (max-width: 860px) {
  .partners-logos {
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 28px;
  }

  .partners-logos a {
    flex: 0 1 auto;
  }
}

.partners-logos a:hover .partners-logo,
.partners-logos a:focus-visible .partners-logo {
  filter: none;
  transform: scale(1.08);
}

/* Tighten top spacing for section titles: Our Services & Our Partners */
.section:has(.card-grid) {
  /* Our Services */
  padding-top: clamp(28px, 5vw, 56px);
}

.section:has(.card-grid) .container>h2 {
  /* remove default heading top margin */
  margin-top: 0;
}

.section:has(.partners-logos) {
  /* Our Partners */
  padding-top: clamp(28px, 5vw, 56px);
}

.section:has(.partners-logos) .container>h2 {
  /* remove default heading top margin */
  margin-top: 0;
}

/* =====================================================
   Forms: Lead Capture
   ===================================================== */
#lead-form {
  display: grid;
  gap: 14px;
}

#lead-form .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 720px) {
  #lead-form .grid {
    grid-template-columns: 1fr;
  }
}

#lead-form .input {
  background: #ffffff;
}

#lead-form .input:focus,
#lead-form select.input:focus,
#lead-form textarea.input:focus {
  outline: 2px solid var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 255, 246, .18);
}

#lead-form .input:invalid:focus {
  border-color: #ef4444;
  outline-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .18);
}

#lead-form label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500 !important;
  color: var(--text) !important;
  /* light backgrounds (contact page) */
}

#lead-form input[type="checkbox"],
#lead-form input[type="radio"] {
  accent-color: var(--accent);
}

#lead-form [hidden] {
  display: none !important;
}

/* Match lead form button to global .btn sizing */
#lead-form .btn {
  align-self: start;
}

/* Inline submit + Turnstile row */
#lead-form .lead-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

#lead-form .lead-actions .btn {
  order: 1;
}

#lead-form .lead-actions .cf-turnstile {
  order: 2;
}

/* Keep sizing tidy */
#lead-form .lead-actions .cf-turnstile iframe {
  display: block;
}

/* On small screens, stack and full‑width button */
@media (max-width: 640px) {
  #lead-form .lead-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #lead-form .lead-actions .btn {
    width: 100%;
  }

  #lead-form .lead-actions .cf-turnstile {
    align-self: flex-start;
  }
}

/* Generic Turnstile tweaks */
#lead-form .cf-turnstile {
  line-height: 0;
}

@media (max-width: 640px) {
  #lead-form .btn {
    width: 100%;
    justify-content: center;
  }
}

#lead-form #lead-result {
  font-size: 14px;
}

/* Lead Form Overrides: Dark Backgrounds */
.footer #lead-form,
.contact-footer #lead-form,
.lead-form--on-dark #lead-form {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.footer #lead-form label,
.contact-footer #lead-form label,
.lead-form--on-dark #lead-form label {
  color: rgba(248, 250, 252, 0.80) !important;
  /* dark footer/contact footer */
}

.footer #lead-form h2,
.footer #lead-form h3,
.footer #lead-form .form-title,
.contact-footer #lead-form h2,
.contact-footer #lead-form h3,
.contact-footer #lead-form .form-title,
.lead-form--on-dark #lead-form h2,
.lead-form--on-dark #lead-form h3,
.lead-form--on-dark #lead-form .form-title {
  color: #f8fafc !important;
}

.footer #lead-form .input,
.footer #lead-form select.input,
.contact-footer #lead-form .input,
.contact-footer #lead-form select.input,
.lead-form--on-dark #lead-form .input,
.lead-form--on-dark #lead-form select.input {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid transparent !important;
  color: rgba(248, 250, 252, 0.80) !important;
  caret-color: #f8fafc;
  font-weight: 500 !important;
}

.footer #lead-form .input:focus,
.footer #lead-form select.input:focus,
.footer #lead-form textarea.input:focus,
.footer #lead-form .input:active,
.footer #lead-form select.input:active,
.footer #lead-form textarea.input:active,
.contact-footer #lead-form .input:focus,
.contact-footer #lead-form select.input:focus,
.contact-footer #lead-form textarea.input:focus,
.contact-footer #lead-form .input:active,
.contact-footer #lead-form select.input:active,
.contact-footer #lead-form textarea.input:active,
.lead-form--on-dark #lead-form .input:focus,
.lead-form--on-dark #lead-form select.input:focus,
.lead-form--on-dark #lead-form textarea.input:focus,
.lead-form--on-dark #lead-form .input:active,
.lead-form--on-dark #lead-form select.input:active,
.lead-form--on-dark #lead-form textarea.input:active {
  color: rgba(248, 250, 252, 1) !important;
}

.footer #lead-form input::placeholder,
.footer #lead-form textarea::placeholder,
.contact-footer #lead-form input::placeholder,
.contact-footer #lead-form textarea::placeholder,
.lead-form--on-dark #lead-form input::placeholder,
.lead-form--on-dark #lead-form textarea::placeholder {
  color: rgba(248, 250, 252, 0.55);
}

/* Keep strong focus ring and accent on dark too */
.footer #lead-form input:not([type="checkbox"]):not([type="radio"]):focus,
.footer #lead-form select:focus,
.footer #lead-form textarea:focus,
.footer #lead-form input:not([type="checkbox"]):not([type="radio"]):active,
.footer #lead-form select:active,
.footer #lead-form textarea:active,
.contact-footer #lead-form input:not([type="checkbox"]):not([type="radio"]):focus,
.contact-footer #lead-form select:focus,
.contact-footer #lead-form textarea:focus,
.contact-footer #lead-form input:not([type="checkbox"]):not([type="radio"]):active,
.contact-footer #lead-form select:active,
.contact-footer #lead-form textarea:active,
.lead-form--on-dark #lead-form input:not([type="checkbox"]):not([type="radio"]):focus,
.lead-form--on-dark #lead-form select:focus,
.lead-form--on-dark #lead-form textarea:focus,
.lead-form--on-dark #lead-form input:not([type="checkbox"]):not([type="radio"]):active,
.lead-form--on-dark #lead-form select:active,
.lead-form--on-dark #lead-form textarea:active {
  color: rgba(248, 250, 252, 1) !important;
  outline: 2px solid var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(0, 255, 246, .18) !important;
}

.card-img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(0, 0, 0, .04);
  border-radius: var(--radius);
}

/* =====================================================
   Page: Testimonials
   ===================================================== */

/* Testimonials: Subtle Hero */
.hero--subtle {
  background: linear-gradient(135deg, rgba(0, 168, 255, .07), rgba(107, 188, 235, .05));
}

/* Testimonials: Masonry Layout */
.quotes-grid {
  /* Use multi-column masonry: 2 columns with a preferred width so it expands on large screens */
  column-count: 2;
  column-width: 420px;
  column-gap: clamp(12px, 2vw, 18px);
  --quote-gap: clamp(14px, 2.5vw, 20px);
  margin-top: 8px;
}

@media (max-width: 900px) {
  .quotes-grid {
    column-count: 1;
    column-width: auto;
  }
}

/* Testimonials: Quote Card */
.quote {
  position: relative;
  padding: 22px 24px 20px 24px;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
  /* lucide quote icon as a mask variable */
  --quote-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/><path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/></svg>');
  /* Masonry behavior */
  display: block;
  /* block works more consistently with CSS columns */
  width: 100%;
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  margin: 0 0 var(--quote-gap);
}

/* Testimonials: Column Spacing */
.quotes-grid .quote+.quote {
  margin-top: var(--quote-gap);
}

/* Testimonials: Decorative Quotes */
.quote::before,
.quote::after {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, .10);
  -webkit-mask: var(--quote-icon) no-repeat center / contain;
  mask: var(--quote-icon) no-repeat center / contain;
  pointer-events: none;
}

/* Opening quote (flipped) */
.quote::before {
  top: 14px;
  left: 14px;
  transform: scaleX(-1);
}

/* Closing quote */
.quote::after {
  bottom: 14px;
  right: 14px;
}

.quote blockquote {
  margin: 20px 0 14px;
  font-size: 1.02rem;
}

.quote figcaption {
  color: var(--muted);
  font-weight: 600;
}

/* Testimonials: Stars */
.stars {
  display: inline-flex;
  gap: 2px;
  color: var(--brand-blue);
}

.stars svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
  flex: 0 0 auto;
}

/* Testimonials: Hover States */
.quote:hover,
.quote:focus-within {
  transform: translateY(-3px) scale(1.01);
  border-color: transparent;
  background: var(--brand-blue);
  color: #f8fafc;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
}

.quote:hover .stars,
.quote:focus-within .stars {
  color: #f8fafc;
}

.quote:hover figcaption,
.quote:focus-within figcaption {
  color: #e9eef7;
}

.quote:hover::before,
.quote:hover::after,
.quote:focus-within::before,
.quote:focus-within::after {
  background: rgba(255, 255, 255, .55);
}

/* Testimonials: Star Variants */
.quote .stars {
  display: flex;
  gap: 6px;
}

.stars--right {
  margin-left: 12%;
}

/* shove to the right */
.stars--filled .lucide-star path {
  /* make stars solid */
  fill: currentColor;
  stroke: none;
}

.stars-lg .lucide-star {
  width: 24px;
  height: 24px;
}

/* Extra spacing for the text (already added classes in HTML) */
.quote-text {
  line-height: 1.7;
}

/* =====================================================
   Sections: Get Started Steps
   ===================================================== */

/* Scoped to #get-started to avoid leaks */
#get-started .steps-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 24px 26px;
  margin-top: 18px
}

#get-started .steps-progress {
  list-style: none;
  margin: 0;
  padding: 0;
  --gap: clamp(16px, 2vw, 28px);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start
}

#get-started .step {
  position: relative
}

/* light connector to next step */
#get-started .step::after {
  content: "";
  position: absolute;
  top: 26px;
  left: 44px;
  right: calc(var(--gap) * -0.5);
  height: 4px;
  background: #E5E7EB;
  border-radius: 999px
}

#get-started .step:last-child::after {
  display: none
}

/* dot */
#get-started .dot {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #E0F2FF;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px rgba(0, 168, 255, .15);
  display: inline-block;
  vertical-align: middle
}

/* animated colour tweaks when states change */
#get-started .dot,
#get-started .step::after {
  transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease
}

#get-started .status {
  transition: color .2s ease
}

#get-started .is-done .dot {
  background: var(--brand-blue, #00a8ff);
  box-shadow: 0 0 0 3px rgba(0, 168, 255, .25)
}

#get-started .is-active .dot {
  background: var(--accent, #00fff6);
  border-color: var(--accent, #00fff6);
  box-shadow: 0 0 0 4px rgba(0, 168, 255, .20);
}

#get-started .is-done::after {
  background: var(--brand-blue, #00a8ff)
}

/* labels */
#get-started .step-kicker {
  display: block;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, #6B7280);
  margin-top: 8px
}

#get-started .step h3 {
  margin: 6px 0 6px
}

#get-started .status {
  font-size: .85rem;
  margin: .25rem 0 0
}

#get-started .status.done {
  color: #059669
}

#get-started .status.progress {
  color: var(--brand-blue, #00a8ff)
}

#get-started .status.pending {
  color: var(--muted, #6B7280)
}

@media (max-width: 980px) {
  #get-started .steps-progress {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  #get-started .step:nth-child(3n)::after {
    right: 0
  }
}

@media (max-width: 720px) {
  #get-started .steps-progress {
    grid-template-columns: 1fr
  }

  #get-started .step::after {
    left: 44px;
    right: 0
  }
}

/* =====================================================
   Mobile General Adjustments
   ===================================================== */
@media (max-width: 860px) {

  /* Hero titles */
  .hero .title h1 {
    /* a touch more space below the nav on mobile  */
    margin-top: clamp(44px, 4vw, 28px);
  }

  /* pages that have .title */
  .hero .title h1,
  /* pages where H1 sits directly in the container */
  .hero>.container>h1 {
    margin-top: clamp(44px, 4vw, 28px);
  }

  /* Section headings */
  .section h2 {
    margin-top: clamp(16px, 4.5vw, 28px);
  }

  .section h3 {
    margin-top: clamp(12px, 4vw, 24px);
  }
}

/* Mobile: Stack Service Rows */
@media (max-width: 860px) {

  /* Any 2-col grids inside a section container that are NOT card grids */
  .section .container>.grid:not(.card-grid):not(.industries-list):not(.quotes-columns) {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* Put the visual on top when it’s an immediate child of the grid */
  .section .container>.grid>img,
  .section .container>.grid>picture,
  .section .container>.grid>figure,
  .section .container>.grid>.media,
  .section .container>.grid>.card-img {
    order: -1;
    /* image first */
    width: 100%;
    height: auto;
  }

  /* Opt-out helper: add .no-stack to any grid that should keep two columns */
  .section .container>.grid.no-stack {
    grid-template-columns: initial !important;
  }
}

/* Mobile: Health & Compliance + Industries Pair */
@media (max-width: 860px) {

  /* Any strip section where the direct .container has an inline grid column style */
  .section.strip>.container.grid[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    /* stack */
    gap: 16px;
    /* keep spacing tidy */
  }

  .section.strip>.container.grid[style*="grid-template-columns"]>* {
    margin: 0 !important;
    /* neutralise any column spacing hacks */
  }
}

.section .container.grid.stack-mobile {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  /* text | image, like before */
  column-gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

/* keep service images tidy */
.section .container.grid.stack-mobile .card-img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* =====================================================
   Layout: Two-Up Cards
   ===================================================== */

/* Desktop/default */
.two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
}

/* Mobile: stack */
@media (max-width: 860px) {
  .two-up {
    grid-template-columns: 1fr !important;
  }

  .two-up>* {
    margin: 0 !important;
    /* neutralize any column spacing hacks */
  }
}

/* Mobile: Segments We Support */
@media (max-width: 860px) {

  /* Many segment cards use .card--tight; force any grid hosting them to 1 column */
  .section:has(.card--tight) .container>.grid,
  .section:has(.card--tight) .card-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* Keep each segment card full‑width */
  .section:has(.card--tight) .card {
    width: 100%;
  }
}