.page-about.about-layout {
  background-color: var(--color-background,#fff);
  flex-flow: column;
  place-content: center flex-start;
  align-items: center;
  gap: 10px;
  width: 1200px;
  height: min-content;
  padding: 0;
  display: flex;
  position: relative;
  overflow: visible;
}
.page-about .about-container {
  height: min-content;
  overflow: var(--overflow-clip-fallback,clip);
  flex-flow: column;
  flex: none;
  place-content: center flex-start;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  display: flex;
  position: relative;
}
.page-about .about-header-slot,.page-about .about-footer-slot {
  flex: none;
  width: 100%;
  height: auto;
  position: relative;
}
.page-about .about-nelson-brooklyn-bridge-portrait-viewport {
  flex-flow: column;
  flex: none;
  place-content: center flex-start;
  align-items: center;
  gap: 80px;
  width: 100%;
  max-width: 1200px;
  height: min-content;
  padding: 240px 0 0;
  display: flex;
  position: relative;
  overflow: visible;
}
.page-about .about-nelson-brooklyn-bridge-portrait-media {
  flex-flow: column;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 80px;
  width: 100%;
  max-width: 800px;
  height: min-content;
  padding: 0;
  display: flex;
  position: relative;
  overflow: visible;
}
.page-about .about-heading,.page-about .about-hero-copy,.page-about .about-hero-copy-world-vision-canada,.page-about .about-hero-copy-with-formely-dvxd,.page-about .about-hero-copy-thoughtworks-canada-formerly-connected,.page-about .about-hero-copy-huge-inc,.page-about .about-hero-copy-teehan-lax,.page-about .about-design-approach-copy,.page-about .about-design-approach-copy-how-i-work,.page-about .about-design-approach-copy-the-best-work-usually-starts,.page-about .about-design-approach-copy-leadership-design-culture,.page-about .about-design-approach-copy-i-care-about-creating-the,.page-about .about-design-approach-copy-builder-mindset,.page-about .about-design-approach-copy-i-like-experimenting-with-new,.page-about .about-a-bit-more-about-me-copy-i-started-out-in-graphic {
  --link-text-color: #09f;
  --link-text-decoration: underline;
  white-space: pre-wrap;
  word-break: break-word;
  word-wrap: break-word;
  flex: none;
  width: 100%;
  height: auto;
  position: relative;
}
.page-about .about-nelson-brooklyn-bridge-portrait-media-bio,.page-about .about-layout-cv {
  height: min-content;
  overflow: var(--overflow-clip-fallback,clip);
  flex-flow: row;
  flex: none;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 0;
  display: flex;
  position: relative;
}
.page-about .about-heading-bio,.page-about .about-heading-cv,.page-about .about-design-approach-heading,.page-about .about-a-bit-more-about-me-heading {
  --link-text-color: #09f;
  --link-text-decoration: underline;
  white-space: pre-wrap;
  word-break: break-word;
  word-wrap: break-word;
  flex: .3 0 0;
  width: 1px;
  height: auto;
  position: relative;
}
.page-about .about-hero-section,.page-about .about-hero-section-lead-product-designer-2024-now {
  flex-flow: column;
  flex: 1 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 10px;
  width: 1px;
  height: min-content;
  padding: 0;
  display: flex;
  position: relative;
  overflow: visible;
}
.page-about .about-hero-nelson-brooklyn-bridge-portrait-image {
  aspect-ratio: 1.33333;
  flex: none;
  width: 100%;
  height: auto;
  position: relative;
}
.page-about .about-hero-layout,.page-about .about-hero-layout-design-director-2020-2024-with,.page-about .about-hero-layout-senior-design-lead-2017-2020,.page-about .about-hero-layout-senior-design-lead-2016-2017,.page-about .about-hero-layout-creative-lead-2008-2015-teehan {
  --border-bottom-width: 0px;
  --border-color: var(--color-keyline,#0000004d);
  --border-left-width: 0px;
  --border-right-width: 0px;
  --border-style: solid;
  --border-top-width: 1px;
  height: min-content;
  overflow: var(--overflow-clip-fallback,clip);
  flex-flow: column;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 8px 0 0;
  display: flex;
  position: relative;
}
.page-about .about-hero-layout-lead-product-designer-2024-now,.page-about .about-hero-layout-design-director-2020-2024,.page-about .about-hero-section-layout,.page-about .about-huge-employment-heading,.page-about .about-hero-layout-creative-lead-2008-2015 {
  height: min-content;
  overflow: var(--overflow-clip-fallback,clip);
  flex-flow: row;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  display: flex;
  position: relative;
}
.page-about .about-hero-copy-lead-product-designer,.page-about .about-hero-copy-2024-now,.page-about .about-hero-copy-design-director,.page-about .about-hero-copy-2020-2024,.page-about .about-hero-copy-senior-design-lead,.page-about .about-hero-copy-2017-2020,.page-about .about-hero-layout-copy,.page-about .about-hero-copy-2016-2017,.page-about .about-hero-copy-creative-lead,.page-about .about-hero-copy-2008-2015 {
  --link-text-color: #09f;
  --link-text-decoration: underline;
  white-space: pre-wrap;
  word-break: break-word;
  word-wrap: break-word;
  flex: 1 0 0;
  width: 1px;
  height: auto;
  position: relative;
}
.page-about .about-design-approach-section {
  height: min-content;
  overflow: var(--overflow-clip-fallback,clip);
  flex-flow: row;
  flex: none;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  padding: 0;
  display: flex;
  position: relative;
}
.page-about .about-design-approach-layout {
  height: min-content;
  overflow: var(--overflow-clip-fallback,clip);
  flex-flow: column;
  flex: 1 0 0;
  place-content: center;
  align-items: center;
  gap: 24px;
  width: 1px;
  padding: 0;
  display: flex;
  position: relative;
}
.page-about .about-design-approach-layout-much-of-my-work-involves,.page-about .about-design-approach-layout-how-i-work-the-best,.page-about .about-design-approach-layout-leadership-design-culture-i-care,.page-about .about-design-approach-layout-builder-mindset-i-like-experimenting {
  height: min-content;
  overflow: var(--overflow-clip-fallback,clip);
  flex-flow: column;
  flex: none;
  place-content: flex-start;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 0;
  display: flex;
  position: relative;
}
.page-about .about-a-bit-more-about-me-background {
  flex-flow: row;
  flex: none;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  height: min-content;
  padding: 0 0 160px;
  display: flex;
  position: relative;
  overflow: visible;
}
.page-about .about-a-bit-more-about-me-copy {
  height: min-content;
  overflow: var(--overflow-clip-fallback,clip);
  flex-flow: column;
  flex: 1 0 0;
  place-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  width: 1px;
  padding: 0;
  display: flex;
  position: relative;
}
.page-about .about-a-bit-more-about-me-description {
  height: min-content;
  overflow: var(--overflow-clip-fallback,clip);
  flex-flow: column;
  flex: none;
  place-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 0;
  display: flex;
  position: relative;
}
.page-about .about-container-layout {
  flex-flow: row;
  flex: none;
  place-content: center flex-start;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: min-content;
  padding: 0;
  display: flex;
  position: relative;
  overflow: visible;
}
.page-about .about-nelson-black-and-white-portrait-image,.page-about .about-nelson-and-friends-jaguar-mural-image,.page-about .about-nelson-coastal-hike-image,.page-about .about-nelson-cap-portrait-image {
  aspect-ratio: 1.33333;
  flex: none;
  width: 467px;
  height: auto;
  position: relative;
}
.page-about[data-border=true]:after,.page-about [data-border=true]:after {
  content: "";
  border-width: var(--border-top-width,0) var(--border-right-width,0) var(--border-bottom-width,0) var(--border-left-width,0);
  border-color: var(--border-color,none);
  border-style: var(--border-style,none);
  box-sizing: border-box;
  border-radius: inherit;
  corner-shape: inherit;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
@media (max-width:1199.98px) {
  .page-about.about-layout {
    overflow: var(--overflow-clip-fallback,clip);
    width: 390px;
  }
  .page-about .about-nelson-brooklyn-bridge-portrait-viewport {
    padding: 120px 0 0;
  }
  .page-about .about-nelson-brooklyn-bridge-portrait-media-bio,.page-about .about-layout-cv {
    flex-direction: column;
  }
  .page-about .about-heading-bio,.page-about .about-hero-section,.page-about .about-heading-cv,.page-about .about-hero-section-lead-product-designer-2024-now,.page-about .about-design-approach-heading,.page-about .about-design-approach-layout,.page-about .about-a-bit-more-about-me-heading,.page-about .about-a-bit-more-about-me-copy {
    flex: none;
    width: 100%;
  }
  .page-about .about-design-approach-section {
    flex-direction: column;
    gap: 24px;
  }
  .page-about .about-a-bit-more-about-me-background {
    flex-direction: column;
    gap: 24px;
    padding: 0 0 80px;
  }
  .page-about .about-nelson-black-and-white-portrait-image {
    overflow: visible;
  }
}