/* One amber scene between the plum hero and the plum project table. */
#solutions {
  padding-block: clamp(72px, 7vw, 112px);
  border-radius: inherit;
  color: var(--plum);
  background: var(--amber);
}
#solutions .section-heading { margin-bottom: clamp(42px, 4.5vw, 72px); }
#solutions .heading-grid { grid-template-columns: 1.3fr .7fr; align-items: center; gap: clamp(40px, 6vw, 100px); }
#solutions h2 { max-width: 850px; font-size: clamp(40px, 3.2vw, 58px); line-height: 1.25; text-wrap: balance; }
#solutions .section-intro { max-width: 380px; font-size: 17px; }
#solutions .solution-intro { max-width: 420px; padding-bottom: 0; font-size: 20px; line-height: 1.45; }
#solutions .solution-intro-thoughts { padding-left: 20px; border-left: 2px solid var(--plum); }
#solutions .solution-intro-thoughts p + p { margin-top: 14px; }
#solutions .solution-intro-thoughts strong { font-weight: 600; }
#solutions .solution-intro .solution-intro-invitation { margin-top: 24px; font-size: 18px; line-height: 1.45; }
#solutions .solution-list { display: grid; }
#solutions .solution-card { min-width: 0; border-top: 1px solid rgb(43 31 47 / 32%); }
#solutions .solution-card:last-child { border-bottom: 1px solid rgb(43 31 47 / 32%); }
#solutions .solution-row {
  --row-gap: clamp(20px, 2vw, 32px);
  --number-column: 70px;
  --category-column: 200px;
  padding: 28px;
  border-radius: 24px;
  transition: color .2s ease, background .2s ease;
}
#solutions .solution-cover {
  display: grid;
  grid-template-columns: var(--number-column) var(--category-column) minmax(0, 1fr) 48px;
  grid-template-areas: "number category question action";
  align-items: start;
  gap: var(--row-gap);
  padding: 0;
}
#solutions .solution-number { grid-area: number; font-family: Unbounded, Arial, sans-serif; font-size: 52px; font-weight: 700; line-height: 1.15; letter-spacing: -.06em; opacity: .5; }
#solutions .case-kicker { grid-area: category; margin: 5px 0 0; font-size: 13px; line-height: 1.5; letter-spacing: .015em; }
#solutions h3 { grid-area: question; max-width: none; font-size: clamp(24px, 2vw, 34px); font-weight: 600; line-height: 1.3; letter-spacing: -.025em; text-wrap: balance; }
#solutions .details-action { grid-area: action; justify-self: end; display: grid; place-items: center; width: 48px; height: 48px; min-height: 48px; margin: 0; border: 1px solid currentColor; border-radius: 50%; transition: background .2s ease, color .2s ease; }
#solutions .solution-action-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#solutions .details-plus { position: relative; display: block; width: 18px; height: 18px; font-size: 0; transform: none; }
#solutions .details-plus::before, #solutions .details-plus::after { content: ""; position: absolute; top: 8px; left: 0; width: 18px; height: 2px; background: currentColor; }
#solutions .details-plus::after { transform: rotate(90deg); transition: opacity .2s ease; }
#solutions .case-body { max-width: none; margin-left: calc(var(--number-column) + var(--category-column) + var(--row-gap) * 2); padding: 24px calc(48px + var(--row-gap)) 0 0; font-size: 17px; }
#solutions .case-body p { max-width: 66ch; }
#solutions .solution-row[open] { color: var(--ivory); background: var(--plum); }
#solutions .solution-row[open] .case-kicker { color: var(--champagne); }
#solutions .solution-row[open] .details-plus::after { opacity: 0; }
#solutions .solution-cover:hover .details-action { color: var(--plum); background: var(--ivory); border-color: var(--ivory); }
#solutions .solution-cover:focus-visible { outline-offset: 10px; border-radius: 4px; }

@media (max-width: 1100px) {
  #solutions .solution-row { --number-column: 48px; --category-column: 0px; }
  #solutions .solution-cover { grid-template-columns: 48px minmax(0, 1fr) 48px; grid-template-areas: "number category action" "number question action"; gap: 12px var(--row-gap); }
  #solutions .solution-number { font-size: 40px; }
  #solutions .case-kicker { margin-top: 0; }
  #solutions .case-body { margin-left: calc(var(--number-column) + var(--row-gap)); }
}

@media (max-width: 900px) {
  #solutions .heading-grid { grid-template-columns: 1fr; gap: 26px; }
  #solutions .section-intro { max-width: 620px; }
}

@media (max-width: 767px) {
  #solutions { padding-block: 68px; }
  #solutions h2 { font-size: clamp(27px, 6vw, 40px); }
  #solutions .section-intro { font-size: 16px; }
  #solutions .solution-intro { font-size: 18px; }
  #solutions .solution-intro-thoughts { padding-left: 16px; }
  #solutions .solution-intro .solution-intro-invitation { margin-top: 20px; font-size: 17px; }
  #solutions .solution-row { --row-gap: 12px; padding: 22px 18px; border-radius: 20px; }
  #solutions .solution-cover { grid-template-columns: 36px minmax(0, 1fr) 44px; grid-template-areas: "number category action" "question question question"; gap: 16px 12px; }
  #solutions .solution-number { font-size: 30px; }
  #solutions .case-kicker { font-size: 12px; }
  #solutions h3 { font-size: 22px; line-height: 1.35; }
  #solutions .details-action { width: 44px; height: 44px; min-height: 44px; }
  #solutions .case-body { margin-left: 0; padding: 22px 0 0; font-size: 16px; }
  #solutions .solution-cover:focus-visible { outline-offset: 7px; }
}

/* An ivory editorial pause: the author, her experience and her principle. */
#about { color: var(--plum); background: var(--ivory); }
#about .about-heading { max-width: none; margin-bottom: clamp(36px, 4vw, 64px); }
#about h2 { max-width: 1180px; font-size: clamp(36px, 3.05vw, 52px); line-height: 1.25; text-wrap: balance; }
#about .about-ink-accent {
  padding-inline: .035em;
  margin-inline: -.035em;
  color: inherit;
  background: linear-gradient(transparent 64%, var(--champagne) 64%, var(--champagne) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
#about .about-grid { grid-template-columns: minmax(220px, .85fr) minmax(0, 1.65fr); align-items: start; gap: clamp(36px, 5vw, 88px); }
#about .author-profile { min-width: 0; padding-top: 3px; }
#about .author-name { margin-top: 0; font-size: clamp(28px, 2.2vw, 34px); font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
#about .author-name span { display: inline; }
#about .author-portrait { position: relative; isolation: isolate; width: min(100%, 280px); aspect-ratio: 1122 / 1456; margin-top: 16px; }
#about .author-photo { width: 100%; height: auto; }
#about .portrait-ribbon { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#about .author-fields { max-width: 320px; margin-top: 12px; font-size: 16px; line-height: 1.55; }
#about .about-copy { min-width: 0; max-width: 820px; font-size: 19px; }
#about .about-copy > p:first-child { font-size: 22px; line-height: 1.5; }
#about .about-copy p + p { margin-top: 20px; }
#about .about-copy strong { font-weight: 600; }
#about .business-questions { display: grid; gap: 6px; margin-top: 12px; line-height: 1.5; }
#about .business-questions strong { display: block; }

/* Keep the entire principle on the full content width as requested. */
#about .about-principle { margin-top: clamp(24px, 2vw, 32px); font-size: 17px; }
#about .about-principle::before { content: ""; display: block; width: 64px; height: 3px; margin-bottom: 20px; background: var(--champagne); }
#about .about-principle p + p { margin-top: 14px; }
#about .principle-heading { font-size: 20px; line-height: 1.4; }
#about .principle-heading strong { font-weight: 600; }
#about .about-principle .principle-statement { margin-top: 22px; font-size: clamp(24px, 2vw, 32px); line-height: 1.4; letter-spacing: -.02em; }
#about .principle-statement strong { font-weight: 700; }

#contact .button, .contact-dialog .button { border-radius: 20px; }

@media (max-width: 900px) {
  #about .about-grid { grid-template-columns: 1fr; gap: 30px; }
  #about .author-portrait { width: min(100%, 240px); margin-top: 20px; }
  #about .author-fields { max-width: 500px; margin-top: 10px; }
}

@media (max-width: 767px) {
  #about .eyebrow { margin-bottom: 24px; }
  #about .about-heading { margin-bottom: 30px; }
  #about h2 { font-size: clamp(28px, 5.5vw, 34px); line-height: 1.25; }
  #about .author-name { font-size: 28px; }
  #about .author-fields { font-size: 15px; }
  #about .about-copy { font-size: 18px; }
  #about .about-copy > p:first-child { font-size: 19px; }
  #about .about-copy p + p { margin-top: 18px; }
  #about .about-principle { font-size: 16px; }
  #about .principle-heading { font-size: 18px; }
}

@media (max-width: 374px) {
  #about .author-portrait { width: min(100%, 210px); }
}