*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 380; }
img, video { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--moss); color: var(--paper); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 380; letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); margin: 0; font-variation-settings: "opsz" 144, "SOFT" 30; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); }
p { margin: 0 0 1em; max-width: var(--col-text); }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--fg-soft); }
em, .italic { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 80; }

.eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--moss); display: inline-flex; align-items: center; gap: 0.6rem; }
.eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: currentColor; opacity: 0.6; }

.container { width: 100%; max-width: var(--col-max); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.wrap-narrow { max-width: var(--col-narrow); }
.wrap-text { max-width: var(--col-text); }
.wrap-wide { max-width: var(--col-wide); }

section { padding-block: clamp(4rem, 7vw, 7.5rem); }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

.btn { display: inline-flex; align-items: center; gap: 0.65rem; padding: 0.95rem 1.6rem; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.01em; border-radius: var(--radius-pill); transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.btn-primary { background: var(--moss); color: var(--paper); }
.btn-primary:hover { background: var(--charcoal); transform: translateY(-1px); }
.btn-ghost { border: 1px solid var(--rule); color: var(--ink); }
.btn-ghost:hover { background: var(--paper); border-color: var(--ink); }
.btn .arrow { transition: transform var(--t-fast) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }