/* =================================================================
   HEADBRID HOMEPAGE ADDITIONS  /  headbrid-home-additions.css
   =================================================================
   Companion stylesheet for the pre-revenue pivot elements added
   to index.php. Loaded AFTER test-home.css (injected in <body>) so
   these rules win without needing !important.

   Scope:
     1. .hb-not-for           - "Not for: e-commerce, restaurants..."
     2. .test-scarcity        - "3 founding clients / 2 slots remaining"
     3. .home-microcopy       - small muted helper text under sections
     4. .home-final-cta-inner .test-scarcity  - final-CTA variant

   Brand palette (matches existing site):
     - charcoal/black background:  #1A1A1A (used in hero)
     - safety yellow accent:       #F4A800
     - body text on light:          #262626
     - muted grey for side notes:   #666
     - soft grey surface:           #F7F7F7
   ================================================================= */


/* -----------------------------------------------------------------
   1.  .hb-not-for  -  the "Not For" qualifier line
       Sits directly below the three audience cards. Visually
       subordinate (italic, muted, soft grey background, thin left
       border) so it reads as "quiet confidence" rather than a
       headline or a warning.

       Layout intent:
         - Centered, narrower than the 3-card grid above
         - Italic to distinguish from regular body copy
         - Soft grey box so it doesn't disappear into white space
         - 3px grey left border = "this is a side note"
   ----------------------------------------------------------------- */

.hb-not-for {
    max-width: 760px;
    margin: 2.5rem auto 0;
    padding: 1rem 1.5rem;
    border-left: 3px solid #999;
    background: #F7F7F7;
    font-style: italic;
    color: #666;
    font-size: 0.95em;
    line-height: 1.6;
    border-radius: 0 4px 4px 0;
}

.hb-not-for strong {
    font-style: normal;       /* keep the "Not for:" label upright + bold */
    color: #444;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Mobile: keep readable on small screens */
@media (max-width: 640px) {
    .hb-not-for {
        margin: 1.75rem 1rem 0;
        padding: 0.85rem 1.1rem;
        font-size: 0.92em;
    }
}


/* -----------------------------------------------------------------
   1b.  .hb-audience-card .hb-pain-list  -  gap fix
        Removes the unsightly ~100–120px gap that appears between
        the subtitle paragraph and the bullet list inside Cards 1
        and 2 of the audience section. The original CSS (loaded by
        include/header.php) applies large default top margin/padding
        to .hb-pain-list. Because we cannot see or modify that file
        directly, we escalate to !important here to guarantee the
        override wins the cascade regardless of what the original
        rule does.

        Also applies the same tightening to .hb-trade-list in Card 3
        for consistency, even though Card 3 currently has minimal gap.
   ----------------------------------------------------------------- */

.hb-audience-card .hb-pain-list,
.hb-audience-card .hb-trade-list {
    margin-top: 0.75rem !important;     /* tight, intentional gap from subtitle */
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Tighten spacing between individual bullet items too -
   if the original CSS uses <li> with large margins, the bullets
   themselves can look stretched out. */
.hb-audience-card .hb-pain-list li,
.hb-audience-card .hb-trade-list li {
    margin-top: 0.65rem !important;
    margin-bottom: 0.65rem !important;
}


/* -----------------------------------------------------------------
   2.  .test-scarcity  -  the scarcity line in the hero
       "We're taking on 3 founding trade clients this quarter.
        2 slots remaining."

       Layout intent:
         - Subtle, not aggressive - scarcity should feel honest,
           not like a late-night TV commercial
         - Yellow accent on the strong tags matches the CTA button
         - Below the hero CTA buttons, separated by a hairline
         - Link styled as an accent (yellow) so it's clickable
   ----------------------------------------------------------------- */

.test-scarcity {
    margin: 2.25rem auto 0;
    padding: 1rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.95em;
    line-height: 1.55;
    max-width: 640px;
    text-align: center;          /* centered - matches user request */
}

/* On dark hero backgrounds (the existing hero has a dark photo overlay) */
.test-hero .test-scarcity {
    color: rgba(255, 255, 255, 0.92);
}

.test-scarcity strong {
    color: #F4A800;                 /* safety yellow - matches CTA */
    font-weight: 700;
}

.test-scarcity a {
    color: #F4A800;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
    transition: color 0.15s ease;
}

.test-scarcity a:hover,
.test-scarcity a:focus {
    color: #FFFFFF;
    text-decoration: underline;
}

/* When scarcity hits 0, the page swaps in a "Join the waitlist" link.
   Same styling - no new class needed because the markup is the same. */

/* Mobile adjustments */
@media (max-width: 640px) {
    .test-scarcity {
        margin: 1.5rem auto 0;
        padding: 0.85rem 0 0;
        font-size: 0.92em;
    }
}


/* -----------------------------------------------------------------
   2b.  .test-secondary-cta  -  the "not ready for an audit yet?"
        secondary link below the scarcity line. Sits below the
        scarcity line in the hero, offering the free WhatsApp Business
        setup guide as a soft-option alternative for visitors not
        ready to book a foundation audit call.

        Layout intent:
          - Subtle: muted grey italic, not a button-style link
          - Centered, narrower than the scarcity line above
          - Gold link (matches brand accent) so it's clickable
   ----------------------------------------------------------------- */

.test-secondary-cta {
    margin: 1rem auto 0;
    max-width: 540px;
    text-align: center;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.88em;
    line-height: 1.55;
    font-style: italic;
}

.test-secondary-cta a {
    color: #c9a84c;
    font-weight: 600;
    font-style: normal;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s ease;
}

.test-secondary-cta a:hover,
.test-secondary-cta a:focus {
    color: #ffffff;
}

@media (max-width: 640px) {
    .test-secondary-cta {
        margin: 0.85rem auto 0;
        font-size: 0.85em;
        max-width: 90%;
    }
}


/* -----------------------------------------------------------------
   3.  Final CTA scarcity variant
       The final CTA section has a dark background (matches the hero
       aesthetic). The scarcity line there already inherits from
       .test-scarcity above, but we add a touch of extra spacing
       because the surrounding copy is denser.
   ----------------------------------------------------------------- */

.home-final-cta-inner p {
    /* In the final CTA paragraph, scarcity lives inline mid-paragraph
       rather than as its own line. Make sure the strong tags pop. */
    line-height: 1.65;
}

.home-final-cta-inner p strong {
    color: #F4A800;
    font-weight: 700;
}

.home-final-cta-inner p a {
    color: #F4A800;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* -----------------------------------------------------------------
   4.  .home-microcopy  -  small helper text under section blocks
       "Most new trade clients start with Stage 1. The audit will
        tell you which stage is right for you."
       Used in How We Work, What You Get, and the new What This Costs
       section. Existing class - only refining if it doesn't conflict.
   ----------------------------------------------------------------- */

.home-microcopy {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.92em;
    color: #666;
    line-height: 1.6;
    font-style: italic;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.home-microcopy strong {
    font-style: normal;
    color: #1A1A1A;
    font-weight: 700;
}

/* Mobile */
@media (max-width: 640px) {
    .home-microcopy {
        margin-top: 1.5rem;
        padding-top: 1rem;
        font-size: 0.88em;
    }
}


/* -----------------------------------------------------------------
   4b.  .home-client-quote  -  testimonial blockquote in the First
        Client Story section. Sits between the Result paragraph and
        the Timeline/Investment microcopy.

        The case study section uses a dark background (#111111), so
        the quote text needs to be light, not dark. The blockquote
        uses a yellow left border (brand accent), faint yellow tint,
        and italic styling.

   ----------------------------------------------------------------- */

.home-client-quote {
    margin: 2rem 0;
    padding: 1.5rem 1.75rem;
    border-left: 4px solid #c9a84c;          /* brand gold from test-home.css */
    background: rgba(201, 168, 76, 0.06);    /* very faint gold tint on dark */
    font-size: 1.05em;
    line-height: 1.65;
    font-style: italic;
    color: #e8e8e8;                          /* near-white on dark bg */
    border-radius: 0 6px 6px 0;
}

.home-client-quote cite {
    display: block;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(201, 168, 76, 0.25);
    font-size: 0.88em;
    font-style: normal;
    color: #aaaaaa;
    text-align: right;
    line-height: 1.45;
}

.home-client-quote cite strong {
    color: #c9a84c;                          /* gold for the client name */
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Mobile */
@media (max-width: 640px) {
    .home-client-quote {
        margin: 1.5rem 0;
        padding: 1.25rem 1.1rem;
        font-size: 1em;
    }
    .home-client-quote cite {
        text-align: left;
        margin-top: 0.85rem;
        padding-top: 0.75rem;
    }
}


/* -----------------------------------------------------------------
   4c.  First Client Story - visual redesign
        New visual elements for the redesigned case study section.

        Components:
          .home-story-stat             - highlight stat callout block
          .home-story-stat-number      - the big yellow number (R28,000)
          .home-story-stat-label       - caption under the number
          .home-story-block            - labeled Before/What/Result blocks
          .home-story-block-label      - the yellow label on each block
          .home-story-milestones        - right column wrapper
          .home-story-milestone         - single milestone card (01/02/03/04)
          .home-story-milestone-num     - the number circle/badge
          .home-story-milestone-body    - title + description inside the card
          .home-story-milestone-highlight  - visually emphasised last card
   ----------------------------------------------------------------- */

/* HIGHLIGHT STAT - the single most powerful proof element on the page */
.home-story-stat {
    margin: 2rem 0 2.5rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, rgba(201, 168, 76, 0.10), rgba(201, 168, 76, 0.03));
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-left: 4px solid #c9a84c;
    border-radius: 6px;
}

.home-story-stat-number {
    font-size: clamp(2.4rem, 5vw, 3.2rem);
    font-weight: 700;
    color: #c9a84c;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 0.6rem;
}

.home-story-stat-label {
    color: #cccccc;
    font-size: 0.95rem;
    line-height: 1.6;
}

.home-story-stat-label strong {
    color: #ffffff;
    font-weight: 700;
}

/* LABELED BLOCKS - Before / What we did / Result */
.home-story-block {
    margin-bottom: 1.5rem;
    padding-left: 1.25rem;
    border-left: 2px solid #333333;
    transition: border-color 0.2s ease;
}

.home-story-block:hover {
    border-left-color: #c9a84c;
}

.home-story-block-label {
    display: inline-block;
    margin: 0 0 0.5rem;
    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;
}

.home-story-block p {
    margin: 0;
    color: #cccccc;
    font-size: 0.98rem;
    line-height: 1.7;
}

.home-story-block p strong {
    color: #ffffff;
    font-weight: 700;
}

.home-story-block p em {
    color: #c9a84c;
    font-style: italic;
}

/* MILESTONE TIMELINE - right column */
.home-story-milestones {
    border-top: 1px solid #333333;
    padding-top: 0;
}

.home-story-milestone {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 1.5rem;
    padding: 1.75rem 0;
    border-bottom: 1px solid #333333;
    transition: background 0.2s ease;
}

.home-story-milestone:last-child {
    border-bottom: 0;
}

.home-story-milestone-num {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    width: 56px;
    border: 1.5px solid #c9a84c;
    border-radius: 50%;
    color: #c9a84c;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: #080808;
    font-family: Arial, Helvetica, sans-serif;
}

.home-story-milestone-body h3 {
    margin: 0.5rem 0 0.5rem;        /* small top margin for vertical centering */
    color: #ffffff;
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 700;
}

.home-story-milestone-body p {
    margin: 0;
    color: #aaaaaa;
    font-size: 0.92rem;
    line-height: 1.65;
}

.home-story-milestone-body p strong {
    color: #c9a84c;
    font-weight: 700;
}

/* HIGHLIGHTED last milestone - the "First enquiry" win */
.home-story-milestone-highlight {
    background: rgba(201, 168, 76, 0.05);
    margin: 0 -1rem;
    padding: 1.75rem 1rem;
    border-radius: 6px;
    border-bottom: 1px solid rgba(201, 168, 76, 0.25) !important;
}

.home-story-milestone-highlight .home-story-milestone-num {
    background: #c9a84c;
    color: #080808;
    border-color: #c9a84c;
}

.home-story-milestone-highlight .home-story-milestone-body h3 {
    color: #c9a84c;
}

.home-story-milestone-highlight .home-story-milestone-body p {
    color: #e8e8e8;
}

/* Mobile adjustments for the case study section */
@media (max-width: 800px) {

    .home-story-stat {
        margin: 1.5rem 0 2rem;
        padding: 1.25rem 1.25rem;
    }

    .home-story-block {
        padding-left: 1rem;
        margin-bottom: 1.25rem;
    }

    .home-story-milestone {
        grid-template-columns: 50px 1fr;
        gap: 1.1rem;
        padding: 1.5rem 0;
    }

    .home-story-milestone-num {
        height: 50px;
        width: 50px;
        font-size: 0.95rem;
    }

    .home-story-milestone-body h3 {
        font-size: 1.15rem;
    }

    .home-story-milestone-highlight {
        margin: 0 -0.5rem;
        padding: 1.5rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .home-story-milestone {
        grid-template-columns: 42px 1fr;
        gap: 0.85rem;
        padding: 1.25rem 0;
    }
    .home-story-milestone-num {
        height: 42px;
        width: 42px;
        font-size: 0.88rem;
    }
}


/* -----------------------------------------------------------------
   5.  Accessibility & prefers-reduced-motion
       Remove any transition animations for users who prefer reduced
       motion. Scarcity links have a 0.15s color transition - disable.
   ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .test-scarcity a,
    .home-final-cta-inner p a,
    .home-story-block,
    .home-story-milestone {
        transition: none;
    }
}


/* -----------------------------------------------------------------
   6.  Print styles  -  make the scarcity / not-for lines sensible
       when a trade owner prints the page (some still do, to show
       a partner or spouse).
   ----------------------------------------------------------------- */

@media print {
    .test-scarcity,
    .hb-not-for {
        color: #1A1A1A !important;
        background: #FFFFFF !important;
        border-left-color: #1A1A1A !important;
    }

    .test-scarcity strong,
    .hb-not-for strong,
    .home-final-cta-inner p strong {
        color: #1A1A1A !important;
    }

    .test-scarcity a,
    .home-final-cta-inner p a {
        color: #1A1A1A !important;
        text-decoration: underline;
    }
}