@keyframes open-down
{
	0%
	{
		transform-origin: top;
		transform: rotateX(-90deg);
	}
	100%
	{
		transform-origin: top;
		transform: rotateX(0deg);
	}
}
@keyframes open-up
{
	0%
	{
		transform-origin: bottom;
		transform: rotateX(-90deg);
	}
	100%
	{
		transform-origin: bottom;
		transform: rotateX(0deg);
	}
}
@keyframes open-left
{
	0%
	{
		transform-origin: right;
		transform: rotateY(-90deg);
	}
	100%
	{
		transform-origin: right;
		transform: rotateY(0deg);
	}
}
@keyframes horizontal-spin
{
	0%
	{
		transform-origin: center;
		transform: rotateY(0deg);
	}
	100%
	{
		transform-origin: center;
		transform: rotateY(360deg);
	}	
}
@keyframes horizontal-unfold
{
	0%
	{
		transform-origin: center;
		transform: rotateY(-90deg);
	}
	100%
	{
		transform-origin: center;
		transform: rotateY(0deg);
	}
}
@keyframes fade-in
{
	0%
	{
		opacity: 0;
	}
	100%
	{
		opacity: 1;
	}
}
@keyframes heartbeat 
{
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes click 
{
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.90);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes moveGradient 
{
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body > header > .logo img
{
	-webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
body > header > .logo:active,
button:active, .button:active
{
	animation: .2s click;
}
			@media print
		{			
			body > header
			{
				display: grid;
				grid-template-areas:
					"logo phone1"
					"logo phone2";
				border-bottom: 2px solid var(--colour-main);
				justify-content: space-around;		
				padding: .5cm 0cm;				
			}
			body > header > * 
			{
				display: none;
			}
			body > header > .logo
			{
				grid-area: logo;
				display: grid;
				justify-items: center;
			}
			body > header > .logo > span
			{
				text-transform: uppercase;
				font-weight: bold;
				color: var(--colour-secondary);
				padding-top: 6px;
				text-align: center;
				text-wrap: balance;
				display: block;
			}
			body > header > .phone1
			{
				grid-area: phone1;
			}
			body > header > .phone2
			{
				grid-area: phone2;
			}
			body > header > .logo,
			body > header > .phone1,
			body > header > .phone2
			{
				display: block;
				margin: auto;
				width: fit-content;
				color: var(--colour-main-text);
			}
		}
		@media screen
		{
			body > header
			{
				position: static;
				order: -1;
				padding: var(--padding-main);
				display: grid;
				gap: 0px;
				grid-template-columns: repeat(3, auto) 1fr repeat(3, auto);
				grid-template-areas:					
					"phone1 phone1 phone2 phone2 . . ."
					"logo logo logo logo logo search menu";
				align-items: center;
				border-bottom: 1px solid var(--colour-stroke);
			}						

			body > header > *
			{
				display: none;
			}

			body > header > .phone1,
			body > header > .phone2
			{
				display: grid;				
				grid-auto-flow: column;
			}
			body > header > .phone1 > span,			
			body > header > .phone2 > span
			{
				white-space: nowrap;
				padding-right: 4px;
				line-height: 1.2em;
			}
			
			body > header > .phone1
			{
				grid-area: phone1;
			}

			body > header > .phone2
			{
				grid-area: phone2;
			}

			body > header > .phone1 > span:first-child,
			body > header > .phone2 > span:first-child
			{
				color: var(--colour-important-text);
				font-weight: var(--font-weight-semi-bold);
			}

			body > header > .phone1 > span:last-child,
			body > header > .phone2 > span:last-child
			{
				color: var(--colour-main);
				font-weight: var(--font-weight-bold);
			}

			body > header > .logo
			{
				display: grid;
				grid-area: logo;
				justify-content: start;
				padding: 16px 0px;
				display: grid;
				justify-items: center;
			}
			body > header > .logo > span
			{
				text-transform: uppercase;
				font-weight: bold;
				color: var(--colour-secondary);
				padding-top: 6px;
				text-align: center;
				text-wrap: balance;
				font-size: .7em;
			}			

			body > header > .logo > img
			{
				width: 100%;
				max-height: 42px;
			}
					
			body > header .search *
			{
				display: none;
			}
			body > header .search
			{
				position: static;
				grid-area: search;
				display: grid;
				width: 100%;
			}
			body > header .search label
			{
				display: grid;
				width: 44px;
				height: 44px;
				background: var(--colour-icons);
				mask-image: url('/index/search.svg');
				mask-repeat: no-repeat;
				mask-size: 24px 24px;
				mask-position: center center;
				align-self: center;
				justify-self: center;
				padding-right: 8px;
			}
			body > header .search > label:has(:checked)
			{
				mask-image: url('/index/cross.svg');
			}
			body > header .search > div
			{
				display: none;
				grid-template-areas: "search button";
				grid-template-columns: 1fr;
				grid-template-rows: 1fr;
				align-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
				border-radius: 29px;
				background: var(--colour-base);
				border: 1px solid var(--colour-stroke);
				box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.05);
				overflow: hidden;
			}
			body > header .search > div:focus-within
			{
				border: 1px solid var(--colour-main);
			}
			
			body > header .search > label:has(:checked) + div
			{
				position: absolute;
				top: 110px;
				right: 0px;
				display: grid;
				z-index: 1;
				height: 40px;
				width: calc(100% - calc(var(--padding-main-horizontal) * 4));
				margin: 0 calc(var(--padding-main-horizontal) * 2);
				z-index: 2;
				animation-name: open-down;
						animation-iteration-count: 1;
		animation-duration: 1s;
		animation-direction: forward;
		animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
		animation-fill-mode: forwards;
					}
			body > header .search > label:has(:checked) + div > *
			{
				display: block;
			}
			
			body > header .search:has(:checked):after
			{
				content: '';
				position: absolute;
				top: 100px;
				right: 0px;
				display: grid;
				z-index: 1;
				height: 60px;
				width: 100%;
				margin: 0px;
				background: var(--colour-subtle);
				border-top: 1px solid var(--colour-stroke);
				border-bottom: 1px solid var(--colour-stroke);
				z-index: 1;				
			}
			
			body > header .search input[type='submit']
			{				
				grid-area: button;
				text-indent: -9999px;
				white-space: nowrap;
				width: 48px;
				background: var(--colour-main);
				mask-image: url('/index/search.svg');
				mask-repeat: no-repeat;
				mask-size: 16px 16px;
				mask-position: center center;
			}
			body > header .search > div > input[type="search"]:placeholder-shown + input[type='submit']
			{
				background: var(--colour-icons);
			}
			body > header .search > div > input[type="search"]
			{
				grid-area: search;
				padding: 11px 20px;
				outline: 0px;
				border: 0px;
				background: transparent;				
			}					
			
			input[type="search"]::-webkit-search-decoration,
			input[type="search"]::-webkit-search-cancel-button,
			input[type="search"]::-webkit-search-results-button,
			input[type="search"]::-webkit-search-results-decoration {
			  display: none;
			}
			
			body > header > .menu
			{
				display: block;
				grid-area: menu;
				transition: none;
			}

			body > header > .menu
			{
				text-indent: -9999px;
				white-space: nowrap;
				width: 44px;
				height: 44px;
			}

			body > header > .menu:after
			{
				content: '';
				position: absolute;
				width: 44px;
				height: 44px;
				top: 0px;
				right: 0px;
				background: var(--colour-icons);
				mask-image: url('/index/menu.svg');
				mask-repeat: no-repeat;
				mask-size: 24px 16px;
				mask-position: center center;
			}			
		}		
		@media screen and (min-width: 520px)		{
			body > header
			{
				grid-template-columns: repeat(4, auto) 1fr repeat(3, auto);
				grid-template-areas:					
					"phone1 phone1 phone2 phone2 . . . ."
					"logo logo logo logo logo . search menu";
			}
		}
		
		@media screen and (min-width: 800px)
		{			
			body > header
			{			
				grid-template-columns: repeat(3, auto) 1fr repeat(2, auto);
				grid-template-areas:
					"logo phone1 phone2 . search menu";					
			}
			
			body > header > .menu
			{
				padding: 24px 16px 4px 24px;
			}
								
			body > header .search > label:has(:checked) + div
			{
				top:131px;
			}
			body > header .search:has(:checked):after
			{
				top:121px;
			}
			#menu:checked + header:has(.search :checked) > label[for="menu"] + div
			{
				top: 182px;
			}			
			body > header > .phone1,
			body > header > .phone2
			{						
				grid-auto-flow: row;
				margin-left: 24px;
			}	
			body > header > .logo			
			{				
				padding: 24px 16px 24px 0px;
			}
			body > header > .logo img
			{
				max-height: 57.34px;				
			}
			body > header > .logo > span
			{
				font-size: 1em;
			}
		}

		@media screen and (min-width: 1024px)
		{
			body > header
			{				
				grid-template-rows: 100px 54px;
				grid-template-columns: auto 1fr auto auto;
				grid-template-areas:
					"logo search phone1 phone2"
					"menubar menubar menubar menubar";
				background: linear-gradient(180deg, var(--colour-base) 0px, var(--colour-base) 106px, var(--colour-stroke) 107px, var(--colour-main) 108px);
				grid-gap: 0px;
				padding-bottom: 0px;
			}
			body > header .search input[type='search'],
			body > header .search input[type='submit']
			{
				height: 36px;
			}
			body > header .search *
			{
				display: block;
			}
			body > header .search > label:has(:checked) + div
			{
				position: inherit;
				top: initial;
				right: initial;
				margin: 0px;
				width: 100%;
				height: 100%;
			}
			body > header .search > div
			{
				display: grid;
			}
			body > header .search label,
			body > header .search:has(:checked):after
			{
				display: none;
			}
			body > header .search > div
			{
				box-shadow: none;
			}
		}
		
				@media all
		{
			#menu, label:has(#menu-group-close)
			{
				display: none;
			}
		}
		@media screen 
		{
			#menu + header > label[for="menu"] + div
			{
				position: fixed;
				height: 100%;
				width: 400px;
				background: var(--colour-base);
				padding: 0%;
				left: 100%;
				z-index: 2;
				box-sizing: border-box;
				overflow: hidden;
				animation-name: open-left;
						animation-iteration-count: 1;
		animation-duration: 1s;
		animation-direction: forward;
		animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
		animation-fill-mode: forwards;
					}

			#menu + header >  label[for="menu"] + div div.menu-group div
			{
				display: contents;
			}

			#menu:checked + header > label[for="menu"]:after
			{
				mask-image: none;
				background: transparent;
			}

			#menu:checked + header > label[for="menu"] + div
			{
				display: initial;
				top: 0px;
				margin: 0px;
				box-shadow: 0px 0px 4px 2px #0004;
				left: calc(100% - 400px);
				z-index: 9;
			}

			#menu + header > label[for="menu"] + div > nav
			{
				display: flex;
				flex-direction: column;
				padding: 32px;
				width: 100%;
				height: 100%;
				overflow: auto;
				grid-gap: 16px;
			}

			#menu + header > label[for="menu"] + div > nav > div
			{
				display: grid;
				width: 100%;
				height: 100%;
				margin: 32px 0 0 0;
				grid-gap: 8px;
				line-height: 2;
			}
															
			#menu + header > label[for="menu"] + div > nav > label
			{
				position:relative;
			}
			#menu + header > label[for="menu"] + div > nav > label > span
			{
				display: none;
			}

			#menu + header > label[for="menu"] + div > nav > label:after
			{
				content: '';
				position: absolute;
				background-color: var(--colour-main-text);
				mask-image: url("/index/cross.svg");
				mask-size: contain;
				mask-position: left center;
				mask-repeat: no-repeat;
				display: inline-block;
				width: 22px;
				height: 17px;
				right: 0%;
				top: 50%;
			}


			#menu + header > label[for="menu"] + div > nav > label:hover:after
			{
				background-color: var(--colour-main);
			}

			#menu + header > label[for="menu"] + div > nav > input[type="radio"],
			#menu + header > label[for="menu"] + div > nav > div > label[for="menu-group-close"]
			{
				display: none;
			}

			#menu + header > label[for="menu"] + div > nav > div > label
			{
				color: var(--colour-secondary-text);
				font-size: 22px;				
				font-weight: var(--font-weight-bold);
				text-transform: uppercase;
				margin: 17px 0 17px 0;
				line-height: 1em;
			}					

			#menu + header > label[for="menu"] + div > nav > a
			{
				line-height: 1em;
				padding-left: 24px;
				margin-top: -1em;
				position: relative;
				width: fit-content;
			}
			#menu + header > label[for="menu"] + div > nav > a.menu-link
			{
				padding-left: 0px;
				color: var(--colour-secondary-text);
				font-size: 22px;				
				font-weight: var(--font-weight-bold);
				text-transform: uppercase;
				margin: 17px 0 17px 0;
				line-height: 1em;				
			}

			#menu + header > label[for="menu"] + div > nav .follow .social-links a img
			{
				filter: contrast(2) saturate(0);
			}
			#menu + header > label[for="menu"] + div > nav .follow .social-links a:hover img
			{
										filter: contrast(2) saturate(0) url('data:image/svg+xml,\
							<svg xmlns="http://www.w3.org/2000/svg">\
							<filter id="lightGreen" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">\
							<feColorMatrix type="matrix" values="0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 1 0" />\
							<feComponentTransfer color-interpolation-filters="sRGB">\
							<feFuncR type="table" tableValues="0.23137254901961 1"></feFuncR>\
							<feFuncG type="table" tableValues="0.55686274509804 1"></feFuncG>\
							<feFuncB type="table" tableValues="0.30980392156863 1"></feFuncB>\
							</feComponentTransfer>\
							</filter>\
							</svg>#lightGreen') saturate(150%);
										}

			#menu + header > label[for="menu"] + div > nav > .follow h1 > span
			{
				font: inherit;
			}

			#menu + header > label[for="menu"] + div > nav .follow .social-links
			{
				display: grid;
				width: 100%;
				grid-auto-flow: column;
				grid-gap: 17px;
				align-items: center;
				justify-items: center;
			}
		}
		@media screen and (min-width: 800px)
		{
			#menu + header > label[for="menu"] + div > nav > div > label
			{
				margin: 0 0 35px 0;
			}
			
			#menu + header > label[for="menu"] + div > nav > .follow
			{
				grid-column: 1 / -1;
				grid-auto-flow: column;
				justify-content: flex-start;
				grid-gap: 17px;
				align-items: center;
			}
			#menu + header > label[for="menu"] + div > nav .follow .review-link img
			{
				max-width: 150px;
			}
			#menu + header > label[for="menu"] + div > nav > .follow h1
			{
				white-space: nowrap;
				margin: 0px 0px 0px 17px;
			}
			#menu + header > label[for="menu"] + div > nav > .follow h1:first-child
			{
				margin: 0px;
			}
			#menu + header > label[for="menu"] + div > nav > .follow h1 > span
			{
				display: none;
			}
			#menu + header >  label[for="menu"] + div
			{
				position: absolute;
			}
							
			#menu:checked + header > label[for="menu"]:after
			{
				background: var(--colour-icons);
				mask-image: url('/index/cross.svg');
				mask-size: 24px 24px;
			}
			
			#menu + header > label[for="menu"] + div
			{
				top: 0px;
			}
			
			#menu:checked + header > label[for="menu"] + div
			{
				top: 121px;
				height: auto;
				left: 0;
				box-shadow: 0px 16px 8px -8px #0002;
				animation-name: open-down;
						animation-iteration-count: 1;
		animation-duration: 1s;
		animation-direction: forward;
		animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
		animation-fill-mode: forwards;
						width: 100%;
			}
			
			#menu + header > label[for="menu"] + div > nav > label[for="menu"]
			{
				display: none;
			}
			
			#menu + header > label[for="menu"] + div > nav > label[for="menu"] > span
			{
				display: block;
				grid-area: text;
				justify-self: start;
				color: var(--colour-base);
				text-transform: capitalize;
				font-weight: var(--font-weight-semi-bold);
			}
			#menu + header > label[for="menu"] + div > nav > label[for="menu"]:after
			{
				position: static;
				grid-area: button;
				justify-self: end;
				background-color: var(--colour-base);
				width: 12px;
				height: 12px;
			}
			#menu + header > label[for="menu"] + div > nav > a
			{
				display: none;
			}
			#menu + header > label[for="menu"] + div > nav > a.menu-link
			{
				position: static;
				display: inline-grid;
				width: auto;
				margin: 0px;
				grid-column: span 1;
				align-content: stretch;				
				font-weight: var(--font-weight-semi-bold);
				font-size: var(--font-size-menu);
				white-space: nowrap;
				text-transform: capitalize;
				color: var(--colour-text-over-main);				
				margin: 0px;
				z-index: 2;
				transition: none;
				line-height: 48px;
				padding: 0px 12px 0px 12px;
			}
			
			#menu + header > label[for="menu"] + div > nav
			{				
				padding: 16px 24px;
				row-gap: 16px;
				align-items: start;				
				width: 100%;
				background: var(--colour-subtle);
				border-bottom-left-radius: var(--radius-tiny);
				border-bottom-right-radius: var(--radius-tiny);
				border-top: 1px solid var(--colour-stroke);
			}
			
			#menu + header > label[for="menu"] + div > nav > div,
			#menu + header >label[for="menu"] + div > nav > a.menu-link
			{
				border: 0px;
				height: auto;
				margin: 0px;
				border-radius: var(--radius-tiny);
			}
			
			#menu + header > label[for="menu"] + div > nav > div.branch
			{
				grid-column: span 4;
			}
			
			#menu + header >label[for="menu"] + div > nav > div.menu-group,
			#menu + header >label[for="menu"] + div > nav > a.menu-link
			{
				padding: 16px 24px;
				background: var(--colour-base);
				border-radius: var(--radius-tiny);
				border: 1px solid var(--colour-stroke);
				font-size: var(--font-size-standard);
			}
			
			#menu + header >label[for="menu"] + div > nav > div.menu-group label,
			#menu + header >label[for="menu"] + div > nav > a.menu-link
			{
				font-weight: var(--font-weight-semi-bold);
				font-size: var(--font-size-menu);
				white-space: nowrap;
				text-transform: capitalize;
				margin: 0px;
				z-index: 2;
				transition: none;
				line-height: 1em;
				width: 100%;
				color: var(--colour-main-text);
			}
			#menu + header > label[for="menu"] + div > nav > input:checked + div.menu-group label
			{
				display: none;
			}
			#menu + header > label[for="menu"] + div > nav > input:checked + div.menu-group label[for="menu-group-close"]
			{
				display: block;
			}
			#menu + header > label[for="menu"] + div > nav > input:checked + div.menu-group label + div
			{
				padding-top: 8px;
			}
			#menu + header >label[for="menu"] + div > nav > div a
			{
				line-height: 1em;
				padding: 16px 0px;
			}
			#menu + header >label[for="menu"] + div > nav > input:checked + div.menu-group label			
			{
				padding-bottom: 8px;
			}
			#menu + header >label[for="menu"] + div > nav > div a:hover
			{
				color: var(--colour-main-text);
				background: var(--colour-subtle);
			}					
			#menu + header >label[for="menu"] + div > nav > input:checked + div.menu-group label:after
			{
				transform: rotateZ(0deg);			
			}
			
			#menu + header > label[for="menu"] + div > nav > div.menu-group label:after
			{
				content: '';
				position: absolute;
				background-color: var(--colour-icons);
				mask-size: 16px 16px;
				mask-position: center center;
				mask-repeat: no-repeat;
				display: inline-block;
				width: 24px;
				height: 24px;
				mask-image: url(/index/up.svg);				
				top: -2px;
				transform: rotate(180deg);
				right: var(--padding-main-horizontal);					
			}
			#menu + header > label[for="menu"] + div > nav > div.menu-group label + div
			{
				display: none;
			}
			#menu + header > label[for="menu"] + div > nav > input:checked + div.menu-group label + div
			{
				display: flex;
				flex-direction: column;
				animation-name: open-down;
						animation-iteration-count: 1;
		animation-duration: 1s;
		animation-direction: forward;
		animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
		animation-fill-mode: forwards;
					}					
		}

		@media screen and (min-width: 1024px)
		{
			#menu + header > label[for="menu"] + div > nav > a.menu-link
			#menu + header > label[for="menu"] + div > nav > label[for="menu"]
			{
				display: none;
			}
			body > header > .menu
			{
				display: none;
			}
			#menu + header > label[for="menu"] + div > nav > .follow h1	> span
			{
				display: inline;
			}
			#menu + header > label[for="menu"] + div > nav > .follow
			{
				grid-column: 1 / -1;
				grid-auto-flow: column;
				justify-content: flex-start;
				grid-gap: 17px;
			}

			#menu + header >  label[for="menu"] + div
			{
				max-width: 100%;
				line-height: 1.5em;
			}
			
			#menu + header > label[for="menu"] + div > nav > div.branch
			{
				grid-column: span 3;
			}
			#menu + header > label[for="menu"] + div > nav .follow .review-link img
			{
				max-width: none;
			}

			#menu + header > label[for="menu"] + div,
			#menu:checked + header >label[for="menu"] + div
			{
				display: contents;
			}
			#menu + header > label[for="menu"] + div > nav
			{
				grid-area: menubar;
				flex-direction: row;
				padding: 0px;
				margin: 0px;
				grid-gap: 0px;
				position: static;
				justify-items: center;
				width: fit-content;
				border-radius: 0px;
				border-top: 0px;
				justify-self: center;
				overflow: hidden;
				background: transparent;
			}
			#menu + header > label[for="menu"] + div > nav > *,
			#menu + header > label[for="menu"] + div > nav > div
			{
				display: none;
			}
			#menu + header >label[for="menu"] + div > nav > div.menu-group
			{
				position: static;
				display: inline-grid;
				width: auto;
			}
			#menu + header >label[for="menu"] + div > nav > div.menu-group,
			#menu + header >label[for="menu"] + div > nav > a.menu-link
			{
				border: 0px;
			}
			#menu + header >label[for="menu"] + div > nav > div.menu-group label,
			#menu + header >label[for="menu"] + div > nav > a.menu-link
			{
				background: transparent;
				color: var(--colour-text-over-main);
				padding: 0px 24px 0px 8px;
				border-radius: 0px;
			}
			#menu + header >label[for="menu"] + div > nav > a.menu-link
			{
				padding: 0px 8px 0px 8px;
			}
			#menu + header >label[for="menu"] + div > nav > div.menu-group
			{
				background: transparent;
				padding: 0px;				
			}					
						
			#menu + header > label[for="menu"] + div > nav > a.menu-link:hover,
			#menu + header >  label[for="menu"] + div input[type="radio"] + div.menu-group label:hover,
			#menu + header >  label[for="menu"] + div input[type="radio"]:checked + div.menu-group label
			{
				background: var(--colour-secondary);				
			}
			#menu + header >label[for="menu"] + div > nav > div.menu-group label,
			#menu + header >label[for="menu"] + div > nav > a.menu-link			
			{
				line-height: 54px;
			}
			
			#menu + header >label[for="menu"] + div > nav > div.menu-group label:after
			{
				background-color: var(--colour-text-over-main);
				right: auto;
			}
			
			#menu + header >  label[for="menu"] + div div.menu-group div,
			#menu:checked + header > label[for="menu"]
			{
				display: none;
			}
			
			#menu + header >  label[for="menu"] + div input[type="radio"]:checked + div.menu-group div
			{
				font-size: var(--font-size-menu);
				display: grid;
				position: absolute;
				z-index: 2;
				top: 162px;
				min-width: 250px;
				background: var(--colour-base);
				padding: 8px;
				border-bottom-right-radius: var(--radius-tiny);
				border-bottom-left-radius: var(--radius-tiny);
				box-shadow: 0px 8px 8px 0px #0002;				
			}
			#menu + header > label[for="menu"] + div > nav > div.menu-group label:after
			{
				top: 15px;
			}			
			#menu + header >  label[for="menu"] + div input[type="radio"]:checked + div.menu-group div a
			{
				padding: 8px;
			}
			#menu + header >label[for="menu"] + div > nav > div a:last-child
			{
				margin-bottom: 8px;
			}
			#menu + header >  label[for="menu"] + div input[type="radio"]:checked + div.menu-group div a:hover
			{
				background: var(--colour-subtle);
				border-radius: var(--radius-tiny);
				font-weight: var(--font-weight-semi-bold);
			}
			
			#menu + header >  label[for="menu"] + div input[type="radio"]:checked ~ label > #menu-group-close,
			#menu + header >  label[for="menu"] + div input[type="radio"]:checked ~ label:has(#menu-group-close):after
			{
				display: none;
			}
			#menu + header >  label[for="menu"] + div input[type="radio"]:checked ~ label:has(#menu-group-close)
			{
				contents: '';
				position: absolute;
				display: block;
				width: 100%;
				height: 100%;
				background: transparent;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 1;
			}
			/* fix last menu goes off screen */
			#menu + header >label[for="menu"] + div > nav > div.menu-group:has(+label:has(#menu-group-close)) div
			{
				right: 0;
			}
		}
		/* unfix last menu goes off screen */
		@media screen and (min-width: 1228px)
		{
			#menu + header >label[for="menu"] + div > nav > div.menu-group:has(+label:has(#menu-group-close)) div
			{
				right: auto;
			}
		}		
				
		@media print
		{
			body > footer
			{
				display: block;
				border-top: 2px solid var(--colour-main);
				padding-top: 1cm;
			}
			body > footer > .logo,
			body > footer > .menu,
			body > footer > .menu,
			body > footer > .newsletter,
			body > footer > .links,
			body > footer > .copy,
			body > footer > .saf,
			body > footer > .ncc
			{
				display: none;
			}
						
			body > footer > .social
			{
				grid-area: social;
				display: flex;				
				grid-gap: 14px;	
				padding: 0px;				
				width: calc(100vw - 40px);
				justify-content: center;
				margin-bottom: 20px;
				justify-self: end;
			}

			body > footer > .social a picture
			{
				width: 40px;
				height: 40px;
				display: grid;				
				border-radius: 50%;
				justify-content: center;
				align-content: center;				
				overflow: hidden;	
			}				
			body > footer > .social a img
			{
				filter: contrast(2) saturate(0);
				width: 16px;
			}
			#cookie
			{
				display: none;
			}
			main
			{
				display: block;
				padding-bottom: .5cm;
			}
			main section:first-of-type
			{
				page-break-before: avoid;
			}
			main section
			{
				page-break-inside: avoid;				
			}
			body > footer .social
			{
				display: none;
			}
			body > footer .awards
			{
				display: flex;
				flex-wrap: nowrap;
				justify-content: center;
				gap: 5mm;				
			}
			body > footer .branches
			{
				line-height: 2;
				display: flex;
				flex-wrap: wrap;
				gap: 0 5px;     
			}
			body > footer > .branch
			{
				display: block;
			}

			body > footer .branch, body > footer .address 
			{
				display: inline-block;
				white-space: nowrap;
			}

			body > footer .address::after 
			{
				content: "\a";
				white-space: pre;
			}
		}
		@media screen 
		{
			
			body > footer
			{
				position: static;				
				padding: var(--margin-section-gap) var(--padding-main-horizontal) 0px var(--padding-main-horizontal);
				display: grid;				
				gap: 0px;
				grid-template-columns: 1fr;				
				grid-template-areas:
					"logo"
					"social"
					"newsletter"
					"awards"					
					"menu"
					"links"					
					"copy"
					"disclaimer"
					"saf"
					"ncc";				
				border-top: 1px solid var(--colour-stroke);						
			}
			
			body > footer a:hover,
			label[for="cookiePreferences"]:hover
			{
				text-decoration: underline;
				text-underline-offset: 4px;
			}
			
			body > footer > .branches
			{
				display: none;
			}
			body > footer > .awards
			{
				display: flex;
				grid-area: awards;
				justify-content: flex-start;
				grid-gap: 8px;
				margin: 24px 0px;
			}			
			
			body > footer > .logo
			{
				grid-area: logo;
				justify-self: start;
				width: 276px;
				height: 48px;
				margin: 16px 0px;
			}
			body > footer > .logo img
			{
				width: 100%;				
			}
			
						
			body > footer > .menu
			{				
				grid-area: menu;							
				grid-gap: 16px 24px;
				display: grid;				
			}	
			
			body > footer > .menu div
			{
				display: flex;
				flex-direction: column;
				grid-gap: 8px;
				width: 100%;
			}
			body > footer > .menu > div h2
			{
				text-wrap: nowrap;
				color: var(--colour-main-text);
				font-weight: var(--font-weight-normal);
				font-size: var(--font-size-menu);
				margin: 0px 0px 4px 0px;
			}			
			body > footer > .menu > div div a
			{
				line-height: calc(1em + 4px);				
			}
			
			body > footer > .newsletter
			{
				grid-area: newsletter;
				padding: 0px;				
				width: 100%;				
			}
			body > footer > .newsletter .heading
			{
				margin-top: 4px;
				font-weight: var(--font-weight-bold);
				color: var(--colour-main-text);
			}
			body > footer > .newsletter p
			{
				color: var(--colour-secondary-text);
				font-weight: var(--font-weight-normal);				
				padding: 8px 0px 8px 0px;
				max-width: 608px;
				line-height: calc(1em + 8px);
			}
			body > footer > .newsletter form
			{
				display: grid;
			    grid-auto-flow: column;
				grid-template-columns: 1fr min-content;
				justify-items: stretch;
				max-width: 608px;
			}			
			body > footer > .newsletter form input
			{		
				outline: none;
				border-top-left-radius: var(--radius-small);
				border-bottom-left-radius: var(--radius-small);
				border-top-right-radius: 0px;
				border-bottom-right-radius: 0px;	
				width:100%;				
				height: 46px;
				border: 1px solid var(--colour-stroke);	
				border-right-width: 0px;
				padding: 15px;
			}
			body > footer > .newsletter form input[type="submit"]
			{
				border: 1px solid var(--colour-stroke);	
				border-left-width: 0px;
				border-top-left-radius: 0px;
				border-bottom-left-radius: 0px;
				border-top-right-radius: var(--radius-small);
				border-bottom-right-radius: var(--radius-small);								
				background: var(--colour-base);		
				width: 48px;	
			}
			body > footer > .newsletter form:focus-within input
			{
				border-color: var(--colour-main);
			}
			
			body > footer > .newsletter form:has(:placeholder-shown):after
			{
				background-color: var(--colour-icons);
			}
			
			body > footer > .newsletter form:after
			{
				content: '';
				position: absolute;
				background-color: var(--colour-main);
				mask-size: 16px 16px;
				mask-position: center center;
				mask-repeat: no-repeat;
				display: inline-block;
				width: 32px;
				height: 40px;
				mask-image: url(/index/paper-plane.svg);
				top: 4px;				
				right: 8px;
				pointer-events: none;
			}
			
			body > footer > .links
			{
				grid-area: links;
				display: flex;
				flex-wrap: wrap;
				grid-gap: 8px 0px;					
				margin: 16px 0px;				
			}
			body > footer > .links:before {
				content: '';
				width: 100%;
				display: block;
				height: 1px;
				border: 0;
				border-top: 1px solid var(--colour-stroke);
				margin: 0px 0px 16px 0px;
				padding: 0;
			}			
						
			body > footer > .links > *:after
			{
				content: '';
				width: 1px;
				height: 100%;
				display: inline-block;				
				border: 0;
				border-right: 1px solid var(--colour-stroke);
				margin: -2px 6px;
				padding: 0;				
			}
			body > footer > .links > *:last-child:after
			{
				display: none;				
			}
			
			body > footer > .links label,
			body > footer > .links a
			{
				white-space: nowrap;
				line-height: 1em;
				color: var(--colour-secondary-text);
			}
			
			body > footer > .disclaimer
			{
				grid-area: disclaimer;
				font-size: var(--font-size-disclaimer);
				font-weight: var(--font-weight-normal);
				color: var(--colour-disclaimer-text);				
			}
			body > footer > .disclaimer *
			{
				grid-area: disclaimer;
				font-size: var(--font-size-disclaimer);				
				color: var(--colour-disclaimer-text);				
			}			
			
			body > footer > .copy,			
			body > footer > .saf,
			body > footer > .ncc
			{
				margin-bottom: 8px;
			}
			
			body > footer > .copy,			
			body > footer > .saf,
			body > footer > .ncc,
			body > footer > .copy *,
			body > footer > .saf *,
			body > footer > .ncc *
			{				
				font-size: var(--font-size-disclaimer);				
				color: var(--colour-disclaimer-text);								
			}
			
			body > footer > .disclaimer:after
			{
				content: '';
				width: 100%;
				display: block;
				height: 1px;
				border: 0;
				border-top: 1px solid var(--colour-stroke);
				margin: 16px 0;
				padding: 0;
			}
			
			body > footer > .saf,
			body > footer > .ncc
			{
				display: grid;
				align-items: center;
				grid-template-areas: "logo text";	
				grid-gap: 16px;
				margin-bottom: 16px;				    
			}
			
			body > footer > .saf > img,
			body > footer > .ncc > img
			{
				grid-area: logo;
				width: 78px;
				max-height: 69px;
			}
			body > footer > .saf > p,
			body > footer > .ncc > p
			{
				grid-area: text;
			}
			
			body > footer > .copy
			{
				grid-area: copy;
			}
			body > footer > .saf
			{
				grid-area: saf;
			}
			body > footer > .ncc
			{
				grid-area: ncc;
				margin-bottom: var(--margin-section-gap);
			}					
			
			body > footer > .social
			{
				grid-area: social;
				display: flex;
				grid-gap: 14px;
				padding: 0px;
				margin: 16px 0px;
			}

			body > footer > .social a picture
			{
				width: 40px;
				height: 40px;
				display: grid;				
				border-radius: 50%;
				justify-content: center;
				align-content: center;
				border: 1px solid #DDD;
				overflow: hidden;	
			}	
			body > footer > .social a:hover	picture
			{
				border: 1px solid #FFF;
			}	
			body > footer > .social a img
			{
				transition: 0.5s ease;
				filter: contrast(2) saturate(0);
				width: 16px;
			}
			body > footer > .social a:hover img
			{
				transform: scale(3);
				filter: contrast(1) saturate(1);
			}
			#cookie
			{
			    margin-top: var(--margin-section-gap);
				padding: var(--padding-main);
				position: fixed;
				bottom: 0px;
				background: var(--colour-base);
				border-top: 1px solid var(--colour-stroke);
				z-index: 8;
				width: 100%;
				padding-bottom: 1.618%;
				box-shadow: 0px -16px 8px -8px #0002;
				max-height: 100vh;
				overflow: auto;
			}
			
			#cookie > input[type="radio"],
			#cookie > input[type="radio"] + div
			{
				display: none;
			}			
			#cookie > input[type="radio"]:checked + div
			{
				display: block;
				animation-name: open-up;
						animation-iteration-count: 1;
		animation-duration: 1s;
		animation-direction: forward;
		animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
		animation-fill-mode: forwards;
						
			}
			
			form:has(#cookieNoMessage:checked)
			{
				display: none;			
			}
			
			#cookieNoMessage + div
			{
				float: right;
				margin-bottom: 28px;
				padding: 4px 0px;
			}
			
			#cookie
			{
				line-height: 2;
			}
			
			#cookie .buttons
			{
				display: flex;
				grid-gap: 8px;
				flex-wrap: wrap;							
			}			
			
			#cookie fieldset
			{
				display: grid;
				grid-template-columns: auto 1fr;
				grid-gap: 8px;	
				align-items: start;	
				padding: 32px 8px;
			}
			
			#cookie details
			{
				margin-left: 32px;				
			}			
						
			#cookie details p
			{
				padding-bottom: 8px;
			}
			
			#cookie fieldset label input
			{
				display: none;
			}
			#cookie fieldset label:before
			{
				content: '';
				position: absolute;
				display: block;
				width: 24px;
				height: 24px;
				top: 4px;				
				border-radius: var(--radius-nano);	
				border: 1px solid var(--colour-stroke);
				background: transparent;				
			}
			#cookie fieldset label:has(input[type="checkbox"]:checked):before,
			#cookie fieldset label.check:before
			{
				border: 1px solid transparent;
				background: var(--colour-main);
			}			
			#cookie fieldset label:has(input[type="checkbox"]:checked):after,
			#cookie fieldset label.check:after
			{
				content: '';
				position: absolute;
				display: block;
				width: 24px;
				height: 24px;
				top: 4px;
				border-radius: var(--radius-nano);
				background: var(--colour-base);
				mask-image: url(/index/check.svg);
				mask-size: 12px 12px;
				mask-position: center;
				mask-repeat: no-repeat;							
			}					
		}
		@media screen and (min-width: 420px)
		{
			body > footer > .menu
			{				
				display: flex;
				flex-wrap: wrap;				
			}	
			body > footer > .menu div
			{
				flex: 1 0 130px;
				min-width: 130px;
				max-width: 195px;
			}
		}
		@media screen and (min-width: 800px)
		{	
			body > footer > .logo
			{
				width: 363px;
				height: 63px;
			}			
			body > footer
			{
				grid-template-columns: 1.5fr 1fr;	
				grid-template-areas:
					"logo social"
					"branches newsletter"					
					"spacer spacer"
					"menu awards"
					"links links"					
					"copy copy"
					"disclaimer disclaimer"
					"saf saf"
					"ncc ncc";				
			}				
			body > footer > .branches,
			body > footer > .newsletter
			{
				padding-bottom: 24px;
				margin-bottom: 24px;
				border-bottom: 1px solid var(--colour-stroke);
			}
			
			body > footer > .awards
			{
				justify-content: flex-end;
				margin: 0px;
			}
			body > footer > .branches
			{				
				color: var(--colour-secondary-text);
				display: flex;
				grid-area: branches;
				flex-direction: column;
				grid-gap: 4px;
			}
			body > footer > .branch
			{
				display: contents;
			}
			body > footer > .branches span
			{
				max-width: 416px;
				line-height: calc(1em + 8px);
			}
			body > footer > .branches > .branch > span:first-child
			{
				margin-top: 4px;
				font-weight: var(--font-weight-bold);
				color: var(--colour-main-text);
			}
			body > footer > .branches span.address
			{
				display: flex;
				flex-wrap: wrap;				
			}
			body > footer > .branches span.address span
			{
				text-wrap: nowrap;
			}
			body > footer > .social			
			{
				justify-content: flex-end;
			}												
		}

		@media screen and (min-width: 1440px)
		{
			
		}