body {
            line-height: 1.4;
            background-color: var(--color-stone-40);
        }

        .page-wrapper {
            margin: 0 auto;
            background-color: transparent;
            position: relative;
            z-index: 2;
        }

        #main-header {
            background-color: transparent;
            color: white;
        }

        #portfolioSection {
            scroll-margin-top: 110px;
        }
        @media (min-width: 1024px) {
            #portfolioSection {
                scroll-margin-top: 150px;
            }
        }

        /* HERO */
        .hero-graphic-overlay {
            position: absolute;
            top: 0;
            right: 0;
            height: 50%;
            width: auto;
            max-width: 60%;
            pointer-events: none;
            z-index: 5;
            opacity: 0.3;
            object-fit: contain;
        }

        #hero-visuals {
            will-change: opacity;
            transition: opacity 0.1s linear;
        }

#hero-bg {
    will-change: transform;
    background-color: var(--azimut-navy);
/*    background-image: url('/uploads/defaults/investment-options-hero.png');*/
    background-blend-mode: luminosity;
    filter: contrast(0.9) brightness(1);
}



        /* FILTER CHIPS - this page uses a pill style, deliberately different
           from the tab-underline .filter-btn style in site.css, so this
           overrides it (loaded after site.css via PageStyles). */
        .filter-btn {
            transition: all 0.3s ease;
            border: 1px solid rgba(0,0,0,0.1);
            white-space: nowrap;
        }
        .filter-btn.active {
            background-color: var(--azimut-navy);
            color: white;
            border-color: var(--azimut-navy);
        }

        /* PORTFOLIO TABLE & EXPANSION */
        .portfolio-table {
            border-collapse: separate;
            border-spacing: 0 8px;
        }
        /* Sticky column headings - pinned under the fixed site header (see
           #main-header in Header.ascx) rather than scrolling away with the
           rows. --header-h is kept live by Site.Master's updateHeaderHeight()
           as the header shrinks on scroll, so this tracks it automatically
           instead of hard-coding an offset that'd go stale if the header's
           height ever changes. Moot on mobile, where thead is display:none
           (see below) in favour of the stacked card layout. */
        .portfolio-table thead {
            position: sticky;
            top: var(--header-h, 96px);
            z-index: 30;
        }
        /* position:sticky silently no-ops on a descendant of any ancestor
           with overflow-x set (overflow-x:auto forces overflow-y to an
           implicit non-visible value too, per the CSS Overflow spec, which
           is enough to break it here even though #portfolioSection
           .overflow-x-auto never actually needs a scrollbar at this width).
           The wrapper only exists so portfolio-table's min-w-[1000px] can
           scroll horizontally below that width - lg: (1024px, matching the
           breakpoint already used elsewhere on this page) and up, the table
           always fits, so drop overflow-x there and let the sticky thead
           work. Below that the header simply scrolls away with the table,
           same as before this change. */
        @media (min-width: 1024px) {
            #portfolioSection .overflow-x-auto {
                overflow-x: visible;
            }
        }
        .portfolio-row {
            transition: background-color 0.3s ease;
            background-color: white;
            cursor: pointer;
        }
        .portfolio-row:hover {
            background-color: #fafafa;
        }
        .portfolio-row.active {
            background-color: #fff;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }
        .portfolio-cell {
            padding: 24px;
            border-top: 1px solid #f0f0f0;
            border-bottom: 1px solid #f0f0f0;
            font-size: 14px;
        }

            .portfolio-cell span {
                font-size: 14px;
            }

            .portfolio-cell:first-child {
                border-left: 1px solid #f0f0f0;
                border-radius: 4px 0 0 4px;
            }
        .portfolio-cell:last-child {
            border-right: 1px solid #f0f0f0;
            border-radius: 0 4px 4px 0;
        }
        /* Return columns (1 month ... since inception) in the summary row -
           tighter padding than the other cells so all seven fit. */
        .th-return {
            padding: 16px 8px;
            text-align: center;
        }
        .portfolio-cell.cell-return {
            padding: 24px 8px;
            text-align: center;
            white-space: nowrap;
            font-weight: 600;
            color: #372C8A;
        }
        /* Desktop: Classification / Time Frame are mobile-card only now (no
           th for them), and below lg the table scrolls sideways via
           .overflow-x-auto rather than squeezing 11 columns. */
        @media (min-width: 768px) {
            .portfolio-table {
                min-width: 940px;
            }
            .portfolio-cell.cell-classification,
            .portfolio-cell.cell-timeframe {
                display: none;
            }
            /* Same weight / colour as the return columns beside it */
            .portfolio-cell.cell-growth {
                font-weight: 600;
                color: #372C8A;
            }
        }
        /* Compact columns for small laptops / landscape tablets, so the
           portfolio name keeps a usable width next to the return columns. */
        @media (min-width: 768px) and (max-width: 1279px) {
            .portfolio-table thead th {
                padding-left: 12px;
                padding-right: 12px;
                letter-spacing: 0.1em;
            }
            .portfolio-table thead th.th-return {
                padding-left: 6px;
                padding-right: 6px;
            }
            .portfolio-cell {
                padding: 20px 12px;
            }
            .portfolio-cell.cell-return {
                padding: 20px 6px;
            }
        }
        .details-row {
            display: none;
            background-color: white;
        }
        .details-row.open {
            display: table-row;
        }
        /* Search's .hidden (applyFilters()) has to beat .details-row.open and
           the mobile card layout's display block/flex on tr, both of which
           outrank Tailwind's plain .hidden. */
        #portfolioList tr.hidden {
            display: none;
        }
        .details-content {
            padding: 30px;
            border: 1px solid #f0f0f0;
            border-top: none;
            border-radius: 0 0 4px 4px;
            background: linear-gradient(to bottom, #ffffff, #fcfcfc);
        }
        .risk-badge {
            font-size: 10px;
            font-weight: 700;
            padding: 4px 8px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            border-radius: 2px;
        }
        .metric-card {
            border-left: 2px solid var(--color-rise);
            padding-left: 12px;
        }
        .chevron-icon {
            transition: transform 0.3s ease;
        }
        .portfolio-row.active .chevron-icon {
            transform: rotate(180deg);
        }
        /* Mobile-only pieces of the portfolio card (shown in the mobile
           block below). */
        .pdf-link-mobile,
        .allocation-mobile,
        .portfolio-detail-arrow,
        .estimated-cost-link-mobile,
        .group-toggle {
            display: none;
        }

        /* Group heading "Reports & Documents" summary - collapsed by default,
           toggled by toggleGroupSummary(). grid-template-rows 0fr -> 1fr
           animates to the content's natural height without a fixed max-height. */
        .group-summary-toggle {
            cursor: pointer;
        }
        .group-summary-toggle:hover {
            color: var(--azimut-navy);
        }
        .group-summary-body {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.3s ease;
        }
        .group-summary-inner {
            overflow: hidden;
        }
        /* Gap between the toggle and the expanded content. A margin (not
           padding on .group-summary-inner) so it collapses away to 0 too -
           grid items keep their padding even at 0fr. */
        .group-summary-inner > :first-child {
            margin-top: 0.5rem;
        }
        .group-summary.open .group-summary-body {
            grid-template-rows: 1fr;
        }
        .group-summary.open .group-summary-toggle .chevron-icon {
            transform: rotate(180deg);
        }


    .portfolio-group-summary a:hover {text-decoration:underline;}

        /* MOBILE PORTFOLIO CARDS - below this width the table is re-laid-out
           as stacked cards (table/tr/td forced to display:block/flex) instead
           of horizontally scrolling, so every column is reachable without a
           sideways swipe. The row's onclick/toggleDetails() and chevron are
           unchanged - they don't care about display mode - and the details
           panel already stacks to 1 column below lg via its own
           grid-cols-1 lg:grid-cols-3 classes, so only the summary row/table
           chrome needs overriding here. Row/detail spacing reuses the
           .active/.open classes toggleDetails() already sets, so a card's
           bottom margin collapses to 0 while its details panel is open
           (avoiding a visible gap between a row and its own expanded panel). */
        @media (max-width: 767px) {
            #portfolioSection .overflow-x-auto {
                overflow-x: visible;
            }
            .portfolio-table {
                min-width: 0;
                border-spacing: 0;
                width: 100%;
            }
            .portfolio-table thead {
                display: none;
            }
            .portfolio-table, .portfolio-table tbody, .portfolio-table tr, .portfolio-table td {
                display: block;
                width: 100%;
            }
            /* Card chrome per Figma: square corners, 1px lilac border, no
               shadow. The row and its details row are separate elements, so
               an open card drops the row's bottom border and the details
               panel carries the sides + bottom (see .details-content below). */
            tr.portfolio-row {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                margin-bottom: 16px;
                border: 1px solid rgba(204, 181, 236, 0.5);
                border-radius: 0;
                box-shadow: none;
            }
            .portfolio-row.active {
                margin-bottom: 0;
                border-bottom: none;
                box-shadow: none;
            }
            /* 6px top/bottom on the fact cells gives Figma's 12px between
               Classification / Time Frame / Monthly Report. */
            .portfolio-cell {
                border: none !important;
                border-radius: 0 !important;
                padding: 6px 20px;
            }
            /* Name cell shares the first line with the chevron cell (both
               order 1, source order puts the chevron after it). min-width:0
               lets long names wrap instead of pushing the chevron off. */
            .portfolio-cell:first-child {
                order: 1;
                flex: 1 1 0;
                min-width: 0;
                padding: 20px 6px 20px 20px;
            }
            .portfolio-row.active .portfolio-cell:first-child {
                padding-bottom: 18px;
            }
            .portfolio-cell:first-child a {
                font-family: 'Jost', sans-serif;
                font-size: 18px;
                line-height: 24px;
                letter-spacing: -0.45px;
                color: #372C8A;
            }
            .portfolio-cell.cell-classification span,
            .portfolio-cell.cell-timeframe span {
                font-family: 'Barlow', sans-serif;
                font-size: 14px;
                line-height: 22px;
                font-weight: 400;
                color: #4A4854;
            }
            /* Classification, Time Frame and Monthly Report each take a full
               width line, label (::before) on the left, value on the right.
               Growth / Defensive is hidden on mobile - the details panel
               already shows the growth/defensive split. */
            .portfolio-cell.cell-classification,
            .portfolio-cell.cell-timeframe,
            .portfolio-cell.cell-report {
                flex: 1 1 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 16px;
                text-align: right;
            }
            /* The summary-row return columns are desktop only - mobile shows
               returns in the details panel's cards. */
            .portfolio-cell.cell-growth,
            .portfolio-cell.cell-return {
                display: none;
            }
            /* Collapsed cards show only the name + chevron; Classification,
               Time Frame and Monthly Report appear once toggleDetails() marks
               the row .active. */
            .portfolio-row:not(.active) .portfolio-cell.cell-classification,
            .portfolio-row:not(.active) .portfolio-cell.cell-growth,
            .portfolio-row:not(.active) .portfolio-cell.cell-timeframe,
            .portfolio-row:not(.active) .portfolio-cell.cell-report {
                display: none;
            }
            .portfolio-cell.cell-classification { order: 2; }
            .portfolio-cell.cell-growth { order: 3; }
            .portfolio-cell.cell-timeframe { order: 4; }
            .portfolio-cell.cell-report { order: 5; }
            /* Chevron cell - kept on the name's line to its right. */
            .portfolio-cell.cell-chevron {
                order: 1;
                flex: 0 0 auto;
                width: auto;
                text-align: center;
                padding: 20px 20px 20px 6px;
            }
            /* Zero-height line break after name + chevron (order 1, last in
               source order) so the expanded fact cells always start a new line
               rather than squeezing in beside the name. */
            tr.portfolio-row::after {
                content: "";
                order: 1;
                flex-basis: 100%;
                height: 0;
            }
            .portfolio-cell.cell-classification::before,
            .portfolio-cell.cell-growth::before,
            .portfolio-cell.cell-timeframe::before,
            .portfolio-cell.cell-report::before {
                flex-shrink: 0;
                text-align: left;
                font-family: barlow;
                font-size: 12px;
                line-height: 16px;
                font-weight: 400;
                text-transform: uppercase;
                letter-spacing: 1.2px;
                color: #666B7A;
            }
            .portfolio-cell.cell-classification::before { content: "Classification"; }
            .portfolio-cell.cell-growth::before { content: "Growth / Defensive"; }
            .portfolio-cell.cell-timeframe::before { content: "Time Frame"; }
            .portfolio-cell.cell-report::before { content: "Monthly Report"; text-align: left;}
            tr.details-row {
                display: none;
            }
            tr.details-row.open {
                display: block;
                margin-bottom: 16px;
            }
            .details-row td {
                padding: 0;
            }
            /* 14px top + the Monthly Report cell's 6px = 20px above the
               divider. Background flat white to match the row above it. */
            .details-content {
                border: 1px solid rgba(204, 181, 236, 0.5);
                border-top: none;
                border-radius: 0;
                background: #fff;
                padding: 14px 20px 24px;
            }
            /* Figma's 20px rhythm between sections, replacing the desktop
               grid's gap-12 / space-y-8. */
            .details-content > .grid {
                gap: 20px;
            }
            .details-content .space-y-8 > :not([hidden]) ~ :not([hidden]) {
                margin-top: 20px;
            }
            /* Every panel heading in the Figma "eyebrow" style (Total Returns
               already had it via .total-returns h5 further down). */
            .details-content h5 {
                font-family: 'Barlow', sans-serif;
                font-size: 14px;
                line-height: 16px;
                font-weight: 700;
                letter-spacing: 1.4px;
                text-transform: uppercase;
                color: #372C8A;
                margin-bottom: 8px;
            }
            .details-content .total-returns h5 {
                margin-bottom: 20px;
            }
            .details-content [id*='lblInvestmentObjectiveShort'],
            .details-content [id*='lblEstimatedTotalCost'] {
                font-family: 'Barlow', sans-serif;
                font-size: 14px;
                line-height: 22px;
                color: #4A4854;
            }
            /* Divider between the row's Monthly Report line and the details
               panel's Total Returns heading, inset to the content width. */
            .details-content::before {
                content: "";
                display: block;
                height: 1px;
                background-color: rgba(204, 181, 236, 0.5); /* #CCB5EC @ 50% */
                margin-bottom: 20px;
            }

            /* Monthly Report: "PDF" + download icon text link in place of
               the navy square icon button. */
            .portfolio-cell .pdf-icon {
                width: auto;
                height: auto;
                background-color: transparent !important;
            }
            .pdf-icon-glyph {
                display: none;
            }
            .pdf-link-mobile {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 12px 8px 12px 0;
                font-family: 'Barlow', sans-serif;
                font-size: 14px;
                line-height: 16px;
                font-weight: 700;
                letter-spacing: 1.4px;
                text-transform: uppercase;
                color: #372C8A;
                transition: color 0.3s ease;
            }
            .pdf-link-mobile i {
                font-size: 16px;
            }
            a:hover .pdf-link-mobile {
                color: var(--color-dusk);
            }

            /* Returns grid: Figma's 12px gap, with Since Inception as a
               full-width card under the six period cards. */
            .total-returns .grid {
                gap: 12px;
            }
            .details-content .space-y-8 > .inception-growth-wrapper:not([hidden]) {
                margin-top: 12px;
                padding-top: 0;
                border-top: none;
            }
            .inception-growth-wrapper > .flex > div:first-child {
                flex: 1 1 auto;
                display: flex;
                flex-direction: column;
                gap: 4px;
                padding: 16px;
                border: 1px solid rgba(204, 181, 236, 0.5);
            }
            .details-content .inception-growth-wrapper h5 {
                margin: 0;
                color: #E88C5B;
            }
            .details-content [id*='lblSinceInceptionPerc'] {
                font-family: 'Jost', sans-serif;
                font-size: 20px;
                line-height: 28px;
                font-weight: 700;
                letter-spacing: -0.5px;
                text-transform: uppercase;
                color: #372C8A;
            }
            .growth-defensive-desktop {
                display: none;
            }

            /* Growth / Defensive donut (pnlAllocationMobile). --growth is the
               growth percentage, set server-side. */
            .allocation-mobile {
                display: block;
            }
            .details-content .allocation-mobile h5 {
                margin-bottom: 16px;
            }
            .allocation-donut-wrap {
                display: flex;
                align-items: center;
                gap: 24px;
            }
            .allocation-donut {
                flex-shrink: 0;
                width: 112px;
                height: 112px;
                border-radius: 50%;
                background: conic-gradient(#CCB5EC calc(var(--growth, 0) * 1%), #EAE3F7 0);
                -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15px));
                mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15px));
            }
            .allocation-legend {
                display: flex;
                flex-direction: column;
                gap: 12px;
                list-style: none;
                margin: 0;
                padding: 0;
            }
            .allocation-legend li {
                display: flex;
                align-items: center;
                gap: 10px;
                font-family: 'Barlow', sans-serif;
                font-size: 14px;
                line-height: 22px;
                color: #4A4854;
            }
            .allocation-swatch {
                width: 12px;
                height: 12px;
                border-radius: 2px;
            }
            .allocation-swatch-growth { background-color: #CCB5EC; }
            .allocation-swatch-defensive { background-color: #EAE3F7; }
            .allocation-legend .allocation-value {
                font-family: 'Jost', sans-serif;
                font-size: 16px;
                line-height: 22px;
                font-weight: 700;
                letter-spacing: -0.2px;
                color: #372C8A;
            }

            /* Portfolio Details: full-width indigo button with arrow. The
               anchor has an inline background, hence !important (and the
               hover re-stated, as this beats site.css's .btn-orange-hover). */
            .details-content [id*='aPortfolioDetail'] {
                display: flex;
                align-self: stretch;
                justify-content: center;
                gap: 8px;
                margin-top: 20px;
                padding: 16px 24px;
                font-family: 'Barlow', sans-serif;
                font-size: 14px;
                line-height: 16px;
                font-weight: 700;
                letter-spacing: 1.4px;
                text-transform: uppercase;
                color: #fff;
                background-color: #372C8A !important;
            }
            .details-content [id*='aPortfolioDetail']:hover {
                background-color: var(--color-dusk) !important;
            }
            .portfolio-detail-arrow {
                display: inline-block;
                font-size: 16px;
            }

            /* Estimated Total Cost: the CMS heading + HTML give way to a
               "View estimated total cost" text link under the button
               (aEstimatedTotalCostMobile, only rendered when the HTML has a
               URL). Arrow nudges 8px right on hover, per Figma. */
            .details-content .estimated-cost-heading,
            .details-content [id*='lblEstimatedTotalCost'] {
                display: none;
            }
            .estimated-cost-link-mobile {
                display: inline-flex;
                align-items: center;
                align-self: center;
                gap: 8px;
                margin-top: 12px;
                padding: 12px 8px 12px 0;
                font-family: 'Barlow', sans-serif;
                font-size: 14px;
                line-height: 16px;
                font-weight: 700;
                letter-spacing: 1.4px;
                text-transform: uppercase;
                color: #E88C5B;
            }
            .estimated-cost-link-mobile i {
                font-size: 16px;
                transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
            }
            .estimated-cost-link-mobile:hover i {
                transform: translateX(8px);
            }

            /* Group accordion - "N Portfolios" + chevron under each
               classification heading (toggleGroup() in the page script).
               Collapse is ignored while searching so matches always show. */
            .group-toggle {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                padding: 12px 0 4px;
                background: none;
                border: 0;
                cursor: pointer;
                font-family: 'Barlow', sans-serif;
                font-size: 14px;
                line-height: 22px;
                color: #4A4854;
                text-align: left;
            }
            .group-toggle .chevron-icon {
                font-size: 20px;
                color: #372C8A;
            }
            .portfolio-group-heading:not(.group-collapsed) .group-toggle .chevron-icon {
                transform: rotate(180deg);
            }
            #portfolioList:not(.searching) tr.group-hidden,
            #portfolioList:not(.searching) .portfolio-group-heading.group-collapsed .group-summary {
                display: none;
            }
            #portfolioList.searching .group-toggle {
                display: none;
            }
        }


/*  Portfolio Folio List page. 
    Different style for mobile only */
@media (max-width: 767px) {
    .metric-card {
        padding: 16px;
        border: solid 1px rgba(204, 181, 236, 0.5);
    }
    .metric-card span { text-transform: uppercase; }

    .metric-card span:first-child {
        font-weight: 700;
        line-height: 16px;
        font-size: 14px;
        font-family: barlow;
        color: #E88C5B;
     }

    .metric-card span:nth-of-type(2) {
        font-family: 'Jost', sans-serif;
        font-size: 20px;
        line-height: 28px;
        letter-spacing: -0.5px;
        color: #372C8A;
    }

    .total-returns h5 {
        color: #372C8A;
        line-height: 16px;
        font-size: 14px;
        letter-spacing: 1.4px;
        font-weight: 700;
        font-family: barlow;
    }

    div[id*='_rptPortfolioList_pnlAsOfDate_'] {
        display: none;
    }
}