* {
    box-sizing: border-box;
}

html {
    /* The site spacing scale is authored in tenths (1.6rem = 16px). Without
       this base, every token is inflated by 60% in a default browser. */
    font-size: 62.5%;
    scroll-behavior: smooth;
    scroll-padding-top: 7rem;
}

body.site-body {
    min-width: 20rem;
    margin: 0;
    background: var(--almishqas-color-surface);
    color: var(--almishqas-color-ink);
    font-family: "Cairo", Tahoma, Arial, sans-serif;
    font-size: 1.6rem;
    line-height: 1.8;
}

.site-body img {
    max-width: 100%;
    height: auto;
}

.site-body a {
    color: var(--almishqas-color-brand-text);
}

.site-body a:focus-visible,
.site-body button:focus-visible,
.site-body input:focus-visible,
.site-body select:focus-visible,
.site-body textarea:focus-visible {
    outline: .3rem solid var(--almishqas-color-brand-ui);
    outline-offset: .3rem;
}

.sr-only {
    position: absolute;
    width: .1rem;
    height: .1rem;
    padding: 0;
    margin: -.1rem;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
    z-index: 3000;
    padding: .8rem 1.4rem;
    border-radius: .8rem;
    background: var(--almishqas-color-surface-raised);
    color: var(--almishqas-color-brand-strong);
    font-weight: 700;
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-container {
    width: min(100% - 4rem, 124rem);
    margin-inline: auto;
}

.site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 1000;
    min-height: 7.6rem;
    border-block-end: .1rem solid rgba(255, 255, 255, .24);
    background: var(--almishqas-color-brand-strong);
    box-shadow: 0 .5rem 2.4rem rgba(23, 42, 32, .16);
}

.header-inner {
    min-height: 7.6rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2.4rem;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    min-width: 17rem;
    color: var(--almishqas-color-on-brand);
    text-decoration: none;
}

.site-brand:hover,
.site-brand:focus {
    color: var(--almishqas-color-on-brand);
    text-decoration: none;
}

.site-brand .brand-mark__asset {
    display: block;
    width: 17.2rem;
    max-height: 4.6rem;
    object-fit: contain;
}

.site-brand__arabic {
    display: none;
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
}

.site-nav a,
.language-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 4.4rem;
    padding: .7rem 1.1rem;
    border-radius: 999rem;
    color: var(--almishqas-color-on-brand);
    font-size: 1.35rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.language-switch,
.language-switch span,
.language-switch i {
    color: var(--almishqas-color-on-brand) !important;
}

.site-nav a:hover,
.site-nav a:focus,
.site-nav a.is-active,
.language-switch:hover,
.language-switch:focus {
    background: rgba(255, 255, 255, .14);
    color: var(--almishqas-color-on-brand);
    text-decoration: none;
}

.site-nav a.is-active {
    box-shadow: inset 0 -.2rem 0 var(--almishqas-color-on-brand);
}

.language-switch {
    gap: .7rem;
    border: .1rem solid rgba(255, 255, 255, .45);
}

.nav-toggle {
    display: none;
    width: 4.6rem;
    height: 4.6rem;
    padding: 0;
    border: .1rem solid rgba(255, 255, 255, .45);
    border-radius: 1.2rem;
    background: transparent;
    color: var(--almishqas-color-on-brand);
    font-size: 2rem;
}

.site-main {
    min-height: 60vh;
}

/* Was clamp(5.6rem,8vw,9rem)/clamp(4.8rem,7vw,7rem) — 115px of top padding
   at 1440 on every single page in the site regardless of what that page
   held below it. Base now serves the mid-weight info pages (About, Contact,
   Privacy, News, Documents, Survey, branch Maps); --lg tapers up for the
   two primary directories and --sm tapers down for transactional/utility
   screens. The 640px query further down cuts all three again for mobile. */
.page-heading {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 3.6vw, 4.4rem) 0 clamp(2.6rem, 3.2vw, 3.8rem);
    background: var(--almishqas-color-surface-subtle-green);
    border-block-end: .1rem solid rgba(100, 128, 110, .35);
}

.page-heading--lg {
    padding: clamp(3.6rem, 4.4vw, 5.4rem) 0 clamp(3rem, 3.8vw, 4.4rem);
}

.page-heading--sm {
    padding: clamp(2.4rem, 3vw, 3.4rem) 0 clamp(2rem, 2.6vw, 2.8rem);
}

.page-heading::after {
    content: "";
    position: absolute;
    inline-size: clamp(18rem, 32vw, 42rem);
    aspect-ratio: 1;
    inset-block-start: 50%;
    inset-inline-end: -8rem;
    border-radius: 50%;
    background: url("../brand/almishqas-mark.svg") center / 70% no-repeat;
    opacity: .09;
    transform: translateY(-50%);
}

.page-heading .site-container {
    position: relative;
    z-index: 1;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    margin: 0 0 1.2rem;
    color: var(--almishqas-color-brand-text);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.eyebrow::before {
    content: "";
    inline-size: 2.8rem;
    block-size: .3rem;
    border-radius: 999rem;
    background: var(--almishqas-color-brand-primary);
}

.page-heading h1,
.section-heading h2,
.home-hero h1 {
    margin: 0;
    color: var(--almishqas-color-brand-strong);
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
}

.page-heading h1 {
    /* Narrower column (was 75rem/max 6rem type) so the watermark on the
       inline-end edge sits in genuinely empty space instead of behind text
       on the mid-width viewports where the two used to overlap. */
    max-width: 58rem;
    font-size: clamp(2.8rem, 4.4vw, 4.6rem);
}

.page-heading p {
    max-width: 54rem;
    margin: 1.2rem 0 0;
    color: var(--almishqas-color-ink);
    font-size: clamp(1.55rem, 1.8vw, 1.8rem);
}

/* A compact, Services-only hero: about a third of .page-heading's padding
   and h1 size. The text column stops at ~60%; the remaining half stays
   genuinely empty except for the official watermark mark, not stretched
   copy or a wasted illustration slot. Scoped entirely under .services-hero
   so no other page's header is touched. */
.services-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(2.6rem, 3.2vw, 3.4rem) 0 clamp(2.2rem, 2.8vw, 3rem);
    background: var(--almishqas-color-surface-subtle-green);
    border-block-end: .1rem solid rgba(100, 128, 110, .35);
}

.services-hero::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: min(44%, 42rem);
    background: url("../brand/almishqas-mark.svg") center / 58% no-repeat;
    opacity: .1;
    pointer-events: none;
}

.services-hero__body {
    position: relative;
    z-index: 1;
    max-width: min(62rem, 62%);
}

.services-hero__body .eyebrow {
    margin-block-end: 1rem;
}

.services-hero__body h1 {
    margin: 0;
    color: var(--almishqas-color-brand-strong);
    font-weight: 700;
    line-height: 1.22;
    font-size: clamp(2.6rem, 3.4vw, 3.8rem);
    text-wrap: balance;
}

.services-hero__body p {
    margin: 1.1rem 0 0;
    max-width: 54rem;
    color: var(--almishqas-color-ink);
    font-size: clamp(1.5rem, 1.6vw, 1.7rem);
}

.services-hero__count {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    margin: 1.6rem 0 0;
    padding: .6rem 1.4rem;
    border-radius: 999rem;
    background: var(--almishqas-color-surface-raised);
    color: var(--almishqas-color-brand-strong);
    font-size: 1.3rem;
    font-weight: 700;
}

.services-hero__count i {
    color: var(--almishqas-color-brand-ui);
}

/* Same story as .page-heading above: clamp(5rem,8vw,9rem) on both edges of
   every section stacked with the hero and, on pages with a green CTA
   section too, stacked again — the arithmetic behind the "one visible
   section, stretched to 15000px" measurement. */
.content-section {
    padding: clamp(3rem, 4vw, 5.6rem) 0;
}

.content-section--tight {
    padding-block: clamp(2.2rem, 3.2vw, 3.6rem);
}

.content-section--green {
    background: var(--almishqas-color-surface-subtle-green);
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2.4rem;
    margin-block-end: 2.2rem;
}

.section-heading h2 {
    font-size: clamp(2.8rem, 4vw, 4.4rem);
}

.section-heading p {
    max-width: 56rem;
    margin: 0;
    color: rgba(23, 42, 32, .76);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    min-height: 5.2rem;
    padding: 1rem 2.2rem;
    border: .1rem solid var(--almishqas-color-brand-text);
    border-radius: 999rem;
    background: var(--almishqas-color-brand-text);
    color: var(--almishqas-color-on-brand) !important;
    /* <button> gets no font inheritance from the UA stylesheet the way <a>
       does — every real <button class="button"> on the site (login submit,
       survey save, show-more) was rendering at the browser's ~11px control
       font inside a 5.2rem-tall pill. */
    font-family: inherit;
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.button:hover,
.button:focus {
    background: var(--almishqas-color-brand-strong);
    box-shadow: 0 1rem 2rem rgba(23, 42, 32, .16);
    transform: translateY(-.2rem);
}

.button--secondary {
    background: transparent;
    color: var(--almishqas-color-brand-strong) !important;
}

.button--secondary:hover,
.button--secondary:focus {
    background: var(--almishqas-color-surface-subtle-green);
}

.home-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: clamp(56rem, 72vh, 78rem);
    display: grid;
    align-items: center;
    background: linear-gradient(135deg, var(--almishqas-color-brand-strong), var(--almishqas-color-brand-text));
    color: var(--almishqas-color-on-brand);
}

.home-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inline-size: clamp(38rem, 52vw, 76rem);
    aspect-ratio: 1;
    inset-inline-end: -9rem;
    inset-block-start: 50%;
    background: url("../brand/almishqas-mark-white.svg") center / contain no-repeat;
    opacity: .08;
    transform: translateY(-50%);
}

.home-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: auto -10% -45% -10%;
    block-size: 55%;
    border-radius: 50% 50% 0 0;
    background: rgba(255, 255, 255, .05);
}

.hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(28rem, .85fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 9rem);
    padding-block: clamp(7rem, 10vw, 12rem);
}

.home-hero .eyebrow {
    color: var(--almishqas-color-on-brand);
}

.home-hero .eyebrow::before {
    background: var(--almishqas-color-on-brand);
}

.home-hero h1 {
    max-width: 75rem;
    color: var(--almishqas-color-on-brand);
    font-size: clamp(4rem, 7vw, 7.4rem);
}

.hero-copy > p:not(.eyebrow) {
    max-width: 66rem;
    margin: 2rem 0 0;
    color: rgba(255, 255, 255, .9);
    font-size: clamp(1.8rem, 2.2vw, 2.3rem);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-block-start: 3.2rem;
}

.home-hero .button {
    border-color: var(--almishqas-color-surface-raised);
    background: var(--almishqas-color-surface-raised);
    color: var(--almishqas-color-brand-strong) !important;
}

.home-hero .button--secondary {
    background: transparent;
    color: var(--almishqas-color-on-brand) !important;
}

.home-hero .button:hover,
.home-hero .button:focus {
    background: var(--almishqas-color-surface);
}

.hero-proof {
    position: relative;
    min-height: 38rem;
    display: grid;
    place-items: center;
}

.hero-proof__card {
    width: min(100%, 39rem);
    padding: 3.2rem;
    border: .1rem solid rgba(255, 255, 255, .3);
    border-radius: 3rem;
    background: rgba(255, 255, 255, .11);
    box-shadow: 0 2rem 5rem rgba(23, 42, 32, .22);
    backdrop-filter: blur(1rem);
}

.hero-proof__card img {
    display: block;
    width: min(100%, 27rem);
    margin-inline: auto;
}

.hero-proof__card p {
    margin: 2.4rem 0 0;
    text-align: center;
    color: var(--almishqas-color-on-brand);
    font-weight: 700;
}

.trust-grid,
.feature-grid,
.service-grid,
.contact-grid,
.apps-grid,
.value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}

.trust-card,
.feature-card,
.contact-card,
.app-card,
.value-card {
    position: relative;
    overflow: hidden;
    padding: clamp(2.4rem, 3vw, 3.4rem);
    border: .1rem solid rgba(100, 128, 110, .38);
    border-radius: 2.2rem;
    background: var(--almishqas-color-surface-raised);
    box-shadow: 0 1.2rem 3rem rgba(23, 42, 32, .07);
}

.trust-card::before,
.value-card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: .4rem;
    background: var(--almishqas-color-brand-primary);
}

.card-icon {
    width: 5.4rem;
    height: 5.4rem;
    display: grid;
    place-items: center;
    margin-block-end: 1.8rem;
    border-radius: 1.6rem;
    background: var(--almishqas-color-surface-subtle-green);
    color: var(--almishqas-color-brand-strong);
    font-size: 2.2rem;
}

.trust-card h2,
.trust-card h3,
.feature-card h3,
.contact-card h2,
.contact-card h3,
.app-card h2,
.app-card h3,
.value-card h2,
.value-card h3 {
    margin: 0 0 .8rem;
    color: var(--almishqas-color-brand-strong);
    font-size: 2.2rem;
    font-weight: 700;
}

.trust-card p,
.feature-card p,
.contact-card p,
.app-card p,
.value-card p {
    margin: 0;
}

.stats-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-radius: 2.4rem;
    background: var(--almishqas-color-brand-strong);
    color: var(--almishqas-color-on-brand);
    overflow: hidden;
}

.stat {
    padding: 3rem;
    text-align: center;
}

.stat + .stat {
    border-inline-start: .1rem solid rgba(255, 255, 255, .25);
}

.stat strong {
    display: block;
    font-size: clamp(3rem, 5vw, 5rem);
    line-height: 1.2;
}

.stat span {
    color: rgba(255, 255, 255, .82);
}

.service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-grid--compact {
    gap: 1.8rem;
}

/* Equal-height cards: content is capped (icon + 1-2 line title + 2-line
   clamp + one disclosure), so the grid's default row stretch is enough on
   its own — no arbitrary min-height guess, no "start"-aligned orphan card
   sitting short next to a tall one. */
.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2.6rem;
    border: .1rem solid rgba(100, 128, 110, .32);
    border-radius: 2rem;
    background: var(--almishqas-color-surface-raised);
    box-shadow: 0 1rem 2.4rem rgba(23, 42, 32, .06);
    scroll-margin-top: 10rem;
    transition: transform .2s ease, box-shadow .2s ease;
}

.service-card:hover,
.service-card:focus-within {
    transform: translateY(-.3rem);
    box-shadow: 0 1.6rem 3.2rem rgba(23, 42, 32, .1);
}

.service-card__head {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin-block-end: 1.4rem;
}

/* Icon sits on a tinted surface square, never white-on-white: every source
   icon under wwwroot/brand/service-icons is currentColor, so this box'
   background/foreground pairing is what actually paints it. */
.service-card__icon {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 5.6rem;
    block-size: 5.6rem;
    border-radius: 1.4rem;
    background: var(--almishqas-color-surface-subtle-green);
}

.service-card__icon-glyph {
    display: block;
    inline-size: 2.9rem;
    block-size: 2.9rem;
    background-color: var(--almishqas-color-brand-ui);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.service-card h2 {
    min-width: 0;
    margin: 0;
    color: var(--almishqas-color-brand-strong);
    font-size: 2rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* The content contract: every card gets exactly two clamped lines of
   summary, regardless of whether the source ar_explain is 250 or 2100
   characters — the outlier stays an outlier only behind .service-card__details. */
.service-card__summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    margin: 0;
    min-block-size: 5.6rem;
    color: rgba(23, 42, 32, .82);
    line-height: 1.7;
}

.service-card__link {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    margin-block-start: auto;
    padding-block-start: 2rem;
    font-weight: 700;
    text-decoration: none;
}

/* Reused inside .directory-card (branch/location "see map"/"open in maps"):
   the card heading is already brand-green by the sitewide h2 convention, so
   a second and third green element (icon + this link) were competing for
   the same "act here" read. Icon is gone entirely (it carried no
   information); this link goes neutral ink so green stays exactly once. */
.directory-card .service-card__link {
    padding-block-start: 1rem;
    color: var(--almishqas-color-ink);
}

.directory-card .service-card__link:hover,
.directory-card .service-card__link:focus-visible {
    color: var(--almishqas-color-brand-text);
    text-decoration: underline;
}

/* The single action per card (spec: one action, not "read details" plus a
   duplicate "ask about this service" link on every card). Pinned to the
   card foot with margin-block-start: auto so it lines up across a row
   regardless of how many summary lines preceded it. */
.service-card__details {
    margin-block-start: auto;
    padding-block-start: 1.4rem;
}

.service-card__details summary {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    list-style: none;
    color: var(--almishqas-color-brand-text);
    font-weight: 700;
    cursor: pointer;
}

.service-card__details summary::-webkit-details-marker {
    display: none;
}

.service-card__details summary::after {
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transition: transform .2s ease;
}

.service-card__details[open] summary {
    margin-block-end: 1rem;
}

.service-card__details[open] summary::after {
    transform: rotate(180deg);
}

.service-card__details p {
    margin: 0;
    color: rgba(23, 42, 32, .82);
    line-height: 1.8;
}

/* Three real filters (state, city, search) — the cross-navigation "internal
   agents" action that used to occupy a 4th auto track here now lives beside
   the section heading instead (it isn't a filter). */
.directory-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(18rem, 1fr)) minmax(24rem, 2fr);
    align-items: end;
    gap: 1.2rem;
    margin-block-end: 1.8rem;
    padding: 1.6rem;
    border: .1rem solid rgba(100, 128, 110, .38);
    border-radius: 2rem;
    background: var(--almishqas-color-surface-raised);
}

.field-group {
    display: grid;
    gap: .7rem;
}

.field-group label {
    color: var(--almishqas-color-brand-strong);
    font-size: 1.4rem;
    font-weight: 700;
}

.field-group input,
.field-group select,
.field-group textarea,
.form-control {
    min-height: 4.8rem;
    width: 100%;
    border: .1rem solid var(--almishqas-color-border);
    border-radius: 1.2rem;
    background: var(--almishqas-color-surface-raised);
    color: var(--almishqas-color-ink);
    padding: .9rem 1.2rem;
    box-shadow: none;
}

/* 106+ branches/agents at 2 columns on a 1440 canvas is how a directory
   card holding ~200px of text ends up sitting in a ~600px box. 3/2/1 across
   desktop/tablet/mobile matches the .service-grid density model. */
.directory-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem;
}

/* The generic, uninformative icon this card used to carry (repeated
   22 times with zero distinguishing information) is gone from the markup,
   so this is a plain flex column now — same pinned-footer trick as .service-card:
   the optional .service-card__link gets margin-block-start:auto and lands
   flush with the card foot regardless of how many meta lines came before it. */
.directory-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: .4rem;
    padding: 1.8rem;
    border: .1rem solid rgba(100, 128, 110, .38);
    border-radius: 1.8rem;
    background: var(--almishqas-color-surface-raised);
}

.directory-card[hidden] {
    display: none;
}

.directory-card h2,
.directory-card h3 {
    margin: 0 0 .6rem;
    color: var(--almishqas-color-brand-strong);
    font-size: 2rem;
    overflow-wrap: anywhere;
}

.directory-card p {
    margin: .3rem 0;
    overflow-wrap: anywhere;
}

.directory-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem 1.5rem;
    margin-block-start: 1.2rem;
    font-size: 1.4rem;
}

.directory-empty {
    grid-column: 1 / -1;
    padding: 4rem;
    border: .1rem dashed var(--almishqas-color-border);
    border-radius: 2rem;
    text-align: center;
}

.directory-more {
    display: flex;
    justify-content: center;
    margin-block-start: 3rem;
}

.directory-more [hidden] {
    display: none;
}

/* "Show more" is the one interaction that actually drives a 100+ item
   directory, not a footnote — it was rendering as the smallest, lowest-
   emphasis (outline) control on the page. Bigger and filled. */
.button--more {
    min-height: 6rem;
    padding: 1.3rem 3.4rem;
    font-size: 1.65rem;
}

.directory-toolbar--agents {
    grid-template-columns: repeat(2, minmax(18rem, 1fr));
}

.directory-toolbar--agents-external,
.directory-toolbar--simple {
    grid-template-columns: minmax(18rem, 1fr) minmax(28rem, 2fr);
}

.directory-toolbar__search {
    grid-column: auto / span 2;
}

.directory-toolbar--agents-external .directory-toolbar__search,
.directory-toolbar--simple .directory-toolbar__search {
    grid-column: auto;
}

.segmented-actions,
.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.job-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}

.job-card,
.empty-state,
.form-shell,
.data-panel,
.location-detail-card,
.location-coordinates,
.auth-assurance {
    padding: clamp(2.4rem, 4vw, 4rem);
    border: .1rem solid rgba(100, 128, 110, .38);
    border-radius: 2.4rem;
    background: var(--almishqas-color-surface-raised);
    box-shadow: 0 1.2rem 3rem rgba(23, 42, 32, .07);
}

.job-card {
    display: flex;
    flex-direction: column;
}

.job-card h2,
.empty-state h2,
.location-detail-card h2,
.auth-assurance h2 {
    color: var(--almishqas-color-brand-strong);
}

.job-card__meta {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}

.job-card__meta div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block-end: .8rem;
    border-block-end: .1rem solid rgba(100, 128, 110, .25);
}

.job-card__meta dt {
    color: rgba(23, 42, 32, .68);
    font-weight: 400;
}

.job-card__meta dd {
    margin: 0;
    font-weight: 700;
}

.empty-state {
    max-width: 74rem;
    margin-inline: auto;
    text-align: center;
}

.empty-state .card-icon {
    margin-inline: auto;
}

.form-shell {
    max-width: 86rem;
}

.form-shell--wide {
    /* Was 104rem: on a form whose content is short answers/fixed choices,
       a ~1040px column was most of the "text narrower than 40% of its
       box" waste measured on the survey. Narrower column, same content. */
    max-width: 84rem;
}

.modern-form,
.modern-form .field-group {
    display: grid;
    gap: 1.5rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
}

.form-grid__full {
    grid-column: 1 / -1;
}

.modern-form textarea.form-control {
    min-height: 12rem;
    resize: vertical;
}

.file-control {
    padding-block: .7rem;
}

.form-actions {
    margin-block-start: 1rem;
}

.button--wide {
    width: 100%;
}

.validation-summary-errors,
.text-danger {
    color: var(--almishqas-color-danger);
}

.validation-summary-errors {
    padding: 1.5rem;
    border-inline-start: .4rem solid var(--almishqas-color-danger);
    border-radius: 1rem;
    background: var(--almishqas-color-danger-surface);
}

/* Two columns of questions instead of one long stack — halves the survey's
   vertical run without touching a single question or answer. Collapses to
   one column at 900px alongside the other stacked layouts below. */
.survey-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.survey-question {
    min-width: 0;
    padding: 2rem;
    border: .1rem solid rgba(100, 128, 110, .3);
    border-radius: 1.8rem;
    background: var(--almishqas-color-surface);
}

.survey-question fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.survey-question legend {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
    margin-block-end: 1.5rem;
    color: var(--almishqas-color-brand-strong);
    font-size: 1.8rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.survey-question legend span {
    flex: 0 0 3rem;
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: 50%;
    background: var(--almishqas-color-brand-strong);
    color: var(--almishqas-color-on-brand);
    font-size: 1.3rem;
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.choice-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4.8rem;
    padding: 1rem 1.4rem;
    border: .1rem solid var(--almishqas-color-border);
    border-radius: 1.2rem;
    background: var(--almishqas-color-surface-raised);
    cursor: pointer;
}

.choice-card span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.choice-card:has(input:checked) {
    border-color: var(--almishqas-color-brand-ui);
    background: var(--almishqas-color-surface-subtle-green);
}

.choice-card input {
    accent-color: var(--almishqas-color-brand-ui);
}

.auth-layout,
.location-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(32rem, 1.15fr);
    align-items: stretch;
    gap: 2rem;
}

.auth-assurance {
    background: var(--almishqas-color-brand-strong);
    color: var(--almishqas-color-on-brand);
}

.auth-assurance h2 {
    color: var(--almishqas-color-on-brand);
}

.auth-card {
    width: 100%;
}

.document-sections {
    display: grid;
    gap: 2.4rem;
}

.document-sections > * {
    min-width: 0;
}

/* Currency numbers and salary-payment-type are two short tables that were
   each getting the full container width, one after another, though neither
   needs more than half of it. Side by side under the (taller) branch table. */
.document-sections__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.4rem;
}

.document-sections__row > * {
    min-width: 0;
}

.table-toolbar {
    max-width: 48rem;
    margin-block-end: 1.6rem;
}

.responsive-table {
    overflow-x: auto;
    border: .1rem solid rgba(100, 128, 110, .3);
    border-radius: 1.6rem;
}

.responsive-table table {
    width: 100%;
    border-collapse: collapse;
    background: var(--almishqas-color-surface-raised);
}

.responsive-table th,
.responsive-table td {
    padding: 1.2rem 1.5rem;
    border-block-end: .1rem solid rgba(100, 128, 110, .24);
    text-align: start;
    white-space: nowrap;
}

.responsive-table th {
    background: var(--almishqas-color-surface-subtle-green);
    color: var(--almishqas-color-brand-strong);
}

.responsive-table tbody tr:last-child td {
    border-block-end: 0;
}

.location-detail-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
}

.location-coordinates {
    position: relative;
    display: grid;
    place-content: center;
    min-height: 34rem;
    overflow: hidden;
    text-align: center;
    background: var(--almishqas-color-surface-subtle-green);
}

.location-coordinates .brand-watermark {
    position: absolute;
    inset: 0;
    background: url("../brand/almishqas-mark.svg") center / 58% no-repeat;
    opacity: .08;
}

.location-coordinates p,
.location-coordinates strong {
    position: relative;
}

.location-coordinates strong {
    color: var(--almishqas-color-brand-strong);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.news-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(30rem, .7fr);
    align-items: start;
    gap: 2.4rem;
}

.news-article,
.news-list-panel,
.service-status {
    padding: clamp(2.5rem, 5vw, 5rem);
    border: .1rem solid rgba(100, 128, 110, .38);
    border-radius: 2.4rem;
    background: var(--almishqas-color-surface-raised);
    box-shadow: 0 1.2rem 3rem rgba(23, 42, 32, .07);
}

.news-article__mark {
    display: grid;
    width: 8rem;
    height: 8rem;
    margin-block-end: 2rem;
    place-items: center;
    border-radius: 2rem;
    background: var(--almishqas-color-surface-subtle-green);
}

.news-article__mark img {
    width: 5rem;
    height: 5rem;
}

.news-article__image {
    display: block;
    width: 100%;
    max-height: 36rem;
    margin-block-end: 2.4rem;
    border-radius: 1.8rem;
    object-fit: cover;
}

.news-article h2,
.news-list-panel h2,
.service-status h2 {
    color: var(--almishqas-color-brand-strong);
}

.news-article__content {
    white-space: pre-line;
}

.news-share {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-block-start: 3rem;
    padding-block-start: 2rem;
    border-block-start: .1rem solid rgba(100, 128, 110, .28);
}

.news-share a {
    display: grid;
    width: 4rem;
    height: 4rem;
    place-items: center;
    border-radius: 50%;
    background: var(--almishqas-color-brand-strong);
    color: var(--almishqas-color-on-brand);
    text-decoration: none;
}

.news-list {
    display: grid;
    gap: 1rem;
}

.news-list__item {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    align-items: center;
    gap: 1.2rem;
    padding: 1.2rem;
    border: .1rem solid rgba(100, 128, 110, .3);
    border-radius: 1.4rem;
    color: var(--almishqas-color-ink);
    text-decoration: none;
}

.news-list__item:hover,
.news-list__item:focus,
.news-list__item[aria-current="page"] {
    border-color: var(--almishqas-color-brand-ui);
    background: var(--almishqas-color-surface-subtle-green);
    text-decoration: none;
}

.news-list__item time {
    display: grid;
    text-align: center;
    color: var(--almishqas-color-brand-strong);
}

.news-list__item time strong {
    font-size: 2.2rem;
}

.home-news {
    background: var(--almishqas-color-surface-raised);
}

.home-news__heading {
    align-items: center;
}

.home-news__all {
    flex: none;
    margin-block-start: 0;
    padding-block-start: 0;
}

.home-news__all:hover,
.home-news__all:focus-visible {
    color: var(--almishqas-color-brand-strong);
    text-decoration: underline;
}

.home-news__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
}

.home-news__grid .news-list__item {
    height: 100%;
    background: var(--almishqas-color-surface-raised);
}

.home-news__grid .news-list__item time span {
    overflow-wrap: anywhere;
}

.home-news__title {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 700;
}

.service-status {
    max-width: 92rem;
    margin-inline: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2rem;
}

.hasad-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    margin-block-end: 3rem;
}

.hasad-action {
    display: flex;
    min-height: 18rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 2.5rem;
    border: .1rem solid rgba(100, 128, 110, .38);
    border-radius: 2.2rem;
    background: var(--almishqas-color-surface-raised);
    color: var(--almishqas-color-brand-strong);
    font: inherit;
    font-size: 2rem;
    box-shadow: 0 1.2rem 3rem rgba(23, 42, 32, .07);
    cursor: pointer;
}

.job-details-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(30rem, .65fr);
    align-items: start;
    gap: 2.4rem;
}

.job-details-content,
.job-apply-panel {
    padding: clamp(2.5rem, 5vw, 5rem);
    border: .1rem solid rgba(100, 128, 110, .38);
    border-radius: 2.4rem;
    background: var(--almishqas-color-surface-raised);
    box-shadow: 0 1.2rem 3rem rgba(23, 42, 32, .07);
}

.job-details-content {
    display: grid;
    gap: 3.5rem;
}

.job-details-content section + section {
    padding-block-start: 3rem;
    border-block-start: .1rem solid rgba(100, 128, 110, .3);
}

.job-details-content h2,
.job-apply-panel h2 {
    margin-block-start: 0;
    color: var(--almishqas-color-brand-strong);
}

.check-list {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding-inline-start: 2.4rem;
}

.check-list li::marker {
    color: var(--almishqas-color-brand-ui);
}

.job-apply-panel {
    position: sticky;
    inset-block-start: 10rem;
}

.job-apply-panel .button {
    width: 100%;
    margin-block-start: 1rem;
}

.prose-card {
    max-width: 90rem;
    margin-inline: auto;
    padding: clamp(2.5rem, 5vw, 5rem);
    border: .1rem solid rgba(100, 128, 110, .38);
    border-radius: 2.4rem;
    background: var(--almishqas-color-surface-raised);
    box-shadow: 0 1.2rem 3rem rgba(23, 42, 32, .07);
}

.prose-card h2,
.prose-card h3 {
    color: var(--almishqas-color-brand-strong);
}

.prose-card p + p,
.prose-card li + li {
    margin-block-start: 1.2rem;
}

.site-footer {
    padding-block-start: 5.5rem;
    background: var(--almishqas-color-brand-strong);
    color: var(--almishqas-color-on-brand);
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(25rem, 1.5fr) repeat(3, minmax(16rem, 1fr));
    gap: 4rem;
    padding-block-end: 4.5rem;
}

.footer-brand .brand-mark__asset {
    display: block;
    width: min(100%, 25rem);
    max-height: 6rem;
    object-fit: contain;
    object-position: center right;
}

[dir="ltr"] .footer-brand .brand-mark__asset {
    object-position: center left;
}

.footer-brand p {
    max-width: 34rem;
    margin: 2rem 0 0;
    color: rgba(255, 255, 255, .78);
}

.footer-links,
.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem;
}

.footer-links h2,
.footer-contact h2 {
    margin: 0 0 .8rem;
    color: var(--almishqas-color-on-brand);
    font-size: 1.7rem;
}

.site-footer a {
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
    color: var(--almishqas-color-on-brand);
    text-decoration: underline;
}

.footer-contact p {
    margin: 0;
}

.footer-bottom {
    padding-block: 2rem;
    border-block-start: .1rem solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .72);
    font-size: 1.35rem;
}

.footer-bottom p {
    margin: 0;
}

/* A calm shell for routes that still use their legacy form markup. */
.site-main > #Base:not(.home-page):not(.about-page):not(.contact-page):not(.privacy-page):not(.services-page):not(.branches-page):not(.apps-page) {
    width: min(100% - 4rem, 118rem);
    min-height: 50vh;
    margin: 0 auto;
    padding-block: 5rem 7rem;
}

.site-main .headerBA,
.site-main .well,
.site-main blockquote {
    border-color: rgba(100, 128, 110, .38);
    border-radius: 1.8rem;
    background: var(--almishqas-color-surface-raised);
}

.site-main .header_page {
    color: var(--almishqas-color-brand-strong);
}

@media (max-width: 1320px) {
    .header-inner {
        grid-template-columns: auto auto 1fr auto;
    }

    /* The navigation is taken out of the grid while collapsed. Pin the
       language switch to its final track so it cannot consume the spacer. */
    .language-switch {
        grid-column: 4;
    }

    .nav-toggle {
        display: inline-grid;
        place-items: center;
    }

    .site-nav {
        position: absolute;
        inset-block-start: calc(100% + .1rem);
        inset-inline: 0;
        display: none;
        padding: 1.2rem 2rem 2rem;
        border-block-end: .1rem solid rgba(255, 255, 255, .2);
        background: var(--almishqas-color-brand-strong);
        box-shadow: 0 1.5rem 2.5rem rgba(23, 42, 32, .2);
    }

    .site-nav.is-open {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .site-nav a {
        border-radius: 1rem;
    }

    .directory-toolbar,
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .hero-layout {
        grid-template-columns: 1fr;
    }

    .hero-proof {
        min-height: auto;
    }

    .hero-proof__card {
        width: 100%;
    }

    .trust-grid,
    .feature-grid,
    .service-grid,
    .contact-grid,
    .apps-grid,
    .value-grid,
    .directory-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

    /* Below the two-column service grid the "empty half" the watermark was
       filling no longer exists, so the copy goes full-width and the mark
       becomes a quiet full-bleed backdrop instead (same trick as .home-hero). */
    .services-hero__body {
        max-width: 100%;
    }

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

    .auth-layout,
    .location-detail-grid,
    .news-layout,
    .job-details-layout,
    .survey-list,
    .document-sections__row {
        grid-template-columns: 1fr;
    }

    .job-apply-panel {
        position: static;
    }

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

@media (max-width: 640px) {
    body.site-body {
        font-size: 1.5rem;
    }

    .site-container {
        width: min(100% - 3rem, 124rem);
    }

    .site-header,
    .header-inner {
        min-height: 6.8rem;
    }

    .header-inner {
        grid-template-columns: auto 1fr auto;
        gap: 1rem;
    }

    .site-brand {
        min-width: 0;
    }

    .site-brand .brand-mark__asset {
        width: 15rem;
        max-height: 4rem;
    }

    .language-switch span {
        display: none;
    }

    .language-switch {
        width: 4.4rem;
        padding-inline: 0;
        grid-column: auto;
    }

    .site-nav.is-open {
        grid-template-columns: 1fr 1fr;
    }

    .page-heading {
        padding-block: 2.6rem 2.2rem;
    }

    .page-heading--lg {
        padding-block: 3rem 2.4rem;
    }

    .page-heading--sm {
        padding-block: 2.2rem 1.8rem;
    }

    .page-heading h1,
    .page-heading p {
        max-width: 100%;
    }

    .services-hero {
        padding-block: 3.2rem 2.6rem;
    }

    .services-hero::after {
        inline-size: 70%;
        opacity: .06;
    }

    .home-hero {
        min-height: auto;
    }

    .hero-layout {
        padding-block: 6rem;
    }

    .hero-actions,
    .hero-actions .button {
        width: 100%;
    }

    .home-news__all {
        margin-block-start: 1.2rem;
    }

    .trust-grid,
    .feature-grid,
    .service-grid,
    .contact-grid,
    .apps-grid,
    .value-grid,
    .directory-list,
    .directory-toolbar,
    .footer-grid,
    .stats-strip {
        grid-template-columns: 1fr;
    }

    .home-news__grid {
        grid-template-columns: 1fr;
    }

    .section-heading {
        display: block;
    }

    .section-heading p {
        margin-block-start: 1rem;
    }

    .stat + .stat {
        border-inline-start: 0;
        border-block-start: .1rem solid rgba(255, 255, 255, .25);
    }

    .directory-card {
        gap: .4rem;
        padding: 1.2rem;
    }

    .directory-card h2,
    .directory-card h3 {
        margin-block-end: .2rem;
        font-size: 1.7rem;
        line-height: 1.35;
    }

    .directory-card p {
        margin-block: .1rem;
        line-height: 1.55;
    }

    .directory-card__meta {
        gap: .3rem .8rem;
        margin-block-start: .6rem;
        font-size: 1.3rem;
        line-height: 1.5;
    }

    .directory-card .service-card__link {
        min-height: 4.4rem;
        padding-block-start: .6rem;
    }

    .directory-more {
        margin-block-start: 1.8rem;
    }

    .button--more {
        min-height: 4.4rem;
        padding: .8rem 2rem;
        font-size: 1.5rem;
    }

    .survey-question {
        padding: 1.2rem;
    }

    .survey-page .content-section {
        padding-block: 2rem 2.6rem;
    }

    .survey-page .form-shell {
        padding: 1.8rem;
        border-radius: 1.8rem;
    }

    .survey-question legend {
        gap: .8rem;
        margin-block-end: .9rem;
        font-size: 1.6rem;
        line-height: 1.45;
    }

    .survey-question legend span {
        flex-basis: 2.6rem;
        width: 2.6rem;
        height: 2.6rem;
    }

    .choice-card {
        min-height: 4.4rem;
        padding: .7rem 1rem;
        line-height: 1.45;
    }

    .job-grid,
    .form-grid,
    .choice-grid,
    .hasad-actions {
        grid-template-columns: 1fr;
    }

    .service-status {
        grid-template-columns: 1fr;
    }

    .directory-toolbar__search,
    .form-grid__full {
        grid-column: 1;
    }

    .footer-grid {
        gap: 3rem;
    }
}

/* Current Grosh-e partnership campaign */
.gorooshi-campaign {
    padding-block: clamp(4.8rem, 6vw, 7.5rem);
    background: #edf2ed;
}

.gorooshi-campaign__panel,
.partner-app-card,
.campaign-news-feature {
    display: grid;
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
    overflow: hidden;
    border: .1rem solid rgba(15, 79, 50, .22);
    border-radius: 2.4rem;
    background: #fff;
    box-shadow: 0 1.6rem 4.8rem rgba(23, 42, 32, .08);
}

.gorooshi-campaign__visual,
.partner-app-card__visual,
.campaign-news-feature__visual {
    min-height: 46rem;
    margin: 0;
    overflow: hidden;
    background: #f6f6f4;
}

.gorooshi-campaign__visual img,
.partner-app-card__visual img,
.campaign-news-feature__visual img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.gorooshi-campaign__content,
.partner-app-card__content,
.campaign-news-feature__content {
    align-self: center;
    padding: clamp(3.2rem, 5vw, 6.5rem);
}

.gorooshi-campaign__content h2,
.partner-app-card__content h2,
.campaign-news-feature__content h2 {
    max-width: 58rem;
    margin: 0;
    color: var(--almishqas-aaa-deep);
    font-size: clamp(3rem, 3.6vw, 4.7rem);
    line-height: 1.35;
    letter-spacing: -.03em;
}

.gorooshi-campaign__content > p:not(.eyebrow),
.partner-app-card__content > p:not(.eyebrow),
.campaign-news-feature__content > p:not(.eyebrow) {
    max-width: 58rem;
    margin: 1.6rem 0 0;
    color: var(--almishqas-aaa-muted);
    font-size: 1.7rem;
    line-height: 1.9;
}

.gorooshi-campaign__content ul {
    display: grid;
    gap: 1.2rem;
    margin: 2.4rem 0 0;
    padding: 0;
    list-style: none;
}

.gorooshi-campaign__content li {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    color: var(--almishqas-aaa-ink);
}

.gorooshi-campaign__content li i {
    width: 3.6rem;
    height: 3.6rem;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #e8f0ea;
    color: var(--almishqas-aaa-green);
}

.gorooshi-campaign__actions,
.partner-app-card__actions,
.campaign-news-feature__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem 2.2rem;
    margin-block-start: 3rem;
}

.partner-app-card {
    grid-template-columns: minmax(34rem, .72fr) minmax(0, 1.28fr);
    margin-block-end: 3rem;
    background: linear-gradient(120deg, #fff 0 62%, #edf2ed 100%);
}

.partner-app-card__visual,
.campaign-news-feature__visual {
    min-height: 0;
    aspect-ratio: 750 / 937;
}

.partner-app-card__visual img,
.campaign-news-feature__visual img {
    object-position: center;
}

.campaign-news-feature {
    grid-template-columns: minmax(32rem, .72fr) minmax(0, 1.28fr);
}

.campaign-news-feature__content time {
    display: inline-block;
    margin-block: .6rem 1.6rem;
    color: var(--almishqas-aaa-muted);
    font-weight: 700;
}

@media (max-width: 900px) {
    .gorooshi-campaign__panel,
    .partner-app-card,
    .campaign-news-feature {
        grid-template-columns: 1fr;
    }

    .gorooshi-campaign__visual,
    .partner-app-card__visual,
    .campaign-news-feature__visual {
        min-height: 0;
    }

    .gorooshi-campaign__visual {
        aspect-ratio: 750 / 430;
    }

    .partner-app-card__visual,
    .campaign-news-feature__visual {
        aspect-ratio: 750 / 937;
    }
}

@media (max-width: 640px) {
    .gorooshi-campaign__panel,
    .partner-app-card,
    .campaign-news-feature {
        border-radius: 1.4rem;
    }

    .gorooshi-campaign__visual,
    .partner-app-card__visual,
    .campaign-news-feature__visual {
        min-height: 0;
    }

    .gorooshi-campaign__visual {
        aspect-ratio: 750 / 430;
    }

    .partner-app-card__visual,
    .campaign-news-feature__visual {
        aspect-ratio: 750 / 937;
    }

    .gorooshi-campaign__content,
    .partner-app-card__content,
    .campaign-news-feature__content {
        padding: 2.6rem 2.2rem 3rem;
    }

    .gorooshi-campaign__content h2,
    .partner-app-card__content h2,
    .campaign-news-feature__content h2 {
        font-size: 2.9rem;
    }

    .gorooshi-campaign__actions .button,
    .partner-app-card__actions .button,
    .campaign-news-feature__actions .button {
        width: 100%;
    }
}

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Applications: owned products lead; partner campaigns remain clearly secondary. */
.almishqas-app-showcase {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(28rem, .88fr);
    overflow: hidden;
    margin-block-end: 3rem;
    border: .1rem solid rgba(15, 79, 50, .35);
    border-radius: 2.6rem;
    background:
        radial-gradient(circle at 18% 12%, rgba(213, 177, 92, .25), transparent 30%),
        linear-gradient(135deg, #073f2d 0%, #0f633f 62%, #138452 100%);
    box-shadow: 0 2.4rem 6rem rgba(10, 62, 43, .18);
}

.almishqas-app-showcase::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: auto -8rem -13rem auto;
    inline-size: 34rem;
    block-size: 34rem;
    border: 7rem solid rgba(255, 255, 255, .045);
    border-radius: 50%;
}

.almishqas-app-showcase--desktop {
    background:
        radial-gradient(circle at 82% 12%, rgba(213, 177, 92, .23), transparent 30%),
        linear-gradient(225deg, #073f2d 0%, #0f633f 62%, #138452 100%);
}

.almishqas-app-showcase--desktop .almishqas-app-showcase__visual {
    order: -1;
}

.almishqas-app-showcase__content {
    align-self: center;
    padding: clamp(3.6rem, 6vw, 7.2rem);
    color: #fff;
}

.almishqas-app-showcase__label {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    margin: 0 0 1.5rem;
    padding: .7rem 1.2rem;
    border: .1rem solid rgba(255, 255, 255, .32);
    border-radius: 999px;
    background: rgba(255, 255, 255, .11);
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
}

.almishqas-app-showcase__label i {
    color: #f2cf7a;
}

.almishqas-app-showcase__content h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(3.7rem, 5vw, 6.2rem);
    line-height: 1.18;
    letter-spacing: -.035em;
}

.almishqas-app-showcase__content > p:not(.almishqas-app-showcase__label) {
    max-width: 62rem;
    margin: 1.6rem 0 0;
    color: rgba(255, 255, 255, .86);
    font-size: clamp(1.6rem, 1.7vw, 1.9rem);
    line-height: 1.9;
}

.almishqas-app-showcase__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    max-width: 62rem;
    margin: 2.4rem 0 3rem;
    padding: 0;
    list-style: none;
}

.almishqas-app-showcase__features li {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #fff;
    font-size: 1.45rem;
    font-weight: 600;
}

.almishqas-app-showcase__features i {
    inline-size: 3.2rem;
    block-size: 3.2rem;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .13);
    color: #f2cf7a;
}

.almishqas-app-showcase__button {
    border-color: #fff;
    background: #fff;
    color: var(--almishqas-color-brand-strong) !important;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .14);
}

.almishqas-app-showcase__button:hover,
.almishqas-app-showcase__button:focus {
    border-color: #f2cf7a;
    background: #f2cf7a;
}

.almishqas-app-showcase__visual {
    position: relative;
    display: grid;
    place-content: center;
    place-items: center;
    gap: 2rem;
    min-height: 47rem;
    margin: 2.2rem;
    padding: 4rem 2.5rem;
    overflow: hidden;
    border: .1rem solid rgba(255, 255, 255, .7);
    border-radius: 2.1rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(239, 244, 239, .91)),
        var(--almishqas-color-surface-raised);
    box-shadow: inset 0 0 0 .8rem rgba(255, 255, 255, .34), 0 2rem 4rem rgba(0, 0, 0, .14);
    text-align: center;
}

.almishqas-app-showcase__icon {
    inline-size: clamp(13rem, 17vw, 19rem);
    block-size: clamp(13rem, 17vw, 19rem);
    display: grid;
    place-items: center;
    border-radius: 4rem;
    background: #fff;
    box-shadow: 0 1.8rem 4.5rem rgba(15, 79, 50, .17);
}

.almishqas-app-showcase__icon img {
    display: block;
    inline-size: 78%;
    block-size: 78%;
    object-fit: contain;
}

.almishqas-app-showcase__visual--desktop {
    align-content: center;
    padding: 2.2rem;
}

.almishqas-app-showcase__screen {
    display: block;
    inline-size: 100%;
    block-size: auto;
    max-block-size: 31rem;
    border: .1rem solid rgba(15, 79, 50, .18);
    border-radius: 1.3rem;
    object-fit: contain;
    box-shadow: 0 1.4rem 3.2rem rgba(15, 79, 50, .16);
}

.almishqas-app-showcase__name {
    display: grid;
    gap: .4rem;
    color: var(--almishqas-color-brand-strong);
}

.almishqas-app-showcase__name strong {
    font-size: clamp(2.2rem, 2.7vw, 3.3rem);
}

.almishqas-app-showcase__name span {
    color: var(--almishqas-aaa-muted);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.apps-grid--resources {
    grid-template-columns: 1fr;
}

.partner-apps {
    margin-block-start: clamp(5rem, 8vw, 8rem);
    padding-block-start: clamp(3rem, 5vw, 4.5rem);
    border-block-start: .1rem solid rgba(100, 128, 110, .3);
}

.partner-apps__heading {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(28rem, 1.2fr);
    align-items: end;
    gap: 3rem;
    margin-block-end: 2.4rem;
}

.partner-apps__heading h2 {
    margin: .5rem 0 0;
    color: var(--almishqas-aaa-deep);
    font-size: clamp(2.8rem, 3.6vw, 4.2rem);
}

.partner-apps__heading > p {
    max-width: 62rem;
    margin: 0;
    color: var(--almishqas-aaa-muted);
    line-height: 1.85;
}

.partner-apps .partner-app-card {
    grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr);
    align-items: stretch;
    margin: 0;
    border-radius: 1.8rem;
    background: var(--almishqas-color-surface-raised);
    box-shadow: 0 1rem 2.6rem rgba(23, 42, 32, .06);
}

.partner-apps .partner-app-card__visual {
    min-height: 23rem;
    aspect-ratio: auto;
    background: #edf2ed;
}

.partner-apps .partner-app-card__visual img {
    object-fit: cover;
    object-position: center 32%;
}

.partner-apps .partner-app-card__content {
    padding: clamp(2.5rem, 4vw, 4rem);
}

.partner-apps .partner-app-card__content h3 {
    max-width: 58rem;
    margin: 0;
    color: var(--almishqas-aaa-deep);
    font-size: clamp(2.3rem, 2.8vw, 3.2rem);
    line-height: 1.35;
}

.partner-apps .partner-app-card__actions {
    margin-block-start: 1.8rem;
}

@media (max-width: 900px) {
    .almishqas-app-showcase {
        grid-template-columns: 1fr;
    }

    .almishqas-app-showcase__visual {
        min-height: 28rem;
        margin-block-start: 0;
    }

    .almishqas-app-showcase--desktop .almishqas-app-showcase__visual {
        order: initial;
    }

    .partner-apps__heading {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
}

@media (max-width: 640px) {
    .almishqas-app-showcase {
        border-radius: 1.8rem;
    }

    .almishqas-app-showcase__content {
        padding: 3.2rem 2.2rem;
    }

    .almishqas-app-showcase__content h2 {
        font-size: 3.8rem;
    }

    .almishqas-app-showcase__features {
        grid-template-columns: 1fr;
    }

    .almishqas-app-showcase__button {
        width: 100%;
    }

    .almishqas-app-showcase__visual {
        min-height: 23rem;
        margin: 0 1.4rem 1.4rem;
        padding: 2.5rem 1.8rem;
        border-radius: 1.4rem;
    }

    .almishqas-app-showcase__icon {
        inline-size: 11rem;
        block-size: 11rem;
        border-radius: 2.8rem;
    }

    .partner-apps .partner-app-card {
        grid-template-columns: 8.5rem minmax(0, 1fr);
    }

    .partner-apps .partner-app-card__visual {
        min-height: 0;
    }

    .partner-apps .partner-app-card__content {
        padding: 2.3rem 1.8rem;
    }

    .partner-apps .partner-app-card__content h3 {
        font-size: 2.2rem;
    }

    .partner-apps .partner-app-card__content > p:not(.eyebrow) {
        font-size: 1.45rem;
        line-height: 1.75;
    }
}

/* Contact: the primary channel card carries the phone and email, so it is
   weighted above the directory cards beside it. */
.contact-card--primary { border-top: .3rem solid var(--almishqas-color-brand-ui); }
.contact-card__channel {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-block: .6rem 0;
    font-weight: 600;
    color: var(--almishqas-color-brand-text);
}
.contact-card__channel a { color: inherit; text-decoration: none; }
.contact-card__channel a:hover,
.contact-card__channel a:focus-visible { text-decoration: underline; }
.contact-card__note {
    font-size: .8em;
    font-weight: 500;
    color: var(--almishqas-color-ink);
    opacity: .7;
}

/* ========================================================================== */
/* Professional heritage direction                                            */
/* ========================================================================== */

body.site-body {
    background: #f6f2e9;
    font-weight: 600;
    line-height: 1.75;
}

.site-container {
    width: min(100% - 4.8rem, 128rem);
}

.site-header {
    min-height: 8.2rem;
    border-block-end-color: rgba(255, 255, 255, .16);
    box-shadow: none;
}

.header-inner {
    min-height: 8.2rem;
    gap: 2rem;
}

.site-brand {
    min-width: 19rem;
}

.site-brand .brand-mark__asset {
    width: 19rem;
    max-height: 5rem;
}

.site-nav {
    gap: .2rem;
}

.site-nav a,
.language-switch {
    min-height: 4.2rem;
    padding: .65rem 1.15rem;
    font-size: 1.35rem;
    letter-spacing: -.01em;
}

.site-nav a.is-active {
    background: transparent;
    box-shadow: inset 0 -.2rem 0 #d8c9a5;
}

.language-switch {
    border-color: rgba(255, 255, 255, .32);
}

.eyebrow {
    gap: 1rem;
    margin-block-end: 1.4rem;
    color: var(--almishqas-color-brand-text);
    font-size: 1.35rem;
    letter-spacing: .01em;
}

.eyebrow::before {
    inline-size: 3.4rem;
    block-size: .2rem;
    background: #c6a96b;
}

.button {
    min-height: 5.2rem;
    padding: 1.1rem 2.3rem;
    border-width: .1rem;
    border-radius: .8rem;
    box-shadow: none;
    font-size: 1.55rem;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.button:hover,
.button:focus {
    transform: translateY(-.2rem);
    box-shadow: none;
}

.text-action {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    min-height: 4.4rem;
    color: var(--almishqas-color-brand-text);
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
}

.text-action:hover,
.text-action:focus-visible {
    color: var(--almishqas-color-brand-strong);
    text-decoration: underline;
    text-underline-offset: .5rem;
}

.content-section {
    padding-block: clamp(7rem, 8vw, 10rem);
}

.section-heading {
    align-items: end;
    gap: 4rem;
    margin-block-end: 4.8rem;
}

.section-heading h2 {
    font-size: clamp(3.2rem, 4vw, 5rem);
    line-height: 1.3;
    letter-spacing: -.035em;
}

.section-heading > p {
    max-width: 52rem;
    font-size: 1.65rem;
}

.section-heading--centered {
    display: block;
    max-width: 72rem;
    margin-inline: auto;
    text-align: center;
}

.section-heading--centered .eyebrow {
    justify-content: center;
}

.section-heading--centered > p {
    margin: 1.4rem auto 0;
}

/* Home — selected Yemeni heritage concept */
.heritage-hero {
    overflow: hidden;
    background: var(--almishqas-color-brand-strong);
    color: var(--almishqas-color-on-brand);
}

.heritage-hero__layout {
    min-height: 66rem;
    display: grid;
    grid-template-columns: minmax(44rem, 1.05fr) minmax(0, .95fr);
    grid-template-areas: "image copy";
    align-items: stretch;
    gap: clamp(4rem, 6vw, 8rem);
}

.heritage-hero__copy {
    grid-area: copy;
    align-self: center;
    padding-block: 8rem;
    animation: heritage-copy-in .7s ease both;
}

.heritage-hero .eyebrow {
    color: rgba(255, 255, 255, .86);
}

.heritage-hero h1 {
    max-width: 62rem;
    margin: 0;
    color: #fff;
    font-size: clamp(4.6rem, 4.5vw, 6.2rem);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.heritage-hero__lead {
    max-width: 56rem;
    margin: 2.4rem 0 0;
    color: rgba(255, 255, 255, .82);
    font-size: clamp(1.75rem, 2vw, 2rem);
    line-height: 1.9;
}

.heritage-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.8rem 2.6rem;
    margin-block-start: 3.6rem;
}

.heritage-hero .button {
    border-color: #fff;
    background: #fff;
    color: var(--almishqas-color-brand-strong) !important;
}

.heritage-hero .button:hover,
.heritage-hero .button:focus {
    background: #efe7d4;
}

.heritage-hero .text-action {
    color: #fff;
}

.heritage-hero__facts {
    display: flex;
    gap: 0;
    margin: 5rem 0 0;
}

.heritage-hero__facts div {
    min-width: 11rem;
    padding-inline: 2rem;
    border-inline-start: .1rem solid rgba(255, 255, 255, .22);
}

.heritage-hero__facts div:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
}

.heritage-hero__facts dt {
    color: #fff;
    font-size: 2.7rem;
    font-weight: 700;
    line-height: 1.2;
}

.heritage-hero__facts dd {
    margin: .6rem 0 0;
    color: rgba(255, 255, 255, .7);
    font-size: 1.3rem;
}

.heritage-hero__image {
    grid-area: image;
    position: relative;
    min-height: 66rem;
    margin: 0;
    overflow: hidden;
    border-radius: 0 0 12rem 0;
    animation: heritage-image-in .8s .08s ease both;
}

[dir="ltr"] .heritage-hero__image {
    border-radius: 0 0 0 12rem;
}

.heritage-hero__image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 52% 52%;
}

.heritage-hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(14, 58, 37, .1);
    pointer-events: none;
}

.heritage-hero__image figcaption {
    position: absolute;
    z-index: 1;
    inset-inline-end: 2.4rem;
    inset-block-end: 2.4rem;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    border: .1rem solid rgba(255, 255, 255, .35);
    border-radius: .8rem;
    background: rgba(25, 91, 59, .9);
    color: #fff;
    font-size: 1.3rem;
}

.heritage-hero__image figcaption img {
    width: 3.4rem;
    height: 3.4rem;
}

@keyframes heritage-copy-in {
    from { opacity: 0; transform: translateY(2.5rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes heritage-image-in {
    from { opacity: 0; transform: scale(1.025); }
    to { opacity: 1; transform: scale(1); }
}

.home-locator {
    position: relative;
    overflow: hidden;
    background: #f6f2e9;
}

.home-locator__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(32rem, .92fr);
    grid-template-areas:
        "intro aside"
        "form aside";
    gap: 2.6rem 7rem;
    align-items: center;
}

.home-locator__intro {
    grid-area: intro;
    align-self: end;
}

.home-locator__intro h2 {
    max-width: 52rem;
    margin: 0;
    color: var(--almishqas-color-brand-strong);
    font-size: clamp(3.6rem, 4.5vw, 5.4rem);
    line-height: 1.25;
    letter-spacing: -.035em;
}

.home-locator__intro > p:not(.eyebrow) {
    max-width: 52rem;
    margin: 1.5rem 0;
    color: #405247;
    font-size: 1.65rem;
}

.home-locator__form {
    grid-area: form;
    align-self: start;
    max-width: 52rem;
    padding: 2.4rem;
    border: .1rem solid rgba(100, 128, 110, .35);
    border-radius: 1.2rem;
    background: #fff;
}

.file-picker {
    position: relative;
    min-height: 5.6rem;
}

.file-picker .file-control {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-picker > label {
    min-height: 5.6rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.4rem;
    border: .1rem dashed #64806e;
    border-radius: .8rem;
    background: #f8f6f0;
    color: var(--almishqas-aaa-green);
    font-weight: 700;
}

.file-picker:focus-within > label {
    outline: .3rem solid var(--almishqas-aaa-green);
    outline-offset: .3rem;
}

.home-locator__form > label {
    display: block;
    margin-block-end: .8rem;
    color: var(--almishqas-color-brand-strong);
    font-size: 1.35rem;
}

.home-locator__field {
    position: relative;
}

.home-locator__field > i {
    position: absolute;
    inset-inline-start: 1.5rem;
    inset-block-start: 50%;
    color: var(--almishqas-color-brand-text);
    transform: translateY(-50%);
}

.home-locator__field input {
    width: 100%;
    min-height: 5.4rem;
    padding: 1rem 4.2rem 1rem 1.5rem;
    border: .1rem solid var(--almishqas-color-border);
    border-radius: .7rem;
    background: #fbfaf6;
    color: var(--almishqas-color-ink);
    font: inherit;
    font-size: 1.5rem;
}

[dir="ltr"] .home-locator__field input {
    padding: 1rem 1.5rem 1rem 4.2rem;
}

.home-locator__form .button {
    width: 100%;
    margin-block-start: 1.2rem;
}

.home-locator__aside {
    grid-area: aside;
    position: relative;
    min-height: 48rem;
    overflow: hidden;
    border: .1rem solid rgba(100, 128, 110, .22);
    border-radius: 2.4rem;
    background: #e9ede5;
}

.home-locator__aside > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-services {
    border-block: .1rem solid rgba(100, 128, 110, .22);
    background: #fff;
}

.home-services__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-block: .1rem solid rgba(100, 128, 110, .28);
}

.home-service {
    position: relative;
    min-height: 37rem;
    padding: 4rem clamp(2.4rem, 3vw, 4.8rem);
    border-inline-start: .1rem solid rgba(100, 128, 110, .28);
}

.home-service:first-child {
    border-inline-start: 0;
}

.home-service__number {
    position: absolute;
    inset-block-start: 2rem;
    inset-inline-end: 2rem;
    color: var(--almishqas-color-brand-text);
    font-size: 1.3rem;
    letter-spacing: .12em;
}

.home-service > img {
    width: 6rem;
    height: 6rem;
    object-fit: contain;
}

.home-service h3 {
    margin: 2.8rem 0 1.2rem;
    color: var(--almishqas-color-brand-strong);
    font-size: 2.4rem;
    line-height: 1.35;
}

.home-service p {
    min-height: 9rem;
    margin: 0 0 2rem;
    color: #405247;
    font-size: 1.5rem;
}

.home-assurance {
    padding-block: 4rem;
    background: var(--almishqas-color-brand-strong);
    color: #fff;
}

.home-assurance__layout {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2.4rem;
}

.home-assurance__icon {
    display: grid;
    place-items: center;
    width: 6.4rem;
    height: 6.4rem;
    border: .1rem solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    color: #d8c9a5;
    font-size: 2.5rem;
}

.home-assurance h2 {
    margin: 0;
    color: #fff;
    font-size: 2.5rem;
}

.home-assurance p {
    margin: .5rem 0 0;
    color: rgba(255, 255, 255, .74);
}

.home-assurance .button--secondary {
    border-color: rgba(255, 255, 255, .55);
    color: #fff !important;
}

.home-assurance .button--secondary:hover,
.home-assurance .button--secondary:focus {
    background: #fff;
    color: var(--almishqas-color-brand-strong) !important;
}

/* Shared interior pages */
.page-heading,
.services-hero {
    padding-block: clamp(5rem, 6vw, 7.5rem);
    border-block-end: .1rem solid rgba(100, 128, 110, .28);
    background: #e8eee7;
}

.page-heading::after,
.services-hero::after {
    inline-size: clamp(25rem, 32vw, 46rem);
    inset-inline-end: max(-8rem, -5vw);
    opacity: .055;
}

.page-heading h1,
.services-hero__body h1 {
    max-width: 72rem;
    font-size: clamp(4rem, 5vw, 6.2rem);
    line-height: 1.25;
    letter-spacing: -.035em;
}

.page-heading p,
.services-hero__body p {
    max-width: 64rem;
    font-size: 1.7rem;
}

.trust-card,
.feature-card,
.contact-card,
.app-card,
.value-card,
.service-card,
.directory-card,
.job-card,
.empty-state,
.form-shell,
.data-panel,
.location-detail-card,
.location-coordinates,
.auth-assurance,
.news-article,
.news-list-panel,
.service-status,
.job-details-content,
.job-apply-panel,
.prose-card {
    border-color: rgba(100, 128, 110, .3);
    border-radius: 1.2rem;
    box-shadow: none;
}

.trust-card,
.feature-card,
.contact-card,
.app-card,
.value-card {
    padding: 3.2rem;
}

.service-card,
.directory-card,
.job-card {
    background: #fff;
    transition: border-color .2s ease, transform .2s ease;
}

.service-card:hover,
.service-card:focus-within,
.directory-card:hover,
.job-card:hover {
    border-color: var(--almishqas-color-brand-text);
    box-shadow: none;
    transform: translateY(-.3rem);
}

.directory-toolbar {
    padding: 2.4rem;
    border: .1rem solid rgba(100, 128, 110, .3);
    border-radius: 1.2rem;
    background: #fff;
    box-shadow: none;
}

.field-group input,
.field-group select,
.field-group textarea,
.form-control {
    min-height: 5rem;
    border-radius: .7rem;
    background: #fbfaf6;
}

.content-section--green {
    background: var(--almishqas-color-brand-strong);
}

.home-news {
    background: #f6f2e9;
}

.home-news__grid {
    gap: 1.2rem;
}

.home-news__grid .news-list__item {
    border-radius: .8rem;
    background: #fff;
}

.site-footer {
    padding-block-start: 6.5rem;
    border-block-start: .1rem solid rgba(255, 255, 255, .12);
    background: #12442c;
}

.footer-grid {
    gap: 5rem;
}

.footer-brand .brand-mark__asset {
    width: 22rem;
}

.footer-links h2,
.footer-contact h2 {
    color: #d8c9a5;
    font-size: 1.35rem;
}

.site-footer a,
.site-footer p {
    color: rgba(255, 255, 255, .76);
}

.footer-bottom {
    margin-block-start: 5rem;
    padding-block: 2rem;
    border-block-start: .1rem solid rgba(255, 255, 255, .12);
}

@media (max-width: 1100px) {
    .heritage-hero__layout {
        min-height: 60rem;
        grid-template-columns: minmax(0, 1fr) minmax(36rem, .9fr);
        gap: 4rem;
    }

    .heritage-hero__image {
        min-height: 60rem;
    }

    .heritage-hero h1 {
        font-size: clamp(4.4rem, 5.6vw, 6rem);
    }

    .home-locator__layout {
        gap: 2.6rem 4rem;
    }
}

@media (max-width: 900px) {
    .heritage-hero__layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "copy"
            "image";
        gap: 0;
    }

    .heritage-hero__image {
        min-height: 46rem;
        max-height: 58rem;
        border-radius: 0 0 6rem 6rem;
    }

    [dir="ltr"] .heritage-hero__image {
        border-radius: 0 0 6rem 6rem;
    }

    .heritage-hero__copy {
        padding-block: 6rem 7rem;
    }

    .home-locator__layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "intro"
            "form"
            "aside";
    }

    .home-locator__intro,
    .home-locator__form {
        max-width: 100%;
    }

    .home-locator__aside {
        min-height: 32rem;
    }

    .home-services__list {
        grid-template-columns: 1fr;
    }

    .home-service {
        min-height: auto;
        padding: 3.5rem 2rem;
        border-inline-start: 0;
        border-block-start: .1rem solid rgba(100, 128, 110, .28);
    }

    .home-service:first-child {
        border-block-start: 0;
    }

    .home-service p {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .site-container {
        width: min(100% - 3.2rem, 128rem);
    }

    .site-header,
    .header-inner {
        min-height: 7rem;
    }

    .site-brand {
        min-width: 0;
    }

    .site-brand .brand-mark__asset {
        width: 15rem;
    }

    .heritage-hero__image {
        min-height: 34rem;
        max-height: 42rem;
        border-radius: 0 0 4rem 4rem;
    }

    [dir="ltr"] .heritage-hero__image {
        border-radius: 0 0 4rem 4rem;
    }

    .heritage-hero__image figcaption {
        inset-inline: 1.4rem;
        inset-block-end: 1.4rem;
        justify-content: center;
    }

    .heritage-hero__copy {
        padding-block: 4.8rem 5.5rem;
    }

    .heritage-hero h1 {
        font-size: clamp(3.7rem, 11vw, 4.6rem);
        line-height: 1.35;
    }

    .heritage-hero__lead {
        font-size: 1.65rem;
    }

    .heritage-hero__actions,
    .heritage-hero__actions .button {
        width: 100%;
    }

    .heritage-hero__actions .button {
        justify-content: center;
    }

    .heritage-hero__facts {
        margin-block-start: 4rem;
    }

    .heritage-hero__facts div {
        min-width: 0;
        flex: 1;
        padding-inline: 1.2rem;
    }

    .heritage-hero__facts dt {
        font-size: 2.2rem;
    }

    .heritage-hero__facts dd {
        font-size: 1.15rem;
    }

    .content-section {
        padding-block: 6rem;
    }

    .home-locator__intro h2,
    .section-heading h2 {
        font-size: 3.4rem;
    }

    .home-locator__form {
        padding: 1.6rem;
    }

    .home-locator__aside {
        min-height: 25rem;
        border-radius: 1.6rem;
    }

    .home-assurance__layout {
        grid-template-columns: auto 1fr;
    }

    .home-assurance .button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .page-heading,
    .services-hero {
        padding-block: 4rem;
    }

    .page-heading h1,
    .services-hero__body h1 {
        font-size: 3.8rem;
    }
}

/* ========================================================================== */
/* Contemporary Yemeni institution — selected concept 3                      */
/* ========================================================================== */

body.site-body {
    background: #f7f3eb;
}

.site-header {
    min-height: 9.4rem;
    padding-block: 1.4rem;
    border: 0;
    background: #f7f3eb;
    box-shadow: none;
}

.header-inner {
    min-height: 6.6rem;
    padding: .7rem 1.4rem;
    border: .1rem solid rgba(25, 91, 59, .14);
    border-radius: 2rem;
    background: #fff;
    box-shadow: 0 1.4rem 4rem rgba(31, 50, 40, .09);
}

.site-brand,
.site-brand:hover,
.site-brand:focus,
.site-nav a,
.language-switch {
    color: var(--almishqas-color-brand-strong);
}

.site-brand {
    min-width: 18.5rem;
}

.site-brand .brand-mark__asset {
    width: 18.5rem;
}

.site-nav a,
.language-switch {
    min-height: 4.4rem;
    padding-inline: 1.25rem;
}

.site-nav a:hover,
.site-nav a:focus,
.site-nav a.is-active {
    background: #f3eee4;
    color: var(--almishqas-color-brand-strong);
    box-shadow: none;
}

.site-nav a.is-active {
    box-shadow: inset 0 -.2rem 0 #c6a96b;
}

.language-switch {
    border-color: rgba(25, 91, 59, .22);
}

.nav-toggle {
    color: var(--almishqas-color-brand-strong);
}

.institutional-home {
    overflow: hidden;
}

.institutional-hero {
    padding-block: 1rem 4rem;
    background: #f7f3eb;
}

.institutional-hero__layout {
    min-height: 62rem;
    display: grid;
    grid-template-columns: minmax(48rem, 1.08fr) minmax(0, .92fr);
    grid-template-areas: "image copy";
    align-items: stretch;
    gap: clamp(4rem, 6vw, 8rem);
}

.institutional-hero__copy {
    grid-area: copy;
    align-self: center;
    padding-block: 7rem;
}

.institutional-hero h1 {
    max-width: 62rem;
    margin: 0;
    color: var(--almishqas-color-brand-strong);
    font-size: clamp(4.6rem, 4.4vw, 5.9rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.institutional-hero__lead {
    max-width: 58rem;
    margin: 2.2rem 0 0;
    color: #415247;
    font-size: clamp(1.7rem, 1.9vw, 2rem);
    line-height: 1.9;
}

.institutional-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.6rem 2.6rem;
    margin-block-start: 3.4rem;
}

.institutional-hero__image {
    grid-area: image;
    min-height: 62rem;
    margin: 0;
    overflow: hidden;
    border-radius: 0 0 3.2rem 3.2rem;
    background: #e7dfd0;
}

.institutional-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% center;
}

.network-proof {
    border-block: .1rem solid rgba(25, 91, 59, .14);
    background: #fff;
}

.network-proof__layout {
    min-height: 11rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
}

.network-proof__layout > div {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 1.3rem;
    min-height: 6rem;
    padding-inline: 4rem;
    border-inline-start: .1rem solid rgba(25, 91, 59, .16);
}

.network-proof__layout > div:first-child {
    border-inline-start: 0;
}

.network-proof i {
    color: var(--almishqas-color-brand-text);
    font-size: 2.5rem;
}

.network-proof strong {
    color: var(--almishqas-color-brand-strong);
    font-size: 3rem;
    line-height: 1;
}

.network-proof span {
    color: #5c6c62;
    font-size: 1.35rem;
}

.service-stories {
    padding-block: 0;
    background: #fff;
}

.service-stories > .section-heading {
    margin-block-end: 5rem;
}

.service-stories__list {
    display: grid;
}

.service-story {
    width: min(100% - 4.8rem, 128rem);
    min-height: 38rem;
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
    margin-inline: auto;
    overflow: hidden;
}

.service-story:first-child {
    border-radius: 3rem 3rem 0 0;
}

.service-story:last-child {
    border-radius: 0 0 3rem 3rem;
}

.service-story--green,
.service-story--gold {
    grid-template-areas: "copy image";
}

.service-story--ivory {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    grid-template-areas: "image copy";
}

.service-story--green {
    background: var(--almishqas-color-brand-strong);
    color: #fff;
}

.service-story--ivory {
    border-inline: .1rem solid rgba(25, 91, 59, .14);
    background: #f8f4ec;
}

.service-story--gold {
    background: #c99c3c;
    color: #2e281b;
}

.service-story__image {
    grid-area: image;
    min-height: 38rem;
    overflow: hidden;
}

.service-story__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-story--green .service-story__image img {
    object-position: center 36%;
}

.service-story__copy {
    grid-area: copy;
    position: relative;
    align-self: center;
    padding: clamp(4rem, 6vw, 8rem);
}

.service-story__number {
    position: absolute;
    inset-block-start: 2.5rem;
    inset-inline-end: 3rem;
    color: currentColor;
    font-size: clamp(6rem, 8vw, 10rem);
    font-weight: 600;
    line-height: 1;
    color: #7a7972;
}

.service-story--green .service-story__number {
    color: #95b5a5;
}

.service-story--gold .service-story__number {
    color: #61430f;
}

.service-story .eyebrow {
    position: relative;
    z-index: 1;
}

.service-story--green .eyebrow,
.service-story--green .text-action {
    color: #fff;
}

.service-story--gold .eyebrow,
.service-story--gold .text-action {
    color: #2e281b;
}

.service-story h3 {
    position: relative;
    z-index: 1;
    max-width: 56rem;
    margin: 0;
    color: currentColor;
    font-size: clamp(3rem, 3.5vw, 4.8rem);
    line-height: 1.35;
    letter-spacing: -.035em;
}

.service-story__copy > p:not(.eyebrow) {
    position: relative;
    z-index: 1;
    max-width: 54rem;
    margin: 1.8rem 0 2.5rem;
    color: currentColor;
    font-size: 1.65rem;
    opacity: .82;
}

.service-story--gold .service-story__copy > p:not(.eyebrow) {
    opacity: 1;
}

.institutional-locator {
    padding-block: 9rem;
    background: #f7f3eb;
}

.institutional-locator__layout {
    min-height: 48rem;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    grid-template-areas: "content map";
    overflow: hidden;
    border: .1rem solid rgba(25, 91, 59, .16);
    border-radius: 3rem;
    background: #fff;
    box-shadow: 0 2rem 6rem rgba(38, 54, 45, .08);
}

.institutional-locator__map {
    grid-area: map;
    overflow: hidden;
}

.institutional-locator__map img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.institutional-locator__content {
    grid-area: content;
    align-self: center;
    padding: clamp(4rem, 6vw, 8rem);
}

.institutional-locator h2,
.institutional-trust h2 {
    margin: 0;
    color: var(--almishqas-color-brand-strong);
    font-size: clamp(3.6rem, 4vw, 5.2rem);
    line-height: 1.3;
    letter-spacing: -.04em;
}

.institutional-locator__content > p:not(.eyebrow) {
    margin: 1.5rem 0 2.4rem;
    color: #526158;
    font-size: 1.6rem;
}

.institutional-locator__field {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: .7rem;
    border: .1rem solid rgba(25, 91, 59, .2);
    border-radius: 1.2rem;
    background: #fbfaf6;
}

.institutional-locator__field > i {
    margin-inline-start: 1.2rem;
    color: var(--almishqas-color-brand-text);
}

.institutional-locator__field input {
    min-width: 0;
    min-height: 5rem;
    border: 0;
    background: transparent;
    color: var(--almishqas-color-ink);
    font: inherit;
    outline: 0;
}

.institutional-locator__field .button {
    min-height: 4.8rem;
}

.institutional-locator__content > .text-action {
    margin-block-start: 1.5rem;
}

.institutional-trust {
    padding-block: 6.5rem;
    background: var(--almishqas-color-brand-strong);
    color: #fff;
}

.institutional-trust__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6rem;
}

.institutional-trust h2,
.institutional-trust .eyebrow {
    color: #fff;
}

.institutional-trust p {
    margin-block-end: 0;
    color: rgba(255, 255, 255, .78);
}

.institutional-trust ul {
    display: flex;
    gap: 3.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.institutional-trust li {
    display: grid;
    justify-items: center;
    gap: .8rem;
    min-width: 10rem;
    color: rgba(255, 255, 255, .9);
    font-size: 1.35rem;
}

.institutional-trust li i {
    font-size: 2.7rem;
    color: #d8c9a5;
}

/* Data-rich branches, agents, and services */
.data-hero {
    position: relative;
    overflow: hidden;
    padding-block: 8rem;
    border-block-end: .1rem solid rgba(25, 91, 59, .14);
    background: #eee7d9 url("../brand/almishqas-mark.svg") 8% center / 22rem no-repeat;
}

[dir="ltr"] .data-hero {
    background-position: 92% center;
}

.data-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 7rem;
}

.data-hero h1 {
    margin: 0;
    color: var(--almishqas-color-brand-strong);
    font-size: clamp(5rem, 7vw, 8rem);
    line-height: 1.15;
    letter-spacing: -.05em;
}

.data-hero__layout > div:first-child > p:last-child {
    max-width: 68rem;
    margin: 2rem 0 0;
    color: #425248;
    font-size: 1.75rem;
}

.data-hero__metric {
    min-width: 24rem;
    padding: 2.8rem 3.2rem;
    border-radius: 2rem;
    background: var(--almishqas-color-brand-strong);
    color: #fff;
}

.data-hero__metric strong,
.data-hero__metric span {
    display: block;
}

.data-hero__metric strong {
    font-size: 5.4rem;
    line-height: 1;
}

.data-hero__metric span {
    margin-block-start: .8rem;
    color: rgba(255, 255, 255, .75);
    font-size: 1.4rem;
}

.network-directory__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 3rem;
    margin-block-end: 3rem;
}

.network-directory__heading h2 {
    margin: 0;
    color: var(--almishqas-color-brand-strong);
    font-size: clamp(3.4rem, 4vw, 5rem);
    line-height: 1.3;
}

.directory-toolbar--institutional {
    display: grid;
    grid-template-columns: minmax(28rem, 1.5fr) repeat(2, minmax(18rem, .75fr));
    gap: 1.5rem;
    margin-block-end: 3rem;
    padding: 1.4rem;
    border: .1rem solid rgba(25, 91, 59, .14);
    border-radius: 2rem;
    background: #fff;
    box-shadow: 0 1.4rem 4rem rgba(38, 54, 45, .06);
}

.directory-toolbar--agents-external {
    grid-template-columns: minmax(28rem, 1.5fr) minmax(18rem, .75fr);
}

.directory-toolbar--institutional .field-group {
    min-width: 0;
}

.directory-toolbar--institutional label {
    margin-inline-start: .5rem;
    color: var(--almishqas-color-brand-strong);
    font-size: 1.25rem;
}

.directory-toolbar--institutional input,
.directory-toolbar--institutional select {
    min-height: 5.4rem;
    border-color: rgba(25, 91, 59, .16);
    border-radius: 1.2rem;
    background: #f8f5ee;
}

.field-control {
    position: relative;
}

.field-control > i {
    position: absolute;
    z-index: 1;
    inset-inline-start: 1.6rem;
    inset-block-start: 50%;
    color: var(--almishqas-color-brand-text);
    transform: translateY(-50%);
}

.field-control input {
    width: 100%;
    padding-inline-start: 4.4rem;
}

.network-card-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.8rem;
}

.network-card {
    min-height: 22rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 2rem;
    padding: 2.8rem;
    border: .1rem solid rgba(25, 91, 59, .13);
    border-radius: 2.2rem;
    background: #fff;
    box-shadow: 0 1.2rem 4rem rgba(38, 54, 45, .06);
}

.network-card:nth-child(6n + 1) {
    background: #f1ecdf;
}

.network-card:hover,
.network-card:focus-within {
    border-color: rgba(25, 91, 59, .42);
    box-shadow: 0 1.8rem 5rem rgba(38, 54, 45, .11);
    transform: translateY(-.3rem);
}

.network-card__ordinal {
    color: #7a5b1e;
    font-size: 2rem;
    font-weight: 700;
}

.network-card__type {
    margin: 0 0 .8rem !important;
    color: var(--almishqas-color-brand-text) !important;
    font-size: 1.2rem !important;
}

.network-card h2 {
    margin: 0 0 1rem;
    color: var(--almishqas-color-brand-strong);
    font-size: 2.2rem;
    line-height: 1.45;
}

.network-card__body > p:not(.network-card__type) {
    margin: 0;
    color: #56655c;
}

.network-card .directory-card__meta {
    gap: 1.2rem 2rem;
    margin-block-start: 1.8rem;
    color: #44534a;
}

.network-card__action,
.network-card__mark {
    display: grid;
    place-items: center;
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 50%;
    background: var(--almishqas-color-brand-strong);
    color: #fff !important;
    text-decoration: none;
}

.network-card__mark {
    background: #efe5cf;
    color: var(--almishqas-color-brand-strong) !important;
}

.segmented-actions--tabs {
    padding: .5rem;
    border: .1rem solid rgba(25, 91, 59, .14);
    border-radius: 1.5rem;
    background: #fff;
}

.segmented-actions--tabs .button {
    min-height: 4.6rem;
    border-radius: 1rem;
}

.service-catalog {
    background: #f7f3eb;
}

.service-catalog__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}

.service-showcase {
    position: relative;
    min-height: 34rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 3.4rem;
    border: .1rem solid rgba(25, 91, 59, .14);
    border-radius: 2.4rem;
    background: #fff;
    box-shadow: 0 1.4rem 4rem rgba(38, 54, 45, .06);
}

.service-showcase:nth-child(4n + 1) {
    grid-column: span 2;
    min-height: 38rem;
    background: var(--almishqas-color-brand-strong) url("../brand/almishqas-mark-white.svg") 5% 120% / 28rem no-repeat;
    color: #fff;
}

.service-showcase:nth-child(4n + 3) {
    background: #d0a64d;
    color: #2e281b;
}

.service-showcase__number {
    position: absolute;
    inset-block-start: 2rem;
    inset-inline-end: 2.6rem;
    color: #7a7972;
    font-size: 5.6rem;
    line-height: 1;
}

.service-showcase:nth-child(4n + 1) .service-showcase__number {
    color: #95b5a5;
}

.service-showcase:nth-child(4n + 3) .service-showcase__number {
    color: #61430f;
}

.service-showcase__icon {
    display: grid;
    place-items: center;
    width: 6.4rem;
    height: 6.4rem;
    margin-block-end: auto;
    border-radius: 1.6rem;
    background: #f0e8d8;
}

.service-showcase:nth-child(4n + 1) .service-showcase__icon,
.service-showcase:nth-child(4n + 3) .service-showcase__icon {
    background: rgba(255, 255, 255, .18);
}

.service-showcase__icon > span {
    width: 3.2rem;
    height: 3.2rem;
    background: var(--almishqas-color-brand-strong);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.service-showcase:nth-child(4n + 1) .service-showcase__icon > span {
    background: #fff;
}

.service-showcase__content {
    margin-block-start: 3rem;
}

.service-showcase__label {
    margin: 0 0 .9rem;
    color: var(--almishqas-color-brand-text);
    font-size: 1.2rem;
}

.service-showcase:nth-child(4n + 1) .service-showcase__label,
.service-showcase:nth-child(4n + 1) h2,
.service-showcase:nth-child(4n + 1) .service-showcase__content > p,
.service-showcase:nth-child(4n + 1) summary {
    color: #fff;
}

.service-showcase:nth-child(4n + 3) .service-showcase__label,
.service-showcase:nth-child(4n + 3) h2,
.service-showcase:nth-child(4n + 3) .service-showcase__content > p,
.service-showcase:nth-child(4n + 3) summary {
    color: #2e281b;
}

.service-showcase h2 {
    max-width: 58rem;
    margin: 0;
    color: var(--almishqas-color-brand-strong);
    font-size: clamp(2.6rem, 3vw, 3.8rem);
    line-height: 1.35;
}

.service-showcase__content > p:not(.service-showcase__label) {
    max-width: 64rem;
    margin: 1.2rem 0 0;
    color: #516158;
}

.service-showcase details {
    margin-block-start: 1.8rem;
}

.service-showcase summary {
    width: fit-content;
    color: var(--almishqas-color-brand-text);
    cursor: pointer;
    font-weight: 700;
}

.service-showcase details p {
    max-width: 70rem;
    color: currentColor;
    opacity: .82;
}

.data-cta {
    padding-block: 6rem;
    background: var(--almishqas-color-brand-strong);
    color: #fff;
}

.data-cta__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5rem;
}

.data-cta h2,
.data-cta .eyebrow {
    margin: 0;
    color: #fff;
}

.data-cta h2 {
    font-size: clamp(3.2rem, 4vw, 4.8rem);
}

.data-cta p {
    color: rgba(255, 255, 255, .75);
}

.data-cta__layout > div:last-child {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.data-cta .button {
    border-color: #fff;
    background: #fff;
    color: var(--almishqas-color-brand-strong) !important;
}

.data-cta .text-action {
    color: #fff;
}

@media (max-width: 1100px) {
    .header-inner {
        padding-inline: 1rem;
    }

    .site-nav a {
        padding-inline: .75rem;
        font-size: 1.2rem;
    }

    .site-brand,
    .site-brand .brand-mark__asset {
        min-width: 15rem;
        width: 15rem;
    }

    .institutional-hero__layout {
        grid-template-columns: minmax(38rem, 1fr) minmax(0, .9fr);
        gap: 4rem;
    }

    .institutional-hero h1 {
        font-size: 5.4rem;
    }
}

@media (max-width: 900px) {
    .site-header {
        min-height: 8rem;
        padding-block: .8rem;
    }

    .header-inner {
        min-height: 6.4rem;
        border-radius: 1.6rem;
    }

    .site-nav {
        background: #fff;
    }

    .site-nav a {
        color: var(--almishqas-color-brand-strong);
    }

    .institutional-hero {
        padding-block-end: 2rem;
    }

    .institutional-hero__layout {
        grid-template-columns: 1fr;
        grid-template-areas: "copy" "image";
        gap: 0;
    }

    .institutional-hero__copy {
        padding-block: 5rem 6rem;
    }

    .institutional-hero__image {
        min-height: 48rem;
        max-height: 58rem;
        border-radius: 2.4rem;
    }

    .network-proof__layout > div {
        padding-inline: 2rem;
    }

    .service-story,
    .service-story--green,
    .service-story--ivory,
    .service-story--gold {
        grid-template-columns: 1fr;
        grid-template-areas: "image" "copy";
    }

    .service-story__image {
        min-height: 34rem;
        max-height: 45rem;
    }

    .institutional-locator__layout {
        grid-template-columns: 1fr;
        grid-template-areas: "content" "map";
    }

    .institutional-locator__map {
        min-height: 34rem;
    }

    .institutional-trust__layout,
    .data-hero__layout,
    .data-cta__layout {
        grid-template-columns: 1fr;
    }

    .institutional-trust ul {
        justify-content: space-between;
    }

    .data-hero__metric {
        width: fit-content;
    }

    .directory-toolbar--institutional,
    .directory-toolbar--agents-external {
        grid-template-columns: 1fr 1fr;
    }

    .field-group--search {
        grid-column: 1 / -1;
    }

    .network-card-list,
    .service-catalog__grid {
        grid-template-columns: 1fr 1fr;
    }

    .service-showcase:nth-child(4n + 1) {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .site-container,
    .service-story {
        width: min(100% - 3.2rem, 128rem);
    }

    .site-header .site-container {
        width: min(100% - 2rem, 128rem);
    }

    .site-brand,
    .site-brand .brand-mark__asset {
        min-width: 13.5rem;
        width: 13.5rem;
    }

    .institutional-hero h1 {
        font-size: 4.2rem;
    }

    .institutional-hero__lead {
        font-size: 1.6rem;
    }

    .institutional-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .institutional-hero__actions .button {
        width: 100%;
    }

    .institutional-hero__image {
        min-height: 36rem;
    }

    .network-proof__layout {
        min-height: 9.5rem;
    }

    .network-proof__layout > div {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: .3rem;
        padding-inline: .7rem;
        text-align: center;
    }

    .network-proof i {
        display: none;
    }

    .network-proof strong {
        font-size: 2.3rem;
    }

    .network-proof span {
        font-size: 1.05rem;
    }

    .service-stories {
        padding-block-start: 6rem;
    }

    .service-story {
        min-height: 0;
    }

    .service-story__image {
        min-height: 27rem;
    }

    .service-story__copy {
        padding: 3.5rem 2.4rem 4rem;
    }

    .service-story h3 {
        font-size: 3rem;
    }

    .service-story__number {
        font-size: 6rem;
    }

    .institutional-locator {
        padding-block: 6rem;
    }

    .institutional-locator__layout {
        border-radius: 2rem;
    }

    .institutional-locator__content {
        padding: 3.2rem 2rem;
    }

    .institutional-locator__field {
        grid-template-columns: auto 1fr;
    }

    .institutional-locator__field .button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .institutional-locator__map {
        min-height: 26rem;
    }

    .institutional-trust__layout {
        gap: 3.5rem;
    }

    .institutional-trust ul {
        gap: 1rem;
    }

    .institutional-trust li {
        min-width: 0;
        flex: 1;
        text-align: center;
    }

    .data-hero {
        padding-block: 5rem;
        background-size: 14rem;
    }

    .data-hero h1 {
        font-size: 4.6rem;
    }

    .data-hero__metric {
        min-width: 20rem;
        padding: 2.2rem;
    }

    .data-hero__metric strong {
        font-size: 4.5rem;
    }

    .network-directory__heading {
        align-items: stretch;
        flex-direction: column;
    }

    .network-directory__heading .segmented-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .directory-toolbar--institutional,
    .directory-toolbar--agents-external {
        grid-template-columns: 1fr;
        border-radius: 1.6rem;
    }

    .field-group--search {
        grid-column: auto;
    }

    .network-card-list,
    .service-catalog__grid {
        grid-template-columns: 1fr;
    }

    .network-card {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 2rem;
        border-radius: 1.7rem;
    }

    .network-card__action,
    .network-card__mark {
        grid-column: 2;
        justify-self: end;
    }

    .service-showcase,
    .service-showcase:nth-child(4n + 1) {
        grid-column: auto;
        min-height: 32rem;
        padding: 2.6rem;
        border-radius: 1.8rem;
    }

    .data-cta__layout > div:last-child {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ========================================================================== */
/* Unified AAA institutional system                                           */
/* Final authority for the public experience: restrained density, consistent  */
/* geometry, and WCAG AAA text contrast across the shared Arabic/English UI.   */
/* ========================================================================== */

:root {
    --almishqas-aaa-green: #0f4f32;
    --almishqas-aaa-deep: #0b3d27;
    --almishqas-aaa-ink: #172a20;
    --almishqas-aaa-muted: #405047;
    --almishqas-aaa-ivory: #f7f3eb;
    --almishqas-aaa-gold: #f2dfad;
    --almishqas-aaa-gold-ink: #513600;
    --almishqas-color-brand-primary: #0f4f32;
    --almishqas-color-brand-ui: #0f4f32;
    --almishqas-color-brand-text: #0f4f32;
    --almishqas-color-brand-strong: #0b3d27;
    --almishqas-color-surface: #f7f3eb;
    --almishqas-color-surface-subtle-green: #e8f0ea;
    --almishqas-color-ink: #172a20;
}

body.site-body {
    background: var(--almishqas-aaa-ivory);
    color: var(--almishqas-aaa-ink);
    font-weight: 500;
}

.site-body a,
.text-action,
.service-card__link,
.contact-card__channel,
.field-control > i,
.institutional-locator__field > i,
.network-proof i {
    color: var(--almishqas-aaa-green);
}

.site-body a:focus-visible,
.site-body button:focus-visible,
.site-body input:focus-visible,
.site-body select:focus-visible,
.site-body textarea:focus-visible,
.choice-card:has(input:focus-visible) {
    outline-color: var(--almishqas-aaa-green);
}

.site-header {
    min-height: 8rem;
    padding-block: .8rem;
    background: var(--almishqas-aaa-ivory);
}

.header-inner {
    min-height: 6.4rem;
    padding: .55rem 1.2rem;
    border-color: rgba(15, 79, 50, .24);
    border-radius: 1.4rem;
    box-shadow: 0 .8rem 2.4rem rgba(23, 42, 32, .07);
}

.site-brand,
.site-brand .brand-mark__asset {
    min-width: 16.8rem;
    width: 16.8rem;
}

.site-nav a,
.language-switch {
    color: var(--almishqas-aaa-deep);
}

.language-switch,
.language-switch span,
.language-switch i {
    color: var(--almishqas-aaa-green) !important;
}

.language-switch {
    border-color: rgba(15, 79, 50, .4);
    background: #fff;
}

.language-switch:hover,
.language-switch:focus {
    background: #e8f0ea;
    color: var(--almishqas-aaa-deep) !important;
}

.nav-toggle {
    border-color: rgba(15, 79, 50, .5);
    color: var(--almishqas-aaa-deep);
}

.page-heading,
.page-heading--lg,
.page-heading--sm {
    padding-block: clamp(3.4rem, 4vw, 5rem);
    border-block: .1rem solid rgba(15, 79, 50, .15);
    background: linear-gradient(125deg, #edf2ed, #f7f3eb 72%);
}

.page-heading::after,
.services-hero::after {
    display: none;
}

.page-heading h1 {
    max-width: 72rem;
    font-size: clamp(3.2rem, 4.5vw, 5rem);
    letter-spacing: -.025em;
}

.page-heading p {
    max-width: 66rem;
    color: var(--almishqas-aaa-muted);
}

.eyebrow,
.service-showcase__label,
.network-card__type,
.home-service__number {
    color: var(--almishqas-aaa-green) !important;
}

.content-section,
.institutional-locator {
    padding-block: clamp(4.6rem, 5vw, 6.4rem);
}

.content-section--tight {
    padding-block: clamp(3.2rem, 4vw, 4.6rem);
}

.section-heading {
    gap: 3rem;
    margin-block-end: 3rem;
}

.section-heading h2,
.network-directory__heading h2,
.institutional-locator h2,
.institutional-trust h2 {
    font-size: clamp(3rem, 3.6vw, 4.4rem);
    letter-spacing: -.025em;
}

.section-heading > p,
.institutional-hero__lead,
.institutional-locator__content > p:not(.eyebrow),
.network-card__body > p:not(.network-card__type),
.home-locator__intro > p:not(.eyebrow),
.home-service p {
    color: var(--almishqas-aaa-muted);
}

.button,
.button--primary,
.button--more {
    border-color: var(--almishqas-aaa-green);
    background: var(--almishqas-aaa-green);
    color: #fff !important;
}

.button:hover,
.button:focus,
.button--primary:hover,
.button--primary:focus {
    border-color: var(--almishqas-aaa-deep);
    background: var(--almishqas-aaa-deep);
    color: #fff !important;
}

.button--secondary {
    border-color: var(--almishqas-aaa-green);
    background: transparent;
    color: var(--almishqas-aaa-green) !important;
}

.button--secondary:hover,
.button--secondary:focus {
    background: #e8f0ea;
    color: var(--almishqas-aaa-deep) !important;
}

.trust-card,
.feature-card,
.contact-card,
.app-card,
.value-card,
.job-card,
.empty-state,
.form-shell,
.data-panel,
.location-detail-card,
.location-coordinates,
.auth-assurance,
.prose-card {
    border-color: rgba(15, 79, 50, .22);
    border-radius: 1.4rem;
    box-shadow: 0 .8rem 2.4rem rgba(23, 42, 32, .055);
}

.card-icon {
    border-radius: 1.2rem;
    background: #e8f0ea;
    color: var(--almishqas-aaa-green);
}

.about-page .prose-card {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
}

.about-page .prose-card p {
    margin: 0;
}

.content-section--green {
    background: var(--almishqas-aaa-deep);
    color: #fff;
}

.content-section--green .section-heading h2,
.content-section--green .eyebrow {
    color: #fff !important;
}

.content-section--green .eyebrow::before {
    background: var(--almishqas-aaa-gold);
}

.content-section--green .value-card {
    background: #fff;
    color: var(--almishqas-aaa-ink);
}

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

.contact-card,
.app-card,
.job-card {
    min-height: 24rem;
    display: flex;
    flex-direction: column;
}

.contact-card .service-card__link,
.app-card .service-card__link,
.job-card .service-card__link {
    margin-block-start: auto;
}

.contact-card__note {
    color: var(--almishqas-aaa-muted);
    opacity: 1;
}

.form-shell,
.form-shell--wide {
    max-width: 98rem;
    margin-inline: auto;
}

.field-group input,
.field-group select,
.field-group textarea,
.form-control {
    min-height: 5.2rem;
    border-color: #64806e;
    border-radius: .8rem;
    background: #fff;
}

.survey-question,
.choice-card {
    border-color: rgba(15, 79, 50, .3);
    border-radius: 1rem;
}

.survey-question {
    background: #f8f6f0;
}

.choice-card:has(input:checked) {
    border-color: var(--almishqas-aaa-green);
    background: #e8f0ea;
}

.auth-assurance {
    background: var(--almishqas-aaa-deep);
}

.auth-assurance p,
.data-cta p,
.institutional-trust p,
.institutional-trust li,
.data-hero__metric span {
    color: #fff;
}

.data-hero {
    min-height: 25rem;
    display: flex;
    align-items: center;
    padding-block: 4.8rem;
    background-color: #ede8dc;
    background-image: none !important;
}

.data-hero__layout {
    width: 100%;
    align-items: center;
    gap: 4rem;
}

.data-hero h1 {
    font-size: clamp(4rem, 5.5vw, 6.4rem);
}

.data-hero__layout > div:first-child > p:last-child {
    margin-block-start: 1.4rem;
    color: var(--almishqas-aaa-muted);
}

.data-hero__metric {
    min-width: 20rem;
    padding: 2.2rem 2.6rem;
    border-radius: 1.2rem;
    background: var(--almishqas-aaa-deep);
}

.data-hero__metric strong {
    font-size: 4.6rem;
}

.network-directory__heading {
    margin-block-end: 2.4rem;
}

.directory-toolbar--institutional,
.directory-toolbar,
.segmented-actions--tabs {
    border-color: rgba(15, 79, 50, .24);
    border-radius: 1.2rem;
    box-shadow: none;
}

.network-card-list {
    gap: 1.4rem;
}

.network-card {
    min-height: 17rem;
    gap: 1.6rem;
    padding: 2.2rem;
    border-color: rgba(15, 79, 50, .2);
    border-radius: 1.2rem;
    box-shadow: 0 .5rem 1.8rem rgba(23, 42, 32, .045);
}

.network-card:nth-child(6n + 1) {
    background: #f2eee4;
}

.network-card__ordinal {
    color: var(--almishqas-aaa-gold-ink);
}

.network-card .directory-card__meta {
    color: var(--almishqas-aaa-muted);
}

.network-card__action,
.network-card__mark {
    background: var(--almishqas-aaa-deep);
    color: #fff !important;
}

.service-catalog__grid {
    gap: 1.4rem;
}

.service-showcase,
.service-showcase:nth-child(4n + 1),
.service-showcase:nth-child(4n + 3) {
    grid-column: auto;
    min-height: 30rem;
    padding: 2.8rem;
    border-color: rgba(15, 79, 50, .2);
    border-radius: 1.4rem;
    background-color: #fff;
    background-image: none !important;
    color: var(--almishqas-aaa-ink);
    box-shadow: 0 .6rem 2rem rgba(23, 42, 32, .05);
}

.service-showcase:nth-child(3n + 2) {
    background-color: #edf2ed;
}

.service-showcase:nth-child(3n) {
    background-color: var(--almishqas-aaa-gold);
}

.service-showcase__number,
.service-showcase:nth-child(4n + 1) .service-showcase__number,
.service-showcase:nth-child(4n + 3) .service-showcase__number {
    color: var(--almishqas-aaa-green);
    font-size: 4.8rem;
}

.service-showcase__icon,
.service-showcase:nth-child(4n + 1) .service-showcase__icon,
.service-showcase:nth-child(4n + 3) .service-showcase__icon {
    background: #e8f0ea;
}

.service-showcase__icon > span,
.service-showcase:nth-child(4n + 1) .service-showcase__icon > span {
    background: var(--almishqas-aaa-green);
}

.service-showcase:nth-child(4n + 1) .service-showcase__label,
.service-showcase:nth-child(4n + 1) h2,
.service-showcase:nth-child(4n + 1) .service-showcase__content > p,
.service-showcase:nth-child(4n + 1) summary,
.service-showcase:nth-child(4n + 3) .service-showcase__label,
.service-showcase:nth-child(4n + 3) h2,
.service-showcase:nth-child(4n + 3) .service-showcase__content > p,
.service-showcase:nth-child(4n + 3) summary,
.service-showcase h2,
.service-showcase__content > p:not(.service-showcase__label),
.service-showcase summary {
    color: var(--almishqas-aaa-ink);
}

.service-showcase:nth-child(3n) .service-showcase__label,
.service-showcase:nth-child(3n) .service-showcase__number,
.service-showcase:nth-child(3n) summary {
    color: var(--almishqas-aaa-gold-ink) !important;
}

.service-showcase h2 {
    font-size: clamp(2.4rem, 2.6vw, 3.2rem);
}

.service-showcase details p {
    opacity: 1;
}

.network-proof span {
    color: var(--almishqas-aaa-muted);
}

.service-story--green,
.institutional-trust,
.data-cta {
    background: var(--almishqas-aaa-deep);
}

.service-story--green .service-story__number,
.service-story--green .service-story__copy > p:not(.eyebrow),
.service-story--green .eyebrow,
.service-story--green .text-action {
    color: #fff !important;
    opacity: 1;
}

.service-story--ivory .service-story__number {
    color: var(--almishqas-aaa-muted);
}

.service-story--gold {
    background: var(--almishqas-aaa-gold);
    color: var(--almishqas-aaa-gold-ink);
}

.service-story--gold .service-story__number,
.service-story--gold .eyebrow,
.service-story--gold .text-action {
    color: var(--almishqas-aaa-gold-ink) !important;
}

.institutional-trust li i {
    color: #fff;
}

.site-footer {
    padding-block-start: 3.6rem;
    background: var(--almishqas-aaa-deep);
}

.footer-grid {
    gap: 2.8rem;
    padding-block-end: 3rem;
}

.footer-brand p,
.site-footer a,
.footer-bottom,
.footer-links h2,
.footer-contact h2 {
    color: #fff;
}

.footer-brand p {
    margin-block-start: 1.4rem;
}

.footer-links,
.footer-contact {
    gap: .55rem;
}

.footer-bottom {
    padding-block: 1.4rem;
}

.service-status {
    border-radius: 1.4rem;
    box-shadow: 0 .8rem 2.4rem rgba(23, 42, 32, .055);
}

@media (max-width: 900px) {
    .about-page .prose-card,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .site-nav {
        border-color: rgba(15, 79, 50, .22);
        background: #fff;
    }
}

@media (max-width: 640px) {
    .site-container {
        width: min(100% - 3.2rem, 124rem);
    }

    .site-header {
        min-height: 7rem;
        padding-block: .5rem;
    }

    .header-inner {
        min-height: 6rem;
        padding-inline: .8rem;
        border-radius: 1rem;
    }

    .site-brand,
    .site-brand .brand-mark__asset {
        min-width: 14rem;
        width: 14rem;
    }

    .page-heading,
    .page-heading--lg,
    .page-heading--sm {
        padding-block: 3rem;
    }

    .page-heading h1 {
        font-size: 3.4rem;
    }

    .content-section,
    .institutional-locator {
        padding-block: 4rem;
    }

    .section-heading {
        margin-block-end: 2.4rem;
    }

    .section-heading h2,
    .network-directory__heading h2,
    .institutional-locator h2,
    .institutional-trust h2 {
        font-size: 3rem;
    }

    .data-hero {
        min-height: 0;
        padding-block: 3.2rem;
        background-image: none !important;
    }

    .data-hero__layout {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 1.5rem;
    }

    .data-hero h1 {
        font-size: 3.6rem;
    }

    .data-hero__layout > div:first-child > p:last-child {
        margin-block-start: .8rem;
        font-size: 1.5rem;
    }

    .data-hero__metric {
        min-width: 8.5rem;
        padding: 1.5rem 1.2rem;
        text-align: center;
    }

    .data-hero__metric strong {
        font-size: 3.2rem;
    }

    .data-hero__metric span {
        font-size: 1.15rem;
    }

    .network-card {
        min-height: 0;
        padding: 1.6rem;
        border-radius: 1rem;
    }

    .service-showcase,
    .service-showcase:nth-child(4n + 1),
    .service-showcase:nth-child(4n + 3) {
        min-height: 26rem;
        padding: 2.2rem;
        border-radius: 1rem;
        background-image: none !important;
    }

    .service-showcase__content {
        margin-block-start: 2rem;
    }

    .form-shell,
    .job-card,
    .empty-state,
    .location-detail-card,
    .location-coordinates,
    .auth-assurance,
    .prose-card {
        padding: 2rem;
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.2rem 1.6rem;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-contact {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-contact h2 {
        grid-column: 1 / -1;
    }
}