.about-hero {
  position: relative;
  overflow: hidden;
  padding: 78px 0 86px;
  color: var(--paper);
  background:
    radial-gradient(circle at 13% 100%, rgba(255, 107, 44, .13), transparent 31%),
    linear-gradient(120deg, var(--navy-950), var(--navy-900));
}

.about-hero::before {
  position: absolute;
  width: 520px;
  height: 520px;
  top: -345px;
  right: 7%;
  content: "";
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  box-shadow: 0 0 0 82px rgba(255,255,255,.02), 0 0 0 164px rgba(255,255,255,.012);
}

.about-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, .78fr); align-items: center; gap: 82px; }
.about-hero-copy h1 { max-width: 760px; color: var(--paper); font-size: clamp(46px, 5vw, 67px); }
.about-hero-copy .hero-lead { max-width: 720px; color: var(--copy-dark); }
.about-hero-points { display: flex; flex-wrap: wrap; gap: 12px 23px; margin: 29px 0 0; padding: 0; list-style: none; }
.about-hero-points li { color: var(--copy-dark); font-size: 14px; font-weight: 600; }
.about-hero-points span { margin-right: 5px; color: var(--orange-300); }
.about-hero-portrait { position: relative; min-height: 570px; margin: 0; }
.about-hero-portrait::before { position: absolute; inset: 26px -24px -24px 32px; content: ""; border: 1px solid var(--line-dark); border-radius: var(--radius-card); }
.about-hero-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 23%; border: 1px solid var(--line-dark); border-radius: var(--radius-card); box-shadow: 0 28px 75px rgba(0,0,0,.34); }
.about-hero-portrait figcaption { position: absolute; right: -1px; bottom: 25px; max-width: 305px; display: grid; gap: 2px; padding: 15px 20px; color: var(--ink); background: var(--paper); border-radius: 12px 0 0 12px; box-shadow: var(--shadow-soft); }
.about-hero-portrait figcaption span { color: var(--orange-600); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.about-hero-portrait figcaption strong { font-size: 14px; }

.about-facts { position: relative; z-index: 3; background: var(--paper); border-bottom: 1px solid var(--line); }
.about-fact-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.about-fact-grid > div { min-height: 128px; display: grid; align-content: center; gap: 4px; padding: 24px 30px; border-right: 1px solid var(--line); }
.about-fact-grid > div:first-child { border-left: 1px solid var(--line); }
.about-fact-grid strong { color: var(--navy-900); font-size: 28px; letter-spacing: -.04em; }
.about-fact-grid span { color: var(--copy); font-size: 13px; font-weight: 600; }

.about-founder { background: var(--blue-50); }
.about-founder-grid { display: grid; grid-template-columns: .72fr 1.28fr; align-items: start; gap: 88px; }
.about-founder-card { position: sticky; top: 110px; padding: 34px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }
.about-role { color: var(--orange-600); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.about-founder-card h2 { margin: 13px 0 7px; font-size: 38px; }
.about-founder-card > p { color: var(--copy); font-size: 14px; }
.about-founder-card dl { margin: 30px 0 0; }
.about-founder-card dl div { display: grid; gap: 3px; padding: 17px 0; border-top: 1px solid var(--line); }
.about-founder-card dt { color: var(--copy); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.about-founder-card dd { margin: 0; color: var(--navy-900); font-size: 14px; font-weight: 700; }
.about-founder-story h2 { max-width: 700px; }
.about-founder-story > p:not(.eyebrow) { max-width: 760px; color: var(--copy); line-height: 1.75; }
.about-founder-story blockquote { position: relative; margin: 36px 0 0; padding: 29px 32px 29px 58px; color: var(--navy-900); background: var(--orange-100); border-left: 4px solid var(--orange-500); border-radius: 0 var(--radius-content) var(--radius-content) 0; font-size: 18px; font-weight: 600; line-height: 1.65; }
.about-founder-story blockquote::before { position: absolute; top: 19px; left: 22px; content: "“"; color: var(--orange-500); font-size: 46px; line-height: 1; }

.about-expertise { color: var(--paper); background: var(--navy-900); }
.about-heading-row { display: grid; grid-template-columns: 1fr .72fr; align-items: end; gap: 70px; margin-bottom: 46px; }
.about-heading-row h2 { max-width: 760px; margin-bottom: 0; color: var(--paper); }
.about-heading-row > p { margin-bottom: 0; color: var(--copy-dark); }
.about-expertise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: var(--radius-card); }
.about-expertise-grid article { min-height: 295px; padding: 30px; background: var(--navy-950); }
.about-expertise-grid article > span { display: block; color: var(--orange-300); font-size: 12px; font-weight: 700; }
.about-expertise-grid h3 { margin: 67px 0 15px; color: var(--paper); font-size: 19px; }
.about-expertise-grid p { margin: 0; color: var(--copy-dark); font-size: 14px; line-height: 1.7; }

.about-wayne { background: var(--paper); }
.about-wayne-grid { display: grid; grid-template-columns: minmax(330px, .78fr) 1.22fr; align-items: center; gap: 92px; }
.about-wayne figure { position: relative; margin: 0; }
.about-wayne figure::before { position: absolute; inset: 24px 24px -24px -24px; content: ""; background: var(--orange-100); border-radius: var(--radius-card); }
.about-wayne figure img { position: relative; width: 100%; height: 620px; object-fit: cover; object-position: center 18%; border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }
.about-wayne figcaption { position: relative; margin-top: 15px; color: var(--copy); font-size: 12px; font-weight: 600; }
.about-wayne-grid > div > p:not(.eyebrow) { color: var(--copy); }
.about-wayne ul { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 30px 0 0; padding: 1px; background: var(--line); list-style: none; border-radius: var(--radius-content); overflow: hidden; }
.about-wayne li { min-height: 102px; display: flex; align-items: center; padding: 21px 24px; color: var(--navy-900); background: var(--blue-50); font-size: 14px; font-weight: 700; }

.about-story { background: var(--blue-100); }
.about-story-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 88px; }
.about-story-heading { position: sticky; top: 110px; align-self: start; }
.about-story-heading p:not(.eyebrow) { color: var(--copy); }
.about-timeline { margin: 0; padding: 0; list-style: none; }
.about-timeline li { display: grid; grid-template-columns: 120px 1fr; gap: 28px; padding: 0 0 34px; }
.about-timeline li:not(:last-child) { border-bottom: 1px solid var(--line); margin-bottom: 34px; }
.about-timeline li > span { color: var(--orange-600); font-size: 13px; font-weight: 700; }
.about-timeline h3 { margin-bottom: 8px; font-size: 20px; }
.about-timeline p { margin: 0; color: var(--copy); font-size: 14px; }

.about-independent { color: var(--paper); background: var(--navy-800); }
.about-independent-grid { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 88px; }
.about-independent h2 { color: var(--paper); }
.about-independent-grid > div > p:not(.eyebrow) { color: var(--copy-dark); }
.about-independent aside { padding: 34px; background: var(--navy-950); border: 1px solid var(--line-dark); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.about-independent aside > span { color: var(--orange-300); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.about-independent aside h3 { margin-top: 14px; color: var(--paper); }
.about-independent aside p { color: var(--copy-dark); font-size: 14px; }
.about-independent aside a { color: var(--paper); font-size: 14px; font-weight: 700; text-decoration: none; }
.about-independent aside a span { color: var(--orange-300); }

.about-work { color: var(--paper); background: var(--navy-950); }
.about-heading-light h2 { color: var(--paper); }
.about-work-grid { display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: 280px 280px; gap: 18px; }
.about-work-grid figure { position: relative; overflow: hidden; margin: 0; border: 1px solid var(--line-dark); border-radius: var(--radius-card); }
.about-work-grid .about-work-main { grid-row: 1 / 3; }
.about-work-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 350ms ease; }
.about-work-grid figure:hover img { transform: scale(1.02); }
.about-work-grid figcaption { position: absolute; inset: auto 0 0; display: grid; gap: 3px; padding: 42px 24px 20px; background: linear-gradient(transparent, rgba(3,28,53,.92)); }
.about-work-grid figcaption strong { color: var(--paper); font-size: 15px; }
.about-work-grid figcaption span { color: var(--copy-dark); font-size: 12px; }
.about-client-row { min-height: 114px; display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; gap: 34px; margin-top: 18px; padding: 25px 34px; background: var(--paper); border-radius: var(--radius-card); }
.about-client-row img { width: 100%; max-width: 130px; max-height: 52px; justify-self: center; object-fit: contain; filter: grayscale(1) brightness(.45) sepia(.18) hue-rotate(165deg) saturate(1.6); opacity: .82; }

.about-promises { background: var(--paper); }
.about-promises-heading { max-width: 760px; margin-bottom: 42px; }
.about-promises-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.about-promises-grid article { min-height: 250px; padding: 29px; background: var(--blue-50); border: 1px solid var(--line); border-radius: var(--radius-card); }
.about-promises-grid article > span { color: var(--orange-600); font-size: 12px; font-weight: 700; }
.about-promises-grid h3 { margin: 52px 0 13px; font-size: 20px; }
.about-promises-grid p { margin: 0; color: var(--copy); font-size: 14px; }

@media (max-width: 1000px) {
  .about-hero-grid { grid-template-columns: 1fr .75fr; gap: 46px; }
  .about-hero-portrait { min-height: 500px; }
  .about-founder-grid, .about-story-grid { grid-template-columns: .8fr 1.2fr; gap: 50px; }
  .about-expertise-grid { grid-template-columns: 1fr 1fr; }
  .about-wayne-grid { gap: 50px; }
  .about-independent-grid { gap: 50px; }
  .about-client-row { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .about-hero { padding: 64px 0 72px; }
  .about-hero-grid, .about-founder-grid, .about-heading-row, .about-wayne-grid, .about-story-grid, .about-independent-grid { grid-template-columns: 1fr; gap: 35px; }
  .about-hero-copy h1 { font-size: 34px; }
  .about-hero-portrait { min-height: 430px; margin-top: 12px; }
  .about-hero-portrait::before { inset: 16px -10px -14px 16px; }
  .about-hero-portrait figcaption { max-width: 270px; bottom: 16px; }
  .about-hero-points { display: grid; gap: 8px; }
  .about-fact-grid { grid-template-columns: 1fr 1fr; }
  .about-fact-grid > div { min-height: 106px; padding: 18px; border-bottom: 1px solid var(--line); }
  .about-fact-grid strong { font-size: 23px; }
  .about-founder-card, .about-story-heading { position: static; }
  .about-founder-card { padding: 27px; }
  .about-founder-story blockquote { padding: 25px 25px 25px 48px; font-size: 16px; }
  .about-expertise-grid { grid-template-columns: 1fr; }
  .about-expertise-grid article { min-height: 215px; padding: 25px; }
  .about-expertise-grid h3 { margin-top: 34px; }
  .about-wayne figure { margin: 0 12px 20px 20px; }
  .about-wayne figure img { height: 490px; }
  .about-wayne ul { grid-template-columns: 1fr; }
  .about-wayne li { min-height: 78px; }
  .about-timeline li { grid-template-columns: 86px 1fr; gap: 20px; }
  .about-work-grid { grid-template-columns: 1fr; grid-template-rows: repeat(3, 300px); }
  .about-work-grid .about-work-main { grid-row: auto; }
  .about-client-row { grid-template-columns: 1fr 1fr; gap: 26px; padding: 27px; }
  .about-promises-grid { grid-template-columns: 1fr; }
  .about-promises-grid article { min-height: 205px; }
  .about-promises-grid h3 { margin-top: 31px; }
}

@media (max-width: 420px) {
  .about-hero-portrait { min-height: 390px; }
  .about-fact-grid { grid-template-columns: 1fr; }
  .about-fact-grid > div { border-right: 1px solid var(--line); border-left: 1px solid var(--line); }
  .about-wayne figure img { height: 430px; }
  .about-timeline li { grid-template-columns: 1fr; gap: 8px; }
}