:root {
  color-scheme: light;
  --background: #f5efe6;
  --cream: #e9ddcc;
  --sand: #cfb79d;
  --sage: #788778;
  --text: #20201e;
  --secondary: #6b685f;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: var(--background);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 280px;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(28px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}
.card { width: 100%; max-width: 342px; text-align: center; }
.brand { margin: 0 0 36px; }
/* Display the original logo from the supplied brand board without redrawing it. */
.logo {
  position: relative;
  overflow: hidden;
  width: 210px;
  height: 199.5px;
  margin: 0 auto 23px;
  mix-blend-mode: darken;
}
.logo img {
  position: absolute;
  width: 639.75px;
  height: 960px;
  max-width: none;
  left: -33.75px;
  top: -36px;
  filter: brightness(1.08);
}
.tagline {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: -.2px;
}
.intro { margin: 0 0 24px; font-size: 14px; line-height: 1.65; color: var(--secondary); }
.messengers { display: grid; gap: 13px; padding: 0; margin: 0; list-style: none; }
.messenger {
  display: flex;
  align-items: center;
  gap: 17px;
  min-height: 64px;
  padding: 16px 21px;
  border: 1px solid #d7c5af;
  border-radius: 20px;
  background: #ede3d5;
  color: var(--text);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .15px;
  box-shadow: 0 2px 5px #57463204;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.icon { width: 23px; height: 23px; flex-shrink: 0; color: #667561; }
.arrow { margin-left: auto; font-size: 24px; line-height: 1; font-weight: 300; color: #827664; }
.messenger:active { transform: scale(.98); background: var(--cream); }
a:focus-visible { outline: 2px solid var(--sage); outline-offset: 5px; }
a[href] { cursor: pointer; }
.footer { margin-top: 29px; }
.divider { width: 48px; height: 1px; margin: 0 auto 23px; background: var(--sand); }
.service { margin: 0; color: var(--secondary); font-size: 12px; line-height: 1.6; letter-spacing: .08px; }
.service span { padding: 0 4px; color: #927d63; }
.instagram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  margin-top: 12px;
  color: #657361;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .6px;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.instagram svg { width: 15px; height: 15px; }
@media (hover: hover) {
  .messenger[href]:hover { background: var(--cream); border-color: var(--sand); }
  .instagram[href]:hover { color: var(--text); }
}
@media (max-height: 740px) {
  body { padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .logo { transform: scale(.88); margin-top: -12px; margin-bottom: 4px; }
  .brand { margin-bottom: 24px; }
  .intro { margin-bottom: 18px; }
  .footer { margin-top: 23px; }
  .divider { margin-bottom: 17px; }
  .instagram { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .messenger { transition: none; }
  .messenger:active { transform: none; }
}