/* Footsteps Septic & Heavy Equipment — Site v1 */
:root{
  --bg:#0e1110; --surface:#101613; --text:#f2f6f3; --muted:#a6b6ad;
  --brand:#0b5c24; --brand-mid:#267d36; --brand-light:#57a54a;
  --accent:#ffd75e; --accent2:#fff2a8;
  --ring:#57a54a; --border:#1f2a23; --card:#141b17;
  --radius:16px; --shadow:0 12px 35px rgba(0,0,0,.35);
  --step--1:.95rem; --step-0:1.05rem; --step-1:1.35rem; --step-2:1.9rem; --step-3:2.6rem; --step-4:3.2rem;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f7fbf8; --surface:#ffffff; --text:#0f1a13; --muted:#4f6358;
         --ring:#0b5c24; --border:#e5efe9; --card:#ffffff; }
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font:400 var(--step-0)/1.6 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:
    radial-gradient(1100px 520px at 10% -10%, color-mix(in oklab, var(--brand-light) 28%, transparent) 0, transparent 70%) no-repeat,
    radial-gradient(800px 480px at 90% 20%, color-mix(in oklab, var(--brand-mid) 22%, transparent) 0, transparent 70%) no-repeat,
    var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0 0 .5rem;line-height:1.2}
h1{font-size:var(--step-4);letter-spacing:-.02em}
h2{font-size:var(--step-2)} h3{font-size:var(--step-1)}
p{margin:.7rem 0 0}
.container{width:min(1100px,92vw);margin-inline:auto}
.kicker{color:var(--muted);font-size:.98rem}

.header{position:sticky;top:0;z-index:30;background:linear-gradient(90deg, var(--brand-mid), var(--brand-light));
  border-bottom:1px solid color-mix(in oklab, var(--brand-light), black 20%);box-shadow:0 6px 16px rgba(0,0,0,.2)}
.header .inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 0}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:900}
.brand img{height:120px;width:auto;border-radius:6px;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.15)}width:auto;border-radius:6px;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.15)}
.nav{display:none} .nav ul{list-style:none;display:flex;gap:.4rem;padding:0;margin:0;flex-wrap:wrap}
.nav a{color:#fff;padding:.55rem .8rem;border-radius:.7rem;font-weight:700;transition:color .2s, background .2s}
.nav a:hover,.nav a:focus-visible{color:#06240f;background:color-mix(in oklab,#ffffff,var(--brand-light) 85%)}
.nav a.active{box-shadow:inset 0 0 0 2px color-mix(in oklab,#000,#fff 80%)}
.toggle{display:inline-flex;flex-direction:column;gap:4px;border:1px solid var(--border);background:var(--surface);padding:.45rem .55rem;border-radius:.6rem}
.toggle .bar{width:20px;height:2px;background:#ffffff}
@media (min-width: 900px){.nav{display:block !important}.toggle{display:none}}

.banner{background:linear-gradient(90deg, var(--accent), var(--accent2)); color:#06200d; text-align:center; font-weight:900; padding:.7rem 1rem; box-shadow:0 6px 22px rgba(0,0,0,.25); animation:flash 1s steps(2,end) infinite}
.banner a{text-decoration:underline}
@keyframes flash{0%,49%{filter:brightness(1)}50%,100%{filter:brightness(1.35)}}
@media (prefers-reduced-motion: reduce){ .banner{animation:none} }

.hero{padding:5rem 0 3rem}
.hero .grid{display:grid;gap:2rem;grid-template-columns:1.15fr .85fr}
@media (max-width:900px){.hero .grid{grid-template-columns:1fr}}
.cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1rem}
.btn{display:inline-block;padding:.8rem 1.1rem;border-radius:.9rem;border:1px solid var(--border);background:var(--surface);color:var(--text);font-weight:800;box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand-mid));color:#03150a;border-color:color-mix(in oklab,var(--brand),black 15%)}
.btn.ghost{background:transparent}
.btn:focus-visible{outline:3px solid var(--ring);outline-offset:2px}

.section{padding:3.6rem 0}
.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow);display:grid;gap:.5rem}
.two-col{display:grid;gap:2rem;grid-template-columns:1.1fr .9fr} @media (max-width:900px){.two-col{grid-template-columns:1fr}}

.table{width:100%;border-collapse:separate;border-spacing:0;border-radius:12px;border:1px solid var(--border);overflow:hidden}
.table th,.table td{padding:.7rem .8rem;border-bottom:1px solid var(--border)} .table th{text-align:left;background:color-mix(in oklab,var(--surface),white 5%)}
.table tr:last-child td{border-bottom:0}

.field{display:grid;gap:.35rem;margin-bottom:.9rem}
input,textarea,select{width:100%;padding:.7rem .8rem;border-radius:.6rem;border:1px solid var(--border);background:var(--surface);color:var(--text)}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--ring);outline-offset:2px}

.footer{border-top:1px solid var(--border);padding:2rem 0;color:var(--muted)}
.footer .inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer nav{display:flex;gap:.8rem;flex-wrap:wrap}
.footer a:hover{color:var(--text)}

.gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.gallery a{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);background:var(--card)}
.gallery img{display:block;width:100%;height:auto}