@import url('https://fonts.bunny.net/css?family=barlow:100,100i,300,300i,600,600i,900i|barlow-semi-condensed:100,100i,300,300i,600,600i&display=swap');
@import url('https://assets.mlcdn.com/fonts.css?version=1768389');

:root {
  --white: #fff;
  --paper: #f7f7f7;
  --charcoal: #333;
  --darkGrey: #555;
  --smoke: #efefef;
  --lightGrey: #cbcbcb;
  --grey: #969696;
  --shallowOcean: #aad4e2;
  --ocean: #82B1C1;
  --deepOcean: #4DB0BF;
  --deeperOcean: #3898B2;
  --dusk: #d65aa8;
  --deepDusk: #af3aab;
  --sunShine: #fef6ae;
  --deepRed: #871e1e;
}

html { scroll-behavior: smooth; }
body { margin: 0; padding: 0; font-size: 100%; font-family: 'Barlow', sans-serif; color: var(--charcoal); background: var(--paper); }

h1, h2, h3, header ul, header figcaption { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; }
h1 { font-size: 2.75em; line-height: 1.1em; margin: 0 0 1em; }
h2 { font-size: 2.25em; line-height: 1.1em; margin: 0 0 1.1em; }
h3 { font-size: 1.75em; line-height: 1.1em; margin: 0 0 1.2em;}

p, address, ul, label, input, textarea, form button { font-size: 1.2em; font-weight: 300; line-height: 1.75em; }
p { margin: 0 0 1.5em 0; }
textarea { font-family: 'Asap', sans-serif; }
address {font-style: normal; }
strong { font-weight: 500; }

footer p, footer address { font-size: 1em; }

main, footer { padding: 0 15vw; }
header { position: relative;  width: 100%; box-sizing: border-box; background: url('../img/galaxy.jpg') no-repeat var(--paper); background-attachment: fixed; }
footer { padding-top: 3em; padding-bottom: 3em; border-top: 1px solid var(--ocean); }

header>div { max-height: 85vh; width: 100%; overflow: hidden; }

main>div { margin: 6.875em 0 0; }
main>div:first-of-type { margin: 16em 0 0; }

nav { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 1em; }
nav a { font-size: 1.2em; padding: 0.75em 1em; }

.flex { display: flex; flex-wrap: nowrap; }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.half { width: 48%; margin: 1em 2% 2em 0; }
.third { width: 31%; margin: 1em 2% 2em 0; }
.twoThirds { width: 64%; margin: 1em 2% 2em 0; }
.quarter {width: 23%; margin: 1em 2% 2em 0; }

figure { margin: 0; padding: 0; border-radius: 4px; overflow: hidden; }
figcaption { text-align: center; margin: 0.4em 0; }
figcaption:empty { margin: 0; }

/* header.shrink { position: fixed; top: 0; left: 0; padding-top: 1em; z-index: 2; transition: 0.4s ease-in-out; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2); } */

header figure { background: none; width: 100%; }
header figure img {  object-fit: cover; width: 100%; }
header figcaption { font-size: 2em; font-weight: 600; padding: 0.25em 0; opacity: 1; transition-duration: 0s; transition-delay: 0.4s; transition-property: opacity; }

#logo { position: absolute; bottom: -200px; left: 50%; transform: translateX(-50%); max-width: 300px; width: 60%; }

figure img { display: block; width: 100%; height: auto; }

.bubble { background: none; padding: 1em; }
.bubble svg { width: 100%; height: 100%; }
.bubble image { width: 100%; height: 100%; clip-path: url(#clip); box-shadow: 5px 4px 0px 0px #000000; }

.third:has(.bubble) { position: relative; box-sizing: border-box; }
.bubble + figure { position: absolute; background: none; top: 0.1em; left: 0.5em; z-index: -1; width: 100%; height: 100%; }
.bubble + figure svg { width: 100%; height: auto; }

p.testimonial {  position: relative; padding: 1em 0 0 2em; margin: 1.5em 0 3em; font-weight: 600; color: var(--darkGrey); }
p.testimonial::before { font-weight: 900; font-style: italic; content: "\0022"; display: block; font-size: 15em; color: var(--lightGrey); position: absolute; top: 0.3em; left: -0.1em; z-index: -1; }

.callOut { background: var(--shallowOcean); padding: 1.25em 1.25em 0.25em; border-radius: 0.5em; margin-bottom: 2.5em;}
.callOut p:has(a) { text-align: center; }
.callOut a { display: inline-block; padding: 0.75em 1.5em; text-decoration: none; text-transform: uppercase; font-weight: 600; background: var(--dusk); color: var(--sunShine); border-radius: 4px; }
.callOut a:hover { background: var(--deepDusk); }

footer figure { background: none; opacity: 0.4; }
footer figure img { width: 80%; height: auto; margin: auto; }

form { padding: 0; margin: 4em auto; width: 70%; }
label, input, textarea, form button { display: block; width: 100%; box-sizing: border-box; }
label { font-weight: 500; }
input, textarea, form button { padding: 0.75em 1em; border-radius: 4px; background: var(--smoke); border: 1px solid var(--ocean); margin: 0 0 1.875em; box-sizing: border-box; }
input:focus, textarea:focus, input:focus-visible, textarea:focus-visible, input:focus-within, textarea:focus-within, input:active, textarea:active { border: 1px solid var(--deepOcean); }

input[type="submit"], form button { background: var(--deeperOcean); color: var(--white); width: fit-content; padding-left: 2em; padding-right: 2em; margin-left: auto; font-weight: 500; letter-spacing: 1px; }
input[type="submit"]:hover, form button:hover { background: var(--deepOcean); }
form button { width: 100%; }

   /* ML LOADER */
/* .ml-form-embedSubmitLoad { display: inline-block; width: 20px; height: 20px; }

.g-recaptcha { transform: scale(1); -webkit-transform: scale(1); transform-origin: 0 0; -webkit-transform-origin: 0 0; height: ; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.ml-form-embedSubmitLoad:after { content: " "; display: block; width: 11px; height: 11px; margin: 1px; border-radius: 50%; border: 4px solid #fff; border-color: #ffffff #ffffff #ffffff transparent; animation: ml-form-embedSubmitLoad 1.2s linear infinite; }
@keyframes ml-form-embedSubmitLoad {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#mlb2-35772063.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.loading { display: none; }

.ml-subscribe-close { width: 30px; height: 30px; background: url('https://assets.mlcdn.com/ml/images/default/modal_close.png') no-repeat; background-size: 30px; cursor: pointer; margin-top: -10px; margin-right: -10px; position: absolute; top: 0; right: 0; }

.ml-error .label-description, .ml-error .label-description p, .ml-error .label-description p a, .ml-error label:first-child { color: var(--deepRed); } */

input[name="lastName"] { display: none; visibility: hidden; }

.privacy-policy p { font-size: 1em; margin-bottom: 0.8em; }

dialog { padding: 1.5em 2em; width: 80%; max-width: 600px; border-radius: 4px; border: 1px solid var(--deepOcean); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
dialog::backdrop { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(6px); }
dialog button { position: absolute; top: 0.5em; right: 0.5em; padding: 1em; display: block; background: url('../img/close.svg') no-repeat center; border: none; }

[id]::before { content: ''; display: block; height: 130px; margin-top: -130px; visibility: hidden; }

@keyframes appear {
  from { opacity: 0; padding: 2em; }
  to { opacity: 1; padding: 0; }
}

.appear { box-sizing: border-box; animation: appear 0.6s ease; }

.cookies { position: fixed; bottom: 0; left: 0; width: 100dvw; padding: 1em; box-sizing: border-box; background: var(--paper); border-top: 1px solid var(--grey); box-shadow: 0px -1px 3px 0px rgba(0, 0, 0, 0.1); max-height: 60em; transition: max-height 0.2s ease-in-out; transition: padding 0.2s ease-in-out; }
.cookies p, .cookies button { font-size: 0.9em; margin: 0; }
.cookies p { margin-bottom: 1em; }
.cookies button { min-width: 135px; }
.cookies .flex { margin: 0; flex-wrap: nowrap; justify-content: flex-end; align-items: flex-end;  gap: 1em; }
.cookies.hide { max-height: 0; padding: 0; overflow: hidden; }

footer .cookies button { display: block; background: var(--deeperOcean); color: var(--white); border: none; padding: 0.5em 0.75em; font-size: 1em; border-radius: 4px; }
footer .cookies button.reject { background: var(--grey); }

.social { margin-bottom: 2.25em; }
.social figure { width: 30px; margin-right: 1em; }

@media screen and (min-width: 1250px) {
  header figure { margin-top: -3em; }
/* header figure img {  object-fit: cover; width: 100%; }
header figcaption { font-size: 2em; font-weight: 600; padding: 0.25em 0; opacity: 1; transition-duration: 0s; transition-delay: 0.4s; transition-property: opacity; } */
}

@media screen and (min-width: 1350px) {
  header figure { margin-top: -12em; }
}


@media screen and (max-width: 1250px) {
  main, footer { padding: 0 10vw; }

  footer { padding-top: 3em; padding-bottom: 3em; }

}

@media screen and (max-width: 1125px) {
  div.half + figure.half { background: none; }
  div.half + figure.half img { object-fit: cover; }

  form { width: 80%; }
}

@media screen and (max-width: 1051px) {
  /* header {display: block; }
  header figure { margin: 0 auto; } */
  header nav { display: none; }
}

@media screen and (max-width: 840px) {
  form { width: 100%; }
}

@media screen and (max-width: 700px) {
  .flex:has(.half), .flex:has(.third) { flex-wrap: wrap; }
  .half, .third, .twoThirds, .quarter { width: 100%; margin: 0 0 1.5em 0; }

  .bubble { width: 70%; margin: auto; padding: 0; }
  .bubble svg { border-radius: 4px; }
  .bubble image { clip-path: none; border-radius: 4px; }
  .bubble + figure { display: none; }
}

@media screen and (max-width: 650px) {
  footer.flex { display: block; }
  footer address, footer p {text-align: center; }
  footer figure { width: 80%; margin: 2em auto 0; }
}

@media screen and (max-width: 560px) {
    .cookies p { margin-bottom: 0; }
    .cookies .flex { display: block; }
    .cookies button { width: 100%; margin-top: 1em; }
}