.services-page { background: #f7fbff; }
.services-page__hero {
  position: relative;
  overflow: hidden;
  padding: 152px 60px 96px;
  background: linear-gradient(90deg, #0b2738ed, #0b2738bf 55%, #0b273866), url('../bosque-iztaccihuatl-popocatepetl.jpg') center 76% / cover;
  color: #f7fbff;
}
.services-page__hero-inner { position: relative; max-width: 1180px; margin: auto; }
.services-page .services__eyebrow {
  display: inline-block;
  margin: 0 0 22px;
  padding: 0 0 0 14px;
  border: 0;
  border-left: 3px solid #8fc4dc;
  border-radius: 0;
  color: #a8d4e7;
  font: 600 11px/1.4 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.services-page .services__title {
  max-width: 860px;
  margin: 0;
  color: #f7fbff;
  font: 400 clamp(44px, 5.1vw, 72px)/1.12 var(--serif);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.services-page .services__title em { color: #a8d4e7; font: 400 .93em/1.1 var(--serif); letter-spacing: -.04em; }
.services-page .services__intro { max-width: 620px; margin: 32px 0 0; color: #d8e9f1; font: 400 17px/1.75 var(--sans); }
.services-page__body { padding: 96px 60px; }
.services-page__body-inner { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); gap: 0 64px; max-width: 1180px; margin: auto; }
.services-page .services__grid { display: block; margin: 0; padding: 0; counter-reset: service; }
.services-page .service-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 24px;
  min-height: 190px;
  padding: 32px 16px;
  border: 0;
  border-top: 1px solid #c9dde5;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  counter-increment: service;
}
.services-page .service-item:last-child { border-bottom: 1px solid #c9dde5; }
.services-page .service-item::after { display: none; }
.services-page .service-item__mark {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.services-page .service-item__mark::after { content: counter(service, decimal-leading-zero); color: #6e9fb6; font: 500 23px/1.2 var(--sans); }
.services-page .service-item__content { max-width: 790px; }
.services-page .service-item h3 { margin: 0 0 18px; color: #102f42; font: 600 clamp(27px, 3.2vw, 40px)/1.15 var(--sans); letter-spacing: -.04em; }
.services-page .service-item p { max-width: 650px; margin: 0; color: #496978; font: 400 16px/1.7 var(--sans); }
.services-page .services__note { grid-column: 1; max-width: 760px; margin: 26px 0 0; padding-left: 14px; border: 0; border-left: 3px solid #8fc4dc; color: #496978; font: 400 13px/1.6 var(--sans); }
.services-page__section-title { grid-column: 1 / -1; margin: 0 0 40px; font: 600 clamp(34px, 4vw, 52px)/1.12 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
.services-page .service-item__content { min-width: 0; overflow-wrap: anywhere; }
.services-page .service-item p + p { margin-top: 16px; }
.services-page__contact { padding: 96px 24px; background: var(--forest-deep); color: var(--cream); text-align: center; }
.services-page__contact h2 { max-width: 880px; margin: 0 auto 24px; font: 400 clamp(32px, 5vw, 56px)/1.12 var(--serif); text-wrap: balance; }
.services-page__contact p { max-width: 65ch; margin: 0 auto 32px; font-size: 16px; line-height: 1.7; color: #d8e9f1; }
.services-page__contact .button { min-height: 44px; }
.services-page__contact a:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
@media (max-width: 700px) {
  .services-page__body-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .services-page__hero { padding: 156px 24px 64px; }
  .services-page__contact { padding-block: 56px; }
  .services-page .services__title { font-size: clamp(36px, 10vw, 52px); }
  .services-page .services__title br { display: none; }
  .services-page .services__intro { font-size: 15px; }
  .services-page__body { padding: 56px 24px; }
  .services-page .service-item { grid-template-columns: 1fr; gap: 12px; min-height: 0; padding: 28px 0 32px; }
  .services-page .service-item h3 { margin-bottom: 12px; }
  .services-page .service-item p { font-size: 15px; }
}

/* Catalogue: a readable selection beside a photographic consultation panel. */
.service-choice { grid-column: 2; grid-row: 2 / 4; position: sticky; top: 96px; align-self: start; overflow: hidden; border-radius: 12px; background: var(--forest-deep); color: var(--cream); }
.service-choice > img { display: block; width: 100%; height: 260px; object-fit: cover; object-position: center 65%; }
.service-choice__body { padding: 32px; }
.service-choice__label { margin: 0 0 16px; color: #a8d4e7; font-size: 12px; }
.service-choice__title { margin-bottom: 24px; font: 400 clamp(26px, 3vw, 36px)/1.2 var(--serif); overflow-wrap: anywhere; }
.service-choice__link { display: flex; justify-content: center; align-items: center; min-height: 46px; padding: 12px 16px; border: 1px solid #bed9e580; border-radius: 8px; color: #eff6fb; background: #133d52; font-size: 13px; text-align: center; text-decoration: none; }
.service-choice__link:hover { background: #1d4b63; }
.service-select { min-height: 44px; margin-top: 24px; padding: 10px 16px; border: 1px solid #bed0dc; border-radius: 8px; color: #133d52; background: transparent; font: 500 13px/1.5 var(--sans); cursor: pointer; }
.service-select:hover, .service-select[aria-pressed="true"] { background: #133d52; color: #eff6fb; }
.services-page .service-item.is-selected { border-top-color: var(--forest); background: #eaf3f8; }
.service-selection-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.service-select:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; }
.service-choice__link:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
@media (max-width: 1000px) { .service-choice { top: 140px; } .service-choice__body { padding: 24px; } }
@media (max-width: 700px) { .service-choice { grid-column: 1; grid-row: auto; position: static; } .service-choice > img { height: 220px; } }

@media (max-height: 700px) { .service-choice { position: static; } }
@media (prefers-reduced-motion: reduce) { .services-page .button, .services-page .service-select { transition: none; transform: none; } }