/* ==========================================================================
   VOXELCLICKS — Sections
   Hero, services, stats, process, work, testimonials, CTA, page headers
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(100svh, 900px);
  padding-top: calc(var(--nav-h) + clamp(2rem, 5vw, 4rem));
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}

/* Deep wash under the mesh: light pools behind the horizon and falls away
   toward the foreground, which is what gives the field its sense of volume. */
.hero__fallback {
  position: absolute;
  inset: 0;
  z-index: -4;
  background: radial-gradient(ellipse 78% 52% at 50% 46%, rgba(0, 229, 192, 0.13), transparent 68%),
    radial-gradient(ellipse 90% 60% at 50% 104%, rgba(0, 0, 0, 0.55), transparent 62%),
    radial-gradient(ellipse 70% 48% at 50% 4%, rgba(56, 189, 248, 0.07), transparent 66%),
    var(--bg-void);
}

/* Plexus mesh canvas */
.hero__mesh {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
  /* Fade the mesh out through the middle of the hero so it never sits
     directly behind the headline. This is the whole reason it can be
     present without competing for attention. */
  mask-image: radial-gradient(ellipse 50% 30% at 50% 41%, transparent 14%, #000 72%);
  -webkit-mask-image: radial-gradient(ellipse 50% 30% at 50% 41%, transparent 14%, #000 72%);
}

.hero__mesh.is-live {
  opacity: 1;
}

/* Top and bottom falloff so the mesh dissolves into the page */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(180deg, var(--bg-void) 0%, transparent 22%, transparent 72%, var(--bg-void) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Centred stack — the reference sites all put everything on one axis */
.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 60rem;
  margin-inline: auto;
}

.hero__title {
  font-size: clamp(2.9rem, 8.2vw, 6.6rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.055em;
  max-width: 15ch;
  margin-block: clamp(1.2rem, 2.5vw, 1.9rem) clamp(1.1rem, 2vw, 1.5rem);
}

.hero__sub {
  max-width: 46ch;
  margin-inline: auto;
  font-size: clamp(1.02rem, 1.4vw, 1.28rem);
  line-height: 1.6;
  color: var(--text);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: clamp(1.75rem, 4vw, 2.6rem);
}

.hero__note {
  justify-content: center;
}

/* Inner pages keep their heading left-aligned, so the actions and trust
   line must start-align too rather than inherit the home page centring. */
.hero__actions--start {
  justify-content: flex-start;
}

.hero__note--start {
  justify-content: flex-start;
}

/* Typewriter word cycle inside a heading */
.type {
  display: inline-block;
}

.type__out {
  display: inline;
}

.type__caret {
  display: inline-block;
  width: 3px;
  height: 0.82em;
  margin-left: 0.06em;
  background: var(--green);
  vertical-align: baseline;
  animation: blink 1.05s steps(2) infinite;
  /* the serif accent is gradient-filled, so give the caret a solid colour */
  -webkit-text-fill-color: initial;
}

@media (prefers-reduced-motion: reduce) {
  .type__caret {
    display: none;
  }
}

/* Rotating "engine" ticker */
.ticker {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-lo);
}

.ticker__window {
  position: relative;
  display: inline-block;
  height: 1.5em;
  overflow: hidden;
  vertical-align: bottom;
}

.ticker__list {
  display: block;
  transition: transform 0.7s var(--ease-in-out);
}

.ticker__list li {
  height: 1.5em;
  line-height: 1.5em;
  color: var(--green);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   1b. Answer panel — the hero's signature element
   Shows the thing this agency actually sells: an AI answer that names the
   client. Tilts gently toward the pointer; the copy itself never moves.
   -------------------------------------------------------------------------- */

/* Proof panel sits directly beneath the hero */
.proof {
  padding-top: 0;
}

.proof__lead {
  margin-bottom: var(--sp-3);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.answer {
  position: relative;
  perspective: 1400px;
  max-width: 46rem;
  margin-inline: auto;
}

.answer__card {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background: linear-gradient(168deg, var(--bg-raised), var(--bg-surface) 60%);
  box-shadow: 0 34px 80px -46px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-out);
  will-change: transform;
}

.answer__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--line);
  background: var(--glass);
}

.answer__engine {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-lo);
}

.answer__engine svg {
  color: var(--green);
}

.answer__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.answer__live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
}

.answer__body {
  padding: clamp(1.15rem, 2.4vw, 1.7rem);
}

.answer__q {
  display: flex;
  gap: 0.7rem;
  padding-bottom: 1.05rem;
  margin-bottom: 1.05rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
  color: var(--text-hi);
}

.answer__q span:first-child {
  color: var(--text-faint);
  flex: none;
}

.answer__a {
  font-size: 0.97rem;
  line-height: 1.72;
  color: var(--text);
}

/* Caret that blinks while the question types */
.answer__caret {
  display: inline-block;
  width: 7px;
  height: 1.05em;
  margin-left: 2px;
  background: var(--green);
  vertical-align: text-bottom;
  animation: blink 1.05s steps(2) infinite;
}

.answer__caret[hidden] {
  display: none;
}

/* Thinking state between question and answer */
.answer__thinking {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 1.05rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.answer__thinking[hidden] {
  display: none;
}

.answer__thinking span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  opacity: 0.35;
  animation: think-dot 1.1s var(--ease-in-out) infinite;
}

.answer__thinking span:nth-child(2) {
  animation-delay: 0.16s;
}
.answer__thinking span:nth-child(3) {
  animation-delay: 0.32s;
  margin-right: 0.35rem;
}

@keyframes think-dot {
  0%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* Answer body stays hidden until the sequence reaches it */
.answer__reveal {
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}

.answer__reveal.is-shown {
  opacity: 1;
}

.answer__reveal .answer__cites {
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}

.answer__reveal .answer__cites.is-shown {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .answer__reveal,
  .answer__reveal .answer__cites {
    opacity: 1;
  }
}

/* The moment the whole page is arguing for */
.answer__brand {
  position: relative;
  display: inline;
  padding: 0.12em 0.3em;
  margin-inline: -0.06em;
  border-radius: 5px;
  background: rgba(0, 229, 192, 0.16);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text-hi);
  font-weight: 600;
}

.answer__cites {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.15rem;
  padding-top: 1.05rem;
  border-top: 1px solid var(--line);
}

.answer__cite {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3em 0.65em;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--glass);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-lo);
}

.answer__cite b {
  color: var(--green);
  font-weight: 500;
}

/* Small floating tag that sits proud of the card */
.answer__tag {
  position: absolute;
  right: clamp(-0.5rem, 1vw, 0.75rem);
  bottom: -1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--bg-elevated);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.95);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-hi);
  white-space: nowrap;
}

.answer__tag b {
  color: var(--green);
  font-weight: 500;
}

/* Trust line under the CTAs */
.hero__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.15rem;
  margin-top: var(--sp-3);
  font-size: 0.85rem;
  color: var(--text-faint);
}

.hero__note span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.hero__note svg {
  color: var(--green);
  flex: none;
}

/* --------------------------------------------------------------------------
   2. Logo / trust strip
   -------------------------------------------------------------------------- */

.surfaces {
  padding-block: clamp(2rem, 4vw, 3rem);
  border-block: 1px solid var(--line);
  background: var(--bg-deep);
}

.surfaces__lead {
  text-align: center;
  margin-bottom: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.surfaces__grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

@media (min-width: 700px) {
  .surfaces__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.surface {
  display: grid;
  gap: 0.2rem;
  padding: clamp(0.9rem, 2vw, 1.3rem);
  background: var(--bg-deep);
  transition: background-color var(--dur-fast);
}

.surface:hover {
  background: var(--bg-surface);
}

.surface__name {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text-hi);
}

.surface__note {
  font-size: 0.8rem;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   3. Service rows — big interactive list with cursor-following preview
   -------------------------------------------------------------------------- */

.svc {
  position: relative;
  border-top: 1px solid var(--line);
}

.svc__row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.9rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 3.4vw, 2.6rem);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
  overflow: hidden;
  /* The row grows downward on hover; the photo behind it is revealed as the
     extra height appears. */
  transition: padding-block 0.55s var(--ease-out), padding-left 0.55s var(--ease-out);
}

/* Photo sits behind the row, mostly hidden until it opens */
.svc__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.6s var(--ease-out), transform 1.1s var(--ease-out);
  pointer-events: none;
}

/* Scrim so the copy stays readable once the photo appears */
.svc__row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(5, 9, 15, 0.96) 30%, rgba(5, 9, 15, 0.72) 62%, rgba(5, 9, 15, 0.5)),
    linear-gradient(0deg, var(--acc-glow, rgba(0, 229, 192, 0.14)), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}

@media (min-width: 900px) {
  .svc__row:hover {
    padding-block: clamp(3.5rem, 8vw, 6.5rem);
    padding-left: 1.75rem;
  }
}

@media (max-width: 899px) {
  .svc__row:hover {
    padding-block: clamp(2.5rem, 8vw, 4rem);
  }
}

.svc__row:hover .svc__media {
  opacity: 0.5;
  transform: scale(1);
}

.svc__row:hover::before {
  opacity: 1;
}

.svc__num {
  min-width: 8.5ch;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  transition: color 0.4s;
}

.svc__row:hover .svc__num {
  color: var(--acc, var(--green));
}

@media (max-width: 600px) {
  .svc__num {
    display: none;
  }
}

.svc__main {
  display: grid;
  gap: 0.4rem;
}

@media (min-width: 1100px) {
  .svc__main {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: var(--sp-4);
  }
}

.svc__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.2vw, 3rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--text-hi);
  transition: color 0.4s;
}

.svc__row:hover .svc__name {
  color: var(--acc, var(--green));
}

.svc__desc {
  font-size: 0.95rem;
  color: var(--text-lo);
  max-width: 54ch;
  transition: color 0.4s;
}

.svc__row:hover .svc__desc {
  color: var(--text);
}

.svc__go {
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--text-lo);
  transition: transform 0.5s var(--ease-out), background-color 0.4s, color 0.4s,
    border-color 0.4s;
}

.svc__row:hover .svc__go {
  background: var(--acc, var(--green));
  border-color: var(--acc, var(--green));
  color: var(--bg-void);
  transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .svc__row,
  .svc__media {
    transition: none;
  }
}

/* Floating preview that trails the cursor (desktop only) */
.svc__preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 300px;
  height: 210px;
  border-radius: var(--r-md);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out);
  border: 1px solid var(--line-strong);
  display: none;
}

@media (min-width: 1100px) and (hover: hover) {
  .svc__preview {
    display: block;
  }
}

.svc__preview.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.svc__preview-inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1rem;
  background: var(--bg-raised);
  transition: background 0.45s var(--ease-out);
}

.svc__preview-glyph {
  color: var(--bg-void);
  opacity: 0.9;
  margin-inline: auto;
}

.svc__preview-word {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bg-void);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   4. Feature grid (capability cards)
   -------------------------------------------------------------------------- */

.grid-3 {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}

@media (min-width: 680px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1080px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grid-2 {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}

@media (min-width: 820px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grid-4 {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 1080px) {
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   5. AI solutions showcase
   -------------------------------------------------------------------------- */

.ai {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-void), var(--bg-deep) 50%, var(--bg-void));
}

.ai__layout {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 1000px) {
  .ai__layout {
    grid-template-columns: 1fr 1fr;
  }
}

.ai__list {
  display: grid;
  gap: 0.85rem;
  margin-top: var(--sp-4);
}

.ai__item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-size: 0.98rem;
  color: var(--text-lo);
}

.ai__item svg {
  flex: none;
  margin-top: 0.28em;
  color: var(--green);
}

.ai__item strong {
  color: var(--text-hi);
}

/* Terminal-style visual */
.term {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background: rgba(5, 18, 11, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(0, 229, 192, 0.32);
}

.term__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: var(--glass);
}

.term__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-faint);
}

.term__dot:first-child {
  background: var(--green);
}

.term__name {
  margin-left: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.term__body {
  padding: 1.35rem;
  font-family: var(--font-mono);
  font-size: clamp(0.74rem, 1.5vw, 0.84rem);
  line-height: 1.9;
  min-height: 300px;
}

.term__line {
  display: flex;
  gap: 0.7rem;
  color: var(--text-lo);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}

.term__line.is-in {
  opacity: 1;
  transform: none;
}

.term__prompt {
  color: var(--green);
  flex: none;
}

.term__ok {
  color: var(--cyan);
}

.term__caret {
  display: inline-block;
  width: 8px;
  height: 1.05em;
  background: var(--green);
  vertical-align: text-bottom;
  animation: blink 1.05s steps(2) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   6. Stats band
   -------------------------------------------------------------------------- */

.stats {
  border-block: 1px solid var(--line);
  background: var(--bg-deep);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 980px) {
  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat {
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1rem, 2.5vw, 2rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur) var(--ease-out);
}

.stat:hover {
  background: var(--glass);
}

@media (min-width: 980px) {
  .stat {
    border-bottom: 0;
  }
  .stat:last-child {
    border-right: 0;
  }
}

@media (max-width: 979px) {
  .stat:nth-child(2n) {
    border-right: 0;
  }
  .stat:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

.stat__value {
  display: flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--text-hi);
}

.stat__suffix {
  color: var(--green);
}

.stat__label {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-lo);
  max-width: 22ch;
}

/* --------------------------------------------------------------------------
   7. Process — sticky scroll steps
   -------------------------------------------------------------------------- */

/* A real sequence, so the rail and the numbering both carry meaning:
   the fill shows how far through the engagement you've read. */

.road {
  position: relative;
  padding-left: clamp(2.2rem, 5vw, 3.4rem);
  /* Centre the column so a single-sided timeline doesn't strand the
     right half of a wide screen. */
  max-width: 54rem;
  margin-inline: auto;
}

/* The rail and its progress fill */
.road__rail {
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: clamp(0.55rem, 1.4vw, 1rem);
  width: 2px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

.road__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--cyan), var(--green) 45%, var(--teal));
  transform: scaleY(0);
  transform-origin: top;
}

/* Native scroll-driven fill where supported (Chrome/Edge/Safari 26+).
   Firefox falls back to the scroll listener in main.js. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .road {
      view-timeline: --road block;
    }

    /* `cover` spans first-pixel-in to last-pixel-out, which is the range that
       behaves predictably when the section is taller than the viewport.
       `entry`/`exit` would never complete here. */
    .road__fill {
      animation: road-fill linear both;
      animation-timeline: --road;
      animation-range: cover 12% cover 82%;
    }

    @keyframes road-fill {
      from {
        transform: scaleY(0);
      }
      to {
        transform: scaleY(1);
      }
    }
  }
}

.road__step {
  position: relative;
  padding-bottom: clamp(1.6rem, 3.2vw, 2.5rem);
}

.road__step:last-child {
  padding-bottom: 0;
}

/* Dot sitting on the rail */
.road__dot {
  position: absolute;
  top: 0.35rem;
  left: calc(clamp(0.55rem, 1.4vw, 1rem) - clamp(2.2rem, 5vw, 3.4rem) - 6px);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--bg-void);
  transition: background-color 0.45s var(--ease-out), border-color 0.45s var(--ease-out),
    transform 0.45s var(--ease-spring);
}

.road__step.is-active .road__dot {
  background: var(--green);
  border-color: var(--green);
  transform: scale(1.25);
}

/* Halo that pulses only on the step you're reading */
.road__dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--green);
  opacity: 0;
  transform: scale(0.6);
}

@media (prefers-reduced-motion: no-preference) {
  .road__step.is-active .road__dot::after {
    animation: dot-pulse 2.2s var(--ease-out) infinite;
  }
}

@keyframes dot-pulse {
  0% {
    opacity: 0.75;
    transform: scale(0.6);
  }
  100% {
    opacity: 0;
    transform: scale(2.1);
  }
}

.road__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color 0.4s;
}

.road__step.is-active .road__num {
  color: var(--green);
}

.road__title {
  margin: 0.45rem 0 0.6rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text-hi);
}

.road__text {
  font-size: 0.97rem;
  color: var(--text-lo);
  max-width: 58ch;
}

.road__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--sp-2);
}

.road__when {
  display: inline-block;
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   8. Work / case studies
   -------------------------------------------------------------------------- */

.work {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .work {
    grid-template-columns: repeat(2, 1fr);
  }
}

.case {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-surface);
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.case:hover {
  border-color: var(--line-strong);
  transform: translateY(-6px);
}

/* Abstract gradient "artwork" per case */
.case__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.55;
  transition: opacity var(--dur) var(--ease-out), transform 1.1s var(--ease-out);
}

.case:hover .case__art {
  opacity: 0.85;
  transform: scale(1.06);
}

.case__art--a {
  background: radial-gradient(circle at 78% 18%, rgba(0, 229, 192, 0.5), transparent 55%),
    radial-gradient(circle at 20% 88%, rgba(56, 189, 248, 0.35), transparent 52%);
}

.case__art--b {
  background: radial-gradient(circle at 22% 22%, rgba(77, 216, 255, 0.4), transparent 55%),
    radial-gradient(circle at 82% 78%, rgba(0, 229, 192, 0.38), transparent 55%);
}

.case__art--c {
  background: radial-gradient(circle at 50% 100%, rgba(0, 229, 192, 0.45), transparent 58%),
    radial-gradient(circle at 84% 12%, rgba(140, 252, 232, 0.3), transparent 50%);
}

.case__art--d {
  background: radial-gradient(circle at 12% 46%, rgba(56, 189, 248, 0.42), transparent 55%),
    radial-gradient(circle at 88% 62%, rgba(77, 216, 255, 0.32), transparent 52%);
}

.case__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(5, 9, 15, 0.55), rgba(5, 9, 15, 0.94));
}

.case__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: auto;
}

.case__client {
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
}

.case__title {
  margin-top: 0.6rem;
  font-size: var(--step-2);
  max-width: 20ch;
}

.case__results {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.case__kpi b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--green);
  line-height: 1;
}

.case__kpi span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--text-lo);
}

/* --------------------------------------------------------------------------
   9. Testimonials
   -------------------------------------------------------------------------- */

.quotes {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .quotes {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1120px) {
  .quotes {
    grid-template-columns: repeat(3, 1fr);
  }
}

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-surface);
  transition: border-color var(--dur), transform var(--dur) var(--ease-out);
}

.quote:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
}

.quote__stars {
  display: flex;
  gap: 3px;
  color: var(--cyan);
}

.quote__text {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--text);
  flex: 1;
}

.quote__by {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
}

.quote__avatar {
  display: grid;
  place-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--grad-brand);
  color: var(--bg-void);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
}

.quote__name {
  font-weight: 600;
  color: var(--text-hi);
  font-size: 0.94rem;
  line-height: 1.3;
}

.quote__role {
  font-size: 0.8rem;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   10. Big CTA
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(3rem, 6.5vw, 6rem);
}

.cta__glow {
  position: absolute;
  left: 50%;
  bottom: -45%;
  width: min(1000px, 130vw);
  height: min(1000px, 130vw);
  transform: translateX(-50%);
  background: var(--grad-glow);
  filter: blur(30px);
  pointer-events: none;
  opacity: 0.75;
}

.cta__title {
  position: relative;
  font-size: var(--step-5);
  max-width: 16ch;
  margin-inline: auto;
}

.cta__sub {
  position: relative;
  max-width: 46ch;
  margin: var(--sp-3) auto 0;
  color: var(--text);
}

.cta__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-4);
}

.cta__note {
  position: relative;
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   11. Inner-page header
   -------------------------------------------------------------------------- */

.phead {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 5vw, 4.5rem));
  padding-bottom: clamp(1.75rem, 3.5vw, 3rem);
  overflow: hidden;
  isolation: isolate;
}

.phead__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 60% 70% at 15% 0%, rgba(0, 229, 192, 0.17), transparent 60%),
    radial-gradient(ellipse 50% 60% at 90% 20%, rgba(56, 189, 248, 0.12), transparent 58%);
}

.phead__title {
  font-size: var(--step-5);
  max-width: 16ch;
  margin-top: var(--sp-3);
}

.phead__sub {
  max-width: 54ch;
  margin-top: var(--sp-3);
  font-size: var(--step-1);
  color: var(--text);
}

/* Breadcrumb */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.crumbs a:hover {
  color: var(--green);
}

/* --------------------------------------------------------------------------
   12. Service detail blocks (services page)
   -------------------------------------------------------------------------- */

.detail {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  padding-block: clamp(2rem, 4vw, 3.25rem);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + 2rem);
}

@media (min-width: 1000px) {
  .detail {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.detail__aside {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}

@media (min-width: 1000px) {
  .detail__aside {
    position: sticky;
    top: calc(var(--nav-h) + 3rem);
  }
}

.detail__title {
  font-size: var(--step-3);
}

.detail__list {
  display: grid;
  gap: 0.9rem;
}

.detail__list li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.96rem;
  color: var(--text-lo);
}

.detail__list li:last-child {
  border-bottom: 0;
}

.detail__list svg {
  flex: none;
  margin-top: 0.3em;
  color: var(--green);
}

.detail__list b {
  display: block;
  color: var(--text-hi);
  font-weight: 600;
  margin-bottom: 0.15rem;
}

/* --------------------------------------------------------------------------
   12b. Free-check offer — the low-friction entry point on service pages
   -------------------------------------------------------------------------- */

.offer {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--line-strong);
  background: linear-gradient(155deg, rgba(0, 229, 192, 0.09), transparent 52%), var(--bg-surface);
  padding: clamp(1.75rem, 4vw, 3.25rem);
}

.offer__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 940px) {
  .offer__grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.offer__title {
  font-size: var(--step-3);
  max-width: 20ch;
  margin: 0.75rem 0 0.9rem;
}

.offer__text {
  color: var(--text-lo);
  max-width: 52ch;
}

.offer__list {
  display: grid;
  gap: 0.75rem;
  margin-top: var(--sp-3);
}

.offer__list li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--text);
}

.offer__list svg {
  flex: none;
  margin-top: 0.3em;
  color: var(--green);
}

.offer__box {
  padding: clamp(1.35rem, 3vw, 2rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: rgba(5, 9, 15, 0.6);
  text-align: center;
}

.offer__price {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--green);
}

.offer__was {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-faint);
}

.offer__turn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: var(--sp-3) 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-lo);
}

.offer__turn svg {
  color: var(--green);
}

/* --------------------------------------------------------------------------
   12c. Stat callouts used inside service pages
   -------------------------------------------------------------------------- */

.facts {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .facts {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fact {
  padding: clamp(1.35rem, 3vw, 2rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-surface);
}

.fact__n {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--green);
}

.fact__d {
  margin-top: 0.7rem;
  font-size: 0.94rem;
  color: var(--text-lo);
}

.fact__src {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   13. Pricing / engagement tiers
   -------------------------------------------------------------------------- */

.tier {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-surface);
  transition: border-color var(--dur), transform var(--dur) var(--ease-out);
}

.tier:hover {
  border-color: var(--line-strong);
  transform: translateY(-5px);
}

.tier--featured {
  border-color: var(--line-strong);
  background: linear-gradient(165deg, rgba(0, 229, 192, 0.09), transparent 55%), var(--bg-raised);
}

.tier__flag {
  align-self: flex-start;
}

.tier__price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--text-hi);
}

.tier__price small {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-faint);
}

.tier__features {
  display: grid;
  gap: 0.7rem;
  flex: 1;
}

.tier__features li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.93rem;
  color: var(--text-lo);
}

.tier__features svg {
  flex: none;
  margin-top: 0.3em;
  color: var(--green);
}

/* --------------------------------------------------------------------------
   14. Contact layout
   -------------------------------------------------------------------------- */

.contact {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 980px) {
  .contact {
    grid-template-columns: 1fr 1.15fr;
  }
}

.contact__panel {
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-surface);
}

.contact__rows {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.contact__row {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.contact__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.contact__row svg {
  flex: none;
  margin-top: 0.2em;
  color: var(--green);
}

.contact__row b {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 400;
  margin-bottom: 0.25rem;
}

.contact__row a,
.contact__row p {
  color: var(--text-hi);
  font-size: 1rem;
}

.contact__row a:hover {
  color: var(--green);
}

.form-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .form-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.form-grid .span-2 {
  grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   15. Team
   -------------------------------------------------------------------------- */

.person {
  position: relative;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-surface);
  text-align: center;
  transition: border-color var(--dur), transform var(--dur) var(--ease-out);
}

.person:hover {
  border-color: var(--line-strong);
  transform: translateY(-5px);
}

.person__avatar {
  display: grid;
  place-content: center;
  width: 84px;
  height: 84px;
  margin: 0 auto var(--sp-2);
  border-radius: 50%;
  background: var(--grad-brand);
  color: var(--bg-void);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.person__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-hi);
}

.person__role {
  margin-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
}

.person__bio {
  margin-top: var(--sp-2);
  font-size: 0.9rem;
  color: var(--text-lo);
}

/* --------------------------------------------------------------------------
   16. Values / about
   -------------------------------------------------------------------------- */

.value {
  padding-block: var(--sp-3);
  border-top: 1px solid var(--line);
}

.value__k {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.5rem;
}

.value__t {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text-hi);
  margin-bottom: 0.5rem;
}

.value__d {
  font-size: 0.96rem;
  color: var(--text-lo);
  max-width: 60ch;
}

/* ==========================================================================
   Industry hero imagery
   Each industry carries its own accent (--acc), set inline on the section,
   so the pages stop reading as one continuous teal wash.
   ========================================================================== */

.phead--img {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.phead__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Push the photo toward the industry accent so it never fights the type */
  filter: saturate(0.72) contrast(1.06) brightness(0.52);
}

/* Accent wash + readability scrim */
.phead--img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, var(--bg-void) 6%, rgba(5, 9, 15, 0.82) 42%, rgba(5, 9, 15, 0.35) 78%),
    radial-gradient(ellipse 70% 90% at 88% 40%, var(--acc-glow, rgba(0, 229, 192, 0.32)), transparent 68%);
}

/* Thin accent rule under the hero */
.phead--img::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--acc, var(--green)), transparent 72%);
}

.phead--img .eyebrow,
.phead--img .crumbs a:hover {
  color: var(--acc, var(--green));
}

.phead--img .eyebrow::before {
  background: var(--acc, var(--green));
  box-shadow: 0 0 12px var(--acc, var(--green));
}

.phead--img .hero__note svg {
  color: var(--acc, var(--green));
}

/* Photo credit, small and out of the way */
.phead__credit {
  position: absolute;
  right: 0.75rem;
  bottom: 0.6rem;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: rgba(234, 240, 246, 0.35);
}

/* ==========================================================================
   Capabilities strip: photos that expand on hover
   ========================================================================== */

/* ==========================================================================
   Industry hero imagery
   Each industry carries its own accent (--acc), set inline on the section,
   so the pages stop reading as one continuous teal wash.
   ========================================================================== */

.phead--img {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.phead__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Push the photo toward the industry accent so it never fights the type */
  filter: saturate(0.72) contrast(1.06) brightness(0.52);
}

/* Accent wash + readability scrim */
.phead--img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, var(--bg-void) 6%, rgba(5, 9, 15, 0.82) 42%, rgba(5, 9, 15, 0.35) 78%),
    radial-gradient(ellipse 70% 90% at 88% 40%, var(--acc-glow, rgba(0, 229, 192, 0.32)), transparent 68%);
}

/* Thin accent rule under the hero */
.phead--img::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--acc, var(--green)), transparent 72%);
}

.phead--img .eyebrow,
.phead--img .crumbs a:hover {
  color: var(--acc, var(--green));
}

.phead--img .eyebrow::before {
  background: var(--acc, var(--green));
  box-shadow: 0 0 12px var(--acc, var(--green));
}

.phead--img .hero__note svg {
  color: var(--acc, var(--green));
}

/* Photo credit, small and out of the way */
.phead__credit {
  position: absolute;
  right: 0.75rem;
  bottom: 0.6rem;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: rgba(234, 240, 246, 0.35);
}

/* ==========================================================================
   Capabilities strip: photos that expand on hover
   ========================================================================== */

.caps {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
}

/* Grid tracks, not flex-grow. An earlier flex version reported the right
   grow values but never re-laid out; explicit column tracks are
   deterministic and animate cleanly. */
@media (min-width: 900px) {
  .caps {
    grid-template-columns: repeat(9, 1fr);
    height: 440px;
    transition: grid-template-columns 0.55s var(--ease-out);
  }
}

.cap {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 92px;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
  transition: border-color 0.4s, min-height 0.5s var(--ease-out);
}

.cap.is-open {
  border-color: var(--acc, var(--green));
}

@media (max-width: 899px) {
  .cap.is-open {
    min-height: 230px;
  }
}

.cap__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.5) brightness(0.42);
  transform: scale(1.06);
  transition: filter 0.6s var(--ease-out), transform 0.9s var(--ease-out);
}

.cap.is-open .cap__img {
  filter: saturate(1) brightness(0.76);
  transform: scale(1);
}

.cap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(5, 9, 15, 0.18), rgba(5, 9, 15, 0.92)),
    linear-gradient(0deg, var(--acc-glow, rgba(0, 229, 192, 0.22)), transparent 58%);
  transition: opacity 0.5s var(--ease-out);
}

.cap.is-open::before {
  opacity: 0.72;
}

.cap__body {
  position: absolute;
  inset: 0;
  padding: clamp(0.9rem, 1.8vw, 1.3rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.65rem;
}

.cap__ico {
  display: grid;
  place-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  border: 1px solid var(--acc, var(--green));
  background: rgba(5, 9, 15, 0.6);
  color: var(--acc, var(--green));
}

/* Text stays horizontal. Collapsed panels are too narrow for a multi-word
   service name, so the label appears with the panel rather than truncating. */
.cap__text {
  min-width: 0;
  width: max-content;
  max-width: 100%;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  pointer-events: none;
}

.cap.is-open .cap__text {
  opacity: 1;
  transform: none;
  transition-delay: 0.18s;
}

@media (max-width: 899px) {
  .cap__text {
    opacity: 1;
    transform: none;
  }
}

.cap__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-hi);
  line-height: 1.2;
  white-space: nowrap;
}

.cap__desc {
  display: block;
  max-width: 34ch;
  margin-top: 0.35rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
  white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
  .caps,
  .cap,
  .cap__img,
  .cap__text {
    transition: none;
  }
  .cap__text {
    opacity: 1;
    transform: none;
  }
}
  .cap__desc {
    opacity: 1;
    transform: none;
  }
}