/* Extra pieces the agency pages need on top of style.css.

   style.css is copied untouched from templates/strategy-site, so everything
   here reuses its tokens and its type values rather than adding new ones.
   Headings use the same Inter optical size 32 cut and tracking. Body text is
   Switzer 500 at -0.02em. Borders are --line and cards are white with the
   same 16px radius. */

/* ---------- page parts ---------- */

.part {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
}
.part .section { margin-bottom: 30px; }
.part .rows { margin-bottom: 20px; }
.part-tag { display: inline-block; margin-bottom: 14px; }

.label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin: 0 0 14px;
}

/* ---------- agency list, used on the index and at the foot of each page ---------- */

.list-wrap { width: 100%; }
.agency-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  border-top: 1px solid var(--line);
}
.agency-list li { border-bottom: 1px solid var(--line); }
.agency-list a,
.agency-list .soon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 2px;
  font-family: "Inter", sans-serif;
  font-variation-settings: "opsz" 32;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.25;
  color: var(--ink);
  text-decoration: none;
}
.agency-list .soon { color: var(--faint); }
.agency-list .arrow {
  flex: none;
  font-family: "Switzer", "Inter", sans-serif;
  color: var(--faint);
  transition: transform .25s cubic-bezier(.22, .61, .36, 1), color .25s;
}
.agency-list a:hover { color: var(--green-dark); }
.agency-list a:hover .arrow { color: var(--green-dark); transform: translateX(4px); }

.spaced-cta { margin-top: 70px; }

/* ---------- article head ---------- */

.article-head { max-width: 760px; }
.article-head p { max-width: 640px; margin-left: auto; margin-right: auto; }
.crumb {
  display: inline-block;
  margin-bottom: 22px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--muted);
  text-decoration: none;
}
.crumb:hover { color: var(--green-dark); }

/* ---------- contents card ---------- */

.contents { margin-bottom: 20px; }
.contents ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 28px;
}
.contents a {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--body);
  text-decoration: none;
}
.contents a:hover { color: var(--green-dark); }
.toc-num { color: var(--faint); font-variant-numeric: tabular-nums; }

/* ---------- body text ---------- */

.prose { width: 100%; margin-bottom: 26px; }
.prose p,
.prose li {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.6;
  color: var(--body);
}
.prose p { margin: 0 0 16px; }
.prose p:last-child { margin-bottom: 0; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 20px; }
.prose li { margin-bottom: 10px; }
.prose strong, .row-body strong { color: var(--ink); font-weight: 600; }
.prose a, .row-body a { color: var(--green-dark); }

.row-body p + ul, .row-body p + ol { margin-top: 12px; }
.row-body ul + p { margin-top: 12px; }

/* ---------- placeholders like {{first_name}} ---------- */

.ph {
  background: rgba(195, 236, 58, .45);
  color: var(--ink);
  border-radius: 5px;
  padding: 0 3px;
  white-space: nowrap;
}

/* ---------- email cards ---------- */

.email {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  margin: 14px 0 6px;
  overflow: hidden;
  box-shadow: 0 30px 60px -44px rgba(40, 60, 10, .45);
}
.email-subject {
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.email-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-right: 12px;
}
.email-body { padding: 18px 22px 20px; }
.email-body p {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.55;
  color: var(--body);
  margin: 0 0 12px;
}
.email-body p:last-child { margin-bottom: 0; }

/* ---------- closing blocks ---------- */

.closing { margin-top: 70px; }
.closing .section { margin-bottom: 26px; }
.more { margin-top: 90px; }
.see-all {
  margin-top: 22px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--muted);
  text-decoration: none;
}
.see-all:hover { color: var(--green-dark); }

@media (max-width: 640px) {
  .agency-list, .contents ol { grid-template-columns: 1fr; }
  .agency-list a, .agency-list .soon { font-size: 17px; }
  .prose p, .prose li { font-size: 16px; }
  .email-subject, .email-body { padding-left: 18px; padding-right: 18px; }
  .ph { white-space: normal; }
}