:root {
  --font-size-14px: 0.875rem;
  --font-size-16px: 1rem;
  --font-size-18px: 1.125rem;
  --font-size-20px: 1.25rem;
  --font-size-24px: 1.5rem;
  --font-size-32px: 2rem;
  --font-size-48px: 3rem;
  --font-size-64px: 4rem;
  --font-size-72px: 4.5rem;
}

html {
  font-size: 1rem;
  scroll-behavior: smooth;
}

body {
  background: black;
  color: white;
  font-size: 1rem;
  font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 300;
  margin:0;
}
@media (min-width: 1920px) {
  body {
    font-size: 1.125rem;
    font-size: var(--font-size-18px);
    font-size: 1.125rem;
  }
}
.tagline{
  font-family: 'Oswald';
}
section {
  min-height: 100vh;
}

.container {
  padding: 0 16px;
  max-width: 100%;
}
@media (min-width: 768px) {
  .container {
    padding: 0 40px;
    max-width: 100%;
  }
}
@media (min-width: 1024px) {
  .container {
    padding: 0 40px;
    max-width: 100%;
  }
}
@media (min-width: 1366px) {
  .container {
    padding: 0 64px;
    max-width: 100%;
  }
}
@media (min-width: 1920px) {
  .container {
    padding: 0 64px;
    max-width: 1920px;
  }
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: bold;
  font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: transparent;
  text-align: center;
  cursor: pointer;
  position: relative;
  padding: 1rem 2rem;
  margin-right: 30px;
  border: 1px solid white;
}
.button:hover {
  background: black;
}
.button.white-button {
  background: white;
  color: black;
  border: 1px solid black;
}
.button.white-button:hover {
  background: black;
  color: white;
  border: 1px solid white;
}
.button.black-button {
  background: black;
  color: white;
  border: 1px solid white;
}
.button.black-button:hover {
  background: white;
  color: black;
  border: 1px solid black;
}

p, ul, ol, dd {
  margin: 0 0 1em;
}

ul, ol, dl {
  padding: 0 0 0 1.75em;
}

ul li {
  padding-left: 10px;
}

a {
  text-decoration: none;
  color: white;
}

p.lead {
  font-size: 1.125rem;
  line-height: 1.6875rem;
  font-weight: 600;
}
@media (min-width: 1024px) {
  p.lead {
    margin-bottom: 24px;
  }
}
@media (min-width: 1920px) {
  p.lead {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

h1, .h1, .heading-1,
h2, .h2, .heading-2,
h3, .h3, .heading-3,
h4, .h4, .heading-4 {
  font-family: "Oswald", "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0;
  font-weight: 700;
  margin-top:0;
}

h5, .h5, .heading-5,
h6, .h6, .heading-6 {
  font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 0;
}

.h1,
.heading-1 {
  font-size: 3rem;
}
@media (min-width: 1024px) {
  .h1,
  .heading-1 {
    font-size: 3rem;
  }
}
@media (min-width: 1366px) {
  .h1,
  .heading-1 {
    font-size: 3.5rem;
  }
}
@media (min-width: 1920px) {
  .h1,
  .heading-1 {
    font-size: 4rem;
  }
}
.h1,
.heading-1 {
  line-height: 1.3em;
  font-weight: 700;
}

.h2,
.heading-2 {
  font-size: 1.5rem;
  margin-bottom:30px;
}
@media (min-width: 1024px) {
  .h2,
  .heading-2 {
    font-size: 2rem;
  }
}
@media (min-width: 1366px) {
  .h2,
  .heading-2 {
    font-size: clamp(2rem, calc(-7.4512635379px + 2.8880866426vw), 3rem);
  }
}
@media (min-width: 1920px) {
  .h2,
  .heading-2 {
    font-size: 3rem;
  }
}
.h2,
.heading-2 {
  line-height: 1.125em;
  font-weight: 400;
}

.h3,
.heading-3 {
  font-size: 1.5rem;
}
@media (min-width: 1366px) {
  .h3,
  .heading-3 {
    font-size: clamp(1.5rem, calc(4.274368231px + 1.4440433213vw), 2rem);
  }
}
@media (min-width: 1920px) {
  .h3,
  .heading-3 {
    font-size: 2rem;
  }
}
.h3,
.heading-3 {
  line-height: 1.125em;
  font-weight: 400;
}

.h4,
.heading-4 {
  font-size: 1.25rem;
}
@media (min-width: 1366px) {
  .h4,
  .heading-4 {
    font-size: clamp(1.25rem, calc(10.1371841155px + 0.7220216606vw), 1.5rem);
  }
}
@media (min-width: 1920px) {
  .h4,
  .heading-4 {
    font-size: 1.5rem;
  }
}
.h4,
.heading-4 {
  line-height: 1.125em;
  font-weight: 400;
}

.h5,
.heading-5 {
  font-size: 1.125rem;
  font-weight: 600;
}
@media (min-width: 1366px) {
  .h5,
  .heading-5 {
    font-size: clamp(1.125rem, calc(3.2057761733px + 1.083032491vw), 1.5rem);
  }
}
@media (min-width: 1920px) {
  .h5,
  .heading-5 {
    font-size: 1.5rem;
  }
}
.h5,
.heading-5 {
  line-height: 1.5em;
  font-weight: 600;
}

.h6,
.heading-6 {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
@media (min-width: 1366px) {
  .h6,
  .heading-6 {
    font-size: clamp(0.875rem, calc(9.0685920578px + 0.3610108303vw), 1rem);
  }
}
@media (min-width: 1920px) {
  .h6,
  .heading-6 {
    font-size: 1rem;
  }
}
.h6,
.heading-6 {
  line-height: 1.5em;
  font-weight: 600;
}
hr {
    margin: 0;
    color: white;
    border: 0;
    border-top: 1px solid white;
    opacity: 0.25;
}
/* Contact form */
.wpcf7-form .row{
    margin:0;
    column-gap: 30px;
}
.wpcf7-form input, .wpcf7-form textarea{
    width: 100%;
    background: transparent;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid #ffffff85;
    padding: 15px 0;
    color: white;
    border-radius: 0;
    font-family: 'Inter';
}
@media (min-width: 992px) {
  .wpcf7-form .row .col-lg-6{
      max-width: calc(50% - 15px);
  }
}
.wpcf7-form input::placeholder, .wpcf7-form textarea::placeholder {
    color: white;
    opacity: 0.8;
    font-family: 'Inter';
}
.wpcf7-form .wpcf7-submit {
  border:none;
  background: white;
  color: black;
  font-weight: 700;
  font-family: 'Inter';
}
@media (max-width: 991px) {
.wpcf7-form .col-lg-6, .wpcf7-form .col-lg-12 {
  width: 100% !important;
}

}
/* Specific styling for browser-native date field text */
.wpcf7-date::-webkit-datetime-edit-text,
.wpcf7-date::-webkit-datetime-edit-fields-wrapper {
    color: white;
    opacity: 0.8;
    font-family: 'Inter';
}

/* Hide the default mm/dd/yyyy text in Webkit browsers (Chrome/Safari/Edge) */
.custom-date-field::-webkit-datetime-edit {
    color: transparent !important;
}

/* Ensure the text is visible once a date is actually selected */
.custom-date-field:focus::-webkit-datetime-edit,
.custom-date-field:not(:placeholder-shown)::-webkit-datetime-edit {
    color: inherit !important;
}

/* Make the entire field clickable by expanding the calendar icon to 100% width */
.custom-date-field::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0; /* Keeps the field looking clean while staying clickable */
}

/* Ensure the wrapper is positioned relatively for the absolute indicator */
.wpcf7-form-control-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
}