*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body
{
  font-size: 11pt;
  line-height: 1.5;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4
{
  font-family: "Playfair", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-variation-settings:
    "wdth" 87.5;
}

a
{
  padding: 1rem;
  color: #836900;
  text-decoration: none;
  transition: all 0.3s ease-out;
  border-radius: 0.5rem;
}

a:hover
{
  color: #b38f00;
}

a:active
{
  color: #836900;
  background-color: #00000015;
}

body
{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

header
{
  position: fixed;
  top: 0;
  width: 100%;
  background: #f1e6c7;
  background-image: url('images/header.jpg');
  background-size: cover;
  box-shadow: 0 0.15rem 0.5rem #00000033;
  z-index: 1000;
  user-select: none;
}

nav
{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4.75rem;
  margin: 0 0.35rem;
}

nav > a
{
  height: 100%;
  margin-top: -1.5rem;
  padding: 0;
}

nav img
{
  max-width: 130%;
  max-height: 130%;
  margin-left: 0.9rem;
}

nav .tagline
{
  font-style: italic;
  font-size: 12pt;
  color: #836900;
  white-space: nowrap;
}

nav .menu
{
  display: flex;
  transition: max-height 0.2s ease-out;
}

nav .menu a
{
  text-decoration: none;
  color: #1f4e5f;
  padding: 0.9rem;
  transition: all 0.3s ease-out;
  border-radius: 0.5rem;
}

nav .menu a:hover
{
  color: #5491a7;
}

nav .menu a:active
{
  background-color: #00000015;
}

.hamburger-menu-checkbox
{
  position:absolute;
  top: -100%;
  right: -100%;
}

.hamburger-menu-label
{
  display: none;
  padding: 1rem 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

.hamburger-menu-label:active
{
  background-color: #00000015;
}

.hamburger-menu-icon
{
  display: block;
  position: relative;
  width: 1.5rem;
  height: 3px;
  transition: all 0.1s ease-out;
}

.hamburger-menu-icon:before, .hamburger-menu-icon:after
{
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  transition: all 0.2s ease-out;
}

.hamburger-menu-icon, .hamburger-menu-icon:before, .hamburger-menu-icon:after
{
  background-color:#1f4e5f;
}

.hamburger-menu-icon:before
{
  top: -0.5rem;
}

.hamburger-menu-icon:after
{
  top: 0.5rem;
}

.hamburger-menu-checkbox:checked ~ .hamburger-menu-label .hamburger-menu-icon
{
  background: transparent;
}
.hamburger-menu-checkbox:checked ~ .hamburger-menu-label .hamburger-menu-icon:before
{
  transform: rotate(225deg);
}
.hamburger-menu-checkbox:checked ~ .hamburger-menu-label .hamburger-menu-icon:after
{
  transform: rotate(-225deg);
}
.hamburger-menu-checkbox:checked ~ .hamburger-menu-label .hamburger-menu-icon:before,
.hamburger-menu-checkbox:checked ~ .hamburger-menu-label .hamburger-menu-icon:after
{
  top: 0;
}

header + *
{
  margin-top: 4.75rem;
}

section:has(div)
{
  display: flex;
  padding: 0 4rem;
}

section > div
{
  margin: 4rem auto;
}

section > div > h1
{
  text-align: center;
  font-size: 30pt;
  margin-bottom: 2rem;
}

section > div > h3
{
  text-align: center;
  font-size: 20pt;
  margin-bottom: 2rem;
}

section div hr
{
  background-color: #bbb;
  height: 1px;
  border: none;
  margin: 2rem 0;
}

section div .btn
{
  margin-top: 2rem;
}

.banner
{
  padding: 0;
}

.banner > div
{
  margin-top: 0;
  margin-bottom: 0;
  background-size: cover;
  max-width: 1500px;
}

.banner.intro > div
{
  padding: 3.75em 18em 1em 3em;
  aspect-ratio: 2000 / 798;
  background-image: url('images/intro-background.jpg');
  font-size: min(1.75vw, 20pt);
}

.banner.intro h2
{
  font-size: min(3.5vw, 39pt);
  color: #133829;
  line-height: 1;
}

.banner.intro h2 span
{
  font-weight: 400;
  font-style: italic;
  color: #836900;
}

.banner.intro hr
{
  height: 1px;
  background-color: #a88923;
  border: none;
  margin: 1.25em 0;
}

.banner.intro p
{
  color: #133829;
  margin-right: 10em;
}

.banner.about > div
{
  padding: 0.5em 1em 0.5em 24em;
  aspect-ratio: 2000 / 694;
  color: white;
  background-image: url('images/about-background.jpg');
  background-position-x: 12%;
  font-size: min(1.5vw, 16.75pt);
}

.banner.about h2
{
  font-size: min(4.5vw, 50pt);
}

.banner.about p
{
  font-size: 1em;
  max-width: unset;
  margin-bottom: 1rem;
}

.banner.about p .btn
{
  margin-top: 0.5vw;
}

.contrast
{
  background: linear-gradient(120deg,#2f6f6c,#1f4e5f);
  color: white;
}

.contrast p
{
  max-width: 50rem;
  margin-bottom: 1.5rem;
  font-size: 13pt;
}

.contrast ul
{
  margin: -1em 0 1em 1.5rem;
  font-size: 12pt;
}

.light
{
  background: linear-gradient(120deg,#fbf4e9,#efe2d0);
  color: #1f4e5f;
}

.btn
{
  display: inline-block;
  background:#d6aa22 !important;
  color:white !important;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  font-size: 13pt;
  border-radius: 0.25rem;
  font-weight: bold;
  transition: all 0.3s ease-out;
}

.btn:hover
{
  background:#eccc36 !important;
}

.btn:active
{
  background:#d6aa22 !important;
}

.emphasis
{
  font-weight: bold;
}

.note
{
  font-style: italic;
}

.details
{
  font-size: 1em !important;
}

.center
{
  text-align: center;
}

.cards
{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem,1fr));
  gap: 2rem;
}

.cards.single-column
{
  grid-template-columns: auto;
}

.card
{
  background: linear-gradient(#fcf8f3, #faf0e4);
  color: #1f4e5f;
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.15rem 0.5rem #00000020;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card img
{
  width: 8rem;
  height: 8rem;
}

.card > div
{
  display: flex;
  gap: 1rem;
}


.card h1
{
  font-size: 36pt;
  text-align: center;
  margin-bottom: 1rem;
}

.card h3
{
  font-size: 20pt;
}

.card a
{
  text-align: center;
}

.contact
{
  text-align: center;
}

.contact div
{
  margin-bottom: 1.5rem;
}

.contact a
{
  text-decoration: none;
  color: #1f4e5f;
  padding: 0.5rem;
  transition: all 0.3s ease-out;
  border-radius: 0.5rem;
}

.contact a:hover
{
  color: #5491a7;
}

.contact a:active
{
  background-color: #00000015;
}

.social-rail
{
	font-size: 20pt;
}
	
.social-rail a
{
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	text-decoration: none;
}

footer
{
  background: #f1e6c7;
  background-image: url('images/header.jpg');
  background-size: cover;
  text-align: center;
  padding: 1rem;
  color: #1f4e5f;
  box-shadow: 0 0.15rem 0.5rem #00000033;
}

footer p:not(:first-child)
{
  margin-top: 1rem;
}

@media(max-width:768px)
{
  nav .menu
  {
    position:fixed;
    left:0;
    top:4.75rem;
    width:100%;
    max-height:0;
    background: linear-gradient(to right, #67765ff0, #e8dbbff0, #f7eeddf0);
    flex-direction:column;
    overflow:hidden;
  }

  nav .menu a
  {
    border-radius:0;
    text-align:center;
  }

  .hamburger-menu-checkbox:checked ~ .menu
  {
    max-height: 240px;
  }

  .hamburger-menu-label
  {
    display:block;
  }

  .banner.intro > div
  {
    background-image: url('images/intro-background-mobile.jpg');
    padding: 5vw;
    aspect-ratio: 1;
  }

  .banner.intro h2
  {
    font-size: 7vw;
  }

  .banner.intro p
  {
    font-size: 3.75vw;
  }

  .banner.about > div
  {
    background-image: url('images/about-background-mobile.jpg');
	  padding: 2vw 8vw;
    aspect-ratio: 1;
  }

  .banner.about h2
  {
    font-size: 7vw;
    text-align: center;
    margin-bottom: 1rem;
	  margin-top: 3rem;
  }

  .banner.about p
  {
    font-size: 3vw;
  }

  .banner.about p:nth-child(n+3)
  {
    padding-left: 0;
    width: 54vw;
  }

  .banner.about p .btn
  {
    margin-top: 2rem;
  }

  .card > div
  {
    display: block;
    text-align: center;
  }

  .card h3
  {
    margin-bottom: 0.5rem;
  }

  .card a
  {
    margin: 0;
  }
}