/* Mangrove & Stone: sand and leaf, the yard as the hero. A wide before/after slider opens the page;
   Bricolage Grotesque headlines with Literata body; the 12-month band is the second signature. */
:root {
  --bg: #EFE6D2; --surface: #F8F3E8; --surface-2: #E5D9C0; --line: #D3C5A7;
  --ink: #1B1B17; --ink-soft: #4C4A40; --heading: #1B1B17;
  --primary: #1E4D2B; --primary-ink: #FFFFFF; --primary-hover: #163A20;
  --accent: #9F4F2C; --accent-ink: #FFFFFF;
  --dark: #1E4D2B; --on-dark: #F4EEDF; --on-dark-soft: #CBD8C8;
  --kicker: #9F4F2C; --kicker-on-dark: #E6B795; --link: #1E4D2B; --field-border: #857A62; --star: #9F4F2C;
  --ph-a: #E3D7BD; --ph-b: #D9CBAE; --ph-edge: #857A62;
  --display: "Bricolage Grotesque", "Segoe UI", sans-serif; --body: "Literata", Georgia, serif;
  --display-weight: 700; --display-lh: 1.02; --display-track: -0.025em; --fs-body: 1.05rem;
  --radius: 8px; --radius-lg: 14px; --btn-radius: 999px; --chip-radius: 999px; --field-radius: 8px;
  --btn-font: "Bricolage Grotesque", sans-serif; --brand-font: "Bricolage Grotesque", sans-serif; --brand-weight: 800;
  --step-bg: #1E4D2B; --step-ink: #FFFFFF;
}
.brand-name span { color: var(--accent); }
.kicker { font-family: var(--display); font-weight: 700; }
h1 em { font-style: normal; color: var(--primary); }
.text-link { font-family: var(--display); font-weight: 700; color: inherit; }
.nav a, .hdr-phone, .menu-btn, label, legend, .chip span, .filters button, .facts, th, .small, .crumbs { font-family: var(--display); }

.hero { position: relative; min-height: min(860px, calc(100svh - 104px)); display: flex; align-items: center; padding-block: clamp(56px, 8vw, 110px); overflow: hidden; background: #1E3A26; isolation: isolate; }
.hero-compare { position: absolute; inset: 0; z-index: 0; }
.hero-compare .compare { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; height: 100%; }
.hero-compare .compare .photo img { object-position: 50% 55%; }
.hero-compare::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, rgba(12, 30, 18, .82) 0%, rgba(12, 30, 18, .55) 38%, rgba(12, 30, 18, .08) 68%, rgba(12, 30, 18, 0) 100%),
              linear-gradient(0deg, rgba(12, 30, 18, .55) 0%, rgba(12, 30, 18, 0) 32%); }
.hero-compare .compare-line { z-index: 4; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .85); }
.hero-compare .compare-line::after { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.hero-compare .compare-tags { z-index: 4; top: auto; bottom: 18px; left: auto; right: 24px; gap: 8px; justify-content: flex-end; }
.hero-compare .compare input { z-index: 5; }
.hero-head { position: relative; z-index: 6; display: grid; gap: 24px; max-width: 640px; margin: 0; margin-inline: max(var(--gutter, 24px), calc((100vw - 1180px) / 2 + 40px)) auto; pointer-events: none; }
.hero-head > * { pointer-events: auto; }
.hero h1 { font-size: clamp(2.6rem, 1.2rem + 4vw, 4.8rem); color: #FFFFFF; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.hero h1 em { color: #BFE08E; }
.hero-side { display: grid; gap: 20px; max-width: 520px; }
.hero .lede { color: #EEE7D7; text-shadow: 0 1px 12px rgba(0, 0, 0, .4); }
.hero .btn--ghost { color: #FFFFFF; border-color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .06); backdrop-filter: blur(4px); }
.hero .btn--ghost:hover { background: rgba(255, 255, 255, .16); color: #FFFFFF; }
.compare-cap { position: absolute; z-index: 6; left: max(var(--gutter, 24px), calc((100vw - 1180px) / 2 + 40px)); bottom: 20px; margin: 0; font-size: 0.85rem; color: #EEE7D7; font-family: var(--display); pointer-events: none; }
.compare-cap span { color: #BFE08E; font-weight: 700; }

.svc-list { display: grid; border-top: 2px solid var(--ink); }
.svc-line { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 20px; align-items: baseline; padding: 22px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: padding-left .2s ease, background-color .2s ease; }
.svc-line:hover { padding-left: 14px; background: var(--surface); color: var(--ink); }
.svc-n { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); }
.svc-d { color: var(--ink-soft); }
.svc-p { font-family: var(--display); font-weight: 700; color: var(--accent); white-space: nowrap; }

.months { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.m { padding: 14px 10px; border-radius: 6px; display: grid; gap: 8px; align-content: start; min-height: 190px; }
.m--dry { background: rgba(244,238,223,.1); }
.m--wet { background: rgba(126,184,212,.22); }
.m-name { font-family: var(--display); font-weight: 800; font-size: 1.1rem; color: var(--on-dark); }
.m-task { font-size: 0.82rem; line-height: 1.4; color: var(--on-dark-soft); }
.season-key { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px; align-items: center; font-family: var(--display); color: var(--on-dark-soft); }
.season-key i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 8px; vertical-align: -2px; }
.k-dry { background: rgba(244,238,223,.3); } .k-wet { background: rgba(126,184,212,.6); }
.season-key .text-link { color: var(--on-dark); margin-left: auto; }

.head-row { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.work { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 16px; }
.work .w1 { grid-row: span 2; --ar: auto !important; height: 100%; min-height: 420px; }
.reviews--stack { grid-template-columns: 1fr; }
.review { background: var(--surface); }
.review blockquote p { font-style: italic; }
.steps--v { grid-template-columns: 1fr; gap: 20px; }
.steps--v > li { grid-template-columns: 46px 1fr; column-gap: 16px; }
.steps--v > li::before { grid-row: span 2; }
.est-card { background: var(--primary); color: #FFFFFF; border-radius: var(--radius-lg); padding: 30px; display: grid; gap: 14px; align-content: start; }
.est-card h3 { color: #FFFFFF; font-size: 1.6rem; }
.est-card p { color: var(--on-dark-soft); }
.est-card .btn { justify-self: start; background: #FFFFFF; color: var(--primary); border-color: #FFFFFF; }
.est-card .call { color: #FFFFFF; font-family: var(--display); font-weight: 700; }

.svc-row { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: start; scroll-margin-top: 100px; }
.price-tag { font-family: var(--display); font-weight: 700; color: var(--accent); font-size: 1.1rem; }
.proj-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
.proj { display: grid; gap: 14px; }
.proj-body h2 { font-size: 1.5rem; }
.proj-meta { list-style: none; padding: 0; display: flex; gap: 24px; margin-top: 6px; font-family: var(--display); }
.proj-meta span { display: block; font-size: 0.8rem; color: var(--ink-soft); }

.season-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.season { border-radius: var(--radius-lg); padding: 28px; display: grid; gap: 14px; align-content: start; }
.season--dry { background: var(--surface); border: 1px solid var(--line); }
.season--wet { background: #DCE8EC; }
.month-list { list-style: none; padding: 0; display: grid; }
.month-list li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.month-list strong { font-family: var(--display); }

@media (max-width: 1020px) { .months { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 820px) {
  .svc-row, .proj-grid, .season-cols { grid-template-columns: 1fr; }
  .hero { min-height: 760px; align-items: flex-end; padding-bottom: 72px; }
  .hero-compare::after { background: linear-gradient(0deg, rgba(12, 30, 18, .9) 0%, rgba(12, 30, 18, .6) 50%, rgba(12, 30, 18, .15) 100%); }
  .hero-compare .compare-tags { top: 14px; bottom: auto; right: 14px; }
  .svc-line { grid-template-columns: 1fr; gap: 4px; }
  .work { grid-template-columns: 1fr; } .work .w1 { grid-row: auto; min-height: 0; --ar: 6 / 7 !important; }
  .months { grid-template-columns: repeat(3, 1fr); }
  .m { min-height: 0; }
}
@media (max-width: 480px) { .months { grid-template-columns: repeat(2, 1fr); } }

/* ---- Motion: growth (Mangrove & Stone Landscapes) ---- */
@keyframes ms-fall { 0% { opacity: 0; transform: translate(0, 0) rotate(0deg); } 10% { opacity: .9; } 50% { transform: translate(var(--sway), 50vh) rotate(calc(var(--r) / 2)); } 90% { opacity: .9; } 100% { opacity: 0; transform: translate(calc(var(--sway) * -.3), 100vh) rotate(var(--r)); } }
@keyframes ms-vine { to { background-size: 100% 4px; } }
@keyframes ms-grow { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
.ms-leaves span { top: -40px; left: var(--x); width: var(--s); height: calc(var(--s) * .55); opacity: 0;
  background: linear-gradient(135deg, #7FA36B, #3E6B3A); border-radius: 0 100% 0 100%; box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .12); }
html.mo .ms-leaves span { animation: ms-fall var(--t) linear var(--bd) infinite; }
html.mo .hero h1 em { background: linear-gradient(#7FA36B, #7FA36B) 0 92% / 0% 4px no-repeat; animation: ms-vine 1.1s .9s cubic-bezier(.6, 0, .2, 1) forwards; }
@keyframes ms-zoom { from { transform: scale(1.08); } to { transform: none; } }
html.mo .hero-compare .compare .photo img { animation: ms-zoom 2.4s cubic-bezier(.2, .7, .2, 1) both; }
html.mo .hero-head > * { animation: bf-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
html.mo .hero-head > :nth-child(2) { animation-delay: .2s; }
html.mo .svc-line { position: relative; transition: background-color .3s ease, padding .3s ease; }
html.mo .svc-line:hover { background: rgba(30, 77, 43, .05); }
html.mo .months.rv.in li { transform-origin: bottom; animation: ms-grow .55s cubic-bezier(.3, 1.3, .5, 1) backwards; animation-delay: calc(var(--i, 0) * 55ms + .2s); }
html.mo .proj .photo img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
html.mo .proj:hover .photo img { transform: scale(1.05); }