:root {
    --ink:#172f3a;
    --teal:#006d71;
    --deep:#123e49;
    --mint:#dcece5;
    --lime:#dcf18d;
    --paper:#f6f7f3;
    --line:#dae2df;
    --muted:#63767c;
    --white:#fff;
    --sand:#f0e6da;
    --radius:20px
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:125px
}
body {
    margin:0;
    color:var(--ink);
    background:var(--paper);
    font:16px/1.65 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
a {
    color:inherit;
    text-decoration:none
}
button,input,select {
    font:inherit
}
button {
    cursor:pointer
}
h1,h2,h3,p {
    margin:0
}
h1,h2,h3 {
    line-height:1.13;
    letter-spacing:-.035em
}
h1 {
    font-size:clamp(2.8rem,5.1vw,4.7rem);
    font-weight:780
}
h2 {
    font-size:clamp(1.9rem,3vw,2.6rem)
}
h3 {
    font-size:1.3rem
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
    outline:3px solid var(--teal);
    outline-offset:4px
}
::selection {
    background:var(--lime)
}
.wrap {
    width:min(1240px,calc(100% - 48px));
    margin:auto
}
.sr {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
.skip {
    position:absolute;
    top:-70px;
    left:12px;
    background:white;
    padding:12px;
    z-index:100
}
.skip:focus {
    top:10px
}
.utility {
    background:var(--ink);
    color:#dce8e5;
    font-size:.71rem
}
.utility .wrap {
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:8px 0
}
.utility a {
    color:var(--lime)
}
header {
    background:#f6f7f3f5;
    backdrop-filter:blur(14px);
    position:sticky;
    top:0;
    z-index:30;
    border-bottom:1px solid var(--line)
}
.header-main {
    min-height:79px;
    display:flex;
    align-items:center;
    gap:25px
}
.brand {
    display:flex;
    align-items:center;
    gap:17px
}
.logo {
    font-weight:850;
    letter-spacing:-.09em;
    font-size:2.1rem;
    white-space:nowrap;
    line-height:1
}
.logo span {
    color:var(--teal)
}
.logo i {
    display:inline-block;
    height:8px;
    width:8px;
    border-radius:50%;
    background:var(--teal);
    margin-left:6px
}
.brand-note {
    font-size:.71rem;
    line-height:1.45;
    border-left:1px solid #bdcfca;
    padding-left:17px;
    color:var(--muted)
}
nav {
    display:flex;
    gap:23px;
    margin-left:auto;
    font-size:.81rem;
    font-weight:700;
    align-items:center
}
nav a:hover {
    color:var(--teal)
}
.menu-toggle {
    display:none;
    background:transparent;
    border:1px solid var(--line);
    border-radius:8px;
    padding:7px 11px
}
.btn {
    display:inline-flex;
    gap:10px;
    align-items:center;
    justify-content:center;
    padding:12px 20px;
    border:0;
    border-radius:99px;
    background:var(--teal);
    color:white;
    font-size:.82rem;
    font-weight:750;
    transition:transform .18s,background .18s
}
.btn:hover {
    background:#00575b;
    transform:translateY(-2px)
}
.btn.outline {
    background:transparent;
    color:var(--ink);
    border:1px solid #b6c9c2
}
.btn.lime {
    background:var(--lime);
    color:var(--ink)
}
.header-cta {
    font-size:.74rem;
    padding:10px 15px
}
.eyebrow {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.67rem;
    letter-spacing:.13em;
    text-transform:uppercase;
    font-weight:800;
    color:var(--teal)
}
.eyebrow::before {
    content:"";
    width:6px;
    height:6px;
    background:currentColor;
    border-radius:50%;
    flex-shrink:0
}
.hero {
    padding:47px 0 28px;
    display:grid;
    grid-template-columns:1.03fr 1fr;
    gap:55px;
    align-items:center
}
.hero h1 {
    margin:18px 0 23px
}
.hero h1 em {
    font-style:normal;
    color:var(--teal)
}
.hero-copy {
    color:var(--muted);
    font-size:1.03rem;
    max-width:550px
}
.hero-actions {
    display:flex;
    flex-wrap:wrap;
    gap:11px;
    margin:25px 0 21px
}
.hero-small {
    font-size:.76rem;
    color:var(--muted);
    max-width:530px
}
.hero-art {
    border-radius:26px;
    background:var(--mint);
    position:relative;
    overflow:hidden;
    border:1px solid #c8ded2
}
.hero-art svg {
    display:block;
    width:100%;
    height:400px
}
.art-label {
    position:absolute;
    left:20px;
    top:18px;
    font-size:.62rem;
    letter-spacing:.08em;
    padding:7px 11px;
    border-radius:99px;
    background:#ffffffe0;
    color:var(--deep);
    font-weight:750;
    text-transform:uppercase
}
.art-caption {
    position:absolute;
    bottom:18px;
    left:18px;
    right:18px;
    background:#fffffff0;
    padding:18px 20px;
    border-radius:15px
}
.art-caption small {
    font-size:.66rem;
    color:var(--teal);
    text-transform:uppercase;
    letter-spacing:.1em
}
.art-caption p {
    font-size:1.08rem;
    font-weight:750;
    line-height:1.3;
    margin-top:4px
}
.discipline-band {
    padding:23px 0 27px;
    border-bottom:1px solid var(--line);
    margin-bottom:27px
}
.discipline-band>p {
    font-size:.72rem;
    color:var(--muted);
    margin-bottom:12px
}
.disciplines {
    display:flex;
    gap:8px;
    flex-wrap:wrap
}
.disciplines span {
    font-size:.72rem;
    font-weight:650;
    padding:6px 11px;
    border-radius:99px;
    background:white;
    border:1px solid var(--line)
}
.quick-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:13px;
    margin-bottom:30px
}
.quick {
    background:white;
    border:1px solid var(--line);
    padding:19px;
    border-radius:15px;
    position:relative;
    transition:background .2s
}
.quick:hover {
    background:var(--mint)
}
.quick h3 {
    font-size:.98rem;
    margin-bottom:6px;
    padding-right:15px
}
.quick p {
    font-size:.73rem;
    color:var(--muted);
    line-height:1.5
}
.quick>span {
    position:absolute;
    right:16px;
    top:16px;
    color:var(--teal)
}
.ad {
    background:#edf1eb;
    border:1px dashed #bac9c0;
    padding:20px;
    border-radius:14px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-height:108px;
    gap:6px
}
.ad small {
    color:var(--muted);
    font-size:.59rem;
    letter-spacing:.15em;
    text-transform:uppercase
}
.ad p {
    font-size:.94rem;
    font-weight:650
}
.ad a {
    font-size:.72rem;
    color:var(--teal);
    text-decoration:underline;
    text-underline-offset:3px
}
.leader {
    margin:0 0 47px
}
.section-head {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:22px;
    margin-bottom:24px
}
.section-head .eyebrow {
    margin-bottom:9px
}
.link {
    font-size:.8rem;
    font-weight:750;
    color:var(--teal);
    white-space:nowrap
}
.intro {
    font-size:.9rem;
    color:var(--muted);
    max-width:740px;
    margin:-7px 0 25px
}
.news-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:26px
}
.news-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}
.card {
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:white;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:transform .2s
}
.card:hover {
    transform:translateY(-3px)
}
.card.main {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:.95fr 1fr
}
.art {
    min-height:175px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden
}
.art svg {
    width:100%;
    height:100%;
    min-height:175px;
    display:block
}
.main .art {
    min-height:284px
}
.card-body {
    padding:22px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    flex:1
}
.tag {
    display:inline-flex;
    font-size:.59rem;
    font-weight:800;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:var(--teal);
    background:#edf5f0;
    padding:4px 8px;
    border-radius:5px;
    margin-bottom:12px
}
.card h3 {
    font-size:1.26rem;
    line-height:1.2;
    margin-bottom:11px
}
.card.main h3 {
    font-size:1.75rem
}
.card p {
    color:var(--muted);
    font-size:.81rem;
    margin-bottom:17px
}
.meta {
    color:var(--muted);
    font-size:.67rem;
    margin-top:auto
}
.read {
    border:0;
    background:none;
    padding:13px 0 0;
    text-align:left;
    font-size:.78rem;
    color:var(--teal);
    font-weight:750
}
.sidebar {
    display:flex;
    flex-direction:column;
    gap:20px
}
.panel {
    padding:24px;
    background:white;
    border:1px solid var(--line);
    border-radius:20px
}
.panel h3 {
    font-size:1.45rem;
    margin:12px 0 15px
}
.panel p {
    font-size:.83rem;
    color:var(--muted);
    margin-bottom:20px
}
.panel.mint {
    background:var(--mint);
    border:0
}
.sidebar .ad {
    min-height:250px
}
.side-list {
    list-style:none;
    padding:0;
    margin:0
}
.side-list li+li {
    border-top:1px solid var(--line)
}
.side-list button {
    border:0;
    background:none;
    text-align:left;
    display:flex;
    gap:12px;
    align-items:flex-start;
    width:100%;
    padding:15px 0;
    color:var(--ink);
    font-size:.8rem;
    line-height:1.4;
    font-weight:650
}
.side-list span {
    color:#92aaa0;
    font-size:1.1rem;
    font-weight:400
}
.section {
    margin:58px 0
}
.hub {
    background:#eaf0ea;
    padding:30px;
    border-radius:24px;
    margin:49px 0
}
.hub .section-head {
    margin-bottom:18px
}
.hub-controls {
    display:flex;
    gap:12px;
    margin-bottom:15px
}
.search {
    position:relative;
    flex:1
}
.search input {
    width:100%;
    border:1px solid #b7c9c0;
    background:white;
    border-radius:99px;
    padding:12px 38px 12px 17px;
    font-size:.83rem
}
.search span {
    position:absolute;
    right:16px;
    top:9px;
    color:var(--teal);
    font-size:1.1rem;
    pointer-events:none
}
.hub select {
    border:1px solid #b7c9c0;
    border-radius:99px;
    padding:10px 35px 10px 16px;
    background:white;
    font-size:.8rem;
    color:var(--ink);
    max-width:230px
}
.chips {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-bottom:22px
}
.chip {
    border:1px solid #c7d4cf;
    background:transparent;
    color:var(--muted);
    padding:7px 13px;
    border-radius:99px;
    font-size:.72rem;
    font-weight:650
}
.chip[aria-pressed="true"] {
    background:var(--ink);
    border-color:var(--ink);
    color:white
}
.results {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:11px
}
.result {
    padding:18px;
    background:white;
    border:1px solid var(--line);
    border-radius:14px;
    display:flex;
    flex-direction:column;
    align-items:flex-start
}
.result .tag {
    margin-bottom:9px
}
.result h3 {
    font-size:1.05rem;
    line-height:1.3
}
.result p {
    font-size:.74rem;
    color:var(--muted);
    margin-top:6px
}
.result button {
    margin-top:auto
}
.empty {
    grid-column:1/-1;
    padding:22px;
    background:white;
    border-radius:14px;
    color:var(--muted);
    font-size:.87rem
}
.demo-note {
    font-size:.7rem;
    color:var(--muted);
    margin-top:17px
}
.blogs-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}
.knowledge-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 285px;
    gap:25px;
    align-items:start
}
.doc-list {
    display:flex;
    flex-direction:column;
    gap:12px
}
.doc {
    display:grid;
    grid-template-columns:44px 1fr auto;
    gap:17px;
    align-items:center;
    background:white;
    border:1px solid var(--line);
    border-radius:16px;
    padding:20px
}
.pdf {
    background:var(--mint);
    border:1px solid #c2dacf;
    border-radius:7px;
    width:43px;
    height:52px;
    display:grid;
    place-items:center;
    font-size:.65rem;
    color:var(--teal);
    font-weight:800
}
.doc .tag {
    margin-bottom:6px
}
.doc h3 {
    font-size:1.05rem;
    margin-bottom:5px;
    line-height:1.3
}
.doc p {
    font-size:.72rem;
    color:var(--muted)
}
.doc-actions {
    display:flex;
    flex-direction:column;
    gap:7px
}
.doc-actions .btn {
    font-size:.69rem;
    padding:8px 13px
}
.doc-tools {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap
}
.doc-tools .search {
    min-width:190px;
    max-width:260px;
    margin-bottom:20px
}
.doc-tools .search input {
    padding-top:9px;
    padding-bottom:9px
}
.training-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}
.training-card {
    background:white;
    border:1px solid var(--line);
    border-radius:20px;
    padding:24px;
    display:flex;
    flex-direction:column
}
.training-card h3 {
    font-size:1.35rem;
    line-height:1.2;
    margin-bottom:12px
}
.training-card p {
    color:var(--muted);
    font-size:.82rem;
    margin-bottom:16px
}
.training-info {
    list-style:none;
    padding:0;
    margin:0 0 20px;
    font-size:.72rem;
    color:var(--muted)
}
.training-info li {
    border-top:1px solid var(--line);
    padding:7px 0
}
.training-card .btn {
    margin-top:auto;
    align-self:flex-start
}
.banner {
    margin-top:22px;
    padding:20px 24px;
    background:#edf1eb;
    border:1px solid var(--line);
    border-radius:16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    font-size:.83rem
}
.jobs-section {
    background:var(--ink);
    color:white;
    border-radius:26px;
    padding:34px;
    margin:58px 0
}
.jobs-section .eyebrow,.jobs-section .link {
    color:var(--lime)
}
.jobs-section .intro {
    color:#bdcdd0
}
.jobs-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.job {
    background:#ffffff09;
    border:1px solid #ffffff25;
    border-radius:16px;
    padding:22px;
    display:flex;
    flex-direction:column
}
.job .tag {
    background:#d9f18214;
    color:var(--lime);
    align-self:flex-start
}
.job h3 {
    font-size:1.2rem;
    margin-bottom:10px
}
.job p {
    color:#bdcdd0;
    font-size:.79rem
}
.job .meta {
    color:#bdcdd0;
    margin:18px 0
}
.job button {
    background:none;
    border:0;
    padding:0;
    color:var(--lime);
    font-size:.78rem;
    font-weight:750;
    text-align:left;
    margin-top:auto
}
.jobs-section .demo-note {
    color:#bdcdd0
}
.community {
    background:var(--mint);
    border-radius:24px;
    padding:36px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:45px;
    align-items:center;
    margin:57px 0
}
.community h2 {
    margin:10px 0 15px
}
.community p {
    color:var(--muted);
    font-size:.9rem
}
.community-text {
    font-size:1.05rem!important;
    color:var(--ink)!important;
    line-height:1.6
}
.newsletter {
    border:1px solid var(--line);
    background:white;
    border-radius:24px;
    padding:36px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
    margin:58px 0
}
.newsletter h2 {
    font-size:2rem;
    margin:10px 0 13px
}
.newsletter p {
    font-size:.85rem;
    color:var(--muted)
}
.newsletter label {
    font-size:.78rem;
    font-weight:700
}
.email-row {
    display:flex;
    gap:9px;
    margin-top:10px
}
.email-row input {
    flex:1;
    min-width:0;
    border:1px solid #b7c9c0;
    border-radius:99px;
    padding:12px 16px;
    font-size:.83rem
}
.newsletter .fine {
    font-size:.68rem;
    margin-top:12px
}
.newsletter .status {
    font-size:.78rem;
    color:var(--teal);
    margin-top:10px
}
footer {
    border-top:1px solid var(--line);
    padding:36px 0 25px
}
.footer-grid {
    display:grid;
    grid-template-columns:1.7fr 1fr 1fr 1fr;
    gap:35px
}
footer p {
    font-size:.8rem;
    color:var(--muted);
    max-width:330px;
    margin-top:14px
}
footer h3 {
    font-size:.8rem;
    letter-spacing:0;
    margin-bottom:15px
}
footer ul {
    list-style:none;
    padding:0;
    margin:0;
    font-size:.78rem;
    color:var(--muted)
}
footer li {
    margin-bottom:8px
}
footer a:hover {
    text-decoration:underline
}
.footer-bottom {
    display:flex;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid var(--line);
    padding-top:19px;
    margin-top:30px;
    font-size:.67rem;
    color:var(--muted)
}
dialog {
    border:1px solid var(--line);
    border-radius:22px;
    width:min(710px,calc(100% - 30px));
    max-height:85vh;
    background:var(--paper);
    color:var(--ink);
    padding:0
}
dialog::backdrop {
    background:#112f3dc9;
    backdrop-filter:blur(4px)
}
.modal-inner {
    padding:33px
}
.modal-close {
    float:right;
    border:1px solid var(--line);
    border-radius:99px;
    background:white;
    padding:6px 13px;
    font-size:.76rem
}
.modal-inner h2 {
    font-size:2rem;
    margin:14px 0 17px;
    clear:both
}
.modal-inner p {
    font-size:.9rem;
    color:var(--muted);
    margin:15px 0
}
.modal-inner .notice {
    font-size:.75rem;
    padding:15px;
    background:var(--mint);
    border-radius:10px;
    color:var(--ink)
}
.modal-inner dl {
    font-size:.8rem
}
.modal-inner dt {
    font-weight:700;
    margin-top:10px
}
.modal-inner dd {
    margin:0;
    color:var(--muted)
}
@media(max-width:1150px) {
    .brand-note {
        display:none
    }
    nav {
        gap:16px
    }
    .header-main {
        gap:17px
    }
    .card.main {
        display:flex
    }
    .hero {
        gap:30px
    }
    .news-layout {
        grid-template-columns:minmax(0,1fr) 280px
    }
}
@media(max-width:950px) {
    .header-main {
        flex-wrap:wrap;
        padding:12px 0;
        min-height:78px
    }
    .header-cta {
        margin-left:auto
    }
    nav {
        order:3;
        width:100%;
        margin-left:0;
        justify-content:center;
        padding:3px 0 5px;
        gap:22px
    }
    .hero {
        grid-template-columns:1fr 1fr;
        gap:22px
    }
    .hero-art svg {
        height:390px
    }
    .knowledge-layout {
        grid-template-columns:1fr
    }
    .knowledge-layout>.panel {
        display:none
    }
    .blogs-grid {
        grid-template-columns:1fr 1fr
    }
    .blogs-grid>.card:last-child {
        grid-column:1/-1
    }
    .training-grid {
        grid-template-columns:1fr
    }
    .training-card {
        display:grid;
        grid-template-columns:1fr 1fr;
        column-gap:24px
    }
    .training-card .tag {
        grid-column:1/-1;
        justify-self:start
    }
    .training-card h3 {
        grid-column:1
    }
    .training-card p {
        grid-column:1
    }
    .training-info {
        grid-column:2;
        grid-row:2/4
    }
    .training-card .btn {
        grid-column:1/-1;
        justify-self:start
    }
}
@media(max-width:760px) {
    .wrap {
        width:calc(100% - 32px)
    }
    .header-main {
        padding:0;
        min-height:73px
    }
    .menu-toggle {
        display:block
    }
    nav {
        display:none;
        padding:9px 0 18px;
        justify-content:flex-start;
        flex-wrap:wrap;
        gap:14px 20px
    }
    nav.open {
        display:flex
    }
    .hero {
        grid-template-columns:1fr;
        padding-top:31px
    }
    .hero h1 {
        font-size:3.35rem
    }
    .hero-art svg {
        height:330px
    }
    .quick-grid {
        grid-template-columns:1fr 1fr
    }
    .news-layout {
        grid-template-columns:1fr
    }
    .sidebar {
        display:grid;
        grid-template-columns:1fr 1fr
    }
    .sidebar>.panel:first-child {
        grid-column:1/-1
    }
    .card.main {
        display:grid;
        grid-template-columns:1fr 1fr
    }
    .card.main h3 {
        font-size:1.5rem
    }
    .card.main .art {
        min-height:260px
    }
    .hub {
        padding:23px
    }
    .jobs-grid {
        grid-template-columns:1fr
    }
    .community,.newsletter {
        grid-template-columns:1fr;
        gap:24px;
        padding:28px
    }
    .footer-grid {
        grid-template-columns:repeat(3,1fr);
        gap:25px
    }
    .footer-brand {
        grid-column:1/-1
    }
    .doc {
        grid-template-columns:44px 1fr
    }
    .doc-actions {
        grid-column:2;
        flex-direction:row;
        flex-wrap:wrap
    }
    .section {
        margin:43px 0
    }
    .banner {
        align-items:flex-start
    }
    .leader {
        margin-bottom:35px
    }
    .discipline-band {
        margin-bottom:23px
    }
}
@media(max-width:510px) {
    .utility {
        font-size:.62rem
    }
    .utility span {
        max-width:210px
    }
    .header-cta {
        display:none
    }
    .menu-toggle {
        margin-left:auto
    }
    .hero h1 {
        font-size:2.9rem
    }
    .hero-art svg {
        height:300px
    }
    .hero-copy {
        font-size:.96rem
    }
    .hero-small {
        font-size:.72rem
    }
    .disciplines span {
        font-size:.66rem;
        padding:5px 9px
    }
    .quick-grid {
        gap:10px
    }
    .quick {
        padding:16px
    }
    .quick h3 {
        font-size:.91rem
    }
    .quick p {
        font-size:.68rem
    }
    .news-grid,.blogs-grid {
        grid-template-columns:1fr
    }
    .card.main {
        display:flex
    }
    .main .art {
        min-height:200px
    }
    .sidebar {
        grid-template-columns:1fr
    }
    .sidebar>.panel:first-child {
        grid-column:auto
    }
    .section-head {
        align-items:flex-start
    }
    .section-head .link {
        font-size:.7rem
    }
    .section-head h2 {
        font-size:1.9rem
    }
    .results {
        grid-template-columns:1fr
    }
    .hub-controls {
        flex-direction:column
    }
    .hub select {
        max-width:none;
        width:100%
    }
    .hub {
        padding:20px 17px
    }
    .doc {
        padding:17px;
        gap:13px
    }
    .doc h3 {
        font-size:.96rem
    }
    .doc-tools .search {
        max-width:none;
        flex-basis:100%;
        margin-top:-5px
    }
    .training-card {
        display:flex;
        padding:22px
    }
    .training-card .tag {
        align-self:flex-start
    }
    .banner {
        flex-direction:column;
        gap:12px
    }
    .jobs-section {
        padding:25px 20px
    }
    .jobs-section .section-head {
        display:block
    }
    .jobs-section .section-head>a {
        display:inline-block;
        margin-top:15px
    }
    .community h2 {
        font-size:1.9rem
    }
    .newsletter h2 {
        font-size:1.8rem
    }
    .email-row {
        flex-direction:column
    }
    .footer-grid {
        grid-template-columns:1fr 1fr
    }
    .footer-bottom {
        flex-direction:column;
        gap:7px
    }
    .modal-inner {
        padding:25px
    }
    .modal-inner h2 {
        font-size:1.65rem
    }
    .training-section .section-head {
        display:block
    }
    .training-section .section-head>a {
        display:inline-block;
        margin-top:13px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    * {
        transition:none!important
    }
}

/* Centraal logo: header en footer, op alle pagina's. */
.brand .okvisie-logo-image,
.footer-logo .okvisie-logo-image {
    display: block;
    width: 175px;
    height: auto;
    flex-shrink: 0;
}

.footer-logo {
    display: inline-block;
}

.footer-logo .okvisie-logo-image {
    width: 210px;
}

@media (max-width: 510px) {
    .brand .okvisie-logo-image {
        width: 150px;
    }

    .footer-logo .okvisie-logo-image {
        width: 185px;
    }
}
/* Sidebar: twee gelijk uitgelijnde advertentieposities */
.sidebar.sidebar-advertisements {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-content: start;
}

.sidebar-advertisements > .sidebar-ad {
    display: grid;
    grid-template-rows: auto 1fr auto;
    justify-items: center;
    align-items: center;

    width: 100%;
    height: 300px;
    min-height: 300px;
    padding: 28px 24px;
    gap: 16px;
}

.sidebar-advertisements > .sidebar-ad p {
    max-width: 250px;
    margin: 0;
    text-align: center;
}

.sidebar-advertisements > .sidebar-ad a {
    align-self: end;
}

.sidebar-advertisements > .sidebar-knowledge {
    grid-column: 1 / -1;
}

/* Tablet: advertenties naast elkaar, documentenbank eronder */
@media (min-width: 511px) and (max-width: 760px) {
    .sidebar.sidebar-advertisements {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobiel: beide advertenties onder elkaar */
@media (max-width: 510px) {
    .sidebar-advertisements > .sidebar-ad {
        height: 280px;
        min-height: 280px;
    }
}
/* Deelknoppen bij nieuwsartikelen */
.article-share-buttons a[href^="https://www.linkedin.com/"] {
    background: #0a66c2;
    border-color: #0a66c2;
    color: #fff;
}

.article-share-buttons a[href^="https://www.facebook.com/"] {
    background: #1877f2;
    border-color: #1877f2;
    color: #fff;
}

.article-share-buttons a[href^="https://wa.me/"] {
    background: #25d366;
    border-color: #25d366;
    color: #123b25;
}

/* E-mail en overige acties in de OK Visie-stijl */
.article-share-buttons a[href^="mailto:"] {
    background: #00787c;
    border-color: #00787c;
    color: #fff;
}

.article-share-buttons #article-copy,
.article-share-buttons #article-native-share {
    background: #edf5f1;
    border-color: #b9d4c5;
    color: #245b50;
}

/* Hover: behoud de kleur en maak de knop iets donkerder */
.article-share .article-share-buttons a:hover,
.article-share .article-share-buttons button:hover {
    filter: brightness(0.92);
}

/* Duidelijk zichtbaar bij toetsenbordbediening */
.article-share-buttons a:focus-visible,
.article-share-buttons button:focus-visible {
    outline: 3px solid #183c3c;
    outline-offset: 3px;
}
/* Socialmedia-logo’s bij de bestaande deelknoppen; tekstlabels blijven behouden. */
.article-share .article-share-buttons a[href^="https://www.linkedin.com/"] {background:#fff;border-color:#0a66c2;color:#0a66c2;gap:10px;}
.article-share .article-share-buttons a[href^="https://www.linkedin.com/"]::before {content:"";display:inline-block;width:24px;height:24px;flex:0 0 24px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%230a66c2%22%3E%3Cpath%20d%3D%22M20.45%202H3.55C2.69%202%202%202.68%202%203.52v16.96c0%20.84.69%201.52%201.55%201.52h16.9c.86%200%201.55-.68%201.55-1.52V3.52c0-.84-.69-1.52-1.55-1.52ZM7.93%2018.75H4.98V9.2h2.95v9.55ZM6.45%207.9a1.71%201.71%200%201%201%200-3.42%201.71%201.71%200%200%201%200%203.42Zm12.3%2010.85H15.8V14.1c0-1.11-.02-2.54-1.55-2.54-1.55%200-1.79%201.21-1.79%202.46v4.73H9.51V9.2h2.83v1.3h.04c.39-.74%201.36-1.52%202.79-1.52%202.99%200%203.58%201.97%203.58%204.53v5.24Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
.article-share .article-share-buttons a[href^="https://www.linkedin.com/"]:hover {background:#f2f6f4;filter:none;}
.article-share .article-share-buttons a[href^="https://www.facebook.com/"] {background:#fff;border-color:#1877f2;color:#1877f2;gap:10px;}
.article-share .article-share-buttons a[href^="https://www.facebook.com/"]::before {content:"";display:inline-block;width:24px;height:24px;flex:0 0 24px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%231877f2%22%3E%3Cpath%20d%3D%22M22%2012a10%2010%200%201%200-11.56%209.88v-6.99H7.9V12h2.54V9.8c0-2.51%201.49-3.9%203.77-3.9%201.09%200%202.23.2%202.23.2v2.46h-1.26c-1.24%200-1.62.77-1.62%201.56V12h2.77l-.44%202.89h-2.33v6.99A10%2010%200%200%200%2022%2012Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
.article-share .article-share-buttons a[href^="https://www.facebook.com/"]:hover {background:#f2f6f4;filter:none;}
.article-share .article-share-buttons a[href^="https://wa.me/"] {background:#fff;border-color:#128c4a;color:#128c4a;gap:10px;}
.article-share .article-share-buttons a[href^="https://wa.me/"]::before {content:"";display:inline-block;width:24px;height:24px;flex:0 0 24px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23128c4a%22%3E%3Cpath%20d%3D%22M20.52%203.48A11.9%2011.9%200%200%200%2012.05%200C5.45%200%20.08%205.37.08%2011.97c0%202.11.55%204.17%201.6%205.99L0%2024l6.2-1.63a11.97%2011.97%200%200%200%205.84%201.49h.01C18.65%2023.86%2024%2018.49%2024%2011.9c0-3.2-1.24-6.2-3.48-8.42ZM12.05%2021.84a9.94%209.94%200%200%201-5.07-1.39l-.36-.21-3.68.97.98-3.59-.23-.37a9.9%209.9%200%200%201-1.52-5.28c0-5.49%204.47-9.96%209.97-9.96a9.9%209.9%200%200%201%207.04%202.92%209.9%209.9%200%200%201%202.92%207.04c0%205.49-4.47%209.87-10.05%209.87Zm5.46-7.43c-.3-.15-1.77-.87-2.04-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94%201.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.14-.14.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51h-.57c-.2%200-.52.07-.8.37-.27.3-1.04%201.02-1.04%202.49s1.07%202.89%201.22%203.09c.15.2%202.1%203.21%205.09%204.5.71.31%201.26.49%201.69.63.71.23%201.35.2%201.86.12.57-.09%201.77-.72%202.02-1.42.25-.7.25-1.3.17-1.42-.07-.12-.27-.2-.57-.35Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
.article-share .article-share-buttons a[href^="https://wa.me/"]:hover {background:#f2f6f4;filter:none;}
/* Verberg de zichtbare resultaatteller in de zoeksectie. */
#hub-results .hub-result-count {
    display: none;
}/* Subtiele hyperlinks in de artikeltekst. */
.news-body a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: #8eaaa5;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.news-body a:hover {
    color: #12696f;
    text-decoration-color: currentColor;
}

.news-body a:focus-visible {
    outline: 2px solid #12696f;
    outline-offset: 3px;
    border-radius: 2px;
}
/* Inhoudstypeknoppen in de zoeksectie op de homepage. */
#vind .chips {
    gap: 10px;
}

#vind .chip {
    background: #edf5f0;
    color: #24594f;
    border: 1px solid #bdd5c9;
    border-radius: 999px;
    padding: 10px 18px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

/* Aanwijzen met de muis. */
@media (hover: hover) {
    #vind .chip:hover {
        background: #dcece2;
        border-color: #7fae99;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(36, 89, 79, 0.12);
    }
}

/* Het geselecteerde inhoudstype. */
#vind .chip[aria-pressed="true"] {
    background: #12696f;
    color: #fff;
    border-color: #12696f;
    box-shadow: 0 3px 9px rgba(18, 105, 111, 0.18);
}

/* Feedback tijdens het indrukken. */
#vind .chip:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Zichtbare selectie bij toetsenbordgebruik. */
#vind .chip:focus-visible {
    outline: 2px solid #12696f;
    outline-offset: 3px;
}

/* Geen beweging als de bezoeker dat heeft ingesteld. */
@media (prefers-reduced-motion: reduce) {
    #vind .chip {
        transition: none;
    }

    #vind .chip:hover,
    #vind .chip:active {
        transform: none;
    }
}
/* Lokale leeslijst: bovenbalk, artikelactie en overzicht. */
.utility .wrap{align-items:center}
.utility .utility-actions{display:flex;align-items:center;justify-content:flex-end;gap:18px;flex-wrap:wrap}
.utility .utility-mail{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.utility a.utility-saved{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:7px 12px;border:1px solid rgba(220,241,141,.36);border-radius:8px;color:var(--lime,#dcf18d);background:rgba(220,241,141,.07);font-size:.73rem;font-weight:600;line-height:1.4;text-decoration:none;white-space:nowrap;transition:background-color 160ms ease,border-color 160ms ease}
.utility .utility-saved svg{flex:0 0 18px}
.utility .utility-saved .saved-count{min-width:18px;padding:1px 5px;border-radius:10px;background:rgba(220,241,141,.15);font-size:.65rem;text-align:center}
.utility .utility-saved [hidden]{display:none!important}
.utility a.utility-saved:focus-visible{outline:2px solid var(--lime,#dcf18d);outline-offset:3px}
.article-save-bar{display:flex;align-items:center;flex-wrap:wrap;gap:9px 14px;margin:18px 0}
.article-save-button{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid #c4d9ce;border-radius:8px;background:#f2f7f3;color:#24594f;font:inherit;font-size:.85rem;font-weight:600;line-height:1.4;cursor:pointer}
.article-save-button svg{flex-shrink:0}
.article-save-button[aria-pressed="true"]{background:#e2eee5;border-color:#7caa94;color:#164d40}
.article-save-button[aria-pressed="true"] svg{fill:currentColor}
.article-save-button:focus-visible,.saved-page button:focus-visible,.saved-page a:focus-visible{outline:2px solid #12696f;outline-offset:4px}
.article-save-hint{font-size:.77rem;color:#5a7067}
.article-save-status{flex-basis:100%;font-size:.82rem;color:#496256;margin:0}
.article-save-status:empty{display:none}
.saved-page{padding-top:40px;padding-bottom:60px;max-width:1000px}
.saved-page h1{margin-bottom:16px}
.saved-intro{max-width:720px;color:#52675d;line-height:1.7}
.saved-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin:28px 0 18px}
.saved-toolbar p{margin:0;color:#52675d;font-size:.9rem}
.saved-clear{background:none;border:0;padding:9px 0;color:#6b5959;text-decoration:underline;text-underline-offset:4px;font:inherit;font-size:.85rem;cursor:pointer}
.saved-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.saved-item{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;background:#fff;border:1px solid #d9e4dc;border-radius:12px;padding:22px}
.saved-item-content{min-width:0}
.saved-item-type{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#5c7869}
.saved-item h2{font-size:1.18rem;line-height:1.4;margin:8px 0;overflow-wrap:anywhere}
.saved-item h2 a{color:#183e44;text-decoration:none}
.saved-item-date{font-size:.77rem;color:#60746a;margin:0}
.saved-remove{flex-shrink:0;border:1px solid #d9e3dc;background:#f7f9f6;color:#596c62;border-radius:7px;padding:8px 10px;font:inherit;font-size:.75rem;cursor:pointer}
.saved-empty,.saved-error{padding:28px;border:1px solid #d9e4dc;border-radius:12px;background:#f4f7f3;line-height:1.7}
.saved-error{background:#fff6e5;border-color:#e5d3aa}
.saved-page [hidden]{display:none!important}
.saved-page-status{font-size:.85rem;color:#52675d}
@media(hover:hover){.utility a.utility-saved:hover{background:rgba(220,241,141,.15);border-color:rgba(220,241,141,.65)}.article-save-button:hover{background:#e7f0e9}.saved-item h2 a:hover{color:#12696f;text-decoration:underline;text-underline-offset:4px}.saved-remove:hover{background:#edf2ed}}
@media(max-width:680px){.utility .wrap{flex-wrap:wrap;gap:7px}.utility .utility-actions{margin-left:auto;gap:12px}.utility .utility-tagline{font-size:.65rem}.utility a.utility-saved{font-size:.68rem;padding:6px 9px}}
@media(max-width:480px){.utility .utility-tagline{display:none}.utility .utility-actions{width:100%;justify-content:space-between;margin-left:0;gap:8px}.saved-page{padding-top:28px}.saved-item{padding:18px;gap:14px;flex-direction:column}.saved-remove{align-self:flex-end}}
@media(prefers-reduced-motion:reduce){.utility a.utility-saved{transition:none}}
/* Documentenblok op de homepage uitlichten. */
#documenten.section {
    background: #eaf2ec;
    border: 1px solid #d7e4da;
    border-radius: 20px;
    padding: 40px 32px;
    box-sizing: border-box;
}

/* Witte documentkaarten steken rustig af tegen de achtergrond. */
#documenten .real-doc {
    background: #fff;
}

/* Aangepaste binnenruimte op kleinere schermen. */
@media (max-width: 700px) {
    #documenten.section {
        padding: 28px 20px;
        border-radius: 16px;
    }
}

@media (max-width: 480px) {
    #documenten.section {
        padding: 24px 16px;
    }
}
/* Documenttegels duidelijker op de lichtgroene sectieachtergrond. */
#documenten .doc.real-doc {
    background: #fff;
    border: 1px solid #c7d8cd;
    border-left: 3px solid #79a78f;
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(23, 47, 58, 0.06);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
}

/* Het PDF-icoon krijgt een eigen rustig kleurvlak. */
#documenten .real-doc .pdf {
    background: #e4eee7;
    border-color: #bdd1c3;
    color: #24594f;
}

/* Het informatieblok rechts onderscheidt zich ook van de sectie. */
#documenten .knowledge-layout > .panel.mint {
    background: #dbe9df;
    border: 1px solid #bfd3c5;
}

/* Subtiele reactie, zonder bewegende tegels. */
@media (hover: hover) {
    #documenten .doc.real-doc:hover {
        border-color: #9fbeab;
        border-left-color: #12696f;
        box-shadow: 0 5px 16px rgba(23, 47, 58, 0.09);
    }
}

/* Ook zichtbaar bij navigeren met het toetsenbord. */
#documenten .doc.real-doc:focus-within {
    border-left-color: #12696f;
    box-shadow: 0 0 0 2px rgba(18, 105, 111, 0.15);
}

@media (prefers-reduced-motion: reduce) {
    #documenten .doc.real-doc {
        transition: none;
    }
}
/* Verberg de grote homepage-illustratie op mobiele schermen. */
@media (max-width: 760px) {
    .hero .hero-art {
        display: none;
    }

    .hero {
        grid-template-columns: 1fr;
    }
}
/* Breder openbaar websitelayout, met behoud van smalle accountformulieren. */
@media(min-width:1000px){
 .wrap{width:min(1600px,calc(100% - 64px));margin-left:auto;margin-right:auto;}
 .wrap.account-page{max-width:1240px;}
 .wrap.account-page.account-login-page{max-width:620px;}
}