/* About page: real columns, never percentage padding inside a bounded shell. */
:is(.about-page, .services-page) .about-hero { background: var(--brand); color: var(--white); border-bottom: 1px solid var(--brand); }
:is(.about-page, .services-page) .about-hero-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); align-items: center; gap: clamp(36px,6vw,80px); padding-block: clamp(42px,5vw,68px); }
.about-hero-copy { min-width: 0; }
.about-hero-copy > p:first-child { margin-bottom: 20px; font-size: 15px; color: #d5d9e5; }
:is(.about-page, .services-page) .about-hero h1 { max-width: 17ch; margin: 0 0 24px; color: var(--white); font-size: clamp(2.7rem,4.4vw,4.25rem); line-height: 1.07; letter-spacing: -.025em; }
.about-hero-copy > p:last-of-type { max-width: 51ch; margin-bottom: 26px; color: #d5d9e5; font-size: 17px; line-height: 1.75; }
.about-hero .text-link { color: var(--white); }
.about-hero .text-link:hover { color: var(--green); }
.about-hero .text-link:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; }
.about-hero figure { margin: 0; min-width: 0; }
.about-hero img { width: 100%; height: 360px; object-fit: cover; object-position: center; }
:is(.about-page, .services-page) .about-content { padding-block: clamp(56px,7vw,88px); }
:is(.about-page, .services-page) .about-content .content-grid { grid-template-columns: 210px minmax(0,1fr); gap: clamp(36px,6vw,88px); }
:is(.about-page, .services-page) .about-content .prose { max-width: 800px; }
:is(.about-page, .services-page) .about-content .prose section { padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid var(--line); scroll-margin-top: 125px; }
:is(.about-page, .services-page) .about-content .prose section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
:is(.about-page, .services-page) .about-content .prose section + section { margin-top: 0; padding-top: 0; border-top: 0; }
:is(.about-page, .services-page) .about-content .prose h2 { margin: 0 0 20px; max-width: 28ch; font-size: clamp(1.8rem,2.8vw,2.5rem); line-height: 1.15; }
:is(.about-page, .services-page) .about-content .prose p, :is(.about-page, .services-page) .plain-list { font-size: 16px; line-height: 1.8; }
:is(.about-page, .services-page) .plain-list li { padding-block: 18px; }
:is(.about-page, .services-page) .about-closing { background: var(--brand); color: var(--white); }
.about-closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 36px; padding-block: 48px; }
.about-closing h2 { max-width: 24ch; margin: 0 0 12px; font-size: clamp(1.9rem,3vw,2.75rem); line-height: 1.15; }
.about-closing p { margin: 0; max-width: 56ch; color: #d5d9e5; }
.about-closing .button { flex-shrink: 0; }
@media (max-width:900px) {
  :is(.about-page, .services-page) .about-hero-grid { grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: 28px; }
  .about-hero img { height: 320px; }
  :is(.about-page, .services-page) .about-content .content-grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
  :is(.about-page, .services-page) .side-index { position: static; display: flex; flex-wrap: wrap; gap: 8px 24px; }
  :is(.about-page, .services-page) .side-index a { flex: 0 1 auto; }
}
@media (max-width:600px) {
  :is(.about-page, .services-page) .about-hero-grid { grid-template-columns: minmax(0,1fr); gap: 32px; padding-block: 36px; }
  :is(.about-page, .services-page) .about-hero h1 { font-size: clamp(2.25rem,9.5vw,3.2rem); max-width: 17ch; }
  .about-hero-copy > p:last-of-type { font-size: 16px; }
  .about-hero img { height: 240px; }
  .about-closing-inner { flex-direction: column; align-items: flex-start; padding-block: 36px; }
}
.about-page .about-hero h1 { max-width: 20ch; font-size: clamp(2.25rem,4vw,3.75rem); text-wrap: balance; }
@media (max-width:900px) {
  .about-page .about-hero-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width:360px) {
  .about-page .about-hero h1 { font-size: 2rem; }
}