/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Apr 02 2026 | 22:21:51 */
/* ==============================================
   LUXURY WINE EXPERIENCE — DESIGN SYSTEM
   Pass 1: style.css (4-Layer Architecture)
   PREFIX: lux | Theme: Neve | Market: Canada/EN
   ============================================== */

/* ==============================================
   LAYER 0: CSS CUSTOM PROPERTIES
   ============================================== */

:root {
    /* Backgrounds */
    --lux-bg:              #FFFFFF;
    --lux-bg-alt:          #F7F9FC;
    --lux-surface:         #FFFFFF;

    /* Ink */
    --lux-ink:             #0B1B2B;
    --lux-ink-light:       #4B6278;
    --lux-ink-muted:       #8A9BB0;

    /* Primary accent — steel indigo */
    --lux-accent:          #2B4C7E;
    --lux-accent-hover:    #5277B8;
    --lux-accent-rgb:      43, 76, 126;

    /* Secondary colors */
    --lux-olive:           #5E7351;
    --lux-olive-light:     #8EA082;
    --lux-copper:          #B5774E;
    --lux-copper-light:    #E1B497;
    --lux-amber:           #F2AE2E;
    --lux-amber-light:     #FFE1A6;

    /* Borders */
    --lux-border:          #D0D9E4;
    --lux-border-light:    #E8EDF3;

    /* Tokens */
    --lux-radius:          10px;
    --lux-container-max:   1200px;
    --lux-font-head:       'Literata', 'Georgia', 'Times New Roman', serif;
    --lux-font-body:       'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --lux-shadow:          0 2px 12px rgba(11,27,43,0.07);
    --lux-shadow-hover:    0 4px 20px rgba(11,27,43,0.12);
    --lux-transition:      0.2s ease;
}


/* ==============================================
   LAYER 1: STRUCTURAL RESET
   Only container breakout + background strip.
   Content styling is in Layer 2 via lux- classes.
   ============================================== */

/* Box-sizing for sectioner containers */
.lux-container *,
.lux-container *::before,
.lux-container *::after {
    box-sizing: border-box;
}

/* Remove Neve theme width constraints */
body .site-content,
body .container,
body .nv-content-wrap,
body .nv-single-page-wrap,
body #primary,
body #content,
body .entry-content,
body .site-main,
body .neve-main,
body article {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

/* Neve container override */
body .single-page-container,
body .container.small {
    max-width: 100% !important;
}

.wp-block-table {
    overflow: visible !important;
    margin: 0;
}

html {
    overflow-x: clip;
}

body, .site,
.neve-main,
.nv-content-wrap,
.nv-single-page-wrap,
#primary, #content {
    background: transparent !important;
    background-color: transparent !important;
}

/* Neve page title spacing reset */
.nv-page-title-wrap {
    padding: 0 !important;
    margin: 0 !important;
}


/* ==============================================
   LAYER 2: CONTENT DESIGN
   Selector: .lux-container .lux-{tag} (0,2,0)
   ============================================== */

/* --- Headings --- */
/* DNA: ticker-strip-label, newsroom-rule-line */

.lux-container .lux-h1 {
    font-family: var(--lux-font-head);
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--lux-ink);
    margin: 0 0 1.5rem 0;
}

.lux-container .lux-h2 {
    font-family: var(--lux-font-head);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--lux-ink);
    margin: 0 0 1.25rem 0;
    padding-bottom: 0.75rem;
    position: relative;
}

/* DNA: ticker-strip-label — editorial role tag on h2 */
.lux-container .lux-h2::before {
    content: 'SECTION';
    display: inline-block;
    font-family: var(--lux-font-body);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lux-accent);
    background: rgba(var(--lux-accent-rgb), 0.07);
    border-left: 3px solid var(--lux-accent);
    padding: 2px 10px 2px 8px;
    margin-bottom: 10px;
    line-height: 1.6;
    vertical-align: top;
    position: absolute;
    top: -22px;
    left: 0;
}

/* DNA: newsroom-rule-line — bottom rule after h2 */
.lux-container .lux-h2::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--lux-border);
}

.lux-container .lux-h3 {
    font-family: var(--lux-font-head);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--lux-ink);
    margin: 2.5rem 0 0.75rem 0;
    padding-bottom: 0.5rem;
    position: relative;
}

/* DNA: ticker-bottom-bar — accent underline on h3 */
.lux-container .lux-h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 3px;
    background: var(--lux-copper);
    border-radius: 2px;
}

.lux-container .lux-h4 {
    font-family: var(--lux-font-head);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--lux-ink);
    margin: 2rem 0 0.5rem 0;
}

.lux-container .lux-h5 {
    font-family: var(--lux-font-head);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--lux-ink-light);
    margin: 1.5rem 0 0.5rem 0;
}

.lux-container .lux-h6 {
    font-family: var(--lux-font-head);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--lux-ink-light);
    margin: 1.25rem 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* --- Paragraphs --- */
/* DNA: (base element — indented body text layout variation) */

.lux-container .lux-p {
    font-family: var(--lux-font-body);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.75;
    color: var(--lux-ink);
    margin: 0 0 1.25rem 0;
    padding-left: 24px;
}

/* Lead paragraph — first p after h2 */
/* .lux-container .lux-h2 + .lux-p {
    font-size: 1.125rem;
    color: var(--lux-ink-light);
    line-height: 1.7;
    padding-left: 24px;
    border-left: 3px solid rgba(var(--lux-accent-rgb), 0.15);
} */


/* --- Inline Links --- */
/* DNA: ticker-bottom-bar */

.lux-container .lux-a {
    color: var(--lux-accent);
    text-decoration: none;
    position: relative;
    font-weight: 500;
    transition: color var(--lux-transition);
}

.lux-container .lux-a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--lux-copper);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--lux-transition);
}

.lux-container .lux-a:hover {
    color: var(--lux-accent-hover);
}

.lux-container .lux-a:hover::after {
    transform: scaleX(1);
}


/* --- Unordered Lists --- */
/* DNA: paper-sheet-panel, signal-dot-marker, newsroom-rule-line */

.lux-container .lux-ul {
    list-style: none;
    padding: 24px 28px 24px 52px;
    margin: 0 0 1.5rem 0;
    background: var(--lux-surface);
    border: 1px solid var(--lux-border-light);
    border-radius: var(--lux-radius);
    box-shadow: var(--lux-shadow);
    position: relative;
}

/* DNA: ticker-strip-label on list container */
.lux-container .lux-ul::before {
    content: 'OVERVIEW';
    display: inline-block;
    font-family: var(--lux-font-body);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lux-olive);
    background: rgba(94, 115, 81, 0.08);
    border-left: 3px solid var(--lux-olive);
    padding: 2px 10px 2px 8px;
    position: absolute;
    top: -11px;
    left: 20px;
    line-height: 1.6;
}

.lux-container .lux-li {
    font-family: var(--lux-font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--lux-ink);
    padding: 14px 0 14px 0;
    position: relative;
    border-bottom: 1px solid var(--lux-border-light);
    margin-left: 0;
    transition: background var(--lux-transition);
}

.lux-container .lux-li:last-child {
    border-bottom: none;
}

/* DNA: signal-dot-marker — hanging copper dot */
.lux-container .lux-li::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 22px;
    width: 7px;
    height: 7px;
    background: var(--lux-copper);
    border-radius: 50%;
}

.lux-container .lux-li:hover {
    background: rgba(var(--lux-accent-rgb), 0.02);
}


/* --- Ordered Lists --- */
/* DNA: paper-sheet-panel, signal-dot-marker (numbered variant) */

.lux-container .lux-ol {
    list-style: none;
    counter-reset: lux-step;
    padding: 24px 28px 24px 52px;
    margin: 0 0 1.5rem 0;
    background: var(--lux-surface);
    border: 1px solid var(--lux-border-light);
    border-radius: var(--lux-radius);
    box-shadow: var(--lux-shadow);
    position: relative;
}

.lux-container .lux-ol::before {
    content: 'STEPS';
    display: inline-block;
    font-family: var(--lux-font-body);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lux-accent);
    background: rgba(var(--lux-accent-rgb), 0.07);
    border-left: 3px solid var(--lux-accent);
    padding: 2px 10px 2px 8px;
    position: absolute;
    top: -11px;
    left: 20px;
    line-height: 1.6;
}

.lux-container .lux-ol .lux-li {
    counter-increment: lux-step;
}

.lux-container .lux-ol .lux-li::before {
    content: counter(lux-step);
    position: absolute;
    left: -32px;
    top: 14px;
    width: 24px;
    height: 24px;
    background: var(--lux-accent);
    color: #FFFFFF;
    border-radius: 50%;
    font-family: var(--lux-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}


/* --- Blockquotes --- */
/* DNA: paper-sheet-panel, ticker-strip-label */

.lux-container .lux-blockquote {
    background: var(--lux-bg-alt);
    border: 1px solid var(--lux-border-light);
    border-left: 4px solid var(--lux-copper);
    border-radius: var(--lux-radius);
    padding: 32px 32px 28px 32px;
    margin: 2rem 0 2rem -12px;
    position: relative;
    box-shadow: var(--lux-shadow);
    font-family: var(--lux-font-head);
    font-size: 1.0625rem;
    font-style: normal;
    line-height: 1.7;
    color: var(--lux-ink);
}

/* DNA: ticker-strip-label — "NOTE" tag */
.lux-container .lux-blockquote::before {
    content: '\e745';
    font-family: 'Material Symbols Outlined';
    font-size: 1.5rem;
    color: var(--lux-copper);
    position: absolute;
    top: -16px;
    right: 24px;
    width: 32px;
    height: 32px;
    background: var(--lux-surface);
    border: 1px solid var(--lux-border-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* DNA: ticker-strip-label — "INSIGHT" tag */
.lux-container .lux-blockquote::after {
    content: 'INSIGHT';
    font-family: var(--lux-font-body);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lux-copper);
    background: rgba(181, 119, 78, 0.08);
    border-left: 3px solid var(--lux-copper);
    padding: 2px 10px 2px 8px;
    position: absolute;
    top: -11px;
    left: 20px;
    line-height: 1.6;
}

.lux-container .lux-blockquote .lux-p {
    padding-left: 0;
    margin-bottom: 0.75rem;
    border-left: none;
    font-size: inherit;
    color: inherit;
}

.lux-container .lux-blockquote .lux-p:last-child {
    margin-bottom: 0;
}

.lux-container .lux-cite {
    display: block;
    font-family: var(--lux-font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--lux-ink-muted);
    text-align: right;
    margin-top: 1rem;
    font-variant: small-caps;
    letter-spacing: 0.04em;
}


/* --- Tables (Desktop) --- */
/* DNA: paper-sheet-panel, ticker-strip-label, newsroom-rule-line */

.lux-container .lux-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--lux-surface);
    border: 1px solid var(--lux-border-light);
    border-radius: var(--lux-radius);
    box-shadow: var(--lux-shadow);
    overflow: hidden;
    margin: 1.5rem 0;
    position: relative;
}

.lux-container .lux-th {
    font-family: var(--lux-font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #FFFFFF;
    background: var(--lux-accent);
    padding: 14px 18px;
    text-align: left;
    border-bottom: 3px solid var(--lux-copper);
}

.lux-container .lux-td {
    font-family: var(--lux-font-body);
    font-size: 0.9375rem;
    color: var(--lux-ink);
    padding: 14px 18px;
    border-bottom: 1px solid var(--lux-border-light);
    transition: background var(--lux-transition);
    vertical-align: top;
}

.lux-container .lux-table tr:last-child .lux-td {
    border-bottom: none;
}

/* Even row striping */
.lux-container .lux-table tbody tr:nth-child(even) .lux-td {
    background: rgba(var(--lux-accent-rgb), 0.025);
}

/* Hover row */
.lux-container .lux-table tbody tr:hover .lux-td {
    background: rgba(var(--lux-accent-rgb), 0.06);
}

.lux-container .lux-table tbody tr:nth-child(even):hover .lux-td {
    background: rgba(var(--lux-accent-rgb), 0.08);
}

/* First column emphasis */
.lux-container .lux-td:first-child {
    font-weight: 600;
    color: var(--lux-accent);
}


/* --- Tables (Mobile — Narrow: 2-col key-value) --- */
/* DNA: paper-sheet-panel */

@media (max-width: 768px) {
    .lux-container .lux-table {
        overflow: hidden;
        background: var(--lux-surface);
        box-shadow: var(--lux-shadow);
        border: 1px solid var(--lux-border);
        border-radius: var(--lux-radius);
        border-top: 3px solid var(--lux-accent);
    }

    .lux-container .lux-table thead,
    .lux-container .lux-table tr[data-lux-header-row] {
        display: none !important;
    }

    .lux-container .lux-table tr {
        display: flex !important;
        align-items: stretch !important;
        border-bottom: 1px solid var(--lux-border-light) !important;
        background: transparent !important;
    }

    .lux-container .lux-table tr:last-child {
        border-bottom: none !important;
    }

    /* Reset desktop hover/stripe */
    .lux-container .lux-table tbody tr:nth-child(even) .lux-td,
    .lux-container .lux-table tbody tr:nth-child(odd) .lux-td,
    .lux-container .lux-table tbody tr:hover .lux-td,
    .lux-container .lux-table tbody tr:nth-child(even):hover .lux-td {
        background: transparent !important;
    }

    /* Label cell */
    .lux-container .lux-td:first-child {
        flex: 0 0 42% !important;
        font-weight: 700 !important;
        font-size: 0.875rem !important;
        color: var(--lux-accent) !important;
        background: rgba(var(--lux-accent-rgb), 0.04) !important;
        border-right: 1px solid var(--lux-border-light) !important;
        border-bottom: none !important;
        padding: 13px 12px 13px 16px !important;
    }

    .lux-container .lux-td:first-child::before {
        display: none !important;
    }

    /* Value cell */
    .lux-container .lux-td:not(:first-child) {
        flex: 1 !important;
        text-align: right !important;
        padding: 13px 16px 13px 14px !important;
        border-bottom: none !important;
        font-weight: 400 !important;
        color: var(--lux-ink) !important;
        background: transparent !important;
    }

    .lux-container .lux-td:not(:first-child)::before {
        content: none !important;
    }

    /* Alternating row bg on mobile */
    .lux-container .lux-table tr:nth-child(even) {
        background: rgba(var(--lux-accent-rgb), 0.02) !important;
    }
}


/* --- Tables (Mobile — Wide: 3+ cols card-per-row) --- */
/* DNA: paper-sheet-panel, ticker-strip-label */

@media (max-width: 768px) {
    /* Card container reset */
    .lux-container .lux-table[data-lux-cols="wide"] {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        border-top: none !important;
        overflow: visible !important;
    }

    .lux-container .lux-table[data-lux-cols="wide"] tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    /* Header hide (must precede tr override) */
    .lux-container .lux-table[data-lux-cols="wide"] thead,
    .lux-container .lux-table[data-lux-cols="wide"] tr[data-lux-header-row] {
        display: none !important;
    }

    /* Card shell */
    .lux-container .lux-table[data-lux-cols="wide"] tr {
        display: block !important;
        width: 100% !important;
        border: 1px solid var(--lux-border) !important;
        border-left: 3px solid var(--lux-accent) !important;
        border-radius: 0 var(--lux-radius) var(--lux-radius) 0 !important;
        overflow: hidden !important;
        background: var(--lux-surface) !important;
        box-shadow: var(--lux-shadow) !important;
    }

    .lux-container .lux-table[data-lux-cols="wide"] tr:nth-child(even) {
        background: var(--lux-surface) !important;
    }

    /* Card header — first cell */
    .lux-container .lux-table[data-lux-cols="wide"] .lux-td:first-child {
        display: block !important;
        width: 100% !important;
        background: var(--lux-accent) !important;
        color: #FFFFFF !important;
        font-family: var(--lux-font-body) !important;
        font-weight: 700 !important;
        font-size: 0.875rem !important;
        letter-spacing: 0.02em !important;
        padding: 11px 16px !important;
        border-right: none !important;
        border-bottom: 3px solid var(--lux-copper) !important;
        text-align: left !important;
    }

    /* Data rows */
    .lux-container .lux-table[data-lux-cols="wide"] .lux-td:not(:first-child) {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 12px !important;
        text-align: right !important;
        padding: 10px 16px !important;
        border-bottom: 1px solid var(--lux-border-light) !important;
        font-size: 0.875rem !important;
        font-weight: 500 !important;
        color: var(--lux-ink) !important;
        background: transparent !important;
    }

    /* Alternating data-row tint */
    .lux-container .lux-table[data-lux-cols="wide"] .lux-td:not(:first-child):nth-child(even) {
        background: rgba(var(--lux-accent-rgb), 0.02) !important;
    }

    /* data-label (left side) */
    .lux-container .lux-table[data-lux-cols="wide"] .lux-td:not(:first-child)::before {
        content: attr(data-label) !important;
        font-weight: 700 !important;
        font-size: 0.8125rem !important;
        color: var(--lux-accent) !important;
        text-align: left !important;
        flex-shrink: 0 !important;
        margin-right: 12px !important;
        white-space: nowrap !important;
    }

    .lux-container .lux-table[data-lux-cols="wide"] .lux-td:last-child {
        border-bottom: none !important;
    }
}


/* --- Images / Figures --- */
/* DNA: paper-sheet-panel, signal-dot-marker */

.lux-container .lux-figure {
    margin: 2rem 0;
    position: relative;
}

.lux-container .lux-img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--lux-border-light);
    border-radius: var(--lux-radius);
    box-shadow: var(--lux-shadow);
    transition: box-shadow var(--lux-transition), transform var(--lux-transition);
}

.lux-container .lux-figure:hover .lux-img {
    box-shadow: var(--lux-shadow-hover);
    transform: translateY(-2px);
}

.lux-container .lux-figcaption {
    font-family: var(--lux-font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--lux-ink-muted);
    text-align: center;
    margin-top: 10px;
    padding-left: 20px;
    position: relative;
}

/* DNA: signal-dot-marker — olive dot on caption */
.lux-container .lux-figcaption::before {
    content: '';
    position: absolute;
    left: 50%;
    margin-left: -60px;
    top: 7px;
    width: 5px;
    height: 5px;
    background: var(--lux-olive);
    border-radius: 50%;
}


/* --- Buttons --- */
/* DNA: ticker-bottom-bar */

.wp-block-button .wp-block-button__link {
    font-family: var(--lux-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--lux-accent);
    border: none;
    border-radius: var(--lux-radius);
    padding: 14px 32px;
    text-decoration: none;
    display: inline-block;
    position: relative;
    overflow: hidden;
    transition: background var(--lux-transition), transform 0.15s ease-out, box-shadow var(--lux-transition);
    cursor: pointer;
    letter-spacing: 0.02em;
}

.wp-block-button .wp-block-button__link:hover {
    background: var(--lux-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--lux-shadow-hover);
    color: #FFFFFF;
}

/* DNA: ticker-bottom-bar — copper accent underline */
.wp-block-button .wp-block-button__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--lux-copper);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--lux-transition);
}

.wp-block-button .wp-block-button__link:hover::after {
    transform: scaleX(1);
}


/* --- Separators --- */
/* DNA: newsroom-rule-line */

.lux-container .lux-hr {
    border: none;
    height: 1px;
    background: var(--lux-border);
    margin: 2.5rem 0;
    position: relative;
}

.lux-container .lux-hr::after {
    content: '';
    position: absolute;
    left: 0;
    top: -1px;
    width: 48px;
    height: 3px;
    background: var(--lux-copper);
    border-radius: 2px;
}


/* --- Code Blocks --- */
/* DNA: paper-sheet-panel */

.lux-container .lux-pre {
    background: #0B1B2B;
    color: #E8EDF3;
    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.65;
    padding: 24px 28px;
    border-radius: var(--lux-radius);
    overflow-x: auto;
    margin: 1.5rem 0;
    border: 1px solid rgba(255,255,255,0.06);
}

.lux-container .lux-code {
    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
    font-size: 0.875em;
    background: rgba(var(--lux-accent-rgb), 0.06);
    color: var(--lux-accent);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--lux-border-light);
}

.lux-container .lux-pre .lux-code {
    background: transparent;
    color: inherit;
    padding: 0;
    border: none;
    border-radius: 0;
}


/* --- Responsive Typography --- */

@media (max-width: 768px) {
    .lux-container .lux-h1 {
        font-size: 2.125rem;
    }

    .lux-container .lux-h2 {
        font-size: 1.625rem;
    }

    .lux-container .lux-h3 {
        font-size: 1.25rem;
    }

    .lux-container .lux-p {
        font-size: 1rem;
        padding-left: 12px;
    }

    .lux-container .lux-h2 + .lux-p {
        padding-left: 12px;
    }

    .lux-container .lux-ul,
    .lux-container .lux-ol {
        padding: 20px 20px 20px 40px;
    }

    .lux-container .lux-li::before {
        left: -22px;
    }

    .lux-container .lux-ol .lux-li::before {
        left: -26px;
        width: 20px;
        height: 20px;
        font-size: 0.6875rem;
    }

    .lux-container .lux-blockquote {
        padding: 24px 20px 20px 20px;
        margin-left: 0;
    }

    .lux-container .lux-li {
        font-size: 1rem;
        padding: 12px 0;
    }
}

@media (max-width: 480px) {
    .lux-container .lux-h1 {
        font-size: 1.75rem;
    }

    .lux-container .lux-h2 {
        font-size: 1.375rem;
    }

    .lux-container .lux-h3 {
        font-size: 1.125rem;
    }

    .lux-container .lux-p {
        padding-left: 0;
    }

    .lux-container .lux-h2 + .lux-p {
        padding-left: 0;
        border-left-width: 2px;
        padding-left: 12px;
    }

    .lux-container .lux-ul,
    .lux-container .lux-ol {
        padding: 18px 16px 18px 36px;
    }

    .lux-container .lux-li::before {
        left: -20px;
    }
}


/* ==============================================
   LAYER 3: SECTION DESIGN
   ============================================== */

/* --- Page Background --- */
body {
    background: var(--lux-bg) !important;
}

/* --- Full-width section mechanics --- */
.lux-section {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    position: relative;
    overflow: hidden;
}

/* --- Section padding --- */
.lux-section {
    padding: 64px 0;
}

/* --- Alternating backgrounds --- */
/* DNA: paper-sheet-panel (even sections = paper sheet) */
.lux-section.lux-odd {
    background: var(--lux-bg);
}

.lux-section.lux-even {
    background: var(--lux-bg-alt);
}

/* Subtle paper grain on alt sections */
.lux-section.lux-even::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(var(--lux-accent-rgb), 0.008) 2px,
            rgba(var(--lux-accent-rgb), 0.008) 4px
        );
    pointer-events: none;
    z-index: 0;
}

.lux-section.lux-even > .lux-container {
    position: relative;
    z-index: 1;
}

/* --- Section divider --- */
/* DNA: newsroom-rule-line */
.lux-section + .lux-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--lux-border);
    pointer-events: none;
    z-index: 2;
}

/* Copper accent segment on divider */
.lux-section + .lux-section .lux-container::before {
    content: '';
    position: absolute;
    top: -64px;
    left: 0;
    width: 48px;
    height: 3px;
    background: var(--lux-copper);
    border-radius: 0 2px 2px 0;
    z-index: 3;
}

/* --- Container --- */
.lux-container {
    max-width: var(--lux-container-max) !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    width: 100% !important;
    position: relative;
}

/* --- Table Wrap (shortcode container) --- */
/* DNA: ticker-strip-label */
.lux-table-wrap {
    padding: 2rem 0;
    position: relative;
}

.lux-table-wrap::before {
    content: 'FEATURED';
    display: inline-block;
    font-family: var(--lux-font-body);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lux-copper);
    background: rgba(181, 119, 78, 0.08);
    border-left: 3px solid var(--lux-copper);
    padding: 2px 10px 2px 8px;
    margin-bottom: 12px;
    line-height: 1.6;
}

/* --- Subsections --- */
/* DNA: paper-sheet-panel, ticker-strip-label */
.lux-subsection {
    background: var(--lux-surface);
    border: 1px solid var(--lux-border-light);
    border-left: 3px solid var(--lux-accent);
    border-radius: 0 var(--lux-radius) var(--lux-radius) 0;
    padding: 28px 32px;
    margin: 2rem 0;
    position: relative;
    box-shadow: var(--lux-shadow);
}

.lux-subsection::before {
    content: 'GUIDE';
    font-family: var(--lux-font-body);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lux-olive);
    background: rgba(94, 115, 81, 0.08);
    border-left: 3px solid var(--lux-olive);
    padding: 2px 10px 2px 8px;
    position: absolute;
    top: -11px;
    right: 20px;
    line-height: 1.6;
}

.lux-subsection .lux-h3 {
    margin-top: 0;
}

.lux-subsection .lux-h3::after {
    display: none;
}

.lux-subsection .lux-p {
    padding-left: 0;
}

.lux-subsection .lux-h2 + .lux-p,
.lux-subsection .lux-h3 + .lux-p {
    padding-left: 0;
    border-left: none;
}

/* Nested lists inside subsections reset */
.lux-subsection .lux-ul,
.lux-subsection .lux-ol {
    box-shadow: none;
    border: none;
    background: transparent;
    padding-left: 32px;
}

.lux-subsection .lux-ul::before,
.lux-subsection .lux-ol::before {
    display: none;
}

/* --- Timeline Steps (.time-line) --- */
/* DNA: signal-dot-marker, newsroom-rule-line, paper-sheet-panel */

.lux-container .lux-ol.time-line {
    padding: 8px 0 4px 46px;
    counter-reset: lux-step;
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin-top: 0.75rem;
}

/* Vertical connector line — tight to circles */
.lux-container .lux-ol.time-line::after {
    content: '';
    position: absolute;
    left: 23px;
    top: 30px;
    bottom: 24px;
    width: 2px;
    background: var(--lux-border);
    border-radius: 1px;
    z-index: 0;
}

.lux-container .lux-ol.time-line .lux-li {
    counter-increment: lux-step;
    padding: 10px 16px;
    margin-bottom: 6px;
    border-bottom: none;
    background: var(--lux-surface);
    border: 1px solid var(--lux-border-light);
    border-radius: 0 8px 8px 0;
    position: relative;
    z-index: 1;
    transition: border-left-color var(--lux-transition), box-shadow var(--lux-transition);
}

.lux-container .lux-ol.time-line .lux-li:last-child {
    margin-bottom: 0;
}

/* Step circle — compact, on the line */
.lux-container .lux-ol.time-line .lux-li::before {
    content: counter(lux-step);
    position: absolute;
    left: -35px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: var(--lux-accent);
    color: #FFF;
    border-radius: 50%;
    font-family: var(--lux-font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 3px var(--lux-bg);
    z-index: 2;
    transition: background var(--lux-transition), box-shadow var(--lux-transition);
}

.lux-even .lux-container .lux-ol.time-line .lux-li::before {
    box-shadow: 0 0 0 3px var(--lux-bg-alt);
}

/* Hover */
.lux-container .lux-ol.time-line .lux-li:hover {
    border-left-color: var(--lux-copper);
    box-shadow: var(--lux-shadow);
}

.lux-container .lux-ol.time-line .lux-li:hover::before {
    background: var(--lux-copper);
}

/* Label */
.lux-container .lux-ol.time-line::before {
    content: 'PROCESS';
    position: relative;
    top: auto;
    left: auto;
    display: inline-block;
    margin-bottom: 8px;
    margin-left: -46px;
    color: var(--lux-accent);
    background: rgba(var(--lux-accent-rgb), 0.07);
    border-left-color: var(--lux-accent);
}

/* --- Timeline Responsive --- */
@media (max-width: 768px) {
    .lux-container .lux-ol.time-line {
        padding: 6px 0 4px 42px;
    }

    .lux-container .lux-ol.time-line::before {
        margin-left: -42px;
    }

    .lux-container .lux-ol.time-line::after {
        left: 12px;
        top: 28px;
        bottom: 20px;
    }

    .lux-container .lux-ol.time-line .lux-li {
        padding: 9px 14px;
        margin-bottom: 5px;
    }

    .lux-container .lux-ol.time-line .lux-li::before {
        left: -32px;
        width: 22px;
        height: 22px;
        font-size: 0.625rem;
    }
}

@media (max-width: 480px) {
    .lux-container .lux-ol.time-line {
        padding: 6px 0 4px 38px;
    }

    .lux-container .lux-ol.time-line::before {
        margin-left: -38px;
    }

    .lux-container .lux-ol.time-line::after {
        left: 10px;
    }

    .lux-container .lux-ol.time-line .lux-li::before {
        left: -37px;
        width: 20px;
        height: 20px;
        font-size: 0.625rem;
    }
}


/* --- FAQ Accordion (.faq) --- */
/* DNA: paper-sheet-panel, newsroom-rule-line, ticker-strip-label */

/* Hide the h2 "SECTION" label — replace with "FAQ" */
.lux-section.faq .lux-h2::before {
    content: 'FAQ';
}

/* Each <p> in FAQ = a Q&A item, JS wraps into .lux-faq-item */
.lux-faq-item {
    background: var(--lux-surface);
    border: 1px solid var(--lux-border-light);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: box-shadow var(--lux-transition);
}

.lux-faq-item:hover {
    box-shadow: var(--lux-shadow);
}

.lux-faq-item:last-child {
    margin-bottom: 0;
}

/* Question row */
.lux-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.lux-faq-q strong,
.lux-faq-q span {
    font-family: var(--lux-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--lux-ink);
    line-height: 1.45;
    flex: 1;
}

/* Pure CSS chevron — no icon font dependency */
.lux-faq-chevron {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    position: relative;
}

.lux-faq-chevron::before,
.lux-faq-chevron::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 8px;
    height: 2px;
    background: var(--lux-accent);
    border-radius: 1px;
    transition: transform 0.25s ease;
}

.lux-faq-chevron::before {
    left: 2px;
    transform: translateY(-50%) rotate(40deg);
}

.lux-faq-chevron::after {
    right: 2px;
    transform: translateY(-50%) rotate(-40deg);
}

.lux-faq-item.lux-faq-open .lux-faq-chevron::before {
    transform: translateY(-50%) rotate(-40deg);
}

.lux-faq-item.lux-faq-open .lux-faq-chevron::after {
    transform: translateY(-50%) rotate(40deg);
}

/* Answer panel */
.lux-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 18px;
}

.lux-faq-item.lux-faq-open .lux-faq-a {
    max-height: 400px;
    padding: 0 18px 16px;
}

.lux-faq-a p {
    font-family: var(--lux-font-body);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--lux-ink-light);
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--lux-border-light);
    padding-top: 12px;
}

/* Active state — accent left border */
.lux-faq-item.lux-faq-open {
    border-left: 3px solid var(--lux-accent);
}

/* Responsive */
@media (max-width: 768px) {
    .lux-faq-q {
        padding: 12px 14px;
    }

    .lux-faq-q strong,
    .lux-faq-q span {
        font-size: 0.875rem;
    }

    .lux-faq-a p {
        font-size: 0.875rem;
    }

    .lux-faq-item.lux-faq-open .lux-faq-a {
        padding: 0 14px 14px;
    }
}


/* --- Section responsive --- */
@media (max-width: 768px) {
    .lux-section {
        padding: 44px 0;
    }

    .lux-container {
        padding: 0 16px !important;
    }

    .lux-section + .lux-section .lux-container::before {
        top: -44px;
        width: 36px;
    }

    .lux-subsection {
        padding: 20px 16px;
        margin: 1.5rem 0;
    }

    .lux-subsection::before {
        position: relative;
        top: auto;
        right: auto;
        display: inline-block;
        margin-bottom: 12px;
    }
}

@media (max-width: 480px) {
    .lux-section {
        padding: 32px 0;
    }

    .lux-section + .lux-section .lux-container::before {
        top: -32px;
    }
}


/* =============================================
   HERO — "TOPOGRAPHIE" (TOPOGRAPHIC MAP LINES)
   Canada = vast geography = topo contour lines.
   ::before = repeating-linear-gradient at -4deg
     creates two alternating contour line weights
     (stronger every 2nd band — like elevation).
   ::after = giant "CANADA" text watermark,
     transparent fill, faint accent stroke.
     Positioned bottom-right, partially off-screen.
   Title + paragraph full-width, no max-width.
   Copper overline + accent fade underline.
   Olive label + copper left rail on paragraph.

   Inserted AFTER main CSS.
   :root and fonts already defined above.
   ============================================= */

.lux-section.lux-hero {
    padding: 0 !important;
    background: var(--lux-bg) !important;
    overflow: hidden;
}

/* ── Topographic contour lines ── */
.lux-section.lux-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        -4deg,
        transparent                              0px,
        transparent                              32px,
        rgba(var(--lux-accent-rgb), 0.038)       32px,
        rgba(var(--lux-accent-rgb), 0.038)       34px,
        transparent                              34px,
        transparent                              66px,
        rgba(var(--lux-accent-rgb), 0.022)       66px,
        rgba(var(--lux-accent-rgb), 0.022)       67px
    );
    z-index: 0;
    pointer-events: none;
    opacity: 1;
}

/* ── "CANADA" watermark ── */
.lux-section.lux-hero::after {
    content: 'CANADA';
    position: absolute;
    right: -60px;
    bottom: -40px;
    font-family: var(--lux-font-head);
    font-size: 22vw;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(var(--lux-accent-rgb), 0.06);
    white-space: nowrap;
    pointer-events: none;
    /* Reset section divider/grain pseudo */
    border-radius: 0;
    border: none;
    width: auto;
    height: auto;
    left: auto;
    top: auto;
    transform: none;
    background-image: none;
    z-index: 0;
    opacity: 1;
}

/* ── Container ── */
.lux-section.lux-hero .lux-container {
    position: relative;
    z-index: 2;
}

/* ── Top accent stripe ── */
.lux-section.lux-hero .lux-container::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--lux-accent)       0%,
        var(--lux-accent-hover) 55%,
        var(--lux-copper)       100%
    );
    margin: 0 -24px;
    /* Reset section copper segment */
    position: static;
    width: auto;
    top: auto;
    left: auto;
    border-radius: 0;
    animation: lux-appear 0.3s both;
}

/* ── Metadata bar ── */
.lux-section.lux-hero .lux-container::after {
    content: 'Canada · Interac · 2026 · Expert-Tested';
    display: block;
    font-family: var(--lux-font-body);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lux-ink-muted);
    border-bottom: 1px solid var(--lux-border-light);
    padding: 16px 0 13px;
    position: static;
    border-radius: 0;
    border-top: none;
    background: none;
    left: auto;
    top: auto;
    transform: none;
    z-index: auto;
    pointer-events: auto;
    opacity: 1;
    animation: lux-appear 0.4s both;
}

/* ── Title — Literata, no max-width ── */
.lux-hero-title {
    font-family: var(--lux-font-head);
    font-weight: 700;
    font-size: clamp(32px, 5.2vw, 70px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--lux-ink);
    padding: 40px 0 28px;
    position: relative;
    animation: lux-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

/* Copper overline */
.lux-hero-title::before {
    content: '';
    display: block;
    width: 44px;
    height: 3px;
    background: var(--lux-copper);
    border-radius: 2px;
    margin-bottom: 22px;
    animation: lux-draw 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
}

/* Accent underline */
.lux-hero-title::after {
    content: '';
    display: block;
    margin-top: 24px;
    height: 1px;
    background: linear-gradient(
        90deg,
        var(--lux-accent)                   0%,
        rgba(var(--lux-accent-rgb), 0.15)   60%,
        transparent                         100%
    );
    animation: lux-draw 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

/* ── Paragraph ── */
.lux-p-1 {
    font-family: var(--lux-font-body);
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.8;
    color: var(--lux-ink-light);
    position: relative;
    padding: 0 0 48px;
    padding-left: 0 !important;
    animation: lux-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;
}

/* Olive label */
.lux-p-1::before {
    content: 'Expert guide';
    display: block;
    font-family: var(--lux-font-body);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lux-olive);
    opacity: 0.75;
    margin-bottom: 14px;
    animation: lux-appear 0.4s 0.24s both;
}

/* Copper left rail */
.lux-p-1::after {
    content: '';
    position: absolute;
    left: -20px;
    top: 2px;
    bottom: 36px;
    width: 2px;
    background: linear-gradient(
        180deg,
        var(--lux-copper)      0%,
        rgba(181, 119, 78, 0.12) 65%,
        transparent              100%
    );
    border-radius: 1px;
}

/* ═══════════════════
   HERO KEYFRAMES
   ═══════════════════ */

@keyframes lux-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes lux-appear {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes lux-draw {
    from { transform: scaleX(0); transform-origin: left; }
    to   { transform: scaleX(1); }
}

/* ── Hero Responsive ── */
@media (max-width: 768px) {
    .lux-hero-title {
        font-size: clamp(26px, 7.5vw, 48px);
        padding-top: 32px;
    }

    .lux-p-1::after {
        display: none;
    }

    .lux-section.lux-hero::after {
        font-size: 36vw;
        bottom: -10px;
        right: -20px;
    }

    .lux-section.lux-hero .lux-container::before {
        margin: 0 -16px;
    }
}

@media (max-width: 480px) {
    .lux-hero-title {
        font-size: clamp(24px, 8vw, 36px);
    }

    .lux-section.lux-hero::after {
        display: none;
    }
}