/* Tea Rooibos: a trade sheet. Off-white, ink, one tea-red rule. */
:root {
  --bg: #fbf9f4; --ink: #1c1917; --soft: #57504a; --faint: #6a6058; /* --faint 5.8:1 on --bg */ --tea: #9a2f1c; --tea-deep: #6f1f12; --rule: #d9d2c5;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", Palatino, Georgia, serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 106.25%; line-height: 1.55; }
body { margin: 0; overflow-x: hidden; }
p, li { overflow-wrap: anywhere; }
a { color: var(--tea); text-underline-offset: 0.15em; }
:focus-visible { outline: 3px solid var(--tea); outline-offset: 3px; }
.skip-link { position: absolute; left: 1rem; top: -4rem; background: var(--ink); color: var(--bg); padding: 0.5rem 1rem; z-index: 10; }
.skip-link:hover, .skip-link:focus { color: var(--bg); top: 1rem; outline-color: var(--bg); }
.top, main, footer { max-width: 44rem; margin: 0 auto; padding: 0 1.25rem; }
.top { padding-top: 2rem; padding-bottom: 1rem; border-bottom: 4px solid var(--tea); }
.wordmark { margin: 0; font-family: var(--serif); font-size: 1.8rem; }
.wordmark a { color: var(--ink); text-decoration: none; }
.tagline { margin: 0.25rem 0 0.75rem; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; font-size: 0.9rem; }
nav a { color: var(--soft); text-decoration: none; }
nav a[aria-current="page"] { color: var(--ink); border-bottom: 2px solid var(--tea); }
main { padding-top: 2.5rem; padding-bottom: 3rem; }
h1 { font-family: var(--serif); font-size: clamp(1.9rem, 1.2rem + 2.5vw, 2.8rem); line-height: 1.15; margin: 0 0 1rem; }
h2 { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); margin: 2.5rem 0 0.75rem; }
.lede { font-family: var(--serif); font-size: 1.2rem; color: var(--soft); }
.small { font-size: 0.88rem; color: var(--soft); }
.lead-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0 0.75rem; }
.button { display: inline-block; font-weight: 600; font-size: 0.95rem; line-height: 1.3; padding: 0.6rem 1.1rem; border-radius: 3px; border: 2px solid var(--ink); color: var(--ink); background: transparent; text-decoration: none; text-align: center; }
.button:hover { background: var(--rule); color: var(--ink); }
.button.primary { background: var(--tea); border-color: var(--tea); color: var(--bg); }
.button.primary:hover { background: var(--tea-deep); border-color: var(--tea-deep); color: var(--bg); }
.button.quiet { border-color: var(--rule); color: var(--soft); }
.button.quiet:hover { color: var(--ink); }
.sheet ul { list-style: none; padding: 0; margin: 0 0 1rem; border-top: 1px solid var(--rule); }
.sheet li { padding: 0.6rem 0; border-bottom: 1px solid var(--rule); font-family: var(--serif); font-size: 1.15rem; }
.contact-list { padding-left: 1.2rem; }
.contact-list li { margin-bottom: 0.75rem; }
.contact-list a, .enquire a { font-weight: 600; }
.steps { padding-left: 1.4rem; }
.steps li { margin-bottom: 0.75rem; }
footer { border-top: 1px solid var(--rule); padding-top: 1.25rem; padding-bottom: 2.5rem; font-size: 0.88rem; color: var(--soft); }
footer .meta { font-size: 0.78rem; color: var(--faint); font-family: var(--mono); }
@media (max-width: 30rem) { html { font-size: 100%; } nav ul { flex-wrap: wrap; gap: 0.5rem 1.25rem; } .lead-actions .button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print { .skip-link, .lead-actions, nav { display: none; } }