/* HAVERSHAM SHARED + INDEX PAGE STYLES */
:root {
    /* =====================================================
       GLOBAL COLORS
       ===================================================== */

    --haversham-dark-blue: #182127;
    --haversham-orange: #bf5415;
    --haversham-cream: #f3f0e7;
		--haversham-dark-cream: #d9d6ce;	
    --haversham-charcoal: #302e2c;
    --haversham-black: #222222;
    --haversham-light-gray: #e5e5e5;
    --haversham-white: #ffffff;

    /* Existing names retained for current CSS */
    --haversham-ink: var(--haversham-black);
    --haversham-accent: var(--haversham-orange);
	
 /* =====================================================
   GLOBAL FONTS
   ===================================================== */

		--font-body:
				"Baskervville",
				Georgia,
				"Times New Roman",
				serif;

		--font-heading:
				"Baskervville",
				Georgia,
				"Times New Roman",
				serif;

		--font-small-heading:
				Sora,
				Arial,
				sans-serif;

    /* =====================================================
       GLOBAL HEADING CONTROLS
       ===================================================== */

    --heading-color: var(--haversham-black);
    --heading-font-weight: 400;
    --heading-line-height: 1.15;
    --heading-margin-top: 0;
    --heading-margin-bottom: 0;

    --heading-link-color: inherit;
    --heading-link-hover-color: var(--haversham-orange);

    --heading-1-size: clamp(42px, 6vw, 82px);
    --heading-2-size: clamp(32px, 4.5vw, 58px);
    --heading-3-size: clamp(24px, 3vw, 38px);
    --heading-4-size: clamp(20px, 2.3vw, 30px);
    --heading-5-size: 21px;
    --heading-6-size: 18px;	
	

	
}

/* =========================================================
   GLOBAL PAGE DEFAULTS
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    color: var(--haversham-ink);
    background: url("../images/haversham/background/bg-tiled.jpg") repeat top left / 512px 512px;

    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
}


/* =========================================================
   HAVERSHAM HEADING DEFAULTS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
.heading-1,
.heading-2,
.heading-3,
.heading-4,
.heading-5,
.heading-6 {
    margin-top: var(--heading-margin-top);
    margin-bottom: var(--heading-margin-bottom);

    color: var(--heading-color);

    font-weight: var(--heading-font-weight);
    line-height: var(--heading-line-height);
}


/* Large headings use Baskerville */
h1,
h2,
h3,
h4,
.heading-1,
.heading-2,
.heading-3,
.heading-4 {
    font-family: var(--font-heading);
}


/* Small headings use Sora */
h5,
h6,
.heading-5,
.heading-6 {
    font-family: var(--font-small-heading);
}

/* =========================================================
   SPACERS
   ========================================================= */
		.spacer-20 {
			height: 20px;
			width: 100%;
		}

		.spacer-30 {
			height: 30px;
			width: 100%;
		}

		.spacer-40 {
			height: 40px;
			width: 100%;
		}

		.spacer-50 {
			height: 50px;
			width: 100%;
		}

		.spacer-60 {
			height: 60px;
			width: 100%;
		}

		.spacer-70 {
			height: 70px;
			width: 100%;
		}

		.spacer-80 {
			height: 80px;
			width: 100%;
	}	


/* =========================================================
   HEADING SIZES
   ========================================================= */

h1,
.heading-1 {
    font-size: var(--heading-1-size);
}

h2,
.heading-2 {
    font-size: var(--heading-2-size);
}

h3,
.heading-3 {
    font-size: var(--heading-3-size);
}

h4,
.heading-4 {
    font-size: var(--heading-4-size);
}

h5,
.heading-5 {
    font-size: var(--heading-5-size);
}

h6,
.heading-6 {
    font-size: var(--heading-6-size);
}


/* =========================================================
   HEADING LINKS
   ========================================================= */

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
.heading-1 a,
.heading-2 a,
.heading-3 a,
.heading-4 a,
.heading-5 a,
.heading-6 a {
    color: var(--heading-link-color);
    text-decoration: none;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover,
.heading-1 a:hover,
.heading-2 a:hover,
.heading-3 a:hover,
.heading-4 a:hover,
.heading-5 a:hover,
.heading-6 a:hover {
    color: var(--heading-link-hover-color);
}

/* =========================================================
   GLOBAL SLIDER SETTINGS
   ========================================================= */

.haversham-slider {

    --start-slide: 1;

    --slide-duration: 8s;
    --dissolve-duration: 1.2s;

    --title-font-family: var(--font-heading);
    --title-font-size: 66px;
    --title-font-weight: 600;
    --title-line-height: 0.95;
    --title-letter-spacing: 2px;
    --title-color: var(--haversham-white);
}

.haversham-slide .slide-title {
    text-shadow:
        var(--title-shadow-x)
        var(--title-shadow-y)
        var(--title-shadow-blur)
        var(--title-shadow-color);
}

/* =========================================================
   SHARED SLIDE DEFAULTS
   ========================================================= */

.haversham-slide {
    --background-anchor-x: 50%;
    --background-anchor-y: 50%;

    --background-base-x: -50%;
    --background-base-y: -50%;

    --background-width: 125%;
    --background-height: 125%;

    --background-size: cover;

    --background-position-x: center;
    --background-position-y: center;

    --background-origin-x: center;
    --background-origin-y: center;

    --background-start-x: 0px;
    --background-start-y: 0px;
    --background-start-scale: 1;

    --background-end-x: 0px;
    --background-end-y: 0px;
    --background-end-scale: 1;

    --background-duration: 9.2s;

    --title-width: 700px;
    --title-start-scale: 1;
    --title-end-scale: 1;
    --title-opacity: 1;
    --title-z-index: 4;
    --title-delay: 1.7s;
    --title-duration: 1s;

    --title-shadow-x: 3px;
    --title-shadow-y: 3px;
    --title-shadow-blur: 8px;
    --title-shadow-color: rgba(0, 0, 0, 0.65);
}


/* =========================================================
   SLIDE 1
   ========================================================= */

.slide-1 {
    /* BACKGROUND IMAGE */
    --background-image:
        url("../images/haversham/main-banner/cb-1000-slide-1.webp");

    /* BACKGROUND CANVAS */
    --background-anchor-x: 50%;
    --background-anchor-y: 50%;

    --background-base-x: -50%;
    --background-base-y: -50%;

    --background-width: 125%;
    --background-height: 125%;

    --background-size: cover;

    --background-position-x: center;
    --background-position-y: center;

    --background-origin-x: center;
    --background-origin-y: center;


		/* SLIDE 1 */
		--background-start-x: 0px;
		--background-start-y: -32px;
		--background-start-scale: 0.9;

		--background-end-x: 0px;
		--background-end-y: -216px;
		--background-end-scale: 1.3;


    /* TITLE */
    --title-start-x: 10%;
    --title-start-y: 10%;

    --title-end-x: 10%;
    --title-end-y: 10%;
}


/* =========================================================
   SLIDE 2
   ========================================================= */

.slide-2 {
    /* BACKGROUND IMAGE */
    --background-image:
         url("../images/haversham/main-banner/cb-1000-slide-2.webp");

    /* BACKGROUND CANVAS */
    --background-anchor-x: 50%;
    --background-anchor-y: 50%;

    --background-base-x: -50%;
    --background-base-y: -50%;

    --background-width: 125%;
    --background-height: 125%;

    --background-size: cover;

    --background-position-x: center;
    --background-position-y: center;

    --background-origin-x: center;
    --background-origin-y: center;


		/* SLIDE 2 */
		--background-start-x: 120px;
		--background-start-y: -65px;
		--background-start-scale: 0.9;

		--background-end-x: 0px;
		--background-end-y: -65px;
		--background-end-scale: 1.1;


    /* TITLE */
    --title-start-x: 10%;
    --title-start-y: 72%;

    --title-end-x: 10%;
    --title-end-y: 72%;
}


/* =========================================================
   SLIDE 3
   ========================================================= */

.slide-3 {
    /* BACKGROUND IMAGE */
    --background-image:
         url("../images/haversham/main-banner/cb-1000-slide-3.webp");


    /* BACKGROUND CANVAS */
    --background-anchor-x: 50%;
    --background-anchor-y: 50%;

    --background-base-x: -50%;
    --background-base-y: -50%;

    --background-width: 125%;
    --background-height: 150%;

    --background-size: cover;

    --background-position-x: center;
    --background-position-y: center;

    --background-origin-x: center;
    --background-origin-y: center;


		/* SLIDE 3 */
		--background-start-x: -96px;
		--background-start-y: 108px;
		--background-start-scale: 1.2;

		--background-end-x: -96px;
		--background-end-y: -108px;
		--background-end-scale: 1;


    /* TITLE */
    --title-start-x: 10%;
    --title-start-y: 80%;

    --title-end-x: 10%;
    --title-end-y: 80%;
}


/* =========================================================
   SLIDE 4
   BACKGROUND ATTACHED TO TRUE TOP
   ========================================================= */

.slide-4 {
    /* BACKGROUND IMAGE */
    --background-image:
         url("../images/haversham/main-banner/cb-1000-slide-4.webp");

    /* BACKGROUND CANVAS */
    --background-anchor-x: 50%;
    --background-anchor-y: 50%;

    --background-base-x: -50%;
    --background-base-y: -50%;

    --background-width: 175%;
    --background-height:230%;

    --background-size: cover;

    --background-position-x: center;
    --background-position-y: center;

    --background-origin-x: center;
    --background-origin-y: center;


		/* SLIDE 4 */
		--background-start-x: -130px;
		--background-start-y: -259px;
		--background-start-scale: 0.75;

		--background-end-x: -10px;
		--background-end-y: 65px;
		--background-end-scale: 0.75;


    /* TITLE */
    --title-start-x: 66%;
    --title-start-y: 10%;

    --title-end-x: 66%;
    --title-end-y: 10%;
}


/* =========================================================
   SLIDE 5
   ========================================================= */

.slide-5 {
    /* BACKGROUND IMAGE */
    --background-image:
         url("../images/haversham/main-banner/cb-1000-slide-5.webp");


    /* BACKGROUND CANVAS */
    --background-anchor-x: 50%;
    --background-anchor-y: 0%;

    --background-base-x: -50%;
    --background-base-y: 0%;

    --background-width: 130%;
    --background-height: 185%;

    --background-size: cover;

    --background-position-x: center;
    --background-position-y: top;

    --background-origin-x: center;
    --background-origin-y: top;


		/* SLIDE 5 */
		--background-start-x: -20px;
		--background-start-y: 0px;
		--background-start-scale: 0.8;

		--background-end-x: 40px;
		--background-end-y: -432px;
		--background-end-scale: 0.9;


    /* TITLE */
    --title-start-x: 62%;
    --title-start-y: 72%;

    --title-end-x: 62%;
    --title-end-y: 72%;
}


/* =========================================================
   SLIDE 6
   ========================================================= */

.slide-6 {
    /* BACKGROUND IMAGE */
    --background-image:
         url("../images/haversham/main-banner/cb-1000-slide-6.webp");


    /* BACKGROUND CANVAS */
    --background-anchor-x: 50%;
    --background-anchor-y: 50%;

    --background-base-x: -50%;
    --background-base-y: -50%;

    --background-width: 145%;
    --background-height: 175%;

    --background-size: cover;

    --background-position-x: center;
    --background-position-y: center;

    --background-origin-x: center;
    --background-origin-y: center;


		/* SLIDE 6 */
		--background-start-x: -100px;
		--background-start-y: 210px;
		--background-start-scale: 1.3;

		--background-end-x: 60px;
		--background-end-y: -60px;
		--background-end-scale: 0.7;


    /* TITLE */
    --title-start-x: 8%;
    --title-start-y: 80%;

    --title-end-x: 8%;
    --title-end-y: 80%;
}


/* =========================================================
   FULL-WIDTH SETUP
   ========================================================= */

html,
body {
    overflow-x: hidden;
}


/* =========================================================
   RESPONSIVE SLIDER SHELL
   1920 × 860 DESIGN RATIO
   ========================================================= */

.haversham-slider-shell {
    position: relative;

    width: 100vw;
    height: calc(100vw * 860 / 1920);

    margin-left: calc(50% - 50vw);

    overflow: hidden;

    background: #111111;
}


/* =========================================================
   FIXED DESKTOP DESIGN CANVAS
   1920 × 860
   ========================================================= */

.haversham-slider {
    position: absolute;

    left: 0;
    top: 0;

    width: 1920px;
    height: 860px;
    min-height: 0;
    max-height: none;

    margin: 0;

    overflow: hidden;

    background: #111111;

    isolation: isolate;

    transform-origin: top left;

    transform: scale(
        calc(100vw / 1920px)
    );
}


/* =========================================================
   SLIDE LAYERS AND DISSOLVE
   ========================================================= */

.haversham-slide {
    position: absolute;
    inset: 0;

    z-index: 1;

    overflow: hidden;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity var(--dissolve-duration) ease-in-out,
        visibility 0s linear var(--dissolve-duration);
}

.haversham-slide.is-active {
    z-index: 3;

    opacity: 1;
    visibility: visible;

    transition:
        opacity var(--dissolve-duration) ease-in-out,
        visibility 0s linear 0s;
}

.haversham-slide.is-leaving {
    z-index: 2;

    opacity: 0;
    visibility: visible;

    transition:
        opacity var(--dissolve-duration) ease-in-out,
        visibility 0s linear var(--dissolve-duration);
}


/* =========================================================
   BACKGROUND VIEWPORT
   ========================================================= */

.slide-background {
    position: absolute;
    inset: 0;

    z-index: 1;

    overflow: hidden;

    pointer-events: none;
}


/* =========================================================
   BACKGROUND IMAGE CANVAS
   ========================================================= */

.slide-background-image {
    position: absolute;

    left: var(--background-anchor-x);
    top: var(--background-anchor-y);

    width: var(--background-width);
    height: var(--background-height);

    background-image: var(--background-image);
    background-repeat: no-repeat;

    background-position:
        var(--background-position-x)
        var(--background-position-y);

    background-size: var(--background-size);

    transform-origin:
        var(--background-origin-x)
        var(--background-origin-y);

    will-change: transform;
}


/* =========================================================
   FOREGROUND CONTENT
   ========================================================= */

.slide-content {
    position: relative;

    z-index: 3;

    width: 100%;
    height: 100%;

    pointer-events: none;
}

.slide-title {
    position: absolute;

    opacity: 0;

    will-change:
        left,
        top,
        transform,
        opacity;
}


/* =========================================================
   TITLE
   ========================================================= */

.slide-title {
    left: var(--title-start-x);
    top: var(--title-start-y);

    z-index: var(--title-z-index);

    width: var(--title-width);
    max-width: calc(100% - 24px);

    margin: 0;

    font-family: var(--title-font-family) !important;
    font-size: var(--title-font-size);
    font-weight: var(--title-font-weight);
    line-height: var(--title-line-height);
    letter-spacing: var(--title-letter-spacing);

    color: var(--title-color);

    transform:
        scale(var(--title-start-scale));
}


/* =========================================================
   ACTIVE ANIMATIONS
   ========================================================= */

.haversham-slide.is-active .slide-background-image {
    animation:
        background-move
        var(--background-duration)
        linear
        forwards;
}

.haversham-slide.is-active .slide-title {
    animation:
        title-enter
        var(--title-duration)
        ease-out
        var(--title-delay)
        forwards;
}

/* =========================================================
   BACKGROUND ANIMATION
   ========================================================= */

@keyframes background-move {
    from {
        transform:
            translate(
                var(--background-base-x),
                var(--background-base-y)
            )
            translate(
                var(--background-start-x),
                var(--background-start-y)
            )
            scale(
                var(--background-start-scale)
            );
    }

    to {
        transform:
            translate(
                var(--background-base-x),
                var(--background-base-y)
            )
            translate(
                var(--background-end-x),
                var(--background-end-y)
            )
            scale(
                var(--background-end-scale)
            );
    }
}


/* =========================================================
   TITLE ANIMATION
   ========================================================= */

@keyframes title-enter {
    from {
        left: var(--title-start-x);
        top: var(--title-start-y);

        opacity: 0;

        transform:
            scale(var(--title-start-scale));
    }

    to {
        left: var(--title-end-x);
        top: var(--title-end-y);

        opacity: var(--title-opacity);

        transform:
            scale(var(--title-end-scale));
    }
}


/* =========================================================
   NAVIGATION DOTS
   ========================================================= */

.slider-navigation {
    position: absolute;

    left: 50%;
    bottom: 24px;

    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    transform: translateX(-50%);

    pointer-events: auto;
}

.slider-dot {
    width: 15px;
    height: 15px;

    padding: 0;

    border: 2px solid var(--haversham-white);
    border-radius: 50%;

    background: transparent;

    opacity: 0.9;

    cursor: pointer;

    transition:
        background-color 0.25s ease,
        opacity 0.25s ease,
        transform 0.25s ease;
}

.slider-dot:hover {
    opacity: 1;

    transform: scale(1.15);
}

.slider-dot,
.slider-dot:hover,
.slider-dot:focus,
.slider-dot:active {
    background: transparent;
}

.slider-dot.is-active,
.slider-dot.is-active:hover,
.slider-dot.is-active:focus,
.slider-dot.is-active:active {
    background: var(--haversham-white);

    opacity: 1;
}

.slider-dot:focus-visible {
    outline: 2px solid var(--haversham-white);
    outline-offset: 4px;
}





/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .slide-background-image,
    .slide-title {
        animation: none !important;
    }

    .haversham-slide.is-active .slide-background-image {
        transform:
            translate(
                var(--background-base-x),
                var(--background-base-y)
            )
            translate(
                var(--background-end-x),
                var(--background-end-y)
            )
            scale(
                var(--background-end-scale)
            );
    }

    .haversham-slide.is-active .slide-title {
        left: var(--title-end-x);
        top: var(--title-end-y);

        opacity: var(--title-opacity);

        transform:
            scale(var(--title-end-scale));
    }
}


/* =========================================================
   MOBILE SLIDER
   SQUARE DESIGN CANVAS
   ========================================================= */

@media (max-width: 767px) {

    /* SQUARE MOBILE SLIDER */
    .haversham-slider-shell {
        width: 100vw;
        height: 100vw;
    }

    .haversham-slider {
        width: 1000px;
        height: 1000px;

        transform: scale(
            calc(100vw / 1000px)
        );
    }


    /* =====================================================
       MOBILE SLIDE 1
       ===================================================== */

		.slide-1 {
			--background-width: 100%;
			--background-height: 100%;

			--background-start-x: 0px;
			--background-start-y: -60px;
			--background-start-scale: 1.05;

			--background-end-x: -150px;
			--background-end-y: -100px;
			--background-end-scale: 1.3;

			--title-start-scale: 1.2;
			--title-start-x: 10%;
			--title-start-y: 86%;

			--title-end-scale: 1.2;
			--title-end-x: 10%;
			--title-end-y: 86%;
		}

			.slide-1 .slide-title {
				width: 80%;
				margin-left: 0;
				text-align: center;
			}
	
    /* =====================================================
       MOBILE SLIDE 2
       ===================================================== */

		.slide-2 {
			--background-width: 100%;
			--background-height: 100%;

			--background-start-x: 0px;
			--background-start-y: -120px;
			--background-start-scale: 1.7;

			--background-end-x: 110px;
			--background-end-y: 0px;
			--background-end-scale: 1.2;

			--title-start-scale: 1.2;
			--title-start-x: 10%;
			--title-start-y: 79%;

			--title-end-scale: 1.2;
			--title-end-x: 10%;
			--title-end-y: 79%;
		}
	
		.slide-2 .slide-title {
				width: 80%;
				margin-left: 0;
				text-align: center;
		}	
	
    /* =====================================================
       MOBILE SLIDE 3
       ===================================================== */

		.slide-3 {
			--background-width: 100%;
			--background-height: 100%;

			--background-start-x: -160px;
			--background-start-y: -30px;
			--background-start-scale: 1.4;

			--background-end-x: 0px;
			--background-end-y: 0px;
			--background-end-scale: 1.0;

			--title-start-scale: 1.2;
			--title-start-x: 10%;
			--title-start-y: 86%;

			--title-end-scale: 1.2;
			--title-end-x: 10%;
			--title-end-y: 86%;
		}

		.slide-3 .slide-title {
				width: 80%;
				margin-left: 0;
				text-align: center;
		}	
	
    /* =====================================================
       MOBILE SLIDE 4
       ===================================================== */

.slide-4 {
	--background-width: 100%;
	--background-height: 100%;

	--background-start-x: 340px;
	--background-start-y: 170px;
	--background-start-scale: 1.8;

	--background-end-x: 340px;
	--background-end-y: -100px;
	--background-end-scale: 1.6;

	--title-start-scale: 1.2;
	--title-start-x: 10%;
	--title-start-y: 86%;

	--title-end-scale: 1.2;
	--title-end-x: 10%;
	--title-end-y: 86%;
}
	
	.slide-4 .slide-title {
    width: 80%;
    margin-left: 0;
    text-align: center;
}
	
    /* =====================================================
       MOBILE SLIDE 5
       ===================================================== */

		.slide-5 {
			--background-anchor-x: 50%;
			--background-anchor-y: 50%;

			--background-base-x: -50%;
			--background-base-y: -50%;

			--background-width: 185%;
			--background-height: 185%;

			--background-size: contain;

			--background-position-x: center;
			--background-position-y: center;

			--background-origin-x: center;
			--background-origin-y: center;

			/* BACKGROUND MOVEMENT */
			--background-start-x: 170px;
			--background-start-y: 0px;
			--background-start-scale: 1;

			--background-end-x: -160px;
			--background-end-y: 0px;
			--background-end-scale: 1;

			/* TITLE */
			--title-start-scale: 1.2;
			--title-start-x: 10%;
			--title-start-y: 79%;

			--title-end-scale: 1.2;
			--title-end-x: 10%;
			--title-end-y: 79%;
		}


		.slide-5 .slide-title {
				width: 80%;
				margin-left: 0;
				text-align: center;
		}




		/* =====================================================
		 MOBILE SLIDE 6
		 ===================================================== */

	.slide-6 {
		--background-anchor-x: 50%;
		--background-anchor-y: 50%;

		--background-base-x: -50%;
		--background-base-y: -50%;

		--background-width: 185%;
		--background-height: 185%;

		--background-size: contain;

		--background-position-x: center;
		--background-position-y: center;

		--background-origin-x: center;
		--background-origin-y: center;

		/* STATIC BACKGROUND */
		--background-start-x: -530px;
		--background-start-y: 260px;
		--background-start-scale: 1.8;

		--background-end-x: 0px;
		--background-end-y: -00px;
		--background-end-scale: 1;

		--title-start-scale: 1.2;
		--title-start-x: 10%;
		--title-start-y: 86%;

		--title-end-scale: 1.2;
		--title-end-x: 10%;
		--title-end-y: 86%;
				}		

		.slide-6 .slide-title {
				width: 80%;
				margin-left: 0;
				text-align: center;
		}
		
}

/* =========================================================
   OVERALL FOOTER PAGE BODY SETTINGS
   ========================================================= */

html,
body {
	min-height: 100%;
}

body {
	min-height: 100vh;
}

.page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.page > main {
	flex: 1 0 auto;
}

.footer-main {
	margin-top: auto;
}


/* =========================================================
   WELCOME SECTION
   ========================================================= */

.welcome-section {
    padding: 90px 24px 70px;
}

.welcome-card {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: center;

    width: min(1140px, 100%);
    margin: 0 auto;
    padding: 30px 42px 34px;

    background: var(--haversham-white);

    border: 4px solid #666666;
    border-radius: 46px;

    box-shadow:
        0 14px 26px rgba(0, 0, 0, 0.24);
}


/* =========================================================
   WELCOME MAP
   ========================================================= */

.welcome-map-column {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
}

.welcome-map-image {
    display: block;

    width: min(100%, 460px);
    height: auto;

    transform: rotate(-4deg);

    filter:
        drop-shadow(10px 10px 12px rgba(0, 0, 0, 0.22));
}


/* =========================================================
   WELCOME COPY
   ========================================================= */

.welcome-copy-column {
    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: 0;
    padding: 0px 10px 0 44px;
}

.welcome-haversham-image {
    display: block;

    width: min(230px, 52%);
    height: auto;

    margin: 0 auto 28px;
}

.haversham-about-intro {
    --text-max-width: 100%;

    --text-font-family:
        Baskerville,
        "Baskerville Old Face",
        "Times New Roman",
        serif;

    --text-font-size: 20px;
    --text-font-weight: 400;
    --text-line-height: 1.3;
    --text-letter-spacing: 0;

    --text-color: var(--haversham-ink);
    --text-align: left;

    --paragraph-spacing: 14px;

    --final-line-font-size: 22px;
    --final-line-font-weight: 400;
    --final-line-spacing-top: 16px;

    width: 100%;
    max-width: var(--text-max-width);
    margin: 0;

    color: var(--text-color);

    font-family: var(--text-font-family);
    font-size: var(--text-font-size);
    font-weight: var(--text-font-weight);
    line-height: var(--text-line-height);
    letter-spacing: var(--text-letter-spacing);
    text-align: var(--text-align);
    text-transform: none;
}

.haversham-about-intro p {
    margin: 0 0 var(--paragraph-spacing);
}

.haversham-about-intro p:last-child {
    margin-bottom: 0;
}

.haversham-about-intro .about-closing {
    margin-top: var(--final-line-spacing-top);

    font-size: var(--final-line-font-size);
    font-weight: var(--final-line-font-weight);
}


/* =========================================================
   WELCOME SECTION - TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .welcome-card {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

        padding: 24px 30px 32px;

        border-radius: 36px;
    }

    .welcome-copy-column {
        padding-left: 24px;
    }

    .welcome-haversham-image {
        width: min(190px, 46%);

        margin-bottom: 22px;
    }

    .haversham-about-intro {
        --text-font-size: 19px;
        --text-line-height: 1.4;
        --paragraph-spacing: 16px;

        --final-line-font-size: 20px;
        --final-line-spacing-top: 20px;
    }
}


/* =========================================================
   WELCOME SECTION - MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .welcome-section {
        padding: 34px 22px 46px;
    }

    .welcome-card {
        grid-template-columns: 1fr;

        padding: 24px 20px 30px;

        border-width: 3px;
        border-radius: 28px;
    }


		.welcome-map-column {
			display: none;
		}


    .welcome-haversham-image {
        width: min(225px, 60%);

        margin-bottom: 24px;
    }

    .haversham-about-intro {
        --text-font-size: 18px;
        --text-line-height: 1.45;
        --paragraph-spacing: 17px;

        --final-line-font-size: 19px;
        --final-line-spacing-top: 22px;
    }
}

/* =========================================================
   ABOUT SECTION
   ========================================================= */

.about-section {
    padding: 90px 24px 70px;
}

.about-card {
    display: block;

    width: min(1140px, 100%);
    margin: 0 auto;
    padding: 54px 64px;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.55),
            rgba(255, 255, 255, 0.55)
        ),
        url("../images/haversham/maps/white-wide-map.jpg")
        center center / cover no-repeat;

    border: 4px solid #666666;
    border-radius: 46px;

    box-shadow:
        0 14px 26px rgba(0, 0, 0, 0.24);
}

.about-copy-column {
    width: min(920px, 100%);
    margin: 0 auto;
    padding: 38px 46px;

    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.about-haversham-image {
    display: block;

    width: min(230px, 52%); /* MMH Side Bar Width */
    height: auto;

    margin: 0 auto 28px;
}

.about-intro {
    width: 100%;
    margin: 0;

    color: var(--haversham-ink);

    font-family:
        Baskerville,
        "Baskerville Old Face",
        "Times New Roman",
        serif;

    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
}

.about-intro p {
    margin: 0 0 14px;
}

.about-intro p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   ABOUT SECTION — TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .about-card {
        padding: 38px 36px;
        border-radius: 36px;
    }

    .about-copy-column {
        padding: 34px 36px;
    }

    .about-haversham-image {
        width: min(190px, 46%);
        margin-bottom: 22px;
    }

    .about-intro {
        font-size: 19px;
        line-height: 1.4;
    }
}


/* =========================================================
   ABOUT SECTION — MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .about-section {
        padding: 34px 16px 46px;
    }

    .about-card {
        padding: 24px 18px;

        border-width: 3px;
        border-radius: 28px;
    }

.about-copy-column {
    padding: 28px 22px;
    border-radius: 0;
}

    .about-haversham-image {
        width: min(205px, 60%);
        margin-bottom: 24px;
    }

    .about-intro {
        font-size: 18px;
        line-height: 1.45;
    }
}

/* =========================================================
   ARTIST'S TOOLKIT — MAIN PAGE POSITIONING
   ========================================================= */

.toolkit-position-main {
	/* Main-page spacing adjustments */
}


/* =========================================================
   TOOLKIT HEADER — 
   ========================================================= */

.toolkit-section {
    font-family: var(--font-body);
}

.toolkit-inner {
    width: min(100%, 1200px);
}

.toolkit-header {
    margin: 60px auto 62px;
    text-align: center;
}

.toolkit-header h2 {
    margin: 0 0 14px;
    font-family: var(--font-heading);
    font-size: clamp(30px, 4vw, 60px);
    font-weight: 600;
		color: #222222;
    line-height: 1.05;
    letter-spacing: 0;
}

.toolkit-divider {
    display: block;
    width: min(100%, 980px);
    height: auto;
    margin: 0 auto;
}


/* =========================================================
   ARTIST'S TOOLKIT OUTER CONTAINER
   ========================================================= */

.toolkit-card {
    width: min(1140px, 100%);
    margin: 0 auto;
    padding: 90px 42px 34px;

    background: #ffffff;

    border: 4px solid #666666;
    border-radius: 46px;

    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.24);

    box-sizing: border-box;
}


/* =========================================================
   TOOLKIT BANNER
   ========================================================= */

.toolkit-card .gallery-banner-wrap {
    width: 100%;
    margin: 0 auto 36px;
    text-align: center;
}

.toolkit-card .gallery-banner {
    display: block;

    width: min(100%, 760px);
    height: auto;

    margin: 0 auto;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
    .toolkit-card {
        width: 100%;
        padding: 36px 24px 24px;
        border-radius: 32px;
    }

    .toolkit-card .gallery-banner-wrap {
        margin-bottom: 28px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
    .toolkit-card {
        width: 96%;
        padding: 26px 14px 18px;

        border-width: 3px;
        border-radius: 22px;

        box-shadow:
            0 10px 22px rgba(0, 0, 0, 0.20);
    }

    .toolkit-card .gallery-banner-wrap {
        margin-bottom: 22px;
    }

    .toolkit-card .gallery-banner {
        width: 100%;
    }
}


/* =========================================================
   ARTIST'S TOOLKIT — VISUAL ROW AND COPY
   ========================================================= */

.toolkit-visual-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
}

.toolkit-colonel-column,
.toolkit-products-column {
    flex: 0 1 50%;
}

.toolkit-colonel-column {
    text-align: center;
}


.toolkit-colonel-image,
.toolkit-products-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.toolkit-colonel-image {
    width: min(60%, 260px);
}

.toolkit-products-image {
    width: min(100%, 660px);
}

@media (max-width: 700px) {
    .toolkit-visual-row {
        flex-direction: column;
        gap: 24px;
    }

    .toolkit-colonel-column,
    .toolkit-products-column {
        flex: 0 1 auto;
        width: 100%;
    }
	
	
}

.toolkit-feature {
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:36px;
    width:min(100%,900px);
    margin:0 auto 30px;
}

.toolkit-colonel {
    width:min(30%,240px);
    height:auto;
}

.toolkit-feature .toolkit-image {
    width:min(66%,620px);
    margin:0;
}

.toolkit-copy {
	  margin-top: 20px;
    margin-bottom:6px;
	  margin-left: 26px;
	  margin-right: 26px;
	  font-size: clamp(18px, 1.75vw, 20px);
}


@media (max-width:767px) {
    .toolkit-feature { gap:14px; }
    .toolkit-colonel { width:30%; }
    .toolkit-feature .toolkit-image { width:66%; }


}


/* =========================================================
   TOOLKIT TABLE CONTROLS
   Replace the entire existing table CSS with this section
   ========================================================= */

.custom-table {
    /* Overall table */
    --table-width: 100%;
    --table-max-width: 1200px;

    /* Three-column widths */
    --column-1-width: 20%;
    --column-2-width: 40%;
    --column-3-width: 40%;

    /* Typography */
    --table-font-family: var(--font-body);

    --table-font-size: 18px;
    --table-font-weight: 400;
    --table-line-height: 1.35;
    --table-letter-spacing: 0px;
    --table-text-color: #222222;

    /* Cells */
    --cell-padding: 12px;
    --cell-background: transparent;

    /* Lists */
    --bullet-padding-left: 22px;
    --bullet-item-spacing: 5px;
    --bullet-style: disc;

    /* Borders */
    --outer-border-width: 2px;
    --outer-border-style: solid;
    --outer-border-color: #333333;

    --cell-border-width: 1px;
    --cell-border-style: solid;
    --cell-border-color: #999999;

    --table-border-radius: 40px;

    width: var(--table-width);
    max-width: var(--table-max-width);
    margin: 0 auto;

    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;

    color: var(--table-text-color);
    font-family: var(--table-font-family);
    font-size: var(--table-font-size);
    font-weight: var(--table-font-weight);
    line-height: var(--table-line-height);
    letter-spacing: var(--table-letter-spacing);

    border:
        var(--outer-border-width)
        var(--outer-border-style)
        var(--outer-border-color);

    border-radius: var(--table-border-radius);
    overflow: hidden;
}


/* =========================================================
   TABLE WRAPPER
   ========================================================= */

.custom-table-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}


/* =========================================================
   COLUMN WIDTHS
   ========================================================= */

.custom-table col:nth-child(1) {
    width: var(--column-1-width);
}

.custom-table col:nth-child(2) {
    width: var(--column-2-width);
}

.custom-table col:nth-child(3) {
    width: var(--column-3-width);
}


/* =========================================================
   TABLE HEADER CELLS
   ========================================================= */

.custom-table th {
    padding: var(--cell-padding);

    color: var(--table-text-color);
    background: var(--cell-background);

    font-family: var(--table-font-family);
    font-size: var(--table-font-size);
    font-weight: 700;
    line-height: var(--table-line-height);
    letter-spacing: 0;

    text-align: center;
    vertical-align: middle;

    border-right:
        var(--cell-border-width)
        var(--cell-border-style)
        var(--cell-border-color);

    border-bottom:
        var(--cell-border-width)
        var(--cell-border-style)
        var(--cell-border-color);

    box-sizing: border-box;
}

.custom-table th:last-child {
    border-right: 0;
}


/* =========================================================
   BODY CELLS
   ========================================================= */

.custom-table td {
    height: auto;
    min-height: 0;

    padding: var(--cell-padding);

    color: var(--table-text-color);
    background: var(--cell-background);

    font-family: var(--table-font-family);
    font-size: var(--table-font-size);
    font-weight: var(--table-font-weight);
    line-height: var(--table-line-height);
    letter-spacing: var(--table-letter-spacing);

    text-align: left;
    vertical-align: top;

    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;

    border-right:
        var(--cell-border-width)
        var(--cell-border-style)
        var(--cell-border-color);

    border-bottom:
        var(--cell-border-width)
        var(--cell-border-style)
        var(--cell-border-color);

    box-sizing: border-box;
}

.custom-table td:last-child {
    border-right: 0;
}

.custom-table tr:last-child td {
    border-bottom: 0;
}


/* =========================================================
   SKILL LEVEL COLUMN
   ========================================================= */

.custom-table td:nth-child(1) {
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0;

    text-align: center;
    vertical-align: middle;
}


/* =========================================================
   SUPPLIES AND PURPOSE COLUMNS
   ========================================================= */

.custom-table td:nth-child(2),
.custom-table td:nth-child(3) {
    text-align: left;
    vertical-align: top;
}


/* =========================================================
   PRODUCT LISTS
   ========================================================= */

.custom-table ul {
    margin: 0;
    padding-left: var(--bullet-padding-left);

    list-style-type: var(--bullet-style);
}

.custom-table li {
    margin: 0 0 var(--bullet-item-spacing);
    padding: 0;
}

.custom-table li:last-child {
    margin-bottom: 0;
}

.custom-table .product-list a {
    color: #0066cc;
    text-decoration: underline;
}

.custom-table .product-list a:hover {
    color: #003f88;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1201px) {
    .custom-table {
        --table-max-width: 1200px;
        --table-font-size: 18px;
        --cell-padding: 12px;
    }
}


/* =========================================================
   STANDARD DESKTOP / LARGE TABLET
   ========================================================= */

@media (max-width: 1200px) {
    .custom-table {
        --table-font-size: 17px;
        --cell-padding: 10px;

        --column-1-width: 20%;
        --column-2-width: 40%;
        --column-3-width: 40%;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
    .custom-table {
        --table-font-size: 14px;
        --table-line-height: 1.25;
        --cell-padding: 8px;

        --column-1-width: 22%;
        --column-2-width: 39%;
        --column-3-width: 39%;

        --bullet-padding-left: 18px;
        --bullet-item-spacing: 4px;

        --table-border-radius: 28px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {
    .custom-table-wrapper {
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    .custom-table {
        --table-width: 100%;
        --table-max-width: 100%;

        --table-font-size: 10px;
        --table-line-height: 1.2;
        --cell-padding: 6px 4px;

        --column-1-width: 22%;
        --column-2-width: 39%;
        --column-3-width: 39%;

        --bullet-padding-left: 14px;
        --bullet-item-spacing: 3px;

        --outer-border-width: 1px;
        --cell-border-width: 1px;
        --table-border-radius: 18px;

        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .custom-table tr,
    .custom-table th,
    .custom-table td {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .custom-table th,
    .custom-table td {
        padding: var(--cell-padding);

        font-size: var(--table-font-size);
        line-height: var(--table-line-height);
        letter-spacing: 0;

        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .custom-table td:nth-child(1) {
        vertical-align: middle;
    }

    .custom-table ul {
        margin: 0;
        padding-left: var(--bullet-padding-left);
    }
}


/* =========================================================
   NARROW MOBILE
   ========================================================= */

@media (max-width: 420px) {
    .custom-table {
        --table-font-size: 9px;
        --cell-padding: 5px 3px;

        --column-1-width: 23%;
        --column-2-width: 38.5%;
        --column-3-width: 38.5%;

        --bullet-padding-left: 12px;
        --table-border-radius: 14px;
    }
}


/* =========================================================
   TOOLKIT AFFILIATE LINKS AND DISCLOSURE
   ========================================================= */

.product-list a {
    color: #0066cc;
    text-decoration: underline;
}

.product-list a:hover,
.product-list a:focus {
    color: #003f88;
}

.toolkit-copy .toolkit-intro + .toolkit-intro {
    margin-top: 12px;
}

.toolkit-disclosure {
    max-width: 1100px;
    margin: 44px auto 0;
    padding: 0 18px;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
}

@media (max-width: 600px) {
    .toolkit-disclosure {
        margin-top: 28px;
        font-size: 11px;
    }
}


/* =========================================================
   NAVBAR — GLOBAL SETTINGS
   ========================================================= */

.main-nav {
    position: relative;
	  height: 70px;
    z-index: 1000;
}

.main-nav .rd-navbar {

    background: var(--haversham-cream) !important;

    font-family:
        "Baskerville Old Face",
        Baskerville,
        "Times New Roman",
        serif;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.14) !important;
}

.main-nav .rd-navbar-inner,
.main-nav .rd-navbar-panel,
.main-nav .rd-navbar-nav-wrap {
    background: var(--haversham-cream) !important;
}

.main-nav .rd-navbar-inner {
    width: 100%;
    min-height: 70px !important;
}

.main-nav .rd-navbar-panel {
    display: flex;
    align-items: center;
    min-height: 70px !important;
    padding: 0 !important;
}


/* =========================================================
   NAVBAR LOGO
   ========================================================= */

.main-nav .rd-navbar-brand,
.main-nav .rd-navbar-brand > a {
    display: flex;
    align-items: center;
}

.main-nav .brand-logo {
    display: block;
    width: auto;
    height: 50px !important;
    max-height: 50px !important;
}

.rd-navbar-brand img {
    transform-origin: center center;
    transition: transform 0.3s ease;
}

.rd-navbar-brand:hover img,
.rd-navbar-brand:focus-visible img {
    transform: scale(1.05);
}

.main-nav .rd-navbar-contact-link {
    transform-origin: center center;

    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.main-nav .rd-navbar-contact-link:hover,
.main-nav .rd-navbar-contact-link:focus-visible {
    transform: scale(1.05);
}


/* =========================================================
   BREADCRUMBS WITH RETURN LINK
   ========================================================= */

.breadcrumb-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;

    width: min(100%, 1400px);
    margin: 0 auto;
    padding: 14px 24px;

    box-sizing: border-box;
}

.breadcrumbs {
    width: auto;
    padding: 0;

    background: transparent;
    border-bottom: 0;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    width: auto;
    margin: 0;
    padding: 0;

    list-style: none;
}

.breadcrumbs li {
    display: flex;
    align-items: center;

    margin: 0;
    padding: 0;

    color: var(--haversham-charcoal);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
}

.breadcrumbs li:not(:last-child)::after {
    content: "›";

    display: inline-block;
    margin: 0 12px;

    color: var(--haversham-orange);
    font-size: 20px;
    line-height: 1;
}

.breadcrumbs a {
    color: var(--haversham-charcoal);
    text-decoration: none;

    transition: color 0.25s ease;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
    color: var(--haversham-orange);
}

.breadcrumbs li[aria-current="page"] {
    color: var(--haversham-orange);
    font-weight: 600;
}


/* =========================================================
   BREADCRUMB RETURN LINK
   ========================================================= */

.breadcrumb-return {
    flex: 0 0 auto;

    width: auto;
    margin: 0;
    padding: 0;
}

.breadcrumb-row .breadcrumbs,
.breadcrumb-row .breadcrumb-return {
    display: flex;
    align-items: center;
}

.breadcrumb-return a {
    display: inline-block;

    color: var(--haversham-charcoal);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.breadcrumb-return a:hover,
.breadcrumb-return a:focus-visible {
    color: var(--haversham-orange);
    transform: translateX(-3px);
}


/* =========================================================
   BREADCRUMBS WITH RETURN LINK — MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .breadcrumb-row {
        flex-direction: column;
				align-items: center;
				justify-content: center;			
        gap: 8px;

        padding: 11px 16px;
    }

    .breadcrumbs li {
        font-size: 14px;
    }

    .breadcrumbs li:not(:last-child)::after {
        margin: 0 8px;
        font-size: 17px;
    }

    .breadcrumb-return a {
        font-size: 14px;
    }
}


/* =========================================================
   DESKTOP NAVBAR — 1200PX AND ABOVE
   ========================================================= */

@media (min-width: 1200px) {

	    .main-nav .rd-navbar-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
	
.main-nav {
	--navbar-edge-space:
			clamp(
					50px,
					calc(20.8333vw - 200px),
					200px
			);

    /* Fixed width for both logo and Suggestions columns */
    --navbar-side-width: 190px;

    /* Flexible space between the center menu items */
    --navbar-menu-gap:
        clamp(
            60px,
            calc(3.4722vw + 18.3333px),
            85px
        );
}

    .main-nav,
    .main-nav .rd-navbar,
    .main-nav .rd-navbar-inner,
    .main-nav .rd-navbar-panel,
    .main-nav .rd-navbar-nav-wrap,
    .main-nav .rd-navbar-nav {
        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;
    }

    .main-nav .rd-navbar-inner {
        display: grid !important;
        grid-template-columns:
            var(--navbar-side-width)
            minmax(0, 1fr)
            var(--navbar-side-width) !important;
        grid-template-rows: 70px !important;
        align-items: center !important;

        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 var(--navbar-edge-space) !important;

        box-sizing: border-box !important;
    }

    .main-nav .rd-navbar-panel {
        grid-column: 1 !important;
        grid-row: 1 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        position: static !important;
        float: none !important;

        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .main-nav .rd-navbar-nav-wrap {
        grid-column: 2 !important;
        grid-row: 1 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        position: static !important;
        float: none !important;
        clear: none !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .main-nav .rd-navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;

        position: static !important;
        float: none !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        gap: var(--navbar-menu-gap) !important;
    }

    .main-nav .rd-nav-item {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;

        position: relative !important;
        float: none !important;

        height: 70px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .main-nav .rd-nav-link,
    .main-nav .rd-navbar-contact-link {
        position: relative !important;

        display: flex !important;
        align-items: center !important;

        height: 70px !important;
        min-height: 70px !important;
        margin: 0 !important;
        padding: 0 !important;

        color: var(--haversham-black) !important;
        background: transparent !important;

        font-family:
            "Baskerville Old Face",
            Baskerville,
            "Times New Roman",
            serif !important;

        font-size: clamp(17px, 1.15vw, 20px) !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        letter-spacing: clamp(0.4px, 0.06vw, 1px) !important;

        text-transform: none !important;
        text-decoration: none !important;
        white-space: nowrap !important;

        box-shadow: none !important;
    }

    .main-nav .rd-nav-link:hover,
    .main-nav .rd-nav-item.active > .rd-nav-link,
    .main-nav .rd-navbar-contact-link:hover,
    .main-nav .rd-navbar-contact-link:focus {
        color: var(--haversham-accent) !important;
        background: transparent !important;
    }

    .main-nav .rd-nav-link::before,
    .main-nav .rd-nav-item::after,
    .main-nav .rd-navbar-contact::before,
    .main-nav .rd-navbar-contact::after,
    .main-nav .rd-navbar-contact-link::before,
    .main-nav .rd-navbar-contact-link::after {
        display: none !important;
        content: none !important;
    }

		.main-nav .rd-nav-link::after {
				content: "" !important;

				position: absolute !important;
				right: 0 !important;
				bottom: 18px !important;
				left: 0 !important;

				display: block !important;
				width: 100% !important;
				height: 3px !important;

				background: var(--haversham-accent) !important;

				opacity: 1 !important;
				visibility: visible !important;

				transform: scaleX(0) !important;
				transform-origin: left center !important;

				transition: transform 0.3s ease !important;
		}

		.main-nav .rd-nav-link:hover::after,
		.main-nav .rd-nav-item.active > .rd-nav-link::after,
		.main-nav .rd-nav-item.is-selected > .rd-nav-link::after {
				height: 3px !important;
				transform: scaleX(1) !important;
		}

    .main-nav .rd-navbar-contact {
        grid-column: 3 !important;
        grid-row: 1 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        position: static !important;
        float: none !important;
        clear: none !important;

        width: auto !important;
        min-width: 0 !important;
        height: 70px !important;
        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        box-shadow: none !important;
    }
}


/* =========================================================
   DESKTOP DROPDOWNS
   Original style.css spacing with Haversham colors
   ========================================================= */

@media (min-width: 1200px) {

    /* Dropdown container size and position */
    .main-nav .rd-navbar-static .rd-navbar-nav > li > .rd-navbar-dropdown,
    .main-nav .rd-navbar-fullwidth .rd-navbar-nav > li > .rd-navbar-dropdown {
        position: absolute;

        left: 50%;
        width: 330px;

        margin-top: 10px;
        margin-left: -165px;

        padding: 23px 20px 28px;

        background: var(--haversham-cream) !important;

        text-align: left;

        box-sizing: border-box;
        z-index: 1001;
    }

    /* Individual dropdown rows */
    .main-nav .rd-navbar-static .rd-navbar-dropdown > li,
    .main-nav .rd-navbar-fullwidth .rd-navbar-dropdown > li {
        display: block;
        margin: 0;
        padding: 0;
    }

    /* Divider between dropdown rows */
    .main-nav .rd-navbar-static .rd-navbar-dropdown > li + li,
    .main-nav .rd-navbar-fullwidth .rd-navbar-dropdown > li + li {
        border-top: 1px solid rgba(34, 34, 34, 0.16);
    }

    /* Dropdown links */
    .main-nav .rd-navbar-static .rd-navbar-dropdown > li > a,
    .main-nav .rd-navbar-fullwidth .rd-navbar-dropdown > li > a {
        display: block;

        width: 100%;
        margin: 0;
        padding: 8px 0 !important;

        color: var(--haversham-black) !important;
        background: transparent !important;

        font-family:
            "Baskerville Old Face",
            Baskerville,
            "Times New Roman",
            serif !important;

        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
        letter-spacing: 0 !important;

        text-align: left;
        text-transform: none !important;
        text-decoration: none !important;
        white-space: nowrap !important;

        box-sizing: border-box;
    }

	
    /* Dropdown hover */
    .main-nav .rd-navbar-static .rd-navbar-dropdown > li > a:hover,
    .main-nav .rd-navbar-static .rd-navbar-dropdown > li > a:focus,
    .main-nav .rd-navbar-fullwidth .rd-navbar-dropdown > li > a:hover,
    .main-nav .rd-navbar-fullwidth .rd-navbar-dropdown > li > a:focus {
        color: var(--haversham-accent) !important;
        background: transparent !important;
    }
}


	
		/* =========================================================
		 SIDEBAR SETTINGS

		 ========================================================= */


.main-nav .rd-navbar-fixed .rd-navbar-nav li .rd-navbar-submenu-toggle {
    top: 50% !important;
    transform: translateY(-50%);
}

.main-nav .rd-navbar-fixed .rd-navbar-nav li.opened > .rd-navbar-submenu-toggle {
    transform: translateY(-50%) rotateX(180deg);
}


.main-nav .rd-navbar-fixed .rd-navbar-nav li .rd-navbar-submenu-toggle {
    top: 50% !important;
    transform: translateY(-50%);
}

.main-nav .rd-navbar-fixed .rd-navbar-nav li.opened > .rd-navbar-submenu-toggle {
    transform: translateY(-50%) rotateX(180deg);
}



/* =========================================================
   TABLET / MOBILE NAVBAR — BELOW 1200PX
   ========================================================= */

@media (max-width: 1199px) {


    /* =====================================================
       1. NAVBAR HEIGHT / STRUCTURE
       ===================================================== */

    .main-nav .rd-navbar-inner {
        min-height: 70px !important;
        padding: 0 !important;
    }

    .main-nav .rd-navbar-panel {
        min-height: 70px !important;
    }

    .main-nav .rd-navbar-nav-wrap {
        display: block;
        background: transparent !important;
    }

    .main-nav .rd-navbar-nav {
        display: block;
    }


    /* =====================================================
       2. LOGO
       ===================================================== */

    .main-nav .brand-logo {
        height: 46px !important;
        max-height: 46px !important;
    }


    /* =====================================================
       3. MAIN MENU ITEMS
       ===================================================== */

    .main-nav .rd-nav-item {
        margin: 0 !important;
    }

    .main-nav .rd-nav-link {
        min-height: 48px;

        padding: 10px 22px !important;

        color: var(--haversham-black) !important;

        font-size: 18px !important;
        font-weight: 600 !important;

        text-transform: none !important;
    }

    .main-nav .rd-nav-link:hover,
    .main-nav .rd-nav-item.active > .rd-nav-link {
        color: var(--haversham-accent) !important;
        background: var(--haversham-cream) !important;
    }

    .main-nav .rd-nav-link::before,
    .main-nav .rd-nav-link::after,
    .main-nav .rd-nav-item::after {
        display: none !important;
    }


    /* =====================================================
       4. SUBMENU ITEMS
       ===================================================== */

    .main-nav .rd-navbar-fixed
    .rd-navbar-dropdown > li > a {
        padding: 12px 22px 18px 36px !important;
        line-height: 0.5 !important;
    }


    /* =====================================================
       5. DROPDOWN CIRCLE POSITION
       ===================================================== */

    .main-nav .rd-navbar-fixed
    .rd-navbar-nav
    .rd-navbar-submenu {
        position: relative;
    }

    .main-nav .rd-navbar-fixed
    .rd-navbar-nav
    .rd-navbar-submenu > .rd-navbar-submenu-toggle {
        top: 30px !important;
        transform: translateY(-52%) !important;
    }

    .main-nav .rd-navbar-fixed
    .rd-navbar-nav
    .rd-navbar-submenu.opened > .rd-navbar-submenu-toggle {
        transform:
            translateY(-65%)
            rotateX(180deg) !important;
    }


    /* =====================================================
       6. SLIDE-OUT MENU PANEL
       ===================================================== */

    .main-nav .rd-navbar-fixed .rd-navbar-nav {
        position: fixed !important;

        top: 30px !important;
        right: 0 !important;
        bottom: auto !important;
        left: auto !important;

        width: 250px !important;

        height: calc(100dvh - 70px) !important;
        max-height: calc(100dvh - 70px) !important;

        margin: 0 !important;
        padding-top: 0 !important;

        background: var(--haversham-dark-cream) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        transform: translateX(100%) !important;

        transition:
            transform 0.3s ease !important;
    }

    .main-nav .rd-navbar-fixed.active .rd-navbar-nav {
        transform: translateX(0) !important;
    }


    /* =====================================================
       7. NAVBAR BACKGROUND / STACKING
       ===================================================== */

    .main-nav .rd-navbar-fixed .rd-navbar-panel::before {
        content: "";

        position: absolute;
        inset: 0;

        background: rgba(243, 240, 231, 0.5);

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

    .main-nav .rd-navbar-fixed .rd-navbar-brand {
        position: relative;
        z-index: 1;
    }

    .main-nav .rd-navbar-fixed .rd-navbar-toggle {
        z-index: 2;
    }
}

    .main-nav .rd-navbar-fixed .rd-navbar-nav {
        position: fixed !important;

        top: 30px !important; /* MMH Side Menu Items Y Position Start */
        right: 0 !important;
        bottom: auto !important;
        left: auto !important;

        width: 250px !important; /* MMH Side Menu Width */
        height: calc(100dvh - 70px) !important;
        max-height: calc(100dvh - 70px) !important;

        margin: 0 !important;
        padding-top: 0px !important;

        background: var(--haversham-dark-cream) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        transform: translateX(100%) !important;
        transition: transform 0.3s ease !important;
    }

    .main-nav .rd-navbar-fixed.active .rd-navbar-nav {
        transform: translateX(0) !important;
    }

    .main-nav .rd-navbar-fixed .rd-navbar-panel::before {
        content: "";

        position: absolute;
        inset: 0;

        background: rgba(243, 240, 231, 0.5);
        pointer-events: none;
        z-index: 0;
    }

    .main-nav .rd-navbar-fixed .rd-navbar-brand {
        position: relative;
        z-index: 1;
    }

    .main-nav .rd-navbar-fixed .rd-navbar-toggle {
        z-index: 2;
    }

/* =========================================================
   MOBILE DROPDOWN — CLICK / TOUCH OPEN
   ========================================================= */

/* Closed state */
.main-nav .rd-navbar-fixed
.rd-navbar-nav
.rd-navbar-submenu > .rd-navbar-dropdown {
    display: block !important;
    max-height: 0;
    opacity: 0;
    overflow: hidden;

    transition:
        max-height 0.35s ease,
        opacity 0.25s ease;
}

/* Open state */
.main-nav .rd-navbar-fixed
.rd-navbar-nav
.rd-navbar-submenu.opened > .rd-navbar-dropdown {
    max-height: 300px;
    opacity: 1;
}

/* Highlight parent while open */
.main-nav .rd-navbar-fixed
.rd-navbar-nav
.rd-navbar-submenu.opened {
    background: var(--haversham-cream) !important;
}

.main-nav .rd-navbar-fixed
.rd-navbar-nav
.rd-navbar-submenu.opened > .rd-nav-link {
    color: var(--haversham-accent) !important;
    background: transparent !important;
}


/* =========================================================
   STICKY NAVBAR
   ========================================================= */

.main-nav .rd-navbar--is-stuck,
.main-nav.rd-navbar--is-stuck {
    top: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
    animation: none !important;

    background: var(--haversham-cream) !important;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.12) !important;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.main-nav .rd-navbar--is-stuck .rd-navbar-inner,
.main-nav .rd-navbar--is-stuck .rd-navbar-panel,
.main-nav .rd-navbar--is-stuck .rd-navbar-nav-wrap {
    background: transparent !important;
}

.main-nav .rd-navbar--is-clone,
.main-nav.rd-navbar--is-clone {
    display: none !important;
}



/* =========================================================
   SCROLL TO TOP
   ADD ONCE AT THE END OF haversham-main.css
   ========================================================= */

#haversham-scroll-top {
    position: fixed !important;
    right: 28px !important;
    bottom: 28px !important;
    z-index: 2147483647 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: var(--haversham-accent) !important;
    color: var(--haversham-white) !important;

    font-family: Arial, sans-serif !important;
    font-size: 22px !important;
    line-height: 1 !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    cursor: pointer !important;
    transform: translateY(14px) !important;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.3) !important;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease,
        background-color 0.3s ease !important;
}

#haversham-scroll-top.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

#haversham-scroll-top:hover,
#haversham-scroll-top:focus-visible {
    background: var(--haversham-black) !important;
}




/* =========================================================
   MAIN FOOTER
   ========================================================= */

.footer-main,
.footer-main-content {
    background-color: var(--haversham-cream);
    color: var(--haversham-text);
}

.footer-main-content {
    padding: 20px 20px 20px;
}

.footer-main .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.footer-brand-link {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    margin: 0 0 22px;
}

.footer-brand-logo {
    display: block;

    width: 160px;
    max-width: 80%;
    height: auto;
    margin: 0;

    transform-origin: center center;
    transition: transform 0.3s ease;
}

.footer-brand-link:hover .footer-brand-logo,
.footer-brand-link:focus-visible .footer-brand-logo {
    transform: scale(1.05);
}


.footer-main-copyright {
    margin: 0;
    color: var(--haversham-text);
}

.footer-main,
.footer-main-content,
.page-footer {
    border-top: 0 !important;
    outline: none !important;
}

.footer-main {
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.16);
    position: relative;
    z-index: 2;
}


.tiled-background {
	background-color: #f4eedf;
	background-image: url("../images/haversham/background/bg-tiled.jpg");
	background-repeat: repeat;
	background-position: top left;
	background-size: 512px 512px;
}