/* ===========================================================
   Mediant Partners — shared site styles
   Ported from brand-system/07-digital-system/tokens.css.
   Dark (slate) is the canonical default; light follows system preference.
   =========================================================== */
:root {
  --mp-slate:        #0d0e10;
  --mp-cream-warm:   #f0e3c0;
  --mp-paper:        #fafaf5;
  --mp-ink-warm:     #1a140a;
  --mp-amber:        #e69649;
  --mp-amber-strong: #b85e1a;

  --mp-space-3: 0.75rem;
  --mp-space-4: 1rem;
  --mp-space-5: 1.5rem;
  --mp-space-6: 2rem;
  --mp-space-7: 3rem;
  --mp-space-8: 4rem;
  --mp-space-9: 5rem;

  --mp-font-display: "EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --mp-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mp-font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --mp-leading-tight: 1.18;
  --mp-leading-body:  1.62;

  --mp-tracking-display: 0.055em;
  --mp-tracking-sub:     0.34em;
  --mp-measure:          62ch;

  --mp-opacity-quiet: 0.62;

  --mp-surface:    var(--mp-slate);
  --mp-surface-2:  rgb(240 227 192 / 0.045);
  --mp-ink:        var(--mp-cream-warm);
  --mp-ink-quiet:  rgb(240 227 192 / 0.62);
  --mp-accent:     var(--mp-amber);
  --mp-rule:       rgb(240 227 192 / 0.20);
  --mp-focus:      var(--mp-cream-warm);
}

@media (prefers-color-scheme: light) {
  :root {
    --mp-surface:   var(--mp-paper);
    --mp-surface-2: rgb(26 20 10 / 0.035);
    --mp-ink:       var(--mp-ink-warm);
    --mp-ink-quiet: rgb(26 20 10 / 0.62);
    --mp-accent:    var(--mp-amber-strong);
    --mp-rule:      rgb(26 20 10 / 0.20);
    --mp-focus:     var(--mp-ink-warm);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--mp-surface);
  color: var(--mp-ink);
  font-family: var(--mp-font-body);
  font-size: 1rem;
  line-height: var(--mp-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration-color: var(--mp-rule); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 1.5px solid var(--mp-focus);
  outline-offset: 3px;
}

main { display: block; }

.wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding-inline: var(--mp-space-5);
}

.wrap-wide { max-width: 40rem; }
.wrap-narrow { max-width: 34rem; }

section { padding-block: var(--mp-space-9); }
section + section { border-top: 1px solid var(--mp-rule); }

/* ---------- crumbs / small header for subpages ---------- */
.subpage-head { padding-block: var(--mp-space-8) var(--mp-space-7); }
.crumbs {
  font-family: var(--mp-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mp-ink-quiet);
  margin: 0 0 var(--mp-space-6);
}
.crumbs a { color: var(--mp-ink-quiet); }
.crumbs a:hover { color: var(--mp-ink); }
.crumbs > *:not(:first-child)::before { content: " / "; opacity: 0.5; margin: 0 0.35em; }

.subpage-head h1 {
  font-family: var(--mp-font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: var(--mp-leading-tight);
  margin: 0 0 var(--mp-space-4);
  max-width: 20ch;
}
.subpage-head .standfirst {
  font-size: 1.0625rem;
  color: var(--mp-ink-quiet);
  max-width: var(--mp-measure);
  margin: 0;
}
.subpage-head .page-meta {
  font-family: var(--mp-font-mono);
  font-size: 0.75rem;
  color: var(--mp-ink-quiet);
  opacity: var(--mp-opacity-quiet);
  margin: var(--mp-space-4) 0 0;
}

/* ---------- hero (index only) ---------- */
.hero { padding-block: var(--mp-space-9) var(--mp-space-8); text-align: center; }
.hero .wrap { max-width: 40rem; }

.mark {
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto var(--mp-space-6);
  display: block;
}
.mark .mp-line { stroke: currentColor; }
.mark .mp-finial, .mark .mp-reticle-dot { fill: currentColor; }
.mark .mp-reticle { fill: var(--mp-surface); stroke: currentColor; }
.mark .mp-node, .mark .mp-node-halo { color: var(--mp-accent); }

.mark-small { width: 1.75rem; height: 1.75rem; margin: 0; }

.kicker {
  font-family: var(--mp-font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--mp-tracking-sub);
  text-transform: uppercase;
  color: var(--mp-ink-quiet);
  margin: 0 0 var(--mp-space-6);
}

.wordmark {
  font-family: var(--mp-font-display);
  font-weight: 500;
  line-height: 1;
  margin: 0;
}
.wordmark .name-primary {
  display: block;
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  letter-spacing: var(--mp-tracking-display);
}
.wordmark .name-secondary {
  display: block;
  font-size: clamp(0.9rem, 2.4vw, 1.15rem);
  letter-spacing: var(--mp-tracking-sub);
  margin-top: 0.4em;
  color: var(--mp-ink-quiet);
}

.positioning {
  font-family: var(--mp-font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mp-ink-quiet);
  margin: var(--mp-space-6) 0 0;
}

h1.headline {
  font-family: var(--mp-font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.4rem, 3.6vw, 1.9rem);
  line-height: var(--mp-leading-tight);
  letter-spacing: 0.01em;
  margin: var(--mp-space-7) auto 0;
  max-width: 30ch;
}

.lede {
  font-size: 1.0625rem;
  color: var(--mp-ink-quiet);
  max-width: var(--mp-measure);
  margin: var(--mp-space-5) auto 0;
}

/* ---------- prose sections ---------- */
.prose p, .prose ul, .prose ol { max-width: var(--mp-measure); margin: 0 0 var(--mp-space-5); }
.prose p:last-child, .prose ul:last-child, .prose ol:last-child { margin-bottom: 0; }
.prose li { margin-bottom: 0.4em; }
.prose li:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--mp-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mp-accent);
  margin: 0 0 var(--mp-space-5);
}

h2 {
  font-family: var(--mp-font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: var(--mp-leading-tight);
  margin: var(--mp-space-8) 0 var(--mp-space-5);
  max-width: 26ch;
}
section > .wrap > h2:first-of-type,
.prose > h2:first-child { margin-top: 0; }

h3 {
  font-family: var(--mp-font-display);
  font-weight: 500;
  font-size: 1.1875rem;
  margin: var(--mp-space-6) 0 var(--mp-space-3);
}

.judgement {
  font-family: var(--mp-font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  line-height: var(--mp-leading-tight);
  max-width: 26ch;
  margin: 0 0 var(--mp-space-6);
}

/* ---------- services ---------- */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mp-space-7);
}
@media (min-width: 44rem) {
  .services-grid { grid-template-columns: repeat(3, 1fr); gap: var(--mp-space-6); }
}
.service h3 { margin-top: 0; }
.service p { margin: 0; color: var(--mp-ink-quiet); max-width: 34ch; }

/* ---------- closing ---------- */
.closing { text-align: center; }
.closing blockquote {
  font-family: var(--mp-font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.4rem, 4vw, 2rem);
  line-height: var(--mp-leading-tight);
  max-width: 26ch;
  margin: 0 auto;
}

/* ---------- get in touch ---------- */
.touch { text-align: center; }
.touch p { margin: 0; max-width: 40ch; margin-inline: auto; }
.touch a.email {
  font-family: var(--mp-font-mono);
  font-size: 0.95rem;
  display: inline-block;
  margin-top: var(--mp-space-4);
  border-bottom: 1px solid var(--mp-rule);
  padding-bottom: 0.15em;
}
.touch a.email:hover { border-bottom-color: currentColor; }

/* ---------- forms ---------- */
.form-group { margin-bottom: var(--mp-space-5); }
label {
  display: block;
  font-family: var(--mp-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mp-ink-quiet);
  margin-bottom: var(--mp-space-3);
}
input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%;
  background: var(--mp-surface-2);
  border: 1px solid var(--mp-rule);
  border-radius: 3px;
  color: var(--mp-ink);
  font-family: var(--mp-font-body);
  font-size: 1rem;
  padding: 0.7em 0.85em;
}
textarea { resize: vertical; min-height: 8rem; line-height: var(--mp-leading-body); }
input::placeholder, textarea::placeholder { color: var(--mp-ink-quiet); opacity: 0.6; }

.consent-row { display: flex; gap: 0.65em; align-items: flex-start; margin-bottom: var(--mp-space-6); }
.consent-row input { margin-top: 0.3em; }
.consent-row label {
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--mp-font-body);
  font-size: 0.9rem;
  color: var(--mp-ink-quiet);
}

button[type="submit"] {
  font-family: var(--mp-font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  color: var(--mp-ink);
  border: 1px solid var(--mp-rule);
  border-radius: 3px;
  padding: 0.8em 1.4em;
  cursor: pointer;
}
button[type="submit"]:hover { border-color: currentColor; }

.form-note {
  font-size: 0.875rem;
  color: var(--mp-ink-quiet);
  margin-top: var(--mp-space-4);
}

.alert {
  border: 1px solid var(--mp-rule);
  border-radius: 4px;
  padding: var(--mp-space-5);
  margin-bottom: var(--mp-space-6);
}
.alert strong { display: block; margin-bottom: 0.3em; font-family: var(--mp-font-display); font-size: 1.05rem; font-weight: 500; }
.alert p { margin: 0; color: var(--mp-ink-quiet); font-size: 0.9375rem; }
.alert.ok { border-color: var(--mp-accent); }

.side-card {
  border: 1px solid var(--mp-rule);
  border-radius: 4px;
  padding: var(--mp-space-6);
  margin-bottom: var(--mp-space-6);
}
.side-card:last-child { margin-bottom: 0; }
.side-card .label {
  display: block;
  font-family: var(--mp-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mp-accent);
  margin-bottom: var(--mp-space-3);
}
.side-card h3 { margin: 0 0 var(--mp-space-3); font-size: 1.1rem; }
.side-card p, .side-card ol { margin: 0; color: var(--mp-ink-quiet); font-size: 0.9375rem; }
.side-card ol { padding-left: 1.1em; }
.side-card li { margin-bottom: 0.5em; }
.side-card li:last-child { margin-bottom: 0; }

.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mp-space-7);
}
@media (min-width: 56rem) {
  .two-col { grid-template-columns: 1.4fr 1fr; align-items: start; }
}

/* ---------- footer ---------- */
footer {
  padding-block: var(--mp-space-7) var(--mp-space-8);
  text-align: center;
}
.people {
  font-family: var(--mp-font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--mp-ink-quiet);
  margin: 0 0 var(--mp-space-5);
}
.people b { color: var(--mp-ink); font-weight: 600; }
.footer-nav {
  font-family: var(--mp-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--mp-ink-quiet);
  margin: 0 0 var(--mp-space-4);
}
.footer-nav a { margin: 0 0.6em; }
.footer-nav a:hover { color: var(--mp-ink); }
.colophon {
  font-family: var(--mp-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--mp-ink-quiet);
  opacity: var(--mp-opacity-quiet);
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .mark .mp-node { animation: mp-pulse 3.6s ease-in-out infinite; }
}
@keyframes mp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}