/* ==========================================
   Dar Arabia — About Page
   ========================================== */

.dar-about-page {
    min-height: 720px;
    overflow: hidden;
    background: #f7f6f9;
    color: #261f2e;
}

.dar-about-container {
    width: min(1180px, calc(100% - 36px));
    margin-inline: auto;
}

/* Hero */

.dar-about-hero {
    position: relative;
    overflow: hidden;
    padding: 68px 0 88px;
    background:
        radial-gradient(
            circle at 88% 16%,
            rgba(217, 90, 43, 0.3),
            transparent 29%
        ),
        radial-gradient(
            circle at 8% 90%,
            rgba(255, 255, 255, 0.09),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #241169 0%,
            #351d80 54%,
            #1b0e4b 100%
        );
    color: #ffffff;
}

.dar-about-hero::before {
    content: "";
    position: absolute;
    inset-inline-end: -150px;
    bottom: -240px;
    width: 460px;
    height: 460px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
}

.dar-about-hero::after {
    content: "";
    position: absolute;
    inset-inline-start: -105px;
    top: -120px;
    width: 240px;
    height: 240px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.dar-about-breadcrumb {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 26px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}

.dar-about-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.dar-about-breadcrumb a:hover {
    color: #ffffff;
}

.dar-about-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(330px, 0.72fr);
    gap: 52px;
    align-items: center;
}

.dar-about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 17px;
    padding: 7px 13px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 12px;
    font-weight: 800;
}

.dar-about-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef804a;
    box-shadow: 0 0 0 5px rgba(239, 128, 74, 0.15);
}

.dar-about-hero h1 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(36px, 5vw, 58px);
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -1.3px;
}

.dar-about-hero-description {
    max-width: 690px;
    margin: 19px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
    line-height: 2;
}

.dar-about-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 27px;
}

.dar-about-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 47px;
    padding: 0 21px;
    border-radius: 13px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 850;
    transition: 0.2s ease;
}

.dar-about-button-primary {
    background: #d95a2b;
    color: #ffffff;
}

.dar-about-button-primary:hover {
    background: #ee7441;
    transform: translateY(-2px);
}

.dar-about-button-secondary {
    border: 1px solid rgba(255, 255, 255, 0.23);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.dar-about-button-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

.dar-about-hero-card {
    position: relative;
    min-height: 385px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 26px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.13),
            rgba(255, 255, 255, 0.055)
        );
    box-shadow: 0 28px 60px rgba(12, 7, 38, 0.27);
    backdrop-filter: blur(12px);
}

.dar-about-building {
    position: absolute;
    inset-inline-start: 50%;
    bottom: 0;
    width: 72%;
    height: 79%;
    transform: translateX(-50%);
    border-radius: 18px 18px 0 0;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.18) 0 14px,
            transparent 14px 31px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.12) 0 12px,
            transparent 12px 31px
        ),
        rgba(255, 255, 255, 0.12);
}

.dar-about-building::before,
.dar-about-building::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 28%;
    height: 65%;
    background: rgba(255, 255, 255, 0.1);
}

.dar-about-building::before {
    inset-inline-start: -25%;
    border-radius: 14px 14px 0 0;
}

.dar-about-building::after {
    inset-inline-end: -25%;
    height: 48%;
    border-radius: 14px 14px 0 0;
}

.dar-about-hero-card-label {
    position: absolute;
    inset-inline-start: 22px;
    top: 22px;
    z-index: 2;
    max-width: 230px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 14px;
    background: rgba(31, 15, 82, 0.38);
    color: rgba(255, 255, 255, 0.86);
    font-size: 12px;
    line-height: 1.7;
}

/* Shared sections */

.dar-about-section {
    padding: 74px 0;
}

.dar-about-section-white {
    background: #ffffff;
}

.dar-about-section-heading {
    max-width: 750px;
    margin: 0 auto 39px;
    text-align: center;
}

.dar-about-section-label {
    display: inline-block;
    margin-bottom: 10px;
    color: #d95a2b;
    font-size: 11px;
    font-weight: 900;
}

.dar-about-section-heading h2 {
    margin: 0;
    color: #2e2151;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.4;
    font-weight: 900;
}

.dar-about-section-heading p {
    margin: 12px 0 0;
    color: #77707e;
    font-size: 13px;
    line-height: 1.95;
}

/* Story */

.dar-about-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 50px;
    align-items: center;
}

.dar-about-story-visual {
    position: relative;
    min-height: 470px;
    overflow: hidden;
    border-radius: 25px;
    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(239, 128, 74, 0.6),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #25126b,
            #5130a2
        );
    box-shadow: 0 25px 55px rgba(36, 18, 105, 0.18);
}

.dar-about-story-visual::before {
    content: "";
    position: absolute;
    inset: 32px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 19px;
}

.dar-about-story-shape {
    position: absolute;
    inset-inline-start: 50%;
    bottom: -1px;
    width: 64%;
    height: 77%;
    transform: translateX(-50%);
    border-radius: 17px 17px 0 0;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.17) 0 13px,
            transparent 13px 29px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.11) 0 11px,
            transparent 11px 29px
        ),
        rgba(255, 255, 255, 0.12);
}

.dar-about-story-content h2 {
    margin: 0;
    color: #2f2252;
    font-size: clamp(29px, 4vw, 41px);
    line-height: 1.42;
    font-weight: 900;
}

.dar-about-story-content > p {
    margin: 15px 0 0;
    color: #746d7b;
    font-size: 13px;
    line-height: 2.05;
}

.dar-about-story-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 25px;
}

.dar-about-story-point {
    padding: 16px;
    border: 1px solid #e9e5ed;
    border-radius: 15px;
    background: #faf9fb;
}

.dar-about-story-point strong {
    display: block;
    margin-bottom: 5px;
    color: #35275c;
    font-size: 13px;
    font-weight: 900;
}

.dar-about-story-point span {
    display: block;
    color: #817989;
    font-size: 11px;
    line-height: 1.7;
}

/* Vision, mission and values */

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

.dar-about-principle-card {
    position: relative;
    overflow: hidden;
    padding: 26px;
    border: 1px solid #e9e5ed;
    border-radius: 21px;
    background: #ffffff;
    box-shadow: 0 12px 34px rgba(33, 22, 63, 0.06);
    transition: 0.25s ease;
}

.dar-about-principle-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(33, 22, 63, 0.11);
}

.dar-about-principle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 51px;
    height: 51px;
    margin-bottom: 18px;
    border-radius: 15px;
    background:
        linear-gradient(
            145deg,
            #301873,
            #4a2b98
        );
    color: #ffffff;
    font-size: 21px;
    font-weight: 900;
    box-shadow: 0 10px 23px rgba(47, 23, 111, 0.18);
}

.dar-about-principle-card h3 {
    margin: 0;
    color: #302352;
    font-size: 18px;
    font-weight: 900;
}

.dar-about-principle-card p {
    margin: 10px 0 0;
    color: #77707e;
    font-size: 12px;
    line-height: 1.9;
}

/* Values */

.dar-about-values-section {
    background:
        linear-gradient(
            135deg,
            #29166b,
            #3d2384
        );
    color: #ffffff;
}

.dar-about-values-section
.dar-about-section-label {
    color: #f39566;
}

.dar-about-values-section
.dar-about-section-heading h2 {
    color: #ffffff;
}

.dar-about-values-section
.dar-about-section-heading p {
    color: rgba(255, 255, 255, 0.7);
}

.dar-about-values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.dar-about-value-card {
    padding: 22px 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.07);
}

.dar-about-value-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
    border-radius: 11px;
    background: #d95a2b;
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
}

.dar-about-value-card h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 900;
}

.dar-about-value-card p {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 11px;
    line-height: 1.75;
}

/* How we work */

.dar-about-work-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.72fr);
    gap: 45px;
    align-items: center;
}

.dar-about-work-content h2 {
    margin: 0;
    color: #2f2252;
    font-size: clamp(29px, 4vw, 40px);
    line-height: 1.42;
    font-weight: 900;
}

.dar-about-work-content > p {
    margin: 14px 0 24px;
    color: #756e7c;
    font-size: 13px;
    line-height: 2;
}

.dar-about-work-list {
    display: grid;
    gap: 11px;
}

.dar-about-work-item {
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr);
    gap: 13px;
    padding: 14px;
    border: 1px solid #e9e5ed;
    border-radius: 15px;
    background: #ffffff;
}

.dar-about-work-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border-radius: 13px;
    background: rgba(217, 90, 43, 0.11);
    color: #d95a2b;
    font-size: 12px;
    font-weight: 900;
}

.dar-about-work-item h3 {
    margin: 0;
    color: #372a56;
    font-size: 13px;
    font-weight: 900;
}

.dar-about-work-item p {
    margin: 5px 0 0;
    color: #817988;
    font-size: 11px;
    line-height: 1.7;
}

.dar-about-work-panel {
    padding: 28px;
    border: 1px solid #e7e3eb;
    border-radius: 23px;
    background:
        radial-gradient(
            circle at 86% 13%,
            rgba(217, 90, 43, 0.18),
            transparent 31%
        ),
        #ffffff;
    box-shadow: 0 18px 43px rgba(35, 22, 67, 0.09);
}

.dar-about-work-panel h3 {
    margin: 0 0 18px;
    color: #302352;
    font-size: 18px;
    font-weight: 900;
}

.dar-about-commitment {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #eeeaf1;
    color: #655d6c;
    font-size: 12px;
    line-height: 1.7;
}

.dar-about-commitment:last-child {
    border-bottom: 0;
}

.dar-about-commitment::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: #301873;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
}

/* CTA */

.dar-about-cta-wrap {
    padding: 0 0 74px;
}

.dar-about-cta {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 30px;
    align-items: center;
    padding: 38px;
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 91% 16%,
            rgba(217, 90, 43, 0.47),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #28146e,
            #40228a
        );
    color: #ffffff;
    box-shadow: 0 21px 49px rgba(37, 18, 107, 0.18);
}

.dar-about-cta h2 {
    margin: 0;
    font-size: 27px;
    line-height: 1.45;
    font-weight: 900;
}

.dar-about-cta p {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    line-height: 1.8;
}

.dar-about-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

/* Reveal */

.dar-about-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}

.dar-about-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */

@media (max-width: 1020px) {
    .dar-about-hero-grid,
    .dar-about-story-grid,
    .dar-about-work-grid {
        grid-template-columns: 1fr;
    }

    .dar-about-hero-card {
        max-width: 650px;
    }

    .dar-about-story-visual {
        min-height: 370px;
    }

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

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

@media (max-width: 720px) {
    .dar-about-container {
        width: min(100% - 24px, 1180px);
    }

    .dar-about-hero {
        padding: 46px 0 58px;
    }

    .dar-about-hero h1 {
        font-size: 35px;
    }

    .dar-about-section {
        padding: 53px 0;
    }

    .dar-about-story-points,
    .dar-about-principles,
    .dar-about-values-grid {
        grid-template-columns: 1fr;
    }

    .dar-about-story-visual {
        min-height: 290px;
    }

    .dar-about-cta {
        grid-template-columns: 1fr;
        padding: 27px 22px;
    }
}

@media (max-width: 460px) {
    .dar-about-hero-actions,
    .dar-about-cta-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .dar-about-button {
        width: 100%;
    }

    .dar-about-hero-card {
        min-height: 300px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dar-about-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}