/* ==========================================================================
 Services and prices on the homepage
 One chapter per service (templates/home.mjs): a wide feature with the tint packages, two split chapters facing
 opposite ways, the interior chapter with its before/after card, and four compact chapters two by two. The package
 cards themselves live in services.css, as the window tinting page shows them too.
 Only transform and opacity animate. Depth runs base (the section) → elevated (photos, cards) → floating (badges).
 ========================================================================== */

/* "Jump to a service": the eight chapters as numbered pills. On phones they scroll sideways in their own strip */
.chapter-index {
  margin: -8px 0 0;
}
.chapter-index ol {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chapter-index a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px 0 12px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    inset 0 0 0 1px rgba(110, 50, 40, 0.08),
    0 4px 14px rgba(163, 38, 31, 0.06);
  transition:
    transform 0.25s var(--ease-spring),
    box-shadow 0.25s var(--ease-spring),
    color 0.2s ease;
}
.chapter-index a span {
  font:
    italic 400 17px/1 'Instrument Serif',
    serif;
  color: var(--red);
}
.chapter-index a:hover {
  color: var(--link-hover);
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(163, 38, 31, 0.2),
    0 10px 22px rgba(163, 38, 31, 0.12);
}
.chapter-index a:active {
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(163, 38, 31, 0.24);
}
.chapter-index a:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
}
@media (max-width: 767px) {
  .chapter-index {
    margin-inline: -20px;
  }
  .chapter-index ol {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 4px 20px 12px;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  }
  .chapter-index ol::-webkit-scrollbar {
    display: none;
  }
  .chapter-index li {
    flex: none;
    scroll-snap-align: start;
  }
}

/* With js/service-index.js the pills run in one line that glides sideways in a loop, on every screen size, and can be
   dragged or flicked. Vertical swipes still scroll the page (touch-action: pan-y). Both ends fade out */
.chapter-index.is-moving {
  overflow: hidden;
  padding-block: 6px 16px;
  margin-block: -14px -8px;
  cursor: grab;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.chapter-index.is-moving.is-dragging {
  cursor: grabbing;
}
.chapter-index-track {
  display: flex;
  gap: 10px;
  width: max-content;
  will-change: transform;
}
.chapter-index.is-moving ol {
  flex-wrap: nowrap;
  overflow: visible;
  padding: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
.chapter-index.is-moving li {
  flex: none;
}
.chapter-index.is-moving a {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Chapters */
.chapter {
  margin-top: 72px;
  scroll-margin-top: 96px;
}
.chapter-card {
  scroll-margin-top: 96px;
}
.chapter-index + .chapter {
  margin-top: 48px;
}
@media (min-width: 900px) {
  .chapter {
    margin-top: 120px;
  }
  .chapter-index + .chapter {
    margin-top: 64px;
  }
}
.chapter-grid {
  display: grid;
  gap: 32px;
  align-items: center;
}
@media (min-width: 900px) {
  .chapter-feature .chapter-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 56px;
  }
  .chapter-split .chapter-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
  }
}

/* The heading: a numbered service name in small capitals above the owner's heading */
.chapter-heading {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-weight: 400;
}
.chapter-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font:
    700 12px/1.4 'Manrope',
    sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.chapter-number {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font:
    italic 400 24px/1 'Instrument Serif',
    serif;
  letter-spacing: 0;
  color: var(--red);
}
.chapter-number::after {
  content: '';
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-line);
}
.chapter-title {
  font-size: clamp(38px, 4.6vw, 62px);
  color: var(--ink);
}
.chapter-text {
  margin-top: 18px;
  max-width: 34em;
  font-size: 17px;
  color: var(--ink-2);
}

/* Benefits: each one in its own soft coloured box (owner, 2026-11-07: no ticks, red and green boxes). The boxes take
   turns in rose, from the logo red, and sage, from the WhatsApp green. Before each line sits a small four-point star in
   a lit badge of the same colour ("Al Nujoom" means "the stars"). Logical properties keep it right for Arabic */
.benefits {
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 1.5c.6 5.6 4.9 9.9 10.5 10.5-5.6.6-9.9 4.9-10.5 10.5C11.4 16.9 7.1 12.6 1.5 12 7.1 11.4 11.4 7.1 12 1.5Z'/%3E%3C/svg%3E");
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.benefits li {
  --box-ink: rgba(163, 38, 31, 0.16);
  --box-glow: rgba(163, 38, 31, 0.08);
  --badge: linear-gradient(150deg, #d4574c 0%, var(--crimson) 55%, var(--wine) 100%);
  position: relative;
  padding: 12px 16px;
  padding-inline-start: 50px;
  border-radius: 14px;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
  background: linear-gradient(120deg, #fff7f4 0%, var(--rose-50) 45%, var(--rose-100) 100%);
  box-shadow:
    inset 0 0 0 1px var(--box-ink),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 6px 16px var(--box-glow);
}
.benefits li:nth-child(even) {
  --box-ink: rgba(31, 107, 62, 0.16);
  --box-glow: rgba(31, 107, 62, 0.08);
  --badge: linear-gradient(150deg, #3f9a62 0%, #1f7a45 55%, #135331 100%);
  background: linear-gradient(120deg, #f7fbf8 0%, var(--sage-50) 45%, var(--sage-100) 100%);
}
.benefits li::before {
  content: '';
  position: absolute;
  inset-inline-start: 14px;
  top: 13px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background:
    var(--star) center / 12px no-repeat,
    var(--badge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 3px 8px var(--box-glow);
}
/* Polishing: the benefits as tiles, two by two from 560px */
@media (min-width: 560px) {
  .benefits-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.benefits-tiles li {
  padding-block: 16px;
}
.benefits-tiles li::before {
  top: 17px;
}
/* Seat covers and upholstery: the benefits in a cream panel beside the introduction */
.benefits-panel {
  margin: 0;
  padding: 24px 26px;
  border-radius: var(--radius-md);
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(90, 190, 235, 0.18), transparent 62%),
    radial-gradient(60% 50% at 0% 100%, rgba(27, 108, 168, 0.07), transparent 62%), var(--surface-card);
  box-shadow: var(--shadow-card);
}
.benefits-compact {
  gap: 8px;
  margin-top: 18px;
}
.benefits-compact li {
  padding: 10px 14px;
  padding-inline-start: 44px;
  font-size: 14.5px;
}
.benefits-compact li::before {
  inset-inline-start: 12px;
  top: 11px;
  width: 22px;
  height: 22px;
  background-size: 11px, auto;
}
@media (max-width: 420px) {
  .benefits-panel {
    padding: 20px 18px;
  }
}

/* What each compact service covers, as small chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.chips li {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--cream-2);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* The WhatsApp question and the links to the service pages */
.chapter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 28px;
}
.btn-compact {
  min-height: 44px;
  padding: 0 20px;
  font-size: 14px;
}
.chapter-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-ink);
  transition: color 0.2s ease;
}
.chapter-link .link-arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease-spring);
}
.chapter-link:hover {
  color: var(--link-hover);
}
.chapter-link:hover .link-arrow {
  transform: translateX(4px);
}
.chapter-link:active {
  color: var(--ink);
}
.chapter-link:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
}

/* Photos: an elevated frame with a soft shade at the foot and a faint sapphire wash that ties them to the palette */
.chapter-media,
.chapter-card-media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--champagne);
}
.chapter-media {
  border-radius: var(--radius-lg);
  box-shadow:
    var(--photo-mount),
    var(--shadow-3);
}
.chapter-media img,
.chapter-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-spring);
}
.chapter-media::after,
.chapter-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(10, 20, 35, 0.42), transparent 46%),
    linear-gradient(rgba(163, 38, 31, 0.08), rgba(163, 38, 31, 0.08));
  mix-blend-mode: multiply;
}
.chapter-media:hover img,
.chapter-card:hover .chapter-card-media img {
  transform: scale(1.05);
}
.chapter-media-wide {
  aspect-ratio: 16 / 10;
}
.chapter-media-tall {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 480px;
  justify-self: center;
}
.chapter-media-square {
  aspect-ratio: 1;
  width: 100%;
  max-width: 540px;
  justify-self: center;
}
@media (min-width: 900px) {
  .chapter-media-tall {
    justify-self: end;
  }
  .chapter-media-square {
    justify-self: start;
  }
}
/* Phones: the photo of a reversed chapter comes first, like the others */
@media (max-width: 899px) {
  .chapter-split.is-reversed .chapter-media {
    order: -1;
  }
}
/* A floating glass label on a photo: "From AED 150", "Clear film" */
.chapter-badge {
  position: absolute;
  inset-inline-start: 18px;
  bottom: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 10px 30px rgba(10, 20, 35, 0.22);
}
.chapter-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(200, 50, 43, 0.14);
}
.has-film .chapter-badge {
  top: 18px;
  bottom: auto;
}

/* PPF: a clear sheet laid over the photo, with a fine edge and a highlight that sweeps across it once */
.film-sheet {
  position: absolute;
  inset: 16px;
  z-index: 2;
  overflow: hidden;
  border-radius: 20px;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    inset 0 0 0 2px rgba(255, 255, 255, 0.12);
}
.film-sheet::before {
  content: '';
  position: absolute;
  inset: -10% -60%;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 36%,
    rgba(255, 255, 255, 0.34) 48%,
    rgba(255, 255, 255, 0.08) 54%,
    rgba(255, 255, 255, 0) 64%
  );
  transform: translateX(-38%);
  transition: transform 2.2s var(--ease-spring) 0.25s;
}
.is-revealed .film-sheet::before,
.chapter-ppf:hover .film-sheet::before {
  transform: translateX(38%);
}

/* Polishing: a band of light that crosses the paint when the chapter arrives, and again on hover */
.gloss-sweep {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0.38) 50%,
    rgba(255, 255, 255, 0) 62%
  );
  transform: translateX(-100%);
  transition: transform 1.8s var(--ease-spring) 0.3s;
}
.is-revealed .gloss-sweep,
.chapter-polish .chapter-media:hover .gloss-sweep {
  transform: translateX(100%);
}

/* PPF quote: priced per car, so a card asking for the car's details instead of a price */
.quote-card {
  margin-top: 28px;
  padding: 24px 24px 22px;
  border-radius: var(--radius-md);
  background:
    var(--accent-line) no-repeat left 24px top 0 / 56px 3px,
    var(--surface-card);
  box-shadow: var(--shadow-card);
}
.quote-card > p {
  font-size: 15.5px;
  color: var(--ink-2);
}
.quote-card .chapter-actions {
  margin-top: 18px;
}

/* Window tinting: the packages under the feature */
.packages-block {
  margin-top: 48px;
}
.packages-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.packages-kicker::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(110, 50, 40, 0.2), rgba(110, 50, 40, 0));
}

/* Seat covers and upholstery */
.chapter-intro {
  display: grid;
  gap: 28px;
  margin-bottom: 32px;
}
@media (min-width: 900px) {
  .chapter-intro {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: 56px;
    margin-bottom: 40px;
  }
}
.chapter-interior .grid-2 {
  margin-top: 20px;
}
@media (min-width: 1024px) {
  .chapter-interior .grid-2 {
    margin-top: 24px;
  }
}

/* 05–08: compact chapters, two by two on wide screens */
.chapter-bento {
  display: grid;
  gap: 24px;
  margin-top: 72px;
}
@media (min-width: 900px) {
  .chapter-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 120px;
  }
}
.chapter-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  transition:
    transform 0.35s var(--ease-spring),
    box-shadow 0.35s var(--ease-spring),
    opacity 0.9s var(--ease-spring);
}
.chapter-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}
.chapter-card-media {
  aspect-ratio: 16 / 9;
}
/* Where each photo sits in its frame: the headlight photo keeps its baked-in Before/After labels out of view, and the
   tall armrest photo keeps its top, with the cup holders */
#service-accessories .chapter-card-media img {
  object-position: 50% 40%;
}
#service-lighting .chapter-card-media img {
  object-position: 50% 0%;
}
#service-tv .chapter-card-media img {
  object-position: 50% 45%;
}
/* A portrait photo shows whole in the wide frame (templates/services-showcase.mjs), over a blurred, slightly enlarged
   copy of itself that fills the sides. Each portrait photo names its file in a .backdrop-<file name> rule below; to
   add another, copy that rule with the new file name */
.chapter-card-media.is-portrait img {
  z-index: 0;
  object-fit: contain;
}
.chapter-card-media.is-portrait::before {
  content: '';
  position: absolute;
  inset: -24px;
  background: var(--backdrop) center / cover no-repeat;
  filter: blur(18px) saturate(1.15);
  opacity: 0.7;
}
.backdrop-hand-rest {
  --backdrop: url('../assets/images/works/hand-rest.jpg');
}
.backdrop-shop-accessories-shelves {
  --backdrop: url('../assets/images/shop/shop-accessories-shelves.webp');
}
.chapter-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 28px 26px 28px;
}
.chapter-card .chapter-title {
  font-size: clamp(32px, 3.1vw, 42px);
}
.chapter-card .chapter-text {
  margin-top: 14px;
  font-size: 15.5px;
}
.chapter-card .chapter-actions {
  margin-top: auto;
  padding-top: 24px;
}
@media (max-width: 420px) {
  .chapter-card-body {
    padding: 24px 20px;
  }
}

/* Arriving on screen: each chapter rises into place, then its benefits follow one after another. js/main.js adds
   .reveal-ready only when it can show them again, so without JavaScript, or with reduced motion, nothing is hidden */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.9s var(--ease-spring),
    transform 1s var(--ease-spring);
}
.reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
/* Once in place, a compact chapter lifts on hover at the cards' quicker pace */
.reveal-ready .chapter-card[data-reveal].is-revealed {
  transition:
    transform 0.6s var(--ease-spring),
    box-shadow 0.35s var(--ease-spring),
    opacity 0.9s var(--ease-spring);
}
.reveal-ready .chapter-card[data-reveal].is-revealed:hover {
  transform: translateY(-6px);
}
.reveal-ready [data-reveal] .benefits li {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.6s var(--ease-spring),
    transform 0.6s var(--ease-spring);
}
.reveal-ready [data-reveal].is-revealed .benefits li {
  opacity: 1;
  transform: none;
}
.reveal-ready [data-reveal] .benefits li:nth-child(2) {
  transition-delay: 0.08s;
}
.reveal-ready [data-reveal] .benefits li:nth-child(3) {
  transition-delay: 0.16s;
}
.reveal-ready [data-reveal] .benefits li:nth-child(4) {
  transition-delay: 0.24s;
}
.reveal-ready [data-reveal] .benefits li:nth-child(5) {
  transition-delay: 0.32s;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal],
  .reveal-ready [data-reveal] .benefits li {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .film-sheet::before,
  .gloss-sweep {
    transition: none;
  }
}

/* The owner's extra photos (2026-11-07) ------------------------------------------------------------------------- */
/* Window tinting: two more photos in a strip under the chapter, each framed like the chapter photo, with its caption
   as a frosted chip on the photo */
.chapter-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 36px;
}
@media (min-width: 900px) {
  .chapter-strip {
    gap: 24px;
    margin-top: 48px;
  }
}
.chapter-strip-item {
  position: relative;
  margin: 0;
}
.chapter-strip-media,
.chapter-photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-lg);
  background: var(--champagne);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.8),
    0 0 0 6px rgba(163, 38, 31, 0.1),
    var(--shadow-3);
}
.chapter-strip-media {
  aspect-ratio: 4 / 5;
}
@media (min-width: 640px) {
  .chapter-strip-media {
    aspect-ratio: 16 / 11;
  }
}
.chapter-strip-media img,
.chapter-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-spring);
}
.chapter-strip-item:first-child img {
  object-position: 50% 42%;
}
.chapter-strip-item:hover img,
.chapter-photo:hover img {
  transform: scale(1.05);
}
.chapter-strip-item figcaption {
  position: absolute;
  inset-inline-start: 12px;
  bottom: 12px;
  z-index: 2;
  max-width: calc(100% - 24px);
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 8px 22px rgba(10, 20, 35, 0.22);
}
@media (min-width: 900px) {
  .chapter-strip-item figcaption {
    inset-inline-start: 18px;
    bottom: 18px;
    padding: 9px 16px;
    font-size: 14px;
  }
}
/* Seat covers: the photo under the chapter's words, beside the benefits */
.chapter-photo {
  margin: 26px 0 0;
  aspect-ratio: 4 / 3;
}
/* Lighting: two photos side by side in the card's frame */
.chapter-card-media.is-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 100%;
  gap: 3px;
}
.chapter-card-media.is-pair img {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chapter-card-media.is-pair img:first-child {
  object-position: 62% 50%;
}
.chapter-card-media.is-pair img:last-child {
  object-position: 50% 40%;
}
@media (prefers-reduced-motion: reduce) {
  .chapter-strip-media img,
  .chapter-photo img {
    transition: none;
  }
}