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

body{
    background:#F8F4EB;
    color:#5A7247;
    font-family:'Merriweather',serif;
    font-size:1rem;
    line-height:1.75;
    overflow-x:hidden;
}

h1,h2,h3{
    font-family:'Work Sans',sans-serif;
    color:#1B3A2D;
    text-transform:uppercase;
    letter-spacing:0.05em;
    font-weight:800;
}

.gold{color:#B8860B}

/* HERO */
.hero{
    display:flex;
    min-height:100vh;
}
.hero-left{
    width:50vw;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#1B3A2D;
    padding:2rem;
}
.hero-right{
    width:50vw;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:3rem;
}
.hero-text{max-width:480px}
.hero-text h2{
    font-size:clamp(1.8rem,3vw,2.8rem);
    margin-bottom:1.5rem;
    color:#1B3A2D;
}
.hero-text p{
    font-size:1.05rem;
    color:#5A7247;
}

/* ORNAMENTAL FRAME */
.ornamental-frame{
    position:relative;
    border:2px solid #B8860B;
    padding:3rem 2rem;
    text-align:center;
    max-width:420px;
    width:100%;
}
.frame-corner{
    position:absolute;
    width:24px;
    height:24px;
    border-color:#B8860B;
    border-style:solid;
}
.frame-corner-tl{top:-4px;left:-4px;border-width:4px 0 0 4px}
.frame-corner-tr{top:-4px;right:-4px;border-width:4px 4px 0 0}
.frame-corner-bl{bottom:-4px;left:-4px;border-width:0 0 4px 4px}
.frame-corner-br{bottom:-4px;right:-4px;border-width:0 4px 4px 0}

.studio-name{
    font-size:clamp(2.5rem,5vw,4.5rem);
    color:#F8F4EB;
    margin-bottom:0.5rem;
}
.studio-tagline{
    font-family:'Merriweather',serif;
    color:#B8860B;
    font-size:1.1rem;
    font-style:italic;
}

/* BOTANICAL DIVIDER */
.botanical-divider{
    display:flex;
    justify-content:center;
    padding:2rem 0;
}
.ivy-divider{
    width:min(400px,80vw);
    height:40px;
}

/* SECTION TITLE */
.section-title{
    text-align:center;
    font-size:clamp(2rem,4vw,3.2rem);
    margin-bottom:2.5rem;
}

/* SERVICES */
.services{
    padding:4rem 2rem;
    max-width:1100px;
    margin:0 auto;
}
.services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:2rem;
}
.service-card{
    background:#fff;
    border:1px solid #B8860B;
    padding:2.5rem 2rem;
    position:relative;
}
.card-ornament{
    position:absolute;
    top:-1px;left:-1px;right:-1px;
    height:4px;
    background:linear-gradient(90deg,#B8860B,#2E6B4F,#B8860B);
}
.service-card h3{
    font-size:1.3rem;
    margin-bottom:1rem;
    color:#1B3A2D;
}
.service-card p{
    color:#5A7247;
    font-size:0.95rem;
}

/* CASE STUDIES */
.case-studies{
    padding:4rem 2rem;
    max-width:1100px;
    margin:0 auto;
}
.split-case{
    display:flex;
    gap:3rem;
    margin-bottom:3rem;
    align-items:center;
}
.split-case.reverse{flex-direction:row-reverse}
.case-visual{flex:0 0 40%}
.case-frame{
    padding:2.5rem;
    background:rgba(27,58,45,0.04);
}
.case-icon{
    display:flex;
    justify-content:center;
    margin-bottom:1rem;
}
.case-label{
    font-family:'Work Sans',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.1em;
    font-size:0.85rem;
    color:#B8860B;
    font-weight:700;
}
.case-analysis{flex:1}
.case-analysis h3{
    font-size:1.5rem;
    margin-bottom:1rem;
}
.case-analysis p{
    margin-bottom:0.75rem;
    color:#5A7247;
}
.case-date{
    font-family:'Work Sans',sans-serif;
    font-size:0.8rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:#2E6B4F;
    font-weight:700;
}

/* FOOTER */
.footer{
    background:#1B3A2D;
    border-top:4px solid #4E2A1B;
    padding:3rem 2rem;
    text-align:center;
}
.footer-frame{
    max-width:600px;
    margin:0 auto;
}
.footer-name{
    font-family:'Work Sans',sans-serif;
    font-size:1.8rem;
    font-weight:800;
    color:#F8F4EB;
    text-transform:uppercase;
    letter-spacing:0.05em;
    margin-bottom:0.5rem;
}
.footer-desc{
    color:#5A7247;
    font-style:italic;
    margin-bottom:1.5rem;
}
.footer-ornament{
    display:flex;
    justify-content:center;
    gap:1rem;
}
.ornament-char{
    color:#B8860B;
    font-size:1.2rem;
}

/* BOUNCE-IN ANIMATION */
.bounce-in{
    opacity:0;
    transform:translateY(40px);
    transition:opacity 0.6s ease,transform 0.8s cubic-bezier(0.34,1.56,0.64,1);
}
.bounce-in.visible{
    opacity:1;
    transform:translateY(0);
}

/* MOBILE */
@media(max-width:768px){
    .hero{flex-direction:column}
    .hero-left,.hero-right{width:100%;min-height:50vh}
    .split-case,.split-case.reverse{flex-direction:column}
    .case-visual{flex:none;width:100%}
}