/* HONEDIT-008 — service page components.
 *
 * A SEPARATE stylesheet, deliberately. It is enqueued only on service pages,
 * so the homepage carries none of this weight and nothing already live can be
 * affected by editing it. It defines new class names only; it overrides no
 * existing selector.
 *
 * It inherits every colour, font and radius token from site.css. There is no
 * second palette here.
 *
 * The two explanatory components — the layer stack and the decision matrix —
 * are HTML and CSS, NOT pictures of tables. That is a deliberate choice:
 *   * the labels stay real text, so they are legible at any size, selectable,
 *     searchable, translatable and reachable by a screen reader;
 *   * they reflow at phone width instead of becoming an unreadable sliver,
 *     which is exactly what a fixed-width SVG diagram does at 390px;
 *   * the matrix is a real <table>, so its row and column headers carry
 *     meaning rather than being visual alignment.
 */

/* --------------------------------------------------- accessible gold label
 * The brand gold --gold (#bd945f) measures 2.39-2.75:1 against these light
 * panels. That is fine for a rule or an icon, and fails WCAG 2.1 AA (4.5:1)
 * for the small uppercase labels used here. --gold-text is the same hue and
 * saturation, darkened until every background in this stylesheet clears AA:
 *   paper 5.25 : panel 4.69 : pivot 4.56 : ivory 4.90 : highlighted cell 4.80
 * Use --gold for decoration, --gold-text for anything a person must read.
 */
:root {
	/* Defined in site.css as well, so the token exists on pages that do not
	   load this file (the header and footer use it too). Repeated here with
	   the same value so this stylesheet stays readable on its own. */
	--gold-text: #886538;
}

/* ------------------------------------------------------------- page rhythm
 * site.css gives .section 86px of vertical padding, tuned for the homepage's
 * large atmospheric panels. Service pages are denser and read as one
 * continuous argument, so they take a tighter rhythm — and a much tighter one
 * on a phone, where 86px top and bottom across nine sections is over 1500px
 * of scrolling that carries no information.
 */
.service .section {
	padding: 68px 0;
}

/* ---------------------------------------------------------------- page head */
.svc-hero {
	padding: 54px 0 10px;
}
.svc-hero h1 {
	font-size: clamp(31px, 4.4vw, 56px);
	line-height: 1.06;
	letter-spacing: -.02em;
	margin: 14px 0 0;
	max-width: 19ch;
	font-weight: 500;
}
.svc-hero .svc-lede {
	margin: 20px 0 0;
	max-width: 62ch;
	font-size: clamp(14.5px, 1.25vw, 17px);
	line-height: 1.72;
	color: var(--muted);
}
.svc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-top: 30px;
}

/* --------------------------------------------------------------- key points */
.svc-keys {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(214px, 1fr));
	gap: 14px;
	margin-top: 40px;
	padding: 0;
	list-style: none;
}
.svc-keys li {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 15px 17px 16px;
}
.svc-keys b {
	display: block;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold-text);
	font-weight: 500;
	margin-bottom: 9px;
}
.svc-keys span {
	font-size: 13px;
	line-height: 1.7;
	color: var(--muted);
}

/* ------------------------------------------------------- the layer stack */
.svc-stack {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	/* Capped so the row width stays close to the prose measure inside it.
	   At the full 1216px wrap the right third of every row sat empty. */
	max-width: 1040px;
}
.svc-layer {
	display: grid;
	grid-template-columns: 196px minmax(0, 1fr);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 16px;
	overflow: hidden;
}
.svc-layer > dt {
	background: var(--panel);
	border-right: 1px solid var(--line);
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	justify-content: center;
}
.svc-layer > dt strong {
	font-family: var(--serif);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -.01em;
	line-height: 1.2;
}
.svc-layer > dt .svc-owner {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold-text);
}
.svc-layer > dd {
	margin: 0;
	padding: 18px 22px 20px;
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.svc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.svc-chips li {
	font-family: var(--mono);
	font-size: 11.5px;
	line-height: 1;
	padding: 8px 13px;
	border: 1px solid var(--hairline);
	border-radius: 999px;
	background: var(--ivory);
	color: var(--graphite);
}
.svc-layer > dd p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.75;
	color: var(--muted);
	max-width: 84ch;
}
/* the layer where the colocation / hosted-VM decision actually sits */
.svc-layer.is-pivot {
	border-color: var(--gold);
}
.svc-layer.is-pivot > dt {
	background: #f6edde;
}

/* ------------------------------------------------------- decision matrix */
.svc-matrix-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* border-spacing adds 8px of gutter outside the first/last cell; pull it
	   back here rather than with a negative margin on the table, which dragged
	   the caption up into the section intro above it. */
	margin-inline: -8px;
}
.svc-matrix {
	width: 100%;
	border-collapse: separate;
	border-spacing: 8px;
	margin: 0;
	font-size: 13px;
}
.svc-matrix caption {
	text-align: left;
	caption-side: top;
	padding: 0 8px 16px;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--muted);
}
.svc-matrix th,
.svc-matrix td {
	vertical-align: top;
	padding: 15px 17px;
	border: 1px solid var(--line);
	border-radius: 13px;
	text-align: left;
	line-height: 1.65;
}
.svc-matrix thead th {
	background: var(--panel);
	font-family: var(--serif);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -.01em;
}
.svc-matrix thead th:first-child {
	background: none;
	border: 0;
}
.svc-matrix tbody th {
	background: var(--panel);
	font-weight: 500;
	font-size: 12.5px;
	width: 26%;
}
.svc-matrix tbody td {
	background: var(--paper);
	color: var(--muted);
	font-size: 12.5px;
}
.svc-matrix tbody td.is-fit {
	background: #f9f3e9;
	border-color: var(--gold-soft);
	color: var(--ink);
}

.svc-aside {
	margin: 16px 0 0;
	max-width: 84ch;
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--muted);
}

/* ------------------------------------------------------------- the steps */
.svc-steps {
	display: grid;
	/* Fixed three-up rather than auto-fit: six steps auto-fitted to 1440px
	   wrap 5 + 1 and orphan the last card. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}
.svc-steps li {
	position: relative;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 19px 20px 20px;
	counter-increment: step;
}
.svc-steps li::before {
	content: counter(step);
	display: grid;
	place-items: center;
	width: 25px;
	height: 25px;
	border-radius: 999px;
	border: 1.5px solid var(--gold);
	color: var(--gold-text);
	font-family: var(--serif);
	font-size: 13px;
	margin-bottom: 14px;
}
.svc-steps h3 {
	font-size: 16px;
	font-weight: 500;
	margin: 0 0 8px;
	letter-spacing: -.01em;
}
.svc-steps p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.75;
	color: var(--muted);
}

/* ------------------------------------------------------ two-column prose */
.svc-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 16px;
}
.svc-note {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 22px 24px 24px;
}
.svc-note.is-boundary {
	background: var(--panel);
}
.svc-note h3 {
	font-size: 17px;
	font-weight: 500;
	margin: 0 0 12px;
	letter-spacing: -.01em;
}
.svc-note ul {
	margin: 0;
	padding-left: 19px;
}
.svc-note li {
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--muted);
	margin-bottom: 7px;
}
.svc-note li:last-child {
	margin-bottom: 0;
}
.svc-note > p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--muted);
}

/* ------------------------------------------------- image placement slots */
.svc-figure {
	margin: 0;
	max-width: 1040px;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--panel);
}
.svc-figure img {
	display: block;
	width: 100%;
	height: auto;
}
.svc-figure figcaption {
	padding: 12px 18px 14px;
	font-size: 11.5px;
	line-height: 1.65;
	color: var(--faint);
	font-family: var(--mono);
}
/* An unfilled slot. It states its own purpose so a missing photograph can
   never be mistaken for a design choice, and it reserves the real aspect
   ratio so the layout is verified at the dimensions the photograph will use. */
.svc-figure.is-placeholder .svc-slot {
	aspect-ratio: 16 / 9;
	display: grid;
	place-content: center;
	gap: 7px;
	text-align: center;
	padding: 24px;
	background:
		repeating-linear-gradient(-45deg, var(--ivory) 0 11px, var(--panel) 11px 22px);
}
.svc-figure.is-placeholder .svc-slot b {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold-text);
	font-weight: 500;
}
.svc-figure.is-placeholder .svc-slot span {
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--muted);
	max-width: 46ch;
}
.svc-figure.is-portrait .svc-slot {
	aspect-ratio: 3 / 2;
}

/* ------------------------------------------------------------- closing cta */
.svc-close {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 20px;
	padding: 46px 46px 50px;
	text-align: center;
}
.svc-close h2 {
	font-size: clamp(25px, 2.7vw, 38px);
	font-weight: 500;
	margin: 0 0 14px;
	letter-spacing: -.02em;
}
.svc-close p {
	margin: 0 auto;
	max-width: 54ch;
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--muted);
}
.svc-close .svc-actions {
	justify-content: center;
}

/* ================================================================ RESPONSIVE
 * The layer stack and the matrix are the two components that would otherwise
 * break on a phone. Both reflow rather than scroll.
 */
@media (max-width: 1100px) {
	.svc-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.svc-layer {
		grid-template-columns: 1fr;
	}
	.svc-layer > dt {
		border-right: 0;
		border-bottom: 1px solid var(--line);
		flex-direction: row;
		align-items: baseline;
		gap: 12px;
		padding: 15px 18px;
	}
	.svc-layer > dd {
		padding: 13px 16px 15px;
		gap: 9px;
	}
	.svc-close {
		padding: 36px 24px 38px;
	}
}

@media (max-width: 620px) {
	.svc-steps {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 374px) {
	.svc-keys {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 700px) {
	.service .section {
		padding: 40px 0;
	}
	/* Two key cards per row rather than four stacked: the text is short, and
	   four full-width cards pushed the first real section a screen further
	   down on a phone. */
	.svc-keys {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		margin-top: 26px;
	}
	.svc-keys li {
		padding: 13px 14px 14px;
	}
	.svc-keys span {
		font-size: 12.5px;
		line-height: 1.6;
	}
	/* The matrix becomes one labelled card per option, so every cell keeps its
	   column heading next to it instead of relying on a header row that has
	   scrolled out of view. */
	.svc-matrix,
	.svc-matrix caption,
	.svc-matrix thead,
	.svc-matrix tbody,
	.svc-matrix tr,
	.svc-matrix th,
	.svc-matrix td {
		display: block;
	}
	/* Without an explicit display:block the caption shrink-wraps to the
	   narrowest word once the table itself stops being a table. */
	.svc-matrix caption {
		width: 100%;
		padding: 0 0 14px;
	}
	.svc-matrix {
		border-spacing: 0;
		margin: 0;
	}
	.svc-matrix thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.svc-matrix tbody tr {
		border: 1px solid var(--line);
		border-radius: 16px;
		overflow: hidden;
		margin-bottom: 10px;
		background: var(--paper);
	}
	.svc-matrix tbody th {
		width: auto;
		border: 0;
		border-bottom: 1px solid var(--line);
		border-radius: 0;
		font-family: var(--serif);
		font-size: 15px;
		padding: 11px 16px;
	}
	.svc-matrix tbody td {
		border: 0;
		border-radius: 0;
		padding: 10px 16px 11px;
		border-bottom: 1px solid var(--hairline);
	}
	.svc-matrix tbody td::before {
		margin-bottom: 4px;
	}
	.svc-matrix tbody td:last-child {
		border-bottom: 0;
	}
	.svc-matrix tbody td::before {
		content: attr(data-col);
		display: block;
		font-family: var(--mono);
		font-size: 11px;
		letter-spacing: .13em;
		text-transform: uppercase;
		color: var(--gold-text);
		margin-bottom: 6px;
	}
	.svc-matrix tbody td.is-fit {
		background: #f9f3e9;
	}
	.svc-hero {
		padding-top: 34px;
	}
	.svc-keys {
		margin-top: 30px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.svc-layer,
	.svc-steps li,
	.svc-note {
		transition: border-color .25s ease;
	}
}

/* =========================================================== escalation flow
 * An ordered list, not a swimlane picture. Each step names the owner, so the
 * relationship survives at any width and is read correctly by a screen reader
 * — a horizontal swimlane diagram loses both on a phone.
 */
.svc-flow {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: flowstep;
	max-width: 1040px;
}
.svc-flow li {
	display: grid;
	grid-template-columns: 40px 196px minmax(0, 1fr);
	align-items: start;
	gap: 0;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 16px;
	overflow: hidden;
	counter-increment: flowstep;
}
.svc-flow li > .svc-flow-n {
	display: grid;
	place-items: center;
	align-self: stretch;
	background: var(--panel);
	border-right: 1px solid var(--line);
	font-family: var(--serif);
	font-size: 14px;
	color: var(--gold-text);
}
.svc-flow li > .svc-flow-n::before {
	content: counter(flowstep);
}
.svc-flow .svc-flow-who {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	padding: 16px 18px;
	border-right: 1px solid var(--hairline);
}
.svc-flow .svc-flow-who strong {
	font-family: var(--serif);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.25;
}
.svc-flow .svc-flow-who span {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold-text);
}
.svc-flow .svc-flow-body {
	padding: 16px 20px 17px;
}
.svc-flow .svc-flow-body p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.75;
	color: var(--muted);
	max-width: 84ch;
}
.svc-flow li.is-return {
	border-color: var(--gold);
}
.svc-flow li.is-return > .svc-flow-n {
	background: #f6edde;
}

/* ============================================================== blueprint
 * Shared platform underneath, separated tenants above, and an explicit
 * boundary rule between what is operated and what is owned.
 */
.svc-bp {
	max-width: 1040px;
}
.svc-bp-band {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 16px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
	gap: 10px;
}
.svc-bp-band > div {
	background: var(--paper);
	border: 1px solid var(--hairline);
	border-radius: 11px;
	padding: 13px 15px 14px;
}
.svc-bp-band strong {
	display: block;
	font-family: var(--serif);
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 4px;
}
.svc-bp-band span {
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--faint);
}
.svc-bp-tenants {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
	gap: 12px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}
.svc-bp-tenants > li {
	border: 1px dashed var(--gold);
	border-radius: 16px;
	background: var(--ivory);
	padding: 16px 18px 18px;
}
.svc-bp-tenants h3 {
	margin: 0 0 3px;
	font-family: var(--serif);
	font-size: 15px;
	font-weight: 500;
}
.svc-bp-tenants > li > p {
	margin: 0 0 11px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gold-text);
}
.svc-bp-tenants ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 7px;
}
.svc-bp-tenants ul li {
	background: var(--paper);
	border: 1px solid var(--hairline);
	border-radius: 10px;
	padding: 9px 12px;
	font-family: var(--mono);
	font-size: 11.5px;
	color: var(--graphite);
}
.svc-bp-rule {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 20px 0 14px;
}
.svc-bp-rule::before,
.svc-bp-rule::after {
	content: "";
	flex: 1 1 auto;
	border-top: 2px dashed var(--gold);
}
.svc-bp-rule span {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold-text);
	white-space: nowrap;
}

@media (max-width: 760px) {
	.svc-flow li {
		grid-template-columns: 34px minmax(0, 1fr);
	}
	.svc-flow .svc-flow-who {
		border-right: 0;
		border-bottom: 1px solid var(--hairline);
		flex-direction: row;
		align-items: baseline;
		gap: 10px;
		padding: 12px 16px;
	}
	.svc-flow .svc-flow-body {
		grid-column: 2;
		padding: 13px 16px 14px;
	}
	.svc-flow li > .svc-flow-n {
		grid-row: 1 / span 2;
	}
	.svc-bp-rule {
		margin: 16px 0 12px;
	}
	.svc-bp-rule span {
		font-size: 11px;
		letter-spacing: .06em;
	}
}

/* ================================================================= figures
 * Page figures are vector, served as <img>. The width/height attributes plus
 * height:auto give the browser the intrinsic ratio, so nothing shifts while
 * they load. None sits above the fold, so all are lazy-loaded; the
 * do-not-lazy-load-the-hero-image rule does not apply because there is no
 * above-fold image on these pages.
 */
.svc-fig {
	margin: 0;
	max-width: 660px;
}
.svc-fig img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--ivory);
}
.svc-fig figcaption {
	margin-top: 11px;
	font-size: 12px;
	line-height: 1.7;
	color: var(--muted);
	max-width: 66ch;
}
.svc-fig-row {
	display: grid;
	grid-template-columns: minmax(0, 660px) minmax(240px, 1fr);
	gap: 28px;
	align-items: start;
}
.svc-fig-row .svc-fig-note h3 {
	font-size: 16px;
	font-weight: 500;
	margin: 0 0 10px;
	letter-spacing: -.01em;
}
.svc-fig-row .svc-fig-note p {
	margin: 0 0 11px;
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--muted);
}
.svc-fig-row .svc-fig-note p:last-child {
	margin-bottom: 0;
}
@media (max-width: 900px) {
	.svc-fig-row {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* =============================================== rack elevation (HONEDIT-009C)
 * Replaces a fixed-width SVG. A rack is a vertical stack of labelled units, so
 * an ordered list is both the honest markup and the responsive one: the text
 * reflows, inherits the page font size, honours user text scaling and is
 * reachable by assistive technology. The previous SVG rendered its 9px labels
 * at 4.9px on a 390px phone.
 */
.svc-rack {
	max-width: 560px;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--panel);
	padding: 12px;
	display: grid;
	gap: 5px;
}
.svc-rack > li {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	background: var(--paper);
	border: 1px solid var(--hairline);
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 13px;
	line-height: 1.4;
}
.svc-rack > li .svc-u {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .08em;
	color: var(--faint);
}
.svc-rack > li.is-yours {
	background: #f6edde;
	border-color: var(--gold);
}
.svc-rack > li.is-yours .svc-tag {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold-text);
}
.svc-rack > li.is-empty {
	background: transparent;
	border-style: dashed;
	border-color: var(--hairline);
	color: var(--faint);
	font-size: 11.5px;
	padding: 7px 14px;
}
.svc-rack-note {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.7;
	color: var(--muted);
	max-width: 560px;
}
@media (max-width: 560px) {
	.svc-rack > li {
		grid-template-columns: 50px minmax(0, 1fr);
		row-gap: 2px;
	}
	.svc-rack > li.is-yours .svc-tag {
		grid-column: 2;
	}
}

/* A figure that contains a component rather than an image. */
.svc-fig.is-component {
	max-width: 660px;
}
.svc-fig.is-component figcaption {
	margin-top: 13px;
}

/* ==================================================== photography (009C)
 * Licensed CC0 photography, self-hosted. Two widths per image through
 * srcset so a phone does not fetch a desktop file; width/height declared so
 * the box is reserved before the bytes arrive. None sits above the fold, so
 * all are lazy-loaded.
 */
.svc-photo {
	margin: 0 0 26px;
	max-width: 1040px;
}
.svc-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
	border: 1px solid var(--line);
}
.svc-photo figcaption {
	margin-top: 10px;
	font-size: 11.5px;
	line-height: 1.65;
	color: var(--faint);
	max-width: 68ch;
}
.svc-photo.is-band img {
	aspect-ratio: 1040 / 420;
	object-fit: cover;
	object-position: center 42%;
}

/* ============================================= in-page contents (009C)
 * A compact jump list for the longest page. It sits in normal flow rather
 * than sticking to the viewport, so it cannot cover content, the header or a
 * focus target on a phone. Real anchors; scroll-margin on the headings keeps
 * a jumped-to section clear of the sticky site header.
 */
.svc-toc {
	max-width: 1040px;
	margin: 26px 0 0;
	padding: 16px 20px 18px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--paper);
}
.svc-toc h2 {
	margin: 0 0 11px;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold-text);
}
.svc-toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}
.svc-toc a {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--hairline);
	border-radius: 999px;
	background: var(--ivory);
	font-size: 12.5px;
	line-height: 1.3;
	color: var(--ink);
}
.svc-toc a:hover {
	background: var(--panel);
	text-decoration: none;
}
.svc-toc a:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}
/* clear the sticky header when a jump lands */
.service .section[id] {
	scroll-margin-top: 92px;
}
@media (max-width: 700px) {
	.svc-toc {
		padding: 14px 16px 16px;
		margin-top: 22px;
	}
	.svc-toc a {
		padding: 9px 13px;
		font-size: 12.5px;
	}
	.service .section[id] {
		scroll-margin-top: 74px;
	}
}