/* ============================================================
   FloreData — Landing Section 2 (About)
   Pixel-perfect against:
     floredata/design/specs/landing-section2.md
     floredata/design/ai-renders/section2-lossless-1.png
   ============================================================ */

.fd-section--about {
    background: var(--wp--preset--color--background);
    padding: 68px 40px;
}

.fd-about__grid {
    max-width: 1440px;  /* was 1600 — align to header pill (1441px) */
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;           /* natural flow per .ai — buttons NOT aligned at bottom */
}

/* --- Left column --- */

.fd-about__left {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
}

.fd-about__left .fd-eyebrow--sage {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 20px 6px 6px;          /* tight left, wider right — badge hugs left edge */
    background: var(--wp--preset--color--sage);
    color: var(--wp--preset--color--growth);
    border-radius: 999px;
    font-family: var(--wp--preset--font-family--satoshi);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    line-height: 1;
}

.fd-eyebrow__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: var(--wp--preset--color--growth);    /* dark teal circle */
    border-radius: 50%;
    color: #ffffff;                                  /* pure white icon — high contrast */
}

.fd-eyebrow__badge svg {
    width: 18px;
    height: 18px;
    color: inherit;
    fill: currentColor;
}

.fd-eyebrow__text { display: inline-block; }

.fd-about__headline {
    font-family: var(--wp--preset--font-family--satoshi);
    margin: 0;
    line-height: 1.04;
    color: var(--wp--preset--color--text);
}

.fd-about__brand {
    display: block;
    font-weight: 700;
    font-style: normal;                 /* .ai: "FloreData" is upright, not italic */
    font-size: clamp(3rem, 2rem + 4vw, 5.96875rem); /* 48px → 95.5px */
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 4px;
}

.fd-about__lead {
    display: block;
    font-weight: 300;
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.75rem); /* 32px → 60px */
    letter-spacing: -0.01em;
    line-height: 1.08;
}

.fd-about__hilite {
    font-weight: 700;
    font-style: italic;
    background: var(--wp--preset--color--sage);   /* .ai: Sage #e2eed9 highlight */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 0 8px;
    border-radius: 6px;
}

/* --- Soft pill button (Bloom bg, dark text, dark circle arrow) --- */

.fd-btn--soft {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--wp--preset--color--mulberry);   /* #d6bbef */
    color: var(--wp--preset--color--text);
    font-family: var(--wp--preset--font-family--satoshi);
    font-weight: 700;
    font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1.21875rem); /* 14px → 19.5px */
    padding: 10px 14px 10px 26px;
    border-radius: 999px;
    border: none;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    min-width: max-content;
    flex-shrink: 0;
    transition: background-color 0.15s ease, transform 0.15s ease;
    /* NOTE: no margin-top — this is a GLOBAL .fd-btn--soft rule; a stray top-margin
       here inflated button-row heights site-wide (in an align-items:stretch row the
       sibling without the margin stretched taller). Spacing comes from the container. */
}

.fd-btn--soft > span {
    white-space: nowrap !important;
    flex-shrink: 0;
    word-break: keep-all;
}

.fd-btn--soft:hover {
    background: var(--wp--preset--color--primary-soft);
    color: var(--wp--preset--color--text);
    transform: translateY(-1px);
}

.fd-btn--soft em { font-style: italic; }

.fd-btn-arrow {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-block;
    transition: transform 0.15s ease;
}

.fd-btn--soft:hover .fd-btn-arrow { transform: translateX(3px); }

/* Rose Milk pink variant (Meet the team) */
.fd-btn--rose {
    background: var(--wp--preset--color--rose-milk);
}
.fd-btn--rose:hover {
    background: var(--wp--preset--color--mulberry);
    color: var(--wp--preset--color--text);
}

/* --- Right column --- */

.fd-about__right {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-top: 48px;
}

.fd-about__lead-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.fd-about__mark {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--wp--preset--color--sage);
    border-radius: 50%;
    box-sizing: border-box;
    margin-top: 2px;
    overflow: hidden;
}

/* The PNG carries ~24% transparent margin, so scale it past the circle and
   clip — the flower mark then fills ~72% of the disc, as measured in the .ai
   (leaves a comfortable sage margin ring). */
.fd-about__mark img {
    width: 62px;
    height: 62px;
    max-width: none;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
}

.fd-about__intro {
    font-family: var(--wp--preset--font-family--satoshi);
    font-size: var(--wp--preset--font-size--subtitle); /* 18 → 30px */
    font-weight: 600;                  /* .ai: Semibold, lighter than before */
    line-height: 1.18;
    color: #151515;                    /* match body ink (was pure #000) */
    margin: 0;
}

.fd-about__body {
    font-family: var(--wp--preset--font-family--satoshi);
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem); /* 16 → 24px */
    font-weight: 400;                  /* .ai: Regular, not semibold */
    line-height: 1.5;
    color: #151515;
    margin: 0;
    max-width: 60ch;
}

.fd-about__rule {
    border: 0;
    border-top: 1px solid var(--wp--preset--color--primary-soft);  /* .ai: lilac (Grape Soda #a995fc) */
    margin: 12px 0 8px;
    width: 100%;
}

.fd-about__cta-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

.fd-about__avatars {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.fd-about__avatars li {
    display: inline-block;
    margin-left: -12px;
}

.fd-about__avatars li:first-child { margin-left: 0; }

.fd-about__avatars li img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid var(--wp--preset--color--background);
    object-fit: cover;                  /* portrait photos crop-fit, not stretch (matches services chip) */
    display: block;
}

.fd-about__cta-row .fd-btn--soft { margin-top: 0; }

/* two-CTA row under the headline (Geetha 2026-06-18: purple + orange "Let's Get Started") */
.fd-about__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.fd-about__btns .fd-btn--soft { margin-top: 0; }

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

@media (max-width: 1024px) {
    .fd-about__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .fd-section--about { padding: 64px 24px; }
}

@media (max-width: 640px) {
    .fd-section--about { padding: 48px 18px; }
    .fd-about__brand { font-size: 2.75rem; }
    .fd-about__lead { font-size: 1.875rem; }

    /* Sandro 2026-06-17: centre the whole About block on mobile + centre the
       "Let's Get Started" CTA (was left-aligned ragged) */
    .fd-about__left  { align-items: center; text-align: center; }
    .fd-about__right { align-items: center; text-align: center; padding-top: 8px; }
    .fd-about__headline { text-align: center; }

    .fd-about__lead-row { flex-direction: column; align-items: center; gap: 12px; }
    .fd-about__body { max-width: 46ch; }

    /* both soft pills → equal, centred, full-width-capped (site-wide mobile button standard) */
    .fd-about__left .fd-btn--soft,
    .fd-about__cta-row .fd-btn--soft {
        width: 100%;
        max-width: 300px;
        justify-content: center;
        align-self: center;
    }

    .fd-about__cta-row { flex-direction: column; align-items: center; gap: 16px; }

    /* two-CTA row stacks + centres on mobile */
    .fd-about__btns { flex-direction: column; align-items: center; gap: 12px; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .fd-btn--soft,
    .fd-arrow--dark {
        transition: none !important;
    }
    .fd-btn--soft:hover { transform: none; }
    .fd-btn--soft:hover .fd-arrow--dark { transform: none; }
}