:root {
  --maroon: #7a1034;
  --maroon-light: #a3254f;
  --text: #fff;
  --muted: #d9c3cb;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Google Sans Flex", system-ui, sans-serif;
  background: #0a0307;
  color: var(--text);
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  aspect-ratio: 6044 / 7000; /* shorter than the image (6044 / 8516); bottom is cropped */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 44px 56px 64px;
}

/* Your background image goes here */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, #000 0%, rgba(0, 0, 0, .9) 8%, rgba(0, 0, 0, .55) 20%, rgba(0, 0, 0, 0) 34%),
    linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .95) 8%, rgba(0, 0, 0, .8) 16%, rgba(0, 0, 0, .55) 26%, rgba(0, 0, 0, .3) 36%, rgba(0, 0, 0, .12) 46%, rgba(0, 0, 0, 0) 56%);
}

/* ---------- Background images: blurred preview first, then the full image fades in ---------- */
.hero { isolation: isolate; background: #000 url("data:image/webp;base64,UklGRiABAABXRUJQVlA4IBQBAACQBgCdASogAC0APpk8l0mloyIhOrzIALATCWMAVvTcIK1ITty2twzsNrK/6/Vf6kmNCIDDQKCjsXXYTwgAAP79mphYGiGFhIj/+9LUX0YpVe4Za1uCYX1foYkKda43Rd7NRXr6eFb7COpWVou4r/lYJ5+zNL3vGVBgNWoYf1XsOdi4YId7LwyJB+thoTlU0W/qTa1TQmm04X5AhHIHcBdfH4psqaStzYyQe+4jqI2XzxP5rykWvZ8jhl45JER37vnOdz9AJHXSRh7oUjwwPqJ1rUs0+XJ0B06MVf9cB3dgs7EI6lYa9HGKHIHJcN7WaKn+pS7UnQx41f7MQ2jnLGcTilSDNI08ps4atPFcRIM28U1zAAA=") center top / 100% 100% no-repeat; }
.bg-img {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  transition: opacity 1.2s ease;
}
.js .bg-img:not(.loaded) { opacity: 0; }
.bg-hero  { z-index: -2; background-image: url("assets/hero-bg.webp"); background-position: center top; background-size: 100% 100%; }
.bg-cards { z-index: 0; background-image: url("assets/cards-bg.webp"); background-position: center bottom; background-size: 100% 62vw; }
.bg-earth {
  z-index: 0;
  background-image:
    linear-gradient(#000, transparent),   /* soft top edge over the image (its height is 45vw) */
    url("assets/brand-logo/west-europe-city-lights.webp");
  background-position: center bottom 25vw, center bottom -6vw;
  background-size: 100% 14vw, 100% auto;
}

/* ---------- Nav ---------- */
.nav {
  width: 100%;
  max-width: 1400px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 12px 46px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-top-color: rgba(255, 255, 255, .35);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(18, 18, 18, .82), rgba(0, 0, 0, .7));
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.logo { font-size: 1.5rem; font-weight: 500; font-style: italic; justify-self: start; letter-spacing: -.02em; }

.btn-connect {
  justify-self: end;
  font-size: .9rem;
  font-weight: 600;
  padding: 14px 26px;
  border: 1px solid #5c1229;
  border-radius: 6px;
  background: rgba(5, 2, 5, .45);
  box-shadow: inset 0 0 12px rgba(122, 16, 52, .35);
}
.btn-connect:hover { background: var(--maroon); }

/* ---------- Headline ---------- */
.hero-content {
  margin-top: 28px;
  max-width: 1000px;
  text-align: center;
}
.hero-content h1 {
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  font-weight: 300;
  letter-spacing: .08em;
  line-height: 1.3;
}
.hero-content h1 strong { font-weight: 600; display: block; }
.hero-content p {
  margin: 20px auto 28px;
  max-width: 480px;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 620px;
  color: var(--muted);
}
.btn-poc {
  display: inline-block;
  padding: 16px 30px;
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid var(--maroon-light);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--maroon), #4a0a20);
}
.btn-poc:hover { background: var(--maroon-light); }

/* ---------- Vehicle pins ---------- */
.pins {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1240px;          /* narrower than the hero, so the row of cards has space on both sides */
  top: 31%;
  height: 33%;
}
.pin {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
}
.pin::before { /* dot where line meets card */
  content: "";
  order: 1;
  width: 9px; height: 9px;
  margin: -1px 0 -4px;
  border-radius: 50%;
  background: #ddd;
}
.pin::after { /* the vertical line */
  content: "";
  order: 2;
  width: 1px;
  height: var(--line);
  background: linear-gradient(to bottom, rgba(255, 255, 255, .8), transparent);
}
.card {
  /* size follows the icon + padding */
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  cursor: pointer;
  /* glass: translucent sheen + strong blur + bright edges */
  background: linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .015) 45%, rgba(255, 255, 255, .06));
  border: 1px solid rgba(255, 255, 255, .2);
  border-top-color: rgba(255, 255, 255, .6);
  border-left-color: rgba(255, 255, 255, .4);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .55),
    inset 0 -1px 1px rgba(255, 255, 255, .1),
    inset 0 0 14px rgba(255, 255, 255, .04),
    0 8px 20px rgba(0, 0, 0, .15);
  transition: transform .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.card::before { /* diagonal light reflection */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, .18) 42%, transparent 56%);
  background-size: 250% 100%;
  background-position: 100% 0;
  pointer-events: none;
  transition: background-position .7s ease;
}
.card img { position: relative; }
.card:hover {
  transform: translateY(-6px);
  background: linear-gradient(145deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .03) 45%, rgba(255, 255, 255, .10));
  border-color: rgba(255, 255, 255, .4);
  border-top-color: rgba(255, 255, 255, .8);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .75),
    inset 0 -1px 1px rgba(255, 255, 255, .15),
    inset 0 0 16px rgba(255, 255, 255, .06),
    0 12px 26px rgba(0, 0, 0, .2);
}
.card:hover::before { background-position: 0 0; }
/* vehicle name shown below the icon on hover; the card grows to fit it */
.card::after {
  content: attr(data-label);
  display: block;
  width: 0; min-width: 100%; /* label never widens the card */
  max-height: 0;
  overflow: hidden;
  text-align: center;
  font-size: .78rem;
  line-height: 1.25;
  letter-spacing: .03em;
  font-weight: 500;
  opacity: 0;
  transition: max-height .3s ease, opacity .3s ease, margin-top .3s ease;
}
.card:hover::after { max-height: 4em; margin: 0 0 6px; opacity: 1; }
.card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; transform: translateY(-6px); }
.card:focus-visible::after { max-height: 4em; margin: 0 0 6px; opacity: 1; }

.p1 { left: 5.5%;  top: 0;   --line: 24vw; }
.p2 { left: 20.33%; top: 12%; --line: 18vw; }
.p3 { left: 35.17%; top: 17%; --line: 15vw; }
.p4 { left: 50%; top: 9%;  --line: 20vw; }
.p5 { left: 64.83%; top: 17%; --line: 15vw; }
.p6 { left: 79.67%; top: 7%;  --line: 20vw; }
.p7 { left: 94.5%; top: -5%; --line: 26vw; }

/* ---------- Chips & section titles ---------- */
.chip {
  display: inline-block;
  padding: 8px 22px;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(0, 0, 0, .4);
}


.section-title {
  margin-top: 16px;
  font-size: clamp(1.6rem, 3.6vw, 3.3rem);
  font-weight: 500;
  text-align: center;
}
.section-title em {
  font-style: normal;
  background: linear-gradient(90deg, #d9c4cc, #a98591);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-sub {
  max-width: 560px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 1.15rem;
  line-height: 1.55;
  color: #e6dde0;
}

/* ---------- Insights section ---------- */
.insights {
  position: relative;
  margin-top: -24vw; /* pull up under the hero fade */
  padding: 10px 24px 0;
  text-align: center;
  /* slab artwork sits at the bottom; section height follows the image ratio */
  background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .55) 8vw, rgba(0, 0, 0, .9) 17vw, #000 24vw); /* soft blend from the hero, no hard edge */
  padding-bottom: 44.5vw; /* room for the slab artwork below the content */
}

.stats {
  display: flex;
  justify-content: center;
  gap: 3.3vw;
  flex-wrap: wrap;
  margin: 50px auto 110px;
}
/* card geometry from the design: 399 x 126 at a 1512px-wide screen */
.stat {
  --cut: 1.9vw;
  position: relative;
  flex: 0 0 auto;
  width: 26.4vw;
  min-width: 300px;
  height: 8.32vw;
  min-height: 100px;
  display: flex;
  align-items: stretch;
  text-align: left;
  cursor: pointer;
  /* outer layer = thin maroon outline, ::before = dark face */
  background: rgba(150, 25, 62, .75);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  transition: transform .35s ease, background .35s ease;
}
.stat::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: linear-gradient(90deg, #1b181a, #111012);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.stat-icon {
  position: relative;
  width: 37%;
  margin: 1px 0 1px 1px;
  display: grid;
  place-items: center;
  perspective: 400px;
  background: linear-gradient(135deg, #5a0a26, #7d1536);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  transition: background .35s ease;
}
.stat-icon img {
  width: 4.6vw;
  min-width: 44px;
  height: auto;
  transition: transform .8s cubic-bezier(.4, 0, .2, 1);
}
.stat-text {
  position: relative;
  flex: 1;
  padding: 0 1.8vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stat-text strong { font-size: clamp(1.8rem, 3vw, 3.1rem); font-weight: 500; line-height: 1.1; }
.stat-text span { font-size: clamp(.8rem, 1.05vw, 1.1rem); color: #e1d8db; margin-top: .5vw; }

/* hover: gentle lift, brighter outline, spinning prism */
.stat:hover { transform: translateY(-5px); background: rgba(200, 45, 90, .95); }
.stat:hover .stat-icon { background: linear-gradient(135deg, #6d0e2f, #9a1a43); }
.stat:hover .stat-icon img { transform: rotateY(360deg); }

.capabilities-chip { display: inline-block; }

.capabilities {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 89%;
  max-width: 1500px;
  margin: 90px auto 0;
  text-align: left;
}
.cap:nth-child(even) { margin-top: 5.5vw; }
.cap-num {
  display: block;
  font-size: clamp(3rem, 5.6vw, 6rem);
  font-weight: 200;
  line-height: 1;
  color: #ececec;
}
.cap-arrow {
  position: relative;
  display: block;
  width: 1px;
  height: 6vw;
  min-height: 56px;
  margin: 1.6vw 0 2.2vw 0.8vw;
  background: rgba(255, 255, 255, .85);
}
.cap-arrow::before { /* arrow head */
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 9px; height: 9px;
  border-top: 1px solid rgba(255, 255, 255, .9);
  border-left: 1px solid rgba(255, 255, 255, .9);
  transform: translateX(-4.5px) rotate(45deg);
  transform-origin: 4.5px 4.5px;
}
.cap h3 {
  font-size: clamp(1.1rem, 1.9vw, 1.7rem);
  font-weight: 500;
  line-height: 1.55;
  max-width: 8em;
  color: #eee;
}
.cap ul { margin-top: 1.4vw; font-size: clamp(.8rem, 1.2vw, 1.1rem); color: #e1d8db; }
.cap ul li { position: relative; padding-left: 1.2em; margin-bottom: .6em; line-height: 1.4; }
.cap ul li::before { content: "\2022"; position: absolute; left: .25em; }
.cap-faded .cap-num { color: #c8a9b5; opacity: .75; }
.cap-faded h3 { color: #d4c3c9; }


.card img { width: 104px; height: auto; display: block; }

.insights h2:first-of-type { font-weight: 600; }

/* ---------- Moving red glow behind the insights section ---------- */
.insights { overflow: hidden; }
.insights > * { position: relative; z-index: 1; }
.insights { isolation: isolate; }
.insights > .bg-img { position: absolute; z-index: -1; }   /* below the moving red glow */
.insights::before {
  content: "";
  position: absolute;
  top: 28%;
  left: 50%;
  width: 55vw;
  height: 40vw;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(130, 14, 50, .6), transparent 68%);
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
  animation: glow-drift 14s ease-in-out infinite alternate;
}
.insights.glow-paused::before { animation-play-state: paused; }
@keyframes glow-drift {
  0%   { transform: translate(-10%, -10%) scale(1);    opacity: .7; }
  50%  { transform: translate(25%, 5%)    scale(1.15); opacity: 1; }
  100% { transform: translate(-45%, 25%)  scale(.95);  opacity: .75; }
}
@media (prefers-reduced-motion: reduce) {
  .insights::before { animation: none; }
}


.logo img { display: block; height: 130px; width: auto; margin: -48px 0 -48px -50px; } /* logo file has built-in padding */

/* ---------- Case studies ---------- */
.case-studies {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 38vw 1fr;
  gap: 2vw;
  align-items: center;
  padding: 4vw 0 9vw 8vw;
  background:
    linear-gradient(to top, #000, transparent 8vw),                 /* fades to black before the next section */
    radial-gradient(ellipse 45% 40% at 85% 64%, rgba(110, 10, 40, .45), transparent 70%),
    #000;
}
.case-intro { align-self: end; }          /* chip + heading sit at the bottom, lined up with the bottom of the cards */
.case-intro h2 {
  margin-bottom: -0.33em;      /* the text baseline (not the empty line space below it) sits on the slab's bottom edge */
  margin-top: 18px;
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 500;
  line-height: 1.3;
  max-width: 11em;
}

.cases {
  --open-w: 21.5vw;
  --shut-w: 7.5vw;
  display: flex;
  gap: 1.4vw;
  list-style: none;
}
.case {
  --w: var(--shut-w);
  --o: 0;                       /* 1 = expanded */
  --cut: 1.6vw;
  --ease: cubic-bezier(.22, .61, .36, 1);
  position: relative;
  flex: 0 0 auto;
  width: var(--w);
  height: 28vw;
  cursor: pointer;
  outline: none;
  will-change: width;
  /* outer layer = border colour; ::before = grey face; ::after = active face (cross-fades in) */
  background: rgba(255, 255, 255, .12);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
  transition: width .7s var(--ease), background-color .5s ease;
}
.case::before,
.case::after {
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
}
.case::before { background: linear-gradient(160deg, #424242, #1c1c1c 70%, #161616); }
.case::after {
  background:
    radial-gradient(ellipse 90% 60% at 0% 100%, rgba(120, 14, 48, .65), transparent 70%),
    linear-gradient(160deg, #2c2c2c, #0a0a0a 65%);
  opacity: var(--o);
  transition: opacity .6s ease;
}

/* first card is open by default; hovering the row moves the opening to the hovered card */
.case:first-child { --w: var(--open-w); --o: 1; }
.cases:hover .case:first-child:not(:hover), .cases:focus-within .case:first-child:not(:hover):not(:focus-within) { --w: var(--shut-w); --o: 0; }
.case:hover, .case:focus-within { --w: var(--open-w); --o: 1; }

.case:first-child, .case:hover, .case:focus-within { background-color: rgba(190, 40, 85, .75); }
.cases:hover .case:first-child:not(:hover), .cases:focus-within .case:first-child:not(:hover):not(:focus-within) { background-color: rgba(255, 255, 255, .12); }

.case-num {
  position: absolute;
  top: 1.6vw;
  z-index: 1;
  left: calc(var(--shut-w) / 2);   /* fixed so it doesn't slide while the card resizes */
  transform: translateX(-50%) rotate(-90deg);
  font-size: clamp(.9rem, 1.7vw, 1.7rem);
  font-weight: 300;
  color: #6f6f6f;
  opacity: calc(1 - var(--o));
  transition: opacity .25s ease;
}
/* detail keeps its full open width, so text never reflows while the card animates */
.case-detail {
  position: absolute;
  top: 1px; bottom: 1px; left: 1px;
  z-index: 1;                    /* above the ::after face */
  width: calc(var(--open-w) - 2px);
  padding: 0 1.8vw 1.8vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: var(--o);
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;   /* closing: quick fade */
  pointer-events: none;
}
/* opening: fade in after the card has mostly expanded */
.cases:not(:hover) .case:first-child .case-detail,
.case:hover .case-detail,
.case:focus-within .case-detail {
  transform: none;
  transition: opacity .45s ease .25s, transform .55s var(--ease) .25s;
}
/* the whole slab is a link to the case study page */
.case-link { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
.case-link:focus-visible { outline: 2px solid rgba(255, 255, 255, .85); outline-offset: -4px; }
.case-icon { position: absolute; top: 1.4vw; right: 1.4vw; width: 3.2vw; min-width: 36px; }
.case-detail h3 { font-size: clamp(1.1rem, 1.9vw, 1.9rem); font-weight: 500; line-height: 1.3; }
.case-detail p { margin-top: .8vw; font-size: clamp(.7rem, .9vw, .95rem); color: #e1d8db; }

/* ---------- Technology cards ---------- */
.technology {
  position: relative;
  overflow: hidden;
  padding: 6vw 7% 8vw;
  text-align: center;
  background:
    linear-gradient(to top, #000, transparent 6vw),   /* fades to black before the next section */
    linear-gradient(to bottom, #000, transparent 5vw),   /* and in from black at the top */
    radial-gradient(ellipse 34% 36% at 88% 24%, rgba(135, 14, 52, .65), transparent 72%),
    radial-gradient(ellipse 30% 30% at 2% 92%, rgba(110, 10, 40, .5), transparent 72%),
    #000;
}
.technology > * { position: relative; }
.technology .section-title { font-size: clamp(1.5rem, 2.9vw, 3rem); }

.tech-cards {
  display: flex;
  gap: .9vw;
  list-style: none;
  margin-top: 6vw;
}
.tech-card {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 267 / 362;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
  color: #6b0f2e;
  background: #fff;
  border-radius: 1vw;
}

.tech-body {
  position: relative;
  flex: 1;
  padding: 3.6vw 2.7vw 0;
}
.tech-label { display: block; font-size: clamp(.65rem, .95vw, .95rem); font-weight: 500; letter-spacing: .02em; color: #555; }
.tech-body p {
  margin-top: 2.9vw;
  font-size: clamp(1.1rem, 2.1vw, 2.2rem);
  font-weight: 400;
  line-height: 1.35;
}

.tech-media {
  position: relative;
  flex: none;
  height: 24%;            /* fixed: the hover zoom never changes this */
  overflow: hidden;
  background: #2a0510;
}
.tech-media::before {     /* the picture itself, zooms inside the fixed frame */
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}
.tech-battery::before     { background-image: url("assets/tech-battery.webp"), linear-gradient(135deg, #3a0614, #8b1038 60%, #240410); }
.tech-diagnostics::before { background-image: url("assets/tech-diagnostics.webp"), linear-gradient(135deg, #240410, #7a0f33 55%, #3a0614); }
.tech-rugged::before      { background-image: url("assets/tech-rugged.webp"), linear-gradient(135deg, #3a0614, #6d0d2e 50%, #1c030c); }
.tech-card:hover .tech-media::before { transform: scale(1.12); }


/* ---------- Testimonials ---------- */
.testimonials {
  padding: 5vw 7.08vw 7vw;
  background: #000;
  overflow: hidden;
}
.t-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4vw;
  align-items: start;
}
.t-head h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.8rem);
  font-weight: 500;
  line-height: 1.3;
  max-width: 11em;
}
.t-head p {
  margin-top: .8vw;
  max-width: 28em;
  font-size: clamp(.8rem, 1.2vw, 1.25rem);
  line-height: 1.6;
  color: #e3dade;
}

.t-row {
  list-style: none;
  display: flex;
  gap: .8vw;
  margin-top: 3.6vw;
}
.t-row::-webkit-scrollbar { display: none; }

/* More than two cards: the row becomes a swipe/scroll slider that runs off the right edge */
.t-row:has(.testimonial:nth-child(3)) {
  overflow-x: auto;
  margin-right: -7.08vw;
  padding-right: 7.08vw;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.testimonial {
  flex: 1 1 0;                /* one or two cards share the full width, so both are completely visible */
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  gap: 1.4vw;
  padding: 1.2vw;
  border-radius: 1.4vw;
  background: #111;
  min-height: 26.06vw;        /* 394px at a 1512px screen */
}
.t-row:has(.testimonial:nth-child(3)) .testimonial { flex: 0 0 46.96vw; }   /* slider card width: 710px at 1512px */
.t-photo {
  position: relative;
  flex: 0 0 35%;
  border-radius: .9vw;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #4a0f26;
}
.t-photo::before {            /* maroon tint over the photo */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(150, 30, 70, .45), rgba(40, 6, 18, .75));
}
.testimonial:nth-child(1) .t-photo { background-image: url("assets/people/rohan.webp"), linear-gradient(160deg, #7a1d3d, #2b0714); }
.testimonial:nth-child(2) .t-photo { background-image: url("assets/people/neha.webp"), linear-gradient(160deg, #8a2848, #2b0714); }

.play {
  position: absolute;
  top: 50%; left: 50%;
  width: 2.5vw; min-width: 28px;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform .3s ease;
}
.play svg { display: block; width: 100%; }
.testimonial:hover .play { transform: translate(-50%, -50%) scale(1.15); }

.t-who {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 3vw 1vw .9vw;
  background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent);
}
.t-who strong { display: block; font-size: clamp(.75rem, 1.15vw, 1.15rem); font-weight: 600; }
.t-who span { display: block; margin-top: .15vw; font-size: clamp(.55rem, .75vw, .8rem); color: #cfc3c8; }

.t-body { flex: 1; display: flex; flex-direction: column; padding: .6vw .6vw .3vw 0; min-width: 0; }
.quote-icon { width: 3.3vw; min-width: 28px; color: #8d1238; }
.t-quote {
  margin-top: 1.8vw;
  font-size: clamp(1rem, 1.78vw, 1.9rem);
  line-height: 1.4;
  font-weight: 400;
  /* more than 3 lines: cut off with "..." (the full quote shows in a tooltip, see .q-tip) */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.t-quote.is-truncated { cursor: help; }
.t-quote.is-truncated:focus-visible { outline: 2px solid rgba(255, 255, 255, .6); outline-offset: 4px; border-radius: 4px; }

/* tooltip with the full quote */
.q-tip {
  position: fixed;
  z-index: 60;
  max-width: min(440px, calc(100vw - 24px));
  padding: 14px 18px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  color: #fff;
  background: #1c1519;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .65), 0 0 0 1px rgba(141, 18, 56, .35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
}
.q-tip.show { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease; }
.t-stats {
  margin-top: auto;
  display: flex;
  align-items: stretch;
  padding-top: 1.5vw;
}
.t-stats > div { padding-right: 1.6vw; }
.t-stats > div + div { padding-left: 1.6vw; border-left: 1px solid rgba(255, 255, 255, .22); }
.t-stats dt { font-size: clamp(.95rem, 1.7vw, 1.8rem); font-weight: 500; }
.t-stats dd { margin-top: .2vw; font-size: clamp(.6rem, .8vw, .85rem); color: #8f8f8f; }

/* ---------- Contact ---------- */
.contact {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 43.6vw;
  gap: 4vw;
  align-items: end;
  padding: 9.2vw 6.9vw 11vw 7vw;
  background: #000;
}
.contact > .contact-copy, .contact > .contact-form { position: relative; z-index: 1; }
.contact-copy { padding-bottom: 3.7vw; }
.contact-copy h2 {
  font-size: clamp(2rem, 4.2vw, 4.4rem);
  font-weight: 600;
  line-height: 1.42;
  max-width: 10.6em;
}
.contact-copy p {
  margin-top: 1.7vw;
  max-width: 28em;
  font-size: clamp(.95rem, 1.5vw, 1.55rem);
  font-weight: 300;
  line-height: 1.65;
  color: #f1eaf1;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5vw;
  padding: 1.35vw;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 1.9vw;
  background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01));
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.contact-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2vw; }
.contact-form label {
  display: block;
  font-size: clamp(.75rem, 1vw, 1.05rem);
  font-weight: 300;
  color: #fff;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  display: block;
  width: 100%;
  margin-top: .45vw;
  padding: 0 1vw;
  font: inherit;
  font-size: clamp(.85rem, 1.1vw, 1.15rem);
  color: #fff;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: .4vw;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.contact-form input, .contact-form select { height: 3.3vw; min-height: 40px; }
.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.6vw;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1vw center;
  background-size: .8vw;
}
.contact-form select:disabled { opacity: .55; cursor: not-allowed; }
.contact-form .field-row-single { grid-template-columns: 1fr; }
.contact-form select option { color: #fff; background: #1a1a1a; }
.contact-form textarea { height: 8.4vw; min-height: 110px; padding-top: .9vw; resize: vertical; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: rgba(214, 92, 140, .9); box-shadow: 0 0 0 3px rgba(150, 25, 62, .35); }

.contact-form button {
  height: 3.3vw; min-height: 44px;
  margin-top: .6vw;
  font: inherit;
  font-size: clamp(.9rem, 1.2vw, 1.25rem);
  font-weight: 600;
  color: #6b0f2e;
  background: #d9d9d9;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.contact-form button:hover { background: #fff; transform: translateY(-2px); }
.contact-form button:disabled { opacity: .6; cursor: wait; transform: none; }
.captcha label { display: block; }
.captcha-row { display: flex; align-items: center; gap: .8vw; margin-top: .45vw; }
.captcha-img {
  flex: none;
  height: 3.3vw; min-height: 40px;          /* same height as the typing box and the other fields */
  width: auto;
  aspect-ratio: 170 / 46;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: .4vw;
  background: #161216;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.captcha-img.loading {
  /* soft moving shimmer while the picture is on its way, instead of an empty box */
  background: linear-gradient(100deg, #161216 30%, #2a2229 50%, #161216 70%) 0 0 / 200% 100%;
  animation: captcha-shimmer 1.1s linear infinite;
}
@keyframes captcha-shimmer { to { background-position: -200% 0; } }
.captcha-row input { flex: 1; min-width: 0; margin-top: 0; height: 3.3vw; min-height: 40px; text-transform: uppercase; letter-spacing: .12em; }   /* same height as the other fields */
.captcha-row input::placeholder { text-transform: none; letter-spacing: normal; color: rgba(255, 255, 255, .45); }
.captcha-refresh {
  flex: none;
  height: 3.3vw; min-height: 40px;
  width: 3.9vw; min-width: 46px;
  font-size: 1.2rem;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: .4vw;
  transition: background .25s ease, transform .4s ease;
}
.contact-form .captcha-row input { margin-top: 0; }   /* the generic field margin would push the box lower than the picture */
.contact-form .captcha-refresh { min-height: 40px; margin-top: 0; }   /* beats the generic form-button minimum so it matches the fields */
.captcha-refresh:hover { background: #8d1238; transform: rotate(180deg); }
/* narrow screens: picture + refresh button on one row, the typing box full width underneath */
@media (max-width: 487px) {
  .captcha-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "pic btn" "box box";
    gap: 10px;
    align-items: stretch;
  }
  .captcha-img { grid-area: pic; justify-self: start; }
  .captcha-refresh { grid-area: btn; }
  .captcha-row input { grid-area: box; width: 100%; min-height: 40px; }
}
@media (max-width: 900px) {
  .captcha-row { gap: 10px; margin-top: 6px; }
  .captcha-img, .captcha-refresh { border-radius: 6px; }
}
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status { min-height: 1.2em; margin-top: -.3vw; font-size: clamp(.8rem, 1vw, 1.05rem); text-align: center; color: #e3dade; }
.form-status:empty { display: none; }
.form-status.ok { color: #7be0a5; }
.form-status.error { color: #ff8a9d; }

/* ---------- Footer ---------- */
.site-footer {
  padding: 1.6vw 5%;
  text-align: center;
  background: #000;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.site-footer p {
  font-size: clamp(.78rem, 1vw, 1.05rem);
  font-weight: 300;
  letter-spacing: .02em;
  color: #c9bfc4;
}
@media (max-width: 900px) { .site-footer { padding: 20px 5%; } }

/* ---------- Video popup ---------- */
.video-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(92vw, 960px);
  max-height: 92vh;
  padding: 0;
  overflow: visible;
  color: #fff;
  background: #0b0b0b;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7), 0 0 60px rgba(150, 25, 62, .3);
}
.video-modal[open] { animation: video-in .3s ease; }
.video-modal::backdrop { background: rgba(0, 0, 0, .8); backdrop-filter: blur(6px); }
@keyframes video-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.video-title { padding: 14px 56px 12px 20px; font-size: .95rem; font-weight: 500; color: #e3dade; }
.video-title:empty { display: none; }
.video-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}
.video-stage video, .video-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.video-spinner {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .55);
  pointer-events: none;
  opacity: 1;
  transition: opacity .3s ease;
}
.video-spinner.hidden { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.video-ring {
  width: 56px;
  height: 56px;
  border: 4px solid rgba(255, 255, 255, .18);
  border-top-color: #d1507c;
  border-radius: 50%;
  animation: video-spin .8s linear infinite;
}
@keyframes video-spin { to { transform: rotate(360deg); } }
.video-missing { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #cfc3c8; font-size: 1rem; }
.video-close {
  position: absolute;
  top: 8px; right: 10px;
  z-index: 2;
  width: 38px; height: 38px;
  font-size: 1.6rem;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  transition: background .25s ease;
}
.video-close:hover { background: #8d1238; }
html.modal-open { overflow: hidden; }

/* ---------- Performance: do not render far-away sections until they are close to the screen ---------- */
/* contain-intrinsic-size is each section's measured height (in vw) MINUS its top and bottom padding,
   because the browser adds the padding on top of this number. It keeps the scrollbar from jumping. */
.case-studies, .technology, .testimonials, .contact { content-visibility: auto; }
.case-studies { contain-intrinsic-size: auto 28vw; }
.technology   { contain-intrinsic-size: auto 51vw; }
.testimonials { contain-intrinsic-size: auto 36.4vw; }
.contact      { contain-intrinsic-size: auto 38.8vw; }
@media (max-width: 900px) {
  .case-studies { contain-intrinsic-size: auto 86vw; }
  .technology   { contain-intrinsic-size: auto 139vw; }
  .testimonials { contain-intrinsic-size: auto 56vw; }
  .contact      { contain-intrinsic-size: auto 84vw; }
}
@media (max-width: 720px) {
  .case-studies { contain-intrinsic-size: auto 57vw; }
  .technology   { contain-intrinsic-size: auto 196vw; }
  .testimonials { contain-intrinsic-size: auto 76vw; }
  .contact      { contain-intrinsic-size: auto 114vw; }
}
@media (max-width: 480px) {
  /* on small phones the sections' heights vary too much with width to estimate, so render them normally */
  .case-studies, .technology, .testimonials, .contact { content-visibility: visible; }
}

/* =====================================================
   RESPONSIVE  (desktop design above is unchanged)
   ===================================================== */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }


/* ---------- Laptops / small desktops ---------- */
@media (max-width: 1100px) {
  .card img { width: max(7.2vw, 56px); }
  .nav { padding-inline: 28px; }
  .capabilities { width: 94%; }
}

/* ---------- Tablets ---------- */
@media (max-width: 900px) {
  .btn-connect { padding: 12px 18px; }
  .logo img { height: 110px; margin: -40px 0 -40px -42px; }

  .stats { gap: 2vw; }
  /* hero: content flows top to bottom over a cover-fit background */
  .hero { aspect-ratio: auto; min-height: 130vw; padding: 36px 36px 24vw; }
  .hero-bg { background-size: cover; background-position: 50% 100%; }
  .hero-content { margin-top: 40px; }
  /* vehicle cards become a centred wrap of tiles */
  .pins {
    position: static;
    transform: none;
    width: 100%;
    height: auto;
    max-width: 560px;
    margin: 56px auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px 22px;
  }
  .pin { position: static; transform: none; }
  .pin:nth-child(even) { margin-top: 22px; }
  .pin::after { height: 40px; }
  .card { padding: 9px; border-radius: 12px; }
  .card img { width: 74px; }
  .insights { margin-top: -26vw; }

  .stat { min-width: 0; width: 29vw; height: auto; min-height: 96px; }
  .stat-icon { width: 34%; }
  .stat-text { padding: 12px 14px; }

  .capabilities { grid-template-columns: repeat(3, 1fr); gap: 36px 20px; }
  .cap:nth-child(even) { margin-top: 0; }
  .cap-num { font-size: 3.4rem; }
  .cap-arrow { height: 56px; margin: 14px 0 16px 6px; }
  .cap h3 { font-size: 1.25rem; }
  .cap ul { margin-top: 12px; font-size: .9rem; }

  /* case studies: stack, cards scroll sideways */
  .case-studies { grid-template-columns: 1fr; gap: 40px; padding: 12vw 0 12vw 6vw; }
  .case-intro h2 { max-width: 14em; }
  .cases {
    --open-w: 62vw;
    --shut-w: 18vw;
    gap: 3vw;
    overflow-x: auto;
    padding: 4px 6vw 12px 0;
    scrollbar-width: none;
  }
  .cases::-webkit-scrollbar { display: none; }
  .case { height: 64vw; --cut: 5vw; }
  .case-num { top: 5vw; font-size: 1.2rem; }
  .case-detail { padding: 0 5vw 5vw; }
  .case-icon { top: 4.5vw; right: 4.5vw; width: 9vw; }
  .case-detail h3 { font-size: 1.35rem; }
  .case-detail p { margin-top: 8px; font-size: .85rem; }

  /* technology cards */
  .technology { padding: 10vw 6% 12vw; }
  .tech-cards { flex-direction: column; gap: 16px; margin-top: 40px; }
  .tech-card { aspect-ratio: auto; min-height: 330px; border-radius: 14px; }
  .tech-body { padding: 32px 28px 64px; }
  .tech-label { font-size: .8rem; }
  .tech-body p { margin-top: 22px; font-size: 1.5rem; }
    .tech-media { height: 110px; }
}

/* ---------- Phones ---------- */
@media (max-width: 720px) {
  /* navbar: logo and the Let's Connect button */
  .nav { grid-template-columns: 1fr auto; gap: 10px; padding: 8px 14px; border-radius: 14px; }
  .btn-connect { white-space: nowrap; padding: 10px 16px; font-size: .8rem; }
  .logo img { height: 96px; margin: -36px 0 -36px -38px; }

  /* phones: taller hero, smaller tiles */
  .hero { min-height: 185vw; padding: 24px 24px 28vw; }
  .hero-content { margin-top: 36px; }
  .hero-content h1 { font-size: 1.75rem; letter-spacing: .04em; }
  .hero-content p { font-size: .95rem; margin: 16px auto 24px; }
  .btn-poc { padding: 14px 26px; font-size: .95rem; }
  .pins { max-width: none; margin-top: 44px; gap: 22px 14px; }
  .card img { width: 54px; }
  .card::after { font-size: .62rem; }

  /* impact + stats */
  .insights { margin-top: -30vw; padding-bottom: 60vw; }
  .bg-cards { background-size: 100% 90vw; }
  .insights .section-title { font-size: 1.55rem; padding: 0 4px; }
  .stats { flex-direction: column; align-items: center; gap: 14px; margin: 32px auto 70px; }
  .stat { --cut: 18px; width: min(100%, 360px); height: 104px; min-height: 0; }
  .stat-icon { width: 36%; }
  .stat-icon img { width: 40px; }
  .stat-text strong { font-size: 1.9rem; }
  .stat-text span { font-size: .85rem; }
  .insights .section-sub { font-size: 1rem; padding: 0 6px; }

  .capabilities { grid-template-columns: 1fr 1fr; gap: 34px 18px; width: 100%; margin-top: 50px; }
  .cap-num { font-size: 2.8rem; }
  .cap h3 { font-size: 1.1rem; }
  .cap ul { font-size: .82rem; }

  /* case studies */
  .case-studies { padding: 16vw 0 16vw 5vw; }
  .case-intro h2 { font-size: 1.8rem; }
  .cases { --open-w: 70vw; --shut-w: 20vw; }
  .case { height: 92vw; }

  .technology .section-title { font-size: 1.6rem; }
}

/* ---------- Small phones ---------- */
@media (max-width: 400px) {
  .nav { gap: 8px; }
  .btn-connect span { display: none; }
  .hero-content h1 { font-size: 1.55rem; }
  .tech-body p { font-size: 1.3rem; }
}
@media (max-width: 340px) {
  .capabilities { grid-template-columns: 1fr; }
}

/* testimonials */
@media (max-width: 900px) {
  .testimonials { padding: 10vw 6vw 12vw; }
  .t-head { grid-template-columns: 1fr; gap: 14px; }
  .t-head p { margin-top: 0; font-size: .95rem; }
  /* swipe slider: one card at a time, the next one peeks in from the right edge */
  .t-row {
    flex-direction: row;
    gap: 12px;
    margin-top: 32px;
    margin-right: -6vw;                 /* let the row run to the screen edge */
    padding: 0 6vw 6px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .testimonial { flex: 0 0 min(80vw, 520px); width: auto; scroll-snap-align: start; gap: 14px; padding: 10px; border-radius: 16px; min-height: 300px; }
  .t-photo { border-radius: 10px; flex-basis: 38%; }
  .play { width: 34px; }
  .t-who { padding: 40px 10px 10px; }
  .t-who strong { font-size: .85rem; }
  .t-who span { font-size: .62rem; }
  .quote-icon { width: 28px; }
  .t-quote { margin-top: 16px; font-size: 1.1rem; }
  .t-stats { padding-top: 14px; }
  .t-stats > div { padding-right: 12px; }
  .t-stats > div + div { padding-left: 12px; }
  .t-stats dt { font-size: 1.05rem; }
  .t-stats dd { font-size: .65rem; margin-top: 2px; }
}

/* contact */
@media (max-width: 900px) {
  .contact {
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: start;
    padding: 14vw 6vw 18vw;
  }
  .bg-earth { background-size: 100% 14vw, 220% auto; }
  .contact-copy { padding-bottom: 0; }
  .contact-copy h2 { font-size: 2.2rem; line-height: 1.3; max-width: none; }
  .contact-copy p { margin-top: 16px; font-size: 1rem; }
  .contact-form { gap: 16px; padding: 18px; border-radius: 20px; }
  .contact-form .field-row { gap: 12px; }
  .contact-form label { font-size: .8rem; }
  .contact-form input, .contact-form textarea { margin-top: 6px; padding: 0 12px; font-size: .95rem; border-radius: 6px; }
  .contact-form textarea { padding-top: 10px; }
  .contact-form select { padding-right: 34px; background-position: right 12px center; background-size: 12px; }
}
@media (max-width: 560px) {
  .contact-form .field-row { grid-template-columns: 1fr; }
}

/* ---------- Text wrapping polish (no lonely last words) ---------- */
h1, h2, h3, .section-sub, .brands-text { text-wrap: balance; }

/* ---------- Small tweaks found while testing every size ---------- */
@media (max-width: 900px) {
  .insights { padding-bottom: 54vw; }          /* keeps the last capability bullets clear of the slabs */
}
@media (max-width: 720px) {
  .insights { padding-bottom: 70vw; }
  .hero-content h1 { font-size: 1.7rem; }
}
@media (max-width: 360px) {
  .nav { padding: 6px 10px; gap: 6px; }
  .logo img { height: 84px; margin: -31px 0 -31px -33px; }
  .btn-connect { padding: 9px 10px; font-size: .72rem; }
}

/* =====================================================
   SMALL SCREENS: dedicated designs for the hero and Core Capabilities
   (touch screens have no hover, so labels are always visible)
   ===================================================== */
@media (max-width: 720px) {

  /* ---------- Hero: headline up top, swipeable vehicle row at the bottom ---------- */
  .hero { min-height: max(150vw, 720px); padding: 26px 0 36vw; }
  .bg-hero { background-size: cover; background-position: 50% 100%; }
  .hero > .nav { margin-inline: 22px; width: calc(100% - 44px); }
  .hero-content { margin-top: 30px; padding: 0 20px; }
  .hero-content h1 { font-size: 1.7rem; line-height: 1.25; }
  .hero-content p { font-size: .92rem; margin: 14px auto 22px; }

  .pins {
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    height: auto;
    margin: auto 0 0;                 /* sits at the bottom of the hero, over the city */
    padding: 40px 30px 8px;
    display: flex;
    flex-wrap: wrap;                  /* grid of equal cards; the last row is centred */
    justify-content: center;
    gap: 12px;
    overflow: visible;
  }
  .pin, .pin:nth-child(even) {
    position: static;
    transform: none;
    margin-top: 0;
    flex: 0 0 auto;
    width: calc((100% - 24px) / 3);   /* 3 per row */
    display: block;
  }
  .pin::before, .pin::after { display: none; }       /* no pin lines in the grid */
  .p2, .p6 { display: block; }

  .card {
    width: 112px;
    padding: 14px 8px 12px;
    border-radius: 16px;
    align-items: center;
  }
  .card img { width: 58px; }
  .card::after {                                      /* name always visible */
    max-height: none;
    margin: 8px 0 0;
    opacity: 1;
    font-size: .68rem;
    line-height: 1.25;
    min-height: 2.5em;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  .card:hover { transform: none; }
  .card:active { transform: scale(.97); }

  /* ---------- Core Capabilities: stacked glass cards ---------- */
  .capabilities {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: none;
    margin: 36px 0 0;
  }
  .cap, .cap:nth-child(even) {
    position: relative;
    margin-top: 0;
    padding: 18px 20px 20px 22px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-left: 3px solid #a3254f;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015));
  }
  .cap-arrow { display: none; }
  .cap-num {
    position: absolute;
    top: 14px; right: 18px;
    font-size: 2.8rem;
    font-weight: 200;
    line-height: 1;
    color: rgba(255, 255, 255, .22);
  }
  .cap h3 {
    max-width: calc(100% - 64px);
    font-size: 1.15rem;
    line-height: 1.3;
  }
  .cap ul {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
    font-size: .82rem;
  }
  .cap ul li { margin: 0; padding-left: 1em; line-height: 1.35; }
  .cap ul li::before { left: 0; color: #d1507c; }
  .cap-faded .cap-num { color: rgba(214, 150, 172, .3); opacity: 1; }
  .cap-faded h3 { color: #eee; }
}
@media (max-width: 360px) {
  .cap ul { grid-template-columns: 1fr; }
}
@media (max-width: 359px) {
  .pin, .pin:nth-child(even) { width: calc((100% - 12px) / 2); }   /* 2 per row on very narrow phones */
}
@media (min-width: 560px) and (max-width: 720px) {
  .pin, .pin:nth-child(even) { width: calc((100% - 36px) / 4); }   /* 4 per row on large phones */
}

/* Small laptops / large tablets (901 to 1180px): the headline block takes more of the hero's height,
   so the row of vehicle cards starts lower, keeping the centre cards clear of the "Get a POC" button */
@media (min-width: 901px) and (max-width: 1050px) { .pins { top: 40%; } }
@media (min-width: 1051px) and (max-width: 1180px) { .pins { top: 34%; } }

/* =====================================================
   MOBILE: equal-size vehicle cards + a stacked "Trusted Results" design
   ===================================================== */
@media (max-width: 900px) {
  /* every vehicle icon sits in the same box, so every card is the same size */
  .card img { height: 56px; object-fit: contain; }
}
@media (max-width: 720px) {
  .card { box-sizing: border-box; width: 100%; height: 142px; padding: 14px 8px 10px; justify-content: flex-start; overflow: hidden; }
  .card img { width: 62px; height: 46px; object-fit: contain; flex: none; }
  .card::after { font-size: .64rem; min-height: 0; margin-top: 10px; }

  /* ---------- Trusted Results: always-open stacked cards (no accordion on touch) ---------- */
  .case-studies { grid-template-columns: 1fr; gap: 26px; padding: 14vw 5vw 14vw; }
  .case-intro { text-align: left; }
  .case-intro h2 { font-size: 1.75rem; max-width: none; }

  /* swipe slider: one card at a time with a peek of the next */
  .case-studies { padding-right: 0; overflow: hidden; }
  .cases {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-right: 0;
    padding: 0 5vw 6px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    --open-w: 100%;
    --shut-w: 100%;
  }
  .cases::-webkit-scrollbar { display: none; }
  .cases .case,
  .cases:hover .case:first-child:not(:hover),
  .cases:focus-within .case:first-child:not(:hover):not(:focus-within),
  .case:first-child {
    --w: 100%;
    --o: 1;
    --cut: 18px;
    width: 78vw;
    max-width: 340px;
    height: auto;
    min-height: 168px;
    flex: none;
    scroll-snap-align: start;
    background-color: rgba(190, 40, 85, .6);
    will-change: auto;
  }
  .case::after { background: radial-gradient(ellipse 80% 90% at 0% 100%, rgba(120, 14, 48, .6), transparent 70%), linear-gradient(160deg, #2a2a2a, #0b0b0b 70%); }

  .case-num {
    position: absolute;
    top: 16px; left: 20px;
    transform: none;
    z-index: 1;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .14em;
    color: #d1507c;
    opacity: 1;
  }
  .case-detail {
    position: relative;
    top: auto; bottom: auto; left: auto;
    z-index: 1;
    width: auto;
    margin: 1px;
    padding: 40px 78px 20px 20px;
    justify-content: flex-start;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .cases:not(:hover) .case:first-child .case-detail { transition: none; }
  .case-icon { top: 18px; right: 18px; width: 46px; min-width: 0; }
  .case-detail h3 { font-size: 1.15rem; line-height: 1.3; }
  .case-detail { min-height: 166px; }
  .case-detail p {
    align-self: flex-start;
    margin-top: auto;
    margin-bottom: 0;
    padding: 5px 12px;
    font-size: .8rem;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
  }
  .case:active { background-color: rgba(214, 70, 120, .8); }

  /* slider dots */
  .cases-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 18px 5vw 0 0; }
  .cases-dots button {
    width: 8px; height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
    cursor: pointer;
    transition: width .3s ease, background .3s ease;
  }
  .cases-dots button.active { width: 24px; background: #d1507c; }
}
@media (min-width: 721px) { .cases-dots { display: none; } }

/* =====================================================
   EXTRA LARGE SCREENS (1800px and wider)
   Everything is scaled up in proportion to a 1512px design:
   1rem becomes 1.058vw, so rem text grows and the px sizes below are re-stated in rem.
   ===================================================== */
@media (min-width: 1800px) {
  html { font-size: 1.058vw; }
  .hero { padding: 2.75rem 3.5rem 4rem; }
  .nav { max-width: 87.5rem; padding: .75rem 2.875rem; border-radius: .875rem; }
  .btn-connect { padding: .875rem 1.625rem; border-radius: .375rem; }
  .logo img { height: 8.125rem; margin: -3rem 0 -3rem -3.125rem; }
  .hero-content { max-width: 62.5rem; margin-top: 1.75rem; }
  .hero-content p { max-width: 38.75rem; margin: 1.25rem auto 1.75rem; }
  .btn-poc { padding: 1rem 1.875rem; }
  .pins { max-width: 77.5rem; }
  .pin::before { width: .5625rem; height: .5625rem; }
  .card { padding: .625rem; border-radius: .875rem; }
  .card img { width: 6.5rem; }
  .chip { padding: .5rem 1.375rem; }
  .section-title { margin-top: 1rem; }
  .section-sub { max-width: 35rem; margin-top: 1.75rem; }
  .insights { padding-top: .625rem; padding-inline: 1.5rem; }
  .stats { margin: 3.125rem auto 6.875rem; }
  .stat { min-width: 18.75rem; min-height: 6.25rem; }
  .stat-icon img { min-width: 2.75rem; }
  .capabilities { max-width: 93.75rem; margin-top: 5.625rem; }
  .cap-arrow { min-height: 3.5rem; }
  .case-icon { min-width: 2.25rem; }
    .play, .quote-icon { min-width: 1.75rem; }
  .contact-form input, .contact-form select { min-height: 2.5rem; }
  .contact-form textarea { min-height: 6.875rem; }
  .contact-form button { min-height: 2.75rem; }
}