/* Jack Dish Plumbing LLC — Design System (Phase 3)
   Brand primary: #13a430
*/

:root{
  /* Brand */
  --color-primary-50:#eaf8ee;
  --color-primary-100:#ccf0d6;
  --color-primary-200:#9ee3b0;
  --color-primary-300:#67d487;
  --color-primary-400:#35c362;
  --color-primary-500:#13a430; /* exact */
  --color-primary-600:#0f8f2a;
  --color-primary-700:#0b6f21;
  --color-primary-800:#085116;
  --color-primary-900:#05360e;
  --color-primary-rgb:19,164,48;

  /* Accent (blue from original secondary palette) */
  --color-accent-500:#116dff;
  --color-accent-rgb:17,109,255;

  /* Neutrals */
  --color-neutral-0:#ffffff;
  --color-neutral-50:#f7f8fa;
  --color-neutral-100:#eef1f5;
  --color-neutral-200:#d9e0ea;
  --color-neutral-300:#b8c4d3;
  --color-neutral-400:#7f8fa3;
  --color-neutral-500:#55667b;
  --color-neutral-600:#3f4d60;
  --color-neutral-700:#2d3948;
  --color-neutral-800:#1c2531;
  --color-neutral-900:#101723;

  /* Semantics */
  --color-success:#13a430;
  --color-warning:#b45309;
  --color-danger:#b91c1c;

  /* Typography */
  --font-sans:"Poppins", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --font-serif:"Noticia Text", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

  --text-xs:12px;
  --text-sm:14px;
  --text-base:16px;
  --text-lg:18px;
  --text-xl:20px;
  --text-2xl:24px;
  --text-3xl:30px;
  --text-4xl:36px;
  --text-5xl:48px;

  /* Spacing */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-6:24px;
  --space-8:32px;
  --space-12:48px;
  --space-16:64px;

  /* Layout */
  --container:1160px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(16,23,35,.08);
  --shadow-md:0 10px 30px rgba(16,23,35,.12);
  --shadow-lg:0 18px 50px rgba(16,23,35,.16);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:1.6;
  color:var(--color-neutral-900);
  background:var(--color-neutral-0);
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
svg{display:block}
a{color:inherit}

/* Accessibility */
.skip-link{
  position:absolute; left:12px; top:12px;
  padding:10px 12px;
  background:var(--color-neutral-900);
  color:var(--color-neutral-0);
  border-radius:10px;
  transform:translateY(-140%);
  transition:transform .18s ease;
  z-index:9999;
}
.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:3px solid rgba(var(--color-accent-rgb),.55); outline-offset:3px}

.container{max-width:var(--container); margin:0 auto; padding:0 20px}
.section{padding:56px 0}
.section.alt{background:var(--color-neutral-50)}

h1,h2,h3{margin:0 0 10px; line-height:1.15}
h1{font-family:var(--font-serif); font-weight:700; font-size:clamp(1.9rem, 5vw, 3.2rem); letter-spacing:-.02em}
h2{font-family:var(--font-serif); font-weight:700; font-size:clamp(1.5rem, 3.8vw, 2.2rem); letter-spacing:-.015em}
h3{font-weight:700; font-size:1.1rem}
p{margin:0 0 14px; color:var(--color-neutral-700)}
.lead{font-size:1.05rem; color:var(--color-neutral-700)}
.small{font-size:var(--text-sm); color:var(--color-neutral-600)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius:12px;
  border:1px solid transparent;
  font-weight:700;
  text-decoration:none;
  transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
  min-height:44px;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--color-primary-500); color:#fff; box-shadow:0 10px 20px rgba(var(--color-primary-rgb),.18)}
.btn-primary:hover{background:var(--color-primary-600); transform:translateY(-1px)}
.btn-outline{background:transparent; border-color:rgba(var(--color-neutral-900),.18); color:var(--color-neutral-900)}
.btn-outline:hover{border-color:rgba(var(--color-primary-rgb),.55); box-shadow:0 10px 24px rgba(16,23,35,.10)}

.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.6);
  color:var(--color-neutral-900);
  font-weight:700;
}
.badge strong{font-weight:800}

.card{
  background:#fff;
  border:1px solid rgba(16,23,35,.10);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:rgba(var(--color-primary-rgb),.25)}
.card-body{padding:18px}
.card-title{margin:0 0 8px; color:var(--color-neutral-900)}
.card p{margin:0 0 12px}
.card .card-cta{margin-top:auto}
.card-media{aspect-ratio:16/9; background:var(--color-neutral-100)}
.card-media img{width:100%; height:100%; object-fit:cover}

.grid{display:grid; gap:18px}
.grid.cols-3{grid-template-columns:1fr}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid rgba(16,23,35,.08);
}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand img{height:44px; width:auto}

.nav{
  display:none;
  align-items:center;
  gap:10px;
}
.nav a{
  text-decoration:none;
  padding:10px 12px;
  border-radius:12px;
  color:var(--color-neutral-900);
  font-weight:700;
}
.nav a:hover{background:var(--color-neutral-100)}

.nav .has-dropdown{position:relative}
.dropdown{
  display:none;
  position:absolute;
  top:100%; left:0;
  min-width:260px;
  padding:10px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(16,23,35,.10);
  box-shadow:var(--shadow-lg);
}
/* hover bridge so it stays open */
.dropdown::before{
  content:"";
  position:absolute;
  top:-12px; left:0; right:0;
  height:12px;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{display:block}
.dropdown a{display:block; padding:10px 12px; border-radius:12px; font-weight:700}
.dropdown a:hover{background:var(--color-primary-50)}

.header-actions{display:flex; align-items:center; gap:10px}
.phone-cta{display:none}

.hamburger{
  display:inline-flex;
  align-items:center; justify-content:center;
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid rgba(16,23,35,.14);
  background:#fff;
}

/* Mobile menu */
.mobile-panel{
  display:none;
  padding:10px 0 18px;
}
.site-header[data-open="true"] .mobile-panel{display:block}
.mobile-panel a{display:block; padding:12px 12px; border-radius:12px; text-decoration:none; font-weight:800}
.mobile-panel a:hover{background:var(--color-neutral-100)}
.mobile-panel .mobile-cta{margin-top:10px}

/* Hero */
.hero{
  position:relative;
  padding:72px 0;
  color:#fff;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  /* overlay max opacity 0.6 */
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.60));
}
.hero .container{position:relative}
.hero p{color:rgba(255,255,255,.90)}
.hero .hero-actions{display:flex; flex-direction:column; gap:12px; margin-top:18px}
.hero .hero-actions .btn{width:100%}
.hero .hero-badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}

.trust-strip{display:flex; flex-direction:column; gap:12px; margin-top:16px}
.trust-strip img{max-height:44px; width:auto; opacity:.95}

/* Forms (Web3Forms) */
.form-card{
  background:#fff;
  border:1px solid rgba(16,23,35,.10);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  padding:20px;
}
.form-grid{display:grid; gap:14px}
label{font-weight:800; color:var(--color-neutral-900); font-size:var(--text-sm)}
input, textarea, select{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(16,23,35,.16);
  background:#fff;
  font:inherit;
  font-size:16px;
  color:var(--color-neutral-900);
  transition:border-color .16s ease, box-shadow .16s ease;
}
textarea{min-height:120px; resize:vertical}
input:focus, textarea:focus, select:focus{
  outline:none;
  border-color:rgba(var(--color-primary-rgb),.75);
  box-shadow:0 0 0 4px rgba(var(--color-primary-rgb),.15);
}
.form-help{font-size:var(--text-sm); color:var(--color-neutral-600)}
.form-success{
  display:none;
  margin-top:12px;
  padding:12px 14px;
  border-radius:12px;
  background:var(--color-primary-50);
  border:1px solid rgba(var(--color-primary-rgb),.28);
  color:var(--color-neutral-900);
  font-weight:700;
}
.form-success[data-show="true"]{display:block}

/* Footer */
.site-footer{background:var(--color-neutral-900); color:#fff}
.site-footer a{color:#fff; text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer-grid{display:grid; gap:24px; padding:48px 0}
.footer-brand img{height:44px; width:auto; margin-bottom:12px}
.footer-title{font-weight:900; margin:0 0 10px}
.footer-list{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.footer-meta{border-top:1px solid rgba(255,255,255,.12); padding:18px 0; color:rgba(255,255,255,.78); font-size:var(--text-sm)}
.footer-map iframe{width:100%; height:200px; border:0; border-radius:16px}

/* Utilities */
.two-col{display:grid; gap:22px}
.kicker{display:inline-block; font-weight:900; letter-spacing:.08em; text-transform:uppercase; font-size:12px; color:var(--color-primary-200)}

/* Reveal animations */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .45s ease, transform .45s ease}
.reveal.is-visible{opacity:1; transform:translateY(0)}

@media (min-width:768px){
  .section{padding:72px 0}
  .grid.cols-3{grid-template-columns:repeat(3, 1fr)}
  .hero .hero-actions{flex-direction:row}
  .hero .hero-actions .btn{width:auto}
  .trust-strip{flex-direction:row; align-items:center}
  .two-col{grid-template-columns:1.05fr .95fr; align-items:start}
  .nav{display:flex}
  .hamburger{display:none}
  .phone-cta{display:inline-flex}
  .footer-grid{grid-template-columns:1.2fr 1fr 1fr}
}

@media (min-width:992px){
  .brand img{height:52px}
  .hero{padding:92px 0}
}