html, body { background: var(--color-bg); color: var(--color-text); }
body { font-family: "DM Sans", sans-serif; font-size: var(--text-base); line-height: 1.6; }

.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 9999;
  background: var(--color-primary); color: #fff; padding: 0.6rem 1rem; border-radius: var(--radius-md);
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.container { width: min(1600px, 100%); margin-inline: auto; padding-inline: clamp(1rem, 5vw, 5rem); }
.section { padding-block: var(--space-xl); }
.section > .container > .page-head { padding-top: 0; }
main.section { padding-top: 0; }
.section-title { font-family: "Cormorant Garamond", serif; font-size: var(--text-xl); line-height: 1.1; }
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.2em; font-size: var(--text-xs); color: var(--color-accent);
}
.lead { color: var(--color-text-muted); max-width: 65ch; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1.4rem; border-radius: var(--radius-pill); border: 1px solid transparent;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  font-size: var(--text-sm); letter-spacing: 0.05em; text-transform: uppercase;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(29,74,46,0.25); background: var(--color-accent); color: var(--color-bg-dark); }
.btn-outline { border-color: rgba(255,255,255,0.7); color: #fff; }
.btn-outline:hover { background: #fff; color: var(--color-bg-dark); border-color: #fff; }
.btn-accent { background: var(--color-accent); color: #fff; }
.btn-accent:hover { background: var(--color-primary); color: #fff; }

.badge { display:inline-block; font-size: var(--text-xs); padding: 0.25rem 0.7rem; border-radius: var(--radius-pill); background: rgba(181,129,58,0.12); color: var(--color-accent); }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }

.grid { display: grid; gap: var(--space-md); }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }