@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');


/* ================= COLORS ================= */

:root {

    --navy: #0b1d2a;

    --navy-2: #102b3d;

    --steel: #315b73;

    --gold: #c5a15b;

    --gold-light: #dfc88f;

    --cream: #f4f2ed;

    --white: #ffffff;

    --text: #25323a;

    --muted: #68747b;

    --line: #d9dde0;

}



/* ================= GENERAL ================= */

* {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    font-family: "Montserrat", Arial, sans-serif;

    color: var(--text);

    background: var(--white);

}


img {

    display: block;

    width: 100%;

}


a {

    color: inherit;

}



/* ================= NAVBAR ================= */

nav {

    height: 82px;

    background: rgba(11, 29, 42, 0.97);

    color: white;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 6%;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

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

    backdrop-filter: blur(12px);

}


.logo {

    display: flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

}


.logo-mark {

    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

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

    color: var(--gold-light);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;

}


.logo-text {

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 2px;

}


.logo-text small {

    display: block;

    margin-top: 4px;

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 2.5px;

    color: #b9c5cb;

}


.links {

    display: flex;

    align-items: center;

    gap: 34px;

}


.links a {

    text-decoration: none;

    color: #f7f7f7;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

    position: relative;

}


.links a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 1px;

    background: var(--gold);

    transition: 0.3s;

}


.links a:hover::after {

    width: 100%;

}



/* ================= HOME ================= */

.home {

    min-height: 100vh;

    position: relative;

    display: flex;

    align-items: center;

    padding: 120px 8% 80px;

    color: white;

    overflow: hidden;


    /*
       Uses one of your local project images.
       This avoids depending on an external image.
    */

    background:

        linear-gradient(
            90deg,
            rgba(6, 22, 32, 0.94),
            rgba(6, 22, 32, 0.65),
            rgba(6, 22, 32, 0.35)
        ),

        url("images/project5.png")

        center / cover no-repeat;

}


.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(11, 29, 42, 0.25),
            transparent
        );

}


.hero-content {

    position: relative;

    max-width: 780px;

    z-index: 2;

}


.eyebrow {

    margin: 0 0 18px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

    color: var(--gold-light);

}


.eyebrow.dark {

    color: var(--steel);

}


.home h1 {

    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(
        60px,
        8vw,
        110px
    );

    line-height: 0.9;

    font-weight: 600;

    letter-spacing: -2px;

}


.home h1 span {

    color: var(--gold-light);

}


.hero-text {

    max-width: 620px;

    margin: 28px 0 35px;

    font-size: 17px;

    line-height: 1.8;

    color: #e1e8eb;

}


.hero-buttons {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

}


.button {

    display: inline-block;

    padding: 15px 26px;

    text-decoration: none;

    text-transform: uppercase;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    transition: 0.3s;

}


.gold-button {

    background: var(--gold);

    color: var(--navy);

}


.gold-button:hover {

    background: var(--gold-light);

    transform: translateY(-2px);

}


.outline-button {

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

    color: white;

}


.outline-button:hover {

    border-color: var(--gold);

    color: var(--gold-light);

}


.scroll-note {

    position: absolute;

    bottom: 35px;

    right: 8%;

    font-size: 9px;

    letter-spacing: 2px;

    color: #c8d0d4;

}



/* ================= GENERAL SECTIONS ================= */

.intro-section,
.about,
.projects {

    padding: 120px 8%;

}


.intro-section {

    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap: 70px;

    align-items: center;

    background: var(--cream);

}


.intro-text h2,
.about h2,
.section-heading h2,
.contact-heading h1 {

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    color: var(--navy);

    font-weight: 600;

}


.intro-text h2 {

    font-size:
        clamp(
            45px,
            5vw,
            70px
        );

    line-height: 0.95;

    margin: 0 0 25px;

}


.intro-text > p:last-child {

    color: var(--muted);

    line-height: 1.9;

    max-width: 580px;

}


.intro-image {

    position: relative;

}


.intro-image::after {

    content: "";

    position: absolute;

    inset:
        18px
        -18px
        -18px
        18px;

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

    z-index: 0;

}


.intro-image img {

    position: relative;

    z-index: 1;

    height: 480px;

    object-fit: cover;

}



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

.about {

    display: grid;

    grid-template-columns:
        1.1fr 0.9fr;

    gap: 90px;

    align-items: center;

}


.about-image {

    position: relative;

}


.about-image img {

    height: 560px;

    object-fit: cover;


    pacity: 1;
        transform: translateY(0);
	transition: 1s ease;
}


.about-image img.show {

    opacity: 1;

    transform: translateY(0);

}


.image-label {

    position: absolute;

    right: -25px;

    bottom: 30px;

    background: var(--gold);

    color: var(--navy);

    padding: 12px 18px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

}


.about h2 {

    font-size:
        clamp(
            45px,
            5vw,
            68px
        );

    line-height: 0.95;

    margin: 0 0 30px;

}


.about-content > p:not(.eyebrow) {

    color: var(--muted);

    line-height: 1.9;

    font-size: 15px;

}


.text-link {

    display: inline-block;

    margin-top: 15px;

    color: var(--navy);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    text-decoration: none;

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

    padding-bottom: 6px;

}



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

.services {

    padding: 120px 8%;

    background: var(--navy);

    color: white;

    text-align: center;

}


.section-heading {

    max-width: 700px;

    margin: 0 auto;

    text-align: center;

}


.section-heading h2 {

    color: white;

    font-size:
        clamp(
            48px,
            5vw,
            70px
        );

    margin: 0;

    line-height: 0.95;

}


.section-heading > p:last-child {

    color: #aebcc4;

    line-height: 1.7;

    margin-top: 20px;

}


.boxes {

    max-width: 1200px;

    margin: 60px auto 0;

    display: grid;

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

    gap: 1px;

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

}


.box {

    background: var(--navy-2);

    padding: 38px 28px;

    text-align: left;

    min-height: 250px;

    transition: 0.3s;

}


.box:hover {

    background: #173a51;

    transform: translateY(-6px);

}


.number {

    display: block;

    color: var(--gold-light);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 35px;

}


.box h3 {

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 29px;

    line-height: 1;

    margin: 0 0 18px;

}


.box p {

    color: #afbec6;

    line-height: 1.7;

    font-size: 13px;

}


.more-button {

    display: inline-block;

    margin-top: 50px;

    padding: 15px 30px;

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

    color: var(--gold-light);

    text-decoration: none;

    text-transform: uppercase;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    transition: 0.3s;

}


.more-button:hover {

    background: var(--gold);

    color: var(--navy);

}



/* ================= PROJECTS ================= */

.projects {

    background: var(--cream);

}


.dark-heading h2 {

    color: var(--navy);

}


.dark-heading > p:last-child {

    color: var(--muted);

}


.project-grid {

    max-width: 1200px;

    margin: 60px auto 0;

    display: grid;

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

    grid-template-rows:
        300px 300px;

    gap: 16px;

}


.project-card {

    position: relative;

    overflow: hidden;

    background: #ddd;

}


.project-card.large {

    grid-row: span 2;

}


.project-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 0.7s;

}


.project-card:hover img {

    transform: scale(1.06);

}


.project-caption {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    padding: 25px;

    color: white;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,0.82)
        );

}


.project-caption span {

    font-size: 9px;

    letter-spacing: 2px;

    color: var(--gold-light);

}


.project-caption h3 {

    margin: 6px 0 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 26px;

}



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

.cta {

    padding: 70px 8%;

    background: white;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

}


.cta h2 {

    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 55px;

    color: var(--navy);

}


.small-cta {

    margin-top: 20px;

}



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

.page-hero {

    padding:
        180px
        8%
        100px;

    background: var(--navy);

    color: white;

}


.page-hero h1 {

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            65px,
            9vw,
            110px
        );

    line-height: 0.85;

    margin: 0 0 20px;

}


.page-hero p:last-child {

    color: #b9c6cd;

    max-width: 650px;

    line-height: 1.7;

}


.all-services {

    padding: 100px 8%;

    max-width: 1200px;

    margin: auto;

}


.service {

    display: grid;

    grid-template-columns: 70px 1fr;

    gap: 30px;

    padding: 40px 0;

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

}


.service > span {

    color: var(--gold);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    padding-top: 10px;

}


.service h2 {

    margin: 0 0 10px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    color: var(--navy);

    font-size: 38px;

}


.service p {

    margin: 0;

    color: var(--muted);

    line-height: 1.8;

    max-width: 750px;

}



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

.contact-page {

    padding:
        160px
        8%
        110px;

    background: var(--cream);

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

}


.contact-heading {

    max-width: 800px;

}


.contact-heading h1 {

    font-size:
        clamp(
            55px,
            7vw,
            90px
        );

    line-height: 0.9;

    margin: 0 0 25px;

}


.contact-heading > p:last-child {

    color: var(--muted);

    max-width: 650px;

    line-height: 1.8;

}


.contact-layout {

    max-width: 1000px;

    margin: 70px auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 20px;

}


.contact-card {

    background: white;

    padding: 45px;

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

    box-shadow:
        0 15px 45px
        rgba(11, 29, 42, 0.08);

}


.contact-icon {

    width: 45px;

    height: 45px;

    display: grid;

    place-items: center;

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

    color: var(--gold);

    font-size: 10px;

    font-weight: 700;

    margin-bottom: 35px;

}


.contact-label {

    margin: 0 0 8px;

    font-size: 10px;

    letter-spacing: 2px;

    font-weight: 700;

    color: var(--steel);

}


.contact-card h2 {

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 36px;

    color: var(--navy);

    margin: 0 0 15px;

}


.contact-card a {

    color: var(--steel);

    text-decoration: none;

    font-size: 15px;

}


.contact-card a:hover {

    color: var(--gold);

}


.contact-image {

    max-width: 1000px;

    margin: auto;

    position: relative;

    overflow: hidden;

}


.contact-image img {

    height: 430px;

    object-fit: cover;

}


.contact-image > div {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    padding: 50px;

    color: white;

    background:
        linear-gradient(
            transparent,
            rgba(11,29,42,0.95)
        );

}


.contact-image h2 {

    margin: 0;

    max-width: 600px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 45px;

}



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

footer {

    background: #071721;

    color: white;

    padding:
        55px
        8%
        25px;

}


.footer-main {

    display: flex;

    justify-content: space-between;

    gap: 40px;

    padding-bottom: 40px;

}


.footer-logo {

    font-size: 17px;

    font-weight: 700;

    letter-spacing: 3px;

}


.footer-main p {

    color: #91a0a8;

    font-size: 12px;

}


.footer-contact {

    display: flex;

    flex-direction: column;

    gap: 12px;

    text-align: right;

}


.footer-contact a {

    color: #d4dde1;

    text-decoration: none;

    font-size: 12px;

}


.footer-contact a:hover {

    color: var(--gold-light);

}


.footer-bottom {

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

    padding-top: 20px;

}


.footer-bottom p {

    margin: 0;

    font-size: 10px;

    color: #71818a;

}



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

section {

    opacity: 1;

    transform: translateY(20px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;

}


.home,
.page-hero,
.contact-page {

    opacity: 1;

    transform: none;

}


section.visible {

    opacity: 1;

    transform: translateY(0);

}



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

@media (max-width: 900px) {


    nav {

        height: auto;

        min-height: 75px;

        padding:
            14px 5%;

        align-items: flex-start;

    }


    .links {

        gap: 13px;

        flex-wrap: wrap;

        justify-content: flex-end;

    }


    .links a {

        font-size: 9px;

    }


    .intro-section,
    .about {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .boxes {

        grid-template-columns:
            1fr 1fr;

    }


    .project-grid {

        grid-template-columns:
            1fr 1fr;

        grid-template-rows:
            300px
            300px
            300px;

    }


    .project-card.large {

        grid-row: span 1;

        grid-column: span 2;

    }


    .contact-layout {

        grid-template-columns: 1fr;

    }

}



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

@media (max-width: 600px) {


    nav {

        position: relative;

    }


    .logo-text {

        font-size: 11px;

    }


    .logo-mark {

        width: 36px;

        height: 36px;

    }


    .links {

        gap: 9px;

        max-width: 210px;

    }


    .links a {

        font-size: 8px;

    }


    .home {

        min-height: 90vh;

        padding:
            70px
            7%
            50px;

    }


    .home h1 {

        font-size: 62px;

    }


    .hero-text {

        font-size: 14px;

    }


    .intro-section,
    .about,
    .projects,
    .services {

        padding:
            80px
            7%;

    }


    .intro-image img,
    .about-image img {

        height: 360px;

    }


    .boxes {

        grid-template-columns: 1fr;

    }


    .project-grid {

        grid-template-columns: 1fr;

        grid-template-rows:
            repeat(4, 300px);

    }


    .project-card.large {

        grid-column: auto;

    }


    .cta,
    .footer-main {

        flex-direction: column;

        align-items: flex-start;

    }


    .footer-contact {

        text-align: left;

    }


    .service {

        grid-template-columns:
            45px 1fr;

        gap: 15px;

    }


    .service h2 {

        font-size: 30px;

    }


    .contact-page {

        padding:
            100px
            7%
            80px;

    }


    .contact-card {

        padding: 30px;

    }


    .contact-image img {

        height: 350px;

    }


    .contact-image > div {

        padding: 30px;

    }


    .contact-image h2 {

        font-size: 35px;

    }

}