/* =================================================================
   HEADBRID ABOUT PAGE ADDITIONS  /  headbrid-about-additions.css
   =================================================================
   Companion stylesheet for the pre-revenue-pivot About page.
   Loaded AFTER about.css (injected in <body>) so these rules
   win without needing !important.

   Scope:
     1.  .about-pivot-timeline / .pivot-timeline / .pivot-stage
         - three-stage history timeline (2011 / 2016 / 2026)
     2.  .about-lesson / .lesson-pullquote / .lesson-stat
         - case-study-as-insight section
     3.  .about-team / .about-team-meta / .team-meta-item
         - team intro + structured meta info
     4.  .about-notfor / .notfor-list / .notfor-item
         - negative positioning section
     5.  .about-final-actions
         - closing CTA pair
     6.  .pivot-stage-current
         - visual emphasis on the current (2026) pivot stage
     7.  .about-intro / .about-intro-anchor / .about-intro-pullquote
         - "Why we pivoted" section: stretch + anchor + pullquote callout

   Brand palette (matches existing site):
     - charcoal/black:        #080808
     - dark section bg:        #111111
     - safety gold accent:     #c9a84c
     - body text on dark:      #aaaaaa / #cccccc / #ffffff
     - hairline border:        #333333
   ================================================================= */


/* -----------------------------------------------------------------
   0.  WHY WE PIVOTED  -  intro section restyle
       Light/cream section. Two-column grid with the LEFT column
       ending early, leaving empty space below the headline. The
       right column was a wall of undifferentiated text.

       Fixes applied:
       (a) Both columns stretch to the same height via align-items:
           stretch on the grid + flex column on the left heading
           container with space-between, so the new "pivot
           principle" anchor sits at the bottom of the left column
           and matches the right column height.
       (b) The left column gets a vertical separator (right border)
           so the columns feel connected rather than disconnected.
       (c) The right column gets a gold pullquote callout ("Why
           this niche") that lifts the emotional core of the story
           out of the body text - turning the wall of text into a
           skimmable narrative with one intentional highlight.
   ----------------------------------------------------------------- */

/* Stretch both columns to the same height */
.about-intro-layout {
    align-items: stretch !important;
}

/* Left column: use flexbox + space-between to push the new anchor
   block to the bottom, matching the right column's height.
   Add a subtle vertical separator on the right edge. */
.about-intro-heading {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 2.5rem;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}

/* The headline itself stays at the top - this is the default
   flex behavior with space-between when there are two children. */
.about-intro-heading h2 {
    /* inherits from about.css */
}

/* The new "pivot principle" anchor block at the bottom of the
   left column. Small gold label + larger italic pullquote +
   small attribution line. */
.about-intro-anchor {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.about-intro-anchor-label {
    display: inline-block;
    margin: 0 0 1rem;
    padding: 0.3rem 0.85rem;
    background: #c9a84c;
    color: #080808;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 3px;
}

.about-intro-anchor-quote {
    color: #1a1a1a;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0 0 0.85rem;
    font-style: normal;
}

.about-intro-anchor-attribution {
    color: #666666;
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}

/* Right column: pullquote callout ("Why this niche") lifts the
   emotional core of the story out of the body text.
   Light background section, so use dark text + gold accent border. */
.about-intro-pullquote {
    margin: 2rem 0;
    padding: 1.75rem 1.75rem 1.75rem 2rem;
    background: rgba(201, 168, 76, 0.08);
    border-left: 4px solid #c9a84c;
    border-radius: 0 6px 6px 0;
}

.about-intro-pullquote-label {
    display: inline-block;
    margin: 0 0 0.85rem;
    padding: 0.25rem 0.85rem;
    background: #c9a84c;
    color: #080808;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 3px;
}

.about-intro-pullquote p {
    margin: 0;
    color: #1a1a1a;
    font-size: 1.15rem;
    line-height: 1.65;
    font-weight: 500;
}

/* Mobile: stack the columns, remove the vertical separator */
@media (max-width: 800px) {
    .about-intro-heading {
        padding-right: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        padding-bottom: 2.5rem;
        margin-bottom: 1rem;
    }
    .about-intro-anchor {
        margin-top: 2rem;
    }
    .about-intro-anchor-quote {
        font-size: 1.3rem;
    }
}


/* -----------------------------------------------------------------
   1.  PIVOT TIMELINE  -  2011 / 2016 / 2026 horizontal flow
       Three deliberate narrowing decisions, with the current
       (2026) stage visually emphasised.
   ----------------------------------------------------------------- */

.about-pivot-timeline {
    padding: 100px 0;
    background: #080808;
    border-bottom: 1px solid #333333;
}

.about-pivot-timeline .section-header {
    max-width: 850px;
    margin: 0 auto 70px;
    text-align: center;
}

.about-pivot-timeline .section-header h2 {
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0;
}

.about-pivot-timeline .section-header h2 span {
    display: block;
    color: #c9a84c;
}

.pivot-timeline {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.pivot-stage {
    padding: 2rem 1.75rem;
    background: #111111;
    border: 1px solid #333333;
    border-top: 4px solid #333333;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.pivot-stage:hover {
    border-top-color: #c9a84c;
    transform: translateY(-2px);
}

.pivot-year {
    display: inline-block;
    margin-bottom: 1.25rem;
    padding: 0.4rem 1rem;
    background: #1a1a1a;
    color: #c9a84c;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 3px;
}

.pivot-body h3 {
    color: #ffffff;
    font-size: 1.4rem;
    line-height: 1.2;
    margin: 0 0 1rem;
    font-weight: 700;
}

.pivot-body p {
    color: #aaaaaa;
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

/* Current (2026) stage - visually emphasised with gold border + tint */
.pivot-stage-current {
    background: rgba(201, 168, 76, 0.04);
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-top: 4px solid #c9a84c;
}

.pivot-stage-current .pivot-year {
    background: #c9a84c;
    color: #080808;
}

.pivot-stage-current .pivot-body h3 {
    color: #c9a84c;
}

.pivot-stage-current .pivot-body p {
    color: #e8e8e8;
}

/* Mobile: stack the timeline vertically */
@media (max-width: 800px) {
    .about-pivot-timeline {
        padding: 70px 0;
    }
    .pivot-timeline {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}


/* -----------------------------------------------------------------
   2.  LESSON SECTION  -  case study reframed as insight
       Dark section with two-column layout:
       LEFT: narrative + pullquote lesson (with "The lesson" label)
       RIGHT: highlight stat callout (R28,000) + bottom CTA anchor
       The right card stretches to full section height via flexbox +
       justify-content: space-between, eliminating the empty bottom-
       right space that the previous version had.
   ----------------------------------------------------------------- */

.about-lesson {
    padding: 110px 0;
    background: #111111;
    border-bottom: 1px solid #333333;
}

.about-lesson-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 70px;
    align-items: stretch;          /* both columns stretch to the same height */
}

.about-lesson-copy {
    /* left column wraps eyebrow + h2 + paragraphs + lesson-pullquote-wrap */
}

.about-lesson .section-eyebrow {
    color: #c9a84c;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: block;
    margin: 0 0 1.5rem;
}

.about-lesson h2 {
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 2rem;
}

.about-lesson p {
    color: #cccccc;
    font-size: 1.05rem;
    line-height: 1.75;
    margin: 0 0 1.5rem;
    max-width: 620px;
}

/* The pullquote lesson wrap - adds a small "The lesson" eyebrow label
   above the gold-bordered quote box so it reads as an intentional
   callout rather than a random gold box in the middle of the text. */
.lesson-pullquote-wrap {
    margin: 2rem 0;
}

.lesson-pullquote-label {
    display: inline-block;
    margin: 0 0 0.65rem;
    padding: 0.25rem 0.85rem;
    background: #c9a84c;
    color: #080808;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 3px;
}

.lesson-pullquote {
    margin: 0 !important;
    padding: 1.75rem 1.75rem 1.75rem 2rem !important;
    background: rgba(201, 168, 76, 0.05) !important;
    border-left: 4px solid #c9a84c !important;
    border-radius: 0 6px 6px 0;
    font-size: 1.15rem !important;
    line-height: 1.65 !important;
    color: #e8e8e8 !important;
}

.lesson-pullquote strong {
    color: #c9a84c;
    font-weight: 700;
}

/* Right column: highlight stat callout + CTA anchor
   The card now stretches to match the left text column height via
   align-items: stretch on the grid + flex column with space-between
   inside the card itself. Stat stays at the top, CTA at the bottom. */
.about-lesson-stat {
    padding: 2.5rem 2rem;
    background: rgba(201, 168, 76, 0.06);
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-left: 4px solid #c9a84c;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
}

.lesson-stat-group {
    text-align: center;
}

.lesson-stat-eyebrow {
    display: inline-block;
    margin: 0 0 1.25rem;
    padding: 0.3rem 0.85rem;
    background: rgba(201, 168, 76, 0.15);
    color: #c9a84c;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 3px;
}

.lesson-stat-number {
    font-size: clamp(2.75rem, 6vw, 4rem);
    font-weight: 700;
    color: #c9a84c;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
    text-shadow: 0 0 30px rgba(201, 168, 76, 0.2);
}

.lesson-stat-label {
    color: #cccccc;
    font-size: 0.95rem;
    line-height: 1.65;
}

.lesson-stat-label strong {
    color: #ffffff;
    font-weight: 700;
    display: inline-block;
}

/* CTA anchor at the bottom of the stat card */
.lesson-stat-cta {
    padding-top: 1.75rem;
    border-top: 1px solid rgba(201, 168, 76, 0.25);
    text-align: center;
}

.lesson-stat-cta-line {
    color: #cccccc;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 1.25rem;
    font-style: italic;
}

.lesson-stat-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.5rem;
    background: #c9a84c;
    color: #080808;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    width: 100%;
}

.lesson-stat-cta-button:hover,
.lesson-stat-cta-button:focus {
    background: #ffffff;
    color: #080808;
    transform: translateY(-1px);
}

/* Mobile */
@media (max-width: 900px) {
    .about-lesson {
        padding: 80px 0;
    }
    .about-lesson-layout {
        grid-template-columns: 1fr;
        gap: 50px;
        align-items: start;          /* on mobile, let columns size naturally */
    }
    .about-lesson-stat {
        padding: 2rem 1.5rem;
        gap: 2rem;
    }
    .lesson-stat-cta-button {
        width: 100%;
    }
}


/* -----------------------------------------------------------------
   3.  TEAM SECTION  -  small team intro + structured meta info
       Dark section. Two-column: narrative left, meta grid right.
   ----------------------------------------------------------------- */

.about-team {
    padding: 110px 0;
    background: #080808;
    border-bottom: 1px solid #333333;
}

.about-team-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 70px;
    align-items: start;
}

.about-team .section-eyebrow {
    color: #c9a84c;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: block;
    margin: 0 0 1.5rem;
}

.about-team h2 {
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 2rem;
}

.about-team h2 span {
    display: block;
    color: #c9a84c;
}

.about-team p {
    color: #cccccc;
    font-size: 1.05rem;
    line-height: 1.75;
    margin: 0 0 1.5rem;
    max-width: 580px;
}

/* Right column: structured meta info + CTA anchor
   The card uses flexbox with flex-direction: column and
   justify-content: space-between so the 4 meta items spread
   down the full height of the section (matching the left text
   column), and the CTA sits anchored at the bottom. This
   eliminates the empty bottom-right space the section had. */
.about-team-meta {
    padding: 2rem 1.75rem;
    background: #111111;
    border: 1px solid #333333;
    border-radius: 6px;
    align-self: stretch;            /* stretch to full height of grid row */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* pushes CTA to the bottom */
    gap: 2rem;
}

.team-meta-group {
    /* holds the 4 meta items together as a unit at the top */
}

.team-meta-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 1.25rem 0;
    border-bottom: 1px solid #333333;
}

.team-meta-item:first-child {
    padding-top: 0;
}

.team-meta-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.team-meta-label {
    color: #aaaaaa;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.team-meta-item strong {
    color: #c9a84c;
    font-size: 1rem;
    font-weight: 700;
    text-align: right;
}

/* CTA anchor at the bottom of the meta card */
.team-meta-cta {
    padding-top: 1.5rem;
    border-top: 1px solid #333333;
}

.team-meta-cta-label {
    color: #c9a84c;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 0.65rem;
}

.team-meta-cta-line {
    color: #cccccc;
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0 0 1.25rem;
}

.team-meta-cta-line strong {
    color: #ffffff;
    font-weight: 700;
}

.team-meta-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.25rem;
    background: #c9a84c;
    color: #080808;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s ease, color 0.2s ease;
    width: 100%;
}

.team-meta-cta-button:hover,
.team-meta-cta-button:focus {
    background: #ffffff;
    color: #080808;
}

/* Mobile */
@media (max-width: 900px) {
    .about-team {
        padding: 80px 0;
    }
    .about-team-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }
}

@media (max-width: 500px) {
    .team-meta-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }
    .team-meta-item strong {
        text-align: left;
    }
}


/* -----------------------------------------------------------------
   4.  NOT-FOR LIST  -  negative positioning
       Light section. 5 cards, each titled "We don't ___".
   ----------------------------------------------------------------- */

.about-notfor {
    padding: 100px 0;
    background: #111111;
    border-bottom: 1px solid #333333;
}

.about-notfor .section-header {
    max-width: 850px;
    margin: 0 auto 60px;
    text-align: center;
}

.about-notfor .section-header h2 {
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 1rem;
}

.about-notfor .section-intro {
    color: #aaaaaa;
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 650px;
    margin: 0 auto;
}

.notfor-list {
    max-width: 950px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.notfor-item {
    padding: 1.75rem 1.5rem;
    background: #080808;
    border: 1px solid #333333;
    border-left: 3px solid #555;
    border-radius: 0 4px 4px 0;
    transition: border-left-color 0.2s ease;
}

.notfor-item:hover {
    border-left-color: #c9a84c;
}

/* Make the 5th item span full width so the grid stays balanced */
.notfor-item:nth-child(5) {
    grid-column: 1 / -1;
}

.notfor-item h3 {
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.85rem;
}

.notfor-item p {
    color: #aaaaaa;
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

/* Mobile */
@media (max-width: 800px) {
    .about-notfor {
        padding: 70px 0;
    }
    .notfor-list {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .notfor-item:nth-child(5) {
        grid-column: auto;
    }
}


/* -----------------------------------------------------------------
   5.  FINAL CTA ACTIONS  -  closing section button pair
   ----------------------------------------------------------------- */

.about-final-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 2rem;
    align-items: center;
    justify-content: center;        /* center the button pair to match the centered text above */
}

.about-position-inner .about-closing-line {
    margin: 1.5rem auto 0;          /* auto left/right centers the max-width block */
    padding-top: 1.5rem;
    border-top: 1px solid #999999;
    color: #1A1A1A;
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 620px;
    font-weight: 500;
    text-align: center;             /* explicit center to match surrounding content */
}

@media (max-width: 700px) {
    .about-final-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .about-final-actions .btn,
    .about-final-actions .test-button {
        width: 100%;
        text-align: center;
    }
}


/* -----------------------------------------------------------------
   6.  SCARCITY STRONG TAG  -  ensure the slots-remaining line
       in the "Where we're going" section renders in gold
   ----------------------------------------------------------------- */

.about-position-inner p strong {
    color: #c9a84c;
    font-weight: 700;
}


/* -----------------------------------------------------------------
   7.  Accessibility & prefers-reduced-motion
   ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .pivot-stage,
    .notfor-item {
        transition: none;
    }
}


/* -----------------------------------------------------------------
   8.  Print styles
   ----------------------------------------------------------------- */

@media print {
    .pivot-stage,
    .notfor-item,
    .about-lesson-stat,
    .about-team-meta {
        background: #FFFFFF !important;
        color: #1A1A1A !important;
        border-color: #1A1A1A !important;
    }
    .pivot-year,
    .pivot-body h3,
    .lesson-stat-number,
    .team-meta-item strong,
    .about-position-inner p strong {
        color: #1A1A1A !important;
    }
    .pivot-body p,
    .about-lesson p,
    .about-team p,
    .notfor-item p,
    .lesson-stat-label {
        color: #333333 !important;
    }
}