/* ==========================================================================
   RESPONSIVE DESIGN SYSTEM — MASTER STYLESHEET
   Covering: Home (index.html), About Us (about.html), Services (services.html),
             Projects (projects.html), Contact Us (contact.html)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. GLOBAL OVERFLOW SAFETY
   -------------------------------------------------------------------------- */
html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
    position: relative;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

img, video, iframe, canvas, svg {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   1. NAVIGATION BAR (RESPONSIVE HAMBURGER MENU)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .navbar {
        padding: 12px 24px !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 99999 !important;
    }

    .nav-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-around !important;
        width: 42px !important;
        height: 42px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 10px !important;
        padding: 9px !important;
        cursor: pointer !important;
        z-index: 100001 !important;
    }

    .nav-toggle span {
        display: block !important;
        width: 100% !important;
        height: 2px !important;
        background: #ffffff !important;
        border-radius: 2px !important;
        transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    .nav-toggle.open span:nth-child(1) {
        transform: translateY(8px) rotate(45deg) !important;
    }
    .nav-toggle.open span:nth-child(2) {
        opacity: 0 !important;
    }
    .nav-toggle.open span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg) !important;
    }

    .nav-links {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: rgba(10, 15, 29, 0.97) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        flex-direction: column !important;
        padding: 20px 24px !important;
        gap: 12px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 0 0 20px 20px !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
        z-index: 100000 !important;
    }

    .nav-links.open {
        display: flex !important;
    }

    .nav-links a {
        font-size: 1.05rem !important;
        font-weight: 600 !important;
        padding: 12px 18px !important;
        width: 100% !important;
        border-radius: 12px !important;
        text-align: left !important;
        color: rgba(255, 255, 255, 0.85) !important;
    }

    .nav-links a.active, .nav-links a:hover {
        background: rgba(255, 91, 36, 0.15) !important;
        color: #ff5b24 !important;
    }
}

@media (max-width: 480px) {
    .navbar {
        padding: 10px 14px !important;
    }
    .logo {
        font-size: 1.15rem !important;
    }
    .desktop-cta {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   INNER PAGES BREADCRUMB & HERO TITLE SPACING (MOBILE FIX)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .hero-page-section, .hero-section-new, .inner-hero-section, .hero-contact-section, .projects-hero-section, .hero-projects-section, .hero-services-section {
        padding-top: 130px !important;
        padding-bottom: 50px !important;
    }
}

@media (max-width: 768px) {
    .hero-page-section, .hero-section-new, .inner-hero-section, .hero-contact-section, .projects-hero-section, .hero-projects-section, .hero-services-section {
        padding-top: 140px !important;
        padding-bottom: 40px !important;
        text-align: center !important;
    }

    .hero-page-container, .inner-hero-container, .hero-contact-container, .hero-services-container, .hero-projects-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .breadcrumb {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto 20px auto !important;
        position: relative !important;
        z-index: 10 !important;
        padding: 6px 18px !important;
        font-size: 0.82rem !important;
        flex-shrink: 0 !important;
    }

    .hero-heading-wrap,
    .services-hero-heading-wrap,
    .hero-projects-section .hero-heading-wrap {
        margin-top: 18px !important;
        margin-bottom: 24px !important;
        position: relative !important;
        display: block !important;
        width: 100% !important;
        clear: both !important;
    }

    .hero-heading-main, .page-main-title {
        font-size: 2.2rem !important;
        line-height: 1.25 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        display: block !important;
    }
}

@media (max-width: 480px) {
    .hero-page-section, .hero-section-new, .inner-hero-section, .hero-contact-section, .projects-hero-section {
        padding-top: 140px !important;
    }
    .hero-heading-main, .page-main-title {
        font-size: 1.85rem !important;
    }
}

/* --------------------------------------------------------------------------
   HOMEPAGE HERO HEADER CLEARANCE
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .hero-section {
        padding-top: 140px !important;
        padding-bottom: 40px !important;
        min-height: auto !important;
    }

    .hero-top-row {
        margin-top: 0 !important;
        padding-top: 0 !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .hero-greeting {
        display: block !important;
        font-size: 1.1rem !important;
        margin-bottom: 12px !important;
    }

    .hero-title, h1.hero-title {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
        margin-top: 0 !important;
    }

    .hero-right {
        padding-top: 0 !important;
    }
}

@media (max-width: 480px) {
    .hero-section {
        padding-top: 145px !important;
    }
    .hero-title, h1.hero-title {
        font-size: 1.85rem !important;
    }
}

/* --------------------------------------------------------------------------
   CAPTION CARD ANCHORED TO BOTTOM OF PROFILE PHOTO
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .fun-facts-layout, .fun-facts-grid-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        align-items: center !important;
        width: 100% !important;
    }

    .center-photo-wrap, .fun-facts-center-photo-wrap {
        order: 1 !important;
        width: 100% !important;
        max-width: 340px !important;
        margin: 0 auto !important;
        position: relative !important;
        padding: 0 !important;
    }

    .center-portrait-card {
        position: relative !important;
        width: 100% !important;
        max-width: 340px !important;
        aspect-ratio: 4/5 !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        display: block !important;
    }

    .center-portrait-img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important;
        z-index: 1 !important;
    }

    .portrait-badge-overlay {
        position: absolute !important;
        bottom: 16px !important;
        left: 16px !important;
        right: 16px !important;
        top: auto !important;
        transform: none !important;
        width: auto !important;
        margin: 0 !important;
        z-index: 10 !important;
        padding: 12px 16px !important;
        background: rgba(8, 8, 10, 0.75) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border: 1px solid rgba(255, 91, 36, 0.4) !important;
        border-radius: 16px !important;
        text-align: center !important;
    }

    .facts-col {
        order: 2 !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin-top: 0 !important;
    }

    .stat-card {
        padding: 20px 16px !important;
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .stat-number {
        font-size: 2.4rem !important;
        margin-bottom: 6px !important;
    }

    .stat-label {
        font-size: 0.85rem !important;
    }
}

/* --------------------------------------------------------------------------
   3+ YEARS EXP BADGE ANCHORED TO BOTTOM OF ABOUT PHOTO
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .about-me-container, .intro-profile-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        align-items: center !important;
    }

    .about-photo-wrap, .profile-photo-wrapper, .profile-frame {
        position: relative !important;
        width: 100% !important;
        max-width: 340px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border-radius: 24px !important;
        overflow: hidden !important;
    }

    .about-photo-wrap img, .profile-frame img, .profile-img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        border-radius: 24px !important;
    }

    .about-exp-card {
        position: absolute !important;
        bottom: 16px !important;
        left: 16px !important;
        right: 16px !important;
        top: auto !important;
        transform: none !important;
        width: auto !important;
        margin: 0 !important;
        z-index: 10 !important;
        padding: 10px 16px !important;
        background: rgba(8, 8, 10, 0.85) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border: 1px solid rgba(255, 91, 36, 0.45) !important;
        border-radius: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 12px !important;
    }
}

/* --------------------------------------------------------------------------
   ISSUE 3: BILLED MONTHLY / YEARLY TOGGLE SWITCH STYLING (MOBILE)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .pricing-toggle-wrap {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        margin-bottom: 36px !important;
    }

    .pricing-toggle-label {
        font-size: 0.88rem !important;
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.7) !important;
        white-space: nowrap !important;
    }

    .pricing-toggle-label.active {
        color: #ffffff !important;
    }

    /* Pristine pill-shaped slider button, explicitly overriding global min-height */
    .pricing-switch-btn {
        width: 56px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        padding: 3px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border-radius: 999px !important;
        border: none !important;
        display: inline-flex !important;
        align-items: center !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    .pricing-switch-btn.active {
        background: #ff5b24 !important;
    }

    .pricing-switch-thumb {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        background: #ffffff !important;
        border-radius: 50% !important;
        transition: transform 0.3s ease !important;
        display: block !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        transform: translateX(0) !important;
    }

    .pricing-switch-btn.active .pricing-switch-thumb {
        transform: translateX(26px) !important;
    }

    .discount-badge-pill {
        font-size: 0.75rem !important;
        padding: 4px 10px !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 390px) {
    .pricing-toggle-wrap {
        gap: 8px !important;
    }
    .pricing-toggle-label {
        font-size: 0.78rem !important;
    }
    .discount-badge-pill {
        font-size: 0.7rem !important;
        padding: 3px 8px !important;
    }
}

/* --------------------------------------------------------------------------
   PRICING CARDS — CENTERED CAROUSEL, HEIGHT & BUTTON STYLING (MOBILE ONLY)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .pricing-container-new {
        overflow: visible !important;
    }

    .pricing-grid-3 {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        align-items: flex-start !important; /* Content-fit height, no excessive stretching */
        overflow-x: auto !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 11% !important;
        padding-right: 11% !important;
        padding-top: 26px !important; /* Headroom for Most Popular badge */
        padding-bottom: 20px !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .pricing-grid-3::-webkit-scrollbar {
        display: none !important;
    }

    /* ISSUE 1 FIX: Content-fit card height with tight modern spacing */
    .pricing-card-v3 {
        flex: 0 0 78% !important;
        min-width: 0 !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
        margin-right: 14px !important;
        padding: 24px 20px 20px 20px !important;
        border-radius: 24px !important;
        box-sizing: border-box !important;
        height: auto !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        gap: 16px !important;
        position: relative !important;
        overflow: visible !important;
    }

    .pricing-card-v3:last-child {
        margin-right: 0 !important;
    }

    .plan-name {
        font-size: 1.2rem !important;
        margin-bottom: 4px !important;
    }

    .plan-price-num {
        font-size: 2.5rem !important;
        line-height: 1 !important;
        margin-bottom: 2px !important;
    }

    .plan-price-period {
        font-size: 0.82rem !important;
    }

    .plan-desc {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
        margin-top: 6px !important;
        margin-bottom: 14px !important;
    }

    .plan-features-list {
        margin-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .plan-features-list li {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }

    /* Most Popular Badge: clear positioning and headroom */
    .popular-badge-top {
        position: absolute !important;
        top: -14px !important;
        right: 20px !important;
        z-index: 20 !important;
        white-space: nowrap !important;
    }

    /* ISSUE 2 FIX: Full-width, polished, non-clipped Get Started button */
    .pricing-card-v3 .btn-pill,
    .pricing-card-v3 .btn-orange {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 12px 16px !important;
        min-height: 46px !important;
        border-radius: 999px !important;
        background: #ff5b24 !important;
        color: #ffffff !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        border: none !important;
        box-shadow: 0 6px 20px rgba(255, 91, 36, 0.35) !important;
        box-sizing: border-box !important;
        margin-top: 16px !important;
    }

    .pricing-card-v3 .btn-pill span:first-child {
        white-space: nowrap !important;
    }

    .pricing-card-v3 .arrow-circle {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        font-size: 0.85rem !important;
        background: #ffffff !important;
        color: #ff5b24 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 390px) {
    .pricing-grid-3 {
        padding-left: 9% !important;
        padding-right: 9% !important;
    }
    .pricing-card-v3 {
        flex: 0 0 82% !important;
        padding: 22px 18px 18px 18px !important;
    }
    .pricing-card-v3 .btn-pill,
    .pricing-card-v3 .btn-orange {
        font-size: 0.82rem !important;
        padding: 10px 12px !important;
    }
}


/* --------------------------------------------------------------------------
   SKILL PROGRESS BAR CARDS
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .tools-grid, .skills-grid, .skill-cards-grid, .skill-bars-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .tool-card, .skill-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 20px !important;
    }

    .tool-name, .skill-name {
        font-size: 0.95rem !important;
        word-break: break-word !important;
    }

    .progress-bar-bg {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* --------------------------------------------------------------------------
   GENERAL CARDS & GRID RESPONSIVE STACKING
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .services-cards-grid-3,
    .pricing-grid-3,
    .projects-grid,
    .blog-grid-3,
    .testimonials-grid-3,
    .approach-grid,
    .process-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 768px) {
    .services-cards-grid-3,
    .blog-grid-3,
    .testimonials-grid-3,
    .approach-grid,
    .process-grid,
    .exp-timeline-list,
    .contact-layout-grid,
    .faq-layout-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .service-card-v3,
    .project-card-v3,
    .blog-card-v3,
    .testimonial-card-v3,
    .exp-timeline-card,
    .faq-item-card,
    .contact-info-card,
    .contact-form-card {
        padding: 20px !important;
        border-radius: 20px !important;
    }

    .section-title-large, h2 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
    }
    .section-subtext-para, p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }
    section {
        padding: 48px 16px !important;
    }
}

/* --------------------------------------------------------------------------
   SUBSCRIBE & NEWSLETTER FORM MOBILE FIX (< 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* 1. Parent Form Container: clean column layout, no fixed min-width */
    .footer-subscribe-box,
    .newsletter-input-box,
    .newsletter-box,
    .newsletter-input-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* 2. Email Input Field: full-width rounded glass pill */
    .footer-subscribe-box input,
    .footer-subscribe-box .subscribe-input,
    .newsletter-input-box input,
    .newsletter-input,
    .newsletter-box input {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
        padding: 14px 20px !important;
        background: rgba(255, 255, 255, 0.07) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 999px !important;
        color: #ffffff !important;
        font-size: 0.9rem !important;
        font-family: inherit !important;
        outline: none !important;
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
    }

    .footer-subscribe-box input:focus,
    .newsletter-input-box input:focus,
    .newsletter-box input:focus {
        border-color: #ff5b24 !important;
        box-shadow: 0 0 16px rgba(255, 91, 36, 0.3) !important;
    }

    .footer-subscribe-box input::placeholder,
    .newsletter-input-box input::placeholder,
    .newsletter-box input::placeholder {
        color: rgba(255, 255, 255, 0.5) !important;
    }

    /* 3. Subscribe Button: full-width orange rounded pill button */
    .footer-subscribe-box button,
    .footer-subscribe-box .subscribe-btn,
    .newsletter-input-box button,
    .newsletter-input-box .subscribe-btn,
    .newsletter-box button,
    .newsletter-box .subscribe-btn {
        width: 100% !important;
        max-width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 13px 24px !important;
        min-height: 46px !important;
        background: #ff5b24 !important;
        color: #ffffff !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
        border-radius: 999px !important;
        border: none !important;
        cursor: pointer !important;
        box-shadow: 0 6px 20px rgba(255, 91, 36, 0.35) !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .footer-subscribe-box button:hover,
    .newsletter-input-box button:hover,
    .newsletter-box button:hover {
        background: #ff480b !important;
    }

    /* 4. Newsletter Section Containers on Mobile */
    .newsletter-cta-container,
    .newsletter-container {
        padding: 28px 20px !important;
        border-radius: 24px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .newsletter-top-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }
}

/* --------------------------------------------------------------------------
   FOOTER RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .footer-grid-4, .footer-columns, .footer-main-row, .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 32px !important;
    }
}

@media (max-width: 600px) {
    .footer-grid-4, .footer-columns, .footer-main-row, .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .footer-top-bar, .footer-contact-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }
}

/* --------------------------------------------------------------------------
   TOUCH TARGETS & ACCESSIBILITY
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    button, a, input, select, textarea, .btn-pill, .nav-toggle {
        min-height: 44px;
        touch-action: manipulation;
    }
}

/* ==========================================================================
   ABOUT SECTION — PHOTO, EXP CARD & STAT BOXES (MOBILE ONLY)
   Desktop is governed entirely by each page's own inline CSS.
   These rules only apply at max-width: 768px.
   ========================================================================== */

/* --- index.html: about section mobile layout (photo + exp card overlaid at bottom) --- */
@media (max-width: 768px) {
    /* Stack the two grid columns into a single column */
    .about-me-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        align-items: center !important;
    }

    /* Photo wrap: full-width, rounded rect, overflow visible so the exp card badge shows */
    .about-photo-wrap {
        width: 100% !important;
        max-width: 340px !important;
        position: relative !important;
        border-radius: 24px !important;
        overflow: visible !important;   /* Allow exp card to show even if it slightly overflows */
        aspect-ratio: 4 / 5 !important;
        margin: 0 auto !important;
    }

    /* Clip just the photo image, not the card */
    .about-photo-wrap::before {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        z-index: 0 !important;
    }

    .about-photo-wrap img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important;
        border-radius: 24px !important;
        z-index: 1 !important;
    }

    /* Exp card: pinned to bottom-left of the photo, floating over it */
    .about-exp-card {
        position: absolute !important;
        bottom: 16px !important;
        left: 16px !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: calc(100% - 32px) !important;
        margin: 0 !important;
        z-index: 10 !important;
        padding: 10px 16px !important;
        border-radius: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        box-sizing: border-box !important;
    }

    .about-exp-num {
        font-size: 1.8rem !important;
    }

    .about-exp-label {
        font-size: 0.7rem !important;
    }
}

/* --- about.html: profile-photo-wrapper + profile-frame (circular on desktop, rounded rect on mobile) --- */
@media (max-width: 768px) {
    .intro-profile-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
        align-items: center !important;
    }

    .profile-photo-wrapper {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 14px !important;
    }

    /* Convert circular 450x450 frame to a responsive rounded rectangle */
    .profile-frame {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        position: relative !important;
    }

    /* Hide the rotating orange shape on mobile (it's absolutely positioned and oversized) */
    .profile-orange-shape {
        display: none !important;
    }

    /* ISSUE 1 FIX: object-position: center top so full head/hair is visible */
    .profile-img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important;  /* Shows top of head, not center 15% which crops it */
        transform: none !important;              /* Remove scale(1.08) that was zooming in */
        border-radius: 0 !important;
    }

    /* Stat boxes: displayed as 2-col grid below the photo, as part of the RIGHT column flow */
    .profile-stats-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
        margin-top: 0 !important;
    }

    .profile-stat-box {
        padding: 16px 12px !important;
        text-align: center !important;
        background: rgba(12, 12, 18, 0.55) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        border-radius: 18px !important;
        min-width: 0 !important;
    }

    .profile-stat-num {
        font-size: 2rem !important;
    }

    .profile-stat-label {
        font-size: 0.82rem !important;
    }
}