/* THE IRON VAULT UI/UX STANDARDS 2026 (BY AQUINAS INTELLECTUS) */
/* FLUID MATHEMATICAL ARCHITECTURE */

:root {
  /* --- TYPOGRAPHY SCALE (Viewport Range: 320px to 1200px) --- */
  --text-sm: clamp(0.75rem, 0.6955rem + 0.2727vw, 0.875rem);   /* 12px to 14px */
  --text-base: clamp(1rem, 0.9091rem + 0.4545vw, 1.25rem);     /* 16px to 20px */
  --text-md: clamp(1.25rem, 1.1409rem + 0.5455vw, 1.625rem);   /* 20px to 26px */
  --text-lg: clamp(1.5rem, 1.3182rem + 0.9091vw, 2rem);        /* 24px to 32px */
  --text-xl: clamp(2rem, 1.7273rem + 1.3636vw, 2.75rem);       /* 32px to 44px */
  --text-xxl: clamp(2.5rem, 2.0636rem + 2.1818vw, 4rem);       /* 40px to 64px */

  /* --- LINE-HEIGHT MULTIPLIERS --- */
  --leading-body: 1.618;  /* Golden ratio for long-form text */
  --leading-ui: 1.4;      /* Buttons, short descriptions */
  --leading-tight: 1.25;  /* H3, H4 */
  --leading-display: 1.1; /* H1, H2 */

  /* --- FLUID SPACING SYSTEM (Vertical Rhythm) --- */
  --space-xs: clamp(0.5rem, 0.4091rem + 0.4545vw, 0.75rem);    /* 8px to 12px */
  --space-sm: clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem);       /* 16px to 24px */
  --space-md: clamp(1.5rem, 1.1364rem + 1.8182vw, 2.5rem);     /* 24px to 40px */
  --space-lg: clamp(2rem, 1.2727rem + 3.6364vw, 4rem);         /* 32px to 64px */
  --space-xl: clamp(4rem, 2.7273rem + 6.3636vw, 7.5rem);       /* 64px to 120px */

  /* --- CONTAINER PADDINGS --- */
  --container-padding: clamp(1rem, 0.5455rem + 2.2727vw, 3rem); /* 16px to 48px */
}

/* NUCLEAR MOBILE RESPONSIVE OVERRIDES - TRIUVO ARCHITECTURE (V3 - BRAIN DRIVEN) */

@media (max-width: 1024px) {
    .container[style*="display: flex"], .section_wrapper[style*="display: flex"] { gap: var(--space-md) !important; }
    .hero-visual-right { opacity: 0.8 !important; }
    .hero-container { padding-right: 15% !important; }
    .hero-title { font-size: var(--text-xl) !important; }
    .revolut-hero-title { font-size: var(--text-xl) !important; }
    .floating-overlap-box { width: 90% !important; padding: var(--space-lg) !important; right: 5% !important; margin-top: calc(-1 * var(--space-md)) !important; }
    .img-straight { height: 400px !important; }
    .mobile-menu-toggle { display: flex !important; }
}

@media (max-width: 768px) {

    /* --- HARCORE OVERFLOW FIX (Prevent white scroll) --- */
    html, body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative; /* Contain absolute elements */
    }
    
    /* Ensure no element can bleed outside the viewport */
    img, svg, video, canvas, audio, iframe, embed, object {
        max-width: 100% !important;
        height: auto;
    }

    /* --- CORE STRUCTURAL FIXES --- */
    body { overflow-x: hidden !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
    * { box-sizing: border-box !important; }
    
    
    
    
    
    /* --- DYNAMIC HAMBURGER COLOR FOR LIGHT BACKGROUNDS --- */
    /* Only apply black bars if the header itself has a light background, OR if explicitly classed */
    /* Many pages have absolute transparent headers over white backgrounds (like the index page's initial scroll state if not dark) */
    
    /* We add a utility class that can be triggered */
    .mobile-menu-toggle.dark-bars span { background: #1b1b1b !important; }
    
    /* When the menu is OPEN, force the bars to be white again because the overlay is dark */
    .mobile-menu-toggle.open span { background: #fff !important; }

    /* --- MENU OVERHAUL FIX --- */
    #Header { position: absolute !important; width: 100vw !important; top: 0 !important; left: 0 !important; z-index: 99999 !important; background: transparent !important; }
    .header-container { background: transparent !important; padding: 20px var(--container-padding) !important; display: flex !important; justify-content: space-between !important; align-items: center !important; }
    
    .mobile-menu-toggle { z-index: 100000 !important; pointer-events: auto !important; display: flex !important; flex-direction: column !important; gap: 6px !important; cursor: pointer; }
    .mobile-menu-toggle span { width: 30px; height: 2px; background: #fff; display: block; transition: 0.3s; }
    
    /* Hamburger to X Animation */
    .mobile-menu-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
    .mobile-menu-toggle.open span:nth-child(2) { opacity: 0; }
    .mobile-menu-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }
    
    .main-nav { 
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important; 
        top: 0 !important; 
        left: 0 !important; 
        width: 100vw !important; 
        height: 100vh !important; 
        background: rgba(10, 10, 10, 0.98) !important; 
        padding-top: 120px !important; 
        z-index: 99998 !important; 
        opacity: 0; 
        visibility: hidden; 
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    .main-nav.active { opacity: 1 !important; visibility: visible !important; }
    .main-nav ul { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 40px !important; list-style: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
    .main-nav a { display: block !important; font-size: var(--text-lg) !important; color: #fff !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 2px; text-decoration: none !important; }

    /* --- LOGO PROPORTION --- */
    .logo img { height: 24px !important; width: auto !important; max-width: 180px !important; object-fit: contain !important; }
    
    /* --- GLOBAL PADDINGS (PREVENT TEXT TOUCHING EDGES) --- */
    .container, .section_wrapper { 
        padding-left: var(--container-padding) !important; 
        padding-right: var(--container-padding) !important; 
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
    }
    
    .section-padding, section[style*="padding: 100px 0"], section[style*="padding: 120px 0"] {
        padding-top: var(--space-xl) !important; 
        padding-bottom: var(--space-xl) !important;
    }

    /* --- TYPOGRAPHY REFINEMENT (FLUID MATH) --- */
    h1, .hero-title { font-size: var(--text-xl) !important; line-height: var(--leading-display) !important; margin-bottom: var(--space-sm) !important; letter-spacing: -0.5px !important; }
    .revolut-hero-title { font-size: var(--text-xl) !important; line-height: var(--leading-display) !important; }
    h2, .section-title, h2[style*="font-size: 36px"], h2[style*="font-size: 32px"] { font-size: var(--text-lg) !important; line-height: var(--leading-tight) !important; margin-bottom: var(--space-sm) !important; }
    h3, h3[style*="font-size:28px"], .text-container h3 { font-size: var(--text-md) !important; line-height: var(--leading-tight) !important; margin-bottom: var(--space-xs) !important; }
    
    /* Body Text: Max width 65ch for saccadic eye movement */
    p, p[style*="font-size: 18px"], .hero-desc, .revolut-hero-desc { 
        font-size: var(--text-base) !important; 
        line-height: var(--leading-body) !important; 
        margin-bottom: var(--space-sm) !important; 
        max-width: 65ch !important; 
        font-weight: 400 !important; 
        color: #aaa !important; 
    }
    
    .uptitle { font-size: var(--text-sm) !important; letter-spacing: 2px !important; margin-bottom: var(--space-xs) !important; text-transform: uppercase !important;}

    /* --- FLEXBOX FLATTENING --- */
    div[style*="display: flex; align-items: center; gap: 60px;"],
    div[style*="display: flex; gap: 40px;"],
    div[style*="display: flex; gap: 60px;"],
    div[style*="display: flex; gap: 80px;"],
    div[style*="display: flex; justify-content: space-between;"],
    div[style*="display: flex; align-items: center; justify-content: space-between;"],
    .grid-2, .intro-grid {
        display: flex !important; flex-direction: column !important; gap: var(--space-md) !important; align-items: flex-start !important; text-align: left !important;
    }
    
    li[style*="display: flex"], .footer-col div[style*="display: flex"] { flex-direction: row !important; align-items: flex-start !important; gap: var(--space-xs) !important;}
    
    /* --- GRID COLUMNS DEMOLITION --- */
    .wrap, .mcb-wrap, .one-second, .one-third, .two-third, .one-fourth, .intro-left, .intro-right, .col-image, .col-text, .col-number {
        width: 100% !important; float: none !important; padding-left: 0 !important; padding-right: 0 !important; margin: 0 0 var(--space-md) 0 !important; min-width: 100% !important; flex: none !important;
    }

    /* SPECIFIC ALIGNMENTS */
    div[style*="padding-left: 50px;"] { padding-left: 0 !important; }
    div[style*="text-align: right;"] { text-align: left !important; align-items: flex-start !important; }
    div[style*="align-items: flex-end;"] { align-items: flex-start !important; text-align: left !important; }

    


    /* --- HERO SECTIONS --- */
    .hero-section { flex-direction: column !important; height: auto !important; min-height: auto !important; padding-top: 70px !important; display: flex !important; }
    .hero-visual-right { position: relative !important; width: 100% !important; height: 300px !important; order: -1 !important; opacity: 1 !important; }
    .hero-container { padding: var(--space-md) var(--container-padding) !important; text-align: left !important; width: 100% !important; }
    .hero-content { width: 100% !important; padding-top: 0 !important; }
    .floating-badge { position: relative !important; bottom: auto !important; left: 0 !important; width: 100% !important; transform: none !important; margin-top: calc(-1 * var(--space-sm)) !important; margin-bottom: var(--space-sm) !important; }
    
    .revolut-hero { height: auto !important; min-height: auto !important; padding: var(--space-xl) 0 var(--space-lg) 0 !important; margin-top: -80px !important; }
    
    /* FIXED ARQUITECTURA HERO PADDING */
    .revolut-hero-content { 
        margin-top: 0 !important; 
        padding-top: 150px !important; /* Hard push down away from transparent header */
        padding-bottom: var(--space-lg) !important;
        padding-left: var(--container-padding) !important;
        padding-right: var(--container-padding) !important;
        width: 100% !important; 
        box-sizing: border-box !important;
    }


    /* --- FLOATING BOX & IMAGES --- */
    .img-straight { height: 250px !important; object-fit: cover !important; }
    .floating-overlap-box { position: relative !important; width: 100% !important; padding: var(--space-md) var(--container-padding) !important; margin-top: calc(-1 * var(--space-md)) !important; right: 0 !important; bottom: 0 !important; border-radius: 5px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important; }
    
    /* --- TOUCH TARGETS & BUTTONS (44px min-height rule) --- */
    div[style*="display: flex; gap: 20px; margin-top: 40px;"], div[style*="display: flex; gap: 20px; justify-content: center;"] { flex-direction: column !important; gap: var(--space-sm) !important; width: 100% !important; margin-top: var(--space-md) !important; }
    .btn { width: 100% !important; text-align: center !important; justify-content: center !important; padding: 14px 20px !important; display: flex !important; font-size: var(--text-sm) !important; min-height: 48px !important; align-items: center !important; }

    /* --- SERVICES CAROUSEL --- */
    .carousel-track { flex-direction: column !important; padding: 0 !important; gap: var(--space-sm) !important; }
    .service-card-horizontal { width: 100% !important; max-width: 100% !important; flex: none !important; height: auto !important; }
    .sch-image { height: 180px !important; }
    .sch-content { height: auto !important; min-height: auto !important; padding: var(--space-sm) !important; }

    /* --- ARCHITECTURE SERVICES DETAILS --- */
    .service-row { flex-direction: column !important; align-items: flex-start !important; text-align: left !important; margin-bottom: var(--space-lg) !important; padding: 0 var(--container-padding) !important; }
    .service-row.reverse { flex-direction: column !important; align-items: flex-start !important; text-align: left !important; margin-bottom: var(--space-lg) !important; padding: 0 var(--container-padding) !important; }
    .service-row::after { display: none !important; }
    .col-number { align-items: flex-start !important; margin-bottom: var(--space-xs) !important; }
    .num-large { font-size: var(--text-xxl) !important; margin-top: 0 !important; line-height: var(--leading-display) !important; }
    .text-container { padding: var(--space-xs) 0 0 0 !important; text-align: left !important; width: 100% !important; } 
    .text-container .service-icon { font-size: var(--text-xl) !important; margin-bottom: var(--space-sm) !important; }
    .service-row.reverse .text-container { text-align: left !important; }
    .service-row.reverse .text-container ul li { flex-direction: row !important; }

    /* --- FOOTER --- */
    div[style*="border-top: 1px solid #eee;"] { flex-direction: column !important; gap: var(--space-sm) !important; text-align: center !important; }
    div[style*="border-top: 1px solid #eee;"] div { justify-content: center !important; width: 100% !important; }
    div[style*="grid-template-columns"] { display: flex !important; flex-direction: column !important; gap: var(--space-md) !important; }
    
    /* --- MODALS (Input Zoom fix via 16px min size) --- */
    .modal-content { width: 90% !important; padding: var(--space-md) var(--container-padding) !important; margin: 20px auto !important; max-width: 100% !important; }
    #contactForm input, #contactForm textarea { width: 100% !important; padding: var(--space-sm) !important; font-size: var(--text-base) !important; /* Forces 16px minimum on iOS to prevent zoom */ min-height: 48px !important;}
    
    /* --- OTHERS (WORD BREAK & LEGAL) --- */
    p, h1, h2, h3, h4, h5, h6, a, span { word-break: break-word !important; }
    .legal-content { padding: var(--space-lg) var(--container-padding) !important; }
    .legal-content h2 { font-size: var(--text-md) !important; margin-top: var(--space-md) !important; }
    .legal-header { padding: var(--space-xl) var(--container-padding) var(--space-md) !important; }

    /* --- SENTINEL / PRODUCT PAGES --- */
    .content-box { padding: 0 var(--container-padding) !important; width: 100% !important; box-sizing: border-box !important; }
    .main-heading { font-size: var(--text-lg) !important; line-height: var(--leading-display) !important; margin-bottom: var(--space-sm) !important; }
    .subtitle { font-size: var(--text-sm) !important; letter-spacing: 3px !important; }
    body { height: auto !important; min-height: 100vh !important; overflow-y: auto !important; }
}

/* EXTREME WIDTH CONTAINMENT (PREVENT HORIZONTAL SCROLL) */
@media (max-width: 768px) {
    /* Target typical bleed culprits */
    .hero-shape-bg { display: none !important; } /* Decorative circles often bleed out */
    .hero-visual-right { width: 100vw !important; max-width: 100% !important; overflow: hidden !important; }
    .hero-graphic-left { display: none !important; }
    
    /* Force main elements to obey viewport boundary */
    main, section, header, footer, .revolut-hero, .hero-section {
        width: 100vw !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}