.about-header { width: 100%; margin-top: 8em; padding: 2em; display: flex; justify-content: space-between; }
.about-header h1 { position: relative; left: -0.75vw; font-size: 24vw; line-height: 0.75; }
.about-hero { position: relative; display: flex; justify-content: center; padding: 2em; height: 100svh; margin: 2em; border-radius: 1em; overflow: hidden; border: 1px dashed var(--fg); }
.about-hero-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.about-me-copy { position: relative; width: 100%; padding: 4em 2em; }
.about-me-copy-wrapper { width: 60%; margin: 0 auto; text-align: center; }
.about-me-copy-wrapper h3 { margin: 1em; font-size: 3vw; letter-spacing: -0.02em; line-height: 3vw; }
.services { margin: 2em; padding: 2em; display: flex; gap: 2em; border: 1px dashed var(--fg); border-radius: 1em; }
.services-col:nth-child(1) { position: relative; flex: 2; border: 1px dashed var(--fg); border-radius: 1em; display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; }
.services-banner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; }
.services-col:nth-child(1) p { position: relative; color: var(--bg); z-index: 1; }
.services-col:nth-child(2) { flex: 4; }
.services-col h4 { margin-bottom: 2em; }
.services-list { display: flex; flex-direction: column; gap: 1em; }
.service-list-row { width: 100%; display: flex; gap: 2em; padding: 2em 0; border-top: 1px dashed var(--fg); }
.service-list-col:nth-child(1) { flex: 2; }
.service-list-col:nth-child(2) { flex: 4; }
.about-banner-img { margin: 2em; height: 50svh; border-radius: 1em; overflow: hidden; border: 1px dashed var(--fg); }
.about-banner-img-wrapper { width: 100%; height: 100%; }
.fav-tools { margin: 2em; padding: 6em 2em 2em 2em; border: 1px dashed var(--fg); border-radius: 1em; }
.fav-tools-header { margin-bottom: 4em; display: flex; flex-direction: column; align-items: center; gap: 1.5em; }
.fav-tools-header p.primary { margin-bottom: 1.5em; }
.fav-tools-header p.secondary { width: 60%; text-align: center; }
.fav-tools-list { display: flex; flex-direction: column; gap: 2em; }
.fav-tools-list-row { display: flex; gap: 2em; }
.fav-tool { position: relative; flex: 1; padding: 1em; aspect-ratio: 5/2.5; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5em; border: 1px dashed var(--fg); border-radius: 1em; overflow: hidden; background: var(--fg); }
.fav-tool-img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; z-index: 0; opacity: 0.4; }
.fav-tool h4, .fav-tool p { color: var(--bg); position: relative; z-index: 1; }

@media (max-width: 1000px) {
  .about-header { padding: 1.25em; }
  .about-hero, .about-banner-img, .fav-tools { margin: 1.25em; }
  .about-me-copy { padding: 4em 1.25em; }
  .about-me-copy-wrapper { width: 100%; }
  .about-me-copy-wrapper h3 { font-size: 6vw; line-height: 6vw; }
  .fav-tools { padding: 4em 1.25em 1.25em 1.25em; }
  .fav-tools-header p.secondary { width: 100%; }
  .fav-tools-list-row { flex-direction: column; gap: 1.25em; }
  .fav-tools-list { gap: 1.25em; }
  .services { flex-direction: column; margin: 1.25em; padding: 1.25em; }
  .services-col:nth-child(1) { aspect-ratio: 5/3; }
  .service-list-row { flex-direction: column; gap: 1em; }
}