/* =========================================================================
   Studio — the hero funnel.

   Inherits every token from main.css :root. Nothing new is defined here except
   the two motion timings, so the palette stays in exactly one place.

   Premium means restraint (§18.3): dark, gold, editorial, spacious, alive.
   The one loud element on the page is the input, because the input is the offer.
   ========================================================================= */

/* ⚠️ The hidden attribute loses to any display rule with a class selector, which has
   now caused two real bugs: a dead microphone button showing in browsers with no speech
   support, and the booking form appearing before a time had been picked. Anything this
   file gives display:flex/grid must still obey `hidden`. */
[hidden] { display: none !important; }

.st-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(var(--header-h) + var(--sp-16)) var(--sp-6) var(--sp-16);
	overflow: hidden;
	isolation: isolate;
}

/* The particle canvas. JS leaves it empty on phones and for reduced-motion,
   where the radial glow below carries the whole effect on its own. */
.st-hero__field {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	pointer-events: none;
}

.st-hero__glow {
	position: absolute;
	left: 50%;
	top: 44%;
	width: min(120vw, 1100px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(201, 162, 76, 0.16) 0%, rgba(201, 162, 76, 0.05) 38%, transparent 68%);
	z-index: -1;
	pointer-events: none;
	animation: st-breathe 9s var(--ease) infinite;
}

@keyframes st-breathe {
	0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
	50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}

.st-hero__inner {
	width: 100%;
	max-width: 760px;
	text-align: center;
}

.st-hero__eyebrow {
	font-size: var(--fs-sm);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-text-dim);
	margin-bottom: var(--sp-6);
}

.st-hero__title {
	font-family: var(--font-display);
	font-size: clamp(2.1rem, 6.4vw, 3.9rem);
	line-height: 1.06;
	letter-spacing: -0.02em;
	margin-bottom: var(--sp-8);
	transition: opacity 0.4s var(--ease), max-height 0.5s var(--ease), margin 0.4s var(--ease);
}

/* Once the visitor is working — summary, booking — the headline has done its job
   and quietly gets out of the way of the thing they're actually doing. */
.st-hero.is-working .st-hero__title,
.st-hero.is-working .st-hero__eyebrow {
	opacity: 0;
	max-height: 0;
	margin: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Ty, 2026-09-15: "one row for splash header on desktop too". At 760px the headline
   broke after "want", leaving a single orphaned word centred under it. Widening the
   column past the measured ~800px the line needs lets it sit on one row; below 900px
   it wraps normally, because there it genuinely does not fit. */
@media (min-width: 900px) {
	.st-hero__inner { max-width: 880px; }
	.st-hero__title { white-space: nowrap; }
}

.st-panel { display: none; }
.st-panel.is-active { display: block; }

/* ----------------------------------------------------------- the composer */

.st-composer__shell {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-6);
	background: rgba(26, 26, 31, 0.82);
	border: 1px solid rgba(201, 162, 76, 0.28);
	border-radius: 18px;
	backdrop-filter: blur(10px);
	box-shadow: 0 0 0 0 rgba(201, 162, 76, 0.35), 0 18px 50px -24px rgba(0, 0, 0, 0.9);
	transition: border-color 0.3s var(--ease), box-shadow 0.4s var(--ease);
}

/* The "it wants to be typed in" tell. A slow gold breath at rest, a firm ring on focus. */
.st-composer__shell::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 18px;
	background: var(--grad-gold);
	opacity: 0.16;
	z-index: -1;
	filter: blur(14px);
	animation: st-pulse 4.5s var(--ease) infinite;
}

@keyframes st-pulse {
	0%, 100% { opacity: 0.12; }
	50%      { opacity: 0.3; }
}

.st-composer__shell:focus-within {
	border-color: var(--c-gold);
	box-shadow: 0 0 0 4px rgba(201, 162, 76, 0.14), 0 18px 50px -24px rgba(0, 0, 0, 0.9);
}

.st-composer__input {
	flex: 1;
	min-height: 32px;
	max-height: 160px;
	padding: var(--sp-2) 0;
	background: none;
	border: 0;
	resize: none;
	color: var(--c-text);
	font-family: var(--font-body);
	font-size: var(--fs-md);
	line-height: 1.5;
	outline: none;
}

.st-composer__input::placeholder { color: var(--c-text-dim); }

.st-composer__send,
.st-composer__mic {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 12px;
	cursor: pointer;
	transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}

.st-composer__send { background: var(--grad-gold); color: #0B0B0D; }
.st-composer__send:hover:not(:disabled) { transform: translateY(-1px); }
.st-composer__send:disabled { opacity: 0.45; cursor: default; }

.st-composer__mic { background: rgba(201, 162, 76, 0.1); color: var(--c-gold); }
.st-composer__mic:hover { background: rgba(201, 162, 76, 0.2); }
.st-composer__mic.is-on { background: var(--c-gold); color: #0B0B0D; animation: st-mic 1.4s var(--ease) infinite; }

@keyframes st-mic {
	0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 76, 0.5); }
	50%      { box-shadow: 0 0 0 10px rgba(201, 162, 76, 0); }
}

.st-composer__msg {
	min-height: 1.2em;
	margin-top: var(--sp-3);
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

/* Ty, 2026-09-15: the mic did not "show its active". The pulsing button alone was too
   quiet to read as a state, so while listening the whole input ring goes gold and the
   status line turns into a live label. Impossible to miss, impossible to mistake. */
.st-hero.is-listening .st-composer__shell {
	border-color: var(--c-gold);
	box-shadow: 0 0 0 4px rgba(201, 162, 76, 0.18), 0 18px 50px -24px rgba(0, 0, 0, 0.9);
}

.st-hero.is-listening .st-composer__msg {
	color: var(--c-gold);
	font-weight: 600;
}

.st-hero.is-listening .st-composer__msg::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--c-gold);
	vertical-align: middle;
	animation: st-listen 1.1s var(--ease) infinite;
}

@keyframes st-listen {
	0%, 100% { opacity: 1;   transform: scale(1); }
	50%      { opacity: 0.35; transform: scale(0.8); }
}

/* -------------------------------------------------------------- the chips */

.st-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
	margin: var(--sp-6) 0 0;
	padding: 0;
	list-style: none;
}

.st-chip {
	padding: 9px 16px;
	background: rgba(244, 241, 233, 0.04);
	border: 1px solid var(--c-border);
	border-radius: 999px;
	color: var(--c-text-muted);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	cursor: pointer;
	transition: all 0.22s var(--ease);
}

.st-chip:hover {
	background: rgba(201, 162, 76, 0.12);
	border-color: var(--c-gold);
	color: var(--c-text);
	transform: translateY(-1px);
}

/* Both side doors on ONE row (Ty, 2026-09-15), separated by a hairline so they read
   as two options rather than one long sentence. Present, never advertised (§4.2). */
.st-doors {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-4);
	margin-top: var(--sp-6);
}

.st-doors__book { position: relative; }

.st-doors__book::before {
	content: "";
	position: absolute;
	left: calc(var(--sp-4) / -2);
	top: 50%;
	width: 1px;
	height: 14px;
	transform: translateY(-50%);
	background: var(--c-border);
}

@media (max-width: 520px) {
	.st-doors { gap: var(--sp-2); }
	.st-doors__book::before { display: none; }
}

.st-alt__link,
.st-escape__link {
	background: none;
	border: 0;
	padding: 4px;
	color: var(--c-text-dim);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: rgba(167, 162, 154, 0.35);
	cursor: pointer;
	transition: color 0.2s var(--ease);
}

.st-alt__link:hover,
.st-escape__link:hover { color: var(--c-gold); }

.st-escape { margin-top: var(--sp-8); }

/* ------------------------------------------------------------------- chat */

/* ⚠️ Ty, 2026-09-15: "the scrolling lets us only see a very limited amount at once."
   This used to be max-height:min(46vh,420px) with overflow-y:auto — a letterbox with
   its own scrollbar, sitting inside an otherwise empty screen, so a conversation was
   read four lines at a time for no reason. It now grows with its content and the page
   scrolls normally; studio.js keeps the newest message in view. */
.st-log {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	margin-bottom: var(--sp-8);
	text-align: left;
}

.st-log:empty { display: none; }

/* The "this is not a blank slate" marker. Quiet, but unmissable — it is the only
   thing above the restored conversation, and it carries the way out. */
.st-resumed {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--c-border);
	font-size: var(--fs-sm);
}

.st-resumed__text { color: var(--c-text-dim); }

.st-resumed__new {
	background: none;
	border: 0;
	padding: 0;
	color: var(--c-gold);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}

.st-resumed__new:hover { color: var(--c-gold-soft); }

.st-bubble { animation: st-rise 0.4s var(--ease) both; }

@keyframes st-rise {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.st-bubble__who {
	display: block;
	margin-bottom: var(--sp-1);
	font-size: var(--fs-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-text-dim);
}

.st-bubble__text {
	margin: 0;
	font-size: var(--fs-base);
	line-height: 1.65;
	white-space: pre-wrap;
}

.st-bubble--ty .st-bubble__who { color: var(--c-gold); }

.st-bubble--user {
	align-self: flex-end;
	max-width: 85%;
	padding: var(--sp-3) var(--sp-4);
	background: rgba(244, 241, 233, 0.05);
	border: 1px solid rgba(244, 241, 233, 0.08);
	border-radius: 14px 14px 4px 14px;
	text-align: left;
}

.st-bubble--user .st-bubble__who { text-align: right; }

.st-dots { display: flex; gap: 5px; align-items: center; height: 1.6em; }

.st-dots span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c-gold);
	opacity: 0.4;
	animation: st-blink 1.3s var(--ease) infinite;
}

.st-dots span:nth-child(2) { animation-delay: 0.18s; }
.st-dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes st-blink {
	0%, 100% { opacity: 0.25; transform: translateY(0); }
	40%      { opacity: 1;    transform: translateY(-3px); }
}

.st-proof { margin-top: calc(var(--sp-2) * -1); }

.st-proof__link {
	display: inline-block;
	padding: 6px 14px;
	background: rgba(201, 162, 76, 0.08);
	border: 1px solid var(--c-border);
	border-radius: 999px;
	font-size: var(--fs-sm);
	transition: all 0.22s var(--ease);
}

.st-proof__link:hover { background: rgba(201, 162, 76, 0.18); border-color: var(--c-gold); }

/* --------------------------------------------------------- email capture */

/* ⚠️ Deliberately quiet. Ty, 2026-09-15: the progress prompt "kind of takes you out of
   the process". It was a bordered, tinted card the same visual weight as the assistant's
   own replies, which made an optional favour look like a gate. It is now a hairline rule
   and one line of text — present, skippable, and impossible to mistake for a step. */
.st-capture {
	padding: var(--sp-5) 0 0;
	border-top: 1px solid var(--c-border);
	animation: st-rise 0.4s var(--ease) both;
}

.st-capture__title { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); font-weight: 600; color: var(--c-text); }
.st-capture__copy  { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-dim); }
.st-capture__row   { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.st-capture__input {
	flex: 1 1 200px;
	padding: 11px 14px;
	background: rgba(11, 11, 13, 0.6);
	border: 1px solid var(--c-border);
	border-radius: 10px;
	color: var(--c-text);
	font-family: var(--font-body);
	font-size: var(--fs-base);
}

.st-capture__input:focus { outline: none; border-color: var(--c-gold); }

.st-capture__save {
	padding: 11px 20px;
	background: var(--grad-gold);
	border: 0;
	border-radius: 10px;
	color: #0B0B0D;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-sm);
	cursor: pointer;
}

.st-capture__skip {
	margin-top: var(--sp-3);
	background: none;
	border: 0;
	padding: 0;
	color: var(--c-text-dim);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.st-capture__done { margin: 0; color: var(--c-gold); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------- guided */

.st-guided__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-8);
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--c-border);
}

.st-guided__back {
	background: none;
	border: 0;
	padding: 0;
	color: var(--c-text-muted);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	cursor: pointer;
}

.st-guided__back:hover { color: var(--c-gold); }

/* Honest framing (§4.2): this path is a menu and says so. */
.st-guided__honest { margin: 0; font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-dim); }

.st-g__q {
	margin: 0 0 var(--sp-6);
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	line-height: 1.2;
}

.st-g__note { margin: calc(var(--sp-4) * -1) 0 var(--sp-6); font-size: var(--fs-sm); color: var(--c-text-muted); }

.st-g__choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--sp-3);
	margin-bottom: var(--sp-6);
}

.st-g__choice {
	padding: var(--sp-4) var(--sp-6);
	background: rgba(244, 241, 233, 0.03);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	color: var(--c-text);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	text-align: left;
	cursor: pointer;
	transition: all 0.22s var(--ease);
}

.st-g__choice:hover {
	background: rgba(201, 162, 76, 0.1);
	border-color: var(--c-gold);
	transform: translateY(-2px);
}

.st-g__choice.is-on {
	background: rgba(201, 162, 76, 0.16);
	border-color: var(--c-gold);
	box-shadow: inset 0 0 0 1px var(--c-gold);
}

.st-g__text {
	width: 100%;
	padding: var(--sp-4);
	margin-bottom: var(--sp-4);
	background: rgba(11, 11, 13, 0.6);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	color: var(--c-text);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	resize: vertical;
}

.st-g__text:focus { outline: none; border-color: var(--c-gold); }
.st-g__row { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }

.st-g__skip {
	background: none;
	border: 0;
	color: var(--c-text-dim);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.st-guided__trail {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: var(--sp-8) 0 0;
	padding: 0;
	list-style: none;
}

.st-guided__trail li {
	padding: 5px 12px;
	background: rgba(244, 241, 233, 0.04);
	border-radius: 999px;
	font-size: var(--fs-xs);
	color: var(--c-text-dim);
}

/* --------------------------------------------------------------- summary */

.st-summary { text-align: left; }

.st-sum__eyebrow {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-gold);
}

.st-sum__title { margin: 0 0 var(--sp-8); font-family: var(--font-display); font-size: var(--fs-2xl); }
.st-sum__block { margin-bottom: var(--sp-8); }

.st-sum__label {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-text-dim);
}

.st-sum__recap { margin: 0; font-size: var(--fs-md); line-height: 1.6; }

.st-sum__list { margin: 0; padding-left: 0; list-style: none; }

.st-sum__list li {
	position: relative;
	padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
	border-bottom: 1px solid rgba(201, 162, 76, 0.08);
	font-size: var(--fs-base);
}

.st-sum__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.15em;
	width: 14px;
	height: 1px;
	background: var(--c-gold);
}

.st-sum__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--sp-6);
	margin-bottom: var(--sp-8);
	padding: var(--sp-6);
	background: rgba(244, 241, 233, 0.03);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
}

.st-sum__fact { display: flex; flex-direction: column; gap: var(--sp-1); }

.st-sum__fact-label {
	font-size: var(--fs-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-text-dim);
}

.st-sum__fact-value { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--c-text); }
.st-sum__fact-why   { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.5; }

.st-sum__price {
	margin-bottom: var(--sp-8);
	padding: var(--sp-8) var(--sp-6);
	background: linear-gradient(135deg, rgba(201, 162, 76, 0.12), rgba(201, 162, 76, 0.03));
	border: 1px solid rgba(201, 162, 76, 0.3);
	border-radius: var(--radius);
	text-align: center;
}

.st-sum__price-label {
	display: block;
	font-size: var(--fs-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-text-muted);
}

/* A range is a longer string than a single figure, so it scales down harder than a
   "Starting at $X" would have. It still has to be the biggest thing in the box. */
.st-sum__price-value {
	display: block;
	margin: var(--sp-2) 0;
	font-family: var(--font-display);
	font-size: clamp(1.7rem, 5.4vw, 2.6rem);
	line-height: 1.15;
	color: var(--c-gold);
	white-space: nowrap;
}

@media (max-width: 400px) {
	.st-sum__price-value { white-space: normal; }
}

.st-sum__price-note { margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); }

/* The edge case. Quieter than a price on purpose — it is an honest hand-raise,
   not a pitch, and dressing it up like a number would undercut that. */
.st-sum__price--outlier { background: rgba(244, 241, 233, 0.04); border-color: var(--c-border); }

.st-sum__price-outlier {
	margin: var(--sp-3) 0 var(--sp-4);
	font-family: var(--font-display);
	font-size: var(--fs-md);
	line-height: 1.45;
	color: var(--c-text);
}
.st-sum__next { margin-bottom: var(--sp-6); }
.st-sum__nextcopy { margin: 0; font-size: var(--fs-base); color: var(--c-text-muted); }

/* --------------------------------------------------------------- booking */

.st-book__title { margin: 0 0 var(--sp-3); font-family: var(--font-display); font-size: var(--fs-2xl); text-align: center; }
.st-book__copy  { margin: 0 auto var(--sp-8); max-width: 48ch; font-size: var(--fs-base); color: var(--c-text-muted); text-align: center; }
.st-book__loading { text-align: center; color: var(--c-text-muted); }

.st-book__days { display: flex; flex-direction: column; gap: var(--sp-6); text-align: left; }

.st-book__dayname {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-text-dim);
}

.st-book__times { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.st-book__time {
	padding: 10px 18px;
	background: rgba(244, 241, 233, 0.04);
	border: 1px solid var(--c-border);
	border-radius: 10px;
	color: var(--c-text);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	cursor: pointer;
	transition: all 0.2s var(--ease);
}

.st-book__time:hover { border-color: var(--c-gold); background: rgba(201, 162, 76, 0.1); }
.st-book__time.is-picked { background: var(--grad-gold); border-color: transparent; color: #0B0B0D; font-weight: 600; }

.st-book__tz { margin-top: var(--sp-6); font-size: var(--fs-xs); color: var(--c-text-dim); text-align: center; }

.st-book__form { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-8); text-align: left; }

.st-book__input,
.st-book__notes {
	width: 100%;
	padding: 13px 16px;
	background: rgba(11, 11, 13, 0.6);
	border: 1px solid var(--c-border);
	border-radius: 10px;
	color: var(--c-text);
	font-family: var(--font-body);
	font-size: var(--fs-base);
}

.st-book__input:focus,
.st-book__notes:focus { outline: none; border-color: var(--c-gold); }
.st-book__notes { resize: vertical; }

.st-book__notes-label {
	display: block;
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.st-book__notes-label .st-book__notes { margin-top: var(--sp-2); }

.st-book__err { margin: 0; color: #E07A5F; font-size: var(--fs-sm); }

.st-book__tick {
	margin: 0 auto var(--sp-4);
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	border: 1px solid var(--c-gold);
	border-radius: 50%;
	color: var(--c-gold);
	font-size: 1.6rem;
	animation: st-rise 0.5s var(--ease) both;
}

.st-book__when  { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-size: var(--fs-lg); color: var(--c-gold); text-align: center; }
.st-book__where { margin: 0 0 var(--sp-6); font-size: var(--fs-sm); color: var(--c-text-muted); text-align: center; }
.st-book__manage { display: block; margin-top: var(--sp-4); font-size: var(--fs-sm); text-align: center; }

/* ---------------------------------------------------------------- button */

.st-btn {
	display: inline-block;
	width: 100%;
	padding: 15px 28px;
	border: 0;
	border-radius: 12px;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: transform 0.2s var(--ease), box-shadow 0.3s var(--ease);
}

.st-btn--gold { background: var(--grad-gold); color: #0B0B0D; }

.st-btn--gold:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 34px -14px rgba(201, 162, 76, 0.7);
	color: #0B0B0D;
}

.st-btn:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }

/* ------------------------------------------------------------ responsive */
/* Most of Ty's traffic is phones (§16), so this is the primary case, not a pass. */

@media (max-width: 720px) {
	.st-hero { min-height: auto; padding: calc(var(--header-h) + var(--sp-12)) var(--sp-4) var(--sp-12); }
	.st-hero__glow { width: 160vw; }
	.st-composer__shell { padding-left: var(--sp-4); border-radius: 16px; }
	.st-composer__input { font-size: 1.0625rem; } /* ≥16px or iOS zooms the page on focus. */
	.st-bubble--user { max-width: 92%; }
	.st-g__choices { grid-template-columns: 1fr; }
	.st-sum__facts { padding: var(--sp-4); gap: var(--sp-4); }
	.st-sum__price { padding: var(--sp-6) var(--sp-4); }
}

@media (prefers-reduced-motion: reduce) {
	.st-hero__glow,
	.st-composer__shell::after,
	.st-composer__mic.is-on,
	.st-dots span { animation: none; }
	.st-bubble { animation: none; }
	.st-chip:hover,
	.st-g__choice:hover,
	.st-btn--gold:hover,
	.st-composer__send:hover:not(:disabled) { transform: none; }
}

/* =========================================================================
   SECTIONS BELOW THE HERO, plus the pieces Studio adds to inner pages
   (flagship depth, About's process, the legal set, the footer's legal row).

   These load site-wide — the hero's JavaScript does not.
   ========================================================================= */

/* ------------------------------------------------- flagship cards (§3.2) */
/* Directly below the hero, and never blank: a cold visitor needs proof before
   they will type anything into a box. */

.st-flagships { padding: var(--sp-24) 0; background: var(--c-bg-2); }

.st-flagships__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--sp-6);
	margin-top: var(--sp-12);
}

.st-flag {
	display: flex;
	flex-direction: column;
	padding: var(--sp-8) var(--sp-6);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	color: var(--c-text);
	transition: transform 0.28s var(--ease), border-color 0.28s var(--ease), box-shadow 0.28s var(--ease);
}

.st-flag:hover {
	transform: translateY(-4px);
	border-color: var(--c-gold);
	box-shadow: var(--shadow);
	color: var(--c-text);
}

.st-flag__kind {
	font-size: var(--fs-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-gold);
}

.st-flag__name { margin: var(--sp-3) 0; font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.15; }
.st-flag__hook { flex: 1; margin: 0 0 var(--sp-6); color: var(--c-text-muted); line-height: 1.6; }
.st-flag__more { font-size: var(--fs-sm); font-weight: 600; color: var(--c-gold); }

/* --------------------------------------------------- testimonials (§3.3) */

.st-voices { padding: var(--sp-24) 0; }

.st-voices__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--sp-6);
	margin-top: var(--sp-12);
}

.st-voice {
	margin: 0;
	padding: var(--sp-8) var(--sp-6);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
}

.st-voice__quote {
	margin: 0 0 var(--sp-6);
	font-family: var(--font-display);
	font-size: var(--fs-md);
	line-height: 1.5;
	font-style: italic;
}

.st-voice__quote::before { content: "\201C"; color: var(--c-gold); }
.st-voice__quote::after  { content: "\201D"; color: var(--c-gold); }
.st-voice__name { display: block; font-weight: 600; }
.st-voice__role { display: block; font-size: var(--fs-sm); color: var(--c-text-dim); }

/* --------------------------------------------------- selected work (§3.3) */

.st-more { padding: var(--sp-24) 0; background: var(--c-bg-2); }
.st-more__list { margin: var(--sp-12) 0 0; padding: 0; list-style: none; }
.st-more__item { border-top: 1px solid var(--c-border); }
.st-more__item:last-child { border-bottom: 1px solid var(--c-border); }

.st-more__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
	align-items: center;
	gap: var(--sp-6);
	padding: var(--sp-6) var(--sp-2);
	color: var(--c-text);
	transition: background 0.24s var(--ease), padding 0.24s var(--ease);
}

.st-more__link:hover { background: rgba(201, 162, 76, 0.06); padding-left: var(--sp-6); color: var(--c-text); }
.st-more__name { font-family: var(--font-display); font-size: var(--fs-lg); }
.st-more__kind { display: block; font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-gold); }
.st-more__line { color: var(--c-text-muted); font-size: var(--fs-sm); line-height: 1.55; }
.st-more__arrow { color: var(--c-gold); font-size: var(--fs-md); }

/* =========================================================================
   PROJECT PAGES (.vp-*)

   Paired with tyb_render_venture(). These pages are the proof a client reads
   before deciding whether Ty can build their thing, so they get the same care
   as the homepage: a real hero, an editorial lede, and everything visible at
   once instead of hidden behind clicks.
   ========================================================================= */

.vp-hero {
	position: relative;
	padding: calc(var(--header-h) + var(--sp-24)) 0 var(--sp-16);
	overflow: hidden;
	isolation: isolate;
}

.vp-hero__glow {
	position: absolute;
	left: 12%;
	top: 30%;
	width: min(90vw, 780px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(201, 162, 76, 0.14) 0%, rgba(201, 162, 76, 0.04) 40%, transparent 70%);
	z-index: -1;
	pointer-events: none;
}

/* With a product shot the hero splits: words left, the thing itself right. That is
   the shape babav.co uses, which is the reference Ty pointed at. */
.vp-hero--shot .vp-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: var(--sp-16);
	align-items: center;
}

.vp-hero--shot .vp-hero__title { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.vp-hero--shot .vp-hero__tagline { max-width: 26ch; }

.vp-hero__title {
	font-family: var(--font-display);
	font-size: clamp(2.6rem, 8vw, 4.6rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: var(--sp-3) 0 var(--sp-4);
}

/* ------------------------------------------------------------ the shots */
/* A restrained frame: enough edge to read as a screen, not so much that it
   becomes a skeuomorphic laptop illustration competing with the product. */

.vp-shot { margin: 0; }

.vp-shot__frame {
	position: relative;
	border: 1px solid rgba(201, 162, 76, 0.22);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--c-surface);
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.vp-shot__frame img { width: 100%; height: auto; display: block; }

.vp-shot__cap {
	margin-top: var(--sp-4);
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: var(--c-text-dim);
}

/* A tall phone/tablet shot must not be stretched to fill a wide slot. */
.vp-shot--tall .vp-shot__frame { max-width: 380px; margin-inline: auto; }
.vp-shot--tall .vp-shot__cap { text-align: center; }

/* ---------------------------------------------------------- the gallery */

.vp-gal { padding-block: var(--sp-24); }
.vp-gal__stage { margin-top: var(--sp-12); }

.vp-gal__slide { margin: 0; animation: st-rise 0.35s var(--ease) both; }
.vp-gal__slide .vp-shot__frame { max-width: 420px; margin-inline: auto; }
.vp-gal__slide .vp-shot__cap { text-align: center; max-width: 52ch; margin-inline: auto; }

.vp-gal__thumbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-4);
	margin-top: var(--sp-8);
}

.vp-gal__thumb {
	width: 92px;
	padding: 0;
	background: none;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.vp-gal__thumb img { width: 100%; height: auto; display: block; }
.vp-gal__thumb:hover { opacity: 0.85; transform: translateY(-2px); }

.vp-gal__thumb.is-on {
	opacity: 1;
	border-color: var(--c-gold);
	box-shadow: 0 0 0 1px var(--c-gold);
}

.vp-gal__thumb:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }

.vp-hero__tagline {
	max-width: 30ch;
	margin: 0 0 var(--sp-8);
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
	font-style: italic;
	line-height: 1.45;
	color: var(--c-text-muted);
}

.vp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-6);
}

.vp-hero__build { font-size: var(--fs-sm); }

/* ------------------------------------------------------------ lede + body */
/* The opening line is set large and alone so the page starts with a statement
   rather than with paragraph four of a grey wall. */

.vp-intro { padding-block: var(--sp-8) var(--sp-24); }

.vp-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sp-16);
	align-items: start;
}

.vp-intro__lede p {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 2.6vw, 1.85rem);
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--c-text);
}

.vp-intro__lede em { color: var(--c-gold); font-style: italic; }

.vp-intro__body p {
	margin: 0 0 var(--sp-5);
	color: var(--c-text-muted);
	font-size: var(--fs-base);
	line-height: 1.8;
}

.vp-intro__body p:last-child { margin-bottom: 0; }
.vp-intro__body strong { color: var(--c-text); font-weight: 600; }
.vp-intro__body em { color: var(--c-gold-soft); }

/* ---------------------------------------------------------- what it is */

.vp-feat { padding-block: var(--sp-24); background: var(--c-bg-2); }

.vp-feat__grid {
	display: grid;
	/* 290px lands on three columns at the container width, so six features read as
	   two even rows instead of four-then-two orphans. */
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: var(--sp-6);
	margin: var(--sp-12) 0 0;
	padding: 0;
	list-style: none;
}

.vp-feat__item {
	position: relative;
	padding: var(--sp-8) var(--sp-6);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	transition: transform 0.28s var(--ease), border-color 0.28s var(--ease), background 0.28s var(--ease);
}

.vp-feat__item:hover {
	transform: translateY(-3px);
	border-color: var(--c-gold);
	background: var(--c-surface-2);
}

.vp-feat__num {
	display: block;
	margin-bottom: var(--sp-4);
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	line-height: 1;
	color: var(--c-gold);
	opacity: 0.85;
}

.vp-feat__title {
	margin: 0 0 var(--sp-2);
	font-family: var(--font-display);
	font-size: var(--fs-md);
	line-height: 1.25;
}

.vp-feat__copy {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.65;
	color: var(--c-text-muted);
}

/* ------------------------------------------------------------- closing */

.vp-end {
	position: relative;
	padding-block: var(--sp-24);
	overflow: hidden;
	isolation: isolate;
	text-align: center;
}

.vp-end__glow {
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(120vw, 900px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(201, 162, 76, 0.12) 0%, transparent 65%);
	z-index: -1;
	pointer-events: none;
}

.vp-end__title {
	margin: 0 0 var(--sp-4);
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	line-height: 1.1;
}

.vp-end__copy {
	max-width: 52ch;
	margin: 0 auto var(--sp-8);
	color: var(--c-text-muted);
	line-height: 1.7;
}

.vp-end__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-6);
}

@media (max-width: 860px) {
	.vp-hero { padding-top: calc(var(--header-h) + var(--sp-12)); padding-bottom: var(--sp-12); }
	/* Words first, then the product. A screenshot above the headline on a phone is
	   a picture with no idea what it is a picture of. */
	.vp-hero--shot .vp-hero__inner { grid-template-columns: 1fr; gap: var(--sp-10); }
	.vp-hero--shot .vp-hero__tagline { max-width: none; }
	.vp-shot--tall .vp-shot__frame { max-width: 300px; }
	.vp-gal { padding-block: var(--sp-16); }
	.vp-gal__thumb { width: 68px; }
	.vp-intro { padding-block: var(--sp-4) var(--sp-16); }
	.vp-intro__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
	.vp-feat, .vp-end { padding-block: var(--sp-16); }
	.vp-hero__actions, .vp-end__actions { gap: var(--sp-4); }
}

@media (prefers-reduced-motion: reduce) {
	.vp-feat__item:hover { transform: none; }
}

/* =========================================================================
   SERVICES (/start/)

   Ty: "again one giant list is a chore to go through". Was seventeen table rows
   of two columns. Cards are scanned in parallel rather than read in sequence,
   and the group filter cuts what is on screen to about six.
   ========================================================================= */

.svc-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-bottom: var(--sp-10);
}

.svc-filter__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 9px 16px;
	background: rgba(244, 241, 233, 0.04);
	border: 1px solid var(--c-border);
	border-radius: 999px;
	color: var(--c-text-muted);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	cursor: pointer;
	transition: all 0.22s var(--ease);
}

.svc-filter__btn:hover { border-color: var(--c-gold); color: var(--c-text); }

.svc-filter__btn.is-on {
	background: rgba(201, 162, 76, 0.14);
	border-color: var(--c-gold);
	color: var(--c-text);
}

.svc-filter__n {
	font-size: var(--fs-xs);
	color: var(--c-gold);
	font-variant-numeric: tabular-nums;
}

.svc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.svc-card { display: flex; }

.svc-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--sp-6);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	color: var(--c-text);
	transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.svc-card__link:hover {
	transform: translateY(-3px);
	border-color: var(--c-gold);
	background: var(--c-surface-2);
	color: var(--c-text);
}

.svc-card__name {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-display);
	font-size: var(--fs-md);
	line-height: 1.2;
}

.svc-card__mine {
	flex: 1;
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: var(--c-text-muted);
}

/* The positioning, kept — but as a quiet footnote rather than a second column
   demanding equal attention. */
.svc-card__most {
	margin: 0 0 var(--sp-4);
	padding-top: var(--sp-3);
	border-top: 1px solid rgba(201, 162, 76, 0.1);
	font-size: var(--fs-xs);
	line-height: 1.5;
	color: var(--c-text-dim);
}

.svc-card__most span { letter-spacing: 0.1em; text-transform: uppercase; }
.svc-card__most s { text-decoration-color: rgba(167, 162, 154, 0.5); }

.svc-card__go {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-gold);
}

@media (max-width: 720px) {
	.svc-filter { margin-bottom: var(--sp-6); }
	.svc-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------- flagship depth (venture pages) */

.st-depth { padding: var(--sp-24) 0; background: var(--c-bg-2); }
.st-depth__list { margin: var(--sp-12) 0 var(--sp-8); padding: 0; list-style: none; }

.st-depth__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--sp-6);
	padding: var(--sp-6) 0;
	border-bottom: 1px solid var(--c-border);
}

.st-depth__num  { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--c-gold); line-height: 1.3; }
.st-depth__text { margin: 0; font-size: var(--fs-md); line-height: 1.6; color: var(--c-text-muted); }
.st-depth__skills { justify-content: flex-start; }

/* ----------------------------------------------------- process (/about/) */

.st-process { padding: var(--sp-24) 0; }
.st-process__list { margin: var(--sp-12) 0 0; padding: 0; list-style: none; }

.st-process__step {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--sp-6);
	padding: var(--sp-8) 0;
	border-bottom: 1px solid var(--c-border);
}

.st-process__num   { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--c-gold); line-height: 1; }
.st-process__title { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-size: var(--fs-lg); }
.st-process__body  { margin: 0; color: var(--c-text-muted); line-height: 1.7; }
.st-process__links { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-8); font-size: var(--fs-sm); }

/* -------------------------------------------------------------- page CTA */

.st-pagecta { padding: var(--sp-24) 0; text-align: center; }
.st-pagecta__line { margin: 0 0 var(--sp-6); font-family: var(--font-display); font-size: var(--fs-xl); }

/* ----------------------------------------------------------------- legal */

.st-legal__note {
	padding: var(--sp-4) var(--sp-6);
	margin-bottom: var(--sp-12);
	background: rgba(201, 162, 76, 0.06);
	border-left: 2px solid var(--c-gold);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.st-legal h2 { margin-top: var(--sp-12); font-size: var(--fs-lg); }
.st-legal p,
.st-legal li { color: var(--c-text-muted); line-height: 1.75; }

.page-hero__sub { max-width: 54ch; margin-top: var(--sp-4); color: var(--c-text-muted); }

/* ------------------------------------------------------------ footer row */

.site-footer__legalrow { display: block; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-dim); }
.site-footer__legalrow a { color: var(--c-text-dim); }
.site-footer__legalrow a:hover { color: var(--c-gold); }

@media (max-width: 720px) {
	.st-flagships,
	.st-voices,
	.st-more,
	.st-depth,
	.st-process,
	.st-pagecta { padding: var(--sp-16) 0; }
	.st-more__link { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); }
	.st-more__line { grid-column: 1 / -1; }
	.st-process__step,
	.st-depth__item { gap: var(--sp-4); }
}

/* ---------------------------------------------- blog "show more" on phones */
/* Paired with the reveal in main.js. Nine come down the wire; six show on a phone. */

.post-list__more {
	display: block;
	width: 100%;
	margin: var(--sp-6) 0 var(--sp-4);
	padding: 14px 24px;
	background: rgba(244, 241, 233, 0.04);
	border: 1px solid var(--c-border);
	border-radius: 12px;
	color: var(--c-text);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.post-list__more:hover { border-color: var(--c-gold); background: rgba(201, 162, 76, 0.1); }

@media (min-width: 721px) {
	.post-list__more { display: none; }
}

/* =========================================================================
   BOOKING CARD (.bk-*)

   Ty, 2026-09-15: "this is unacceptable... it needs to look EXACTLY like the
   link I sent you" — app.babav.co/booking/babav. The old picker printed all 154
   openings as a flat list of every time on every day, which is a data dump, not
   a chooser.

   Same structure as the reference: details down the left, a month calendar that
   only lets you pick days with real openings, and that day's times beside it.
   Palette is this site's gold rather than BABAV's green, because this is
   tyblacke.com.
   ========================================================================= */

/* The card needs more room than the chat column. */
.st-hero.is-working .st-hero__inner { max-width: 1040px; }

.bk-card {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	text-align: left;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
}

/* ------------------------------------------------------------- left panel */

.bk-side {
	padding: var(--sp-8);
	border-right: 1px solid var(--c-border);
	background: rgba(0, 0, 0, 0.22);
}

.bk-side__mark {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: var(--sp-6);
	border-radius: 14px;
	background: var(--grad-gold);
	color: #0B0B0D;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: 0.02em;
}

.bk-side__who {
	margin: 0 0 var(--sp-1);
	font-size: var(--fs-sm);
	color: var(--c-text-dim);
}

.bk-side__title {
	margin: 0 0 var(--sp-4);
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	line-height: 1.15;
}

.bk-side__copy {
	margin: 0 0 var(--sp-6);
	font-size: var(--fs-sm);
	line-height: 1.65;
	color: var(--c-text-muted);
}

.bk-side__meta { margin: 0; padding: 0; list-style: none; }

.bk-side__meta li {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	margin-bottom: var(--sp-3);
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--c-text-muted);
}

.bk-side__meta svg { flex: none; margin-top: 2px; color: var(--c-gold); }

/* ------------------------------------------------------------ right panel */

.bk-main { padding: var(--sp-8); }

.bk-main__title {
	margin: 0 0 var(--sp-2);
	font-family: var(--font-display);
	font-size: var(--fs-lg);
}

.bk-tz {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-6);
	font-size: var(--fs-sm);
	color: var(--c-text-dim);
}

.bk-tz svg { flex: none; color: var(--c-gold); }

.bk-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
	gap: var(--sp-8);
	align-items: start;
}

/* ---------------------------------------------------------------- calendar */

.bk-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
}

.bk-cal__month {
	font-family: var(--font-display);
	font-size: var(--fs-md);
}

.bk-cal__nav {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	background: none;
	border: 1px solid var(--c-border);
	border-radius: 50%;
	color: var(--c-text);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.bk-cal__nav:hover:not(:disabled) { border-color: var(--c-gold); color: var(--c-gold); }
.bk-cal__nav:disabled { opacity: 0.25; cursor: default; }

.bk-cal__dows,
.bk-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
}

.bk-cal__dows {
	margin-bottom: var(--sp-2);
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-text-dim);
	text-align: center;
}

.bk-day {
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--c-text-dim);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.bk-day.is-off { opacity: 0.3; cursor: default; }

/* A day with real openings. Filled circle, the way the reference marks them. */
.bk-day.is-free {
	background: rgba(201, 162, 76, 0.14);
	color: var(--c-gold-soft);
	font-weight: 600;
}

.bk-day.is-free:hover { background: rgba(201, 162, 76, 0.28); }

.bk-day.is-on {
	background: var(--grad-gold);
	color: #0B0B0D;
}

.bk-cal__pad { display: block; }

/* ------------------------------------------------------------------- times */

.bk-times__day {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-text);
	line-height: 1.4;
}

/* Capped and scrollable so a day with sixteen openings doesn't stretch the card
   to twice the height of the calendar beside it. */
.bk-times__list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	max-height: 340px;
	overflow-y: auto;
	padding-right: 4px;
	scrollbar-width: thin;
	scrollbar-color: rgba(201, 162, 76, 0.3) transparent;
}

.bk-times__list::-webkit-scrollbar { width: 5px; }
.bk-times__list::-webkit-scrollbar-thumb { background: rgba(201, 162, 76, 0.3); border-radius: 3px; }

/* Fade the last row out so a cut-off button reads as "keep scrolling" rather than as
   something that failed to render. */
.bk-times__list {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}

.bk-time {
	padding: 12px 10px;
	background: none;
	border: 1px solid rgba(201, 162, 76, 0.35);
	border-radius: 10px;
	color: var(--c-gold-soft);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	cursor: pointer;
	transition: all 0.18s var(--ease);
}

.bk-time:hover { background: rgba(201, 162, 76, 0.12); border-color: var(--c-gold); }
.bk-time.is-on { background: var(--grad-gold); border-color: transparent; color: #0B0B0D; }

/* -------------------------------------------------------------------- form */

.bk-form { max-width: 520px; margin-inline: auto; }

.bk-form__chosen {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-sm);
	color: var(--c-gold);
	font-weight: 600;
	text-align: center;
}

@media (max-width: 860px) {
	.st-hero.is-working .st-hero__inner { max-width: 100%; }
	.bk-card { grid-template-columns: 1fr; }
	.bk-side { border-right: 0; border-bottom: 1px solid var(--c-border); padding: var(--sp-6); }
	.bk-main { padding: var(--sp-6); }
	.bk-cols { grid-template-columns: 1fr; gap: var(--sp-6); }
	.bk-times__list { max-height: none; }
}

/* =========================================================================
   HOMEPAGE SHOWCASE (.vw-*)

   Ty, 2026-09-15: "homepage should be all visual essentially". These rows are
   image-first by construction — the picture gets the larger column and the copy
   is capped at a few lines, so there is no way to quietly turn this back into a
   wall of text without noticing.
   ========================================================================= */

.vw-work { padding-block: var(--sp-24) var(--sp-16); }
.vw-work__head { margin-bottom: var(--sp-16); }

.vw-row { padding-block: var(--sp-12); }

.vw-row__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	gap: var(--sp-16);
	align-items: center;
}

/* Alternate which side the screenshot sits on, so four rows do not read as a list. */
.vw-row--flip .vw-row__shot { order: 2; }

.vw-row__shot { display: block; }

.vw-row__frame {
	display: block;
	border: 1px solid rgba(201, 162, 76, 0.2);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--c-surface);
	box-shadow: 0 36px 80px -34px rgba(0, 0, 0, 0.95);
	transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}

.vw-row__frame img { display: block; width: 100%; height: auto; }
.vw-row__shot:hover .vw-row__frame { transform: translateY(-5px); border-color: var(--c-gold); }

/* A device shot is portrait; give it less width or it dwarfs the row. */
.vw-row--tall .vw-row__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.vw-row--tall .vw-row__frame { max-width: 420px; }
.vw-row--tall.vw-row--flip .vw-row__frame { margin-left: auto; }

.vw-row__kind {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-gold);
}

.vw-row__name {
	margin: 0 0 var(--sp-4);
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 3.6vw, 2.6rem);
	line-height: 1.1;
}

/* Capped on purpose. If a line needs more than this, it belongs on the project page. */
.vw-row__line {
	max-width: 34ch;
	margin: 0 0 var(--sp-6);
	font-size: var(--fs-md);
	line-height: 1.6;
	color: var(--c-text-muted);
}

.vw-row__go { font-size: var(--fs-sm); font-weight: 600; color: var(--c-gold); }
.vw-row__go:hover { color: var(--c-gold-soft); }

/* ------------------------------------------------------------- three lines */

.vw-why { padding-block: var(--sp-16) var(--sp-24); }

.vw-why__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--sp-8);
	margin: 0;
	padding: var(--sp-12) 0 0;
	border-top: 1px solid var(--c-border);
	list-style: none;
}

.vw-why__num {
	display: block;
	margin-bottom: var(--sp-3);
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	color: var(--c-gold);
}

.vw-why__title {
	margin: 0 0 var(--sp-2);
	font-family: var(--font-display);
	font-size: var(--fs-md);
	line-height: 1.25;
}

.vw-why__proof { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--c-text-muted); }

@media (max-width: 860px) {
	.vw-work { padding-block: var(--sp-16) var(--sp-8); }
	.vw-work__head { margin-bottom: var(--sp-10); }
	.vw-row { padding-block: var(--sp-8); }
	/* Picture first on a phone — it is the point of the row. */
	.vw-row__inner { grid-template-columns: 1fr; gap: var(--sp-6); }
	.vw-row--flip .vw-row__shot { order: 0; }
	.vw-row--tall .vw-row__frame,
	.vw-row--tall.vw-row--flip .vw-row__frame { max-width: 320px; margin-inline: auto; }
	.vw-row__line { max-width: none; }
	.vw-why { padding-block: var(--sp-8) var(--sp-16); }
}

@media (prefers-reduced-motion: reduce) {
	.vw-row__shot:hover .vw-row__frame { transform: none; }
}

/* ----------------------------------------------------- looping project video */
/* Sits in exactly the frames the screenshots used, so the layout does not shift
   depending on whether a project has a video yet. */

.vw-video {
	display: block;
	width: 100%;
	height: auto;
	background: var(--c-surface);
}

/* A video inside a project-page hero frame. */
.vp-shot__frame .vw-video { border-radius: inherit; }

/* =========================================================================
   MOTION (assets/js/motion.js)

   Ty, 2026-09-15: "everything reacts as you move". Three effects — reveal on
   scroll, tilt toward the cursor, and a light that follows it.

   ⚠️ NOTHING HERE MAY HIDE CONTENT ON ITS OWN. The reveal styles are scoped to
   .motion-ready, a class only JavaScript adds, so if the script never runs the
   page renders complete and visible rather than blank. Hiding content behind a
   script that might fail is how a "nice animation" becomes an empty page.
   ========================================================================= */

.motion-ready .will-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
	will-change: opacity, transform;
}

.motion-ready .will-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Drop will-change once it has arrived; leaving it on every card keeps layers alive
   on the GPU for no reason. */
.motion-ready .will-reveal.is-in { will-change: auto; }

/* ------------------------------------------------------------------- tilt */

.vw-row__frame,
.vp-shot__frame {
	transform-style: preserve-3d;
	transition: transform 0.45s var(--ease), border-color 0.35s var(--ease);
}

/* ------------------------------------------------------------------- glow */
/* Two custom properties set by JS; the browser only repaints a gradient. */

.has-glow { position: relative; }

.has-glow::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s var(--ease);
	background: radial-gradient(
		420px circle at var(--gx, 50%) var(--gy, 50%),
		rgba(201, 162, 76, 0.13),
		transparent 60%
	);
}

.has-glow:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.motion-ready .will-reveal { opacity: 1; transform: none; transition: none; }
	.has-glow::after { display: none; }
}

/* =========================================================================
   USE IT LIVE (.lv-*)

   The real product, embedded. Behind a button because pulling a whole other
   website into this page unasked would be slower than the product it is meant
   to be showing off.
   ========================================================================= */

.lv { padding-block: var(--sp-24); background: var(--c-bg-2); }
.lv__note { max-width: 56ch; margin: var(--sp-4) 0 var(--sp-10); color: var(--c-text-muted); line-height: 1.7; }

.lv__stage {
	position: relative;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--c-surface);
	/* 16:10 before it loads, so pressing the button does not jolt the page. */
	aspect-ratio: 16 / 10;
}

.lv__start {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	width: 100%;
	background: radial-gradient(circle at 50% 50%, rgba(201, 162, 76, 0.1), transparent 65%);
	border: 0;
	color: var(--c-text);
	font-family: var(--font-body);
	cursor: pointer;
	transition: background 0.3s var(--ease);
}

.lv__start:hover { background: radial-gradient(circle at 50% 50%, rgba(201, 162, 76, 0.2), transparent 65%); }

.lv__play {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-bottom: var(--sp-2);
	border-radius: 50%;
	background: var(--grad-gold);
	color: #0B0B0D;
	font-size: 1.3rem;
	padding-left: 4px; /* optical centring of the triangle */
	transition: transform 0.3s var(--ease);
}

.lv__start:hover .lv__play { transform: scale(1.06); }

.lv__label { font-family: var(--font-display); font-size: var(--fs-lg); }
.lv__sub { font-size: var(--fs-sm); color: var(--c-text-dim); }

.lv__frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.lv__stage.is-live { aspect-ratio: 16 / 10; }

.lv__out { margin-top: var(--sp-4); font-size: var(--fs-sm); }

@media (max-width: 860px) {
	.lv { padding-block: var(--sp-16); }
	/* A desktop site squeezed into a phone-width frame is unusable, so it gets a taller
	   box and the "open in its own tab" link carries more weight there. */
	.lv__stage, .lv__stage.is-live { aspect-ratio: 3 / 4; }
	.lv__play { width: 54px; height: 54px; }
}