:root{
  --ink:#172238;
  --muted:#4D6074;
  --glass:rgba(255,255,255,.22);
  --line:rgba(255,255,255,.42);
}

*{box-sizing:border-box}
html,body{margin:0; min-height:100%; background:#66AFE8}
body{
  min-height:100svh;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Arial,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}

.welcome{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(180deg,#5BA9E7 0%,#A8D9F4 52%,#F6C98E 72%,#6DAC50 72%,#3D7A34 100%);
}

.brand{
  position:relative;
  z-index:4;
  display:flex;
  align-items:center;
  gap:10px;
  width:min(1040px,calc(100% - 40px));
  margin:0 auto;
  padding:max(22px,env(safe-area-inset-top)) 0 0;
  color:#fff;
  font-size:20px;
  font-weight:800;
  text-shadow:0 2px 8px rgba(17,42,70,.28);
}

.brand img{display:block; filter:drop-shadow(0 3px 8px rgba(20,55,80,.18))}

.message{
  position:relative;
  z-index:4;
  width:min(680px,calc(100% - 40px));
  margin:clamp(54px,11vh,110px) auto 0;
  text-align:center;
}

.eyebrow{
  display:inline-block;
  margin:0 0 16px;
  padding:7px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--glass);
  color:#173B5B;
  font-size:14px;
  font-weight:750;
}

h1{
  max-width:620px;
  margin:0 auto;
  color:#fff;
  font-size:clamp(40px,7vw,68px);
  line-height:1.02;
  letter-spacing:0;
  text-shadow:0 3px 16px rgba(28,72,103,.25);
}

.intro{
  max-width:560px;
  margin:22px auto 0;
  color:#203C55;
  font-size:clamp(17px,2.5vw,20px);
  line-height:1.55;
  font-weight:550;
}

.help{
  display:flex;
  gap:14px;
  align-items:flex-start;
  max-width:570px;
  margin:30px auto 0;
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.58);
  border-radius:8px;
  background:rgba(248,253,255,.76);
  box-shadow:0 18px 45px rgba(25,76,105,.14);
  text-align:left;
}

.help-icon{
  display:grid;
  place-items:center;
  flex:0 0 30px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#2D8ECB;
  color:#fff;
  font-family:Georgia,serif;
  font-size:19px;
  font-weight:700;
}

.help strong{display:block; font-size:16px}
.help p{margin:5px 0 0; color:var(--muted); font-size:15px; line-height:1.45}
.contact-button{
  min-height:50px;
  margin:20px auto 0;
  padding:0 22px;
  border:0;
  border-radius:7px;
  color:#fff;
  background:#167E51;
  box-shadow:0 10px 24px rgba(14,91,58,.22);
  font-weight:800;
}
.contact-button:hover{background:#0F7046}
.link-hint{margin:18px auto 0; color:#31516A; font-size:14px; line-height:1.5}

.sun{
  position:absolute;
  z-index:1;
  top:12%;
  right:max(8%,calc((100% - 900px)/2));
  width:92px;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 35% 32%,#FFF9D8 0%,#FFE086 55%,#FFB84C 100%);
  box-shadow:0 0 38px rgba(255,216,102,.62);
}

.landscape{
  position:absolute;
  z-index:2;
  left:0;
  bottom:-3px;
  width:100%;
  height:34vh;
  min-height:235px;
  object-fit:cover;
  object-position:center bottom;
}

.contact-open{overflow:hidden}
.contact-layer{
  position:fixed;
  z-index:20;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  overflow:auto;
  background:rgba(17,35,53,.52);
}
.contact-layer[hidden]{display:none}
.contact-panel{
  position:relative;
  width:min(100%,560px);
  padding:30px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:8px;
  background:#F8FCF6;
  box-shadow:0 28px 80px rgba(15,37,53,.28);
}
.contact-close{
  position:absolute;
  top:14px;
  right:14px;
  width:40px;
  height:40px;
  padding:0;
  border:1px solid #D6E0D5;
  border-radius:50%;
  color:#536477;
  background:#fff;
  font-size:26px;
  line-height:1;
}
.form-eyebrow{margin:0 48px 6px 0; color:#167E51; font-size:13px; font-weight:800; text-transform:uppercase}
.contact-panel h2{margin:0 42px 0 0; font-size:27px}
.form-intro{margin:10px 0 20px; color:var(--muted); font-size:15px; line-height:1.45}
.contact-panel form{display:grid; gap:8px}
.contact-panel label{margin-top:6px; font-size:14px; font-weight:750}
.contact-panel input,.contact-panel select,.contact-panel textarea{
  width:100%;
  min-width:0;
  border:1px solid #CFDACF;
  border-radius:7px;
  outline:none;
  color:var(--ink);
  background:#fff;
}
.contact-panel input,.contact-panel select{height:48px; padding:0 12px}
.contact-panel textarea{resize:vertical; min-height:112px; padding:12px}
.contact-panel input:focus,.contact-panel select:focus,.contact-panel textarea:focus{
  border-color:#2A9B69;
  box-shadow:0 0 0 3px rgba(42,155,105,.14);
}
.privacy-warning{
  margin:14px 0 4px;
  padding:12px 14px;
  border-left:4px solid #C33A32;
  border-radius:4px;
  color:#8F251F;
  background:#FFF0EE;
  font-size:14px;
  line-height:1.45;
}
.website-field{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
.form-error{margin:8px 0 0; color:#A52B24; font-size:14px; font-weight:650}
.send-button,.contact-success button{
  min-height:50px;
  margin-top:12px;
  padding:0 20px;
  border:0;
  border-radius:7px;
  color:#fff;
  background:#24A866;
  font-weight:800;
}
.send-button:disabled{cursor:wait; opacity:.65}
.contact-success{text-align:center; padding:24px 4px 8px}
.contact-success[hidden]{display:none}
.contact-success span{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  margin:0 auto 16px;
  border-radius:50%;
  color:#fff;
  background:#24A866;
  font-size:30px;
  font-weight:800;
}
.contact-success h2{margin:0}
.contact-success p{max-width:400px; margin:10px auto 12px; color:var(--muted); line-height:1.5}

@media (max-height:760px){
  .message{margin-top:34px}
  h1{font-size:40px}
  .intro{margin-top:14px}
  .help{margin-top:20px}
  .landscape{height:28vh; min-height:180px}
}

@media (max-width:600px){
  .brand{width:calc(100% - 32px)}
  .message{width:calc(100% - 28px); margin-top:42px}
  h1{font-size:42px}
  .intro{font-size:17px}
  .help{padding:16px}
  .link-hint{display:none}
  .sun{top:15%; right:-18px; width:76px}
  .landscape{height:29vh; min-height:210px}
  .contact-layer{place-items:start center; padding:12px}
  .contact-panel{padding:24px 18px; margin:max(8px,env(safe-area-inset-top)) 0 max(8px,env(safe-area-inset-bottom))}
}