@charset "utf-8";
/*
	Kapiti Computers
	Design foundation: Hyperspace by HTML5 UP (html5up.net | @ajlkn)
	Free for personal and commercial use under the CCA 3.0 license.

	Single stylesheet for the whole site. Replaces the previous main.css plus
	the per-page inline <style> blocks. Sections are ordered:
	tokens, reset, type, layout, components, utilities.
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Hyperspace palette, unchanged from the original site. */
	--bg: #312450;
	--bg-alt: #261c3e;
	--style1: #5e42a6;
	--style1-alt: #493382;
	--style2: #5052b5;
	--style2-alt: #3e4094;
	--style3: #b74e91;
	--style3-alt: #953d75;

	--fg: rgba(255, 255, 255, 0.55);
	--fg-bold: #ffffff;
	--fg-light: rgba(255, 255, 255, 0.35);
	--border: rgba(255, 255, 255, 0.15);
	--border-bg: rgba(255, 255, 255, 0.05);

	/* Kapiti Computers brand layer. */
	--brand-nav-bg: rgba(34, 0, 51, 0.92);
	--brand-orange: #ff6600;
	--brand-orange-light: #ffb300;
	--brand-orange-hover: #ff9100;

	--accent-line: linear-gradient(to right, var(--style1), var(--style3));

	--radius: 0.25em;
	--radius-pill: 3em;
	--transition: 0.2s ease;

	/* Height of the fixed top navigation. Every offset derives from this,
	   which is what removes the need for the old negative-margin hacks. */
	--nav-h: 4.5rem;

	--inner-width: 75em;
}

@media screen and (max-width: 900px) {
	:root { --nav-h: 3.75rem; }
}

/* ==========================================================================
   2. Reset
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchor targets clear the fixed navbar instead of hiding behind it. */
	scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
	margin: 0;
	background: var(--bg);
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, pre {
	margin: 0;
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
	height: auto;
}

button, input, select, textarea { font: inherit; color: inherit; }

table { border-collapse: collapse; border-spacing: 0; }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   3. Type
   ========================================================================== */

body, input, select, textarea {
	color: var(--fg);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16.5pt;
	font-weight: normal;
	line-height: 1.75;
}

@media screen and (max-width: 1680px) { body, input, select, textarea { font-size: 13pt; } }
@media screen and (max-width: 1280px) { body, input, select, textarea { font-size: 12pt; } }
@media screen and (max-width: 360px)  { body, input, select, textarea { font-size: 11pt; } }

a {
	transition: color var(--transition), border-bottom-color var(--transition);
	border-bottom: dotted 1px var(--fg-light);
	color: inherit;
	text-decoration: none;
}

a:hover { border-bottom-color: transparent; color: var(--fg-bold); }

/* One visible, consistent focus ring for every interactive element. The
   original site suppressed outlines globally, which made the site
   unusable by keyboard. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--brand-orange-light);
	outline-offset: 3px;
	border-radius: 2px;
}

strong, b { color: var(--fg-bold); font-weight: bold; }
em, i { font-style: italic; }

p { margin: 0 0 2em 0; }

h1, h2, h3, h4, h5, h6 {
	color: var(--fg-bold);
	font-weight: bold;
	line-height: 1.5;
	margin: 0 0 0.5em 0;
	text-wrap: balance;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; text-decoration: none; }

h1 { font-size: 2.75em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.1em; }
h4 { font-size: 1em; }
h5 { font-size: 0.8em; }
h6 { font-size: 0.6em; }

/* Hyperspace's gradient underline. */
h1.major, h2.major {
	margin: 0 0 1.3em 0;
	position: relative;
	padding-bottom: 0.35em;
}

h1.major::after, h2.major::after {
	background-image: var(--accent-line);
	border-radius: 0.2em;
	bottom: 0;
	content: '';
	height: 0.05em;
	position: absolute;
	right: 0;
	width: 100%;
}

@media screen and (max-width: 736px) {
	h1 { font-size: 2em; }
	h2 { font-size: 1.25em; }
	h3 { font-size: 1em; }
	h4 { font-size: 0.9em; }
	h5, h6 { font-size: 0.8em; }
}

sub { font-size: 0.8em; position: relative; top: 0.5em; }
sup { font-size: 0.8em; position: relative; top: -0.5em; }

blockquote {
	border-left: solid 4px var(--border);
	font-style: italic;
	margin: 0 0 2em 0;
	padding: 0.5em 0 0.5em 2em;
}

hr { border: 0; border-bottom: solid 1px var(--border); margin: 2em 0; }
hr.major { margin: 3em 0; }

.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }

/* ==========================================================================
   4. Layout
   ========================================================================== */

/* -- Skip link ------------------------------------------------------------ */

.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20000;
	transform: translateY(-150%);
	transition: transform var(--transition);
	background: var(--brand-orange);
	border: 0;
	color: #ffffff;
	font-weight: bold;
	padding: 0.75rem 1.25rem;
}

.skip-link:focus { transform: translateY(0); color: #ffffff; }

/* -- Top navigation ------------------------------------------------------- */

.top-nav {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 15000;
	background: var(--brand-nav-bg);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	color: #ffffff;
}

.nav-inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: 1250px;
	min-height: var(--nav-h);
	margin: 0 auto;
	padding: 0 1rem;
}

.top-nav .logo-link {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	border: 0;
	margin-right: auto;
}

.top-nav .nav-logo {
	height: calc(var(--nav-h) - 1.25rem);
	width: auto;
	object-fit: contain;
}

.top-nav .menu-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.top-nav .menu-list a {
	display: block;
	background: rgba(255, 255, 255, 0.08);
	border: 0;
	border-radius: 6px;
	color: #ffffff;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.6rem 0.85rem;
	white-space: nowrap;
	transition: background var(--transition), transform 0.15s ease;
}

.top-nav .menu-list a:hover {
	background: linear-gradient(90deg, #ff4b00, var(--brand-orange-hover));
	transform: translateY(-1px);
}

/* Current page marker. Replaces the old approach of no indication at all. */
.top-nav .menu-list a[aria-current="page"] {
	background: rgba(255, 255, 255, 0.2);
	box-shadow: inset 0 -3px 0 0 var(--brand-orange-hover);
}

.contact-btn {
	background: linear-gradient(90deg, var(--brand-orange), var(--brand-orange-light)) !important;
	box-shadow: 0 0 14px rgba(255, 153, 0, 0.45), inset 0 0 5px rgba(255, 255, 255, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.contact-btn:hover {
	background: linear-gradient(90deg, var(--brand-orange-light), var(--brand-orange)) !important;
	transform: translateY(-2px);
}

/* Phone number on small screens, "Contact Us" on large. Selectors are scoped
   to .top-nav .menu-list so they outrank the generic link rule above, which is
   more specific than a bare .call-now / .contact-us class would be. */
.top-nav .menu-list a.call-now { display: none; }

.menu-toggle {
	display: none;
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	cursor: pointer;
	color: #ffffff;
}

.menu-toggle .bars,
.menu-toggle .bars::before,
.menu-toggle .bars::after {
	position: absolute;
	width: 18px;
	height: 2px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 2px;
	transition: transform var(--transition), opacity var(--transition);
}

.menu-toggle .bars {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.menu-toggle .bars::before { content: ''; left: 0; top: -6px; }
.menu-toggle .bars::after  { content: ''; left: 0; top: 6px; }

.menu-toggle[aria-expanded="true"] .bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars::after  { transform: translateY(-6px) rotate(-45deg); }

@media screen and (max-width: 900px) {
	.menu-toggle { display: block; }
	.top-nav .menu-list a.call-now { display: block; }
	.top-nav .menu-list a.contact-us { display: none; }

	.top-nav .nav-logo { height: calc(var(--nav-h) - 1.5rem); }

	/* The panel is hidden with [hidden], so no display juggling in CSS. */
	.top-nav .main-menu {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: rgba(34, 0, 51, 0.98);
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		max-height: calc(100vh - var(--nav-h));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.top-nav .menu-list {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem;
		padding: 0.75rem;
	}

	.top-nav .menu-list li { flex: 1 1 calc(50% - 0.5rem); }

	.top-nav .menu-list a {
		background: rgba(0, 0, 0, 0.25);
		text-align: center;
		/* 44px minimum touch target. */
		padding: 0.9rem 0.5rem;
		font-size: 0.6rem;
	}
}

/* -- Sidebar (Hyperspace section navigation) ------------------------------ */

#sidebar {
	position: fixed;
	top: var(--nav-h);
	left: 0;
	z-index: 9000;
	width: 18em;
	height: calc(100vh - var(--nav-h));
	padding: 2.5em 2.5em 0.5em 2.5em;
	background: var(--bg);
	overflow-x: hidden;
	overflow-y: auto;
	text-align: right;
	cursor: default;
}

#sidebar > .inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100%;
	width: 100%;
	opacity: 1;
	transition: opacity 1s ease;
}

#sidebar nav > ul { list-style: none; margin: 0; padding: 0; }

#sidebar nav > ul > li {
	margin: 1.5em 0 0 0;
	padding: 0;
	position: relative;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.15s ease, transform 0.75s ease;
}

#sidebar nav > ul > li:first-child { margin: 0; }

/* Staggered reveal, generated instead of twenty hand-written rules. */
#sidebar nav > ul > li:nth-child(1)  { transition-delay: 0.45s; }
#sidebar nav > ul > li:nth-child(2)  { transition-delay: 0.65s; }
#sidebar nav > ul > li:nth-child(3)  { transition-delay: 0.85s; }
#sidebar nav > ul > li:nth-child(4)  { transition-delay: 1.05s; }
#sidebar nav > ul > li:nth-child(5)  { transition-delay: 1.25s; }
#sidebar nav > ul > li:nth-child(6)  { transition-delay: 1.45s; }
#sidebar nav > ul > li:nth-child(n+7){ transition-delay: 1.65s; }

#sidebar nav a {
	display: block;
	border: 0;
	color: var(--fg-light);
	font-size: 0.6em;
	font-weight: bold;
	letter-spacing: 0.25em;
	line-height: 1.75;
	padding: 1.35em 0;
	position: relative;
	text-transform: uppercase;
	transition: color var(--transition);
}

#sidebar nav a::before,
#sidebar nav a::after {
	border-radius: 0.2em;
	bottom: 0;
	content: '';
	height: 0.2em;
	position: absolute;
	right: 0;
	width: 100%;
}

#sidebar nav a::before { background: #3c2c62; }

#sidebar nav a::after {
	background-image: var(--accent-line);
	max-width: 0;
	transition: max-width var(--transition);
}

#sidebar nav a:hover { color: var(--fg); }
#sidebar nav a.active { color: var(--fg-bold); }
#sidebar nav a.active::after { max-width: 100%; }

body.is-preload #sidebar > .inner { opacity: 0; }
body.is-preload #sidebar nav ul li { transform: translateY(2em); opacity: 0; }

/* Between 737px and 1280px the sidebar becomes a horizontal strip directly
   under the top nav, matching Hyperspace's own behaviour. */
@media screen and (max-width: 1280px) {
	#sidebar {
		top: var(--nav-h);
		width: 100%;
		height: 3.5em;
		line-height: 3.5em;
		padding: 0;
		overflow: hidden;
		text-align: center;
	}

	#sidebar > .inner {
		flex-direction: row;
		align-items: stretch;
		justify-content: center;
		height: inherit;
		line-height: inherit;
		min-height: 0;
	}

	#sidebar nav, #sidebar nav ul { height: inherit; line-height: inherit; }
	#sidebar nav ul { display: flex; margin: 0; }

	#sidebar nav ul li {
		display: block;
		height: inherit;
		line-height: inherit;
		margin: 0 0 0 2em;
		padding: 0;
		transition-delay: 0s !important;
	}

	#sidebar nav ul li:first-child { margin-left: 0; }
	#sidebar nav a { height: inherit; line-height: inherit; padding: 0; }
	#sidebar nav a::after { background-image: none; background-color: var(--style3); }
}

@media screen and (max-width: 736px) {
	#sidebar { display: none; }
}

/* -- Wrapper / page offsets ----------------------------------------------- */

/* Everything below the fixed navbar is offset by a single variable. */
body { padding-top: var(--nav-h); }

#sidebar ~ #wrapper,
#sidebar ~ #footer {
	margin-left: 18em;
}

@media screen and (max-width: 1280px) {
	/* Room for the horizontal sidebar strip. */
	#sidebar ~ #wrapper { margin-left: 0; padding-top: 3.5em; }
	#sidebar ~ #footer { margin-left: 0; }
}

@media screen and (max-width: 736px) {
	#sidebar ~ #wrapper { padding-top: 0; }
}

.wrapper { position: relative; }

.wrapper > .inner {
	padding: 5em 5em 3em 5em;
	max-width: 100%;
	width: var(--inner-width);
	margin: 0 auto;
}

@media screen and (max-width: 1680px) { .wrapper > .inner { padding: 4em 4em 2em 4em; } }
@media screen and (max-width: 1280px) { .wrapper > .inner { width: 100%; } }
@media screen and (max-width: 736px)  { .wrapper > .inner { padding: 3em 1.5em 1em 1.5em; } }

.wrapper.alt        { background-color: var(--bg-alt); }
.wrapper.style1     { background-color: var(--style1); }
.wrapper.style1-alt { background-color: var(--style1-alt); }
.wrapper.style2     { background-color: var(--style2); }
.wrapper.style2-alt { background-color: var(--style2-alt); }
.wrapper.style3     { background-color: var(--style3); }
.wrapper.style3-alt { background-color: var(--style3-alt); }

.wrapper.fullscreen {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: calc(100vh - var(--nav-h));
}

@media screen and (max-width: 1280px) {
	.wrapper.fullscreen { min-height: calc(100vh - var(--nav-h) - 3.5em); }
}

@media screen and (max-width: 736px) {
	.wrapper.fullscreen { min-height: 0; padding: 2em 0; }
}

/* Scroll-reveal. Driven by IntersectionObserver adding/removing .inactive. */
.wrapper.fade-up > .inner,
.wrapper.fade-down > .inner,
.wrapper.fade > .inner {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 1s ease, transform 1s ease;
}

.wrapper.fade-up.inactive > .inner,
body.is-preload .wrapper.fade-up > .inner {
	opacity: 0;
	transform: translateY(1em);
}

.wrapper.fade-down.inactive > .inner,
body.is-preload .wrapper.fade-down > .inner {
	opacity: 0;
	transform: translateY(-1em);
}

.wrapper.fade.inactive > .inner,
body.is-preload .wrapper.fade > .inner { opacity: 0; }

/* -- Intro ---------------------------------------------------------------- */

#intro {
	background-attachment: fixed;
	background-image: url("images/intro.svg");
	background-position: top right;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

#intro p { font-size: 1.25em; }

@media screen and (max-width: 1280px) { #intro { background-attachment: scroll; } }
@media screen and (max-width: 736px)  { #intro p { font-size: 1em; } }

/* Hero logo. Explicit intrinsic ratio, so no layout shift on load. */
#intro .logo {
	width: clamp(150px, 22vw, 240px);
	height: auto;
	aspect-ratio: 1 / 1;
	margin-bottom: 1.5rem;
	border: 0;
}

/* The hero logo links back to the home page, so the wrapper must not pick up
   the dotted underline that ordinary links get. */
.logo-home {
	display: inline-block;
	border: 0 !important;
	line-height: 0;
}

.logo-home:focus-visible { outline-offset: 6px; }

.service-areas {
	display: inline-block;
	text-align: left;
	list-style: disc;
	margin: 1rem 0 1.5rem;
	padding-left: 1.5rem;
	color: var(--fg-bold);
	font-size: 1.2em;
	font-weight: 600;
	line-height: 1.8;
}

.service-areas li { margin: 0.15rem 0; }
.service-areas a { color: var(--fg-bold); }

/* On phones the hero reads better centred: the logo, the breadcrumb trail,
   the h1 and the standfirst line all sit on the middle axis. Body paragraphs
   stay left-aligned, because centred running text is harder to read. */
@media screen and (max-width: 736px) {
	#intro .logo-home {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: fit-content;
	}

	#intro .logo {
		margin-left: auto;
		margin-right: auto;
	}

	#intro h1,
	#intro .lead,
	#intro .breadcrumbs {
		text-align: center;
	}

	#intro .breadcrumbs ol {
		justify-content: center;
	}

	/* The gradient rule under an h1.major spans the text, so it needs the
	   same centring treatment. */
	#intro h1.major {
		padding-bottom: 0.5em;
	}

	#intro .service-areas {
		display: table;
		margin-left: auto;
		margin-right: auto;
	}
}

.services-list {
	color: var(--fg-bold);
	font-weight: 600;
}

/* -- Footer --------------------------------------------------------------- */

#footer { background-color: var(--style1-alt); }

#footer .inner {
	padding: 4em 5em 3em 5em;
	max-width: 100%;
	width: var(--inner-width);
	margin: 0 auto;
}

@media screen and (max-width: 1680px) { #footer .inner { padding: 3em 4em 2em 4em; } }
@media screen and (max-width: 736px)  { #footer .inner { padding: 3em 1.5em 2em 1.5em; } }

.footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2em;
	margin-bottom: 2.5em;
}

.footer-grid h2 {
	font-size: 0.7em;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--fg-bold);
	margin-bottom: 1em;
}

.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin: 0 0 0.6em 0; font-size: 0.85em; }
.footer-grid a { border-bottom-color: transparent; }
.footer-grid a:hover { color: var(--brand-orange-hover); }

.footer-bottom {
	border-top: 1px solid var(--border);
	padding-top: 2em;
	font-size: 0.8em;
}

.footer-bottom p { margin: 0 0 0.75em 0; }

/* ==========================================================================
   5. Components
   ========================================================================== */

/* -- Buttons -------------------------------------------------------------- */

input[type="submit"],
input[type="reset"],
input[type="button"],
button:not(.menu-toggle),
.button {
	appearance: none;
	background-color: transparent;
	border: solid 1px var(--border);
	border-radius: var(--radius-pill);
	color: var(--fg-bold);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.6em;
	font-weight: bold;
	letter-spacing: 0.25em;
	/* min-height keeps the pill from stretching inside flex parents, which is
	   what the old .kc-dark override existed to patch. */
	min-height: 4.75em;
	padding: 0 3.75em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color var(--transition), border-color var(--transition);
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:not(.menu-toggle):hover,
.button:hover {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--fg-bold);
}

.button.primary {
	background: linear-gradient(90deg, var(--brand-orange), var(--brand-orange-light));
	border-color: transparent;
	color: #1a0f26;
	font-weight: 800;
}

.button.primary:hover { filter: brightness(1.08); border-color: transparent; }

.button.fit { width: 100%; }
.button.small { font-size: 0.5em; padding: 0 2.75em; }

/* Buttons sitting in a row need consistent spacing without inline styles. */
.button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	margin: 2em 0 0 0;
	padding: 0;
	list-style: none;
}

@media screen and (max-width: 736px) {
	/* Long labels must wrap rather than push the page sideways. nowrap plus a
	   fixed pill height is what caused a couple of pixels of horizontal
	   overflow at 360px. */
	.button {
		padding: 0.75em 1.5em;
		white-space: normal;
		line-height: 1.4;
		min-height: 3.5em;
	}

	.button-row .button { width: 100%; }
}

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

label {
	color: var(--fg-bold);
	display: block;
	font-size: 0.9em;
	font-weight: bold;
	margin: 0 0 0.7em 0;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
	appearance: none;
	background: var(--border-bg);
	border: solid 1px var(--border);
	border-radius: var(--radius);
	color: inherit;
	display: block;
	outline: 0;
	padding: 0 1em;
	text-decoration: none;
	width: 100%;
	transition: border-color var(--transition), background-color var(--transition);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
	border-color: var(--brand-orange-light);
	background: rgba(255, 255, 255, 0.1);
}

input[type="text"],
input[type="email"],
input[type="tel"],
select { height: 2.75em; }

textarea { padding: 0.75em 1em; }

.fields {
	display: flex;
	flex-wrap: wrap;
	width: calc(100% + 3em);
	margin: 0 0 2em -1.5em;
}

.fields > .field {
	flex-grow: 0;
	flex-shrink: 0;
	padding: 1.5em 0 0 1.5em;
	width: calc(100% - 1.5em);
}

.fields > .field.half { width: calc(50% - 0.75em); }

@media screen and (max-width: 736px) {
	.fields { width: calc(100% + 3em); margin: 0 0 2em -1.5em; }
	.fields > .field.half { width: calc(100% - 1.5em); }
}

::placeholder { color: var(--fg-light); opacity: 1; }

/* Validation messaging. */
.field-error {
	display: block;
	color: #ffd9c9;
	background: rgba(180, 30, 30, 0.35);
	border-left: 3px solid #ff6b5e;
	font-size: 0.8em;
	font-weight: bold;
	margin-top: 0.5em;
	padding: 0.4em 0.75em;
}

input[aria-invalid="true"],
textarea[aria-invalid="true"] { border-color: #ff6b5e; }

.form-status {
	border-radius: var(--radius);
	font-weight: bold;
	margin: 0 0 1.5em 0;
	padding: 1em 1.25em;
}

.form-status.is-error {
	background: rgba(180, 30, 30, 0.3);
	border-left: 4px solid #ff6b5e;
	color: #ffd9c9;
}

.form-status.is-success {
	background: rgba(20, 140, 80, 0.3);
	border-left: 4px solid #35d07f;
	color: #d6ffe9;
}

/* -- Icons ---------------------------------------------------------------- */

.icon {
	border: 0;
	position: relative;
	text-decoration: none;
}

.icon > .label { display: none; }

.icon.major {
	display: block;
	color: var(--fg-bold);
	margin: 0 0 1.5rem 0;
}

.icon.major svg { width: 2.5rem; height: 2.5rem; }

ul.icons {
	cursor: default;
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25em;
	margin: 0;
}

ul.icons li { padding: 0; }

ul.icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25em;
	height: 2.25em;
	border: 0;
	color: var(--fg);
	transition: color var(--transition);
}

ul.icons a:hover { color: var(--fg-bold); }
ul.icons svg { width: 1.25em; height: 1.25em; fill: currentColor; }

/* -- Lists ---------------------------------------------------------------- */

ol, ul { margin: 0 0 2em 0; padding-left: 1.25em; }
ol li, ul li { padding-left: 0.25em; margin: 0 0 0.5em 0; }

ul.alt { list-style: none; padding-left: 0; }

ul.alt > li {
	border-top: solid 1px var(--border);
	padding: 0.5em 0;
}

ul.alt > li:first-child { border-top: 0; padding-top: 0; }

ul.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	list-style: none;
	margin: 2em 0 0 0;
	padding: 0;
}

ul.actions li { padding: 0; margin: 0; }

@media screen and (max-width: 736px) {
	ul.actions { flex-direction: column; align-items: stretch; }
	ul.actions .button { width: 100%; }
}

ul.contact { list-style: none; padding-left: 0; margin: 0; }

ul.contact > li {
	border-top: solid 1px var(--border);
	margin: 1.5em 0 0 0;
	padding: 1.5em 0 0 0;
}

ul.contact > li:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

ul.contact > li h3 {
	color: var(--fg-bold);
	font-size: 0.7em;
	letter-spacing: 0.25em;
	margin: 0 0 0.5em 0;
	text-transform: uppercase;
}

/* -- Tables --------------------------------------------------------------- */

/* Wrapper gives wide tables their own scroll area so the page body never
   scrolls sideways on a phone. */
.table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 2em 0;
}

table { width: 100%; margin: 0; }

table caption {
	font-size: 0.9em;
	font-weight: bold;
	margin: 0 0 1em 0;
	text-align: left;
	color: var(--fg-bold);
}

table tbody tr { border: solid 1px var(--border); border-left: 0; border-right: 0; }
table tbody tr:nth-child(2n + 1) { background-color: var(--border-bg); }

table td { padding: 0.75em; }

table th {
	color: var(--fg-bold);
	font-size: 0.9em;
	font-weight: bold;
	padding: 0 0.75em 0.75em 0.75em;
	text-align: left;
}

table thead { border-bottom: solid 2px var(--border); }
table tfoot { border-top: solid 2px var(--border); }

/* -- Split ---------------------------------------------------------------- */

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4em;
}

@media screen and (max-width: 980px) {
	.split { grid-template-columns: 1fr; gap: 3em; }
}

/* -- Spotlights ----------------------------------------------------------- */

.spotlights { padding: 0; }

.spotlights > section {
	display: flex;
	align-items: center;
	border-top: 0;
}

.spotlights > section > .image {
	background-position: center center;
	background-size: cover;
	border-bottom: 0;
	display: block;
	position: relative;
	width: 40%;
	align-self: stretch;
	min-height: 22em;
	overflow: hidden;
}

.spotlights > section > .image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.spotlights > section > .content {
	flex-grow: 1;
	flex-shrink: 1;
	width: 60%;
}

.spotlights > section > .content > .inner {
	padding: 4em;
	max-width: 48em;
	margin: 0 auto;
}

.spotlights > section:nth-child(2n) { flex-direction: row-reverse; }

.spotlights > section {
	opacity: 1;
	transition: opacity 1s ease;
}

.spotlights > section.inactive,
body.is-preload .spotlights > section { opacity: 0; }

@media screen and (max-width: 1280px) {
	.spotlights > section > .content > .inner { padding: 3em 2em; }
}

@media screen and (max-width: 980px) {
	.spotlights > section {
		flex-direction: column !important;
		align-items: stretch;
	}

	.spotlights > section > .image {
		width: 100%;
		min-height: 0;
		aspect-ratio: 3 / 2;
		max-height: 20em;
	}

	.spotlights > section > .content {
		width: 100%;
	}

	.spotlights > section > .content > .inner {
		padding: 3em 2em;
		max-width: none;
	}
}

@media screen and (max-width: 736px) {
	.spotlights > section > .image { aspect-ratio: 16 / 9; }
	.spotlights > section > .content > .inner { padding: 2.5em 1.5em; }
}

/* -- Features (icon grid) -------------------------------------------------- */

.features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20em), 1fr));
	gap: 3em;
	list-style: none;
	margin: 0 0 2em 0;
	padding: 0;
	width: 100%;
}

.features > li {
	padding: 0;
	margin: 0;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.features.inactive > li,
body.is-preload .features > li { opacity: 0; transform: translateY(1em); }

.features > li:nth-child(2) { transition-delay: 0.15s; }
.features > li:nth-child(3) { transition-delay: 0.3s; }
.features > li:nth-child(4) { transition-delay: 0.45s; }
.features > li:nth-child(5) { transition-delay: 0.6s; }
.features > li:nth-child(n+6) { transition-delay: 0.75s; }

.features h3 {
	font-size: 1em;
	letter-spacing: 0.1em;
	margin: 0 0 0.75em 0;
	text-transform: uppercase;
}

.features p { margin: 0; font-size: 0.95em; }

@media screen and (max-width: 736px) {
	.features { gap: 2.5em; }
}

/* -- Accordion (services / FAQ) -------------------------------------------- */

.accordion { margin: 2rem 0 0 0; }

.accordion details {
	border: 1px solid var(--border);
	border-radius: 8px;
	margin: 0 0 1rem 0;
	background: var(--border-bg);
	transition: background var(--transition);
}

.accordion details[open] { background: rgba(255, 255, 255, 0.09); }

.accordion summary {
	color: var(--fg-bold);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.75em;
	font-weight: 600;
	list-style: none;
	/* 44px+ touch target. */
	padding: 1rem 1.25rem;
}

.accordion summary::-webkit-details-marker { display: none; }

.accordion summary::after {
	content: '';
	margin-left: auto;
	width: 0.55em;
	height: 0.55em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-0.15em, -0.15em);
	transition: transform var(--transition);
	flex: 0 0 auto;
}

.accordion details[open] > summary::after {
	transform: rotate(-135deg) translate(-0.15em, -0.15em);
}

.accordion summary:hover { background: rgba(255, 255, 255, 0.08); border-radius: 8px; }

.accordion .answer {
	padding: 0 1.25rem 1.25rem 1.25rem;
	color: rgba(255, 255, 255, 0.85);
}

.accordion .answer > :last-child { margin-bottom: 0; }
.accordion .answer p + .button { margin-top: 0.5em; }

.accordion summary svg {
	width: 1.1em;
	height: 1.1em;
	fill: currentColor;
	flex: 0 0 auto;
}

/* -- Pricing tiers --------------------------------------------------------- */

.pricing {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17em), 1fr));
	gap: 2em;
	list-style: none;
	margin: 0 0 2em 0;
	padding: 0;
	align-items: start;
}

.pricing > li {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--border-bg);
	border: 1px solid var(--border);
	border-radius: 10px;
	margin: 0;
	padding: 2em 1.75em;
	height: 100%;
}

.pricing > li.featured {
	border-color: var(--brand-orange-hover);
	box-shadow: 0 0 0 1px var(--brand-orange-hover);
}

.pricing .tier-badge {
	position: absolute;
	top: -0.85em;
	left: 1.75em;
	background: linear-gradient(90deg, var(--brand-orange), var(--brand-orange-light));
	border-radius: 3em;
	color: #1a0f26;
	font-size: 0.6em;
	font-weight: 800;
	letter-spacing: 0.2em;
	padding: 0.5em 1.25em;
	text-transform: uppercase;
}

.pricing h3 {
	font-size: 1.15em;
	margin: 0 0 0.25em 0;
}

.pricing .price {
	color: var(--fg-bold);
	display: block;
	font-size: 1.9em;
	font-weight: bold;
	line-height: 1.2;
	margin: 0 0 0.15em 0;
}

.pricing .price-note {
	display: block;
	font-size: 0.8em;
	margin: 0 0 1.5em 0;
}

.pricing ul {
	list-style: none;
	margin: 0 0 2em 0;
	padding: 0;
	flex-grow: 1;
	font-size: 0.9em;
}

.pricing ul li {
	padding: 0 0 0 1.6em;
	margin: 0 0 0.7em 0;
	position: relative;
}

.pricing ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.35em;
	height: 0.65em;
	border-right: 2px solid var(--brand-orange-hover);
	border-bottom: 2px solid var(--brand-orange-hover);
	transform: rotate(45deg);
}

.pricing .button { width: 100%; }

/* -- Testimonials ---------------------------------------------------------- */

.testimonials {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20em), 1fr));
	gap: 1.5em;
	list-style: none;
	margin: 0 0 2em 0;
	padding: 0;
}

.testimonials > li {
	background: var(--border-bg);
	border: 1px solid var(--border);
	border-radius: 10px;
	margin: 0;
	padding: 1.75em;
}

.testimonials blockquote {
	border: 0;
	font-style: normal;
	margin: 0 0 1em 0;
	padding: 0;
	font-size: 0.95em;
}

.testimonials cite {
	color: var(--fg-bold);
	display: block;
	font-size: 0.85em;
	font-style: normal;
	font-weight: bold;
}

/* -- Breadcrumbs ----------------------------------------------------------- */

.breadcrumbs {
	font-size: 0.75em;
	letter-spacing: 0.1em;
	margin: 0 0 2em 0;
	text-transform: uppercase;
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.breadcrumbs li { margin: 0; padding: 0; display: flex; gap: 0.5em; align-items: center; }
.breadcrumbs li + li::before { content: '/'; color: var(--fg-light); }
.breadcrumbs a { border-bottom: 0; }
.breadcrumbs a:hover { color: var(--brand-orange-hover); }
.breadcrumbs [aria-current="page"] { color: var(--fg-bold); }

/* -- Boxed content --------------------------------------------------------- */

.box {
	border: solid 1px var(--border);
	border-radius: var(--radius);
	margin-bottom: 2em;
	padding: 1.5em;
}

.box > :last-child { margin-bottom: 0; }

.box.alt { border: 0; border-radius: 0; padding: 0; }

/* -- Map ------------------------------------------------------------------- */

.map-embed {
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 420px;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);
	background: var(--bg-alt);
}

/* -- Images ---------------------------------------------------------------- */

.image { border: 0; display: inline-block; position: relative; }
.image img { display: block; border-radius: inherit; }

.image.fit { display: block; width: 100%; margin: 0 0 2em 0; }
.image.fit img { width: 100%; border-radius: 8px; }

.image.main { display: block; width: 100%; margin: 0 0 3em 0; }
.image.main img { width: 100%; border-radius: 8px; }

/* -- Media block ----------------------------------------------------------
   A standalone image beside its text, in the same proportions as a spotlight
   row. Two real columns rather than a float, so paragraphs and list bullets
   line up in their own column instead of wrapping raggedly around the image. */

.media {
	display: flex;
	align-items: flex-start;
	gap: 3em;
	margin: 0 0 2em 0;
}

.media.reverse { flex-direction: row-reverse; }

.media > .media-image {
	flex: 0 0 40%;
	max-width: 24em;
	margin: 0;
}

.media > .media-body {
	flex: 1 1 auto;
	/* Without this a long word or code span can force the column wider than
	   its share and push the image off. */
	min-width: 0;
}

.media > .media-body > :last-child { margin-bottom: 0; }

.media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

.media figcaption {
	font-size: 0.8em;
	font-style: italic;
	margin-top: 0.75em;
}

/* A lone image in its own section stays centred, but is held to a comparable
   size rather than running the full width of the column. */
.image.centred,
figure.centred {
	display: block;
	width: 100%;
	max-width: 34em;
	margin: 0 auto 2em auto;
}

figure.centred { text-align: center; }

/* .image is inline-block by default, which collapses to zero width when it is
   the wrapper inside a centred figure. */
figure.centred .image,
.media .image {
	display: block;
	width: 100%;
}

.image.centred img,
figure.centred img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 8px;
}

@media screen and (max-width: 980px) {
	.media,
	.media.reverse {
		flex-direction: column;
		gap: 2em;
	}

	.media > .media-image {
		flex: none;
		width: 100%;
		max-width: none;
	}
}
}

figure { margin: 0 0 2em 0; }

figure figcaption {
	font-size: 0.8em;
	font-style: italic;
	margin-top: 0.75em;
}

/* ==========================================================================
   6. Utilities
   ========================================================================== */

.visually-hidden:not(:focus):not(:active) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.lead { font-size: 1.15em; }

.text-muted { color: var(--fg); }

.stack > * + * { margin-top: 1.5em; }

.updated {
	display: block;
	font-size: 0.8em;
	font-style: italic;
	margin: 0 0 2em 0;
}

/* Spam honeypot. Hidden from people and from assistive technology, without
   the off-screen negative offset that search engines treat as hidden text. */
.field.no-fill {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}