/* Image-led, angled service cards for the opening slide only. */
.hero-editorial__services {
  position: relative !important;
  width: min(100%, 34rem);
  height: 27rem;
  border: 0 !important;
  opacity: 1 !important;
  animation: none !important;
  isolation: isolate;
}
.hero-editorial__services a {
  --card-angle: -4deg;
  --card-shift: 0rem;
  position: absolute !important;
  right: var(--card-shift);
  left: auto !important;
  display: grid !important;
  grid-template-columns: 1.7rem minmax(0, 1fr) 1.5rem !important;
  column-gap: 1rem;
  row-gap: .35rem;
  align-content: center;
  box-sizing: border-box;
  width: 89%;
  min-height: 6.75rem !important;
  padding: 1.1rem 1.3rem !important;
  overflow: hidden;
  border: 1px solid #ffffff18 !important;
  border-radius: .85rem !important;
  background-color: #121315 !important;
  background-position: center 45% !important;
  background-size: cover !important;
  color: #f8f4eb !important;
  box-shadow: 0 1.15rem 2.5rem #0008 !important;
  opacity: 1;
  transform: rotate(var(--card-angle));
  transform-origin: center;
  animation: service-card-reveal .75s cubic-bezier(.2,.7,.2,1) both !important;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  text-decoration: none;
}
.hero-editorial__services a::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(95deg, #080a0edb, #080a0e91 42%, #080a0e12 78%), linear-gradient(0deg, #080a0e66, transparent 75%) !important;
  opacity: 1 !important;
  pointer-events: none;
}
.hero-editorial__services a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #fff1, transparent 38%);
  box-shadow: inset 0 1px #f1d7a826;
  pointer-events: none;
}
.hero-editorial__services a:nth-child(1) {
  top: .55rem; --card-angle: -7deg; --card-shift: 2.1rem;
  background-image: url('./assets/service-website-ai.png') !important;
  animation-delay: .1s !important;
}
.hero-editorial__services a:nth-child(2) {
  top: 6.95rem; --card-angle: 5deg; --card-shift: -.1rem;
  background-image: url('./assets/creative-fpv-hero.png') !important;
  animation-delay: .2s !important;
}
.hero-editorial__services a:nth-child(3) {
  top: 13.35rem; --card-angle: -5.5deg; --card-shift: 1.8rem;
  background-image: url('./assets/service-social-ai.png') !important;
  animation-delay: .3s !important;
}
.hero-editorial__services a:nth-child(4) {
  top: 19.75rem; --card-angle: 6deg; --card-shift: .25rem;
  background-image: url('./assets/service-hosting-ai.png') !important;
  animation-delay: .4s !important;
}
.hero-editorial__services :is(small,strong,span,i) { position: relative; z-index: 1; }
.hero-editorial__services small {
  grid-column: 1; grid-row: 1 / 3;
  align-self: center;
  color: #d2b57b !important;
  font-size: .75rem !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
  border: 0;
  padding-block: .6rem;
}
.hero-editorial__services strong {
  grid-column: 2; grid-row: 1;
  font-size: clamp(1.2rem, 1.65vw, 1.55rem) !important;
  font-family: 'Manrope', 'Segoe UI', Arial, sans-serif;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: .01em;
  text-shadow: 0 2px 12px #0008;
}
.hero-editorial__services span {
  grid-column: 2; grid-row: 2;
  color: #e4dfd5 !important;
  font-size: .8125rem !important;
  line-height: 1.5;
  letter-spacing: .015em;
  text-shadow: 0 2px 12px #0008;
}
.hero-editorial__services i {
  grid-column: 3; grid-row: 1 / 3;
  align-self: center;
  display: grid; place-items: center;
  width: 1.5rem; aspect-ratio: 1;
  border: 0;
  border-radius: 0;
  color: #e0c58d;
  background: transparent;
  font-size: 1.4rem; font-style: normal;
  transition: background .3s ease, border-color .3s ease;
}
.hero-editorial__services a:is(:hover,:focus-visible) {
  z-index: 5;
  padding: 1.1rem 1.3rem !important;
  transform: translateY(-.2rem) rotate(var(--card-angle)) !important;
  border-color: #e5c78e55 !important;
  box-shadow: 0 1.5rem 3rem #0009 !important;
}
.hero-editorial__services a:hover::before {
  background: linear-gradient(95deg, #080a0edb, #080a0e91 42%, #080a0e12 78%), linear-gradient(0deg, #080a0e66, transparent 75%) !important;
}
.hero-editorial__services a:is(:hover,:focus-visible) i { background: transparent; color: #f3d79b; transform: translate(.12rem, -.12rem); }
.hero-editorial__services a:focus-visible { outline: 2px solid #f0d7a8; outline-offset: 4px; }
@keyframes service-card-reveal {
  from { opacity: 0; translate: 1rem .5rem; }
  to { opacity: 1; translate: 0 0; }
}
@media(max-width:900px) {
  .hero-editorial__services {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1.4rem 1.2rem;
    width: 100%; height: auto;
    padding: .8rem .5rem;
    box-sizing: border-box;
  }
  .hero-editorial__services a {
    position: relative !important;
    top: auto !important; right: auto !important;
    width: 100%; min-height: 7rem !important;
    grid-template-columns: 1.6rem minmax(0,1fr) 2rem !important;
    column-gap: .65rem;
    --card-angle: -3deg !important;
  }
  .hero-editorial__services a:nth-child(even) { --card-angle: 3deg !important; }
  .hero-editorial__services i { width: 2rem; }
}
@media(max-width:600px) {
  .hero-editorial__services { grid-template-columns: 1fr; gap: 1rem; padding-inline: .65rem; }
  .hero-editorial__services a { min-height: 6.75rem !important; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-editorial__services a { animation: none !important; transition: none; }
  .hero-editorial__services i { transition: none; }
}