/* Shared palette with the TM owner consultation site. */
:root {
  --navy: #075f51;
  --ink: #153c35;
  --blue: #087568;
  --sky: #e6f1ef;
  --gold: #c99723;
  --pale: #fcfaf5;
  --line: #c4d8d2;
  --white: #fff;
}

body { background: linear-gradient(180deg, #f7fbf8 0, #fcfaf5 520px) !important; color: var(--ink) !important; }
.brand small, .footer-brand small { color: #52766d !important; }
.nav-cta, .links .nav-cta, .nav .back-link { box-shadow: 0 5px 12px #075f511a !important; }
.hero { background: linear-gradient(125deg, #fcfaf5 0%, #f4f0e5 100%) !important; }
.hero:after { background: #fcfaf5 !important; }
.eyebrow, .kicker, .card small { color: var(--navy) !important; }
.under { background: linear-gradient(transparent 68%, #e3c060 0) !important; }
.hero-actions small, .hero p:last-child, .lead, .card p, .owner-copy p, .flow p, .detail-table p, .card p, p, li { color: #55716a; }
.price { border-color: var(--gold) !important; box-shadow: 0 12px 28px #153c352b !important; }
.price b, .icon { color: #f2cd69 !important; }
.hero-photo > img { box-shadow: 18px 18px 0 #d5ad48 !important; }
.stamp { background: var(--sky) !important; color: var(--navy) !important; box-shadow: 0 5px 20px #153c3520 !important; }
.flyer { box-shadow: 0 10px 28px #153c3529 !important; }
.services, .owner-links { background: var(--sky) !important; }
.owner-links { background: linear-gradient(180deg, #fcfaf5 0, var(--sky) 100%) !important; }
.card, .owner-card, .plan-box, .form, .box, .note { border-color: var(--line) !important; box-shadow: 0 8px 24px #153c3510 !important; }
.card, .owner-card, .plan-box, .form, .box { background: #fff !important; }
.plan-box.addon { background: linear-gradient(140deg, #edf6f3, #fff) !important; }
.plan li, .prepare-list li { border-color: #d9e6e1 !important; }
.plan li:before, .flow-num { color: #fff !important; background-color: var(--gold) !important; }
.note { background: #fbf4dc !important; }
.owner-thumb { background: #f5f8f7 !important; }
.owner-card { box-shadow: 0 10px 28px #153c3512 !important; }
.owner-card:hover { box-shadow: 0 16px 34px #153c3522 !important; }
.contact, .top, .bar { background: var(--navy) !important; }
.contact .kicker { color: #f2cd69 !important; }
.contact p { color: #dce8e3 !important; }
.cta, .contact a:not(.footer a) { background: #f2cd69 !important; color: var(--navy) !important; }
.button, .card > a { background: #075f51 !important; color: #fff !important; }
.details { border-color: #8eb6ac !important; }
.footer { background: #063d35 !important; color: #dce8e3 !important; }
.footer-copy { color: #b9d4cd !important; }
.footer-nav a { color: #edf5f1 !important; }
.footer-nav a:hover, .footer a:hover { color: #f2cd69 !important; }
.footer-bottom { border-color: #4f796f !important; color: #a9c7bf !important; }
.foot { background: #edf5f1 !important; color: #55716a !important; }
.code, .label { color: var(--gold) !important; }
a { color: inherit; }
@media (max-width: 760px) { .hero:after { background: #fcfaf5 !important; } }

/* Owner-services directory: retain the same green, mint and gold system. */
main.wrap > .hero {
  max-width: none !important;
  padding: 0 0 3rem !important;
  border-bottom-color: var(--line) !important;
  background: transparent !important;
}

main.wrap > .hero h1,
main.wrap > .grid .card h2,
main.wrap > .contact h2 {
  color: var(--ink) !important;
  font-family: Georgia, "Noto Serif JP", serif !important;
  font-weight: 900 !important;
}

main.wrap > .hero p:last-child,
main.wrap > .grid .card p {
  color: #55716a !important;
}

main.wrap > .grid {
  gap: 1.25rem !important;
  margin-top: 3.5rem !important;
}

main.wrap > .grid .card {
  border-color: #b5d2cb !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 8px 22px #153c3510 !important;
}

main.wrap > .grid .card__image {
  background: #eef5f3 !important;
}

main.wrap > .grid .card__body {
  padding: 1.6rem !important;
}

main.wrap > .grid .card small {
  color: var(--navy) !important;
}

main.wrap > .grid .card b {
  color: var(--blue) !important;
}

main.wrap > .contact {
  margin-top: 5.5rem !important;
  padding: 3rem !important;
  background: var(--navy) !important;
}

main.wrap > .contact h2 { color: #fff !important; }

main.wrap > .contact a {
  border-radius: 8px !important;
  background: #f2cd69 !important;
  color: var(--navy) !important;
}

@media (max-width: 760px) {
  main.wrap > .hero { padding-bottom: 2.25rem !important; }
  main.wrap > .grid { margin-top: 2.5rem !important; }
  main.wrap > .contact { margin-top: 3.75rem !important; padding: 2rem !important; }
}