/* Brand: butlerseptic.solutions — Lydia Lane lid-slip skin */
:root {
  --maxw: 1100px;
  --but49-mist: color-mix(in srgb, var(--dna-accent) 14%, transparent);
  --but49-soil: color-mix(in srgb, var(--dna-ink) 8%, transparent);
  --but49-radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--dna-ink, #1a2b1c);
  background:
    radial-gradient(820px 380px at 8% -10%, var(--but49-mist), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--dna-bg) 92%, #dce8dd) 0%, var(--dna-bg, #f3f7f3) 42%),
    var(--dna-bg, #f3f7f3);
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--dna-accent, #2f8a3a); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible {
  outline: 2px solid var(--dna-accent, #2f8a3a);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
h1, h2, h3, h4 {
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin: 0 0 .45em;
  font-weight: 650;
}
p { margin: 0 0 1em; color: var(--dna-ink-soft, #4a5c4e); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.eyebrow {
  display: inline-block;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dna-accent, #2f8a3a);
  margin-bottom: 12px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14.5px; gap: 8px;
  padding: 12px 20px; border: 0; cursor: pointer;
  font-family: inherit; text-decoration: none;
  border-radius: 10px;
}
.btn:hover { text-decoration: none; }
.btn-solid {
  background: var(--dna-accent, #2f8a3a);
  color: var(--dna-accent-ink, #fff);
}
.btn-solid:hover { filter: brightness(1.05); }
.btn-ghost {
  background: color-mix(in srgb, var(--dna-bg) 70%, transparent);
  color: var(--dna-ink, #1a2b1c);
  border: 1.5px solid var(--dna-line, #c9d6cb);
}

.but49-skip {
  position: absolute; left: -999px; top: 8px; z-index: 80;
  background: var(--dna-accent); color: var(--dna-accent-ink, #fff);
  padding: 10px 16px; border-radius: 8px; font-weight: 700;
}
.but49-skip:focus { left: 16px; }

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
[data-reveal].in { opacity: 1; transform: none; }

/* ===== topbar ===== */
.but49-topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--dna-bg) 88%, transparent);
  border-bottom: 1px solid var(--dna-line, #c9d6cb);
  backdrop-filter: blur(12px);
}
.but49-topbar-inner {
  display: flex; align-items: center; gap: 18px;
  min-height: 68px;
}
.but49-brand {
  display: flex; align-items: center; gap: 10px;
  color: inherit; text-decoration: none; margin-right: auto;
}
.but49-brand:hover { text-decoration: none; }
.but49-brand b { display: block; font-size: 15px; }
.but49-brand small { display: block; color: var(--dna-ink-soft); font-size: 12px; }
.but49-mark {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--but49-mist);
  color: var(--dna-accent);
}
.but49-mark svg { width: 20px; height: 20px; }
.but49-nav { display: flex; gap: 16px; }
.but49-nav a {
  color: var(--dna-ink-soft); font-weight: 600; font-size: 14px;
  text-decoration: none; padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.but49-nav a:hover, .but49-nav a.active {
  color: var(--dna-ink);
  border-bottom-color: var(--dna-accent);
  text-decoration: none;
}
.but49-hatch {
  display: none; width: 42px; height: 42px;
  border: 1px solid var(--dna-line); background: transparent;
  border-radius: 10px; flex-direction: column; justify-content: center; gap: 5px; padding: 10px;
}
.but49-hatch span {
  display: block; height: 2px; background: var(--dna-ink); border-radius: 2px;
}
.but49-drawer {
  display: none; flex-direction: column; gap: 8px;
  padding: 8px 24px 18px; border-top: 1px solid var(--dna-line);
}
.but49-drawer[aria-hidden="false"] { display: flex; }
.but49-drawer a {
  font-weight: 650; padding: 10px 0; color: var(--dna-ink);
  border-bottom: 1px solid var(--dna-line); text-decoration: none;
}
@media (max-width: 860px) {
  .but49-nav, .but49-top-cta { display: none; }
  .but49-hatch { display: flex; }
}

/* ===== hero bleed + statsled ===== */
.but49-hero {
  position: relative;
  min-height: min(88vh, 760px);
  display: grid;
  align-items: end;
  color: #f4faf5;
  overflow: hidden;
}
.but49-hero-bleed {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 40%;
  transform: scale(1.02);
}
.but49-hero-bleed::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(12, 28, 16, .78) 0%, rgba(12, 28, 16, .42) 48%, rgba(12, 28, 16, .2) 100%),
    linear-gradient(0deg, rgba(12, 28, 16, .7) 0%, transparent 42%);
}
.but49-hero .wrap {
  position: relative; z-index: 1;
  padding-top: 88px; padding-bottom: 36px;
  display: grid; gap: 28px;
}
.but49-hero .eyebrow { color: color-mix(in srgb, #c8f0cc 70%, #fff); }
.but49-hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.35rem);
  max-width: 14ch;
  color: #fff;
}
.but49-hero .sub {
  max-width: 38ch;
  color: rgba(244, 250, 245, .88);
  font-size: 1.05rem;
}
.but49-hero .cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.but49-hero .btn-ghost {
  border-color: rgba(255,255,255,.35);
  color: #fff;
  background: rgba(255,255,255,.08);
}
.but49-hero .metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--but49-radius);
  overflow: hidden;
  max-width: 640px;
}
.but49-hero .metric {
  background: rgba(10, 24, 14, .55);
  padding: 16px 18px;
  backdrop-filter: blur(8px);
}
.but49-hero .metric b { display: block; font-size: 1.15rem; color: #fff; }
.but49-hero .metric span { color: rgba(244,250,245,.72); font-size: 13px; }
@media (max-width: 640px) {
  .but49-hero .metrics { grid-template-columns: 1fr; }
  .but49-hero { min-height: 78vh; }
}

/* ===== about statsled ===== */
.but49-about { padding: 88px 0 64px; }
.but49-about h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); max-width: 18ch; }
.but49-about > .wrap > p { max-width: 58ch; }
.but49-about .stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.but49-about .stat {
  padding: 18px 16px;
  border-radius: var(--but49-radius);
  background: var(--dna-surface, #fff);
  border: 1px solid var(--dna-line, #c9d6cb);
  box-shadow: 0 10px 30px var(--but49-soil);
}
.but49-about .stat b { display: block; font-size: 1.2rem; color: var(--dna-accent); }
.but49-about .stat span { font-size: 13px; color: var(--dna-ink-soft); }
@media (max-width: 800px) {
  .but49-about .stats { grid-template-columns: 1fr 1fr; }
}

/* ===== pricing ===== */
.but49-pricing { padding: 24px 0 56px; }
.but49-pricing h2 { font-size: clamp(1.55rem, 2.6vw, 2.1rem); max-width: 16ch; }
.but49-pricing > .wrap > p { max-width: 52ch; }
.but49-price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.but49-price-grid article {
  padding: 22px 18px;
  border-radius: var(--but49-radius);
  background: var(--dna-surface, #fff);
  border: 1px solid var(--dna-line);
}
.but49-price-grid b {
  display: block;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dna-accent);
  margin-bottom: 8px;
}
.but49-price-grid h3 { font-size: 1.1rem; }
@media (max-width: 800px) {
  .but49-price-grid { grid-template-columns: 1fr; }
}

/* ===== solutions ===== */
.but49-solutions { padding: 20px 0 56px; }
.but49-solutions h2 { font-size: clamp(1.55rem, 2.6vw, 2.1rem); max-width: 16ch; }
.but49-sol-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.but49-sol-grid article {
  padding: 22px;
  border-radius: var(--but49-radius);
  background: var(--dna-surface, #fff);
  border: 1px solid var(--dna-line);
}
.but49-sol-grid .ic {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--but49-mist); color: var(--dna-accent);
  margin-bottom: 12px;
}
@media (max-width: 800px) {
  .but49-sol-grid { grid-template-columns: 1fr; }
}

/* ===== testimonials ===== */
.but49-notes { padding: 20px 0 72px; }
.but49-notes h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); max-width: 16ch; }
.but49-note-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 20px;
}
.but49-note-grid blockquote {
  margin: 0;
  padding: 22px;
  border-radius: var(--but49-radius);
  background: var(--dna-surface);
  border: 1px solid var(--dna-line);
}
.but49-note-grid p {
  color: var(--dna-ink);
  font-size: 1.05rem;
  line-height: 1.45;
}
.but49-note-grid cite {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: var(--dna-ink-soft);
  font-weight: 650;
}
@media (max-width: 720px) {
  .but49-note-grid { grid-template-columns: 1fr; }
}

/* ===== services feature ===== */
.but49-svc { padding: 48px 0 80px; }
.but49-svc .head { max-width: 52ch; margin-bottom: 28px; }
.but49-svc h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.but49-svc .grid {
  display: grid;
  grid-template-columns: 1.25fr .9fr;
  gap: 18px;
  align-items: stretch;
}
.but49-svc .lead {
  padding: 24px;
  border-radius: calc(var(--but49-radius) + 4px);
  background: var(--dna-surface, #fff);
  border: 1px solid var(--dna-line);
  display: grid; gap: 12px;
}
.but49-svc .lead > span {
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dna-accent);
}
.but49-svc .lead img {
  width: 100%; height: 220px; object-fit: cover;
  border-radius: 12px; margin-top: 8px;
}
.but49-svc .side { display: grid; gap: 14px; }
.but49-svc .item {
  padding: 20px;
  border-radius: var(--but49-radius);
  background: color-mix(in srgb, var(--dna-surface) 80%, var(--but49-mist));
  border: 1px solid var(--dna-line);
}
.but49-svc .item h4 { margin-bottom: .35em; }
@media (max-width: 860px) {
  .but49-svc .grid { grid-template-columns: 1fr; }
}

/* ===== pricing (unused on home; keep utilities lean) ===== */

/* ===== process steps ===== */
.but49-proc { padding: 48px 0 72px; }
.but49-proc .head { max-width: 48ch; margin-bottom: 24px; }
.but49-proc .grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.but49-proc .step {
  padding: 20px;
  border-radius: var(--but49-radius);
  background: var(--dna-surface);
  border: 1px solid var(--dna-line);
}
.but49-proc .n {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--dna-accent); color: var(--dna-accent-ink, #fff);
  font-weight: 700; font-size: 14px; margin-bottom: 12px;
}
@media (max-width: 900px) {
  .but49-proc .grid { grid-template-columns: 1fr 1fr; }
}

/* ===== trust metricbar ===== */
.but49-trust { padding: 20px 0 64px; }
.but49-trust .bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--dna-line);
  border: 1px solid var(--dna-line);
  border-radius: var(--but49-radius);
  overflow: hidden;
}
.but49-trust .m {
  background: var(--dna-surface);
  padding: 22px 18px;
  text-align: center;
}
.but49-trust .m b { display: block; font-size: 1.05rem; }
.but49-trust .m span { font-size: 13px; color: var(--dna-ink-soft); }
@media (max-width: 720px) {
  .but49-trust .bar { grid-template-columns: 1fr 1fr; }
}

/* ===== cta boxed ===== */
.but49-cta { padding: 20px 0 96px; }
.but49-cta .box {
  padding: clamp(28px, 5vw, 48px);
  border-radius: calc(var(--but49-radius) + 6px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--dna-accent) 18%, transparent), transparent 55%),
    var(--dna-surface-2, var(--dna-surface));
  border: 1px solid var(--dna-line);
  text-align: center;
}
.but49-cta h2 { font-size: clamp(1.5rem, 2.8vw, 2.15rem); max-width: 18ch; margin-left: auto; margin-right: auto; }
.but49-cta p { max-width: 42ch; margin-left: auto; margin-right: auto; }

/* ===== page chrome ===== */
.but49-page-hero { padding: 56px 0 28px; }
.but49-page-hero h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); max-width: 16ch; }
.but49-page-hero p { max-width: 48ch; }

.but49-about-split { padding: 20px 0 48px; }
.but49-about-split-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: center;
}
.but49-about-split-grid img {
  width: 100%; height: 360px; object-fit: cover;
  border-radius: calc(var(--but49-radius) + 4px);
  border: 1px solid var(--dna-line);
}
@media (max-width: 860px) {
  .but49-about-split-grid { grid-template-columns: 1fr; }
  .but49-about-split-grid img { height: 260px; }
}

.but49-legal { padding: 10px 0 80px; }
.but49-legal p { max-width: 62ch; }

/* ===== contact split-left ===== */
.but49-contact { padding: 10px 0 96px; }
/* Beat site-dna.css: that sheet turns [data-contact-root] into a 320px + 1fr
   grid. The root must be the inner wrap (two real children), full page width. */
.but49-contact .but49-contact-grid[data-contact-root] {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  max-width: var(--maxw);
}
.but49-contact [data-contact-info] {
  display: grid; gap: 18px;
  padding: 22px 24px;
  border-radius: var(--but49-radius);
  background: var(--dna-surface);
  border: 1px solid var(--dna-line);
  min-width: 0;
}
.but49-contact .contact-block h2 {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dna-accent); margin-bottom: 6px;
}
.but49-contact .contact-block p,
.but49-contact .contact-block a {
  margin: 0;
  overflow-wrap: normal;
  word-break: normal;
}
@media (max-width: 900px) {
  .but49-contact .but49-contact-grid[data-contact-root] { grid-template-columns: 1fr; }
}

/* ===== compact booking lid-slip ===== */
.but49-slip {
  border-radius: calc(var(--but49-radius) + 4px);
  border: 1px solid var(--dna-line);
  border-top: 4px solid var(--dna-accent);
  background: var(--dna-surface, #fff);
  overflow: hidden;
  box-shadow: 0 18px 40px var(--but49-soil);
  min-width: 0;
}
.but49-slip-body { padding: 24px 26px 28px; }
.but49-slip h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); max-width: 18ch; }
.but49-pills {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 16px 0 18px;
}
.but49-pill {
  text-align: left;
  border: 1.5px solid var(--dna-line);
  background: color-mix(in srgb, var(--dna-bg) 70%, #fff);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  font-family: inherit;
}
.but49-pill b { display: block; font-size: 13.5px; color: var(--dna-ink); }
.but49-pill small { color: var(--dna-ink-soft); font-size: 12px; }
.but49-pill.is-on {
  border-color: var(--dna-accent);
  background: var(--but49-mist);
  box-shadow: inset 0 0 0 1px var(--dna-accent);
}
.but49-slip label {
  display: block; font-weight: 650; font-size: 13px; margin-bottom: 6px;
}
.but49-slip input[type="tel"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--dna-line);
  font: inherit;
  background: var(--dna-bg);
  color: var(--dna-ink);
}
.but49-err {
  display: none;
  color: #9b2c2c;
  font-size: 13px;
  margin: 8px 0 0;
}
.but49-err.is-show { display: block; }
.but49-acts {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 14px;
}
.but49-thanks {
  padding: 36px 26px;
}
.but49-thanks span {
  display: inline-block;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--dna-accent); margin-bottom: 10px;
}
.but49-thanks b {
  display: block;
  font-size: 1.35rem;
  margin-bottom: 8px;
}
@media (max-width: 560px) {
  .but49-slip-body { padding: 20px 16px 22px; }
  .but49-pills { grid-template-columns: 1fr; }
}

/* ===== footer columns ===== */
.but49-foot {
  border-top: 1px solid var(--dna-line);
  padding: 42px 0 28px;
  background: color-mix(in srgb, var(--dna-surface) 70%, var(--but49-mist));
}
.but49-foot-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 22px;
  margin-bottom: 24px;
}
.but49-foot b { display: block; margin-bottom: 8px; }
.but49-foot p { margin: 0; font-size: 14px; }
.but49-foot-copy { color: var(--dna-ink-soft); }
@media (max-width: 720px) {
  .but49-foot-grid { grid-template-columns: 1fr; }
}