
:root {--balance-orange: #EF6C00;}
html {scroll-behavior:smooth;}
h1,h2,h3,h4,h5,h6 {font-family: "Oswald"}
body {font-family:"Open Sans",system-ui,sans-serif;margin:0;background:#f5f5f5;color:#111}
.text-shadow { text-shadow:2px 2px 2px var(--balance-orange);}

p { line-height:1.6; }
a:focus, button:focus, [role="button"]:focus { outline:3px solid var(--balance-orange); outline-offset:2px; }

/* === BALANCE: unified navigation styles === */
.menu {
  display: flex;
  align-items: center;          /* vertical centering */
  /* justify-content: center;      horizontal centering */
  /* height: 100px;                 give the flex container a height to center within */
  list-style: none;
  padding: 0 16px;
  margin: 0;
  gap: clamp(8px, 2vw, 24px);   /* space between items on large screens */
  background: transparent;
}

.menu ul,
.menu .nav-list {
  display: flex;
  align-items: center;          /* vertical centering of <li> content */
  gap: clamp(8px, 2vw, 24px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  margin: 0;
  padding: 0;
  /* no floats in a flex layout */
}

.menu a {
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  color: #000;
  line-height: 1;
}

.menu a:hover {
  color: var(--balance-orange);
  text-shadow: 2px 2px 2px #fff;
}

/* Mobile: show hamburger, stack links */
@media (max-width: 800px) {
  .menu {
	justify-content: space-between; /* logo left, button right */
	height: 60px;
  }
  .nav-toggle-btn { display: inline-block; cursor: pointer; padding: 12px; }
  .menu .nav-list { display: none; flex-direction: column; align-items: stretch; gap: 0; }
  .menu .nav-list li { border-top: 1px solid rgba(0,0,0,.1); }
  .nav-toggle:checked ~ .nav-list { display: flex; }
}


/* Base: make the bar the positioning context */
.menu {
  position: relative;              /* NEW: for absolute dropdown */
  display: flex;
  align-items: center;
  justify-content: space-between;  /* logo left, hamburger/right on mobile */
}
/*
.menu {
	background-color:;
	display: flex;
	align-items: center;
	/* height:300px; *//*
	list-style: none;
	padding: 0;
	margin: 0;
	}
*/	

.menu li {
	list-style-type:none;
	/* float:left; */
	padding: 20px;
	font-size:1.5em;
	margin: 0 10px;
	}
.menu li a:hover {
	color:var(--balance-orange);
	text-shadow:2px 2px 2px #fff;
	}
.menu .nav-list{display:flex;gap:0;margin:0;padding-bottom:; /* align-items: flex-center;*/}
.menu .nav-list li{list-style:none;padding:20px;font-size:1.1rem}
*/
.menu .nav-list li.logo { align-self: flex-center; }
.menu .nav-list img { transition: transform 0.3s ease, filter 0.3s ease; }
.menu .nav-list img:hover { transform: scale(1.05); filter: drop-shadow(2px 2px 4px var(--balance-orange)); }
.menu .nav-list a{display:block;text-decoration:none;color:#000; }
.menu .nav-list a:hover{color:var(--balance-orange);text-shadow:2px 2px 2px #fff}
.image-container img { transition: box-shadow 0.3s ease-in-out;}
.image-container img:hover {
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Shadow effect */
}
.hero {margin-top:20px;box-shadow:5px 5px 5px black;border:1px solid var(--balance-orange); border-radius:10px;}
.center {
margin: auto;
width: 90%;
	}
.column {width:33%;float:left;padding:25px;}
.column h2 {text-align:center;}
.column-half-page {width:45%;float:left;padding:25px;}
.card {
	padding:10px;
	background-color:white;
	border:solid 1px var( --balance-orange);
	}
.card ul {
	padding:20px;
	}
.card li {
	font-size:1.125em;
	}
.services img {
	border-radius:10px;
	box-shadow:5px 3px 5px #333;
	border: solid 1px #999;
	width:100%;
	}
.column-about {
	width:40%;
	margin-left:100px;
	padding:25px 0px;
	float:left;
	}
.footer { 
	background-color:white;
	}
.footer li {
	list-style-type:none;
	}
.footer li a:hover {
	color:var(--balance-orange);
	text-shadow:2px 2px 2px #fff;
	}
#site-footer {
	background: #0f172a;   /* slate-900-ish */
	color: #fff;
	}
  	#site-footer a { color: #fff; text-decoration: underline; }
  	#site-footer .footer-inner { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; }

/* Hamburger button (hidden on desktop) */
.nav-toggle { display:none; } /* checkbox hidden */
.nav-toggle-btn { display:none; cursor:pointer; padding:14px 16px; }
.nav-toggle-btn .bars,
.nav-toggle-btn .bars::before,
.nav-toggle-btn .bars::after {
  display:block; width:26px; height:3px; background:#000; content:""; position:relative;
}
.nav-toggle-btn .bars::before { top:-7px; position:relative; }
.nav-toggle-btn .bars::after  { top: 7px; position:relative; }


/* Mobile dropdown */
@media (max-width: 800px) {
  .menu { height: 60px; }

  /* Hide the list until toggled; make it a dropdown panel */
  .menu .nav-list {
    display: none;
    position: absolute;            /* NEW: take out of the flex row */
    top: 100%;                     /* sit just below the bar */
    left: 0; right: 0;             /* full width */
    background: #fff;              /* solid panel */
    z-index: 1000;                 /* sit on top */
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    box-shadow: 0 10px 20px rgba(0,0,0,.1);
    border-top: 1px solid rgba(0,0,0,.08);
  }

  .menu .nav-list li {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    font-size: 1.1em;
  }

  /* Reveal panel when the checkbox is checked */
  .nav-toggle:checked ~ .nav-list { display: flex; }

  .nav-toggle-btn { display: inline-block; cursor: pointer; padding: 12px; }
}

/* Desktop: keep horizontal list centered if you want */
@media (min-width: 801px) {
  .menu { /* justify-content: center; */ }
  .menu .nav-list {
    position: static;              /* back to normal flow */
    display: flex;
    flex-direction: row;
    box-shadow: none;
    border: 0;
  }
}




/* Small screens: stack menu, show button *//*
@media (max-width: 800px) {
  .menu { background:; }
  .menu .nav-list { display:none; flex-direction:column; }
  .menu .nav-list li { padding:14px 16px; border-top:1px solid rgba(0,0,0,.1); font-size:1.1em; }
  .nav-toggle-btn { display:inline-block; }*/
  /* When checkbox is checked, reveal the menu *//*
  .nav-toggle:checked ~ .nav-list { display:flex; }
}
*/
  
	@media screen and (max-width:1000px){
      body{font-size:;}
		.column {width: 100%;padding:0px;}
		.services img { width:100%; }
		.column-about { width:100%; margin:1px;}
        .center { margin: auto; width: 100%; }
		.card { padding:15px; margin:10px; }
		.card ul {padding:15px; }
		.card li { font-size:1.125em; }
		}
  
  @media screen and (max-width: 600px) {
  .column {width: 100%;}
  .services img { width:100%; }
  header h1 { font-size:1em;}
  .column-about { width:100%; padding:0px; }
  .card { padding:15px;margin:15px 0px; }
  .card ul {padding:15px; }
  .card li { font-size:1.125em; }
}

/* === BEGIN: Safe merge from rmm.php styles (generated 2025-10-01 15:20:10) === */
/* This section adds only NEW selectors/properties and annotates conflicts without overwriting existing rules. */
a:focus,button:focus,[role="button"]:focus {
  outline: 3px solid var(--balance-orange);
  outline-offset: 2px;
}

.page-header {
  background: #0f172a;
  color: #fff;
  padding: 60px 20px;
  text-align: center;
}

.page-header h1 {
  font-size: 2.4rem;
}

.container {
  max-width: 1100px;
  margin: 30px auto;
  padding: 0 16px;
}
    .grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.col {
  flex: 1 1 320px;
}

.card {
  background: #fff;
  /* CONFLICT: existing value differs in base; rmm value below */
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  overflow: hidden;
}

.card img {
  width: 100%;
  height: auto;
  display: block;
}

.card-body {
  padding: 18px;
}

.pill {
  display: inline-block;
  background: rgba(239,108,0,.1);
  color: #B23C00;
  border: 1px solid rgba(239,108,0,.3);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .85rem;
  margin: 6px 0 12px;
}

.list {
  margin: 0;
  padding-left: 18px;
}

.list li {
  margin: 6px 0;
}

.feature-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
}

.feature {
  flex: 1 1 240px;
  background: #fff;
  border: 1px dashed #ddd;
  border-radius: 10px;
  padding: 14px;
}

.cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid #ccc;
  background: #fff;
  color: #111;
}

.btn-primary {
  background: var(--balance-orange);
  border-color: var(--balance-orange);
  color: #fff;
}

.btn:hover {
  opacity: .92;
}

#site-footer {
  margin-top: 40px;
}

#site-footer .footer-inner {
  /* CONFLICT: existing value differs in base; rmm value below */
  padding: 20px 16px;
  text-align: center;
}

.faq h3 {
  margin-top: 18px;
}

/* === END: Safe merge from rmm.php styles === */

/* === BEGIN: Safe merge from services.php styles (generated 2025-10-01 15:37:24) === */
/* This section adds only NEW selectors/properties and annotates conflicts without overwriting existing rules. */
body {
  /* CONFLICT: existing value differs in base; services value below */
  font-family: "Open Sans", system-ui, sans-serif;
}

h1,h2,h3,h4 {
  font-family: "Oswald", sans-serif;
  margin: 0 0 .5rem;
}

p {
  line-height: 1.6;
}
/*
  a:focus, button:focus, [role="button"]:focus {
  outline: 3px solid var(--balance-orange);
  outline-offset: 2px;
}
*/
.menu {
  /* CONFLICT: existing value differs in base; services value below
  background: #999; */
}

.nav-toggle-btn .bars,
    .nav-toggle-btn .bars::before,
    .nav-toggle-btn .bars::after {
  display: block;
  width: 26px;
  height: 3px;
  background: #000;
  content: "";
  position: relative;
}

}

    
    .grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.section {
  margin: 40px 0;
}

.section h2 {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.section p.lead {
  color: #333;
  margin: 6px 0 18px;
}

/* === END: Safe merge from services.php styles === */
