/* ——— Home / Landing ——— */

.home-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #909090;
}

.home-section-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 48px;
  line-height: 1.2;
  color: #fff;
}

.home-section-title-center {
  text-align: center;
  max-width: 1014px;
  margin: 0 auto;
}

.home-section-title-left {
  max-width: 712px;
}

/* The page is offset under the shared fixed header like every other page,
   so the hero fills what is left of the viewport. */
.page-home .home-hero {
  height: calc(100vh - var(--header-height));
  height: calc(100svh - var(--header-height));
  height: calc(100dvh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
}

.home-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
  background: #0a0a0a;
}

.home-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  border: 0;
  pointer-events: none;
  z-index: 0;
}

/* Full-bleed left readability overlay (live site + Figma video hero) */
.home-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.7) 20%,
    rgba(0, 0, 0, 0.2) 60%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.home-hero-volume {
  position: absolute;
  left: 24px;
  bottom: 28px;
  z-index: 4;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  background: rgba(20, 20, 20, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 8px 24px rgba(0, 0, 0, 0.28);
  transition: background 0.2s ease, transform 0.2s ease;
}

.home-hero-volume:hover {
  background: rgba(40, 40, 40, 0.62);
  transform: translateY(-1px);
}

.home-hero-volume:focus-visible {
  outline: 2px solid #f68121;
  outline-offset: 3px;
}

.home-hero-volume-icon {
  display: inline-flex;
  line-height: 0;
}

.home-hero-volume.is-muted .home-hero-volume-icon--on {
  display: none;
}

.home-hero-volume.is-muted .home-hero-volume-icon--off {
  display: inline-flex;
}

.home-hero-volume:not(.is-muted) .home-hero-volume-icon--off {
  display: none;
}

.home-hero-inner {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: min(1211px, 100%);
  height: 100%;
  padding: clamp(120px, 18vh, 220px) 120px clamp(80px, 10vh, 140px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(40px, 8vh, 100px);
}

.home-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
  max-width: 900px;
}

.home-hero-title {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -3px;
  color: #fff;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.home-hero-sub {
  margin: 0;
  width: 100%;
  max-width: 900px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 25px;
  color: rgba(255, 255, 255, 0.9);
}

.home-hero-ctas {
  display: flex;
  align-items: center;
  gap: 21px;
  flex-shrink: 0;
}

.home-btn-primary img {
  transform: scaleX(-1);
}

.home-btn-glass {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 21px;
  border-radius: 12px;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
  letter-spacing: -0.1px;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  background: rgba(51, 51, 51, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 0 2px rgba(0, 0, 0, 0.1),
    0 1px 8px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 1px 1px 0 rgba(255, 255, 255, 0.28),
    inset -1px -1px 0 rgba(255, 255, 255, 0.08);
  transition: background 0.25s ease, transform 0.25s ease;
}

.home-btn-glass:hover {
  background: rgba(70, 70, 70, 0.5);
}

.home-btn-primary {
  transition: transform 0.25s ease, filter 0.25s ease;
}

.home-btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.home-hero-copy,
.home-hero-ctas {
  animation: home-hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-hero-ctas {
  animation-delay: 0.12s;
}

.home-verticals {
  animation: home-hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}

@keyframes home-hero-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Other verticals card — bottom-right */
.home-verticals {
  position: absolute;
  right: 32px;
  bottom: 32px;
  left: auto;
  z-index: 3;
  width: 291px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16.55px;
  padding: 15.17px 16.55px 16.55px;
  /* Figma 2746:8328 ("v3") — 291.03 x 120.06, fill #131313 at 80%, radius 11.03.
     No stroke and no drop shadow on the card in the design. */
  background: rgba(19, 19, 19, 0.8);
  border: 0;
  border-radius: 11.03px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: visible;
  transform-origin: right bottom;
  transition:
    width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-verticals:hover,
.home-verticals:focus-within {
  width: 368px;
}

.home-verticals-head {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16.55px;
  width: 100%;
}

.home-verticals-title {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16.55px;
  line-height: 27.59px;
  letter-spacing: -0.17px;
  color: #f4f4f4;
  white-space: nowrap;
}

.home-verticals-close {
  width: 27.6px;
  height: 27.6px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4.6px;
  border-radius: 4.6px;
  flex-shrink: 0;
}

.home-verticals-x {
  position: relative;
  display: block;
  width: 18.4px;
  height: 18.4px;
}

.home-verticals-x img {
  position: absolute;
  inset: 25%;
  width: 50%;
  height: 50%;
}

.home-verticals-logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.home-vert-avatar {
  position: relative;
  width: 44.14px;
  height: 44.14px;
  border-radius: 50%;
  flex-shrink: 0;
  /* no overlap — Figma spaces the five marks evenly across the row */
  margin-right: 0;
  box-shadow: 0 0 0 1.38px #666;
  background: #222;
  overflow: visible;
  text-decoration: none;
  color: inherit;
  z-index: 1;
  transition:
    margin 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    z-index 0s linear 0.15s;
}

.home-vert-avatar:last-child {
  margin-right: 0;
}

.home-verticals:hover .home-vert-avatar,
.home-verticals:focus-within .home-vert-avatar {
  margin-right: 10px;
}

.home-verticals:hover .home-vert-avatar:last-child,
.home-verticals:focus-within .home-vert-avatar:last-child {
  margin-right: 0;
}

.home-vert-avatar-media {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: inherit;
}

.home-vert-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-vert-avatar--mark {
  background: #fff;
}

.home-vert-avatar--logo {
  background: #fff;
}

.home-vert-avatar-fill {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 50%;
}

.home-vert-avatar-fill img {
  width: 25.4px;
  height: 25px;
  object-fit: contain;
}

.home-vert-avatar::after {
  content: attr(data-name);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px);
  padding: 6px 10px;
  border-radius: 8px;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  color: #f4f4f4;
  font-family: "Fustat", "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  transition:
    opacity 0.18s ease 0.08s,
    transform 0.18s ease 0.08s;
}

.home-vert-avatar::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  width: 8px;
  height: 8px;
  background: #111;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transform: translateX(-50%) rotate(45deg) translateY(6px);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition:
    opacity 0.18s ease 0.08s,
    transform 0.18s ease 0.08s;
}

.home-vert-avatar:hover,
.home-vert-avatar:focus-visible {
  z-index: 3;
  transform: scale(1.08);
  box-shadow: 0 0 0 1.38px #f57f2a;
  outline: none;
  transition-delay: 0s;
}

.home-vert-avatar:hover::after,
.home-vert-avatar:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.home-vert-avatar:hover::before,
.home-vert-avatar:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) rotate(45deg) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .home-verticals,
  .home-vert-avatar,
  .home-vert-avatar::after,
  .home-vert-avatar::before {
    transition: none;
  }
}

@media (hover: none) {
  .home-vert-avatar::after,
  .home-vert-avatar::before {
    display: none;
  }
}

@media (max-width: 1680px) {
  .home-verticals {
    left: auto;
    right: 30px;
  }
}

@media (max-width: 1100px) {
  .home-hero-inner {
    padding: clamp(110px, 14vh, 180px) 48px 80px;
    gap: 48px;
    height: 100%;
    top: 0;
  }

  .home-hero-title {
    font-size: clamp(40px, 5.5vw, 56px);
    letter-spacing: -2px;
  }

  .home-hero-shade {
    width: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
  }

  /* Keep the card on tablet/phone — it used to be display:none here, which is
     why Other Verticals never appeared below 1100. Don't grow to 368px. */
  .home-verticals,
  .home-verticals:hover,
  .home-verticals:focus-within {
    display: flex;
    width: min(291px, calc(100vw - 48px));
    right: 24px;
    bottom: 24px;
  }

  .home-verticals:hover .home-vert-avatar,
  .home-verticals:focus-within .home-vert-avatar {
    margin-right: 0;
  }
}

/* Trusted */
.home-trusted {
  position: relative;
  height: auto;
  padding: 56px 0;
  background: linear-gradient(180deg, #000 0%, #212121 100%);
  border-top: 1px solid #070707;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.home-trusted-inner {
  width: 1473px;
  max-width: calc(100% - 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding-top: 0;
}

.home-trusted-label {
  margin: 0;
  width: 100%;
  font-family: "Fustat", sans-serif;
  font-weight: 600;
  font-size: 25.16px;
  line-height: normal;
  letter-spacing: 3.77px;
  text-transform: uppercase;
  color: #909090;
  text-align: center;
}

.home-trusted-track-wrap {
  /* full-bleed: the marquee runs edge to edge, escaping the 1473px inner column */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 96px;
  overflow: hidden;
  /* feather both ends so a logo leaving the viewport fades out instead of being
     sliced in half at the screen edge */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
}

.home-trusted-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  height: 100%;
  animation: home-marquee 45s linear infinite;
}

.home-trusted-track img {
  /* One canvas height for every mark; the canvas already sizes each logo's ink
     optically (badges ~55px, wide wordmarks ~28px), so the row reads even.
     Height AND max-width are both set so a wide wordmark can never balloon. */
  height: 60px;
  max-width: 240px;
  opacity: 1;
}

/* Light mode: the band follows the page ground so the marks read dark on it. */
html[data-theme="light"] .home-trusted {
  background: var(--bg-elevated);
  border-top-color: var(--border);
}
html[data-theme="light"] .home-trusted-label { color: var(--text-grey); }

@keyframes home-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* About + stats */
.home-about {
  position: relative;
  padding: 0 0 80px;
  background: linear-gradient(180deg, #000 0%, #212121 40%, #1d1d1d 100%);
  overflow: visible;
}

.home-about-glow {
  position: absolute;
  left: 50%;
  top: -246px;
  transform: translateX(-50%);
  width: 623px;
  height: 257px;
  background: rgba(224, 105, 0, 0.5);
  border-radius: 200px;
  filter: blur(300px);
  pointer-events: none;
}

.home-about-intro {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1332px;
  margin: 0 auto;
  padding: 122px 40px 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.home-about-kicker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.home-about .home-eyebrow {
  margin: 0;
}

.home-about-title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.2;
  color: #fff;
  max-width: 799px;
}

.home-about-body-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1055px;
}

.home-about-body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

.home-stats-block {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* Figma 687:19342 — section padding 0 120px. The gutter is on the CLIP box so
     the rail is cut at the gutter line on BOTH sides; with the pad on the rail
     itself the right-hand card ran flush to the screen edge. */
  padding: 0 120px 28px;
  box-sizing: border-box;
  overflow: clip;
  display: flex;
  flex-direction: column;
}

/* Arrows sit under the rail so the copy-to-cards gap stays as tight as Figma */
.home-stats-head {
  order: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  margin: 16px 0 0;
}

.home-stats-block:not(.is-scrollable) .home-stats-head {
  display: none;
}

.home-stats-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-stats-arrow {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: #f4f4f4;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.home-stats-arrow svg {
  display: block;
  width: 18px;
  height: 18px;
}

.home-stats-arrow:hover:not(:disabled) {
  border-color: #f68121;
  background: rgba(246, 129, 33, 0.14);
  color: #f68121;
}

.home-stats-arrow:active:not(:disabled) {
  background: rgba(246, 129, 33, 0.22);
}

.home-stats-arrow:disabled {
  opacity: 0.32;
  cursor: default;
}

.home-stats-arrow:focus-visible {
  outline: 2px solid #f68121;
  outline-offset: 3px;
}

.home-stats {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
  padding: 12px 0 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  /* land on a card edge, never mid-card */
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
}

.home-stats::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.home-stat-card {
  position: relative;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  flex: 0 0 358px;
  width: 358px;
  min-width: 358px;
  height: 448px;
  border-radius: 20px;
  background: #262626;
  border: 1px solid #383737;
  padding: 32px 34px;
  overflow: hidden;
  overflow: clip;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateZ(0);
  transition: transform 0.22s ease, border-color 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
  .home-stat-card:hover,
  .home-stat-card:focus-visible {
    border-color: #f68121;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-stat-card {
    transition: border-color 0.2s ease;
  }

  .home-stat-card:hover {
    transform: none;
  }
}

.home-stat-num {
  margin: 0;
  font-family: var(--font-stat);
  font-weight: 700;
  font-size: 63px;
  line-height: 72px;
  height: 72px;
  letter-spacing: -2px;
  color: #f4f4f4;
  white-space: nowrap;
}

.home-stat-num-sm { font-size: 48px; }
.home-stat-num-md { font-size: 56px; }

.home-stat-desc {
  margin: 0;
  width: 100%;
  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 0.25px;
  color: #e6e5e6;
}

/* Figma 290:6076 — a 550px panel inside a clipped 448px card.
   Hover moves it up by exactly 355px, revealing image + Know More. */
.home-stat-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 262px;
  height: 550px;
  box-sizing: border-box;
  padding: 32px;
  background: #262626;
  display: flex;
  flex-direction: column;
  gap: 22px;
  z-index: 1;
  transform: translateY(0);
  transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.home-stat-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* The panel is 550px tall inside a 448px card, so anything past the tag row +
   copy must sit BELOW the card's bottom edge or it peeks through at rest.
   Reserving the copy block's height parks the hover image exactly out of view. */
.home-stat-body .home-stat-lines {
  min-height: 81px;
}

.home-stat-img {
  display: block;
  width: 292px;
  height: 256px;
  object-fit: cover;
  border-radius: 6px;
}

.home-stat-link {
  padding-top: 12px;
  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #f68121;
  text-decoration: none;
}
.home-stat-link:hover { text-decoration: underline; }

.home-stat-glow {
  position: absolute;
  left: 172px;
  top: 425px;
  width: 224px;
  height: 160px;
  border-radius: 9999px;
  background: var(--glow, #f57f2a);
  filter: blur(32px);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .home-stat-card:hover .home-stat-panel,
  .home-stat-card:focus-within .home-stat-panel { transform: translateY(-355px); }
  .home-stat-card:hover .home-stat-glow,
  .home-stat-card:focus-within .home-stat-glow { opacity: 1; }
}

/* touch / coarse pointer — JS toggles .is-open */
.home-stat-card.is-open { border-color: #f68121; }
.home-stat-card.is-open .home-stat-panel { transform: translateY(-355px); }
.home-stat-card.is-open .home-stat-glow { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .home-stat-panel { transition: none; }
}

.home-stat-tag-row {
  border-bottom: 1px solid #8b8b8b;
  padding-bottom: 28px;
}

/* The partner wordmark is dark artwork, so it rides on a white chip to stay
   readable now that every card shares the dark surface. */
.home-stat-tag-row img {
  display: block;
  height: 28px;
  width: auto;
  max-width: 46%;
  box-sizing: content-box;
  padding: 7px 12px;
  /* cancel the chip's vertical padding so the rule under it stays on the same
     baseline as the text-tag cards */
  margin: -7px 0;
  border-radius: 8px;
  background: #fff;
}

.home-stat-card:nth-child(n+3) .home-stat-tag-row {
  border-bottom-color: #383737;
}

.home-stat-tag {
  margin: 0;
  font-family: "Fustat", sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #f68121;
}

.home-stat-lines {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: "Fustat", sans-serif;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.25px;
  color: #f8f8f8;
}

@media (max-width: 1440px) {
  /* keep the Figma 120px page gutter down to the tablet break so the stats rail
     lines up with .project-grid and the rest of the page */
  .home-stats-block {
    padding-left: 120px;
    padding-right: 120px;
  }
}

/* Services */
.home-services {
  padding: 80px 0 0;
  background: #010101;
}

.home-services-head {
  padding: 80px 200px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.home-services-rail {
  --svc-gap: 18px;
  --svc-visible: 4.5;
  /* 100vw fallback; 100cqi is the rail itself once container queries apply. */
  --svc-card: calc((100vw - (var(--svc-visible) - 0.5) * var(--svc-gap)) / var(--svc-visible));
  --svc-card: calc((100cqi - (var(--svc-visible) - 0.5) * var(--svc-gap)) / var(--svc-visible));
  container-type: inline-size;
  overflow: hidden;
  /* Figma 687:19361 — the services track sits at x=0 and runs edge to edge.
     The old 120px left pad with a flush right edge is what read as lopsided. */
  padding: 0 0 80px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.home-services-track {
  display: flex;
  width: max-content;
  animation: home-marquee 48s linear infinite;
}

.home-services-rail:hover .home-services-track,
.home-services-rail:focus-within .home-services-track,
.home-services-nav:hover + .home-services-rail .home-services-track,
.home-services-nav:focus-within + .home-services-rail .home-services-track {
  animation-play-state: paused;
}

.home-services-set {
  display: flex;
  gap: var(--svc-gap);
  /* Trailing gap so each cloned half is the same width — otherwise
     translateX(-50%) lands half a gap short and the loop hitches. */
  padding-right: var(--svc-gap);
}

.home-services-rail::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Explore All — Figma CTA row itemSpacing 32 */
.home-services-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

/* prev/next sit right-aligned over the rail, matching the About Us stats nav */
.home-services-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 120px 14px;
  box-sizing: border-box;
}
.home-svc-arrow {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: #f4f4f4;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease;
}
.home-svc-arrow svg { display: block; width: 18px; height: 18px; }
.home-svc-arrow:hover:not(:disabled) { border-color: #f68121; background: rgba(246,129,33,0.14); color: #f68121; }
.home-svc-arrow:active:not(:disabled) { background: rgba(246,129,33,0.22); }
.home-svc-arrow:disabled { opacity: 0.32; cursor: default; }
.home-svc-arrow:focus-visible { outline: 2px solid #f68121; outline-offset: 3px; }

.home-svc-card {
  position: relative;
  /* 4.5 of the rail: four full cards plus a half peek of the next.
     Sized in cqi so the % is the rail, not the max-content track. */
  flex: 0 0 var(--svc-card);
  flex: 0 0 calc((100cqi - (var(--svc-visible) - 0.5) * var(--svc-gap)) / var(--svc-visible));
  width: var(--svc-card);
  width: calc((100cqi - (var(--svc-visible) - 0.5) * var(--svc-gap)) / var(--svc-visible));
  aspect-ratio: 520 / 711;
  height: auto;
  border-radius: 0;
  overflow: hidden;
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

.home-svc-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
}

.home-svc-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-svc-card:hover img {
  transform: scale(1.08);
}

.home-svc-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(12px, 1.4vw, 24px);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.75));
  font-family: "Fustat", sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 1.25vw, 22px);
  color: #fff;
}

/* Projects */
.home-projects {
  padding: 120px;
  background: #1d1d1d;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.home-projects-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

.home-project-filters {
  display: flex;
  gap: 11px;
}

.home-filter {
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.12);
  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #fff;
}

.home-filter.active {
  background: #f68121;
  font-weight: 600;
}

@media (min-width: 1100px) {
  .home-project-filters { margin-top: 12px; }
  .home-projects > .project-grid { margin-top: 40px; }
}

@media (min-width: 1441px) {
  .home-projects .project-grid:not(.is-filtered) .row-split .w-32 { flex: 547 1 547px; }
  .home-projects .project-grid:not(.is-filtered) .row-split .w-66 { flex: 1110 1 1110px; }
  .home-projects .project-grid:not(.is-filtered) .row-3 .w-33 { flex: 544 1 544px; }
  .home-projects .project-grid:not(.is-filtered) .row-3 .w-33b { flex: 552 1 552px; }
}

/* js/site.js adds .is-filtered while On-going / Completed is active: the
   bespoke masonry rows would leave holes where hidden cards sat, so flatten to
   an even grid and drop the prose companions (they only partner a photo card). */
.home-projects .project-grid.is-filtered {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.home-projects .project-grid.is-filtered > div {
  display: contents;
}

.home-projects .project-grid.is-filtered .card {
  flex: none;
  width: auto;
  min-width: 0;
  height: 420px;
}

.home-projects .project-grid.is-filtered .card-text {
  display: none;
}

.home-projects .home-projects-empty {
  grid-column: 1 / -1;
  padding: 80px 0;
  text-align: center;
  font-family: "Fustat", sans-serif;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 1099.98px) {
  .home-projects .project-grid.is-filtered {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .home-projects .project-grid.is-filtered {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .home-projects .project-grid.is-filtered .card {
    height: 240px;
  }
}

/* Clients */
.home-clients {
  position: relative;
  padding: 140px 128px;
  background: #0f0f0f;
  overflow: hidden;
}

/* Figma 687:19461 — neutral grey blob, mostly clipped off the bottom edge */
.home-clients-glow {
  position: absolute;
  left: 794px;
  top: 770px;
  width: 391px;
  height: 252px;
  inset: auto auto auto 794px;
  border-radius: 200px;
  background: rgba(201, 201, 201, 0.32);
  filter: blur(200px);
  pointer-events: none;
}

.home-clients-copy {
  max-width: 1017px;
  margin-bottom: 128px;
  position: relative;
  z-index: 1;
}

.home-client-logos {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 97.9px);
  width: 100%;
  margin: 0 auto;
  max-width: 1536px;
}

/* Six even columns per row. The old rules left-packed the logos at fixed
   117/133px gaps, which ran ~320px past the section's right padding — Wabtec,
   Apex and AVTEC were being clipped away entirely and the row read as
   left-heavy. Equal columns keep the block optically centred at any width. */
.home-client-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  justify-items: center;
  gap: 40px;
}

.home-client-row + .home-client-row {
  margin-left: 0;
}

/* Four marks in the six-column grid: start at column 2 so the short row centres. */
.home-client-row-3 > :first-child {
  grid-column-start: 2;
}

/* Same shared-canvas marks as the trusted band, so one height evens both rows. */
.home-client-row img {
  height: 76px;
  max-width: 100%;
  opacity: 1;
}

/* Figma 687:19465 — 42px/700 in a 1017px box wraps to exactly 2 lines */
.home-clients-copy .home-section-title {
  max-width: 1017px;
  font-size: 42px;
  font-weight: 700;
  line-height: 50.4px;
  letter-spacing: 0;
}

/* Sustainability banner */
/* Figma 687:19591 — 1920x777 band. The CTA sits centred on its own (there is
   no heading over the photo in the design) and the 96%/10+ stats are pinned to
   the lower right at x=1423,y=558 in a 437x147 group, not centred underneath. */
.home-sustain {
  position: relative;
  height: 777px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 24px;
}

.home-sustain-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Figma frames this further right in the source so the lake sits left of
     centre rather than tucked into the right edge */
  object-position: 78% center;
}

.home-sustain-overlay {
  position: absolute;
  inset: 0;
  /* Figma uses 0.35, not 0.55 — ours was washing the photo out */
  background: rgba(0, 0, 0, 0.35);
}

.home-sustain-center,
.home-sustain-stats {
  position: relative;
  z-index: 1;
}

.home-sustain-title {
  font-family: "Fustat", sans-serif;
  font-weight: 700;
  font-size: 56px;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 28px;
}

.home-sustain-cap {
  max-width: 150px;
}

.home-sustain-stats {
  /* pinned bottom-right per Figma (group at x=1423 of 1920, 60px from the right,
     y=558 of 777), rather than centred below the button */
  position: absolute;
  left: auto;
  right: clamp(24px, 3.125vw, 60px);
  top: 71.8%;
  display: flex;
  gap: 70px;
  text-align: left;
  z-index: 2;
}

.home-sustain-num {
  font-size: 64px;
  font-weight: 700;
  color: #fff;
}

/* Figma has the whole figure white — the "+" is not accented */
.home-sustain-num span { color: inherit; }

.home-sustain-cap {
  margin-top: 8px;
  color: rgba(255,255,255,0.7);
  font-size: 16px;
}

/* Legacy */
.home-legacy {
  position: relative;
  padding: 120px;
  background: #1d1d1d;
  overflow: hidden;
}

.home-legacy-texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
  pointer-events: none;
}

.home-legacy-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.home-legacy-photo {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.home-legacy-photo > img {
  width: 100%;
  height: 560px;
  object-fit: cover;
}

.home-legacy-quote {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  padding: 24px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  color: #fff;
  font-size: 18px;
  line-height: 1.5;
}

.home-legacy-attr {
  margin-top: 12px;
  color: #f68121;
  font-size: 14px;
}

.home-legacy-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.home-legacy-title {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
}

.home-legacy-body {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
}

.home-legacy-brands {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}

.home-legacy-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
}

.home-legacy-brand img {
  display: block;
  width: auto;
  object-fit: contain;
  object-position: center;
}

/* ---- Rail edge fades ----------------------------------------------------
   A horizontal rail always has to cut its last card somewhere. Hard-clipping
   it against the section padding reads as a layout bug ("why is that card
   half there?"), so the overflow is feathered out instead and the fade is
   only painted on the side that actually has more content — driven by the
   .can-scroll-* classes the carousel JS sets. */
.rail-fade {
  --rail-fade: 96px;
  --rail-fade-start: 0px;
  --rail-fade-end: 0px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--rail-fade-start),
    #000 calc(100% - var(--rail-fade-end)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--rail-fade-start),
    #000 calc(100% - var(--rail-fade-end)),
    transparent 100%
  );
}

.rail-fade.can-scroll-left { --rail-fade-start: var(--rail-fade); }
.rail-fade.can-scroll-right { --rail-fade-end: var(--rail-fade); }

@media (max-width: 768px) {
  .rail-fade { --rail-fade: 40px; }
}

/* the arrows already signal the sixth stat card; a wide fade dimmed the fifth */
@media (min-width: 769px) {
  .home-stats.rail-fade { --rail-fade: 24px; }
}

/* ——— Meet Our Experts ——— */
.home-team {
  background: #1d1d1d;
  padding: 100px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.home-team-intro {
  width: 100%;
  max-width: 1332px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
  margin-bottom: 96px;
}

.home-team-kicker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.home-team-title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.2;
  color: #fff;
  max-width: 799px;
}

.home-team-body {
  margin: 0;
  max-width: 1055px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

.home-team-proof {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 466px;
  max-width: 100%;
  gap: 17px;
}

.home-team-avatars {
  position: relative;
  width: 120px;
  height: 53px;
  flex-shrink: 0;
}

.home-team-avatars img {
  position: absolute;
  top: 0;
  width: 53px;
  height: 53px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  border: 2px solid #1d1d1d;
}

.home-team-avatars img:nth-child(1) { left: 0; z-index: 1; }
.home-team-avatars img:nth-child(2) { left: 33px; z-index: 2; }
.home-team-avatars img:nth-child(3) { left: 67px; z-index: 3; }

.home-team-proof-text {
  margin: 0;
  flex: 1;
  text-align: left;
  font-family: "Plus Jakarta Sans", "Fustat", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #fff;
}

.home-team-proof-text strong {
  font-weight: 700;
  line-height: 24px;
}

/* Right-aligned prev/next over the roster, matching the About Us stats nav */
.home-team-nav {
  display: none;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 1533px;
  min-height: 44px;
  margin-bottom: 14px;
}

.home-team-nav.is-scrollable {
  display: flex;
}

.home-team-grid {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2vw, 35.44px);
  width: 100%;
  max-width: 1533px;
  margin-bottom: 56px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}

.home-team-grid::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Center the row when it fits; shrink to 0 when it overflows so the first card is not clipped. */
.home-team-grid::before,
.home-team-grid::after {
  content: "";
  flex: 1 1 0;
  min-width: 0;
  pointer-events: none;
}

/* Five members, so the row is sized to fit them all rather than scroll —
   the cards shrink from 278px down to whatever the gutter allows. */
.home-member {
  flex: 0 1 278px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-member:hover {
  transform: translateY(-8px);
}

.home-member-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  border-radius: 21.26px;
  overflow: hidden;
  background: #1a1a1a;
}

.home-member-photo--pink { background: #ffced2; }
.home-member-photo--coral { background: #ff8c78; }
.home-member-photo--cream { background: #ffefb6; }

.home-member-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}

.home-member-meta {
  background: #1b1a1a;
  border-radius: 21.26px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.home-member-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-member-copy h3 {
  margin: 0;
  font-family: "Fustat", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  color: #fff;
}

.home-member-copy p {
  margin: 0;
  font-family: "Fustat", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  color: #f57f2a;
}

.home-member-arrow {
  width: 21.26px;
  height: 21.26px;
  flex-shrink: 0;
}

.home-team-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
}

.home-team-cta > p {
  margin: 0;
  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
}

.home-team-cta .btn-primary img {
  transform: scaleX(-1);
}

@media (max-width: 1600px) {
  .home-team {
    padding: 80px 60px;
  }

  .home-team-grid {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
  }
}

@media (max-width: 900px) {
  .home-team {
    padding: 64px 24px;
  }

  .home-team-title {
    font-size: 32px;
  }

  .home-team-body {
    font-size: 16px;
  }

  .home-team-proof {
    width: auto;
    flex-direction: column;
    gap: 12px;
  }

  .home-team-proof-text {
    text-align: center;
  }
}

/* Blogs on home */
.home-blogs {
  padding: 120px;
  background: #010101;
}

.home-blogs-head {
  max-width: 754px;
  margin-bottom: 48px;
}

.home-blogs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.home-blog-card {
  position: relative;
  min-height: 520px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
}

.home-blog-card > img:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-blog-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.48), rgba(0,0,0,0.36));
}

.home-blog-card > *:not(img):not(.home-blog-overlay) {
  position: relative;
  z-index: 1;
}

.home-blog-cat {
  font-size: 14px;
  letter-spacing: 1.75px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 12px;
}

.home-blog-cat::after {
  content: "";
  display: block;
  width: 28px;
  height: 4px;
  border-radius: 999px;
  background: #fff;
  margin-top: 12px;
}

.home-blog-title {
  font-family: "Fustat", sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
  color: #fff;
}

/* Contact */
.home-contact {
  position: relative;
  color: #fff;
  background: #050505;
  padding: 90px 0 0;
  overflow: hidden;
}

.home-contact-wire {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(650px, 70%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

.home-contact-wire img {
  width: 100%;
  height: auto;
  display: block;
}

/* Figma dark 1920 687:19756 — row is 1490 wide (215px side gutters),
   803 copy + 111 gap + 576 form. All three scale together off the vw so the
   copy/font ratio (and therefore the line breaks) stay identical at any width. */
.home-contact-grid {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: min(111px, 5.78125vw);
  width: min(1490px, 77.6042vw);
  max-width: 100%;
  margin: 0 auto;
  min-height: 520px;
  padding: 0 0 80px;
}

.home-contact-left {
  flex: 0 0 min(803px, 41.8229vw);
  max-width: min(803px, 41.8229vw);
  margin-top: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.home-contact-left .home-eyebrow {
  letter-spacing: 0.35em;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  /* Figma pins the eyebrow to the top of the row and the copy to the bottom */
  margin: 0 0 auto;
}

/* Figma 687:19760: 64px / -1px tracking / 76.8px leading in an 803px box */
.home-contact-title {
  margin: 0 0 18px;
  max-width: 100%;
  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: min(64px, 3.3333vw);
  letter-spacing: -0.015625em;
  line-height: 1.2;
  color: #fff;
  text-transform: none;
}

.home-contact-body {
  margin: 0;
  max-width: 90.5%;
  color: rgba(255, 255, 255, 0.65);
  font-size: 22px;
  line-height: 1.8;
}

.home-contact-form {
  position: relative;
  flex: 0 0 min(576px, 30vw);
  width: min(576px, 30vw);
  max-width: 100%;
}

.home-form-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(255, 132, 14, 0.4);
  filter: blur(110px);
  pointer-events: none;
}

.home-form-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border-radius: 10px;
  background: rgba(18, 18, 18, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.home-form-inner h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
}

.home-form-sub {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  line-height: 1.6;
}

.home-form-sub a {
  color: #f68121;
}

.home-form-inner input,
.home-form-inner textarea {
  width: 100%;
  color: #fff;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 14px 16px;
  font: inherit;
  font-size: 14px;
}

.home-form-inner textarea {
  resize: none;
  min-height: 130px;
}

.home-form-submit {
  margin-top: 8px;
  width: fit-content;
}

/* Brand / Journey */
.home-brand {
  display: flex;
  align-items: center;
  gap: 30px;
  color: #fff;
  background: #1d1d1d;
  padding: 100px 120px;
}

.home-brand-copy {
  flex: 1;
  min-width: 0;
}

/* Figma 687:19846 — 44.74x1 rule, 26px to the label, label 18px/18px, tracking 0 */
.home-brand-since {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-bottom: 14px;
  opacity: 0.8;
  font-size: 18px;
}

.home-brand-since img {
  flex: none;
  width: 45px;
  height: 1px;
  /* Fustat's line box centres 0.06em below the cap-height centre, so a plain
     align-items:center leaves the rule low; the extra bottom margin lifts it
     back onto the optical centre Figma draws it on. */
  margin-bottom: 0.12em;
}

.home-brand-since p {
  margin: 0;
  font-family: "Fustat", sans-serif;
  font-weight: 600;
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #71717a;
}

.home-brand-wordmark {
  /* Figma 687:19849 — one text block "NEO
HEIGHTS", Plus Jakarta Sans 800 /
     120px / 106px leading, with the gradient running across BOTH lines. We were
     using Fustat 900 and gradienting only the second word. */
  margin: 0 0 24px;
  font-family: "Plus Jakarta Sans", "Fustat", sans-serif;
  font-weight: 800;
  font-size: clamp(3.2rem, 8vw, 120px);
  line-height: 0.883;
  letter-spacing: 0;
  /* handles (-0.007,0.024) -> (0.677,0.907) over an 850x212 box = 108deg */
  background: linear-gradient(
    108deg,
    #ff3337 0%,
    #f8ca53 31.8%,
    #009a8f 53.2%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.home-brand-wordmark span {
  display: block;
}

/* the gradient now lives on the whole wordmark, so the second line needs no
   treatment of its own */
.home-brand-heights {
  background: none;
}

.home-brand-points {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 24px;
}

.home-brand-point {
  display: flex;
  align-items: center;
  gap: 16px;
}

.home-brand-icon {
  position: relative;
  width: 66px;
  height: 66px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #f68121;
  /* Figma 687:19854 — the numeral is 41px inside the 66px tile */
  font-size: 41px;
  font-weight: 800;
}

.home-brand-icon::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 63px;
  height: 26px;
  border-radius: 50%;
  background: #e08e4b;
  opacity: 0.4;
  filter: blur(6px);
  transform: translate(-50%, 50%);
  pointer-events: none;
}

.home-brand-icon-img {
  padding: 0;
}

/* Figma 687:19863 — the building sits 26.99 x 44 inside the same 66px tile */
.home-brand-icon-img img {
  width: 27px;
  height: 44px;
  object-fit: contain;
}

.home-brand-icon-img::after {
  display: none;
}

.home-brand-point-title {
  margin: 0 0 4px;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
}

.home-brand-point-sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.85rem;
}

.home-brand-copy > .btn-primary {
  margin-top: 24px;
}

.home-brand-video {
  position: relative;
  flex: 1.5;
  min-height: 420px;
  border-radius: 16px;
  overflow: hidden;
  background: #1a1a1a;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.home-brand-video-el {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  background: #000;
}

.home-brand-video-caption {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  font-family: "Fustat", sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

/* FAQ */
/* Figma 687:19932 fills the whole band with 0D0D0D -> 1D1D1D and sits the
   cards (687:19939 etc.) on #1B1B1B, i.e. the surface the gradient has already
   reached by the time the cards start — the head and the cards read as ONE
   colour. We were painting the band #0B0B0B and the cards #161616, so the
   "NEED HELP?" block and the box under it were visibly two different greys. */
.home-faq {
  color: #fff;
  /* Figma 687:19932 — darker at the top, fading back to the page ground. The
     section above it has no fill, so it sits on the page's #1d1d1d. */
  background: linear-gradient(180deg, #0d0d0d 0%, #1d1d1d 100%);
  padding: 100px 120px;
}

.home-faq-head {
  text-align: center;
}

.home-faq-head .home-eyebrow {
  margin-bottom: 16px;
}

.home-faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
  margin: 50px auto 0;
}

.home-faq-item {
  /* lighter than the FAQ band, matching the CTA card fill */
  background: rgba(83, 83, 83, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 4px -2px rgba(19, 25, 39, 0.28), 0 2px 4px -2px rgba(151, 151, 151, 0.12);
  border-radius: 12px;
  overflow: hidden;
}

.home-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 18px 24px;
  font-size: 18px;
  font-weight: 500;
}

.home-faq-item summary::-webkit-details-marker { display: none; }

.home-faq-answer {
  padding: 0 24px 24px;
}

.home-faq-item p {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
}

.home-faq-more {
  margin-top: 24px;
  text-align: center;
  color: #8c8c8c;
}

.home-faq-more a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 1100px) {
  .home-services-rail {
    margin-left: -24px;
    margin-right: -24px;
  }

  .home-stats-block {
    padding-left: 24px;
    padding-right: 24px;
  }

  .home-contact-grid,
  .home-brand {
    flex-direction: column;
    padding-left: 6%;
    padding-right: 6%;
  }

  .home-contact-grid {
    width: auto;
    max-width: none;
    margin: 0;
    gap: 40px;
  }

  .home-contact-left {
    margin-top: 0;
    flex: 0 0 auto;
    max-width: 100%;
    align-self: auto;
  }

  .home-contact-left .home-eyebrow {
    margin-bottom: 40px;
  }

  .home-contact-form {
    flex: 0 0 auto;
    width: 100%;
  }

  .home-contact-body {
    max-width: 100%;
  }

  .home-contact-title {
    font-size: 2.4rem;
    /* keep Figma's 12.55 box-to-font ratio so the wrap stays identical */
    max-width: 482px;
  }

  .home-brand-wordmark {
    font-size: 2.4rem;
  }

  .home-brand-video,
  .home-brand-video-el {
    width: 100%;
    min-height: 320px;
  }

  .home-client-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 20px;
  }

  .home-client-row-3 > :first-child {
    grid-column-start: auto;
  }

  .home-client-row-3 > :last-child {
    grid-column-start: 2;
  }
}

/* ——— Phone / small tablet ——— */
@media (max-width: 768px) {
  .home-hero {
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    min-height: 100svh;
  }

  .home-hero-volume {
    left: 16px;
    bottom: 20px;
    width: 44px;
    height: 44px;
  }

  .home-hero-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 110px 20px 88px;
    gap: 36px;
    justify-content: center;
  }

  .home-hero-copy {
    max-width: 100%;
    gap: 20px;
  }

  .home-hero-title {
    font-size: clamp(32px, 9vw, 40px);
    letter-spacing: -1px;
    line-height: 1.08;
  }

  .home-hero-sub {
    font-size: 15px;
    line-height: 1.45;
    max-width: 100%;
  }

  .home-hero-ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }

  .home-hero-ctas .btn-primary,
  .home-hero-ctas .home-btn-glass,
  .home-btn-primary,
  .home-btn-glass {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }

  .home-trusted {
    height: auto;
    padding: 32px 0;
  }

  .home-trusted-inner {
    width: 100%;
    max-width: 100%;
    gap: 16px;
    padding: 0 16px;
  }

  .home-trusted-label {
    font-size: 14px;
    letter-spacing: 0.2em;
    text-align: center;
  }

  .home-trusted-track-wrap {
    height: 40px;
  }

  .home-trusted-track {
    gap: 28px;
  }

  .home-trusted-track img {
    height: 34px;
    max-height: 34px;
    max-width: 130px;
    width: auto;
  }

  .home-about {
    padding: 48px 0 56px;
  }

  .home-about-intro {
    flex-direction: column;
    padding: 0 20px;
    gap: 20px;
  }

  .home-about-title {
    font-size: clamp(28px, 7vw, 36px);
  }

  .home-about-body {
    font-size: 15px;
  }

  .home-stats-block {
    padding: 0 16px 24px;
  }

  .home-stats-head {
    margin-bottom: 10px;
  }

  .home-stats {
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 12px !important;
    padding: 10px 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    /* `none` here blocked vertical scroll from chaining to the page, so a swipe
       that started on a stat card could not scroll the page at all. */
    overscroll-behavior-y: auto;
    touch-action: pan-x pan-y;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .home-stat-card {
    flex: 0 0 min(280px, 82vw);
    width: min(280px, 82vw);
    min-width: min(280px, 82vw);
    height: auto;
    min-height: 0;
    padding: 22px;
    scroll-snap-align: start;
  }

  .home-stat-num,
  .home-stat-num-sm,
  .home-stat-num-md {
    font-size: 40px;
  }

  .home-services {
    padding: 64px 0;
  }

  .home-services-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 0 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .home-services-head .home-section-title,
  .home-section-title-center {
    font-size: clamp(26px, 7vw, 34px) !important;
    max-width: 100%;
    text-align: left;
  }

  .home-services-rail {
    padding: 0 0 48px;
    --svc-gap: 12px;
  }

  .home-services-nav {
    padding: 0 16px 12px;
  }

  .home-projects {
    padding: 64px 16px;
  }

  .home-projects-head {
    flex-direction: column;
    gap: 16px;
  }

  .home-clients {
    padding: 64px 20px;
  }

  .home-clients-copy h2 {
    font-size: clamp(26px, 7vw, 36px);
  }

  .home-client-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 16px;
  }

  .home-client-row img {
    height: 56px;
  }

  .home-sustain {
    height: auto;
    min-height: 420px;
    padding: 64px 20px;
  }

  .home-sustain-title {
    font-size: clamp(24px, 6vw, 32px);
  }

  .home-sustain-stats {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 40px;
    justify-content: flex-start;
  }

  .home-legacy {
    padding: 64px 20px;
  }

  .home-legacy-inner {
    flex-direction: column;
    gap: 32px;
  }

  .home-legacy-photo {
    width: 100%;
  }

  .home-team {
    padding: 64px 16px;
  }

  .home-team-head {
    max-width: 100%;
  }

  .home-team-grid {
    gap: 16px;
  }

  .home-team-grid::before,
  .home-team-grid::after {
    display: none;
  }

  .home-member,
  .home-member-photo,
  .home-member-meta {
    width: min(278px, 80vw);
  }

  .home-member-photo {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .blogs {
    padding: 64px 16px !important;
  }

  .blog-cards {
    flex-direction: column;
    height: auto;
    gap: 16px;
  }

  .blog-card {
    min-height: 420px;
    height: 420px;
  }

  .home-contact {
    padding-top: 64px;
  }

  .home-contact-grid {
    /* gutters are pinned to 24px !important by css/responsive.css; the 315px
       Figma measure is reproduced by the title max-width below */
    padding: 0 16px 64px;
    gap: 40px;
    min-height: 0;
  }

  .home-contact-title {
    font-size: min(40px, 6.4vw);
    max-width: min(84vw, 525px);
  }

  .home-contact-body {
    font-size: 16px;
    line-height: 1.55;
  }

  .home-contact-form {
    max-width: 100%;
    width: 100%;
  }

  .home-brand {
    padding: 64px 20px;
    gap: 40px;
  }

  .home-brand-wordmark {
    font-size: clamp(48px, 14vw, 72px);
  }

  /* Figma mobile 701:22008 — 17.8x1 rule, 10px gap, 12px label */
  .home-brand-since {
    gap: 10px;
    font-size: 12px;
  }

  .home-brand-since img {
    width: 18px;
  }

  .home-faq {
    padding: 48px 16px 80px;
  }

  .home-faq-item summary {
    font-size: 16px;
    padding: 16px;
  }

  .cta-wrap,
  .cta {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .cta-title {
    font-size: clamp(28px, 7vw, 40px);
  }
}

@media (max-width: 390px) {
  .home-hero-inner {
    padding: 100px 16px 56px;
  }

  .theme-switch {
    width: 84px;
    height: 36px;
  }
}

/* ---- FAQ: Figma 687:19932 ---- */
.home-faq-icon {
  flex: none;
  transition: transform .2s ease;
  transform-origin: 50% 50%;
}
details[open] > summary .home-faq-icon { transform: rotate(45deg); }
.home-faq-more { color: #fafafa; margin-top: 29px; letter-spacing: -0.384px; }
.home-faq-more a { color: #fff; font-weight: 500; text-decoration: underline; }

/* ---- About Us stat typography — Figma 290:6076 ---- */
.home-stat-desc { font-size: 18px; line-height: 26px; letter-spacing: 0.25px; }
.home-stat-tag { font-size: 14px; line-height: 22px; letter-spacing: 1.75px; }
.home-stat-lines p { font-size: 14px; line-height: 22px; letter-spacing: 0.25px; }

/* ---- Featured blogs — Figma 75:1783: hover zooms the cover 1.1, nothing else moves ---- */
.blog-card { position: relative; overflow: hidden; }
.blog-card img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.blog-card:hover img,
.blog-card:focus-within img { transform: scale(1.1); }
.blog-card .blog-hit {
  position: absolute;
  inset: 0;
  z-index: 3;
}
@media (prefers-reduced-motion: reduce) {
  .blog-card img { transition: none; }
  .blog-card:hover img { transform: none; }
}

/* ---- Legacy section — Figma 687:19611 ---- */
.home-legacy-copy {
  align-items: center;
  text-align: center;
}
.home-legacy-title,
.home-legacy-body { text-align: center; }

.home-legacy-mark {
  width: 122px;
  height: 120px;
  object-fit: contain;
}

/* sub-brands sit in boxes (687:19643/19666/19685).
   A `max-height: 40px` further up was clamping every mark below the 48px
   Figma calls for, which is what made the three chips read as odd sizes. */
.home-legacy-brands {
  display: flex;
  /* one line on desktop — wrapping produced a 2 + 1 orphan between 1280
     and 1400, where the row is just short of three full-width chips */
  flex-wrap: nowrap;
  justify-content: center;
  gap: 12px;
  max-height: none;
  /* The row used to shrink-to-fit its CONTENT, which sized every chip to the
     average of the three lockups (186px). That was ~24px short of what the
     Arul Polymers lockup needs, so flexbox shrank its two marks to 89% while
     Arul Rubbers beside it stayed at 100%. 3 x 210px chips + 2 x 12px gaps =
     654px gives every lockup its full 48px height; below that the chips fall
     back to equal thirds of whatever the copy column has. */
  width: min(100%, 654px);
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .home-legacy-brands { flex-wrap: wrap; }
}
.home-legacy-brand {
  display: flex;
  /* Figma 687:19645 aligns the Arul Polymers mark + wordmark on their BOTTOM
     edge inside a 48px-tall lockup. Pairing flex-end with the 24px block
     padding below gives exactly that 48px band, so the wordmark can no longer
     drop to the floor of the 96px tile the way it used to. */
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  height: 96px;
  /* even chips: equal thirds of the copy column, capped at the Figma 210px,
     so the row never breaks into a 2 + 1 orphan */
  /* a real flex-basis so the chips don't collapse to nothing before the
     logos decode, then grow to equal thirds up to the Figma 210px */
  /* basis = the Figma chip width (210px). The Arul Polymers lockup is
     intrinsically 178px wide against Arul Rubbers' 137px, so a content-sized
     basis made the row settle at 186px per chip and flex-shrank the Polymers
     artwork to 89% — visibly smaller than its neighbour. */
  flex: 1 1 210px;
  min-width: 0;
  max-width: 210px;
  padding: 24px 14px;
  border-radius: 20px;
  background: #eff0f0;
  box-sizing: border-box;
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.home-legacy-brand:hover {
  background: #e6e8e8;
  transform: translateY(-2px);
}
.home-legacy-brand img {
  height: auto;
  width: auto;
  max-height: 48px;
  max-width: 100%;
  min-width: 0;
}
.home-legacy-brand img[height="35"] { max-height: 35px; }

/* quote card (687:19615 / 19620) */
.home-legacy-quote {
  left: 60px;
  right: 60px;
  bottom: 40px;
  border-radius: 30px;
  padding: 32px;
  gap: 18px;
  background: rgba(33, 33, 33, 0.10);
  border: 1px solid rgba(21, 21, 21, 0.09);
  backdrop-filter: blur(150px);
  -webkit-backdrop-filter: blur(150px);
  display: flex;
  flex-direction: column;
}
.home-legacy-quote > p {
  font-size: 24px;
  line-height: 28.8px;
  letter-spacing: -0.24px;
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}
.home-legacy-quote-icon {
  flex: none;
  width: 25px;
  height: 20px;
}
.home-legacy-attr {
  font-size: 16px;
  line-height: 19.2px;
  letter-spacing: -0.16px;
  color: #fff;
  font-weight: 700;
  padding-left: 40px;
}

/* ---- Legacy: Figma 687:19611 is a WHITE section (#FFFFFF + 15% grain).
   The Arul Group mark is navy artwork and is unreadable on dark. ---- */
.home-legacy { background: #ffffff; padding: 100px 120px; }
.home-legacy-title {
  color: #121212;
  font-weight: 700;
  font-size: 48px;
  line-height: 57.6px;
  letter-spacing: -1px;
}
.home-legacy-body {
  color: #555555;
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
}
.home-legacy-photo img { border-radius: 16px; }

/* ---- CTA card: matched to the FAQ card treatment (your call; Figma has them
   different — rgba(83,83,83,.30)/24px vs #1B1B1B/16px) ---- */
.cta {
  background: rgba(83, 83, 83, 0.3);
  border-radius: 16px;
  box-shadow: 0 4px 4px rgba(151, 151, 151, 0.07);
}


/* ==========================================================================
   Homepage polish
   Shared motion tokens + the small interaction states the sections were
   missing, so hover/focus behaves the same way everywhere on the page.
   ========================================================================== */
.page-home {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.28s;
}

/* Cards lift on the same curve instead of three slightly different ones */
.page-home .home-svc-card,
.page-home .home-member,
.page-home .blog-card {
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .page-home .home-svc-card:hover,
  .page-home .home-member:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.65);
  }

  /* client marks are decorative, so this is a light touch only */
  .page-home .home-client-row img {
    transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
    opacity: 0.92;
  }

  .page-home .home-client-row img:hover {
    opacity: 1;
    transform: scale(1.04);
  }
}

/* Arrow buttons: one consistent pressed/disabled treatment */
.page-home .home-stats-arrow,
.page-home .home-svc-arrow {
  transition: border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              opacity var(--dur) var(--ease-out),
              transform 0.12s ease;
}

.page-home .home-stats-arrow:active:not(:disabled),
.page-home .home-svc-arrow:active:not(:disabled) {
  transform: scale(0.94);
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-stats,
  .page-home .home-team-grid {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }

  .page-home .home-services-track {
    animation: none;
  }

  .page-home .home-services-rail {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
    scroll-snap-type: x mandatory;
  }

  .page-home .home-svc-card {
    scroll-snap-align: start;
  }

  .page-home .home-svc-card,
  .page-home .home-member,
  .page-home .blog-card,
  .page-home .home-legacy-brand,
  .page-home .home-client-row img {
    transition: none;
  }

  .page-home .home-svc-card:hover,
  .page-home .home-member:hover,
  .page-home .home-legacy-brand:hover,
  .page-home .home-client-row img:hover {
    transform: none;
  }
}

/* ==========================================================================
   LIGHT MODE — homepage overrides (Figma light landing 1264:9007)
   Deliberately NOT flipped, because the light frame still shows them dark:
     .home-hero (video)          .home-trusted (black logo band)
     .home-sustain (photo)       .home-svc-label (photo scrim)
     .blog-card overlays         .home-brand-video
     .home-projects .card-*      (project cards stay dark in both themes)
   The accent (#f68121) is never themed.
   ========================================================================== */

/* --- Generic section headings ------------------------------------------- */
html[data-theme="light"] .home-section-title { color: var(--text); }

/* --- About + stat cards -------------------------------------------------- */
html[data-theme="light"] .home-about {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-page) 46%, var(--bg-page) 100%);
}

html[data-theme="light"] .home-about-glow { background: rgba(246, 129, 33, 0.30); }
html[data-theme="light"] .home-about-title { color: var(--text); }
html[data-theme="light"] .home-about-body { color: var(--text-secondary); }

html[data-theme="light"] .home-stat-card,
html[data-theme="light"] .home-stat-panel { background: var(--bg-elevated); }

html[data-theme="light"] .home-stat-card {
  border-color: var(--border);
  box-shadow: var(--card-shadow);
}
html[data-theme="light"] .home-stat-num { color: var(--text); }

html[data-theme="light"] .home-stat-desc,
html[data-theme="light"] .home-stat-lines,
html[data-theme="light"] .home-stat-tag { color: var(--text-secondary); }

html[data-theme="light"] .home-stat-tag-row,
html[data-theme="light"] .home-stat-card:nth-child(n+3) .home-stat-tag-row {
  border-bottom-color: var(--border-strong);
}

html[data-theme="light"] .home-stat-tag-row img {
  background: var(--bg-page);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* rail arrows (About Us stats, Services, Team share the same treatment) */
html[data-theme="light"] .home-stats-arrow,
html[data-theme="light"] .home-svc-arrow {
  border-color: var(--border-strong);
  background: rgba(18, 18, 18, 0.04);
  color: var(--text-secondary);
}

html[data-theme="light"] .home-stats-arrow:hover:not(:disabled),
html[data-theme="light"] .home-svc-arrow:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgba(246, 129, 33, 0.12);
  color: var(--accent);
}

/* --- Services ------------------------------------------------------------ */
html[data-theme="light"] .home-services { background: var(--bg-sunken); }

/* --- Projects ------------------------------------------------------------ */
html[data-theme="light"] .home-projects { background: var(--bg-page); }

html[data-theme="light"] .home-filter {
  background: var(--bg-sunken);
  color: var(--text);
}

html[data-theme="light"] .home-filter.active {
  background: #f68121;
  color: #fff;
  box-shadow: none;
}

/* Figma keeps the project cards dark in light mode. components.css flips
   .card-title / .card-text-title / .card-desc to near-black for every page,
   which would render them invisible here — pin them back to white. */
html[data-theme="light"] .home-projects .card-glass {
  background: rgba(63, 63, 63, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="light"] .home-projects .card-glass-inner { background: transparent; }

html[data-theme="light"] .home-projects .card-title,
html[data-theme="light"] .home-projects .card-loc,
html[data-theme="light"] .home-projects .card-text-title,
html[data-theme="light"] .home-projects .card-text.simple .card-desc { color: #ffffff; }

html[data-theme="light"] .home-projects .card-desc { color: rgba(255, 255, 255, 0.7); }

/* --- Clients ------------------------------------------------------------- */
html[data-theme="light"] .home-clients { background: var(--bg-elevated); }
html[data-theme="light"] .home-clients-glow { display: none; }

/* --- Team ---------------------------------------------------------------- */
html[data-theme="light"] .home-team { background: var(--bg-sunken); }
html[data-theme="light"] .home-team-title { color: var(--text); }
html[data-theme="light"] .home-team-body { color: var(--text-secondary); }
html[data-theme="light"] .home-team-proof-text,
html[data-theme="light"] .home-team-cta > p { color: var(--text); }
html[data-theme="light"] .home-team-avatars img { border-color: var(--bg-page); }
html[data-theme="light"] .home-member-photo { background: var(--bg-card); }

html[data-theme="light"] .home-member-meta {
  background: var(--bg-elevated);
  box-shadow: inset 0 0 0 1px var(--border);
}

html[data-theme="light"] .home-member-copy h3 { color: var(--text); }
/* the role line is #f57f2a — 2.6:1 on the white meta plate */
html[data-theme="light"] .home-member-copy p { color: var(--accent-text); }
html[data-theme="light"] .home-member-arrow { filter: invert(1); }

/* --- Featured blogs ------------------------------------------------------ */
html[data-theme="light"] .page-home .blogs { background: var(--bg-ink); }
html[data-theme="light"] .page-home .blogs-title { color: #ffffff; }
html[data-theme="light"] .page-home .blogs-subtitle { color: rgba(255, 255, 255, 0.68); }

/* --- Contact ------------------------------------------------------------- */
html[data-theme="light"] .home-contact {
  color: var(--text);
  background: var(--bg-page);
}

html[data-theme="light"] .home-contact-wire { opacity: 0.35; filter: invert(1); }
html[data-theme="light"] .home-contact-title { color: var(--text); }
html[data-theme="light"] .home-contact-body { color: var(--text-secondary); }
html[data-theme="light"] .home-contact-left .home-eyebrow { color: var(--text-grey); }
html[data-theme="light"] .home-form-glow { background: rgba(246, 129, 33, 0.25); }

html[data-theme="light"] .home-form-inner {
  background: var(--bg-elevated);
  border-color: var(--border);
  box-shadow: 0 20px 60px rgba(30, 26, 20, 0.1);
}

html[data-theme="light"] .home-form-inner h3 { color: var(--text); }
html[data-theme="light"] .home-form-sub { color: var(--text-secondary); }

html[data-theme="light"] .home-form-inner input,
html[data-theme="light"] .home-form-inner textarea {
  color: var(--text);
  background: var(--bg-page);
  border-color: var(--border-strong);
}

html[data-theme="light"] .home-form-inner input::placeholder,
html[data-theme="light"] .home-form-inner textarea::placeholder {
  color: var(--text-grey);
}

/* --- Brand / brochure ---------------------------------------------------- */
html[data-theme="light"] .home-brand {
  color: var(--text);
  background: var(--bg-elevated);
}

html[data-theme="light"] .home-brand-since p { color: var(--text-grey); }
html[data-theme="light"] .home-brand-wordmark { color: var(--text); }
html[data-theme="light"] .home-brand-point-title { color: var(--text); }
html[data-theme="light"] .home-brand-point-sub { color: var(--text-secondary); }

html[data-theme="light"] .home-brand-icon {
  background: var(--bg-page);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* --- FAQ ----------------------------------------------------------------- */
/* Same rule as dark: the band and the cards share one surface. The band was on
   --bg-sunken (#eae3da) while the cards were --bg-elevated (#ffffff), which put
   a beige "NEED HELP?" header directly above white boxes — the one beige
   section on an otherwise white light page. Both are --bg-elevated now; the
   cards are read by their border + --card-shadow, exactly as in dark. */
html[data-theme="light"] .home-faq {
  color: var(--text);
  background: var(--bg-elevated);
}

html[data-theme="light"] .home-faq-item {
  background: var(--bg-elevated);
  border-color: var(--border);
  box-shadow: var(--card-shadow);
}

html[data-theme="light"] .home-faq-item summary { color: var(--text); }
html[data-theme="light"] .home-faq-item p { color: var(--text-secondary); }
html[data-theme="light"] .home-faq-icon { filter: invert(1); }
html[data-theme="light"] .home-faq-more { color: var(--text-secondary); }
html[data-theme="light"] .home-faq-more a { color: var(--text); }


/* ==========================================================================
   Photo-backed surfaces get an explicit dark background-colour.
   The artwork always covers them, so nothing changes visually — but the
   fallback colour is correct if an image fails, and a contrast checker can
   now resolve the real backdrop behind the white overlay copy instead of
   inheriting the (light) page surface underneath.
   ========================================================================== */
.home-sustain { background-color: #0a0a0a; }
.home-svc-card { background-color: #0a0a0a; }
.page-home .blog-card { background-color: #0a0a0a; }

/* ==========================================================================
   MOBILE — 375 layout (Figma 669:7625)
   Appended last so it also wins over the late desktop overrides further up
   (e.g. the Legacy block, which re-declares padding after the media queries).
   ========================================================================== */
@media (max-width: 768px) {
  .home-stat-num {
    font-size: 48px;
    line-height: 56px;
    height: 56px;
  }

  .home-stat-num-sm { font-size: 36px; }
  .home-stat-num-md { font-size: 44px; }

  /* ---- Hero: the mobile frame keeps both CTAs on one row ---------------- */
  .home-hero-ctas {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    width: auto;
    gap: 12px;
  }

  .home-hero-ctas .btn-primary,
  .home-hero-ctas .home-btn-glass,
  .home-hero .home-btn-primary,
  .home-hero .home-btn-glass {
    width: auto;
    min-height: 48px;
  }

  /* trimmed just enough that both buttons still share one row at 375 */
  .home-hero .home-btn-primary {
    padding: 14px 14px;
    font-size: 16px;
  }

  .home-hero .home-btn-glass {
    padding: 15px 14px;
    font-size: 15px;
  }

  /* ---- Section headings: nothing may outrun the 375 viewport ------------ */
  .home-section-title,
  .home-section-title-left,
  .home-section-title-center {
    font-size: clamp(26px, 7vw, 34px) !important;
    max-width: 100%;
  }

  .home-section-title-center {
    text-align: center;
  }

  /* ---- About Us stat cards ---------------------------------------------
     The reveal is a hard-coded vertical shift (panel top 262px, travel
     -355px), so the card HEIGHT and the panel's own box must stay exactly as
     they are on desktop. Only the width is allowed to change here. ------- */
  .home-stats-block {
    padding: 0 16px 24px;
  }

  .home-stat-card {
    /* width tracks the rail's own content box, so it never outruns whatever
       gutters the shared responsive rules apply to .home-about */
    flex: 0 0 auto;
    width: min(300px, 100%);
    min-width: 0;
    height: 448px;
    min-height: 448px;
    padding: 32px 22px;
  }

  .home-stat-panel {
    padding: 32px 22px;
  }

  /* 20px shorter than desktop so "Know More" clears the card's clipped edge
     once the panel has travelled its fixed -355px */
  .home-stat-img {
    width: 100%;
    height: 236px;
  }

  .home-stat-glow {
    left: 50%;
    transform: translateX(-50%);
  }

  .home-stat-num,
  .home-stat-num-sm,
  .home-stat-num-md {
    font-size: 40px;
  }

  .home-stat-desc {
    font-size: 16px;
    line-height: 23px;
  }

  /* The tag has to stay on ONE line: the panel below it is positioned with
     fixed pixel offsets, so a second line pushes "Know More" past the card's
     clipped bottom edge once the panel slides up. */
  .home-stat-tag {
    font-size: 11px;
    line-height: 18px;
    letter-spacing: 0.9px;
  }

  /* ---- Services --------------------------------------------------------- */
  .home-services-head .home-section-title,
  .home-services-head {
    text-align: center;
  }

  .home-services-head {
    align-items: center;
  }

  /* ---- Projects --------------------------------------------------------- */
  .home-projects-head {
    align-items: center;
    text-align: center;
  }

  .home-projects-titles {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .home-project-filters {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .home-filter {
    white-space: nowrap;
    font-size: 15px;
    padding: 11px 16px;
    min-height: 44px;
  }

  /* the badge collides with the title at this width — stack them */
  .home-projects .card-text {
    height: auto;
    padding: 24px 20px;
    gap: 16px;
  }

  .home-projects .card-text.simple {
    padding: 24px 20px;
  }

  .home-projects .card-text-head {
    flex-direction: column;
    gap: 12px;
  }

  .home-projects .card-text-title {
    font-size: 20px;
    line-height: 1.35;
  }

  .home-projects .badge-area {
    font-size: 14px;
    padding: 8px 12px;
  }

  .home-projects .card-desc {
    font-size: 16px;
    line-height: 1.55;
    max-width: 100%;
  }

  .home-projects .card-text.simple .card-desc {
    margin-bottom: 20px;
  }

  .home-projects .card-title {
    font-size: 18px;
  }

  .home-projects .card-loc {
    font-size: 15px;
  }

  .home-projects .card-glass {
    padding: 14px 18px;
    min-height: 84px;
  }

  /* ---- Clients ---------------------------------------------------------- */
  .home-clients-copy {
    margin-bottom: 40px;
  }

  .home-clients-copy .home-section-title {
    font-size: clamp(24px, 6.4vw, 30px) !important;
    line-height: 1.28;
    max-width: 100%;
  }

  .home-client-logos {
    gap: 28px;
  }

  .home-client-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 12px;
  }

  .home-client-row img,
  .home-client-row:first-child img,
  .home-client-row + .home-client-row img {
    height: 48px;
    max-height: 48px !important;
  }

  /* ---- Legacy ----------------------------------------------------------- */
  .home-legacy {
    padding: 56px 20px !important;
  }

  /* .home-legacy-inner is a 2-col GRID, so flex-direction did nothing here */
  .home-legacy-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .home-legacy-photo > img {
    height: 320px;
  }

  .home-legacy-quote {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 18px;
    border-radius: 18px;
    gap: 10px;
  }

  .home-legacy-quote > p {
    font-size: 16px;
    line-height: 1.35;
  }

  .home-legacy-attr {
    padding-left: 0;
    font-size: 14px;
  }

  .home-legacy-title {
    font-size: clamp(26px, 7vw, 32px);
    line-height: 1.22;
  }

  .home-legacy-body {
    font-size: 16px;
    line-height: 1.6;
  }

  .home-legacy-brand {
    height: 68px;
    /* 68px box with a 34px content band (see the desktop rule) so the Arul
       Polymers wordmark bottom-aligns to its mark, not to the tile floor. */
    padding: 17px 8px;
    flex: 1 1 28%;
  }

  .home-legacy-brand img {
    max-height: 34px;
  }

  .home-legacy-brand img[height="35"] {
    max-height: 26px;
  }

  /* ---- Team ------------------------------------------------------------
     responsive.css forces .home-team-grid to a column at this width, which
     turns the roster rail into a 3000px stack. Put it back on one row. ---- */
  .home-team .home-team-grid {
    flex-direction: row !important;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 16px !important;
    margin-bottom: 32px;
    scroll-snap-type: x proximity;
  }

  .home-team .home-member {
    flex: 0 0 min(258px, 72vw);
    width: min(258px, 72vw);
    scroll-snap-align: start;
  }

  .home-member-photo,
  .home-member-meta {
    width: 100%;
  }

  .home-team-cta {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .home-team-cta > p {
    white-space: nowrap;
  }

  /* ---- Tap targets ------------------------------------------------------
     Both of these are 36-42px tall; the extra padding grows the hit box
     downward without moving the label. */
  .home-stat-link {
    padding-bottom: 12px;
  }

  .page-home .blog-know {
    min-height: 44px;
    box-sizing: content-box;
  }

  /* ---- Featured blogs --------------------------------------------------- */
  .page-home .blogs-title {
    font-size: 28px;
    line-height: 1.2;
  }

  .page-home .blogs-subtitle {
    font-size: 15px;
    line-height: 1.6;
  }

  /* ---- FAQ -------------------------------------------------------------- */
  .home-faq-head .home-section-title {
    text-align: center;
  }

  .home-faq-item summary {
    min-height: 56px;
  }

  /* NOTE: the partners band is deliberately left alone here — components.css
     turns it into a horizontally scrollable 1200x200 rail below 900px, which
     is the only way that single 1920-wide sheet stays legible. */
}

@media (max-width: 390px) {
  .home-stat-card {
    padding-left: 18px;
    padding-right: 18px;
  }

  .home-stat-panel {
    padding-left: 18px;
    padding-right: 18px;
  }

  .home-hero-ctas .btn-primary,
  .home-hero-ctas .home-btn-glass {
    font-size: 15px;
  }

  .home-client-row {
    gap: 20px 10px;
  }
}


/* ==========================================================================
   MOBILE PASS — homepage
   Everything below is scoped to <=768px (phones) and to .home-* selectors, so
   desktop (>=1100px) and every other page are untouched.
   ========================================================================== */

@media (max-width: 768px) {
  /* ---- Projects grid: the cards were rendering 0px tall ------------------
     css/footer.css @1440 gives .w-65/.w-34/.w-33/... `flex: 1 1 100%`. Once
     the shared 768 rule flips the rows to `flex-direction: column`, that
     100% flex-basis is measured on the BLOCK axis against an indefinite row
     height, which resolves to 0 — so every photo card collapsed and the whole
     section rendered as a headline, a button and 250px of empty ground.
     projects.html already carries this same fix locally; this is the homepage
     copy of it, scoped so it cannot reach another page. */
  .home-projects .project-grid .card {
    flex: 0 0 auto;
  }

  .home-projects .project-grid .card:not(.card-text) {
    /* same crop height the projects page uses for its stacked cards */
    height: 240px;
  }

  .home-projects .project-grid .card.card-text {
    height: auto;
  }

  .home-projects .project-grid .card-arrow {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
  }

  /* ---- About Us stats rail: show that it scrolls ------------------------
     The rail sat inside .home-about's 24px gutter PLUS its own 16px block
     padding, and the card was `min(300px, 100%)` — i.e. exactly the rail's
     own width, so no part of card 2 was ever visible and the rail read as a
     single static card. Drop the block's side padding (the section gutter
     already provides it) and leave ~40px of the next card showing, the same
     affordance the Services and Team rails have. */
  .home-stats-block {
    padding-left: 0;
    padding-right: 0;
  }

  .home-stat-card {
    width: min(300px, calc(100vw - 100px));
  }

  /* ---- Team: 96px of dead ground between the intro and the rail --------
     That margin is the desktop rhythm under a 1332px-wide intro block; on a
     phone it reads as the section having ended. */
  .home-team-intro {
    margin-bottom: 32px;
  }

  /* ---- Inline links that were under the 44px touch minimum -------------- */
  .home-form-sub a,
  .home-faq-more a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .home-faq-more a {
    /* mid-sentence link: grow the hit box without moving the line */
    min-height: 0;
    padding: 12px 2px;
    margin: -12px 0;
  }

  /* Other Verticals — Figma mobile stacks the five marks with overlap.
     Desktop keeps them spaced; phones used to hide the whole card. */
  .home-verticals,
  .home-verticals:hover,
  .home-verticals:focus-within {
    display: flex !important;
    right: 16px;
    bottom: 16px;
    left: auto;
    width: min(280px, calc(100vw - 76px));
    padding: 16px 16px 18px;
    gap: 14px;
    border-radius: 20px;
    background: rgba(19, 19, 19, 0.88);
  }

  .home-verticals-our {
    display: none;
  }

  .home-verticals-title {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.16px;
    white-space: nowrap;
  }

  .home-verticals-close {
    width: 44px;
    height: 44px;
    padding: 12px;
    margin: -10px -10px 0 0;
    align-items: center;
  }

  .home-verticals-logos {
    justify-content: flex-start;
  }

  .home-vert-avatar,
  .home-verticals:hover .home-vert-avatar,
  .home-verticals:focus-within .home-vert-avatar {
    width: 44px;
    height: 44px;
    margin-right: -14px;
    background: #fff;
    box-shadow: 0 0 0 2px #f4f4f4;
  }

  .home-vert-avatar:nth-child(1) { z-index: 1; }
  .home-vert-avatar:nth-child(2) { z-index: 2; }
  .home-vert-avatar:nth-child(3) { z-index: 3; }
  .home-vert-avatar:nth-child(4) { z-index: 4; }
  .home-vert-avatar:nth-child(5) { z-index: 5; }

  .home-vert-avatar:last-child,
  .home-verticals:hover .home-vert-avatar:last-child,
  .home-verticals:focus-within .home-vert-avatar:last-child {
    margin-right: 0;
  }

  .home-vert-avatar--mark img {
    object-fit: cover;
    padding: 0;
  }

  .home-vert-avatar--logo .home-vert-avatar-fill img {
    width: 26px;
    height: 26px;
  }

  .home-vert-avatar--studio img {
    object-fit: cover;
    padding: 0;
  }

  .home-vert-avatar:hover,
  .home-vert-avatar:focus-visible {
    transform: none;
  }

  /* Trusted logos: desktop is 44×240 with an 85px gap — on 375 that leaves
     one or two marks filling the screen. Figma 669:7625 keeps them compact. */
  .home-trusted-track-wrap {
    height: 40px;
  }

  .home-trusted-track {
    gap: 28px;
  }

  .home-trusted-track img {
    height: 34px;
    max-height: 34px;
    max-width: 130px;
    width: auto;
    object-fit: contain;
  }
}

/* ---- Verticals marquee: make the loop seamless -------------------------
   The avatars overlap by -16.55px, but `.home-vert-avatar:last-child` zeroes
   that margin. Once site.js clones the set, the second half of the track is
   16.55px wider than the first, so the -50% keyframe lands 16.55px short and
   the strip visibly hitches once per cycle. Inside the marquee rail every
   avatar keeps the same overlap, which makes the two halves identical. The
   hover/focus state is excluded because it pauses the animation anyway. */
.home-verticals-rail:not(:hover):not(:focus-within) .home-vert-avatar:last-child {
  margin-right: -16.55px;
}

/* Below 375 the two hero CTAs no longer share a row, and `flex-wrap: wrap`
   dropped "View Projects" onto a second line at its own narrow content width —
   a ragged, accidental-looking break. Stack them to equal full width instead,
   which is how the pair already behaves in the 768 block above 375 is lost. */
@media (max-width: 374px) {
  .home-hero-ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .home-hero-ctas .btn-primary,
  .home-hero-ctas .home-btn-glass,
  .home-hero .home-btn-primary,
  .home-hero .home-btn-glass {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
}

/* ---- No edge fades on phones -------------------------------------------
   The rail feather is 96px per side. On a 375px screen that eats more than
   half of each end card, so the copy under it is unreadable. Below 900px the
   rails simply run edge to edge and clip hard instead. */
@media (max-width: 900px) {
  .rail-fade,
  .home-verticals-rail,
  .home-trusted-track-wrap {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

/* Phones: 4.5 cards would be ~80px and unreadable. Keep a scrolling rail
   with a peek of the next card so it does not look like a static poster. */
@media (max-width: 767px) {
  .home-services {
    padding-bottom: 40px;
  }

  /* The arrow row collapses to 0 here, so the head needs its own bottom
     space. Keep it above the 28px reveal lift or the CTA slides under the
     cards while the head fades in. */
  .home-services-head {
    padding-bottom: 32px;
  }

  /* No hover lift on touch, so the 48px reserved for it was just dead band. */
  .home-services-rail {
    --svc-visible: 1.4;
    /* = the inset, so no sliver of the previous card shows at rest */
    --svc-gap: 16px;
    padding: 0 16px;
  }

  .home-svc-label {
    font-size: 16px;
    padding: 16px;
  }
}

/* A continuous drift always has one card cut by the screen edge. Step one
   card at a time instead and rest each one inside the 16px inset. 7 cards,
   so 7 steps end on -50% and the cloned set makes the loop seamless. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .home-services-track {
    --svc-step: calc(-1 * (var(--svc-card) + var(--svc-gap)));
    animation: home-svc-step 24.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  }
}

@keyframes home-svc-step {
  0%, 11.43%     { transform: translateX(0); }
  14.29%, 25.71% { transform: translateX(var(--svc-step)); }
  28.57%, 40%    { transform: translateX(calc(2 * var(--svc-step))); }
  42.86%, 54.29% { transform: translateX(calc(3 * var(--svc-step))); }
  57.14%, 68.57% { transform: translateX(calc(4 * var(--svc-step))); }
  71.43%, 82.86% { transform: translateX(calc(5 * var(--svc-step))); }
  85.71%, 97.14% { transform: translateX(calc(6 * var(--svc-step))); }
  100%           { transform: translateX(calc(7 * var(--svc-step))); }
}

@media (prefers-reduced-motion: no-preference) {
  .home-services-nav {
    visibility: hidden;
    pointer-events: none;
    height: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-services-track {
    animation: none;
  }

  .home-services-rail {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* Team: a static five-up grid on desktop; phones keep the swipe rail. */
@media (min-width: 1100px) {
  .home-team-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 278px));
    justify-content: center;
    overflow: visible;
    padding-bottom: 0;
  }

  .home-team-grid::before,
  .home-team-grid::after {
    content: none;
  }

  .home-member {
    width: auto;
    min-width: 0;
  }
}