/* Selected direction 3: flat stone palette, no gradients or background lighting. */
:root {
  --orange: #ff8200;
  --gray: #686761;
  --text: #2c2d2f;
  --muted: #686761;
  --line: #cec9c0;
  --soft: #ddd9d1;
  --white: #ffffff;
  --surface: #faf9f6;
  --hero: #f1efea;
  --radius: 6px;
}

*,
*::before,
*::after {
  box-shadow: none !important;
}

body {
  background: #ffffff;
  color: var(--text);
}

.site-header {
  background: #ffffff;
  border-color: var(--line);
}

.hero,
.page-hero {
  background: var(--hero);
}

.section.soft {
  background: var(--soft);
}

.card,
.hero-card,
.band,
.note,
.footer,
input,
select,
textarea {
  background: var(--surface);
  border-color: var(--line);
}

.placeholder {
  background: #e7e3dc;
  border-color: var(--line);
}

.btn.secondary,
.footer {
  background: #ffffff;
}

.site-header,
.language-toggle,
.contact-fab,
.contact-popover,
.scroll-dock button {
  box-shadow: none;
}

.language-toggle {
  border: 1px solid var(--line);
  border-radius: 6px;
}

.language-toggle a {
  background: #777773;
}

.contact-dock {
  right: 16px;
  bottom: 22px;
  gap: 8px;
}

.contact-fab {
  width: 42px;
  height: 42px;
  border-width: 1px;
  box-shadow: none;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}

.contact-fab:hover {
  transform: translateY(-1px);
  box-shadow: none;
}

.contact-fab svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.65;
}

.contact-fab--email {
  background: #ffffff;
  border-color: var(--orange);
  color: var(--orange);
}

.contact-fab--whatsapp,
.contact-fab--wechat,
.contact-fab--line {
  background: #ffffff;
  border-color: #9aa39d;
  color: #278a59;
}

.contact-popover {
  right: 50px;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: none;
}

.scroll-dock {
  left: 16px;
  bottom: 22px;
  gap: 7px;
}

.scroll-dock button {
  width: 38px;
  height: 38px;
  border-color: var(--line);
  background: #ffffff;
  box-shadow: none;
  transition: transform .16s ease, border-color .16s ease, color .16s ease;
}

.scroll-dock button:hover {
  transform: translateY(-1px);
  border-color: var(--orange);
  color: var(--orange);
}

.scroll-dock svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.8;
}

.brand img {
  height: 40px;
}

.footer-logo {
  width: 220px;
}

@media (max-width: 600px) {
  .contact-dock {
    right: 10px;
    bottom: 14px;
    gap: 7px;
  }

  .contact-fab {
    width: 38px;
    height: 38px;
  }

  .contact-fab svg {
    width: 17px;
    height: 17px;
  }

  .contact-popover {
    right: 46px;
  }

  .scroll-dock {
    left: 10px;
    bottom: 14px;
    gap: 6px;
  }

  .scroll-dock button {
    width: 35px;
    height: 35px;
  }

  .scroll-dock svg {
    width: 16px;
    height: 16px;
  }

  .brand img {
    height: 32px;
  }

  .footer-logo {
    width: 190px;
  }
}