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

:root {
    --dark-blue: #012130; /* Your Dark Color */
    --main-bg: #E8EBEC;   /* Your Main Background */
    --text-para: #2F4956; /* Your Paragraph Color */
    --title-col: #012130; /* Your Title Color */
    --teal: #4FD1C5;      /* Cyan/Teal highlight from design */
    --white: #FFFFFF;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-para);
    line-height: 1.5;
    background: var(--main-bg);
}

.container {
    max-width: 1320px; /* 1240px content + 80px padding */
    margin: 0 auto;
    padding: 0 40px;
}

/* Header */
.header {
    padding: 30px 0; /* Increased vertical padding */
    background: var(--main-bg); /* Match main background */
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 48px; /* Increased from 32px */
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-menu a {
    text-decoration: none;
    color: var(--title-col);
    font-size: 16px;
    font-weight: 500;
}

/* Dropdown Menu */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 250px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100;
    border-radius: 4px;
    top: 100%;
    left: 0;
    margin-top: 8px;
}

.dropdown-content a {
    color: var(--text-para);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 14px;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
    color: var(--teal);
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Nav Menu Dropdown Button - inherits nav-menu a styles */
.nav-menu .dropdown .dropbtn {
    text-decoration: none;
    color: var(--title-col);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.nav-menu .btn-contact {
    background: var(--dark-blue);
    color: #fff;
    padding: 10px 24px;
    border-radius: 4px;
    font-weight: 500;
}

/* Hero */
.hero {
    padding: 60px 0 40px;
    background: var(--main-bg);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}

.hero-text h1 {
    font-size: 74px; /* Updated per user request */
    line-height: 1.2; /* Increased line-height from 1.1 */
    font-weight: 500;
    color: var(--title-col);
    margin-bottom: 60px; /* Increased spacing from 30px */
    letter-spacing: -2px; 
}

.hero-text p {
    color: var(--text-para);
    font-size: 24px; /* Updated per user request */
    max-width: 580px; /* Increased max-width to accommodate larger text */
    line-height: 1.5;
    letter-spacing: -0.3px; /* Subtle negative tracking for body text */
}

.hero-image {
    position: relative;
    height: 600px; /* Increased from 500px to prevent cutoff */
    background: transparent;
    border-radius: 0;
    overflow: hidden; /* Ensure clip-path works cleanly */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Diagonal cut on bottom-left */
    clip-path: polygon(
        0 0,            /* Top Left */
        100% 0,         /* Top Right */
        100% 100%,      /* Bottom Right */
        25% 100%,       /* Bottom Left Start Cut */
        0 75%           /* Bottom Left End Cut (up the left side) */
    );
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover to fill the shape */
    object-position: center;
}

.hero-overlay-text {
    position: absolute;
    top: 40px;
    left: 40px;
    color: #fff; /* Assuming white text on dark image */
    font-size: 24px; /* Increased back to 24px */
    font-weight: 300;
    line-height: 1.2;
    z-index: 10;
    text-align: left;
}

.partners-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 40px; /* Increased padding */
    border-top: none; /* Removed border */
    font-weight: 500;
    margin-top: 20px;
}

.partners-bar img {
    height: 48px; /* Reduced from 56px, but larger than previous 40px */
    opacity: 0.8;
    transition: opacity 0.3s;
    object-fit: contain; /* Ensure they scale correctly */
}

.partners-bar img:hover {
    opacity: 1;
}

/* Framework Layout */
.framework {
    padding: 60px 0;
    background: var(--main-bg);
}

.framework h3 {
    color: var(--title-col);
    font-size: 28px;
    margin-bottom: 40px;
    font-weight: 500;
}

.text-columns {
    display: block; /* Changed from grid to block for single column */
    margin-bottom: 40px;
    max-width: 900px; /* Optional: limit width for readability if needed, or keep full width */
}

.text-columns p {
    color: var(--text-para);
    font-size: 16px; /* Increased to 16px */
    line-height: 1.6;
    margin-bottom: 24px;
}

.framework-image {
    background: transparent;
}

.framework-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Numbered Section */
.numbered-features {
    background: var(--main-bg);
    padding: 80px 0;
}

.numbered-features h2 {
    font-size: 42px; /* Increased to match visual weight */
    color: var(--title-col);
    margin-bottom: 60px;
    line-height: 1.2;
    font-weight: 500;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.feature-item.card-style {
    background: transparent;
    border: 1px solid #FFFFFF; /* White border */
    padding: 40px;
    border-radius: 8px;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.feature-item.card-style:hover {
    border-color: var(--teal); /* Highlight on hover optional */
}

.icon-wrapper {
    width: 42px; /* Smaller box */
    height: 42px;
    border: 1px solid #DBDBDB; /* Icon border */
    border-radius: 8px; /* Adjusted radius */
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F0F0F0; /* Icon background */
}

.icon-wrapper img {
    width: 20px; /* Smaller icon */
    height: 20px;
    object-fit: contain;
}

/* Remove old numbering style */
.feature-item .number {
    display: none;
}

.feature-item h4 {
    font-size: 20px;
    font-weight: 500; /* Reduced thickness */
    color: var(--title-col);
    margin-bottom: 16px;
}

.feature-item p {
    font-size: 16px; /* Increased to 16px */
    color: var(--text-para);
    line-height: 1.6;
}

/* Team Section */
.team {
    padding: 80px 0;
    background: var(--main-bg);
}

/* Specific override for h3 selectors to ensure they all get the same size */
.team h3, .profile-split h3, .process-flow h3, .visual-impact h3, .framework h3 {
    font-size: 28px;
    margin-bottom: 40px;
    color: var(--title-col);
    font-weight: 500;
}

.team-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.team-card {
    background: transparent; /* Remove white background */
    box-shadow: none; /* Remove shadow */
}

.card-image {
    height: 250px;
    background: transparent; /* Remove background */
    margin-bottom: 15px;
    overflow: hidden;
    border-radius: 8px; /* Optional rounding */
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-text {
    padding: 0; /* Remove padding */
}

.card-text h5 {
    font-size: 16px;
    color: var(--title-col);
    margin-bottom: 4px;
}

.card-text .role {
    font-size: 12px;
    color: var(--teal);
    font-weight: 500;
}

/* Profile Split Section */
.profile-split {
    padding: 0 0 80px 0;
    background: var(--main-bg);
}

.split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.profile-split h3 {
    font-size: 28px;
    margin-bottom: 40px;
    color: var(--title-col);
    font-weight: 500;
}

.split-text p {
    color: var(--text-para);
    font-size: 20px; /* Increased from 16px */
    margin-bottom: 20px;
    line-height: 1.5; 
}

.profile-card-horizontal {
    display: flex;
    background: transparent;
    box-shadow: none;
    align-items: center;
}

.pch-text {
    flex: 1;
    padding: 30px 30px 30px 0;
}

.pch-text h5 {
    font-size: 18px;
    margin-bottom: 8px;
    color: var(--title-col);
}

.pch-text .role {
    color: var(--teal);
    font-size: 12px;
    font-weight: 500;
}

.pch-image {
    width: 150px;
    height: 180px;
    background: transparent;
}

.pch-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Process Flow */
.process-flow {
    background: var(--main-bg);
    padding: 80px 0;
}

.process-flow h3 {
    font-size: 28px;
    color: var(--title-col);
    margin-bottom: 40px;
    font-weight: 500;
}

.flowchart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.flow-level {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.flow-box {
    padding: 12px 24px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    min-width: 140px;
    text-align: center;
    position: relative;
    border-radius: 4px;
}

.flow-box.dark { background: var(--dark-blue); }
.flow-box.teal { background: var(--teal); }
.flow-box.gray { background: #CBD5E0; color: var(--dark-blue); }

.flow-connector-vertical {
    width: 1px;
    height: 20px;
    background: #CBD5E0;
    margin-top: -30px;
    margin-bottom: -30px;
}

/* Visual Impact / Projects */
.visual-impact {
    padding: 80px 0;
    background: var(--main-bg);
}

.visual-impact h3 {
    font-size: 28px;
    color: var(--title-col);
    margin-bottom: 40px;
}

.impact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.impact-image {
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
    background: transparent;
}

.impact-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.impact-text p {
    font-size: 14px;
    font-weight: 500;
    color: var(--title-col);
    line-height: 1.4;
}

.more-btn-container {
    text-align: center;
    margin-top: 40px;
}

.btn-more {
    background: transparent;
    border: 1px solid var(--text-para);
    padding: 8px 32px;
    border-radius: 20px;
    font-size: 12px;
    color: var(--text-para);
    cursor: pointer;
    transition: all 0.3s;
}

.btn-more:hover {
    background: var(--dark-blue);
    color: #fff;
    border-color: var(--dark-blue);
}

/* Footer */
.footer {
    background: var(--dark-blue);
    color: #fff;
    padding: 60px 0 30px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Changed to 2 columns */
    margin-bottom: 60px;
    gap: 40px; /* Added gap for safety */
}

.footer-col h5 {
    color: var(--teal);
    font-size: 14px;
    margin-bottom: 20px;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    color: #A0AEC0;
    text-decoration: none;
    font-size: 12px;
}

.footer-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-logo img {
    height: 30px;
    opacity: 0.9;
}

.copyright {
    font-size: 12px;
    color: #718096;
}

/* Style Guide Strip */
.style-guide {
    padding: 40px 0;
    border-top: 1px solid #eee;
    background: #fff; /* Keep this white as per design usually, or match main BG */
}

.guide-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.guide-logo, .guide-icons, .guide-colors {
    display: flex;
    align-items: center;
    gap: 20px;
}

.guide-logo .guide-mark {
    color: var(--teal);
    font-size: 24px;
    font-weight: 500;
}

.guide-logo .guide-text {
    display: flex;
    flex-direction: column;
    font-size: 10px;
    font-weight: 500;
    color: var(--dark-blue);
}

.icon-box {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.icon-box.dark { background: var(--dark-blue); color: #fff; }
.icon-box.teal { background: var(--teal); color: #fff; }
.icon-box.outline { border: 1px solid var(--teal); color: var(--teal); }

.swatch {
    width: 40px;
    height: 40px;
}

.swatch.teal { background: var(--teal); }
.swatch.gradient { background: linear-gradient(to bottom, var(--teal), transparent); }
.swatch.dark { background: var(--dark-blue); }
.swatch.darker { background: #081C2E; }
/* Org Chart Styles */
.org-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
    max-width: 100%; /* Fill container */
    margin: 0 auto;
}

.org-box {
    padding: 15px 20px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 55px; /* Slightly taller */
    
    /* Sharper bottom-left cut */
    clip-path: polygon(
        0 0,            /* Top Left */
        100% 0,         /* Top Right */
        100% 100%,      /* Bottom Right */
        25px 100%,      /* Bottom Left Start Cut */
        0 calc(100% - 25px) /* Bottom Left End Cut */
    );
}

.main-width { width: 360px; } /* Wider */
.side-width { width: 340px; } /* Wider */
.branch-width { width: 360px; } /* Wider */

.org-box.dark { background: var(--dark-blue); }
.org-box.teal { background: var(--teal); }
.org-box.grey { background: #94A3B8; }

.row-level {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
}

.top-level {
    /* Shareholder box centered relative to main column */
    justify-content: center;
    margin-right: 370px; /* Offset = side-width + gap */
}

/* Middle Rows: Main Col + Side Col */
.middle-level {
    display: flex;
    gap: 30px; /* Gap between main teal box and side grey box */
    align-items: center;
    justify-content: center;
}

.col-main {
    position: relative;
    display: flex;
    justify-content: center;
}

.col-side {
    display: flex;
    align-items: center;
}

.v-line {
    width: 1px;
    background: #555;
    height: 30px;
    margin-right: 370px; /* Maintain alignment with main column */
}

.v-line.long {
    height: 40px;
}

.v-line.short {
    height: 20px;
    margin-right: 0; /* Reset for branch lines */
}

/* Dots */
.connector-dot {
    width: 6px;
    height: 6px;
    background: #000;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

.connector-dot.top { top: -3px; }
.connector-dot.bottom { bottom: -3px; }
.connector-dot.branch-top { top: -3px; }

/* Branches */
.level-branches {
    position: relative;
    width: 100%;
}

.branch-line {
    height: 1px;
    background: #555;
    width: 800px; /* Widen to span new branch widths */
    margin: 0 auto;
    position: relative;
}

.branches-grid {
    display: flex;
    justify-content: center;
    gap: 40px; /* More space between branches */
}

.branch-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 360px; /* Match branch-width */
    position: relative;
}

/* Team Member Image Replacement */
.team-member-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Modifer specifically for CEO image container if needed */
.split-card .team-member-image {
    width: 80%; /* Reduce size to 80% */
    margin: 0; /* Remove centering */
    margin-left: auto; /* Push to the right */
}

.team-member-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Hide or Remove Old Team Card Styles to clean up */
.team-card-custom, .ceo-card {
    display: none;
}


/* Hide old styles if any conflict */
.team-card, .profile-card-horizontal {
    display: none;
}