/* ===== Services pages (group design language) ===== */
.services-hero {
  background-image: linear-gradient(90deg, rgba(14, 27, 39, 0.94), rgba(14, 27, 39, 0.66)), url("/assets/images/photos/umm-qasr-port-aerial.jpg");
  background-size: cover;
  background-position: center;
  border-bottom: 0;
}
.services-hero h1,
.services-hero .lead { color: #fff; }
.services-hero .lead { color: rgba(255, 255, 255, 0.8); }
.services-hero .breadcrumb,
.services-hero .breadcrumb a,
.services-hero .breadcrumb [aria-current] { color: rgba(255, 255, 255, 0.82); }
.services-hero .breadcrumb .sep { color: var(--accent-light); }

.bento-services-grid { display: grid; gap: 1.25rem; }

/* Detail layout */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .detail-layout { grid-template-columns: 1fr; } }

.detail-content h2 { margin-top: 2.5rem; margin-bottom: 1rem; }
.detail-content h2:first-child { margin-top: 0; }
.detail-content p { margin-bottom: 1.25rem; }

.detail-aside { position: sticky; top: calc(var(--header-height) + 1.5rem); display: grid; gap: 1.5rem; }
.detail-aside .card { padding: 1.75rem; }
.detail-aside h3 { font-size: 1.0625rem; margin-bottom: 1rem; }
.detail-aside ul { list-style: none; }
.detail-aside li { margin-bottom: 0.625rem; }
.detail-aside li a {
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9375rem;
}
.detail-aside li a:hover { color: var(--accent); }
.detail-aside li a::before {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.6875rem;
  color: var(--accent);
}

.detail-features { margin-top: 1.5rem; }
.detail-cta { margin-top: 3rem; }

/* ---- Service detail: a clearer reading column and aside ---- */
.detail-content { max-width: 74ch; }
.detail-content h2 {
  position: relative;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}
.detail-content h2::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.detail-content h2:first-child { padding-top: 0; border-top: 0; }
.detail-content h2:first-child::before { display: none; }

.detail-aside .card { border-top: 2px solid var(--accent); }
.detail-aside h3 {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.detail-aside li a { transition: color 180ms var(--ease-quint), transform 180ms var(--ease-quint); }
.detail-aside li a:hover { transform: translateX(3px); }

/* Services hero sits on a photograph, so the grid overlay must not show */
.services-hero::before { display: none; }
.services-hero h1::after { background: linear-gradient(90deg, var(--accent-light), rgba(224, 188, 110, 0)); }
@media (prefers-reduced-motion: reduce) {
  .detail-aside li a:hover { transform: none; }
}

/* ============================================================
   SERVICES PHONE PASS
   The aside is sticky at header + 24px. Above 900px it is a
   column beside a long article and the stickiness is the point;
   below 900px it is the last block on the page, so it can never
   move and the only thing sticky still does is take it out of
   the normal scroll-anchoring path. It goes static there.

   The related-service links in that aside are a 15px row with a
   chevron, roughly 25px tall, and they are the second-most-used
   navigation on a service page after the header.
   ============================================================ */

@media (max-width: 900px) {
  .detail-aside { position: static; top: auto; gap: 1rem; }
}

@media (max-width: 600px) {
  .detail-aside .card { padding: 1.25rem; }
  .detail-aside h3 { margin-bottom: 0.5rem; padding-bottom: 0.625rem; }
  .detail-aside li { margin-bottom: 0; }
  .detail-aside li a { min-height: 44px; }

  .detail-content h2 { margin-top: 2rem; padding-top: 1.5rem; }
  .detail-content p { margin-bottom: 1rem; }
  .detail-features { margin-top: 1.25rem; }
  .detail-cta { margin-top: 2rem; }
  .bento-services-grid { gap: 1rem; }
}