/* Services (Figma node 1:577). */

.dn-services__layout { display: flex; gap: 93px; margin-top: 40px; }

.dn-services__index { flex: none; width: 127px; display: flex; flex-direction: column; gap: 40px; }
.dn-services__index li { display: flex; flex-direction: column; gap: 20px; }
.dn-services__letter {
  font-size: 30px;
  font-style: italic;
  font-weight: 600;
  line-height: 0.85;
  letter-spacing: -1.2px;
}
.dn-services__index .dn-services__label { color: #ffbb00; }   /* Figma: letter dark, label yellow */
.dn-services__label { font-size: 24px; font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: 0; }

.dn-services__body { display: flex; gap: 110px; }
.dn-services__rows { width: var(--content-width); }

.dn-service {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 40px;
  height: 450px;
}
.dn-service--reverse { flex-direction: row-reverse; }
.dn-service__image { flex: none; width: 486px; height: 450px; object-fit: cover; }
.dn-service--reverse .dn-service__image { width: 485px; }

.dn-service__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding-bottom: 80px;
}
.dn-service__text { display: flex; flex-direction: column; gap: 16px; }
.dn-service__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-title);
  line-height: 0.85;
  text-transform: uppercase;
  letter-spacing: 0;
}
.dn-service__desc { width: 450px; max-width: 100%; line-height: 1.2; }

/* Sticker: absolutely placed above the title on desktop (offsets derived from Figma); in flow on smaller screens (responsive.css) */
.dn-service__text { position: relative; }
.dn-service .dn-sticker { position: absolute; z-index: 2; left: var(--sx, 66px); top: var(--sy, -50.5px); }
.dn-service--delivery { --sx: 66px; --sy: -50.5px; }
.dn-service--catering { --sx: 66px; --sy: -70.5px; }
.dn-service--foodtruck { --sx: 84px; --sy: -70.5px; }

/* homepage: real labels instead of "Index label" (2 lines each, sized to the 127px column) */
.dn-services__index--text .dn-services__label { font-size: 20px; line-height: 1.15; }

/* The index entries link to the info pages (free delivery, daily fuel, how it works) */
.dn-services__link { display: flex; flex-direction: column; gap: 20px; color: inherit; }
.dn-services__link:hover .dn-services__label, .dn-services__link:focus-visible .dn-services__label { text-decoration: underline; text-underline-offset: 4px; }