/* Al-Ajlan Markets — original design system */
:root {
    --color-green: #1b570f;
    --color-green-dark: #123b0a;
    --color-green-deep: #0d2d08;
    --color-green-black: #081e05;
    --color-gold: #ba9436;
    --color-gold-soft: #d4b56a;
    --color-gold-deep: #8a6c22;
    --color-off-white: #f5f2e9;
    --color-beige: #e8e0cf;
    --color-mist: #fbf8f1;
    --color-charcoal: #171a17;
    --color-white: #ffffff;
    --color-ink: #1c241b;
    --color-muted: #5c6558;
    --color-line: rgba(186, 148, 54, 0.28);
    --color-line-strong: rgba(186, 148, 54, 0.55);
    --color-overlay: rgba(8, 30, 5, 0.55);

    --font: "Cairo", "Segoe UI", Tahoma, sans-serif;
    --fs-display: clamp(2.4rem, 6vw, 5.4rem);
    --fs-h2: clamp(1.85rem, 3.6vw, 3.25rem);
    --fs-h3: clamp(1.2rem, 2vw, 1.65rem);
    --fs-body: clamp(1rem, 1.15vw, 1.125rem);
    --fs-small: 0.875rem;
    --lh-tight: 1.15;
    --lh-body: 1.8;
    --tracking: 0.04em;

    --space-2xs: 0.35rem;
    --space-xs: 0.6rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6.5rem;
    --space-fluid: clamp(3.5rem, 8vw, 8rem);

    --wrap: 72rem;
    --wrap-wide: 90rem;
    --header-h: 4.75rem;
    --radius: 1.15rem;
    --radius-sm: 0.7rem;
    --shadow: 0 1.5rem 3rem rgba(8, 30, 5, 0.12);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration: 280ms;
    --duration-slow: 700ms;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-ink);
    background: var(--color-mist);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
}

body > main {
    flex: 1 0 auto;
}

body > .site-footer {
    flex-shrink: 0;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    display: block;
}

img {
    height: auto;
    object-fit: cover;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1,
h2,
h3,
h4,
p,
figure {
    margin: 0;
}

:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    inset-inline-start: 1rem;
    top: -4rem;
    z-index: 1000;
    background: var(--color-gold);
    color: var(--color-green-black);
    padding: 0.6rem 1rem;
    border-radius: 0.4rem;
}

.skip-link:focus {
    top: 1rem;
}

.wrap {
    width: min(100% - 2.5rem, var(--wrap));
    margin-inline: auto;
}

.wrap--wide {
    width: min(100% - 2.5rem, var(--wrap-wide));
    margin-inline: auto;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 3.1rem;
    padding-inline: 1.45rem;
    border-radius: 0.65rem;
    border: 1px solid transparent;
    font-weight: 600;
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.28) 45%, transparent 70%);
    transform: translateX(120%);
    transition: transform 0.7s var(--ease);
    pointer-events: none;
    z-index: 1;
}

.btn:hover::after {
    transform: translateX(-120%);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.btn--gold {
    background: var(--color-gold);
    color: #fff;
}

.btn--gold:hover,
.btn--gold:focus-visible {
    background: var(--color-gold-soft);
    color: #fff;
    box-shadow: 0 0.8rem 1.6rem rgba(186, 148, 54, 0.28);
}

.btn--ghost {
    border-color: var(--color-gold);
    color: var(--color-off-white);
    background: transparent;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    background: var(--color-gold);
    color: #fff;
}

.btn--outline {
    border-color: var(--color-green);
    color: var(--color-green);
}

.btn--outline:hover {
    background: var(--color-green);
    color: var(--color-white);
}

.btn--solid {
    background: var(--color-green);
    color: var(--color-white);
}

.btn--solid:hover {
    background: var(--color-green-dark);
}

.btn__icon {
    width: 0.85rem;
    height: 0.85rem;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg);
}

[dir="rtl"] .btn__icon {
    transform: rotate(225deg);
}

/* Header */
.site-header {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 200;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background-color: transparent;
    transition: background-color 0.85s ease, box-shadow 0.85s ease, backdrop-filter 0.85s ease, -webkit-backdrop-filter 0.85s ease;
}

.js .site-header {
    background-color: transparent;
}

.site-header.is-scrolled,
.site-header.is-solid {
    background-color: #0d2d08;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 0.6rem 1.8rem rgba(8, 30, 5, 0.22);
}

html:not(.js) .site-header {
    background: #0d2d08;
}

.site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 1rem;
    width: min(100% - 2rem, var(--wrap-wide));
    margin-inline: auto;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--color-white);
    min-width: 0;
    justify-self: start;
}

.logo img {
    width: auto;
    height: 3.35rem;
    object-fit: contain;
    transition: transform 0.7s var(--ease);
}

.logo:hover img {
    transform: scale(1.03);
}

.nav {
    display: flex;
    align-items: center;
    gap: 0.95rem;
}

.nav a {
    color: var(--color-off-white);
    font-weight: 700;
    font-size: 0.95rem;
    position: relative;
    padding-block: 0.3rem;
    transition: color var(--duration) var(--ease);
}

.nav a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -0.15rem;
    height: 1px;
    background: var(--color-gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--duration) var(--ease);
}

.nav a:hover,
.nav a[aria-current="page"] {
    color: var(--color-white);
}

.nav a[aria-current="page"]::after,
.nav a:hover::after {
    transform: scaleX(1);
}

.header-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: 0.6rem;
}

.header-tools .btn {
    min-height: 2.65rem;
    padding-inline: 1.05rem;
    font-size: 0.9rem;
    white-space: nowrap;
}

.menu-toggle {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid var(--color-line);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.32rem;
}

.menu-toggle span {
    display: block;
    width: 1.05rem;
    height: 1.5px;
    background: var(--color-off-white);
    transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(0.38rem) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-0.38rem) rotate(-45deg);
}

.nav-panel {
    display: none;
}

/* Hero */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    align-items: end;
    overflow: hidden;
    background: var(--color-green-black);
    color: var(--color-white);
}

.hero__media,
.hero__canvas,
.hero__shade {
    position: absolute;
    inset: 0;
}

.hero__media img,
.hero__media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__media img {
    transform: scale(1.06);
}

.hero__media video {
    z-index: 1;
}

.hero__canvas {
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.55;
}

.hero__shade {
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(4, 35, 18, 0.48),
            rgba(7, 48, 25, 0.2),
            rgba(3, 28, 14, 0.34)
        );
}

[dir="ltr"] .hero__shade {
    background:
        linear-gradient(
            270deg,
            rgba(4, 35, 18, 0.48),
            rgba(7, 48, 25, 0.2),
            rgba(3, 28, 14, 0.34)
        );
}

.hero__content {
    position: relative;
    z-index: 2;
    padding-block: calc(var(--header-h) + 2rem) 6rem;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--color-gold);
    font-weight: 600;
    font-size: var(--fs-small);
    letter-spacing: var(--tracking);
}

.eyebrow::before {
    content: "";
    width: 1.6rem;
    height: 1px;
    background: currentColor;
}

.display {
    font-size: var(--fs-display);
    line-height: var(--lh-tight);
    font-weight: 700;
    letter-spacing: -0.02em;
    max-width: 16ch;
}

.hero__claim {
    margin: 0.55rem 0 0;
    color: #fff;
    font-size: clamp(1.05rem, 1.7vw, 1.45rem);
    font-weight: 700;
    line-height: 1.4;
    max-width: none;
    white-space: nowrap;
}

.lede {
    max-width: 38rem;
    color: rgba(245, 242, 233, 0.86);
    margin-block: 1.1rem 1.8rem;
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.scroll-hint {
    position: absolute;
    inset-inline-start: 2rem;
    bottom: 1.6rem;
    z-index: 2;
    color: var(--color-gold-soft);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    writing-mode: vertical-rl;
    animation: hint-bounce 2.2s var(--ease) infinite;
}

@keyframes hint-bounce {
    0%, 100% { transform: rotate(180deg) translateY(0); }
    50% { transform: rotate(180deg) translateY(10px); }
}

[dir="ltr"] .scroll-hint {
    inset-inline-start: auto;
    inset-inline-end: 2rem;
    transform: none;
}

/* Page hero (inner pages) */
.page-hero {
    position: relative;
    min-height: 78vh;
    min-height: 78svh;
    display: grid;
    align-items: end;
    overflow: hidden;
    color: var(--color-white);
    background: var(--color-green-deep);
}

.page-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: kenburns 18s var(--ease-out) forwards;
}

.page-hero__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 30, 5, 0.25), rgba(8, 30, 5, 0.78));
}

.page-hero__content {
    position: relative;
    z-index: 1;
    padding-block: calc(var(--header-h) + 3rem) 3.2rem;
}

/* Sections */
.section {
    padding-block: var(--space-fluid);
}

.section--green {
    background: var(--color-green);
    color: var(--color-white);
}

.section--deep {
    background: var(--color-green-deep);
    color: var(--color-white);
}

.section--beige {
    background: var(--color-beige);
}

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

.section__kicker {
    color: var(--color-gold-deep);
    font-weight: 700;
    letter-spacing: var(--tracking);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    margin: 0 0 0.85rem;
}

.section--green .section__kicker,
.section--deep .section__kicker {
    color: var(--color-gold-soft);
}

.section__title {
    font-size: var(--fs-h2);
    line-height: 1.25;
    font-weight: 700;
    max-width: 18ch;
}

.section__text {
    max-width: 40rem;
    color: var(--color-muted);
}

.section--green .section__text,
.section--deep .section__text {
    color: rgba(245, 242, 233, 0.82);
}

.section__head {
    display: grid;
    gap: 1rem;
    margin-block-end: clamp(2rem, 4vw, 3.4rem);
}

.section__head--row {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: end;
}

/* About intro */
.about-intro {
    position: relative;
    padding-block: clamp(3.8rem, 8vw, 7.2rem);
    background:
        radial-gradient(72% 90% at 100% 8%, rgba(186, 148, 54, 0.12), transparent 52%),
        radial-gradient(55% 70% at 0% 100%, rgba(27, 87, 15, 0.1), transparent 58%),
        #efe8d6;
    overflow: hidden;
}

.about-intro::before {
    content: "";
    position: absolute;
    left: -4%;
    top: 50%;
    width: min(26rem, 42vw);
    height: min(26rem, 42vw);
    transform: translateY(-50%);
    background: url("../img/mark.png") center / contain no-repeat;
    opacity: 0.06;
    pointer-events: none;
}

.about-intro__inner {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 1rem;
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
}

.about-intro__inner .about-intro__title {
    margin: 0;
    color: var(--color-gold-deep);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: var(--tracking);
}

.about-intro__inner .gold-rule {
    margin-inline: auto;
    transform-origin: center;
}

.about-intro__inner p {
    color: #2f362e;
    max-width: 44rem;
    font-size: clamp(1.05rem, 1.25vw, 1.18rem);
    font-weight: 500;
}

.about-intro__inner .btn {
    margin-block-start: 0.7rem;
    width: fit-content;
}

/* Homepage: center all section content */
.home .hero {
    align-items: center;
}

.home .hero__content {
    display: grid;
    justify-items: center;
    text-align: center;
    padding-block: calc(var(--header-h) + 1rem) 1.25rem;
}

.home .display,
.hero .display {
    line-height: 1.35;
    letter-spacing: 0;
    padding-block: 0.18em 0.12em;
    overflow: visible;
}

.home .display,
.home .hero__claim,
.home .lede {
    margin-inline: auto;
}

.home .hero__actions {
    justify-content: center;
}

.home .section__head {
    text-align: center;
    justify-items: center;
}

.home .section__title,
.home .section__text {
    margin-inline: auto;
}

.home .gold-rule {
    margin-inline: auto;
    transform-origin: center;
}

.home .stats-band__inner {
    text-align: center;
}

.home .stats-band__text {
    margin-inline: auto;
}

.home .card {
    text-align: center;
}

.home .icon-star {
    margin-inline: auto;
}

.home .roads {
    justify-content: center;
}

.home .cta-band {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
}

.home .cta-band--mark {
    grid-template-columns: 1fr auto;
    justify-items: stretch;
    text-align: start;
    gap: 1.8rem 2.2rem;
}

.cta-band__copy {
    display: grid;
    gap: 0.85rem;
    justify-items: start;
}

.cta-band--mark .display--wordmark {
    justify-content: flex-start;
    font-size: clamp(1.85rem, 4vw, 3.4rem);
    margin: 0;
    padding-block: 0;
}

.cta-band__text {
    margin: 0;
    max-width: 28rem;
    color: rgba(245, 242, 233, 0.9);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    font-weight: 600;
    line-height: 1.7;
}

.cta-band__qr {
    display: block;
    width: 9.6rem;
    height: 9.6rem;
    padding: 0.55rem;
    background: #fff;
    border-radius: 0.85rem;
}

.cta-band__qr img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Components */
.components-band {
    position: relative;
    overflow: hidden;
    color: var(--color-ink);
    min-height: 38rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    padding-block: clamp(3.2rem, 8vw, 6.5rem);
    padding-inline: 0;
}

.components-band__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    filter: brightness(1.04) saturate(0.92) sepia(0.12) contrast(0.98);
}

.components-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(232, 224, 207, 0.22), rgba(232, 224, 207, 0.78) 34%, rgba(232, 224, 207, 0.78) 66%, rgba(232, 224, 207, 0.22)),
        linear-gradient(180deg, rgba(245, 242, 233, 0.28) 0%, rgba(232, 224, 207, 0.84) 48%, rgba(232, 224, 207, 0.32) 100%);
    pointer-events: none;
}

.components-band__inner {
    position: relative;
    z-index: 1;
    width: min(100% - 2.5rem, var(--wrap-wide));
    margin-inline: auto;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: center;
    gap: clamp(1.5rem, 3.4vw, 3.4rem);
}

.home .components-band .components-band__intro,
.components-band__intro {
    display: grid;
    gap: 0.85rem;
    align-content: start;
    text-align: start;
    min-width: 0;
}

.components-band .section__kicker {
    color: var(--color-gold-deep);
    margin: 0;
    font-size: clamp(1.45rem, 2.2vw, 1.9rem);
    overflow-wrap: break-word;
}

.components-band .section__kicker::after {
    content: "";
    display: block;
    width: 3.4rem;
    height: 2px;
    margin-block-start: 0.7rem;
    background: var(--color-gold);
}

.components-band .section__text {
    color: #3a4138;
    max-width: 28rem;
    margin: 0;
    line-height: 1.85;
    text-wrap: pretty;
    font-weight: 700;
}

.component-track {
    display: grid;
    gap: 0.8rem;
    min-width: 0;
}

.component-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.35rem 1.15rem;
    min-height: 0;
    padding: 1.2rem 1.35rem 1.15rem;
    text-align: start;
    min-width: 0;
    background: rgba(251, 248, 241, 0.36);
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 0.9rem;
    box-shadow:
        0 0.65rem 1.6rem rgba(8, 30, 5, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(18px) saturate(1.35);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
    transition: background var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.component-card:hover {
    background: rgba(251, 248, 241, 0.5);
    border-color: rgba(186, 148, 54, 0.35);
    transform: none;
    box-shadow:
        0 0.9rem 1.8rem rgba(8, 30, 5, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.component-card__index {
    color: var(--color-gold);
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    line-height: 1.6;
}

.component-card__body {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.component-card h3 {
    font-size: clamp(1.05rem, 1.35vw, 1.28rem);
    line-height: 1.4;
    color: var(--color-green);
    margin: 0;
}

.component-card p {
    color: #3a4138;
    margin: 0;
    line-height: 1.7;
    font-size: 0.95rem;
}

@media (max-width: 992px) {
    .components-band {
        display: block;
        padding-inline: 1.25rem;
    }

    .components-band__inner {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.35rem;
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }
}

/* Split — image left, copy right */
.split {
    position: relative;
    display: grid;
    direction: ltr;
    grid-template-columns: minmax(0, 1.2fr) minmax(24rem, 0.82fr);
    min-height: min(34rem, 68vh);
    overflow: hidden;
    background: var(--color-green-black);
}

.split--reverse {
    grid-template-columns: minmax(0, 1.2fr) minmax(24rem, 0.82fr);
}

.split__media {
    position: relative;
    min-height: min(34rem, 68vh);
    overflow: hidden;
    background: var(--color-green-black);
}

.split__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 58%, rgba(12, 42, 8, 0.28));
    pointer-events: none;
}

.split__media img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
    object-position: 82% 40%;
    transform-origin: center center;
    animation: split-pan 26s ease-in-out infinite alternate;
    will-change: transform;
}

.split__panel {
    position: relative;
    z-index: 1;
    direction: rtl;
    width: auto;
    min-height: min(34rem, 68vh);
    background:
        radial-gradient(90% 70% at 0% 0%, rgba(186, 148, 54, 0.16), transparent 52%),
        linear-gradient(180deg, #1f6414 0%, #17550f 48%, #123b0a 100%);
    color: var(--color-white);
    padding: clamp(2rem, 4.5vw, 3.6rem) clamp(1.8rem, 4vw, 3.6rem);
    display: grid;
    align-content: center;
    align-items: start;
    gap: 0.2rem;
    box-shadow: -1.6rem 0 3.2rem rgba(8, 30, 5, 0.18);
}

.split__panel::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 3px;
    background: linear-gradient(180deg, transparent, var(--color-gold), transparent);
    pointer-events: none;
}

.split__panel::after {
    content: "";
    position: absolute;
    inset-inline-end: -3rem;
    top: -3rem;
    width: 16rem;
    height: 16rem;
    background: url("../img/mark.png") center / contain no-repeat;
    opacity: 0.08;
    pointer-events: none;
    animation: spin-slow 48s linear infinite;
}

.split__panel .section__title {
    max-width: 18ch;
    line-height: 1.35;
    font-size: clamp(1.4rem, 2.1vw, 2.05rem);
}

.split__panel .gold-rule {
    margin-block: 1.15rem 1.45rem;
    width: 4.4rem;
}

.gold-rule {
    width: 3.2rem;
    height: 1px;
    background: var(--color-gold);
    margin-block: 1.2rem;
    transform-origin: right center;
    animation: rule-grow 1.1s var(--ease) 0.2s both;
}

[dir="ltr"] .gold-rule {
    transform-origin: left center;
}

.split__panel .btn {
    margin-block-start: 1.7rem;
    width: fit-content;
    min-width: 9.5rem;
}

/* Stats */
.stats-band {
    position: relative;
    width: 100%;
    min-height: clamp(30rem, 68vh, 44rem);
    display: grid;
    align-items: center;
    overflow: hidden;
    color: var(--color-white);
    background: #123b0a;
}

.stats-band__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
    filter: brightness(0.86) saturate(0.85) contrast(1.02);
}

.stats-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(8, 30, 5, 0.14), rgba(8, 30, 5, 0.26) 55%, rgba(8, 30, 5, 0.38));
    pointer-events: none;
}

.stats-band__inner {
    position: relative;
    z-index: 1;
    width: min(100% - 2.5rem, var(--wrap));
    margin-inline: auto;
    padding-block: clamp(2.8rem, 6.2vw, 4.8rem);
    text-align: start;
}

.stats-band__title {
    margin: 0;
    color: var(--color-gold-soft);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    font-weight: 700;
    letter-spacing: var(--tracking);
}

.stats-band__text {
    margin: 0.85rem 0 2rem;
    max-width: 38rem;
    color: rgba(245, 242, 233, 0.88);
}

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

.stat {
    isolation: isolate;
    background: rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 0;
    box-shadow: none;
    border-radius: 1.15rem;
    padding: 1.8rem 1.1rem 1.4rem;
    min-height: 7.6rem;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    gap: 0.4rem;
    position: relative;
    overflow: hidden;
    opacity: 1;
    transform: none;
    transition: opacity 0.75s var(--ease), transform 0.75s var(--ease), background var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.js .stat.is-waiting {
    opacity: 0;
    transform: translateY(2.2rem);
}

.js .stat.is-visible {
    opacity: 1;
    transform: none;
}

.js .stat.is-visible:hover {
    transform: translateY(-8px);
}

.stat::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 46%);
    pointer-events: none;
}

.stat:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1.4rem 2.4rem rgba(8, 30, 5, 0.18);
}

.stat__value,
.stat__label {
    position: relative;
    z-index: 1;
}

.stat__value {
    font-size: clamp(1.65rem, 2.4vw, 2.35rem);
    font-weight: 700;
    color: var(--color-gold-soft);
    line-height: 1.2;
    text-shadow: 0 0 1.4rem rgba(186, 148, 54, 0.35);
}

.stat__label {
    color: rgba(245, 242, 233, 0.92);
    font-size: 0.95rem;
    font-weight: 500;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .stat {
        background: rgba(18, 59, 10, 0.38);
    }
}

/* Feature cards */
.cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.card {
    background: var(--color-white);
    border-radius: var(--radius);
    padding: 1.7rem 1.5rem;
    box-shadow: var(--shadow);
    border: 1px solid rgba(23, 26, 23, 0.04);
    transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}

.card:hover {
    transform: translateY(-8px);
    border-color: var(--color-line-strong);
    box-shadow: 0 1.8rem 3.2rem rgba(8, 30, 5, 0.16);
}

.icon-star {
    width: 1.7rem;
    height: 1.7rem;
    object-fit: contain;
    transition: transform 0.6s var(--ease);
}

.card:hover .icon-star {
    transform: rotate(20deg) scale(1.12);
}

.card--soft {
    background: var(--color-off-white);
    box-shadow: none;
}

.card h3 {
    font-size: var(--fs-h3);
    margin-block: 0.7rem 0.5rem;
    color: var(--color-green-dark);
}

.card p {
    color: var(--color-muted);
}

.icon-star {
    width: 1.7rem;
    height: 1.7rem;
    object-fit: contain;
}

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

.pill {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--color-off-white);
    border-radius: 999px;
    padding: 0.85rem 1.05rem;
    color: var(--color-green-dark);
    font-weight: 500;
    transition: transform 0.35s var(--ease), background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.pill:hover {
    transform: translateX(-6px);
    background: var(--color-white);
    box-shadow: var(--shadow);
}

.pill img {
    width: 1.1rem;
    height: 1.1rem;
}

/* Location */
.place {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(70% 48% at 100% 0%, rgba(186, 148, 54, 0.09), transparent 52%),
        linear-gradient(180deg, #0d2d08, #081e05 58%, #0d2d08);
    color: var(--color-off-white);
    padding-block: clamp(3rem, 7vw, 5.5rem) 4rem;
}

.place__glow {
    position: absolute;
    inset-inline-end: -8rem;
    top: 12%;
    width: 22rem;
    height: 22rem;
    background: url("../img/mark.png") center / contain no-repeat;
    opacity: 0.05;
    pointer-events: none;
}

.place__layout {
    display: grid;
    grid-template-columns: minmax(18rem, 0.36fr) minmax(0, 0.64fr);
    grid-template-areas:
        "copy map"
        "points points";
    column-gap: clamp(1.2rem, 2.5vw, 2.4rem);
    row-gap: 1.6rem;
    align-items: center;
    width: min(100% - 2.5rem, var(--wrap-wide));
    margin-inline: auto;
}

.place__copy {
    grid-area: copy;
    align-self: center;
}

.place__map {
    grid-area: map;
    margin: 0;
    position: relative;
}

.place__map::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, #081e05 0%, transparent 9%, transparent 91%, #081e05 100%),
        linear-gradient(180deg, #081e05 0%, transparent 10%, transparent 90%, #081e05 100%);
    pointer-events: none;
}

.place__map img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.place__eyebrow {
    color: var(--color-gold-soft);
    font-weight: 700;
    letter-spacing: var(--tracking);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    margin-block-end: 1rem;
}

.place__title {
    font-size: var(--fs-h2);
    line-height: 1.2;
    font-weight: 700;
    max-width: 10ch;
    color: var(--color-white);
    margin-block-end: 1.1rem;
}

.place__lead {
    color: rgba(245, 242, 233, 0.82);
    max-width: 36rem;
}

.place__support {
    margin-block-start: 1rem;
    margin-block-end: 0;
    max-width: 36rem;
    color: rgba(212, 181, 106, 0.92);
    font-weight: 600;
}

.place__points {
    grid-area: points;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    width: 100%;
    position: relative;
    z-index: 1;
}

.place__points article {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 8.5rem;
    padding: 1.35rem 1.5rem;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(245, 242, 233, 0.03) 55%, rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.85rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0.6rem 1.4rem rgba(8, 30, 5, 0.12);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    text-align: center;
}

.place__points article::before {
    content: "";
    position: absolute;
    inset-inline: 10%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
    pointer-events: none;
}

.place__points p {
    margin: 0;
    color: rgba(245, 242, 233, 0.92);
    line-height: 1.8;
    font-size: 0.98rem;
}

.location-grid {
    display: grid;
    direction: ltr;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 1.25rem;
    align-items: stretch;
}

.location-grid > div {
    direction: rtl;
}

.media-frame {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 28rem;
}

.media-frame img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.media-frame--static img {
    position: relative;
    height: auto;
}

.facts {
    display: grid;
    gap: 0.85rem;
}

.fact {
    background: var(--color-white);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.2rem;
    border-inline-start: 3px solid var(--color-gold);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.fact:hover {
    transform: translateX(-6px);
    box-shadow: var(--shadow);
}

.fact strong {
    display: block;
    color: var(--color-green);
    margin-block-end: 0.2rem;
}

.roads {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 1rem;
}

.roads span {
    border: 1px solid var(--color-line-strong);
    color: var(--color-green-dark);
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
}

/* Gallery */
.gallery {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: 16rem 16rem;
    gap: 0.75rem;
}

.gallery a,
.gallery figure {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
    margin: 0;
}

.gallery a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(8, 30, 5, 0.45) 100%);
    opacity: 0.35;
    transition: opacity 0.5s var(--ease);
    pointer-events: none;
}

.gallery a:hover::after {
    opacity: 0.7;
}

.gallery a:first-child,
.gallery figure:first-child {
    grid-row: 1 / span 2;
}

.gallery img {
    width: 100%;
    height: 100%;
    transition: transform 1.1s var(--ease-out);
}

.gallery a:hover img,
.gallery figure:hover img {
    transform: scale(1.06);
}

.gallery figcaption,
.gallery .gallery__cap {
    position: absolute;
    inset-inline: 0.8rem;
    bottom: 0.8rem;
    color: var(--color-white);
    font-size: 0.85rem;
    text-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.45);
}

/* Quote / vision */
.vision-block {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.4rem;
    align-items: start;
    background: var(--color-off-white);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 3vw, 2.4rem);
}

.vision-block__icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid var(--color-gold);
    display: grid;
    place-items: center;
    color: var(--color-gold-deep);
    font-size: 1.3rem;
}

.vision-block .section__text,
.split__panel > p {
    margin-block-start: 0.2rem;
}

.split__panel > p {
    max-width: 32rem;
    color: rgba(245, 242, 233, 0.9);
    font-size: clamp(0.98rem, 1.15vw, 1.08rem);
    line-height: 1.95;
}

.vision-block .section__text {
    margin-block-start: 1rem;
}

[data-modal-body] > img {
    width: 100%;
    max-height: 18rem;
    object-fit: cover;
}

[data-modal-body] .btn {
    margin-block-start: 1rem;
}

/* Tabs / accordion */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 1.5rem;
}

.tab {
    border: 1px solid var(--color-line);
    background: transparent;
    color: var(--color-green-dark);
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    font-weight: 600;
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.tab:hover {
    transform: translateY(-2px);
    border-color: var(--color-gold);
}

.tab[aria-selected="true"] {
    background: var(--color-green);
    color: var(--color-white);
    border-color: var(--color-green);
}

.tab-panel[hidden] {
    display: none;
}

html:not(.js) .tab-panel[hidden],
html:not(.js) .acc-panel {
    display: block;
}

html:not(.js) .tabs,
html:not(.js) .filters {
    display: none;
}

.accordion {
    display: grid;
    gap: 0.65rem;
}

.acc-item {
    background: var(--color-white);
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid rgba(23, 26, 23, 0.06);
}

.acc-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    text-align: start;
    padding: 1.05rem 1.2rem;
    font-weight: 600;
    color: var(--color-green-dark);
}

.acc-btn::after {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-inline-end: 2px solid var(--color-gold);
    border-block-end: 2px solid var(--color-gold);
    transform: rotate(45deg);
    transition: transform var(--duration) var(--ease);
    flex: 0 0 auto;
}

.acc-btn[aria-expanded="true"]::after {
    transform: rotate(225deg);
}

.acc-panel {
    display: none;
    padding: 0 1.2rem 1.15rem;
    color: var(--color-muted);
}

.acc-panel.is-open {
    display: block;
}

/* Filters / units */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 1.5rem;
}

.filter {
    min-height: 2.5rem;
    padding-inline: 1rem;
    border-radius: 999px;
    border: 1px solid var(--color-line);
    background: var(--color-white);
    color: var(--color-green-dark);
    font-weight: 600;
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.filter:hover {
    transform: translateY(-2px);
    border-color: var(--color-gold);
}

.filter.is-active {
    background: var(--color-green);
    color: var(--color-white);
    border-color: var(--color-green);
}

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

.unit-card {
    background: var(--color-white);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(23, 26, 23, 0.05);
    display: grid;
    grid-template-rows: 11rem 1fr;
    transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}

.unit-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow);
    border-color: var(--color-line-strong);
}

.unit-card img {
    width: 100%;
    height: 100%;
    transition: transform 0.9s var(--ease-out);
}

.unit-card:hover img {
    transform: scale(1.08);
}

.unit-card__body {
    padding: 1.15rem 1.2rem 1.3rem;
    display: grid;
    gap: 0.45rem;
}

.unit-card__meta {
    color: var(--color-gold-deep);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.unit-card h3 {
    font-size: 1.15rem;
    color: var(--color-green-dark);
}

.unit-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.unit-card__body .btn + .btn,
.unit-card__body .btn + a {
    margin-block-start: 0.45rem;
}

html:not(.js) [data-unit-open] {
    display: none;
}

.js .unit-card .btn--solid {
    display: none;
}

/* Form */
.contact-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 1.5rem;
}

.contact-card {
    background: var(--color-green);
    color: var(--color-white);
    border-radius: var(--radius);
    padding: 2rem 1.6rem;
    display: grid;
    align-content: start;
    gap: 1.2rem;
}

.contact-card a {
    color: var(--color-gold-soft);
    font-size: 1.6rem;
    font-weight: 700;
}

.form {
    background: var(--color-white);
    border-radius: var(--radius);
    padding: 1.6rem;
    display: grid;
    gap: 0.9rem;
    box-shadow: var(--shadow);
}

.form-row {
    display: grid;
    gap: 0.35rem;
}

.form-row--2 {
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}

.form label {
    font-weight: 600;
    color: var(--color-green-dark);
    font-size: 0.92rem;
}

.form input,
.form select,
.form textarea {
    width: 100%;
    border: 1px solid var(--color-beige);
    background: var(--color-mist);
    border-radius: 0.7rem;
    padding: 0.8rem 0.95rem;
    transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}

.form textarea {
    min-height: 8rem;
    resize: vertical;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
    outline: none;
    border-color: var(--color-gold);
    background: var(--color-white);
}

.form .is-invalid {
    border-color: #b42318;
}

.field-error {
    color: #b42318;
    font-size: 0.8rem;
    min-height: 1.1em;
}

.form-success {
    display: none;
    background: var(--color-off-white);
    border-inline-start: 3px solid var(--color-green);
    padding: 0.9rem 1rem;
    border-radius: 0.6rem;
    color: var(--color-green-dark);
}

.form-success.is-visible {
    display: block;
}

/* Modal */
.modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    place-items: center;
    padding: 1.2rem;
}

.modal.is-open {
    display: grid;
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 30, 5, 0.72);
}

.modal__dialog {
    position: relative;
    z-index: 1;
    width: min(52rem, 100%);
    background: var(--color-white);
    border-radius: var(--radius);
    overflow: hidden;
    max-height: 90vh;
    overflow-y: auto;
}

.modal__close {
    position: absolute;
    inset-inline-end: 0.8rem;
    top: 0.8rem;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: rgba(8, 30, 5, 0.55);
    color: var(--color-white);
    z-index: 2;
}

.lightbox-img {
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
    background: var(--color-green-black);
}

.modal__body {
    padding: 1.3rem 1.4rem 1.6rem;
}

/* Footer */
.site-footer {
    background: var(--color-green-black);
    color: rgba(245, 242, 233, 0.82);
    padding-block: 3.4rem 1.6rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 2rem;
    margin-block-end: 2.4rem;
}

.site-footer h2,
.site-footer h3 {
    color: var(--color-white);
    font-size: 1.05rem;
    margin-block-end: 0.9rem;
}

.site-footer a:hover {
    color: var(--color-gold-soft);
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--color-white);
    font-weight: 700;
    margin-block-end: 0.8rem;
}

.footer-brand img {
    width: 2.2rem;
    height: 2.2rem;
}

.legal {
    border-top: 1px solid rgba(186, 148, 54, 0.18);
    padding-block-start: 1.1rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.82rem;
    color: rgba(245, 242, 233, 0.55);
}

/* CTA band */
.cta-band {
    display: grid;
    grid-template-columns: 1.2fr auto;
    gap: 1.5rem;
    align-items: center;
}

.cta-band--center {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 1.15rem;
}

.cta-band--center .section__title,
.cta-band--center .section__text {
    margin-inline: auto;
}

.cta-band--center .section__title {
    max-width: none;
}

.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
}

.cta-band--center .cta-band__actions {
    justify-content: center;
}

.section--cta {
    padding-block: clamp(2.4rem, 5vw, 3.8rem);
}

/* Reveal helpers — visible by default if JS/GSAP fail */
.reveal,
.split-line {
    opacity: 1;
    transform: none;
}

.js .reveal {
    opacity: 0;
    transform: translateY(28px);
}

.line-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-block: 0.2em;
    margin-block: -0.2em;
}

.line-inner {
    display: inline-block;
}

.js .hero__media img {
    transform: scale(1.12);
}

body.is-nav-open {
    overflow: hidden;
}

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

.list-check {
    display: grid;
    gap: 0.7rem;
    margin-block-start: 1.2rem;
}

.list-check li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.7rem;
    align-items: start;
}

.list-check li::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    margin-block-start: 0.55rem;
    background: var(--color-gold);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

main {
    animation: page-in 0.85s var(--ease) both;
}

.roads span {
    transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}

.roads span:hover {
    background: var(--color-green);
    color: var(--color-white);
    transform: translateY(-2px);
}

.site-footer a {
    transition: color var(--duration) var(--ease);
}

.contact-card {
    transition: transform 0.45s var(--ease);
}

.contact-card:hover {
    transform: translateY(-4px);
}

.form input,
.form select,
.form textarea {
    transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.form input:focus,
.form select:focus,
.form textarea:focus {
    box-shadow: 0 0 0 4px rgba(186, 148, 54, 0.18);
}

@keyframes page-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes kenburns {
    from { transform: scale(1.12); }
    to { transform: scale(1); }
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rule-grow {
    from { transform: scaleX(0); opacity: 0; }
    to { transform: scaleX(1); opacity: 1; }
}

@keyframes split-pan {
    from { transform: scale(1.14) translateX(-6%); }
    to { transform: scale(1.14) translateX(6%); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
    .js .reveal,
    .js .hero__media img,
    .js .hero__media video {
        opacity: 1;
        transform: none;
    }

    .hero__video {
        display: none;
    }
}