/* =========================================================================

   Expazia — Pixel-Perfect Stylesheet

   ========================================================================= */



/* === VARIABLES === */

:root {

    --gold:        #dcac48;

    --gold-dark:   #c19430;

    --gold-light:  #efc468;

    --cream:       #F5F2EC;

    --dark:        #1A1A1A;

    --charcoal:    #111111;

    --text-dark:   #222222;

    --text-mid:    #555555;

    --text-muted:  #888888;

    --white:       #FFFFFF;

    --black:       #000000;

	--bgcolor:     #F5F2EB;

    --border:      rgba(220,172,72,0.35);



    --font-serif:  'Cormorant Garamond', Georgia, serif;

    --font-sans:   'Inter', sans-serif;



    --ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);

    --trans:       all 0.35s var(--ease);

}



/* === RESET === */

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

html, body {

    overflow-x: hidden !important;

    max-width: 100%;

    width: 100%;

    margin: 0;

    padding: 0;

}

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

body {

    font-family: var(--font-sans);

    font-weight: 400;

    line-height: 1.65;

    color: var(--text-dark);

    background: var(--bgcolor);

    position: relative;

}

a { text-decoration: none; color: inherit; transition: var(--trans); }

ul { list-style: none; }

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

h1, h2, h3, h4 { font-family: var(--font-serif); line-height: 1.15; }



/* === BUTTONS === */

.btn-gold {

    display: inline-block;

    padding: 0.4rem 2rem;

    background: var(--gold);

    color: var(--black);

    font-family: var(--font-sans);

    font-size: 0.9rem;

    font-weight: 600;

    letter-spacing: 0.03em;

    text-transform: none;

    border-radius: 50px;

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

    transition: var(--trans);

}

.btn-gold:hover {

    background: var(--gold-dark);

    border-color: var(--gold-dark);

    transform: translateY(-2px);

    box-shadow: 0 8px 24px rgba(212,175,55,0.35);

}



.btn-outline {

    display: inline-block;

    padding: 0.85rem 2.4rem;

    background: transparent;

    color: var(--gold);

    font-family: var(--font-sans);

    font-size: 0.85rem;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    border-radius: 50px;

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

    transition: var(--trans);

}

.btn-outline:hover {

    background: var(--gold);

    color: var(--white);

    transform: translateY(-2px);

}



.btn-outline-gold {

    display: inline-block;

    padding: 0.85rem 2.8rem;

    background: transparent;

    color: var(--gold);

    font-family: var(--font-sans);

    font-size: 0.85rem;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    border-radius: 50px;

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

    transition: var(--trans);

}

.btn-outline-gold:hover {

    background: var(--gold);

    color: var(--white);

}



/* =========================================================================

   HEADER

   ========================================================================= */

.header {

    position: fixed;

    top: 0; left: 0; width: 100%;

    z-index: 1000;

    background: var(--cream);

    border-bottom: 1px solid rgba(0,0,0,0.06);

    transition: var(--trans);

}



.header-inner {

    max-width: 100%;

    margin: 0;

    padding: 0 3rem;

    height: 68px;

    display: flex;

    align-items: center;

    gap: 3rem;

}



/* Logo */

.logo { flex-shrink: 0; }

.logo img { height: 50px; width: auto; }



/* Nav */

.nav { 

    flex: 1; 

    display: flex;

    justify-content: flex-end;

}

.nav-list {

    display: flex;

    align-items: center;

    gap: 2rem;

    justify-content: flex-end;

}



.nav-link {

    font-family: var(--font-sans);

    font-size: 1.0rem;

    font-weight: 400;

    color: var(--text-dark);

    letter-spacing: 0.01em;

    position: relative;

    padding-bottom: 2px;

    white-space: nowrap;

}



.nav-link::after {

    content: '';

    position: absolute;

    bottom: -2px; left: 0;

    width: 0; height: 1.5px;

    background: var(--gold);

    transition: width 0.3s var(--ease);

}

.nav-link:hover,

.nav-link.active { color: var(--text-dark); font-weight: 500; }

.nav-link:hover::after,

.nav-link.active::after { width: 100%; }



/* Hide Resources dropdown on mobile/tablet */
@media (max-width: 1200px) {
    .header-dropdown { display: none; }
}


.mobile-toggle {

    display: none;

    flex-direction: column;

    gap: 5px;

    background: none;

    border: none;

    cursor: pointer;

    padding: 8px;

    margin-left: auto;

    position: relative;

    z-index: 1100;

    width: 40px;

    height: 40px;

    justify-content: center;

    align-items: center;

}

.mobile-toggle span {

    display: block;

    width: 24px; height: 2px;

    background: #111111; /* Explicit dark color */

    transition: var(--trans);

    border-radius: 2px;

}



/* Toggle Animation */

.mobile-toggle.active span:nth-child(1) {

    transform: translateY(7px) rotate(45deg);

}

.mobile-toggle.active span:nth-child(2) {

    opacity: 0;

    transform: translateX(-10px);

}

.mobile-toggle.active span:nth-child(3) {

    transform: translateY(-7px) rotate(-45deg);

}



/* Header Dropdown */

.header-dropdown {

    position: relative;

    display: inline-block;

    margin-left: auto;

    margin-right: 2rem;

}



.header-dropdown .btn-gold {

    padding: 0.5rem 1.5rem;

    font-size: 0.85rem;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    cursor: pointer;

}



.dropdown-content {

    position: absolute;

    top: 100%;

    right: 0;

    width: 220px;

    background: var(--white);

    border-radius: 12px;

    box-shadow: 0 15px 40px rgba(0,0,0,0.12);

    padding: 0.6rem 0;

    margin-top: 15px;

    opacity: 0;

    visibility: hidden;

    transform: translateY(15px);

    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    z-index: 100;

    border: 1px solid rgba(220,172,72,0.15);

}



.header-dropdown:hover .dropdown-content {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.dropdown-content::before {

    content: '';

    position: absolute;

    top: -8px;

    right: 25px;

    width: 15px;

    height: 15px;

    background: var(--white);

    transform: rotate(45deg);

    border-left: 1px solid rgba(220,172,72,0.15);

    border-top: 1px solid rgba(220,172,72,0.15);

}



.dropdown-item {

    display: flex;

    align-items: center;

    gap: 0.8rem;

    padding: 0.8rem 1.5rem;

    color: var(--text-dark);

    font-size: 0.9rem;

    font-weight: 500;

    transition: all 0.3s ease;

}



.dropdown-item i {

    color: var(--gold);

    font-size: 1rem;

    transition: all 0.3s ease;

}



.dropdown-item:hover {
    background: var(--cream);
    color: var(--gold-dark);
    padding-left: 1.8rem;
}

.dropdown-item:hover i {
    transform: scale(1.1);
}

/* Responsive adjustment for header dropdown */
@media (max-width: 1200px) {
    .header-actions { gap: 1.5rem; }
    .brochure-link span { display: none; } /* Hide text on smaller screens, keep icon */
    .header-dropdown { display: none; } /* Hide Resources dropdown on mobile/tablet */
}

@media (max-width: 1024px) {
    .header-inner {
        padding: 0 1.5rem;
        gap: 1rem;
    }
    .header-actions {
        margin-right: 1rem;
    }
}



/* Mobile Menu Dropdown (Inside #nav.open) */

.mobile-resources {

    display: none;

}



.nav.open .mobile-resources {

    display: block;

    padding: 1rem 2rem;

    border-top: 1px solid rgba(0,0,0,0.05);

    margin-top: 1rem;

}



.mobile-resources-title {

    font-size: 0.8rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    color: var(--gold);

    margin-bottom: 1rem;

}



.mobile-res-link {

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: 0.8rem 0;

    font-size: 1.1rem;

    font-weight: 500;

    color: var(--text-dark);

}



/* =========================================================================

   HERO SECTION

   ========================================================================= */

.hero {

    position: relative;

    width: 100%;

    height: calc(100vh - 68px);

    min-height: 600px;

    margin-top: 68px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    color: var(--white);

}



/* Background image */

.hero-bg {

    position: absolute;

    inset: 0;

    background-image: url('../images/navigating_real_estate_growth.png'); /* relative from css/ folder */

    background-size: cover;

    background-position: center center;

    z-index: 0;

    transform: scale(1.04);

}



/* Dark overlay — matches reference: ~55% left, lighter right */

.hero-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(

        105deg,

        rgba(10,10,10,0.65) 0%,

        rgba(10,10,10,0.50) 55%,

        rgba(10,10,10,0.30) 100%

    );

    z-index: 1;

}



/* Gold curved decorative SVG line (right side) */

.hero-deco {

    position: absolute;

    right: 0; top: 0;

    height: 100%; width: 200px;

    z-index: 2;

    pointer-events: none;

}

.hero-deco svg { width: 100%; height: 100%; }



/* Content — center-aligned matching requested reference */

.hero-content {

    position: relative;

    z-index: 3;

    max-width: 1400px;

    width: 100%;

    padding: 0 2rem;

    text-align: center;

    margin: 0;

}



/* Hero Text Slider */

.hero-text-slider {

    position: relative;

    width: 100%;

    display: grid;

    grid-template-columns: 1fr;

    grid-template-rows: 1fr;

    place-items: center;

    min-height: 400px; /* Increased to accommodate multi-line titles comfortably */

}



.hero-text-slide {

    grid-column: 1 / 2;

    grid-row: 1 / 2;

    width: 100%;

    opacity: 0;

    visibility: hidden;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}



.hero-text-slide.active {

    opacity: 1;

    visibility: visible;

}



/* Slider Navigation */

.hero-nav-prev, .hero-nav-next {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

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

    border: 1px solid rgba(220,172,72,0.3);

    color: var(--white);

    width: 50px;

    height: 50px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 10;

    transition: var(--trans);

    backdrop-filter: blur(4px);

    opacity: 0; /* Hidden by default on desktop */

    pointer-events: none; /* Prevent clicking when invisible */

}



@media (max-width: 1024px) {

    .hero-nav-prev, .hero-nav-next {

        opacity: 0.8;

        pointer-events: auto;

    }

}



.hero:hover .hero-nav-prev,

.hero:hover .hero-nav-next {

    opacity: 1; /* Show when hovering anywhere in the hero section */

    pointer-events: auto; /* Enable clicking when visible */

}



.hero-nav-prev:hover, .hero-nav-next:hover {

    background: var(--gold);

    color: var(--black);

    border-color: var(--gold);

    box-shadow: 0 0 20px rgba(220,172,72,0.4);

}



.hero-nav-prev { left: -140px; }

.hero-nav-next { right: -140px; }



/* Pagination Bullets */

.hero-pagination {

    position: absolute;

    bottom: -40px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 12px;

    z-index: 10;

}



.bullet {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: rgba(220,172,72,0.3);

    cursor: pointer;

    transition: var(--trans);

    border: 1px solid transparent;

}



.bullet.active {

    background: var(--gold);

    transform: scale(1.4);

    box-shadow: 0 0 10px rgba(220,172,72,0.5);

}



/* Adjust layout on smaller screens */

@media (max-width: 1600px) {

    .hero-nav-prev { left: -100px; }

    .hero-nav-next { right: -100px; }

}



@media (max-width: 1400px) {

    .hero-nav-prev { left: -60px; }

    .hero-nav-next { right: -60px; }

}



@media (max-width: 1200px) {

    /* When screen is tight, move buttons inside slightly but keep padding */

    .hero-text-slider { padding: 0 80px; }

    .hero-nav-prev { left: 15px; }

    .hero-nav-next { right: 15px; }

}



@media (max-width: 768px) {

    .hero-text-slider { min-height: 480px; padding: 0 50px; }

    .hero-nav-prev, .hero-nav-next {

        width: 40px;

        height: 40px;

        font-size: 0.8rem;

    }

}



/* H1 Title — max 48px at 1920px (3rem cap) to fit 2 clean lines */

.hero-title {

    font-family: var(--font-sans);

    font-size: clamp(1.6rem, 3.8vw, 4rem);

    font-weight: 700;

    line-height: 1.18;

    color: var(--white);

    margin-bottom: 3.0rem;

    letter-spacing: -0.02em;

    width: 100%;

}



/* Quote block — center aligned */

.hero-quote-wrap {

    display: flex;

    align-items: flex-start; 

    justify-content: center;

    gap: 0.5rem;

    margin-bottom: 0px;

    position: relative;

    width: 100%;

}



.quote-open {

    font-family: var(--font-serif);

    font-size: clamp(3.5rem, 5vw, 6rem);

    line-height: 0.55;

    color: var(--white);

    flex-shrink: 0;

    margin-top: 0.4rem;

    opacity: 1;

    font-style: normal;

    font-weight: 400;

    letter-spacing: -0.05em;

}



.hero-quote-inner {

    position: relative;

    text-align: left;

    flex: 0 1 auto;

    max-width: 1400px; /* Increased to allow one line */

    white-space: nowrap; /* Ensures the text and closing quote stay together */

}



.hero-quote-text {

    font-family: var(--font-serif);

    font-size: clamp(0.85rem, 1.9vw, 2.1rem); /* Reduced further for single-line fit */

    font-style: italic;

    font-weight: 400;

    line-height: 1.4;

    color: var(--white);

    display: inline;

}



.quote-close {

    font-family: var(--font-serif);

    font-size: clamp(3rem, 4.5vw, 5.5rem);

    line-height: 0;

    color: var(--white);

    opacity: 1;

    display: inline-block;

    vertical-align: top;

    transform: translateY(1.5rem);

    margin-left: 0.1rem;

    font-weight: 400;

    letter-spacing: -0.05em;

}



/* Author */

.hero-author {

    font-family: var(--font-sans);

    font-size: 1.8rem;

    font-weight: 600;

    color: var(--gold);

    text-align: right;

    margin-top: 0.5rem;

    margin-bottom: 1.2rem;

    letter-spacing: 0.01em;

}

.hero-author span {

    color: var(--gold);

    font-weight: 400;

}



/* Subtext paragraph */

.hero-subtext {

    font-family: var(--font-sans);

    font-size: 1.125rem;

    font-weight: 300;

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

    text-align: center;

    line-height: 1.75;

    margin-bottom: 2rem;

    max-width: 900px;

    margin-left: auto;

    margin-right: auto;

}



/* =========================================================================

   SERVICES / INTERNAL PAGE HERO

   ========================================================================= */

.internal-hero {

    position: relative;

    width: 100%;

    height: 55vh;

    min-height: 480px;

    margin-top: 68px; /* Offset for fixed nav */

    background-image: url('../images/services/services_banner1.jpg');

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}



/* Base dark tint over the entire image so text remains readable everywhere */

.internal-hero::before {

    content: '';

    position: absolute;

    inset: 0;

    background: rgba(10, 10, 10, 0.1);

    z-index: 1;

}



.hero-vector-wrapper {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

}



.hero-svg {

    width: 100%;

    height: 100%;

    display: none;

}



.internal-hero-content {

    position: relative;

    z-index: 3;

    max-width: 1400px;

    padding: 0 2rem;

    text-align: center;

    margin-top: -1rem; /* Balance vertical space inside the polygon frame */

}



.internal-hero-content h1 {

    font-family: var(--font-sans);

    font-size: clamp(1.8rem, 4vw, 3.3rem);

    font-weight: 800;

    color: #ffffff;

    margin-bottom: 1.5rem;

    letter-spacing: -0.01em;

}



.internal-hero-content p {

    font-family: var(--font-sans);

    font-size: 1.15rem;

    font-weight: 400;

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

    line-height: 1.6;

    margin: 0 auto;

    max-width: 900px; /* Constrain paragraph width for readability */

    text-align: justify;

}



/* =========================================================================

   FAQ PAGE

   ========================================================================= */



/* --- Hero Banner --- */

.faq-hero {

    position: relative;

    width: 100%;

    height: 55vh;

    min-height: 480px;

    margin-top: 68px; /* Offset for fixed nav */

    background: #111;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}

.faq-hero-bg {

    position: absolute;

    inset: 0;

    background: url('../images/faq_banner.jpg') center center / cover no-repeat;

    /* filter: brightness(0.35) sepia(0.2); Darkened warm cinematic look */

    z-index: 1;

}

.faq-hero-overlay {

    display: none; 

}

.faq-hero-content {

    position: relative;

    z-index: 3;

    width: 100%;

    display: flex;

    justify-content: center;

    padding: 0 2rem;

    overflow: hidden;

}

.faq-hero-title {

    font-family: var(--font-sans);

    font-size: clamp(2.5rem, 5vw, 4rem);

    font-weight: 700;

    color: #fff;

    display: flex;

    align-items: center;

    gap: 2rem;

    line-height: 1;

    margin: 0;

    width: 60%;

    max-width: 800px;

}

.faq-title-line {

    flex: 1;

    height: 2px;

    background: var(--gold);

}



/* --- Main Content Area --- */

.faq-main {

    background: var(--bgcolor);

    padding: 3rem 0 0;

}



/* --- Search Bar --- */

.faq-search-wrap {

    max-width: 680px;

    margin: 0 auto 2.5rem;

    padding: 0 2rem;

}

.faq-search-inner {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    border: 1px solid var(--gold); /* Gold border */

    border-radius: 40px;

    padding: 0.5rem 1.8rem;

    background: #fff;

    transition: box-shadow 0.25s ease;

}

.faq-search-inner:focus-within {

    box-shadow: 0 0 0 3px rgba(220,172,72,0.1);

}

.faq-search-icon {

    color: var(--gold); /* Gold icon */

    font-size: 1.2rem;

    flex-shrink: 0;

}

.faq-search-input {

    border: none;

    background: transparent;

    outline: none;

    font-family: var(--font-sans);

    font-size: 0.92rem;

    color: #444;

    width: 100%;

}

.faq-search-input::placeholder { color: #bbb; }



/* --- Accordion List --- */

.faq-list {

    max-width: 1000px;

    margin: 0 auto;

    padding: 0 2rem 1rem;

    display: flex;

    flex-direction: column;

    gap: 0.9rem;

}

.faq-item {

    border: 1px solid #d9bc6d; /* Light gold border hint */

    border-radius: 45px; /* Highly rounded as in screenshot */

    background: #fff;

    overflow: hidden;

    margin-bottom: 1.5rem;

    transition: box-shadow 0.3s ease;

}

.faq-item.open {

    box-shadow: 0 8px 30px rgba(0,0,0,0.05);

}

.faq-question {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    padding: 1.6rem 2.5rem;

    background: transparent;

    border: none;

    cursor: pointer;

    text-align: left;

    font-family: var(--font-sans);

    font-size: 1.3rem; /* Larger and bolder */

    font-weight: 700;

    color: #333;

    transition: color 0.25s ease;

}

.faq-item.open .faq-question { color: #111; }

.faq-icon {

    flex-shrink: 0;

    font-size: 1.8rem; /* Larger plus sign */

    color: #bbb;

    transition: transform 0.3s ease;

    border: none; /* Removed box around icon */

}

.faq-item.open .faq-icon {

    border-color: var(--gold);

    color: var(--gold);

    transform: rotate(45deg);

}

.faq-answer {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;

    padding: 0 1.4rem;

}

.faq-item.open .faq-answer {

    max-height: 400px;

    padding: 0 1.4rem 1.3rem;

}

.faq-answer p {

    font-family: var(--font-sans);

    font-size: 0.93rem;

    color: #555;

    line-height: 1.75;

    margin: 0;

    padding-top: 0.2rem;

    border-top: 1px solid #ede9e0;

    text-align: justify;

}



/* --- Still Have Questions CTA --- */

.faq-cta-section {

    max-width: 1000px;

    margin: 3.5rem auto 0;

    padding: 0 2rem 5rem;

    text-align: center;

}

.faq-cta-title-row {

    display: flex;

    align-items: center;

    gap: 1.2rem;

    margin-bottom: 1.5rem;

}

.faq-cta-line {

    flex: 1;

    height: 1.5px;

    background: #c8c3b8;

}

.faq-cta-heading {

    font-family: var(--font-sans);

    font-size: 1.45rem;

    font-weight: 700;

    color: #2a2a2a;

    white-space: nowrap;

}

.faq-cta-sub {

    font-family: var(--font-sans);

    font-size: 0.92rem;

    font-style: italic;

    color: #666;

    line-height: 1.9;

    margin-bottom: 2rem;

}

.faq-cta-btn {

    padding: 0.7rem 2.4rem;

    font-size: 0.92rem;

    font-weight: 600;

    letter-spacing: 0.04em;

    border-radius: 4px;

}



/* --- FAQ Responsive --- */

@media (max-width: 768px) {

    .faq-hero { min-height: 200px; padding-bottom: 2rem; }

    .faq-hero-title { font-size: 1.8rem; }

    .faq-list { padding: 0 1rem 0.5rem; }

    .faq-cta-section { padding: 0 1rem 3.5rem; }

    .faq-cta-sub br { display: none; }

}

@media (max-width: 480px) {

    .faq-hero-title { font-size: 1.5rem; }

    .faq-question { font-size: 0.88rem; padding: 1rem 1rem; }

}



/* =========================================================================

   SERVICES INTRO (Split text and wedge-cut image)

   ========================================================================= */

.svc-intro {

    background: var(--bgcolor);

    padding: 7rem 0;

    min-height: 550px;

    position: relative;

}



.svc-intro-inner {

    max-width: 1460px;

    margin: 0 auto;

    display: flex;

    align-items: stretch; /* Both columns match height */

    position: relative; /* Anchor for absolute dashed line */

}



.svc-intro-content {

    flex: 1;

    width: 45%;

    flex-shrink: 0;

    padding-right: 5rem;

    padding-left: 1.5rem;

    padding-top: 0 rem;

    display: flex;

    flex-direction: column;

    justify-content: flex-start; /* Forces text paragraphs to stick to the top, safely distancing from the 72% line */

}



.svc-intro-content p {

    font-family: var(--font-sans);

    font-size: 1.05rem;

    font-weight: 400;

    color: #333;

    line-height: 1.8;

    margin-bottom: 2rem;

    text-align: justify;

}



.svc-intro-img {

    flex: 1.25;

    width: 55%;

    flex-shrink: 0;

    background-image: url('../images/services/services1.jpg');

    background-size: cover;

    background-position: center;

    min-height: 550px;

    /* clip-path is set per-section via inline styles so each image can use its own polygon */

}



/* The absolute positioned dashed line floating above the layout */

.svc-dashed-line-wrap {

    position: absolute;

    left: 1.5rem; /* Align starting point with paragraphs */

    /* Exact calculation: Left Column width (45%) + (Right Column Width 55% * 0.23 notch depth) */

    /* 45% + 12.65% = 57.65% */

    width: calc(52.65% - 1.5rem);

    top: 68%; /* Vertical alignment locks cleanly to the y=72% clip-path vertex */

    transform: translateY(-50%);

    display: flex;

    align-items: center;

    z-index: 5;

}



.svc-dashed-line {

    flex: 1;

    height: 1px;

    border-top: 2.5px dashed var(--gold);

}



.svc-intro-icon {

    width: 60px; /* Made slightly larger per the new screenshot */

    height: auto;

    margin-left: 0.5rem; /* Separate slightly from the line */

    transform: translateY(-3px); /* Optical vertical alignment */

}



/* =========================================================================

   OUR SERVICES TABS SECTION & LAYOUT GRAPH

   ========================================================================= */

.os-tabs-section {

    background: var(--bgcolor);

    padding: 6rem 0 0 0; 

}



/* Section Header */

.os-tabs-header {

    display: flex;

    align-items: center;

    justify-content: center;

    max-width: 1400px;

    margin: 0 auto 3rem auto;

}

.os-title-line {

    flex: 1;

    height: 2px;

    background: #444; /* Dark solid divider line */

    max-width: 400px;

}

.os-title {

    font-family: var(--font-sans);

    font-weight: 800;

    font-size: 2.8rem;

    color: #333;

    margin: 0 2rem;

    white-space: nowrap;

}



/* Tabs Navigation Buttons */

.os-tabs-nav-wrap {

    max-width: 1300px;

    margin: 0 auto;

    padding: 0 2rem;

}

.os-tabs-nav {

    display: flex;

    align-items: stretch;

    justify-content: center;

    gap: 4px; /* Physical gap separating the touching arrow points */

    height: 65px; 

}

.os-tab-btn {

    flex: 1;

    border: none;

    font-family: var(--font-sans);

    font-weight: 700;

    font-size: 1.15rem;

    color: #fff;

    cursor: pointer;

    transition: background-color 0.3s ease;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    background: #9a9a9a; /* Inactive Light Grey */

    padding: 0 15px;

    line-height: 1.2;

}

.os-tab-btn:hover {

    background: #7a7a7a;

}

.os-tab-btn.active {

    background: #404040; /* Active Dark Charcoal */

}



/* Hexagonal Pointed Geometry (Isolating Arrows) */

.os-tab-btn[data-tab="tab-1"] {

    /* Vertical left edge. Right edge points OUTWARD (>) */

    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);

    border-top-left-radius: 4px;

}

.os-tab-btn[data-tab="tab-2"],

.os-tab-btn[data-tab="tab-3"],

.os-tab-btn[data-tab="tab-4"] {

    /* Left edge points OUTWARD (<). Right edge points OUTWARD (>) */

    clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 15px 100%, 0 50%);

}

.os-tab-btn[data-tab="tab-5"] {

    /* Left edge points OUTWARD (<). Right edge is vertical */

    clip-path: polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0 50%);

    border-top-right-radius: 4px;

}

.os-tab-spacer {

    display: none; /* Relying purely on gap */

}



/* Panels */

.os-tabs-content {

    position: relative;

    margin-top: 5rem;

}

.os-tab-panel {

    display: none;

    animation: fadeInTab 0.4s ease forwards;

}

.os-tab-panel.active {

    display: block;

}

@keyframes fadeInTab {

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

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

}



/* Upper Reverse-Chevron Layout */

.os-panel-split {

    max-width: 1400px;

    margin: 0 auto;

    display: flex;

    align-items: stretch;

    position: relative;

    padding-bottom: 5rem; 

}



.os-panel-img-wrap {

    flex: 1.1;

    position: relative;

    min-height: 500px;

}

.os-panel-img {

    position: absolute;

    inset: 0;

    background-image: url('../images/services/services2.jpg');

    background-size: cover;

    background-position: center;

    /* Inward '<' Cutout to house the golden boat. Right edge carves into the image */

    clip-path: polygon(0 0, 100% 0, 100% 50%, 85% 76%, 100% 100%, 0 100%);

}



.os-panel-text-wrap {

    flex: 1;

    padding-left: 2rem; 

    padding-right: 4rem;

    padding-top: 1rem;

    flex-direction: column;

    justify-content: flex-start;

}

.os-panel-text-wrap h3 {

    font-family: var(--font-sans);

    font-size: 2.8rem;

    font-weight: 800;

    line-height: 1.15;

    color: #333;

    margin-bottom: 1.8rem;

    letter-spacing: -0.01em;

}

.os-panel-text-wrap p {

    font-size: 1.1rem;

    line-height: 1.8;

    color: #444;

    text-align: justify;

}



/* Absolute Boat Icon & Dashed Line connector */

.os-dashed-connector {

    position: absolute;

    /* Image = flex:1.1 of total 2.1 = 52.38%. Notch at 85% of image width → 52.38%*0.85 ≈ 44.52% */

    left: 44.5%;

    top: 66%; /* Matches the clip-path notch vertex: polygon(..., 85% 76%, ...) */

    transform: translateY(-50%);

    width: calc(100% - 44.5%); /* Spans from notch tip to right edge of panel */

    display: flex;

    align-items: center;

    z-index: 10;

}

.os-connector-boat {

    width: 65px;

    height: auto;

    /* Center the boat physical mass precisely inside the carved cutout vertex */

    margin-left: 0px; 

    margin-right: 1rem; /* Gap to the start of the gold dashed line */

    transform: translateY(-2px);

}

.os-connector-dashed {

    flex: 1;

    height: 1px;

    border-top: 2.5px dashed var(--gold);

}





/* Lower Organizational Matrix Grid */

.os-org-chart-bg {

    position: relative;

    background-image: url('../images/services/services2.jpg'); /* Ghosted chart bg */

    background-size: cover;

    background-position: center;

    width: 100%;

    margin-bottom: 6rem;

}

.os-org-chart-bg::before {

    content: '';

    position: absolute;

    inset: 0;

    background: rgba(18, 18, 18, 0.94); /* Extremely dense obsidian overlay */

    z-index: 1;

}



.os-org-anchor-point {

    position: absolute;

    top: -1px; /* Fuse flawlessly into the cream container above */

    left: 50%;

    transform: translateX(-50%);

    width: 70px;

    height: 60px;

    z-index: 5;

}

.os-anchor-tri {

    width: 100%;

    height: 100%;

}



.os-org-grid {

    position: relative;

    z-index: 10;

    max-width: 1250px;

    margin: 0 auto;

    padding: 6rem 1rem 6rem; /* High vertical spacing */

}



/* Logical Grid Rows */

.os-org-row {

    display: flex;

    align-items: stretch;

}

.os-org-row.has-border-bottom {

    border-bottom: 1px solid rgba(220, 172, 72, 0.4); 

}



/* Grid Cells */

.os-org-cell {

    flex: 1;

    padding: 3rem 1rem 4rem; /* Reduced horizontal padding to allow long text lines */

    text-align: center;

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

}

.os-org-cell.has-border-right {

    border-right: 1px solid rgba(220, 172, 72, 0.4);

}



/* Dark Mod Typography */

.os-org-icon {

    height: 60px;

    width: auto;

    margin-bottom: 1.5rem;

}

.os-org-cell h4 {

    font-size: 1.25rem;

    font-weight: 500;

    color: #fff;

    margin-bottom: 1rem;

    letter-spacing: 0.02em;

}

.os-org-cell p {

    font-family: var(--font-sans);

    font-weight: 300;

    font-size: 0.95rem;

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

    line-height: 1.6;

    margin: 0 auto;

    max-width: 100%;

    text-align: justify;

}



/* The standalone center node overrides flex proportions */

.os-org-row.row-single {

    justify-content: center;

}

.os-org-cell.center-node {

    max-width: 50%; /* Truncates physical span so paragraph text matches proportions */

}



/* =========================================================================

   OVERLAPPING BOUNDARY CTA (Global for Hero, Services, and Pre-Footer)

   ========================================================================= */

.overlapping-cta {

    position: relative;

    z-index: 100;

    text-align: center;

    /* Height of button is ~50px. -25px top and bottom margin neutralizes vertical flow

       and pulls button exactly 50% into top section and 50% into bottom section */

    margin-top: -25px;

    margin-bottom: -25px;

    width: 100%;

}



/* =========================================================================

   STATS BAR  — diamond icons + pill description + dotted connectors

   ========================================================================= */

.stats-bar {

    background: #F5F2EB;  /* exact cream from design */

    padding: 4.5rem 2rem 5rem;

}



.stats-row {

    max-width: 1280px; /* Increased to allow 4 cards to sit side-by-side without crushing text */

    margin: 0 auto;

    display: flex;

    align-items: stretch; /* Forces all cards in row to be equal height */

    justify-content: center;

}



/* ---- Each stat block ---- */

.stat-block {

    position: relative;

    display: flex;

    flex-direction: column;

    flex: 1;

    max-width: 275px; /* Increased to prevent unwanted line-breaks in text */

    margin-top: 35px; /* Provide space for the overlapping diamond */

}



/* ---- Card Wrapper ---- */

.stat-card {

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

    border-radius: 18px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    height: 100%;

    box-shadow: 0 10px 30px rgba(0,0,0,0.03);

}



.stat-top {

    background: #ffffff;

    padding: 3.5rem 1.5rem 1.5rem;

    display: flex;

    justify-content: center;

    align-items: center;

}



.stat-bottom {

    background: #f1ddab; /* Matched from screenshot, soft light gold */

    padding: 1.0rem 1.0rem;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-grow: 1;

}



.stat-bottom p {

    font-size: 0.95rem;

    color: #1a1a1a;

    line-height: 1.5;

    font-weight: 400;

    margin: 0;

    text-align: center;

}



/* ---- Black rotated diamond box ---- */

.stat-diamond {

    position: absolute;

    top: 0;

    left: 50%;

    width: 66px;

    height: 66px;

    background: #111111;

    border-radius: 12px;

    transform: translate(-50%, -50%) rotate(45deg);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10;

}

.stat-diamond img {

    width: 32px;

    height: 32px;

    object-fit: contain;

    transform: rotate(-45deg);

    

}



/* ---- Big bold label ---- */

.stat-heading {

    font-family: var(--font-sans);

    font-size: 1.8rem;

    font-weight: 800;

    color: #333333;

    line-height: 1.1;

    text-align: center;

    margin: 0;

    letter-spacing: -0.02em;

}



/* ---- Dotted connector line ---- */

.stat-connector {

    flex: 0 0 45px;

    height: 0;

    /* Dotted black line */

    border-bottom: 2px dotted #1a1a1a;

    position: relative;

    /* Aligns mathematically to the precise vertical center of the white block */

    margin-top: 150px;

    flex-shrink: 0;

}



/* Solid end-dots touching the edges of the cards */

.stat-connector::before,

.stat-connector::after {

    content: '';

    position: absolute;

    width: 6px;

    height: 6px;

    background: #1a1a1a;

    border-radius: 50%;

    top: 50%;

    transform: translateY(-50%);

}

.stat-connector::before {

    left: -3px;

}

.stat-connector::after {

    right: -3px;

}





/* =========================================================================

   REDEFINING SECTION — pixel-perfect match to reference screenshot

   Layout: left text 47% | right full-bleed image 53%

   Background: cream

   ========================================================================= */

.redefining {

    background: #F5F2EB;

    overflow: hidden;

	margin-top:40px;

}



.redef-wrap {

    display: flex;

    align-items: stretch;

    min-height: 440px;

    /* No max-width — image bleeds full right edge */

}



/* LEFT panel */

.redef-left {

    flex: 0 0 47%;

    /* Padding: top 4rem, right 3rem (gap to image), bottom 4rem, left = page content margin */

    padding: 4rem 3.5rem 4rem 4.5rem;

    display: flex;

    flex-direction: column;

    justify-content: center;

    overflow: visible; /* Allow boat icon's negative margin to extend into image area */

    position: relative;

    z-index: 5;

}



.redef-heading {

    font-family: var(--font-sans);

    font-size: clamp(2rem, 3.2vw, 3.5rem); /* Significantly scaled up to match screenshot */

    font-weight: 800;

    color: #1a1a1a;

    line-height: 1.12;

    letter-spacing: -0.02em;

    margin-bottom: 0rem;

}



/* Gold dashed divider + logo icon at right end */

.redef-divider {

    display: flex;

    align-items: center;

    

    width: calc(100% + 30px);   /* Overflows slightly into the padding towards the chevron */

}

.redef-dashes {

    flex: 1;

    height: 1.5px;

    background-image: repeating-linear-gradient(

        to right,

        var(--gold) 0px, var(--gold) 7px,

        transparent 7px, transparent 14px

    );

}

.redef-icon {

    /* Larger boat icon, slightly nudged up to sit nicely at the end */

    width: auto;

    height: 50px;

    object-fit: contain;

    margin-left: 9px;

    flex-shrink: 0;

    margin-right: -110px;

    position: relative; /* Required for z-index to take effect */

    z-index: 999;

}



/* Body text */

.redef-body {

    font-family: var(--font-sans);

    font-size: 1rem; /* Matched to larger visual scale */

    color: #444;

    line-height: 1.6;

    margin-bottom: 1.2rem;

    font-weight: 400;

    text-align: justify;

}



/* Bold closing line */

.redef-bold {

    font-family: var(--font-sans);

    font-size: 1.4rem; /* Prominent bold line shown in screenshot */

    font-weight: 800;

    color: #1a1a1a;

    line-height: 1.35;

    margin-top: 1rem;

}



/* RIGHT panel — image fills completely, no padding */

.redef-right {

    flex: 0 0 53%;

    position: relative;

    overflow: hidden;

}

.redef-right > img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



/* White arrow chevron — SMALL notch on left edge of image */

.redef-chevron {

    position: absolute;

    left: -70px;

    top: 50%;

    transform: translateY(-50%) scaleX(-1);

    width: 273px;

    height: 273px;

    z-index: 3;

    pointer-events: none;

}

.redef-chevron svg { width: 100%; height: 100%; display: block; }

.redef-chevron svg polygon { fill: var(--bgcolor); }



/* Gold diagonal accent line on the image - far right edge of photo */

.redef-gold-line {

    position: absolute;

    right: 30px;

    top: 0;

    width: 60px;

    height: 100%;

    z-index: 2;

    pointer-events: none;

    opacity: 1;

	display:none;

}

.redef-gold-line svg { width: 100%; height: 100%; display:none;}









.services-main-link {

    display: block;

    text-decoration: none;

    color: inherit;

    cursor: pointer;

}



/* =========================================================================

   SERVICES SECTION

   ========================================================================= */

.services {

    position: relative;

    background: linear-gradient(rgba(20, 20, 20, 0.45), rgba(20, 20, 20, 0.45)), url('../images/services_banner.jpg') no-repeat;

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    padding: 5rem 0 3rem;

}



.services-inner {

    max-width: 1280px;

    margin: 0 auto;

    padding: 0 2rem;

}



.services-header {

    text-align: center;

    margin-bottom: 3rem;

}



.services-title {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 1.5rem; /* Gap between lines and text */

    font-family: var(--font-sans); /* bold sans-serif like screenshot */

    font-size: 2.6rem;

    font-weight: 800;

    color: var(--gold);

    letter-spacing: 0.02em;

}



/* Horizontal lines crossing exactly midway through the heading text */

.services-title::before,

.services-title::after {

    content: '';

    flex: 1; /* Stretch to fill remaining width */

    height: 1.5px;

    background: var(--border);

}



/* 4-column grid, NO outer borders on container */

.services-grid {

    display: grid;

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

}



.svc-card {

    /* Draw borders individually */

    border-right: 1.5px solid var(--border);

    border-bottom: 1.5px solid var(--border);

    padding: 3rem 2rem;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1rem;

    transition: var(--trans);

    cursor: pointer;

}



/* Knock out far-right outer borders */

.svc-card:nth-child(4n) {

    border-right: none;

}



/* Knock out bottom outer borders for the visually final row (cards 9, 10, 11) */

.svc-card:nth-child(n+9) {

    border-bottom: none;

}



.svc-card:hover {

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

}



.svc-card img {

    height: 46px;

    width: auto;

    

    transition: var(--trans);

    margin-bottom: 0.5rem;

}

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



.svc-card h3 {

    font-family: var(--font-sans);

    font-size: 0.95rem;

    font-weight: 600;

    color: var(--white);

    line-height: 1.35;

    margin: 0;

}



.svc-card p {

    font-size: 0.78rem;

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

    line-height: 1.5;

    margin: 0;

}



.services-cta {

    text-align: center;

    margin-top: 2.5rem;

    padding-bottom: 1rem;

}



/* =========================================================================

   METHODOLOGY SECTION

   ========================================================================= */

.methodology {

    padding: 6rem 0 0; /* Removing bottom padding to flow smoothly into CTA */

    background: var(--bgcolor);

}



.methodology-inner {

    max-width: 1300px;

    margin: 0 auto;

    padding: 0 2rem;

    text-align: center;

}



.methodology-title {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 1.5rem;

    font-family: var(--font-sans);

    font-size: 2.3rem;

    font-weight: 800;

    color: #333;

    margin-bottom: 2rem;

    letter-spacing: -0.02em;

}



/* Horizontal lines crossing midway through Methodology text */

.methodology-title::before,

.methodology-title::after {

    content: '';

    flex: 1;

    height: 1.5px;

    background: #c5c5c5; /* Gray lines exactly matching screenshot */

}



.methodology-sub {

    font-family: var(--font-sans);

    font-size: 1.6rem;

    font-weight: 500;

    color: #444;

    line-height: 1.4;

    margin-bottom: 5rem;

}



.methodology-steps {

    display: flex;

    justify-content: center;

    align-items: flex-start;

    gap: 2rem 1rem;

    flex-wrap: wrap;

    position: relative;

    /* No connector line */

}



.mstep {

    flex: 0 1 180px;

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    /* gap controlled explicitly for pixel-perfection */

    position: relative;

    z-index: 1;

}



.mstep-icon {

    width: 68px; height: 68px;

    background: #111111;

    border-radius: 12px;

    transform: rotate(45deg);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    transition: var(--trans);

    position: relative;

    z-index: 1;

    margin-bottom: 2.5rem; /* Gap to text */

}



.mstep:hover .mstep-icon {

    transform: rotate(45deg) scale(1.08); /* Must maintain rotation on hover */

    box-shadow: 0 10px 30px rgba(0,0,0,0.1);

}



.mstep-icon img {

    height: 32px; width: auto;

    transform: rotate(-45deg); /* Counter-rotate inside the diamond */

    transition: var(--trans);

}



.mstep p {

    font-family: var(--font-sans);

    font-size: 0.95rem;

    font-weight: 500;

    color: var(--text-dark);

    line-height: 1.35;

    text-align: center;

    margin: 0;

}



/* =========================================================================

   ABOUT US PAGE SPECIFIC

   ========================================================================= */

.about-section-padding {

    padding: 7rem 0;

    background: var(--bgcolor);

}

.about-why-grid {

    display: grid; 

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 

    gap: 3rem;

}

.about-solution-card {

    background: #fff; 

    padding: 5rem; 

    border-radius: 20px; 

    box-shadow: 0 20px 40px rgba(0,0,0,0.05); 

    position: relative; 

    overflow: hidden;

}

.about-solution-card::before {

    content: '';

    position: absolute; 

    top: 0; left: 0; 

    width: 5px; height: 100%; 

    background: var(--gold);

}

.about-sol-grid {

    display: grid; 

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 

    gap: 2.5rem;

}

.sol-item h4 {

    font-family: var(--font-sans); 

    color: #111; 

    margin-bottom: 0.5rem; 

    font-size: 1.1rem;

}

.sol-item p {

    font-size: 0.92rem; 

    color: #666; 

    text-align: justify;

    line-height: 1.6;

}



/* --- Contact Page Tabs --- */

.contact-tabs {

    display: flex;

    gap: 10px;

    margin-bottom: 3rem;

}

.contact-tab-btn {

    flex: 1;

    padding: 1.2rem;

    background: #f8f8f8;

    border: 1.5px solid #eee;

    color: #777;

    font-family: var(--font-sans);

    font-size: 0.82rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    cursor: pointer;

    transition: all 0.4s var(--ease);

    border-top: 3px solid transparent;

}

.contact-tab-btn.active {

    background: #fff;

    border-color: #eee;

    border-top-color: var(--gold);

    color: #111;

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

}

.form-pane {

    display: none;

    animation: fadeIn 0.5s ease;

}

.form-pane.active {

    display: block;

}

@keyframes fadeIn {

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

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

}



/* =========================================================================

   CTA SECTION

   ========================================================================= */

.cta-section {

    background: var(--bgcolor);

    padding: 6rem 2rem 5rem;

    text-align: center;

    border-top: none;

}



.cta-inner {

    max-width: 1450px; /* Widened massively to permit a single horizontal line of text on Desktop */

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1.5rem;

}



.cta-heading {

    font-family: var(--font-sans);

    font-size: clamp(1.4rem, 3.5vw, 2.4rem); /* Slightly optimized so the single line fits in a 1080p width */

    font-weight: 800;

    color: #333;

    line-height: 1.35;

    letter-spacing: -0.02em;

}



.cta-logo {

    margin-top: 2rem;

    height: 60px;

    width: auto;

}



.cta-btn { margin-top: 0.5rem; }



/* =========================================================================

   FOOTER — REDESIGNED

   ========================================================================= */

.footer {

  --gold: #b99755;

  --gold-soft: #d9b97c;

  --ink: #0f0f0f;

  --ink-2: #1a1a1a;

  --line: rgba(217, 185, 124, 0.22);

  --muted: rgba(255, 255, 255, 0.68);

  position: relative;

  background: radial-gradient(1200px 400px at 85% -10%, rgba(185, 151, 85, 0.10), transparent 60%),

    linear-gradient(180deg, #0d0d0d 0%, #111 60%, #0a0a0a 100%);

  color: #fff;

  font-family: "Inter", system-ui, sans-serif;

  padding: 72px 24px 24px;

  overflow: hidden;

}

.footer::before {

  content: "";

  position: absolute;

  inset: 0 0 auto 0;

  height: 1px;

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

  opacity: 0.55;

}



.footer-inner {

  max-width: 1240px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1.15fr 1.3fr 1fr;

  gap: 56px;

  align-items: start;

}



/* ---- Column 1: Brand ---- */

.f-brand .f-logo {

  display: inline-block;

  margin-bottom: 18px;

}

.f-brand .f-logo img {

  max-width: 150px;

  height: auto;

}

.f-brand .f-tag {

  font-family: "Cormorant Garamond", serif;

  font-style: italic;

  font-size: 20px;

  line-height: 1.45;

  color: #f3e7cf;

  margin: 0 0 20px;

  max-width: 340px;

}

.f-brand .f-rule {

  width: 48px;

  height: 2px;

  background: var(--gold);

  margin: 0 0 18px;

  border: 0;

}

.f-brand .f-address {

  font-size: 13.5px;

  line-height: 1.7;

  color: var(--muted);

  max-width: 340px;

}

.f-brand .f-address i {

  color: var(--gold);

  margin-right: 8px;

}



/* ---- Column 2: Navigation ---- */

.f-nav-title,

.f-connect-title {

  font-family: "Cormorant Garamond", serif;

  font-weight: 600;

  font-size: 20px;

  letter-spacing: 0.5px;

  color: #fff;

  margin: 0 0 20px;

  position: relative;

  padding-bottom: 10px;

}

.f-nav-title::after,

.f-connect-title::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 32px;

  height: 2px;

  background: var(--gold);

}



.f-nav-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px 28px;

}

.f-nav-grid a {

  color: #e9e9e9;

  text-decoration: none;

  font-size: 14px;

  padding: 7px 0;

  display: flex;

  align-items: center;

  gap: 10px;

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

  border-bottom: 1px dashed transparent;

}

.f-nav-grid a i {

  color: var(--gold);

  font-size: 12px;

  width: 16px;

  transition: transform 0.25s ease;

}

.f-nav-grid a:hover {

  color: var(--gold-soft);

  transform: translateX(2px);

}

.f-nav-grid a:hover i {

  transform: translateX(2px);

}



/* ---- Column 3: Connect ---- */

.f-connect p {

  margin: 0 0 12px;

  font-size: 14px;

  color: var(--muted);

  display: flex;

  align-items: flex-start;

  gap: 10px;

  line-height: 1.55;

}

.f-connect p i {

  color: var(--gold);

  margin-top: 4px;

  width: 16px;

  text-align: center;

}

.f-connect p a {

  color: #e9e9e9;

  text-decoration: none;

  transition: color 0.25s ease;

}

.f-connect p a:hover {

  color: var(--gold-soft);

}



.f-subscribe {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-top: 16px;

  padding: 12px 22px;

  background: linear-gradient(135deg, var(--gold) 0%, #a07e3f 100%);

  color: #0f0f0f !important;

  font-weight: 600;

  font-size: 13px;

  letter-spacing: 2px;

  text-transform: uppercase;

  text-decoration: none;

  border-radius: 2px;

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

  box-shadow: 0 8px 22px rgba(185, 151, 85, 0.25);

}

.f-subscribe:hover {

  transform: translateY(-2px);

  box-shadow: 0 12px 28px rgba(185, 151, 85, 0.35);

}

.f-subscribe i {

  font-size: 12px;

}



.f-social {

  display: flex;

  gap: 12px;

  margin-top: 22px;

}

.f-social a {

  width: 38px;

  height: 38px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

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

  border-radius: 50%;

  color: #e9e9e9;

  text-decoration: none;

  font-size: 14px;

  transition: all 0.28s ease;

}

.f-social a:hover {

  background: var(--gold);

  color: #0f0f0f;

  border-color: var(--gold);

  transform: translateY(-2px);

}



/* ---- Bottom Bar ---- */

.f-bottom {

  max-width: 1240px;

  margin: 56px auto 0;

  padding-top: 22px;

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

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 14px;

}

.f-copy {

  margin: 0;

  font-size: 13px;

  color: var(--muted);

  letter-spacing: 0.3px;

}

.f-copy i {

  color: var(--gold);

  margin-right: 4px;

}

.f-legal {

  display: flex;

  align-items: center;

  gap: 18px;

  flex-wrap: wrap;

}

.f-legal a {

  color: var(--muted);

  text-decoration: none;

  font-size: 13px;

  position: relative;

  transition: color 0.25s ease;

}

.f-legal a + a::before {

  content: "";

  position: absolute;

  left: -10px;

  top: 50%;

  width: 3px;

  height: 3px;

  border-radius: 50%;

  background: var(--gold);

  transform: translateY(-50%);

}

.f-legal a:hover {

  color: var(--gold-soft);

}





/* =========================================================================

   CAREERS PAGE

   ========================================================================= */



/* --- Careers Hero --- */

.careers-hero {

    position: relative;

    width: 100%;

    height: 60vh;

    min-height: 500px;

    margin-top: 68px;

    background: #111;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding-bottom: 5rem;

    overflow: hidden;

}

.careers-hero-bg {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center 20%;

    filter: brightness(0.7) contrast(1.1);

    z-index: 1;

}

.careers-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.85) 100%);

}

.careers-hero-content {

    position: relative;

    z-index: 3;

    width: 100%;

    text-align: center;

    padding: 0 2rem;

}

.careers-hero-title {

    font-family: var(--font-sans);

    font-size: clamp(2.5rem, 5vw, 4.2rem);

    font-weight: 800;

    color: #fff;

    margin-bottom: 0.5rem;

    letter-spacing: -0.01em;

}

.careers-hero-sub {

    font-family: var(--font-sans);

    font-size: clamp(1.2rem, 2.5vw, 1.8rem);

    font-weight: 400;

    color: #f1f1f1;

    margin: 0;

}



/* --- Culture Section --- */

.careers-culture {

    background: var(--bgcolor);

    padding: 6rem 0;

    position: relative;

    display: flex;

    justify-content: center;

}

.careers-culture-inner {

    max-width: 1400px;

    width: 100%;

    margin: 0 auto;

    position: relative;

    display: flex;

    align-items: stretch;

    gap: 0;

}

.careers-culture-text {

    flex: 1;

    padding: 0 4rem 0 2rem;

    display: flex;

    position: relative;

}

.culture-text-line {

    width: 3.5px;

    background: #d8d3c5;

    margin-right: 1.5rem;

    flex-shrink: 0;

    height: 180px; 

    margin-top: 0.5rem;

}

.culture-text-content {

    flex: 1;

}

.culture-text-content p {

    font-family: var(--font-sans);

    font-size: 0.95rem;

    color: #333;

    line-height: 1.8;

    margin-bottom: 2rem;

    font-weight: 400;

    text-align: justify;

}

.culture-read-more {

    font-family: var(--font-serif);

    font-weight: 700 !important;

    font-size: 1.1rem !important;

    color: #111 !important;

    text-decoration: none;

    cursor: pointer;

    text-align: right;

    margin-top: -1rem;

    margin-bottom: 0;

}

.careers-culture-img-wrap {

    flex: 0 0 48%;

    position: relative;

    display: flex;

    align-items: stretch;

}

.careers-culture-img {

    width: 100%;

    min-height: 500px;

    background-size: cover;

    background-position: center;

    clip-path: polygon(100% 0px, 100% 100%, 0px 100%, 0px 73.29%, 15.3% 59.37%, 0px 46.45%, 0px 0px);

}

.culture-wedge-icon {

    position: absolute;

    left: 15%;

    top: 50%;

    transform: translate(-100%, -50%);

    width: 60px;

    z-index: 5;

}

.culture-wedge-icon img {

    width: 100%;

    height: auto;

}



/* --- Workplace Values Section --- */

.wp-values-header {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 1.5rem;

    background: var(--bgcolor);

    padding-bottom: 2rem;

    max-width: 1200px;

    margin: 0 auto;

}

.wp-title {

    font-family: var(--font-sans);

    font-size: 2.2rem;

    font-weight: 800;

    color: #333;

    white-space: nowrap;

    margin: 0;

}

.wp-title-line {

    flex: 1;

    height: 2px;

    background: #444;

}

.workplace-values {

    position: relative;

    width: 100%;

    background: #000;

    overflow: hidden;

}

.wp-values-bg {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    opacity: 0.35;

    z-index: 1;

}

.wp-values-inner {

    position: relative;

    z-index: 2;

    padding: 6rem 2rem;

    max-width: 1400px;

    margin: 0 auto;

}

.wp-values-sub {

    font-family: var(--font-serif);

    font-size: 2.4rem;

    color: var(--gold);

    text-align: center;

    font-weight: 400;

    margin-bottom: 5rem;

    letter-spacing: 0.02em;

}

.wp-grid {

    display: flex;

    justify-content: space-between;

    align-items: stretch;

}

.wp-item {

    flex: 1;

    text-align: center;

    padding: 0 1.5rem;

    border-right: 1.5px solid rgba(220,172,72,0.3);

    display: flex;

    flex-direction: column;

    align-items: center;

}

.wp-item:last-child {

    border-right: none;

}

.wp-icon {

    width: 60px;

    height: 60px;

    object-fit: contain;

    margin-bottom: 2rem;

}

.wp-item h4 {

    font-family: var(--font-sans);

    font-size: 1.05rem;

    color: #fff;

    font-weight: 600;

    margin-bottom: 1rem;

    line-height: 1.4;

}

.wp-item p {

    font-family: var(--font-sans);

    font-size: 0.85rem;

    color: #bbb;

    line-height: 1.6;

    margin: 0;

    font-weight: 300;

    text-align: justify;

}



/* --- Next Chapter / CTA Section --- */

.next-chapter {

    background: var(--bgcolor);

    padding: 7rem 0 5rem;

    position: relative;

    overflow: hidden;

}

.nc-title {

    font-family: var(--font-sans);

    font-size: 2.3rem;

    font-weight: 800;

    color: #333;

    line-height: 1.25;

    margin-bottom: 0.5rem;

}

.nc-text-wrap {

    justify-content: center; 

    padding-top: 0;

}

.nc-subtitle-thin {

    font-family: var(--font-sans);

    font-size: 1.8rem;

    font-weight: 300;

    color: #444;

    margin-bottom: 1.5rem;

    letter-spacing: 0.02em;

}

.nc-contact-group {

    margin-bottom: 2rem;

}

.nc-contact {

    font-family: var(--font-sans);

    font-size: 1.1rem;

    color: #333;

    margin-bottom: 0.8rem;

}

.nc-contact strong {

    font-weight: 800;

    font-size: 1.2rem;

}

.nc-spacer-for-line {

    height: 40px; 

}

.nc-slogan {

    font-family: var(--font-sans);

    font-size: 1.6rem;

    font-weight: 500;

    text-align: center;

    color: #222;

    margin-top: 5rem;

}



/* =========================================================================

   ABOUT PAGE

   ========================================================================= */



/* --- General About Wrappers --- */

.about-main {

    background: var(--bgcolor);

    overflow: hidden;

}

.about-label {

    display: inline-block;

    font-family: var(--font-sans);

    font-size: 0.85rem;

    font-weight: 700;

    color: var(--gold);

    letter-spacing: 0.1em;

    margin-bottom: 1rem;

}

.about-highlight {

    font-family: var(--font-serif);

    font-size: 1.6rem;

    font-weight: 600;

    color: #111;

    margin-top: 2rem;

    position: relative;

    padding-left: 1.5rem;

    border-left: 3px solid var(--gold);

}

.about-bullet-list {

    list-style: none;

    padding: 0;

    margin: 2rem 0;

}

.about-bullet-list li {

    font-family: var(--font-sans);

    font-size: 1.05rem;

    color: #333;

    margin-bottom: 0.8rem;

    display: flex;

    align-items: flex-start;

    gap: 0.75rem;

}

.about-bullet-list li i {

    color: var(--gold);

    font-size: 0.9rem;

    margin-top: 0.35rem;

}



/* --- Section 1: Hero --- */

.about-hero {

    position: relative;

    width: 100%;

    height: 75vh;

    min-height: 550px;

    margin-top: 68px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}

.about-hero-bg {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    z-index: 1;

}

.about-hero-overlay {

    position: absolute;

    inset: 0;

    background: rgba(14, 14, 14, 0.75); 

    z-index: 2;

}

.about-hero-vector {

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

}

.about-hero-vector svg {

    width: 100%;

    height: 100%;

}

.about-hero-content {

    position: relative;

    z-index: 4;

    text-align: center;

    max-width: 900px;

    padding: 0 2rem;

}

.about-title-main {

    font-family: var(--font-sans);

    font-size: clamp(3rem, 5vw, 4.5rem);

    font-weight: 800;

    color: #fff;

    line-height: 1.15;

    margin-bottom: 1.5rem;

    letter-spacing: -0.01em;

}

.about-hero-sub {

    font-family: var(--font-sans);

    font-size: clamp(1.1rem, 2vw, 1.4rem);

    color: #f5f3ef;

    max-width: 700px;

    margin: 0 auto;

    line-height: 1.6;

}



/* --- About Us Shared Header Elements --- */

.about-section-heading {

    text-align: center;

    margin-bottom: 2.5rem;

    position: relative;

    max-width: 800px;

    margin-left: auto;

    margin-right: auto;

}

.about-section-heading h2 {

    font-family: var(--font-sans);

    font-size: 1.4rem;

    font-weight: 700;

    color: #222;

    letter-spacing: 0.15em;

    margin-bottom: 0.8rem;

}

.about-heading-divider {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

}

.about-heading-divider .ah-line {

    width: 60px;

    height: 1px;

    background: var(--gold);

}

.about-heading-divider img {

    height: 18px;

    width: auto;

}



/* --- Section 2: Who We Are (Overrides on SVC-Intro) --- */

.about-who {

    background: var(--bgcolor);

    padding-bottom: 8rem;

}

.about-who .svc-intro-inner {

    max-width: 1300px;

    margin: 0 auto;

}

.about-who-subtitle {

    font-family: var(--font-serif);

    font-size: 2.6rem;

    font-weight: 400;

    color: #111;

    margin-bottom: 1.5rem;

    line-height: 1.15;

}

.about-who .svc-intro-content p {

    font-size: 1.05rem;

    color: #333;

    line-height: 1.7;

    margin-bottom: 1.25rem;

    text-align: justify;

}

.about-inline-highlight {

    font-family: var(--font-sans);

    font-size: 1.05rem;

    color: #111;

    padding-top: 1.5rem;

    margin-top: 1.5rem;

    border-top: 1.5px solid rgba(220,172,72,0.3); /* Subtle gold top line */

}

.about-inline-highlight strong {

    font-weight: 700;

}



/* --- Section 3: Philosophy Strip --- */

.about-philosophy {

    background: #F5F3EF;

    border-top: 1px solid rgba(201, 161, 74, 0.3);

    border-bottom: 1px solid rgba(201, 161, 74, 0.3);

    padding: 5rem 0;

    text-align: center;

}

.about-philosophy-inner h2 {

    font-family: var(--font-serif);

    font-size: 3.2rem;

    font-weight: 400;

    color: #111;

    margin-bottom: 1rem;

}

.about-philosophy-inner p {

    font-family: var(--font-sans);

    font-size: 1.2rem;

    color: #555;

    letter-spacing: 0.05em;

    margin: 0;

    text-align: justify;

}



/* --- Section 4: USP Grid --- */

.about-usps {

    padding: 8rem 0 4rem;

    background: var(--bgcolor);

}

.about-usps-inner {

    max-width: 1300px;

    margin: 0 auto;

    padding: 0 2rem;

}

.usp-grid {

    display: grid;

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

    gap: 2rem;

}

.usp-card {

    background: #fff;

    padding: 3rem 2rem;

    text-align: center;

    border-radius: 4px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.03);

    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);

}

.usp-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 15px 40px rgba(0,0,0,0.08);

}

.usp-card-icon {

    font-size: 2.2rem;

    color: var(--gold);

    margin-bottom: 1.5rem;

}

.usp-card h4 {

    font-family: var(--font-sans);

    font-size: 1.25rem;

    font-weight: 700;

    color: #111;

    margin-bottom: 1rem;

    line-height: 1.4;

}

.usp-card p {

    font-size: 0.95rem;

    color: #666;

    line-height: 1.6;

    margin: 0;

    text-align: justify;

}



/* --- Section 5: Benefits --- */

.about-benefits {

    padding: 4rem 0 8rem;

    background: var(--bgcolor);

}

.about-benefits-inner {

    max-width: 1300px;

    margin: 0 auto;

    padding: 0 2rem;

    display: flex;

    align-items: center;

    gap: 5rem;

}

.about-benefits-left {

    flex: 0 0 40%;

}

.benefits-tag {

    font-family: var(--font-sans);

    font-weight: 400;

    color: #fff;

    background: #777; /* or slightly darker grey */

    font-size: 0.95rem;

    padding: 1rem 1.5rem 1rem 2.5rem;

    margin-top: 2.5rem;

    display: inline-block;

    clip-path: polygon(20px 0, 100% 0, 100% 100%, 0% 100%);

}

.about-benefits-right {

    flex: 1;

}

.grid-2x2 {

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

}



/* --- Section 6: Dark Edge Section --- */

.about-edge {

    position: relative;

    padding: 8rem 0;

    background: #0e0e0e;

    overflow: hidden;

}

.about-edge-bg {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    opacity: 0.15;

    z-index: 1;

}

.about-edge-inner {

    position: relative;

    z-index: 2;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 2rem;

    text-align: center;

}

.about-edge-inner h2 {

    font-family: var(--font-sans);

    font-size: 2.8rem;

    font-weight: 800;

    color: #fff;

    margin-bottom: 1rem;

}

.about-edge-inner p {

    font-size: 1.1rem;

    color: #aaa;

    max-width: 700px;

    margin: 0 auto 4rem;

    line-height: 1.6;

    text-align: justify;

}

.edge-boxes-wrap {

    display: flex;

    justify-content: center;

    gap: 2rem;

    flex-wrap: wrap;

}

.edge-box {

    flex: 1;

    min-width: 220px;

    padding: 2rem 1.5rem;

    border: 1px solid rgba(201, 161, 74, 0.4);

    color: #fff;

    font-family: var(--font-sans);

    font-weight: 600;

    font-size: 1.1rem;

    transition: all 0.4s ease;

    cursor: default;

}

.edge-box:hover {

    border-color: var(--gold);

    box-shadow: 0 0 20px rgba(201, 161, 74, 0.2);

    background: rgba(201, 161, 74, 0.05);

}



/* --- Section 7: Problem Grid --- */

.about-problems {

    padding: 8rem 0 4rem;

    background: var(--bgcolor);

}

.about-problems-inner {

    max-width: 1300px;

    margin: 0 auto;

    padding: 0 2rem;

}

.problems-title {

    text-align: center;

    font-family: var(--font-sans);

    font-size: 2.5rem;

    font-weight: 800;

    color: #111;

    margin-bottom: 4rem;

}

.problems-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 2rem;

    justify-items: center;

}

.prob-card {

    width: 100%;

    background: #fff;

    padding: 2.5rem;

    border-top: 3px solid #111;

    transition: transform 0.3s ease;

}

.prob-card:hover {

    transform: translateY(-5px);

    border-top-color: var(--gold);

}

.prob-icon {

    font-size: 1.8rem;

    color: var(--gold);

    margin-bottom: 1.2rem;

}

.prob-card h4 {

    font-family: var(--font-sans);

    font-size: 1.2rem;

    font-weight: 700;

    margin-bottom: 0.5rem;

    color: #111;

}

.prob-card p {

    font-size: 0.95rem;

    color: #555;

    margin: 0;

    text-align: justify;

}



/* --- Section 8 & 9: Solution & Leadership --- */

.about-solution, .about-leader {

    padding: 5rem 0;

    background: var(--bgcolor);

}

.about-solution-inner, .about-leader-inner {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 2rem;

    display: flex;

    align-items: center;

    gap: 6rem;

}

.about-solution-visual, .about-leader-visual {

    flex: 0 0 45%;

    position: relative;

}

.solution-img {

    width: 100%;

    aspect-ratio: 4/3;

    background-size: cover;

    background-position: center;

    position: relative;

    z-index: 2;

}

.solution-gold-border {

    position: absolute;

    bottom: -15px;

    left: -15px;

    width: 100%;

    height: 100%;

    border-bottom: 3px solid var(--gold);

    border-left: 3px solid var(--gold);

    z-index: 1;

}

.leader-img {

    width: 100%;

    aspect-ratio: 3/4;

    background-size: cover;

    background-position: center top;

    filter: grayscale(100%);

    box-shadow: -15px 15px 0 var(--gold);

}

.about-solution-text, .about-leader-text {

    flex: 1;

}

.solution-closing, .leader-closing {

    font-family: var(--font-sans);

    font-weight: 700;

    font-size: 1.2rem;

    color: #111;

    margin-top: 2rem;

}

.leader-profile {

    margin-bottom: 1.5rem;

}

.leader-name {

    font-family: var(--font-serif);

    font-size: 2.2rem;

    color: #111;

    font-weight: 600;

    margin-bottom: 0.2rem;

}

.leader-title {

    font-family: var(--font-sans);

    font-size: 1rem;

    color: var(--gold);

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    margin: 0;

}

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



/* --- Section 10: Trust --- */

.about-trust {

    padding: 8rem 0;

    background: #0e0e0e;

    text-align: center;

}

.about-trust-inner {

    max-width: 900px;

    margin: 0 auto;

    padding: 0 2rem;

}

.about-trust-inner h2 {

    font-family: var(--font-serif);

    font-size: 3.5rem;

    font-weight: 400;

    color: #fff;

    margin-bottom: 2rem;

    line-height: 1.2;

}

.about-trust-inner p {

    font-family: var(--font-sans);

    font-size: 1.2rem;

    color: #ccc;

    line-height: 1.8;

    text-align: justify;

}



/* --- Section 11: CTA --- */

.about-cta-section {

    padding: 8rem 0;

    background: #fdfafa;

    text-align: center;

    border-top: 1px solid #eaeaea;

}

.about-cta-inner {

    max-width: 800px;

    margin: 0 auto;

    padding: 0 2rem;

}

.about-cta-inner h2 {

    font-family: var(--font-sans);

    font-size: 3rem;

    font-weight: 800;

    color: #111;

    margin-bottom: 3rem;

    letter-spacing: -0.02em;

}



/* =========================================================================

   OUR CLIENTS PAGE

   ========================================================================= */



.clients-main {

    background: #000; /* Dark background as in screenshot */

    padding: 8rem 0;

    min-height: 80vh;

    display: flex;

    align-items: center;

}



.clients-container {

    max-width: 1300px;

    margin: 0 auto;

    padding: 0 2rem;

    text-align: center;

}



.clients-header {

    margin-bottom: 5rem;

}



.clients-title {

    font-family: var(--font-serif);

    font-size: clamp(2.5rem, 5vw, 4rem);

    font-weight: 400;

    color: var(--gold); /* Gold title */

    margin-bottom: 1rem;

    line-height: 1.1;

}



.clients-subtitle {

    font-family: var(--font-sans);

    font-size: clamp(1rem, 2vw, 1.4rem);

    color: #f1f1f1; /* White/Greyish subtitle */

    max-width: 800px;

    margin: 0 auto;

    font-weight: 400;

}



.clients-grid {

    display: grid;

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

    gap: 2.5rem;

    margin-top: 4rem;

}



.client-card {

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

    border: 1px solid rgba(220, 172, 72, 0.5); /* Gold border */

    padding: 3.5rem 2rem;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    transition: all 0.4s var(--ease);

    border-radius: 4px;

}



.client-card:hover {

    background: rgba(220, 172, 72, 0.05);

    border-color: var(--gold);

    transform: translateY(-8px);

    box-shadow: 0 15px 40px rgba(0,0,0,0.5);

}



.client-name {

    font-family: var(--font-sans);

    font-size: 1.5rem;

    font-weight: 700;

    color: #fff;

    margin-bottom: 0.5rem;

}



.client-location {

    font-family: var(--font-sans);

    font-size: 1.1rem;

    color: var(--gold);

    font-weight: 400;

}



@media (max-width: 1024px) {

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

}



@media (max-width: 768px) {

    .clients-grid { grid-template-columns: 1fr; gap: 1.5rem; }

    .client-card { padding: 2.5rem 1.5rem; }

}





/* =========================================================================

   CONTACT PAGE

   ========================================================================= */



.contact-main {

    background: var(--bgcolor);

    overflow: hidden;

}



.contact-hero {

    position: relative;

    width: 100%;

    height: 60vh;

    min-height: 500px;

    margin-top: 68px;

    background: #111;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding-bottom: 5rem;

    overflow: hidden;

}



.contact-hero-bg {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    filter: brightness(0.6) contrast(1.1);

    z-index: 1;

}



.contact-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.8) 100%);

}



.contact-hero-content {

    position: relative;

    z-index: 3;

    width: 100%;

    text-align: center;

    padding: 0 2rem;

}



.contact-hero-title {

    font-family: var(--font-sans);

    font-size: clamp(2.5rem, 5vw, 4.2rem);

    font-weight: 800;

    color: #fff;

    margin-bottom: 0.5rem;

    letter-spacing: -0.01em;

}



.contact-hero-sub {

    font-family: var(--font-sans);

    font-size: clamp(1.2rem, 2.5vw, 1.8rem);

    font-weight: 400;

    color: #f1f1f1;

    margin: 0;

}



/* --- Contact Section --- */

.contact-section {

    padding: 8rem 0;

    background: var(--bgcolor);

}



.contact-container {

    max-width: 1300px;

    margin: 0 auto;

    padding: 0 2rem;

    display: flex;

    gap: 5rem;

    align-items: flex-start;

}



.contact-info {

    flex: 0 0 40%;

}



.contact-info h2 {

    font-family: var(--font-sans);

    font-size: 2.5rem;

    font-weight: 800;

    color: #111;

    margin-bottom: 2rem;

    line-height: 1.2;

}



.contact-info p {

    font-family: var(--font-sans);

    font-size: 1.1rem;

    color: #555;

    line-height: 1.7;

    margin-bottom: 3rem;

    text-align: justify;

}



.contact-details {

    display: flex;

    flex-direction: column;

    gap: 2.5rem;

}



.contact-item {

    display: flex;

    align-items: flex-start;

    gap: 1.5rem;

}



.contact-item-icon {

    width: 50px;

    height: 50px;

    background: var(--gold);

    color: #111;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.2rem;

    border-radius: 50%;

    flex-shrink: 0;

}



.contact-item-text h4 {

    font-family: var(--font-sans);

    font-size: 1rem;

    font-weight: 700;

    color: #111;

    margin-bottom: 0.3rem;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.contact-item-text p {

    font-size: 1rem;

    color: #444;

    margin: 0;

    line-height: 1.5;

    text-align: justify;

}



.contact-item-text a {

    color: var(--gold-dark);

    font-weight: 600;

}



.contact-form-wrap {

    flex: 1;

    background: #fff;

    padding: 4rem;

    border-radius: 4px;

    box-shadow: 0 20px 50px rgba(0,0,0,0.05);

}



.contact-form {

    display: grid;

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

    gap: 2rem;

}



.form-group {

    display: flex;

    flex-direction: column;

    gap: 0.8rem;

}



.form-group.full {

    grid-column: span 2;

}



.form-group label {

    font-family: var(--font-sans);

    font-size: 0.85rem;

    font-weight: 700;

    color: #111;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.form-group input, 

.form-group textarea {

    width: 100%;

    padding: 1rem 1.2rem;

    border: 1px solid #ddd;

    background: #fdfdfd;

    font-family: var(--font-sans);

    font-size: 1rem;

    color: #111;

    border-radius: 4px;

    transition: all 0.3s ease;

}



.form-group input:focus, 

.form-group textarea:focus {

    outline: none;

    border-color: var(--gold);

    background: #fff;

    box-shadow: 0 0 0 4px rgba(220,172,72,0.1);

}



.form-group textarea {

    height: 150px;

    resize: none;

}



.btn-submit {

    grid-column: span 2;

    background: var(--gold);

    color: #111;

    border: none;

    padding: 1.2rem;

    font-family: var(--font-sans);

    font-size: 1rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    cursor: pointer;

    transition: all 0.3s ease;

    border-radius: 4px;

    margin-top: 1rem;

}



.btn-submit:hover {

    background: var(--gold-dark);

    color: #fff;

    transform: translateY(-3px);

    box-shadow: 0 10px 30px rgba(220,172,72,0.3);

}



/* =========================================================================

   RESPONSIVE

   ========================================================================= */



/* ---- 1100px: Large Tablet / Small Desktop ---- */

@media (max-width: 1100px) {

    .nav-list { gap: 1rem; }

    .nav-link { font-size: 0.8rem; }

    .stats-row { flex-wrap: wrap; gap: 2rem; }

    .stat-connector { display: none; }

    .stat-block { max-width: 45%; flex: 0 0 45%; }

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

    .svc-card { border-right: 1.5px solid var(--border); border-bottom: 1.5px solid var(--border); }

    .svc-card:nth-child(3n) { border-right: none; }

    .svc-card:nth-child(n+10) { border-bottom: none; }

    .methodology-steps { flex-wrap: wrap; gap: 2rem; }

    .methodology-steps::before { display: none; }

    .mstep { min-width: 100px; }



    /* Services page */

    .svc-hero-title { font-size: clamp(2.2rem, 4vw, 3.5rem); }

    .os-title { font-size: 2.2rem; }

    .os-panel-text-wrap h3 { font-size: 2.2rem; }

    .os-org-cell { padding: 2.5rem 1rem 3rem; }

    .os-org-cell h4 { font-size: 1.1rem; }

    .os-org-cell p { font-size: 0.88rem; }



    /* Careers page */

    .careers-culture-text { padding: 0 2rem; }

    .wp-grid { flex-wrap: wrap; gap: 2rem; }

    .wp-item { flex: 0 0 45%; border-right: none !important; border-bottom: 1px solid rgba(220,172,72,0.3); padding-bottom: 2rem; }

    .wp-item:nth-last-child(-n+2) { border-bottom: none; }



    /* About Us page */

    .about-who-inner, .about-benefits-inner, .about-solution-inner, .about-leader-inner { gap: 3rem; }

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

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

    

    /* Decoration removal */

    .hide-mobile-tab { display: none !important; }

    .svc-intro-img, .os-panel-img, .careers-culture-img, .os-tab-panel img { 

        clip-path: none !important; 

    }

}



/* ---- 900px: Tablet ---- */

@media (max-width: 900px) {

    .redef-wrap { flex-direction: column; }

    .redef-left { padding-right: 0; padding-bottom: 3rem; flex: 1; }

    .redef-right { flex: 1; width: 100%; min-height: 300px; }

    .redef-chevron { display: none; }

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

    .svc-card { border-right: 1.5px solid var(--border); border-bottom: 1.5px solid var(--border); }

    .svc-card:nth-child(2n) { border-right: none; }

    .svc-card:nth-child(n+9) { border-bottom: none; }

    .footer-inner { flex-wrap: wrap; gap: 3rem; justify-content: flex-start; }

    .footer-left { flex: 1 1 100%; order: 3; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 2rem; }

    .footer-center { flex: 1 1 60%; order: 1; }

    .footer-right { flex: 1 1 30%; order: 2; flex-direction: column; align-items: flex-start; }



    /* Services page — stack everything vertically */

    .svc-intro-inner { flex-direction: column; }

    .svc-intro-content { width: 100%; padding: 0 2rem 2rem; }

    .svc-intro-img {

        width: 100%;

        min-height: 480px; /* Increased to show more of the portrait */

        background-position: top center; /* Prioritize the top (face) of the image */

    }

    .svc-dashed-line-wrap { display: none; }



    /* Tabs */

    .os-tab-btn { font-size: 0.85rem; letter-spacing: 0.02em; }

    .os-tabs-nav { height: 52px; }



    /* Panel split: stack */

    .os-panel-split { flex-direction: column; padding-bottom: 0; }

    .os-panel-img-wrap { min-height: 320px; width: 100%; }

    .os-dashed-connector { display: none; }

    .os-panel-text-wrap {

        padding: 2rem 2rem 3rem;

        width: 100%;

    }

    .os-panel-text-wrap h3 { font-size: 2rem; }

    .os-panel-text-wrap p { font-size: 1rem; }



    /* Org chart: stack cells */

    .os-org-row { flex-direction: column; border-bottom: none !important; }

    .os-org-cell { 

        border-left: none !important; 

        border-right: none !important; 

        border-bottom: 1px solid rgba(220,172,72,0.25); 

        padding: 3rem 1.5rem;

    }

    .os-org-row:last-child .os-org-cell:last-child { border-bottom: none; }

    .os-org-grid { padding: 2rem 0; }

    .os-org-icon { height: 45px; margin-bottom: 1rem; }

    .os-org-cell.center-node { max-width: 100%; border-bottom: 1px solid rgba(220,172,72,0.25); }

    .os-org-row:last-child .os-org-cell.center-node { border-bottom: none; }



    /* Careers page */

    .careers-culture-inner { flex-direction: column; }

    .careers-culture-text { padding: 0 2rem 3rem; }

    .careers-culture-img-wrap { width: 100%; min-height: 400px; }

    .careers-culture-img { clip-path: none !important; }

    .culture-wedge-icon { display: none; }



    /* About Us page */

    .about-who-inner, .about-benefits-inner, .about-solution-inner, .about-leader-inner { flex-direction: column; text-align: left; }

    .about-who-visual, .about-benefits-right, .about-solution-visual, .about-leader-visual { width: 100%; }

    .about-who-text, .about-benefits-left, .about-solution-text, .about-leader-text { width: 100%; margin-bottom: 3rem; }

    .solution-img, .leader-img, .about-who-img { min-height: 400px; }

    .about-benefits-inner { flex-direction: column; }

    .about-edge-inner h2 { font-size: 2.3rem; }

    

    /* Fix potential horizontal overflow from negative margins/calc widths */

    .redef-divider { width: 100%; }

    .redef-icon { margin-right: 0; margin-left: 10px; height: 40px; }

    .redef-left { padding: 4rem 2rem; }

}



/* ---- 1024px: Tablet & Mobile ---- */

@media (max-width: 1024px) {

    .header-inner { gap: 1rem; }

    .nav-list { display: none; } /* Hide desktop menu */

    .mobile-toggle { display: flex; }

    .nav {

        display: block; /* Show container */

        position: fixed;

        top: 68px; right: -100%;

        width: 80%; max-width: 320px;

        height: calc(100vh - 68px);

        background: var(--cream);

        padding: 2rem 1.5rem;

        transition: right 0.4s var(--ease);

        z-index: 999;

        box-shadow: -8px 0 32px rgba(0,0,0,0.1);

    }

    .nav.open { right: 0; }

    .nav .nav-list { 

        display: flex; 

        flex-direction: column; 

        gap: 1.5rem; 

        align-items: flex-start;

    }

    .nav-link { font-size: 1.1rem; }

}



/* Specific Mobile Fixes */

@media (max-width: 768px) {

    .mobile-toggle { display: flex; }

    .hero { height: auto; min-height: 65vh; padding: 80px 0 50px; }

    .hero-content { padding: 0 1rem; }

    .hero-text-slider { min-height: auto; padding: 0 55px; }

    .hero-title { font-size: clamp(1.6rem, 5vw, 2.2rem); margin-bottom: 0.8rem; }

    .hero-quote-inner { white-space: normal; }

    .hero-quote-text { font-size: clamp(0.7rem, 2.5vw, 0.9rem); line-height: 1.3; }

    .quote-open { font-size: 2.2rem; margin-top: 0; }

    .quote-close { font-size: 1.8rem; transform: translateY(0.5rem); }

    .hero-nav-prev { left: 8px; }

    .hero-nav-next { right: 8px; }

    .hero-pagination { bottom: -25px; }

    .hero-deco { display: none; }

    .stat-block { max-width: 100%; flex: 0 0 100%; }

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





    /* Services page */

    .os-tabs-section { padding: 4rem 0; }

    .svc-hero { min-height: 55vh; }

    .svc-hero-title { font-size: 1.8rem; }

    .svc-hero-sub { font-size: 1rem; }

    .os-title { font-size: 1.8rem; margin: 0 1rem; }

    .os-title-line { display: none; }

    .os-tabs-header { margin-bottom: 2.5rem; }



    /* Tabs: remove clip-path on small screens for clean rectangular look */

    .os-tab-btn { font-size: 0.75rem; letter-spacing: 0; }

    .os-tab-btn[data-tab="tab-1"],

    .os-tab-btn[data-tab="tab-2"],

    .os-tab-btn[data-tab="tab-3"],

    .os-tab-btn[data-tab="tab-4"],

    .os-tab-btn[data-tab="tab-5"] {

        clip-path: none;

        border-radius: 4px;

    }

    .os-tabs-nav { 

        gap: 12px; 

        height: auto; 

        flex-direction: column; 

        padding: 0 15px;

    }

    .os-tab-btn { 

        width: 100%; 

        padding: 16px 15px; 

        height: auto; 

        min-height: 48px;

        font-size: 0.85rem;

        line-height: 1.2;

    }

    .os-tab-spacer { display: none; }



    .os-panel-text-wrap h3 { font-size: 1.7rem; }

    .os-org-chart-bg { margin-bottom: 3rem; }

    .os-org-grid { padding: 2rem 0.5rem 3rem; }

    .os-org-cell h4 { font-size: 1rem; }

    .os-org-cell p { font-size: 0.82rem; }



    /* Careers page */

    .wp-item { flex: 0 0 100%; max-width: 100%; border-bottom: 1px solid rgba(220,172,72,0.3) !important; padding-bottom: 2rem; }

    .wp-item:last-child { border-bottom: none !important; padding-bottom: 0; }

    .nc-title { font-size: 1.8rem; }

    .nc-subtitle { font-size: 1.4rem; }

    .nc-slogan { font-size: 1.2rem; }



    /* About Us page */

    .about-hero { min-height: 380px; height: 50vh; }

    .about-title-main { font-size: clamp(2rem, 8vw, 2.5rem); }

    .about-section-padding { padding: 4rem 0; }

    .about-why-grid { grid-template-columns: 1fr; gap: 2rem; }

    .about-solution-card { padding: 2.5rem 1.5rem; border-radius: 12px; }

    .about-sol-grid { grid-template-columns: 1fr; gap: 2rem; }

    .about-who, .about-usps, .about-benefits, .about-edge, .about-problems, .about-solution, .about-leader, .about-trust, .about-cta-section { padding: 4rem 0; }

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

    .grid-2x2 { grid-template-columns: 1fr; }

    .about-who-text h2, .about-benefits h2, .about-solution-text h2, .about-leader-text h2, .about-philosophy-inner h2, .about-edge-inner h2, .problems-title, .about-cta-inner h2 { font-size: 2rem; }

    .about-trust-inner h2 { font-size: 2.2rem; }

    .about-philosophy-inner p { font-size: 1rem; }

    .leader-img { box-shadow: -10px 10px 0 var(--gold); }



    /* Contact page */

    .contact-container { flex-direction: column; gap: 3rem; }

    .contact-info { flex: 0 0 100%; text-align: left; }

    .contact-details { align-items: flex-start; }

    .contact-item { text-align: left; }

    .contact-tabs { flex-direction: column; gap: 10px; }

    .contact-tab-btn { padding: 1rem; font-size: 0.75rem; }

    .contact-form-wrap { padding: 2rem 1.5rem; }

    .contact-form { grid-template-columns: 1fr; gap: 1.5rem; }

    .form-group.full { grid-column: span 1; }

    .btn-submit { grid-column: span 1; }



    /* Our Client page */

    .clients-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

    .client-card { padding: 2.5rem 1.5rem; }

}



/* ---- 480px: Small Mobile ---- */

@media (max-width: 480px) {

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

    .svc-card { border-right: none; border-bottom: 1.5px solid var(--border); }

    .svc-card:last-child { border-bottom: none; }

    .logo img { height: 40px; }

    .hero { min-height: 55vh; padding: 70px 0 40px; }

    .hero-title { font-size: 1.5rem; }

    .hero-quote-text { font-size: clamp(0.6rem, 3.5vw, 0.85rem); }

    .quote-open { font-size: 2.2rem; }

    .quote-close { font-size: 1.8rem; }

    .hero-nav-prev, .hero-nav-next { width: 35px; height: 35px; }

    .header-inner { padding: 0 1rem; height: 60px; }

    .logo img { height: 35px; }

    .os-tabs-nav { flex-direction: column; height: auto; gap: 5px; }

    .os-tab-btn { width: 100%; height: auto; padding: 14px 10px; clip-path: none !important; border-radius: 4px; }



    /* Contact page */

    .contact-info, .contact-details, .contact-item { text-align: left !important; align-items: flex-start !important; }

    .contact-item-text { text-align: left; }

    .contact-info p { text-align: left; }



    /* Our Client page */

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

    .clients-title { font-size: 2.22rem; }

}



/* ---- Footer Responsive Overhaul ---- */

@media (max-width: 960px) {

  .footer-inner {

    grid-template-columns: 1fr 1fr;

    gap: 40px;

  }

  .f-brand {

    grid-column: 1 / -1;

    text-align: center;

  }

  .f-brand .f-tag, .f-brand .f-address {

    max-width: 100%;

    margin-left: auto;

    margin-right: auto;

  }

  .f-brand .f-rule {

    margin: 0 auto 18px;

  }

}



@media (max-width: 768px) {

  .footer {

    padding: 60px 20px 30px;

    background: radial-gradient(circle at 50% 0%, rgba(185, 151, 85, 0.15), transparent 70%), #0d0d0d;

  }

  .footer-inner {

    grid-template-columns: 1fr;

    gap: 48px;

    text-align: center;

  }

  .f-nav-title::after, .f-connect-title::after {

    left: 50%;

    transform: translateX(-50%);

  }

  .f-nav-grid {

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

    max-width: 400px;

    margin: 0 auto;

    text-align: left;

  }

  .f-connect p {

    justify-content: center;

  }

  .f-social {

    justify-content: center;

  }

  .f-subscribe {

    width: 100%;

    max-width: 280px;

    justify-content: center;

  }

  .f-bottom {

    flex-direction: column;

    gap: 20px;

    padding-top: 30px;

    margin-top: 50px;

    text-align: center;

  }

  .f-legal {

    justify-content: center;

  }

}



@media (max-width: 480px) {

  .f-nav-grid {

    grid-template-columns: 1fr;

    text-align: center;

    gap: 5px;

  }

  .f-nav-grid a {

    justify-content: center;

    font-size: 13px;

    padding: 4px 0;

  }

  .f-nav-grid a i {

    font-size: 11px;

  }

  .f-brand .f-tag {

    font-size: 18px;

  }

  .f-brand .f-logo img {

    max-width: 130px;

  }

}