/* ==========================================================================
   Metamorph Pre School — shared styles (fonts, base, header, footer, UI)
   Breakpoints: laptop <= 1366px, tablet <= 1024px, mobile <= 767px
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
	font-family: 'Luckiest Guy Regular';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('../fonts/LuckiestGuy-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'comic';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('../fonts/comic.ttf') format('truetype');
}
@font-face {
	font-family: 'Sensei';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('../fonts/Sensei-Medium-1.woff') format('woff'),
	     url('../fonts/Sensei-Medium-1.ttf') format('truetype');
}

/* ---------- Tokens ---------- */
:root {
	--accent-1: #E74C25;
	--accent-2: #167287;
	--accent-3: #0A303A;
	--accent-4: #D8D8D8;
	--accent-5: #FFFFFF;
	--accent-6: #000000;
	--accent-7: #EDEDED;
	--accent-8: #F4F1EA;
	--text: #333333;
	--ink: #20323D;
	--orange: #E86936;
	--sky: #1BA7DC;
	--green: #B1D27C;
	--yellow: #FCD900;
	--font-body: 'Catamaran', sans-serif;
	--font-display: 'Luckiest Guy Regular', sans-serif;
	--font-comic: 'comic', sans-serif;
	--font-button: 'Sensei', sans-serif;
	--font-text: 'Montserrat', sans-serif;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}

body {
	margin: 0;
	background-color: var(--accent-5);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: normal;
	line-height: 1.5em;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
	border: none;
	vertical-align: middle;
}

figure {
	margin: 0;
}

p {
	margin: 0 0 1em 0;
}

a {
	color: var(--accent-1);
	text-decoration: none;
	transition: color .3s;
}

a:hover {
	color: #020D26;
}

h1, h2, h3, h4, h5, h6 {
	margin: .6em 0;
	color: var(--accent-3);
	font-family: var(--font-body);
	font-style: normal;
	text-transform: none;
}
h2 { font-size: 48px; font-weight: 800; line-height: 1.1em; }
h3 { font-size: 26px; font-weight: 900; line-height: 1.21em; }
h4 { font-size: 20px; font-weight: 800; line-height: 1.27em; }

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font: inherit;
	cursor: pointer;
}

cite {
	font-style: normal;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
	white-space: nowrap;
}

/* Stops the last section margin collapsing into the footer (as on the original) */
.site-main {
	display: flow-root;
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-block;
	border-radius: 4px;
	font-family: var(--font-button);
	line-height: 1;
	text-align: center;
	transition: all .3s;
}

.btn--outline {
	padding: 12px 24px;
	border: 1px solid var(--accent-1);
	background-color: var(--accent-5);
	color: var(--accent-1);
	font-size: 14px;
}

.btn--outline.btn--sm {
	background-color: rgba(231, 76, 37, 0);
	font-size: 15px;
}

.btn--outline:hover,
.btn--outline:focus {
	border-color: var(--accent-3);
	background-color: var(--accent-3);
	color: #FFFFFF;
}

/* Grow-on-hover animation */
.btn--grow {
	transition-duration: .3s;
	transition-property: all;
}

.btn--grow:hover,
.btn--grow:focus {
	transform: scale(1.1);
}

.btn--solid {
	padding: 15px 30px;
	background-color: var(--orange);
	color: #FFFFFF;
	font-size: 16px;
}

.btn--solid:hover,
.btn--solid:focus {
	background-color: var(--ink);
	color: #FFFFFF;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
	position: relative;
	z-index: 99;
}

.header-row {
	display: flex;
	position: relative;
}

.header-col {
	display: flex;
	position: relative;
	min-height: 1px;
}

.header-logo {
	display: inline-block;
}

.header-logo img {
	display: inline-block;
}

/* Phone (shared) */
.header-phone {
	display: flex;
	align-items: center;
	color: var(--accent-1);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: .8em;
	letter-spacing: .5px;
}

.header-phone__icon {
	display: flex;
	position: relative;
	padding-inline-end: 5px;
}

.header-phone__icon svg {
	width: 18px;
	height: 18px;
	margin: 0 4.5px 0 0;
	fill: var(--sky);
	transition: fill .3s;
}

.header-phone__text {
	padding-left: 5px;
	color: var(--sky);
	transition: color .3s;
}

.header-phone:hover .header-phone__text {
	color: var(--orange);
}

/* ---------- Desktop header (>= 1025px) ---------- */
.header-desktop {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 99;
	transition: transform .2s;
}

.header-desktop.is-hidden {
	transform: translateY(-100%);
}

.header-desktop .header-bar {
	padding: .5% 1% 0 1%;
	background-color: var(--accent-5);
}

.header-desktop .header-col {
	padding: 10px;
}

.header-desktop .header-col--logo {
	width: 15%;
	justify-content: flex-start;
}

.header-desktop .header-logo {
	text-align: center;
	width: 100%;
}

.header-desktop .header-logo img {
	width: 65%;
}

.header-desktop .header-col--nav {
	width: 70.666%;
	align-items: center;
}

.header-desktop .header-col--contact {
	width: 14%;
	justify-content: flex-end;
	align-items: center;
}

.header-spacer-strip {
	min-height: 40px;
}

.header-placeholder {
	height: 131.86px;
}

/* Main navigation */
.main-nav__list {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	z-index: 99;
	line-height: normal;
}

.main-nav__item {
	display: flex;
	position: relative;
}

.main-nav__link {
	display: flex;
	align-items: center;
	position: relative;
	padding: 13px 5px 13px 20px;
	color: #0a303a;
	font-family: var(--font-comic);
	font-size: 18px;
	font-weight: 800;
	line-height: 20px;
	letter-spacing: .2px;
	white-space: nowrap;
	transition: .4s;
}

.main-nav__link:hover,
.main-nav__link:focus {
	color: #0a303a;
}

/* Overline pointer (pill) */
.main-nav__link::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: auto;
	z-index: 2;
	width: 100%;
	height: 7px;
	border-radius: 50%;
	background-color: #B9D8E0;
	opacity: 0;
	transition: .3s;
	transition-timing-function: cubic-bezier(.58, .3, .005, 1);
}

.main-nav__link:hover::before,
.main-nav__link:focus::before,
.main-nav__item:hover > .main-nav__link::before {
	opacity: 1;
}

.main-nav__link.is-ancestor::before {
	opacity: 1;
}

.main-nav__link.is-active::before {
	background-color: var(--accent-1);
	opacity: 1;
}

/* Dropdown */
.main-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 9997;
	min-width: 156px;
	margin-top: 6px;
	border-radius: 4px;
	background-color: var(--accent-5);
	box-shadow: 0 10px 36px 0 rgba(0, 0, 0, .09);
}

.main-nav .sub-menu::before {
	content: "";
	position: absolute;
	top: -6px;
	right: 0;
	left: 0;
	height: 6px;
}

.main-nav__item:hover > .sub-menu,
.main-nav__item:focus-within > .sub-menu {
	display: block;
}

.main-nav .sub-menu li:not(:last-child) {
	border-bottom: 0 dotted rgba(10, 48, 58, .07);
}

.main-nav .sub-menu a {
	display: flex;
	padding: 14px 35px;
	color: #0A303A;
	font-family: var(--font-comic);
	font-size: 15px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: .2px;
	white-space: nowrap;
	transition: .4s;
}

.main-nav .sub-menu li:first-child a {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

.main-nav .sub-menu li:last-child a {
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
}

.main-nav .sub-menu a:hover {
	background-color: #F8F8F8;
	color: var(--accent-1);
}

.main-nav .sub-menu a.is-active {
	background-color: var(--accent-5);
	color: var(--accent-1);
}

/* ---------- Tablet / mobile header (<= 1024px) ---------- */
.header-mobile {
	display: none;
}

.menu-toggle {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	padding: 5px;
	border: 0;
	background-color: #FFFFFF;
	color: #000000;
	line-height: 1;
}

.menu-toggle svg {
	width: 22.75px;
	height: 26px;
	fill: currentColor;
}

.header-enquire {
	display: inline-block;
	margin-left: 0;
	padding: 5.8125px 6.78125px;
	border-radius: 4px;
	background-color: var(--orange);
	color: #FFFFFF;
	font-family: var(--font-comic);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	transition: all .3s;
}

.header-enquire:hover,
.header-enquire:focus {
	background-color: var(--ink);
	color: #FFFFFF;
}

/* Drawer */
.drawer {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	width: 400px;
	max-width: 100%;
	height: 100vh;
	padding: 30px;
	overflow-y: auto;
	background-color: #F5F5F5;
	text-align: right;
	transform: translateX(-100%);
	transition: transform .4s ease-in-out;
	visibility: hidden;
}

.drawer.is-open {
	transform: translateX(0);
	visibility: visible;
}

.drawer-overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 998;
	width: 100%;
	height: 100vh;
	background-color: #00000069;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease-in-out;
}

.drawer-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.drawer__close {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 2;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background-color: #FFFFFF;
	color: #060606;
	line-height: 1;
}

.drawer__close svg {
	width: 13.75px;
	height: 20px;
	fill: currentColor;
}

.drawer__nav {
	text-align: left;
}

.drawer__list {
	padding: 20px 24px 0;
}

.drawer__item {
	display: flex;
	flex-wrap: wrap;
	position: relative;
}

.drawer__item > a {
	display: block;
	flex: 1;
	padding: 0 0 22.5px;
	border-bottom: 1px solid #F5F5F5;
	color: #000000;
	font-family: var(--font-comic);
	font-size: 16px;
	font-weight: 800;
	line-height: 16px;
	letter-spacing: .5px;
	transition: color .3s;
}

.drawer__item:hover > a,
.drawer__item.is-current > a {
	color: #E74C25;
}

.drawer__toggle {
	position: absolute;
	top: -11px;
	right: 0;
	width: 50px;
	height: 38px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #000000;
	font-size: 14px;
}

.drawer__toggle::before {
	content: "";
	display: inline-block;
	position: relative;
	top: -.1em;
	width: 8px;
	height: 8px;
	border-style: solid;
	border-width: .1em .1em 0 0;
	transform: rotate(135deg);
	transition: transform .3s ease;
}

.drawer__toggle[aria-expanded="true"]::before {
	transform: rotate(-45deg);
}

.drawer__sub {
	display: none;
	width: 100%;
	margin: -10px 0 18px;
}

.drawer__item.is-expanded > .drawer__sub {
	display: block;
}

.drawer__sub a {
	display: block;
	padding: 10px 15px;
	border-bottom: 1px solid #F5F5F5;
	background: #F5F5F5;
	color: #000000;
	font-family: var(--font-comic);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.2;
}

.drawer__sub a:hover {
	color: #E74C25;
}

.drawer__sub .is-current > a {
	background: #efefef;
	color: #E74C25;
}

body.drawer-open {
	overflow: hidden;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
	position: relative;
}

/* Scene above the footer (trees + fox) */
.footer-scene {
	display: flex;
	position: relative;
	z-index: 2;
	margin: 0 0 -31px;
	padding: 0 30px;
}

.footer-scene__col {
	display: flex;
	align-items: flex-end;
	padding: 10px;
}

.footer-scene__col--tree1 { width: 12.533%; justify-content: center; }
.footer-scene__col--fox   { width: 28.747%; perspective: 1200px; }
.footer-scene__col--empty { width: 40.929%; }
.footer-scene__col--tree2 { width: 17.791%; }

.footer-scene__tree1,
.footer-scene__fox,
.footer-scene__tree2 {
	width: 100%;
}

.footer-scene__tree1 {
	margin-bottom: 5px;
	text-align: center;
}

.footer-scene__fox {
	margin-bottom: 5px;
	text-align: start;
}

.footer-scene__fox img {
	transition: transform .4s ease-out;
}

.footer-scene__tree2 {
	text-align: start;
}

/* Main footer */
.footer-main {
	padding: 4% 6% 0 3%;
	background-color: var(--green);
}

.footer-main__row {
	display: flex;
	position: relative;
}

.footer-col {
	display: flex;
	flex-direction: column;
	position: relative;
	min-height: 1px;
}

.footer-col--about   { width: 23%; }
.footer-col--links   { width: 31%; }
.footer-col--spacer  { width: 3%; }
.footer-col--address { width: 23%; }
.footer-col--actions { width: 20%; }

.footer-col__wrap {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	flex-grow: 1;
}

.footer-col--links .footer-col__wrap   { padding: 0 0 12% 0; }
.footer-col--address .footer-col__wrap { padding: 0 0 6% 0; }
.footer-col--actions .footer-col__wrap { padding: 0 0 45% 0; }

.footer-about {
	margin: 0 5% 0 0;
	padding: 10px;
}

.footer-about__inner {
	padding: 0 30px;
}

.footer-logo {
	display: block;
	margin-bottom: 20px;
	text-align: center;
}

.footer-logo img {
	width: 100%;
	max-width: 100%;
}

.footer-about__text {
	color: var(--text);
	font-family: var(--font-comic);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.7em;
	text-align: justify;
}

.footer-about__text p {
	margin: 0;
}

.footer-about__text span {
	font-weight: 400;
}

.footer-heading {
	margin: 0 0 20px;
	color: var(--accent-3);
	font-family: var(--font-display);
	font-size: 23px;
	font-weight: 800;
	line-height: 1.1em;
	letter-spacing: .11em;
	text-align: center;
}

.footer-heading--links {
	margin-left: -17%;
}

.footer-heading--address {
	margin-left: -39%;
}

.footer-links {
	display: flex;
	padding: 0 30px;
}

.footer-links__col {
	display: flex;
	width: 50%;
}

.footer-links__wrap {
	display: flex;
	flex: 1;
	padding: 10px;
}

.footer-links__col--left .footer-links__wrap {
	justify-content: flex-start;
	margin-left: 21%;
}

.footer-links__col--right .footer-links__wrap {
	justify-content: flex-end;
	margin-left: 10%;
}

.footer-menu {
	width: 100%;
}

.footer-menu a {
	display: flex;
	align-items: center;
	padding: 7px 0;
	color: var(--ink);
	font-family: var(--font-comic);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5em;
	transition: .4s;
}

.footer-menu a:hover,
.footer-menu a.is-active {
	color: #e74c25;
}

.footer-address {
	color: var(--ink);
	font-family: var(--font-comic);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.8em;
}

.footer-address p {
	margin: 0 0 5px;
}

.footer-address p:last-child {
	margin-bottom: 0;
}

.icon {
	display: inline-block;
	font-style: normal;
	line-height: 1;
}

.icon svg {
	display: inline-block;
	width: auto;
	height: 17px;
	fill: currentColor;
	vertical-align: -2px;
}

.icon--marker svg   { width: 12.75px; }
.icon--mobile svg   { width: 10.6px; }
.icon--envelope svg { width: 17px; }

.footer-enquire {
	margin-bottom: 20px;
	text-align: center;
}

.footer-social {
	display: flex;
	justify-content: center;
	gap: 3px;
	margin-top: 9px;
}

.footer-social__link {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0);
	transition: all .3s;
}

.footer-social__link svg {
	width: 26px;
	height: 26px;
	fill: var(--ink);
	transition: fill .3s;
}

.footer-social__link:hover {
	background-color: var(--ink);
}

.footer-social__link:hover svg {
	fill: #FFFFFF;
}

/* Bottom bar */
.footer-bottom {
	padding: 1% 0;
	background-color: var(--green);
}

.footer-bottom__wrap {
	padding: 10px;
}

.footer-bottom__inner {
	padding: 0 16%;
}

.footer-bottom__content {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 10px;
	color: var(--ink);
	font-family: var(--font-comic);
	font-size: 14px;
	font-weight: normal;
}

.footer-bottom__copy {
	margin: 0 5px 0 0;
}

.footer-bottom__credit p {
	margin: 0;
}

.footer-bottom__credit span {
	color: var(--orange);
}

/* ==========================================================================
   VIDEO LIGHTBOX
   ========================================================================== */
.video-lightbox {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	inset: 0;
	z-index: 9999;
	background-color: rgba(0, 0, 0, .87);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s;
}

.video-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.video-lightbox__frame {
	position: relative;
	width: min(85vw, calc(85vh * 16 / 9));
	aspect-ratio: 16 / 9;
	background: #000000;
}

.video-lightbox__frame iframe,
.video-lightbox__frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-lightbox__close {
	position: absolute;
	top: 15px;
	right: 15px;
	padding: 0;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, .9);
	font-size: 24px;
	cursor: pointer;
}

.video-lightbox__close svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ==========================================================================
   SCROLL TO TOP
   ========================================================================== */
.scroll-to-top {
	display: block;
	position: fixed;
	right: 20px;
	bottom: 30px;
	z-index: 200;
	width: 48px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 30px;
	background: var(--accent-3);
	fill: var(--accent-8);
	line-height: 45px;
	text-align: center;
	opacity: 0;
	transform: scale3d(0, 0, 0);
	transition: opacity .3s ease-out, background .3s ease-out, transform .3s ease-out;
	cursor: pointer;
}

.scroll-to-top.is-visible {
	opacity: 1;
	transform: scale3d(1, 1, 1);
}

.scroll-to-top:hover {
	background: var(--accent-1);
	fill: #FFFFFF;
}

.scroll-to-top svg {
	width: 16px;
	height: 16px;
	pointer-events: none;
}

/* ==========================================================================
   ENTRANCE ANIMATIONS (animate.css keyframes, as used by the original theme)
   ========================================================================== */
.js-animate.is-pending {
	visibility: hidden;
}

.animated {
	animation-duration: 1.25s;
	animation-fill-mode: both;
}

.animated.animated-fast {
	animation-duration: .8s;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.fadeIn { animation-name: fadeIn; }

@keyframes fadeInDown {
	from { opacity: 0; transform: translate3d(0, -100%, 0); }
	to   { opacity: 1; transform: none; }
}
.fadeInDown { animation-name: fadeInDown; }

@keyframes rotateInDownLeft {
	from { transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; }
	to   { transform-origin: left bottom; transform: none; opacity: 1; }
}
.rotateInDownLeft { animation-name: rotateInDownLeft; }

@keyframes rotateInDownRight {
	from { transform-origin: right bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; }
	to   { transform-origin: right bottom; transform: none; opacity: 1; }
}
.rotateInDownRight { animation-name: rotateInDownRight; }

@keyframes rotateInUpLeft {
	from { transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; }
	to   { transform-origin: left bottom; transform: none; opacity: 1; }
}
.rotateInUpLeft { animation-name: rotateInUpLeft; }

@keyframes rotateInUpRight {
	from { transform-origin: right bottom; transform: rotate3d(0, 0, 1, -90deg); opacity: 0; }
	to   { transform-origin: right bottom; transform: none; opacity: 1; }
}
.rotateInUpRight { animation-name: rotateInUpRight; }

@keyframes bounceInDown {
	from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
	0%  { opacity: 0; transform: translate3d(0, -3000px, 0); }
	60% { opacity: 1; transform: translate3d(0, 25px, 0); }
	75% { transform: translate3d(0, -10px, 0); }
	90% { transform: translate3d(0, 5px, 0); }
	to  { transform: none; }
}
.bounceInDown { animation-name: bounceInDown; }

@keyframes bounceInUp {
	from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
	from { opacity: 0; transform: translate3d(0, 3000px, 0); }
	60%  { opacity: 1; transform: translate3d(0, -20px, 0); }
	75%  { transform: translate3d(0, 10px, 0); }
	90%  { transform: translate3d(0, -5px, 0); }
	to   { transform: translate3d(0, 0, 0); }
}
.bounceInUp { animation-name: bounceInUp; }

@keyframes pulse {
	from { transform: scale3d(1, 1, 1); }
	50%  { transform: scale3d(1.05, 1.05, 1.05); }
	to   { transform: scale3d(1, 1, 1); }
}
.pulse { animation-name: pulse; }

@keyframes wobbleHorizontal {
	16.65% { transform: translateX(8px); }
	33.3%  { transform: translateX(-6px); }
	49.95% { transform: translateX(4px); }
	66.6%  { transform: translateX(-2px); }
	83.25% { transform: translateX(1px); }
	100%   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.animated {
		animation: none !important;
	}
}

/* ==========================================================================
   RESPONSIVE — LAPTOP (<= 1366px)
   ========================================================================== */
@media (max-width: 1366px) {
	.header-desktop .header-col--logo {
		width: 17%;
		align-items: center;
	}

	.header-desktop .header-logo img {
		width: 100%;
	}

	.header-desktop .header-col--nav {
		width: 67%;
		justify-content: center;
	}

	.header-desktop .header-col--contact {
		width: 23%;
	}

	.main-nav {
		width: 661.809px;
		max-width: 661.809px;
	}

	.main-nav__link {
		padding-right: 7px;
		padding-left: 7px;
		font-size: 16px;
		letter-spacing: .5px;
	}

	.main-nav__item:not(:last-child) > .main-nav__link {
		margin-inline-end: 4.5px;
	}

	.main-nav__item:not(:first-child) > .main-nav__link {
		margin-inline-start: 4.5px;
	}

	.header-phone {
		font-size: 15px;
	}

	.header-col--contact .header-phone {
		width: 147px;
		max-width: 147px;
		margin-left: -2%;
	}

	.footer-about {
		margin: 0 0 0 1%;
	}

	.footer-logo img {
		width: 301px;
	}

	.footer-col--links .footer-col__wrap {
		padding-bottom: 24%;
	}

	.footer-heading--links {
		margin-left: -10%;
	}

	.footer-links__col--left .footer-links__wrap {
		margin-left: 6%;
	}

	.footer-col--actions .footer-col__wrap {
		padding-bottom: 78%;
	}
}

/* ==========================================================================
   RESPONSIVE — TABLET (<= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
	body {
		font-size: 16px;
	}

	h2 { font-size: 30px; line-height: 1.2em; }
	h3 { font-size: 26px; line-height: 1.2em; }
	h4 { font-size: 18px; }

	.header-desktop {
		display: none;
	}

	.header-mobile {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 99;
		padding: 30px;
		background-color: var(--accent-5);
	}

	.header-mobile .header-row {
		flex-wrap: wrap;
	}

	.header-mobile .header-col--logo {
		width: 19%;
		justify-content: flex-start;
		align-items: center;
	}

	.header-mobile .header-logo {
		margin-top: -5px;
		text-align: center;
	}

	.header-mobile .header-logo img {
		width: 100%;
	}

	.header-mobile .header-col--toggle {
		width: 31%;
		justify-content: flex-start;
		align-items: center;
	}

	.header-mobile .header-col--contact {
		width: 50%;
		justify-content: flex-end;
		align-items: center;
	}

	.header-mobile .header-phone {
		width: 147px;
		max-width: 147px;
		margin-left: -2%;
		justify-content: flex-start;
	}

	.header-mobile .header-enquire-wrap {
		width: 97px;
		max-width: 97px;
		text-align: center;
	}

	.header-placeholder {
		height: 150px;
	}

	/* Footer */
	.footer-main__row {
		flex-wrap: wrap;
	}

	.footer-social {
		justify-content: flex-end;
		gap: 0;
	}

	.footer-heading {
		line-height: 1.2em;
	}
}

/* ==========================================================================
   RESPONSIVE — TABLET (768px – 1024px) — footer only
   Reflows the footer into a 2 x 2 grid: About | Links / Address | Actions.
   Desktop (>= 1025px) and mobile (<= 767px) footer rules are untouched.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
	.footer-main {
		padding: 40px 30px 30px;
	}

	.footer-main__row {
		flex-wrap: wrap;
		row-gap: 36px;
	}

	.footer-col--about,
	.footer-col--links,
	.footer-col--address,
	.footer-col--actions {
		width: 50%;
	}

	.footer-col--spacer {
		display: none;
	}

	.footer-col__wrap,
	.footer-col--links .footer-col__wrap,
	.footer-col--address .footer-col__wrap,
	.footer-col--actions .footer-col__wrap {
		justify-content: flex-start;
		padding: 0;
	}

	/* About */
	.footer-about {
		margin: 0;
		padding: 0 30px 0 0;
	}

	.footer-about__inner {
		padding: 0;
	}

	.footer-logo {
		margin-bottom: 16px;
		text-align: left;
	}

	.footer-logo img {
		width: 100%;
		max-width: 220px;
	}

	.footer-about__text {
		text-align: left;
	}

	/* Headings */
	.footer-heading,
	.footer-heading--links,
	.footer-heading--address {
		margin: 0 0 16px;
		text-align: left;
	}

	/* Useful links */
	.footer-links {
		padding: 0;
	}

	.footer-links__col--left .footer-links__wrap,
	.footer-links__col--right .footer-links__wrap {
		justify-content: flex-start;
		margin-left: 0;
		padding: 0 10px 0 0;
	}

	/* Address */
	.footer-address {
		text-align: left;
	}

	/* Enquire button + social icons */
	.footer-enquire {
		margin-bottom: 16px;
		text-align: left;
	}

	.footer-social {
		justify-content: flex-start;
		gap: 8px;
		margin: 0 0 0 -13px;
	}
}

/* ==========================================================================
   RESPONSIVE — MOBILE (<= 767px)
   ========================================================================== */
@media (max-width: 767px) {
	body {
		font-size: 16px;
	}

	h2 { font-size: 26px; line-height: 1.2em; }
	h3 { font-size: 24px; line-height: 1.21em; }
	h4 { font-size: 16px; line-height: 1.27em; }

	.header-mobile {
		position: relative;
		padding: 20px;
	}

	.header-mobile .header-col--logo {
		width: 39%;
	}

	.header-mobile .header-col--toggle {
		width: 60%;
		justify-content: flex-end;
	}

	.header-mobile .header-col--contact {
		width: 100%;
		justify-content: space-between;
		margin-top: 10px;
	}

	.header-mobile .header-enquire-wrap {
		display: none;
	}

	.header-placeholder {
		display: none;
	}

	/* Footer scene */
	.footer-scene {
		margin: 40px 0 -89px;
		padding: 0 20px;
	}

	.footer-scene__col--tree1 { width: 30%; }
	.footer-scene__col--fox   { width: 50%; }
	.footer-scene__col--empty { display: none; }
	.footer-scene__col--tree2 { width: 20%; }

	.footer-scene__tree1 img { width: 40%; }
	.footer-scene__fox { text-align: center; }
	.footer-scene__fox img { width: 65%; }
	.footer-scene__tree2 img { width: 60%; }

	/* Footer main */
	.footer-col--about,
	.footer-col--links,
	.footer-col--spacer,
	.footer-col--address,
	.footer-col--actions {
		width: 100%;
	}

	.footer-about__inner {
		padding: 0 20px;
	}

	.footer-logo img {
		width: 100%;
	}

	.footer-col--links .footer-col__wrap {
		padding: 6% 0;
	}

	.footer-heading--links,
	.footer-heading--address {
		margin-left: 0;
	}

	.footer-links {
		padding: 0 20px;
	}

	.footer-links__col--left .footer-links__wrap {
		margin-left: 8%;
	}

	.footer-links__col--right .footer-links__wrap {
		margin-left: 20%;
	}

	.footer-address {
		text-align: center;
	}

	.footer-col--actions .footer-col__wrap {
		padding: 11% 0 0;
	}

	.footer-social {
		justify-content: center;
		gap: 50px;
		margin-top: 0;
		padding-top: 20px;
	}

	.footer-social__link {
		width: 54px;
		height: 54px;
	}

	.footer-social__link svg {
		width: 30px;
		height: 30px;
	}

	.footer-bottom__content {
		text-align: center;
	}
}