/*FONTS*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/*VARIABLES*/
:root {
    --font-header: 'Roboto', sans-serif;
    --font-body: 'system-ui', sans-serif;
    /*--color-theme: #95BF47;*/
    --color-theme: #4C8800;
    --color-theme: #002C43;
    --color-dark: #242424;
    --color-light: #f5f5f5;
    --color-theme-light-10: color-mix(in srgb, var(--color-theme), white 10%);
    --color-theme-light-20: color-mix(in srgb, var(--color-theme), white 20%);
    --color-theme-light-30: color-mix(in srgb, var(--color-theme), white 30%);
    --color-theme-light-40: color-mix(in srgb, var(--color-theme), white 40%);
    --color-theme-light-50: color-mix(in srgb, var(--color-theme), white 50%);
    --color-theme-light-60: color-mix(in srgb, var(--color-theme), white 60%);
    --color-theme-light-70: color-mix(in srgb, var(--color-theme), white 70%);
    --color-theme-light-80: color-mix(in srgb, var(--color-theme), white 80%);
    --color-theme-light-90: color-mix(in srgb, var(--color-theme), white 90%);
    --color-theme-dark-10: color-mix(in srgb, var(--color-theme), black 10%);
    --color-theme-dark-20: color-mix(in srgb, var(--color-theme), black 20%);
    --color-theme-dark-30: color-mix(in srgb, var(--color-theme), black 30%);
    --color-theme-dark-40: color-mix(in srgb, var(--color-theme), black 40%);
    --color-theme-dark-50: color-mix(in srgb, var(--color-theme), black 50%);
    --color-theme-dark-60: color-mix(in srgb, var(--color-theme), black 60%);
    --color-theme-dark-70: color-mix(in srgb, var(--color-theme), black 70%);
    --color-theme-dark-80: color-mix(in srgb, var(--color-theme), black 80%);
    --color-theme-dark-90: color-mix(in srgb, var(--color-theme), black 90%);
    --site-width: 1400px;
    --site-width-narrow: 800px;
    /*Animations*/
    --reveal-duration: .7s;
    --reveal-ease: ease-out;
}

/*CSS RESET*/
html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

* {
    margin: 0;
    padding: 0;
}

body {
    line-height: 1.5;
}

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

input, button, textarea, select {
    font: inherit;
    width: 100%;
}

/*GLOBAL STYLES*/
html {
    background-color: var(--color-theme);
    background-image: url(https://denverwhite.co.uk/textures/diamond-upholstery.png);
    scroll-behavior: smooth;
}

.site-layout {
    background: var(--color-light);
    font-family: var(--font-body);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

section {
    width: 100%;
    max-width: var(--site-width);
    margin: auto;
    padding: 2rem 0;
}
section.full-width {
    max-width: 100%;
}
section.no-padding {
    padding: 0;
}
section.bg {
    background: var(--color-theme-dark-20);
    color: white;
}
.site-block {
    max-width: var(--site-width);
}
footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    background: var(--color-dark);
    color: var(--color-light);
    padding: 1rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-header);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

p {
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color: var(--color-theme);
    cursor: pointer;
}

a:hover {
    text-decoration: underline;
}
footer a {
    color: var(--color-light);
}

.btn {
    padding: 10px;
    border: solid 1px var(--color-theme-dark-80);
    display: inline-block;
    cursor: pointer;

    &.primary {
        background: var(--color-theme);
        color: var(--color-light);
    }
    &.secondary {
        background: var(--color-light);
        color: var(--color-theme);
    }
}
.btn:hover {
filter: drop-shadow(2px 2px 2px #00000080);
}
ul {
    list-style: none;
}

.content-block {
    max-width: calc(var(--site-width) - 30rem);
    margin: auto;
    padding: 2rem 0;
}
.narrow, .content-block.narrow {
    max-width: calc(var(--site-width-narrow) - 5rem);
}
.m-auto {margin: auto;}
.announcement-bar {
    background: var(--color-theme-dark-40);
}

.announcement-bar span {
    display: flex;
    justify-content: center;
    padding: .5rem;
    color: white;
}

.header-bar {
    background: white;
}

.header-bar .wrapper {
    max-width: var(--site-width);
    margin: auto;
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.header-bar .logo img {
    max-width: 200px;
}

.header-bar .contact {
    display: flex;
    gap: 1.5rem;
}
.header-bar .contact-item {
    display: flex;
    gap: .5rem;
    align-items: center;
}
.header-bar .contact-item svg {
    /*max-width: 1.25rem;*/
    width: 1.25rem;
    height: 1.25rem;

}
.header-bar .icon-wrap {
    border: 1px solid var(--color-theme-dark-20);
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.contact-item:hover .icon-wrap {
    background: var(--color-theme);
}
.contact-item:hover .icon-wrap svg {
    color: var(--color-theme-light-90);
}
/*Navigation*/
nav {
    background: var(--color-theme);
}

nav svg {
    display: none;
}

nav ul {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

nav ul a {
    padding: 1rem;
    display: block;
    color: var(--color-theme-light-80);
    font-weight: bold;
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    background: var(--color-dark);
    flex-direction: column;
    position: absolute;
    top: 3rem;
    min-width: max-content;
    gap: .25rem !important;
    z-index: 2;
}

.dropdown:hover .dropdown-menu {
    display: flex;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.dropdown-menu a {
    padding: .25rem 1rem;
}
/*UTILITY CLASSES*/
.show {
    display: block;
}

.flex {
    display: flex;
}

.hide {
    display: none;
}

.grid {
    display: grid;
}

.full-width {
    width: 100%;
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.flex.row > div {
    flex-grow: 1;
}
.title {
    margin-bottom: 1rem;
}

/*PROJECT SPECIFIC CSS*/
/*Sections*/
section {
    margin-top: 0;
}
.banner {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

/* Image fills the whole banner area */
.banner > img {
    grid-area: 1 / 1 / -1 / -1;
    width: 100%;
    height: 100%;
    max-height: 45rem;
    min-height: 10rem;
    object-fit: cover;
}

/* Overlay is the content box placed in a grid cell */
.banner-overlay {
    z-index: 1;
    background: rgba(0,0,0,.6);
    color: #fff;
    padding: 2rem;
    text-align: center;
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    align-self: center;
    display: grid;
    place-content: center;
}

/* 3×3 placement utilities for .banner-overlay */
.top-left      { grid-column: 1; grid-row: 1; }
.top-center    { grid-column: 2; grid-row: 1; }
.top-right     { grid-column: 3; grid-row: 1; }
.middle-left   { grid-column: 1; grid-row: 2; }
.middle-center { grid-column: 2; grid-row: 2; }
.middle-right  { grid-column: 3; grid-row: 2; }
.bottom-left   { grid-column: 1; grid-row: 3; }
.bottom-center { grid-column: 2; grid-row: 3; }
.bottom-right  { grid-column: 3; grid-row: 3; }

.align-top .banner img {
    object-position: top;
}

/*Terms*/
#terms-intro h3 {
    margin-bottom: 1rem;
}
#terms-intro .content-block {
    padding: 1rem;
}
.terms {
    text-align: left;
    padding: 1rem;
    /*line-height: 1.2;*/
}
.terms > li {
    margin-bottom: 1rem;
    display: list-item;
}
.terms ul {
    list-style: outside;
    /*line-height: 1.2;*/
}
.terms>li::marker{
    color:var(--color-theme);
font-weight: bold;
font-size: 1.3rem;
    line-height: 1.2;
}
.terms h4 {
    line-height: 1.2;
    margin-bottom: .5rem;
}
/*Grids*/
.home-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}
.hg-item {
    border: solid 1px var(--color-theme-dark-20);
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.hg-item.alt {
    background: var(--color-theme-dark-20);
    color: var(--color-light);
}
.hg-item.alt .btn {
    border: solid 1px white;
    background: var(--color-theme-light-90);
    color: black;
}
.hg-item .btn {
margin-top: auto;
    width: fit-content;
}

.price-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr 1fr;
    place-items: center;
}
.pg-block {
    border: solid 1px var(--color-theme);
    /*padding: 10px;*/
    position: relative;
    width: 100%;
    text-align: center;
    align-self: stretch;
}
.price-grid .price {
    /*position: absolute;*/
    /*top: -2rem;*/
    /*left: 50%;*/
    /*transform: translate(-50%);*/
    /*background: white;*/
    /*padding: 1rem;*/
    /*border: solid 1px;*/
    /*border-radius: 50%;*/
    font-weight: bold;
    font-size: 1.5rem;
    background: var(--color-theme-dark-20);
    color: var(--color-light);
}
.pg-block .title {
    padding-top: .5rem;
}
.pg-block .btn {
    margin-bottom: .5rem;
}
.bio-grid .row{
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
    place-items: center;
}
.td-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    place-items: center;
}
/*Forms*/
form * {
    accent-color: var(--color-theme-dark-50);
}

form.flex {
    flex-direction: column;
    gap: 1rem;
}

form input, form textarea, form select {
    padding: 5px;
}

form input:focus, form textarea:focus {
    outline: solid 1px var(--color-theme);
}

form input[type="submit"] {
    background: var(--color-theme-dark-50);
    color: var(--color-light);
    cursor: pointer;
    border: none;
}

form input[type="checkbox"], form input[type="radio"] {
    transform: scale(1.5);
}

form input[type="checkbox"]:focus, form input[type="radio"]:focus {
    outline: none;
}

label {
    text-align: center;
    display: block;
}
.form.full-width {
    background: #242325;
    color: white;
}
.form.full-width .form-inner {
    max-width: var(--site-width-narrow);
    margin: auto;
}
.form.full-width .form-header {
    text-align: center;
    margin-bottom: 1rem;
}
.form.full-width form{
    display: grid;
    place-content: center;
    justify-content: stretch;
    gap: 1rem;
}
.form.full-width button[type="submit"] {
    justify-self: center;
    border: none;
    cursor: pointer;
    background: var(--color-theme);
    color: var(--color-theme-light-80);
}
.form input {
    width: 100%;
    height: 100%;
    padding: .5rem;
    font-family: inherit;
    font-size: 1rem;
}
.form textarea {
    width: 100%;
    padding: .5rem;
    font-family: inherit;
    font-size: 1rem;
}

/*PDF page*/


/*Animations*/
/* --- Scroll reveal base --- */
.reveal {
    opacity: 0;
    transition:
            opacity var(--reveal-duration, .6s) var(--reveal-ease, cubic-bezier(.2,.65,.3,1)),
            transform var(--reveal-duration, .6s) var(--reveal-ease, cubic-bezier(.2,.65,.3,1));
    will-change: opacity, transform;
}

/* Variants via substring match */
.reveal[data-animate~="fade"]  { /* fade just removes opacity transform */ }
.reveal[data-animate~="up"]    { transform: translateY(24px); }
.reveal[data-animate~="down"]  { transform: translateY(-24px); }
.reveal[data-animate~="left"]  { transform: translateX(24px); }
.reveal[data-animate~="right"] { transform: translateX(-24px); }
.reveal[data-animate~="zoom"]  { transform: scale(.96); }

/* When visible - MUST GO AFTER VARIANTS*/
.reveal.is-visible {
    opacity: 1;
    transform: none;
    transition-delay: var(--delay, 0s);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal.is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/*MEDIA & CONTAINER QUERIES*/
@media (width <= 767px) {
    .banner-overlay {
        padding: 1rem;
        grid-column: 1 / -1;
    }
    #home-banner .banner-overlay {
        grid-row: 3;
        align-self: stretch;
    }
    .header-bar .wrapper {
        justify-content: center;
        gap: 1rem;
    }
    section:has(.content-block) {
        padding: 0 1rem;
    }
    .bio-grid .row {
        grid-template-columns: 1fr;
    }
    .home-grid {
        grid-template-columns: 1fr;
    }
    .price-grid {
        grid-template-columns: 1fr;
    }
    .td-grid {
        grid-template-columns: 1fr;
    }
}
@media (width <= 600px) {
    .header-bar .wrapper {
        flex-direction: column;
    }
    .header-bar .contact {
        gap: .5rem;
        justify-content: space-between;
        width: 100%;
        flex-wrap: wrap;
    }
    .header-bar .contact a:first-child {display: none;}
}
@media (width <= 500px) {
    /*Mobile menu*/
    nav svg {
        display: block;
        cursor: pointer;
        padding: 7px;
    }

    nav svg path {
        fill: var(--color-light);
    }

    nav ul {
        flex-direction: column;
        gap: .25rem;
        display: none;
    }

    .dropdown-menu {
        position: static;
    }

    /*General formatting*/
    section {
        padding: .5rem;
    }
    /*Position of content page banner on mobile*/
    .align-top .banner img {
        object-position: 30%;
    }
}