/* ============================================================================
   RUMI CONSULTANCY - MAIN STYLESHEET

   Design Philosophy: Rumi-inspired editorial calm with a dark navy field,
   luminous gold accents, geometric cultural texture, and carefully centered
   reading paths. The Home page styles below are intentionally isolated with
   `home-*` classes so the rebuilt landing page does not disturb the completed
   inner pages.
   ============================================================================ */

/* ============================================================================
   RESET & BASE STYLES
   ============================================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #19233e;
    color: #ffffff;
    line-height: 1.6;
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

/* ============================================================================
   DECORATIVE PATTERN SYSTEM - CSS VARIABLE MAP

   This section controls every decorative background pattern on every page.
   You can tune each pattern without touching the HTML.

   HOW TO EDIT A PATTERN
   - X position:  --pattern-[page]-[number]-x
   - Y position:  --pattern-[page]-[number]-y
   - Width:       --pattern-[page]-[number]-width
   - Height:      --pattern-[page]-[number]-height
   - Rotation:    --pattern-[page]-[number]-rotate
   - Opacity:     --pattern-[page]-[number]-opacity
   - Visibility:  --pattern-[page]-[number]-display

   PAGE NAMES USED BELOW
   - home-pattern-01 / 02 / 03
   - services-pattern-01 / 02 / 03
   - clients-pattern-01 / 02 / 03
   - contact-pattern-01 / 02 / 03

   POSITIONING NOTES
   - X and Y are measured from the top-left of the page shell.
   - You may use px values, percentages, or CSS calc() values.
   - To place a 500px-wide pattern partly off the right edge, use:
     calc(100% - 780px), calc(100% - 785px), etc.
   - To hide a pattern at a breakpoint, set display to none or opacity to 0.
   ============================================================================ */

.pattern-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.pattern-item {
    position: absolute;
    left: var(--pattern-x, 0px);
    top: var(--pattern-y, 0px);
    width: var(--pattern-width, 500px);
    height: var(--pattern-height, 963px);
    opacity: var(--pattern-opacity, 0.24);
    display: var(--pattern-display, block);
    transform: translate(var(--pattern-translate-x, 0px), var(--pattern-translate-y, 0px)) rotate(var(--pattern-rotate, 0deg));
    transform-origin: center center;
}

.pattern-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* HOME PAGE PATTERN VARIABLE MAP - DESKTOP */
.home-pattern-01 {
    --pattern-x: -230px;
    --pattern-y: 301px;
    --pattern-width: 500px;
    --pattern-height: 963px;
    --pattern-rotate: 0deg;
    --pattern-opacity: 0.75;
    --pattern-display: block;
}

.home-pattern-02 {
    --pattern-x: calc(100% - 200px);
    --pattern-y: -670px;
    --pattern-width: 500px;
    --pattern-height: 963px;
    --pattern-rotate: 15deg;
    --pattern-opacity: 0.75;
    --pattern-display: block;
}

.home-pattern-03 {
    --pattern-x: calc(100% - 280px);
    --pattern-y: calc(100% - 820px);
    --pattern-width: 500px;
    --pattern-height: 963px;
    --pattern-rotate: 15deg;
    --pattern-opacity: 0.75;
    --pattern-display: block;
}

/* SERVICES PAGE PATTERN VARIABLE MAP - DESKTOP */
.services-pattern-01 {
    --pattern-x: -258px;
    --pattern-y: 200px;
    --pattern-width: 500px;
    --pattern-height: 963px;
    --pattern-rotate: 15deg;
    --pattern-opacity: 0.75;
    --pattern-display: block;
}

.services-pattern-02 {
    --pattern-x: calc(100% - 170px);
    --pattern-y: -320px;
    --pattern-width: 500px;
    --pattern-height: 963px;
    --pattern-rotate: 15deg;
    --pattern-opacity: 0.75;
    --pattern-display: block;
}

.services-pattern-03 {
    --pattern-x: -150px;
    --pattern-y: calc(100% - 1250px);
    --pattern-width: 500px;
    --pattern-height: 963px;
    --pattern-rotate: -15deg;
    --pattern-opacity: 0.75;
    --pattern-display: block;
}

/* CLIENTS PAGE PATTERN VARIABLE MAP - DESKTOP */
.clients-pattern-01 {
    --pattern-x: -210px;
    --pattern-y: -17px;
    --pattern-width: 500px;
    --pattern-height: 963px;
    --pattern-rotate: 15deg;
    --pattern-opacity: 0.75;
    --pattern-display: block;
}

.clients-pattern-02 {
    --pattern-x: -333px;
    --pattern-y: 368px;
    --pattern-width: 500px;
    --pattern-height: 963px;
    --pattern-rotate: -15deg;
    --pattern-opacity: 0.75;
    --pattern-display: none;
}

.clients-pattern-03 {
    --pattern-x: calc(100% - 100px);
    --pattern-y: 257px;
    --pattern-width: 500px;
    --pattern-height: 963px;
    --pattern-rotate: -54deg;
    --pattern-opacity: 0.75;
    --pattern-display: block;
}

/* CONTACT PAGE PATTERN VARIABLE MAP - DESKTOP */
.contact-pattern-01 {
    --pattern-x: -230px;
    --pattern-y: 100px;
    --pattern-width: 500px;
    --pattern-height: 963px;
    --pattern-rotate: 13deg;
    --pattern-opacity: 0.75;
    --pattern-display: block;
}

.contact-pattern-02 {
    --pattern-x: calc(100% - 300px);
    --pattern-y: -500px;
    --pattern-width: 500px;
    --pattern-height: 963px;
    --pattern-rotate: 15deg;
    --pattern-opacity: 0.75;
    --pattern-display: block;
}

.contact-pattern-03 {
    --pattern-x: -260px;
    --pattern-y: calc(100% - 705px);
    --pattern-width: 500px;
    --pattern-height: 963px;
    --pattern-rotate: -13deg;
    --pattern-opacity: 0.24;
    --pattern-display: none;
}

/* PATTERN VARIABLE MAP - TABLET */
@media (min-width: 403px) and (max-width: 1280px) {
    .home-pattern-01 {
        --pattern-x: -300px;
        --pattern-y: 150px;
        --pattern-rotate: 15deg;
    }

    .home-pattern-02 {
        --pattern-x: calc(100% - 200px);
        --pattern-y: -600px;
    }

    .home-pattern-03 {
        --pattern-x: calc(100% - 300px);
        --pattern-y: calc(100% - 350px);
        --pattern-rotate: 15deg;
    }

    .services-pattern-01 {
        --pattern-x: -210px;
        --pattern-y: -340px;
        --pattern-rotate: 15deg;
    }

    .services-pattern-02 {
        --pattern-x: calc(100% - 180px);
        --pattern-y: -650px;
    }

    .services-pattern-03 {
        --pattern-x: -196px;
        --pattern-y: calc(100% - 1122px);
        --pattern-display: none;
    }

    .clients-pattern-01 {
        --pattern-x: -300px;
        --pattern-y: 200px;
    }

    .clients-pattern-02 {
        --pattern-display: none;
    }

    .clients-pattern-03 {
        --pattern-x: calc(100% - 300px);
        --pattern-y: -660px;
        --pattern-rotate: 0deg
    }

    .contact-pattern-01 {
        --pattern-x: -327px;
        --pattern-y: 200px;
    }

    .contact-pattern-02 {
        --pattern-x: calc(100% - 200px);
        --pattern-y: -680px;
    }

    .contact-pattern-03 {
        --pattern-display: none;
    }
}

/* PATTERN VARIABLE MAP - MOBILE
   -----------------------------------------------------------------------------
   Mobile patterns are explicit here so each one is easy to find and tune.
   They are hidden by default to protect the small-screen content layout.

   To show a mobile pattern:
   1. Change --pattern-display from none to block.
   2. Increase --pattern-opacity from 0 to a subtle value such as 0.12 or 0.18.
   3. Adjust --pattern-x and --pattern-y until the pattern matches the mobile design.
   ----------------------------------------------------------------------------- */
@media (max-width: 402px) {
    /* HOME PAGE MOBILE PATTERNS */
    .home-pattern-01 {
        --pattern-x: 280px;
        --pattern-y: -800px;
        --pattern-width: 500px;
        --pattern-height: 1000px;
        --pattern-rotate: 15deg;
        --pattern-opacity: 0.75;
        --pattern-display: block;
    }

    .home-pattern-02 {
        --pattern-x: calc(100% - 160px);
        --pattern-y: 0px;
        --pattern-width: 320px;
        --pattern-height: 616px;
        --pattern-rotate: 15deg;
        --pattern-opacity: 0;
        --pattern-display: none;
    }

    .home-pattern-03 {
        --pattern-x: calc(100% - 190px);
        --pattern-y: calc(100% - 420px);
        --pattern-width: 320px;
        --pattern-height: 616px;
        --pattern-rotate: 15deg;
        --pattern-opacity: 0;
        --pattern-display: none;
    }

    /* SERVICES PAGE MOBILE PATTERNS */
    .services-pattern-01 {
        --pattern-x: -180px;
        --pattern-y: 80px;
        --pattern-width: 320px;
        --pattern-height: 616px;
        --pattern-rotate: 15deg;
        --pattern-opacity: 0;
        --pattern-display: none;
    }

    .services-pattern-02 {
        --pattern-x: calc(100% - 155px);
        --pattern-y: -290px;
        --pattern-width: 320px;
        --pattern-height: 616px;
        --pattern-rotate: 15deg;
        --pattern-opacity: 0;
        --pattern-display: none;
    }

    .services-pattern-03 {
        --pattern-x: -170px;
        --pattern-y: calc(100% - 520px);
        --pattern-width: 320px;
        --pattern-height: 616px;
        --pattern-rotate: -15deg;
        --pattern-opacity: 0;
        --pattern-display: none;
    }

    /* CLIENTS PAGE MOBILE PATTERNS */
    .clients-pattern-01 {
        --pattern-x: -185px;
        --pattern-y: 80px;
        --pattern-width: 320px;
        --pattern-height: 616px;
        --pattern-rotate: 15deg;
        --pattern-opacity: 0;
        --pattern-display: none;
    }

    .clients-pattern-02 {
        --pattern-x: -190px;
        --pattern-y: 320px;
        --pattern-width: 320px;
        --pattern-height: 616px;
        --pattern-rotate: -15deg;
        --pattern-opacity: 0;
        --pattern-display: none;
    }

    .clients-pattern-03 {
        --pattern-x: calc(100% - 165px);
        --pattern-y: -280px;
        --pattern-width: 320px;
        --pattern-height: 616px;
        --pattern-rotate: -24deg;
        --pattern-opacity: 0;
        --pattern-display: none;
    }

    /* CONTACT PAGE MOBILE PATTERNS */
    .contact-pattern-01 {
        --pattern-x: -185px;
        --pattern-y: 90px;
        --pattern-width: 320px;
        --pattern-height: 616px;
        --pattern-rotate: 13deg;
        --pattern-opacity: 0;
        --pattern-display: none;
    }

    .contact-pattern-02 {
        --pattern-x: calc(100% - 170px);
        --pattern-y: -300px;
        --pattern-width: 320px;
        --pattern-height: 616px;
        --pattern-rotate: 15deg;
        --pattern-opacity: 0;
        --pattern-display: none;
    }

    .contact-pattern-03 {
        --pattern-x: -100px;
        --pattern-y: calc(100% - 150px);
        --pattern-width: 450px;
        --pattern-height: 900px;
        --pattern-rotate: 15deg;
        --pattern-opacity: 1;
        --pattern-display: block;
    }
}

/* ============================================================================
   HOME PAGE

   Design reminder for this file section: every Home page choice should reinforce
   the approved dark navy and gold Rumi identity used on the rebuilt inner pages.
   The page should feel ceremonial, legible, and measured rather than generic.
   ============================================================================ */

.home-page {
    min-width: 320px;
    background: #19233e;
}

.home-page-shell {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 8%, rgba(244, 157, 34, 0.08), transparent 26%),
        linear-gradient(180deg, #19233e 0%, #17213b 100%);
    color: #ffffff;
}

.home-page-content {
    position: relative;
    z-index: 5;
    width: min(760px, calc(100% - 48px));
    margin: 0 auto;
    padding: 112px 0 58px;
    text-align: center;
}

.home-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-decoration: none;
    transition: transform 220ms ease, opacity 220ms ease;
}

.home-logo-link:hover,
.home-logo-link:focus-visible {
    opacity: 0.9;
    transform: translateY(-2px);
}

.home-logo {
    display: block;
    width: 188px;
    height: auto;
    opacity: 0.98;
}

.home-quote {
    display: flex;
    justify-content: center;
    width: min(700px, 100%);
    margin: 82px auto 0;
}

.home-quote img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0.98;
}

.home-introduction {
    margin: 84px auto 0;
}

.home-lede {
    width: min(745px, 100%);
    margin: 0 auto;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 25px;
    line-height: 150%;
    text-align: center;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.76);
}

.home-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 224px;
    height: 13px;
    margin: 58px auto;
}

.home-separator img {
    display: block;
    width: 224px;
    height: 13px;
    object-fit: contain;
}

.home-story {
    width: min(295px, 100%);
    margin: 0 auto;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 150%;
    text-align: center;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.74);
}

.home-lede span,
.home-story span {
    display: inline;
}

.home-navigation {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 45px;
    margin: 112px auto 0;
}

.home-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 116px;
    min-height: 126px;
    color: #ffffff;
    text-decoration: none;
}

.home-nav-item:hover img,
.home-nav-item:focus-visible img {
    transform: scale(0.85);
}

.home-nav-item img {
    display: block;
    width: 86px;
    height: 86px;
    object-fit: contain;
    margin-bottom: 60px;
    transition: transform 220ms ease;
}

.home-nav-item span {
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 22px;
    line-height: 123%;
    text-align: center;
    letter-spacing: -0.02em;
    color: #ffffff;
    white-space: nowrap;
}

.home-nav-divider {
    width: 1px;
    height: 80px;
    margin-top: 0;
    background: #f49d22;
    opacity: 0.9;
}

.home-copyright {
    margin-top: 82px;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 123%;
    text-align: center;
    letter-spacing: -0.02em;
    color: #ffffff;
    opacity: 0.25;
}

.home-copyright p {
    margin: 0;
}

/* ============================================================================
   HOME RESPONSIVE DESIGN - TABLET
   ============================================================================ */

@media (min-width: 403px) and (max-width: 1280px) {
    .home-page-shell {
        min-height: 100vh;
    }

    .home-page-content {
        width: min(690px, calc(100% - 48px));
        padding-top: 96px;
        padding-bottom: 50px;
    }

    .home-logo {
        width: 172px;
    }

    .home-quote {
        width: min(620px, 100%);
        margin-top: 76px;
    }

    .home-introduction {
        margin-top: 78px;
    }

    .home-lede {
        width: min(650px, 100%);
        font-size: 23px;
    }

    .home-story {
        width: min(295px, 100%);
        font-size: 19px;
    }

    .home-navigation {
        gap: 42px;
        margin-top: 100px;
    }

    .home-nav-item img {
        margin-bottom: 60px;
    }

    .home-nav-item span {
        font-size: 20px;
    }
}

/* ============================================================================
   HOME RESPONSIVE DESIGN - MOBILE
   ============================================================================ */

@media (max-width: 402px) {
    .home-page-shell {
        min-height: 100vh;
    }

    .home-page-content {
        width: 100%;
        padding: 94px 0 60px;
    }

    .home-logo {
        width: 93px;
        height: 130px;
        object-fit: contain;
    }

    .home-quote {
        width: 280px;
        height: 50px;
        margin-top: 44px;
        align-items: center;
    }

    .home-quote img {
        width: 280px;
        height: 50px;
        object-fit: contain;
    }

    .home-introduction {
        margin-top: 46px;
    }

    .home-lede {
        width: min(285px, calc(100vw - 56px));
        min-height: 78px;
        font-size: 13px;
        line-height: 150%;
        letter-spacing: -0.02em;
        color: rgba(255, 255, 255, 0.76);
        overflow-wrap: break-word;
        white-space: normal;
    }

    .home-lede span {
        display: block;
    }

    .home-separator {
        width: 144px;
        height: 8px;
        margin: 24px auto;
    }

    .home-separator img {
        width: 144px;
        height: 8px;
    }

    .home-story {
        width: min(274px, calc(100vw - 64px));
        font-size: 13px;
        line-height: 150%;
        letter-spacing: -0.02em;
        color: rgba(255, 255, 255, 0.74);
        overflow-wrap: break-word;
        white-space: normal;
    }

    .home-story span {
        display: block;
    }

    .home-navigation {
        width: 290px;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 52px;
    }

    .home-nav-item {
        width: 82px;
        min-height: 73px;
    }

    .home-nav-item img {
        width: 40px;
        height: 40px;
        margin-bottom: 20px;
    }

    .home-nav-item span {
        width: 82px;
        font-size: 12px;
        line-height: 18px;
        white-space: normal;
    }

    .home-nav-divider {
        display: block;
        flex-shrink: 0;
        width: 1px;
        height: 45px;
        margin-top: 0;
        background: #f49d22;
        opacity: 0.9;
    }

    .home-copyright {
        width: 236px;
        margin: 58px auto 0;
        font-size: 9px;
        line-height: 123%;
    }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Focus states for keyboard navigation */
a:focus,
button:focus,
[role="button"]:focus {
    outline: 2px solid #f49d22;
    outline-offset: 2px;
}

.home-nav-item:focus,
.home-nav-item:focus-visible,
.home-nav-item:active,
.services-page-nav-item:focus,
.services-page-nav-item:focus-visible,
.services-page-nav-item:active,
.clients-page-nav-item:focus,
.clients-page-nav-item:focus-visible,
.clients-page-nav-item:active,
.contact-page-nav-item:focus,
.contact-page-nav-item:focus-visible,
.contact-page-nav-item:active {
    outline: none;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

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

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

.opacity-75 {
    opacity: 0.75;
}

.opacity-80 {
    opacity: 0.8;
}

.mt-large {
    margin-top: 3rem;
}

.mb-large {
    margin-bottom: 3rem;
}

/* ============================================================================
   OUR SERVICES PAGE

   Design Philosophy: Rumi-inspired editorial service page that preserves the
   approved dark navy and gold visual system while separating inner-page layout
   from the completed Home page.
   ============================================================================ */

.our-services-page {
    min-height: 100vh;
    background: #19233e;
}

.services-page-shell {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: #19233e;
    color: #ffffff;
}

.services-page-content {
    position: relative;
    z-index: 5;
    width: min(760px, calc(100% - 48px));
    margin: 0 auto;
    padding: 93px 0 60px;
    text-align: center;
}

.services-page-nav {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 45px;
    margin: 0 auto 61px;
}

.services-page-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 116px;
    min-height: 96px;
    color: #ffffff;
    text-decoration: none;
}

.services-page-nav-item:hover img,
.services-page-nav-item:focus-visible img {
    transform: scale(0.85);
}

.services-page-nav-item img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    display: block;
    margin-bottom: 12px;
    transition: transform 220ms ease;
}

.services-page-nav-home img {
    width: 96px;
    height: 90px;
}

.services-page-nav-item span {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 123%;
    text-align: center;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.services-page-nav-divider {
    width: 1px;
    height: 80px;
    margin-top: 6px;
    background: #f49d22;
    opacity: 0.88;
}

.services-page-header {
    margin: 0 auto 37px;
}

.services-page-header h1,
.services-page-service h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    letter-spacing: -0.025em;
    color: #ffffff;
}

.services-page-header h1 {
    margin: 0 0 35px;
    font-size: 39px;
    line-height: 1;
}

.services-page-header p,
.services-page-service p {
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 300;
    text-align: center;
    letter-spacing: -0.02em;
    color: #ffffff;
    opacity: 0.75;
}

.services-page-header p {
    width: min(605px, 100%);
    margin: 0 auto;
    font-size: 20px;
    line-height: 150%;
}

.services-page-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 39px;
}

.services-page-service {
    width: min(620px, 100%);
}

.services-page-service-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 21px;
}

.services-page-service-mark span {
    display: none;
}

.services-page-service-mark img {
    width: 292px;
    height: 47px;
    object-fit: contain;
    display: block;
}

.services-page-service h2 {
    margin: 0 0 11px;
    font-size: 29px;
    line-height: 1.05;
}

.services-page-service p {
    width: min(620px, 100%);
    margin: 0 auto;
    font-size: 20px;
    line-height: 150%;
}

.services-page-copyright {
    margin-top: 184px;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 123%;
    text-align: center;
    letter-spacing: -0.02em;
    color: #ffffff;
    opacity: 0.25;
}

.services-page-copyright p {
    margin: 0;
}

.service-icon-link,
.service-nav-link {
    color: inherit;
    text-decoration: none;
}

.service-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.service-nav-link {
    display: inline-block;
}

@media (min-width: 403px) and (max-width: 1280px) {
    .services-page-content {
        width: min(680px, calc(100% - 40px));
        padding-top: 78px;
    }

    .services-page-nav {
        gap: 34px;
        margin-bottom: 54px;
    }

    .services-page-header p,
    .services-page-service p {
        font-size: 20px;
    }
}

@media (max-width: 402px) {
    .services-page-shell {
        min-height: 1429px;
    }

    .services-page-content {
        width: 320px;
        min-height: 1429px;
        padding: 62px 0 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .services-page-nav {
        width: 290px;
        height: 73px;
        gap: 12px;
        align-items: flex-start;
        justify-content: center;
        margin: 0 auto 37px;
    }

    .services-page-nav-item {
        width: 82px;
        min-height: 73px;
    }

    .services-page-nav-item img,
    .services-page-nav-home img {
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
    }

    .services-page-nav-divider {
        width: 1px;
        height: 45px;
        margin-top: 0;
    }

    .services-page-nav-item span {
        font-size: 12px;
        line-height: 18px;
    }

    .services-page-header {
        width: 296px;
        margin-bottom: 27px;
    }

    .services-page-header h1 {
        margin-bottom: 19px;
        font-size: 26px;
        line-height: 123%;
    }

    .services-page-header p {
        width: 296px;
        font-size: 13px;
        line-height: 150%;
    }

    .services-page-list {
        width: 320px;
        gap: 28px;
    }

    .services-page-service {
        width: 296px;
    }

    .services-page-service-mark {
        margin-bottom: 17px;
    }

    .services-page-service-mark img {
        width: 144px;
        height: 24px;
    }

    .services-page-service h2 {
        margin-bottom: 15px;
        font-size: 20px;
        line-height: 123%;
    }

    .services-page-service p {
        width: 296px;
        font-size: 13px;
        line-height: 150%;
    }

    .services-page-copyright {
        margin-top: 50px;
        width: 236px;
        height: 11px;
        font-size: 9px;
        line-height: 123%;
        flex-shrink: 0;
    }
}

/* ============================================================================
   OUR CLIENTS PAGE

   Design Philosophy: Rumi-inspired institutional gallery page that preserves the
   approved dark navy and gold visual system while using a restrained logo-grid
   composition and scoped rules to avoid disturbing completed pages.
   ============================================================================ */

.our-clients-page {
    min-height: 100vh;
    background: #19233e;
}

.clients-page-shell {
    position: relative;
    min-height: 1750px;
    overflow: hidden;
    background: #19233e;
    color: #ffffff;
}

.clients-page-content {
    position: relative;
    z-index: 5;
    width: min(790px, calc(100% - 48px));
    margin: 0 auto;
    padding: 111px 0 60px;
    text-align: center;
}

.clients-page-nav {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 45px;
    margin: 0 auto 67px;
}

.clients-page-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 116px;
    min-height: 96px;
    color: #ffffff;
    text-decoration: none;
}

.clients-page-nav-item:hover img,
.clients-page-nav-item:focus-visible img {
    transform: scale(0.85);
}

.clients-page-nav-item img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    display: block;
    margin-bottom: 12px;
    transition: transform 220ms ease;
}

.clients-page-nav-home img {
    width: 96px;
    height: 90px;
}

.clients-page-nav-item span {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 123%;
    text-align: center;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.clients-page-nav-divider {
    width: 1px;
    height: 80px;
    margin-top: 6px;
    background: #f49d22;
    opacity: 0.88;
}

.clients-page-header {
    margin: 0 auto 124px;
}

.clients-page-header h1 {
    margin: 0 0 38px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: 43px;
    line-height: 1;
    letter-spacing: -0.025em;
    color: #ffffff;
}

.clients-page-header p {
    width: min(634px, 100%);
    margin: 0 auto;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 123%;
    text-align: center;
    letter-spacing: -0.02em;
    color: #ffffff;
    opacity: 0.75;
}

.clients-logo-grid {
    width: min(700px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 108px;
    row-gap: 88px;
    align-items: center;
    justify-items: center;
}

.client-logo {
    width: 160px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-logo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.client-logo-wb img { max-width: 132px; }
.client-logo-unicef img { max-width: 141px; }
.client-logo-unhcr img { max-width: 132px; }
.client-logo-sci img { max-width: 126px; }
.client-logo-usaid img { max-width: 147px; }
.client-logo-unwomen img { max-width: 141px; }
.client-logo-iadc img { max-width: 142px; }
.client-logo-civil img { max-width: 116px; }
.client-logo-usip img { max-width: 145px; }
.client-logo-mine img { max-width: 124px; }
.client-logo-kabul img { max-width: 124px; }
.client-logo-magenta img { max-width: 128px; }
.client-logo-undp img { max-width: 100px; }
.client-logo-akdn img { max-width: 92px; max-height: 104px; }
.client-logo-actionaid img { max-width: 132px; }
.client-logo-scout img { max-width: 90px; max-height: 90px; }
.client-logo-acku img { max-width: 74px; max-height: 92px; }
.client-logo-afghanaid img { max-width: 136px; }

.clients-page-copyright {
    margin-top: 184px;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 123%;
    text-align: center;
    letter-spacing: -0.02em;
    color: #ffffff;
    opacity: 0.25;
}

.clients-page-copyright p {
    margin: 0;
}

@media (min-width: 403px) and (max-width: 1280px) {
    .clients-page-shell {
        min-height: 1600px;
    }

    .clients-page-content {
        width: 690px;
        padding-top: 96px;
    }

    .clients-page-nav {
        gap: 45px;
        margin-bottom: 61px;
    }

    .clients-page-nav-divider {
        display: block;
    }

    .clients-page-header {
        margin-bottom: 103px;
    }

    .clients-page-header h1 {
        margin-bottom: 39px;
        font-size: 39px;
    }

    .clients-page-header p {
        width: 590px;
        font-size: 20px;
        line-height: 123%;
    }

    .clients-logo-grid {
        width: 570px;
        column-gap: 54px;
        row-gap: 77px;
    }

    .client-logo {
        width: 154px;
        height: 56px;
    }

    .clients-page-copyright {
        margin-top: 184px;
    }
}

@media (max-width: 402px) {
    .clients-page-shell {
        min-height: 1723px;
    }

    .clients-page-content {
        width: 320px;
        min-height: 1723px;
        padding: 62px 0 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .clients-page-nav {
        width: 290px;
        height: 73px;
        gap: 12px;
        align-items: flex-start;
        justify-content: center;
        margin: 0 auto 37px;
    }

    .clients-page-nav-item,
    .clients-nav-contact,
    .clients-page-nav-home,
    .clients-nav-services {
        order: initial;
        width: 82px;
        min-height: 73px;
    }

    .clients-page-nav-item img,
    .clients-page-nav-home img {
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
    }

    .clients-page-nav-divider {
        display: block;
        width: 1px;
        height: 45px;
        margin-top: 0;
    }

    .clients-page-nav-item span {
        font-size: 12px;
        line-height: 18px;
    }

    .clients-page-header {
        width: 296px;
        margin-bottom: 69px;
    }

    .clients-page-header h1 {
        margin-bottom: 19px;
        font-size: 26px;
        line-height: 123%;
    }

    .clients-page-header p {
        width: 296px;
        font-size: 13px;
        line-height: 123%;
    }

    .clients-logo-grid {
        width: 296px;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 34px;
        row-gap: 72px;
    }

    .client-logo {
        width: 131px;
        height: 44px;
    }

    .client-logo-wb { order: 1; }
    .client-logo-unicef { order: 2; }
    .client-logo-sci { order: 3; }
    .client-logo-usaid { order: 4; }
    .client-logo-iadc { order: 5; }
    .client-logo-civil { order: 6; }
    .client-logo-mine { order: 7; }
    .client-logo-kabul { order: 8; }
    .client-logo-undp { order: 9; }
    .client-logo-akdn { order: 10; }
    .client-logo-scout { order: 11; }
    .client-logo-acku { order: 12; }
    .client-logo-unhcr { order: 13; }
    .client-logo-magenta { order: 14; }
    .client-logo-unwomen { order: 15; }
    .client-logo-actionaid { order: 16; }
    .client-logo-usip { order: 17; }
    .client-logo-afghanaid { order: 18; }

    .client-logo-wb img { max-width: 113px; }
    .client-logo-unicef img { max-width: 116px; }
    .client-logo-unhcr img { max-width: 112px; }
    .client-logo-sci img { max-width: 106px; }
    .client-logo-usaid img { max-width: 124px; }
    .client-logo-unwomen img { max-width: 116px; }
    .client-logo-iadc img { max-width: 116px; }
    .client-logo-civil img { max-width: 94px; }
    .client-logo-usip img { max-width: 120px; }
    .client-logo-mine img { max-width: 104px; }
    .client-logo-kabul img { max-width: 104px; }
    .client-logo-magenta img { max-width: 111px; }
    .client-logo-undp img { max-width: 83px; }
    .client-logo-akdn img { max-width: 75px; max-height: 86px; }
    .client-logo-actionaid img { max-width: 110px; }
    .client-logo-scout img { max-width: 74px; max-height: 74px; }
    .client-logo-acku img { max-width: 61px; max-height: 74px; }
    .client-logo-afghanaid img { max-width: 114px; }

    .clients-page-copyright {
        margin-top: 50px;
        width: 236px;
        height: 11px;
        font-size: 9px;
        line-height: 123%;
        flex-shrink: 0;
    }

}

/* ============================================================================
   CONTACT US PAGE

   Design Philosophy: Rumi-inspired contact page that preserves the approved
   dark navy, gold, and parchment-white inner-page system while keeping the
   desktop/tablet navbar concept and shared footer logic consistent.
   ============================================================================ */

.contact-page {
    min-height: 100vh;
    background: #19233e;
}

.contact-page-shell {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: #19233e;
    color: #ffffff;
}

.contact-page-content {
    position: relative;
    z-index: 5;
    width: min(790px, calc(100% - 48px));
    min-height: 100vh;
    margin: 0 auto;
    padding: 104px 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-page-nav {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 45px;
    margin: 0 auto 95px;
}

.contact-page-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 116px;
    min-height: 96px;
    color: #ffffff;
    text-decoration: none;
}

.contact-page-nav-item:hover img,
.contact-page-nav-item:focus-visible img {
    transform: scale(0.85);
}

.contact-page-nav-item img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    display: block;
    margin-bottom: 12px;
    transition: transform 220ms ease;
}

.contact-page-nav-home img {
    width: 96px;
    height: 90px;
}

.contact-page-nav-item span {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 123%;
    text-align: center;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.contact-page-nav-divider {
    width: 1px;
    height: 80px;
    margin-top: 6px;
    background: #f49d22;
    opacity: 0.88;
}

.contact-page-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(640px, 100%);
    margin: 0 auto;
}

.contact-email-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 443.7px;
    height: 71.1px;
    padding: 0 44px;
    border: 2px solid #f49d22;
    border-radius: 6px;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 123%;
    letter-spacing: -0.02em;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    transition: background 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.contact-email-button:focus,
.contact-email-button:focus-visible {
    outline: none;
}

.contact-email-button:hover,
.contact-email-button:focus-visible {
    background: #f49d22;
    border-color: #f49d22;
    color: #ffffff;
    transform: translateY(-2px);
}

.contact-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 50px auto 50px;
}

.contact-socials img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 220ms ease;
    cursor: pointer;
}

.contact-socials img:hover {
    transform: scale(0.85);
    opacity: 0.85;
}

.contact-socials a {
    display: inline-flex;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.contact-socials a:focus,
.contact-socials a:focus-visible {
    outline: none;
}

.contact-details {
    width: 596.25px;
    max-width: 100%;
    height: 248px;
    margin: 0 auto;
    font-style: normal;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 19.5px;
    line-height: 123%;
    color: #ffffff;
    text-align: center;
    letter-spacing: -0.02em;
}

    .contact-detail-group {
        margin: 0 auto 50px;
    }

.contact-detail-group:last-child {
    margin-bottom: 0;
}

.contact-detail-group h2 {
    margin: 0 0 10px;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 19.5px;
    line-height: 123%;
    text-align: center;
    letter-spacing: -0.02em;
    color: #f49d22;
}

.contact-detail-group p {
    margin: 0 auto 18px;
    font-size: 19.5px;
    line-height: 123%;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.75);
}

.contact-detail-group p:last-child {
    margin-bottom: 0;
}

.contact-detail-group a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-weight: 300;
    transition: color 220ms ease;
}

.contact-detail-group a:hover,
.contact-detail-group a:focus-visible {
    color: #ffffff;
}

.contact-phone-group p {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

.contact-phone-group span {
    color: #f49d22;
    opacity: 1;
}

.contact-page-copyright {
    margin-top: auto;
    padding-top: 92px;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 123%;
    text-align: center;
    letter-spacing: -0.02em;
    color: #ffffff;
    opacity: 0.25;
    flex-shrink: 0;
}

.contact-page-copyright p {
    margin: 0;
}

@media (min-width: 403px) and (max-width: 1280px) {
    .contact-page-content {
        width: 690px;
        padding-top: 96px;
    }

    .contact-page-nav {
        gap: 45px;
        margin-bottom: 86px;
    }

    .contact-page-nav-divider {
        display: block;
    }

    .contact-page-copyright {
        font-size: 16px;
    }
}

@media (max-width: 402px) {
    .contact-page-shell {
        min-height: 986px;
        height: 986px;
    }

    .contact-page-content {
        width: 100vw;
        min-height: 986px;
        height: 986px;
        padding: 62px 0 176px;
    }

    .contact-page-nav {
        width: 290px;
        height: 73px;
        gap: 12px;
        align-items: flex-start;
        justify-content: center;
        margin: 0 auto 70px;
    }

    .contact-page-nav-item {
        width: 82px;
        min-height: 73px;
    }

    .contact-page-nav-item img,
    .contact-page-nav-home img {
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
    }

    .contact-page-nav-divider {
        display: block;
        width: 1px;
        height: 45px;
        margin-top: 0;
    }

    .contact-page-nav-item span {
        font-size: 12px;
        line-height: 18px;
    }

    .contact-page-main {
        width: 100vw;
        max-width: 100vw;
    }

    .contact-email-button {
        width: 260.35px;
        height: 41.72px;
        min-height: 0;
        padding: 0 28px;
        border-width: 2px;
        border-radius: 6px;
        font-size: 20px;
    }

    .contact-socials {
        gap: 10px;
        margin: 48px auto 48px;
    }

    .contact-socials img {
        width: 21px;
        height: 21px;
    }

    .contact-details {
        width: 349.87px;
        max-width: calc(100vw - 24px);
        height: 165px;
        font-weight: 400;
        font-size: 13px;
        line-height: 123%;
    }

    .contact-detail-group {
        margin-bottom: 48px;
    }

    .contact-detail-group h2 {
        margin-bottom: 12px;
        font-size: 13px;
        line-height: 123%;
    }

    .contact-detail-group p {
        width: 349.87px;
        max-width: calc(100vw - 24px);
        margin-bottom: 30px;
        font-size: 13px;
        line-height: 123%;
    }

    .contact-phone-group p {
        gap: 10px;
        flex-wrap: nowrap;
        font-size: 13px;
        line-height: 123%;
    }

    .contact-page-copyright {
        width: 236px;
        height: 11px;
        margin-top: 305px;
        padding-top: 0;
        margin-bottom: 0;
        font-size: 9px;
        line-height: 123%;
    }
}


/* ============================================================================
   CLIENT TOOLTIP BOX
   Sharp-cornered white callout box with a narrow triangular arrow.
   Arrow sits 63px from the left edge of the box.
   Direction (arrow-up / arrow-down) is toggled by JS adding .tooltip-above
   to the .client-tooltip element when there is not enough space below the logo.
   Box height is dynamic — grows/shrinks to fit the text content.
   ============================================================================ */

/* Wrapper on each logo cell */
.client-logo {
    position: relative;
}

/* The tooltip box itself.
   Appended to <body> by JS and positioned with position:absolute
   (top/left set by JS using getBoundingClientRect + scrollY).
   This means it is never clipped by any cell boundary. */
.client-tooltip {
    position: absolute;
    /* top and left are set by JS */
    z-index: 9999;

    width: 321px;
    padding: 22px 24px;
    background: #ffffff;

    /* Sharp corners — no border-radius */
    border-radius: 0;

    /* Typography per spec */
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 123%;
    text-align: center;
    letter-spacing: -0.02em;
    color: #19233E;

    /* Hidden by default */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;

    /* Arrow is a pseudo-element */
}

/* Show state — toggled by JS on mouseenter / mouseleave */
.client-tooltip.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ---- ARROW POINTING UP (box is below the logo) — default ---- */
.client-tooltip::before {
    content: '';
    position: absolute;
    /* Arrow sits on the TOP edge of the box */
    top: -10px;
    /* 63px from the left edge of the box */
    left: 63px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #ffffff;
}

/* Position box below the logo when arrow points up */
.client-tooltip:not(.tooltip-above) {
    top: calc(100% + 12px);
    bottom: auto;
}

/* ---- ARROW POINTING DOWN (box is above the logo) ---- */
.client-tooltip.tooltip-above {
    bottom: calc(100% + 12px);
    top: auto;
}

.client-tooltip.tooltip-above::before {
    /* Move arrow to the BOTTOM edge */
    top: auto;
    bottom: -10px;
    border-bottom: none;
    border-top: 10px solid #ffffff;
}

/* ---- Tooltip: smaller box for mobile (≤402px) — must come AFTER the desktop
   block above so the cascade gives these rules higher priority. ---- */
@media (max-width: 402px) {
    .client-tooltip {
        width: 200px;
        padding: 14px 16px;
        font-size: 13px;
        line-height: 140%;
    }

    /* Arrow sits at centre of the 200px-wide box: 100px - 8px half-arrow-width = 92px */
    .client-tooltip::before {
        left: 92px;
    }
}