/* Downspout Pros LLC — modern dark theme with gold floral accents */
:root{
  --bg:#0b0f14;
  --surface:#0f141b;
  --soft:#121821;
  --text:#e9eef5;
  --muted:#b8c1cc;
  --gold:#d4af37;
  --maxw:1080px;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 300px at 10% 0%, rgba(212,175,55,.10), transparent 60%),
    radial-gradient(600px 240px at 90% 10%, rgba(212,175,55,.06), transparent 60%),
    linear-gradient(180deg, #0a0e13, #0b0f14 60%, #0c1117);
  line-height:1.6;
  min-height:100dvh;
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px; position:relative}
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:12px; top:8px; background:#fff; color:#000; padding:6px 10px; border-radius:6px}

.site-header{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(8px);
  background: rgba(10,14,19,.55);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.head-grid{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{display:flex; align-items:center; gap:12px; color:var(--text); text-decoration:none}
.brand img{width:40px; height:40px; border-radius:10px; object-fit:cover}
.brand-text{font-weight:800; letter-spacing:.2px}
.site-nav{display:flex; gap:18px}
.site-nav a{color:var(--text); text-decoration:none; opacity:.9}
.site-nav a:hover{opacity:1}

.hero{padding: clamp(56px, 9vw, 110px) 0}
.hero-grid{display:grid; grid-template-columns:1fr; gap:24px}
.hero h1{font-size: clamp(28px, 6vw, 56px); line-height:1.1; margin:0 0 12px}
.hero p{color:var(--muted); margin:0 0 18px}
.badge{color:var(--gold)}

.section{padding:64px 0}
.section--accent{background:linear-gradient(180deg, rgba(212,175,55,.08), rgba(230,57,70,.06));}

.cards{display:grid; gap:16px; grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--surface);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.card h3{margin:6px 0 6px}

.quote{background:var(--surface); padding:18px; border-radius:var(--radius); border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow)}
.grid{display:grid; gap:12px; grid-template-columns:repeat(2,1fr)}
label{display:grid; gap:6px; font-size:14px}
input, select, textarea{
  width:100%; background:#0b1117; color:var(--text);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:12px 12px;
}
textarea{resize:vertical; min-height:92px}
.form-hint{color:var(--muted); font-size:12px; margin:8px 0 0}

.site-footer{padding:36px 0; border-top:1px solid rgba(255,255,255,.08); color:var(--muted)}

/* Buttons */
.btn{display:inline-block; border:1px solid var(--gold); padding:12px 16px; border-radius:12px; text-decoration:none; color:var(--text); background:linear-gradient(180deg, rgba(212,175,55,.18), rgba(212,175,55,.10)); font-weight:600}
.btn:hover{transform:translateY(-1px)}
.btn--ghost{background:transparent; border-color:rgba(255,255,255,.25)}
.btn--sm{padding:8px 12px; font-size:14px}
.btn--full{width:100%}

/* Subtle page watermark using logo */
body::before{
  content:"";
  position:fixed; inset:0;
  background:url('assets/logo.jpg') no-repeat center center;
  background-size:520px auto;
  opacity:.035; pointer-events:none; z-index:0;
}

/* Gold floral border / decorative corners for sections */
.section .wrap::before,
.section .wrap::after{
  content:""; position:absolute; width:84px; height:84px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M5 95 C15 70, 35 55, 60 50 C55 35, 70 15, 95 5" fill="none" stroke="%23d4af37" stroke-width="2"/></svg>');
  background-size:contain; background-repeat:no-repeat; opacity:.8;
}
.section .wrap::before{top:-6px; left:-6px; transform:rotate(0deg)}
.section .wrap::after{bottom:-6px; right:-6px; transform:rotate(180deg)}

/* Ensure content overlays above watermark */
.site-header, main, .site-footer{position:relative; z-index:1}

@media (max-width: 900px){
  .cards{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .site-nav{gap:12px}
}