/* Services (services.html) and Making (making.html). Uses the tokens and components in site.css.
   Services sections are prefixed sv-, Making sections mk-. Nothing here redefines a token or a shared component. */


/* ================================ SERVICES ================================ */

/* ---------- 1. Page head ---------- */
.sv-head { padding-top: clamp(32px, 6vh, 72px); }
.sv-head__grid { row-gap: var(--s-7); align-items: end; }
.sv-head__text, .sv-head__keys { grid-column: 1 / -1; }
.sv-head__h { margin-top: var(--s-5); max-width: 11ch; }
.sv-head__lead { margin-top: var(--s-5); }
.sv-head__keys { border-top: 1px solid var(--ink); }
.sv-head__keys > div { grid-template-columns: minmax(0, 2fr) minmax(0, 4fr); }
@media (min-width: 1100px) {
  .sv-head__text { grid-column: 1 / span 7; }
  .sv-head__keys { grid-column: 9 / span 4; }
}

/* the jump list: six cells in a row, set like a drawing's parts list */
.sv-jump { margin-top: var(--s-8); }
.sv-jump ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line); }
.sv-jump li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sv-jump a { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-3); height: 100%; min-height: 76px; padding: var(--s-3); font-size: 15px; font-weight: 600; line-height: 1.25; text-decoration: none; transition: background-color var(--dur-1) linear; }
.sv-jump a:hover { background: var(--sheet); text-decoration: underline; text-underline-offset: 3px; }
.sv-jump .num { font-size: var(--fs-label); font-weight: 500; letter-spacing: .08em; color: var(--muted); }
.sv-jump .num::after { content: ' \2193'; }
@media (min-width: 768px) { .sv-jump ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sv-jump ol { grid-template-columns: repeat(6, minmax(0, 1fr)); } .sv-jump a { min-height: 96px; } }

/* ---------- 2. Service rows (full version) ---------- */
.sv-rows { padding-top: var(--s-8); }
.sv-rows__scale { display: grid; grid-template-columns: auto minmax(var(--s-6), 1fr) auto; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); color: var(--muted); }
.sv-rows__scale i { position: relative; height: 1px; background: var(--line-strong); }
.sv-rows__scale i::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); transform: rotate(45deg); }
.sv-list { border-top: 1px solid var(--ink); }
.sv-row { position: relative; row-gap: var(--s-4); padding: var(--s-6) 0; }
.sv-row .srow__no { line-height: 1.9; padding-top: 2px; }
.sv-row .h-row { align-self: start; }
.sv-row__body, .sv-row__proof { grid-column: 1 / -1; }
.sv-row .srow__text { max-width: 52ch; }
.sv-row__good, .sv-row__start { margin-top: var(--s-3); font-size: var(--fs-small); line-height: 1.5; max-width: 60ch; }
.sv-row__start { color: var(--muted); }
.sv-row__good .caps, .sv-row__start .caps { margin-right: var(--s-2); color: var(--muted); }
.sv-row__body .btn-text { margin-top: var(--s-2); font-size: 15px; }
.sv-row__plabel { margin-bottom: var(--s-3); color: var(--muted); }
.sv-row__who { font-weight: 600; }
.sv-row__proof .btn-text { font-size: 15px; }
/* arriving from an anchor (Home's "Start where you are"): the row is marked like a selected part */
.sv-row::before { content: ''; position: absolute; left: 0; top: -1px; width: 48px; height: var(--w-mark); background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-3) var(--ease-settle); }
.sv-row:target::before { transform: none; }

.sv-proof { display: grid; gap: var(--s-4); }
.sv-proof li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.sv-proof a { font-weight: 600; font-size: 15px; line-height: 1.35; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sv-proof a:hover { text-decoration-thickness: 2px; }
.sv-proof__fact { display: block; margin-top: var(--s-1); font: 400 var(--fs-caption)/1.5 var(--font-mono); color: var(--muted); }
.sv-proof__thumb { display: block; width: 96px; aspect-ratio: 4 / 3; background: var(--sheet); border: 1px solid var(--line); overflow: hidden; }
.sv-proof__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.sv-proof__thumb--contain img { object-fit: contain; padding: 4px; }
.sv-proof__thumb--withheld { background: var(--hatch), var(--bench); }

@media (min-width: 768px) {
  .sv-row { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .sv-row .srow__no { grid-column: 1; }
  .sv-row .srow__name { grid-column: 2 / -1; }
  .sv-row__body { grid-column: 2 / span 4; }
  .sv-row__proof { grid-column: 6 / span 3; }
}
@media (min-width: 1100px) {
  .sv-row { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; padding: var(--s-7) 0; }
  .sv-row .srow__name { grid-column: 2 / span 3; }
  .sv-row__body { grid-column: 5 / span 4; }
  .sv-row__proof { grid-column: 9 / span 4; }
}

/* ---------- 3. Fractional CTO ---------- */
.sv-cto:focus { outline: none; }
.sv-cto__grid { row-gap: var(--s-7); }
.sv-cto__head, .sv-cto__covers, .sv-cto__who { grid-column: 1 / -1; }
.sv-cto__head .t-h2 { margin-top: var(--s-5); max-width: 16ch; }
.sv-cto__head .lead { margin-top: var(--s-4); }
.sv-sub { margin-bottom: var(--s-4); color: var(--muted); }
.sv-nine { display: grid; grid-template-columns: 1fr; column-gap: var(--gap); border-top: 1px solid var(--line-strong); counter-reset: none; }
.sv-nine li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: baseline; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-weight: 500; line-height: 1.4; }
.sv-nine .num { font-size: var(--fs-label); color: var(--muted); }
@media (min-width: 768px) { .sv-nine { grid-template-columns: 1fr 1fr; } }
.sv-who { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-4); align-items: start; padding-top: var(--s-4); border-top: 1px solid var(--line-strong); }
.sv-who__img { aspect-ratio: 4 / 5; background: var(--paper); overflow: hidden; }
.sv-who__img picture { display: block; width: 100%; height: 100%; }
.sv-who__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: grayscale(1) contrast(1.04); }
.sv-who__name { font-weight: 600; font-size: 17px; line-height: 1.3; }
.sv-who__bio { margin-top: var(--s-2); font-size: var(--fs-small); line-height: 1.5; }
.sv-who .btn-text { font-size: 15px; }
@media (min-width: 1100px) {
  .sv-cto__head { grid-column: 1 / span 7; grid-row: 1; }
  .sv-cto__covers { grid-column: 1 / span 7; grid-row: 2; }
  .sv-cto__who { grid-column: 9 / span 4; grid-row: 1 / span 2; align-self: start; padding-top: calc(var(--fs-label) * 1.3 + var(--s-5)); }
  .sv-who { grid-template-columns: 1fr; }
  .sv-who__img { width: 160px; }
}

.sv-decide { margin-top: var(--s-8); }
.sv-decide__list { border-top: 1px solid var(--line-strong); }
.sv-decide__list li { display: grid; grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.sv-decide__stage { display: inline-flex; align-items: center; gap: var(--s-3); font: 500 var(--fs-label)/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.sv-decide__q { font-size: var(--fs-h4); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.sv-pips { display: inline-flex; gap: 3px; flex: none; }
.sv-pips i { width: 16px; height: 4px; background: var(--line-strong); opacity: .35; }
.sv-pips[data-n='1'] i:nth-child(-n+1), .sv-pips[data-n='2'] i:nth-child(-n+2), .sv-pips[data-n='3'] i:nth-child(-n+3),
.sv-pips[data-n='4'] i:nth-child(-n+4), .sv-pips[data-n='5'] i:nth-child(-n+5) { background: var(--ink); opacity: 1; }
@media (min-width: 768px) {
  .sv-decide__list li { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); align-items: baseline; gap: var(--gap); }
}
@media (min-width: 1100px) { .sv-decide__list li { grid-template-columns: repeat(12, minmax(0, 1fr)); } .sv-decide__stage { grid-column: 1 / span 4; } .sv-decide__q { grid-column: 5 / span 8; } }
.sv-cto__actions { margin-top: var(--s-6); }

/* ---------- 4. How a project runs ---------- */
.sv-steps { position: relative; display: grid; gap: var(--s-6); }
.sv-steps::before { content: ''; position: absolute; left: 20px; top: 20px; bottom: 20px; width: 1px; background: var(--ink); }
.sv-step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--s-4); }
.sv-step > :not(.sv-step__no) { grid-column: 2; }
.sv-step__no { grid-row: 1 / span 3; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--paper); border: 1.5px solid var(--ink); font: 600 13px/1 var(--font-mono); letter-spacing: .04em; }
.sv-step:first-child .sv-step__no { background: var(--ink); color: var(--paper); }
.sv-step__h { padding-top: 7px; }
.sv-step__text { margin-top: var(--s-2); font-size: var(--fs-small); line-height: 1.55; max-width: 40ch; }
.sv-step__you { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); font: 400 var(--fs-caption)/1.5 var(--font-mono); max-width: 40ch; }
.sv-step__you span { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-right: var(--s-1); }
@media (min-width: 1100px) {
  .sv-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
  .sv-steps::before { left: 20px; right: 0; top: 20px; bottom: auto; width: auto; height: 1px; }
  .sv-steps::after { content: ''; position: absolute; right: 0; top: 16px; width: 9px; height: 9px; border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); transform: rotate(45deg); }
  .sv-step { grid-template-columns: 1fr; align-content: start; }
  .sv-step > :not(.sv-step__no) { grid-column: 1; }
  .sv-step__no { grid-row: auto; }
  .sv-step__h { padding-top: 0; margin-top: var(--s-5); }
  .sv-step__you { margin-top: var(--s-4); }
}

/* ---------- 5. Where we stop (the ruler is the shared component) ---------- */
.sv-stop .stop__fig { margin-top: 0; }

.sv-fit { display: grid; grid-template-columns: 1fr; margin-top: var(--s-7); border: 1px solid var(--line); }
.sv-fit__col { padding: var(--s-5); background: var(--sheet); }
.sv-fit__col--not { background: var(--hatch), var(--bench); border-top: var(--w-bar) solid var(--ink); }
.sv-fit__h { display: flex; align-items: center; gap: var(--s-3); color: var(--ink); }
.sv-fit__col--not .sv-fit__h, .sv-fit__col--not .sv-fit__list li { width: fit-content; max-width: 100%; background: var(--bench); padding: 2px 6px; margin-left: -6px; }
.sv-fit__key { width: 8px; height: 8px; background: var(--ink); flex: none; }
.sv-fit__key--hatch { width: 14px; height: 14px; background: var(--hatch), var(--bench); border: 1px solid var(--line-strong); }
.sv-fit__list { display: grid; gap: var(--s-3); }
.sv-fit__list li { position: relative; padding-left: var(--s-5); font-size: var(--fs-body); line-height: 1.45; font-weight: 500; }
.sv-fit__list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--ink); }
.sv-fit__col--not .sv-fit__list li { padding-left: 6px; }
.sv-fit__col--not .sv-fit__list li::before { display: none; }
@media (min-width: 768px) {
  .sv-fit { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .sv-fit__col--not { border-top: 0; border-left: var(--w-bar) solid var(--ink); }
  .sv-fit__list { grid-template-columns: 1fr; }
}
@media (min-width: 1100px) {
  .sv-fit { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .sv-fit__col { padding: var(--s-6); }
  .sv-fit__col:first-child .sv-fit__list { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); }
}

/* ---------- 6. Questions ---------- */
.sv-faq__grid { row-gap: var(--s-6); }
.sv-faq__head, .sv-faq__acc { grid-column: 1 / -1; }
.sv-faq__head .t-h2 { margin-top: var(--s-5); }
.sv-faq__acc { border-top-color: var(--line-strong); }
.sv-faq__acc details { border-bottom-color: var(--line-strong); }
.sv-faq__acc summary:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 1100px) {
  .sv-faq__head { grid-column: 1 / span 4; }
  .sv-faq__acc { grid-column: 5 / span 8; }
}


/* ================================ MAKING ================================ */

/* ---------- 1. Page head ---------- */
.mk-head { padding: clamp(32px, 6vh, 72px) 0 var(--section-y); }
.mk-head__grid { row-gap: var(--s-7); align-items: start; }
.mk-head__text, .mk-head__fig { grid-column: 1 / -1; }
.mk-head__h { margin-top: var(--s-5); max-width: 9ch; }
.mk-head__lead { margin-top: var(--s-5); max-width: 42ch; }
.mk-lockup { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); max-width: 42ch; font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.mk-lockup span { font-family: var(--font-mono); font-weight: 400; color: var(--muted); }
.mk-head__actions { margin-top: var(--s-6); align-items: center; column-gap: var(--s-5); }
@media (max-width: 767px) {
  .mk-head__actions .btn { width: 100%; min-height: 52px; white-space: normal; text-align: center; }
}
@media (min-width: 1100px) {
  .mk-head__text { grid-column: 1 / span 5; }
  .mk-head__fig { grid-column: 7 / span 6; margin-top: calc(var(--fs-label) * 1.3 + var(--s-5) + 10px); }
}

/* ---------- 2. The loop ---------- */
.mk-loop:focus { outline: none; }
.mk-loop__grid { row-gap: var(--s-7); align-items: start; }
.mk-ring-fig, .mk-parts { grid-column: 1 / -1; }
.mk-ring { padding: var(--s-5) var(--s-4); background: var(--grid-paper), var(--sheet); border: 1px solid var(--line); }
.mk-ring__svg { width: min(100%, 240px); height: auto; margin: 0 auto var(--s-5); overflow: visible; }
.mk-ring__circle { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.mk-ring__inner { fill: none; stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mk-ring__axis { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 6 4 1 4; vector-effect: non-scaling-stroke; opacity: .7; }
.mk-ring__arrow { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: square; vector-effect: non-scaling-stroke; }
.mk-ring__stop { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.mk-ring__dot { fill: var(--accent); }
.mk-ring__stops { display: grid; border-top: 1px solid var(--line); }
.mk-stop { display: grid; gap: var(--s-1); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.mk-stop__k { font: 600 var(--fs-label)/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.mk-stop__k .num { color: var(--muted); font-weight: 500; margin-right: var(--s-1); }
.mk-stop__t { font-size: var(--fs-small); line-height: 1.45; }
/* from 600 px: the four stops sit around the ring, each beside its own mark */
@media (min-width: 600px) {
  .mk-ring { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 280px) minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: '. n .' 'w ring e' '. s .'; column-gap: var(--s-4); row-gap: var(--s-2); padding: var(--s-6) var(--s-5); }
  .mk-ring__svg { grid-area: ring; width: 100%; margin: 0; }
  .mk-ring__stops { display: contents; }
  .mk-stop { padding: 0; border: 0; max-width: 26ch; }
  .mk-stop--n { grid-area: n; justify-self: center; text-align: center; align-self: end; }
  .mk-stop--s { grid-area: s; justify-self: center; text-align: center; }
  .mk-stop--e { grid-area: e; align-self: center; }
  .mk-stop--w { grid-area: w; align-self: center; justify-self: end; text-align: right; }
}
.mk-ring-fig .fig__cap { margin-top: var(--s-3); }
@media (min-width: 1100px) {
  .mk-ring-fig { grid-column: 1 / span 7; }
  .mk-parts { grid-column: 8 / span 5; }
}

/* ---------- 3. The equipment ---------- */
.mk-floor__grid { row-gap: var(--s-6); }
.mk-floor__head, .mk-floor__table, .mk-quote { grid-column: 1 / -1; }
.mk-floor__head .t-h2 { margin-top: var(--s-5); }
.mk-floor__src { margin-top: var(--s-5); max-width: 40ch; font: 400 12px/1.55 var(--font-mono); color: var(--muted); }
.mk-floor__src .link { color: var(--ink); }
.mk-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--fs-data); line-height: 1.45; }
.mk-table thead th { padding: 0 var(--s-4) var(--s-3) 0; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; text-align: left; color: var(--muted); border-bottom: 1px solid var(--ink); }
.mk-table tbody th, .mk-table td { padding: var(--s-3) var(--s-4) var(--s-3) 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-strong); }
.mk-table tbody th { font-weight: 600; width: 55%; }
.mk-table td { font-weight: 400; }
.mk-quote { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line-strong); }
.mk-quote blockquote p { font-size: var(--fs-lead); line-height: 1.4; font-weight: 500; max-width: 36ch; text-wrap: balance; }
.mk-quote figcaption { margin-top: var(--s-3); color: var(--muted); }
@media (max-width: 767px) { .mk-table tbody th { width: auto; } .mk-table tbody th, .mk-table td { display: block; padding-right: 0; } .mk-table tbody th { border-bottom: 0; padding-bottom: 0; } .mk-table thead { display: none; } .mk-table tbody tr:first-child th { border-top: 1px solid var(--ink); padding-top: var(--s-3); } }
@media (min-width: 1100px) {
  .mk-floor__head { grid-column: 1 / span 4; }
  .mk-floor__table { grid-column: 6 / span 7; }
  .mk-quote { grid-column: 6 / span 7; }
}

/* ---------- 4. Who does what ---------- */
.mk-roles { display: grid; grid-template-columns: 1fr; border: 1px solid var(--line); }
.mk-role { position: relative; padding: var(--s-5); background: var(--sheet); border-bottom: 1px solid var(--line); }
.mk-role__no { font-size: var(--fs-label); letter-spacing: .08em; color: var(--muted); }
.mk-role__name { margin-top: var(--s-3); }
.mk-role__where { margin-top: var(--s-1); color: var(--muted); }
.mk-role__text { margin-top: var(--s-4); font-size: var(--fs-small); line-height: 1.55; max-width: 40ch; }
.mk-role--beyond { background: var(--hatch), var(--bench); border-bottom: 0; border-top: var(--w-bar) solid var(--ink); }
.mk-role--beyond > :not(.mk-role__handoff) { width: fit-content; max-width: 100%; background: var(--bench); padding-inline: 6px; margin-left: -6px; }
.mk-role__handoff { width: fit-content; margin: 0 0 var(--s-3) -6px; padding: 0 6px; background: var(--bench); color: var(--accent-ink); font-weight: 600; }
@media (min-width: 768px) {
  .mk-roles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); }
  .mk-role { border-bottom: 0; border-right: 1px solid var(--line); padding: var(--s-6) var(--s-5); }
  .mk-role--beyond { border-top: 0; border-right: 0; border-left: var(--w-bar) solid var(--ink); }
  .mk-role__handoff { position: absolute; right: calc(100% + var(--s-3)); top: var(--s-2); white-space: nowrap; background: none !important; padding: 0 !important; margin: 0 !important; }
}
.mk-who__note { margin-top: var(--s-4); font: 400 var(--fs-caption)/1.5 var(--font-mono); color: var(--muted); }
.mk-own { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-4); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); max-width: 80ch; }

/* ---------- 6. The shop clip ---------- */
.mk-clip__grid { row-gap: var(--s-6); align-items: start; }
.mk-clip__head, .mk-clip__fig { grid-column: 1 / -1; }
.mk-clip__head .t-h3 { margin-top: var(--s-5); max-width: 14ch; }
.mk-clip__text { margin-top: var(--s-4); max-width: 40ch; }
.mk-video { background: var(--dark); }
.mk-video__v { width: 100%; height: 100%; object-fit: cover; }
.mk-video__bar { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-3); }
.mk-video__bar .btn { min-width: 96px; min-height: 44px; }
.mk-video__btn::before { content: ''; width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.mk-video__btn[aria-pressed='true']::before { width: 9px; height: 11px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.mk-video__len { color: var(--muted); }
@media (min-width: 1100px) {
  .mk-clip__head { grid-column: 1 / span 4; }
  .mk-clip__fig { grid-column: 6 / span 7; }
}


/* ================================ PRINT ================================ */
@media print {
  .sv-jump, .sv-rows__scale, .sv-proof__thumb, .sv-cto__actions, .mk-clip, .mk-head__actions { display: none !important; }
  .sv-row, .sv-step, .sv-decide__list li, .mk-role, .mk-table tr { break-inside: avoid; }
  .sv-fit__col--not, .mk-role--beyond { background: #fff; }
  .sv-proof li { grid-template-columns: 1fr; }
  .acc details > div { display: block; }
}