/* ============================================================
   RoboSpati — About page
   ============================================================ */

/* ---- Story / intro ---- */
.about-story-photo {
    position: relative;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 20px 40px -15px rgba(3, 22, 47, 0.18);
    border: 1px solid rgba(3, 22, 47, 0.08);
    background: #03162F;
    margin: 0;
}
.about-story-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 3/2;
    object-fit: cover;
    object-position: center 18%;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.about-story-photo:hover img {
    transform: scale(1.02);
}
.photo-floating-pill {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(3, 22, 47, 0.12);
    padding: 0.45rem 1rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #03162F;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    z-index: 2;
    pointer-events: none;
}

/* ---- Mission / vision ---- */
.mission-vision-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 0;
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .mission-vision-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.mission-card {
    background: linear-gradient(135deg, #03152D 0%, #072750 100%);
    color: #fff;
    border-radius: var(--radius-card);
    padding: 1.85rem 1.6rem;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    transition: transform var(--transition);
}
.mission-card.vision {
    background: linear-gradient(135deg, #03162F 0%, #062246 100%) !important;
    box-shadow: 0 10px 25px rgba(3, 22, 47, 0.25);
}
.mission-card:hover { transform: translateY(-4px); }
.mission-card i { font-size: 1.8rem; color: #6CC3FF; }
.mission-card.vision i { color: #fff; }
.mission-card h3 {
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: var(--fw-bold);
    margin: .6rem 0 .4rem;
}
.mission-card p {
    color: rgba(255, 255, 255, .82);
    font-size: var(--fs-small);
    line-height: 1.5;
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .mission-vision-grid { grid-template-columns: 1fr; }
}

/* ---- Values (5 columns) ---- */
.values-section { background: var(--gray); }
.values-five-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.2rem;
}
.value-card-mini {
    background: #FFFFFF;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-card);
    padding: 1.8rem 1.4rem;
    position: relative;
    box-shadow: var(--shadow-xs);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.value-card-mini:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: rgba(0, 102, 245, .4);
}
.value-num {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: .85rem;
    color: var(--muted);
    opacity: .6;
}
.value-card-mini .value-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: rgba(0, 102, 245, .08);
    color: var(--cta);
    margin-bottom: 1.2rem;
}
.value-card-mini h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: var(--fw-bold);
    color: var(--heading-color);
    margin-bottom: .4rem;
}
.value-card-mini p {
    font-size: var(--fs-xs);
    color: var(--body-color);
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 991.98px) {
    .values-five-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575.98px) {
    .values-five-grid { grid-template-columns: 1fr; }
}

/* ---- Journey Roadmap (Highway Ribbon Timeline) ---- */
.journey-section {
    background: #f4f8fb;
    overflow: hidden;
    padding: 5.5rem 0;
}
.journey-section .section-title {
    font-weight: 600;
}

.roadmap-showcase-container {
    position: relative;
    width: 100%;
    margin-top: 2.5rem;
}

.roadmap-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.5rem 0 2.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(3, 22, 47, 0.35) transparent;
}
.roadmap-scroll-wrapper::-webkit-scrollbar {
    height: 6px;
}
.roadmap-scroll-wrapper::-webkit-scrollbar-thumb {
    background: rgba(3, 22, 47, 0.35);
    border-radius: 999px;
}

.roadmap-canvas-stage {
    position: relative;
    width: 1140px;
    height: 600px;
    margin: 0 auto;
}

.roadmap-highway-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 1140px;
    height: 600px;
    pointer-events: none;
    z-index: 1;
}

.roadmap-card {
    position: absolute;
    width: 242px;
    background: #FFFFFF;
    border-radius: 20px;
    padding: 18px 20px 16px;
    box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.07), 0 4px 10px -2px rgba(0, 0, 0, 0.04);
    z-index: 5;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.roadmap-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -4px rgba(0, 0, 0, 0.10), 0 6px 14px -2px rgba(0, 0, 0, 0.05);
}

/* Scaled card coordinates matching mockup */
.card-pos-1 { left: 131px; top: 75px; }
.card-pos-2 { left: 253px; top: 310px; }
.card-pos-3 { left: 471px; top: 56px; }
.card-pos-4 { left: 688px; top: 310px; }
.card-pos-5 { left: 753px; top: 37px; }

/* Speech arrow pointers pointing directly to nodes */
.speech-arrow {
    position: absolute;
    width: 0;
    height: 0;
}
.speech-arrow.arrow-down {
    bottom: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #FFFFFF;
}
.speech-arrow.arrow-up {
    top: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #FFFFFF;
}

.card-pos-1 .speech-arrow { left: 22px; }
.card-pos-2 .speech-arrow { left: 118px; }
.card-pos-3 .speech-arrow { left: 117px; }
.card-pos-4 .speech-arrow { left: 118px; }
.card-pos-5 .speech-arrow { right: 22px; }

.roadmap-year-pill {
    display: inline-block;
    background: #e8eef6;
    color: #03162F;
    border: 1px solid rgba(3, 22, 47, 0.12);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.roadmap-card-title {
    font-family: var(--font-heading);
    font-size: 15.5px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 6px 0;
    line-height: 1.25;
    white-space: nowrap;
}

.roadmap-card-text {
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

/* ---- Office / Map ---- */
.office-list { list-style: none; padding: 0; margin: 0; }
.office-list li {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    margin-bottom: 1.1rem;
    color: var(--body-color);
}
.office-list i {
    color: var(--cta);
    font-size: 1.25rem;
    margin-top: .15rem;
}
.office-list a { color: var(--cta); text-decoration: none; }
.office-list a:hover { color: var(--navy); }

.map-frame-wrapper { position: relative; }
.map-frame {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-card);
}
.map-frame iframe { display: block; }
.map-floating-badge {
    position: absolute;
    bottom: 1.2rem;
    left: 1.2rem;
    background: #03152D;
    color: #fff;
    padding: .75rem 1.3rem;
    border-radius: var(--radius-pill);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    gap: .75rem;
    z-index: 2;
}
.map-floating-badge strong {
    display: block;
    font-size: .85rem;
    font-family: var(--font-heading);
    color: #fff;
}
.map-floating-badge span {
    display: block;
    font-size: .75rem;
    color: #6CC3FF;
}

/* ---- Team Monogram Avatar ---- */
.team-avatar-monogram {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #EBF3FC 0%, #CEE5FA 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: var(--fw-black);
    font-size: 3.2rem;
    color: #03162F;
    letter-spacing: .02em;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.team-card {
    background: #FFFFFF;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-card);
    overflow: hidden;
    display: block;
    text-decoration: none;
    box-shadow: var(--shadow-xs);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.team-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(3, 22, 47, 0.12);
    border-color: rgba(3, 22, 47, 0.25);
}
.team-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: top center;
    display: block;
    background: #F1F8FE;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.team-card:hover img {
    transform: scale(1.03);
}
.team-card-body {
    padding: 1.25rem 1.4rem;
}
.team-card-body h3 {
    color: var(--heading-color);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    margin: 0 0 .2rem;
}
.team-position {
    color: var(--muted);
    font-size: var(--fs-xs);
}