:root {
    --primary-color: #D62828;
    /* Classic Carnival Red */
    --secondary-color: #F77F00;
    /* Deep Gold/Orange */
    --accent-color: #4CC9F0;
    /* Fun Sky Blue */
    --bg-dark: #001219;
    /* Keep dark base but use lighter overlays */
    --text-light: #FFF;
    --text-muted: #E0E1DD;
    --glass-bg: rgba(255, 255, 255, 0.9);
    /* Sharper, brighter cards */
    --glass-border: rgba(255, 255, 255, 0.5);
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-light);
    background-color: #003049;
    /* Rich Navy Blue Base */
    background-image:
        radial-gradient(#D62828 2px, transparent 2px),
        radial-gradient(#F77F00 2px, transparent 2px);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Carnival Ribbons & Banners */
.section-header {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    display: inline-block;
    width: 100%;
}

.section-header h2 {
    font-family: 'Rye', serif;
    font-size: 3.5rem;
    /* Scaled slightly down for better fit */
    color: #FFF;
    background: var(--primary-color);
    display: inline-block;
    padding: 0.5rem 3rem;
    transform: skew(-10deg);
    box-shadow: 10px 10px 0px var(--secondary-color);
    border: 4px solid #FFF;
    text-shadow: 3px 3px 0px #000;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
    letter-spacing: 2px;
}

.section-header h2::before,
.section-header h2::after {
    content: '★';
    color: var(--secondary-color);
    font-size: 1.5rem;
    margin: 0 1rem;
    vertical-align: middle;
}

.eyebrow {
    display: block;
    color: var(--secondary-color);
    font-weight: 800;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 0.5rem;
    font-family: 'Oswald', sans-serif;
    /* Keep Oswald for subheads */
}

/* Fun Cards */
.card,
.roi-card,
.package-highlight {
    background: linear-gradient(135deg, #FFF 0%, #F0F0F0 100%);
    color: #333;
    /* Dark text on light cards for readability */
    border: 4px solid var(--accent-color);
    border-radius: 20px;
    transform: rotate(-1deg);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy transition */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.card:hover,
.roi-card:hover {
    transform: rotate(1deg) scale(1.05);
    /* Wiggle effect */
    border-color: var(--secondary-color);
    z-index: 10;
}

.card h3,
.roi-card h3 {
    color: var(--primary-color);
    font-family: 'Rye', serif;
    font-size: 1.8rem;
    text-transform: uppercase;
}

.card p,
.roi-card p {
    color: #555;
    font-weight: 500;
}

/* Hero "Big Top" Text */
.hero-content h1 {
    font-family: 'Rye', serif;
    font-size: clamp(3rem, 10vw, 6rem);
    /* Responsive Typography */
    color: #FFF;
    text-shadow:
        4px 4px 0px var(--primary-color),
        8px 8px 0px var(--secondary-color);
    transform: rotate(-2deg);
    margin-bottom: 1rem;
    line-height: 1.1;
}

.hero-content .highlight {
    color: var(--secondary-color);
    -webkit-text-stroke: 2px #FFF;
    text-shadow: 4px 4px 0px #000;
}

/* Button "Pop" */
.btn-primary {
    background: var(--secondary-color);
    color: #000;
    font-weight: 900;
    border: 3px solid #FFF;
    box-shadow: 5px 5px 0px var(--primary-color);
    text-transform: uppercase;
    font-size: 1.2rem;
    padding: 1rem 3rem;
    border-radius: 50px;
    /* Pill shape */
}

.btn-primary:hover {
    background: var(--primary-color);
    color: #FFF;
    box-shadow: 5px 5px 0px #000;
    transform: translate(-2px, -2px);
}

@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(2deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes bounce-hover {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1.05);
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-light);
    background-color: var(--bg-dark);
    /* Subtle Pattern Only - No Watermark Image */
    background-image:
        radial-gradient(var(--glass-border) 1px, transparent 1px),
        radial-gradient(var(--glass-border) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: 0 0, 25px 25px;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Agent FAB */
.agent-fab {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--primary-color);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 20px rgba(230, 57, 70, 0.5);
    cursor: pointer;
    z-index: 2000;
    transition: transform 0.3s, box-shadow 0.3s;
    border: none;
    font-size: 1.5rem;
    animation: bounce-hover 2s infinite;
}

.agent-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(230, 57, 70, 0.7);
}

.agent-fab::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--primary-color);
    z-index: -1;
    animation: ripple 1.5s infinite;
}

@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

h1,
h2,
h3,
.eyebrow,
.btn-primary,
.btn-secondary,
.price-tag {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
}

/* Classy Responsive Navbar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 0 4%;
    /* More breathing room */
    display: flex;
    justify-content: space-between;
    /* Links on sides, logo in center */
    align-items: center;
    background: rgba(0, 30, 45, 0.98);
    /* Deeper Navy for Class */
    backdrop-filter: blur(20px);
    z-index: 1000;
    border-bottom: 2px solid var(--secondary-color);
    /* Thinner, refined border */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    height: 100px;
    /* Generous height for logo */
    transition: height 0.3s ease;
}

/* Logo Container - Flex Item */
.brand-container {
    position: relative;
    /* No more absolute floating hack */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    /* Allow it to take space */
    padding: 0 1rem;
    z-index: 10;
}

/* Refined SVG Sizing */
.brand-logo-svg {
    width: 320px;
    /* Sophisticated desktop size */
    height: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease;
    display: block;
}

.brand-container:hover .brand-logo-svg {
    transform: scale(1.05);
    /* Subtle zoom */
}

/* Nav Links - Split or Push */
/* Since we want logo centered, we can use margin auto tricks or grid. 
   For now, strictly centering the brand container in flex works if siblings are balanced.
   Or we can abuse absolute for DESKTOP ONLY if we want perfect center regardless of link width.
*/

/* Mobile Best Practices (Break point at 1024px for tablets) */
@media (max-width: 1024px) {
    .navbar {
        height: 80px;
        padding: 0 1rem;
        justify-content: center;
    }

    /* On Mobile/Tablet, logo IS the header. No distractions. */
    .brand-container {
        width: 100%;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .brand-logo-svg {
        width: 280px;
        /* Explicit width */
        min-width: 280px;
        /* Prevent collapse */
        height: auto;
        /* Maintain aspect ratio */
        min-height: 90px;
        /* Force vertical space */
        display: block;
        /* No inline quirks */
    }

    /* Links hidden on mobile (Hamburger would go here per best practice) */
    .nav-links {
        display: none !important;
    }

    .btn-quote {
        display: none;
        /* Hide primary CTA in header to prioritize Brand? Or keep? */
        /* Per user "no use of company name" -> Prioritize name. */
    }
}

/* Tiny Mobile */
@media (max-width: 400px) {
    .brand-logo-svg {
        width: 240px;
        min-width: 240px;
        min-height: 75px;
    }
}

/* Package Grid (Mini Midway) */
.package-grid-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.package-item {
    background: #FFF;
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    padding: 0.5rem;
    text-align: center;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2);
}

.package-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--secondary-color);
    margin-bottom: 0.5rem;
}

.package-item span {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 0.9rem;
    color: #333;
    line-height: 1.2;
    font-weight: 600;
}

.nav-links {
    display: flex;
    gap: 2.5rem;
    list-style: none;
    align-items: center;
}

.nav-links a {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--secondary-color);
}

/* Buttons */
.btn-primary {
    display: inline-block;
    background: var(--primary-color);
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 1px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
    text-align: center;
}

.btn-primary:hover {
    background: #b01c1c;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(214, 40, 40, 0.5);
}

.btn-secondary {
    display: inline-block;
    background: transparent;
    color: var(--text-light);
    border: 2px solid var(--text-light);
    padding: 1rem 2.5rem;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-secondary:hover {
    background: var(--text-light);
    color: var(--bg-dark);
}

/* Hero Section */
.hero {
    height: 100vh;
    min-height: 700px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 5%;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Refined gradient for better text pop */
    background: radial-gradient(circle at 70% 50%, rgba(0, 18, 25, 0.4) 0%, rgba(0, 18, 25, 0.85) 60%, rgba(0, 18, 25, 0.95) 100%);
}

.hero-content {
    max-width: 900px;
    position: relative;
    z-index: 1;
    padding-top: 4rem;
}

.eyebrow {
    color: var(--secondary-color);
    font-size: 1.1rem;
    letter-spacing: 4px;
    margin-bottom: 1.5rem;
    display: block;
    font-weight: 600;
}

.hero-content h1 {
    font-size: 5.5rem;
    line-height: 0.95;
    margin-bottom: 2rem;
    text-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.hero-content .highlight {
    color: transparent;
    -webkit-text-stroke: 2px var(--primary-color);
    position: relative;
    font-weight: 800;
}

.hero-content p {
    font-size: 1.35rem;
    max-width: 650px;
    margin-bottom: 3rem;
    color: #e0e0e0;
    font-weight: 300;
}

.hero-actions {
    display: flex;
    gap: 1.5rem;
}

/* Trust Bar */
.trust-bar {
    display: flex;
    justify-content: center;
    gap: 4rem;
    padding: 2.5rem 5%;
    background: #0d232e;
    border-bottom: 1px solid var(--glass-border);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.trust-icon {
    font-size: 1.5rem;
    color: var(--secondary-color);
}

.trust-text {
    display: flex;
    flex-direction: column;
}

.trust-text strong {
    color: var(--text-light);
    font-weight: 600;
}

.trust-text span {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Sections General */
.inventory-section,
.roi-section {
    padding: 8rem 5%;
}

.dark-alt {
    background: #05141b;
}

.section-header {
    margin-bottom: 5rem;
    text-align: center;
}

.section-header h2 {
    font-size: 3.5rem;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.section-header p {
    color: var(--text-muted);
    font-size: 1.2rem;
}

/* ROI Grid */
.roi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.roi-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    padding: 3rem 2rem;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s;
}

.roi-card.featured {
    background: linear-gradient(135deg, rgba(214, 40, 40, 0.1), rgba(0, 0, 0, 0));
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.roi-card:hover {
    transform: translateY(-10px);
}

.roi-card.featured:hover {
    transform: scale(1.05) translateY(-10px);
}

.roi-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.roi-card h3 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.price-tag {
    color: var(--secondary-color);
    font-size: 1.2rem;
    margin-bottom: 2rem;
    display: block;
}

.feature-list {
    list-style: none;
    text-align: left;
    margin: 0 auto 2rem auto;
    display: inline-block;
}

.feature-list li {
    margin-bottom: 0.8rem;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text-muted);
}

.feature-list li::before {
    content: '•';
    color: var(--primary-color);
    position: absolute;
    left: 0;
}

.roi-card .btn-primary.small {
    padding: 0.8rem 2rem;
    font-size: 0.9rem;
}

/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2.5rem;
}

.card {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.3);
}

.card-image {
    height: 280px;
    overflow: hidden;
    position: relative;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.card:hover .card-image img {
    transform: scale(1.08);
}

.card-info {
    padding: 2rem;
    position: relative;
}

.card-info h3 {
    color: var(--text-light);
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

.card-info p {
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 1rem;
}

.badge {
    display: inline-block;
    background: rgba(255, 183, 3, 0.15);
    color: var(--secondary-color);
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Logo Spotlight */
.logo {
    position: relative;
    z-index: 10;
}

.logo::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(255, 183, 3, 0.4) 0%, transparent 70%);
    filter: blur(20px);
    z-index: -1;
    animation: pulse-glow 3s infinite alternate;
}

@keyframes pulse-glow {
    0% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.9);
    }

    100% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Pricing Section */
.pricing-section {
    padding: 6rem 5%;
    background: linear-gradient(to bottom, var(--bg-dark), #1a0505);
}

.package-highlight {
    background: rgba(255, 183, 3, 0.15);
    /* Slightly stronger tint */
    border: 2px solid var(--secondary-color);
    border-radius: 16px;
    padding: 3rem;
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    overflow: hidden;
    color: #FFF;
    /* EMERGENCY FIX: White Text */
    text-shadow: 1px 1px 4px #000;
    /* High Contrast Shadow */
}

.package-highlight p {
    color: #FFF !important;
    /* Force white for descriptions */
    text-shadow: 1px 1px 2px #000;
}

.package-highlight::after {
    content: 'BEST VALUE';
    position: absolute;
    top: 20px;
    right: -30px;
    background: var(--primary-color);
    color: white;
    padding: 0.5rem 3rem;
    transform: rotate(45deg);
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.package-price {
    font-family: 'Oswald', sans-serif;
    font-size: 3.5rem;
    color: var(--secondary-color);
    margin: 1rem 0;
    text-shadow: 0 0 20px rgba(255, 183, 3, 0.3);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.price-item {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    padding: 1.5rem;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: transform 0.3s ease;
}

.price-item:hover {
    transform: translateX(10px);
    border-color: var(--secondary-color);
}

.price-name {
    font-weight: bold;
    font-size: 1.1rem;
}

.price-cost {
    color: var(--secondary-color);
    font-family: 'Oswald', sans-serif;
    font-size: 1.25rem;
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: none;
    /* Hidden by default */
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    background: var(--bg-dark);
    border: 1px solid var(--secondary-color);
    padding: 2rem;
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s ease;
    box-shadow: 0 0 50px rgba(255, 183, 3, 0.2);
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 2rem;
    cursor: pointer;
}

.modal-close:hover {
    color: var(--primary-color);
}

.modal-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

/* Contact Section */
.contact-section {
    padding: 8rem 5%;
    background: linear-gradient(rgba(0, 18, 25, 0.92), rgba(0, 18, 25, 0.92)), url('assets/hero-main.png');
    background-size: cover;
    background-attachment: fixed;
    border-top: 1px solid var(--glass-border);
}

.contact-container {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 5rem;
    align-items: flex-start;
}

.contact-text h2 {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    line-height: 1;
}

.contact-text p {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 3rem;
}

.quote-form {
    background: rgba(10, 28, 36, 0.6);
    backdrop-filter: blur(20px);
    padding: 3.5rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
}

.quote-form h3 {
    margin-bottom: 2.5rem;
    font-size: 2.2rem;
}

.form-group {
    margin-bottom: 1.8rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 1.2rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--secondary-color);
}

.form-group textarea {
    height: 140px;
    resize: vertical;
}

.btn-submit {
    width: 100%;
    background: var(--primary-color);
    color: white;
    padding: 1.2rem;
    border: none;
    border-radius: 4px;
    font-family: 'Oswald', sans-serif;
    font-size: 1.2rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
    font-weight: 600;
    letter-spacing: 1px;
}

.btn-submit:hover {
    background: #b01c1c;
    transform: translateY(-2px);
}

footer {
    padding: 3rem 5%;
    text-align: center;
    border-top: 1px solid var(--glass-border);
    color: var(--text-muted);
    font-size: 0.9rem;
    background: #030d12;
}

/* =========================================
   MOBILE RESPONSIVE OVERRIDES
   ========================================= */

@media (max-width: 900px) {

    /* 1. Header & Nav Fixes */
    .navbar {
        height: auto;
        min-height: 90px;
        flex-direction: column;
        justify-content: center;
        padding: 0.5rem 1rem;
    }

    .nav-links {
        display: none !important;
    }

    .brand-container {
        width: 100%;
        margin: 0;
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        justify-content: center;
        padding: 0;
    }

    .brand-logo-svg {
        width: 100%;
        max-width: 300px;
        /* Cap width for sanity */
        height: auto;
        display: block;
    }

    /* 2. Typography Scaling & Overflows */
    .hero-content {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        overflow-x: hidden;
        /* Force containment */
    }

    .hero-content h1 {
        font-size: 2.0rem;
        /* Safer size */
        line-height: 1.1;
        width: 100%;
        max-width: 95vw;
        /* Strict Cap */
        margin: 0 auto 1rem auto;
        word-wrap: break-word;
        /* Prevent climb-off */
    }

    .eyebrow {
        font-size: 0.9rem;
        letter-spacing: 2px;
        white-space: normal;
        max-width: 90vw;
        margin: 0 auto 1rem auto;
        display: block;
        text-align: center;
    }

    .hero-content p {
        font-size: 1rem;
        max-width: 90vw;
        margin: 0 auto 1.5rem auto;
    }

    /* Section Headers */
    .section-header {
        width: 100%;
        overflow: hidden;
        /* Slice off skew edges */
    }

    .section-header h2 {
        font-size: 1.5rem;
        padding: 0.5rem 1rem;
        margin: 0 auto 1rem auto;
        width: auto;
        max-width: 92%;
        display: inline-block;
        transform: skew(-5deg);
        /* reduce skew on mobile */
    }

    /* 3. Layout Grids (Stacking) */
    .roi-grid,
    .highlight-grid,
    .contact-container,
    .gallery-grid,
    .trust-bar {
        grid-template-columns: 1fr;
        flex-direction: column;
        display: flex;
        gap: 1.5rem;
        max-width: 100vw;
        box-sizing: border-box;
    }

    .trust-bar {
        align-items: flex-start;
    }

    /* 4. Card Sizing */
    .roi-card,
    .highlight-card {
        width: 100%;
        margin: 0;
        padding: 1.5rem;
        min-height: auto;
        /* Remove fixed heights */
    }

    .roi-card.featured {
        transform: none;
        margin-top: 0;
    }

    .roi-icon {
        font-size: 2rem;
    }

    .form-group textarea {
        height: 100px;
    }

    .quote-form {
        padding: 1.5rem;
    }
}

/* Tiny Mobile Adjustments (iPhone SE etc) */
@media (max-width: 380px) {
    .brand-logo-svg {
        max-width: 260px;
    }

    .hero-content h1 {
        font-size: 1.8rem;
    }

    .section-header h2 {
        font-size: 1.4rem;
    }
}