:root {
  --ink: #493025;
  --ink-2: #654334;
  --cream: #f1e3cc;
  --paper: #fffaf2;
  --teal: #94502e;
  --teal-light: #efd0a0;
  --lime: #edc576;
  --rust: #a4472b;
  --muted: #776052;
  --line: rgba(73, 48, 37, .17);
  --shadow: 0 24px 70px rgba(73, 48, 37, .15);
  --shadow-soft: 0 20px 45px rgba(73, 48, 37, .09);
}

body {
  background: linear-gradient(180deg, #f8edda, var(--paper) 70%);
}

body::before {
  background-image: radial-gradient(circle at 10% 10%, rgba(164, 71, 43, .2), transparent 20%), radial-gradient(circle at 90% 20%, rgba(173, 122, 46, .2), transparent 24%);
}

::selection {
  color: var(--ink);
  background: #efd0a0;
}

:focus-visible {
  outline: 3px solid #a4472b;
  outline-offset: 4px;
}

.services :focus-visible,
.contact :focus-visible,
.footer :focus-visible {
  outline-color: var(--lime);
}

.contact-form :focus-visible {
  outline-color: var(--rust);
}

.site-header.scrolled,
body:not(:has(.hero)) .site-header {
  background: rgba(255, 250, 242, .94);
  box-shadow: 0 10px 35px rgba(73, 48, 37, .09);
}

.hero {
  background:
    radial-gradient(ellipse at 90% 15%, rgba(188, 104, 59, .2), transparent 44%),
    radial-gradient(ellipse at 5% 80%, rgba(237, 197, 118, .25), transparent 42%),
    linear-gradient(135deg, #fff7e9, #f0dfc3 70%, #ead0ac);
}

.hero::before {
  top: -120px;
  right: -100px;
  width: clamp(320px, 44vw, 620px);
  height: clamp(370px, 51vw, 720px);
  border: 0;
  border-radius: 0;
  background: url("autumn-leaf.svg") center / contain no-repeat;
  box-shadow: none;
  opacity: .12;
  transform: rotate(28deg);
  animation: none;
  pointer-events: none;
}

.hero::after {
  right: 43%;
  bottom: 22px;
  width: 110px;
  height: 130px;
  border-radius: 0;
  background: url("autumn-leaf.svg") center / contain no-repeat;
  opacity: .45;
  filter: none;
  animation: autumn-sway 9s ease-in-out infinite;
}

.hero h1 em {
  color: var(--rust);
}

.house-shape {
  background: linear-gradient(145deg, #80563b, #493025 75%);
}

.hero-visual::before,
.hero-visual::after {
  content: "";
  position: absolute;
  z-index: 4;
  width: 80px;
  height: 96px;
  background: url("autumn-leaf.svg") center / contain no-repeat;
  pointer-events: none;
}

.hero-visual::before {
  top: 48px;
  left: 8px;
  transform: rotate(-35deg);
}

.hero-visual::after {
  right: 8px;
  top: 140px;
  width: 52px;
  height: 65px;
  transform: rotate(50deg);
  opacity: .8;
}

.visual-logo {
  background: var(--paper);
  box-shadow: 0 24px 55px rgba(73, 48, 37, .22);
}

.tool-line {
  background: #805033;
  box-shadow: 0 16px 35px rgba(73, 48, 37, .22);
}

.button-primary {
  background: linear-gradient(135deg, var(--rust), #934027);
  box-shadow: 0 14px 28px rgba(164, 71, 43, .2);
}

.button-primary:hover {
  background: linear-gradient(135deg, #923c24, #77321f);
  box-shadow: 0 18px 34px rgba(164, 71, 43, .25);
}

.button-secondary {
  border-color: rgba(73, 48, 37, .28);
  background: rgba(255, 250, 242, .75);
}

.about-card {
  background: linear-gradient(135deg, #95603a, #71442c);
}

.services {
  background: linear-gradient(145deg, #38271f, var(--ink));
}

.services-head p,
.service-card p,
.service-note {
  color: #dbc6b5;
}

.service-card:hover {
  border-color: rgba(237, 197, 118, .6);
}

.service-card:nth-child(1) {
  background: #87532f;
  border-color: #a57749;
}

.service-card:nth-child(6) {
  background: #93432d;
  border-color: #ba7558;
}

.process::after {
  border-color: rgba(173, 122, 46, .12);
}

.process-step:not(:last-child)::before {
  background: var(--line);
}

.reviews-badge {
  background: linear-gradient(135deg, var(--cream), #fcf1de);
  border: 1px solid var(--line);
}

.contact {
  background: linear-gradient(135deg, #724b32, #493025);
}

.contact-form {
  background: var(--paper);
  border-color: var(--line);
}

.field input,
.field select,
.field textarea {
  background: #f7eddd;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--rust);
  box-shadow: 0 0 0 4px rgba(164, 71, 43, .14);
}

.field input::placeholder,
.field textarea::placeholder {
  color: #806c5e;
}

.footer {
  color: #dbc6b5;
  background: #30231d;
}

.footer-links a {
  color: #dbc6b5;
}

.content a:not(.back-link) {
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.back-link {
  background: var(--rust);
}

.back-link:hover {
  background: #77321f;
}

body:not(:has(.hero)) .footer {
  background: var(--cream);
  color: var(--ink);
}

@keyframes autumn-sway {
  0%, 100% { transform: translateY(0) rotate(-25deg); }
  50% { transform: translateY(-12px) rotate(-15deg); }
}

@media (max-width: 680px) {
  .site-header,
  .mobile-actions {
    background: rgba(255, 250, 242, .96);
    box-shadow: 0 10px 30px rgba(73, 48, 37, .1);
  }

  .mobile-actions {
    border-top-color: var(--line);
    box-shadow: 0 -16px 40px rgba(73, 48, 37, .12);
  }

  .hero::before {
    top: -80px;
    right: -170px;
  }

  .hero::after {
    right: auto;
    left: 8px;
    bottom: 8px;
    width: 65px;
    height: 80px;
    opacity: .25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::after {
    animation: none;
  }
}