/*
 * MoCo Brand v3 — About page
 * Loaded on /about/ only.
 * Page signal: BLUE (Prospect) — one signal for the whole page, per brand.
 */

/* The About page carries its own headline in the content; the WP page title
   above it is redundant and stays hidden (behaviour kept from v1). */
.page-id-14 .entry-title,
.page-id-14 .page-title,
.page-id-14 .entry-header,
body.page-id-14 h1.entry-title { display: none !important; }

.about-hero-section,
.about-story-section {
    --signal:    var(--blue);
    --on-signal: var(--cream);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    position: relative;
}

.about-hero-content,
.about-story-content {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding: var(--section-pad);
}

/* ==========================================================================
   Hero — navy
   ========================================================================== */

.about-hero-section {
    background: var(--navy);
    overflow: hidden;
}

.about-hero-content { padding-block: clamp(56px, 8vw, 104px); }

/* Accelerate slash bleeding off the right edge. Never the left. */
.about-hero-section::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: clamp(24px, 4vw, 56px);
    width: clamp(150px, 20vw, 280px);
    height: clamp(32px, 4.5vw, 60px);
    transform: translateX(14%) skewX(-30deg);
    background-image: linear-gradient(
        90deg,
        var(--navy3) 0 7.69%,       transparent 7.69% 13.85%,
        var(--navy3) 13.85% 24.62%, transparent 24.62% 30.77%,
        var(--navy3) 30.77% 44.62%, transparent 44.62% 50.77%,
        var(--navy3) 50.77% 69.23%, transparent 69.23% 75.38%,
        var(--blue)  75.38% 100%
    );
    pointer-events: none;
}

.about-headline {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: var(--size-display);
    line-height: 0.89;
    letter-spacing: -0.035em;
    color: var(--cream);
    max-width: 18ch;
    margin: 0 0 32px;
}

.about-lead {
    font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
    line-height: 1.45;
    color: var(--cream);
    max-width: var(--measure);
}

/* ==========================================================================
   Story — cream counterpoint
   ========================================================================== */

.about-story-section {
    background: var(--cream);
    color: var(--navy);
    /* Flip the token contract wholesale rather than recolouring components. */
    --surface:    var(--cream);
    --surface-2:  #F5F4EE;
    --ink:        var(--navy);
    --ink-2:      var(--ink-cream-2);
    --line:       var(--cream2);
    --card:       #F5F4EE;
    --card-line:  var(--cream2);
    --link-hover: var(--blue);
    --slash-base: var(--cream2);
}

.about-story-content { padding-block: clamp(56px, 8vw, 96px); }

.about-story-section .pull-quote { margin-bottom: 56px; }

/* Story blocks */
.story-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
    margin-bottom: calc(var(--block-gap) * 1.4);
}

.story-block {
    background: var(--card);
    outline: 1px solid var(--card-line);
    outline-offset: -1px;
    padding: 28px;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink-2);
}

.story-block h2 {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: normal;
    font-size: 1.25rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--navy);
    max-width: none;
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--cream2);
}

/* ==========================================================================
   Operating principles
   ========================================================================== */

.about-principles { margin-bottom: calc(var(--block-gap) * 1.2); }

.principles-headline {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: var(--size-headline);
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--navy);
    max-width: 16ch;
    margin: 0 0 8px;
}

/* Slash rule under the headline, signal bar last. */
.principles-headline + .principles-grid { margin-top: 40px; }
.about-principles > .principles-headline::after {
    content: '';
    display: block;
    width: 50px;
    height: 16px;
    margin-top: 28px;
    transform: skewX(-30deg);
    background-image:
        linear-gradient(var(--blue), var(--blue)),
        repeating-linear-gradient(90deg, var(--cream2) 0 6px, transparent 6px 11px);
    background-size: 6px 100%, auto;
    background-position: 100% 0, 0 0;
    background-repeat: no-repeat, repeat;
}

.principles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
    counter-reset: pr;
}

.principle-item {
    position: relative;
    background: var(--card);
    outline: 1px solid var(--card-line);
    outline-offset: -1px;
    padding: 28px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink-2);
    counter-increment: pr;
}

.principle-item h3 {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: normal;
    font-size: 1.125rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--navy);
    margin: 0 0 12px;
    padding-right: 40px;
}

.principle-item::after {
    content: '0' counter(pr);
    position: absolute;
    top: 24px;
    right: 24px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.125rem;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--blue);
    line-height: 1;
}

/* ==========================================================================
   Closing
   ========================================================================== */

.about-closing {
    padding-top: var(--block-gap);
    border-top: 1px solid var(--cream2);
}

.about-closing .closing-statement {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: clamp(1.5rem, 2.8vw, 2.25rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--navy);
    max-width: 22ch;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .principles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .story-grid,
    .principles-grid { grid-template-columns: minmax(0, 1fr); }

}