/* ==========================================================================
   Service pages (web-design-essex.html and the rest, built by
   tools/services/build.py): the head, the service's own illustration on an
   ink panel (the home page's open row, full width), then lined sections
   (plans and prices, how it works, why us, the work), the questions and the
   call (doc.css), reading (insights.css) and the other services.
   ========================================================================== */

.svp {
  padding-bottom: clamp(88px, 14vh, 160px);
}

/* ------------------------------------------------------------------ head */

.svp-head {
  padding: calc(var(--header-h) + clamp(24px, 5vh, 64px)) var(--gutter) 0;
}

.svp-head__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  color: var(--text-mute);
}

.svp-head__label a {
  color: var(--ink);
}

/* The service in the words people search for: large, set as a sentence. */
.svp-title {
  max-width: 15ch;
  margin-top: clamp(20px, 4vh, 44px);
  font-size: clamp(2.5rem, 1rem + 5.4vw, 7.5rem);
  font-stretch: 112.5%;
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.svp-title > span {
  display: block;
}

.svp-head__foot {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: end;
  gap: 28px clamp(32px, 5vw, 96px);
  margin-top: clamp(24px, 4.5vh, 52px);
}

.svp-lede {
  max-width: 30ch;
  font-size: clamp(1.25rem, 0.95rem + 1.05vw, 2rem);
  line-height: 1.24;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}

.svp-head__side {
  display: grid;
  justify-items: start;
  gap: 22px;
}

.svp-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  color: var(--text-mute);
}

/* The dot ends an item, so a wrapped line never starts with one. */
.svp-facts li:not(:last-child)::after {
  content: "·";
  padding: 0 0.8em;
}

.svp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}

.svp-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.svp-link svg {
  width: 14px;
  height: 14px;
  transition: translate 420ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .svp-link:hover svg {
    translate: 3px 0;
  }
}

/* The illustration: the same animated scene as the home page's open row. */
.svp-art {
  display: grid;
  place-items: center;
  margin: clamp(40px, 7vh, 80px) var(--gutter) 0;
  padding: clamp(20px, 3vw, 48px);
  border-radius: clamp(16px, 1.6vw, 24px);
  background: var(--ink);
  box-shadow: var(--shadow-deep);
}

.svp-art img {
  display: block;
  width: min(100%, 1100px);
  height: auto;
}

/* Entrance: the head rises in on load (doc.css's doc-rise). */
.js .svp-head [data-enter],
.js .svp-art[data-enter] {
  animation: doc-rise 1000ms var(--ease-out) both;
  animation-delay: calc(80ms + var(--e, 0) * 70ms);
}

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

.svp-sec {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  align-items: start;
  gap: 24px clamp(32px, 5vw, 96px);
  padding: clamp(88px, 14vh, 160px) var(--gutter) 0;
}

.svp-sec__head {
  display: grid;
  gap: 12px;
}

.svp-sec__label {
  color: var(--text-mute);
}

.svp-sec__title {
  max-width: 16ch;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 3rem);
  font-stretch: 112.5%;
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.svp-sec__body {
  display: grid;
  justify-items: start;
  gap: 18px;
}

.svp-rows,
.svp-prices,
.svp-links,
.svp-others {
  width: 100%;
  border-top: 1px solid var(--line);
}

.svp-row {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: baseline;
  gap: 8px 24px;
  padding: clamp(18px, 2.6vh, 30px) 0;
  border-bottom: 1px solid var(--line);
}

.svp-row__n {
  color: var(--text-faint);
}

.svp-row__title,
.svp-price__name {
  font-size: clamp(1.125rem, 0.98rem + 0.5vw, 1.5rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.svp-row__text,
.svp-price__sum {
  max-width: 46ch;
  color: var(--text-mute);
  text-wrap: pretty;
}

/* The plans (tools/pricing/build.py), one line each. */
.svp-price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto;
  align-items: baseline;
  gap: 8px 32px;
  padding: clamp(18px, 2.6vh, 30px) 0;
  border-bottom: 1px solid var(--line);
}

.svp-price__num {
  display: grid;
  justify-items: end;
  gap: 4px;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.5rem);
  font-stretch: 112.5%;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.svp-price__when {
  font-size: var(--fs-micro);
  font-stretch: 100%;
  letter-spacing: 0;
  color: var(--text-mute);
}

.svp-note {
  max-width: 60ch;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text-mute);
}

/* The work and the other services: whole rows that are links. */
.svp-link-row,
.svp-other {
  display: grid;
  align-items: baseline;
  gap: 6px 24px;
  padding: clamp(18px, 2.6vh, 28px) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.svp-link-row {
  grid-template-columns: minmax(0, 1fr) auto 16px;
  grid-template-areas:
    "name tag arrow"
    "text text text";
}

.svp-link-row__name,
.svp-other span:first-child {
  font-size: clamp(1.125rem, 0.98rem + 0.5vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.svp-link-row__name {
  grid-area: name;
}

.svp-link-row__tag {
  grid-area: tag;
  color: var(--text-mute);
}

.svp-link-row__text {
  grid-area: text;
  max-width: 70ch;
  color: var(--text-mute);
}

.svp-link-row svg,
.svp-other svg {
  grid-area: arrow;
  width: 16px;
  height: 16px;
  transition: translate 420ms var(--ease-out);
}

.svp-other {
  grid-template-columns: minmax(0, 1fr) auto 16px;
}

.svp-other svg {
  grid-area: auto;
}

.svp-other__from {
  color: var(--text-mute);
}

@media (hover: hover) and (pointer: fine) {
  .svp-link-row:hover svg,
  .svp-other:hover svg {
    translate: 4px 0;
  }

  .svp-link-row:hover .svp-link-row__name,
  .svp-other:hover span:first-child {
    color: var(--text-mute);
  }

  .svp-link-row__name,
  .svp-other span:first-child {
    transition: color 300ms ease;
  }
}

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

@media (max-width: 1023px) {
  .svp-head__foot,
  .svp-sec {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 719px) {
  .svp-sec,
  .svp-faq {
    padding-top: var(--sec-top);
  }

  .svp-row {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .svp-row__text {
    grid-column: 2;
  }

  .svp-price {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .svp-price__sum {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .svp-link-row {
    grid-template-columns: minmax(0, 1fr) 16px;
    grid-template-areas:
      "name arrow"
      "tag tag"
      "text text";
  }

  .svp-other {
    grid-template-columns: minmax(0, 1fr) 16px;
  }

  .svp-other__from {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .svp-head [data-enter],
  .js .svp-art[data-enter] {
    animation: none;
  }
}