/* Services page (projects/services.html): a calm overview. Black line icons, open lists with hairlines,
   neutral line illustrations with a highlighter squiggle behind, lots of whitespace.
   Uses base.css tokens and prices.css (.hp-card), restyled quietly below. */

.sv { --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 40px; --sp-5: 64px; --sp-6: clamp(88px, 11vw, 168px); }
.sv main { overflow-x: clip; }
.sv .btn--big { padding: 17px 28px; font-size: 16px; }
.sv main a:not(.btn):not(.hp-card):not(.svc-row):not(.who-item):not(.work-item) { color: var(--ink); font-weight: 600; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* line icons: 24px grid, 1.75 stroke, round ends, currentColor */
.i { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ring { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; border: 1px solid var(--grey-3); color: var(--ink); }

/* a quiet text link with an arrow */
.sv-link { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.sv-link span { transition: transform 0.3s var(--ease-out); }
.sv-link:hover span { transform: translateX(4px); }

/* ---------- Hero: words left, an open list of services right ---------- */
.sv-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 120px); align-items: end;
  padding-top: clamp(132px, 15vw, 200px); padding-bottom: var(--sp-6); }
.sv-hero h1 { font-size: clamp(46px, 7vw, 104px); font-weight: 700; letter-spacing: -0.055em; line-height: 0.95; max-width: 11ch; }
.sv-hero__lede { margin-top: 28px; max-width: 46ch; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; color: var(--grey-7); }
.sv-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 40px; }
.sv-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 48px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--grey-5); }
.sv-facts li { display: inline-flex; align-items: center; gap: 10px; }
.sv-facts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--grey-3); }

.svc-list ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.svc-list li { border-bottom: 1px solid var(--line); }
.svc-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 20px; align-items: center; gap: 18px; padding: 20px 4px; color: var(--ink); text-decoration: none; }
.svc-row .i { width: 28px; height: 28px; stroke-width: 2; }
.svc-row b { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.svc-row small { font-size: 14px; color: var(--grey-5); white-space: nowrap; }
.svc-row .i--go { width: 18px; height: 18px; color: var(--grey-5); transition: transform 0.3s var(--ease-out), color 0.3s; }
.svc-row:hover .i--go { transform: translateX(4px); color: var(--ink); }

/* ---------- A service ---------- */
.svc { padding-block: calc(var(--sp-6) / 2); scroll-margin-top: 40px; }
.svc__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); align-items: center; }
.svc__media { grid-column: 1 / span 7; }
.svc__body { grid-column: 9 / span 4; }
.svc--flip .svc__media { grid-column: 6 / span 7; order: 2; margin-right: calc(-0.5 * var(--gutter)); }
.svc--flip .svc__body { grid-column: 1 / span 4; }
/* small offsets so the blocks don't line up like a stack of boxes */
#shops .svc__media { margin-top: 48px; }
#branding .svc__media { margin-left: calc(-0.5 * var(--gutter)); }
#print .svc__media { margin-top: -24px; }

.svc__body { display: grid; gap: 28px; align-content: start; }
.svc__k { display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 500; color: var(--grey-5); }
.svc__k > span:nth-child(2) { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.svc__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--grey-3); color: var(--ink); }
.svc h2 { margin-top: -6px; font-size: clamp(34px, 3.6vw, 52px); font-weight: 700; letter-spacing: -0.05em; line-height: 1.02; max-width: 13ch; }
.svc__lede { font-size: 17px; line-height: 1.7; color: var(--grey-7); max-width: 44ch; }

/* price: a typographic "From £500" and the options as a simple list */
.svc__price { display: grid; gap: 12px; }
.svc__from { font-size: clamp(30px, 2.6vw, 38px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.svc__from small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--grey-5); margin-right: 2px; }
.svc__from em { font-style: normal; font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--grey-5); }
.svc__from--ask { font-size: clamp(24px, 2vw, 28px); letter-spacing: -0.035em; }
.svc__opts { margin: 0; padding: 0; list-style: none; font-size: 15px; }
.svc__opts li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.svc__opts li:first-child { border-top: 1px solid var(--line); }
.svc__opts span { color: var(--grey-7); }
.svc__opts b { font-weight: 600; white-space: nowrap; }
.svc__opts s { font-weight: 400; color: var(--grey-5); margin-right: 4px; }
.svc__note { font-size: 15px; color: var(--grey-7); }

.svc__incl h3, .sv-step__no { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-5); }
.svc__ticks { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.45; color: var(--grey-7); }
.svc__ticks li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px; align-items: start; }
.svc__ticks .i { width: 16px; height: 16px; margin-top: 3px; stroke-width: 2.4; color: var(--grey-5); }

.svc__more { font-size: 15px; color: var(--grey-7); }
.svc__more summary { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; font-weight: 600; color: var(--ink); }
.svc__more summary::-webkit-details-marker { display: none; }
.svc__more summary::after { content: "+"; font-weight: 400; font-size: 18px; color: var(--grey-5); transition: transform 0.3s var(--ease-out); }
.svc__more[open] summary::after { transform: rotate(45deg); }
.svc__more > div { display: grid; gap: 10px; padding-top: 12px; max-width: 46ch; line-height: 1.6; }
.svc__more b { color: var(--ink); font-weight: 600; }

/* ---------- The visual: a line drawing floating on the page, a highlighter squiggle behind ---------- */
.svc__media { position: relative; isolation: isolate; }
.squig { position: absolute; inset: 2% -2%; width: 104%; height: 96%; z-index: -1; overflow: visible; pointer-events: none; }
.squig path { fill: none; stroke: var(--pen); stroke-width: 64; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; mix-blend-mode: multiply; }
.art { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 28px 36px rgb(24 24 26 / 0.09)); }
.art .ln { fill: #fff; stroke: var(--ink); stroke-width: 2.6; }
.art .st { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.art .ac { fill: color-mix(in srgb, var(--pen) 85%, #fff); }
.art .ac.st { stroke: var(--ink); }
.art .ink, .art .inkc { fill: var(--ink); }
.art .g2 { fill: var(--grey-2); }
.art .g2.st { stroke: var(--ink); }
.art .g3 { fill: var(--grey-3); }
.art .wht { fill: #fff; }
.art .wst { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; }
.art .hair { fill: none; stroke: var(--grey-3); stroke-width: 1.5; }
.art .thick { stroke-width: 3; }
.art .nss { vector-effect: non-scaling-stroke; }
.art .type { font-family: var(--font); font-weight: 700; font-size: 96px; letter-spacing: -5px; fill: var(--ink); }


/* reveal: the drawing fades and rises, the squiggle draws itself (services.js) */
.svc__media.is-pending .art { opacity: 0; transform: translateY(24px); }
.svc__media .art { transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.squig path.is-drawing { transition: stroke-dashoffset 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.15s; }

/* ---------- Pull quote ---------- */
.sv-quote { padding-block: calc(var(--sp-6) * 0.8); text-align: center; }
.sv-quote p { margin-inline: auto; max-width: 22ch; font-size: clamp(28px, 3.8vw, 52px); font-weight: 600; letter-spacing: -0.045em; line-height: 1.15; }
.sv-quote .sv-link { margin-top: 28px; }

/* ---------- Shared section bits ---------- */
.sv-sec { padding-block: calc(var(--sp-6) * 0.8); }
.sv-head { display: grid; gap: 16px; max-width: 720px; }
.sv-head h2 { font-size: clamp(32px, 4vw, 52px); font-weight: 700; letter-spacing: -0.05em; line-height: 1.04; }
.sv-head p { max-width: 56ch; color: var(--grey-7); font-size: 17px; line-height: 1.65; }
.sv-head--row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 40px; max-width: none; }

/* who it's for: an open grid, hairline above each */
.who-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(32px, 4vw, 64px); margin-top: var(--sp-5); }
.who-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; align-items: start; padding: 28px 0 36px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.who-item__body { display: grid; gap: 6px; }
.who-item h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.who-item__p { font-size: 15px; line-height: 1.6; color: var(--grey-7); }
.who-item__tags { margin-top: 4px; font-size: 13px; color: var(--grey-5); }
.who-item .ring { transition: border-color 0.3s; }
.who-item:hover .ring { border-color: var(--ink); }
.sv-who-more { margin-top: 16px; font-size: 16px; color: var(--grey-7); }

/* prices: the shared cards, made quiet on this page */
.sv .hp-cards { margin-top: var(--sp-5); }

/* steps: four open columns */
.sv-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
.sv-step { display: grid; gap: 10px; align-content: start; padding-top: 28px; border-top: 1px solid var(--line); }
.sv-step .ring { margin-bottom: 12px; }
.sv-step h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.025em; }
.sv-step p { font-size: 15px; line-height: 1.6; color: var(--grey-7); max-width: 32ch; }

/* some of my work: small, borderless thumbnails */
.work-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.work-item { display: grid; gap: 14px; color: var(--ink); text-decoration: none; }
.work-item__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: var(--grey-1); }
.work-item__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.work-item:hover .work-item__img img { transform: scale(1.03); }
.work-item__name { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.work-item__name b { font-size: 15px; font-weight: 600; }
.work-item__name small { font-size: 13px; color: var(--grey-5); }

/* FAQ */
.sv-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.sv-q { border-bottom: 1px solid var(--line); }
.sv-q:first-child { border-top: 1px solid var(--line); }
.sv-q summary { cursor: pointer; position: relative; padding: 24px 44px 24px 0; list-style: none; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.4; }
.sv-q summary::-webkit-details-marker { display: none; }
.sv-q summary::after { content: "+"; position: absolute; right: 4px; top: 50%; translate: 0 -50%; font-size: 22px; font-weight: 300; color: var(--grey-5); transition: rotate 0.3s var(--ease-out); }
.sv-q[open] summary::after { rotate: 45deg; }
.sv-q p { padding: 0 0 26px; font-size: 16px; line-height: 1.7; color: var(--grey-7); max-width: 60ch; }

/* closing call to action */
.sv-cta { background: var(--hl-yellow); color: #18181a; padding-block: var(--sp-6); }
.sv-cta__in { display: grid; gap: 22px; justify-items: start; }
.sv-cta__where { font-size: 14px; font-weight: 500; color: rgb(24 24 26 / 0.7); }
.sv-cta h2 { font-size: clamp(38px, 5vw, 72px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; max-width: 16ch; }
.sv-cta .hl { --pen: #fff; color: #18181a; }
.sv-cta__p { max-width: 48ch; font-size: 17px; line-height: 1.65; }
.sv-cta__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; margin-top: 12px; }
.sv-cta__quiet { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 15px; }
.sv-cta__links { margin-top: 20px; font-size: 14px; max-width: 70ch; color: rgb(24 24 26 / 0.7); }
.sv .site-foot { margin-top: 0; padding-top: 6px; }
.sv .site-foot__row { margin-top: 0; border-top: 0; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .who-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .svc__body { grid-column: 8 / span 5; }
  .svc--flip .svc__body { grid-column: 1 / span 5; }
}
@media (max-width: 900px) {
  .sv-hero { grid-template-columns: 1fr; align-items: start; }
  .svc__grid { grid-template-columns: 1fr; row-gap: 48px; }
  .svc__media, .svc__body, .svc--flip .svc__media, .svc--flip .svc__body { grid-column: 1; order: 0; margin: 0; }
  #shops .svc__media, #print .svc__media, #branding .svc__media { margin: 0; }
  .svc__media { max-width: 620px; }
  .svc__body { max-width: 620px; }
  .sv-faq { grid-template-columns: 1fr; }
  .work-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
}

/* ---------- Phones: one column, room to breathe ---------- */
@media (max-width: 600px) {
  .sv { --sp-5: 40px; --sp-6: 96px; }
  .sv-hero { padding-top: 112px; gap: 56px; }
  .sv-hero__lede { margin-top: 20px; font-size: 16.5px; }
  .sv-hero__ctas { margin-top: 32px; gap: 20px 28px; }
  .sv-facts { flex-direction: column; gap: 10px; margin-top: 36px; font-size: 14px; }
  .svc-row { grid-template-columns: 24px minmax(0, 1fr) auto 16px; gap: 14px; padding: 18px 0; }
  .svc-row .i { width: 24px; height: 24px; }
  .svc-row b { font-size: 16px; }
  .svc-row small { font-size: 13px; }
  .svc-row .i--go { width: 16px; height: 16px; }

  .svc { padding-block: 48px; }
  .svc__grid { row-gap: 36px; }
  .svc__media { margin-inline: -4px; }
  .squig path { stroke-width: 72; }
  .svc__body { gap: 24px; }
  .svc h2 { font-size: clamp(32px, 9vw, 40px); }
  .svc__lede { font-size: 16px; }

  .sv-quote p { font-size: clamp(26px, 7.4vw, 34px); }
  .who-list { grid-template-columns: 1fr; }
  .who-item { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 24px 0 28px; }
  .ring { width: 44px; height: 44px; }
  .sv-steps { grid-template-columns: 1fr; gap: 0; }
  .sv-step { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; padding: 24px 0 28px; }
  .sv-step .ring { grid-row: span 3; margin: 0; }
  .work-row { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter); }
  .work-row::-webkit-scrollbar { display: none; }
  .work-row li { flex: 0 0 68%; scroll-snap-align: start; }
  .sv-q summary { font-size: 16.5px; padding-block: 20px; }
  .sv-cta__btns { gap: 24px; }
  .sv-cta__btns .btn { flex: 1 1 100%; justify-content: center; }
  .sv-cta__quiet { flex-direction: column; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .svc__media .art, .squig path.is-drawing, .svc-row .i--go, .work-item__img img, .sv-link span { transition: none; }
}

/* closing contact band: same as the other pages, plus the call/WhatsApp pills */
.contact__intro .contact__where { font-size: 14px; opacity: 0.7; margin-top: 14px; }

/* who it's for: a sideways row of example-site cards, like the home page (desktop shots on desktop, phone shots on phones) */
.who-row { display: flex; gap: 16px; margin-top: var(--sp-5); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter, 24px)); padding: 6px var(--gutter, 24px) 18px; scroll-padding-inline: var(--gutter, 24px); }
.who-row::-webkit-scrollbar { display: none; }
@media (max-width: 760px) {
}

/* service visuals: mockup tiles (assets/services/<service>-d/-m.webp) */
.svc__media picture, .svc__media img { display: block; width: 100%; height: auto; }
.svc__media img { border-radius: 28px; }
@media (max-width: 760px) { .svc__media img { border-radius: 22px; } }

/* service illustrations, round two: ink outlines, highlighter fills, hard offset shadows (build3.py) */
.art--scene { filter: none; }
.art text { font-family: var(--font); }
.art .o { stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.art .o.thin { stroke-width: 2.2; }
.art .wh { fill: #fff; }
.art .nf { fill: none; }
.art .act { fill: color-mix(in srgb, var(--pen) 38%, #fff); }
/* chips pop in one after another, then drift */
.svc__media .chip { transform-box: fill-box; transform-origin: 50% 100%; transition: opacity 0.5s var(--ease-out) var(--d), transform 0.8s cubic-bezier(0.3, 1.5, 0.5, 1) var(--d); }
.svc__media.is-pending .chip { opacity: 0; transform: translateY(22px) scale(0.85); }
.svc__media .fl { transform-box: fill-box; animation: sv-float 6s ease-in-out var(--f, 0s) infinite; }
@keyframes sv-float { 50% { transform: translateY(-7px); } }
/* bars grow up from the baseline */
.svc__media .grow { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 0.9s var(--ease-out) var(--g, 0s); }
.svc__media.is-pending .grow { transform: scaleY(0); }
/* a cursor taps the button */
.svc__media .ripple { transform-box: fill-box; transform-origin: center; animation: sv-ripple 2.6s ease-out infinite; }
.svc__media .cur { transform-box: fill-box; animation: sv-tap 2.6s ease-in-out infinite; }
@keyframes sv-ripple { 0%, 30% { transform: scale(0.2); opacity: 0; } 35% { opacity: 0.9; } 80%, 100% { transform: scale(1.5); opacity: 0; } }
@keyframes sv-tap { 0%, 100% { transform: translate(14px, 12px); } 30% { transform: translate(0, 0) scale(0.9); } 45% { transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .svc__media .fl, .svc__media .ripple, .svc__media .cur { animation: none; } }

/* how it works: the home page timeline (copied from home.css) */
.steps2 { position: relative; list-style: none; margin: 0; padding: 30px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.steps2__line { position: absolute; left: 0; right: 0; top: 37px; height: 2px; background: var(--grey-2); }
.steps2__line i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); }
.step2 { position: relative; display: grid; gap: 12px; align-content: start; padding-top: 30px; }
.step2__dot { position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 2px solid var(--ink); transition: background 0.3s, transform 0.4s var(--ease-spring); }
.step2.is-on .step2__dot { background: var(--hl-yellow); transform: scale(1.35); }
.step2__no { font-size: clamp(64px, 7vw, 108px); font-weight: 800; letter-spacing: -0.06em; line-height: 0.9; color: transparent; -webkit-text-stroke: 1.5px var(--grey-3); transition: color 0.5s, -webkit-text-stroke-color 0.5s; }
.step2.is-on .step2__no { color: var(--ink); -webkit-text-stroke-color: var(--ink); }
.step2__icon { width: 92px; height: 76px; color: var(--ink); }
.step2 h3 { font-size: clamp(21px, 1.9vw, 26px); letter-spacing: -0.03em; }
.step2 p { color: var(--grey-7); font-size: 15.5px; max-width: 32ch; }
.step2__card { display: contents; }
/* Phones: a swipeable row of step cards; the line runs dot to dot and fills as you go */
@media (max-width: 800px) {
  .steps2 {
    --gap: 12px; display: flex; gap: var(--gap); padding: 6px var(--gutter) 4px; margin-inline: calc(var(--gutter) * -1);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .steps2::-webkit-scrollbar { display: none; }
  .steps2__line { display: none; }
  .step2 { flex: 0 0 min(80%, 330px); display: block; padding-top: 34px; scroll-snap-align: start; }
  .step2::before, .step2::after { content: ""; position: absolute; top: 7px; left: 30px; width: calc(100% + var(--gap)); height: 2px; background: var(--grey-2); }
  .step2::after { background: var(--ink); transform-origin: left; transform: scaleX(var(--f, 0)); }
  .step2:last-child::before, .step2:last-child::after { display: none; }
  .step2__dot { z-index: 1; left: 22px; top: 0; }
  .step2__card { display: grid; gap: 10px; align-content: start; height: 100%; padding: 24px 22px 26px; border: 1px solid var(--line); border-radius: var(--radius-l); transition: border-color 0.4s; }
  .step2.is-on .step2__card { border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
  .step2__no { font-size: 58px; }
  .step2__icon { width: 74px; height: 62px; margin-top: 4px; }
  .step2 h3 { font-size: 21px; }
  .step2 p { font-size: 15px; }
}


/* who it's for: the home page's cards (grey card, tinted stage, the example site on a phone or laptop) */
.who-card { flex: 0 0 min(400px, 32%); scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius-l); overflow: hidden; background: var(--grey-1); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: box-shadow 0.4s, translate 0.5s var(--ease-out); }
.who-card:hover { box-shadow: var(--shadow); translate: 0 -4px; }
.who-card__art { display: block; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--tint) 45%, var(--white)); }
.who-card__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.who-card__body { padding: 22px 24px 24px; display: grid; gap: 8px; align-content: start; }
.who-card h3 { font-size: clamp(20px, 1.9vw, 26px); font-weight: 600; letter-spacing: -0.03em; }
.who-card__p { color: var(--grey-7); font-size: 15px; font-weight: 400; line-height: 1.6; }
.who-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.who-card__chips span { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--tint) 35%, var(--white)); }
@media (max-width: 760px) { .who-card { flex-basis: 84%; } }
@media (max-width: 700px) { .sv-who-more a { display: none; } }

/* the deals inside each service's price list, styled like the Best deal panel on the price cards */
.svc__opts li.is-deal { align-items: center; margin: 6px 0; padding: 13px 14px; border: 0; border-radius: 12px; background: var(--ink); color: #fff; }
.svc__opts li.is-deal + li { border-top: 0; }
.svc__opts li.is-deal span { display: grid; gap: 3px; color: #fff; font-weight: 600; }
.svc__opts li.is-deal em { justify-self: start; margin-bottom: 3px; padding: 3px 9px; border-radius: 999px; background: var(--hl-yellow); color: var(--ink); font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.svc__opts li.is-deal small { font-size: 13px; font-weight: 500; opacity: 0.7; }
.svc__opts li.is-deal b { display: grid; justify-items: end; line-height: 1.1; }
.svc__opts li.is-deal s { margin: 0; color: rgb(255 255 255 / 0.55); font-size: 13px; }
/* the small print, once, under all the services */
.sv-notes { padding-block: 8px clamp(40px, 6vw, 80px); }
.sv-notes .hp-extras { margin-top: 0; }
.sv .site-foot__grid { margin-top: 0; border-top: 0; padding-top: 24px; }
/* phones: the illustrations run nearly edge to edge, with a fatter highlighter behind */
@media (max-width: 760px) {
  .svc__media { margin-inline: calc(-1 * var(--gutter, 18px) + 14px) !important; }
  .svc__media .art { width: 100%; margin-left: 0; }
  .squig { inset: -4% -6%; width: 112%; height: 108%; }
  .squig path { stroke-width: 118; opacity: 0.85; }
}
@media (max-width: 760px) {
  .svc { padding-block: 28px; }
  #shops .svc__media, #print .svc__media { margin-top: 0; }
  .svc__grid { row-gap: 24px; }
}

/* How it works on a light grey band, edge to edge, like the home page */
.sv #process { position: relative; isolation: isolate; padding-block: clamp(56px, 8vw, 104px); margin-block: clamp(24px, 4vw, 48px); }
.sv #process::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; translate: -50% 0; background: var(--grey-1); }
.sv #process .steps2__line { background: var(--grey-3); }
.sv #process .step2__no { -webkit-text-stroke-color: #c4c4c1; }
@media (max-width: 800px) {
  .sv #process .step2__card { background: var(--white); }
  .sv #process .step2::before { background: var(--grey-3); }
}
/* Websites: the add-ons sit under the three sizes, a step quieter */
.svc__opts li.is-sub { padding: 8px 0; font-size: 14px; }
.svc__opts li:not(.is-sub) + li.is-sub { margin-top: 10px; border-top: 1px dashed var(--grey-3); padding-top: 14px; position: relative; }
.svc__opts li:not(.is-sub) + li.is-sub::before { content: "Add-ons"; position: absolute; top: -9px; left: 0; padding-right: 8px; background: var(--white, #fff); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-5); }
.svc__opts li.is-sub b { font-weight: 600; }
/* a quiet ticked note at the foot of a price list */
.svc__opts li.is-note { justify-content: flex-start; gap: 8px; padding: 10px 0; border-bottom: 0; font-size: 14px; }
.svc__opts li.is-note::before { content: "✓"; font-weight: 700; color: var(--ink); }
.svc__opts li.is-note.is-plain::before { content: none; }
.svc__opts li.is-note.is-plain { padding-top: 6px; color: var(--grey-5); font-size: 13.5px; }
.svc__opts li.is-note.is-plain b { color: var(--grey-7); font-weight: 600; }
/* the "Need the lot?" bar sits straight under the notes, the section gap goes below it instead */
.sv-notes:has(+ .sv-lot) { padding-bottom: 0; }
.sv-lot { padding-bottom: clamp(40px, 6vw, 80px); }
/* Websites: add-ons tucked behind a chevron */
.svc__opts li.svc__addons { display: block; padding: 0; border-bottom: 0; }
.svc__addons summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; list-style: none; cursor: pointer; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-5); }
.svc__addons summary::-webkit-details-marker { display: none; }
.svc__addons summary:hover { color: var(--ink); }
.svc__addons summary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: rotate 0.3s var(--ease-out); }
.svc__addons details[open] summary svg { rotate: 180deg; }
.svc__addons ul { margin: 0; padding: 0; list-style: none; }
.svc__addons ul li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.svc__addons ul li span { color: var(--grey-7); }
.svc__addons ul li b { font-weight: 600; white-space: nowrap; }
.svc__addons p { margin: 10px 0 4px; font-size: 13.5px; color: var(--grey-5); }
.svc__addons p b { color: var(--grey-7); font-weight: 600; }
.svc__addons details[open] > * { animation: hp-addons-in 0.35s var(--ease-out); }
.svc__addons details[open] > summary { animation: none; }
@keyframes hp-addons-in { from { opacity: 0; translate: 0 -6px; } }