@font-face{font-family:"Heading";src:url("fonts/Barlow-SemiBold.woff") format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Body";src:url("fonts/SourceSans3-Regular.woff") format("woff");font-weight:400;font-display:swap}
:root{
  --peat:#21312C;
  --oat:#F4F0E5;
  --clay:#9B5232;
  --sky:#B7CCD0;
  --mx:50%;
  --my:42%;
  --clear:16rem;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:"Body",system-ui,sans-serif;
  font-size:16px;line-height:1.5;color:var(--oat);
  background:var(--peat) url("assets/hero.png") center/cover no-repeat;
  min-height:100vh;display:flex;flex-direction:column;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(33,49,44,.28),rgba(33,49,44,.55));
}
.fog,.fog-b,.fog-c{
  position:fixed;inset:-28%;z-index:1;pointer-events:none;
  transform:translate3d(0,0,0);
  will-change:transform;
  -webkit-mask-image:
    radial-gradient(
      ellipse calc(var(--clear) * 1.2) calc(var(--clear) * 1) at var(--mx) var(--my),
      transparent 0%,
      transparent 28%,
      rgba(0,0,0,.2) 55%,
      rgba(0,0,0,.55) 75%,
      #000 100%
    );
  mask-image:
    radial-gradient(
      ellipse calc(var(--clear) * 1.2) calc(var(--clear) * 1) at var(--mx) var(--my),
      transparent 0%,
      transparent 28%,
      rgba(0,0,0,.2) 55%,
      rgba(0,0,0,.55) 75%,
      #000 100%
    );
}
.fog{
  opacity:.52;
  filter:blur(42px);
  background:
    radial-gradient(ellipse 42% 28% at 12% 30%, rgba(244,240,229,.58), transparent 70%),
    radial-gradient(ellipse 36% 40% at 70% 18%, rgba(183,204,208,.46), transparent 72%),
    radial-gradient(ellipse 48% 26% at 48% 62%, rgba(244,240,229,.42), transparent 74%),
    radial-gradient(ellipse 30% 38% at 86% 58%, rgba(183,204,208,.36), transparent 70%),
    radial-gradient(ellipse 40% 24% at 28% 78%, rgba(183,204,208,.3), transparent 72%);
  background-size:125% 125%;
  animation:fog-drift-a 70s ease-in-out infinite;
}
.fog-b{
  opacity:.38;
  filter:blur(50px);
  background:
    radial-gradient(ellipse 50% 32% at 80% 40%, rgba(244,240,229,.44), transparent 72%),
    radial-gradient(ellipse 38% 44% at 22% 55%, rgba(183,204,208,.4), transparent 70%),
    radial-gradient(ellipse 44% 30% at 55% 20%, rgba(244,240,229,.34), transparent 75%),
    radial-gradient(ellipse 34% 36% at 40% 88%, rgba(183,204,208,.28), transparent 72%);
  background-size:130% 130%;
  animation:fog-drift-b 90s ease-in-out infinite;
}
.fog-c{display:none}
@keyframes fog-drift-a{
  0%{transform:translate3d(-2%,1%,0); background-position:0% 40%}
  50%{transform:translate3d(2%,-1%,0); background-position:30% 55%}
  100%{transform:translate3d(-2%,1%,0); background-position:0% 40%}
}
@keyframes fog-drift-b{
  0%{transform:translate3d(2%,-1%,0); background-position:100% 45%}
  50%{transform:translate3d(-2%,2%,0); background-position:55% 65%}
  100%{transform:translate3d(2%,-1%,0); background-position:100% 45%}
}
.hero{flex:1;display:grid;place-items:center;padding:2rem 1.25rem;position:relative;z-index:2}
.content{max-width:36rem;width:100%;text-align:center}
h1{
  font-family:"Heading",sans-serif;font-weight:600;
  font-size:clamp(1.8rem,5vw,3rem);line-height:1.15;margin:0 0 1.75rem;
  text-shadow:0 2px 14px rgba(0,0,0,.28);
}
.row{display:flex;gap:.5rem;flex-wrap:wrap}
input{
  flex:1 1 14rem;min-height:48px;padding:.75rem 1rem;font:inherit;
  color:var(--peat);background:var(--oat);border:2px solid transparent;border-radius:6px;
}
input[aria-invalid="true"]{border-color:#F4B9A0}
button{
  flex:0 0 auto;min-height:48px;padding:.75rem 1.4rem;font:inherit;font-weight:600;
  color:var(--oat);background:var(--clay);border:0;border-radius:6px;cursor:pointer;
}
button:hover{background:#86452A}
input:focus-visible,button:focus-visible,.thanks:focus-visible{outline:3px solid var(--oat);outline-offset:3px}
.privacy{margin:.75rem 0 0;font-size:.85rem;opacity:.85;line-height:1.35}
.msg{min-height:1.5em;margin:.6rem 0 0;font-size:.95rem}
.thanks{font-size:1.15rem;background:rgba(33,49,44,.6);padding:1rem 1.25rem;border-radius:8px}
footer{position:relative;z-index:2;text-align:center;padding:1rem;font-size:.85rem;opacity:.85}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
@media (max-width:480px){button{flex:1 1 100%}:root{--clear:13rem}}
@media (prefers-reduced-motion:reduce){
  .fog,.fog-b,.fog-c{
    animation:none;
    filter:blur(28px);
    opacity:.38;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .fog-b,.fog-c{display:none}
}