:root {
  --mh-blue: #1278a3;
  /* darkened from #1892c3 for 4.5:1 contrast on white */
  --mh-blue-dark: #0c5270;
  --mh-blue-soft: #e3f4fb;
  --mh-grey-bg: #f5f7fa;
  --mh-grey-border: #dde3ec;
  --mh-text-main: #1d2433;
  --mh-text-muted: #6b7280;
  --mh-accent: #16a085;

  --font-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-card: 16px;
  --radius-pill: 999px;

  --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.12);
  --shadow-subtle: 0 4px 16px rgba(15, 23, 42, 0.08);

  --max-width: 1120px;
}

/* ... existing logic ... */

/* Mobile Menu Toggle (Hidden by default on desktop) */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--mh-text-main);
  z-index: 101;
}

.mobile-menu-icon {
  width: 24px;
  height: 24px;
  position: relative;
}

.mobile-menu-icon span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  position: absolute;
  left: 0;
  transition: all 0.25s ease;
}

.mobile-menu-icon span:nth-child(1) {
  top: 4px;
}

.mobile-menu-icon span:nth-child(2) {
  top: 11px;
}

.mobile-menu-icon span:nth-child(3) {
  top: 18px;
}

/* Transform to X when open */
.mobile-menu-open .mobile-menu-icon span:nth-child(1) {
  top: 11px;
  transform: rotate(45deg);
}

.mobile-menu-open .mobile-menu-icon span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-open .mobile-menu-icon span:nth-child(3) {
  top: 11px;
  transform: rotate(-45deg);
}

/* Base reset-ish */

/* Basic Resets */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--mh-text-main);
  background: white;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 1rem 0;
  font-weight: 700;
  line-height: 1.2;
  color: var(--mh-text-main);
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

p {
  margin: 0 0 1rem 0;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--mh-blue);
  text-decoration: none;
}


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  /* Ensure no underline */
  /* white-space: nowrap; - Removed to prevent overflow on cards */
  line-height: 1.2;
  text-align: center;
}

/* Ensure Nav buttons don't wrap */
.main-nav .btn {
  white-space: nowrap;
}

/* Specificity boost for links */
a.btn-primary,
.btn-primary {
  background: var(--mh-blue);
  color: white !important;
  /* Override nav link color */
  border: 1px solid transparent;
}

a.btn-primary:hover,
.btn-primary:hover {
  background: #0f6c94;
  transform: translateY(-1px);
  color: white !important;
}


/* Secondary Button (Contact Us) - Lighter to de-emphasize */
a.btn-secondary,
.btn-secondary {
  background: #2ca2d6;
  /* Lighter blue */
  color: white !important;
  /* Override nav link color */
  border: 1px solid transparent;
  padding: 0.6rem 1.25rem;
  /* Adjusted for cleaner look */
  font-size: 0.95rem;
  /* Slightly larger for readability */
}

a.btn-secondary:hover,
.btn-secondary:hover {
  background: #1e8ab9;
  transform: translateY(-1px);
  color: white !important;
}

/* Dropdown navigation focus support */
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Layout & Header */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  /* Ensure consistent left alignment for content inside */
}

.site-header {
  background: white;
  border-bottom: 1px solid var(--mh-grey-border);
  padding: 1.2rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

/* Readable line lengths */
p,
li,
.section-intro {
  max-width: 65ch;
}

/* Allow hero text to be slightly wider if needed */
.hero-content p,
.hero p {
  max-width: 75ch;
}


/* Header/Nav wrapper matches container */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Brand - Increased size per request */
.mh-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--mh-text-main);
}

.mh-brand-icon {
  background: var(--mh-blue);
  color: white;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  border-radius: 10px;
  font-size: 1.5rem;
  line-height: 1;
}

.mh-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
}

.mh-brand-name {
  font-weight: 800;
  font-size: clamp(1.2rem, 4vw, 1.9rem);
  /* Responsive scaling to prevent wrap */
  color: var(--mh-text-main);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 3px;
  white-space: nowrap;
  /* Force one line */
}

.mh-brand-descriptor {
  font-size: 0.9rem;
  color: var(--mh-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}

/* Main Navigation (Desktop) */
.main-nav {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.main-nav a {
  text-decoration: none;
  font-weight: 500;
  color: var(--mh-text-main);
  font-size: 0.95rem;
  transition: color 0.15s ease;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  /* Prevent wrapping */
}

/* Mobile-only CTA in nav - hidden by default */
.mobile-nav-cta {
  display: none !important;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--mh-blue);
}

/* Hover effect on dropdown parent */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-dropdown-arrow {
  font-size: 0.7em;
  margin-left: 6px;
  opacity: 0.6;
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid var(--mh-grey-border);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  min-width: 220px;
  flex-direction: column;
  padding: 8px;
  display: none;
  /* hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s ease;
  z-index: 200;
}

.nav-dropdown-menu a {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.95rem;
}

.nav-dropdown-menu a:hover {
  background: var(--mh-blue-soft);
  color: var(--mh-blue);
}

/* Show dropdown on hover/focus */
.nav-dropdown:hover .nav-dropdown-menu {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


/* RESTORED STYLES (Hero, Sections, Cards, Forms, Footer) */

/* Hero */
.hero {
  position: relative;
  padding: 5rem 0;
  background-color: #1d2433;
  /* background-image removed per user request */
  color: white;
  margin-bottom: 2rem;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 1fr;
  gap: 3rem;
  align-items: center;
}

.hero-content {
  max-width: 650px;
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 800;
  margin-bottom: 1.2rem;
  line-height: 1.1;
  color: white;
}

.hero p {
  font-size: 1.15rem;
  opacity: 0.95;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.hero-lead {
  font-size: 1.25rem;
  font-weight: 400;
}

/* Sections */
.section {
  padding: 4rem 0;
}

.section-alt {
  background-color: var(--mh-grey-bg);
}

.section-intro {
  font-size: 1.2rem;
  color: var(--mh-text-muted);
  max-width: 720px;
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

/* Cards */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}

.card {
  background: white;
  padding: 2rem;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-subtle);
  border: 1px solid var(--mh-grey-border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(24, 146, 195, 0.3);
}

.card h3 {
  color: var(--mh-blue);
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}

/* Forms (Global) */
form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--mh-text-main);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--mh-grey-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--mh-blue);
  box-shadow: 0 0 0 3px var(--mh-blue-soft);
}

/* Footer */
.site-footer {
  background: var(--mh-text-main);
  color: white;
  padding: 4rem 0;
  margin-top: auto;
}

.footer-inner {
  font-size: 0.95rem;
  opacity: 0.9;
  line-height: 1.7;
}

.footer-inner a {
  color: white;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.footer-inner a:hover {
  opacity: 1;
}

.footer-meta {
  font-size: 0.85rem;
  opacity: 0.5;
  margin-top: 1.5rem;
  max-width: 800px;
}

/* Utility */
.text-center {
  text-align: center;
}

.mb-1 {
  margin-bottom: 1rem;
}

.mb-2 {
  margin-bottom: 2rem;
}


@media (max-width: 900px) {
  .header-inner {
    flex-wrap: nowrap;
    /* Prevent wrapping, keep logo/toggle on one line */
  }

  /* Hamburger appears */
  .mobile-menu-toggle {
    display: block;
    margin-left: auto;
    /* Push to right */
  }

  /* Main Nav becomes a drawer */
  .main-nav {
    position: fixed;
    top: 60px;
    /* Below header roughly */
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    background: #ffffff;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 1.5rem 3rem 1.5rem;
    overflow-y: auto;
    border-top: 1px solid var(--mh-grey-border);

    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
  }

  .main-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.05);
  }

  .main-nav a {
    font-size: 1.1rem;
    padding: 0.8rem 0;
    width: 100%;
    border-bottom: 1px solid var(--mh-grey-bg);
  }

  /* Handle Dropdown in Mobile Drawer */
  .nav-dropdown {
    width: 100%;
    display: block;
  }

  .nav-dropdown>a {
    justify-content: space-between;
    width: 100%;
    font-size: 1.1rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--mh-grey-bg);
  }

  .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    padding-left: 1rem;
    display: none;
    /* JS or CSS can toggle this, for now let's just show it nicely or keep it accessible */
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    background: transparent;
    width: 100%;
  }

  /* Always show dropdown items in mobile drawer for simplicity, or we could add a checkbox hack/JS */
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu {
    display: flex;
    background: var(--mh-grey-bg);
    margin-top: 0;
    border-radius: 8px;
  }

  /* Hide the CTA button in header in mobile view if we want it in the menu instead, 
     but typically we want it accessible. 
     Let's move the CTA into the drawer at the bottom or keep it if it fits. 
     Current CSS had .header-cta order: 3. Let's hide it from header and put it in nav?
     Actually, let's keep it visible if possible, but small. 
     If not, hide .header-cta and add a duplicate one in nav via JS? 
     Or just make .header-cta part of the .main-nav flex container in mobile?
  */

  /* Let's inject the CTA button style into the nav link for "Book appointment" if present 
     or just trust the existing layout.
     The existing layout has .header-cta OUTSIDE .main-nav so it won't slide in with .main-nav.
     We might need to hide .header-cta on mobile and show a specific one inside nav.
  */

  .header-cta {
    display: none;
    /* Hide primary button on mobile header to save space */
  }

  /* We will need to add a "Book Appointment" link manually to the mobile nav in HTML 
     OR just accept it's hidden (bad). 
     Better: Move .header-cta INTO .main-nav in HTML structure so it's part of the list?
     No, semantics. 
     Lets styling the Book button inside the nav if we add one.
  */

  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero {
    padding-top: 2rem;
  }

  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Show mobile CTA in drawer */
  .mobile-nav-cta {
    display: block !important;
    margin-top: 1rem;
    color: var(--mh-blue);
    font-weight: 600;
  }
}

/* Tax Calculator */
.tax-calculator {
  max-width: 600px;
  margin: 2rem auto;
  background: var(--mh-grey-bg);
  border-radius: var(--radius-card);
  padding: 2rem;
  border: 1px solid var(--mh-grey-border);
}

.calculator-field {
  margin-bottom: 1.5rem;
}

.calculator-field label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--mh-text-main);
  font-size: 0.95rem;
}

.calculator-field input[type="number"],
.calculator-field select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--mh-grey-border);
  border-radius: 8px;
  font-size: 1rem;
  color: var(--mh-text-main);
  background: #ffffff;
  font-family: var(--font-base);
}

.calculator-field input[type="number"]:focus,
.calculator-field select:focus {
  outline: none;
  border-color: var(--mh-blue);
  box-shadow: 0 0 0 3px var(--mh-blue-soft);
}

.calculator-btn {
  width: 100%;
  padding: 0.875rem;
  background: var(--mh-blue);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.calculator-btn:hover {
  background: #1578a8;
}

.calculator-btn:active {
  transform: translateY(1px);
}

.calculator-result {
  margin-top: 1.5rem;
  background: #ffffff;
  padding: 1.5rem;
  border-radius: 12px;
  border: 2px solid var(--mh-blue);
  display: none;
}

.calculator-result.show {
  display: block;
}

.result-row {
  margin-bottom: 1.25rem;
}

.result-row:last-child {
  margin-bottom: 0;
}

.result-label {
  font-size: 0.9rem;
  color: var(--mh-text-muted);
  margin-bottom: 0.5rem;
}

.result-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--mh-blue);
}

.calculator-disclaimer {
  font-size: 0.85rem;
  color: var(--mh-text-muted);
  padding: 1rem;
  background: var(--mh-grey-bg);
  border-radius: 8px;
  border-left: 4px solid var(--mh-blue);
  margin-top: 1.5rem;
}

.calculator-disclaimer strong {
  color: var(--mh-text-main);
  font-weight: 600;
}

@media (max-width: 600px) {
  .hero-text h1 {
    font-size: 2rem;
  }

  .section {
    padding: 2.2rem 0;
  }

  .header-inner {
    align-items: flex-start;
  }
}