/* =========================================================
   AJ QUALITY CONSULTANCY SERVICES
   FULL WEBSITE CSS
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

    --navy: #071a3a;

    --navy-2: #0d2a55;

    --gold: #c59619;

    --gold-light: #e2bd58;

    --cream: #f7f6f1;

    --white: #ffffff;

    --ink: #16243b;

    --muted: #687386;

    --light-muted: #929baa;

    --line: rgba(7, 26, 58, 0.12);

    --white-line: rgba(255, 255, 255, 0.12);

    --shadow:
        0 24px 70px rgba(7, 26, 58, 0.09);

}



/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family:
        "DM Sans",
        Arial,
        Helvetica,
        sans-serif;

    color: var(--ink);

    background: var(--cream);

    overflow-x: hidden;

}


img {

    max-width: 100%;

    display: block;

}


a {

    color: inherit;

    text-decoration: none;

}


button {

    font-family: inherit;

}



/* =========================================================
   GLOBAL CONTAINER
========================================================= */

.container {

    width: min(1240px, 90%);

    margin-left: auto;

    margin-right: auto;

}


.section {

    padding-top: 120px;

    padding-bottom: 120px;

}



/* =========================================================
   SCROLL REVEAL ANIMATION
========================================================= */

.reveal {

    opacity: 0;

    transform:
        translateY(28px);

    transition:

        opacity 0.8s ease,

        transform
        0.8s
        cubic-bezier(
            0.2,
            0.65,
            0.25,
            1
        );

}


.reveal.visible {

    opacity: 1;

    transform:
        translateY(0);

}


.reveal-delay {

    transition-delay: 0.14s;

}



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

.header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        rgba(
            247,
            246,
            241,
            0.92
        );

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    border-bottom:
        1px solid
        rgba(
            7,
            26,
            58,
            0.08
        );

}


.header-inner {

    min-height: 92px;

    display: flex;

    align-items: center;

    gap: 30px;

}



/* =========================================================
   BRAND
========================================================= */

.brand {

    display: flex;

    align-items: center;

    gap: 14px;

    flex-shrink: 0;

}


.brand-logo {

    width: 72px;

    height: 55px;

    overflow: hidden;

    border-radius: 6px;

    background: white;

    box-shadow:
        0 7px 24px
        rgba(
            7,
            26,
            58,
            0.08
        );

}


.brand-logo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.brand-copy {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.brand-name {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 27px;

    line-height: 1;

    color: var(--navy);

}


.brand-title {

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.8px;

    color: var(--gold);

}



/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.desktop-nav {

    margin-left: auto;

    display: flex;

    align-items: center;

    gap: 30px;

}


.desktop-nav a {

    position: relative;

    padding:
        8px 0;

    color:
        #4f5c70;

    font-size: 14px;

    font-weight: 600;

}


.desktop-nav a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 1px;

    background:
        var(--gold);

    transition:
        width 0.3s ease;

}


.desktop-nav a:hover {

    color: var(--navy);

}


.desktop-nav a:hover::after {

    width: 100%;

}



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

.header-cta {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        12px 18px;

    color:
        var(--white);

    background:
        var(--navy);

    font-size: 13px;

    font-weight: 600;

    transition:
        transform 0.25s ease,
        background 0.25s ease;

}


.header-cta:hover {

    transform:
        translateY(-2px);

    background:
        var(--navy-2);

}


.header-cta span {

    color:
        var(--gold-light);

    font-size: 16px;

}



/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.menu-toggle {

    display: none;

    width: 42px;

    height: 42px;

    margin-left: auto;

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

    background:
        transparent;

    cursor: pointer;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;

}


.menu-toggle span {

    width: 19px;

    height: 1.5px;

    background:
        var(--navy);

    transition:
        transform 0.25s ease;

}



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

.mobile-menu {

    display: none;

    padding:
        0 5% 20px;

}


.mobile-menu a {

    display: block;

    padding:
        13px 0;

    border-bottom:
        1px solid
        var(--line);

    color:
        var(--navy);

    font-weight: 600;

}


.mobile-menu.open {

    display: block;

}



/* =========================================================
   HERO
========================================================= */

.hero {

    min-height:
        calc(
            100vh - 92px
        );

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    overflow: hidden;

}


.hero-background {

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 77% 42%,
            rgba(
                197,
                150,
                25,
                0.13
            ),
            transparent 25%
        ),

        linear-gradient(
            120deg,
            transparent 0 55%,
            rgba(
                7,
                26,
                58,
                0.025
            )
            55% 55.2%,
            transparent 55.2%
        );

}


.hero-grid {

    min-height: 680px;

    display: grid;

    grid-template-columns:
        1.03fr
        0.97fr;

    align-items: center;

    gap: 80px;

    position: relative;

    z-index: 1;

}



/* =========================================================
   HERO CONTENT
========================================================= */

.eyebrow {

    display: flex;

    align-items: center;

    gap: 12px;

    color:
        var(--gold);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

}


.eyebrow span {

    width: 42px;

    height: 2px;

    background:
        var(--gold);

}


.hero h1 {

    margin-top: 24px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    color:
        var(--navy);

    font-size:
        clamp(
            58px,
            6.2vw,
            92px
        );

    font-weight: 600;

    line-height: 1.02;

    letter-spacing: -3px;

}


.hero h1 em {

    color:
        var(--gold);

    font-style: italic;

    font-weight: 500;

}


.hero-description {

    max-width: 640px;

    margin-top: 30px;

    color:
        var(--muted);

    font-size: 18px;

    line-height: 1.85;

}



/* =========================================================
   HERO ACTIONS
========================================================= */

.hero-actions {

    display: flex;

    align-items: center;

    gap: 27px;

    margin-top: 38px;

}


.btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    min-height: 52px;

    padding:
        0 23px;

    font-size: 14px;

    font-weight: 700;

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

}


.btn-primary {

    color:
        var(--white);

    background:
        var(--navy);

    box-shadow:
        0 14px 30px
        rgba(
            7,
            26,
            58,
            0.15
        );

}


.btn-primary:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 35px
        rgba(
            7,
            26,
            58,
            0.22
        );

}


.btn-primary span {

    color:
        var(--gold-light);

    font-size: 17px;

}


.text-link,
.inline-link,
.light-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color:
        var(--navy);

    font-size: 14px;

    font-weight: 700;

}


.text-link span,
.inline-link span,
.light-link span {

    color:
        var(--gold);

    transition:
        transform 0.25s ease;

}


.text-link:hover span,
.inline-link:hover span,
.light-link:hover span {

    transform:
        translateX(4px);

}



/* =========================================================
   HERO STATS
========================================================= */

.hero-meta {

    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 52px;

}


.hero-stat {

    display: flex;

    align-items: center;

    gap: 12px;

}


.hero-stat strong {

    color:
        var(--gold);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 29px;

}


.hero-stat span {

    color:
        var(--muted);

    font-size: 11px;

    line-height: 1.5;

}


.meta-divider {

    width: 1px;

    height: 36px;

    background:
        var(--line);

}



/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual {

    min-height: 570px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}


.visual-glow {

    position: absolute;

    width: 360px;

    height: 360px;

    border-radius: 50%;

    background:
        rgba(
            197,
            150,
            25,
            0.10
        );

    filter:
        blur(55px);

}


.visual-ring {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(
            197,
            150,
            25,
            0.30
        );

}


.ring-one {

    width: 490px;

    height: 490px;

}


.ring-two {

    width: 390px;

    height: 390px;

    border-color:
        rgba(
            7,
            26,
            58,
            0.12
        );

}



/* =========================================================
   HERO BRAND CARD
========================================================= */

.hero-card {

    width: 350px;

    min-height: 430px;

    position: relative;

    z-index: 2;

    padding:
        45px 35px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background:
        var(--navy);

    color:
        white;

    box-shadow:
        0 35px 75px
        rgba(
            7,
            26,
            58,
            0.22
        );

    animation:
        cardFloat
        6s
        ease-in-out
        infinite;

}


.card-top-line {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );

}


.hero-card::before,
.hero-card::after {

    content: "";

    position: absolute;

    width: 70px;

    height: 70px;

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

}


.hero-card::before {

    top: 17px;

    left: 17px;

    border-width:
        1px 0 0 1px;

}


.hero-card::after {

    right: 17px;

    bottom: 17px;

    border-width:
        0 1px 1px 0;

}


.hero-card-logo {

    width: 170px;

    height: 122px;

    background:
        white;

    border-radius: 5px;

    overflow: hidden;

}


.hero-card-logo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.hero-card-label {

    margin-top: 25px;

    color:
        var(--gold-light);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;

}


.hero-card h2 {

    margin-top: 7px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    text-align: center;

    font-size: 22px;

    letter-spacing: 1px;

    line-height: 1.25;

}


.gold-line {

    width: 90px;

    height: 1px;

    margin:
        22px 0 16px;

    background:
        var(--gold);

}


.hero-card-tagline {

    max-width: 230px;

    color:
        #e6d6a8;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 16px;

    font-style: italic;

    text-align: center;

    line-height: 1.5;

}



/* =========================================================
   FLOATING BADGES
========================================================= */

.floating-badge {

    position: absolute;

    z-index: 4;

    display: flex;

    align-items: center;

    gap: 11px;

    min-width: 175px;

    padding:
        13px 15px;

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

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

    box-shadow:
        0 15px 35px
        rgba(
            7,
            26,
            58,
            0.10
        );

}


.badge-one {

    top: 92px;

    right: 0;

    animation:
        cardFloat
        6s
        ease-in-out
        0.7s
        infinite;

}


.badge-two {

    bottom: 90px;

    left: 0;

    animation:
        cardFloat
        6s
        ease-in-out
        1.2s
        infinite;

}


.badge-icon {

    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        var(--gold);

    border:
        1px solid
        rgba(
            197,
            150,
            25,
            0.35
        );

    font-size: 12px;

    font-weight: 700;

}


.floating-badge strong,
.floating-badge small {

    display: block;

}


.floating-badge strong {

    color:
        var(--navy);

    font-size: 12px;

}


.floating-badge small {

    margin-top: 3px;

    color:
        var(--muted);

    font-size: 9px;

}



/* =========================================================
   HERO BOTTOM
========================================================= */

.hero-bottom {

    position: relative;

    z-index: 1;

    padding-bottom: 28px;

    display: flex;

    justify-content: space-between;

    color:
        var(--light-muted);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.6px;

}


.scroll-note {

    display: flex;

    align-items: center;

    gap: 9px;

    text-transform: uppercase;

}


.scroll-note i {

    display: block;

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background:
        var(--gold);

}



/* =========================================================
   ABOUT
========================================================= */

.about {

    background:
        var(--white);

}


.about-grid {

    display: grid;

    grid-template-columns:
        0.9fr
        1.1fr;

    gap: 110px;

    align-items: start;

}


.section-kicker {

    color:
        var(--gold);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2.4px;

    text-transform: uppercase;

}


.about-heading h2,
.section-header h2,
.expertise-content h2,
.contact-copy h2 {

    margin-top: 14px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    color:
        var(--navy);

    font-size:
        clamp(
            42px,
            4.5vw,
            64px
        );

    font-weight: 600;

    line-height: 1.12;

    letter-spacing: -1.5px;

}


.about-heading h2 span,
.section-header h2 span,
.expertise-content h2 span,
.contact-copy h2 span {

    color:
        var(--gold);

    font-style: italic;

}


.about-content {

    max-width: 650px;

}


.about-content p {

    margin-bottom: 20px;

    color:
        var(--muted);

    font-size: 16px;

    line-height: 1.9;

}


.about-content .lead {

    color:
        var(--ink);

    font-size: 20px;

    line-height: 1.7;

}


.about-content strong {

    color:
        var(--navy);

}


.inline-link {

    margin-top: 15px;

}



/* =========================================================
   TRUST STRIP
========================================================= */

.trust-strip {

    background:
        var(--navy);

    color:
        white;

}


.trust-grid {

    display: grid;

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

}


.trust-item {

    min-height: 145px;

    padding:
        28px 35px;

    display: flex;

    align-items: center;

    gap: 18px;

    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

}


.trust-item:last-child {

    border-right:
        0;

}


.trust-number {

    color:
        var(--gold-light);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 31px;

    white-space: nowrap;

}


.trust-item > span:last-child {

    max-width: 220px;

    color:
        #c2cbd8;

    font-size: 13px;

    line-height: 1.5;

}



/* =========================================================
   SERVICES
========================================================= */

.services {

    background:
        var(--cream);

}


.section-header {

    display: grid;

    grid-template-columns:
        1fr
        0.65fr;

    gap: 80px;

    align-items: end;

    margin-bottom: 50px;

}


.section-intro {

    color:
        var(--muted);

    font-size: 16px;

    line-height: 1.8;

}


.service-grid {

    display: grid;

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

    border-top:
        1px solid
        var(--line);

    border-left:
        1px solid
        var(--line);

}


.service-card {

    min-height: 360px;

    padding:
        28px;

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

    border-right:
        1px solid
        var(--line);

    border-bottom:
        1px solid
        var(--line);

    transition:

        background
        0.3s ease,

        transform
        0.3s ease,

        box-shadow
        0.3s ease;

}


.service-card:hover {

    background:
        white;

    transform:
        translateY(-6px);

    box-shadow:
        0 22px 45px
        rgba(
            7,
            26,
            58,
            0.07
        );

}


.service-head {

    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

}


.service-index {

    color:
        var(--gold);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 24px;

}


.service-arrow {

    color:
        #9ca5b2;

    font-size: 18px;

    transition:

        color
        0.25s ease,

        transform
        0.25s ease;

}


.service-card:hover
.service-arrow {

    color:
        var(--gold);

    transform:
        translate(
            2px,
            -2px
        );

}



/* =========================================================
   SERVICE ICONS
========================================================= */

.service-icon {

    width: 58px;

    height: 58px;

    margin:
        42px 0 27px;

    display: flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--navy);

}


.service-icon svg {

    width: 30px;

    height: 30px;

    fill:
        none;

    stroke:
        var(--gold-light);

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


.service-card h3 {

    max-width: 245px;

    color:
        var(--navy);

    font-size: 20px;

    line-height: 1.35;

}


.service-card p {

    margin-top: 14px;

    color:
        var(--muted);

    font-size: 14px;

    line-height: 1.75;

}



/* =========================================================
   EXPERTISE
========================================================= */

.expertise {

    background:
        var(--white);

}


.expertise-grid {

    display: grid;

    grid-template-columns:
        0.85fr
        1.15fr;

    gap: 120px;

    align-items:
        center;

}


.expertise-visual {

    min-height: 520px;

    position: relative;

    display: flex;

    align-items:
        center;

    justify-content:
        center;

}


.expertise-frame {

    width: 370px;

    height: 430px;

    position: relative;

    display: flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--navy);

    box-shadow:
        0 30px 60px
        rgba(
            7,
            26,
            58,
            0.18
        );

}


.expertise-frame::before,
.expertise-frame::after {

    content: "";

    position: absolute;

    width: 100px;

    height: 100px;

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

}


.expertise-frame::before {

    left: 20px;

    top: 20px;

    border-width:
        1px 0 0 1px;

}


.expertise-frame::after {

    right: 20px;

    bottom: 20px;

    border-width:
        0 1px 1px 0;

}


.frame-line {

    width: 70px;

    height: 1px;

    background:
        var(--gold);

}


.frame-small {

    color:
        #d8c58d;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;

}


.frame-small.bottom {

    margin-top: 25px;

}


.frame-mark {

    margin:
        20px 0 5px;

    color:
        white;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 100px;

    line-height: 1;

}


.experience-badge {

    position: absolute;

    right: 0;

    bottom: 45px;

    width: 170px;

    padding: 19px;

    background:
        white;

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

    box-shadow:
        0 20px 40px
        rgba(
            7,
            26,
            58,
            0.10
        );

}


.experience-badge strong,
.experience-badge span,
.experience-badge small {

    display: block;

}


.experience-badge strong {

    color:
        var(--gold);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 38px;

}


.experience-badge span {

    color:
        var(--navy);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

}


.experience-badge small {

    margin-top: 8px;

    color:
        var(--muted);

    font-size: 8px;

    letter-spacing: 1px;

}


.expertise-lead {

    max-width: 620px;

    margin-top: 25px;

    color:
        var(--muted);

    font-size: 18px;

    line-height: 1.8;

}



/* =========================================================
   PRINCIPLES
========================================================= */

.principles {

    margin-top: 38px;

}


.principle {

    display: grid;

    grid-template-columns:
        45px
        1fr;

    gap: 18px;

    padding:
        21px 0;

    border-top:
        1px solid
        var(--line);

}


.principle:last-child {

    border-bottom:
        1px solid
        var(--line);

}


.principle > span {

    color:
        var(--gold);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 19px;

}


.principle h3 {

    color:
        var(--navy);

    font-size: 16px;

}


.principle p {

    margin-top: 6px;

    color:
        var(--muted);

    font-size: 14px;

    line-height: 1.65;

}



/* =========================================================
   CONSULTANT
========================================================= */

.consultant {

    position: relative;

    overflow: hidden;

    background:
        var(--navy);

    color:
        white;

}


.consultant::before {

    content: "";

    position: absolute;

    width: 600px;

    height: 600px;

    border:
        1px solid
        rgba(
            197,
            150,
            25,
            0.22
        );

    border-radius: 50%;

    right: -300px;

    top: -250px;

}


.consultant-grid {

    min-height: 560px;

    display: grid;

    grid-template-columns:
        1fr
        0.8fr;

    gap: 100px;

    align-items:
        center;

    position: relative;

    z-index: 1;

}


.consultant-copy
.section-kicker {

    color:
        var(--gold-light);

}


.consultant-copy h2 {

    margin-top: 14px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    color:
        white;

    font-size:
        clamp(
            54px,
            6vw,
            82px
        );

    line-height: 1;

}


.consultant-copy h2 em {

    color:
        var(--gold-light);

    font-style:
        italic;

    font-weight:
        500;

}


.role {

    margin-top: 13px;

    color:
        var(--gold-light);

    font-size: 18px;

    font-weight: 600;

}


.consultant-description {

    max-width: 560px;

    margin-top: 25px;

    color:
        #c2ccda;

    font-size: 17px;

    line-height: 1.85;

}


.light-link {

    margin-top: 32px;

    color:
        white;

}



/* =========================================================
   CONSULTANT PROFILE
========================================================= */

.consultant-profile {

    width:
        min(
            390px,
            100%
        );

    min-height: 390px;

    justify-self:
        end;

    padding: 30px;

    display: flex;

    flex-direction:
        column;

    justify-content:
        space-between;

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

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

    position:
        relative;

}


.consultant-profile::before {

    content: "";

    position:
        absolute;

    inset: 15px;

    border:
        1px solid
        rgba(
            197,
            150,
            25,
            0.35
        );

    pointer-events:
        none;

}


.profile-top,
.profile-bottom {

    display:
        flex;

    justify-content:
        space-between;

    position:
        relative;

    z-index:
        1;

}


.profile-top span:first-child {

    color:
        var(--gold-light);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        28px;

}


.profile-top span:last-child,
.profile-bottom {

    color:
        #8795aa;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.8px;

}


.profile-name {

    position:
        relative;

    z-index:
        1;

    text-align:
        center;

}


.profile-name strong {

    display:
        block;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        48px;

}


.profile-name span {

    display:
        block;

    margin-top:
        8px;

    color:
        var(--gold-light);

    font-size:
        12px;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}



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

.contact {

    background:
        var(--cream);

}


.contact-grid {

    display:
        grid;

    grid-template-columns:
        0.9fr
        1.1fr;

    gap:
        100px;

    align-items:
        center;

}


.contact-copy h2 {

    max-width:
        600px;

}


.contact-copy > p:last-child {

    max-width:
        570px;

    margin-top:
        25px;

    color:
        var(--muted);

    font-size:
        17px;

    line-height:
        1.85;

}


.contact-list {

    border-top:
        1px solid
        var(--line);

}


.contact-row {

    min-height:
        105px;

    display:
        grid;

    grid-template-columns:
        55px
        1fr
        25px;

    gap:
        18px;

    align-items:
        center;

    border-bottom:
        1px solid
        var(--line);

    transition:
        padding
        0.3s ease,

        background
        0.3s ease;

}


.contact-row:hover {

    padding-left:
        12px;

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

}


.contact-icon {

    width:
        47px;

    height:
        47px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--gold);

    border:
        1px solid
        rgba(
            197,
            150,
            25,
            0.45
        );

    font-size:
        18px;

}


.contact-text small,
.contact-text strong {

    display:
        block;

}


.contact-text small {

    margin-bottom:
        5px;

    color:
        var(--muted);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


.contact-text strong {

    color:
        var(--navy);

    font-size:
        18px;

}


.contact-arrow {

    color:
        var(--gold);

    font-size:
        20px;

}



/* =========================================================
   FOOTER
========================================================= */

.footer {

    background:
        #041329;

    color:
        #aeb9c9;

}


.footer-main {

    padding:
        75px 0 65px;

    display:
        grid;

    grid-template-columns:
        0.9fr
        1.5fr;

    gap:
        100px;

}


.footer-brand {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        15px;

}


.footer-logo {

    width:
        72px;

    height:
        56px;

    flex-shrink:
        0;

    overflow:
        hidden;

    border-radius:
        5px;

    background:
        white;

}


.footer-logo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.footer-brand strong {

    display:
        block;

    color:
        white;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        20px;

    line-height:
        1.3;

}


.footer-brand p {

    margin-top:
        8px;

    color:
        var(--gold-light);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        14px;

    font-style:
        italic;

}



/* =========================================================
   FOOTER COLUMNS
========================================================= */

.footer-columns {

    display:
        grid;

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

    gap:
        45px;

}


.footer-column h4 {

    margin-bottom:
        20px;

    color:
        white;

    font-size:
        12px;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;

}


.footer-column a {

    display:
        block;

    width:
        fit-content;

    margin-bottom:
        12px;

    color:
        #9eabbd;

    font-size:
        13px;

    line-height:
        1.4;

    transition:
        color
        0.2s ease,

        transform
        0.2s ease;

}


.footer-column a:hover {

    color:
        var(--gold-light);

    transform:
        translateX(3px);

}



/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {

    min-height:
        75px;

    display:
        grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    gap:
        25px;

    align-items:
        center;

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

    font-size:
        11px;

}


.footer-tagline {

    color:
        #8290a4;

    letter-spacing:
        1px;

}


.footer-tagline span {

    color:
        var(--gold);

    padding:
        0 7px;

}


.back-top {

    justify-self:
        end;

    color:
        var(--gold-light);

    font-weight:
        600;

    transition:
        transform
        0.2s ease;

}


.back-top:hover {

    transform:
        translateY(-2px);

}



/* =========================================================
   MAIN FLOATING ANIMATION
========================================================= */

@keyframes cardFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }


    50% {

        transform:
            translateY(-8px);

    }

}



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

@media (max-width: 1100px) {


    .desktop-nav {

        gap:
            20px;

    }


    .hero-grid {

        gap:
            45px;

    }


    .service-grid {

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

    }


    .about-grid,
    .expertise-grid {

        gap:
            70px;

    }


    .consultant-grid {

        gap:
            60px;

    }

}



/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {


    .desktop-nav,
    .header-cta {

        display:
            none;

    }


    .menu-toggle {

        display:
            flex;

    }


    .hero-grid {

        grid-template-columns:
            1fr;

        padding:
            70px 0;

    }


    .hero-content {

        text-align:
            center;

        margin:
            auto;

    }


    .eyebrow {

        justify-content:
            center;

    }


    .hero-description {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .hero-actions {

        justify-content:
            center;

    }


    .hero-meta {

        justify-content:
            center;

    }


    .about-grid,
    .expertise-grid,
    .consultant-grid,
    .contact-grid {

        grid-template-columns:
            1fr;

    }


    .about-heading {

        max-width:
            700px;

    }


    .section-header {

        grid-template-columns:
            1fr;

        gap:
            25px;

    }


    .expertise-visual {

        max-width:
            520px;

    }


    .consultant-profile {

        justify-self:
            start;

    }


    .footer-main {

        grid-template-columns:
            1fr;

        gap:
            55px;

    }

}



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

@media (max-width: 650px) {


    .container {

        width:
            88%;

    }


    .header-inner {

        min-height:
            82px;

    }


    .brand-logo {

        width:
            62px;

        height:
            48px;

    }


    .brand-name {

        font-size:
            23px;

    }


    .brand-title {

        font-size:
            7px;

        letter-spacing:
            1.2px;

    }



    /* Hero */

    .hero {

        min-height:
            auto;

    }


    .hero-grid {

        min-height:
            auto;

        padding:
            55px 0 35px;

    }


    .hero h1 {

        font-size:
            49px;

        letter-spacing:
            -1.6px;

    }


    .hero-description {

        font-size:
            16px;

        line-height:
            1.75;

    }


    .hero-actions {

        flex-direction:
            column;

        gap:
            20px;

    }


    .hero-meta {

        gap:
            15px;

        margin-top:
            42px;

    }


    .hero-stat {

        gap:
            8px;

    }


    .hero-stat strong {

        font-size:
            24px;

    }


    .hero-stat span {

        font-size:
            9px;

    }



    /* Hero Visual */

    .hero-visual {

        min-height:
            430px;

        margin-top:
            15px;

    }


    .ring-one {

        width:
            350px;

        height:
            350px;

    }


    .ring-two {

        width:
            285px;

        height:
            285px;

    }


    .hero-card {

        width:
            275px;

        min-height:
            350px;

    }


    .hero-card-logo {

        width:
            140px;

        height:
            100px;

    }


    .floating-badge {

        min-width:
            145px;

        padding:
            10px;

    }


    .badge-one {

        right:
            0;

        top:
            25px;

    }


    .badge-two {

        left:
            0;

        bottom:
            25px;

    }


    .hero-bottom {

        display:
            none;

    }



    /* Sections */

    .section {

        padding:
            80px 0;

    }


    .about-heading h2,
    .section-header h2,
    .expertise-content h2,
    .contact-copy h2 {

        font-size:
            41px;

    }


    .about-content .lead {

        font-size:
            18px;

    }



    /* Trust */

    .trust-grid {

        grid-template-columns:
            1fr;

    }


    .trust-item {

        min-height:
            110px;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                0.12
            );

    }


    .trust-item:last-child {

        border-bottom:
            0;

    }



    /* Services */

    .service-grid {

        grid-template-columns:
            1fr;

    }


    .service-card {

        min-height:
            auto;

        padding:
            28px 24px;

    }



    /* Expertise */

    .expertise-visual {

        min-height:
            420px;

    }


    .expertise-frame {

        width:
            285px;

        height:
            350px;

    }


    .frame-mark {

        font-size:
            80px;

    }


    .experience-badge {

        right:
            0;

        bottom:
            20px;

    }



    /* Consultant */

    .consultant-grid {

        min-height:
            auto;

        padding:
            85px 0;

    }


    .consultant-copy h2 {

        font-size:
            52px;

    }


    .consultant-profile {

        min-height:
            330px;

    }


    .profile-name strong {

        font-size:
            38px;

    }



    /* Contact */

    .contact-row {

        grid-template-columns:
            48px
            1fr
            18px;

        gap:
            12px;

        min-height:
            95px;

    }


    .contact-text strong {

        font-size:
            15px;

        word-break:
            break-word;

    }



    /* Footer */

    .footer-main {

        padding:
            60px 0 50px;

    }


    .footer-columns {

        grid-template-columns:
            1fr 1fr;

        gap:
            40px 25px;

    }


    .footer-column:last-child {

        grid-column:
            1 / -1;

    }


    .footer-bottom {

        padding:
            20px 0;

        grid-template-columns:
            1fr;

        gap:
            12px;

    }


    .back-top {

        justify-self:
            start;

    }

}



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

@media (max-width: 380px) {


    .hero h1 {

        font-size:
            43px;

    }


    .hero-meta {

        flex-wrap:
            wrap;

    }


    .meta-divider {

        display:
            none;

    }


    .hero-visual {

        transform:
            scale(
                0.90
            );

        margin:
            -20px 0;

    }


    .footer-columns {

        grid-template-columns:
            1fr;

    }


    .footer-column:last-child {

        grid-column:
            auto;

    }

}