:root {
    --bg: #f7f8fa;
    --surface: #ffffff;
    --dark: #111827;
    --text: #344054;
    --muted: #667085;

    --primary: #0B4F6C;
    --primary-dark: #083B50;

    --border: #e5e7eb;

    --radius: 18px;

    --shadow:
        0 20px 40px rgba(15, 23, 42, 0.08);
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    font-family:
        Inter,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    background: var(--bg);

    color: var(--text);

    line-height: 1.7;
}



img {

    max-width: 100%;

    display: block;

}



.container {

    width: min(1200px, 90%);

    margin: auto;

}



/* --------------------
   HEADER
-------------------- */


header {

    background: rgba(255,255,255,.85);

    backdrop-filter: blur(10px);

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

    position:sticky;

    top:0;

    z-index:100;

}


.nav {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 0;

}

.logo {
    text-decoration: none;
    line-height: 1;
    display: flex;
    flex-direction: column;
}

.logo .brand {
    font-size: 2rem;
    font-weight: 700;
    color: #1f6f8b;
    letter-spacing: -1px;
}

.logo .descriptor {
    font-size: .75rem;
    letter-spacing: 4px;
    color: #888;
    margin-top: 8px;
}

.logo {

    font-size:1.4rem;

    font-weight:700;

    color:var(--dark);

}


.logo span {

    display:block;

    font-size:.85rem;

    color:var(--muted);

    font-weight:500;

}



nav a {

    color:var(--text);

    text-decoration:none;

    margin-left:30px;

    font-weight:500;

}


nav a:hover {

    color:var(--primary);

}





/* --------------------
   HERO
-------------------- */


.hero {

    padding:120px 0 100px;

}



.hero-grid {

    display:grid;

    grid-template-columns:

    1fr 1fr;

    gap:70px;

    align-items:center;

}



.hero h1 {

    font-size:

    clamp(3rem,5vw,5rem);

    line-height:1.05;

    letter-spacing:-2px;

    color:var(--dark);

    margin:0 0 30px;

}



.hero p {

    font-size:1.25rem;

    color:var(--muted);

    max-width:650px;

}





.button {

    display:inline-block;

    margin-top:35px;

    padding:16px 32px;

    background:var(--primary);

    color:white;

    border-radius:999px;

    text-decoration:none;

    font-weight:600;

    transition:.25s;

}



.button:hover {

    background:var(--primary-dark);

    transform:translateY(-2px);

}





.hero-image {

    border-radius:30px;

    overflow:hidden;

    box-shadow:var(--shadow);

}





/* --------------------
   SECTIONS
-------------------- */


section {

    padding:100px 0;

}



.dark-section {

    background:var(--dark);

    color:white;

}



.section-title {

    max-width:700px;

    margin-bottom:60px;

}



.section-title h2 {

    font-size:3rem;

    line-height:1.1;

    color:var(--dark);

}



.dark-section h2 {

    color:white;

}



.section-title p {

    color:var(--muted);

    font-size:1.2rem;

}





/* --------------------
   CARDS
-------------------- */


.cards {

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:30px;

}



.card {

    background:var(--surface);

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

    padding:35px;

    border-radius:var(--radius);

    transition:.25s;

}



.card:hover {

    transform:translateY(-5px);

    box-shadow:var(--shadow);

}



.card h3 {

    color:var(--dark);

    font-size:1.3rem;

}



.card p {

    color:var(--muted);

}




/* --------------------
   QUOTES
-------------------- */


.quote {

    max-width:900px;

    margin:auto;

    text-align:center;

}


.quote p {

    font-size:

    clamp(2rem,4vw,3rem);

    line-height:1.2;

    color:var(--dark);

    font-weight:600;

}

/* Homepage Philosophy Banner */

.philosophy-banner {

    text-align: center;

/*    padding: 70px 40px;

    background: #3f4856;

    border-radius: 16px;

    margin: 40px auto; */

}

.philosophy-banner p {

    color: #ffffff;

    font-size: 2.5rem;

    line-height: 1.6;

    max-width: 900px;

    margin: auto;

    font-weight: 300;

}




/* --------------------
   SPLIT SECTIONS
-------------------- */


.split {

    display:grid;

    grid-template-columns:

    1fr 1fr;

    gap:70px;

    align-items:center;

}

.contact-split {
    align-items: start;
}



/* --------------------
   FOOTER
-------------------- */


footer {

    background:var(--dark);

    color:#cbd5e1;

    padding:60px 0;

    text-align:center;

}



footer strong {

    color:white;

}





/* --------------------
   MOBILE
-------------------- */


@media(max-width:900px){


.hero-grid,

.split,

.cards {

    grid-template-columns:1fr;

}



nav {

    display:none;

}



.hero {

    padding:80px 0;

}



.hero h1 {

    letter-spacing:-1px;

}



}

/* --------------------
   Founder Profile
-------------------- */


.founder-card {

    max-width: 340px;
    margin: 0 auto;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,.10);

}

.founder-card img {

    width: 100%;
    display: block;

}

.founder-info {

    padding: 22px;

    text-align: center;

}

.founder-info h3 {

    margin: 0;
    font-size: 1.35rem;

}

.founder-info p {

    margin: 8px 0 4px;
    color: var(--primary);
    font-weight: 600;

}

.founder-info span {

    color: #777;
    font-size: .9rem;

}



/* --------------------
   FORM
-------------------- */


.contact-form {

    max-width:700px;
    margin:20px auto;
    color: var(--text);

}

.contact-form label {

    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:var(--heading);

}
.contact-form input,
.contact-form textarea {

    color: var(--text);

}
.form-group {

    margin-bottom:40px;

}


.form-group label {

    display:block;
    margin-bottom:8px;
    font-weight:600;

}


.form-group input,
.form-group textarea {

    width:100%;
    padding:12px 14px;
    border:1px solid #D0D5DD;
    border-radius:8px;
    font-size:1rem;
    font-family:inherit;

}


.form-group input:focus,
.form-group textarea:focus {

    outline:none;
    border-color:var(--primary);

}