:root { --forest-dark: #1A3626; --forest-moss: #2E513B; --forest-sage: #8CA493; --off-white: #F4F6F5; --ind-orange: #E08E36; --text-main: #1C201E; --text-light: #62756A; --font-sans: 'Inter', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-sans); background-color: var(--off-white); color: var(--text-main); line-height: 1.6; overflow-x: hidden; } img { width: 100%; height: auto; object-fit: cover; display: block; } a { color: inherit; text-decoration: none; } .staging-bounds { max-width: 1280px; margin: 0 auto; padding: 0 5%; } .apex-logistics-header { background-color: var(--forest-dark); color: var(--off-white); position: sticky; top: 0; z-index: 100; padding: 1rem 0; border-bottom: 3px solid var(--ind-orange); } .header-flex { display: flex; justify-content: space-between; align-items: center; } .brand-mark { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 1.25rem; letter-spacing: -0.5px; } .nav-routes { display: flex; gap: 2rem; align-items: center; font-size: 0.9rem; font-weight: 600; } .nav-routes a:hover { color: var(--ind-orange); } .ghost-link { opacity: 0.6; } .tech-action-btn { background-color: var(--ind-orange); color: var(--forest-dark); padding: 0.75rem 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; border: none; cursor: pointer; transition: transform 0.2s ease, background-color 0.2s ease; display: inline-block; } .tech-action-btn:hover { background-color: #f0a351; transform: translateY(-2px); } .tech-action-btn.outline-variant { background-color: transparent; border: 2px solid var(--ind-orange); color: var(--ind-orange); padding: 0.5rem 1rem; } .tech-action-btn.outline-variant:hover { background-color: var(--ind-orange); color: var(--forest-dark); } .tech-action-btn.full-width { width: 100%; margin-top: 1rem; } .wms-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; padding-top: 6rem; padding-bottom: 6rem; } .status-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--forest-moss); color: var(--off-white); padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; margin-bottom: 1.5rem; } .pulse-dot { width: 8px; height: 8px; background-color: #4ade80; border-radius: 50%; animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); } 70% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } } .industrial-headline { font-size: 3.5rem; font-weight: 800; line-height: 1.1; color: var(--forest-dark); margin-bottom: 1.5rem; letter-spacing: -1px; } .technical-sub { font-size: 1.1rem; color: var(--text-light); margin-bottom: 2.5rem; max-width: 90%; } .hero-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .noise-text { font-size: 0.8rem; color: var(--text-light); } .noise-text a { text-decoration: underline; color: var(--forest-moss); } .hero-visual-offset { transform: translateY(40px); } .shadow-block { box-shadow: -20px 20px 0px var(--forest-sage); border: 2px solid var(--forest-dark); } .about-deployment { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding-top: 4rem; padding-bottom: 5rem; align-items: center; border-bottom: 1px solid #d1d9d4; } .about-text-column h2 { font-size: 2rem; color: var(--forest-dark); margin-bottom: 1.5rem; } .about-text-column p { margin-bottom: 1rem; color: var(--text-light); } .highlight-stat { font-weight: 800; color: var(--forest-moss); } .inline-data-link { color: var(--ind-orange); font-weight: 600; border-bottom: 1px dashed var(--ind-orange); } .metric-val { font-size: 1.2rem; background: var(--forest-dark); color: var(--ind-orange); padding: 0.1rem 0.4rem; border-radius: 3px; } .border-accent { border-left: 8px solid var(--ind-orange); } .heavy-lift-solutions { background-color: var(--forest-dark); color: var(--off-white); padding: 6rem 0; margin-top: 2rem; } .section-header { margin-bottom: 4rem; max-width: 600px; } .section-header h2 { font-size: 2.5rem; color: var(--ind-orange); margin-bottom: 0.5rem; } .section-desc { color: var(--forest-sage); font-size: 1.1rem; } .solution-card-asym { display: flex; gap: 4rem; margin-bottom: 6rem; align-items: center; } .solution-card-asym.reverse-flow { flex-direction: row-reverse; } .solution-text-dense { flex: 1; } .solution-text-dense h3 { font-size: 1.8rem; margin-bottom: 1rem; border-bottom: 2px solid var(--forest-moss); padding-bottom: 0.5rem; display: inline-block; } .solution-text-dense p { color: #c4d1c8; margin-bottom: 1.5rem; } .technical-list { list-style: square; padding-left: 1.5rem; color: var(--forest-sage); } .technical-list li { margin-bottom: 0.5rem; } .solution-img-wrapper { flex: 1; position: relative; } .offset-img-right { transform: translateX(20px) translateY(-20px); border: 1px solid var(--forest-sage); } .offset-img-left { transform: translateX(-20px) translateY(20px); border: 1px solid var(--forest-sage); } .client-feedback-asym { padding: 6rem 5%; background-color: #e8ece9; } .align-right { text-align: right; font-size: 2.5rem; color: var(--forest-dark); margin-bottom: 3rem; } .feedback-masonry { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; } .report-card { background: var(--off-white); padding: 2rem; border-top: 4px solid var(--forest-moss); box-shadow: 0 4px 6px rgba(0,0,0,0.05); } .card-up { transform: translateY(-15px); } .card-down { transform: translateY(15px); } .quote { font-style: italic; color: var(--text-light); margin-bottom: 1.5rem; font-size: 0.95rem; } .personnel-id { display: flex; align-items: center; gap: 1rem; } .avatar { width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--ind-orange); } .p-data strong { display: block; color: var(--forest-dark); font-size: 0.9rem; } .p-data span { display: block; font-size: 0.75rem; color: var(--text-light); } .ops-contact-zone { padding: 6rem 0; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; background: #fff; padding: 3rem; box-shadow: 20px 20px 0px var(--forest-dark); border: 1px solid #d1d9d4; } .dispatch-form-wrapper h2 { font-size: 2.5rem; color: var(--forest-dark); margin-bottom: 1rem; } .dispatch-form-wrapper p { color: var(--text-light); margin-bottom: 2rem; font-size: 0.9rem; } .ops-input, .ops-textarea { width: 100%; padding: 1rem; margin-bottom: 1rem; border: 1px solid #bccac0; background: var(--off-white); font-family: var(--font-sans); color: var(--text-main); } .ops-input:focus, .ops-textarea:focus { outline: none; border-color: var(--ind-orange); } .ops-textarea { resize: vertical; min-height: 120px; } .dispatch-img { height: 100%; border: 2px solid var(--forest-moss); filter: grayscale(20%); } .ops-footer { background-color: var(--forest-dark); color: var(--forest-sage); padding: 4rem 0 2rem 0; font-size: 0.85rem; border-top: 5px solid var(--forest-moss); } .footer-grid { display: grid; grid-template-columns: 2fr 1.5fr 1.5fr 1fr; gap: 2rem; margin-bottom: 3rem; } .f-brand strong { color: var(--off-white); font-size: 1.2rem; display: block; margin-bottom: 0.5rem; } .f-comms h4, .f-loc h4, .f-legal h4 { color: var(--ind-orange); margin-bottom: 1rem; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; } .f-comms p, .f-loc p { margin-bottom: 0.5rem; } .f-micro { font-size: 0.75rem; opacity: 0.7; margin-top: 0.5rem; } .f-legal a { display: block; margin-bottom: 0.5rem; transition: color 0.2s; } .f-legal a:hover { color: var(--off-white); } .f-bottom { text-align: center; border-top: 1px solid var(--forest-moss); padding-top: 2rem; opacity: 0.6; } @media(max-width: 992px) { .wms-hero-grid, .about-deployment, .solution-card-asym, .contact-grid { grid-template-columns: 1fr; flex-direction: column !important; gap: 2rem; } .hero-visual-offset, .offset-img-right, .offset-img-left, .card-up, .card-down { transform: none; box-shadow: none; } .contact-grid { box-shadow: 10px 10px 0px var(--forest-dark); padding: 2rem; } .footer-grid { grid-template-columns: 1fr 1fr; } .industrial-headline { font-size: 2.5rem; } } @media(max-width: 600px) { .nav-routes { display: none; } .footer-grid { grid-template-columns: 1fr; } }