/* Mac Civils Ltd — site stylesheet. Page layouts use inline styles; this file holds the shared basics. */
:root { --red: #C42D29; --red-dark: #8F1E1B; --ink: #181818; --body: #3A3F45; --muted: #5A6067; --line: #E3E6EA; --band: #F4F5F7; --dark: #1A1A1C; --slate: #1F2227; --paper: #ffffff;
  --display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; --text: Barlow, Arial, Helvetica, sans-serif; }
html { color-scheme: light; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--text); -webkit-font-smoothing: antialiased; }
#site { display: flex; flex-direction: column; min-height: 100vh; }
#site main { flex: 1 0 auto; }
a { color: var(--red); } a:hover { color: var(--red-dark); }
h1, h2, h3 { text-wrap: balance; }
img { max-width: 100%; }
input, textarea { font: inherit; }
.brand-stripe { height: 5px; background: var(--red); }
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
.header-inner { padding-top: 14px; padding-bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.logo { display: flex; align-items: center; flex: 0 0 auto; }
.logo img { height: 64px; width: auto; display: block; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; margin-left: auto; font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.nav a { color: var(--ink); text-decoration: none; padding: 12px 0; border-bottom: 2px solid transparent; display: inline-block; }
.nav a:hover { color: var(--red); }
.nav a.active { color: var(--red); border-bottom-color: var(--red); }
.nav a.phone { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; background: var(--red); color: #ffffff; border-radius: 4px; font-family: var(--text); font-size: 16px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; margin-left: 6px; border-bottom: 0; }
.nav a.phone:hover { background: var(--red-dark); color: #ffffff; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #2563EB; outline-offset: 2px; }
.menu-toggle { display: none; }
@media (max-width: 760px) {
  .header-inner { gap: 10px 16px; }
  .logo img { height: 52px; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 44px; padding: 0 14px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
  .nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 4px 0 6px; border-top: 1px solid var(--line); }
  .nav.open { display: flex; }
  .nav a { padding: 13px 4px; border-bottom: 1px solid var(--line); }
  .nav a.active { border-bottom-color: var(--line); }
  .nav a.phone { margin: 12px 0 4px; justify-content: center; border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }