/*
 * SIMP2SDM — global stylesheet for the new frontend.
 * Order: local fonts → shared foundations/components → homepage → about page → contact page → infographic catalogue.
 * Use the frontend-2026 body class and the shared Blade layout on new pages.
 * Add new page sections here with scoped selectors; do not add per-page CSS files.
 */

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url('../fonts/source-sans-3/source-sans-3-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 200 900;
    font-display: swap;
    src: url('../fonts/source-sans-3/source-sans-3-italic.woff2') format('woff2');
}

/* Global foundations: typography, colors, page shell, and shared components. */
.frontend-2026 {
    --ui-forest:#004e3c;
    --ui-deep:#003e31;
    --ui-ink:#193e35;
    --ui-muted:#61756e;
    --ui-paper:#f5f9f4;
    --ui-green:#94ce77;
    --ui-font-family:"Source Sans 3",Arial,sans-serif;
    /* Shared role-based scale. Mobile changes tokens, not component hierarchies. */
    --ui-text-small:14px;
    --ui-text-label:16px;
    --ui-text-body:18px;
    --ui-text-card:22px;
    --ui-text-subheading:24px;
    --ui-text-section:30px;
    --ui-text-title:38px;
    --ui-text-hero:clamp(34px,3.8vw,56px);
    --ui-text-metric:42px;
    --ui-text-summary:26px;
    --ui-weight-body:400;
    --ui-weight-label:500;
    --ui-weight-heading:600;
    --ui-weight-emphasis:700;
    --ui-font-size: var(--ui-text-body);
    --ui-line-height:1.65;
    margin:0;
    background:var(--ui-paper);
    color:var(--ui-ink);
    font-family:var(--ui-font-family);
    font-size:var(--ui-font-size);
    font-weight:var(--ui-weight-body);
    line-height:var(--ui-line-height);
    -webkit-font-smoothing:antialiased
}
.frontend-2026 *, .frontend-2026 *::before,.frontend-2026 *::after {
    box-sizing:border-box
}
.frontend-2026 h1,.frontend-2026 h2,.frontend-2026 h3,.frontend-2026 p {
    margin:0
}
.frontend-2026 a {
    color:inherit;
    text-decoration:none
}
.frontend-2026 button,.frontend-2026 input {
    font:inherit;
    font-weight:var(--ui-weight-label)
}
/* Native controls and Bootstrap detail headings share the same family. */
.frontend-2026 :where(h1,h2,h3,h4,h5,h6) {
    font-family:var(--ui-font-family);
    font-weight:var(--ui-weight-heading);
}
.frontend-2026 :where(select,textarea,button,input) {
    font-family:var(--ui-font-family);
    font-weight:var(--ui-weight-label);
}
.frontend-2026 :where(.home-statistic>strong,.catalog-card-summary>strong,.table) {
    font-variant-numeric:tabular-nums;
}
.frontend-2026 img {
    max-width:100%
}
.frontend-2026 a,.frontend-2026 button {
    -webkit-tap-highlight-color:transparent
}
.frontend-2026 :focus-visible {
    outline:3px solid #b98124;
    outline-offset:5px
}
.home-container {
    width:min(1320px,calc(100% - 96px));
    margin-inline:auto
}
.home-sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
.home-skip {
    position:fixed;
    left:20px;
    top:-80px;
    padding:12px 20px;
    background:white;
    z-index:100
}
.home-skip:focus {
    top:12px
}
.home-header {
    position:relative;
    z-index:20;
    background:#f9fcf7
}
.home-header-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    min-height:104px
}
.home-brand {
    display:flex;
    gap:12px;
    align-items:center;
    flex-shrink:0;
    line-height:1.3
}
.home-brand img {
    object-fit:contain
}
.home-brand strong {
    font-weight: var(--ui-weight-emphasis);
    display:block;
    font-size: 26px;
    letter-spacing:-.7px;
    color:#155c47
}
.home-brand small {
    display:block;
    font-size: var(--ui-text-small);
    font-weight: var(--ui-weight-label);
    margin-top:3px
}
.home-navigation {
    display:flex;
    align-items:center;
    gap:23px;
    font-size: var(--ui-text-label);
    font-weight: var(--ui-weight-label)
}
.home-navigation>a {
    padding:10px 0;
    white-space:nowrap;
    transition:color .2s
}
.home-navigation>a:hover,.home-navigation>.is-active {
    color:#19825c
}
.home-navigation>.home-login {
    display:flex;
    gap:6px;
    align-items:center;
    border:1px solid #d6e5dc;
    border-radius:30px;
    padding:8px 13px;
    color:#155c47
}
.home-menu-toggle {
    display:none;
    color:var(--ui-forest);
    background:transparent;
    border:1px solid #dae6dc;
    border-radius:9px;
    font-size:28px;
    line-height:1;
    padding:9px;
    cursor:pointer
}
.home-service-nav {
    background:var(--ui-forest);
    color:#eaf6ec
}
.home-service-nav>.home-container {
    display:flex;
    justify-content:space-between;
    gap:28px;
    overflow-x:auto;
    scrollbar-width:thin
}
.home-service-nav a {
    display:flex;
    align-items:center;
    gap:13px;
    white-space:nowrap;
    font-size: var(--ui-text-label);
    padding:13px 0
}
.home-service-nav a:hover {
    color:#b5e396
}
.home-service-nav i {
    font-size:13px;
    opacity:.75
}
.home-hero {
    position:relative;
    color:white;
    background:#274c33;
    isolation:isolate
}
.home-hero-slides {
    position:absolute;
    inset:0;
    z-index:-2;
    overflow:hidden;
}
.home-hero-slide {
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .85s ease;
}
.home-hero-slide.is-active {
    opacity:1;
}
.home-hero-slide img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}
.home-hero::before {
    content:'';
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(90deg,rgba(0,26,16,.81) 0%,rgba(0,28,15,.55) 50%,rgba(0,25,14,.13) 100%),linear-gradient(0deg,rgba(1,37,21,.34),transparent 70%)
}
.home-hero-inner {
    padding-block:32px 52px
}
@media (min-width:801px) {
    .home-hero {
        display:grid;
        align-items:center;
        min-height:660px;
    }
}
.home-eyebrow {
    display:block;
    font-size: var(--ui-text-small);
    font-weight: var(--ui-weight-label);
    letter-spacing:1.7px;
    color:var(--ui-green);
    margin-bottom:18px
}
.home-hero .home-eyebrow { margin-bottom:12px; }
.home-hero h1 {
    font-family:var(--ui-font-family);
    font-size: var(--ui-text-hero);
    line-height:1.14;
    font-weight: var(--ui-weight-emphasis);
    letter-spacing:-.4px;
    max-width:1080px;
    text-wrap:balance
}
.home-hero h1 em {
    font-style:normal;
    color:#99d67b
}
.home-hero p {
    max-width:760px;
    font-size: var(--ui-text-body);
    line-height:1.65;
    margin-top:18px;
    color:#edf1e9
}
.home-search {
    display:flex;
    align-items:center;
    gap:12px;
    max-width:635px;
    min-height:59px;
    margin-top:26px;
    background:#fff;
    color:#7c8b82;
    border-radius:32px;
    overflow:hidden;
    padding-left:23px;
    border:1px solid rgba(255,255,255,.65)
}
.home-search>i {
    font-size:18px
}
.home-search input {
    min-width:0;
    flex:1;
    width:100%;
    padding:14px 0;
    border:0;
    background:white;
    font-size: var(--ui-text-label);
    color:var(--ui-ink);
    outline:none
}
.home-search input::placeholder {
    color:#829087
}
.home-search:focus-within {
    box-shadow:0 0 0 4px rgba(148,206,119,.5)
}
.home-search button {
    align-self:stretch;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 25px;
    border:0;
    border-left:1px solid #98b6a4;
    background:#116345;
    color:white;
    cursor:pointer;
    font-size: var(--ui-text-label)
}
.home-search button:hover {
    background:#004e3c
}
.home-hero-caption {
    display:flex;
    align-items:center;
    gap:9px;
    font-size: var(--ui-text-small);
    color:#d2ddcc;
    margin-top:22px;
    letter-spacing:.2px
}
.home-hero-caption>span {
    width:5px;
    height:5px;
    background:#a3d98a;
    border-radius:50%
}
.home-content {
    padding-top:48px;
    padding-bottom:48px
}
.home-categories {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:18px;
    margin-bottom:40px
}
.home-category {
    position:relative;
    display:flex;
    flex-direction:column;
    padding:29px 25px 25px;
    border-radius:24px;
    overflow:hidden;
    min-height:246px;
    transition:transform .2s,box-shadow .2s;
    background:#e7f3ed;
    border:1px solid rgba(255,255,255,.8)
}
.home-category::after,.home-access-card::after {
    content:'';
    position:absolute;
    width:135px;
    height:135px;
    border:23px solid rgba(255,255,255,.18);
    border-radius:50%;
    right:-38px;
    top:-28px;
    pointer-events:none
}
.home-category-icon {
    font-size:26px;
    line-height:1;
    color:#4e836e;
    margin-bottom:18px
}
.home-category h2 {
    font-size: var(--ui-text-card);
    line-height: 1.3;
    letter-spacing: -.02em;
    font-weight: var(--ui-weight-heading);
    position:relative
}
.home-category p {
    font-size: var(--ui-text-body);
    color:var(--ui-muted);
    line-height:1.7;
    margin:13px 0 25px
}
.home-card-link {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:auto;
    font-size: var(--ui-text-label);
    font-weight: var(--ui-weight-label)
}
.home-card-link i {
    transition:transform .2s
}
.home-category:hover,.home-access-card:hover,.home-publication-card:hover {
    transform:translateY(-4px);
    box-shadow:0 12px 24px #21482f0b
}
.home-category:hover .home-card-link i,.home-publication-card:hover .home-card-link i {
    transform:translateX(4px)
}
.home-category-psrnbng {
    background:#e6f2e9
}
.home-category-ppglhk {
    background:#faf3e1
}
.home-category-psdklt {
    background:#e3f1f6;
    color:#265773
}
.home-category-dkmn {
    background:#edebf6;
    color:#4b496e
}
.home-category-ppglhk .home-category-icon {
    color:#aa8c3c
}
.home-category-psdklt .home-category-icon {
    color:#518ba5
}
.home-category-dkmn .home-category-icon {
    color:#8981a7
}
.home-overview {
    display:grid;
    grid-template-columns:360px 1fr;
    min-height:315px;
    border-radius:24px;
    background:linear-gradient(110deg,#edf4e9,#f9fbf6);
    overflow:hidden;
    margin-bottom:48px
}
.home-leaf-panel {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:linear-gradient(125deg,#00613e,#003f30);
    color:white
}
.home-leaf-panel::before,.home-leaf-panel::after {
    content:'';
    position:absolute;
    z-index:-1;
    width:115px;
    height:280px;
    right:-30px;
    bottom:-80px;
    border-radius:100% 0 100% 0;
    background:#adc57926;
    transform:rotate(-30deg)
}
.home-leaf-panel::before {
    right:35px;
    bottom:-115px;
    background:#82b57420;
    transform:rotate(15deg)
}
.home-overview-intro {
    padding:35px 33px;
    border-radius:24px 65px 65px 24px
}
.home-overview-intro .home-eyebrow {
    font-size: var(--ui-text-small);
    margin-bottom:12px
}
.home-overview-intro h2 {
    font-size: var(--ui-text-section);
    line-height: 1.3;
    letter-spacing: -.02em
}
.home-overview-intro p {
    font-size: var(--ui-text-body);
    line-height:1.8;
    color:#e0ece1;
    margin-block:15px 23px;
    max-width:270px
}
.home-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    border-radius:25px;
    line-height:1.5;
    font-size: var(--ui-text-label);
    font-weight: var(--ui-weight-label);
    padding:11px 20px;
    transition:background .2s
}
.home-button-outline {
    border:1px solid #84bca1;
    background:#ffffff08;
    color:white
}
.home-button-outline:hover {
    background:#ffffff18
}
.home-statistics {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    align-items:center;
    padding:27px 26px 20px 20px
}
.home-statistic {
    padding:12px;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-self:stretch;
    justify-content:center
}
.home-statistic h3 {
    font-size: var(--ui-text-label);
    color:#273b32;
    font-weight: var(--ui-weight-label);
    white-space:nowrap
}
.home-statistic>strong {
    font-size: var(--ui-text-metric);
    line-height:1.4;
    font-weight: var(--ui-weight-emphasis);
    letter-spacing:-2px;
    margin-top:12px;
    color:#1f3027
}
.home-statistic>p {
    font-size: var(--ui-text-small);
    color:var(--ui-muted);
    line-height:1.5;
    margin-top:4px;
    min-height:30px
}
.home-statistic-art {
    display:block;
    width:100%;
    height:65px;
    margin-top:22px;
    color:#7da38d;
    --statistic-fill:#91caa4;
}
.home-statistic-art svg {
    display:block;
    width:100%;
    height:100%;
    overflow:visible;
}
.home-statistic-fill-top {
    stop-color:var(--statistic-fill);
    stop-opacity:.58;
}
.home-statistic-fill-bottom {
    stop-color:var(--statistic-fill);
    stop-opacity:0;
}
.home-statistic-line {
    fill:none;
    stroke:currentColor;
    stroke-width:1.8px;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
}
.home-statistic-blue .home-statistic-art {
    color:#829fb6;
    --statistic-fill:#9dc6e6
}
.home-statistic-gold .home-statistic-art {
    color:#cbb787;
    --statistic-fill:#efd495
}
.home-statistic-purple .home-statistic-art {
    color:#a48bbc;
    --statistic-fill:#c8a9e3
}
.home-section {
    margin-bottom:43px
}
.home-section-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:23px
}
.home-heading-label {
    display:flex;
    gap:16px;
    align-items:center
}
.home-heading-icon {
    display:flex;
    justify-content:center;
    align-items:center;
    width:40px;
    height:40px;
    color:#fff;
    background:#0a6a4e;
    border-radius:12px;
    font-size:24px;
    flex-shrink:0
}
.home-section-heading h2 {
    font-size: var(--ui-text-section);
    font-weight: var(--ui-weight-heading);
    letter-spacing: -.02em;
    line-height: 1.3
}
.home-section-heading p {
    font-size: var(--ui-text-body);
    color:var(--ui-muted);
    margin-top:4px
}
.home-text-link {
    display:inline-flex;
    gap:22px;
    align-items:center;
    font-size: var(--ui-text-label);
    font-weight: var(--ui-weight-label);
    white-space:nowrap
}
.home-text-link:hover {
    color:#19825c
}
.home-access-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:23px
}
.home-access-card {
    position:relative;
    border-radius:24px;
    background:#eaf4f0;
    padding:27px 30px;
    transition:transform .2s,box-shadow .2s;
    overflow:hidden
}
.home-access-icon {
    position:absolute;
    right:25px;
    top:25px;
    font-size:44px;
    color:#d5e9df
}
.home-access-card h3 {
    font-size: var(--ui-text-card);
    font-weight: var(--ui-weight-heading);
    margin-bottom:12px
}
.home-access-card p {
    font-size: var(--ui-text-body);
    color:var(--ui-muted);
    max-width:260px;
    min-height:56px;
    margin-bottom:22px;
    position:relative
}
.home-button-light {
    background:#f6fbf7;
    box-shadow:0 3px 9px #164d2e08;
    font-size: var(--ui-text-label);
    padding:9px 16px
}
.home-access-card:hover .home-button-light {
    background:#fff
}
.home-publication-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:22px
}
.home-publication-card {
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:220px;
    border-radius:24px;
    background:#eaf4ed;
    padding:26px;
    transition:transform .2s,box-shadow .2s
}
.home-publication-cover {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    aspect-ratio:4 / 3;
    margin-bottom:20px;
    overflow:hidden;
    border-radius:12px;
    background:#ffffff;
}
.home-publication-cover>a {
    display:block;
    width:100%;
    height:100%;
}
.home-publication-actions { margin-top:auto; }
.home-publication-cover img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}
.home-publication-cover-placeholder {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    padding:16px;
    text-align:center;
    font-size:var(--ui-text-small);
    color:var(--ui-muted);
}
.home-publication-cover-placeholder i {
    font-size:var(--ui-text-section);
    color:var(--ui-green);
}
.home-publication-tag {
    font-size: var(--ui-text-label);
    font-weight: var(--ui-weight-label);
    color:#22694e;
    margin-bottom:14px
}
.home-publication-year {
    font-size: var(--ui-text-small);
    color:var(--ui-muted);
    margin-bottom:8px
}
.home-publication-card h3 {
    font-size: var(--ui-text-card);
    font-weight: var(--ui-weight-heading);
    line-height: 1.3;
    overflow-wrap:anywhere;
    margin-bottom:17px
}
.home-publication-card p {
    font-size: var(--ui-text-body);
    color:var(--ui-muted);
    margin-bottom:20px
}
.home-publication-card .home-card-link {
    font-size: var(--ui-text-label)
}
.home-bottom-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px
}
.home-cta {
    display:flex;
    align-items:center;
    padding:32px 34px 32px 112px;
    min-height:270px;
    border-radius:24px;
    border:1px solid #ffffff18;
    background:linear-gradient(135deg,var(--ui-forest),var(--ui-deep));
}
.home-cta h2 {
    font-size:var(--ui-text-subheading);
    line-height:1.4;
    font-weight:var(--ui-weight-heading);
    letter-spacing:-.02em;
    margin-bottom:24px;
    max-width:430px;
}
.frontend-2026 .home-button-white {
    background:#f5fbf4;
    color:var(--ui-forest)
}
.frontend-2026 .home-button-white:hover {
    background:#dcf3d2
}
.home-quick-info {
    background:#e8f3ec;
    border-radius:24px;
    padding:30px 35px
}
.home-quick-info h2 {
    font-size: var(--ui-text-section);
    font-weight: var(--ui-weight-heading);
    margin-bottom:18px
}
.home-quick-info>div {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px 28px
}
.home-quick-info a {
    font-size: var(--ui-text-label);
    display:flex;
    justify-content:space-between;
    gap:8px;
    align-items:center;
    color:#4f7164
}
.home-quick-info a:hover {
    color:#005239
}
.home-quick-info i {
    font-size:12px;
    opacity:.6
}
.home-banner-strip {
    display:flex;
    gap:22px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:10px
}
.home-banner-strip img {
    width:min(620px,90%);
    max-height:240px;
    object-fit:contain;
    object-position:left;
    border-radius:18px;
    scroll-snap-align:start;
    flex-shrink:0;
    background:#eaf4ed
}
.home-footer {
    background:var(--ui-deep);
    color:#d2e5d9;
    padding-top:46px;
    padding-bottom:30px
}
.home-footer-grid {
    display:grid;
    grid-template-columns:1.55fr .85fr .9fr 1.4fr .65fr;
    gap:30px;
    padding-bottom:35px
}
.home-footer .home-brand strong {
    font-weight: var(--ui-weight-emphasis);
    color:#fff;
    font-size: 26px
}
.home-footer .home-brand small {
    color:#c0d8c9;
    font-size: var(--ui-text-small)
}
.home-footer-brand p {
    font-size: var(--ui-text-label);
    margin-top:22px;
    max-width:230px;
    line-height:1.8;
    color:#adc7b8
}
.home-footer h3 {
    font-size: var(--ui-text-label);
    color:white;
    margin-bottom:16px;
    font-weight: var(--ui-weight-label)
}
.home-footer-grid>div>a:not(.home-brand) {
    display:block;
    font-size: var(--ui-text-small);
    margin-bottom:8px
}
.home-footer-grid a:hover {
    color:#b7df94
}
.home-footer-contact p {
    font-size: var(--ui-text-label);
    line-height:1.9;
    margin-bottom:8px
}
.home-footer-grid i {
    font-size:12px;
    margin-left:3px
}
.home-footer-bottom {
    border-top:1px solid #ffffff1c;
    padding-top:22px;
    display:flex;
    justify-content:space-between;
    gap:25px;
    font-size: var(--ui-text-small);
    color:#a3c2af
}
@media(min-width:1600px) {
    .home-hero h1 {
    font-family:var(--ui-font-family);
        font-size: var(--ui-text-hero)
    }
}
@media(max-width:1250px) {
    .home-container {
        width:calc(100% - 64px)
    }
    .home-navigation {
        gap:14px;
        font-size: var(--ui-text-label)
    }
    .home-brand strong {
    font-weight: var(--ui-weight-emphasis);
        font-size: 26px
    }
    .home-brand small {
        font-size: var(--ui-text-small)
    }
    .home-overview {
        grid-template-columns:310px 1fr
    }
    .home-statistics {
        padding-inline:14px
    }
    .home-statistic {
        padding:9px
    }
    .home-category {
        padding:24px 20px
    }

    .home-footer-grid {
        gap:22px
    }
}
@media(max-width:1200px) {
    .home-header-inner {
        min-height:85px
    }
    .home-menu-toggle {
        display:block
    }
    .home-navigation {
        display:none;
        position:absolute;
        top:85px;
        left:0;
        right:0;
        padding:20px 32px;
        background:#f9fcf7;
        box-shadow:0 18px 24px #00291c15;
        font-size: var(--ui-text-label);
        flex-wrap:wrap;
        gap:10px 25px
    }
    .home-navigation.is-open {
        display:flex
    }
    .home-service-nav>.home-container {
        justify-content:flex-start
    }
    .home-hero h1 {
    font-family:var(--ui-font-family);
        font-size: var(--ui-text-hero)
    }
    .home-categories {
        gap:12px
    }
    .home-category {
        padding:22px 16px;
        min-height:255px
    }
    .home-category h2 {
        font-size: var(--ui-text-card)
    }
    .home-category p {
        font-size: var(--ui-text-body)
    }
    .home-overview {
        grid-template-columns:280px 1fr
    }
    .home-statistic h3 {
        font-size: var(--ui-text-label);
        white-space:normal
    }
    .home-statistic>strong {
        font-size: var(--ui-text-metric)
    }
    .home-access-card {
        padding:25px
    }
    .home-bottom-grid {
        gap:20px
    }
    .home-footer-grid {
        grid-template-columns:1.4fr 1fr 1fr
    }
    .home-footer-brand {
        grid-row:span 2
    }
    .home-footer-bottom {
        font-size: var(--ui-text-small)
    }
}
@media(max-width:800px) {
    .home-container {
        width:calc(100% - 40px)
    }
    .home-hero-inner {
        padding-block:28px 24px
    }
    .home-hero h1 {
    font-family:var(--ui-font-family);
        font-size: var(--ui-text-hero);
        max-width:650px
    }
    .home-hero p {
        font-size: var(--ui-text-body);
        max-width:540px
    }
    .home-categories {
        grid-template-columns:repeat(6,minmax(0,1fr));
        gap:14px;
        margin-bottom:28px
    }
    .home-category {
        grid-column:span 2;
        min-height:235px;
        padding:24px
    }
    .home-category:nth-child(4),.home-category:nth-child(5) {
        grid-column:span 3;
        min-height:220px
    }
    .home-category h2 {
        font-size: var(--ui-text-card)
    }
    .home-overview {
        grid-template-columns:1fr;
        margin-bottom:35px
    }
    .home-overview-intro {
        border-radius:24px 24px 55px 0;
        padding:28px
    }
    .home-overview-intro h2 br {
        display:none
    }
    .home-overview-intro p {
        max-width:500px
    }
    .home-statistics {
        padding:20px;
        gap:10px
    }
    .home-statistic>strong {
        font-size: var(--ui-text-metric)
    }
    .home-statistic-art {
        margin-top:15px;
        height:48px
    }
    .home-section-heading h2 {
        font-size: var(--ui-text-section)
    }
    .home-access-grid {
        gap:14px
    }
    .home-access-card {
        padding:24px 20px
    }
    .home-access-icon {
        font-size:40px;
        right:16px;
        top:17px
    }
    .home-access-card h3 {
        font-size: var(--ui-text-card)
    }
    .home-access-card p {
        font-size: var(--ui-text-body);
        min-height:65px
    }
    .home-button-light {
        gap:8px;
        padding:8px 12px;
        font-size: var(--ui-text-label)
    }
    .home-publication-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:16px
    }
    .home-publication-card {
        min-height:210px
    }
    .home-bottom-grid {
        grid-template-columns:1fr
    }

    .home-footer-grid {
        gap:28px
    }
    .home-footer .home-brand {
        gap:9px
    }
    .home-footer .home-brand img {
        width:42px;
        height:42px
    }
    .home-footer .home-brand strong {
    font-weight: var(--ui-weight-emphasis);
        font-size: 26px
    }
    .home-footer-bottom {
        flex-direction:column;
        gap:6px
    }
}
@media(max-width:520px) {
    .home-header-inner {
        min-height:80px
    }
    .home-brand img {
        width:43px;
        height:43px
    }
    .home-brand strong {
    font-weight: var(--ui-weight-emphasis);
        font-size: 26px
    }
    .home-brand small {
        font-size: var(--ui-text-small)
    }
    .home-navigation {
        top:80px;
        padding:18px 20px;
        flex-direction:column;
        align-items:stretch;
        gap:0
    }
    .home-navigation>a {
        padding:10px
    }
    .home-navigation>.home-login {
        margin-top:8px;
        align-self:flex-start
    }
    .home-service-nav a {
        font-size: var(--ui-text-label);
        padding-block:11px
    }
    .home-service-nav>.home-container {
        gap:25px
    }
    .home-hero-inner {
        padding-block:24px 22px
    }
    .home-eyebrow {
        font-size: var(--ui-text-small);
        letter-spacing:1.3px
    }
    .home-hero h1 {
    font-family:var(--ui-font-family);
        font-size: var(--ui-text-hero);
        line-height:1.2;
        letter-spacing:-.7px
    }
    .home-hero p {
        font-size: var(--ui-text-body);
        line-height:1.65;
        margin-top:16px
    }
    .home-search {
        min-height:52px;
        padding-left:17px;
        gap:9px;
        margin-top:22px
    }
    .home-search input {
        font-size: var(--ui-text-label)
    }
    .home-search button {
        font-size: var(--ui-text-label);
        padding-inline:17px
    }
    .home-search button i {
        display:none
    }
    .home-hero-caption {
        font-size: var(--ui-text-small);
        gap:6px
    }
    .home-content {
        padding-top:0;
        padding-bottom:30px
    }
    .home-categories {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px
    }
    .home-category,.home-category:nth-child(4) {
        grid-column:auto;
        min-height:237px;
        padding:22px 18px;
        border-radius:20px
    }
    .home-category:nth-child(5) {
        grid-column:1/-1;
        min-height:190px
    }
    .home-category h2 {
        font-size: var(--ui-text-card)
    }
    .home-category p {
        font-size: var(--ui-text-body);
        margin-bottom:20px
    }
    .home-category-icon {
        font-size:21px;
        margin-bottom:15px
    }
    .home-card-link {
        font-size: var(--ui-text-label)
    }
    .home-overview-intro {
        padding:28px 25px
    }
    .home-overview-intro h2 {
        font-size: var(--ui-text-section)
    }
    .home-statistics {
        grid-template-columns:repeat(2,minmax(0,1fr));
        padding:16px 20px;
        gap:18px 10px
    }
    .home-statistic h3 {
        font-size: var(--ui-text-label)
    }
    .home-statistic>strong {
        font-size: var(--ui-text-metric);
        margin-top:6px
    }
    .home-statistic-art {
        height:42px;
        margin-top:8px
    }
    .home-statistic>p {
        font-size: var(--ui-text-small)
    }
    .home-section {
        margin-bottom:31px
    }
    .home-section-heading {
        align-items:flex-start;
        gap:8px;
        margin-bottom:19px
    }
    .home-heading-label {
        gap:10px
    }
    .home-heading-icon {
        width:32px;
        height:32px;
        font-size:20px;
        border-radius:10px
    }
    .home-section-heading h2 {
        font-size: var(--ui-text-section);
        letter-spacing: -.02em
    }
    .home-section-heading p {
        font-size: var(--ui-text-body);
        max-width:220px
    }
    .home-text-link {
        font-size: var(--ui-text-label);
        gap:7px;
        padding-top:5px
    }
    .home-access-grid {
        grid-template-columns:1fr;
        gap:13px
    }
    .home-access-card {
        padding:24px;
        border-radius:20px
    }
    .home-access-card h3 {
        font-size: var(--ui-text-card)
    }
    .home-access-card p {
        min-height:0;
        max-width:245px;
        margin-bottom:20px
    }
    .home-access-icon {
        font-size:50px;
        right:25px;
        top:25px
    }
    .home-button-light {
        font-size: var(--ui-text-label);
        gap:18px
    }
    .home-publication-grid {
        gap:12px
    }
    .home-publication-card {
        padding:22px 18px;
        border-radius:20px
    }
    .home-publication-card h3 {
        font-size: var(--ui-text-card)
    }
    .home-publication-card p {
        font-size: var(--ui-text-body)
    }
    .home-publication-tag {
        font-size: var(--ui-text-label)
    }


    .frontend-2026 .home-button-white {
        font-size: var(--ui-text-label);
        padding:11px 16px;
        gap:10px
    }
    .home-quick-info {
        padding:26px;
        border-radius:20px
    }
    .home-quick-info>div {
        gap:14px 19px
    }
    .home-quick-info a {
        font-size: var(--ui-text-label)
    }
    .home-footer {
        padding-top:32px
    }
    .home-footer-grid {
        grid-template-columns:1fr 1fr;
        gap:28px 22px
    }
    .home-footer-brand {
        grid-column:1/-1;
        grid-row:auto
    }
    .home-footer-brand p {
        max-width:300px;
        margin-top:14px
    }
    .home-footer-contact {
        grid-column:1/-1
    }
    .home-footer-grid>div:last-child {
        grid-column:1/-1
    }
    .home-footer-grid>div:last-child>a:not(.home-brand) {
        display:inline-block;
        margin-right:20px
    }
    .home-footer-bottom {
        font-size: var(--ui-text-small)
    }
}
@media(prefers-reduced-motion:reduce) {
    .frontend-2026 * {
        transition:none!important;
        scroll-behavior:auto!important
    }
}


/* Compact page headings for inner pages. Photo banners are reserved for the homepage. */
.frontend-page-heading {
    padding: 26px 0 30px;
    background: #fbfdf9;
    border-bottom: 1px solid #e2eadf;
}
.frontend-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--ui-text-small);
    color: #6d8475;
    margin-bottom: 17px;
}
.frontend-breadcrumb i {
    font-size: 10px;
}
.frontend-breadcrumb a:hover {
    color: var(--ui-forest);
}
.frontend-page-heading h1 {
    font-size: var(--ui-text-title);
    font-weight: var(--ui-weight-heading);
    line-height: 1.3;
    letter-spacing: -.02em;
}
.frontend-page-heading p {
    font-size: var(--ui-text-body);
    line-height: 1.7;
    color: var(--ui-muted);
    margin-top: 12px;
    max-width: 850px;
}
@media (max-width: 520px) {
    .frontend-page-heading {
        padding: 22px 0 25px;
    }
    .frontend-page-heading h1 {
        font-size: var(--ui-text-title);
    }
    .frontend-page-heading p {
        font-size: var(--ui-text-body);
    }
    .frontend-breadcrumb {
        font-size: var(--ui-text-small);
    }
}

/* About page: scoped content sections, inherits the global UI foundations. */
.about-2026 {
    --about-line: #d9e6db;
}
.about-2026 section[id] {
    scroll-margin-top: 100px;
}







.about-section-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f5f9f4f5;
    border-bottom: 1px solid var(--about-line);
    backdrop-filter: blur(12px);
}
.about-section-nav .home-container {
    display: flex;
    gap: 35px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.about-section-nav a {
    padding: 22px 0;
    font-size: var(--ui-text-label);
    font-weight: var(--ui-weight-label);
    white-space: nowrap;
}
.about-section-nav a:hover {
    color: #19825c;
}
.about-content {
    padding: 65px 0 60px;
}
.about-section {
    margin-bottom: 70px;
}
.about-kicker {
    display: block;
    color: #397854;
    font-size: var(--ui-text-small);
    font-weight: var(--ui-weight-label);
    letter-spacing: 1.7px;
    margin-bottom: 12px;
}
.about-copy h2, .about-section-heading h2 {
    font-size: var(--ui-text-section);
    line-height: 1.3;
    letter-spacing: -.02em;
    font-weight: var(--ui-weight-heading);
}
.about-profile {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 65px;
    align-items: center;
    margin-bottom: 35px;
}
.about-profile-image {
    background: #eaf2e8;
    border-radius: 28px;
    padding: 20px;
    position: relative;
}
.about-profile-image > img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
}
.about-image-caption {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--ui-forest);
    color: white;
    padding: 21px 25px;
    border-radius: 18px;
    margin-top: 18px;
    font-size: var(--ui-text-small);
    line-height: 1.6;
}
.about-image-caption > i {
    font-size: 30px;
    color: #9ace87;
}
.about-image-caption strong {
    font-size: var(--ui-text-small);
    font-weight: var(--ui-weight-label);
}
.about-copy p {
    font-size: var(--ui-text-body);
    line-height: 1.8;
    margin-top: 20px;
    color: #536c60;
}
.about-copy .about-lead {
    font-size: var(--ui-text-label);
    color: var(--ui-ink);
}
.about-principles {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 26px;
}
.about-principles span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--ui-text-label);
    color: #25694c;
    font-weight: var(--ui-weight-label);
}
.about-principles i {
    font-size: 18px;
}
.about-data-policy {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    padding: 30px 34px;
    background: #eaf3ed;
    border: 1px solid #e0ecdf;
    border-radius: 24px;
    margin-bottom: 70px;
}
.about-policy-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: #d6e9dc;
    color: #236346;
    border-radius: 15px;
    font-size: 25px;
}
.about-data-policy h2 {
    font-size: var(--ui-text-section);
    font-weight: var(--ui-weight-heading);
    margin-bottom: 10px;
}
.about-data-policy p {
    font-size: var(--ui-text-body);
    color: #567061;
    line-height: 1.8;
    max-width: 1050px;
}
.about-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    margin-bottom: 30px;
}
.about-section-heading p {
    max-width: 850px;
    font-size: var(--ui-text-body);
    color: var(--ui-muted);
    margin-top: 15px;
    line-height: 1.7;
}
.about-section-heading .home-text-link {
    flex-shrink: 0;
}
.about-coverage-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.about-coverage-card {
    display: flex;
    flex-direction: column;
    padding: 30px;
    border-radius: 24px;
    transition: transform .2s, box-shadow .2s;
    min-height: 290px;
}
.about-coverage-card.home-category-pnylh {
    background: #e7f3ed;
}
.about-coverage-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px #23452c0a;
}
.about-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}
.about-card-icon {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #ffffff70;
    color: #36785d;
    font-size: 25px;
}
.about-card-number {
    font-size: var(--ui-text-small);
    color: #698878;
}
.about-coverage-card h3 {
    font-size: var(--ui-text-card);
    font-weight: var(--ui-weight-heading);
    line-height: 1.3;
    margin-bottom: 13px;
}
.about-coverage-card p {
    font-size: var(--ui-text-body);
    color: var(--ui-muted);
    line-height: 1.7;
    margin-bottom: 28px;
}
.about-coverage-card .home-card-link {
    padding-top: 5px;
}
.about-agency {
    padding: 50px 55px;
    border-radius: 28px;
    margin-bottom: 70px;
}
.about-agency .about-kicker {
    color: var(--ui-green);
}
.about-agency h2 {
    font-size: var(--ui-text-section);
    font-weight: var(--ui-weight-heading);
    line-height: 1.3;
    letter-spacing: -.02em;
}
.about-agency p {
    max-width: 950px;
    font-size: var(--ui-text-body);
    color: #e0eee3;
    line-height: 1.8;
    margin-top: 24px;
}
.about-agency-label {
    display: block;
    padding-top: 24px;
    margin-top: 28px;
    border-top: 1px solid #ffffff25;
    font-size: var(--ui-text-small);
    color: #b8d6bc;
}
.about-duties-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 30px;
    align-items: start;
}
.about-duty-card {
    padding: 34px;
    background: #e4f0e8;
    border-radius: 24px;
    position: sticky;
    top: 100px;
}
.about-duty-card .about-card-icon {
    margin-bottom: 24px;
}
.about-duty-card h3 {
    font-size: var(--ui-text-card);
    font-weight: var(--ui-weight-heading);
    margin-bottom: 17px;
}
.about-duty-card p {
    font-size: var(--ui-text-body);
    line-height: 1.8;
    margin-bottom: 30px;
}
.about-functions {
    border: 1px solid var(--about-line);
    border-radius: 24px;
    background: #fbfdfa;
    padding: 30px 35px;
}
.about-functions h3 {
    font-size: var(--ui-text-card);
    font-weight: var(--ui-weight-heading);
    margin-bottom: 24px;
}
.about-functions ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: functions;
}
.about-functions li {
    display: flex;
    gap: 18px;
    counter-increment: functions;
    padding: 20px 0;
    border-top: 1px solid #e5ece1;
    font-size: var(--ui-text-body);
    color: #506b5d;
    line-height: 1.7;
}
.about-functions li::before {
    content: counter(functions, decimal-leading-zero);
    font-size: 14px;
    font-weight: 600;
    color: #478260;
    flex: 0 0 28px;
    padding-top: 4px;
}
.about-organization {
    background: #eef5ed;
    border: 1px solid #e0eadd;
    border-radius: 28px;
    padding: 38px;
}
.about-org-lead {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    padding: 25px 30px;
    background: var(--ui-forest);
    color: white;
    border-radius: 20px;
}
.about-org-lead i {
    color: #b7dd9d;
    font-size: 28px;
}
.about-org-lead h3 {
    font-weight: var(--ui-weight-heading);
    font-size: var(--ui-text-card);
    line-height: 1.3;
    margin-top: 12px;
}
.about-org-secretariat {
    display: flex;
    justify-content: center;
    padding: 28px 0;
    position: relative;
}
.about-org-secretariat::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 50%;
    width: 1px;
    background: #a4c8ac;
}
.about-org-secretariat span {
    position: relative;
    display: block;
    border: 1px solid #bad7bf;
    border-radius: 14px;
    background: #f9fcf6;
    padding: 14px 32px;
    font-size: var(--ui-text-body);
}
.about-org-centers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    border-top: 1px solid #a4c8ac;
    padding-top: 24px;
}
.about-org-centers > div {
    background: #fff;
    border: 1px solid #dbe8d8;
    border-radius: 18px;
    padding: 23px;
    position: relative;
}
.about-org-centers > div::before {
    content: '';
    position: absolute;
    top: -25px;
    left: 50%;
    height: 24px;
    width: 1px;
    background: #a4c8ac;
}
.about-org-centers span {
    font-size: var(--ui-text-small);
    color: #6b9677;
    display: block;
    margin-bottom: 10px;
}
.about-org-centers h4 {
    font-size: var(--ui-text-card);
    line-height: 1.3;
    margin: 0;
    font-weight: var(--ui-weight-heading);
}
.about-org-units {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 25px;
}
.about-org-units > div {
    padding: 25px 28px;
    background: #e1eee2;
    border-radius: 18px;
}
.about-org-units h4 {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
    font-size: var(--ui-text-card);
    font-weight: var(--ui-weight-heading);
    margin: 0 0 18px;
}
.about-org-units h4 span {
    font-size: var(--ui-text-card);
    font-weight: var(--ui-weight-heading);
    border-radius: 20px;
    padding: 5px 14px;
    background: #f5fbef;
    white-space: nowrap;
}
.about-org-units ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px 25px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--ui-text-label);
    color: #52725c;
}
.about-org-units li {
    overflow-wrap: anywhere;
}
.about-diagram-link {
    margin-top: 25px;
}
.about-program-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.about-program-grid article {
    background: #e8f1ed;
    border-radius: 24px;
    padding: 32px;
}
.about-program-grid article:nth-child(2) {
    background: #edf1e3;
}
.about-program-grid article:nth-child(3) {
    background: #e6f1f5;
}
.about-program-number {
    font-size: var(--ui-text-small);
    font-weight: var(--ui-weight-label);
    letter-spacing: 1px;
    color: #4c7963;
}
.about-program-grid h3 {
    font-size: var(--ui-text-card);
    line-height: 1.3;
    font-weight: var(--ui-weight-heading);
    margin: 18px 0 22px;
}
.about-program-grid ul {
    margin: 0;
    padding-left: 20px;
    font-size: var(--ui-text-body);
    color: #566e63;
    line-height: 1.8;
}
.about-program-grid li + li {
    margin-top: 14px;
}
.about-activities {
    padding: 32px 35px;
    border: 1px solid var(--about-line);
    background: #fbfdf9;
    border-radius: 24px;
    margin-top: 24px;
}
.about-activities h3 {
    font-size: var(--ui-text-card);
    font-weight: var(--ui-weight-heading);
    margin-bottom: 24px;
}
.about-activities > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 35px;
}
.about-activities p {
    display: flex;
    gap: 15px;
    font-size: var(--ui-text-body);
    line-height: 1.7;
    color: #4e6b5c;
}
.about-activities p span {
    font-size: var(--ui-text-small);
    color: #689274;
    padding-top: 3px;
    flex-shrink: 0;
}
.about-systems-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.about-system-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 25px;
    border: 1px solid var(--about-line);
    border-radius: 22px;
    background: white;
    padding: 28px;
    transition: border-color .2s, transform .2s;
}
.about-system-card:hover {
    border-color: #72ac83;
    transform: translateY(-3px);
}
.about-system-card img {
    width: 100%;
    height: 65px;
    object-fit: contain;
    object-position: left center;
}
.about-system-card span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--ui-text-label);
    color: #5b7868;
}
.about-final-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    border-radius: 28px;
    padding: 45px 50px;
}
.about-final-cta h2 {
    font-size: var(--ui-text-section);
    line-height: 1.3;
    font-weight: var(--ui-weight-heading);
    margin-bottom: 19px;
}
.about-final-cta p {
    font-size: var(--ui-text-body);
    color: #d7ead8;
    max-width: 630px;
}
.about-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-shrink: 0;
}
@media (max-width: 1100px) {
    .about-profile {
        gap: 35px;
    }
    .about-copy p {
        font-size: var(--ui-text-body);
    }
    .about-coverage-card {
        padding: 25px;
    }
    .about-duties-grid {
        grid-template-columns: 290px 1fr;
        gap: 24px;
    }
    .about-duty-card {
        padding: 28px;
    }
    .about-functions {
        padding: 25px;
    }
    .about-organization {
        padding: 28px;
    }
    .about-org-centers {
        gap: 13px;
    }
    .about-org-centers > div {
        padding: 18px;
    }
    .about-org-centers h4 {
        font-size: var(--ui-text-card);
    }
    .about-org-units ul {
        grid-template-columns: 1fr;
    }
    .about-program-grid article {
        padding: 25px;
    }
}
@media (max-width: 800px) {




    .about-content {
        padding-top: 40px;
    }
    .about-section-nav .home-container {
        gap: 27px;
    }
    .about-section-nav a {
        padding-block: 18px;
    }
    .about-section {
        margin-bottom: 45px;
    }
    .about-profile {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .about-profile-image {
        max-width: 580px;
    }
    .about-copy .about-lead, .about-copy p {
        font-size: var(--ui-text-body);
    }
    .about-data-policy {
        margin-bottom: 45px;
        padding: 27px;
        gap: 20px;
    }
    .about-coverage-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .about-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }
    .about-agency {
        padding: 35px;
        margin-bottom: 45px;
    }
    .about-agency h2 {
        font-size: var(--ui-text-section);
    }
    .about-agency p {
        font-size: var(--ui-text-body);
    }
    .about-duties-grid {
        grid-template-columns: 1fr;
    }
    .about-duty-card {
        position: static;
    }
    .about-org-centers {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        border-top: 0;
        padding-top: 0;
    }
    .about-org-centers > div::before {
        display: none;
    }
    .about-org-units h4 {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
    .about-program-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .about-program-grid h3 {
        font-size: var(--ui-text-card);
    }
    .about-systems-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .about-final-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 35px;
    }
    .about-cta-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}
@media (max-width: 520px) {




    .about-section-nav a {
        font-size: var(--ui-text-label);
        padding-block: 17px;
    }
    .about-content {
        padding-bottom: 35px;
    }
    .about-copy h2, .about-section-heading h2 {
        font-size: var(--ui-text-section);
    }
    .about-section-heading p {
        font-size: var(--ui-text-body);
    }
    .about-profile-image {
        padding: 12px;
        border-radius: 22px;
    }
    .about-image-caption {
        gap: 12px;
        padding: 18px;
        font-size: var(--ui-text-small);
        border-radius: 15px;
    }
    .about-image-caption strong {
        font-size: var(--ui-text-small);
    }
    .about-copy p, .about-copy .about-lead {
        font-size: var(--ui-text-body);
    }
    .about-principles {
        gap: 14px;
    }
    .about-principles span {
        font-size: var(--ui-text-label);
    }
    .about-data-policy {
        flex-direction: column;
        padding: 25px;
        border-radius: 22px;
    }
    .about-data-policy p {
        font-size: var(--ui-text-body);
    }
    .about-coverage-grid {
        grid-template-columns: 1fr;
    }
    .about-coverage-card {
        min-height: auto;
        padding: 27px;
        border-radius: 22px;
    }
    .about-coverage-card h3 {
        font-size: var(--ui-text-card);
    }
    .about-coverage-card p {
        margin-bottom: 25px;
    }
    .about-agency {
        padding: 30px 25px;
        border-radius: 22px;
    }
    .about-agency h2 {
        font-size: var(--ui-text-section);
    }
    .about-agency p {
        font-size: var(--ui-text-body);
    }
    .about-agency-label {
        font-size: var(--ui-text-small);
    }
    .about-duty-card {
        border-radius: 22px;
    }
    .about-functions {
        padding: 25px 22px;
        border-radius: 22px;
    }
    .about-functions li {
        font-size: var(--ui-text-body);
        gap: 10px;
    }
    .about-organization {
        padding: 20px;
        border-radius: 22px;
    }
    .about-org-lead {
        padding: 22px 18px;
    }
    .about-org-lead h3 {
        font-size: var(--ui-text-card);
    }
    .about-org-centers {
        grid-template-columns: 1fr;
    }
    .about-org-centers h4 {
        font-size: var(--ui-text-card);
    }
    .about-org-units {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .about-org-units > div {
        padding: 23px;
    }
    .about-org-units h4 {
        flex-direction: row;
        align-items: center;
        font-size: var(--ui-text-card);
    }
    .about-org-units h4 span {
        padding: 4px 10px;
        font-size: var(--ui-text-card);
    }
    .about-program-grid article {
        border-radius: 22px;
    }
    .about-activities {
        padding: 25px;
        border-radius: 22px;
    }
    .about-activities > div {
        grid-template-columns: 1fr;
    }
    .about-systems-grid {
        gap: 12px;
    }
    .about-system-card {
        padding: 20px 16px;
        border-radius: 18px;
    }
    .about-system-card img {
        height: 50px;
    }
    .about-system-card span {
        font-size: var(--ui-text-label);
    }
    .about-final-cta {
        padding: 30px 25px;
        border-radius: 22px;
    }
    .about-final-cta h2 {
        font-size: var(--ui-text-section);
    }
    .about-final-cta p {
        font-size: var(--ui-text-body);
    }
}

/* Contact page: contact details, accessible form, and location. */
.contact-2026 section[id] {
    scroll-margin-top: 30px;
}







.contact-content {
    padding: 65px 0 60px;
}
.contact-main-grid {
    display: grid;
    grid-template-columns: 410px minmax(0, 1fr);
    gap: 60px;
    align-items: start;
    margin-bottom: 65px;
}
.contact-kicker {
    display: block;
    color: #397854;
    font-size: var(--ui-text-small);
    font-weight: var(--ui-weight-label);
    letter-spacing: 1.7px;
    margin-bottom: 12px;
}
.contact-information > h2, .contact-form-heading h2, .contact-location-heading h2 {
    font-size: var(--ui-text-section);
    line-height: 1.3;
    letter-spacing: -.02em;
    font-weight: var(--ui-weight-heading);
}
.contact-intro {
    font-size: var(--ui-text-body);
    line-height: 1.75;
    color: var(--ui-muted);
    margin: 18px 0 27px !important;
}
.contact-info-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: #e8f2ec;
    border-radius: 22px;
    padding: 25px;
    margin-bottom: 16px;
}
.contact-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 43px;
    height: 43px;
    border-radius: 13px;
    background: #d8e9dd;
    color: #26724f;
    font-size: 21px;
}
.contact-info-card > div {
    min-width: 0;
}
.contact-info-card h3 {
    font-size: var(--ui-text-card);
    font-weight: var(--ui-weight-heading);
    margin: 2px 0 13px;
}
.contact-info-card strong {
    display: block;
    font-size: var(--ui-text-label);
    font-weight: var(--ui-weight-label);
    margin-bottom: 8px;
}
.contact-info-card address {
    font-style: normal;
    font-size: var(--ui-text-body);
    color: #577363;
    line-height: 1.8;
    margin: 0 0 18px;
}
.contact-info-card span:not(.contact-icon) {
    font-size: 17px;
    overflow-wrap: anywhere;
}
.contact-info-card small {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #5b7e65;
    font-size: var(--ui-text-small);
    margin-top: 8px;
}
.contact-info-link {
    transition: background .2s;
}
.contact-info-link:hover {
    background: #deede2;
}
.contact-social {
    padding-top: 15px;
}
.contact-social h3 {
    font-size: var(--ui-text-card);
    font-weight: var(--ui-weight-heading);
    margin-bottom: 15px;
}
.contact-social > div {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
}
.contact-social a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #426e59;
    font-size: var(--ui-text-label);
}
.contact-social a:hover {
    color: #005338;
}
.contact-form-card {
    background: #fff;
    border: 1px solid #dfe9dd;
    padding: 38px;
    border-radius: 28px;
    box-shadow: 0 15px 45px #17432905;
}
.contact-form-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}
.contact-form-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    font-size: 29px;
    border-radius: 18px;
    background: #e8f2e6;
    color: #629070;
}
.contact-form-intro {
    font-size: var(--ui-text-body);
    color: var(--ui-muted);
    line-height: 1.75;
    margin: 20px 0 28px !important;
}
.contact-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}
.contact-field {
    min-width: 0;
    margin-bottom: 23px;
}
.contact-field label {
    display: block;
    font-size: var(--ui-text-label);
    font-weight: var(--ui-weight-label);
    margin-bottom: 10px;
}
.contact-field label > span {
    color: #52906a;
}
.contact-field input, .contact-field textarea {
    display: block;
    width: 100%;
    border: 1px solid #d7e3d7;
    border-radius: 12px;
    background: #f9fbf7;
    color: var(--ui-ink);
    font: inherit; font-weight: var(--ui-weight-label);
    font-size: var(--ui-text-label);
    line-height: 1.6;
    padding: 14px 17px;
    transition: border-color .2s, box-shadow .2s;
}
.contact-field textarea {
    resize: vertical;
    min-height: 170px;
}
.contact-field input::placeholder, .contact-field textarea::placeholder {
    color: #89998e;
}
.contact-field input:focus, .contact-field textarea:focus {
    outline: none;
    border-color: #609d77;
    box-shadow: 0 0 0 3px #deede2;
    background: #fff;
}
.contact-field [aria-invalid="true"] {
    border-color: #bb5245;
}
.contact-field [aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px #f6e3de;
}
.contact-field-error {
    display: block;
    color: #a53f32;
    font-size: var(--ui-text-small);
    line-height: 1.6;
    margin-top: 6px;
}
.contact-field-error:empty {
    display: none;
}
.contact-message-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}
#messages_hint {
    font-size: var(--ui-text-small);
    color: #7a9081;
    margin-top: 8px;
    margin-left: auto;
    flex-shrink: 0;
}
.contact-status {
    padding: 16px 18px;
    border-radius: 12px;
    font-size: var(--ui-text-label);
    line-height: 1.7;
    margin-bottom: 22px;
}
.contact-status-success {
    background: #e6f3e7;
    color: #276242;
    border: 1px solid #cce3cd;
}
.contact-status-error {
    background: #fbefeb;
    color: #924b3f;
    border: 1px solid #eed8d0;
}
.contact-status[hidden] {
    display: none;
}
.contact-submit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-top: 5px;
}
.contact-submit-row p {
    font-size: var(--ui-text-label);
    color: #728778;
    max-width: 230px;
    line-height: 1.6;
}
.contact-submit-row p i {
    margin-right: 5px;
}
.contact-submit {
    background: var(--ui-forest);
    border: 0;
    color: white;
    cursor: pointer;
    font-size: var(--ui-text-label);
    padding: 13px 22px;
    white-space: nowrap;
}
.contact-submit:hover {
    background: #076b4b;
}
.contact-submit:disabled {
    opacity: .65;
    cursor: wait;
}
.contact-noscript {
    font-size: var(--ui-text-label);
    margin-top: 20px !important;
    color: #924b3f;
}
.contact-location {
    margin-bottom: 35px;
}
.contact-location-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 28px;
}
.contact-location-heading p {
    font-size: var(--ui-text-body);
    color: var(--ui-muted);
    margin-top: 15px;
}
.frontend-2026 .contact-map-link {
    background: #e6f0e7;
    border: 1px solid #d3e2d1;
    font-size: var(--ui-text-label);
    color: #2a634a;
}
.frontend-2026 .contact-map-link:hover {
    background: #dcebdd;
}
.contact-map {
    border-radius: 26px;
    border: 1px solid #dbe6d6;
    overflow: hidden;
    background: #e4eee2;
}
.contact-map iframe {
    display: block;
    width: 100%;
    height: 380px;
    border: 0;
}
.contact-map-caption {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 17px 4px;
    font-size: var(--ui-text-small);
    color: #627d6a;
}
.contact-data-cta {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 28px 32px;
    background: #e8f2e9;
    border-radius: 24px;
}
.contact-data-cta > div {
    flex: 1;
}
.contact-data-cta h2 {
    font-size: var(--ui-text-section);
    font-weight: var(--ui-weight-heading);
    margin-bottom: 6px;
}
.contact-data-cta p {
    font-size: var(--ui-text-body);
    color: #607866;
}
@media (max-width: 1100px) {
    .contact-main-grid {
        grid-template-columns: 340px minmax(0, 1fr);
        gap: 30px;
    }
    .contact-form-card {
        padding: 30px;
    }
    .contact-field-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .contact-info-card {
        padding: 23px;
        gap: 14px;
    }
    .contact-submit-row {
        flex-wrap: wrap;
    }
    .contact-form-heading h2, .contact-information > h2 {
        font-size: var(--ui-text-section);
    }
}
@media (max-width: 800px) {




    .contact-content {
        padding-block: 40px;
    }
    .contact-main-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 45px;
    }
    .contact-field-row {
        grid-template-columns: 1fr 1fr;
        gap: 22px;
    }
    .contact-info-card address {
        font-size: var(--ui-text-body);
    }
    .contact-form-card {
        padding: 35px;
    }
    .contact-form-heading h2, .contact-information > h2 {
        font-size: var(--ui-text-section);
    }
    .contact-location-heading {
        flex-direction: column;
        align-items: flex-start;
    }
    .contact-map iframe {
        height: 320px;
    }
    .contact-data-cta {
        flex-wrap: wrap;
    }
    .contact-data-cta > div {
        flex: 1 1 70%;
    }
}
@media (max-width: 520px) {




    .contact-form-heading h2, .contact-information > h2, .contact-location-heading h2 {
        font-size: var(--ui-text-section);
    }
    .contact-form-card {
        padding: 25px 22px;
        border-radius: 22px;
    }
    .contact-form-icon {
        width: 45px;
        height: 45px;
        font-size: 23px;
        border-radius: 14px;
    }
    .contact-form-heading .contact-kicker {
        font-size: var(--ui-text-small);
        letter-spacing: 1px;
    }
    .contact-field-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .contact-field input, .contact-field textarea {
        padding: 13px 15px;
    }
    .contact-submit-row {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }
    .contact-submit-row p {
        max-width: none;
    }
    .contact-submit {
        width: 100%;
    }
    .contact-info-card {
        border-radius: 20px;
        padding: 23px 20px;
        gap: 13px;
    }
    .contact-info-card address {
        font-size: var(--ui-text-body);
    }
    .contact-icon {
        width: 37px;
        height: 37px;
        font-size: 19px;
        border-radius: 12px;
    }
    .contact-map {
        border-radius: 22px;
    }
    .contact-map iframe {
        height: 290px;
    }
    .contact-map-caption {
        font-size: var(--ui-text-small);
    }
    .contact-location-heading p {
        font-size: var(--ui-text-body);
    }
    .contact-data-cta {
        padding: 26px;
        gap: 17px;
        border-radius: 22px;
    }
    .contact-data-cta h2 {
        font-size: var(--ui-text-section);
    }
    .contact-data-cta p {
        font-size: var(--ui-text-body);
    }
}

/* Infographic catalogue: categories, search, and data module cards. */
.catalog-page-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
}
.frontend-2026 .catalog-tabular-link {
    background: #e6f0e7;
    border: 1px solid #d3e2d1;
    color: #2a634a;
    font-size: var(--ui-text-label);
    flex-shrink: 0;
}
.frontend-2026 .catalog-tabular-link:hover {
    background: #dcebdd;
}
.catalog-content {
    padding: 40px 0 55px;
}
.catalog-category-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 22px;
}
.catalog-kicker {
    display: block;
    font-size: var(--ui-text-small);
    font-weight: var(--ui-weight-label);
    letter-spacing: 1.5px;
    color: #64816d;
    margin-bottom: 7px;
}
.catalog-category-heading h2 {
    font-size: var(--ui-text-section);
    font-weight: var(--ui-weight-heading);
    line-height: 1.3;
}
.catalog-total {
    font-size: var(--ui-text-small);
    color: #6a8171;
}
.catalog-categories {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 40px;
}
.catalog-category {
    display: flex;
    flex-direction: column;
    border: 1px solid #dce7d8;
    background: #edf4ec;
    border-radius: 20px;
    padding: 23px;
    min-height: 183px;
    transition: background .2s, border-color .2s;
}
.catalog-category:hover {
    border-color: #8caf98;
    background: #e3efe2;
}
.frontend-2026 .catalog-category.is-active {
    color: white;
    background: var(--ui-forest);
    border-color: var(--ui-forest);
}
.catalog-category-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
}
.catalog-category-top > i {
    font-size: 24px;
    color: #699278;
}
.catalog-category-top > span {
    font-size: var(--ui-text-small);
    color: #74907a;
}
.catalog-category.is-active .catalog-category-top > i {
    color: #acd68d;
}
.catalog-category.is-active .catalog-category-top > span {
    color: #c0dac3;
}
.catalog-category strong {
    font-size: var(--ui-text-body);
    font-weight: var(--ui-weight-label);
    line-height: 1.4;
    margin-bottom: 19px;
}
.catalog-category-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-size: var(--ui-text-small);
    color: #64846e;
}
.catalog-category.is-active .catalog-category-action {
    color: #c6dfc3;
}
.catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding-top: 30px;
    border-top: 1px solid #dce6d6;
    margin-bottom: 25px;
}
.catalog-toolbar h2 {
    font-size: var(--ui-text-section);
    font-weight: var(--ui-weight-heading);
    line-height: 1.3;
}
.catalog-toolbar p {
    font-size: var(--ui-text-body);
    color: var(--ui-muted);
    margin-top: 8px;
}
.catalog-search {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    border: 1px solid #d4e2d2;
    border-radius: 14px;
    padding-left: 18px;
    width: 360px;
    flex-shrink: 0;
    overflow: hidden;
}
.catalog-search:focus-within {
    border-color: #669879;
    box-shadow: 0 0 0 3px #deede2;
}
.catalog-search > i {
    font-size: 17px;
    color: #8a9b8b;
}
.catalog-search input[type="search"] {
    min-width: 0;
    width: 100%;
    padding: 14px 0;
    font-size: var(--ui-text-label);
    border: 0;
    outline: none;
    background: white;
    color: var(--ui-ink);
}
.catalog-search button {
    align-self: stretch;
    border: 0;
    background: var(--ui-forest);
    color: white;
    padding: 0 20px;
    font-size: var(--ui-text-label);
    cursor: pointer;
}
.catalog-search button:hover {
    background: #076b4b;
}
.catalog-search-filter {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 23px;
    font-size: var(--ui-text-label);
}
.catalog-search-filter > span {
    border-radius: 20px;
    padding: 7px 14px;
    background: #e4efe4;
    overflow-wrap: anywhere;
}
.catalog-search-filter a {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    color: #5a7a64;
}
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}
.catalog-card {
    display: flex;
    flex-direction: column;
    border-radius: 23px;
    overflow: hidden;
    background: white;
    border: 1px solid #e0e8db;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.catalog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px #1743290c;
    border-color: #abc8ad;
}
.catalog-card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    margin: 15px 15px 0;
    padding: 0;
    border: 1px solid #e8eee2;
    border-radius: 16px;
    background: linear-gradient(145deg, #f8fbf5, #eef4e9);
    overflow: hidden;
}
.catalog-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}
.catalog-card-type {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    margin-bottom: 12px;
    color: #698470;
    font-size: var(--ui-text-small);
    font-weight: var(--ui-weight-label);
    letter-spacing: .2px;
}
.catalog-image-fallback {
    font-size: 75px;
    color: #99b9a1;
}
.catalog-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 26px;
}
.catalog-card h3 {
    font-size: var(--ui-text-card);
    line-height: 1.3;
    font-weight: var(--ui-weight-heading);
    margin-bottom: 25px;
}
.catalog-card-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: auto;
    margin-bottom: 22px;
    padding: 15px 16px;
    border-radius: 13px;
    background: #f1f6ef;
}
.catalog-card-summary > span {
    font-size: var(--ui-text-small);
    color: #6a826f;
}
.catalog-card-summary > strong {
    font-size: var(--ui-text-summary);
    font-weight: var(--ui-weight-emphasis);
    color: #286046;
    text-align: right;
    overflow-wrap: anywhere;
}
.catalog-card-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 17px;
    border-top: 1px solid #e3eadf;
    color: #437456;
    font-size: var(--ui-text-label);
    font-weight: var(--ui-weight-label);
}
.catalog-card-action i {
    transition: transform .2s;
}
.catalog-card:hover .catalog-card-action i {
    transform: translate(2px, -2px);
}
.catalog-empty {
    grid-column: 1/-1;
    padding: 55px 25px;
    text-align: center;
    border: 1px dashed #c9dbc8;
    border-radius: 23px;
    background: #edf4ec;
}
.catalog-empty > span {
    display: inline-grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 20px;
    background: #dae9da;
    color: #629375;
    font-size: var(--ui-text-label);
    margin-bottom: 18px;
}
.catalog-empty h3 {
    font-size: var(--ui-text-card);
    font-weight: var(--ui-weight-heading);
    margin-bottom: 13px;
}
.catalog-empty p {
    font-size: var(--ui-text-body);
    color: #617d67;
    max-width: 590px;
    margin: 0 auto 23px;
}
.catalog-hint {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: var(--ui-text-small);
    color: #718975;
    margin-top: 24px !important;
}
.catalog-help {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 40px;
    padding: 30px 35px;
    border-radius: 24px;
    background: #e6f0e8;
}
.catalog-help-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 16px;
    color: #377651;
    background: #d4e7d7;
    font-size: 25px;
}
.catalog-help > div {
    flex: 1;
}
.catalog-help h2 {
    font-size: var(--ui-text-section);
    font-weight: var(--ui-weight-heading);
    line-height: 1.3;
    margin-bottom: 8px;
}
.catalog-help p {
    font-size: var(--ui-text-body);
    color: #627c67;
}
@media (max-width: 1100px) {
    .catalog-category {
        padding: 20px 17px;
    }
    .catalog-category strong {
        font-size: var(--ui-text-body);
    }
    .catalog-category-top {
        gap: 8px;
    }
    .catalog-category-action {
        font-size: var(--ui-text-small);
    }
    .catalog-toolbar h2 {
        font-size: var(--ui-text-section);
    }
    .catalog-search {
        width: 310px;
    }
    .catalog-grid {
        gap: 20px;
    }
    .catalog-card-body {
        padding: 22px;
    }
    .catalog-card h3 {
        font-size: var(--ui-text-card);
    }
    .catalog-card-summary {
        padding: 13px;
        flex-wrap: wrap;
    }
}
@media (max-width: 800px) {
    .catalog-page-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }
    .catalog-categories {
        display: flex;
        overflow-x: auto;
        gap: 14px;
        padding-bottom: 12px;
        scroll-snap-type: x mandatory;
    }
    .catalog-category {
        flex: 0 0 210px;
        scroll-snap-align: start;
        padding: 22px;
        min-height: 180px;
    }
    .catalog-category strong {
        font-size: var(--ui-text-body);
    }
    .catalog-category-action {
        font-size: var(--ui-text-small);
    }
    .catalog-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 22px;
    }
    .catalog-search {
        width: 100%;
    }
    .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .catalog-total {
        font-size: var(--ui-text-small);
    }
    .catalog-category-heading {
        gap: 20px;
    }
    .catalog-help {
        flex-wrap: wrap;
        padding: 28px;
    }
    .catalog-help > div {
        flex: 1 1 70%;
    }
}
@media (max-width: 520px) {
    .catalog-content {
        padding: 30px 0 35px;
    }
    .catalog-category-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .catalog-category-heading h2 {
        font-size: var(--ui-text-section);
    }
    .catalog-categories {
        margin-bottom: 18px;
    }
    .catalog-category {
        flex-basis: 195px;
    }
    .catalog-toolbar h2 {
        font-size: var(--ui-text-section);
    }
    .catalog-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .catalog-card-image {
        margin: 13px 13px 0;
    }
    .catalog-card-body {
        padding: 25px;
    }
    .catalog-card h3 {
        font-size: var(--ui-text-card);
    }
    .catalog-card-summary {
        flex-wrap: nowrap;
    }
    .catalog-card-summary > strong {
        font-size: var(--ui-text-summary);
    }
    .catalog-hint {
        font-size: var(--ui-text-small);
    }
    .catalog-help {
        padding: 25px;
        gap: 18px;
    }
    .catalog-help h2 {
        font-size: var(--ui-text-section);
    }
    .catalog-help p {
        font-size: var(--ui-text-body);
    }
    .catalog-empty {
        padding: 40px 23px;
    }
    .catalog-empty h3 {
        font-size: var(--ui-text-card);
    }
    .catalog-empty p {
        font-size: var(--ui-text-body);
    }
}

/* Legacy geographic positioning, scoped to the infographic detail shell. */

    .infographic-detail #outerContainer {
        position: relative;

        background-repeat: no-repeat;
        background-size: 100%;

        font-size: 12px;
    }

    .infographic-detail #acehDot {
        position: absolute;
        top: 21px;
        left: 30px;
        z-index: 1;
    }
    .infographic-detail #acehText {
        position: absolute;
        top: 18px;
        left: 50px;
        z-index: 1;
    }

    .infographic-detail #sumateraUtaraDot {
        position: absolute;
        top: 71px;
        left: 83px;
        z-index: 1;
    }
    .infographic-detail #sumateraUtaraText {
        position: absolute;
        top: 71px;
        left: 103px;
        z-index: 1;

    }

    .infographic-detail #riauDot {
        position: absolute;
        top: 145px;
        left: 128px;
        z-index: 1;
    }
    .infographic-detail #riauText {
        position: absolute;
        top: 145px;
        left: 148px;
        z-index: 1;
    }

    .infographic-detail #kepriauDot {
        position: absolute;
        top: 145px;
        left: 200px;
        z-index: 1;
    }
    .infographic-detail #kepriauText {
        position: absolute;
        top: 157px;
        left: 200px;
        z-index: 1;
    }

    .infographic-detail #sumateraBaratDot {
        position: absolute;
        top: 188px;
        left: 104px;
        z-index: 1;
    }
    .infographic-detail #sumateraBaratText {
        position: absolute;
        top: 188px;
        left: 124px;
        z-index: 1;
    }

    .infographic-detail #jambiDot {
        position: absolute;
        top: 217px;
        left: 165px;
        z-index: 1;
    }
    .infographic-detail #jambiText {
        position: absolute;
        top: 217px;
        left: 185px;
        z-index: 1;


    }

    .infographic-detail #bangkabelitungDot {
        position: absolute;
        top: 222px;
        left: 241px;
        z-index: 1;
    }
    .infographic-detail #bangkabelitungText {
        position: absolute;
        top: 222px;
        left: 261px;
        z-index: 1;
    }

    .infographic-detail #bengkuluDot {
        position: absolute;
        top: 262px;
        left: 140px;
        z-index: 1;
    }
    .infographic-detail #bengkuluText {
        position: absolute;
        top: 260px;
        left: 160px;
        z-index: 1;
    }

    .infographic-detail #sumateraSelatanDot {
        position: absolute;
        top: 265px;
        left: 214px;
        z-index: 1;
    }
    .infographic-detail #sumateraSelatanText {
        position: absolute;
        top: 265px;
        left: 234px;
        z-index: 1;
    }

    .infographic-detail #lampungDot {
        position: absolute;
        top: 308px;
        left: 218px;
        z-index: 1;
    }
    .infographic-detail #lampungText {
        position: absolute;
        top: 302px;
        left: 238px;
        z-index: 1;
    }

    .infographic-detail #kalimantanutaraDot {
        position: absolute;
        top: 70px;
        left: 498px;
        z-index: 1;
    }
    .infographic-detail #kalimantanutaraText {
        position: absolute;
        top: 69px;
        left: 518px;
        z-index: 1;
    }

    .infographic-detail #kalimantanbaratDot {
        position: absolute;
        top: 162px;
        left: 318px;
        z-index: 1;
    }
    .infographic-detail #kalimantanbaratText {
        position: absolute;
        top: 162px;
        left: 338px;
        z-index: 1;
    }

    .infographic-detail #kalimantantimurDot {
        position: absolute;
        top: 174px;
        left: 498px;
        z-index: 1;
    }
    .infographic-detail #kalimantantimurText {
        position: absolute;
        top: 174px;
        left: 518px;
        z-index: 1;
    }

    .infographic-detail #kalimantantengahDot {
        position: absolute;
        top: 220px;
        left: 403px;
        z-index: 1;
    }
    .infographic-detail #kalimantantengahText {
        position: absolute;
        top: 216px;
        left: 423px;
        z-index: 1;
    }

    .infographic-detail #kalimantanselatanDot {
        position: absolute;
        top: 273px;
        left: 440px;
        z-index: 1;
    }
    .infographic-detail #kalimantanselatanText {
        position: absolute;
        top: 270px;
        left: 460px;
        z-index: 1;
    }

    .infographic-detail #sulawesiutaraDot {
        position: absolute;
        top: 130px;
        left: 667px;
        z-index: 1;
    }
    .infographic-detail #sulawesiutaraText {
        position: absolute;
        top: 130px;
        left: 687px;
        z-index: 1;
    }

    .infographic-detail #gorontaloDot {
        position: absolute;
        top: 149px;
        left: 615px;
        z-index: 1;
    }
    .infographic-detail #gorontaloText {
        position: absolute;
        top: 145px;
        left: 635px;
        z-index: 1;
    }

    .infographic-detail #sulawesitengahDot {
        position: absolute;
        top: 213px;
        left: 580px;
        z-index: 1;
    }
    .infographic-detail #sulawesitengahText {
        position: absolute;
        top: 210px;
        left: 600px;
        z-index: 1;
    }

    .infographic-detail #sulawesibaratDot {
        position: absolute;
        top: 243px;
        left: 537px;
        z-index: 1;
    }
    .infographic-detail #sulawesibaratText {
        position: absolute;
        top: 243px;
        left: 557px;
        z-index: 1;
    }

    .infographic-detail #sulawesitenggaraDot {
        position: absolute;
        top: 303px;
        left: 600px;
        z-index: 1;
    }
    .infographic-detail #sulawesitenggaraText {
        position: absolute;
        top: 300px;
        left: 620px;
        z-index: 1;
    }

    .infographic-detail #sulawesiselatanDot {
        position: absolute;
        top: 326px;
        left: 554px;
        z-index: 1;
    }
    .infographic-detail #sulawesiselatanText {
        position: absolute;
        top: 326px;
        left: 574px;
        z-index: 1;
    }

    .infographic-detail #malukuutaraDot {
        position: absolute;
        top: 152px;
        left: 740px;
        z-index: 1;
    }
    .infographic-detail #malukuutaraText {
        position: absolute;
        top: 150px;
        left: 760px;
        z-index: 1;
    }

    .infographic-detail #malukuDot {
        position: absolute;
        top: 270px;
        left: 750px;
        z-index: 1;
    }
    .infographic-detail #malukuText {
        position: absolute;
        top: 267px;
        left: 770px;
        z-index: 1;
    }

    .infographic-detail #dkijakartaDot {
        position: absolute;
        top: 338px;
        left: 260px;
        z-index: 1;
    }
    .infographic-detail #dkijakartaText {
        position: absolute;
        top: 335px;
        left: 280px;
        z-index: 1;
    }

    .infographic-detail #bantenDot {
        position: absolute;
        top: 365px;
        left: 229px;
        z-index: 1;
    }
    .infographic-detail #bantenText {
        position: absolute;
        top: 360px;
        left: 249px;
        z-index: 1;
    }

    .infographic-detail #pusatDot {
        position: absolute;
        top: 357px;
        left: 255px;
        z-index: 1;
    }
    .infographic-detail #pusatText {
        position: absolute;
        top: 354px;
        left: 275px;
        z-index: 1;
    }

    .infographic-detail #jawabaratDot {
        position: absolute;
        top: 370px;
        left: 275px;
        z-index: 1;
    }
    .infographic-detail #jawabaratText {
        position: absolute;
        top: 370px;
        left: 295px;
        z-index: 1;
    }

    .infographic-detail #jawatengahDot {
        position: absolute;
        top: 375px;
        left: 325px;
        z-index: 1;
    }
    .infographic-detail #jawatengahText {
        position: absolute;
        top: 375px;
        left: 345px;
        z-index: 1;
    }

    .infographic-detail #diyogyakartaDot {
        position: absolute;
        top: 405px;
        left: 340px;
        z-index: 1;
    }
    .infographic-detail #diyogyakartaText {
        position: absolute;
        top: 405px;
        left: 360px;
        z-index: 1;
    }

    .infographic-detail #jawatimurDot {
        position: absolute;
        top: 386px;
        left: 395px;
        z-index: 1;
    }
    .infographic-detail #jawatimurText {
        position: absolute;
        top: 385px;
        left: 415px;
        z-index: 1;
    }

    .infographic-detail #baliDot {
        position: absolute;
        top: 415px;
        left: 455px;
        z-index: 1;
    }
    .infographic-detail #baliText {
        position: absolute;
        top: 413px;
        left: 475px;
        z-index: 1;
    }

    .infographic-detail #nusatenggarabaratDot {
        position: absolute;
        top: 427px;
        left: 502px;
        z-index: 1;
    }
    .infographic-detail #nusatenggarabaratText {
        position: absolute;
        top: 423px;
        left: 522px;
        z-index: 1;
    }

    .infographic-detail #nusatenggaratimurDot {
        position: absolute;
        top: 463px;
        left: 645px;
        z-index: 1;
    }
    .infographic-detail #nusatenggaratimurText {
        position: absolute;
        top: 460px;
        left: 665px;
        z-index: 1;
    }

    .infographic-detail #papuabaratDot {
        position: absolute;
        top: 200px;
        left: 884px;
        z-index: 1;
    }
    .infographic-detail #papuabaratText {
        position: absolute;
        top: 197px;
        left: 900px;
        z-index: 1;
    }

    .infographic-detail #papuaDot {
        position: absolute;
        top: 250px;
        left: 995px;
        z-index: 1;
    }
    .infographic-detail #papuaText {
        position: absolute;
        top: 263px;
        left: 995px;
        z-index: 1;
    }

    .infographic-detail #papuatengahDot {
        position: absolute;
        top: 266px;
        left: 930px;
        z-index: 1;
    }
    .infographic-detail #papuatengahText {
        position: absolute;
        top: 276px;
        left: 930px;
        z-index: 1;
    }

    .infographic-detail #papuapegununganDot {
        position: absolute;
        top: 289px;
        left: 975px;
        z-index: 1;
    }
    .infographic-detail #papuapegununganText {
        position: absolute;
        top: 299px;
        left: 975px;
        z-index: 1;
    }

    .infographic-detail #papuaselatanDot {
        position: absolute;
        top: 383px;
        left: 990px;
        z-index: 1;
    }
    .infographic-detail #papuaselatanText {
        position: absolute;
        top: 395px;
        left: 990px;
        z-index: 1;
    }

    .infographic-detail #papuabaratdayaDot {
        position: absolute;
        top: 195px;
        left: 844px;
        z-index: 1;
    }
    .infographic-detail #papuabaratdayaText {
        position: absolute;
        top: 205px;
        left: 844px;
        z-index: 1;
    }

    .infographic-detail #pusatDot {
        position: absolute;
        top: 348px;
        left: 260px;
        z-index: 1;
    }
    .infographic-detail #pusatText {
        position: absolute;
        top: 360px;
        left: 260px;
        z-index: 1;
    }


    .infographic-detail .dot  {
        height: 15px;
        width: 15px;
        background-color:red;
        border-radius: 50%;
        display: inline-block;
    }

    .infographic-detail #timorlesteDot {
        position: absolute;
        top: 439px;
        left: 705px;
        z-index: 1;
    }
    .infographic-detail #timorlesteText {
        position: absolute;
        top: 439px;
        left: 725px;
        z-index: 1;
    }


/* Infographic detail: shared module navigation, responsive filters, charts, and analysis. */
.infographic-page-heading h1 { font-size: var(--ui-text-title); max-width: 1080px; text-wrap: balance; }
.infographic-module-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin-top: 25px; }
.infographic-module-picker { width: min(620px, 100%); }
.infographic-module-picker label { display: block; font-size: var(--ui-text-label); color: #6e8574; margin-bottom: 8px; }
.infographic-module-picker select { display: block; width: 100%; padding: 12px 16px; border: 1px solid #cddfcc; background: white; color: var(--ui-ink); font: inherit; font-weight: var(--ui-weight-label); font-size: var(--ui-text-label); border-radius: 12px; }
.infographic-detail #portfolio { padding-block: 30px 50px !important; }
.infographic-detail #portfolio > .container { max-width: none; width: min(1320px, calc(100% - 96px)); padding-inline: 0; }
.infographic-detail .infographic-view-tabs { display: flex; gap: 7px; width: fit-content; max-width: 100%; background: #e7f0e7; border: 1px solid #d9e5d6; border-radius: 15px; padding: 5px; margin-bottom: 25px; }
.infographic-detail .infographic-view-tabs a { display: flex; align-items: center; gap: 9px; font-size: var(--ui-text-label); padding: 11px 22px; color: #5b7d64; border-radius: 11px; white-space: nowrap; }
.infographic-detail .infographic-view-tabs a.is-active { color: white; background: var(--ui-forest); box-shadow: 0 3px 8px #0a482014; }
.infographic-detail .card { border: 1px solid #dfe8dc; border-radius: 23px; background: white; box-shadow: 0 8px 24px #16432705 !important; overflow: hidden; }
.infographic-detail .card > div:first-child { line-height: 1.6; }
.infographic-detail .card.shadow { padding: 26px !important; }
.infographic-detail .card .card { border-radius: 17px; }
.infographic-detail .chart { padding-top: 16px; }
.infographic-detail .chart canvas { width: 100% !important; max-width: 100%; }
.infographic-detail .title_infografis_detil { font-size: var(--ui-text-subheading); line-height: 1.3; color: #315c43; font-weight: var(--ui-weight-heading); max-width: 1000px; margin: 12px auto 25px; }
.infographic-detail .infographic-filter-card { padding: 25px !important; margin-bottom: 28px !important; }
.infographic-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.infographic-filter-heading strong { font-size: var(--ui-text-card); font-weight: var(--ui-weight-heading); }
.infographic-filter-heading strong i { margin-right: 9px; color: #6b9875; }
.infographic-filter-heading > span { font-size: var(--ui-text-label); color: #788e7c; }
.infographic-filter-card > .d-flex { display: block !important; }
.infographic-filter-card > .d-flex > div { overflow: visible !important; }
.infographic-filter-card [style*="min-width: 900px"] { min-width: 0 !important; width: 100%; }
.infographic-filter-form { text-align: left; }
.infographic-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; }
.infographic-filter-field { min-width: 0; }
.infographic-filter-field label { display: block; font-size: var(--ui-text-label); color: #617b68; margin-bottom: 9px; }
.infographic-detail .form-control { font-family: var(--ui-font-family); font-size: var(--ui-text-label); line-height: 1.5; padding: 11px 13px; color: var(--ui-ink); background-color: #f8fbf5; border: 1px solid #d4e1d0; border-radius: 11px; min-height: 47px; }
.infographic-detail .form-control:focus { border-color: #6b9e75; box-shadow: 0 0 0 3px #e2eee0; }
.infographic-detail .card img.img-fluid { object-fit: contain; max-width: 100%; }
.infographic-detail #div_data_not_found { background: #edf4eb; border: 1px dashed #c4d9c2; padding: 35px 25px; border-radius: 24px; margin-top: 20px; }
.infographic-detail #div_data_not_found h3 { font-size: var(--ui-text-card); font-weight: var(--ui-weight-heading); color: #456c51; }
.infographic-detail #div_data_not_found img { width: min(350px, 100%) !important; height: auto !important; }
.infographic-scroll { max-width: 100%; overflow-x: auto; margin-block: 15px; border-radius: 18px; }
.infographic-detail #outerContainer { width: 1024px; min-width: 1024px; }
.infographic-detail .table { font-size: var(--ui-text-label); }
@media (max-width: 1250px) {
    .infographic-detail #portfolio > .container { width: calc(100% - 64px); }
}
@media (max-width: 800px) {
    .infographic-detail #portfolio > .container { width: calc(100% - 40px); }
    .infographic-page-heading h1 { font-size: var(--ui-text-title); }
    .infographic-module-toolbar { flex-direction: column; align-items: flex-start; gap: 20px; }
    .infographic-module-picker { width: 100%; }
    .infographic-filter-heading { flex-direction: column; align-items: flex-start; gap: 7px; }
    .infographic-detail #div_data_found .col-6 { width: 100%; }
    .infographic-detail .title_infografis_detil { font-size: var(--ui-text-subheading); }
}
@media (max-width: 520px) {
    .infographic-page-heading h1 { font-size: var(--ui-text-title); }
    .infographic-detail .infographic-view-tabs { width: 100%; }
    .infographic-detail .infographic-view-tabs a { padding: 10px 12px; font-size: var(--ui-text-label); gap: 7px; flex: 1; justify-content: center; }
    .infographic-detail .card.shadow { padding: 21px !important; }
    .infographic-detail .infographic-filter-card { padding: 22px !important; }
    .infographic-filter-grid { grid-template-columns: 1fr; gap: 17px; }
    .infographic-detail #portfolio { padding-block: 24px 35px !important; }
}
.infographic-map-hint {
    display: none;
    font-size: var(--ui-text-small);
    color: #708972;
    margin-top: 15px !important;
}
@media (max-width: 1100px) {
    .infographic-map-hint { display: block; }
}

/* Tabular detail: exports, readable multi-level headers, and wide data tables. */
.infographic-detail .infographic-filter-card { overflow: visible; }
.infographic-filter-actions { display: flex; justify-content: flex-end; margin-top: 22px; padding-top: 20px; border-top: 1px solid #e4ecdf; }
.infographic-filter-actions .btn-success { border: 0; border-radius: 12px; background: var(--ui-forest); padding: 11px 20px; font: inherit; font-weight: var(--ui-weight-label); font-size: var(--ui-text-label); }
.infographic-filter-actions .dropdown-menu { padding: 8px; border: 1px solid #d8e5d2; border-radius: 13px; box-shadow: 0 8px 25px #13402612; }
.infographic-filter-actions .dropdown-item { border-radius: 8px; padding: 10px 14px; color: var(--ui-ink); font-size: var(--ui-text-label); }
.infographic-filter-actions .dropdown-item:hover { background: #eaf3e6; }
.tabular-table-scroll { width: 100%; overflow-x: auto; border: 1px solid #dce7d5; border-radius: 16px; margin-bottom: 10px; }
.tabular-table-hint { display: flex; align-items: center; gap: 8px; font-size: var(--ui-text-small); color: #69866d; margin-bottom: 18px !important; }
.tabular-table-scroll .table { min-width: 680px; margin-bottom: 0 !important; font-size: var(--ui-text-label); vertical-align: middle; --bs-table-striped-bg: #f4f8f0; --bs-table-border-color: #dfe8d7; }
.tabular-table-scroll .table thead th { background: var(--ui-forest); color: white; border-color: #ffffff24; font-weight: var(--ui-weight-label); padding: 15px 13px; line-height: 1.6; }
.tabular-table-scroll .table tbody td { padding: 13px; line-height: 1.6; border-color: #e0e9d9; }
.tabular-table-scroll .table tbody tr:hover td { background-color: #edf4e7; }
.tabular-table-scroll .table tbody tr[style*="bold"] td { background: #e8f1e2; color: #2b5e42; }
/* Keep period headings across the viewport while wide tables scroll beneath them. */
.tabular-table-scroll > center { position: sticky; left: 0; }
.tabular-table-scroll h4 { margin: 0; padding: 20px; background: #f2f7ed; font-size: var(--ui-text-card); color: #4e7356; font-weight: var(--ui-weight-heading); }
.tabular-detail .tabular-context-tabs { display: block; width: fit-content; max-width: 100%; border-radius: 15px; padding: 5px; background: #e7f0e7; border: 1px solid #d9e5d6; overflow-x: auto; }
.tabular-context-tabs tbody, .tabular-context-tabs tr { display: flex; gap: 5px; }
.tabular-context-tabs td { display: block; width: auto !important; padding: 0; }
.tabular-context-tabs td[hidden] { display: none; }
.tabular-detail .tabular-context-tabs a { display: block; margin: 0 !important; padding: 10px 18px; border-radius: 10px; font-size: var(--ui-text-label) !important; white-space: nowrap; color: #5b7d64 !important; }
.tabular-detail .tabular-context-tabs .is-active a { color: white !important; background: var(--ui-forest); }
.tabular-context-tabs td > div { display: none; }
@media (max-width: 520px) {
    .tabular-table-scroll .table { font-size: var(--ui-text-label); }
    .tabular-table-scroll .table thead th, .tabular-table-scroll .table tbody td { padding: 11px; }
    .tabular-table-hint { font-size: var(--ui-text-small); }
    .tabular-detail .tabular-context-tabs a { font-size: var(--ui-text-label) !important; padding: 10px 13px; }
    .infographic-filter-actions { justify-content: stretch; }
    .infographic-filter-actions .btn-group, .infographic-filter-actions .btn-success { width: 100%; }
}

/* Types of data: classification, year, statistical scope, and module discovery. */
.types-content {
    padding: 35px 0 50px;
}
.types-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 20px 23px;
    margin-bottom: 35px;
    background: white;
    border: 1px solid #dce7d6;
    border-radius: 21px;
}
.types-tabs {
    display: flex;
    gap: 6px;
    padding: 4px;
    background: #edf4e9;
    border-radius: 14px;
}
.types-tabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 22px;
    border-radius: 10px;
    color: #607e66;
    font-size: var(--ui-text-label);
    font-weight: var(--ui-weight-label);
}
.types-tabs a.is-active {
    background: var(--ui-forest);
    color: white;
}
.types-tabs a:hover:not(.is-active) {
    background: #e0ecdc;
}
.types-year-form {
    display: flex;
    align-items: center;
    gap: 14px;
}
.types-year-form label {
    color: #6b846f;
    font-size: var(--ui-text-label);
    white-space: nowrap;
}
.types-year-form select {
    min-width: 125px;
    padding: 11px 15px;
    background: #f8fbf4;
    border: 1px solid #ccddc5;
    border-radius: 11px;
    color: var(--ui-ink);
    font: inherit; font-weight: var(--ui-weight-label);
    font-size: var(--ui-text-label);
}
.types-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 26px;
}
.types-section-heading h2 {
    font-size: var(--ui-text-section);
    font-weight: var(--ui-weight-heading);
    line-height: 1.3;
}
.types-section-heading p {
    font-size: var(--ui-text-body);
    color: var(--ui-muted);
    margin-top: 12px;
    line-height: 1.75;
}
.types-source-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
}
.types-source-card .catalog-card-image {
    max-height: 250px;
}
.types-source-card h3 {
    font-size: var(--ui-text-card);
    margin-bottom: 13px;
}
.types-source-card p {
    font-size: var(--ui-text-body);
    line-height: 1.75;
    color: var(--ui-muted);
    margin-bottom: 26px;
}
.types-2026 .catalog-card-action {
    margin-top: auto;
}
.types-source-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 13px;
    margin-bottom: 35px;
}
.types-source-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 23px;
    padding: 12px 22px;
    border: 1px solid #cbdcc4;
    border-radius: 13px;
    background: #edf4e9;
    color: #5b7c63;
    font-size: var(--ui-text-label);
}
.types-source-tabs a.is-active {
    background: var(--ui-forest);
    color: white;
    border-color: var(--ui-forest);
}
.types-source-tabs .types-back-link {
    margin-left: auto;
    border: 0;
    background: transparent;
    font-size: var(--ui-text-label);
    color: #6e8671;
}
.types-groups h3 {
    font-size: var(--ui-text-card);
    font-weight: var(--ui-weight-heading);
    line-height: 1.3;
    margin: 0;
}
.types-results-toolbar {
    border-top: 0;
    padding-top: 0;
}
@media (max-width: 800px) {
    .types-controls {
        gap: 18px;
        padding: 18px;
    }
    .types-tabs a {
        padding: 11px 15px;
        font-size: var(--ui-text-label);
    }
    .types-year-form {
        gap: 10px;
    }
    .types-source-grid {
        gap: 18px;
    }
    .types-source-card .catalog-card-body {
        padding: 23px;
    }
    .types-source-card h3 {
        font-size: var(--ui-text-card);
    }
    .types-source-card p {
        font-size: var(--ui-text-body);
    }
}
@media (max-width: 600px) {
    .types-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }
    .types-tabs a {
        flex: 1;
        padding: 11px 12px;
        gap: 7px;
    }
    .types-year-form {
        justify-content: space-between;
    }
    .types-year-form select {
        flex: 1;
        max-width: 180px;
    }
    .types-source-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .types-source-tabs .types-back-link {
        margin-left: 0;
    }
    .types-section-heading h2 {
        font-size: var(--ui-text-section);
    }
    .types-section-heading p {
        font-size: var(--ui-text-body);
    }
    .types-content {
        padding-block: 28px 35px;
    }
}

/* One responsive typography scale for every page of the new frontend. */
@media (max-width: 600px) {
    .frontend-2026 {
        --ui-text-body:17px;
        --ui-text-card:21px;
        --ui-text-subheading:22px;
        --ui-text-section:26px;
        --ui-text-title:30px;
        --ui-text-hero:34px;
        --ui-text-metric:38px;
        --ui-text-summary:24px;
    }
    .home-header-inner {
        gap:16px;
    }
    .home-header-inner > .home-brand {
        min-width:0;
        flex-shrink:1;
    }
}

/* Homepage hero carousel: static copy, rotating local photography. */
.home-hero-controls[hidden] { display:none; }
.home-hero-controls {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px 24px;
    margin-top:18px;
    padding-top:12px;
    border-top:1px solid #ffffff30;
}
.home-hero-controls-row {
    display:flex;
    align-items:center;
    gap:12px;
}
.home-hero-control {
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    flex-shrink:0;
    padding:0;
    border:1px solid #ffffff60;
    border-radius:50%;
    background:#003e3159;
    color:white;
    cursor:pointer;
}
.home-hero-control:hover { background:#ffffff26; }
.home-hero-dots { display:flex; align-items:center; }
.home-hero-dot {
    display:grid;
    place-items:center;
    width:36px;
    height:44px;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
}
.home-hero-dot span {
    display:block;
    width:8px;
    height:8px;
    border-radius:8px;
    background:#ffffff70;
    transition:width .25s, background .25s;
}
.home-hero-dot.is-active span { width:24px; background:#b2e494; }
.home-hero-counter {
    font-size:var(--ui-text-small);
    font-variant-numeric:tabular-nums;
    color:#e3eee5;
    min-width:48px;
}
@media (max-width:600px) {
    .home-hero-controls { margin-top:16px; gap:8px; }
    .home-hero-controls-row { gap:8px; }
    .home-hero-dot { width:32px; }
}
@media (max-width:375px) {
    .home-hero-counter { display:none; }
}

/* Publications: searchable archive, complete covers, and document access. */
.publications-content { padding-block:36px 48px; }
.publications-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:28px;
    margin-bottom:28px;
}
.publications-toolbar h2 {
    font-size:var(--ui-text-section);
    font-weight:var(--ui-weight-heading);
    line-height:1.3;
}
.publications-toolbar p { margin-top:8px; color:var(--ui-muted); }
.publications-filter { display:flex; align-items:end; gap:16px; }
.publications-filter label {
    display:block;
    margin-bottom:8px;
    font-size:var(--ui-text-label);
    font-weight:var(--ui-weight-label);
    color:#526f60;
}
.publications-year select {
    width:170px;
    min-height:54px;
    padding:12px 16px;
    border:1px solid #d4e2d2;
    border-radius:14px;
    background:white;
    color:var(--ui-ink);
    font-size:var(--ui-text-label);
}
.publications-filter .catalog-search { width:340px; min-height:54px; }
.publications-active-filter { margin-bottom:24px; }
.publications-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; }
.publication-card {
    display:flex;
    flex-direction:column;
    min-width:0;
    border:1px solid #dfe8dc;
    border-radius:23px;
    background:white;
    overflow:hidden;
    transition:border-color .2s,box-shadow .2s;
}
.publication-card:hover { border-color:#a6c5ad; box-shadow:0 10px 24px #1743290c; }
.publication-cover {
    position:relative;
    height:250px;
    margin:15px 15px 0;
    overflow:hidden;
    border:1px solid #e5ecdf;
    border-radius:16px;
    background:linear-gradient(135deg,#f2f8ed,#e5f1e6);
}
.publication-cover>a { display:block; height:100%; padding:12px; }
.publication-cover img { display:block; width:100%; height:100%; object-fit:contain; }
.publication-cover-zoom {
    position:absolute;
    right:12px;
    bottom:12px;
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border:1px solid #d6e5d8;
    border-radius:50%;
    background:#ffffffed;
    color:var(--ui-forest);
}
.publication-cover-placeholder { display:grid; place-items:center; height:100%; }
.publication-paper {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    width:148px;
    height:202px;
    padding:18px;
    border:1px solid #dae6d8;
    border-radius:5px 15px 5px 5px;
    background:#fcfefb;
    box-shadow:8px 9px 0 #779c7c15,0 10px 20px #42664812;
    color:var(--ui-forest);
}
.publication-paper-brand { font-size:var(--ui-text-small); font-weight:var(--ui-weight-emphasis); letter-spacing:.06em; }
.publication-paper>i { font-size:34px; line-height:1; color:#70a386; }
.publication-paper>span:not(.publication-paper-brand):not(.publication-paper-lines) {
    font-size:var(--ui-text-card);
    font-weight:var(--ui-weight-heading);
    line-height:1.2;
}
.publication-paper-lines { height:9px; width:68%; border-block:2px solid #c6dac6; }
.publication-card-body { display:flex; flex-direction:column; flex:1; padding:24px; }
.publication-year {
    display:flex;
    align-items:center;
    gap:8px;
    color:#66816c;
    font-size:var(--ui-text-small);
    margin-bottom:12px;
}
.publication-card h3 {
    font-size:var(--ui-text-card);
    font-weight:var(--ui-weight-heading);
    line-height:1.35;
    overflow-wrap:anywhere;
    margin-bottom:24px;
}
.publication-card-actions { margin-top:auto; padding-top:18px; border-top:1px solid #e4ebdf; }
.frontend-2026 .publication-open {
    display:flex;
    justify-content:space-between;
    width:100%;
    padding:12px 18px;
    color:white;
    background:var(--ui-forest);
    border-radius:12px;
}
.frontend-2026 .publication-open:hover { background:#176b50; }
.publication-tab-note { display:block; margin-top:9px; font-size:var(--ui-text-small); color:#7b8b80; }
.publication-unavailable { display:flex; align-items:center; gap:8px; font-size:var(--ui-text-label); color:#718375; }
.publications-note { display:flex; align-items:start; gap:9px; margin-top:22px !important; color:#6f8575; font-size:var(--ui-text-small); }
.publications-note>i { flex-shrink:0; }
.frontend-2026 .publication-reset { background:var(--ui-forest); color:white; }
@media (max-width:1100px) {
    .publications-toolbar { flex-direction:column; align-items:stretch; }
    .publications-filter .catalog-search { width:100%; }
    .publications-query { flex:1; min-width:0; }
    .publications-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
    .publications-content { padding-block:26px 32px; }
    .publications-filter { flex-direction:column; align-items:stretch; gap:14px; }
    .publications-year select { width:100%; }
    .publications-grid { grid-template-columns:1fr; gap:20px; }
    .publication-card-body { padding:22px; }
    .publication-cover { height:240px; margin:13px 13px 0; }
    .publication-card h3 { margin-bottom:20px; }
}

/* Authentication: shared visual system without the administrative dashboard theme. */
.auth-2026 { min-height:100svh; display:flex; flex-direction:column; background:#f5f9f4; }
.auth-header,.auth-footer { width:min(1120px,calc(100% - 80px)); margin-inline:auto; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.auth-header { padding-block:24px; }
.auth-back { display:flex; align-items:center; gap:8px; font-size:var(--ui-text-label); font-weight:var(--ui-weight-label); color:#537260; }
.auth-main { flex:1; display:grid; place-items:center; padding:16px 40px 32px; }
.auth-shell { display:grid; grid-template-columns:1fr 1fr; width:min(1120px,100%); background:white; border:1px solid #dfe8dc; border-radius:28px; overflow:hidden; box-shadow:0 20px 60px #254d2e0a; }
.auth-intro { position:relative; overflow:hidden; isolation:isolate; padding:48px 42px; background:var(--ui-forest); color:#f4faf1; display:flex; flex-direction:column; }
.auth-intro::before,.auth-intro::after { content:''; position:absolute; z-index:-1; width:230px; height:410px; border-radius:100% 0 100% 0; background:#9bcc8220; transform:rotate(28deg); }
.auth-intro::before { right:-150px; top:-80px; }
.auth-intro::after { left:-120px; bottom:-260px; background:#9bcc8212; }
.auth-kicker { font-size:var(--ui-text-small); font-weight:var(--ui-weight-label); letter-spacing:.12em; color:#b0d990; margin-bottom:22px; }
.auth-intro h2 { font-size:var(--ui-text-section); font-weight:var(--ui-weight-heading); line-height:1.3; letter-spacing:-.02em; max-width:350px; }
.auth-intro>p { color:#d0e3d5; margin-top:20px; font-size:var(--ui-text-body); }
.auth-features { list-style:none; margin:32px 0 38px; padding:0; display:grid; gap:25px; }
.auth-features li { display:flex; align-items:start; gap:15px; }
.auth-features li>span { display:grid; place-items:center; width:40px; height:40px; flex-shrink:0; border:1px solid #ffffff28; border-radius:12px; background:#ffffff0b; color:#b8dda6; }
.auth-features strong { display:block; font-size:var(--ui-text-body); font-weight:var(--ui-weight-heading); }
.auth-features p { font-size:var(--ui-text-label); color:#bcd7c5; margin-top:3px; line-height:1.6; }
.auth-intro-note { display:flex; align-items:start; gap:10px; margin-top:auto; padding-top:22px; border-top:1px solid #ffffff20; color:#bbd5bf; font-size:var(--ui-text-small); }
.auth-form-panel { min-width:0; padding:40px 42px; }
.auth-heading-icon { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; color:#467b5b; background:#edf5e9; font-size:24px; margin-bottom:18px; }
.auth-form-kicker { display:block; font-size:var(--ui-text-small); color:#718576; letter-spacing:.1em; font-weight:var(--ui-weight-label); margin-bottom:8px; }
.auth-form-heading h1 { font-size:var(--ui-text-section); font-weight:var(--ui-weight-heading); line-height:1.2; letter-spacing:-.02em; }
.auth-form-heading p { margin-top:12px; font-size:var(--ui-text-label); color:var(--ui-muted); line-height:1.6; }
.auth-form { margin-top:26px; }
.auth-field { margin-bottom:18px; }
.auth-field label { display:block; margin-bottom:8px; font-size:var(--ui-text-label); font-weight:var(--ui-weight-label); }
.auth-input { display:flex; align-items:center; min-height:52px; border:1px solid #d6e3d4; border-radius:12px; background:#fafcf8; overflow:hidden; }
.auth-input>i { color:#7c9582; margin-left:15px; flex-shrink:0; font-size:18px; }
.auth-input input { border:0; outline:none; min-width:0; width:100%; padding:13px 12px; color:var(--ui-ink); background:transparent; font-size:var(--ui-text-label); line-height:1.5; }
.auth-input input::placeholder { color:#899a8c; font-weight:var(--ui-weight-body); }
.auth-input:focus-within { border-color:#639879; box-shadow:0 0 0 3px #e0eddf; }
.auth-input:has(input[aria-invalid="true"]) { border-color:#b35b46; }
.auth-password-toggle { display:grid; place-items:center; flex-shrink:0; width:46px; align-self:stretch; padding:0; border:0; background:transparent; color:#66806c; cursor:pointer; }
.auth-password-toggle:hover { background:#edf5e9; }
.auth-field-error { display:block; color:#a64b39; font-size:var(--ui-text-small); line-height:1.5; }
.auth-field-error:not(:empty) { margin-top:6px; }
.auth-field-hint { display:block; font-size:var(--ui-text-small); color:#7c8d80; margin-top:9px; line-height:1.5; }
.auth-captcha-challenge { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.auth-captcha-challenge>span:last-child { font-size:var(--ui-text-small); color:#7b8d7f; line-height:1.4; }
.auth-2026 #captcha_img { display:block; flex-shrink:0; line-height:0; border:1px solid #dce6db; border-radius:8px; overflow:hidden; }
.auth-2026 #captcha_img img { display:block; max-width:100%; }
.auth-captcha-reload { display:grid; place-items:center; width:40px; height:40px; padding:0; flex-shrink:0; border:1px solid #d6e3d4; border-radius:10px; background:white; color:#537c60; cursor:pointer; }
.auth-captcha-reload:hover { background:#edf5e9; }
.auth-forgot { display:block; text-align:right; margin-block:-2px 20px; color:#417b59 !important; font-size:var(--ui-text-label); font-weight:var(--ui-weight-label); }
.auth-forgot:hover,.auth-help a:hover,.auth-back:hover { text-decoration:underline; }
.frontend-2026 .auth-submit { display:flex; justify-content:space-between; width:100%; min-height:52px; padding:12px 18px; border:0; border-radius:12px; color:white; background:var(--ui-forest); font-size:var(--ui-text-label); cursor:pointer; }
.frontend-2026 .auth-submit:hover { background:#176b50; }
.auth-submit:disabled,.auth-captcha-reload:disabled { opacity:.6; cursor:wait; }
.auth-status[hidden] { display:none; }
.auth-status { border:1px solid #edcdbf; border-radius:12px; padding:12px 14px; background:#fff5ef; color:#934d3d; font-size:var(--ui-text-label); line-height:1.5; margin-bottom:16px; }
.auth-help { font-size:var(--ui-text-small); color:#7b8b7e; margin-top:22px !important; text-align:center; }
.auth-help a { color:#467b5b; font-weight:var(--ui-weight-heading); }
.auth-return { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:22px; color:#4e7b5b !important; font-size:var(--ui-text-label); }
.auth-otp-input { font-variant-numeric:tabular-nums; }
.auth-noscript { font-size:var(--ui-text-label); margin-top:14px !important; color:#934d3d; }
.auth-footer { padding-block:18px 24px; color:#7d8d80; font-size:var(--ui-text-small); }
.auth-footer>a { display:flex; align-items:center; gap:8px; color:#567662; }
@media (max-width:900px) {
    .auth-shell { grid-template-columns:.9fr 1fr; }
    .auth-intro { padding:36px 28px; }
    .auth-form-panel { padding:34px 28px; }
}
@media (max-width:700px) {
    .auth-header,.auth-footer { width:calc(100% - 40px); }
    .auth-header { padding-block:20px; align-items:start; }
    .auth-header .home-brand { min-width:0; flex-shrink:1; }
    .auth-header .home-brand img { width:44px; height:44px; }
    .auth-back { flex-shrink:0; width:40px; height:40px; justify-content:center; font-size:0; border:1px solid #d9e5d6; border-radius:12px; }
    .auth-back i { font-size:18px; }
    .auth-main { padding:8px 20px 20px; align-items:start; }
    .auth-shell { grid-template-columns:1fr; border-radius:22px; }
    .auth-intro { display:none; }
    .auth-form-panel { padding:28px 24px; }
    .auth-form-heading h1 { font-size:var(--ui-text-section); }
    .auth-footer { gap:12px; flex-wrap:wrap; padding-block:10px 20px; }
}
@media (max-width:375px) {
    .auth-form-panel { padding-inline:18px; }
    .auth-captcha-challenge>span:last-child { font-size:var(--ui-text-small); }
}

/* Botanical CTA, scoped so the statistics panel retains its existing decoration. */
.home-cta.home-leaf-panel::before,.home-cta.home-leaf-panel::after { content:none; }
.home-cta-copy { position:relative; z-index:1; min-width:0; }
.home-cta-kicker {
    display:block;
    color:#b3d99c;
    font-size:var(--ui-text-small);
    font-weight:var(--ui-weight-label);
    letter-spacing:.08em;
    margin-bottom:12px;
}
.home-cta-foliage { position:absolute; pointer-events:none; color:#90b56d; }
.home-cta-foliage-left { width:148px; height:260px; left:-28px; bottom:-25px; opacity:.55; transform:rotate(-12deg); }
.home-cta-foliage-right { width:185px; height:310px; right:-93px; bottom:-55px; opacity:.22; transform:scaleX(-1) rotate(-18deg); }
.home-cta-stem { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.frontend-2026 .home-cta .home-button-white {
    padding:12px 18px;
    min-height:48px;
    gap:24px;
    border:1px solid #e6f0df;
    background:#f6fbf2;
    box-shadow:0 4px 14px #001f2520;
}
.home-cta .home-button-white i { transition:transform .2s; }
.home-cta .home-button-white:hover i { transform:translateX(3px); }
@media (max-width:1250px) and (min-width:801px) {
    .home-cta { padding:28px 26px 28px 82px; }
    .home-cta-foliage-left { left:-52px; opacity:.45; }
}
@media (max-width:600px) {
    .home-cta { padding:28px 26px; min-height:260px; border-radius:20px; }
    .home-cta-kicker { max-width:240px; }
    .home-cta-foliage-left { left:-68px; bottom:-55px; opacity:.13; }
    .home-cta-foliage-right { right:-87px; bottom:-58px; opacity:.16; }
    .home-cta h2 { max-width:100%; margin-bottom:22px; }
    .frontend-2026 .home-cta .home-button-white { gap:16px; padding-inline:16px; }
}