/* Live DOM measurements, 8 October 2026. Keep these corrections after the
   earlier reference passes so the source geometry has a single final owner. */
@font-face {
  font-family: Gilroy;
  src: url('../assets/fonts/Gilroy_Bold-s.p.2vuxs1fugmva0.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
.clients-grid { background: #ffffff0d; border-color: #ffffff1a; backdrop-filter: blur(20px) saturate(1.5); }
.client-logo { overflow: hidden; border-color: #ffffff1a; }
.client-logo img { transition: transform .3s ease-out; }
.client-logo:hover img { transform: scale(1.1); }
.faq .section-heading { align-items: flex-start; margin-bottom: 24px; }
.faq .section-heading h2 { line-height: 1.35; }
.seo-copy { margin-top: 40px; padding: 24px 40px; border-radius: 24px; }
#seo-text { padding-top: 8px; }
#seo-text:not(.expanded) { height: 88px; overflow: hidden; }
#seo-text > h2:first-child { margin-bottom: 12px; }
#seo-text > h2:not(:first-child) { font-size: 16px; line-height: 24px; margin: 12px 0; }
#seo-text p { margin-bottom: 12px; }
#read-more { display: block; margin-top: 16px; line-height: 20px; }
@media (min-width: 1024px) {
  .wrap { max-width: none; }
  /* 160vh hero range + 100vh technology stage + 250vh technology pin. */
  .hero-journey { height: 510vh; }
  .hero { align-items: flex-start; padding-top: 30vh; }
  .hero h1 { font-size: 5vw; line-height: 1; }
  .hero-actions { width: 40vw; max-width: none; }
  .technology h2 { font-size: 4.5vw; line-height: 1.25; }
  .section-heading h2 { font-size: 42px; }
  .award-copy h2 { font-size: 4vw; }
  .faq .section-heading h2 { font-size: 48px; }
  .solutions { height: auto; padding: 0 0 112px; align-items: center; }
  .solutions h2 { font-weight: 400; line-height: 1.2; margin-bottom: 48px; }
  .solutions h2 strong { display: block; margin-top: 16px; background: linear-gradient(90deg,#06b22d,#a3ffb8 50%,#06b22d); background-clip: text; -webkit-text-fill-color: transparent; }
  .services { padding-top: 80px; padding-bottom: 80px; }
  .services-grid { gap: 32px; }
  .services-grid .service-card { height: 220px; min-height: 0; padding: 24px; }
  .awards { height: max(480px,60vh); padding-bottom: 0; align-items: center; }
  .stats { padding: 0 32px 40px; }
  .stats > div { min-width: 182px; }
  .stats p { font-size: 1.3vw; line-height: 1.2; margin-top: 10px; }
  .stats .count { line-height: 1.2; }
  .clients { margin-bottom: 50px; }
  .clients .section-heading { margin-bottom: 32px; }
  .clients .section-heading > h2 { flex: 1; }
  .clients .section-heading > .pill { margin-right: 4px; margin-bottom: 32px; }
  .clients-grid .client-logo img { width: 100%; height: auto; max-width: none; max-height: none; padding: 48px; }
  .projects .section-heading { top: 80px; }
  .testimonials { padding-bottom: 148px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .clients-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .client-logo { height: auto; min-height: 140px; padding: 16px; }
  .client-logo img { width: auto; height: auto; max-width: 130px; max-height: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .client-logo { min-height: 160px; padding: 20px; }
  .client-logo img { max-width: 150px; }
}
@media (max-width: 639px) {
  .client-logo { height: auto; min-height: 120px; padding: 8px; }
  .client-logo img { width: auto; height: auto; max-width: 110px; max-height: none; }
  .seo-copy { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .client-logo img { transition: none; }
}
/* Live desktop navigation: Medium 18/21.6 and the 40px logo at y=24. */
@media (min-width: 1024px) {
  #header > a:first-of-type { height: 58px; display: flex; align-items: flex-start; }
  #header .logo { width: auto; height: 40px; }
  #header nav a { font-weight: 500; line-height: 1.2; }
  #header .phone { width: 32px; }
  #header .menu-toggle { width: 128px; }
}

/* Source cards keep their geometry fixed while their border, icon and title change. */
.services-grid .service-card { transition: border-color .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1); }
@media (min-width: 1024px) {
  .stats { align-items: center; }
  .stats > div { width: 182px; min-width: 0; max-width: 182px; flex: 0 0 182px; }
  .stats > div:not(:last-child)::after { right: calc((728px - (100vw - 64px)) / 6); top: 50%; transform: translateY(-50%); width: 2px; height: 56px; background: #ffffff59; }
}

/* Award strip and case-study cards use the source's media dimensions and states. */
.awards-marquee .marquee-track { gap: 2vw; animation-duration: 30s; }
.awards-marquee .marquee-track:hover,
.awards-marquee:hover .marquee-track { animation-play-state: running; }
.awards-marquee img { width: 15vh; height: 15vh; margin-right: 0; }
.awards-marquee .duplicate { display: contents; }
.client-logo:hover { background: #ffffff0d; }
.case-card { background: #ffffff0d; border-color: #ffffff1a; border-radius: 12px; backdrop-filter: blur(20px) saturate(1.5); transition: background-color .3s cubic-bezier(.4,0,.2,1); }
.case-card:hover { background: #ffffff1a; }
.case-card:hover img { transform: none; }
.case-card picture { background: #00000080; }
.case-card picture::after { display: none; }
.case-card img { aspect-ratio: 1602 / 798; }
.case-caption { bottom: 33px; left: 33px; right: auto; max-width: calc((100% - 42px) * .85); }
.case-caption h3 { font-size: 28px; font-weight: 600; line-height: 1.25; margin-bottom: 6px; text-shadow: 0 1px 8px #000000bf; }
.case-caption p { font-size: 20px; line-height: 1.375; color: #ffffffd9; text-shadow: 0 1px 6px #000000a6; }
@media (max-width: 639px) {
  .case-caption { bottom: 29px; left: 29px; }
  .case-caption h3 { font-size: 20px; }
  .case-caption p { font-size: 16px; }
}
@media (min-width: 640px) and (max-width: 767px) {
  .case-caption h3 { font-size: 24px; }
  .case-caption p { font-size: 18px; }
}

.case-card { width: min(60vw, 1400px); }
@media (min-width: 1024px) and (max-width: 1279px) { .case-card { width: 65vw; } }
@media (max-width: 1023px) {
  .case-track { gap: 24px; padding-inline: 24px; }
  .case-card { flex: 0 0 80vw; width: 80vw; padding: 20px; }
}
@media (max-width: 639px) {
  .case-track { gap: 16px; padding-inline: 16px; }
  .case-card { flex-basis: 95vw; width: 95vw; padding: 16px; }
}

/* The reference pins this horizontal row on touch screens as well as desktop. */
.projects { position: relative; }
.projects .section-heading { position: relative; top: auto; left: auto; padding-top: 80px; margin-bottom: 0; }
.projects-sticky { position: sticky; top: 0; height: 100vh; padding: 0; display: block; overflow: hidden; }
.case-track { position: absolute; top: 50%; left: 0; width: max-content; min-width: 100%; overflow: visible; scroll-snap-type: none; transform: var(--case-transform,translateY(-50%)) !important; }
.case-card { flex-shrink: 0; }
.case-progress { display: block; position: absolute; left: 50%; bottom: 48px; width: min(65vw,900px); height: 3px; transform: translateX(-50%); opacity: var(--case-progress-opacity,0); background: #d9d9d9; }
.case-progress > span { background: #35d867; }
.case-progress::after { width: calc(var(--case-dot-radius,12px) * 2); height: calc(var(--case-dot-radius,12px) * 2); top: 50%; margin-left: 0; transform: translate(-50%,-50%); background: #35d867; }
html:not(.js) .projects,html:not(.js) .projects-sticky { position: static; height: auto; }
html:not(.js) .case-track { position: static; max-width: 100%; width: 100%; overflow-x: auto; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .projects { height: auto; }
  .projects-sticky { position: static; height: auto; padding-block: 40px; }
  .case-track { position: static; width: 100%; overflow-x: auto; transform: none !important; }
  .case-progress { display: none; }
}