/* site/src/assets/css/page-services.css
 * Everything /services needs and nothing another page does. Loaded only by
 * that page, so the names here are free to be page specific.
 *
 * The page's one idea is the chit: a till receipt that prints the visitor's
 * brief as they tick, with the price line deliberately empty. The four
 * service cards, the stall menu board in the hero and the thermal paper all
 * belong to that one joke, which is also the studio's actual pricing policy —
 * scoped, then quoted, then built.
 *
 * Order: page tokens, hero, the builder, cards, options, the chit, terms, end.
 */

/* Page local shades. Kept out of site.css because only this page needs a
   thermal paper colour and a printer body. Scoped to the builder, which holds
   every rule that reads them, rather than :root, so nothing here can reach
   the shared nav or footer. */
.svc-build {
	--chit-paper: #fffdf6;
	--chit-edge: #efe7d6;
	--chit-ink: #1a1a22;
	--chit-faint: #6f6a5e;
	--printer: #16161d;
	--svc-card-bg: #ffffff;
}

/* ── hero ────────────────────────────────────────────────────────────── */
.svc-hero {
	background: var(--ink);
	color: var(--paper);
	padding: clamp(110px, 18vh, 200px) var(--gutter) clamp(60px, 10vh, 110px);
	position: relative;
	overflow: hidden;
}

/* A single soft wash so the dark band is not flat. Static: this page spends
   its motion budget on the printer, not the background. */
.svc-hero::before {
	content: '';
	position: absolute; inset: -30% -10% auto -10%; height: 80vh;
	background:
		radial-gradient(36vw 36vw at 18% 20%, rgba(255, 176, 32, .26), transparent 70%),
		radial-gradient(34vw 34vw at 82% 8%, rgba(0, 217, 184, .24), transparent 70%);
	filter: blur(40px);
	pointer-events: none;
}

.svc-hero__inner { position: relative; max-width: var(--wide); margin: 0 auto; display: grid; gap: clamp(20px, 3.5vh, 38px); }
.svc-hero__label { color: var(--amber); }

.svc-hero__h1 {
	font: 800 clamp(32px, 8.4vw, 116px)/.92 var(--display);
	letter-spacing: -.045em;
	max-width: 16ch;
}
.svc-hero__h1 em { font-style: normal; color: var(--teal); }

.svc-hero__sub {
	max-width: 54ch;
	color: rgba(251, 249, 244, .74);
	font-size: clamp(15px, 1.2vw, 19px);
}

/* The menu board. Every row is a link to the card it names, so the board is
   navigation as well as a joke about the price column. */
.svc-board {
	list-style: none;
	max-width: 660px;
	border-top: 1px solid rgba(251, 249, 244, .18);
}
.svc-board li { border-bottom: 1px solid rgba(251, 249, 244, .18); }
.svc-board a {
	display: flex; align-items: baseline; gap: 12px;
	min-height: 56px; padding: 12px 0;
	text-decoration: none;
	transition: color .2s, padding .2s;
}
.svc-board a:hover { padding-left: 10px; }
.svc-board__n { font: 500 12px/1 var(--mono); letter-spacing: .14em; color: rgba(251, 249, 244, .45); }
.svc-board__name {
	font: 700 clamp(20px, 3.4vw, 40px)/1 var(--display);
	letter-spacing: -.03em;
}
.svc-board__dots { flex: 1; min-width: 20px; border-bottom: 2px dotted rgba(251, 249, 244, .3); transform: translateY(-5px); }
.svc-board__price {
	font: 500 clamp(12px, 1.1vw, 15px)/1 var(--mono);
	letter-spacing: .14em; text-transform: uppercase;
	color: rgba(251, 249, 244, .55);
	transition: color .2s;
}
.svc-board li:nth-child(1) a:hover .svc-board__price { color: var(--teal); }
.svc-board li:nth-child(2) a:hover .svc-board__price { color: var(--blue); }
.svc-board li:nth-child(3) a:hover .svc-board__price { color: var(--pink); }
.svc-board li:nth-child(4) a:hover .svc-board__price { color: var(--amber); }

.svc-hero__foot { color: rgba(251, 249, 244, .6); font-size: 15px; }
.svc-hero__foot a { color: var(--teal); }

/* ── the builder ─────────────────────────────────────────────────────── */
.svc-build {
	background: var(--paper);
	padding: clamp(56px, 9vh, 120px) var(--gutter) clamp(60px, 10vh, 130px);
}

.svc-build__head { max-width: var(--wide); margin: 0 auto clamp(26px, 5vh, 54px); display: grid; gap: 12px; }
.svc-build__head .label { color: #a8642a; }
.svc-build__head h2 {
	font: 800 clamp(28px, 5vw, 76px)/.96 var(--display);
	letter-spacing: -.04em;
	max-width: 18ch;
}
.svc-build__sub { color: var(--ink-soft); max-width: 52ch; }

.svc-grid {
	max-width: var(--wide); margin: 0 auto;
	display: grid; gap: clamp(28px, 4vw, 54px);
}
.svc-col { display: grid; gap: clamp(20px, 3vw, 34px); min-width: 0; }
.svc-cards { display: grid; gap: clamp(16px, 2.4vw, 26px); }

@media (min-width: 1000px) {
	.svc-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); align-items: start; }
	/* The chit follows you down the cards, because the whole point is
	   watching it fill while you choose. */
	.svc-chitwrap { position: sticky; top: 88px; }
}

/* ── service cards ───────────────────────────────────────────────────── */
.svc-card {
	--c: var(--teal);
	position: relative;
	background: var(--svc-card-bg);
	border: 1px solid var(--line);
	border-left: 6px solid var(--c);
	border-radius: 16px;
	padding: clamp(18px, 2.6vw, 34px);
	display: grid; gap: 14px;
	scroll-margin-top: 90px; /* the fixed nav must not sit on the heading */
	transition: box-shadow .25s, transform .25s;
}
.svc-card--teal { --c: var(--teal); }
.svc-card--blue { --c: var(--blue); }
.svc-card--pink { --c: var(--pink); }
.svc-card--amber { --c: var(--amber); }

.svc-card:has(:checked) {
	box-shadow: 0 0 0 3px var(--c), 0 18px 40px rgba(10, 10, 15, .12);
	transform: translateY(-2px);
}

/* The rubber stamp. Slams down when the card goes on the chit. */
.svc-card::after {
	content: 'Added';
	position: absolute; right: clamp(10px, 2vw, 22px); top: clamp(10px, 2vw, 20px);
	font: 700 clamp(12px, 1.4vw, 17px)/1 var(--mono);
	letter-spacing: .22em; text-transform: uppercase;
	color: var(--c);
	border: 3px solid var(--c);
	border-radius: 6px;
	padding: 7px 10px 6px;
	opacity: 0;
	transform: rotate(-11deg) scale(1.6);
	transition: opacity .16s ease-out, transform .16s cubic-bezier(.2, 1.6, .5, 1);
	pointer-events: none;
}
.svc-card:has(:checked)::after { opacity: .92; transform: rotate(-11deg) scale(1); }

.svc-card__n { color: var(--c); filter: brightness(.75); }
.svc-card h3 {
	font: 700 clamp(21px, 2.6vw, 34px)/1.04 var(--display);
	letter-spacing: -.03em;
	max-width: 20ch;
}
.svc-card__what { color: var(--ink-soft); max-width: 58ch; }

.svc-card__cols {
	display: grid; gap: 18px clamp(20px, 3vw, 40px);
	padding-top: 4px;
	border-top: 1px dashed var(--line);
}
@media (min-width: 620px) { .svc-card__cols { grid-template-columns: 1.1fr 1fr; } }
.svc-card__cols .label { color: var(--ink-soft); display: block; margin: 14px 0 8px; }
.svc-card__cols ul { list-style: none; display: grid; gap: 6px; }
.svc-card__cols li { position: relative; padding-left: 20px; font-size: 15px; }
.svc-card__cols li::before {
	content: ''; position: absolute; left: 0; top: .55em;
	width: 9px; height: 2px; background: var(--c);
}
.svc-card__cols p { font-size: 15px; color: var(--ink-soft); }

/* Add to brief: a big stamp of a button made from a real checkbox. */
.svc-add {
	justify-self: start;
	position: relative;
	display: inline-flex; align-items: center; gap: 12px;
	min-height: 48px; padding: 10px 20px 10px 14px;
	border: 2px solid var(--ink);
	border-radius: 999px;
	font: 500 14px/1 var(--mono);
	letter-spacing: .1em; text-transform: uppercase;
	cursor: pointer;
	background: transparent;
	transition: background .2s, color .2s, transform .15s;
}
.svc-add:hover { transform: translateY(-1px); }
.svc-add:has(:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.svc-add__box {
	width: 20px; height: 20px; border-radius: 5px;
	border: 2px solid currentColor;
	display: grid; place-items: center;
	flex: none;
}
.svc-add:has(:checked) .svc-add__box { background: var(--c); border-color: var(--c); }
.svc-add:has(:checked) .svc-add__box::after {
	content: ''; width: 10px; height: 6px;
	border: 2px solid var(--ink); border-top: 0; border-right: 0;
	transform: rotate(-45deg) translate(1px, -1px);
}

.svc-add__text[data-on] { display: none; }
.svc-add:has(:checked) .svc-add__text[data-off] { display: none; }
.svc-add:has(:checked) .svc-add__text[data-on] { display: inline; }

/* ── option groups ───────────────────────────────────────────────────── */
.svc-set {
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: clamp(16px, 2.4vw, 28px);
	background: #fffdfa;
	min-width: 0;
}
.svc-set__legend {
	font: 700 clamp(18px, 2vw, 26px)/1.1 var(--display);
	letter-spacing: -.025em;
	padding: 0 10px;
	margin-left: -4px;
	/* A legend sits on the fieldset's top border, so a long one wrapping to a
	   second line would have the border drawn straight through it. Painting the
	   fieldset's own background behind the words hides that at any width or
	   text size. */
	background: #fffdfa;
}
.svc-set__note { color: var(--ink-soft); font-size: 15px; margin: 10px 0 16px; max-width: 52ch; }

/* Three short question groups. Two across, and the third stretches over both
   rather than sitting alone in a half empty row — squeezing three narrow
   columns in instead made every answer wrap to three lines. */
.svc-sets { display: grid; gap: clamp(16px, 2.4vw, 26px); }
@media (min-width: 620px) {
	.svc-sets { grid-template-columns: 1fr 1fr; }
	.svc-sets > .svc-set:last-child { grid-column: 1 / -1; }
	.svc-sets > .svc-set:last-child .svc-opts--tight {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
	}
}

.svc-opts { display: grid; gap: 10px; margin-top: 14px; }
@media (min-width: 560px) { .svc-opts { grid-template-columns: 1fr 1fr; } }
.svc-opts--tight { grid-template-columns: 1fr; }
@media (min-width: 560px) { .svc-opts--tight { grid-template-columns: 1fr; } }

.svc-opt {
	position: relative;
	display: grid; gap: 2px;
	align-content: center;
	min-height: 52px;
	padding: 11px 14px 11px 40px;
	border: 1px solid var(--line);
	border-radius: 10px;
	cursor: pointer;
	background: #fff;
	transition: border-color .18s, background .18s;
}
.svc-opt span { font-weight: 600; font-size: 15px; }
.svc-opt small { font: 400 12px/1.3 var(--mono); color: var(--chit-faint); }

/* The mark. A square for a checkbox, a disc for a radio — the shape is the
   only hint that one group is multi choice and the other is not. */
.svc-opt::before {
	content: '';
	position: absolute; left: 13px; top: 50%;
	width: 16px; height: 16px;
	margin-top: -8px;
	border: 2px solid var(--ink-soft);
	border-radius: 4px;
	transition: background .18s, border-color .18s;
}
.svc-opt:has(input[type="radio"])::before { border-radius: 50%; }
.svc-opt:has(:checked) { border-color: var(--ink); background: #fff7e6; }
.svc-opt:has(:checked)::before { background: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--chit-paper); }

.svc-opt input, .svc-add input {
	position: absolute; opacity: 0;
	width: 1px; height: 1px; margin: 0;
	pointer-events: none;
}

.svc-opt:has(:focus-visible), .svc-add:has(:focus-visible) {
	outline: 3px solid var(--blue);
	outline-offset: 3px;
}

/* Without :has support the controls are shown as themselves rather than
   left invisible and unusable. Plainer, but it works. */
@supports not selector(:has(*)) {
	.svc-opt input, .svc-add input {
		position: static; opacity: 1; width: auto; height: auto;
		pointer-events: auto; margin-right: 8px;
	}
	.svc-opt { padding-left: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
	.svc-opt::before { display: none; }
	.svc-add__text[data-on] { display: none; }
	.svc-card::after { display: none; }
}

/* ── the chit ────────────────────────────────────────────────────────── */
.chit { min-width: 0; }

.chit__printer {
	position: relative;
	display: flex; align-items: center; gap: 10px;
	background: linear-gradient(#25252f, var(--printer));
	border-radius: 12px 12px 4px 4px;
	padding: 13px 16px 20px;
	box-shadow: 0 10px 26px rgba(10, 10, 15, .28);
	z-index: 2;
}
.chit__led {
	width: 9px; height: 9px; border-radius: 50%;
	background: #55555f;
	flex: none;
}
/* Only breathes while the chit is on screen and the tab is in front. */
.chit[data-live] .chit__led {
	background: var(--teal);
	box-shadow: 0 0 12px var(--teal);
	animation: chit-led 2.4s ease-in-out infinite;
}
@keyframes chit-led { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.chit__brand {
	font: 500 11px/1 var(--mono);
	letter-spacing: .18em; text-transform: uppercase;
	color: rgba(251, 249, 244, .6);
}
.chit__slot {
	position: absolute; left: 14px; right: 14px; bottom: 7px; height: 6px;
	border-radius: 99px;
	background: #05050a;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .9);
}

.chit__paper {
	position: relative;
	margin: -4px 8px 22px;
	background: var(--chit-paper);
	color: var(--chit-ink);
	padding: clamp(18px, 2.4vw, 26px) clamp(16px, 2.2vw, 24px) clamp(20px, 2.6vw, 28px);
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1.5;
	box-shadow: 0 16px 34px rgba(60, 45, 20, .18);
	overflow: hidden;
	/* Thermal paper: fibres, plus the faint grey the roll picks up at the
	   edges from the printer's rollers. */
	background-image:
		repeating-linear-gradient(0deg, rgba(120, 110, 90, .045) 0 1px, transparent 1px 4px),
		linear-gradient(90deg, var(--chit-edge), var(--chit-paper) 8%, var(--chit-paper) 92%, var(--chit-edge));
}

/* The torn bottom edge: one downward triangle per 20px tile. */
.chit__paper::after {
	content: '';
	position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
	background: conic-gradient(from 135deg at 50% 0, var(--chit-paper) 0 90deg, transparent 0) 0 0 / 20px 10px repeat-x;
	filter: drop-shadow(0 3px 4px rgba(60, 45, 20, .16));
}

/* The print head: sweeps once whenever a line is added or removed. */
.chit__head {
	position: absolute; left: 0; right: 0; top: 0; height: 3px;
	background: linear-gradient(90deg, transparent, var(--teal), transparent);
	opacity: 0;
	pointer-events: none;
}
.chit__paper[data-printing] .chit__head { animation: chit-sweep .4s linear 1; }
@keyframes chit-sweep {
	0% { opacity: .9; transform: translateX(-100%); }
	100% { opacity: 0; transform: translateX(100%); }
}

.chit__top { text-align: center; display: grid; gap: 3px; }
.chit__title {
	font: 700 17px/1.2 var(--mono);
	letter-spacing: .22em; text-transform: uppercase;
}
.chit__where { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--chit-faint); }
.chit__warn { font-size: 11px; letter-spacing: .06em; color: var(--chit-faint); }

.chit__rule {
	border: 0; border-top: 2px dashed rgba(26, 26, 34, .28);
	margin: 12px 0;
}

.chit__lines { list-style: none; display: grid; gap: 4px; }
/* The paper is about 300px wide on a phone, so a long line wraps rather than
   pushing the price column off the roll. */
.chit__lines li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.chit__lines li.is-new { animation: chit-print .34s steps(18, end) both; }
@keyframes chit-print {
	from { clip-path: inset(0 100% 0 0); opacity: .45; }
	to { clip-path: inset(0 0 0 0); opacity: 1; }
}

.chit__empty { display: block !important; color: var(--chit-faint); font-size: 12px; }
.chit__lines li[data-kind="scope"] { padding-left: 14px; color: var(--chit-faint); }
.chit__lines li[data-kind="scope"] .chit__k::before { content: '+ '; }

.chit__k { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; overflow-wrap: anywhere; }
.chit__v { font-size: 12px; letter-spacing: .06em; white-space: nowrap; }
.chit__dots { flex: 1; min-width: 8px; border-bottom: 1px dotted rgba(26, 26, 34, .4); transform: translateY(-3px); }

.chit__meta { display: grid; gap: 4px; }
.chit__meta > div { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.chit__meta dt { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: var(--chit-faint); flex: none; }
.chit__meta dd { font-size: 12px; text-align: right; }

.chit__total { display: flex; align-items: baseline; gap: 6px; }
.chit__total .chit__k { font-weight: 700; font-size: 14px; }
.chit__total .chit__v { font-weight: 700; color: #b0410f; white-space: normal; text-align: right; }

.chit__note { font-size: 11.5px; line-height: 1.55; color: var(--chit-faint); margin: 12px 0 16px; }

.chit__tear {
	display: block; width: 100%;
	min-height: 52px;
	border: 0; border-radius: 8px;
	background: var(--ink); color: var(--paper);
	font: 600 13px/1 var(--mono);
	letter-spacing: .16em; text-transform: uppercase;
	cursor: pointer;
	transition: background .2s, transform .15s;
}
.chit__tear:hover { background: #22222c; transform: translateY(-1px); }

.chit__clear {
	display: block; width: 100%;
	min-height: 44px; margin-top: 6px;
	border: 0; background: transparent;
	color: var(--chit-faint);
	font: 500 11px/1 var(--mono);
	letter-spacing: .14em; text-transform: uppercase;
	text-decoration: underline;
	cursor: pointer;
}
.chit__clear:hover { color: var(--chit-ink); }

.chit__status {
	margin-top: 12px;
	font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--chit-faint);
	text-align: center;
	min-height: 1.4em;
}

/* Bars, not a real barcode — nothing here encodes anything and no scanner
   would read it. This gradient is the resting pattern; services.js redraws the
   bars inline from whatever is ticked, so the chit looks different each time. */
.chit__code {
	display: block; height: 30px; margin-top: 12px;
	background-color: transparent;
	background-image: repeating-linear-gradient(90deg,
		var(--chit-ink) 0 2px, transparent 2px 5px,
		var(--chit-ink) 5px 6px, transparent 6px 10px,
		var(--chit-ink) 10px 13px, transparent 13px 15px);
	opacity: .7;
	transition: opacity .3s;
}

/* Tearing off: the paper leaves the printer before the page changes. */
.chit[data-tearing] .chit__paper { animation: chit-tear .3s ease-in forwards; }
@keyframes chit-tear {
	to { transform: translateY(26px) rotate(1.4deg); opacity: 0; }
}

/* ── how engagements work ────────────────────────────────────────────── */
.svc-terms {
	background: var(--yellow);
	color: var(--ink);
	padding: clamp(60px, 10vh, 130px) var(--gutter);
	border-top: 3px solid var(--ink);
}
.svc-terms__inner { max-width: var(--wide); margin: 0 auto; display: grid; gap: 12px; }
.svc-terms h2 {
	font: 800 clamp(30px, 5.4vw, 82px)/.95 var(--display);
	letter-spacing: -.04em;
}
.svc-terms__grid {
	margin-top: clamp(22px, 4vh, 44px);
	display: grid; gap: clamp(18px, 2.6vw, 30px);
}
@media (min-width: 760px) {
	.svc-terms__grid { grid-template-columns: repeat(3, 1fr); }
	.svc-term--wide { grid-column: 1 / -1; }
}
.svc-term {
	border-top: 3px solid var(--ink);
	padding-top: 16px;
}
.svc-term h3 { font: 700 clamp(20px, 2.4vw, 32px)/1.05 var(--display); letter-spacing: -.03em; margin-bottom: 8px; }
.svc-term p { max-width: 56ch; }
.svc-term--wide p { max-width: 74ch; }

/* ── the way out ─────────────────────────────────────────────────────── */
.svc-end {
	background: var(--pink);
	color: var(--ink);
	padding: clamp(60px, 10vh, 130px) var(--gutter);
}
.svc-end__inner { max-width: var(--wide); margin: 0 auto; display: grid; gap: 16px; }
.svc-end h2 {
	font: 800 clamp(30px, 5.6vw, 84px)/.95 var(--display);
	letter-spacing: -.04em;
	max-width: 16ch;
}
.svc-end p { max-width: 54ch; }

.svc-end__row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.svc-end__go, .svc-end__alt {
	display: inline-flex; align-items: center;
	min-height: 52px; padding: 14px 26px;
	border-radius: 999px;
	font: 600 13px/1 var(--mono);
	letter-spacing: .14em; text-transform: uppercase;
	text-decoration: none;
	transition: transform .18s, background .18s;
}
.svc-end__go { background: var(--ink); color: var(--paper); }
.svc-end__alt { border: 2px solid var(--ink); }
.svc-end__go:hover, .svc-end__alt:hover { transform: translateY(-2px); }
.svc-end__alt:hover { background: rgba(10, 10, 15, .08); }

.svc-end__small { font-size: 15px; }
.svc-end__small a { font-weight: 700; }