/* ==========================================================================
   Sought: Services pages (/services/, /services/web-design/, /services/seo/)
   Loaded after styles.css on those three pages only. The shared parts (header,
   footer, buttons, section titles, index rows, blocks, notes, steps, FAQ, the
   search card) stay in styles.css; this file only adds the few layouts these
   pages need and reuses the site's tokens. Copy: docs/COPY-2026-11.md, 4 to 6.
   ========================================================================== */

/* ---------- Hero of the two service pages ---------- */

/* "Services › Website design & development": small, above the label. The link keeps a
   44px tall target like every other link in the site's chrome. */
.crumbs { margin: 0 0 var(--s3); font-size: var(--step--1); color: var(--ink-2); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before {
  content: "›";
  content: "›" / "";   /* decorative: screen readers skip it (the first line is for older browsers) */
  margin: 0 0.6em;
  color: var(--gray);
}
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink); }
.crumbs a:hover { color: var(--clay-ink); }

/* The service pages' headlines are longer than other inner pages', so they're a step
   smaller and held to a readable width. */
.svc-hero h1 { max-width: 16em; font-size: clamp(2.5rem, 1.7rem + 3.3vw, 4.5rem); }

/* Facts row under the lead: four short facts, each after a small clay dot */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
  color: var(--ink);
}
.facts li { display: inline-flex; align-items: baseline; gap: 0.55rem; }
.facts li::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--clay);
  transform: translateY(-0.12em);
}

/* "On this page": one row of in-page links under a rule, like the jump list on /services/ */
.onpage { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--gray); }
.onpage__label { margin: 0 0 var(--s1); font-size: var(--step--1); font-weight: 600; color: var(--ink-2); }
.onpage ul { display: flex; flex-wrap: wrap; gap: 0 var(--s5); margin: 0; padding: 0; list-style: none; }
.onpage .arrow-link span[aria-hidden] { color: var(--clay); }
.onpage .arrow-link:hover span[aria-hidden] { transform: translateY(3px); }
/* Web design's seven links (since 2026-11-03) stay on one row on common desktop widths */
@media (min-width: 80em) { .onpage ul { column-gap: var(--s4); } }

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

/* Jump rows that open another page end in → (the arrow slides instead of turning) */
.index__row--page:hover .index__arrow { transform: translateX(4px); }
/* A name column wide enough for "Website design & development" on one line */
@media (min-width: 56em) { .jump .index__row { grid-template-columns: minmax(16rem, 30rem) 1fr auto; } }

/* Two services (or two kinds of site) side by side */
.svc-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6) var(--s7); }
@media (min-width: 56em) { .svc-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc-pair__item { display: flex; flex-direction: column; }
.svc-pair__item .block__intro { max-width: none; }
.svc-pair__item .ruled { margin: var(--s3) 0 var(--s4); }
.svc-pair__link { align-self: flex-start; margin-top: auto; }   /* the two links line up at the bottom */
.svc-pair--lists { column-gap: var(--s5); }   /* same gap as the two-column list above it, so the columns line up */

/* A line with a link, under a list or the questions (the link follows the text) */
.svc-proof,
.svc-more {
  max-width: 52rem;
  margin: var(--s5) 0 0;
  color: var(--ink-2);
}
.svc-proof .arrow-link,
.svc-more .arrow-link { margin-right: var(--s2); }
.svc-more__dot { margin-right: var(--s2); }
.svc-proof .arrow-link,
.svc-more .arrow-link { color: var(--ink); }
.svc-proof .arrow-link:hover,
.svc-more .arrow-link:hover { color: var(--clay-ink); }
.svc-more__dot { color: var(--gray); }
/* Under 48em the two links don't fit on one line, so each gets its own line and the dot goes
   (it used to hang at the end of the first link's line). The space kept for the dot goes too,
   so "Website design & development →" stays on one line at 320px. */
@media (max-width: 47.99em) {
  .svc-more .arrow-link { display: flex; width: fit-content; margin-right: 0; }
  .svc-more__dot { display: none; }
}

/* ---------- Shared by the two service pages ---------- */

/* Cards (the About page's grid), four or three across on wide screens */
@media (min-width: 64em) {
  .grid-2--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--s5); }
  .grid-2--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s6); }
}
.svc-fine { margin-top: var(--s5); }
/* What goes into it (since 2026-11-05): the three that matter most lead, a size up; the other six
   follow at the usual size */
.grid-2--lead { margin-bottom: var(--s6); }
.grid-2--lead h3 { font-family: var(--serif); font-size: var(--step-2); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; }
.grid-2--lead p { color: var(--ink); }

/* Security & privacy (since 2026-11-05): the heading, then the test-it line and the note under it,
   on the left; the six items in two columns on the right. On a phone: heading, items, lines. */
@media (min-width: 64em) {
  .secure {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "head items" "foot items";
    column-gap: var(--s7);
    align-items: start;
  }
  .secure__head { grid-area: head; margin-bottom: 0; }
  .secure__items { grid-area: items; margin-top: calc(var(--s4) * -1); }
  .secure__foot { grid-area: foot; }
  .secure__foot .svc-proof { margin-top: var(--s4); }
}
main .block__meta { max-width: 46rem; }   /* small print stays a readable width on wide screens */

/* What's included: a serif heading over each ruled list */
.svc-list__title {
  margin: 0 0 var(--s2);
  font-family: var(--serif);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
/* The two "...add" lists open and close (folded on phones, site.js): the heading is the toggle */
.svc-fold > summary { position: relative; display: block; padding-right: var(--s6); cursor: pointer; list-style: none; }
.svc-fold > summary::-webkit-details-marker { display: none; }
.svc-fold > summary::after {
  content: "+";
  content: "+" / "";   /* decorative: screen readers skip it (the first line is for older browsers) */
  position: absolute;
  right: var(--s2);
  top: 0.1em;
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
  color: var(--clay-ink);
}
.svc-fold[open] > summary::after { content: "\2212"; content: "\2212" / ""; }   /* a minus sign while open */
.svc-fold > summary:hover .svc-list__title { color: var(--clay-ink); }
.svc-fold > summary .svc-list__title { margin-bottom: 0; padding-block: var(--s2); }
.svc-fold[open] > summary .svc-list__title { margin-bottom: var(--s1); }
.svc-list + .svc-pair--lists,
.svc-pair--lists + .svc-list { margin-top: var(--s6); }
@media (min-width: 48em) { .ruled--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* A short band (dark): the headline on the left, the text and buttons on the right */
.split-head.svc-band { margin-bottom: 0; }
.svc-band .lead { margin-bottom: 0; }
.svc-band .actions { margin-top: var(--s4); }
.svc-band__text p { max-width: 36em; font-size: var(--step-1); line-height: 1.55; }
.svc-band__text p:last-child { margin-bottom: 0; }

/* How a build goes: five steps, so they stack as rows with the line running down
   (the home page's three steps sit side by side). */
@media (min-width: 56em) {
  .steps--rows { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .steps--rows::before { left: 1.375rem; right: auto; top: 0.5rem; bottom: 0.5rem; width: 1.5px; height: auto; transform-origin: top; }
  .steps--rows > li {
    display: grid;
    grid-template-columns: minmax(0, 19rem) minmax(0, 40rem);
    grid-template-rows: auto 1fr;
    column-gap: var(--s6);
    padding: 0 0 0 4.25rem;
  }
  .steps--rows .steps__num { top: -0.25rem; }
  .steps--rows .steps__when { grid-column: 1; grid-row: 1; }
  .steps--rows h3 { grid-column: 1; grid-row: 2; margin: 0; }
  .steps--rows p { grid-column: 2; grid-row: 1 / span 2; }
}

/* Local SEO areas: the county in bold on the same line as its cities */
.svc-areas strong { display: inline; margin: 0; }

/* The clay closing band: the second button is a white outline */
.cta .btn--outline { border-color: var(--white); color: var(--white); --btn-fill: var(--white); }
.cta .btn--outline:hover,
.cta .btn--outline:focus-visible { color: var(--clay-ink); }