/* ============================================================
   Franklin Funding — Visual DNA / Theme Variables
   assets/css/theme.css
   ============================================================ */

:root {
    --primary-orange: #FF5E00;
    --navy-blue: #1A2B3C;
    --text-dark: #333333;
    --light-gray: #F4F7F9;
    --disclaimer-bg: #FEF9E7;
    --white: #FFFFFF;
    --container-width: 1200px;
    --radius: 8px;
    --shadow: 0 4px 12px rgba(0,0,0,0.08);
    --transition: all 0.3s ease;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    margin: 0;
}

header {
    position: sticky;
    top: 0;
    background: var(--white);
    padding: 15px 0;
    box-shadow: var(--shadow);
    z-index: 1000;
    display: flex;
    justify-content: center;
}

.nav-container {
    width: var(--container-width);
    max-width: 95%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

nav a {
    text-decoration: none;
    color: var(--navy-blue);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    margin-left: 25px;
}

nav a:first-child {
    margin-left: 0;
}

.cta-button {
    background: var(--primary-orange);
    color: var(--white) !important;
    padding: 12px 24px;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 700;
    transition: var(--transition);
    white-space: nowrap;
}

.cta-button:hover {
    background: #e05200;
    transform: translateY(-2px);
}

.disclaimer-bar {
    background: var(--disclaimer-bg);
    border-bottom: 1px solid #f0e6c1;
    padding: 15px 0;
    display: flex;
    justify-content: center;
}

.disclaimer-content {
    width: var(--container-width);
    max-width: 95%;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    font-size: 13px;
    color: #555;
    padding: 0 20px;
}

.disclaimer-content strong {
    color: var(--navy-blue);
}

.disclaimer-content p {
    margin: 0;
    line-height: 1.6;
}

.warning-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    padding: 50px 0;
}

.card {
    background: var(--white);
    padding: 40px;
    border-radius: var(--radius);
    border: 1px solid #eee;
    text-align: left;
    transition: var(--transition);
}

.card:hover {
    box-shadow: var(--shadow);
    border-color: var(--primary-orange);
}

.card h3 {
    color: var(--navy-blue);
    margin: 20px 0 10px;
}

.learn-more {
    color: var(--primary-orange);
    text-decoration: none;
    font-weight: 700;
    display: inline-block;
    margin-top: 15px;
}

/* Scroll-shrink state (applied by scripts.js) */
header.scrolled {
    padding: 10px 0;
}

/* ── CTA Button System ──────────────────────────────────────── */
/* Primary (ROK / orange) */
.cta-btn-primary {
    display: inline-block;
    background: var(--primary-orange);
    color: #fff !important;
    padding: 14px 28px;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: var(--transition);
    letter-spacing: 0.02em;
    border: 2px solid var(--primary-orange);
    cursor: pointer;
}
.cta-btn-primary:hover {
    background: #e05200;
    border-color: #e05200;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,94,0,0.35);
}

/* Accounting (QuickBooks / green) */
.cta-btn-accounting {
    display: inline-block;
    background: #1A8D4C;
    color: #fff !important;
    padding: 14px 28px;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: var(--transition);
    letter-spacing: 0.02em;
    border: 2px solid #1A8D4C;
    cursor: pointer;
}
.cta-btn-accounting:hover {
    background: #166c3a;
    border-color: #166c3a;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26,141,76,0.3);
}

/* Outline variant */
.cta-btn-outline {
    display: inline-block;
    background: transparent;
    color: var(--primary-orange) !important;
    padding: 12px 26px;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: var(--transition);
    border: 2px solid var(--primary-orange);
}
.cta-btn-outline:hover {
    background: var(--primary-orange);
    color: #fff !important;
    transform: translateY(-2px);
}

/* Inline mid-article CTA block */
.inline-cta-block {
    background: linear-gradient(135deg, var(--navy-blue) 0%, #243B55 100%);
    color: #fff;
    padding: 32px 36px;
    border-radius: 12px;
    margin: 2.5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.inline-cta-block__text h3 { color: #fff; margin: 0 0 0.4rem; font-size: 1.2rem; }
.inline-cta-block__text p  { color: rgba(255,255,255,0.8); margin: 0; font-size: 0.95rem; }

/* ── Hero with SVG Mountain Background ──────────────────────── */
.hp-hero {
    background: linear-gradient(135deg, #1A2B3C 0%, #0d1b2a 60%, #1A2B3C 100%);
    position: relative;
    overflow: hidden;
    min-height: 540px;
}

.hp-hero::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 260px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 260' preserveAspectRatio='none'%3E%3Cpath fill='%23142235' fill-opacity='0.8' d='M0 260 L0 160 L80 120 L140 140 L200 80 L280 100 L360 40 L420 70 L500 20 L560 50 L620 30 L700 60 L760 10 L820 40 L880 20 L940 55 L1000 35 L1060 70 L1120 45 L1180 90 L1240 65 L1300 110 L1360 85 L1440 130 L1440 260 Z'/%3E%3Cpath fill='%230d1b2a' fill-opacity='0.6' d='M0 260 L0 190 L60 170 L120 185 L180 150 L260 165 L340 130 L400 145 L460 110 L540 125 L620 100 L680 115 L740 90 L800 105 L880 80 L940 100 L1020 75 L1080 95 L1140 70 L1200 90 L1280 110 L1360 95 L1440 120 L1440 260 Z'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: bottom;
    opacity: 0.9;
    z-index: 1;
}

.hp-hero .container { position: relative; z-index: 2; }

/* Glassmorphism content card */
.hp-hero__content {
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 2.5rem 2rem;
}

/* Stats card glassmorphism */
.hp-hero__visual {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
}

/* Stats grid (2×3) */
.hp-stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.hp-stat-item {
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 0.875rem 1rem;
    text-align: center;
}

.hp-stat-item__label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.65);
    margin-bottom: 0.3rem;
    line-height: 1.3;
}

.hp-stat-item__value {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: #FF5E00;
    line-height: 1;
}

/* ── Mega-Menu Nav ───────────────────────────────────────────── */
.nav-container nav {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-container nav .nav-item {
    position: relative;
    display: inline-block;
}

.nav-container nav .nav-item > a {
    display: block;
    padding: 8px 12px;
    margin-left: 4px;
    border-radius: 6px;
}

.nav-container nav .nav-item:hover > a {
    background: #f4f7f9;
    color: var(--primary-orange);
}

/* Dropdown panel */
.nav-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    padding: 8px 0;
    z-index: 1200;
    list-style: none;
    margin: 0;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
    display: block;
}

.nav-dropdown li a {
    display: block;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--navy-blue) !important;
    text-transform: none !important;
    text-decoration: none;
    margin-left: 0 !important;
    border-radius: 0;
    transition: background 0.15s, color 0.15s;
}

.nav-dropdown li a:hover {
    background: #FFF4EE;
    color: var(--primary-orange) !important;
}

.nav-dropdown hr {
    border: 0;
    border-top: 1px solid #f0f0f0;
    margin: 6px 12px;
}

/* ── Service Page Layout ─────────────────────────────────────── */
.svc-page-hero {
    background: linear-gradient(135deg, var(--navy-blue) 0%, #243B55 100%);
    color: #fff;
    padding: 60px 0 48px;
}
.svc-page-breadcrumb { font-size: 0.85rem; color: rgba(255,255,255,0.65); margin-bottom: 1rem; }
.svc-page-breadcrumb a { color: rgba(255,255,255,0.75); text-decoration: none; }
.svc-page-breadcrumb a:hover { color: #fff; }
.svc-page-badge {
    display: inline-block;
    background: rgba(255,94,0,0.2);
    color: #FF9966;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}
.svc-page-hero h1 { color: #fff; font-size: clamp(1.75rem, 4vw, 2.6rem); margin: 0 0 1rem; line-height: 1.2; }
.svc-page-hero p   { color: rgba(255,255,255,0.85); font-size: 1.1rem; max-width: 620px; margin: 0 0 1.75rem; }
.svc-page-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Stats strip */
.svc-stats-strip {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 20px 0;
}
.svc-stats-strip__inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}
.svc-stat { text-align: center; }
.svc-stat__value { display: block; font-size: 1.6rem; font-weight: 800; color: var(--primary-orange); }
.svc-stat__label { display: block; font-size: 0.8rem; color: #666; text-transform: uppercase; letter-spacing: 0.06em; }

/* Two-column layout */
.svc-content-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2.5rem;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 48px 20px;
}
@media (max-width: 900px) {
    .svc-content-grid { grid-template-columns: 1fr; }
}

/* Sidebar widgets */
.svc-sidebar__widget {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.svc-sidebar__widget h3 { font-size: 1rem; color: var(--navy-blue); margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--primary-orange); }
.svc-sidebar__widget table { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
.svc-sidebar__widget table td { padding: 6px 4px; border-bottom: 1px solid #f0f0f0; }
.svc-sidebar__widget table td:first-child { color: #666; }
.svc-sidebar__widget table td:last-child { font-weight: 600; color: var(--navy-blue); text-align: right; }
.svc-sidebar__widget ul { list-style: none; padding: 0; margin: 0; }
.svc-sidebar__widget ul li { padding: 5px 0; font-size: 0.875rem; border-bottom: 1px solid #f8f8f8; }
.svc-sidebar__widget ul li::before { content: '✓ '; color: var(--primary-orange); font-weight: 700; }

/* FAQ accordion for service/blog pages */
.faq-section { max-width: var(--container-width); margin: 0 auto; padding: 48px 20px; }
.faq-section h2 { color: var(--navy-blue); margin-bottom: 1.5rem; }
.faq-item { border: 1px solid #e8ecf0; border-radius: 8px; margin-bottom: 0.75rem; overflow: hidden; }
.faq-question {
    width: 100%;
    background: #fff;
    border: none;
    padding: 1.1rem 1.25rem;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: var(--navy-blue);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}
.faq-question:hover { background: #fafafa; }
.faq-question::after { content: '+'; font-size: 1.4rem; color: var(--primary-orange); font-weight: 400; flex-shrink: 0; }
.faq-item.active .faq-question::after { content: '−'; }
.faq-answer { display: none; padding: 0 1.25rem 1.25rem; font-size: 0.95rem; color: #555; line-height: 1.7; }
.faq-item.active .faq-answer { display: block; }

/* Blog article styles */
.blog-article-wrap {
    max-width: 800px;
    margin: 0 auto;
    padding: 48px 24px;
}
.blog-article-header { margin-bottom: 2rem; }
.blog-article-header h1 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); color: var(--navy-blue); margin-bottom: 0.75rem; line-height: 1.25; }
.blog-meta { font-size: 0.875rem; color: #888; display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.blog-article-wrap h2 { color: var(--navy-blue); font-size: 1.45rem; margin: 2rem 0 0.75rem; }
.blog-article-wrap h3 { color: var(--navy-blue); font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }
.blog-article-wrap p  { color: #444; line-height: 1.75; margin-bottom: 1.1rem; }
.blog-article-wrap ul, .blog-article-wrap ol { color: #444; padding-left: 1.5rem; margin-bottom: 1.1rem; line-height: 1.75; }
.blog-article-wrap table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9rem; }
.blog-article-wrap table th { background: var(--navy-blue); color: #fff; padding: 10px 12px; text-align: left; }
.blog-article-wrap table td { padding: 9px 12px; border-bottom: 1px solid #eee; }
.blog-article-wrap table tr:nth-child(even) td { background: #f9fafb; }

/* Authority link style (GEO injection) */
.authority-link-block {
    font-size: 0.9rem;
    border-left: 3px solid #3b82f6;
    padding: 0.75rem 1rem;
    background: #f0f6ff;
    border-radius: 0 6px 6px 0;
    margin: 1.5rem 0;
    color: #444;
}
.authority-link-block a { color: #3b82f6; font-weight: 600; }

/* Site footer (service pages) */
.svc-footer {
    background: var(--navy-blue);
    color: rgba(255,255,255,0.8);
    padding: 48px 0 24px;
    font-size: 0.9rem;
}
.svc-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}
@media (max-width: 768px) { .svc-footer__grid { grid-template-columns: 1fr 1fr; } }
.svc-footer h4 { color: #fff; margin: 0 0 1rem; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; }
.svc-footer ul { list-style: none; padding: 0; margin: 0; }
.svc-footer ul li { margin-bottom: 0.5rem; }
.svc-footer ul li a { color: rgba(255,255,255,0.7); text-decoration: none; }
.svc-footer ul li a:hover { color: #fff; }
.svc-footer__bottom { text-align: center; color: rgba(255,255,255,0.4); margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.8rem; }

/* ── Mobile responsive (breakpoint aligned with styles.css at 900px) ── */
@media (max-width: 899px) {
    header nav,
    #site-header nav {
        display: none !important;
    }
    .hp-hamburger {
        display: flex !important;
    }
    .nav-container {
        padding: 0 16px;
    }
    .disclaimer-content {
        padding: 0 16px;
        font-size: 12px;
    }
    .svc-page-hero { padding: 40px 0 32px; }
    .inline-cta-block { flex-direction: column; gap: 1rem; }
    .hp-hero__content { padding: 2rem 1.5rem; }
    .hp-hero__visual { margin-top: 1.5rem; }
}

/* ============================================================
   LAYOUT CONFLICT OVERRIDES
   These high-specificity rules fix conflicts between styles.css
   generic classes (.container, .hero) and our hp-* components.
   Must remain at the END of theme.css to win cascade.
   ============================================================ */

/* ── Header: force sticky white bar, never inherit body padding ── */
#site-header {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #fff !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.09) !important;
    z-index: 1100 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 70px !important;
    border-bottom: 1px solid #f0f2f4;
    transition: min-height 0.2s ease, box-shadow 0.2s ease;
}

#site-header .nav-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1200px !important;
    padding: 12px 24px !important;
    height: auto !important;
    flex-direction: row !important;
    gap: 0 !important;
}

/* Logo: constrain size, no weird stretching */
#site-header .logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

#site-header .logo img {
    height: 48px !important;
    width: auto !important;
    display: block;
}

/* Nav: inline-flex, never column */
#site-header nav {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#site-header nav a {
    white-space: nowrap;
    text-decoration: none;
    color: #1A2B3C;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 8px 12px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
    display: inline-block;
    margin-left: 0 !important;
}

#site-header nav a:hover {
    color: #FF5E00;
    background: #fff8f5;
}

/* CTA button in nav */
#site-header .cta-button {
    background: #FF5E00 !important;
    color: #fff !important;
    padding: 10px 22px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border: none !important;
    margin-left: 12px !important;
    transition: background 0.2s, transform 0.2s !important;
}

#site-header .cta-button:hover {
    background: #e05200 !important;
    transform: translateY(-1px) !important;
}

/* ── Hero: force dark background regardless of .container overrides ── */
section.hp-hero {
    background: linear-gradient(135deg, #1A2B3C 0%, #0d1b2a 60%, #1A2B3C 100%) !important;
    min-height: 580px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 60px 0 !important;
}

/* Reset the .container inside hero — override any flex/height from styles.css */
section.hp-hero > .container,
section.hp-hero .container {
    display: block !important;
    height: auto !important;
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Hero inner: two-column grid */
.hp-hero__inner {
    display: grid !important;
    grid-template-columns: 1fr 380px !important;
    gap: 3rem !important;
    align-items: center !important;
    width: 100% !important;
}

/* Hero text color fixes */
.hp-hero__eyebrow {
    color: rgba(255,255,255,0.75) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 1rem !important;
    display: block !important;
}

section.hp-hero h1,
.hp-hero__inner h1 {
    color: #fff !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    margin: 0 0 1.25rem !important;
}

.hp-accent {
    color: #FF5E00 !important;
}

.hp-hero__sub {
    color: rgba(255,255,255,0.82) !important;
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
    margin: 0 0 2rem !important;
}

.hp-hero__actions {
    display: flex !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

.hp-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    background: #FF5E00 !important;
    color: #fff !important;
    padding: 14px 28px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background 0.2s, transform 0.2s !important;
}

.hp-btn-primary:hover {
    background: #e05200 !important;
    transform: translateY(-2px) !important;
}

.hp-btn-outline-white {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    background: transparent !important;
    color: #fff !important;
    border: 2px solid rgba(255,255,255,0.5) !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: border-color 0.2s, background 0.2s !important;
}

.hp-btn-outline-white:hover {
    border-color: #fff !important;
    background: rgba(255,255,255,0.1) !important;
}

.hp-hero__compliance {
    color: rgba(255,255,255,0.45) !important;
    font-size: 0.75rem !important;
    margin: 1.25rem 0 0 !important;
    line-height: 1.5 !important;
}

.hp-hero__compliance a {
    color: rgba(255,255,255,0.65) !important;
    text-decoration: underline !important;
}

/* Hero visual (stats card) */
.hp-hero__visual {
    background: rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 16px !important;
    padding: 1.75rem 1.5rem !important;
}

.hp-hero__visual-title {
    color: rgba(255,255,255,0.7) !important;
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin: 0 0 1.25rem !important;
    font-weight: 600 !important;
}

/* ── Disclaimer bar: always amber, never overridden ── */
section.disclaimer-bar {
    background: #FEF9E7 !important;
    border-bottom: 1px solid #f0e6c1 !important;
    padding: 14px 0 !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

section.disclaimer-bar .disclaimer-content {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    max-width: 1200px !important;
    width: 100% !important;
    padding: 0 24px !important;
    font-size: 13px !important;
    color: #555 !important;
    line-height: 1.6 !important;
}

section.disclaimer-bar .warning-icon {
    flex-shrink: 0 !important;
    font-size: 18px !important;
    margin-top: 1px !important;
}

section.disclaimer-bar p {
    margin: 0 !important;
}

/* ── Mobile responsive overrides ────────────────────────────── */
@media (max-width: 900px) {
    .hp-hero__inner {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .hp-hero__visual {
        order: -1 !important;
    }
    section.hp-hero {
        min-height: auto !important;
        padding: 40px 0 !important;
    }
}

@media (max-width: 899px) {
    #site-header nav {
        display: none !important;
    }
    .hp-hamburger {
        display: flex !important;
    }
    #site-header .nav-container {
        padding: 10px 16px !important;
    }
}

/* ── Scroll-shrink class (applied via JS) ──────────────────── */
#site-header.header--scrolled {
    min-height: 56px !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.12) !important;
}
#site-header.header--scrolled .nav-container {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
#site-header.header--scrolled .logo img {
    height: 38px !important;
}