* { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: #ffffff; color: #444444; line-height: 1.7; display: flex; flex-direction: column; min-height: 100vh; }
        a { text-decoration: none; color: #2111A5; transition: all 0.2s ease; }
        a:hover { color: #170b7a; text-decoration: underline; }
        .site-header { width: 100%; background-color: #ffffff; border-bottom: 1px solid #f1f1f1; padding: 15px 0; }
        .header-container { max-width: 1140px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
        .brand-logo img { max-height: 50px; display: block; }
        .main-nav ul { list-style: none; display: flex; gap: 25px; }
        .nav-link { font-size: 15px; font-weight: 500; color: #333333; }
        .nav-link.active, .nav-link:hover { color: #2111A5; }
        .about-section { width: 100%; max-width: 1030px; margin: 0 auto; padding: 30px 20px 60px 20px; }
        .page-title-area { text-align: center; margin-bottom: 30px; }
        .page-title { font-size: 36px; font-weight: 700; color: #1a2b49; margin-bottom: 5px; }
        .title-divider { display: inline-block; width: 80px; height: 2px; background-color: #dddddd; position: relative; }
        .title-divider::after { content: '♦'; color: #777777; font-size: 10px; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); background: #ffffff; padding: 0 6px; }
        .intro-grid { display: grid; grid-template-columns: 430px 1fr; gap: 40px; align-items: flex-start; margin-bottom: 35px; margin-top: 20px; }
        .intro-img-wrapper img { width: 100%; height: auto; border-radius: 6px; display: block; }
        .image-caption { font-size: 12px; color: #777777; text-align: center; margin-top: 10px; }
        .intro-text p { font-size: 20px; margin-bottom: 25px; color: #444444; }
        .story-body { font-size: 20px; color: #444444; }
        .story-body p { margin-bottom: 30px; }
        .inline-site-link { color: #2111A5; text-decoration: underline; }
        .center-image-container { margin: 40px auto; max-width: 850px; text-align: center; }
        .center-image-container img { width: 100%; height: auto; border-radius: 4px; }
        .custom-separator { display: flex; align-items: center; justify-content: center; margin: 50px 0; width: 100%; }
        .custom-separator .line { height: 1px; background-color: #1a2b49; width: 120px; opacity: 0.8; }
        .custom-separator .circle { width: 18px; height: 18px; border: 2px solid #2111A5; border-radius: 50%; margin: 0 15px; background-color: #ffffff; }
        .values-section { background-color: #f7f8fa; padding: 80px 20px; text-align: center; }
        .values-title { font-size: 32px; font-weight: 700; color: #1a2b49; margin-bottom: 10px; }
        .values-grid { max-width: 1030px; margin: 60px auto 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px 40px; }
        .value-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
        .value-icon-wrap { font-size: 46px; color: #333333; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; height: 65px; }
        .value-card h4 { font-size: 16px; font-weight: 600; color: #444444; letter-spacing: 0.5px; }
        .site-footer { background-color: #ffffff; border-top: 1px solid #eeeeee; padding: 60px 20px 20px 20px; margin-top: auto; }
        .footer-grid { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 50px; }
        .footer-brand-pane p { font-size: 13px; color: #777777; margin-top: 12px; }
        .footer-col h4 { font-size: 15px; font-weight: 700; color: #2111A5; margin-bottom: 20px; text-transform: capitalize; }
        .footer-links { list-style: none; }
        .footer-links li { margin-bottom: 10px; font-size: 14px; color: #555555; }
        .footer-links a { color: inherit; }
        .footer-links a:hover { color: #2111A5; }
        .social-icons { display: flex; gap: 10px; }
        .social-btn { background-color: #2111A5; color: #ffffff; width: 34px; height: 34px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 15px; }
        .social-btn:hover { background-color: #170b7a; color: #ffffff; }
        .footer-bottom { max-width: 1140px; margin: 0 auto; border-top: 1px solid #f1f1f1; padding-top: 20px; text-align: center; font-size: 11px; color: #888888; }
        .footer-legal-links { margin-bottom: 8px; }
        .footer-legal-links a { margin: 0 6px; text-transform: uppercase; color: inherit; }
        .footer-legal-links a:hover { color: #2111A5; }
        .mobile-intro-image { display: none; }
        @media (max-width: 768px) {
            .intro-grid { display: block; width: 100%; }
            .intro-img-wrapper { display: none; }
            .mobile-intro-image { display: block; width: 100%; margin-bottom: 25px; }
            .mobile-intro-image img { width: 100%; height: auto; border-radius: 4px; display: block; }
            .about-section { padding: 20px 20px 40px 20px; }
            .intro-text p { font-size: 18px; }
            .story-body { font-size: 18px; }
            .values-grid { grid-template-columns: 1fr; gap: 40px; }
            .values-section { padding: 60px 20px; }
            .header-container { flex-direction: column; gap: 15px; text-align: center; }
            .main-nav ul { gap: 15px; }
            .footer-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; }
            .social-icons { justify-content: center; }
        }

        /* ================================================
           HOMEPAGE-SPECIFIC STYLES
           ================================================ */

        /* Sticky header (homepage variant) */
        .site-header.sticky { position: sticky; top: 0; z-index: 1000; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border-bottom: none; padding: 0; }
        .site-header.sticky .header-container { padding: 15px 20px; }
        .site-header.sticky .brand-logo img { height: 42px; max-height: none; width: auto; }
        .site-header.sticky .main-nav ul { gap: 40px; }
        .site-header.sticky .nav-link { font-size: 14px; }

        /* Hero section */
        .hero-section { position: relative; padding: 180px 20px; text-align: center; color: #ffffff; overflow: hidden; }
        .video-container { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; transform: translate(-50%, -50%); z-index: 1; pointer-events: none; }
        .video-container iframe { width: 100%; height: 100%; border: none; }
        .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.45); z-index: 2; }
        .hero-content { position: relative; max-width: 850px; margin: 0 auto; z-index: 3; }
        .hero-headline { font-size: 46px; font-weight: 700; line-height: 1.25; margin-bottom: 20px; letter-spacing: -0.5px; }
        .hero-subheadline { font-size: 20px; font-weight: 400; margin-bottom: 35px; opacity: 0.9; }
        .btn-pill { display: inline-block; background-color: #2111A5; color: #ffffff; padding: 16px 42px; font-size: 15px; font-weight: 700; border-radius: 50px; text-transform: uppercase; letter-spacing: 1px; }
        .btn-pill:hover { background-color: #170b7a; transform: translateY(-1px); color: #ffffff; text-decoration: none; }

        /* Split row section */
        .split-row-section { width: 100%; background-color: #f7f8fa; overflow: hidden; }
        .split-grid { display: grid; grid-template-columns: 1fr 1fr; width: 100%; min-height: 580px; align-items: stretch; }
        .split-text-side { display: flex; align-items: center; justify-content: flex-end; padding: 60px 60px 60px 40px; }
        .split-text-inner { max-width: 515px; width: 100%; }
        .block-title { font-size: 36px; font-weight: 700; color: #1a2b49; margin-bottom: 24px; line-height: 1.3; }
        .block-desc { font-size: 20px; color: #444444; margin-bottom: 35px; }
        .btn-center-wrapper { display: flex; justify-content: flex-start; width: 100%; }
        .btn-outline-pill { display: inline-block; border: 2px solid #2111A5; color: #2111A5; padding: 14px 36px; font-size: 14px; font-weight: 700; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.5px; background: transparent; text-align: center; }
        .btn-outline-pill:hover { background-color: #2111A5; color: #ffffff; text-decoration: none; }
        .split-image-side { width: 100%; position: relative; }
        .split-cover-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
        .mobile-image-block1, .mobile-image-block2 { display: none; }

        /* Content block (white bg, two-column) */
        .content-block-white { background-color: #ffffff; padding: 100px 20px; }
        .block-container { max-width: 1030px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
        .block-text { width: 100%; }
        .block-image-wrapper { width: 100%; }
        .block-img-contain { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; border-radius: 4px; }

        /* CTA section */
        .cta-outer-wrap { background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('https://ricardodelarosa.com/images/08-WebTest.jpg') no-repeat center center/cover; padding: 120px 20px; position: relative; }
        .cta-overlay-card { background-color: #ffffff; max-width: 780px; margin: 0 auto; padding: 60px 40px; text-align: center; border-radius: 4px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); }
        .cta-title { font-size: 32px; font-weight: 700; color: #212529; margin-bottom: 16px; }
        .cta-desc { font-size: 20px; color: #444444; margin-bottom: 30px; }

        /* Homepage mobile breakpoints */
        @media (max-width: 900px) {
            .hero-headline { font-size: 34px; }
            .hero-subheadline { font-size: 18px; }
            .split-grid { display: block; width: 100%; }
            .split-text-side { padding: 40px 20px; justify-content: center; text-align: center; }
            .split-text-inner { max-width: 100%; }
            .split-image-side { display: none; }
            .mobile-image-block1 { display: block; width: 100%; margin: 0 auto 20px auto; max-width: 480px; }
            .mobile-image-block1 img { display: block; width: 100%; height: auto; border-radius: 4px; }
            .split-text-inner .block-title { margin-bottom: 20px; }
            .split-text-inner .block-desc { margin-bottom: 24px; }
            .content-block-white { padding: 40px 20px; }
            .block-container { display: block; text-align: center; width: 100%; }
            .block-image-wrapper { display: none; }
            .mobile-image-block2 { display: block; width: 100%; margin: 0 auto 20px auto; max-width: 480px; }
            .mobile-image-block2 img { display: block; width: 100%; height: auto; border-radius: 4px; }
            .block-text .block-title { margin-bottom: 20px; }
            .block-text .block-desc { margin-bottom: 24px; }
            .btn-center-wrapper { justify-content: center; } 
            .cta-overlay-card { padding: 40px 20px; }
            .cta-title { font-size: 26px; }
        }
 
        /* ================================================
           CONTACT PAGE STYLES
           ================================================ */ 
  
        .contact-section { width: 100%; max-width: 1030px; margin: 0 auto; padding: 30px 20px 60px 20px; }
        .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; margin-top: 20px; }
        .message-pane { align-self: start; display: flex; flex-direction: column; align-items: flex-start; }
        .message-pane p { font-size: 20px; color: #444444; margin-bottom: 20px; }
        .whatsapp-btn-wrapper { margin-top: 10px; }
        .whatsapp-btn img { max-width: 260px; display: block; } 
        .profile-pane { align-self: start; text-align: center; }
        .profile-pane img { display: block; width: 100%; height: auto; border-radius: 6px; margin-bottom: 20px; }
        .connect-heading { font-size: 20px; font-weight: 700; color: #1a2b49; margin-bottom: 18px; text-align: center !important;} 
        .channel-block { margin-bottom: 14px; }
        .channel-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: #999999; margin-bottom: 4px; }
        .channel-link { font-size: 16px; color: #2111A5; display: inline-flex; align-items: center; gap: 7px; clear: both; }
        .channel-link:hover { color: #170b7a; text-decoration: underline; }
        .story-note { margin-top: 24px; font-size: 15px; color: #555555; clear: both; }
        .story-note a { color: #2111A5; text-decoration: underline; }

        @media (max-width: 768px) {
            .contact-grid { grid-template-columns: 1fr; gap: 30px; }
            .message-pane p { font-size: 18px; }
            .contact-section { padding: 20px 20px 40px 20px; }
        }

        /* ================================================
           PRIVACY / LEGAL PAGE STYLES
           ================================================ */

        .legal-section { width: 100%; max-width: 1030px; margin: 0 auto; padding: 30px 20px 80px 20px; }
        .legal-document { margin-top: 20px; }
        .legal-document p { font-size: 17px; color: #444444; line-height: 1.8; margin-bottom: 20px; }
        .legal-document h2 { font-size: 22px; font-weight: 700; color: #1a2b49; margin-top: 36px; margin-bottom: 12px; line-height: 1.3; }
        .legal-document ul { margin: 0 0 20px 24px; }
        .legal-document ul li { font-size: 17px; color: #444444; line-height: 1.8; margin-bottom: 8px; }
        .legal-document a { color: #2111A5; text-decoration: underline; }
        .legal-document a:hover { color: #170b7a; }

        @media (max-width: 768px) {
            .legal-section { padding: 20px 20px 50px 20px; }
            .legal-document p, .legal-document ul li { font-size: 16px; }
            .legal-document h2 { font-size: 19px; }
        }