* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {

    background:#0b0b0b;

    color:#e8dfcf;

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

    line-height:1.7;

}



:root {

    --gold:#c6a15b;

    --gold-light:#e4c98b;

    --text-soft:#cfc5b5;

}





/* ================= TYPOGRAPHY ================= */



h1,
h2,
h3 {

    font-family:"Cormorant Garamond", serif;

    font-weight:400;

    letter-spacing:.04em;

}



h1 {

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

    line-height:1.15;

    font-weight:300;

}



h2 {

    font-size:clamp(2.2rem,3.5vw,3.2rem);

    line-height:1.25;

    margin-bottom:35px;

}



h3 {

    font-size:1.6rem;

}



p {

    color:var(--text-soft);

    font-size:1rem;

}





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



#navbar {

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100vh;

    z-index:1000;

    pointer-events:none;

}



.nav-logo {

    position:absolute;

    top:45px;

    left:60px;

    opacity:1;

    transition:opacity 1.2s ease;

    pointer-events:auto;

}



.nav-logo.hidden {

    opacity:0;

}



.nav-logo img {

    width:190px;

    display:block;

}



.menu {

    position:absolute;

    right:60px;

    top:50%;

    transform:translateY(-50%);

    display:flex;

    flex-direction:column;

    gap:28px;

    text-align:right;

    opacity:0;

    transition:opacity .7s ease;

    pointer-events:auto;

}



.menu.visible {

    opacity:1;

}



.menu a {

    color:#d8cdb9;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:.25em;

    font-size:.85rem;

    transition:.3s;

}



.menu a:hover {

    color:var(--gold);

}





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



.hero {

    height:100vh;

    min-height:750px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    position:relative;

    overflow:hidden;



    background-image:


    linear-gradient(

        rgba(0,0,0,.45),

        rgba(0,0,0,.85)

    ),


    url("../images/backgrounds/hero.jpg");



    background-size:cover;

    background-position:center;

}



.hero-overlay {

    position:absolute;

    inset:0;

}



.hero-content {

    position:relative;

    z-index:2;

    max-width:900px;

    padding:40px;

}



.hero-subtitle {

    max-width:680px;

    margin:35px auto;

    color:#d6cbb7;

    font-size:1.1rem;

}



.hero-button {

    display:inline-block;

    padding:15px 40px;

    margin-top:20px;

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

    color:var(--gold-light);

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:.15em;

    font-size:.85rem;

    transition:.3s;

}



.hero-button:hover {

    background:rgba(198,161,91,.12);

}



.hero-services {

    margin-top:35px;

    color:#aaa;

    font-size:.85rem;

    letter-spacing:.18em;

}



.scroll-indicator {

    margin-top:55px;

    color:var(--gold);

}





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



.section {

    padding:120px 10%;

}



.dark-section {

    background:#111;

}



.container {

    max-width:1200px;

    margin:auto;

}



.section-label {

    display:block;

    color:var(--gold);

    font-size:.8rem;

    letter-spacing:.3em;

    margin-bottom:35px;

}





/* ================= IMAGE TEXT ================= */



.image-text-layout {

    display:grid;

    grid-template-columns:380px 1fr;

    gap:70px;

    align-items:start;

}



.section-image {

    display:flex;

    justify-content:center;

}



.section-image img {

    width:100%;

    height:auto;

    display:block;

    object-fit:cover;

}



#method .section-image {

    height:520px;

    overflow:hidden;

}



#method .section-image img {

    width:100%;

    height:100%;

    object-fit:cover;

}



.section-content {

    padding-top:0;

}



.studio-image img {

    max-width:380px;

}





/* ================= METHOD ================= */



.method-grid {

    margin-top:45px;

    display:grid;

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

    gap:20px;

}



.method-grid div {

    border-top:1px solid rgba(198,161,91,.35);

    padding-top:18px;

}



.method-grid h3 {

    color:var(--gold);

    margin-bottom:8px;

}



.method-grid p {

    font-size:.9rem;

}





/* ================= STUDIO LINKS ================= */



.studio-link {

    color:var(--gold-light);

    text-decoration:none;

    border-bottom:1px solid rgba(198,161,91,.4);

    transition:.3s;

}



.studio-link:hover {

    color:var(--gold);

    border-color:var(--gold);

}





/* ================= ARTIST JOURNEY ================= */



.journey-section {

    background:#0b0b0b;

}



.journey-description {

    max-width:750px;

    margin-bottom:55px;

}





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



.service-grid {

    margin-top:60px;

    display:grid;

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

    gap:30px;

}



.service-card {

    position:relative;

    min-height:420px;

    overflow:hidden;

    border:1px solid rgba(198,161,91,.25);

    display:flex;

    align-items:flex-end;

    background:#111;

    transition:.6s ease;

}



.service-background {

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    transform:scale(1);

    transition:transform .8s ease;

}



.service-overlay {

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        to top,

        rgba(0,0,0,.95),

        rgba(0,0,0,.45),

        rgba(0,0,0,.25)

    );

}



.service-content {

    position:relative;

    z-index:2;

    padding:35px;

}



.service-icon {

    width:55px;

    height:55px;

    margin-bottom:25px;

    color:var(--gold);

    transition:.4s ease;

}



.service-icon svg {

    width:100%;

    height:100%;

    fill:none;

    stroke:currentColor;

    stroke-width:1.6;

    stroke-linecap:round;

    stroke-linejoin:round;

}



.service-card h3 {

    color:#e8dfcf;

    font-size:2rem;

    line-height:1.2;

    margin-bottom:18px;

}



.service-card p {

    color:#d1c7b7;

    font-size:.95rem;

    line-height:1.7;

}



.service-card:hover {

    border-color:var(--gold);

    transform:translateY(-8px);

}



.service-card:hover .service-background {

    transform:scale(1.08);

}



.service-card:hover .service-icon {

    transform:translateY(-6px);

    color:var(--gold-light);

}





/* ================= SERVICE IMAGES ================= */



.service-song .service-background {

    background-image:url("../images/services/song-development.jpeg");

}



.service-arrangement .service-background {

    background-image:url("../images/services/arrangement.jpeg");

}



.service-recording .service-background {

    background-image:url("../images/services/recording.jpeg");

}



.service-production .service-background {

    background-image:url("../images/services/production.jpeg");

}



.service-mixing .service-background {

    background-image:url("../images/services/mixing-mastering.jpeg");

}



.service-release .service-background {

    background-image:url("../images/services/release.jpeg");

}





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



.projects-grid {

    margin-top:55px;

    display:grid;

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

    gap:55px 40px;

}





.project-card {

    overflow:hidden;

}





/* ================= PROJECT IMAGE ================= */



.project-image-link {

    position:relative;

    display:block;

    width:100%;

    aspect-ratio:1/1;

    overflow:hidden;

    text-decoration:none;

    background:#111;

}





.project-image-link img {

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    margin:0;

    transition:

        transform .8s ease,

        filter .6s ease;

}





/* ================= PROJECT HOVER OVERLAY ================= */



.project-image-overlay {

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,.38);

    opacity:0;

    transition:

        opacity .5s ease,

        background .5s ease;

}





.project-view {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

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

    color:var(--gold-light);

    background:rgba(11,11,11,.55);

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:.72rem;

    transform:translateY(12px);

    opacity:0;

    transition:

        opacity .45s ease,

        transform .45s ease,

        background .3s ease;

}





/* ================= PROJECT HOVER ================= */



.project-image-link:hover img {

    transform:scale(1.06);

    filter:brightness(.62) blur(.7px);

}





.project-image-link:hover .project-image-overlay {

    opacity:1;

    background:rgba(0,0,0,.34);

}





.project-image-link:hover .project-view {

    opacity:1;

    transform:translateY(0);

}





.project-view:hover {

    background:rgba(198,161,91,.12);

}





/* ================= PROJECT TEXT ================= */



.project-card h3 {

    margin-top:25px;

    margin-bottom:12px;

}





.project-card p {

    margin:0;

}





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



.contact-section {

    min-height:850px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    position:relative;



    background-image:



    linear-gradient(

        to bottom,

        #111 0%,

        rgba(17,17,17,.78) 15%,

        rgba(0,0,0,.82) 55%,

        rgba(0,0,0,.95) 100%

    ),



    url("../images/contact/contact.jpeg");



    background-size:cover;

    background-position:center;

}



.contact-content {

    position:relative;

    z-index:2;

    width:min(850px,90%);

}



.contact-content h2 {

    margin-bottom:20px;

}



.contact-content > p {

    margin-bottom:45px;

}



.contact-form {

    display:flex;

    flex-direction:column;

    gap:25px;

    padding:45px;

    background:rgba(15,15,15,.65);

    border:1px solid rgba(198,161,91,.25);

    backdrop-filter:blur(10px);

}



.form-row {

    display:grid;

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

    gap:25px;

}



.contact-form input,

.contact-form textarea {

    width:100%;

    padding:18px 20px;

    background:rgba(0,0,0,.45);

    border:1px solid rgba(198,161,91,.25);

    color:#e8dfcf;

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

    font-size:.95rem;

    outline:none;

    transition:.3s;

}



.contact-form textarea {

    resize:none;

}



.contact-form input::placeholder,

.contact-form textarea::placeholder {

    color:#918778;

}



.contact-form input:focus,

.contact-form textarea:focus {

    border-color:var(--gold);

}



.contact-form .hero-button {

    cursor:pointer;

    background:transparent;

    align-self:center;

}





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



footer {

    padding:45px 40px;

    background:#000;

    text-align:center;

    color:#777;

    font-size:.9rem;

}



footer p {

    margin-bottom:12px;

}



footer a {

    color:var(--gold-light);

    text-decoration:none;

    letter-spacing:.12em;

    font-size:.85rem;

    transition:.3s;

}



footer a:hover {

    color:var(--gold);

}





/* ================= THANK YOU PAGE ================= */



.thank-you-body {

    margin:0;

    padding:0;

    min-height:100vh;

    background:#0b0b0b;

    color:#e8dfcf;

}



.thank-you-container {

    min-height:100vh;

    width:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px;

    box-sizing:border-box;

}



.thank-you-logo {

    display:block;

    width:140px;

    height:auto;

    margin:0 auto 35px auto;

}



.thank-you-container h1 {

    margin:0 0 20px 0;

    padding:0;

    font-family:"Cormorant Garamond", serif;

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

    font-weight:500;

    line-height:1.1;

    color:var(--gold-light);

}



.thank-you-container p {

    width:100%;

    max-width:550px;

    margin:0 auto 35px auto;

    padding:0;

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

    font-size:1.1rem;

    font-weight:400;

    line-height:1.8;

    text-align:center;

    color:var(--text-soft);

}



.thank-you-container .hero-button {

    display:inline-block;

    margin:0 auto;

}





/* ================= RESPONSIVE ================= */



@media(max-width:1200px){


    .service-grid {

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

    }


}





@media(max-width:900px){



    .image-text-layout {

        grid-template-columns:1fr;

        gap:45px;

    }



    .nav-logo {

        left:30px;

    }



    .menu {

        right:30px;

    }



    .projects-grid {

        grid-template-columns:1fr;

    }



    .method-grid {

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

    }



    .service-grid {

        grid-template-columns:1fr;

    }



    .form-row {

        grid-template-columns:1fr;

    }



}





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



@media(max-width:600px){



    .hero {

        min-height:100svh;

        height:100svh;

        background-position:center;

    }



    .nav-logo {

        top:15px;

        left:15px;

    }



    .nav-logo img {

        width:75px;

        height:auto;

        content:url("../images/logo/centaur-logo-2-transparent.png");

    }



    .menu {

        right:15px;

        gap:18px;

    }



    .menu a {

        font-size:.7rem;

        letter-spacing:.18em;

    }



    .hero-content {

        width:100%;

        max-width:100%;

        padding:100px 24px 45px 24px;

    }



    h1 {

        font-size:2.5rem;

        line-height:1.12;

    }



    .hero-subtitle {

        max-width:100%;

        margin:28px auto;

        font-size:.95rem;

        line-height:1.65;

    }



    .hero-button {

        padding:14px 26px;

        font-size:.75rem;

    }



    .hero-services {

        margin-top:28px;

        font-size:.7rem;

        line-height:1.8;

        letter-spacing:.12em;

    }



    .scroll-indicator {

        margin-top:35px;

    }



    .section {

        padding:75px 7%;

    }



    h2 {

        font-size:2.2rem;

        line-height:1.2;

        margin-bottom:25px;

    }



    .section-label {

        font-size:.7rem;

        letter-spacing:.22em;

        margin-bottom:25px;

    }



    .image-text-layout {

        gap:35px;

    }



    #method .section-image {

        height:360px;

    }



    .studio-image img {

        max-width:100%;

    }



    .method-grid {

        grid-template-columns:1fr;

        gap:25px;

        margin-top:35px;

    }



    .service-grid {

        margin-top:40px;

        gap:22px;

    }



    .service-card {

        min-height:390px;

    }



    .service-content {

        padding:26px;

    }



    .service-icon {

        width:48px;

        height:48px;

        margin-bottom:20px;

    }



    .service-card h3 {

        font-size:1.7rem;

        line-height:1.15;

        margin-bottom:14px;

    }



    .service-card p {

        font-size:.9rem;

        line-height:1.6;

    }





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



    .projects-grid {

        margin-top:40px;

        gap:45px;

    }



    .project-card h3 {

        margin-top:20px;

        margin-bottom:10px;

    }



    .project-card p {

        margin:0;

    }



    .project-image-overlay {

        opacity:1;

        background:linear-gradient(

            to top,

            rgba(0,0,0,.45),

            rgba(0,0,0,.05)

        );

        align-items:flex-end;

        justify-content:flex-end;

        padding:18px;

    }



    .project-view {

        opacity:1;

        transform:none;

        padding:10px 16px;

        font-size:.62rem;

    }



    .project-image-link img {

        transition:

            transform .8s ease,

            filter .6s ease;

    }



    .project-image-link:active img {

        transform:scale(1.03);

        filter:brightness(.7);

    }



    .project-image-link:active .project-view {

        background:rgba(198,161,91,.12);

    }





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



    .contact-section {

        min-height:700px;

        padding:75px 0;

    }



    .contact-content {

        width:86%;

    }



    .contact-content > p {

        margin-bottom:30px;

    }



    .contact-form {

        padding:25px 20px;

        gap:20px;

    }



    .contact-form input,

    .contact-form textarea {

        padding:16px;

        font-size:.9rem;

    }



    footer {

        padding:35px 20px;

    }



}




/* ================= THANK YOU MOBILE ================= */



@media(max-width:600px){



    .thank-you-container {

        padding:30px 20px;

    }



    .thank-you-logo {

        width:110px;

        margin-bottom:28px;

    }



    .thank-you-container h1 {

        font-size:3rem;

    }



    .thank-you-container p {

        font-size:1rem;

        line-height:1.7;

    }



}