/* ============================================
    TOKENS
   ============================================ */
:root {
  /* Main Colours */
  --red:#ED241A;
  --cream:#FCF5ED;
  --black:#000000;
  --white:#FFFFFF;

  /* Optional sub-colours */
  --cyan: #118590;
  --green: #96dc18;
  --salmon: #f15a53;
  --grey: #3e3e3e;
  --pale-red: #ff7973;
  --pale-cyan: #2e8e97;
  --pale-green: #c1f16c;
  --pale-grey: #888;
  --light-red: #f85149;
  --light-cyan: #2e8e97;
  --light-green: #ace744;
  --light-salmon: #f6908c;
  --light-grey: #555;
  --dark-red: #bd1209;
  --dark-cyan: #076a73;
  --dark-green: #74af08;
  --dark-cream:#f1e8dc;
  --dark-grey: #1f1f1f;
  --deep-red: #950700;
  --deep-cyan: #01535b;
  --deep-green: #598a00;
  --deep-cream:#e8ddd0;

  /* Theme Colours */
  --background:var(--dark-grey);
  --alt-background-colour:var(--grey);
  --page-header-colour:var(--cream);
  --alt-colour:var(--cream);
  --accent-colour:var(--red);
  --contrast-colour:var(--deep-cream);
  --contrast-alt-colour:var(--dark-cream);
  --rule-colour:var(--cream);
  /* Colours for service categories */
  --agricultural: var(--dark-green);
  --industrial: var(--dark-cyan);

  --margin:18vw;            /* page margin: set to 0 on mobile */
  --gap:24px;
  /* Fonts */
  --font: "Didact Gothic", Helvetica, Verdana, Arial, sans-serif;
  --emphasis-font: "Alata", "Antonio", "JetBrains Mono", "SF Mono", Verdana, monospace;
  /* Some of these fonts come from the google API, and you have to change the FontInclusions link within layout.js 
  to explicitly include those in order for them to be displayed (or else do manual inclusions of your own).*/
}

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
  border-radius:0
}

html {
  scroll-behavior:smooth
}

body {
  font-family:var(--font);
  background:var(--background);
  color:var(--alt-colour);
  line-height:1.6;
  margin-bottom:8px;
}

img,video {
  display:block;
  max-width:100%
}

iframe {
  max-width:100%;
}

a {
  color:inherit
}
a:hover, a:focus-visible {
  outline:3px solid var(--accent-colour);
  outline-offset:2px
}

.wrap {
  margin:0 var(--margin)
}

h1,h2,h3 {
  line-height:1.1;
  font-family: var(--emphasis-font);
  letter-spacing:-.02em;
  text-transform:uppercase;
}
h1 {
  font-weight:bold;
  font-size:clamp(2.4rem,6vw,4.5rem);
}
h2 {
  font-size:clamp(1.6rem,3.5vw,2.4rem);
}

p {
  max-width:68ch
}

.btn {
  display:inline-block;
  background:var(--accent-colour);
  color:var(--alt-background-colour);
  padding:.8em 1.6em;
  text-decoration:none;
  font-weight:700;
  border:2px solid var(--accent-colour)
}
.btn:hover {
  background:var(--alt-colour);
  border-color:var(--alt-colour)
}

section.block {
  padding:64px 0
}

hr {
  border: 0;
  height: 1px;
  background-color: var(--rule-colour);

}

/* ============================================
    HEADER & NAVIGATION (MASTHEAD)
   ============================================ */
.site-top {
  background:var(--alt-background-colour);
  border-bottom:3px solid var(--alt-colour)
}

.site-top a {
  text-decoration:none;
  outline:none
}

.brand {
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px 0;
  text-decoration:none
}

.logo {
  width:56px;
  height:56px;
  background:var(--accent-colour);
  color:var(--alt-background-colour);
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:1.4rem;
  flex:none
}

.brand-name {
  font-size:1.6rem;
  font-weight:800;
  letter-spacing:-.02em
}

.nav {
  border-top:1px solid var(--alt-colour)
}

.nav-toggle  {
  display:none;
  background:none;
  border:0;
  font:inherit;
  font-weight:700;
  padding:14px 0;
  cursor:pointer
}

.nav > ul {
  list-style:none;
	display:flex;
	gap:32px
}

.nav li {
  position:relative
}

.nav a,.nav .dd-btn {
  display:block;
	padding:14px 0;
	text-decoration:none;
	font-weight:700;
	background:none;
	border:0;
	font:inherit;
	font-weight:700;
	cursor:pointer;
	border-bottom:4px solid transparent;
  color:var(--page-header-colour);
}

.nav a:hover,.nav .dd-btn:hover,.nav a[aria-current] {
  border-bottom-color:var(--accent-colour)
}

.dropdown {
  display:none;
  list-style:none;
	position:absolute;
	top:100%;
	left:0;
	min-width:240px;
	background:var(--alt-background-colour);
	border:2px solid var(--alt-colour);
	z-index:50;
	flex-direction:column;
	gap:0!important
}

.has-dd:hover .dropdown,.has-dd.open .dropdown {
  color:var(--page-header-colour);
  display:flex
}

.dropdown a {
  padding:12px 16px;
	border-bottom:1px solid var(--alt-colour);
}

.dropdown li:last-child a {
  border-bottom:0
}

.dropdown a:hover {
  background:var(--accent-colour);
	color:var(--alt-background-colour)
}


/* ============================================
    CAROUSEL
   ============================================ */
.carousel {
  position:relative;
	margin-top:var(--gap);
	overflow:hidden;
	background:var(--alt-colour)
}

.slides {
  display:flex;
	transition:transform .5s ease
}

.slide {
  min-width:100%;
	aspect-ratio:16/7;
	display:grid;
	place-items:center;
	color:var(--alt-background-colour);
  object-fit:contain;
  overflow:hidden;
}

.slide img {
  width:100%;
	object-fit:cover;
}
.slide video {
  width:100%;
	object-fit:cover;
}

.ph {
  background:repeating-linear-gradient(45deg,var(--contrast-colour),var(--contrast-colour) 14px,var(--contrast-alt-colour) 14px,var(--contrast-alt-colour) 28px);
	color:var(--alt-colour);
	width:100%;
	height:100%;
	display:grid;
	place-items:center;
	font-weight:700
}

.c-btn {
  position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:48px;
	height:48px;
	background:var(--alt-background-colour);
	border:2px solid var(--alt-colour);
  color:var(--alt-colour);
	font-size:1.4rem;
	cursor:pointer
}

.c-btn:hover {
  background:var(--accent-colour);
	color:var(--alt-background-colour)
}

.c-prev {
  left:0
}
.c-next {
  right:0
}

.dots {
  position:absolute;
	bottom:12px;
	left:50%;
	transform:translateX(-50%);
	display:flex;
	gap:8px
}

.dots button {
  width:14px;
	height:14px;
	border:2px solid var(--alt-background-colour);
	background:transparent;
	cursor:pointer
}

.dots button[aria-current=true] {
  background:var(--accent-colour);
	border-color:var(--accent-colour)
}


/* ============================================
    INTRO
   ============================================ */
.intro {
  padding:72px 0;
	display:grid;
	gap:48px;
	align-items:center;
  text-align:center;
}

.intro h1 {
  color:var(--accent-colour)
}

.intro p {
  margin-left:72px;
  margin-right:72px;
  font-size:1.5rem;
  font-weight:bold;
  font-style: italic;
}

.sub-content {
  padding:72px 0;
	display:grid;
	gap:24px;
	align-items:center;
  text-align:center;
}

.sub-content p {
  max-width:68ch;
  margin-inline:auto;
  font-size:1rem;
  font-weight:bold;
}


/* ============================================
    PARALLAX SECTION
   ============================================ */
.parallax {
  position:relative;
	clip-path:inset(0);
	background:var(--alt-colour);
	padding:64px 0;
  overflow:hidden;
}

.parallax video {
  position:fixed;
	inset:0;
	width:100vw;
	height:100vh;
	object-fit:cover;
	z-index:0;
  box-shadow:
    inset 0px 10px 0 0 var(--accent-colour),
    inset 0px -4px 0 0 var(--accent-colour);
}

.parallax img {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0
}

.parallax .wrap {
  position:relative;
	z-index:1;
	display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--gap);
}

.parallax .wrap > * {
  min-width:0;
}

.parallax iframe {
  width:100%;
  max-width:640px;
}

.parallax-buffer {
  height:400px;
}

.parallax-header {
  display:grid;
  place-items:center;
  width:100%;
  margin-inline: auto;
  background:var(--alt-background-colour);
  color:var(--alt-colour);
  text-align:center;
  font-size:clamp(1.6rem,3vw,2.4rem);
  padding:36px;
  box-shadow:0px 0px 12px 10px color-mix(var(--alt-colour) 5%, transparent);
}

/* ============================================
    SERVICES
   ============================================ */

.service {
  background:var(--alt-background-colour);
  box-shadow:0px 0px 12px 10px color-mix(var(--alt-colour) 5%, transparent);
	padding:48px;
	min-height:300px;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	align-items:flex-start;
	gap:24px;
  margin-top:96px;
  margin-bottom:24px;
}

.service h2 {
  color:var(--accent-colour);
}
.service-headspan {
  /*Remember to include style="background-color:#custom hex code here;" or style="background-color:var(--your pre-defined colour here)" in the HTML for this to display the colour you want*/
  display:inline-block;
  width:100%;
  padding:10px;
}
.service-headspan h2{
  color:var(--page-header-colour);
}

.service-alt-headspan { /*For overriding the service-headspan to use red heading text instead*/
  display:inline-block;
  width:100%;
  padding:10px;
}
.service-alt-headspan h2{
  color:var(--red);
}

.service-row {
  display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:var(--gap)
}

.service-row .service {
  min-height:260px;
	padding:32px
}

.service-row .service h3 {
  font-size:1.5rem;
  color:var(--accent-colour)
}

/* ============================================
    ABOUT & CONTACT STRIP
   ============================================ */
.about-home {
  display:grid;
	grid-template-columns:2fr 1fr;
	gap:48px
}

.contact-card {
  border:3px solid var(--alt-colour);
	padding:32px;
	background:var(--alt-background-colour)
}

.contact-card dt {
  font-weight:700;
	color:var(--accent-colour);
	margin-top:12px
}

.emphasis-quote {
  border:3px solid var(--alt-colour);
  margin-top:16px;
  margin-bottom:16px;
	padding:32px;
	background:var(--alt-background-colour);
  font-size:1.5rem;
  font-style:italic;
  font-weight: bold;
}


/* ============================================
    INNER PAGES
   ============================================ */
.page-hero {
  background:var(--accent-colour);
	color:var(--page-header-colour);
	padding:64px 0;
	margin-top:var(--gap)
}

.service-page-hero {
  /*Remember to include style="background-color:#custom hex code here;" or style="background-color:var(--your pre-defined colour here)" in the HTML for this to display the colour you want*/
  color:var(--page-header-colour);
	padding:64px 0;
	margin-top:var(--gap)
}

.page-hero .wrap {
  display:block
}

.content-block {
  margin-top:16px;
  margin-bottom:16px;
  gap:16px;
  display:block;
}
.content-block p {
  margin-bottom:16px;
}

.content {
  display:grid;
	grid-template-columns:2fr 1fr;
	gap:48px;
	padding:64px 0
}

.content p+p,.content h2 {
  margin-top:1em
}

.vertical-gallery {
  display:grid;
  grid-template-columns:1fr;
  align-content:start;
	gap:var(--gap)
}

.vertical-gallery .ph {
  aspect-ratio:4/3;
  height:auto;
  overflow:hidden;
}

.vertical-gallery .ph img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.horizontal-gallery {
  margin-top:16px;
  margin-bottom:16px;
  display:grid;
	grid-template-columns:repeat(3,1fr);
  align-items:start;
	gap:var(--gap)
}

.horizontal-gallery .ph {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  height:auto;
  background:none;
}

.horizontal-gallery .ph img {
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
}

.gallery-caption {
  margin:0;
  font-size:.95rem;
  font-weight:700;
  text-align:center;
}

form {
  display:grid;
	gap:16px;
	max-width:560px
}

label {
  font-weight:700;
	display:grid;
	gap:6px
}

input,textarea,select {
  font:inherit;
	padding:12px;
	border:2px solid var(--alt-colour);
	background:var(--background-colour);
}

.jobs-block {
  margin-top:32px;
  margin-bottom:32px;
  gap: 24px;
  display:flex;
  flex-direction:column;
}

.job {
  border:3px solid var(--alt-colour);
	padding:24px;
	display:flex;
	justify-content:space-between;
	gap:16px;
	flex-wrap:wrap;
	align-items:center
}

.upcoming-service-block {
  margin-top:32px;
  margin-bottom:32px;
  gap: 24px;
  display:flex;
  flex-direction:column;
}

.upcoming-service {
  border:3px solid var(--alt-colour);
	padding:24px;
	display:flex;
	justify-content:space-between;
	gap:16px;
	flex-wrap:wrap;
	align-items:center
}

.upcoming-service-close {
  background:var(--alt-background-colour);
	padding:24px;
	display:flex;
	justify-content:space-between;
	gap:16px;
	flex-wrap:wrap;
	align-items:center
}

/* ============================================
    FOOTER
   ============================================ */
.site-footer {
  background:var(--alt-colour);
	color:var(--alt-background-colour);
	margin-top:0;
	padding:48px 0 24px
}

.foot-grid {
  display:grid;
	grid-template-columns:1.5fr 1fr 1fr;
	gap:48px
}

.site-footer .brand {
  padding:0 0 16px
}

.site-footer a {
  text-decoration:none
}
.site-footer a:hover {
  color:var(--accent-colour);
  outline: none;
}

.foot-grid ul {
  list-style:none
}

.to-top {
  display:inline-block;
	margin-top:16px;
	border:2px solid var(--alt-background-colour);
	padding:.5em 1em;
	font-weight:700
}

.to-top:hover {
  background:var(--accent-colour);
	border-color:var(--accent-colour);
	color:var(--alt-background-colour)!important;
  outline:3px solid var(--alt-background-colour)!important;
  outline-offset:2px!important;
}

.foot-base {
  margin-top:40px;
	padding-top:20px;
	border-top:1px solid var(--accent-colour);
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:12px;
	font-size:.9rem
}

/* ============================================
    SOCIALS
   ============================================ */
.socials {
  gap:20px;
  margin-bottom: 20px;
}

.socials a {
  margin-top: 16px;
  background:var(--accent-colour);
}


/* ============================================
    MOBILE
   ============================================ */
@media(max-width:800px) {
  :root {
    --margin:0px
  }

  .wrap {
    padding:0 16px
  }

  .carousel {
    margin-top:0
  }

  .intro,.about-home,.content,.foot-grid,.service-row,.gallery,.sub-content {
    grid-template-columns:1fr;
  }

  .about-home.block {
    padding-inline:20px;
  }

  .about-home .contact-card {
    padding:20px;
  }

  .intro p {
    margin-inline:0;
    font-size:1.125rem;
  }

  .sub-content p {
    margin-inline:0;
    font-size:1rem;
  }

  .service {
    padding:24px;
	  min-height:220px;
  }

  .nav-toggle {
    display:block
  }

  .nav > ul {
    display:none;
    flex-direction:column;
    gap:0
  }

  .nav.open > ul {
    display:flex
  }

  .dropdown {
    position:static;
	border:0;
	border-left:4px solid var(--accent-colour)
  }

  .slide {
    aspect-ratio:4/3
  }
}

@media(prefers-reduced-motion:reduce) {
  .slides{
    transition:none
  }
  html {
    scroll-behavior:auto
  }

}