/**
 * Portal styles.
 *
 * Every colour and face resolves through a custom property set by
 * SCP\Branding::css_variables(), so the whole portal re-themes from the
 * Branding tab without touching this file. Fallbacks are supplied so the
 * stylesheet still renders if the inline block is ever stripped by an
 * optimiser.
 */

.scp {
	--scp-space: 1.5rem;
	background: var(--scp-surface, #ffffff);
	font-family: var(--scp-font-body, sans-serif);
	color: var(--scp-ink, #3a3a34);
	line-height: 1.7;
}

.scp *,
.scp *::before,
.scp *::after {
	box-sizing: border-box;
}

/* Themes style inputs, labels and fieldsets to suit their own forms, and those
   rules land on ours too. Rather than hope they are compatible, every control
   the portal renders is reset to a known state first.
   
   The handful of !important declarations below are deliberate and confined to
   properties that break layout outright when a theme overrides them. A theme
   setting `input { width: 100% }` makes a checkbox fill its container and shove
   its own label outside the box, which is not a difference of taste. */

.scp input,
.scp select,
.scp textarea,
.scp button {
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	max-width: 100%;
	margin: 0;
}

.scp input[type="checkbox"],
.scp input[type="radio"] {
	width: 1.05rem !important;
	min-width: 1.05rem;
	max-width: 1.05rem;
	height: 1.05rem;
	flex: 0 0 auto;
	padding: 0;
	margin: 0;
	vertical-align: middle;
	-webkit-appearance: checkbox;
	appearance: auto;
}

.scp input[type="radio"] {
	-webkit-appearance: radio;
}

.scp fieldset,
.scp .scp-qfield fieldset,
.scp .scp-field fieldset {
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

.scp legend,
.scp .scp-qfield legend:empty { display: none; }
.scp .scp-qfield legend,
.scp .scp-field legend {
	display: block;
	float: none;
	width: auto;
	max-width: 100%;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

/* Structural resets on lists, so a theme cannot print its own markers beside
   the numbering the portal draws itself. */
.scp ul,
.scp ol {
	margin-left: 0;
	padding-left: 0;
}

.scp label {
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
}

.scp-list,
.scp-files,
.scp-steps,
.scp-book-steps,
.scp-book-types,
.scp-timeline,
.scp-outcomes,
.scp-versions,
.scp-choices {
	list-style: none !important;
}

.scp-list li,
.scp-files li,
.scp-steps li,
.scp-timeline li,
.scp-outcomes li,
.scp-versions li {
	list-style: none !important;
	margin-left: 0;
}

.scp textarea {
	display: block;
	resize: vertical;
}

/* Panels ------------------------------------------------------------------ */

.scp-panel {
	background: var(--scp-panel, #fff);
	border: 1px solid var(--scp-line, #dcd8cc);
	border-radius: var(--scp-radius, 4px);
	padding: var(--scp-space);
	margin-bottom: var(--scp-space);
}

.scp-panel--narrow {
	max-width: 26rem;
	margin-left: auto;
	margin-right: auto;
}

.scp-panel--tinted {
	background: var(--scp-signature, #ede8dc);
}

.scp-grid {
	display: grid;
	gap: var(--scp-space);
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

/* Type -------------------------------------------------------------------- */

.scp-eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--scp-primary, #2f4a38);
}

.scp-title {
	margin: 0 0 0.5rem;
	font-family: var(--scp-font-heading, sans-serif);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.25;
	color: var(--scp-primary, #2f4a38);
}

.scp-subtitle {
	margin: 0;
	color: var(--scp-muted, #6f6e62);
}

.scp-stat {
	margin: 0;
	font-family: var(--scp-font-heading, sans-serif);
	font-size: 2.5rem;
	line-height: 1;
	color: var(--scp-primary, #2f4a38);
}

.scp-meta {
	margin: 0.25rem 0 0;
	font-size: 0.8125rem;
	color: var(--scp-muted, #6f6e62);
}

.scp-hint {
	margin: 0.35rem 0 0;
	font-size: 0.8125rem;
	color: var(--scp-muted, #6f6e62);
}

.scp-strong {
	margin: 0 0 0.25rem;
	font-weight: 600;
}

.scp-rule {
	border: 0;
	border-top: 1px solid var(--scp-line, #dcd8cc);
	margin: 1.25rem 0;
}

/* Header and tabs --------------------------------------------------------- */

.scp-header {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 1.25rem;
}

.scp-link-quiet {
	color: var(--scp-muted, #6f6e62);
	font-size: 0.875rem;
	text-decoration: underline;
}

.scp-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	border-bottom: 1px solid var(--scp-line, #dcd8cc);
	margin-bottom: var(--scp-space);
}

/* Same strip, on pages that aren't inside the dashboard shell (the service
   agreement, for instance) — needs its own top spacing since there's no
   header sitting directly above it. */
.scp-tabs--standalone {
	margin-top: var(--scp-space);
}

.scp-tab {
	padding: 0.6rem 1rem;
	border-bottom: 2px solid transparent;
	color: var(--scp-muted, #6f6e62);
	font-size: 0.9375rem;
	text-decoration: none;
}

.scp-tab:hover,
.scp-tab:focus {
	color: var(--scp-primary, #2f4a38);
}

.scp-tab.is-current {
	border-bottom-color: var(--scp-accent, #8ca96b);
	color: var(--scp-primary, #2f4a38);
	font-weight: 600;
}

.scp-badge,
.scp-pill {
	display: inline-block;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	background: var(--scp-accent, #8ca96b);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.5;
	vertical-align: middle;
}

/* Lists and files --------------------------------------------------------- */

.scp-list {
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}

.scp-list li {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--scp-line, #dcd8cc);
}

.scp-list li:last-child {
	border-bottom: 0;
}

.scp-stage {
	border-top: 1px solid var(--scp-line, #dcd8cc);
}

.scp-stage:last-of-type {
	border-bottom: 1px solid var(--scp-line, #dcd8cc);
}

.scp-stage__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.9rem 0.25rem;
	cursor: pointer;
	list-style: none;
}

.scp-stage__summary::-webkit-details-marker {
	display: none;
}

.scp-stage__label {
	font-family: var(--scp-font-heading, sans-serif);
	font-size: 1.0625rem;
	color: var(--scp-primary, #2f4a38);
}

.scp-stage__label::before {
	content: "\203A";
	display: inline-block;
	margin-right: 0.6rem;
	transition: transform 0.2s ease;
}

.scp-stage[open] .scp-stage__label::before {
	transform: rotate(90deg);
}

.scp-pro-jobs { list-style: none; padding: 0; margin: 1rem 0 0; }
.scp-pro-job { padding: .75rem 0; border-bottom: 1px solid var(--scp-line, #dcdcde); }
.scp-pro-job:last-child { border-bottom: 0; }
.scp-pro-files { list-style: none; padding: 0; margin: .35rem 0 0; }
.scp-pro-files li { margin: .2rem 0; }
.scp-files-side { display: flex; flex-direction: column; gap: 4px; }
.scp-files-side a { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: inherit; }
.scp-bell { min-width: 1.15rem; height: 1.15rem; border-radius: 99px; background: #8c3a2e; color: #fff; font-size: .68rem; font-weight: 650; display: inline-grid; place-items: center; }
.scp-player { width: 100%; max-width: 640px; border-radius: 8px; background: #1c2418; margin: .4rem 0 .6rem; }
.scp-files-side a.is-on { background: linear-gradient(90deg, #dfead8, #e7f0e4); color: var(--scp-primary, #2f4a38); box-shadow: inset 3px 0 0 var(--scp-accent, #8ca96b); }
.scp-files-side a:hover { background: #eef4ea; }
.scp-lb { position: fixed; inset: 0; background: rgba(12,10,8,.88); z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.scp-lb[hidden] { display: none; }
.scp-lb__bar { color: #fff; width: min(860px, 92vw); display: flex; justify-content: space-between; margin-bottom: 8px; }
.scp-lb__shot { width: min(860px, 92vw); height: 62vh; background: #222 center/contain no-repeat; border-radius: 10px; }
@media (max-width: 720px) { .scp-files-layout { grid-template-columns: 1fr; } }
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0 0 0 1.4rem;
}

.scp-file {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	justify-content: space-between;
	padding: 0.65rem 0;
	border-top: 1px dotted var(--scp-line, #dcd8cc);
}

.scp-file__main {
	flex: 1 1 14rem;
	min-width: 0;
}

.scp-file__name {
	color: var(--scp-primary, #2f4a38);
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* Forms ------------------------------------------------------------------- */

.scp-field {
	flex: 1 1 12rem;
	min-width: 0;
	margin-bottom: 1rem;
}

.scp-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
	align-items: flex-start;
}

/* Without a minimum, a two-up row collapses into unreadable slivers on a
   phone before the wrap ever kicks in. */
@media (max-width: 30rem) {
	.scp-field-row {
		display: block;
	}
}

.scp-field > label,
.scp-field > fieldset > legend {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--scp-primary, #2f4a38);
}

.scp-field input:not([type="checkbox"]):not([type="radio"]),
.scp-field select,
.scp-field textarea {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--scp-line, #dcd8cc);
	border-radius: var(--scp-radius, 4px);
	background: var(--scp-panel, #fff);
	color: var(--scp-ink, #3a3a34);
	font-family: inherit;
	font-size: 1rem;
}

.scp-field input:focus {
	outline: 2px solid var(--scp-accent, #8ca96b);
	outline-offset: 1px;
	border-color: var(--scp-accent, #8ca96b);
}

/* Same smooth-reveal treatment as .scp-qfield, for EOI's conditional fields
   (e.g. an "Other" text field appearing under a checkbox). */
.scp-field[data-scp-when-field] {
	overflow: hidden;
	max-height: 40rem;
	opacity: 1;
	transition: max-height 0.3s ease, opacity 0.25s ease, margin-bottom 0.3s ease;
}

.scp-field[data-scp-when-field][hidden] {
	display: block;
	max-height: 0;
	opacity: 0;
	margin-bottom: 0;
	pointer-events: none;
}

.scp-field input[readonly] {
	background: var(--scp-surface, #ffffff);
	color: var(--scp-muted, #6f6e62);
}

.scp-hidden-field {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.scp-button {
	display: inline-block;
	padding: 0.7rem 1.5rem;
	border: 1px solid var(--scp-primary, #2f4a38);
	border-radius: var(--scp-radius, 4px);
	background: var(--scp-primary, #2f4a38);
	color: #fff;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.scp-button:hover,
.scp-button:focus {
	background: var(--scp-primary-dark, #22372a);
	border-color: var(--scp-primary-dark, #22372a);
	color: #fff;
	box-shadow: 0 0 20px rgba(var(--scp-primary-rgb, 47, 74, 56), 0.35);
}

.scp-button--quiet {
	background: transparent;
	color: var(--scp-primary, #2f4a38);
}

.scp-button--quiet:hover,
.scp-button--quiet:focus {
	background: var(--scp-primary, #2f4a38);
	color: #fff;
}

/* EOI section grouping. Each question group is still its own fieldset
   (see public/views/enquiry.php) so Fix List can identify which part of
   the form an issue belongs to, and so a future revision has a seam to
   work with — but nothing steps between them or hides any of them. */
.scp-eoi-step {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.scp-choice-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem 1rem;
	margin: 0.5rem 0;
}

.scp-choice-row {
	display: flex;
	align-items: flex-start;
	gap: 0.35rem;
}

.scp-choice-row .scp-choice {
	flex: 1 1 auto;
}

.scp-info {
	flex: none;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.35rem;
	height: 1.35rem;
	margin-top: 0.15rem;
	border-radius: 999px;
	border: 1px solid var(--scp-line, #dcd8cc);
	color: var(--scp-muted, #6f6e62);
	font-size: 0.75rem;
	font-weight: 700;
	cursor: default;
	user-select: none;
}

.scp-info:hover,
.scp-info:focus,
.scp-info:focus-within {
	border-color: var(--scp-primary, #2f4a38);
	color: var(--scp-primary, #2f4a38);
	outline: none;
}

.scp-info__bubble {
	position: absolute;
	z-index: 5;
	right: 0;
	top: 1.7rem;
	width: max-content;
	max-width: 16rem;
	margin: 0;
	padding: 0.6rem 0.75rem;
	background: var(--scp-panel, #fff);
	border: 1px solid var(--scp-line, #dcd8cc);
	border-radius: var(--scp-radius, 4px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	font-size: 0.8125rem;
	line-height: 1.4;
	font-weight: 400;
	color: var(--scp-ink, #3a3a34);
	/* Hidden by default, shown only on hover/focus of the parent — never
	   toggled, so it can never get stuck open the way a click target can. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.12s ease;
}

.scp-info:hover .scp-info__bubble,
.scp-info:focus .scp-info__bubble,
.scp-info:focus-within .scp-info__bubble {
	opacity: 1;
	visibility: visible;
}

@media (max-width: 640px) {
	.scp-choice-grid {
		grid-template-columns: 1fr;
	}

	.scp-info__bubble {
		right: auto;
		left: 0;
	}
}

/* Notices ----------------------------------------------------------------- */

.scp-notice {
	padding: 0.85rem 1rem;
	margin-bottom: 1rem;
	border-left: 3px solid var(--scp-accent, #8ca96b);
	background: var(--scp-signature, #ede8dc);
	border-radius: 0;
	font-size: 0.9375rem;
}

.scp-notice--error {
	border-left-color: var(--scp-danger, #8c3a2e);
	color: var(--scp-danger, #8c3a2e);
}

.scp-notice--success {
	border-left-color: var(--scp-accent, #8ca96b);
}

.scp-notice--info {
	border-left-color: var(--scp-muted, #6f6e62);
}

@media (max-width: 600px) {
	.scp-file {
		align-items: flex-start;
	}

	.scp-header {
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	.scp *,
	.scp *::before {
		transition: none !important;
	}
}

/* Project progress ---------------------------------------------------------
   A stepper, not a progress bar. Stages are named states a client recognises,
   and "in progress" is genuinely different from "60% done". */

.scp-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: scp-step;
}

.scp-step {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	align-items: baseline;
	padding: 0.6rem 0 0.6rem 1.75rem;
}

.scp-step::before {
	content: "";
	position: absolute;
	left: 0.3rem;
	top: 1.6rem;
	bottom: -0.6rem;
	width: 1px;
	background: var(--scp-line, #dcd8cc);
}

.scp-step:last-child::before {
	display: none;
}

.scp-step__dot {
	position: absolute;
	left: 0;
	top: 0.85rem;
	width: 0.7rem;
	height: 0.7rem;
	border: 1px solid var(--scp-line, #dcd8cc);
	border-radius: 50%;
	background: var(--scp-panel, #fff);
}

.scp-step__label {
	font-family: var(--scp-font-heading, sans-serif);
	font-size: 1.0625rem;
	color: var(--scp-muted, #6f6e62);
}

.scp-step__status {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--scp-muted, #6f6e62);
}

.scp-step--complete .scp-step__dot {
	background: var(--scp-accent, #8ca96b);
	border-color: var(--scp-accent, #8ca96b);
}

.scp-step--complete .scp-step__label {
	color: var(--scp-ink, #3a3a34);
}

.scp-step--in-progress .scp-step__dot {
	background: var(--scp-primary, #2f4a38);
	border-color: var(--scp-primary, #2f4a38);
	box-shadow: 0 0 0 3px rgba(var(--scp-accent-rgb, 140, 169, 107), 0.3);
}

.scp-step--in-progress .scp-step__label {
	color: var(--scp-primary, #2f4a38);
	font-weight: 600;
}

.scp-step--in-progress .scp-step__status {
	color: var(--scp-primary, #2f4a38);
	font-weight: 600;
}

.scp-step--on-hold .scp-step__dot {
	background: var(--scp-danger, #8c3a2e);
	border-color: var(--scp-danger, #8c3a2e);
}

/* Activity timeline -------------------------------------------------------- */

.scp-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
}

.scp-timeline li {
	display: flex;
	gap: 0.9rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--scp-line, #dcd8cc);
}

.scp-timeline li:last-child {
	border-bottom: 0;
}

.scp-timeline__when {
	flex: 0 0 3.2rem;
	font-size: 0.8125rem;
	color: var(--scp-muted, #6f6e62);
	white-space: nowrap;
}

.scp-timeline__what {
	flex: 1 1 auto;
	font-size: 0.9375rem;
}

.scp-timeline__what .scp-meta {
	display: block;
}

/* Attention panel ---------------------------------------------------------- */

.scp-panel--attention {
	border-left: 4px solid var(--scp-accent, #8ca96b);
	box-shadow: 0 0 24px rgba(var(--scp-accent-rgb, 140, 169, 107), 0.15);
}

/* Agreement ---------------------------------------------------------------
   Heavier than the rest of the portal on purpose. This page asks for a
   commitment, and it should not look like a file listing. */

.scp-deed {
	background: var(--scp-panel, #fff);
	border: 1px solid var(--scp-line, #dcd8cc);
	border-top: 4px solid var(--scp-primary, #2f4a38);
	padding: clamp(1.5rem, 4vw, 3rem);
}

.scp-deed__head {
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--scp-line, #dcd8cc);
	margin-bottom: 1.5rem;
}

.scp-deed__title {
	margin: 0 0 1.25rem;
	font-family: var(--scp-font-heading, sans-serif);
	font-size: clamp(1.5rem, 3.5vw, 2rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--scp-primary, #2f4a38);
}

.scp-deed__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2.5rem;
	margin: 0;
}

.scp-deed__facts div {
	margin: 0;
}

.scp-deed__facts dt {
	margin: 0 0 0.15rem;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--scp-muted, #6f6e62);
}

.scp-deed__facts dd {
	margin: 0;
	font-size: 1rem;
}

.scp-deed__section {
	padding: 1.75rem 0;
	border-bottom: 1px solid var(--scp-line, #dcd8cc);
}

.scp-deed__section:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.scp-deed__section h2 {
	margin: 0 0 0.9rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--scp-primary, #2f4a38);
}

.scp-amount {
	font-family: var(--scp-font-heading, sans-serif);
	font-size: 1.5rem;
	color: var(--scp-primary, #2f4a38);
}

.scp-mono {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 0.8125rem;
	word-break: break-all;
}

.scp-terms {
	max-height: 24rem;
	overflow-y: auto;
	padding: 1rem 1.25rem;
	border: 1px solid var(--scp-line, #dcd8cc);
	background: var(--scp-surface, #ffffff);
	font-size: 0.9375rem;
}

.scp-commercial {
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
	border: 1px solid var(--scp-primary, #2f4a38);
	border-left-width: 4px;
	background: var(--scp-surface, #ffffff);
}

.scp-commercial.is-expired {
	border-color: var(--scp-danger, #8c3a2e);
}

.scp-commercial__label {
	margin: 0 0 0.4rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--scp-primary, #2f4a38);
}

.scp-commercial.is-expired .scp-commercial__label {
	color: var(--scp-danger, #8c3a2e);
}

.scp-commercial p:last-child {
	margin-bottom: 0;
}

.scp-seal {
	padding: 1.25rem 1.5rem;
	margin: 1.5rem 0;
	border: 2px solid var(--scp-primary, #2f4a38);
}

.scp-seal p {
	margin: 0 0 0.4rem;
}

.scp-seal p:last-child {
	margin-bottom: 0;
}

.scp-seal__mark {
	font-family: var(--scp-font-heading, sans-serif);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--scp-primary, #2f4a38);
}

.scp-check {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	padding: 1rem 1.25rem;
	margin: 0 0 1.25rem;
	border: 1px solid var(--scp-line, #dcd8cc);
	background: var(--scp-surface, #ffffff);
	cursor: pointer;
	font-size: 0.9375rem;
}

.scp-check input {
	margin-top: 0.15rem;
}

.scp-check > span {
	flex: 1 1 auto;
	min-width: 0;
}

.scp-button--commit {
	padding: 0.9rem 2rem;
	font-size: 0.875rem;
}

.scp-versions {
	list-style: none;
	margin: 0;
	padding: 0;
}

.scp-versions li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--scp-line, #dcd8cc);
}

.scp-versions li:last-child {
	border-bottom: 0;
}

.scp-pill--accepted {
	background: var(--scp-primary, #2f4a38);
}

.scp-pill--issued {
	background: var(--scp-accent, #8ca96b);
}

.scp-pill--draft,
.scp-pill--superseded,
.scp-pill--withdrawn {
	background: var(--scp-muted, #6f6e62);
}

/* Covering note ------------------------------------------------------------
   Visibly outside the agreement body. Two voices, two treatments: the note is
   a person talking, the deed is an instrument. */

.scp-note {
	padding: 1.25rem 1.5rem;
	margin: 0 0 0.5rem;
	background: var(--scp-signature, #ede8dc);
	border-left: 3px solid var(--scp-accent, #8ca96b);
}

.scp-note__label {
	margin: 0 0 0.6rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--scp-primary, #2f4a38);
}

.scp-note p {
	margin: 0 0 0.75rem;
}

.scp-note__caveat {
	margin: 0.9rem 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	font-size: 0.8125rem;
	color: var(--scp-muted, #6f6e62);
}

.scp-notices:empty {
	display: none;
}

.scp-seal__done {
	font-weight: 600;
}

.scp-button[aria-busy="true"],
.scp-button:disabled {
	opacity: 0.65;
	cursor: default;
}

/* Feedback ----------------------------------------------------------------- */

.scp-subhead {
	margin: 0 0 0.75rem;
	font-family: var(--scp-font-heading, sans-serif);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--scp-primary, #2f4a38);
}

.scp-quote {
	margin: 0 0 1rem;
	padding: 0.9rem 1.25rem;
	background: var(--scp-surface, #ffffff);
	border-left: 3px solid var(--scp-line, #dcd8cc);
	font-size: 0.9375rem;
}

.scp-quote p:last-child {
	margin-bottom: 0;
}

.scp-due {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	margin: 0 0 1rem;
	background: var(--scp-signature, #ede8dc);
	font-size: 0.8125rem;
	font-weight: 600;
}

.scp-due.is-overdue {
	background: var(--scp-danger, #8c3a2e);
	color: #fff;
}

.scp-field textarea {
	padding: 0.7rem 0.8rem;
	line-height: 1.6;
}

.scp-field textarea:focus,
.scp-field select:focus {
	outline: 2px solid var(--scp-accent, #8ca96b);
	outline-offset: 1px;
	border-color: var(--scp-accent, #8ca96b);
}

.scp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.scp-badge--dot {
	min-width: 1.15rem;
	text-align: center;
	background: var(--scp-danger, #8c3a2e);
}

.scp-outcomes {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

.scp-outcome {
	padding: 0.85rem 0 0.85rem 0.9rem;
	border-left: 3px solid var(--scp-line, #dcd8cc);
	margin-bottom: 0.6rem;
}

.scp-outcome--actioned {
	border-left-color: var(--scp-accent, #8ca96b);
}

.scp-outcome--variation-raised {
	border-left-color: var(--scp-danger, #8c3a2e);
}

.scp-outcome__what {
	margin: 0 0 0.25rem;
	font-weight: 600;
}

.scp-outcome__status {
	margin: 0 0 0.4rem;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--scp-muted, #6f6e62);
}

.scp-outcome__reply p:last-child {
	margin-bottom: 0;
}

.scp-quote--added {
	margin-left: 1.25rem;
	border-left-color: var(--scp-accent, #8ca96b);
}

.scp-outcome--completed {
	border-left-color: var(--scp-accent, #8ca96b);
	opacity: 0.75;
}

.scp-outcome--answered {
	border-left-color: var(--scp-primary, #2f4a38);
}

.scp-file__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
}

.scp-field input[type="text"],
.scp-field input[type="email"],
.scp-field input[type="tel"],
.scp-field input[type="password"] {
	width: 100%;
}

.scp-ack {
	padding-top: 0.5rem;
	border-top: 1px solid var(--scp-line, #dcd8cc);
}

.scp-ack__note {
	font-size: 0.875rem;
	color: var(--scp-muted, #6f6e62);
}

.scp-ack__note strong {
	display: block;
	margin-top: 0.5rem;
	color: var(--scp-ink, #3a3a34);
}

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

.scp-enquiry .scp-panel {
	max-width: 42rem;
	margin-left: auto;
	margin-right: auto;
}

/* Selectable options.
   
   The native checkbox is taken out of the layout entirely rather than styled,
   because a theme can set its width, float, appearance or display and there is
   no reliable way to anticipate which. It stays in the document so it is still
   focusable, keyboard-operable and submitted; the visible control is drawn on
   the label, which nothing else has an opinion about. */

.scp-choices {
	display: flex;
	flex-direction: column;
	gap: 0.42rem;
	margin: 0.6rem 0 0;
	padding: 0;
	list-style: none;
	max-width: 36rem;
}

.scp-choice__input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.scp-choice {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
	margin: 0;
	padding: 0.85rem 1rem;
	min-height: 3.35rem;
	border: 1px solid var(--scp-line, #dcd8cc);
	border-radius: 12px;
	background: var(--scp-panel, #fff);
	cursor: pointer;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var(--scp-ink, #3a3a34);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.scp-choices--tight .scp-choice::after {
	content: "›";
	flex: 0 0 auto;
	margin-left: auto;
	margin-top: 0.05rem;
	color: #b3ad9c;
	font-weight: 400;
	font-size: 1.15rem;
	line-height: 1;
}

.scp-choice__tick {
	position: relative;
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	border: 1px solid var(--scp-line, #dcd8cc);
	border-radius: 3px;
	background: var(--scp-panel, #fff);
}

.scp-choice__tick::after {
	content: "";
	position: absolute;
	top: 0.12rem;
	left: 0.34rem;
	width: 0.3rem;
	height: 0.62rem;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform 0.12s ease;
}

.scp-choice__text {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.scp-choice__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.scp-choice__body .scp-choice__text {
	flex: none;
}

.scp-choice__desc {
	overflow-wrap: anywhere;
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--scp-muted, #6f6e62);
}

.scp-choice--described {
	align-items: flex-start;
}

.scp-choice--described .scp-choice__tick {
	margin-top: 0.15rem;
}

.scp-choice:hover {
	border-color: var(--scp-accent, #8ca96b);
}

.scp-choice__input:checked + .scp-choice {
	border-color: var(--scp-primary, #2f4a38);
	background: var(--scp-signature, #ede8dc);
}

.scp-choice__input:checked + .scp-choice .scp-choice__tick {
	background: var(--scp-primary, #2f4a38);
	border-color: var(--scp-primary, #2f4a38);
}

.scp-choice__input:checked + .scp-choice .scp-choice__tick::after {
	transform: rotate(45deg) scale(1);
}

.scp-choice__input:focus-visible + .scp-choice {
	outline: 2px solid var(--scp-accent, #8ca96b);
	outline-offset: 2px;
}

.scp-recap {
	padding: 1rem 1.25rem;
	margin: 0 0 1.5rem;
	background: var(--scp-surface, #ffffff);
	border-radius: var(--scp-radius, 4px);
}

.scp-recap .scp-quote {
	margin-bottom: 0;
	background: transparent;
	padding-left: 0;
	border-left: 0;
}

/* Questionnaire ------------------------------------------------------------- */

.scp-questionnaire .scp-panel {
	max-width: 44rem;
	margin-left: auto;
	margin-right: auto;
}

.scp-quest__head {
	max-width: 44rem;
	margin: 0 auto 1.5rem;
}

.scp-progress {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	margin: 0.75rem 0 1.25rem;
}

.scp-progress__value {
	flex: 0 0 auto;
	min-width: 2.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--scp-primary, #2f4a38);
}

.scp-progress__track {
	flex: 1 1 auto;
	height: 0.5rem;
	border-radius: 999px;
	background: var(--scp-line, #dcd8cc);
	overflow: hidden;
}

.scp-progress__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--scp-accent, #8ca96b);
	transition: width 0.3s ease;
}

.scp .scp-steps-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.5rem;
	list-style: none !important;
	margin: 0 0 0.35rem;
	padding: 0;
}

.scp .scp-steps-nav > li {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.scp .scp-steps-nav > li::marker,
.scp .scp-choices > li::marker {
	content: none;
}

.scp-steps-nav__item {
	display: flex;
	gap: 0.55rem;
	align-items: center;
	font-size: 0.8125rem;
	color: var(--scp-muted, #6f6e62);
}
.scp-steps-nav__item:not(.is-current) .scp-steps-nav__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.scp-steps-nav__item.is-current .scp-steps-nav__label {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--scp-primary, #2f4a38);
}
.scp-questionnaire .scp-eyebrow,
.scp-quest__head + .scp-eyebrow {
	display: none;
}
.scp-questionnaire .scp-subhead,
.scp-quest__head + .scp-eyebrow + .scp-subhead,
header.scp-quest__head + p.scp-eyebrow + h3.scp-subhead {
	/* Title lives beside the current number. */
}
.scp-questionnaire form.scp-panel > .scp-eyebrow + .scp-subhead,
.scp-questionnaire form.scp-panel > .scp-subhead,
.scp-admin .scp-eyebrow + .scp-subhead {
	display: none;
}

.scp-steps-nav__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.35rem;
	height: 1.35rem;
	border: 1px solid var(--scp-line, #dcd8cc);
	border-radius: 50%;
	font-size: 0.6875rem;
	font-weight: 600;
}

.scp-steps-nav__item.is-done .scp-steps-nav__num {
	background: var(--scp-accent, #8ca96b);
	border-color: var(--scp-accent, #8ca96b);
	color: #fff;
}

.scp-steps-nav__item.is-current {
	color: var(--scp-primary, #2f4a38);
	font-weight: 600;
}

.scp-steps-nav__item.is-current .scp-steps-nav__num {
	background: var(--scp-primary, #2f4a38);
	border-color: var(--scp-primary, #2f4a38);
	color: #fff;
}

.scp-quest__intro {
	margin: 0 0 1.5rem;
	color: var(--scp-muted, #6f6e62);
}

.scp-quest__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.25rem;
}

.scp-qfield {
	flex: 1 1 100%;
	min-width: 0;
	margin-bottom: 1.5rem;
}

.scp-qfield--half {
	flex: 1 1 calc(50% - 0.625rem);
}

/* A conditional field (data-scp-when-field) transitions smoothly when JS
   reveals/hides it — everything else with [hidden] (unrelated fields, whole
   sections) still just disappears instantly via display:none, which is
   correct there. Overriding display for only the conditional case, not
   globally, keeps this scoped to the one thing it's for. display:none can't
   be transitioned, so the override is what makes the transition possible;
   without CSS at all (no JS either), max-height:0 + opacity:0 alone still
   correctly hides the field — the fail-safe behaviour survives, it just
   loses the animation, not the correctness. */
.scp-qfield[data-scp-when-field] {
	overflow: hidden;
	max-height: 40rem;
	opacity: 1;
	transition: max-height 0.3s ease, opacity 0.25s ease, margin-bottom 0.3s ease;
}

.scp-qfield[data-scp-when-field][hidden] {
	display: block;
	max-height: 0;
	opacity: 0;
	margin-bottom: 0;
	pointer-events: none;
}

.scp-qfield[hidden] {
	display: none;
}

.scp-qfield__label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--scp-primary, #2f4a38);
}

.scp-qfield .scp-hint {
	margin: 0 0 0.5rem;
}

.scp-qfield input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.scp-qfield select,
.scp-qfield textarea {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--scp-line, #dcd8cc);
	border-radius: var(--scp-radius, 4px);
	background: var(--scp-panel, #fff);
	color: var(--scp-ink, #3a3a34);
}

.scp-qfield input:focus,
.scp-qfield select:focus,
.scp-qfield textarea:focus {
	outline: 2px solid var(--scp-accent, #8ca96b);
	outline-offset: 1px;
	border-color: var(--scp-accent, #8ca96b);
}

.scp-qfield__details,
.scp-field__details {
	border: 1px solid var(--scp-line, #dcd8cc);
	border-radius: var(--scp-radius, 4px);
	padding: 0.7rem 0.9rem;
	background: var(--scp-panel, #fff);
}

.scp-qfield__details[open],
.scp-field__details[open] {
	padding-bottom: 0.9rem;
}

.scp-qfield__summary,
.scp-field__summary {
	cursor: pointer;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--scp-primary, #2f4a38);
}

.scp-qfield__details[open] .scp-qfield__summary,
.scp-field__details[open] .scp-field__summary {
	margin-bottom: 0.5rem;
}

.scp-qfield__details textarea,
.scp-field__details textarea {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--scp-line, #dcd8cc);
	border-radius: var(--scp-radius, 4px);
	background: var(--scp-panel, #fff);
	color: var(--scp-ink, #3a3a34);
	font-family: inherit;
	font-size: 1rem;
	margin-top: 0.5rem;
}

.scp-choices--tight {
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}

.scp-choice__tick--round {
	border-radius: 50%;
}

.scp-choice__tick--round::after {
	top: 0.26rem;
	left: 0.26rem;
	width: 0.5rem;
	height: 0.5rem;
	border: 0;
	border-radius: 50%;
	background: #fff;
	transform: scale(0);
}

.scp-choice__input:checked + .scp-choice .scp-choice__tick--round::after {
	transform: scale(1);
}

/* Sliders ------------------------------------------------------------------
   A range input cannot be styled either side of its thumb, so the filled part
   is painted as a gradient driven by a custom property the script updates. */

.scp-slider__value {
	display: block;
	margin: 0 0 0.4rem;
	font-family: var(--scp-font-heading, sans-serif);
	font-size: 1.5rem;
	color: var(--scp-primary, #2f4a38);
}

.scp-slider {
	--scp-slider-fill: 0%;
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 1.5rem;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.scp-slider::-webkit-slider-runnable-track {
	height: 0.4rem;
	border-radius: 999px;
	background: linear-gradient(
		to right,
		var(--scp-primary, #2f4a38) var(--scp-slider-fill),
		var(--scp-line, #dcd8cc) var(--scp-slider-fill)
	);
}

.scp-slider::-moz-range-track {
	height: 0.4rem;
	border-radius: 999px;
	background: var(--scp-line, #dcd8cc);
}

.scp-slider::-moz-range-progress {
	height: 0.4rem;
	border-radius: 999px;
	background: var(--scp-primary, #2f4a38);
}

.scp-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1.35rem;
	height: 1.35rem;
	margin-top: -0.475rem;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--scp-primary, #2f4a38);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.scp-slider::-moz-range-thumb {
	width: 1.35rem;
	height: 1.35rem;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--scp-primary, #2f4a38);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.scp-slider:focus-visible {
	outline: none;
}

.scp-slider:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px rgba(var(--scp-accent-rgb, 140, 169, 107), 0.6);
}

.scp-slider__ends {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	color: var(--scp-muted, #6f6e62);
}

.scp-quest__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	padding-top: 0.5rem;
	border-top: 1px solid var(--scp-line, #dcd8cc);
	margin-top: 0.5rem;
}

/* Mobile.

   The step list is dropped entirely rather than shrunk: the panel already says
   "Section 2 of 5" immediately below it, so on a narrow screen it is a second
   copy of the same information taking up a third of the first screenful. The
   percentage bar stays, because that is the part that tells somebody the end is
   in sight. */

@media (max-width: 48rem) {
	.scp .scp-steps-nav {
		display: none;
	}
}

@media (max-width: 30rem) {
	.scp-qfield--half {
		flex: 1 1 100%;
	}

	.scp-questionnaire .scp-panel,
	.scp-enquiry .scp-panel {
		padding: 1.15rem;
	}

	.scp-quest__fields {
		gap: 0;
	}

	.scp-qfield {
		margin-bottom: 1.25rem;
	}

	/* One option per row. Two cramped columns is how a tap lands on the wrong
	   answer. */
	.scp-choices,
	.scp-choices--tight {
		grid-template-columns: 1fr;
	}

	.scp-slider__value {
		font-size: 1.25rem;
	}

	.scp-slider__ends {
		font-size: 0.75rem;
	}

	.scp-quest__actions .scp-button {
		flex: 1 1 100%;
		text-align: center;
	}

	.scp-title {
		font-size: 1.25rem;
	}
}

/* Touch targets. A 1.05rem checkbox is fine to look at and awkward to hit, so
   the whole card is the target and it is tall enough to land on. */
@media (pointer: coarse) {
	.scp-choice {
		min-height: 3rem;
		padding: 0.9rem 1rem;
	}

	.scp-slider {
		height: 2.5rem;
	}

	.scp-slider::-webkit-slider-thumb {
		width: 1.75rem;
		height: 1.75rem;
		margin-top: -0.7rem;
	}

	.scp-slider::-moz-range-thumb {
		width: 1.75rem;
		height: 1.75rem;
	}
}

/* What has changed --------------------------------------------------------- */

.scp-whatsnew {
	padding: 1rem 1.25rem;
	margin: 0 0 var(--scp-space);
	border: 1px solid var(--scp-accent, #8ca96b);
	border-left-width: 4px;
	border-radius: var(--scp-radius, 4px);
	background: var(--scp-panel, #fff);
}

.scp-whatsnew__label {
	margin: 0 0 0.6rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--scp-primary, #2f4a38);
}

.scp-whatsnew__list {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.scp-whatsnew__list li {
	display: flex;
	gap: 0.9rem;
	align-items: baseline;
	padding: 0.35rem 0;
	font-size: 0.9375rem;
	list-style: none !important;
}

.scp-whatsnew__list li + li {
	border-top: 1px solid var(--scp-line, #dcd8cc);
}

.scp-whatsnew__when {
	flex: 0 0 3rem;
	font-size: 0.8125rem;
	color: var(--scp-muted, #6f6e62);
	white-space: nowrap;
}

.scp-whatsnew__link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
	color: var(--scp-ink, #3a3a34);
	text-decoration: none;
}

.scp-whatsnew__link:hover {
	color: var(--scp-primary, #2f4a38);
	text-decoration: underline;
}

.scp-whatsnew__go {
	color: var(--scp-accent, #8ca96b);
	font-size: 0.8125rem;
}

/* Deep-link target ----------------------------------------------------- */

.scp-highlighted {
	animation: scp-highlight-fade 3s ease-out;
	border-radius: var(--scp-radius, 4px);
}

@keyframes scp-highlight-fade {
	0% {
		box-shadow: 0 0 0 3px var(--scp-accent, #8ca96b);
		background-color: rgba(140, 169, 107, 0.14);
	}
	70% {
		box-shadow: 0 0 0 3px var(--scp-accent, #8ca96b);
		background-color: rgba(140, 169, 107, 0.14);
	}
	100% {
		box-shadow: 0 0 0 0 transparent;
		background-color: transparent;
	}
}

@media (prefers-reduced-motion: reduce) {
	.scp-highlighted {
		animation: none;
		box-shadow: 0 0 0 3px var(--scp-accent, #8ca96b);
		background-color: rgba(140, 169, 107, 0.14);
	}
}

.scp-step.is-new .scp-step__label {
	font-weight: 600;
	color: var(--scp-primary, #2f4a38);
}

.scp-eyebrow .scp-pill,
.scp-strong .scp-pill,
.scp-step .scp-pill {
	margin-left: 0.4rem;
	vertical-align: middle;
}

.scp-tab .scp-badge {
	margin-left: 0.3rem;
}

@media (max-width: 30rem) {
	.scp-whatsnew {
		padding: 0.85rem 1rem;
	}
}

.scp-field input[type="file"] {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px dashed var(--scp-line, #dcd8cc);
	border-radius: var(--scp-radius, 4px);
	background: var(--scp-surface, #ffffff);
	font-size: 0.9375rem;
}

.scp-file__actions .scp-link-quiet {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.8125rem;
}

.scp-people {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.scp-person {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	justify-content: space-between;
	padding: 0.85rem 0;
	list-style: none !important;
}

.scp-person + .scp-person {
	border-top: 1px solid var(--scp-line, #dcd8cc);
}

.scp-person__main {
	min-width: 0;
}

.scp-person__main p {
	margin: 0 0 0.15rem;
}

/* Dropzone ------------------------------------------------------------------ */

.scp-drop {
	padding: 1.25rem;
	border: 2px dashed var(--scp-line, #dcd8cc);
	border-radius: var(--scp-radius, 4px);
	background: var(--scp-surface, #ffffff);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.scp-drop.is-over {
	border-color: var(--scp-accent, #8ca96b);
	background: var(--scp-panel, #fff);
}

.scp-drop__prompt {
	margin: 0 0 0.6rem;
	font-size: 0.9375rem;
	color: var(--scp-muted, #6f6e62);
}

.scp-drop__or {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.8125rem;
}

.scp-drop input[type="file"] {
	width: 100%;
	border: 0;
	background: none;
	padding: 0;
}

.scp-drop__list {
	list-style: none !important;
	margin: 0.9rem 0 0;
	padding: 0;
}

.scp-drop__list li {
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	padding: 0.45rem 0;
	list-style: none !important;
	font-size: 0.875rem;
}

.scp-drop__list li + li {
	border-top: 1px solid var(--scp-line, #dcd8cc);
}

.scp-drop__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
	color: var(--scp-ink, #3a3a34);
}

.scp-drop__size {
	flex: 0 0 auto;
	color: var(--scp-muted, #6f6e62);
	font-size: 0.8125rem;
}

.scp-drop__remove {
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.8125rem;
	color: var(--scp-muted, #6f6e62);
	text-decoration: underline;
}

.scp-drop__remove:hover {
	color: var(--scp-primary, #2f4a38);
}

@media (pointer: coarse) {
	.scp-drop {
		padding: 1rem;
	}

	.scp-drop__remove {
		min-height: 2.25rem;
	}
}

/* Action required ----------------------------------------------------------- */

.scp-actions {
	border-left: 4px solid var(--scp-primary, #2f4a38);
}

.scp-actions__late {
	margin: 0 0 1rem;
	font-size: 0.875rem;
	color: var(--scp-warning, #8a6d3b);
}

.scp-actions__list {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.scp-action {
	display: flex;
	gap: 1.25rem;
	align-items: center;
	justify-content: space-between;
	padding: 0.9rem 0;
	list-style: none !important;
}

.scp-action + .scp-action {
	border-top: 1px solid var(--scp-line, #dcd8cc);
}

.scp-action__main {
	min-width: 0;
}

.scp-action__main p {
	margin: 0 0 0.15rem;
}

.scp-action__title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--scp-ink, #3a3a34);
}

.scp-action__due {
	font-size: 0.8125rem;
	color: var(--scp-muted, #6f6e62);
}

.scp-action__due.is-late {
	color: var(--scp-warning, #8a6d3b);
	font-weight: 600;
}

.scp-action__go {
	flex: 0 0 auto;
}

.scp-action.is-late .scp-action__title {
	color: var(--scp-primary, #2f4a38);
}

@media (max-width: 32rem) {
	.scp-action {
		display: block;
	}

	.scp-action__go {
		margin-top: 0.7rem;
		display: inline-block;
	}
}

/* Requests ------------------------------------------------------------------ */

.scp-backlink {
	margin: 0 0 1rem;
	font-size: 0.875rem;
}

.scp-request__prompt {
	font-size: 1rem;
}

.scp-numbered {
	list-style: none !important;
	counter-reset: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

.scp-numbered li {
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	flex-wrap: wrap;
	padding: 0.45rem 0;
	list-style: none !important;
	font-size: 0.9375rem;
}

.scp-numbered li + li {
	border-top: 1px solid var(--scp-line, #dcd8cc);
}

.scp-numbered__num {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--scp-signature, #ede8dc);
	color: var(--scp-primary, #2f4a38);
	font-size: 0.75rem;
	font-weight: 700;
}

.scp-inline-form {
	margin: 0;
	margin-left: auto;
}

.scp-inline-form .scp-link-quiet {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.8125rem;
}

.scp-outcome--variation-raised,
.scp-outcome--variation-declined {
	border-left-color: var(--scp-warning, #8a6d3b);
}

.scp-outcome--variation-declined {
	opacity: 0.7;
}

/* Quote lines --------------------------------------------------------------- */

.scp-quote-lines {
	margin: 0 0 var(--scp-space);
}

.scp-lines {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.scp-lines td {
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--scp-line, #dcd8cc);
	vertical-align: top;
}

.scp-lines__what {
	padding-right: 1rem;
}

.scp-lines__amount {
	width: 8rem;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.scp-lines tr.is-estimate .scp-lines__amount {
	color: var(--scp-muted, #6f6e62);
}

.scp-lines tfoot td {
	border-bottom: 0;
	padding-top: 0.5rem;
	color: var(--scp-muted, #6f6e62);
}

.scp-lines__total td {
	padding-top: 0.75rem;
	border-top: 2px solid var(--scp-primary, #2f4a38);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--scp-ink, #3a3a34);
}

.scp-lines__note {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	color: var(--scp-muted, #6f6e62);
}

.scp-figure {
	margin: 0.25rem 0 0.5rem;
	font-family: var(--scp-font-heading, sans-serif);
	font-size: 1.75rem;
	color: var(--scp-primary, #2f4a38);
}

/* Signature pad ------------------------------------------------------------- */

.scp-signpad__canvas {
	display: block;
	width: 100%;
	height: 180px;
	border: 1px solid var(--scp-line, #dcd8cc);
	border-radius: var(--scp-radius, 4px);
	/* Deliberately always white, not themed — a signing surface follows
	   paper/pad convention regardless of the portal's own colour scheme,
	   the same way a physical signature pad doesn't change colour to
	   match the room it's in. */
	background: #fff;
	touch-action: none;
	cursor: crosshair;
}

.scp-signpad .scp-hint {
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	justify-content: space-between;
}

.scp-signpad .scp-link-quiet {
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.8125rem;
	text-decoration: underline;
}

.scp-code-input {
	max-width: 9rem;
	letter-spacing: 0.4em;
	font-size: 1.25rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.scp-consent {
	padding: 0.9rem 1.1rem;
	margin: 0 0 1rem;
	border-left: 3px solid var(--scp-line, #dcd8cc);
	background: var(--scp-surface, #ffffff);
	font-size: 0.875rem;
	color: var(--scp-muted, #6f6e62);
}

.scp-consent p:last-child {
	margin-bottom: 0;
}

/* Document lifecycle ---------------------------------------------------- */

.scp-pill--muted {
	background: var(--scp-muted, #6f6e62);
}

.scp-file--superseded {
	opacity: 0.65;
}

.scp-file--superseded .scp-file__name {
	text-decoration: line-through;
	text-decoration-color: var(--scp-muted, #6f6e62);
}


/* EOI form title — beat theme uppercase/tracking that crushes "Tell us about…" */
.scp-enquiry .scp-title,
.scp-enquiry h2.scp-title {
	letter-spacing: 0 !important;
	word-spacing: normal !important;
	text-transform: none !important;
	font-weight: 500 !important;
	font-size: 1.65rem !important;
	line-height: 1.25 !important;
}
.scp-enquiry .scp-eyebrow {
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
/* Page canvas matches panel when surface is white */
.scp,
.scp-enquiry {
	background: var(--scp-surface, #ffffff);
}


/* Full-width hint under a half-width pair (email + phone, etc.) */
.scp-enquiry .scp-field.scp-hint--block,
.scp-enquiry .scp-hint--block,
.scp-field .scp-hint--block {
	margin: 0.35rem 0 1rem;
	max-width: 100%;
}
.scp-field--half + .scp-field:not(.scp-field--half) .scp-hint--block {
	margin-top: 0.15rem;
}

/* Enquiry page: cream --scp-surface is the page canvas; white panel is the form card */
.scp-enquiry {
	background: transparent;
}

.scp-enquiry--no-hints .scp-hint {
	display: none;
}

/* Milestone 4 — client proposal layout */
.scp-agreement .scp-proposal-glance__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	margin: 0 0 8px;
}
.scp-agreement .scp-proposal-glance__card {
	border: 1px solid var(--scp-line, #e2e6e3);
	border-radius: 6px;
	padding: 14px 16px;
	background: #fff;
}
.scp-agreement .scp-proposal-glance__card--total {
	background: var(--scp-brand-soft, #edf3ef);
	border-color: #c5d6cb;
}
.scp-agreement .scp-proposal-glance__label {
	margin: 0;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--scp-muted, #5c6560);
}
.scp-agreement .scp-proposal-glance__value {
	margin: 6px 0 0;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--scp-primary, #2f4a38);
}
.scp-agreement .scp-proposal-glance__value--date {
	font-size: 1.15rem;
}
.scp-agreement .scp-proposal-glance__hint {
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--scp-muted, #5c6560);
}
.scp-agreement .scp-proposal-scope__box {
	background: var(--scp-surface, #f7f8f6);
	border: 1px solid var(--scp-line, #e2e6e3);
	border-radius: 6px;
	padding: 14px 16px;
	margin: 12px 0;
}
.scp-agreement .scp-proposal-scope__box h3 {
	margin: 0 0 10px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--scp-muted, #5c6560);
}
.scp-agreement .scp-proposal-scope__box ul {
	margin: 0;
	padding-left: 1.15rem;
}
.scp-agreement .scp-proposal-scope__box li {
	margin: 0 0 6px;
}
.scp-agreement .scp-proposal-schedule__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	margin: 12px 0;
}
.scp-agreement .scp-proposal-schedule__card {
	border: 1px solid var(--scp-line, #e2e6e3);
	border-radius: 6px;
	padding: 16px;
}
.scp-agreement .scp-proposal-schedule__card h3 {
	margin: 0 0 8px;
	font-size: 14px;
	color: var(--scp-primary, #2f4a38);
}
.scp-agreement .scp-proposal-schedule__opts {
	margin: 8px 0 0;
	padding-left: 1.1rem;
	color: var(--scp-muted, #5c6560);
	font-size: 13px;
}
.scp-agreement .scp-proposal-schedule__generated {
	margin-top: 12px;
	font-size: 14px;
}
@media print {
	.scp-agreement .scp-proposal-glance__cards,
	.scp-agreement .scp-proposal-schedule__grid {
		break-inside: avoid;
	}
}


/* ——— Client proposal presentation (Milestone 4 must-do) ——— */
.scp-agreement .scp-deed {
	background: #fff;
	box-shadow: 0 8px 32px rgba(20, 30, 24, 0.06);
	border-radius: 4px;
	overflow: hidden;
}
.scp-agreement .scp-deed__facts--parties {
	margin-top: 16px;
	grid-template-columns: 1fr 1fr;
}
.scp-agreement .scp-proposal-glance__cards {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 12px;
}
.scp-agreement .scp-proposal-glance__card {
	border: 1px solid #e2e6e3;
	border-radius: 6px;
	padding: 14px 16px;
	background: #fff;
}
.scp-agreement .scp-proposal-glance__card--total {
	background: #edf3ef;
	border-color: #c5d6cb;
}
.scp-agreement .scp-proposal-glance__label {
	margin: 0;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #5c6560;
}
.scp-agreement .scp-proposal-glance__value {
	margin: 6px 0 0;
	font-size: 1.35rem;
	font-weight: 600;
	color: #2f4a38;
}
.scp-agreement .scp-proposal-glance__value--date {
	font-size: 1.1rem;
}
.scp-agreement .scp-proposal-glance__hint {
	margin: 4px 0 0;
	font-size: 12px;
	color: #5c6560;
}
.scp-agreement .scp-proposal-scope__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 12px;
}
.scp-agreement .scp-proposal-scope__box {
	border: 1px solid #e2e6e3;
	border-radius: 6px;
	padding: 14px 16px;
	background: #f7f8f6;
}
.scp-agreement .scp-proposal-scope__box h3 {
	margin: 0 0 10px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #2f4a38;
}
.scp-agreement .scp-proposal-scope__box ul {
	margin: 0;
	padding-left: 1.1em;
}
.scp-agreement .scp-proposal-scope__box li {
	margin: 0 0 6px;
}
.scp-agreement .scp-proposal-scope__box--out {
	background: #fff;
}
.scp-agreement .scp-proposal-scope__box--out li {
	color: #5c6560;
}
.scp-agreement .scp-proposal-scope__prose {
	margin: 0 0 12px;
}
.scp-agreement .scp-lines tr.is-package-head td {
	background: #f7f8f6;
	font-weight: 600;
}
.scp-agreement .scp-lines tr.is-discount td {
	color: #1b7a3d;
}
.scp-agreement .scp-proposal-schedule__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 12px;
}
.scp-agreement .scp-proposal-schedule__card {
	border: 1px solid #e2e6e3;
	border-radius: 6px;
	padding: 14px 16px;
	background: #f7f8f6;
}
.scp-agreement .scp-proposal-schedule__card h3 {
	margin: 0 0 8px;
	font-size: 14px;
	color: #2f4a38;
}
.scp-agreement .scp-proposal-schedule__opts {
	margin: 8px 0 0;
	padding-left: 1.1em;
}
.scp-agreement .scp-proposal-schedule__generated {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid #e2e6e3;
}
@media (max-width: 640px) {
	.scp-agreement .scp-proposal-glance__cards,
	.scp-agreement .scp-proposal-scope__cols,
	.scp-agreement .scp-proposal-schedule__grid {
		grid-template-columns: 1fr;
	}
}
@media print {
	.scp-portal-nav,
	.scp-meta a,
	.scp-accept,
	.scp-notices { display: none !important; }
	.scp-agreement .scp-deed {
		box-shadow: none;
		max-width: 100%;
	}
	.scp-agreement .scp-proposal-glance__card--total {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}


/* ——— Client agreement revised (!(1)–!(8)) ——— */
.scp-agreement .scp-proposal-scope__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 12px;
}
.scp-agreement .scp-proposal-scope__box--in {
	background: #edf3ef;
	border-color: #c5d6cb;
}
.scp-agreement .scp-proposal-lead__text {
	font-size: 15px;
	line-height: 1.55;
}
.scp-agreement .scp-proposal-terms__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	margin-top: 12px;
}
.scp-agreement .scp-proposal-term {
	display: block;
	border: 2px solid #e2e6e3;
	border-radius: 8px;
	padding: 14px;
	cursor: pointer;
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.scp-agreement .scp-proposal-term:hover,
.scp-agreement .scp-proposal-term:has(input:checked) {
	border-color: #2f4a38;
	box-shadow: 0 0 0 3px rgba(47, 74, 56, 0.12);
	background: #f4faf5;
}
.scp-agreement .scp-proposal-term input {
	margin: 0 0 8px;
}
.scp-agreement .scp-proposal-term__label {
	display: block;
	font-weight: 650;
	margin-bottom: 4px;
}
.scp-agreement .scp-proposal-term__price {
	display: block;
	font-size: 1.2rem;
	font-weight: 700;
	color: #2f4a38;
}
.scp-agreement .scp-proposal-term__price small {
	font-size: 13px;
	font-weight: 500;
	margin-left: 4px;
}
.scp-agreement .scp-proposal-term__note {
	display: block;
	font-size: 12px;
	color: #5c6560;
	margin-top: 6px;
}
.scp-agreement .scp-proposal-term--readonly {
	cursor: default;
}
.scp-agreement .scp-proposal-plan__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin: 8px 0 12px;
}
.scp-agreement .scp-proposal-plan__table th,
.scp-agreement .scp-proposal-plan__table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid #e2e6e3;
}
.scp-agreement .scp-proposal-plan__table th {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #5c6560;
}
.scp-agreement .scp-proposal-plan__amt {
	text-align: right !important;
	font-variant-numeric: tabular-nums;
}
.scp-agreement .scp-proposal-plan__total td {
	font-weight: 700;
	border-top: 2px solid #1c1c1a;
}
.scp-agreement .scp-proposal-lines__details {
	border: 1px solid #e2e6e3;
	border-radius: 8px;
	padding: 12px 16px;
	background: #fafaf8;
}
.scp-agreement .scp-proposal-lines__details summary {
	cursor: pointer;
	font-weight: 600;
	color: #2f4a38;
}
.scp-agreement .scp-pay-cta {
	background: #fff6e5;
	border: 1px solid #e8c96a;
	border-radius: 10px;
	padding: 18px 20px;
	margin: 16px 0 24px;
}
.scp-agreement .scp-pay-cta h3 {
	margin: 0 0 8px;
	font-size: 1.05rem;
	color: #5a4500;
}
.scp-agreement .scp-pay-cta__actions {
	margin: 14px 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.scp-agreement .scp-accepted-plan {
	margin-top: 8px;
}


/* Tab label variants — short on mobile, full on desktop */
.scp-tab__short { display: none; }
.scp-tab__full { display: inline; }

@media (max-width: 48rem) {
	.scp-tab__full { display: none; }
	.scp-tab__short { display: inline; }
}

/* ==========================================================================
   Mobile optimisation layer — portal
   Keeps sage/cream feel; prioritises thumb reach, readable type, and no
   horizontal overflow on phones and small tablets.
   ========================================================================== */

/* Base mobile rhythm ------------------------------------------------------ */
@media (max-width: 48rem) {
	.scp {
		--scp-space: 1.15rem;
		font-size: 16px; /* stops iOS zoom on focus */
		line-height: 1.65;
		padding-left: max(0.75rem, env(safe-area-inset-left));
		padding-right: max(0.75rem, env(safe-area-inset-right));
		padding-bottom: max(1rem, env(safe-area-inset-bottom));
	}

	.scp-panel {
		padding: 1.1rem 1rem;
		border-radius: 10px;
	}

	.scp-panel__title,
	.scp-subhead {
		font-size: 1.15rem;
		line-height: 1.3;
	}

	.scp-grid {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	/* Tabs — horizontal scroll, thumb-friendly, sticky under notch */
	.scp-tabs,
	.scp-tabs--standalone {
		display: flex;
		flex-wrap: nowrap;
		gap: 0.15rem;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin-left: -0.75rem;
		margin-right: -0.75rem;
		padding: 0.35rem 0.75rem 0;
		border-bottom: 1px solid var(--scp-line, #dcd8cc);
		position: sticky;
		top: 0;
		z-index: 40;
		background: var(--scp-surface, #fff);
		scroll-snap-type: x proximity;
	}

	.scp-tabs::-webkit-scrollbar,
	.scp-tabs--standalone::-webkit-scrollbar {
		display: none;
	}

	.scp-tab {
		flex: 0 0 auto;
		padding: 0.75rem 0.9rem;
		min-height: 2.75rem;
		font-size: 0.875rem;
		white-space: nowrap;
		scroll-snap-align: start;
		border-bottom-width: 3px;
	}

	/* Forms — full-width, large targets */
	.scp-field-row {
		display: block;
	}

	.scp-field input:not([type="checkbox"]):not([type="radio"]),
	.scp-field select,
	.scp-field textarea,
	.scp-qfield input:not([type="checkbox"]):not([type="radio"]),
	.scp-qfield select,
	.scp-qfield textarea {
		font-size: 16px !important; /* iOS: avoid auto-zoom */
		padding: 0.75rem 0.85rem;
		min-height: 2.75rem;
		border-radius: 8px;
	}

	.scp-field textarea,
	.scp-qfield textarea {
		min-height: 7rem;
	}

	.scp-button,
	.scp .scp-button {
		display: block;
		width: 100%;
		text-align: center;
		padding: 0.85rem 1.1rem;
		min-height: 2.85rem;
		font-size: 1rem;
		border-radius: 8px;
	}

	.scp-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.scp-actions .scp-button,
	.scp-actions .scp-button--quiet {
		width: 100%;
	}

	.scp-button--quiet {
		width: 100%;
	}

	/* Choice / multi chips */
	.scp-choice-grid,
	.scp-choices {
		grid-template-columns: 1fr !important;
	}

	.scp-choice,
	.scp .scp-choices label {
		min-height: 2.75rem;
		padding: 0.75rem 0.9rem;
		border-radius: 8px;
	}

	/* Files */
	.scp-file {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.scp-file__actions {
		width: 100%;
	}

	.scp-file__actions .scp-button {
		width: auto;
		display: inline-block;
	}

	/* Progress / questionnaire */
	.scp-qfield--half {
		flex: 1 1 100%;
	}

	.scp-steps-nav {
		gap: 0.5rem 0.75rem;
	}

	.scp-steps-nav__item {
		font-size: 0.75rem;
	}

	.scp-progress {
		margin: 0.5rem 0 1rem;
	}

	/* Cards */
	.scp-card-list {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.scp-card {
		padding: 1rem;
		border-radius: 10px;
	}

	/* Deed / agreement document */
	.scp-deed {
		border-radius: 10px;
		box-shadow: none;
		border: 1px solid var(--scp-line, #dcd8cc);
	}

	.scp-deed__head,
	.scp-agreement .scp-deed > header,
	.scp-agreement .body,
	.scp-agreement article.scp-deed {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.scp-deed__facts,
	.scp-deed__facts--parties,
	.scp-deed__facts--wide {
		grid-template-columns: 1fr !important;
		gap: 0.75rem;
	}

	.scp-deed__section {
		margin: 1.35rem 0;
	}

	.scp-deed__section h2 {
		font-size: 0.7rem;
		letter-spacing: 0.1em;
	}

	.scp-seal {
		padding: 1rem 1.1rem;
		border-radius: 10px;
	}

	/* Proposal layout */
	.scp-agreement .scp-proposal-scope__grid {
		grid-template-columns: 1fr;
	}

	.scp-agreement .scp-proposal-glance__cards {
		grid-template-columns: 1fr;
	}

	.scp-agreement .scp-proposal-glance__value {
		font-size: 1.5rem;
	}

	.scp-agreement .scp-proposal-terms__grid {
		grid-template-columns: 1fr;
	}

	.scp-agreement .scp-proposal-term {
		padding: 1rem 1.1rem;
		min-height: 4.5rem;
	}

	.scp-agreement .scp-proposal-term input {
		width: 1.15rem;
		height: 1.15rem;
		margin-right: 0.35rem;
	}

	/* Plan table — card-like rows on narrow screens */
	.scp-agreement .scp-proposal-plan__table,
	.scp-agreement .scp-proposal-plan__table thead,
	.scp-agreement .scp-proposal-plan__table tbody,
	.scp-agreement .scp-proposal-plan__table th,
	.scp-agreement .scp-proposal-plan__table td,
	.scp-agreement .scp-proposal-plan__table tr {
		display: block;
		width: 100%;
	}

	.scp-agreement .scp-proposal-plan__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.scp-agreement .scp-proposal-plan__table tr {
		border: 1px solid var(--scp-line, #e2e6e3);
		border-radius: 8px;
		padding: 0.65rem 0.85rem;
		margin-bottom: 0.55rem;
		background: #fff;
	}

	.scp-agreement .scp-proposal-plan__table td {
		border: 0;
		padding: 0.2rem 0;
		text-align: left !important;
	}

	.scp-agreement .scp-proposal-plan__table td.scp-proposal-plan__amt {
		font-weight: 700;
		color: var(--scp-primary, #2f4a38);
		font-size: 1.05rem;
		padding-top: 0.35rem;
	}

	.scp-agreement .scp-proposal-plan__total {
		background: #edf3ef !important;
		border-color: #c5d6cb !important;
	}

	/* Pay CTA — sticky within thumb zone after accept */
	.scp-agreement .scp-pay-cta {
		position: sticky;
		bottom: max(0.5rem, env(safe-area-inset-bottom));
		z-index: 30;
		margin-left: -0.25rem;
		margin-right: -0.25rem;
		box-shadow: 0 -6px 24px rgba(20, 30, 24, 0.12);
		border-radius: 12px;
	}

	.scp-agreement .scp-pay-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.scp-agreement .scp-pay-cta__actions .scp-button,
	.scp-agreement .scp-pay-cta__actions form {
		width: 100%;
	}

	.scp-agreement .scp-pay-cta__actions form .scp-button {
		width: 100%;
	}

	/* Sign pad */
	.scp-signpad canvas,
	[data-scp-signpad-canvas] {
		width: 100% !important;
		max-width: 100%;
		height: auto !important;
		min-height: 140px;
	}

	/* Code input */
	.scp-code-input {
		font-size: 1.35rem !important;
		letter-spacing: 0.35em;
		text-align: center;
		min-height: 3rem;
	}

	/* Header stack */
	.scp-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	/* Meta / back links */
	.scp-meta a {
		display: inline-block;
		padding: 0.35rem 0;
	}
}

/* Very small phones ------------------------------------------------------- */
@media (max-width: 22.5rem) {
	.scp {
		--scp-space: 1rem;
	}

	.scp-tab {
		padding: 0.65rem 0.7rem;
		font-size: 0.8125rem;
	}

	.scp-agreement .scp-proposal-glance__value {
		font-size: 1.35rem;
	}
}

/* Coarse pointer (touch) — always enlarge hit areas even on wide tablets */
@media (pointer: coarse) {
	.scp-tab {
		min-height: 2.75rem;
		padding-top: 0.7rem;
		padding-bottom: 0.7rem;
	}

	.scp input[type="checkbox"],
	.scp input[type="radio"] {
		width: 1.25rem !important;
		min-width: 1.25rem !important;
		height: 1.25rem !important;
	}

	.scp-button {
		min-height: 2.75rem;
	}

	.scp-stage__summary {
		min-height: 3rem;
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
}

/* Meetings / consultations booking funnel -------------------------------- */

.scp-schedule + .scp-book-funnel {
	margin-top: -0.5rem;
}

.scp .scp-book-steps {
	display: flex;
	gap: 0.35rem;
	margin: 0 0 1.25rem;
	padding: 0;
	counter-reset: scp-book-step;
}

.scp .scp-book-step {
	flex: 1 1 0;
	counter-increment: scp-book-step;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	margin: 0;
	padding: 0.35rem 0.15rem;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--scp-muted, #7a776e);
	text-align: center;
}

.scp .scp-book-step::before {
	content: counter(scp-book-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 999px;
	border: 1px solid var(--scp-line, #dcd8cc);
	background: var(--scp-surface, #fff);
	font-size: 0.75rem;
	letter-spacing: 0;
	color: inherit;
}

.scp .scp-book-step.is-current {
	color: var(--scp-primary, #2f4a38);
}

.scp .scp-book-step.is-current::before {
	background: var(--scp-primary, #2f4a38);
	border-color: var(--scp-primary, #2f4a38);
	color: #fff;
}

.scp .scp-book-step.is-done {
	color: var(--scp-primary, #2f4a38);
}

.scp .scp-book-step.is-done::before {
	content: "✓";
	background: var(--scp-signature, #ede8dc);
	border-color: var(--scp-primary, #2f4a38);
	color: var(--scp-primary, #2f4a38);
}

.scp .scp-book-types {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	margin: 0;
	padding: 0;
}

.scp a.scp-book-type {
	display: flex !important;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	width: 100%;
	padding: 0.95rem 1rem !important;
	border: 1px solid var(--scp-line, #dcd8cc);
	border-radius: var(--scp-radius, 8px);
	background: var(--scp-surface, #f7f5f0);
	color: var(--scp-ink, #3a3a34) !important;
	text-decoration: none !important;
	min-height: 3.25rem;
	box-sizing: border-box;
}

.scp a.scp-book-type:hover,
.scp a.scp-book-type:focus {
	border-color: var(--scp-primary, #2f4a38);
	background: #fff;
	color: var(--scp-ink, #3a3a34) !important;
	text-decoration: none !important;
}

.scp-book-type__label {
	flex: 1 1 10rem;
	font-weight: 600;
	font-size: 1rem;
	color: inherit;
}

.scp-book-type__desc {
	flex: 1 1 100%;
	font-size: 0.875rem;
	color: var(--scp-muted, #7a776e);
}

.scp-book-type__meta {
	font-size: 0.8rem;
	color: var(--scp-muted, #7a776e);
}

.scp-book-type__chevron {
	margin-left: auto;
	color: var(--scp-primary, #2f4a38);
	font-size: 1.25rem;
	line-height: 1;
}

.scp-book-context {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0 0 1rem;
	padding: 0.75rem 0.9rem;
	border-radius: var(--scp-radius, 8px);
	background: var(--scp-signature, #ede8dc);
}

.scp-book-context__title {
	display: block;
	font-size: 1rem;
}

.scp-book-context__meta {
	display: block;
	font-size: 0.8rem;
	color: var(--scp-muted, #7a776e);
}

.scp-book-reset {
	flex: 0 0 auto;
	align-self: center;
}

.scp-book-fieldset {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}

.scp-book-fieldset legend {
	margin: 0 0 0.5rem;
	font-weight: 600;
	font-size: 0.85rem;
}

.scp-book-choice {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.4rem;
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--scp-line, #dcd8cc);
	border-radius: var(--scp-radius, 8px);
	background: #fff;
	min-height: 2.75rem;
}

.scp-book-strip {
	display: flex;
	gap: 0.65rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0.35rem;
	margin: 0 0 1rem;
}

.scp-book-day {
	flex: 0 0 6.5rem;
}

.scp-book-day__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 0.4rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.scp-book-day__chips {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.scp-book-chip {
	width: 100%;
	min-height: 2.5rem;
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--scp-line, #dcd8cc);
	border-radius: 999px;
	background: #fff;
	color: var(--scp-ink, #3a3a34);
	font-size: 0.85rem;
}

.scp-book-chip.is-selected,
.scp-book-chip[aria-pressed="true"] {
	background: var(--scp-primary, #2f4a38);
	border-color: var(--scp-primary, #2f4a38);
	color: #fff;
}

@media (max-width: 30rem) {
	.scp-book-steps li {
		font-size: 0;
	}

	.scp-book-steps li.is-current {
		font-size: 0.65rem;
	}

	.scp-book-type {
		padding: 1rem 0.9rem;
	}
}

/* Prefer reduced data / motion already handled; add safe print remain */
@media print {
	.scp-tabs,
	.scp-pay-cta {
		position: static !important;
		box-shadow: none !important;
	}
}

/* First-visit portal tour ------------------------------------------------- */

html.scp-tour-lock,
body.scp-tour-lock {
	overflow: hidden !important;
	overscroll-behavior: none;
	touch-action: none;
}

.scp-tour-backdrop {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: transparent;
	touch-action: none;
	overscroll-behavior: none;
}

.scp-tour-spot {
	position: absolute;
	z-index: 9998;
	border-radius: 8px;
	box-shadow: 0 0 0 9999px rgba(20, 20, 18, 0.72);
	pointer-events: none;
	transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}

.scp-tour-card {
	position: absolute;
	z-index: 9999;
	max-width: 300px;
	padding: 1.1rem 1.2rem;
	border-radius: 10px;
	background: var(--scp-panel, #fff);
	color: var(--scp-ink, #3a3a34);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
	font-family: var(--scp-font-body, sans-serif);
}

.scp-tour-card__step {
	margin: 0 0 0.35rem;
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--scp-muted, #6f6e62);
}

.scp-tour-card__title {
	margin: 0 0 0.5rem;
	font-family: var(--scp-font-heading, sans-serif);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--scp-primary, #2f4a38);
}

.scp-tour-card__body {
	margin: 0 0 1rem;
	font-size: 0.875rem;
	line-height: 1.5;
}

.scp-tour-card__actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
}

.scp-tour-card__skip,
.scp-tour-card__back {
	background: none;
	border: 0;
	padding: 0;
	color: var(--scp-muted, #6f6e62);
	font-size: 0.8rem;
	cursor: pointer;
	text-decoration: underline;
}

.scp-tour-card__next {
	background: var(--scp-primary, #2f4a38);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 0.5rem 1rem;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.scp-tour-spot,
	.scp-tour-card {
		transition: none;
	}
}


.scp-eoi-qualify {
	outline: 2px solid var(--scp-danger, #8c3a2e);
	outline-offset: 4px;
	border-radius: 6px;
}
.scp-eoi-qualify-note {
	margin: 0 0 0.85rem;
	padding: 0.7rem 0.85rem;
	border-left: 3px solid var(--scp-danger, #8c3a2e);
	background: #f8ece9;
	color: var(--scp-danger, #8c3a2e);
	font-size: 0.9375rem;
}

.scp-eoi-contact {
	outline: 2px solid var(--scp-danger, #8c3a2e);
	outline-offset: 4px;
	border-radius: 6px;
}

.scp-model {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: #1d2327;
	display: flex;
	flex-direction: column;
}
.scp-model[hidden] { display: none; }
.scp-model__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 16px;
	color: #fff;
	background: #111;
}
.scp-model__tools { display: flex; gap: 6px; flex-wrap: wrap; }
.scp-model__tools button, .scp-model__close {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255,255,255,.4);
	border-radius: 4px;
	padding: 6px 10px;
	cursor: pointer;
	font-size: 13px;
}
.scp-model__tools button.is-on { background: #2271b1; border-color: #2271b1; }
.scp-model__stage { position: relative; flex: 1; min-height: 0; }
#scp-model-canvas { width: 100%; height: 100%; display: block; }
#scp-model-cube {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 140px;
	height: 140px;
}
.scp-model__tree {
	position: absolute;
	top: 12px;
	left: 12px;
	width: 240px;
	max-height: calc(100% - 24px);
	overflow: auto;
	background: rgba(17,17,17,.9);
	color: #fff;
	padding: 8px;
	border-radius: 6px;
	font-size: 13px;
}
.scp-files-rule { border: 0; border-top: 1px solid var(--scp-line, #e4ddd2); margin: 14px 8px; }
.scp-files-heading { margin: 8px 10px 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--scp-muted, #6e675e); }
.scp-files-heading .scp-pill { margin-left: 6px; letter-spacing: 0; text-transform: none; }
.scp-shared { border-top: 1px solid var(--scp-line, #e4ddd2); margin-top: 8px; }
.scp-shared summary { cursor: pointer; padding: 10px 0; }
.scp-shared summary p { margin: 2px 0 0; }
.scp-card { background: #fbfaf7; border: 1px solid #e4ddd2; border-radius: 12px; overflow: hidden; }
.scp-card__shot { aspect-ratio: 4/3; background: #efeae2 center/cover no-repeat; position: relative; }
.scp-card.is-drawing .scp-card__shot { background-size: contain; background-color: #fff; }
.scp-card__meta { padding: 10px 12px 12px; }
.scp-card__meta strong { display: block; color: #2c2824; }
.scp-card__meta span { color: #6e675e; font-size: 13px; }
@media (max-width: 800px) { .scp-gallery { grid-template-columns: 1fr 1fr; } }
.scp-flag { position: absolute; top: 8px; left: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; background: #fff; border-radius: 999px; padding: 3px 8px; }
.scp-flag--chosen { background: #e5f0ea; color: #2f6b4f; }
.scp-flag--shortlisted { background: #f7efe4; color: #8a5a2b; }
.scp-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.scp-pills .scp-pill { text-decoration: none; }
.scp-pills .is-on { background: #f3eadc; border-color: #8a6a3b; color: #8a6a3b; }
.scp-note { margin-top: 16px; background: #fff; border: 1px solid var(--scp-line, #e4ddd2); border-radius: 12px; padding: 12px; }
.scp-note textarea { width: 100%; min-height: 70px; margin: 8px 0; }
.scp-actions { margin-top: 16px; }
@media (max-width: 800px) { .scp-gallery { grid-template-columns: 1fr 1fr; } }
	margin: 0;
	padding: 8px 16px;
	color: #c3c4c7;
	font-size: 13px;
}
body.scp-model-open { overflow: hidden; }