/* styles.css - ADBC Master Stylesheet */
:root {
    --primary-navy: #002855;
    --primary-blue: #0055A5;
    --primary-gold: #D4AF37;
    --bg-light: #F8F9FA;
    --text-dark: #333333;
    --text-light: #666666;
    --white: #FFFFFF;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
body { background-color: var(--bg-light); color: var(--text-dark); overflow-x: hidden; }

/* HEADER & MEGA MENUS */
header { background-color: var(--white); border-bottom: 1px solid #E0E0E0; position: sticky; top: 0; z-index: 1000; display: flex; justify-content: space-between; align-items: center; padding: 0 40px; height: 85px; }
.logo { font-size: 24px; font-weight: 900; color: var(--primary-navy); text-transform: uppercase; text-decoration: none; letter-spacing: 1px; }
.logo span { color: var(--primary-gold); }

.nav-links { display: flex; height: 100%; }
.dropdown { position: relative; display: flex; align-items: center; height: 100%; padding: 0 20px; cursor: pointer; }
.dropbtn { text-decoration: none; color: var(--text-dark); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; }

.mega-menu { display: none; position: absolute; top: 85px; left: 50%; transform: translateX(-50%); background-color: var(--white); width: 800px; box-shadow: 0px 15px 30px rgba(0,0,0,0.1); z-index: 100; border-top: 3px solid var(--primary-gold); padding: 30px; cursor: default; }
.dropdown:hover .mega-menu { display: flex; justify-content: space-between; }
.dropdown:hover .dropbtn { color: var(--primary-blue); }

.mega-column { flex: 1; padding: 0 20px; border-right: 1px solid #EEE; }
.mega-column:last-child { border-right: none; }
.mega-column h3 { font-size: 12px; color: var(--text-light); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 20px; border-bottom: 1px solid #EEE; padding-bottom: 10px; }
.mega-column a { color: var(--primary-navy); text-decoration: none; display: block; font-size: 14px; margin-bottom: 12px; transition: 0.2s; }
.mega-column a:hover { color: var(--primary-blue); font-weight: bold; }

/* HERO SECTION */
.hero { position: relative; height: 650px; background-image: url('https://images.unsplash.com/photo-1551698618-1dfe5d97d256?q=80&w=2880&auto=format&fit=crop'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 40, 85, 0.3); z-index: 1; }
.hero-text { position: relative; z-index: 2; text-align: center; color: var(--white); text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.hero-text h1 { font-size: 64px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 15px; }
.hero-text p { font-size: 22px; font-weight: 500; margin-bottom: 30px; max-width: 800px; margin-left: auto; margin-right: auto;}

/* BLUE BLURB / TESTIMONIAL */
.blue-blurb { background-color: var(--primary-blue); color: var(--white); padding: 60px 20px; text-align: center; margin-bottom: 60px; }
.blue-blurb h2 { font-size: 32px; font-weight: 300; margin-bottom: 20px; }
.blue-blurb p { font-size: 18px; max-width: 800px; margin: 0 auto; line-height: 1.6; font-style: italic; }
.blue-blurb .author { display: block; margin-top: 20px; font-weight: bold; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }

/* STANDARD PAGE CONTENT */
.page-container { max-width: 1000px; margin: 60px auto; padding: 40px; background: var(--white); box-shadow: 0 10px 30px rgba(0,0,0,0.05); border-top: 5px solid var(--primary-gold); }
.page-container h1 { font-size: 40px; color: var(--primary-navy); text-transform: uppercase; margin-bottom: 30px; border-bottom: 2px solid #EEE; padding-bottom: 10px; }
.page-container h2 { font-size: 24px; color: var(--primary-blue); margin-top: 40px; margin-bottom: 15px; }
.page-container p { font-size: 16px; color: var(--text-dark); line-height: 1.8; margin-bottom: 20px; }
.page-container ul { margin-left: 20px; margin-bottom: 20px; line-height: 1.8; }

/* FOOTER & HIDDEN T&C */
footer { background-color: var(--primary-navy); padding: 60px 40px 20px 40px; color: var(--white); margin-top: 60px; }
.footer-legal { text-align: center; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); margin-top: 40px; color: #888; font-size: 12px; }
.hidden-tc { color: #002148; text-decoration: none; cursor: pointer; }
.hidden-tc:hover { color: #001530; }


/* HOMEPAGE SPECIFIC CSS (Additions to your styles.css) */
.booking-widget { max-width: 1100px; margin: -80px auto 40px auto; background: var(--white); box-shadow: 0 15px 40px rgba(0,0,0,0.15); position: relative; z-index: 10; border-radius: 4px; overflow: hidden; }
        .widget-tabs { display: flex; background: var(--bg-light); border-bottom: 1px solid #DDD; }
        .tab { flex: 1; text-align: center; padding: 22px; font-size: 14px; font-weight: bold; text-transform: uppercase; color: var(--text-light); cursor: pointer; border-right: 1px solid #DDD; transition: 0.3s; }
        .tab:hover { background: #E9ECEF; }
        .tab.active { background: var(--white); color: var(--primary-navy); border-top: 4px solid var(--primary-gold); border-bottom: 1px solid var(--white); margin-bottom: -1px; }
        .widget-content { padding: 30px 40px; display: flex; gap: 20px; align-items: flex-end; }
        .input-group { flex: 1; display: flex; flex-direction: column; }
        .input-group label { font-size: 11px; font-weight: bold; text-transform: uppercase; margin-bottom: 8px; color: var(--primary-navy); }
        .input-group select, .input-group input { padding: 16px; font-size: 15px; border: 1px solid #CCC; background: #FFF; outline: none; border-radius: 2px; }
        .btn-primary { background-color: var(--primary-blue); color: var(--white); padding: 16px 30px; font-size: 14px; font-weight: bold; text-transform: uppercase; border: none; cursor: pointer; transition: 0.3s; border-radius: 2px; text-decoration: none; display: inline-block;}
        .btn-primary:hover { background-color: var(--primary-navy); }
        .terms-trap { width: 100%; padding: 15px 40px 30px 40px; background: var(--white); font-size: 13px; color: var(--primary-navy); display: flex; align-items: center; gap: 10px; border-top: 1px solid #EEE;}
        
        .section-container { max-width: 1400px; margin: 0 auto 80px auto; padding: 0 40px; }
        .section-header { text-align: center; margin-bottom: 40px; }
        .section-header h2 { font-size: 36px; color: var(--primary-navy); text-transform: uppercase; font-weight: 900; }
        .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
        .card { background: var(--white); box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden; transition: 0.3s; text-decoration: none; display: block; color: inherit;}
        .card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
        .card-img { height: 250px; background-size: cover; background-position: center; }
        .card-content { padding: 30px; }
        .card-content h3 { font-size: 20px; color: var(--primary-navy); margin-bottom: 10px; }



/* styles.css */
:root {
    --primary-navy: #002855;
    --primary-blue: #0055A5;
    --primary-gold: #D4AF37;
    --bg-light: #F8F9FA;
    --text-dark: #333333;
    --white: #FFFFFF;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
body { background-color: var(--bg-light); color: var(--text-dark); overflow-x: hidden; }

/* HEADER & MASSIVE MEGA MENU */
header { background-color: var(--white); border-bottom: 1px solid #E0E0E0; position: sticky; top: 0; z-index: 1000; display: flex; justify-content: space-between; align-items: center; padding: 0 40px; height: 85px; }
.logo-img { height: 50px; cursor: pointer; }

.nav-links { display: flex; height: 100%; }
.dropdown { position: relative; display: flex; align-items: center; height: 100%; padding: 0 20px; cursor: pointer; border-left: 1px solid transparent; border-right: 1px solid transparent; }
.dropbtn { text-decoration: none; color: var(--text-dark); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; }

.dropdown:hover { background-color: var(--bg-light); border-left: 1px solid #E0E0E0; border-right: 1px solid #E0E0E0; }
.dropdown:hover .dropbtn { color: var(--primary-blue); }

/* The Giant Mega Menu Container */
.mega-menu { display: none; position: absolute; top: 85px; left: 50%; transform: translateX(-50%); background-color: var(--white); width: 900px; box-shadow: 0px 15px 30px rgba(0,0,0,0.15); z-index: 100; border-top: 4px solid var(--primary-gold); padding: 40px; cursor: default; }
.dropdown:hover .mega-menu { display: flex; justify-content: space-between; gap: 30px;}

.mega-column { flex: 1; }
.mega-column h3 { font-size: 13px; color: var(--primary-navy); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 20px; border-bottom: 2px solid #EEE; padding-bottom: 10px; }
.mega-column a { color: #555; text-decoration: none; display: block; font-size: 14px; margin-bottom: 15px; transition: 0.2s; }
.mega-column a:hover { color: var(--primary-blue); font-weight: bold; transform: translateX(5px); }

/* UTILITY / CART */
.utility { display: flex; gap: 20px; align-items: center; }
.cart-btn { background: var(--primary-navy); color: white; padding: 12px 24px; cursor: pointer; border: none; font-weight: bold; text-transform: uppercase; transition: 0.3s; font-size: 13px; letter-spacing: 1px;}
.cart-btn:hover { background: var(--primary-gold); color: var(--primary-navy); }

/* CONTENT STYLING */
.page-container { max-width: 1100px; margin: 60px auto; padding: 60px; background: var(--white); box-shadow: 0 10px 30px rgba(0,0,0,0.05); border-top: 5px solid var(--primary-gold); }
.page-container h1 { font-size: 40px; color: var(--primary-navy); text-transform: uppercase; margin-bottom: 30px; border-bottom: 2px solid #EEE; padding-bottom: 10px; }
.page-container p { font-size: 16px; color: var(--text-dark); line-height: 1.8; margin-bottom: 20px; }

/* FOOTER */
footer { background-color: var(--primary-navy); padding: 40px; text-align: center; color: #888; font-size: 12px; margin-top: 60px; }
.hidden-tc { color: #002148; text-decoration: none; cursor: pointer; font-size: 10px;}
.hidden-tc:hover { color: #001530; }


/* Add these lines to the BOTTOM of your existing styles.css */

/* LOGO CONTAINER */
.logo-container { display: flex; align-items: center; gap: 15px; text-decoration: none; }
.logo-img { height: 55px; }
.logo-text { font-size: 24px; font-weight: 900; color: var(--primary-navy); text-transform: uppercase; letter-spacing: 1px; }
.logo-text span { color: var(--primary-gold); }

/* TESTIMONIALS */
.testimonial-section { background-color: var(--primary-navy); padding: 80px 40px; color: var(--white); text-align: center; }
.testimonial-grid { max-width: 1200px; margin: 40px auto 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.testimonial-card { background: rgba(255,255,255,0.05); padding: 30px; border-left: 4px solid var(--primary-gold); text-align: left; }
.stars { color: var(--primary-gold); font-size: 18px; margin-bottom: 15px; }
.testimonial-text { font-size: 14px; font-style: italic; line-height: 1.6; margin-bottom: 20px; color: #E0E0E0;}
.testimonial-author { font-weight: bold; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--white);}

/* CHECKOUT FORM (CART PAGE) */
.checkout-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
.cart-summary { background: #F9F9F9; padding: 30px; border: 1px solid #DDD; }
.cart-item-row { display: flex; justify-content: space-between; border-bottom: 1px solid #EEE; padding: 15px 0; }
.cart-item-details { font-size: 12px; color: #666; margin-top: 5px; }
.checkout-form { background: var(--white); padding: 30px; border-top: 5px solid var(--primary-navy); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.checkout-form h2 { color: var(--primary-navy); margin-bottom: 20px; text-transform: uppercase; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 11px; font-weight: bold; text-transform: uppercase; color: var(--primary-navy); margin-bottom: 8px; }
.form-group input { width: 100%; padding: 12px; border: 1px solid #CCC; font-size: 14px; }
.form-row { display: flex; gap: 20px; }


        .hero { position: relative; height: 650px; background-image: url('https://images.unsplash.com/photo-1551698618-1dfe5d97d256?q=80&w=2880&auto=format&fit=crop'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%);}
        .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 40, 85, 0.4); z-index: 1; }
        .hero-text { position: relative; z-index: 2; text-align: center; color: var(--white); text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
        .hero-text h1 { font-size: 64px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 15px; }
        .btn-hero { background-color: var(--primary-blue); color: var(--white); padding: 16px 36px; font-size: 14px; font-weight: bold; text-transform: uppercase; text-decoration: none; display: inline-block; margin-top: 20px;}
        
        .booking-widget { max-width: 1200px; margin: -80px auto 40px auto; background: var(--white); box-shadow: 0 15px 40px rgba(0,0,0,0.15); position: relative; z-index: 10; border-radius: 4px; overflow: hidden; }
        .widget-tabs { display: flex; background: #F8F9FA; border-bottom: 1px solid #DDD; }
        .tab { flex: 1; text-align: center; padding: 22px; font-size: 14px; font-weight: bold; text-transform: uppercase; color: #666; cursor: pointer; border-right: 1px solid #DDD; transition: 0.3s; }
        .tab:hover { background: #E9ECEF; }
        .tab.active { background: var(--white); color: var(--primary-navy); border-top: 4px solid var(--primary-gold); border-bottom: 1px solid var(--white); margin-bottom: -1px; }
        .widget-content { padding: 30px 40px; display: flex; gap: 20px; align-items: flex-end; }
        .input-group { flex: 1; display: flex; flex-direction: column; }
        .input-group label { font-size: 11px; font-weight: bold; text-transform: uppercase; margin-bottom: 8px; color: var(--primary-navy); }
        .input-group select, .input-group input { padding: 16px; font-size: 15px; border: 1px solid #CCC; background: #FFF; outline: none; border-radius: 2px; }
        .btn-primary { background-color: var(--primary-blue); color: var(--white); padding: 16px 30px; font-size: 14px; font-weight: bold; text-transform: uppercase; border: none; cursor: pointer; transition: 0.3s; border-radius: 2px; text-decoration: none; display: inline-block;}
        .btn-primary:hover { background-color: var(--primary-navy); }
        .terms-trap { width: 100%; padding: 15px 40px 30px 40px; background: var(--white); font-size: 13px; color: var(--primary-navy); display: flex; align-items: center; gap: 10px; border-top: 1px solid #EEE;}
        
        .section-container { max-width: 1400px; margin: 0 auto 80px auto; padding: 0 40px; }
        .section-header { text-align: center; margin-bottom: 40px; }
        .section-header h2 { font-size: 36px; color: var(--primary-navy); text-transform: uppercase; font-weight: 900; }
        .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
        .card { background: var(--white); box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden; transition: 0.3s; text-decoration: none; display: block; color: inherit;}
        .card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
        .card-img { height: 250px; background-size: cover; background-position: center; }
        .card-content { padding: 30px; }
        .card-content h3 { font-size: 20px; color: var(--primary-navy); margin-bottom: 10px; }

        .page-container { max-width: 1400px; padding: 40px; margin-top: 40px;}
        
        /* MAIN DIRECTORY VIEW */
        #main-lodging-view { animation: fadeIn 0.4s; }
        .hotel-directory-card { display: flex; background: var(--white); box-shadow: 0 10px 25px rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden; margin-bottom: 40px; border-left: 5px solid var(--primary-navy); }
        .hotel-directory-card.sub-prime { border-left-color: #888; }
        .hotel-directory-card.gold-tier { border-left-color: var(--primary-gold); }
        .dir-img { flex: 0 0 45%; background-size: cover; background-position: center; min-height: 350px;}
        .dir-info { flex: 1; padding: 50px; display: flex; flex-direction: column; justify-content: center;}
        .dir-info h2 { font-size: 32px; color: var(--primary-navy); margin-bottom: 15px; text-transform: uppercase; }
        .dir-info .location-tag { display: inline-block; background: #EEE; color: #555; padding: 5px 12px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; }
        .dir-info p { font-size: 15px; color: var(--text-light); line-height: 1.8; margin-bottom: 30px; }
        
        /* HOTEL DETAIL VIEW (MINI-PAGES) */
        .hotel-detail-view { display: none; animation: fadeIn 0.4s; }
        .back-btn { display: inline-block; margin-bottom: 30px; font-size: 14px; font-weight: bold; color: var(--primary-navy); text-transform: uppercase; text-decoration: none; cursor: pointer; transition: 0.3s;}
        .back-btn:hover { color: var(--primary-blue); }
        
        .detail-header { text-align: center; margin-bottom: 50px; }
        .detail-header h1 { font-size: 48px; color: var(--primary-navy); text-transform: uppercase; border: none; margin-bottom: 15px;}
        
        .room-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 40px; }
        .room-card { background: var(--white); box-shadow: 0 10px 25px rgba(0,0,0,0.08); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column;}
        .room-img { height: 300px; background-size: cover; background-position: center; }
        .room-info { padding: 30px; flex-grow: 1; display: flex; flex-direction: column;}
        .room-info h3 { font-size: 24px; color: var(--primary-navy); margin-bottom: 10px; }
        .room-info .price { font-size: 26px; color: var(--primary-gold); font-weight: bold; margin-bottom: 15px; }
        .room-info p { font-size: 14px; color: var(--text-light); line-height: 1.6; margin-bottom: 25px; flex-grow: 1;}
        
        /* BOOKING INPUTS */
        .config-row { display: flex; gap: 15px; margin-bottom: 20px; background: #F9F9F9; padding: 20px; border: 1px solid #EEE;}
        .config-group { flex: 1; display: flex; flex-direction: column; }
        .config-group label { font-size: 11px; font-weight: bold; text-transform: uppercase; color: var(--primary-navy); margin-bottom: 8px; }
        .config-group input { padding: 12px; border: 1px solid #CCC; width: 100%; font-size: 14px;}
        
        .btn-book { background: var(--primary-navy); color: var(--white); padding: 18px; font-weight: bold; text-transform: uppercase; cursor: pointer; border: none; font-size: 15px; transition: 0.3s; width: 100%; text-align: center; letter-spacing: 1px;}
        .btn-book:hover { background: var(--primary-blue); }

        .btn-view-rooms { background: var(--white); color: var(--primary-navy); border: 2px solid var(--primary-navy); padding: 15px 30px; font-weight: bold; text-transform: uppercase; cursor: pointer; font-size: 14px; transition: 0.3s; align-self: flex-start;}
        .btn-view-rooms:hover { background: var(--primary-navy); color: var(--white); }

        /* HOA SECTION */
        .hoa-card { border-top: 5px solid var(--primary-navy); background: #F4F6F9; padding: 50px; text-align: center; max-width: 900px; margin: 60px auto 0 auto; box-shadow: 0 10px 25px rgba(0,0,0,0.05);}
        
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }


        .sitemap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 40px; }
        .sitemap-section h3 { color: var(--primary-gold); border-bottom: 2px solid var(--primary-navy); padding-bottom: 10px; margin-bottom: 20px; font-size: 20px; text-transform: uppercase;}
        .sitemap-section ul { list-style: none; margin-left: 0; }
        .sitemap-section li { margin-bottom: 15px; }
        .sitemap-section a { color: var(--primary-navy); text-decoration: none; font-size: 16px; font-weight: bold; }
        .sitemap-section a:hover { color: var(--primary-blue); text-decoration: underline; }


        .pass-card { border: 1px solid #DDD; padding: 40px; margin-bottom: 40px; border-top: 5px solid var(--primary-blue); background: var(--white);}
        .pass-card h2 { color: var(--primary-navy); margin-bottom: 10px; font-size: 28px; text-transform: uppercase; }
        .price { font-size: 32px; color: var(--primary-gold); font-weight: bold; margin-bottom: 20px; }
        
        .config-row { display: flex; gap: 20px; margin-bottom: 20px; background: #F9F9F9; padding: 20px; border: 1px solid #EEE;}
        .config-group { flex: 1; display: flex; flex-direction: column; }
        .config-group label { font-size: 11px; font-weight: bold; text-transform: uppercase; color: var(--primary-navy); margin-bottom: 8px; }
        .config-group input, .config-group select { padding: 12px; border: 1px solid #CCC; }
        
        .btn-buy { background: var(--primary-navy); color: var(--white); padding: 15px 30px; font-weight: bold; text-transform: uppercase; cursor: pointer; border: none; font-size: 14px;}
        .btn-buy:hover { background: var(--primary-blue); }


/* SAFETY & HERITAGE CARDS */
        .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
        .info-card { background: var(--white); padding: 40px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); border-left: 5px solid var(--primary-blue); }
        .info-card h3 { font-size: 22px; color: var(--primary-navy); margin-bottom: 15px; text-transform: uppercase; }
        .info-card p { font-size: 15px; color: var(--text-light); line-height: 1.6; margin-bottom: 15px; }
        
        .warning-text { color: #8B0000; font-weight: bold; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 20px; display: block; border-top: 1px solid #EEE; padding-top: 15px;}

        .page-container { max-width: 1400px; padding: 40px; margin-top: 40px;}
        
        /* DASHBOARD */
        .dashboard-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-bottom: 40px; }
        .dash-card { background: var(--primary-navy); color: var(--white); padding: 30px; border-radius: 4px; text-align: center; border-top: 4px solid var(--primary-gold); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
        .dash-card h3 { font-size: 14px; color: var(--primary-gold); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; border-bottom: none; padding-bottom: 0;}
        .dash-data { font-size: 42px; font-weight: 900; margin-bottom: 5px; }
        .dash-sub { font-size: 12px; color: #A9B3C1; text-transform: uppercase; }

        /* REPORTER'S NOTES */
        .reporter-box { background: #E3F2FD; border-left: 5px solid var(--primary-blue); padding: 40px; margin-bottom: 60px; border-radius: 4px; }
        .reporter-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
        .reporter-header img { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--primary-navy); }
        .reporter-name { font-weight: bold; color: var(--primary-navy); text-transform: uppercase; font-size: 16px; }
        .reporter-note p { margin-bottom: 15px; color: #333; line-height: 1.8; font-size: 15px; }

        /* MAP */
        .map-container { position: relative; width: 100%; background: #FFF; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 4px solid var(--primary-navy); border-radius: 4px; overflow: hidden; height: 800px; margin-bottom: 60px;}
        .map-iframe { width: 100%; height: 100%; border: none; }

        /* DIRECTORY GRIDS */
        .directory-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px; margin-top: 40px;}
        .zone-card { background: var(--white); border: 1px solid #DDD; border-top: 4px solid var(--primary-blue); border-radius: 4px; padding: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.05);}
        .zone-card h3 { font-size: 18px; color: var(--primary-navy); text-transform: uppercase; border-bottom: 2px solid #EEE; padding-bottom: 10px; margin-bottom: 20px; display: flex; justify-content: space-between;}
        
        .list-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #F5F5F5; font-size: 13px; }
        .item-name { font-weight: bold; color: var(--text-dark); display: flex; align-items: center; gap: 10px;}
        .item-status { font-size: 10px; font-weight: bold; text-transform: uppercase; padding: 4px 8px; border-radius: 2px;}
        
        /* ICONS */
        .lift-img { height: 24px; vertical-align: middle; margin-right: 8px; }
        .icon-green { display: inline-block; width: 12px; height: 12px; background-color: #2E7D32; border-radius: 50%; }
        .icon-blue { display: inline-block; width: 12px; height: 12px; background-color: #1565C0; }
        .icon-black { display: inline-block; width: 12px; height: 12px; background-color: #212121; transform: rotate(45deg); }
        .icon-dblack { display: flex; gap: 2px; }
        .icon-dblack span { display: inline-block; width: 12px; height: 12px; background-color: #212121; transform: rotate(45deg); }

        /* STATUS BADGES */
        .status-open { background: #E8F5E9; color: #2E7D32; }
        .status-wait { background: #FFF3E0; color: #E65100; }
        .status-closed { background: #FFEBEE; color: #C62828; }
        .status-sov { background: #FFF8E1; color: #FF8F00; border: 1px solid var(--primary-gold);}
        .status-lodge { background: var(--primary-navy); color: var(--primary-gold); }

        /* WARNING/SAFETY SECTION */
        .warning-section { background: var(--white); padding: 50px; margin-top: 80px; border-top: 5px solid #8B0000; box-shadow: 0 10px 30px rgba(0,0,0,0.08); border-radius: 4px;}
        .warning-header { text-align: center; margin-bottom: 40px; }
        .warning-header h2 { font-size: 32px; color: #8B0000; text-transform: uppercase; font-weight: 900; }
        .warning-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
        .warning-card { background: #F9F9F9; padding: 30px; border-left: 4px solid var(--primary-navy); }
        .warning-card h4 { color: var(--primary-navy); text-transform: uppercase; font-size: 18px; margin-bottom: 15px;}
        .warning-card p { font-size: 14px; color: #444; line-height: 1.7; margin-bottom: 10px;}
        .admin-view { display: none; background: #0a0e17; color: #00ff41; padding: 40px; border-radius: 4px; border: 2px solid #00ff41; font-family: monospace; box-shadow: 0 0 50px rgba(0, 255, 65, 0.2); }
        .admin-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #00ff41; padding-bottom: 20px; margin-bottom: 30px; }
        .admin-header h1 { font-size: 32px; color: #00ff41; border: none; text-transform: uppercase; margin: 0; }
        
        .live-feed-box { background: #000; border: 1px solid #00ff41; padding: 20px; height: 200px; overflow-y: hidden; margin-bottom: 40px; }
        .feed-line { margin: 5px 0; font-size: 14px; opacity: 0; animation: typeIn 0.2s forwards; }
        
        .target-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
        .target-card { background: #111; border: 1px solid #333; position: relative; overflow: hidden; }
        .target-img { height: 150px; background-size: cover; background-position: center; filter: grayscale(100%) contrast(120%); opacity: 0.5; }
        .target-info { padding: 15px; }
        .target-info h3 { color: #fff; margin-bottom: 5px; font-size: 16px; text-transform: uppercase; }
        .target-info p { color: #888; font-size: 12px; margin: 0; }
        .embargo-stamp { position: absolute; top: 40px; left: -20px; background: rgba(200,0,0,0.9); color: white; padding: 10px 40px; font-weight: bold; transform: rotate(-15deg); font-size: 18px; letter-spacing: 2px; text-transform: uppercase; border: 2px solid white; box-shadow: 0 5px 15px rgba(0,0,0,0.5); z-index: 10;}

        @keyframes typeIn { to { opacity: 1; } }
        
        .lock-icon { cursor: pointer; opacity: 0.2; transition: 0.3s; padding: 0 10px; }
        .lock-icon:hover { opacity: 1; }
        
        .embargo-banner { background: #fdf2f2; border-left: 5px solid #8B0000; padding: 20px; margin-top: 40px; font-size: 14px; color: #8B0000; font-weight: bold; text-transform: uppercase; text-align: center; line-height: 1.6;}
                .page-container { max-width: 1400px; padding: 0 40px; margin-top: 60px; }
        
        /* HERO SECTION */
        .app-hero { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; margin-bottom: 100px; }
        .hero-text h1 { font-size: clamp(40px, 6vw, 80px); font-weight: 900; color: var(--primary-navy); text-transform: uppercase; line-height: 0.9; margin-bottom: 20px; border: none;}
        .hero-text p { font-size: 20px; color: #444; line-height: 1.6; margin-bottom: 40px; max-width: 700px;}
        .hero-phone { width: 100%; max-width: 500px; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.15)); }

        /* COPYRIGHT-SAFE BUTTONS */
        .btn-container { display: flex; gap: 20px; margin-bottom: 40px; }
        .adbc-app-btn { 
            background: var(--primary-navy); 
            color: white; 
            padding: 15px 30px; 
            border-radius: 4px; 
            text-decoration: none; 
            font-weight: bold; 
            text-transform: uppercase; 
            font-size: 13px; 
            letter-spacing: 1px;
            border: 1px solid var(--primary-gold);
            transition: 0.3s;
            text-align: center;
        }
        .adbc-app-btn:hover { background: var(--primary-blue); transform: translateY(-3px); }

        /* THE BLUE SKEWED FEATURE AREA */
        .blue-matrix-section { 
            background: var(--primary-navy); 
            padding: 120px 60px; 
            margin: 100px -40px; 
            clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
            color: white;
        }
        .matrix-grid { 
        max-width: 1200px; 
        margin: 0 auto; 
        display: grid; 
        /* Lowered from 280px to 150px to allow 6 columns */
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
        gap: 20px; /* Reduced gap slightly for more breathing room */
        }
        
        .matrix-card { 
    background: rgba(255,255,255,0.05); 
    border: 1px solid rgba(255,255,255,0.1); 
    padding: 15px; /* Reduced from 30px so content doesn't look Sub-Prime */
    border-radius: 4px; 
    transition: 0.3s; 
}
        .matrix-card:hover { background: rgba(255,255,255,0.1); border-color: var(--primary-gold); }
        .matrix-card img { width: 100%; height: 200px; object-fit: cover; border-radius: 2px; margin-bottom: 20px; border-bottom: 2px solid var(--primary-gold); }
        .matrix-card h3 { color: var(--primary-gold); text-transform: uppercase; margin-bottom: 15px; font-size: 18px; border: none;}
        .matrix-card p { font-size: 14px; color: #CCC; line-height: 1.6; }

        /* CONTENT BLOCKS */
        .info-section { max-width: 1000px; margin: 0 auto 100px auto; text-align: center; }
        .info-section h2 { font-size: 36px; text-transform: uppercase; color: var(--primary-navy); margin-bottom: 20px; border: none;}
        .info-section p { font-size: 16px; color: #666; line-height: 1.8; margin-bottom: 30px;}

        .warning-strip { background: #fdf2f2; border-left: 5px solid #8B0000; padding: 25px; color: #8B0000; font-weight: bold; font-size: 14px; margin-bottom: 60px; text-align: left;}

        /* FAQ ACCORDION */
        .faq-section { max-width: 900px; margin: 0 auto 100px auto; }
        .faq-item { border-bottom: 1px solid #EEE; padding: 25px 0; }
        .faq-q { font-weight: 900; text-transform: uppercase; color: var(--primary-navy); cursor: pointer; display: flex; justify-content: space-between; }
        .faq-a { display: none; padding-top: 15px; color: #555; line-height: 1.6; }

        .app-disclaimer { font-size: 11px; color: #777; margin-top: 40px; line-height: 1.6; border-top: 1px solid #EEE; padding-top: 20px;}
        .hero-bce { 
            width: 100%; 
            background-color: white; 
            display: flex; 
            flex-direction: column; 
            text-align: center; 
            padding: 80px 20px;
        }
        .hero-subtitle { font-size: clamp(15px, 2vw, 30px); letter-spacing: 0.1em; text-transform: uppercase; color: #666; margin-bottom: 10px;}
        .hero-title { font-size: clamp(40px, 8vw, 120px); color: var(--epic-orange); font-weight: 900; line-height: 0.9; margin-bottom: 20px; border: none;}
        .hero-desc { font-size: clamp(20px, 3vw, 40px); font-weight: 600; color: var(--adbc-navy); margin-bottom: 30px;}
        
        .app-store-grid { display: flex; justify-content: center; gap: 15px; margin-bottom: 40px; }
        .app-store-grid img { height: 48px; }
        .hero-image-container { width: 100%; overflow: hidden; background: #f4f4f4; margin-bottom: 60px;}
        .hero-image-container img { width: 100%; height: auto; display: block; }
        .feature-block { max-width: 1200px; margin: 0 auto 80px auto; padding: 0 40px; text-align: center; }
        .feature-block .sub { color: var(--adbc-gold); font-weight: bold; letter-spacing: 2px; margin-bottom: 10px; font-size: 14px;}
        .feature-block h2 { font-size: 42px; color: var(--adbc-navy); margin-bottom: 20px; text-transform: uppercase; border: none;}
        .feature-block p { font-size: 18px; color: #555; line-height: 1.6; max-width: 800px; margin: 0 auto; }
               .page-container { max-width: 1400px; padding: 40px; margin-top: 40px;}
        
        /* MAIN INTERCEPT VIEW */
        #main-intercept-view { animation: fadeIn 0.4s; }
        
        /* THE BLUE INTRO BOX */
        .intercept-intro { display: grid; grid-template-columns: 1fr 1fr; background: var(--primary-navy); color: var(--white); border-radius: 4px; overflow: hidden; margin-bottom: 60px; box-shadow: 0 15px 30px rgba(0,0,0,0.15); border-top: 5px solid var(--primary-gold);}
        .intro-text { padding: 60px; display: flex; flex-direction: column; justify-content: center; }
        .intro-text h1 { font-size: 48px; color: var(--white); text-transform: uppercase; font-weight: 900; border: none; margin-bottom: 20px;}
        .intro-text p { font-size: 16px; color: #CCC; line-height: 1.8; }
        .intro-img { background-image: url('https://images.unsplash.com/photo-1554118811-1e0d58224f24?q=80&w=600&auto=format&fit=crop'); background-size: cover; background-position: center; }

        /* BUSINESS GRIDS */
        .store-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-bottom: 60px;}
        .store-card { background: var(--white); box-shadow: 0 10px 25px rgba(0,0,0,0.08); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; border-top: 4px solid var(--primary-navy);}
        .store-img { height: 200px; background-size: cover; background-position: center; }
        .store-info { padding: 25px; flex-grow: 1; display: flex; flex-direction: column;}
        .store-info h2 { font-size: 18px; color: var(--primary-navy); margin-bottom: 10px; text-transform: uppercase;}
        .store-info p { font-size: 13px; color: var(--text-light); line-height: 1.6; margin-bottom: 20px; flex-grow: 1;}
        .btn-learn { background: var(--primary-navy); color: var(--white); padding: 12px; font-weight: bold; text-transform: uppercase; cursor: pointer; border: none; font-size: 12px; text-align: center; text-decoration: none;}
        .btn-learn:hover { background: var(--primary-gold); color: var(--primary-navy);}

        /* GREY EXTENSION AREA */
        .extension-section { background: #F4F6F9; padding: 40px; border-radius: 4px; margin-top: 40px; }
        .extension-section h2 { text-align: center; text-transform: uppercase; margin-bottom: 30px; color: var(--primary-navy); }

        /* DETAIL VIEW (SUB-PAGES) */
        .intercept-detail-view { display: none; animation: fadeIn 0.4s; }
        .back-btn { display: inline-block; margin-bottom: 30px; font-size: 14px; font-weight: bold; color: var(--primary-navy); text-transform: uppercase; cursor: pointer; text-decoration: none;}
        
        .detail-content { background: var(--white); padding: 50px; border-radius: 4px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); border-top: 5px solid var(--primary-blue); }
        
        /* NEW SUB-PAGE HERO (PHOTO & DESC CARRYOVER) */
        .detail-hero { display: flex; gap: 30px; margin-bottom: 40px; align-items: center; border-bottom: 1px solid #EEE; padding-bottom: 30px; }
        .detail-hero-img-container { width: 300px; height: 220px; border-radius: 4px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); flex-shrink: 0; }
        .detail-hero-text { flex: 1; }
        .detail-hero-text h1 { font-size: 36px; text-transform: uppercase; color: var(--primary-navy); border: none; margin: 0; margin-bottom: 15px; }
        .detail-hero-text p { font-size: 14px; color: #555; line-height: 1.6; margin: 0; }

        .warning-banner { background: #fdf2f2; border-left: 5px solid #8B0000; padding: 15px; margin-bottom: 20px; font-size: 12px; color: #8B0000; font-weight: bold; text-transform: uppercase;}

        /* MENU/PRODUCT LISTS */
        .item-list { margin-top: 30px; }
        .list-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #F5F5F5; }
        .item-desc { font-size: 13px; color: #666; display: block; margin-top: 4px; }
        .item-price { font-weight: bold; color: var(--primary-gold); font-size: 18px; }

        .btn-add { background: var(--primary-navy); color: var(--white); border: none; padding: 10px 20px; font-weight: bold; text-transform: uppercase; cursor: pointer; }
        .btn-add:hover { background: var(--primary-gold); color: var(--primary-navy); }
        .detail-content p { font-family: inherit; font-size: 15px; color: var(--text-light); line-height: 1.8; margin-bottom: 20px; }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
                .page-container { max-width: 1400px; padding: 40px; margin-top: 40px;}
        
        .lesson-header { text-align: center; margin-bottom: 60px; }
        .lesson-header h1 { font-size: 48px; color: var(--primary-navy); text-transform: uppercase; font-weight: 900; border: none; margin-bottom: 15px;}
        .lesson-header p { font-size: 16px; color: var(--text-light); max-width: 800px; margin: 0 auto; line-height: 1.6;}

        .lesson-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 40px; margin-bottom: 60px;}
        
        .lesson-card { background: var(--white); box-shadow: 0 10px 25px rgba(0,0,0,0.08); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; border-top: 5px solid var(--primary-navy);}
        .lesson-card.gold-tier { border-top-color: var(--primary-gold); }
        .lesson-card.sub-prime { border-top-color: #888; }
        
        .lesson-img { height: 300px; background-size: cover; background-position: center; }
        .lesson-info { padding: 30px; flex-grow: 1; display: flex; flex-direction: column;}
        .lesson-info h2 { font-size: 24px; color: var(--primary-navy); margin-bottom: 10px; text-transform: uppercase;}
        .lesson-info .price { font-size: 26px; color: var(--primary-gold); font-weight: bold; margin-bottom: 20px; }
        .lesson-info p { font-size: 14px; color: var(--text-light); line-height: 1.7; margin-bottom: 25px; flex-grow: 1;}
        
        .config-row { display: flex; gap: 10px; margin-bottom: 20px; background: #F9F9F9; padding: 15px; border: 1px solid #EEE;}
        .config-group { flex: 1; display: flex; flex-direction: column; }
        .config-group label { font-size: 10px; font-weight: bold; text-transform: uppercase; color: var(--primary-navy); margin-bottom: 8px; }
        .config-group input, .config-group select { padding: 10px; border: 1px solid #CCC; width: 100%; font-size: 13px;}
        
        .btn-book { background: var(--primary-navy); color: var(--white); padding: 16px; font-weight: bold; text-transform: uppercase; cursor: pointer; border: none; font-size: 14px; transition: 0.3s; width: 100%; text-align: center; letter-spacing: 1px;}
        .btn-book:hover { background: var(--primary-blue); }

        .warning-banner { background: #fdf2f2; border-left: 5px solid #8B0000; padding: 15px; margin-bottom: 20px; font-size: 12px; color: #8B0000; font-weight: bold; text-transform: uppercase;}
                .page-container { max-width: 1400px; padding: 40px; margin-top: 40px;}
        
        .rental-header { text-align: center; margin-bottom: 60px; }
        .rental-header h1 { font-size: 48px; color: var(--primary-navy); text-transform: uppercase; font-weight: 900; border: none; margin-bottom: 15px;}
        .rental-header p { font-size: 16px; color: var(--text-light); max-width: 800px; margin: 0 auto; line-height: 1.6;}

        .rental-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 40px; margin-bottom: 60px;}
        
        .rental-card { background: var(--white); box-shadow: 0 10px 25px rgba(0,0,0,0.08); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; border-top: 5px solid var(--primary-navy);}
        .rental-card.gold-tier { border-top-color: var(--primary-gold); }
        .rental-card.sub-prime { border-top-color: #888; }
        
        .rental-img { height: 300px; background-size: cover; background-position: center; }
        .rental-info { padding: 30px; flex-grow: 1; display: flex; flex-direction: column;}
        .rental-info h2 { font-size: 24px; color: var(--primary-navy); margin-bottom: 10px; text-transform: uppercase;}
        .rental-info .price { font-size: 26px; color: var(--primary-gold); font-weight: bold; margin-bottom: 20px; }
        .rental-info p { font-size: 14px; color: var(--text-light); line-height: 1.7; margin-bottom: 25px; flex-grow: 1;}
        
        .config-row { display: flex; gap: 10px; margin-bottom: 20px; background: #F9F9F9; padding: 15px; border: 1px solid #EEE;}
        .config-group { flex: 1; display: flex; flex-direction: column; }
        .config-group label { font-size: 10px; font-weight: bold; text-transform: uppercase; color: var(--primary-navy); margin-bottom: 8px; }
        .config-group input, .config-group select { padding: 10px; border: 1px solid #CCC; width: 100%; font-size: 13px;}
        
        .btn-book { background: var(--primary-navy); color: var(--white); padding: 16px; font-weight: bold; text-transform: uppercase; cursor: pointer; border: none; font-size: 14px; transition: 0.3s; width: 100%; text-align: center; letter-spacing: 1px;}
        .btn-book:hover { background: var(--primary-blue); }

        .warning-banner { background: #fdf2f2; border-left: 5px solid #8B0000; padding: 15px; margin-bottom: 20px; font-size: 12px; color: #8B0000; font-weight: bold; text-transform: uppercase;}
        .heritage-banner { background: var(--primary-navy); color: var(--white); text-align: center; padding: 30px; border-radius: 4px; margin-bottom: 60px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); border-top: 4px solid var(--primary-gold);}