:root {
	--background:#fff;
	/*--colour1:#006d83;
	--colour2:#eef3f4;*/
	--colour3:#005162;
	/*--accent:#f7941d;*/
	--accent2:#c96f00;
	--body_text:#1b3135;
	--nav_width:300px;
	--border_radius:1.25rem;
	--global_inline_padding:clamp(1rem,5vw,3rem);
	--global_block_padding:clamp(4rem,5vw,5rem);
	--global_padding_inner:clamp(1rem,5vw,3rem);
	--ease_out:cubic-bezier(0, 0.5, 0.41, 1);
}

html {
	scroll-behavior: smooth;
	scrollbar-gutter:stable;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

* {
    padding:0;
    margin:0;
    box-sizing: border-box;
	font-family:inherit;
	color:inherit;
}

img {
	vertical-align:middle;
	max-width:100%;
	height:auto;
	background-repeat: no-repeat;
	background-size:cover;
	font-style: italic;
	shape-margin:1rem;
}

.container {
	container-type: inline-size;
}

.skip-nav-link {
	position:absolute;
	left:1rem;
	top:0;
	background-color:#000;
	color:var(--body_text);
	padding:0.5rem 1.5rem;
	border-radius: 0 0 0.25rem 0.25rem;
	z-index:100;
	transform:translateY(-120%);
	transition:transform 0.325s ease-out;
}

	.skip-nav-link:focus {
		transform:translateY(0);
	}

#burger {
  display:none;
}

body {
	background-color:var(--background);
	/* font-family: "Source Sans 3", sans-serif; */
	font-family: "Roboto", sans-serif;
	color:var(--body_text);
	overflow-x:clip;
	transition:padding-top 0.25s var(--ease_out);
}

::selection {
	background-color:var(--colour1);
	color:#fff;
}

.wrap {
  position:relative;
  padding-inline:1rem;
  width:min(100%);
  max-width:100%;
  margin:0 auto;
  clear:both;
}

header {
    width:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:10;
	/* background-color:#fff; */
	background-color:var(--colour1);
	padding-block:1.5rem;
	transition:padding-block 0.25s ease-out,box-shadow 0.25s ease-out;
	box-shadow:0 10px 15px #0000;
	margin-bottom:1rem;

	& .wrap {
		display:grid;
		gap:3rem;
		grid-template-columns: 160px max-content 1fr;
		justify-content: space-between;
		align-items:center;
		transition:grid-template-columns 0.25s ease-out;

		& #logo img {
			object-fit:contain;
			width:100%;
			height:100%;
			max-height:140px;
		}
	}

	&.smaller {
		padding-block:0.75rem;
		box-shadow:0 10px 15px #00000007;

		& .wrap {
			grid-template-columns: 110px max-content 1fr;

			& #logo img {
				object-fit:contain;
				width:100%;
				height:100%;
				max-height:90px;
			}
		}

	}

	& #logo {
		user-select: none;
	}

	& .social-icons {
		display:flex;
		gap:1rem;

		& a {
			float:left;

			& img {
				height:1rem;
				filter:brightness(10);
			}
		}
	}

	& ul {
		float:right;
		list-style:none;

		& li {
			float:left;
			position:relative;

			& a {
				float:left;
				position:Relative;
				text-decoration: none;
				padding:1.25rem 1.25rem;
				font-size:0.9rem;
				/* color:var(--colour1); */
				color:#fff;
				font-weight:600;
				letter-spacing: 0.25px;
				width:100%;

				&:hover,
				&:not(:has(img)).active {
					color:var(--accent);
				}

				&:has(img) {
					display:grid;
					grid-template-columns: 1rem max-content;
					gap:0.5rem;
					align-items: center;
					background-color:var(--accent);
					color:var(--colour1);
					padding-inline:2.5rem;
					margin-left:1.25rem;

					& .container {
						display:grid;
						align-items:center;
					}

					&:hover {
						color:Var(--colour1);
						background-color:hsl(from var(--accent) h s 110% / 1); /* includes opacity at end */
					}
				}

				&:has(~ .subnav) {
					padding-right:2rem;

					&::after{
						content:url('../img/down-white.svg');
						position:absolute;
						width:0.5em;
						margin-left:0.5rem;
					}
				}
			}

			& .subnav {
				position:absolute;
				top:100%;
				left:0;
				background-color:var(--colour2);
				opacity:0;
				transition:opacity 0.25s ease;
				pointer-events: none;
				border-radius:0 0 var(--border_radius) var(--border_radius);
				overflow:hidden;

				& li {
					width:100%;
					border-bottom:1px solid var(--background);

					& a {
						width:max-content;
						font-size:0.9rem;
						color:#fff;

						&:hover {
							color:var(--accent);
						}
					}

					&:last-of-type {
						border-bottom:none;
					}
				}
			}

			&:hover .subnav {
				opacity:1;
				pointer-events: all;
			}
		}
	}

	& .right {
		display:grid;
		grid-template-columns: max-content max-content;
		gap:1rem;
		align-items:center;
		width:fit-content;
		justify-self:end;

		& .landline {
			display:grid;
			grid-template-columns: 1rem 1fr;
			gap:1rem;
			font-weight:600;
			/* color:var(--accent); */
			clear:none;
			float:left;
		}
	}
}

.corner {
	position:absolute;
	width:calc(1.5 * var(--border_radius));
	height:calc(1.5 * var(--border_radius));
	aspect-ratio: 1;
}

svg.corner path {
  fill: var(--colour1);
  vector-effect: non-scaling-stroke;
}

#c1 {
	top:100%;
	left:0;
}
#c2 {
	top:100%;
	right:0;
	scale:-1 1;
}
#c3 {
	bottom:100%;
	left:0;
	scale:1 -1;
}
#c4 {
	bottom:100%;
	right:0;
	scale:-1 -1;
}

.fcw {
  float:left;
  clear:left;
  width:100%;
}

h1,h2,h3,h4,h5,h6 {
	margin-bottom:0.5lh;
	margin-top:1.5lh;
	line-height:1;
	text-wrap:balance;
	font-weight:600;
	letter-spacing: -0.05em;
	color:var(--colour1);
}

	:is(h1,h2,h3,h4,h5,h6):first-child{
		margin-top:0;
	}

h1 {
	font-size:3.5rem;
}

h3 {
	font-size:1.6rem;
}

main {
	& p,
	& li {
		font-size:1.1rem;
		line-height:1.5;
		margin-bottom:1rem;
		max-width:70ch;
		clear:left;

		& a {
			color:var(--accent);
		}
	}

	& ol,
	& ul {
		margin:2rem 0 2rem 1rem;

		& a {
			color:var(--accent);
		}
	}

	& ul {
		list-style-image: url('../img/bullet.svg');
		padding-left:1.25rem;

		& li {
			padding-left:0;
		}
		& li::marker {
			color:var(--accent);
			font-size:3rem;
			line-height:0;
		}
	}

	& li {
		padding-left:1rem;
		line-height:1.4;
		margin-bottom:0.75rem;
	}
}

.hero {
	position:relative;
	display:grid;
	align-items:end;
	color:#fff;
	border-radius:var(--border_radius);
	overflow:hidden;
	min-height:calc(65vh - 130px);

	& .bg {
		position: absolute;
		inset:0;
		width:70%;
		height:100%;
		background-color:var(--accent2);
		mix-blend-mode: multiply;
		border-radius:var(--border_radius);
		z-index:1;
		transition:width 0.75s var(--ease_out);

		@starting-style {
			width:0%;
		}
	}

	& h1,
	& h2 {
		color:#fff;
		margin-top:0;
		/* text-shadow: 0 0 15px var(--accent),0 0 15px var(--accent); */
	}

	& h1:has(+*) {
		margin-bottom:1rem;
	}

	& .text {
		position:relative;
		width:70%;
		z-index:2;
		padding:var(--global_padding_inner);
		opacity:1;
		transform:translateY(0rem);
		transition:opacity 1s ease, transform 1s var(--ease_out);
		transition-delay: 0.75s;

		@starting-style{
			opacity:0;
			transform:translateY(1rem);
		}

	}

	& > img,
	& .bgimg > img {
		position:absolute;
		inset:0;
		width:100%;
		height:100%;
		object-fit:cover;
		object-position: center;
		scale:1.05;
		transition:scale 6s ease-out;
		
		@starting-style {
			scale:1;
		}
	}

	& p {
		font-size: 1.2rem;
	}

	& p:last-of-type {
		margin-bottom:0;
	}
}

.rounded-btn,
.blue-btn,
.lblue-btn,
.white-btn,
.orange-btn {
	display:inline-block;
	text-decoration: none;
	letter-spacing: 0.25px;
	color:#fff;
	border-radius:100rem;
	padding:0.75rem 2.5rem;
	background-color:var(--colour1);
	font-size:1rem;
	font-weight:600;
	margin-block:0.5rem;
	transition:background-color 0.25s ease;
	text-align:center;

	&:hover {
		background-color: hsl(from var(--colour1) h s 45% / 1); /* includes opacity at end */
	}

}

.rounded-btns {
	grid-column:1/-1;
	align-items:center;

	&.centered {
		display:flex;
		gap:1rem;
		flex-wrap: wrap;
		justify-content:center;
	}

	& p {
		font-size:1.8rem;
		font-weight:600;
		letter-spacing: -0.05em;
		color:var(--colour1);
		margin:0;
	}
}

.blue-btn {
	background-color:var(--colour2);
}

.white-btn {
	background-color:#fff;
	color:var(--body_text);
}

.lblue-btn {
	background-color:var(--colour2);
	/* color:var(--body_text); */
}

.orange-btn {
	background-color:var(--accent);
	/* color:var(--body_text); */
	&:hover {
		background-color: hsl(from var(--accent) h s 65% / 1); /* includes opacity at end */
	}
}

.large-text {
	font-size:clamp(1.5rem,5vw,2rem);
	font-weight:300;
	line-height:1.2;

	& strong {
		font-weight:600;
	}
}

table {
	max-width:min(1000px,100%);
	margin-block:2rem;
}

table:first-child {
	margin-top:0;
}

.no-borders,
table:has(.no-borders),
table:has(.no-borders) td {
	border:none;
}

.no-borders,
table:has(.no-borders) td {
	padding:0.5rem;
}

th {
	& a,
	& p {
		margin-inline:auto;
	}
}

.align_left {float:left;}
.align_right {float:right;}
.align_center {text-align: center;}
img.align_left {margin:0.5rem 1rem 1rem 0;}
img.align_right {margin:0.5rem 0 1rem 1rem;}
img.align_center {
  display:block;
  margin-inline:auto;
}

input,textarea,label,hr{
	clear:left;
	width:100%;
	margin-bottom:1rem;
}

input,textarea {
	background-color:#fff;
	border:1px solid #aaa;
	padding:0.5rem;
	font-size:1rem;
}

button {
	cursor:pointer;
	background-color:var(--accent);
}

	button:hover {
		background-color: hsl(from var(--accent) h s 110% / 1); /* includes opacity at end */
	}

.errortext {
	color:red;
	font-weight:bold;
}

.table-container {
    overflow-x: auto;
}

table.packages {
	border:none;
	margin-inline:auto;
	
	& :is(th,td){
		padding:1.5rem 1rem;
		border:none;
		outline:none;
	}

	& th {
		border:none;

		& h3 {
			font-size:1.6rem;
		}

		& p {
			font-weight:normal;
		}
	}

	& tr:nth-of-type(2n){
		& td {
			background-color:var(--colour2);
		}
	}

	& td:first-of-type {
		border-radius:var(--border_radius) 0 0 var(--border_radius);
		color:var(--colour1);
		font-weight: 600;
	}

	& td:last-of-type {
		border-radius:0 var(--border_radius) var(--border_radius) 0;
	}
}

.footer2 {
	position:relative;
	display:grid;
	align-items: start;
	grid-template-columns: repeat(4,1fr);
	gap:var(--global_block_padding);
	padding:var(--global_block_padding) var(--global_inline_padding);
	clear:both;
	width:100%;
	background-color:var(--colour1);
	color:#fff;

	& :is(h2,h3,h4,h5,h6) {
		font-size:2rem;
		color:var(--accent);
	}

	& .links {

		display:grid;
		grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
		gap:1rem;

		& > h3 {
			grid-column: 1/-1;
			margin:0;
		}

		& :is(a,p) {
			display:block;
			width:100%;
			clear:left;
			text-decoration: none;
			font-size:1.1rem;
			margin-bottom:0.75rem;
			line-height:1;

		}

		& a:hover {
			color:var(--accent);
		}
	}

	& .contact-info {
		& p {
			float:left;
			clear:left;
			line-height:1.5;
			margin-bottom:1rem;
			max-width:70ch;

			&.copyright {
				font-size:0.8rem;
			}
		}
	}

	& .otherlinks {
		& a {
			display:block;
			width:150px;
			max-width:100%;
			margin-bottom:0.25rem;

			& img {
				display:block;
				border-radius:0.25rem;
			}
		}
	}
}

.postfoot {
	padding:1rem var(--global_inline_padding);
	background-color:var(--colour2);
	display:flex;
	gap:3rem;
	justify-content: space-between;

	& .social {
		float:left;
		margin-right:2rem;
		& a {
			display:inline-block;
			height:1.5rem;
			margin-right:0.25rem;
	
			& img {
				height:100%;
			}
		}
	}

	& .copyright {
		color:#fff;
		opacity:0.4;
		margin:0;
		font-size:0.9rem;

		& a {
			color:#fff;
		}
	}
	
}

.cookies {
	position:fixed;
	right:1rem;
	bottom:1rem;
	width:min(350px,100%);
	padding:1.5rem;
	border-radius: var(--border_radius);
	background-color:var(--colour2);
	text-align: center;
	z-index:100;
	box-shadow:0 10px 15px #0003;

	& p {
		font-size:0.9rem;
	}

	& a {

	}
}

.anim-delay {
    animation-delay: calc(var(--delay) * 0.1s);
}

.slide_from_bottom,
.slide_from_top,
.slide_from_left,
.slide_from_right {
	opacity:0;
	animation-duration: 1s;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
	animation-timing-function: var(--ease_out);
}

.slide_from_top.run {
	animation-name: slide_from_top;
}

.slide_from_bottom.run {
	animation-name: slide_from_bottom;
}

.slide_from_left.run {
	animation-name: slide_from_left;
}

.slide_from_right.run {
	animation-name: slide_from_right;
}

@keyframes slide_from_bottom {
	0% {opacity: 0; transform: translateY(100px);}
	100%{opacity:1; transform: translateY(0);}
}
@keyframes slide_from_top {
	0% {opacity: 0; transform: translateY(-100px);}
	100%{opacity:1; transform: translateY(0);}
}
@keyframes slide_from_left {
	0% {opacity: 0; transform: translateX(-100px);}
	100%{opacity:1; transform: translateX(0);}
}
@keyframes slide_from_right {
	0% {opacity: 0; transform: translateX(100px);}
	100%{opacity:1; transform: translateX(0);}
}

#wa {
	display:none;
}

#edit-page,
.edit-page {
	position:absolute;
	top:0;
	right:1rem;
	background-color:#fff;
	color:var(--body_text);
	padding:0.25rem;
	font-size:0.8rem;
	text-decoration: none;
	border-radius:0 0 0.25rem 0.25rem;
	z-index:101;

	&:hover {
		background-color:#50e5f9;
	}
}

.spin {
	animation: spin 3s linear infinite;
}

@keyframes spin {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

@media screen and (min-width:2000px){
	header {
		& ul {
			& li {
				& a,
				& .subnav li a {
					font-size:1vw;
					padding: 1.25vw 1.25vw;
				}
			}
		}
		 & .right {
    		& .landline {
				grid-template-columns: 1.3vw 1fr;
			}
		}
	}

	main .footer2 {
		& :is(h2, h3, h4, h5, h6) {
			font-size: 2vw;
		}

		& .links {
			gap:1vw;
			grid-template-columns: 1fr 1fr;
		}
		& p,
		& .links a {
			font-size:1.1vw;
		}
	}

	table.packages {
		max-width:min(2000px,100%);
	}
}

@media screen and (max-width:1300px) {

	header,
	header.smaller {
		padding-block:1rem;

		& .wrap {
			padding-inline:var(--global_inline_padding);
			padding-block:0.25rem;
			grid-template-columns: 110px max-content;
			justify-content: space-between;
		}

		& .right {
			grid-template-columns: max-content max-content 32px;
		}

	}

	nav :is(ul,li,a) {
		float:left;
		clear:left;
		width:100%;
		text-align: left;
		padding-inline:0;
	}

	nav {
		/* position:fixed;
		display:grid;
		align-items: center;
		width:var(--nav_width);
		max-width:calc(100vw - (var(--global_inline_padding) * 2) - 32px);
		left:calc(-1 * var(--nav_width));
		height:100vh;
		height:100dvh;
		top:0;
		background-color:var(--colour1);
		color:#fff;
		border-right:1px solid var(--background);
		z-index:5;
		transition:left 0.25s ease-out;
		overflow-y:auto;
		padding:var(--global_padding_inner); */

		position:absolute;
		right:var(--global_inline_padding);
		top:100%;
		order:3;
		transition:height 0.5s;
		width:min(200px,100vw);
		overflow:hidden;
		height:0;

		& ul li {

			border:none;

			& a {
				text-align: right;
				padding-block:0.75rem;
				color:#fff;
				border-bottom:1px solid #fff1;
				background-color:var(--colour1);

				&:has(~ .subnav) {
					padding-inline:1.25rem;
					&::after{
						display:none;
					}
				}
			}

			&:last-of-type {
				& a {
					border-bottom-left-radius: 1rem;
					border-bottom-right-radius: 1rem;
				}
			}

			& .subnav {
				display:none;
				position:static;
				opacity:1;
				pointer-events: all;
				background-color:transparent;

				& li {
					border:none;
				}
			}
		}
	}

	header:has(#burger input:checked) nav {
		height:auto;
	}

	#burger {
		position:relative;
		display:block;
		float:right;
		width:32px;
		z-index: 6;
		justify-self:end;
	}

		#burger input {
			position:absolute;
			width:100%;
			height:100%;
			cursor:pointer;
			opacity:0;
			margin:0;
		}

	footer.footer1{
		grid-template-columns: 1fr;
		text-align: center;

		& .flogo {
			order:-1;
		}

		& .social-icons {
			justify-content: center;
			gap:2rem;
		}

		& .copyright {
			text-align: center;
		}
	}

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

@media screen and (max-width:800px){
	footer .text {
		grid-template-columns: 100px 1fr;

		& .flogo {
			grid-column:span 1;

			& a {
				width:100%;
			}
		}

		& .links {
			grid-column:2/-1;
			text-align: left;
		}
	}
}

@media screen and (max-width:700px){
	#wa {
		display:block;
		position:fixed;
		bottom:1rem;
		right:1rem;
		z-index:99;
		width:3rem;
		height:3rem;
	}

	.rounded-btn,
	.blue-btn,
	.lblue-btn,
	.white-btn,
	.orange-btn {
		font-size:0.8rem;
	}

	footer.footer1 {
        & .text,
        & .bg {
            width:90%;
        }
    }

	footer.footer1 .text {
		margin-left:10%;
	}

	footer.footer1 {
		& .email,
		& .phone {
			font-size:1.6rem;
		}
	}

	.footer2 {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width:600px){
	:is(header,header.smaller) .wrap {
		grid-template-columns: 80px max-content;
		gap:1rem;
	}

	:is(header, header.smaller) .right {
		grid-template-columns: max-content 32px;
		justify-content: end;
		gap:1rem;

		& .get-quote {
			display:none;
		}
	}
}



@media screen and (max-width:500px) {
	.quicklinks a {
		display:block;
		clear:both;
		padding:0.5rem;
	}

	.quick p.head {
		margin-bottom:1.5rem;
	}

	footer.footer1 {

		& .text {
			grid-template-columns: 1fr;

			& .flogo a {
				width:min(100px,100%);
			}

			& .links {
				grid-column: 1/-1;
			}
		}
		& .email,
		& .phone {
			width:100%;
			text-align: center;
			font-size:1.3rem;
			word-break: break-word;
		}

		& .social {
			width:100%;
			justify-content: center;
		}
	}

	.footer2 {
		& .email,
		& .phone {
			width:100%;
			text-align: center;
			font-size:1.3rem;
			word-break: break-word;
		}
	}

}

@media screen and (max-width:400px) {
	:is(header, header.smaller) .right {

		& .landline {
			padding-inline:1.5rem;
			grid-template-columns: 1fr;
			/* & span {
				display:none;
			}*/
			& img {
				display:none;
				height:1rem;
			}
		}
	}
}