/* ============================================================
   LORDBLESS CONSULTANCY
   MASTER WEBSITE STYLESHEET
   PREMIUM DEEP NAVY + GOLD BRAND SYSTEM
   ============================================================ */


/* ============================================================
   01. BRAND VARIABLES
   ============================================================ */

:root {
    --brand-navy: #06152B;
    --brand-navy-light: #0A1F3A;
    --brand-navy-deep: #020D1F;

    --gold: #C9A45C;
    --gold-bright: #DDB75F;
    --gold-light: #E8CC88;

    --white: #FFFFFF;
    --off-white: #F7F5F0;
    --light-grey: #EEF1F4;

    --text-dark: #17202A;
    --text-muted: #667085;

    --border-light: rgba(7, 26, 51, 0.12);
    --border-gold: rgba(201, 164, 92, 0.35);

    --container-width: 1200px;

    --radius-small: 6px;
    --radius-medium: 12px;
    --radius-large: 20px;

    --shadow-soft:
        0 10px 30px rgba(7, 26, 51, 0.08);

    --shadow-medium:
        0 18px 45px rgba(7, 26, 51, 0.12);

    --transition: 0.3s ease;
}


/* ============================================================
   02. RESET
   ============================================================ */

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


html {
    scroll-behavior: smooth;
}


body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text-dark);
    background: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
}


img {
    max-width: 100%;
    display: block;
}


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


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


/* ============================================================
   03. GLOBAL CONTAINER
   ============================================================ */

.container {
    width: min(100% - 40px, var(--container-width));
    margin-inline: auto;
}

/* ============================================================
   04. HEADER
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

        );
    background:
    linear-gradient(
        135deg,
        #020D1F 0%,
        #06152B 55%,
        #0A1F3A 100%
    );
    border-bottom:
        1px solid rgba(201, 164, 92, 0.30);

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.16);
}


.header-container {
    min-height: 82px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


/* ============================================================
   05. HEADER LOGO
   ============================================================ */

.brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}


.brand-logo {
    width: 260px;
    height: auto;
    max-height: 66px;

    object-fit: contain;
    object-position: left center;
}


/* ============================================================
   06. NAVIGATION
   ============================================================ */

.main-navigation {
    display: flex;
    align-items: center;
    gap: 30px;

    font-size: 0.92rem;
    font-weight: 600;
}


.main-navigation > a:not(.nav-cta) {
    position: relative;
    color: var(--white);

    transition:
        color var(--transition);
}


.main-navigation > a:not(.nav-cta)::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -7px;

    width: 0;
    height: 2px;

    background: var(--gold-bright);

    transition:
        width var(--transition);
}


.main-navigation > a:not(.nav-cta):hover {
    color: var(--gold-light);
}


.main-navigation > a:not(.nav-cta):hover::after {
    width: 100%;
}



/* ============================================================
   HEADER CTA
   ============================================================ */

.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 0 20px;

    color: var(--brand-navy-deep);
    background: var(--gold-bright);

    border-radius: var(--radius-small);

    font-weight: 700;

    transition:
        background var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}


.nav-cta:hover {
    background: var(--gold-light);

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.18);
}

#portal-sign-out[hidden] {
    display: none !important;
}

/* ============================================================
   07. MOBILE MENU
   ============================================================ */

.mobile-menu-button {
    display: none;

    width: 42px;
    height: 42px;

    border:
        1px solid rgba(255, 255, 255, 0.25);

    border-radius: var(--radius-small);

    background: transparent;

    cursor: pointer;
}


.mobile-menu-button span {
    display: block;

    width: 20px;
    height: 2px;

    margin: 4px auto;

    background: var(--white);
}


/* ============================================================
   08. HERO
   ============================================================ */

.hero {
    position: relative;

    min-height: 650px;

    display: flex;
    align-items: center;

    overflow: hidden;

    color: var(--white);

    background:
        linear-gradient(
            135deg,
            #020D1F 0%,
            #06152B 55%,
            #0A1F3A 100%
        );
}


/* Premium subtle orbital detail */

.hero::before {
    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    right: -250px;
    top: -190px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius: 50%;
}


.hero::after {
    content: "";

    position: absolute;

    width: 410px;
    height: 410px;

    right: -110px;
    top: -75px;

    border:
        1px solid rgba(201, 164, 92, 0.18);

    border-radius: 50%;
}


.hero-content {
    position: relative;
    z-index: 2;

    max-width: 850px;

    /* Reduced vertical spacing */
    padding: 62px 0 58px;
}


/* ============================================================
   09. HERO EYEBROW
   ============================================================ */

.hero .eyebrow,
.section-heading .eyebrow {
    margin-bottom: 14px;

    font-size: 0.75rem;
    font-weight: 700;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    color: var(--gold-light);
}


/* ============================================================
   10. HERO TYPOGRAPHY
   ============================================================ */

.hero h1 {
    max-width: 850px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(3rem, 7vw, 5.7rem);

    line-height: 1.05;

    font-weight: 600;

    letter-spacing: -0.025em;

    color: var(--white);
}


.hero-description {
    max-width: 720px;

    margin-top: 23px;

    font-size: 1.08rem;

    line-height: 1.72;

    color:
        rgba(255, 255, 255, 0.86);
}


/* ============================================================
   11. GLOBAL CONNECTIONS
   ============================================================ */

.hero-destinations {
    margin-top: 19px;

    max-width: 940px;
}


.hero-destinations > span {
    display: block;

    margin-bottom: 9px;

    font-size: 0.72rem;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color:
        rgba(255, 255, 255, 0.76);

    font-weight: 700;
}


.destination-list {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    align-items: center;

    column-gap: 18px;
    row-gap: 10px;
}


.destination {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--gold-light);

    font-size: 0.86rem;

    font-weight: 600;
}


/* ============================================================
   FLAGS
   Existing flag visuals are intentionally preserved.
   ============================================================ */

.flag {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 30px;
    height: 20px;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.35);

    border-radius: 3px;

    background:
        rgba(255, 255, 255, 0.08);

    font-size: 0;

    line-height: 1;

    flex-shrink: 0;
}


/* Ghana */

.destination:nth-child(1) .flag {
    background:
        linear-gradient(
            to bottom,
            #CE1126 0 33.33%,
            #FCD116 33.33% 66.66%,
            #006B3F 66.66% 100%
        );
}


/* Germany */

.destination:nth-child(2) .flag {
    background:
        linear-gradient(
            to bottom,
            #000000 0 33.33%,
            #DD0000 33.33% 66.66%,
            #FFCE00 66.66% 100%
        );
}


/* Canada */

.destination:nth-child(3) .flag {
    background:
        linear-gradient(
            to right,
            #D52B1E 0 25%,
            #FFFFFF 25% 75%,
            #D52B1E 75% 100%
        );
}


/* China */

.destination:nth-child(4) .flag {
    background:
        #DE2910;
}


/* Romania */

.destination:nth-child(5) .flag {
    background:
        linear-gradient(
            to right,
            #002B7F 0 33.33%,
            #FCD116 33.33% 66.66%,
            #CE1126 66.66% 100%
        );
}


/* Poland */

.destination:nth-child(6) .flag {
    background:
        linear-gradient(
            to bottom,
            #FFFFFF 0 50%,
            #DC143C 50% 100%
        );
}


/* Serbia */

.destination:nth-child(7) .flag {
    background:
        linear-gradient(
            to bottom,
            #C6363C 0 33.33%,
            #0C4076 33.33% 66.66%,
            #FFFFFF 66.66% 100%
        );
}


/* Netherlands */

.destination:nth-child(8) .flag {
    background:
        linear-gradient(
            to bottom,
            #AE1C28 0 33.33%,
            #FFFFFF 33.33% 66.66%,
            #21468B 66.66% 100%
        );
}


/* Hungary */

.destination:nth-child(9) .flag {
    background:
        linear-gradient(
            to bottom,
            #CE2939 0 33.33%,
            #FFFFFF 33.33% 66.66%,
            #477050 66.66% 100%
        );
}



/* USA */

.destination:nth-child(10) .flag {
    background:
        linear-gradient(
            to bottom,
            #B22234 0 7.69%,
            #FFFFFF 7.69% 15.38%,
            #B22234 15.38% 23.07%,
            #FFFFFF 23.07% 30.76%,
            #B22234 30.76% 38.45%,
            #FFFFFF 38.45% 46.14%,
            #B22234 46.14% 53.83%,
            #FFFFFF 53.83% 61.52%,
            #B22234 61.52% 69.21%,
            #FFFFFF 69.21% 76.90%,
            #B22234 76.90% 84.59%,
            #FFFFFF 84.59% 92.28%,
            #B22234 92.28% 100%
        );

    position: relative;
}

.destination:nth-child(10) .flag::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 42%;
    height: 54%;
    background: #3C3B6E;
}


/* ============================================================
   12. HERO ACTIONS
   ============================================================ */

.hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 28px;
}


.button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding: 0 25px;

    border-radius:
        var(--radius-small);

    font-weight: 700;

    transition:
        transform var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}


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


.button-primary {
    color:
        var(--brand-navy-deep);

    background:
        var(--gold-bright);

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.12);
}


.button-primary:hover {
    background:
        var(--gold-light);
}


.button-secondary {
    color:
        var(--white);

    border:
        1px solid rgba(255, 255, 255, 0.40);
}


.button-secondary:hover {
    background:
        rgba(255, 255, 255, 0.08);
}


.hero-note {
    margin-top: 11px;

    font-size: 0.84rem;

    color:
        rgba(255, 255, 255, 0.68);
}


/* ============================================================
   13. SECTION FOUNDATION
   ============================================================ */

.journey-section,
.services-section,
.journeys-section,
.about-section,
.contact-section {
    padding: 78px 0;
}


.section-heading {
    max-width: 720px;

    margin-bottom: 42px;
}


.section-heading h2 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(2.2rem, 4vw, 3.5rem);

    line-height: 1.15;

    color:
        var(--brand-navy);
}


.section-heading p:not(.eyebrow) {
    margin-top: 15px;

    color:
        var(--text-muted);

    font-size:
        1.02rem;

    line-height:
        1.7;
}


/* ============================================================
   14. JOURNEY SECTION
   ============================================================ */

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


.journey-grid {
    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 16px;
}


.journey-card {
    min-height: 240px;

    padding: 28px 24px;

    background:
        var(--white);

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-medium);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}


.journey-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(201, 164, 92, 0.5);

    box-shadow:
        var(--shadow-soft);
}


.journey-number {
    display: block;

    margin-bottom: 35px;

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    color:
        var(--gold);
}


.journey-card h3 {
    margin-bottom: 12px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        1.4rem;

    color:
        var(--brand-navy);
}


.journey-card p {
    font-size:
        0.9rem;

    color:
        var(--text-muted);
}


/* ============================================================
   15. SERVICES
   ============================================================ */

.services-section {
    background:
        #F8F7F3;
}


.services-section .section-heading {
    max-width:
        850px;

    margin-bottom:
        42px;
}


/* ============================================================
   SERVICE GRID
   DO NOT CHANGE THE PLACEMENT ARCHITECTURE
   ============================================================ */

.services-grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap:
        20px;

    align-items:
        start;
}


/* ============================================================
   SERVICE CARD
   ============================================================ */

.service-card {
    position: relative;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    height: auto;

    background:
        var(--white);

    border:
        1px solid rgba(184, 139, 48, 0.25);

    border-radius:
        16px;

    box-shadow:
        0 8px 25px rgba(10, 30, 55, 0.06);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.service-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(184, 139, 48, 0.55);

    box-shadow:
        0 18px 40px rgba(10, 30, 55, 0.12);
}


/* ============================================================
   SERVICE IMAGES
   ============================================================ */

.service-image {
    position: relative;

    height:
        175px;

    display:
        flex;

    align-items:
        flex-end;

    padding:
        16px;

    background-size:
        cover;

    background-position:
        center top;

    background-repeat:
        no-repeat;

    overflow:
        hidden;
}


.service-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(7, 27, 49, 0.58),
            rgba(7, 27, 49, 0.04)
        );
}


.service-image-label {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius:
        50%;

    background:
        var(--gold-bright);

    color:
        var(--brand-navy-deep);

    font-size:
        0.8rem;

    font-weight:
        700;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.18);
}


/* ============================================================
   SERVICE IMAGE FILES
   ============================================================ */

.service-image-education {
    background-image:
        url("../images/service-images/education.jpg");
}


.service-image-careers {
    background-image:
        url("../images/service-images/careers.jpg");
}


.service-image-travel {
    background-image:
        url("../images/service-images/travel.jpg");
}


.service-image-business {
    background-image:
        url("../images/service-images/business.jpg");
}


.service-image-mobility {
    background-image:
        url("../images/service-images/mobility.jpg");
}


/* ============================================================
   SERVICE CARD CONTENT
   ============================================================ */

.service-card .service-number {
    display:
        none;
}


.service-card h3 {
    margin:
        22px 20px 12px;

    color:
        #102B46;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        1.05rem;

    line-height:
        1.3;
}


.service-card > p {
    margin:
        0 20px 18px;

    color:
         #B8892E;

    font-size:
        0.88rem;

    line-height:
        1.65;
}


/* ============================================================
   SERVICE TAGS
   ============================================================ */

.service-tags {
    display:
        flex;

    flex-direction:
        row;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        7px;

    margin:
        0 20px 20px;
}

.service-tags span {
    display:
        inline-flex;

    flex:
        0 0 auto;

    align-items:
        center;

    justify-content:
        center;

    width:
        auto;

    padding:
        6px 10px;

    background:
        #FAF9F5;

    border:
        1px solid #E7DFD0;

    border-radius:
        20px;

    color:
        var(--text-muted);

    font-size:
        0.72rem;

    line-height:
        1.2;

    white-space:
        nowrap;
}

/* ============================================================
   SERVICE CARD COUNTRY FLAGS
   CSS-rendered flags for reliable cross-platform display
   ============================================================ */

.service-country::before {
    content: "";

    display: inline-block;

    width: 18px;
    height: 12px;

    margin-right: 7px;

    border-radius: 2px;

    border: 1px solid rgba(0, 0, 0, 0.08);

    vertical-align: middle;

    flex-shrink: 0;
}


/* Germany */

.service-country-germany::before {
    background:
        linear-gradient(
            to bottom,
            #000000 0 33.33%,
            #DD0000 33.33% 66.66%,
            #FFCE00 66.66% 100%
        );
}


/* Canada */

.service-country-canada::before {
    background:
        linear-gradient(
            to right,
            #D52B1E 0 25%,
            #FFFFFF 25% 75%,
            #D52B1E 75% 100%
        );
}


/* China */

.service-country-china::before {
    background:
        #DE2910;
}


/* Ghana */

.service-country-ghana::before {
    background:
        linear-gradient(
            to bottom,
            #CE1126 0 33.33%,
            #FCD116 33.33% 66.66%,
            #006B3F 66.66% 100%
        );
}
/* ============================================================
   JOURNEY STORY COUNTRY FLAGS
   ============================================================ */

.journey-country::before {

    content: "";

    display: inline-block;

    width: 18px;
    height: 12px;

    margin-right: 7px;

    border-radius: 2px;

    border: 1px solid rgba(0, 0, 0, 0.08);

    vertical-align: middle;

    flex-shrink: 0;
}


/* Ghana */

.journey-country-ghana::before {

    background:
        linear-gradient(
            to bottom,
            #CE1126 0 33.33%,
            #FCD116 33.33% 66.66%,
            #006B3F 66.66% 100%
        );
}


/* Ukraine */

.journey-country-ukraine::before {

    background:
        linear-gradient(
            to bottom,
            #0057B7 0 50%,
            #FFD700 50% 100%
        );
}


/* USA */

.journey-country-usa::before {

    background:
        repeating-linear-gradient(
            to bottom,
            #B22234 0 1px,
            #FFFFFF 1px 2px
        );
}


/* Germany */

.journey-country-germany::before {

    background:
        linear-gradient(
            to bottom,
            #000000 0 33.33%,
            #DD0000 33.33% 66.66%,
            #FFCE00 66.66% 100%
        );
}
/* Canada */

.journey-country-canada::before {

    background:
        linear-gradient(
            to right,
            #D52B1E 0 25%,
            #FFFFFF 25% 75%,
            #D52B1E 75% 100%
        );
}


/* China */

.journey-country-china::before {

    background:
        #DE2910;
}
/* ============================================================
   SERVICE LINKS
   ============================================================ */

.service-card .text-link {
    margin:
        auto 20px 22px;

    color:
        #B8892E;

    font-size:
        0.85rem;

    font-weight:
        700;

    transition:
        color 0.2s ease;
}


.service-card .text-link::after {
    content:
        " →";

    color:
        var(--gold);
}


.service-card .text-link:hover {
    color:
        var(--brand-navy);
}


/* ============================================================
   16. REAL JOURNEYS
   ============================================================ */

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


.journeys-section .section-heading {
    max-width:
        780px;
}


.journeys-grid {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        22px;
}


.journey-story {
    overflow:
        hidden;

    background:
        var(--off-white);

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-medium);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}


.journey-story:hover {
    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow-soft);
}


.journey-story-image {
    width:
        100%;

    aspect-ratio:
        16 / 10;

    object-fit:
        cover;

    background:
        var(--light-grey);
}


.journey-story-content {
    padding:
        24px;
}


.journey-story-status {
    display:
        inline-block;

    margin-bottom:
        10px;

    font-size:
        0.7rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

    color:
        var(--gold);
}


.journey-story h3 {
    margin-bottom:
        9px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        1.35rem;

    color:
        var(--brand-navy);
}

.journey-story p {

    font-size:
        0.9rem;

    color:
        #B8892E;

    line-height:
        1.65;
}


.journey-story-route {
    margin-top:
        16px;

    font-size:
        0.82rem;

    font-weight:
        600;

    color:
        var(--brand-navy);
}

/* ============================================================
   17. ABOUT
   ============================================================ */

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


/* ============================================================
   18. CONTACT
   ============================================================ */

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


/* ============================================================
   19. INTELLIGENT ENQUIRY FORM
   ============================================================ */

.lordbless-enquiry-form {
    max-width:
        1000px;

    margin-inline:
        auto;
}


.enquiry-step,
.service-question-panel {
    margin:
        0 0 28px;

    padding:
        30px;

    background:
        var(--white);

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-medium);

    box-shadow:
        0 6px 20px rgba(7, 26, 51, 0.04);
}


.enquiry-step legend,
.service-question-panel legend {
    width:
        100%;

    padding:
        0;

    margin-bottom:
        8px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        1.35rem;

    font-weight:
        600;

    color:
        var(--brand-navy);
}


.step-number {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    height:
        38px;

    margin-right:
        9px;

    border-radius:
        50%;

    background:
        var(--gold);

    color:
        var(--brand-navy-deep);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        0.72rem;

    font-weight:
        800;

    vertical-align:
        middle;
}


.step-description {
    margin-bottom:
        24px;

    color:
        var(--text-muted);

    font-size:
        0.92rem;
}


/* ============================================================
   FORM GRID
   ============================================================ */

.form-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        22px;
}


.form-field {
    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;
}


.form-field-full {
    grid-column:
        1 / -1;
}


.form-field label {
    margin-bottom:
        8px;

    color:
        var(--brand-navy);

    font-size:
        0.88rem;

    font-weight:
        700;
}


.optional {
    margin-left:
        6px;

    color:
        var(--text-muted);

    font-size:
        0.72rem;

    font-weight:
        400;
}


/* ============================================================
   FORM INPUTS
   ============================================================ */

.form-field input,
.form-field select,
.form-field textarea {
    width:
        100%;

    padding:
        13px 15px;

    border:
        1px solid rgba(7, 26, 51, 0.16);

    border-radius:
        var(--radius-small);

    background:
        var(--white);

    color:
        var(--text-dark);

    outline:
        none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.form-field input,
.form-field select {
    min-height:
        50px;
}


.form-field textarea {
    resize:
        vertical;

    min-height:
        120px;

    line-height:
        1.6;
}


.form-field input::placeholder,
.form-field textarea::placeholder {
    color:
        #98A2B3;
}


.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color:
        var(--gold);

    box-shadow:
        0 0 0 3px rgba(201, 164, 92, 0.13);
}


/* ============================================================
   SERVICE SELECTION
   ============================================================ */

.service-selection {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        14px;
}


.service-option {
    position:
        relative;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        13px;

    min-height:
        100px;

    padding:
        18px;

    border:
        1px solid rgba(7, 26, 51, 0.13);

    border-radius:
        var(--radius-medium);

    background:
        var(--white);

    cursor:
        pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}


.service-option:hover {
    border-color:
        rgba(201, 164, 92, 0.6);

    transform:
        translateY(-2px);
}


.service-option:has(input:checked) {
    border-color:
        var(--gold);

    background:
        rgba(201, 164, 92, 0.08);
}


.service-option input {
    width:
        19px;

    height:
        19px;

    margin-top:
        2px;

    accent-color:
        var(--gold);

    flex-shrink:
        0;
}


.service-option-content {
    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;
}


.service-option-content strong {
    color:
        var(--brand-navy);

    font-size:
        0.92rem;
}


.service-option-content small {
    color:
        var(--text-muted);

    font-size:
        0.8rem;

    line-height:
        1.5;
}


/* ============================================================
   DYNAMIC PANELS
   ============================================================ */

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


/* ============================================================
   CHECKBOX LIST
   ============================================================ */

.checkbox-list {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        10px 18px;
}


.checkbox-list label {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        8px 0;

    color:
        var(--text-dark);

    font-size:
        0.88rem;

    font-weight:
        500;

    cursor:
        pointer;
}


.checkbox-list input {
    width:
        17px;

    height:
        17px;

    accent-color:
        var(--gold);
}


/* ============================================================
   CONTACT PREFERENCE
   ============================================================ */

.contact-preference {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        18px;
}


.contact-preference label {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--text-dark);

    font-size:
        0.88rem;

    cursor:
        pointer;
}


.contact-preference input {
    accent-color:
        var(--gold);
}


/* ============================================================
   CONSENT
   ============================================================ */

.enquiry-consent {
    margin:
        8px 0 24px;

    padding:
        18px;

    border:
        1px solid rgba(201, 164, 92, 0.25);

    border-radius:
        var(--radius-medium);

    background:
        rgba(201, 164, 92, 0.06);
}


.enquiry-consent label {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    color:
        var(--text-muted);

    font-size:
        0.82rem;

    line-height:
        1.5;

    cursor:
        pointer;
}


.enquiry-consent input {
    width:
        17px;

    height:
        17px;

    margin-top:
        2px;

    accent-color:
        var(--gold);

    flex-shrink:
        0;
}


/* ============================================================
   FORM ACTIONS
   ============================================================ */

.enquiry-actions {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        18px;
}


.enquiry-submit {
    border:
        none;

    cursor:
        pointer;
}


.form-note {
    max-width:
        520px;

    color:
        var(--text-muted);

    font-size:
        0.78rem;

    line-height:
        1.5;
}


/* ============================================================
   20. FOOTER
   ============================================================ */

.site-footer {
    padding:
        35px 0;

    background:
        var(--brand-navy-deep);

    color:
        rgba(255, 255, 255, 0.65);

    font-size:
        0.82rem;

    border-top:
        1px solid rgba(201, 164, 92, 0.18);
}


/* ============================================================
   21. FLOATING WHATSAPP
   ============================================================ */

.whatsapp-float {
    position:
        fixed;

    right:
        24px;

    bottom:
        24px;

    z-index:
        1000;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        12px 18px;

    border-radius:
        50px;

    background:
        var(--white);

    color:
        #12304A;

    text-decoration:
        none;

    font-size:
        0.85rem;

    font-weight:
        600;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.18);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.whatsapp-float:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.22);
}


.whatsapp-icon {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        32px;

    height:
        32px;

    border-radius:
        50%;

    background:
        #25D366;

    color:
        var(--white);

    font-size:
        0.65rem;

    font-weight:
        700;
}


.whatsapp-text {
    white-space:
        nowrap;
}


/* ============================================================
   22. TABLET
   ============================================================ */

@media (max-width: 1100px) {

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


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


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


    .main-navigation {
        gap:
            20px;
    }


    .brand-logo {
        width:
            225px;
    }
}


/* ============================================================
   23. MOBILE
   ============================================================ */

@media (max-width: 760px) {

    .container {
        width:
            min(100% - 32px, var(--container-width));
    }


    .header-container {
        min-height:
            72px;
    }


    .brand-logo {
        width:
            185px;

        max-height:
            54px;
    }


    .main-navigation {
        display:
            none;
    }


    .main-navigation.is-open {
        position: absolute;
        top: 100%;
        left: 16px;
        right: 16px;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;

        padding: 18px 20px;
        background: var(--brand-navy-deep, #0b1730);
    }


    .mobile-menu-button {
        display:
            block;
    }


    /* HERO */

    .hero {
        min-height:
            570px;
    }


    .hero-content {
        padding:
            55px 0 50px;
    }


    .hero h1 {
        font-size:
            clamp(2.7rem, 12vw, 4.5rem);
    }


    .hero-description {
        font-size:
            1rem;

        line-height:
            1.7;
    }


    .hero-destinations {
        margin-top:
            18px;
    }


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

        column-gap: 14px;
        row-gap: 9px;
    }


    .destination {
        font-size:
            0.81rem;
    }


    .hero-actions {
        margin-top:
            25px;
    }


    /* SECTIONS */

    .journey-section,
    .services-section,
    .journeys-section,
    .about-section,
    .contact-section {
        padding:
            68px 0;
    }


    /* ========================================================
       SERVICE CAROUSEL
       PRESERVED EXACTLY
       ======================================================== */

    .services-grid {
        display:
            flex;

        overflow-x:
            auto;

        overflow-y:
            hidden;

        gap:
            16px;

        padding-bottom:
            12px;

        scroll-snap-type:
            x mandatory;

        -webkit-overflow-scrolling:
            touch;

        scrollbar-width:
            none;
    }


    .services-grid::-webkit-scrollbar {
        display:
            none;
    }


    .service-card {
        flex:
            0 0 84%;

        scroll-snap-align:
            start;
    }


    .service-image {
        height:
            175px;
    }


    .journeys-grid {
        grid-template-columns:
            1fr;
    }


    .journey-grid {
        grid-template-columns:
            1fr;
    }


    .section-heading {
        margin-bottom:
            34px;
    }


    /* FORM */

    .form-grid {
        grid-template-columns:
            1fr;
    }


    .form-field-full {
        grid-column:
            auto;
    }


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


    .checkbox-list {
        grid-template-columns:
            1fr;
    }


    .enquiry-step,
    .service-question-panel {
        padding:
            22px;
    }


    .enquiry-actions {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .enquiry-submit {
        width:
            100%;
    }
}


/* ============================================================
   24. SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .container {
        width:
            min(100% - 28px, var(--container-width));
    }


    .brand-logo {
        width:
            180px;

        max-height:
            50px;
    }


    .hero {
        min-height:
            555px;
    }


    .hero-content {
        padding:
            50px 0 46px;
    }


    .hero .eyebrow {
        font-size:
            0.68rem;

        letter-spacing:
            0.13em;
    }


    .hero h1 {
        font-size:
            clamp(2.55rem, 13vw, 4rem);
    }


    .hero-description {
        font-size:
            0.94rem;
    }


    .hero-actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .button {
        width:
            100%;
    }


    .hero-destinations {
        margin-top:
            17px;
    }


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

        column-gap: 10px;
        row-gap: 8px;
    }


    .destination {
        font-size:
            0.77rem;
    }


    .flag {
        width:
            27px;

        height:
            18px;
    }


    /* SERVICE CARD WIDTH PRESERVED */

    .service-card {
        flex-basis:
            88%;
    }


    .service-image {
        height:
            175px;
    }


    .whatsapp-float {
        right:
            16px;

        bottom:
            16px;

        padding:
            10px 14px;
    }


    .whatsapp-icon {
        width:
            30px;

        height:
            30px;
    }


    .enquiry-step,
    .service-question-panel {
        padding:
            18px;
    }


    .enquiry-step legend,
    .service-question-panel legend {
        font-size:
            1.15rem;
    }


    .step-number {
        width:
            34px;

        height:
            34px;
    }
}
/* =============================================================
   LORDBLESS CONSULTANCY
   ENHANCED SERVICE EXPERIENCE
   GLOBAL EDUCATION
   ============================================================= */

.service-experience-section {
    position: relative;
    padding: 110px 0 100px;
    background: #f7f5ef;
    overflow: hidden;
}

.service-experience-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(
        90deg,
        #020D1F 0%,
        #C9A45C 50%,
        #020D1F 100%
    );
}

.service-experience-section .container {
    position: relative;
    z-index: 1;
}


/* =============================================================
   SECTION INTRO
   ============================================================= */

.service-experience-section .section-heading {
    max-width: 850px;
    margin: 0 auto 70px;
    text-align: center;
}

.service-experience-section .section-heading .eyebrow {
    margin-bottom: 14px;
    color: #b28b3c;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.service-experience-section .section-heading h2 {
    margin: 0 0 20px;
    color: #020D1F;
    font-size: clamp(2.1rem, 4vw, 3.5rem);
    line-height: 1.12;
}

.service-experience-section .section-heading > p:last-child {
    max-width: 760px;
    margin: 0 auto;
    color: #5d6673;
    font-size: 1.08rem;
    line-height: 1.8;
}


/* =============================================================
   EDUCATION SERVICE GROUPS
   ============================================================= */

.education-service-group {
    position: relative;
    max-width: 1050px;
    margin: 0 auto 24px;
    padding: 34px 38px;
    background: #ffffff;
    border: 1px solid rgba(2, 13, 31, 0.08);
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(2, 13, 31, 0.06);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.education-service-group:hover {
    transform: translateY(-3px);
    border-color: rgba(201, 164, 92, 0.45);
    box-shadow: 0 18px 42px rgba(2, 13, 31, 0.10);
}


/* =============================================================
   GROUP HEADING
   ============================================================= */

.education-service-heading {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 25px;
}

.education-service-number {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #020D1F;
    color: #C9A45C;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.education-service-heading h3 {
    margin: 2px 0 7px;
    color: #020D1F;
    font-size: 1.35rem;
    line-height: 1.3;
}

.education-service-heading p {
    margin: 0;
    color: #66717f;
    font-size: 0.96rem;
    line-height: 1.65;
}


/* =============================================================
   SERVICE ITEMS
   ============================================================= */

.education-service-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    padding-left: 70px;
}

.education-service-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 10px 0;
    color: #394454;
    font-size: 0.96rem;
    line-height: 1.5;
}

.education-service-item > span:first-child {
    flex: 0 0 auto;
    color: #C9A45C;
    font-weight: 700;
}

.education-service-item > span:last-child {
    flex: 1;
}


/* =============================================================
   FEATURED CONFERENCES / PROFESSIONAL LEARNING
   ============================================================= */

.education-service-group:last-of-type {
    margin-top: 30px;
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fbfaf6 100%
        );
    border-color: rgba(201, 164, 92, 0.28);
}

.education-service-group:last-of-type
.education-service-number {
    background: #C9A45C;
    color: #020D1F;
}


/* =============================================================
   EDUCATION CTA
   ============================================================= */

.service-experience-cta {
    max-width: 850px;
    margin: 70px auto 0;
    padding: 55px 40px;
    text-align: center;
    background: #020D1F;
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(2, 13, 31, 0.16);
}

.service-experience-cta .eyebrow {
    margin: 0 0 12px;
    color: #C9A45C;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.service-experience-cta h3 {
    margin: 0 0 15px;
    color: #ffffff;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    line-height: 1.2;
}

.service-experience-cta p {
    max-width: 650px;
    margin: 0 auto 28px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 1rem;
    line-height: 1.75;
}

.service-experience-cta .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 28px;
    border-radius: 8px;
    background: #C9A45C;
    color: #020D1F;
    font-weight: 700;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.service-experience-cta .btn-primary:hover {
    transform: translateY(-2px);
    background: #d7b66f;
    box-shadow: 0 10px 25px rgba(201, 164, 92, 0.25);
}


/* =============================================================
   TABLET
   ============================================================= */

@media (max-width: 900px) {

    .service-experience-section {
        padding: 85px 0 80px;
    }

    .education-service-group {
        padding: 30px;
    }

    .education-service-items {
        padding-left: 70px;
    }

}


/* =============================================================
   MOBILE
   ============================================================= */

@media (max-width: 700px) {

    .service-experience-section {
        padding: 75px 0 70px;
    }

    .service-experience-section .section-heading {
        margin-bottom: 45px;
        text-align: left;
    }

    .service-experience-section .section-heading h2 {
        font-size: 2rem;
    }

    .service-experience-section .section-heading > p:last-child {
        font-size: 0.98rem;
        line-height: 1.7;
    }

    .education-service-group {
        margin-bottom: 18px;
        padding: 25px 22px;
        border-radius: 15px;
    }

    .education-service-heading {
        gap: 15px;
        margin-bottom: 20px;
    }

    .education-service-number {
        width: 42px;
        height: 42px;
        font-size: 0.72rem;
    }

    .education-service-heading h3 {
        font-size: 1.15rem;
    }

    .education-service-heading p {
        font-size: 0.9rem;
    }

    .education-service-items {
        grid-template-columns: 1fr;
        gap: 0;
        padding-left: 57px;
    }

    .education-service-item {
        padding: 8px 0;
        font-size: 0.92rem;
    }

    .service-experience-cta {
        margin-top: 45px;
        padding: 40px 24px;
        border-radius: 18px;
    }

    .service-experience-cta h3 {
        font-size: 1.65rem;
    }

    .service-experience-cta p {
        font-size: 0.94rem;
    }

}


/* =============================================================
   SMALL MOBILE
   ============================================================= */

@media (max-width: 480px) {

    .service-experience-section {
        padding: 65px 0 60px;
    }

    .service-experience-section .section-heading h2 {
        font-size: 1.8rem;
    }

    .education-service-group {
        padding: 22px 18px;
    }

    .education-service-heading {
        align-items: flex-start;
    }

    .education-service-items {
        padding-left: 0;
    }

    .education-service-item {
        font-size: 0.9rem;
    }

    .service-experience-cta {
        padding: 35px 20px;
    }

}
/* =============================================================
   LORDBLESS CONSULTANCY
   DYNAMIC ENHANCED SERVICE EXPERIENCE
   PHASE 2C
   ============================================================= */

/*
 * Enhanced service panels are hidden by default.
 * JavaScript activates only the selected service.
 */

.service-experience-section[hidden] {
    display: none;
}


/*
 * Active enhanced service panel.
 */

.service-experience-section.is-active {
    display: block;
    animation: lordblessServiceReveal 0.45s ease both;
}


/*
 * Smooth premium entrance.
 */

@keyframes lordblessServiceReveal {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}
/*
 * Respect users who prefer reduced motion.
 */

@media (prefers-reduced-motion: reduce) {

    .service-experience-section.is-active {
        animation: none;
    }

}
/* =========================================================
   LORDBLESS FLOATING WHATSAPP
   ========================================================= */

.lordbless-floating-whatsapp {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 13px 18px;

    background: #25D366;
    color: #ffffff;

    border-radius: 999px;

    text-decoration: none;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.lordbless-floating-whatsapp:hover {
    color: #ffffff;
    text-decoration: none;

    transform: translateY(-3px);

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.lordbless-whatsapp-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    flex-shrink: 0;
}

.lordbless-whatsapp-label {
    white-space: nowrap;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .lordbless-floating-whatsapp {
        right: 16px;
        bottom: 16px;

        width: 54px;
        height: 54px;

        padding: 0;

        justify-content: center;

        border-radius: 50%;
    }

    .lordbless-whatsapp-label {
        display: none;
    }

    .lordbless-whatsapp-icon {
        width: 30px;
        height: 30px;
    }
}
/* =========================================================
   EXPANDED JOURNEY STORIES
   ========================================================= */

.journey-story-full {
    margin-top: 1rem;
}

.journey-story-full summary {
    cursor: pointer;
    list-style: none;
    display: inline-block;
}

.journey-story-full summary::-webkit-details-marker {
    display: none;
}

.journey-story-full summary::after {
    content: " +";
    font-weight: 500;
}

.journey-story-full[open] summary::after {
    content: " −";
}

.journey-story-expanded {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
}

.journey-story-expanded p {
    line-height: 1.75;
}

.journey-story-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.journey-story-expanded h4 {
    margin-bottom: 1.25rem;
    line-height: 1.35;
}

.journey-story-expanded-block {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.journey-story-expanded-block h5 {
    margin-bottom: 0.65rem;
}

.journey-story-closing {
    margin-top: 1.75rem;
    font-weight: 600;
}