/* UX-S theme refinement layer — loaded after the compiled stylesheet on every
   page. Goals: more air and taller sections, deliberate asymmetry, a more
   present glass treatment, and a livelier journey plane. */

/* ---------------------------------------------------------------- air */

.section {
  padding: clamp(7.5rem, 12vw, 12.5rem) 0;
}

.section-heading {
  margin-bottom: clamp(4rem, 7vw, 6.5rem);
}

/* Type scale matched to the new compact hero: display, not billboard. */
.section-heading h2 {
  font-size: clamp(2.2rem, 3.7vw, 3.5rem);
  letter-spacing: -0.045em;
  line-height: 1.04;
}

.section-heading > p {
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  margin-top: 1.4rem;
}

.final-cta {
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.final-cta h2 {
  font-size: clamp(2.2rem, 4.2vw, 3.8rem);
  letter-spacing: -0.05em;
}

.site-footer {
  padding: 8.5rem 0 2.5rem;
}

.footer-grid {
  padding: 3.8rem 0;
}

/* roomier editorial lists */
.service-row {
  padding: 2.1rem 0;
}

.process-list article {
  padding: 2.6rem 0;
}

.faq-list summary {
  padding: 1.8rem 0;
}

.tech-list span {
  padding: 1.6rem 0.5rem;
}

.testimonial-grid {
  gap: 1.5rem;
}

.testimonial-grid article {
  min-height: 360px;
  padding: 2.5rem;
}

.featured-projects {
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
}

/* ---------------------------------------------------------- asymmetry */

/* Alternate the anchor of section headers down the page. */
.work-showcase .section-heading,
.technology-section .section-heading {
  margin-left: auto;
}

.work-showcase .section-heading .eyebrow,
.technology-section .section-heading .eyebrow {
  justify-content: flex-start;
}

.testimonials-section .section-heading {
  margin-left: clamp(0px, 6vw, 110px);
}

.process-section .process-list {
  margin-left: clamp(0px, 7vw, 140px);
}

/* Stagger the project mosaic — the pair column starts lower. */
.featured-projects {
  align-items: start;
}

.featured-pair {
  margin-top: clamp(2rem, 5vw, 4.5rem);
}

/* Offset the second voice in the testimonial pair. */
.testimonial-grid article:nth-child(2) {
  margin-top: clamp(1.5rem, 4vw, 3.5rem);
}

/* Let the why visual hang lower than its copy. */
.why-grid {
  align-items: start;
}

.why-visual {
  margin-top: clamp(1.5rem, 4vw, 3.5rem);
}

@media (max-width: 900px) {
  .testimonial-grid article:nth-child(2),
  .featured-pair,
  .why-visual {
    margin-top: 0;
  }
  .process-section .process-list {
    margin-left: 0;
  }
}

/* -------------------------------------------------------------- glass */

.glass:not(.final-cta-panel) {
  background: linear-gradient(135deg, #ffffff1c, #ffffff08 55%, #ffffff12);
  border: 1px solid #ffffff30;
  box-shadow: inset 0 1px 0 #ffffff2e, 0 24px 70px #00000052;
  -webkit-backdrop-filter: blur(28px) saturate(1.45);
  backdrop-filter: blur(28px) saturate(1.45);
}

.light-section .glass:not(.final-cta-panel) {
  background: linear-gradient(135deg, #ffffffe0, #ffffffb0 60%, #ffffffd0);
  border-color: #00000021;
  box-shadow: inset 0 1px 0 #ffffffd9, 0 18px 50px #00000017;
}

.back-to-top {
  border-radius: 99px;
}

/* ------------------------------------------------------ journey plane */

/* A slightly more present route… */
.journey-path__route {
  stroke: #a8a8a8e6;
  stroke-width: 2px;
  stroke-dasharray: 3 8;
}

/* …and a more alive traveler, sized to match the arcade ship. */
.journey-path__traveler {
  width: 58px;
  height: 43px;
  filter: drop-shadow(0 6px 10px #00000059) drop-shadow(0 0 16px #ffffff21);
}

.journey-path__halo {
  width: 46px;
  height: 46px;
  margin: -23px;
  border-color: #b4b4b459;
  background: radial-gradient(circle, #ffffff30, #7f7f7f10 55%, #0000 72%);
}

.journey-path__trail {
  width: 27px;
  right: 48px;
}

.journey-path__trail i {
  background: linear-gradient(90deg, #0000, #d8d8d5d9);
}

@media (prefers-reduced-motion: no-preference) {
  .journey-path__airframe {
    animation: uxs-glide 3.4s ease-in-out infinite;
  }

  .journey-path__halo {
    animation: uxs-halo 3.4s ease-in-out infinite;
  }
}

@keyframes uxs-glide {
  0%, 100% { transform: translateY(-1.6px) rotate(-1.4deg); }
  50% { transform: translateY(1.6px) rotate(1.4deg); }
}

@keyframes uxs-halo {
  0%, 100% { opacity: 0.7; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.06); }
}