@import url("https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap");

:root {
    --mind-black: #0f0f0f;
    --deep-black: #070707;
    --ivory-white: #f5f2ea;
    --warm-ivory: #f0eadf;
    --slate-grey: #666868;
    --bronze-gold: #a67c52;
    --creative-copper: #a67c52;
    --line: rgba(166, 124, 82, 0.28);
    --mind-font: "Satoshi", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.about-page {
    margin: 0;
    overflow-x: hidden;
    background: var(--mind-black);
    color: var(--ivory-white);
    font-family: var(--mind-font);
}

img,
svg {
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.about-page em {
    color: var(--creative-copper);
    font-family: var(--mind-font);
    font-style: italic;
    font-weight: 600;
}

.about-hero__grain,
.about-hero__shade,
.about-hero__stage::after,
.about-values::after,
.about-journey::after {
    pointer-events: none;
}

.about-hero__grain {
    position: absolute;
    inset: 0;
    z-index: 6;
    opacity: 0.11;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(245, 242, 234, 0.16) 0 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, rgba(245, 242, 234, 0.08) 0 1px, transparent 1px);
    background-size: 3px 3px, 5px 5px;
    mix-blend-mode: overlay;
}

.about-hero__shade {
    position: absolute;
    inset: 0;
    z-index: 5;
    background:
        linear-gradient(90deg, rgba(5, 5, 5, 0.98), rgba(5, 5, 5, 0.82) 58%, rgba(5, 5, 5, 0.96)),
        radial-gradient(circle at 78% 44%, rgba(180, 106, 60, 0.14), transparent 30%);
}

.about-hero {
    position: relative;
    min-height: 640px;
    height: 92svh;
    max-height: 760px;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 28%, rgba(166, 124, 82, 0.12), transparent 28%),
        linear-gradient(135deg, #050505 0%, #0f0f0f 100%);
    isolation: isolate;
}

.about-button svg,
.about-mission svg,
.about-next svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--bronze-gold);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.about-hero__stage {
    position: relative;
    z-index: 7;
    display: grid;
    grid-template-columns: minmax(420px, 0.9fr) minmax(300px, 0.65fr);
    grid-template-areas:
        "copy art"
        "stats art";
    gap: clamp(24px, 5vw, 96px);
    align-items: end;
    width: min(100% - 72px, 1490px);
    min-height: 100%;
    margin: 0 auto;
    padding: 118px 0 42px;
}

.about-hero__stage::after {
    position: absolute;
    right: 3%;
    bottom: 0;
    left: 54%;
    z-index: -1;
    height: 60%;
    content: "";
    background: radial-gradient(ellipse at center, rgba(180, 106, 60, 0.16), transparent 72%);
}

.about-hero__copy {
    position: relative;
    grid-area: copy;
    z-index: 5;
    max-width: 610px;
    align-self: center;
}

.about-kicker {
    margin: 0;
    color: var(--bronze-gold);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.about-hero__title {
    margin: 28px 0 0;
    color: var(--ivory-white);
    font-size: clamp(3.2rem, 5vw, 6rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.02;
}

.about-hero__line {
    display: block;
    overflow: hidden;
}

.about-hero__line > span {
    display: block;
    transform: none;
}

.about-rule {
    display: block;
    width: 96px;
    height: 2px;
    margin: 28px 0 0;
    background: var(--creative-copper);
}

.about-hero__intro {
    max-width: 570px;
    margin: 34px 0 0;
    color: rgba(245, 242, 234, 0.72);
    font-size: 1rem;
    line-height: 1.76;
}

.about-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 36px;
    align-items: center;
    margin-top: 44px;
}

.about-button {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    color: var(--ivory-white);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.about-button--play > span {
    position: relative;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid var(--bronze-gold);
    border-radius: 50%;
}

.about-button--play > span::after {
    width: 0;
    height: 0;
    margin-left: 3px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid var(--bronze-gold);
    content: "";
}

.about-button--text {
    color: var(--bronze-gold);
}

.about-hero__art {
    position: relative;
    grid-area: art;
    z-index: 1;
    margin: 0;
    min-width: 0;
    align-self: stretch;
    margin-right: 0;
}

.about-hero__abstract {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 360px;
    clip-path: inset(0 0 0 0);
    border: 1px solid rgba(166, 124, 82, 0.18);
    border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(245, 242, 234, 0.03), transparent 44%),
        radial-gradient(circle at 50% 45%, rgba(180, 106, 60, 0.18), transparent 34%),
        #0b0b0b;
}

.about-hero__abstract::before,
.about-hero__abstract::after {
    position: absolute;
    inset: 0;
    content: "";
}

.about-hero__abstract::before {
    z-index: 3;
    background:
        linear-gradient(90deg, rgba(5, 5, 5, 0.78), transparent 55%, rgba(5, 5, 5, 0.52)),
        linear-gradient(0deg, rgba(5, 5, 5, 0.72), transparent 48%);
}

.about-hero__abstract::after {
    z-index: 1;
    background-image:
        linear-gradient(rgba(166, 124, 82, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(166, 124, 82, 0.06) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(90deg, transparent, black 24%, black 76%, transparent);
}

.about-hero__portal-light,
.about-hero__abstract::before,
.about-hero__abstract::after {
    position: absolute;
    display: block;
}

.about-hero__portal-light {
    top: 20%;
    bottom: 20%;
    left: 52%;
    z-index: 3;
    width: 18%;
    transform: translateX(-50%);
    background:
        linear-gradient(90deg, transparent, rgba(245, 242, 234, 0.18), rgba(180, 106, 60, 0.34), transparent);
    filter: blur(22px);
    opacity: 0.34;
    mix-blend-mode: screen;
}

.about-hero__stats {
    display: grid;
    grid-area: stats;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    align-self: end;
    width: min(100%, 680px);
    margin-top: 18px;
    border-top: 1px solid rgba(166, 124, 82, 0.32);
    border-bottom: 1px solid rgba(166, 124, 82, 0.16);
}

.about-hero__stat {
    display: grid;
    gap: 8px;
    opacity: 1;
    min-height: 105px;
    padding: 22px 20px 18px 0;
    border-right: 1px solid rgba(166, 124, 82, 0.16);
}

.about-hero__stat::after {
    content: none;
}

.about-hero__stat strong {
    color: var(--ivory-white);
    font-size: clamp(1.6rem, 1.85vw, 2.35rem);
    font-weight: 700;
    line-height: 1;
}

.about-hero__stat span {
    color: rgba(245, 242, 234, 0.74);
    font-size: 0.74rem;
    line-height: 1.4;
    text-transform: uppercase;
}

[data-about-eyebrow],
[data-about-intro],
[data-about-actions],
[data-about-intro-side],
[data-about-intro-kicker],
[data-about-intro-text],
[data-about-intro-signature] {
    opacity: 1;
}

.about-intro {
    position: relative;
    display: grid;
    grid-template-columns: minmax(300px, 0.85fr) minmax(260px, 0.8fr) minmax(260px, 0.72fr);
    gap: clamp(22px, 3.2vw, 56px);
    align-items: center;
    align-content: center;
    min-height: calc(100svh - 76px);
    scroll-margin-top: 96px;
    padding: clamp(96px, 10svh, 118px) max(36px, calc((100vw - 1490px) / 2)) clamp(38px, 5svh, 54px);
    overflow: hidden;
    background:
        radial-gradient(circle at 6% 20%, rgba(180, 106, 60, 0.1), transparent 26%),
        linear-gradient(90deg, #f5f0e7 0%, #efe7da 100%);
    color: #101010;
}

.about-intro::before,
.about-values::before {
    position: absolute;
    inset: 0;
    content: "";
    background-image:
        repeating-radial-gradient(circle at 15% 28%, rgba(166, 124, 82, 0.16) 0 1px, transparent 1px 8px);
    opacity: 0.24;
}

.about-side-label {
    position: absolute;
    left: max(20px, calc((100vw - 1490px) / 2));
    top: 50%;
    z-index: 1;
    margin: 0;
    color: var(--creative-copper);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;
}

.about-intro__copy,
.about-intro__image,
.about-mission,
.about-pillars {
    position: relative;
    z-index: 2;
}

.about-intro__copy {
    padding-left: clamp(36px, 5vw, 96px);
}

.about-intro h2,
.about-values h2,
.about-journey h2,
.about-next h2 {
    margin: 14px 0 0;
    font-size: clamp(2rem, 2.55vw, 3rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.12;
}

.about-intro h2 > span,
.about-intro h2 em {
    display: block;
    overflow: hidden;
}

.about-intro h2 em span {
    display: block;
}

.about-intro__copy > p:not(.about-kicker) {
    max-width: 500px;
    margin: 22px 0 0;
    color: #242424;
    font-size: 0.96rem;
    line-height: 1.72;
}

.about-signature {
    margin-top: 26px;
}

.about-signature span {
    display: block;
    color: #191919;
    font-family: var(--mind-font);
    font-size: 1.34rem;
    font-style: italic;
}

.about-signature small {
    display: block;
    margin-top: 5px;
    color: #272727;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.about-intro__image {
    justify-self: center;
    width: min(100%, 370px);
    aspect-ratio: 1 / 1.08;
    overflow: hidden;
    border-radius: 999px 999px 0 0;
}

.about-intro__image img {
    width: 100%;
    height: 100%;
    filter: grayscale(1);
    object-fit: cover;
}

.about-mission {
    width: min(100%, 315px);
    margin-left: -92px;
    padding: 34px 32px;
    border: 1px solid rgba(245, 242, 234, 0.08);
    border-radius: 7px;
    background: #101010;
    box-shadow: 0 28px 45px rgba(0, 0, 0, 0.28);
    color: var(--ivory-white);
}

.about-mission p:not(.about-kicker) {
    margin: 22px 0 28px;
    color: rgba(245, 242, 234, 0.72);
    line-height: 1.68;
}

.about-mission a,
.about-team__slider button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--bronze-gold);
    border-radius: 50%;
    background: transparent;
}

.about-pillars {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 46px);
    margin-top: clamp(8px, 2.2vh, 18px);
}

.about-pillars article {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 18px;
    align-items: start;
}

.about-pillars span,
.about-value__icon {
    display: grid;
    place-items: center;
    color: var(--creative-copper);
}

.about-pillars span {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(180, 106, 60, 0.6);
    border-radius: 50%;
}

.about-pillars svg,
.about-value svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.55;
}

.about-pillars h3,
.about-value h3 {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.about-pillars p,
.about-value p {
    margin: 8px 0 0;
    color: rgba(15, 15, 15, 0.78);
    font-size: 0.86rem;
    line-height: 1.62;
}

.about-values {
    position: relative;
    display: grid;
    grid-template-columns: minmax(230px, 0.42fr) 1fr;
    gap: clamp(34px, 5vw, 90px);
    margin-top: 0;
    padding: clamp(72px, 7vw, 104px) max(36px, calc((100vw - 1490px) / 2));
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(245, 240, 231, 0.05), transparent 18%),
        radial-gradient(circle at 85% 140%, rgba(180, 106, 60, 0.22), transparent 42%),
        linear-gradient(180deg, #0b0b0b, #111);
}

.about-values::before {
    background-image:
        linear-gradient(rgba(245, 242, 234, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 242, 234, 0.02) 1px, transparent 1px),
        repeating-radial-gradient(circle at 15% 28%, rgba(166, 124, 82, 0.16) 0 1px, transparent 1px 8px);
    background-size: 76px 76px, 76px 76px, auto;
    opacity: 0.2;
    mask-image: linear-gradient(180deg, transparent, #000 12%, #000 82%, transparent);
}

.about-values::after,
.about-journey::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 80px;
    content: "";
    background:
        radial-gradient(ellipse at 75% 100%, rgba(180, 106, 60, 0.42), transparent 38%),
        repeating-radial-gradient(ellipse at 30% 100%, rgba(166, 124, 82, 0.28) 0 1px, transparent 1px 10px);
    opacity: 0.38;
}

.about-values > *,
.about-journey > *,
.about-next > * {
    position: relative;
    z-index: 2;
}

.about-values__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-left: 1px solid rgba(166, 124, 82, 0.18);
}

.about-value {
    position: relative;
    min-height: 185px;
    padding: 4px clamp(20px, 2vw, 34px);
    border-right: 1px solid rgba(166, 124, 82, 0.18);
}

.about-value::before {
    position: absolute;
    inset: -18px 8px auto;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(211, 146, 91, 0.64), transparent);
    opacity: 0;
    transform: scaleX(0.3);
    transform-origin: 0 50%;
    transition: opacity 420ms ease, transform 720ms ease;
}

.about-value.is-visible::before {
    opacity: 1;
    transform: scaleX(1);
}

.about-value__icon {
    width: 58px;
    height: 58px;
    margin-bottom: 20px;
}

.about-value p {
    color: rgba(245, 242, 234, 0.68);
}

.about-journey {
    position: relative;
    overflow: hidden;
    padding: clamp(78px, 8vw, 118px) max(36px, calc((100vw - 1490px) / 2)) clamp(88px, 8vw, 124px);
    border-top: 1px solid rgba(166, 124, 82, 0.18);
    background:
        linear-gradient(180deg, rgba(166, 124, 82, 0.12), transparent 12%),
        radial-gradient(circle at 92% 56%, rgba(166, 124, 82, 0.28), transparent 24%),
        radial-gradient(circle at 8% 18%, rgba(245, 242, 234, 0.035), transparent 25%),
        linear-gradient(180deg, #111, #0b0b0b);
}

.about-journey::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(90deg, rgba(245, 242, 234, 0.018) 1px, transparent 1px),
        linear-gradient(180deg, rgba(245, 242, 234, 0.014) 1px, transparent 1px);
    background-size: 86px 86px;
    opacity: 0.72;
    mask-image: radial-gradient(circle at 28% 20%, #000, transparent 68%);
}

.about-next {
    --about-next-glow-x: 50%;
    position: relative;
    overflow: hidden;
    padding: clamp(44px, 5vw, 68px) max(24px, calc((100vw - 1120px) / 2)) clamp(46px, 5.4vw, 72px);
    border-top: 1px solid rgba(166, 124, 82, 0.18);
    text-align: center;
    background:
        radial-gradient(circle at var(--about-next-glow-x) 0%, rgba(180, 106, 60, 0.24), transparent 28%),
        linear-gradient(180deg, #0b0b0b, #080808);
}

.about-next::before {
    position: absolute;
    inset: 0;
    content: "";
    background-image:
        linear-gradient(rgba(245, 242, 234, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 242, 234, 0.02) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(circle at 50% 10%, black, transparent 68%);
}

.about-next h2 {
    max-width: 760px;
    margin-inline: auto;
}

.about-next h2 span {
    display: block;
    overflow: hidden;
}

.about-next > p:not(.about-kicker) {
    max-width: 620px;
    margin: 18px auto 0;
    color: rgba(245, 242, 234, 0.68);
    font-size: 1rem;
    line-height: 1.64;
}

.about-next .about-button {
    justify-content: center;
    margin-top: 26px;
}

.about-journey__head,
.about-team__head {
    display: grid;
    grid-template-columns: minmax(280px, 0.7fr) minmax(240px, 0.52fr) auto;
    gap: 42px;
    align-items: end;
}

.about-journey__head p:not(.about-kicker),
.about-team__head p {
    max-width: 360px;
    margin: 0;
    color: rgba(245, 242, 234, 0.62);
    line-height: 1.72;
}

.about-timeline {
    --about-timeline-progress: 0%;
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 72px;
    border-top: 1px solid rgba(166, 124, 82, 0.46);
}

.about-timeline::before {
    position: absolute;
    top: -1px;
    left: 0;
    width: var(--about-timeline-progress);
    height: 1px;
    content: "";
    background: linear-gradient(90deg, var(--bronze-gold), rgba(245, 242, 234, 0.68), var(--bronze-gold));
    box-shadow: 0 0 22px rgba(211, 146, 91, 0.32);
}

.about-timeline article {
    position: relative;
    padding: 32px 22px 0 0;
}

.about-timeline article > span {
    position: absolute;
    top: -10px;
    left: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--bronze-gold);
    border-radius: 50%;
    background: var(--deep-black);
    box-shadow: inset 0 0 0 4px var(--ivory-white);
}

.about-timeline strong {
    color: var(--bronze-gold);
    font-size: 0.86rem;
}

.about-timeline h3 {
    margin: 12px 0 0;
    font-size: 0.82rem;
}

.about-timeline p {
    margin: 9px 0 0;
    color: rgba(245, 242, 234, 0.62);
    font-size: 0.82rem;
    line-height: 1.58;
}

.about-team {
    padding: 66px max(36px, calc((100vw - 1490px) / 2)) 72px;
    border-top: 1px solid rgba(166, 124, 82, 0.2);
    background:
        radial-gradient(circle at 82% 18%, rgba(180, 106, 60, 0.1), transparent 22%),
        #0d0d0d;
}

.about-team__head a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--bronze-gold);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.about-team__slider {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    gap: 28px;
    align-items: center;
    margin-top: 38px;
}

.about-team__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 26px;
}

.about-leader {
    overflow: hidden;
    border: 1px solid rgba(166, 124, 82, 0.22);
    border-radius: 7px;
    background: #111;
}

.about-leader img {
    width: 100%;
    aspect-ratio: 1 / 1.18;
    filter: grayscale(1) contrast(1.05);
    object-fit: cover;
    object-position: 50% 18%;
}

.about-leader div {
    position: relative;
    padding: 18px 18px 20px;
}

.about-leader h3 {
    margin: 0;
    color: var(--bronze-gold);
    font-size: 0.92rem;
}

.about-leader p {
    margin: 5px 0 0;
    color: rgba(245, 242, 234, 0.68);
    font-size: 0.78rem;
}

.about-leader span {
    position: absolute;
    right: 16px;
    bottom: 18px;
    font-size: 0.88rem;
    font-weight: 800;
}

.about-footer {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) repeat(4, minmax(150px, 0.7fr));
    gap: clamp(28px, 4vw, 70px);
    padding: 48px max(36px, calc((100vw - 1490px) / 2)) 26px;
    border-top: 1px solid rgba(166, 124, 82, 0.24);
    background: #080808;
}

.about-footer__brand p,
.about-footer__newsletter p,
.about-footer__contact p {
    max-width: 330px;
    color: rgba(245, 242, 234, 0.62);
    line-height: 1.72;
}

.about-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--ivory-white);
}

.about-footer__mark {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(166, 124, 82, 0.55);
    color: var(--bronze-gold);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.about-footer__logo strong,
.about-footer__logo small {
    display: block;
    text-transform: uppercase;
}

.about-footer__logo strong {
    font-size: 1rem;
    letter-spacing: 0.1em;
}

.about-footer__logo small {
    margin-top: 6px;
    color: rgba(245, 242, 234, 0.64);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.about-footer__socials {
    display: flex;
    gap: 12px;
    margin-top: 22px;
}

.about-footer__socials a {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid rgba(245, 242, 234, 0.2);
    border-radius: 50%;
    font-size: 0.68rem;
    font-weight: 800;
}

.about-footer h2 {
    margin: 0 0 18px;
    color: var(--ivory-white);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.about-footer__column,
.about-footer__contact {
    display: grid;
    align-content: start;
    gap: 11px;
}

.about-footer__column a,
.about-footer__contact a,
.about-footer__bottom,
.about-footer__newsletter p {
    color: rgba(245, 242, 234, 0.62);
    font-size: 0.84rem;
}

.about-footer__newsletter form {
    display: flex;
    width: min(100%, 260px);
    min-height: 52px;
    overflow: hidden;
    border: 1px solid rgba(166, 124, 82, 0.4);
    border-radius: 999px;
    background: rgba(245, 242, 234, 0.05);
}

.about-footer__newsletter input {
    min-width: 0;
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--ivory-white);
    padding: 0 18px;
}

.about-footer__newsletter button {
    display: grid;
    width: 54px;
    place-items: center;
    border: 0;
    background: transparent;
}

.about-footer__bottom {
    display: flex;
    grid-column: 1 / -1;
    justify-content: space-between;
    gap: 24px;
    margin-top: 24px;
}

.about-footer__bottom nav {
    display: flex;
    gap: 28px;
}

@media (max-width: 1240px) {
    .about-hero__stage {
        grid-template-columns: minmax(320px, 0.82fr) minmax(420px, 1.18fr);
        grid-template-areas:
            "copy art"
            "stats stats";
        min-height: calc(100% - 100px);
    }

    .about-hero__stats {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
        justify-self: stretch;
    }

    .about-hero__art {
        margin-right: 0;
    }

    .about-intro {
        grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
    }

    .about-mission {
        margin-left: 0;
    }

    .about-pillars {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .about-values,
    .about-values__grid,
    .about-timeline,
    .about-team__grid,
    .about-footer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-team__slider {
        grid-template-columns: 1fr;
    }

    .about-team__slider button {
        display: none;
    }
}

@media (max-width: 820px) {
    .about-hero__stage {
        width: min(100% - 32px, 1490px);
    }

    .about-hero {
        height: auto;
        max-height: none;
        min-height: 100svh;
    }

    .about-hero__stage,
    .about-intro,
    .about-values,
    .about-journey__head,
    .about-team__head,
    .about-footer {
        grid-template-columns: 1fr;
    }

    .about-hero__stage {
        grid-template-areas:
            "copy"
            "art"
            "stats";
        min-height: auto;
        padding-top: 104px;
        padding-bottom: 34px;
    }

    .about-hero__title {
        font-size: clamp(3rem, 14vw, 5rem);
    }

    .about-hero__abstract {
        min-height: 360px;
    }

    .about-hero__stats,
    .about-pillars,
    .about-values__grid,
    .about-timeline,
    .about-team__grid {
        grid-template-columns: 1fr;
    }

    .about-hero__stats {
        border-bottom: 0;
    }

    .about-hero__stat {
        min-height: auto;
        padding: 18px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(166, 124, 82, 0.16);
    }

    .about-intro,
    .about-values,
    .about-journey,
    .about-next,
    .about-team,
    .about-footer {
        padding-right: 20px;
        padding-left: 20px;
    }

    .about-intro {
        min-height: auto;
        padding-top: 84px;
        padding-bottom: 48px;
    }

    .about-intro__copy {
        padding-left: 0;
    }

    .about-side-label {
        display: none;
    }

    .about-mission {
        width: 100%;
        margin-left: 0;
    }

    .about-timeline {
        gap: 24px;
        border-top: 0;
    }

    .about-timeline::before {
        top: 0;
        left: 0;
        width: 1px;
        height: var(--about-timeline-progress);
    }

    .about-timeline article {
        padding: 0 0 0 32px;
        border-left: 1px solid rgba(166, 124, 82, 0.46);
    }

    .about-timeline article > span {
        top: 0;
        left: -10px;
    }

    .about-footer__bottom {
        display: grid;
    }
}

@media (max-width: 520px) {
    .about-hero__actions,
    .about-footer__bottom nav {
        display: grid;
        gap: 18px;
    }

    .about-hero__stat strong {
        font-size: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .about-hero__line > span,
    [data-about-eyebrow],
    [data-about-intro],
    [data-about-actions],
    [data-about-stat],
    [data-about-intro-side],
    [data-about-intro-kicker],
    [data-about-intro-title-line],
    [data-about-intro-text],
    [data-about-intro-signature],
    [data-about-values-head],
    [data-about-value-card],
    [data-about-journey-title],
    [data-about-journey-copy],
    [data-about-timeline],
    [data-about-timeline-item],
    [data-about-next-kicker],
    [data-about-next-title] span,
    [data-about-next-copy],
    [data-about-next-button] {
        opacity: 1;
        transform: none;
    }

    .about-timeline {
        --about-timeline-progress: 100%;
    }

    .about-value::before {
        opacity: 1;
        transform: scaleX(1);
    }

    .about-hero__abstract {
        clip-path: inset(0 0 0 0);
    }
}

/* ===========================================================================
   Section rhythm + "Who We Are" refresh

   Appended last so it settles the rules above it, media queries included:
   the earlier breakpoint blocks live higher in this file, so anything this
   block restates has to restate its responsive form too.

   Two problems are fixed here. The intro band carried a stock portrait that
   the mission card had to dodge with a -92px margin, and every band below it
   opened and closed on so little padding that the whole page read as one
   continuous slab. One padding token now drives the beat between bands, and
   each band opens on a hairline so the seam is deliberate.
   ========================================================================== */

:root {
    --about-band-pad: clamp(88px, 7.6vw, 128px);
    --about-band-line: rgba(166, 124, 82, 0.22);
    --about-ink-line: rgba(16, 16, 16, 0.14);
}

/* ---------- Who We Are --------------------------------------------------- */

.about-intro {
    grid-template-columns: minmax(0, 1.06fr) minmax(290px, 0.58fr);
    align-items: start;
    align-content: start;
    row-gap: clamp(44px, 4.4vw, 70px);
    column-gap: clamp(36px, 4.4vw, 84px);
    min-height: auto;
    padding-top: var(--about-band-pad);
    padding-bottom: var(--about-band-pad);
}

.about-intro__copy {
    max-width: 660px;
    padding-left: clamp(26px, 3.2vw, 64px);
}

.about-intro h2 {
    margin-top: 18px;
    font-size: clamp(2.3rem, 3.4vw, 3.7rem);
    line-height: 1.07;
}

.about-intro .about-rule {
    width: 84px;
    margin-top: 26px;
    background: linear-gradient(90deg, var(--creative-copper), rgba(166, 124, 82, 0));
}

.about-intro__copy > p:not(.about-kicker) {
    max-width: 560px;
    margin-top: 26px;
    font-size: 1rem;
}

.about-signature {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid var(--about-ink-line);
}

/* The card sat under a photo, so it was pulled left and cropped. It is now a
   plain second column and can keep its own edges. */
.about-mission {
    width: 100%;
    max-width: 430px;
    justify-self: end;
    margin-left: 0;
    padding: clamp(30px, 2.4vw, 40px);
    border-color: rgba(166, 124, 82, 0.26);
}

.about-mission a {
    transition: background 220ms ease, transform 220ms ease;
}

.about-mission a:hover {
    background: rgba(166, 124, 82, 0.16);
    transform: translateX(3px);
}

/* The three strengths become their own row under a rule instead of crowding
   the bottom of the copy column. */
.about-pillars {
    margin-top: 0;
    padding-top: clamp(38px, 3.4vw, 54px);
    border-top: 1px solid var(--about-ink-line);
}

/* ---------- Our Values --------------------------------------------------- */

.about-values {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(38px, 3.8vw, 58px);
    padding-top: var(--about-band-pad);
    padding-bottom: var(--about-band-pad);
    border-top: 1px solid var(--about-band-line);
}

.about-values > [data-about-values-head] {
    max-width: 640px;
}

.about-values h2,
.about-journey h2,
.about-next h2 {
    font-size: clamp(2.1rem, 3vw, 3.4rem);
}

/* Five cards used to share the 58% of the row the heading left over. They now
   run the full width, and the 1px gaps over a copper ground draw the dividers
   so no card needs its own border. */
.about-values__grid {
    grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
    gap: 1px;
    border-left: 0;
    background: rgba(166, 124, 82, 0.18);
}

.about-value {
    min-height: 0;
    padding: clamp(30px, 2.4vw, 40px) clamp(24px, 1.9vw, 32px);
    border-right: 0;
    background:
        linear-gradient(180deg, rgba(245, 242, 234, 0.045), rgba(245, 242, 234, 0.008)),
        #101010;
    transition: background 240ms ease;
}

.about-value:hover {
    background:
        linear-gradient(180deg, rgba(166, 124, 82, 0.14), rgba(245, 242, 234, 0.012)),
        #101010;
}

.about-value::before {
    inset: 0 0 auto 0;
}

.about-value__icon {
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
}

/* ---------- Our Journey -------------------------------------------------- */

.about-journey {
    padding-top: var(--about-band-pad);
    padding-bottom: var(--about-band-pad);
    border-top: 1px solid var(--about-band-line);
}

/* The head declared a third `auto` column that has no child to fill it. */
.about-journey__head {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.5fr);
    gap: clamp(28px, 4vw, 68px);
}

.about-journey__head h2 {
    max-width: 640px;
}

.about-timeline {
    margin-top: clamp(52px, 4.6vw, 76px);
}

.about-timeline article {
    padding: 34px clamp(18px, 1.8vw, 30px) 0 0;
}

/* ---------- Build With Mindspace ----------------------------------------- */

.about-next {
    padding-top: var(--about-band-pad);
    padding-bottom: var(--about-band-pad);
    border-top: 1px solid var(--about-band-line);
}

.about-next > p:not(.about-kicker) {
    margin-top: 22px;
}

.about-next .about-button {
    margin-top: 34px;
}

/* The copper haze sat in the last 80px of a band at full strength, which bled
   straight into the band below and hid the seam. */
.about-values::after,
.about-journey::after {
    height: 130px;
    opacity: 0.18;
}

/* ---------- responsive --------------------------------------------------- */

@media (max-width: 1240px) {
    :root {
        --about-band-pad: clamp(74px, 6.8vw, 98px);
    }

    .about-intro {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.68fr);
    }

    .about-mission {
        max-width: none;
    }
}

@media (max-width: 820px) {
    :root {
        --about-band-pad: clamp(58px, 9vw, 78px);
    }

    .about-intro,
    .about-journey__head {
        grid-template-columns: 1fr;
    }

    .about-intro__copy {
        max-width: none;
        padding-left: 0;
    }

    .about-mission {
        justify-self: stretch;
    }

    .about-values__grid {
        grid-template-columns: 1fr;
    }

    .about-pillars {
        padding-top: 34px;
    }
}