.about-main,
.about-page {
    inline-size: 100%;
    max-inline-size: none;
    margin: 0;
    padding: 0;
}

.about-page h1,
.about-page h2,
.about-page h3,
.about-page .about-link,
.about-page .about-stat p {
    text-transform: uppercase;
}

.about-page h1,
.about-page h2,
.about-page h3 { margin-block-start: 0; }
.about-page p:last-child { margin-block-end: 0; }

.about-section__inner,
.about-hero__inner {
    inline-size: calc(100% - (2 * var(--gutter-page)));
    max-inline-size: var(--container-main);
    min-inline-size: 0;
    margin-inline: auto;
}

.about-link {
    display: inline-flex;
    min-block-size: 48px;
    padding: var(--space-sm) var(--space-lg);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    background: var(--color-bg-dark);
    color: var(--color-text-inverse);
    border: 1px solid var(--color-bg-dark);
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 800;
    text-decoration: none;
    transition: background 200ms var(--ease-standard), color 200ms var(--ease-standard), border-color 200ms var(--ease-standard);
}

.about-link span { color: var(--color-accent); transition: transform 200ms var(--ease-standard); }
.about-link:hover, .about-link:focus-visible { background: var(--color-bg-brand); color: var(--color-text-inverse); border-color: var(--color-bg-brand); }
.about-link:hover span, .about-link:focus-visible span { transform: translate(4px, -4px); }
.about-link--outline { background: transparent; color: var(--color-text-primary); }
.about-link--outline:hover, .about-link--outline:focus-visible { background: var(--color-bg-dark); color: var(--color-text-inverse); border-color: var(--color-bg-dark); }
.about-link--light { background: var(--color-bg-primary); color: var(--color-text-primary); border-color: var(--color-bg-primary); }
.about-link--light:hover, .about-link--light:focus-visible { background: var(--color-bg-surface); color: var(--color-text-primary); border-color: var(--color-bg-surface); }

.about-hero { background: var(--color-bg-primary); }
.about-hero__inner { display: grid; }
.about-hero__copy { display: flex; padding-block: clamp(3rem, 8vw, 5rem); flex-direction: column; align-items: flex-start; justify-content: center; }
.about-hero h1 { max-inline-size: 12ch; margin-block-end: var(--space-lg); font-size: clamp(2.4rem, 7.5vw, 4.25rem); line-height: .96; letter-spacing: -.035em; }
.about-hero__copy p { max-inline-size: 44ch; margin-block-end: var(--space-lg); font-size: clamp(1rem, .94rem + .22vw, 1.14rem); }
.about-hero__media { min-inline-size: 0; margin: 0; overflow: hidden; background: var(--color-bg-surface); border-block-start: 1px solid; aspect-ratio: 4 / 5; }
.about-hero__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 24%; }

.about-story { padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--color-bg-surface); }
.about-story__header { display: grid; margin-block-end: clamp(2rem, 5vw, 4rem); gap: var(--space-lg); }
.about-story h2,
.about-method h2,
.about-independent h2,
.about-closing h2 { font-size: clamp(2.15rem, 4.6vw, 3.8rem); line-height: .96; letter-spacing: -.035em; }
.about-story__header p { max-inline-size: 54ch; align-self: end; }
.about-story__image { block-size: clamp(17.5rem, 28vw, 23.75rem); margin: 0; overflow: hidden; border: 1px solid; }
.about-story__image img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; }
.about-story__stats { display: grid; background: var(--color-bg-dark); color: var(--color-text-inverse); border-inline: 1px solid #ffffff66; }
.about-stat { display: flex; min-inline-size: 0; min-block-size: 10.5rem; padding: var(--space-lg); flex-direction: column; justify-content: space-between; border-block-end: 1px solid #ffffff66; }
.about-stat__number { margin: 0; font-family: var(--font-display); font-size: clamp(2.8rem, 5vw, 4.5rem); font-weight: 800; line-height: .9; letter-spacing: -.045em; }
.about-stat > p:last-child { max-inline-size: 18ch; font-family: var(--font-display); font-size: .78rem; font-weight: 700; line-height: 1.15; }

.about-method { padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--color-bg-primary); }
.about-method h2 { margin-block-end: clamp(2rem, 5vw, 4rem); }
.about-method__list { border-block-start: 1px solid; }
.about-method__list article { display: grid; min-inline-size: 0; padding-block: var(--space-lg); grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-sm) var(--space-md); align-items: start; border-block-end: 1px solid; transition: background 200ms var(--ease-standard), padding 200ms var(--ease-standard); }
.about-method__list article:hover, .about-method__list article:focus-within { padding-inline: var(--space-sm); background: var(--color-bg-surface); }
.about-method__list span { padding-block-start: .2rem; color: var(--color-text-brand); font-family: var(--font-display); font-size: .75rem; font-weight: 800; }
.about-method__list h3 { margin: 0; font-size: clamp(1.1rem, 1rem + .35vw, 1.4rem); transition: transform 200ms var(--ease-standard); }
.about-method__list article:hover h3, .about-method__list article:focus-within h3 { transform: translateX(4px); }
.about-method__list p { grid-column: 2; max-inline-size: 48ch; font-size: .94rem; }

.about-independent { background: var(--color-bg-brand); color: var(--color-text-inverse); }
.about-independent__inner { display: grid; min-block-size: 27rem; padding-block: clamp(3.5rem, 7vw, 6rem); align-items: center; gap: var(--space-xl); }
.about-independent__inner > p { max-inline-size: 48ch; font-size: clamp(1rem, .94rem + .25vw, 1.16rem); }
.about-independent__inner > img { display: block; inline-size: clamp(11.25rem, 20vw, 18.75rem); block-size: auto; justify-self: center; filter: brightness(0) invert(1); }

.about-closing { padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--color-bg-surface); }
.about-closing__inner { display: grid; border-block-start: 1px solid; border-inline-start: 1px solid; }
.about-closing__panel { display: flex; min-inline-size: 0; min-block-size: 20rem; padding: clamp(2rem, 5vw, 4rem); flex-direction: column; justify-content: space-between; gap: var(--space-xl); border-inline-end: 1px solid; border-block-end: 1px solid; transition: background 220ms var(--ease-standard), color 220ms var(--ease-standard); }
.about-closing__panel--portfolio { background: var(--color-bg-primary); }
.about-closing__panel--portfolio:hover { background: var(--color-bg-surface); }
.about-closing__panel--contact { background: var(--color-bg-dark); color: var(--color-text-inverse); border-color: var(--color-bg-dark); }
.about-closing__panel--contact:hover { background: #1a1a1a; }
.about-closing__panel p { margin-block-start: var(--space-md); }
.about-closing__panel .about-link { align-self: flex-start; }

@media (min-width: 48rem) {
    .about-hero__inner { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); block-size: clamp(35rem, 70svh, 44rem); }
    .about-hero__media { min-block-size: 0; aspect-ratio: auto; border-block-start: 0; border-inline-start: 1px solid; }
    .about-hero h1 { font-size: clamp(3rem, 5vw, 4.25rem); }
    .about-story__header { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
    .about-story__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .about-stat { border-inline-start: 1px solid #ffffff66; }
    .about-stat:first-child { border-inline-start: 0; }
    .about-independent__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
    .about-independent__inner > h2 { grid-column: 1; grid-row: 1; }
    .about-independent__inner > p { grid-column: 1; grid-row: 2; }
    .about-independent__inner > img { grid-column: 2; grid-row: 1 / 3; }
    .about-closing__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-closing__panel { min-block-size: clamp(20rem, 28vw, 25rem); }
}

@media (min-width: 64rem) {
    .about-hero__copy { padding-inline: clamp(1.5rem, 4vw, 4rem) clamp(2.5rem, 5vw, 5rem); }
    .about-method__list article { grid-template-columns: 5rem minmax(15rem, .8fr) minmax(0, 1.2fr); align-items: center; }
    .about-method__list p { grid-column: auto; }
    .about-independent__inner { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(11.25rem, .5fr); }
    .about-independent__inner > p { grid-column: 2; grid-row: 1; }
    .about-independent__inner > img { grid-column: 3; grid-row: 1; }
}

@media (max-width: 47.999rem) {
    .about-page [data-reveal="right"] { --reveal-x: 0; --reveal-y: 18px; }
    .about-section__inner,
    .about-hero__inner { inline-size: calc(100% - (2 * var(--space-md))); }
    .about-link { inline-size: 100%; }
    .about-story__image { block-size: auto; aspect-ratio: 3 / 2; }
    .about-independent__inner > img { justify-self: start; }
    .about-closing { padding-block: 0; }
    .about-closing__inner { inline-size: 100%; border-inline-start: 0; }
    .about-closing__panel { padding-inline: var(--space-md); border-inline: 0; }
}

@media (max-width: 22rem) {
    .about-hero h1 { font-size: 2.2rem; }
    .about-story h2,
    .about-method h2,
    .about-independent h2,
    .about-closing h2 { font-size: 1.9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .about-link,
    .about-link span,
    .about-method__list article,
    .about-method__list h3,
    .about-closing__panel { transition: none; }
    .about-link:hover span,
    .about-link:focus-visible span,
    .about-method__list article:hover h3,
    .about-method__list article:focus-within h3 { transform: none; }
}