/* Shreveport Drainage — water-management clean: deep teal + water green */
:root{
  --primary:#12414A;
  --primary-dk:#0A2A31;
  --accent:#3E8F5A;
  --accent-dk:#2E6E44;
  --bg:#F4F7F7;
  --panel:#ffffff;
  --text:#16262A;
  --muted:#4A5A5E;
  --line:#D1DCDE;
  --slate:#2B3B40;   /* footer slate */
  --sans:'Open Sans', system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --head:'Rubik', 'Segoe UI', system-ui, sans-serif;
  --wrap:1160px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans);color:var(--text);background:var(--bg);line-height:1.7;font-size:16.5px}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent-dk)}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;color:var(--primary-dk);line-height:1.25;margin:.7em 0 .45em;letter-spacing:-.01em}
h1{font-size:2.3rem;font-weight:700}
h2{font-size:1.55rem;margin-top:2em;position:relative;padding-left:.85rem}
h2::before{content:'';position:absolute;left:0;top:.28em;bottom:.28em;width:5px;background:var(--accent);border-radius:2px}
h3{font-size:1.15rem;color:var(--primary);font-weight:600}
h4{font-size:1rem;color:var(--primary-dk);font-weight:700}
p{margin:.55em 0}
ul,ol{margin:.55em 0 .8em 1.35em;padding:0}
li{margin:.28em 0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}

/* Utility strip */
.utility-strip{background:var(--slate);color:#C8D6D9;font-size:.88rem}
.utility-strip .wrap{display:flex;justify-content:space-between;align-items:center;padding:.45rem 22px;gap:1rem;flex-wrap:wrap}
.utility-strip a{color:#8FCCA6;text-decoration:none;font-weight:600}
.utility-strip a:hover{color:#fff}
.utility-strip .middle{color:#8B9AA0;font-style:normal;letter-spacing:.06em;text-transform:uppercase;font-size:.78rem}

/* Header */
.site-header{background:var(--panel);border-bottom:1px solid var(--line);padding:.95rem 0;box-shadow:0 1px 0 rgba(18,65,74,.04)}
.site-header .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--primary-dk);font-family:var(--head);font-size:1.14rem;font-weight:700;letter-spacing:-.01em}
.brand img{border-radius:6px}
.primary{display:flex;gap:1.15rem;align-items:center;flex-wrap:wrap}
.primary a{color:var(--text);text-decoration:none;font-weight:600;font-size:.94rem}
.primary a:hover{color:var(--accent-dk)}
.primary a.cta{background:var(--accent);color:#fff;padding:.6rem 1.1rem;border-radius:4px;border:1px solid var(--accent-dk);text-decoration:none}
.primary a.cta:hover{background:var(--accent-dk);color:#fff}

/* Hero — clean water-management panel: teal wash + green accent bar */
.hero{background:linear-gradient(135deg,#0A2A31 0%,#12414A 45%,#1B5A66 100%);color:#F0F5F6;padding:3.6rem 0 3.2rem;position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(90deg,var(--accent) 0%,#5FB57C 100%)}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:#fff;font-size:2.55rem;max-width:920px;font-weight:700}
.hero .kicker{letter-spacing:.16em;text-transform:uppercase;color:#8FCCA6;font-size:.82rem;font-weight:600;margin:0 0 .7rem}
.hero .subhead{font-size:1.1rem;color:#CFDDE0;max-width:800px;margin:.7rem 0 1.5rem;line-height:1.6}
.hero .cta-row{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.2rem}
.btn{display:inline-block;padding:.85rem 1.5rem;font-weight:600;text-decoration:none;border-radius:4px;font-size:1rem;letter-spacing:.01em;border:2px solid transparent;transition:.15s;font-family:var(--head)}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent-dk)}
.btn.primary:hover{background:var(--accent-dk);color:#fff}
.btn.ghost{background:transparent;color:#fff;border-color:#8FCCA6;color:#E7F5EC}
.btn.ghost:hover{background:#8FCCA6;color:var(--primary-dk);border-color:#8FCCA6}

/* Trust band */
.trust-band{background:#EBF1F1;border-bottom:1px solid var(--line);padding:.85rem 0}
.trust-band p{margin:0;text-align:center;color:var(--muted);font-size:.92rem;font-weight:500;letter-spacing:.01em}

/* Sections */
section{padding:2.2rem 0}
section.alt{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section.dark{background:var(--slate);color:#D5DFE1}
section.dark h2{color:#fff}
section.dark h2::before{background:#8FCCA6}
section.dark a{color:#8FCCA6}

/* Card grid — diagram-style tiles with subtle green top-bar */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.05rem;margin:1.3rem 0}
.card{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--accent);padding:1.15rem 1.25rem;border-radius:2px;box-shadow:0 1px 2px rgba(18,65,74,.04)}
.card h3{margin-top:0;font-size:1.1rem}
.card p{color:var(--muted);font-size:.94rem}
.card a{font-weight:600}

/* Cost table */
.cost-table{width:100%;border-collapse:collapse;margin:1.4rem 0;background:var(--panel);border:1px solid var(--line);font-size:.95rem}
.cost-table th,.cost-table td{padding:.75rem .9rem;text-align:left;border-bottom:1px solid var(--line)}
.cost-table th{background:var(--primary);color:#fff;font-family:var(--head);letter-spacing:.02em;font-weight:600}
.cost-table tr:nth-child(even){background:#F4F7F7}

/* Contact form */
.contact-form{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--accent);padding:1.5rem;border-radius:2px;max-width:720px}
.contact-form fieldset{border:none;padding:0;margin:0 0 1rem}
.contact-form legend{font-family:var(--head);font-weight:700;color:var(--primary-dk);font-size:1.1rem;margin-bottom:.55rem}
.contact-form label{display:block;margin:.5rem 0;font-weight:500}
.contact-form input[type=text],.contact-form input[type=tel],.contact-form input[type=email],.contact-form select,.contact-form textarea{
  width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:3px;font:inherit;background:#fff
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.contact-form .radio-row{display:flex;gap:1rem;margin:.3rem 0 .7rem}
.contact-form .radio-row label{display:flex;align-items:center;gap:.35rem;margin:0;font-weight:400}
.contact-form .consent{display:flex;gap:.55rem;align-items:flex-start;font-size:.88rem;color:var(--muted);margin:.7rem 0}
.contact-form .consent input{margin-top:.25rem}
.contact-form .honey{display:none !important}
.contact-form .submit-row{margin-top:1.15rem}
.contact-form button{background:var(--accent);color:#fff;border:2px solid var(--accent-dk);border-radius:4px;padding:.9rem 1.6rem;font-weight:700;font-family:var(--head);font-size:1rem;cursor:pointer;letter-spacing:.02em}
.contact-form button:hover{background:var(--accent-dk)}

/* Pre-footer CTA panel */
.cta-panel{background:var(--primary);color:#fff;padding:1.9rem 1.6rem;border-radius:4px;margin:2rem 0;text-align:center;border-left:5px solid var(--accent)}
.cta-panel h3{color:#fff;font-size:1.35rem;margin:0 0 .55rem}
.cta-panel p{color:#CFDDE0;margin:.5rem auto 1rem;max-width:640px}
.cta-panel .btn.primary{background:var(--accent);color:#fff;border-color:var(--accent-dk)}
.cta-panel .btn.primary:hover{background:#fff;color:var(--primary-dk);border-color:#fff}

/* Footer — slate, water-management calm */
.site-footer{background:var(--slate);color:#B4C2C5;padding:2.3rem 0 1.5rem;font-size:.9rem;margin-top:2rem}
.site-footer .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.6rem}
.site-footer h4{color:#fff;font-family:var(--head);font-size:1rem;margin:0 0 .7rem;padding-bottom:.35rem;border-bottom:2px solid var(--accent);display:inline-block;font-weight:600}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:.28rem 0}
.site-footer a{color:#B4C2C5;text-decoration:none}
.site-footer a:hover{color:#8FCCA6}
.site-footer .bot{grid-column:1/-1;border-top:1px solid #3E4F54;padding-top:1.1rem;margin-top:.7rem;font-size:.83rem;color:#7C8C90;text-align:center}
.site-footer .bot p{margin:.3rem 0}

/* Steps list */
.steps{counter-reset:step;list-style:none;margin:1rem 0;padding:0}
.steps li{counter-increment:step;padding:.65rem 0 .65rem 3.2rem;position:relative;border-bottom:1px dashed var(--line)}
.steps li::before{content:counter(step);position:absolute;left:0;top:.55rem;background:var(--accent);color:#fff;width:2.1rem;height:2.1rem;border-radius:2px;text-align:center;line-height:2.1rem;font-weight:700;font-family:var(--head)}

/* Callout box */
.callout{background:#EEF4F5;border-left:4px solid var(--primary);padding:1rem 1.25rem;border-radius:2px;margin:1.3rem 0}
.callout strong{color:var(--primary-dk)}

/* Diagram / cross-section note */
.diagram-note{background:#F0F5F6;border:1px solid var(--line);border-radius:2px;padding:.9rem 1.1rem;margin:1rem 0;font-size:.92rem;color:var(--muted)}
.diagram-note::before{content:'\25B8  ';color:var(--accent);font-weight:700}

/* FAQ */
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:.8rem 1.1rem;margin:.5rem 0}
.faq summary{font-family:var(--head);font-weight:600;color:var(--primary-dk);cursor:pointer;font-size:1rem}
.faq details[open]{border-color:var(--accent);border-left-width:3px}

/* Responsive */
@media (max-width:720px){
  .hero{padding:2.6rem 0 2.2rem}
  .hero h1{font-size:1.85rem}
  h1{font-size:1.85rem}
  h2{font-size:1.35rem}
  .primary{gap:.75rem}
  .primary a{font-size:.9rem}
}