/*==================================================
  ELSCII DESIGN SYSTEM
==================================================*/

:root{

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

    --bg-primary:#FAF8F3;
    
    /* New About Scene */
    --bg-secondary:#F5F1EA;

    --surface:#FFFFFF;
    --surface-glass:rgba(255,255,255,.55);

    --text-primary:#2F2B28;
    --text-secondary:#6E665E;

    --sage:#7C9A78;
    --sage-light:#A8C5A2;

    --coffee:#8C6B52;
    --coffee-dark:#5F4635;

    --sunlight:#F5E7B2;

    --sky:#DDEFFC;

    --border:#E6DED3;

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

    --font-heading:'Outfit',sans-serif;
    --font-body:'Manrope',sans-serif;
    --font-accent:'Cormorant Garamond',serif;

    --h1:clamp(3rem,5vw,5rem);
    --h2:clamp(2rem,3vw,3rem);
    --h3:1.35rem;

    --body:1rem;

    --small:.92rem;

    /*========== SPACING ==========*/

    --space-xs:.5rem;
    --space-sm:1rem;
    --space-md:2rem;
    --space-lg:4rem;
    --space-xl:7rem;

    /*========== RADIUS ==========*/

    --radius-sm:14px;
    --radius-md:22px;
    --radius-lg:32px;
    --radius-pill:999px;

    /*========== SHADOWS ==========*/

    --shadow-soft:
        0 12px 40px rgba(0,0,0,.08);

    --shadow-hover:
        0 20px 50px rgba(0,0,0,.12);

    --shadow-glow:
        0 0 40px rgba(245,231,178,.35);

    /*========== TRANSITIONS ==========*/

    --transition:.35s ease;
    
    /*========== UI KIT ==========*/
    --paper:#FFFBF6;
    
    
    /*==================================================
    ANIMATIONS
    ==================================================*/
    --ease: cubic-bezier(.22,.61,.36,1);

    --speed-fast:.25s;

    --speed-normal:.45s;

    --speed-slow:.8s;

}

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

body{
    font-family:var(--font-body);
    color:var(--text-primary);
    background:var(--bg-primary);
    line-height:1.75;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
    font-family:var(--font-heading);
    color:var(--text-primary);
    line-height:1.15;
    font-weight:700;
}

p{
    color:var(--text-secondary);
}

.accent-text{
    font-family:var(--font-accent);
    font-style:italic;
}


.container{
    width:min(1180px,92%);
    margin:auto;
}

section{
    padding:
        var(--space-xl)
        0;
}

.card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-soft);
    transition:var(--transition);
}

.card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-hover);
}

/*==================================
BUTTONS
==================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.8rem;

    padding:16px 30px;

    border-radius:999px;

    font-weight:600;

    text-decoration:none;

    
    transition:

        transform var(--speed-normal) var(--ease),

        box-shadow var(--speed-normal) var(--ease),

        background var(--speed-normal) var(--ease),

        color var(--speed-normal) var(--ease);
        

    cursor:pointer;

}

.btn:hover span{

    transform:

        translateX(6px);

}

.btn-primary{

    background:#FFFFFF;

    color:var(--text-primary);

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

    box-shadow:

        0 12px 28px rgba(0,0,0,.08);

}
.btn-primary:hover{
    transform:

        translateY(-4px);

}
.btn-secondary{

    color:var(--text-secondary);

    background:transparent;

}

.btn-secondary:hover{

    color:var(--sage);

}

.btn span{

    transition:

        transform var(--speed-normal) var(--ease);

}


.fade-up{

    opacity:0;

    transform:

        translateY(40px);

    transition:

        all .9s var(--ease);

}

.fade-up.show{

    opacity:1;

    transform:

        translateY(0);

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

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    padding:24px 0;

    pointer-events:none;

}

.navbar-shell{

    width:min(1180px,92%);

    margin:auto;

    pointer-events:auto;

}

.nav-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 34px;

    border-radius:999px;

    background: linear-gradient(90deg, rgba(255,248,243,.78),rgba(255,255,255,.58));

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.6);

    box-shadow:

        0 15px 40px rgba(0,0,0,.08);

}

.nav-logo{

    text-decoration:none;

    font-family:var(--font-heading);

    font-size:1.4rem;

    font-weight:800;

    color:var(--text-primary);

    letter-spacing:.8px;

}

.nav-links{

    display:flex;

    gap:2rem;

    list-style:none;

}

.nav-links a{

    text-decoration:none;

    color:var(--text-secondary);

    font-weight:600;

    transition:var(--transition);

    position:relative;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    border-radius:99px;

    background:var(--sage);

    transition:

        width var(--speed-normal) var(--ease);

}

.nav-links a:hover{

    color:var(--sage);

}

.nav-links a:hover::after{

    width:100%;

}




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

#hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:120px;

    background:
        linear-gradient(
            180deg,
            #FFFDF9 0%,
            #FAF8F3 45%,
            #F4EFE8 100%
        );

}
.hero-grid{

    display:grid;

    grid-template-columns:58% 42%;

    align-items:center;

    gap:4rem;

}
.hero-content{

    max-width:620px;

}

.hero-greeting{

    display:inline-flex;

    align-items:center;

    gap:.6rem;

    margin-bottom:1.4rem;

    padding:.6rem 1rem;

    border-radius:999px;

    background:#FFF8EC;

    color:var(--coffee);

    font-weight:600;

}
.hero-content h1{

    font-size:clamp(3.5rem,6vw,5.4rem);

    line-height:1.05;

    margin-bottom:2rem;

}
.hero-description{

    font-size:1.1rem;

    max-width:540px;

    margin-bottom:3rem;

}

.hero-buttons{

    display:flex;

    gap:1rem;

    flex-wrap:wrap;

}

.hero-visual{

    display:flex;

    justify-content:center;

    align-items:center;

}

/*.scene-placeholder{*/
/*    position:relative;*/
/*    width:100%;*/
/*    aspect-ratio:4/5;*/
/*    max-width:520px;*/
/*    border-radius:36px;*/
/*    overflow:hidden;*/
/*    background:*/
/*    linear-gradient(*/
/*        180deg,*/
/*        #FFFDF9,*/
/*        #F7F2EA*/
/*    );*/
/*    box-shadow:*/
/*        0 25px 60px rgba(0,0,0,.08);*/

/*}*/

/*.scene-window{*/
/*    position:absolute;*/
/*    top:8%;*/
/*    left:50%;*/
/*    transform:translateX(-50%);*/
/*    width:70%;*/
/*    height:42%;*/
/*    border-radius:220px 220px 0 0;*/
/*    background:*/
/*    linear-gradient(*/
/*        180deg,*/
/*        #EAF6FF,*/
/*        #FFF8E7*/
/*    );*/

/*}*/

/*.scene-floor{*/
/*    position:absolute;*/
/*    bottom:0;*/
/*    width:100%;*/
/*    height:32%;*/
/*    background:*/
/*        linear-gradient(*/
/*            #D8C3A9,*/
/*            #C8AE90*/
/*        );*/
/*}*/

/*.scene-character-placeholder{*/
/*    position:absolute;*/
/*    bottom:18%;*/
/*    left:58%;*/
/*    transform:translateX(-50%);*/
/*    width:170px;*/
/*    height:280px;*/
/*    border-radius:120px;*/
/*    background:*/
/*        linear-gradient(*/
/*            #EAEAEA,*/
/*            #D9D9D9*/
/*        );*/
/*}*/

/*.scene-placeholder::before{*/
/*    content:"";*/
/*    position:absolute;*/
/*    top:20px;*/
/*    left:20px;*/
/*    width:14px;*/
/*    height:14px;*/
/*    border-radius:50%;*/
/*    background:#EFB8C8;*/
/*}*/

/*.scene-placeholder::after{*/
/*    content:"";*/
/*    position:absolute;*/
/*    bottom:30px;*/
/*    right:30px;*/
/*    width:18px;*/
/*    height:18px;*/
/*    border-radius:50%;*/
/*    background:#A78BC7;*/
/*}*/

/* New Hero Scene */
#hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:120px;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #FFFDF9 0%,
            #FAF8F3 45%,
            #F4EFE8 100%
        );

}

.hero-decorations{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:1;

}
.hero-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:58% 42%;

    align-items:center;

    gap:4rem;

}

.hero-visual{

    display:flex;

    justify-content:center;

    align-items:center;

}
.hero-scene{

    position:relative;

    width:100%;

    max-width:560px;

}



/*.hero-scene{*/

/*    position:relative;*/

/*    width:100%;*/

/*    max-width:560px;*/

/*    border-radius:36px;*/

/*    overflow:visible;*/

/*}*/

/*.hero-scene-image{*/

/*    width:100%;*/

/*    display:block;*/

/*    border-radius:36px;*/

/*    box-shadow:*/
/*        0 30px 70px rgba(0,0,0,.12);*/

/*}*/

.hero-scene-image{

    width:100%;

    display:block;

    border-radius:32px;

    box-shadow:

        0 35px 80px rgba(0,0,0,.15);

}

.scene-decorations{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.scene-steam{

    position:absolute;

    width:45px;

    right: 350px;

    bottom:100px;

    opacity:.75;

}


.scene-vase{
    position:absolute;
    width:90px;
    right:-15px;
    bottom:-20px;
}


.scene-petals{

    position:absolute;

    width:180px;

    left:-40px;

    top:120px;

}


.hero-monstera{

    position:absolute;

    width:180px;

    top:30px;

    left:-50px;

    transform:rotate(-15deg);

}

.hero-sparkles{

    position:absolute;

    width:70px;

    top:120px;

    left:220px;

    opacity:.8;

}


.hero-notebook{

    position:absolute;

    width:140px;

    bottom:80px;

    left:110px;

    transform:rotate(-12deg);

}

.hero-cat{

    position:absolute;

    width:110px;

    bottom:25px;

    left:300px;

}

.hero-flower{

    position:absolute;

    right:-30px;

    bottom:40px;

    width:90px;

}

.hero-steam{

    position:absolute;

    left:95px;

    bottom:150px;

    animation:steam 5s infinite ease-in-out;

}

.hero-petals{

    position:absolute;

    inset:0;

    pointer-events:none;

}

@keyframes steam{

    0%{
        transform:translateY(0) scale(.95);
        opacity:.2;
    }

    50%{
        opacity:.75;
    }

    100%{
        transform:translateY(-25px) scale(1.08);
        opacity:0;
    }

}

.scene-steam{

    animation:steam 4s ease-in-out infinite;

}


@keyframes petals{

    0%{

        transform:
            translate(0,0)
            rotate(0deg);

    }

    50%{

        transform:
            translate(12px,-8px)
            rotate(8deg);

    }

    100%{

        transform:
            translate(0,0)
            rotate(0deg);

    }

}

.scene-petals{

    animation:petals 12s ease-in-out infinite;

}

@keyframes leafSwing{

    0%{

        transform:rotate(-15deg);

    }

    50%{

        transform:rotate(-11deg);

    }

    100%{

        transform:rotate(-15deg);

    }

}

.hero-monstera{

    animation:petals 12s ease-in-out infinite;

}

@keyframes breathe{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-4px);

    }

    100%{

        transform:translateY(0);

    }

}


.hero-scene{

    animation:breathe 8s ease-in-out infinite;

}

@keyframes sparkles{

    0%{

        opacity: 0.4;
    }

    50%{

        opacity: 0.9;


    }

    100%{

        opacity: 0.4;


    }

}

.hero-sparkles{

    animation:sparkles 5s ease-in-out infinite;

}

/*==================================
STORY CARD
==================================*/

.story-card{

    background:var(--paper);

    border-radius:

34px 28px 36px 30px;

    padding:22px;

    display:flex;

    flex-direction:column;

    gap:1.4rem;

    border:1px solid #8F7865;

    box-shadow:

        0 20px 45px rgba(76,58,41,.08),

        0 8px 18px rgba(255,255,255,.9) inset;

    transition:all var(--speed-normal) var(--ease);

    position:relative;

    overflow:visible;

}

.story-card::before{

    content:"";

    position:absolute;

    inset:8px;

    border:1px solid rgba(143,120,101,.18);

    border-radius:28px;

    pointer-events:none;

}


.story-card:nth-child(2) .story-polaroid{

    transform:rotate(1.2deg);

}
.story-card:nth-child(3) .story-polaroid{

    transform:rotate(-0.8deg);

}
.story-card:hover{

    transform:

        translateY(-4px)

        rotate(-.5deg);

}


.story-polaroid{

    position:relative;

    background:white;

    padding:12px;

    border-radius:18px;
    
    border:0.1px solid #b09f91;


    box-shadow:

        0 8px 20px rgba(0,0,0,.08);

    transform:rotate(-2deg);

}




.story-polaroid img{

    width:100%;

    display:block;

    border-radius:12px;

}

.story-tag{

    position:absolute;

    top:16px;

    left:16px;

    background:white;

    padding:6px 12px;

    border-radius:999px;

    font-size:.75rem;

    font-weight:600;

}

.story-content h3{

    margin-bottom:.8rem;

}

.story-content h3::after{

    content:"";

    display:block;

    width:54px;

    height:2px;

    margin-top:10px;

    background:#B89D84;

    border-radius:99px;

}

.story-content p{

    line-height:1.8;

}

.story-footer{

    margin-top:auto;

}

.story-link{

    position:relative;

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    text-decoration:none;

    color:var(--text-primary);

    font-weight:600;

}

.story-link:hover{

    letter-spacing:.6px;
}

.story-link span{

    transition:

        transform var(--speed-normal) var(--ease);

}

.story-link:hover span{

    transform:

        translateX(6px);

}

.story-card::before{

    content:"";

    position:absolute;

    width:14px;

    height:14px;

    border-radius:50%;

    background:#EFB8C8;

    top:18px;

    right:18px;

}
/* Services Section */
#services {
    padding: 100px 20px;
    background: #FFF8F1;
}

#services h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 3rem;

    margin-bottom: 15px;
}

.services-container {
    max-width: 1200px;
    margin: 0 auto;
}

.services-container h2 {
    text-align: center;
    margin-bottom: 15px;
}

.services-subtitle {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.services-grid {
    display: flex;
    gap: 30px;
}

.service-card {
    flex: 1;
    padding: 30px;

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

    border-radius: 20px;

    padding: 30px;

    backdrop-filter: blur(10px);

    box-shadow:
        0 8px 20px rgba(0,0,0,0.05);

    transition: all 0.3s ease;
}

.service-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 15px 30px rgba(0,0,0,0.08);
}

/* New Services Scene */
/*==================================================
  SERVICES
==================================================*/

#services{

    position:relative;

    padding:10rem 0;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #F8F4ED 0%,
            #FFFDF9 100%
        );

}

.services-container{

    position:relative;

    width:min(1200px,90%);

    margin:auto;

}

.section-heading{

    text-align:center;

    max-width:640px;

    margin:0 auto 5rem;

}

.services-subtitle{

    margin-top:1rem;

    color:#7A6B5A;

    line-height:1.8;

}
.services-grid{

    display:grid;

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

    gap:2.5rem;

    align-items:start;

}

.website-card{

    margin-top:20px;

}

.invitation-card{

    margin-top:90px;

}

.system-card{

    margin-top:45px;

}
.story-paper{

    position:relative;

    background:#FFFDFB;

    border-radius:28px;

    padding:18px;

    box-shadow:

        0 20px 45px rgba(0,0,0,.08);

    border:

        1px solid rgba(110,90,70,.15);

    transition:

        .45s;

}

.story-polaroid{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    background:white;

    padding:8px;

    box-shadow:

        0 8px 18px rgba(0,0,0,.08);

}

.story-tag{

    position:absolute;

    top:12px;

    left:12px;

    padding:

        .45rem .9rem;

    border-radius:999px;

    background:white;

    font-size:.75rem;

    font-weight:600;

    box-shadow:

        0 6px 12px rgba(0,0,0,.08);

}
.story-content{

    padding:

        1.5rem .2rem;

}

.story-content h3{

    margin-bottom:

        .8rem;

}

.story-content p{

    line-height:

        1.8;

    color:

        #6B6257;

}
.story-footer{

    padding:

        0 .2rem .2rem;

}
.story-link{

    display:inline-flex;

    gap:.6rem;

    align-items:center;

    font-weight:600;

    color:var(--coffee);

    text-decoration:none;

}
.story-paper:hover{

    transform:

        translateY(-10px);

    box-shadow:

        0 35px 60px rgba(0,0,0,.12);

}
.paperclip{

    width:55px;

    position:absolute;

    top:-18px;

    left:28px;

    transform:rotate(-18deg);

    z-index:10;

}
.tape{

    width:90px;

    position:absolute;

    top:-15px;

    right:30px;

    transform:rotate(8deg);

    opacity:.95;

}
.thumbtack{

    width:55px;

    position:absolute;

    top:-18px;

    left:100px;
    z-index:10;


}

.services-leaf{

    position:absolute;

    width:100px;

    top:-30px;

    left:-60px;

    transform:rotate(-12deg);

}

.services-notebook{

    position:absolute;

    width:150px;

    bottom:-40px;

    left:-40px;

    transform:rotate(-15deg);

}

.services-flower{

    position:absolute;

    width:90px;

    bottom:30px;

    right:-15px;

}
.services-petals{

    position:absolute;

    width:180px;

    top:180px;

    right:-60px;

}




/* About Section */
#about {
    padding: 100px 20px;
    background: #ffffff;
    

}

.about-container {

    max-width: 1100px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    gap: 60px;
}

.about-container h2 {
    margin-bottom: 40px;
}

.about-container p {
    margin-bottom: 20px;
    line-height: 1.8;
}

.about-visual {

    flex: 1;

    font-size: 5rem;

    text-align: center;
}

.about-content {

    flex: 2;
}

.about-content h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 3rem;

    margin-bottom: 30px;
}

.about-content p {

    line-height: 1.9;

    margin-bottom: 20px;
}

/* New About Scene */
.scene-background{

    position:absolute;
    inset:0;
    overflow:hidden;
    

}

.scene-background::after{

    content:"";

    position:absolute;
    inset:0;

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

    z-index:1;

}

.about-background-image{

    width:100%;
    height:100%;

    object-fit:cover;

    filter:

        brightness(.78)

        blur(1px);

}
.scene-character{

    position:relative;

    display:flex;

    align-items:flex-end;

    justify-content:center;
    z-index:5;

}

.about-elena{

    width:420px;
    max-width:100%;
    display:block;
    margin:0 auto 0;
    transform:scale(.85);
    align-self:flex-end;


}

/* Portfolio Section */
#portfolio {
    padding: 100px 20px;
    background: #FFF8F1;
}

.portfolio-container {
    max-width: 1200px;
    margin: 0 auto;
}

.portfolio-container h2 {
    text-align: center;
    margin-bottom: 15px;
}

.portfolio-subtitle {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.portfolio-grid {
    display: flex;
    gap: 30px;
}

.project-card {

    flex: 1;

    padding: 35px;

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

    border-radius: 20px;

    backdrop-filter: blur(10px);

    box-shadow: 0 8px 20px rgba(0,0,0,0.05);

    transition: all 0.3s ease;
}

.project-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

.project-card h3 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 2rem;

    margin-bottom: 15px;
}


/* Contacts Section */
#contact {
    padding: 100px 20px;
    background: #ffffff;
}

.contact-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.contact-container h2 {
    margin-bottom: 20px;
}

.contact-subtitle {
    margin-bottom: 25px;
}

.contact-text {
    margin-bottom: 40px;
}

.contact-card {

    padding: 40px;

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

    border-radius: 20px;

    box-shadow: 0 8px 20px rgba(0,0,0,0.05);

    max-width: 500px;

    margin: 0 auto;
}

.contact-btn {

    display: inline-block;

    margin-top: 20px;

    padding: 14px 28px;

    border-radius: 999px;

    text-decoration: none;

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

    box-shadow: 0 6px 15px rgba(0,0,0,0.05);

    transition: all 0.3s ease;
}

.contact-btn:hover {

    transform: translateY(-3px);
}



/* Footer Section */
#footer {

    padding: 80px 20px;

    background: #F6EFE8;

    text-align: center;

    border-top: 1px solid rgba(0,0,0,0.05);
}

.footer-container {

    max-width: 1200px;

    margin: 0 auto;
}


.footer-logo {

    font-family: 'Cormorant Garamond', serif;

    font-size: 3rem;

    font-weight: 500;

    margin-bottom: 10px;
}

.footer-tagline {

    margin-bottom: 30px;

    color: #666;
}

.footer-links {

    display: flex;

    justify-content: center;

    gap: 30px;

    margin-bottom: 40px;

    flex-wrap: wrap;
}

.footer-links a {

    color: #555;

    transition: 0.3s ease;
}


.footer-links a:hover {

    color: #000;
}

.footer-copy {

    margin-bottom: 10px;

    color: #777;
}

.footer-note {

    font-style: italic;

    color: #999;
}



/* Mobile-responsive ======================================================= */
@media (max-width: 768px) {

    /* Navbar */

    .nav-container {
        flex-direction: column;
        gap: 15px;
    }

    .nav-links {
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Services */

    .services-grid {
        flex-direction: column;
    }

    /* Projects */

    .portfolio-grid {
        flex-direction: column;
    }
    
    .service-card,
    .project-card {

        padding: 25px;
    }

}


/* =====================================================================================
Page: services
========================================================================================*/
#services-hero {

    padding: 140px 20px 100px;

    background: linear-gradient(
        to bottom,
        #F6EFE8,
        #FDF9F5
    );
}

.service-tags {

    display: flex;

    justify-content: center;

    gap: 15px;

    margin-top: 30px;

    flex-wrap: wrap;
}

.service-tags span {
    padding: 12px 20px;
    background: rgba(255,255,255,0.8);
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 5px 15px rgba(0,0,0,0.04);
}

.services-hero-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.services-hero-container h1 {
    font-size: 4rem;
    margin-bottom: 25px;
}

.services-hero-container p {
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.9;
}

#services-overview {

    padding: 100px 20px;

    background: #FDF9F5;
}

.service-card ul {

    list-style: none;

    padding: 0;

    margin: 0;
}

.service-card li {

    margin-bottom: 12px;

    color: #555;
}
#pricing {

    padding: 100px 20px;

    background: #F6EFE8;
}

.pricing-container {
    max-width: 1200px;
    margin: 0 auto;
}

.pricing-container h2 {
    text-align: center;
    margin-bottom: 60px;
}

.pricing-grid {
    display: flex;
    gap: 30px;
}

.pricing-card {

    flex: 1;

    padding: 35px;

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

    backdrop-filter: blur(10px);

    border-radius: 24px;

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

    box-shadow: 0 10px 30px rgba(0,0,0,0.05);

    transition: 0.3s ease;
}

.pricing-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}

.price {
    margin-top: 15px;
    font-weight: 600;
}

.pricing-card ul {

    list-style: none;

    padding: 0;

    margin-top: 20px;
}

.pricing-card li {

    margin-bottom: 12px;

    color: #555;
}

#process {

    padding: 100px 20px;

    background: #FDF9F5;
}


.process-container {
    max-width: 1200px;
    margin: 0 auto;
}

.process-container h2 {
    text-align: center;
    margin-bottom: 60px;
}

.process-grid {
    display: flex;
    gap: 30px;
}

.process-step {
    flex: 1;
    text-align: center;
    padding: 20px;
}

.process-step {

    flex: 1;

    padding: 30px;

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

    backdrop-filter: blur(10px);

    border-radius: 24px;

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

    box-shadow: 0 10px 30px rgba(0,0,0,0.05);

    transition: 0.3s ease;
}

.process-step:hover {

    transform: translateY(-8px);

    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}

.process-step h3 {

    font-size: 2rem;

    font-family: 'Cormorant Garamond', serif;

    margin-bottom: 15px;
}

#services-cta {
    padding: 120px 20px;
    background: #F6EFE8;
}

.cta-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.cta-container h2 {
    margin-bottom: 20px;
}

.cta-container p {
    max-width: 600px;
    margin: 0 auto 35px;
    line-height: 1.8;
}

.cta-btn {
    display: inline-block;
    padding: 14px 32px;
    background: white;
    color: #333;
    text-decoration: none;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    transition: 0.3s ease;
}

.cta-btn:hover {

    transform: translateY(-3px);

    box-shadow: 0 12px 25px rgba(0,0,0,0.08);
}


/* ==========================================
PAGE: PORTFOLIO 
=============================================*/
#portfolio-hero {

    padding: 140px 20px 100px;

    background: linear-gradient(
        to bottom,
        #F6EFE8,
        #FDF9F5
    );
}

.portfolio-hero-container {

    max-width: 800px;

    margin: 0 auto;

    text-align: center;
}

.portfolio-hero-container h1 {

    margin-bottom: 25px;
}

.portfolio-hero-container p {

    line-height: 1.8;
}

.projects-showcase {

    max-width: 1000px;

    margin: 0 auto;
}

.project-card {

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

    border-radius: 24px;

    padding: 35px;

    margin-bottom: 50px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.05);

    transition: 0.3s ease;
}

.project-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}


.project-card img {

    width: 100%;

    height: 300px;

    object-fit: cover;

    border-radius: 18px;

    margin-bottom: 25px;

    background: #eee;
}



.project-status {

    display: inline-block;

    margin: 15px 0;

    padding: 8px 16px;

    background: #F6EFE8;

    border-radius: 999px;
}

.project-btn {

    display: inline-block;

    margin-top: 15px;

    padding: 12px 24px;

    background: white;

    border-radius: 999px;

    text-decoration: none;

    color: #333;

    box-shadow: 0 5px 15px rgba(0,0,0,0.05);

    transition: 0.3s ease;
}

.project-btn:hover {

    transform: translateY(-2px);
}


/* About Page */
#about-hero {

    padding: 140px 20px 120px;

    background: linear-gradient(
        to bottom,
        #F6EFE8,
        #FDF9F5
    );
}

.about-hero-container {

    max-width: 800px;

    margin: 0 auto;

    text-align: center;
}

.about-hero-container h1 {

    margin-bottom: 25px;
}

.about-hero-container p {

    max-width: 650px;

    margin: 0 auto;

    line-height: 1.9;
}

#my-story {

    padding: 100px 20px;
}

.about-container {

    max-width: 850px;

    margin: 0 auto;
}

#my-story h2 {

    text-align: center;

    margin-bottom: 50px;
}

#my-story p {

    line-height: 2;

    margin-bottom: 25px;

    color: #555;
}

#beliefs {

    padding: 100px 20px;

    background: #FDF9F5;
}

#beliefs h2 {

    text-align: center;

    margin-bottom: 60px;
}

.belief-card {

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

    padding: 35px;

    border-radius: 24px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.05);

    transition: .3s ease;
}

.belief-card:hover {

    transform: translateY(-6px);
}

#about-me {

    padding: 100px 20px;
}

#about-me h2 {

    text-align: center;

    margin-bottom: 60px;
}

.about-grid {

    display: grid;

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

    gap: 25px;
}


.about-card {

    background: white;

    padding: 30px;

    text-align: center;

    border-radius: 22px;

    box-shadow: 0 8px 25px rgba(0,0,0,.05);

    transition: .3s ease;
}

.about-card:hover {

    transform: translateY(-5px);
}

.belief-card h3 {

    margin-bottom: 15px;
}
.about-card h3 {

    margin: 0;
}

/* Contact Page */
#contact-hero {

    padding: 140px 20px 120px;

    background: linear-gradient(
        to bottom,
        #F6EFE8,
        #FDF9F5
    );
}

.contact-hero-container {

    max-width: 800px;

    margin: 0 auto;

    text-align: center;
}

.contact-hero-container h1 {

    margin-bottom: 25px;
}

.contact-hero-container p {

    max-width: 650px;

    margin: 0 auto;

    line-height: 1.9;
}

#contact-info {

    padding: 100px 20px;
}

.contact-container {

    max-width: 1100px;

    margin: 0 auto;
}

.contact-container h2 {

    text-align: center;

    margin-bottom: 60px;
}

.contact-grid {

    display: grid;

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

    gap: 30px;
}

.contact-card {

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

    padding: 35px;

    border-radius: 24px;

    text-align: center;

    box-shadow: 0 10px 30px rgba(0,0,0,.05);

    transition: .3s ease;
}

.contact-card:hover {

    transform: translateY(-6px);
}

#contact-services {

    padding: 100px 20px;

    background: #FDF9F5;
}
#before-contact {

    padding: 100px 20px;
}

#before-contact p {

    max-width: 700px;

    margin: 20px auto;

    line-height: 2;

    text-align: center;
}

/*==================================================
ELSCII UI KIT
==================================================*/
.corner-flower{
    position:absolute;
    top:18px;
    right:18px;
    width:26px;

    z-index:5;

    pointer-events:none;

}

.washi-top{
    position:absolute;
    top:-10px;

    left:50%;

    transform:translateX(-50%) rotate(-3deg);

    width:90px;

    z-index:8;

}

.paper-corner{

    position:absolute;

    top:0;

    right:0;

    width:48px;

}

.coffee-ring{

    position:absolute;

    bottom:28px;

    right:30px;

    width:60px;

    opacity:.12;

}

.corner-leaf{
    position:absolute;
    bottom:18px;
    left:18px;
    width:42px;

}

.section-divider{
    display:flex;
    justify-content:center;
    margin:50px 0;
}

.story-tag{
    background:#fff;
    border-radius:999px;
    padding:8px 14px;
    box-shadow:
        0 8px 20px rgba(0,0,0,.08);
    font-size:.75rem;
    background:var(--paper);
}

/*==================================
SECTION HEADINGS
==================================*/

.section-heading{

    max-width:700px;

    margin:0 auto 80px;

    text-align:center;

    position:relative;

}
.section-chapter{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 18px;

    border-radius:999px;

    border:2px solid #8F7865;

    background:#FFF9F2;

    color:#8F7865;

    font-size:.78rem;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

}
.section-heading h2{

    margin-bottom:22px;

    position:relative;

    display:inline-block;

}
.section-heading h2::after{

    content:"";

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:-18px;

    width:70px;

    height:3px;

    background:#B79B83;

    border-radius:99px;

}
.section-heading p{

    max-width:560px;

    margin:auto;

}
.section-heading::before{

    content:"✿";

    position:absolute;

    top:-8px;

    left:50%;

    transform:translateX(-50%);

    font-size:20px;

    color:#D79BAF;

}

/*==================================
SCENE
==================================*/

.scene{
    position:relative;
    min-height:900px;
    overflow:hidden;
    display:flex;
    align-items:center;
}
.scene-background{
    position:absolute;
    inset:0;
    z-index:1;
    background:#efe6d9;
}
.scene-foreground{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:4;
}
.scene-layout{
    position:relative;
    z-index:3;
    width:min(1400px,92%);
    margin:auto;
    display:grid;
    grid-template-columns:
        1.15fr
        .85fr;
    align-items:center;
    gap:5rem;
}
.scene-character{
    position:relative;
    display:flex;
    justify-content:flex-start;
    align-items:flex-end;
    min-height:720px;
}
.character-placeholder{
    width:420px;
    height:620px;
    border:2px dashed #c4b19c;
    border-radius:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9f8970;
    background:rgba(255,255,255,.25);
}

.scene-character img{

    width:100%;

    display:block;

}

.scene-link{

    display:inline-flex;

    align-items:center;

    gap:.7rem;

    margin-top:18px;

    font-weight:600;

    text-decoration:none;

    color:var(--text-primary);

    position:relative;

}
.scene-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:2px;

    background:#B89D84;

    border-radius:999px;

}
.scene-link:hover{

    transform:translateX(8px);

}

.scene-link span{

    transition:all .4s ease;

}

.scene-link:hover span{

    transform:translateX(6px);

}

.journal-desk{
    position:relative;
    width:100%;
    max-width:560px;
    justify-self:end;
}
.journal-paper{

    position:relative;

    margin-left:auto;

    margin-right:7%;

    width:520px;

    padding:42px;

    background:var(--paper);

    border:2px solid #8F7865;

    border-radius:42px 32px 38px 28px;

    box-shadow:

        0 18px 40px rgba(70,50,35,.08);

    z-index:3;

}
.journal-paper::before{

    content:"";

    position:absolute;

    inset:10px;

    border:1px solid rgba(143,120,101,.18);

    border-radius:34px 28px 38px 26px;

    pointer-events:none;

}
.journal-paper h2{

    margin:18px 0 28px;

}
.journal-paper p{

    line-height:2;

    margin-bottom:20px;

}
.journal-note{

  position:absolute;

    bottom:-70px;

    right:-20px;

    width:230px;

    padding:24px;

    border-radius:24px 18px 26px 20px;

    border:2px solid #B89D84;

    background:#FFF5D8;

    transform:rotate(5deg);
}

.journal-cat{

    position:absolute;

    width:180px;

    top:-70px;

    left:50%;

    transform:translateX(-50%);

    z-index:20;
    
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.18));

}


/* Portfolio */
.project-workspace{

    position:relative;

}

.project-workspace::after{

    content:"";

    position:absolute;

    bottom:40px;
    left:50%;

    transform:translateX(-50%);

    width:85%;
    height:18px;

    background:rgba(120,92,58,.08);

    border-radius:999px;

    filter:blur(14px);

}
.featured-project{

    max-width:720px;

    margin:auto;

}
.project-clipboard{

    position:relative;

    background:var(--paper);

    border:2px solid #8F7865;

    border-radius:42px 34px 38px 30px;

    padding:28px;

}
.project-clipboard::before{

    content:"";

    position:absolute;

    inset:10px;

    border:1px solid rgba(143,120,101,.18);

    border-radius:34px 26px 32px 24px;

}
.project-preview{

    width:94%;

    margin:-40px auto 28px;

    transform:rotate(-1deg);

}
.project-content h3{

    margin:16px 0;

}
.project-tag{

    display:inline-block;

    padding:8px 16px;

    border-radius:999px;

    background:#FFF7EC;

    border:2px solid #B89D84;

}
.clipboard-clip{
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);

    width: 120px;
    height: 28px;

    background: linear-gradient(
        to bottom,
        #d9d1c7,
        #c7b9a7
    );

    border: 2px solid #8F7865;
    border-radius: 16px 16px 10px 10px;

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,.5),
        0 3px 8px rgba(0,0,0,.12);

    z-index: 5;
}
.project-board{
    position:relative;
    background:var(--paper);
    border:2px solid #8F7865;
    border-radius:40px 30px 36px 26px;
    padding:24px;
    transition:.4s ease;

}
.project-board::before{
    content:"";
    position:absolute;
    inset:8px;
    border:1px solid rgba(143,120,101,.18);
    border-radius:30px 22px 28px 20px;
    pointer-events:none;
}
.project-preview{
    width:88%;
    margin:-28px auto 22px;
    transform:rotate(-1deg);
}
.project-board:nth-child(2){
    margin-top:50px;
}
.project-board:nth-child(3){
    margin-top:20px;
}

/* Contact Page */
.scene-layout-center{

    display:flex;

    justify-content:center;

    align-items:center;

}
.contact-wrapper{

    width:min(760px,100%);

    text-align:center;

}
.letter-paper{

    position:relative;

    margin-top:50px;

    padding:50px;

    background:var(--paper);

    border:2px solid #8F7865;

    border-radius:44px 34px 42px 30px;

    box-shadow:

        0 20px 40px rgba(70,50,35,.08);

}
.letter-paper::before{

    content:"";

    position:absolute;

    inset:10px;

    border:1px solid rgba(143,120,101,.18);

    border-radius:34px 26px 30px 24px;

}
.farewell-note{

    margin-top:60px;

    opacity:.9;

}
.farewell-note span{

    display:block;

    margin-top:14px;

    font-style:italic;

}
.letter-seal{

    width:48px;
    height:48px;

    border-radius:50%;

    background:#B84A62;

    position:absolute;

    top:-20px;
    right:50px;

    box-shadow:
        inset 0 2px 6px rgba(255,255,255,.25),
        0 4px 10px rgba(0,0,0,.12);

}
.form-group{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-bottom:28px;

}
.form-group label{

    font-weight:600;

    color:var(--text-primary);

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

    width:100%;

    padding:16px 18px;

    border:2px solid rgba(143,120,101,.25);

    border-radius:18px;

    background:#FFFDF8;

    font-family:inherit;

    transition:.3s ease;

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

    outline:none;

    border-color:#B89D84;

    box-shadow:

        0 0 0 4px rgba(184,157,132,.15);

}
textarea{

    resize:none;

}
.letter-button{

    margin-top:18px;

}

.contact-options{

    display:flex;

    flex-direction:column;

    gap:20px;

    margin-top:40px;

}

.contact-option{

    display:flex;

    align-items:center;

    gap:24px;

    padding:24px;

    background:#FFFDF8;

    border:2px solid rgba(143,120,101,.18);

    border-radius:24px;

    text-decoration:none;

    color:inherit;

    transition:all .35s ease;

}
.contact-option:hover{

    transform:translateY(-4px);

    border-color:#B89D84;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

}
.contact-icon{

    font-size:2rem;

    width:70px;

    display:flex;

    justify-content:center;

    align-items:center;

}
.contact-content h3{

    margin-bottom:8px;

}
.contact-content p{

    margin:0;

    opacity:.8;

}

/* ==========================================
    MOBILE RESPONSIVE
=============================================*/
@media(max-width:1000px){

.scene-layout{

    grid-template-columns:1fr;

}

.scene-character{

    justify-content:center;

    min-height:420px;

}

.journal-desk{

    justify-self:center;

}

}