:root {
    /* Color Palette */
    
    --primary-blue: #0047BB;
    --primary-blue-hover: #042c6e;
    --primary-red: #d3003f;
    --primary-red-hover: #a30030;
    --color-headings: #092643;
    --color-body:  #1a1a1a;
    --color-body-darker: #03172b;
    --color-border: #ccc;
    --hero-blue:#00A6C8;
    --card-cyan: #70d0e4;
    --card-blue: #76aadd;
    --loyalty-tan: #c5b47b;
    --text-dark: #1a1a1a;
    --text-light: #ffffff;
    --border-gray: #ccc;
    --bg-light: #ffffff;
    --footer-bg: #333333;
    --footer-border: #444444;


    /* Screen Size*/
    --container-max: 2360px; 
    --container-min: 1920px;

    /* ALIGNMENT FIX: Now automatically pulls from the variable above! */
    --container-edge-max: max(20px, calc((100vw - var(--container-max)) / 2 + 20px));

    /* ALIGNMENT FIX: Now automatically pulls from the variable above! */
    --container-edge-min: max(20px, calc((100vw - var(--container-min)) / 2 + 20px));

    /* Typography
    --font-main: "Inter", Arial, Helvetica, Arial, sans-serif; */
}

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

body {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    color: var(--color-body);
    font-size: 2.4rem;
    line-height: 1.5;
}

.container {
    max-width: var(--container-min);
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography & Buttons */

h1 {
    color: var(--color-headings);
     font-size: 1rem;
}

h2,
h3 {
  color: var(--color-headings);
  margin-bottom: 1rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 3rem;
}

p {
  margin-top: 0;
}

.btn {
    padding: 20px 35px;
    font-weight: bold;
    font-size: 0.85rem;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.btn-blue {
    background-color: var(--primary-blue);
    color: var(--text-light);
}

.btn-blue:hover {
    background-color: var(--primary-blue-hover);
}

.btn-red {
    background-color: var(--primary-red);
    color: var(--text-light);
}

.btn-red:hover {
    background-color: var(--primary-red-hover);
}

.section-title {
    text-align: center;
    font-size: 2.4rem;
    margin-bottom: 1rem;
    font-weight: 800;
    
}

/* Split */
.split-content p {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-body);
}



/* About Us Page */
.split-content {
    font-size: 2.4rem;
    text-align: left;
    align-self: start;
    margin: 40px;
}

.split-content .about-right-title {
    text-align: left;
}

/* Header */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 10px 20px;
}

.logo {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -1px;
}

.logo-blue { color: #00b4d8; }
.logo-black { color: var(--text-dark); }

.main-nav {
    display: flex;
    gap: 25px;
}

.main-nav a {
    text-decoration: none;
    color: var(--text-dark);
    font-size: 0.98rem;
    font-weight: 600;
    transition: color 0.3s ease;
    /* text-transform: lowercase; */
}

.main-nav a:hover {
    color: var(--primary-red);
}

/* =========================================
   HEADER LOGO STYLES
   ========================================= */

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.site-logo {
    /* Locks the height so it fits beautifully in the navbar */
    height: 75px; 
    
    /* Ensures the width scales proportionally so it never squishes */
    width: auto; 
    
    /* Buttery smooth transition if you want to add a hover effect */
    transition: transform 0.3s ease;
}

/* Optional: A subtle interaction when users hover over the logo */
.logo-link:hover .site-logo {
    transform: scale(1.05);
}


/* Search Bar */
.search-section {
    padding: 10px 20px 30px;
}

.search-wrapper {
    display: flex;
    border: 1px solid var(--border-gray);
    border-radius: 6px;
    padding: 4px;
    align-items: center;
}

.search-wrapper input {
    flex-grow: 1;
    border: none;
    padding: 12px 16px;
    outline: none;
    font-size: 0.9rem;
}

/* Hero Section */
.hero-section {
    background-color: var(--hero-blue);
    color: var(--text-light);
    padding: 60px 0;
}

.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
}

.hero-left h1 {
    font-size: 3.8rem;
    line-height: 1.1;
    margin-bottom: 15px;
    font-weight: 800;
    letter-spacing: 2px;
}

.hero-left p {
    font-size: 1.1rem;
    margin-bottom: 25px;
    font-weight: 500;
    letter-spacing: 1px;
}

.hero-image-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background-color: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    border-radius: 4px;
}

/* Tabs */
.tabs-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.tab-btn {
    background: transparent;
    border: 1px solid var(--color-body-darker);
    color: var(--color-body-darker);
    padding: 8px 24px;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    background-color: #f0f0f0;
}

.tab-btn.active {
    background: var(--color-body-darker);
    color: var(--text-light);
}

.tab-btn.active:hover {
    background-color: #000000;
}

/* Needs Section */
.needs-section .section-title {
    margin: 100px 0 20px 0;

}

.needs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    min-height: 350px;
    margin: 60px 0 20px 0;
}

.image-box {
    aspect-ratio: 1/1;
    /* background-color: var(--card-cyan); */
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-weight: bold;
    transition: background-image 0.3s ease;
   
}

.image-box-vertical {
    aspect-ratio: 1/1.2;
    margin: 40px 0 40px 0;
    padding: auto;
}

.image-box-horizontal {
    aspect-ratio: 1.6/1;
    margin: 40px 0 40px 0;
}

.needs-col-left #needs-left-img {
    width: 100%;
    aspect-ratio: 1/1;
    margin-bottom: 20px;
   
}

.needs-text-content {
    margin: 40px;
}

.needs-text-content h3 {
    font-size: 2rem;
    font-weight: 800;
    margin-top: 40px;
}

.needs-text-content p {
    font-size: 1.2rem;
    margin: 5px 0 40px 0;
    font-weight: 400;
    margin-right: 50px;
}

.needs-col-right {
    display: flex;
    flex-direction: column;
    
    
}

.right-heading {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 40px 0 40px 0;
    line-height: 1.2;
    color: var(--color-headings);
}

.needs-col-right #needs-right-img {
    width: 80%;
    flex-grow: 1;
    min-height: 300px;
}


/* Loyalty Section */
.loyalty-section {
    margin-top: 100px;
    margin-bottom: 100px;
}

.loyalty-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin: 60px 0 20px 0;
}

.loyalty-image-placeholder {
    aspect-ratio: 1/1;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    color: #333;
    transition: background-color 0.3s ease;
}

.loyalty-content {
    margin: 40px 0 40px 0;
    align-self: self-start;
}

.loyalty-content h3 {
    font-size: 2rem;
    margin: 0 0 20px 0;
    font-weight: 800;
}

.loyalty-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    font-weight: 400;
    max-width: 700px;
    margin-right: 200px;
}

/* Brand Story Section */
.about-content {
    padding-top: 70px;
}

/* Help center */
#faq-display-body {
    max-width: 800px;
}

/* Footer Section */
.main-footer {
    background-color: var(--footer-bg);
    color: var(--text-light);
    padding: 60px 0 80px;
}

.main-footer a {
    font-size: 1.1rem;
    letter-spacing: 1px;
}

/* THE FIX: We apply a strict max-width ONLY to the footer's container */
.main-footer .container {
    max-width: 1920px; 
    margin: 0 auto; /* Keeps the entire footer perfectly centered on massive screens */
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--footer-border);
    margin-bottom: 40px;
    
}

.email-signup {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.signup-label {
    font-weight: 700;
}

.signup-form {
    display: flex;
    gap: 10px;
}

.signup-form input {
    padding: 8px 12px;
    background: transparent;
    border: 1px solid #777;
    color: #fff;
    border-radius: 4px;
    outline: none;
    font-size: 0.98rem;
}

.social-icons {
    display: flex;
    gap: 10px;
}

.icon {
    display: block;
    width: 24px;
    height: 24px;
    background-color: #555;
    border-radius: 50%;
}

.footer-bottom {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 40px;
}

/* =========================================
   UPDATED FOOTER IMAGE BOX (Smaller Size)
   ========================================= */

.footer-img-placeholder {
    background-color: transparent;
    background-image: url('./assets/footer-sns-collection.jpg'); /* Your image path */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* THE FIX 1: Make it slightly less tall relative to its width */
    aspect-ratio: 16 / 9; 
    
    width: 100%;
    
    /* THE FIX 2: Caps the maximum width so it stops growing on large screens */
    max-width: 320px; 
    
    border-radius: 8px; 
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); 
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Updated Footer Link Layout */
.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates 4 equal columns */
    gap: 20px;
    width: 100%;
}


.link-col h4 {
    font-size: 0.9rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.link-col a {
    display: block;
    color: #aaa;
    text-decoration: none;
    margin-bottom: 8px;
    font-size: 0.8rem;
    transition: color 0.2s;
}

.link-col a:hover {
    color: #fff;
}

/* =========================================
   SUB-PAGES GLOBAL STYLES
   ========================================= */

.page-hero {
    background-color: var(--hero-blue);
    color: var(--text-light);
    padding: 60px 0;
}

.page-hero .hero-container {
    align-items: flex-start;
}

.page-hero h1 {
    font-size: 2.5rem;
    line-height: 1.1;
    margin-bottom: 15px;
    font-weight: 800;
}

.page-hero .hero-image-placeholder {
    aspect-ratio: 21/9; /* Wider banner style */
}

.content-section {
    padding: 60px 20px;
}

/* Split Layouts (Image/Text side-by-side) */
.split-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 60px;
}

.split-row .reverse {
    direction: rtl;
}

.split-row .reverse > * {
    direction: ltr;
}

.split-row .split-content h2 {
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--color-headings);
}

.split-row .split-content h3 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--color-headings);
}

.split-row .split-content p {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: #444;
    max-width: 700px;
}

/* Right Production Assets */

.media-assets {
    padding-top: 40px;
}

.media-assets p {
    padding-bottom: 40px;
}


.media-print {
    margin-top: -350px;
}

.media-print .image-box {
    margin-bottom: 100px;
}

/* Partnership Section */
.partner-content .split-content {
    padding-top: 40px;
}

/* Three Column Grids (Steps & Benefits) */
.grid-3-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.split-row .step-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 15px 0 10px;
    text-transform: capitalize;
}

.step-number {
    font-size: 3rem;
    font-weight: 900;
    color: var(--text-dark);
    line-height: 1;
}

/* =========================================
   THE BRANDNU EDGE GRID (BENTO BOX LAYOUT)
   ========================================= */

.edge-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: 
        "box1 box2 box3"
        "box4 box4 box3";
    gap: 20px;
    margin: 40px 0 150px 0;

    /* THE FIX: Locks every row to exactly 320px tall. 
       Box 4 will be a sleek 320px panoramic banner. 
       Box 3 will perfectly span two rows (640px + 20px gap). */
    grid-auto-rows: 320px;
}

/* Base styles for the outer photo boxes */
.edge-box {
    position: relative;
    background-color: var(--border-gray); 
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    /* min-height: 350px;  */
    overflow: hidden; 
    
    /* Flexbox perfectly centers the cyan floating boxes */
    display: flex;
    align-items: center; 
    justify-content: center; 
    padding: 20px;
}

/* Lock the boxes into their custom grid shapes */
.edge-box-1 { grid-area: box1; }
.edge-box-2 { grid-area: box2; }
.edge-box-3 { grid-area: box3; min-height: 100%; } /* Forces the right column to stretch tall */
.edge-box-4 { grid-area: box4; }

/* The Dark Tint Shield (Makes the cyan box pop off the background) */
.edge-box::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4); 
    z-index: 1; 
}

/* =========================================
   THE INNER CYAN CONTENT BOXES
   ========================================= */

/* =========================================
   THE INNER CONTENT BOXES (Dark Translucent)
   ========================================= */

.edge-box .edge-content {
    position: relative;
    z-index: 2; 
    
    /* THE FIX: Deep, dark transparent background (85% opacity) */
    background-color: rgba(20, 20, 20, 0.15); 
    
    /* Modern Touch: Blurs the photo slightly right exactly where the box sits */
    backdrop-filter: blur(2px); 
    -webkit-backdrop-filter: blur(2px); 
    
    padding: 30px;
    width: 90%; 
    border-radius: 4px; 
    
    /* Adds a microscopic white outline to keep the edges crisp against the dark photo */
    /* border: 1px solid rgba(255, 255, 255, 0.1);  */
    
    /* Deeper shadow to make it lift off the background */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); 

    /* THE FIX: Prepares the box for a smooth animation */
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
}

/* THE HOVER EFFECT: Moves the glass box up slightly and deepens the shadow */
.edge-box:hover .edge-content {
    transform: translateY(-8px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.6);
}

.edge-content {
    margin: 200px 0 0 0;
}

.edge-box-3 .edge-content {
    margin-top: 500px;
}

.edge-content h3, 
.edge-content h4 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: #ffffff;
}

.edge-content p {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
    color: #ffffff;
    margin: 0;
}

/* Help Center Specifics */
.help-hero-search {
    margin-top: 30px;
    display: flex;
    width: 100%;
    max-width: 600px;
}

.help-hero-search input {
    flex-grow: 1;
    padding: 15px 20px;
    border: none;
    border-radius: 4px 0 0 4px;
    font-size: 1rem;
}

.help-hero-search button {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 0 20px;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}

.help-layout {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 40px;
    align-items: start;
}

.content-section .faq-links a {
    display: block;
    padding: 10px 0;
    text-decoration: none;
    font-size: 0.98rem;
    font-weight: 700;
    border-bottom: 1px solid #eee;
}

/* Responsive Updates */
@media (max-width: 768px) {
    .split-row { grid-template-columns: 1fr; gap: 30px; }
    .split-row.reverse { direction: ltr; }
    .grid-3-col { grid-template-columns: 1fr; }
    .edge-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "box1" "box2" "box4" "box3";
    }
    .help-layout { grid-template-columns: 1fr; }
}

/* =========================================
   HEADER DROPDOWN STYLES
   ========================================= */

.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    display: flex;
    align-items: center;
    gap: 4px;
}

.arrow {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

/* The hidden dropdown menu */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--bg-light);
    min-width: 200px;
    box-shadow: 0px 8px 20px rgba(0,0,0,0.1);
    z-index: 100;
    border-radius: 4px;
    top: 100%;
    left: 0;
    border: 1px solid var(--border-gray);
    padding: 8px 0;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: var(--text-dark);
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: lowercase;
    transition: background-color 0.2s ease;
}

.dropdown-content a:hover {
    background-color: #f5f5f5;
    color: var(--primary-red);
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Flip the arrow on hover */
.dropdown:hover .arrow {
    transform: rotate(180deg);
}

/* Mobile adjustments for dropdown */
@media (max-width: 768px) {
    .dropdown {
        display: block;
        width: 100%;
    }
    
    .dropdown-content {
        position: static;
        box-shadow: none;
        border: none;
        border-left: 2px solid var(--primary-red);
        border-radius: 0;
        padding: 0;
        margin-top: 10px;
        margin-left: 10px;
        display: none; /* Hide by default on mobile */
    }

    /* On mobile, we still use hover for simplicity, 
       but you can switch to a click-toggle in JS later if needed */
    .dropdown:hover .dropdown-content,
    .dropdown:active .dropdown-content {
        display: block;
    }
}

/* Class added by JavaScript for mobile toggling */
.dropdown-content.show {
    display: block;
}

/* =========================================
   MOBILE HAMBURGER MENU STYLES
   ========================================= */

/* Hide the hamburger button on desktop */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    z-index: 1000; /* Ensure it stays above the menu */
}

/* Style the three lines of the hamburger */
.mobile-menu-btn span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-dark);
    margin: 5px 0;
    transition: all 0.3s ease;
}


/* =========================================
   SUB-PAGES GLOBAL & SPECIFIC STYLES
   ========================================= */

.page-hero {
    background-color: var(--hero-blue);
    color: var(--text-light);
    padding: 60px 0;
}

.page-hero h1 {
    font-size: 2.5rem;
    line-height: 1.1;
    margin-bottom: 15px;
    font-weight: 800;
}

.hero-placeholder-box {
    background-color: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    border-radius: 4px;
    padding: 40px 20px;
    width: 100%;
    min-height: 200px;
}

.content-section {
    padding: 80px 20px;
}

/* Split Layouts */
.split-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 60px;
}

.split-row.reverse {
    direction: rtl;
}

.split-row.reverse > * {
    direction: ltr;
}

.split-content h2 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--color-headings);
}

.split-content p {
    font-size: 1rem;
    margin-bottom: 20px;
    color: #444;
}

/* 3-Column Steps & Benefits Grids */
.grid-3-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 40px;
}

.step-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 10px 0;
}

.step-number {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--primary-red);
    line-height: 1;
}

.benefit-item .image-box {
    width: 100%;
    aspect-ratio: 4/3;
    margin-bottom: 20px;
}

.benefit-item h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 20px 20px 10px 20px;
}

.benefit-item p {
    font-size: 1rem;
    font-weight: 500;
    margin: 0 20px 20px 20px;
}

/* The Brandnu Edge Grid */
.edge-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-top: 40px;
}

.edge-box {
    background-color: var(--card-blue);
    padding: 30px;
    color: #fff;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
}

.edge-box h4 { font-size: 1.2rem; margin-bottom: 10px; font-weight: 700; }
.edge-box p { font-size: 0.9rem; }

.edge-box-4 {
    grid-column: 1 / 3; /* Spans two columns */
}

.edge-box-3 {
    background-color: transparent;
    color: var(--text-dark);
    padding: 0;
}

/* .edge-box-3 h4 { color: var(--text-dark); } */
/* .edge-box-3 p { color: #444; margin-bottom: 20px; } */

/* Media Production Staggered Grid */
.media-staggered-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

.media-staggered-left {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Help Center Layout */
.help-hero-search {
    margin-top: 20px;
    display: flex;
    width: 100%;
    max-width: 600px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}

.help-hero-search input {
    flex-grow: 1;
    padding: 15px 20px;
    border: none;
    font-size: 1rem;
    outline: none;
}

.help-hero-search button {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 0 20px;
    cursor: pointer;
}

.help-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    align-items: start;
}

.faq-links h3 { 
    margin-bottom: 20px; color: var(--hero-blue); 
    font-size: 1.8rem;
}
.faq-links a {
    display: block;
    padding: 12px 0;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 1px solid #eee;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .split-row { grid-template-columns: 1fr; gap: 30px; }
    .split-row.reverse { direction: ltr; }
    .grid-3-col, .edge-grid, .media-staggered-grid, .help-layout { 
        grid-template-columns: 1fr; gap: 30px; 
    }
    .edge-box-4 { grid-column: 1 / 2; }
}

/* =========================================
   UPDATED SPECIFIC STYLES
   ========================================= */

/* Help Center Search Bar */
.help-hero-search {
    display: flex;
    width: 100%;
    max-width: 500px;
    background: #ffffff;
    border-radius: 4px;
    overflow: hidden;
}

.help-hero-search input {
    flex-grow: 1;
    padding: 12px 15px;
    border: none;
    font-size: 0.95rem;
    outline: none;
    color: var(--text-dark);
}

.help-hero-search button {
    background-color: #333333;
    border: none;
    padding: 0 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-hero-search button svg {
    fill: #ffffff;
    width: 16px;
    height: 16px;
}

/* Typography tweaks for Media / About pages */
.content-section h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-dark);
}


.help-subnav {
    padding: 15px 20px;
    font-size: 0.75rem;
    color: #666;
    font-weight: 600;
}

.help-subnav span {
    color: var(--card-cyan);
    font-weight: 800;
}

/* =========================================
   FORM STYLES (Contact & Quote)
   ========================================= */

.form-wrapper {
    background-color: #f9f9f9;
    padding: 40px;
    border-radius: 4px;
    border: 1px solid var(--border-gray);
}

.form-group {
    margin-bottom: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-gray);
    border-radius: 4px;
    font-size: 0.95rem;
    font-family: inherit;
    background-color: #ffffff;
    transition: border-color 0.3s ease;
    color: var(--text-dark);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-red);
    box-shadow: 0 0 0 2px rgba(211, 0, 63, 0.1);
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 15px;
    cursor: pointer;
}

/* =========================================
   FAQ INTERACTIVE STYLES
   ========================================= */

.faq-list a {
    display: block;
    padding: 15px 0;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.75rem;
    border-bottom: 1px solid #eeeeee;
    transition: color 0.2s ease;
}

.faq-list a:hover {
    color: var(--footer-border);
}

.faq-list a.active {
    color: var(--primary-red);
}

/* =========================================
   HOVER MEGA MENU (The Invisible Bridge Fix)
   ========================================= */

@media (min-width: 769px) {
    .main-header {
        position: fixed; 
    }
    
    .dropdown {
        position: static; 
        display: flex;
        align-items: center;
        /* Removing the padding from .dropbtn as well to keep the header slim */
    }

   /* THE MEGA MENU BOX (Edge-to-Edge) */
    .dropdown .dropdown-content.mega-menu-hover {
        display: none; 
        position: absolute;
        top: 100%; 
        left: 50%;
        transform: translateX(-50%);
        
        /* THE FIX: Force the box to span the entire screen */
        width: 100vw; 
        max-width: none; 
        
        background-color: #ffffff;
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
        
        /* Removed rounded corners since it touches the screen edges */
        border-radius: 0; 
        
        /* We only need top/bottom padding here now */
        padding: 40px 0; 
        z-index: 1000;
        border-bottom: 1px solid #eaeaea; 
        margin: 0 !important; 
    }

    /* THE INVISIBLE BRIDGE: This is the magic! 
       It reaches 40px UP from the white box to touch your mouse while it travels */
    .dropdown .dropdown-content.mega-menu-hover::before {
        content: "";
        position: absolute;
        top: -40px; 
        left: 0;
        right: 0;
        height: 40px; 
        background: transparent; /* Remains completely invisible over your photos */
    }

    /* Trigger the dropdown on hover */
    .dropdown:hover .dropdown-content.mega-menu-hover {
        display: block;
        animation: dropIn 0.3s ease-out forwards;
    }

    /* ALIGNMENT & GRID FIXES (Centered Content) */
    .mega-hover-container {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 40px !important;
        text-align: left !important; 
        
        /* THE FIX: Keeps your actual links perfectly centered and readable */
        max-width: 1200px; 
        margin: 0 auto !important; 
        padding: 0 20px; /* Safety padding so text never hits the edge */
    }



    /* 1. Ensure the column wrapper forces everything to the left edge */
    .mega-list-column {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; 
        text-align: left !important;
    }

    /* 2. Lock the header to the exact left edge */
    .mega-list-header {
        font-size: 0.98rem !important;
        color: #1a1a1a !important;
        margin: 0 0 10px 0 !important; /* Zeroes out left/right/top margins */
        padding: 0 !important;
        font-weight: 800 !important;
        text-align: left !important;
        width: 100%;
        letter-spacing: 1px;
    }

    /* 3. Nuke the browser's default list padding */
    .mega-list {
        font-size: 1px;
        list-style: none !important;
        padding: 0 !important; /* Kills the ghost bullet padding */
        margin: 0 !important;
        width: 100%;
    }

    /* 4. Ensure list items stack perfectly straight */
    .mega-list li {
        margin: 0 0 15px 0 !important; 
        padding: 0 !important;
        text-align: left !important;
        display: block !important;
    }

    /* 5. Keep the links flush left */
    .dropdown .dropdown-content.mega-menu-hover .mega-list a {
        padding: 0 !important; 
        margin: 0 !important;
        color: #666666 !important;
        background-color: transparent !important;
        border: none !important;
        text-decoration: none !important;
        font-size: 0.85rem !important;
        font-weight: 500 !important;
        text-transform: capitalize;
        transition: color 0.3s ease !important;
        display: inline-block !important;
        text-align: left !important;
        letter-spacing: 1px;
    }

    .dropdown .dropdown-content.mega-menu-hover .mega-list a:hover {
        color: var(--primary-red) !important;
    }
}

/* =========================================
   FULL-WIDTH IMAGE HERO STYLES (LEFT ALIGNED)
   ========================================= */

.hero-full-width {
    position: relative;
    width: 100%;
    min-height: 50vh; 
    display: flex;
    align-items: center;
    justify-content: flex-start; /* THE FIX: Pushes the container to the right */
    padding-left: var(--container-edge-max); 
    padding-right: var(--container-edge-max);
    
    background-image: url('./assets/homepage-hero.jpg'); 
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat;
    color: #ffffff; 
}



/* The Dark Overlay - Now sweeping left to right */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, rgba(0, 0.1, 0.2, 0.3) 35%, rgba(26, 26, 26, 0.95) 100%); 
    z-index: 1;
}

/* Container to keep text above the overlay */
.hero-full-width .hero-content {
    position: relative;
    z-index: 2; 
    max-width: 650px; /* Made slightly narrower for a neat column */
    text-align: left; /* THE FIX: Left-aligns the text within the right-side box */
    margin: 0; 
    padding: 0;
}

/* Typography */
.hero-title {
    font-size: 6rem; /* Bumped up slightly for impact */
    font-weight: 900;
    padding: 0;
    margin-bottom: 20px;
    line-height: 1.1;
    color: var(--bg-light);
}

.hero-subtitle {
    max-width: 500px;
    display: block;
    margin: 0 auto;
    justify-content: center;
}


.hero-left p {
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 40px;
    color: #eeeeee;
    line-height: 1.5;
}

/* Buttons Container */
.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: flex-start; /* THE FIX: Aligns buttons to the left of the text block */
}

/* White Outline Button Style */
.btn-outline-white {
    background: transparent;
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 15px 35px;
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-outline-white:hover {
    background: #ffffff;
    color: var(--text-dark);
}

/* =========================================
   SUB-PAGE FULL-WIDTH HERO STYLES
   ========================================= */

.hero-subpage {
    position: relative;
    width: 100%;
    min-height: 35vh; /* Shorter than the homepage, perfect for internal pages */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Centers the text for a clean title layout */
    text-align: left;
    padding-left: var(--container-edge-max); 
    padding-right: var(--container-edge-max);
    
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat;
    color: #ffffff; 
}



/* The Dark Overlay - Top to Bottom for centered text */
.hero-subpage-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(26, 26, 26, 0.9) 100%); 
    z-index: 1;
}

/* Container to keep text above the overlay */
.hero-subpage .hero-content {
    position: relative;
    z-index: 2; 
    max-width: 800px;
    padding-left: 0;
    margin: 20px 0 20px 0; /* Pushes text slightly down to account for the header navigation */

    /* THE FIX: Deep, dark transparent background (85% opacity) */
    /* background-color: rgba(20, 20, 20, 0.15);  */
    
    /* Modern Touch: Blurs the photo slightly right exactly where the box sits */
    backdrop-filter: blur(3px); 
    -webkit-backdrop-filter: blur(3px); 
    
    padding: 40px;
    width: 80%; 
    border-radius: 4px; 
    
    /* Adds a microscopic white outline to keep the edges crisp against the dark photo */
    border: 1px solid rgba(255, 255, 255, 0.5); 
    
    /* Deeper shadow to make it lift off the background */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); 
   
}

.hero-subpage h1 {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 15px;
    line-height: 1.1;
    color: #ffffff;
    letter-spacing: 2px;
}

.hero-subpage p {
    font-size: 1.2rem;
    font-weight: 500;
    color: #eeeeee;
    margin: 0;
    max-width: 800px;
    letter-spacing: 1px;
}


.media-av {
    margin-top: 50px;
}

.media-av p {
    margin-right: 60px;
}

.media-print h3{
    margin-top: 40px;
}

.media-assets {
    margin-top: 50px;
}

.media-assets p {
    margin: 0 25px 40px 0;
}


/* =========================================
   FLOATING ACTION BUTTONS
   ========================================= */

.floating-widget-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end; /* Keeps the circular button aligned right */
    gap: 15px;
    z-index: 9999; /* Guarantees it floats over absolutely everything */
}

/* Base style for both buttons */
.float-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-decoration: none;
}

.float-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

/* The "Get a Quote" Pill Button */
.float-contact {
    background-color: var(--primary-red);
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.95rem;
    gap: 10px; /* Space between icon and text */
}

.float-contact:hover {
    background-color: var(--primary-red-hover);
}

/* The "Back to Top" Circular Button */
.float-top {
    background-color: var(--card-blue);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    
    /* Hidden by default before scrolling */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); 
}

.float-top:hover {
    background-color: #000000;
}

/* The class JavaScript will add when you scroll down */
.float-top.show-top-btn {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}



/* =========================================
   PROJECT GALLERY STYLES
   ========================================= */

.gallery-section {
    padding: 80px 20px;
}

/* 3-Column Grid that automatically spaces itself */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

/* The actual photo box */
.gallery-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden; /* Hides the image if it tries to zoom outside the box */
    aspect-ratio: 4 / 3; /* Keeps all photos perfectly uniform */
    cursor: pointer;
    background-color: var(--border-gray);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* The Background Image */
.gallery-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); /* Buttery smooth zoom */
}

/* The Dark Gradient Overlay (Hidden by default) */
.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%; /* Only covers the bottom half of the image */
    background: linear-gradient(to top, rgba(26,26,26,0.9) 0%, rgba(26,26,26,0) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    
    /* Pushes the text down and hides it */
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

/* Typography inside the overlay */
.gallery-category {
    color: var(--loyalty-tan);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.gallery-client {
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
}

/* THE HOVER MAGIC */
.gallery-item:hover .gallery-bg {
    transform: scale(1.08); /* Zooms the photo in slightly */
}

.gallery-item:hover .gallery-overlay {
    opacity: 1; /* Fades in the dark gradient */
    transform: translateY(0); /* Slides the text up into position */
}



/* =========================================
   LIGHTBOX STYLES
   ========================================= */

.lightbox {
    display: none; /* Hidden completely by default */
    position: fixed;
    z-index: 10000; /* Sits on top of EVERYTHING, even your floating buttons */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 15, 15, 0.95); /* Deep, premium dark background */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* This class gets added by JS to trigger the fade-in */
.lightbox.show {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

.lightbox-content {
    max-width: 90%;
    max-height: 80vh; /* Prevents extremely tall images from going off-screen */
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    
    /* Starts slightly smaller so it can 'pop' out */
    transform: scale(0.95);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.lightbox.show .lightbox-content {
    transform: scale(1); /* Snaps to full size */
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #ffffff;
    font-size: 45px;
    font-weight: 300;
    cursor: pointer;
    transition: color 0.3s;
}

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

#lightbox-caption {
    margin-top: 20px;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* =========================================
   GALLERY FILTERS & VIDEO STYLES
   ========================================= */

/* Pill Tabs */
.gallery-filter-container {
    text-align: center;
    margin-bottom: 40px;
}

.pill-tabs {
    display: inline-flex;
    background-color: #1a1a1a;
    padding: 6px;
    border-radius: 50px;
}

.pill-btn {
    background: transparent;
    color: #888888;
    border: none;
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pill-btn:hover {
    color: #ffffff;
}

.pill-btn.active {
    background-color: var(--primary-red);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(227, 24, 55, 0.3);
}

/* Play Icon for Video Thumbnails */
.play-icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none; /* Allows the hover effect to pass through it */
    transition: all 0.3s ease;
}

.gallery-item:hover .play-icon-overlay {
    background-color: var(--primary-red);
    transform: translate(-50%, -50%) scale(1.1);
}

/* JavaScript uses this class to hide items when a tab is clicked */
.gallery-item.hide-item {
    display: none;
}

/* Make sure the video player looks as good as the images */
#lightbox-video {
    display: none; /* Hidden by default */
    background-color: #000;
    width: 100%;
    max-width: 1000px; /* Slightly wider for cinematic video */
    outline: none;
}



/* =========================================
   RESPONSIVE MASTER BREAKPOINTS
   ========================================= */

/* =========================================
   DESKTOP & ULTRA-WIDE MASTER BREAKPOINTS
   (Progressive Scaling via min-width)
   ========================================= */

/* 7. Full HD Monitors (1920px) */
@media (min-width: 1920px) {
    :root { 
        --container-max: 1600px; 
    }
    .hero-full-width { 
        min-height: 50vh; 
    }
    .hero-subpage { 
        min-height: 35vh; 
    }
    .hero-title { 
        font-size: 7.5rem; 
    }
    .edge-grid { 
        grid-auto-rows: 400px; 
    }
}

/* 6. Large Monitors / Pre-Full HD (1720px) */
@media (min-width: 1720px) {
    :root { 
        --container-max: 1500px; 
    }
    /* Great spot to slightly bump up H2 and H3 sizes if they feel lost */
}

/* 5. MacBooks & 1440p Monitors (1440px) */
@media (min-width: 1440px) {
    :root { 
        --container-max: 1300px; 
    }
    .hero-title { 
        font-size: 6rem; 
    }
    .edge-grid { 
        grid-auto-rows: 350px; 
    }
}

/* 3. Standard Desktop / Older Monitors (1280px) */
@media (min-width: 1280px) {
    /* Often skipped in modern web dev, but great for fine-tuning 
       grid gaps if your 3-column layouts feel slightly tight here. */
}

/* 4. Common Windows Laptops (1366px) */
@media (min-width: 1366px) {
    :root { 
        --container-max: 1200px; 
    }
}

/* 1. iPad Pro Landscape & Older Laptops (1024px) */
@media (min-width: 1024px) {
    /* Your base CSS already handles this beautifully. 
       Only add rules here if a specific element looks cramped. */
}

/* 2. Small Modern Laptops (1200px) */
@media (min-width: 1200px) {
    :root { 
        --container-max: 1100px; 
    }
}


/* -----------------------------------------
   1. TABLET & SMALL DESKTOP (Max 992px)
   ----------------------------------------- */
@media (max-width: 992px) {
    /* Global spacing gets a bit tighter */
    .section-title { font-size: 2.5rem; }
    .container { padding-left: 30px; padding-right: 30px; }

    /* Gallery Grid drops from 3 columns to 2 */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    /* THE FIX: Stack heavy 2-column layouts earlier to prevent squashing */
    .needs-grid, 
    .loyalty-grid, 
    .split-row {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    /* Reset the right-side vertical image so it doesn't stretch weirdly */
    .needs-col-right #needs-right-img {
        width: 100%;
        min-height: 400px;
    }

    /* Undo reverse layouts so images always stack logically above text */
    .split-row.reverse { 
        direction: ltr; 
    }
    
    /* Center the text in these sections now that they are full width */
    .needs-text-content,
    .loyalty-content,
    .split-content {
        text-align: center;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* Ensure the paragraphs don't stretch too wide and become hard to read */
    .needs-text-content p,
    .loyalty-content p,
    .split-content p {
        max-width: 700px;
        margin-right: 0;
        margin-left: 0;
    }

    .right-heading {
        text-align: center;
    }
}


/* =========================================
   TABLET & MOBILE RESPONSIVENESS (Max 768px)
   ========================================= */
@media (max-width: 768px) {
    
    /* --- 1. Header & Navigation --- */
    .main-header {
        flex-direction: column;
        gap: 15px;
    }
    .site-logo {
        height: 75px; /* Shrinks slightly so it doesn't crowd mobile menus */
    }

    /* --- 2. Hero Sections (Home & Subpages) --- */
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero-full-width {
        min-height: 65vh; 
        justify-content: center; 
        padding: 0 20px;
    }
    .hero-overlay {
        /* Reverts gradient to top-to-bottom for mobile readability */
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(26, 26, 26, 0.85)); 
    }
    .hero-full-width .hero-content {
        text-align: center;
    }

    /* THE FIX: Force the subtitle text and its container to the center */
    .hero-subtitle,
    .hero-left p,
    .hero-content p {
        text-align: center !important; 
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100%;
    }

    .hero-title {
        font-size: 3rem;
    }
    .hero-subtitle {
        font-size: 1.1rem;
    }
    .hero-buttons {
        flex-direction: column; 
        justify-content: center;
        gap: 15px;
    }
    
    .hero-subpage {
        min-height: 25vh; 
        justify-content: center;
        text-align: center;
    }
    .hero-subpage .hero-content {
        padding: 0 20px;
        margin-top: 20px;
    }
    .hero-subpage h1 {
        font-size: 2.5rem;
    }
    .hero-subpage p {
        font-size: 1.05rem;
        margin: 0 auto;
    }

    /* --- 3. Main Content Grids & Layouts --- */
    .needs-grid,
    .loyalty-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .needs-col-right #needs-right-img {
        width: 100%;
        min-height: 250px;
    }

    /* Sections */
    .loyalty-section .section-title {
        font-size: 3.6rem;
        max-width: 650px;
        margin-bottom: 40px;
    }
    
    .needs-col-right .right-heading {
        margin-bottom: 40px;
        /* border: 2px solid red; */

    }
    
    /* Bento/Edge Grid */
    .edge-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "box1" "box2" "box3" "box4";
        grid-auto-rows: 300px;
    }

    
    /* Project Gallery */
    .gallery-grid {
        grid-template-columns: 1fr; 
    }
    .gallery-overlay {
        opacity: 1; /* Force overlay to show since mobile has no hover */
        transform: translateY(0);
        height: 50%;
    }

    /* Steps & Content blocks */
    .split-row .step-card p {
        font-size: 1.2rem;
        font-weight: 700;
        margin: 15px 0 10px;
        text-transform: capitalize;
        max-width: 500px;
    }

    /* --- 4. Forms --- */
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .form-wrapper {
        padding: 25px;
    }

    /* --- 5. Footer --- */
    .footer-top {
        flex-direction: column !important;
        gap: 20px !important;
        align-items: flex-start !important; 
        text-align: left !important;
    }
    
    .email-signup {
        align-items: flex-start !important;
        width: 100%;
    }

    .signup-form {
        margin: 0 !important; /* Removes the centering margin */
        justify-content: flex-start !important; 
    }

    .social-icons {
        justify-content: flex-start !important;
        margin-top: 0 !important;
    }

    /* 2. Image and Links side-by-side in one row */
    .footer-bottom {
        display: grid !important;
        grid-template-columns: 1fr 2.5fr !important; /* Image gets 1 fraction, links get 2.5 */
        gap: 40px !important;
        align-items: flex-start !important;
    }

    /* 3. Lock the image to the left inside its new column */
    .footer-img-placeholder {
        margin: 0 !important; /* Removes the center alignment */
        width: 100% !important;
    }

    /* 4. Force 3 columns for the bottom links */
    .footer-links {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; 
        gap: 20px !important;
        text-align: left !important; 
    }
    
    .link-col {
        align-items: flex-start !important;
    }

    /* --- 6. Floating Widgets --- */
    .floating-widget-container {
        bottom: 20px;
        right: 20px;
    }
    .float-contact {
        padding: 10px 20px;
        font-size: 0.85rem;
    }
    .float-top {
        width: 45px;
        height: 45px;
    }

    
}

/* =========================================
   ULTIMATE MOBILE ALIGNMENT OVERRIDES (Max 768px)
   ========================================= */
@media (max-width: 768px) {
    
    /* --- 1. THE HEADER FIX --- 
       Forces the logo and hamburger to stay side-by-side */
    .main-header {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100%;
        padding: 10px 15px !important;
    }
    
   /* --- 2. THE IMAGE FIX --- 
       Forces all grid images to fill the mobile container perfectly */
    .needs-col-left #needs-left-img,
    .needs-col-right #needs-right-img,
    .loyalty-image-placeholder,
    .image-box {
        width: 100% !important;
        max-width: 100vw !important; /* Prevents overflow */
        height: auto !important;
        min-height: 250px !important; /* Ensures background images still show up */
        margin: 0 auto 30px auto !important;
        display: block !important;
    }
    
    /* --- 3. THE CONTENT FIX (NUKE DESKTOP MARGINS) --- */
    .needs-col-left,
    .needs-col-right,
    .loyalty-content,
    .split-content {
        width: 100% !important;
        margin: 0 !important; /* Kills the 200px desktop margin */
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    /* Center the headings perfectly */
    .needs-text-content h3, 
    .loyalty-content h3,
    .right-heading,
    .split-content h2 {
        text-align: center !important;
        margin: 0 0 15px 0 !important;
        width: 100% !important;
    }

    /* Force paragraphs to center and clear any right-side margins */
    .needs-text-content p, 
    .loyalty-content p,
    .split-content p {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 20px auto !important; /* Auto left/right forces true center */
        padding: 0 10px !important;
        text-align: center !important;
    }

    /* THE BENTO BOX MARGIN FIX */
    .edge-content {
        margin: 0 !important; /* Kills the 200px/500px top margins from desktop */
        width: 100% !important;
    }
}


/* =========================================
   MOBILE LARGE (MAX 520px) ADJUSTMENTS
   ========================================= */
@media (max-width: 520px) {
    
    /* Gallery Names */
    .gallery-category {
        font-size: 0.5rem;
    }

    .gallery-overlay h3 {
        font-size: 0.68rem;
    }
    
    /* 1. Global Spacing & Typography */
    .section-title {
        font-size: 2rem; /* Prevents massive text from wrapping awkwardly */
    }
    .gallery-section {
        padding: 50px 15px; /* Reduces the dead space on the sides */
    }

    /* 2. Email Sign-Up Form (The Stack) */
    .signup-form {
        flex-direction: column; /* Stacks the input on top of the button */
        width: 100%;
    }
    .signup-form .btn-red {
        width: 100%; /* Makes the submit button full-width for easy thumb tapping */
        padding: 14px 0;
        text-align: center;
        margin-top: 5px;
    }

    /* 3. Floating Action Buttons (Get out of the way) */
    .floating-widget-container {
        bottom: 15px; /* Tucks them closer to the corner */
        right: 15px;
        gap: 10px;
    }
    .float-contact {
        padding: 8px 16px;
        font-size: 0.8rem;
    }
    .float-contact svg {
        width: 16px; /* Shrinks the icon slightly */
        height: 16px;
    }
    .float-top {
        width: 40px;
        height: 40px;
    }

    /* 4. Gallery & Lightbox Refining */
    .gallery-overlay {
        padding: 20px; /* Gives the image more room to breathe */
    }
    .gallery-client {
        font-size: 1.1rem; /* Scales down the project title */
    }
    .pill-tabs {
        display: flex;
        width: 100%; /* Stretches the pill container */
    }
    .pill-btn {
        flex: 1; /* Makes the Photo and Video buttons equal width */
        padding: 8px 10px;
        font-size: 0.85rem;
    }
    .lightbox-close {
        top: 15px;
        right: 20px;
        font-size: 35px; /* Makes the X a bit more compact */
    }
    
    .needs-col-left .needs-text-content {
        /* flex-direction: column;  */
        justify-content: center;
        gap: 15px;
    }

    .needs-text-content h3 {
        font-size: 2.4rem;
        font-weight: 800;
        padding: 10px;
        margin-top: 40px;
        text-align: center;
    }

    .needs-text-content p {
        font-size: 1.2rem;
        margin: 5px 0 40px 0;
        font-weight: 400;
        text-align: center;  
    }

    .needs-btn {
        display: block;
        width: fit-content;
        margin: 0 auto;
    }

    .needs-col-right {
        text-align: center;
    }

    /* loyalty responsive */

    .loyalty-content {
    margin: 40px 0 40px 0;
    align-self: self-start;
    }

    .loyalty-content h3 {
        font-size: 2rem;
        margin: 0 0 20px 0;
        font-weight: 800;
        text-align: center;
    }

    .loyalty-content p {
        font-size: 1.2rem;
        margin-bottom: 30px;
        font-weight: 400;
        max-width: 700px;
        margin-right: 20px;
        text-align: center;
    }


    .loyalty-btn {
        display: block;
        width: fit-content;
        margin: 0 auto;
    }

    .footer-top{
    display: block;
    width: fit-content;
    margin: 0 auto;
    gap: 40px;
    }

    .email-signup {
        text-align: center;
    }

    .social-icons {
        display: flex;
        margin: 0 auto;
        width: fit-content;
        margin-top: 20px;
        padding: 20px;
    }

    /* Sub-pages */

    .hero-full-width {
        min-height: 65vh; 
        justify-content: center; /* Brings container back to center */
        padding-right: 0; 
        padding: 0 20px;
    }
    .hero-overlay {
        /* Reverts gradient to top-to-bottom for mobile readability */
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(26, 26, 26, 0.85)); 
    }
    .hero-full-width .hero-content {
        text-align: center; /* Re-centers text */
    }

    .hero-content .hero-title {
        font-size: 3.7rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
        margin: 20px;
    }
    .hero-buttons {
        flex-direction: column; 
        justify-content: center;
        gap: 15px;
    }

    .hero-content p {
        font-size: 0.98rem;
        margin: 20px;
        
    }

    /* Our Story Page */
    .split-content {
        text-align: center;
        align-self: start;
        margin: 10px 0 10px 0;
        padding: 0;
    }

    .split-content h2 {
        font-size: 2rem;
        margin: 20px;
    }

    .split-content p {
        font-size: 1rem;
        margin: 20px;
    }

    .image-box {
        margin: 0;
    }
    
    .hero-subpage .story-container {
        display: block;
        margin: 20px auto;
        width: fit-content;
    }

    .hero-subpage h1 {
        text-align: center;
        margin: 20px;
    }

     .split-content h2 {
        font-size: 2rem;
        text-align: center;
        margin: 0;
        padding: 0;
    }

     .split-content p {
        font-size: 1rem;
        color: var(--color-body-darker);
        text-align: center;
        margin-top: 0;
        padding: 0;
    
    }

    .hero-subpage p {
        margin: 10px 10px 20px 10px;
    }

    .partner-img {
        margin-bottom: 40px;
    }

    /* --- THE FOOTER ALIGNMENT FIX (520px) --- */
    .footer-top {
        align-items: center !important; /* Overrides the left-alignment from tablets */
        text-align: center;
    }
    
    .email-signup {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
    }

    .signup-form {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 350px !important; /* Prevents the boxes from getting comically wide */
        margin: 15px auto 0 auto !important; /* Centers the actual form inside the footer */
        gap: 10px !important; /* Adds perfect spacing between the input and the button */
    }

    .signup-form input {
        width: 100% !important;
        text-align: center !important; /* Centers the "email address" placeholder text */
        padding: 14px 12px !important; /* Makes the input box exactly as tall as the button */
    }

    .signup-form .btn-red {
        width: 100% !important;
        margin: 0 !important;
    }

    .social-icons {
        justify-content: center;
        width: 100%;
    }

    .footer-links { 
        grid-template-columns: 1fr !important; /* Forces a single, neat column */
        text-align: center; 
        gap: 30px;
    }

    .link-col {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centers the actual text links */
    }
    
    /* Adds safety padding so floating buttons don't block the bottom links */
    .main-footer { 
        padding-bottom: 100px !important; 
    }

    /* --- THE FOOTER IMAGE CENTERING FIX --- */
    .footer-img-placeholder {
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }

    /* --- THE 520px FOOTER SQUISH FIX --- */
    
    /* 1. Stack the image on top of the links */
    .footer-bottom {
        grid-template-columns: 1fr !important; 
        gap: 40px !important;
    }

    /* 2. Drop the links from 3 columns down to 1 centered column */
    .footer-links {
        grid-template-columns: 1fr !important; 
        text-align: center !important; 
        gap: 30px !important;
    }

    /* 3. Center the individual link groups */
    .link-col {
        align-items: center !important;
    }
    
    /* 4. Ensure the image perfectly centers above the stacked links */
    .footer-img-placeholder {
        margin: 0 auto !important;
    }

    .faq-links a {
        text-align: center;
    }

    .faq-links h3 {
        text-align: center;
    }


}

/* -----------------------------------------
   4. EXTRA SMALL MOBILE (Max 320px) - Older devices
   ----------------------------------------- */
@media (max-width: 320px) {
    /* Shrink massive headers even further */
    .section-title { font-size: 1.5rem !important; }
    .hero-title { font-size: 1.6rem !important; }
    .hero-subtitle, .hero-left p, .hero-content p { font-size: 0.85rem !important; }
    
    /* Stack the pill tabs so they don't overflow */
    .pill-tabs { flex-direction: column; background-color: transparent; padding: 0; gap: 10px; }
    .pill-btn { width: 100%; background-color: #1a1a1a; }
    
    /* Shrink the floating widgets so they don't dominate the tiny screen */
    .floating-widget-container { 
        bottom: 10px; 
        right: 10px; 
        transform: scale(0.85); /* Scales the buttons down by 15% */
        transform-origin: bottom right; 
    }

}


/* -----------------------------------------
   3. STANDARD MOBILE (Max 375px) - e.g., iPhone SE
   ----------------------------------------- */
@media (max-width: 375px) {
    .container { padding-left: 15px; padding-right: 15px; }
    
    /* Shrink section titles so they don't stack 1 word per line */
    .section-title { font-size: 1.8rem !important; padding: 0 10px; }
    
    .pill-tabs { display: flex; width: 100%; }
    .pill-btn { flex: 1; padding: 8px 5px; font-size: 0.8rem; }
    .lightbox-close { top: 15px; right: 15px; font-size: 35px; }

    /* THE HERO FIX: Kill the ugly hyphens and scale down */
    .hero-title {
        font-size: 2rem !important;
        hyphens: none !important; /* Stops "connec-tions" */
        word-wrap: normal !important;
    }
    
    .hero-subtitle,
    .hero-left p,
    .hero-content p {
        font-size: 0.95rem;
        padding: 0;
        margin-left: 0;
        margin-right: 0;
        width: 100%; 
    }

    .hero-content h1 {
        margin: 0 auto;
    }

    /* THE ALIGNMENT FIX: Aggressively force text and buttons to the center */
    .needs-text-content, 
    .loyalty-content,
    .hero-content h1 {
        align-items: center !important;
        text-align: center !important;
    }
    
    .needs-text-content h3, 
    .loyalty-content h3, 
    .right-heading {
        text-align: center !important;
        font-size: 1.6rem !important;
    }
    
    .needs-text-content p, 
    .loyalty-content p {
        text-align: center !important;
        padding: 0 10px;
    }
    
    /* Forces ALL standard buttons to perfectly center on tiny screens */
    .btn {
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
        width: fit-content !important;
    }

    /* THE FOOTER FIX: Stack to 1 column and center everything */
    .footer-links { 
        grid-template-columns: 1fr !important; 
        text-align: center; 
        gap: 30px;
        
    }


    .link-col { 
        display: flex; 
        flex-direction: column; 
        align-items: center;
        
    }

    .link-col a { 
        font-size: 0.5rem;
        
    }

    .email-signup { 
        align-items: center; 
        text-align: center; 
    }
    .social-icons { 
        justify-content: center; 
        width: 100%; 
        padding: 20px;
    }
    
    /* Creates "dead space" at the bottom so you can scroll past the floating buttons */
    .main-footer { 
        padding-bottom: 120px !important; 
    }

    .edge-box-4 {
        margin-bottom: 80px;
        padding: 0;
    }
}

/* Responsive adjustments for screens under 768px */
@media (max-width: 768px) {
    .main-header {
        position: relative;
        flex-direction: row; /* Keep logo and button side-by-side */
        justify-content: space-between;
    }

    .mobile-menu-btn {
        display: block; /* Show button on mobile */
    }

    .main-nav {
        display: none; /* Hide the links by default */
        position: absolute;
        top: 100%; /* Drop it right below the header */
        left: 0;
        width: 100%;
        background-color: var(--bg-light);
        flex-direction: column;
        text-align: center;
        padding: 20px 0;
        box-shadow: 0px 8px 20px rgba(0,0,0,0.1);
        z-index: 999;
    }

    /* Class added by JavaScript to show the menu */
    .main-nav.active {
        display: flex; 
    }

    /* Center the dropdown links inside the mobile menu */
    .dropdown {
        width: 100%;
    }
    
    .dropbtn {
        justify-content: center;
    }

    .dropdown-content {
        background-color: #f9f9f9;
        margin: 10px 20px 0;
        border-radius: 8px;
    }

    /* Animate the hamburger into an "X" when open */
    .mobile-menu-btn.toggle span:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }
    
    .mobile-menu-btn.toggle span:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-menu-btn.toggle span:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }
}

/* =========================================
   MOBILE MENU DROPDOWN FIX (Max 768px)
   *MUST STAY AT THE BOTTOM*
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. Stop the container from overflowing the screen */
    .dropdown {
        width: 100% !important;
    }

    /* 2. Fix the dropdown box width and margins */
    .dropdown-content,
    .dropdown-content.mega-menu-hover {
        position: static !important; /* Keeps it naturally in the flow of the menu */
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 0 0 !important; /* Kills the left margin that causes side-scrolling */
        padding: 10px 0 10px 15px !important; /* Uses safe inner padding for indentation instead */
        border: none !important;
        border-left: 2px solid var(--primary-red) !important;
        box-sizing: border-box !important;
        transform: none !important; /* Kills any leftover desktop centering math */
    }

    /* 3. Force any mega-menu grids into a single, neat vertical column */
    .mega-hover-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .mega-list-column {
        width: 100% !important;
    }

    /* 4. Shrink the links and allow long text to wrap to the next line safely */
    .dropdown-content a,
    .dropdown .dropdown-content.mega-menu-hover .mega-list a {
        padding: 8px 0 !important;
        font-size: 0.9rem !important;
        white-space: normal !important; /* Safety net: forces long links to wrap */
        display: block !important;
        width: 100% !important;
    }
    
    /* Shrink the category headers slightly */
    .mega-list-header {
        font-size: 1rem !important;
        margin-bottom: 5px !important;
    }
}

/* =========================================
   HERO CENTERING & GAP FIX (Max 768px)
   ========================================= */
@media (max-width: 768px) {
    
    /* --- 1. THE HERO TITLE CENTERING FIX --- */
    .hero-subpage h1,
    .hero-title {
        text-align: center !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }

    /* Safety net: ensures the glass box itself is dead center */
    .hero-subpage .hero-content,
    .hero-full-width .hero-content {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        width: 100% !important;
        padding: 20px;
    }

    /* --- 2. THE GAP FIX (Reduces Desktop Padding) --- */
    .content-section,
    .about-content {
        padding-top: 30px !important; /* Shrinks the massive 80px desktop gap */
        padding-bottom: 30px !important; 
    }
    
    /* Removes any lingering top margin from the row below the hero */
    .split-row {
        margin-top: 80px !important;
    }
}

/* =========================================
   BULLETPROOF 3-COLUMN CENTERING (Max 520px)
   ========================================= */
@media (max-width: 520px) {
    
    /* 1. Ensure the parent wrapper is actively pushing things to the middle */
    .footer-bottom {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
        width: 100% !important;
    }

    /* 2. Shrink the grid box and center it */
    .footer-links {
        display: grid !important;
        grid-template-columns: repeat(3, max-content) !important; /* max-content locks columns to the exact width of your longest word */
        gap: 25px !important;
        width: fit-content !important; /* THE MAGIC FIX: Shrinks the grid container so it doesn't span the whole screen */
        margin: 0 auto !important; /* Pushes that perfectly shrunken box into the dead center */
        padding: 0 !important;
    }

    /* 3. Keep the links left-aligned internally for that clean look */
    .link-col {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: auto !important;
    }
    
    .link-col h4 {
        font-size: 0.9rem !important;
        text-align: left !important;
        margin-left: 0 !important;
    }

    .link-col a {
        font-size: 0.8rem !important;
        text-align: left !important;
        margin-left: 0 !important;
    }
}

.site-logo {
        /* Locks the height so it fits beautifully in the navbar */
    height: 100px; 
}

/* =========================================
   ULTRA-WIDE DISPLAY BREAKPOINTS
   ========================================= */

/* 1. STANDARD WIDESCREEN (1440px and up) 
   Perfect for 15" and 16" MacBook Pros */
@media (min-width: 1440px) {
    :root {
        --container-max: 1300px; 
    }
    
    .hero-title {
        font-size: 6rem; 
    }
    
    /* Give the Bento grid a little more height */
    .edge-grid {
        grid-auto-rows: 350px; 
    }

    .split-row .estore-img {
    margin-top: -300px;
    }
}

/* 2. FULL HD DESKTOPS (1920px and up) 
   Standard 24" to 27" desktop monitors */
@media (min-width: 1920px) {
    :root {
        --container-max: 1600px; 
    }
    
    /* Make the hero sections taller so they don't look like skinny ribbons */
    .hero-full-width { min-height: 50vh; }
    .hero-subpage { min-height: 35vh; }
    
    /* Bump up the typography so it doesn't look tiny on a big screen */
    .hero-title { font-size: 7.5rem; }
    .hero-subtitle { font-size: 2.5rem; }
    
    /* Scale up the Bento grid rows to match the new width */
    .edge-grid {
        grid-auto-rows: 400px; 
    }
}


/* 8. 4K & Ultra-Wide Displays (2360px+) */
@media (min-width: 2360px) {
    :root { 
        --container-max: 1900px; 
    }
    .hero-full-width { 
        min-height: 55vh; 
    }
    .hero-title { 
        font-size: 8.5rem; 
    }
    .hero-subtitle {
        font-size: 1.8rem;
    }
    .edge-grid { 
        grid-auto-rows: 500px; 
        gap: 30px; 
    }
    body { 
        font-size: 1.2rem; /* Subtle bump to the base paragraph text so it remains readable */
    } 
    
}

/* =========================================
   THE MASTER DESKTOP ALIGNMENT FIX
   ========================================= */

/* 1. Fixes a global container typo so the body content perfectly matches the Hero */
.container {
    max-width: var(--container-max) !important;
}

/* 2. Forces the Logo and Menu to obey the exact same invisible grid as the Hero text */
@media (min-width: 2560px) {
    .main-header {
        padding-left: var(--container-edge-max) !important;
        padding-right: var(--container-edge-max) !important;
    }
}

/* =========================================
   BULLETPROOF DROPDOWN BRIDGE FIX
   ========================================= */
@media (min-width: 769px) {
    
    /* 1. Expand the hover area of the parent link downward */
    .dropdown {
        padding-bottom: 40px !important; 
        margin-bottom: -40px !important; 
    }

    /* 2. Anchor the bridge exactly to the top of the menu and grow UPWARD */
    .dropdown-content::before,
    .dropdown .dropdown-content.mega-menu-hover::before {
        content: "";
        position: absolute;
        bottom: 100% !important; /* Locks perfectly to the top edge of the box */
        left: 0;
        width: 100vw !important; /* Ensures the bridge spans the whole screen for mega menus */
        height: 100px !important; /* Massive 100px hit-box to guarantee connection */
        background: transparent !important; 
        z-index: 10;
        pointer-events: auto !important;
        
        /* 🔥 PRO-TIP: Uncomment the line below to turn the bridge RED so you can see it! */
        /* border: 2px solid red !important; background: rgba(255,0,0,0.2) !important; */
    }
}