:root {
  --paper: #fbf3e3;
  --ink: #30382a;
  --olive: #465139;
  --clay: #9d6654;
  --sage: #d9dece;
  --rose: #b77f74;
  --gold: #b69a62;
  --line: #d6cfbf;
}

body {
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(251, 243, 227, .18), rgba(251, 243, 227, .18)),
    url('/forest-watercolor-bg.jpg');
}

header { border-bottom-color: rgba(182, 154, 98, .38); }
.eyebrow { color: var(--olive); }

.hero .photo img,
.about-photo img {
  box-shadow: 0 24px 55px rgba(48, 56, 42, .16);
}
.hero .photo::before,
.about-photo::before {
  border-color: rgba(182, 154, 98, .55);
}

.button {
  border-color: rgba(182, 154, 98, .72);
  background: linear-gradient(145deg, #515e44, #3f4935);
  box-shadow: 0 8px 20px rgba(48, 56, 42, .13);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 11px 24px rgba(48, 56, 42, .18);
}
.outline {
  background: rgba(251, 243, 227, .42);
  color: var(--ink);
  box-shadow: none;
}

.quiet-line {
  border-color: rgba(182, 154, 98, .34);
  background: rgba(217, 222, 206, .48);
}

.review-card {
  border-color: rgba(182, 154, 98, .3);
  border-radius: 22px 22px 7px 7px;
  background: rgba(251, 243, 227, .92);
  box-shadow: 0 14px 34px rgba(48, 56, 42, .08);
}

.content-grid aside > .rule {
  padding: 30px;
  border: 1px solid rgba(182, 154, 98, .28);
  border-radius: 24px 24px 7px 7px;
  background: rgba(251, 243, 227, .56);
}

.soft-section {
  background: linear-gradient(135deg, rgba(217, 222, 206, .75), rgba(251, 243, 227, .45));
}
.support-section { background: #465139; }
.final-section { background: rgba(251, 243, 227, .46); }

.text-cta {
  position: relative;
  overflow: hidden;
  border-color: rgba(182, 154, 98, .34);
  border-radius: 34px 34px 8px 8px;
  background: linear-gradient(125deg, rgba(217, 222, 206, .93), rgba(251, 243, 227, .96) 58%, rgba(183, 127, 116, .16));
  box-shadow: 0 18px 42px rgba(48, 56, 42, .09);
}
.text-cta::after {
  content: '';
  position: absolute;
  right: -18px;
  bottom: -24px;
  width: 150px;
  height: 100px;
  background: url('/botanical-sprig.svg') center / contain no-repeat;
  opacity: .25;
  pointer-events: none;
}
.text-cta > * { position: relative; z-index: 1; }

.closing {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, rgba(217, 222, 206, .9), rgba(251, 243, 227, .75), rgba(183, 127, 116, .18));
}
.closing::before {
  content: '';
  position: absolute;
  right: 5%;
  top: -8px;
  width: 170px;
  height: 110px;
  background: url('/botanical-sprig.svg') center / contain no-repeat;
  opacity: .2;
  pointer-events: none;
}
.closing > * { position: relative; }

.scheduler {
  border: 1px solid rgba(182, 154, 98, .3);
  background: rgba(251, 243, 227, .68);
  box-shadow: 0 18px 42px rgba(48, 56, 42, .08);
}

footer { border-top: 1px solid rgba(182, 154, 98, .28); }

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}

@media (max-width: 760px) {
  .content-grid aside > .rule { padding: 24px; }
  .text-cta { border-radius: 26px 26px 7px 7px; }
  .text-cta::after { width: 110px; height: 75px; opacity: .18; }
  .closing::before { width: 120px; height: 80px; }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand-mark {
  display: block;
  width: 44px;
  height: auto;
  flex: 0 0 auto;
  opacity: .92;
  mix-blend-mode: multiply;
  transform: translateY(4px);
}
.brand-words { display: block; }
.brand small { margin-top: 7px; }

@media (max-width: 760px) {
  .brand { gap: 8px; }
  .brand-mark { width: 40px; }
}