/* home-build 4f9d673cc22015ac: generated by scripts/build-home.mjs from styles.css (purged for the home page) + home.css. Edit those, then run "npm run build:home". */
:root {
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-primary-light: #3b82f6;
  --color-secondary: #0f172a;
  --color-accent: #10b981;
  --color-accent-light: #34d399;
  --color-accent-dark: #047857; /* white text passes AA on this green */
  --color-text: #1e293b;
  --color-text-light: #64748b;
  --color-text-lighter: #94a3b8;
  --color-background: #ffffff;
  --color-background-alt: #f8fafc;
  --color-background-dark: #0f172a;
  --color-border: #e2e8f0;
  --color-canada: #dc2626;
  --font-heading: "Urbanist", sans-serif;
  --font-body: "DM Sans", sans-serif;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
  --gradient-primary: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-dark) 100%
  );
  --gradient-accent: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-accent) 100%
  );
  --gradient-premium: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-background);
  overflow-x: hidden;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast);
}
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}
h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-secondary);
}
h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
}
h2 {
  font-size: clamp(2rem, 4vw, 3rem);
}
h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}
p {
  color: var(--color-text-light);
}
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
}
.section {
  padding: 4rem 0;
}
.section--dark {
  background-color: var(--color-background-dark);
  color: var(--color-background);
}
.section--alt {
  background-color: var(--color-background-alt);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  white-space: nowrap;
}
.btn--primary {
  background: var(--gradient-primary);
  color: white;
  box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.4);
}
.btn--primary:hover,
.btn--white:hover {
  transform: translateY(-2px);
}
.btn--primary:hover {
  box-shadow: 0 6px 20px 0 rgba(37, 99, 235, 0.5);
}
.btn--secondary {
  background: transparent;
  color: var(--color-secondary);
  border: 2px solid var(--color-border);
}
.btn--secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn--secondary-light {
  background: transparent;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
}
.btn--secondary-light:hover {
  border-color: white;
  background: rgba(255, 255, 255, 0.1);
}
.btn--white {
  background: white;
  color: var(--color-secondary);
}
.btn--white:hover {
  box-shadow: var(--shadow-lg);
}
.btn--large {
  padding: 1rem 2rem;
  font-size: 1.125rem;
}
.btn--full {
  width: 100%;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes slideInfinite {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.animate-delay-1 {
  transition-delay: 0.1s;
}
.animate-delay-2 {
  transition-delay: 0.2s;
}
.animate-delay-3 {
  transition-delay: 0.3s;
}
.animate-delay-4 {
  transition-delay: 0.4s;
}
.animate-delay-5 {
  transition-delay: 0.5s;
}

.services__header,
.process__header,
.testimonials__header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
}

.services__header h2,
.process__header h2,
.testimonials__header h2 {
  margin-bottom: 1rem;
}

.services__header p,
.process__header p,
.testimonials__header p {
  font-size: 1.125rem;
  color: var(--color-text-light);
}

.services__label,
.process__label,
.testimonials__label,
.why-us__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: 1.25rem;
}

.services__label::before,
.process__label::before,
.testimonials__label::before,
.why-us__label::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: 50%;
}
.process__label {
  color: var(--color-accent);
}
.process__label::before {
  background: var(--color-accent);
}
.card {
  background: white;
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}
.lead {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.stat__value {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
}
.stat__value {
  margin-bottom: 0.5rem;
}

.cta__bg-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.03) 1px,
    transparent 1px
  );
  background-size: 30px 30px;
}

.cta {
  padding: 6rem 0;
  background: var(--gradient-primary);
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.03) 1px,
    transparent 1px
  );
  background-size: 30px 30px;
}
.cta > .container {
  position: relative;
  z-index: 1;
}
.cta__title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: white;
  margin-bottom: 1rem;
}
.cta__description {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 700px;
  margin: 0 auto 2rem;
}
.cta__buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1002;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  transition: all var(--transition-base);
}
.header.scrolled {
  box-shadow: var(--shadow-md);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0;
}
.header__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.header__logo img {
  width: 50px;
  height: 50px;
}
.header__logo-text {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-secondary);
}
.header__nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.header__nav-link {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-text);
  position: relative;
}
.header__nav-link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width var(--transition-base);
}
.header__nav-link:hover::after {
  width: 100%;
}
.header__nav-link:hover {
  color: var(--color-primary);
}
.header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.header__mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1002;
  position: relative;
}
.header__mobile-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-secondary);
  transition: all var(--transition-base);
  transform-origin: center;
}
.header__mobile-toggle.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.header__mobile-toggle.is-active span:nth-child(2) {
  opacity: 0;
  transform: translateX(-10px);
}
.header__mobile-toggle.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.header__mobile-actions {
  display: none;
}
@media (max-width: 1024px) {
  .header__nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 400px;
    max-height: 75vh;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    align-content: start;
    padding: 5rem 1.25rem 1.25rem;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    z-index: 1001;
    overflow-y: auto;
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
    backdrop-filter: blur(10px);
  }
  .header__nav.is-open {
    transform: translateX(0);
    animation: slideInRight 0.3s ease-out;
  }
  @keyframes slideInRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  .header__nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-secondary);
    background: white;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  .header__nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-primary);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--transition-base);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }
  .header__nav-link:hover,
  .header__nav-link:active {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.04) 0%, rgba(16, 185, 129, 0.04) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.2);
  }
  .header__nav-link:hover::before {
    transform: scaleY(1);
  }
  .header__nav-link::after {
    content: '→';
    font-size: 1rem;
    font-weight: 700;
    opacity: 0;
    transform: translateX(-6px);
    transition: all var(--transition-base);
    color: var(--color-primary);
  }
  .header__nav-link:hover::after {
    opacity: 1;
    transform: translateX(2px);
  }
  .header__mobile-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 1.25rem;
    border-top: 2px solid var(--color-border);
  }
  .header__mobile-actions .btn {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    white-space: nowrap;
  }
  .header__mobile-actions .btn--primary {
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  }
  .header__mobile-actions .btn--secondary {
    border-width: 1.5px;
  }
  .header__actions {
    display: none;
  }
  .header__mobile-toggle {
    display: flex;
  }
  body.menu-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    animation: fadeIn 0.3s ease;
  }
  body.menu-open {
    overflow: hidden;
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}
@media (max-width: 480px) {
  .header__nav {
    max-width: 100%;
    padding: 5rem 1rem 1rem;
    gap: 0.625rem;
  }
  .header__nav-link {
    padding: 0.875rem 0.75rem;
    font-size: 0.875rem;
  }
  .header__mobile-actions {
    gap: 0.5rem;
    padding-top: 1rem;
    margin-top: 0.25rem;
  }
  .header__mobile-actions .btn {
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
  }
}
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 80px;
  overflow: hidden;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}
@media (max-width: 640px) {
  .hero {
    min-height: auto;
    padding-top: 100px;
    padding-bottom: 4rem;
  }
  /* Hide decorative stats card on mobile to prevent blocking images */
}
.clients {
  padding: 5rem 0;
  background: white;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}
.clients__title {
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-light);
  margin-bottom: 3rem;
}
.clients__track {
  display: flex;
  animation: slideInfinite 60s linear infinite;
  will-change: transform;
  width: fit-content;
}
.clients__list {
  display: flex;
  align-items: center;
  gap: 5rem;
  flex-shrink: 0;
  min-width: max-content;
}
.clients__list:first-of-type {
  padding-right: 5rem;
}
.clients__logo {
  height: 80px;
  width: auto;
  max-width: 350px;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all var(--transition-base);
}
.clients__logo:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}
.clients__logo[src*="bc-transit"] {
  max-width: 240px;
  max-height: 80px;
  height: auto;
  width: auto;
}
.clients__logo[src*="rt-prime"] {
  width: 200px;
  height: auto;
}
@media (max-width: 768px) {
  .clients {
    padding: 4rem 0;
  }
  .clients__title {
    font-size: 0.875rem;
    margin-bottom: 2rem;
  }
  .clients__logo {
    height: 60px;
  }
  .clients__list {
    gap: 3rem;
    padding-right: 3rem;
  }
}
.services {
  padding: 6rem 0;
  background: var(--color-background-alt);
}
.services__title {
  margin-bottom: 1rem;
}
.services__description {
  font-size: 1.125rem;
}
.process {
  padding: 6rem 0;
  background: var(--color-background-dark);
  color: white;
}
.process__title {
  color: white;
  margin-bottom: 1rem;
}
.process__description {
  font-size: 1.125rem;
  color: var(--color-text-lighter);
}
.process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  position: relative;
}
.process__steps::before {
  content: "";
  position: absolute;
  top: 50px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: var(--gradient-accent);
  opacity: 0.3;
}
.process-step {
  text-align: center;
  position: relative;
}
.process-step__number {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  background: linear-gradient(
    135deg,
    rgba(37, 99, 235, 0.2) 0%,
    rgba(16, 185, 129, 0.2) 100%
  );
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primary-light);
  position: relative;
  z-index: 1;
  transition: all var(--transition-base);
}
.process-step:hover .process-step__number {
  background: var(--gradient-accent);
  color: white;
  transform: scale(1.1);
}
.process-step__title {
  font-size: 1.25rem;
  color: white;
  margin-bottom: 0.5rem;
}
.process-step__description {
  font-size: 0.95rem;
  color: var(--color-text-lighter);
}
/* Dark process band: keep body copy light (the shared header/step rules use the light-background grey) */
.process .process__header p,
.process .process-step__description {
  color: var(--color-text-lighter);
}
@media (max-width: 1024px) {
  .process__steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .process__steps::before {
    display: none;
  }
}
@media (max-width: 640px) {
  .process__steps {
    grid-template-columns: 1fr;
  }
}
.stats {
  padding: 4rem 0;
  background: var(--gradient-primary);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.stat {
  text-align: center;
  color: white;
}
.stat__label {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.9;
}
@media (max-width: 768px) {
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}
.why-us {
  padding: 6rem 0;
}
.why-us__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.why-us__text {
  order: 0;
}
.why-us__title {
  margin-bottom: 1.5rem;
}
.why-us__description {
  font-size: 1.125rem;
  margin-bottom: 2rem;
}
.why-us__features {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.why-us__feature {
  display: flex;
  gap: 1rem;
}
.why-us__feature-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-background-alt);
  border-radius: var(--radius-lg);
  color: var(--color-primary);
}
.why-us__feature-icon svg {
  width: 24px;
  height: 24px;
}
.why-us__feature-content p {
  font-size: 0.95rem;
}
.why-us__visual {
  position: relative;
  order: 1;
}
@media (max-width: 1024px) {
  .why-us__content {
    grid-template-columns: 1fr;
  }
  .why-us__visual {
    order: 0;
    max-width: 600px;
    margin: 0 auto;
  }
  .why-us__text {
    order: 1;
  }
}
.testimonials {
  padding: 6rem 0;
  background: var(--color-background-alt);
}
.testimonials__title {
  margin-bottom: 1rem;
}
.footer {
  background: var(--color-secondary);
  color: white;
  padding-top: 4rem;
}
.footer__main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer__brand {
  max-width: 300px;
}
.footer__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.footer__logo img {
  width: 50px;
  height: 50px;
}
.footer__logo-text {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
}
.footer__tagline {
  color: var(--color-text-lighter);
  margin-bottom: 1.5rem;
}
.footer__social {
  display: flex;
  gap: 1rem;
}
.footer__social-link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  color: white;
  transition: all var(--transition-fast);
}
.footer__social-link:hover {
  background: var(--color-primary);
  transform: translateY(-2px);
}
.footer__social-link svg {
  width: 20px;
  height: 20px;
}
.footer__address-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin-top: 1.5rem;
  padding: 1rem 1.125rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  color: var(--color-text-lighter);
  overflow: hidden;
  transition: transform var(--transition-base), background var(--transition-base),
    border-color var(--transition-base), box-shadow var(--transition-base),
    color var(--transition-base);
}
.footer__address-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}
.footer__address-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(37, 99, 235, 0.12);
  color: white;
}
.footer__address-card:hover::before {
  transform: scaleX(1);
}
.footer__address-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(37, 99, 235, 0.2);
  border-radius: var(--radius-md);
  color: var(--color-primary-light);
  transition: transform var(--transition-base), background var(--transition-base),
    color var(--transition-base);
}
.footer__address-card:hover .footer__address-icon {
  transform: scale(1.08) translateY(-1px);
  background: rgba(37, 99, 235, 0.35);
  color: white;
}
.footer__address-icon svg {
  width: 18px;
  height: 18px;
}
.footer__address-text {
  font-size: 0.875rem;
  line-height: 1.55;
  font-style: normal;
}
@media (prefers-reduced-motion: reduce) {
  .footer__address-card,
  .footer__address-card::before,
  .footer__address-icon {
    transition: none;
  }
  .footer__address-card:hover {
    transform: none;
  }
  .footer__address-card:hover .footer__address-icon {
    transform: none;
  }
}
.footer__column h3 {
  color: white;
  font-size: 1rem;
  margin-bottom: 1.5rem;
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer__link {
  color: var(--color-text-lighter);
  transition: color var(--transition-fast);
}
.footer__link:hover {
  color: white;
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
  font-size: 0.875rem;
  color: var(--color-text-lighter);
}
.footer__bottom p {
  color: inherit;
}
@media (max-width: 1024px) {
  .footer__main {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer__brand {
    grid-column: span 2;
  }
}
@media (max-width: 640px) {
  .footer__main {
    grid-template-columns: 1fr;
  }
  .footer__brand {
    grid-column: span 1;
  }
  .footer__bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}
@media (max-width: 768px) {
  /* Adjust specs card on mobile to ensure it doesn't block image */
  /* Left-align breadcrumb and tech badge on mobile */
}

/* Light variant for parts grid inside what-we-build--alt */
@media (max-width: 768px) {
  .cta {
    padding: 4rem 0;
  }
}
.btn--full {
  width: 100%;
}

/* ========================================
   Industry Pages - Additional Styles
   ======================================== */

/* Section Tag */

/* Applications List */

/* Process Section */
.process-step {
  text-align: center;
  position: relative;
}
.process-step__number {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  background: linear-gradient( 135deg, rgba(37, 99, 235, 0.2) 0%, rgba(16, 185, 129, 0.2) 100% );
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primary-light);
  position: relative;
  z-index: 1;
  transition: all var(--transition-base);
}
.process-step__title {
  font-size: 1.25rem;
  color: white;
  margin-bottom: 0.5rem;
}
.process-step__description {
  color: var(--color-text-light);
  font-size: 0.9375rem;
  line-height: 1.6;
}


/* Intro Section */

/* Applications Section with Image */

/* CAD Callout */

/* Quote Section with Image */

/* Parts Grid Features Variant */

/* What We Build Alt Background */

/* Temporary closure notice (instant quote & contact) */
.closure-notice {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: min(420px, calc(100vw - 2rem));
  max-width: min(420px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: none;
  border-radius: var(--radius-xl);
  background: transparent;
  box-shadow: none;
}
.closure-notice::backdrop {
  background: rgb(15 23 42 / 0.55);
  backdrop-filter: blur(4px);
}
.closure-notice__panel {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.75rem 1.75rem 1.5rem;
  background: var(--color-background);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  text-align: center;
}
.closure-notice--fallback .closure-notice__panel {
  width: min(420px, calc(100vw - 2rem));
  flex-shrink: 0;
}
.closure-notice--fallback {
  top: 0;
  left: 0;
  transform: none;
  inset: 0;
  z-index: 10000;
  max-width: none;
  width: 100%;
  max-height: none;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(15 23 42 / 0.55);
  backdrop-filter: blur(4px);
}
.closure-notice--fallback::backdrop {
  display: none;
}
.closure-notice__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text-light);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.closure-notice__close:hover {
  color: var(--color-secondary);
  background: var(--color-background-alt);
}
.closure-notice__eyebrow {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}
.closure-notice__title {
  font-size: clamp(1.35rem, 3vw, 1.6rem);
  margin-bottom: 0.75rem;
  color: var(--color-secondary);
}
.closure-notice__text {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-light);
  margin-bottom: 1.25rem;
}
.closure-notice__action {
  width: 100%;
}

/* ===== SLS service page (photo-led, full-bleed) ===== */

/* Spec strip overlapping hero */

/* Section header compact */

/* Inline links in location page cards are underlined, not just coloured */

/* Hidden from view, still read by screen readers */

/* Links inside section intros are underlined, not just coloured */

/* Gallery grid */

/* Material + process */

/* Finishing & colour */

/* Compare */

/* FAQ accordion */

/* Comparison table row links */

/* Link to the dyeing blog post */

/* ===== SLA service page (resin library) ===== */
/* Studio hero: no photo, a tray of resin samples is the visual */

/* Job selector: pick what the part has to do, see the resin */
@keyframes ma-pop {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
}

/* Full resin library: filters + cards */
@keyframes ma-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Surface roughness chart (dark finishing panel) */

/* ===== 3D printing services hub (photo-led, expanding process columns) =====
   Scoped to main.pc-page. Reuses .ma-sh, .ma-compare and .ma-faq from the SLS page. */

/* First screen */

/* Expanding photo columns */
/* Details reveal: animates height with the 0fr -> 1fr grid trick */
/* Readability: a solid backing fades in behind the text when a column opens */
/* The whole card links to its process page; an arrow badge shows once it's open */

/* How it works: one example order, day by day */

/* Specs, folded away for the people who want them */

/* Condensed page: smaller section headings than the site default */

/* Short laptop screens: keep columns tall enough for the details */
@media (min-width: 1025px) and (max-height: 760px) {
  /* Short screens: hide the "best for" line while a column is open */
}

@media (max-width: 1024px) {
  /* Tablets and phones: swipeable cards; tap one to open its details */
}
/* Proof strip at the top of "How it works" */

/* ===== 3D scanning service page (original -> scan -> new piece) =====
   Scoped to main.sc-page. Reuses .ma-hero/.ma-studio, .ma-strip, .ma-sh,
   .ma-finder, .ma-tile and .ma-faq from the SLS and SLA pages. */

/* Hero visual: one object as a deck of cards. Position 0 is the front card,
   1 waits on the right, 2 on the left. */
/* Auto-advance: the active step's bar fills and the deck moves on when the
   animation ends. Hover, focus or scrolling away pauses it; a click stops it. */
@keyframes sc-fill {
  to {
    width: 100%;
  }
}

/* Highlights card overlapping the hero, in place of a spec strip */

/* Job picker: photos instead of resin samples */
/* Original / 3D scan side by side in a picker panel */
/* Scans on a dark studio background: show the whole piece */

/* Big projects & proven results: dark band, photo mosaic + side panel */
/* Client logos, knocked out to white on the dark band */
/* Pure-black source art inverts to full white; dim it to match the raster logos */

/* ===== FDM service page (proven jobs, material ladders, compare-all chart) ===== */
/* ===== FDM service page: shared bits (reuses the .ma-* system in styles.css) ===== */

/* Hero: full-bleed photo of a real batch, text on the left */
/* Spec strip sits between the hero and the dark proof band */

/* Dark band: same navy as the hero, blue accents only */

/* What FDM is best at: real jobs on the dark band */

/* Materials: good / better / best by need */

/* Materials view switch: simple picker <-> full table */

/* Colours in stock */

/* How it works: photo + four steps (reuses the SLS process layout) */

/* Design considerations: infill demo + design limits */

/* ===== Home page =====
         Everything below is new; base styles come from /styles.css. */

      /* Fallback faces sized to match Urbanist and DM Sans (measured from the font files), so text
         does not re-wrap and shift the layout when the web fonts arrive */
      @font-face {
        font-family: "Urbanist Fallback";
        src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold");
        font-weight: 700 900;
        size-adjust: 96.21%;
        ascent-override: 98.75%;
        descent-override: 25.99%;
        line-gap-override: 0.00%;
      }
      @font-face {
        font-family: "Urbanist Fallback";
        src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto");
        font-weight: 400 600;
        size-adjust: 100.21%;
        ascent-override: 94.80%;
        descent-override: 24.95%;
        line-gap-override: 0.00%;
      }
      @font-face {
        font-family: "DM Sans Fallback";
        src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto");
        font-weight: 400 500;
        size-adjust: 104.21%;
        ascent-override: 95.19%;
        descent-override: 29.75%;
        line-gap-override: 0.00%;
      }
      :root {
        --font-heading: "Urbanist", "Urbanist Fallback", sans-serif;
        --font-body: "DM Sans", "DM Sans Fallback", sans-serif;
      }
      :root {
        --ink: #0b1224;
        --fdm: #60a5fa;
        --sla: #2dd4bf;
        --sls: #fbbf24;
        --metal: #a78bfa;
        --cad: #f472b6;
        --scan: #34d399;
        --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
        --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
        --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
      }
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
      }

      /* ---------- Hero shell (shared by the three concepts) ---------- */
      .hx {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        color: #fff;
        background:
          radial-gradient(55% 80% at 88% -10%, rgba(37, 99, 235, 0.42) 0%, transparent 62%),
          radial-gradient(42% 60% at -5% 105%, rgba(16, 185, 129, 0.13) 0%, transparent 60%),
          var(--ink);
      }
      .hx::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
        background-size: 56px 56px;
        -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%);
        mask-image: linear-gradient(180deg, #000, transparent 80%);
      }
      .hx[data-hero="c"]::before {
        display: none;
      }
      .hx-v {
        display: none;
      }
      .hx[data-hero="a"] .hx-a,
      .hx[data-hero="b"] .hx-b,
      .hx[data-hero="c"] .hx-c {
        display: block;
      }
      .container.hx-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(2rem, 4.5vw, 4.75rem);
        align-items: center;
        min-height: 100svh;
        padding-top: calc(90px + 2.25rem);
        padding-bottom: 3rem;
      }
      .hx-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.42rem 0.85rem 0.42rem 0.55rem;
        border-radius: 999px;
        border: 1px solid rgba(147, 197, 253, 0.22);
        background: rgba(147, 197, 253, 0.07);
        color: #bfdbfe;
        font: 600 0.76rem/1 var(--font-heading);
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .hx-flag {
        width: 20px;
        height: 14px;
        border-radius: 2px;
        background: url("/images/flag-square-250.png") center / cover no-repeat;
      }
      .hx-h1 {
        color: #fff;
        font-size: clamp(2.3rem, 4.3vw, 3.75rem);
        font-weight: 800;
        line-height: 1.05;
        letter-spacing: -0.022em;
        margin: 1.15rem 0;
      }
      .hx-h1 .hl,
      .hx-h1 .hlw {
        background: linear-gradient(120deg, #bfdbfe 0%, #60a5fa 50%, #3b82f6 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        padding-bottom: 0.15em;
        margin-bottom: -0.15em;
      }
      .hx-lead {
        color: #cbd5e1;
        font-size: clamp(1.04rem, 1.2vw, 1.18rem);
        max-width: 35rem;
      }
      .hx-cta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin: 1.8rem 0 1.5rem;
      }
      .hx-feats {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1.35rem;
        list-style: none;
        color: #cbd5e1;
        font-size: 0.95rem;
      }
      .hx-feats li {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
      }
      .hx-feats svg {
        width: 18px;
        height: 18px;
        color: var(--color-accent-light);
        flex: none;
      }
      /* Entrance: words of the heading rise out of a mask, the rest fades up after */
      .sw {
        display: inline-block;
        overflow: hidden;
        vertical-align: top;
        padding-bottom: 0.22em;
        margin-bottom: -0.22em;
      }
      .sw > span {
        display: inline-block;
        transform: translateY(108%);
        animation: sw-up 0.95s var(--ease-out) forwards;
        animation-delay: calc(0.08s + var(--i) * 60ms);
      }
      @keyframes sw-up {
        to {
          transform: none;
        }
      }
      .hx-rise > * {
        animation: hx-rise 0.9s var(--ease-out) both;
      }
      .hx-rise > :nth-child(1) { animation-delay: 0.02s; }
      .hx-rise > :nth-child(2) { animation: none; }
      .hx-rise > :nth-child(3) { animation-delay: 0.45s; }
      .hx-rise > :nth-child(4) { animation-delay: 0.55s; }
      .hx-rise > :nth-child(5) { animation-delay: 0.65s; }
      .hx-rise > :nth-child(6) { animation-delay: 0.75s; }
      @keyframes hx-rise {
        from {
          opacity: 0;
          transform: translateY(16px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      /* The hero card only fades in, and never from opacity 0 or from a shifted position. Chrome ignores an image for
         good if its first paint is at opacity 0, so on a fast connection (photos arrive before this animation
         starts) the first project was never a paint candidate, and the first hero swap ~9 s later became the LCP.
         A card that is still rising also shows less of itself above the fold of a short screen than it does later,
         so a later photo would be the larger paint there too. */
      .hx-pop {
        animation: hx-pop 1.1s var(--ease-out) 0.25s both;
      }
      @keyframes hx-pop {
        from {
          opacity: 0.01;
        }
        to {
          opacity: 1;
        }
      }

      /* ---------- Shared "print" reveal: an image builds bottom-up, layer by layer ---------- */
      .rv {
        position: absolute;
        inset: 0;
        pointer-events: none;
        --hx: 50%;
      }
      .rv__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        clip-path: inset(var(--y, 0%) 0 0 0);
      }
      .rv__tex {
        position: absolute;
        inset: 0;
        clip-path: inset(var(--y, 0%) 0 0 0);
        opacity: 0;
        transition: opacity 0.9s ease;
        mix-blend-mode: overlay;
        background: repeating-linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.16) 0 1px,
          rgba(0, 0, 0, 0.14) 1px 2px,
          transparent 2px 4px
        );
      }
      /* Moving parts ride full-size layers shifted with transforms, so the motion causes no layout shift.
         Percentages in translate() are of the layer itself, which is the size of the stage. */
      .rv__front,
      .rv__hot,
      .rv__track {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 0.3s;
        will-change: transform;
      }
      .rv__front,
      .rv__hot {
        transform: translateY(var(--y, 0%));
      }
      .rv__track {
        transform: translate(var(--hx), var(--y, 0%));
      }
      .rv__front::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -1px;
        height: 2px;
        background:
          radial-gradient(70px 4px at var(--hx) 50%, #fff, transparent),
          linear-gradient(90deg, transparent, var(--c) 8%, var(--c) 92%, transparent);
        box-shadow: 0 0 12px 1px var(--c);
      }
      .rv__hot {
        mix-blend-mode: screen;
      }
      .rv__hot::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 10%;
        background: linear-gradient(180deg, color-mix(in srgb, var(--c) 60%, transparent), transparent);
      }
      .rv__head {
        position: absolute;
        left: 0;
        top: 0;
        transform: translate(-50%, -100%);
      }
      .rv.is-building .rv__tex,
      .rv.is-building .rv__front,
      .rv.is-building .rv__track {
        opacity: 1;
      }
      .rv.is-building .rv__hot {
        opacity: 0.85;
      }
      .rv__nozzle {
        display: none;
        width: 38px;
        height: 53px;
        overflow: visible;
        filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55));
      }
      .rv__bead {
        fill: #fff;
        filter: drop-shadow(0 0 3px var(--c)) drop-shadow(0 0 7px var(--c));
      }
      .rv__laser {
        display: none;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #fff;
        transform: translateY(50%);
        box-shadow:
          0 0 6px 2px #fff,
          0 0 16px 5px var(--c),
          0 0 38px 12px color-mix(in srgb, var(--c) 45%, transparent);
      }
      .rv[data-tech="fdm"] .rv__nozzle,
      .rv[data-tech="sla"] .rv__laser {
        display: block;
      }

      .lb__laser i {
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--scan);
        box-shadow: 0 0 8px var(--scan), 0 0 22px var(--scan);
      }
      .lb__laser i:nth-child(1) { top: -12px; opacity: 0.55; }
      .lb__laser i:nth-child(2) { top: -1px; opacity: 0.8; }
      .lb__laser i:nth-child(3) { top: 10px; }

      /* ---------- Hero A: live build ---------- */
      .lb {
        --c: var(--fdm);
        position: relative;
        margin: 0;
        padding: 10px;
        border-radius: 22px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
        border: 1px solid rgba(255, 255, 255, 0.11);
        box-shadow: 0 50px 90px -45px rgba(0, 0, 0, 0.9);
      }
      .lb::after {
        content: "";
        position: absolute;
        left: 12%;
        right: 12%;
        bottom: -26px;
        height: 70px;
        z-index: -1;
        background: radial-gradient(closest-side, var(--c), transparent);
        opacity: 0.35;
        filter: blur(22px);
      }
      .lb__stage {
        position: relative;
        aspect-ratio: 4 / 3;
        border-radius: 14px;
        overflow: hidden;
        background: var(--ink);
      }
      .lb__stage > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      /* From the second project on every photo is 0.2% smaller (under half a pixel an edge, hidden by the stage's
         overflow). Chrome keeps the first image it painted as the page's largest paint and replaces it with any later
         image that is even 1px2 larger, which made a hero swap seconds later the LCP. Never let one be larger.
         (home.js sets the same scale inline on .lb__out, which this rule cannot override.) */
      .lb.is-later .lb__stage > img,
      .lb.is-later .rv__img {
        transform: scale(0.998);
      }
      .lb__grid {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image:
          linear-gradient(rgba(147, 197, 253, 0.09) 1px, transparent 1px),
          linear-gradient(90deg, rgba(147, 197, 253, 0.09) 1px, transparent 1px);
        background-size: 28px 28px;
        clip-path: inset(0 0 calc(100% - var(--y, 0%)) 0);
      }
      .lb__out {
        opacity: 0;
      }
      /* Scan projects: the original is wiped away by the second laser pass, leaving its digital twin */
      .lb__orig {
        opacity: 0;
        clip-path: inset(0 0 var(--ob, 0%) 0);
      }
      .lb.has-scan .lb__orig {
        opacity: 1;
      }
      .lb.has-scan .lb__pts {
        background: url("/images/home/scan-points.png") 0 0 / 120px 120px;
      }
      .lb__pts {
        position: absolute;
        inset: 0;
        pointer-events: none;
        mix-blend-mode: screen;
        clip-path: inset(0 0 calc(100% - var(--pc, 0%)) 0);
        opacity: var(--po, 0);
      }
      .lb__laser {
        position: absolute;
        inset: 0;
        transform: translateY(var(--sy, 0%));
        will-change: transform;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.25s;
      }
      .lb.is-scanning .lb__laser {
        opacity: 1;
      }
      .lb__sheen {
        position: absolute;
        inset: 0;
        pointer-events: none;
        transform: translateX(-130%);
        background: linear-gradient(
          105deg,
          transparent 30%,
          rgba(255, 255, 255, 0.28) 48%,
          rgba(255, 255, 255, 0.05) 56%,
          transparent 70%
        );
      }
      .lb.is-done .lb__sheen {
        animation: lb-sheen 1.2s var(--ease) forwards;
      }
      @keyframes lb-sheen {
        to {
          transform: translateX(130%);
        }
      }
      .lb__hud {
        position: absolute;
        top: 12px;
        left: 12px;
        right: 12px;
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
        pointer-events: none;
      }
      .lb__pill {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.38rem 0.62rem;
        border-radius: 999px;
        background: rgba(11, 18, 36, 0.74);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.13);
        color: #e2e8f0;
        font: 600 0.68rem/1 var(--mono);
        letter-spacing: 0.07em;
        text-transform: uppercase;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }
      .lb__pill i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--c);
        box-shadow: 0 0 8px var(--c);
        flex: none;
      }
      .lb__pill b {
        color: #fff;
      }
      .lb__status {
        position: absolute;
        left: 12px;
        bottom: 14px;
      }
      .lb__status.is-done i {
        background: var(--color-accent-light);
        box-shadow: 0 0 8px var(--color-accent-light);
      }
      .lb__bar {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: rgba(255, 255, 255, 0.1);
      }
      /* A full-width strip slid in from the left (home.js sets the transform), so progress costs no layout */
      .lb__bar i {
        display: block;
        height: 100%;
        transform: translateX(-100%);
        opacity: 0;
        background: var(--c);
        box-shadow: 0 0 10px var(--c);
      }
      .lb__cap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.85rem 0.45rem 0.3rem 0.4rem;
        min-height: 4.3rem;
      }
      .lb__items {
        min-width: 0;
        margin: 0;
        padding: 0;
        list-style: none;
        transition: opacity 0.35s, transform 0.35s var(--ease);
      }
      .lb__items.is-swap {
        opacity: 0;
        transform: translateY(6px);
      }
      /* Only the current project shows; the others stay in the page for crawlers and screen readers */
      .lb__item:not(.is-on) {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
      }
      .lb__item a {
        display: block;
        color: inherit;
      }
      .lb__title {
        display: block;
        color: #fff;
        font: 700 1.02rem/1.3 var(--font-heading);
      }
      .lb__more {
        display: inline-block;
        margin-top: 0.2rem;
        color: #93c5fd;
        font-size: 0.85rem;
        font-weight: 500;
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-color: rgba(147, 197, 253, 0.4);
      }
      .lb__item a:hover .lb__more,
      .lb__item a:focus-visible .lb__more {
        color: #fff;
      }
      .lb__nav {
        display: flex;
        align-items: center;
        flex: none;
      }
      .lb__dot {
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
        transition: width 0.4s var(--ease);
      }
      .lb__dot::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.28);
        transition: width 0.4s var(--ease), background 0.3s;
      }
      .lb__dot[aria-current="true"] {
        width: 38px;
      }
      .lb__dot[aria-current="true"]::before {
        width: 26px;
        background: linear-gradient(90deg, var(--c) var(--dp, 0%), rgba(255, 255, 255, 0.16) 0);
      }
      .lb__pause {
        width: 34px;
        height: 34px;
        margin-left: 0.4rem;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: #e2e8f0;
        display: grid;
        place-items: center;
        transition: background 0.2s, border-color 0.2s;
      }
      .lb__pause:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.4);
      }
      .lb__pause[hidden] {
        display: none;
      }
      .lb__pause svg {
        width: 14px;
        height: 14px;
      }
      .lb__pause .i-play,
      .lb__pause[aria-pressed="true"] .i-pause {
        display: none;
      }
      .lb__pause[aria-pressed="true"] .i-play {
        display: block;
      }

      /* ---------- Services: live process cards ---------- */
      .svx {
        position: relative;
        padding: 6rem 0;
        background: var(--color-background-alt);
      }
      .sv-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
      }
      .sv {
        display: flex;
        flex-direction: column;
        border-radius: 18px;
        background: #fff;
        border: 1px solid var(--color-border);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.3s;
      }
      .sv:hover {
        transform: translateY(-6px);
        box-shadow: 0 30px 50px -25px rgba(15, 23, 42, 0.35);
        border-color: transparent;
      }
      .sv__view {
        position: relative;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background: radial-gradient(120% 100% at 50% 0%, #142449 0%, var(--ink) 70%);
      }
      .sv__view::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(148, 163, 184, 0.07) 1px, transparent 1px),
          linear-gradient(90deg, rgba(148, 163, 184, 0.07) 1px, transparent 1px);
        background-size: 20px 20px;
      }
      .sv__view::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(60% 55% at 50% 100%, color-mix(in srgb, var(--c) 20%, transparent), transparent 70%);
      }
      .sv__view canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
      .sv__tag,
      .sv__how {
        position: absolute;
        z-index: 1;
        font: 600 0.64rem/1 var(--mono);
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .sv__tag {
        top: 10px;
        left: 10px;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.32rem 0.55rem;
        border-radius: 999px;
        background: rgba(11, 18, 36, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #e2e8f0;
      }
      .sv__tag i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--c);
        box-shadow: 0 0 6px var(--c);
      }
      .sv__how {
        left: 12px;
        bottom: 10px;
        color: #94a3b8;
        letter-spacing: 0.04em;
        text-transform: none;
        font-weight: 500;
      }
      .sv__body {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        flex: 1;
        padding: 1.35rem 1.4rem 1.5rem;
      }
      .sv__body h3 {
        font-size: 1.2rem;
      }
      .sv__body p {
        font-size: 0.95rem;
      }
      .sv__more {
        margin-top: auto;
        padding-top: 0.4rem;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font: 700 0.92rem var(--font-heading);
        color: var(--color-primary);
      }
      .sv__more svg {
        width: 16px;
        height: 16px;
        transition: transform 0.3s var(--ease);
      }
      .sv:hover .sv__more svg {
        transform: translateX(4px);
      }

      /* ---------- How it works: scroll-linked rail + animated step icons ---------- */
      .prx {
        position: relative;
      }
      .prx .process__steps::before {
        display: none;
      }
      .pr-rail {
        position: absolute;
        top: 50px;
        left: 12.5%;
        right: 12.5%;
        height: 2px;
        border-radius: 2px;
        background: rgba(148, 163, 184, 0.18);
      }
      .pr-rail i {
        position: absolute;
        inset: 0;
        transform-origin: left;
        transform: scaleX(var(--prog, 0));
        background: linear-gradient(90deg, #3b82f6, #10b981);
        box-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
      }
      .prx .process-step__number {
        background: rgba(15, 23, 42, 0.95);
        border-color: rgba(148, 163, 184, 0.3);
        color: #64748b;
        transition: border-color 0.5s, background 0.5s, box-shadow 0.5s, color 0.5s, transform 0.5s var(--ease);
      }
      .prx .process-step.is-on .process-step__number {
        border-color: #60a5fa;
        color: #fff;
        background: radial-gradient(circle at 50% 30%, rgba(37, 99, 235, 0.4), rgba(15, 23, 42, 0.95));
        box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.12), 0 0 30px rgba(59, 130, 246, 0.45);
      }
      .prx .process-step:hover .process-step__number {
        transform: none;
      }
      .pr-ico {
        width: 46px;
        height: 46px;
        overflow: visible;
      }
      .pr-n {
        position: absolute;
        top: -2px;
        right: -2px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #1e293b;
        border: 2px solid currentColor;
        color: inherit;
        font: 800 0.8rem/1 var(--font-heading);
      }
      .is-on .pr-up__a { animation: pr-up 1.6s var(--ease) infinite; }
      @keyframes pr-up {
        0% { transform: translateY(7px); opacity: 0; }
        30%, 70% { opacity: 1; }
        100% { transform: translateY(-7px); opacity: 0; }
      }
      .pr-cfg circle { transform-box: fill-box; }
      .is-on .pr-cfg .k1 { animation: pr-k 2.4s var(--ease) infinite; }
      .is-on .pr-cfg .k2 { animation: pr-k 2.4s var(--ease) -0.8s infinite reverse; }
      .is-on .pr-cfg .k3 { animation: pr-k 2.4s var(--ease) -1.6s infinite; }
      @keyframes pr-k {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(12px); }
      }
      .pr-prt rect { transform-box: fill-box; transform-origin: left; }
      .is-on .pr-prt .l1 { animation: pr-l 2.4s var(--ease) infinite; }
      .is-on .pr-prt .l2 { animation: pr-l 2.4s var(--ease) 0.3s infinite; }
      .is-on .pr-prt .l3 { animation: pr-l 2.4s var(--ease) 0.6s infinite; }
      @keyframes pr-l {
        0% { transform: scaleX(0); opacity: 1; }
        25%, 80% { transform: scaleX(1); opacity: 1; }
        100% { transform: scaleX(1); opacity: 0; }
      }
      .is-on .pr-dlv__box { animation: pr-bob 1.2s ease-in-out infinite; }
      .is-on .pr-dlv__s { stroke-dasharray: 6 4; animation: pr-dash 0.6s linear infinite; }
      @keyframes pr-bob {
        50% { transform: translateY(-2px); }
      }
      @keyframes pr-dash {
        to { stroke-dashoffset: 10; }
      }

      /* ---------- Stats: odometer digits ---------- */
      .stats {
        position: relative;
      }
      .od {
        display: inline-flex;
        align-items: flex-start;
      }
      .od__col {
        display: inline-block;
        height: 1em;
        overflow: hidden;
      }
      .od__strip {
        display: flex;
        flex-direction: column;
        transition: transform 2.2s var(--ease-out);
        transition-delay: calc(var(--i) * 110ms);
      }
      .od__strip span {
        display: block;
        height: 1em;
        line-height: 1;
        text-align: center;
      }

      /* ---------- Why us: delivery map ---------- */
      .why-us {
        position: relative;
      }
      @property --mr {
        syntax: "<percentage>";
        inherits: false;
        initial-value: 0%;
      }
      .mp {
        position: relative;
        margin: 0;
        padding: 1.25rem 1.25rem 1.15rem;
        border-radius: 24px;
        background: radial-gradient(80% 60% at 8% 78%, rgba(37, 99, 235, 0.07), transparent 60%), #f8fafc;
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-lg);
      }
      .mp__map {
        position: relative;
      }
      .mp__land {
        display: block;
        width: 100%;
        height: auto;
        -webkit-mask-image: radial-gradient(circle at 7.7% 75.6%, #000 var(--mr), transparent calc(var(--mr) + 14%));
        mask-image: radial-gradient(circle at 7.7% 75.6%, #000 var(--mr), transparent calc(var(--mr) + 14%));
        transition: --mr 2.4s var(--ease);
      }
      .mp.is-on .mp__land {
        --mr: 150%;
      }
      .mp__svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
      }
      .mp__arc {
        fill: none;
        stroke: url(#mpg);
        stroke-width: 2.8;
        stroke-linecap: round;
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        transition:
          stroke-dashoffset 1.2s var(--ease-out) calc(0.7s + var(--i) * 0.14s),
          stroke-width 0.25s,
          opacity 0.25s;
      }
      .mp.is-on .mp__arc {
        stroke-dashoffset: 0;
      }
      .mp.has-hot .mp__arc {
        opacity: 0.22;
      }
      .mp.has-hot .mp__arc.is-hot {
        opacity: 1;
        stroke-width: 5;
      }
      .mp__city {
        fill: #fff;
        stroke: var(--color-primary);
        stroke-width: 3.5;
        transform-box: fill-box;
        transform-origin: center;
        transform: scale(0);
        transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) calc(1.6s + var(--i) * 0.14s), fill 0.2s;
      }
      .mp.is-on .mp__city {
        transform: scale(1);
      }
      .mp__city.is-hot {
        fill: var(--color-primary);
      }
      .mp__pin {
        fill: var(--color-canada);
        stroke: #fff;
        stroke-width: 4;
      }
      .mp__ring {
        fill: none;
        stroke: var(--color-canada);
        stroke-width: 2.5;
        transform-box: fill-box;
        transform-origin: center;
        opacity: 0;
        animation: mp-ring 2.6s var(--ease-out) infinite;
      }
      .mp__ring + .mp__ring {
        animation-delay: 1.3s;
      }
      @keyframes mp-ring {
        0% { transform: scale(0.6); opacity: 0.7; }
        100% { transform: scale(3.4); opacity: 0; }
      }
      .mp__pkt {
        fill: var(--color-primary);
        filter: drop-shadow(0 0 4px rgba(37, 99, 235, 0.8));
      }
      .mp__lab {
        position: absolute;
        transform: translate(-50%, calc(-100% - 14px));
        padding: 0.28rem 0.5rem;
        border-radius: 8px;
        background: #fff;
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
        color: #0f172a;
        font: 700 0.76rem/1.15 var(--font-heading);
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.5s calc(1.8s + var(--i, 0) * 0.14s);
      }
      .mp__lab--below {
        transform: translate(-50%, 14px);
      }
      .mp.is-on .mp__lab {
        opacity: 1;
      }
      .mp__lab small {
        display: block;
        font: 500 0.66rem/1.2 var(--font-body);
        color: #93c5fd;
      }
      .mp__lab--origin {
        transform: translate(-16%, 20px);
        background: #0f172a;
        border-color: #0f172a;
        color: #fff;
        transition-delay: 0.3s;
      }
      .mp__cap {
        margin-top: 0.85rem;
      }
      .mp__cap p {
        font-size: 0.92rem;
        color: #475569;
      }
      .mp__cap p b {
        color: #0f172a;
      }
      .mp__list {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-top: 0.75rem;
      }
      .mp__list a {
        display: inline-flex;
        align-items: baseline;
        gap: 0.35rem;
        padding: 0.35rem 0.65rem;
        border-radius: 999px;
        background: #fff;
        border: 1px solid var(--color-border);
        color: #0f172a;
        font: 600 0.8rem var(--font-heading);
        transition: border-color 0.2s, background 0.2s, color 0.2s;
      }
      .mp__list a:hover,
      .mp__list a:focus-visible {
        border-color: var(--color-primary);
        background: #eff6ff;
        color: var(--color-primary-dark);
      }
      .mp__list small {
        font: 500 0.72rem var(--font-body);
        color: #64748b;
      }

      /* ---------- Reviews ---------- */
      .rvw {
        max-width: 820px;
        margin: 0 auto;
        padding: 2rem 2.25rem;
        border-radius: 20px;
        background: #fff;
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
      }
      .rvw__stars {
        color: #f59e0b;
        font-size: 1.15rem;
        letter-spacing: 2px;
      }
      .rvw__quote {
        margin: 0.8rem 0 1.1rem;
      }
      .rvw__quote p {
        color: var(--color-text);
        font-size: 1.06rem;
        line-height: 1.7;
      }
      .rvw__by {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem 1rem;
        font-size: 0.92rem;
        color: var(--color-text-light);
      }
      .rvw__by b {
        color: var(--color-secondary);
      }
      .rvw__by a {
        color: var(--color-primary-dark);
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 3px;
      }

      /* ---------- CTA: slow layer-line texture ---------- */
      .ctx {
        isolation: isolate;
      }
      .ctx__lines {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
        -webkit-mask-image: radial-gradient(70% 90% at 50% 50%, #000 20%, transparent 75%);
        mask-image: radial-gradient(70% 90% at 50% 50%, #000 20%, transparent 75%);
      }
      .ctx__lines::before {
        content: "";
        position: absolute;
        inset: -40px 0;
        background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0 1px, transparent 1px 8px);
        animation: ct-drift 6s linear infinite;
      }
      .ctx__lines::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.12) 50%, transparent 70%);
        transform: translateX(-100%);
        animation: ct-sheen 8s var(--ease) infinite;
      }
      @keyframes ct-drift {
        to { transform: translateY(-40px); }
      }
      @keyframes ct-sheen {
        0%, 55% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
      }

      /* Loops that never end are parked while their section is off screen (home.js toggles .is-away) */
      .is-away,
      .is-away *,
      .is-away *::before,
      .is-away *::after {
        animation-play-state: paused !important;
      }

      /* ---------- Responsive ---------- */
      @media (max-width: 1024px) {
        .container.hx-wrap,
        .container.mf__inner {
          grid-template-columns: minmax(0, 1fr);
          min-height: 0;
          padding-top: calc(90px + 2rem);
          padding-bottom: 3rem;
        }
        .container.tw {
          grid-template-areas: "intro" "stage" "paths" "cta";
        }
        .tw__stage {
          margin-top: 1.75rem;
        }
        .lb,
        .tw__stage {
          width: 100%;
          max-width: 640px;
        }
        /* Stacked: title and subheading, then the animation, then the buttons and the rest.
           The text block dissolves into the grid so the card can sit between its children. */
        .hx-a .container.hx-wrap {
          row-gap: 0;
        }
        .hx-a .hx-text {
          display: contents;
        }
        .hx-a .hx-eyebrow {
          order: 1;
          justify-self: start;
        }
        .hx-a .hx-h1 {
          order: 2;
        }
        .hx-a .hx-lead {
          order: 3;
        }
        .hx-a .lb {
          order: 4;
          margin-top: 1.75rem;
          animation-delay: 0.5s;
        }
        .hx-a .hx-cta {
          order: 5;
        }
        .hx-a .hx-feats {
          order: 6;
        }
        .container.mf__inner {
          min-height: 100svh;
          padding-bottom: 1.5rem;
        }
        .mf__side {
          justify-items: start;
        }
        .mf__shade {
          background:
            linear-gradient(180deg, rgba(11, 18, 36, 0.7) 0%, rgba(11, 18, 36, 0.86) 50%, rgba(11, 18, 36, 0.95) 100%);
        }
        .sv-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .pr-rail {
          display: none;
        }
      }
      @media (max-width: 640px) {
        .hx-h1 {
          font-size: clamp(2.05rem, 9.5vw, 2.6rem);
        }
        .hx-feats {
          font-size: 0.88rem;
        }
        .lb__pill,
        .tw__steps li {
          font-size: 0.58rem;
          padding: 0.3rem 0.45rem;
        }
        .tw__steps li b {
          display: none;
        }
        .lb__title {
          font-size: 0.95rem;
        }
        .lb__cap {
          flex-direction: column;
          align-items: flex-start;
          gap: 0.5rem;
          min-height: 6.6rem;
        }
        .lb__nav {
          margin-left: -6px;
        }
        .tw__path {
          grid-template-columns: 38px 1fr;
          padding: 0.7rem 0.8rem;
        }
        .tw__ico {
          width: 38px;
          height: 38px;
        }
        .tw-quote {
          inset: 15% 6% auto;
          padding: 0.7rem;
          gap: 0.35rem;
        }
        .tw-quote__h {
          font-size: 0.88rem;
        }
        .tw-row {
          grid-template-columns: 30px 1fr auto;
          gap: 0.5rem;
          padding: 0.28rem 0.4rem;
        }
        .tw-row img {
          width: 30px;
          height: 30px;
        }
        .tw-row b {
          font-size: 0.7rem;
        }
        .tw-row span {
          font-size: 0.66rem;
        }
        .tw-quote__f {
          font-size: 0.7rem;
          padding-top: 0.4rem;
        }
        .tw-quote__btn {
          padding: 0.45rem;
          font-size: 0.76rem;
        }
        .tw-file {
          font-size: 0.66rem;
        }
        .mk__long {
          display: none;
        }
        .sv-grid {
          grid-template-columns: minmax(0, 1fr);
        }
        .mk {
          left: 8px;
          right: 8px;
          bottom: 8px;
          max-width: none;
          justify-content: center;
          font-size: 0.72rem;
        }
        .mk__label,
        .mk__sep {
          display: none;
        }
        .mk button {
          padding: 0.45rem 0.55rem;
        }
      }

      /* ---------- Reduced motion: final frames, no autoplay ---------- */
      html.reduce-motion *,
      html.reduce-motion *::before,
      html.reduce-motion *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: 0.001ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
      }
      html.reduce-motion .clients__track {
        animation: none !important;
      }
      html.reduce-motion .animate-on-scroll {
        opacity: 1;
        transform: none;
      }
      html.reduce-motion .mf__img.is-on {
        transform: none;
      }
      html.reduce-motion .ctx__lines,
      html.reduce-motion .mp__ring,
      html.reduce-motion .lb__sheen {
        display: none;
      }