:root {
    --navy:         #1c1562;
    --navy-mid:     #2a2080;
    --navy-light:   #3d37a0;
    --navy-bg:      #eeedf8;
    --navy-pale:    #f5f4fc;
    --green:        #3c9539;
    --green-mid:    #4aad47;
    --green-light:  #6dc46a;
    --green-bg:     #eaf6ea;
    --green-pale:   #f3fbf3;
    --cream:        #FAFAFA;
    --warm-white:   #FFFFFF;
    --text-dark:    #1a1a2e;
    --text-mid:     #4a4a6a;
    --text-soft:    #8888aa;
    --border:       #e2e2f0;
    --shadow:       rgba(28, 21, 98, 0.08);
    --shadow-green: rgba(60, 149, 57, 0.12);
    --gold:         #3c9539;
    --gold-light:   #eaf6ea;
    --pastel-navy:      #b8b5e0;
    --pastel-navy-2:    #d4d2ef;
    --pastel-green:     #a8d8a7;
    --pastel-green-2:   #c8e9c7;
    --pastel-mint:      #d6f0d5;
    --pastel-lavender:  #e8e7f8;
    --pastel-sky:       #dde8f5;
    --pastel-sage:      #e2efe2;
      --purple: #6440FB;         /* deep signature */
            --purple-soft: #a68eff;     /* light variant */
            --purple-mist: #eee9ff;     /* very light background variant */

            --green: #007237;           /* deep green */
            --green-soft: #5bb17b;      /* light variant */
            --green-mist: #e1f3e6;       /* very light mint */

            --warm-bg: #F0EEDF;          /* warm off-white base */
            --warm-light: #faf9f2;        /* lighter variant (almost white) */
            --warm-accent: #e0ddcc;        /* deeper warm for lines */
  }

.why-section {
    background: var(--cream);
    position: relative;
    overflow: hidden;
    /*padding: 100px 0;*/
  }
  .why-section::before {
    content: '';
    position: absolute;
    top: -160px; right: -160px;
    width: 560px; height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--pastel-lavender) 0%, transparent 62%);
    pointer-events: none;
  }
  .why-section::after {
    content: '';
    position: absolute;
    bottom: -120px; left: -120px;
    width: 440px; height: 440px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--pastel-mint) 0%, transparent 62%);
    pointer-events: none;
  }

  .why-title-wrap {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 30px;
    position: relative;
    z-index: 1;
  }
  .why-title-wrap h2 em {
    /*font-style: italic;*/
    background: linear-gradient(135deg, var(--green) 30%, var(--navy-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .why-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
    z-index: 1;
    background: var(--warm-white);
    border: 1px solid var(--border);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 8px 48px var(--shadow);
  }
  .why-card {
    padding: 44px 32px 40px;
    position: relative;
    border: none;
    border-radius: 0;
    background: transparent;
    transition: background 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Divider between cards */
    border-right: 1px solid var(--border);
  }
  .why-card:last-child { border-right: none; }

  .why-card:hover {
    background: var(--navy-pale);
    transform: none;
    box-shadow: none;
  }

  /* Remove old pseudo stripe */
  .why-card::before { display: none; }
  .why-card::after  { display: none; }

  /* ── Icon circle ───────────────────────────────────────── */
  .why-card .card-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    font-size: 25px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  }
  .why-card:hover .card-icon { transform: scale(1.1) rotate(-4deg); }

  .why-card:nth-child(1) .card-icon { background: var(--pastel-lavender); }
  .why-card:nth-child(2) .card-icon { background: var(--pastel-mint); }
  .why-card:nth-child(3) .card-icon { background: var(--pastel-peach, #fde8df); }
  .why-card:nth-child(4) .card-icon { background: var(--pastel-sky); }

  /* Coloured ring on hover */
  .why-card .card-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
  }
  .why-card:nth-child(1):hover .card-icon::after { border-color: var(--pastel-navy); }
  .why-card:nth-child(2):hover .card-icon::after { border-color: var(--pastel-green); }
  .why-card:nth-child(3):hover .card-icon::after { border-color: #f4a987; }
  .why-card:nth-child(4):hover .card-icon::after { border-color: var(--pastel-navy-2); }
  .why-card p {
    color: var(--text-mid);
    line-height: 1.82;
    margin: 0;
    flex: 1;
  }
  .why-card .card-tag {
    display: inline-flex;
    align-items: center;
        font-size: 12px;
    gap: 6px;
    margin-top: 24px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 30px;
    border: 1px solid transparent;
  }
  .why-card .card-tag::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .why-card:nth-child(1) .card-tag { color: var(--navy);     background: var(--pastel-lavender); border-color: var(--pastel-navy-2); }
  .why-card:nth-child(1) .card-tag::before { background: var(--navy-light); }

  .why-card:nth-child(2) .card-tag { color: var(--green);    background: var(--pastel-mint);     border-color: var(--pastel-green-2); }
  .why-card:nth-child(2) .card-tag::before { background: var(--green); }

  .why-card:nth-child(3) .card-tag { color: #c0602c;         background: #fde8df;                border-color: #f8d0c0; }
  .why-card:nth-child(3) .card-tag::before { background: #f4a987; }

  .why-card:nth-child(4) .card-tag { color: var(--navy-mid); background: var(--pastel-sky);      border-color: #c4d9ec; }
  .why-card:nth-child(4) .card-tag::before { background: var(--navy-mid); }

  /* ── Footer banner ─────────────────────────────────────── */
  .why-footer-banner {
    margin-top: 32px;
    background: linear-gradient(135deg, var(--navy-pale) 0%, var(--green-pale) 100%);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 22px 40px;
    text-align: center;
    position: relative;
    z-index: 1;
  }
  .why-footer-banner p {
    color: var(--text-mid);
    line-height: 1.6;
    margin: 0;
    font-style: italic;
  }
  .why-footer-banner strong {
    color: var(--navy);
    font-style: normal;
  }

  /* ── Responsive ────────────────────────────────────────── */
  @media (max-width: 1024px) {
    .why-cards { grid-template-columns: repeat(2, 1fr); border-radius: 24px; }
    .why-card:nth-child(2) { border-right: none; }
    .why-card:nth-child(1),
    .why-card:nth-child(2) { border-bottom: 1px solid var(--border); }
  }
  @media (max-width: 640px) {
    .why-section { padding: 72px 0; }
    .why-cards { grid-template-columns: 1fr; border-radius: 20px; }
    .why-card { border-right: none; border-bottom: 1px solid var(--border); padding: 32px 24px; }
    .why-card:last-child { border-bottom: none; }
    .why-footer-banner { padding: 18px 24px; }
  }
  
  /*our experties*/

    .expertise-section{
    background:var(--warm-white);
    position:relative;
    overflow:hidden;
    padding:40px 0 40px
    }

    .expertise-section::before,
    .expertise-section::after{
    content:'';
    position:absolute;
    border-radius:50%;
    pointer-events:none
    }

    .expertise-section::before{
    top:-160px;right:-160px;
    width:600px;height:600px;
    background:radial-gradient(circle,var(--pastel-lavender)0%,transparent 60%)
    }

    .expertise-section::after{
    bottom:-120px;left:-120px;
    width:500px;height:500px;
    background:radial-gradient(circle,var(--pastel-mint)0%,transparent 60%)
    }

    .expertise-inner{
    position:relative;
    z-index:1;
    max-width:1300px;
    margin:auto;
    padding:0 40px
    }

    /* TOP */
    .expertise-top{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:end;
    gap:40px;
    margin-bottom:72px
    }

    .expertise-eyebrow{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:16px
    }

    .expertise-eyebrow-line{
    width:48px;height:2px;
    background:linear-gradient(90deg,var(--green),var(--pastel-green));
    border-radius:2px
    }

    .expertise-eyebrow span{
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--green)
    }

    .expertise-top h2{
    color:var(--navy);
    line-height:1.08
    }

    .expertise-top h2 em{
    background:linear-gradient(135deg,var(--green),var(--navy-light));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent
    }

    /* TAGLINE */
    .expertise-tagline{text-align:right;max-width:280px}

    .expertise-tagline p{
    color:var(--text-soft);
    line-height:1.7;
    font-style:italic
    }

    .expertise-tagline strong{
    display:block;
    font-size:28px;
    font-weight:700;
    color:var(--navy);
    margin-bottom:6px
    }

    .expertise-tagline strong span{color:var(--green)}

    /* BENTO GRID */
    .stats-bento{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:16px;
    margin-bottom:60px
    }

    .bento-card{
    border-radius:22px;
    padding:36px 32px;
    position:relative;
    overflow:hidden;
    border:1px solid transparent;
    transition:.3s
    }

    .bento-card:hover{
    transform:translateY(-5px);
    box-shadow:0 22px 56px rgba(28,21,98,.1)
    }

    /* GRID POSITIONS */
    .bento-card-1{grid-column:1/5}
    .bento-card-2{grid-column:5/9}
    .bento-card-3{grid-column:9/13}
    .bento-card-4{grid-column:1/7}
    .bento-card-5{grid-column:7/13}

    /* COLORS */
    .bento-card-1{background:var(--pastel-lavender);border-color:var(--pastel-navy-2)}
    .bento-card-2{background:var(--pastel-mint);border-color:var(--pastel-green-2)}
    .bento-card-3{background:#fde7dd;border-color:#f8d0c0}
    .bento-card-4{background:var(--navy);border-color:var(--navy-mid)}
    .bento-card-5{background:#f7efc5;border-color:#f0e4a8}

    /* CORNER BLOB */
    .bento-card::after{
    content:'';
    position:absolute;
    bottom:-40px;right:-40px;
    width:140px;height:140px;
    border-radius:50%;
    transition:.4s
    }

    .bento-card:hover::after{transform:scale(1.15)}

    .bento-card-1::after{background:radial-gradient(circle,var(--pastel-navy-2),transparent)}
    .bento-card-2::after{background:radial-gradient(circle,var(--pastel-green-2),transparent)}
    .bento-card-3::after{background:radial-gradient(circle,#fad0bc,transparent)}
    .bento-card-4::after{background:radial-gradient(circle,var(--navy-light),transparent)}
    .bento-card-5::after{background:radial-gradient(circle,#f6e89a,transparent)}
    .bento-number{
    font-size:clamp(48px,6vw,72px);
    font-weight:300;
    line-height:1;
    margin-bottom:6px
    }

    .bento-card-4 .bento-number{color:#fff}
    .bento-card:not(.bento-card-4) .bento-number{color:var(--navy)}

    .bento-number sup{
    font-size:.42em;
    font-weight:600;
    vertical-align:super
    }

    /* LABEL */
    .bento-label{
    font-size:11px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    margin-bottom:10px
    }

    /* DESCRIPTION */
    .bento-desc{
    font-size:14px;
    line-height:1.7;
    color:var(--text-mid)
    }

    .bento-card-4 .bento-desc{color:rgba(255,255,255,.6)}

    /* NAVY CARD */
    .bento-card-4 .bento-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.15);
    padding:5px 14px;
    border-radius:20px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--pastel-green);
    margin-bottom:18px
    }

    .bento-card-4 .bento-badge::before{
    content:'';
    width:7px;height:7px;
    border-radius:50%;
    background:var(--green-light);
    box-shadow:0 0 0 3px rgba(109,196,106,.2)
    }

    .bento-card-4 .bento-quote{
    font-size:clamp(18px,2.5vw,24px);
    font-weight:300;
    font-style:italic;
    color:rgba(255,255,255,.85);
    line-height:1.45
    }

    /* ICON ROW */
    .bento-icons{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}

    .bento-icon-pill{
    display:inline-flex;
    align-items:center;
    gap:7px;
    background:rgba(255,255,255,.7);
    border:1px solid #e8d89a;
    padding:6px 14px 6px 10px;
    border-radius:30px;
    font-size:12px;
    color:var(--navy)
    }

    /* FOOTER */
    .expertise-footer{
    background:linear-gradient(135deg,var(--navy-pale),#f3fbf3);
    border:1px solid var(--border);
    border-radius:24px;
    padding:40px 52px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px
    }

    .expertise-footer-text p{
    font-size:clamp(18px,2.5vw,24px);
    font-weight:300;
    font-style:italic;
    color:var(--text-mid)
    }

    .expertise-footer-text strong{color:var(--navy)}

    .expertise-footer-dots{display:flex;gap:10px}

    .expertise-footer-dot{
    width:12px;height:12px;border-radius:50%
    }

    .expertise-footer-dot:nth-child(1){background:var(--pastel-navy)}
    .expertise-footer-dot:nth-child(2){background:var(--pastel-green)}
    .expertise-footer-dot:nth-child(3){background:#f6c4a8;opacity:.6}
    .expertise-footer-dot:nth-child(4){background:#f0e4a8;opacity:.5}

    /* ANIMATION */
    .fvp-fade{
    opacity:0;
    transform:translateY(22px);
    transition:.55s
    }
    .fvp-fade.visible{
    opacity:1;
    transform:translateY(0)
    }

    /* RESPONSIVE */
    @media(max-width:1024px){
    .stats-bento{grid-template-columns:repeat(2,1fr)}
    .bento-card-4{grid-column:1/3}
    }

    @media(max-width:768px){
    .expertise-top{grid-template-columns:1fr}
    .expertise-tagline{text-align:left;max-width:100%}
    .stats-bento{grid-template-columns:1fr}
    .bento-card{grid-column:1!important}
    .expertise-footer{flex-direction:column;align-items:flex-start;padding:32px}
    .expertise-inner{padding:0 24px}
    .expertise-section{padding:72px 0}
    }
    
    
    /*Our expert*/
      /* elegant section background – soft, airy, using warm as primary */
        .expert-section-elegant {
            background-color: var(--warm-light);
            background-image: radial-gradient(circle at 100% 0%, var(--purple-mist) 0%, transparent 40%),
                              radial-gradient(circle at 0% 100%, var(--green-mist) 0%, transparent 40%);
            padding: 5.5rem 0;
            position: relative;
        }

        /* very fine noise texture (optional) */
        .expert-section-elegant::after {
            content: "";
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJmIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBudW1PY3RhdmVzPSIzIiAvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNmKSIgb3BhY2l0eT0iMC4wMiIgLz48L3N2Zz4=');
            opacity: 0.25;
            pointer-events: none;
            z-index: 1;
        }

        .container {
            position: relative;
            z-index: 5;
        }

        /* header – elegant, minimal colour */
        .expert-heading-elegant h2 {
            font-weight: 600;
            color: #1a2936;
            letter-spacing: -0.02em;
        }
        .expert-heading-elegant h2 span {
            color: var(--purple);
            font-weight: 650;
            border-bottom: 2px solid var(--green-soft);
            padding-bottom: 2px;
        }
        .expert-heading-elegant .lead {
            color: #3e4f5e;
            max-width: 750px;
            margin: 0 auto;
            background: rgba(255,255,255,0.4);
            backdrop-filter: blur(2px);
            padding: 0.5rem 2rem;
            border-radius: 40px;
            font-weight: 350;
            font-size: 1.2rem;
        }

        /* card – very clean, subtle borders, no half/half */
        .expert-card-elegant {
            background: white;
            border-radius: 2rem;
            padding: 2rem 1.8rem 2rem 1.8rem;
            height: 100%;
            transition: all 0.25s ease;
            box-shadow: 0 12px 28px -15px rgba(0, 40, 30, 0.1);
            border: 1px solid rgba(220, 215, 200, 0.5);
            position: relative;
            overflow: hidden;
        }
        .expert-card-elegant:hover {
            box-shadow: 0 25px 35px -18px rgba(100, 64, 251, 0.18), 0 10px 20px -10px rgba(0,114,55,0.1);
            border-color: var(--purple-soft);
            transform: translateY(-6px);
        }

        /* small accent markers – not half/half, just fine details */
        .expert-card-elegant::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--purple) 0%, var(--green) 70%, transparent 95%);
            opacity: 0.3;
        }

        /* avatar circles – refined duotone using both colours but not harsh */
        .avatar-elegant {
            width: 76px;
            height: 76px;
            border-radius: 50%;
            background: linear-gradient(145deg, white, var(--warm-bg));
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            font-weight: 500;
            font-size: 2rem;
            color: var(--purple);
            border: 2px solid rgba(100, 64, 251, 0.2);
            box-shadow: 0 8px 14px -8px rgba(0,0,0,0.1);
            transition: 0.2s;
        }
        .expert-card-elegant:hover .avatar-elegant {
            border-color: var(--green-soft);
            color: var(--green);
            background: white;
            box-shadow: 0 10px 18px -10px var(--purple-soft);
        }

        /* name – deep purple, subtle */
        .expert-name-elegant {
            font-weight: 650;
            color: var(--purple);
            font-size: 1.9rem;
            letter-spacing: -0.02em;
            margin-bottom: 0.2rem;
        }
        /* title – green, but soft */
        .expert-title-elegant {
            font-weight: 500;
            color: var(--green);
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 0.9rem;
            border-left: 3px solid var(--purple-soft);
            padding-left: 0.9rem;
        }
        /* description – neutral dark grey */
        .expert-desc-elegant {
            color: #3a4956;
            line-height: 1.5;
            font-size: 0.98rem;
            margin-bottom: 1rem;
        }

        /* tiny tag – very subtle use of both colours */
        .tag-elegant {
            display: inline-block;
            background: var(--warm-bg);
            border-radius: 30px;
            padding: 0.25rem 1rem;
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--purple);
            border: 1px solid transparent;
            transition: 0.15s;
        }
        .expert-card-elegant:hover .tag-elegant {
            background: var(--purple-mist);
            color: var(--green);
            border-color: var(--green-soft);
        }

        /* CTA – elegant minimal, with refined arrow */
        .cta-elegant {
            margin-top: 4rem;
            text-align: center;
        }
        .cta-link-elegant {
            display: inline-flex;
            align-items: center;
            background: white;
            padding: 0.9rem 2.6rem;
            border-radius: 50px;
            font-weight: 550;
            font-size: 1.3rem;
            color: #2a3743;
            text-decoration: none;
            box-shadow: 0 6px 16px -8px rgba(0,0,0,0.1);
            border: 1px solid var(--warm-accent);
            transition: all 0.2s;
            backdrop-filter: blur(4px);
        }
        .cta-link-elegant i {
            font-size: 2rem;
            margin-left: 8px;
            color: var(--purple);
            transition: transform 0.2s, color 0.2s;
        }
        /* .cta-link-elegant:hover {
            border-color: var(--purple-soft);
            box-shadow: 0 16px 24px -16px var(--purple);
            background-color: white;
            color: var(--purple);
        }
        .cta-link-elegant:hover i {
            transform: translateX(6px);
            color: var(--green);
        } */

        /* very subtle divider with elegant colour touches */
        .divider-elegant {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 2rem;
            opacity: 0.6;
        }
        .divider-elegant span {
            height: 2px;
            border-radius: 2px;
        }
        .divider-elegant .line-purple {
            width: 60px;
            background: var(--purple-soft);
        }
        .divider-elegant .line-green {
            width: 30px;
            background: var(--green-soft);
        }
        .divider-elegant .line-warm {
            width: 60px;
            background: var(--warm-accent);
        }

        /* responsive */
        @media (max-width: 576px) {
            .expert-section-elegant { padding: 3rem 0; }
            .expert-name-elegant { font-size: 1.7rem; }
            .avatar-elegant { width: 66px; height: 66px; font-size: 1.8rem; }
        }
        
        
        
        /*Faq */
      
    .faq-section {
        background: var(--warm-white);
        position: relative;
    }
    .faq-section::before {
        content: '';
        position: absolute;
        top: 0; right: 0;
        width: 50%; height: 100%;
        background: var(--pastel-mint);
        clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
        pointer-events: none;
        opacity: 0.55;
    }

    .faq-inner {
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 80px;
        align-items: start;
        position: relative; z-index: 1;
    }

    .faq-left {
        position: sticky;
        top: 60px;
    }

    .faq-left h2 {
        line-height: 1.15;
        color: var(--navy);
        margin-bottom: 18px;
    }
    .faq-left h2 em {
        color: var(--green);
        opacity: 0.85;
    }

    .faq-left p {
        color: var(--text-mid);
        line-height: 1.8;
        margin-bottom: 32px;
    }

    .faq-cta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: var(--navy);
        color: #fff;
        padding: 13px 26px;
        border-radius: 50px;
        letter-spacing: 0.03em;
        cursor: pointer;
        border: none;
        transition: background 0.3s ease, transform 0.2s ease;
        text-decoration: none;
    }
    .faq-cta:hover {
        background: var(--green);
        transform: translateY(-2px);
    }

    .faq-cta-arrow {
        width: 20px; height: 20px;
        border: 1.5px solid rgba(255,255,255,0.55);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
    }

    .faq-item {
        border-bottom: 1px solid var(--border);
        overflow: hidden;
    }
    .faq-item:first-child { border-top: 1px solid var(--border); }

    .faq-question {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24px 0;
        cursor: pointer;
        gap: 20px;
        user-select: none;
    }

    .faq-question h3 {
        color: var(--navy);
        line-height: 1.5;
        flex: 1;
    }

    .faq-toggle {
        width: 32px; height: 32px;
        border-radius: 50%;
        border: 1.5px solid var(--pastel-navy);
        background: var(--navy-pale);
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
        color: var(--navy-mid);
        transition: all 0.3s ease;
    }

    .faq-item.open .faq-toggle {
        background: var(--pastel-green);
        border-color: var(--pastel-green-2);
        color: var(--navy);
        transform: rotate(45deg);
    }

    .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1);
    }
    .faq-item.open .faq-answer { max-height: 400px; }

    .faq-answer-inner { padding-bottom: 24px; }

    .faq-answer p {
        color: var(--text-mid);
        line-height: 1.85;
    }
    @media (max-width: 900px) {
        .fvp-container { padding: 0 24px; }
        .fvp-section { padding: 72px 0; }
        .why-header { grid-template-columns: 1fr; gap: 20px; }
        .why-cards  { grid-template-columns: 1fr; }
        .stats-grid { grid-template-columns: repeat(2, 1fr); }
        .expertise-top { flex-direction: column; align-items: flex-start; }
        .expertise-tagline p { text-align: left; }
        .faq-section::before { display: none; }
        .faq-inner { grid-template-columns: 1fr; gap: 44px; }
        .faq-left { position: static; }
    }
    @media (max-width: 560px) {
        .stats-grid { grid-template-columns: 1fr; }
        .why-card { padding: 30px 24px; }
    }
    .fvp-fade {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity 0.55s ease, transform 0.55s ease;
    }
    .fvp-fade.visible { opacity: 1; transform: translateY(0); }

/*our mission*/

.about-section {
  background: var(--warm-white);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

/* Subtle top-right quad blob */
.about-section::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pastel-lavender) 0%, transparent 65%);
  pointer-events: none;
}

/* ── Top eyebrow row ─────────────────────── */
.about-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 48px;
}
.about-eyebrow-row .flourish {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.about-eyebrow-row .flourish span {
  display: block; height: 2px;
  background: linear-gradient(90deg, var(--green), var(--pastel-green));
  border-radius: 2px;
}
.about-eyebrow-row .flourish span:first-child { width: 36px; }
.about-eyebrow-row .flourish span:last-child  { width: 18px; }
.about-eyebrow-row .flourish-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.about-eyebrow-row .section-label {
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
}
.about-since-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  border-radius: 30px;
  border: 1px solid var(--border);
  background: var(--navy-pale);
  color: var(--navy-mid);
  letter-spacing: 0.06em;
}
.about-since-badge strong { color: var(--navy); }

/* ── Main 2-col layout ───────────────────── */
.about-layout {
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 48px;
  align-items: start;
}

/* Left: large headline + mission block */
.about-left {}

.about-left h2 {
  color: var(--navy);
  line-height: 1.08;
  margin-bottom: 28px;
}
.about-left h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--green) 30%, var(--navy-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.about-mission {
  background: var(--navy-pale);
  border: 1px solid var(--pastel-navy-2);
  border-radius: 18px;
  padding: 28px 28px 28px 32px;
  position: relative;
}
.about-mission::before {
  content: '';
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--navy), var(--navy-light));
}
.about-mission h3 {
  color: var(--navy);
  margin-bottom: 10px;
}
.about-mission p {
  color: var(--text-mid);
  line-height: 1.8;
  margin: 0;
}

/* Right: stacked info panels */
.about-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-info-panel {
  border-radius: 18px;
  padding: 28px 28px 28px 32px;
  border: 1px solid var(--border);
  position: relative;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  overflow: hidden;
}
.about-info-panel:hover {
  transform: translateX(4px);
  box-shadow: 0 12px 40px var(--shadow);
}
.about-info-panel::before {
  content: '';
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 4px;
  border-radius: 4px;
}
.about-info-panel.green-panel {
  background: var(--green-pale);
  border-color: var(--pastel-green-2);
}
.about-info-panel.green-panel::before {
  background: linear-gradient(180deg, var(--green), var(--green-mid));
}

.about-info-panel.dark-panel {
  background: var(--navy);
  border-color: var(--navy-mid);
}
.about-info-panel.dark-panel::before {
  background: linear-gradient(180deg, var(--pastel-green), var(--green-light));
}
/* Corner glow on dark panel */
.about-info-panel.dark-panel::after {
  content: '';
  position: absolute;
  bottom: -40px; right: -40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--navy-light) 0%, transparent 65%);
  pointer-events: none;
}

.about-panel-icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  position: relative; z-index: 1;
}
.green-panel .about-panel-icon { background: rgba(255,255,255,0.7); }
.dark-panel  .about-panel-icon { background: rgba(255,255,255,0.12); }

.about-info-panel h3 {
  margin-bottom: 8px;
  line-height: 1.25;
  position: relative; z-index: 1;
}
.green-panel h3 { color: var(--navy); }
.dark-panel  h3 { color: #fff; }

.about-info-panel p {
  line-height: 1.78;
  margin: 0;
  position: relative; z-index: 1;
}
.green-panel p { color: var(--text-mid); }
.dark-panel  p { color: rgba(255,255,255,0.62); }

/* ── FV Pro Learn bottom band ────────────── */
.about-fvp-band {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  background: black;
  border-radius: 22px;
  padding: 36px 48px;
  position: relative;
  overflow: hidden;
}
.about-fvp-band::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, var(--green), var(--navy-light), var(--pastel-green));
}
.about-fvp-band::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61,55,160,0.4) 0%, transparent 65%);
  pointer-events: none;
}
.about-fvp-left { position: relative; z-index: 1; }
.about-fvp-label {
  display: inline-block;
  color: var(--pastel-green);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.about-fvp-band h3 {
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.2;
}
.about-fvp-band p {
  color: rgba(255,255,255,0.6);
  line-height: 1.78;
  margin: 0;
  max-width: 580px;
}
.about-fvp-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.fvp-pill-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.fvp-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.04em;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.fvp-pill:hover {
  background: rgba(109,196,106,0.15);
  border-color: var(--pastel-green);
  color: var(--pastel-green);
}
.fvp-pill::before { content: '✦'; color: var(--green-light); }

@media (max-width: 1024px) {
  .about-layout { grid-template-columns: 1fr; }
  .about-fvp-band { grid-template-columns: 1fr; }
  .fvp-pill-row { justify-content: flex-start; }
}
@media (max-width: 768px) {
  .about-section, .cta-section { padding: 72px 0; }
  .about-eyebrow-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .about-fvp-band { padding: 28px 28px; }
}