:root{
      --accent:#0b6cf6;
      --accent-2:#0b9af6;
	  --logo1:#0cf323;
	  --logo2:#76e8e8;
	  --logo3:#8d24f6;
	  --logocolors:linear-gradient(
			45deg,
			var(--logo1),
			var(--logo2),
			var(--logo3));
	  --accentmuted: #5b7fd9;
	  --accentmutedhover: #4668c6;
      --bg:#f7f9fb;
      --card:#ffffff;
      --muted:#65707a;
	  --nav:#b3ccf2;
	  --text:#0b1220;
      --radius:10px;
      --max-width:1100px;
      font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
    }
	

    /* Reset-ish */
    *{box-sizing:border-box}
    html,body{height:100%; margin: 0; padding: 0;}
    body{
      margin:0;
      background:linear-gradient(180deg,var(--bg),#fff);
	  background-attachment: fixed;
	  background-size: cover;
	  background-repeat: no-repeat;
      color:var(--text);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.45;
      padding:1rem;
      display:flex;
      justify-content:center;
      align-items:flex-start;
    }

    .site{
      width:100%;
      max-width:var(--max-width);
    }

    header{
      display:flex;
      gap:1rem;
      align-items:center;
      justify-content:space-between;
      margin-bottom:1rem;
    }

    .brand{
      display:flex;
      gap:.75rem;
      align-items:center;
      text-decoration:none;
      color:inherit;
    }
    .logo{
	  width: 48px;
      height: 48px;
      object-fit: contain;
	  display:flex;
    }
	
	.logocentered{
	  text-align: center;
    }
	
	.logocentered img{
		max-width: 48px;
		height: 48px;
		display: inline-block;
	}

    nav{
      display:flex;
      gap:.75rem;
      align-items:center;
	  justify-content:space-between;
    }

	

    .btn{
      background:var(--accent);
      color:#fff;
      padding:.6rem .9rem;
    }
	
	.btn:hover{
		background:linear-gradient(
		45deg,
		var(--logo1),
		var(--logo2),
		var(--logo3)
		);
		color:#000;
	}
	
	.btn-full {
		width:100%;
		margin-top:.5rem;
	}
	
	.btn2{
		background:var(--accentmuted);
		color:#fff;
		border:none;
		margin-top:1rem;
		padding:.6rem .9rem;
		border-radius: 8px;
		text-decoration:none;
		font-weight:600;
		cursor:pointer;
	}
	
	.btn2:hover{
		border-color:#000;
		background:var(--accentmutedhover);
	}		
	
	.btnback {
		background:var(--accent);
		color:#fff;
		padding:.6rem .9;
	}
	.btnback:hover {
		border-color:#000;
		background:var(--accentmutedhover);
	}
	
	.btn,
	.btn-back{
		display:inline-flex;
		align-items:center;
		justify-content:center;
		line-height:1;
		font-family:inherit;
		border-radius:8px;
		font-weight:600;
		cursor:pointer;
		text-decoration:none;
	}
	
	/* Hide menu links by default on mobile */
	.menu {
		display: none;
		flex-direction: column;
		gap: .75rem;
	}
	
    /* Mobile nav toggle - hamburger for mobile*/
    .menu-toggle {
      display:flex;
	  align-items:center;
	  gap:.25rem;
	  background:var(--nav);
	  color:white;
	  padding:.5rem 1rem;
	  border-radius:6px;
	  border:none;
	  cursor:pointer;
	  z-index: 10;
    }
	
	.menu-toggle svg {
		display:inline-block;
		vertical-align:middle;
	}
	
	.menu-toggle path {
		stroke:var(--muted);
	}
	
	/* When menu is active*/
	.menu.active {
		display:flex;
	}
	
	ul {
		margin:0;
		padding:0;
	}
	
	.img-border {
		border:8px;
		color:var(--accent);
	}

    /* Hero */
    .hero{
      background:var(--card);
      border-radius:var(--radius);
      padding:1rem;
      display:grid;
      grid-template-columns:1fr;
      gap:1rem;
      box-shadow:0 6px 18px rgba(7,20,30,.06);
      align-items:center;
    }
	
	.quote-form {
	 
	  max-width: 420px;
	  margin: 0 auto;
	}

	.field {
	  display: grid;
	  grid-template-columns:1fr;
	  gap: .25rem;
	  width:100%;
	}

	.field label {
	  font-size: .85rem;
	  font-weight: 600;
	  color: var(--muted);
	  display:block;
	  margin-bottom:.25rem;
	}

	.field input,
	.field select {
	  width: 100%;
	  max-width:100%;
	  display:block;
	}

	.note {
	  font-size: .85rem;
	  color: var(--muted);
	}
	
	.resize-img{
		width: 100%;
		height: auto;
		display: block;
	}

    .hero .lead{
      font-size:1.05rem;
      color:var(--muted);
    }

    .cta-row{
      display:flex;
      gap:.5rem;
      flex-wrap:wrap;
      align-items:center;
    }

    .quick-form{
      display:flex;
      gap:.5rem;
      align-items:center;
      flex-wrap:wrap;
    }

    input[type="text"], input[type="tel"], select{
      padding:.6rem .7rem;
      border-radius:8px;
      border:1px solid #e6e9ee;
      min-width:140px;
      font-size:1rem;
    }

    main{
      margin-top:1rem;
      gap:1rem;
	  justify-items:center;
    }
	
	#service-areas-main {
		width:100vw;
		position:relative;
		
	}

	.homepage {
	  margin-top:1rem;
      display:grid;
      gap:1rem;
	  justify-items:center;
	  width:100%;
	  align-items:start;
	}

    .grid{
      display:grid;
      gap:1rem;
	  justify-items:stretch;
    }
	
	.grid2{
      display:grid;
      gap:1rem;
	  grid-template-columns:1fr;
	  justify-items:stretch;
	  align-items:stretch;
	  margin-top:.5rem;
    }
	

	.grid-service {
		display:grid;
		gap:1rem;
		grid-template-columns:1fr;
		width:100%;
		margin-top:.5rem;
	}

    /* Offer cards */
    .cards{
      display:grid;
      grid-template-columns:1fr;
      gap:1rem;
    }

    .card{
      background:var(--card);
      border-radius:12px;
      padding:1rem;
      box-shadow:0 6px 14px rgba(7,20,30,.04);
	  margin-bottom:.5rem;
    }
	
	.card-tall{
      background:var(--card);
      border-radius:12px;
      padding:1rem;
      box-shadow:0 6px 14px rgba(7,20,30,.04);
	  margin-bottom:.5rem;
	  display:grid;
	  height:auto;
    }
	
	.cardm{
      background:var(--card);
      border-radius:12px;
      padding:1rem;
	  width:100%;
      box-shadow:0 6px 14px rgba(7,20,30,.04);
	  margin-bottom:.5rem;
    }
	
	.cardm iframe{
		width: 100%;
		height: 350px;
		border:none;
	}
	
	.card2{
      background:var(--card);
      border-radius:12px;
	  border: 2px solid var(--bg);
      padding:1rem;
      box-shadow:0 6px 14px rgba(7,20,30,.04);
	  margin-bottom:.5rem;
    }
	
	.card2m{
	  width:100%;
	  margin-bottom:.5rem;
	  
	}
	
	.card3{
      background:var(--card);
      border-radius:12px;
	  border: 1px solid var(--bg);
      padding:1rem;
      box-shadow:0 6px 14px rgba(7,20,30,.04);
	  margin-bottom:.5rem;
    }
	
		/* Container for all county cards */
	.county-container {
		display: grid;
		width:100%;
		/* This makes all cards stack nicely, one after another */
		gap: .5rem;
		padding: .5rem;
	}

	/* Layout for towns (left) and image (right) */
	.county-content {
		display: flex;
		align-items: flex-start; /* Aligns content to the top */
		gap: 20px;
	}
	
	.count-content ul {
		list-style:none;
		margin:0;
		padding:0;
	}

	.town-list {
		list-style: none; /* Removes bullets */
		padding: 0;
		margin: 0;
		flex: 1; /* Allows the town list to take up available space */
	}
	
	/* The list items will now be evenly spaced */
	.town-list li {
    /* You can add minor padding/styling here if needed, but avoid margins */
	padding:.5rem 0;
	}

	.county-image{
		margin-left:auto;
	}

	.county-image img {
		max-width: 150px; /* Adjust as needed */
		height: auto;
		border-radius:12px;
	    border: 1px solid var(--bg);
        box-shadow:0 6px 14px rgba(7,20,30,.04);
	}
	
	.row{
		display:flex;
		justify-content:space-between;
		padding: 0.25rem 0;
	}

	.price-row {
	  display: flex;
	  justify-content: space-between; /* left/right alignment */
	  padding: 0.25rem 0;             /* optional spacing */
	}

	.price-row span:first-child {
	  font-weight: normal;            /* label styling */
	}

	.price-row span:last-child {
	  font-weight: bold;              /* amount styling */
	}

	.accept-grid {
		display: grid;
		grid-template-columns: 1fr;
		align-items: center;
		gap: 1rem;
		margin-top: 1rem;
	}

	.accepted-list {
		list-style: none;
		padding-left: 1.2rem;
		line-height: 1.6;
	}
	
	.accepted-list li{
		margin-left: 1.5rem;
		position:relative;
		line-height:1.6;
	}
	
	.accepted-list li::before {
		content: "✔";
		color: green;
		font-weight: bold;
		position: absolute;
		left: -1.5rem;
	}

	.accepted-image img {
		width: 100%;
		border-radius: 10px;
		object-fit: cover;
	}

    .size-list{
      display:flex;
      gap:.5rem;
      flex-wrap:wrap;
      margin-top:.5rem;
    }

	.remove-links a{
		text-decoration:none;
		color:inherit;
	}

    .size{
      flex:1 1 120px;
      border-radius:8px;
      padding:.6rem;
      border:1px solid #eef3fb;
      text-align:center;
      min-width:120px;
    }

	.services {
		display:flex;
		gap: .5rem;
		flex-wrap:wrap;
		margin-top: .5rem;
	}

	.services a {
		text-decoration: none;
		color: inherit;
		display: block;
	}

    footer{
      margin-top:1rem;
      color:var(--muted);
      font-size:.9rem;
      text-align:center;
	  align-items: center;
	  display:stretch;
	  justify-content:center;
    }
	
	footer a[href^="tel"], footer a[href^="mailto"]{
		text-decoration:none;
		color:var(--accent);
		padding: 2px 4px;
		border-radius: var(--radius);
		transition: all 0.2s ease;
	}
	footer a[href^="tel"]:hover, footer a[href^="mailto"]:hover{
		    background:
		    linear-gradient(var(--card), var(--card)) padding-box,
		    linear-gradient(
			45deg,
			var(--logo1),
			var(--logo2),
			var(--logo3)
		    ) border-box;		
			border: 2px solid transparent;
		    padding: 2px 6px; /* inner padding as needed */
			border-radius: 6px;
			color:var(--logo1);
	}
	
	.footer-service-list {
		flex-wrap: wrap;
		gap: .35rem;
	}
	
	.footer-service-list a {
		text-decoration:none;
		color:var(--accent);
		padding: 2px 4px;
		border-radius: var(--radius);
		transition: all 0.2s ease;
	}
	
	.footer-service-list a:hover{
		background:
		    linear-gradient(var(--card), var(--card)) padding-box,
		    var(--logocolors) border-box;		
			border: 2px solid transparent;
			color:var(--logo1);
		    padding: 2px 6px; /* inner padding as needed */
			border-radius: 6px;
	}
	a p {
		display: inline;
		margin:0;
	}
	
	.fill-width-selection {
		width:100%;
		padding:1rem;
		background:none;
		box-shadow:none;
		border:none;
	
	}
	
    /* small touches */
    h1{margin:.2rem 0 .2rem 0; font-size:1.25rem}
    h2{margin:.2rem 0 .6rem 0; font-size:1.05rem}
	h3{margin:.2rem 0 .8rem 0; font-size:1rem}
    p{margin:.25rem 0}
    .muted{color:var(--muted); font-size:.95rem}
    .price{font-weight:650; font-size:1.175rem; color:var(--accent)}
    .small{font-size:.85rem; color:var(--muted)}
	.small-link{font-size:.85rem; color:var(--muted)}
	.medium{font-weight:650; font-size:1.175rem;}
	.drop{margin-top:.75rem;}
	.raise{margin-bottom:.75rem;}

    .inline{
      display:inline-flex;
      gap:.5rem;
      align-items:center;
    }
	
	.center{
		text-align:center;
	}
	
	.centeritems{
		justify-content:center;
	}
	
	.mapbox{
		margin-left:5rem;
		margin-right:5rem;
	}

/* Desktop override */
    @media(min-width:768px){
      .hero{
        grid-template-columns:1fr 360px;
      }
      .cards{
        grid-template-columns:repeat(3,1fr);
      }
      main{grid-template-columns:1fr 360px; gap:1rem}
	  
      .contact-card{position:sticky; top:1.25rem;align-self:start;margin-top:2rem;}
	  
	  .menu {
			display: flex !important;
			gap:.9rem;
			flex-direction: row;
		}
		.menu-toggle{
			display:none;
		}
		.accept-grid {
			grid-template-columns: 1fr 1fr;
		}
		.grid-service {
			grid-template-columns:2fr 1fr;
			align-items: start;
		}
		.grid2{
			grid-template-columns:1fr 1fr;
			grid-template-rows:1fr 1fr;}
    }

		/*dark mode compatability*/
	@media (prefers-color-scheme: dark) {
		:root {
			--accent:#66a3ff;
			--accent-2:#4d8fff;
			--logo-1:#0cf323;
			--logo-2:#76e8e8;
			--logo-3:#8d24f6;
			--logo-gradient: linear-gradient(
				45deg,
				var(--logo-1),
				var(--logo-2),
				var(--logo-3)
			);
			--bg:#0d1117;
			--card:#161b22;
			--muted:#9aa7b8;
			--nav:#3a4a61;
			--text:#e6eef8;
		}
	}

    .features{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.5rem;justify-content:center;margin-bottom:.5rem}
    .feature{background:#f1f7ff;padding:.4rem .6rem;border-radius:999px;font-size:.85rem;color:#084;margin:.4rem;}
    .contact-card form{display:flex;flex-direction:column;align-items:stretch;max-width:600px;margin:0 auto;text-align:left;}
	.contact-card2 form{display:flex!important;gap:.6rem;flex-direction:column !important;}
		.contact-card2 form .field{display:flex!important;flex-direction:column!important;width:100%}
		.contact-card2 form .field label{display:block;margin-bottom:.25rem;}
		.contact-card2 form .field input,.contact-card2 form .field select{width:100%!important; max-width:100%;min-width:0;box-sizing:border-box;display:block;}
    .note{font-size:.85rem;color:var(--muted)}
	.note a[href^="tel"]{text-decoration:none;color:var(--muted);}

    /* accessibility focus */
    a:focus, button:focus, input:focus, select:focus {outline:3px solid color-mix(in srgb, var(--accent) 18%, transparent); outline-offset:2px}