/* Dharma Digital Marketing — shared stylesheet
   Mobile-first, no frameworks, no web fonts (system font stack for speed). */

:root {
  --bg: #faf9f6;
  --bg-alt: #f0efe9;
  --text: #1c1a17;
  --muted: #55534d;
  --ink: #151115;
  --gold: #ffc206;
  --accent: #ffc206;
  --accent-dark: #7a5800;
  --border: #ddd8cd;
  --max: 760px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  font-size: 17px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent-dark);
}

a:hover,
a:focus {
  color: #a37600;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}

/* Header / nav */

header.site-header {
  background: var(--ink);
  border-bottom: 3px solid var(--gold);
}

.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 700;
  color: #fdf6e3;
  text-decoration: none;
}

.brand img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.brand span {
  color: var(--gold);
  display: block;
}

nav.main-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
}

nav.main-nav a {
  text-decoration: none;
  color: #f2ede1;
  font-size: 0.95rem;
  font-weight: 500;
}

nav.main-nav a:hover {
  color: var(--gold);
}

.header-call {
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ink);
  background: var(--gold);
  padding: 8px 14px;
  border-radius: 4px;
  text-decoration: none;
}

.header-call:hover {
  background: #fdf6e3;
  color: var(--ink);
}

/* Hero / page header */

.page-hero {
  padding-top: 40px;
  padding-bottom: 28px;
}

.page-hero h1 {
  font-size: 1.7rem;
  line-height: 1.3;
  margin: 0 0 14px;
}

.page-hero p.lede {
  font-size: 1.1rem;
  color: var(--muted);
  margin: 0;
}

h1 {
  font-size: 1.6rem;
  line-height: 1.3;
}

h2 {
  font-size: 1.3rem;
  margin-top: 2.2em;
}

h3 {
  font-size: 1.1rem;
  margin-top: 1.6em;
}

/* Measure control: ~40 real characters per line on mobile, ~75 on
   desktop (see the desktop override in the media query below). "ch"
   is based on the "0" glyph, which is narrower than this font's
   average character, so the values here are tuned down from a literal
   40/75ch to land on an actual ~40/~75 rendered characters per line. */
h1,
h2,
h3,
p,
li {
  max-width: 34ch;
}

section {
  padding: 8px 0 28px;
}

/* Buttons */

.btn {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 4px;
  border: none;
  font-size: 1rem;
  cursor: pointer;
}

.btn:hover,
.btn:focus {
  background: #e0ab00;
  color: var(--ink);
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
}

.btn-secondary:hover {
  background: var(--ink);
  color: var(--gold);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0;
}

/* Contact strip */

.contact-strip {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px 20px;
  margin: 24px 0;
}

.contact-strip p {
  margin: 6px 0;
  font-size: 1.05rem;
}

.contact-strip a {
  font-weight: 700;
  text-decoration: none;
}

/* Service / feature blocks */

.service-block {
  border-top: 1px solid var(--border);
  padding: 24px 0;
}

.service-block:first-of-type {
  border-top: none;
}

.service-block h2 {
  margin-top: 0;
}

.outcome-tag {
  display: inline-block;
  background: var(--ink);
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 3px;
  margin-bottom: 10px;
}

/* Tables */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.95rem;
}

caption {
  text-align: left;
  font-weight: 700;
  margin-bottom: 8px;
}

th,
td {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border);
  vertical-align: top;
}

th {
  background: var(--bg-alt);
}

.table-scroll {
  overflow-x: auto;
}

/* Verify marker */

.verify {
  color: #8a5a00;
  font-weight: 700;
}

/* Form */

form.lead-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 480px;
}

form.lead-form label {
  font-weight: 700;
  font-size: 0.95rem;
  display: block;
  margin-bottom: 4px;
}

form.lead-form input,
form.lead-form textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--text);
}

form.lead-form textarea {
  resize: vertical;
  min-height: 120px;
}

/* Honeypot - hidden from real users, visible to bots that fill every field */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Footer */

footer.site-footer {
  border-top: 3px solid var(--gold);
  background: var(--ink);
  margin-top: 40px;
  padding: 30px 0;
  font-size: 0.9rem;
  color: #cfc9bd;
}

footer.site-footer .footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}

footer.site-footer p {
  margin: 4px 0;
}

footer.site-footer strong {
  color: #fdf6e3;
}

footer.site-footer nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 0;
  margin: 10px 0;
}

footer.site-footer a {
  color: var(--gold);
}

footer.site-footer a:hover {
  color: #fdf6e3;
}

/* Responsive */

@media (min-width: 640px) {
  body {
    font-size: 18px;
  }

  .page-hero h1 {
    font-size: 2.1rem;
  }

  h1 {
    font-size: 2rem;
  }

  h1,
  h2,
  h3,
  p,
  li {
    max-width: 63ch;
  }
}