/* Keep the page's artwork and motion within its responsive content columns. */
.about-page main > section {
    overflow: clip;
}

.about-hero-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-hero-copy,
.about-page .story-layout > *,
.values-top > *,
.closing-footer-grid > * {
    min-width: 0;
}

.about-hero-art {
    width: 100%;
    max-width: 580px;
    min-height: 0;
    aspect-ratio: 1;
    justify-self: center;
    margin: 0;
    transform: none;
    scale: none;
    animation: none;
    container-type: inline-size;
}

.about-hero-art .about-core {
    width: 51%;
    height: 66%;
    padding: 8% 6% 5%;
    border-radius: clamp(22px, 7cqw, 40px);
}

.about-hero-art .about-core strong {
    font-size: clamp(24px, 8.5cqw, 47px);
    margin: 3% 0 5%;
}

.about-hero-art .about-core small,
.about-hero-art .core-signature {
    font-size: clamp(5px, 1.5cqw, 9px);
    letter-spacing: .15em;
}

.about-hero-art .core-signature { padding-top: 6%; }
.about-hero-art .about-core > i { right: 9%; top: 5%; }
.about-hero-art .orbit { height: auto; aspect-ratio: 1; }
.about-hero-art .orbit-one { width: 94%; }
.about-hero-art .orbit-two { width: 80%; }
.about-hero-art .orbit-three { width: 65%; }
.about-hero-art .art-chip {
    gap: 1.8cqw;
    padding: 2cqw 2.4cqw;
    font-size: clamp(8px, 2.1cqw, 12px);
    border-radius: clamp(10px, 3cqw, 17px);
}
.about-hero-art .art-chip svg { width: 5.4cqw; height: 5.4cqw; flex-shrink: 0; }
.about-hero-art .chip-strategy { left: 0; }
.about-hero-art .chip-creative { right: 0; }
.about-hero-art .chip-performance { left: 0; bottom: 15%; }
.about-hero-art .chip-connection { right: 0; bottom: 20%; }
.about-hero-art .art-star { font-size: clamp(26px, 8cqw, 48px); }

.about-hero-actions,
.method-actions,
.about-disciplines { flex-wrap: wrap; }
.about-hero-actions a { min-height: 44px; }
.about-disciplines { white-space: normal; justify-content: center; }
.about-hero-footer { flex-wrap: wrap; }
.about-stats { max-width: 100%; }
.about-stats > div { min-width: 0; }

/* Scaling a positioned scene around its top-left keeps its centre anchored. */
.values-scene { transform-origin: 0 0; }
.values-row { grid-template-columns: 42px 72px 235px minmax(0, 1fr) 48px; }
.values-row > *, .method-step-copy { min-width: 0; }
.values-row h3, .values-row p, .method-step-copy p { overflow-wrap: break-word; }
.story-promise strong { min-width: 0; }
.closing-footer-bottom > div { flex-wrap: wrap; }

@media (min-width: 901px) {
    .story-redesign .story-growth {
        left: 5%;
        width: 51%;
        height: auto;
        aspect-ratio: 680 / 420;
        top: 210px;
    }
}

@media (max-width: 1600px) {
    .about-page .hero-note, .about-page .method-note { display: none; }
}

@media (min-width: 821px) and (max-width: 1100px) {
    .about-page .brand { width: 145px; }
    .about-page .site-nav { gap: 12px; font-size: 11px; }
    .about-page .site-nav > a:nth-child(4) { display: block; }
    .about-page .site-nav .button { font-size: 11px; padding-left: 12px; gap: 8px; }
}

@media (max-width: 1100px) {
    .about-hero-footer { flex-direction: column; align-items: center; }
    .values-row { grid-template-columns: 25px 55px 190px minmax(0, 1fr) 38px; }
    .values-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 900px) {
    .about-hero-inner {
        width: min(640px, calc(100% - 40px));
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
    .about-hero-copy { text-align: center; }
    .about-label, .about-hero-actions { justify-content: center; }
    .about-hero-copy > p { margin-inline: auto; }
    .about-hero h1 { font-size: clamp(38px, 7.8vw, 64px); }
    .about-hero-art { max-width: 500px; }
    .about-hero-footer { margin-top: 40px; }
    .values-top { grid-template-columns: minmax(0, 1fr); gap: 25px; }
    .values-redesign .values-heading h2 { font-size: clamp(38px, 7.6vw, 64px); }
    .values-visual { width: 100%; height: 430px; scale: none; }
    .values-scene { scale: .85; }
    .values-row { grid-template-columns: 25px 55px minmax(0, 1fr) 38px; gap: 12px 18px; }
    .values-row h3 { grid-column: 3; }
    .values-row p { grid-column: 3; grid-row: 2; font-size: 14px; }
    .values-icon { grid-column: 2; grid-row: 1 / 3; }
    .values-number { grid-row: 1 / 3; }
    .values-row-arrow { grid-column: 4; grid-row: 1 / 3; }
    .story-margin-note { display: none; }
}

@media (max-width: 820px) {
    /* A filtered header must not become the fixed menu's containing block. */
    .about-page .site-header { backdrop-filter: none; }
    .about-page .site-nav {
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        visibility: hidden;
    }
    .about-page .site-nav.open { visibility: visible; }
    .about-page .site-nav > * { flex-shrink: 0; }
    .about-page .site-nav > a:not(.button),
    .about-page .site-nav .nav-services-trigger { color: #0f172a; }
}

@media (max-width: 600px) {
    .about-hero { padding-top: 115px; }
    .about-hero h1 br { display: none; }
    .about-hero h1 { letter-spacing: -.045em; }
    .about-hero h1 em { display: block; }
    .about-label { font-size: 9px; letter-spacing: .09em; }
    .about-hero-actions { gap: 16px 24px; }
    .about-hero-copy > p { font-size: 15px; }
    .about-hero-footer { width: calc(100% - 40px); }
    .about-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 24px 0; text-align: center; }
    .about-stats > div, .about-stats > div:first-child { padding: 0 10px; }
    .about-stats > div:nth-child(2) { border-right: 0; }
    .about-disciplines { font-size: 9px; gap: 10px; }
    .values-visual { height: 350px; }
    .values-scene { scale: .68; }
    .method-step-card { grid-template-columns: 48px minmax(0, 1fr) 29px; gap: 13px; padding: 25px 14px; }
    .method-step-number { position: absolute; top: 8px; left: 15px; font-size: 10px; }
    .method-step-icon { width: 48px; height: 48px; grid-column: 1; }
    .method-step-icon svg { width: 27px; height: 27px; }
    .method-step-arrow { width: 29px; height: 29px; font-size: 20px; }
    .method-step-copy h3 { font-size: 20px; }
    .method-step-copy p { font-size: 14px; }
    .closing-redesign .about-cta-inner { min-width: 0; }
    .closing-redesign h2 { font-size: clamp(32px, 8.6vw, 49px); }
    .about-footer .closing-footer-column > a { min-height: 36px; align-items: center; }
}

@media (max-width: 540px) {
    .values-visual { height: 310px; }
    .values-scene { scale: .57; }
    .values-row { grid-template-columns: 40px minmax(0, 1fr) 30px; gap: 10px 13px; }
    .values-icon { grid-column: 1; grid-row: 1; }
    .values-row h3 { grid-column: 2; }
    .values-row p { grid-column: 2; grid-row: 2; font-size: 14px; }
    .values-row-arrow { grid-column: 3; }
    .values-icon { margin-top: 18px; }
}

@media (max-width: 380px) {
    .values-visual { height: 270px; }
    .values-scene { scale: .46; }
    .values-row { grid-template-columns: 35px minmax(0, 1fr) 26px; gap: 10px; }
    .values-row p { grid-column: 1 / 3; }
    .about-hero-actions .button { padding-left: 20px; font-size: 12px; }
    .closing-redesign .closing-consultation { font-size: 12px; gap: 12px; padding-left: 18px; }
}