/*
Theme Name: Beep Custom
Theme URI: https://beepsys.co.uk
Author: Beep System
Description: "Till roll" design for Beep System. Standalone theme, no parent theme, no page builder. Design only: all words, contact details, prices, menus, images and SEO are set in WP admin.
Version: 3.1.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: beep-custom
*/

/* ==========================================================================
   Fonts (self-hosted)
   ========================================================================== */
@font-face {
	font-family: "Archivo";
	src: url("assets/fonts/archivo-var.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
}
@font-face {
	font-family: "Instrument Sans";
	src: url("assets/fonts/instrument-sans-var.woff2") format("woff2");
	font-weight: 400 700;
	font-display: swap;
}
@font-face {
	font-family: "DM Mono";
	src: url("assets/fonts/dm-mono-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "DM Mono";
	src: url("assets/fonts/dm-mono-500.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
	--counter: #efefea;
	--receipt: #ffffff;
	--ink: #14130f;
	--signal: #f45a2a;
	--signal-deep: #d84a1c;
	--sticker: #ffdd00;
	--pencil: #5a5850;
	--rule: #c9c9c1;

	--font-display: "Archivo", "Arial Narrow", Arial, sans-serif;
	--font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-ticket: "DM Mono", ui-monospace, "Courier New", monospace;

	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4.5rem;
	--sp-9: 7rem;

	--radius: 4px;
	--gutter: clamp(1.25rem, 4vw, 2.5rem);
	--wrap: 1240px;
	--wrap-narrow: 760px;

	--header-h: 76px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
	margin: 0;
	background: var(--counter);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 86%;
	letter-spacing: -0.02em;
	line-height: 1.05;
	text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.25rem); line-height: 1; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem); }
h3 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem); line-height: 1.12; }
h4 { font-size: 1.15rem; line-height: 1.2; }
p, li { text-wrap: pretty; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.on-ink :focus-visible, .site-footer :focus-visible, .section--ink :focus-visible { outline-color: var(--sticker); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}
.skip-link {
	position: absolute; left: var(--sp-4); top: -100px; z-index: 1000;
	padding: var(--sp-3) var(--sp-5);
	background: var(--ink); color: #fff; border-radius: var(--radius);
}
.skip-link:focus { top: var(--sp-4); }

.container { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--wrap-narrow) + 2 * var(--gutter)); }

.section { padding-block: var(--sp-8); }
.section--tall { padding-block: var(--sp-9); }
.section--flush-top { padding-top: 0; }
.section--paper { background: var(--receipt); }
.section--ink { background: var(--ink); color: #f4f4ee; }
.section--ink .muted { color: #b9b8ae; }
.muted { color: var(--pencil); }
.lead { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); line-height: 1.5; max-width: 34em; }

.mono { font-family: var(--font-ticket); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
	min-height: 54px; padding: 0 var(--sp-6);
	background: var(--signal); color: var(--ink);
	border: 2px solid var(--ink); border-radius: var(--radius);
	font-family: var(--font-display); font-weight: 700; font-stretch: 92%;
	font-size: 1.05rem; line-height: 1; letter-spacing: -0.005em; text-decoration: none;
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease;
}
.btn:hover { background: var(--ink); color: #fff; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--small { min-height: 44px; padding: 0 var(--sp-5); font-size: 0.98rem; }
.btn--wide { width: 100%; }
.on-ink .btn, .section--ink .btn { border-color: #f4f4ee; }
.on-ink .btn:hover, .section--ink .btn:hover { background: #f4f4ee; color: var(--ink); }
.on-signal .btn { background: var(--ink); color: #fff; }
.on-signal .btn:hover { background: #fff; color: var(--ink); }
.on-signal .btn--ghost { background: transparent; color: var(--ink); }
.on-signal .btn--ghost:hover { background: var(--ink); color: #fff; }

.link-arrow { font-weight: 600; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: var(--counter);
	border-bottom: 2px solid var(--ink);
}
.site-header__bar {
	display: flex; align-items: center; gap: var(--sp-6);
	min-height: var(--header-h);
}
.brand { display: flex; align-items: center; flex: none; font-family: var(--font-display); font-weight: 800; font-stretch: 82%; font-size: 1.6rem; letter-spacing: -0.02em; text-decoration: none; }
.brand img, .brand .custom-logo { width: auto; max-height: 44px; }
.brand .custom-logo-link { display: flex; }

.primary-nav { flex: 1; }
.primary-nav > ul { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.primary-nav li { position: relative; }
.primary-nav a {
	display: block; padding: var(--sp-3) var(--sp-3);
	font-weight: 600; font-size: 0.98rem; text-decoration: none; border-radius: var(--radius);
}
.primary-nav a:hover, .primary-nav .current-menu-item > a, .primary-nav .current-menu-ancestor > a { background: var(--ink); color: #fff; }
.primary-nav .menu-item-has-children > a::after {
	content: ""; display: inline-block; width: 0.42em; height: 0.42em; margin-left: 0.5em;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: translateY(-0.18em) rotate(45deg);
}
.primary-nav .sub-menu {
	position: absolute; left: 0; top: 100%; min-width: 260px; padding: var(--sp-2);
	background: var(--receipt); border: 2px solid var(--ink); border-radius: var(--radius);
	display: none;
}
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu { display: block; }
.primary-nav .sub-menu a { padding: var(--sp-3) var(--sp-4); }

.header-actions { display: flex; align-items: center; gap: var(--sp-4); flex: none; }
.header-phone { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ticket); font-weight: 500; font-size: 0.98rem; text-decoration: none; white-space: nowrap; }
.header-phone:hover { text-decoration: underline; }

.nav-toggle {
	display: none; align-items: center; gap: var(--sp-2);
	min-height: 44px; padding: 0 var(--sp-4);
	background: transparent; color: var(--ink);
	border: 2px solid var(--ink); border-radius: var(--radius);
	font: 700 1rem var(--font-display); cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 18px; height: 2px; background: currentColor; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

.breadcrumb-bar { border-bottom: 1px solid var(--rule); font-size: 0.9rem; color: var(--pencil); }
.breadcrumbs { padding-block: var(--sp-3); }
.breadcrumbs a { color: var(--ink); }
.breadcrumbs .rank-math-breadcrumb p { margin: 0; }
.breadcrumbs .separator { margin: 0 0.5em; }
.breadcrumb-sep { margin: 0 0.5em; }

/* ==========================================================================
   Inner-page heading
   ========================================================================== */
.page-head { padding-block: var(--sp-8) var(--sp-6); border-bottom: 2px solid var(--ink); }
.page-head h1 { font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4rem); max-width: 20ch; margin-bottom: 0; }
.page-head .lead { margin: var(--sp-5) 0 0; }
.page-head__meta { margin: var(--sp-4) 0 0; font-family: var(--font-ticket); font-size: 0.9rem; color: var(--pencil); }

/* ==========================================================================
   Ticket (receipt) component
   ========================================================================== */
.ticket {
	position: relative;
	background: var(--receipt);
	color: var(--ink);
	font-family: var(--font-ticket);
	font-size: 0.95rem;
	line-height: 1.5;
	padding: var(--sp-6) var(--sp-5) calc(var(--sp-6) + 10px);
	-webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%;
	mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%;
}
.ticket--flat { -webkit-mask: none; mask: none; padding-bottom: var(--sp-6); border: 2px solid var(--ink); border-radius: var(--radius); }
.ticket__brand { margin: 0; font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: 1.5rem; letter-spacing: -0.01em; text-align: center; }
.ticket__sub { margin: var(--sp-1) 0 0; text-align: center; color: var(--pencil); font-size: 0.82rem; }
.ticket__rule { margin: var(--sp-4) 0; border: 0; border-top: 2px dashed var(--rule); }
.ticket__lines { display: grid; gap: var(--sp-2); }
.ticket__line { display: flex; align-items: baseline; gap: var(--sp-2); }
.ticket__leader { flex: 1; min-width: 1rem; border-bottom: 2px dotted var(--rule); transform: translateY(-0.28em); }
.ticket__price { white-space: nowrap; }
.ticket__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); font-weight: 500; }
.ticket__total-label { font-size: 0.9rem; }
.ticket__total-amount { font-family: var(--font-display); font-weight: 800; font-stretch: 84%; font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); letter-spacing: -0.03em; line-height: 1; }
.ticket__total-amount small { font-family: var(--font-ticket); font-size: 0.9rem; font-weight: 400; letter-spacing: 0; }
.ticket__note { margin: var(--sp-3) 0 0; font-size: 0.82rem; color: var(--pencil); text-align: center; }

@media (prefers-reduced-motion: no-preference) {
	.ticket--print { animation: ticket-feed 1.8s steps(28, end) 0.15s both; }
	@keyframes ticket-feed {
		from { clip-path: inset(0 0 100% 0); }
		to { clip-path: inset(0 0 0 0); }
	}
}

/* ==========================================================================
   Forms
   ========================================================================== */
.lead-form { display: grid; gap: var(--sp-4); font-family: var(--font-body); }
.lead-form__head h2 { font-size: 1.6rem; margin-bottom: var(--sp-2); }
.lead-form__head p { margin: 0 0 var(--sp-4); font-family: var(--font-body); color: var(--pencil); font-size: 0.95rem; }
.lead-form__field label { display: block; margin-bottom: 2px; font-size: 0.88rem; font-weight: 600; }
.lead-form__challenge-hint { font-weight: 400; color: var(--pencil); }
.lead-form input[type="text"], .lead-form input[type="tel"], .lead-form input[type="email"], .lead-form select, .lead-form textarea, .search-field, .field input, .field textarea {
	width: 100%; min-height: 48px; padding: var(--sp-2) 0;
	background: transparent; color: var(--ink);
	border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
	font: inherit; font-size: 1.05rem;
}
.lead-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 28px; }
.lead-form textarea { min-height: 0; resize: vertical; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { outline: none; border-bottom-color: var(--signal); box-shadow: 0 2px 0 0 var(--signal); }
.lead-form input[aria-invalid="true"], .lead-form select[aria-invalid="true"] { border-bottom-color: #b3261e; }
.lead-form__hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.lead-form__status { margin: 0; padding: var(--sp-3); background: #fbe9e7; border-left: 4px solid #b3261e; font-size: 0.95rem; }
.lead-form__fineprint { margin: 0; font-size: 0.82rem; color: var(--pencil); text-align: center; }
.lead-form__success { padding: var(--sp-4) 0; }
.lead-form__success strong { font-family: var(--font-display); font-size: 1.5rem; font-stretch: 86%; }
.lead-form-slip { margin-top: 0; }
.lead-form-slip__cut { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-3); font-size: 0.85rem; font-weight: 500; color: var(--ink); }
.lead-form-slip__cut span { flex: 1; border-top: 2px dashed var(--pencil); }
.lead-form--compact { grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-4); }
.lead-form--compact > *:not(.lead-form__field), .lead-form--compact .lead-form__field--wide { grid-column: 1 / -1; }
.lead-form--compact .lead-form__field label { font-size: 0.78rem; margin-bottom: 0; }
.lead-form--compact input[type="text"], .lead-form--compact input[type="tel"], .lead-form--compact input[type="email"], .lead-form--compact select { min-height: 38px; padding: 4px 0; font-size: 1rem; }
.lead-form--compact textarea { height: 3.2em; padding: 4px 0; font-size: 1rem; }
.lead-form--compact .btn { min-height: 48px; margin-top: var(--sp-2); }
.lead-form--compact .lead-form__challenge-hint { display: none; }
.lead-form--compact .lead-form__fineprint { font-size: 0.76rem; }
.home-empty { padding-block: var(--sp-6); border-block: 2px dashed var(--rule); color: var(--pencil); text-align: center; font-family: var(--font-ticket); font-size: 0.9rem; }

.on-ink .lead-form input, .on-ink .lead-form select, .on-ink .lead-form textarea { color: #f4f4ee; border-bottom-color: #f4f4ee; }

.field { margin-bottom: var(--sp-4); }
.field label { display: block; margin-bottom: 2px; font-size: 0.9rem; font-weight: 600; }

.search-form { display: flex; gap: var(--sp-3); align-items: end; }
.search-form label { flex: 1; }
.search-submit { min-height: 48px; padding: 0 var(--sp-5); background: var(--ink); color: #fff; border: 2px solid var(--ink); border-radius: var(--radius); font: 700 1rem var(--font-display); cursor: pointer; }
.search-submit:hover { background: var(--signal); color: var(--ink); }

/* ==========================================================================
   Home: hero
   ========================================================================== */
.hero { padding-block: var(--sp-6) var(--sp-7); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr); gap: var(--sp-7); align-items: center; }
.hero__copy h1 { margin-bottom: var(--sp-5); }
.hero__copy .lead { margin-bottom: var(--sp-6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero__ticket { max-width: 480px; justify-self: end; width: 100%; }

/* ==========================================================================
   Home: trust strip (customer logos, only when set)
   ========================================================================== */
.trust { padding-block: var(--sp-6); border-block: 2px solid var(--ink); }
.trust__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-5) var(--sp-7); }
.trust__title { margin: 0; font-weight: 600; max-width: 12em; line-height: 1.25; }
.trust__logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5) var(--sp-7); flex: 1; }
.trust__logos img { max-height: 40px; width: auto; filter: grayscale(1) contrast(1.1); opacity: 0.8; }

/* ==========================================================================
   Menu board (products) and index (industries)
   ========================================================================== */
.split-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--sp-7); align-items: end; margin-bottom: var(--sp-6); }
.split-head h2, .split-head p { margin: 0; }
.split-head p { color: var(--pencil); font-size: 1.1rem; }
.section--ink .split-head p { color: #b9b8ae; }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); }
.tiles > li { border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.tile { display: flex; flex-direction: column; height: 100%; text-decoration: none; transition: background-color 0.12s ease, color 0.12s ease; }
.tile:hover { background: var(--ink); color: #f4f4ee; }
.tile__media { display: flex; align-items: center; justify-content: center; height: 180px; padding: var(--sp-4); background: var(--receipt); border-bottom: 1px solid var(--rule); }
.tile__media img { width: 100%; height: 100%; object-fit: contain; }
.tile__body { display: block; padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.tile__name { margin: 0 0 var(--sp-1); font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); }
.tile__text { display: block; color: var(--pencil); font-size: 0.98rem; line-height: 1.45; }
.tile:hover .tile__text { color: #d4d3c9; }
.tile--text { justify-content: flex-end; background: var(--ink); color: #f4f4ee; }
.tile--text .tile__text { color: #b9b8ae; }
.tile--text:hover { background: var(--signal); color: var(--ink); }
.tile--text:hover .tile__text { color: var(--ink); }
.section-action { margin: var(--sp-6) 0 0; }

.index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--sp-7); border-top: 2px solid var(--ink); }
.index__link {
	display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
	padding: var(--sp-4) 0; border-bottom: 2px dashed var(--rule);
	font-family: var(--font-display); font-weight: 700; font-stretch: 90%; font-size: 1.3rem; letter-spacing: -0.015em; text-decoration: none;
}
.index__link::after { content: ""; flex: none; width: 0.55em; height: 0.55em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: 0.5; }
.index__link:hover { background: var(--signal); padding-inline: var(--sp-3); margin-inline: calc(-1 * var(--sp-3)); }
.index__link:hover::after { opacity: 1; }

/* ==========================================================================
   Home: why (long receipt)
   ========================================================================== */
.why { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-8); align-items: start; }
.why__head { position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
.why__head h2 { margin-bottom: var(--sp-5); }
.why__head img { margin-top: var(--sp-6); max-height: 300px; width: auto; }
.why__list { display: grid; }
.why__item { padding: var(--sp-6) 0; border-bottom: 2px dashed var(--rule); }
.why__item:first-child { padding-top: 0; }
.why__item:last-child { border-bottom: 0; }
.why__item h3 { margin-bottom: var(--sp-2); }
.why__item p { margin: 0; color: var(--pencil); max-width: 36em; }

/* ==========================================================================
   Home: pricing block with sticker
   ========================================================================== */
.offer { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--sp-8); align-items: center; }
.offer__checks { margin: var(--sp-5) 0 var(--sp-6); display: grid; gap: var(--sp-3); }
.offer__checks li { display: flex; gap: var(--sp-3); align-items: baseline; font-weight: 600; }
.offer__checks li::before { content: ""; flex: none; width: 0.8em; height: 0.45em; border-left: 3px solid var(--signal); border-bottom: 3px solid var(--signal); transform: translateY(-0.2em) rotate(-45deg); }
.offer__media { position: relative; }
.offer__media img { width: 100%; max-height: 460px; object-fit: contain; }

.offer__action { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-5) var(--sp-6); }
.sticker {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	width: 150px; flex: none; aspect-ratio: 1;
	background: var(--sticker); color: var(--ink);
	clip-path: polygon(50.0% 0.0%, 58.0% 9.8%, 69.1% 3.8%, 72.8% 15.9%, 85.4% 14.6%, 84.1% 27.2%, 96.2% 30.9%, 90.2% 42.0%, 100.0% 50.0%, 90.2% 58.0%, 96.2% 69.1%, 84.1% 72.8%, 85.4% 85.4%, 72.8% 84.1%, 69.1% 96.2%, 58.0% 90.2%, 50.0% 100.0%, 42.0% 90.2%, 30.9% 96.2%, 27.2% 84.1%, 14.6% 85.4%, 15.9% 72.8%, 3.8% 69.1%, 9.8% 58.0%, 0.0% 50.0%, 9.8% 42.0%, 3.8% 30.9%, 15.9% 27.2%, 14.6% 14.6%, 27.2% 15.9%, 30.9% 3.8%, 42.0% 9.8%);
	transform: rotate(-9deg);
	text-align: center; line-height: 1;
}
.sticker__label { font-family: var(--font-ticket); font-weight: 500; font-size: 0.85rem; }
.sticker__amount { font-family: var(--font-display); font-weight: 900; font-stretch: 80%; font-size: 3.2rem; letter-spacing: -0.04em; }
.sticker__unit { font-family: var(--font-ticket); font-size: 0.85rem; }

/* ==========================================================================
   Home: proof (clients, testimonials) and closing band
   ========================================================================== */
.clients-band { padding-block: var(--sp-7); border-bottom: 2px solid var(--ink); overflow: hidden; }
.clients-band .split-head { margin-bottom: var(--sp-5); }
.marquee { overflow: hidden; }
.marquee:focus-visible { outline-offset: -3px; }
.marquee__track { display: flex; width: max-content; gap: var(--sp-4); padding-inline: var(--sp-2); animation: marquee var(--marquee-duration, 40s) linear infinite; }
.marquee__track--reverse { animation-direction: reverse; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--sp-2))); } }
.slip { flex: none; width: 250px; }
.slip__body { display: flex; flex-direction: column; height: 100%; background: var(--receipt); border: 2px solid var(--ink); border-radius: var(--radius); text-decoration: none; overflow: hidden; }
a.slip__body:hover { background: var(--ink); color: #f4f4ee; }
.slip__map { display: block; position: relative; width: 100%; aspect-ratio: 250 / 140; overflow: hidden; background: #e8e6df; border-bottom: 2px solid var(--ink); }
.slip__mapimg { width: 100%; height: 100%; object-fit: cover; }
.slip__tiles { display: block; position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.slip__tiles img { position: absolute; max-width: none; width: 256px; height: 256px; }
.slip__pin { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -16px 0 0 -8px; background: var(--signal); border: 2px solid var(--ink); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.slip__credit { position: absolute; right: 0; bottom: 0; padding: 0 4px; background: rgba(255, 255, 255, 0.8); font: 400 10px/1.5 var(--font-body); color: #333; }
.slip__row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); }
.slip__body:not(.slip__body--map) .slip__row { flex-direction: column; align-items: flex-start; padding-top: var(--sp-4); }
.slip__body:not(.slip__body--map) .slip__photo { width: 100%; height: 96px; }
.slip__photo { display: flex; flex: none; align-items: center; justify-content: center; width: 68px; height: 44px; padding: 3px; background: var(--receipt); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.slip__body:not(.slip__body--map) .slip__photo { border: 0; }
.slip__photo img { width: 100%; height: 100%; object-fit: contain; }
.slip__text { display: block; min-width: 0; }
.slip__name { display: block; font-family: var(--font-display); font-weight: 700; font-stretch: 90%; font-size: 1.05rem; line-height: 1.15; word-spacing: 0.12em; }
.slip__meta { display: block; margin-top: 2px; font-family: var(--font-ticket); font-size: 0.74rem; line-height: 1.35; color: var(--pencil); }
a.slip__body:hover .slip__meta { color: #d4d3c9; }
a.slip__body:hover .slip__photo { border-color: transparent; }
@media (prefers-reduced-motion: reduce) {
	.marquee { overflow-x: auto; }
	.marquee__track { animation: none !important; }
	.slip[aria-hidden="true"] { display: none; }
}

.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
.quote { margin: 0; padding-top: var(--sp-5); border-top: 2px solid var(--ink); }
.quote p { font-family: var(--font-display); font-weight: 600; font-stretch: 92%; font-size: 1.35rem; line-height: 1.25; letter-spacing: -0.01em; }
.quote footer { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); font-size: 0.95rem; }
.quote footer img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.quote cite { display: block; font-style: normal; font-weight: 700; }

.cta { background: var(--signal); color: var(--ink); padding-block: var(--sp-9); }
.cta__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-7); align-items: end; }
.cta h2 { font-size: clamp(2.1rem, 1rem + 3.4vw, 3.6rem); max-width: 16ch; margin-bottom: var(--sp-4); }
.cta p { font-size: 1.2rem; max-width: 30em; margin-bottom: 0; }
.cta__actions { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.cta__phone { font-family: var(--font-display); font-weight: 900; font-stretch: 82%; font-size: clamp(2rem, 1rem + 3.4vw, 3.6rem); letter-spacing: -0.03em; line-height: 1; text-decoration: none; white-space: nowrap; }
.cta__phone:hover { text-decoration: underline; text-decoration-thickness: 0.06em; }

/* ==========================================================================
   Content pages: prose
   ========================================================================== */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); margin-top: 1.8em; }
.prose h3 { margin-top: 1.5em; }
.prose a { color: var(--ink); text-decoration-color: var(--signal); text-decoration-thickness: 0.14em; }
.prose a:hover { background: var(--signal); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: square; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.35em; }
.prose li::marker { color: var(--signal-deep); }
.prose blockquote { margin-inline: 0; padding-left: var(--sp-5); border-left: 4px solid var(--signal); font-family: var(--font-display); font-stretch: 92%; font-weight: 600; font-size: 1.4rem; line-height: 1.3; }
.prose img { border: 2px solid var(--ink); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.prose th, .prose td { padding: var(--sp-3); border-bottom: 1px solid var(--rule); text-align: left; }
.prose th { border-bottom: 2px solid var(--ink); font-family: var(--font-display); }
.prose hr { border: 0; border-top: 2px dashed var(--rule); margin-block: var(--sp-7); }

.entry-thumb { margin: 0 0 var(--sp-6); border: 2px solid var(--ink); }

/* ==========================================================================
   Blog, archive, search
   ========================================================================== */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-7) var(--sp-6); }
.post { display: flex; flex-direction: column; padding-top: var(--sp-4); border-top: 2px solid var(--ink); }
.post__img { margin-bottom: var(--sp-4); }
.post__img img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; }
.post__date { font-family: var(--font-ticket); font-size: 0.85rem; color: var(--pencil); }
.post h3 { margin: var(--sp-2) 0; }
.post h3 a { text-decoration: none; }
.post h3 a:hover { text-decoration: underline; text-decoration-thickness: 0.06em; }
.post p { color: var(--pencil); }
.post__more { margin-top: auto; font-weight: 700; }

.pagination { margin-top: var(--sp-8); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pagination .page-numbers { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 0 var(--sp-3); border: 2px solid var(--ink); border-radius: var(--radius); font-weight: 700; text-decoration: none; }
.pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--ink); color: #fff; }

.empty { max-width: 34em; padding-block: var(--sp-6); }
.empty h2 { font-size: 2rem; }

.notfound { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); }
.notfound h2 { font-size: 1.6rem; }
.notfound__list li { border-bottom: 2px dashed var(--rule); }
.notfound__list a { display: block; padding: var(--sp-3) 0; font-weight: 600; text-decoration: none; }
.notfound__list a:hover { background: var(--signal); padding-inline: var(--sp-3); }

/* ==========================================================================
   Downloads
   ========================================================================== */
.downloads { display: grid; gap: var(--sp-8); }
.dl-group { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--sp-7); border-top: 2px solid var(--ink); padding-top: var(--sp-5); }
.dl-group h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); margin-bottom: var(--sp-2); }
.dl-group__intro { margin: 0; color: var(--pencil); }
.dl-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-5); align-items: center; padding: var(--sp-4) 0; border-bottom: 2px dashed var(--rule); }
.dl-list li:first-child { padding-top: 0; }
.dl-item__name { margin: 0; font-family: var(--font-display); font-weight: 700; font-stretch: 90%; font-size: 1.25rem; letter-spacing: -0.01em; }
.dl-item__meta { margin: 2px 0 0; font-family: var(--font-ticket); font-size: 0.85rem; color: var(--pencil); }
.dl-item__desc { margin: var(--sp-1) 0 0; color: var(--pencil); font-size: 0.98rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--ink); color: #f4f4ee; padding-block: var(--sp-8) var(--sp-5); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: var(--sp-7); }
.footer-brand img { max-height: 52px; width: auto; margin-bottom: var(--sp-4); }
.footer-brand .brand { color: #fff; margin-bottom: var(--sp-4); }
.footer-brand p { color: #b9b8ae; max-width: 30em; }
.footer-address { font-style: normal; color: #b9b8ae; }
.site-footer h2 { font-family: var(--font-ticket); font-weight: 500; font-stretch: 100%; font-size: 0.9rem; letter-spacing: 0; color: #b9b8ae; margin-bottom: var(--sp-4); }
.site-footer li { margin-bottom: var(--sp-2); }
.footer-phone { display: block; font-family: var(--font-display); font-weight: 800; font-stretch: 84%; font-size: 1.8rem; letter-spacing: -0.02em; margin-bottom: var(--sp-3); }
.footer-legal { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid #3a3933; font-size: 0.88rem; color: #b9b8ae; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); justify-content: space-between; }
.footer-legal p { margin: 0; }

/* ==========================================================================
   Floating contact button
   ========================================================================== */
.contact-widget { position: fixed; right: var(--sp-4); bottom: calc(var(--sp-5) + env(safe-area-inset-bottom)); z-index: 300; }
.contact-widget__toggle {
	display: flex; align-items: center; justify-content: center;
	width: 60px; height: 60px;
	background: var(--signal); color: var(--ink);
	border: 2px solid var(--ink); border-radius: var(--radius);
	cursor: pointer; list-style: none;
	transition: background-color 0.12s ease, color 0.12s ease;
}
.contact-widget__toggle::-webkit-details-marker { display: none; }
.contact-widget__toggle:hover { background: var(--ink); color: #fff; }
.contact-widget__icon--close { display: none; }
.contact-widget__menu[open] .contact-widget__icon--open { display: none; }
.contact-widget__menu[open] .contact-widget__icon--close { display: inline-flex; }
.contact-widget__panel {
	position: absolute; right: 0; bottom: 72px;
	width: max-content; min-width: 240px; max-width: calc(100vw - 2rem);
	padding: var(--sp-2);
	background: var(--receipt); border: 2px solid var(--ink); border-radius: var(--radius);
}
.contact-widget__link { display: flex; align-items: center; gap: var(--sp-3); min-height: 52px; padding: var(--sp-2) var(--sp-4); border-radius: var(--radius); font-weight: 600; text-decoration: none; }
.contact-widget__link:hover, .contact-widget__link:focus-visible { background: var(--ink); color: #fff; }
.contact-widget__link .icon { flex: none; }


/* ==========================================================================
   Page parts: contact, industry pages, plans, FAQ
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--sp-8); align-items: start; }
.contact-details { display: grid; gap: var(--sp-5); margin: var(--sp-6) 0 0; }
.contact-details > div { padding-top: var(--sp-3); border-top: 2px dashed var(--rule); }
.contact-details dt { font-family: var(--font-ticket); font-size: 0.85rem; color: var(--pencil); }
.contact-details dd { margin: 2px 0 0; font-size: 1.1rem; }
.contact-details address { font-style: normal; }
.contact-details__big { font-family: var(--font-display); font-weight: 800; font-stretch: 84%; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); letter-spacing: -0.02em; text-decoration: none; }
.contact-details__big:hover { text-decoration: underline; }
.contact-grid__form .ticket--flat { background: var(--receipt); }

.hero--page { padding-bottom: var(--sp-7); }
.hero__grid--image { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; }
.hero__image img { width: 100%; max-height: 460px; object-fit: contain; }

.highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
.highlights li { display: grid; gap: 2px; }
.highlights strong { font-family: var(--font-display); font-weight: 800; font-stretch: 86%; font-size: 1.35rem; letter-spacing: -0.015em; }
.highlights span { color: var(--pencil); }

.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: center; }
.feature--flip .feature__copy { order: 2; }
.feature__image img { width: 100%; max-height: 440px; object-fit: contain; }
.feature__copy .prose > *:first-child { margin-top: 0; }

.faq { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--sp-7); align-items: start; }
.faq h2 { margin: 0; }
.faq__item { border-top: 2px solid var(--ink); }
.faq__item:last-child { border-bottom: 2px solid var(--ink); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 700; font-stretch: 90%; font-size: 1.25rem; letter-spacing: -0.01em; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: none; font-family: var(--font-ticket); font-size: 1.6rem; font-weight: 400; line-height: 1; }
.faq__item[open] summary::after { content: "\2212"; }
.faq__item summary:hover { text-decoration: underline; }
.faq__item p { margin: 0 0 var(--sp-5); max-width: 40em; color: var(--pencil); }

.cta__grid--form { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); align-items: start; }
.cta__grid--form .ticket--flat { color: var(--ink); }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); align-items: stretch; }
.plan .ticket { height: 100%; display: flex; flex-direction: column; }
.plan--popular .ticket { border-width: 4px; }
.plan__flag { margin: 0 0 var(--sp-3); align-self: flex-start; padding: 2px var(--sp-3); background: var(--sticker); font-size: 0.82rem; font-weight: 500; }
.plan__name { font-size: 1.7rem; margin: 0; }
.plan__price { margin: 0 0 var(--sp-3); font-family: var(--font-display); font-weight: 900; font-stretch: 82%; font-size: clamp(2.4rem, 1.6rem + 2vw, 3.4rem); letter-spacing: -0.035em; line-height: 1; }
.plan__price small { font-family: var(--font-ticket); font-weight: 400; font-size: 0.85rem; letter-spacing: 0; }
.plan__line { margin: 0 0 var(--sp-2); }
.plan .btn { margin-top: auto; }
.plan .ticket__rule { margin-bottom: var(--sp-5); }
.plan .btn { align-self: stretch; }
.plan .plan__price + .plan__line, .plan .plan__line + .plan__line { color: var(--pencil); }
.plan .ticket > .plan__line:last-of-type { margin-bottom: var(--sp-5); }

.lead-form__field.has-error input, .lead-form__field.has-error select, .lead-form__field.has-error textarea { border-bottom-color: #b3261e; }
.lead-form__field .lead-form__error { margin: 2px 0 0; font-size: 0.85rem; color: #b3261e; }
.footer-legal__menu { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.footer-legal__menu li { margin: 0; }

.section--ink .index { border-top-color: #f4f4ee; }
.section--ink .index__link { border-bottom-color: #4a4943; }
.section--ink .index__link:hover { background: var(--signal); color: var(--ink); }

@media (max-width: 1080px) {
	.contact-grid, .feature, .faq, .hero__grid--image { grid-template-columns: 1fr; gap: var(--sp-6); }
	.feature--flip .feature__copy { order: 0; }
	.plans { grid-template-columns: 1fr; }
	.highlights { grid-template-columns: 1fr; gap: var(--sp-4); }
}

.specs { border-top: 2px solid var(--ink); }
.spec { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sp-6) var(--sp-7); padding: var(--sp-6) 0; border-bottom: 2px dashed var(--rule); }
.spec:last-child { border-bottom: 0; }
.spec h2 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
.spec .prose > *:first-child { margin-top: 0; }
@media (max-width: 1080px) { .spec { grid-template-columns: 1fr; gap: var(--sp-3); } }

/* Hero receipt: trimmed so receipt and form fit beside the headline on a laptop screen. */
.hero__ticket .ticket { font-size: 0.88rem; padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) + 10px); }
.hero__ticket .ticket__brand { font-size: 1.25rem; }
.hero__ticket .ticket__sub { margin: 0; font-size: 0.78rem; }
.hero__ticket .ticket__rule { margin: var(--sp-3) 0; }
.hero__ticket .ticket__lines { gap: 2px; }
.hero__ticket .ticket__total-amount { font-size: 2.3rem; }
.hero__ticket .ticket__total-amount small { font-size: 0.8rem; }
.hero__ticket .ticket__note { margin: var(--sp-1) 0 0; font-size: 0.76rem; }
.hero__ticket .lead-form-slip__cut { margin: var(--sp-3) 0 var(--sp-2); }
.hero__ticket .lead-form--compact { gap: 0 var(--sp-4); }
.hero__ticket .lead-form--compact .lead-form__field { min-height: 0; }
.hero__ticket .lead-form--compact input[type="text"], .hero__ticket .lead-form--compact input[type="tel"], .hero__ticket .lead-form--compact input[type="email"], .hero__ticket .lead-form--compact select { min-height: 34px; }
.hero__ticket .lead-form--compact .btn { min-height: 44px; margin-top: var(--sp-3); }
.hero__ticket .lead-form__fineprint { display: none; }
@media (max-width: 720px) { .hero__ticket .lead-form--compact { grid-template-columns: 1fr; } }

.client img { aspect-ratio: 4 / 3; width: 100%; object-fit: contain; background: var(--receipt); }

/* Archivo set condensed runs its words together; open the word gaps wherever it is used. */
h1, h2, h3, h4, h5, h6, .btn, .brand, .ticket__brand, .ticket__total-amount, .tile__name, .index__link, .cta__phone, .footer-phone,
.contact-details__big, .plan__price, .sticker__amount, .nav-toggle, .search-submit, .quote p, .client__name, .dl-item__name, .faq__item summary,
.highlights strong, .spec h2, .primary-nav a, .lead-form__success strong { word-spacing: 0.12em; }
.primary-nav a { word-spacing: 0.04em; }

/* The enquiry form keeps its own type sizes wherever it sits (closing band, contact page). */
.cta .lead-form__head h2 { font-size: 1.6rem; max-width: none; margin-bottom: var(--sp-2); }
.cta .lead-form__head p, .cta .lead-form__fineprint { font-size: 0.95rem; max-width: none; }
.cta .lead-form__fineprint { font-size: 0.82rem; }
.plan .ticket { padding-top: calc(var(--sp-6) + var(--sp-3)); }
.plan__flag { position: absolute; top: calc(-1 * var(--sp-3)); left: var(--sp-5); margin: 0; }
@media (max-width: 720px) {
	.ticket { font-size: 0.86rem; padding-inline: var(--sp-4); }
	.contact-widget__toggle { width: 54px; height: 54px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
	.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.header-phone { display: none; }
	.hero__grid { grid-template-columns: 1fr; gap: var(--sp-7); }
	.hero__ticket { justify-self: start; }
	.split-head, .why, .offer, .cta__grid, .dl-group, .notfound { grid-template-columns: 1fr; gap: var(--sp-6); }
	.why__head { position: static; }
	.index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.clients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.quotes, .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
	.nav-toggle { display: inline-flex; margin-left: auto; }
	.site-header__bar { flex-wrap: wrap; gap: var(--sp-3); padding-block: var(--sp-3); }
	.header-actions { order: 2; }
	.primary-nav { order: 3; flex-basis: 100%; display: none; padding-bottom: var(--sp-4); }
	.primary-nav.is-open { display: block; }
	.primary-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
	.primary-nav a { padding: var(--sp-3) 0; border-radius: 0; border-bottom: 1px solid var(--rule); font-size: 1.05rem; }
	.primary-nav a:hover, .primary-nav .current-menu-item > a, .primary-nav .current-menu-ancestor > a { background: transparent; color: var(--ink); text-decoration: underline; }
	.primary-nav .menu-item-has-children > a::after { display: none; }
	.primary-nav .sub-menu { position: static; display: block; min-width: 0; padding: 0 0 0 var(--sp-4); background: transparent; border: 0; }
	.header-actions .btn { display: none; }
}
@media (max-width: 720px) {
	:root { --sp-8: 3.25rem; --sp-9: 4.5rem; }
	.tiles { grid-template-columns: 1fr 1fr; }
	.tile__media { height: 140px; padding: var(--sp-3) var(--sp-3) 0; }
	.tile__body { padding: var(--sp-3) var(--sp-3) var(--sp-4); }
	.index, .clients, .quotes, .posts, .footer-grid { grid-template-columns: 1fr; }
	.clients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dl-list li { grid-template-columns: 1fr; gap: var(--sp-3); }
	.dl-list .btn { justify-self: start; }
	.hero__actions .btn, .cta__actions .btn { width: 100%; }
	.cta__phone { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation: none !important; transition: none !important; }
}
@media print {
	.contact-widget, .site-header, .breadcrumb-bar { display: none; }
}

.hero__ticket .lead-form--compact { row-gap: var(--sp-2); }

/* Customizer preview: the section pencils sit inside the top-left corner, where full-width sections leave no margin for them. */
.home-section { position: relative; }
.home-section .customize-partial-edit-shortcut { z-index: 500; }
.home-section .customize-partial-edit-shortcut button { left: 12px !important; top: 12px !important; }

/* Careers list */
.jobs { border-top: 2px solid var(--ink); max-width: var(--wrap-narrow); }
.job { border-bottom: 2px solid var(--ink); }
.job__link { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) 0; text-decoration: none; }
.job__link:hover { background: var(--signal); padding-inline: var(--sp-3); margin-inline: calc(-1 * var(--sp-3)); }
.job__title { font-family: var(--font-display); font-weight: 700; font-stretch: 90%; font-size: 1.25rem; letter-spacing: -0.01em; }
.job__status { flex: none; padding: 3px var(--sp-3); border: 2px solid var(--ink); border-radius: 999px; font-family: var(--font-ticket); font-size: 0.78rem; text-transform: uppercase; }
.job--closed .job__status { color: var(--pencil); border-color: var(--rule); }
.job--closed .job__title { color: var(--pencil); }

/* ==========================================================================
   Onboarding form (page-onboarding.php)
   ========================================================================== */
.ob { padding-top: var(--sp-7); }
.ob-grid { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
.ob-aside { position: sticky; top: var(--sp-5); display: grid; gap: var(--sp-5); }
.ob-intro { font-size: 0.98rem; }
.ob-steps ol { margin: 0; padding: 0; list-style: none; counter-reset: ob; border-top: 2px solid var(--ink); }
.ob-steps li { counter-increment: ob; border-bottom: 1px dashed var(--rule); }
.ob-steps a { display: flex; gap: var(--sp-3); padding: var(--sp-3) 0; color: var(--ink); text-decoration: none; font-weight: 600; }
.ob-steps a::before { content: counter(ob); font-family: var(--font-ticket); font-weight: 400; color: var(--pencil); min-width: 1.2em; }
.ob-steps a:hover { color: var(--signal-deep); }
.ob-form { display: grid; gap: var(--sp-6); min-width: 0; }
.ob-section { font-family: var(--font-body); font-size: 1rem; scroll-margin-top: var(--sp-5); }
.ob-section h2 { display: flex; align-items: baseline; gap: var(--sp-3); margin: 0 0 var(--sp-5); padding-bottom: var(--sp-3); border-bottom: 2px dashed var(--rule); font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); }
.ob-section__no { font-size: 0.95rem; font-weight: 400; color: var(--pencil); }
.ob-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-6); }
.ob-field { min-width: 0; }
.ob-field--wide, .ob-field--textarea, .ob-field--file, .ob-field--files, .ob-field--checks, .ob-field--radio { grid-column: 1 / -1; }
.ob-field > label, .ob-field legend { display: block; margin-bottom: var(--sp-2); padding: 0; font-weight: 600; font-size: 0.95rem; }
.ob-field fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ob-req { color: var(--signal-deep); }
.ob-field input[type="text"], .ob-field input[type="email"], .ob-field input[type="tel"], .ob-field input[type="url"], .ob-field input[type="number"], .ob-field textarea {
	width: 100%; min-height: 48px; padding: var(--sp-2) var(--sp-3);
	background: var(--counter); color: var(--ink);
	border: 0; border-bottom: 2px solid var(--ink); border-radius: var(--radius) var(--radius) 0 0;
	font: inherit; font-size: 1rem;
}
.ob-field textarea { resize: vertical; line-height: 1.5; }
.ob-field input:focus, .ob-field textarea:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 2px var(--ink), 0 2px 0 0 var(--signal); }
.ob-field input::placeholder, .ob-field textarea::placeholder { color: #8a887e; }
.ob-number { display: flex; align-items: center; gap: var(--sp-2); max-width: 12rem; }
.ob-number span { font-family: var(--font-ticket); }
.ob-keys { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ob-key { position: relative; cursor: pointer; }
.ob-key input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ob-key span {
	display: inline-flex; align-items: center; min-height: 44px; min-width: 4.5rem; justify-content: center; padding: 0 var(--sp-4);
	background: var(--receipt); border: 2px solid var(--ink); border-radius: var(--radius);
	box-shadow: 0 3px 0 0 var(--ink); font-weight: 600;
	transition: transform 80ms ease, box-shadow 80ms ease, background-color 80ms ease;
}
.ob-key:hover span { background: var(--counter); }
.ob-key input:checked + span { background: var(--signal); transform: translateY(2px); box-shadow: 0 1px 0 0 var(--ink); }
.ob-key input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.ob-key input:disabled + span { opacity: 0.45; cursor: not-allowed; }
.ob-field input[type="file"] { width: 100%; padding: var(--sp-4); background: var(--counter); border: 2px dashed var(--pencil); border-radius: var(--radius); font: inherit; font-size: 0.95rem; cursor: pointer; }
.ob-field input[type="file"]:hover { border-color: var(--ink); }
.ob-field input[type="file"]::file-selector-button { margin-right: var(--sp-3); padding: var(--sp-2) var(--sp-4); background: var(--ink); color: #fff; border: 0; border-radius: var(--radius); font: inherit; font-weight: 600; cursor: pointer; }
.ob-files { margin: var(--sp-2) 0 0; padding: 0; list-style: none; font-family: var(--font-ticket); font-size: 0.85rem; }
.ob-files .is-too-big { color: #b3261e; }
.ob-hint { margin: var(--sp-2) 0 0; font-size: 0.88rem; color: var(--pencil); }
.ob-hint-inline { font-weight: 400; color: var(--pencil); }
.ob-error { margin: var(--sp-2) 0 0; font-size: 0.9rem; color: #b3261e; font-weight: 600; }
.ob-field.has-error input, .ob-field.has-error textarea { border-bottom-color: #b3261e; background: #fbe9e7; }
.ob-field.has-error .ob-key span { border-color: #b3261e; }
.ob-submit { display: grid; gap: var(--sp-4); }
.ob-submit .ob-field { max-width: 20rem; }
.ob-submit .btn:disabled { opacity: 0.6; cursor: wait; }
.ob-done { max-width: 40rem; font-family: var(--font-body); }
.ob-done h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); }
@media (max-width: 960px) {
	.ob-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
	.ob-aside { position: static; }
	.ob-steps { display: none; }
}
@media (max-width: 640px) {
	.ob-fields { grid-template-columns: 1fr; }
	.ob-section.ticket { padding-inline: var(--sp-4); }
}
@media (prefers-reduced-motion: reduce) { .ob-key span { transition: none; } }

/* Full enquiry form: two or three columns when its box is wide enough, so it stays short. */
[data-lead-wrap] { container-type: inline-size; }
.lead-form__head { margin-bottom: var(--sp-4); }
@container (min-width: 520px) {
	.lead-form:not(.lead-form--compact) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-5); }
	.lead-form:not(.lead-form--compact) > :not(.lead-form__field), .lead-form:not(.lead-form--compact) .lead-form__field--wide { grid-column: 1 / -1; }
}
@container (min-width: 680px) {
	.lead-form:not(.lead-form--compact) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.lead-form:not(.lead-form--compact) .lead-form__field--address,
	.lead-form:not(.lead-form--compact) .lead-form__field--message { grid-column: span 2; }
	.lead-form:not(.lead-form--compact) .lead-form__field--interest { grid-column: auto; }
	.lead-form:not(.lead-form--compact) > .lead-form__submit { grid-column: span 2; align-self: end; }
}