/* Multivera Counsel — site styles */

:root {
  --paper:      #FCFAF5;
  --paper-alt:  #F4EEE3;
  --ink:        #1D1B17;
  --ink-soft:   #57514A;
  --rule:       #E6DCCA;
  --accent:     #2F4F49;   /* deep evergreen — buttons, links */
  --accent-mid: #5C7A72;
  --accent-warm: #8C6A45;  /* umber — section labels */

  --serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body:  "Literata", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --measure: 36rem;
  --gutter: clamp(1.5rem, 5vw, 4rem);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.62;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); }

img { max-width: 100%; }

.wrap {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0 3.5rem;
}

/* The section label sits in a left rail; everything else in the main column. */
.wrap > .section-title { grid-column: 1; }
.wrap > *:not(.section-title) { grid-column: 2; }

/* Sections with no label run flush to the left edge. */
.wrap--full { grid-template-columns: minmax(0, 1fr); }
.wrap--full > * { grid-column: 1 !important; }

@media (max-width: 860px) {
  .wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wrap > .section-title,
  .wrap > *:not(.section-title) { grid-column: 1; }
}

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.site-header__inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.6rem var(--gutter);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.wordmark { text-decoration: none; display: block; }

.wordmark__name {
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  display: block;
  line-height: 1.2;
}

.wordmark__tagline,
.wordmark__sub {
  display: block;
  font-family: var(--serif);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.wordmark__tagline { margin-top: 0.5rem; }
.wordmark__sub     { margin-top: 0.18rem; }

.nav {
  font-family: var(--sans);
  display: flex;
  gap: 1.75rem;
  font-size: 0.83rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.nav a { color: var(--ink-soft); padding-bottom: 2px; border-bottom: 1px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- Sections ---------- */

section { padding: clamp(2.1rem, 4.2vw, 3.25rem) 0; }

/* Two unshaded sections in a row have no band edge between them, so their
   stacked padding reads as one dead gap. Halve it. */
section:not(.band) + section:not(.band) { padding-top: clamp(1rem, 2vw, 1.4rem); }

.band { background: var(--paper-alt); }

.section-title {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--accent-warm);
  margin: 0.35rem 0 1.6rem;
}

@media (min-width: 861px) {
  .section-title { margin-bottom: 0; }
}

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.25rem; }
.prose p:last-child { margin-bottom: 0; }

.prose--lead { font-size: 1.1rem; }

/* Contact page: run the opening line out to the form's right edge. The form
   sits in the .wrap main column, so its right edge is the label rail (11rem)
   plus the gap (3.5rem) plus the form's own 34rem. */
.prose--form-width { max-width: calc(11rem + 3.5rem + 34rem); }

@media (max-width: 860px) {
  .prose--form-width { max-width: 34rem; }
}
.prose--lead p { margin-bottom: 1.45rem; }

.more { margin-top: 1.4rem !important; font-size: 0.95rem; }
.more a { border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.more a:hover { border-bottom-color: var(--accent); }

/* ---------- Hero ---------- */

.hero {
  padding: clamp(2.1rem, 4.2vw, 3rem) var(--gutter) clamp(2.5rem, 5vw, 3.5rem);
  max-width: 64rem;
  margin: 0 auto;
}

/* Headline and portrait share a row; the portrait ends where the headline does. */
.hero__head {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  gap: 3rem;
  align-items: stretch;
}

.hero__head > .hero__portrait { grid-column: 1; grid-row: 1; }
.hero__head > .hero__lede     { grid-column: 2; grid-row: 1; }

.hero__portrait { margin: 0; position: relative; min-height: 0; }

.hero__portrait img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 14%;
  border-radius: 2px;
  filter: saturate(0.96);
}

.hero__lede {
  font-family: var(--serif);
  font-size: clamp(1.85rem, 4.6vw, 3.1rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}

/* A half-line of air between the two sentences of the headline. */
.hero__lede span { display: block; }
.hero__lede span + span { margin-top: 0.42em; }

.hero__body { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

.hero__sub {
  max-width: 48rem;
  font-size: 1.1rem;
  color: var(--ink-soft);
  margin: 0 0 2rem;
}

@media (max-width: 880px) {
  .hero__head { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .hero__head > .hero__portrait { grid-column: 1; grid-row: 2; }
  .hero__head > .hero__lede     { grid-column: 1; grid-row: 1; }
  .hero__lede { max-width: 20ch; }
  .hero__portrait { max-width: 15rem; position: static; }
  .hero__portrait img { position: static; height: auto; }
}

/* ---------- Page heads (interior pages) ---------- */

.page-head {
  padding: clamp(2.1rem, 4.2vw, 3rem) var(--gutter) clamp(1rem, 2.2vw, 1.35rem);
  max-width: 64rem;
  margin: 0 auto;
}

/* The section right after a page title shouldn't restack its own full top padding. */
.page-head + section { padding-top: clamp(0.9rem, 2vw, 1.35rem); }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-warm);
  margin: 0 0 1rem;
}

.page-title {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  font-weight: 400;
  margin: 0;
  max-width: 30ch;
  text-wrap: balance;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--accent);
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--sans);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Lists ---------- */

.record {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 42rem;
}

/* No rules between items — the dash marker alone carries the list. Padding is
   tighter than a ruled list needs, or the rows drift apart with nothing
   holding them together. */
.record li {
  padding: 0 0 0.85rem 1.6rem;
  position: relative;
}

.record li:last-child { padding-bottom: 0; }

.record li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68rem;
  width: 0.55rem;
  height: 1px;
  background: var(--accent-mid);
}

.record--triggers { margin-top: 1.5rem; }

/* ---------- Testimonials ---------- */

.quotes {
  display: grid;
  gap: 1.5rem;
  max-width: 42rem;
}

.quote {
  border-left: 2px solid var(--rule);
  padding-left: 1.6rem;
}

.quote p {
  font-family: var(--serif);
  font-size: 1.16rem;
  line-height: 1.48;
  margin: 0 0 0.8rem;
}

/* Written as a descendant so it outranks `.quote p` above, which would
   otherwise hand the attribution the quote's own serif. */
.quote__by,
.quote .quote__by {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

.quote__by strong {
  font-weight: 600;
  color: var(--ink);
}

.quote__by a {
  color: var(--accent);
  text-decoration-color: var(--rule);
  text-underline-offset: 2px;
}

.quote__by a:hover { color: var(--accent); }

/* ---------- Principles grid ---------- */

.prose + .principles { margin-top: 1.6rem; }

.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 2.5rem 3rem;
  max-width: 52rem;
}

.principle h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 0.6rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
}

.principle p { margin: 0; color: var(--ink-soft); font-style: italic; }

/* ---------- Case blocks ---------- */

.cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 2.5rem 2.5rem;
}

.case h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 0.9rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
}

.case ul { list-style: none; margin: 0; padding: 0; }
.case li { margin-bottom: 0.85rem; color: var(--ink-soft); }
.case li:last-child { margin-bottom: 0; }

/* ---------- Pull quote ---------- */

.pull {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  line-height: 1.28;
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 40ch;
  text-wrap: balance;
}

/* A short rule stands in for quote marks. */
.pull::before {
  content: "";
  display: block;
  width: 3.25rem;
  height: 2px;
  margin-bottom: 1.5rem;
  background: var(--accent-warm);
}

/* The Approach page ends on the pull quote, with the CTA alongside it rather
   than in a separate closing band. Bottom-aligned so the button sits on the
   quote's last line. */
.pull-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem 3.5rem;
  flex-wrap: wrap;
}

/* The quote's own 40ch measure is wider than the row can spare once the button
   takes its place, so tighten it here only. */
.pull-row > .pull {
  flex: 1 1 26ch;
  max-width: 32ch;
  min-width: 0;
}

.pull-row > p {
  margin: 0;
  flex: 0 0 auto;
  padding-bottom: 0.4rem;
}

@media (max-width: 720px) {
  .pull-row { display: block; }
  .pull-row > p { margin-top: 2rem; }
}

/* ---------- Closing ---------- */

.closing { border-top: 1px solid var(--rule); }

.closing__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2.5rem 3.5rem;
  flex-wrap: wrap;
}

.closing__inner > * { margin: 0; }

.closing__line {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  line-height: 1.32;
  flex: 1 1 24rem;
  max-width: 44ch;
  text-wrap: balance;
  hyphens: none;
}

.closing__inner > p:last-child { flex: 0 0 auto; }

@media (max-width: 720px) {
  .closing__inner { display: block; }
  .closing__line { margin-bottom: 2rem !important; }
}

/* ---------- Contact ---------- */

.contact-email {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
}

.form { max-width: 34rem; }
.field { margin-bottom: 1.4rem; }

.field label {
  font-family: var(--sans);
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.45rem;
}

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.7rem 0.8rem;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent-mid);
  box-shadow: 0 0 0 3px rgba(74, 107, 124, 0.15);
}

.hp { position: absolute; left: -9999px; }

/* ---------- Footer ---------- */

.site-footer {
  font-family: var(--sans);
  border-top: 1px solid var(--rule);
  padding: 1.9rem 0 2.4rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.site-footer__inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--ink); }

@media (max-width: 640px) {
  .site-header__inner { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .nav { gap: 1.25rem; flex-wrap: wrap; }
}


/* ---------- Bio with portrait ---------- */

.bio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: 2.5rem 3rem;
  align-items: start;
}

.bio > .portrait { grid-column: 2; grid-row: 1; }
.bio > .prose    { grid-column: 1; grid-row: 1; }

.portrait { margin: 0.35rem 0 0; }

.portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  filter: saturate(0.96);
}

@media (max-width: 720px) {
  .bio { grid-template-columns: minmax(0, 1fr); }
  .bio > .portrait { grid-column: 1; grid-row: 1; }
  .bio > .prose    { grid-column: 1; grid-row: 2; }
  .portrait { max-width: 13rem; }
}

/* The home page's single testimonial: the pull-quote voice, dialed down so it
   doesn't compete with the hero, running the full column width. */
.pull--home {
  font-size: clamp(1.35rem, 2.7vw, 1.85rem);
  max-width: none;
  text-wrap: pretty;   /* fill the column rather than balancing short lines */
}

.quote__by--home {
  margin: 1.2rem 0 0;
  max-width: none;
}

/* A single testimonial sitting under the principles grid on Approach. */
.principles + .quote--single { margin-top: 2.6rem; }

/* The Approach page's closing block now carries a testimonial rather than
   Caleb's own line, so the quote and its attribution travel together. */
 /* The quote runs the full width of the column; the button wraps beneath it. */
.pull-block { flex: 1 1 100%; max-width: none; min-width: 0; }

.pull-block .pull {
  max-width: none;
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  line-height: 1.32;
  text-wrap: pretty;   /* fill the column rather than balancing short lines */
}

.pull-row > p { margin-top: 0.4rem; }
.quote__by--pull { margin: 1.1rem 0 0; }

@media (max-width: 720px) {
  .pull-row .pull-block { max-width: none; }
}