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

:root{
    --slate:#a1b5b8;
    --slate-light:#d4e0e2;
    --slate-dark:#5a8088;
    --mist:#c8d8db;
    --mist-light:#e4ecee;
    --navy:#10233f;
    --teal:#076271;
    --teal-light:#c8d8db;
    --teal-dark:#044e5c;
    --cream:#ebece4;
    --ink:#10233f;
    --taupe:#766a62;
    --gold:#b09a5a;
    --serif:"Baskervville", Georgia, serif;
    --script:"Ruluko", cursive;
    --sans:'Nunito', sans-serif;
    --transition:.3s ease;
    --card-bg:white;
    --nav-bg:#ebece4eb
}

body.dark-mode{
    --teal-light:#2d3250;
    --cream:#2d3250;
    --mist-light:#424769;
    --slate:#7077a1;
    --mist:#424769;
    --slate-dark:#373c5a;
    --slate-light:#2d3250;
    --ink:#f6b17a;
    --navy:#f6b17a;
    --taupe:#d1d5e3;
    --teal:#f6b17a;
    --gold:#ffd4a3;
    --card-bg:#424769;
    --nav-bg:#2d3250f2
}

html{
    scroll-behavior:smooth
}

body{
    background-color:var(--teal-light);
    color:var(--ink);
    font-family:var(--sans);
    transition:background-color var(--transition), color var(--transition);
    font-size:15px;
    line-height:1.7;
    overflow-x:hidden
}

p{
    font-family:'Nunito', sans-serif
}

nav{
    z-index:200;
    background:var(--nav-bg);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border-bottom:3px solid var(--teal);
    transition:background var(--transition), border-color var(--transition);
    justify-content:space-between;
    align-items:center;
    padding:1.1rem 3rem;
    display:flex;
    position:sticky;
    top:0
}

.nav-logo{
    font-family:var(--script);
    color:var(--ink);
    font-size:27px;
    text-decoration:none
}

.nav-links{
    gap:2.5rem;
    list-style:none;
    display:flex
}

.nav-links a{
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--taupe);
    font-size:11px;
    font-weight:500;
    text-decoration:none;
    transition:color .2s
}

.nav-links a:hover{
    color:var(--navy)
}

.nav-toggle{
    cursor:pointer;
    background:0 0;
    border:none;
    flex-direction:column;
    gap:5px;
    padding:4px;
    display:none
}

.nav-toggle span{
    background:var(--ink);
    width:22px;
    height:1.5px;
    display:block
}

.hero{
    text-align:center;
    background:var(--cream);
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-height:100svh;
    padding:5rem 2rem 6rem;
    display:flex;
    position:relative;
    overflow:hidden
}

.hero-content{
    z-index:2;
    max-width:700px;
    animation:1s both fadeUp;
    position:relative
}

@keyframes fadeUp{
    0%{
        opacity:0;
        transform:translateY(30px)
    }

    to{
        opacity:1;
        transform:translateY(0)
    }

}

.hero-eyebrow{
    font-family:var(--script);
    color:var(--navy);
    margin-bottom:.6rem;
    font-size:35px;
    animation:1s .1s both fadeUp
}

.hero h1{
    font-family:var(--serif);
    margin-bottom:1.4rem;
    font-size:clamp(54px,9vw,92px);
    font-weight:300;
    line-height:1.05;
    animation:1s .2s both fadeUp
}

em{
    color:var(--gold);
    font-style:italic
}

.hero-content>p{
    font-size:20px
}

.hero-tagline{
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--taupe);
    margin-bottom:2.2rem;
    font-size:15px;
    font-weight:400;
    animation:1s .3s both fadeUp
}

.hero-tags{
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin-top:25px;
    margin-bottom:2.8rem;
    animation:1s .4s both fadeUp;
    display:flex
}

.pill{
    letter-spacing:.04em;
    border-radius:99px;
    padding:6px 18px;
    font-size:12px
}

.pill-slate{
    background:var(--slate);
    color:#10233f
}

.pill-mist{
    background:var(--mist);
    color:#076271
}

.pill-teal{
    background:var(--teal);
    color:#ebece4
}

body.dark-mode .pill-slate{
    background:var(--slate);
    color:#fff;
    border:1px solid #0000
}

body.dark-mode .pill-mist{
    background:var(--gold);
    color:#2d3250;
    border:1px solid #0000
}

body.dark-mode .pill-teal{
    background:var(--taupe);
    color:#2d3250;
    border:1px solid #0000
}

.hero-cta{
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink);
    border-bottom:1.5px solid var(--slate-dark);
    padding-bottom:3px;
    font-size:12px;
    text-decoration:none;
    transition:color .2s,border-color .2s;
    animation:1s .5s both fadeUp;
    display:inline-block
}

.hero-cta:hover{
    color:var(--navy);
    border-color:var(--navy)
}

.scroll-hint{
    z-index:2;
    flex-direction:column;
    align-items:center;
    gap:6px;
    animation:1s 1s both fadeUp;
    display:flex;
    position:absolute;
    bottom:2rem;
    left:50%;
    transform:translate(-50%)
}

.scroll-hint span{
    font-family:var(--script);
    color:var(--taupe);
    font-size:14px
}

.scroll-line{
    background:var(--taupe);
    width:1px;
    height:38px;
    animation:2.2s ease-in-out 1.5s infinite lineDrop
}

@keyframes lineDrop{
    0%,to{
        opacity:.25;
        transform-origin:top;
        transform:scaleY(.5)
    }

    50%{
        opacity:1;
        transform:scaleY(1)
    }

}

.section{
    padding:6rem 2rem
}

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

.section-label{
    font-family:var(--script);
    color:var(--navy);
    margin-bottom:.2rem;
    font-size:21px
}

.section-heading{
    font-family:var(--serif);
    margin-bottom:2.5rem;
    font-size:clamp(32px,5vw,48px);
    font-weight:300;
    line-height:1.18
}

#about{
    background:var(--teal-light);
    position:relative;
    overflow:hidden
}

#about:after{
    content:"";
    background:var(--teal-light);
    filter:blur(70px);
    opacity:.28;
    pointer-events:none;
    border-radius:50%;
    width:350px;
    height:350px;
    position:absolute;
    top:-80px;
    right:-80px
}

.about-layout{
    z-index:1;
    grid-template-columns:1fr 1.1fr;
    align-items:start;
    gap:5rem;
    display:grid;
    position:relative
}

.about-card{
    background:var(--card-bg);
    transition:background var(--transition);
    border-radius:20px;
    padding:2rem;
    box-shadow:0 4px 28px #b48c821f
}

.about-initials{
    background:var(--slate);
    width:70px;
    height:70px;
    font-family:var(--script);
    color:var(--ink);
    border-radius:50%;
    justify-content:center;
    align-items:center;
    margin-bottom:1rem;
    font-size:28px;
    display:flex
}

.about-card h3{
    font-family:var(--serif);
    margin-bottom:.2rem;
    font-size:21px;
    font-weight:400
}

.about-card .role{
    color:var(--taupe);
    letter-spacing:.1em;
    text-transform:uppercase;
    font-size:11px
}

.about-divider{
    border:none;
    border-top:1px solid var(--mist);
    margin:1.2rem 0
}

.about-stat{
    justify-content:space-between;
    align-items:center;
    padding:.4rem 0;
    font-size:13px;
    display:flex
}

.about-stat .stat-label{
    color:var(--taupe)
}

.about-stat .stat-val{
    font-family:var(--script);
    color:var(--navy);
    font-size:18px
}

.about-text{
    font-family:var(--serif);
    font-size:19px;
    font-weight:300;
    line-height:1.9
}

.about-text p+p{
    margin-top:1.2rem
}

#portfolio{
    background:var(--cream)
}

.portfolio-intro{
    max-width:560px;
    font-family:var(--serif);
    color:var(--taupe);
    margin-bottom:3rem;
    font-size:18px;
    font-weight:300;
    line-height:1.8
}

.portfolio-grid{
    grid-template-columns:repeat(2,1fr);
    gap:22px;
    display:grid
}

.portfolio-card{
    border-radius:18px;
    flex-direction:column;
    padding:2.2rem;
    transition:transform .25s,box-shadow .25s;
    display:flex
}

.portfolio-card:hover{
    transform:translateY(-5px);
    box-shadow:0 14px 40px #00000014
}

.portfolio-category{
    font-family:var(--script);
    margin-bottom:.5rem;
    font-size:50px
}

.portfolio-card{
    background:var(--card-bg);
    transition:background var(--transition), transform .25s
}

.sc-slate .portfolio-category{
    color:var(--slate-dark)
}

.sc-mist .portfolio-category{
    color:var(--navy)
}

.sc-teal .portfolio-category{
    color:var(--teal-dark)
}

.portfolio-card h3{
    font-family:var(--serif);
    margin-bottom:.7rem;
    font-size:22px;
    font-weight:400
}

.portfolio-card p{
    color:var(--taupe);
    flex:1;
    font-size:18px;
    line-height:1.75
}

.portfolio-tags{
    flex-wrap:wrap;
    gap:7px;
    margin-top:1.2rem;
    display:flex
}

.portfolio-cta{
    letter-spacing:.12em;
    text-transform:uppercase;
    border-bottom:1px solid;
    align-self:flex-start;
    margin-top:1.4rem;
    padding-bottom:2px;
    font-size:11px;
    font-weight:500;
    text-decoration:none;
    transition:opacity .2s;
    display:inline-block
}

.portfolio-cta:hover{
    opacity:.65
}

.sc-slate .portfolio-cta{
    color:var(--slate-dark)
}

.sc-mist .portfolio-cta{
    color:var(--navy)
}

.sc-teal .portfolio-cta{
    color:var(--teal-dark)
}

body.dark-mode .portfolio-category,body.dark-mode .service-icon,body.dark-mode .portfolio-cta{
    color:var(--ink)
}

#services{
    background:var(--slate-dark)
}

.services-intro{
    max-width:560px;
    font-family:var(--sans serif);
    color:var(--taupe);
    transition:color var(--transition);
    margin-bottom:3rem;
    font-size:18px;
    font-weight:300;
    line-height:1.8
}

body:not(.dark-mode) #services .services-intro,body:not(.dark-mode) #services .section-heading,body:not(.dark-mode) #services .section-label{
    color:#ffffffe0
}

.services-grid{
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    display:grid
}

.service-card{
    border-radius:18px;
    padding:2rem;
    transition:transform .25s,box-shadow .25s
}

.service-card:hover{
    transform:translateY(-6px);
    box-shadow:0 14px 40px #00000012
}

.sc-slate,.sc-mist,.sc-teal,.sc-cream{
    background:var(--card-bg);
    border:1px solid var(--taupe);
    transition:background var(--transition), border-color var(--transition)
}

body:not(.dark-mode) .sc-slate{
    background:var(--slate-light);
    border:1px solid var(--slate)
}

body:not(.dark-mode) .sc-mist{
    background:var(--mist-light);
    border:1px solid var(--mist)
}

body:not(.dark-mode) .sc-teal{
    background:var(--teal-light);
    border:1px solid var(--teal)
}

body:not(.dark-mode) .sc-cream{
    background:var(--cream);
    border:1px solid #b8bdb2
}

.service-icon{
    font-family:var(--script);
    margin-bottom:.8rem;
    font-size:34px;
    display:block
}

.sc-slate .service-icon{
    color:var(--slate-dark)
}

.sc-mist .service-icon{
    color:var(--navy)
}

.sc-teal .service-icon{
    color:var(--teal-dark)
}

.sc-cream .service-icon{
    color:#766a62
}

.service-card h3{
    font-family:var(--serif);
    margin-bottom:.3rem;
    font-size:23px;
    font-weight:400
}

.service-card h4{
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--taupe);
    margin-bottom:.6rem;
    font-size:11px;
    font-weight:500
}

.service-card p{
    color:var(--taupe);
    font-size:13.5px;
    line-height:1.75
}

.service-tags{
    flex-wrap:wrap;
    gap:7px;
    margin-top:1.2rem;
    display:flex
}

.service-tag{
    color:var(--taupe);
    letter-spacing:.05em;
    background:#fff;
    border-radius:99px;
    padding:3px 12px;
    font-size:11px
}

body.dark-mode .service-tag{
    color:#d1d5e3;
    background:#ffffff1f
}

#testimonials{
    background:var(--mist-light);
    position:relative;
    overflow:hidden
}

body.dark-mode #testimonials{
    background:#2d3250
}

body.dark-mode .testimonial-card{
    background:#505880;
    border:1px solid #ffffff24;
    box-shadow:0 4px 24px #00000040
}

#testimonials:after{
    content:"";
    background:var(--teal);
    filter:blur(70px);
    opacity:.15;
    pointer-events:none;
    border-radius:50%;
    width:320px;
    height:320px;
    position:absolute;
    top:-80px;
    right:-80px
}

.carousel-viewport{
    z-index:1;
    width:100%;
    position:relative;
    overflow:hidden
}

.testimonials-track{
    will-change:transform;
    gap:20px;
    transition:transform .6s cubic-bezier(.23,1,.32,1);
    display:flex
}

.testimonial-card{
    background:var(--card-bg);
    transition:background var(--transition);
    border-radius:18px;
    flex-direction:column;
    flex:0 0 100%;
    min-height:250px;
    padding:2.5rem;
    display:flex;
    box-shadow:0 4px 20px #0000000d
}

.testimonial-quote{
    font-family:var(--serif);
    color:var(--taupe);
    flex:1;
    margin-bottom:1.5rem;
    font-size:16.5px;
    font-style:italic;
    font-weight:300;
    line-height:1.8
}

.testimonial-author{
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink);
    margin-top:auto;
    font-size:12px;
    font-weight:500
}

.testimonial-role{
    color:var(--taupe);
    margin-top:3px;
    font-size:11px
}

.carousel-controls{
    justify-content:center;
    gap:1.5rem;
    margin-top:2.5rem;
    display:flex
}

.carousel-btn{
    background:var(--teal);
    color:#fff;
    cursor:pointer;
    border:none;
    border-radius:50%;
    justify-content:center;
    align-items:center;
    width:48px;
    height:48px;
    font-size:1.2rem;
    transition:background .2s;
    display:flex
}

.carousel-btn:hover{
    background:var(--teal-dark)
}

.carousel-btn:disabled{
    background:var(--slate);
    opacity:.4;
    cursor:not-allowed
}

@media (min-width: 768px){
    .testimonial-card{
        flex:0 0 calc(50% - 10px)
    }

}

#education{
    background:var(--teal-light);
    position:relative;
    overflow:hidden
}

#education:before{
    content:"";
    background:var(--mist);
    filter:blur(70px);
    opacity:.2;
    pointer-events:none;
    border-radius:50%;
    width:360px;
    height:360px;
    position:absolute;
    bottom:-90px;
    left:-90px
}

.timeline{
    z-index:1;
    padding-left:2.8rem;
    position:relative
}

.timeline:before{
    content:"";
    background:var(--teal);
    opacity:.5;
    border-radius:2px;
    width:2px;
    position:absolute;
    top:8px;
    bottom:8px;
    left:0
}

.timeline-item{
    margin-bottom:2.8rem;
    position:relative
}

.timeline-item:last-child{
    margin-bottom:0
}

.timeline-dot{
    width:14px;
    height:14px;
    box-shadow:0 0 0 2px var(--teal);
    border:2px solid #fff;
    border-radius:50%;
    position:absolute;
    top:18px;
    left:-2.8rem;
    transform:translate(-6px)
}

.dot-slate{
    background:var(--slate-dark)
}

.dot-mist{
    background:var(--navy)
}

.dot-teal{
    background:var(--teal-dark)
}

.timeline-year{
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--taupe);
    margin-bottom:.5rem;
    font-size:11px;
    font-weight:500
}

.timeline-card{
    background:var(--card-bg);
    transition:background var(--transition);
    border-radius:16px;
    padding:1.8rem 2rem;
    transition:transform .25s,box-shadow .25s;
    box-shadow:0 2px 16px #0000000f
}

.timeline-card:hover{
    transform:translate(4px);
    box-shadow:0 6px 28px #00000017
}

.timeline-card .html-credential{
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--navy);
    margin-bottom:.3rem;
    font-size:11px;
    font-weight:500
}

.timeline-card h3{
    font-family:var(--serif);
    margin-bottom:.6rem;
    font-size:22px;
    font-weight:400
}

.timeline-card p{
    color:var(--taupe);
    font-size:13.5px;
    line-height:1.75
}

#resources{
    background:var(--slate-light);
    position:relative;
    overflow:hidden
}

body.dark-mode .acc-slate,body.dark-mode .acc-mist,body.dark-mode .acc-teal,body.dark-mode .acc-cream{
    background:#505880;
    border:1px solid #ffffff24;
    box-shadow:0 2px 18px #00000040
}

body.dark-mode .acc-slate summary,body.dark-mode .acc-mist summary,body.dark-mode .acc-teal summary,body.dark-mode .acc-cream summary,body.dark-mode .acc-slate .acc-toggle,body.dark-mode .acc-mist .acc-toggle,body.dark-mode .acc-teal .acc-toggle,body.dark-mode .acc-cream .acc-toggle{
    color:#d1d5e3
}

#resources:after{
    content:"";
    background:var(--teal);
    filter:blur(70px);
    opacity:.22;
    pointer-events:none;
    border-radius:50%;
    width:360px;
    height:360px;
    position:absolute;
    bottom:-90px;
    right:-90px
}

.resources-intro{
    max-width:560px;
    font-family:var(--sans serif);
    color:var(--taupe);
    margin-bottom:3rem;
    font-size:18px;
    font-weight:300;
    line-height:1.8
}

.accordion{
    z-index:1;
    flex-direction:column;
    gap:14px;
    display:flex;
    position:relative
}

.accordion-item{
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 2px 14px #0000000d
}

.accordion-item summary{
    cursor:pointer;
    font-family:var(--serif);
    -webkit-user-select:none;
    user-select:none;
    justify-content:space-between;
    align-items:center;
    padding:1.5rem 2rem;
    font-size:21px;
    font-weight:400;
    list-style:none;
    transition:opacity .2s;
    display:flex
}

.accordion-item summary::-webkit-details-marker{
    display:none
}

.accordion-item summary:hover{
    opacity:.8
}

.acc-toggle{
    flex-shrink:0;
    margin-left:1rem;
    font-size:24px;
    font-weight:300;
    line-height:1;
    transition:transform .3s
}

.accordion-item[open] .acc-toggle{
    transform:rotate(45deg)
}

.accordion-body{
    padding:0 2rem 1.75rem
}

.accordion-body>p{
    font-family:var(--serif);
    color:var(--taupe);
    margin-bottom:1rem;
    font-size:17px;
    font-weight:300;
    line-height:1.85
}

details[open] .accordion-body{
    animation:.3s accordionOpen
}

@keyframes accordionOpen{
    0%{
        opacity:0;
        transform:translateY(-8px)
    }

    to{
        opacity:1;
        transform:translateY(0)
    }

}

.acc-divider{
    opacity:.25;
    border:none;
    border-top:1px solid;
    margin-bottom:1.25rem
}

.acc-slate{
    background:var(--slate-light);
    border:1px solid var(--slate)
}

.acc-mist{
    background:var(--mist-light);
    border:1px solid var(--mist)
}

.acc-teal{
    background:var(--teal-light);
    border:1px solid var(--slate)
}

.acc-cream{
    background:var(--cream);
    border:1px solid #b8bdb2
}

.acc-slate summary,.acc-slate .acc-toggle{
    color:var(--slate-dark)
}

.acc-mist summary,.acc-mist .acc-toggle{
    color:var(--navy)
}

.acc-teal summary,.acc-teal .acc-toggle{
    color:var(--teal-dark)
}

.acc-cream summary,.acc-cream .acc-toggle{
    color:#766a62
}

.acc-slate .acc-divider{
    border-color:var(--slate-dark)
}

.acc-mist .acc-divider{
    border-color:var(--navy)
}

.acc-teal .acc-divider{
    border-color:var(--teal-dark)
}

.acc-cream .acc-divider{
    border-color:#766a62
}

.resource-links{
    flex-direction:column;
    gap:8px;
    display:flex
}

.resource-link{
    background:var(--card-bg);
    transition:transform .2s, box-shadow .2s, background var(--transition);
    color:var(--ink);
    border-radius:10px;
    align-items:flex-start;
    gap:.8rem;
    padding:.8rem 1rem;
    text-decoration:none;
    transition:transform .2s,box-shadow .2s;
    display:flex;
    box-shadow:0 1px 6px #0000000a
}

.resource-link:hover{
    transform:translate(4px);
    box-shadow:0 3px 14px #00000014
}

.resource-link strong{
    margin-bottom:1px;
    font-size:13.5px;
    font-weight:500;
    display:block
}

.resource-link span{
    color:var(--taupe);
    font-size:12px
}

#contact{
    background:var(--teal-light);
    position:relative;
    overflow:hidden
}

#contact:before{
    content:"";
    background:var(--mist);
    filter:blur(80px);
    opacity:.28;
    pointer-events:none;
    border-radius:50%;
    width:450px;
    height:450px;
    position:absolute;
    bottom:-100px;
    left:-100px
}

.contact-layout{
    z-index:1;
    grid-template-columns:1fr 1fr;
    align-items:start;
    gap:5rem;
    display:grid;
    position:relative
}

.contact-intro{
    font-family:var(--sans serif);
    color:var(--taupe);
    margin-bottom:2rem;
    font-size:18px;
    font-weight:300;
    line-height:1.85
}

.contact-links{
    flex-direction:column;
    gap:1rem;
    display:flex
}

.contact-link{
    color:var(--ink);
    background:var(--card-bg);
    transition:transform .2s, box-shadow .2s, background var(--transition);
    border-radius:14px;
    align-items:center;
    gap:1rem;
    padding:1rem 1.2rem;
    text-decoration:none;
    transition:transform .2s,box-shadow .2s;
    display:flex;
    box-shadow:0 2px 14px #0000000d
}

.contact-link:hover{
    transform:translate(5px);
    box-shadow:0 4px 22px #00000017
}

.contact-link-icon{
    border-radius:10px;
    flex-shrink:0;
    justify-content:center;
    align-items:center;
    width:40px;
    height:40px;
    font-size:17px;
    display:flex
}

.icon-slate{
    background:var(--slate)
}

.icon-mist{
    background:var(--mist)
}

.icon-teal{
    background:var(--teal)
}

.icon-cream{
    background:var(--slate-dark)
}

.c-label{
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--taupe);
    margin-bottom:1px;
    font-size:10px;
    display:block
}

.c-value{
    font-size:14px;
    font-weight:500
}

.contact-note{
    background:var(--card-bg);
    transition:background var(--transition);
    border-radius:18px;
    padding:2.5rem;
    position:relative;
    transform:rotate(1.5deg);
    box-shadow:0 4px 28px #b48c821a
}

.contact-note:before{
    content:"";
    background:var(--slate);
    border-radius:99px;
    width:38px;
    height:6px;
    position:absolute;
    top:14px;
    left:50%;
    transform:translate(-50%)
}

.contact-note-heading{
    font-family:var(--script);
    color:var(--navy);
    margin-top:.5rem;
    margin-bottom:1rem;
    font-size:28px
}

.contact-note p{
    font-family:var(--serif);
    color:var(--taupe);
    font-size:17px;
    font-weight:300;
    line-height:1.8
}

.note-lines{
    flex-direction:column;
    gap:10px;
    margin-top:1.5rem;
    display:flex
}

.note-line{
    background:var(--teal-light);
    height:1px
}

.contact-form{
    background:var(--card-bg);
    transition:background var(--transition);
    border-radius:18px;
    flex-direction:column;
    gap:1.2rem;
    padding:2.5rem;
    display:flex;
    box-shadow:0 4px 28px #b48c821a
}

.contact-form h4{
    font-family:var(--script);
    color:var(--gold);
    margin-bottom:.8rem;
    font-size:21px
}

.form-group{
    flex-direction:column;
    gap:.4rem;
    display:flex
}

.form-group label{
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--taupe);
    font-size:10px;
    font-weight:500
}

.form-group input,.form-group textarea{
    font-family:var(--sans);
    color:var(--ink);
    background:var(--teal-light);
    resize:none;
    border:1px solid #0000;
    border-radius:10px;
    outline:none;
    padding:.75rem 1rem;
    font-size:14px;
    transition:border-color .2s,background .2s
}

.form-group input::placeholder,.form-group textarea::placeholder{
    color:var(--taupe);
    opacity:.7
}

.form-group input:focus,.form-group textarea:focus{
    border-color:var(--teal);
    background:#fff
}

.form-submit{
    font-family:var(--sans);
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#fff;
    background:var(--teal);
    cursor:pointer;
    border:none;
    border-radius:10px;
    align-self:flex-start;
    padding:.85rem 1.5rem;
    font-size:12px;
    font-weight:500;
    transition:background .2s
}

.form-submit:hover{
    background:var(--teal-dark)
}

.contact-references{
    color:var(--taupe);
    letter-spacing:.04em;
    margin-top:1rem;
    font-size:12px
}

footer{
    text-align:center;
    background:var(--cream);
    color:var(--taupe);
    border-top:1px solid #d2b4aa66;
    padding:2.5rem;
    font-size:12px
}

footer .footer-name{
    font-family:var(--script);
    color:var(--slate-dark);
    font-size:17px
}

body.dark-mode footer .footer-name{
    color:#f6b17a
}

@media (max-width: 680px){
    nav{
        padding:1rem 1.5rem
    }

    .nav-toggle{
        display:flex
    }

    .nav-links{
        border-bottom:1px solid var(--slate);
        background:#fdf8f4f7;
        flex-direction:column;
        align-items:center;
        padding:1rem 0;
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0
    }

    .nav-links.open{
        display:flex
    }

    .nav-links li{
        text-align:center;
        width:100%
    }

    .nav-links a{
        padding:.85rem;
        display:block
    }

    .hero h1{
        font-size:48px
    }

    .about-layout{
        grid-template-columns:1fr;
        gap:2rem
    }

    .portfolio-grid,.testimonials-grid{
        grid-template-columns:1fr
    }

    .contact-layout{
        grid-template-columns:1fr;
        gap:2.5rem
    }

    .contact-note{
        transform:none
    }

    .timeline{
        padding-left:2rem
    }

    .timeline-dot{
        left:-2rem
    }

    .section{
        padding:4rem 1.25rem
    }

}

@media (max-width: 480px){
    .services-grid{
        grid-template-columns:1fr
    }

}

.reveal{
    opacity:0;
    transition:opacity .7s,transform .7s;
    transform:translateY(26px)
}

.reveal.visible{
    opacity:1;
    transform:translateY(0)
}