.services {
  --service-height: clamp(344px, 28.9vw, 520px);
  --service-overlap: clamp(22px, 1.9vw, 34px);
  --service-haze-opacity: calc(1 - var(--theme-mix, 0) * .5);
  --service-sheen-opacity: calc(1 - var(--theme-mix, 0) * .72);
  position: relative;
  isolation: isolate;
  min-height: max(720px, 100svh);
  padding: clamp(88px, 13.1vh, 142px) 0 clamp(76px, 10vh, 124px);
  overflow: hidden;
  scroll-margin-top: 0;
  color: var(--ink, #080a10);
  background: var(--page-bg, #fff);
}

.services::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 16% -12% 0;
  opacity: var(--service-haze-opacity);
  background:
    radial-gradient(ellipse 54% 43% at 47% 58%, rgb(142 170 255 / .17), transparent 76%),
    radial-gradient(ellipse 43% 34% at 64% 70%, rgb(173 161 255 / .16), transparent 80%),
    radial-gradient(ellipse 38% 29% at 21% 60%, rgb(166 195 255 / .10), transparent 79%);
  pointer-events: none;
}

.services:focus { outline: none; }

.services-inner {
  position: relative;
  width: min(87.5%, 1600px);
  margin: 0 auto;
}

.services-heading {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: end;
  padding: 0 clamp(44px, 5vw, 88px);
}

.services-heading h2 {
  margin: 0;
  font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(60px, 5.3vw, 94px);
  font-weight: 750;
  line-height: .95;
  letter-spacing: -.05em;
  word-spacing: .1em;
}

.services-intro {
  width: max-content;
  max-width: calc(100% + 32px);
  margin: 0 0 5px;
  color: var(--ink-muted, #252538);
  font-size: clamp(16px, 1.42vw, 21px);
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: -.045em;
}

.services-cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  min-height: calc(var(--service-height) + 52px);
  margin-top: clamp(36px, 3.125vw, 58px);
  padding: 0 clamp(20px, 1.85vw, 34px);
}

.service-card {
  --service-rest-x: 0px;
  --service-rest-y: 0px;
  --service-rest-r: 0deg;
  --service-rest-scale: 1;
  --service-rest-layer: 1;
  --service-x: 0px;
  --service-y: 0px;
  --service-r: 0deg;
  --service-rx: 0deg;
  --service-ry: 0deg;
  --service-icon-x: 0px;
  --service-icon-y: 0px;
  position: relative;
  z-index: var(--service-rest-layer);
  width: calc(100% + var(--service-overlap));
  height: var(--service-height);
  margin: 0;
  perspective: 1000px;
  transform: translate3d(calc(var(--service-rest-x) + var(--service-x)), calc(var(--service-rest-y) + var(--service-y)), 0) rotateZ(calc(var(--service-rest-r) + var(--service-r))) scale(var(--service-rest-scale));
  transform-origin: 50% 58%;
}

.service-card[data-service='branding'] {
  --service-rest-x: -8px;
  --service-rest-r: -6deg;
  --service-rest-scale: .98;
  --service-rest-layer: 1;
}

.service-card[data-service='web-design'] {
  --service-rest-y: -10px;
  --service-rest-r: -3deg;
  --service-rest-scale: 1.045;
  --service-rest-layer: 4;
}

.service-card[data-service='development'] {
  --service-rest-y: 3px;
  --service-rest-r: 4deg;
  --service-rest-layer: 3;
}

.service-card[data-service='motion'] {
  --service-rest-x: -8px;
  --service-rest-y: 9px;
  --service-rest-r: 6deg;
  --service-rest-layer: 2;
}

.service-card-surface {
  --service-glass-top: color-mix(in srgb, rgb(243 247 255 / .88), rgb(21 27 40 / .92) var(--theme-weight, 0%));
  --service-glass-middle: color-mix(in srgb, rgb(226 233 255 / .75), rgb(30 38 56 / .88) var(--theme-weight, 0%));
  --service-glass-bottom: color-mix(in srgb, rgb(239 241 255 / .87), rgb(21 27 40 / .94) var(--theme-weight, 0%));
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: clamp(21px, 1.85vw, 30px);
  background: linear-gradient(145deg, var(--service-glass-top), var(--service-glass-middle) 56%, var(--service-glass-bottom));
  box-shadow:
    0 calc(23px + var(--theme-mix, 0) * 3px)
      calc(45px + var(--theme-mix, 0) * 5px)
      calc(-27px + var(--theme-mix, 0) * 3px)
      color-mix(in srgb, rgb(46 71 172 / .25), rgb(0 0 0 / .55) var(--theme-weight, 0%)),
    0 3px 12px color-mix(in srgb, rgb(78 104 179 / .035), rgb(0 0 0 / .2) var(--theme-weight, 0%)),
    inset 0 1px 0 color-mix(in srgb, rgb(255 255 255 / .80), rgb(255 255 255 / .09) var(--theme-weight, 0%)),
    inset 0 0 0 1px color-mix(in srgb, transparent, rgb(167 189 238 / .15) var(--theme-weight, 0%));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transform: rotateX(var(--service-rx)) rotateY(var(--service-ry));
  transform-origin: 50% 55%;
}

.service-card-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(132deg, rgb(255 255 255 / .18), transparent 53%);
  opacity: var(--service-sheen-opacity);
  pointer-events: none;
}

.service-artwork {
  position: absolute;
  z-index: 1;
  top: 7px;
  left: 15px;
  right: 15px;
  aspect-ratio: 1;
  max-width: calc(var(--service-height) * .72);
  margin-inline: auto;
  pointer-events: none;
  user-select: none;
}

.service-artwork img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform: translate3d(var(--service-icon-x), var(--service-icon-y), 0);
}

.service-card[data-service='branding'] .service-artwork { transform: scale(.94); }
.service-card[data-service='motion'] .service-artwork { transform: scale(.96); }

.service-copy {
  position: absolute;
  z-index: 2;
  left: clamp(24px, 2.2vw, 38px);
  right: 18px;
  bottom: clamp(27px, 2.3vw, 40px);
}

.service-copy h3 {
  margin: 0 0 7px;
  color: var(--ink, #070912);
  font-size: clamp(25px, 2.1vw, 36px);
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -.055em;
  word-spacing: .055em;
}

.service-copy p {
  margin: 0;
  color: var(--ink-muted, #35374c);
  font-size: clamp(15.5px, 1.31vw, 22px);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -.035em;
}

.services.has-service-motion .service-card,
.services.has-service-motion .service-card-surface,
.services.has-service-motion .service-artwork img { will-change: transform; }

@media (min-width: 1001px) {
  .service-card[data-service='development'] .service-copy,
  .service-card[data-service='motion'] .service-copy {
    left: calc(clamp(24px, 2.2vw, 38px) + 20px);
  }
}

@media (max-width: 1000px) {
  .services {
    --service-height: clamp(348px, 48vw, 440px);
    --service-overlap: 0px;
    min-height: 0;
    padding: 80px 0 100px;
  }
  .services-inner { width: min(calc(100% - 64px), 780px); }
  .services-heading { grid-template-columns: 1fr; gap: 26px; padding: 0 10px; }
  .services-heading h2 { font-size: clamp(52px, 8vw, 76px); }
  .services-intro { max-width: 100%; font-size: 18px; line-height: 1.5; letter-spacing: -.035em; }
  .services-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 22px; min-height: 0; margin-top: 52px; padding: 0; }
  .service-card,
  .service-card[data-service] {
    --service-rest-x: 0px;
    --service-rest-y: 0px;
    --service-rest-r: 0deg;
    --service-rest-scale: 1;
  }
  .service-copy { left: 26px; bottom: 28px; }
  .service-copy h3 { font-size: clamp(25px, 3.7vw, 32px); }
  .service-copy p { font-size: clamp(16px, 2.2vw, 19px); }
  .service-artwork { top: 1px; left: 15px; right: 15px; }
}

@media (max-width: 560px) {
  .services { --service-height: clamp(270px, 68vw, 350px); padding: 66px 0 76px; }
  .services-inner { width: calc(100% - 36px); }
  .services-heading { gap: 22px; padding: 0 4px; }
  .services-heading h2 { font-size: clamp(46px, 11.4vw, 62px); }
  .services-intro { max-width: 345px; font-size: 16px; line-height: 1.48; }
  .services-intro-break { display: none; }
  .services-cards { gap: 16px 12px; margin-top: 36px; }
  .service-card-surface { border-radius: 18px; }
  .service-artwork { top: 6px; left: 0; right: 0; }
  .service-copy { left: 15px; right: 10px; bottom: 21px; }
  .service-copy h3 { margin-bottom: 7px; font-size: clamp(19px, 4.8vw, 26px); }
  .service-copy p { font-size: clamp(12.5px, 2.8vw, 15.5px); line-height: 1.38; letter-spacing: -.045em; }
}

@media (prefers-reduced-motion: reduce) {
  .services.has-service-motion .service-card,
  .services.has-service-motion .service-card-surface,
  .services.has-service-motion .service-artwork img { will-change: auto; }
}