/* Saved About composition. Shared type, palette, grids and buttons are inherited. */
.about-page p { margin: 0 0 .44rem; }
.about-page h1, .about-page h3 { font-family: var(--font-heading); font-weight: 600; line-height: 1.3; }
.about-page h3 { margin: 0 0 .5em; font-size: 26px; }
.about-page .section-title { font-size: 28px; }
.about-page a:not(.button) { color: var(--color-primary); text-underline-offset: 3px; }
.about-page a:not(.button):hover { color: var(--color-dark-blue); }
.about-hero, .about-process, .about-care { background: var(--color-dark-blue); color: var(--color-white); }
.about-hero a:not(.button), .about-process a:not(.button), .about-care a:not(.button), .about-closing a:not(.button) { color: var(--color-white); }
.about-hero a:not(.button):hover, .about-process a:not(.button):hover, .about-care a:not(.button):hover, .about-closing a:not(.button):hover { color: var(--color-white); }
.about-hero { padding-block: 16px; text-align: center; }
.about-hero h1 { margin: 0 0 8px; color: var(--color-amber); font-size: 32px; line-height: 1.2; text-transform: capitalize; }
.about-hero h2 { margin: 0 0 8px; font: 400 30px/1.25 var(--font-body); }
.about-hero p { font-size: 18px; margin-bottom: .67rem; }
.about-hero p:last-child { margin-bottom: 0; }
.about-intro { padding-block: 24px; }
.about-intro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.about-advice { min-width: 0; padding-inline: 16px; }
.about-advice p { font-size: 18px; }
.about-advice p:last-child { font-size: inherit; margin-bottom: 0; }
.about-expectations { min-width: 0; padding: 8px 24px; border: 2px solid var(--color-primary); border-radius: 8px; background: var(--color-white); }
.about-expectations .section-title { margin-bottom: .5em; }
.about-expectations ul { list-style: none; margin: 0; padding: 0; }
.about-promise { display: flex; align-items: center; gap: 10px; color: var(--color-dark-blue); font-size: 22px; font-weight: 500; }
.about-promise svg { width: 1em; height: 1em; flex: 0 0 1em; }
.about-story { padding-block: 16px; background: var(--color-pale-blue); }
.about-story .container { max-width: 850px; }
.about-story p { font-size: 18px; }
.about-story p:last-of-type { margin-bottom: 0; }
.about-story h3 { margin-block: 8px; color: var(--color-dark-blue); text-align: center; }
.about-story ul { margin: 0; padding-left: 2em; }
.about-story li { margin-bottom: .44rem; }
.about-story li:last-child { margin-bottom: 0; }
.about-process-intro { padding-block: 24px; text-align: center; }
.about-process-intro h2 { display: inline-block; margin: 0; color: var(--color-amber); font: 600 28px/1.25 var(--font-heading); text-transform: uppercase; text-align: left; }
.about-process-intro p { margin: 0; font-size: 28px; }
.about-process-grid { padding-top: 8px; padding-bottom: 24px; }
.about-process-step { min-width: 0; padding-left: 16px; border-left: 3px solid var(--color-amber); }
.about-process-step h3 { text-align: center; }
.about-process-step p { margin-bottom: 1.5rem; font-size: 18px; }
.about-process-step p:last-child { margin-bottom: 0; }
.about-process-step:nth-child(2) > p:first-of-type { margin-bottom: 0; }
.about-process-step .about-portfolio-link { text-align: center; }
.about-care { padding-block: 24px 16px; text-align: center; }
.about-care .container { max-width: none; }
.about-care p { margin-bottom: 0; }
.about-closing { padding-block: 24px 16px; background: var(--color-primary); color: var(--color-white); }
.about-closing .section-title { margin-bottom: .5em; color: var(--color-white); }
.about-closing > .container > p:first-of-type { margin-bottom: 1.5rem; font-size: 18px; }
.about-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-bottom: 8px; }
.about-actions .button--amber:hover { color: var(--color-dark-blue); background: var(--color-pale-blue); }
.about-actions .button--outline-light { background: var(--color-primary); }
.about-actions .button--outline-light:hover { color: var(--color-white); border-color: var(--color-amber); }
.about-page .about-reassurance { max-width: 847px; margin: 0 auto; text-align: center; font-size: 16px; }
@media (max-width: 1024px) {
  .about-page h3 { font-size: 24px; }
}
@media (max-width: 767px) {
  .about-page h3 { font-size: 22px; }
  .about-intro-grid { grid-template-columns: minmax(0, 1fr); }
}