:root{
  --bg: #faf8f3;
  --bg-raised: #ffffff;
  --ink: #1b1b18;
  --ink-soft: #4a4740;
  --rule: #ddd6c4;
  --accent: #0f5c56;
  --accent-ink: #ffffff;
  --focus: #0f5c56;
  --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", monospace;
  color-scheme: light dark;
}
/* Dark theme keeps the light theme's exact #0f5c56 green unchanged for
   fills/borders/large accents (buttons, skip-link, nav-hover border, pull-quote
   border, focus ring) — only the background and foreground neutrals change.
   Small text that uses --accent (eyebrow, status line, section numerals) reads
   --accent-text instead — a lighter, accessible green from the same teal family
   (exact #0f5c56 fails contrast at this size) — which falls back to --accent
   in the light theme, where it's unused. */
@media (prefers-color-scheme: dark){
  :root:not([data-review-theme="light"]){
    --bg: #1a1918;
    --bg-raised: #232120;
    --ink: #f2ede0;
    --ink-soft: #b3ada0;
    --rule: #38352f;
    --accent: #0f5c56;
    --accent-text: #38baa0;
    --accent-ink: #ffffff;
    --focus: #0f5c56;
    color-scheme: dark;
  }
}
:root[data-review-theme="light"]{ color-scheme: light; }
:root[data-review-theme="dark-exact-green"]{
  --bg: #1a1918;
  --bg-raised: #232120;
  --ink: #f2ede0;
  --ink-soft: #b3ada0;
  --rule: #38352f;
  --accent: #0f5c56;
  --accent-text: #38baa0;
  --accent-ink: #ffffff;
  --focus: #0f5c56;
  color-scheme: dark;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body{
  margin:0; background: var(--bg); color: var(--ink); font-family: var(--sans);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}
a{ color: inherit; }
a:focus-visible, button:focus-visible{ outline: 2px solid var(--focus); outline-offset: 3px; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--accent); color:var(--accent-ink); padding:.75rem 1rem; z-index:10; }
.skip-link:focus{ left: 1rem; top: 1rem; }

.wrap{ max-width: 820px; margin: 0 auto; padding-inline: 1.5rem; }
.wrap--wide{ max-width: 1040px; }

header.masthead{ border-bottom: 1px solid var(--rule); padding: 1.5rem 0; }
.masthead-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.wordmark{ font-family: var(--serif); font-size: 1.35rem; letter-spacing: .02em; font-weight: 600; text-decoration: none; display: inline-block; }
.wordmark small{ display:block; font-family: var(--sans); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; margin-top: .2rem; }
nav.primary ul{ list-style:none; display:flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin:0; padding:0; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
nav.primary a{ text-decoration:none; border-bottom: 1px solid transparent; padding-bottom: 2px; padding-top: .5rem; display: inline-block; }
nav.primary a:hover, nav.primary a[aria-current="page"]{ border-color: var(--accent); }

section{ padding-block: 4.5rem; border-bottom: 1px solid var(--rule); }
section:last-of-type{ border-bottom: none; }
.eyebrow{ font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text, var(--accent)); font-weight: 600; margin: 0 0 1.75rem; }
h1{ font-family: var(--serif); font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.15; margin: 0 0 1.4rem; font-weight: 600; overflow-wrap: break-word; }
#home h1{ font-size: clamp(2rem, 3.8vw, 2.8rem); max-width: 20ch; }
h2{ font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 1.5rem; font-weight: 600; overflow-wrap: break-word; }
h3{ font-family: var(--serif); font-size: 1.25rem; margin: 0 0 .5rem; font-weight: 600; overflow-wrap: break-word; }
p{ margin: 0 0 1rem; color: var(--ink-soft); max-width: 62ch; overflow-wrap: break-word; }
.lede{ font-size: 1.15rem; color: var(--ink); max-width: 56ch; }

.cta-row{ display:flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.75rem; }
.btn{ font-size: .85rem; letter-spacing: .03em; text-decoration:none; padding: .8rem 1.4rem; border: 1px solid var(--ink); border-radius: 2px; display:inline-block; max-width: 100%; overflow-wrap: break-word; }
.btn--primary{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--ghost{ color: var(--ink); }
.btn:hover{ opacity:.85; }

.products-grid{ display:grid; grid-template-columns: 1fr; gap: 0; margin-top: 2.5rem; border-top: 1px solid var(--rule); }
@media (min-width: 760px){ .products-grid{ grid-template-columns: 1fr 1fr; } }
.product{ padding: 2.25rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 760px){
  .product:first-child{ padding-right: 2.5rem; border-right: 1px solid var(--rule); }
  .product:last-child{ padding-left: 2.5rem; }
}
.tag{ font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); display:inline-block; margin-bottom: .6rem; }
.status{ font-size: .78rem; color: var(--accent-text, var(--accent)); font-weight: 600; margin-top: 1rem; }
.caps-list{ list-style:none; padding:0; margin: 1rem 0; font-size: .88rem; color: var(--ink-soft); }
.caps-list li{ padding: .3rem 0; border-top: 1px dotted var(--rule); }
.caps-list li:first-child{ border-top: none; }

.services-list{ counter-reset: svc; margin-top: 2.5rem; }
.service{ counter-increment: svc; display:grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--rule); }
@media (max-width: 480px){
  .service{ grid-template-columns: 1fr; gap: .5rem; }
}
.service > div{ min-width: 0; }
.service:before{ content: counter(svc, decimal-leading-zero); font-family: var(--serif); font-size: 1.4rem; color: var(--accent-text, var(--accent)); }
.service h3{ margin-bottom: .35rem; }

.about-block{ display:grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; }
@media (min-width: 760px){ .about-block{ grid-template-columns: 1fr 1.4fr; } }
.pull{ border-left: 3px solid var(--accent); padding-left: 1.25rem; font-family: var(--serif); font-size: 1.2rem; font-style: italic; color: var(--ink); }
.experience{ margin-top: 1.75rem; padding-block: 1.25rem; border-block: 1px solid var(--rule); }
.experience-label{ font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin: 0 0 .5rem; }
.experience-note{ font-size: .8rem; margin: 0 0 1rem; }
.experience-groups{ display:grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px){ .experience-groups{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; } }
.experience-group h3{ font-family: var(--sans); font-size: .68rem; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; color: var(--accent-text, var(--accent)); font-weight: 700; margin: 0 0 .35rem; }
.experience-group ul{ list-style:none; margin:0; padding:0; font-size:.8rem; color:var(--ink-soft); }
.experience-group li{ padding:.35rem 0; border-top:1px dotted var(--rule); overflow-wrap:break-word; }
.credentials{ margin-top: 1.5rem; }
.credentials-label{ font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin: 0 0 .9rem; }
.credentials-groups{ display:grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 640px){ .credentials-groups{ grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.credentials-group-label{ display:block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text, var(--accent)); font-weight: 700; margin: 0 0 .5rem; }
.credentials-groups ul{ list-style: disc outside; margin: 0; padding-left: 1.15em; font-size: .8rem; color: var(--ink-soft); line-height: 1.7; }
.credentials-groups li{ margin-bottom: .55rem; padding-left: .15em; }
.credentials-groups li:last-child{ margin-bottom: 0; }

.contact-block{ display:flex; flex-direction:column; align-items:center; width:fit-content; max-width:100%; margin-top:1.5rem; }
.contact-block .cta-row{ justify-content:center; width:100%; }
.contact-fallback{ max-width:none; margin:.75rem 0 0; color:var(--ink-soft); font-size:.78rem; line-height:1.6; text-align:center; }
.contact-address{ color:var(--ink); font-family:var(--mono); white-space:nowrap; }
.fineprint{ font-size: .78rem; color: var(--ink-soft); margin-top: 1.5rem; max-width: 60ch; }

/* Privacy / Terms prose */
.legal h2{ font-size: clamp(1.25rem, 2vw, 1.5rem); margin-top: 2.5rem; }
.legal h2:first-of-type{ margin-top: 0; }
.legal ul, .legal ol{ color: var(--ink-soft); max-width: 62ch; padding-left: 1.25rem; margin: 0 0 1rem; }
.legal li{ margin-bottom: .4rem; }
.updated{ font-size: .78rem; color: var(--ink-soft); margin: 0 0 2.5rem; }

footer{ padding-block: 2.5rem; }
footer p{ font-size: .78rem; margin:0; }
footer nav ul{ list-style:none; display:flex; flex-wrap:wrap; gap: .5rem 1.25rem; padding:0; margin: .75rem 0 0; font-size: .78rem; }
footer nav a{ text-decoration: underline; text-underline-offset: 2px; }