/* Service pages. Same laws as the homepage: no boxes, one hairline,
   the price the same size as the prose. */

.crumb {
  padding-block: var(--s-3) 0;
  font-family: var(--util);
  font-size: var(--t-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.crumb span { margin-inline: 0.5rem; opacity: 0.5; }

/* ---- opening — the answer comes first, before any styling --------- */

.open { padding-block: var(--s-5) var(--s-6); }
.open__grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .open__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-6); } }

.open h1 { max-width: 16ch; }
.open .lead { margin-top: var(--s-3); max-width: 46ch; }
.open .prose { margin-top: var(--s-3); color: var(--ink-soft); }
.open__act { margin-top: var(--s-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }

.open__shot { aspect-ratio: 4 / 5; overflow: hidden; background: var(--deep); }
.open__shot img { width: 100%; height: 100%; object-fit: cover; }

/* ---- a section --------------------------------------------------- */

.sect { padding-block: var(--s-6); }
.sect--dark { background: var(--deep); color: var(--paper); }
.sect--dark .label { color: color-mix(in srgb, var(--paper) 60%, transparent); }
.sect--dark p { color: color-mix(in srgb, var(--paper) 80%, transparent); }
.sect--petal { background: var(--petal); }

.sect__grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 900px) { .sect__grid { grid-template-columns: 15rem 1fr; gap: var(--s-6); } }

.sect__head { padding-top: var(--s-2); border-top: var(--hair) solid var(--blush); }
.sect--dark .sect__head { border-top-color: color-mix(in srgb, var(--blush) 70%, transparent); }
.sect h2 { font-size: var(--t-title); font-weight: 300; line-height: 1.1; letter-spacing: -0.015em; max-width: 20ch; }
.sect .prose { margin-top: var(--s-3); color: var(--ink-soft); }
.sect--dark .prose { color: color-mix(in srgb, var(--paper) 80%, transparent); }

/* ---- steps — only used where the content really is a sequence ----- */

.steps { display: grid; gap: 0; margin-top: var(--s-2); }
.step {
  display: grid;
  gap: var(--s-1) var(--s-4);
  grid-template-columns: 1fr;
  padding-block: var(--s-3);
  border-top: var(--hair) solid color-mix(in srgb, var(--ink) 14%, transparent);
}
@media (min-width: 700px) { .step { grid-template-columns: 3rem 1fr; } }
.step__n { font-family: var(--util); font-size: var(--t-label); letter-spacing: 0.14em; color: var(--ink-soft); padding-top: 0.35rem; }
.step h3 { font-size: var(--t-body); font-weight: 400; }
.step p { color: var(--ink-soft); max-width: 52ch; margin-top: 2px; }

/* ---- price table -------------------------------------------------- */

.prices { max-width: 30rem; margin-top: var(--s-2); }
.prices li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  padding-block: 0.8rem;
  border-top: var(--hair) solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.prices li:first-child { border-top-color: var(--blush); }
.prices span:last-child { font-family: var(--util); font-variant-numeric: tabular-nums; white-space: nowrap; }
.prices small { display: block; font-size: var(--t-small); color: var(--ink-soft); }
.prices__note { margin-top: var(--s-3); font-size: var(--t-small); color: var(--ink-soft); max-width: 46ch; }

/* ---- plain spec lines — never bulleted, no glyphs ------------------ */

.spec { margin-top: var(--s-2); }
.spec li { color: var(--ink-soft); line-height: 1.75; }
.sect--dark .spec li { color: color-mix(in srgb, var(--paper) 78%, transparent); }

/* ---- gallery ------------------------------------------------------- */

.gal { display: grid; gap: var(--s-2); grid-template-columns: 1fr 1fr; margin-top: var(--s-4); }
@media (min-width: 900px) { .gal { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); } }
.gal figure { aspect-ratio: 1; overflow: hidden; background: var(--deep); }
.gal img { width: 100%; height: 100%; object-fit: cover; }

/* ---- other services ------------------------------------------------ */

.also { padding-block: var(--s-6); }
.also__head { padding-top: var(--s-2); border-top: var(--hair) solid var(--blush); margin-bottom: var(--s-3); }
.also__list { display: grid; }
.also__list a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-top: var(--hair) solid color-mix(in srgb, var(--ink) 14%, transparent);
  text-decoration: none;
  transition: padding-left var(--fast) var(--ease);
}
.also__list a:hover { padding-left: var(--s-2); }
.also__list strong { font-weight: 400; font-size: var(--t-lead); }
.also__list em { font-style: normal; font-family: var(--util); font-size: var(--t-label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-soft); }