/* Harris Taylor — services page

   Built on the homepage's section pattern rather than cards: 128px on the
   gutter, a hairline across the top of each section, three columns split
   by vertical hairlines, and the same eyebrow, display heading, bullet
   list and .btn styles. Nothing here introduces a fill, a border box or a
   radius that the homepage does not already use. */

/* ---------- section frame ---------- */
.sv {
  padding: clamp(72px, calc(39.6px + 8.63vw), 128px) var(--gutter);
  border-top: 1px solid rgba(245,245,245,0.08);
}

.sv__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: clamp(40px, calc(30.8px + 2.47vw), 56px);
}

.sv__heading {
  font-size: clamp(36px, 5vw, 72px);
  font-weight: var(--wt-light);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--paper-0);
  margin: 0;
}

/* three columns on a hairline grid, exactly as the homepage does it */
.sv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(245,245,245,0.08);
}

.sv-col {
  display: flex;
  flex-direction: column;
  padding: 40px 48px 56px;
  border-right: 1px solid rgba(245,245,245,0.08);
}
.sv-col:last-child { padding-right: 0; border-right: none; }

.sv-label {
  font-size: 11px;
  font-weight: var(--wt-regular);
  color: var(--fg-meta);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}

/* ---------- services: the original row layout ----------
   Heading, short paragraph and button on the left, the list on the
   right, each service its own band closed by a rule. Same shape the
   page had before, under this page's own class names. */
.sv-row {
  padding: clamp(48px, calc(20.3px + 7.4vw), 96px) var(--gutter);
  border-bottom: 1px solid rgba(245,245,245,0.08);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: start;
}

.sv-row__left {
  display: flex;
  flex-direction: column;
}

.sv-row__num {
  font-size: 11px;
  font-weight: var(--wt-regular);
  color: var(--fg-meta);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  margin-bottom: 20px;
}

/* The site's section heading size (.services__heading, .sv__heading), a
   step up from the 64px these had when the header was one word. */
.sv-row__title {
  font-size: clamp(36px, 5vw, 72px);
  font-weight: var(--wt-light);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--paper-0);
  margin: 0 0 clamp(24px, calc(19.4px + 1.23vw), 32px);
}

.sv-row__desc {
  font-size: 16px;
  font-weight: var(--wt-light);
  color: var(--fg-quiet);
  line-height: 1.7;
  margin: 0 0 16px;
  max-width: 34em;
}

/* Two paragraphs now: a line between them, the full gap before the button. */
.sv-row__desc:last-of-type { margin-bottom: 40px; }

.sv-row__cta {
  align-self: flex-start;
}

.sv-row__right {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}

.sv-row__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sv-row__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(245,245,245,0.08);
  font-size: 15px;
  font-weight: var(--wt-light);
  color: var(--fg-quiet);   /* bullet text is grey site-wide, as on pricing */
}

.sv-row__item::before {
  content: '\2022';
  color: var(--fg-meta);
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
}

/* ---------- method ---------- */
.sv-method__num {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: var(--wt-light);
  color: var(--fg-meta);   /* 4.5:1 or better on the page, like the site's other small labels */
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 24px;
}

.sv-method__title {
  font-size: 24px;
  font-weight: var(--wt-regular);
  color: var(--paper-0);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

.sv-method__body {
  font-size: 15px;
  font-weight: var(--wt-light);
  color: var(--fg-quiet);
  line-height: 1.65;
  margin: 0;
}

/* ---------- workflows: copy left, Booking System panel right ----------
   Eyebrow, heading, copy and button on the left, and the booking panel on
   the right; below 1024px the two stack, copy first. The panel itself is
   css/booking-panel.css, shared with the live demo on /workflows/, and
   js/pages/services.js plays a visitor booking in it. */
.sv-wf__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 64px;
}

/* A block with line-height 1, so its box starts where its letters do and
   the eyebrow lines up with the top of the panel beside it. */
.sv-wf__head > .eyebrow {
  display: block;
  line-height: 1;
}

.sv-wf__title {
  font-size: clamp(36px, 5vw, 72px);
  font-weight: var(--wt-light);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--paper-0);
  margin: 16px 0 32px;
}

.sv-wf__desc {
  font-size: 16px;
  font-weight: var(--wt-light);
  color: var(--fg-quiet);
  line-height: 1.7;
  margin: 0 0 40px;
  max-width: 34em;
}

/* Two paragraphs: a line between them, the full gap before the button. */
.sv-wf__desc:not(:last-of-type) { margin-bottom: 16px; }

/* Two columns from 1024px: tops aligned, the eyebrow level with the
   panel. The panel fits itself to half the width (css/booking-panel.css).
   Below 1024 they stack, with room under the copy. */
.sv-wf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}
.sv-wf__head { margin-bottom: 0; }

/* ---------- responsive: columns stack, dividers move to the bottom ---------- */
@media (max-width: 1023px) {
  .sv-wf { display: block; }
  .sv-wf__head { margin-bottom: clamp(40px, calc(26.1px + 3.7vw), 64px); }

  .sv-row {
    grid-template-columns: 1fr;
  }
  .sv-row__right { padding-top: 0; }

  .sv-grid { grid-template-columns: 1fr; }
  .sv-col {
    padding: clamp(28px, calc(23.4px + 1.23vw), 36px) 0 clamp(36px, calc(29.1px + 1.85vw), 48px);
    border-right: none;
    border-bottom: 1px solid rgba(245,245,245,0.08);
  }
  .sv-col:last-child { border-bottom: none; }
}

/* Tablet: each service is one stack. Eyebrow and heading, the paragraphs in
   two columns, the list in two columns, then the button centred below it.
   The two desktop columns step aside (display: contents) so all of it sits
   in one grid, and "order" takes the button past the list. */
@media (max-width: 1023px) {
  main .sv-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    gap: 0 32px;
    padding: 96px var(--gutter);
    justify-items: stretch;
  }
  main .sv-row__left.split,
  main .sv-row__right { display: contents; }

  main .sv-row__num { grid-column: 1 / -1; margin-bottom: 10px; }
  main .sv-row__title { grid-column: 1 / -1; margin-bottom: 20px; }

  main .sv-row .split__body {
    grid-column: 1 / -1;
    grid-row: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
  }
  main .sv-row__desc,
  main .sv-row__desc:last-of-type {
    margin: 0;
    font-size: 15px;
    line-height: var(--lh-body);
  }

  main .sv-row__list {
    grid-column: 1 / -1;
    order: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    margin-top: 32px;
  }
  main .sv-row__item {
    gap: 16px;
    padding: 9px 0;
    font-size: 14px;
    line-height: 1.5;
  }
  main .sv-row__item:nth-child(-n + 2) { border-top: 1px solid var(--hairline); }

  main .sv-row__cta {
    grid-column: 1 / -1;
    order: 2;
    justify-self: center;
    align-self: auto;
    min-width: 220px;
    margin-top: 32px;
  }
}

/* Phone: the same stack, one column */
@media (max-width: 767px) {
  main .sv-row {
    grid-template-columns: minmax(0, 1fr);
    padding: 72px var(--gutter);
  }
  main .sv-row .split__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  main .sv-row__list { grid-template-columns: minmax(0, 1fr); }
  main .sv-row__item:nth-child(2) { border-top: 0; }
  main .sv-row__cta { justify-self: stretch; }

  /* Works while you do: the button goes below the Booking card */
  main .sv-wf { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  main .sv-wf__head.split { display: contents; }
  main .sv-wf__title { margin-bottom: 24px; }
  main .sv-wf__desc:last-of-type { margin-bottom: 32px; }
  main .sv-wf__head > .btn { order: 1; margin-top: 32px; }
}