@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Newsreader:ital,wght@0,500;0,600;1,400;1,500&family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap');

:root {
    --ink: #1a3a5c;
    --muted: #556578;
    --paper: #fbfaf7;
    --white: #fff;
    --green: #1d7470;
    --lime: #f1dfb4;
    --sage: #e7f1f0;
    --rule: #dde3ea;
    --orange: #a3532f;
    --sand: #f4eee2;
    --sans: 'DM Sans', system-ui, sans-serif;
    --serif: 'Newsreader', Georgia, serif;
    --arabic: 'Noto Sans Arabic', sans-serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 24px
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 15px/1.65 var(--sans);
    -webkit-font-smoothing: antialiased
}

body[dir=rtl] {
    font-family: var(--arabic)
}

h1,
h2,
h3,
p {
    margin-top: 0
}

h1,
h2,
h3 {
    line-height: 1.2
}

button,
input,
select {
    font: inherit
}

button,
a,
input,
select {
    touch-action: manipulation
}

button {
    cursor: pointer
}

a {
    color: inherit;
    text-underline-offset: 4px
}

button:disabled {
    cursor: default
}

[hidden] {
    display: none !important
}

:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 4px
}

.wrap {
    max-width: 1264px;
    padding-inline: 40px;
    margin-inline: auto
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap
}

.skip-link {
    position: absolute;
    top: -80px;
    left: 12px;
    padding: 12px;
    background: var(--ink);
    color: #fff;
    z-index: 10
}

.skip-link:focus {
    top: 12px
}

.utility {
    background: var(--ink);
    color: #d3dde8;
    font-size: 10px;
    letter-spacing: .25px
}

.utility .wrap {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-block: 9px
}

.utility a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none
}

.dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #238a85
}

.utility .dot {
    background: var(--lime)
}

.masthead {
    background: var(--white);
    border-bottom: 1px solid var(--rule)
}

.masthead-inner {
    display: flex;
    align-items: center;
    gap: 36px;
    min-height: 94px
}

.wordmark {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    white-space: nowrap
}

.brand-symbol {
    display: block;
    width: 52px;
    height: 52px;
    flex-shrink: 0
}

.wordmark-en {
    display: block;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.8px;
    line-height: 1.2
}

.wordmark-en>span,
.footer-wordmark>span {
    color: var(--orange)
}

.wordmark-ar {
    display: block;
    font: 10px/1.7 var(--arabic);
    color: var(--muted);
    margin-top: 4px
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-inline-start: auto
}

.header-nav a {
    font-size: 13px;
    text-decoration: none;
    padding-block: 10px
}

.header-nav a:hover {
    color: var(--green);
    text-decoration: underline
}

.lang-toggle {
    border: 1px solid var(--rule);
    border-radius: 7px;
    padding: 8px 16px;
    min-height: 42px;
    background: var(--paper);
    color: var(--ink);
    font: 13px var(--arabic)
}

.hero {
    display: grid;
    grid-template-columns: 1.23fr 1fr;
    gap: 80px;
    align-items: center;
    padding-block: 75px 80px
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    color: var(--green);
    margin-bottom: 18px
}

.eyebrow-line {
    width: 25px;
    height: 2px;
    background: var(--orange)
}

h1 {
    font-size: clamp(40px, 4.5vw, 62px);
    line-height: 1.04;
    letter-spacing: -2.7px;
    margin-bottom: 23px;
    font-weight: 700
}

h1 em {
    display: inline-block;
    font: 400 .81em/1.15 var(--serif);
    color: var(--green);
    letter-spacing: -1.2px;
    margin-top: 11px
}

.hero-description {
    font-size: 15px;
    line-height: 1.8;
    max-width: 440px;
    color: var(--muted);
    margin-bottom: 26px
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: center
}

.button {
    min-height: 49px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    border-radius: 6px;
    padding: 12px 20px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--rule)
}

.primary {
    background: var(--ink);
    color: var(--white);
    border-color: var(--ink)
}

.primary:hover {
    background: var(--green)
}

.secondary {
    background: var(--white);
    color: var(--ink)
}

.secondary:hover {
    background: var(--sage)
}

.text-link {
    font-size: 12px;
    font-weight: 600;
    text-decoration: none
}

.text-link:hover {
    text-decoration: underline
}

.hero-proof {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 23px;
    max-width: 430px;
    color: var(--muted);
    font-size: 10px
}

.proof-symbol {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--sage);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--green)
}

.hero-visual {
    position: relative;
    isolation: isolate;
    border-radius: 20px;
    background: #e8eef3;
    min-height: 410px;
    padding: 32px 33px 20px;
    overflow: hidden
}

.visual-orbit {
    position: absolute;
    z-index: -1;
    border: 1px solid #c5d3df;
    border-radius: 50%;
    height: 360px;
    width: 360px;
    top: -135px;
    right: -110px
}

.orbit-two {
    height: 470px;
    width: 470px;
    top: -190px;
    right: -165px
}

.visual-label {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 9px;
    letter-spacing: 1.7px;
    font-weight: 700;
    position: relative;
    margin-bottom: 22px
}

.visual-spark {
    position: absolute;
    color: #7fb3ae;
    font: 50px var(--serif);
    z-index: -1
}

.spark-one {
    right: 18px;
    top: 85px;
    transform: rotate(12deg)
}

.spark-two {
    bottom: 25px;
    left: 12px;
    font-size: 80px;
    color: #b9cfdb
}

.spotlight {
    position: relative;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 14px 40px #1a3a5c12;
    transform: rotate(-2deg);
    margin-inline-end: 15px;
    min-height: 227px
}

.spotlight-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px
}

.spotlight-icon {
    background: var(--ink);
    color: var(--lime);
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    font-size: 22px;
    border-radius: 9px
}

.pill {
    display: inline-block;
    background: var(--sage);
    color: var(--green);
    padding: 4px 8px;
    font-size: 9px;
    line-height: 1.6;
    font-weight: 600;
    border-radius: 4px
}

.pill.warm {
    background: #faf0de;
    color: #855b20
}

.spotlight-org {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 7px
}

.spotlight h2 {
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -.5px;
    margin-bottom: 12px;
    overflow-wrap: anywhere
}

.spotlight-meta {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 14px
}

.spotlight-link {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--rule);
    padding-top: 13px;
    font-size: 11px;
    text-decoration: none;
    font-weight: 600
}

.visual-stats {
    display: flex;
    align-items: center;
    gap: 28px;
    background: var(--ink);
    color: white;
    border-radius: 10px;
    padding: 18px 23px;
    position: relative;
    margin-top: 14px;
    margin-inline-start: 34px;
    box-shadow: 0 8px 25px #1a3a5c15
}

.visual-stats div {
    display: flex;
    flex-direction: column
}

.visual-stats strong {
    font-size: 26px;
    line-height: 1.15;
    font-weight: 500
}

.visual-stats div span {
    font-size: 9px;
    color: #c4d4e0;
    margin-top: 4px
}

.stats-arrow {
    margin-inline-start: auto;
    color: var(--lime);
    font-size: 30px
}

.visual-caption {
    font-size: 8px;
    letter-spacing: 2px;
    margin: 22px 0 0;
    text-align: end;
    color: var(--muted)
}

.trust-strip {
    background: var(--sand);
    border-block: 1px solid #e7e5d8
}

.trust-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-block: 20px;
    gap: 30px
}

.trust-inner>div {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center
}

.trust-inner>div+div {
    border-inline-start: 1px solid #dcdccc
}

.trust-inner>div>span {
    font-size: 10px;
    color: var(--orange);
    font-weight: 700
}

.trust-inner p {
    font-size: 12px;
    margin: 0;
    font-weight: 500
}

.content-area {
    padding-block: 65px 70px
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 35px;
    margin-bottom: 26px
}

.section-head h1,
.section-head h2 {
    font-size: 36px;
    letter-spacing: -1.4px;
    margin-bottom: 10px
}

.section-head .eyebrow {
    font-size: 9px;
    margin-bottom: 12px
}

.section-description {
    font-size: 13px;
    color: var(--muted);
    margin: 0;
    max-width: 560px
}

.section-aside {
    text-align: end;
    max-width: 270px;
    flex-shrink: 0
}

.live-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 7px
}

.stamp {
    font-size: 10px;
    color: var(--muted);
    margin: 8px 0 0
}

.stamp.stale {
    color: #916333
}

.search-panel {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr;
    border: 1px solid var(--rule);
    background: white;
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 4px 16px #1a3a5c04
}

.search-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-inline: 13px;
    min-width: 0
}

.search-icon {
    display: block;
    border: 1.7px solid #637489;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    position: relative;
    flex-shrink: 0
}

.search-icon:after {
    content: '';
    position: absolute;
    width: 7px;
    height: 1.7px;
    background: #637489;
    transform: rotate(45deg);
    bottom: -3px;
    right: -5px
}

.search-box input {
    border: 0;
    background: none;
    font-size: 13px;
    width: 100%;
    min-width: 0;
    color: var(--ink);
    min-height: 44px
}

.select-wrap {
    padding-inline: 20px;
    border-inline-start: 1px solid var(--rule);
    min-width: 0
}

.select-wrap label {
    display: block;
    font-size: 8px;
    color: var(--muted);
    letter-spacing: 1px;
    font-weight: 600
}

.select-wrap select {
    width: 100%;
    border: 0;
    background: transparent;
    font-size: 12px;
    color: var(--ink);
    min-height: 44px;
    padding-inline-end: 15px
}

.job-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-block: 23px 16px
}

.sector-filters,
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.sector-filters button,
.filters button {
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    min-height: 44px;
    border-radius: 5px;
    padding: 7px 13px
}

.sector-filters button[aria-pressed=true],
.filters button[aria-pressed=true] {
    background: var(--ink);
    border-color: var(--ink);
    color: white
}

.sort-control select {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    min-height: 44px;
    max-width: 145px
}

.results-line {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 17px;
    min-height: 27px
}

.results-line>span:first-child {
    color: var(--ink);
    font-weight: 600
}

.results-line button {
    background: transparent;
    border: 0;
    color: var(--green);
    text-decoration: underline;
    font-size: 11px;
    min-height: 30px
}

.saved-hint {
    margin-inline-start: auto;
    font-size: 10px
}

.jobs,
.cards,
.source-grid,
#externalJobs {
    list-style: none;
    padding: 0;
    margin: 0
}

.jobs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px
}

.jobs>li {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rule);
    border-radius: 10px;
    background: white;
    padding: 23px;
    transition: box-shadow .2s, border-color .2s
}

.jobs>li:hover {
    border-color: #a7b6c6;
    box-shadow: 0 8px 25px #1a3a5c08
}

.job-card-top {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 21px
}

.org-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--sage);
    color: var(--green);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -.3px
}

.org-avatar.ngo {
    background: #f5eadb;
    color: #85512d
}

.job-organisation {
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
    margin: 0;
    max-width: 170px;
    min-width: 0;
    overflow-wrap: anywhere
}

.save-job {
    margin-inline-start: auto;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    border-radius: 5px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--muted)
}

.save-job svg {
    width: 17px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5
}

.save-job[aria-pressed=true] {
    color: var(--green);
    background: var(--sage)
}

.save-job[aria-pressed=true] svg {
    fill: var(--green)
}

.job-title {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: -.25px;
    margin-bottom: 14px;
    overflow-wrap: anywhere
}

.job-title a {
    text-decoration: none
}

.job-title a:hover {
    color: var(--green);
    text-decoration: underline
}

.job-location {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 14px
}

.job-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 17px
}

.job-tags .pill {
    font-size: 11px
}

.job-reference {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 10px
}

.job-card-bottom {
    border-top: 1px solid var(--rule);
    padding-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto
}

.job-deadline {
    font-size: 12px;
    color: var(--muted);
    margin: 0
}

.job-deadline.urgent {
    color: #985b22
}

.apply-link {
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    color: var(--green);
    padding: 8px 0
}

.apply-link:hover {
    text-decoration: underline
}

.board-note {
    font-size: 12px;
    color: var(--muted);
    margin-block: 20px 0
}

.empty {
    padding: 40px 25px;
    text-align: center;
    border: 1px dashed #bcc8d4;
    border-radius: 9px;
    background: #fff
}

.empty h3 {
    font: 500 28px var(--serif);
    margin-bottom: 12px
}

.empty p {
    font-size: 13px;
    color: var(--muted);
    max-width: 430px;
    margin: 0 auto 18px
}

.empty-symbol {
    display: block;
    font-size: 34px;
    color: #7fa8b0;
    margin-bottom: 14px
}

.empty button {
    min-height: 42px;
    padding: 8px 18px;
    background: var(--ink);
    color: white;
    border: 0;
    border-radius: 5px;
    font-size: 12px
}

.empty a {
    font-size: 12px;
    font-weight: 600
}

.external-jobs {
    margin-block: 35px 75px;
    padding: 30px;
    background: var(--sage);
    border-radius: 11px;
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 40px
}

.external-jobs .eyebrow {
    font-size: 8px;
    margin-bottom: 10px
}

.external-jobs h3 {
    font-size: 21px;
    letter-spacing: -.5px;
    margin-bottom: 12px
}

.external-jobs p {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 0;
    max-width: 340px
}

#externalJobs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px
}

#externalJobs li {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0
}

#externalJobs a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #ffffffa8;
    border: 1px solid #d6dfe8;
    border-radius: 6px;
    padding: 12px 15px;
    font-size: 11px;
    text-decoration: none
}

#externalJobs a:after {
    content: '↗';
    color: var(--green);
    font-size: 17px
}

#externalJobs a:hover {
    background: white
}

.news-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px
}

.news-tools .stamp {
    text-align: end;
    max-width: 260px
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px
}

.cards>li {
    background: white;
    border: 1px solid var(--rule);
    border-radius: 9px;
    padding: 23px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden
}

.cards>li:before {
    content: '';
    height: 4px;
    background: var(--sage);
    position: absolute;
    inset: 0 0 auto
}

.cards>li:nth-child(3n+2):before {
    background: #ebddc4
}

.cards>li:nth-child(3n):before {
    background: #d5e0e2
}

.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 18px
}

.topic {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--green);
    width: 100%;
    margin-bottom: 2px
}

.card-title {
    font: 500 24px/1.2 var(--serif);
    letter-spacing: -.2px;
    margin-bottom: 13px;
    overflow-wrap: anywhere
}

.card-title a {
    text-decoration: none
}

.card-title a:hover {
    text-decoration: underline
}

.card-summary {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 20px
}

.read-link {
    font-size: 13px;
    font-weight: 600;
    margin-top: auto;
    text-decoration: none;
    padding-top: 12px
}

.read-link:hover {
    text-decoration: underline
}

.count {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap
}

#moreNews {
    display: flex;
    margin: 26px auto 0
}

.editor-note {
    background: var(--ink);
    color: white;
    padding: 34px;
    border-radius: 11px;
    margin-top: 35px
}

.editor-note .eyebrow {
    color: var(--lime)
}

.about {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 65px;
    align-items: center;
    padding: 48px;
    background: var(--ink);
    color: #fff;
    border-radius: 15px;
    margin-block: 70px
}

.about .eyebrow {
    color: var(--lime);
    font-size: 9px
}

.about h1,
.about h2 {
    font-size: 34px;
    letter-spacing: -1px;
    max-width: 440px;
    margin-bottom: 20px
}

.about p:not(.eyebrow) {
    font-size: 13px;
    color: #d2dde8;
    max-width: 560px
}

.about .muted {
    font-size: 11px !important;
    color: #aab9c8 !important;
    margin-bottom: 0
}

.about-art {
    height: 235px;
    position: relative;
    border: 1px solid #ffffff1c;
    border-radius: 50%;
    width: 235px;
    justify-self: center
}

.about-art:before,
.about-art:after {
    content: '';
    position: absolute;
    border: 1px solid #ffffff12;
    border-radius: 50%;
    inset: 22px
}

.about-art:after {
    inset: 44px
}

.about-art img {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 176px;
    height: 176px
}

.sources-section .section-description {
    max-width: 280px;
    font-size: 11px
}

.source-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px
}

.source-grid li {
    border: 1px solid var(--rule);
    border-radius: 7px;
    background: white;
    padding: 18px
}

.source-grid a {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 12px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none
}

.source-grid a:hover {
    text-decoration: underline
}

.source-grid small {
    font-size: 8px;
    color: var(--muted);
    font-weight: 400;
    white-space: nowrap;
    padding-top: 3px
}

.source-status {
    font-size: 11px;
    color: var(--muted);
    margin: 10px 0 0
}

.colophon {
    background: white;
    border-top: 1px solid var(--rule);
    padding-block: 28px
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    font-size: 11px;
    color: var(--muted)
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.6px;
    text-decoration: none
}

body[dir=rtl] .eyebrow,
body[dir=rtl] .visual-label,
body[dir=rtl] .visual-caption {
    letter-spacing: 0
}

body[dir=rtl] h1 {
    font-size: 48px;
    line-height: 1.4;
    letter-spacing: 0
}

body[dir=rtl] h1 em {
    font-family: var(--arabic);
    font-style: normal;
    font-size: .72em;
    letter-spacing: 0
}

body[dir=rtl] h2,
body[dir=rtl] h3 {
    letter-spacing: 0
}

body[dir=rtl] .card-title {
    font-family: var(--arabic);
    font-size: 19px;
    line-height: 1.6
}

body[dir=rtl] .lang-toggle {
    font-family: var(--sans)
}

body[dir=rtl] .spotlight {
    transform: rotate(2deg)
}

body[dir=rtl] .section-head h1,
body[dir=rtl] .section-head h2 {
    font-size: 30px
}

@media(max-width:1050px) {
    .hero {
        gap: 35px
    }

    .hero-visual {
        padding: 27px 24px 20px
    }

    .hero-actions {
        gap: 15px
    }

    .jobs,
    .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .header-nav {
        gap: 20px
    }

    .masthead-inner {
        gap: 24px
    }

    .source-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .about {
        gap: 35px;
        padding: 36px
    }

    .section-aside {
        max-width: 220px
    }

    .job-toolbar {
        align-items: start
    }

    .sector-filters button {
        font-size: 10px
    }

    .external-jobs {
        gap: 25px
    }

    .search-panel {
        grid-template-columns: 1.5fr 1fr 1fr
    }
}

@media(max-width:760px) {
    .wrap {
        padding-inline: 22px
    }

    .utility .wrap {
        padding-block: 8px
    }

    .utility .wrap>span {
        max-width: 240px;
        font-size: 9px
    }

    .utility a {
        font-size: 0
    }

    .utility a .dot {
        width: 7px;
        height: 7px
    }

    .masthead-inner {
        flex-wrap: wrap;
        min-height: 0;
        gap: 15px;
        padding-block: 18px
    }

    .wordmark-en {
        font-size: 20px
    }

    .brand-symbol {
        width: 40px;
        height: 40px
    }

    .lang-toggle {
        margin-inline-start: auto;
        min-height: 39px;
        font-size: 12px
    }

    .header-nav {
        order: 3;
        width: 100%;
        justify-content: space-between;
        margin: 0;
        border-top: 1px solid var(--rule);
        padding-top: 10px;
        gap: 15px
    }

    .header-nav a {
        font-size: 12px;
        padding-block: 10px;
        min-height: 44px;
        display: inline-flex;
        align-items: center
    }

    .hero {
        grid-template-columns: 1fr;
        padding-block: 38px 40px;
        gap: 32px
    }

    h1 {
        font-size: 49px;
        letter-spacing: -2px
    }

    .hero-description {
        font-size: 14px;
        max-width: 480px
    }

    .hero-visual {
        min-height: 0;
        max-width: 500px;
        width: 100%;
        padding: 24px
    }

    .spotlight {
        min-height: 0;
        margin-inline-end: 25px
    }

    .visual-stats {
        margin-inline-start: 45px;
        padding: 15px 20px
    }

    .spotlight h2 {
        font-size: 20px
    }

    .visual-caption {
        margin-top: 16px
    }

    .hero-proof {
        font-size: 9px
    }

    .trust-inner {
        gap: 12px;
        padding-block: 17px
    }

    .trust-inner>div {
        flex-direction: column;
        gap: 3px;
        text-align: center;
        align-items: center;
        padding-inline: 5px
    }

    .trust-inner p {
        font-size: 10px;
        line-height: 1.6
    }

    .trust-inner>div>span {
        font-size: 9px
    }

    .content-area {
        padding-block: 40px
    }

    .section-head {
        flex-direction: column;
        align-items: start;
        gap: 12px;
        margin-bottom: 22px
    }

    .section-head h1,
    .section-head h2 {
        font-size: 31px
    }

    .section-description {
        font-size: 12px
    }

    .section-aside {
        text-align: start;
        max-width: none
    }

    .live-label {
        display: none
    }

    .stamp {
        margin: 0;
        font-size: 9px
    }

    .search-panel {
        grid-template-columns: 1fr 1fr;
        padding: 12px
    }

    .search-box input {
        font-size: 16px
    }

    .search-box {
        grid-column: 1/-1;
        border-bottom: 1px solid var(--rule);
        padding: 0 7px 10px;
        margin-bottom: 12px
    }

    .select-wrap {
        padding-inline: 8px
    }

    .select-wrap:first-of-type {
        border-inline-start: 0
    }

    .select-wrap select {
        font-size: 16px;
        max-width: 100%
    }

    .job-toolbar {
        flex-direction: column;
        gap: 10px;
        margin-block: 19px 8px
    }

    .sector-filters {
        gap: 5px
    }

    .sector-filters button {
        font-size: 10px;
        min-height: 44px;
        padding: 6px 9px
    }

    .sort-control {
        align-self: flex-end
    }

    .results-line {
        flex-wrap: wrap;
        gap: 8px
    }

    .saved-hint {
        width: 100%;
        margin: 0;
        font-size: 9px
    }

    .jobs,
    .cards {
        grid-template-columns: 1fr;
        gap: 13px
    }

    .jobs>li {
        padding: 21px
    }

    .job-card-top {
        margin-bottom: 16px
    }

    .job-title {
        font-size: 17px
    }

    .job-organisation {
        max-width: 230px
    }

    .job-tags {
        margin-bottom: 17px
    }

    .job-card-bottom {
        padding-top: 10px
    }

    .external-jobs {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 24px;
        margin-block: 26px 45px
    }

    #externalJobs {
        grid-template-columns: 1fr
    }

    #externalJobs a {
        padding: 12px 15px
    }

    .news-tools {
        align-items: start;
        flex-direction: column;
        gap: 12px
    }

    .news-tools .stamp {
        text-align: start;
        max-width: none
    }

    .filters button {
        font-size: 10px;
        padding: 6px 10px;
        min-height: 44px
    }

    .card-title {
        font-size: 26px
    }

    .cards>li {
        padding: 23px
    }

    .about {
        grid-template-columns: 1fr;
        padding: 29px;
        gap: 20px;
        margin-block: 40px
    }

    .about-art {
        width: 125px;
        height: 125px;
        justify-self: start
    }

    .about-art img {
        width: 96px;
        height: 96px
    }

    .about-art:before {
        inset: 15px
    }

    .about-art:after {
        inset: 29px
    }

    .about h2 {
        font-size: 29px
    }

    .about p:not(.eyebrow) {
        font-size: 12px
    }

    .source-grid {
        grid-template-columns: 1fr
    }

    .sources-section .section-description {
        max-width: none
    }

    .footer-inner {
        flex-wrap: wrap;
        gap: 15px;
        font-size: 10px
    }

    .footer-inner>span {
        order: 3;
        width: 100%
    }

    .footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
        font-size: 17px
    }

    body[dir=rtl] h1 {
        font-size: 39px
    }

    body[dir=rtl] .section-head h1,
    body[dir=rtl] .section-head h2 {
        font-size: 27px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .jobs>li {
        transition: none
    }
}

/* Stats band */
.stats-band{background:var(--ink);color:#fff}
.stats-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-block:22px}
.stats-inner div{display:flex;flex-direction:column;align-items:center;text-align:center}
.stats-inner strong{font:600 clamp(26px,4vw,38px)/1.1 var(--serif);color:var(--lime)}
.stats-inner span{font-size:13px;opacity:.85}
@media(max-width:640px){.stats-inner{grid-template-columns:repeat(2,1fr)}}

/* Services */
.services{padding-block:56px 24px}
.service-grid{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.service{display:block;width:100%;height:100%;text-align:start;font:inherit;color:inherit;background:var(--white);border:1px solid var(--rule);border-radius:18px;padding:24px;text-decoration:none;cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s}
.service:hover,.service:focus-visible{transform:translateY(-3px);border-color:var(--green);box-shadow:0 12px 28px rgba(26,58,92,.12)}
.service-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--sage);font-size:22px;margin-bottom:14px}
.service h3{margin:0 0 6px;font:600 20px/1.25 var(--serif)}
.service p{margin:0;color:var(--muted);font-size:14.5px}
@media(prefers-reduced-motion:reduce){.service{transition:none}.service:hover{transform:none}}

/* Toolkit */
.toolkit{display:grid;grid-template-columns:1fr 1.3fr;gap:36px;margin-block:32px;padding:36px;background:var(--sand);border-radius:24px}
.toolkit h2{margin:0 0 10px;font:600 clamp(26px,3.5vw,36px)/1.15 var(--serif)}
.toolkit-progress{display:inline-block;margin-top:8px;padding:6px 14px;background:var(--lime);border-radius:99px;font-weight:700;font-size:13px}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.checklist label{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;background:var(--white);border:1px solid var(--rule);border-radius:12px;cursor:pointer}
.checklist input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--green);flex:none}
.checklist input:checked+span{text-decoration:line-through;color:var(--muted)}
@media(max-width:800px){.toolkit{grid-template-columns:1fr;padding:24px}}

/* Job card tools */
.job-tools{display:flex;gap:6px;flex-wrap:wrap}
.tool-btn{font:600 12.5px var(--sans);color:var(--green);background:transparent;border:1px solid var(--rule);border-radius:99px;padding:5px 12px;cursor:pointer}
.tool-btn:hover,.tool-btn:focus-visible{background:var(--sage);border-color:var(--green)}
.job-card-bottom{flex-wrap:wrap;gap:10px}

/* Directories: doctors, labs, hospitals */
.directory{margin-top:72px}
.search-panel.four{grid-template-columns:1.6fr 1fr 1fr 1fr}
.search-panel.two{grid-template-columns:2fr 1fr}
.directory-list{margin:0;padding:0;list-style:none}
.directory-list .job-card-bottom a.job-deadline{color:var(--ink);text-decoration:none;font-weight:600}
.directory-list .job-card-bottom a:focus-visible,.planner input:focus-visible,.checklist input:focus-visible,.danger-signs a:focus-visible{outline:3px solid var(--green);outline-offset:2px}
@media(max-width:760px){
  .search-panel.four,.search-panel.two{grid-template-columns:1fr 1fr}
  .search-panel.four .select-wrap:last-child{grid-column:1/-1;border-inline-start:0;border-top:1px solid var(--rule);margin-top:8px}
  .header-nav{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .header-nav a{white-space:nowrap;flex:none}
}
@media(min-width:761px) and (max-width:1250px){.header-nav{flex-wrap:wrap;gap:4px 18px;justify-content:flex-end}}

/* Pregnancy planning */
.pregnancy{margin-top:72px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.steps li{display:flex;gap:14px;background:var(--white);border:1px solid var(--rule);border-radius:14px;padding:20px}
.step-num{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--lime);font-weight:700}
.steps h3{margin:0 0 6px;font:600 17px/1.3 var(--serif)}
.steps p{margin:0;color:var(--muted);font-size:14px}
.planner-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-top:24px}
.planner,.danger-signs{border-radius:18px;padding:26px}
.planner{background:var(--sage)}
.planner h3,.danger-signs h3{margin:0 0 14px;font:600 20px/1.25 var(--serif)}
.planner label{display:block;font-weight:600;margin-bottom:6px}
.planner input{font:inherit;font-size:16px;min-height:44px;padding:8px 12px;border:1px solid #9fb0c2;border-radius:10px;background:var(--white);color:var(--ink);max-width:100%}
.planner input[aria-invalid=true]{border-color:var(--orange)}
.planner-note{font-size:13px;color:var(--muted);margin:8px 0}
.planner-error{color:var(--orange);font-weight:600}
.planner-summary{margin-top:16px;padding:16px;background:var(--white);border-radius:12px}
.planner-summary p{margin:0;color:var(--muted);font-size:13px}
.planner-summary strong{display:block;font:600 26px/1.2 var(--serif);margin-block:2px}
.planner-visits{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.planner-visits li{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:9px 14px;background:var(--white);border-radius:10px;font-size:14px}
.planner-visits li.past{opacity:.6}
.planner-visits time{font-weight:600}
.danger-signs{background:#fbeee8;border:1px solid #e6c4b4}
.danger-signs h3{color:#7a3a1f}
.danger-signs ul{margin:0 0 14px;padding-inline-start:20px}
.danger-signs li{margin-bottom:4px}
.danger-signs a{color:#7a3a1f;font-weight:700}
.pregnancy-checklist h3{margin:0 0 10px;font:600 24px/1.2 var(--serif)}
@media(max-width:800px){.planner-grid{grid-template-columns:1fr}}
.muted-note{color:var(--muted);font-style:italic;font-size:13px}
.directory>.button.secondary{display:flex;margin:26px auto 0}
.directory>.button.secondary[hidden]{display:none}
@media(max-width:760px){.search-panel.two .select-wrap{grid-column:1/-1;border-inline-start:0}}

/* Multi-page layout */
.section-head h1{line-height:1.12}
.about h1{line-height:1.15}
.header-nav a[aria-current=page]{color:var(--green);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.footer-nav{padding-top:18px;margin-top:18px;border-top:1px solid var(--rule)}
.footer-nav nav,.not-found nav{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px}
.footer-nav a,.not-found nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}
.footer-nav a:hover,.not-found nav a:hover{color:var(--green);text-decoration:underline}
.footer-nav a[aria-current=page]{font-weight:700;color:var(--green)}
.home-previews{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:56px}
.preview-panel{background:var(--white);border:1px solid var(--rule);border-radius:18px;padding:24px}
.preview-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.preview-head h2{margin:0;font:600 24px/1.2 var(--serif)}
.preview-head a{font-weight:700;color:var(--green);white-space:nowrap}
.preview-list{list-style:none;margin:0;padding:0}
.preview-list li{padding-block:14px;border-top:1px solid var(--rule)}
.preview-list li:first-child{border-top:0;padding-top:4px}
.preview-title{margin:0 0 4px;font-size:16px;line-height:1.35}
.preview-title a{color:var(--ink);text-decoration:none}
.preview-title a:hover{color:var(--green);text-decoration:underline}
.preview-meta{margin:0;color:var(--muted);font-size:13px}
.preview-list .job-deadline{margin:6px 0 0}
.preview-empty{color:var(--muted)}
.search-panel.one{grid-template-columns:1fr;margin-bottom:18px}
.home-about{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin-top:48px;padding:24px 28px;background:var(--sage);border-radius:18px}
.home-about p{margin:0;font-size:15px;max-width:60ch}
.not-found{padding-block:40px 20px;max-width:640px}
.not-found h1{font-size:clamp(30px,5vw,44px);letter-spacing:-1px;margin-bottom:12px}
.directory,.pregnancy{margin-top:0}
@media(max-width:800px){.home-previews{grid-template-columns:1fr}}

/* Booking platform banner on the Doctors page */
.booking-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-bottom:22px;padding:22px 26px;border-radius:18px;background:var(--ink);color:#fff}
.booking-banner strong{font:600 22px/1.25 var(--serif)}
.booking-banner p{margin:6px 0 0;opacity:.9;max-width:60ch}
.booking-banner .button{background:var(--lime);color:var(--ink)}

/* Platform listings: verified tag and the invitation for doctors, labs and hospitals to join */
.pill.verified{background:var(--ink);color:#fff}
.join-cta{margin:22px 0 0;padding:16px 20px;border:1px dashed var(--rule);border-radius:14px;color:var(--muted)}
.join-cta a{font-weight:600;color:var(--ink);white-space:nowrap}

/* Installing the site as an app (shown only where the device supports it) */
.install-app{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:18px;margin-top:18px;border-top:1px solid var(--rule);font-size:13px;color:var(--muted)}
.install-app[hidden],.install-app [hidden]{display:none}
.install-app p{margin:0}
.install-app button{font-family:inherit;cursor:pointer}