/* ───────────────────────────────────────────────────────────────
   PWG shared design system — site chrome (nav, footer, reset, base).
   Page-specific rules live in assets/css/<page>.css.
   Colour tokens (:root) are defined per page so each page keeps its
   own palette; the rules below resolve them via var().
   ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font-body); background: var(--deep); color: var(--text-body); -webkit-font-smoothing: antialiased; }

/* ─── NAV ─── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 0.75rem 3rem; display: flex; align-items: center; justify-content: space-between; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(24px); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06); transition: background 0.4s, backdrop-filter 0.4s, box-shadow 0.4s; }
.nav-logo { text-decoration: none; display: flex; align-items: center; position: relative; z-index: 101; }
.nav-logo img { height: 120px; width: auto; margin: 0 0 -60px 0; }
.nav-links { display: flex; gap: 2rem; list-style: none; align-items: center; }
.nav-links a { color: #1a1a1a; text-decoration: none; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; transition: color 0.3s; position: relative; }
.nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--green); transition: width 0.3s; }
.nav-links a:hover { color: var(--green); }
.nav-links a:hover::after { width: 100%; }
.nav-links a.active { color: var(--green); }
.nav-links a.active::after { width: 100%; }
.nav-cta { background: transparent; border: 1px solid var(--green); color: var(--green) !important; padding: 0.6rem 1.5rem; border-radius: 100px; font-size: 0.8rem !important; letter-spacing: 0.1em !important; transition: all 0.3s !important; cursor: pointer; }
.nav-cta:hover { background: var(--green) !important; color: #fff !important; }
.nav-cta::after { display: none !important; }

.nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; z-index: 110; }
.nav-hamburger span { width: 24px; height: 2px; background: #1a1a1a; transition: all 0.3s; }
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.nav-mobile { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.98); backdrop-filter: blur(24px); z-index: 105; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; }
.nav-mobile.open { display: flex; }
.nav-mobile a { color: var(--cream); text-decoration: none; font-size: 1.25rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.3s; }
.nav-mobile a:hover { color: var(--green); }

/* ─── FOOTER ─── */
.footer { background: var(--navy); border-top: 1px solid rgba(0, 0, 0, 0.06); padding: 4rem 3rem 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; max-width: 1200px; margin: 0 auto 3rem; }
.footer-brand .nav-logo { display: inline-block; margin-bottom: 1rem; }
.footer-brand .nav-logo img { height: 60px; margin: 0; }
.footer-brand p { color: var(--text-muted); font-size: 0.85rem; line-height: 1.7; max-width: 300px; }
.footer-aaa-img { width: 125px; height: auto; display: block; margin-top: 25px; }
.footer-col h4 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--cream); margin-bottom: 1.25rem; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.6rem; }
.footer-col a { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; transition: color 0.3s; }
.footer-col a:hover { color: var(--green); }
.footer-col .contact-item { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0.6rem; }
.footer-bottom { max-width: 1200px; margin: 0 auto; padding-top: 2rem; border-top: 1px solid rgba(0, 0, 0, 0.06); text-align: center; font-size: 0.8rem; color: var(--text-muted); }

/* ─── RESPONSIVE (chrome) ─── */
@media (max-width: 768px) {
    .nav { padding: 0.6rem 1.5rem; }
    .nav-logo img { height: 90px; margin: 5px 0 -38px 0; }
    .nav-links { display: none; }
    .nav-hamburger { display: flex; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}