/* The Green 4 Group: base styles. Page layout is inline in each HTML file; this file holds what inline styles cannot,
   plus the responsive scale: --pad-x is the side padding, --vy scales vertical spacing, --imgy scales photo heights. */
:root { --pad-x: 56px; --vy: 1; --imgy: 1; }
@media (max-width: 1024px) { :root { --pad-x: 32px; --vy: 0.8; --imgy: 0.75; } }
@media (max-width: 760px) { :root { --pad-x: 20px; --vy: 0.55; --imgy: 0.5; } }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } #hero-slide { transition: none !important; } }
body { margin: 0; background: #121413; }
img { max-width: 100%; }
#hero-slide { transition: opacity 0.6s ease; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #78C070; outline-offset: 3px; }

/* Menu button: hidden on desktop, shown on narrow screens */
.menu-toggle { display: none; background: none; border: 1px solid rgba(255,255,255,0.45); color: #F2F1EE; font: inherit; font-size: 14px; letter-spacing: 0.12em; padding: 10px 16px; border-radius: 2px; cursor: pointer; }
@media (max-width: 960px) {
  .menu-toggle { display: inline-flex; align-items: center; }
  #main-nav { display: none !important; flex: 1 1 100%; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; padding: 8px 0 4px; }
  #main-nav.open { display: flex !important; }
  #main-nav a { width: 100%; padding: 14px 0 !important; font-size: 17px !important; border-bottom: 1px solid #2E322F !important; color: #F2F1EE !important; }
  header.menu-open { background: #121413 !important; }
}

/* Phones */
@media (max-width: 760px) {
  .hero { height: auto !important; min-height: 100svh; }
  .hero-content { position: static !important; padding-top: 140px !important; gap: 36px !important; }
  .hero-side { display: none !important; }
  .hero-benefits { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px !important; }
  .hero-benefits > div { padding: 0 !important; border-right: 0 !important; }
  h1 { font-size: 40px !important; }
  .hero h1 { font-size: 36px !important; }
  h2 { font-size: 30px !important; }
}