/* ==========================================================================
   Rubicon — Investor section
   Loaded AFTER style.css / media.css, so ordinary cascade order wins and
   most of the !important flags the old inline block needed are unnecessary.
   They are retained only where style.css itself uses !important.
   ========================================================================== */

:root {
    --inv-font:       'DINPro-Regular', 'DINPro', Arial, sans-serif;
    --inv-font-bold:  'DINPro-Bold', 'DINPro', Arial, sans-serif;
    --inv-font-med:   'DINPro-Medium', 'DINPro', Arial, sans-serif;
    --inv-ink:        #1e293b;
    --inv-body:       #45536b;  /* AA on #f8fafc and on #fff */
    --inv-muted:      #5b6980;
    --inv-accent:     #0369a1;
    --inv-accent-lt:  #0ea5e9;
    --inv-line:       #e2e8f0;
    --inv-surface:    #f8fafc;
    --inv-radius:     16px;
    --inv-radius-sm:  10px;
}

.inv-scope {
    font-family: var(--inv-font) !important;
}

.inv-scope h1,
.inv-scope h2,
.inv-scope h3,
.inv-scope h4 {
    font-family: var(--inv-font-bold) !important;
}

.inv-scope p,
.inv-scope .inv-desc,
.inv-scope .inv-intro {
    font-size: 18px;
    line-height: 1.6;
    color: var(--inv-body);
}

@media screen and (max-width: 767px) {
    .inv-scope p,
    .inv-scope .inv-desc,
    .inv-scope .inv-intro {
        font-size: 16px;
        line-height: 1.55;
    }
}

/* --------------------------------------------------------------------------
   Footer Text Color Reset (Ensure white text over dark footer background)
   -------------------------------------------------------------------------- */
.inv-scope #footer,
.inv-scope #footer p,
.inv-scope #footer h4,
.inv-scope #footer h5,
.inv-scope #footer a,
.inv-scope #footer .compliance-info,
.inv-scope #footer .copyright {
    color: #ffffff !important;
}

.inv-scope #footer a:hover {
    color: #e2e8f0 !important;
}

/* --------------------------------------------------------------------------
   Shared: page furniture
   -------------------------------------------------------------------------- */

.inv-section {
    padding-top: 170px;
    margin-top: 0;
    margin-bottom: 3rem;
}

/* When preceded by hero section (#investor), remove extra top padding */
#investor + .inv-section,
section#investor + section.inv-section {
    padding-top: 2rem;
}

/* Skip link — first focusable element on the page */
.inv-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 12px 20px;
    background: #fff;
    color: var(--inv-accent);
    font-weight: 600;
    border-radius: 0 0 var(--inv-radius-sm) 0;
}
.inv-skip:focus {
    left: 0;
}

/* Visually hidden but available to assistive tech.
   `clip-path` rather than the legacy `clip`, plus explicit containment: the
   Reg 46 table puts a long .inv-sr-only description inside every "Click Here"
   link, and with `white-space: nowrap` those spans still reported a min-content
   width of up to 891px. That propagated up through the table and gave the
   disclosure page an ~84px horizontal overflow on a 320px screen. */
.inv-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Consistent, visible focus ring everywhere in the section */
.inv-scope a:focus-visible,
.inv-scope button:focus-visible,
.inv-scope select:focus-visible,
.inv-scope input:focus-visible {
    outline: 3px solid var(--inv-accent-lt);
    outline-offset: 2px;
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.inv-breadcrumb {
    padding: 18px 0 0;
    margin: 0;
    font-size: 14px;
}
.inv-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.inv-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--inv-muted);
}
.inv-breadcrumb li + li::before {
    content: "/";
    color: #94a3b8;
}
.inv-breadcrumb a {
    color: var(--inv-accent);
    text-decoration: none;
}
.inv-breadcrumb a:hover,
.inv-breadcrumb a:focus {
    text-decoration: underline;
}
.inv-breadcrumb [aria-current="page"] {
    color: var(--inv-ink);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Investor sub-navigation — persistent across every investor page
   -------------------------------------------------------------------------- */

.inv-subnav {
    background: #fff;
    border-bottom: 1px solid var(--inv-line);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.inv-subnav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}
.inv-subnav li {
    margin: 0;
}
.inv-subnav a {
    display: block;
    padding: 16px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--inv-body);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.inv-subnav a:hover,
.inv-subnav a:focus {
    color: var(--inv-accent);
    background: rgba(14, 165, 233, .06);
    text-decoration: none;
}
.inv-subnav a[aria-current="page"] {
    color: var(--inv-accent);
    border-bottom-color: var(--inv-accent);
}

@media screen and (max-width: 991px) {
    .inv-subnav ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .inv-subnav a {
        white-space: nowrap;
        padding: 14px 12px;
    }
}

/* --------------------------------------------------------------------------
   Filter bar — year select + keyword search
   -------------------------------------------------------------------------- */

.inv-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    margin-bottom: 28px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--inv-line);
    border-radius: var(--inv-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}
.inv-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
    flex: 0 1 auto;
}
.inv-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--inv-body);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.inv-field select,
.inv-field input {
    height: 44px;
    padding: 8px 12px;
    font-size: 15px;
    color: var(--inv-ink);
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: var(--inv-radius-sm);
}
.inv-field select:hover,
.inv-field input:hover {
    border-color: var(--inv-accent-lt);
}
.inv-result-count {
    margin-left: auto;
    font-size: 14px;
    color: var(--inv-muted);
    padding-bottom: 12px;
}

/* Filter controls stay hidden until investor.js has actually initialised and
   added .inv-filter-ready. Gating on .inv-js alone would not be enough: if the
   script 404s or is blocked, .inv-js is still set by the inline snippet in
   <head>, and the visitor would be shown a filter that does nothing while the
   year headings it replaces were already hidden. Both states key off the same
   class, so the page can only ever be in one of two coherent configurations. */
.inv-js-only { display: none; }
.inv-filter-ready .inv-js-only { display: flex; }

/* The year headings are the no-JS wayfinding. They disappear only once the
   dropdown is live and communicating the same thing. */
.inv-filter-ready .inv-fy-heading { display: none; }

/* --------------------------------------------------------------------------
   Document table
   -------------------------------------------------------------------------- */

.inv-table-wrap {
    background: #fff;
    border: 1px solid var(--inv-line);
    border-radius: var(--inv-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
    overflow: hidden;
}

.inv-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.inv-table caption {
    text-align: left;
    padding: 20px 24px 0;
    font-size: 15px;
    color: var(--inv-muted);
    caption-side: top;
}
.inv-table th,
.inv-table td {
    padding: 16px 20px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--inv-line);
    font-size: 16px;
    line-height: 1.5;
}
.inv-table thead th {
    background: var(--inv-surface);
    color: var(--inv-ink);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 2px solid var(--inv-line);
    white-space: nowrap;
}
.inv-table tbody tr:last-child th,
.inv-table tbody tr:last-child td {
    border-bottom: none;
}
.inv-table tbody tr:hover {
    background: rgba(14, 165, 233, .04);
}
.inv-table td {
    color: var(--inv-body);
}
.inv-table .inv-col-num {
    width: 56px;
    color: var(--inv-muted);
    font-variant-numeric: tabular-nums;
}
.inv-table .inv-col-date {
    width: 150px;
    white-space: nowrap;
    color: var(--inv-muted);
    font-variant-numeric: tabular-nums;
}
.inv-table .inv-col-status {
    width: 150px;
}
.inv-table a {
    color: var(--inv-accent);
    font-weight: 600;
    text-decoration: none;
}
.inv-table a:hover,
.inv-table a:focus {
    text-decoration: underline;
}

/* Financial-year grouping heading — the no-JS fallback */
.inv-fy-heading th {
    background: #eef4f8;
    color: var(--inv-ink);
    font-size: 14px;
    font-weight: 700;
}

/* Row hidden by the year / search filter */
.inv-row-hidden { display: none; }

/* Empty state */
.inv-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--inv-muted);
    font-size: 16px;
}

/* --------------------------------------------------------------------------
   File-type badge + document icon
   Inline SVG as a background image: decorative by construction, so it is
   never announced by a screen reader (unlike the emoji it replaces).
   -------------------------------------------------------------------------- */

.inv-doc-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    vertical-align: -3px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
    flex-shrink: 0;
}
.inv-doc-icon--audio {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3Cpath d='M19.07 4.93a7 7 0 0 1 0 14.14'/%3E%3C/svg%3E");
}
.inv-doc-icon--link {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
}

.inv-doc-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
    text-decoration: none !important;
}
.inv-doc-link:hover .inv-doc-title,
.inv-doc-link:focus .inv-doc-title {
    text-decoration: underline;
}
.inv-doc-title {
    display: flex;
    align-items: center;
    flex: 1;
    color: var(--inv-accent);
    font-weight: 600;
}

.inv-table .inv-meta {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
    background: #f1f5f9;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    border: 1px solid #e2e8f0;
    white-space: nowrap;
}
.inv-doc-link:hover .inv-meta {
    background: #e2e8f0;
    color: #0f172a;
}

/* --------------------------------------------------------------------------
   Status chips (Reg 46 table)
   Colour is reinforced by text, never the sole carrier of meaning.
   -------------------------------------------------------------------------- */

.inv-chip {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}
.inv-chip--available {
    background: #dcfce7;
    color: #14532d;
}
.inv-chip--na {
    background: #f1f5f9;
    color: #475569;
}
.inv-chip--pending {
    background: #fef3c7;
    color: #78350f;
}

.inv-na-reason {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--inv-muted);
    font-style: italic;
}

/* --------------------------------------------------------------------------
   Reg 46 page specifics
   -------------------------------------------------------------------------- */

.inv-note {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid var(--inv-accent);
    border-radius: var(--inv-radius-sm);
    padding: 20px 24px;
    margin-bottom: 32px;
    color: #1e3a5f;
    font-size: 15px;
    line-height: 1.65;
}
.inv-note p { margin: 0 0 10px; color: inherit; }
.inv-note p:last-child { margin-bottom: 0; }
.inv-note a { color: var(--inv-accent); font-weight: 600; }

.inv-group-heading {
    margin: 44px 0 16px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--inv-ink);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--inv-line);
}
.inv-group-heading:first-of-type { margin-top: 0; }

.inv-clause {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--inv-muted);
    letter-spacing: .03em;
}

.inv-table .inv-col-particulars { width: auto; min-width: 280px; }
.inv-table .inv-col-link        { width: 260px; }

/* --------------------------------------------------------------------------
   Landing hub cards (kept compatible with the existing .download-card markup)
   -------------------------------------------------------------------------- */

.inv-hub {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}
.inv-hub-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--inv-line);
    border-radius: var(--inv-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
    padding: 28px 24px;
    text-decoration: none;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease, border-color .3s ease;
}
.inv-hub-card:hover,
.inv-hub-card:focus {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .1);
    border-color: var(--inv-accent-lt);
    text-decoration: none;
}
.inv-hub-card h3,
.inv-hub-grid .inv-card h3,
.inv-card h3 {
    margin: 0 0 14px;
    font-family: var(--inv-font-bold) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.inv-hub-card p,
.inv-hub-grid .inv-card p,
.inv-card p {
    margin: 0 0 24px;
    font-size: 16px !important;
    line-height: 1.6;
    color: #475569;
    text-align: left;
}

.inv-hub-card:hover h3,
.inv-hub-card:focus h3 { color: var(--inv-accent) !important; }

/* Reg 46 gets visual primacy on the hub — "clearly identifiable" per 46(2) */
.inv-hub-card--reg46 {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-color: var(--inv-accent-lt);
}

/* --------------------------------------------------------------------------
   Investors hub section grid
   -------------------------------------------------------------------------- */

.inv-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 24px;
    margin-top: 30px;
}

.inv-hub-grid .inv-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    border: 1px solid var(--inv-line);
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    min-width: 0;
    transition: transform .2s ease, box-shadow .2s ease;
}

.inv-hub-grid .inv-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

@media screen and (max-width: 767px) {
    .inv-hub-grid .inv-card h3,
    .inv-hub-card h3,
    .inv-card h3 {
        font-size: 22px !important;
    }
    .inv-hub-grid .inv-card p,
    .inv-hub-card p,
    .inv-card p {
        font-size: 15px !important;
        line-height: 1.55;
    }
}

/* Outline variant */
.inv-scope a.inv-btn--outline,
.manufacturing a.inv-btn--outline,
.inv-btn--outline {
    display: inline-block;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 700;
    background: transparent !important;
    color: var(--inv-accent) !important;
    border: 1.5px solid var(--inv-accent);
    border-radius: 8px;
    white-space: normal !important;
    transition: all .2s ease;
}

.inv-scope a.inv-btn--outline:hover,
.inv-scope a.inv-btn--outline:focus,
.manufacturing a.inv-btn--outline:hover,
.manufacturing a.inv-btn--outline:focus,
.inv-btn--outline:hover,
.inv-btn--outline:focus {
    background: var(--inv-accent) !important;
    color: #fff !important;
    border-color: var(--inv-accent);
}

/* Banner CTA */
.inv-reg46-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid var(--inv-accent-lt);
    border-radius: var(--inv-radius);
    padding: 28px 32px;
    margin-bottom: 36px;
    box-shadow: 0 4px 18px rgba(14, 165, 233, .12);
}
.inv-reg46-banner h2 {
    margin: 0 0 8px;
    font-family: var(--inv-font-bold) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.25;
}
.inv-reg46-banner p {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--inv-body);
    max-width: 70ch;
}
@media screen and (max-width: 767px) {
    .inv-reg46-banner h2 {
        font-size: 22px !important;
    }
    .inv-reg46-banner p {
        font-size: 15px;
        line-height: 1.55;
    }
}
.inv-scope a.inv-btn,
.manufacturing a.inv-btn,
.inv-reg46-banner a.inv-btn,
.inv-btn {
    display: inline-block;
    padding: 14px 28px;
    background: var(--inv-accent) !important;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    border-radius: var(--inv-radius-sm);
    white-space: nowrap;
    transition: background .25s ease, transform .25s ease;
}
.inv-scope a.inv-btn:hover,
.inv-scope a.inv-btn:focus,
.inv-scope a.inv-btn:visited,
.manufacturing a.inv-btn:hover,
.manufacturing a.inv-btn:focus,
.manufacturing a.inv-btn:visited,
.inv-btn:hover,
.inv-btn:focus,
.inv-btn:visited {
    background: #075985 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Responsive: collapse the table to stacked cards on small screens.
   data-label is emitted server-side by inc/investor-doc-table.php.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
    .inv-filters { flex-direction: column; align-items: stretch; }
    .inv-field   { min-width: 0; }
    .inv-result-count { margin-left: 0; padding-bottom: 0; }

    .inv-scope .inv-table thead { display: none; }

    /* Every selector here is prefixed with .inv-scope deliberately.
       Bootstrap 3 ships `table td[class*="col-"] { display: table-cell }`
       (specificity 0,1,2), and the Reg 46 / document tables name their columns
       .inv-col-link, .inv-col-status, .inv-col-num, .inv-col-particulars,
       .inv-col-date — every one of which matches [class*="col-"]. Unprefixed,
       `.inv-table td` scores only 0,1,1 and LOSES, so those cells stayed
       table-cells while their rows became blocks: the cells overflowed
       sideways and .inv-table-wrap's `overflow: hidden` clipped them away.
       The result was a Regulation 46 disclosure whose "Click Here" links were
       invisible and untappable on every phone. .inv-scope takes this to 0,2,1
       and wins on specificity, without needing !important. */
    .inv-scope .inv-table:not(.inv-matrix-table),
    .inv-scope .inv-table:not(.inv-matrix-table) tbody,
    .inv-scope .inv-table:not(.inv-matrix-table) tr,
    .inv-scope .inv-table:not(.inv-matrix-table) td,
    .inv-scope .inv-table:not(.inv-matrix-table) th {
        display: block;
        width: 100%;
        float: none;
    }

    .inv-scope .inv-table:not(.inv-matrix-table) tr {
        border-bottom: 1px solid var(--inv-line);
        padding: 8px 0;
    }
    .inv-scope .inv-table:not(.inv-matrix-table) tr:last-child { border-bottom: none; }

    .inv-scope .inv-table:not(.inv-matrix-table) td,
    .inv-scope .inv-table:not(.inv-matrix-table) tbody th {
        border-bottom: none;
        padding: 8px 20px;
    }
    .inv-scope .inv-table:not(.inv-matrix-table) td[data-label]::before,
    .inv-scope .inv-table:not(.inv-matrix-table) th[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--inv-muted);
        margin-bottom: 4px;
    }

    /* The fixed pixel widths are desktop column sizing; they must all release
       once the row is a stacked card, or the cell overflows its container. */
    .inv-scope .inv-table .inv-col-num,
    .inv-scope .inv-table .inv-col-date,
    .inv-scope .inv-table .inv-col-status,
    .inv-scope .inv-table .inv-col-link,
    .inv-scope .inv-table .inv-col-particulars {
        width: auto;
        min-width: 0;
        white-space: normal;
    }

    /* A stacked "No." cell reading just "1" above the particulars is noise —
       the number carries no meaning once the table is a list of cards. */
    .inv-scope .inv-table .inv-col-num {
        padding-bottom: 0;
        font-size: 12px;
        font-weight: 700;
        color: var(--inv-muted);
    }

    /* An empty Status cell would otherwise render as a stray "STATUS" label
       with nothing under it, because most rows leave the cell blank. */
    .inv-scope .inv-table .inv-col-status:empty { display: none; }

    .inv-scope .inv-fy-heading th { padding: 12px 20px; }

    /* Hidden rows and redundant year headings MUST stay hidden on mobile */
    .inv-scope tr.inv-row-hidden,
    .inv-scope .inv-table tr.inv-row-hidden,
    .inv-row-hidden {
        display: none !important;
    }
    .inv-filter-ready .inv-fy-heading,
    .inv-filter-ready .inv-scope .inv-fy-heading,
    .inv-scope .inv-filter-ready .inv-fy-heading {
        display: none !important;
    }

    /* Matrix Table (Shareholding pattern) maintains its matrix grid and fits mobile cleanly */
    .inv-scope .inv-matrix-table {
        display: table !important;
        width: 100% !important;
        table-layout: fixed;
    }
    .inv-scope .inv-matrix-table thead {
        display: table-header-group !important;
    }
    .inv-scope .inv-matrix-table thead th {
        padding: 10px 4px !important;
        font-size: 13px !important;
    }
    .inv-scope .inv-matrix-table tbody {
        display: table-row-group !important;
    }
    .inv-scope .inv-matrix-table tr {
        display: table-row !important;
        border-bottom: 1px solid var(--inv-line) !important;
        padding: 0 !important;
    }
    .inv-scope .inv-matrix-table th,
    .inv-scope .inv-matrix-table td {
        display: table-cell !important;
        padding: 10px 2px !important;
        vertical-align: middle !important;
        font-size: 13px !important;
    }
    .inv-scope .inv-matrix-table th:first-child {
        font-size: 12px !important;
        padding-left: 6px !important;
    }
    .inv-scope .inv-matrix-table td .inv-doc-badge-link {
        padding: 4px 4px !important;
        font-size: 10px !important;
        gap: 2px !important;
    }
    .inv-scope .inv-matrix-table td[data-label]::before,
    .inv-scope .inv-matrix-table th[data-label]::before {
        display: none !important;
    }

    .inv-reg46-banner { flex-direction: column; align-items: flex-start; }
    .inv-reg46-banner a.inv-btn { white-space: normal; }
}

/* --------------------------------------------------------------------------
   Legacy accordion styling — retained so the existing investor.php grid keeps
   working during the phased migration. Emoji ::before replaced by the SVG
   icon above. Remove this block once all sections are on sub-pages.
   -------------------------------------------------------------------------- */

section .download-card {
    background: #fff;
    border-radius: var(--inv-radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
    transition: all .4s cubic-bezier(.4, 0, .2, 1);
    border: 1px solid #f0f2f5;
    overflow: hidden;
    height: 100%;
    position: relative;
    margin-bottom: 0;
}
section .download-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
    border-color: #e3f2fd;
}
section .download-card.fin-page {
    cursor: pointer;
    background: linear-gradient(135deg, #fff 0%, var(--inv-surface) 100%);
    border: 1px solid var(--inv-line);
}
section .download-card.fin-page:hover {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-color: var(--inv-accent-lt);
    box-shadow: 0 12px 40px rgba(14, 165, 233, .15);
}
section .download-card.fin-page:hover h4 { color: var(--inv-accent); }

section .download-card h4 {
    margin: 0;
    padding: 32px 24px;
    font-size: 17px;
    font-weight: 600;
    color: var(--inv-ink);
    line-height: 1.4;
    text-align: center;
    transition: all .3s ease;
    letter-spacing: -.01em;
    background: none;
    border: none;
    text-decoration: none;
}

section .download-card.industy-report {
    background: linear-gradient(135deg, #fff 0%, var(--inv-surface) 100%);
}
section .download-card.industy-report:hover {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

section .fin-accordion-main {
    padding: 0;
    margin: 0;
    background: none;
    border: none;
}

section .fin_accordion-header {
    padding: 32px 48px 32px 24px;
    margin: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    color: var(--inv-ink);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s ease;
    letter-spacing: -.01em;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    position: relative;
}
section .fin_accordion-header:hover,
section .fin_accordion-header.active {
    color: var(--inv-accent);
    background: transparent;
}

section .fin_accordion-icon {
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    font-size: 14px;
    color: var(--inv-muted);
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
}
section .fin_accordion-header.active .fin_accordion-icon {
    transform: translateY(-50%) rotate(180deg);
    color: var(--inv-accent);
}

section .fin_accordion-content {
    display: none;
    background: var(--inv-surface);
    margin: 0 24px 24px;
    border-radius: 12px;
    overflow: hidden;
    border: none;
}
section .fin_accordion-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}
section .fin_accordion-content li {
    border-bottom: 1px solid rgba(226, 232, 240, .5);
    background: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
section .fin_accordion-content li:last-child { border-bottom: none; }

section .fin_accordion-content a {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    color: var(--inv-body);
    text-decoration: none;
    font-size: 15px;
    line-height: 1.5;
    transition: all .3s ease;
    position: relative;
    font-weight: 500;
    background: none;
    border: none;
    margin: 0;
    flex: 1;
    box-sizing: border-box;
}
section .fin_accordion-content a:hover {
    background: rgba(14, 165, 233, .05);
    color: var(--inv-accent);
    text-decoration: none;
    transform: translateX(4px);
}
section .fin_accordion-content a::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 12px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
}

section .announcement-date {
    padding: 18px 20px;
    color: var(--inv-muted);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    min-width: 120px;
    text-align: right;
}

/* style.css sets .manufacturing .about-head { font-size: 25px !important }
   inside a media query, so this one genuinely needs the flag. */
section .about-head {
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 24px !important;
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
    letter-spacing: -.02em !important;
}

section .dn-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -16px 32px;
}
section .dn-row .col-lg-4,
section .dn-row .col-12 {
    padding: 0 16px;
    margin-bottom: 32px;
    display: flex;
}
section .dn-row .col-lg-4 .download-card,
section .dn-row .col-12 .download-card {
    width: 100%;
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 767px) {
    section .about-head { font-size: 1.6rem !important; }
    section .fin_accordion-content li { flex-wrap: wrap; }
    section .announcement-date { text-align: left; padding-top: 0; }
}

/* --------------------------------------------------------------------------
   Floating "Connect with us!" social bar
   --------------------------------------------------------------------------
   The legacy widget is `width: 100%; right: -97.8%`, i.e. a viewport-wide strip
   parked just off the right edge and slid in on hover. Its right edge therefore
   sits at roughly 2x the viewport width, which counts as overflow and let the
   whole page be dragged sideways on touch devices — the investor pages have no
   full-bleed element of their own to mask it.

   Clipping it at the root is the fix, and it costs nothing: `overflow-x:
   clip` on the x-axis only leaves `position: sticky` (used by .inv-sidebar)
   working, which `overflow: hidden` would silently break.
   -------------------------------------------------------------------------- */

.inv-scope {
    overflow-x: clip;
}

/* Fallback for engines without `overflow: clip` (Safari < 16). `hidden` on the
   body establishes a scroll container, so the sidebar's sticky positioning is
   scoped to it — acceptable, since below 992px the sidebar is static anyway. */
@supports not (overflow: clip) {
    .inv-scope {
        overflow-x: hidden;
    }
}

/* Hovering a hidden strip is a pointer idiom with no touch equivalent, so on
   touch-primary devices it is dead weight that only risks stealing taps. */
@media (hover: none) and (max-width: 991px) {
    .inv-scope .float-sm {
        display: none;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .inv-scope *,
    section .download-card,
    section .fin_accordion-content a {
        transition: none !important;
        animation: none !important;
    }
    .inv-hub-card:hover,
    .inv-btn:hover,
    section .download-card:hover { transform: none; }
}

/* Print: the compliance table should print cleanly for audit files */
@media print {
    .inv-subnav,
    .inv-filters,
    .inv-skip,
    .float-sm,
    header.header,
    #footer { display: none !important; }

    .inv-table-wrap { border: none; box-shadow: none; }
    .inv-table { font-size: 11pt; }
    .inv-table thead { display: table-header-group; }
    .inv-table tr { page-break-inside: avoid; }
    .inv-row-hidden { display: table-row !important; }
    .inv-table a::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
        word-break: break-all;
    }
}

/* --------------------------------------------------------------------------
   Vertical Sidebar Layout (Antony Waste pattern)
   -------------------------------------------------------------------------- */

.inv-sidebar-layout {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.inv-sidebar-col {
    width: 25%;
    padding-left: 15px;
    padding-right: 25px;
    border-right: 1px solid var(--inv-line);
}

.inv-main-col {
    width: 75%;
    padding-left: 35px;
    padding-right: 15px;
}

.inv-sidebar {
    position: sticky;
    top: 170px;
}

.inv-sidebar__title {
    font-size: 28px;
    font-weight: 700;
    color: var(--inv-accent);
    margin-top: 0;
    margin-bottom: 24px;
    line-height: 1.2;
}

.inv-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.inv-sidebar__item {
    margin-bottom: 14px;
}

.inv-sidebar__link {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #0369a1;
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.2s ease, transform 0.2s ease;
}

.inv-sidebar__link:hover,
.inv-sidebar__link:focus {
    color: #0f172a;
    text-decoration: none;
}

.inv-sidebar__link--active {
    color: #0f172a !important;
    font-weight: 700 !important;
}

.inv-sidebar__sublist {
    list-style: none;
    margin: 8px 0 4px 12px;
    padding: 0 0 0 10px;
    border-left: 2px solid #e2e8f0;
}

.inv-sidebar__sublist li {
    margin-bottom: 6px;
}

.inv-sidebar__sublink {
    font-size: 13px;
    font-weight: 600;
    color: #0284c7;
    text-decoration: none;
    display: inline-block;
    transition: color 0.15s ease;
}

.inv-sidebar__sublink:hover,
.inv-sidebar__sublink:focus {
    color: #0f172a;
    text-decoration: none;
}

.inv-sidebar__sublink--active {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   Sub-Navigation Tabs (Antony Waste style)
   -------------------------------------------------------------------------- */

.inv-subnav-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
    border-bottom: 2px solid #cbd5e1;
    padding-bottom: 0;
    flex-wrap: wrap;
    position: -webkit-sticky;
    position: sticky;
    top: 85px;
    z-index: 100;
    background: #ffffff;
    padding-top: 10px;
    margin-top: -10px;
}

.inv-subnav-tab {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    border: 1px solid #cbd5e1;
    border-bottom: 2px solid #cbd5e1;
    margin-bottom: -2px;
    transition: all 0.2s ease;
    border-radius: 6px 6px 0 0;
    background: #e2e8f0;
}

.inv-subnav-tab:hover,
.inv-subnav-tab:focus {
    color: #002d62;
    background: #cbd5e1;
    border-color: #94a3b8;
    text-decoration: none;
}

.inv-subnav-tab--active,
.inv-subnav-tab[aria-current="page"] {
    color: #002d62 !important;
    font-weight: 700 !important;
    border-color: #cbd5e1 #cbd5e1 #ffffff #cbd5e1 !important;
    border-bottom: 3px solid #002d62 !important;
    background: #ffffff !important;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04);
}

/* --------------------------------------------------------------------------
   Shareholding Distribution Donut Chart Card (Antony Waste style)
   -------------------------------------------------------------------------- */

.inv-shareholding-chart-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    margin-bottom: 32px;
}

.inv-chart-header {
    margin-bottom: 24px;
}

.inv-chart-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px 0;
}

.inv-chart-subtitle {
    font-size: 14px;
    color: #64748b;
    font-weight: 600;
}

.inv-chart-container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 36px;
    flex-wrap: wrap;
}

.inv-chart-donut-wrap {
    width: 220px;
    height: 220px;
    flex-shrink: 0;
}

.inv-donut-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.inv-donut-segment {
    transition: stroke-width 0.2s ease, opacity 0.2s ease;
    cursor: pointer;
}

.inv-donut-segment:hover {
    stroke-width: 42;
    opacity: 0.9;
}

.inv-chart-legend {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    min-width: 260px;
}

.inv-legend-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #f1f5f9;
}

.inv-legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    flex-shrink: 0;
}

.inv-legend-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 12px;
}

.inv-legend-label {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.inv-legend-pct {
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.inv-page-header {
    margin-bottom: 28px;
}

.inv-page-title {
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 1.3;
}

.inv-title-underline {
    width: 60px;
    height: 4px;
    background: var(--inv-accent);
    border-radius: 2px;
    margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   Sidebar: mobile disclosure menu
   --------------------------------------------------------------------------
   The toggle button is injected by investor.js and stays display:none until
   the media query below claims it, so the desktop sidebar is untouched. With
   no JS the menu is simply always open — every link remains reachable, which
   the Regulation 46 "easily accessible" obligation requires.
   -------------------------------------------------------------------------- */

.inv-sidebar__toggle {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid var(--inv-line);
    border-radius: var(--inv-radius-sm);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--inv-ink);
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.inv-sidebar__toggle:hover,
.inv-sidebar__toggle:focus {
    border-color: var(--inv-accent-lt);
    background: #f0f9ff;
}

/* Current page, so the collapsed bar still says where you are. */
.inv-sidebar__toggle-current {
    font-weight: 600;
    color: var(--inv-accent);
}

.inv-sidebar__toggle-icon {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
    margin-bottom: 3px;
}

.inv-sidebar__toggle[aria-expanded="true"] .inv-sidebar__toggle-icon {
    transform: rotate(-135deg);
    margin-bottom: -3px;
}

@media screen and (max-width: 991px) {
    .inv-sidebar-col {
        width: 100%;
        border-right: none;
        padding-right: 15px;
        padding-bottom: 0;
        margin-bottom: 24px;
    }
    .inv-main-col {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        scroll-margin-top: 85px;
    }
    .inv-page-header,
    #inv-main {
        scroll-margin-top: 85px;
    }
    .inv-sidebar {
        position: static;
    }

    /* The old rule turned this list into `flex-wrap: wrap`, which packed 15
       differently-sized links into ragged rows — two here, three there, a
       242px one alone — with no alignment and nowhere for a sublist to go.
       That is the "vertical menu isn't rendering properly" report. Back to a
       real vertical list, behind a disclosure toggle. */
    .inv-sidebar__title {
        font-size: 22px;
        margin-bottom: 14px;
    }

    .inv-sidebar__toggle { display: flex; }

    .inv-sidebar__list {
        display: block;
        border: 1px solid var(--inv-line);
        border-top: none;
        border-radius: 0 0 var(--inv-radius-sm) var(--inv-radius-sm);
        overflow: hidden;
    }

    /* Collapsed only when JS is present to reopen it. */
    .inv-js .inv-sidebar__list[data-inv-collapsed="true"] {
        display: none;
    }

    .inv-sidebar__item {
        margin-bottom: 0;
        border-top: 1px solid var(--inv-line);
    }
    .inv-sidebar__item:first-child {
        border-top: none;
    }

    /* Full-width rows with a 44px minimum touch target. */
    .inv-sidebar__link {
        padding: 13px 16px;
        font-size: 15px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .inv-sidebar__link--active {
        background: #f0f9ff;
        box-shadow: inset 3px 0 0 var(--inv-accent);
    }

    .inv-sidebar__sublist {
        margin: 0;
        padding: 0;
        border-left: none;
        background: #f8fafc;
    }
    .inv-sidebar__sublist li {
        margin-bottom: 0;
        border-top: 1px dashed var(--inv-line);
    }
    .inv-sidebar__sublink {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 11px 16px 11px 30px;
        font-size: 14px;
    }
    .inv-sidebar__sublink--active {
        background: #e0f2fe;
    }
}

/* --------------------------------------------------------------------------
   Investor Contact Card Styles
   -------------------------------------------------------------------------- */

.ric-content-card {
    background: #fff;
    border: 1px solid var(--inv-line);
    border-radius: var(--inv-radius);
    padding: 32px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media screen and (max-width: 767px) {
    .ric-content-card {
        padding: 20px 16px;
    }
}

.ric-content-card h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--inv-accent);
    margin-top: 0;
    margin-bottom: 16px;
    line-height: 1.3;
}

.ric-content-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin-top: 12px;
    margin-bottom: 12px;
    line-height: 1.4;
}

.ric-content-card img {
    max-width: 220px;
    height: auto;
    margin-bottom: 16px;
    display: block;
}

.ric-content-card p {
    font-size: 18px;
    line-height: 1.6;
    color: #334155;
    margin-bottom: 12px;
    text-align: left;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media screen and (max-width: 767px) {
    .ric-content-card p {
        font-size: 16px;
        line-height: 1.55;
    }
}

.ric-content-card a {
    color: var(--inv-accent);
    text-decoration: underline;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ric-content-card a:hover {
    color: #0f172a;
}

.ric-separator {
    height: 1px;
    background: var(--inv-line);
    margin: 32px 0;
}

/* --------------------------------------------------------------------------
   Financial Reports: Bespoke Executive Reporting Grid (Elevated Rubicon Design)
   -------------------------------------------------------------------------- */

.inv-fy-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 28px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
}

.inv-fy-summary {
    display: flex;
    align-items: center;
    gap: 10px;
}

.inv-fy-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #0f172a;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    letter-spacing: 0.3px;
}

.inv-fy-status-text {
    font-size: 14px;
    color: #64748b;
    font-weight: 600;
}

.inv-fy-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.inv-fy-pill {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.inv-fy-pill:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.inv-fy-pill--active {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

.inv-fy-select-compact {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}

.inv-fy-select-compact:hover,
.inv-fy-select-compact:focus {
    border-color: #0284c7;
}

.inv-report-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

@media (max-width: 991px) {
    .inv-report-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.inv-report-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
}

.inv-report-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0284c7, #002d62);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.inv-report-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09);
    border-color: #cbd5e1;
}

.inv-report-card:hover::before {
    opacity: 1;
}

.inv-report-card__header {
    background: #ffffff;
    padding: 18px 22px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.inv-report-card__title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.inv-report-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inv-report-card__icon--blue   { background: #e0f2fe; color: #0284c7; }
.inv-report-card__icon--emerald{ background: #dcfce7; color: #059669; }
.inv-report-card__icon--purple { background: #f3e8ff; color: #9333ea; }
.inv-report-card__icon--amber  { background: #fef3c7; color: #d97706; }
.inv-report-card__icon--indigo { background: #e0e7ff; color: #4f46e5; }
.inv-report-card__icon--sky    { background: #e0f2fe; color: #0284c7; }
.inv-report-card__icon--rose   { background: #ffe4e6; color: #e11d48; }
.inv-report-card__icon--teal   { background: #ccfbf1; color: #0d9488; }
.inv-report-card__icon--blue   { background: #dbeafe; color: #2563eb; }

.inv-report-card__header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a !important;
    line-height: 1.3;
}

.inv-report-card__count {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.inv-report-card__body {
    display: grid;
    /* `1fr` is short for `minmax(auto, 1fr)`, and that `auto` minimum is the
       track's min-content width — so a tile holding a "PDF"/"Audio" badge
       refused to shrink below its badge and the four tracks together exceeded
       the card. The card's `overflow: hidden` then clipped Q3/Q4 clean off.
       `minmax(0, 1fr)` lets the tracks actually divide the space available. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 18px 16px;
    background: #fafbfc;
    flex: 1;
}

.inv-quarter-tile {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 6px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 96px;
    transition: all 0.2s ease;
}

.inv-quarter-tile--active {
    border-color: #cbd5e1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.inv-quarter-tile--active:hover {
    border-color: #0284c7;
    background: #f0f9ff;
    transform: translateY(-2px);
}

.inv-quarter-tile--empty {
    background: #f8fafc;
    border-style: dashed;
    border-color: #e2e8f0;
    opacity: 0.6;
}

.inv-quarter-badge {
    font-size: 12px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.inv-quarter-tile--empty .inv-quarter-badge {
    color: #94a3b8;
}

.inv-doc-badge-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    margin: 2px 0;
    max-width: 100%;
}

.inv-doc-badge-link--pdf {
    background: #fee2e2;
    color: #b91c1c !important;
    border: 1px solid #fecaca;
}

.inv-doc-badge-link--pdf:hover {
    background: #dc2626;
    color: #ffffff !important;
    border-color: #dc2626;
    transform: scale(1.05);
    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.3);
}

.inv-doc-badge-link--md {
    background: #ffe4e6;
    color: #e11d48 !important;
    border: 1px solid #fecdd3;
}

.inv-doc-badge-link--md:hover {
    background: #e11d48;
    color: #ffffff !important;
    border-color: #e11d48;
    transform: scale(1.05);
    box-shadow: 0 3px 8px rgba(225, 29, 72, 0.3);
}

.inv-doc-badge-link--audio {
    background: #dbeafe;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe;
}

.inv-doc-badge-link--audio:hover {
    background: #2563eb;
    color: #ffffff !important;
    border-color: #2563eb;
    transform: scale(1.05);
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3);
}

.inv-tile-empty-dash {
    font-size: 14px;
    color: #cbd5e1;
    font-weight: 600;
    margin: auto 0;
}

/* The quarter tile is the narrowest box in the section — roughly a quarter of
   the card, which at 320px is about 60px. Everything inside it has to be able
   to shrink or wrap, or it pushes the tile out and gets clipped. */
.inv-quarter-tile > div {
    min-width: 0;
    max-width: 100%;
}

.inv-doc-badge-link {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Financial reports: tighten the grid as the viewport narrows rather than
   letting four fixed tiles overflow the card. */
@media screen and (max-width: 767px) {
    .inv-report-card__header {
        padding: 14px 16px;
        align-items: flex-start;
    }
    .inv-report-card__header h3 { font-size: 15px; }
    .inv-report-card__body {
        padding: 14px 12px;
        gap: 8px;
    }
    .inv-quarter-tile {
        padding: 10px 4px;
        min-height: 84px;
    }
    .inv-doc-badge-link {
        padding: 5px 6px;
        gap: 3px;
    }
}

/* Below ~380px four columns cannot hold a legible badge, so fold to 2x2.
   Two readable tiles beat four clipped ones. */
@media screen and (max-width: 400px) {
    .inv-report-card__body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Very narrow phones: the icon is decorative, the title is not. */
@media screen and (max-width: 360px) {
    .inv-report-card__icon {
        width: 30px;
        height: 30px;
    }
    .inv-report-card__title-wrap { gap: 8px; }
    .inv-report-card__header h3 { font-size: 14px; }
}

/* The FY ribbon stacks so the year pills stay reachable without h-scrolling. */
@media screen and (max-width: 767px) {
    .inv-fy-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px 16px;
    }
    .inv-fy-summary { flex-wrap: wrap; }
    .inv-fy-controls { width: 100%; }
    .inv-fy-pill {
        flex: 1 1 auto;
        text-align: center;
        padding: 10px 12px;
    }
    .inv-fy-select-compact {
        flex: 1 1 100%;
        width: 100%;
        /* 16px keeps iOS Safari from zooming the page on focus. */
        font-size: 16px;
    }
}

/* --------------------------------------------------------------------------
   Matrix Table (ref3 Shareholding pattern)
   -------------------------------------------------------------------------- */

.inv-matrix-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.inv-matrix-table thead th {
    background: #0284c7;
    color: #ffffff !important;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 700;
}

.inv-matrix-table thead th:first-child {
    border-top-left-radius: 8px;
}

.inv-matrix-table thead th:last-child {
    border-top-right-radius: 8px;
}

.inv-matrix-table tbody tr {
    border-bottom: 1px solid #e2e8f0;
}

.inv-matrix-table tbody td,
.inv-matrix-table tbody th {
    padding: 16px 18px;
    vertical-align: middle;
}

#inv-content {
    scroll-margin-top: 130px;
}

@media (min-width: 768px) {
    .navbar-nav li.dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}