.services-body {
  background: var(--page);
}

.services-hero {
  position: relative;
  min-block-size: min(46rem, 80svh);
  overflow: hidden;
  isolation: isolate;
  background: var(--near-black);
  color: var(--pure-white);
}

.services-hero__scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 75% 20%, var(--forest-soft), var(--forest-transparent) 29%),
    linear-gradient(130deg, var(--near-black), var(--deep-forest) 58%, var(--graphite));
}

.services-hero__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.14;
  background-image: radial-gradient(circle, var(--pure-white) 0.45px, transparent 0.55px);
  background-size: 5px 5px;
  mix-blend-mode: soft-light;
}

.services-hero__plane {
  position: absolute;
  border: 1px solid var(--ivory-soft);
}

.services-hero__plane--one {
  inset-block-start: -55%;
  inset-inline-end: -2%;
  inline-size: 48vw;
  block-size: 105vh;
  border-radius: 48% 0 42% 52%;
  transform: rotate(16deg);
}

.services-hero__plane--two {
  inset-block-end: -66%;
  inset-inline-start: 27%;
  inline-size: 58vw;
  block-size: 82vh;
  border-radius: 54% 46% 0 0;
  transform: rotate(-10deg);
  background: var(--ivory-faint);
}

.services-hero__scene svg {
  position: absolute;
  z-index: 2;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.services-hero__path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.services-hero__path--amber {
  stroke: var(--time-amber);
  stroke-width: 1.3;
  stroke-dasharray: 8 12;
  opacity: 0.8;
  animation: hero-dash 28s linear infinite;
}

.services-hero__path--soft {
  stroke: var(--soft-sage);
  stroke-width: 0.8;
  opacity: 0.42;
}

.services-hero__scene circle {
  fill: var(--time-amber);
  filter: drop-shadow(0 0 8px var(--amber-soft));
}

.services-hero__count {
  position: absolute;
  z-index: 1;
  inset-inline-start: -0.04em;
  inset-block-end: -0.15em;
  color: var(--pure-white);
  font-family: var(--font-display);
  font-size: clamp(15rem, 31vw, 34rem);
  line-height: 0.7;
  opacity: 0.035;
}

.services-hero__inner {
  position: relative;
  z-index: 3;
  display: grid;
  min-block-size: min(46rem, 80svh);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  padding-block: 9rem clamp(3.25rem, 7vh, 5.5rem);
}

.services-hero__copy {
  grid-column: 1 / span 9;
  max-inline-size: 66rem;
}

.services-kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--time-amber);
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.2;
}

.services-kicker::before {
  content: "";
  inline-size: 2rem;
  block-size: 1px;
  background: currentColor;
}

.services-hero h1 {
  max-inline-size: 14ch;
  margin-block-start: 1.15rem;
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 6.8vw, 6.8rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0.91;
  text-wrap: balance;
}

.services-hero__copy > p:not(.services-kicker) {
  max-inline-size: 44rem;
  margin-block-start: 1.6rem;
  color: var(--muted-text);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.65;
}

.services-hero__action {
  margin-block-start: 2rem;
  border-color: var(--time-amber);
  background: var(--time-amber);
  color: var(--near-black);
}

.services-intro {
  background: var(--surface);
}

.services-intro__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.services-intro__number {
  grid-column: 1;
  color: var(--time-amber);
  font-family: var(--font-display);
  font-size: 0.8rem;
}

.services-intro h2 {
  grid-column: 2 / span 6;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.5vw, 5.4rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0.95;
  text-wrap: balance;
}

.services-intro__grid > p:last-child {
  grid-column: 9 / -1;
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.8;
}

.services-catalog {
  background: var(--surface-alt);
}

.services-heading {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
}

.services-heading .services-kicker {
  grid-column: 1 / span 3;
  align-self: start;
  color: var(--accent-text);
}

.services-heading h2 {
  grid-column: 5 / -1;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.6vw, 5.6rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0.95;
  text-wrap: balance;
}

.services-list {
  margin-block-start: clamp(4rem, 8vw, 7rem);
  border-block-end: 1px solid var(--line);
}

.service-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  border-block-start: 1px solid var(--line);
  scroll-margin-block-start: 6rem;
}

.service-row__identity {
  grid-column: 1 / span 5;
}

.service-row__number {
  color: var(--time-amber);
  font-family: var(--font-display);
  font-size: 0.76rem;
}

.service-row__icon {
  display: block;
  inline-size: clamp(3rem, 5vw, 4.5rem);
  block-size: clamp(3rem, 5vw, 4.5rem);
  margin-block-start: clamp(2rem, 4vw, 3.5rem);
  background: var(--ink-strong);
  -webkit-mask: var(--service-icon) center / contain no-repeat;
  mask: var(--service-icon) center / contain no-repeat;
}

.service-row h3 {
  max-inline-size: 10ch;
  margin-block-start: 1.5rem;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.5vw, 4.5rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0.98;
}

.service-row__content {
  grid-column: 7 / -1;
  max-inline-size: 42rem;
}

.service-row__lead {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.5rem);
  line-height: 1.2;
}

.service-row__body {
  margin-block-start: 1.4rem;
  color: var(--muted);
  line-height: 1.8;
}

.service-row__content ul {
  display: grid;
  gap: 0.8rem;
  margin-block-start: 2rem;
  color: var(--ink);
}

.service-row__content ul li {
  position: relative;
  padding-inline-start: 1.25rem;
}

.service-row__content ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.7em;
  inline-size: 0.42rem;
  block-size: 0.42rem;
  background: var(--time-amber);
  transform: rotate(45deg);
}

.service-row__action {
  margin-block-start: 2rem;
}

.services-process {
  overflow: hidden;
  background: var(--deep-forest);
  color: var(--pure-white);
}

.services-heading--light .services-kicker {
  color: var(--time-amber);
}

.services-heading--light h2 {
  color: var(--pure-white);
}

.services-process__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-block-start: clamp(4rem, 7vw, 6rem);
  background: var(--dark-border);
}

.services-process__steps li {
  min-block-size: 19rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--deep-forest);
}

.services-process__steps span {
  color: var(--time-amber);
  font-family: var(--font-display);
  font-size: 0.76rem;
}

.services-process__steps h3 {
  margin-block-start: clamp(4rem, 8vw, 6rem);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  font-weight: 500;
  line-height: 1;
}

.services-process__steps p {
  margin-block-start: 1rem;
  color: var(--muted-text);
  line-height: 1.7;
}

.services-cta {
  position: relative;
  overflow: hidden;
  background: var(--near-black);
  color: var(--pure-white);
}

.services-cta::after {
  content: "";
  position: absolute;
  inset-inline-end: -10rem;
  inset-block-start: -17rem;
  inline-size: 38rem;
  block-size: 38rem;
  border: 1px solid var(--ivory-soft);
  border-radius: 50%;
}

.services-cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  min-block-size: 28rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: center;
  padding-block: clamp(4rem, 8vw, 7rem);
}

.services-cta__inner > div {
  grid-column: 1 / span 7;
}

.services-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(3.1rem, 6.3vw, 6.2rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0.92;
}

.services-cta p {
  max-inline-size: 38rem;
  margin-block-start: 1.25rem;
  color: var(--muted-text);
  font-size: 1.05rem;
}

.services-cta .button {
  grid-column: 9 / -1;
  justify-self: end;
  border-color: var(--time-amber);
  background: var(--time-amber);
  color: var(--near-black);
  text-align: center;
}

@media (max-width: 900px) {
  .services-hero__copy {
    grid-column: 1 / span 10;
  }

  .services-intro h2 {
    grid-column: 2 / span 8;
  }

  .services-intro__grid > p:last-child {
    grid-column: 2 / span 8;
    margin-block-start: 1.5rem;
  }

  .services-heading h2 {
    grid-column: 4 / -1;
  }

  .services-cta__inner > div,
  .services-cta .button {
    grid-column: 1 / -1;
  }

  .services-cta .button {
    justify-self: start;
  }
}

@media (max-width: 700px) {
  .services-hero,
  .services-hero__inner {
    min-block-size: min(42rem, 82svh);
  }

  .services-hero__inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-block: 8rem 3.5rem;
  }

  .services-hero__copy {
    grid-column: 1 / -1;
  }

  .services-hero h1 {
    font-size: clamp(3.3rem, 15vw, 4.8rem);
  }

  .services-hero__plane--one {
    inline-size: 90vw;
  }

  .services-intro__grid,
  .services-heading,
  .service-row,
  .services-cta__inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }

  .services-intro__number,
  .services-intro h2,
  .services-intro__grid > p:last-child,
  .services-heading .services-kicker,
  .services-heading h2,
  .service-row__identity,
  .service-row__content,
  .services-cta__inner > div,
  .services-cta .button {
    grid-column: 1 / -1;
  }

  .services-intro h2,
  .services-heading h2 {
    margin-block-start: 1.1rem;
  }

  .service-row__content {
    margin-block-start: 2rem;
  }

  .services-process__steps {
    grid-template-columns: 1fr;
  }

  .services-process__steps li {
    min-block-size: 15rem;
  }

  .services-process__steps h3 {
    margin-block-start: 3.5rem;
  }

  .services-cta .button,
  .services-hero__action {
    inline-size: 100%;
    justify-content: center;
  }
}

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

.services-archive-hero .projects-hero__copy > p:last-child {
  max-inline-size: 46rem;
}

.services-archive-hero .services-kicker {
  margin-block-end: 1.2rem;
}

.services-archive .projects-archive__header > p:last-child {
  font-size: clamp(1rem, 1.25vw, 1.15rem);
}

.services-archive .projects-archive__header {
  display: block;
}

.services-archive .projects-archive__header h2 {
  max-inline-size: 14ch;
}

.services-archive .projects-archive__header > p:last-child {
  max-inline-size: 68rem;
  margin-block-start: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.85;
  text-wrap: pretty;
}

/* Keep the service cards closer to the top of their archive section. This is
   scoped here so the project archive retains its more spacious rhythm. */
.services-archive .service-grid {
  margin-block-start: clamp(2.75rem, 6vw, 5.5rem);
}

.service-card {
  scroll-margin-block-start: 6rem;
}

.service-card__link {
  block-size: 100%;
}

.service-card__visual {
  isolation: isolate;
  border: 1px solid var(--dark-border);
  background: var(--deep-forest);
}

.service-card__visual::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0.55;
}

.service-card__visual--ai-products::before {
  background:
    radial-gradient(circle at 72% 32%, rgba(211, 147, 50, 0.34), transparent 24%),
    linear-gradient(138deg, #121a18, #30443b 60%, #1b2421);
}

.service-card__visual--custom-systems::before {
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(239, 228, 213, 0.12) 50%, transparent 50.2%),
    linear-gradient(150deg, #16201d, #2e3c37 62%, #171f1d);
}

.service-card__visual--interactive-experiences::before {
  background:
    radial-gradient(circle at 28% 72%, rgba(239, 228, 213, 0.2), transparent 26%),
    linear-gradient(125deg, #161d1b, #3b3228 54%, #22312c);
}

.service-card__visual--web-development::before {
  background:
    linear-gradient(145deg, rgba(211, 147, 50, 0.22), transparent 40%),
    linear-gradient(135deg, #111917, #30453c 58%, #1a211f);
}

.service-card__grid {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: 0.14;
  background-image:
    linear-gradient(var(--pure-white) 1px, transparent 1px),
    linear-gradient(90deg, var(--pure-white) 1px, transparent 1px);
  background-size: 14% 18%;
  -webkit-mask-image: linear-gradient(145deg, transparent 8%, #000 76%);
  mask-image: linear-gradient(145deg, transparent 8%, #000 76%);
}

.service-card__window {
  position: absolute;
  z-index: 2;
  inset-inline: 10% 27%;
  inset-block: 13% 18%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  background: rgba(247, 243, 236, 0.045);
  box-shadow: 1.5rem 1.5rem 0 rgba(247, 243, 236, 0.035);
  transform: rotate(-3deg);
  transition: transform 260ms ease, background-color 260ms ease;
}

[dir="rtl"] .service-card__window {
  transform: rotate(3deg);
}

.service-card__window::before {
  content: "";
  position: absolute;
  inset: 10% 0 auto;
  block-size: 1px;
  background: rgba(255, 255, 255, 0.22);
}

.service-card__window i {
  position: relative;
  display: inline-block;
  inline-size: 5px;
  block-size: 5px;
  margin-inline-start: 0.5rem;
  margin-block-start: 0.65rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}

.service-card__icon {
  position: absolute;
  z-index: 3;
  inset-inline-start: 24%;
  inset-block-start: 31%;
  display: block;
  inline-size: 24%;
  aspect-ratio: 1;
  background: var(--pure-white);
  opacity: 0.88;
  -webkit-mask: var(--service-icon) center / contain no-repeat;
  mask: var(--service-icon) center / contain no-repeat;
  transition: transform 260ms ease;
}

.service-card__link:hover .service-card__window,
.service-card__link:focus-visible .service-card__window {
  background: rgba(247, 243, 236, 0.08);
  transform: rotate(0);
}

.service-card__link:hover .service-card__icon,
.service-card__link:focus-visible .service-card__icon {
  transform: scale(1.08);
}

.service-card__link:focus-visible {
  outline: 3px solid var(--time-amber);
  outline-offset: 0.45rem;
}

.service-card .project-card__meta span:last-child {
  color: var(--time-amber);
}

.service-card .project-card__content h3 {
  margin-block-start: 0;
}

@media (max-width: 700px) {
  .services-archive-hero .projects-hero__copy {
    align-self: end;
  }

  .services-archive-hero .projects-hero__count {
    margin-block-start: 1.5rem;
  }

  .service-card__window {
    inset-inline: 9% 23%;
  }

  .services-archive .projects-archive__header h2 {
    margin-block-start: 0;
  }

  .services-archive .projects-archive__header > p:last-child {
    margin-block-start: 1.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-card__window,
  .service-card__icon {
    transition: none;
  }
}