/*
Theme Name: Progressive Web Solutions Website
Theme URI: https://progressivewebsolutions.ca/
Machine Name: progressive-web
Author: Progressive Web Solutions
Author URI: https://progressivewebsolutions.ca/
Description: The website of Progressive Web Solutions, powered by Aduvio.
Version: 1.0
*/

/*
	Base typography

	Roboto throughout, as the old site had it. These are only the theme defaults: the fonts picked in
	Aduvio > Front-end settings > Typography are printed after this file (php/includes/css-from-settings.php)
	and override everything here.
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&display=swap');

body {
	font-family: "Roboto", sans-serif;
	color: #4a5560;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Roboto", sans-serif;
}

/*
	Theme default for the main colour. The colour picked in Aduvio > Front-end settings > Main theme
	color is printed after this file with !important, so this only applies when none is set there.
*/

.primary-bg {
	background-color: #29b6f6;
}

:root {
	--pws-blue: #29b6f6;
	--pws-blue-dark: #0f93d1;
	--pws-ink: #2b3138;
	--pws-ink-soft: #5b6672;
	--pws-dark: #25292e;
	--pws-dark-soft: #30363d;
	--pws-line: #e3e8ed;
	--pws-wash: #f5f8fa;
}


/* ================================================================ Header

	The core navbar is dark and carries its colours on custom properties. The old site had a white bar under a
	blue strip with the e-mail address and social icons in it, so that is what these set. The strip only exists
	when a phone, e-mail or social link is filled in under Front-end settings.
*/

.navbar-inverse {
	background: #ffffff;
}

.site-header {
	--header-accent: #29b6f6;
	--header-accent-ink: #ffffff;
	--header-link: #2b3138;
	--header-link-hover: #29b6f6;
	--header-rule: rgba(0, 0, 0, 0.08);
	--header-strip-bg: #29b6f6;
	box-shadow: 0 6px 24px rgba(20, 30, 40, 0.1);
}

.site-header .navbar-logo {
	height: 48px;
}

/* Contact is the one call to action in the bar. #nav-contact is the itemid of its row in the menus table
   (see _install/website-menu.sql) */
@media (min-width: 992px) {

	.site-header .site-header-menu > li#nav-contact {
		display: flex;
		align-items: center;
		margin-left: 10px;
	}

	.site-header .site-header-menu > li#nav-contact > a {
		padding: 10px 20px;
		border-radius: 6px;
		background: var(--pws-blue);
		color: #ffffff;
		font-weight: 600;
		line-height: 20px;
	}

	.site-header .site-header-menu > li#nav-contact > a:hover,
	.site-header .site-header-menu > li#nav-contact > a:focus {
		background: var(--pws-blue-dark);
		color: #ffffff;
	}

	.site-header .site-header-menu > li#nav-contact > a:after {
		content: none;
	}
}

/* The core never writes an active class on the menu rows, the script in footer.php does */
.site-header .site-header-menu > li.active > a,
.site-header .site-header-menu > li.active > a:hover,
.site-header .site-header-menu > li.active > a:focus {
	color: var(--pws-blue);
	background-color: transparent;
}


/* ================================================================ Page primitives

	Everything every page is built out of. All prefixed .pws- so nothing collides with Bootstrap or with the
	core website stylesheet.
*/

/* The core offsets .content by the height of the fixed header. Every page opens on a hero that paints its own
   background, so that offset would leave a pale band between the bar and the hero - the hero carries the
   clearance in its own padding instead. Core also sets overflow:hidden here, which is put back so nothing
   inside is clipped */
.pws-page.content {
	padding-top: 0;
	background: #ffffff;
	overflow: visible;
}

.pws-container {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

.pws-narrow {
	max-width: 820px;
}

.pws-section {
	padding: 80px 0;
}

.pws-section-wash {
	background: var(--pws-wash);
}

.pws-section-dark {
	background: var(--pws-dark);
	color: rgba(255, 255, 255, 0.78);
}

.pws-section-blue {
	background: var(--pws-blue);
	color: #ffffff;
}

/* Must stay a div in the markup: the core styles the bare <header> element as the legacy site header (black,
   40px tall, fixed), so a <header> here would be clipped to a black bar */
.pws-section-head {
	max-width: 720px;
	margin: 0 auto 44px auto;
	text-align: center;
}

.pws-section-head-left {
	margin-left: 0;
	text-align: left;
}

.pws-section-title {
	margin: 0;
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--pws-ink);
}

.pws-section-title:after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin: 18px auto 0 auto;
	background: var(--pws-blue);
}

.pws-section-head-left .pws-section-title:after {
	margin-left: 0;
}

.pws-section-subtitle {
	margin: 18px 0 0 0;
	font-size: 17px;
	line-height: 1.65;
	color: var(--pws-ink-soft);
}

.pws-eyebrow {
	margin: 0 0 12px 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pws-blue);
}

.pws-section-dark .pws-section-title,
.pws-section-blue .pws-section-title {
	color: #ffffff;
}

.pws-section-dark .pws-section-subtitle {
	color: rgba(255, 255, 255, 0.72);
}

.pws-section-blue .pws-section-title:after {
	background: #ffffff;
}

.pws-section-blue .pws-eyebrow {
	color: rgba(255, 255, 255, 0.85);
}

.pws-prose p,
.pws-prose li {
	font-size: 17px;
	line-height: 1.75;
	color: var(--pws-ink-soft);
}

.pws-prose p {
	margin: 0 0 18px 0;
}

.pws-prose h2,
.pws-prose h3,
.pws-prose h4 {
	margin: 34px 0 14px 0;
	color: var(--pws-ink);
	font-weight: 700;
	line-height: 1.25;
}

.pws-prose h2 {
	font-size: 28px;
}

.pws-prose h3 {
	font-size: 22px;
}

.pws-prose a {
	color: var(--pws-blue-dark);
	text-decoration: underline;
}

.pws-prose a.pws-btn {
	text-decoration: none;
}

.pws-prose a.pws-btn-primary {
	color: #ffffff;
}

.pws-prose a.pws-btn-outline {
	color: var(--pws-blue-dark);
}

.pws-prose a.pws-btn-outline:hover {
	color: #ffffff;
}

.pws-prose ul,
.pws-prose ol {
	margin: 0 0 20px 0;
	padding-left: 22px;
}


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

.pws-btn {
	display: inline-block;
	padding: 13px 28px;
	border: 2px solid transparent;
	border-radius: 4px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pws-btn:hover,
.pws-btn:focus {
	text-decoration: none;
}

.pws-btn-lg {
	padding: 16px 36px;
	font-size: 16px;
}

.pws-btn-primary {
	background: var(--pws-blue);
	border-color: var(--pws-blue);
	color: #ffffff;
}

.pws-btn-primary:hover,
.pws-btn-primary:focus {
	background: var(--pws-blue-dark);
	border-color: var(--pws-blue-dark);
	color: #ffffff;
}

/* Sits on a dark or photographic band, so its resting state is the band showing through */
.pws-btn-ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.7);
	color: #ffffff;
}

.pws-btn-ghost:hover,
.pws-btn-ghost:focus {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--pws-ink);
}

.pws-btn-outline {
	background: transparent;
	border-color: var(--pws-blue);
	color: var(--pws-blue-dark);
}

.pws-btn-outline:hover,
.pws-btn-outline:focus {
	background: var(--pws-blue);
	color: #ffffff;
}

.pws-btn-white {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--pws-blue-dark);
}

.pws-btn-white:hover,
.pws-btn-white:focus {
	background: transparent;
	color: #ffffff;
}


/* ---------------------------------------------------------------- Grids */

.pws-grid {
	display: grid;
	gap: 28px;
}

.pws-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

.pws-grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

.pws-grid-4 {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 991px) {

	.pws-grid-3,
	.pws-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {

	.pws-grid-2,
	.pws-grid-3,
	.pws-grid-4 {
		grid-template-columns: 1fr;
	}

	.pws-section {
		padding: 56px 0;
	}
}


/* ---------------------------------------------------------------- Cards */

.pws-card {
	display: block;
	padding: 32px 28px;
	border: 1px solid var(--pws-line);
	border-radius: 6px;
	background: #ffffff;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

a.pws-card:hover,
a.pws-card:focus {
	border-color: var(--pws-blue);
	box-shadow: 0 12px 32px rgba(20, 30, 40, 0.1);
	transform: translateY(-3px);
	text-decoration: none;
	color: inherit;
}

.pws-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 20px;
	border: 2px solid var(--pws-blue);
	border-radius: 4px;
	color: var(--pws-blue);
	font-size: 22px;
}

.pws-card-title {
	margin: 0 0 12px 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--pws-ink);
}

.pws-card-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--pws-ink-soft);
}

.pws-card-more {
	display: inline-block;
	margin-top: 16px;
	font-size: 14px;
	font-weight: 700;
	color: var(--pws-blue-dark);
}

.pws-card-center {
	text-align: center;
}


/* ---------------------------------------------------------------- Tick list */

.pws-ticks {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pws-ticks > li {
	position: relative;
	padding: 7px 0 7px 30px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--pws-ink);
}

.pws-ticks > li:before {
	content: "\f00c";
	position: absolute;
	top: 8px;
	left: 0;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 14px;
	line-height: 1.55;
	color: var(--pws-blue);
}

.pws-ticks-cols {
	columns: 2;
	column-gap: 40px;
}

@media (max-width: 640px) {
	.pws-ticks-cols {
		columns: 1;
	}
}


/* ---------------------------------------------------------------- Hero */

.pws-hero {
	position: relative;
	overflow: hidden;

	/* 60px of it is the fixed header this sits under, more when the strip above the bar is on */
	padding: 168px 0 96px 0;

	background-color: var(--pws-dark);
	background-image: linear-gradient(160deg, var(--pws-dark-soft) 0%, var(--pws-dark) 60%, #1b1e22 100%);
	color: #ffffff;
}

.pws-hero-compact {
	padding: 148px 0 64px 0;
}

/* A hero over a photograph: the picture is set inline, this darkens it so the type reads */
.pws-hero-photo {
	background-size: cover;
	background-position: center;
}

.pws-hero-photo:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(180deg, rgba(20, 24, 28, 0.62) 0%, rgba(20, 24, 28, 0.5) 100%);
}

.pws-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 880px;
	text-align: center;
}

.pws-hero-eyebrow {
	margin: 0 0 16px 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pws-blue);
}

.pws-hero-title {
	margin: 0;
	font-size: clamp(32px, 5.4vw, 58px);
	font-weight: 500;
	line-height: 1.12;
	color: #ffffff;
}

.pws-hero-compact .pws-hero-title {
	font-size: clamp(28px, 4.2vw, 44px);
	font-weight: 700;
}

.pws-hero-subtitle {
	margin: 22px auto 0 auto;
	max-width: 700px;
	font-size: clamp(16px, 1.9vw, 20px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

.pws-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 34px;
}

/* A service page's hero: the words on the left, the picture on the right */
.pws-hero-split .pws-hero-inner {
	max-width: none;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 48px;
	align-items: center;
	text-align: left;
}

.pws-hero-split .pws-hero-subtitle {
	margin-left: 0;
}

.pws-hero-split .pws-hero-actions {
	justify-content: flex-start;
}

.pws-hero-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

@media (max-width: 900px) {

	.pws-hero-split .pws-hero-inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.pws-hero-split .pws-hero-actions {
		justify-content: center;
	}
}

.pws-breadcrumb {
	margin: 0 0 18px 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.7);
}

.pws-breadcrumb li {
	display: inline;
}

.pws-breadcrumb li + li:before {
	content: "/";
	margin: 0 8px;
	opacity: 0.6;
}

.pws-breadcrumb a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.pws-breadcrumb a:hover {
	text-decoration: underline;
}


/* ---------------------------------------------------------------- Text beside a picture */

.pws-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.pws-split + .pws-split {
	margin-top: 72px;
}

.pws-split-reverse .pws-split-media {
	order: -1;
}

.pws-split-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.pws-split-note {
	margin-top: 24px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--pws-ink-soft);
	text-align: center;
}

@media (max-width: 900px) {

	.pws-split {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.pws-split-reverse .pws-split-media {
		order: 0;
	}
}


/* ---------------------------------------------------------------- Included / brands / client logos */

.pws-chips {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pws-chips li {
	padding: 14px 18px;
	border: 1px solid var(--pws-line);
	border-radius: 6px;
	background: #ffffff;
	font-weight: 500;
	color: var(--pws-ink);
}

.pws-chips li:before {
	content: "\f00c";
	margin-right: 10px;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: var(--pws-blue);
}

@media (max-width: 900px) {
	.pws-chips {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.pws-chips {
		grid-template-columns: 1fr;
	}
}

.pws-logos {
	display: flex;
	flex-wrap: wrap;
	gap: 28px 44px;
	align-items: center;
	justify-content: center;
}

.pws-logos img {
	display: block;
	max-height: 64px;
	max-width: 190px;
	width: auto;
	height: auto;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.15s ease, opacity 0.15s ease;
}

.pws-logos img:hover {
	filter: none;
	opacity: 1;
}

.pws-brands img {
	max-height: 76px;
	filter: none;
	opacity: 1;
}


/* ---------------------------------------------------------------- Reviews and testimonials */

.pws-stars {
	color: #f5b800;
	letter-spacing: 2px;
}

.pws-review {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border: 1px solid var(--pws-line);
	border-radius: 6px;
	background: #ffffff;
}

.pws-review-text {
	flex: 1;
	margin: 12px 0 18px 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--pws-ink-soft);
}

.pws-review-name {
	font-weight: 700;
	color: var(--pws-ink);
}

.pws-review-meta {
	font-size: 13px;
	color: #8a95a0;
}

.pws-rating {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 36px;
	font-size: 17px;
	color: var(--pws-ink-soft);
}

.pws-rating strong {
	font-size: 30px;
	color: var(--pws-ink);
}

.pws-testimonial {
	text-align: center;
	padding: 36px 28px;
	border-radius: 6px;
	background: #ffffff;
	box-shadow: 0 8px 28px rgba(20, 30, 40, 0.07);
}

.pws-testimonial img {
	width: 90px;
	height: 90px;
	margin-bottom: 14px;
	border-radius: 50%;
	object-fit: cover;
}

.pws-testimonial blockquote {
	margin: 0 0 16px 0;
	padding: 0;
	border: 0;
	font-size: 16px;
	font-style: italic;
	line-height: 1.7;
	color: var(--pws-ink-soft);
}

.pws-testimonial-name {
	font-weight: 700;
	color: var(--pws-ink);
}

.pws-testimonial-role {
	font-size: 14px;
	color: #8a95a0;
}


/* ---------------------------------------------------------------- Process */

.pws-steps {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: pws-step;
}

.pws-step {
	position: relative;
	padding-top: 64px;
	text-align: center;
	counter-increment: pws-step;
}

.pws-step:before {
	content: counter(pws-step);
	position: absolute;
	top: 0;
	left: 50%;
	width: 48px;
	height: 48px;
	margin-left: -24px;
	border-radius: 50%;
	background: var(--pws-blue);
	color: #ffffff;
	font-size: 20px;
	font-weight: 700;
	line-height: 48px;
}

.pws-step-title {
	margin: 0 0 10px 0;
	font-size: 19px;
	font-weight: 700;
	color: var(--pws-ink);
}

.pws-step-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--pws-ink-soft);
}

@media (max-width: 991px) {
	.pws-steps {
		grid-template-columns: 1fr;
		max-width: 520px;
		margin: 0 auto;
	}
}


/* ---------------------------------------------------------------- Portfolio and blog cards */

.pws-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 0 0 40px 0;
}

.pws-filter {
	padding: 9px 20px;
	border: 2px solid var(--pws-line);
	border-radius: 999px;
	background: #ffffff;
	font-size: 14px;
	font-weight: 700;
	color: var(--pws-ink-soft);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.pws-filter:hover,
.pws-filter.is-active {
	border-color: var(--pws-blue);
	color: var(--pws-blue-dark);
}

.pws-filter.is-active {
	background: var(--pws-blue);
	color: #ffffff;
}

.pws-tile {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--pws-line);
	border-radius: 6px;
	background: #ffffff;
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

a.pws-tile:hover,
a.pws-tile:focus {
	box-shadow: 0 14px 34px rgba(20, 30, 40, 0.12);
	transform: translateY(-3px);
	text-decoration: none;
	color: inherit;
}

.pws-tile[hidden] {
	display: none;
}

.pws-tile-image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--pws-wash);
}

.pws-tile-body {
	flex: 1;
	padding: 20px 22px 24px 22px;
}

.pws-tile-title,
.pws-tile-meta,
.pws-tile-text {
	display: block;
}

.pws-tile-title {
	margin: 0 0 8px 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--pws-ink);
}

.pws-tile-meta {
	margin: 0 0 8px 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pws-blue-dark);
}

.pws-tile-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--pws-ink-soft);
}

.pws-empty {
	padding: 40px 0;
	text-align: center;
	color: var(--pws-ink-soft);
}

/* Projects and posts: the content as a list of blocks */
.pws-article-image {
	display: block;
	width: 100%;
	max-width: 1000px;
	height: auto;
	margin: 0 auto 44px auto;
	border-radius: 6px;
}

.pws-figure {
	margin: 28px 0;
}

.pws-figure img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 4px;
}

.pws-gallery {
	align-items: start;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	margin: 28px 0;
}

.pws-gallery img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.pws-article-actions {
	margin: 34px 0;
}

.pws-article-meta {
	margin: 0 0 18px 0;
	font-size: 14px;
	color: #8a95a0;
}

.pws-pager {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid var(--pws-line);
}


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

.pws-form-wrap {
	max-width: 760px;
	margin: 0 auto;
}

.pws-form {
	margin: 0;
}

.pws-form-alert:empty {
	display: none;
}

.pws-form-alert {
	margin-bottom: 22px;
}

.pws-field {
	margin-bottom: 20px;
}

.pws-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

@media (max-width: 640px) {
	.pws-field-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

.pws-label {
	display: block;
	margin-bottom: 7px;
	font-size: 14px;
	font-weight: 700;
	color: var(--pws-ink);
}

.pws-label-note {
	font-weight: 400;
	color: #8a95a0;
}

.pws-input {
	display: block;
	width: 100%;
	padding: 13px 16px;
	border: 1px solid #cfd7de;
	border-radius: 4px;
	background: #ffffff;
	font-size: 16px;
	color: var(--pws-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pws-input:focus {
	border-color: var(--pws-blue);
	box-shadow: 0 0 0 3px rgba(41, 182, 246, 0.18);
	outline: none;
}

.pws-textarea {
	min-height: 150px;
	resize: vertical;
}

.pws-field-error {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: #c0392b;
}

.pws-form-success,
.pws-form-error {
	padding: 14px 18px;
	border-radius: 4px;
	font-size: 15px;
	line-height: 1.5;
}

.pws-form-success {
	border: 1px solid #8fd19e;
	background: #e6f6ea;
	color: #1d5a2c;
}

.pws-form-error {
	border: 1px solid #f0a8a2;
	background: #fdeceb;
	color: #8a1f17;
}

.pws-form button[disabled] {
	opacity: 0.6;
	cursor: wait;
}

.pws-hp {
	position: absolute;
	left: -9999px;
}

.pws-form-title {
	margin: 0 0 10px 0;
	font-size: 28px;
	font-weight: 700;
	text-align: center;
	color: var(--pws-ink);
}

.pws-form-intro {
	margin: 0 0 30px 0;
	text-align: center;
	color: var(--pws-ink-soft);
}


/* ---------------------------------------------------------------- Contact details, call to action */

.pws-contact-grid {
	align-items: start;
}

.pws-contact-grid {
	align-items: start;
}

.pws-contact-details {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pws-contact-details li {
	margin-bottom: 14px;
	font-size: 16px;
	color: var(--pws-ink-soft);
}

.pws-contact-details i {
	width: 22px;
	margin-right: 8px;
	color: var(--pws-blue);
}

.pws-cta {
	text-align: center;
}

.pws-cta .pws-section-title {
	color: #ffffff;
}

.pws-cta p {
	max-width: 640px;
	margin: 20px auto 30px auto;
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
}

.pws-not-found {
	text-align: center;
	padding: 40px 0;
}


/* ================================================================ Footer

	The core gives the .footer wrapper a 200px minimum height and a white ground, which the footer below
	fills itself.
*/

.footer {
	min-height: 0;
	background: transparent;
}

.pws-footer {
	background: var(--pws-dark);
	color: rgba(255, 255, 255, 0.72);
	font-size: 15px;
}

.pws-footer a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}

.pws-footer a:hover,
.pws-footer a:focus {
	color: #ffffff;
	text-decoration: underline;
}

.pws-footer-top {
	padding: 60px 0 40px 0;
}

.pws-footer-cols {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
}

@media (max-width: 900px) {
	.pws-footer-cols {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.pws-footer-cols {
		grid-template-columns: 1fr;
	}
}

.pws-footer-logo {
	display: block;
	max-width: 230px;
	height: auto;
	margin-bottom: 18px;
	padding: 8px 12px;
	border-radius: 4px;
	background: #ffffff;
}

.pws-footer-tagline {
	margin: 0 0 18px 0;
	line-height: 1.65;
}

.pws-footer-social a {
	display: inline-block;
	margin-right: 14px;
	font-size: 20px;
}

.pws-footer-title {
	margin: 0 0 16px 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #ffffff;
}

.pws-footer-list,
.pws-footer-legal {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pws-footer-list li {
	margin-bottom: 10px;
}

.pws-footer-bottom {
	padding: 22px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 14px;
}

.pws-footer-bottom-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 30px;
	justify-content: space-between;
}

.pws-footer-legal li {
	display: inline-block;
	margin-left: 22px;
}