/*
============================================================
4TFIED Technologies Website Framework
Copyright © 2026 Benjamin Pendleton / 4TFIED Technologies
All rights reserved.

This file is part of a proprietary website framework created
by 4TFIED Technologies.

Unauthorized copying, reuse, redistribution, resale, or use
on another website or project is prohibited without written
permission from 4TFIED Technologies.

Client receives permission to use this code only as part of
the approved website/project delivered by 4TFIED Technologies.

Author: Benjamin Pendleton
Website: https://4tfied.us
============================================================
*/
:root {
    --primary-blue: #0b5fa5;
    --dark-blue: #073f70;
    --light-blue: #e8f3fc;
    --accent-orange: #f28c28;
    --dark-text: #111111;
    --medium-text: #444444;
    --light-bg: #f5f7fa;
    --white: #ffffff;
    --border: #d9e1e8;
    --shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--light-bg);
    color: var(--dark-text);
    line-height: 1.6;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--primary-blue);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.container {
    width: min(1100px, 92%);
    margin: 0 auto;
}

.narrow {
    max-width: 850px;
}
.site-header {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 100px;
}

.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand:hover {
    text-decoration: none;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--dark-text);
    font-weight: 800;
    font-size: 1.35rem;
    height: 100%;
}

.brand-logo {
    width: 185px;
    max-height: 100px;
    object-fit: contain;
}
.brand-text {
    letter-spacing: 0.4px;
}

.site-nav {
    display: flex;
}

.nav-links {
    display: flex;
    gap: 22px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-links a {
    color: var(--dark-text);
    font-weight: 700;
    padding: 8px 0;
    border-bottom: 3px solid transparent;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--primary-blue);
    border-bottom-color: var(--accent-orange);
    text-decoration: none;
}

.menu-toggle {
    display: none;
    background: var(--primary-blue);
    color: var(--white);
    border: none;
    padding: 10px 14px;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.portfolio-card {
    display: block;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    color: var(--dark-text);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.portfolio-card:hover {
    text-decoration: none;
    transform: translateY(-6px);
    border-color: var(--primary-blue);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

.portfolio-card-content {
    padding: 30px;
}

.portfolio-card-tag {
    color: var(--primary-blue);
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0 0 12px;
}

.portfolio-card h3 {
    color: var(--dark-blue);
    margin: 0 0 12px;
    font-size: 1.45rem;
}

.portfolio-card p {
    color: var(--medium-text);
}

.portfolio-card-link {
    display: inline-block;
    margin-top: 16px;
    color: var(--primary-blue);
    font-weight: 800;
}

.hero {
    background:
        linear-gradient(rgba(7, 63, 112, 0.82), rgba(7, 63, 112, 0.82)),
        radial-gradient(circle at top left, #1d7cc5, #073f70);
    color: var(--white);
    padding: 96px 0;
}

.hero-content {
    max-width: 850px;
}

.eyebrow {
    color: #cde8ff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
}

.hero h1,
.page-hero h1 {
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    line-height: 1.05;
    margin: 12px 0 20px;
}

.hero-text {
    font-size: 1.25rem;
    max-width: 760px;
    color: #edf7ff;
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.btn {
    display: inline-block;
    padding: 13px 22px;
    border-radius: 8px;
    font-weight: 800;
    border: 2px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.primary-btn {
    background: var(--accent-orange);
    color: var(--dark-text);
}

.secondary-btn {
    border-color: var(--white);
    color: var(--white);
}

.section {
    padding: 76px 0;
}

.section-heading {
    max-width: 760px;
    margin-bottom: 38px;
}

.section-heading h2,
.narrow h2,
.contact-copy h2 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.15;
    margin: 0 0 14px;
}

.section-heading p,
.narrow p,
.contact-copy p {
    color: var(--medium-text);
    font-size: 1.08rem;
}

.card-grid,
.package-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.info-card,
.package-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px;
    box-shadow: var(--shadow);
}

.info-card h3,
.package-card h3 {
    margin-top: 0;
    color: var(--dark-blue);
    font-size: 1.35rem;
}

.dark-section {
    background: var(--dark-blue);
    color: var(--white);
}

.dark-section p {
    color: #e8f3fc;
}

.split-section {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 40px;
    align-items: center;
}

.feature-list {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 14px;
    padding: 24px;
}

.feature-list p {
    margin: 10px 0;
    font-weight: 700;
}

.package-card ul {
    padding-left: 20px;
}

.package-card li {
    margin-bottom: 8px;
}

.package-card.featured {
    border: 2px solid var(--accent-orange);
    transform: translateY(-8px);
}

.light-section {
    background: var(--light-blue);
}

.cta-section {
    background: var(--primary-blue);
    color: var(--white);
    text-align: center;
    padding: 76px 0;
}

.cta-section p {
    max-width: 720px;
    margin: 0 auto 28px;
    color: #edf7ff;
    font-size: 1.1rem;
}

.page-hero {
    background: var(--dark-blue);
    color: var(--white);
    padding: 72px 0;
}

.page-hero p {
    font-size: 1.2rem;
    color: #d8ecff;
    max-width: 740px;
}

.contact-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 42px;
    align-items: start;
}

.contact-form {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 30px;
    box-shadow: var(--shadow);
}

.contact-form label {
    display: block;
    font-weight: 800;
    margin-bottom: 6px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 18px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: 3px solid rgba(11, 95, 165, 0.18);
    border-color: var(--primary-blue);
}

.honeypot {
    display: none;
}

/*
.site-footer {
    background: #101820;
    color: var(--white);
    padding: 28px 0;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.footer-inner p {
    margin: 0;
    color: #d9e1e8;
}
*/
.site-footer {
    background: #101820;
    color: var(--white);
    padding: 32px 0;
    text-align: center;
}

.site-footer p {
    margin: 6px 0;
    color: #d9e1e8;
}

.site-footer a {
    display: inline-block;
    color: #ffffff;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
}

.site-footer a:hover {
    background: var(--primary-blue);
    color: #ffffff;
    text-decoration: none;
}

.footer-cred {
    margin-top: 14px;
    font-size: 0.9rem;
    color: #d8d8d8;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ribbon-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 11px;
    background: linear-gradient(
        to right,
        #b22234 0%, #b22234 18%,
        #ffffff 18%, #ffffff 32%,
        #3c3b6e 32%, #3c3b6e 68%,
        #ffffff 68%, #ffffff 82%,
        #b22234 82%, #b22234 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 2px;
}
/* MOBILE SECTION */

@media (max-width: 850px) {
    .site-header {
        height: auto;
    }

    .header-inner {
        min-height: 86px;
        flex-wrap: wrap;
        padding: 8px 0;
    }

    .brand-logo {
        width: 165px;
        max-height: 68px;
    }
	
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
    
    .menu-toggle {
        display: block;
    }

    .site-nav {
        width: 100%;
        display: none;
    }

    .site-nav.open {
        display: block;
    }

    .nav-links {
        flex-direction: column;
        gap: 8px;
        padding: 12px 0;
    }

    .card-grid,
    .package-grid,
    .split-section,
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .package-card.featured {
        transform: none;
    }

    .hero {
        padding: 72px 0;
    }
}