/* Mustard is the established brand accent; blue and white retain the space. */
:root {
  --mustard: #e1cc61;
  --mustard-hover: #d6bf4e;
  --mustard-pale: #f7f3df;
  --mustard-ink: #75651c;
  --ochre: var(--mustard);
  --deeper-green: #e6eedd;
}

/* A restrained accent in the opening, rather than another large colour field. */
.hero .text-link,
.email-address {
  border-bottom: 3px solid var(--mustard);
}
/* A warmer opening uses the original mustard alongside the portfolio image. */
.hero,
.hero-copy { background: var(--mustard); }
.hero .hero-audience { color: var(--ink); }
.hero .text-link { border-bottom-color: var(--ink); }
nav a[aria-current="page"] {
  color: var(--ink);
  box-shadow: 0 2px 0 var(--mustard);
}

/* Small details connect the service system and case studies to the brand. */
.service::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 3px;
  background: var(--mustard);
}
.service-number,
.offering-title .page-kicker,
.process-grid span {
  color: var(--mustard-ink);
}
.case-quote { border-color: var(--mustard); }
.mess-band { background: var(--deeper-green); }

/* Mustard carries the invitation, with accessible slate lettering. */
.contact-button {
  background: var(--mustard);
  color: var(--ink);
}
.contact-button:hover { background: var(--mustard-hover); }
.contact { background: var(--mustard); }
.contact p { color: var(--ink); }
.contact .text-link { border-color: var(--ink); }
.page-cta { background: var(--mustard-pale); }

/* The same shallow angled motif ties the inner pages back to the homepage. */
.page-intro,
.about-page-intro {
  position: relative;
  padding-bottom: calc(82px + 18px);
}
.page-intro::after,
.about-page-intro::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: calc(var(--section-angle) + 1px);
  background: var(--mustard);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
}
.about-page-intro { padding-bottom: 83px; }
.offering-budget { border-left-color: var(--mustard); }

@media (max-width: 850px) {
  .service::before { left: 0; }
}
@media (max-width: 700px) {
  .page-intro { padding-bottom: 68px; }
  .about-page-intro { padding-bottom: 61px; }
}
@media (max-width: 600px) {
  .service::before { left: 0; }
}

/* One CTA treatment across pages and case studies. */
.text-link,
.contact-button,
.email-address {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  border-bottom: 3px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  line-height: 1.4;
  text-align: left;
}
.text-link:hover,
.contact-button:hover,
.email-address:hover {
  background: transparent;
  color: var(--ink);
  border-bottom-color: var(--mustard-ink);
}
.hero .text-link:hover,
.contact .text-link:hover { border-bottom-color: var(--ink); opacity: .75; }
.mess h2 em { color: inherit; }

/* Give the italic role the same scale as the sans-serif line. */
.about h2 em,
.about-page-intro h1 em { font-size: 1em; }
.about-page-intro h1 { font-size: clamp(36px, 3.8vw, 56px); line-height: 1.12; }
.about-title-first { white-space: nowrap; }

/* Match the guide introduction to the service columns below. */
.offerings { padding-top: 85px; }
.budget-note {
  grid-template-columns: 1.05fr 1.4fr .9fr;
  gap: 5%;
  align-items: start;
  padding: 20px 0 65px;
}
.budget-note p { grid-column: 2 / 4; }
.untangling-cta .page-kicker { margin-bottom: 18px; }
.questions { max-width: 1440px; padding-left: 5%; padding-right: 5%; text-align: left; }

@media (max-width: 1000px) and (min-width: 701px) {
  .budget-note { grid-template-columns: 1fr 1.25fr; gap: 7%; }
  .budget-note p { grid-column: 2; }
}
@media (max-width: 700px) {
  .about-page-intro h1 { font-size: clamp(28px, 7vw, 48px); }
  .offerings { padding-top: 55px; }
  .budget-note { display: block; padding: 12px 0 45px; }
  .questions { padding-left: 7%; padding-right: 7%; }
  .untangling-cta .contact-button { margin-top: 25px; }
}

/* Filled buttons for the closing invitation on the three inner pages. */
.bottom-cta .contact-button {
  justify-content: center;
  min-height: 48px;
  padding: 16px 30px;
  border: 0;
  background: var(--mustard);
  color: var(--ink);
  line-height: 1.3;
  text-align: center;
}
.bottom-cta .contact-button:hover { background: var(--mustard-hover); }
@media (max-width: 600px) {
  .bottom-cta .contact-button { width: 100%; }
}

/* A more prominent header wordmark. */
header .wordmark { font-size: 29px; flex-shrink: 0; }
@media (max-width: 700px) {
  header .wordmark { font-size: 25px; }
}

/* Match the section heading weight used throughout the site. */
.capabilities h2 { font-weight: 500; }

/* End each keyline at the right edge of its two-digit number. */
.service { --number-inset: 36px; }
.service::before { content: none; }
.service-number::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--number-inset) + 2ch);
  height: 3px;
  background: var(--mustard);
}
@media (max-width: 850px) { .service { --number-inset: 28px; } }
@media (max-width: 600px) { .service { --number-inset: 24px; } }

/* About uses the same hero heading typography as the other inner pages. */
.page-intro h1,
.about-page-intro h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(52px, 6.4vw, 88px);
  line-height: 1.02;
  letter-spacing: -.06em;
  font-weight: 500;
}
.about-title-first { white-space: normal; }
.about-page-intro h1 em { font-size: 1em; line-height: inherit; }
@media (max-width: 700px) {
  .page-intro h1,
  .about-page-intro h1 { font-size: clamp(44px, 10vw, 62px); }
}