@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/open-sans-regular.ttf") format("truetype");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/open-sans-bold.ttf") format("truetype");
}
:root {
  color-scheme: light;
  font-family: "Open Sans", Arial, sans-serif;
  color: #1c201d;
  background: #f1f1f1;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; border-bottom: 14px solid #50C878; }
.splash {
  min-height: calc(100vh - 14px);
  min-height: calc(100svh - 14px);
  padding: clamp(64px, 13.5vh, 112px) 24px 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.brand { display: block; width: 344px; max-width: 80%; height: auto; }
h1 {
  margin: 82px 0 0;
  color: #50C878;
  font-size: clamp(36px, 4.55vw, 58px);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -1.4px;
}
.intro { margin: 52px 0 0; color: #666b67; font-size: 26px; line-height: 1.5; }
.contact { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 42px; font-style: normal; }
a { color: inherit; text-decoration: none; text-underline-offset: 6px; }
a:hover { color: #50C878; text-decoration: underline; }
a:focus-visible { outline: 3px solid #50C878; outline-offset: 7px; border-radius: 2px; }
.phone { font-size: 34px; line-height: 1.5; font-weight: 700; }
.email { font-size: 27px; line-height: 1.6; }
@media (max-width: 600px) {
  body { border-bottom-width: 10px; }
  .splash { min-height: calc(100svh - 10px); padding: 72px 22px 64px; }
  .brand { width: 280px; max-width: 90%; }
  h1 { max-width: 460px; margin-top: 64px; font-size: clamp(30px, 7.9vw, 44px); letter-spacing: -.7px; line-height: 1.32; }
  .desktop-break { display: none; }
  .intro { margin-top: 36px; font-size: clamp(18px, 4.8vw, 23px); }
  .contact { margin-top: 30px; gap: 14px; }
  .phone { font-size: 28px; }
  .email { font-size: clamp(19px, 5.3vw, 24px); }
}
@media (max-height: 600px) and (min-width: 601px) {
  .splash { padding-top: 40px; padding-bottom: 40px; }
  .brand { width: 280px; }
  h1 { margin-top: 36px; font-size: 40px; }
  .intro { margin-top: 24px; }
  .contact { margin-top: 20px; gap: 8px; }
}