/* ═══════════════════════════════════════════════════════════════
   about.css — SaiRevo Enviro Solutions
   About page styles. Pair with component.css (resets + header/footer).
   ═══════════════════════════════════════════════════════════════ */

/* ─── Scroll reveal base states ─────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-left {
    opacity: 0;
    transform: translateX(-56px);
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-right {
    opacity: 0;
    transform: translateX(56px);
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
    opacity: 1;
    transform: none;
}

/* Stagger children */
.ab-overview__right .reveal:nth-child(2) { transition-delay: 0.08s; }
.ab-overview__right .reveal:nth-child(3) { transition-delay: 0.16s; }
.ab-overview__right .reveal:nth-child(4) { transition-delay: 0.24s; }
.ab-overview__right .reveal:nth-child(5) { transition-delay: 0.32s; }
.ab-overview__right .reveal:nth-child(6) { transition-delay: 0.40s; }
.ab-overview__right .reveal:nth-child(7) { transition-delay: 0.48s; }

/* ─── Shared micro-components ────────────────────────────────── */
.ab-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: #2e7d32;
    margin-bottom: 24px;
}
.ab-tag::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 1px;
    background: currentColor;
    flex-shrink: 0;
}
.ab-tag--light { color: rgba(46,125,50,0.75); }
.ab-tag--light::before { background: rgba(46,125,50,0.4); }

.ab-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 10px #4ade80;
    animation: dotBlink 2.4s ease-in-out infinite;
}
.ab-dot--sm { width: 6px; height: 6px; }
@keyframes dotBlink { 0%,100%{opacity:1} 50%{opacity:0.25} }

.ab-body {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.96rem;
    font-weight: 300;
    line-height: 1.95;
    color: #3a3a3a;
    margin-bottom: 22px;
}
.ab-body--lead {
    font-size: 1.08rem;
    font-weight: 400;
    color: #111;
    padding-left: 20px;
    border-left: 2px solid #4caf50;
    margin-bottom: 32px;
}

/* ════════════════════════════════════════════════
   HERO BAND
════════════════════════════════════════════════ */
.ab-hero {
    position: relative;
    min-height: 92vh;
    background: #f0f7f0;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 140px 8% 100px;
}
.ab-hero__noise {
    position: absolute; inset: 0; pointer-events: none; opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px;
}
.ab-hero__grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(46,125,50,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(46,125,50,0.08) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 30%, transparent 100%);
}
.ab-hero__glow {
    position: absolute; border-radius: 50%; pointer-events: none; filter: blur(90px);
}
.ab-hero__glow--1 {
    width: 700px; height: 700px; top: -15%; right: -10%;
    background: radial-gradient(circle, rgba(34,197,94,0.18) 0%, transparent 65%);
    animation: glowPulse 10s ease-in-out infinite;
}
.ab-hero__glow--2 {
    width: 500px; height: 500px; bottom: -10%; left: 5%;
    background: radial-gradient(circle, rgba(16,185,129,0.12) 0%, transparent 65%);
    animation: glowPulse 13s ease-in-out 3s infinite reverse;
}
@keyframes glowPulse { 0%,100%{transform:scale(1);opacity:0.8} 50%{transform:scale(1.12);opacity:1} }

.ab-hero__inner { position: relative; z-index: 2; max-width: 800px; }
.ab-hero__label {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'DM Sans', sans-serif; font-size: 0.65rem; font-weight: 400;
    letter-spacing: 4px; text-transform: uppercase; color: rgba(46,125,50,0.75);
    margin-bottom: 36px; opacity: 0;
    animation: fadeUp 1s cubic-bezier(0.4,0,0.2,1) 0.1s forwards;
}
.ab-hero__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(3rem, 6vw, 7rem); font-weight: 300;
    line-height: 1.04; letter-spacing: -1.5px; color: #111; margin-bottom: 28px;
    opacity: 0; animation: fadeUp 1s cubic-bezier(0.4,0,0.2,1) 0.22s forwards;
}
.ab-hero__title em {
    font-style: italic; color: #4ade80; position: relative;
}
.ab-hero__title em::after {
    content: ''; position: absolute; bottom: 6px; left: 0;
    width: 0; height: 2px; background: #4ade80;
    animation: swipeIn 0.9s cubic-bezier(0.4,0,0.2,1) 1.1s forwards;
}
@keyframes swipeIn { to { width: 100%; } }
.ab-hero__sub {
    font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 300;
    color: rgba(0,0,0,0.45); margin-bottom: 44px; letter-spacing: 0.3px;
    opacity: 0; animation: fadeUp 1s cubic-bezier(0.4,0,0.2,1) 0.36s forwards;
}
.ab-hero__chips {
    display: flex; flex-wrap: wrap; gap: 10px;
    opacity: 0; animation: fadeUp 1s cubic-bezier(0.4,0,0.2,1) 0.5s forwards;
}
.ab-hero__chips span {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px;
    background: rgba(255,255,255,0.7); border: 1px solid rgba(46,125,50,0.25);
    border-radius: 100px; font-family: 'DM Sans', sans-serif; font-size: 0.72rem;
    font-weight: 400; letter-spacing: 0.5px; color: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px); transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.ab-hero__chips span:hover { border-color: rgba(46,125,50,0.5); color: #2e7d32; background: rgba(46,125,50,0.08); }
.ab-hero__chips span::before { content:''; width:5px; height:5px; border-radius:50%; background:#4ade80; flex-shrink:0; }

/* Vertical ticker */
.ab-vticker {
    position: absolute; right: 6%; top: 50%; transform: translateY(-50%);
    height: 380px; overflow: hidden; z-index: 2;
    display: flex; flex-direction: column; align-items: center;
    mask-image: linear-gradient(180deg, transparent 0%, black 20%, black 80%, transparent 100%);
}
.ab-vticker__track {
    display: flex; flex-direction: column; align-items: center; gap: 28px;
    animation: tickerUp 10s linear infinite;
}
.ab-vticker__track span {
    font-family: 'Cormorant Garamond', serif; font-size: 0.65rem; font-weight: 400;
    letter-spacing: 4px; text-transform: uppercase; color: rgba(46,125,50,0.3);
    writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap;
}
@keyframes tickerUp { from{transform:translateY(0)} to{transform:translateY(-50%)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }

/* ════════════════════════════════════════════════
   COMPANY OVERVIEW
════════════════════════════════════════════════ */
.ab-overview {
    position: relative; background: #f7f2ea; padding: 120px 0; overflow: hidden;
}
.ab-overview__deco {
    position: absolute; top: -40px; right: -20px;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(8rem, 16vw, 20rem); font-weight: 700; font-style: italic;
    color: transparent; -webkit-text-stroke: 1px rgba(46,125,50,0.06);
    pointer-events: none; user-select: none; letter-spacing: -6px; line-height: 1;
}
.ab-overview__wrap {
    max-width: 1280px; margin: 0 auto; padding: 0 8%;
    display: grid; grid-template-columns: 420px 1fr; gap: 100px; align-items: start;
}
.ab-overview__left { position: sticky; top: 110px; }

.ab-overview__heading {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.2rem, 3.5vw, 4rem); font-weight: 300; line-height: 1.1;
    color: #111; margin-bottom: 28px; letter-spacing: -0.5px;
}
.ab-overview__heading em { font-style: italic; color: #2e7d32; }
.ab-overview__line {
    width: 0; height: 2px; background: linear-gradient(90deg, #4caf50, #2e7d32);
    margin-bottom: 44px; transition: width 1.4s cubic-bezier(0.4,0,0.2,1) 0.4s;
}
.ab-overview__left.is-visible .ab-overview__line { width: 56px; }

.ab-stats { display: flex; flex-direction: column; gap: 0; }
.ab-stat {
    padding: 24px 0; border-bottom: 1px solid rgba(0,0,0,0.07);
}
.ab-stat:last-child { border-bottom: none; }
.ab-stat__num {
    font-family: 'Cormorant Garamond', serif; font-size: 3.2rem; font-weight: 300;
    color: #2e7d32; line-height: 1; letter-spacing: -2px;
}
.ab-stat__suf {
    font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 300; color: #4caf50;
}
.ab-stat__label {
    display: block; font-family: 'DM Sans', sans-serif; font-size: 0.63rem;
    font-weight: 400; letter-spacing: 2px; text-transform: uppercase;
    color: rgba(0,0,0,0.35); margin-top: 4px;
}

.ab-overview__right { padding-top: 8px; }

.ab-reg {
    background: #fff; border: 1px solid rgba(46,125,50,0.14); border-radius: 18px;
    padding: 32px 36px; margin-top: 36px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.06); position: relative; overflow: hidden;
}
.ab-reg::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #4caf50, #22d3ee, #4caf50);
    background-size: 200%; animation: gradFlow 4s linear infinite;
}
@keyframes gradFlow { to { background-position: 200% 0; } }
.ab-reg__label {
    font-family: 'DM Sans', sans-serif; font-size: 0.62rem; font-weight: 500;
    letter-spacing: 3px; text-transform: uppercase; color: #2e7d32; margin-bottom: 14px;
}
.ab-reg__text {
    font-family: 'DM Sans', sans-serif; font-size: 0.9rem; font-weight: 300;
    line-height: 1.75; color: #444; margin-bottom: 24px;
}
.ab-reg__text strong { color: #111; font-weight: 500; }
.ab-reg__pills { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ab-reg__pill {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    background: #f7f2ea; border: 1px solid rgba(46,125,50,0.12); border-radius: 10px;
    transition: all 0.25s;
}
.ab-reg__pill:hover {
    border-color: rgba(46,125,50,0.35); background: #eef7ee;
    transform: translateY(-2px); box-shadow: 0 8px 20px rgba(46,125,50,0.1);
}
.ab-reg__pill-code {
    font-family: 'Cormorant Garamond', serif; font-size: 1.1rem;
    font-weight: 600; color: #2e7d32; min-width: 44px; flex-shrink: 0;
}
.ab-reg__pill-name {
    font-family: 'DM Sans', sans-serif; font-size: 0.72rem; font-weight: 400;
    color: #555; line-height: 1.3;
}

/* ════════════════════════════════════════════════
   TEAM IMAGE SECTION
════════════════════════════════════════════════ */
.ab-team {
    background: #f7f9f7; padding: 120px 0; position: relative; overflow: hidden;
}
.ab-team::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(46,125,50,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(46,125,50,0.05) 1px, transparent 1px);
    background-size: 48px 48px; pointer-events: none;
}
.ab-team__wrap {
    max-width: 1280px; margin: 0 auto; padding: 0 8%;
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.ab-team__img-col { position: relative; }
.ab-team__frame {
    position: relative; border-radius: 20px; overflow: hidden;
    aspect-ratio: 4/3; background: #dde8dd;
    border: 1px solid rgba(46,125,50,0.18);
    box-shadow: 0 40px 100px rgba(0,0,0,0.12), 0 0 0 1px rgba(46,125,50,0.08);
}
.ab-team__photo {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.ab-team__frame:hover .ab-team__photo { transform: scale(1.04); }

/* Placeholder when image fails */
.ab-team__photo-placeholder {
    display: none; position: absolute; inset: 0;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; text-align: center; padding: 32px;
}
.ab-team__frame--placeholder .ab-team__photo { display: none; }
.ab-team__frame--placeholder .ab-team__photo-placeholder { display: flex; }
.ab-team__photo-placeholder span { font-size: 3.5rem; opacity: 0.4; }
.ab-team__photo-placeholder p {
    font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: rgba(0,0,0,0.35);
}
.ab-team__photo-placeholder small {
    font-family: 'DM Sans', sans-serif; font-size: 0.68rem;
    color: rgba(46,125,50,0.5); max-width: 220px; line-height: 1.6;
}
.ab-team__frame-badge {
    position: absolute; bottom: 20px; left: 20px;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px; background: rgba(255,255,255,0.88);
    border: 1px solid rgba(46,125,50,0.2); border-radius: 100px;
    backdrop-filter: blur(12px); font-family: 'DM Sans', sans-serif;
    font-size: 0.65rem; font-weight: 400; letter-spacing: 2px;
    color: rgba(0,0,0,0.55); text-transform: uppercase;
}
.ab-team__copy-col { color: #111; }
.ab-team__heading {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 3.2vw, 3.6rem); font-weight: 300; line-height: 1.1;
    color: #111; letter-spacing: -0.5px; margin-bottom: 24px;
}
.ab-team__heading em { font-style: italic; color: #4ade80; }
.ab-team__body {
    font-family: 'DM Sans', sans-serif; font-size: 0.93rem; font-weight: 300;
    line-height: 1.9; color: rgba(0,0,0,0.5); margin-bottom: 44px;
}
.ab-team__values { display: flex; flex-direction: column; gap: 16px; }
.ab-team__value {
    display: flex; align-items: flex-start; gap: 18px; padding: 20px 24px;
    background: #fff; border: 1px solid rgba(46,125,50,0.14);
    border-radius: 14px; transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.ab-team__value:hover {
    border-color: rgba(46,125,50,0.35); background: rgba(46,125,50,0.04);
    transform: translateX(6px);
}
.ab-team__value-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.ab-team__value-title {
    font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 500;
    color: #111; margin-bottom: 5px; letter-spacing: 0.3px;
}
.ab-team__value-desc {
    font-family: 'DM Sans', sans-serif; font-size: 0.8rem; font-weight: 300;
    color: rgba(0,0,0,0.45); line-height: 1.6;
}

/* ════════════════════════════════════════════════
   MISSION & VISION
════════════════════════════════════════════════ */
.ab-mv {
    position: relative; background: #eef5ee; padding: 120px 0 140px; overflow: hidden;
}
.ab-mv__noise {
    position: absolute; inset: 0; pointer-events: none; opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px;
}
.ab-mv__wrap { max-width: 1280px; margin: 0 auto; padding: 0 8%; }
.ab-mv__header { text-align: center; margin-bottom: 72px; }
.ab-mv__heading {
    font-family: 'Cormorant Garamond', serif; font-size: clamp(2.4rem, 4vw, 5rem);
    font-weight: 300; color: #111; letter-spacing: -1px; line-height: 1.05;
}
.ab-mv__cards {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch;
}
.ab-mv__divider {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0 40px; gap: 20px;
}
.ab-mv__divider-line {
    flex: 1; width: 1px;
    background: linear-gradient(180deg, transparent, rgba(74,222,128,0.2) 30%, rgba(74,222,128,0.2) 70%, transparent);
}
.ab-mv__divider-leaf {
    font-size: 1.6rem; animation: iconPulse 4s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(74,222,128,0.5));
}
@keyframes iconPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15) rotate(5deg)} }

.ab-mv__card {
    position: relative; background: #fff;
    border: 1px solid rgba(46,125,50,0.14); border-radius: 24px;
    padding: 52px 44px; overflow: hidden;
    transition: border-color 0.4s, transform 0.4s, box-shadow 0.4s;
}
.ab-mv__card:hover {
    border-color: rgba(46,125,50,0.3); transform: translateY(-8px);
    box-shadow: 0 40px 100px rgba(0,0,0,0.1), 0 0 60px rgba(34,197,94,0.06);
}
.ab-mv__card-glow {
    position: absolute; top: -80px; right: -80px; width: 300px; height: 300px;
    border-radius: 50%; background: radial-gradient(circle, rgba(34,197,94,0.1) 0%, transparent 65%);
    pointer-events: none; opacity: 0; transition: opacity 0.4s;
}
.ab-mv__card:hover .ab-mv__card-glow { opacity: 1; }
.ab-mv__card--vision .ab-mv__card-glow { top:auto; bottom:-80px; right:auto; left:-80px; }
.ab-mv__card-icon {
    font-size: 2.4rem; margin-bottom: 20px; display: block;
    filter: drop-shadow(0 0 12px rgba(74,222,128,0.4));
}
.ab-mv__card-label {
    font-family: 'DM Sans', sans-serif; font-size: 0.58rem; font-weight: 500;
    letter-spacing: 4px; text-transform: uppercase; color: rgba(74,222,128,0.6); margin-bottom: 16px;
}
.ab-mv__card-title {
    font-family: 'Cormorant Garamond', serif; font-size: clamp(1.6rem, 2.5vw, 2.4rem);
    font-weight: 300; color: #111; line-height: 1.2; letter-spacing: -0.5px; margin-bottom: 20px;
}
.ab-mv__card-body {
    font-family: 'DM Sans', sans-serif; font-size: 0.9rem; font-weight: 300;
    line-height: 1.85; color: rgba(0,0,0,0.48); margin-bottom: 28px;
}
.ab-mv__card-rule { width: 40px; height: 1px; background: rgba(74,222,128,0.3); margin-bottom: 20px; }
.ab-mv__card-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-mv__card-tags span {
    font-family: 'DM Sans', sans-serif; font-size: 0.65rem; font-weight: 400;
    letter-spacing: 0.5px; color: rgba(74,222,128,0.55); padding: 5px 12px;
    background: rgba(74,222,128,0.05); border: 1px solid rgba(74,222,128,0.12);
    border-radius: 100px; transition: all 0.2s;
}
.ab-mv__card-tags span:hover {
    background: rgba(74,222,128,0.1); color: #4ade80; border-color: rgba(74,222,128,0.3);
}

/* ════════════════════════════════════════════════
   CTA STRIP
════════════════════════════════════════════════ */
.ab-cta {
    background: linear-gradient(135deg, #2e7d32, #1b5e20);
    position: relative; overflow: hidden;
}
.ab-cta::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 20px 20px; pointer-events: none;
}
.ab-cta__wrap {
    position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 60px 8%;
    display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.ab-cta__text {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.4rem, 2.8vw, 2.6rem); font-weight: 300;
    color: rgba(255,255,255,0.9); line-height: 1.3; letter-spacing: -0.3px; max-width: 680px;
}
.ab-cta__btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 16px 36px;
    background: #fff; color: #1b5e20; border-radius: 100px; text-decoration: none;
    font-family: 'DM Sans', sans-serif; font-size: 0.8rem; font-weight: 500;
    letter-spacing: 1px; white-space: nowrap; transition: all 0.3s; flex-shrink: 0;
}
.ab-cta__btn:hover {
    background: #4ade80; color: #052e16;
    transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,0.25);
}
.sp { background:#f4f8f4; padding:120px 0; position:relative; overflow:hidden; }
.sp::before { content:''; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(circle,rgba(46,125,50,.1) 1px,transparent 1px); background-size:32px 32px; mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,black 20%,transparent 90%); }
.sp__wrap { max-width:1280px; margin:0 auto; padding:0 8%; }
.sp__title { font-family:'Cormorant Garamond',serif; font-size:clamp(2.6rem,5vw,5.5rem); font-weight:300; letter-spacing:-2px; line-height:1.02; color:#111; }
.sp__title em { font-style:italic; color:#2e7d32; }
.sp__sub { font-family:'DM Sans',sans-serif; font-size:.88rem; font-weight:300; color:rgba(0,0,0,.4); margin-top:12px; }
.sp__header { margin-bottom:72px; }
.sp__col-label { font-family:'DM Sans',sans-serif; font-size:.6rem; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:#2e7d32; margin-bottom:24px; display:flex; align-items:center; gap:10px; }
.sp__col-label::after { content:''; flex:1; height:1px; background:rgba(46,125,50,.14); }
 
/* Grid */
.sp__grid { display:grid; grid-template-columns:320px 1fr; gap:80px; align-items:start; }
@media(max-width:960px){ .sp__grid{grid-template-columns:1fr; gap:56px;} .sp__stats{position:static!important;} }
 
/* Stats */
.sp__stats { position:sticky; top:100px; }
.sp__stat-row { display:flex; align-items:baseline; gap:14px; padding:18px 8px; border-bottom:1px solid rgba(0,0,0,.07); transition:background .2s; border-radius:6px; }
.sp__stat-row:last-child { border-bottom:none; }
.sp__stat-row:hover { background:rgba(46,125,50,.04); }
.sp__arrow { font-family:'Cormorant Garamond',serif; font-size:1.1rem; color:#4caf50; flex-shrink:0; }
.sp__stat-row strong { font-family:'Cormorant Garamond',serif; font-size:1.9rem; font-weight:600; color:#2e7d32; letter-spacing:-1px; flex-shrink:0; }
.sp__stat-row span { font-family:'DM Sans',sans-serif; font-size:.82rem; font-weight:300; color:#3a3a3a; }
 
/* Tabs nav */
.sp__tabs-nav { display:flex; gap:0; border-bottom:2px solid rgba(46,125,50,.14); margin-bottom:0; }
.sp__tab { width:44px; height:44px; background:none; border:none; cursor:pointer; font-family:'Cormorant Garamond',serif; font-size:1.1rem; color:rgba(0,0,0,.35); position:relative; transition:color .25s; }
.sp__tab::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:2px; background:#2e7d32; transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.4,0,.2,1); }
.sp__tab.active { color:#2e7d32; }
.sp__tab.active::after { transform:scaleX(1); }
 
/* Panels */
.sp__panel { display:none; background:#fff; border:1px solid rgba(46,125,50,.14); border-radius:20px; padding:44px 48px; margin-top:-1px; position:relative; overflow:hidden; box-shadow:0 12px 48px rgba(0,0,0,.05); animation:spFade .35s ease forwards; }
.sp__panel.active { display:block; }
.sp__panel::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#4caf50,#22d3ee,#4caf50); background-size:200%; animation:spGrad 4s linear infinite; }
@keyframes spFade { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
@keyframes spGrad { to{background-position:200% 0} }
.sp__panel-num { font-family:'Cormorant Garamond',serif; font-size:3.5rem; font-weight:300; color:rgba(46,125,50,.1); line-height:1; letter-spacing:-3px; display:block; margin-bottom:12px; }
.sp__panel h3 { font-family:'Cormorant Garamond',serif; font-size:clamp(1.6rem,2.5vw,2.4rem); font-weight:300; color:#111; line-height:1.15; letter-spacing:-.5px; margin-bottom:16px; }
.sp__panel h3 em { font-style:italic; color:#2e7d32; }
.sp__panel p { font-family:'DM Sans',sans-serif; font-size:.92rem; font-weight:300; line-height:1.9; color:rgba(0,0,0,.5); margin-bottom:28px; }
.sp__bar { height:2px; background:rgba(46,125,50,.12); border-radius:2px; overflow:hidden; margin-bottom:24px; }
.sp__bar-fill { height:100%; background:linear-gradient(90deg,#4caf50,#2e7d32); border-radius:2px; transition:width .5s ease .1s; }
.sp__nav { display:flex; gap:10px; justify-content:flex-end; }
.sp__nav button { padding:9px 22px; border-radius:100px; border:1px solid rgba(46,125,50,.2); background:none; font-family:'DM Sans',sans-serif; font-size:.75rem; color:#2e7d32; cursor:pointer; transition:all .2s; }
.sp__nav button:last-child { background:#2e7d32; border-color:#2e7d32; color:#fff; }
.sp__nav button:hover { background:#2e7d32; color:#fff; border-color:#2e7d32; }
 
/* Reveal */
.reveal { opacity:0; transform:translateY(32px); transition:opacity .7s ease,transform .7s ease; }
.reveal.is-visible { opacity:1; transform:none; }
/* ════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .ab-overview__wrap { grid-template-columns: 340px 1fr; gap: 64px; }
}
@media (max-width: 960px) {
    .ab-hero { min-height: auto; padding: 160px 6% 80px; }
    .ab-vticker { display: none; }
    .ab-overview__wrap { grid-template-columns: 1fr; gap: 48px; }
    .ab-overview__left { position: static; text-align: center; display: flex; flex-direction: column; align-items: center; }
    .ab-stats { flex-direction: row; gap: 0; width: 100%; }
    .ab-stat { flex: 1; text-align: center; border-bottom: none; border-right: 1px solid rgba(0,0,0,0.07); padding: 0 20px; }
    .ab-stat:last-child { border-right: none; }
    .ab-team__wrap { grid-template-columns: 1fr; gap: 56px; }
    .ab-mv__cards { grid-template-columns: 1fr; }
    .ab-mv__divider { flex-direction: row; padding: 20px 0; }
    .ab-mv__divider-line { flex: 1; width: auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(74,222,128,0.2) 30%, rgba(74,222,128,0.2) 70%, transparent); }
    .ab-reg__pills { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .ab-hero { padding: 140px 5% 72px; }
    .ab-hero__title { font-size: clamp(2.4rem, 8vw, 4rem); }
    .ab-overview { padding: 80px 0; }
    .ab-overview__deco { display: none; }
    .ab-overview__wrap { padding: 0 5%; }
    .ab-stats { flex-direction: column; }
    .ab-stat { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.07); padding: 20px 0; }
    .ab-stat:last-child { border-bottom: none; }
    .ab-team { padding: 80px 0; }
    .ab-team__wrap { padding: 0 5%; gap: 40px; }
    .ab-mv { padding: 80px 0 100px; }
    .ab-mv__wrap { padding: 0 5%; }
    .ab-mv__card { padding: 36px 28px; }
    
    .ab-cta__btn { align-self: center; }
}
@media (max-width: 480px) {
    .ab-hero__chips span { font-size: 0.65rem; padding: 6px 12px; }
    .ab-reg { padding: 24px 20px; }
    .ab-team__value { flex-direction: column; gap: 10px; }
}

@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap");
.waste-container {
  width: 100%;
  display: flex;
   background: rgb(238, 245, 238);
   
  justify-content: center;
  height: 500px;
  gap: 10px;

  > div {
    flex: 0 0 120px;
    border-radius: 0.5rem;
    transition: 0.5s ease-in-out;
    cursor: pointer;
    box-shadow: 1px 5px 15px #1e0e3e;
    position: relative;
    overflow: hidden;

    &:nth-of-type(1) {
      background: url("../images/dangerous.jpg") no-repeat 50% / cover;
    }
    &:nth-of-type(2) {
      background: url("../images/biowaste.jpg") no-repeat 50% / cover;
    }
    &:nth-of-type(3) {
      background: url("../images/ewaste.jpg") no-repeat 50% / cover;
    }
    &:nth-of-type(4) {
      background: url("../images/plasticc.jpg") no-repeat 50% / cover;
    }
    .waste-content {
      font-size: 1.5rem;
      color: #fff;
      display: flex;
      align-items: center;
      padding: 15px;
      opacity: 0;
      flex-direction: column;
      height: 100%;
      justify-content: flex-end;
      /* background: rgb(2, 2, 46); */
      /* background: linear-gradient(
        0deg,
        rgba(2, 2, 46, 0.6755077030812324) 0%,
        rgba(255, 255, 255, 0) 100%
      ); */
      transform: translatey(100%);
      transition: opacity 0.5s ease-in-out, transform 0.5s 0.2s;
      visibility: hidden;

      span {
        display: block;
        margin-top: 5px;
        font-size: 1.2rem;
      }
    }

    &:hover {
      flex: 0 0 250px;
      box-shadow: 1px 3px 15px #7645d8;
      transform: translatey(-30px);
    }

    &:hover .waste-content {
      opacity: 1;
      transform: translatey(0%);
      visibility: visible;
    }
  }
}

@media screen and (max-width: 555px) {
  /* waste container */
  .waste-container {
    width: 95%;
    flex-wrap: nowrap; /* Prevent stacking */
    overflow-x: auto; /* Enable horizontal scrolling */
    justify-content: flex-start; /* Align items to the left */
    height: 500px; /* Keep original height */
    /* padding: 10px; */
    margin: 10px;
    border-radius: 6px;
    scrollbar-width: none; /* Hide scrollbar for a cleaner look */
   background: #f0f7f0 !important;

  }

  .waste-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar in WebKit browsers */
  }

  .waste-container > div {
    flex: 0 0 120px; /* Keep original width */
    min-width: 120px; /* Ensure consistent width */
  }

  .waste-container > div:hover {
    flex: 0 0 250px; /* Keep hover effect */
  }
}