/* ==========================================================================
   Agilepreneurs: services.css
   Page styles for services.html only; tokens and shared components come
   from site.css (loaded first). Layout: editorial two-column service
   sections: eyebrow and Cormorant heading hold the left rail (gently
   sticky under the site header), narrative and deliverables read down
   the right. Hairline dividers between services; no star break here.
   ========================================================================== */

/* -------------------------------------------------------------- page hero */

.page-hero { padding: 96px 0 76px; }
.page-hero h1 { max-width: 16ch; margin-bottom: 22px; }
.page-hero .lead { max-width: 56ch; }

/* ------------------------------------------------------- service sections */

.service {
  border-top: 1px solid var(--border); /* hairline divider between services */
  scroll-margin-top: 90px;             /* anchor jumps clear the sticky header */
}

.service-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 64px;
  align-items: start;
}

.service-head { position: sticky; top: 104px; }
.service-head h2 { max-width: 12ch; }

.service-intro { font-size: 18px; line-height: 1.6; max-width: 58ch; }

/* --------------------------------------------------------- what-you-get */

.wyg-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--petrol);
  margin-top: 40px;
}

.wyg { list-style: none; margin-top: 14px; }

.wyg li {
  position: relative;
  padding: 12px 0 12px 40px;
  font-size: 16px;
  max-width: 58ch;
}

/* Short bronze rule marker, aligned to the first line of each item. */
.wyg li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25px;
  width: 22px;
  height: 1px;
  background: var(--bronze);
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 880px) {
  .service-grid { grid-template-columns: 1fr; gap: 28px; }
  .service-head { position: static; }
}

@media (max-width: 760px) {
  .page-hero { padding: 64px 0 52px; }
}