/* ============================================================
   About Page — Reference Design Replica
   Style: Clean editorial · Card-based · Brand red + Teal accents
   Layout: Hero 2col → Story 3col → Values 5col → Process 8step flow
   ============================================================ */

.about-page {
    background: #fff;
    color: #1a202c;
    overflow-x: hidden;
}

/* Keep mobile navbar container inside the viewport even if page content overflows */
@media (max-width: 1024px) {
    .about-page .nav-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

/* Override global body::before blueprint grid from style.css — not needed on About */
.about-page::before,
body.about-page::before {
    display: none !important;
}

/* ---------- shared label ---------- */
.ab-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #e53e3e;
}

.ab-label::after {
    content: '';
    width: 28px;
    height: 2.5px;
    background: #e53e3e;
    border-radius: 2px;
}

.ab-label--sm {
    font-size: 11px;
}

.ab-label--sm::after {
    width: 20px;
}

/* ---------- section header ---------- */
.ab-section-head {
    text-align: center;
    margin-bottom: 48px;
}

.ab-section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #1a202c;
    margin: 14px 0 0;
}

/* success-stories title split: dark brand + red descriptor */
.ab-section-title--cases {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0 12px;
    margin-top: 12px;
}

.ab-title-dark {
    color: #111827;
    font-weight: 700;
}

.ab-title-red {
    color: #e84954;
    font-weight: 600;
}

.ab-label--cases {
    letter-spacing: 0.2em;
}

.ab-label--cases .ab-label-cube {
    width: 15px;
    height: 15px;
}

.ab-cases-cta svg {
    width: 16px;
    height: 16px;
}

/* ---------- pill badge heading (e.g. OUR CORE VALUES) ---------- */
.ab-pill-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.ab-pb-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 17px 8px 13px;
    border-radius: 50px;
    background: #e84954;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.ab-pb-ico {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.ab-pb-arm {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.ab-pb-line {
    width: 90px;
    height: 2px;
    background: #e84954;
    border-radius: 2px;
}

.ab-pb-dot {
    width: 7px;
    height: 7px;
    border: 2px solid #e84954;
    border-radius: 50%;
    flex-shrink: 0;
}

.ab-pb-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    flex-shrink: 0;
}

.ab-pb-arm--left .ab-pb-arrow {
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent #e84954;
}

.ab-pb-arm--right .ab-pb-arrow {
    border-width: 4px 6px 4px 0;
    border-color: transparent #e84954 transparent transparent;
}


/* =====================================================
   HERO SECTION — Reference UI replica
   Left: label + title + desc + 2×2 stats + red CTA
   Right: factory + robot illustration
   ===================================================== */
.ab-hero {
    max-width: 1280px;
    margin: 0 auto;
    padding: 140px 40px 80px;
    overflow-x: clip;
}

.ab-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

/* --- left text --- */
.ab-hero-text {
    padding-right: 20px;
}

.ab-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(34px, 4.6vw, 48px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: #1a202c;
    margin: 16px 0 20px;
}

.ab-desc {
    font-size: 15.5px;
    line-height: 1.7;
    color: #64748b;
    margin: 0 0 32px;
    max-width: 460px;
}

/* --- 2×2 stats grid --- */
.ab-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 28px;
    margin-bottom: 34px;
    max-width: 420px;
}

.ab-stat {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ab-stat-ico {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ab-stat-ico svg {
    width: 22px;
    height: 22px;
}

.si-red {
    background: #fef2f2;
    color: #e84954;
}

.si-green {
    background: #ecfdf5;
    color: #10b981;
}

.ab-stat-text strong {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: #1a202c;
}

.ab-stat-text span {
    display: block;
    font-size: 12.5px;
    line-height: 1.4;
    color: #94a3b8;
    margin-top: 2px;
}

/* --- red CTA button --- */
.ab-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 50px;
    background: #e84954;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 8px 20px rgba(232, 73, 84, 0.30);
}

.ab-hero-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(232, 73, 84, 0.38);
}

.ab-hero-btn-arrow {
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.ab-hero-btn:hover .ab-hero-btn-arrow {
    transform: translateX(4px);
}

/* --- right visual --- */
.ab-hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 460px;
}

.ab-hero-img {
    width: 100%;
    max-width: 640px;
    height: auto;
    object-fit: contain;
}


/* =====================================================
   STORY SECTION — three zones
   ===================================================== */
.ab-story {
    max-width: 1240px;
    margin: 0 auto;
    padding: 60px 40px 80px;
    overflow-x: clip; /* contain story column slide-in offsets */
}

.ab-story-grid {
    display: grid;
    grid-template-columns: 300px 1fr 260px;
    gap: 32px;
    align-items: start;
    perspective: 1400px; /* enables 3D rotateY reveal on story columns */
}

/* --- location card (left) --- */
.ab-story-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/5;
    background: linear-gradient(145deg, #f0fdf4, #dcfce7, #bbf7d0);
    display: flex;
    align-items: flex-end;
}

.ab-story-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ab-story-fallback {
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #f0fdf4, #ecfdf5);
}

.ab-story-fallback svg {
    width: 64px;
    height: 64px;
}

.ab-location-badge {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px;
    padding: 12px 18px;
    background: #ef4444;
    border-radius: 12px;
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
}

.ab-location-badge svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.ab-location-badge strong {
    font-weight: 700;
}

/* --- story body (center) --- */
.ab-story-body {
    padding: 8px 12px 0;
}

.ab-story-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #1a202c;
    margin: 14px 0 18px;
}

.ab-story-body p {
    font-size: 15px;
    line-height: 1.78;
    color: #4a5568;
    margin: 0;
}

/* --- feature sidebar (right) --- */
.ab-story-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: #fafbfc;
    border: 1px solid #edf2f7;
    border-radius: 16px;
    padding: 24px 20px;
}

.sidebar-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.sidebar-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-ico svg {
    width: 18px;
    height: 18px;
}

.si-red {
    background: #fef2f2;
    color: #ef4444;
}

.si-green {
    background: #ecfdf5;
    color: #10b981;
}

.sidebar-item b {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 2px;
}

.sidebar-item span {
    display: block;
    font-size: 12.5px;
    line-height: 1.45;
    color: #718096;
}


/* =====================================================
   CORE VALUES — Poker card stack / deal animation
   Default: fanned-out row. Initial-load: stacked deck.
   GSAP deals them into place on scroll.
   ===================================================== */
.ab-values {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    padding: 80px 40px 90px;
    overflow-x: clip; /* clip the -20px dot decoration; keep vertical hover lift visible */
}

.ab-values .ab-section-head {
    margin-bottom: 8px; /* reduce gap between title and cards */
}

/* Subtle dot pattern on right side (like reference) */
.ab-values::before {
    content: '';
    position: absolute;
    right: -20px;
    top: 10%;
    bottom: 10%;
    width: 120px;
    pointer-events: none;
    background-image: radial-gradient(circle, #cbd5e1 1.1px, transparent 1.2px);
    background-size: 18px 18px;
    opacity: .3;
    mask-image: linear-gradient(to left, black, transparent);
    -webkit-mask-image: linear-gradient(to left, black, transparent);
}

/* ---- Card deck container ---- */
.ab-values-grid {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* top-align cards right under the title (was center => ~45px gap) */
    gap: 28px;
    position: relative;
    min-height: 0; /* remove the 340px vertical-centering gap above the cards */
    margin-top: 40px; /* deliberate small gap below the title (~20px visible) */
    perspective: 1200px;
}

/* ---- Individual value card ---- */
.ab-val-card {
    text-align: center;
    padding: 36px 16px 32px;
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 16px;
    flex: 1;
    max-width: 220px;
    min-width: 0;
    transition: box-shadow .35s cubic-bezier(.22, 1, .36, 1),
    border-color .35s ease;
    cursor: default;
    /* Initial state: set by JS/GSAP — stacked in center */
    opacity: 0;
    will-change: transform, opacity;
}

.ab-val-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .065), 0 8px 20px rgba(0, 0, 0, .04);
    border-color: #dddfe4;
}

/* Icon circle — larger, more prominent */
.ab-val-ico {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    position: relative;
}

.ab-val-ico svg {
    width: 30px;
    height: 30px;
}

/* Color variants for icon circles */
.av-green {
    background: linear-gradient(135deg, #f0fdf6, #dcfce7);
    color: #059669;
}

.av-red {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #dc2626;
}

.av-teal {
    background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
    color: #0d9488;
}

/* Card title */
.ab-val-card h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 17px;
    font-weight: 650;
    color: #1a202c;
    margin: 0 0 12px;
    position: relative;
    display: inline-block;
}

/* Red underline accent under title (Quality & Collaboration) */
.ab-val-line {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -4px;
    width: 24px;
    height: 2.5px;
    background: #ef4444;
    border-radius: 2px;
}

/* Description text */
.ab-val-card p {
    font-size: 13.2px;
    line-height: 1.68;
    color: #7a8599;
    margin: 0;
}

/* Learn more link */
.ab-val-link {
    text-align: center;
    margin-top: 36px;
}

.ab-more-btn {
    display: inline-block;
    font-size: 13.5px;
    font-weight: 600;
    color: #e53e3e;
    text-decoration: none;
    border-bottom: 1.5px solid #fecaca;
    padding-bottom: 3px;
    transition: border-color .25s;
}

.ab-more-btn:hover {
    border-color: #e53e3e;
}


/* =====================================================
   PROCESS — 7-step horizontal flow (matching reference)
   ===================================================== */
/* =====================================================
   OUR PROCESS — 7-step horizontal flow + bottom features
   ===================================================== */
.ab-process {
    max-width: 1240px;
    margin: 0 auto;
    padding: 50px 40px 110px;
    overflow-x: clip;
}

/* small label above title: arrows + icon + OUR PROCESS */
.ab-process-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #e84954;
}

.ab-process-label-line {
    width: 32px;
    height: 10px;
    display: inline-flex;
    align-items: center;
    color: #e84954;
}

.ab-process-label-line svg {
    width: 100%;
    height: 100%;
}

.ab-process-label-ico {
    width: 18px;
    height: 18px;
    color: #e84954;
}

.ab-process-sub {
    max-width: 560px;
    margin: 14px auto 0;
    font-size: 15px;
    line-height: 1.7;
    color: #64748b;
}

.ab-process-track {
    position: relative;
    overflow-x: auto;
    padding: 0 0 56px;
    scrollbar-width: thin;
}

.ab-process-rail {
    position: relative;
    min-width: 1080px;
    --gap: 20px;
    --w: calc((100% - 6 * var(--gap)) / 7);
    --r: 22px; /* half circle visual radius (border + white halo) — line stops here */
}

.ab-process-track::-webkit-scrollbar {
    height: 4px;
}

.ab-process-track::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.ab-process-track::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.ab-process-list {
    list-style: none;
    margin: 56px 0 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    gap: var(--gap, 20px);
    position: relative;
    z-index: 1;
}

/* timeline line: solid segments + solid node, drawn BETWEEN circles only */
.ab-process-connectors {
    position: absolute;
    top: -38px; /* aligned with step-number centers (circle top=-56px relative to card/list, 36px tall -> center -38px) */
    left: 0;
    width: 100%;
    height: 0;
    pointer-events: none;
    z-index: 1;
}

.ab-pconn {
    position: absolute;
    top: 0;
    /* segment length +6px total: start/end 3px closer to each circle edge */
    left: calc((var(--i) - 1) * (var(--w) + var(--gap)) + var(--w) / 2 + var(--r) - 3px);
    width: calc(var(--w) + var(--gap) - 2 * var(--r) + 6px);
    height: 1px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    color: #cbd5e1;
}

.ab-pconn-seg {
    flex: 1;
    height: 1px;
    background: var(--c, currentColor);
}

.ab-pconn-node {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
}

.ab-pconn[data-theme="red"] {
    color: #e84954;
}

.ab-pconn[data-theme="purple"] {
    color: #6366f1;
}

.ab-pconn[data-theme="teal"] {
    color: #0d9488;
}

.ab-step {
    flex: 1 1 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 14px 26px;
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
}

/* Number circle sitting on the timeline above the card */
.ab-step-num {
    position: absolute;
    top: -56px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    padding-top: 8px; /* nudge digit glyph down to true optical center (digits sit high) */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    background: #ffffff;
    border: 2px solid currentColor;
    box-shadow: 0 0 0 4px #fff;
}

.ab-step[data-theme="red"] .ab-step-num {
    color: #e84954;
    background: #ffffff;
}

.ab-step[data-theme="purple"] .ab-step-num {
    color: #6366f1;
    background: #ffffff;
}

.ab-step[data-theme="teal"] .ab-step-num {
    color: #0d9488;
    background: #ffffff;
}

/* Large tinted icon circle */
.ab-step-ico {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.ab-step-ico svg {
    width: 32px;
    height: 32px;
}

/* Step title */
.ab-step b {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
    line-height: 1.35;
}

/* Step description */
.ab-step > span {
    display: block;
    font-size: 12px;
    line-height: 1.6;
    color: #94a3b8;
    max-width: 130px;
}

/* Bottom colored bar — absolutely anchored to the card bottom so all
   bars across the 7 cards share the same horizontal (y) line, regardless
   of how many lines the description above them takes. */
.ab-step-bar {
    position: absolute;
    bottom: 26px; /* sits at the top edge of the card's bottom padding */
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    border-radius: 2px;
}

/* Process step themes */
.ab-step[data-theme="red"] .ab-step-ico {
    background: #fef2f2;
    color: #e84954;
}

.ab-step[data-theme="red"] .ab-step-bar {
    background: #e84954;
}

.ab-step[data-theme="purple"] .ab-step-ico {
    background: #eef2ff;
    color: #6366f1;
}

.ab-step[data-theme="purple"] .ab-step-bar {
    background: #6366f1;
}

.ab-step[data-theme="teal"] .ab-step-ico {
    background: #f0fdfa;
    color: #0d9488;
}

.ab-step[data-theme="teal"] .ab-step-bar {
    background: #0d9488;
}

.ab-step[data-theme="indigo"] .ab-step-ico {
    background: #eef2ff;
    color: #4f46e5;
}

.ab-step[data-theme="indigo"] .ab-step-bar {
    background: #4f46e5;
}

/* Process bottom feature cards — each its own shadowed box */
.ab-process-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 8px;
}

.ab-process-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

.ab-pf-ico {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ab-pf-ico svg {
    width: 24px;
    height: 24px;
}

.ab-pf-text b {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
    line-height: 1.3;
}

.ab-pf-text span {
    font-size: 12px;
    line-height: 1.5;
    color: #64748b;
}

.ab-process-feature[data-theme="red"] .ab-pf-ico {
    background: #fef2f2;
    color: #e84954;
}

.ab-process-feature[data-theme="teal"] .ab-pf-ico {
    background: #f0fdfa;
    color: #0d9488;
}

.ab-process-feature[data-theme="purple"] .ab-pf-ico {
    background: #eef2ff;
    color: #6366f1;
}

.ab-process-feature[data-theme="indigo"] .ab-pf-ico {
    background: #eef2ff;
    color: #4f46e5;
}


/* =====================================================
   OUR JOURNEY — 7-stage vertical milestone timeline
   ===================================================== */
.ab-journey {
    max-width: 1240px;
    margin: 0 auto;
    padding: 90px 40px 100px;
    overflow-x: clip;
}

/* ---- Header with plane + title + globe (positioned) ---- */
.ab-journey-header {
    position: relative;
    margin-bottom: 40px;
    padding: 0 260px 0 180px; /* reserve space for absolutely positioned illustrations */
    text-align: center;
}

.ab-journey-plane {
    position: absolute;
    left: 0;
    top: 100%;
    transform: translateY(-50%) rotate(-6deg);
    width: 160px;
    max-width: 160px;
    object-fit: contain;
}

.ab-journey-globe {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    max-width: 300px;
    object-fit: contain;
}

.ab-journey-head {
    position: relative;
    z-index: 2;
    text-align: center;
}

.ab-journey-label {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #e84954;
}

.ab-journey-label::before,
.ab-journey-label::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: #e84954;
}

.ab-journey-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(34px, 4.8vw, 50px);
    font-weight: 700;
    line-height: 1.1;
    color: #1a202c;
    margin: 16px 0 12px;
}

.ab-journey-title-accent {
    color: #e84954;
}

.ab-journey-subtitle {
    max-width: 520px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.6;
    color: #64748b;
}

/* ---- Timeline track ---- */
.ab-journey-track {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

.ab-journey-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 0;
    border-left: 2px solid #e2e2e6; /* solid, not dashed; theme-neutral grey */
    transform: translateX(-50%);
}

/* downward arrow at the tail of the vertical line */
.ab-journey-line::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 10px solid #e2e2e6;
}

.ab-journey-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ab-journey-item {
    position: relative;
    width: 100%;
}

.ab-journey-item::before {
    content: attr(data-index);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /*border: 2px solid #e84954;*/
    background: #ffffff;
    color: #e84954;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 23px;
    font-weight: 800;
    line-height: 50px;
    text-align: center;
    box-shadow: 0 6px 16px rgba(232, 73, 84, .20); /* slightly heavier shadow */
    z-index: 3;
}

.ab-journey-card {
    position: relative;
    width: 46%;
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, .04);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s cubic-bezier(.22, 1, .36, 1);
}

/* ---- Connector: dashed link from card to the central axis ---- */
.ab-journey-item::after {
    content: '';
    position: absolute;
    top: 50%;
    height: 0;
    border-top: 2px dashed #e2e2e6;
    transform: translateY(-50%);
    z-index: 2;
}

.ab-journey-item:nth-child(odd)::after {
    left: 46%;
    right: auto;
    width: 2%;   /* shortened so the dashed link stops ~22px before the vertical line (was 4% -> touched it) */
}

.ab-journey-item:nth-child(even)::after {
    right: 46%;
    left: auto;
    width: 2%;
}

/* ---- Teardrop node on the card's inner edge, pointing toward the axis ----
   Reverted one step further to the 20260809k shape (14x14 rounded corner + rotate). ---- */
.ab-journey-card::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    background: #e84954; /* theme color */
    z-index: 4;
}

.ab-journey-item:nth-child(odd) .ab-journey-card::before {
    right: -7px;                          /* straddle the card edge 50/50 */
    border-radius: 50% 0 50% 50%;        /* sharp corner top-right */
    transform: translateY(-50%) rotate(45deg);  /* tip points RIGHT toward axis */
}

.ab-journey-item:nth-child(even) .ab-journey-card::before {
    left: -7px;                           /* straddle the card edge 50/50 */
    border-radius: 0 50% 50% 50%;        /* sharp corner top-left */
    transform: translateY(-50%) rotate(-45deg); /* tip points LEFT toward axis */
}

/* ---- "Pulled-out" (揪出) root: a red boss straddling the card edge,
   from which the teardrop emerges — makes the node look unified with the card ---- */
.ab-journey-card::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    background: #e84954; /* theme color, same as teardrop */
    border-radius: 50%;
    transform: translateY(-50%);
    z-index: 3; /* sits behind the teardrop (z-index 4) but its card-side half shows on the white card */
}

.ab-journey-item:nth-child(odd) .ab-journey-card::after {
    right: -8px; /* center the boss on the card's right edge */
}

.ab-journey-item:nth-child(even) .ab-journey-card::after {
    left: -8px;  /* center the boss on the card's left edge */
}

.ab-journey-item:nth-child(odd) .ab-journey-card {
    margin-right: auto;
    flex-direction: row;
}

.ab-journey-item:nth-child(even) .ab-journey-card {
    margin-left: auto;
    flex-direction: row-reverse;
}

.ab-journey-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
}

.ab-journey-icon {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #fef2f2;
    color: #e84954;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ab-journey-icon svg {
    width: 27px;
    height: 27px;
}

.ab-journey-content {
    flex: 1;
    min-width: 0;
}

.ab-journey-card-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.ab-journey-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 650;
    color: #1a202c;
    margin: 0;
}

.ab-journey-date {
    font-size: 12px;
    font-weight: 700;
    color: #e84954;
    white-space: nowrap;
}

.ab-journey-card-desc {
    font-size: 13px;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

.ab-journey-media {
    flex: 0 0 130px;
    width: 130px;
    height: 96px;
    border-radius: 12px;
    overflow: hidden;
}

.ab-journey-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- Stats bar ---- */
.ab-journey-stats {
    margin-top: 70px;
    background: #fef2f2;
    border-radius: 20px;
    padding: 30px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.ab-journey-stat-lead {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.ab-journey-stat-ico {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #e84954;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ab-journey-stat-ico svg {
    width: 24px;
    height: 24px;
}

.ab-journey-stat-lead-text h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 17px;
    font-weight: 650;
    color: #1a202c;
    margin: 0 0 4px;
}

.ab-journey-stat-lead-text p {
    font-size: 13px;
    line-height: 1.5;
    color: #64748b;
    margin: 0;
}

.ab-journey-stat-items {
    display: flex;
    gap: 40px;
}

.ab-journey-stat {
    text-align: center;
    min-width: 76px;
}

.ab-journey-stat b {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1a202c;
    line-height: 1;
}

.ab-journey-stat span {
    display: block;
    font-size: 11px;
    color: #64748b;
    margin-top: 6px;
}

/* =====================================================
   LEADERSHIP TEAM — 4 member cards (reference UI replica)
   ===================================================== */
.ab-team {
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px 40px 30px;
    overflow-x: clip;
}

/* Section label: gradient lines + cube icon + bold text + underline (ref replica) */
.ab-team-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #e84954;
    margin-bottom: 0;
}

.ab-team-arm {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ab-team-cube {
    width: 16px;
    height: 16px;
    color: #e84954;
    flex-shrink: 0;
}

.ab-team-text {
    font-weight: 700;
    letter-spacing: 0.16em;
    white-space: nowrap;
}

/* gradient line: transparent -> solid red (darkens L to R) */
.ab-team-line--fade-in {
    width: 62px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(232, 73, 84, 0) 0%, rgba(232, 73, 84, 0.35) 45%, rgba(232, 73, 84, 1) 100%);
}

/* gradient line: solid red -> transparent (lightens L to R) */
.ab-team-line--fade-out {
    width: 62px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(232, 73, 84, 1) 0%, rgba(232, 73, 84, 0.35) 55%, rgba(232, 73, 84, 0) 100%);
}

/* solid dot at the line breakpoint */
.ab-team-dot--solid {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e84954;
    flex-shrink: 0;
}

/* underline directly under the LEADERSHIP TEAM text: two symmetric gradient lines */
.ab-team-underline {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 12px 0 0;
}

.ab-team-ul-line {
    width: 58px;
    height: 2px;
    border-radius: 2px;
}

.ab-team-ul-line--left {
    background: linear-gradient(90deg, rgba(232, 73, 84, 0) 0%, rgba(232, 73, 84, 0.35) 45%, rgba(232, 73, 84, 1) 100%);
}

.ab-team-ul-line--right {
    background: linear-gradient(90deg, rgba(232, 73, 84, 1) 0%, rgba(232, 73, 84, 0.35) 55%, rgba(232, 73, 84, 0) 100%);
}

.ab-title-brand {
    color: #e84954;
}

.ab-team-sub {
    max-width: 600px;
    margin: 16px auto 0;
    font-size: 15px;
    line-height: 1.6;
    color: #64748b;
}

.ab-team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 50px;
}

.ab-team-card {
    position: relative;
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 22px;
    padding: 40px 24px 40px;
    min-height: 520px;
    text-align: center;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s cubic-bezier(.22, 1, .36, 1);
    will-change: transform, box-shadow;
}

/* Top-right dotted pyramid decoration, rotated -90deg */
.ab-team-dots {
    position: absolute;
    top: 18px;
    right: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    pointer-events: none;
    z-index: 1;
    transform: rotate(270deg);
    transform-origin: top right;
}

.ab-team-dots-row {
    display: flex;
    gap: 4px;
}

.ab-team-dots-row i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #e3dce7;
}

.ab-team-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 60px rgba(15, 23, 42, .10);
}

/* Floating icon straddling the card's top edge (≈20% overlaps the card) */
.ab-team-float-ico {
    position: absolute;
    top: -38px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .10);
    z-index: 2;
}

.ab-team-float-ico svg {
    width: 22px;
    height: 22px;
}

/* Avatar ring + photo */
.ab-team-avatar-wrap {
    position: relative;
    width: 190px;
    height: 190px;
    margin: 0 auto 22px;
}

.ab-team-avatar {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 5px;
    background: #fff;
    overflow: hidden;
}

.ab-team-avatar::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 4px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.ab-team-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 15%;
    transform: scale(1.05) translateY(4%);
    background: #f8fafc;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.ab-team-card:hover .ab-team-photo {
    transform: scale(1.06);
}

.ab-team-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 21px;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 6px;
}

.ab-team-role {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .02em;
    margin-bottom: 14px;
}

.ab-team-divider-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 0 0 16px;
}

.ab-team-divider {
    display: block;
    width: 34px;
    height: 3px;
    border-radius: 3px;
}

.ab-team-divider-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ab-team-focus {
    font-size: 14px;
    line-height: 1.65;
    color: #64748b;
    margin: 0 0 22px;
    min-height: 64px;
}

/* Bottom 3 traits */
.ab-team-traits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid #f1f5f9;
}

.ab-team-trait {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.ab-team-trait svg {
    width: 22px;
    height: 22px;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.ab-team-card:hover .ab-team-trait svg {
    transform: translateY(-3px);
}

.ab-team-trait span {
    font-size: 10px;
    line-height: 1.35;
    color: #64748b;
    font-weight: 500;
}

/* Theme colors */
.ab-team-card[data-theme="red"] .ab-team-float-ico {
    background: #e84954;
}

.ab-team-card[data-theme="red"] .ab-team-role {
    color: #e84954;
}

.ab-team-card[data-theme="red"] .ab-team-divider {
    background: #e84954;
}

.ab-team-card[data-theme="red"] .ab-team-divider-dot {
    background: #e84954;
}

.ab-team-card[data-theme="red"] .ab-team-trait svg {
    color: #e84954;
}

.ab-team-card[data-theme="red"] .ab-team-avatar::before {
    background: conic-gradient(#e84954, #f87171, #e84954);
}

.ab-team-card[data-theme="teal"] .ab-team-float-ico {
    background: #0d9488;
}

.ab-team-card[data-theme="teal"] .ab-team-role {
    color: #0d9488;
}

.ab-team-card[data-theme="teal"] .ab-team-divider {
    background: #0d9488;
}

.ab-team-card[data-theme="teal"] .ab-team-divider-dot {
    background: #0d9488;
}

.ab-team-card[data-theme="teal"] .ab-team-trait svg {
    color: #0d9488;
}

.ab-team-card[data-theme="teal"] .ab-team-avatar::before {
    background: conic-gradient(#0d9488, #2dd4bf, #0d9488);
}

.ab-team-card[data-theme="green"] .ab-team-float-ico {
    background: #10b981;
}

.ab-team-card[data-theme="green"] .ab-team-role {
    color: #10b981;
}

.ab-team-card[data-theme="green"] .ab-team-divider {
    background: #10b981;
}

.ab-team-card[data-theme="green"] .ab-team-divider-dot {
    background: #10b981;
}

.ab-team-card[data-theme="green"] .ab-team-trait svg {
    color: #10b981;
}

.ab-team-card[data-theme="green"] .ab-team-avatar::before {
    background: conic-gradient(#10b981, #34d399, #10b981);
}

.ab-team-card[data-theme="indigo"] .ab-team-float-ico {
    background: #6366f1;
}

.ab-team-card[data-theme="indigo"] .ab-team-role {
    color: #6366f1;
}

.ab-team-card[data-theme="indigo"] .ab-team-divider {
    background: #6366f1;
}

.ab-team-card[data-theme="indigo"] .ab-team-divider-dot {
    background: #6366f1;
}

.ab-team-card[data-theme="indigo"] .ab-team-trait svg {
    color: #6366f1;
}

.ab-team-card[data-theme="indigo"] .ab-team-avatar::before {
    background: conic-gradient(#6366f1, #818cf8, #6366f1);
}

/* =====================================================
   TEAM BANNER — mascot + toys
   ===================================================== */
.ab-team-banner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 40px 70px;
    overflow: visible;
}

.ab-team-banner-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 138px;
    padding: 20px 42px;
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 80px;
    box-shadow: 0 12px 44px rgba(15, 23, 42, .07);
}

.ab-banner-pill {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    max-width: 720px;
    padding: 16px 40px;
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 80px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .10);
}

.ab-banner-cube {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff0f1;
    color: #e84954;
}

.ab-banner-cube svg {
    width: 22px;
    height: 22px;
}

.ab-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.35;
    color: #1a202c;
    text-align: left;
}

.ab-banner-text strong {
    color: #e84954;
    font-weight: 700;
}

.ab-banner-img {
    position: absolute;
    bottom: -5px;
    width: 200px;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    z-index: 2;
}

.ab-banner-img--left {
    left: 194px;
    width: 140px;
}

.ab-banner-img--right {
    left: 761px;
    width: 185px;
}

/* =====================================================
   SUCCESS STORIES — data-driven alternating case rows
   ===================================================== */
.ab-cases {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 40px 90px;
    overflow-x: clip;
}

.ab-section-head--cases {
    margin-bottom: 50px;
}

.ab-cases-sub {
    max-width: 560px;
    margin: 18px auto 0;
    font-size: 15px;
    line-height: 1.65;
    color: #64748b;
}

.ab-cases-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 24px;
    padding: 13px 30px;
    background: #e84954;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s cubic-bezier(.22, 1, .36, 1), background .25s ease;
}

.ab-cases-cta:hover {
    transform: translateY(-2px);
    background: #d63a45;
    box-shadow: 0 10px 24px rgba(232, 73, 84, .28);
}

.ab-cases-cta svg {
    width: 16px;
    height: 16px;
}

.ab-cases-grid {
    display: flex;
    flex-direction: column;
    gap: 34px;
    margin-top: 0;
}

.ab-case-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(15, 23, 42, .05);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s cubic-bezier(.22, 1, .36, 1);
}

.ab-case-row:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 60px rgba(15, 23, 42, .09);
}

.ab-case-media {
    position: relative;
    min-height: 430px;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    overflow: hidden;
}

.ab-case-media--right {
    order: 2;
}

.ab-case-photo {
    width: 100%;
    height: 100%;
    min-height: 430px;
    object-fit: cover;
    display: block;
}

.ab-case-float-ico {
    position: absolute;
    top: 22px;
    left: 22px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #e84954;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(232, 73, 84, .28);
    z-index: 2;
}

.ab-case-media--right .ab-case-float-ico {
    left: auto;
    right: 22px;
}

.ab-case-float-ico svg {
    width: 26px;
    height: 26px;
}

.ab-case-row[data-theme="teal"] .ab-case-float-ico {
    background: #0d9488;
    box-shadow: 0 10px 24px rgba(13, 148, 136, .26);
}

.ab-case-row[data-theme="indigo"] .ab-case-float-ico {
    background: #6366f1;
    box-shadow: 0 10px 24px rgba(99, 102, 241, .26);
}

.ab-case-content {
    padding: 42px 44px 44px;
    display: flex;
    flex-direction: column;
}

.ab-case-row:nth-child(even) .ab-case-content {
    order: 1;
}

/* key-shape tag: solid round head (ico-wrap) + light shaft (text) */
.ab-case-tag {
    display: inline-flex;
    align-items: center;
    gap: 0;
    align-self: flex-start;
    margin-bottom: 16px;
}

.ab-case-tag-text {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: #e84954;
    border-radius: 0 50px 50px 0;
    padding: 3px 24px 3px 20px;
    margin-left: -6px;
}

.ab-case-tag-ico-wrap {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #e84954;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
    flex-shrink: 0;
}

.ab-case-tag-ico {
    width: 20px;
    height: 20px;
    display: inline-flex;
    color: #fff;
}

.ab-case-tag-ico svg {
    width: 20px;
    height: 20px;
}

.ab-case-row[data-theme="teal"] .ab-case-tag-text {
    color: #fff;
    background: #0d9488;
}

.ab-case-row[data-theme="teal"] .ab-case-tag-ico-wrap {
    background: #0d9488;
}

.ab-case-row[data-theme="indigo"] .ab-case-tag-text {
    color: #fff;
    background: #6366f1;
}

.ab-case-row[data-theme="indigo"] .ab-case-tag-ico-wrap {
    background: #6366f1;
}

.ab-case-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 23px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 26px;
    line-height: 1.28;
}

.ab-case-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 4px;
}

.ab-case-section h4 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #e84954;
    margin: 0 0 8px;
}

.ab-case-section-ico {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ab-case-section-ico svg {
    width: 24px;
    height: 24px;
}

.ab-case-row[data-theme="teal"] .ab-case-section h4 {
    color: #0d9488;
}

.ab-case-row[data-theme="indigo"] .ab-case-section h4 {
    color: #6366f1;
}

.ab-case-section p {
    font-size: 13px;
    line-height: 1.62;
    color: #5b6675;
    margin: 0;
}

.ab-case-takeaways {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

.ab-case-takeaways li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: #1e293b;
    background: #f6f8fa;
    border: 1px solid #e8edf2;
    border-radius: 50px;
    padding: 7px 14px;
}

.ab-case-check {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #e84954;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ab-case-check svg {
    width: 11px;
    height: 11px;
}

.ab-case-row[data-theme="teal"] .ab-case-check {
    background: #0d9488;
}

.ab-case-row[data-theme="indigo"] .ab-case-check {
    background: #6366f1;
}

/* ---- footer tagline ---- */
.ab-cases-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 56px;
    padding: 0 20px;
}

.ab-cases-footer-ico {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: #e84954;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(232, 73, 84, .22);
}

.ab-cases-footer-ico svg {
    width: 25px;
    height: 25px;
}

.ab-cases-footer-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 19px;
    font-weight: 500;
    color: #3a4252;
    margin: 0;
    line-height: 1.4;
}

.ab-text-red {
    color: #e84954;
    font-weight: 700;
}

.ab-cases-error {
    text-align: center;
    padding: 40px 20px;
    color: #64748b;
}


/* =====================================================
   SCROLL REVEAL (toggled by main.js)
   ===================================================== */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .ab-robot-img {
        animation: none;
    }

    .od {
        animation: none;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    .dot-map {
        animation: none;
    }

    /* No motion: show cards already dealt/expanded, no folded stack */
    .ab-val-card {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* =====================================================
   BRAND ARCHITECTURE — Two Brands, One Supply Chain
   (pixel-matched to the reference screenshot)
   ===================================================== */
.ab-brand {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 40px 100px;
    overflow-x: clip;
}

/* --- section header tweaks --- */
.ab-label--centered {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.ab-label--centered::after {
    display: none;
}

.ab-label-arrow {
    width: 18px;
    height: 18px;
    color: #e84954;
}

.ab-label-cube {
    width: 16px;
    height: 16px;
    color: #e84954;
}

.ab-title-red {
    color: #e84954;
}

.ab-brand-sub {
    max-width: 620px;
    margin: 16px auto 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: #64748b;
}

/* ---- two brand cards + center connector ---- */
.ab-brand-cards {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 28px;
    align-items: stretch;
    margin: 46px 0 42px;
    position: relative;
}

.ab-brand-card {
    position: relative;
    background: #fff;
    border: 1px solid #edeef1;
    border-radius: 22px;
    padding: 34px 32px 32px;
    display: flex;
    flex-direction: column;
    min-height: 420px;
    overflow: visible;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s cubic-bezier(.22, 1, .36, 1), border-color .35s ease;
}

.ab-brand-card.td {
    background: linear-gradient(135deg, #fff 0%, #fff8f8 100%);
    border-color: #f9d2d6;
    box-shadow: 0 28px 70px -24px rgba(232, 73, 84, .16), 0 10px 24px -10px rgba(232, 73, 84, .10);
}

.ab-brand-card.hx {
    background: linear-gradient(135deg, #fff 0%, #f8f8ff 100%);
    border-color: #daddf9;
    box-shadow: 0 28px 70px -24px rgba(99, 102, 241, .16), 0 10px 24px -10px rgba(99, 102, 241, .10);
}

.ab-brand-card:hover {
    transform: translateY(-7px);
}

.ab-brand-card.td:hover {
    box-shadow: 0 36px 80px -20px rgba(232, 73, 84, .22), 0 14px 30px -10px rgba(232, 73, 84, .13);
}

.ab-brand-card.hx:hover {
    box-shadow: 0 36px 80px -20px rgba(99, 102, 241, .22), 0 14px 30px -10px rgba(99, 102, 241, .13);
}

/* floating corner images */
.ab-brand-float {
    position: absolute;
    pointer-events: none;
    z-index: 3;
    object-fit: contain;
}

.ab-float-td-mascot {
    width: 170px;
    height: auto;
    top: -182px;
    left: -36px;
    /* no drop-shadow */
}

.ab-float-td-cart {
    width: 150px;
    height: auto;
    right: 15px;
    bottom: 30px;
    /* no drop-shadow */
}

.ab-float-hx-toys {
    width: 185px;
    height: auto;
    top: -112px;
    right: 0;
    /* no drop-shadow */
}

.ab-float-hx-logistics {
    width: 185px;
    height: auto;
    right: 15px;
    bottom: 30px;
    /*filter: drop-shadow(0 16px 28px rgba(0,0,0,.11));*/
}

.ab-brand-pill {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.td-pill {
    background: #e84954;
    color: #fff;
    box-shadow: 0 6px 18px -4px rgba(232, 73, 84, .35);
}

.hx-pill {
    background: #6366f1;
    color: #fff;
    box-shadow: 0 6px 18px -4px rgba(99, 102, 241, .35);
}

/* icon + name row */
.ab-brand-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.ab-brand-ico {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ab-brand-ico svg {
    width: 28px;
    height: 28px;
}

.td-ico {
    background: #e84954;
    color: #fff;
}

.hx-ico {
    background: #6366f1;
    color: #fff;
}

.ab-brand-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #1a202c;
    margin: 0;
    letter-spacing: -.01em;
}

.ab-brand-red {
    color: #e84954;
}

.ab-brand-blue {
    color: #6366f1;
}

.ab-brand-desc {
    font-size: 14px;
    line-height: 1.7;
    color: #64748b;
    margin: 0 0 12px;
    max-width: 340px;
}

/* colored short divider line under the description */
.ab-brand-divider {
    display: block;
    width: 32px;
    height: 3px;
    border-radius: 2px;
    margin-bottom: 12px;
}

.td-divider {
    background: #e84954;
}

.hx-divider {
    background: #6366f1;
}

.ab-brand-list {
    list-style: none;
    margin: 7px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.ab-brand-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.ab-list-ico {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ab-list-ico svg {
    width: 17px;
    height: 17px;
}

.td-li-ico {
    background: #e84954;
    color: #fff;
}

.hx-li-ico {
    background: #6366f1;
    color: #fff;
}

/* center connector: dashed curves + chain link */
.ab-brand-connector {
    position: relative;
    width: 64px;
    min-width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    z-index: 1;
}

.ab-connector-lines {
    position: absolute;
    inset: 0 -28px;
    width: calc(100% + 56px);
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}

.ab-connector-circle {
    position: relative;
    z-index: 2;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e8ecf1;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .10);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ab-connector-chain {
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .12));
}

/* ---- flow strip: customer → ToyDirect → Hatchx → delivery ---- */
.ab-brand-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #edeef1;
    border-radius: 22px;
    padding: 28px 24px;
    box-shadow: 0 14px 40px -16px rgba(15, 23, 42, .07);
}

.ab-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 100px;
}

.ab-flow-ico {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border: 1px solid transparent;
}

.ab-flow-ico svg {
    width: 26px;
    height: 26px;
}

.ab-flow-ico.you {
    background: #e84954;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 0 8px rgba(232, 73, 84, .14);
}

.ab-flow-ico.td {
    background: #e84954;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 0 8px rgba(232, 73, 84, .14);
}

.ab-flow-ico.hx {
    background: #6366f1;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 0 8px rgba(99, 102, 241, .14);
}

.ab-flow-ico.delivery {
    background: #10b981;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 0 8px rgba(16, 185, 129, .14);
}

.ab-flow-node b {
    font-size: 15px;
    font-weight: 700;
    color: #1a202c;
}

.ab-flow-node span {
    font-size: 11.5px;
    color: #94a3b8;
    margin-top: 2px;
}

/* connector between steps: dotted line + chevron circle + dotted line */
.ab-flow-conn {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    max-width: 110px;
    min-width: 40px;
}

.ab-flow-dots {
    flex: 1;
    height: 2px;
    background-image: radial-gradient(circle, #cbd5e1 1.5px, transparent 1.5px);
    background-size: 8px 2px;
    background-repeat: repeat-x;
    background-position: center;
    opacity: .45;
}

.ab-flow-arr {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ab-flow-arr svg {
    width: 15px;
    height: 15px;
}

.ab-flow-conn.red .ab-flow-arr {
    background: #fff0f1;
    color: #e84954;
    box-shadow: 0 0 0 5px rgba(232, 73, 84, .08);
}

.ab-flow-conn.purple .ab-flow-arr {
    background: #eef2ff;
    color: #6366f1;
    box-shadow: 0 0 0 5px rgba(99, 102, 241, .08);
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 1080px) {
    .ab-values-grid {
        gap: 20px;
    }

    .ab-val-card {
        max-width: 190px;
        padding: 30px 14px 26px;
    }

    .ab-story-grid {
        grid-template-columns: 240px 1fr 220px;
        gap: 24px;
    }
}

@media (max-width: 900px) {
    .ab-hero {
        padding: 120px 28px 60px;
    }

    .ab-hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ab-hero-visual {
        order: -1;
        min-height: 320px;
    }

    .ab-hero-img {
        max-width: 420px;
    }

    .ab-desc {
        max-width: 520px;
    }

    .ab-stats {
        max-width: 440px;
    }

    .ab-story-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }

    .ab-story-card {
        aspect-ratio: 16/10;
        order: -1;
        grid-column: span 2;
        max-height: 220px;
    }

    .ab-story-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
        grid-column: span 2;
    }

    .sidebar-item {
        flex: 1;
        min-width: 180px;
    }

    .ab-values {
        padding: 64px 28px 72px;
    }

    .ab-values-grid {
        gap: 16px;
        min-height: 340px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .ab-val-card {
        padding: 28px 14px 24px;
        max-width: 200px;
        flex: 0 1 calc(33% - 12px);
    }

    .ab-val-ico {
        width: 60px;
        height: 60px;
        margin-bottom: 16px;
    }

    .ab-process {
        padding: 40px 28px 90px;
    }

    .ab-process-rail {
        min-width: 760px;
    }

    .ab-process-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .ab-hero {
        padding: 110px 20px 48px;
    }

    .ab-hero-text {
        text-align: center;
    }

    .ab-title {
        font-size: 30px;
    }

    .ab-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .ab-stats {
        margin-left: auto;
        margin-right: auto;
    }

    .ab-stats {
        grid-template-columns: 1fr 1fr;
        gap: 18px 16px;
    }

    .ab-stat-ico {
        width: 42px;
        height: 42px;
    }

    .ab-stat-ico svg {
        width: 20px;
        height: 20px;
    }

    .ab-stat-text strong {
        font-size: 19px;
    }

    .ab-stat-text span {
        font-size: 11.5px;
    }

    .ab-hero-btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }

    .ab-hero-visual {
        min-height: 260px;
    }

    .ab-hero-img {
        max-width: 100%;
    }

    .ab-story {
        padding: 40px 20px 56px;
    }

    .ab-story-grid {
        grid-template-columns: 1fr;
    }

    .ab-story-card {
        aspect-ratio: 2/1;
        grid-column: auto;
        max-height: none;
    }

    .ab-story-sidebar {
        grid-column: auto;
        flex-direction: column;
    }

    .ab-values {
        padding: 48px 20px 64px;
    }

    .ab-values-grid {
        gap: 14px;
        min-height: 300px;
        flex-wrap: wrap;
    }

    .ab-val-card {
        padding: 24px 14px 20px;
        flex: 0 1 calc(50% - 8px);
        max-width: none;
    }

    .ab-val-ico {
        width: 56px;
        height: 56px;
        margin-bottom: 14px;
    }

    .ab-val-ico svg {
        width: 26px;
        height: 26px;
    }

    .ab-process {
        padding: 32px 20px 72px;
    }

    .ab-process-sub {
        font-size: 14px;
    }

    /* ---- Mobile (≤640px): vertical left-rail stepper, matched to reference ---- */
    .ab-process-track {
        overflow-x: visible;
        padding: 0;
    }

    .ab-process-rail {
        min-width: 0;
        width: 100%;
    }

    /* Vertical stack; left padding reserves room for the number rail + line */
    .ab-process-list {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        margin: 30px 0 0;
        padding-left: 34px;
        position: relative;
    }

    /* Continuous vertical line behind the number circles, colored to mimic the
       red/red/purple/purple/red/purple segment pattern of the reference. */
    .ab-process-list::before {
        content: "";
        position: absolute;
        left: 17px;
        top: 18px;
        bottom: 18px;
        width: 2px;
        background: linear-gradient(180deg,
            #e84954 0%, #e84954 33.33%,
            #6366f1 33.33%, #6366f1 66.67%,
            #e84954 66.67%, #e84954 83.33%,
            #6366f1 83.33%, #6366f1 100%);
        border-radius: 2px;
    }

    /* Hide the desktop horizontal connectors */
    .ab-process-connectors {
        display: none;
    }

    /* Each step = card with tinted icon + title/desc, number on the left rail */
    .ab-step {
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: 46px 1fr;
        grid-template-areas: "ico body";
        column-gap: 14px;
        align-items: center;
        text-align: left;
        position: relative;
        padding: 16px 44px 16px 14px; /* right padding clears the chevron */
        min-height: 84px;
        border: 1px solid #eef1f6;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
    }

    /* Number circle on the left rail, centered on the vertical line.
       The rail line sits at list padding-left:34 + line left:17 = 51px from
       the list's left edge. The step card's left edge aligns with the list
       content box, which starts at 34px. Therefore the line is 17px to the
       left of the step card's left edge; a 34px-wide circle centered on that
       line needs its left edge at -34px. This value is inherited by ≤480 too. */
    .ab-step > .ab-step-num {
        position: absolute;
        left: -34px;
        top: 50%;
        transform: translateY(-50%);
        width: 34px;
        height: 34px;
        font-size: 11px;
        line-height: 34px;
        text-align: center;
        padding-top: 0;
        display: block;
        z-index: 3;
    }

    /* Right-hand chevron (reference design) */
    .ab-step::after {
        content: "";
        position: absolute;
        right: 18px;
        top: 50%;
        width: 8px;
        height: 8px;
        border-top: 2px solid;
        border-right: 2px solid;
        transform: translateY(-50%) rotate(45deg);
    }
    .ab-step[data-theme="red"]::after    { border-color: #e84954; }
    .ab-step[data-theme="purple"]::after { border-color: #6366f1; }
    .ab-step[data-theme="teal"]::after   { border-color: #0d9488; }
    .ab-step[data-theme="indigo"]::after { border-color: #4f46e5; }

    .ab-step-ico {
        grid-area: ico;
        width: 46px;
        height: 46px;
        margin-bottom: 0;
    }
    .ab-step-ico svg { width: 22px; height: 22px; }

    /* Text column: a single flex column so the title+desc block centers
       vertically as a unit, matching the reference layout. */
    .ab-step-body {
        grid-area: body;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2px;
    }

    .ab-step-body b {
        font-size: 14px;
        line-height: 1.3;
        color: #111827;
        margin-bottom: 0; /* override desktop 8px margin */
    }

    .ab-step-body span {
        display: block;
        font-size: 12px;
        line-height: 1.5;
        color: #94a3b8;
        max-width: 130px;
        text-align: center;
    }

    /* decorative bottom bar not used in the horizontal card */
    .ab-step-bar { display: none; }

    /* Fix: hide the little rail stub that keeps showing below the final "07"
       circle. The continuous vertical line (::before) runs to bottom:18px, so
       it continues past the last number. This mask paints page-white over the
       rail column from the last circle's vertical center downward. It sits
       above the line (z-index:auto) but below the number circle (z-index:3),
       and is white-on-white so any slight overflow is invisible. Geometry
       (left:-34px / line left:17px / padding-left:34px) matches the existing
       rail, and is inherited by the <=480 block too. */
    .ab-step:last-child::before {
        content: "";
        position: absolute;
        left: -34px;
        top: 50%;
        width: 34px;
        height: 80px;
        background: #fff;
        z-index: 2;
    }

    .ab-process-features {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Mobile feature cards: keep the icon-left / text-right row, but balance it
       by vertically centering the icon against the title+desc block (desktop
       used flex-start, leaving a ~13px gap under the smaller 44px icon). Tighter
       padding gives the single-column cards a cleaner rhythm. */
    .ab-process-feature {
        align-items: center;
        padding: 16px;
        gap: 14px;
    }

    .ab-pf-ico {
        width: 44px;
        height: 44px;
    }

    .ab-pf-ico svg {
        width: 22px;
        height: 22px;
    }
}

/* Swipe hint only applies to the desktop horizontal-scroll flow (≤900px, >640px).
   On phones the flow becomes a vertical stepper, so the hint is hidden. */
.ab-process-hint {
    display: none;
}

@media (max-width: 900px) and (min-width: 641px) {
    .ab-process-hint {
        display: block;
        text-align: center;
        margin: 2px 0 12px;
        font-size: 12px;
        letter-spacing: .05em;
        color: #94a3b8;
    }
}

/* ---- Brand architecture responsive ---- */
@media (max-width: 1080px) {
    .ab-brand-cards {
        gap: 18px;
    }

    .ab-float-td-mascot {
        width: 112px;
        top: -24px;
        left: -90px;
        /* no drop-shadow */
    }

    .ab-float-td-cart {
        width: 130px;
        right: -10px;
        bottom: -22px;
        /* no drop-shadow */
    }

    .ab-float-hx-toys {
        width: 165px;
        top: -54px;
        right: -54px;
        /* no drop-shadow */
    }

    .ab-float-hx-logistics {
        width: 165px;
        right: -14px;
        bottom: -20px;
    }
}

@media (max-width: 900px) {
    .ab-brand {
        padding: 20px 28px 64px;
    }

    .ab-brand-cards {
        grid-template-columns: 1fr;
        gap: 52px;
        margin: 56px 0 36px;
    }

    .ab-brand-connector {
        width: 54px;
        height: 54px;
        margin: -8px auto;
        transform: rotate(90deg);
    }

    .ab-connector-lines {
        display: none;
    }

    .ab-brand-card {
        min-height: 380px;
        padding: 30px 28px;
    }

    .ab-float-td-mascot {
        width: 108px;
        top: -20px;
        left: -78px;
        /* no drop-shadow */
    }

    .ab-float-td-cart {
        width: 130px;
        right: -10px;
        bottom: -24px;
        /* no drop-shadow */
    }

    .ab-float-hx-toys {
        width: 160px;
        top: -48px;
        right: -48px;
        /* no drop-shadow */
    }

    .ab-float-hx-logistics {
        width: 160px;
        right: -16px;
        bottom: -22px;
    }
}

@media (max-width: 640px) {
    .ab-brand {
        padding: 16px 20px 48px;
        overflow-x: hidden;
    }

    .ab-brand-cards {
        width: 100%;
        gap: 44px;
        margin: 48px 0 30px;
    }

    .ab-brand-card {
        width: 100%;
        padding: 26px 22px;
        min-height: 0;
        border-radius: 18px;
        box-sizing: border-box;
    }

    .ab-brand-float {
        display: none;
    }

    .ab-brand-pill {
        font-size: 10px;
        padding: 6px 12px;
    }

    .ab-brand-header {
        gap: 10px;
        margin-bottom: 10px;
    }

    .ab-brand-ico {
        width: 48px;
        height: 48px;
    }

    .ab-brand-ico svg {
        width: 24px;
        height: 24px;
    }

    .ab-brand-name {
        font-size: 24px;
    }

    .ab-brand-desc {
        margin-bottom: 12px;
        max-width: none;
    }

    .ab-brand-list {
        gap: 11px;
    }

    .ab-brand-list li {
        font-size: 13px;
    }

    .ab-brand-divider {
        width: 28px;
    }

    .ab-list-ico {
        width: 30px;
        height: 30px;
    }

    .ab-list-ico svg {
        width: 14px;
        height: 14px;
    }

    .ab-brand-flow {
        gap: 10px;
        padding: 22px 14px;
        border-radius: 18px;
    }

    .ab-flow-node {
        min-width: 70px;
    }

    .ab-flow-ico {
        width: 48px;
        height: 48px;
    }

    .ab-flow-ico svg {
        width: 22px;
        height: 22px;
    }

    .ab-flow-node b {
        font-size: 13px;
    }

    .ab-flow-node span {
        font-size: 10.5px;
    }

    .ab-flow-conn {
        display: none;
    }
}

@media (max-width: 480px) {
    .ab-brand-flow {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 12px;
        padding: 22px 16px;
    }

    .ab-flow-node {
        min-width: 0;
    }

    .ab-flow-node b {
        font-size: 12px;
    }

    .ab-flow-node span {
        font-size: 10px;
    }

    .ab-flow-ico {
        width: 44px;
        height: 44px;
        margin-bottom: 10px;
    }

    .ab-flow-ico svg {
        width: 20px;
        height: 20px;
    }

    /* Ultra-small phones: tighten card-inner spacing only. The rail geometry
       (list padding-left, vertical-line position, number-circle placement) is
       inherited from the ≤640 block so the number stays centered on the rail
       at every width — no per-breakpoint left hacks. */
    .ab-process-list {
        margin-top: 22px;
    }

    .ab-step {
        padding: 12px 40px 12px 12px; /* right padding clears the chevron */
        gap: 12px;
        margin-bottom: 12px;
        min-height: 62px;
    }

    .ab-step > .ab-step-num {
        font-size: 10px;
        line-height: 34px;
    }

    .ab-step-ico {
        width: 42px;
        height: 42px;
    }

    .ab-step-ico svg {
        width: 20px;
        height: 20px;
    }

    .ab-step-body {
        gap: 1px;
        align-items: center;
    }

    .ab-step-body b {
        font-size: 13px;
    }

    .ab-step-body span {
        display: block;
        font-size: 11px;
        line-height: 1.5;
        max-width: 130px;
        text-align: center;
    }
}

/* ---- Our Journey / Leadership Team / Success Stories responsive ---- */
@media (max-width: 900px) {
    .ab-journey {
        padding: 56px 24px 64px;
    }

    .ab-journey-header {
        margin-bottom: 48px;
        padding: 0; /* illustrations hidden on mobile, so no side padding needed */
    }

    .ab-journey-plane,
    .ab-journey-globe {
        display: none;
    }

    /* hide desktop-only teardrop connector on mobile single column */
    .ab-journey-card::before,
    .ab-journey-card::after,
    .ab-journey-item::after {
        display: none;
    }

    .ab-journey-line {
        left: 28px;
        transform: none;
    }

    .ab-journey-list {
        gap: 28px;
    }

    .ab-journey-item::before {
        left: 28px;
        transform: translate(-50%, -50%);
    }

    .ab-journey-card,
    .ab-journey-item:nth-child(odd) .ab-journey-card,
    .ab-journey-item:nth-child(even) .ab-journey-card {
        width: auto;
        margin-left: 0;
        margin-right: 0;
        flex-direction: row;
        padding: 14px;
        gap: 12px;
    }

    .ab-journey-icon {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
    }

    .ab-journey-icon svg {
        width: 22px;
        height: 22px;
    }

    .ab-journey-media {
        flex: 0 0 90px;
        width: 90px;
        height: 68px;
    }

    .ab-journey-card-title {
        font-size: 15px;
    }

    .ab-journey-card-desc {
        font-size: 12px;
    }

    .ab-journey-stats {
        flex-direction: column;
        gap: 24px;
        padding: 24px;
        margin-top: 48px;
    }

    .ab-journey-stat-items {
        width: 100%;
        justify-content: space-around;
        gap: 16px;
    }

    .ab-journey-stat b {
        font-size: 18px;
    }

    .ab-team {
        padding: 20px 28px 64px;
    }

    .ab-team-line--fade-in,
    .ab-team-line--fade-out {
        width: 48px;
    }

    .ab-team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 20px;
        margin-top: 46px;
    }

    .ab-team-card {
        padding: 60px 16px 22px;
    }

    .ab-team-avatar-wrap {
        width: 150px;
        height: 150px;
    }

    .ab-team-focus {
        min-height: 54px;
    }

    .ab-team-banner {
        padding: 16px 28px 50px;
    }

    .ab-banner-pill {
        padding: 16px 28px;
        gap: 12px;
        border-radius: 60px;
    }

    .ab-banner-cube {
        width: 38px;
        height: 38px;
    }

    .ab-banner-cube svg {
        width: 18px;
        height: 18px;
    }

    .ab-banner-text {
        font-size: 15px;
    }

    .ab-banner-img--left {
        width: 130px;
        bottom: -18px;
        left: -6px;
    }

    .ab-banner-img--right {
        width: 170px;
        bottom: -18px;
        right: -6px;
    }

    .ab-cases {
        padding: 20px 28px 72px;
    }

    .ab-case-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ab-case-media--right,
    .ab-case-row:nth-child(even) .ab-case-content {
        order: 0;
    }

    .ab-case-content {
        padding: 28px 28px 30px;
    }

    .ab-case-title {
        font-size: 19px;
    }

    .ab-case-body {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .ab-case-media {
        min-height: 280px;
    }

    .ab-case-photo {
        min-height: 280px;
    }
}

@media (max-width: 640px) {
    .ab-journey {
        padding: 40px 20px 52px;
    }

    .ab-journey-card,
    .ab-journey-item:nth-child(odd) .ab-journey-card,
    .ab-journey-item:nth-child(even) .ab-journey-card {
        flex-wrap: wrap;
    }

    .ab-journey-media {
        order: -1;
        flex: 0 0 100%;
        width: 100%;
        height: 140px;
        margin-bottom: 12px;
    }

    .ab-journey-icon {
        order: 1;
    }

    .ab-journey-content {
        order: 2;
        flex: 1 1 0;
    }

    .ab-team {
        padding: 16px 20px 48px;
    }

    .ab-team-label {
        font-size: 11.5px;
        gap: 8px;
    }

    .ab-team-line--fade-in,
    .ab-team-line--fade-out {
        width: 34px;
    }

    .ab-team-ul-line {
        width: 32px;
    }

    .ab-team-grid {
        grid-template-columns: 1fr;
        gap: 32px 16px;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }

    .ab-team-card {
        padding: 60px 20px 24px;
    }

    .ab-team-avatar-wrap {
        width: 150px;
        height: 150px;
    }

    .ab-team-focus {
        min-height: auto;
    }

    .ab-team-traits {
        padding-top: 16px;
    }

    .ab-team-trait svg {
        width: 20px;
        height: 20px;
    }

    .ab-team-trait span {
        font-size: 9.5px;
    }

    .ab-team-banner {
        padding: 10px 20px 30px;
    }

    .ab-banner-pill {
        padding: 14px 22px;
        border-radius: 50px;
        gap: 10px;
        text-align: center;
    }

    .ab-banner-cube {
        width: 34px;
        height: 34px;
    }

    .ab-banner-cube svg {
        width: 16px;
        height: 16px;
    }

    .ab-banner-text {
        font-size: 13.5px;
        text-align: center;
    }

    .ab-banner-img {
        display: none;
    }

    .ab-cases {
        padding: 16px 20px 56px;
    }

    .ab-cases-grid {
        gap: 40px;
        margin-top: 40px;
    }

    .ab-case-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ab-case-row:nth-child(even) .ab-case-media,
    .ab-case-row:nth-child(even) .ab-case-content {
        order: 0;
    }

    .ab-case-media {
        min-height: 220px;
    }

    .ab-case-photo {
        min-height: 220px;
    }

    .ab-case-content {
        padding: 24px 22px 26px;
    }

    .ab-case-title {
        font-size: 18px;
        margin-bottom: 18px;
    }

    .ab-case-takeaways {
        gap: 8px 10px;
    }

    .ab-case-takeaways li {
        font-size: 12px;
        padding: 5px 11px;
    }

    .ab-case-body {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ab-cases-footer {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        margin-top: 44px;
    }

    .ab-cases-footer-text {
        font-size: 16px;
    }
}

/* =====================================================
   FACTORY CERTIFICATIONS — compliance badge grid
   ===================================================== */
.ab-certs {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    padding: 80px 40px 90px;
}

.ab-certs-sub {
    max-width: 640px;
    margin: 16px auto 0;
    font-size: 15px;
    line-height: 1.7;
    color: #64748b;
}

/* ---------- FACTORY CERTIFICATIONS hexagon badge ---------- */
.ab-cert-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 18px;
}

.ab-cert-badge-line {
    width: 70px;
    height: 2px;
    background: #e84954;
    border-radius: 2px;
}

.ab-cert-badge-dot {
    width: 6px;
    height: 6px;
    background: #e84954;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: 4px;
    margin-right: 12px;
}

.ab-cert-badge-dot--right {
    margin-left: 12px;
    margin-right: 4px;
}

/* 等边长六边形：宽高比固定为 2 : √3 ≈ 1 : 0.866，使六条边的像素长度一致 */
.ab-cert-badge-hex {
    width: 52px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    /* box-shadow is clipped away by clip-path; use drop-shadow so the
       hexagon outline actually casts a visible soft shadow */
    filter: drop-shadow(0 5px 12px rgba(15, 23, 42, .16));
}

.ab-cert-badge-hex-bg {
    width: 42px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e84954;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    color: #fff;
}

.ab-cert-badge-hex-bg svg {
    width: 20px;
    height: 20px;
}

.ab-cert-badge-text {
    display: inline-flex;
    align-items: center;
    height: 32px;
    min-width: 220px;
    padding: 0 26px 0 20px;
    margin-left: -7px;
    background: #fff;
    border-radius: 0 50px 50px 0;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #e84954;
}

.ab-certs-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    margin-top: 44px;
}

.ab-cert-card {
    text-align: center;
    padding: 48px 18px 44px;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 18px;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1),
    box-shadow .35s ease, border-color .35s ease;
}

.ab-cert-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
    border-color: #d8dde4;
}

.ab-cert-seal {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.ab-cert-seal svg {
    width: 34px;
    height: 34px;
}

.ab-cert-acro {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #111827;
    line-height: 1.1;
}

.ab-cert-region {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-top: 6px;
}

.ab-cert-desc {
    font-size: 12.5px;
    line-height: 1.55;
    color: #7a8599;
    margin: 10px 0 0;
}

/* ---------- CTA banner (centered, height reduced) ---------- */
.ab-certs-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    max-width: 690px;
    margin: 30px auto 0;
    padding: 12px 20px 12px 26px; /* 右侧留 20px，让图片距右边约 20px */
    background: #fef6f6;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

.ab-certs-cta-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid rgba(232, 73, 84, .18);
    border-radius: 50%;
    color: #e84954;
}

.ab-certs-cta-icon svg {
    width: 24px;
    height: 24px;
}

.ab-certs-cta-text {
    flex: 1;
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #334155;
    text-align: left;
}

.ab-certs-cta-text strong {
    color: #e84954;
    font-weight: 700;
}

.ab-certs-cta-img {
    flex-shrink: 0;
    width: auto;
    height: 122px; /* 视觉高度 > 盒子内容高度(≈52px)，形成"图片大于盒子"效果 */
    object-fit: contain;
    /* 负上下外边距：让图片的布局占用高度保持≈盒子高度，但视觉高度溢出盒子上下边 */
    margin: -34px 0;
}

/* seal + region color variants */
.cert-red .ab-cert-seal {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #dc2626;
}

.cert-red .ab-cert-region {
    color: #e84954;
}

.cert-teal .ab-cert-seal {
    background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
    color: #0d9488;
}

.cert-teal .ab-cert-region {
    color: #0d9488;
}

.cert-indigo .ab-cert-seal {
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    color: #6366f1;
}

.cert-indigo .ab-cert-region {
    color: #6366f1;
}

.cert-green .ab-cert-seal {
    background: linear-gradient(135deg, #f0fdf6, #dcfce7);
    color: #059669;
}

.cert-green .ab-cert-region {
    color: #059669;
}

/* responsive */
@media (max-width: 980px) {
    .ab-certs-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 760px) {
    .ab-certs-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 22px;
        gap: 14px;
    }

    .ab-certs-cta-text {
        text-align: left;
        font-size: 15px;
    }

    .ab-certs-cta-img {
        height: 84px;
        margin: 0;
    }
}

@media (max-width: 620px) {
    .ab-certs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ab-certs {
        padding: 64px 22px 72px;
    }

    /* Shrink the decorative badge so it never overflows a narrow screen. */
    .ab-cert-badge-line {
        width: 30px;
    }

    .ab-cert-badge-dot {
        margin-right: 8px;
    }

    .ab-cert-badge-dot--right {
        margin-left: 8px;
    }

    .ab-cert-badge-text {
        min-width: auto;
        padding: 0 18px 0 14px;
        font-size: 10px;
        letter-spacing: .1em;
    }
}

@media (max-width: 420px) {
    .ab-certs-grid {
        grid-template-columns: 1fr;
    }

    /* On very small screens hide the outer lines/dots and keep just
       hexagon + pill label centered and fully inside the viewport. */
    .ab-cert-badge-line,
    .ab-cert-badge-dot {
        display: none;
    }

    .ab-cert-badge {
        width: 100%;
        justify-content: center;
    }

    .ab-cert-badge-text {
        border-radius: 0 50px 50px 0;
        padding: 0 16px 0 12px;
        font-size: 9.5px;
    }
}