@import url("fontawesome-all.min.css"); /* absolute path */
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,600");

/*
	Prologue by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
:root {
    /* Core brand / action colour */
    --primary: #7F8F8D;     /* Accent colour (buttons, highlights) */
    --accent: #2F6FA3;      /* Same as primary unless you want variation */
    /* Backgrounds */
    --bg-light: #F4F5F7;    /* Light sections */
    --bg-footer: #7F8F8D;   /* Dark section/footer */
    /* Text */
    --text-dark: #1F2933;   /* Main body text */
    --text-light: #FFFFFF;  /* Text on dark backgrounds */
    --text-muted: #AAB4B2;  /* Secondary text */
    /* UI elements */
    --border: #D1D5DB;      /* Dividers, card borders */
    /* Interaction */
    --bt-hover: #255a85;    /* Slightly darker version of accent */
}

:root {
	/* Font family */
	--font-base: 'Source Sans Pro', sans-serif;
	/* Font weights */
	--fw-light: 300;
	--fw-regular: 400;
	--fw-bold: 600;
	/* Font sizes */
	--fs-body: 19pt;
	--fs-h2: 2em;
	--fs-h3: 1.5em;
	--fs-small: 0.8em;
	/* Line heights */
	--lh-body: 1.75em;
	--lh-heading: 1.5em;
	/* Letter spacing */
	--ls-h2: -1px;
}

:root {
	/* Button styling */
	--btn-text: var(--text-light);
	--btn-bg: var(--accent);
	--btn-bg-hover: var(--bt-hover);
	--btn-bg-active: var(--primary);
	--btn-radius: 0.35em;
	--btn-padding-y: 0.75em;
	--btn-padding-x: 2.5em;
}

:root {
	/* Footer layout */
	--footer-offset: var(--header-width);
	--footer-bg: var(--bg-footer);
	--footer-padding-top: 3em;
	--footer-padding-bottom: 4em;
	--footer-font-size: 0.8em;
	--footer-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 0.1em 0.1em rgba(0, 0, 0, 0.025);

	/* Footer copyright list */
	--footer-divider: 1px solid rgba(128, 128, 128, 0.35);
	--footer-item-gap: 0.5em;
}

:root {
	/* Service card styling */
	--item-shadow: 0 0.05em 0.15em rgba(0, 0, 0, 0.05);
	--item-space: 1em;
	--item-text-width: 260px;
	--item-heading-size: 0.8em;
	--item-body-size: 0.95em;
	--item-body-line: 1.4em;
	--item-list-line: 1.5em;
	--item-text-muted: #4B5563;
}


:root {
	/* Grid spacing */
	--grid-gap: 2.5rem;          /* Desktop gap */
	--grid-gap-mobile: 1.25rem;  /* Mobile gap */
}

:root {
	--list-indent: 1.25em;
	--list-item-offset: 0.5em;
}


:root {
	--icon-size: 2em;
	--icon-gap: 0.5em;
}

:root {
	--form-bg: rgba(255, 255, 255, 0.75);
	--form-bg-focus: #fff;
	--form-border: rgba(0, 0, 0, 0.15);
	--form-placeholder: #555;
	--form-radius: 0.35em;
	--form-padding-y: 0.75em;
	--form-padding-x: 1em;
	--form-shadow-inset: inset 0 0.1em 0.1em 0 rgba(0, 0, 0, 0.05);
	--form-shadow-focus: 0 0 0 2px var(--accent);
	--form-textarea-min: 14em;
}


:root {
	/* Header layout */
	--header-width: 375px;
	--header-bg: var(--bg-light);
	--header-text: var(--text-dark);
	--header-shadow: inset -0.25em 0 0.25em rgba(0, 0, 0, 0.1);

	/* Header spacing */
	--header-bottom-pad-top: 1.5em;
	--header-bottom-pad-bottom: 0.75em;
	--logo-margin: 1.75em 0.5em 3em;
	--logo-image-gap: 0.75em;

	/* Logo text */
	--logo-title-size: 1em;
	--logo-tagline-size: 1em;
	--logo-tagline-line: 1.25em;
	--logo-tagline-color: #5B6570;

	/* Header icons */
	--header-icon-size: 0.8em;
	--header-icon-color: #41484c;
	--header-icon-hover: var(--accent);

	/* Nav */
	--nav-link-pad-y: 0.5em;
	--nav-link-pad-x: 1.5em;
	--nav-link-bg: var(--border);
	--nav-link-text: var(--text-dark);
	--nav-link-size: 0.8em;
	--nav-active-bg: rgba(0, 0, 0, 0.15);
	--nav-active-shadow: inset 0 0 0.25em rgba(0, 0, 0, 0.125);
	--nav-active-text: var(--text-light);
	--nav-icon-active: var(--accent);
}

:root {
	/* Main layout */
	--main-offset: var(--header-width);

	/* Section spacing / styling */
	--section-padding-y: 4em;
	--section-padding-cover-y: 10em;
	--section-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 0.1em 0.1em rgba(0, 0, 0, 0.025);

	/* Dark section text */
	--section-dark-text: rgba(255, 255, 255, 0.75);
	--section-dark-strong: var(--text-light);

	/* Section backgrounds */
	--section-one-bg: var(--primary);
	--section-two-bg: var(--bg-light);
	--section-three-bg: var(--primary);
	--section-four-bg: var(--bg-light);
}


:root {
	/* -------------------------------------------------------
	   RESPONSIVE LAYOUT
	------------------------------------------------------- */

	/* Desktop / wide sidebar widths */
	--header-width: 375px;
	--header-width-wide: 300px;
	--header-width-narrow: 20%;

	/* Mobile off-canvas sidebar */
	--header-width-mobile: 275px;
	--header-z: 10002;
	--header-toggle-z: 10001;
	--layout-shift-mobile: 275px;

	/* Responsive typography */
	--fs-body-wide: 17pt;
	--fs-body-narrow: 16pt;
	--fs-body-mobile: 16pt;

	/* Responsive section spacing */
	--section-padding-normal: 3em;
	--section-padding-cover-normal: 5em;
	--section-padding-cover-mobile: 4em;

	/* Responsive container / item tweaks */
	--container-pad-mobile: 2em;
	--item-gap-narrow: 20px;
	--item-gap-mobile: 15px;
	--icon-size-narrow: 1.75em;
	--icon-size-mobile: 1.75em;
	--icon-font-mobile: 1.25em;

	/* Mobile header styling */
	--header-mobile-bg: var(--bg-light);
	--header-mobile-shadow: inset -0.25em 0 0.25em rgba(0, 0, 0, 0.125);
	--header-mobile-divider: 1px solid rgba(0, 0, 0, 0.08);
	--header-mobile-divider-shadow: 0 -1px 0 rgba(0, 0, 0, 0.08);

	/* Mobile toggle button */
	--toggle-width: 3.25em;
	--toggle-height: 2.25em;
	--toggle-offset: 0.5em;
	--toggle-icon-size: 18px;
	--toggle-bg: rgba(31, 41, 51, 0.75);
	--toggle-text: var(--text-light);
	--toggle-radius: 0.35em;
	--toggle-icon: '\f0c9';
}


:root {
	/* Mobile typography / spacing */
	--fs-body-mobile-sm: 14pt;
	--fs-h2-mobile: 1.5em;
	--container-pad-mobile-sm: 15px;
	--section-pad-mobile-sm: 2em;
	--section-cover-pad-mobile-sm: 4em;
	--cover-header-pad-mobile-sm: 1em;

	/* Mobile icons / footer */
	--icon-size-mobile-sm: 2em;
	--footer-line-mobile: 1.25em;
	--footer-item-gap-mobile: 1em;

	/* Hero text */
	--hero-title-weight: var(--fw-bold);
	--hero-title-letter: 0.02em;
	--hero-title-line: 1.3em;
	--hero-title-color: var(--text-light);
	--hero-title-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	--hero-text-color: rgba(255, 255, 255, 0.92);

	/* About section */
	--about-pad-top: 4em;
	--about-pad-bottom: 3em;
	--about-list-width: 600px;
	--about-text-width: 700px;

	/* Form status popup */
	--status-top: 20px;
	--status-right: 20px;
	--status-z: 9999;
	--status-max-width: 320px;
	--status-pad-y: 12px;
	--status-pad-x: 16px;
	--status-radius: 6px;
	--status-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
	--status-font-size: 0.95rem;
	--status-line-height: 1.4;
	--status-shift: -10px;
	--status-border-width: 5px;

	/* Status colours */
	--status-success-bg: #e8f7ec;
	--status-success-text: #1f5f2f;
	--status-success-border: #2f8f46;
	--status-error-bg: #fdecec;
	--status-error-text: #7a1f1f;
	--status-error-border: #c43d3d;
}

:root {
	/* Image sizing / spacing */
	--image-avatar-sm: 48px;
	--image-fit-height: 220px;
	--space-image: 2em;
}

:root {
	/* Service gallery modal */
	--modal-overlay-bg: rgba(0, 0, 0, 0.75);
	--modal-bg: var(--bg-light);
	--modal-text: var(--text-dark);
	--modal-muted: var(--text-muted);
	--modal-shadow: 0 1.2em 3em rgba(0, 0, 0, 0.35);
	--modal-radius: 0.5em;
	--modal-pad: 2em;
	--modal-pad-mobile: 1.25em;
	--modal-gap: 1.5em;
	--modal-z: 10000;
	--modal-close-size: 2rem;

	/* Privacy note */
	--privacy-note-size: 0.9em;
}

/* -------------------------------------------------------
   BASIC TYPOGRAPHY / PAGE DEFAULTS
------------------------------------------------------- */

html {
	box-sizing: border-box;
}

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

/* Base page styling */
body {
	background: var(--bg-light);
	font-family: var(--font-base);
	font-size: var(--fs-body);
	font-weight: var(--fw-light);
	line-height: var(--lh-body);
	color: var(--text-dark);
}

/* Disable animations during preload */
body.is-preload *,
body.is-preload *::before,
body.is-preload *::after {
	animation: none !important;
	transition: none !important;
}

/* Form elements inherit page typography */
input,
textarea,
select {
	font: inherit;
	color: inherit;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: var(--lh-heading);
	font-weight: var(--fw-light);
	color: var(--text-muted);
}

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

/* Slight emphasis inside headings */
h1 a strong,
h2 a strong,
h3 a strong,
h4 a strong,
h5 a strong,
h6 a strong {
	color: var(--text-dark);
}

/* Heading sizes */
h2 {
	font-size: var(--fs-h2);
	letter-spacing: var(--ls-h2);
}

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

h2.alt strong {
	color: var(--text-dark);
}

h3 {
	font-size: var(--fs-h3);
}

/* Section spacing */
header {
	margin: 0 0 2em 0;
}

header > p {
	margin: 1em 0 0 0;
}

footer {
	margin: 2em 0 0 0;
}

/* Bold text */
strong,
b {
	font-weight: var(--fw-bold);
	color: var(--text-dark);
}

/* Italics */
em,
i {
	font-style: italic;
}

/* Links */
a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted var(--border);
	transition: color 0.35s ease, border-bottom-color 0.35s ease;
	outline: 0;
}

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

/* Sub/sup */
sub {
	position: relative;
	top: 0.5em;
	font-size: var(--fs-small);
}

sup {
	position: relative;
	top: -0.5em;
	font-size: var(--fs-small);
}

/* Divider */
hr {
	border: 0;
	border-top: 1px solid var(--border);
}

/* Blockquote */
blockquote {
	padding: 1em 0 1em 2em;
	border-left: 0.5em solid var(--border);
	font-style: italic;
}

/* Standard spacing */
p,
ul,
ol,
dl,
table {
	margin-bottom: 2em;
}

/* Float clear helper */
br.clear {
	clear: both;
}


/* FORCE all .button styling to use your variables */
.button {
    background: var(--btn-bg);
    color: var(--btn-text);
    border: none;
    border-radius: var(--btn-radius);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    display: inline-block;
    text-align: center;
    cursor: pointer;
    transition: background 0.3s ease;
}

/* Hover */
.button:hover {
    background: var(--btn-bg-hover);
}

/* Active */
.button:active {
    background: var(--btn-bg-active);
}

/* Standardise ALL buttons */
.button,
button.button {
    font-size: 1em;                  /* force consistency */
    padding: 0.85em 2.75em;         /* slightly larger, more balanced */
}

/* Optional: make primary CTA (hero) slightly bigger */
#main > section.cover .button {
    font-size: 1.1em;
    padding: 1em 3em;
}

/* -------------------------------------------------------
   CONTAINER
------------------------------------------------------- */

.container {
	width: 1400px;
	max-width: 100%;
	margin: 0 auto;
}

@media screen and (min-width: 961px) and (max-width: 1880px) {
	.container {
		width: 1200px;
	}
}

@media screen and (min-width: 961px) and (max-width: 1620px) {
	.container {
		width: 960px;
	}
}

@media screen and (max-width: 1320px) {
	.container {
		width: 100%;
	}
}


/* -------------------------------------------------------
   GRID / ROW LAYOUT
   Stripped back to only what this site currently uses
------------------------------------------------------- */

/* Main flex row */
.row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin-top: calc(var(--grid-gap) * -1);
	margin-left: calc(var(--grid-gap) * -1);
}

/* Row children pick up the gap via padding */
.row > * {
	padding-top: var(--grid-gap);
	padding-left: var(--grid-gap);
}

/* Remove bottom margin from the last item inside each cell when wanted */
.row.gtr-uniform > * > :last-child {
	margin-bottom: 0;
}

/* Horizontal alignment helpers */
.row.aln-left   { justify-content: flex-start; }
.row.aln-center { justify-content: center; }
.row.aln-right  { justify-content: flex-end; }

/* Vertical alignment helpers */
.row.aln-top    { align-items: flex-start; }
.row.aln-middle { align-items: center; }
.row.aln-bottom { align-items: flex-end; }

/* -------------------------------------------------------
   COLUMN WIDTHS
   Only keep the widths actually used in your HTML
------------------------------------------------------- */

.row > .col-3  { width: 25%; }
.row > .col-6  { width: 50%; }
.row > .col-12 { width: 100%; }

/* -------------------------------------------------------
   SERVICES CARDS
   Makes each service card equal height
------------------------------------------------------- */

.services-row > .col-3 {
	display: flex;
}

.services-row > .col-3 > .item {
	width: 100%;
	height: 100%;
}

/* -------------------------------------------------------
   MOBILE
   Stack mobile-marked columns full width
------------------------------------------------------- */

@media screen and (max-width: 736px) {
	.row {
		margin-top: calc(var(--grid-gap-mobile) * -1);
		margin-left: calc(var(--grid-gap-mobile) * -1);
	}

	.row > * {
		padding-top: var(--grid-gap-mobile);
		padding-left: var(--grid-gap-mobile);
	}

	.row > .col-12-mobile {
		width: 100%;
	}
}

/* -------------------------------------------------------
   SECTIONS / ARTICLES
   Standard vertical spacing between content blocks
------------------------------------------------------- */

/* Default spacing below standalone sections/articles */
section,
article {
	margin-bottom: 3em;
}

/* Remove trailing space at the end of a section/article */
section > :last-child,
article > :last-child,
section > .container,
article > .container,
section:last-child,
article:last-child {
	margin-bottom: 0;
}

/* Grid items manage their own spacing, so remove section/article margin inside rows */
.row > section,
.row > article {
	margin-bottom: 0;
}



/* -------------------------------------------------------
   IMAGES
------------------------------------------------------- */

.image {
	display: inline-block;
}

.image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Small avatar image */
.image.avatar48 {
	width: var(--image-avatar-sm);
	height: var(--image-avatar-sm);
}

.image.avatar48 img {
	width: 100%;
	height: 100%;
}

/* Full-width cropped image block */
.image.fit {
	display: block;
	width: 100%;
	height: var(--image-fit-height);
	overflow: hidden;
}

/* Featured image with spacing below */
.image.featured {
	display: block;
	width: 100%;
	margin: 0 0 var(--space-image) 0;
}

/* Floated image aligned left with text wrap */
.image.left {
	float: left;
	margin: 0 var(--space-image) var(--space-image) 0;
}

/* Centred image block */
.image.centered {
	display: block;
	margin: 0 0 var(--space-image) 0;
}

.image.centered img {
	width: auto;
	margin: 0 auto;
}


/* -------------------------------------------------------
   LISTS
   Only apply styling where explicitly required
------------------------------------------------------- */


/* Styled unordered list */
.list {
	list-style: disc;
	padding-left: var(--list-indent);
}

.list li {
	padding-left: var(--list-item-offset);
}

/* Styled ordered list */
.list-ordered {
	list-style: decimal;
	padding-left: var(--list-indent);
}

.list-ordered li {
	padding-left: calc(var(--list-item-offset) * 0.5);
}


/* -------------------------------------------------------
   CONTACT ICONS
   Header contact links and Font Awesome icon rendering
------------------------------------------------------- */

.contact-icons {
	display: flex;
	gap: var(--icon-gap);
	justify-content: center;
	padding-left: 0;
	margin: 0;
}

.contact-icons a {
	display: inline-block;
	width: var(--icon-size);
	height: var(--icon-size);
	line-height: var(--icon-size);
	text-align: center;
	text-decoration: none;
}

.contact-icons a:hover {
	color: var(--accent);
}

/* Render Font Awesome icons */
.icon::before {
	display: inline-block;
	font-family: 'Font Awesome 5 Free';
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

.icon.solid::before {
	font-weight: 900;
}

/* -------------------------------------------------------
   FORM
   Shared styling for labels, inputs, selects and textarea
------------------------------------------------------- */

/* Label above each field */
form label {
	display: block;
	margin-bottom: 0.5em;
}

/* Text-like form controls */
form input[type="text"],
form input[type="email"],
form select,
form textarea {
	display: block;
	width: 100%;
	padding: var(--form-padding-y) var(--form-padding-x);
	border: 1px solid var(--form-border);
	border-radius: var(--form-radius);
	outline: 0;
	background: var(--form-bg);
	box-shadow: var(--form-shadow-inset);
	transition: border-color 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}

/* Single-line fields */
form input[type="text"],
form input[type="email"],
form select {
	line-height: 1.25em;
}

/* Multi-line field */
form textarea {
	min-height: var(--form-textarea-min);
}

/* Focus state */
form input:focus,
form select:focus,
form textarea:focus {
	background: var(--form-bg-focus);
	border-color: var(--accent);
	box-shadow: var(--form-shadow-focus);
}

/* Placeholder text */
form input::placeholder,
form textarea::placeholder {
	color: var(--form-placeholder);
	opacity: 1;
}


/* -------------------------------------------------------
   FORM
------------------------------------------------------- */

form label {
	display: block;
	margin-bottom: 0.5em;
}

form input:not([type="submit"]):not([type="button"]):not([type="reset"]),
form select,
form textarea {
	display: block;
	width: 100%;
	padding: var(--form-padding-y) var(--form-padding-x);
	border: 1px solid var(--form-border);
	border-radius: var(--form-radius);
	outline: 0;
	background: var(--form-bg);
	box-shadow: var(--form-shadow-inset);
	transition: border-color 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}

form input:not([type="submit"]):not([type="button"]):not([type="reset"]),
form select {
	line-height: 1.25em;
}

form textarea {
	min-height: var(--form-textarea-min);
}

form input:focus,
form select:focus,
form textarea:focus {
	background: var(--form-bg-focus);
	border-color: var(--accent);
	box-shadow: var(--form-shadow-focus);
}

form input::placeholder,
form textarea::placeholder {
	color: var(--form-placeholder);
	opacity: 1;
}


/* -------------------------------------------------------
   ITEM
   Service card block with heading, intro text and bullets
------------------------------------------------------- */

.item {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-bottom: 40px;
	padding-bottom: var(--item-space);
	box-shadow: var(--item-shadow);
}

.item header {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: var(--item-space) 0;
	background: var(--text-light);
	font-size: var(--item-heading-size);
}

.item header h3 {
	margin-bottom: 0.5em;
	color: var(--text-dark);
	font-weight: var(--fw-bold);
	text-align: center;
}

.item header p,
.item ul li {
	font-size: var(--item-body-size);
}

.item header p {
	max-width: var(--item-text-width);
	margin: 0.6em 0.5em 1em;
	color: var(--item-text-muted);
	line-height: var(--item-body-line);
	text-align: left;
}

.item ul {
	max-width: var(--item-text-width);
	margin: var(--item-space) auto 0;
	padding-left: 1.5em;
	text-align: left;
	list-style: disc;
}

.item ul li {
	margin-bottom: 0.4em;
	padding-left: 0.2em;
	line-height: var(--item-list-line);
}

/* -------------------------------------------------------
   HEADER
   Fixed left-hand sidebar with logo, nav and contact icons
------------------------------------------------------- */

#header {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: var(--header-width);
	height: 100%;
	overflow-y: auto;
	background: var(--header-bg);
	color: var(--header-text);
	text-align: right;
	box-shadow: var(--header-shadow);
}

/* Allow top section to fill available height */
#header .top {
	flex-grow: 1;
}

/* Keep lower section pinned neatly at the bottom */
#header .bottom {
	flex-shrink: 0;
	padding: var(--header-bottom-pad-top) 0 var(--header-bottom-pad-bottom);
}

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

/* Header icon row */
#header .contact-icons {
	font-size: var(--header-icon-size);
	text-align: center;
}

#header .contact-icons a {
	color: var(--header-icon-color);
	transition: color 0.35s ease;
}

#header .contact-icons a:hover {
	color: var(--header-icon-hover);
}

/* -------------------------------------------------------
   LOGO
------------------------------------------------------- */

#logo {
	margin: var(--logo-margin);
	min-height: 48px;
	cursor: default;
	text-align: center;
}

#logo h1 {
	color: var(--text-dark);
	font-size: var(--logo-title-size);
	font-weight: var(--fw-bold);
	line-height: 1em;
}

#logo p {
	margin-top: 0.5em;
	color: var(--logo-tagline-color);
	font-size: var(--logo-tagline-size);
	line-height: var(--logo-tagline-line);
}

#logo .image {
	display: block;
	margin-bottom: var(--logo-image-gap);
}

/* -------------------------------------------------------
   NAVIGATION
------------------------------------------------------- */

#nav ul {
	margin-bottom: 0;
	padding-left: 0;
	list-style: none;
}

#nav li {
	padding-left: 0;
}

#nav a {
	display: block;
	padding: var(--nav-link-pad-y) var(--nav-link-pad-x);
	border: 0;
	outline: 0;
	background: var(--nav-link-bg);
	color: var(--nav-link-text);
	text-decoration: none;
}

#nav a span {
	position: relative;
	display: block;
	font-size: var(--nav-link-size);
}

#nav a span::before {
	position: absolute;
	left: 0;
	width: 1.25em;
	line-height: 1.75em;
	text-align: center;
	color: var(--header-icon-color);
}

#nav a.active {
	background: var(--nav-active-bg);
	color: var(--nav-active-text);
	box-shadow: var(--nav-active-shadow);
}

#nav a.active span::before {
	color: var(--nav-icon-active);
}


/* -------------------------------------------------------
   MAIN
   Main content area offset to clear the fixed sidebar
------------------------------------------------------- */

#main {
	margin-left: var(--main-offset);
}

/* Standard section block */
#main > section {
	margin: 0;
	padding: var(--section-padding-y) 0;
	overflow: hidden;
	text-align: center;
	box-shadow: var(--section-shadow);
}

/* Dark sections */
#main > section.dark {
	color: var(--section-dark-text);
}

#main > section.dark h2,
#main > section.dark h3,
#main > section.dark h4,
#main > section.dark h5,
#main > section.dark h6,
#main > section.dark a {
	color: inherit;
}

#main > section.dark strong {
	color: var(--section-dark-strong);
}

#main > section.dark a {
	border-color: inherit;
}

#main > section.dark a:hover {
	border-bottom-color: transparent;
}

/* Full-height / hero-style cover section */
#main > section.cover {
	padding: var(--section-padding-cover-y) 0;
	background-position: center;
	background-size: cover;
}



/* Section colour variants */
#main > section.one   { background: var(--section-one-bg); }
#main > section.two   { background: var(--section-two-bg); }
#main > section.three { background: var(--section-three-bg); }
#main > section.four  { background: var(--section-four-bg); }

/* -------------------------------------------------------
   HERO ENGINEERING OVERLAY - TEST VERSION
------------------------------------------------------- */

#main > section.one {
	position: relative;
	overflow: hidden;
}

#main > section.one::after {
	content: "";
	position: absolute;
	inset: 0;

	background: url("../../images/visor-overlay.png") center center / contain no-repeat;

	opacity: 0.5; /* start slightly higher so you can see it */
	filter: grayscale(100%) contrast(80%);

	pointer-events: none;
	z-index: 1;
}

#main > section.one .container {
	position: relative;
	z-index: 2;
}

/* -------------------------------------------------------
   FOOTER
   Footer content offset to clear the fixed sidebar
------------------------------------------------------- */

#footer {
	margin-left: var(--footer-offset);
	padding: var(--footer-padding-top) 0 var(--footer-padding-bottom);
	background: var(--footer-bg);
	box-shadow: var(--footer-shadow);
	font-size: var(--footer-font-size);
	text-align: center;
}

/* Copyright list */
#footer .copyright {
	margin: 0;
	cursor: default;
}

/* Inline copyright items with divider */
#footer .copyright li {
	display: inline-block;
	margin-left: var(--footer-item-gap);
	padding-left: var(--footer-item-gap);
	border-left: var(--footer-divider);
	line-height: 1em;
}

/* Remove divider and spacing from first item */
#footer .copyright li:first-child {
	margin-left: 0;
	padding-left: 0;
	border-left: 0;
}


/* -------------------------------------------------------
   RESPONSIVE DEFAULT
   Toggle hidden until mobile layout
------------------------------------------------------- */

#headerToggle {
	display: none;
}

/* -------------------------------------------------------
   WIDE
   Slightly narrower fixed sidebar and smaller base text
------------------------------------------------------- */

@media screen and (min-width: 961px) and (max-width: 1880px) {
	body,
	input,
	textarea,
	select {
		font-size: var(--fs-body-wide);
	}

	#header,
	#main,
	#footer {
		margin-left: 0;
	}

	#header {
		width: var(--header-width-wide);
	}

	#main,
	#footer {
		margin-left: var(--header-width-wide);
	}
}

/* -------------------------------------------------------
   NORMAL
   Reduce section padding on medium-large screens
------------------------------------------------------- */

@media screen and (min-width: 961px) and (max-width: 1620px) {
	#main > section {
		padding: var(--section-padding-normal) 0;
	}

	#main section.cover {
		padding: var(--section-padding-cover-normal) 0;
	}
}

/* -------------------------------------------------------
   NARROW
   Percentage sidebar with tighter spacing
------------------------------------------------------- */

@media screen and (min-width: 961px) and (max-width: 1320px) {
	body,
	input,
	textarea,
	select {
		font-size: var(--fs-body-narrow);
	}

	.container {
		padding: 0 var(--container-pad-mobile);
	}

	.contact-icons a {
		width: var(--icon-size-narrow);
	}

	.item {
		margin-bottom: var(--item-gap-narrow);
	}

	#header {
		width: var(--header-width-narrow);
	}

	#main,
	#footer {
		margin-left: var(--header-width-narrow);
	}

	#logo .image {
		margin-bottom: 0.5em;
	}

	#nav a {
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		font-size: 0.8em;
	}

	#nav a span {
		padding-right: 2.25em;
	}

	#nav a span::before {
		left: 100%;
		margin-left: -1.25em;
		line-height: 2.25em;
	}
}

/* -------------------------------------------------------
   MOBILE / NARROWER
   Off-canvas sidebar and toggle button
------------------------------------------------------- */

@media screen and (max-width: 960px) {
	html,
	body {
		overflow-x: hidden;
	}

	body,
	input,
	textarea,
	select {
		font-size: var(--fs-body-mobile);
	}

	header br {
		display: none;
	}

	.container {
		padding: 0 var(--container-pad-mobile);
	}

	.item {
		margin-bottom: var(--item-gap-mobile);
	}

	.contact-icons a {
		width: var(--icon-size-mobile);
		font-size: var(--icon-font-mobile);
	}

	/* Off-canvas sidebar */
	#header {
		position: fixed;
		top: 0;
		left: 0;
		z-index: var(--header-z);
		display: block;
		width: var(--header-width-mobile);
		height: 100%;
		overflow-y: auto;
		background: var(--header-mobile-bg);
		box-shadow: var(--header-mobile-shadow);
		transform: translateX(calc(-1 * var(--layout-shift-mobile)));
		transition: transform 0.5s ease;
		-webkit-overflow-scrolling: touch;
		backface-visibility: hidden;
	}

	#header .top {
		position: relative;
	}

	#header .bottom {
		position: relative;
		margin-top: 2em;
		padding-top: 2em;
		border-top: var(--header-mobile-divider);
		box-shadow: var(--header-mobile-divider-shadow);
	}

	#logo {
		margin: 1.5em 1.25em 1.25em;
	}

	#nav a {
		padding: 0.5em 1.25em;
	}

	/* Mobile toggle container */
	#headerToggle {
		position: fixed;
		top: 0;
		left: 0;
		z-index: var(--header-toggle-z);
		display: block;
		width: var(--toggle-width);
		height: var(--toggle-height);
		transition: transform 0.5s ease;
		backface-visibility: hidden;
	}

	/* Mobile toggle button */
	#headerToggle .toggle {
		position: absolute;
		inset: 0;
		border: 0;
		outline: 0;
		text-decoration: none;
	}

	#headerToggle .toggle::before {
		position: absolute;
		top: var(--toggle-offset);
		left: var(--toggle-offset);
		display: block;
		width: var(--toggle-width);
		height: var(--toggle-height);
		border-radius: var(--toggle-radius);
		background: var(--toggle-bg);
		color: var(--toggle-text);
		content: var(--toggle-icon);
		font-family: 'Font Awesome 5 Free';
		font-size: var(--toggle-icon-size);
		font-weight: 900;
		line-height: var(--toggle-height);
		text-align: center;
		text-decoration: none;
	}

	/* Main content shifts when menu is visible */
	#main {
		margin-left: 0;
		padding-bottom: 1px;
		transform: translateX(0);
		transition: transform 0.5s ease;
		backface-visibility: hidden;
	}

	#main > section {
		padding: var(--section-padding-normal) 0;
	}

	#main section.cover {
		padding: var(--section-padding-cover-mobile) 0;
	}

	#footer {
		margin-left: 0;
	}

	/* Visible menu state */
	body.header-visible #header,
	body.header-visible #main,
	body.header-visible #headerToggle {
		transform: translateX(var(--layout-shift-mobile));
	}

	body.header-visible #header {
		transform: translateX(0);
	}
}

/* -------------------------------------------------------
   MOBILE
   Small-screen overrides
------------------------------------------------------- */

@media screen and (max-width: 736px) {
	body,
	input,
	textarea,
	select {
		font-size: var(--fs-body-mobile-sm);
	}

	h2 {
		font-size: var(--fs-h2-mobile);
		font-weight: var(--fw-light);
		letter-spacing: 0;
	}

	.container {
		padding: 0 var(--container-pad-mobile-sm);
	}

	.contact-icons a {
		width: var(--icon-size-mobile-sm);
		font-size: 1.25em;
	}

	#main > section {
		padding: var(--section-pad-mobile-sm) 0;
	}

	#main section.cover {
		padding: var(--section-cover-pad-mobile-sm) 0;
	}

	#main section.cover header {
		padding: 0 var(--cover-header-pad-mobile-sm);
	}

	#footer .copyright li {
		display: block;
		margin-top: var(--footer-item-gap-mobile);
		padding-left: 0;
		border-left: 0;
		line-height: var(--footer-line-mobile);
	}

	#footer .copyright li:first-child {
		margin-top: 0;
	}
}

/* -------------------------------------------------------
   HERO TEXT
   Intro section title and lead text
------------------------------------------------------- */

#main > section.one h2 {
	color: var(--hero-title-color);
	font-weight: var(--hero-title-weight);
	letter-spacing: var(--hero-title-letter);
	line-height: var(--hero-title-line);
	text-shadow: var(--hero-title-shadow);
}

#main > section.one p {
	color: var(--hero-text-color);
	font-weight: var(--fw-regular);
}

/* -------------------------------------------------------
   ABOUT SECTION
   Spacing and readable text width
------------------------------------------------------- */

#about.cover {
	padding: var(--about-pad-top) 0 var(--about-pad-bottom);
}

#about ul {
	max-width: var(--about-list-width);
	margin: 1em auto 2em;
	padding-left: 1.5em;
	list-style: disc;
	text-align: left;
}

#about ul li {
	margin-bottom: 0.4em;
	line-height: 1.5em;
}

#about h3 {
	margin-top: 1.5em;
	margin-bottom: 0.5em;
	color: var(--text-light);
}

#about p {
	max-width: var(--about-text-width);
	margin-left: auto;
	margin-right: auto;
}

/* -------------------------------------------------------
   CONTACT SECTION
   Tighten contact details row spacing
------------------------------------------------------- */

#contact .contact-details-row {
	margin-top: 0;
}

#contact .contact-details-row > * {
	padding-top: 0;
}

#contact h3 {
	margin: 0 0 0.2em;
}

#contact p {
	margin: 0 0 1em;
}

/* -------------------------------------------------------
   FORM STATUS POPUP
   Success / error notification box
------------------------------------------------------- */

#form-status {
	position: fixed;
	top: var(--status-top);
	right: var(--status-right);
	z-index: var(--status-z);
	max-width: var(--status-max-width);
	padding: var(--status-pad-y) var(--status-pad-x);
	border-radius: var(--status-radius);
	box-shadow: var(--status-shadow);
	font-size: var(--status-font-size);
	line-height: var(--status-line-height);
	opacity: 0;
	transform: translateY(var(--status-shift));
	pointer-events: none;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

#form-status.show {
	opacity: 1;
	transform: translateY(0);
}

#form-status.success {
	background: var(--status-success-bg);
	color: var(--status-success-text);
	border-left: var(--status-border-width) solid var(--status-success-border);
}

#form-status.error {
	background: var(--status-error-bg);
	color: var(--status-error-text);
	border-left: var(--status-border-width) solid var(--status-error-border);
}



/* -------------------------------------------------------
   SERVICE GALLERY MODAL
   Modal layout and styling driven by variables
------------------------------------------------------- */

.service-gallery-modal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1.5em;
	z-index: var(--modal-z);
}

.service-gallery-modal.active {
	display: flex;
}

.service-gallery-backdrop {
	position: absolute;
	inset: 0;
	background: var(--modal-overlay-bg);
}

.service-gallery-content {
	position: relative;
	z-index: 1;
	width: min(980px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	padding: var(--modal-pad);
	border-radius: var(--modal-radius);
	background: var(--modal-bg);
	color: var(--modal-text);
	box-shadow: var(--modal-shadow);
}

.service-gallery-close {
	position: absolute;
	top: 0.5em;
	right: 0.6em;
	border: 0;
	background: transparent;
	color: var(--modal-text);
	font-size: var(--modal-close-size);
	line-height: 1;
	cursor: pointer;
}

.service-gallery-body {
	display: grid;
	grid-template-columns: minmax(280px, 1.2fr) minmax(220px, 0.8fr);
	gap: var(--modal-gap);
	align-items: start;
}

.service-gallery-image-wrap img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--form-radius);
}

.service-gallery-text h4 {
	margin-bottom: 0.5em;
}

.service-gallery-text p {
	margin-bottom: 1em;
}

.service-gallery-counter {
	color: var(--modal-muted);
	font-weight: var(--fw-bold);
}

.service-gallery-controls {
	display: flex;
	gap: 1em;
	justify-content: flex-end;
	margin-top: 1.5em;
}

/* Privacy note under contact form intro */
.privacy-note {
	font-size: var(--privacy-note-size);
}

@media screen and (max-width: 736px) {
	.service-gallery-content {
		padding: var(--modal-pad-mobile);
	}

	.service-gallery-body {
		grid-template-columns: 1fr;
	}
}