/* Shared finishing rules for navigation, actions, fields and visual surfaces. */
/* About gives the firm's evidence and responsibilities room to be read. */
.page-about .section {padding-block: 42px}
.about-experience {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 7%;
  align-items: start;
}
.about-experience h2 {max-width: 19ch}
.about-narrative p {max-width: 64ch; font-size: 1rem; line-height: 1.7}
.about-narrative p + p {margin-top: 18px}
.about-narrative h2 {max-width: 24ch; margin-bottom: 20px}
.about-accountability {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 7%;
  align-items: start;
}
.about-commitments {
  padding: 24px;
  border: 1px solid #cbd8ce;
  border-radius: 6px;
  background: #fff;
}
.about-commitments h3 {font-size: 1.2rem; line-height: 1.35; text-wrap: initial}
.about-commitments ul {margin: 18px 0; padding-left: 20px; color: var(--muted); font-size: .9375rem; line-height: 1.6}
.about-commitments li + li {margin-top: 10px}
.about-next {display: flex; justify-content: space-between; align-items: center; gap: 30px}
.about-next h2 {max-width: 23ch; font-size: clamp(1.75rem, 2.8vw, 2.5rem)}
.about-next p {max-width: 50ch; margin-top: 14px}
.about-next .actions {margin-top: 0; flex-direction: column; align-items: start; flex-shrink: 0}
@media (max-width: 760px) {
  .page-about .section {padding-block: 32px}
  .about-experience, .about-accountability {grid-template-columns: 1fr; gap: 22px}
  .about-next {display: block}
  .about-next .actions {margin-top: 24px; flex-direction: row; flex-wrap: wrap}
  .about-commitments {padding: 22px}
}
:root {
  --line: #d2ddd3;
  --control-edge: #809a88;
}
.btn, .mast nav .nav-cta, .sample-filter, .dashboard-export {
  border-radius: 4px;
  transition: background-color .18s, border-color .18s, box-shadow .18s;
}
.btn:hover {box-shadow: 0 3px 10px #174d3b18}
.mast nav .nav-cta {border-color: var(--control-edge)}
.text-link {border-bottom-color: #9eb4a4; padding-block: 6px}
.feature-still, .lede-plate, .lede-plate img, .contact-plate, .film video {
  border-radius: 6px;
  overflow: hidden;
}
.feature-still, .lede-plate img, .contact-plate {
  border: 1px solid var(--line);
  box-shadow: none;
}
.lede-plate::after {display: none}
.practice-form, .prep-check, .delivery-stage, .sample-card, .dashboard-panel, .dashboard-table-wrap, .dashboard-metrics {
  border: 1px solid var(--line);
  border-radius: 6px;
}
.practice-form input:not([type=hidden]), .practice-form textarea, .dashboard-shell select, .dashboard-shell input[type=search], .exec-filters select, .controls select {
  border: 1px solid var(--control-edge);
  border-radius: 4px;
  background: #fff;
}
.practice-form input:focus, .practice-form textarea:focus, .dashboard-shell select:focus, .dashboard-shell input:focus {
  border-color: var(--green);
}
button:disabled {opacity: .55; cursor: default}
.triplet article {border-top: 1px solid var(--line); padding-top: 22px}
.triplet article > p {line-height: 1.6}
.hero .lead {max-width: 46ch}
.editorial-lede .lead {max-width: 49ch}
.page-index #services .triplet {margin-bottom: 24px}
.page-index .contact-plate {display: none}
.details-list {margin-top: 28px}
.details-list details {border-color: var(--line)}
.details-list p {max-width: 75ch; line-height: 1.65}
.delivery-stage {overflow: hidden}
.motion-surface {overflow: hidden}
.dashboard-heading.motion-surface {padding: 12px 0; margin-top: 8px}
.dashboard-heading .dashboard-switch {position: relative}
.sample-next .btn {flex-shrink: 0}
@media (prefers-reduced-motion: reduce) {
  .btn, .mast nav .nav-cta, .sample-filter, .dashboard-export {transition: none}
}

.dashboard-toolbar {padding-block: 16px}
.dashboard-heading {margin-bottom: 18px}
.dashboard-metric {padding-block: 20px}
@media (max-width: 650px) {
  .dashboard-metrics {grid-template-columns: 1fr}
  .dashboard-metric {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    align-items: center;
  }
  .dashboard-metric strong {grid-column: 2; grid-row: 1 / 3; margin: 0}
}

/* Editorial art direction: Archivo, measured gold accents and honest link feedback. */
:where(.hero, .editorial-lede) .eyebrow::before,
.page-about .about-narrative > .eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  margin-right: 10px;
  vertical-align: .28em;
  background: #a88b51;
}
.hero h1 {
  font-weight: 690;
  letter-spacing: -.055em;
}
.hero h1 em {
  color: #1c674f;
  font-style: normal;
  font-weight: 610;
  text-decoration: underline;
  text-decoration-color: #b7a06b;
  text-decoration-thickness: 2px;
  text-underline-offset: .105em;
  text-decoration-skip-ink: auto;
}
.editorial-lede h1 {
  position: relative;
  font-weight: 660;
  letter-spacing: -.05em;
  color: #164e3b;
}
.editorial-lede h1::after {
  content: "";
  position: absolute;
  left: 1px;
  bottom: -13px;
  width: 42px;
  height: 2px;
  background: linear-gradient(90deg, #23634c 72%, #b49a62 72%);
}
.sample-intro h1 {
  font-weight: 680;
  letter-spacing: -.05em;
}
.sample-library-head .sample-library-title {
  font-size: clamp(1.55rem, 2.35vw, 2.05rem);
  font-weight: 660;
  letter-spacing: -.04em;
  line-height: 1.2;
}
.sample-library-title em {
  color: #1c674f;
  font-style: normal;
  font-weight: 510;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: #b7a06b;
  text-decoration-thickness: 1px;
  text-underline-offset: .15em;
}
.sample-library .eyebrow {
  margin-bottom: 9px;
  font-size: .625rem;
  letter-spacing: .11em;
  color: #4c6757;
}
:where(.page-index, .page-data-foundation-build, .page-how-we-work) .section-title > h2::before {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  margin-bottom: 13px;
  background: linear-gradient(90deg, #2b6b50 68%, #b49a62 68%);
}
:where(#services, #approach, .page-data-foundation-build) .triplet {
  counter-reset: olio-folio;
}
:where(#services, #approach, .page-data-foundation-build) .triplet > article {
  position: relative;
  counter-increment: olio-folio;
  border-top-color: #a1b6a6;
  transition: border-color .18s, background-color .18s;
}
:where(#services, #approach, .page-data-foundation-build) .triplet > article::before {
  content: "0" counter(olio-folio);
  display: block;
  margin-bottom: 13px;
  color: #876c38;
  font-size: .6875rem;
  font-weight: 550;
  line-height: 1;
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
}
:where(#services, #approach, .page-data-foundation-build) .triplet > article::after {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  width: 26px;
  height: 1px;
  background: #b49a62;
}
:where(#services, #approach, .page-data-foundation-build) .triplet > article:hover,
:where(#services, #approach, .page-data-foundation-build) .triplet > article:focus-within {
  border-top-color: #3e7759;
}
.hero .feature-still {
  border-color: #b3c5b9;
  box-shadow: 0 12px 28px #173d3212;
}
.editorial-lede .lede-plate img {
  border-color: #bdcfc2;
  box-shadow: 0 9px 24px #173d320c;
}
.hero .feature-still .feature-caption {border-top: 1px solid #91a78f}
.hero .feature-still .film-arrow {transition: transform .18s}
.hero .feature-still:hover .film-arrow,
.hero .feature-still:focus-visible .film-arrow {transform: translate(2px, 2px)}
.page-sample-dashboards .sample-card:hover .sample-card-heading h2,
.page-sample-dashboards .sample-card:focus-visible .sample-card-heading h2,
.page-sample-dashboards .sample-feature:hover strong,
.page-sample-dashboards .sample-feature:focus-visible strong {
  text-decoration: underline;
  text-decoration-color: #a58a50;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
:where(.page-index, .page-data-foundation-build, .page-how-we-work, .page-about, .page-getting-started, .page-sample-dashboards) .text-link {
  background-image: linear-gradient(#a58a50, #a58a50);
  background-size: 0 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size .2s, color .2s, border-color .2s;
}
:where(.page-index, .page-data-foundation-build, .page-how-we-work, .page-about, .page-getting-started, .page-sample-dashboards) .text-link:hover,
:where(.page-index, .page-data-foundation-build, .page-how-we-work, .page-about, .page-getting-started, .page-sample-dashboards) .text-link:focus-visible {
  background-size: 100% 1px;
  border-bottom-color: #a58a50;
}
@media (max-width: 730px) {
  .hero h1 {letter-spacing: -.045em}
  .hero h1 em {text-decoration-thickness: 1px; text-underline-offset: .12em}
  .editorial-lede h1 {letter-spacing: -.045em}
  .sample-library-head .sample-library-title {font-size: clamp(1.55rem, 6.3vw, 2rem)}
}
@media (prefers-reduced-motion: reduce) {
  :where(#services, #approach, .page-data-foundation-build) .triplet > article,
  .hero .feature-still .film-arrow,
  :where(.page-index, .page-data-foundation-build, .page-how-we-work, .page-about, .page-getting-started, .page-sample-dashboards) .text-link {
    transition: none;
  }
  .hero .feature-still:hover .film-arrow,
  .hero .feature-still:focus-visible .film-arrow {transform: none}
}

/* A white frame keeps the moving artwork inset from the page edges. */
.page-index .hero, .editorial-lede, .sample-intro {
  background: #fff;
}
.page-index #services, #approach, .contact.tint, .sample-next {
  background: linear-gradient(90deg, #fff 0%, #f9fbf8 12%, #f9fbf8 88%, #fff 100%);
}
.page-about .section.tint {background: #fff}
.motion-surface:not(.dashboard-heading) > .scroll-field {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}