.abn-home__content {
    overflow: clip;
    background: var(--abn-surface);
}

/*
 * Every section carries this padding on BOTH edges, so the space a reader
 * actually sees between two sections is double it. At 9vw that was 129.6px +
 * 129.6px = 259px at 1440px wide - measured 294px of empty page between the
 * end of التوجه الاستراتيجي and the heading of المزايا النسبية, roughly a
 * third of a screen. The media department flagged it as a hole in the page.
 *
 * Halved, so two adjacent sections now total about 138px at 1440px and 168px
 * at 1920px - still a clear break between subjects, without the void. The
 * gap between sections is the number that matters here, not this one.
 */
.abn-section {
    position: relative;
    padding-block: clamp(56px, 4.8vw, 84px);
}

.abn-section__header {
    max-width: 980px;
    margin-block-end: clamp(36px, 5vw, 68px);
}

.abn-section__title {
    max-width: 22ch;
    color: var(--abn-primary-deep) !important;
    font-size: clamp(2rem, 3.5vw, 4rem) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.045em;
}

.abn-section__intro {
    max-width: 65ch;
    margin: 14px 0 0;
    color: var(--abn-ink-soft);
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    line-height: 1.9;
}

.abn-section__header--split {
    display: flex;
    max-width: none;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}

.abn-section__header--split > div {
    min-width: 0;
}

.abn-text-link,
.abn-button {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none !important;
}

.abn-text-link {
    flex: 0 0 auto;
    padding-block: 8px;
    color: var(--abn-primary-deep) !important;
    border-block-end: 1px solid color-mix(in oklch, var(--abn-primary) 34%, transparent);
    font-size: 0.92rem;
    font-weight: 700;
    transition: color var(--abn-transition), border-color var(--abn-transition), gap var(--abn-transition);
}

.abn-text-link:hover,
.abn-text-link:focus-visible {
    color: var(--abn-primary) !important;
    border-color: var(--abn-primary);
    gap: 16px;
}

.abn-text-link svg,
.abn-button svg {
    width: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.abn-button {
    min-width: 156px;
    padding: 14px 24px;
    border: 1px solid transparent;
    border-radius: var(--abn-radius-sm);
    font-size: 0.9rem;
    font-weight: 700;
    transition: color var(--abn-transition), background var(--abn-transition), border-color var(--abn-transition), transform var(--abn-transition);
}

.abn-button:hover,
.abn-button:focus-visible {
    transform: translateY(-3px);
}

.abn-button--primary {
    color: var(--abn-primary-deep) !important;
    background: var(--abn-gold);
}

.abn-button--primary:hover,
.abn-button--primary:focus-visible {
    color: var(--abn-primary-deep) !important;
    background: color-mix(in oklch, var(--abn-gold) 86%, var(--abn-surface));
}

.abn-button--ghost {
    color: var(--abn-surface) !important;
    border-color: color-mix(in oklch, var(--abn-surface) 44%, transparent);
    background: color-mix(in oklch, var(--abn-primary-deep) 76%, transparent);
}

.abn-button--ghost:hover,
.abn-button--ghost:focus-visible {
    color: var(--abn-surface) !important;
    border-color: var(--abn-surface);
    background: color-mix(in oklch, var(--abn-surface) 10%, transparent);
}

/* Hero: the east-west gateway */
.abn-hero {
    position: relative;
    display: grid;
    min-height: clamp(690px, calc(100svh - var(--abn-header-height)), 900px);
    align-items: end;
    isolation: isolate;
}

.abn-hero__media,
.abn-hero__media::after {
    position: absolute;
    inset: 0;
}

.abn-hero__media {
    z-index: -2;
    overflow: hidden;
    background: var(--abn-primary-deep);
}

.abn-hero__media picture,
.abn-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
}

/*
 * transform-origin at the top edge, not the centre: the drift scales up to
 * 1.03, and about the centre that would push the top of the photograph - where
 * the Omani flag is - out of frame by half the growth. Anchored to the top,
 * the whole upscale is absorbed at the bottom and the flag never moves.
 */
.abn-hero__media picture {
    transform-origin: center top;
    will-change: transform;
    animation: abn-hero-drift 26s var(--abn-ease-out) infinite alternate;
}

/*
 * The Omani flag sits at the very top of this photograph, so the crop is
 * anchored near the top rather than centred: object-fit: cover trims the
 * overflow from the bottom instead of decapitating the flag.
 *
 * The base scale is also 1 rather than 1.025 - a 2.5% upscale alone was
 * enough to clip the flagpole's finial.
 */
.abn-hero__media img {
    object-fit: cover;
    object-position: center 12%;
    transform: scale(1);
    will-change: transform;
}

/*
 * The drift used to translate UP (-1.2% on Y), which pushed the flag further
 * out of frame at the end of every cycle. It now moves only horizontally, so
 * the top edge of the image is fixed for the whole animation and the flag
 * stays whole no matter when you look at it.
 */
@keyframes abn-hero-drift {
    from {
        transform: scale(1) translate3d(0, 0, 0);
    }

    to {
        transform: scale(1.03) translate3d(-1%, 0, 0);
    }
}

.abn-hero__media::after {
    z-index: 1;
    content: "";
    background:
        linear-gradient(90deg, color-mix(in oklch, var(--abn-primary-deep) 45%, transparent) 0%, transparent 48%, color-mix(in oklch, var(--abn-primary-deep) 72%, transparent) 100%),
        linear-gradient(0deg, color-mix(in oklch, var(--abn-primary-deep) 92%, transparent) 0%, color-mix(in oklch, var(--abn-primary-deep) 22%, transparent) 66%, color-mix(in oklch, var(--abn-primary-deep) 34%, transparent) 100%);
}

/* Cursor spotlight — a soft light following the mouse across the hero */
.abn-hero::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    opacity: 0;
    background: radial-gradient(circle 340px at var(--abn-spot-x, 50%) var(--abn-spot-y, 50%),
        color-mix(in oklch, var(--abn-turquoise) 44%, transparent),
        color-mix(in oklch, var(--abn-gold) 16%, transparent) 34%,
        transparent 68%);
    mix-blend-mode: screen;
    pointer-events: none;
    transition: opacity 480ms var(--abn-ease-out);
    will-change: opacity;
}

.abn-hero.is-spotlit::before {
    opacity: 1;
}

.abn-hero__canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 0;
    mix-blend-mode: screen;
    pointer-events: none;
    transition: opacity 900ms var(--abn-ease-out);
}

.abn-hero__canvas.is-ready {
    opacity: 0.72;
}

.abn-hero__content {
    position: relative;
    z-index: 3;
    display: grid;
    width: min(calc(100% - 56px), var(--abn-container));
    align-items: end;
    margin-inline: auto;
    padding-block: clamp(80px, 12vh, 142px) clamp(106px, 14vh, 160px);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 50px;
}

.abn-hero__copy {
    max-width: 960px;
}

.abn-hero__eyebrow {
    display: flex;
    align-items: center;
    margin: 0 0 18px;
    color: color-mix(in oklch, var(--abn-surface) 88%, transparent);
    font-size: clamp(0.82rem, 1vw, 0.96rem);
    font-weight: 600;
    gap: 12px;
}

.abn-hero__eyebrow::before {
    width: 54px;
    height: 2px;
    content: "";
    background: var(--abn-gold);
}

/* Cut from the same block as the services title: an extruded face that
   tilts toward the cursor. --rx/--ry come from initHeroTitle. */
.abn-hero__title {
    --rx: 0deg;
    --ry: 0deg;

    max-width: 9ch;
    color: var(--abn-surface) !important;
    font-size: clamp(3rem, 6.2vw, 6.2rem) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.055em;
    text-wrap: balance;
    transform:
        perspective(1000px)
        rotateX(var(--rx))
        rotateY(var(--ry))
        translateZ(0);
    transform-origin: 70% 50%;
    transition: transform 340ms var(--abn-ease-out), text-shadow 340ms var(--abn-ease-out);
    text-shadow:
        1px 1px 0 #0d4a63,
        2px 2px 0 #0b3f55,
        3px 3px 0 #093446,
        4px 4px 0 #072938,
        5px 5px 0 #051f2b,
        10px 16px 34px rgba(0, 16, 26, 0.5);
}

.abn-hero__copy.is-tilting .abn-hero__title {
    text-shadow:
        2px 2px 0 var(--abn-gold),
        4px 4px 0 #a87f3c,
        6px 6px 0 #0b3f55,
        8px 8px 0 #082e3f,
        10px 10px 0 #051f2b,
        18px 26px 42px rgba(0, 16, 26, 0.55);
}

@media (prefers-reduced-motion: reduce) {
    .abn-hero__title {
        transform: none;
        transition: none;
    }
}

.abn-hero__title span {
    display: block;
}

.abn-hero__title span:last-child {
    margin-inline-start: clamp(32px, 8vw, 130px);
    color: color-mix(in oklch, var(--abn-surface) 92%, var(--abn-turquoise));
}

.abn-hero__intro {
    max-width: 660px;
    margin: 30px 0 0;
    color: color-mix(in oklch, var(--abn-surface) 80%, transparent);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 2;
}

.abn-hero__actions {
    display: flex;
    flex-wrap: wrap;
    margin-block-start: 34px;
    gap: 12px;
}

.abn-hero__scroll {
    position: absolute;
    inset-inline-start: max(28px, calc((100% - var(--abn-container)) / 2));
    inset-block-end: 30px;
    z-index: 4;
    display: flex;
    align-items: center;
    color: color-mix(in oklch, var(--abn-surface) 72%, transparent) !important;
    font-size: 0.72rem;
    font-weight: 600;
    gap: 12px;
    text-decoration: none !important;
}

.abn-hero__scroll i {
    position: relative;
    width: 58px;
    height: 1px;
    overflow: hidden;
    background: color-mix(in oklch, var(--abn-surface) 28%, transparent);
}

.abn-hero__scroll i::after {
    position: absolute;
    inset: 0;
    content: "";
    background: var(--abn-gold);
    transform: translateX(100%);
    animation: abn-scroll-line 2.4s var(--abn-ease-in-out) infinite;
}

.abn-hero::after {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 5;
    height: 6px;
    content: "";
    background: linear-gradient(90deg, var(--abn-primary) 0 42%, var(--abn-turquoise) 42% 63%, var(--abn-green) 63% 84%, var(--abn-gold) 84% 100%);
}

@keyframes abn-scroll-line {
    0% { transform: translateX(100%); }
    48%, 52% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* Digital services: one dark civic gateway, not three icon cards */
.abn-section--abn-home-services {
    overflow: hidden;
    color: color-mix(in oklch, var(--abn-surface) 84%, transparent);
    background: var(--abn-primary-deep);
}

.abn-section--abn-home-services::before,
.abn-section--abn-home-services::after {
    position: absolute;
    content: "";
    border: 1px solid color-mix(in oklch, var(--abn-turquoise) 24%, transparent);
    border-radius: 50%;
    pointer-events: none;
}

.abn-section--abn-home-services::before {
    inset-inline-start: -21vw;
    inset-block-start: -44vw;
    width: 78vw;
    height: 78vw;
}

.abn-section--abn-home-services::after {
    inset-inline-start: -8vw;
    inset-block-start: -32vw;
    width: 53vw;
    height: 53vw;
}

.abn-section--abn-home-services .abn-container {
    position: relative;
    display: grid;
    align-items: start;
    grid-template-columns: minmax(250px, 0.64fr) minmax(0, 1.36fr);
    gap: clamp(46px, 7vw, 120px);
}

.abn-section--abn-home-services .abn-section__header {
    position: sticky;
    inset-block-start: calc(var(--abn-header-height) + 42px);
    display: block;
    margin: 0;
}

/* The services title is cut as a solid object: an extruded face that tilts
   toward the cursor. --rx/--ry are written by initServicesTitle in
   experience.js; with no script the title simply sits still and extruded. */
.abn-section--abn-home-services .abn-section__title {
    --rx: 0deg;
    --ry: 0deg;

    position: relative;
    max-width: 8ch;
    color: var(--abn-surface) !important;
    font-size: clamp(2.7rem, 4.5vw, 5rem) !important;
    transform:
        perspective(900px)
        rotateX(var(--rx))
        rotateY(var(--ry))
        translateZ(0);
    transform-origin: 70% 50%;
    transition: transform 320ms var(--abn-ease-out), text-shadow 320ms var(--abn-ease-out);
    text-shadow:
        1px 1px 0 #0a5384,
        2px 2px 0 #095078,
        3px 3px 0 #084a6d,
        4px 4px 0 #063c5a,
        5px 5px 0 #052f47,
        10px 14px 24px rgba(0, 20, 34, 0.45);
}

/* Deepen the extrusion and light the leading edge gold while pointing at it */
.abn-section--abn-home-services .abn-section__header.is-tilting .abn-section__title {
    text-shadow:
        2px 2px 0 #daa650,
        4px 4px 0 #a87f3c,
        6px 6px 0 #095078,
        8px 8px 0 #073f5f,
        10px 10px 0 #052f47,
        18px 24px 34px rgba(0, 20, 34, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    .abn-section--abn-home-services .abn-section__title {
        transform: none;
        transition: none;
    }
}

.mod-abn-cards-shell--services {
    min-width: 0;
}

.mod-abn-cards {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mod-abn-cards__item {
    min-width: 0;
}

.mod-abn-cards--services {
    border-block-start: 1px solid color-mix(in oklch, var(--abn-surface) 18%, transparent);
}

.mod-abn-cards--services .mod-abn-cards__item {
    border-block-end: 1px solid color-mix(in oklch, var(--abn-surface) 18%, transparent);
}

.mod-abn-cards--services .mod-abn-cards__link {
    position: relative;
    display: grid;
    min-height: 182px;
    align-items: center;
    padding: 24px 18px;
    overflow: hidden;
    color: var(--abn-surface) !important;
    grid-template-columns: 38px minmax(115px, 170px) minmax(0, 1fr) auto 48px;
    gap: clamp(16px, 2.3vw, 34px);
    text-decoration: none !important;
    transition: background var(--abn-transition), padding var(--abn-transition);
}

.mod-abn-cards--services .mod-abn-cards__link::before {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, color-mix(in oklch, var(--abn-primary) 22%, transparent), transparent 72%);
    opacity: 0;
    transform: scaleX(0.78);
    transform-origin: right center;
    transition: opacity var(--abn-transition), transform var(--abn-transition);
}

.mod-abn-cards--services .mod-abn-cards__link:hover,
.mod-abn-cards--services .mod-abn-cards__link:focus-visible {
    padding-inline: 28px 12px;
    color: var(--abn-surface) !important;
}

.mod-abn-cards--services .mod-abn-cards__link:hover::before,
.mod-abn-cards--services .mod-abn-cards__link:focus-visible::before {
    opacity: 1;
    transform: scaleX(1);
}

.mod-abn-cards__index,
.mod-abn-cards__media,
.mod-abn-cards__content,
.mod-abn-cards__action,
.mod-abn-cards__arrow {
    position: relative;
    z-index: 1;
}

.mod-abn-cards--services .mod-abn-cards__index {
    align-self: start;
    padding-block-start: 15px;
    color: color-mix(in oklch, var(--abn-surface) 42%, transparent);
    font-size: 0.72rem;
    font-weight: 600;
}

.mod-abn-cards--services .mod-abn-cards__media {
    display: grid;
    width: 100%;
    height: 96px;
    place-items: center;
}

.mod-abn-cards--services .mod-abn-cards__media img {
    width: 100%;
    max-width: 158px;
    height: 76px;
    padding: 0;
    object-fit: contain;
}

.mod-abn-cards--services .mod-abn-cards__item--2 .mod-abn-cards__media img {
    max-width: 124px;
    height: 80px;
}

.mod-abn-cards--services .mod-abn-cards__item--3 .mod-abn-cards__media {
    width: 182px;
    height: 96px;
    justify-self: center;
    overflow: hidden;
    background: var(--abn-surface);
    border-radius: 18px;
}

.mod-abn-cards--services .mod-abn-cards__item--3 .mod-abn-cards__media img {
    max-width: 150px;
    height: 52px;
    object-fit: contain;
}

.mod-abn-cards__content {
    min-width: 0;
}

.mod-abn-cards--services .mod-abn-cards__title {
    display: block;
    color: var(--abn-surface);
    font-size: clamp(1rem, 1.35vw, 1.28rem);
    font-weight: 600;
    line-height: 1.65;
}

.mod-abn-cards--services .mod-abn-cards__description {
    display: block;
    margin-block-start: 8px;
    color: color-mix(in oklch, var(--abn-surface) 60%, transparent);
    font-size: 0.84rem;
    line-height: 1.75;
}

.mod-abn-cards--services .mod-abn-cards__action {
    color: color-mix(in oklch, var(--abn-surface) 74%, transparent);
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}

.mod-abn-cards__arrow {
    display: grid;
    width: 44px;
    height: 44px;
    color: var(--abn-primary-deep);
    background: var(--abn-gold);
    border-radius: 50%;
    place-items: center;
    transition: transform var(--abn-transition), background var(--abn-transition);
}

.mod-abn-cards__arrow svg,
.mod-abn-cards__icon svg {
    width: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.mod-abn-cards__link:hover .mod-abn-cards__arrow,
.mod-abn-cards__link:focus-visible .mod-abn-cards__arrow {
    transform: translateX(-5px);
}

/* News: "Al-'Unwan" — a monumental Arabic masthead printed as three
   misregistered press plates over a paper-grain field. */
.abn-section--news {
    overflow: hidden;
    isolation: isolate;
    /* Pairs with the matching value on --abn-home-strategy below. Kept a
       little above the standard section padding because the background
       changes across this seam, so the space reads as part of the band
       rather than as a hole - but not the 202px it used to total. */
    padding-block-end: clamp(52px, 5.6vw, 78px);
    background:
        linear-gradient(180deg, color-mix(in oklch, var(--abn-primary-deep) 14%, transparent) 0, transparent 110px),
        radial-gradient(120% 85% at 88% 0%, color-mix(in oklch, var(--abn-gold) 9%, transparent), transparent 58%),
        radial-gradient(130% 90% at 8% 100%, color-mix(in oklch, var(--abn-primary) 7%, transparent), transparent 62%),
        linear-gradient(180deg, var(--abn-surface-sand) 0%, var(--abn-surface-sand) 58%, var(--abn-surface-blue) 100%);
}

/* Gilded thick-thin newspaper rule on the seam under the deep-navy services section */
.abn-section--news::before {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    height: 6px;
    content: "";
    background:
        linear-gradient(color-mix(in oklch, var(--abn-gold) 85%, transparent), color-mix(in oklch, var(--abn-gold) 85%, transparent)) 0 0 / 100% 2px no-repeat,
        linear-gradient(color-mix(in oklch, var(--abn-gold) 40%, transparent), color-mix(in oklch, var(--abn-gold) 40%, transparent)) 0 5px / 100% 1px no-repeat;
    pointer-events: none;
}

/* Orbit arc continuing the services-section circle geometry across the navy seam */
.abn-news__orbit {
    position: absolute;
    inset-inline-start: -21vw;
    inset-block-start: -60vw;
    z-index: 0;
    width: 78vw;
    height: 78vw;
    border: 1px solid color-mix(in oklch, var(--abn-turquoise) 36%, transparent);
    border-radius: 50%;
    pointer-events: none;
}

/* A single gold satellite resting on the orbit */
.abn-news__orbit::after {
    position: absolute;
    inset-block-end: -5px;
    inset-inline-start: calc(50% - 5px);
    width: 10px;
    height: 10px;
    content: "";
    background: var(--abn-gold);
    border-radius: 50%;
    box-shadow: 0 0 0 6px color-mix(in oklch, var(--abn-gold) 22%, transparent), 0 0 24px color-mix(in oklch, var(--abn-gold) 55%, transparent);
}

/* Masthead layer: fades out before the card grid so cards stay the heroes.
   Kept static (no scroll transform / no plate animation) so the masked,
   stroked giant word never re-rasterizes during scroll. */
.abn-news__mast {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 44%, transparent 86%);
    mask-image: linear-gradient(180deg, #000 0%, #000 44%, transparent 86%);

    /* This layer is a gradient MASK over a giant -webkit-text-stroke word in
       three plates - one of the most expensive things on the page to
       rasterize. Left un-promoted it is repainted as the section scrolls,
       which reads as a shimmer along the stroked edges. Its content never
       changes, so give it its own compositing layer: painted once, then
       only composited. contain:paint also stops it from being invalidated
       by repaints elsewhere in the section. */
    transform: translateZ(0);
    backface-visibility: hidden;
    contain: paint;
}

/* Giant cropped word — master plate (deep blue hairline outline).
   letter-spacing MUST stay normal: tracking breaks Arabic letter joining. */
.abn-news__ghost {
    position: absolute;
    inset-block-start: -0.185em;
    inset-inline-start: -0.04em;
    color: transparent;
    font-size: clamp(8.5rem, 26vw, 26rem);
    font-weight: 800;
    letter-spacing: normal;
    line-height: 1;
    white-space: nowrap;
    -webkit-text-stroke: clamp(1.25px, 0.16vw, 2.5px) color-mix(in oklch, var(--abn-primary-deep) 17%, transparent);
}

.abn-news__ghost::before,
.abn-news__ghost::after {
    position: absolute;
    inset: 0;
    content: attr(data-abn-ghost);
}

/* Gold plate: translucent solid fill, pressed slightly down-start */
.abn-news__ghost::before {
    z-index: -1;
    color: color-mix(in oklch, var(--abn-gold) 13%, transparent);
    -webkit-text-stroke: 0;
    transform: translate(0.026em, 0.032em);
}

/* Turquoise plate: hairline outline, drifted up-end */
.abn-news__ghost::after {
    z-index: -2;
    color: transparent;
    -webkit-text-stroke: 1px color-mix(in oklch, var(--abn-turquoise) 30%, transparent);
    transform: translate(-0.026em, -0.02em);
}

/* Vertical folio year in Arabic-Indic numerals with a gold hairline */
.abn-news__folio {
    position: absolute;
    inset-inline-end: clamp(16px, 3vw, 54px);
    inset-block-start: clamp(96px, 10vw, 170px);
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: color-mix(in oklch, var(--abn-primary-deep) 52%, transparent);
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.35em;
    writing-mode: vertical-rl;
}

.abn-news__folio::after {
    width: 1px;
    height: clamp(64px, 9vw, 150px);
    content: "";
    background: linear-gradient(180deg, color-mix(in oklch, var(--abn-gold) 75%, transparent), transparent);
}

.abn-section--news .abn-container {
    position: relative;
    z-index: 1;
}

/* Shared 3D-tilt surface (cards + featured) driven by cursor via CSS vars.
   The transition eases the card into and out of its tilt on hover. */
[data-abn-tilt] {
    transform:
        perspective(1000px)
        rotateX(var(--rx, 0deg))
        rotateY(var(--ry, 0deg))
        translate3d(0, var(--ty, 0px), 0)
        scale(var(--sc, 1));
    transition: transform 240ms var(--abn-ease-out), box-shadow var(--abn-transition);
}

/* While the pointer is actively moving over a card, the transition works
   against us: every new angle restarts a 240ms animation, so the card chases
   the cursor instead of tracking it, and during a scroll the whole grid
   shimmers. The JS adds .is-tilting for the duration of the interaction and
   removes it on exit, so the ease-back to flat is preserved. */
[data-abn-tilt].is-tilting {
    transition: box-shadow var(--abn-transition);
}

/* Cursor spotlight gloss over the photo */
.abn-news-media__sheen {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 62%);
    pointer-events: none;
    transition: opacity 320ms var(--abn-ease-out);
}

[data-abn-tilt]:hover .abn-news-media__sheen,
[data-abn-tilt]:focus-within .abn-news-media__sheen {
    opacity: 1;
}

/* The curtain image reveal that used to live here has been removed along with
   the JS that drove it. News photos are now simply present: three separate
   entrance animations in one section (header fade, card fade, image wipe)
   read as flicker while scrolling past headlines, not as polish. */

/* Gold underline drawn under the title on hover */
.abn-news-feature__title a span,
.abn-news-card__title a span {
    padding-block-end: 3px;
    background-image: linear-gradient(var(--abn-gold), var(--abn-gold));
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size 420ms var(--abn-ease-out);
}

[data-abn-tilt]:hover .abn-news-feature__title a span,
[data-abn-tilt]:focus-within .abn-news-feature__title a span,
[data-abn-tilt]:hover .abn-news-card__title a span,
[data-abn-tilt]:focus-within .abn-news-card__title a span {
    background-size: 100% 2px;
}

/* Featured hero */
.abn-news-feature {
    position: relative;
    display: grid;
    overflow: hidden;
    margin-block-end: 26px;
    background: var(--abn-surface);
    border-radius: var(--abn-radius-md);
    box-shadow:
        0 2px 8px rgba(0, 63, 102, 0.05),
        0 20px 50px rgba(0, 63, 102, 0.1);
    grid-template-columns: 1.15fr 1fr;
}

.abn-news-feature:hover,
.abn-news-feature:focus-within {
    --ty: -5px;
    box-shadow:
        0 4px 12px rgba(0, 63, 102, 0.07),
        0 28px 64px rgba(0, 63, 102, 0.15),
        0 60px 120px rgba(0, 63, 102, 0.12);
}

.abn-news-feature__media {
    position: relative;
    overflow: hidden;
    min-height: 380px;
    margin: 0;
    background: var(--abn-primary-deep);
}

.abn-news-feature__media::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    pointer-events: none;
}

/* Glass shine that sweeps across the photo on hover */
.abn-news-feature__media::before,
.abn-news-card__media::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0.08) 56%, transparent 63%);
    transform: translateX(-140%);
    transition: transform 900ms var(--abn-ease-out);
    pointer-events: none;
}

.abn-news-feature:hover .abn-news-feature__media::before,
.abn-news-feature:focus-within .abn-news-feature__media::before,
.abn-news-card:hover .abn-news-card__media::before,
.abn-news-card:focus-within .abn-news-card__media::before {
    transform: translateX(140%);
}

/* Frosted-glass date chip resting on the photo */
.abn-news-chip {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-start: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    color: #fff;
    background: rgba(0, 41, 68, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    gap: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 18px rgba(0, 31, 51, 0.28);
}

.abn-news-chip::before {
    width: 6px;
    height: 6px;
    content: "";
    background: var(--abn-gold);
    border-radius: 50%;
}

.abn-news-chip--small {
    inset-block-start: auto;
    inset-block-end: 10px;
    inset-inline-start: 10px;
    padding: 6px 11px;
    font-size: 0.66rem;
}

.abn-news-feature__media img,
.abn-news-feature__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.abn-news-feature__media img {
    object-fit: cover;
}

/*
 * Articles with no photo show the ACTUAL governorate logo on a light brand
 * panel.
 *
 * This previously drew an approximation of the emblem as inline SVG paths -
 * white chevrons and diamonds over a navy gradient. It read as the mark but
 * was not the mark, which the media department correctly identified as
 * altering the identity. An official emblem is never redrawn by hand.
 *
 * The panel is light rather than navy because the logo's wordmark is dark and
 * must appear in its own colours; knocking it out to white would be another
 * unauthorised variant of the same mark.
 */
.abn-news-feature__placeholder,
.abn-news-card__placeholder {
    background:
        url("../../images/brand/albatinah-north-bilingual.png") center / min(74%, 250px) no-repeat,
        linear-gradient(135deg, var(--abn-surface-sand), var(--abn-surface-blue) 62%, var(--abn-surface));
}

.abn-news-feature__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(26px, 3.4vw, 52px);
}

.abn-news-feature__body::before {
    width: 28px;
    height: 2px;
    margin-block-end: 16px;
    content: "";
    background: var(--abn-gold);
}

.abn-news-feature__title {
    margin: 0 0 14px;
    font-size: clamp(1.3rem, 2vw, 1.9rem) !important;
    line-height: 1.6 !important;
    text-wrap: balance;
}

.abn-news-feature__title a {
    color: var(--abn-ink) !important;
    text-decoration: none;
    transition: color var(--abn-transition);
}

.abn-news-feature__title a::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    content: "";
}

.abn-news-feature:hover .abn-news-feature__title a,
.abn-news-feature:focus-within .abn-news-feature__title a {
    color: var(--abn-primary-dark) !important;
}

.abn-news-feature__intro {
    display: -webkit-box;
    max-width: 58ch;
    margin: 0 0 22px;
    overflow: hidden;
    color: var(--abn-ink-soft);
    font-size: 0.9rem;
    line-height: 1.95;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.abn-news-feature__more {
    display: inline-flex;
    align-items: center;
    color: var(--abn-primary-dark);
    font-size: 0.8rem;
    font-weight: 700;
    gap: 8px;
}

.abn-news-feature__more svg {
    width: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
    transition: transform var(--abn-transition);
}

.abn-news-feature:hover .abn-news-feature__more svg,
.abn-news-feature:focus-within .abn-news-feature__more svg {
    transform: translateX(-5px);
}

/* Grid cards */
.abn-news-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.abn-news-card {
    position: relative;
    overflow: hidden;
    background: var(--abn-surface);
    border-radius: var(--abn-radius-sm);
    box-shadow:
        0 2px 6px rgba(0, 63, 102, 0.05),
        0 12px 32px rgba(0, 63, 102, 0.08);
}

.abn-news-card:hover,
.abn-news-card:focus-within {
    --ty: -8px;
    --sc: 1.012;
    box-shadow:
        0 4px 10px rgba(0, 63, 102, 0.06),
        0 20px 44px rgba(0, 63, 102, 0.14),
        0 44px 90px rgba(0, 63, 102, 0.12);
}

.abn-news-card:active {
    --ty: -3px;
}

.abn-news-card__media {
    position: relative;
    overflow: hidden;
    margin: 0;
    aspect-ratio: 16 / 11;
    background: var(--abn-primary-deep);
}

.abn-news-card__media::after {
    position: absolute;
    inset: 0;
    content: "";
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    pointer-events: none;
}

.abn-news-card__media img,
.abn-news-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
}

.abn-news-card__media img {
    object-fit: cover;
    transition: transform 700ms var(--abn-ease-out), filter 700ms var(--abn-ease-out);
}


.abn-news-card:hover .abn-news-card__media img,
.abn-news-card:focus-within .abn-news-card__media img {
    filter: saturate(1.08);
}

.abn-news-card__body {
    padding: 16px 16px 20px;
}

.abn-news-card__title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 0.9rem !important;
    font-weight: 600;
    line-height: 1.7 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.abn-news-card__title a {
    color: var(--abn-ink) !important;
    text-decoration: none;
    transition: color var(--abn-transition);
}

.abn-news-card__title a::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
}

.abn-news-card:hover .abn-news-card__title a,
.abn-news-card:focus-within .abn-news-card__title a {
    color: var(--abn-primary-dark) !important;
}

@media (max-width: 1023.98px) {
    .abn-news-feature {
        grid-template-columns: 1fr;
    }

    .abn-news-feature__media {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

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

    .abn-news__ghost {
        inset-block-start: -0.16em;
        font-size: clamp(7rem, 30vw, 12rem);
    }
}

@media (max-width: 767.98px) {
    /* Huge stroked text + mask is the one real paint-cost risk on low-end
       devices: drop the mask and rely on the section gradient fade. */
    .abn-news__mast {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .abn-news__folio {
        display: none;
    }
}

@media (max-width: 639.98px) {
    .abn-news-grid {
        grid-template-columns: 1fr;
    }
}

/* Strategic framework: a live civic chart joining vision, mission and values.
   The registry remains fully readable while the adjacent drafting stage
   translates each strategic layer into one calm line composition. */
.abn-section--abn-home-strategy {
    position: relative;
    overflow: clip;
    /* Matches the padding-block-end on --news above; the two make one seam. */
    padding-block-start: clamp(52px, 5.6vw, 78px);
    background:
        radial-gradient(95% 70% at 92% 8%, color-mix(in oklch, var(--abn-primary) 7%, transparent), transparent 56%),
        radial-gradient(80% 66% at 4% 94%, color-mix(in oklch, var(--abn-green) 6%, transparent), transparent 62%),
        var(--abn-surface-blue);
}

.abn-section--abn-home-strategy::before,
.abn-section--abn-home-strategy::after {
    display: none;
}

.abn-section--abn-home-strategy .abn-section__header {
    margin-block-end: clamp(30px, 4vw, 48px);
}

.abn-section--abn-home-strategy .abn-section__title::after {
    display: block;
    width: 96px;
    height: 4px;
    margin-block-start: 18px;
    content: "";
    background: linear-gradient(90deg, var(--abn-gold) 0 20px, var(--abn-primary) 20px 68px, var(--abn-turquoise) 68px 100%);
    border-radius: 999px;
}

.abn-sf {
    position: relative;
}

.abn-sf__layout {
    display: grid;
    align-items: start;
    gap: clamp(24px, 3.4vw, 52px);
}

.abn-sf__stage {
    position: relative;
    min-height: 650px;
    margin: 0;
    overflow: hidden;
    color: var(--abn-surface);
    background:
        linear-gradient(90deg, var(--abn-primary) 0 44%, var(--abn-turquoise) 44% 70%, var(--abn-green) 70% 86%, var(--abn-gold) 86% 100%) top / 100% 4px no-repeat,
        var(--abn-primary-deep);
    border: 1px solid color-mix(in oklch, var(--abn-primary-deep) 78%, var(--abn-border));
    border-radius: 18px;
    box-shadow: 0 22px 60px rgba(0, 63, 102, 0.16);
    isolation: isolate;
}

.abn-sf__stage::before {
    position: absolute;
    inset: 4px 0 0;
    z-index: -1;
    content: "";
    background-image:
        linear-gradient(color-mix(in oklch, var(--abn-surface) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklch, var(--abn-surface) 5%, transparent) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}

.abn-sf__stage::after {
    position: absolute;
    inset-inline-start: -215px;
    inset-block-end: -270px;
    z-index: -1;
    width: 520px;
    height: 520px;
    content: "";
    border: 1px solid color-mix(in oklch, var(--abn-turquoise) 22%, transparent);
    border-radius: 50%;
    box-shadow:
        0 0 0 66px color-mix(in oklch, var(--abn-turquoise) 5%, transparent),
        0 0 0 142px color-mix(in oklch, var(--abn-primary) 4%, transparent);
    pointer-events: none;
}

.abn-sf__stage-meta {
    position: absolute;
    inset: 30px 32px auto;
    z-index: 3;
}

.abn-sf__stage-meta strong {
    color: var(--abn-surface);
    font-size: clamp(1.55rem, 2.3vw, 2.35rem);
    font-weight: 800;
    line-height: 1.45;
}

.abn-sf__plates {
    position: absolute;
    inset: 90px 22px 14px;
}

.abn-sf__plate {
    position: absolute;
    inset: 0;
    display: grid;
    opacity: 0;
    place-items: center;
    transform: scale(0.985);
    transition:
        opacity 220ms var(--abn-ease-out),
        transform 500ms var(--abn-ease-out);
}

.abn-sf__plate.is-active {
    z-index: 1;
    opacity: 1;
    transform: none;
}

.abn-sf__plate svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.abn-sf__plate .sf-d {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.abn-sf__plate .sf-main {
    stroke: color-mix(in oklch, var(--abn-surface) 76%, transparent);
    stroke-width: 2.35;
}

.abn-sf__plate .sf-thin {
    stroke: color-mix(in oklch, var(--abn-surface) 34%, transparent);
    stroke-width: 1.35;
}

.abn-sf__plate .sf-accent {
    stroke: var(--abn-turquoise);
    stroke-width: 3;
}

.abn-sf__plate .sf-dim {
    stroke: color-mix(in oklch, var(--abn-turquoise) 74%, var(--abn-surface));
    stroke-width: 1.25;
}

.abn-sf__plate .sf-f {
    opacity: 0;
}

.abn-sf__plate .sf-node {
    fill: var(--abn-turquoise);
}

.abn-sf__plate .sf-node--soft {
    fill: color-mix(in oklch, var(--abn-green) 76%, var(--abn-surface));
}

.abn-sf__plate .sf-gold {
    fill: color-mix(in oklch, var(--abn-gold) 88%, var(--abn-surface));
}

.abn-sf__plate .sf-gold-line {
    fill: none;
    stroke: var(--abn-primary-deep);
    stroke-width: 1.5;
}

.abn-sf__plate.is-active .sf-d {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 760ms var(--abn-ease-out);
}

.abn-sf__plate.is-active .sf-thin {
    transition-duration: 900ms;
    transition-delay: 80ms;
}

.abn-sf__plate.is-active .sf-accent {
    transition-duration: 640ms;
    transition-delay: 180ms;
}

.abn-sf__plate.is-active .sf-dim {
    transition-duration: 720ms;
    transition-delay: 260ms;
}

.abn-sf__plate.is-active .sf-f {
    opacity: 1;
    transition: opacity 340ms var(--abn-ease-out) 320ms;
}

.abn-sf__registry {
    overflow: hidden;
    background: var(--abn-surface);
    border: 1px solid color-mix(in oklch, var(--abn-primary-deep) 15%, var(--abn-border));
    border-radius: 18px;
    box-shadow: var(--abn-shadow-sm);
}

.abn-sf__statement,
.abn-sf__values {
    position: relative;
    padding: clamp(24px, 3vw, 36px);
    border-block-end: 1px solid var(--abn-border);
    transition:
        background 240ms var(--abn-ease-out),
        box-shadow 240ms var(--abn-ease-out);
}

.abn-sf__values {
    border-block-end: 0;
}

.abn-sf__statement.is-active,
.abn-sf__values.is-active {
    background: var(--abn-surface-blue);
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--abn-primary) 15%, transparent);
}

.abn-sf__statement header,
.abn-sf__values > header {
    display: flex;
    align-items: center;
    margin-block-end: 16px;
    gap: 14px;
}

.abn-sf__glyph {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    color: var(--abn-primary);
    background: var(--abn-surface-soft);
    border: 1px solid color-mix(in oklch, var(--abn-primary) 24%, var(--abn-border));
    border-radius: 11px;
    place-items: center;
    transition:
        color 240ms var(--abn-ease-out),
        background 240ms var(--abn-ease-out),
        border-color 240ms var(--abn-ease-out);
}

.abn-sf__statement.is-active .abn-sf__glyph,
.abn-sf__values.is-active .abn-sf__glyph {
    color: var(--abn-surface);
    background: var(--abn-primary-deep);
    border-color: var(--abn-primary-deep);
    box-shadow: inset 0 -3px 0 var(--abn-gold);
}

.abn-sf__glyph svg,
.abn-sf__value-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65;
}

.abn-sf__statement h3,
.abn-sf__values h3 {
    margin: 0 !important;
    color: var(--abn-primary-deep) !important;
    font-size: clamp(1.26rem, 1.8vw, 1.62rem) !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
}

.abn-sf__statement p {
    max-width: 55ch;
    margin: 0;
    color: var(--abn-ink-soft);
    font-size: clamp(1rem, 1.22vw, 1.1rem);
    line-height: 1.95;
}

.abn-sf__statement:first-child p {
    color: var(--abn-primary-deep);
    font-size: clamp(1.12rem, 1.48vw, 1.34rem);
    font-weight: 700;
    line-height: 1.8;
}

.abn-sf__values ul {
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
}

.abn-sf__values li {
    display: grid;
    min-height: 56px;
    align-items: center;
    padding: 11px 4px;
    border-block-end: 1px solid var(--abn-border);
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    color: var(--abn-primary-deep);
    font-size: clamp(0.92rem, 1vw, 1rem);
    font-weight: 700;
}

.abn-sf__values li:nth-child(odd) {
    padding-inline-end: 16px;
    border-inline-end: 1px solid var(--abn-border);
}

.abn-sf__values li:nth-child(even) {
    padding-inline-start: 16px;
}

.abn-sf__values li:nth-last-child(-n + 2) {
    border-block-end: 0;
}

.abn-sf__value-icon {
    display: grid;
    width: 30px;
    height: 30px;
    color: var(--abn-primary);
    place-items: center;
    transition:
        color 240ms var(--abn-ease-out),
        transform 240ms var(--abn-ease-out);
}

.abn-sf__value-icon svg {
    width: 21px;
    height: 21px;
}

@media (hover: hover) and (pointer: fine) {
    .abn-sf__values li:hover {
        color: var(--abn-primary);
    }

    .abn-sf__values li:hover .abn-sf__value-icon {
        color: var(--abn-turquoise);
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .abn-sf.is-armed .abn-sf__stage,
    .abn-sf.is-armed .abn-sf__registry > * {
        opacity: 0;
    }

    .abn-sf.is-armed .abn-sf__stage {
        transform: translateX(-24px);
    }

    .abn-sf.is-armed .abn-sf__registry > * {
        transform: translateY(18px);
    }

    .abn-sf.is-armed:not(.is-in) .abn-sf__plate.is-active .sf-d {
        stroke-dashoffset: 1;
    }

    .abn-sf.is-armed:not(.is-in) .abn-sf__plate.is-active .sf-f {
        opacity: 0;
    }

    .abn-sf.is-in .abn-sf__stage,
    .abn-sf.is-in .abn-sf__registry > * {
        opacity: 1;
        transform: none;
        transition:
            opacity 620ms var(--abn-ease-out),
            transform 720ms var(--abn-ease-out);
    }

    .abn-sf.is-in .abn-sf__stage { transition-delay: 80ms; }
    .abn-sf.is-in .abn-sf__registry > :nth-child(1) { transition-delay: 130ms; }
    .abn-sf.is-in .abn-sf__registry > :nth-child(2) { transition-delay: 210ms; }
    .abn-sf.is-in .abn-sf__registry > :nth-child(3) { transition-delay: 290ms; }
}

@media (min-width: 1100px) {
    .abn-sf__layout {
        grid-template-columns: minmax(430px, 0.9fr) minmax(0, 1.1fr);
    }

    .abn-sf__stage {
        position: sticky;
        inset-block-start: calc(var(--abn-header-height) + 28px);
        grid-column: 2;
        grid-row: 1;
    }

    .abn-sf__registry {
        grid-column: 1;
        grid-row: 1;
    }
}

@media (max-width: 1099.98px) {
    .abn-sf__layout {
        grid-template-columns: 1fr;
    }

    .abn-sf__stage {
        width: 100%;
        max-width: 820px;
        min-height: 470px;
        margin-inline: auto;
        grid-column: auto;
        grid-row: auto;
    }

    .abn-sf__registry {
        grid-column: auto;
        grid-row: auto;
    }

    .abn-sf__plates {
        inset-block-start: 76px;
    }
}

@media (max-width: 767.98px) {
    .abn-sf__stage {
        display: none;
    }

    .abn-sf__registry {
        border-radius: 14px;
    }

    .abn-sf__statement,
    .abn-sf__values {
        padding: 22px 16px;
    }

    .abn-sf__statement.is-active,
    .abn-sf__values.is-active {
        background: transparent;
        box-shadow: none;
    }

    .abn-sf__statement.is-active .abn-sf__glyph,
    .abn-sf__values.is-active .abn-sf__glyph {
        color: var(--abn-primary);
        background: var(--abn-surface-soft);
        border-color: color-mix(in oklch, var(--abn-primary) 24%, var(--abn-border));
        box-shadow: none;
    }

    .abn-sf__values li {
        min-height: 52px;
        padding-block: 9px;
    }
}

@media (max-width: 359.98px) {
    .abn-sf__values li {
        grid-template-columns: 26px minmax(0, 1fr);
        gap: 6px;
        font-size: 0.86rem;
    }

    .abn-sf__values li:nth-child(odd) {
        padding-inline-end: 10px;
    }

    .abn-sf__values li:nth-child(even) {
        padding-inline-start: 10px;
    }

    .abn-sf__value-icon {
        width: 26px;
    }

    .abn-sf__value-icon svg {
        width: 19px;
        height: 19px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .abn-sf__stage,
    .abn-sf__registry > *,
    .abn-sf__plate,
    .abn-sf__plate .sf-d,
    .abn-sf__plate .sf-f,
    .abn-sf__statement,
    .abn-sf__values,
    .abn-sf__value-icon {
        transition: none;
        animation: none;
    }

    .abn-sf__plate.is-active .sf-d {
        stroke-dashoffset: 0;
    }

    .abn-sf__plate.is-active .sf-f {
        opacity: 1;
    }
}

/* Place journey: the civic atlas of Wilayats leads directly into the
   tourism directory. The pearl tourism sheet rises from the deep-blue
   geographic field without an ornamental separator. */
.abn-place-journey {
    position: relative;
    overflow: clip;
    background: var(--abn-primary-deep);
    isolation: isolate;
}

.abn-place-journey::before {
    position: absolute;
    inset: 0 0 auto;
    z-index: 3;
    height: 4px;
    content: "";
    background: linear-gradient(90deg, var(--abn-gold) 0 14%, var(--abn-green) 14% 37%, var(--abn-turquoise) 37% 61%, var(--abn-primary) 61% 100%);
    pointer-events: none;
}

.abn-section--abn-home-tourism {
    z-index: 2;
    margin-block-start: -38px;
    padding-block-start: clamp(86px, 8vw, 120px);
    background:
        radial-gradient(90% 68% at 92% 8%, color-mix(in oklch, var(--abn-gold) 7%, transparent), transparent 58%),
        radial-gradient(80% 60% at 3% 96%, color-mix(in oklch, var(--abn-primary) 6%, transparent), transparent 62%),
        var(--abn-surface-sand);
    border-start-start-radius: clamp(34px, 4.5vw, 68px);
    border-start-end-radius: clamp(34px, 4.5vw, 68px);
    box-shadow: 0 -24px 70px rgba(0, 40, 66, 0.16);
}

.abn-section--abn-home-tourism .abn-section__header {
    margin-block-end: clamp(32px, 4vw, 52px);
}

.abn-section--abn-home-tourism .abn-section__title {
    max-width: 20ch;
}

.mod-abn-cards-shell--tourism {
    position: relative;
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
    gap: 0;
}

.mod-abn-cards__visual {
    position: relative;
    min-width: 0;
    height: clamp(450px, 43vw, 620px);
    margin: 0;
    overflow: hidden;
    background: var(--abn-surface-blue);
    border: 1px solid color-mix(in oklch, var(--abn-primary-deep) 15%, var(--abn-border));
    border-radius: clamp(22px, 2.8vw, 36px);
    box-shadow: 0 26px 64px rgba(0, 63, 102, 0.14);
}

.mod-abn-cards__visual picture,
.mod-abn-cards__visual img {
    display: block;
    width: 100%;
    height: 100%;
}

.mod-abn-cards__visual img {
    object-fit: cover;
    transition: transform 900ms var(--abn-ease-out);
}

.mod-abn-cards__visual::before {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    height: 4px;
    content: "";
    background: linear-gradient(90deg, var(--abn-primary) 0 42%, var(--abn-turquoise) 42% 68%, var(--abn-green) 68% 86%, var(--abn-gold) 86% 100%);
    pointer-events: none;
}

.mod-abn-cards__visual::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(0deg, color-mix(in oklch, var(--abn-primary-deep) 74%, transparent), transparent 65%);
}

.mod-abn-cards__visual figcaption {
    position: absolute;
    inset-inline-start: clamp(24px, 4vw, 58px);
    inset-block-end: clamp(24px, 4vw, 54px);
    z-index: 1;
    max-width: 8ch;
    color: var(--abn-surface);
    font-size: clamp(2.1rem, 4vw, 4.8rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.05em;
}

.mod-abn-cards-shell--tourism:hover .mod-abn-cards__visual img {
    transform: scale(1.035);
}

.mod-abn-cards--tourism {
    position: relative;
    z-index: 2;
    margin-inline-start: -52px;
    padding: clamp(22px, 3vw, 38px);
    background:
        linear-gradient(90deg, var(--abn-primary) 0 42%, var(--abn-turquoise) 42% 68%, var(--abn-green) 68% 86%, var(--abn-gold) 86% 100%) top / 100% 4px no-repeat,
        color-mix(in oklch, var(--abn-primary-deep) 94%, var(--abn-primary));
    border: 1px solid color-mix(in oklch, var(--abn-turquoise) 18%, transparent);
    border-radius: 18px;
    box-shadow: var(--abn-shadow-dark);
}

.mod-abn-cards--tourism .mod-abn-cards__item {
    border-block-end: 1px solid color-mix(in oklch, var(--abn-surface) 16%, transparent);
}

.mod-abn-cards--tourism .mod-abn-cards__item:last-child {
    border-block-end: 0;
}

.mod-abn-cards--tourism .mod-abn-cards__link {
    display: grid;
    min-height: 70px;
    align-items: center;
    padding: 10px 6px;
    color: var(--abn-surface) !important;
    grid-template-columns: 30px 38px minmax(0, 1fr) 38px;
    gap: 12px;
    text-decoration: none !important;
    transition: background 240ms var(--abn-ease-out);
}

.mod-abn-cards--tourism .mod-abn-cards__link:hover,
.mod-abn-cards--tourism .mod-abn-cards__link:focus-visible {
    background: color-mix(in oklch, var(--abn-surface) 6%, transparent);
}

.mod-abn-cards--tourism .mod-abn-cards__index {
    color: color-mix(in oklch, var(--abn-surface) 40%, transparent);
    font-size: 0.68rem;
}

.mod-abn-cards--tourism .mod-abn-cards__media,
.mod-abn-cards--tourism .mod-abn-cards__description {
    display: none;
}

.mod-abn-cards--tourism .mod-abn-cards__icon {
    display: grid;
    width: 38px;
    height: 38px;
    color: color-mix(in oklch, var(--abn-turquoise) 80%, var(--abn-surface));
    place-items: center;
}

.mod-abn-cards--tourism .mod-abn-cards__icon svg {
    width: 22px;
    height: 22px;
}

.mod-abn-cards--tourism .mod-abn-cards__title {
    color: var(--abn-surface);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.65;
}

.mod-abn-cards--tourism .mod-abn-cards__arrow {
    width: 36px;
    height: 36px;
    color: var(--abn-surface);
    background: transparent;
    border: 1px solid color-mix(in oklch, var(--abn-surface) 24%, transparent);
}

/* Competencies: numbered institutional index */
/* Competencies: "لوحة الاختصاصات" — the civic blueprint. The section is the
   drafting table; the module is a drawing sheet on which a fort-gate
   elevation draws itself, cross-referenced by six datum callouts that map
   to the specification schedule. All hidden/draw states live inside
   prefers-reduced-motion: no-preference and are armed by JS (.is-armed)
   only — no-JS and reduced-motion rest in the complete finished sheet. */
/* Competencies: "لوحة الاختصاصات" — the civic blueprint. Each mandate has its
   own drawing plate on a sticky drafting sheet; hovering a schedule row (or
   scrolling, on touch) swaps the drawing, which sketches itself in. All draw
   states live inside prefers-reduced-motion: no-preference and are armed by JS
   (.is-armed) — no-JS and reduced-motion rest in the finished sheet with
   plate ٠١ shown and fully drawn. */
.abn-section--abn-home-competencies {
    background:
        linear-gradient(180deg, transparent calc(100% - 150px), var(--abn-primary-deep) 100%),
        radial-gradient(110% 70% at 12% 0%, color-mix(in oklch, var(--abn-gold) 7%, transparent), transparent 55%),
        radial-gradient(120% 80% at 90% 100%, color-mix(in oklch, var(--abn-primary) 8%, transparent), transparent 60%),
        color-mix(in oklch, var(--abn-turquoise) 11%, var(--abn-surface));
}

.abn-section--abn-home-competencies .abn-container {
    display: block;
}

.abn-section--abn-home-competencies .abn-section__header {
    position: static;
    max-width: none;
    margin: 0 0 clamp(30px, 4vw, 50px);
}

/* Dimension-line signature under the chrome-rendered title */
.abn-section--abn-home-competencies .abn-section__title::after {
    display: block;
    width: min(240px, 60%);
    height: 13px;
    margin-block-start: 20px;
    content: "";
    background:
        linear-gradient(color-mix(in oklch, var(--abn-primary) 55%, transparent), color-mix(in oklch, var(--abn-primary) 55%, transparent)) 0 6px / 100% 1px no-repeat,
        linear-gradient(-45deg, transparent 44%, var(--abn-gold) 44% 56%, transparent 56%) 0 0 / 13px 13px no-repeat,
        linear-gradient(-45deg, transparent 44%, var(--abn-gold) 44% 56%, transparent 56%) 100% 0 / 13px 13px no-repeat;
}

/* ---- the sheet ---- */
.abn-bp {
    position: relative;
    padding: clamp(24px, 4vw, 60px);
    background: var(--abn-surface);
    border: 1px solid color-mix(in oklch, var(--abn-primary-deep) 16%, var(--abn-border));
    border-radius: var(--abn-radius-md);
    box-shadow: var(--abn-shadow-md);
}

.abn-bp::before {
    position: absolute;
    inset: 10px;
    content: "";
    border: 1px solid color-mix(in oklch, var(--abn-primary-deep) 20%, transparent);
    border-radius: calc(var(--abn-radius-md) - 8px);
    pointer-events: none;
}

.abn-bp__grid {
    position: absolute;
    inset: 1px;
    border-radius: calc(var(--abn-radius-md) - 1px);
    background:
        repeating-linear-gradient(0deg, transparent 0 89px, color-mix(in oklch, var(--abn-turquoise) 22%, transparent) 89px 90px),
        repeating-linear-gradient(90deg, transparent 0 89px, color-mix(in oklch, var(--abn-turquoise) 22%, transparent) 89px 90px),
        repeating-linear-gradient(0deg, transparent 0 17px, color-mix(in oklch, var(--abn-turquoise) 9%, transparent) 17px 18px),
        repeating-linear-gradient(90deg, transparent 0 17px, color-mix(in oklch, var(--abn-turquoise) 9%, transparent) 17px 18px);
    pointer-events: none;
}

.abn-bp__layout {
    position: relative;
    display: grid;
    align-items: start;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: clamp(30px, 4.5vw, 76px);
}

/* ---- the drawing stage: sticky, holds the stacked per-mandate plates ---- */
.abn-bp__stage {
    position: sticky;
    inset-block-start: calc(var(--abn-header-height) + 36px);
    margin: 0;
    aspect-ratio: 760 / 560;
}

.abn-bp__plate {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.45s var(--abn-ease-out);
}

.abn-bp__plate.is-active {
    opacity: 1;
}

.abn-bp__plate svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---- drawing stroke language (shared across all plates) ---- */
.abn-bp .bp-s {
    fill: none;
    stroke: color-mix(in oklch, var(--abn-primary-deep) 58%, transparent);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.abn-bp .bp-thin {
    fill: none;
    stroke: color-mix(in oklch, var(--abn-primary-deep) 38%, transparent);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.abn-bp .bp-dim {
    fill: none;
    stroke: color-mix(in oklch, var(--abn-primary) 42%, transparent);
    stroke-width: 1.3;
    stroke-linecap: round;
}

.abn-bp .bp-cl {
    fill: none;
    stroke: var(--abn-turquoise);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 9 7;
    opacity: 0.85;
}

.abn-bp .bp-wave {
    fill: none;
    stroke: var(--abn-turquoise);
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.9;
}

.abn-bp .bp-gem-fill {
    fill: var(--abn-gold);
}

.abn-bp .bp-dot {
    fill: var(--abn-gold);
}

/* ---- the specification schedule ---- */
.abn-bp-spec {
    margin: 0;
    padding: 0;
    list-style: none;
}

.abn-bp-spec__item {
    position: relative;
    display: grid;
    align-items: start;
    padding-block: clamp(20px, 2.4vw, 30px);
    border-block-end: 1px dashed color-mix(in oklch, var(--abn-primary) 32%, transparent);
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: clamp(16px, 2vw, 26px);
    transition: transform var(--abn-transition);
}

.abn-bp-spec__item:first-child {
    padding-block-start: clamp(6px, 1vw, 12px);
}

.abn-bp-spec__item:last-child {
    border-block-end: 0;
}

.abn-bp-spec__item::before,
.abn-bp-spec__item::after {
    position: absolute;
    inset-block-end: -4px;
    width: 1px;
    height: 8px;
    content: "";
    background: color-mix(in oklch, var(--abn-primary) 48%, transparent);
}

.abn-bp-spec__item::before {
    inset-inline-start: 0;
}

.abn-bp-spec__item::after {
    inset-inline-end: 0;
}

.abn-bp-spec__item:last-child::before,
.abn-bp-spec__item:last-child::after {
    display: none;
}

.abn-bp-spec__item:hover {
    transform: translateX(-6px);
}

/* Circled datum number with protruding crosshair ticks */
.abn-bp-spec__datum {
    position: relative;
    z-index: 0;
    display: grid;
    width: 52px;
    height: 52px;
    color: var(--abn-primary-deep);
    background: var(--abn-surface);
    border: 1px solid color-mix(in oklch, var(--abn-primary-deep) 42%, transparent);
    border-radius: 50%;
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    place-items: center;
    transition: background var(--abn-transition), border-color var(--abn-transition), color var(--abn-transition);
}

.abn-bp-spec__datum::before,
.abn-bp-spec__datum::after {
    position: absolute;
    z-index: -1;
    content: "";
    background: color-mix(in oklch, var(--abn-primary) 46%, transparent);
}

.abn-bp-spec__datum::before {
    inset-inline: -8px;
    inset-block-start: 50%;
    height: 1px;
}

.abn-bp-spec__datum::after {
    inset-block: -8px;
    inset-inline-start: 50%;
    width: 1px;
}

/* Active (the mandate the drawing is currently showing) + hover: gold datum */
.abn-bp-spec__item:hover .abn-bp-spec__datum,
.abn-bp-spec__item.is-active .abn-bp-spec__datum {
    color: var(--abn-primary-deep);
    background: var(--abn-gold);
    border-color: var(--abn-gold);
}

/* Drawn detail glyph at the row's end — the mandate's line mark */
.abn-bp-spec__glyph {
    display: grid;
    width: 38px;
    height: 38px;
    margin-block-start: 6px;
    place-items: center;
}

.abn-bp-spec__glyph svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: color-mix(in oklch, var(--abn-primary) 58%, transparent);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
    transition: stroke var(--abn-transition);
}

.abn-bp-spec__item:hover .abn-bp-spec__glyph svg,
.abn-bp-spec__item.is-active .abn-bp-spec__glyph svg {
    stroke: var(--abn-gold);
}

.abn-bp-spec__body h3 {
    margin: 0 0 8px !important;
    color: var(--abn-primary-deep) !important;
    font-size: clamp(1.08rem, 1.4vw, 1.34rem) !important;
    line-height: 1.5 !important;
}

.abn-bp-spec__body h3::after {
    display: block;
    width: 28px;
    height: 2px;
    margin-block-start: 8px;
    content: "";
    background: var(--abn-gold);
    transform-origin: right center;
}

.abn-bp-spec__body p {
    max-width: 52ch;
    margin: 0;
    color: var(--abn-ink-soft);
    font-size: 0.88rem;
    line-height: 1.95;
}

/* ---- draw choreography: only when motion is allowed; armed by JS ---- */
@media (prefers-reduced-motion: no-preference) {
    .abn-bp.is-armed .bp-d {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
    }

    .abn-bp.is-armed .abn-bp__plate .bp-f {
        opacity: 0;
    }

    .abn-bp.is-armed .abn-bp__grid,
    .abn-bp.is-armed .abn-bp-spec__item {
        opacity: 0;
    }

    .abn-bp.is-armed .abn-bp-spec__item {
        transform: translateY(26px);
    }

    .abn-bp.is-armed .abn-bp-spec__body h3::after {
        transform: scaleX(0);
    }

    /* sheet + schedule reveal on is-in */
    .abn-bp.is-in .abn-bp__grid {
        opacity: 1;
        transition: opacity 0.9s var(--abn-ease-out) 0.1s;
    }

    .abn-bp.is-in .abn-bp-spec__item {
        opacity: 1;
        transform: none;
        transition: opacity 0.7s var(--abn-ease-out), transform 0.8s var(--abn-ease-out);
    }

    .abn-bp.is-in .abn-bp-spec__item:nth-child(1) { transition-delay: 0.2s; }
    .abn-bp.is-in .abn-bp-spec__item:nth-child(2) { transition-delay: 0.31s; }
    .abn-bp.is-in .abn-bp-spec__item:nth-child(3) { transition-delay: 0.42s; }
    .abn-bp.is-in .abn-bp-spec__item:nth-child(4) { transition-delay: 0.53s; }
    .abn-bp.is-in .abn-bp-spec__item:nth-child(5) { transition-delay: 0.64s; }
    .abn-bp.is-in .abn-bp-spec__item:nth-child(6) { transition-delay: 0.75s; }

    .abn-bp.is-in .abn-bp-spec__body h3::after {
        transform: scaleX(1);
        transition: transform 0.6s var(--abn-ease-out);
    }

    .abn-bp.is-in .abn-bp-spec__item:nth-child(1) h3::after { transition-delay: 0.45s; }
    .abn-bp.is-in .abn-bp-spec__item:nth-child(2) h3::after { transition-delay: 0.56s; }
    .abn-bp.is-in .abn-bp-spec__item:nth-child(3) h3::after { transition-delay: 0.67s; }
    .abn-bp.is-in .abn-bp-spec__item:nth-child(4) h3::after { transition-delay: 0.78s; }
    .abn-bp.is-in .abn-bp-spec__item:nth-child(5) h3::after { transition-delay: 0.89s; }
    .abn-bp.is-in .abn-bp-spec__item:nth-child(6) h3::after { transition-delay: 1s; }

    /* the active plate sketches itself in (after the sheet is in view). This
       replays each time a new mandate becomes active. */
    .abn-bp.is-in .abn-bp__plate.is-active .bp-d {
        stroke-dashoffset: 0;
        transition: stroke-dashoffset 0.62s var(--abn-ease-out);
    }

    .abn-bp.is-in .abn-bp__plate.is-active .bp-f {
        opacity: 1;
        transition: opacity 0.45s var(--abn-ease-out) 0.35s;
    }
}

/* ---- responsive ---- */
@media (max-width: 1199.98px) {
    .abn-bp__layout {
        grid-template-columns: 1fr;
    }

    .abn-bp__stage {
        position: static;
        order: -1;
        width: 100%;
        max-width: 560px;
        margin-inline: auto;
    }
}

@media (max-width: 679.98px) {
    .abn-bp {
        padding: 20px 16px;
    }

    .abn-bp::before {
        inset: 7px;
    }

    .abn-bp-spec__item {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 14px;
    }

    .abn-bp-spec__glyph {
        display: none;
    }

    .abn-bp-spec__datum {
        width: 42px;
        height: 42px;
        font-size: 0.85rem;
    }
}

/* ---- reduced motion: rest complete; no transform/crossfade feedback ---- */
@media (prefers-reduced-motion: reduce) {
    .abn-bp-spec__item:hover {
        transform: none;
    }

    .abn-bp__plate {
        transition: none;
    }
}

/* Competencies refinement: a calm civic registry with a focused visual panel. */
.abn-section--abn-home-competencies {
    position: relative;
    overflow: clip;
    background: var(--abn-surface-blue);
    border-block: 1px solid var(--abn-border);
}

.abn-section--abn-home-competencies::before {
    position: absolute;
    inset-inline-end: -230px;
    inset-block-start: 120px;
    width: 560px;
    height: 560px;
    content: "";
    border: 1px solid color-mix(in oklch, var(--abn-turquoise) 13%, transparent);
    border-radius: 50%;
    box-shadow:
        0 0 0 64px color-mix(in oklch, var(--abn-primary) 3.5%, transparent),
        0 0 0 138px color-mix(in oklch, var(--abn-primary) 2.5%, transparent);
    pointer-events: none;
}

.abn-section--abn-home-competencies .abn-container {
    position: relative;
    z-index: 1;
}

.abn-section--abn-home-competencies .abn-section__header {
    margin-block-end: clamp(30px, 4vw, 48px);
}

.abn-section--abn-home-competencies .abn-section__title::after {
    width: 96px;
    height: 4px;
    margin-block-start: 18px;
    background: linear-gradient(90deg, var(--abn-gold) 0 20px, var(--abn-primary) 20px 100%);
    border-radius: 999px;
}

.abn-bp {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.abn-bp::before {
    display: none;
}

.abn-bp__layout {
    align-items: start;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
    gap: clamp(24px, 3.4vw, 52px);
}

.abn-bp__stage {
    position: sticky;
    inset-block-start: calc(var(--abn-header-height) + 30px);
    min-height: 540px;
    margin: 0;
    overflow: hidden;
    aspect-ratio: auto;
    color: var(--abn-surface);
    background:
        linear-gradient(90deg, var(--abn-primary) 0 56%, var(--abn-turquoise) 56% 82%, var(--abn-gold) 82% 100%) top / 100% 4px no-repeat,
        var(--abn-primary-deep);
    border: 1px solid color-mix(in oklch, var(--abn-primary-deep) 78%, var(--abn-border));
    border-radius: 18px;
    box-shadow: 0 20px 56px rgba(0, 63, 102, 0.14);
    isolation: isolate;
}

.abn-bp__stage::before {
    position: absolute;
    inset: 4px 0 0;
    z-index: -1;
    content: "";
    background-image:
        linear-gradient(color-mix(in oklch, var(--abn-surface) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklch, var(--abn-surface) 5%, transparent) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}

.abn-bp__stage::after {
    position: absolute;
    inset-inline-end: -180px;
    inset-block-end: -250px;
    z-index: -1;
    width: 480px;
    height: 480px;
    content: "";
    border: 1px solid color-mix(in oklch, var(--abn-turquoise) 24%, transparent);
    border-radius: 50%;
    box-shadow: 0 0 0 58px color-mix(in oklch, var(--abn-turquoise) 5%, transparent);
    pointer-events: none;
}

.abn-bp__stage-meta {
    position: absolute;
    inset: 30px 30px auto;
    z-index: 3;
}

.abn-bp__stage-meta strong {
    color: var(--abn-surface);
    font-size: clamp(1.5rem, 2.2vw, 2.25rem);
    line-height: 1.45;
}

.abn-bp__plates {
    position: absolute;
    inset: 90px 22px 14px;
    z-index: 1;
}

.abn-bp__plate {
    transition: opacity 220ms var(--abn-ease-out);
}

.abn-bp .bp-s {
    stroke: color-mix(in oklch, var(--abn-surface) 76%, transparent);
    stroke-width: 2.35;
}

.abn-bp .bp-thin {
    stroke: color-mix(in oklch, var(--abn-surface) 42%, transparent);
}

.abn-bp .bp-dim {
    stroke: color-mix(in oklch, var(--abn-turquoise) 72%, var(--abn-surface));
}

.abn-bp .bp-cl {
    stroke: color-mix(in oklch, var(--abn-turquoise) 84%, var(--abn-surface));
}

.abn-bp .bp-wave {
    stroke: var(--abn-turquoise);
}

.abn-bp-spec {
    overflow: hidden;
    background: var(--abn-surface);
    border: 1px solid color-mix(in oklch, var(--abn-primary-deep) 15%, var(--abn-border));
    border-radius: 16px;
    box-shadow: var(--abn-shadow-sm);
}

.abn-bp-spec__item,
.abn-bp-spec__item:first-child {
    min-height: 112px;
    align-items: center;
    padding: 20px 18px;
    border-block-end: 1px solid var(--abn-border);
    grid-template-columns: 46px minmax(0, 1fr) 44px;
    gap: 16px;
    transform: none;
    transition:
        background 240ms var(--abn-ease-out),
        box-shadow 240ms var(--abn-ease-out);
}

.abn-bp-spec__item::before,
.abn-bp-spec__item::after {
    display: none;
}

.abn-bp-spec__item:hover,
.abn-bp-spec__item.is-active {
    background: var(--abn-surface-blue);
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--abn-primary) 16%, transparent);
    transform: none;
}

.abn-bp-spec__datum {
    width: 46px;
    height: 46px;
    color: var(--abn-primary-deep);
    background: var(--abn-surface-soft);
    border-color: color-mix(in oklch, var(--abn-primary) 26%, var(--abn-border));
    border-radius: 10px;
    font-size: 0.86rem;
    transition:
        color 240ms var(--abn-ease-out),
        background 240ms var(--abn-ease-out),
        border-color 240ms var(--abn-ease-out),
        box-shadow 240ms var(--abn-ease-out);
}

.abn-bp-spec__datum::before,
.abn-bp-spec__datum::after {
    display: none;
}

.abn-bp-spec__item:hover .abn-bp-spec__datum,
.abn-bp-spec__item.is-active .abn-bp-spec__datum {
    color: var(--abn-surface);
    background: var(--abn-primary-deep);
    border-color: var(--abn-primary-deep);
    box-shadow: inset 0 -3px 0 var(--abn-gold);
}

.abn-bp-spec__glyph {
    width: 44px;
    height: 44px;
    margin: 0;
    background: var(--abn-surface-soft);
    border: 1px solid color-mix(in oklch, var(--abn-primary) 14%, var(--abn-border));
    border-radius: 11px;
}

.abn-bp-spec__glyph svg {
    width: 25px;
    height: 25px;
    stroke: var(--abn-primary);
    stroke-width: 1.65;
}

.abn-bp-spec__item:hover .abn-bp-spec__glyph svg,
.abn-bp-spec__item.is-active .abn-bp-spec__glyph svg {
    stroke: var(--abn-turquoise);
}

.abn-bp-spec__body h3 {
    margin: 0 0 5px !important;
    font-size: clamp(1.08rem, 1.25vw, 1.28rem) !important;
    line-height: 1.5 !important;
}

.abn-bp-spec__body h3::after {
    display: none;
}

.abn-bp-spec__body p {
    max-width: 58ch;
    color: var(--abn-ink-soft);
    font-size: clamp(0.96rem, 1vw, 1rem);
    line-height: 1.82;
}

@media (prefers-reduced-motion: no-preference) {
    .abn-bp.is-armed .abn-bp__stage,
    .abn-bp.is-armed .abn-bp-spec__item {
        opacity: 0;
    }

    .abn-bp.is-armed .abn-bp__stage {
        transform: translateX(24px);
    }

    .abn-bp.is-armed .abn-bp-spec__item {
        transform: translateY(18px);
    }

    .abn-bp.is-in .abn-bp__stage,
    .abn-bp.is-in .abn-bp-spec__item {
        opacity: 1;
        transform: none;
        transition:
            opacity 620ms var(--abn-ease-out),
            transform 720ms var(--abn-ease-out);
    }

    .abn-bp.is-in .abn-bp__stage { transition-delay: 150ms; }
    .abn-bp.is-in .abn-bp-spec__item:nth-child(1) { transition-delay: 150ms; }
    .abn-bp.is-in .abn-bp-spec__item:nth-child(2) { transition-delay: 210ms; }
    .abn-bp.is-in .abn-bp-spec__item:nth-child(3) { transition-delay: 270ms; }
    .abn-bp.is-in .abn-bp-spec__item:nth-child(4) { transition-delay: 330ms; }
    .abn-bp.is-in .abn-bp-spec__item:nth-child(5) { transition-delay: 390ms; }
    .abn-bp.is-in .abn-bp-spec__item:nth-child(6) { transition-delay: 450ms; }

    .abn-bp.is-in .abn-bp__plate.is-active .bp-d {
        transition-duration: 520ms;
    }

    .abn-bp.is-in .abn-bp__plate.is-active .bp-f {
        transition: opacity 300ms var(--abn-ease-out) 240ms;
    }
}

@media (min-width: 1100px) {
    .abn-bp__layout {
        grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
    }

    .abn-bp__stage {
        position: sticky;
        order: initial;
        width: auto;
        max-width: none;
        margin: 0;
    }
}

@media (max-width: 1099.98px) {
    .abn-bp__layout {
        grid-template-columns: 1fr;
    }

    .abn-bp__stage {
        position: relative;
        inset-block-start: auto;
        order: -1;
        width: 100%;
        max-width: 820px;
        min-height: 460px;
        margin-inline: auto;
    }

    .abn-bp-spec {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .abn-bp-spec__item:nth-child(odd) {
        border-inline-end: 1px solid var(--abn-border);
    }

    .abn-bp-spec__item:nth-last-child(-n + 2) {
        border-block-end: 0;
    }
}

@media (max-width: 767.98px) {
    .abn-bp__stage {
        display: none;
    }

    .abn-bp-spec__item:hover,
    .abn-bp-spec__item.is-active {
        background: transparent;
        box-shadow: none;
    }

    .abn-bp-spec__item:hover .abn-bp-spec__datum,
    .abn-bp-spec__item.is-active .abn-bp-spec__datum {
        color: var(--abn-primary-deep);
        background: var(--abn-surface-soft);
        border-color: color-mix(in oklch, var(--abn-primary) 26%, var(--abn-border));
        box-shadow: none;
    }

    .abn-bp-spec__item:hover .abn-bp-spec__glyph svg,
    .abn-bp-spec__item.is-active .abn-bp-spec__glyph svg {
        stroke: var(--abn-primary);
    }
}

@media (max-width: 679.98px) {
    .abn-section--abn-home-competencies::before {
        inset-inline-end: -330px;
        opacity: 0.7;
    }

    .abn-bp-spec {
        display: block;
        border-radius: 14px;
    }

    .abn-bp-spec__item,
    .abn-bp-spec__item:first-child {
        min-height: 0;
        padding: 18px 14px;
        border-inline-end: 0;
        border-block-end: 1px solid var(--abn-border);
        grid-template-columns: 42px minmax(0, 1fr) 40px;
        gap: 12px;
    }

    .abn-bp-spec__item:nth-last-child(2) {
        border-block-end: 1px solid var(--abn-border);
    }

    .abn-bp-spec__item:last-child {
        border-block-end: 0;
    }

    .abn-bp-spec__datum {
        width: 42px;
        height: 42px;
    }

    .abn-bp-spec__glyph {
        display: grid;
        width: 40px;
        height: 40px;
    }

    .abn-bp-spec__glyph svg {
        width: 23px;
        height: 23px;
    }

    .abn-bp-spec__body p {
        font-size: 1rem;
        line-height: 1.8;
    }
}

@media (max-width: 399.98px) {
    .abn-bp-spec__item,
    .abn-bp-spec__item:first-child {
        grid-template-columns: 38px minmax(0, 1fr) 36px;
        gap: 10px;
    }

    .abn-bp-spec__datum {
        width: 38px;
        height: 38px;
    }

    .abn-bp-spec__glyph {
        width: 36px;
        height: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .abn-bp-spec__item,
    .abn-bp-spec__datum,
    .abn-bp-spec__glyph svg,
    .abn-bp__plate {
        transition: none;
    }
}

/* Comparative advantages: a civic atlas joining place, people, and resources. */
.abn-section--abn-home-advantages {
    position: relative;
    overflow: clip;
    background:
        linear-gradient(140deg, color-mix(in oklch, var(--abn-turquoise) 5%, transparent), transparent 42%),
        var(--abn-surface-soft);
    border-block: 1px solid var(--abn-border);
}

.abn-section--abn-home-advantages::before {
    position: absolute;
    inset-inline-start: -340px;
    inset-block-start: 110px;
    width: 740px;
    height: 740px;
    content: "";
    border: 1px solid color-mix(in oklch, var(--abn-primary) 10%, transparent);
    border-radius: 50%;
    box-shadow:
        0 0 0 90px color-mix(in oklch, var(--abn-primary) 3%, transparent),
        0 0 0 180px color-mix(in oklch, var(--abn-turquoise) 2.5%, transparent);
    pointer-events: none;
}

.abn-section--abn-home-advantages .abn-container {
    position: relative;
    z-index: 1;
}

.abn-section--abn-home-advantages .abn-section__header {
    margin-block-end: clamp(24px, 3vw, 38px);
}

.abn-section--abn-home-advantages .abn-section__title::after {
    width: 112px;
    height: 4px;
    background: linear-gradient(90deg, var(--abn-gold) 0 22px, var(--abn-primary) 22px 76px, var(--abn-turquoise) 76px 100%);
    border-radius: 999px;
}

.abn-adv {
    position: relative;
}

.abn-adv__intro {
    margin-block-end: clamp(26px, 3.3vw, 44px);
    padding-block-end: clamp(20px, 2.4vw, 28px);
    border-block-end: 1px solid color-mix(in oklch, var(--abn-primary-deep) 17%, var(--abn-border));
}

.abn-adv__intro p {
    max-width: 70ch;
    margin: 0;
    color: var(--abn-ink-soft);
    font-size: clamp(1rem, 1.25vw, 1.1rem);
    line-height: 1.95;
}

.abn-adv__gateway {
    display: grid;
    align-items: start;
    gap: clamp(24px, 3.6vw, 54px);
}

.abn-adv__media {
    display: none;
    min-height: 540px;
    align-content: end;
    margin: 0;
    overflow: hidden;
    padding: clamp(24px, 3vw, 40px);
    color: var(--abn-surface);
    background-color: var(--abn-primary-deep);
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(0, 63, 102, 0.18);
    isolation: isolate;
}

.abn-adv__media::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background:
        linear-gradient(180deg, rgba(0, 35, 58, 0.08) 12%, rgba(0, 48, 78, 0.34) 52%, rgba(0, 35, 58, 0.96) 100%),
        linear-gradient(90deg, rgba(0, 63, 102, 0.35), transparent 62%);
}

.abn-adv__media::after {
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    content: "";
    background: linear-gradient(90deg, var(--abn-primary) 0 42%, var(--abn-turquoise) 42% 68%, var(--abn-green) 68% 86%, var(--abn-gold) 86% 100%);
}

.abn-adv__media-copy {
    max-width: 520px;
}

.abn-adv__media-copy strong {
    display: block;
    color: var(--abn-surface);
    font-size: clamp(2rem, 3.6vw, 3.55rem);
    font-weight: 800;
    line-height: 1.25;
}

.abn-adv__media-copy p {
    max-width: 47ch;
    margin: 16px 0 0;
    color: color-mix(in oklch, var(--abn-surface) 76%, transparent);
    font-size: 0.92rem;
    line-height: 1.85;
}

.abn-adv__proof {
    display: grid;
    margin: 28px 0 0;
    padding-block-start: 18px;
    border-block-start: 1px solid color-mix(in oklch, var(--abn-surface) 22%, transparent);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.abn-adv__proof > div {
    padding-inline: 16px;
    border-inline-start: 1px solid color-mix(in oklch, var(--abn-surface) 16%, transparent);
}

.abn-adv__proof > div:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
}

.abn-adv__proof dt {
    margin-block-end: 5px;
    color: color-mix(in oklch, var(--abn-surface) 58%, transparent);
    font-size: 0.7rem;
    font-weight: 700;
}

.abn-adv__proof dd {
    margin: 0;
    color: var(--abn-surface);
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.65;
}

.abn-adv__cluster {
    overflow: hidden;
    background: var(--abn-surface);
    border: 1px solid color-mix(in oklch, var(--abn-primary-deep) 15%, var(--abn-border));
    border-radius: 18px;
    box-shadow: var(--abn-shadow-sm);
}

.abn-adv__cluster-head {
    position: relative;
    padding: 24px clamp(20px, 2.5vw, 32px) 22px;
    background:
        linear-gradient(90deg, color-mix(in oklch, var(--abn-primary) 8%, transparent), transparent 70%),
        var(--abn-surface-blue);
    border-block-end: 1px solid var(--abn-border);
}

.abn-adv__cluster-head::after {
    position: absolute;
    inset-inline-end: clamp(20px, 2.5vw, 32px);
    inset-block: 0;
    width: 46px;
    content: "";
    background:
        linear-gradient(135deg, transparent 0 43%, color-mix(in oklch, var(--abn-gold) 36%, transparent) 43% 46%, transparent 46% 100%);
    pointer-events: none;
}

.abn-adv__cluster-head > span {
    display: block;
    margin-block-end: 5px;
    color: var(--abn-primary-dark);
    font-size: 0.75rem;
    font-weight: 800;
}

.abn-adv__cluster-head h3,
.abn-adv__current header h3 {
    margin: 0 !important;
    color: var(--abn-primary-deep) !important;
    font-size: clamp(1.35rem, 2vw, 1.85rem) !important;
    line-height: 1.45 !important;
}

.abn-adv__list,
.abn-adv__current ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.abn-adv__item {
    position: relative;
    display: grid;
    align-items: start;
    padding: clamp(19px, 2.2vw, 28px) clamp(18px, 2.4vw, 30px);
    border-block-end: 1px solid var(--abn-border);
    grid-template-columns: 46px minmax(0, 1fr);
    gap: clamp(13px, 1.5vw, 18px);
    transition: background-color 260ms var(--abn-ease-out);
}

.abn-adv__item:last-child {
    border-block-end: 0;
}

/*
 * Advantage items respond to attention.
 *
 * These are <li> descriptions, not links - so the hover must read as
 * "responsive", never as "clickable": no lift, no pointer cursor, no arrow.
 * The whole gesture is a gold rail unrolling down the inline-start edge, a
 * faint wash behind the row, and the glyph waking up. It is built from
 * transform, opacity and colour only, so it composites cleanly and cannot
 * bring back the scroll shimmer we just removed.
 *
 * The rail is anchored with inset-inline-start and scales on the block axis,
 * so it lands on the correct edge in both Arabic and English without a
 * direction-specific rule.
 */
.abn-adv__item::before {
    position: absolute;
    inset-block: 8px;
    inset-inline-start: 0;
    width: 3px;
    content: "";
    background: linear-gradient(180deg,
        var(--abn-gold),
        color-mix(in oklch, var(--abn-turquoise) 70%, var(--abn-gold)));
    border-radius: 3px;
    opacity: 0;
    transform: scaleY(0.25);
    transform-origin: center top;
    transition:
        transform 420ms var(--abn-ease-out),
        opacity 260ms var(--abn-ease-out);
}

.abn-adv__item:hover,
.abn-adv__item:focus-within {
    background-color: color-mix(in oklch, var(--abn-primary) 4%, transparent);
}

.abn-adv__item:hover::before,
.abn-adv__item:focus-within::before {
    opacity: 1;
    transform: scaleY(1);
}

/* The glyph lifts off its plate: brand fill, gold edge, a touch larger. */
.abn-adv__glyph {
    transition:
        color 260ms var(--abn-ease-out),
        background-color 260ms var(--abn-ease-out),
        border-color 260ms var(--abn-ease-out),
        transform 380ms var(--abn-ease-out),
        box-shadow 380ms var(--abn-ease-out);
}

.abn-adv__item:hover .abn-adv__glyph,
.abn-adv__item:focus-within .abn-adv__glyph {
    color: var(--abn-primary-deep);
    background: color-mix(in oklch, var(--abn-gold) 24%, var(--abn-surface));
    border-color: color-mix(in oklch, var(--abn-gold) 62%, transparent);
    transform: scale(1.07);
    box-shadow: 0 10px 22px color-mix(in oklch, var(--abn-primary-deep) 14%, transparent);
}

/* The stroked icon thickens slightly - the same "waking up" cue the
   competencies plates use, without redrawing the path. */
.abn-adv__glyph svg {
    transition: stroke-width 380ms var(--abn-ease-out);
}

.abn-adv__item:hover .abn-adv__glyph svg,
.abn-adv__item:focus-within .abn-adv__glyph svg {
    stroke-width: 1.95;
}

.abn-adv__item h4 {
    transition: color 260ms var(--abn-ease-out);
}

.abn-adv__item:hover h4,
.abn-adv__item:focus-within h4 {
    color: var(--abn-primary) !important;
}

/* :focus-within is kept alongside every :hover above so the state still
   appears if a link is ever placed inside an item. The items themselves are
   deliberately not focusable - they are descriptions, not controls, and
   adding tabindex would create tab stops that do nothing. */

@media (prefers-reduced-motion: reduce) {
    .abn-adv__item,
    .abn-adv__item::before,
    .abn-adv__glyph,
    .abn-adv__glyph svg,
    .abn-adv__item h4 {
        transition: none;
    }

    /* Still show the state, just without the travel. */
    .abn-adv__item:hover::before,
    .abn-adv__item:focus-within::before {
        transform: scaleY(1);
    }

    .abn-adv__item:hover .abn-adv__glyph,
    .abn-adv__item:focus-within .abn-adv__glyph {
        transform: none;
    }
}

.abn-adv__glyph,
.abn-adv__current-mark {
    display: grid;
    width: 44px;
    height: 44px;
    color: var(--abn-primary);
    background: color-mix(in oklch, var(--abn-primary) 5%, var(--abn-surface));
    border: 1px solid color-mix(in oklch, var(--abn-primary) 22%, var(--abn-border));
    border-radius: 10px;
    place-items: center;
}

.abn-adv__glyph svg,
.abn-adv__current-mark svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65;
}

.abn-adv__item h4 {
    margin: 0 0 6px !important;
    color: var(--abn-primary-deep) !important;
    font-size: clamp(1.08rem, 1.35vw, 1.28rem) !important;
    line-height: 1.5 !important;
}

.abn-adv__item p {
    max-width: 66ch;
    margin: 0;
    color: var(--abn-ink-soft);
    font-size: clamp(0.9rem, 1vw, 0.98rem);
    line-height: 1.85;
}

.abn-adv__currents {
    display: grid;
    margin-block-start: clamp(28px, 4vw, 56px);
    background: var(--abn-surface);
    border: 1px solid color-mix(in oklch, var(--abn-primary-deep) 14%, var(--abn-border));
    border-radius: 18px;
    box-shadow: var(--abn-shadow-sm);
}

.abn-adv__current {
    min-width: 0;
}

.abn-adv__current + .abn-adv__current {
    border-block-start: 1px solid var(--abn-border);
}

.abn-adv__current header {
    display: flex;
    align-items: center;
    padding: 24px clamp(20px, 2.5vw, 32px);
    background: var(--abn-surface-blue);
    border-block-end: 1px solid var(--abn-border);
    gap: 16px;
}

.abn-adv__current--people .abn-adv__current-mark {
    color: var(--abn-turquoise);
    background: color-mix(in oklch, var(--abn-turquoise) 7%, var(--abn-surface));
    border-color: color-mix(in oklch, var(--abn-turquoise) 24%, var(--abn-border));
}

.abn-adv__current--resources .abn-adv__current-mark {
    color: var(--abn-green);
    background: color-mix(in oklch, var(--abn-green) 7%, var(--abn-surface));
    border-color: color-mix(in oklch, var(--abn-green) 24%, var(--abn-border));
}

.abn-adv__current--resources header {
    background: color-mix(in oklch, var(--abn-green) 5%, var(--abn-surface));
}

@media (min-width: 768px) {
    .abn-adv__media {
        position: relative;
        display: grid;
        background:
            url("../../../../images/abn/media/sohar-port-logistics-1360.webp") center / cover no-repeat,
            var(--abn-primary-deep);
    }
}

@media (min-width: 900px) {
    .abn-adv__currents {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .abn-adv__current + .abn-adv__current {
        border-block-start: 0;
        border-inline-start: 1px solid var(--abn-border);
    }
}

@media (min-width: 1100px) {
    .abn-adv__gateway {
        grid-template-columns: minmax(0, 0.94fr) minmax(460px, 1.06fr);
    }

    .abn-adv__media {
        position: sticky;
        inset-block-start: calc(var(--abn-header-height) + 28px);
        min-height: 610px;
    }
}

@media (max-width: 767.98px) {
    .abn-section--abn-home-advantages::before {
        inset-inline-start: -540px;
        opacity: 0.75;
    }

    .abn-adv__cluster,
    .abn-adv__currents {
        border-radius: 14px;
    }

    .abn-adv__cluster-head,
    .abn-adv__current header {
        padding: 20px 16px;
    }

    .abn-adv__item {
        padding: 18px 14px;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
    }

    .abn-adv__glyph,
    .abn-adv__current-mark {
        width: 40px;
        height: 40px;
    }

    .abn-adv__glyph svg,
    .abn-adv__current-mark svg {
        width: 23px;
        height: 23px;
    }

    .abn-adv__item p {
        font-size: 0.98rem;
        line-height: 1.8;
    }
}

@media (max-width: 399.98px) {
    .abn-adv__item {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 10px;
    }

    .abn-adv__glyph,
    .abn-adv__current-mark {
        width: 36px;
        height: 36px;
        border-radius: 9px;
    }

    .abn-adv__glyph svg,
    .abn-adv__current-mark svg {
        width: 21px;
        height: 21px;
    }
}

/* Wilayats: one ordered photographic civic atlas. Equal administrative
   weight is expressed by a continuous rail, not six floating cards. */
.abn-section--abn-home-wilayats {
    z-index: 1;
    overflow: hidden;
    padding-block-end: clamp(116px, 11vw, 170px);
    color: var(--abn-surface);
    background:
        radial-gradient(80% 70% at 94% 4%, color-mix(in oklch, var(--abn-turquoise) 10%, transparent), transparent 58%),
        linear-gradient(180deg, color-mix(in oklch, var(--abn-primary) 10%, var(--abn-primary-deep)), var(--abn-primary-deep));
}

.abn-section--abn-home-wilayats .abn-section__title {
    color: var(--abn-surface) !important;
}

.abn-section--abn-home-wilayats .abn-section__title::after {
    display: block;
    width: 96px;
    height: 4px;
    margin-block-start: 18px;
    content: "";
    background: linear-gradient(90deg, var(--abn-gold) 0 22px, var(--abn-green) 22px 48px, var(--abn-turquoise) 48px 100%);
    border-radius: 999px;
}

.mod-abn-cards-shell--wilayats {
    position: relative;
}

.mod-abn-cards--wilayats {
    position: relative;
    display: grid;
    margin: 0;
    padding: 18px 0 62px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(10px, 1.2vw, 18px);
    list-style: none;
}

.mod-abn-cards--wilayats::before {
    position: absolute;
    inset-inline: 5%;
    inset-block-end: 24px;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, color-mix(in oklch, var(--abn-gold) 72%, transparent), color-mix(in oklch, var(--abn-turquoise) 72%, transparent));
    pointer-events: none;
}

.mod-abn-cards--wilayats .mod-abn-cards__item {
    position: relative;
    min-width: 0;
}

.mod-abn-cards--wilayats .mod-abn-cards__item::after {
    position: absolute;
    inset-inline-start: calc(50% - 5px);
    inset-block-end: -43px;
    z-index: 1;
    width: 10px;
    height: 10px;
    content: "";
    background: var(--abn-turquoise);
    border: 2px solid var(--abn-primary-deep);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--abn-turquoise) 16%, transparent);
    transform: rotate(45deg);
}

.mod-abn-cards--wilayats .mod-abn-cards__item:first-child::after,
.mod-abn-cards--wilayats .mod-abn-cards__item:last-child::after {
    background: var(--abn-gold);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--abn-gold) 18%, transparent);
}

.mod-abn-cards--wilayats .mod-abn-cards__link {
    position: relative;
    display: block;
    min-height: 44px;
    overflow: hidden;
    color: var(--abn-surface) !important;
    border: 1px solid color-mix(in oklch, var(--abn-surface) 14%, transparent);
    border-radius: 16px;
    text-decoration: none !important;
    box-shadow: 0 18px 34px rgba(0, 31, 52, 0.2);
}

.mod-abn-cards--wilayats .mod-abn-cards__link:focus-visible {
    outline: 3px solid var(--abn-gold);
    outline-offset: 4px;
}

.mod-abn-cards--wilayats .mod-abn-cards__media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: color-mix(in oklch, var(--abn-primary) 28%, var(--abn-primary-deep));
}

.mod-abn-cards--wilayats .mod-abn-cards__media::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(0deg, color-mix(in oklch, var(--abn-primary-deep) 92%, transparent) 0%, color-mix(in oklch, var(--abn-primary-deep) 28%, transparent) 48%, transparent 74%);
    pointer-events: none;
}

.mod-abn-cards--wilayats .mod-abn-cards__media img {
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: cover;
    image-rendering: auto;
    transition: filter 700ms var(--abn-ease-out), transform 700ms var(--abn-ease-out);
}

.mod-abn-cards--wilayats .mod-abn-cards__link:hover .mod-abn-cards__media img,
.mod-abn-cards--wilayats .mod-abn-cards__link:focus-visible .mod-abn-cards__media img {
    filter: saturate(1.1) contrast(1.03);
    transform: scale(1.055);
}

.mod-abn-cards--wilayats .mod-abn-cards__content {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    display: block;
    padding: 14px 14px 15px;
    padding-inline-end: 52px;
    transition: transform 260ms var(--abn-ease-out);
}

.mod-abn-cards--wilayats .mod-abn-cards__title {
    color: var(--abn-surface);
    font-size: clamp(0.82rem, 1vw, 0.98rem);
    font-weight: 700;
    line-height: 1.55;
}

.mod-abn-cards--wilayats .mod-abn-cards__description {
    display: none;
}

.mod-abn-cards--wilayats .mod-abn-cards__arrow {
    position: absolute;
    inset-inline-end: 12px;
    inset-block-end: 12px;
    z-index: 3;
    display: grid;
    width: 32px;
    height: 32px;
    color: var(--abn-surface);
    opacity: 0;
    background: color-mix(in oklch, var(--abn-primary-deep) 72%, transparent);
    border: 1px solid color-mix(in oklch, var(--abn-surface) 26%, transparent);
    border-radius: 50%;
    place-items: center;
    transform: translateX(8px);
    transition: opacity 240ms var(--abn-ease-out), transform 260ms var(--abn-ease-out);
}

.mod-abn-cards--wilayats .mod-abn-cards__arrow svg {
    width: 16px;
    height: 16px;
}

.mod-abn-cards--wilayats .mod-abn-cards__link:hover .mod-abn-cards__content,
.mod-abn-cards--wilayats .mod-abn-cards__link:focus-visible .mod-abn-cards__content {
    transform: translateY(-3px);
}

.mod-abn-cards--wilayats .mod-abn-cards__link:hover .mod-abn-cards__arrow,
.mod-abn-cards--wilayats .mod-abn-cards__link:focus-visible .mod-abn-cards__arrow {
    opacity: 1;
    transform: none;
}

@media (max-width: 1199.98px) {
    .abn-section--abn-home-services .abn-container {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .abn-section--abn-home-services .abn-section__header {
        position: static;
    }

    .abn-section--abn-home-services .abn-section__title {
        max-width: 15ch;
    }

    .mod-abn-cards-shell--tourism {
        grid-template-columns: minmax(0, 1fr) minmax(310px, 0.72fr);
    }

    .mod-abn-cards--tourism {
        margin-inline-start: -38px;
    }

    .mod-abn-cards--wilayats {
        padding-block-end: 18px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mod-abn-cards--wilayats::before,
    .mod-abn-cards--wilayats .mod-abn-cards__item::after {
        display: none;
    }
}

@media (max-width: 899.98px) {
    /* Same doubling problem, and worse on a phone: 76px each side meant 152px
       of scrolling past nothing between every pair of sections. */
    .abn-section {
        padding-block: clamp(44px, 6.5vw, 64px);
    }

    .abn-place-journey .abn-section--abn-home-wilayats {
        padding-block-end: 94px;
    }

    .abn-place-journey .abn-section--abn-home-tourism {
        margin-block-start: -28px;
        padding-block-start: 78px;
        border-start-start-radius: 36px;
        border-start-end-radius: 36px;
    }

    .abn-hero__content {
        grid-template-columns: 1fr;
    }

    .mod-abn-cards--services .mod-abn-cards__link {
        grid-template-columns: 30px minmax(100px, 135px) minmax(0, 1fr) 44px;
    }

    .mod-abn-cards--services .mod-abn-cards__action {
        display: none;
    }


    .mod-abn-cards-shell--tourism {
        display: block;
    }

    .mod-abn-cards__visual {
        height: 450px;
        border-radius: var(--abn-radius-md) var(--abn-radius-md) 0 0;
    }

    .mod-abn-cards--tourism {
        margin: -30px 20px 0;
    }

}

@media (max-width: 679.98px) {
    .abn-section__header,
    .abn-section__header--split,
    .abn-section__header--split > div {
        display: block;
    }

    .abn-section__title {
        max-width: none;
        font-size: clamp(1.85rem, 9vw, 2.7rem) !important;
    }

    .abn-section__header--split .abn-text-link {
        margin-block-start: 24px;
    }

    .abn-hero {
        min-height: max(650px, calc(100svh - var(--abn-header-height)));
    }

    .abn-hero__content {
        width: min(calc(100% - 30px), var(--abn-container));
        padding-block: 88px 112px;
    }

    .abn-hero__title {
        font-size: clamp(3.25rem, 17vw, 4.7rem) !important;
    }

    .abn-hero__title span:last-child {
        margin-inline-start: 22px;
    }

    .abn-hero__intro {
        margin-block-start: 24px;
        font-size: 0.94rem;
    }

    .abn-hero__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .abn-button {
        min-width: 0;
        padding-inline: 15px;
        font-size: 0.78rem;
    }

    .abn-hero__scroll {
        inset-inline-start: 15px;
    }

    .abn-section--abn-home-services .abn-container {
        gap: 30px;
    }

    .mod-abn-cards--services .mod-abn-cards__link {
        min-height: 0;
        padding: 26px 4px;
        grid-template-columns: 28px 82px minmax(0, 1fr) 38px;
        gap: 11px;
    }

    .mod-abn-cards--services .mod-abn-cards__link:hover,
    .mod-abn-cards--services .mod-abn-cards__link:focus-visible {
        padding-inline: 8px 0;
    }

    .mod-abn-cards--services .mod-abn-cards__media {
        height: 76px;
    }

    .mod-abn-cards--services .mod-abn-cards__media img,
    .mod-abn-cards--services .mod-abn-cards__item--2 .mod-abn-cards__media img {
        height: 58px;
    }

    .mod-abn-cards--services .mod-abn-cards__item--3 .mod-abn-cards__media {
        width: 70px;
        height: 84px;
    }

    .mod-abn-cards--services .mod-abn-cards__item--3 .mod-abn-cards__media img {
        width: 56px;
        height: 69px;
    }

    .mod-abn-cards--services .mod-abn-cards__title {
        font-size: 0.88rem;
    }

    .mod-abn-cards--services .mod-abn-cards__description {
        display: none;
    }

    .mod-abn-cards__arrow {
        width: 38px;
        height: 38px;
    }

    .mod-abn-cards__visual {
        height: 340px;
    }

    .mod-abn-cards--tourism {
        margin: -22px 10px 0;
        padding: 18px;
    }

    .mod-abn-cards--tourism .mod-abn-cards__link {
        grid-template-columns: 26px 34px minmax(0, 1fr) 34px;
        gap: 9px;
    }

    .mod-abn-cards--tourism .mod-abn-cards__icon {
        width: 34px;
        height: 34px;
    }

    .mod-abn-cards--wilayats {
        display: flex;
        margin-inline: -14px;
        padding: 16px 14px 18px;
        overflow-x: auto;
        scroll-padding-inline: 14px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .mod-abn-cards--wilayats::-webkit-scrollbar {
        display: none;
    }

    .mod-abn-cards--wilayats .mod-abn-cards__item {
        width: min(72vw, 280px);
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .mod-abn-cards--wilayats .mod-abn-cards__arrow {
        opacity: 1;
        transform: none;
    }

}

@media (prefers-reduced-motion: reduce) {
    .abn-hero__scroll i::after {
        animation: none;
        transform: none;
    }

    .abn-hero__media picture {
        animation: none;
    }

    .abn-news-feature__media::before,
    .abn-news-card__media::before {
        display: none;
    }

    .abn-news-media__sheen {
        display: none;
    }

    /* No transform-based hover motion under reduced-motion; colour and
       shadow feedback (instant) are kept. */
    .abn-news-feature:hover,
    .abn-news-feature:focus-within,
    .abn-news-card:hover,
    .abn-news-card:focus-within {
        --ty: 0px;
        --sc: 1;
    }

    .abn-hero__canvas {
        display: none;
    }
}